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

   <p><img title="移动应用设计中应避免的十种错误" alt="移动应用设计中应避免的十种错误" src="https://simg.open-open.com/show/ad34cb54b70c57b2ed044909daf0a746.jpg" width="550" height="361" /></p>    <p><em>导读：本文是来自移动应用开发公司</em><a href="/misc/goto?guid=4958341721101201801" target="_blank"><em>Sourcebits</em></a><em>系列文章</em><a href="/misc/goto?guid=4958341721935053074" target="_blank"><em>Mobile App Trends Series</em></a><em>中的一篇，文章内容适合初涉此领域的读者，避免移动应用设计容易出现的一些问题。</em></p>    <p>在了解了跨平台移动应用设计的利弊和移动应用开发常见错误之后，你想到了一个不错的应用创意，你甚至连应用的名字都想好了，接下来该干什么？</p>    <p>现在，我们要谈谈设计了。你需要考虑移动应用的功能结构、用户流程等问题，而这些并不是那么容易。考虑到进入开发阶段我们会涉及到诸如需求变动、项 目管理 等棘手的问题，所以在设计阶段，我们需要给自己制定一些原则，并且要切合实际的开展工作。这样我们才能开发出一款好用又有趣的应用。忽略这些潜在的问题而 盲目瞎干，你很有可能在此后的开发阶段陷入灾难。</p>    <p>本文试图帮助移动应用设计者在工作中避免一些难缠的麻烦，希望你的应用以及你的设计思路均能因此受益。</p>    <p><strong>错误1. 在弄清用户流程之前匆忙开始界面设计</strong></p>    <p>在开始界面设计前，我们要先把完整的用户流程详细的走通顺走清楚。哪怕是再简单的应用，为了确保用户流程逻辑正确、界面布局合理，我们需要反复推敲 用户流 程并绘制类似上面的流程图。另外值得注意的是，最好把关键功能绘制在流程图靠近顶部的地方，而不是被层层分支淹没在底部。</p>    <p>跳过此环节而草率的开始界面设计，最终开发出的应用很可能在使用流程上不够清晰合理，用户上手后不得其解，兴趣索然。</p>    <p><strong>错误2. 低估开发成本</strong></p>    <p>设计师在Photoshop中画出的任何东西，最终都需要通过开发人员的代码在屏幕上表现。原本只需几小时开发的功能，由于设计师的一个看似细微的改动，可能会多耗费几天的开发时间。所以，在设计过程中要避免画蛇添足。</p>    <p>换句话说，如果设计师主导了移动应用功能的取舍，那后果会很严重。举个搜索框的例子，原本相对简单的一个功能，设计师灵光乍现——在用户输入关键词 的同时 不断给出实时的搜索结果。这个看似细节的改动，很可能让开发人员当场吐血。像这种的功能改动最好经过多方讨论后做出决策，而不是任由设计师自说自话。</p>    <p><strong>错误3. 在低分辨率下设计，使用位图文件</strong></p>    <p>始终坚持为Retina屏幕的高分辨率绘制设计图，然后以此输出低分辨率版本图片。这对于老手来说是常识，我们在这里再啰嗦几句。大家都知道，移动 设备的 常见屏幕尺寸是越来越五花八门（以iOS平台 为例，迄今需要考虑的就有4种分辨率)。所以，绘制高分辨率版本的图片，甚至是使用矢量图而不是位图，这些有助于设计师效率最大化，以及更好的应对未来的 新硬件。</p>    <p><strong>错误4. 触摸区域太小</strong></p>    <p>普通人的食指触摸面积在1.6至2厘米见方，而且在使用移动应用的大多数时间里，他们的手指飞快的掠过屏幕。设计移动应用界面需要时刻提醒自己这一 点，用 户的触摸并不能像鼠标点击一样精确。看看你的设计是不是在一屏里包含了太多的按钮等功能触发点，按钮是不是足够大，间距是不是足够宽，会不会发生用户点选 不到或者误按其它按钮的问题？</p>    <p><strong>错误5. 滥用开场动画</strong></p>    <p>在启动时播放一段精致的动画似乎是个不错的想法，但切忌不要为了动画而动画。Path和Thrillist’s JackThreads使用很酷的开场动画是因为这些应用启动需要一些时间，在程序完成加载之前用户什么也不能做（译者：Path启动貌似没有啥动画，难 道是针对老版本说的？）。这种情况下，为用户准备一段简短愉悦的动画以消除等待的焦虑就显得很合时宜了。</p>    <p>由于应用启动时必须首先显示一张静待图片（译者：如iOS应用的Default.png），然后才能切换到动画，所以务必确保这个切换看起来天衣无 缝。一 些不好的例子在处理这个环节的时候产生了不协调的跳转或者闪屏，这都是需要避免的。（译者：优酷iPad应用的早期版本存在这种切换，处理中有一闪而过的 黑屏，现在的版本把动画直接去掉了）</p>    <p><strong>错误6. 让用户不知所措的原地等待</strong></p>    <p>在程序加载、处理数据、或者等待网络反馈时不给用户及时的反馈，会让用户误认为应用挂了，这也是一种不好的用户体验。</p>    <p>举例来说：通过网络加载数据的同时，不要让用户傻傻的盯着一个空白的屏幕等待，显示一个转菊花或者动画特效什么的，让用户明白应用运行正常，只不过是在等待网络数据。如果能显示数据读取的进度条那就更好了，不过事先和开发人员商量一下开发难度（参考本文第二点）。</p>    <p><strong>错误7. 盲目借鉴其它移动平台风格</strong></p>    <p><img title="移动应用设计中应避免的十种错误" alt="移动应用设计中应避免的十种错误" src="https://simg.open-open.com/show/c679b3eba23941e4f4062cf53bff7d3b.jpg" width="550" height="241" /></p>    <p>糟糕的抄袭只会让用户感到疑惑和愤怒。每一个移动平台都有自己的风格，平台厂商也已经依据其平台自身的审美诉求撰写类似苹果的Human Interface Guidelines之类的指导性文档（译者：Android现在也有类似的文档）。在iPhone上开发类似Windows Phone 7的Metro风格应用就很可能让习惯了iOS的用户感到无从下手。</p>    <p>我想说的是，你的应用并不一定要和官方应用一模一样，但也不能看起来另类到像不属于这个平台一样。</p>    <p><strong>错误8. 过分拥挤的界面</strong></p>    <p>在高PPI下设计移动应用界面，你可能不知不觉中就在一个屏幕里放了太多的东西。在27″的iMac屏幕上看设计图，你的设计是那么的赏心悦目。请 在移动 设备上再多看一眼（哪怕仅仅是把设计图导入手机相册看），可能就不是那么回事了。在一个屏幕内塞太多的元素，会让用户操作起来费力，甚至淹没了最重要的信 息。</p>    <p><strong>错误9. 认为所有用户都和你一样的使用应用</strong></p>    <p>无论你的应用界面看起来有多赞，都要做可用性测试。你可以在熟人圈内开展小规模的beta测试，记住让一些资深的设计师也参加。根据他们的反馈，在 最终发 布前调整界面。你也可以在Craigslist上发布广告，邀请一些学生来试用新产品，记得提供比萨或者一点报酬什么的。</p>    <p><strong>错误10. 忘记使用或者滥用手势操作</strong></p>    <p>记住并不是所有界面元素都必须直观的被用户看到，有时我们可以隐藏一些惊喜。</p>    <p>拿iPhone上面的官方邮件应用 (译者：又是老生常谈的例子)，用户可以在收件箱中通过横扫邮件标题激活删除功能，这就免去了用户点击“编辑”、选择邮件、选择删除的麻烦。这里我们发现 有个平衡点：老用户可能发觉出用手势完成快速删除，同时保留“编辑”按钮以便不熟悉的用户完成删除、标记等其它操作。所以，善用手势但不能过分倚重手势， 一般来说要最好不要用手势操作替代菜单等需要点选操作的界面元素。</p>    <p><strong>总结</strong></p>    <p>如果要用一句话概括本文提到的点点滴滴，那就是：好的设计是经过深思熟虑的。带着审慎的态度全面的考察你的设计，真正的从用户的角度出发想问题。不要试图走走捷径，也不要跳过测试，不要设计出连你自己都拿不出手的东西。<br /> <br /> 本文转载自: 伯乐在线：<a href="/misc/goto?guid=4958341722732765457" rel="nofollow" target="_blank">http://blog.jobbole.com/17688/</a> </p>