移动应用设计中应避免的10种错误

标签: 设计 移动应用 | 发表时间:2012-04-26 03:07 | 作者:陈 远
出处:http://blog.jobbole.com

导读:本文是来自移动应用开发公司 Sourcebits系列文章 Mobile App Trends Series(译者:此网站要梯子)中的一篇,文章内容适合初涉此领域的读者,现翻译如下。

在了解了 跨平台移动应用设计的利弊移动应用开发常见错误 (译者:此两篇翻译中)之后,你想到了一个不错的应用创意,你甚至连应用的名字都想好了,接下来该干什么?

现在,我们要谈谈设计了。你需要考虑移动应用的功能结构、用户流程等问题,而这些并不是那么容易。考虑到进入开发阶段我们会涉及到诸如需求变动、项目管理等棘手的问题,所以在设计阶段,我们需要给自己制定一些原则,并且要切合实际的开展工作。这样我们才能开发出一款好用又有趣的应用。忽略这些潜在的问题而盲目瞎干,你很有可能在此后的开发阶段陷入灾难。

本文试图帮助移动应用设计者在工作中避免一些难缠的麻烦,希望你的应用以及你的设计思路均能因此受益。

错误1. 在弄清用户流程之前匆忙开始界面(草图)设计

 

在开始界面设计前,我们要先把完整的用户流程详细的走通顺走清楚。哪怕是再简单的应用,为了确保用户流程逻辑正确、界面布局合理,我们需要反复推敲用户流程并绘制类似上面的流程图。另外值得注意的是,最好把关键功能绘制在流程图靠近顶部的地方,而不是被层层分支淹没在底部。

跳过此环节而草率的开始界面设计,最终开发出的应用很可能在使用流程上不够清晰合理,用户上手后不得其解,兴趣索然。

错误2. 低估开发成本

设计师在Photoshop中画出的任何东西,最终都需要通过开发人员的代码在屏幕上表现。原本只需几小时开发的功能,由于设计师的一个看似细微的改动,可能会多耗费几天的开发时间。所以,在设计过程中要避免画蛇添足。

换句话说,如果设计师主导了移动应用功能的取舍,那后果会很严重。举个搜索框的例子,原本相对简单的一个功能,设计师灵光乍现——在用户输入关键词的同时不断给出实时的搜索结果。这个看似细节的改动,很可能让开发人员当场吐血。像这种的功能改动最好经过多方讨论后做出决策,而不是任由设计师自说自话。

错误3. 在低分辨率下设计,使用位图文件

始终坚持为Retina屏幕的高分辨率绘制设计图,然后以此输出低分辨率版本图片。这对于老手来说是常识,我们在这里再啰嗦几句。大家都知道,移动设备的 常见屏幕尺寸是越来越五花八门(以 iOS平台 为例,迄今需要考虑的就有4种分辨率)。所以,绘制高分辨率版本的图片,甚至是使用矢量图而不是位图,这些有助于设计师效率最大化,以及更好的应对未来的新硬件。

错误4. 触摸区域太小

普通人的食指触摸面积在1.6至2厘米见方,而且在使用移动应用的大多数时间里,他们的手指飞快的掠过屏幕。设计移动应用界面需要时刻提醒自己这一点,用户的触摸并不能像鼠标点击一样精确。看看你的设计是不是在一屏里包含了太多的按钮等功能触发点,按钮是不是足够大,间距是不是足够宽,会不会发生用户点选不到或者误按其它按钮的问题?

错误5. 滥用开场动画

在启动时播放一段精致的动画似乎是个不错的想法,但切忌不要为了动画而动画。 PathThrillist’s JackThreads使用很酷的开场动画是因为这些应用启动需要一些时间,在程序完成加载之前用户什么也不能做(译者:Path启动貌似没有啥动画,难道是针对老版本说的?)。这种情况下,为用户准备一段简短愉悦的动画以消除等待的焦虑就显得很合时宜了。

由于应用启动时必须首先显示一张静待图片(译者:如iOS应用的Default.png),然后才能切换到动画,所以务必确保这个切换看起来天衣无缝。一些不好的例子在处理这个环节的时候产生了不协调的跳转或者闪屏,这都是需要避免的。(译者:优酷iPad应用的早期版本存在这种切换,处理中有一闪而过的黑屏,现在的版本把动画直接去掉了)

错误6. 让用户不知所措的原地等待

在程序加载、处理数据、或者等待网络反馈时不给用户及时的反馈,会让用户误认为应用挂了,这也是一种不好的用户体验。

举例来说:通过网络加载数据的同时,不要让用户傻傻的盯着一个空白的屏幕等待,显示一个转菊花或者动画特效什么的,让用户明白应用运行正常,只不过是在等待网络数据。如果能显示数据读取的进度条那就更好了,不过事先和开发人员商量一下开发难度(参考本文第二点)。

错误7. 盲目借鉴其它移动平台风格

 

糟糕的抄袭只会让用户感到疑惑和愤怒。每一个移动平台都有自己的风格,平台厂商也已经依据其平台自身的审美诉求撰写类似苹果的 Human Interface Guidelines之类的指导性文档(译者:Android现在也有 类似的文档)。在iPhone上开发类似Windows Phone 7的Metro风格应用就很可能让习惯了iOS的用户感到无从下手。

我想说的是,你的应用并不一定要和官方应用一模一样,但也不能看起来另类到像不属于这个平台一样。

错误8. 过分拥挤的界面

在高PPI下设计移动应用界面,你可能不知不觉中就在一个屏幕里放了太多的东西。在27″的iMac屏幕上看设计图,你的设计是那么的赏心悦目。请在移动设备上再多看一眼(哪怕仅仅是把设计图导入手机相册看),可能就不是那么回事了。在一个屏幕内塞太多的元素,会让用户操作起来费力,甚至淹没了最重要的信息。

错误9. 认为所有用户都和你一样的使用应用

无论你的应用界面看起来有多赞,都要做可用性测试。你可以在熟人圈内开展小规模的beta测试,记住让一些资深的设计师也参加。根据他们的反馈,在最终发布前调整界面。你也可以在 Craigslist上发布广告,邀请一些学生来试用新产品,记得提供比萨或者一点报酬什么的。

错误10. 忘记使用或者滥用手势操作

记住并不是所有界面元素都必须直观的被用户看到,有时我们可以隐藏一些惊喜。

拿iPhone上面的官方邮件应用 (译者:又是老生常谈的例子),用户可以在收件箱中通过横扫邮件标题激活删除功能,这就免去了用户点击“编辑”、选择邮件、选择删除的麻烦。这里我们发现有个平衡点:老用户可能发觉出用手势完成快速删除,同时保留“编辑”按钮以便不熟悉的用户完成删除、标记等其它操作。所以,善用手势但不能过分倚重手势,一般来说要最好不要用手势操作替代菜单等需要点选操作的界面元素。

总结

如果要用一句话概括文本提到的点点滴滴,那就是:好的设计是经过深思熟虑的。带着审慎的态度全面的考察你的设计,真正的从用户的角度出发想问题。不要试图走走捷径,也不要跳过测试,不要设计出连你自己都拿不出手的东西。

 

英文原文: mashable   编译: 伯乐在线 - 陈远

【如需转载,请标注并保留原文链接、译文链接和译者等信息,谢谢合作!】

 

相关文章

相关 [移动应用 设计 错误] 推荐:

移动应用设计中应避免的10种错误

- - 博客 - 伯乐在线
导读:本文是来自移动应用开发公司. Sourcebits系列文章 Mobile App Trends Series(译者:此网站要梯子)中的一篇,文章内容适合初涉此领域的读者,现翻译如下. 在了解了 跨平台移动应用设计的利弊和 移动应用开发常见错误 (译者:此两篇翻译中)之后,你想到了一个不错的应用创意,你甚至连应用的名字都想好了,接下来该干什么.

移动应用表单设计秘籍

- - 落花流水——elya妞╰_╯
一直想写一篇文章,关于移动应用表单设计的,可惜最近项目很忙,忙到没有时间打理博客. 最近体验产品的时候,经常看到错误的的表单设计,要么信息混乱,要么步骤繁复、要么语言程序化,要么视觉焦点跳跃,要么校验顺序混乱,要么反馈不及时,如此种种的问题,让我很想认真的总结一下,思考一下,为移动应用的表单设计,提供一些个人力所能及的建议,希望更多地设计师能认真思考移动应用表单的特殊性,能最大限度的提升表单设计的体验,提升效率,提高满意度.

开发移动应用的7个致命错误

- - HTML5研究小组
“幸福的家庭总是相似的,不幸的家庭各有各的不幸”,这个准则同样适用于移动应用开发者,最好的移动应用一般具备以下几个特点:美观,简单,实用,耐看. 而对于不好的应用,有些常见的缺点是可以避免的,下面我们列举出开发移动应用时 7 个致命错误:. 以 Bump 为例,这个应用是用来分享手机间的数据的. 刚开始这个应用支持分享音乐,人气应用,联系信息,图片和其他内容,用户不知道它到底能干什么,后来开发者砍掉了其他功能,只剩下联系信息和图片分享,它才取得成功.

儿童移动应用的界面设计基础知识

- - 曉生語錄
注:实习生wenli对本文皆有贡献 . 最近处于项目需要,开始研究儿童产品的界面设计. 在此之前,对儿童如何使用移动产品和如何设计知之甚少. 优质的移动应用,为儿童带来乐趣的同时可以帮助儿童认知事物. 越来越多的儿童使用移动设备,接触虚拟社区的时间甚至早于真实世界,如何设计儿童产品是一个非常值得深入研究的课题.

移动应用界面设计模式 - 搜索、排序、筛选

- - 所有文章 - UCD大社区
去年年底,我们曾经学习过一篇“ 具有引导性的移动应用界面设计模式”,其英文原文来自O'Reilly动物园的一本新书,"Mobile Design Pattern Gallery",就是封面上是个大公鸡的那本儿. 今次这篇则是来自于本书的第四章——搜索、排序和筛选. 貌似国内引进版也由XX出版社在做着了,真心不关我事,自己走起.

移动应用的三种空状态界面设计

- - 互联网的那点事
本文作者 Craig Dennis,一名设计师,译者 @C7210. “空状态”是指移动应用界面在没有内容或数据时呈现出的状态. 长久以来,空状态界面一直是被忽视的,因为设计师们通常会将全部精力集中在怎样更好的呈现内容和数据上,只有开发人员才会比较频繁的与这类相对“意外”的状态打交道. 也正是因为这样的原因,空状态界面留给用户的印象大体上就是晦涩难懂的文案以及缺乏视觉设计风格.

2012年移动应用十大设计趋势

- - 百度MUX
2011年涌现出诸多优秀设计,随着操作系统的更新和硬件性能的提升,用户对移动应用的品质需求也呈现上升趋势,界面设计又被提升到一个新的高度. 移动应用不再是将内容从互联网搬至移动设备,而是解决设备本身的问题,根据用户需求从视觉感受、风格趋势、操作方式、信息架构和内容呈现等各个方面挖掘设计的可能性,为用户带来新颖的体验.

2012年移动应用交互设计趋势

- - 曉生語錄
2011年涌现出诸多优秀设计,随着操作系统的更新和硬件性能的提升,交互设计又被提升到一个新的高度. 不再是将内容从互联网搬至移动设备,而是解决设备本身的问题,根据用户需求从操作方式、信息架构和内容呈现等各个方面挖掘设计的可能性,为用户带来新颖的交互体验. 本文汇总今年热门产品的界面案例,希望能从中总结出未来一年需要重点关注的设计趋势.

从Web到移动应用——谈设计师的思维转换

- - legene的交互设计博客
随着移动互联网的快速发展,很多web产品经理、设计师转而投身至移动应用领域. 看起来非常相关的工作,却可能给他们带来了不小的困扰. 很多刚刚接触移动应用的产品经理、设计师依然习惯用Web的思维去做APP,从而导致一系列问题. 张小龙在谈微信时曾经说过: 绝不考虑Web形态,一切考虑都基于APP. 那么,移动应用和Web相比,区别到底在哪里呢.

2014年移动应用交互设计10大趋势

- - 百度MUX
在移动互联网飞速发展的这几年,每年都会有一些新鲜的设计趋势涌现出来. 2014年,又有哪些新的设计趋势脱颖而出呢. 百度MUX有一群关注趋势的小伙伴,从大量的APP中去发现设计范式,挖掘设计趋势,预测出2014年在移动产品中会被广泛应用的十大交互设计趋势. 希望这些新颖的设计模式,为设计师们带来创新设计灵感,进而为用户带来新鲜有趣的体验.