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

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

Xcode 6 Beta 6发布闹乌龙,着重改进Swift语言 当API遇到云平台,开发者面临的新抉择! 《近匠》欧朋流量宝,工具类应用开发之道 《近匠》Bmob:免费无限制的公有云服务 MDCC应用征集最新动态:3D手游成热点、硬件种类丰富 闪迪Ultra II SSD:采用TLC闪存,最低价为79.99美元 现有技能不浪费!基于Titanium的跨平台游戏引擎Platino 跳过开发者,专注补Bug的iOS 8 Beta 6悄然发布 集群管理可以很简单,Google又放大招 应用内直接打车:Uber面向第三方开发者开放API 百万美元巨奖!英特尔启动感知计算挑战赛 IBM 2014技术峰会在京开幕! OpenGL 4.5规范标准发布,大大提升API性能! 更萌更贱:Flappy Bird开发者推虐心新作Swing Copters 学习的革命:AR增强现实遇到儿童应用 颠覆旧概念,IBM Bluemix开启云开发时代 专访企业QQ SaaS团队,谈企业级LNMP架构设计 《近匠》Coding:将软件开发搬到云上 小米与美视频游戏服务Ouya合作 进军国内客厅 新工具Get!轻松实现2D画面动态光影的Sprite Lamp 一周消息树:罗升阳的Android之旅 手游不易:GungHo 3.44亿美元售Supercell股权 周末去哪儿 当然是去2014微信开发者大会!(附参会提醒和名单) 开源框架Ember.js迎来1.7.0和1.8 Beta 1更新 《近匠》RealSense:几行代码,为游戏添增实感交互 MDCC游戏应用征集关键词:中小团队,3D,转型,IP 共话HealthKit:能否颠覆医疗保健生态系统? Perception Neuron系统,让动作捕捉技术不再高冷 2014年DevOps实践调查报告 .NET程序性能的基本要领 百度手机卫士宣布开放三大能力 构建互联网安全生态 怎样在edit中只显示分、秒? ******了解WaitCommEvent函数的请帮帮忙?***** 请问前辈哪里有PB 8初学的书籍下载,多谢 100分求助关于几个结构相同的DBF表合并的问题 送大家一礼物,得到ie版本与操作系统的function 从SUN收购事件看IT业的发展。 安装office2k的问题 一个update语句的问题。 jsp和mysql的问题小弟拜求再线等 请大家介绍几种检测内存溢出的软件,谢谢!(各种系统下的都行) 这是如何做的 我发的贴子没人来看呀,解决了,我把自己的分全给你!********** mysql远程连接的问题 为什么国内域名比国际的还贵呢? 是否继续当中型软件公司做程序员还是到小公司独当一面? vc7中的CDHtmlDialog值得用吗?请大家来讨论一下! 为什么国内域名比国际的还贵呢? 急急急,我又碰到大麻烦了!~? 在DOS环境下用什么命令来查看非文本文件内容,如在UNIX下的cat命令的功能,在线急等。。。 ★在软件中提供了自定义热键的功能,但是我如何判断该热键已被占用了呢??? 羽毛球爱好者,请进 入门:关于验证字已失效的问题 blob字段如何存取? 一个编程论坛 那位能给我一个qq号呀,我急用 liangdiantech@163.com 羽毛球爱好者,请进 请问哪里有Microsoft Application Center Test的相关资料?多谢 非常简单的问题!!! 轻松心态,远离非典! 在自己的机器上打不开联接 DataModule的问题(菜鸟级) 怎么把表中的列约束为唯一的? 一个编程论坛 从没见过的问题!!!晕了!! 安装问题,请指教! C++的应用是什么意思呢? 得到上传文件大小的问题,解决高分相送!! R6中的问题!高手请进!高分求救! 一个电子书籍下载和编程论坛 请问怎么在vb中调用纯c接口的api并实现多线程 如何在一个很大的文件中删除一段数据?不用拷贝的方法 the C++ programing language里的两个小问题!!! 找在没行带checkbutton的listbox控件类 我可怜的QQ被盗了~~有什么密码破译软件取回QQ的密码吗 VARIANT结构中,如何通过pvarVal指针来获得串口传来的二进制流?? 天啊,这就是《程序员》? 编译java程序需要哪些工具,菜鸟提问. how to use *.pak?? ★在数据窗口中如何同时实现多行操作,如update或delete多行。 请问oracle8i的下载问题! 请问MSDN.net 中文版光盘出了吗??????????????????????? 听俄罗斯人褒贬“免费医疗”被表嫂逐客竟残杀一家五口“避税天堂”瑞士不少银行职员“不敢”美国学者:星巴克咖啡在中国必须贵 否美元对主要货币28日普涨但仍维持低位中国投资者在悉尼购买逾6亿澳元土地开一家婚外情网站打算进军新加坡 遭公开日本进入“胖女时代”或因对瘦人审美疲翘臀又嘟嘴 壮汉翻拍“性感照”遭吐槽肯尼亚少女遭6男轮奸 嫌犯仅被罚剪草日本拟引进百余架无人机 叫嚣强化“监英国遭近年来最强风暴袭击 起重机被大蒙古总统访问朝鲜 成金正恩执政后首位身高2.51米世界第一高人成婚 新娘英国发明“验精棒”可测精子是否达标男子驾中巴撞南充警队法院大门 被抓时“抗衡中国说”凸现安倍同盟困境官方解读新消法:网购包装拆除不影响无四川南充中巴疯狂撞法院 肇事者儿子死安倍突访土耳其 传为劝阻土放弃购中国男子转钱汇错账户 银行称不能提供对方火辣女郎支持英格兰 沙滩比基尼秀翘臀朝鲜决定设立元山-金刚山国际旅游区2016年中国国家电网将完成1530美国侨领回忆70年前盟军轰炸侵华日军甘肃定西拍摄非遗图片四千余幅 拯救失“2014非遗演出季”在恭王府百年戏意大利动画片《魔法俏佳人》将登陆中国“台湾闽南语电影之夜”首次亮相海峡影昆明大观楼内架起巨幅显示屏 供市民观数千日本民众举行反战反安倍集会洗尽铅华始见真 舟山市委常委班子专萨尔瓦多:准备好了图解:习近平的“创新公开课”卫星显示可可西里盐湖面积增大 可能危上海警方重拳严打污染环境犯罪广州首创慈善组织募捐透明度评价系统香港友好协进会举行晚会庆祝回归17周“2014非遗演出季”在恭王府百年戏甘肃定西拍摄非遗图片四千余幅 拯救失甘肃多地普降雨水 官方启动地质灾害黄满足每一个心愿 书记校长与4000多
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘