APP界面设计写给大家看的设计书移动端界面转化版

这本书通过简洁明了的语言、通俗易懂的示例，将优秀设计通用的原则总结归纳为四点：亲密性、对齐、重复、对比。适合所有能够进行基础阅读的人学习，跟书名非常贴切。

（图0）《写给大家看的设计书》

当我把这本书推荐给产品组的开发人员时，得到的反馈是：示例都是印刷品设计，跟移动开发没有半毛钱关系。orz,这背后的爱恨情仇，如果展开则实在没有必要，否则将是通篇的吐槽。所以下面将这本书的描述语言、示范案例进行移动端界面的转化。

亲密性：将界面中相关的元素组织在一起，成为一个组，让它们不被视作一堆散乱且彼此无关的片段。

如果微信的信息列表页面，每一项的名称、时间、摘要只是样式区别却未经组织，就会变得不那么容易阅读，如下（图1）。尤其在列表项很多的时候，将拥挤不堪，让人窒息。

（图1）如果微信的信息列表长成这样，肯定不会有现在的用户量

实际的处理方式仅仅是采用了合理的列表项间距，以及每一项当中名称、时间、摘要的分布距离，就能轻松区分出列表项、每一项中内容的关系。秩序井然，符合逻辑，保证了良好的可读性。见下（图2）

（图2）现在这样，已经成为“理所当然”

通过组织界面元素，体现亲疏关系，保证条理清晰，不仅做设计时要注意，开发的时候也要重视。

对齐：任何元素都不能在界面中随意摆放，应该跟界面中的其他元素存在相应的视觉关系。

如果多看阅读的图书详情页面，简介信息和操作按钮随机摆放，像尚未完成的拼图零件，会让人无比烦乱（强迫症患者不要看），如下（图3）。

（图3）散乱摆放的图书信息和操作按钮

实际页面见下（图4），书名、作者、评分、价格左对齐，评分标记星星与评价人数水平方向对齐，阅读与购买、收藏与赠送等根据操作类型分组，各自在水平方向对齐。整洁的排版布局，提供流畅的视觉引导。

（图4）干净整齐的排版

通过将文字信息、操作按钮的分别对齐，来明确它们要传递的信息。一般在设计过程中，很少会出现这种混乱的情况。更多是在开发测试阶段，界面中的类似问题会比较多，尤其是不同尺寸屏幕适配的时候。

(编辑：小酷)