万字干货！全新 UI 视角帮你掌握「界面三重构」的知识点( 五 ) 编辑导语：好的界面设计有利

文章图片
（3）古腾堡图表法
古登堡图表法（GutenbergDiagram）又称对角线平衡法则（DiagonalBalance），由14世纪西方活字印刷术的发明人约翰·古腾堡提出。古登堡图表将要画面显示的东西分成了四个象限：
第一视觉区(PrimaryOpticalArea)：左上方，读者首先注意到的地方。最终视觉区(FinalOpticalArea)：右下方，视觉流程的终点。强休息区(StrongFollowArea)：右上方，较少被注意到。弱休息区(WeakFollowArea)：左下方，最少被注意到。如图小程序的授权页从Logo到允许高亮按钮就是对角线平衡构图。

文章图片
五、Z轴设计Z轴设计可分为视觉度层级（单界面）、结构层级（单界面）、产品用户流程（多界面）。

文章图片
1.视觉度层级（单界面）视觉度层级是根据界面元素的视觉表现来进行划分浏览的先后次序。界面的视觉度表现技法有主体与背景、投影、色彩字重字号等。
（1）主体与背景
界面中使用背景色是让元素向前进，背景色多为灰色且有颜色倾向，偏冷色或暖色。
微信界面使用了偏冷色背景， Craft界面使用了偏暖色背景。当背景色为白色时就需要留白、线条、投影来区分层级。

文章图片
（2）投影
界面中使用投影可以增加内容的视觉层级，之前追波流行的弥散投影也是为了增加界面视觉层级。
谷歌MaterialDesign就是运用纸张的物理投影来映射到设计系统中。在界面设计中使用投影时要思考这种技巧的保鲜时长。

文章图片
（3）色彩大于字重大于字号
色彩最典型的就是App的消息红色圆点，红色的波长最长，所以用最突出的红色来提醒用户有新动态。
字重是从面积的大小衡量的，标题文字常常加字重来提升视觉。
在定义组件时，鼠标悬浮、Hover的各种状态就是用颜色来区分，目的是让用户操作后有反馈的感知。

文章图片
2.结构层级（单界面）界面元素中的结构层级可以分为内容层、导航层、遮罩层、弹出层。内容层是界面内容元素的承载；导航层是位于内容之上，位置相对静止；遮罩层配合弹出层一起使用，又叫模态层；弹出层属于轻量化设计，比如消息通知、下拉菜单和加载、报错等状态提醒。
（1）模态对话框
如图模态对话框是用户在完成任务时，不希望跳转页面而打断工作流程，而是用Modal对话框在一个界面上承载相应的操作。
对于信息量不大，容器可展示的操作可用模态对话框。

文章图片
3.产品用户流程（多界面）产品的界面设计需要从概念到信息分类到信息架构，目的是方便用户快速的搜索、筛选、辨别出有用的信息。
交互设计需要学习辛向阳教授的交互设计五要素：用户、行为、目标、场景、媒介。
产品的Z轴设计其实是从平面（界面）、空间（层级）、架构（关系）梳理出结构关系，但站在产品层面最重要的是信息与用户的交互设计，关注用户旅程地图中用户流程。
用户流程需要多界面之间跳转，这就形成了产品的Z轴界面设计。