摘要: 从最初进入电子设备领域,旋钮和刻度盘的由最初的功能性设计转变为时尚的外观设计元素,比如在移动app中。这种转变并意外,旋钮和刻度盘不需要占用移动设备的太多空间,并可以简单地为用户提供一些列的参数和数据。 ...

 
 
从最初进入电子设备领域,旋钮和刻度盘的由最初的功能性设计转变为时尚的外观设计元素,比如在移动app中。
 
这种转变并意外,旋钮和刻度盘不需要占用移动设备的太多空间,并可以简单地为用户提供一些列的参数和数据。旋钮和刻度有着先天触屏友好型的外观,方便开发者在其中添加多项功能,可以给用户审美上的愉悦和真实世界中的协调感。
 
以下列出的是一些很不错的设计案例,不过这次推荐的都是圆形的旋钮,我们也刚好看看同样一个功能组件上不同的设计风格和效果。
 
Braun radio app by Nicklas Alejandro:奶油色让app的界面看起来非常平滑文雅。音量旋钮有少许渐变和微妙的阴影。
 
Radio app for iPhone by Sebastian Zetko:温柔的怀旧氛围,微妙的草书字体以及平滑的玻璃仪表盘。
 
myTransistor by Alejandro Rao:复古外观,用于着重表现工业革命早期科技的蒸汽朋克设计,猛烈的抓痕,绿色的抛光背景以及抢眼的老式收音机式旋钮。
 
Music iOS app by Sylvester Wilmott:与前边几个列子刚好相反,这个设计极为精细,现代化的外观充分体现了仿真设计。
 
Music player and voice recorder interface by Zsolt Baritz:强烈依赖现实主义的设计风格,将玻璃光泽效果、纹理以及字体很好地融为一体。中央旋钮和开关、刻度盘看起来都非常棒。
 
Mixer elements by Uriel Albarran O:圆滑的精确的黑色外观,占据大量空间的主按钮给人愉悦舒适的感觉。
 
Bikester mine v.2 by Michael Sambora:用红色、绿色和白色有效地组织了大量数据。 
 
Radio by Terrence:很好地平衡了金属按钮和扁平面板。整洁清爽的图标,字体以及头部的动态纹理传达了简洁清晰的外观。
 
Close Up by arjun/aj:这是一个优雅的收音机app设计,有着整齐美观优雅的外观。旋钮上的彩色进度条跃然而出,其余背景则采用了扁平化的元素。
 
Extra Cold Finder iOS by Emile Rohlandt:用淡灰和蓝色打造了平静中透露着活跃的氛围。
 
Air conditioning controller by Kingyo xie:现代化的极简设计风格,珊瑚红和白色自然融合。稍有凸出效果的旋钮搭配着设计精妙的进度条。
 
Groove! Simple metronome App by Tom Reinert:平滑的黑色界面,略带噪点效果中渗入了跃动的蓝色。
 
Retro Caller by Zsolt Baritz:模仿老式电话设计的界面,巧妙地运用了金属拨号键盘,带来了浓浓的复古气息。
 
Infiniti iPhone App by Muhsin Abdul Sathar:谨慎黑和鲜亮紫的优雅搭配,一是为了对所有的图形元素负责,二是突出中间的旋钮、字体以及图标。
 
SeaStatus iOS App by Ian Mesa:把整洁、优雅以及充满活力的加速设计融合在扁平化设计当中。
 
Gas combi remote control app by Ali O:干净清晰的界面,有冷色和大量自由空间营造出了微凉的感觉。微妙的阴影和光滑的渐变塑造了三维的视觉效果。
 
Celia’s Weather by Celia Sun:一个天气类app的UI设计,用亮色冲淡了整体透露出的严谨严肃。
 
Remote by Caspian Ievers:简约中彰显着现代和雅致的设计感。设计师用屏幕的中间部分来展示了一个凸起的多彩旋钮。
 
Old Futuristic Radio by Tobia Crivellari:真实的仿真界面和控件。
 
Music Player App by Emile Rohlandt:暗色的UI,整体时尚简约,同时有一个闪亮的旋钮。
 
Music Player App by Revival Pixel:美妙的金色和有着金属光泽的旋钮透出了暖暖的感觉。
 
 
Alarm Clock App by Samuel Bednár:带有metro风格的美学设计,很好地整和了图形和导航项目。
 
T3 Player App:体现了设计大师 Dieter Rams鲜明简约的设计风格,将Dieter Rams的经典作品--博朗T3口袋收音机—搬到了iPhone里。细腻简约的设计让人仿佛回到了那段黄金时代。
 
综述
旋钮和刻度盘被广泛用在音乐播放器和允许用户自由调节参数范围的应用上,为用户提供了优秀的控件和便利的用户体验,同时也为界面设计做了很好的补充。

23个移动app界面上的旋钮和刻度盘设计示例的更多相关文章

  1. iOS APP打包上传到APPstore的最新步骤

    一.前言: 作为一名iOS开发者,把辛辛苦苦开发出来的App上传到App Store是件必要的事.但是很多人还是不知道该怎么上传到App Store上 下面就来详细讲解一下具体流程步骤. 二.准备: ...

  2. IOS与Android APP界面设计规范要点

    IOS篇 一.尺寸及分辨率 iPhone界面尺寸:320*480.640*960.640*1136 iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×10 ...

  3. APP设计尺寸规范大全,APP界面设计新手教程【官方版】(转)

    正值25学堂一周年之际,同时站长和APP设计同仁们在群里(APP界面设计 UI设计交流群,APP界面设计⑥群 APPUI设计③群58946771 APP设计资源⑤群 386032923欢迎大家加入交流 ...

  4. App界面交互设计规范

    策划007-App界面交互设计规范 字数1805 阅读3544 评论20 喜欢154 交互设计规范 在上篇<策划006-APP界面设计风格>确定下来后,产品经理(兼交互设计)还不用着急将所 ...

  5. App界面交互设计规范(转)

    在上篇<APP界面设计风格>确定下来后,产品经理(兼交互设计)还不用着急将所有的交互稿扔给设计师进行细致的界面设计.在细节设计启动前,拉上设计师和安卓前端开发.ios前端开发一起商议确定设 ...

  6. App Store上下载和安装Xcode

    App Store上下载和安装Xcode Xcode的下载和安装 要编写一个Sprite Kit程序,需要使用到Xcode开发工具.本节将主要讲解此工具的两种下载和安装方式:一种是在App Store ...

  7. 跟我一起学extjs5(05--主界面上增加顶部和底部区域)

    跟我一起学extjs5(05--主界面上增加顶部和底部区域)         这一节为主界面加一个顶部区域和底部区域. 一个管理系统的界面能够粗分为顶部标题部分.中间数据展示和处理的部分.底部备注和状 ...

  8. APP界面设计之页面布局的22条基本原则

    移动 APP 页面布局(Layout)是我们设计 app 界面的时候,最主要的设计任务.一个 app 的好与不好,很大部分取决于移动 APP 页面布局的合理性. 下图为 APP 最原始的布局模型. 页 ...

  9. app界面设计字体规范

    通过对不同类型的app进行总结,总结出app的字体规范. 一.字体选择 1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方.英文字体是: San Francisco 2.Android ...

随机推荐

  1. Vs2010中rdlc报表绑定DataTable数据源

    首先,新建一个网站,接着添加数据集,并且命名为student,如下图所示: 在该数据集对象上面添加datatable,并且设置列名,如下图所示: 添加一张报表,命名为student,如下图所示: 向报 ...

  2. (转)ASP.net中Timer无刷新定时器.

    Timer控件要实现无刷新,得用到ajax技术 首先得添加一个ScriptManager控件,然后再添加一个UpdatePanel用于存放Timer控件内容的,就可以实现无刷新了.下面是详细的内容: ...

  3. 主机访问 虚拟机web注意事项

    在这里, 我通过NAT的方式, 通过主机访问虚拟机. 需要做的是, 将主机中访问的端口, 映射为虚拟机的'编辑->虚拟网络编辑器->vmnet8', 如下图 在弹出的'映射传入端口'界面中 ...

  4. php session_id()函数介绍及代码实例

    session_id()功能: 获取设置当前回话ID. 函数说明: string session_id ([ string $id ] ) 参数: 如果指定了参数$id,那么函数会替换当前的回话id. ...

  5. JS自动合并表格

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. html-----008

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. C++指针学习笔记

    本文参考http://www.prglab.com/cms/pages/c-tutorial/advanced-data/pointers.php 1.存储其它变量地址的变量(如下面例子中的addre ...

  8. struts2初印象

    第一次写这么正式的文章,如果写的不好的地方,请指出. 今天玩了一下struts2,不过貌似是我被他玩了.简要笔记如下: 一.配置struts2(在eclipse Helios版本下) (1)先创建一个 ...

  9. wamp集成环境php多版本搭建(php5.5,php5.6,php7.0.6)

        首先需要搭建的版本可以在php官方(http://windows.php.net/download)下载对应的版本,X86对应的是32位操作系统,X64对应的是64位操作系统.    1:下载 ...

  10. [python] virtualenv下解决matplotlib中文乱码

    1. 安装中文字体 一般系统自带wqy-microhei,其ttc文件位于/usr/share/fonts/truetype/wqy/wqy-microhei.ttc 2. 将ttc文件复制到pyth ...