如何选择合适的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组件库，组件化思维也是设计师的必备思维之一。组件库会让团队协作变得高效且一致，让团队成员专注于深耕体验和细节，实现设计向产品赋能。极大的节省设计和开发成本，优化用户在界面流转间的感知差异体验。

02. 原子设计理论

如果将【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中不应该只通过颜色来区分信息，但有时无论如何会用到色彩区分（比如数据可视化），那么就一定要使用色盲友善的配色方案。一般来讲，蓝/黄、蓝/橙是比较万用的搭配。

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

总结：

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

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

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

背景

在 B 端设计领域中，不管是内部用户、产品、设计师、开发，还是外部产品、设计师等，总能听到关于界面「屏效」方面的诉求或吐槽。

「屏效」狭义理解是「界面过度留白」；广义理解，「屏效」源自谐音“坪效”，指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数）。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。

为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感，于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开，将实践过程中反复验证有效的设计策略沉淀成设计手册，同步将部分功能进行工程化，确保可以开箱即用。

探索阶段-为谁在何时何地设计

用户声音｜不同的故事相似的诉求

面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%；认为提升屏效对体验有提升的终端用户占 50.6%。

外部知乎上针对《Ant Design 4.0 设计价值观》的 13 条反馈里，其中就有 2 点提到关键字「效率」。

通过了解不同用户和产品类型发现，不同的用户在工作场景的产品使用中有着相似的特征：

案例收集｜发现问题，大胆假设

纵观 B 端产品界面，发现普遍问题和收录在解决屏效问题上实践得比较好的案例，为了逐步突破问题，选择以数据产品中覆盖率极高的表格为设计切入点，通过线上跨产品多端地毯式的体验走查，发现表格三个层次的问题：

视觉、交互层在无需理解业务场景和用户目标的情况下，都较容易发现，属基础问题，但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。

综上我们提出假设：为提高屏效，可从视觉、交互、信息三个层次解决

视觉层为提高信息查阅速度，可以通过提高信息密度；交互层为提高操作速度，可以缩短当前手势到目标之间的距离；信息层为提高信息被理解的速度，可以通过重组织等方式。

基于假设，我们进行了进一步的桌面研究，查阅论文等书籍，寻找设计理论的验证和指导。

竞品分析｜寻找实践证据，谨慎验证

我们知道视觉上界面留白过多（过疏会增加滚屏成本，过密因易串行而影响阅读效率），以表格「行高」为例，探索各表格在字号、字高和行高的关系，因为不同字体的同字号实际像素高度会有差异，因此选择的是字高（即文字垂直高度的视觉大小）而非字号或字行高，决定留白的两个重要因子是字高和表格行高，以次推演，界面元素和元素间距的留白关系，探究在视觉层怎样的留白率能保证甚至提升屏效。

以数据产品中的表格为例，通过直接和间接竞对的方式，分别从数据的查阅（视觉）、分析（交互）维度进行功能点和设计细节上的比对，来看看优秀产品是如何解决屏效问题。

直接竞对：内部用户口碑较好的产品 A、B外界竞对：同领域的 Tableau、网易有数、金山、微软表格；间接竞对：谷歌邮箱、AntD 等的紧凑主题的常规列表（一维表格）

通过竞品分析可以发现，数据分析领域的表格留白率普遍较低（信息密度高），尤其是金山和微软的电子表格，其次是同类面向数据用户的 Tableau、网易有数，而谷歌邮箱等工作台常用的常规列表紧凑版本中，留白率和数据领域的电子表格不相上下。

紧凑版的使用场景也常常是面对数据量巨大的信息呈现，通过切换紧凑主题，提升信息的快速浏览，而这也非常适合数据分析场景中巨大的数据量呈现。因此我们的产品在留白率的提升空间极大，而在实际案例实践中，也已经将表格行高优化至 30px，克制的使用留白。

除此外，竞品其他层次的设计也做了比对，总结来看整体设计做法：高密度、少屏数、少留白等。

文字陷阱：中英文字高不等于字号

举个容易犯错的竞品参考是，谷歌在紧凑版主题下字号 12px，列表行高是 28px，但在 AntD Table 中同样的 12px 和列表行高 28px 就会发现非常拥挤，缺乏呼吸感。

原因在于谷歌的 12px 是英文字体，实际字高只有 10px，而 AntD Table 的语境是中文字偏多，实际字高有 12px，所以留白的差异在于一个是 18px（28-10），一个是 16px（28-12），这也是为什么决定决定留白的两个重要因子是「字高」和表格行高，而非「字号」和表格行高，进一步推演，决定界面留白的是「元素视觉高度」和「元素间距」。

论文查阅｜寻找理论证据，谨慎验证

研究表明，低密度认知负荷低，但高密度任务完成率高，用户更喜好

参考资料：论文《基于眼动的网页对称性和复杂度对用户认知的影响的研究》

对于信息，用户需要需要阅读（视觉），思考和理解（认知），需要点击按钮、操作鼠标和打字（行动），在人机工程学中，统称为负荷。即认知（记忆）负荷、视觉负荷、动作负荷，即分别对应用户体验设计的三个层级，信息/视觉/交互。而负荷所花费资源从多到少依次为：认知 > 视觉 > 行动。

认知负荷，举个例子，看了但不一定懂了。你是否有这么一种体验——刷抖音，虽然很多（信息密度小，输出效率低），但可以一直刷下去并且刷很久；而看一门 C4D 教学视频，即使就短短十来分钟（信息密度大，输出效率高），但是却要看上半天。因为刷短视频时，你的输入效率远高于作者的输出效率，而看一门 C4D 教学视频时，你的输入效率远低于作者的输出效率。可是，输出效率是客观的，输入效率是主观的。如果输出效率很高，你可以通过提高自己的输入效率（比如让自己成为 C4D 专家）来跟上作者，从而变强；否则输出效率很低（信息质量低），你的输入效率很高（很专业），信息于你而言都是无效的。

假设负荷总量不变的情况下，那么以上三类场景界面需要对用户负担分配大致如下，官网品宣类需要低认知成本，低视觉负担，视觉要求高，用户才会被吸引过来阅读，甚至酷炫的交互更能增加互动体验而带来的趣味感，比如苹果官网，信息量极少、图版率高带来极具艺术的视觉体验、进而吸引用户愿意跟随屏幕滚动渐进式接受信息，而 B 端应用因为是专业使用，首先认知方面随着员工的专业度提高而降低，因此可以通过提高视觉负担，来降低行动负担，进而减少操作用时，当然最佳情况是三个维度能整体降低负担，让总负担降低，就需要更多设计巧思了。

面向内部设计师和终端用户投放的《高屏效诉求调研》预设解决方案中，设计师常用的 Top 3 做法为：【信息层】隐藏不必要信息、【视觉层】提高布局紧凑度、【交互层】减少点击跳转。

实践阶段-如何设计

通过以上的探索，我们可以确定的是，B 端产品面向专业人员的工作界面设计中，提高屏效可从视觉、交互、信息三个层次进行，视觉层-高密度，即提高屏幕信息密度；交互层-低跳转，通过减少页面跳转、手势与常用操作的距离等；信息层-有效性，通过重组织或辅助信息帮助用户理解，甚至提供帮助手册等以提高用户专业能力。

基于以上的总结，对产品进行优化。下面以一个简单案例进行设计策略的解读。一位运营同学想对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，寻找运营机会点。

如下表格经过高屏效策略优化前后对比图，优化前相同维度下不同人群数量的对比需要视线来回跳动比对，而优化后的表格内容，更符合用户看差异场景下分析目的数据查阅，视线锁定相同维度，即可快速比对数值大小。

下面以视觉、交互、信息三个层次解剖设计过程背后的思考。

视觉层｜高密度-克制的留白

眼动理论：研究表明，人眼最小可视视角 0.3 度，水平最大眼动舒适转动区 30度，垂直最大眼动舒适转动区 55度。可得出人眼最小识别范围 12px，水平视野舒适眼动宽 1200px，垂直视野舒适眼动高 2200px。参考资料：论文《基于眼动交互的用户界面设计与研究》

如图，缩小表格行高的同时，目标信息之间的眼动距离随之缩短，在眼动舒适区内看到更多信息，便于信息的高效获取。

交互层｜低跳转-高频信息前置

理论基础：菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型，它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为：T=a+blog2(D/W+1)，W为其中目标的大小；D为到目标的距离；T为移动到目标所用最短时间。参考资料：菲兹定律

表格单元格借助交互状态，增加悬浮出现的信息组件，前置显示目标单元格明细信息，同时通过交互出现的指示器辅助行列信息的获取，高频操作考虑手势位置放置，缩短与操作目标的距离，以提高整体操作效率。

信息层｜有效性-信息重组织

理论基础：交互设计四大策略「组织、删除、隐藏、转移」参考资料：《简约至上》

用户为了对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，但内容的重组织方式让两数据行需要频繁点击滚动条来查看，根据用户目标，将关联性大的数据放置相邻列（即将要对比的人群放置列头），即可快速查阅，减少眼跳距离。

结语

设计趋势中常见的大字体大留白界面，但在 B 端场景中，面对紧张的工作节奏，时间和注意力变得尤为可贵，相对而言，基于复杂度守恒定律， B 端信息量大且高频访问的产品中，「用得快」要比「看得美」更重要，「高密度」「低跳转」诠释的即是「空间换时间」，少一次点击，少一次跳转，少一份等待，就多一份时间和效率。

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

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

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

What 是什么

简介「行动号召按钮」是用来号召用户点击的进行下一步的操作按钮/可点击的组件。

例子 蚂蚁金融科技首页的“开始探索”按钮，点击后跳转到一个新的页面进行下一步操作。

Why 为什么

「行动号召按钮」是在事件操作的最后一步出现的，可以让用户知道当按下此按钮时，当前事件的操作流程已经完成或即将发起一个新的流程，可以给用户一个明确的反馈。

When 什么时候使用

当你需要在界面中放置“完成”、“提交”、“确定”或“继续”等按钮时，可以使用这个模式，一般放置在一系列操作的最后一个步骤中。

使用条件

• 页面中即将进行下一步操作或最终确认的时候；

• 需要一个醒目的按钮提示用户结束当前流程时。

How 如何使用

创建行动号召按钮时可以使用平台默认的按钮样式，或者使用更大的按钮样式（注意不能是一个链接），让它在页面中非常醒目，让用户可以快速找到并点击它。

需要注意：

• 按钮可以放在页面的底部或右边，即任务流程最后一步的下面，也可以是你的平台规范中规定的位置，只要能让用户能够快速找到它就可以，避免用户因为找不到按钮而结束了这个流程；

• 最好使用文字按钮而不是图标，因为文字能让用户更好的理解，比如像“完成”、“提交”这样的按钮用文字更能让用户理解。

Example 案例

案例一：Google Play商店

用户需求：安装应用

安卓设备上的 Google Play 商店中软件名称右下方的“INSTALL安装”按钮就是一个很好的案例。此按钮放置的位置是软件名称的下方和右侧，周围的空白区域较大，是用户视线最终会停留的位置，颜色是绿色与白色背景形成对比，且尺寸也很大，所以非常醒目 ，用户一眼就能看见并点击它。

案例二：12306官网

用户需求：查询火车班次并预定

12306官网的首页的搜索火车班次的界面上就使用了强按钮，橙色的长按钮非常醒目，且位于信息的最下方，当一切信息输入完毕后，用户可以立即看到查询按钮并顺利点击进入到下一个页面。

案例三：App Store

用户需求：安装软件

用户在搜索到软件进入到软件详情页面时，一眼就看到软件名称右方的蓝色“获取”按钮，点击它就可以安装软件，作为整个页面唯一的动作按钮它十分醒目，符合用户的“Z”字形的浏览信息习惯，确保用户能看到它，快速达到目的。

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

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

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

为什么说是撕开 B 端封印呢？没接触过 B 端的同学，很大一部分都认为 B 端不就是简单的列表和图形吗？拿开源组件拼拼凑凑就可以了，有什么可设计的？

其实这个想法完全错了，你如果接触后就会发现，B 端所需要的掌握的产品知识、思维逻辑、规范意识等等太多了。

而且近几年 B 端这个词出现的频率越来越高了，因为前几年大家都在争 C 端市场，纯 C 端的流量争夺已经进入了尾声，B 端产品反而带来了新的机会点，同时也被慢慢的重视起来，比起以往 B 端设计师，现在需要掌握的技能也越来越多。你可以查阅一下一些招聘网站，现在 B 端可视化方面的岗位是非常火爆，与 C 端相比，人才缺口更大，未来几年 B 端也会更加火爆，有机会接触 B 端的话就不要错过机会。我们团队平均招聘一个合适的设计师基本要两个月的时间。

说了这么多，我们开始今天的主题吧！

首先在座的可能有部分设计师没有接触过数据可视化的设计，那么第一个问题来了，什么是可视化？大家想一想。给大家三秒钟~

通过可视的表达来增强用户处理数据的效率。

接下来我会从三个方面来讲解如何构建可视化：

    · 灵感需要迸发，更需要积累

    · 从零到一设计驱动

    · 设计度量

一、灵感需要迸发，更需要积累

1.1  数字时代下，99%的问题都是旧问题

数字时代下仍有信息不对称的情况，尤其是关键技术和设计上的问题，但是如果你用心寻找，就会发现你的新问题则是别人很久之前的旧问题了。所以要做个有心人。

但是问题又来了，有时候真的不知道该怎么找、去哪找？这是个很常见的问题。因为可视化不比插画、平面等这些成熟的领域，他是比较小众的，所以灵感以及素材的搜寻是一个令新手设计师头疼的事情，再加上对关键词的熟悉程度不够，导致很多设计师只停留在【可视化】这个关键词里，最后感觉搜来搜去都是见过的图，没有新意。

1.2  明确目标，知道自己想要找什么

互联网信息太多了，漫无目的的找灵感，只会浪费时间，一会看到这张图好看，一会看到那张图好看。不知不觉几个小时就过去了。

1.3  建立关键词词库

确定目标后，就要细化关键词了。怎么建立关键词词库呢？

关键词词库由3部分组成：终端、设计类型、业务类型。

    · 终端：大屏、移动端、web 等等。

    · 设计类型：每个细分的数据可视化类别都是有一些专有名词的，比如最近比较热门的车载HMI系统，那他的类型关键词就是 HMI。通过这些关键词，你会搜到更精准的结果。设计类型关键词比如：AR/VR、HUD、HMI、FUI等等，你要了解你们公司相关类型的关键词，记录下来。以及跟你们有关联的，都记下来，补充自己的词库。

    · 业务类型：智慧城市、生物医疗、监控部署等等。

这三类单独或组合进行搜索，就会看到更多可视化产品了。把关键词词库建立起来后，就可以去常用的网站上搜索了，最好用的还是 behance 和 Pinterest。

1.4  除了常用的设计网站，还有哪里可以看？

企业官网：很多做数据可视化的公司，会在官网展示一些能体现自己业务特点、业务实力的案例，而这些案例就是这些企业最好的数据可视化设计作品了， 所以但凡有案例展示的官网，案列基本都是最典型最好的设计，所以从这些案例中找灵感，也是一个有意思且有效的方法和途径。

1.5  你看到了别人看不到的，设计才能有所不同

总结一句话：你看到了别人看不到的，设计才能有所不同。如果你和别人看到的是一样的，你怎么比别人做的更优秀？

1.6  兴趣推送

经常刷短视频/新闻网站的应该知道，系统会根据你的点赞、收藏、浏览等数据来给你安排后面的内容推送，以保证给你推送更精准的内容。设计网站亦是如此，behance 等网站上也都是千人千面，它会根据你的点赞收藏等来读取你的喜好，进而推送更精准的作品。所以假设你是一个B端数据可视化方向的，你就经常搜、点赞收藏相关作品，之后你的首页出现相关内容的几率也会变大。

1.7  定期清理，更新迭代

最后一点，这个也是好多设计师的通病，收藏即学到。

灵感库要求精而不是多，每隔一段时间，回来翻一翻自己之前收藏的作品，会发现有些作品自己已经看不上了，因为在做灵感收集的过程中，我们的审美会自然有所提高，当输入的作品样本越来越多，我们对作品评价的维度也会更多，之前那些觉得好的作品，现在看来也就会有缺陷和不满，这是一个很正向的结果，成长就是一个不断剔除的过程。删掉那些自己觉得不满意的作品，添加更符合自己当前审美的作品到灵感库里。

这样慢慢完善你的地基，才能更高的向上走。

二、从零到一  设计驱动

讲完第一部分，我们开始搭建产品。

我负责从零到一的项目大大小小的得有10来个了，我认为在产品整个产品周期中设计师的话语权最高的时候就是项目初期，是可以做到设计驱动的。既然设计可以有足够的的话语权，你就得规划好未来的设计走向。

产品初期，经常会有几个争议比较大的问题，我们来聊一下。

2.1  设计先行还是调研先行？

这是新项目必须要做的选择题，再讲之前你先想一下，如果是你，你会如何选择？

我的观点是设计先行。（当然设计先行是建立在你至少对这个项目的行业有个简单的了解之后，先设计再用户调研），为什么呢？因为如果用户调研先行的话，用户只会反馈当下最想要的东西，从而有可能给你带来误导。就比如我们经常举的一个例子：汽车出来之前，人们只想要一匹更快的马。

我们要解决的不是用户当下想要的东西，而是痛点背后用户真正需要的东西是什么。在 0-1 的这种创造性的项目，往往设计者才是当下最懂产品的人，你把决策权交给一些不懂产品的人，做到最后只能是迷失了方向，锅还是设计来背。所以一开始设计师要把决策权拿在手中，掌握航向。

2.2  设计先行还是规范先行？

这个问题在现在看来相对比较统一，但有的同学还是有疑惑，所以我拿出来再跟大家聊一下。

首先我的观点是设计先行，在设计之前就定好规范的基本都是自己YY的，返工率极高。等你在做具体设计的时候就知道之前做的规范都是白费力气了。一般都会选用在项目完成之后或者主风格及主要页面完成后再输出规范，这样既可以减少规范的改动，也可以保证后面功能延用规范，一举两得。

当然了，设计规范不是所有项目都要有的，它是为了减少工作而不是增加工作，如果是一次性项目，就不需要再额外花费精力去输出规范了，浪费资源~

2.3  完成和完美那个更重要？

现在都是争分夺秒的时代，任务是无止境的，没有做完的时候。造成这个局面的无非就是一个问题：时间不够用。通常的做法就是先完成再迭代，做产品久了你就会发现，完成比完美更重要，不完美你还可以再迭代，完不成就有可能错过一个风口，从而失去了变完美的可能~

聊完这三个问题，我们在设计的时候也要有一些注意项，真正的做到设计驱动。

2.4  把复杂变得清晰简单而且美

对于设计师来说，我们的任务就是把复杂问题变得清晰简单而且美，所以我们应该成为企业和客户之间沟通的“架桥人”。通过设计的方法，把无形的、复杂的技术，通过有形的、可视化的方式展示出来，让客户更直观、清晰的感受到产品的功能，看得懂其在业务场景中产生的价值。

2.5  转换视角，建立共鸣

站在客户视角，聚焦客户关注的核心问题，通过情景把内容有序组织起来，快速与客户建立共鸣，有效降低内容理解难度。

2.6  产品架构可以不那么复杂

把复杂的业务/功能简单化、傻瓜化，最大的降低学习成本，能帮用户操作的绝不让用户亲自去操作。你要让用户在1分钟之内了解你的产品是做什么的、有什么功能，你就成功了。

2.7  大胆隐藏冗余内容

B 端项目中内容量是巨大的，面对庞杂的信息，去粗取精，提炼各场景的核心内容，避免冗余信息阻碍内容有效传达。话术语言不单要简单易懂，还要严格控制文字长度，保证内容可以被快速扫描和理解。

2.8  尊重用户习惯

不要妄想改变用户养成的惯性思维，你要记住惯性思维大于设计思维，他的阅读习惯、操作习惯都是不易改变的，不要为了个性化而尝试去改变，大部分情况下结果不会是那么的理想，除非你有极大的把握。

2.9  选用合适的图表

这个是常提到的，我就在这里简单给大家提个醒。比如做数据对比，柱状图更能清晰表达出用户想要的结果，你却非要放个酷炫的雷达图，他的本质目的都没达到，要美观有何用？

每个图表都适合哪些场景使用，像 antv、hicharts 等都有介绍，我就不一一赘述了，我之前也写过一篇关于如何合理利用图表的文章，大家有兴趣的可以去看一下。

三、设计度量

产品设计的好与坏我们需要去验证、去度量。我们怎么去验证可视化的好与坏呢？

美与丑也是主观的，没有绝对的美，也没有绝对的丑。一个产品，总会有人喜欢有人不喜欢，但是我们要迎合大多数人的审美。

所以就需要一个方法论来验证产品的好与坏，现在各大厂都在做自己的一套产品验证的方法论，阿里在这方便算是国内做的不错的，我举几个常用的度量模型。

    · 阿里云：UES

    · 蚂蚁金服：PTECH与易用度

    · 1688：五度模型

    · 优酷：DES

UES 目前是国内最好的，在 5 月份的阿里设计周上也正式对外讲解了 UES 模型。我拿阿里云的 UES 简单讲一下吧，这么多度量模型，无论他的方法、维度有所不同，但他们的目的是相同的：通过模型来度量设计成果。

    · 易用性：易操作性、易学性、易见性 ...

    · 一致性：整体样式、通用框架、常用场景及组件 ...

    · 任务效率：任务完成率、任务完成时间、功能使用率 ...

    · 性能：首屏渲染时间、API 请求响应时间、页面请求响应时间 ...

    · 满意度：产品满意度 ...

UES 分为 5 个模块，这 5 项是整个产品生命周期需要验证的。

关于 UES 我就介绍到这里吧，UES 模型要是展开讲的话，半天都讲不完，感兴趣的话可以去阿里云官方发布的 UES 模型的相关资料中深度研究一下，看看适不适合自己的产品。

上面是度量产品的模型，接下来针对我们 B 端设计师，我们也要有一些指标来度量自己是否合格。

3.1  设计效率

现在内卷盛行的时代，各大厂都在讲人效，毕竟时间才是最珍贵的，所以现在都在想方设法的提高人效。而且 B 端相对 C 端来说，可以有更多自动化的工具。

举个我公司的例子，我刚去的时候基本没有自动化工具，每个设计师每天也都在忙碌，谁也没偷懒闲着。但是我发现有很多重复性的体力劳动是不需要多少思考就能完成的，但是却耗费了将近 1/3 的时间。所以我就在想如何提高人效，把一些体力劳动用一些工具来代替，这样就能释放设计资产，去做更重要的事情。

当时就做了第一个自动化的工具：设计系统，现在大家对这个词应该不陌生，但是我们刚开始做的时候比较早，还没有一些比较完善的设计系统供我们参考，所以我们也算是前几批摸索设计系统的团队。设计系统做好后是可以把这1/3 的设计时间节省了下来，而且团队的规范性更加统一。

后面的话我们也是做了一些其他的自动化工具，比如结合一些插件做到 icon、组件等发布的自动化，并且与研发同学打通，有相应的自动化提醒工具，这样也节省了与研发的沟通成本。

在工作中，流程上能减少一步就是成功，慢慢来，万里长征就是一步一步走出来的。

3.2  增长设计

增长这个词来源于【增长黑客】这本书，顾名思义这个词的就是通过设计来促进产品增长。

这个词用在 C 端上比较多，因为 C 端可验证的方法比较多，见效快，所以我们常见的一些增长设计的案例都是关于 C 端的，而 B 端的话，受限制的因素较多，设计只是影响增长的一部分，而且见效慢。

但是虽说影响因素多、见效慢，我们还是可以抓住机会、多去尝试一些方法来做到设计增长。我这个方法不行，我就换一种尝试。大家都是在摸索中过河~

3.3  为业务赋能

所有的设计都是要为业务赋能、为商业买单。我们设计的本质就是为用户解决问题，让用户以最直观的方式理解产品。不要为了所谓“我认为很美”而与业务背道而驰。

3.4  体验创新

用户体验设计师会越来越重要，近两年逐步被重视，而且未来几年会越来越重视。行业内需要更多动脑的人而不是仅仅会动手的人。

现在到了互联网下半场，拼的不仅是功能，用户体验的重视程度已经被提升了上来，在工作中的占比也越来越重。

再加上现在这个超级内卷的时代，你不提升，你的竞争对手就把你干掉了。而且你如果只是一成不变的维护老版本，你去下家面试的时候都没有拿得出手的产品。

3.5  善用工具

现在各种办公类工具、软件层出不穷，而且很多工具是比较类似的，有的设计师再选工具的时候就很纠结，我认为完全没必要纠结，首先你要明确我想要达到什么目的，只要某个软件满足着你的需求就可以用。

工具是为人服务的，我们的设计软件从 PS – Sketch – Figma，无论怎么变化总要围绕一个目的：更高效的完成工作。

尤其是一些自动化工具，现在人工智能升级很快，要多关注设计自动化方面的工具，让他来解放我们的双手。

总结

最后送给大家一句话：

这时代唯一不变的，就是变化。

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

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

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

老板：给我来一套科技风，要炫酷，要眼前一亮的感觉

    你：好嘞~（叮叮当当咚咚当当）

    老板：哎呀，我要的不是这种太花了，不够高端

    你：给您改（叮叮当当咚咚当当）

    老板：哎呀，也不是这种太素了

    你：行，改....（我刀呢）

    没做过科技风格的新人缺乏对常见科技风格的了解，很容易根据甲方模糊的描述及要求，主观性的设计，还会在甲方要改的情况下十分委屈，我做的就是你描述的炫酷科技风啊。科技风格大类本身特征就是炫酷，眼前一亮的感觉，甲方没有了解只能粗略的表述。设计师主动了解市面常见的科技风格细分及其使用场景。就能够问出甲方爸爸更细化的需求，更客观的根据使用场景选择恰当的细分科技风，减少不断重改的成本。

FUI：

    FUI 就是 Fictional User Interfaces (Fictional GUI)，就是 Fantasy User Interfaces，就是 Fake User Interfaces，就是 Futuristic User Interfaces，这些用户界面它们是科幻的，是未来派的，是奇幻的，是虚假的.观赏性大于实用性。

    并不是所有风格的FUI都适合应用于现实中，比如——半透明介质且信息复杂的的UI，只适合出现在影视作品里面（和一些视频游戏当中）。它们的表现性强，看起来复杂精密，但对于信息展示功能很弱。其存在的目的是更好的配合场景，不会遮挡演员的脸部。想想看主角对复杂的数据一顿操作猛如虎，让观众眼花缭乱，对主角更加崇拜。

1.商务科技风：

     精致、高端、轻质感；简约干净、形体线条精细；功能感强

     应用：

    车载UI；金融UI;各种科技工具类产品的登录注册或官网Banner；商务海报等

    特征：

    1.商务科技配色较为严肃，低调。背景以深蓝色，深灰色背景居多。

    2.元素的形状并不复杂、外轮廓整体规则，周围的细碎装饰较少。

    3.强调品质感，会模拟一些较为细腻玻璃、金属或哑光的微质感。对于光的使用较为克制，较少大范围的使用辉光，多在边缘使用较细的流光，看起来更加的犀利精致。

(偏商务科技风格例子-图片来源于网络）

2.扁平科技风：

    整体风格偏向机械、直观，其扁平特征是元素扁平纯色块或渐变，弱化图表空间感及体积感。多组扁平的数据可    视化图表，在空间层次的表现上更多是在同一平面上。

    非常适合多数据后台数据展示，强调信息数据的清晰展示，较多使用纯色面元素作为底板，减少了环境的背景外扰因素。且数据分组展示，功能分区明显。

    设计成本及实现成本较低，为目前大多数数据可视化大屏展示所选择。

(偏扁平科技风格例-图片来源于网络）

3.HUD（仪表盘）科技风：

    视觉多使用单色，点线元素。可以与现实背景结合度高。

    应用：

    电影(漫威系列FUI)、游戏、企业产品宣传视频、AR等展示型为主

    特征：

    1.颜色使用上单色居多，尤其多亮色白，亮色蓝，同色相多透明梯度变化。无质感或毛玻璃质感。

    2.简洁而不简单，层次丰富，典型风格HUD。空间层次感丰富，使用半透的结构线3D模型或晶格模型，显得轻        巧而精致，用户能够透过信息层看到场景层，

    3.极简科技风需要设计师把控好细碎元素的体量和数量，对信息不会进行过多的视觉干扰。

    ps:

   极简科技风数据的展示容量大于扁平科技风，看起来很复杂高端但通常实用性差。如果使用过多的数据，则显示    相似类型的图表展示相似的数据集在视觉上可能会缺乏新鲜感，但更易于理解和理解。具有不同的图表在视觉上是令人兴奋的，但用户需要花费更多时间阅读。

(偏极简科技风格例-图片来源于网络）

4.赛博炫酷科技风：

    赛博朋克又称数字朋克、网络朋克。

    应用：游戏、H5、运营banner配图等需要强视觉氛围的运营。代表电影如：攻壳机动队、头号玩家、银翼杀手等

    特征：

    1.张扬奇幻的娱乐感，技能风、故障风、视觉冲击强烈。常见元素：全息投影、义体、立体城市、高达机械元素  等。

    2.人造光是赛博朋克在视觉上最大的特征，背景暗色，常用荧光黄、紫、蓝、粉 、绿灯内外发光，模拟霓虹灯管自发光效果,重点元素高亮辉光。

    3.色彩冷暖撞色对比强烈，如：红蓝对比青紫对比黄橙对比等。

    4.数码屏幕与全息投影是霓虹灯的一种延伸，既能体现未来世界的高科技的感，也能体现出人造和虚拟的概念。部分元素前后叠影色彩错位，有频次的闪动，模拟电子科技的偶发故障。机械化IP形象和字体设计常见金属感和拼接感。

（偏赛博科技风格例-图片来源于网络）

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

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

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

将普遍存在的人性用户心理规律运用于设计，增加设计的温度。

近来对用户心理比较感兴趣，去看相关设计资料的时候发现相关内容重复性较高，多方搜集资料结合自己的一些分析总结出一篇补充。

定律是钥匙，在遇到让我们上瘾，持续付出或获得情感的APP，多去想一想它背后洞察了哪些人性及心理，能不能为我们的后续的设计吸收。

最后想说，设计师的价值不仅仅在视觉，好的设计必是好用好看好懂用户的。跨领域学习补充自己的视野，多思多想，掌握钥匙，开启用户不同的心门。

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

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

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