方寸指间-移动设计实战手册凡指间

1、实战性强，对于将来毕设会有非常大的帮助突出强调UI设计中的各项细节问题设计师们能快速领会移动设计的要点方寸指间 移动设计实战手册.本书特色： 从PC时代到移动时代，移动化是很重要的未来趋势。这本书正是切合了这个转变，从基础知识和实战角度出发，让设计师可以快速接手移动方面的设计。划时代的转变1981-2007 PC时代 1981年，蓝色巨人IBM销售PC机， 揭开PC改变世界的大幕。2007-2017 后 PC时代2007年，iPhone上市，苹果改变了世界，乔布斯一脚踢翻了PC墙角。Web App与Native App区同Native App ： 原生态应用APP设计流程本地APP百度解释：基

2、于只能手机操作系统（IOS、Android、WP)并使用原生态程式编写的第三方应用程序。区别在于：Web需要前端开发原型宽度：320 px320px的宽度基本满足最小屏幕宽度原型元素尺寸1. 一般元素大致在44px或以上2. 最小的元素也不低于30px3. 间距问题：需要保证手势点击时候 的舒适感，绝不能令人感到局促320px交互原型原型界面标注：交互原型视觉宽度：640px320px不同于PC原型的大界面，移动App都是320px宽度界面和交互原型一样，视觉设计也有统一的宽度设置IOS版App：Android 版App：640px480px 如果app需要覆盖这两个平台，则设置文档宽度为64

3、0px。视觉标注和输出IOS 640px宽度界面，标题栏实际高度为88px，标注的时候直接除以2，单位是dp，即44dp。补充解释：关于px、dp（dip）、dpi等dip ： Density independent pixels ，设备无关像素。dp ：就是dip 主要处理字体的大小px ： 像素dpi ：dots per inch（每英寸点数） ， 直接来说就是一英寸多少个像素点。常见取值 120，160，240。标准dpi = 160density ： 直接翻译的话貌似叫 密度。常见取值 1.5 ， 1.0 。和标准dpi的比例（160px/inc）dip=dp=sp（scaled pi

4、xels - best for text size）屏幕尺寸(screen size)就是手机屏幕大小，屏幕的对角线长度，一般讲的大小单位都是英寸。像素 (pixel)想像把屏幕放大再放大，看到的那一个个小点或者小方块就是像素了。分辨率(Resolution)屏幕上垂直方向和水平方向上的像素个数。比如iPhone5S的分辨率是1136*640；视觉标注和输出这个值越大，屏幕就越清晰。iPhone 5S 的dpi是 326；Sam sung Note 3 的dpi是 386为什么我们在布局的时候最好要用dip，不要用px？因为这个世界上存在着很多不同屏幕密度的手机手机尺寸不一样，屏幕密度相差很大

5、比如下面图中的两个手机，同时设置2px长度的Button，在屏幕密度较高的手机里就会显示的比较小。而同时设置的2dip长度的Button，在两个手机上显示的大小是一样的。屏幕密度屏幕密度 ( dots per inch )简洁 、 高效 、 一致性 、 反馈 、 情感化 、 移动化一、简 洁与简约至上中的简约四策略一致：删除不必要的，组织要提供的，隐藏非核心的设计原则移动设计6原则：删除 ：敢于删除不必要的，突出重点、聚焦 重要内容组织 ：把传达信息归类分组、条理清晰隐藏 ：隐藏不必要的，会干扰用户浏览的元素转移 ：多了解移动端的特性，将各种操作方式 转移到传感器等硬件设备上二、高效：（对于移

6、动产品至关重要）（1）高效 避免键盘输入设计原则键盘输入容易引起用户焦虑和挫败感。越多的输入，只会让用户的认可度越低。转化输入方式：提高输入效率对于价格区间，传统的设计是采取两个输入框的方式，如图所示，让用户通过简单拖拉就能实现区间值的设定，是一种更便捷的方式。稳定 、 流畅 、 快捷都是高效的表现.保留之前输入的内容，失误导致退出后，能再次返回到原来页面。 减少输入：通过将常用输入框转化为选择控件。语音输入，传感器都是便捷的输入方式。保证每次操作的有效性，可以提升用户对产品的信任感和满意度。2、增加手势操作（滑动界面返回，用户不用再点击左上角的返回按钮 qq与微信的区别）1、提高点击的有效性

7、：a）扩大点击区域：按钮的点击区域要比视觉区域大， 建议手指触屏的点击目标是7-9mmb）调整恰当位置：标签栏的点击区域，要比看到的更高。设计原则（2）高效 有效触动.按钮的点击区域要比视觉区域大。从 信息的连贯性 和 操作的便捷性 角度考虑，我们应该减少无畏的界面跳转，尽量给用户在同一界面上操作的感觉。1.使用抽屉2.使用浮层：显示的内容在界面上会盖住界面内容，常见的tab样式也可以归纳为对界面浮层的应用。3.局部处理：用户的操作行为或者系统的反馈行为，尽量在当前页面中处理，这样可以让用户感觉更高效。设计原则（3）高效 减少页面跳转.使用浮层使用抽屉局部处理设计原则1.设计上的一致：基本的结

8、构布局、模块化内容、文案、交互行为和视觉风格等方面2.与平台环境的一致：例如ios屏幕上的返回设置，除非产品的特殊设计要求，否则尽量不改变这样的设计，保持与平台的一致性，避免用户使用上的不习。3.跨平台的一致性：淘宝各个平台搜索结果页在设计上保持一致，同时考虑平台的特性。（比如在Android的平台上没有返回按钮。）三、一致性：可以让产品更加易用，降低用户的认知成本，从而带来整体体验的提升。设计原则有效清晰 和 即时的反馈作用 起着重要作用，它能让用户知道自己的行为正在被后台程序响应和处理中。1.为用户操作提供即时的反馈：例如：点击后背景列表变为灰色，能让用户察觉已点击成功，避免多次点击。2.

9、提供有价值的状态提示反馈：避免使用模态窗口，打断当前任务。可以考虑toast、状态栏、导航栏等反馈方式，或是结合声音、震动、闪光灯。列表点击时即时反馈，告知用户已经点击成功。四、反馈： 移动产品通常面对的物理环境：屏幕小、硬件性能差、网络不稳定设计原则六、移动化 移动化是移动产品与PC产品的本质区别。1、要对手势充分利用，而不是简单的点击。2、考虑麦克风 、摄像头 、振动硬件 、LED 灯如何跟产品更好的融合。3、同时更要了解传感器的特点，摇一摇的重 力感应，LBS地理位置，陀螺仪的游戏效 果这些可以让产品更加多样化五、情感化 出色的视觉效果、幽默的文案风格、惊喜的互动效果，各种智能贴心的处理

10、，个性化的设计 都是情感化设计处理方式的一部分。平台规范每个平台都有属于自己的规范，特别是对框架和基本控件的熟悉，是初入移动领域的设计师们需要特别了解的。ios平台ios的按键要求最简化，HOME键负责App的退出，其他所有操作基本都是在App内完成App 应 用 的 架 构 布 局导航控制器（Navigation Bar）功能：对当前页面进行管理和操作返回按钮（backBarButton）功能：返回上一级页面右边栏按钮（rightBarButton）功能：默认情况下，此位置是空的。通常用于放置按钮用于当前画面的编辑或修改。分段控件（segment control）功能：当前页面的同级任务视图

11、切换，承载不同的模块。表格视图（Table View）功能：在一列里用很多行展示大量内容Tab栏（Tab bar）/操作栏（Toolbar）功能：Tab栏：在整个app中（一级页面）用于切换子任务、视图和模式Tollbar栏：在当前页面（二级页面）进行页面的任务操作。主键（Home）功能：退出当前app视图，切换到主屏幕。Android 平台相对于较为封闭的ios，android是一个更加开放的平台由于它的开放性，以及处于设计成本的考虑，很多Android App都是基于其 ios版本修改过来的，缺少了相应的平台风格。其中导航栏作为最重要的结构元素平台规范App 应 用 的 架 构 布 局导航

12、控制器 -返回（back）功能：保证在图标左边显示“向上”符号视图控件（Action bar）功能： 切换视图栏这个部分可以允许操作按钮（rightBarButton）功能：操作栏里的操作按钮会展示你的应用程序的最重要的操作。更多操作（segment control）功能：把不常用的操作放到更多的里TAB（TAB）功能：用于探索和切换不同视图或功能，也用于浏览不同分类的内容集合。主要有三种tab类型：滚动tab、固定tab、堆叠tab列表（List）功能：在一列里用很多行展示大量内容。物理键功能：为了提升效率，Android的手机都有物理键，包括返回，Home，设置与搜索，可以在全局操作。Wi

13、ndows Phone 平台追求设计上追求极简、扁平化，突出内容。全景视图是其平台设计的特点。通过左右滑动快速进入相应的内容，给人感觉是在同一界面内完成了大量信息的预览。设计上必须为内容做好层次分类，将重要的信息放置在全景图前方，避免用户不断向后滑动而产生困惑。平台规范返回（back）功能：返回上一级页面快速视图功能：在不同app中进行任务切换。标题栏功能：Window Phone 的Privo走马灯全局模式将页面分为上下两栏，上栏是类目与层级，下栏为对应类目的内容视图。内容视图工具栏功能：这些操作能够对当前的界面进行编辑，并且在系统中提高了多种默认操作 平台差异 层级返回 ios平台没有实体

14、返回按钮，所以涉及层级间的导航，App本身一定需要返回按钮，物理Home键只负责退出。 Android和WP平台有物理返回按钮，点击返回是动作流（例如在搜索界面，点击搜索框弹出软键盘，点返回按键，不是返回上一级，而是收回弹出的软键盘。在最新的android指南中，应用中多了返回上一级按钮 )设计师在考虑信息层级时候需要注意怎样与硬件返回区分，让产品返回效率最高，同时不让用户感到困惑。对于【编辑选择】，ios有明确的路口可以多选，同时底部会增加操作栏。平台差异.平台差异 编辑选择.WP是单一的操作方式，没有多选，通过长按的方式进入编辑模式。Android是通过长按的方式进入编辑模式，此时操作栏被

15、情境操作栏覆盖，可以多选。（每个平台都有标准的模版组控件，在设计上考虑到统一和差异处理）平台差异平台差异 模版组控件.ios一直遵循否定性按钮在左边，肯定性按钮在右边的原则。早期的Android平台与ios相反，或由设计师自定义，4.0 规范发布后，明确规定了放置顺序与ios相同。WP平台与Windows系统的规范一样，把肯定的按钮放在左边，否定性按钮在右边。当前市场环境下，大多数公司的App产品 ,主要考虑覆盖ios和 Android平台，这时一般优先考虑ios平台。因为ios的硬件配置一般高于Android，从性能上更能满足各种设计要求。ios App拥有完整的导航体系，无需借助外部按键。

16、当移植到Android版本时，只需要考虑适当的降级处理和适配规则描述。平台差异平台差异 对话框按钮.平台差异 关于移植.Web App 与 Native App Web App : 通过HTML5实现，通过浏览器访问 。Native App : 通过应用市场下载，直接在本地使用。 如果想快速开发一种产品，了解市场反馈，直接使用html5的Web App效率更高 。Hybrid App :混合模式移动运用，也是通过应用市场下载，看起来是一个native app，但是只是个框架壳，其实内容还是通过web app的方式实现。移动平台的app有三类： Web App Native App开发成本 低：前端成员