262022-9

底部标签栏全面解析

一、标签栏是什么？

标签栏也叫Tab Bar，是移动端应用程序中最常用的UI元素之一。标签栏出现在应用程序屏幕的底部，可以让用户在应用程序中的不同部分之间快速切换。标签栏可以是半透明的，也可以具有背景色，在所有屏幕方向上都保持相同的高度，并且在显示键盘时被隐藏。标签栏可以包含任意数量的标签，但是可见标签的数量根据设备的大小和方向而变化。如果由于水平空间有限而无法显示某些选项卡，则最终的可见选项卡将变为“更多”选项卡，该选项卡将在单独屏幕上的列表中显示其他选项卡。

标签栏在任何目标页面中的高度是不变的，iOS 规定它的高度为98px(iOS @2x)。但因为 iPhone X 之后的全面屏手机引入了 Home Bar ，所以在进行界面适配的时候，请务必要加上 Home Bar 自身的68px高度。别让Home Bar遮挡标签栏中标签的展示，这会让两个控件发生操作手势冲突。

二、为什么标签栏要放于底部？

史蒂文·霍伯（Steven Hoober）在对移动设备使用情况的研究中发现，人们会根据自己的设备，需求和背景以多种方式触摸手机，触摸手机屏幕或按钮的用户分三种基本方式：抱着手机的人占36%、两只手使用手机的人占15%，而49％的人依靠一只手在手机上完成事情，除此之外75％的用户仅用一个拇指触摸屏幕。

在下图中，出现在手机屏幕上的图表是近似覆盖图，其中的颜色表示用户的拇指可以接触到哪些区域以与屏幕交互。绿色表示用户可以轻松到达的区域；黄色，需要伸展的区域；红色区域，要求用户改变握持设备的方式。

这意味着：

将常用的“行为”放在屏幕底部很重要，因为只需一键式的交互即可轻松到达这些“行为”。

三、标签栏的三大原则

底部标签栏设计应当遵循三大原则：结构合理、位置清晰、可预测行为。

3.1 结构合理

为了让标签栏表现清晰，两大平台在规范里都对标签数量给出了相同的建议：建议标签栏内的标签个数为3个至5个。因为标签过多会使每一个单元标签的可触空间降低，人们在物理上（手指）难以点击或误触，除此之外还会增加应用程序结构的复杂性。

注：如果你因为产品结构非常繁杂，标签数量想要达到更多，那么在 iOS 中就会给你强硬处理，iOS 人机交互规范告诉产品设计者们：标签栏虽然可以包含任意数量的标签，但可见标签的数量会根据设备的大小(平板或手机)和方向(竖屏或横屏)而自适应变化。如果由于水平空间有限而无法显示某些标签时，最后的一个可见标签将被会被系统强行转换为“更多”选项，需要用户点击“更多”选项之后，系统才将在单独屏幕上的列表中显示其他被隐藏的标签。

3.2 位置清晰

“我在哪里？” 是用户成功导航所需要回答的一个基本问题，我们应当采用适当的视觉提示让用户知道目前所处的位置（选中状态）。在APP应用中我们常见的处理方式有4种：改变图标样式、改变大小、改变颜色、改变展示样式。它们并不一定是独立存在的，可以同时作用于一个标签。

3.3 可预测行为

选取每个底部导航选项都有通向它的目的地，底部导航应当将用户直接引导到相关页面，不应该打开菜单或其他窗口。如果在某些情况下可以使用标签，但在其他情况下则无法使用，则应用程序的界面将变得不稳定且不可预测。我们要确保所有选项卡始终处于启用状态，并说明为什么选项卡内容不可用。例如造作新家APP，当用户处于未登录状态时，就不能查看底部标签“我的”信息，当我点击标签“我的”，就会弹出快捷登陆界面，这样就能让用户明白不能使用的原因是账号未登陆，从另一层面讲也很好的引导了用户注册与登陆。

注：不要使用标签栏为用户提供对当前屏幕或应用程序模式下的元素起作用的控件，如果需要提供控件，请使用工具栏。

四、标签栏的基础规范

在设计标签栏前我们首先要了解它的基础规范，在保证基础规范合理的情况下再去进行设计。

4.1 图标视觉大小

为了保证图标的尺寸大小一致性，我们往往会建立基础的网格尺寸来进行绘制图标，下面就以常用的24x24为大家举例：

网格包含2px出血位。这样可以确保图标在导出时将保留其所需的比例和周围的空白区域，同时还能够很好的平衡图标的视觉重心。

最后加入图标的keyline，keyline由圆形，正方形，矩形，正交，三角形和对角线组成。它可以为您提供图标集中基本形状或比例的一致大小。这使创建视觉上的稳定变得更加容易，并有助于在设计相似比例的图标时有共同的参考准则。

在24尺寸下的keyline构成如下（24尺寸下的出血区域为2）：

当把图标画在网格上时可以很好的规范图标，让它们从整体的视觉上看着统一规范。

4.2 标签栏布局

标签的数量以及标签的展示形式决定了标签的布局形式，标签的常见布局一共有2种：屏幕等分、图标左右间距相等。

4.2.1 屏幕等分

屏幕等分是最常见的标签布局形式，因为不管它存在多少图标，都可以用它进行屏幕划分，计算方法也十分简单，屏幕的宽度除以标签个数就是每列宽度。采用此等划分的案例有：懂车帝、今日头条。

4.2.2 图标左右间距相等

图标左右距离相等多用在标签数量为3个的情况下，计算方法是先去除中间图标的尺寸，然后再左右平均划分等距。相对于屏幕等分，图标左右间距相等划分更为紧凑。

4.3 标签栏热点区域

根据菲兹定律，使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离（D）和目标大小（S）有关。标签栏作为向用户展现产品框架的关键控件，热点区域（可点击区域范围）的设定一定要合理。底部图标尺寸较小，如果将图标作为热点区域，那么可点击区域就偏小，很可能出现用户点击不到的情况，正确的做法是以标签栏的布局作为基础设定，在标签相邻的部分划出一定区域作为不可点击区域，以免用户误操作，参考如下，红色为可热点区域，蓝色为不可点击区域：

五、标签栏的图标样式

在产品设计中，不同样式的图标会给人不同的感受，随着APP风格越来越简洁化，标签栏图标风格紧紧地跟着界面的风格而改变。经过长时间的沉淀，标签栏图标常见的默认设计样式一共可分为四类：线性图标、面性图标、线性+面性图标、轻质感图标。

5.1 线性图标

线性图标通过线来塑造轮廓，在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2px、3px、4px，不同的线条粗细所带来的视觉感受也不同，我在“如何让你的图标具有说服力”文章中提到过，线条越粗那么图标的性格就越活泼、粗旷，线条越细图标性格就越精致、商务，图标使用描边的粗细可以根据产品的气质来决定。

选中状态：当选中状态为高亮线性图标时，选中状态的图标颜色会与默认状态的图标颜色形成较强的反差，但由于线和线的差异性并不强，线性图标没有面性图标更具吸引力（引导性），即使加入了高亮色识别度也不及面性强。airbnb在处理线性图标选中状态时就考虑到了这一点，选中状态下不仅对图标的颜色做了较大变化，还加大了图标及文字的描边粗细，从一定程度上加强了图标的引导性。（注：线性状态的图标选中状态也可以变为面性图标或线性+面性图标）

5.2面性图标

面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感，面性图标的承载信息相对与线性图标来说更重，更具有引导性。

选中状态：面性图标的选中状态为高亮面性图标，颜色可以为纯色、也可以为渐变、透明。爱奇艺的选中状态就采用了高亮面性图标的展现方式，除了把图标底色及文字的颜色加深以外，还加入了品牌色，甚至为了让“会员”标签更加突出，还单独对“会员”标签的颜色进行了修改。

5.3线性+面性图标

线面结合图标相较单一的线性图标或单一的面性图标样式更加丰富、也更富有趣味性。从设计的角度上说，由于元素的多样化，设计更容易获得好的效果。相反，如果运用不当会显得图标非常杂乱，如何有效的把控好两者之间的过度是关键。

选中状态：线性图标的选中状可以为高亮的线性+面性图标。懂车帝在处理标签选中状态时就把图标底部加入了高亮黄色圆形块状，即保存了线性也添加了面，加深了选中状态的视觉重量，更加明确的让用户感知自己所处的位置。

5.4轻质感图标

轻质感图标层次简单，用色素雅干净，采用轻投影、轻渐变的方法设计，这类图标具有一定的立体感，能给人轻盈、简洁、精致的感觉。轻质感图标在标签栏中运用的较少，在特殊情况下才会使用，例如盒马，就把轻质感图标用在了首页标签与盒马小镇标签，首页标签的引入是为了让用户加强对品牌形象的认知，而盒马小镇标签的引入则是为了加强图标的引导性。

*图标样式的常用变化（选中与未选中）

在我调研上百种应用程序中，发现主流的APP标签栏样式变化大致分为六种：线性-线性、线性-面性、线性-线+面、面性-面性、面性-线+面、线+面-线+面。虽然标签的样式变化繁多，但是使用率最多的是“由线性转面性”标签。

六、标签栏的展示形式

标签栏的不同展示形式会给用户带来不同的使用习惯和使用感受，常见的标签展示形式有四种：图标+文字、纯图标、纯文字、舵式。

6.1图标+文字

图标+文字是最常见的标签展示形式，为了让用户能够很好的明白图标的意图，所以在图标下方会配有文字提示，这样就能大大的降低误读的可能性。正因为有文字提示，所以没有必要过于担心图标的识别性问题，那么图标就可以得到更深的延展，可以做的更有趣，更具有产品气质，甚至可以代入更深层次的动效。

例如东家·守艺人APP，专门售卖各种手艺人的亲手制作的各种艺术品，面向的对象是喜欢传统文化的人群，在这样的背景下东家结合宋体的笔画（笔画拆分）把图标设计的更加传统、古朴，创造出具有东方韵味且极具形式感的图标设计。

6.2纯图标

采用纯图标展示形式的产品比较少见，纯图标样式的最大缺点就是识别性低，没有文字说明会导致用户很难找到自己想要去的位置，也不明确自己所处的状态。所以我们如果要设计纯图标形式，那么必须要考虑到图标的识别性问题，间接的舍弃掉图标更多的延展性，让图标变得更规矩。（识别性的提升我之前写的图标文章中提到过，主要可以从大众认知隐喻与真实世界映射两个方向出发去提升）

使用纯图标样式的产品特征：产品单一、领域垂直、小众化、用户群体接受度高。即使满足这些条件下产品使用纯图标标签，用户第一次使用往往也是比较迷茫，需要等用户熟悉后才会得到好转，所以一定要慎用。除此之外不太建议用于电商、视频、学习、社交等领域。

对于我们设计师来说使用纯图标样式的产品中最为熟悉的就是花瓣了。

6.3纯文字（部分含标识）

采用纯文字展示形式能够更直观的让用户进行操作，遵循简单易用的原则。适合用户群体跨度较大的产品，多用于直播类、内容类、简单工具类APP中。缺点也显而易见，图标样式比较单一，没法加入更多趣味化、具有产品特性的元素到标签中。

采用纯文字展示形式的产品有很多，最熟悉不过的就是抖音，抖音的标签默认状态下采用了纯文字形式，选中状态则把文字高亮显示，并且底部加入了圆角矩形，对于用户群体跨度较大的产品，这样的展现形式再好不过了。（抖音在途中改用过图标+文字格式，不过后面也放弃了，我当时用着图标+文字类型的抖音，的确感觉太奇怪！）

6.4舵式

舵式标签可以看为底部标签式导航的一种变体。它在后者的基础上，突出强调了一个标签并且放在中间的位置，样子看起来像攒了一个舵，所以取名为舵式标签。一般舵式标签的颜色、大小等视觉表现会被设计得和其他普通标签有所差异，通过视觉对比的方式吸引用户关注。舵式标签通常和产品框架体现无关，大多数应用程序使用舵式标签是用来承载系统功能。起初是因为社区类APP为了激励和方便用户随时随地地输出UGC内容，所以把触发用户创作/发布的功能按钮放置在标签栏中。

因为舵式标签可以很好地承载产品的重要功能，而被许多的应用程序设计所采用，经过越来越多的应用采用舵式标签，使用的形式也越来越多样，它现在并不再单一地用于承载产品功能，而是配合营销场景、付费场景，给产品的变现、拉新赋能。拼多多就把它拉新的主要入口作用到了舵式图标上，并且为了让图标更加显目，甚至把图标做成了轻质感的形式体现，同时也通过2像素的线性图标减弱其他4个标签的引导性。

七、赋予标签更多内容

标签栏不仅是向用户展现产品框架的关键控件，还可以贯穿整个产品的商业价值的体现，它是连接着整个产品最重要的顶层信息。如果想要让标签变得更加丰富，想要标签内容中含有更多的情感需求、商业需求、运营需求，那么我们可以重点从这两个层面考虑：视觉层面、交互层面。

7.1视觉层面

在视觉层面上我们可以迎合用户的偏好与期望，通过丰富视觉体验的方法来增加内容的观赏性，这样不仅能够很好的向用户传递着产品调性还能吸引用户关注以及引导用户进行操作。

7.1.1设计装饰性图标

装饰性图标仅仅是用来提升整个界面的视觉体验，通过丰富视觉体验的方法来增加内容的观赏性，这样不仅可以吸引并留住用户，还可以让整个用户体验更加积极。

&整体装饰图标

整体装饰性图标的出现往往是为了满足情感需求与商业需求，整体装饰图标并不是一直存在的，它的特点是季节性与周期性，并且它并不具备任何功能性。

从情感需求出发设计装饰图标：例如世界杯火热进行时，优酷为了满足用户的情感需求，就把标签栏的图标全部替换为带有世界杯元素的图案，让用户与其产生情感的共鸣。

从商业需求出发设计装饰图标：现在的年货节，之前的双十二、双十一、618等，每到节日促销活动的时候，很多电商应用都会换上装饰性图标，例如一号店，在过年前就把标签栏图标全部改为含带过年气息的元素，提前来预热活动，引导用户消费。

&单个装饰性图标

单个装饰性图标的出现大部分都是为了满足运营需求，运营为了推出某个活动或功能，往往会单独装饰某个图标的设计视觉，以便于提高图标的引导性，最直接的例子就是我刚才提到过的拼多多。

7.1.2加入品牌基因

我们可以在标签中加入更多的品牌基因，让其与品牌产生联动性，这一形式是大部分应用程序都在做的，我们可以从这6个层面加入品牌基因：品牌颜色、品牌LOGO、品牌元素、品牌名称、品牌性格、品牌吉祥物。

&品牌颜色

色彩是图标设计中重要的构成元素之一，我们可以直接提取品牌色作为图标设计视觉元素。例如站酷，站酷的品牌色是黄色，标签栏的图标（选中状态）就提取了品牌的黄色，让其与品牌调性高度一致。

当然品牌颜色除了可以直接用外，还可以在提取时适当调整色彩的饱和度、明度，做更多的形式变化。例如懂车帝，就在原有的黄色基础上做了些许调整，图标采用黄色透明渐变的处理方式，在与品牌颜色呼应的同时，使得整个图标更加精致、有活力。

&品牌LOGO

提取品牌LOGO是最常用的使用方式，我们从品牌中提取出来的图标一般运用在APP首页标签。因为首页是APP中最重要的页面，也是进入APP默认的页面，把首页图标替换成品牌LOGO，能反复加强了用户对App的LOGO印象，这样不但使App内外形成了视觉联系，同时也二次传递了品牌形象。例如大众点评，它的首页标签就用了品牌LOGO，同时也使用了品牌颜色。

&品牌元素

我们可以在品牌中提取它识别性较强的局部元素作为图标。例如虎牙直播，它就提取了品牌卡通形象的外轮廓作为首页图标。

品牌提取的元素并不只是所见到的品牌视觉形象，还可以提取与品牌内容强相关的元素。例如QQ音乐，它并没有把它的品牌LOGO直接放于其中，而是通过大众所熟知的音符作为首页图标。

&品牌名称

如果你的品牌还不为大众所熟知，那么为了强化用户对品牌名称的认知，可以把品牌名称直接放入标签栏中。例如MONO，就把它的名称分为四个字母分别放在了4个标签内，需要注意的是这类图标不能单独出现，因为它本身不具备识别性与引导性，必须配合文字一起出现，这样才能让用户理解标签的真正功能，我们不能为了设计而设计。

&品牌性格

图标风格可以与品牌性格保持一致，一套带有浓厚品牌感的图标，会让人记忆犹新。例如：每日故宫，它的图标就非常具有特色，结合了品牌的性格以及定位，加入了众多的古代中国元素，整体看起来有股浓浓的古韵之风。

&品牌吉祥物

现在大部分品牌都会含带吉祥物，我们可以在设计图标时提取吉祥物的外形，把它用于产品的标签中。例如盒马，它就把吉祥物做为了底部标签，不过需要我们注意的是如果吉祥物的风格与我们的图标风格差别较大，我们就需要对它做风格化的处理，不然看起来就十分突兀。（盒马对吉祥物做了轻质感的风格化处理）

7.1.3让用户自定义

让用户自定义的标签现在越来越常见，而每个产品对其思考的层面也都有所不同。自定义标签往往出现在个人中心，它会根据用户上传的头像或用户的捏脸生成图标。

&用户头像

目前市面上很多APP都把用户上传的头像作为了个人中心标签展示，例如我们常用的百度网盘就采用了此方案，当用户注册未上传用户头像时，会默认显示系统标签，当用户上传完后就会显示用户头像，并且如果你是会员，还会把会员标示显示在标签的右上方，彰显会员用户的尊贵性。

我们可以很明显的发现百度网盘的底部标签默认状态为线性图标，而个人中心不管默认状态还是选择状态都为面性图标，所以如果你想要加强个人中心的引导性，那么可以采取此方案。

&捏脸

捏脸功能作为SOUL的一大特色，捏脸的虚拟形象赋予了真实人格属性，加强了社交的传播性，所以SOUL决定把用户自定义的捏脸放于个人中心标签中。

7.2交互层面

除了对标签做视觉的提升外，我们还可以对其加入合理的交互效果，一方面可以提升用户在使用产品过程中的乐趣，另一方面还可以为用户提供更多便利，从而增强用户体验。

7.2.1标签功能切换

在不同的状态下点击标签的功能也不一样，一个标签可承载2到3个功能，可以满足不同状态下的用户需求。

&承载2个功能案例

SOUL的广场标签（进入选取页+刷新）

SOUL的广告标签承载了2个功能，当你处于其他标签时，点击广场标签则直接进入到广场页面；当你处于广场页面中时，再次点击标签则会刷新整个页面。

有货的发现标签（进入选取页+上传图片）

有货的发现标签也承载了2个功能，在设计上运用的非常巧妙，当你处于其他标签时，点击发现标签则进入到发现页面；当你在发现页面时你的发现标签则变为了上传图片标签，可以点击上传图片。

&承载3个功能案例

淘宝首页标签（进入选取页+刷新+置顶）

淘宝的首页标签同时承载了3个功能，当你处于其他标签中，点击首页标签则直接进入到首页页面；当你在首页页面第一屏时，你点击首页标签则会刷新整个页面；当你滑过3分之1屏时，首页标签的功能则变为置顶。所以在不同状态下首页标签也会具备不同的功能，并且每种状态下的标签样式也是不同。

爱奇艺首页标签（进入选取页+到达指定位置+置顶）

爱奇艺的首页标签也是同时承载了3个功能，不过它与淘宝有些许不同，爱奇艺并不能刷新页面，而作为替换的功能是直接到达指定位置“猜你喜欢”。

7.2.2触觉与听觉

我们做的设计不要仅限于视觉所看到的，还要考虑到所触摸的、所听到的，我们可以利用触觉与听觉去辅助用户确认自己的选择，当然我们一定要合理利用，反之则会让用户感到十分反感。

&触觉

西瓜视频与今日头条在点击标签栏图标时手机就会发出轻微的震动，给予了用户很好的点击反馈。

&听觉

SOUL点击星球标签时手机就会发出恋爱铃声，在SOUL的产品报告中，SOUL主要面对女性用户，女性用户约为男性用户的2.4倍（女人更偏感性），并且它的主要需求是满足测试、匹配、交友，所以恋爱铃声能够很好的引起用户的情感共鸣。不过铃声有利有弊，当你在特定场景下使用SOUL时，点击到星球标签周围人也都能听到恋爱铃声，实属尴尬，所以我在特定场景下使用SOUL时都会默默的关掉声音。

7.2.3标签动画

精彩的图标动画，对整体的设计具有画龙点睛的作用，降低标签切换时的枯燥感，提升操作的愉悦度和期待感。甚至可以通过 tab 的动画设计给用户传达出整个 APP 设计的品牌及理念。标签动画往往都比较简单，主要有：缩放、旋转、颜色过渡、位移、抖动、填充、线性轨迹、结合容器、元素介质等。接下来我们来看看SOUl、虎牙、汽车之家是怎么做的。

&SOUL-弹性缩放+结合容器+线性轨迹

SOUL的底部标签栏运用到了弹性动画、结合容器以及线性轨迹。带有弹性缩放的标签反馈，让整体的设计更加具有趣味性，相比线性缩放也更有视觉冲击力。图标的运动规则：先从 0 放大到最大（数值根据实际情况设定），然后再回弹至正常大小。除了弹性动画外，它还结合了容器的元素对内部进行了颜色的替换以及单线条的轨迹动画。这样的处理不仅趣味性十足，还强化了选中当前状态，整体标签切换的一致性也较高。

&虎牙-抖动+趣味表达

虎牙一直是我比较喜欢的直播平台，它的底部标签动画也是非常值得借鉴，运用到的动画形式是抖动与趣味表达。抖动是通过图标的左右、上下快速位移或旋转形成，整体的动画效果节奏较快，具有一定的速度感，使整个标签切换的情绪表达较为俏皮、可爱。除了抖动外还在切换过程中代入了更多小元素的趣味表达，赋予了图标更多的性格，对我们的设计进行再升华，从而提高整体设计的质感和趣味。

&汽车之家-结合容器+细节晃动

因为用户群体的不同，汽车之家在标签动画的设计上也相对简单、严谨，它的动画形式主要是结合容器与细节晃动。选中效果由线切换为面，并加入了品牌底色，这样能够清晰的给用户传达当前页面。并且为了不使整体的切换效果变得生硬，在切换过程中采用了透明度与弹性缩放，让其过渡的相对柔和。在细节的处理上也是非常用心，每个图标都带有笑脸的形状，间接的给用户传达“笑脸”信息，在选取标签时内部形状会轻微晃动。整体来看汽车之家的标签动效虽然偏向严谨，但是在细节上也给予用户传达了更多的情感。

作者：黑狮力来源：站酷

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

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

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

评论(0) 浏览(1621)

262022-9

如何让你的图标具有说服力？

纯纯

一、图标的定义及分类

1、图标的定义

图标是具有高度概括性的、用于视觉信息传达的图像。图标常常可以传达出丰富的信息，并且常常和词汇、文本搭配相互搭配使用，两者互相支撑，或隐晦或直白地共同传递出其中所包含的意义、特征、内容和信息。

在数字设计领域，图标作为网页或者UI界面中的象形图和表意文字而存在，是确保界面可用性的基础设施，也是达成人机交互这一目标的有效途径。

2、图标类型（基于功能划分）

2-1释意性图标：

释意性图标是用来解释和阐明特定功能或者内容类别的视觉标记。它并不是一定被点击可交互的UI元素，在很多时候只是有辅助解释其含义的文案。在不搭配文本的情况下用户会借助这些图标来获取信息。不过有时候图标表达的含义可能还不够完整或者清晰，所以会将图标和文案搭配起来一起使用，这样可以大大降低误读的可能性，释意性图标一共可以分为以下三类：

2-1-1纯图标：

例如火球买手APP中的店家“特定标签”，以及图文展示下的“观看数量图标”与“收藏图标”，它们并不需要用文字去解释，用户也知道它表达的是什么。

2-1-2图文结合：

例如造作APP中的“购物车图标”与“收货地址图标”，为了让用户能够很好的明白图标的意图，所以在图标下方会配有文字提示，这样就能大大的降低误读的可能性。

2-1-3纯图标（图标内含文字）：

例如开眼APP中视频封面左上角“开眼精选图标”，它把图标与重要文字结合在一起展示给用户，看起来不仅十分具有个性，而且用户对其理解性也非常强。

2-2交互性图标：

交互图标的最大意义在于可以引导用户进行交互行为，是在产品中不可或缺的组成部分。它们可以在用户不同的操作手势下帮助用户执行不同的交互过程，这种类型图标也是APP中最常见的，常见的交互性图标如：搜索、底部标签、返回、点赞、收藏、扫一扫等。

2-3装饰性图标：

装饰性图标仅仅是用来提升整个界面的视觉体验，它并不具备任何功能性。这类图标往往是为了迎合用户的偏好与期望，通过丰富视觉体验的方法来增加内容的观赏性，这样不仅可以吸引并留住用户，还可以让整个用户体验更加积极，最为大家所熟悉的就是滴滴出行APP中的“小车图标”。

3、图标类型（基于基础样式+表现手法）

图标基于基础样式（线、面、线面结合）+表现手法（颜色、透明度、投影、叠加...）划分，一共可以分为20种类型，每种类型的展示方式也都各有不同。

3-1线性图标（6种）

线性图标通过线来塑造轮廓，在界面中App的图标尺寸并不大，所以如果线过于复杂，在小面积中过多的线会对识别性产生较大的困扰。在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。

3-2面性图标（6种）

面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。

3-3线面结合图标（6种）

线面结合图标相较单一的线性图标或单一的面性图标样式更加丰富、也更富有趣味性。从设计的角度上说，由于元素的多样化，设计更容易获得好的效果。相反，如果运用不当会显得图标非常杂乱，如何有效的把控好两者之间的过度是关键。

3-4拟物化图标

这类图标的特点是通过细节和光影还原现实物品的造型和质感，能给用户极强的代入感，用户可通过对现实事物的联想，快速领会图标表达的意图。但是随着 ICON 的发展，拟物图标也带来了一些问题，因为用户关注的核心永远都是信息本身，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰，所以现在拟物化的图标很少运用在APP界面之内。

3-5轻质感图标

相较于拟物风格不会有太多复杂的视觉元素，层次简单，用色素雅干净，采用轻投影、轻渐变的方法设计，这类图标具有一定的立体感，能给人轻盈、简洁、精致的感觉，在界面设计中，一般在面积比较大的区域我们会使用加入轻质感的图标。

二、图标设计规范

合理的遵循图标规范可以有利于设计师之间合作使用，指导设计师如何规范的去设计图标，以确保企业所有产品图标风格的一致性和可用性达到统一，同时也是为了后续产品更新迭代有可参考的地方。

1、图标尺寸

为了保证图标的尺寸大小一致性，我们往往会建立基础的网格尺寸来进行绘制图标，常用的网格绘制尺寸为：16、24、36、48、64、128、512、1024。这些尺寸并不是固定的，在设计中也会存在特殊的尺寸，例如谷歌在台式机上设计图标，当鼠标和键盘是主要输入方法时，就会使用密集布局，基础网格就会缩小到20。

下面就以常用的24x24为大家展示：

网格包含2px出血位。这样可以确保图标在导出时将保留其所需的比例和周围的空白区域，同时还能够很好的平衡图标的视觉重心。

*在使用常规图标时避免一部分在出血位。

*在使用多个元素的图标时，避免图标拥挤我们可以让其部分出现在出血位，确保它们之间有足够的空间。

2、图标的keyline

keyline由圆形，正方形，矩形，正交，三角形和对角线组成。它可以为您提供图标集中基本形状或比例的一致大小。这使创建视觉上的稳定变得更加容易，并有助于在设计相似比例的图标时有共同的参考准则。

在24尺寸下的keyline构成如下（24尺寸下的出血区域为2）：

当把图标画在网格上时可以很好的规范图标，让它们从整体的视觉上看着统一规范。

3、像素

3-1像素统一

在设计一整套系统化的图标时，我们一定要注意图标的像素大小，要运用相同的网格尺寸设计相同线条粗细的图标，包括曲线，角度以及内部和外部笔划。这样图标看起来才更统一，也有利于后期图标的迭代更新。

当然，描边像素的粗细并不是绝对的，如果我们要做一些密集型的图标时，可以考虑适当的缩小线的像素大小。如下，我们设定的系统图标线条粗细为3px，当你用3px作用于指纹图标上时就会显得非常拥挤，并且在视觉上比其余图标更重，这时我们就可以把它的线条像素降级，设定为2px。

3-2避免小数位

我们在用矢量工具绘制图标时，要仔细看好图标的网格尺寸和图标结构尺寸，避免产生小数位。

4、图标的曲率

曲率简单来讲就是图标中带有圆角的边角度数，只要是带有圆角的矩形就都会有一定的曲率。在图标中曲率的呈现方式有两种：外曲、内曲。

外曲与内曲并不一定同时存在，在特定情况下内部结构可以是直角（无曲率）。如下图：当内部结构都是圆角时会发现整个图标稍显臃肿，这时我们可以把部分内部圆角直接变为直角（也可以改变曲率大小），改变后就会发现图标的整体结构会显得更加协调。需要注意的是如果一个图标做了这样的处理，在同等情况下的图标都要做一样的处理，不然图标会显得非常杂乱，不统一。

5、倾斜角度

根据像素的网格线来设置两条对角线，会让你的图标看起来更清晰。在倾斜的角度选择上，不要出现7.8°、14.2°这样的奇怪数值。我们可以将15°的增量用于倾斜角度（也可以采用其他有规律的角度方案），这样会使得整体的图形变化显得更加规律，也能够满足不同图形的角度需求。

6、断点形态

在做很多图标时都会用断点的缺口来打破“全包边图标”的沉闷感，使图标具有透气性，如果想给图标添加断点，那么要保证断点的形态保持一致。

7、图标间距

确保图标内每个细节和元素都有足够的空间，图标的相邻元素之间的空间在整个图标中不应太小，我们可以定义最小间隙以避免轮廓“粘住”，在24px尺寸下的间距不得小于1px。

8、透视

如果在做图标时牵涉到了透视需求，那么就一定要保证图标的透视角度一致。

9、视觉重心

非中心对称图形物理对齐时视觉上会有偏离感，多个不同形状的图标视觉重心并不在一条水平线上，需要微调才能保证平衡感。

10、图形整洁

在图形的处理上，不要留有多余的节点，干掉多余的节点，保持图形的整洁。

11、命名

ICON命名要求较为严格，涉及到我们切图给开发，所以我们命名争取做对，且需严格遵守规则，正确的命名原则：类型_位置_功能_状态_大小

三、图标的性格走向

每个App应该有自己独特的产品气质，同样图标性格也应当与产品气质保持一致。图标性格一共分为了4个走向：粗旷（粗直）、活泼（粗圆）、商务（细直）、精致（细圆）。

1、粗旷类图标

图标结构特点：线条较粗（或面性图标、线面结合图标）、拐角为直角。

粗旷类图标让人看起来非常饱满、刚正，它更多适用于男性、潮流、有格调类型等产品中。例如VSCO，它的底部标签栏图标全部采用了粗线条的直角设计。

2、活泼类图标

图标结构特点：线条较粗（或面性图标、线面结合图标）、拐角为圆角。

活泼类图标让人看起来十分容易接近，能让人感受到温暖、舒适，它更多适用于电商、社交、母婴、二次元、娱乐、直播、美食等产品中。例如闲鱼，不管是在LOGO字体的处理还是APP内部的图标处理，都是采用了线条较粗的圆角设计。

3、商务类图标

图标结构特点：线条较细、拐角为直角。

商务类图标让人看起来十分规矩、严谨、值得信赖，它更多适用于新闻、政府、商务、工具等产品中。例如工具类的思维导图APP，它的可操作按钮都是商务类的图标。因为这类图标的特性，所以目前我们很少在移动端上看到它，它更多适用于PC端的后台界面中。

4、精致类图标

图标结构特点：线条较细、拐角为圆角。

精致类图标让人看起来非常干净、柔和、显得高级感，它更多适用于旅游、奢侈品、艺术、领域垂直等产品中。例如airbnb，在APP应用中大部分都采用了精致类图标。

四、图标的评判标准

当图标设计完后，我们应该如何去评判一个图标的好坏？很多设计师并没有完整的评判体系，其实我们可以从这五个维度对图标进行评判：识别性、图标气质、协调性、一致性、品牌调性。

1、识别性

图标最主要的用途就是辅助用户理解信息，特别是对于当图标单独存在时，一定不能让用户产生疑虑。要想图标达到高识别，我们可以从这2个方向入手：大众认知隐喻、真实世界映射。

1-1 大众认知隐喻

在互联网普及的今天，许多界面的隐喻图标已被广大用户熟知认可，对于这类隐喻图标用户不用思考身体就已做出反应，我们在设计图标时可以从隐喻图标中添加修改部分元素，从而形成新的图标，这样既能保证图标的识别性，也能做出差异化。

1-2 真实世界映射

选择真实世界中的物品映射，能使人下意识对图标的作用有近似预期，降低学习成本，提高识别度。

2、图标气质

每个App应该有自己独特的产品气质，而我们所做的图标就是要跟随产品的气质。例如当你要做一款二次元产品，你的图标气质就应该偏活泼、可爱、萌、青春，而不是刚硬、严谨、规矩。

3、一致性

一致性是图标的基础，我们在绘制整套图标时要确保它们的基础属性全部一致，细节统一，图标内容的统一在视觉上也更加和谐美观。图标是否具有一致性，就要从以下七个方向去评判：尺寸大小、图形角度、拐角（曲率）、描边、间距、透视、颜色。

3-1 尺寸大小：网格大小是否统一、是否遵守图标的keyline规则。

3-2 图形角度：是否遵循设定的角度规范（15°的增量用于倾斜角度）

3-3 拐角（曲率）：拐角的曲率是否统一，如果图形太多且复杂，那么我们可以根据图标的特性去设定曲率的规则，例如可以设定当边角像素在1-2px时内外曲率为2px；当边角像素在3px时内外曲为2px，内曲为1px；当边角像素大于或等于4px时，外曲为2px，内部则为直角。

3-4 描边：描边大小是否一致。

3-5 间距：是否遵守间距规范。

3-6 透视：透视是否一致，避免在同一套图标中出现正视图/侧视图混杂的情况。

3-7颜色：在图标的配色上要保持一致的规律，采用相同的颜色是比较常见的配色方式。如果采用不同色相的配色方式。也需要保持整体的配色协调，避免出现饱和度、明度反差过大的配色。

4、协调性

一致性代表的是图标的基础，而协调性则代表图标的整体状态，协调性的呈现状态是验证一致性是否合理的标准，当协调性存在问题时，我们就要反过来查看一致性存在的误区并给予修改。在图标的协调性上我们主要审视这三点：视觉大小、饱满度、透析感。

4-1 视觉大小

视觉大小对标的是一致性的尺寸大小与描边大小，当你发现图标视觉大小不对等时，你就要回过去查看你的网格与keyline是否运用正确，确保正确后再查看你的图标是否按照keyline的规范绘制以及描边大小是否一致。（同样尺寸下的图标，从光感上来看描边粗的图标视觉偏大）

4-2 饱满度

饱满度对标的一致性的间距，当你发现图标不够饱满时，你就要去查看你设定的间距值是否偏大，是否合理。

4-3 透析感

透析感简单来说就是留白区域。透析感对标的也是一致性的间距，当元素的描边过大时，我们就要合理的设定间距的最小值，不然整个图标就显得非常臃肿。

5、品牌调性

品牌调性是我们经常提到的纬度，我们打开很多APP都会发现他们的图标设计都非常普通，没有任何特色，过于大众化，虽然都做了一些形式上的改变，但总是与品牌缺乏联动性。其实我们可以结合品牌调性，在图标上做更多的联动、创新。

5-1品牌颜色

色彩是图标设计中重要的构成元素之一，我们可以直接提取品牌色作为图标设计视觉元素。例如站酷，站酷的品牌色是黄色，标签栏的图标（选中状态）就提取了品牌的黄色，让其与品牌调性高度一致。

当然品牌颜色除了可以直接用外，还可以在提取时适当调整色彩的饱和度、明度，做更多的形式变化。例如懂车帝，就在原有的黄色基础上做了些许调整，图标采用黄色透明渐变的处理方式，在与品牌颜色呼应的同时，使得整个图标更加精致、有活力。

5-2品牌LOGO

提取品牌LOGO是最常用的使用方式，我们从品牌中提取出来的图标一般运用在APP首页标签。因为首页是APP中最重要的页面，也是进入APP默认的页面，把首页图标替换成品牌LOGO，能反复加强了用户对App的logo印象，这样不但使App内外形成了视觉联系，同时也二次传递了品牌形象。例如大众点评，它的首页标签就用了品牌LOGO。

5-3品牌元素

我们可以在品牌中提取它识别性较强的局部元素作为图标。例如虎牙直播，它就提取了品牌卡通形象的外轮廓作为首页图标。

品牌提取的元素并不只是所见到的品牌视觉形象，还可以提取与品牌内容强相关的元素。例如QQ音乐，就把音符作为首页图标。

5-4品牌名称

如果你的品牌还不为大众所熟知，那么为了强化用户对品牌名称的认知，可以把品牌名称直接放入标签栏中。例如MONO，就把它的名称分为四个字母分别放在了4个标签内，需要注意的是这类图标不能单独出现，因为它本身不具备引导含义，必须配合文字一起出现，这样才能让用户能易理解。

5-5品牌性格

图标风格可以与品牌性格保持一致，一套带有浓厚品牌感的图标，会让人记忆犹新。例如：每日故宫，它的图标就非常具有特色，结合了品牌的性格以及定位，加入了众多的古代中国元素，整体看起来有股浓浓的古韵之风。

5-6吉祥物

如果品牌中含有吉祥物，我们可以提取吉祥物的外形，把它用于产品的图标中。例如盒马，它就把盒马的吉祥物做了风格化的处理，放于APP的首页标签。

作者：黑狮力来源：站酷

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

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

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

评论(0) 浏览(1032)

232022-9

客户：要多、要大、要好看，能安排不?

seo达人

一、使用比较有特色的风格

既然粗暴、接地气的设计容易被人说成“土”，那么使用一种当下比较流行，或者比较有特色的风格，就能有效增加画面的设计感和时尚感。

▲ 上图使用高饱和度的蓝色和绿色组合搭配，以及文字以背景的方式环绕在产品的周围，都是近几年比较流行的设计手法。

▲ 上图使用扁平效果的描边色块来进行排版，既能突出文字信息、视觉效果也很时尚。

▲ 把高饱和度对比色、扁平风、几何图形、文叠图等一些常在艺术海报中使用的技巧，用到促销海报中来，这种接地气的设计是不是也变得高级了很多?

▲ 用波普风格设计促销海报，效果也是很亮眼的。

二、把文字图形化

有很多海报设计需求是以文字为主的，客户也并没有提供配图，如果只展示文字，效果很容易单调，这时就可以尝试提取文字中的关键词，设计一个图形符号与文字信息进行巧妙组合，文字与图形符号共同组合成视觉主体。

这么做既可以增加画面的美观性、视觉冲击力、形式感，同时文字的面积占比也不会被大面积压缩，保证信息的清晰易读。

▲ 把文字与光线组合在一起，既突出了文字、也加强了画面的视觉冲击和美观性，同时，电子产品的品类调性也得到了体现。

▲ 上图把文字与汉堡图形组合成一个主视觉图形，加强了画面的形式感。

▲ 上图把文字与打板器组合成主视觉图形，打破了纯文字的单调感。

▲ 上图把文字和图片放在一个外卖袋里，加强了设计的带入感和产品属性。

三、把文字场景化

其实这也是文字图形化的一种形式，只不过不是把文字与具像的图形符号结合，而是把通过把文字进行扭曲、变形、添加元素等方式，使其具备抽象的场景特征。

▲ 该海报把主要信息组扭曲成墙面和地面的效果，创造出一个立体空间。

▲ 这件作品与上图的设计手法有点类似，也不知道是谁借鉴的谁。

▲ 上图把“敢为先”这个几个字拉大，布满月球后面的整个天空背景，就好似一扇巨大的城门。

四、图文组合

即把图片与主要文字组合在一起，共同形成画面的主视觉，而不是相互独立，把文字当成图片的配文，常用的图文组合方式有图叠文、文叠图、图文交叉等。

图文组合的设计方式可以加强图文之间的联系和对比关系，使画面更整体、更聚焦。

五、加入人物或动物插画

如果版面中只有文字，或者只有文字和产品图片，那么版面都容易显得无趣、缺少细节，在画面中加入人物和动物而可以增强代入感和亲切感，不过这类实物素材都有版权，而且比较常规，而改成插画素材就可以有效解决这一问题。另外，最好要让这些插画元素与文字或产品发生互动。

▲ 上图加了一个卡通的厨师以后，除了画面更生动、更有趣，也会给人一种值得信赖的感觉。

▲ 上图的排版和形式其实比较普通，但配上搞怪的插画后，海报变得有趣了许多。

▲ 版面上方的熊猫加强了海报的吸引力和趣味性。

六、精致的排版和配色

下面的这些促销海报并没有特别的风格、巧妙的创意，也没有新意的设计形式，只是通过精致的排版和漂亮的配色，把大量的文字和图片素材合理地编排在一起，效果照样不错。

▲ 信息虽然很多，但是层级分明、清晰阅读，大量使用色块进行排版，而且在编排上有很多细节的变化，颜色为类比色组合。

▲ 图片和配色很有食欲，文字排版简单、清晰，但又通过不同的色彩、字体、字号、修饰手法将不同信息进行鲜明的层级区分，文字与图片有关联但互不干扰。

▲ 外边框的处理以及版面中的圆点底纹使版面显得更精致、更有设计感，版面虽然排得很满，但是主次分明、信息清晰易读，三组食物所搭配的文字虽然不大，但是细节满满、井然有序。

▲ 大量的手写字体给人一种“纯手工制作”的感觉，与朴实无华的产品形成呼应，文字全部集中排在版面的上方和下方，而中间区域完全留给了产品图片，视觉对比鲜明。

抛开客户的需求以及效果谈设计的美观性就是耍流氓，把文字缩小、加一些没什么意义的英文、使用一些酷炫的排版技巧，可能会让你的设计更精致、更洋气，但如果抛弃了客户的需求和消费者真正关心的东西，那么我们并没有真正解决问题，如果客户要大、要多，那么我们就争取给他一个又大、又多、又好看的方案。

作者：葱爷

转载请注明：学UI网》客户：要多、要大、要好看，能安排不?

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

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

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

评论(0) 浏览(1215)

232022-9

中后台加载-被忽略的体验细节

纯纯

undefined

大部分设计师应该都遇到过这种场景：在做设计前并没有考虑到加载，但在进行还原度走查或者验收的时候才发现，由于某些页面数据请求较慢，导致在页面中会出现空屏状态。这时才想起需要在这些页面添加动画来承载页面的过渡。

归根结底是因为设计师在设计过程中，更多关注页面本身，而很少去思考页面在呈现过程中何时会出现白屏状态，都是后知后觉去补充完善。加载作为必备的一环，却总是被忽略。目前很多B端产品在这方面都没有一个系统合理的规划，导致系统的加载体验缺失或者不统一。

因此希望这篇文章能够讲清楚中后台加载出现的场景和规则，对需要深入了解加载以及在制定加载规则的设计师朋友们带来一些帮助。

undefined

加载通俗来讲就是用户从触发页面操作，到页面最终呈现的一个等待过程。这个过程始终存在不可避免，只是时间有快有慢。快的加载只需要几百毫秒就结束，但慢的加载就可能会达到几秒甚至十几秒，让人产生焦虑。

而为什么会有如此大的差距，这就需要从页面渲染的整体过程来进行说明。当我们从浏览器输入网址，再到我们看到完整页面的这个过程，网页到底经过了哪些步骤呢。经过资料查询和与前端确认，整体过程可以阐述如下：

从这里我们可以看到页面的呈现是程序经过了一系列操作才最终呈现到我们面前的。在这里可以将其简化为四个阶段：用户操作功能→页面向服务器发送请求→服务器接受并返回数据→页面呈现。

而决定整个页面加载快慢的就在于请求与数据这里。一般我们可以将页面的数据分为2种类型：静态资源和动态资源。

静态资源：前端的固定页面，这里面包含HTML、CSS、JS、图片等等，不需要查数据库也不需要程序处理，直接就能够显示的页面。可以简单理解为你页面上的固定字段和结构。这种页面一般加载速度比较快，比如我们看到的展示型官网一般都是前端写好的静态资源。

动态资源：而对于页面上的动态变化的，需要程序处理或者从数据库中读数据，能根据不同的条件在页面显示不同的数据，比如表格数据、统计数据等称为动态资源，这种都需要调用后台接口来进行返回，因此加载速度相比于静态资源就会更慢。

而它们的区分点用下图可以表示：

可以看到静态资源基本是直接返回，而动态资源还需要连接数据库调取资源，尤其是在遇到数据库调取较慢时就会花费更多时间。而我们加载缓慢的大多数问题，也基本上更多出现在动态资源的获取上。

undefined

当我们清楚加载形成的原因，接下来要做的就是在需要加载的地方对其进行处理。这也是在设计过程中我们经常遗漏的地方。我们先看一下目前常见的2种处理方式：「默认处理」和「使用进度指示器」

2.1程序默认处理方式：直接显示

当我们对加载过程不进行任何处理时，程序就会以默认的方式进行-即根据资源获取速度一步步呈现。可以看到嘿店后台的处理过程就是一种默认处理方式：

但是这种做法就会导致我们在页面加载过程中会出现空屏状态，比如上图切换到概览时出现了空屏状态，尤其是当遇到了网络缓慢的情况，会造成在加载时页面停留在当前状态下不动，往往会让用户陷入到「系统故障」的错觉。

2.2通用处理方式：进度指示器

这个名词说起来可能比较陌生，它指代的就是我们平时经常看到的加载动画、骨架屏或者进度条等。进度指示器的作用就是告知用户当前页面并没有故障，而是正在读取数据。

通过添加进度指示器来对空屏状态进行承载，能够减轻用户的焦虑感。目前很多B端产品更通用的形式是添加动画来过渡。

但是在体验过程中很容易发现一个问题，就是在产品的整体加载过程中，某些空屏状态是没被加载动画覆盖到的。当这些没被覆盖到的加载过程过长时，很容易出现焦虑感。比如神策数据在左侧列表切换时的加载过程就没被覆盖：

想要更全面的把加载动画覆盖到所有页面，我们就需要弄清页面在哪些状态下会出现空屏状态，从而制定统一的加载动画规则。这个问题可以先思考一下，后面解答。

undefined

在制定统一加载规则之前，我们需要明确一个概念，就是加载的模态与非模态。

3.1模态加载

模态加载的含义就是当前加载会中断用户其余操作，用户在这个期间只能等待加载而不能进行其他操作（有的模态会提供取消按钮）。如果你的页面涉及到以下2种情况，可以考虑使用：

1.用户当前的操作本身不能与其他操作同时进行。比如系统更新，或者工具类的导入导出相关操作，我们只能等待更新、导出完成才能继续进行后续的操作。这时候可以使用模态加载来承载，比如protopie的导入操作；

2.当用户进入到一个全新的页面时，这个时候页面什么都没有，我们只能等待页面加载完成才能进行后续的操作，因此在这种情况下也可以采用模态加载，比如我们刚进入Asanan产品页面看到的首屏加载动画：

除了上述2种情况外，你也可以根据你的业务场景来进行模态加载的选择，但建议是尽量少用模态加载，其会对用户的打断和干扰性比较强。

3.2非模态加载

非模态加载的话，这种加载通常只会出现在需要加载的部分，不会中断用户其他操作。对用户干扰比较小。比如我们常见的功能切换加载、数据筛选加载等都属于非模态加载。

非模态加载相比于模态加载会更轻量，因为用户随时都可以打断也不会影响到其他操作。因此建议在大部分情况下都可以使用非模态弹窗来进行承载，比如飞书的左侧栏切换操作：

undefined

接下来我们进入正题，在这里我从加载的角度将网页整体加载过程分为呈现加载规则和操作加载规则。

我们先谈页面呈现规则。前面已经明确加载产生的原因和类型后，我们就可以开始为我们的产品制定统一的加载规则，以保证后续页面加载的一致性。

4.1 页面的加载过程拆解

在拆解页面的加载过程前，我们进一步阐述之前提到的渲染原则，从前文中提到最后会经过「解码」和「渲染」2个步骤，这也是决定了我们看到的页面的最终呈现顺序：

1.页面的渲染顺序

我们看到的页面是由HTML、CSS和JavaScript来进行构成的。HTML可以看作最简单的框架、CSS则是赋予了框架样式，JavaScript则是负责页面中的交互(当然JS也可以控制样式，这里只描述主要功能)。

页面在「解码」阶段，拿到的HTML文档会被解码为DOM树，同时将CSS文件解析成CSSOM，这两者结合后一起渲染页面，JS一般是在最后渲染。所以逻辑上就是框架和样式一起渲染，最后渲染交互。视觉的角度来讲就是先看到元素样式，然后才能进行对应操作。

2.页面呈现的视觉顺序

由于浏览器渲染顺序一般会根据代码的顺序进行渲染，而代码在页面中的构建一般也是按照页面的上下和左右的顺序去写的，因此我们看到的页面的视觉呈现顺序也是遵循从上到下，从左到右。

所以几乎所有的产品都是先看到顶栏，然后左侧边栏，然后其他内容。因此我们可以通过这个原则来拆解对应的页面，我们按照页面常规结构可以将其分为三个加载部分：顶栏、左侧导航栏、内容区域。而其加载顺序如图所示：

当知道对应页面的渲染顺序后，我们就能够清楚在页面渲染的过程中哪些地方会出现空屏了。因此将页面加载过程拆解为如下顺序：

undefined

我们的加载动画需要承载的就是上述这些白屏的地方，从而将加载细化为三种场景的拆分：全局加载+局部加载+内部加载。如图所示：

undefined

通过这三种加载就可以涵盖页面所涉及到的所有部分。接下来详细阐述一下这三种类型的定义和用法。

4.2 全局加载

如上图所示，全局加载的目的是为了覆盖用户从输入网址到页面的资源渲染的这个中间过程的空屏状态而存在的。而这种状态会涉及三种场景：

1.通过网址进入到一个新的页面时；

2.通过鼠标右键或网页刷新按钮对该页面刷新时；

3.通过页面操作需要新开页面时。

该全局加载的动画构成为：

1：覆盖整个页面的加载，由纯白色+加载动画构成；

2：加载类型为模态加载，因为用户在这种页面状态下并不能进行其它操作。

undefined

但在这里我们需要注意全局加载的开始和结束时间：

开始时间：当进入页面时立即呈现加载动画；

结束时间：当页面加载出顶栏的时候，此时停止加载。

为何要这么处理结束时间，原因其实图中已经给出了。这里再解释一下原则：只要有页面资源返回，我们的全局加载动画就会结束，随后启用局部加载来承接后续的状态，避免用户在当前状态长时间等待。而顶栏在一般情况下都是最先加载出来的，所以以顶栏出现作为结束全局加载的标准。当然如果你的结构没有顶栏，可以以左侧栏来作为结束标准。

4.3 局部加载

局部加载是用在页面整体框架加载的过程中，承接在全局加载后。局部加载的使用场景可以概括如下：

1.顶栏加载结束后，用在剩余框架的加载效果（具体体现为左侧边栏和右侧内容区域）；

2.对于涉及到局部页面的切换操作都会进行局部加载（比如左侧边栏的切换）；

光看文字可能不是特别清晰，在这里可以举一个动态的例子来帮助理解：

上述展示的是在页面呈现的时候一个完整的局部加载。在这里需要注意的是我们首次渲染和第二次渲染在加载动画上是可以有区分的，可以通过程序控制让这种加载动画只在初次加载时出现。

第一次加载时出现是因为我们需要有加载动画来承接框架首次加载的空屏时间：

但第二次的时候由于有缓存（缓存会加载我们的静态资源，能够让我们的页面框架在第二次时更快显示），这样在读取框架时基本不需要加载，我们就可以通过程序来直接去掉其中的局部加载动画，直接显示框架来进行呈现。

undefined

目前在飞书和钉钉等B端产品后台均采用了这种处理方式。可以看到图中我在第一次切换到角色管理时是有碰撞小球的局部动画存在的，而第二次再次进入时则直接出现框架。这样既能够保证加载动画能够覆盖所有的空屏状态，又避免了局部加载动画的频繁出现。

4.4 内部加载

内部加载是用在页面内部不同模块数据间的加载。当框架都已经加载结束，但某些数据由于接口比较慢，此时还没有返回，这时我们就可以用内部加载来进行承载。这应该是我们更常见的加载情况：

在进行内部加载的时候，需要注意，内部加载的时候一般标题是存在的，因为标题基本都是固定的，所以能够很快被拉取。比如Zoho的内部加载，加载时标题已经出现了：

通过这三种类型的加载，能够覆盖从用户输入网址，到页面渲染完成这个页面呈现过程中的全部加载场景。

undefined

说完页面的呈现规则，再谈页面操作加载规则。页面的操作其实对应的是页面控件的反馈。而我们的常用的控件比如有按钮、tab切换等。我们不仅需要考虑控件本身的加载状态，而且需要考虑到控件影响的其他页面范围。

5.1需要考虑控件本身加载

控件的加载并不是随时都需要，我们要根据实际的数据量大小及业务场景来选择性使用。目前我们需要考虑的控件及其加载状态主要有如下：

undefined

比如图中的按钮的加载状态是必备的，在很多场景下都会用到。但是下拉列表和级联列表，在一般的场景下都不太需要进行加载，当遇到列表中的数据特别多或者调取特别慢时就可以考虑为其加上加载状态。

5.2当控件操作会影响到页面其他元素

这种控件比如日期筛选、表格筛选或者保存等操作，当你切换筛选条件后所有与其相关的页面元素都会发生变化。在这种情况下我们需要考虑到被影响元素的状态。目前的设计实现上有两种做法：

1.被影响元素不可被操作，且该区域有遮罩+加载动画来覆盖；

2.被影响元素可进行操作，无任何动画，但操作并不会影响之前提交的结果；

这两种方案一种是利用遮罩防止用户无效操作，另一种则是保持了足够的操作自由性。个人在这里更倾向于处理方式1，我认为被影响的元素是需要有遮罩+动画的，来避免用户在加载期间对其进行无效操作，比如示例中方案2后面修改的名称是没有被系统保存的。

需要注意的是如果在产品中使用方案1，我们的遮罩区域只需要覆盖被影响的元素就可以了（保存这种可以将按钮一起覆盖），比如通过筛选导致图表数据发生变化，这时只需覆盖图表区域，而不用覆盖筛选区域。这样的好处是当某些筛选数据出现加载过慢问题时，用户可以通过切换筛选项来打断当前加载。

上述描述的操作都是针对于当前页加载。当控件导致页面刷新或者跳转时，则整体遵照页面呈现的规则进行加载。

undefined

上面阐述的加载已经完全能够覆盖我们页面整体的加载，但是还是需要提及一下骨架屏和进度条这两种加载形式。

undefined

先说骨架屏。实际上骨架屏的使用效果体验是优于加载动画的体验的（骨架屏的加入使用会让用户感觉网页出现的更快）。那么为什么在大部分的B端业务页面中没被用到呢，主要有2点原因：

1.每种骨架屏都需要进行对应的定制开发，需要与加载后的页面框架保持一致，这会增加了开发成本。

2.中后台的业务界面对来说固定结构的页面会较少，这对于骨架屏的使用机会就相对较少。

个人认为在前期可以以统一加载体验为主，在后期业务相对成熟后，可以针对固定结构，通过骨架屏的使用优化加载体验。

再说进度条。我理解的进度条的使用条件：对于加载时间较长的规定场景可以考虑用进度条来承载，比如我们常见的游戏加载中进度条就用得比较多，因为游戏一般资源比较大。还比如figma在进入设计文件的过程中也采用了进度条加载也是因为设计文件可能会很大。

进度条在特定场景下能够缓解用户焦虑，让用户知道进展。但进度条在多数情况下都抓取不到程序的真实进度，这也会导致有时候我们看着加载到99%，那最后的1%迟迟加载不出来的的原因。目前很多中后台产品对于进度条加载使用相对较少的原因，很大程度是没有那种加载特别长的场景。

因此这两种加载场景的使用会更加定制化，如果需要使用请根据具体的业务场景来进行选择。

如果把加载动画等比作页面加载的外在，那么缓存和加载策略则是页面加载的内核，合理使用缓存和加载策略可以从根本上提升我们页面的加载速度，让用户更快速地看到页面。

7.1 关于页面的资源缓存

大家肯定听过缓存这个概念，前后端都可以使用缓存。缓存就是数据交换的缓冲区（称作Cache），是存贮数据（使用频繁的数据）的临时地方。在这里主要讲一下浏览器缓存：

undefined

从这张图可以看出，服务器在请求数据时，会进行缓存的判断，如果有缓存则首先读取缓存，如果没有则从服务器中拿取。调取缓存会在很大程度上提升页面的加载速度，缩短了从服务获取数据的时间。通常浏览器会主动对页面的静态资源进行对应的缓存，这也就解释了我们第二次进入页面会比初次进入页面时加载快的原因。

但程序其实也可以对动态资源（也就是需要从数据库等拿到的资源）进行缓存的，并且可以设置缓存的过期时间（比如设置过期时间为1小时，那么1小时过后就会重新拉取新资源）。对于某些动态资源拉取过慢并且更新频率不高的我们可以采用动态资源缓存的策略，从而提升整体的页面加载体验。

7.2 加载策略的正确使用

现阶段我们常用的主要有下列6种加载策略：

加载策略的本质就是通过对应的加载设置来缩短产品与服务器交换数据的时间，接下来我们详细看一下每种加载策略的具体使用策略：

7.2.1懒加载

懒加载是当内容落入视窗被用户看到时，才会进行加载。这种比较节省资源和减轻服务器压力。对于当前页面内容很多的可以采用这种加载策略。而这种加载策略的设计，能够让用户更快看到当前屏幕内的内容，减少等待时间。

比如苹果官网的加载策略就采取了这样的一种方式。我们可以看到右侧的资源只有在我们向下滚动出现在屏幕中时才会进行对应的加载，这样能够保证用户在进入网页第一时间看到首屏内容，并且用户几乎感知不到这种加载延迟。

7.2.2预加载

预加载是在页面空闲的时候就把用户即将用到的资源加载完存到缓存中，等用户需要使用时，通过缓存直接调用呈现。比如用户在看A页面的时候，就可以通过预加载来准备用户需要的B页面资源。当用户需要B页面的时候，立刻就可以呈现。

比如某些页面在实际中加载比较慢，这个时候就可以考虑是否用预加载的策略来提升网页整体加载速度。比如知乎的视频和文字在都进行了对应的预加载。即使当你处于断网状态（图中我将页面网络切换为断开状态），可以看到依旧可以点击全文进行查看和视频的部分预览。

7.2.3分步加载

当页面中有文字和图片时，优先加载占用网络资源小的，比如文字资源，然后再进行占用资源较大的加载，比如图片资源。通过分步加载也能有效减少页面等待时间。比如大众点评等图片很多的网站往往会采用这种加载策略。

7.2.4分页加载

分页加载是我们目前很常见的方式，比如我们常用的百度和谷歌等搜索引擎都是使用的分页加载，分页适用于数据量比较大的内容，比如表格数据或者大数据搜索场景可以使用。

分页加载可以理解为当前获取到100条数据，但是将100条数据分别拆成5页每页20条数据提供给用户，这样也可以让用户减少等待时间：

在目前还有一种滚动分页的加载，就是不提供视觉上的分页，而是当用户进行滚动时，自动加载一定数量的内容，这样从用户的视角看就是一个连续不间断的数据展示。比如一些资讯类的网站就是采用的这种加载策略，有的也把这种滚动分页的方式称为自动加载。

7.2.5延迟加载

这里讲的延迟加载更多的是一种防护加载机制，一般延迟设置的时间为300ms。这里的延迟加载有2种使用，第一种多用于搜索，通过延迟加载能够让用户更好进行连续输入，避免搜索结果被高频率刷新，同时缓解服务器压力。如下图，可以看到我在输入1后会有个延迟才出现加载列表，并且我在连续输入12306的过程中是没有对结果进行更新的，当我输入完后才更新。

第二种则是通过延迟加载可以更好防止反复操作。当用户在同一组件上面进行切换时，如果该操作小于300ms,则只记录最后的点击操作。这种情况可以用在我们的表格翻页和开关等状态上，防止用户疯狂点击导致数据反复请求和屏幕闪烁的情况。我们可以通过下面这个组件演示例子来进行对应的感知：

延迟加载更多用于上述2种场景，对于其他情况的加载，直接加上就可以了，并不需要刻意设置延迟。

7.2.6后台加载

这里想要表达的含义是当用户在操作后，客户端立即反馈操作成功，然后把请求放到后台与服务器交互，这一过程用户不需要了解，不需要等待。无论在什么网络环境下你基本上都能操作成功。比如微信的朋友圈发布就是这样的操作，即使你在断网的情况下都能够立刻发布，但实际上这个时候并没有发送成功，还需要上传到服务器后才你的朋友们才能看见。

这样的好处是用户使用起来非常流畅，但是坏处就是，当操作不成功时，用户并不能及时进行感知，仍然以为操作已经成功了。所以这种场景我们也需要根据场景进行对应的判断和选择。对于复杂的B端场景个人建议慎用或者不用这种操作，毕竟很多发布的功能会同时影响很多业务线。

这里就拿微信的朋友圈发布来进行举例，下方手机状态都为断网状态，可以看到微信立即发布，而贴吧在这种状态下提示网络错误。

通过这些加载策略的选择性使用，能够在特定环境下提升我们系统的整体使用体验。因此我们需要对这些加载策略有一个比较全面的认识，这样我们不仅知道加载慢的原因，还可以利用加载策略去提升页面性能。

在整体的加载过程中，别忘了考虑加载异常的情况。在通常情况下我们会我们会遇到网络速度过慢或者突然断网这两种状况让页面一直加载不出来，这时我们需要考虑对长时间的加载过程进行处理。

通常做法是我们要对加载状态有一个最长时间的限制，一般为加载不超过10s，超过最长时间后就进行异常状态显示（提示语+刷新按钮）。这样用户可以选择重新加载或者离开此页面，而不是一直等待。

在这里还想到一点，就是对于编辑页面，我们应当加入网络连接是否异常的判断，比如当进入到编辑页面后，如果遇到网络断开，需要在页面的顶部加上常驻提示条【当前网络连接断开】，这样用户能够及时进行察觉并修复。避免在无网环境下继续输入。这对于某些需要输入很多内容且并不提供本地保存的页面来讲是非常有必要的。

加载在设计中是非常容易被忽略的模块，因为在大部分情况下网络速度都较快，人们很难深刻地感受到加载过程。但加载却在产品运行中起着不可或缺的作用。通过这篇文章想要告诉大家的有几个点：

1.我们需要明白加载为什么会出现，这个过程是怎么样的；

2.加载的通用处理手段是怎么样的，非通用处理方式有哪些；

3.通过缓存和对应加载策略能够让页面加载速度有本质上的提升。

这样当我们在页面上遇到加载速度慢的问题时，在为其加上动画承载过渡的同时，还应该思考其加载缓慢背后的原因，是因为数据量太大还是加载策略的相关问题，是否可以将其进行懒加载或者分步加载，这时我应该去找前端或者后端如何沟通。从源头上解决加载时间长的问题，才是后续产品设计过程中的长久思路。

作者：蒙东东来源：站酷

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

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

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

评论(0) 浏览(937)

232022-9

B端产品设计思路&高频设计要点笔记

纯纯

★目标导向·B端产品的商业目标

设计开始要了解设计的目标，用户的行为都是有「目标动机」的，B端产品的业务目标往往都是为了为企业或个人为了解决某一项工作上的问题。
当设计过程以「目标」为出发点，可以增强设计判断力，输出更有效设计解决方案。

B端产品的设计原则：提高使用者的工作效率，同时降低业务链路的操作及学习成本。

当你有了目标以后你的设计就可以围绕这个目标展开：

★设计价值·B端的设计价值体系搭建

对于B端的产品而言，用户最关心它能为实际的工作带来哪些便利，而并非这个界面做的多么的好看，以及用户体验多么棒。所以B端产品设计价值优先级往往是 功能性＞表现力

B端产品设计需要站在整个业务线全局角度去把控各个设计点，不再是「用户体验」至上，为实现「任务目标」，「牺牲」一部分「用户体验」是必要的，这个时候视觉和一些体验就不那么重要了。通过调研业务去了解各个角色职能的工作流程、相关痛点，让产品能用，好用。

要点1·了解项目的业务流程

理想的B端设计需要了解业务目标以及业务链路中每一个环节的过程。将业务逻辑理解透彻再考虑应该如何进行设计实现。

这样做的原因当你站在使用者的角度进行同理心设计可以更好的帮助用户完成他要完成的工作，从而提高效率。产品原型一般基于「功能」本身，而设计师从用户实际场景规划用户的任务流，可以优化产品逻辑，补全缺失场景，通过了解业务流程也能给予创造性解决方案

要点2·用户调研与场景化设计思维

B端产品往往是是服务于企业用户，用户画像需要专注于用户特征中的「群体职业身份」这类人无论性别、年龄、地区有何差异，他们都是一类角色，我们的产品要提供给这类角色使用，而不是某个人使用。

由于B端设计师不是产品的用户，无法沉浸在与用户相同的真实场景中，建立共情。所以设计师最好亲自感受一下业务流程，获得一手的用户洞察，

获取B端用户反馈的方式

「通过业务人员交流」业务人员可以帮助我们快速高效的描绘出典型客户案例的用户画像。
「实地走访」：观察在自然状态下用户如何完成工作任务，并提问题：「你怎么做？」或者「为什么这么做？」
「建立种子用户群」：聚集活跃的种子用户群，收集意见和建议，并在群里验证设计想法。
「亲身体验」：成为真正的客服小二，接听客户电话，记录自己在工作台场景下的真实体验和感受。

获取用户画像后了解该群体背后工作感受，行为习惯，以及任务类型。

要点3·情感化设计心理

安全感和信任感建立：人们越来越关注隐私和信息安全。如果你要求必须填写敏感信息，请确保使用字段下方的注释文本解释为什么需要这些信息。

实际工作中我们曾经自动获取过用户之前表单中填写的的支付类账户信息，在收集的用户反馈中，用户会感觉到隐私正在泄露并让用户信任感降低。所以即使用户输入体验会更好，但是考虑到信任感，敏感类信息请不要自动获取。

让用户感受到你正在帮助他操作：Jakob Nielsen于1994年提出的十大可用性原则中，其最后一条原则Help and documentation（帮助性指导原则）是搭建B端用户帮助体系的核心准则，在理想情况下，没有帮助文档就可以使用系统是最好的，但在某些情况下（尤其是B端系统），提供一些引导性的帮助其实是必要的。

B端系统中可以尝试搭建用户帮助系统：

要点1·降低学习成本

对B端产品来讲，设计师在设计的时候是不需要耗费太多的思考的，只是去按照交互设计师的规划堆砌图表和列表。但是对于使用者来讲，其中纵横交错的商业逻辑和业务逻辑却是给用户搭建了一个十分高的门槛。

要点2·保持高效

例如修改资料的时候，使用弹窗、浮层等等交互操作会减少页面跳转的频率。

但是与此同时，减少页面跳转并不代表真正的高效，例如瑞幸的供应商系统，供应商所产生的订单需要按照指定的流程一步步进行操作确保不会出现问题这样虽然页面的跳转增加，但是可以避免操作出错给用户带来更大的困扰。

要点3·整理信息/引导视觉

设计要根据用户的浏览习惯和视觉动线。要尝试引导用户的视觉，举个例子，如何引导：

设计侧核心要点

B 端产品是以业务为核心，是需要用户长时间操作并完成工作任务的，对于操作和展示内容无关的元素，越少越好。视觉为功能让步，追求简洁、清晰、克制、理性的视觉风格。设计语言尽量做到不干扰不打扰。

要点1·表单设计

输入顺序：先易后难；先必填后选填；先公开信息后隐私信息；有关联性的合成一组，特殊问题后置，用户输入时、不会觉得突兀、门槛太高。

自动对焦（PC端）进行表单页面，自动对焦第一个输入字段可以引导用户开始进行输入。

标题：标题是对下文最短最精的概括。用户一般都会跳过表单内容，而且几乎都不会仔细阅读那种特别详细的描述。所以用最少的文字说清楚一个表单的目的尤其重要。
用户应该可以看一眼标题就知道他们应该怎么做，而不是非得把剩下的全部看完，
（附：这部分感兴趣的同学可以搜索“微文案设计”）

在表单编写方面，或者说各种写作中，删减词语都要比添加词语更加有益。在仔细检查不必要的词语后，文章会更笃实，更连贯，更吸引人。

这个链接有什么用？关闭是点击右上角的按钮吗？如果并没有增效，那就是减效。每一个字，每一张图片，都不是100% 必需的，这些都会降低你表单的转换率。

删除一个字段，表单提交率就可以提高 26%。（本篇笔记原本有12000余字，为了避免浪费大家时间，我仅保留4000余字的高频要点内容）

PC端产品提示文字尽量不要放在框内

提示文字存在于框内常用在移动端，它的空间占比很小，对移动端的小屏来说，是非常友好的，但如果在交互上处理不好，会有很大的缺陷。

内部标签结构，只有提示性文字，用作提示用户应该输入什么内容，但用户在输入的时候，内部的标签/提示性文字就会消失，这时候，用户会失去它是否输入准确的唯一判别标准。

减少打字需求

字段输入通过部分人工智能自动将操作步骤可以变得简洁高效，也包括诸如一些、自动定位、图片识别、自动获取，第三方导入等方式来使用户的效率得以提升的功能。
打字是在线表单中最耗时、最密集的部分，而且经常会导致错误——尤其是在手机上。用按钮、滑块替换文本框并使用自动完成功能，将减少工作量并提高转化率。

使用文本块

文本块会更容易让用户记住内容：例如银行账户、电话号码等等。它指的是将信息排列成「块」的过程，使内容更容易保留、处理和回忆。一份研究声称数字 3 是帮助人们吸收和回忆信息的神奇数字。

表单的提示文字和定义格式要求

如果一个字段需要特定的格式输入，请告诉用户。例如密码要求、语法规则、编号间距等等。

用输入框长度提示

可以用输入框长度提示用户输入的内容是否正确。
德莱厄斯研究所的可用性研究发现，如果一个字段太长或太短，用户开始怀疑他们是否正确理解了标签。

在用户输入的时候，右下角告诉用户已经输入了多少字，如果超过限定字数后输入框红色，用来警示用户，此时用户依旧可以再输入字符，但当出现警示，用户继续输入一定数量字符后，系统需要强行限制无法输入新的内容，避免用户没有察觉到警示反馈导致的过多输入，从而浪费的时间。

（该部分感谢酷友@sh9513 提出的反馈）

如果用户填写错误，向用户显示错误发生的位置，并说明原因。

单选框

如果你的表单里的选项少于5个可以列出所有选项供用户快速选择，当大于5个时候可以尝试用下拉框解决。
将第一个选项作为用户最有可能的默认选项，且是最安全的选项，提前预判用户的操作提升选择效率。排列方式推荐数直排列，竖直排列相对于水平排列容易读取和定位，提高用户的浏览顺序。

解释隐私消息

当前需要用户填写相对隐私的信息时，请给予解释这么做的原因及目的。

收集设计反馈

完成表单的设计后可以给业务用户进行简单的测试，并记录他们填写的时间收集反馈，以及对这一连串的问题他们体验如何。这也将有助于你下次评估表单的设计。

最后在情感化设计系统里记得感谢用户填写或者反馈问题，因为用户是花时间的。所以请表示感谢。

要点2·表格设计

表格的设计围绕着「可读性」和「易操作」两个设计原则。设计易读，易扫视，易比较，易操作的表格结构是表格设计的首要目标。

列宽有三种常见处理方式：

1. 根据内容的极限长度给出足够的固定宽度；
2. 可以固定部分列的宽，其余列按百分比处理；
3. 列宽需要考虑最低宽度/最大宽度/文字极限状态，内容为空状态显示方案；
4.需要设置列之间的最小宽度，表格响应式布局情况下最小不小于此宽度。

M-Densign规范中对齐方式会遵循如下规则：
表格的排序，应从用户目的出发，遵循用户查看数据的习惯，尊重数据之间的关联性，设计用户查看、操作数据的路径，而非随机排列（这部分可以在业务侧调研时验证，提高用户体验和阅读效率）。

1. 文本信息/混合型文本左对齐，符合从左到右的阅读习惯；

2. 数字信息右对齐，方便数字之间的直观对比；

（该图片感谢好友@晴蓝同学反馈的一个错字，图片已修正）

要点3·按钮设计

设计规范需要定义按钮的四种状态：正常状态(Normal)、悬停状态(Hover)、激活状态(Active)、加载状态(Loading)、禁用状态(Disabled)

B端产品的开发一般涉及多个开发团队协作，例如瑞幸的后台修改按钮颜色，都可能牵动10+工程师的协同。

所以B端产品在进行设计改版以及设计侧调整时候要思考调整对于业务侧是否有直接帮助，在设计和规范建立之前，切勿频繁改动。

除了完全独立设计开发的项目以外，还有大量的 B 端项目是采用第三方框架开发而成的，如 Ant、Element 等等。这是因为这些第三方程序可以帮助团队节省大量的开发时间和精力。

作者：Cesare_玄漓来源：站酷

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

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

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

评论(0) 浏览(1103)

222022-9

设计规范和适配

seo达人

一开篇：为什么需要建立设计规范？

1、保证设计的一致性。

对内部：多个设计师合作，依然能保证设计风格的统一。

对用户：提高用户体验，提高操作效率，加深对产品的记忆。

2、提高开发效率

与前端有效沟通的工具，提高设计还原度，降低对接成本。

开发可以建立公共组件库，极大的提高了开发效率。

3、方便产品迭代

随着产品的业务变化，发现一些问题或者需要优化用户体验的时候，针对单个控件进行调整，就可以影响全局，十分便捷。

二移动端设计规范之平台设计语言

优秀设计来自世界互联网公司，前沿的设计理念和完善的设计语言是我们设计师的学习目标。了解和学习后，更好的进行产品设计。

前沿平台

1、谷歌设计语言 Google Design

http://design.google

谷歌设计中心，展示了谷歌的设计工作和概念，包括了 Material Design 在内的所有关于产品、体验、设计、品牌等互联网领域的设计思考。

2 、苹果 IOS 设计规范

苹方人机界面设计指南，含有IOS设计规范，指导界面设计。苹果人机界面设计指南，详细介绍了苹果公司最新的移动设备和系统，设计屏幕分辨率、图标设计规范、色彩搭配、文字等设计语言，同时还提供了 UI 设计资源可供大家使用。

3、Ant Design

蚂蚁金服设计平台是国内互联网公司之一，基于蚂蚁金服生态系统的跨设计与开发的体验设计方案，包含了网页端的颜色、字体、图标、组件等页面设计布局等设计指导网站。

蚂蚁集团的企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。

随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁集团体验技术部）经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

4、Fluent Design System

微软基于Windows 10 的设计指南，它可以帮助开发者设计和构建流畅、精美的应用程序，包括人机界面布局、样式、控件和设计工具包下载。

微软将这套全新的设计语言名为 Fluent Design System（流畅设计体系），该体系共有五大核心元素，包括Light（光感）、Depth（深度）、Motion（动画）、Material（材质）和 Scale（缩放）。

5、WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库，包含表单、基础组件、操作反馈、导航等各种各样的设计元素。它由微信官方设计团队为微信内网页和微信小程序量身设计，使得用户的使用感知更加统一。

具体看下面的内容，有详细介绍。

6、Airbnb Design

Airbnb 是一家享誉全球的民宿服务公司。同时，这背后有一个他们自己强大的设计团队，为Airbnb提供着设计方面工作。我日常工作使用到的（动效方面）Lottie 也是他们设计开发的产物（感谢）。他们拥有自己的设计网站Airbnb Design。其中一些文章介绍 DSL，正如在《设计体系》一书介绍，他们严格遵守着自己的设计规范和原则。保证着Airbnb的产品在设计上的一致性，可用性等，目的是为不同国家的用户提供好的用户体验。

界面设计中的字体思考

文字是 App 中最核心的元素之一，产品传达给用户的内容。字体有无衬线字体和衬线字体。无论iOS 还是 Android 系统，它们都有内置的默认字体可供设计师使用。用心处理好字号大小、字体颜色与字体间距的处理上。

用户界面设计中，字体是界面设计中的基本元素。设计师要设计好界面中的字体颜色、字体间距、字号的大小、

字重等思考。

苹果系统中默认的字体是：苹方字体。英文字体和数字字体是：旧金山字体，San Francisco 字体。

其中数字字体比较好的字体可以用：Dinner 字体。

安卓系统默认的中文字体是：思源黑体。英文字体是：Roboto 字体。

界面设计中的字体设计规范，如下图所示。

介绍几款西文字体：

无衬线字体，在字的笔画开始和结束的地方，没有额外装饰，笔画粗细均匀，适合于主题设计的屏幕展示，给人一种自然舒适感。例如：无装饰性的易识别的代表字体：Helvetica 英文字体、San Francisco 英文字体、

Roboto 英文字体、Arial 英文字体。

衬线字体是字的笔画开始和结尾处的位置有额外装饰，同时笔画的粗细有所不同，一般适用于印刷排版，具有较高的可读性。例如：具有装饰性的代表字体：Times New Roman。

DIN 字体

DIN 字体是效力于德国交通标识和公共空间的经典字体，是一种很好的数字字体。

Futura 字体

Futura 字体 ，这个字体现代、时尚具有几何特征，是很多杂志和时尚品牌的常用字体，例如：时尚气质的品牌 LV 的商标字体就是这种英文字体。

Roboto 字体

Roboto 字体，是谷歌公司为 Android 操作系统开发的默认英文字体，具有“现代感”、“亲和力” 的设计感。

San Francisco 字体

San Francisco 字体 ，苹果公司设计的，苹果公司推出的 Apple Watch 和 iOS 移动端等系统的英文字体。

Didot 字体

Didot 字体，是世界上最著名的英文字体之一，美感，可以用在英文标题、产品设计、广告使用的一款字体。

例如：时尚杂志 VOGUE 标题字就是运用了这个字体。

三移动端设计规范之设计主题、设计原则、屏幕的设计尺寸：

iOS 设计主题

iOS的三个主要主题将其与其他平台区分开来：

明晰。在整个系统中，各种大小的文字都清晰易读，图标精确而清晰，装饰物微妙而恰当，对功能的高度关注激发了设计的灵感。负空间，颜色，字体，图形和界面元素巧妙地突出了重要内容并传达了交互性。
尊敬流畅的动作和清晰美观的界面可帮助人们理解内容并与之互动，而从未与之竞争。内容通常会填满整个屏幕，而半透明和模糊通常会暗示更多内容。最少使用边框，渐变色和阴影可以保持界面明亮通风，同时确保内容至关重要。
深度。独特的视觉层和逼真的动作传达层次感，赋予生命力并促进理解。触摸和可发现性提高了人们的愉悦感，使他们能够访问功能和其他内容而不会丢失上下文。当您浏览内容时，过渡会提供一种深度感。

设计原则

为了最大限度地提高影响力和影响范围，请在想象应用程序的身份时牢记以下原则。

审美完整性

审美完整性表示应用程序的外观和行为与其功能的集成程度。例如，一个可以帮助人们执行重要任务的应用程序可以通过使用微妙，醒目的图形，标准控件和可预测的行为来使他们专注。另一方面，沉浸式应用程序（例如游戏）可以提供引人入胜的外观，带来乐趣和刺激，同时鼓励发现。

一致性

一致的应用程序通过使用系统提供的界面元素，知名的图标，标准的文本样式和统一的术语来实现熟悉的标准和范例。该应用程序以人们期望的方式结合了功能和行为。

直接操纵

屏幕内容的直接操作可以吸引人们并促进理解。用户在旋转设备或使用手势来影响屏幕内容时会经历直接的操纵。通过直接操作，他们可以看到其操作的直接可见结果。

反馈

反馈确认行动并显示结果，以使人们了解情况。内置的iOS应用程序可响应每个用户操作提供可感知的反馈。轻触时，交互元素将突出显示，进度指示器传达长时间运行的操作的状态，动画和声音有助于阐明操作的结果。

隐喻

当应用程序的虚拟对象和动作是扎根于现实世界或数字世界的隐喻时，人们会更快地学习。隐喻在iOS中可以很好地工作，因为人们可以与屏幕进行物理交互。他们将视图移开以隐藏下面的内容。他们拖动和滑动内容。他们切换开关，移动滑块并滚动选择器值。他们甚至浏览书籍和杂志的页面。

互联网产品设计的尺寸规范和分辨率的认识，是进行线上界面设计的第一步。然而，市面上的型号有很多，咋办？

作为设计师，要掌握常见的尺寸和距离，理解并做好设计的适配，才能解决不同手机屏幕之间的布局规范和换算关系。

常见的移动端手机屏幕的设计尺寸如下：

DPI和PPI的定义（来自百度百科）

DPI原来是印刷上的记量单位，意思是每英寸上，所能印刷的网点数（Dot Per Inch）。但随着数字输入，输出设备快速发展，大多数的人也将数字影像的解析度用DPI表示，但较为严谨的人可能注意到，印刷时计算的网点（Dot）和电脑显示器的显示像素（Pixel）并非相同，所以较专业的人士，会用PPI(Pixel Per Inch)表示数字影像的解析度，以区分二者。

我们通常讲的打印机分辨率是多少DPI，指的是”在该打印机最高分辨率模式下,每英寸所能打印的最多”理论”墨点数”。

Pixels Per Inch也叫像素密度，所表示的是每英寸所拥有的像素数量。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高。

Pixels Per Inch是像素的密度单位，就像PPI值越高，画面的细节就会越丰富，所以数码相机拍出来的图片因品牌或生产时间不同可能有所不同，常见的有72PPI，180PPI和300PPI,默认出来就是这么多(A710拍出的是180PPI)。

DPI(Dots Per Inch)是指输出分辨，针对于输出设备而言的，一般的激光打印机的输出分辨率是300PPI-600PPI，印刷的照排机达到1200PPI-2400PPI，常见的冲印一般在150PPI到300PPI之间。

例如，iPhone 6、7、8 的屏幕物理尺寸是4.7 英寸。RetinaHD高清显示屏，移动端屏幕尺寸是：750px 乘 1334px ,326ppi，全sRGB标准。

iPhone 6 Plus,5.5英寸(对角线)LED背光宽Multi‑Touch显示屏，具有IPS技术,1920×1080像素分辨率，401ppi.全sRGB标准,如下图所示。

分辨率、像素和屏幕物理尺寸

iPhone X 尺寸是 5.8英寸，手机主屏幕分辨率是750乘1624 PX，整个屏幕的像素尺寸,一倍图：375 乘 812 。

关于 iPhone 6，一倍图下：375 乘 667 。

pc端网页设计的尺寸是：1920乘1080px。

像素密度，即每英寸屏幕所拥有的像素数，像素密度越大，显示画面细节就越丰富。

像素密度=√{（长度像素数^2+宽度像素数^2）}/ 屏幕尺寸。

屏幕分辨率是指纵横向上的像素点数，单位是px。屏幕分辨率确定计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量。就相同大小的屏幕而言，当屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，单个像素尺寸比较大。屏幕分辨率高时（例如 1600 x 1200），在屏幕上显示的像素多，单个像素尺寸比较小。

显示分辨率就是屏幕上显示的像素个数，分辨率160×128的意思是水平方向含有像素数为160个，垂直方向像素数128个。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。

比例：4：3、5：4、16:10、16:9、21:9

4:3 是最常见屏幕比例。16:10 就是常见的「宽屏幕」比例。16:9 主要是HD电视在用的比例。

常听到的720p、1080p 都是这个比例。

逻辑大小和像素大小

对于人类的视觉对于对象尺寸的判断是由逻辑大小来决定的。以一个图形为例，无论这个图形距离我们多远，用户的认知中，大小是直径为25mm 。也就是说，这是它的真实的大小，所以我们把人对于物体真实尺寸的认知成为逻辑大小。

屏幕像素数量不同，在相同像素大小的情况下，图形显示的大小，就会不一样。

IPONE 8 plus 屏幕上的元素尺寸需要在IPONE 8 的基础上乘以 1.5 ，才能以平常的物理尺寸显示元素的大小。

逻辑像素与实际像素

Ipone 手机屏幕常见的分辨率有 640px乘1136px、750px乘1334px、1242px乘2208px及1125px乘2436px 等。

同样一个圆，高分辨率的屏幕显示更清晰，视觉体验会更好。

设计时，优先保证高分辨率的屏幕效果。

一倍图字样的切图则应用在普通屏幕上，带 @2x字样的切图通常用于 Retina 屏幕上，带@3x 字样的切图则应用在 IPONE Plus 系列手机的屏幕上。设计者只需把这 3 个尺寸的切图给技术人员，技术人员可以将合适的尺寸的图片适配到各个机型了。实际像素除以倍率，就得到逻辑像素尺寸。

所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。

为了适配，是为了实现视觉的统一感，让相同大小的物体在不同像素密度的屏幕上看起来大小是相同的感觉。逻辑像素是pt，普通像素是px。 1 pt 在ipone 6、ipone 7、ipone 8等于 2px ，在 iPhone 6 plus、iPhone 7 plus、iPhone 8 plus中等于3px。开发项目中，一倍图机型上是100px乘100px,在iPhone 6s 中显示出来的是200px乘200px，在 iPhone 8 plus 中显示出来的是 300px乘300px 。在视觉上，这三个尺寸看起来是一样的。下图是 ipone 手机界面详细的适配尺寸规范。

针对以上规范，设计师的尺寸为 375乘667 pt、导出格式为 @2x 的设计稿可以应用在ipone 6、ipone 7、ipone 8 手机中。

安卓系统把各种设备的像素密度划分成几个范围区间，并且给不同范围的设备定义了不同的倍率，保证显示效果的相近。安卓系统的逻辑像素单位是 dp 。

安卓系统的手机屏幕都可以找到自己密度值、代表分辨率、倍率、逻辑分辨率等。

密度为xxxhdpi(1080px乘1920px) 的手机目前市场份额占比较大；目前密度为 xhdpi、xxdpi 和 xxxdpi 的手机产品占绝大多数的市场份额，而正好他们的逻辑像素是 360dp 乘 640dp, 根据这样的分辨率标准导出 @2x、@3x、@4x 这三种格式的切图，基本就可以适配市面上绝大部分的Andriod 系统的机型了。

全局边距

在UI界面设计中，以(750px乘1334px)全局边距一般是30PX，整个产品设计的边距都是30px，保持一致性。

或者 32px 的全局边距也是不错的选择，比如：Booking 就用了这个尺寸。

24px 全局边距

Facebook ，它们不但距离屏幕边缘距离一致，就连边缘距离一致，就连头像与文字的距离也相同，都是 16px。

40px 全局边距

40px 属于较大的大边距，留白开始变多，界面呼吸感好，阅读体验好。例如：36kr。大边距适合单一的应用，不需要复杂信息和交互层级。

50px 全局边距

50px 可以算最大边距，它让界面变得干净整洁，用户在浏览时极为轻松。

竖向间距

定义卡片和卡片间的间距一般是：20px、24px、30px，最大间距不超过40px。间距的背景色可以与你分割线一致，也可以浅一些，界面柔和一点。

88px

ios 中最小点击区域是 88px，因为苹果在纵向尺寸上把 22px 作为一个基础单元，物理尺寸最小空间的高度为 22乘4等于88px，为手指触摸最小的高度。因此导航栏、标签栏、列表、搜索栏和按钮的高度都是 88px，导航栏和标签栏图标为 44px，元素与元素之间的最小间距是 22px。

四 iPhone X的适配方案

针对前面所讲的ios 系统的常用机型，几乎一种逻辑尺寸为375pt乘667pt 就可以完成设计的适配。而相对来说，ipone X 的适配处理稍微多一些细节。异形的 iPhone X 的屏幕部分的高度增加了145pt，如下图所示。

先说一下顶部刘海区域的适配方式。如图所示，对于常规的 iPhone 8 屏幕来说，屏幕内基本都是安全显示区域，安全显示区域就是要把重要元素放在上面做好设计。iPhone X 上由于多了刘海的设计和四周的圆角设计，意味着也多了两个不可显示内容的非安全区域。苹果官方给出的非安全区域为屏幕上方 44 pt ，屏幕下方是 34 pt ，并且下方 34 pt 的非安全区域一定不可以放置可点击的按钮，否则会与虚拟的 Home 键发生交互上的冲突。

空间里利用率角度思考，与 IOS 界面的整体效果保持一致的感觉。如下图所示，竖版和横版。

而具体的适配方法要从这两块非安全区域去用心思考。由于顶部的非安全区域内不可以出现状态栏之外的内容，因此从前的状态条由20pt加长到44pt, 则意味着增加了 24 pt 。这时候导航栏的尺寸保持不变，只需整体向下移动24pt 。这时候导航栏的尺寸保持不变，只需整体向下移动 24pt 即可。同时，状态栏背景的颜色需要与导航栏背景的颜色保持一致。

当界面顶部带有图片背景时，最简单的处理方式将顶部图片元素的高度增加 24pt。如果有 Banner 贯穿到顶部，一般有以下两种处理方式。

第一种方式是为 iPhone X 单独做一套 Banner 尺寸，拉长 24pt，并且顶部 24pt 不可放置有效的阅读消息，设计两套图，一种是正常的 IPONE 6、7、8 等尺寸，一种是 ipone X 的尺寸下需要的设计广告图。如下图所示。

第二种方式是显示导航栏，并且 Banner 不再贯穿到顶部显示，而是移动到导航栏下方。

显示效果缺少沉浸式的设计体验感。

说完刘海区域的适配方式之后，再来说一下底部非安全区域的适配方式。置于屏幕底部的 Home Indicator 集成了原有实体 Home 键退出与切换系统应用的功能。在适配过程中，可以更换此区域内背景的颜色、透明度与高度。底部的33pt 的非安全区域内禁止出现可操作按钮。

第1种情况，当界面底部有按钮，按钮依附在底部 34pt 的非安全区域的上方即可，非安全区域的背景色一般与操作按钮的背景色保持一致。如下图所示。

第2种情况，当界面底部没有按钮，只需让列表正常显示就可以了，无须遮挡，如下图所示。

第3种情况：在广告引导页等呈现全屏样式时，需要做两套设计稿的间距和大小的设计适配，保证好的视觉内容的展示，背景色延伸的方法就好。

界面设计中的间距思考

界面所留出的固定边距是最基础的栅格系统。如下图所示。

界面的分割规范应用在品类区的功能图标，四等分的设计，符合栅格系统的设计。规范的设计，有利于开发对设计稿的还原设计。

栅格系统中的8px 的原则

8px 原则，就是界面设计中所有元素的长度除以宽度和间距都可以被 8 整除。这里的 8px 是基于@2x 倍图格式下的切图使用的。以320dp乘480dp为@1x 逻辑尺寸，安卓系统屏幕下的部分适配尺寸。

五常见的移动端设计布局和适用场景

信息的设计优先级，布局合理性，提升信息的传达效率。

核心功能的布局

核心功能的各模块的布局之间保持相对独立，标签横向数量尽量不要超过5个，超过5个可以采用左右滑的交互方式来实现，来自于设计心理学。

标签样式的布局优点是各入口清晰呈现，方便用户快速查找信息；标题一定要精简。对于要突出的核心功能，可以做信息层级的大小、是否有设计背板的处理，主次关系分明。

列表式布局

列表式布局适用于信息类的产品。

列表式布局优点信息展示较直观，节省界面空间，浏览效率高，字段长度不受限制，并且可以错行展示。单纯看文字会视觉疲劳，所以图文混排，富有变化。突出主题，优质配图，有利于用户更好的阅读信息。

卡片式布局

卡片式布局就是把不同大小、不同形式的内容放在一个容器里进行组合展示。较常见的是图文混排，既要做到视觉上的一致性感觉，又要平衡图片和主题内容的关系。分组展示，让用户更好的理解各模块的内容。

瀑布流布局

瀑布流布局适用于图片、视频等更好的沉浸式的浏览内容。移动端的瀑布流布局一般是两列信息并行，错位展示，可以极大的提升交互效率，可以制造丰富的视觉体验，适用于花瓣等图片类的界面布局设计。

六 APP组建化设计规范

（具体看我站酷前面写的组件化思维的文章）

Ios系统和安卓系统都提供了一些固定的官方组件规范。遵循其官方组件规范，可以极大提高设计和开发效率，同时降低用户的学习成本。其中最常见的规范化组件包括顶部的状态栏、导航栏、底部标签栏和工具栏。

状态栏

ios 是 20pt, 安卓是24dp.

导航栏

ios 是 44pt, 安卓是56dp.

标签栏

ios 的高度是 49pt, 安卓标签栏的高度是48dp.

工具栏

工具栏的高度是 44pt,安卓是 48dp .

字体是苹方字体；英文是SF英文字体。思源黑体，roboto 英文字体。

IOS设计是 11pt到29pt 左右，一级主题是24pt 以上,二级标题是20pt左右。

内容，导航栏标题是 18pt。三级标题是16pt。文字内容一般是 14pt

品类区图标内容：12pt 。底部TAB 图标文字：10pt到11pt

七微信小程序设计

基于微信小程序轻快的特点，我们拟定了小程序界面设计指南和建议。设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，实现用户与小程序服务方的共赢。

友好礼貌

为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序在设计时应该注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序提供的服务，友好地引导用户进行操作。

重点突出

每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容。在确定了重点的前提下，应尽量避免页面上出现其它与用户的决策和操作无关的干扰因素。

避免误操作

换算成物理尺寸后大致是在7mm-9mm之间。在微信提供的标准组件库中，各种控件元素均已考虑到了页面点击效果以及不同屏幕的适配，因此再次推荐使用或模仿标准控件尺寸进行设计。

小程序是在微信开放平台上运行的一种不需要下载安装即可使用的应用，它提供了一种快速体验的方式，用户通过扫一扫或搜一搜即可打开应用，实现了“触手可及”、“用完即走”的高效操作。对于开发者而言，小程序开发门槛相对较低，能满足简单的基础应用。基于小程序轻快的特点，我们在进行小程序界面设计时，友好、高效、一致的用户体验，友好的引导用户操作。

小程序菜单

小程序的界面，包括小程序内嵌网页和插件，微信都会在其右上角放置菜单。菜单包括两个图标，左边是更多，点开分别是转发、关于和取消；右边是主页，点击后回到小程序列表。小程序菜单和状态栏之外的区域是开发者控制区域，可设计。

微信提供深浅两种配色，适配不同风格，元素设计的辨识度。小程序在IOS和Android 的标注尺寸，如下图所示。

开发者不可对小程序菜单自定义，但可选择深浅两种基本配色以适应页面设计风格。为了让小程序菜单清晰可见，在深色背景上使用浅色菜单，在浅色背景上使用深色菜单。

减少输入

由于手机键盘区域小且密集，输入困难的同时还易引起输入错误，因此在设计小程序页面时因尽量减少用户输入，利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验。

例如下图中，在添加银行卡时，采用摄像头识别接口来帮助用户输入。除此之外微信团队还对外开放例如地理位置接口等多种微信小程序接口，充分利用这些接口将大大提高用户输入的效率和准确性，进而优化体验。

在用户搜索时提供搜索历史快捷选项将帮助用户快速进行搜索，而减少或避免不必要的键盘输入。

上面部分用图，来自微信小程序设计指南，具体细节设计规范可以看-微信小程序设计指南。

页面导航

顶部标签分页栏，颜色和样式都可以自定义。

最常见的设计方式是将选中态填充品牌主色，未选态有清晰的对比和可操作性。最常见的设计方式是将选中态填充品牌主色，未选态填充灰色，标签之间保持足够的空间，避免引起误操作。

标签分页分页栏的样式可根据App的视觉风格进行设计，以保证两个平台拥有一致的视觉体验。例如腾讯视频，在App中，它的标签栏分页栏是无框式设计风格，选中态和未选态以文字大小和色彩的对比进行区分；在小程序中，同样使用无框式设计风格，色彩不变，样式上字号大小，精致的线条辅助展示当前状态的设计。

开发者可为小程序页面添加标签分页导航，标签分页栏可固定在页面顶部或底部，便于用户在不同在不同的分页间做切换。标签数量不得少于2个，最多不超过 5个，为确保足够的点击区域，建议标签数量不超过4个。

小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用。设计时可自定义图标样式、标签文案及颜色等，以750乘1334px 的分辨率，标签文案字号是 20px，图标尺寸为 50px乘50px、标签栏高 98px，与 ios 苹果的设计规范保持一致性。

微信小程序的设计和开发，可根据产品需要选择或不选择底部标签分页栏，例如腾讯视频小程序使用4个标签承载功能不同的页面内容，为用户提供清晰、快速的浏览体验；而穷游行程助手的内容较为单一，只需一个页面就能清晰呈现所有内容，因此不需要标签分页栏。如下图所示。

启动页加载

在小程序列表点击小程序后进入小程序后进入启动页，它是小程序在微信内一定程度上展现品牌特征的页面之一，

本页面将突出展示小程序品牌特征和加载状态。启动页除品牌Logo 展示外，页面上的其他所有元素如，加载进度指示，均由微信统一提供且不能更改，无须开发者开发。品牌Logo 尺寸为 80乘80px，间距标注如下图所示。

页面过长时间的等待会引起用户的负面情绪，应尽量使用微信小程序项目提供的技术缩短等待时间。优先显示预设的本地数据，告知用户正在加载页面中。

全局加载反馈是在小程序名称左侧显示加载状态的图标，提示加载小程序内容的过程。同时，模态的加载样式将覆盖整个页面，它是由加载图标、文字提示和半透明圆角矩形组成，由于无法明确告知具体加载的位置将可能引起用户的焦虑情绪，因此应谨慎使用。

设计案例

小程序设计是基于微信内部运行的应用，因此在视觉上要轻盈、干净、简洁，保持扁平化设计风格；在交互上要结构简单、层级清晰、跳转少，保证产品高效的浏览体验。微信小程序，在设计时应精简控件和高效、实用。

旅游产品为例：

1、小程序页面的右上角固定小程序菜单。

2、为确保足够的点击区域，小程序底部的标签分页栏建议最多4项。收件箱在很多 App 中不会独立作为一个标签，可以考虑移除；个人资料承载了许多用户自己的重要信息，保留在标签栏比较合适。最后确定四个底部标签栏的功能设计-分别是：首页，收藏，消息，我的，四个标签。

3、开始进行设计，保持与App 同样的白色背景，标题栏上 Airbnb 居左对齐。

4、我们必须对原来的样式进行优化，做减法是小程序设计的关键。在App中，Airbnb 的设计轻盈、干净、简洁，因此可以直接复用到小程序中，无须重新设计。小程序延续了轻量化阴影的视觉特征，因此优化后的界面设计依然保持与App一致的设计风格。

八网页的设计规范

1、网页设计是什么？

网页设计也被称为 Web Design、网站设计、Website design、WUI 等。它的本质就是网站的图形界面设计。

2. 设计规范

一个产品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等。

3、网站种类

网站的分类按对象来划分可以分为 To C端和 To B端两种。To C端就是面向用户和消费者，例如、企业网站、产品网站、电商网站、移动端H5 等，均是面向用户的产品。以用户为中心考虑体验设计。

To B端作为一个需求量很大的类别，比如电商后台、Dashboard、企业级OA、网站统计后台等这些面向商家和专业人士的网站就是 To B 类网站项目了。To B 类项目最重要的是效率，因为说白了我们在设计使用者工作的工具，我们在设计时必须首先要使用者可以高效工作使用。

企业网站

每个企业都需要有一个网站来对外展示自己的能力、介绍自己的产品等。企业网站设计时通常会有网站首页、公司介绍、产品中心、公司团队、在线商城、联系我们等这几个模块，企业网站会展示很多诸如公司环境、团队成员、企业文化等实际的照片，配合一些资料进行设计。企业网站通常也追求所谓「高端」、「大气」、「上档次」的风格，也就是为了达到让消费者认同品牌这个要求。

产品网站

从苹果公司的 iPhone 介绍页到小米手机8的介绍页，我们会发现一种新鲜的产品营销模式，就是产品网站。设计这类网站的内容主要是该产品的工艺、技术、设计、特点、构造、使用场景等。这样的产品页希望可以让用户有沉浸感，所以一般来说都是使用全屏布局，产品设计必须精致、有品质感。

后台网站（数据可视化）

后台网站 Dashborad-仪表盘。其含义就是有一大堆数据与统计信息。后台网站是 To B 类型，那么首先的需求就是能快速地显示给操作者他需要掌握的数据。可是数据非常枯燥，我们可以使用诸如「折线图」、「饼状图」、「曲线图」、「表格」等不同方式来展现这些繁琐的数据，这种图形表达数据的方式也叫做数据可视化。

可以参考的网站有：百度的 ECHARTS ，如下图所示。

CRM系统（简单拆解网页B端的设计规范）

CRM 即 Customer relationship management，翻译过来是客户管理管理系统。CRM 是企业对客户进行信息化管理的一种形式，用互联网技术实现对客户信息进行收集、管理、分析，对企业的销售、服务、售后进行监控。常见的功能有员工日程管理、订单管理、发票管理等。

在PC端建议采用： 1440×900的设计尺寸

SaaS

如果我们服务于为企业搭建 CRM、ERP 或者 OA 等系统的第三方公司，那么我们可能会老听到 SaaS 这个词。SaaS 是(Software-as-a-Service)，即软件就是服务。

有赞软件即SaaS服务,包括有赞微商城、有赞零售、有赞教育、有赞美业、有赞小程序。如下图所示。

企业OA

企业OA，即(Office Automation)，也就是办公自动化系统。

通过企业OA 可以完成请假、调休、离职、查询公司规章制度、请示、汇报等工作。这样减少了很多窗口成本和员工的时间成本，增强了公司办事效率。

设计师在设计此类项目时同样要以操作者的体验和效率为重，让操作者轻易可以找到在当前页面中最重要的功能。

4、B端系统的设计原则

一致

与现实生活一致，用户使用习惯

界面中一致，设计图标、文字、元素等保持一致性。

反馈

控制反馈，清晰的知道自己的操作。

清晰认知页面的主题和交互状态。

效率

简化流程。清晰明确的含义界面快速认知和理解。

结果可控

用户可自由操作，包括撤销、回退、终止当前操作等。

设计规范（具体可以参考 ANT DESIGN 网站设计规范，去制作本公司的网页端的设计规范）

从原子：色彩、字体、间距、圆角、分割线。

分子：输入框、选择器、开关、上传、时间日期选择

组件：导航、表单、列表、数据可视化图表、筛选

通用层面思考

色彩、文字、边距和圆角、按钮、间距、栅格

主色：B端建议尽量选择冷色系避免太高亮

建议关键主色与白色对比度大于4.5

附：对比度检测 https://webaim.org/resources/contrastchecker/

按钮： 实心按钮、空心按钮、文字按钮

PC端后台：不推荐用大圆角

间距

一般选用8的倍数

8、16、24、32、40、48、56、64、72……

网页栅格，一般选用24栅格布局

24栏+23水槽+2页边距

栅格应用在内容层，如下图所示。

顶部导航的使用场景：

适用于一级导航数量较少，内容较为简单的系统

追求沉浸式阅读的系统

多用于官网首页

顶部导航的优点：

占用屏幕空间小，为内容区留出更多空间

对视觉的干扰小，符合从上到下的阅读习惯

一般采用固定版心的方式，更容易适配

随着业务的发展，拓展性变差

三三级导航点击后隐藏，不利于用户记忆和查找

侧边导航的优点：

适用于更专注功能和快速操作的系统，有赞为例，如下图所示。

多用于较为复杂的后台系统

拓展性强，一级导航的数目可以展示更多

层级清晰，一二三级导航都可以流畅展示

操作效率高，用户在操作和浏览中快速定位和切换当前位置

面包屑导航

使用场景：两级及以上层级，最多不超过5级

作用：告知用户你在哪里，且可以迅速回到上几级导航

九设计师的自我修养

我们对设计充满兴趣和激情。

1 用心积累优秀的设计案例。可以根据公司的行业竞品，同类直接竞品，跨界竞品做好收集。

2 每日记录设计灵感。比如：站酷收藏夹，按照主题收藏；花瓣灵感，分组命名。

3 执行力强，遇到设计问题，换位思考。

4 超出预期，做好需求的设计方案，同时关注设计细节，超出需求方的预期和用户的预期。

5 有上进心，工作做好后，做好设计的总结和作品整理，发到站酷设计平台，与其他设计师一起交流设计。

6 眼界开阔，知识面广：一个优秀的设计师，不仅懂设计，还懂产品、运营、推广、开发思维等方面的相关知识的学习和研究。有利于和上下游人士的沟通顺畅。做到互相理解，团队更好的完成项目的设计提案。

最后，让自己保持着朝气蓬勃的精神，保持着朝气蓬勃而富有创造力的心态。

参考文献如下：

1、《规律与逻辑》

2、《CCtalk B端产品设计课》by 美芳老师

3、《高级UI设计师》

4、《ANT-DESIGN 蚂蚁金服》

5、《苹果官网等设计网站》

原文地址：站酷

作者：峻溪POINTVISION

转载请注明：学UI网》设计规范和适配

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

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

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

评论(0) 浏览(3805)

222022-9

Web产品的适配设计选型

seo达人

历史长廊

在早期，硬件设备落后，网页使用的是绝对静态布局为主，绝对固定宽度的布局被称为是静态布局（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咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(864)

222022-9

让我一个没有美术基础的人画插图，太难为我了吧！

seo达人

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

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

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

一、层次关系

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

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

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

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

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

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

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

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

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

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

二、细节

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

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

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

这就是构图出了问题。

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

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

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

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

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

还有一个细节：

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

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

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

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

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

三、颜色脏的小技巧

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

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

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

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

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

总结

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

作者：橙汁

转载请注明：学UI网》让我一个没有美术基础的人画插图，太难为我了吧！

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

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

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

评论(0) 浏览(870)

222022-9

从构思讲起，手把手带你绘制一套彩铅噪点人物插画！

seo达人

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

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

知识重点：构图分析和构思、人物转化、肌理笔刷叠加、不同材质表现操作工具：数位板 | Photoshop

操作难度：★★★☆☆

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

构图灵感来源自法国艺术家 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. 阴影例如：脖子，腋下，衣服的阴影，以及身体转折处来加重

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

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

TIPS：在身体转折的地方可以用套索工具圈出区域上色。

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

服装道具刻画：

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

TIPS：画重色色块上色时先把颜色提亮以便后续加肌理效果明显，同时把底色透出来会更有通透感。

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

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

背景元素刻画：

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

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

TIPS：飞机后面的拖尾可以通过【后悔药笔刷】擦除呈现半透明状态，然后再用【软底纹笔刷】加入其他颜色。

头发刻画：

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

TIPS：在把头发区分成叶片的时候同时区分一下叶片的大小会让头发更自然哦~

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

最后再在头发亮的地方用线性减淡的图层模式用【高光笔刷】提亮一下，边缘用【速写铅笔】轻轻勾勒一条浅色边缘就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咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(1226)

222022-9

当互联网遇上线下门店，设计师能做些什么？

seo达人

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

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

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

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

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

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

设计形式好一点

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

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

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

材料便宜点

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

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

执行容易点

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

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

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

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

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

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

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

审批流程

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

辅助工具

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

权重区分

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

沉淀经验

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

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

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

逆水行舟，不进则退。

作者：环铁艺术家

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

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

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

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

评论(0) 浏览(1036)