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

移动设计需摒弃的几大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

CES 2014:奥迪下一代汽车将采用NVIDIA的芯片! Cocos 3.0 Beta发布:更易用、更友好 开拓新兴市场?诺基亚或推Android手机,UI界面遭泄露 预测2014大数据值得关注的8个发展方向 霸主地位再临挑战?Salesforce CEO,我们不只有Oracle LBS应用新星、“司机好助手”微车借力移动互联网,志在打造车主的个人移动门户 新一代IDE Light Table开源:让编程工作更简单 图片应用也能高大上,看Cooliris如何玩转无人机 拥抱Spark,机遇无限——Spark Summit 2013精彩回顾 1月10日:改变世界的iPhone七岁了,你是传奇! 同洲电子推出首款手机操作系统960OS 免费授权使用 如何在Windows 8.1的IE11中打开同步选项卡? 25年老对手评价微软:换CEO可行,但是太迟了 【PPT集萃】十位一线专家分享Spark现状与未来(三) 万元奖品等你拿!2014创客118新年大Party! Firefox OS的2013回顾和2014展望 Strom8 CEO:搞好手游开发,合伙人很重要 2013年Q4全球PC出货量同比下滑6.9% 已连续下滑七个季度 一周消息树:2013年十大产品、图书、公司盘点 专访Wunderlist主设计师Jan Martin:永远不要盲目跟风流行趋势 研发周报:超实用的JavaScript技巧及最佳实践 2013最吃香的技能:Java称霸、Android势头正猛 移动周报:最火原型设计工具盘点 “京东电商云”起航,零售企业及品牌商是重点 教育乃立国之本:教育类开源项目大汇集 Hugo Barra首度谈离开谷歌后在中国工作的感受 对中国赞不绝口 母婴行业最早试水者 优谈宝宝借助轻应用全面布局移动产品线 腾讯云平台部总经理纪顺友:微云将彻底迈过文件传输的门槛 豌豆“荚”油!B轮融资1.2亿美元的豌豆荚 2013年终盘点:10款最精巧的硬件开发板 SquareWear:可替代Lilypad Arduino的开发板 大家有用这个软件吗?有的话请写下你使用的感觉,有什么不足? CoolSoft HTML Optimizer 谁那里有页面开发规范,重金求购 帮助中HTML文件的链接问题!!! asp.net是否可以用任何一种vs.net语言? 请教---------一个函数返回指针值的问题!!!! 如何可以筛选出被修改过的数据记录。。。。。。 如何在广域网上实现SOCKET通讯,与局域网有什么不同? invocation在Java中怎么翻译啊? oracle中增量导数据的问题!! 过多的异常捕捉会影响程序性能吗? 二个form时怎样用request来收取数据? 在sybase里健好的表如何从新修改? 一个小问题,这个变量是什么类型的??? 使用通讯控件的疑惑 怎样实现在文本文件中修改某一行的其中字符串 Nokia MobileSet中如何让手机识别中文? 注册表坏了怎么办? 大哥们,能否告诉小弟,在 ms sql server2000中如何修改 sa 用户的口令 我的超星不能用了!!! 十万火急:PDF文件修改 大哥们,能否告诉小弟,在 ms sql server2000中如何修改 sa 用户的口令.. 作为初学者,每天的问题太多了?帮我看一下下面的小问题 我上午53,下午58.该不会下马吧????/我相知道什么时候才能知道是否已经Pass,什么时候下证? 有关DELPHI6中使用SKINENGINE??? C++ Builder中多国语言的问题 在哪下载到Exchange 2000 Server Resource Kit? 快捷方式损坏怎样修复? bluesky069(菜鸟一族)你帮助我把那个PBL放到蛛蛛的信箱好不好呢?让大家都可以下在的! 请问哪里有w32dsm.exe的教程??? 潘译<>印刷错误百出,令人不忍卒读... LISTBOX的问题?请高手帮忙!!高分向送! 帮我想想这个主键该怎么建SQL SERVER7 如何将控件,恢复init()到初始状态 急救:装有SCO UNIX的硬盘克隆后不能启动系统,怎么办? 如何在FTP的目录下再新建目录?我初学网络编程, 怎样设置ScrollView中的ScrollBar不可见? 有关comboBox问题??????急!急!!! 有那位朋友对ADO控件调用T-SQL的链接服务器或存储过程的命令有所了解,或知道怎样取链接服务器的相关信息 真诚的向大家请教一个问题!!先谢谢了 redhat linux7.2安装完成后,怎么没有工具栏 已知manager是employee的子类,那么这么写Employee epy=new Manager()为什么合法? 第五次提出这个问题:如何通过DELPHI调用SQL SERVER 过程向SQL SERVER 存入图象。 为什么我在新闻聚焦中发表不了评论? 在VB里怎样用ADO存贮Access的Memo型字段? 誰有在PB下用powersock做的聊天程序? SQL的好书是什么呀?难道就没有人有体会? vb怎样格式化硬盘?? 做个《曹操传》之类的游戏需要多少投资? 关于sfc(系统文件扫描)的问题 高分求解,大虾请进 买了java程序员大本营的请进!!!! 金属管浮子流量计与普通的转子流量计有什么区别?分别用在什么样的环境,和各自的特点? 如图,在△ABC中,AD是∠BAC的平分线,DE⊥AB于点E,DF⊥AC于点F,求证:AD⊥EF.如题,图如下, 仪表压力变送器问题压力变送器现场安装ZDY9800 0-200kpa的,这个规格的没有了,我想用ZDY9800 0-600kpa的压力变送器,请问对测量的数据准确性有影响吗? 3台设备功率各50KW,需要多大的电缆?什么规格型号?以及空气开关的参数也要.3台设备功率各50KW,一个是不锈钢拉丝机,两台等离子切割机,请问在最多同时运行两台设备的情况下选择电缆的规格 转子流量计的钢制转子改为塑胶转子,请问在同一刻度下的实际流量比换转子前是增加了还是减少了? 如图,△ABC中,E、F分别是AB、AC、上的点.①AD平分∠BAC:②DE⊥AB:DF⊥AC;③AD⊥EF.以此三个中的两个.条件,另外一个为结论,可构成三个命题,即①②→③,①③→②,②③→①.(1)试判断上述三 150千瓦的功率应该用多大的三相四线铝电缆.要配多大的空气开关. 60个千瓦的高压钠灯电源是三相四线制长度1000米怎么计算用多大的电缆 如图,AD是△ABC的中线,E,F分别是AB,AC上,且DE⊥DF,求证:BE+CF>EF. 3*16+1*10电缆能带多大功率负载?3*6+1*4电缆能带多大功率负载?计算公式怎么算的 多股铜芯线载流大小咋3相载流与2相载流怎么区别?16平方=πR² 所以直径5毫米对不?2.5以下乘以9 往上减一顺号 380V 50HZ 30A 需要多少平方的电源线,多大的空气开关 如图AD是△ABC的角平分线DE//AC交AB于E,DF交AC于点F.求证:AD⊥EF. 三相交流电动机总功率为80KW左右,请问要多大的三根铜电线和空气开关才能行? 在三角形ABC中,角ABC的平分线与外角角ACE的平分线交于点D,试说明角D=2分之1角A启东中学作业本(人教版)上的,三角形的外角,第13题 节流装置和流量计的区别是什么?流量计和变送器的区别是什么?有点晕有一种防堵测量装置算流量计还是节流装置? 已知:如图,在RT三角形ABC中,∠BAC=90°,三角形BCD、三角都ACE、三角形ABF均为等边三角形求证:S三角形BCD=S三角形ACE+S三角形ABF 如图,在三角形ABC中,角abc的平分线于角ace的平分线相交于点D,试探求角D与角A的关系,并说明理由. V锥流量计测量空气的安装要求DN200管径 垂直安装是否可以 220电4平方的铜线带空调 电磁炉 电饭锅 4平方的铜线能定住么 跳闸么?说简单点 LFX系列分流旋翼式蒸汽流量计表数什么读 调整型流量计中心节流装置锥体有什么用 我准备买一台功率9千瓦的开水炉,用4平方铜线是否可以?那住大师请指导! 500KW的功率,380伏电压,使用多大的电缆?装多少安的开关? 菲格瑞思平衡式流量计与传统节流装置有哪些区别? 电锅炉18KW,功率380V,用多大铜丝线求:一平方铜丝线在380V的功率下通过的电流为多少? 总功率400kw 电压380v ,请问需要用多大电缆? 如图,已知:△ABC全等于△FED,求证:AB‖EF 如图三角形ABC和三角形CDE均为等腰直角三角形,点B,C,D在一条直线上,点M是AE的中点,证明:S△ABC+S△CDE≥S△ACE要设AC为a CE为b 已知功率70KW,线长60米,电压380V,需要多大的开关?用多少平方的铝电缆? 如图,直线AB平行于EF,角CDE=130度,求角ABC+角BCD+角FED的度数 如图,△ABC和△CDE均为等腰直角三角形,点B,C,D在一条直线上,点M是AE的中点,求证BM⊥DM V锥流量计可以用于对原油的测量吗? 如图,AB∥EF,试探究∠ABC,∠BCD,∠CDE和∠DEF之间的关系,并给出证明. 如图,△ABC和△CDE均为等腰直角三角形,点B,C,D在一条直线上,点M是AE的中点,下列结论:①tan∠AEC=BCCD;②S△ABC+S△CDE≥S△ACE;③BM⊥DM;④BM=DM.正确结论的个数:A.1个 B.2个 C.3个 C.4个死度娘, 如图,已知BC//DE,∠ABC=∠DEF,试判断AB和EF的位置关系并说明理由 已知AB//EF,BC垂直CD于C,角ABC=30度,角DEF=45度,求角CDE的度数 如图1三角形abc与cde均为等腰直角三角形,且e在bc上,连接ae,bd 如图,∠ABC的两边分别与∠DEF的两边平行,即AB‖ED,BC‖EF1)在图1中,射线BA与ED同向,BC与EF也同向;在图2中,射线BA与ED异向,BC与EF也异向;在图3中,射线BA与ED同向,BC与EF异向.请问:在上述三种情况 当电路中的电流过大时,电线容易发热甚至引起火灾,原因是什么?怎样才能避免发生这 有的化学价有很多个要怎样才能知道在一个化学式中它的化合价呢如果其中有2个都是有不止一个的化合价如锰和氯在同一个化学式中(不考虑是否有这个化学式)锰的化合价为:+2,+4,+6, 如图所示,已知AB//DE,BC//EF.求证:△DEF相似于△ABC. 电流大时电线会发热,请问电压大时电线会发热吗? 40kw.380v电压..要用多大的电线呢?220v又用多大的电线? 已知如图,A,F,C,D四点在同一直线上,AF=CD,AB‖DE,且AB=DE..求证:(1)△ABC≌△DEF(2)BC‖EF 己知电机功率怎样计算电缆截面积 我想问下怎样计算.例如10千瓦,分别用在220V,380V电压.用多大开关.多大电线.怎样计算得出在计出电流后,选多大电表 400A电流380V电压电机选择多大的电缆 热电偶出来2根线+,—,怎么和显示温度数字的仪表接线?如果用变送器,热电偶怎么跟变送器接线?变送器把电压信号变为电流信号后一般和什么设备连接 380V和220V电压分别在使用量达20千瓦时,空气开关最少要达到多少安倍 三相380V电机的功率为1.5KW,现改为电源为三相220V/60HZ ,启动电流会增加多少? 铜电线的承载电流大小与铜线的截面积是什么关系?与电压又是什么关系? 怎样从380v电压的开关下,取220v电源. 12KW的电动机三相380V电源要多大的电流?且要多大的电线? 电力电缆截面积与电流的关系求:电缆截面积与电流的关系表,民用一般都220V比如2.5平方的线能带起2500W-3000W的功率也就是10A的电流,那给关系表谁能给份,我这里只有57分. 角ABC=角ACE=角CDE=90度,AC=CE,问三角形ABC是否全等于三角形CDE 一台设备电压为380V(多台电机及照明),在三相进线电缆上用卡钳表量电流每相为100A,请教每小时耗电量多少 所有一切变送器的工作原理是什么?比如温度变送器,压力变送器,液位变送器,它们是怎么变送的? 实验室用质量流量计和转子流量计价格哪个高 如图,在△ABC中,D是BC边上一点,DE⊥AB于点E,DF⊥AC于点F且DE=DF,EF与AD交于点O,求证AD⊥EF.图发不上来, 是不是有几个压力控制仪表就会要装几个压力变送器吗?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn