移动界面设计点滴【完整版】幻灯片.pdfVIP

移动界面设计点滴 【完整版】 【编者按】本文转自@im小气的神 的个人博客。移动平台的设计 传统的网页有许多不同之处 ，如 独特的交互体验、不同光线下的视觉效果以及移动终端的资源有限。这些都考验着开发者的技术。 通过对设计移动界面的点滴记录 ，本文为读者介绍了对界面的规划的设计原则以及相关案例 ，并且 推荐了自己中意的设计工具。 一、减少空间占用 面向桌面电脑的网页设计不同,移动平台的设计中 ，屏幕空间是一个不可忽视的限制因素。设计需 要符合移动平台用户的使用习惯 ，以最佳的状态呈现屏幕信息。 接下来以当前正在工作的UI做为sample ，实战空间优化。 改进原则 去除不必要的提示信息 ： 合理减少界面中的文字信息 ，图形化界面直观的使用户可以完成操作任务。 控制字号 ，使用高亮/对比方式突出类似条目信息 ： 有需要充分利用单屏的空间 ，在不影响文字显示底线 ，采用多途径的设计方式描述内容。 合理布局功能控件 ： 减少显示中的控件使用 ，学会聪明的隐藏低优先级的功能 ，对于用户熟悉操作 产品开发都 将是有益的。 如在Ipho ne平台善用标准化的act io n sheet ，在A ndro id中的co llapsed menu。 限制因素 平台操作习惯 遵循不同平台的设计准则(你可以从官方的UI开发指南获取这些帮助教程) ，避免将错误的理 念带给特定的平台。如你不会在Ipho ne的设计中使用A ndro id/Symbian的O pt io ns。熟悉这些 原则不仅会使产品易用 ，善用组合的设计也将提升操作体验。 屏幕物理属性 不同尺寸的屏幕不同的UI。要考虑的产品在所有目标用户的不同屏幕的显示效果。如果要做 一个通版的UI设计 ，需要重点考虑带来的负面影响。触摸屏是另外一个需要考虑的情况 ，滑 动使得翻页变的容易 ，可点击的元素尺寸是否有必要增大以适应大的手指……要知道 ， mut li-t o uch 目前只是apple的专利。 我们需要为特定的这个页面做些什 这个是一个A ndro id平台的程序。一个优惠券列表页面 ，优惠券是我们最重要的显示内容。用户需 要在单屏中预览更多的优惠券信息 ，商店信息次之 ，而t ab导航将被保持以保证用户不会迷路。 移除标题。 默认收起商店信息,点击可弹下显示。 为保证用户对商店信息的初步了解 注意,加入商店名称。 接下来我们将得到下面的界面。 UI不只是皮肤 ，请用心使界面更加好用。 二、Flo 大局观 在移动设计中 ，我们需要完善的功能f lo ，对它认知的价值使得f lo 在整个设计开发过程中始终走 在前面。完善的f lo 不仅令功能产品更加易用 ，带来良好的用户体验 ， 此同时 ，也有助于提升开 发效率 ，不到位的f lo 将带来设计 开发的反复 ，使团队蒙受损失。 良好的移动产品f lo 标准有三 end t o end 清晰 整合 所谓end t o end是指功能根据需求设计需要符合所在平台的特性 ，完整的考虑到用户如何在任何场 景下使用操作及完成任务 ，提供因为有效或无效操作而带来的反馈帮助信息。 清晰是指整个设计中不会造成用户的疑惑 ，符合平台特性易于理解的设计。通常但凡清晰的功能 ， 即使需要付出更多次的操作 ，value还是高于稍显混乱的设计 ，虽然后者简化了用户的操作。 整合 ，在叙述减少空间占用时提到 ，受限于移动产品的诸多条件 ，合理的归纳使得产品使用更为 流畅。这 清晰并不矛盾 ，重在调和。 下面以前些时间已经release的一个功能模块作为示例 ，展示如何设计一个良好的f lo 。 案例简析 功能目标 ：通过列表快速定位城市。 该功能从属于Map视图 ，图标以形象的道路指向标示。 在mockup中的功能主UI ，显示支持的国家 ； 点击任意国家进入以首字母排列的城市列表 ； 点击任意城市 ，自动切入到Map视图并转向相应的可视地区。 主UI左上角提供Back键 ，预留回退。 在此 ，还有另一种设计思路 ：使用IPho ne 自带的Pickers控件 ，将国家列表横向置于上方 ，城市列表 纵向置于UI下方。 它的优势在于可以在一屏中解决所有的问题。但为了更好的使用Pickers ，你需要加入更多的诸 如Suppo rt ed Cit y等提示信息以区分两个Pic