我们生活在一个信息大爆炸的数据化时代，随着网络科技的飞速发展，产品和用户之间的互动也日趋复杂，新功能不断涌现，带来便利的同时也导致用户对功能的认知摩擦日益加剧。在这种情况下，人们对交互设计的需求就越来越大，市场对交互设计师的需求也越来越多。许多公司都注意到交互设计对品牌创建、用户满意度以及回头率等方面的影响。那么，什么是交互？交互设计应该做什么？希望今天这篇文章，能够加强你对交互的理解。

交互就是与另一个人或者物进行交流互动，比如你说话或按动鼠标，对方给你反馈，这就是交互。对于设计师们来讲，交互多指用户与计算机、手机等产品进行的交互。

交互设计是一个页面或者一个界面的内容规划，例如哪里放图片，哪里放按钮，哪里出现文字；或者说是一个庞大网站以及产品的整体逻辑梳理，例如如何安排信息层级，如何让用户更轻松地找到自己想要了解的信息，如何让整个网站或产品更加合理、有效地运转。

一个城市有合理的规划交通才会便利，城市里面的人才会觉得更加舒适，而一个合理的交互设计也直接影响着一个网站、一个产品甚至一个品牌。

视觉设计是感性的，更注重一切表象的东西，比如颜色、版式、形状、调性等，视觉设计最终的成品是视觉的效果图设计稿。

交互设计相对来说更加理性，交互设计更加注重用户是谁，通过需求分析得出问题、解决问题，交互设计的最终成品是原型图。

看过了文字解释，再让我们一起来看看生活中无处不在的交互设计。

叠猫猫、盖楼、星秀猫……每年双11，天猫都会创新活动，激发用户对双11购物节的期待，营造蓄势。

今年的双11的主题为喵糖总动员，用户通过组队一起做任务赚喵糖，通过掷骰子的方式获取糖果数，占领格子，击败对手。获取喵糖的过程中，营销或引流设置无处不在。除了做每日签到奖励的简单任务外，最简单的方式就是用15秒的时间去浏览平台推送给你的主会场、各大分会场、各细分品类、各个商家店铺等页面。通过这样的任务设计，可以引导用户浏览会场店铺或各品类商品，最大程度地完成各个淘宝店铺的曝光需求。

 

天猫双11-喵糖总动员活动页面

新冠疫情还在持续蔓延，飞猪App贴心的在行程页面，添加了防疫工具引导栏，通过点击按钮，可跳转至支付宝中行程码、核酸预约等界面，为用户出行提供便捷的准备工作。

用户在滑动页面时该导航栏会被隐藏，静态时则显示两个应用，点击展开才能查看更多。设计采用浮层式引导，提供便利的同时，且不会对用户产生干扰。

 

飞猪App界面

一切交互设计所要达到的效果就是形成良好的用户体验，让用户在使用界面时更方便找到自己感兴趣的东西。

通过地图及定位，通过气泡及icon的区别，把附近的美食等进行排名，让用户更快知道自己的距离。还设置了点击卡片展示店铺信息同时支持查询路线等功能。

 

美团App界面

“优秀的设计是考虑周到且不放过每个细节”。往往在那些不易被察觉的细微之处，倾注了设计师的诸多巧思与心血，哔哩哔哩在设计中做了以下一个有趣的小细节。

在账号登陆页面，当我们输入账号或者手机号的时候，页面插画中的22和33是睁大眼睛的，而当我们输入密码或者验证码的时候，他们则用手捂住了眼睛。这个有趣的设计生动地传递了App对用户隐私的尊重与保护。

 

哔哩哔哩App界面

当你使用百度搜索物品，查看图片时，左右滑动即可切换下一张图片，上划即可关闭图片，这样的操作手势，更加方便快捷。

在查看物品图片时，下方还会出现商品推荐购买链接，仿佛“一站式”购物的贴心服务。

 

百度App界面

交互设计的核心目的是信息的传递，无论如何设计交互图、如何设计交互流程，我们要思考的核心和准则是如何把想要传递给用户的信息以最简单、最容易的方式让客户接收，反之用户也能用最简单的方式找到自己想要的信息。

这些信息包括内容、按钮、文字、图片等一切信息的载体。我们要明白在进行交互设计时的前提是如何去梳理信息更好地传递。

那么，如何才能让信息更好地进行传递？我们要搞明白信息传递时需要营造什么样的氛围，哪些信息元素需要突出，目标用户是谁，根据这些才能以一个正确的方向有逻辑地进行交互设计，而这一切的最终结果就是实现一个良好的用户体验。

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

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

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

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

兼顾“突出”与“融合”两方面

进行配色时，要从两方面考虑，既突出提升的方面又融合平稳方面。

例如，以自己最喜欢的颜色为中心完成了初稿，然后应该检查一下，是否过于沉重模糊，或者是否过于喧闹令人不安。如果过于沉静，则下点功夫突出一下即可；如果过于喧闹，则向着沉静、融合的方向调整即可。

1.1 突出型配色1

使主角更鲜明

画面整体显得模糊时，要放弃几个要点，明确主题。大力强调作为主角的部分，并删去暧昧模糊的地方。主题明确后，不仅气氛被提升，画面也会显得清爽踏实。

减少黑色的分量，提高纯度

感觉配色过于沉重压抑时，应该减少黑色，增加鲜艳的颜色，配色将瞬间明朗起来。色调沉重是由于混入过多黑色，减少黑色后自然会呈现出鲜艳的色彩。这是最有代表性的突出配色的方法，也是效果最显著的方法。

烘托画面的中心

明确画面主角

当画面的中心部分被提升后，才会使配色给人深刻印象。我们还可以强化明度对比，加强画面中心部分明度，这样的画面会格外令人印象深刻。

A海报带点梦幻的感觉，但是主角不够清晰。而B海报提升了背景亮度，扩大与中心人物的明度对比度，从而能强调了主角。

加强中心部分的方法

提高颜色纯度

强化明度对比

强化色相对比

给画面添加亮点

我们很多小伙伴喜欢沉稳踏实的配色，这种配色方法虽然是好的，但是画面的配色过于均一则平淡无奇。那怎么解决这个问题呢？其实我们可以在画面中心设置小面积的亮点，给画面增添品味和活力。

抑制背景色，凸显亮点

要记住，亮点的面积越小给人的印象就越深刻。如果你想更加凸显亮点，那就要抑制周边的背景色。只有这样，即使在平稳不显眼的配色中，这个亮点一样很显眼。

A图中整体色调沉稳，但是总觉得少了点什么。而B图中鲜艳的红色成为宁静配色的亮点，给原本平淡的画面注入了活力。

制造亮点的方法

弱化背景色，突出亮点

控制好背景色，即使纯度不高的亮点也有很好的效果

给画面加入鲜艳色彩

鲜艳的色彩尽显活力

如果你想增加配色的欢快感，就应该加入纯度高的颜色。

A产品整体是暗色调，高雅庄重，但是似乎有些欠缺。而B产品加上了小面积的鲜艳色彩，高雅不变，华丽有余。

加入鲜艳色，变得活力

增加画面色彩面

添加色彩，画面变得生动

当人们看到无彩色画面时，总会感到有所欠缺。如果在无彩色画面当中加入一些色彩，画面顿时变得欢快活跃。

A海报是无彩色的，画面过于单调；而B海报只是在A海报的基础上增加了色彩面，画面顿时变得欢快活跃，生动了许多。

增加色彩面，变得明快

减少黑色

调整画面部分明亮度

很多小伙伴喜欢把画面背景色设为暗色调，因为这样有踏实感。这样做画面虽然高雅却有失欢快，我们不妨试试将背景色调亮一个等级，最后你会发现画面变得明朗愉悦了许多。

因为A画面沉稳有余，但过于灰暗，缺乏欢快气氛；将A背景色中的黑色调到零就得到如图B背景色，调整之后的画面能给人明快的印象。

减少黑色使画面明亮

如何创造有踏实感的明亮？

如果你希望画面变得明亮，又不想破坏原有的踏实感时，则可以保留10%的黑色。

分离配色

什么是分离配色？

大家都知道按照色相、明度次序配色称为“渐进配色”；那与之相对的配色方式就是“分离配色”，独立配置每个颜色。

A图采用的是渐进式配色，按色相顺序排列，给人安静平稳之感，但有失紧凑，略显无趣。而B图采用的是分离式配色，使用与A图中相同的色彩，只是简单变换顺序，突出各色的独立性，冲破秩序感，给人以活泼的感觉。

打破颜色顺序，随机分离，使之独立，释放出动感

1.2 突出型配色2

用对比色达到突出效果

在色相图在相对的为对比色，相邻的为邻近色。单用邻近色配色，则画面感觉平稳；加入对比色，则颇具紧凑感。

在色相环中的相对位置创造出各样的色彩表情

挑选色相环中的相对两色，则带来欢快的节日型配色。若组合在色相环图中呈正三角形的红、黄、蓝，则得到理性安定的画面。通过颜色在色相环中的形状，能创造出各式各样的色彩表情。

黑白制造紧凑感

不难想像加入黑色会起提升效果，其实白色同样能在轻松氛围中制造紧凑感。

给画面加入对比色

对比色是主色的必要补充

色相环中相对的色相成为对比色，也叫补色，甚至可以说，配色的基本就在于补色，配色完成于补充颜色的过程之中。加入补色使人心情舒畅，缺乏补色的画面容易令人觉得不自然。

A图是以同色系为中心的平稳配色；图B加入对比色蓝色后，画面效果加强了些许。

加入对比色，使画面生动突出

终极纯粹三角型

平衡的三角型

红、黄、蓝在色相环上组成一个正三角形，被称为三原色，是特殊的颜色。绿色、紫色等颜色都可以通过混合这3种颜色得来，但是无论怎样混合其他颜色都无法得到三原色。随着毕加索、蒙德里安等现代派画家们追求终极的纯粹色，三原色的组合得到了重视。

蒙德里安《红、黄、蓝的构成》

这幅作于1930年的《红、黄、蓝的构成》是蒙德里安几何抽象风格的代表作。蒙德里安将色彩、形状纯粹化的结果，是否定红、黄、蓝三色以外的一切色彩。线条的方向也限定于水平或垂直，排斥斜线。

三角型的效果，掌握好平衡即可

十字型配色

强烈的紧凑感

将两组对比配色交叉组合后，便得到十字型配色。醒目安定的同时，又具有紧凑感。在一组对比色产生的紧凑感上加一组，自然成为最强配色型。

梵高《軍人》

A画面只用了一组红绿对比色，看上去很有紧凑感，但是过于硬朗。在A的基础上增加了一组蓝橙对比色，带来有力的安定感及紧凑感，画面丰富了许多。

由于把两组补色组成十字型，达到了完全的平衡。

黑色起突出作用

无色彩的黑色是最有力的搭配色

黑色是“无色”的特殊色，纯度、色相、明度都为零。但是，加入黑色会突出原有的颜色，使画面有力度。黑色与其他色彩组合时，是最有力的配角色。

海报A蓝绿色均为冷色，绿色背景下，表现出轻快自然、明亮却趋于平淡。海报B背景变为黑色后，绿色变得深邃而闪烁。这时，黑色本身难掩的光辉甚至会使人误将其当成主角，但是不会喧宾夺主掩盖主角色。

黑色无论与任何色彩搭配，都起强调提升作用。使强色更加强烈，使浅色更加突出，产生生动醒目的效果。

白色起强调作用

作为中立色的白色，不会破坏其他颜色

白色是所有色彩中最中立、最无个性的颜色，但是可以通过特定的使用方法，使画面整体更突出。在不破坏其他色彩感觉的基础上提升整体。

白色与任何颜色的反差都很大。人眼对最明亮的白色颇为敏感。即使是相当低的明度下，白色的效果也显而易见。海报B加入白色，瞬间被突出。

白色有着意想不到的效果。配上过于强硬的颜色则使之缓和，配上浅色则使之被强调。保持浅色原本的感觉，突出整体效果。

1.3 融合型配色

使用三属性达到融合效果

与突出型配色一样，我们采用三属性（色相、纯度、明度）来缓和过于喧闹、醒目的颜色。突出时要增强三属性的对比，融合时则要减弱对比色的对立。

靠近色相

使用同系色，画面统一和谐

色相差越大越活泼，反之，色相越靠近越稳定。色彩给人感觉过于突出喧闹时，可以靠近色相，协调各种色彩，使画面稳定下来。

B图使用近似色配色，表现出平稳安详的感觉。而A图红绿色相之间变化幅度过大，流于散漫，给人一种不安定的感觉。

色相被靠近后称为邻近色，进一步靠近则称为同系色，越偏离对比色、接近同系色，就越有平稳踏实感。

统一明度

明度差破坏安定感

即使色相差很大，只要明度统一，画面整体就会给人以安定的感觉。这是在不破坏色相平衡、维持原有气氛的同时，得到安定感的巧妙方法。

A图明度差较大，产生活泼感。而B图缩减明度差至零后，画面整体变得和谐，给人一种安定的感觉。

无论多么松散的配色，统一明度后都会呈现出整齐稳定的效果。零明度差营造出踏实稳定的感觉，因此最好尽量扩大色相差，力求维持色彩之间的跳跃感。

色调靠近

气氛的统一

色调也称“调子”，表示色彩的感觉、品位。因此，可以把同一色调的色群归为具有同一类色彩感觉。组合同一色调的颜色，则相当于统一了画面气氛。

A画面组合有所偏高的色调，会破坏画面的统一，而B画面将鲜艳的色调换为明灰色调，画面感觉统一和谐了许多。

如果画面松散，缺乏统一感，则需要统一色调。统一至相同或相近色调后，原本混乱的配色将变得缓和稳定。

群化方法

通过群化法收敛混乱，将三属性共通化

将混乱的配色群化会得到踏实的效果。所谓群化，就是赋予色相、色调、明度等以共通性，制造出整齐划一的组合。画面松散时，将三属性的一部分共通化，会得到统一感。

A图的配色过于混乱，色彩纷繁的效果使画面整体显得混乱。B图的配色明度、色相以及色调都比较相近，画面整体显得统一和谐。

所谓群化，指的就是分组、共通化。将前面讲述的明度、色相、色调等综合地共通化后，产生群化效果，画面收敛、缓和。

双色调配色

同一色相的明暗两色

所谓“双色调”，指从相同或相近色相中抽出两种色调的组合。最有代表性的双色调是同一色相的单色与明色的组合。制造色差，或是组合进浊色，都能创造出丰富的色彩表情。

B图的配色采用的是同一色相的淡色与暗色的组合双色调；而A图中的绿色与淡红色的色相差过大，无法组合成相同或相近色相的双色调。

双色调组合类型

浓淡法

节奏感产生舒适感

浓淡法指按照色相或明度顺序的配色。由于顺序被明示出来，因此产生节奏感，给人以舒适的感觉。对画面的一部分使用浓淡法配色，则该部分周报有着踏实的效果。

A图中彩虹的配色排列松散，但颇为活泼；B图中彩虹按色相顺序排列后产生稳定感、节奏感，就会显得既张扬又踏实。

色相的渐进

明度的渐进

莫里斯派·对比双色调

莫里斯偏爱的配色

使两组双色调对比后，同时呈现出平稳与紧凑的画面感，将双色调具有的舒适感与色相对比具有的紧凑感调和至平衡，是活跃在19世纪的英国装饰艺术大师威廉·莫里斯钟爱的配色形式。

A图由绿色的明、中、暗三阶段构成的配色。由于是同一色相，所以画面踏实，不过似乎太过单调而显无趣。鉴于出现3个阶段的颜色，应成为三色调，不过与双色调效果大致相同。而B图中加入对比色红色系的双色调。对比色效果强调了整体，双色调的平稳感与色相对比的紧凑感共存。

组合身为对比色的双色调，产生紧凑感，给人以自然的印象。

微差·品位浮雕装饰

近似色相与小明度差

使用几乎令人察觉不到的微笑色彩差别配色，会传达出高雅寂静的感觉。一般情况下，微差因其暧昧模糊感并不讨好，不过一旦被有意图地巧妙使用，会有意想不到的效果。想运用好微差，周边色尤为关键。若不小心搭配进强色，则会瞬间破坏来之不易的静感，称为庸俗失败的模糊配色。

A图鲜艳的黄色破坏了整体的宁静气氛；而B图去掉了鲜艳的色彩，包的色调具有微差的特点，微差配色表现静谧。

微差配色可以营造出幽静气氛

重复法

通过重复融合整体，制造共同之处

在稍稍偏离的位置上放置统一色彩，会达到共鸣融合的效果。这就是重复法。一致的色彩不仅互相呼应，整个画面也融为一体。

A图顶部与下面的颜色没有呼应，使得上下分离，破坏了画面的整体效果；而B图下面汽车的青蓝色与顶部天空的青蓝色呼应，形成一致的色相，上下便产生一体感，使得整体紧凑严密。

在偏离的位置上放置与主要色彩同色系的颜色，使得整体融合，产生统一感

利用白色间隔使画面更柔和

在过于浓艳的配色在使用白色背景

白色的色彩度为零，可以说是完全中立的颜色，但是由于搭配方法不同，可以产生十分鲜艳的效果。白色可以令平淡的配色鲜明，也可以令浓艳的配色柔和。

A画面全部是过于强烈的颜色，浓艳而令人腻烦；而B画面换成白色背景去除了浓艳的感觉，画面表现得柔和起来了。

如果强烈的带有刺激性的色彩让人感觉很浮躁的话，可以尝试在中间插入白色间隔，这样不仅减弱了压迫感，也使这种颜色的特征更加鲜明生动

2.1 营造画面氛围

画面的安排决定配色的成功与否

如果商品与画面不一致的话，即使有了漂亮的配色也没有任何价值。已完成配色的画面能否与目光锁定的方向一致是成功与否的关键。想要随意表现一个快乐的画面，如果用上等的格调和高雅的配色，就会令画面混乱，无法传达正确的意思。

大部分画面由色调决定

决定画面的三要素是色调、色相和对比强度。其中最重要的就是色调。色调换言之是“格调”，是和“心情、品位、兴趣”具有相同语感的词汇。选择哪种色调进行画面的配色，决定性因素就是心情。

色调

大部分画面由色调决定

即使是相同的材料、相同风格的形状，当色彩的色调发生变化时，画面也会完全不同。色调在营造画面氛围的要素之中起决定性作用，如果错误地选择了色调，无论在色相和明度上下多少工夫都无法修正画面。

选择的色调就决定了配色的画面。如设计婴儿产品，就不适合用鲜艳或严肃的色调。

色相

暖色与冷色

色相大致可以分为暖色和冷色。由红色至橙色、黄色被称为暖色，正如字面上的意义一样，这些颜色给人温暖的感觉。相反，由蓝色至青紫色被称为冷色，表现出清凉、冷静的感觉。一方面，各自的颜色都与各自特有的氛围相联系。绿色、褐色是用来表现大自然的色彩，字色无论浓淡都散发着女性的气息。

色相带来不同的画面效果

色相大致可以分为冷色与暖色，一级位于其中间的色相共4部分。以暖色为主体进行配色给人以温暖健康的印象，以冷色为中心则给人寒冷的印象。

对比强度

加强对比凸显活力

组合色彩之间的色相之差、明度之差和纯度之差称为对比强度。增加对比强度可以增添活力，减少对比强度则显得沉稳。想要创造富予活力、精神饱满的画面就要增加对比强度，想要表现静谧高雅的画面，就要限制对比强度。

A图中的运动鞋色相对比较小，给人稳重的印象；反观B图的配色色相对比强烈，表现年轻人的朝气蓬勃。

面积比

利用大面积比使画面鲜明锐利

即使使用相同颜色的搭配，当面积比例改变时印象也会随之改变。增大面积比（大小差）可以产生轻快的动感，相反，减小面积就会带给人轻松愉快的印象。

A图中的橙色地面在画面中占据了相当大的面积，给人以轻松舒适的印象。较少地面橙色的面积，画面变得锐利鲜明起来。

2.2 色彩印象指南

检查画面的差别

如果想要传达的内容与画面的配色产生分歧，那么无论怎样美丽的配色都不会有任何效果。观看者的印象与配色所表达的画面无法产生共鸣，那么无论怎样美丽的配色都没有任何意义了。

男性——冷静且有力的形象

令人感觉到男性特征的色彩，必须具有强大的力量。表现强大力量的纯色，接近纯色的暗色都是符合男性形象的色彩。

女性——冷温柔亲切的形象

和蔼、亲切、温柔的色调与保守色调的对比是关键因素。以红色为中心的暖色十分有效。另外，紫色是可以表现女性温柔的特殊色相。

寒冷

如果只用蓝色为主的冷色进行配色，就可以营造出冰天雪地的寒冷感觉。增大明度差能够进一步强调寒冷的感觉。

凉爽

以冷色为主的大部分色相，减小其对比强度即可减弱寒冷的程度，使画面表现出凉爽的感觉。由于亮度是主要因素所以要避免使用强色调。

温暖

橙色、红色、茶色等以暖色为中心的色相用来表现温暖。减小对比强度就可以营造出温暖的感觉。使用任何色调均可。

炎热

加入对比色相更能够强调暖色。纯色色调是基本要素，素雅的色调与明亮的色调都无法表现出炎热的感觉。

活力

朝气、活力、休闲

可爱·浪漫

都市气息·优雅

略显素雅的明亮色调带给人平静和安详的感觉。表现出橙色生活的优雅氛围。

豪华感·高级感

将暗色色调放置在纯色的旁边，表现出豪华气质。即使是同样的暗色，由于被放置在离纯色较远的位置上而失去了鲜艳色泽，豪华的氛围也一下子消失不见了。

自然之美

树木的绿色、大地的褐色使人直接联想到大自然，心情也变得安定祥和。

力量·速度

充满力量的画面不可缺少重量感，但并不一定适合于表现速度感。速度感是以鲜艳的纯色色调为基调，而力量感则与鲜艳的厚重色调相吻合。

幻想·神秘

同色系色彩带来幻想世界的缥缈感。

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

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

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

“价值”在百度百科的解释是————“价值属于关系范畴，从认识论上来说，是指客体能够满足主体需要的效益关系，是表示客体的属性和功能与主体需要间的一种效用、效益或效应关系的哲学范畴。”
因为一些外部原因，让我最近一段时间都在思考一个问题，作为一名设计师，我的价值是什么？？？我的设计能力。那我设计能力的价值是什么？？？完成产品视觉的呈现，帮助项目上线和产品落地？
当这个回答摆到我面前的时候，我竟然有了一丝的不安。
因为在我看来视觉呈现这只是能力，并不是真正的价值。如果作为设计师只是这样的能力，你会发现在团队的位置是很容易就会被顶替的。
那作为设计师的我，那如何才能让自己不容易被顶替，体现自身价值到底是什么就成了重中之重的事情。
那体现自身价值之前，我需要去知道设计价值是什么。设计价值说到底就是解决问题，从而带来了想要的效益。

那我需要思考的方向（我工作主要方向B端产品）

一、设计师解决了什么问题
1、发现问题
2、定义问题
3、分析问题
二、设计师如何解决的问题
1、明确设计目标
2、制定设计策略
三、设计师如何验证问题是否解决
1、收集用户反馈
2、跟踪数据指标
四、举个例子
五、总结一下

 

第一步：「设计师解决了什么问题」

发现问题、定义问题、分析问题
一开始工作的时候很长一段时间都是被动接需求、找参考、输出设计稿，这样一个流程下来，解决的问题无非就是如何用设计呈现需求的过程，设计师的价值发挥就会非常有限。所以如果想发掘更多设计价值，就需要转被动为主动，将设计前置，从业务出发去发现问题（通过分析项目背景/目标、用户调研、行业/竞品分析等）、定义问题（问题出现的原因是什么？用户的原因？还是产品本身的原因）并且分析问题（细化出现问题的原因，给出解决问题的方案）

第二步：「设计师如何解决的问题」

明确设计目标、制定设计策略
虽然如何解决问题每个人的侧重点都不一样的，但是设计目标作为体验提升的开始，正确的设计目标决定了提升的方向，而设计目标可以由产品目标（提升某个具体的指标、提高用户的操作效率）和用户目标（用户的想要得到什么、用户使用产品的痛点是什么）的推导出来。目标有了就要落地去实现，作为设计师，设计策略是落地的重要一步：统一规范、缩短操作路径、提升用户满意度等等

第三步：「设计师如何验证问题解决与否」

收集用户反馈、跟踪数据指标
我们总是在主观的评价这个设计好不好看、好不好用，导致设计的价值很难去真正的衡量。其实衡量价值最基本的方法无非就是你这样做带来了什么，结果导向是衡量设计最为标准的，也是流程闭环的最后一步，如果没有结果，流程无法闭环，那设计价值也无法衡量。而产品上线后得到结果又是什么？无非就是用户反馈是否满意和数据指标是否达标。 

举个例子

项目背景是在公司业务快速增长和用户对于服务品质的诉求提升，加上客服团队一直处于被动依靠人力处理用户问题的服务模式的情况下，排除大幅度叠加人员的方案，希望通过数据驱动+服务产品智能化的方式来对客服体系的升级。从而提高客服人员的工作效率，减少公司的招聘成本的同时提升用户的体验，最终实现公司业务的快速增长。

第一步：「设计师解决了什么问题」

1、发现问题

通过项目背景不难发现其中问题所在：在不增加人员的情况下，当前客服团队的服务模式，已经满足不了现有的业务增长趋势和客户的品质诉求。

那我们需要做的就是解决服务模式的问题。

服务模式有什么问题呢？一直处于被动依靠人力处理用户问题。

2、定义问题

为什么一直处于被动依靠人力处理用户问题呢？

· 用户一遇到问题就去找客服，用户做不到遇到问题可以通过自我查询或者其他不依赖客服的方式来解决。

· 客服人员能力有限，每天的用户承接量大，重复性问题多，问题处理流程繁琐，导致单个问题处理时间较长。

3、分析问题

排除人力堆加的方法以外，如何才能解决服务模式的问题呢？

方法就是

增强用户自主解决能力：自主渠道的升级，实现渠道扩增和业务分流，通过内容分层，简化用户查找问题的流程，培养用户自主解决能力的心智模型；引入智能机器人能力，实现简单性、高频率问题由机器人代理解决。

提升客服解决问题能力：调整问题的优先级排序，优先解决重要客户的问题，减少重要客户的投诉和流失；寻找问题处理流程的机会点，减少客服单个处理时长；分析不同程度客服同时处理问题量的数据，限制客服最大承接量。

既然问题已经确定了，那就要去解决问题。根据对问题的分析结果，该如何转换为设计呢？

第二步：「设计师如何解决的问题」

1、确定设计目标

结合产品目标（自助渠道升级、产品智能化/数据化）+用户目标=设计目标的推导公式

产品目标是产品经理/需求方给到你的，但是用户目标则是设计师自己调研分析得来的

----用户想做什么？

用户想快速解决遇到的问题

----客服想做什么？

客服想轻松快速的帮助用户解决遇到的问题，完成工作中的KPI指标

----用户的痛点？

用户在自助渠道找不到答案，于是遇到问题就找客服去解决问题，智能机器人的回答也解决不了问题，所以需要找人工客服，但是需要等待很长的时间

----客服的痛点？

每天高负压的的工作环境，枯燥重复的工作流程，敏感繁多的考核指标。

2、制定设计策略

那在确定好设计目标之后，就需要通过制定设计策略，以达到设计目标。

注意：我们在做设计之前，必须要确定设计目标。因为目标是方向，不然做到最后发现自己做的设计没有解决产品目标和用户目标，那就是白白的浪费时间，也说明自己做的设计是又问题的。

第三步：「设计师如何验证问题解决与否」

项目上线后，我们需要去收集用户反馈，关注我们设定好的指标去衡量、验证构建的设计方案是否解决用了用户问题以及是否达成了产品目标，因为这样设计工作才能实现一个闭环。

1、收集用户反馈

可通过在产品上线初期以及上线一段时间后进行调查问卷的发放，通过调查问卷得到用户在使用新的产品的感受，直观感受产品迭代后的反响，同时也可以为下次的迭代提供方向和依据

2、跟踪数据指标

从产品目标我们可以看出，我们的数据指标就是提高用户对自主渠道的使用率，那我们只需要在自主渠道的页面增加一定的数据埋点：页面点击率、页面浏览时长等等

总结一下

写了这么多，才发现自己现在欠缺的，还有环境欠缺的。所以冷静的理一理自己的工作的流程，多关注业界的动态。主动的将设计前置，提升自己的价值，提高自己在团队/项目中的话语权。不然如果只是简简单单的设计呈现，自己永远处于被动挨打的状态，没有话语权，没有价值体现，随时都有可能被替代。

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

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

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

如何选择合适的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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务