1.写在前面的话
这本交互设计书籍是一位产品大V安利的,本书介绍了很多UI组件的很多模式,应该算是比较全面的。非常适合刚入门的交互设计师、UI设计师、产品经理去阅读。而且作为工具书,看完之后还可以随时翻阅。
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组件。知道哪些组件,并且知道使用情景之后,最重要的是在实践中,选择最合适、体验最好的组件。学以致用,把知识转化为认知,才是读书的意义。