如何选择合适的B端设计风格？

1.B端后台分类：

根据服务对象划分：

一类支持有C端前台，支持前台产品管理各种资源。第二类服务企业，提高企业工作效率和营收。

根据后台功能：

1.监控运营：时效性强，旨在实时反馈异常情况，快速判断下达命令，回复信息、多用于数据控制中心。

2.数据分析：数据结果的对比和分析趋势，时效性要求并不高，了解整体和各部分数据水平，助力决策。

3.记录管理类：主要用于人员、设备、资产等增删改查，文本信息容量大，频繁便捷的操作。

4.系统配置：权限配置、设备功能配置，操作为主。

2.后台深浅两大风格分类：

浅色：

适合文本信息多密集的表单列表类后台，浅色更符合人眼白底黑字的阅读习惯，浏览速度更快，信息获取效率更高。

深色：

图像信息密集的后台适合图片、数据可视化图表等；深色对彩色的图像信息衬托更强。信息获取速度较慢，长时间可能视疲劳。

3.作者常向产品方提供的风格参考

较常见

1.经典商务风（导航深、内容浅）——专业、高效、成熟、可信赖（对照深色西装人物形象）

      优点：市面最常见的风格，普世性高，大多数用户可快速接受，层次分明

      缺点：视觉缺乏记忆点

 2.轻量科技感（导航浅、内容浅）——简洁、明快、轻量、年轻（对照白衬衫打领带男性）

      优点：视觉清新明快更年轻化更轻量，对其他文本及图形展示包容性高，就像A4白纸一样容器存在感弱

      缺点：纯白色导航+页面层次略暧昧。

 3.蓝色科技风（导航中、内容中）

      适合：适合科技属性强的产品界面，图像图形展示

      缺点：对其他色彩信息有干扰，持续性长时间观看易视觉疲劳

 4.暗黑科技风（导航深、内容深）

      优点：对色彩表现力强

      缺点：密集文本信息获取速度会下降，持续性长时间观看易视觉疲劳

4.精准选择风格时可以进一步的考虑：

1.整体行业风格

比如美妆和科技行业的整体设计基调就不太相同。

2.产品想要传达的气质：

理性可靠 or  简洁轻松轻量 or 关怀普世 or 酷炫吸睛….这个可以和相关产品经理、销售共同商讨

3.目标用户的群体特点及喜好。

根据目标用户的性别、年龄层、受教育水平，审美水平考量（可能包含多种角色，选取1.2个核心角色为参考）带入目标用户工作场景及爱用物常用物品味，去判断基调。

如主要用户群：40+男性用户，本科以上受教育水平，使用windows电脑进行专业管理操作，审美倾向明确内敛。

如主要用户群：20-40岁，男女比例约6：4；大专；操作水平参差

4.使用场景及高频的操作。

例如：最常使用数据分析管理，需要快速阅览多条数据，对数据进行比对，更适合浅色风格展示表单数据。

5.判断独立的平台是否为独立开发

独立开发的，可以采取更独特设计。若平台很大需要不同外包公司的合作属于整合类平台则更注重设计的包容性。

5.如何让后台设计更具特色：

1.重点色的使用

“731配色比例”70%的面板色，30%的导航面板色，10%的强调色。（这里的用色比例可以根据内容具体再去调节只是大概比例）品牌色或重点色：强调行动关键点、重要信息高亮、图形化说明等。强调色用就要用的像蛋糕上的樱桃。起到画龙点睛作用即可。

2.图标的优化

后台高频出现的图标，值得我们花时间去统一设计打磨，调整圆角粗细疏密，符合整体界面气质。从图标库里拖出的图标很多在线条粗细上是不统一的，好的设计在细节处也要动人。

B端工具类图标识别性第一，美观性第二。B端导航图标更多是在基础造型上打磨，不需要加花里胡哨的渐变、投影，导航图标一般在24px-16px大小，太复杂反而看不清。在区分状态的时候可以考虑加点品牌色

3.空状态小插画

空状态插画是B端设计师少有能发挥自己绘画天赋小巧思的地方。

图形化状态语言，辅助用户理解内容。可以将产品机械苍白的文案设计表现的更加具有温度，具有引导性。让乏味的工作出现一些共情小彩蛋，有趣的插图动画可以缓解等待的焦虑。

4.登录注册页

纯色背景卡片式：简单大方更聚焦登录操作

插画背景：场景化展示产品的功能及亮点，让用户更有心理预期

几何图形背景：最后和品牌图形相关，加深用户对产品的品牌印象。

照片背景：相关场景或产品类型，具象图片信息更直观

5.圆角的大小

不同大小的圆角传达产品不同的气质，大圆角亲和、小圆角精致、中等圆角大众中庸。

6.优化信息层级

优化信息层级，区分信息主次可以使阅读更快，操作更快，界面更有节奏感。

这时候你就是那个考前画重点的老师

判断一个页面里最重要的是那些信息或操作，强化它！并弱化辅助信息；

判断一个模块里那些是重要信息，强化它！

6.新人需要避免的雷点：

1.追求炫酷的视觉效果舍弃操作效率。比如追波风满屏花里胡哨的卡片及面板，满屏大投影及高饱和色彩。对于B端界面来说信息噪音太多，反而干扰信息获取效率。

2.反常规用户习惯的操作。尊重用户习惯，不要为了个性化去尝试改变，不要妄图改变用户的操作和认知的惯性。惯性思维大于设计思维，曾经遇到过产品因为右手操作所以要把导航放在右边的离谱例子。

3.数量多，动静大的夸张的动效。B端与C端不同的地方在于希望操作者沉浸式工作，遵循非必要不打扰。之前看过一个反面例子后台，在每一步操作后都出现大的场景动效鼓励完成，如果作为一个长期使用的工作者，我会觉得每次完成任务都需要等待动画完成可能只需要2-3s也很浪费我的时间。

4.新人建议多看Antdesign和Element等成熟的组件，创新类组件样式，最好和和开发商量是否能够实现。

5.在确定主要风格及2-5张主要页面后，就应该着手基础规范（色彩字体等，不然后面越做越乱）。

6.一段时间一个审美，同一界面中的元素风格不统一。

7.避免大面积使用高饱和高明度的色彩，及暧昧含糊的临近色彩。长时间使用眼睛会累，产生不耐烦焦躁的负面情绪。

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

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

本文将从理论到实践，从软件到插件，再到不同应用场景拆解和团队协同的重构，一步步教你如何搭建产品KIT组件库。也给大家带来逆天的Anima插件教程，组件化设计的必备插件，目前国内还比较少有文章讲到。手把手！嘴对嘴！堪称全网最细保姆级教程！

01. 什么是KIT组件库？

一个成熟的设计团队，都会为产品制定设计规范，搭建产品KIT组件库，组件化思维也是设计师的必备思维之一。组件库会让团队协作变得高效且一致，让团队成员专注于深耕体验和细节，实现设计向产品赋能。极大的节省设计和开发成本，优化用户在界面流转间的感知差异体验。

KIT组件库本质上是一个集合的Sketch文件，由原子、分子、组织、模板、页面组成。原子理论支撑可复用、可修改、易于协同和维护。

由Google推出的当时媲美苹果全新设计语言的Material Design，Material Design也是最为经典组件库设计。现如今阿里的Ant Design和Element给我们提供了一套完整可复用的组件库。

02. 原子设计理论

原子设计是将界面设计中最小元素——原子，组合嵌套为分子、组织、模板、页面的系统规范化设计过程。

1.  原子 Atoms

原子Atoms，我们知道是指化学反应不可再分的基本微粒。原子在化学反应中不可分割，但在物理状态中可以分割的。原子由原子核和绕核运动的电子组成，所以原子是构成物质的最小粒子这就不对了。

但在界面设计中我们所说的原子是构成界面的最小颗粒度元素，在设计中无法再被拆分或者拆分下去已无意义的最小单位。比如不同颜色样式、文字样式、输入框、icon图标、分割线等。

2. 分子 Molecules

由原子按照一定的规律和目的组成的部分为分子，在界面设计中比如Button按钮、swittch开关、非模态弹窗Toast等，可以理解为比较简单的小组件。

3. 组织 Organisms

将不同的分子与原子组合就组成了组织。比如头像与信息组成的联系人容器卡片、Table列表、Nav-bar、Tab-bar等等。

4. 模板 Templates

将组织与分子、原子进行特定的组合就形成了模板。这一步已经能展示界面的主要功能和交互了。一般这一步得到的结果就是我们日常工作中的原型图，产品的大致形态也慢慢清晰。所以模板可以理解成未上色的界面。

5. 页面 Pages

最终输出的高保真设计图即为我们说的表现层的页面Pages。将模板填充信息和图片内容，就得到了高保真设计界面。

03. KIT组件库搭建过程详解

以最近做的一个NFT项目为例子，展示具体搭建细节的全过程。

1.  命名规范

命名按照：一级分类 / 二级分类 / 三级分类 。例如：一级标题样式/苹方/常规/灰阶0

其中 “/” 为层级结构分隔符，Sketch会自动识别。组件库的搭建需要按照层级规范命名，从最外层到最内层，就像一个抽屉，每一层都对应放着东西。规范的命名会使后期调用维护、团队协同变得清晰高效。

2. 样式

（1）颜色样式

我们设计一般都需要定义颜色样式，一般有主色调（Main tone）、辅助色（Minor）、渐变色（Gradient）、字体的灰阶度（Gray scale）等。选中你需要创建样式的颜色，点击「外观 - 创建」，在输入框内输入层级规范命名。

（2）文字样式

定义文字样式，文字具有字体、大小、字重、灰阶等属性，选中文字，点击【外观-新建】，在输入框内输入层级规范命名。

（3）样式切换

当我们需要切换一个定义好的文字样式时，比如从“阅读文本样式”更换为“一级标题样式”，只需要选中文字 - 点击「当前文档」下定义的文字样式 - 点击需要更改的文字样式即可。

（4）样式修改 - 解绑与更新

当我们需要对定义好的文字样式进行修改时，比如在设计的过程中突然感觉"阅读文本样式"字体小了点，为了优化阅读体验需要增大字号。

1. 单个修改 - 解绑

将文字调整更改为你需要的大小或字重，此时只对单个文本修改，不对其他文本产生影响，点击解绑，便可与定义好的样式分离。

2. 整体同步 - 更新

将文字调整更改为你需要的大小或字重，样式名称后会出现 "*" 星号，此时代表未保存，且更新按钮激活，点击更新按钮则所有使用该样式的字段都会更改，整体同步更新。

3. 组件

组件是将元素定义为标准化可复用的集合体，对组件进行规范的命名，形成高效设计的KIT组件库。

（1）文本组件

选中我们需要定义的文本字段，注意！根据实际应用场景选择合适的文本对齐方式，否则修改字段信息是会出错。这里文本选择左对齐，点击 「创建控件」- 按照层级规范命名，选择从左往右布局 - 点击 「覆盖层」即可对文本字段内容进行修改。

（2）标签组件

1. 单个标签

当设计完标签后，对标签创建组件。依次选中便签中的文字“LIMIT”、“2000份”，依次将文本选择左对齐，步骤同上。将整个标签打组，点击 「创建控件」- 按照层级规范命名，选择从左往右布局（这里注意！从左往右布局表示标签在更改字段信息后，便签左边固定不动，从左往右自适应） - 在覆盖层修改文本字段信息，库存标签组件自适应。

2. 标签修改           
         

如果我们觉得这个库存标签设计的不满意，或者还需新增倒计时标签、已售标签，那怎样又该怎么做的？

第一步：这时我们新建一个Sketch文件，命名为「 *** KIT 组件库」。选中标签图标复制，将图标粘贴到新建文件内，注意！此时需要给图标添加合适的画板，并按规范命名。

第二步：将Sketch文件保存到桌面，拖动到「首选项-组件库」内。

第三步：选中组件，回车可进入控件（组件）页面，可直接调用定义好的控件，进行修改。

Tips：这里画板的作用是

（1）画板是用来规范固定组件位置和大小的，成套系的KIT Library需要建立画板。

（2）画板组件在创建后，调用时只固定大小和边界。

（2）如果只是做较少的界面，较少的复用的样式，就可以不用做画板。

3. 多个标签

当页面需要不止一个标签时，就需要新增标签，通常为左右或上下布局。若直接增加一个标签修改字段，文本标签不会自适应。 和之前操作一致，将新建的标签新建组件后，可实现标签文本自适应。

4. Sketch素材调用

继续添加商品作者组件、价格组件。点击右边覆盖层可修改文本字段。点击文字右边小icon可调用Sketch自带的数据。

（3）容器组件整合

将前面定义好的所有组件整合到容器中，形成可直接复用的商品信息容器组件。

第一步：调用定义好的阅读文本样式，注意！直接拖过来即可，文本框的长度左右拉到合适的左右间距，这里不需要动文本框的高度，否则会出错。将底部容器（卡片）的收起到合适的高度

第二步：选中整体打组，创建组件。注意! 此时选择从上向下布局。

第三步：选中整体，在右侧覆盖层可对文本进行编辑，输入文本字段，此时容器高度实现自适应。

（4）组件的拆解与重构

页面可一步步拆解为模板、组织、分子到原子。原子和分子可组合嵌套重构为组织、模板和页面。

（5）Anima插件

如果上下同时有卡片的情况该怎么呢? 当然，我们完全可以将它们一起定义组件，但有没有其他更便捷，更灵活的方法呢？这里跟大家介绍Anima插件的使用，会使得大家在搭建组件库时变得更加灵活高效。

Anima插件为一款在线自动响应式的插件，其中的STACK与PADDING功能简直是Sketch设计必备，简直逆天。

1. PADDING功能

新建一个文本，当点击PADDING后，会自动生成一个底板，选中底板可对其进行编辑，更改颜色、原角度等。在PADDING输入框内可输入距离上下左右的边距。此时注意文本的对其方式，左对齐一般适合标签使用较多，而居中对齐适合一般的居中按钮，如立即支付、立即报名等。

2. STACK功能

将三个标签分别打组，再全选整体打一个组，点击STACK，选择左右排版和居中对齐，输入你需要的间距。此时Anima插件最牛的STACK功能就是可以双击选中任一个标签，拖拽可改变排列顺序，松手后还可以自适应。

04. 为什么要搭建组件库？

（1）统一（Unified）

1. 团队不同成员或新来设计师之间协同配合，保证输出的一致性和稳定性。

2. 统一的组件库样式，会减轻用户在页面流转间的疑惑感和理解成本，使用户体验得到了提高。

（2）效率（Efficientcy）

1. 减少相同模块的重复设计。一个产品功能流转、页面交互必定会涉及到大量的重复设计的样式与组件。试想一下，如果每一个都重新设计将是一个巨大的时间成本浪费。

2. 如果从产品的全生命周期来看，搭建好设计中台KIT组件库，并与开发进行沟通，能减少前端开发样式，将时间更多的放在功能交互体验和项目推动上，极大提高了效率。

（3）协同（Together）

1. 建立完善的设计规范和KIT组件库，提高组件库优化迭代效率。组件库团队协同自动更新。

2. KIT组件库一键修改，也可通过组件分离功能（解绑）单独对样式进行修改，工作中需要对设计反复调整打磨，可进行批量一键更改，单个模块的单独修改。

05. 什么时候搭建组件库？

什么时候时候搭建组件库？先定义规范都是扯淡！所谓实践才是检验真理的唯一标准，“在设计开始之前就制定设计规范，是不切实际的做法，你会发现做好的规范在实际操作中是无用且白费精力的”摘自《破茧成蝶 用户体验设计师的成长之路》。所以组件库中的组件必定是经过反复修改后适合产品以及可后期可复用的。

并不是所有的设计都需要做设计规范或者KIT组件库。组件库的搭建本身就是一个耗费时间人力的事情，如果是一次性项目那根本就没有必要做组件库了。是否需要创建样式或组件取决于该样式或组件在后续的工作中是否会被复用或复用的频次。也会减少前端工程师重复开发CSS样式以及后台数据的封装成本。

06. 团队协同

将组件都定义在新建的Sketch文件中，将文件发给你的团队其他成员。步骤同上。

第一步：新建一个Sketch文件，命名为「 *** KIT组件库」，将组件都创建在新建文件内。

第二步：将Sketch文件发送给团队其他成员，拖动到Sketch「首选项-组件库」内。

第三步：直接调用定义好的组件。

共享组件库个人使用 Sketch Cloud，但组件库有更新Sketch右上角会有提示，及时沟通更新即可。

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

文章来源：站酷  作者：JI_Design
分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

如果将【UI设计】比喻成一位新型时髦的青年，那么【公共艺术】则是一位已在历史长河中摸爬滚打数十载的老者，一位伟人曾说过：人类的发展从历史中获得启迪，故笔者旨在从探讨公共艺术在地性观念的角度，来浅谈如何在UI设计中凸显情感关怀。

1 公共艺术在地性观念

“艺术是什么”

当代艺术作品（图片来源：网络）

学者王瑞芸认为当代艺术边界模糊且艺术家创作手段任意， 不仅没有一个能够称得上固定的风格，也不存在相应的美术主张，因此无法用语言对其进行概述。 而二十世纪实验艺术的先锋马塞尔·杜尚 (Marcel Duchamp) 曾用种种艺术实践行为向公众宣告：经由艺术家之手创造的就是艺术。

“什么是公共艺术”

公共艺术作品（图片来源：网络）

学者金江波在其专著《地方重塑—公共艺术的挑战与机遇》中指出：公共艺术体现的艺术主张依托于关注人文的公共理想。 复旦大学的汤筠冰教授曾在其公开课《城市公共艺术》中讲述到，公共艺术与纯艺术的不同之处体现在，公共艺术中包含了一种地域文化。

相较于说不清、道不明的“艺术”，公共艺术有别于纯艺术“为我性”的情感抒发，更加强调艺术作品与空间、人之间有意识产生的情感联系，用语言来概况其特性可以总结为：公共性、艺术性、在地性。

“什么是公共艺术在地性”

公共艺术作品《爬墙的熊猫》（图片来源：网络）

相较于“公共性”与“艺术性”的“基本性质”，笔者认为受“他人”影响而产生的“在地性”更能明显地体现公共艺术中的文化关怀，什么是公共艺术在地性观念，用一句话来概括：公共艺术与空间的关联性。

纵观艺术史，公共艺术的在地性范式可以总结为以下三类：

(一） 与空间的融合关联性

古希腊帕特农神庙（图片来源：网络）

最常见的一种在地性范式，起源于人民的基本需求已得到满足，开始追求更高层次的精神追求——对美的追求。例如古希腊帕特农神庙的建造依托于古希腊人民对细节美与民主性的崇尚与追求，以及中世纪的“城市美化运动”，“依附于建筑的艺术”，均是以在依托于周围环境、融入当前环境的方式来体现公共艺术的艺术性价值。

(二） 与空间的冲突关联性

艺术家佩尔施克策划的公共艺术活动《红球计划》 （图片来源：网络）

主要集中在后现代主义时期，后现代主义艺术批判以往艺术的精英化，追求艺术“生活化”。这一时期许多艺术家将与需求空间格格不入的通俗化形象放大植入公共空间中，产生与当下空间冲突的视觉感官体验，以“介入”空间的“逆向之美”的方式来体现出了公共艺术的艺术评判性价值。

艺术家奥登伯格创作的《世俗丰碑系列》（图片来源：网络）

(三） 与空间的无关联性

《瑞秋猪》与《乳牛大游行》（图片来源：网络）

出现在后现代主义时期，此时艺术家致力于使艺术摆脱架上束缚，追求艺术的开放性，诸如《柏林熊》、《乳牛大游行》以及《瑞秋猪》等社区参与类公共艺术作品，以艺术家主导的活动形式让大众参与到艺术创作过程中，打破以往以艺术家为中心开展的艺术创作行为，去中心化，此类公共艺术摆脱空间的束缚，其在地性含义由参与者构成，其开放性艺术价值仿佛实现了大同之美。

     

2 在地性艺术语言与UI设计-以冲突关联性为例

(一）关联性的意义

例子1

上图中左边是由英国艺术家安尼什.卡普尔（Anish Kapoor）创作的公共艺术作品《云门》，将芝加哥市民引以为傲的摩天大楼与天际线的形象利用镜像反射的原理映射在光滑的雕塑表面，凸显城市文化与自信。右边为新疆克拉玛依油田新地标，似乎与芝加哥的《云门》没有太大的区别，抛开是否购买版权这一点涉及到法律层面的考量，从艺术价值层面来考量这件“作品”，周遭土黄色的大楼并非是需要凸显的城市文化与特质，强硬的植入只会削弱了作品的艺术价值。

例子2

再举一个例子，以美的美居APP的缺省页为例，在最新的版本中，美的美居设计团队将缺省页的视觉元素替换成了自身IP形象“小蓝”，运用与产品相关联的视觉元素，不仅在美化的基础上增强了页面与产品的关联性，更是彰显了品牌自信。

以上两个例子也是为了说明，在UI设计中视觉元素的运用需站在“有理有据”的立场上，贯彻“取之有道 用之有理”的思想。以公共艺术中“与空间的冲突关联性”艺术语言为例，来探讨下此艺术语言在UI设计中的运用。而选择冲突性艺术语言来探讨的原因，主要在于该艺术语言包含的批判性、先锋性与幽默性特质，能够满足当今人们对情感化产品的需求。

(二）公共艺术中的冲突性

聊到公共艺术，不得不提到的一位艺术家：致力于把生活用品变成艺术品——克莱斯.奥登伯格（Claes Oldenburg），其世俗丰碑系列作品运用幽默风趣的艺术手法，提取与日常生活中通俗的现成物的形象介入公共空间，是对艺术精英化以及国际主义千篇一律设计风格的不满与批判，以及艺术生活化精神的体现。该艺术形式可以引起大众对其的新鲜感以及体现出一种趣味性，但当好奇与新鲜感退却之后，对其剩余价值的质疑也是各学者对这种艺术形式争议不断的原因，持有质疑态度的学者认为“冲突式”公共艺术具有时效限制性，只能在时代特定阶段发挥其艺术作用。

笔者认为站在城市形象塑造的角度来看：

a、"冲突式”公共艺术能够体现一个城市的包容性与开放性，万千艺术姿态都能被接受与容纳。

b、艺术家选取的艺术形象均来源于人们的日常生活形态，其艺术元素并不因地域等物质外在条件的不同，而对不同城市地区的人们产生不同意义，其体现的是一种全球共通性文化，其艺术性是针对城市公共空间而言。 

综上所述，笔者认为在冲突式在地性语言中，运用的艺术元素具有以下几点特征：

通俗性：大众对其有相似的认知与理解

原生性：夸张、未修饰的规模与形态来展示

戏谑性：不按常理出牌，以“格格不入”的形式存在

(三）冲突关联性语言在UI设计中的运用

例子1

针对上述三种特征，在一些APP的UI设计中，也可以找到相应的案例。例如B站番剧《总之就是非常可爱》的进度条的图标设计案例之一，该案例的运用起因在于该番剧的剧情甜份过高，网友们纷纷用弹幕类似于表达“我酸了”的通俗网络语言来刷屏，引起了B站的关注，于是就有了柠檬代替进度条的操作。

例子2

而Instagram推出的视频产品「IGTV」，其加载页借用了8090年代人们对老式电视信息收视不良的记忆——雪花屏元素，该元素与当前高科技信息技术时代的冲突性不仅营造出了炫酷的视觉效果，同时也使得产品饱含了怀旧的情感关怀，代表了一个时代的通俗回忆，得以与用户产生共情。

例子3

哔哩哔哩阅读的停更通知用更加通俗易懂的【请假】来代替，以及克拉克拉APP用【拔掉电线】的口语化用语来描述退出直播间的行为，不仅拉近了产品与生活的距离，也凸显了幽默的情感化设计。

虽然艺术与设计的边界日益模糊，但是二者之间仍然具有本质上的区别，那么我们在探讨艺术语言在设计中的运用时，应把用户体验的良好与普适性也考虑其中，将艺术语言进行设计化的处理，结合上述艺术案例与设计案例来看，冲突式在地性艺术语言在UI设计中的运用时，其运用元素的特性可以归纳为：

• 基础条件-通俗性：能够引起大众的共识与话题，大多数的灵感来源于生活；

• 必要条件-适应性：将原元素的特性进行特质提炼与设计化，与公共艺术不同，在UI设计中是将原元素的特征运用在设计中，同时注重例如提炼的雪花屏幕的闪烁特质，而不是直接将整个雪花屏幕运用在界面上；

• 增味条件-创新性：跨领域找参考元素。（举个例子，从B领域提取一个元素运用在A领域上，但B领域和A领域的在大家通俗认知中的兼容性并不强，其创新性是由疏离性凸显）

  
  

简而言之：

1、保证元素的通俗性，结合当代语境，亦可以理解为#话题性#；

2、可跨领域找参考元素；

3、需要对元素的特质进行加工提取；

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

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

大纲

1、研究背景

2、案例分析

3、无障碍设计工具推荐

在特殊的场景下所有人都存在残疾

一听无障碍设计就觉得可能和残障人士有关，其实不然；除了先天或后天出现的眼盲；耳聋的这种：永久性的障碍。在正常人身上也存在着情境式障碍；暂时性障碍；例如：

提着大包小包的你,想使用手机—情境式的肢体障碍

在喝热粥时,雾气遮挡住的眼镜—情境式的视觉障碍

骨折的腿无法正常行走—暂时性的肢体障碍

刚睡醒迷糊的你—暂时性的认知障碍

 ……

所以即使你是正常人，在日常使用产品时也会受到和残障人士一样的局限性。而大家说的用户体验设计其实就在特定场景下解决给特定的人群产生的局限性。

城市无障碍坡道

先普及一个概念（curb cut effect）直译过来就是“遏制分割效应”，其实意思就是机会共同体的概念、弱势群体受益的法律和计划往往最终使整个社会受益；最普适的就像是路缘处会做临时的斜坡处理，目的是为了帮助坐轮椅和推荐不便的人出行顺利通过，但是实际上，对于推着婴儿车，和行李箱的人同样受益。

傻傻分不清楚的洗发水和沐浴液

为了统一品牌设计语言，往往会将洗发水和沐浴液的瓶体设计成一样，不仅是视障人士，任何人在闭上眼睛洗头时都分辨不出来。花王在1991年在瓶身做锯齿状处理用来区分两个产品，通过触感也可以轻松辨认。

原文传送门：シャンプーのきざみに込められた思い

接下来就是软件端的案例，软件产品在无障碍设计的例子上也很多。

哈啰出行-司机端

哈啰出行的司机端，在司机开始行程后，在司机端进行操作,APP会进行类似于IOS VoiceOver的语音播报，就是对你点击的位置做中文的播报，规避对情景式障碍的分神的危险。

滴滴-老年版

滴滴打车首页的“老人打车”，除了对布局的简介化，对字体的放大化，还可以设置常用地址然后一键打车，或者通过电话联系客服叫车，还是比较方便的。、对于60岁以上并通过实名认证的用户，如果终点是医院等特定目的地的话，后台还会优先派单，为老年人提供救急服务。

无障碍设计工具推荐

检查色彩对比度

色彩对比度意为：【识别对象】和【其背景颜色】之间的对比度，对比度越高，越清晰，对比度越低。越模糊。如把重要的文字信息的对比度设计到AAA.次级的文字信息的对比度设计到AA。 把色彩对比度量化的话，可以计算出比例值，最低1:1（黑底黑字）、最高21:1（白底黑字）。

最权威的互联网无障碍规范 —— WCAG2.1(Web Content Accessibility Guideline，Web内容无障碍指南

对比度量化工具：点击这里

对比度cheome插件：点击这里

Funkify - 残疾模拟器

通过极端用户的视角来体验网络和界面，包括视线模糊、对比度下降（所有人的视觉对比度都会随着年龄而下降）、杂色、白内障、糖尿病视网膜病变等。

残疾模拟器cheome插件：点击这里

屏幕阅读器

用于在 Chrome 浏览器中朗读内容

屏幕阅读器cheome插件：点击这里

Color Oracle-色弱；色盲模拟器

支持Mac / Win / Linux。大约8%的男人和0.5%的女人有色盲或色弱、是相当大的族群。当然，UI中不应该只通过颜色来区分信息，但有时无论如何会用到色彩区分（比如数据可视化），那么就一定要使用色盲友善的配色方案。一般来讲，蓝/黄、蓝/橙是比较万用的搭配。

色盲模拟器工具：点击这里

总结：

虽然在现实的资本市场不太会在边缘人群身上花那么大的资源，但是体验设计存在的意义不就是为了解决各种因素给人产生的局限性么。

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

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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