这本书很早之前就看过了，正好这次借着写读书笔记的由头，把这本书再看一遍，加深印象，虽然这本书是14年出版的，里面的iOS设计尺寸还是640，但是里面的一些理念还是可以借鉴参考的，也是这本书提出了在同时设计iOS和Android版的APP时，界面所有元素尺寸和间距必须为8的整数倍
一、移动设计6原则
简洁
1、简洁的目标是突出重点，让用户能在小屏幕上聚焦内容，不能抱有将PC上的一切功能都往移动端搬的思想，敢于删除不必要的内容，只抓重点
2、做到内容有限，在浏览内容的时候，适时隐藏一些干扰功能，让被人最大化，比如简书在查看文章详情的时候，下滑评论框、收藏点赞等功能会隐藏，上滑动才会重新显示出来，这样就很好的利用了移动端的特性，让内容最大化
高效
1、避免键盘输入，键盘输入效率低，也容易出错，所以在设计的时候要思考是否有更好的输入方式
2、有效触动，提高触动的有效性，减少用户的挫败感，比如扩大点击区域，也可以用手势来替代点击
3、减少页面跳转，增加页面的连贯性
一致性
1、设计上的一致：页面基本布局结构、模块化内容、文案等
2、与平台环境一致：比如iOS屏幕左上角的返回设置，除非产品特殊需要，尽量不要改变这样的设计，保持平台的一致性
反悔
1、为用户的行为操作提供即时的反馈
2、提供有价值的状态提示反馈，避免过多的使用模态窗口，打断用户的当前任务，所以我们可以考虑其他的反馈方式，比如状态栏、导航栏提示
平台差异
编辑选择功能
iOS有明确的入口，通常在导航栏上诱变剂按钮，点击后进入编辑模式，通常可以多选，同时底部会增加操作栏，用来处理多选内容
Android是通过长按的方式进入编辑模式，此时操作栏呗情境操作栏覆盖，可以多选操作
二、细节设计
加载设计
每一次互动，都是一次加载的过程，要进入一个APP，会有一个加载界面，要完成页面的跳转，也会有各种加载策略，所以加载的细节设计是需要设计师特别关注的，要让加载时间变得更加有价值；让等候变得更加有趣；保持用户感受的连续性
常见的加载方式：
1、分步加载：优先加载占用网络资源少的内容，例如框架、文字、默认图案等，再加载占用资源多的内容，比如图片之类的，这也是我们为什么看图片多的网站时，图片的位置会出现一个占位符
2、懒加载：主要出现在长界面的时候，不需要把所有的内容一次性加载出来，而是当用户往下滑动的时候，自动触发从而加载更多内容
3、预加载：是一种提前加载的方式，比如在闪屏的时候提前加载首页内容
智能加载：网速不好的时候，考虑到加载速度以及流量的关系，可以采取智能加载，比如隐藏一部分信息，只显示部分内容，将更多的内容隐藏，当用户操作的时候再显示；或者也可以根据网络的情况，显示不同质量的图片，网好显示质量好的，网不好显示质量差的
缓存加载：是针对无网络的情况下，让用户仍然能看到缓存在本地的有用信息，不会出现空白界面，一般只会在主要界面上使用缓存加载，缓存加载可以有效的减少用户的访问流量，同时加快访问速度
但是我们也不能无限制的使用缓存加载，那样会让用户觉得APP占用了大量的系统空间，特别是一些产生大量图片和视频的APP，需要由缓存清理入口和上限的控制机制
控件
1、字体
在没有特殊需要的时候没字体一般都是采用系统默认的，常用的文字状态主要有：常态、选中、强调、辅助说明、链接等
2、图片
考虑到流量以及加载的问题，在移动端设计的时候需要根据场景来考虑图片的尺寸，不能随意使用大图，从图片质量考虑，可以分低、中、高不同的质量来获取。当考虑到适配的时候，可以准备多套图来适配不同屏幕的分辨率
3、按钮
除了点击外，按钮还有长按的属性；而且在一些比较小的按钮上，点击区域需要比按钮本身更大。以提高用户点击的准确度
4、输入框
当输入框有内容的时候，右侧可以提供一个清除按钮，这样就不需要用户连续按删除键
5、键盘
不同情况出现不同的键盘
三、适配方案
1、屏幕自动延伸
页面上的元素根据屏幕的大小进行左右延伸，一道道满屏内容的布局，也可以让一些隐藏的内容在大屏幕上显示的更完整
2、图片等比缩放
例外情况：当一张图放大过多时，会让用户感觉模糊，这时候可以考虑从后台重新加载更大的图片来满足大屏幕的需求
3、屏幕调距
当有些元素不适合拉升的时候，随着屏幕宽度的改变，可适当调整元素的间距，当超过一定间距时，可以使用延伸手法，将下一行的元素上提，比如屏幕小的时候一行显示两个图标，屏幕大的时候显示三个
4、屏幕截取
当界面上的元素只有首屏，不能上下滑动，在适配更短的屏幕时，可以使用截取部分图片的方式，让内容仍然满足一个屏幕的要求，图片可以上下截取，也可以左右，总之保留最需要的部分 ，一般针对图片，文字的时候直接截取，多余的以“......”的方式呈现
5、闪屏
启动页闪屏的适配设计，主要有两种方式，一种是纯色背景，元素居中显示，在不同尺寸的屏幕上主需要将边缘纯色延伸就行；还有一种是大图截取，这张大图要能够覆盖主要机型，然后采用截取的方式来适配屏幕
6、横竖屏切换
可以将原有的界面变成一种全新的模式来适配场景的需要，这种转换有时能带来意想不到的效果，让用户印象深刻，当然如果产品只适合横屏或竖屏显示，也可以直接锁定屏幕转向功能，这样就不会出现横竖屏切换
网友评论