2022-6-25 纯纯
当不确定成为常态，公司的组织架构频繁变动，产品不断迭代，设计师需要跟随用户需求、业务、产品进行技能迭代，UI设计师学习数据分析、运营、交互等技能提升自己。这些技能都需要产品界面设计为载体，那么界面设计中有哪些确定不变的方法和技巧呢？那就需要对界面有更深入的理解。
互联网的项目职能有产品经理、用户体验设计师、交互设计师、UI设计师、视觉设计师、前端工程师、后端工程师、测试工程师等，每个职能岗位对界面设计的理解深度也各不相同。
交互设计师会从信息架构、概念设计、导航设计、标签设计、表单设计、搜索、筛选、关系、用户、目标、行为、场景、组件、模式等维度去观察和理解界面设计。
产品经理、交互设计师、UI设计师、前端工程师共同搭建设计系统语言时，他们会从逻辑、关系、信息、载体、容器、技术等维度把界面拆分成一个一个的组件，比如Button、Modal、List、Icon、Tab、Card、Toast、Popover等。
UI设计师、视觉设计师的视角会关注界面设计中的字体、色彩、图标、图片、布局、编排、比例、质感、栅格、风格、趋势等。
前端工程师会从代码视角理解界面结构，相关知识点有框架、容器、盒子原理、样式、标签、表单、模式、绝对定位、自适应、响应式、百分比等。
基于以上视角，现在我会以一种新的视角带你去理解和学习界面设计，它就是界面三重构。简单说就是分别从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轴从位置上可以简化为左右、左中右的结构关系。
在左右的结构关系中，自古就有左为上，人的视线浏览顺序是从左到右，从上往下。所以重要的信息内容可以优先放在左边。在舞台剧表演中，重要的角色登场往往也是从左边进场。微信的发现列表页把图标加文字放置左边，右边放箭头指向。
左中右的结构布局让层级更加丰富，从而增加层次感。左中右的位置顺序是可以被定义的，常见的有左中右对应一二三的位置关系，也可以对应二一三的位置关系。这两种位置关系分别巩固了左或中为最重要的地位。
我们来看看App界面的底部Tab栏的结构，当我们随意打开一个App时，你还记得底部Tab从左到右的栏目分别是什么呢？可能经常使用的App我们很熟悉，对于不熟悉的应用可能就不是很了解。但是我们依然可以从中找到规律，就是第一个栏目往往是首页，最后一个是我的个人中心，其他的相对比较模糊。
由此我们推断出从左往右的顺序并不是一二三四依次递减，而是一三四二递减结束处呈上升趋势。这种秩序不但适用于C端产品的界面设计，同样也适用于B端的界面设计。B端产品界面的导航结构第一个是首页（工作台）或最重要的内容分类，最后一个是更多或设置。同样遵循以上规则。
右侧位置重要最典型就是模态设计，在对话框设计中，确定和取消按钮往往把最重要的放置在界面的右侧，这时位置的排序确定为一，取消为二。
文字段落编排时更多的需要考虑段落文本的易读性，当你设计C端产品时，因为屏幕尺寸的原因会忽略段落文本的行长，但在Web、B端设计中，行长的定义可以影响到读者的阅读效率和体验。
美国芝加哥有学者做过一个试验，人的眼睛是在不停地跳动，在跳动的时候是看不见字的，停下来的时候才能看见字，而且每次停下来只能看六个字。所以一段文字不要排得太长，过长眼睛在阅读时会很疲劳，在阅读时我们更适合阅读较短的文字。
网页新闻详情页面的行长，我研究了纽约时报为640px、华盛顿邮报680px、Medium680px，所以我们设计师可以控制行长最大在640—680px。但是西文和汉字还是有区别的，站在前人的规则上去学习定义规则更加重要。
位置的重要秩序其实是很容易打破的，在界面固定不变时结构中相对稳定，当交互大兄弟来了，说我想尝试改变改变，如图把手机的网易云音乐和QQ音乐进行组合成组，原来的一二三四的结构就被打破了，变成了一三二的视觉结构关系。点开组合后，这时候用户大兄弟来了，网易云音乐与QQ音乐的排列先后次序取决于产品在用户心中的重要程度和操作频次。因人而异，所以大家一定要带着客观的心态去学习，不同视角和不同思考维度都会有异样的结果。
X轴设计从前端的角度就是响应式和断点，因为载体的容器大小不同，前端代码主要用Media来打断点，不同断点之间会定义相对应的样式。内容元素按照栅格系统进行适配调整。
物理几何中心是居中的，但是人的视觉中心是偏上的，有时候眼见为实是假的，视错觉中有大量的案例，在色彩和图形设计中需要视错觉的矫正。
如下图APP的闪屏页的Logo居中布局，考虑到有向下的重力和视觉中心偏上的理论，往往把Logo居于物理中心上方。
倒金字塔结构是按重要性递减顺序安排消息的一种结构形式。界面展示的信息层级多为倒金字塔结构，重要的信息放上面，越往下信息层级越低。网页设计中还会有折线之上的运用，以前人们看报纸是折叠的，但是为了告知读书报纸展示也是有内容的，所以折叠设计时看到一些图片引导读者打开。
Apple官网的信息层级也遵循倒金字塔信息层级，上方Logo加导航，中间为最新发布的产品，下方为历史发布产品。信息重要层级依次递减。Apple官网下方露出iPhone的照片来引导用户滚动下拉浏览。
纵向模式是用户习惯自上而下滚动来浏览更多信息，当用户还未确定目标信息时，纵向视觉流能帮助用户在不需要回扫的情况下获取更多信息。如图微信APP的发现界面，用户会选择一列一列快速浏览直到找到某一目标信息后，再横向浏览细节。那么问题来了，上文中提到倒金字塔信息层级，重要的信息应该放置上方，为什么APP的Tab栏很重要却放置在界面底部，下文隐喻设计中“驾驶舱隐喻”会讲到。
X轴与Y轴组合后就形成了一个平面，所以平面设计的理论知识在此次也适用。
当我们做界面设计时，为了让界面的元素统一为一个整体时，给他们整体来个框框就形成了一个一个盒子的样式，这样更有利于组合信息。典型的设计有卡片、列表、模块化等。
在Dribbble的作品展示中，由于作品图片展示比例为4:3，为了平衡界面中的元素，常常在四个角放一些小的相关元素来平衡画面。我们来看一下R神的插画作品中大量使用了四角压边的设计技巧。
运用到界面设计中最典型的就是卡片设计，比如个人中心、银行卡、列表页面等。如图银行卡就采用卡片设计，四角放置信息，整体给人简洁大气的感觉。
四角压边在设计中是可以灵活运用的，可以把四角压边变成三角压边，两角压边。如图当四角压边的A1、B1与A2、B2位置慢慢移动至重合时，四角压边就变成了两角压边，多用于列表页。
四角压边的本质是跷跷板原理，通过调整元素让界面达到平衡。跷跷板原理本质是平衡，需要关注的是中间的一条水平线。微信列表设计中就运用了这个原理来平衡界面。在苹果的原生设计中列表之间分割线是不包含图标且一直切到最后侧。因为左边的图标视觉重量大，右边的重量小，但是通过缩短左侧的杠杆长度并增加右侧的杠杆长度来达到视觉平衡。这种设计技巧在编排设计会被大量运用。
8点网格理论来源于谷歌Material Design的设计语言，4点网格理论来源于苹果iOS的设计语言。个人还是更加喜欢iOS的4点网格，因为原子单位越小，可呈现的方式越多，可解决的问题方案也越多。8点网格可以理解为最小单位，其他使用的单位都为8的倍数。8点网格多用于DIV盒子与盒子之间的间距。图标、头像等固定尺寸的也可以使用8的倍数。
苹果和谷歌都是在定义产品系统中的度量单位，西方人一直想定义度量这个问题，其中最有名的就是勒·柯布西耶的《模度》，他的理论是以西方人的的比例结构来定义规范，并不能适用于全世界更多的人种比如东方人、非洲人。但是苹果设计团队发现世界上所有人类的手指触摸屏幕大小是一致的，最小为44pt。iOS定义了人类使用触控屏的基本度量，44pt也是4的倍率，这才是我喜欢iOS的4点网格的真正原因。
读者在看界面的时候，眼睛的视线受到画面内容的吸引，就会产生一个视觉先后的次序，将这些视觉集中点的先后依次连起来，就形成了视觉流导向。 设计师经常会考虑版面或界面上的文字是否会被阅读，实际上很多文字都不会被阅读，但是可能会被浏览。视觉眼动仪可以检测到人们如何浏览一个页面的，从找到切入点，到了解界面中信息关注的先后次序，从而调整界面元素，来引导用户去关注重要且有用的信息。常用的视觉流导向有F模式、Z模式、古腾堡图表法等。
尼尔森F型视觉模型由Jakob Nielsen于2006年提出，他指出用户在浏览界面时，视线动线会呈现宛如英文字母F的形状，这种视觉浏览模式主要包括以下三个方面：
根据尼尔森F模型，我们可以得出几个心理暗示：
Z模式是基于用户从左到右自上而下的阅读习惯，用户首先关注的上半部页面的内容，依照从头部的左边到右边，再沿着对角线浏览下一部分的中部左到中部右，循环往复的浏览模式。如图头条的文本编排从标题从左到右阅读到文本从左到右阅读。
古登堡图表法（Gutenberg Diagram）又称对角线平衡法则（Diagonal Balance），由14世纪西方活字印刷术的发明人约翰·古腾堡提出。古登堡图表将要画面显示的东西分成了四个象限：
如图小程序的授权页从Logo到允许高亮按钮就是对角线平衡构图。
Z轴设计可分为视觉度层级（单界面）、结构层级（单界面）、产品用户流程（多界面）。
视觉度层级是根据界面元素的视觉表现来进行划分浏览的先后次序。界面的视觉度表现技法有主体与背景、投影、色彩字重字号等。
界面中使用背景色是让元素向前进，背景色多为灰色且有颜色倾向，偏冷色或暖色。微信界面使用了偏冷色背景，Craft界面使用了偏暖色背景。当背景色为白色时就需要留白、线条、投影来区分层级。
界面中使用投影可以增加内容的视觉层级，之前追波流行的弥散投影也是为了增加界面视觉层级。谷歌Material Design就是运用纸张的物理投影来映射到设计系统中。在界面设计中使用投影时要思考这种技巧的保鲜时长。
色彩最典型的就是App的消息红色圆点，红色的波长最长，所以用最突出的红色来提醒用户有新动态。字重是从面积的大小衡量的，标题文字常常加字重来提升视觉。在定义组件时，鼠标悬浮、Hover的各种状态就是用颜色来区分，目的是让用户操作后有反馈的感知。
界面元素中的结构层级可以分为内容层、导航层、遮罩层、弹出层。内容层是界面内容元素的承载；导航层是位于内容之上，位置相对静止；遮罩层配合弹出层一起使用，又叫模态层；弹出层属于轻量化设计，比如消息通知、下拉菜单和加载、报错等状态提醒。
如图模态对话框是用户在完成任务时，不希望跳转页面而打断工作流程，而是用Modal对话框在一个界面上承载相应的操作。对于信息量不大，容器可展示的操作可用模态对话框。
产品的界面设计需要从概念到信息分类到信息架构，目的是方便用户快速的搜索、筛选、辨别出有用的信息。交互设计需要学习辛向阳教授的交互设计五要素：用户、行为、目标、场景、媒介。
产品的Z轴设计其实是从平面（界面）、空间（层级）、架构（关系）梳理出结构关系，但站在产品层面最重要的是信息与用户的交互设计，关注用户旅程地图中用户流程。用户流程需要多界面之间跳转，这就形成了产品的Z轴界面设计。
用户流程是用户从打开APP到完成任务关闭APP的使用全过程，包括了用户看到什么信息，做了什么事。 疫情期间每天都需要使用随申办小程序，用户流程是打开微信，进入到微信首页，下拉查看常用小程序，点击随申办，查看随申办，退出小程序。
根据用户流程优化体验，用户流程越短越好，操作流程尽量不超过5步。用户流程要顾及头尾，即用户进入到一个新界面会看到什么信息，用户成功完成任务后会跳转到哪里，或显示哪些反馈信息。这些都是最容易被遗忘的接触点。
基于用户的使用场景。以小水查找朋友圈某个朋友的信息为例，需要思考用户有哪些场景，如果知道谁发的，就会先通过找到人，然后进入其朋友圈找到信息。如果忘记谁发的呢，那只能凭记忆里在朋友圈慢慢滑动，直到找到该信息。
以上从交互设计五要素行为和场景对用户流程进行分析，还可以从用户、目标、媒介去思考如何帮用户高效的完成任务。拆解用户方法有用户画像分类、北极星指标分类、用户目标分类、用户角色分类、利益相关者等。拆解媒介的方法有竞品分析、头脑风暴、ABTest、埋点数据分析等。
上文已经讲了Z轴相关设计，为什么还要写XZ轴、YZ轴的设计呢，从X、Y、Z、XY、XZ、YZ更有逻辑性和完整性，也确定存在一小部分的案例可以解析。
Banner轮播图除了横向的X轴出场次序，还有Z轴点点一对一的当前状态。移动端受容器大小限制多为Z轴设计，Web端容器变大可以变成左右的交互设计形式。
导航栏是Z轴的视觉与交互结合，当前状态需要重点突出，视觉向前进，点击导航栏后底部的横线会有动效移动，可以侧滑导航栏选择类别，这样效率会更高；也可以侧滑下方内容切换选择。
列表侧滑是使用内嵌的布局方式，界面设计中用户习惯是先查看再操作，当容器大小放置不下可先隐藏操作按钮。QQ聊天界面侧滑内容可以引用该内容。微信消息列表侧滑出现标为未读、不显示、删除操作按钮。
YZ轴多结合界面交互一起设计，通过用户操作形成Z轴信息架构的变化。YZ轴设计多用于信息流、键盘输入等
信息流的设计多为Y轴设计，Y轴急促、紧张的情绪会让用户不停的刷信息。信息流设计中采用相似的界面结构保持统一，比如固定的头像位置，固定的操作按钮位置，标题文本形式等。微信朋友圈信息流一整块一整块的加载提高阅读效率；而抖音的视频流是一个一个加载，更注重精准推送和沉浸式的观看体验。
键盘输入也是采用YZ轴设计方式，不同场景下的键盘输入交互也有差别，微信聊天界面的键盘输入框放置在底部，每次调用键盘组件时界面会从下往上移动；而朋友圈评论时，键盘组件除了从下往上移动，还要对齐到对应评论的内容上。前端的定位技术会有所不同。
界面三重构模型中的界面可以替换成交互、前端、容器、用户、信息等，当然也可以替换成桌面端、Web、小程序、APP、B端设计等。这样就可以把中间的要素抽象成N，界面三重构模型升级为N——X轴、Y轴、Z轴，N可以为单一的内容比如界面，也可以是N=N+N比如界面加交互一起思考。简化的模型更适合微观层面的细节设计，并不适合于宏观视角的分析设计。
我们来举一个组件的例子，比如导航设计共分为二级导航，我们常规会显示出一级导航。一级导航可以从X轴、Y轴两个维度去思考，X轴的多为横向全局导航，Y轴多为侧边导航栏。当交互大兄弟来显示二级导航时可以平铺（XY）、上浮（Z）、内嵌（Z），二级导航展示方式还需要考虑容器大兄弟的意见，容器够大就可以选择平铺，容器小就展开收起的交互模式，展开就会有上浮和内嵌的两种形式。
模型抽象的N是随时发生变化，对应的界面设计形态也会发生变化，但是X轴、Y轴、Z轴的方法和设计技巧是相对不变的。只是你知道或不知道，会用或不会用的区别。产品设计中常用的两个方法是等价设计和同形异构。
等价设计是帮助用户完成任务的结果是一致的，但过程可能不同，又或者是产品的逻辑结构是一致的，但设计的外在形式有差别。
如图京东购物车的数量添加减少功能是展示出来的，直接可以添加可减少商品数量；但是淘宝购物车的数量是展示结果，修改商品数量需要点击后出现步进器组件。这两个设计形式就是等价设计，等价设计的好坏需要考虑很多因素，用户、目标、场景、手段、行为、容器、信息关系、生活方式等。存在即合理，合适最重要。
同形异构是指不同的信息、数据类型设计出相同的外在形式。微信消息列表也中有微信广告助手、服务通知、订阅号消息、文件传输助手、个人聊天、群聊天等，这些消息的数据类型、对象各不相同，可是外在的结构形式是一样的，这样做的目的是简化、统一，通过图标和头像来区分人、应用、工具的消息差异。
以上总结的界面三重构相关知识、理论、技巧都有其使用范围，那么有没有一种设计方法可以凌驾于界面三重构模型之上呢，答案是肯定的，那就是隐喻设计。
什么是隐喻设计？我们应该怎么去理解它呢？隐喻可以理解为隐含的相似性，它用想象的方式将某一物体与另一物体相联系，并把二者的特征、情感等相互结合转移。如果对隐喻设计感兴趣可以搜索我之前写过的文章《揭开隐喻设计的面纱-你不知道的隐喻设计》
隐喻设计是通过象征、类比的手法将复杂抽象的概念简明化、具象化、降低用户学习使用的成本，为用户创造清晰、明了、舒适的操作体验。产品设计具体表现在苹果的ios操作系统和谷歌的Material design。
iOS六大设计原则：AestheticIntegrity(审美完整性)、Consistency(一致性)、Direct Manipulation(直接操作)、Feedback(反馈)、Metaphors(隐喻)、User Control(用户控制)。
Metaphors(隐喻设计)当一个app的虚拟对象和动作都是对熟悉事物的隐喻时（不管基于现实世界还是数字世界），用户学习的更快；隐喻设计在iOS系统中很好的得到体现，因为用户是直接与屏幕产生物理交互的。
用户移动视图来查看更多的内容；拖拽内容；切换开关、移动滑块并且直接滚动来选取值；甚至可以像翻书或杂志一样轻快翻页。
关于隐喻设计还可以用另一个概念来表达，那就是心智模型。因为人类几千年的发展，虽然科技进步很快，外部环境也发生剧烈变化，但是人类的心智进步其实是很慢很慢的。
心智模型最早是由苏格兰心理学家苏珊·凯里在1943年提出的，是指在人们心中根深蒂固存在的, 影响人们认识世界、解释世界、面对世界, 以及如何采取行动的陈见、假设和印象。心智模型是一种内部表征, 但这种表征并不是对外部世界的完全模拟, 具备不正确性和不科学性等。因为用户心智模型存在这些不足, 所以需要了解其偏差与错误的来源, 以便今后采取适当的措施提高用户与系统的交互效率。
在产品设计的系统领域，心智模型是指人们对于产品系统的理解，用户需要了解这款产品是干嘛的、它有哪些功能、这款产品解决了我什么问题、我要如何使用该产品。每个用户将具有不同的思维模式，他们对产品或网站的进一步体验将逐渐改变和调整其思维模式。
心智模型其实是通过学习、感悟不断提升自我认知的过程，还记得我刚开始学习软件时候，如合成软件Photoshop、三维软件C4d。当我第一次接触这类软件时，感觉整个人摸不着头脑，太多的概念都不清楚，比如通道、图层样式、曲面建模、打灯光、动态图形等。踏踏实实的去学习这款软件是最有效的方式，通过不断的试错和总结，慢慢的得心应手，这样我们对于软件的心智模型就会逐渐形成。
但是有些心智是和我们生活方式、习惯、文化息息相关的。日本设计师深泽直人就提出了一种叫做无意识设计的设计理念，又称为“直觉“。其实在界面设计中也存在日常生活与线上产品的映射。所以设计师需要有好奇心、有共情、有洞见，才能很好理解设计来源于生活这句话。
X轴与Y轴的情绪可以从日常生活中找到答案，星巴克、瑞幸的店铺使用了X轴的横向排列，而在肯德基、麦当劳的店面排队使用了Y轴竖向排列的方式。我们尝试用抽象思维把它们进行图形化，可以表达的更加直观。
星巴克、瑞幸的店铺使用了X轴的横向排列，用户可以看到工作人员不停工作，哪怕需要等待一会也不会很压抑，整个体验过程会给人一种舒适、安逸、闲散。而肯德基、麦当劳的店面排队使用了Y轴竖向排列，会营造一种热闹的感觉，因为是快餐需要快速的售卖商品就需要给用户营销一种紧张急促的感觉，买完就走的即视感。
通过对日常生活和物理世界的映射，设计师在产品设计时可以考虑使用X轴和Y轴的情绪设计，比如文本采用横向排列会给用户带来一种平静、舒适的体验。APP底部的Tab栏横向排列希望用户花更多的时间浏览每个栏目的内容，这时候内容的好坏、吸引度也是重要的衡量指标。
在信息流的设计中大量采用Y轴，因为Y轴紧张、急促的感觉会让用户下意识的快速下滑，比如微信的朋友圈；抖音上滑来切换视频；直播互动通过大量评论来营销热闹氛围。
在前文中提到人阅读浏览的顺序是从左往右，从上往下的。那么应该把重要的东西放置在左边或者上边。Tab栏作为APP应用的主导航为什么却放置在界面的底部，这时候就需要用隐喻设计来解释了。就好比科学的尽头是哲学，哲学的尽头是佛学一样。
日常生活中开车、骑车，手永远是在控制方向和操作，而视线前方就是驾驶员需要浏览阅读的内容，比如行人、马路、车流等。把驾驶舱隐喻映射到产品界面中，底部Tab栏是引导用户去往哪里，上方动态变化来满足不同用户对不同内容的需求。
在线下学校的教室里，老师提出问题学生们举手回答的场景，抽象一层其实是一个提问者、多个回答者的逻辑，是一对多的关系。知乎问答界面就采用了教室的问答隐喻设计，一个问题多个回答。
在电影院看电影时，屏幕在正前方，很多人共同观看一个屏幕。其实也是一对多的关系。B站的直播界面平台，也是数以万计的人共同观看一个直播，下面的评论弹幕映射电影院的欢声笑语。
协同办公领域，在会议室开会是再寻常不过了，会议室开会时能同时看到同事的面部表情，每个同事都可以投屏进行共享会议内容。Zoom的视频会议软件采用了线下会议隐喻设计，Zoom视频会议支持多人视频讨论，每个人都可以共享屏幕进行实时分享内容。
互联网行业才短短十几年，但人类的日常生活却已经演化了几千年。好的生活方式和习惯会慢慢的保留下来。当设计产品时遇到问题没有方向时，不妨停下脚步看看人们在日常生活中是如何运作？能不能从生活中吸取灵感。
界面三重构给设计师提供一个崭新视角，相关的知识、理论、技巧还不完备。设计师可以根据自己的经验和阅历进行迭代。从用户体验五要素的视角去看，界面三重构算是从结构和表现层进行挖掘设计的可能性，偏微观层面的设计。在实际运用中需要结合用户、信息、交互、界面、前端、场景、流程等多维度思考。
作者：水手哥 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计的小编 http://www.lanlanwork.com