随着工作年限的增加，项目经验的丰富，在能力提高的同时，设计师更应该注重团队管理能力上的提升，互联网公司不论规模大小，但基本的开发流程是大致相同的，基础配备岗位如下：产品经理、UI设计、前后端开发工程师。测试人员配置不一定有，所以这边就不列入了。以上是最基本的人员配置，该有的流程并不可少，今天我拿目前所在公司的日常工作流程聊聊心得，有时间你就慢慢往下看。

各岗位的工作流程如下：

根据流程图我们很清楚，哪些任务是优先可以发起的，哪些任务是上一个做完才能开始的。今天重点介绍在设计环节，作为一个设计leader，是如何开展并推进的任务的。

一：需求原型理解阶段

设计环节前期，设计师会收到来自产品经理的原型图，以及需求文档，这时候作为leader的你，首先应该了解整个产品的架构与逻辑，并且通过口头交流、书面记录的方式，把你的疑虑与产品沟通进而了解最终目标。只有你自己搞清楚整个产品逻辑与目标，后期才能对其他协同设计的人员遇到难题时，进行一些思路梳理。

二：交付原型于协同人员

通过第一阶段，你已经明白了整个产品逻辑和目标，这时候你就可以将原型图派发给其他协同人员，让他们先浏览理解，并在必要时给出相应疑虑讲解，帮助其理清思路。

三：出主视觉风格设定稿

第三阶段，你通过对需求的分析，对竞品风格的探索，出具2种主页面风格定向，并提交上级领导审定。这里注意的是，并不是越多种风格越好，一定是你经过一系列思索后，给出2版你认为最有说服力的即可。

四：启动设计

风格落定后，你应制定一套视觉规范，对于大多数小伙伴来说很疑惑，我也疑惑过。你还没设计，怎么知道你真正想要的是什么颜色什么字号？这里我建议是，部分设计稿出来再做规范，然后慢慢的完善。但是起初一些基本的样式，包含颜色、字体、栅格系统等基础规范，是可以先落定的。并根据原型统计页面，进行任务分配，并沟通完成时间。

其次对于一些内置组件，比如展示型图标、底部tab切换，尽可能让同一个人来负责，便于风格走向统一。至于一些内部动效，可根据团队成员擅长领域进行分配，例如我对交互动效比较擅长，我就可以负责这块。

注意事项：为确保设计规范统一规范，统一蓝湖协作工作流（每个公司协作平台不同），参与设计协作人员，设计过程中新增组件样式应及时告知协同人员（以免出现你新增了，对方不知道，造成多种样式情况）

五：任务排期表

通过使用甘特图进行排期，不仅对于你可以了解整个设计进程，同时也让领导清楚项目进度。

六：UI前端配合调试阶段

页面都设计好了，好记性不如烂笔头，以每个模快为单位，记录下你的整改意见给到开发，记得给他捶捶背，真的很幸苦也很烦心的一件事情。其实对于页面还原度问题，心里要有个数，95%还原，就很棒了，我有时候也不会死磕太细小且不重点的地方，尤其在项目紧急时候，把重心放在测试bug上更为重要（忽略我的字迹，字丑人还好）

七：总结

人物结束，进行一个复盘，哪里环节不够顺畅，是沟通问题，还是效率问题，都可以记录下来，下次改进。

文章来源：优设  作者：我是黄烁啊

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

做设计、做交互、做产品前都离不开一个目的就是——拆解问题，达到XX预期，从而能提升自己的专业性，让方案更加具有说服力。那么，设计师应该如何找到符合自己的设计方向和优化方向呢？

为什么要去拆解问题？

案例：

• 背景：某 APP 作为游戏类兴趣社交 APP，个人主页作为了解他人、建立社交关系的核心一环，目前信息丰富度和社交感偏弱，故需要进行优化；
• 目标：页面改版核心以社交为驱动，丰富页面信息，提升用户建立社交概率。

如果不去拆解问题，你知道后续的该怎么做吗？

设计拆解：想要找到设计方向和优化方向的，请你一定要看！

我们知道了最直观的感受信息度和社交能力弱，但是这 2 点并不能作为优化目标和设计策略。

从该截图来看，满足了：

• 个人属性：照片、语音、标签、星座、ID、性别等等；
• 商业属性：下单、突出异性优势等等；
• 社交属性：关注、提示关注、聊天、小游戏场景（右下角人物）、分享等等。

1. 信息是不是很满？

那么如果不去拆解问题，是不是就不知道如何补充信息了，那么也有社交感。用户在主动状态下：漂亮、萌妹、声优也就有社交了，那么用户在被动状态下是什么？

2. 是不是越想越乱，找不到方向了？

这就需要去拆解问题了，可以让你的思路更加清晰，保持在一条线上，形成大纲，可以挖掘更多的价值。

拆解问题的好处是什么？

还是同样的案例：

• 背景：某 APP 作为游戏类兴趣社交 APP，个人主页作为了解他人、建立社交关系的核心一环，目前信息丰富度和社交感偏弱，故需要进行优化。
• 目标：页面改版核心以社交为驱动，丰富页面信息，提升用户建立社交概率，那么我们开始拆解问题：（前提是背景已经确认好的情况下）。

那么背景交代的是需要强化社交关系提升信息丰富度和社交感。经过再一轮的拆解，是不是能感觉到，自己思考的方向也多了？

我拆解问题后，获得的好处有：

1. 思维的扩展性

举个例子：信息丰富度为什么会让我觉得缺少一点灵活性？信息的展示，会不会又分为外在和内在信息？那么什么是外在信息？与同平台上的大神之间建立的关系转化为信息？

2. 逻辑的严谨性

• 有逻辑线索可依，从而更容易找到问题所在；
• 方案和过程都可以假设，但是假设是必须要建立在真实的场景下。

3. 产出结果的可视化

可以根据拆解，将问题变得更加清晰，从而找准发力点。

如何去拆解问题？

前面铺垫了那么久，现在回归正题拆解问题主要分为 2 种（对应着初级和中级水平，可视情况任选一种）：

1. 以问题树进行拆解，将问题细化到一个点

还是以这个案例：

• 背景：某 APP 作为游戏类兴趣社交 APP，个人主页作为了解他人、建立社交关系的核心一环，目前信息丰富度和社交感偏弱，故需要进行优化。
• 目标：页面改版核心以社交为驱动，丰富页面信息，提升用户建立社交概率。

△ 这是提升信息度的模块，问题树太长，就只展示部分了

△ 这是提升社交感的模块，问题树太长，就展示部分了

挖掘到以下功能（列举功能并记录，进行权重分析）：

• 关注模块需要重设计
• 设计车队模式
• 匹配度设计
• 话题引流设计
• 群设计（包含营销活动设计，展示打赏排名）等等

这是一个很浅的影响因素分析，到了这一步，很多厉害的小伙伴，甚至会更加详细。也就是说我们要将方向点，统统转化为机会点和业务新方向（那些一直抱怨没有发言权的小伙伴可以参考一下）。

（全局问题树展示-举例就不做详细展开了，理解意思就行）

整合内容进行归类

拆分和定位分为：

• 开发侧：标记为 K-1 +颜色，比如群内人数限制，开发能不能帮助解决，如果不能，转换至交互侧产品侧：标记为 C-1 +颜色。比如：车队设置，以及后续的商业演化；
• 运营侧：标记为 Y-1 +颜色。比如：群内，该提供怎么样的营销策略；
• 设计侧：标记为 S-1 +颜色。比如：交互处理，开发不能满足群内人数的扩张，该怎么做；
• UI 该处理：如何让页面变得更加“温暖”，根据用户群来进行页面设计；
• 题外话：交互在我看来，其实承担着衔接与沟通和分析的角色，整合内容看到问题其实对于经验要求很高（比如能看到商业机会），请尽量带着组内专业的人进行归类分析。

整合成一个表单：

重复确认问题我们找到上级确认：是否与上级规划的方向保持一致，不合适也能及时作出修改。

• 证明你的专业性
• 让领导知道你们接下来做的事情是什么，产生了什么数据价值，将有价值的内容规划，融入产品层的大纲中
• 暗示领导给资源，有些拆解出的目标问题，是不能单方面来解决的

资源规划根据权重比，进行资源规划。适用场景对于刚上手的小伙伴，请耐心的一步步做完，老鸟的话请直接一步到位。

2. 以用户的接触点进行设计

这一块的内容需用到用研部分知识，以数据为主用研为辅的情况下去进行拆解问题。相对来说，流程会更加的长，但是获得的结果更为准确一些或者说更加偏向用户想要什么。

流程漏斗数据图

还是以这个案例：（背景需要改动一些）

背景：某 APP 作为游戏类兴趣社交 APP，个人主页作为了解他人、建立社交关系的核心一环，目前信息丰富度和社交感偏弱，故需要进行优化 。（改为：导致流失率偏高，下单转化极低）

目标：页面改版核心以社交为驱动，丰富页面信息，提升用户建立社交概率。（添加：提升用户建立社交概率，从而能提升用户粘性降低流失率）

第一步：拉取数据（某一时间段，瞎编的基础点击事件埋点数据，看个意思就好）

△ 假的有点过分了，嘿嘿

第二步：进行梳理

先进行大纲梳理（以业务流程为主，梳理出主要问题）

△ 以用户直接进入个人主页举例

第三步：假设驱动即解决复杂问题时尽可能的先找到一个合理的假设。比如：刚进页面就流失，甚至停留时间都很短，那么你立马给出的结论是：

TA 真丑，不符合我的审美，严重 P 图。

第四步：找到用户做这类测试的时候，当然一定要去找玩游戏的用户且接触过陪玩的。用户找到-约时间-去用户能放松的地方-开始浏览该软件-进行定性测试。

第五步：汇总结果定性的方式有很多种：这里我举例一个「think aloud」：

使用 think aloud 的流程：

• 提前告知被测用户你需要边操作边思考并且说出来
• 记录被测用户的说话记录
• 分析文本，归纳问题分类
• 将分类嵌套至说话的文本中
• 计算统计结果
• 建议使用中位数测量

最后在经过数据分析得出问题的优化重点或改版方向。

补充一句，如果条件允许，使用卡片分类法，让用户自主的搭配，个人主页中功能位置。

小结：熟练分析话术，圈重点，找到核心的发力点。也能让思考过程更加结构化、可视化。不同的话术下，找到不同的方式，帮助快速解决问题，找准切入点和挖掘机会点和后续的跟进（要玩的流畅就取决于你的树结构的清晰程度了）。

拆解后的策略是什么？

策略其实在你分析的时候就已经产生了。

当然啦，我们是一个 team，当你产生策略的时候，需要和团队内共同讨论方案的可实行性。

如何去验证拆解结果？

1. A/B testing

进行原版和改版数据对比，重点/想改进的数据有没有提升/下降就好了。

AB 测试就是指把少部分用户分成平均的两组，其中一组用户体验网站改版的 A 版本，另外一组用户体验网站改版的 B 版本，分别记录清楚相关的所有用户操作数据以后再进行精确的比对，最后分析得出哪一个版本是用户最喜爱的。

2. 灰度

灰度发布则是指在新的功能上线以及没有上线之间能够保证新的版本可以稳定过渡的一种发布方法，可以在灰度发布的过程当中解决一些问题或者对新版本做出一些可以提高用户体验的调整，这是保证网站可以平稳更新到新版本的有效过程。

拆解流程如何优化？

• 没有捷径可走，只有通过不断的练习，你才能优化步骤流程；
• 如果全文看下来，对于词汇和方法没有问题的，你已经具备了优化，差的是熟练度；
• 这些都只是思路，并不存在百分百正确，在什么样的情况下，就选择什么样的方式。了解理论不代表知道如何实际运用，理论是基石，基石决定上层建筑。

文章来源：优设  作者：七月Xavier 

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

编辑导语：UI设计师在日常工作中经常会进行Banner的设计，Banner代指任何投放于线上的各种尺寸的广告图，在设计Banner图时，需要考虑到多种因素，内容、受众、效果等等；本文作者分享了关于Banner应用和交互设计，我们一起来了解一下。

Banner是每个UI设计师家常便饭的项目，聊聊banner的那些事。

banner翻译成中文是横幅或旗帜，为了体现产品的中心意旨，利用鲜明的内容去表达最主要的情感思想或宣传中心，从而给整个产品起到宣传的效果。

在互联网时代，banner被广泛应用在pc网页、app设计等互联网平台间，作为设计师做一张banner乃家常便饭，如何才能设计一张高质量的banner呢？

一、设计风格

创意新颖、风格贴切的banner能第一时间吸引用户眼球，有利于banner的触达，带来高效率的点击，创造更高的价值。

1. 素雅文艺型

关键词：文艺、气质、素雅、安静、格调。

画面大量的留白；色彩以高级灰为主，饱和度和纯度低，明度高；字体多采用衬线体，标题文案突出，辅助文案偏小，整体突出高级感；画面点缀多采用精细的线条。

2. 时尚高冷型

关键词：高冷、时尚、大气、品质。

色彩多以黑白灰；文字清晰简洁内容少；焦点主图很大，突出表现细节；画面精简，无点缀物。

3. 传统国风型

关键词：传统、中国风、意境、韵律。

画面采用对称式构图，文字排版有采用竖排；色彩上采用中国传统颜色，采用物体的固有色，避免艳丽刺激的色彩；字体多采用书法字体，书法主要分为篆、隶、楷、行、草五种书体；图形活用中国风元素，剪纸、灯笼、折扇、祥云、梅花、水墨等作为辅助元素。

4. 青春活力型

关键词：青春、活力、年轻、动感、时尚。

色彩饱和度和纯度高；排版多样性，视觉冲击力强；运用几何图形装饰在产品、背景、氛围装饰上。

5. 可爱甜美型

关键词：可爱、甜美、卡哇伊、Q、呆萌。

色彩鲜亮透明，营造软萌可爱的感觉；字体采用少年字体、手写字体、卡通字体；点缀元素多使用卡通小元素。

6. 促销活动型

关键词：促销、活动、节日、热闹。

画面整体氛围热闹，内容饱满，很少留白；色彩丰富，红色、黄色、橙色、紫色偏多；主标题文字偏大，字体刚硬，视觉冲击力强，点缀元素有光效、舞台、五彩的渐变、冲击性的线条或多边形等。

7. 未来科技型

关键词：未来、科技。

科技类banner，文字和背景图非常具有科技感，画面具有空间感；色彩以冷色调为主，常见有蓝色、紫色、黑色；点缀元素有光效、金属、线条、光点。

8. 手绘风格

关键词：场景、趣味、手绘感、扁平。

画面具有故事性和趣味性；色彩扁平的配色，上色没有高光和阴影；字体偏向年轻化，圆润、无衬线体字体；点缀元素以涂鸦的小装饰为主。

二、设计流程

1. 创意监控

1）创意监控

产品在用户心中需要良好的正面形象，banner传播对内容需要进行严格控制，把握好政治导向关、价值取向关和格调品味关。广告内容需真实准确，不引起歧义。

2）情景约束

用户体验产品需要有愉悦感，banner需呈现积极阳光的正面情景，素材图片传达正向的情绪和氛围。

3）版权约束

避免法律纠纷，图片素材、文字等内容应该要有版权，banner中不使用来源不明的字体、图片、视频等素材。

2. 前期沟通

1）确定文案

文案尽量简洁明了，用词准确、文案通顺、语言生动。用词准确是最基本要求，活动、权益、业务表述文字内容符合业务方需求，无错别字。文案通顺、表述清晰，适合产品目标群体阅读与理解。语言生动、精简、有吸引力，集中核心诉求点，亮点突出。

3. 设计执行

1）板式

排版结构：

banner由多元素组成，banner内在包含：色彩、构图、风格等，外在包括文案、产品配图、背景、点缀这几个部分组成，设计过程通过拆分一步步执行，思路清晰且效率高。

构图方式：

对齐构图

画面中相关内容遵循对齐原则，便于用户视线快速浏览，接受重要信息。常见的对齐方式左对齐、右对齐、居中对齐，建议banner中只使用一种对齐方式，多种对齐方式用户阅读视线分散，增加用户认知成本。

聚拢构图

画面内容拆分为文字区、图片区、氛围区，相关内容聚集在一个区域，其次聚焦一个视觉重点，弱化其他元素，视觉出现层级。

留白构图

根据产品页面留出适当的安全边距，保证banner在适配过程中不会出现重要信息看不全的情况。排版时，元素之间需要留出空隙，画面看起来有透气感，减少用户认知信息的负担。

降噪构图

色彩、文字的种类不宜过多，点缀图形运用不合理，会分散读者注意力，成为用户阅读的“噪音”。

重复构图

排版注意整体设计的一致性和连贯性，避免出现不同类型的视觉元素，使画面出现跳跃。

对比构图

banner中重点信息加大与周围元素间的视觉差异，通过颜色对比、字体的大小字重对比、构成的面积对比等方式，以便于用户快速获取重点信息，丰富banner的视觉层级，吸引用户。

构图样式：

对称构图

通过对画面的平均分割保证画面的平衡，对称构图给人有力、稳固的视觉感受。

居中构图

居中构图很好的突出主题，画面中规中矩，活跃感较弱；用户视觉焦点会聚集中心位置，视觉焦点需要重点刻画，周围元素弱化处理。

左右构图

左右构图分为2种，左文右图、左图右文。2种构图样式，区别在于用户的浏览过程中是先看文字还是先看图片。

当配图示意不明确时，建议使用左文右图的排版。

配图主要是根据文案内容绘制的辅助图形，用户只看图无法明确活动内容，建议采用左文右图的板式。根据“F形”阅读模式，浏览习惯往往从左向右从上往下，将文字信息放在左边有助于用户快速浏览，获取重点信息。

当配图示意明确，图比文字更加重要时，建议使用左图右文的排版。

用户根据图片即可明白活动内容，运营或业务方希望有吸引力的活动图片获取用户的注意力。

衍生构图

基于banner受限尺寸和高度，会衍生出一些构图方式，例如放射性构图、倾斜构图等。不规则的构图，设计上具有层次感，丰富的视觉呈现给人眼前一亮，更容易吸引用户眼球。

构成比例

banner大多为左右排版，图文比例4:6，接近黄金分割比例0.618，文案标题比例约2:1。画面中文案占比一定要大于配图，用户更关注是是内容本身。

2）配色

色彩体系：

暖色系

暖色系主要由红、黄、橙等构成的色调。容哟联想到阳光、火焰、热血等场景，给用户积极、活泼、温暖的感觉。暖色系色彩的饱和度越高，温暖属性越突出，用于电商活动，渲染气氛。

冷色系

冷色系主要由青、蓝等构成的色调。容易联想到海洋、冰雪等场景，给用户寒冷等感觉，适宜表现恬静、低沉、严肃、理性的内容，比如科技类产品。

同色系

同色系又称单色，这种色系的搭配在产品本身颜色比较统一的情况下，提取产品邻近色，作为画面的搭配色，让整体画面变得统一和谐。

类似色系

类似色相比同色系，它具有丰富性和可变化性，基于banner整体的主色调以后通过添加与主色相近的辅助色，是整个画面变得丰富活跃起来，同时这些配色方式也相对容易。

对比色系

对比色系，色相环上相距120度-180度之间的2种颜色（180度则为互补色），对比色之间的搭配能够给画面带来华丽、跳跃、浓郁的视觉美感，高纯度、高明度、等面积的搭配，会产生强烈的刺激感，干扰用户视觉体验。画面中往往会考虑补色之间的面积比例、纯度比例、明度比例、空间间隔的比例，平衡画面之间的视觉感。

创新配色

除了基本的色系配色系外，还可以尝试更多的配色风格。画面中有目的地运用色彩元素，丰富画面的色调。

色彩比例：

banner色彩需要考虑页面统一性；banner尺寸较小，信息色彩不宜过多，2-3种即可。画面主要由主色、辅色、点缀色组成，色彩的黄金法则60:30:10的法则，60%左右的主色、30%左右的辅助色、10%左右的点缀色。

3）字体

字体类型：

无衬线体

粗的黑体，具有官方严肃气质，自带有力量感，视觉冲击强烈，与速度线条、碎片、划痕等设计手法十分搭配。细的黑体，具有年轻、简约、细致的感觉。无衬线体易读性较强，常用于科技类banner中。

衬线体

衬线体装饰性较强，给人带来活泼、轻松的感觉。比较适用于文化、文艺、美食、女性、时尚等行业。

圆体/卡通字体

具有趣味性和活泼感，适用于儿童、宠物类、休闲食品、家居等行业。

书法体

有韵味和艺术感，视觉张力丰富，适用于中国风、艺术感等画面。硬笔书法字体：优雅、有亲切感，适合传统、文化等画面。

字体样式：

考虑字体大小、字重、颜色。文案有主文案和副文案之分，需要有对比性。字体的颜色选择需要考虑与背景色的搭配效果、banner主题间的关联，选择合适的颜色能凸显文案。

4）辅助图形

几何图形：

几何图形是banner设计中常见的辅助元素，它的多样性和简约性设计师十分着迷。几何图形可以创作无线的可能，用户对其有意无意地进行自我诠释。

圆形

圆形象征着圆满、融合、自然、和谐、无穷，在设计中具有非常强的包容性，由于其自身的可拓展性，将圆形进行拉伸、叠加、重复可获取丰富的图形。

三角形

三角形具有方向感、变化感，它的锐利给以垂直、刚强、庄严、向上的感觉，其长度有穿透感，象征崇高和无限。

方形

方形具有对称、有序、平静、专业属性，给人稳定安全统一感。

多边形

多边形的形状会给人带来稳重感，通过多边形凸显产品的尊贵感。

不规则图形

不规则的图形营造画面的氛围，突出主体元素，激发用户点击欲望。

流畅的线条：

流畅的线条给画面带来韵律感。

立体几何图：

立体几何载体让整体画面格调显得品质高。

5）动效

展现商品质感和工艺或者展示同商品不同状态时，动态banner比静态banner点击率高。呈现商品多样性和系列感需要静态广告。

4. 审核

1）传达

呈现出来的画面鲜明地表达活动主旨，文案内容，可用性。

2）美感

板式设计、配色、字体设计、风格、插图、点缀图案以及动效这些运用是否合理。

3）效率

整体复杂程度，后期banner修改和加工工作难度，可不可重复利用。

4）创意

画面主题是否突出，具有吸引力，刺激用户点击。

三、设计应用

1. 轮播banner

现实中多是单张banner图，而互联网产品中大多采用多张轮播banner。有限的屏幕内采用多张轮播提高空间的利用率，其次用户长时间盯单一广告会疲惫，轮播banner有利于吸引用户注意，激发用户探索欲望。

2. 胶囊banner

电商产品用得比较多，全圆角矩形或不规则矩形，此类banner运用在促销活动中，实效性特别强。

3. 白底banner

运营强度较弱，banner在页面权重较低的专题活动会用到白底模版化banner。排版左文右图，内容由主标题、副标题和小插图组成，例如支付宝首页中间位置banner。

4. 悬浮banner

需要吸引用户来参与运营活动，可以采用悬浮图标的形式，吸引用户的注意力，对页面布局不产生影响。

5. 广告组合

用于产品中同一个功能模块，多个不同入口，或者不同服务类型的商品入口。商城或者热门板块使用。包括：两个入口、三个入口、四个入口、五个入口、六个入口。

四、交互设计

1. 交互需求

1）功能

banner在页面中所承担的责任是什么，活动运营、功能区入口、系统公告、还是第三方广告。

2）数量

banner位置所承载内容数量是多少，同时存在几个内容。

3）频率

banner采用的是静态banner还是轮播的方式。固定banner多久更换一次，轮播形式的banner，几个banner轮播，轮播的速率是多少。

4）层级

banner在页面中与其他功能区相比，banner位所属的信息层级是什么样。

2. 交互思考

1）静态/动态

静态banner。如果内容中有一个非常重量级的，其他的都是差不多的不怎么重要的，可以考虑只将重量级内容放在显眼位置的Banner上，且静态不轮播，其余内容放在别的运营位里。

动态轮播。轮播banner图注意帧数不宜过多，加上轮播指示器，提示用户banner的个数以及banner可以左右滑动。

2）尺寸

屏幕占比大的banner有更强的营销感和氛围感，常见电商平台的顶部banner。

屏幕占比小的banner会低调些，不会干扰用户阅读浏览页面，例如金融类平台。

3. 设计输出

1）图片大小

保证产品启动加载时间和操作流畅，上传广告图的大小建议在300kb以内。

2）图片格式

输出的格式：JPG、PNG、JPEG、BMP、GIF。

文章来源：人人都是产品经理  作者：界白

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

随着这几年电商行业的飞速发展，国人年轻一代审美不断提升，对设计的要求自然不可能停滞不前，更多的是注重品牌、平台属性、差异化、用户体验等。回顾最近两年优秀的电商设计案例，我们尝试总结一下2021年电商设计的重点和方向。

文章来源：优设  作者：美工美邦

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

本文从详细问题反馈分析及分类、体验问题价值优先级评估、意见反馈体验问题价值优先级评估等方面，帮你学会整理反馈意见。

文章来源：优设  作者：vv酱•-• 

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

本文从详细问题反馈分析及分类、体验问题价值优先级评估、意见反馈体验问题价值优先级评估等方面，帮你学会整理反馈意见。

文章来源：优设  作者：vv酱•-• 

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

一、设计体系的三层一环结构

下面是我提出一个VGLT-MO三层一环结构，帮助大家理解设计体系。

• 愿景与原则（Vision & Principle），它们作为设计决策的参考，指导前行。
• 指南（Guidelines），包含样式指南（Style Guideline）、模式指南（Patterns Guideline)、内容指南（Content Guideline）等更多通过文字和图像进行传达的内容。
• 库与工具（Libraries & Tools），包含组件库（Components Libraries）、工具包（Toolkits）、协同工具（Collaborative Tools）等可以直接进行使用的内容。

包围着这三层内容的一环是管理结构（Management Structure）与组织流程（Organization Process)，它促进整个设计体系成为一个活的生态系统。

我曾参与过国内某知名企业的设计体系建设过程，遇到了很多困难，但也收获了更多的认知，了解到不能怎么做和应该如何做，进一步促成了本篇文章；因此我试着搭建出设计体系的通用结构，并且文章后面阐述其中的价值和如何去构建设计体系。

二、设计体系的原则

系统规则影响系统行为，稳定的设计体系结构促进产生稳定的设计体系，关于设计体系的原则我将其归结为以下4点原则：

1）形式上，通用却灵活

设计体系是独立存在于现有业务外的，用可预测的规则进行构建和管理，指导方向一致性，而非每个人独自开脑洞。

但是规则并不是限制，当指导不足以传达更佳的用户体验时就通过体系机制的设计，即时迭代设计体系。

设计师可以更快地完成原型和迭代工作，因而更加灵活地去思考满足需求的解决方案。

2）关系上，整合但互通

整合设计与开发，链接设计与实现的代码，有效地将体验的设计与落地的开发相结合；但又通过独立化的模块设计以及模块间关系的设计，搭配良好的机制和协同工具帮助使用者更流畅地使用。

3）组织上，开放共享且跨域同步

通过组织流程的设计让基于模块化设计思维的组件、设计模式、内容策略等等能被尽可能多的人重复利用，提高知识复用率；并让关于用户的知识在组织中的设计师、工程师、产品经理、市场营销人员等人中保持同步和流通。

4）成果上，协同而一致

通过良好的开发体验，用设计开发的规范化指导，让大范围的开发与设计都能良好地匹配用户心智模型和多设备多平台需求，带来优质且统一的产品价值传达和用户体验实现。

除了创建更高的可用性（Usability）之外，也能建立更高的可访问性（Accessibility），让体验在如障碍群体、各类配置低下的设备、有法律与文化的国际差异等在产品多次迭代中也能更易达成一致（这些往往是较少被考虑到的内容）。

三、不同设计体系的差异

不同组织和产品的设计体系都会不一样。

设计体系有不同规模（Kholmatova，2017），简单来说可以分为平台级设计体系（如Apple的人机交互指南HIG, Microsoft的流畅设计体系FDS）和公司级设计体系（如Atlassian的Atlassian设计体系ADS；Salesforce的闪电设计体系LDS，Adobe的Spectrum），如蚂蚁金服的Ant Design等）。

设计体系的开放程度不一，而且有些设计体系并不对外开放（如Airbnb的设计语言系统DLS），而微软的流畅设计体系则是全程开放。

我们可以从实践规则（严格/松散）、构造方式（模块化/整合化）和管理机制（集中式/分布式）（Kholmatova，2017）。

任何组织都能在其中找到合适的定位，有些设计体系极为严格，而有些反而得益于其松散性与灵活性；如Airbnb的设计体系整体上更为严格，拥有详实的设计规范文档、设计与开发有精准的同步流程、拥有严格的新模式入库流程，详实全面的设计文档等；通过内网进行使用，并开发一系列的插件工具促进设计与开发流程。

而TED只有两名 UX 设计师和四名前端工程师专职负责设计体系相关工作，因此就更稍显松散；不同的程度都是和自身组织的团队文化和产品特征有关的，他们更加关注有效地实现产品设计目标。

“我们鼓励以正确的方式进行设计，而非一味强调一致性原则；页面的性能表现对于我们来说更为重要，如果它无法有效地承载内容，我们会将其修改到能够承载为止；一致性与模式化的信条对于我们来说无法成为驱动设计决策的关键要素。”——Michael McWatters，TED UX 架构师

是标准化还是松散化，更多依靠组织文化下的选择。它们各有利弊。一个紧凑严格，利于精准，但有时较为死板，会限制设计师进行创造发挥；一个灵活适应，利于拓展和快速变更，但难以控制，它们都需要找到解决自身缺陷的方法。

关于模块化还是整合化，我们可以根据各自适应的产品特征进行抉择。

例如模块化方式适用于：

• 需要扩展与进化空间；
• 需要适应不同类型的用户需求；
• 需要大量的可复用部件参与构建；
• 需要多个团队同步并行地参与构建。

典型的例子包括电商产品、新闻类产品、在线教育平台、金融平台、政府信息平台等等。

而整合化方式则适用于：

• 面向一个特定目标进行设计的；
• 无需具备扩展性与适应性；
• 需要在体系范围之外进行风格探索的；
• 部件复用率较低的；
• 一次性的。

典型的例子包括创意展示类页面、一次性的运营活动页面、作品集等等。

当然有许多不同的特质让每个设计体系各不相同，关键的是，我们如何找到适合的定位；而关于管理方式上的划分，我将在第4章-如何构建设计体系中进行更多详细的论述。

四、关于设计体系的认知误区

知道设计体系是什么，更需要了解设计体系不是什么。

关于设计体系有一些误区，例如：

设计体系是设计规范（Design Guidelines）吗？

许多人都会将设计规范与设计体系相提并论。但实际上，他们并不是一个层级的东西，或者更准确的说是设计体系包含了设计规范。

设计体系是模式库（Pattern Library）或组件库（Component Library）吗？

模式库的建立在设计体系内，而模式库是记录和共享设计模式的工具，只是设计体系的工具化和显现化的部分；像Bootstrap这样的工具包不被认为是设计体系，因为它们缺少一些定义设计系统的重要元素:模式库、风格指南和设计语言。

设计体系是否会扼杀组织内的创造力？

不好的设计体系当然会，但好的设计体系往往会通过机制和流程，促进实际的创造力，因为来自终端的良好的解决方案可以更快被整个组织所采用，而不必担心那些即将沦为沉没成本的过往设计与技术资产的限制。

设计体系是一劳永逸的吗？

设计体系是动态的，永远是随着组织需求和用户需求而变化的，一切说自己已经完成了设计体系的建设的人都是将静态的设计规范曲解成了设计体系。

文章来源：人人都是产品经理  作者：龙哩个龙

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

编辑导语：设计在产品中日常可见，但设计体系从何而来？很多时候，我们可以基于一套架构严谨、规则统一的体系框架，对产品表现层面的设计工作可以逐渐实现模块化运作；本文作者分享了关于设计体系的整体详细介绍，我们一起来了解一下。

——WHY 为什么？

设计体系从何而来，为何出现？设计体系如何发展到现在的样子？

——WHAT 是什么？

设计体系是什么？不是什么？关于设计体系有哪些误区？与设计规范、组件库、模式库的区别是什么？有哪些现存的设计体系？

——HOW 如何做？

如何搭建自己公司的设计体系？

——FUTURE 设计体系的未来如何？

这篇文章有大量我的个人理解，因此难免出错或是不准确的地方。

国内设计和前端界对Design System主要存在两种叫法，设计系统和设计体系。

看看百度词条对两个词汇的解释：

系统，来源于古代希腊文（systεmα），英文为system，日文音译，后引为中文，即形容若干部分相互联系、相互作用，形成的具有某些功能的整体。
体系，英文为structure，泛指一定范围内或同类的事物按照一定的秩序和内部联系组合而成的整体，是不同系统组成的系统。

要了解Design System，首先就得了解到它一定不是一堆UI组件，不只是设计师的事；如果称Design System称为“设计系统”，则是把它当成“产品”存在了，过于静态，失去了人之间的联系，但恰恰是人之间的联系才能促成优秀设计体系的生成。

因此尽管原英文单词不同，但依据实际表达的意思，本文偏向于认同“设计体系”的名称，相信你读完之后也会认同这样的叫法。

一、设计体系的涌现：适应组织的需要

目前来说，设计体系尚未出现清晰的定义，我们可以看一些设计体系的专家的定义：

“由明确的标准指导的可重用组件的集合，这些组件可以组装在一起以构建任意数量的应用程序。”——Will Fanguy（2017，inVision设计体系专家）

“一组相互关联的模式和实例的共享，通过将一致地组织它们以服务产品目标。模式（Pattern）是我们用来创建界面的重复元素：如用户流、交互、按钮、文本字段、图标、颜色、排版、微复制等；实例(Practices)是我们在团队工作中如何选择创建、获取、共享和使用这些模式。”—— Alla Kholmatova（2017，著有设计体系：数字化产品设计的系统化方法）

“由个人、团队或社区记录和发布的视觉风格、组件和其他的库，以作为代码和设计工具，以便采用产品可以更加高效和有凝聚力。”——Nathan Curtis（2017，设计体系咨询专家，帮助多个企业搭建设计体系）

在本文综合的理解下，我试着为设计体系下了更加清晰的定义：

设计体系（Design System，也可以叫设计系统）是可重用组件的集合，由清晰的标准引导，通过机制化的组织流程和具象的指南与工具加以整合，以帮助开发者（设计、工程等）高效且一致地创建大量的应用，并且动态地确保用户体验的一致性。

如果你之前不太了解设计体系，可能现在有点懵，没关系，相信读完我这篇文章，你一定就能了解。

二、小故事：一个按钮的旅程

试想一下，现在你现在是UX设计师A1，我们现在因为某项用户需求或业务需求需要处理。

1. 那么最开始我们需要考虑是这个需求用按钮还是用其他解决方案解决。最后我们决定了使用按钮的方式。
2. 然后再考虑一些视觉因素，例如框线、背景块、描述、颜色、阴影、字体等元素，每个因素都需要考虑一遍……
3. 再考虑页面中的位置关系，在页面靠左还是靠右？与四面保持多大间距？……
4. 再加上互动因素，悬停的时候、点击的时候、选中的时候、不可用的时候，再加上后续结果是跳出弹窗？打开新页面？还是仅仅是页面的小变化？……
5. 嗯，不错好像设计做完了，评审一下，大家似乎都同意了。然后交给视觉设计师C1处理视觉。差不多之后，再交到前端工程师小B1手上，啪啦啪啦敲一堆代码，好像实现了。
6. 验收的时候又发现和最初设计并不一样。前端怪你某个标注没做清楚，然后就又拉着前端改改改……
7. 如果又要做个按钮，设计师A2与工程师B1之间又如何进行设计连接？工程师B2如何快速修改工程师B1的代码？他们与组织中其他的设计师AN和工程师们BN又如何连接？……
8. 又到某次软件需要版本升级，需要对按钮进行统一的改色和调整，不过之前的几个前端到换到其他部门了，新的前端工程师B3发现软件中的按钮，尽管都是按钮，但代码都不相同，他花了非常多的时间找到了各个按钮的代码并逐一进行了更改……
9. 而这些仅仅是一个按钮，如果再加入表单、选项卡、标签栏、搜索栏、树形控件等等组件……停停停，已经脑溢血了。

尽管A1设计师和B1工程师的自己的习惯可能类似，但由于参与人数的增多和任务量的增多，每个人都有自己的见解与习惯；考虑这一个按钮中的每一种元素，回忆一下数学中的排列组合问题，最后将发现同一个问题的解决方案的组合情况将会产生成百上千甚至万种可能，而这里很多都是重复工作。

怎么办？我们需要定义明确清晰的规则，让不同的人都能为统一问题达成相对一致的解决方案处理，即达成设计工程化。

设计体系便是一种解决办法。但尽管是叫“设计体系”而不是叫“开发体系”，但这并不意味着这只是设计的事情；因此接下来，我将谈谈设计体系是如何诞生的。

三、源起何处？——应对组织的挑战

上面的故事已经从侧面体现出，当业务与用户的需求迫使组织面对一系列的问题，迫使企业需要探索合适的解决方法。

总的来说，设计体系的出现便是用来应对组织在敏捷、协作和债务处理等方面的需求。

——敏捷响应需求：在多设备、多平台的现在，组织不可能选择每隔几年再更新一个全新的数字产品，因为这意味着在交互上用户需要重新学习，在战略上这种方式的不确定性因素过大，如果失败就意味资源的大量浪费。

就特性而言，数字产品不同于实体产品，往往需要尽快上市，最小成本检验，尽快迭代，以获取更强的竞争力，而且以往写的代码也不会被磨损，需要定期进行维护；因此这些便对组织满足用户体验的速度做出了要求，因此更多的组织逐渐采用如等以敏捷（Agile）和精益（Lean）思维为基础的敏捷开发（Scrum）、设计冲刺（Design Sprint）等方法。

——复杂的协作鸿沟：对用户来说，只需要点击升级便可获得最新的体验，但这意味着这种体验的即时在线化将体验迭代的简单交给了用户，而复杂就留给了组织；UX设计师、前端工程师、产品经理、内容策略师们、可访问性专家等等组成的组织结构和工作流程都需要得到适应性的改变，才能提供快速迭代的流程去完成版本管理、设计管理、债务管理等工作？

Alex Schleifer（Airbnb设计副总监）也提到这样的情况：虽然工具的提升帮助编码的速率和设计的效率都在提升，但最终使设计生效的是多方面的协作的结果，然而原有方式越来越多暴露出在跨学科沟通上的问题，这些依然阻碍着产品创新以实现更佳用户体验的效率。

——债务大量累积： 这里的债务不是指经济上的债务，在设计上，由于设计人员的个体差别和缺乏系统性机制促进设计经验沟通，设计往往在长期的开发过程中提供了许多定制化的解决方案；在UI上可以体现为不同样式的按钮或颜色等、UX上可以体现为同一软件上的交互逻辑混乱等，这造成了设计债务（Design Dept）。

而技术债务（Technical Dept）亦是如此，为同一个问题，不同的工程师使用不同的代码或是令牌标记，加大了代码设计与维护、拓展的难度；同时，我认为其中还存在一个债务，我将其称之为产品债务（Product Dept），不同类别的产品经理等负责产品定义等职能的人员为同一产品或业务功能提供了不同，但效果相似的产品解决办法。

而且无论你是互联网公司，亦或是传统产品公司，越是庞大的体系，人员就越细分，在整体设计上的知识就越分裂，就越有可能出现同一问题多个定制化解决方案的情况，这会让出现在工程、产品、设计上的债务就越庞大。

这些设计、技术、产品债务让管理、维护都异常艰难；而且只要审视一下我们日常工作的周遭，就会发现债务其实无处不在；那些杂乱的视觉形象应用、那些不统一的工业产品材料与色彩、那些无准则的交互行为、那些不一致的反馈声音、同一数字产品不同的功能模块定义等等……

时至今日，设备和用户的多样性都在激增，以往的标准、工作流程和基础设施都难以支撑；我们用设计和开发应对的问题越来越多，变化也越来越多，但我们一直在定制化和通用化之间无序游离。

可以在一些软件中看到同样的一个功能按钮出现十几种形式，而它们要解决的问题却几乎一样；也可以看到那些拙劣的设计规范中，万物归为一种单调样式，降低了开发成本，却带来用户认知的困难。它们都难以维护，极大地阻碍了组织创造体验、达成商业可持续和创新的效率。

四、组织的应对？996还是一劳永逸？

面对着这些问题，公司只能存在几种选择（Suarez等人，inVison）：

• A-不改变速度雇佣更多的人（通过内部雇佣或业务外包）；
• B-提升员工设计与开发的速度（个人能力的极致压制，996、007）；
• C-改变工作的方式，创建通配式的解决方案，提高设计与代码复用率以提升效率（如模块化）。

大部分组织为了满足快速发展的需要，往往更多采用A和B的方式（例如各种各样的业务扩充，产生了大量对工程和设计人员的需求，如阿里、网易、字节、美团等）。

但提升人员，仍然不能解决定制化方案的拓展问题，仍然存在大量不可复用的方案，造成效率的浪费；好比毒素累积，治标不治本，当达到足够的毒素累积之后，创新将寸步难行。

如果不首先创新构建方式，就无法创新产品，这是非常简单的真理。——Alex Schleifer（Airbnb设计副总监）

虽然组织内也一直在提升效率，但管理只能提升局部效率，工具才能带来系统的变革。

设计体系的提出并不只是为了解决用户体验的问题，而是适应组织内的开发需求。而通配式解决方案的方法则更具系统性、远期性。这便是设计体系的源头，模块化（Modularity）是一个关键词。

五、设计体系的发展历程

早在福特的时代，“流水线”思维就将生产流程模块化进而提升生产效率和生产一致性，形成大批量的工业化时代，形成了强势的美国汽车工业；二战之后，20世纪60年代，丰田作为日本汽车制造商的一分子运用精益生产的小批量生产方法，注重发掘工人的创造力，即时解决问题，响应需求，降低远期浪费。 (E Ries, 2012)

回到软件开发上来。20世纪60年代，越来越多组织发现软件发展的速度已经跟不上硬件的升级，软件开发越来越容易缓慢、难维护且容易出错。在开发上，预算超支、超时运行，在使用效果上效率和质量都很低下；在运维上，不符合要求、难以维护管理代码，容易造成软件无法交付。

硬件与软件之间的差距以及解决这个问题而造成的困境，软件危机（Software Crisis）便出现了。

没人能对这些问题视而不见，开发者与设计师的先驱们开始探索解决方案。

1968年，第一届北约软件工程（NATO）会议上，道格拉斯·麦克罗伊（Douglas McIlroy）提出了基于组件（Component-based）的开发方法，通过复用代码来提高编程潜力的方法，减少编程的工作量，同时能帮助编程工作更高效、更易于扩展且灵活，提升软件开发速度；因此这被认为是有可能是解决“软件危机”的方法之一，这种方法可以算是早期的设计体系的基础雏形。（软件危机&INvision）——维基百科，关于软件危机的描述

而在设计界，也有先驱提出了类似方法。1977年，Alexander等人通过其书A Pattern Language，提出了模式语言（Pattern Language），期望用系统化的方法解决设计建筑、城镇和建设方式的问题，帮助形成一种实现为250多种不同类型建筑的持续性方式（Koivisto，2019）；这种语言通过共享共同的模式，用共同设计的方式将更多人纳入设计过程。

如果每个模式都是解决共同的问题，那么当面向同样的问题时，用模式等方式快速应用以前的解决方法将可能是高效的工具；这里的模式（Pattern）便是用户界面设计中的循环解决方式，模式库是特定用户界面上重复设计元素的集合。

在网页开发时代，网页设计师用基础的网页架构就能搭载数以万计的页面。

21世纪初，YUI和jQuery UI等库的引入，为开发人员提供了一套小部件和模式的工具包，以创建更一致的网站用户界面（Forst, 2016）（例如Bootstrap是Twitter开发的基于网页解决方案的前端工具包，供设计师和开发人员使用）。

但这些方法也会些有优有劣，例如Mary Collin就曾对使用Bootstrap开发的网页进行综合对比，结果发现Bootstrap容易导致成果缺乏独特性，看起来外观非常一致；但在另一方面，在移动端响应性和拓展性方面效果很不错，因为足够稳定。

Mary Collin的一些网页对比

在现代，互联网兴起，尤其是移动互联网的兴起，降低了信息分发与复制的边际成本和提供了庞大的用户量；即时在线的网络为数字产品的测试和快速迭代提供了可能，良好的用户体验能为企业创造的价值将远超传统时代，体验的重要性迫使数字产品不得不用更快速的升级换代过程满足用户需求。——（俞军，2020）

但规范或库本身是静态的，依然具备过多的不确定性，并且缺乏对开发全链路的支持，尤其是未来的每一次的设计如何决策。

因此进一步，一些通用设计资产(Design Assets)被逐渐固定下来，并辅以使用的规则描述，设计模式（Design Patterns）逐步形成，为协作而生，通过为重复的共同问题快速生成解决方案，并尽可能在整个组织内保持一致以提升效率。因为类似的原因和目的，也同时产生了例如样式指南、设计语言、内容指南、甚至是品牌识别系统等等类似产物。

在软件开发问题上，设计规范和设计模式成为内部设计师们依靠复制粘贴进行传播的文档，亦或是前端工程们网上开源共享的模式库（Pattern libraries）或组件库。

与设计模式不同，模块化设计（Modular Design）引入了敏捷设计方法的思想；建立在以前的基础上，让解决方案的更快、更短的迭代，前端框架是提供特定解决方案和特定外观和感觉的工具”（Frost，2013）。

框架本质上是模块化的，它们专注于单个项目或设计问题（Frost，2013）；对于多个设计问题，框架、模式库或模块化设计本身不足以系统地使用，这样的背景下，便迎来了设计体系的涌现。

六、大量涌现的设计体系

2013年，Brad Forst提出了原子设计（Atomic Design）理论为设计体系的出现奠定了一波理论热度，提供了更加形象化的描述说明；这让更多人意识到这些问题的存在，并且提供了易于理解且广泛传播的理论基础和解决方案。

Brad Forst，原子设计（Atomic Design）理论

原子设计理论将交互元素似化学因子一般逐步拆分。

• 在最底层级是原子（Atoms，例如按钮、图标的最小组件等）;
• 原子构成分子（Molecules，分子由两个或多个携带自身属性的原子组装而成，并形成更实质性和功能性的组件，例如由表单标签、输入和按钮组成的搜索表单）;
• 分子组成为有机体（Organisms，分子和原子组成的更大组装体，是界面的一部分，如导航栏或标题）;
• 再组成为模板（Templates，将原子、分子和有机体等相对抽象的属性放入情境中，接近最终解决效果，但更关注底层页面结构）;
• 最后这些模板在设计师和工程师的协作下，变成实际的页面（Pages）。

这是一种逐步拆分式的模块化方法。

他建议用模式库（Pattern Library，也被称为用户界面库、组件库、资产库等）集合构成用户界面的可重用组件，并通过指南（Guideline）指导如何创建，以进一步综合了风格指南、流程指南、设计语言等等设计指南；包括他之内的几位设计体系先驱都提出要进一步整合领域内语言，开始更多地使用设计体系（Design System）这样的语言来代表类似的事物。

理论如此，实践永远不会落下。互联网的广泛普及带来用户需求量爆炸，对公司来说，越来越多的业务量压力和一致的体验需求的迫使下，越来越多的企业推出了自家的设计体系。

2014年伊始，Google推出了质感设计体系（Material Design System），类似的时间前后Atlassian搭建了Atlassian设计体系和Airbnb也在内部搭建设计体系（即后来的设计语言体系，DLS，Design Language System）；在此之后，一系列公司跟进开始研究和开放自己的设计体系。

例如Apple的人机界面指南（HIG），Microsoft的流畅设计体系（Fluent Design System）、IBM的碳设计体系（Carbon Design System），Salesforce的Lightning设计体系、Shopify的Polaris设计体系,甚至一些英国、美国、澳大利亚等公共部门也推出了自己的设计体系，如英国政府的GOV.UK设计体系。

而在国内，搭建的比较完善的有知名的蚂蚁金服Ant Design设计体系，还有Element，以及View UI等中台设计体系，以及许多存在于部门内部、仍然只是设计规范、或者设计体系不完全体的内容。

——插个题外话，微软的流畅设计体系（Fluent Design System）是我这篇文章最开始的起点，从简单论述微软如何统一用户体验聚焦到流畅设计体系。

当然关于Fluent Design System的更多内容，我会在本系列文章之后，单独出篇文章描述我的发现【稿子都差不多了，写着写着就写成了设计体系系列文章哈哈】。

我们现在知道设计体系是为了什么了，但在现在的阶段，问题不是能搭建什么，而是如何能更好地搭建。

“体验工程的建设已经远远不止于一套设计规范或一套组件库，他需要一套完整的系统来支撑，解决内部协作的一致性问题，解决设计系统更新的周期性问题，解决一群设计师与工程师如何规模化的生产各种业务 UI 的问题，从而最终解决用户体验一致性的问题“——Alibaba Fusion Design

文章来源：人人都是产品经理  作者：龙哩个龙

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