UI设计案例分析:现代互联网和移动应用中出现的一些优秀的用户界面模式

  正在这篇作品中,来自UXPin(一款用户体验计划的利用标准)的Chris Bank为咱们带来了近来正在摩登互联网和搬动利用中闪现的极少优越的用户界面形式,并将通过实例呈现怎样将这些优秀的UI计划形式利用到其他的网站和利用中。

  毕加索曾说过(乔布斯也曾援用过): “Good artistscopy, great artists steal.” (浅显的译文是,好的艺术家复制别人的作品,而伟大的艺术家盗窃别人的作品)。这是最令人模糊和误用的成立性短语之一,但正在当下产物计划和产物成长趋向仍然爆炸的时期,这也是相当主要的一句话。

  这句引语的争议性根源于它的扼要,因而对待它的讲解也具有必然的怒放性。实质中对待复制和内正在化,原创性和革新性,仿效和混合的区别没有说明。然而,这不是懒散的捏词。当然,该当饱舞练习他人的作品,站正在伟人的肩膀上计划自身的产物为特定的人群办理题目-为了那些你终端用户。

  Dropbox和Carousel,以及险些总共利用中都设有“黏固的”导航,这仍然是一个通用的搬动修造用户界面的计划形式。通过这种计划形式,用户正在浏览经过中无需再一齐滚动返回到先前要旨。比如很众利用标准已首肯用户触按搬动修造屏幕顶部的区域以杀青速捷返回到页面最上端这一性能(因而用户不须要再一阵长翻页来回到页面顶部)。但与Pinterest中设特意有“scrollto top”标签的做法区别的是,正在大无数利用标准中常常对待这一项性能都没有精确的视觉指示。举动一个网页开辟者,没有须要将总共效户所需的闭连链接都放到页面上。现正在,很众古板的固定检索仍然能够被直接加载到任何页面或视图中了(以前不妨只要导航顶部才有)。如下图中的Dropbox和Carousel,以及上文中咱们仍然议论过的UXPin线框图。

  笔直导航(固然不是尺度形式)是网页和手机利用中常用的视图体例,如Facebook和Mailbox。笔直导航这种交互形式除了助助用户寻找相闭产物、企业的新闻和数据外,通过一个滚动式的寡少页面,用户能够正在利用中自正在切换到网页的其他模块。抽屉式便是笔直导航的案例之一,现已被广博利用正在搬动修造的UI计划中。

  和切换(toggling)相形似,抽屉式是一种UI计划趋向,琢磨到搬动修造屏幕的拘束以及用户对待速率的需求。正在利用中,每一个滑出式的抽屉都是一个独立的“目标”,本来并没有太众限度,咱们照样能够看到许众众样的计划,蕴涵极少恐惧的计划。

  Yelp便是一个试图将总共闭连链接都排布正在标准页面上的典范案例。即使他们UI计划形式中的性能很周密,正在电子刊物中坊镳思要用尽总共不妨的交互体例,比如滑动,点按,框选,撤废,返回等等。但本相上,诸如许类蕴涵许众实质的利用标准的形式,如Flipboard,有时反而会使标准利用加倍芜杂。下图中,咱们用UXPin为这种计划形式修制了一个线框阐述。

  Carousel中不单有一个可视的滚动操控条,正在其底端又有一个很显著的局限条,这运用户能够很惬意地正在百万张照片中自正在浏览。跟着由用户自行形成的实质、动态、群组、列外越来越众,更众革新的UI计划形式也会超越古板的探寻体例以助助用户实时找到他们思要的实质。

  正在Tinder利用中,实质之间的切换是无缝相应的,用户只须要通过点击视图界面中的主图就能够切换到该图的仔细新闻页,再通过点击图片回到从来的根柢页。这种UI计划形式为用户成立了极致流利的、本能的用户体验流程。同样,正在OKCupid中也用到了这种体例。

  正在Uber中,仅通过横纵向拖曳的体例,用户就能够很流利地正在四类汽车接送任职中切换。这种UI计划形式还能够让用户望睹可拣选的车辆数目,并通过放大和缩小画面来了然拣选地域的车辆密度。

  当用户选定了一种接送任职后,通过敲击按钮能够正在预订的同时还能够查看到相应的预估用度。这是一个格外简陋但很主要的计划,由于每当咱们正在预订接送时,还会做极少其他的事变,这个用度查看计划能够让我确保Uber没有粗心改动代价。

  RelateIQ用压低主菜单的体例以速捷越过副菜单的导视。RelateIQ属于目前墟市上最繁杂的公司搬动利用之一,因而他们要与现有的、新的利用的UI计划相区别,带给用户速捷、新颖、方便的体验,同时不以阵亡他们的产物新闻为价格。

  Snapchat中能够察觉埋伏的新闻-点按snapshat页眉-能够看到已授与新闻和未读新闻的数目。这岂非不是一个很方便的UI计划吗?

  Yelp利用中,向下拖动页面时,能够从全体的商家新闻列外过渡到一张被掩藏正在上端的半透后图示。半透后式和相应式的计划成立了极好的体验,这种体例也有不妨是目前最鲜为人知但又相对高级的UI计划形式了。欲望有更众计划师能够琢磨行使这种体例!

  正在Secret中,用户须要选用极少运动来察觉导航栏-即右端滑屏,但这种UI计划能够最小运用抽屉式和滑出式,下面的链接中有咱们用UXPin做的线框案例。

  Linkedin的app中,用户能够正在任何功夫点按页面左上角的logo(常常是一个三线“汉堡式”菜单图标)来获取这个辅助导航。这种UI计划最初正在Facebook的搬动利用中宣扬,随后又被如Path,Fancy和其他形似的公司采用。这是一种将相对次要的新闻隐于“侧抽屉”中的一种简陋体例,不必顾忌搬动利用该怎样折柳出最主要的新闻。你只须要琢磨怎样当用户访候时,正在这个“侧抽屉”的每一个视图新闻中能让用户抓取到最主要新闻。下方也有咱们用UXPin做的线框案例。

  Snapchat是为用户成立重溺式体验而采用最简化导航群组的案例之一。正在Snapshat中,四个古板的菜单按钮被更首要的1-2个按键图标代替,这些图示会跟着菜单视图的切换而转换。然而正在利用中切换菜单视图也异常简陋便当,用户能够通过点按这几个首要的图标,亦能够通过支配滑动屏幕。这是UI计划形式中异常特殊的杀青体例,对待如许简陋纯粹的操作体例,笔者正在其他利用中鲜有碰睹。

  “卡片”形式是通过Pinterest利用而普及的,它是一种适宜相应式计划趋向,以一种格外优美的形状排布错综繁杂的社区反应新闻的,用以吸援用户浏览网页新闻的计划形式。正在“卡片”形式下,看起来无论任何碎片式的新闻都能够被调配到“卡片”中。然则,也有许众“卡片”形式的杀青体例实正在很令人忧愁,更加是Pinterest的极少所谓的角逐敌手,它们除了(出于好奇心地)真正分解Pinterest运用“卡片”形式的真正启事,其他各样考试险些都做了。笔者正在2013岁终本相上仍然较量过他们的深层区别,正在此咱们也用UXPin为这个计划形式修制了线框案例。

  Lyft和Yelp利用以舆图举动后台视图,这种正在当地利用中授予本地特色的体例能够加深利用自己的事理。跟着当地利用的普及,以及正在舆图视图上能够加载的层级新闻增加,这种计划形式也必将成为一种趋向。而且完全的体验形式终将代替简单的形状,更众以视频、图片以及其他引子为后台的UI计划形式也将广为宣扬。咱们同样用UXPin做了一个线框案例。

  FacebookMessenger和Instagram都采用圆形视图来勾画用户缩略图,这种形状从某种水平上说是从Google+中执行而来,后又被Path加以革新的。固然相较于古板方形缩略图,圆形形式除了徒增了极少蜕变外没有显著其他的得甜头,然则举动一种“存在调味剂”式的转换,圆形用户缩略图依旧受到了广博接待。咱们同样用UXPin做了一个线框案例。

  Secret以为界面中的元素之间该当不留白边,采用彼此堆叠的全出血(广博距)图片,正在它们的顶端睡觉极少主要的新闻。从某种事理上说,这些图片也充任了后台的脚色,并且相较于Pinterest,这种不留白边的形式,能够节减易散漫用户预防力的计划细节。

  Pinterest和Sptify告诉用户能够通过点按由“+”转动为“x”符号来不同实行“增加闭切”以及“撤废闭切”的操作。这种UI计划形式节俭了页面空间,使得撤废操作很便当迅捷,同时也是一个兴味好玩的办理体例。

  正在搬动利用中,元素转动和切换动画是异常主要的。你能够1)完整用另一个具有区别性能的符号取代,如“增加”和“撤废”,2)直观地接连元素,如当用户点击放大一张图片时渐隐地方的元素,3)予以一个视觉反应,如正在可拖动的标签之下置于一个透亮暗影。

  Asana(2008年达斯廷·莫斯科维茨分开Facebook,与贾斯丁·罗森斯坦沿途首创了Asana,一款为了革新团队调换和合营体例以进步处事功用的工作处置类利用)中,用户能够直接操控实质,比如正在其网页版中,通过鼠标“点击并拖移”或诈骗敏捷键的体例拖动工作条;正在搬动利用中,通过“点按拖动再睡觉”的体例将工作睡觉到随意一处用户思放的地方(这中体例能够有用取代键盘敏捷键操作)。借使用户有格外众的工作须要实行,那么也许其他的形式会更好。但对待大无数用户来说,这种形式能够很有用知足用户以助助他们从新部署工作列外。咱们用UXPin为这个计划形式修制了线框案例。

  Tinder和Carousel诈骗可拖拽的图片让用户实行点赞、分享或者埋伏等操作。Tinder上大大的按键让用户正在任何功夫都能够精确、速捷地拣选。正在Tinder中,将照片拖动至右侧或者点击右边的爱心吐露“赞”,将照片拖至左侧或者点击左边的叉吐露”不笃爱”。正在Carousel中,上滑图片吐露分享,下滑图片吐露埋伏。这个“赞或不赞忙继续”的UI计划形式,举动Tinder利用的主题形式使其成为了最着名的案例之一。咱们用UXPin为这个计划形式修制了线框案例。

  正在邮件类利用中,侧滑作为因Mailbox而被广为运用。通过侧滑,用户能够记号已读邮件,不同处置后续的各项邮件操作。这种UI计划形式很受用户接待而且很高效,难怪Mailbox正在上线仅一个月后就被Dropbox以1亿美金收购。

  Instagram让用户发现更速捷的操作体例,比如双击图片点赞而不是往下滚动点击“赞”的按键。本来我小我不太笃爱没有撤废夂箢的UI计划形式,但至今为止,这是独一看到通过轻击图片实质来标示的案例了。我自信很众本质很丑的图片会被无意地笃爱也是由于这个便当的点赞形式。咱们用UXPin为这个计划形式修制了线框案例。

  Snapchat和FacebookMessenger让用户只需通过向左滑动摰友头像就能够得到利用的其他特色。正在Snapchat中,用户能够通过这种体例一次性删除众个摰友-我将其称之为”消亡的摰友。FacebookMessenger中,通过左滑,用户能够察觉更众利用特色,蕴涵一个名为“more”的子菜单。兴味的是,用户能够正在“delete”膺选择存档或是删除对话这两项性能,正在大无数UI计划中,用户是没有如此的拣选的,存档选项往往是正在“more”的子菜单中。咱们用UXPin为这个计划形式修制了线框案例。

  Secret让用户以察觉新菜单的体例察觉新的操作夂箢。左滑为“赞”,但右滑并不是“不笃爱”,而是一个埋伏菜单。我小我很笃爱这个形式固然它与常常的形式区别,乃至须要极少脑力去记住右滑是一个菜单而不是“不笃爱”或者“埋伏”。

  Secret正在创修实质页面上有极少“可被发现的”东西。正在用户上传一张图片之前,支配滑动能够转换后台颜色,上下滑动能够转换样式。当用户上传一张图片后,这些操作作为会更情景灵动:页面右边从上滑向下方,能够使页面变暗;页面左边上下滑动能够转换图片饱和度;支配滑动转换图片真切度。利用中没有其他全体的局限键会见告用户有这些转换-也不该当有。这是一种基于用户直觉的,简约的UI计划形式,你势必会遭遇更众。

  越来越众的利用会为用户供应摰友列外,Snapchat和Yelp便是如许。无论是一对一的调换依旧跟班或人的咀嚼和偏好,无论是网站依旧搬动利用的体验,都须要摰友的介入,用户寻觅他们的恩人圈的体例也将变得加倍完全整个。我自信社交圈的UI计划形式将会效力一个与现有UI计划形式相像的轨迹,由于均匀每一位网站或搬动用户起码少有以百计的恩人和数以千计的随从者。

  Songkick和Flipboard是让用户具有优良“follow体验”的案例。无论用户是否有摰友,都市接续自行形成新的可闭切实质。与摰友列外将成为一个越来越主要的UI计划形式的道理相通,优良的“follow体验”也同样主要。

  Quora和Venmo是我最笃爱的行为筹议反应利用,由于“练习”和“成绩”是人生中两件很主要的事变。我对行家议论的各式话题以及提出的蓄意思解答能够看得入神,感激这个UI计划形式,我能够成绩许众。

  Carousel、Instagram,以及其他极少利用会供应谈天或直接对话体验,这是举动整体利用体验的一个别。私聊的UI计划形式将无间时兴,因为用户会越来越适宜正在网上分享更众私家新闻,私聊将不再仅仅是古板的“社交汇集”,而会形成更众更广的实质与任职,乃至是财政交往,如Venmo。

  Medium,如其他很众利用相通,并合运用了“分享”小东西,通过一个寡少的分享图标,带给用户完满的体验和精确的分享操作指示,纰漏那些分享到的地方,这对我来说是一个双赢的UI计划形式。

  YouTube和险些总共都利用都是让用户赞(或是不赞)这种二选一的形状,而不是用打星或者其他的评级体例。固然搭车共享利用如Uber和Lyft目前正在用评级体例,但最终他们会更趋势于二选一的评定体例-即领受或者不领受驾车。由于这是最为精辟地正在网站或搬动利用中机闭实质的体例之一,这种体例会无间连续下去-我小我欲望标签的组合能够让用户不费更众的力气就能够不同察觉他们最笃爱的笑剧上演和音乐视频。咱们用UXPin为这个计划形式修制了线框案例。

  Youtube和Facebook Messenger让用户群组相像的摰友和实质。由于实质有许众形状-蕴涵摰友档案-并正在接续补充蜕变,也须要用户有必然的机闭兼顾材干。我对怎样让这些区别的利用最终交融成另一个,并有一组新的UI计划形式而感觉有些好奇。

  Venmo通过手机和email相闭人的整合,让邀请别人加倍容易。由于正在消费类利用中,口口相传和彼此保举是消费伸长的广大推进力,你将会看到更众形似的形式。

  不闭键怕模仿或仿效这些计划-然则你要学会怎样把他们造成自身的计划,为你的用户办理本质的题目,让他们热爱你计划的产物。

  由于产物的计划趋向蜕变很速,各样修造也从网站到搬动利用日月牙异,你须要更归纳地研究怎样计划产物。所幸的是,许众人和你相通正在做同样的事变,因而仍然有许众案例能够练习,蕴涵上文中咱们举出的案例。

  为收场束这个话题,我最终思说的是-计划法则。正在线框案例中的计划法则,将会助你计划更好的线框,更完满的产物。

  本文由@BESD计划实践室原创颁发于人人都是产物司理 ,未经许可,禁止转载。

  听到许众舆论说正在中邦标准员是吃芳华饭的,那么产物司理呢,也吃芳华饭吗?

  人人都是产物司理(是以产物司理、运营为主题的练习、调换、分享平台,集媒体、培训、社群为一体,全方位任职产物人和运营人,缔造9年举办正在线+期,线+场,产物司理大会、运营大会20+场,遮盖北上广深杭成都等15个都市,熟手业有较高的影响力和著名度。平台齐集了浩瀚BAT美团京东滴滴360小米网易等著名互联网公司产物总监和运营总监,他们正在这里与你沿途生长。

更多案例

国服全新魔兽世界官网已上线:适配移动

摘要:邦服全新魔兽天下官方网站已上线:适配挪动端来到全新的《魔兽天下》官方网站!您能够正在这里找到艾泽拉斯大陆的最新音书、社区音信、逛戏资...

UI设计案例分析:现代互联网和移动应用

正在这篇作品中,来自UXPin(一款用户体验计划的利用标准)的Chris Bank为咱们带来了近来正在摩登互联网和搬动利用中闪现的极少优越的用户界面形式,并...

互联网门户传统竞争转战移动客户端

腾讯此日对外揭橥音讯挪动端政策,并通告腾讯音讯客户端笼罩用户冲破4亿,日均页面浏览量逾越6亿。至此,搜狐、新浪等四大宗派网站都推出了挪动音...

友情链接:

Copyright © 2002-2021 明陞网络设计有限公司 版权所有 | 网站地图