历史长廊

在早期，硬件设备落后，网页使用的是绝对静态布局为主，绝对固定宽度的布局被称为是静态布局（StaticLayout），也有叫固定布局（Fixed Layout）。

后随时代变迁，技术发展。因浏览器的增多，开发者们忙于兼容各种浏览器。在这个期间，实际已经有了针对各设备适配的解决方案，只是未成为主流，这种新布局方式叫自适应布局（Adaptive Web Design，简称AWD）。

在当时，大多指的就是宽度自适应布局。在这种新思想下，又出现了两派的具体解决方案：百分比宽度布局和流体式布局（Fluid Layout）。

在当时，大家都还没有响应式布局的概念，但此时出现了一个新的词–渐进增强。渐进增强出现后，另一个词优雅降级也随之出现了。这里只是举个典型的例子：gmail和qqmail。这两个都是百分比宽度布局，都属于自适应布局，但有区别。

qqmail就是css hack的完美体现，你用任何一个浏览器，几乎可以看到同一个样子的邮箱，为的是用户体验统一。gmail则使用了渐进增强，你的浏览器越新越强，你看到的效果就越好，为的是用户体验增强。再后来，Google发布了Android，移动互联网爆发，html5标准发布。

互联网大战从PC打到了手机。手机虽然屏幕变小了，但是却提供了更丰富的功能，用户要求不断提高，网站更加看重的是用户体验了，所以，谷歌式的渐进增强被广泛认可，结合自适应的思想，出现了响应式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。

描述响应式界面最著名的一句话就是“Content is like water”——无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。

现如今，为何需要考虑多设备的兼顾呢，依然是因为时代发展与生活方式的变迁：

• 即便是PC或Mac用户，有查显示只有一半的人会将浏览器全屏显示，而剩下的一般人使用多大的浏览器，很难预知；
• 台式机、投影、电视、笔记本、手机、平板、手表、VR……智能设备正在不断增加，“主流设备”的概念正在消失；
• 屏幕分辨率正飞速发展，同一张图片在不同设备上看起来，大小可能天差地别。结合自身产品用户访问浏览器分辨率
• 鼠标、触屏、笔、摄像头手势……不可预期的操控方式正在不断出现。

因此我们需要在了解基本布局方式的特征下，选择适合自身产品的布局实现方式。

布局方式对比

静态式、自适应、流体式、响应式布局，A+R混合布局的特点对比如下：

静态式布局：

窗口缩小后内容被遮挡时，拖动滚动条显示布局。不管在哪种设备，哪种浏览器上浏览都是一个样。移动设备上则显示太小或不全。

自适应布局：

用自适应技术(Adaptive)我们可以开发和提供不同的布局来为类似纯触屏或者混合触屏设备这样的一类具体场景提供最好的体验。

分别为不同的屏幕分辨率设备设计不同的样式布局，相当于多个静态布局组成的一个系列合集，每个静态布局对应一个屏幕分辨率范围，页面通过百分比自动适配设备屏幕分辨率和可视窗口大小，当可视窗口改变时，不会出现横向滚动条，UI，图片，文字会自动缩放，元素内容、布局、交互方式基本不变。

弹性布局：

以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果。

流体式布局：

属于自适应的一个子集，也是通过百分比自动适配设备屏幕分辨率和可视窗口大小，不同于百分比自适应的是随着窗口大小的改变，页面的布局会发生小的变化，可以进行适配调整，这个正好与自适应相补。

响应式布局：

如果从广义上讲，响应式布局实际上就是更好、更机智、更灵活的去实现自适应，他们都算是一种弹性布局。再通俗点讲响应式重在于「响应」它会随着设备属性（如宽高）的变化。

页面的设计和开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和删格、布局、图片、css media query的使用等。

狭义上讲，响应式网页设计指的是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

A+R混合模型布局

• R和A上的区别

当响应式设计在基于预定义断点之上用CSS或者JS调整布局和内容。调整方法提供基于用户代理和设备类型的预结构化模版。

他们之间主要的区别是DOM结构，当采用响应式思维开发时，HTML代码在各种情况下都会一样（除非你用JS移除某些DOM节点），而在自适应开发中我们可能会有不一样的代码结构和体验。

R采用流体＋断点，在断点之间，页面依然会随窗口大小自动缩放（通过fluid grid），直到遇到断点改变界面样式布局甚至内容。R一般来说需要在网页设计初期就开始（通常采用mobile first策略），所以旧的网站要做RWD很可能要完全重建。

A只在针对几种分辨率（如320，480，760，960，1200，1600px）进行优化，在断点之间的自动过渡比较少。A采用保留现有桌面网站（desktop version）而对于更小的分辨率做针对性的优化（适应），减小重构的成本。

两种设计思维都是有效的，需衡量在项目中有多少组件、复杂性如何以及是否存在一种体验是适合所有用户的。开发web应用时经常会用到响应式设计，例如通过自适应开发来构建定制化体验。

两种方法各有利弊，但是如果同时使用它们到底会得到什么呢？

• A+R模型结合了基于单个主要临界点的自适应和响应式方法。

混合式布局就是为不同终端设备的屏幕分辨率定义布局（适配各种尺寸的PC、手机、穿戴设备等等），在每个布局中，页面元素随着窗口调整而自动适配，混合了百分比、像素为基本单位的组合方式。可以把混合式布局看作是弹性布局、自适应布局的融合。

自适应布局、弹性布局、混合布局都是响应式布局方式的一种。其中自适应布局的实现成本最低，但拓展性比较差；而弹性布局与混合布局效果都是比较理想的响应式布局实现方式。

很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能是保持简单轻巧，而且同一断点内（发生布局改变的临界点称之为断点，后面内容会讲到）保持统一逻辑。

否则页面实现太过复杂也会影响整体体验和页面性能。一般通栏、等分结构的布局适合采用弹性布局方式，非等分的多栏结构布局则需要采用混合布局的实现方式。

选型

如何考虑实践过程中的判断呢。一是看应用场景，二是看如何设计“响应式”方案。简单、轻量的页面直接用media query实现响应性就很好。比如blog、小型企业站之类。现在的CSS框架基本都具备响应性。

但请注意响应式不仅仅是响应式布局。对于大型站简单用media query是远远不够的。于是在同一个controller层上，识别UA，渲染不同版本的模板，组合相应的静态资源。这也算是响应式。开发及维护成本明显提高。

当各个版本间的差异很大时，维护成本很可能会大到无法接受。即便分开做，架构上也要调整，后端服务化，应用层app化。

根据不同公司的技术特点，调整的成本也难讲是否可行。对于大型站，分开做更清晰，同时用响应式组件解决复用、功能同步的问题。总之，根据场景响应式可以从各种层面，各种粒度上做。这是现代web开发的特点。

建议开发一套响应式电脑网站（过渡到平板端，不过渡到手机端）和开发一套响应式手机端网站（过渡到平板端以下的尺寸，不过渡到平板端）

响应式布局有可能造成冗余的代码较多，对研发的要求也更高，比如如何更好地让图片，适配，UI动画自适应各种布局。

大站还是要考虑数据计算和承载的问题，会对桌面和移动端输出不同数据，减轻压力。

实践与技巧

首先，我们需要了解几种分辨率的差别。

ps：原生应用可查询横纵两个方向的像素密度，通常浏览器可查询1个系统像素对应多少物理像素。而设计角度通常需要参考的是所获取的系统分辨率

以一个SaaS类后台产品为例，对于基本流量来自Web端网页的产品而言，需要了解当下的浏览器分辨率现状 Web端不同屏幕分辨率占比情况，数据来源百度统计，如图所示：

如上所述，选择适配方式时，设计目标为：区分web与pad端可共享的设计布局大于手机端，且产品规划上web端为主流量来源，pad端属于短期兼顾。考虑技术维护成本与开发成本的平衡，于是判断需要选择A+R模式来完成产品的跨端设计。

自适应（A）方法能让我们在不同的设备上有不同的体验、内容甚至是功能。如将960px作为主要的自适应临界点，根据全局统计信息定义，我们会得到一些相似处：

• 左侧的可视区代表整个屏幕小于960px时的具体布局和内容
• 右侧的可视区代表整个屏幕大于等于960px时的另一种布局

在使用响应式（R）技术时，我们可以利用主要临界点创建两个互不相同的体验情景，每种体验里，我们都可以在可用空间内定义二级临界点去调整布局。

通过结合自适应和响应的方法，我们得到A+R模型。利用自适应技术，我们将致力于体验和功能，作出两种不同的情景设计。使用响应式组件，我们可以处理上下文内的UI组件和布局。

这种设计方法要求设计师真正了解他们想要提供的体验，以便于定义要遵循的模型。此模型非常适合那些在较少功能或结构完全不同的小型移动设备上运行的大型APP。就像你看到的，你的产品将具有很强的灵活性，但同时也很复杂。

因为你要处理不同的代码库和环境（非强制性）,Twitter、Facebook和Github将此模式应用在他们的移动网站上。如果你在移动设备上浏览这些网站，则可以根据移动用户的期望来检验它们是如何改变的用户体验的。

其他辅助手段

删格

栅格系统可以帮助我们设计，但却不能保证我们的设计。它有多种可能的用途，并且每个设计师都可以寻找适合其个人风格的解决方案。对于简化复杂的响应式布局规则而言，这是一项十分有效的辅助手段。

1. 列和槽（Columns and Gutters）

列（Column）用于对齐内容。其中的槽（Gutter）是指相邻列之间的空间，把控页面留白,有助于分隔内容。

2. 页面边距（Side Margins）

页边距是指内容和屏幕边缘之间的空间。将边距宽度定义为固定值，这些值决定了每个屏幕尺寸的最小呼吸空间。

3. 用于组成栅格的列数称为列结构。

8、12、16和20是响应式布局中最常见的几种列结构。而这取决于我们对产品的设计要求。12列结构是相对灵活的。它可以进一步细分，将内容排列在4-4-4或3-3-3-3大小的文本框中，也有部分设计系统采用来24列的形式，如Ant-D

4. 断点

是指屏幕尺寸的特定范围，列结构、列宽、槽宽和边距都取决于断点。在这个范围内，布局会根据可用的屏幕尺寸重新调整，以获得最佳的布局视图。

如果较小的屏幕有足够的可用空间容纳内容，则列将按比例缩小。如果一列的内容无法在较小屏幕上显示，该列将垂直放置图文内容。

5. 网格规则

列跟槽的宽度是以网格作为基本单位来做增减，所以应该先定义好栅格的原子单位，“网红款”8点网格指的是设计页面时，也应该遵循8点规律。值得注意的是，列跟槽的值尽量取8的倍数，但不是非得是8的倍数。

产品中各类元素应该遵循这个倍数原则（图标、组件大小等），不同的设计系统根据自身需求，设定这个规则。例如在Material Design中使用的是2X网格。

6. 流体栅格与混合删格

流体栅格有不同宽度的列，固定的槽和固定的边距。流体栅格有灵活的内容宽度，根据屏幕大小变化在流体栅格中，列可以增长或收缩以适应可用空间。

混合栅格既有不同的宽度，也有固定宽度。在现代布局中，一些元素超出了网格边缘，与屏幕边缘对齐。页眉、页脚、出血都是一些常见的例子。

如果内容宽度大于可用的屏幕尺寸，那么一个固定栅格就会转变成一个适应屏幕可用空间的流动栅格，以充分适应内容。

结语

设计需在技术方案前介入，根据你的产品特点，进行设计方案评估，可借助的手段有删格，网格规则等，设计断点规则时，需关注设备的常见系统分辨率。

移动和桌面设计的差别远不止是布局问题。只要有足够的编程量，这些差别是可以通过响应式设计来解决的。事实上，你可以认为如果一种设计不能兼顾两种平台的主要差别，就不能算是合格的响应式设计。

但是，如果确实想要处理好平台间的所有差异，我们就回到了原点：进行两种不同的设计或者使用A+R的模型，在寻求合适的过程中，关注技术的革新。

A与B不是硬币的正反面，它们为了解决同一个问题而生，是同一种思想的延伸。

作者：神乐

配图：沙拉

转载请注明：学UI网》Web产品的适配设计选型

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

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

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

这是一个科技类网页的小插图，这样看是OK的，但第一版的图就一言难尽了，如下：

做完设计之后，我往回看看了，发现第一稿真让人头皮发麻呀～
最后的呈现效果比之前做的都要强太多了。

不管是颜色方向、质感、细节上都甩前者一大截，原因是什么呢？我总结了以下几点：

一、层次关系

客户就说“画面视觉太平了，没有层次，黑白灰关系没有拉开！细节也没有！颜色不好看！自己回去再想想吧！”……

黑白灰关系什么意思呢？我的理解就是先把设计稿去色不就能看到黑白灰了吗？

很多同学在做设计时不会考虑黑白灰这个问题，但其实颜色也是有变化的；在颜色中黑白灰的关系就是色彩的明度关系，明度越高就越白。
正常情况下画面中的黑白灰关系拉得越开，就越有空间感、层次感。

如果画面中黑白灰关系没有拉开，就会使画面飘飘的，很奇怪、不接地气。

如上图就是一个正常的黑白灰关系，每一层都区分的很开，它就会有空间层次感。

而且我们也需要保持画面的平衡感，黑色多了就会使得画面沉，白色多了就会使画面飘，灰色多了就会使画面闷。

所以我们得把握一个度，把握黑白灰在画面中的节奏感！

我们再把黑白灰关系运用到实际工作中：

整个背景采用暗灰色调，主体底板用亮灰色，内容就用亮色系，阴影及厚度用暗色调。这样一来画面的层次拉开了。

那么客户说的细节该怎么去加呢？

二、细节

没有细节、太平了，我就想到把它做成立体的感觉，让画面丰富起来，也可以加一些点缀的小元素来修饰画面。

从平面二维到立体三维画面的细节就丰富多了,而且三维空间更加容易出效果。

在加细节的过程中，我感觉到了画面中有点太过于规规矩矩了，全是方方正正形状，就很呆板的感觉，特别是左下角的矩形框，与整个画面之间没有联系、不协调。

这就是构图出了问题。

解决的方法很简单，只要让图形与图形之间互相穿插、叠加，让它们你中有我我中中有你；甚至可以把图形加以旋转，让图形产生“正”与“斜”的对比。

这种方法就可以解决画面死板的问题。

但是我觉得不能够加矩形了，画面中方形形状已经很多了，那么我们是不是可以考虑一下用圆去增加画面节奏感。

方的对比是圆，也是一个对比关系，但圆的占比面积太大了，咱们就可以用弧线去代替。

这不，弧线把方正的矩形打破了，画面就更加生动有节奏。

还有一个细节：

如图所示，这里就涉及到一个识别度的问题，我们在做设计的时候，一定要把形体交代清楚；

我做了一个银币的效果，但是形体边缘轮廓没有交代清楚，整个银币糊在一堆了，看不清里面的字符是什么，这样的感觉不是很好，整个元素是虚的。

还有上升的线条取消发光效果是不是去掉会更好呢？

这样是不是画面会更加的完整呢，这点很重要呀，我们得把物体交代清楚，不能模棱两可就糊弄过去了！物体虚虚的给人感觉很飘，不稳。

其实还有中间的一稿，但是颜色一不小心就弄脏了：

三、颜色脏的小技巧

经过尝试，我总算明白为什么颜色渐变会偏脏了；我总结了以下几点：

1、饱和度低的颜色占比不要太多，多了颜色就容易显得脏。

如图，右边的颜色饱和度偏低，这类颜色就会发灰，灰色多了能不脏吗？

2、尽量不要用对比色去拉渐变，对比色渐变对于新手来说不太友好，“红配绿赛狗屁”就是这种说法。

只要注意到这两点就基本可以避开颜色太脏的情况

总结

以上就是这次小案例带给我的启发和思考，希望当遇到类似我这种问题的时候能够给你点启发，能够帮助到你！

怎么样，是不是很耐思~有没有想动笔的冲动！那接下来把话筒交给青灯，让他开始他的表演吧！

YoYo，大家好！我是最近画到手痛的青灯，这次是我第一次做插画教程，做的不够好的地方就请大家多多指教啦！

这期的彩铅颗粒风格主要是用扁平人物和元素+方型构图+彩铅肌理刻画的结合。

构图灵感来源自法国艺术家 Gasp art 的插画作品，这个系列作品以扁平人物为主，用演奏乐器的方式结合了植物的生长，可以很直观的感受到每个人物的动作和元素都是框在一个正方形里，给人一种规整又舒适的感觉。

艺术家 Gasp art 的插画作品，仅供赏析

总结一下 Gasp art 的插画构图，其实主要就是人物加元素组成方型构图，可以用植物和道具元素或者是人物动作弯折的形式构成方形边框。

这次的刻画方式我们选择了两种风格：一种是偏粗糙的铅笔肌理风格，第二种是偏柔和的细腻噪点风格，让我们来欣赏一下图片：

艺术家 Nadiia Zhelieznova 的插画作品，仅供赏析

艺术家 Wnjing Yang 的插画作品，仅供赏析

我们截取第一种风格的局部，放大观察并总结一下：

1. 噪点颗粒明显，并且噪点的间隙会把底部的颜色透出来。

2. 叠加肌理时会透出上一层肌理，但是叠加的越重就会越实。

3. 在结构转折处和边缘有描边。

再总结一下第二种风格的插画特点：

1. 颜色和噪点的过渡柔和

2. 边缘用亮色或重色拉开对比，轮廓清晰

3. 在最亮处有高光点

把这 6 点结合起来就是我们这次的刻画风格啦~

1. 确定主题收集图片素材：

在开始之前，要先想想画啥。咱们列个思维导图，把场景分成室内室外都在干啥，可以多想一些好玩的事。这里我选了做瑜伽，躺着玩手机，路上踩到了口香糖和快乐逛街这 4 个。

现在关键的来了，根据这 4 个小场景来找合适的人物动作参考和一些道具参考，一定要多找参考！！！多找参考！！！找参考！！！重要的事情说三遍！

• 瑜伽篇：

瑜伽这张我找了个动作接近框型的一个动作，然后根据瑜伽休闲惬意的感觉，我找了个室内植物还有小鸟和纸飞机，想代表她随着身体的放松，精神也慢慢飞向了远方。

在动笔之前我们先分析一下人物的比例和特点。

人物风格分析：

① 人物头身比特点：人物比例在 11 头身左右，因为人物动作有折叠，头占画面七分之一左右。

人物上半身在 4 头左右，腿长 7 个头左右，手长 6 头左右。

② 人物四肢特点：四肢偏粗方，可以想象是多个矩形和梯形相接，衔接的时候注意关节弧度。

2. 画草图

① 先提取动作框架，根据我们分析好的头身比例调整放在框里使得四肢贴边呈方形。 

② 给框架加肉，根据之前的四肢分析，多用方形和圆矩形概括，这里我把女生的头发换成了大波浪，增加了飘逸的感觉。同时曲线也会方便后期刻画。

③ 同理，植物直接用一个弯的水滴型概括叶片和叶茎，鸟用半圆形概括身子加上小半圆的头和四边形的尾巴就概括出来了啦~

④ 最后整合一下元素开了个“天窗脑洞”，纸飞机飞进这个天窗。然后在植物边上用黄色的线条加了一些灵动的水滴，这张瑜伽就做好了。

• 快乐逛街篇：

第二张购物的也是同理先找参考，大部分逛街的动作都是比较平缓的走路类的姿势，这里我特意找了一个幅度较大的舞蹈动作，再找了一些服装参考。另外我打算用水加上金币流入黑洞的方式表现“花钱如流水”的概念。

步骤和之前的都是一样的，这里加入一个水流小 tip：

• 踩到口香糖篇：

第三张我想的是男生在赶去上班的路上踩口香糖，草图同样是从动态提取入手，我想让手和脚上的口香糖有个互动，就把原动作的脚抬起来了一点，让手靠近鞋子去抓口香糖。另外我把左边的手大臂伸平小臂转过来做一个看手表的动作，表示他要迟到的焦急。

• 躺着玩手机篇：

第四张我这边提取的是一个躺着翘腿的人物动态，为了让整个人物能符合方形构图，我把人物左手抵着地把人物上半身撑起来了点，头发用大小不一的泡泡在边缘处排列，接着我夸张了翘起来的腿使得整个动作幅度更大，同时也让整个构图更充实。最后我在手机前面加入了一个大泡泡的元素，暗示我们时常沉浸在手机信息带来的巨大泡影里。

铺色可以用钢笔勾闭合形状，也可以用 ps 自带的硬边缘笔刷画。

配色以补色为主，在色轮上呈 180 度的变化，以这张瑜伽举例，能看到比较明显的橙色和蓝色，在这对颜色基础上再加入了它们的相邻色作为点缀色，在色轮上呈 30 度左右变化。

• 笔刷介绍

终于到了激动人心的刻画环节了，这次给大家准备了村口高质量彩铅噪点笔刷~~我这边已经按照绘画顺序和效果类别整理好了~~（后台回复【插画046】领取）

这里重点介绍一下这几个笔刷！

• 皮肤刻画

给皮肤增加色素，首先我们要增加的区域分为：

1. 五官例如：鼻子，眼睛，腮红，耳朵

2. 阴影例如：脖子，腋下，衣服的阴影，以及身体转折处来加重

以人物面部举例，选一个比皮肤更深一点的颜色用【软底纹笔刷】由重到轻地上色素，颜色就会自然的过渡过去。

接着用【点状排线笔】再加重一遍。

用一样的方法把身体部分画完，最后可以在边缘处（比如手脚接触的地方，手指缝）加重线用于区分色块

• 服装道具刻画：

画衣服和道具这类面积比较大元素时，第一步先把颜色提亮，第二步再铺排线纹理（选一个你喜欢的方向）并在关节处加重。

第三步用【软底纹笔刷】根据光源加重裤子阴影，腿弯折处用套索工具勾出来铺色加重，第四步用【点状排线笔刷】加重阴影处，颜色越重面积越小。

最后在转折处勾勒更深的边线就 ok 了~

• 背景元素刻画：

用【软底纹笔刷】加肌理，【速写铅笔】加装饰线的方式把其他的植物和小鸟元素刻画完。

暗色背景的星星第一步在星星里铺上背景色，然后用亮色把中间提亮，第二步给星星中间用白色画个细十字线，星星底部顺着四个角画延长线条再复制一层缩小旋转 45 度，最后用【高光笔】点底部点一个亮光，亮色背景的星星不用刻画直接做延长线和提亮高光就可以。

• 头发刻画：

首先第一步也是把头发底色提亮，第二步用波浪线把头发分成中间粗两边细的叶片形式，然后第三步在叶片里加线条，线条遵循两侧密中间疏的原则向焦点聚拢。

第四步在线条密集的地方用使用【软底纹笔刷】加重，中间轻轻带过，头发体积感就出来了。

最后再在头发亮的地方用线性减淡的图层模式用【高光笔刷】提亮一下，边缘用【速写铅笔】轻轻勾勒一条浅色边缘就ok了~

• 背景肌理：

第一步先把背景提亮至白色，第二步用【软底纹笔刷】用力的涂色，这样铺完色后就会有些白色的点点透出来了。

第三步用【点状排线笔刷】加重物体下方让他们看起来有点投影的状态就 ok 了！

• 材质和质感表现：

1. 水滴材质：

来到了我们画面的点睛之笔的部分了，在画这种半透明状的物件东西是可以吸环境色涂在中间，让水滴两侧保持亮色就会有透明的质感呈现出来，最后点上高光水滴的透明质感就做出来了。

2. 泡泡材质： 

在这张躺着看手机里有一个泡泡的材质，它的绘制逻辑其实跟纸飞机拖尾是一样的，但是泡泡的颜色会更复杂一点，所以我们先来分析一下泡泡的颜色怎么画。

拿泡泡的一个小弧度边举例，从左到右的颜色就是从黄→红→粉→紫→蓝→绿这样的颜色变化。

所以我们照葫芦画瓢，先画出一个一样的形状，用【后悔药】橡皮擦，擦出透明渐变，擦的时候在弧度凸的地方多保留一点，凹的地方轻轻擦。

接着用【软底纹笔刷】画出颜色，注意颜色的位置和占比也一样参考照片。在颜色衔接的地方用笔刷轻轻的覆盖上去就会比较自然，在光源位置画出白色的高光。

继续把完整的泡泡画出来，再加上一点线条装饰一个泡泡就画好了！

3. 画面光泽：

用【高光笔刷】把图层模式调成线性减淡模式在光源方向提亮，再用【速写铅笔】在最亮处点一个小高光，整张就画完啦~

掌握了这些刻画方式，再加一点耐心和时间这 4 张就画好啦~~

1. 人物动作转化和道具的分配要贴合方形构图。

2. 加入主色的邻近色丰富画面。

3. 刻画颜色遵循阴影颜色越重面积越小，高光越亮面积越小的逻辑，让重的更重，亮的更亮，拉开对比。

4. 你永远可以相信后悔药橡皮擦，画多了就擦掉所以大胆画吧~

作者：蓝贵莲

转载请注明：学UI网》从构思讲起，手把手带你绘制一套彩铅噪点人物插画！

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

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

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

从根儿上捋一捋，人类社会经济最根本的是“互通有无，各取所需”这八个字。更高效的生产力决定了更好的交换能力。只要制造业的生产线还能继续开足马力，源源不断的生产出生活必需品，那么就有相应的“场景”去交换它们。这个“场景”最终的末端形式就是“店”。有了互联网交易这个场景之后，门店（门市）就成了“线下店”。“线上店”就啥都好吗？

显然不是。人跟人之间隔着一个“网线”，我们对小物件或者低价值的小商品或许还有很大的容忍度。但是，对于你的家庭服务需求，你要找的是一位共同在家里生活朝夕相处、带娃、护老的阿姨，不见一见，放心吗？所以就需要这么“一个专业的家庭服务门店”来提供面对面的咨询，以及培训出优秀的阿姨来提供令你和你的家人满意的服务。

不得不说，在这个领域里，还没有一个“一统天下”的品牌和绝对“统治力”的产品。而顺应趋势来看，开放生育和老龄化，这确实是一个“有发展空间”的行业，需要这么一个“门店”。有的行业在没落，有的，则在生长。

门店标准化背后有怎样的运作逻辑？它的本质是什么？后疫情时代如何做门店形象标准化？

门店做标准化当然不仅是说品牌露出好、有助于打开潜在客户心智、顾客选择偏向这些理由。标准化本身除了品牌、效率之外的比较重要一点，就是这套运营标准能使加盟老板、乃至员工都能够迅速进入“经营”的状态，并逐步迭代总结，再通过标准化把经验传递下去。标准化这套法子能使老板少走弯路，早盈利。老板盈利赚到钱了，品牌方就有了更大的话语权，实现更大的商业企图。

在后疫情时代，人们的钱袋子紧了，老板在经营投入上谨慎了，设计上的发挥空间狭窄了。门店的装修标准化不妨从“设计形式上比友商好一点，材料便宜点，执行容易点”上入手。

设计形式好一点

往大了说是“差异化”。从材料、颜色、铺贴方式三个角度去探索，任何一个角度提上一个LEVEL就可以。

如果只差一点，等友商迭代升级怎么办？

不同于“线上店”，线下门店的装修周期有比较明确的规律。三年小装，五年大装，装修早了不赚钱，装修晚了不符合当下品牌发展阶段了，保持小步迭代的策略即可。

材料便宜点

装修材料水深，不探讨材料的品牌和产地。这里的便宜体现在品牌商的标准化管理成本，就是加盟商对材料的采购难易程度。如果买不到或者总缺货，加盟商的免租期是有限的，很可能导致“平替”的事情发生，但这个“平替”不是真的能平，很可能是向下“平”。从而出现失控的设计落地结果。同时，对品牌元素应保持绝对的掌控力，统一采购配发（路边广告店自由发挥的结果超乎想象）。

上面提到的装修周期，这也决定了在选材上要选择符合盈利模型的材料。不要追求极致的耐用而导致成本提升。

执行容易点

让施工的人能明白标准化的设计意图。不同的施工师傅对同样的设计图纸理解而施工出来的结果可能是不同的。所以做出明确设计意图、图纸、以往项目中的错误做法。并不是说，写得越多越详细越好。我恰恰在这上面深有体会，忽略了施工师傅的办公环境和项目节奏。我们管这叫“由于缺少用户习惯调研导致产品无法触达用户心智。”

要知道，用户面对，洋洋洒洒几大篇的描述，往往不愿意去阅读，所以尽量采用短视频的形式去说明效果会更好。

在弱矩阵组织中设计的影响力边界在哪？受控环境下的设计管理如何发挥最大效能？

说到这，终于到了正题。似乎设计师往往都是弱势群体，很大程度上取决于组织架构的形式。大多数品牌公司的设计组织都是依托于产品侧的诉求。例外的是乙方设计公司，因为设计本身对公司来说就是产品。

弱矩阵的组织更像是临时抽调人力组成的作战小组，平时各职能人员都在自己组织内处理常规业务需求发挥职能。这个组织形式上，也影响了参与者在项目中的投入精力。设计师在有限投入的情况下，需要更好的把设计流程和设计落地规则以及检验标准沉淀，以供其他各个环节的职能人员查阅和重复利用。

上面所说的，经验丰富的设计师可能已经驾轻就熟了。再说说另外的思考。

我想，还可以做进一步完善审批流程、辅助工具、权重区分、沉淀文档四个部分。

审批流程

提到审批流程，十几年前新兴的互联网行业热衷于“扁平化”，对传统行业的审批流程嗤之以鼻。时至今日，当年的新兴的互联网也演化成了传统互联网，组织架构越发庞大，职能划分也越来越细，业务也趋近于稳定。现在再看扁平化，不过是企业或者行业在发展初期无法形成稳定的流程体系和组织结构。审批流程在高并发、时效性强的项目中，可以为你分担更多的监督节点。各个职能去监督各自擅长领域，识别和规避风险。

辅助工具

这一年最大的感触就是资源同步问题。从以邮件分发演进到网盘云端下载，都没能很好的解决这个问题。家庭服务行业之前从未真正有过的品牌化的运营。加盟商对品牌的理解力和协同力是非常初步的。并不像隔壁的3C数码行业驾轻就熟，隔壁的加盟商甚至形成了自己的一套品牌管理组织架构，主动去拥抱品牌。品牌标准化的落地不要局限于“手册”，让“手册”灵活起来并不是一件难事。尝试通过线上智能客服的方式，使加盟商通过关键字获得资源同步，或常见疑问解答。要保证沟通平台不能跳跃，比如常用微信群沟通，就不要一竿子支到公众号，这反而增加了理解成本。好的工具可以事半功倍，将设计师从重复的沟通中解放出来，将其精力投入到设计当中。

权重区分

加盟商开店和装修项目是一个高并发的项目。往往集中在行业淡季，这就导致在有限时间和有限资源配置下，做出权重区分。厘清各个项目条件的轻重缓急，比如说：搬家新址的项目权重是最高的，因为他面临旧址无法继续运营的情况。翻新升级的可以稍等一段时间，不影响他的正常运营。

沉淀经验

不总结不沉淀，就跟人失忆是一样的。好的经验要沉淀，失败的经验也要沉淀。甚至说，失败的经验比正确的经验更有用。这说明它有盲区，也许是管理上的盲区，也许是执行上的盲区，它可能是系统性的问题。这在跨部门沟通和团队扩张的过程中会帮助业务变得更加稳定，为项目增加抗体。

以上就是我分享的内容。当然，我并不是都做到了尽如人意，也有还在进行和改进中的事项。如果整套搬运项目管理体系会与项目的“土壤”不匹配。做好流程裁剪，因地制宜吧。

设计更多的是事前去思考和谋划如何去实现，这其中少不了去理解行业和落地流程，深入思考和理清逻辑。设计师的认知边界在哪里，影响力的边界就在哪里。

逆水行舟，不进则退。

作者：环铁艺术家

转载请注明：学UI网》当互联网遇上线下门店，设计师能做些什么？

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

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

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

• 产品需求与设计研发的良性循环
• 今日事今日毕
• 设计文档的规范性
• 多渠道沟通
• 验收不仅仅是记录问题
• 沉淀业务组件的必要性

一、产品需求与设计研发的良性循环

从产品经理提出需求开始，到研发开发完成上线，整个过程我们可以看作是一个迭代。倘若与研发同一个迭代完成产品设计，时间上肯定是不够用。需求是永远都做不完的，一个人无论怎么埋头苦干，还是会时间紧迫无法喘息！这时候团队合作显得至关重要。我们需要进行合理的任务管理，利用工具达到更好的效果。目前我们敏捷组产品与设计小团队用的是飞书文档，它可以新建所需要的任务看板，清晰直观的看到此任务当前流转的阶段，任意拖拽方便快捷。

完善需求的详细信息，比如：所属项目、任务执行人、优先级、外审状态、敏捷组、文档链接等等，就可以从不同维度去管理任务，筛选我们想要了解的重点。

那么基于此，如果我是视觉设计，完成需求后就可以将它拖入下一泳道，等待排期。未完成的也就不会进入到排期和研发阶段，这样基本上每个迭代研发都会提前拿到相应的设计稿，尽管后续可能会有细节上的修改和返工，也不会很仓促。

二、今日事今日毕

三、设计文档的规范性

每个人都有自己习惯的设计稿排列方式。整齐、清晰、直观的布局，有利于研发快速捕捉到想要查看的信息。

⬇️ 设计文档基本由以下部分组成：目录、交互原型、交互说明、视觉稿。交互稿与视觉稿最好合并在一个文档中，方便研发查看。

⬇️ 具体到页面细节说明，可以安排在相应设计界面的附近，用清晰的数字或者标签展示。

⬇️ 如不同状态，不同变量的变化，也需要详细标注。

⬇️ 设计内容过多时，像以下细节单纯在页面上展示很容易被忽略，需要单独拿出来在旁边重点强调一下。

⬇️ 如今标注插件很多，不需要全部手动标注了，但对于一些我们认为研发会忽略和写错的尺寸、间距等，可以表示一下。设计软件的自动展示标注有时候会因为图层覆盖之类的问题点不到某些元素，这个也需要检查一下。不然研发就自由发挥了哟～

⬇️ 各式各样的组件有非常多的形式和状态，设计在引用时要明确类型，避免研发乱用。

⬇️ 比如这个全局提示组件，组件本身可以提供多行展示的样式和规则，但研发很有可能不知道某种情况下对应的展示样式，实现的不是我们预期。以下是日常迭代中研发实现的有问题的样式与正确的对比：

如上述所讲，完善补充细节，譬如图标的颜色变量，悬停变化，状态变化，引用组件备注等等，这些都是开发还原落地视觉设计的基础。页面设计中，所需的图标、图例、图片等素材，切图并压缩给到研发，最好用统一的方式去管理图标，比如iconfont，或者自己公司的组件平台等。

四、多渠道沟通

当接到新的需求并且拿到交互稿，前几周也参加了需求&交互内审，基本不会出现需求和框架大改的问题。大体了解背景和设计重点后，可完善视觉细节。

做完设计稿只是成功了一半，还需在设计内审前，发给对应的产品和交互同学评论提意见，先修改掉一波明显的问题。这是视觉设计阶段第一个比较重要的沟通，提前在大部分内容上达成共识，节省了后续评审的时间。

五、验收不仅仅是记录问题

1、项目上线前验收

提到验收是我非常头疼的事。前期设计稿准备充足的情况下，研发如果能实现到视觉稿的80%，验收起来不会特别吃力。有时会遇到验收内容多，前端还原度低，耗费设计同学大量时间，建立良好的验收机制非常关键，与研发同学的沟通和磨合也是必不可少的。

涉及到人员较少时，可以坐到一起面对面去沟通；若此次内容较多，涉及不同人，可建立文档。

一遍验收后并不完美，基本要2-3轮的继续走查，针对优先级比较高或者问题重灾区，标红后给到相应负责的前端继续修改，保证上线前90%以上的问题得到解决。若还有问题遗留，可新建kaptain任务后续优化，让验收问题有迹可循。

线上已有问题，按照模块集中归纳，建立对应的研发任务。开发过程中可与前端同学随时沟通，提供细节补充。

有时我们认为很简单的去掉一条间隔线或者间距，可能涉及到非常多不同的场景面板，提前沟通也有利于研发评估工作量。

六、沉淀业务组件的必要性

每当开始新的项目设计，要费好大功夫找源文件呀。适当的归纳整理历史文档，也有助于我们快速的进入设计状态，对新人也很友好！

以业务需求为背景，在组件库的基础之上，业务组件的整理尤为重要。按照每个人的使用习惯，我们可以建立自己的“业务”组件库，方便需求迭代时快速定位。

比如，我们可以将业务组件分为几部分：图标、图例、场景等，进而细化场景中的内容。至于怎么去命名和排版细节，都可以按照自己的习惯来整理，当然组件形成后也可以扩大到我们同业务线的UX或交互同学一起使用，提高设计效率。

可能对于非设计岗位来说，看到的仅仅是一张设计图，但在设计稿背后我们需要去支持和处理的细节也是非常有价值的存在。

希望这篇小小滴文章可以带给你一定的帮助 ~(≧▽≦)/~

作者：小柴

转载请注明：学UI网》这些设计细节你知道吗？

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

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

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

低代码开发平台（LCDP，英文全称为 Low-Code Development Platform），顾名思义，就是仅需通过少量代码或无需代码就可以快速生成应用程序的开发平台。借助低代码平台，你不需要像程序员一样写代码，而是仅通过对于组件和模块的拖、拉、拼、接就可以很迅速地搭建出一系列页面，完成一个基础产品。

低代码平台 OutSystems 的功能界面

低代码平台的诞生和发展的进程简述如下：

– 2000年：可视化编程语言诞生，通过一些可视化的界面来辅助用户进行编程；

– 2014年：著名的研究机构 Forrester 正式提出低代码开发概念，并投身对该平台的研究当中，低代码平台在国外兴起；

– 2016年：国内的低代码平台相继发布；

– 2021年：中国市场的低代码生态体系也逐步建立了起来，且正在加速发展，待开启一个新纪元。

作为帮助企业和团队快速搭建产品、实现数字化的新工具，低代码平台的核心功能有以下几点：

1.可视化

以简洁的图形化操作界面为主，做到通俗易懂，降低使用者的操作门槛，开箱即用；同时你可以在搭建好的界面中进行试用操作，所见即所得。

2.模型化

可以通过拖、拉、拽等方式拼接平台上的组件，用来搭建页面。可以灵活定义模型中的字段、元素和大部分布局。

3.工程化

通常包含开发调试、自动发布上线、数据监测等一站式的产品开发能力。

4.扩展性

支持少量的代码扩展，可以实现一部分个性化的产品设计和开发需求，也可以和更多第三方工具联动应用，做到功能和信息的互通共享。

和组件库一样，低代码平台也是一种提效工具。但它与组件库的不同之处在于：

1、有成套的成熟解决方案。

低代码平台提供的不仅是原子级别的组件，也包括页面的模版、产品功能的框架和操作流程，比如提供各类企业级应用常见的聚合表、仪表盘、报表等已经成熟的功能界面解决方案。

2、能顺畅衔接第三方工具。

3、注重流程而非单点提效。

让各个产研环节之间更易产生联动，适用于互联网产品研发的全流程，不再局限于设计和开发环节，也可以从业务、产品侧直接做输入。

理想化的情况是，业务侧和产品侧也可以轻松地使用低代码平台上提供的解决方案做出高质量的“原型图”，甚至是产品的基础版本，设计师仅需要做部分调整，开发检查优化下代码，产品就可以直接上线，比现在的工作流程要高效很多。

而且当产品侧在低代码平台上对文案做出调整后，相应的代码也会直接产生变化，这样就大大减少 “产品 – 设计 – 开发” 这种单线程的沟通方式带来的细节调整上的时间成本和错误率。

二、对于设计师工作的影响

低代码平台带来的产研方式的革新，对于不追求个性化体验的、从0-1的、功能相对单一、通用的企业级产品是合适使用的。这类产品的产研场景中，低代码平台可以代替设计师和开发完成重复性、低价值的体力劳动。

不过，低代码平台在现阶段也并非适用于所有产品。这种方式做出的页面质量和功能自由度会受限于可视化编辑器所提供的服务和能力，如果编辑器不支持某种自定义的功能样式，那么产品形态在实现业务需求的过程中就会受限。所以对于业务需求和用户体验要求较高的业务领域，低代码平台目前起到的作用还是有限的。

目前，接触低代码平台的设计师可以被分为两类，一类是用低代码平台的“用户”，也就是自己参与的业务已经开始使用低代码平台做提效工具来做设计和研发了；另一类是设计低代码平台的“设计师”，也就是自己参与的业务就是低代码平台产品的设计。

1、对于「用户」类的设计师

使用低代码平台的一个核心思想是：低代码平台只是协助你工作的工具，不是你的替代品。它是手，而你是脑。你的思维和判断不要被工具所限制。你可以从重复性和低价值的工作中解脱出来，更多把工作的重心放在：

1.吃透业务

把时间和精力放在理解业务和用户需求、参与构建产品上，尝试让设计思维更早地介入到产品构建的过程中。低代码平台也可以变成你与产品和业务的无缝对接的桥梁，也更便于你了解他们的工作目标和方向。

2.去同质化

低代码平台的普遍应用会进一步带来企业级产品的同质化，这个时候更需要从用户需求切入，以商业、社会、人文等不同维度的设计创新来综合性地思考去同质化的解决方案，提升用户对于产品的认知，增强产品的差异化。

3.学新技能

工具在变化，你所掌握的技能也要随之更新。要充分关注和了解低代码平台的功能和进展，不仅不排斥使用，还要随之一同发展。你的工作技能将不再以设计绘图技法为主，要在低代码平台带来的协作方式变革中提升新的工作技能。

2、对于低代码平台的设计师

设计低代码平台的一个核心思想是：低代码平台本质上研究的是“业务模型”、“界面设计”与“代码实现”三者之间的关系。所以你可以：

1.从流程侧切入

需求、界面、代码通过一个可视化编辑器实现绑定在一起，其背后所对应的业务、设计和研发之间的关系不可忽视。要保证流程上的无缝对接和通畅性就需要多了解他们之间的工作协同方式。

2.从用户侧切入

从低代码平台的核心用户入手，为业务、设计和研发分别提供有针对性的功能服务，以此提高平台功能的丰富性、易用性和可拓展性。

现阶段也只是低代码平台的起步阶段，前路漫漫。如何最大限度地赋予不同类型的用户操作权力、最大程度上实现定制化、扩展到更多业务领域，都是需要继续研究的可课题。

作者：元尧

转载请注明：学UI网》工作经验｜低代码平台，会给设计师的工作带来哪些影响？

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

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

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

下手前的第一步当然是要先搞明白使用场景和功能用途，这个太基础了，想必大家都懂。具体到这个项目来说，它是一个用于数据分析的服务，后台有一个信息量很大的数据库，通过前台进行条件过滤后即可得到一张数据表。

看到原型我的第一反应是：该从哪里开始操作？页面功能的终点在哪？原因在于，页面中有三个主按钮“生成表格”，“预览”和“应用条件”，且视觉结构基本扁平。和产品沟通后了解到，当前的逻辑是先选择指标，给指标排序后就可以生成表格了，针对表格可以再应用条件筛选，最终形成的表格可以导出。

二、结构梳理

2.1 拆分重组功能

设计改造一般从大到小作调整。先优化整体结构，尽可能让功能分区更明确。理解了原型后不难看出，页面的配置项分的很开，先在左边栏加指标，再在内容去上方排序，生成表格后再去右边栏条件筛选。这种需要用户点来点去的结构显然不太友好，而且细碎的分割消耗了大量的空间。

该页面功能大概分为配置和数据展示两大部分，不妨从这个角度重组页面功能。配置生成类页面有这样几种常见交互形式：一，分两步，先配置再生成；二，模态浮层，通过弹窗或者抽屉配置；三，非模态，用工具栏或抽屉容纳配置项目。为了便于比对或调整配置项，非模态的抽屉更适合操作场景。

功能结构的优化得到了如下的改进：

• 易于统一卷展配置抽屉，避免了各个面板独立控制和空间浪费。
• 减少了配置时的操作步骤，选好配置项即可一键生成。
• 分区明显，一边操作另一边展示，各司其职。

2.2 方案对比测试

对比测试方案的目的是尽可能考虑全各种设计方案，确定出一个最符合使用习惯和操作流程的布置。不论是手画草图还是用电脑画线框图都可以，期间多和产品或业务讨论，可以让对方理解整个的推导过程。

不过沟通中有两点需要注意，首先讨论方案前先过滤掉从设计的角度看明显不合理的，评审的目的是通过多方意见调解让方案达到最优，而不是展示工作量。其次是结构和视觉方案尽量分开评估，否则对方会收到海量排列组合后的设计方案，评起来抓不住重点。下面是当时和产品一块研讨的三个方案：

• 方案一：指标一列，过滤条件一列。其中指标可以通过页签切换全部和已选。
• 方案二：同方案一，但全部指标和已选指标上下显示。
• 方案三：全部指标单占一列，已选指标和过滤条件单占一列。

最终选定了方案三，综合来看有如下原因：用户添加条件筛选的频次低，所以没有单放一列并且可单独卷展；并且方案三的布局在语义上更容易被理解为“库和待应用项”，提供更典型的心理暗示。

过滤条件的结构做了一些特定的优化：一，新增功能保持在头部，避免被挤下去；二，条件关系配置直接外露，减少点击的同时也没有占用更多空间；三，条件卡片增加了。

至此，需求页面的结构已经定了下来，之后就是常规意义上的视觉处理了。因为这部分比较细碎，单独来讲可能缺乏普适性，所以下面一章总结了一些常见且通用的设计点供大家参考，最后再提供页面的最终视觉效果供大家参考。

三、视觉效果构建

3.1 内容元素的背景色

尽量让内容和表单展示在白色卡片上。大部分基础组件样式是按白色底色的场景来做的，放在其他颜色的背景上很容易出问题，比如表单的禁用态或者标签的颜色和底色融为一体时，可读性很差，而且有一种不干净的感觉。当然这一条不绝对，如果深度定制了基础组件的样式，或是结构功能简单，背景采用其他颜色也是没问题的。

3.2 阴影和描边

阴影分割是一种常见的视觉表达手法，然而B端用户的显示器普遍比较糟糕，分辨率低且色域小，太轻的阴影效果不如描边，有时甚至会让图形边缘看起来很模糊。担心显示效果的话，实际上可以看一看 macOS 窗口的阴影尺寸和透明度。B端工具设计中，功能性比美观度重要的多。

3.3 易读性与复杂度

下次去宜家的时候可以观察下结账的柜员机，你会震惊地看到里面仍然显示着拟物化界面。元素的质感对现代界面设计来说可能是增加了页面复杂度，然而放到具体的操作场景中，拟物化界面可以给高速操作的收银员提供更佳的功能可见性，有益于培养肌肉记忆。所以页面易读性与复杂度之间的平衡，取决于用户在场景中的操作方式。

3.4 功能颜色的数量

功能颜色让用户不阅读内容就可以初步感知数据状态，比如警告色，标识色等等。数量太多时用户会记不住映射关系，颜色就失去了功能性。一个常见的错误是标签的配色，假如一个系统里有十种标签，千万不要设计十种配色，不仅区分度低而且视觉上很混乱，尽可能先归类再配色。再举审核状态的例子，除了成功失败之外，审核流程还有各式各样的中间态，需要异化表现时，不妨尝试通过图形视觉信号区分，比如增加图标。

3.5 避免摊大饼

非必要不摊饼。随着层级增多，用户对层级归属的感知逐渐变差，内容区也越来越窄，视觉效果难以把控。当然，在B端系统设计中没有什么完全不可打破规则，实在避免不了的话，可以着重突出顶层内容或动态提示用户当前聚焦的层级。比如鼠标悬停时高亮层级关系，类似编译器的代码区块高亮功能。

3.6 数据与提示

• 用真实字段内容设计：视觉设计前找产品或者研发要一份内容字段样本，有助于提高视觉保真度，同时避免开发上线后内容挤不下或大面积留白的情况。
• 表单项默认值：表单中可以通过感知预测填充内容，或设置常用的默认配置，提高表单的填写效率，减少机械操作。
• 提示信息：提示信息的暴露程度取决于系统功能是否常规，以及目标用户的理解能力。常用操作不提示，常用但晦涩的功能采用悬停提示，不常用且难懂的功能可以露出提示或帮助中心链接。

3.7 数据分析页最终效果

经过以上粗略的讲解，希望大家对页面控件和整体的视觉处理有了一定了解。针对高度定制化的B端页面，视觉的核心目的是提高功能可见性和操作易用性，不是单纯地去套规范。

四、工期管理及研发对接

除了页面的设计流程，项目管理则是另一个重点，B端项目经常会倒排工期，个别战略导向型的需求更是火烧眉毛。毋庸置疑，两天工期的设计质量多半是比不上一周工期的，下面讲一讲在时间紧张时如何保障输出质量。

4.1 按需求表单规划

开始设计前，根据 PRD 整理出一个任务表单，即当期需求覆盖的功能范围。遇到紧急需求时，可以按照拆分出来的功能模块分批交付开发。B端模块的设计时间很少会完全符合预期，比如在设计时发现了一个重大优化点，从构思概念方案到各方评估影响需要占用一部分工期，而通过模块排期表可以更稳妥地评估突发事件对后续输出的影响，帮助产品评估是否投入资源做优化。

4.2 先输出核心页面确认方向

先输出关键页面给产品和业务确认，一来让研发心里有底，二来控制改稿成本。返工在 B 端项目中很常见，有时候我甚至会手画草稿去找产品过方案，提前评估可行性，避免方案走了很远再被驳回。切忌等到交稿节点给产品一个突然惊喜。

4.3 组件与组件状态

B端原型通常看似只有一个页面，而算上各种面板的打开和关闭，页面操作状态，弹窗，包括定制化组件样式的说明，工作量并不小。组件状态可以留到最后再补充，但务必和研发提前协商技术方案：首先确定常规功能能否用现成组件，采用哪款组件，这一部分之后就不再出交互视觉样式了。其次和研发同事沟通非标组件的交互形式，这样他们可以先写框架最后再加样式，不会出现研发空窗。

五、初步排错

交付设计稿或者做用户测试之前，还差一步验证的工序。过滤掉明显且粗粒度的问题，可以显著提高后续的测试效率。客观上验证可用性，主观上评估体验。

5.1 小黄鸭调试法

小黄鸭调试法是一个工程师都知道，但设计师很少听说的测试方法，本意是通过给桌上的橡皮鸭逐行解释代码来排查问题。验证阶段不妨也试试这个方法，给想象中的人物讲讲界面的使用方法和元素的设计原因，讲都讲不通的功能，想必也不会特别好用。（认识我的同事都知道我办公桌上有张青年 Gary Anderson 给一个领导样子的人解释可回收标识设计的照片。我的讲解对象就是这个领导样子的人，他已经驳回了我的很多烂方案。）

5.2 走用户流程

核对产品功能没有缺漏后，就可以检查用户流程的流程度了。几种常见的流程问题包括：不知从何下手；找不到功能入口；操作失误难以补救；系统出错原因不明。这些问题会突然地卡住用户，感受上很糟糕。我们可以找出类似的卡点，提供适当的引导。假如从设计上找不到解决方案，则需要提供可检索的帮助中心以便用户自行查阅解决。

结语

B端产品一般会有详细的文档，或者培训操作人员。然而以B端产品的体量和非常规的交互方式，很多操作不好记忆。单纯按照原型施工，难以保障易用性。作为设计师的一个关键职责，便是将产品操作逻辑翻译成简明易懂的页面和图形，尽可能铺平体验的道路。

注1：文章示意图内容由于脱敏需要进行了处理，实际设计时请记得尽量使用真实字段内容。

注2：本文主要介绍流程处理，为避免繁琐略去了一些视觉设计点，想要了解更多可以参考上一篇文章《引起舒适！什么是好用的界面》。

作者：邢禹

转载请注明：学UI网》如何解析产品原型

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

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

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

• 对上，要与产品经理保持沟通，清楚地知道产品当前的工作方向、目标，以及未来的工作计划，甚至要通过与产品经理沟通，侧面了解领导的期望。
• 对下，则要跟开发人员密切配合，跟进开发，推动设计落地。

与人沟通不是一项简单的工作，其中包含了很多为人处事的技巧，这方面我并不在行。但是单纯工作层面的沟通而言，我觉得并不复杂。

今天我们就来讨论下设计师应该如何做好设计沟通。主要有以下几个方面：

1、深入理解需求，给自己增值

2、找准关键角色，影响他人

3、主动沟通，拉近工作关系

4、基于用户场景，提高沟通准确性

5、重视设计评审，获得多方认可

一、深入理解需求，给自己增值

设计师是为产品服务的，打交道最多的就是产品经理，但是产生分歧最多的应该也是产品经理。根本原因就是产品经理和设计师会站在不同的维度去理解需求，产品经理主要是从需求价值、功能设计的维度定义需求，而设计师则是从用户体验角度理解需求。

现在很多的设计团队要求设计师要去理解业务场景、商业模式，要站在产品的角度思考需求，就是保证设计师能与产品经理在一个频道上沟通，这样才能产出有价值的设计方案。才能让产品经理认可你的能力，让他觉得你的设计方案确实更加合理、有效，甚至对你产生依赖性，最终赢得话语权。

当然这非常难，毕竟离了谁，地球都照样转。但是一旦形成了这样的工作方法，你会发现设计工作会更加容易推进，沟通交流也会更加顺畅。

二、找准关键角色，影响他人

设计师想要做成事，需要自下而上地影响别人。

有些时候，产品经理的需求并不清晰准确。必要时，设计师要拉上更高一级的角色与产品经理一起沟通，例如产品总监，将需求进一步确定下来。

总监这类角色比较重要，平时设计师很难有机会直接给领导汇报，跟产品总监或者设计总监沟通汇报的机会更多。一方面他们的意见比较受领导重视，另一方面他们也比较清楚领导的想法。产品总监会决定是否需要跟领导进一步沟通，或者由他们直接跟领导汇报。

所以跟总监汇报，要能够将设计方案的精髓有效地传递给他们，让他们充分了解并信服设计方案。

当然如果有机会，设计师还是要争取直接给领导汇报，毕竟自己产出的方案只有自己最熟悉，并且通过汇报也可以面对面了解领导的真实想法。

三、主动沟通，拉近工作关系

1、日常工作沟通

在我们的工作中，会遇到各种类型的产品经理。有强势的、有自以为是的等等，但是所谓“伸手不打笑脸人”，大家都是为了产品更好地发展在积极合作，当你主动的、真诚地站在产品角度去请教业务或者需求时，大多人还是很配合。

讲一下我的个人经历。

随着产品线的扩张，部门的产品经理越来越多，有些没有太多的交集，最开始对设计师缺少足够信任，个别产品经理会绕过交互设计师，直接找视觉完成方案后，推动开发上线。有的只是找交互设计师做下原型评审，并不传达需求内容，效果非常有限，导致设计师工作比较被动。

这一方面需要在流程制度上去约束产品经理，另一方面设计师也要与产品经理多沟通，提前知道产品规划、介入需求。或者对没有参与的需求进行体验走查，带着问题去找产品，并提出改进方案，让产品经理意识到设计师对产品的价值，逐步扭转不利的局面。

刚好最近在搞下季度的产品规划，产品经理搞得热火朝天，但是都没有主动将信息同步给设计师。

作为产品需求的下游，这种情况似乎也无可厚非。不过如果等着所有的需求都确定了，工作铺天盖地压过来，设计师也承受不了大量的设计任务。

在我看来，提前了解需求信息，可以更好地开展后续设计工作。所以就主动出击，找产品经理聊聊工作，于是有了以下对话。

而当产品经理不知道该做什么或者怎么做时，设计师可以通过自己的专业能力，例如竞品分析、数据分析等，介入到需求分析中，帮助产品经理梳理需求，或者推进产品体验升级。这时候你的设计建议，产品也更容易接纳。

2、设计目标沟通

对于成熟的设计团队，设计师一般都有明确的分工协作，职责也比较清晰。单打独斗的设计师，相对比较惨。容易陷入被动接受工作的局面，今天做个A产品页面，明天改个B产品PPT，后天做C产品的页面，谁都能提需求。天天看似很忙，结果工作上不成体系，工作绩效都不知道该怎么写。

所以设计师要做好自我工作的管理，建议设计师可以主动向产品团队靠拢。除了日常的项目工作，还要能够找到一些体现自我价值的工作，可以更好地展现自驱能力。例如开展竞品分析报告、系统走查、设计规范、组件库建设沉淀等等。

这些偏向产品顶层规划与设计工作，要及时与产品负责人进行沟通，保证工作的方向和目标与产品整体发展保持一致，并且最好能够纳入到产品规划中，方便后续工作的开展。

3、抓住问题本质、带着方案沟通

设计是具象工作，看到设计方案才能做出评判。在工作沟通时，除了提出问题，还要尽量带着方案解决问题。尤其是与领导沟通，不要直接问领导该怎做，而是应该告诉领导我的方案是什么，请领导决策。

例如领导对现在版本不满意，要改版。我们该怎么做呢？

我认为，首先要弄清楚领导对哪些方面不满意，例如风格、颜色，还是框架布局。因为双方对改版的认知可能不一致。搞清楚问题之后，才能更好地开展具体工作。另一方面如果不好与领导直接沟通，还可以与总监，产品经理沟通讨论，他们跟领导接触更多，得到的信息也更多，可以侧面了解领导的期望。

试图搞清楚领导喜欢什么风格，再着手进行设计，这种方法可能很难奏效。因为领导的喜好会发生变化，可能不经意看到的页面就让他产生了改版的想法。又或者他今天喜欢这种风格，明天喜欢另一种风格，这样会让设计很难适从。

设计师还是需要通过主动调研分析，完成多个方案后，让领导做出选择，这样可以更深刻地影响领导的思维。

四、基于用户场景，提高沟通准确性

例如最近有个产品需求，最开始是产品经理跟我单线沟通的，感觉需求比较简单，确实没有仔细地了解用户场景，就在产品原型基础上修改了一版交互方案。后来产品经理找到我说，业务需求方对方案还有些异议。于是进行了第二轮沟通，这次邀请了产品经理、业务方、还有开发同事参会。

刚开始讨论的是第一轮的交互方案，发现产品经理转述业务方需求时，对信息理解有误，于是重新讨论用户场景和需求。在会上快速完成了一版框图原型，但是紧接着业务需求方又考虑到了一个新的场景，发现框图方案仍然无法满足要求，于是方案又被推翻了。

最后的会议由于时间关系，只是讨论清楚了用户场景，产品经理还要再梳理一下才能转化为产品需求，后续还要再拉会讨论。

一个产品需求涉及到各种岗位角色，单方面沟通容易出现信息偏差，或者信息传递不到位。在关键的节点，例如需求讨论、设计评审，应当召集所有相关人员，尽量避免单线沟通。

同时要基于用户场景沟通，不能含糊其词，可以通过5WH方法刨根问底，真正地理解需求，否则就可能出现设计返工。

五、重视设计评审，获得多方认可

设计评审是非常重要的沟通方式，一般分为两种，内部评审和外部评审。

1、内部评审

内部评审指的是设计团队内部的评审，主要作用是方案查缺补漏和正式评审预演。

设计师在评审过程中需要讲清楚产品需求是什么，业务流程、竞品分析、用户分析，设计思考、以及设计方案等等。当然由于现在都是敏捷开发，一些需求都是比较小的迭代，所以前期的分析可以简单讲解下，重点是要讲清楚需求和设计方案，让其他设计师了解需求背景和内容，并对设计方案提出改进意见。

2、外部评审

外部评审更多的是确认设计方案，而不是讨论设计方案。同时可以拉通各方面信息，并将最后的评审结果传递给需求的相关责任人，作为后续工作的依据。

为了评审效率，在正式评审前，设计师可以拉上业务方、产品经理做小范围的方案评审，让需求最直接的相关人员，确认方案是否正确，并达成一致。保证正式外审方案受到质疑时，获得他们的支持，或者由他们出面解释一些业务问题，更容易让其他人员接受。

正式的外部评审可能会包括一些业务方的领导、产品总监、设计总监、开发、测试等人员。设计师需要重点讲解从用户体验角度对需求的拆解和分析，以及完整的设计方案。当发生意见分歧时，可以通过竞品分析、数据分析等辅助论证方案。

设计外审时，设计师要面对各个团队的挑战，但是也是展示个人能力的好机会。毕竟平时不会有各个岗位的领导、同事，能够坐下来听你讲方案。

如果不重视设计评审，完成了设计方案，往群里一丢或者发个邮件就万事大吉了。其实是失去了一次表现自己的机会。同时也无法将足够的设计信息有效地传递给上下游，缺少了确认的过程，后面容易造成各方面的信息混乱、扯皮。

总结

立足于做事本身，你会发现工作中的沟通相对要简单很多。上面说了那么多，可以归纳为以下3点：

1、用心沟通

2、主动沟通

3、及时沟通

作者：子牧先生

转载请注明：学UI网》设计师能力建设（1）:如何更好地进行设计沟通

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

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

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