说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

移动设计需摒弃的几大PC应用设计方法

HTML文档下载 WORD文档下载 PDF文档下载
移动设备与PC各自具有不同特征,设计移动应用时,照搬PC上应用设计方法,往往会带来糟糕的移动用户体验。如何结合移动设备本身特征,进行移动设计?有哪些PC应用设计思路应该避免?本文将给出答案。

伴随着移动大潮的到来,移动优先设计理念已深入人心。鉴于移动设备的特殊性,PC应用的设计思路往往不适于移动设计,但很多设计者不思变通,照搬PC应用的设计方法,造成所设计产品存在很多缺陷。Luke Wroblewski在《An Insider’s View of Mobile-First Design: Don’t Make These Mistakes》一文中指出了移动优先设计需要避免的几大错误,并分别结合实例给出了解决方案。

无论是用户、企业家,还是广告商,都喜欢涉足“移动”这个领域,因为移动产品时刻陪伴着我们,并可随时访问。但这一机会同时也面临着设计所带来的诸多限制:移动产品屏幕小,且通过触控来控制,所连接的网络参差不齐。鉴于此,Facebook、Google、PayPal及无数迅速投身于移动优先设计的创业公司也都意识到针对移动产品进行设计并不同于桌面PC。

针对桌面PC的设计思路往往不适于移动设计,但这些思想因根深蒂固而被随意使用。这正是本文分享移动设计中常见错误的主要原因。设计者、产品经理及企业家不仅要了解如何针对移动进行设计,同时也要以不同的思路来考虑移动设计。

在移动上,有时必须假装“请求事件已完成”

移动网络较互联网慢很多,这毫无疑问。没有什么比超长的登录时间更让用户灰心的了。Instagram的联合创始人Mike Krieger曾表示:“谁希望在等待的过程中继续等待呢?”

然而用户在移动应用上提交请求后时,往往需要继续等待。典型的PC处理过程是这样的:

● 用户在应用中提交某一请求;

● 应用向服务器发送信息,告诉服务器发生了什么;

● 服务器作出回应,并处理请求;

● 应用进行更新,以告知用户,他们的动作已成功完成。

……这是一个漫长的等待过程。

将之与Instagram移动应用的处理过程相对比:当用户喜欢或评论Instagram中的图片时,其结果会立刻显示出来。事实上,他们的请求仍在后台的处理过程中——但Instagram假设它已经成功,而避免了继续等待它返回实际的执行结果。 


设计者虽然无法加快网络速度,但可以给用户一种感觉,让他们感觉响应速度很快。

Instagram技术帮助我们解决了移动应用“Polar”中的早期错误。Polar允许用户收集、分享、投票某一调查。当用户在Polar上创建一个调查,上传其中的任何图片平均需要12秒。

在首个版本中,Polar会等到所在图片上传到服务器后,才会将整个调查展示出来。而在现在的版本中,我们选择了相反的做法:我们假设用户的所有调查都可成功创建于服务器上。只要他们创建了新的调查,就会马上显示在他们的Feed中。

实际上,我们在本地创建了临时的调查副本,并将它添加到前台列表中。该调查的临时版本完全可以正常使用:用户可对它进行投票与评论,我们确保一旦该调查在后台创建成功,这些动作可应用于此调查上。(为了确保该调查能成功创建,我们使用了很多后台处理程序,以保证它可存放于本地。在最后告诉用户发生错误之前,会多次向服务器发送请求。)

似乎增加了很多额外工作?确实。可以让应用看起来更及时,这还是很值得做的。这种情况下,快速的感觉可以掩盖掉现实中速度较慢的移动网络所带来的缺陷。

在移动应用中,显示加载过程往往更遭

很显然,速度代表着移动用户体验。因为移动网络作出响应往往需要一段时间,当加载、处理某事件时,移动应用往往会显示一个进度条或旋转指针(Spinner)。该做法似乎昭示着我们应该告诉用户,该事件需要花费一点时间。

这些指示器背后的动机很好,但对于用户来说,结果却很糟糕。为什么呢?因为这些过程指示器好像突出了用户需要等待这一现实。这正如盯着表、电梯按钮面板看,反而感觉时间过得更慢了。

具有讽刺意味的是,大部分指示器使用户专注于指示器本身——而非实际过程。情况应该反过来,让用户可清晰地感觉他们正向目标前进,而非只是在那里等待。

为此,当我们在Polar上使用“Web View”加载部分本地应用界面时,我们付出了很大的代价。(Web View犹如一个小小的内嵌Web浏览器,可以从服务器端获得页面,只有当所有页面加载完之后,才会显示在应用中。)为了让用户知道这些元素正被下载,我们增加了旋转指针以表示Web View正在服务器中检索(在一个应用中,我们使用了多个Web View)。但我们却得到了这样的反馈:“刷新、加载页面好像需要大量的等待时间;它似乎没有之前版本快速了。”

这么做,使用户更专注于该指示器,而非过程。

Google的Search应用注意到了这个问题,它将用户请求的页面从一侧滑动显示。该设计将加载指示器作为请求页面加载过程的一部分,从而让用户更加关注过程,给用户一种内容即将呈现的感觉。


让用户专注于过程的另一个方法是使用“轮廓屏”——先展示页面的空白版本,再逐渐地加载其中的内容。信息逐渐显示在页面中,会给用户一种所请求内容即刻可完成的感觉。


我们已经在应用的多个地方使用了该技术,删掉了旋转指针。这使得用户的注意力转移到内容加载的过程,而不是内容加载这个事实。

不要转移用户的注意力

在桌面中,会增加更多的链接、菜单和按钮,以方便用户与应用交互。但在移动应用中,我们需要重新考虑该方法。可显示大量用户界面控件、用户通过鼠标来操作的大屏时代已经过去。现在的移动设备屏幕很小,只有巴掌大小,却需要使用相对较大的手指进行输入。

我们不能仅仅考虑如何在小屏幕中增加更多的控制,现在,我们还必须考虑把这些动作放在哪里——用户在应用中花费最多流量的地方。

移动设计者应该将主要精力花费在用户的主要目标上,而不要让用户的注意力从主要任务上转移。

用户给调查投票是我们应用的核心功能,用户在投票页面停留的时间最长(平均每人每天会为40个调查投票。)我们知道,如果列表中的调查来自用户认识的人,该应用的体验将会更好。所以我们在应用的头部放置了明显的按钮,让用户可方便地找到Polar上的好友。

但结果却是很少有人使用该功能。后来发现,我们将用户的注意力转移到了其他地方,如寻找、邀请好友。

现在,当用户沉浸于投票过程时,在第20个调查处,我们会询问“你是否想在Polar中寻找你的好友?”该改变(删掉了头部的寻找好友按钮)使寻找好友的功能获得了很大关注。


从那时起,我们又利用该法设计了很多其他功能,包括设置喜好、请求评价应用等。将主要功能(为调查投票为Polar的主要功能)作为应用的主要部分,而不是很多功能中的一组,将会产生很大的不同。

总结

进行移动体验设计时,应避免使用在PC上进行应用设计时惯用的方法:

● 等待服务器回应,而不是假设请求已完成,将会成功;

● 当事件回应需要一段时间,专注于指示器,而非过程;

● 增加更多的界面控件,代替突出应用的主要功能。

为了避免这些及其他移动错误,我们需要用挑剔的眼光审视现有的最好实践,不要将PC世界完全照搬入移动领域,只采用适合移动的方法。

不只是避免错误,移动优先更要探索、分享、拥抱新的设计方法。(编译:陈秋歌 审校:夏梦竹)

原文链接: An Insider’s View of Mobile-First Design: Don’t Make These Mistakes

触控陈昊芝:“好声音”标王对移动游戏未来的预测 Office将更强大:微软正开发Office Reader和Office Lens 百度技术专家详解Clouda 并称计划推出相应UI解决方案 少年才俊:看IT界8个不到20岁的科技公司创始人 Oracle与Freescale展开深度合作,Java或将一统物联网? 探秘Google新搜索引擎算法Hummingbird的16个疑惑 如何在开发项目里进行自我激励! 或许很受用:苹果、谷歌和亚马逊等公司的14个怪异面试题 12款不容错过的新款jQuery插件 技术开发者如何看实时Web App开发框架? 高薪技术排行:大数据居首,苹果相关次之,Java、C等相去甚远 谷歌开发网络跟踪新技术:AdID将取代第三方Cookie 穿在脚上的苹果?苹果聘用Nike设计主管Ben Shaffer 七款Debug工具推荐:iOS开发必备的调试利器 六年亲历,见证中国大数据技术与应用时代的到来 Mailbox:日支撑过亿信息数据库的性能调优及集群迁移 PayPal前CTO 在美国改变世界的乌克兰犹太人 放弃Bootstrap&amp;Foundation,迎接Semantic UI? 一键分享:iOS版Google+发布SDK InMobi杨娟:中国移动游戏如何挑战全球? Adobe再遭APT攻击:数十G源代码及290万用户信息失窃 程序员,如何在工作中崭露头角? 国内外三个不同领域巨头分享的Redis实战经验及使用场景 这是一场潜在的战争:谷歌与Facebook、苹果在搜索上的博弈 设计新闻类网站需要注意的关键点:移动友好、宽带…… 直接开始用:5个免费的在线思维组织工具 招聘开发者常见的九大误区 开源影响销售,维护赞助商? 盘点黑客攻击途径:最常用的7个策略及简单的防护方法 专访AngularJS框架创始人Misko Hevery:让Web开发更便捷 果粉的又一个节日:新iPad或于10月22日发布 如果大家有问题告诉我(anjie@zj.soim.com) 如果大家有问题告诉我(anjie@zj.soim.com)一起讨论吗 想跟我交朋友anjie@zj.soim.com tc++3.0如何编写读鼠标程序(急) 都进来看看,程序员的下场... 各位高手,小弟问一个傻问题:怎么在播放一个AVI的时候用自定风格的滑块控制? 我上次在CSDN 上看到有人发贴子说自己写操作系统,我现在有个朋友也在写,想和他联系,但是我现在找不到那个贴子了, 有谁记得那个人的名字或贴子的位置请说.谢谢. 求助:打开网上邻居很慢为什么? 问一个蠢问题:控件何时获得焦点 请问一下哪里再收购软件呢? 请问一下在哪里可以找到收购软件的公司呢? 想作一个DOS程序,实现多台电脑间通过网卡传输文件. 辞职信 application.initialize完成了什么 高手来帮忙啊~ 看看java的魅力 如何通过自制程序的编辑框向现有一般应用程序编辑框传送内容? 窗口执行顺序问题,请多帮助,谢谢 如何自动取得server的日期和时间 怎样让文件指针指到文件末尾,必须skipline一行一行跳吗? 我想在菜单前添加图标,使用Bitmap属性但是为何只能载入*.bmp文件而不能使用*.ico文件,我只有*.ico的图标,请问该如何解决。 有新建一个文本文件并给其命名的函数吗,怎么用 我还真不懂呀? 这个COLTYPE是怎么用的呀?你说它怎么得到表中字段的类型呀? 有关存储器(ram,rom)的编址问题。以及32位或更多位芯片的问题。 一些汇编问题。想来问bcb的兄弟{bcb里好象有不少汇编高手} 救命:在安装了sco openserver之后,系统不能启动,先前安装的win98和win2k也不能。 请问如何进行URL译码??? 请问怎样截取一个string中的一段? 请问delphi做的exe最小可以到多少?怎么做? 我想请问一下WINGATE的具体怎样在WIN2000服务器版中进行设置。 ASP的同志们,能不能留一下QQ号码? 请问何处有破解ACCESS2000的程序或源代码呢? 请问要在TEdit.text组件文本串中找出当前光标在第几个字符上怎么办?谢谢! 请问关于dbImage控件的使用方法? 关于HDC及双缓冲的问题? xxxbird(*说你行,你就行,不行也行*),来领“我遇到几个怪问题。。。。。。”中的分 为什么ASP没法向SQL Server中写入数据?代码什么地方错了 大家帮忙找一下,找到我给50分 exe 捆绑机怎么做? 大家谈谈JSP的设计模式怎末了?我有个题目,设计好的大大有奖! 浏览器下的那个进度条是怎么弄出来的? C中的typedef struct和C++中的 struct有何区别? C中的typedef struct和C++中的 struct有 什么区别?谢谢 lastlove(本栏位广告招商中,欢迎投放!),jjdelphi(我真的不懂),jinesc(杂牌军)-(人民军队为人民) 开利息了 一个网页的原代码可以保存到字符串里吗? 有没有各种C++编译器都支持的字符串类型或字符串类? <@> 关于 ProcessMessages 一个想不如大家想,请各位帮忙想个主页的名字吧。 女友23岁,她会选择前途还是爱情?-----一个VB程序员的痛苦 如何实现应用程序与动态库通信??? ----myxfang----偶来贷款了!!!--- 一个半径10厘米的半圆形花坛.他的周长是几厘米,面积是几平方厘米 一个圆的半径增加3厘米,直径增加________厘米,周长增加________厘米 如右下图,已知三角形ABC面积是12平方厘米,求阴影部分的面积还有,我是小学生,麻烦写能看得懂的, 一个半圆形周长是10.28厘米,这个半圆形的面积是多少? 2.一个圆的半径增加2厘米,它的周长增加()厘米,面积增加()平方厘米.3.大小两个圆的半径比是2:3,面积差是30平方厘米,求两个圆的面积各是多少?4.已知一个圆的面积是62.8平方厘米,求跟它 如图,三角形abc面积是70平方厘米,BD=CD=6厘米,角C=45°.阴影部分面积多少? 一个圆的半径扩大到原来的三倍他的直径扩大到原来的【 】倍周长扩大到原来的【 】倍面积扩大到原来的【 】 一个圆的半径扩大3倍,周长扩大几倍,面积扩大几倍 回答马上采纳 图中三角形ABC的面积是36平方厘米,AC长8厘米,DE长3厘米.求阴影部分的面积(ADFC不是正方形) 一个圆的半径扩大a倍,直径扩大( )倍,周长扩大( )倍,面积扩大( )倍.A.2 B.a C.2a D.pài(3.14) E.2pài(3.14) F.a的平方 我想问的是为什么最后选F 一个圆的半径扩大几倍,直径就扩大几倍,周长就扩大几倍,面积就扩大几倍这类题目该怎么做?明天我就要期末考了,有没有什么公式? 图中ABC的面积是36平方厘米,AC长8厘米,DE长3厘米,求阴影部分的面积(ADFC不是正方形) 一个圆的半径是a厘米,它的直径是几,周长是几,面积是几十万火急 图中梯形的上底是18厘米,高是15厘米,阴影部分面积是54平方厘米,求梯形的面积 如图,扇形AOB的圆心角为60°,半径为6cm,C,D分别是的三等分点,则阴影部分的面积是 . 等腰梯形的周长是48厘米,面积是96平方厘米,高8厘米,则腰长( )厘米? 2、如图,梯形ABCD的上底长5厘米,下底长8厘米,已知三角形ABE的面积是24平方厘米,求梯形的面积.阴影部分是棕色的。 图中扇形半径都是4cm,阴影部分面积是多少? 一个半圆的半径为8厘米,它的周长是( )厘米,面积是( )平方厘米. 如图,梯形ABCD的上底长5厘米,下底长8厘米,已知三角形ABE的面积是24平方厘米,求阴影部分的面积.写出全过程. 图中的扇形半径都是4厘米,求阴影部分面积? 已知一个半圆的直径是8厘米,求它的周长是多少? 如下图,在一个梯形内有两个三角形分别是4平方厘米和6平方厘米,梯形下底的长是上底的2倍,求阴影部分面积?不能上传图就是在那个梯形中任取一点连接四个角上面那个三角形是4平方厘米下 一个圆心角为45度半径为2的扇形和一个等腰直角三角形组成的图形,那么图中的阴影部分面积是多少 一张直径为8厘米的圆形,剪去一半,剩下的半圆周长( ),面积( ) 在如图所示的长方形abcd中,△abd的面积比△bcd的面积大10平方厘米,ab=8厘米,cd=3厘米,求阴影部分的面积急! 圆P与扇形OAB的半径OA、OB分别交于C、D,与弧AB相交于点E,已知OA=15,角AOB=60度,求图中阴影部分的面积圆P在扇形里面,求扇形减去圆形的面积,圆P于弧AB相交 直径是8厘米,求半径,周长,面积π取3.1 已知阴影部分的面积为24平方厘米,求梯形的面积. 如图,这个扇形的圆心角是90度,面积是31.4平方分米,求阴影部分的面积 一个等腰梯形的周长是48厘米,面积是96平方米,告示8厘米,则腰是多少厘米? 六上数学题求阴影部分的面积(空白部分面积为80平方厘米),高是8厘米 如图,这个扇形的圆心角是90度,面积是31.4dm²,求阴影部分的面积 半圆的半径是8厘米,求半圆周长和面积急用 已知梯形上底6厘米,下底8厘米,阴影面积24平方厘米,求梯形面积(需要提供计算方式) 如图,已知扇形OAB的圆心角为90度,分别以OA.OB为直径在扇形内作半圆,P和Q分别表示两个阴影部分的面积,那么P和Q的大小关系是( )A. P=Q B.P>Q C.P画不了图啊,我再试试! 一个圆,半径是5厘米,求出面积和周长怎么算?“ 下面图中三角形ABC的高是6cm,面积是36平方厘米,求阴影部分的面积,······ 如图:ABCD是正方形,扇形半径是60毫米,求阴影部分面积.我知道答案是3600π/4 - 60 x 30 = 900π - 1800为什么这么做啊?扇形里的正方形面积如何求出来的啊? 一个圆的半径扩大3倍,它的周长扩大( )倍,面积扩大( )倍写分析 两条对角线把梯形ABCD分割成四个三角形,如图所示,已知两个三角形的面积,求另两个三角形的面积各是多少已知三角形BOC等于12 三角形AOB等于6 如图,四边形ABCD是菱形,角A=60度,AB=2,扇形BEF的半径为2,圆心角为60度,则图中阴影部分的面积是——三分之二π-根号三 为什么? 一个圆的半径是2厘米,那么它的面积和周长相等这道题对还是错 如下图,BCEF是平行四边形,三角形ABC是直角三角形,BC长8厘米,AC长7厘米,阴影部分的面积比三角形ADG的面积大12平方厘米,求GC的长. 如图,是4个正方形组成的图形,求阴影部分的面积. 一个圆的半径是2厘米,它的周长和面积相等.对还是错. 如下图:四边形BCEF是平行四边形,ABC是直角三角形,BC长8厘米,AC长7厘米,阴影部分的面积比ADH的面积大12平方厘米.求HC的长? 两个正方形组成的1和图形,求图中的阴影面积 如右图所示,O1,O2分别是所在圆的圆心.如果两圆半径均为2厘米,且图中两块阴影部分的面积相等那么EF的长度是多少厘米? 当一个圆的半径是几厘米时,他的周长和面积的数值相等 如图,四边形BCEF是平行四边形,三角形ABC是直角三角形,BC长9cm,AC长8cm,阴影部分的面积比三角形ADH的面积大9平方厘米,求HC的长是多少 一个环形铁片的外运周长是25.12厘米,内圆直径是6厘米.求环形铁片的面积 一个圆的半径是5厘米,它的周长=( ),面积=( ) 如右图,已知直角三角形ABC的面积是12平方厘米,求阴影部分的面积 一个半圆形铁片的周长是10.28分米,它的半径是( ),面积是( ). 一个圆的直径是5厘米半径是()厘米周长是()厘米面积是()厘米 如图,已知三角形abc面积是12平方厘米,求阴影部分面积? 一个半圆形纸片的直径是10厘米,它的周长是()厘米,面积是()平方厘米 一个圆的半径由2厘米增加到了3厘米,那么,它的周长增加了()厘米,面积增加了()% 已知图中三角形ABC的面积为1998平方厘米,是平行四边形DEFC面积的3倍,那么图中阴影部分的面积是多少?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn