1.写在前面的话

这本交互设计书籍是一位产品大V安利的，本书介绍了很多UI组件的很多模式，应该算是比较全面的。非常适合刚入门的交互设计师、UI设计师、产品经理去阅读。而且作为工具书，看完之后还可以随时翻阅。

《App这样设计才好卖》读书笔记

2.页面类型

app的页面类型大致分为五种：

（1）启动界面：应用程序在启动后若无法立即提供用户使用，则应显示一个应用启动界面。例如微信在启动时，出现的地球画面的页面，就是启动界面。

（2）顶层界面：用于显示各种各样的信息，并通过导航功能将其他界面关联起来。例如淘宝、京东的首页，就是属于顶层界面。

（3）一览界面：用于连续显示所有相关内容，是一种最为常用的界面模式。例如搜索结果页、商品列表页、时间轴页面，都属于一览界面。

（4）详细信息界面：用于显示特定条目的详细信息，在界面中的位置较深。例如某个确定条目的搜索详情、商品详情页、文章详情页。

（5）输入/操作界面：用户可以在输入/操作界面中执行特定的操作。例如注册/登录界面、发帖界面、用户信息填写界面。

3.导航控件

导航控件大致分为三类：

（1）标签式导航：一般用在顶层界面提供导航功能，或在各个页面中提供跳转至其他页面的导航。例如现在大多数app采用的底部标签导航，今日头条首页的滚动标签导航。

（2）菜单式导航：主要模式有下拉式菜单、深入式菜单、折叠式菜单。菜单式导航主要用在pc端比较多。

（3）仪表盘导航：以一种网格形式排列图标及文本标签的UI组件。例如新浪微博发动态时，弹出的导航方式，就是仪表盘导航。

4.列表

列表一般用来显示大量信息。列表模式有五种：

（1）垂直列表：用于纵向罗列多个条目，是一种最基本的列表UI组件。垂直列表以文本为主，图片大多作为辅助辨认。例如很多新闻客户端的首页，就是用的垂直列表。

（2）网格列表：以类似围棋棋盘的网格形式罗列条目，它的条目元素是图像或图像与文本的组合。例如小红书首页或者淘宝的商品列表，就是用的网格列表。

（3）轮播面板：通常以横向方式列出图片、数据及导航控件等各种类型的条目。轮播面板可以将暂时不需要的信息隐藏在屏幕两侧之外，因此能充分利用界面空间。例如豆瓣的书影音模块里，就用到了轮播面板。还有探探首页的滑动表达是否喜欢的功能，也有用到。

（4）时间轴：以时间为轴罗列条目。设计师在使用时间轴时，将主要以何时、何人、何事这三点为轴心，显示用户之间的交流情况。例如微信朋友圈、新浪微博首页、知乎首页，都是属于时间轴。另外，收发消息页面、评论列表是属于消息模式的时间轴。

（5）日历：日期列表通常能以一天24小时，1周7天，1个月28-30天这三种方式管理列表中的信息。

5.通知与消息

（1）模态消息：用于向用户传递消息，它的特点是会在界面中央叠加显示一个对话框。如果设计师希望显示警告消息、重要信息、或让用户确认需谨慎处理的操作，模态消息将非常有效。例如执行删除操作，系统会弹出对话框；ios应用中，需要用户授权的操作，也会弹出对话框。

（2）无模态消息：与模态消息不同，无模态消息不会妨碍用户对原有界面进行操作。Android中又叫toast消息。

（3）块消息：块消息可以被插入原有的界面中，作为界面的一部分与其他UI一起显示。例如登录/注册时，如果手机号码输入错误，就经常用到块消息。

（4）角标：角标通过数字或简短的标签文本来显示。例如app图标上的红色数字、微信消息列表里的红点。

（5）气泡消息：如果需要针对界面中的一部分内容向用户发出通知，或显示该功能的补充说明，则可以使用气泡消息。例如网易云音乐在歌曲播放页面，播放一段时间后，会弹出引导用户分享歌曲的气泡消息。

6.写在后面的话

终于码完字了，以上写出来的，都是比较基础的UI组件。知道哪些组件，并且知道使用情景之后，最重要的是在实践中，选择最合适、体验最好的组件。学以致用，把知识转化为认知，才是读书的意义。