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

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

交互技术前沿与应用实战:MDCC虚拟现实专场议程揭晓 解密“攻城狮使用手册” 技术专家齐聚!MDCC 2015精彩日程全曝光 基于ActiveMQ的消息中间件系统 OneMM逻辑与物理架构设计详解 John Carmack大神亲操刀,为Oculus开发Netflix应用 React Native实战(二):Android的打包 独立游戏的成功秘诀:好设计才是王道 Swift 2.1的新变化 Apple TV实战:用TVML开发第一款tvOS应用 【SDCC讲师专访】阿里王晶昱:云时代的分布式数据库DRDS 硬件研发、嵌入式技术演进:MDCC IoT峰会日程揭晓 专访百度知道iOS团队负责人孙源:代码强迫症的死实践派 TIOBE 2015年10月编程语言排行榜:Ruby取代Objective-C进前十 【SDCC讲师专访】PingCAP联合创始人兼CEO刘奇:好的产品应开源,不闭门造车 【深入浅出Koa】常用工具分享 帮你降低编程难度 Relay: 全新的React数据获取框架 探索游戏开发面临的技术挑战——MDCC 2015游戏开发专场议程曝光 【SDCC讲师专访】易开发创始人潘俊勇:这些年我遇到的那些坑 【CTO讲堂】OpenStack行业实践和发展趋势探讨 万物互联,移动为先:MDCC 2015移动开发者大会盛大开幕! 【MDCC 2015】微软开发体验与平台事业合作部大中华区DX部门总经理Srikanth Raju:物联之上云+端 英雄会晚宴,Top开发者共聚“华山之巅” 【MDCC 2015】产品与设计专场(上):百度研究院、印象笔记等专家齐聚,以实例探讨如何打造好产品 【MDCC 2015】产品与设计专场(下):网易云音乐、在行、三节课、去哪儿网、野兽骑行大咖的产品之路 友盟:把数据用活 让开发者享受大数据红利 友盟:用活大数据 让精细化运营为移动开发者服务 携手世纪互联 IBM Bluemix云平台落地中国 【MDCC 2015】IoT峰会—硬件开发与技术专场(下):专家齐聚,共同打造联网新时代 【MDCC 2015】虚拟现实专场(下):虚拟现实的“困”与“竞” 【CTO讲堂】面对世界竞争对手,如何拿到Google PDF开源项目PDFium? 提升网站性能开发的10个技巧 什么是T/S?兄弟高分求救 弱智问题,不好意思(马上给分!!!!!) 大家进来出出主意呀!第一次帮女朋友过生日?该如何安排最合理最浪漫呀?烦呀! 运行了不了EJB,请高手指教 求救了,通过一个单文档菜单上的一个子菜单选定它后在窗口里显示一个网页,能帮帮吗,谢谢了 关于如何对应在photoshop和dreamweaver4.0中的大小问题! InterBase数据库中数据的倒入倒出 关于C中scanf 的一点问题,请大家赐教 如何在Jboss3中建立一个守护线程?? MyICQ真的能免费吗?大家一起来交流交流. 一个小问题 关于DATAWINDOW的问题,在线等待 COBOL语言主要干什么用?它有什么特殊功能,什么公司或个人开发的?现在它还有市场吗? 非高手就不要进来了!很难的。 域登陆的问题 请教高手指导WINDOWS消息的问题!!!!! 互联网在线支付平台可行性讨论, 谁安装过Ehlib 2.4a?为什么我会出现File not found: 'DBSumLst.dcu'??? B/S结构的ERP系统是使用J2EE和.NET的架构哪个比较好? 我是初学者,请教一个简单的问题,关于jbuilder7和tomcat的 急救 关于b/s下 文档删除的问题 请热心的朋友一定看——帮忙 本人一定感谢大家——加分 实际编程中碰到的问题,高手赐教 关于树的问题!急 C++菜鸟有分!!! 无线问题 如何管理软件系列版本 快要疯掉了!服务器端与客户端的文件传送问题,请高手千万援助! 山东的朋友能否将较好的公司和较差的公司曝光一下!!!! 有哪位高高手知道ldap数据库怎么进行迁移呀? 互联网在线支付平台可行性 关于Form的问题??? 简单数字段问题 不能用redhat7.3自带的输入法,中文名字显示为问号。怎么解决 请问怎样把整型转换成字符串型? 谁在BCB下用过研华的PCL-812采集卡? 8数码和8皇后的算法,大家指点我一下看看,up有分,分可以加 数据库连接讨论!各位在连的时候用的是ADO,还是RDS? 有关上网设主机的问题(双网卡)(在线等) directx8中哪只函数支持播放内存中的声音文件 万分紧急!!!!!!先谢过! 那里又"绝世宝贝"下载? 哪位大哥帮翻译一句话!非常感谢!!!!!!!!!! 请问一个问题:用acdsee如何把点阵图转化成矢量图? cdonts在客户端发送附件,为什么失败? 第一行,第一列错误是什么回事阿? 怎样计算php里的时间差,mysql的时间差? 关于控制台程序 BYTE型怎么 输出到文件(急) 广州IT俱乐部活动讨论 OleContainer1对象如何使打开的文件嵌在OLE里面,而不是在外部打开DOC文档. 寻兼职程序员,开发一个的屏幕取词工具软件 1.碱式碳酸铅与硫化氢反应的方程式(我只知道会生成黑色PbS) 2.PbS与双氧水反应的方程式第一个方程式看上去两边不平 主题:生活中食品安全调研要求:对生活中食品安全问题状况,分析原因并提出整改建议 门道的意思 在双氧水通入硫化氢气体的反应中乳白色浑浊物质是什么 如何分析食品安全案件 目前食品安全存在哪些主要问题,为此有哪些对策可以解决? 电路节点电压法,图中的G24电导为何为0? 食品安全调查问卷我是大一学生,即将升大二,学校要求在暑期做社会实践调研,需要调查问卷,并附带采访人的录音及视频,我不太清楚该怎么做,求指导,课题可以做调整. 如图,分别作出 点P关于OA,OB的对称点P1,P2,连结P1P2,分别交OA,OB于点M,N,若P1,P2=5cm 求明朝时期朝鲜行政地图 涮羊肉起源于哪个朝代? 如图,∠AOB内有一点P,P关于OA,OB的对称点分别为P1,P2,连接P1P2交OA于点M,交OB于点N,若P1P2=5cm,求△PMN的周长. 为什么会产生电阻 干电池的电压是什么伏,锌筒是干电池的什么极,炭棒是干电池的什么极.蓄电池的电压是什么伏? 电压表怎么看它是测哪个用电器的如左边的图 电压表是测哪个的 右边的呢 可以测上 可以测下吗?要是这样呢 物质的电阻是怎样产生的?主要是想知道微观上的了解.是因为被原子束缚么?现在比较宏观的物理也是由量子物理造成的么?还有有一个什么相关的BCS理论又说的是什么?原子核失去对外层电子 在西方人眼里,中国历代王朝中,对人类文明影响最大的是唐朝还是宋朝?抑或是元朝? 一列火车总质量M=500 t,机车以额定功率P=6×105 W在轨道上行驶时,轨道对列车的阻力Ff是车重力的0.01倍.求:(1)火车在水平轨道上行驶的最大速度是多少?(2)火车在水平轨道上行驶速度为10m/s 人的干燥双手间电阻1000~5000Ω,如果人的双手接触电压为36V的电源,那么通过人体的电流最多不会超过几A?及详细过程 成为美国公民后要回中国居住有什么手续?有时间限制么? 汽车风挡玻璃上都需要贴什么不干胶,总共有几个, 有谁知道金属总有电阻的微观原因(除超导外) 干燥时,人的双手间的电阻约为1000~5000Ω,若小明双手间的电阻为3000Ω,他两手分别接触二节串联在一起的干电池的正、负极,通过他的电流有多大?若他两手分别握住家庭电路的火线和零线,通过 我国在出口农产品的同是,也从外国进口了农产品,我国从哪进口了其他农产品? 从微观的角度,电阻是由什么因素决定的 与发达国家比中国科学技术差在哪 LED灯具的功率因数随着输入电压是增大还是减小?请说明原因.再一个,效率:随着输入电压是增大还是减小? 我该怎样成为美国公民?我今年15周岁,我妈妈申请我移民美国,她已经是美国公民了,和一个美国人结的婚.我昨天刚刚在广州美领馆得到移民IR2签证,我想问的是我到那边后要怎样获得美国籍成 5条有关食品安全的警句 面巾纸中为什么要添加荧光粉为什么有的面巾纸说“未添加荧光粉”啊?内个荧光粉有什么用处啊? 怎么样才能成为美利坚合众国公民?我是一名中国大陆维吾尔族公民,我怎么样才能成为美国公民?需要什么条件和手续? 求几篇有关食品安全的新闻评论 谁知道哪些卫生巾含有荧光粉? 宋朝著名人物或者四大发明的经典小故事,方便小朋友讲解又能够体现教育意义!四大发明中指南针、活字印刷、火药的发明;算盘的发明和使用;北宋的交字是世界上最早使用的纸币;蹴鞠 怎样可以看出电压表所测的用电器 面巾纸里含荧光粉吗我们平时用的面巾纸里,含有荧光粉吗?听说荧光粉有毒的.我就知道一些劣质的卫生巾里面有. 归纳宋代教育的新现象.宗教在魏晋南北朝时期盛行的原因是什么? 请问玻璃上贴的不干胶广告如何去除? 是餐巾纸有荧光粉还是卫生纸有荧光粉?该怎么鉴别是否有? 说明宋朝文盛的具体表现,就教育方面分析宋代形成开放文化环境的原因 唐代有那些诗人,宋代有那些诗人. 黑板报:以“法制教育,安全教育,心理教育”为主题最好连文带图的 ,没有图的话,文字内容也行 食品安全检测指标有哪些好像在化学与生活课本里 唐代和宋代的诗人有哪些?(急)急得很,有就说,不要李白杜甫的…… 法制安全知识竞赛在哪里做? 一滴水的水龙头每天要白白浪费掉12千克水,一个月(3O天)浪费多少千克水?一年(365天)浪费多少千克水?12x3O=36O千克,12x365=4380千克这样做对吗? 先秦到唐代宋代元代明代清代经历了多少年 鲸海以前是属于中国的领海,怎么现在却成了朝鲜东海和日本海呢? 食品安全快速检测需要检测哪些指标?急!谢谢了!例如对一家餐馆的菜进行检验,看它是否符合标准,需要检验哪些指标呢?要用到哪些仪器呢? 居民食品安全中存在的问题大概400字左右 以安全法制教育为内容,选用什么标题 节水感悟求!快点!1 通过人体的电流达到30MA时,通电时间超过3秒,人就有危险,双手间的电阻是1000-5000欧,算人体安全电压 我国食品安全存在的主要问题是什么?你认为如何解决这些问题? 稀硫酸在水中的电离方程式 从经济发展水平来看,亚洲多数国家属于 A发达国家B新型工业化国家C高收入国家D发展中国家 给句子换个说发,保持句子原意不变:摸着门道,花草养活了,而且三年五载老活着,开花,多么有意思呀! 过氧化氢和过硫化氢哪个更稳定通过高斯计算 请分析制约我国食品安全的原因. 以“食品安全存在的问题和对策”为内容写论文,给一个合适的切入点并列出论文结构
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘