摘要: 从最初进入电子设备领域,旋钮和刻度盘的由最初的功能性设计转变为时尚的外观设计元素,比如在移动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. Struts,Spring,Hibernate的作用

    Spring的作用: 在SSH框假中spring充当了管理容器的角色.我们都知道Hibernate用来做持久层,因 为它将JDBC做了一个良好的封装,程序员在与数据库进行交互时可以不用书写大量的SQL ...

  2. 3d max地形建造

    这里来记录一下max里面建造一个地形. 1.创建一个平面,调节平面的属性,包括长宽,和分段 2.然后建造一个道路 然后选择样条线工具,调节线条的轮廓. 3.使用合并工具,将线条和地面进行合并成为一个物 ...

  3. webui layout like desktop rich client

    similarity similarlike desktop js frameworklike extj js frameworklike rich client js frameworkjs lay ...

  4. 09.13日记(2014年9月13日00:18:26)英语,bootstrap,阮一峰,

    我们这里只推荐一本语法书:台湾的旋元佑老师写的<文法俱乐部>(简体版名为<语法俱乐部>).这本书因为出版社倒闭而绝版,淘宝可以买到影印的版本. (1)学英语:奶爸的英语教室 资 ...

  5. HDU 3442 Three Kingdoms(状态压缩 + BFS )

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3442 题目大意:三国时期,刘备逃亡.给定一个最大为50*50的地图,刘备在地图中只能往4个方向走. 地 ...

  6. ZOJ 1091 (HDU 1372) Knight Moves(BFS)

    Knight Moves Time Limit: 2 Seconds      Memory Limit: 65536 KB A friend of you is doing research on ...

  7. Codevs 1904 最小路径覆盖问题

    1904 最小路径覆盖问题 时间限制: 2 s 空间限制: 256000 KB 题目等级 : 大师 Master 传送门 题目描述 Description 给定有向图G=(V,E).设P 是G 的一个 ...

  8. bzoj1004:[HNOI2008]Cards

    思路:由于题目给出了置换,又要求本质不同的方案数,考虑使用Burnside引理,Burnside引理即通过所有置换和原来相同的方案数之和除以方案数总数,而对于某一个置换要使置换后得到的与原来的相同,就 ...

  9. Xcode 5.1 更新后插件不能用

    打开目录 ~/Library/Application Support/Developer/Shared/Xcode/Plug-ins 右击选择"显示包内容" 找到"Inf ...

  10. 静态库的pdb

    静态库也会有pdb,只不过,默认是以vc编译器作为名字,比如vs2003的lib的pdb是vc70.pdb,vs2008则是vc90.pdb