底板类型，只是众多创意方法的其中一种。
这种类型的优点是效果氛围丰富， 自身的风格调性比较明确。常常用在大型活动主文案、或是比较复杂的画面中，能很好地串联元素跟文字之间的联系。

这种类型都有什么要点和制作方法呢？等我依次给大家分享

特点

我们先来看一些同类型作品的样例：

1.底托

很清晰的一点，这种风格最主要的一点就是有一个经过设计的字体底托以让字体清晰，不受画面其他元素影响。

2.重量感

字体厚度、底托厚度、高光、阴影

3.主题感

主题感很强，这种方法设计出来的字体往往会有很强的主题倾向性。也就是风格指向。不用看见搭配的画面 也能知道传达的是个什么样的氛围。

主题感怎么找？

1.分析需求

第一步我们要做的就是分析需求，提取关键词，明确设计目标，我们才能顺利地往后执行。

我们看看这个需求，首先，这是一个漫画LOGO需求。我们应该先了解故事剧情并收集整体一些画面风格，从这些画面中提取可以提炼视觉元素的关键点出来：

观察漫画内容，我一共提取出了下面6个关键词：

然后把他们转化提炼成视觉元素。

2.提炼视觉元素

我们挨个关键词提取视觉元素，

比如科技感：

科技感的特征一般由科技线条构成。

装甲：

这个漫画里就有，直接仿造画风就可以。

灯光：

能量：可以做成类似能量护盾，或者闪电的样式。

以上就是我们视觉元素的提炼了。接下来就是具体的执行。

执行

底板类型的我们第一要做的当然是底板了，我想到的是可以用机甲的元素做底板，把文字承托在上面。

1.制作底板

底板要注意两个点

(1)排版

我们可以先做一个大概的排版

要注意底板不要太大也不要太小，字体在底板上占80%左右的面积比较合适。

(2)造型

造型这里也是比较重要的，我们可以多观察漫画里的视觉元素来做。比如我这里是参考的战机：

它整体的一个机翼造型还是蛮酷的，我们大概秒回一个剪影出来

还是蛮帅的。
放上字体看看比列结构，跟着排版调整一下：

注意控制占比在80%左右。

(3)层次

底板如果只有一层的话，就会显得有点单调，层次不够。也就做不出厚度来。

参考了下底板类型的层次是怎么做的，总结了三种出来：

厚度增加层次：

做出字体的厚度和，底板的厚度来增加层次感，比较稳定厚重。

元素穿插点缀增加层次感：

刻画一些贯穿前后空间的元素， 可以增加层次感和统一性。

层次堆叠：

这种就比较直观，就是一层一层的去堆叠累积，以增加层次感。

我们可以结合起来使用：

所以我们可以在不变动大型的情况划分一下，划分些大的层次出来。

这样就丰富多了，其他的一些厚度啊之类的，可以在上色的时候再添加。

(4)配色
我同样参考下样例：

总结几个点：

1.底板颜色要和字体形成对比，才能凸显文字。

2.一般底板使用暗色。文案使用亮色，或白色。第四个那种使用同色系的可能就有点区分不开，字体不够突出。

方向：

字体：使用白色

底板：暗色

白色好说，暗色怎么找呢？检查了一遍视觉参考，发现有一个飞船颜色挺好的。

刚好又是暗蓝色，这不是符合我们的要求吗？

用到底板上看看：

感觉不错啊！

（5）刻画细节：

把我们提炼的视觉元素拿出来用上

飞船上的线路缝隙，手掌上圆形的灯。

添加下看看：

精致多了。

这里要注意添加细节的两个目的：

1.让我们的元素象形意义更明确，简单说就是画啥像啥。让人一眼能看出来你这个是什么。

2.层次，有凸起的地方（灯光，厚度），有凹陷的地方（比如缝隙，线路）。增加细节上的层次感。

2.文字制作

1.结构

我们看下现在的效果，如果直接放文字就会显得很薄，字体压不住底部。轻飘飘的感觉，我们上面总结的参考中都会给字体增加厚度来压住底部，我们可以试试，给文字再增一层底板，来增加厚度：

是不是就整体多了？
所以字体结构，分了字体本身和字体底板两部分来组成。

2.字型

字型肯定是要做的，但因为字体设计单独一个门类，我这里就不细讲了。
我们参考一些比较英朗科技感的参考来做就可以，展示一下：

3.细节

提取科技线的元素：

添加到字体表面刻画出科技感：

4.一个亮点

在字体上提取一个笔画，做特殊效果，使其与别的笔画有明显的视觉差异：

这里我是把“灵”字中间那一横提取出来做了发光灯灯光的效果，使之成为一个视觉亮点。

3.添加特效

最后我们把字体放上去，整体加上一些前面提炼出来的闪电能量类的效果：

这样我们的logo就制作完成了。

总结

当我们要做某一种类型视觉的时候，不要光看表面的东西。好看或者不好看，什么也学不到。可以总结提炼他们的特点出来去深挖研究，理解里面深层次的逻辑，这样我们才能进步得快。

然后要去学习挖掘提炼某一种类型视觉元素，把他们融合应用到我们的项目中去。把控好每一处细节，才能出优秀的作品。

希望对大家能有所帮助和启发，谢谢。

原文地址：菜心设计铺 （公众号）

作者：慢热

转载请注明：学UI网》LOGO设计

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

设计是一个看上去有点难，实际做起来更难的行业，一件作品看起来平平无奇，可你真要做起来还不一定有人家的好，又或者你觉得别人的作品只是比你的好一点点而已，但你不要小看这一点点，想要跨越这一点点，你也许需要付出一两年的努力，甚至是更久，因为设计师的瓶颈期非常多，很多设计师在两三年期间都没有任何长进也是很正常的事情。不进则退，在这个竞争激烈的行业里，我们要尽量缩短自己的瓶颈期。葱爷本篇文章给大家推荐四个突破瓶颈的办法，希望对你有用。

01.刻意练习基础技能

大部分设计师做不出好的设计作品主题是因为基础不够扎实，其实这也正常，大学里安排的课程太多，学生也认识不到基础的重要性，不会好好学，或者会严重偏科，所以很设计师都没利用好这个打基础的绝佳时间段，包括我自己。而非科班出身的设计师问题会更严重一些。所以，针对基础的技能进行刻意练习很有必要，特别是自己明显的短板。

平面设计师的基础技能主要有这么几个：图形设计、字体设计、版式设计、色彩搭配。那么要怎样进行刻意练习呢？

❶ 选择一个自己最需提升的技能，比如你目前的主要工作就是排版，而你的版式又很弱，那你就优先对版式设计进行刻意练习；如果你的工作是海报设计、广告设计、包装设计这种考验综合能力的工作，那你就选择自己最薄弱的环节去提升。

❷ 买一些该类的书籍、找一些该类的文章来看，并且要收集、赏析巨量的作品，最好是每天都看点此类的作品。

❸ 每天都花一点时间做练习，如果想要提升色彩搭配，可以每天搜集几张图片并提取出它的配色，还可以每天用颜色来表现一个主题，比如春、夏、秋、冬、喜、怒、哀、乐、酸、甜、苦、辣等等。

 

❹ 把自己每天的工作内容或成果分享到朋友圈、微博或者是微信群里，也可以是某个人，这么做既可以适当给自己增加一点打卡的压力，也有可能收到一点反馈。

❺ 什么时候可以暂停呢？首先，这项技能已经基本可以满足你的工作所需，客户或上级几乎不会再挑你这一方面的毛病。其次，你自己觉得已经有很大进步，套路和方法基本掌握，短时间很难再有提升，这时你就可以暂停去提升其他技能了。

02.学习新技能

对于基础还不错的设计师，特别是一些老鸟，最有效的突破瓶颈的方式就是学习一项新技能，比如3D、插画、合成或是动效，最好是选择一个你在工作中能最常用到的技能， 比如电商设计师可以优先选择3D或合成，品牌设计师可以优先选择插画。

这些都是比较主流、比较实用但是大部分设计师都不具备的技能，这些技能可以大大丰富设计的表现手段，能给你的设计作品带来完全不一的感觉，算是横向提升了自己，这种方式比纵向提升自己更快，效果更明显。

03.进一个好的团队

大家都知道环境对学习的重要性，另外，很多人都应该听过“跟对人，做对事”这句话，而加入一个好的团队实际上就是找到了一个好的环境，以及跟对了人。曾经就有朋友跟我说过，在某家公司待了一年，感觉比在上家待了两年学到的东西还要多。

当然，好与不好是相对的，我们没法都一下挤到头部的公司里去，毕竟面试者与公司是一个相互选择的关系。但是对于想突破瓶颈的你来说，一个理想的设计团队应该要有一些基本的要求，我自己是这么认为的：

❶ 团队中一定要有水平比你高比较多的设计师，比如主管或总监；有高人指点比你自己摸索要进步快很多。

❷ 该公司的设计出品不能低于行业平均水平，公司整体水平不行，你想你能行吗？

❸ 公司老板是认可设计的价值的，乙方基本都能满足这一点，但是很多甲方老板都觉得设计可有可无，或者觉得设计要有，但是好与坏不重要，有就可以了，这样的公司对设计的要求基本上是只求快不求质，能做出啥好作品。

04.用营销思维做设计

很多人说设计是技术活，其实这句话只对了一半，因为设计师确实需要懂一些技术，比如设计软件，你也可以把设计的基础技能看成是技术活，就像手艺人一样，设计确实有熟能生巧的成分。但是仅仅懂一些技术很难做出真正优秀的设计作品，纵观那些真正优秀的商业案例，通常会有消费者洞察、品牌思维、营销思维在里面，设计的形式、图形、文案、编排都是有逻辑、有目的的，而不仅仅是从美观、艺术的角度去考虑。

 

当你学会站在更高、更广的角度去思考设计、去做设计时，你的设计能力就得到升华。

 

古人有云：“活到老，学到老”、“学无止境”，不管你做哪个行业，学习都是一件需要持续做的事情，这哪是什么内卷啊？这明明就是老祖宗留下来的文化。

原文地址：葱爷（公众号）

作者：葱爷

转载请注明：学UI网》设计师突破瓶颈的四大狠招，专治止步不前

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

正文

产品设计做到极致的时候，发挥的空间就会深入到细微之处的功能，看着简单的功能，也会被设计师脑洞大开。不仅带给用户更好的使用体验，也通过趣味性和差异化的表现方式，带来不一样的感官体验。

为了提高大家对于细节设计的灵感，今天黑马哥为大家整理了一些细微之处的优秀设计方案，希望可以带给大家更多设计思维。

一、个性化的 UI 设计风格

随着用户群体的年轻化趋势，产品 UI 视觉层也在尝试更多年轻化的风格，更独特的视觉风格才能增加年轻用户的好感度。最近体验到皮玩 APP，描边风的设计手法和青春活泼的配色，整体的界面设计带来独特的视觉风格，让人眼前一亮。

通过描边可以中和色彩之间的排斥感，也能强化风格特征，是色彩构成中较为常用的手法。被运用到 UI 设计的表现中，带来的风格感也是独特新颖的，将成为一种风格趋势被延续。

二、视觉区域的业务动态演绎

强化主界面视觉感通常会在顶部区域进行，通过品牌色、插画、IP 形象配图等形式居多，再配合动效形式效果更佳。在每平每屋 APP 首页中，顶部区域通过动画形式演绎业务属性，不仅增强了该区域的视觉感，达到吸引用户关注的目的；也将产品的业务属性表达出来，加深用户的记忆点。

三、增强操作体验的情感氛围

通过爱奇艺 APP 在端午节期间观看视频时，单击或者双击屏幕则会出现欢快舞动的粽子形象，营造出节日氛围。情感化的设计增强了操作体验度，趣味性的设计也营造出更好的感官体验。

四、带给你美食诱惑的下拉刷新

麦当劳在麦麦商城栏目的下拉刷新设计中，采用汉堡形象结合层级动效进行表达，让人眼前一亮。动效拉长的汉堡不仅体现出份量感，激发用户的食欲；汉堡形象就十分麦当劳，展现出品牌关联性。

五、刷新状态下的趣味化 IP 形象

IP 形象结合到刷新设计中的案例非常多，不仅可以带来情感化的体验，也能增加功能操作的趣味性。半次元在下拉刷新时不仅结合 IP 形象，还通过下拉的程度将形象拉长，最后再配合表情和动态营造出趣味性。

六、滚动的 3D 元素强化视觉感

随着三维设计的流行，在 UI 场景中也掀起了流行趋势，出现在视觉强化、图标设计、按钮设计等元素中。吃货笔记 APP 将 3D 元素的图标作为登录界面背景设计，配合滚动的动画表达，带来了非常惊艳的视觉效果。强化视觉感和青春潮流的风格，可以将用户的关注度转移，降低对于功能操作的排斥感，也提高了产品设计的感官体验。

七、积分兑换的可视化表达

积分兑换是增加用户粘性的惯用形式，如何提高积分活动的参与度是设计重点。麦当劳 APP 将积分兑换模拟真实用餐场景，不同积分值对应不同套餐，交互形式简单易懂。可视化的设计表达增加用户的理解度，实物照片增加美食诱惑，吸引用户参与积分活动，用户体验度较好。

八、个性化的界面布局设计

随着产品设计越来越成熟且丰富多样，在 UI 布局层面也不断突破常规束缚，呈现出更大胆的设计解决方案。PODO 漫画启动页过度到首页时，布局做到自然过渡且风格特异，打破常规的界面布局给人眼前一亮的体验。在浏览过程中不仅有视差感的体验，动效的结合也增加了设计的关注度。

九、3D 实景增强购物体验度

如今的生活方式已经是足不出户就可以满足购物需求，众多产品为了提高购物的真实感和体验度，利用 3D 实景逛店提高场景代入感。屋颜 APP 利用 3D 实景打造了线上体验馆，虚拟空间体验过程中点击家居产品即可进一步了解商品信息。场景感的体验馆让商品展示更有代入感，也打造了不一样的购物场景，带给用户更好的使用体验。

十、情感化的步骤设计

针对步骤或者流程设计，除了简单易懂的描述方式以外，通过配图/图形等来辅助用户理解，往往可以使得传递效率事半功倍。每平每屋 APP 在展示装修步骤的设计中，通过 IP 形象结合场景来表达不同步骤的场景感，不仅让步骤信息更易理解，也使得单调的步骤变得更有趣味性，带给用户的感官体验也是非常不错的。

小结

越是简单的设计越容易被人忽略，看着简单做起来却难以突破，想要做出差异化的设计，就要从细微之处探索不一样的表现形式。体验和分析优秀的设计，是为了提高我们的设计感知能力和积累解决设计问题的灵感。

希望今天为大家分享的设计案例可以带给大家更多灵感，描述内容仅代表个人观点，不足之处大家互相弥补。

原文地址：黑马家族（公众号）

作者：黑马青年

转载请注明：学UI网》看着简单，老司机做出来就完全不一样（UI设计细节分析）

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

概述

每年年底，QQ都会迎来一年一度的年终盘点活动，帮助用户实现QQ社交记忆回溯。通过生成用户专属的社交形象，拉近用户和QQ之间的距离，体现品牌温度。

一、设计目标

年度盘点活动不同于主题运营活动，是对QQ用户年度高光时刻的总结。在活动设计目标的设立上，我们希望塑造QQ温暖品牌形象的同时清晰展示QQ用户年度的社交记忆点，通过创造用户记忆点，激发用户分享。

二、创意构思

我们从QQ用户熟知的社交行为、场景出发，进行视觉元素延展。将用户的浏览过程喻作QQ社交记忆的探索历程。通过QQ元素等场景映射，唤醒用户的社交记忆，最终形成用户专属的社交形象。

三、风格设定

基于活动的目标我们衍生出以下设计关键词（见下图），简洁有品质是本次活动视觉风格的核心传达目标。

1、色彩

为凸显回忆感知以及透传QQ品牌。在色彩的选择上我们使柔和的蓝黄渐变色系，背景色系就像天空会跟随活动节奏、故事内容而动态变化，利用色彩变化传达时光回溯的氛围感知。

2、质感

考虑到整体的风格设定偏洁净明快的感受，我们多以玻璃、半透明3s，哑光三类材质为主。选择透光性强与色彩融合度高的材质搭配使用，让画面更具轻盈、简约的品质感。

四、视觉表现

1、信息传达

年终盘点活动与主题运营活动不同，繁冗的氛围传达并不等同清晰的信息传达，在活动的设计上，我们希望一页只讲述一件事，弱化装饰，突出主体内容。

2、品牌透传

场景内我们融合了QQ品牌调性的元素，如聊天aio、消息气泡，QQ空间等，加强用户代入感。

3、动效编排

我们根据页面场景的展示内容类型，进行动画节奏上的编排。保持信息传递的效率，并在需要氛围强化的环节增强动画吸引力。营造灵动的内容浏览体验，提升动画张力。

在动画的运动样式上，我们提炼出映射QQ社交场景的动态设计语言。通过模拟聊天气泡出现、新消息通知弹出、空间访客踩一踩等社交场景中的动画形式，透传QQ品牌调性，增强动画表现力。

五、激发分享欲

从设计层面，如何激发用户的分享欲？在本次活动分享中用户的专属社交形象扮演着重要的角色，接下来我们将介绍影响社交形象品质的三大设计因素。

1、形象设定

我们选用QQ作为社交形象主体，根据用户不同的社交属性去赋予其色彩、材质的变化。在初步的生成方案上，我们尝试挖掘更多的组合可能性，从QQ围巾、嘴巴等部件进行材质变化。但三维的部件设计、审核成本高且组合起来多种情况形象差异性小。

为此我们降本提效精简了生成逻辑，在鹅身上视觉强感知的场域进行差异化设计。

2、构成规则

我们将社交关键词分为三大阶级并衍生出社交形象构成的梯度规则。从社交小白到社交天花板，不同强弱的社交属性决定着鹅身的变化。例如低阶的材质表现使用的是石膏、木纹，形容人们在社交上木讷、寡言少语，而高阶的鹅身质感、色彩，图案表现更加丰富。 

3、隐藏款埋入

在QQ形象设计上，我们根据不同的社交关键词进行了不一样的设计，包括样式、材质、颜色等，这些不一样的设计在隐藏款上尤为突出。

例如针对社交关键词“一呼百应KOL“，此社交关键词形容的是人气高，是众人的焦点，为了体现这种超高人气，QQ形象通体采用透明材质，并在内部放置了很多不同的体现开心的黄脸表情。

在隐藏款“自带光环的主角”的设计上，我们希望传递出受人瞩目的光感，结合我们的生活，光线经过玻璃后，通过不断折射反射，能很好的传递出多彩和绚丽感觉，所以这款QQ形象通体采用了玻璃材质，强化和传递出受人瞩目的主角光环。

隐藏款之外，其他更多QQ形象我们也会根据社交关键词进行不一样的设计。

六、形象展示

• 金属鹅 Metal Q

• 玻璃鹅 Glass Q

• 树脂鹅 Resin Q

七、形象延展应用

除此之外，我们在春节贺卡活动中还复用了部分鹅身形象，并为虎年设计了专属的虎纹迷彩鹅。期待后续在运营活动中尝试更多的个性化QQ形象，刷新IP，升华品牌。

结语

在当今社会强调本我的趋势下，活动千人千面的属性越发重要。将经典的QQ形象与用户社交特征相结合，传递具备独特性、品质感的品牌视觉表现，更能拉近QQ与用户的距离。我们相信在未来的年终盘点活动中，QQ会带给大家更多的惊喜，敬请期待吧！

原文地址：腾讯ISUX

作者：ISUX设计

转载请注明：学UI网》探秘｜QQ社交形象年度盘点设计密码

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

数据来源：《2021年中国互联网行业体验设计工具趋势研究》

但体验是的一种主观感受，是用户在使用一个产品、系统或服务之前、使用期间和使用之后的全部感受。公司的品牌、网站、系统、产品、服务、营销活动、线下门店等等各个环节的用户触点都会是用户体验的影响要素，面对如此复杂的情况，体验管理的边界是什么？内核又是什么？接下来我将结合自己开展体验管理工作的相关经验，谈谈我对于体验管理几方面的思考。

一、如何理解体验管理

顾名思义，体验管理即为对体验的管理，既可以是用户的体验，也可以是商家的体验、供应商的体验、经销商的体验，合作伙伴的体验，还可以是内部员工的体验。但无论是哪类角色的体验，都是一种主观的情绪感受，都会受到多个环节、多种因素的影响。因此，对于一家公司来说，体验的提升和优化也势必涉及多个部门团队的工作协同，需要从宏观视角、从战略视角对“整体”体验进行管理，充分分析并把握用户与公司产品或服务接触的每一个触点环节，聚合和分析全渠道、全流程的体验数据，洞察用户痛点、需求及偏好，并以全链路整体体验提升为目标，通过各部门团队的协同，不断改善公司产品或服务的触点体验，从而为用户提供系统性价值交付，为企业提供持续性增长动力。

二、为什么要做体验管理

首先，从体验提升的宏观价值视角来说，提升用户体验是企业在流量红利逐步消失、行业竞争日益加剧的宏观背景下，继降低成本、提升效率之后实现业务增长的共识性举措。实施体验管理有助于提升用户满意度、忠诚度；有助于提升品牌口碑、品牌影响力；有助于促进用户增长、商业目标达成；有助于促进产品创新、营销创新以及企业升级。

其次，从体验提升的工作开展痛点来看，现阶段国内体验管理仍处于刀耕火种期，虽然越来越多的公司纷纷入局，但多数只是停留在散点式、被动性的体验需求研究、体验问题收集及优化、用户反馈及态度采集上，缺少对体验的整体性管控能力，因此在开展体验提升工作的过程中往往会遇到以下困境：

1. 缺少统一的量化指标。各团队对体验的理解、当前的体验水平、体验影响的大小均不像转化率、用户量等业务指标那么清晰，所以团队之间缺少统一的体验语言，导致体验提升工作的推进成本远高于更明确的业务目标提升工作。

2. 传统体验研究分析的周期长，时间跨度和体验触点的覆盖范围有限，导致体验优化工作难以适应现有产品或服务的迭代更新节奏。

3. 体验分析与体验优化有脱节现象，未形成完整的体验提升进度跟踪保障机制。

4. 公司同事体验意识参差不齐，缺少统一的体验文化引导。导致先上线后优化的不良模式盛行，增加了用户首试体验受损的风险，增加了体验挽回所需付出的成本。

因此，开展体验管理所能带来的直观可见的价值是能帮助我们解决以体验提升为目标的各项工作的难点，提升各项工作的效率。同时，从体验管理的长远价值来看，开展体验管理可以提升企业竞争力，促进整体商业目标达成。

三、体验管理的通用模型

结合国内公司在体验管理工作开展上的主要内容，大致可将体验管理工作分为三大类：

1. 数据采集为主的研究执行，即诊断用户使用产品或服务全链路上的体验现状和问题，为体验优化提供方向指引；

2. 体验优化为主的机制建设，在公司层面建立规范的流程或机制，保障体验优化工作顺利开展；

3. 体验管理工具或系统建设，结合公司体验管理需求，依托现有体验分析及优化的工作流程、机制，设计开发体验管理工具或系统，提升体验管理的系统化能力。

数据来源：《2021年中国互联网行业体验设计工具趋势研究》

综合现有各公司所开展的体验管理工作内容以及我们现有的工作实践，我将体验管理工作的具体内容按照覆盖范围分为三层结构：数据层、系统层和运营层。

图1. 体验监测管理体系

每一层级上都有对应的工作目标和工作内容：

数据层：建设体验数据，量化体验水平，追踪体验变化。

图2. 体验监测数据示例

做体验的监测管理，首先我们需要看到它，并且能及时的掌握它的现状和变化情况，这样我们才能针对现状去分析判断我们应该怎么提升它，改善它，才能针对变化情况来分析、判断、衡量我们所做的提升和改善措施是否有效，才能不断沉淀经验方法，在体验提升的台阶上逐级而上，而不是原地打转。

但正如前文所述，体验是用户的主观情绪感受，无论是对单个用户的情绪感受的测量方法，还是对整体用户主观情绪感受数据的收集技术都不是很成熟，所以，体验数据不像运营数据或财务数据那么容易追踪和衡量。

在这样的背景下，我们首先需要找到那些可以直接或间接反映用户情绪感受的数据，构建收集渠道来收集可以反映用户情绪感受的数据。

那这类数据都有哪些呢？结合用户体验度量的数据维度来看，大概可以将其划分为两类：用户自我报告式的主动反馈类数据和系统埋点收集的客观行为类数据。

自我报告式的主动反馈类数据主要有满意度评价（CSAT）、推荐意愿（NPS）、客户费力度（CES）等反映整体感受的数据，以及用户通过客服或在线反馈等渠道针对特定问题的反馈数据。此类数据主要通过直接询问用户或用户主动反馈的方式来采集。

系统埋点收集的客观行为类数据主要是用户与产品或服务的交互过程数据，比如App的整体使用频率，使用时长，App分享率等，以及重点功能或页面的点击率、转化率、跳出率等。此类数据主要通过系统后台自动记录来采集。

为了能更精细化的对体验状况进行分析，也可以增加一些体验水平分析的辅助型数据，比如用户的性别、年龄、会员等级等特征类数据。以便我们看到整体体验水平有所变化时，能具体的分析出是哪个群体的变化导致。

系统层：构建体验管理系统，承载体验数据，提效体验运营。

图3. 体验监测管理系统界面截图

体验监测管理体系的中间层重点在于系统的建设。这主要是因为：

首先，体验管理系统是体验数据的承载系统。单独一期的体验数据采集因为缺少对比的基准，所以参考意义不大，我们需要长期的采集体验数据，并进行不同时间的体验水平对比，这样才能及时有效的发现体验水平的变化，找到需要重点提升体验的用户群体、产品模块或服务环节。

而长期的数据采集及分析需要耗费较大的人力成本，且工作重复性较高，数据的人工分析也容易出现失误，因此，通过系统来完成数据的自动采集、数据的自动分析、数据的自动诊断，不仅能及时且长期的采集体验数据，而且能有效的节省人力成本，减少人工计算的失误。

其次，体验管理系统是体验运营工作的主要辅助工具。体验数据的监测分析诊断只是基础，依据监测分析诊断的结果如何能有效的促进产品或服务体验提升才是体验管理的最终目的，围绕用户体验提升所要做的运营工作还有很多，比如产品/服务体验问题的优化跟踪，团队/公司体验文化的建设等。为了能高效的完成各方面的体验运营工作， 我们依然需要借助系统的能力。

因此，体现管理系统的建设在体验管理体系的构建工作中是非常重要的一部分内容。

运营层：构建运营机制，分析体验数据，管理体验问题，维护体验用户，建设体验文化

图4. 体验监测管理相关运营产出

体验运营主要是指围绕用户体验所进行的人工干预工作的总称。我们的日常运营工作主要包含体验数据分析、体验问题管理、体验用户维护和体验文化建设四个方面。

体验数据分析主要是对体验数据结果进行统计整理跟踪以及综合性的分析，比如结合主观数据及客观数据来综合评估特定功能或服务的体验情况；并及时将体验数据分析结果同步给对应功能/服务的责任团队，协助其分析体验水平的变化。

体验问题管理主要是对体验问题的分析和优化。体验数据的监测可以让我们更及时的发现体验上的问题，但单纯的发现问题仅仅是开始，我们需要联合相应的责任团队一起对问题进行分析优化，在这过程中经常需要我们通过快速的调研来验证问题，评估问题的严重性，找到问题的解决方案，同时需要推动或协助责任团队完成优化方案，跟进优化进度和效果。

体验用户维护主要是对产品/服务典型用户群体或社区的日常管理和活动组织。主要是为了能及时的获取产品/服务方面的体验情况，及时了解产品/服务创新方案的用户态度评价，让用户更深入的参与到产品/服务的设计开发过程中，引导用户为产品/服务的迭代创新贡献优秀创意。

体验文化建设主要是通过体验数据分析结果/体验专项研究结果传播，体验问题协同机制构建，体验活动组织，体验考核机制创建等方式不断培养各团队及时关注体验水平的意识，营造各团队积极推动体验优化的氛围，激励各团队推行体验优化/体验创新的主动性。

四、体验管理的趋势展望

随着越来越多的公司开始进入体验管理的行列，势必会促进体验管理不断的发展变化。结合对现有体验管理工作现状的观察，我认为可以用三个关键词来概括体验管理将来可能的三个发展方向。

精细。体验涉及用户与公司接触的方方面面，时时刻刻，体验管理也将围绕用户的全部场景，完整链路触点，以及用户的整个生命周期来进行更加精细化的数据采集、分析和优化，全方位的监测、诊断和管理。

多元。从宏观行业到微观数据都将变得更多元。未来的体验管理不仅仅只是用户体验部门的工作重点，也将作为抓手逐渐成为整个企业从上至下的重点工作方向。体验管理不再只是互联网企业的专属，也将逐步渗透至各行业的企业公司。不同行业、不同企业的产品或服务类型多种多样，用户与产品或服务的交互触点、场景也各不相同，为了满足不同行业、不同企业的多样化需求，体验数据的采集渠道和场景也将结合多样的触点场景变得更多元，体验数据的采集维度也将变得更丰富，分析数据的方式方法以及体验管理工具的功能类型也将在不同行业/不同企业中呈现出个性化、多元化的趋势。

智能。技术的进步和发展也势必会带来体验管理能力的不断提升，体验数据的采集、体验水平的分析诊断、体验问题的优化管理将借助新技术而变得更智能、更高效。体验数据的采集将在用户无意识中完成，且能兼顾体验数据的多种维度，使体验场景的还原更便捷，更真实；体验水平的分析诊断将结合更多维的数据来进行综合性的自动化诊断，并提供切实可行的优化方案，使体验问题的暴露更准确，更人性；体验问题的分发、进度跟踪、效果评估等管理工作的自动化程度更高，使体验优化的效率更高。

转载请注明：学UI网》关于体验管理的几点思考

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一、建立原子化组件思维

1、什么是原子化组件思维？

原子思维：原子最早是由英国化学家/物理学家约翰·道尔顿提出的，继承古希腊原子论和牛顿微粒说，提出的原子论。化学元素由不可分的微粒（原子）构成的，它在一切化学变化中是不可再分的最小单位。

原子理论同理适用于我们的设计系统中：

页面是由原子（最小单位设计元素）、分子（基础控件）、组织（基础功能组件）、模版（业务定制组件）、页面构成。

原子：原子是最基本和最小颗粒度的单位，无法进一步细分的UI元素，在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线等。

分子：原子排列组合构成了分子，在界面中多以「设计控件」的形式存在，形成相对简单的UI组件的原子的集合。例如：导航栏、标签栏、搜索框、按钮、弹窗等。

组织：原子、分子排列组合形成界面离散部分的相对复杂的组件，在界面中多以「基础组件」的形式存在，例如：内容卡片、表单页面。

模版：原子、分子、组织按照业务需求排列组合构成了模板，在界面中也称为「业务组件」，例如：筛选列表。

页面：按照一定规则后排列组合而成的满足业务需求且包含品牌属性的一个完整「页面」。

2、组件化的内核

设计组件不是把UI元素堆积到一个地方，然后各处集中引用这么简单。组件化的工作方式信奉独立、完整、自由组合。

目标就是尽可能把设计与开发中的元素独立化，使它具备完整的局部功能，通过特定规则自由组合来构成整个产品。

独立：一个组件就是一个独立的产品：在制定组件的过程中要考虑到组件应用中的各个场景，降低、拆解组件中的耦合度，同时把一个组件当作一个独立产品来设计 考虑空状态、极端情况、尺寸变化 尽可能灵活适应各种使用场景

完整：一个完整组件构成包含三种属性：

A.响应状态-包含组件库中原子的大小类型、分子的响应和组合方式、多状态的交互；

B.行为状态-组件中元素的与背景的组合方式、组件中不同组件拼合的层级关系、组件与用户行为的交互；

C .数据状态-包含组件不同的状态枚举：如提交中、审核中、已结束状态。

自由：每个组件都是相互独立的，组件间的组合方式灵活且多样的。灵活多变的同时也要遵循统一的栅格尺寸与表达约束，最大程度上保证页面呈现出一种有秩序的美。

二、建立设计说明指南

1、什么是设计说明指南？

针对企业级产品反复出现的设计问题，设计模式给出一般性的解决方案，实现跨应用交互一致性的有效融合。减少了不必要的认知成本，提升交互确定性和设计的效率。

考虑到需要适应各种独特的业务场景，模式的规则具有一定的灵活性，万变不离其宗，通过了解设计模式的构建逻辑，可以衍生出更具场景特性的解决方案。

设计模式包含以下内容：

原则：基于价值观衍生出的一般设计技巧，包括如何高效组织信息、帮助建立用户与界面的互动等原则性要求。

全局规则：通过规范常见的互动行为，包括导航、数据录入、数据展示、反馈、操作、帮助等，呈现组件元素的标准用法和弹性空间，并了解如何将他们组织在一起来创建良好的体验。

构图模版：我们总结了表单、列表、数据可视化、详情页、工作台、异常、结果、编辑器几类页面的典型解决方案，介绍每类页面的设计目标、设计技巧以及典型页面内容等，帮助设计师和产品经理可以快速开始构建界面。

2、服务于谁

A.设计师：交互设计时，整体流程框架或分支流程可快速复用。

B.产品经理：原型设计时，可复制并套用现有交互模式进行原型绘制，或直接引用进行开发。

C.研发人员：可作为标准交互流程的参照，统一相似流程的代码设计方式。

3、有什么内容

前言：对这次建立设计说明指南的目的性说明；

设计概览：描述这次调整的范围的维度；

设计原则：基于哪些设计原则输出设计内容；

构图模版：页面的构图模版、组合控件和组合范围；

全局规则：全局范围出发，除了页面构图以外，涉及到共用组件，制定的规范；

组件：基础控件和组织控件，甚至涉及到业务定制控件（模版）。

4、设计说明指南的输出

《GM Design》交互设计说明指南，涉及几十个产品线的成百上千个的功能，业务体量和复杂度极大，为了让整体SaaS产品具备简洁高效的一致性交互体验，设计说明指南是设计过程中问题解决的核心方法，也是构建整个平台或框架所要遵循的基础和标准。

设计模式辅助设计者将业务引向实践，并使设计更具有一般性、简单性、一致性及稳定性。同时，设计者也可结合不同业务情境，实现模式在一般性和特殊性的衔接并作要素与结构的调整。

最后

最后，为大家提供一份详细的GM Design交互设计文档，里面包含设计概览、设计原则、构图模版、全局规则、组件等多类B端后台交互设计内容。

完整版交互设计说明文档-体验链接：https://lanhuapp.com/url/947cJ

大家可以在公众号后台回复文档，获取访问密码。

慢慢来比较快，希望对你有帮助！

原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》B端后台产品的设计细节-设计说明指南篇

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

今天会跟大家分享一些被广泛运用的界面设计规则，它们能快速使得你的界面设计更干净、高效。

1. 文案要易于理解

用更容易让用户理解（说人话）的引导文案，提升使用体验。

（彩云注：下面2个案例中，左侧的“购物车”和“库存2”太过于术语化，右侧的“仅剩2”和“加入购物车”更加贴近用户的日常理解。大家平时工作的时候，也一定要注意界面中的文案，尤其是说明文字，控件文字等等，这个点经常容易被忽略。）

2. 垂直对齐易于扫视

良好的对齐方式，可以增强内容的可读性，让用户的视线更容易扫描。

（彩云注：左侧的“之”字形视动线比较难阅读，且不够专业；右侧的垂直对齐增强了可读性，也让设计看起来更加统一，能够快速的提升设计细节。）

3.给选项加图标

使用图标、动画作为标签，有助于更轻松地理解内容，它使界面看起来更加理性和丰富，能瞬间抓住用户的眼球。

（彩云注：左侧的导航相较于右边，很难第一时间准确识别它的意思，增加图标后不仅更快看清，视觉上也更加美观。）

4. 大段内容要拆分

大段的长句会让内容变得难以阅读。为了获得好的体验和UI，应该注意拆分内容，并使用项目符号突出关键点，利用拆分好的内容块让用户更快抓住重点。特别是在“功能说明和条款条件”或任何声明时，提炼要点有助于提升用户体验，这样也不至于让用户直接忽略。

（彩云注：左侧的大段文字我想应该没多少人会去阅读，右边的至少还能在短时间内快速看看几个关键词。）

5. 流程增加进度条

进度条帮助用户追踪流程，它也能使查看上下步骤更加容易。线上购物，表单填写，申请流程等场景使用这种格式能很好的简化流程。

（彩云注：左边的表单UI不方便跟踪进度和流程，右边的表单把进度放在顶部能帮助用户清楚的知道流程进度。）

6.错误提示要明确

错误提示一定要明确，易于理解，方便用户进行下一步的操作。如果用户不理解界面上出现的错误，用户就会感到很失望，可能会放弃接下来的流程。在UI设计时，在正确的地方用通俗的语言说明问题，以避免歧义，这一点非常重要。

（彩云注：我常常遇到各种出错，但出现的提示太过于术语化，也没有提示在正确的地方让我非常苦恼。）

7.按钮要正确合理

从菲茨定律（Fitt’s Law）中我们应该知道，目标区域的距离和外观与所采取的行动成正比。因此，为了将注意力集中在转化按钮上，按钮应该准确放置在合理位置上。此外，按钮的大小应该易于点击，避免用户因尝试点击时不方便而流失。

（彩云注：左侧的按钮不在正确的决策位置以及按钮太小，右侧的按钮简洁明了并且符合用户的心理预期，能够让用户更快决策并点击。）

8. 用好色彩心理学

颜色是UI中不可缺少的部分，它能影响用户使用应用时的情绪。正确地使用颜色将使UI看起来更加丰富合理。

（彩云注：左侧的蓝色按钮颜色并不符合用户对于删除的心理预期，右侧的红色按钮对用户的心理预期有危险和警告，用红色代表删除能够让用户集中注意力关注这一特殊的操作。）

9. 单列更易保持关注度

用单列展示内容，能更好地帮助用户扫描。当你的应用和网站上要展示大量信息时，将所有信息垂直对齐时，能更好的保持用户关注度。

10. 优先社交媒体账号登录

当用户准备登录或注册你平台的时候，把所有可用的社交媒体登录尽量放在首位。这将避免用户填写表格时付出额外的认知负担和时间消耗而流失。首先使用社交媒体账号，能很好地增加点击率。

11. 选择状态要清晰

在用户做选择的时候，需要清晰地告诉用户选中的到底是哪一个选项。模棱两可的颜色会增加用户的认知负担。更少的颜色和清晰的选中状态能让用户获得更好的体验。

（彩云注：左侧的问题在于选中状态不清晰且选项的颜色过于丰富，右侧的选中状态清晰且选项颜色只有2种，选中和非选中，体验会更好。）

12. 用留白分组

如果想给信息分组，使用留白是最好的方式。加条线作为分组符号会在界面中增加了一个额外元素，空白能让UI看起来更加干净和优雅。用线分组的情况适用于类似Twitter、Medium之类的重内容平台等场景。

13. 控件样式保持一致

保持设计的一致性，能够降低功能复杂度并让用户更快决策，一致性设计让用户更快熟悉操作而不需要太多思考。（彩云注：左侧的选项圆角不一致，会让用户思考为什么这里会有不同，而右侧的一致性选项设计，能让用户忽略内容外的干扰。）

14. 搜索中的占位符要用好

在搜索输入栏添加适当的占位符，提示用户可以在平台上搜索和找到的内容，这样可以提供用户参考并带来更好的用户体验。

总结

以上这些就是在设计数字产品体验时应该遵循的14个基本规则，这些点虽然基础，但却经常被人忽略，我在星球中帮大家看作品集时发现上面提到的这些点出现的是最多的，希望大家可以把这些知识运用到自己的设计中，提升UI产品体验。

原文：https://bootcamp.uxdesign.cc/dos-and-don-t-for-ui-design-part-2-8f56dcd66b4
作者：Ayushi Verma
译者：彩云Sky
本文翻译已获得作者的正式授权（授权截图如下）

希望对大家有帮助，欢迎转发分享~

原文地址：彩云译设计（公众号）
作者：彩云Sky
转载请注明：学UI网》想要优化好UI作品，这14个设计细节一定要检查到位！

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司