01 如何理解界面设计？

互联网的项目职能有产品经理、用户体验设计师、交互设计师、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去输出相关知识点，交互、前端在界面三重构的基础上阐述。

02 X轴设计

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

位置

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

左右结构

在左右的结构关系中，自古就有左为上，人的视线浏览顺序是从左到右，从上往下。所以重要的信息内容可以优先放在左边。在舞台剧表演中，重要的角色登场往往也是从左边进场。微信的发现列表页把图标加文字放置左边，右边放箭头指向。

左中右结构

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

左右并列秩序

我们来看看App界面的底部Tab栏的结构，当我们随意打开一个App时，你还记得底部Tab从左到右的栏目分别是什么呢？可能经常使用的App我们很熟悉，对于不熟悉的应用可能就不是很了解。但是我们依然可以从中找到规律，就是第一个栏目往往是首页，最后一个是我的个人中心，其他的相对比较模糊。

由此我们推断出从左往右的顺序并不是一二三四依次递减，而是一三四二递减结束处呈上升趋势。这种秩序不但适用于C端产品的界面设计，同样也适用于B端的界面设计。B端产品界面的导航结构第一个是首页（工作台）或最重要的内容分类，最后一个是更多或设置。同样遵循以上规则。

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

易读性

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

美国芝加哥有学者做过一个试验，人的眼睛是在不停地跳动，在跳动的时候是看不见字的，停下来的时候才能看见字，而且每次停下来只能看六个字。所以一段文字不要排得太长，过长眼睛在阅读时会很疲劳，在阅读时我们更适合阅读较短的文字。

网页新闻详情页面的行长，我研究了纽约时报为640px、华盛顿邮报680px、Medium680px，所以我们设计师可以控制行长最大在640—680px。但是西文和汉字还是有区别的，站在前人的规则上去学习定义规则更加重要。

交互改变位置秩序

位置的重要秩序其实是很容易打破的，在界面固定不变时结构中相对稳定，当交互大兄弟来了，说我想尝试改变改变，如图把手机的网易云音乐和QQ音乐进行组合成组，原来的一二三四的结构就被打破了，变成了一三二的视觉结构关系。点开组合后，这时候用户大兄弟来了，网易云音乐与QQ音乐的排列先后次序取决于产品在用户心中的重要程度和操作频次。因人而异，所以大家一定要带着客观的心态去学习，不同视角和不同思考维度都会有异样的结果。

响应式与断点

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

03 Y轴设计

视觉中心

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

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

倒金字塔信息层级

倒金字塔结构是按重要性递减顺序安排消息的一种结构形式。界面展示的信息层级多为倒金字塔结构，重要的信息放上面，越往下信息层级越低。网页设计中还会有折线之上的运用，以前人们看报纸是折叠的，但是为了告知读书报纸展示也是有内容的，所以折叠设计时看到一些图片引导读者打开。

Apple官网的信息层级也遵循倒金字塔信息层级，上方Logo加导航，中间为最新发布的产品，下方为历史发布产品。信息重要层级依次递减。Apple官网下方露出iPhone的照片来引导用户滚动下拉浏览。

纵向模式

纵向模式是用户习惯自上而下滚动来浏览更多信息，当用户还未确定目标信息时，纵向视觉流能帮助用户在不需要回扫的情况下获取更多信息。如图微信APP的发现界面，用户会选择一列一列快速浏览直到找到某一目标信息后，再横向浏览细节。那么问题来了，上文中提到倒金字塔信息层级，重要的信息应该放置上方，为什么APP的Tab栏很重要却放置在界面底部，下文隐喻设计中“驾驶舱隐喻”会讲到。

04 XY轴设计

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

盒子原理

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

四角压边

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

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

四角压边在设计中是可以灵活运用的，可以把四角压边变成三角压边，两角压边。如图当四角压边的A1、B1与A2、B2位置慢慢移动至重合时，四角压边就变成了两角压边，多用于列表页。

跷跷板原理

四角压边的本质是跷跷板原理，通过调整元素让界面达到平衡。跷跷板原理本质是平衡，需要关注的是中间的一条水平线。微信列表设计中就运用了这个原理来平衡界面。在苹果的原生设计中列表之间分割线是不包含图标且一直切到最后侧。因为左边的图标视觉重量大，右边的重量小，但是通过缩短左侧的杠杆长度并增加右侧的杠杆长度来达到视觉平衡。这种设计技巧在编排设计会被大量运用。

8点网格（4点网格）

8点网格理论来源于谷歌Material Design的设计语言，4点网格理论来源于苹果iOS的设计语言。个人还是更加喜欢iOS的4点网格，因为原子单位越小，可呈现的方式越多，可解决的问题方案也越多。8点网格可以理解为最小单位，其他使用的单位都为8的倍数。8点网格多用于DIV盒子与盒子之间的间距。图标、头像等固定尺寸的也可以使用8的倍数。

苹果和谷歌都是在定义产品系统中的度量单位，西方人一直想定义度量这个问题，其中最有名的就是勒·柯布西耶的《模度》，他的理论是以西方人的的比例结构来定义规范，并不能适用于全世界更多的人种比如东方人、非洲人。但是苹果设计团队发现世界上所有人类的手指触摸屏幕大小是一致的，最小为44pt。iOS定义了人类使用触控屏的基本度量，44pt也是4的倍率，这才是我喜欢iOS的4点网格的真正原因。

视觉流引导

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

设计师经常会考虑版面或界面上的文字是否会被阅读，实际上很多文字都不会被阅读，但是可能会被浏览。视觉眼动仪可以检测到人们如何浏览一个页面的，从找到切入点，到了解界面中信息关注的先后次序，从而调整界面元素，来引导用户去关注重要且有用的信息。常用的视觉流导向有F模式、Z模式、古腾堡图表法等。

F模式

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

1、读者的眼睛会先从顶部开始，从左到右水平移动，浏览的上半部分会形成一条横向的运动轨迹，这就是F形状的第一条横线。

2、读者的目光会向下移动，并再开始从左到右观察，但浏览的视觉动线长度会相对短些，这就是形成了F形状的第二条横线。

3、读者从界面左边的部分进行垂直扫描，以较短的长度向下扫描，此时读者的阅读速度较慢，而且更有条理性和系统性，这样就形成了F形状的一条竖线。

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

1、读者在浏览界面时是快速扫视，不会仔细阅读每一个界面内容。

2、界面的头两段文字无比重要，多用小标题、短句引起阅读者注意。

3、将重要的内容放在最上边，将重要的信息显示在标题和段落的前部显示给读者。

Z模式

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

古腾堡图表法

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

1.第一视觉区(Primary Optical Area)：左上方，读者首先注意到的地方。

2.最终视觉区(Final Optical Area)：右下方，视觉流程的终点。

3.强休息区(Strong Follow Area)：右上方，较少被注意到。

4.弱休息区(Weak Follow Area)：左下方，最少被注意到。

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

05 Z轴设计

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

视觉度层级（单界面）

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

主体与背景

界面中使用背景色是让元素向前进，背景色多为灰色且有颜色倾向，偏冷色或暖色。微信界面使用了偏冷色背景，Craft界面使用了偏暖色背景。当背景色为白色时就需要留白、线条、投影来区分层级。

投影

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

色彩大于字重大于字号

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

结构层级（单界面）

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

模态对话框

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

产品用户流程（多界面）

产品的界面设计需要从概念到信息分类到信息架构，目的是方便用户快速的搜索、筛选、辨别出有用的信息。交互设计需要学习辛向阳教授的交互设计五要素：用户、行为、目标、场景、媒介。

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

什么是用户流程

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

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

根据用户流程优化体验，用户流程越短越好，操作流程尽量不超过5步。用户流程要顾及头尾，即用户进入到一个新界面会看到什么信息，用户成功完成任务后会跳转到哪里，或显示哪些反馈信息。这些都是最容易被遗忘的接触点。

如何确定用户流程

基于用户的使用场景。以小水查找朋友圈某个朋友的信息为例，需要思考用户有哪些场景，如果知道谁发的，就会先通过找到人，然后进入其朋友圈找到信息。如果忘记谁发的呢，那只能凭记忆里在朋友圈慢慢滑动，直到找到该信息。

以上从交互设计五要素行为和场景对用户流程进行分析，还可以从用户、目标、媒介去思考如何帮用户高效的完成任务。拆解用户方法有用户画像分类、北极星指标分类、用户目标分类、用户角色分类、利益相关者等。拆解媒介的方法有竞品分析、头脑风暴、ABTest、埋点数据分析等。

06 XZ轴设计

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

Banner轮播图

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

导航栏

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

列表侧滑删除

列表侧滑是使用内嵌的布局方式，界面设计中用户习惯是先查看再操作，当容器大小放置不下可先隐藏操作按钮。QQ聊天界面侧滑内容可以引用该内容。微信消息列表侧滑出现标为未读、不显示、删除操作按钮。

07 YZ轴设计

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

页面滑动

信息流的设计多为Y轴设计，Y轴急促、紧张的情绪会让用户不停的刷信息。信息流设计中采用相似的界面结构保持统一，比如固定的头像位置，固定的操作按钮位置，标题文本形式等。微信朋友圈信息流一整块一整块的加载提高阅读效率；而抖音的视频流是一个一个加载，更注重精准推送和沉浸式的观看体验。

键盘输入

键盘输入也是采用YZ轴设计方式，不同场景下的键盘输入交互也有差别，微信聊天界面的键盘输入框放置在底部，每次调用键盘组件时界面会从下往上移动；而朋友圈评论时，键盘组件除了从下往上移动，还要对齐到对应评论的内容上。前端的定位技术会有所不同。

08 模型升级

界面三重构模型中的界面可以替换成交互、前端、容器、用户、信息等，当然也可以替换成桌面端、Web、小程序、APP、B端设计等。这样就可以把中间的要素抽象成N，界面三重构模型升级为N——X轴、Y轴、Z轴，N可以为单一的内容比如界面，也可以是N=N+N比如界面加交互一起思考。简化的模型更适合微观层面的细节设计，并不适合于宏观视角的分析设计。

如何使用该模型？

我们来举一个组件的例子，比如导航设计共分为二级导航，我们常规会显示出一级导航。一级导航可以从X轴、Y轴两个维度去思考，X轴的多为横向全局导航，Y轴多为侧边导航栏。当交互大兄弟来显示二级导航时可以平铺（XY）、上浮（Z）、内嵌（Z），二级导航展示方式还需要考虑容器大兄弟的意见，容器够大就可以选择平铺，容器小就展开收起的交互模式，展开就会有上浮和内嵌的两种形式。

模型抽象的N是随时发生变化，对应的界面设计形态也会发生变化，但是X轴、Y轴、Z轴的方法和设计技巧是相对不变的。只是你知道或不知道，会用或不会用的区别。产品设计中常用的两个方法是等价设计和同形异构。

等价设计

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

如图京东购物车的数量添加减少功能是展示出来的，直接可以添加可减少商品数量；但是淘宝购物车的数量是展示结果，修改商品数量需要点击后出现步进器组件。这两个设计形式就是等价设计，等价设计的好坏需要考虑很多因素，用户、目标、场景、手段、行为、容器、信息关系、生活方式等。存在即合理，合适最重要。

同形异构

同形异构是指不同的信息、数据类型设计出相同的外在形式。微信消息列表也中有微信广告助手、服务通知、订阅号消息、文件传输助手、个人聊天、群聊天等，这些消息的数据类型、对象各不相同，可是外在的结构形式是一样的，这样做的目的是简化、统一，通过图标和头像来区分人、应用、工具的消息差异。

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

09 隐喻设计

什么是隐喻设计？我们应该怎么去理解它呢？隐喻可以理解为隐含的相似性，它用想象的方式将某一物体与另一物体相联系，并把二者的特征、情感等相互结合转移。如果对隐喻设计感兴趣可以搜索我之前写过的文章《揭开隐喻设计的面纱-你不知道的隐喻设计》

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

iOS六大设计原则之一

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

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

用户移动视图来查看更多的内容；拖拽内容；切换开关、移动滑块并且直接滚动来选取值；甚至可以像翻书或杂志一样轻快翻页。

关于隐喻设计还可以用另一个概念来表达，那就是心智模型。因为人类几千年的发展，虽然科技进步很快，外部环境也发生剧烈变化，但是人类的心智进步其实是很慢很慢的。

心智模型

心智模型最早是由苏格兰心理学家苏珊·凯里在1943年提出的，是指在人们心中根深蒂固存在的, 影响人们认识世界、解释世界、面对世界, 以及如何采取行动的陈见、假设和印象。心智模型是一种内部表征, 但这种表征并不是对外部世界的完全模拟, 具备不正确性和不科学性等。因为用户心智模型存在这些不足, 所以需要了解其偏差与错误的来源, 以便今后采取适当的措施提高用户与系统的交互效率。

在产品设计的系统领域，心智模型是指人们对于产品系统的理解，用户需要了解这款产品是干嘛的、它有哪些功能、这款产品解决了我什么问题、我要如何使用该产品。每个用户将具有不同的思维模式，他们对产品或网站的进一步体验将逐渐改变和调整其思维模式。

心智模型其实是通过学习、感悟不断提升自我认知的过程，还记得我刚开始学习软件时候，如合成软件Photoshop、三维软件C4d。当我第一次接触这类软件时，感觉整个人摸不着头脑，太多的概念都不清楚，比如通道、图层样式、曲面建模、打灯光、动态图形等。踏踏实实的去学习这款软件是最有效的方式，通过不断的试错和总结，慢慢的得心应手，这样我们对于软件的心智模型就会逐渐形成。

但是有些心智是和我们生活方式、习惯、文化息息相关的。日本设计师深泽直人就提出了一种叫做无意识设计的设计理念，又称为“直觉“。其实在界面设计中也存在日常生活与线上产品的映射。所以设计师需要有好奇心、有共情、有洞见，才能很好理解设计来源于生活这句话。

XY情绪

X轴与Y轴的情绪可以从日常生活中找到答案，星巴克、瑞幸的店铺使用了X轴的横向排列，而在肯德基、麦当劳的店面排队使用了Y轴竖向排列的方式。我们尝试用抽象思维把它们进行图形化，可以表达的更加直观。

星巴克、瑞幸的店铺使用了X轴的横向排列，用户可以看到工作人员不停工作，哪怕需要等待一会也不会很压抑，整个体验过程会给人一种舒适、安逸、闲散。而肯德基、麦当劳的店面排队使用了Y轴竖向排列，会营造一种热闹的感觉，因为是快餐需要快速的售卖商品就需要给用户营销一种紧张急促的感觉，买完就走的即视感。

通过对日常生活和物理世界的映射，设计师在产品设计时可以考虑使用X轴和Y轴的情绪设计，比如文本采用横向排列会给用户带来一种平静、舒适的体验。APP底部的Tab栏横向排列希望用户花更多的时间浏览每个栏目的内容，这时候内容的好坏、吸引度也是重要的衡量指标。

在信息流的设计中大量采用Y轴，因为Y轴紧张、急促的感觉会让用户下意识的快速下滑，比如微信的朋友圈；抖音上滑来切换视频；直播互动通过大量评论来营销热闹氛围。

隐喻设计

驾驶舱隐喻—APP Tab栏

在前文中提到人阅读浏览的顺序是从左往右，从上往下的。那么应该把重要的东西放置在左边或者上边。Tab栏作为APP应用的主导航为什么却放置在界面的底部，这时候就需要用隐喻设计来解释了。就好比科学的尽头是哲学，哲学的尽头是佛学一样。

日常生活中开车、骑车，手永远是在控制方向和操作，而视线前方就是驾驶员需要浏览阅读的内容，比如行人、马路、车流等。把驾驶舱隐喻映射到产品界面中，底部Tab栏是引导用户去往哪里，上方动态变化来满足不同用户对不同内容的需求。

问答隐喻—知乎问答

在线下学校的教室里，老师提出问题学生们举手回答的场景，抽象一层其实是一个提问者、多个回答者的逻辑，是一对多的关系。知乎问答界面就采用了教室的问答隐喻设计，一个问题多个回答。

观看隐喻—B站直播

在电影院看电影时，屏幕在正前方，很多人共同观看一个屏幕。其实也是一对多的关系。B站的直播界面平台，也是数以万计的人共同观看一个直播，下面的评论弹幕映射电影院的欢声笑语。

会议隐喻—Zoom视频会议

协同办公领域，在会议室开会是再寻常不过了，会议室开会时能同时看到同事的面部表情，每个同事都可以投屏进行共享会议内容。Zoom的视频会议软件采用了线下会议隐喻设计，Zoom视频会议支持多人视频讨论，每个人都可以共享屏幕进行实时分享内容。

互联网行业才短短十几年，但人类的日常生活却已经演化了几千年。好的生活方式和习惯会慢慢的保留下来。当设计产品时遇到问题没有方向时，不妨停下脚步看看人们在日常生活中是如何运作？能不能从生活中吸取灵感。

总结

界面三重构给设计师提供一个崭新视角，相关的知识、理论、技巧还不完备。设计师可以根据自己的经验和阅历进行迭代。从用户体验五要素的视角去看，界面三重构算是从结构和表现层进行挖掘设计的可能性，偏微观层面的设计。在实际运用中需要结合用户、信息、交互、界面、前端、场景、流程等多维度思考。

界面三重构的想法起源于2019年，2020年于Gllue UED团队内部分享，2021在RDD内部分享，整理制作发表于2022年6月。

感谢阅读，很片面，共勉。

原文地址：水手哥学设计（公众号）

作者：水手哥

转载请注明：学UI网》UI新视角-界面三重构

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

完美开局的账号就需要有3个前提：

1.多金，够氪 

2.很欧，运气爆表 

3.很肝，以勤补拙

对于设计师来说，怎么样才是完美的开局账号呢？在我们身边也会经常看到一些非常牛的设计师，他们可能很年轻，但是设计能力很强，又有非常好的学历背书，一毕业就能够拿着别人3、4年都拿不到的薪水。我们就会觉得这样的开局就是相当完美了。

但是这样的开局账号也几乎是极少数的，好的学历背书大部分都是要靠父辈们的积累，例如美术生学设计专业的学生其实开销是很大的，相比其他的专业在这个学习过程中需要不断的氪金，这点不可否认。

另外，一个人在成长过程中的教育、受到的熏陶、环境的影响也会影响一个人的发展，有的人说天赋好所以他们起点高，进步快。

但是天赋也需要不断修炼，比如你在幼年的时候就展现出对艺术创意的敏感，但是后天家庭并没有资源培养你，那么等你长大了这个天赋可能也就不是你的优势了。

所以别看那些年轻有能力的设计师这么厉害，大部分其实都是家庭殷实，前期投入了非常多的资源才能达到的。大部分家庭都比较普通，所以抛开这些条件，我们来聊一聊如何让自己的开局能够比其他人更好。

开局的几个阶段

那么我们分为几个阶段来讲，分别是：大学期间、初入职场、职场3年

账号需要养成，但是开局非常重要，其实这几年我接触了这么多设计师大部分都不是科班毕业的，因为大家考大学的时候其实对这些专业和以后职业的发展是不清晰甚至很迷茫的，所以很多专业的选择一般也会根据父母还有亲戚的建议做选择。想当初我报了电子信息工程专业以为是去玩电脑的，结果课程内容却是焊接电路板，写代码。所以已经是美术专业的同学们要庆幸自己已经比大部分设计师的起点要高了。

那么无论你目前是什么专业，但是后面想从事和设计相关的工作，在大学期间我们可以做一些什么事让自己有更高的起点。

1.1.提前转变思维

高中三年又经历了高考难免会让大部分同学觉得终于解脱了，可以到大学去吃喝玩乐了，从快乐的角度我也会这么选择，毕竟这么多年读书读下来确实很压抑，所以我自己大学四年也几乎都是玩过来的，但是再让我选一次，我一定不这么做。

在大学期间，最重要的事情是什么？我认为是提前找到自己喜欢的事并且付诸实践，思考他将来成为你职业的可能性。可能很多学生目前还不会去考虑职业，只想着怎么修好学分，顺利毕业，但是毕业之后去从事什么工作还没有勇气或者没有头绪去思考。那么即使你不是设计专业的学生，你也可以在大学期间输出设计相关作品。但前提就需要自己花时间去学，相比于科班的同学会更加辛苦一些。

这几年见过的一些大学生也都相当的“卷”（这里的卷不是贬义），很多学生从大二开始就自己做自媒体做设计公众号，然后输出大量的设计作品和观点文章传到设计平台，还没有毕业就已经拿了不少的平台推荐，也正因为这些输出给自己的实习工作拿到了不错的大厂机会。然而目前很多工作5、6年的设计师这几年的作品加起来还没有这些大学生来的多，因为很多设计师都是被动转行，没有设计的初心，工作项目不总结，业余时间不练习，遑论高级或资深？

所以我建议想要从事这个行业的人在大学就要思考清楚，自己是否喜欢做设计。设计这个行业和一般的职能类工作不一样，它的上下限都是很高的，如果你去做后勤职能，就算你不喜欢做，按部就班依然可以完成，可以混口饭吃。但是设计不行，设计师只能上不能下，如果你原地踏步3年必然会被淘汰，你不喜欢它你就不会把时间和精力放在上面去提升，这些个例子在很多咨询我课程的同学中已经屡见不鲜了。

大学也是为了让一个稚气未脱的学生能够转变成独立思考的成年人的一个过程，在这个过程中你会学到很多社会、职业上的规则，比如怎么去运营自己？怎么给自己创造机会？怎么获得更多的资源？通过什么手段渠道提升自己等等。

1.2.学会输出作品

在大学中如何输出作品呢？一般有几种途径：

1.参加各大平台举办的设计比赛，例如站酷

2.跟着自己的导师输出项目作品 

3.参加一些培训课程输出作品 

4.自学输出作品

那么我首先推荐的是通过参加比赛去积累自己的作品。虽然参加比赛不一定能够获奖，但是你可以看到自己的设计作品和其他设计师相比有什么不足，从而优化改进自己的弱项。如果能够获得一些奖项，那么你去实习或者毕业找工作都是很好的加分项，同时也能增加你个人的曝光，很多甲方或者设计团队负责人会从这里来挑选合适设计师进行合作和招聘。

然后有同学也想问，如果想找实习没有真实项目怎么办。大部分真实项目一般都是来自导师的外部项目。运气好的话你的导师给你的项目刚好是和你以后实习岗位相关的，如果没有真实项目也不要太担心。因为除了一些要求特别高的大厂实习岗位，一般企业的实习工作其实只要你输出的作品和手活好就足够了，是不是真实项目没那么重要。

不过话又说回来，这也是让各位同学在高中就好好读书，尽量去一个好的学校读这个设计专业。好的学校有好的老师，有好的老师就有好的资源就有好的项目，就有更多的机会去好的公司实习，就是这么回事。所以如果你是一般大学的设计专业，就得看老师的资源怎么样了。如果没有一些好的项目，也可以选择去上上课，但是这个怎么选择课程水就很深了，这里不多赘述了（你们懂得）。

所以你们想想，当你其他室友在打游戏看剧，而你在做设计练习，别人可能会笑你别那么努力，但是你一定能够先找到工作然后请他们吃个饭。

1.3.找实习工作

如果你能够做好前两点，不夸张的说基本已经超过95%的同龄人了，完美开局账号也已达成了1/3。在大学期间最后一件事那就是找实习工作，这里我要说的是实习尽量去大厂。如果没有这个机会也尽量去找有一定规模的设计团队的企业。

实习的目的不是为了毕业答辩，也不是为了赚点外快，而是为了毕业之后的第一份正式工作做准备，积累真实项目的经验。大厂的实习机会是不简单的，他们主要面向211、985等设计相关专业的本科及以上的学历学员进行实习招生，像交互、用户研究岗位只向某个固定专业的硕士研究生开放。

那如果不是这些高等院校的学生就没有机会了吗？当然不是，设计这个岗位学历是需要的但不是最重要，还是要看设计以及综合能力的，即便你不是211、985，但是你的设计足够优秀，那还是可以获得大厂的青睐的，学历只是一种筛选条件。

如何找到比较好的实习机会，我这里建议大学生们可以多上像站酷一样的设计平台，去结识更多优秀的设计师。为什么要这么做呢？因为大学生往往想投简历都是通过一些招聘网站去投的，这样的效率很低，因为即便你的履历还不错，但是依然要等hr重重筛选过之后才会到设计负责人这边。所以我建议你在设计平台有足够多的积累之后多去结识一些和你方向比较接近的设计师，他们可能就在某个大厂在职。例如你是画插画的，那么你可以关注这个领域的一些站酷推荐设计师，加一加联系方式，现在很多大厂的设计师也背负着招人的指标，实习可能不算正式指标，但他们也会通过社交平台进行发布，这机会不是来了么～

如果有多个实习机会怎么筛选。

1.选择和自己规划方向一致的岗位。大部分企业招聘实习生，是为了解决一些琐碎的工作，而不是为了培养，所以实习生的工作内容是很杂的，如果你本身的方向是做UI/UX的，但是你到一家公司却不停的做平面的工作，这样就会很浪费时间，甚至无效产出。不过有一些大厂其实也会让实习生去接触更多岗位的工作，是为了找到更契合的点，并且让实习生去熟悉不同岗位的工作内容，提高协同效率和个人综合能力。

2.选择有机会留下来的。同样的能力，校招比社招便宜很多并且成本低，很多实习生无法转正是因为企业没有多余的hc，也就是这段时间不招人。不过也要看设计团队的需求，如果只是缺人干一些重复性工作的话，留下的概率比较大。但是如果缺的是一些专业技术人才或者弥补团队能力空缺的话，实习生机会就比较小了。

2.1.很肝才会很欧

咱们已经靠自己的努力步入了职场。但是第二阶段我要讲的是第一阶段没有做好的同学们，在这个阶段要做什么。假如你是从三流大学毕业的，但是某些机缘巧合你入职了一家公司，正从事着设计的工作，这个时候怎么样再把自己的账号打造的“完美”。

每个人的机遇不同，但是时间是相同的。有一句话叫做成年人只能被筛选，不能被教育。我觉得有失偏颇，因为只有那些固步自封的成年人才不能被教育，比如我曾经遇到过两个背景比较相似的同学，都是从培训班出来之后才进入职场做设计的，基础可以说几乎没有，只学会了软件。一个同学的基础和天赋好一些，但会有一点优越感，每次作业没有按量完成，给我的理由是这些界面他以前画过不少了，所以就只交了几张。而另一个同学呢除了完成我布置的作业以外自己还去画更多的界面，两个人同一个作业的结果在量上就差了好几倍，最后结果显而易见。

刚进入职场的第一件事就是不停的肝，肝什么？肝到什么程度？我举个例子，例如你现在是一名初级UI设计师，你的工作是绘制UI界面、图标、插画和一些运营海报之类与视觉相关的工作，那么你第一个阶段的目标就是能够连续拿到3个站酷的编辑精选推荐。无论是成套的UI界面也好，图标也好，只要连续拿到3个编辑精选就可以，中间需要连续，比如第一次2火，第二次1火，说明你设计的结果不稳定。同时，时间周期必须在2个月以内，务必利用自己所有娱乐的时间去肝这些练习。当然你除了上传站酷，也可以发给我评估，或者一些行业内优秀的设计师去评估都可以。

再下一个阶段的目标就是拿站酷首推，站酷首推的含金量还是挺高的，拿10个编辑推荐也没有拿1个首推来的高，如果你可以靠设计作品连续拿到3个首推，那么基本拿到了大厂的门票。这个时候你会收到很多猎头以及大厂设计负责人的私信，不要怀疑，朝这个目标去努力就对了。至于怎么拿首推，我以后再做一个分享。

刚进入职场，重心不要太放在项目上，而是不断打磨设计的专业技能，在设计初期最重要的是两件事：1.掌握各种设计技巧与风格 2.提升自己的审美与认知。

2.2最好找个“师父”

如果设计团队里的领导或者组长愿意带你，那么恭喜你你的运气真的很好，因为去外面找个师父是很难的，而且也很贵。有人说怎么拜师还要收费？我看电视上、小说里，不是别人要抢着收徒弟吗，这怎么还要徒弟给钱呢？古时候收徒是觉得这个人根骨不错，以后能有大作为，同时可以传承衣钵弘扬门派。现在徒弟们学会了就自己飞走了，师傅们也没有衣钵要继承，反而师傅们还要养家糊口，所以找个师父变相成为了一种“交易”。

公司里有人带和外面找师父有什么区别？简单说就是利益关系，大家自己揣摩。师父的主要作用是引导，在关键时期和阶段可以给你指明方向，而不是帮你解决疑难杂症。所以一个好师父可以让你少走很多弯路，这是可遇不可求的。

3.1.做好职业规划

其实大部分人对职业规划很迷茫，不管是初入职场还是目前已经工作了5、6年的老油条们，职业规划就像是海市蜃楼，看得到摸不到，大概知道什么意思但是自己也不会做。

最近有一位工作了6年的设计师小伙伴遭遇了裁员，说实话6年在任何行业里都已经算是中流砥柱的员工的，对自己的专业、职业能力也有了比较深刻的认知，但是他就非常的焦虑，被辞职后简历和作品都无人问津，这就是很典型的缺少规划所导致的走一步看一步的普遍现象。

职业规划是需要有丰富的职业经历和实践才能在阶段性的生涯节点中做出计划和调整的，如果你没有任何经验是无法去做职业规划的。职业规划最重要的是我们对该职业的定位以及寻找正确的方向。比如你现在是个洗碗工，你想对自己做个职业规划，如果你足够敏感，那么你一定要思考到这个职业的瓶颈和上升通道的阻碍，什么时候会出现自动洗碗机，出现了你如何应对，有什么差异化能力比的过自动洗碗机等等。

3.1.1职业定位

对于UI/UX设计师来说，职业定位很重要，它能够帮你看清楚职业的特质，可以指导你5-10年的职业变化与发展。所以比如你现在是做UI设计的，那么你要思考这几个问题：

1.UI设计的工作内容、作用和职责具体是什么，在不同规模企业中有什么区

2.UI设计师的工作可替代性是否强

3.UI设计岗位在行业中的天花板是怎么样的

4.UI设计师的岗位晋升条件与级别是怎么样的

5.你作为UI设计师的城河是什么

6.该岗位是否有政策风险

7.该岗位与上下游的其他岗位相比价值如何

8.如何量化、突出该岗位的价值

所以如果你把UI设计师换成洗碗工或者其他岗位，再来念一下上面的8条。

3.1.2个人特质

个人与职业需要契合才能走的更远，如果你生性胆小、内向、怯懦，那么就不太适合去做销售，当然如果你有勇气去锻炼、改变自己那也可以，但这很难，所以我们有句话叫做江山易改本性难移。该职业的工作内容、职责对我们来说，如何发挥自己的优势，你个人有什么特质在该职业中能发挥出来，这点很重要。

其实任何特质的个人都可以去从事大部分职业，只是职业的高度有限，例如你本身不善于言谈、辩论，个人内向、社恐，不善于人际关系处理，那么，不进行专门的改变和调整，你的职业生涯和管理岗位或者专家等高级别岗位就无缘了。特质当然也是可以改变的，例如你可以自己上台进行演讲，大量的挑战会逐渐改变你不善于社交的现状。

所以你先要认清自己个人特质的范围，再结合这个职业的定位，我们就可以知道自己应该去改变什么，在该职业中的优劣势是什么。不过我遇到的大部分人都是，我很清楚，但我不改。可见一斑。

3.1.3晋升网格

谢丽尔·桑德伯格在《向前一步》中提到：职业通道不是线性，而是一种网格式的。我理解的大概就是这样。

这种形式的职业通道设定的目标不是具体岗位，而是个人综合素质的能力提升。也就是说我们的目标不是朝着下一个级别去努力，而是在一个序列中前行几步在平行到另一个节点去工作。例如你UI设计可能从初级晋升到资深，但是下一步你可能会去做交互的序列，当你交互也达到资深后你又可以去做产品，但是这整个职业推进的阶段我们都是一个人能力为核心目标去工作，而不是为了某一个岗位更高级别。

这样的职业通道好处就是你的能力会非常的综合，能力会更全面。换句话说，你如果想达到UI设计专家，那么你不能只会画UI界面，你不会交互、用户研究或者更多视觉技能肯定是不行的，但我们最初的目标并不是为了达到专家，而是让自己有更多选择。

3.2.黄金3年

我们需要利用前三年来打造一个完美账号，那如果把整个规划做到5、6年，那就不能算是开局账号了对吧。为什么要规划三年呢？我希望大家在前三年可以找到自己的定位和目标，这三年里面你可以根据自己的能力和需求去寻找不同的平台，看看以三年为期限，自己能不能也达成每年翻倍或者3年番两番的目标。（这里不是鼓励大家盲目的跳槽）

首先我建议大家先利用1年左右的时间去提升设计技法，一项为主多项为辅助，例如你主要修炼UI界面的技法，同时辅助插画、动效和更多表现类技法。为什么只用1年左右呢？

所以这1年其实时间很短，除了自己的工作以外，你需要把时间都拿出来做技法的修炼，是很枯燥并且没有回报的。

设计师要学的更聪明，公司项目不行就要利用业余时间做额外的输出，很多人就指望等下次跳槽的时候拿着现在公司项目的包装放到作品集里去面试，如果你这样做了，那么你开局账号也就废了一半，为什么呢？因为你的第一次跳槽是整个职业生涯中最重要的一次，甚至比第一份工作要重要的多，第一份工作你可能不会选，对这个职业、行业的认知也几乎没有，随机性很强。但是当你要选择第二份工作的时候，你是个成熟的宝宝了，自己也有了初步的规划，你有机会、有能力去选择更优秀的平台去输出、学习。但是前提就是你能够在第一份工作的时间里去积累能量，让自己的能力有一个质的变化，否则第二份工作也几乎和第一份工作差不多。

在第二年的时候，如果你第一年足够努力了，那么你可以找到第二份更好的公司，虽然不一定是大厂，但是至少可以在一个有规模的设计团队里工作，这个时候你接触到最多的应该是更多的项目、方法和各种不同的思维。你需要和更多的人打交道，接触更多复杂的业务以及学习更高深的设计技法。那么在第二年的阶段，我希望大家可以去深入项目，去关注项目的本质和目标用户。需求是怎么来的，设计方案为什么这么做，如何培养自己的产品和体验思维。同时，业余时间也依然要进行输出，但是和第一年不同，工作与业余时间的分配要更侧重到工作上。

第三年，要学会自我驱动，关注设计价值的量化以及一些实用的方法，通过项目来将设计方法打磨的更成熟，形成自己的一套理论。同时自己的设计输出也要围绕着这些去做。

以上三年的阶段性成长基本就是这样，但这些都是比较理想化的情况，实际可能需要更长的时间或者更复杂的因素要去考虑。最后，大家觉得这样3年肝出来的账号可以算“完美”吗？

原文地址：应谋鬼计（公众号）

作者： 应骏

转载请注明：学UI网》UI/UX设计师如何打造一个完美的开局账号

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

认识色彩饱和度的情绪：

因为不同的配色会带给观者不同的情绪感受，只有在先了解不同颜色特性的基础上才能为我们的配色指明方向。我们做出的画面想要传递什么感觉，这种感觉对应什么颜色？只有搞懂了逻辑，在之后的工作中，才能为我们的配色方案指明方向，而不会一开始就被难住。如果我想配一个积极热闹活泼的画面，颜色怎么配呢？ 如果想配一个温柔恬静小清新的画面颜色又该如何选择呢？他们都有什么特点，为什么会这样？往下看

积极活力：

我们先来看几组图片

用吸管工具提取一下它们的颜色观察

我们可以看到这类海报视觉上都能给人一种热闹、动感、活力的feel。

通过颜色提取，再观察它们选色的位置，可以发现它们的的配色的纯度和饱和度都非常高。

这是为什么呢？接下来我们降低饱和度看看会发生什么：

可以很明显的感受到画面中已经失去了那种动感、热闹和活力的感觉了，整体更趋于平稳和安静。

所以，高饱和度的配色会带给观者活力，动感，热闹的情绪。常常应用于一些电商、运动品牌的视觉项目中，用来渲染or打造年轻、活力、热闹、动感等氛围。

温柔平静：

我们再来看一组:

这一类图片就会给人一种文艺小清新的feel，这类配色和热闹、运动的感觉完全不同。

都是低饱和度高明度的颜色。所以，低饱和度的颜色会给人传达平和、放松、舒适的心情。

轻松休闲

这一类的图片就给人以中正休闲的感觉。饱和度都趋于中性，不过高，也不会过低。

其实原理就是在取色器里，

我们看同一张图片，给我们的感觉：

高饱和度配色给人感觉冲击力很强，具有活力，对比非常强烈。

中饱和度画面就弱了一级，视觉冲击力没那么强。画面会放松一些，适合传递休闲的感觉。

使用低饱和度的颜色时，我们看到画面更冷静了，有些高级灰的感觉。

在以往的实际工作当中，我也是先用饱和度来定画面的大情绪基调，只有大的感觉对了，后面才不会出大问题。比如像一些战斗、pk、热血类的banner，都用高饱和颜色:

我们可以来吸取他们的颜色看看：

基本都是靠右边的颜色。

而像我在做下面这种类型的banner时，就会使用到中饱和度的颜色，给人一种轻松休闲的感觉：

我们再看下他们的色域：

都是趋于中间的位置。

最后一种低饱和的颜色，像下面这种作品，就有一种文艺、清新的感觉：

再来看看他们的颜色色域

都是比较靠左的颜色。

用饱和度来定画面的大基调，还是非常好用的，可以说是屡试不爽，大家可以好好理解并且用起来！

 总结：

高纯度，高饱和度的颜色，会让人感觉激动、积极、动感、醒目、记忆深刻等特点感官，常常应用于一些电商、运动品牌的视觉项目中，用来衬托年轻、活力、热闹、动感等氛围。

中饱和度的颜色饱和度和纯度都适中，显得中正平和，又不会有低饱和度那样的“平缓“，想要视觉年轻一些，但又不想饱和度那么的强烈，可以尝试选择中度的颜色。

低饱和度的颜色，会给人平和，舒适的感受，常常会结合大量无彩色一起使用，让画面传递出简约，自然，小清新文艺的感觉。

“你想给别人传递什么”

配色的方法有很多，搭配在一起千变万化，但都离不开一个点。你想给别人传递什么感觉？是要年轻、活跃，还是安静、唯美？只有明确方向，在想想这个方向上的颜色有什么规律可循？搞清楚目的，我们再去做配色是不是就会轻松很多？

原文地址： 菜心设计铺（公众号）

作者：慢热

转载请注明：学UI网》如何配色

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

目录

• 一、什么是系统化解决方案，什么样的团队适合做
• 二、如何输出、推进设计解决方案
• 三、解决方案的管理和发展

一、什么是系统化解决方案，什么样的团队适合做

1、什么是系统化解决方案？

大多数日常需求大多是从单点出发，当点变多变复杂了，就容易出现上述说到的现状问题。所以解决方案需要基于业务全盘进行设计抽象：从元素——组件——区块——页面——功能流程沉淀设计规则并代码化，来灵活提供拼装N个不同页面的机制，帮助团队更系统化的进行产品设计。从组成内容不难看出，解决方案是需要建立在基础组件基础上，与基础组件、复杂组件、行为模式共同组成设计系统的【功能模式】部分。

2、什么样的团队适合做

解决方案是一套相对稳定的设计机制，所以在产品初期或团队建立初期，产品可能经常会调整的情况下，并不适合做。初期可以借助成熟的设计系统来减少投入成本。而到成长期可以根据业务的发展梳理基础元素、组件，选择性的建立部分稳定且利用率高的解决方案，并持续发展，保证解决方案可以起到指导和提效的作用。随着产品或团队逐渐成熟，解决方案也应该随着一起成长，相互影响相互作用。

二、如何输出、推进设计解决方案

1、由大到小的进行信息拆解

1）对产品页面（尤其是重点功能）进行盘点，划分页面类型：比如列表、表单、详情、dashboard；

2）对页面中的内容进行区块归类

3）对区块中的信息进行拆解

这三个过程下来，对于问题、规则、规律都会有一定的概念。以一个后台系统为例

1）页面大类主要是：列表、表单、详情。

2）其中列表的内容大致区块分为：页面标题区、列表操作、列表筛选、列表内容，到这个阶段已经可以发现，相同区块位置就存在不稳定，在后台系统中可能影响面不会非常大，但对于内容复杂繁多的工具或C端界面就会容易出现找不到的情况。

3）不同区块的内容拆解，同样也会发现一些细节问题，比如筛选的样式、规则不一致，列表操作的方式、位置、样式、交互不一致等等

2、抽象、重组：从布局——区块——组件——设计规则

从第一步全盘的信息拆解和归纳, 已经发现问题, 这一阶段主要2点：第一是如何通过设计规则来避免同样的问题产生，第二是如何通过简单的规则重组减少多人合作记忆复杂度。思路类似于设计一个界面，首先得有一个布局划分，不同的区块要放哪些内容，再到区块里的细节内容规则，从而抽象出由布局到区块的设计规则和可复用的组件。

以前面说的列表为例

1）区块主要是4类，明显的问题是区块位置不稳定，所以在布局结构上，需要定义1-2个稳定的可配置的布局框架来适应不同的内容

2）不同区块梳理组成内容，内容细则

3）标记出可组件化的内容及规则

4）提炼整个过程中通用的设计规则，作为全局的指导。如：国际化、排版规则、超限规则、适配规则、文案规则等等。

通过布局——区块——组件——设计规则，可以灵活的进行页面拼搭

3、落地代码库

区分通用层和业务层，通用层落地到通用模板市场，利用脚手架生产新页面。业务层面的落地则是基于通用库封装具备业务属性（如：业务主题、业务数据、业务拓展方案）的业务库来生产新页面。

目前群核设计团队建立了一套平台通用的解决方案，适用于所有中后台产品。业务属性比较强的产品也基于通用解决方案封装业务层面的解决方案，同样的思路也应用在不同体系的工具场景中。整体实践下来，产研效率提升近50%，甚至完全解放了一条业务线的设计资源。产品体验的一致性、上线质量也有明显的提升

三、解决方案的管理和发展

解决方案作为设计系统的一部分，与设计系统一同管理，业务设计师使用系统来输出，反馈问题或需求给系统，有系统设计师判断可行性，周期性的管理，及时更新并在内部互通，促进互相成长和发展。

解决方案与设计系统的发展有一点不同的是解决方案有更多业务化的内容，业务团队根据业务迭代维护解决方案。当业务的方案达到通用级别，则列入到通用库。

这些方法和思路也并不限制行业或产品类型，仅是在我们当前服务的产品体系下总结的方法。当然解决方案并不能解决所有问题，只是希望在提供更系统化的设计方法和模式的同时能减少重复工作提升效率，让产研团队有更多的精力和时间投入更有价值的事情。

原文链接：酷家乐用户体验设计（公众号）

作者：十元

转载请注明：学UI网》如何有效提升产研效率和质量

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

其实画册的标题也能排出许多新意，本篇文章，葱爷来给大家分享几个可以给画册设计加分的标题排版技巧。

01.描边字错位组合

上图是某院校招生画册的“学院简介”排版，由于太过讲究对齐，缺少变化，所以显得不够灵活，我们可以把标题的中英文词汇拆开进行错位排版，错位时要注意左右的平衡，另外，三行错位比起两行错位的变化会更丰富一些。

单纯只是做错位处理，效果并不怎么好，因为没有层级关系，所以可以再加上字号大小的变化，突出重点词汇，弱化次要词汇。

这样层级丰富多了，但是众多很粗很黑的字体挤在一起略显压抑，把其中部分词汇改成描边后，整体就变得更透气、更有设计感一些了，注意描边要细一点，以避免描边的笔画重叠在一起影响识别性和美观性。

标题排好以后，再根据标题调整一下内文、页眉、页码的排版，内文通常会对齐标题中的某个字词，但一边对齐就好，不需要两端都对齐，页眉、页码可以作为装饰来排版，填充一点颜色可以让版面变得更活跃。

02.彩色标题叠加灰色图片

还是拿前面的那个案例举例，把学校图片换成一张没有去底的矩形照片，然后把它处理成黑白色照，移动至版面上方，标题使用蓝色压住图片的左上角，这时标题就不是孤立的几行文字了，而是与图片形成了一个整体，这种排版方式在网页设计中比较常见，用于画册的标题排版，效果也是很不错的。

图片做出血处理显得更大气，左下角的页码与标题左对齐，可以加强版面的整体性和关联性。

03.手写体搭配黑体

同一个标题我们通常只会使用一种字体（不包括英文），但有时候也可以试试用两种字体搭配来使用，比如手写字体搭配无衬线字体，这两种字体在风格上完全不一样，对比非常强烈，能够给版面带来新意。

正文刻意与标题进行了错位排版，当然，同时也保持着某些对齐关系，图片的排版同样如此，与正文错位，但与标题左对齐，整个版面既灵活又很有序，符合学校画册的调性。

04.文字叠加色块

加色块是标题设计中常用的手法，但如果只是用一个色块把标题包住，那么效果是比较普通的，很容易像促销折页的做法。所以我们可以只把色块作为标题的一个装饰元素，用一个小小的色块放在标题后面，使其视觉上更丰富、更突出。

图片的刻意错位很关键，如果图片与正文两端对齐，那么英文标题、正文、图片、页码都是沿着一条直线对齐的，整个版面就会变得生硬很多。

文字加色块还有另一种效果也不错，即把文字色块合并在一起做成补丁效果，首先把文字错位排版，然后分别给每一行文字加一个色块把文字框住，色块与色块上下相连。

搭配上序号和英文标题，丰富标题的对比关系，使其更美观、更有设计感，色块可以根据需求适当超出文字的长度。

正文的排版我做了一点改变，把第一段单独拿出来作为引文使用，刚好这段文字在内容上也正好是起到提前说明的作用，这样处理后这个版面也变得有了一些新意，标题十分显目。

05.手写体跨版

在画册设计对于有些版面，可以排得大气一点，比如把原本可以1P排完的内容排成一个跨P，这时标题也可以拉大跨版排列，这种做法可以加强文字的大小对比，也会有更多留白空间。

为什么用手写体呢？宋体和黑体不行吗？其实也可以，不过由于汉字的笔画比较复杂，宋体和黑体又比较方正，所以拉太大排列时会显得不够灵活，如果是英文则会好一些，所以在排版的时候我还做了了倾斜与裁剪处理，并且搭配了英文进行错位排版，不然会显得过于单调。

06.标题与正文左右排版

在竖版的画册中，我们通常喜欢把标题排在正文的上方，而如果把标题与正文左右摆放，那么又会有种不一样的感觉。

但不要把标题与正文水平对齐，那样的话标题的空间就过小了，会显得很压抑，而是要把标题放在正文的左上方，并保持某些对齐关系。

如果把这种排版方式看成是分栏网格，那么它属于不对称网格，即正文栏应该比标题栏更大一些，以保证有足够大的空间排列正文内容。标题栏可以有大量留白，页脚可以与标题形成呼应，丰富版面的细节。

07.扭曲标题

这种标题处理手法在海报设计中比较常见，其实国外很多画册也这么做，效果很酷，冲击力很强。

拉拽锚点左右两边的手柄使波浪形变得柔和一点。

波浪效果做得差不多后，按快捷键E调出自由变换工具面板，并选择自由扭曲工具，把标题扭曲成如下效果。

再调整一下细节，然后把它放在版面中，把内容篇章的序号处理成描边样式与标题叠加在一起，可以起到装饰的作用。

扭曲的标题搭配上鲜艳一点的颜色，效果会更时尚，对于这种版面，正文也不要排得过于规矩，所以，我刻意把版面中的两张图片做了错位处理。

08.打散排列

通常我们会把标题文字集中排放，但对于设计和时尚类画册，我们可以打破传统的做法，把标题做适当的分散排版，效果也很不错，当然，标题文字如果太少就不合适了。

另外，为了使标题更特别 ，给文字加上下划线效果会更好，并且下划线可以根据需求适当延长，以加强这些分散文字的关联性，甚至还可以加上英文做装饰。

正文的排版与标题文字左右两端保持对齐。

设计是一个不断尝试、调整的过程，排标题同样也是如此。另外，标题的排版固然是很重要的，但是想要整体效果得到比较大的改善，正文、图片、页眉、页脚、页码的配合也很重要，永远要把整体的大效果摆在第一位。

原文地址：葱爷（公众号）

作者：葱爷

转载请注明：学的UI网》让设计感暴增的8个画册标题排版技巧

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

前言

业务性强，内容复杂度高是To B产品的典型特征。新用户需要快速认知平台能力并顺利上手，老用户则需感知信息的变化、功能的拓展并迅速响应。体系化的帮助是通过在操作的不同阶段提供差异化的引导及反馈，助力用户在应用中成长。

帮助体系是什么

通过大量的案例积累及系统调研，发现“帮助”并不是单一的某个功能，而是一种体系化的能力，需要通过不同手段来实现。概括来说就是“在产品使用不同阶段为用户提供恰当的提示与指引，通过组件的灵活应用及能力创新，帮助用户降低认知成本，提升操作效率。”

用户对产品的应用周期经历前、中、后三个阶段，每个阶段的设计目标都各不相同：操作前注重提升用户的全局认知，深化理解，助力精准触达；操作中助力提效，让用户知道做什么，怎么做；操作后明确反馈，帮助用户明确结果。

操作前：引导用户深化理解，提升全局认知

用户有新老之分，对系统的熟悉程度及应用诉求不同。因此针对不同用户各阶段的使用诉求进行场景化的拆分，提供差异化帮助。

帮助用户深入自主的认知平台

我们到陌生的地方会找导视标识或者找人寻求帮助，新用户到平台内也会面临同样的困境，遇到问题无从下手时会寻找含有【帮助】【客服】字样的内容，那么帮助中心、智能助手这类有明显特性的功能则会成为用户遇到问题时的第一选择。通过业务思考及行业调研，以简洁、高效、情感化为目标最大化的发挥其属性优势，让用户在使用过程中更易理解和接受，平稳有效的帮助用户渡过新手期。

1、帮助中心

帮助中心，一个时常被忽略并被严重低估的功能。它是平台全量信息集合地，不仅能帮助用户系统了解平台概况，也能引导用户行为，树立品牌形象。为保证用户高效、便捷的获取帮助信息，在页面表现上需突出内容本身，忌过度装饰。从设计角度来看，一个好的帮助中心应该符合以下条件：框架简洁清晰、信息突出并辅以锚点定位。在框架设计上一般将页面分为导航区、内容展现区两部分，导航与帮助内容对应性强，层级简单，能让用户在短时间内了解平台能力构成；帮助文档内容一般复杂冗长，锚点定位可以充当文章大纲，辅助用户精准定位。

2、智能助手

通过内置的帮助和指导性说明来解答用户使用产品过程中遇到的简单、共性问题，降低人工客服响应成本。智能助手包含两部分：入口与悬浮窗口。入口一般悬浮于页面右下角，点击后触发悬浮窗口。

市面很多助手能力较单一，仅能机械处理通用问题，无法提供多样化帮助，很容易让人觉得是个没啥用的摆设，对它慢慢失去信任。为重新唤起用户的信任，需要在设计上注入一定的生命力，让用户觉得易接受、有选择、有温度，从而真正用起来。

1）悬浮窗口能力多元化。作为承载智能助手核心能力的悬浮窗口，优化方向有以下三点：首先，智能助手与用户的交流不再局限于单纯的问答，而是根据账户属性向用户提供高频问题集合，并根据用户的回应拓展更多问题，提供多维化的帮助。这个主动性的帮助不仅让用户感受平台的温度，无形中也降低了用户的思考成本，更快的熟悉平台能力。

其次，每个问题旁边都提供“是否有用”的按钮供用户评判。此功能不仅为平台答案提供了优化空间，也强化了用户对平台建设的参与度，让助手与用户共同成长。

最后，对话窗口也可拓展辅助能力，例如常见问题、快讯、快捷入口等，为用户所想的同时也提供更便捷的站内流动通路。

2）入口形象IP化、情感化。除了自身能力外，入口的设计则会提升功能的存在感，从而吸引用户的关注。首先品牌ip形象的植入会让入口更生动，在唤起用户注意的同时强化品牌印象。其次拟人化的主动问候能提升平台的亲切感，拉近与用户的距离。

助力用户精准触达

新用户对平台相对陌生，恰当的引导能让他们快速关注重点。老用户对平台的定位及能力相对熟悉，目标性更强，但在应用同时也抱有更高期待。因此恰当的引导能帮助他们快速了解平台变化并精准触达。作为产品设计者，也希望对用户行为进行有意识引导，让用户能发现、探索平台新能力，或能够按照我们的希望使用产品。公告弹窗、新手引导、全局提示这三类方法可帮助用户高效获取信息并助力精准触达。

1、公告弹窗

常用于系统升级告知，以模态弹窗表达，让用户聚焦当前内容并支持跳转了解详情。公告样式根据内容细分为三类：版本更新提示、重点升级告知、常规通告，不同类型需根据信息量多寡差异化表达。设计时可辅以插图或其他视觉元素烘托氛围，并在文案上注入情绪化的表达，从而提升用户的关注度。

1）「版本更新提示」承载简单介绍内容，让用户关注且快速获取变更信息。

2）「重点升级」当有若干重要功能更新或新增时，可用此形式突出重点。

重点内容露出建议2-4组为佳，弹窗宽度可根据内容适配。

3）「常规通告」常用于文案较多的场景。设计上需要弱化视觉氛围，突出内容本身。

2、引导类

针对局部功能升级的提示说明，一般与元素绑定关系较强，可让用户直观了解关注点，提升功能触达率。虽然此类引导轻量便捷，容易帮产品提升数据指标，但要注意适度应用。根据功能重要度、操作复杂度将引导总结为分步式、气泡、闪点、操作示意4类。

1）「分步式引导」常用于页面多个功能升级的引导组。当页面有多个升级点，直接平铺会让页面臃肿不聚焦。为了让用户高效获取信息，建议一次仅显示一条，通过「下一步」操作，逐步唤出剩余引导。为避免步骤过多导致用户疲劳，建议最多不超过5步。

2）「气泡式」相对轻量的引导，有足够的提示性但不影响其他功能操作。

3）「闪点提示」微辅助型提示，常与气泡引导配合使用。在需要关注的地方闪烁，点击闪点后唤出关联气泡提示。不对用户造成视觉干扰，又能引起一定的关注。

4）「操作示意」当无法用图文清晰描述操作路径时，以动态形式表达。

3、全局提示

重点信息的汇总或提示。此类提示完美融合于页面，醒目且对操作无干扰，用户可根据披露内容判断是否处理。通过警示、徽标的应用向用户传达信息的变化并提供快速触达的能力，无形中提升用户响应效率。

1）「警示」不同颜色的提示条。常作为前置提示存在于页面或模块顶部，为用户顺利操作提供指引性帮助。既不打断用户当前操作，又足够明显，一般需手动关闭或事件结束后自行消失。不同颜色属性不同：一般蓝色代表消息通知、绿色代表成功、橙色代表警示、红色代表错误或异常等情况。另外，也可作为反馈应用在一些需要明确指示的操作后场景，此处暂不展开讨论。

2）「徽标」形态各异的小红点。常出现在图标、按钮右上角的红色圆点、数字或文字，简单且醒目。表示内容更新或有待处理的信息，此类提示符合用户心智，无需教育就能向用户精准传达提示意图。

使用时注意无数字与有数字的应用场景。有数字的徽标给用户带来的心理压力会更大，也会更吸引用户注意力，同时需注意数字长度控制。

操作中：具体的提示，助力高效填单

存在于操作的具体任务中，通过提示、推荐、预置信息等方式降低用户的认知及操作成本，提升填单效率。

提示说明

1、文案提示  

平铺在元素附近，对重点或复杂功能提供直观描述或建议。带有引导性的文案处理，会促进用户优化填写方案，输入更合适的内容。应用类型有三：重点提示、辅助说明、占位提示。重点提示与辅助说明使用户无需猜测；占位提示可使用户能够快速明确输入规则。因表达侧重不同，表单设计时三者搭配效果更佳。

2、工具提示

此类信息作为文本解释层级较低，无需直接展示。通过悬浮或点击元素触发对应说明，以气泡形式出现。触发式的展现既能避免非必要信息堆叠导致的页面臃肿，又能保证需要的时候有迹可循。

智能化

当一个系统背后的产品设计者考虑足够全面，能够预判用户的预期，那么它就能主动的给用户提供建议和帮助，甚至帮助用户自动执行一些任务，最大化减轻用户的决策压力。但值得注意的是，“智能化”需要一定的产品能力及丰富的数据作为支撑，设计时需结合实际情况应用。

1、信息预置

系统根据账户属性自动为用户预置内容。如下左图可见，仅需要填写一条内容，其他对用户利益无损的内容可通过预置选项来提升填单效率。

2、智能推荐

此类设计的前提是平台有足够的数据积累，通过大数据或业务特色为备选内容打标签建标识。常用的设计方法有两种-为用户提供可视化标签，助力用户快速决策；交互手段简化，由多信息录入变为直接选择，强化推荐内容展示性，从而降低操作中的思考和录入成本。

场景一：「帮助决策」

表单中有大量需要用户录入的字段，在无任何参考的情况下用户用于决策的时间及输入内容的合规性无疑对填单效率造成一定影响。下图可见推荐标签能帮用户提供方向及边界，辅助用户决策，降低思考成本。

场景二：「提升填单效率」

以单元创建为例，传统路径如下：新建>填写表单>保存>再次新建>再次填写表单…以此往复。用户每建立一个单元均需要把同类型的内容填写一遍，耗时费力。而智能推荐将常规表单输入变为模版选择，仅需2步就可完成多个内容创建：输入关键词>选择模版。选择和浏览的成本远远低于数据的频繁输入，模版设计则通过简洁的样式及内容层次化的展现提升信息获取效率。通过路径及交互方式的转变，上线后数据反馈操作效率大幅提升。

3、预览能力

当操作过程较为复杂或结果难以预测时，可视化的预览可及时展现结果样式，方便用户实时调整，提升操作安全感。

操作后：及时有效的反馈

及时响应操作成果，将功能的运行情况、数据的对错反馈给用户，及时有效的帮助修复输入中的问题。常见的反馈有以下四类：toast、表单错误校验、模态弹窗、独占式页面，每种样式因干预强度不同而适用不同的场景。

1、Toast：一般3s左右消失，因体积小、展示位置靠上、自动消失等特点时常被用户忽视。常用于操作结果、系统性等等无明确后续指引的反馈，例如“提交成功”、“操作失败”、“服务器无反应”。

2、错误校验：当表单出现输入错误时，按照就近原则在错误附近为用户展示明确的提示性消息，纠正和引导用户的输入内容。

3、弹窗提示：提示性和阻断性都很强，能够让用户聚焦信息本身。通常提示内容可为用户提供指向性引导，需要强关注。

4、独占式反馈：提交后页面切变为独立展示的页面级状态反馈。比弹窗的阻断性更强，信息获取更沉浸。在设计时建议搭配状态插图强化氛围，并提供操作按钮为用户提供通路。

章尾总结

帮助体系的出发点就是在尽量降低人为干预的基础上，减少用户在不同使用阶段中的刻意思考与寻找，从而提升操作的顺畅性及用户的认可度。综上就是在不同操作阶段可用到的设计方法，尽管有些手段并不起眼，但也正是这些点滴的聚集和系统的应用为用户带来无声的帮助，让B端产品使用体验变得高效且富有温度。

原文地址：百度MEUX（公众号）

作者：商业用户体验部

转载请注明：学UI网》B端帮助体系二三事

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

今天我们就来总结下，格式塔原理在B端产品中是如何应用的？

#01 接近性原则

我们先看2张截图，分别是不同分辨率下的界面效果。

可以明显的感觉到高分辨率下，菜单列间距离较大，菜单的归属关系很清晰。而低分辨率下，菜单间的距离变小，特别是后面两列的菜单会给人混在一起的感觉。

这就是格式塔原理中的接近性原则，距离近的关联亲密，距离远的就各自独立分组。

当我们想要传达给用户层级关系时，就需要善于利用接近性原则。例如表格上方的功能按钮，通常我们将高频、核心操作放置在左侧，低频、辅助功能放置在右侧。通过增大元素间的距离，达到功能分区的目的。

#02 相似性原则

相似性原则是通过颜色、尺寸、图形等方面的共同属性，实现信息的分组或者高可读性。

例如在可视化图表中，不同范围值的指标采用不同的背景色。通过背景色的差异，将同一范围内的数据形成视觉关联，提高用户对信息的识别效率。

通过图形尺寸的相似性也可以构建内容分区。例如阿里云、腾讯云控制台的首页，都采用了双列设计，左侧主要以高频的业务功能信息为主，右侧是辅助运营信息。两列尺寸宽度有明显差异，用户会将相同宽度的卡片归为一组。这样有助于用户理解两类卡片的内容差异，并有效地突出业务信息。

#03 闭合性原则

IBM、苹果的Logo设计，无论是“用刀砍过”，还是被“偷咬了一口”，用户仍然可以识别出完整图形。这就是视觉闭合性原则的一种表现方式。

在UI设计中，则会通过对齐方式，形成虚拟空间。例如下图中阿里云通过明显的背景色、阴影等手法形成有形的内容空间。而微信公众号则是平铺背景色，内容区借助标题、卡片对齐形成视觉闭合空间，最终将页面划分为左侧导航菜单和内容区两个空间。视觉表现上更轻量化。

另外闭合性是需要元素之间相互辅助的，单独的元素无法构建出闭合空间。以下图为例，虽然四个小的卡片做了间距分割，但是由于界面整体上是横向分割的。我们会将4个卡片看作是整体元素去理解和认知。

#04 连续性原则

用户更习惯于从左到右的横扫阅读，因此连续性主要体现在横向空间中。

下图中，虽然左侧的标签文字与右侧的内容信息有较为明显的间距，高度尺寸差距也比较大。但是用户不会将内容看作是4个独立的个体，而是理解为两组信息。

在某些场景中，如果信息平均分布，不会产生连续性的视觉感知。

例如下图指标监控中，指标都是采用小卡片，间距、尺寸较为统一。这种情况下用户就很难对信息分组处理。在我看来这些指标只是一个个的视觉散点，没有明确的视觉重点。用户无法感知到内在的逻辑性。用户想要找到某个指标时，需要逐个检索，花费的成本更高。

#05 简单对称原则

通过上述很多图片，我们可以看出页面元素基本都是横平竖直，中规中矩的元素和分割方式。或许有些单调乏味，但是胜在简单，不会带来额外的视觉噪点。

特别是B端产品，基本看不到异形的存在，甚至全圆角矩形都很少见到。即使有异形，也只是作为视觉表现元素存在于内容中，而不会作为空间的划分边界。

#06 主体与背景原则

主体与背景原则最典型的应用就是蒙版弹窗。通过拉大主体与背景的差异性，凸显弹窗信息。

当我们需要着重表现内容时，同样适用于主体与背景原则。例如登录界面的设计，会通过差异化的背景、阴影等方式，带给用户清晰的视觉层级，适当凸显输入框的主体地位。

而B端内容区是核心空间，基本都是采用纯白背景，与页面背景形成对比，从而占据信息的主体地位。

#07 共同命运原则

共同命运原则听起来有点玄学，指的是相同运动特征的元素会被认为是同一组或者是具有相关性的内容。运动的元素在B端产品中应用很少，我没有找到合适的案例解释这个原理。

在移动端产品中有些应用案例。比如iOS系统中，桌面布局编辑态下抖动的图标，可以与静态不可编辑的内容形成隔离效果，视觉引导性更强。同样今日头条频道编辑时，也采用了抖动效果。

总结

虽然B端产品没有C端色彩丰富，表现力上没那么炫酷。但是两者对信息传达的要求是一样的，要求和谐、有序、层次分明，辅助传达内在的业务层信息。灵活地运用格式塔原理将对产品的体验提升会有很大的帮助。

格式塔原理不仅限于视觉表现，产品经理或交互设计师在原型设计时，也要重视格式塔原理，辅助设计方案表达，提高团队间的协作效率。

今天的分享就到这里了。如果有更好的案例，欢迎评论区留言分享给大家~

原文地址：子牧先生UXD（公众号）

作者：子牧先生

 转载请注明：学UI网》设计基础（1）：格式塔理论在B端产品中的应用

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

2021 | 第15篇分享目录（211~225）

211.「微信」授权登录-多重身份 保护个人隐私

212.「爱奇艺」上/下手势交互-不只是调亮度和音量

213.「饿了么」配送进度-便捷的操作及同理心地图

214.「微信」语音消息-个性化的内/外音自动切换

215.「网易云阅读」Word模式-摸鱼生涯的巅峰时刻

216.「QQ」情怀-用故事和记忆减少用户流失

217.「支付宝」收款码-信息自动翻转提升视觉舒适度

218.「自如」背景图-模拟现实世界的昼夜变化

219.「淘宝」物流信息-最新动态 一目了然

220.「微信」摇一摇-不同性别、不同的图片你如何理解？

221.「纸条」简单的弹窗-暖心的设计

222.「高德地图」风景名胜区-超赞的手绘版实景地图

223.「英语·流利说」保存退出-再坚持一下好吗？

224.「即刻」细节控-走心的设计总会打动一些人

225.「网易云音乐」生日快乐-有温度的交流“俘获人心”

211.「微信」授权登录-多重身份 保护个人隐私

产品体验：

我们在其他应用选择微信第三方登录时，进入授权页面，可通过新建用户信息，设置全新的头像和昵称授权给其他应用作为基本信息，还能使用随机选择系统默认提供的头像和昵称。

设计思考：

用户选择第三方登录最主要的原因就是不想注册账号，在这个应用多如牛毛的时代，很多应用可能用一次就卸载，在非必要的情况下，手机号码能不使用最好，而第三方账号无疑就是最好的捷径，无需记忆账号密码，而且方便快捷。但即便是用第三方账号登录，也有不想泄露基本信息的时候，比如用微信登录xxx社交平台，美其名曰聊天交友，实则“…”，这时候如果被老朋友从自己的头像、昵称中认出来就尴尬了。

在第三方登录中选择微信登录时，可在授权页面通过新建用户信息重新设定头像和昵称，或者使用微信提供的随机信息，在成功登录其他应用后变成一个全新的自己，这种方式有助于保护用户隐私，能避免在其他应用未及时修改微信昵称、头像导致泄露给自己带来不便，通过新的个人信息登录用以增加安全系数，让用户用的放心。

（PS：尤其是喜欢将自己的真实相片设为微信头像的用户，频繁授权第三方应用，多少都有一定的风险）

212.「爱奇艺」上/下手势交互-不只是调亮度和音量

产品体验：

使用爱奇艺APP横屏观看影片时，在左右滑动（快进/快退）过程中，可在不松手的情况下进行上下滑动并根据提示切换剧情。

设计思考：

关于手势交互的应用越来越多，虽然学习成本较高，但有很多常规的手势已经把用户的操作习惯给培养出来了，当进入到似曾相识的页面中，条件反射性的自然运用。比如视频类应用在横屏观看时，左右滑动调整播放进度、左侧上下滑动调整亮度、右侧上下滑动调整音量，这么一看，好像该屏幕所在区域都给合理的安排上了，如果还想在哪个区域添加功能入口的手势交互，几乎不可能了。

爱奇艺APP横屏看片的交互手势真是无所不用其极，将其做到了最大化程度的利用。当用户在左右滑动调整进度时，最有可能出现的想法是对当前内容或剧情不感兴趣，通过进退的方式逃离此画面，在滑动过程中，界面会出现“上下智能跳剧情”的文案提示，在不松手的情况实现阶段性的剧情跳转。文案提示能降低用户的学习成本，让其快速知晓系统所隐藏的交互手势，以达到教育用户的目的，上线滑动则方便用户根据提示快速定位至新的剧情，跟左右滑动总是停留在未知区域相比，定位更清晰，让用户享受到更便捷、精准的服务体验。

213.「饿了么」配送进度-便捷的操作及同理心地图

产品体验：

①在饿了么下单后再次进入，APP左下角后显示正在进行中的订单快捷入口，点击快速查询配送进度；

②配送进度骑手地图页面，会显示实时的天气信息（尤其是雨天，特别突出）。

设计思考：

都知道买衣服及各种生活用品上京东、淘宝，到了饭点就上饿了么、美团外卖。我们可以在在淘宝逛上几个小时，反复进进出出看着在平台算法下给我们推荐的各种东西，随时购买，但却没办法在外卖平台呆很久，如果频繁进入应用，最大可能就是查看下单后的配送进度。

饿了么APP存在外卖订单时，用户二次进入应用的需求绝大多数都是查看配送进度，平台也是基于用户的这种心理需求，通过行为预判给予用户最便捷的操作，并通过情感化的方式触发其同情心理。

①下单后再次进入平台，右下角会提供正在进行中订单的快捷查询入口，点击即可快速查询当前配送进度，省去了原来需要从订单功能去查询的多步骤操作，“一步到位”节省用户更多时间。

②如果天气状况较为恶劣，骑手地图会显示当前的实际天气情况，尤其是雨天，当我们的外卖久久没有送到时，看到骑手地图上的倾盆大雨，足以能引发同情心理，对迟到的外卖也能表示谅解，以减少对骑手的投诉、订单的差评，同时提升饿了么平台的整体服务质量，优质服务的平台能吸引更多的用户使用，形成良性循环。

（PS：同理，我们在上班途中遇到大雨，很容易想象自己当时的心理，最终导致上班迟到，但并没有受到相应的处罚。恶劣天下时，领导可以容忍我们上班迟到，我们又为何不能容忍骑手迟到呢？）

214.「微信」语音消息-个性化的内/外音自动切换

产品体验：

在微信听语音消息时，默认是扬声器播放，当碰到不方便收听或噪音较大的环境时，将手机听筒贴近耳朵，系统会自动切换至听筒播放。

设计思考：

在沟通交流时，文本消息使用的最为频繁，但并不意味着文本消息是最好的表达方式。相较于文本消息，语音消息属于一种强提醒的方式并附带感情色彩，接收者的感知度更强，接收效果也会更好，如果你是一个精英/教育类型的职业者，每天面对几百上千条回复，就知道用语音消息回复有多香了，但是，这也意味着接收者的干扰程度也更强，如何让接收消息的一方把干扰降到最低，是值得产品团队深思的问题。

微信在很早之前就上线了语音转文字功能，虽然能解决部分接收者不方便听的问题，但此功能是建立在发送者普通话非常标准的基础之上，否则即便转成文字也会看的一脸蒙圈。考虑到语音消息接收方的场景问题，如果不方便听语音或者外面很吵时候，播放语音时，将手机听筒靠近耳朵，无需任何操作，会自动切换至听筒播放，方便在任何环境都能收听语音消息，对用户十分友好，不得不说，微信团队为用户创造出了既便捷又个性化的使用体验。

215.「网易云阅读」Word模式-摸鱼生涯的巅峰时刻

产品体验：

用浏览器进入网页版的网易云阅读，点击阅读页面的“Word模式”或直接按F2键，画风突转，整个网页会变跟Word极其相似的画面。

设计思考：

你是否有过在上班时间里将工作完成后去打发时间？是否为了劳逸结合而忙里偷闲、或者自己本来就是摸鱼党“楷模”，这时可能会去看看新闻或小说，可总是提醒吊胆，冷不防就被某个领导给瞧见了，不管你切换画面的速度有多快，总是快不过暗处的一双眼睛。

网易云阅读网页版上线了Word模式之后，简直开启了小说类摸鱼党的巅峰时刻，点击“Word模式”或按F2，就可以对着电脑假装“上班”了，就算领导从身边经过，只要不仔细看“Word”内容，就很难发现这是在看书，当你的同事和领导发现你目不转睛的盯着电脑，没准就会认为你是一个全神贯注工作的后生仔。网易云阅读的“Word模式”应该算是摸鱼党的必备神器之一了，如果你在工作之余有阅读的习惯，在条件允许的情况下不妨试一试吧。

（PS：word模式并非鼓励我们在上班时间去摸鱼，成年人的任何事情都是靠自觉，如果你是为了缓解工作压力或在工作完成的情况下去看会书却又总是担心被领导发现后的尴尬，Word模式或许可以帮你解决这个问题）

216.「QQ」情怀-用故事和记忆减少用户流失

产品体验：

使用QQ聊天时，在对话框页面空白区域左滑，会进入与该好友的关系页面，在这里，可以看到成为好友的累计天数、共同属性、添加时间等一系列信息。

设计思考：

每一个80、90后都有一个无法忘记的QQ号，还记当年去网吧的情景，可以不玩游戏、不看电视剧、不聊天，但是不能不挂QQ，时至今日，虽然心已被微信“掏走”，但不管是手机还是电脑，QQ软件依然是这群人的装机必备，就算不关注了，可“小太阳”还在默默升级，因为它承载着我们太多的记忆和故事。

在QQ好友的聊天界面左滑，可进入与该好友的关系界面，能看到添加好友时间、成为好友累计天数、星座等相关信息，满满的回忆杀，似乎一切都会回到了最初的美好。不得不说，QQ用卖弄情怀的方式能在很大程度上加深用户对产品的印象，增加其使用粘性，在微信横行的社交年代，或许这也是减少QQ用户流失不错的方案之一了。

217.「支付宝」收款码-信息自动翻转提升视觉舒适度

产品体验：

当我们把支付宝的收款码页面展示给对方时，如果将手机头部朝向对着别人，这时二维码中间的头像、部分标题和描述文字会在原位置自动翻转。

设计思考：

平时我们在给别人出示二维码时，因每个人习惯的不同，有的会扭动手腕来个水平翻转，但也可能直接抬高手腕将手机头部朝下递出去，这时站在对方的角度，看到的信息都是倒过来的。

支付宝在这方面做了一个很贴心的设计，当我们将手机头朝下把收款二维码出示给对方，页面中的部分信息会在原来的位置自动翻转回正，虽然没有实质性的作用，但能让对方看起来不是那么别扭，间接的提高了视觉舒适度。

218.「自如」背景图-模拟现实世界的昼夜变化

产品体验：

在自如“我的”页面，顶部背景图通过模拟现实世界中的自然规律，白天阳光照射、夜晚月光皎洁。

设计思考：

在我们的印象中，通常白天是晴空万里、艳阳高照，而晚上则是夜深人静、满天繁星，这也成为了每个人心中永恒不变的定律，而很多产品团队则会把这种自然规律的变化带入应用之中。

自如APP“我的”页面顶部背景图跟随昼夜环境的变化自动交替切换，UI视觉场景模拟现实世界的自然变化，使其更具真实感，便于用户在视觉传达的过程中结合现有认知，映射出更具亲和力的产品使用体验，通过细枝末节营造出最舒适的视觉表现力，带给用户不一样的惊喜。

219.「淘宝」物流信息-最新动态 一目了然

产品体验：

进入淘宝我的页面，如果有待收货订单，在我的订单区域下方会显示最新的一条物流轨迹信息，进入待收货列表，订单下方也会一一显示，用户不用进入物流详情页面就能知晓当前订单物流进度及更新时间。

设计思考：

有人问，如果物流信息迟迟不肯更新、就像停了一样，这是一种什么样的体验？很多人在电商平台买了东西，会时不时看下物流信息有没有更新，从哪发货、多少天能到都不重要，关键是在“动”就行，或许商品到了，在菜鸟驿站都能甩上一两天。其实，这是因为快递在运输过程中，每更新一个状态，就有种离自己越来越近的感觉，从期待到兴奋变化，这也是网购的一个特定，只要不出问题，在等待的过程中看着不断变化的物流信息也是一种享受。

淘宝产品团队考虑到用户的这种心理，提供了更为便捷的物流查询方式，进入APP我的页面时，在订单区域就能立即看到最新的物流轨迹，如果待收货订单较多，进入待收货列表只需上下滑动就能快速浏览多个订单物流信息，免去了每个订单都要进入物流详情页面查看的反复操作，让用户能通过最短的时间、做少的操作满足自己的需求，体现了应用的便捷性，提升用户体验。

220.「微信」摇一摇-不同性别、不同的图片你如何理解？

产品体验：

在微信的摇一摇页面，不同性别的用户所看的摇一摇图片（握设计手势）不一样。

设计思考：

微信一直追求的都是极简设计，要求非常简单，目的就是无需做任何的学习、任何人都会用。其实，不光交互流程、操作逻辑是如此，即使没有任何操作的纯视觉页面也是如此，足以看出是多么的细节控。

微信的摇一摇界面，不同性别的用户看到的图片不同，不难发现，女性的界面比男性多了一个手指头，看起来这一个很简单的细节，似乎起不到任何作用，但如果发挥无限遐想，也是有迹可循的。摇一摇开发之初，内部曾经命名为“录一录”，如果稍微往邪恶了想，“lu一lu”大家都懂，以至于后来很多人都从动作姿势上联想，很像“手yin”，如果认为这是一个很牵强的结论，那么张小龙曾经公开说过“它是一种人类的性的驱动力在完成整个过程的，没有什么吸引你的驱动力比性的驱动力会更加原始”。抛开所有的遐想，单单从性别不同就提供不一样的视觉效果，哪怕是微小的变化，也能看出设计团队很细节控，在不断追求完美的过程中力求做到极致。

221.「纸条」简单的弹窗-暖心的设计

产品体验：

在晚上0点以后进入纸条APP，会出现温馨的提示“夜深了，明日再早起努力吧”弹窗，暗示用户早点休息。

设计思考：

喜欢熬夜的人无非两种：一种长期习惯性的熬夜工作、输出或学习，特有灵感及动力；还有一种就是熬夜追剧刷视频，就算躺在床上也得抱着手机。不管哪一种，通常都会忽略时间的流逝，不经意间就过去了几个小时。

纸条APP是一个学习类型的应用，当用户在0点以后进入，系统会通过弹窗提醒用户夜深了、该休息了，此提示有助于快速勾起沉浸在学习中用户的时间观念。我们都知道，时间虽然很紧，可身体才是革命的本钱，用户看到此提示后，即便不会立即去休息，但可通过清楚的时间观念来计划接下来的学习节点。一个简单的弹窗，足以体现出产品对用户的关爱，是一个很暖心的设计。

222.「高德地图」风景名胜区-超赞的手绘版实景地图

产品体验：

使用高德地图搜索部分景区，如黄鹤楼、泰山、故宫等风景名胜区，放大后会出现超实景的手绘版地图，画面清晰程度精确到每个石阶、每一棵树。

设计思考：

高德地图应算得上是用户旅游出行的好帮手了，先不说本身就有较为完美的导航服务，就连吃、喝、玩、乐、购一条龙服务都是妥妥的，虽然如此，可依然有用户因为对景区不熟悉而走冤枉路、游走不全面等不尽兴的问题。

高德地图还有一个隐藏的黑科技，可助力用户在出行前对国内的部分景区作更深入的了解。输入景区名称搜索定位至该景区，当地图放大到一定程度时，会自动切换超级详细的手绘版地图，途中的任何一个点都清晰可见，精确到一棵树、一个台阶、一块地板砖。高德的手绘地图与地图软件完美融合，第一时间将景区完整呈现在游客面前，让游客对景区全貌一览便知，极大的方便了游客对于参观路线的选择。另外常规的地图样式早已不能满足人们的欣赏水平，手绘地图作为既古老又时新的表现方式，不仅方便用户使用，还能受到更多用户的青睐，为培养更多忠实的用户打下坚实的基础。

223.「英语·流利说」保存退出-再坚持一下好吗？

产品体验：

使用英语·流利说在学习英语的过程中，点击保存并退出时，系统会通过弹窗中激励性的文案，鼓励用户再坚持一下完成仅剩一丢丢的学习内容。

设计思考：

惰性是天生的，这也是每个人常规的通病，如果一个人的自律性很高、一直处于学习状态并努力的提升自己，那么一定使用过非常规的手段并结合内/外在环境等因素来打破常规（天生爱学习的除外，毕竟少数），即便如此，在学习过程中半途而废的也是多不胜数。

在英语·流利说APP学英语时，如果存在某些外在原因，比如：朋友叫逛街、喝酒、玩游戏…等，退出的过程中，系统会弹出“还差一点就完成了…”的文案，在用户可能产生放弃念头时，给予提醒并告知接下来的难度很小，给予坚持下去的动力。平台通过弹窗提醒并鼓励用户走的更远，做更多的事情，用户一旦坚持下来，对双方都是不错的结果，甚至产生无限可能。

224.「即刻」细节控-走心的设计总会打动一些人

产品体验：

即刻APP动态模块的点赞图标会根据圈子类型的不同而变化，比如在“晚安电台”中是月亮样式，“大产品小细节”中则是可爱的表情包样式。

设计思考：

在很多产品中有一些看似无关紧要、不痛不痒甚至跟自己毫无关系的设计细节，他们可以是一行文字的间距、一个文字的替换、一个图标的变化……

即刻APP根据不同圈子的类型，其点赞图标也不同，在“晚安电台”中是月亮的样式，“大产品小细节”中则是可爱的表情包样式，图标附带最直观的类别属性基因，始终保持着贴近于用户对生活中常规事务的感知样式呈现，非常走心的设计，虽然只是一个无关痛痒的图标样式变化，但对于细节控的用户，发现后也能产生一定的好感。

（PS：其实这种微弱的设计细节，口头上似乎没有什么说服力。很简单，举个例子：在1000个用户中，有100个用户发现这个细节，其中只有1个人被打动，可能整个团队都觉得不值一提，但站在做设计的角度，如果在应用中有上百个这样的设计细节，那么是不是用户体验就能提升10%？虽然答案不为可知，但在几乎不影响用户、不增加工作量的情况下完全可以尝试，况且在遵循基本原则的情况下，从来没有绝对的正确和错误，都是在无数次的尝试下逐步完善提升…）

225.「网易云音乐」生日快乐-有温度的交流“俘获人心”

产品体验：

在生日当天进入网易云音乐，金刚区第一个功能“每日推荐”会替换成“生日快乐”，进入此功能后，列表的第一首歌曲为“祝你生日快乐”。

设计思考：

之前看到一个问题“什么样的人机交互最完美”？其实没有所谓的最完美，只有在通过不断的优化、完善的基础上，力求做的更好。如果说一定要给一个答案，我想最起码要在满足用户基本需求的情况下做到有温度的交流，这就好比你跟一个钢铁直男或者思维敏捷且开朗的人对话，前者一问一答、甚至会引起不适，后者则会举一反三、以更有温度的交流方式并留下深刻的印象。

从网易云音乐APP的很多细节上可以看出，不仅做到了有温度的交流，更是升级到了俘获人心的地步。在生日当天买进入APP，金刚区第一个功能变成了生日快乐，进入该功能后，第一首歌曲就是“祝你生日快乐”，在不经意间直击用户内心。产品用热心为用户带来温暖和抚慰的力量，不管是否处于回报热情，用户在惊喜之余，能一定程度提升对产品的忠诚度，增加使用粘性。

结语：

设计师需要养成体验产品的好习惯并将优秀的产品细节记录下来，加强自己的记忆，不仅能提升自己的语言组织和总结能力，也为日后输出优秀的作品当铺垫，对自己的能力提升以及未来的职业发展带来便利。

本期产品设计细节分享结束，我们下期再见。

原文地址：能量眼球

作者：大漠飞鹰CYSJ

转载请注明：学UI网》产品细节剖析，让你看看大厂是如何做设计的

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

硬实力是指专业能力，包括交互设计能力、对所负责的业务线与对应产品的理解程度、对产品面向的用户群体与用户使用场景的了解程度、对设计规范与组件的熟练应用、数据分析能力、对设计工具的熟练使用、以及具备一定的视觉审美。

软实力是指通用能力和个人影响力，通用能力主要包括“沟通与表达能力、推动与执行能力、项目管理能力、复盘总结能力”；个人影响力主要包括“分享、指导、创新能力”。

本文将结合我的工作经验，以及不同公司招聘要求中都有的共性点，向大家介绍如何在日常工作中培养和提升自己的软实力。

下图是我简要绘制的“交互设计师能力框架图”：关于硬实力这部分内容，在我之前的文章中已经梳理过一些，感兴趣的可以回头翻看。

一、通用能力

1. 沟通与表达

首先你需要分析自己的性格特点，一般外向的人擅长沟通，即便不是外向型，也最好不要是内向不爱说话。只有你发自内心的愿意主动与他人沟通，别人才能感受到你的亲和力。

其次不管与怎样性格的人沟通，把握的第一个原则是“就事论事”：没必要为了事情大声争论，甚至上升为人身攻击，我们沟通的初心是为了解决问题，应该尽可能的“求同存异”。

你需要做的是想办法解决影响事情顺利发展的各种障碍，过程中遇到的非主观因素记录下来便于后续总结。

表达是指将思维所得的成果用语言等方式反映出来的一种行为，是向他人正确传达自己的想法。

比如与同事沟通表达自己的观点、公开演讲、获奖感受等，表达的定义里包含一个关键词“思维所得”：这意味着你需要在平时就有一定的思考沉淀，不然你无法做到“准确且清晰”的传递自己的观点。

需要把握的第二个原则是“不卑不亢”：既然是一个Team，团队最终目标是一致的，只不过不同成员的岗位角色不同，分工内容不同，没有谁一定要给谁妥协，或者谁一定要强硬到底。按照已经发生的客观事实有理有据的陈述自己的观点即可。

最后需要把握的第三个原则是“换位思考”：用户体验设计领域的设计师经常提到一个词“同理心”。我们需要站在用户角度审视自己设计的产品，我们需要站在不同岗位角色角度理解他人的难处…无论对内还是对外沟通与表达，能做到换位思考的人，必然考虑问题更加周全、更加有深度。

2. 推动与执行

执行力是指完成任务目标的操作能力，评判执行力强弱的标准是效率与效果。执行其实是践行的过程，践行的过程中效率可能没那么高、最终的效果可能也没有多满意，但无论如何，做这件事都为你积累了宝贵的“践行经验”，举重若轻的背后一定经历过多次失败与不堪。

执行力是每一位员工都必须具备的基础能力，而推动力则是针对中高阶水平设计师提出的更高要求。

“从单纯的执行任务”升级为“从头到尾推动事情落地”，这是职场打怪升级的必经之路！推动力不再是单一的能力要求，而是“多项能力”的综合体现，推动落地的过程中涉及到沟通表达、组织协调、向上管理、项目管理等能力。

3. 项目管理

往小了说是对自己承接任务的管控，范围相对小，包括项目前期涉及到的“与上游业务同事和产品经理梳理需求、提出合理建议、预估排期”；项目推进过程中涉及到的“准时交付产出、问题沟通与解决、风险点预估与分析、及时向上汇报进展、设计验收”；项目后期涉及到的“上线验收、遗留问题记录与跟进”。

以上提到的是设计师在设计层面应该做好的事情。再往大了说，你可能会作为一个分支项目的牵头人，你要管控的不单是项目在设计阶段的开展，还会更多涉及到与上游业务方、产品经理；与下游开发同事、测试同事；与外部合作方的协作等。

随着项目复杂度提升，对负责人项目管理能力要求会越高，因为会涉及到方方面面，可能包括业务对接洽谈、细节协商达成一致、进度把控等。

作为交互设计师，有机会深入参与到项目推进的全流程中，这既是对你专业能力的深化，也进一步加强了你对所负责业务线的理解程度。

如果你遇到这样的机会，请珍惜把握，尤其是首次承担类似职责。谁都是从0到1、从无经验到身经百战走过来的，不要有过多的担心害怕，撸起袖子加油干！当你经历过再回首时，你会感谢当初自己的勇敢与自信。

4. 复盘总结

近期面试一些交互设计师，聊到关于项目需求的复盘时，有的应聘者在公司现有机制下没有机会接触到需求上线后的数据表现或者用户反馈；有的应聘者总结分析的不够深入或者视野局限于设计层面的改进。

我之前也在小的创业公司工作过，以上类似现象在许多公司还是比较普遍的。我的看法是：围绕个人能力发展思考并决策。

• 如果你所在的公司没有建立复盘机制，你也很少能接触到相关数据，一方面你可以尝试着利用上面说的推动能力，试着推动建立这个机制，至少可以先从你所在的小部门开始试行；另一方面如果你是在类似国有企业，反馈信息涉及到保密，这是客观因素与你的努力无关，这时候需要认真考虑换工作的事情了。
• 另外一种情况是有机会获取相关反馈信息，但有时候承接的业务需求不间断，再加上许多公司的复盘机制算是锦上添花，不是非做不可的，所以针对设计师个人而言，做好这件事更多依靠的是“自驱力”。

复盘总结不单针对工作项目，另外重要的方面是自我反思。从过往的工作经验中思考做的好的地方，不好有待提升的地方，需要补齐的短板是什么，职业生涯下一阶段的规划是什么… 我认为尤其对于交互设计师而言，阶段性的反思总结，有助于更好的认清自己能力优势与劣势，有助于逐步搭建上面提到的自己的能力框架。

二、个人影响力

1. 分享

分享其实就是将某方面复盘总结的结果拿出来与他人沟通交流，分享形式和分享内容围绕分享目的可以灵活调整。比如我之前的文章《如何做好一场部门内部分享？》中提到过关于分享形式与内容的创新，感兴趣的可以翻看。

当初之所以要做出这个改变，是因为我们认为原有的单个人框定大概分享内容范围进行分享的方式，不能很好的帮助分享人和被分享人提升能力，同时分享内容容易脱离现有业务。当然不同公司分享目的考虑的侧重点不同，所以算是因公司而异吧。

对个人而言，如果你平时针对项目、设计专业、工作流程、存在的问题等有过一定程度的思考，你会积累一些沉淀，无论是优秀的值得借鉴的内容、还是失败的值得引以为戒的内容，都可以与同事或者专业领域的朋友交流讨论。反过来在这个过程中，又会激发你更多的想法，拓展你的眼界与思维。

2. 指导

团队内有工作经验或者熟悉工作流程的中高阶设计师，针对初入职场的新人或者刚来公司还处于适应部门环境的有工作经验的职场老人，进行专业层面和工作流程的指导。

许多公司比较注重公司文化对新人的输出，但针对日常工作的指导带教却没有十分明确的规定。

辅导的效果很大程度上取决于指导人，如果某天你有机会带教新人，不要轻视这项工作，首先在心态上能够做到上面提到的换位思考，你自己也是从新人一路走过来的，能够切身感受到新人的诉求。

其次也是对你责任心的侧面考察，在职场有一句话我认为是适用的：你能承担多大的责任，就值得拥有多大的回报。

3. 创新力

提到创新许多人觉得有些虚无缥缈，因为现实情况是处理不完的待解决问题，哪还有时间和精力做创新，就算提了创新的点也很难有资源支持。很久一段时间我也是这么想的，后来看到两个观点使我茅塞顿开：

• 创新不是颠覆，也不一定是惊天动地的大动作，更多的可能是微创新，一个有可行性有突破性的想法。
• 如果你对所做的事情保持有好奇心或者热情，千万不要被日常的工作消磨掉。好奇心是创新的源动力。

生活中太多的人会告诉你，只能顾好眼前的苟且，没有精力和金钱畅想诗与远方，如果你也这么想并且这么去做，你只会被大众牵着鼻子走。更为可怕的是，慢慢的你丢掉的是那些原本可以让你更为成功的优势点。

三、总结

以上是我提炼出的我认为一名优秀的交互设计师应该具备的“软实力”， 这部分能力应该是成为高阶设计师的衡量标准之一。无论是职场新人还是老鸟，重视和持续打磨自身的通用能力与个人影响力，才能不断提升自己的不可替代性。

原文地址：人人都是产品经理

作者：Viksea

 转载请注明：学UI网》交互设计师该如何提升“软实力”？

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司