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

本文来自互联网,114PS教程网仅作学习交流使用。发布时间:2016-04-28
本栏目刊载的经验技巧仅为提供更多信息,部分来源于网络,由本站整理发布,转载本文请注明本文地址。
教程所属栏目:
首页 > ps教程网 > 经验技巧

01

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

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

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

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

Eli Williamson设计的Lock Screen Concept

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

Lock-Screen-Concept-by-Eli-Williamson

Cüneyt ŞEN设计的Timer

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

Timer-by-Cuneyt-SEN

Timm Kekeritz设计的Partly Cloudy

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

Partly-Cloudy-by-Timm-Kekeritz

Marco Nenzi设计的ClapUp

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

ClapUp-by-Marco-Nenzi

Jakub Antalík设计的Coffely

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

Coffely-by-Jakub-Antalik

Circle

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

Circle

Megamegacube设计的Quotes app

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

Quotes-app-by-megamegacube

Corey Liu设计的Charging Animation

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

Charging-Animation-by-Corey-Lui

Michael Sambora设计的Bikester #2 wip

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

Bikester-2-wip-by-Michael-Sambora

Tomáš Zeman设计的Company Income App

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

Company-Income-App-by-Tomas-Zeman

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

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

Foresee-Lets-Go-Swimming-by-Nate-Dicken

Boris Valusek设计的Superminds

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

Superminds-by-Boris-Valusek

Zahir Ramos设计的Laundry Master App

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

Laundry-Master-App-by-Zahir-Ramos

Ben Dunn设计的Napp App

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

Napp-App-by-Ben-Dunn

Alex Bender设计的Movenpick app

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

Movenpick-ice-cream-app-by-Alex-Bender

Vlad Mereuta设计的WheelTunes

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

WheelTunes-by-Vlad-Mereuta

Simon

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

Simon

Michal Ratajczak设计的Trail Offroad Nightmode

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

Trail-Offroad-Nightmode-by-Michal-Ratajczak

Uriel Albarran O. 设计的Mixer elements

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

mixer-elements-by-Uriel-Albarran-O

Louis Saville设计的Hack Day App Preview

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

Hack-Day-App-Preview-by-Louis-Saville

Ismail MESBAH设计的Phone App UI – Party Maker

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

Phone-App-UI-Party-Maker-by-Ismail-MESBAH

Celia Sun设计的Celia’s Weather

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

Celias-Weather-by-Celia-Sun

Frantisek Krivda设计的Flat Style Color Wheel

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

Flat-Style-Color-Wheel-by-Frantisek-Krivda

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

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

Gas-combi-remote-control-app-by-Ali-O

Samuel Bednár设计的Alarm Clock App

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

Alarm-Clock-App-by-Samuel-Bednar

Arles Festival, iPhone App V2.0

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

Arles-Festival-iPhone-App-V2_0

Myroslav Galavai设计的Plant monitoring tool

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

Plant-monitoring-tool-by-Myroslav-Galavai

Ronge Ruan设计的HR Alarm Clock

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

HR-Alarm-Clock-by-Ronge-Ruan

 

总结

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

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

 

原文地址:designmodo
译文地址:ecd.tencent
译者:@小瓶儿

转载请注明:114教程网



如何开发出完美的App
0 点击  / 0 评论
圆形风格的移动应用设计实例赏析
0 点击  / 0 评论
扁平和简约来袭
0 点击  / 0 评论
iOS 7和Android 4.4奇巧巧克力:巨人
0 点击  / 0 评论
7个Google Search app的动态设计效
0 点击  / 0 评论
设计漂亮有趣的转场动效!高手之路!
0 点击  / 0 评论
APP设计思维与网页设计思维
0 点击  / 0 评论
有空帮我随便搞搞
0 点击  / 0 评论
设计师开公司需要哪些积累?
0 点击  / 0 评论
提高工作效率:给设计师的10条建议
0 点击  / 0 评论
23个FACEBOOK PAPER中的设计细节
0 点击  / 0 评论
设计华丽的用户体验的6个热门技巧
0 点击  / 0 评论
找参考灵感,怎么找,去哪?
0 点击  / 0 评论
用户是怎么解读你的设计的?
0 点击  / 0 评论
致青春设计师
0 点击  / 0 评论
相关文章:


圆形造字法  轻松打造iOS7风格图标  创建IOS7风格的倒数计时器  

觉得不错?顶一下!
PUSH UP
复制本文地址
COPY
最近更新:

人物皮肤修饰完全自学教程(视频教程)
9 点击  / 0 评论
所属栏目:[美容]
修图师分享 五分钟完成皮肤处理的伪商业修
3 点击  / 0 评论
所属栏目:[美容]
核心技术 教你人像后期面部精修
1 点击  / 0 评论
所属栏目:[美容]
利用计算及修复画笔快速给人像祛斑及磨皮
0 点击  / 0 评论
所属栏目:[美容]
Photoshop高低频磨皮教程
0 点击  / 0 评论
所属栏目:[美容]
商业人像大片中的发丝精细美化
1 点击  / 0 评论
所属栏目:[美容]
新手必学 用Lighroom5分钟快速编辑人像照片
7 点击  / 0 评论
所属栏目:[美容]
运用中性灰给商用人像大图精细磨皮
2 点击  / 0 评论
所属栏目:[美容]
本页全部评论共计()条    【点击查看全部评论】
您的昵称:(10个汉字以内)                      匿名
评论中不要带有网址,并且不要发布违禁词汇。字数限制在300汉字以内。
           验证码:(注意大小写) 看不清楚?请点击刷新
网友最新评论:          
  关于 栏目 栏目 联系 帮助 综合
  关于本站 入门基础 图片合成 在线留言 如何投稿 范文
  版权声明 鼠绘教程 抠图操作 联系方式 常见问题 软件资讯
  免责声明 调色方法 视频教程 本站微博   推荐问题
  本站地图 人物美容 相关素材     已解决
  Sitemap 照片处理 资源下载     待解决
    字体效果 相关经验      
    图标按钮 CS6专题      
  声明  
  114PS教程网(114ps.com)发布的所有教程信息版权归原作者所有,由本站转载的内容仅为提供更多信息,并不代表本站同意其观点。
  所有图片信息均来自网络,本站仅作学习使用,若无意冒犯,请联系本站。
  黑ICP备15009090号-1
  Copyright © 2011-2014