万字干货！全新 UI 视角帮你掌握「界面三重构」的知识点

编辑导语：好的界面设计有利于用户更好的了解产品，也能提高用户的使用体验。那如果才能拥有一个好的界面设计呢？本篇文章中，作者分享了使用界面设计需要的一些方法和技巧，感兴趣的小伙伴不妨来看看~

当不确定成为常态，公司的组织架构频繁变动，产品不断迭代，设计师需要跟随用户需求、业务、产品进行技能迭代，UI设计师学习数据分析、运营、交互等技能提升自己。

这些技能都需要产品界面设计为载体，那么界面设计中有哪些确定不变的方法和技巧呢？那就需要对界面有更深入的理解。

一、如何理解界面设计

互联网的项目职能有产品经理、用户体验设计师、交互设计师、UI设计师、视觉设计师、前端工程师、后端工程师、测试工程师等，每个职能岗位对界面设计的理解深度也各不相同。

1. 交互视角

交互设计师会从信息架构、概念设计、导航设计、标签设计、表单设计、搜索、筛选、关系、用户、目标、行为、场景、组件、模式等维度去观察和理解界面设计。

2. 组件化视角

产品经理、交互设计师、UI设计师、前端工程师共同搭建设计系统语言时，他们会从逻辑、关系、信息、载体、容器、技术等维度把界面拆分成一个一个的组件，比如Button、Modal、List、Icon、Tab、Card、Toast、Popover等。

3. 视觉视角

UI设计师、视觉设计师的视角会关注界面设计中的字体、色彩、图标、图片、布局、编排、比例、质感、栅格、风格、趋势等。

4. 前端视角

前端工程师会从代码视角理解界面结构，相关知识点有框架、容器、盒子原理、样式、标签、表单、模式、绝对定位、自适应、响应式、百分比等。

5. 界面三重构构思

基于以上视角，现在我会以一种新的视角带你去理解和学习界面设计，它就是界面三重构。简单说就是分别从X轴、Y轴、Z轴三个维度去理解和解读界面设计。

但是在模型抽象时遇到了困难，如图模型一是从界面、交互、前端的X轴、Y轴、Z轴去解读，模型二是从X轴、Y轴、Z轴的界面、交互、前端的去解读。

模型的抽象不够简洁，有很多重复的点。这种结构很像组件化中的类别和状态。

我尝试用组件化命名的方式梳理出平面逻辑图。梳理出界面—X、界面—Y、界面—Z、界面—XY、界面—XZ、界面—YZ，因为交互和前端都是建立在界面之上的，所以就有了界面+交互—X、界面+前端—X。当写到界面X轴相关知识时，如果有交互、前端的知识点，可以在此基础上接着写。

根据平面逻辑图我抽象出一个更简单的模型。可以从界面的X、Y、Z、XY、XZ、YZ去输出相关知识点，交互、前端在界面三重构的基础上阐述。

二、X轴设计

X轴设计中有位置的结构关系，位置的排序，段落文本行长的易读性，交互和前端中的应用。

1. 位置

X轴从位置上可以简化为左右、左中右的结构关系。

（1）左右结构

在左右的结构关系中，自古就有左为上，人的视线浏览顺序是从左到右，从上往下。所以重要的信息内容可以优先放在左边。

在舞台剧表演中，重要的角色登场往往也是从左边进场。微信的发现列表页把图标加文字放置左边，右边放箭头指向。

（2）左中右结构

左中右的结构布局让层级更加丰富，从而增加层次感。左中右的位置顺序是可以被定义的，常见的有左中右对应一二三的位置关系，也可以对应二一三的位置关系。这两种位置关系分别巩固了左或中为最重要的地位。

（3）左右并列秩序

我们来看看App界面的底部Tab栏的结构，当我们随意打开一个App时，你还记得底部Tab从左到右的栏目分别是什么呢？可能经常使用的App我们很熟悉，对于不熟悉的应用可能就不是很了解。

但是我们依然可以从中找到规律，就是第一个栏目往往是首页，最后一个是我的个人中心，其他的相对比较模糊。

由此我们推断出从左往右的顺序并不是一二三四依次递减，而是一三四二递减结束处呈上升趋势。这种秩序不但适用于C端产品的界面设计，同样也适用于B端的界面设计。

B端产品界面的导航结构第一个是首页（工作台）或最重要的内容分类，最后一个是更多或设置。同样遵循以上规则。

右侧位置重要最典型就是模态设计，在对话框设计中，确定和取消按钮往往把最重要的放置在界面的右侧，这时位置的排序确定为一，取消为二。

2. 易读性

文字段落编排时更多的需要考虑段落文本的易读性，当你设计C端产品时，因为屏幕尺寸的原因会忽略段落文本的行长，但在Web、B端设计中，行长的定义可以影响到读者的阅读效率和体验。

美国芝加哥有学者做过一个试验，人的眼睛是在不停地跳动，在跳动的时候是看不见字的，停下来的时候才能看见字，而且每次停下来只能看六个字。

所以一段文字不要排得太长，过长眼睛在阅读时会很疲劳，在阅读时我们更适合阅读较短的文字。

网页新闻详情页面的行长，我研究了纽约时报为640px、华盛顿邮报680px、Medium 680px，所以我们设计师可以控制行长最大在640—680px。

但是西文和汉字还是有区别的，站在前人的规则上去学习定义规则更加重要。

3. 交互改变位置秩序

位置的重要秩序其实是很容易打破的，在界面固定不变时结构中相对稳定，当交互大兄弟来了，说我想尝试改变改变，如图把手机的网易云音乐和QQ音乐进行组合成组，原来的一二三四的结构就被打破了，变成了一三二的视觉结构关系。

点开组合后，这时候用户大兄弟来了，网易云音乐与QQ音乐的排列先后次序取决于产品在用户心中的重要程度和操作频次。

因人而异，所以大家一定要带着客观的心态去学习，不同视角和不同思考维度都会有异样的结果。

4. 响应式与断点

X轴设计从前端的角度就是响应式和断点，因为载体的容器大小不同，前端代码主要用Media来打断点，不同断点之间会定义相对应的样式。内容元素按照栅格系统进行适配调整。

三、Y轴设计

1. 视觉中心

物理几何中心是居中的，但是人的视觉中心是偏上的，有时候眼见为实是假的，视错觉中有大量的案例，在色彩和图形设计中需要视错觉的矫正。

如下图APP的闪屏页的Logo居中布局，考虑到有向下的重力和视觉中心偏上的理论，往往把Logo居于物理中心上方。

2. 倒金字塔信息层级

倒金字塔结构是按重要性递减顺序安排消息的一种结构形式。界面展示的信息层级多为倒金字塔结构，重要的信息放上面，越往下信息层级越低。

网页设计中还会有折线之上的运用，以前人们看报纸是折叠的，但是为了告知读书报纸展示也是有内容的，所以折叠设计时看到一些图片引导读者打开。

Apple官网的信息层级也遵循倒金字塔信息层级，上方Logo加导航，中间为最新发布的产品，下方为历史发布产品。信息重要层级依次递减。

Apple官网下方露出iPhone的照片来引导用户滚动下拉浏览。

3. 纵向模式

纵向模式是用户习惯自上而下滚动来浏览更多信息，当用户还未确定目标信息时，纵向视觉流能帮助用户在不需要回扫的情况下获取更多信息。

如图微信APP的发现界面，用户会选择一列一列快速浏览直到找到某一目标信息后，再横向浏览细节。

那么问题来了，上文中提到倒金字塔信息层级，重要的信息应该放置上方，为什么APP的Tab栏很重要却放置在界面底部，下文隐喻设计中“驾驶舱隐喻”会讲到。

四、XY轴设计

X轴与Y轴组合后就形成了一个平面，所以平面设计的理论知识在此次也适用。

1. 盒子原理

当我们做界面设计时，为了让界面的元素统一为一个整体时，给他们整体来个框框就形成了一个一个盒子的样式，这样更有利于组合信息。典型的设计有卡片、列表、模块化等。

2. 四角压边

在Dribbble的作品展示中，由于作品图片展示比例为4:3，为了平衡界面中的元素，常常在四个角放一些小的相关元素来平衡画面。我们来看一下R神的插画作品中大量使用了四角压边的设计技巧。

运用到界面设计中最典型的就是卡片设计，比如个人中心、银行卡、列表页面等。如图银行卡就采用卡片设计，四角放置信息，整体给人简洁大气的感觉。

四角压边在设计中是可以灵活运用的，可以把四角压边变成三角压边，两角压边。

如图当四角压边的A1、B1与A2、B2位置慢慢移动至重合时，四角压边就变成了两角压边，多用于列表页。

3. 跷跷板原理

四角压边的本质是跷跷板原理，通过调整元素让界面达到平衡。

跷跷板原理本质是平衡，需要关注的是中间的一条水平线。微信列表设计中就运用了这个原理来平衡界面。

在苹果的原生设计中列表之间分割线是不包含图标且一直切到最后侧。因为左边的图标视觉重量大，右边的重量小，但是通过缩短左侧的杠杆长度并增加右侧的杠杆长度来达到视觉平衡。这种设计技巧在编排设计会被大量运用。

4. 8点网格（4点网格）

8点网格理论来源于谷歌Material Design的设计语言，4点网格理论来源于苹果iOS的设计语言。

个人还是更加喜欢iOS的4点网格，因为原子单位越小，可呈现的方式越多，可解决的问题方案也越多。

8点网格可以理解为最小单位，其他使用的单位都为8的倍数。8点网格多用于DIV盒子与盒子之间的间距。图标、头像等固定尺寸的也可以使用8的倍数。

苹果和谷歌都是在定义产品系统中的度量单位，西方人一直想定义度量这个问题，其中最有名的就是勒·柯布西耶的《模度》，他的理论是以西方人的的比例结构来定义规范，并不能适用于全世界更多的人种比如东方人、非洲人。

但是苹果设计团队发现世界上所有人类的手指触摸屏幕大小是一致的，最小为44pt。iOS定义了人类使用触控屏的基本度量，44pt也是4的倍率，这才是我喜欢iOS的4点网格的真正原因。

5. 视觉流引导

读者在看界面的时候，眼睛的视线受到画面内容的吸引，就会产生一个视觉先后的次序，将这些视觉集中点的先后依次连起来，就形成了视觉流导向。

设计师经常会考虑版面或界面上的文字是否会被阅读，实际上很多文字都不会被阅读，但是可能会被浏览。

视觉眼动仪可以检测到人们如何浏览一个页面的，从找到切入点，到了解界面中信息关注的先后次序，从而调整界面元素，来引导用户去关注重要且有用的信息。常用的视觉流导向有F模式、Z模式、古腾堡图表法等。

（1）F模式

尼尔森F型视觉模型由Jakob Nielsen于2006年提出，他指出用户在浏览界面时，视线动线会呈现宛如英文字母F的形状，这种视觉浏览模式主要包括以下三个方面：

1. 读者的眼睛会先从顶部开始，从左到右水平移动，浏览的上半部分会形成一条横向的运动轨迹，这就是F形状的第一条横线。
2. 读者的目光会向下移动，并再开始从左到右观察，但浏览的视觉动线长度会相对短些，这就是形成了F形状的第二条横线。
3. 读者从界面左边的部分进行垂直扫描，以较短的长度向下扫描，此时读者的阅读速度较慢，而且更有条理性和系统性，这样就形成了F形状的一条竖线。

根据尼尔森F模型，我们可以得出几个心理暗示：

1. 读者在浏览界面时是快速扫视，不会仔细阅读每一个界面内容。
2. 界面的头两段文字无比重要，多用小标题、短句引起阅读者注意。
3. 将重要的内容放在最上边，将重要的信息显示在标题和段落的前部显示给读者。

（2）Z模式

Z模式是基于用户从左到右自上而下的阅读习惯，用户首先关注的上半部页面的内容，依照从头部的左边到右边，再沿着对角线浏览下一部分的中部左到中部右，循环往复的浏览模式。如图头条的文本编排从标题从左到右阅读到文本从左到右阅读。

（3）古腾堡图表法

古登堡图表法（Gutenberg Diagram）又称对角线平衡法则（Diagonal Balance），由14世纪西方活字印刷术的发明人约翰·古腾堡提出。古登堡图表将要画面显示的东西分成了四个象限：

1. 第一视觉区(Primary Optical Area)：左上方，读者首先注意到的地方。
2. 最终视觉区(Final Optical Area)：右下方，视觉流程的终点。
3. 强休息区(Strong Follow Area)：右上方，较少被注意到。
4. 弱休息区(Weak Follow Area)：左下方，最少被注意到。

如图小程序的授权页从Logo到允许高亮按钮就是对角线平衡构图。

五、Z轴设计

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

1. 视觉度层级（单界面）

视觉度层级是根据界面元素的视觉表现来进行划分浏览的先后次序。界面的视觉度表现技法有主体与背景、投影、色彩字重字号等。

（1）主体与背景

界面中使用背景色是让元素向前进，背景色多为灰色且有颜色倾向，偏冷色或暖色。

微信界面使用了偏冷色背景，Craft界面使用了偏暖色背景。当背景色为白色时就需要留白、线条、投影来区分层级。

（2）投影

界面中使用投影可以增加内容的视觉层级，之前追波流行的弥散投影也是为了增加界面视觉层级。

谷歌Material Design就是运用纸张的物理投影来映射到设计系统中。在界面设计中使用投影时要思考这种技巧的保鲜时长。

（3）色彩大于字重大于字号

色彩最典型的就是App的消息红色圆点，红色的波长最长，所以用最突出的红色来提醒用户有新动态。

字重是从面积的大小衡量的，标题文字常常加字重来提升视觉。

在定义组件时，鼠标悬浮、Hover的各种状态就是用颜色来区分，目的是让用户操作后有反馈的感知。

2. 结构层级（单界面）

界面元素中的结构层级可以分为内容层、导航层、遮罩层、弹出层。内容层是界面内容元素的承载；导航层是位于内容之上，位置相对静止；遮罩层配合弹出层一起使用，又叫模态层；弹出层属于轻量化设计，比如消息通知、下拉菜单和加载、报错等状态提醒。

（1）模态对话框

如图模态对话框是用户在完成任务时，不希望跳转页面而打断工作流程，而是用Modal对话框在一个界面上承载相应的操作。

对于信息量不大，容器可展示的操作可用模态对话框。

3. 产品用户流程（多界面）

产品的界面设计需要从概念到信息分类到信息架构，目的是方便用户快速的搜索、筛选、辨别出有用的信息。

交互设计需要学习辛向阳教授的交互设计五要素：用户、行为、目标、场景、媒介。

产品的Z轴设计其实是从平面（界面）、空间（层级）、架构（关系）梳理出结构关系，但站在产品层面最重要的是信息与用户的交互设计，关注用户旅程地图中用户流程。

用户流程需要多界面之间跳转，这就形成了产品的Z轴界面设计。

（1）什么是用户流程

用户流程是用户从打开APP到完成任务关闭APP的使用全过程，包括了用户看到什么信息，做了什么事。

疫情期间每天都需要使用随申办小程序，用户流程是打开微信，进入到微信首页，下拉查看常用小程序，点击随申办，查看随申办，退出小程序。

根据用户流程优化体验，用户流程越短越好，操作流程尽量不超过5步。

用户流程要顾及头尾，即用户进入到一个新界面会看到什么信息，用户成功完成任务后会跳转到哪里，或显示哪些反馈信息。这些都是最容易被遗忘的接触点。

（2）如何确定用户流程

基于用户的使用场景。以小水查找朋友圈某个朋友的信息为例，需要思考用户有哪些场景，如果知道谁发的，就会先通过找到人，然后进入其朋友圈找到信息。

如果忘记谁发的呢，那只能凭记忆里在朋友圈慢慢滑动，直到找到该信息。

以上从交互设计五要素行为和场景对用户流程进行分析，还可以从用户、目标、媒介去思考如何帮用户高效的完成任务。

拆解用户方法有用户画像分类、北极星指标分类、用户目标分类、用户角色分类、利益相关者等。

拆解媒介的方法有竞品分析、头脑风暴、ABTest、埋点数据分析等。

六、XZ轴设计

上文已经讲了Z轴相关设计，为什么还要写XZ轴、YZ轴的设计呢，从X、Y、Z、XY、XZ、YZ更有逻辑性和完整性，也确定存在一小部分的案例可以解析。

1. Banner轮播图

Banner轮播图除了横向的X轴出场次序，还有Z轴点点一对一的当前状态。移动端受容器大小限制多为Z轴设计，Web端容器变大可以变成左右的交互设计形式。

2. 导航栏

导航栏是Z轴的视觉与交互结合，当前状态需要重点突出，视觉向前进，点击导航栏后底部的横线会有动效移动，可以侧滑导航栏选择类别，这样效率会更高；也可以侧滑下方内容切换选择。

3. 列表侧滑删除

列表侧滑是使用内嵌的布局方式，界面设计中用户习惯是先查看再操作，当容器大小放置不下可先隐藏操作按钮。

QQ聊天界面侧滑内容可以引用该内容。微信消息列表侧滑出现标为未读、不显示、删除操作按钮。

七、YZ轴设计

YZ轴多结合界面交互一起设计，通过用户操作形成Z轴信息架构的变化。YZ轴设计多用于信息流、键盘输入等。

1. 页面滑动

信息流的设计多为Y轴设计，Y轴急促、紧张的情绪会让用户不停的刷信息。

信息流设计中采用相似的界面结构保持统一，比如固定的头像位置，固定的操作按钮位置，标题文本形式等。

微信朋友圈信息流一整块一整块的加载提高阅读效率；而抖音的视频流是一个一个加载，更注重精准推送和沉浸式的观看体验。

2. 键盘输入

键盘输入也是采用YZ轴设计方式，不同场景下的键盘输入交互也有差别，微信聊天界面的键盘输入框放置在底部，每次调用键盘组件时界面会从下往上移动。

而朋友圈评论时，键盘组件除了从下往上移动，还要对齐到对应评论的内容上。前端的定位技术会有所不同。

八、模型升级

界面三重构模型中的界面可以替换成交互、前端、容器、用户、信息等，当然也可以替换成桌面端、Web、小程序、APP、B端设计等。

这样就可以把中间的要素抽象成N，界面三重构模型升级为N——X轴、Y轴、Z轴，N可以为单一的内容比如界面，也可以是N=N+N比如界面加交互一起思考。

简化的模型更适合微观层面的细节设计，并不适合于宏观视角的分析设计。

1. 如何使用该模型

我们来举一个组件的例子，比如导航设计共分为二级导航，我们常规会显示出一级导航。一级导航可以从X轴、Y轴两个维度去思考，X轴的多为横向全局导航，Y轴多为侧边导航栏。

当交互大兄弟来显示二级导航时可以平铺（XY）、上浮（Z）、内嵌（Z），二级导航展示方式还需要考虑容器大兄弟的意见，容器够大就可以选择平铺，容器小就展开收起的交互模式，展开就会有上浮和内嵌的两种形式。

模型抽象的N是随时发生变化，对应的界面设计形态也会发生变化，但是X轴、Y轴、Z轴的方法和设计技巧是相对不变的。

只是你知道或不知道，会用或不会用的区别。产品设计中常用的两个方法是等价设计和同形异构。

2. 等价设计

等价设计是帮助用户完成任务的结果是一致的，但过程可能不同，又或者是产品的逻辑结构是一致的，但设计的外在形式有差别。

如图京东购物车的数量添加减少功能是展示出来的，直接可以添加可减少商品数量；但是淘宝购物车的数量是展示结果，修改商品数量需要点击后出现步进器组件。

这两个设计形式就是等价设计，等价设计的好坏需要考虑很多因素，用户、目标、场景、手段、行为、容器、信息关系、生活方式等。存在即合理，合适最重要。

3. 同形异构

同形异构是指不同的信息、数据类型设计出相同的外在形式。

微信消息列表也中有微信广告助手、服务通知、订阅号消息、文件传输助手、个人聊天、群聊天等，这些消息的数据类型、对象各不相同。

可是外在的结构形式是一样的，这样做的目的是简化、统一，通过图标和头像来区分人、应用、工具的消息差异。

以上总结的界面三重构相关知识、理论、技巧都有其使用范围，那么有没有一种设计方法可以凌驾于界面三重构模型之上呢，答案是肯定的，那就是隐喻设计。

九、隐喻设计

什么是隐喻设计？我们应该怎么去理解它呢？隐喻可以理解为隐含的相似性，它用想象的方式将某一物体与另一物体相联系，并把二者的特征、情感等相互结合转移。

如果对隐喻设计感兴趣可以搜索我之前写过的文章《揭开隐喻设计的面纱-你不知道的隐喻设计》。

隐喻设计是通过象征、类比的手法将复杂抽象的概念简明化、具象化、降低用户学习使用的成本，为用户创造清晰、明了、舒适的操作体验。产品设计具体表现在苹果的ios操作系统和谷歌的Material design。

1. iOS六大设计原则之一

iOS六大设计原则：AestheticIntegrity(审美完整性)、Consistency(一致性)、Direct Manipulation(直接操作)、Feedback(反馈)、Metaphors(隐喻)、User Control(用户控制)。

Metaphors(隐喻设计)当一个app的虚拟对象和动作都是对熟悉事物的隐喻时（不管基于现实世界还是数字世界），用户学习的更快；隐喻设计在iOS系统中很好的得到体现，因为用户是直接与屏幕产生物理交互的。