圆形风格的移动应用设计实例赏析

   人脑处理圆形中的信息更加快和有效,设计得当可兼具良好的使用性以及更大的吸引力,本文以移动设备为例,这一类设备恰好是使用圆形的指尖形状,为设计提供了更大的自由度,本文适合移动端设计的同学以及对此感兴趣的同学,不仅从交互上并且从视觉上都能够对以圆形为基本元素的设计起到一定的启发作用。

  圆形被认为是能够被人眼最快识别出的对象之一。这就意味着我们的大脑有能力处理在圆形中的信息比处理在常规的三角或矩形中的数据略快一些。对于小型的以手势为基础的交互界面中,这种能力真的非常关键。这一点对移动设备来说尤为典型,在大多数的情况下,这成为了选择基本UI元素形状的决定性因素。赏心悦目的曲线取代了尖锐边缘,有助于营造一种温暖舒适的气氛,让感观愉悦。它有效地增强了用户体验,让交互界面简单而明了。

  选择圆形一个最普通的原因就是它模仿指尖的形状的能力下意识也将圆形元素与按钮联系在一起。因此,作为一条规律,你很容易发现行为召唤的按钮(call-to-action buttons)应用在环形结构后,有相当一部分应用程序大肆地在设计中使用这一形状。例如,音乐导向的应用,或者是可视化的闹钟以及时钟都离不开环形结构。

  本文的选例都是带有明确的圆形风格的移动交互界面,这些界面自然地融入了UI流畅性,更多的可用性和吸引力。

  Eli Williamson设计的Lock Screen Concept

  使用绚丽的相片背景来吸引用户的注意力。紧凑的排版,醒目的圆形图案以及主体的白色给应用增加了雅致与空间感。


  Cüneyt ŞEN设计的Timer

  有着绿色的发光风格。近似霓虹闪烁式的图标及带有光效圆形在黑暗的纯色背景下非常显眼。


  Timm Kekeritz设计的Partly Cloudy

  被贴上了怀旧的标签。柔和的调色板,新颖的旋钮,复合的画布营造出一片旧日情怀。


  Marco Nenzi设计的ClapUp

  由于逼真的旋钮和按钮,新颖的时钟以及质朴的白色背景而看起来清爽而且高端。


  Jakub Antalík设计的Coffely

  由于扁平风格的精彩应用简洁而自然地呈现出准确而轻快的界面。


  Circle

  整个设计中都应用了圆形元素,从头像显示,状态通知以及其它按钮都用到了圆形。


  Megamegacube设计的Quotes app

  让事情保持简单易懂,将时髦的红色背景,平实的白色的图案元素以及常规字体巧妙地结合在了一起。


  Corey Liu设计的Charging Animation

  采用了现实主义方式。设计师巧妙地将生活元素植根于带有绿色液体的中心图标中,使它看起来栩栩如生且魅力非凡。


  Michael Sambora设计的Bikester #2 wip

  展现了淡色与一系列精致细节刻画核心部件相结合产生的有力的视觉冲击。


  Tomáš Zeman设计的Company Income App

  基于Metro 8美学,出色的集成了淡淡的二维单色圆形元素及大量自由空间。


  Nate Dicken设计的Foresee – Let’s Go Swimming!

  特意注入了一些明亮的颜色来使交互界面看起来明亮而欢快。


  Boris Valusek设计的Superminds

  呈现出惯用的水平条纹式的布局,每一行都包含着圆形头像和小标题。


  Zahir Ramos设计的Laundry Master App

  通过完美集成拟物化洗衣机相关按钮和旋钮和惊艳的刻画,吸引了常规客户,从而在这类应用中独树一帜,脱颖而出。


  Ben Dunn设计的Napp App

  成功应用一些整齐微妙的整体控制牢牢地抓住了用户的注意力。


  Alex Bender设计的Movenpick app

  一个美食相关应用。通过用令人垂涎的冰淇淋球照片在交互界面增加圆形风格,描述了可以买到的产品的整体多样性。


  Vlad Mereuta设计的WheelTunes

  一个基于手势的带有很棒音乐氛围的播放器。中心圆形头像主图标也起着播放进度条的作用。


  Simon

  用几乎所有空白背景,基本的图形框架和潦潦几笔文字宣扬着最小化设计风格。


  Michal Ratajczak设计的Trail Offroad Nightmode

  给人一种模糊的感觉。应用类似60年代的图标以及受到钟表界面的启发计算机字体,在深色背景的衬托下,增添了UI的复古情趣。


  Uriel Albarran O. 设计的Mixer elements

  刻画了占据了整个空间的逼真而精致的黑色轮盘。


  Louis Saville设计的Hack Day App Preview

  拥有和谐的蓝色风格,并出色地被白色相关加粗样式和可辨识的图标所补充,体现了很商务的感觉。


  Ismail MESBAH设计的Phone App UI – Party Maker

  运用跳动颜色的混合,和俱乐部主题高度模糊的背景、光滑的粗字体以及派对导向的图标都非常地搭调。


  Celia Sun设计的Celia’s Weather

  传达出欢快与清澈的感觉。主体的浅灰调色系,略微膨胀的旋钮,精巧的阴影,准确注入的明亮元素,让交互界面显得简洁细腻。


  Frantisek Krivda设计的Flat Style Color Wheel

  通过显眼的由蓝色到白色渐变的圆环来展示数据。


  Ali O. İş设计的Gas combi remote control app

  由精巧的图案、和谐的调色盘、漂亮的光和影创造出来的。


  Samuel Bednár设计的Alarm Clock App

  通过交错的样本刻画出了非同寻常的钟表界面,所有元素都是扁平风格的设计。


  Arles Festival, iPhone App V2.0

  利用有吸引力的轻少女风格的导航系统。基于网格,菜单上的每个项目都有着精细的点画笔触、线框图标和优雅的大写字母。


  Myroslav Galavai设计的Plant monitoring tool

  拥有自然启迪风格的UI,展现了非常棒的照片操作、相片集按钮和纤维质感的背景。


  Ronge Ruan设计的HR Alarm Clock

  利用大量图案元素添以充满活力的效果。明亮的放射状渐变和浅色背景带来了积极的情绪。


  总结

  圆形风格的应用程序交互界面非常常见。旋钮、按钮、开关、进度条、头像以及其他种种经常以圆形出现,并添以振动状渐变、巧妙的阴影、精细的图标、单色扁平感及易辨识的风格。这一形状对于基于手势的iPhone和其它智能手机的交互界面并不惊奇。

  圆形感觉的交互界面看起来很现代和高级吗?它们容易被识别吗?圆形能够增加应用的可用性吗?请通过评论来和我们交流你的观点。

时间: 2024-09-19 09:13:09

圆形风格的移动应用设计实例赏析的相关文章

设计参考:主流风格缤纷多彩网站设计实例

这些网站界面设计可以称作炫,也能叫做乱.作者大多都用尽了一些可能将色彩与各种元素堆积到网站中.不过作为艺术与设计主题的网站来说,与众不同,五花八门与缤纷多彩是当前的主流风格. 所以看看下面这些网站也不例外,第一眼就很有强烈的视觉体验,无论是色彩还是界面本身.

设计参考:50个简约成熟风格的网站设计实例

简约成熟的形象一直是流行的设计风格.在网页设计网站的最低限度的剥夺了视觉效果和幻想色彩或效果的衣服,离开底层结构暴露出来.在一个美丽的最低限度的网站的关键是牢固和结构布局,以及侧重于时尚和设计好的版式.这50例子展示最好的最小的网站设计实例. Chama Kyle Steed David Arias Finch Site Inspire elCandor Corporate Rick Watch Black Estate Fellswoop Jason Santa Maria Design Ho

WEBJX收集相当不错的邋遢风格的网站设计实例

来自设计领域的大多数设计趋势是出人意料的,随着时间的推移,有些变点毫无意义甚至最后消失.就象其它创意性的领域一样,对趋势过度的炒作和过度的使用,特别是网页设计.过度使用(有时是正确的,但是大多数没有合理的目的),趋势失去了它们交流信息的作用.要表达一些独特的革新的东西,因而就失去了他们的视觉吸引力. web 2.0 风格是设计演变过程中一个极好的例子.在2007年过去的几个月中我们看到了设计滥用的一个明显的例子,比如光泽按钮.五颜六色的倒影.3D效果.圆角和特大号字体,到处都能找到.然而,目前我

收集国外优秀的杂志风格网站设计实例

我最喜欢的网站设计风格之一是杂志风格.制作一个设计良好的网站,比如好看.良好的可用性.以及显示很多内容却不显得拥挤是件很有难度的事情. 博客模板常常能够将这种灵感带入现实,因为博客常常面对既要建设大量内容又要努力保持美观的机会. Clutch Magazine Loop Good BlackBook Boxwish Macalicious Giant Magazine Vanity Fair Frieze Magazine Conde Nast Portfolio New Yorker The

WEBJX收集:50个自然风的网站设计实例

吸取来自大自然的灵感,用天然的素材点缀设计网站风格,不仅可以给用户一个亲近的感觉,而且可以让网站与众不同,给用户深刻的视觉印象.下面就是50个自然风的网站设计实例,在炎炎夏日,你能不喜欢这样心旷神怡的自然风嘛! 84colors Ecoki Envira Media Crepes Tapada Nacional de Mafra Mad Monkey Beautiful E-mail Newsletters OdNowa Imprimerie Villière Kirdan

一组走心又走肾的优质电商网站设计实例(下)

  目前国内的几家大型的电商平台越做越完善,大有集众家之所长于一身的趋势.反观国外的这些优质的电商网站 ,大多有自己的风格和不同于他人的设计方向.这些个性和坚持让这些网站显得越发的独一无二了.也正是在这样的设定之下催生了各不相同的设计策略和技巧,而这些正是我们需要重新思考.深入学习的地方.另外,本文的上半部分在此:<潮流酷站!一组走心又走肾的优质电商网站设计实例(上)> 21. 提供多级侧边栏 相比于传统的顶部多级导航栏,侧边栏会让页面显得更加整齐易用.Carolina Herrera 的侧边

MySQL和MongoDB设计实例对比

MySQL是关系型数据库中的明星,MongoDB是文档型数据库中的翘楚.下面通过一个设计实例对比一下二者:假设我们正在维护一个手机产品库,里面除了包含手机的名称,品牌等基本信息,还包含了待机时间,外观设计等参数信息,应该如何存取数据呢? 如果使用MySQL的话,应该如何存取数据呢? 如果使用MySQL话,手机的基本信息单独是一个表,另外由于不同手机的参数信息差异很大,所以还需要一个参数表来单独保存. CREATE TABLE IF NOT EXISTS `mobiles` (     `id` 

网站交互设计实例:正确的引导赢得用户的忠诚

文章描述:网站交互设计实例:正确的引导赢得用户的忠诚. 网站上,用和主色调对比很强的颜色或质感很强的按钮吸引用户进行操作,从而促成交易,或浏览相关重要信息. 正确的引导,符合了人机工程原理,优化了用户体验,给用户以易用.互动性.从而使网站给用户留下了美好印象,用户倍感温暖,加大了第二次访问的可能性. 那么反之,不正确的引导--误导,会是一种什么情况.笔者上周曾去南京一趟,便在沪宁城际高铁常州站站台遇到了误导. 笔者是高铁5号车厢,可是在其旁边不远却有一个有明显的动车13号车厢,该标志很明显很清晰

产品交互设计实例:首都机场的点烟器

文章描述:产品交互设计实例:首都机场的点烟器. 首都机场的吸烟室里并不像其他机场那样放几个固定的打火机,而是点烟器,和车载点烟器基本是一样的:先按下加热,加热好后,它会自动弹起,拔出来,里面的电阻丝已经是红红的了,就可以点烟了.上图为车载点烟器,与首都机场的点烟器一样,加热过程中只是被按下去了,未显示进度,也未能形象的表现出"正在加热"的含义. 我走到点烟器的近前,按下,让它加热,然后等待,等了一会儿还不见动静,不知是仍在加热还是出了故障.吸烟室里很多人,感觉自己被别人看着,不会用这玩