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

《方寸指间-移动设计实战手册》读书笔记——本来字就不多，有点像全本摘录的意思了……

封面

一、设计流程design cycle

1.web app和native app的区别？

聊聊Web App、Hybrid App与Native App的设计差异

http://www.woshipm.com/pd/123646.html

Web App 和 Native App，哪个是趋势？

http://www.zhihu.com/question/19558750

native不需要前端设计师，界面实现由开发人员完成，视觉设计师配合开发做产品切图。上线前需要审核。

2.原型宽度320PX，视觉：iOS640px，Android480px。

3.原型元素尺寸，点击区域最好44px以上，不能小于30px，文字大小可以是AXURE默认的13号字。

4.iOS，元素的尺寸和间距必须为2的整数倍

Android有ldpi/mdpi/hdpi/xhdpi/xxdpi五种规格，分别对应0.75/1/1.5/2/3五种系数的单位尺寸，480对应mdpid 1.5系数，所有元素尺寸和间距必须是6的整数倍。

同时做iOS和Android版本的APP，需要8的整数倍。

5.视觉标注和输出：320px，640px除以2，480px除以1.5，得到的单位是dp。

二、设计原则design principle

6.移动设计六原则

简洁：突出重点，在小屏幕上聚焦内容，删除、隐藏、转移。

高效：避免键盘输入（减少输入，保留之前的输入内容，关键字联想匹配；转化输入方式），有效触动（点击区域比看到的大，调整恰当间距），减少跳转，任务连续性。

一致性：降低认知成本，设计的一致性（结构布局，模块化内容，文案，交互性为，视觉风格），平台的一致性（iOS左上角返回），跨平台的一致性（多平台布局，包括iOS，Android，Web app），规范。

反馈：让用户知道自己的行为正在被后台程序响应和处理

情感化：视觉愉悦，幽默，惊喜互动效果，贴心智能关怀，个性化独特气质。

移动化：跳出PC的思维逻辑

三、平台规范platform norm

7.iOS平台

Android平台

Windows Phone平台：全景视图，无限扩展空间

8.层级返回：iOS的需要返回按钮，物理home键只负责退出。返回上一级按钮和物理返回。

编辑：iOS通过导航栏的编辑按钮，可多选；Android通过长按进入编辑模式，可多选；wp平台通常没有多选。

模板组控件：标准，帮助设计师快速搭建APP高保真设计稿。

对话框按钮：iOS一直把“否定”按钮放在左边；早期Android与iOS相反，4.0以后和iOS相同；wp平台和Windows系统一样把肯定放在左边，否定放在右边。

平台移植：优先考虑iOS

四、导航设计navigation design

9.主导航：

标签式，<5个，可融合logo、相机等

抽屉式，默认隐藏，通过左上角按钮或手势呼出

桌面式，适于工具类APP，每个工具有独立体系，也可扩展更多入口，使用趋势减少

菜单式，位于顶部，点击呼出，点击导航外的区域收起菜单，位于顶部，不适合结合手势，操作上有难度，不适合频繁切换的功能，一般使用列表来展示

点聚式，来源于path，动态，趣味

10.二级导航：（和主导航相互转化）

旋转木马

走马灯，左右手势滑动聚焦到当前内容，5-7个以内，避免疲劳。视觉暗示，显示下一张部分内容，或添加分页提示器，让用户保持清晰的方向感和对数量的认知

列表，扩展，分组，大量数据，结合图标、标题、或消息数字提示

图示，适合以图片为主的内容，及时更新，增加吸引力，配置固定的栏目或标题

分段选项卡，一般位于顶部导航栏下方，<4个

五、细节设计details design

（精华部分，加载，引导，通知，控件，动画）

11.加载，有价值，有趣，连续性。

启动页加载，logo、口号、出品方，传递品牌和情感内容；和首页一样，快的错觉；闪屏，后台配置，定期更新，运营活动和节假日。

页面间跳转，当前页加载（一般用在需要判断处理的页面，也适合web app中及时反馈加载信息）和进入页加载（点击链接后直接进入下一个页面，给用户带来流畅感觉，分步加载，优先框架和默认元素，让用户尽快看到基本布局和内容）

分步加载，优先加载占用网络资源少的内容，如框架、文字和默认图案，让用户更快看到页面框架内容

懒加载，长界面，无尽列表，达到某个点或触发拉动后加载

预加载，闪屏时提前加载首页内容；对于一些表单，提前加载表单

智能加载，不同网络情况生成不一样的界面，显示和隐藏；多套资源，根据网络情况做差异处理，如图片的高质量和一般质量

缓存加载，无网络时，看到本地缓存的有用信息，解决了设计体验和观感的很多问题。（避免空白界面，减少流量，加快访问速度， 不能无限制加载，防止占用太多系统空间）

12.加载样式

loading图标加文案说明

直接覆盖页面上方，半透明toast，嵌入界面内容

状态栏加载，系统默认，或覆盖状态栏

导航栏加载，主要是文案提示

界面中加载，主要有下拉刷新、懒加载和toast加载

工具栏加载，少见，例，iOS邮件列表

情感化：旋转，特别样式，意外惊喜，乐趣

13.引导，快速熟悉产品，遇到困难及时帮助，简单有趣，恰当时间和地方。

幻灯片引导，一般用于首页启动，聚焦，精简，创新。很容易被用户直接划过，追求核心和简单。故事型，功能型，游戏型，左右上下滑动翻页，自动翻页。3-5个。

浮层式引导，半透明，轻量级，目标性强，结合文案。非模态浮层，三秒左右消失；模态浮层，需用户点击确认。

遮罩式引导，强势的引导方式，半透明，通过各种图形结合盖住界面内容，需要确认或退出

嵌入式引导，状态栏，导航栏，工具栏，内容区。局部嵌入（温和，保留当前内容，增加引导提示）和整体嵌入（代替，一般用于“空状态”）空状态包括初始状态，清空状态和出错状态。

互动式引导，比较隐蔽，手势互动（加载），语音操作（告知用户正在接收）

多媒体引导，动画，音视频

14.通知设计，信息的传递，引起注意而不打断当前任务，针对性，不引起反感。

通知中心，系统，最便捷最不影响用户

顶部横幅，顶部短暂停留，引起注意，而不打断当前界面

alert，打扰程度最大，打断所有操作

toast，操作后反馈，一般3秒左右

标志，告知用户有新内容，提示查看，用户习惯消除这样的数字角标

15.状态栏

Android，电话、短信等

iOS，本身不带状态栏通知，但设计APP时可以覆盖状态栏

16.浮层通知，用于APP内的通知提醒，以浮层横条形式出现，较强引导性，不打断当前操作

标志通知，红点和数字，数字过大时容易被忽略。分为点击后消失和查看后消失

硬件提示，借助提示音，LED灯等

17.细节设计

文字

Photoshop，iOS平台，中文用黑体-简或Heiti SC，英文Helvetica（Neue）

Android平台，中文用Droid Serif，英文用Roboto

22,18,14,12,9dp,状态有：常态、选中、强调、辅助说明、链接等

图片（尺寸和质量）260×260,220,180,145,90,60×60

按钮，没有hover划过状态，有normal，press和disable等，长按属性，小按钮的点击区域要比本身大提高点击的准确度

输入框，默认显示提示文字，光标插入提示文字不消失，输入文字显示清除按钮

18.键盘，不同场景不同的键盘面板。

19.图形布局，细节的丰富程度，图片裁切方式，空间利用，信息缺乏与过载，趣味性与新鲜感，大小对比

20.卡片信息集中化，整体感，易操作，更大的点击区域。翻转，折叠展开，堆叠，自适应。

21.动画设计：告知用户来往，引导用户行为，减少用户焦虑，情景融入。

六、适配方案adaptation plan

22.不同尺寸的屏幕（延伸，缩放，调距，截取），横竖屏切换（延伸，模式转换，增加模块，锁定），硬件性能（降级处理）。

23.延伸，文字、背景、文本框、按钮、下拉框等

缩放，图片

调距，不适合拉伸的图标和图片

截取，上下截取、左右截取，保留需要的部分，大图

闪屏，启动页，纯色背景（延伸），大图背景（截取）

满屏设计，防止长屏幕手机底部出现空白，优先考虑宽高比（0.56-0.67）最小的屏幕开始。

24.横竖屏切换

宽高的变化

模式转换

增加模块

锁定转向

七、移动特征mobile feature

25.用户：年龄，性别，学历，职业，收入，平台差异，隐私安全，持机方式，拇指

26.常用手势

tap点击，

double tap双击，智能放大或缩小

drag拖拽，移动

flick滑动，切换内容，滚屏

shake晃动,

pinch/spread放大/缩小

press长按

twist双指旋转

27.环境：

碎片化时间，内容突出，快速获取信息；记忆上次操作，让打断的操作继续进行；清晰显示当前位置

应用时间段，娱乐、咨询、社交，注意时间高峰，对营销的好处

环境光，自动调节屏幕亮度，夜间和白天模式

噪声，识别环境声调整系统音量；语音即时聊天工具，扬声器和听筒播放

用户姿势

不稳定的网络，切换场景，缓存和预加载

流量，包月，月底谷底

电量，不足20%会忧心忡忡，寻找电源或放弃不必要的使用手机的情况

28.硬件：

硬件按钮

iPhone，一个home键，单击返回主屏幕，双击可以切换任务或关闭后台程序

Android，菜单，返回主界面，返回按钮；新版虚拟化到界面

Windows Phone，返回，返回主界面，搜索

29.屏幕：电容屏，多点触控

屏幕尺寸，物理尺寸，对角线

屏幕分辨率，屏幕上像素的个数

屏幕密度，每平方英寸的像素点的数量

存储空间，清除机制，自动清理

摄像头，前置和后置；扫描二维码，屏幕操控，截屏，脸部识别，认字翻译，镜子，测距离……留给开发者和设计者

麦克风和扬声器

距离传感器，靠近耳朵，屏幕熄灭，防止脸部误操作，节省电量

加速传感器，加速度大小和方向

GPS和方位传感器，位置和朝向

三轴陀螺仪，重力感应只是单维度；射击类游戏，街景浏览