因为后台是一个非常广泛的且深奥的东西，里面包含了太多的业务逻辑，而且每个产品面向的用户群体又不同，因此不可能说的面面俱到，但是我提炼的这七个步骤适用于大部分后台的一个宏观方向，对于一个没有后台项目经验的人去从头制作一款后台产品应该是非常有帮助的。

第一步：选择导航板式

导航是后台的主躯干，一切操作都需要在导航的指引下进行切换，目前常用的有两种导航，顶部导航与树状导航。

顶部导航板式

顶部导航是大多数Web端网站使用的导航模式，因为人的阅读视觉是从上往下，从左往右，因此，顶部是视角最先达到的地方，顶部导航可以让用户快速了解整个网站的主要内容结构，通常在营销级官网，内容浏览平台被广泛应用（例如京东，阿里云，站酷...）。

但是其弊端也是很显而易见的，因为屏幕宽度的限制，在小屏下，顶部显示文本内容有限，通常只有几个字符的内容，更多内容或二级标题则需要进行隐藏显示。其次因为人类身体结构，成年人的头颅约为4.5～5.5公斤，占据身体7.7%左右的重量，我们的颈椎承受了太多，因此人在左右扭头时要比上下点头更舒服。再者人类的眼睛是左右排布的，与生俱来两边的视线就优于上下的视线，顶部导航如果需要高频次使用的话会让用户非常的劳累。

优点：节约空间、可以快速吸睛

缺点：显示文本内容有限，不符合人体工程学，不方便查找

树状导航板式

在很多生产力工具上，后台网站上，B端产品上，阅读软件上，树状导航被广泛运用。树状导航是以父子层次结构来组织对象的，其优点非常显著：兼容性强，结构清晰，拓展性强等等。

先说兼容性，因为每条导航标题呈上下排布，因此一排只需显示一条标题，对于长标题与外文适配显得格外的友好。树状导航具有良好的层次关系，每一层内容都可以固定性的展示出来，不会像顶部导航必须鼠标悬浮才会显示子层级，不论是从便于梳理层次关系的角度来讲，还是频繁操作的简单化来说是都是完胜于顶部导航的。因为网页默认是上下滑动来查阅更多内容的，因此树状导航的拓展性方面碾压顶部导航，树状导航可以无限的向下拓展，就像书籍的目录一样，而顶部导航则只能显示寥寥无几的几个单词。

优点：可以展示更多的标题内容、可以不限制标题条数无限拓展、结构清晰易懂

缺点：占据空间较大，对于小屏可能需要频繁展开、收起导航

第二步：统一模块规则

后台的主要功能是支撑前台产品，管理资源，因此在逻辑与结构的梳理上应当与前台产品保持一致性，在布局的制定上应当遵循模块化、响应式、高效化的布局，以便于清晰地传达信息。

在后台的布局中，通常需要将数据统计、展示与列表、操作区分开来，达到看归看，做归做的原则，如果混淆到一起就会大大的提升认知难度和操作难度， 就像老款的汽车的仪表盘与中控操作区分开来，用户就会很快的上手，但是像特斯拉都集成在一块屏幕上就会让用户傻傻分不清楚，一时间难以找到相应的操作区域。因此模块化在后台则显得格外重要，每个模块、每个区域都应当赋予它独特且自始至终不变的属性，比如顶部的导航条，全局都在顶部区域展示，而不是这个页面在顶部，下个页面在底部。

导航模块：

后台的布局中，常用的模块就是导航模块（整个后台功能的结构提纲），总导航就是我在上文提到的两种，顶部导航和树桩导航，其他还有二级导航，面包屑导航等等，但是需要注意的是，导航就像路标，起到指引用户的作用，因此在全局的样式与位置应保持统一。

提醒模块：

顾名思义就是提示用户有新的消息，新的功能等等，提醒模块十分重要，因为它是实时性的，在设计提醒模块时应当遵循全局化、机动化，高亮化，动态化的规则，在常规状态下，提醒模块应该隐藏展示，不过多的打扰用户，但是如果在需要出现时，不论用户处于什么样的场景，提醒模块都应该在第一时间出现，并以醒目的方式告知用户。

数据统计模块：

数据统计通常是作为后台页面头部的存在，用户一进网站映入眼帘的就是整个产品或者整个项目的数据统计，数据是作为衡量某一件事情好坏的重要标准，数据也通常可以说明一个决策、一项任务的最终结果，在数据统计模块的设计上应该保持直观，一针见血的设计方式，比如股票的K线图，红涨绿跌，一目了然。

快捷操作模块：

有许多使用频次非常高的功能可能会贯穿全局，比如谷歌Email，不论在哪个页面，日期、Task功能都会在右侧进行显示，方便用户随时添加待办，记笔记等等。在后台中，有很多时候一个小工具就可以提升很大的效率，不必在来回切换软件、页面，有很多情况下，我们看到了一个东西，联想起了某一件事情，打算记录下来，但是退出这个页面再去打开记事本的时候发现已经忘记了（这该死的7秒记忆）。因此在有些情况下，缩短操作路径是一个不错的选择，而快捷操作模块也同样要遵循全局固定位置，不可随意变动的原则，如果违背，效果往往会适得其反。

内容展示模块：

信息展示，这个模块应该是最难搞定的了，不管是什么页面，信息都是重中之重，没有信息的页面那和没有肉的肉夹馍一样。内容展示模块不同于以上的模块是全局静止的，内容展示模块承载了后台95%以上的页面量，每一个页面都不同。因为后台页面大部分时间都是以电脑端网页的形式呈现，人在看电脑时通常会和显示器之间有30-50cm的距离，甚至可能更远，因此在内容的展示模块上应当给予友善的设计，比如加大文字之间的字间距，行间距，突出重要信息，以图文并茂的形式将枯燥的信息情趣化，没有内容的模块放置缺省提示图。

操作模块：

操作模块通常是与内容展示模块共同存在的，两者互相配合使用，凡是在页面中涉及到可以点击交互的区域统称为操作模块，操作模块应该全局统一视觉语言以及操作语言，比如，按钮样式及大小，开关样式，分页器摆放位置及样式等等。所有的操作模块表意性要强，让用户可以快速明白点击后的结果，如果遇到难以理解的操作功能，应该配合图标使用并给予操作引导。

编辑模块：

编辑模块就是通常说的表单填写页，编辑模块拥有新建，上传，输入，选择一系列的交互方式，其目的是为了让用户录入信息内容，因此在编辑模块的设计中应该按照相对应的前台项目理清顺序，从头至尾合理引导，引导语尽量简短并阐明要义。在操作的过程中，应当给予用户清晰、及时的反馈，并给予用户返回、撤销、清空、保存等操作。在表单的设计中，尽量将信息进行单行纵向排列，每一条信息各占一行，并保持信息对齐方式一致，保证用户视线流畅舒适。

第三步：统一操作/交互方式

电脑端常见的操作方式：

1.左键单击

鼠标单击是指鼠标点击UI控件后释放点击的一种交互行为，在整个过程中，用户点击和释放的坐标点是一致的，不可有移动的行为，点击是建立在悬浮动作之后的。左键单击是最常用的PC端交互方式，其作用是触发某一操作，整个页面由很多链接、控件组成，而鼠标单击则是触发这些可被操作的控件。

2.鼠标悬浮

Hover就是我们通常说的鼠标悬浮，当用户用鼠标指针移过UI控件时，UI控件给予的反馈效果就是悬浮交互方式。悬浮的主要功能是「拓展」与「指示」。在很多情况下，我们的屏幕无法将更多的信息进行展示时，通常会将众多功能收纳至一个控件当中，而鼠标悬浮则会触发控件将其隐藏的功能进行显示。鼠标悬浮的指示意义是为了让我们更好的理解控件的属性并提供及时反馈，比如将鼠标悬浮在文字上，鼠标会变成工字梁，将鼠标悬浮在可点击的控件上会变成小手表示可操作，悬浮至不可点击控件上会变成问号等等。

在实际的设计当中，我们可以为鼠标悬浮赋予更多的可能性，鼠标悬浮可以将未完全展示的文字进行展示，也可以对收纳起的功能进行展示，还可以进行许多快捷预览等等，但是鼠标悬浮最重要的功能则是为用户提供交互行为时的「及时反馈」。

3.右键单击

自从计算机操作系统诞生后就为右键赋予了「系统菜单」的交互意义，在不同的场景下点击右键所出现的内容是不一样的，这取决与网页与应用的开发者，在网页的设计中，将常用的快捷操作写入右键菜单，会极大的提升工作效率，因为右键的菜单弹窗始终在鼠标指针附近触发，因此对于用户寻找功能是非常友善的，但是需要注意的是右键的操作应该全局统一，在同一套产品中，右键的内容不应该出现过多的功能，否则会对使用者造成困扰。

4.拖拽

拖拽，顾名思义就是鼠标单击某一文件不放进行拖拽，拖拽操作相对与其他交互更具有操作感，因此在设计拖拽时，动画是一个必要的选择，动画是表现交互给予反馈最直观最有趣的选择，拖拽的动画最基础的表现为被拖拽对象跟随鼠标进行位移，而且松开鼠标后，文件的最终归属位置。拖拽常用与复制、移动顺序、上传、下载文件的场景，相对与普通的多步骤点击操作，拖拽所反馈的定位更加明确，可以大大缩短寻找目录、寻找文件的时间。

第四步：制定布局体系

布局框架是一套产品的骨架和基础。只有在框架确定之后，设计师才可进行下一步的构建统一的视觉元素，清晰的功能操作，具体的交互流程等等。后台产品是一个庞大的体系，除了对应前台产品的功能之外，还包括对产品部门的管理，产品相关的功能管理，不同身份对应的权限管理等等，因此太过单一的布局形式并不能适用，因此我们在设计后台布局时应该遵循简约化、统一化、规范化、拓展性强的原则。

对于拥有着众多功能的后台，我们应该做到化繁为简，多而不乱，如果想做到这一点我们就应该参考《简约至上》一书中所说的简约四要素：删除、组织、隐藏、转移。

删除

在iPhone的外观设计上，乔帮主一直信仰「少即是多」，就是我们通常说的做减法，这一伟大信仰在苹果公司的产品上完美的体现了出来了，苹果不论是线下门店还是官网、硬件、系统等等都将一切简约到了极致。用在我们的产品布局上，删除就是将无用、重复的功能删除，保留必要的功能，不要将和业务与用户使用功能完全不相干的东西放在页面上。

组织

组织的作用就是把业务相关的元素放一起，分个类，让用户可以更容易理解，比如有众多的水果蔬菜，将水果放在一个篮子，将蔬菜放置在另一个篮子要比它们都混合放在一起更容易辨认、查找。

人类喜欢规划一切，喜欢井井有条的秩序，组织就是规划，将整个页面众多的元素进行规划分类，把相关联的元素模块化，每个模块之间应该做好分割，分割包括：留白分割，分割线分割，模块分割，Tab点击分割，分割强度级从左至右越来越高。要注意的一点是组织存在争议性，有的人他认为番茄归类为水果，而有的人认为番茄应该归类为蔬菜，这辩论起来双方似乎都有道理，所以在设计中，组织元素时应该细细斟酌，对于这种墙头草类型的功能，应该谨慎处理，在了解用户心智之后再做定义。

隐藏

隐藏是一种并不快捷的简约化的方案，隐藏通常是将使用频次低的功能藏起来，等需要时再手动调出使用，这些功能不常用但也并不代表没用，比如设置头像、名称等等，隐藏可以让页面在视觉上更加轻量化，毕竟有限的空间还是要留给更重要的功能。

转移

我们上学时做题，当看到一道应用题有足足几百字，那我们下意识的想法就是，这题™的太难了，虽然还没有开始思考。但是人们的潜意识就是对看似复杂的东西排斥。在诺基亚还处在全键盘的时候，Android机还有三大金刚键的时候，iPhone就已经简约到了只保留home键、音量键和开机键，那么iPhone把其他所有的功能键都移除了，真的操作起来就简约了吗，按照复杂度守恒定律来说并没没有，复杂依旧存在，只不过是将原本学习按钮的过程转移到了去屏幕里交互的过程，但是这样子更容易被人所接受，因为是对复杂进行了分步引导操作，就像跑马拉松，如果你目标想着跑完全程，那么你多半半路就废了，但是如果你把目标变成每5公里为一段，分为八个小目标那么你可以很轻松坚持到终点，这就是一种魔力，因为每个人都不喜欢把自己搞得很累。回归至设计当中，后台是一个复杂的系统，功能可能多到眼花缭乱，但是如果将很多的步骤的一个流程分为众多小步骤去合理引导，那么是否会更加的易于理解、便于操作呢，这就是转移的用法。

动静态化布局

在制作后台时，我们应该遵循模块化布局，并提前规划好静态模块与动态模块。比如导航模块、面包屑、按钮等这些组件，在全局的位置应该保持一致，这些就是静态模块，全局样式与位置上不会出现过多变化。而动态模块一般就是内容区域，因为业务与功能的不同，内容模块所展示的内容是一定不同的，这一块的内容则是需要变化的。提前规划静态与动态的布局在开发方面可以节省代码量与开发成本，开发只需要将静态模块写成固定的组件就可以达到全局复用，快速修改的效果，在用户方面也可以大大的节省用户的学习成本，因为用户在学习了静态模块之后，之后则只需要再去学习动态模块就可以，而不需要每个页面、每个组件都要去进行学习。

响应式布局

因为后台大多数情况都是在Pc端与Pad端使用，这两个终端的屏幕没有固定的尺寸，可能有4k屏，可能有1k屏，当然还有可能是笔记本电脑所使用的更小尺寸，因此在设计时不能使用固定的设计稿尺寸，而应该使用较小的横屏设计尺寸进行设计，最早的屏幕分辨率低，通常都是使用900px~1100px的尺寸作为设计稿尺寸，但是随着科技的发展，目前市面上的屏幕最低都是1080p的屏幕了，因此在设计时可以使用横向「1200px」与「1440px」的尺寸作为设计稿尺寸，最大不应该超过1600px的尺寸。

定好尺寸之后，在设计时我们应该以响应式布局的思维去设计，什么是响应式布局，通俗说就是在屏幕变大的同时，页面内容会跟随屏幕的变大而展示更多的内容，需要注意的是：在屏幕变大的过程中，页面的内容应该只会出现信息数量的变化与信息之间距离的变化，不应该出现元素尺寸放大。在目前的设计中很多设计师喜欢使用栅格的设计方法，栅格布局具有易响应、设计规范化等优点，缺点就是可能会束缚设计师的发挥，在制作页面时完全按照制定的栅格走，缺少了灵动的感觉。虽然不见得要使用栅格布局法进行设计，但是我们要了解栅格的原理，要使用栅格的思维去制作。

栅格就是将页面划分为不等的几个模块，可以是12个模块，也可以是24个等等，每个模块之间的间距使用固定的距离，叫做水槽，可以将这些模块看做是参考线，水槽内就是禁止区，我们在设计时，将内容设计在模块内，用水槽作为模块之间的间距与留白使用，水槽只作为留白区域，不可以放置任何元素，最终开发时，响应式布局就是将模尺寸块随着屏幕宽度的变化而变化，而水槽则不动，如果屏幕变窄，不足以放下一个模块时，这是则将模块下移至第二行，水槽依然是不变的。

懂得了水槽的原理，那么我们设计的时候就算不用固定的栅格方式去制作，页面也不会出现太大的错误。

看懂了栅格之后总结一下，这不就是说一个模块一个模块的去设计么。没错，在设计时我们就是将元素按模块进行设计，这里说的模块不单单是指灰背景与白色块这样的组合，元素之间使用排版四要素中的亲密也可以哦，只要是视觉上看起来是一块一块的，就算没有分割线、分割块它依然算是一个模块。

回到了响应式布局，当我们按模块进行设计后，那么响应式布局就是毛毛雨了，开发只需要在屏幕尺寸变宽的时候将模块之间的距离拉大就可以了，这时就不是设计该去管的事情了。

总而言之就是，遵循响应式布局的目的就是为了屏幕尺寸在不断变化的同时，不会去影响改变内容的整体观感与体验，不会出现图片拉伸，字体忽大忽小的情况。

间距

间距这个东西真是老生常谈的事了，其实也没什么太多说的，但是这里还是去大致说下，什么样的间距比较合理，视觉上看起来比较舒服。

屏幕的分辨率都是以偶数为主，1600*900、1920*1080、2560*1440等等，因此我们在使用间距的时候最好使用偶数作为最小基数，然后其他间距以最小基数的倍数去制定，比如你最初制定的最小基数为2px，那么整套页面的最小间距就使用2px，接着随着间距的增大，就以2的偶数倍作为其他间距，比如2*2=4px、2*4=8px、2*8=16px等等，这样做页面不仅看起来比较规范，而且易于开发，易于记忆，不容易出现锯齿。

因为我们的后台产品通常是在电脑屏幕上使用的，电脑屏幕距离人眼的距离相对于手机较远，而且后台产品业务种类繁多，功能错综复杂，因此元素之间并不太适合过度拥挤，否则阅读起来就像报纸一样，难以辨认，效率低下。而过大的留白又会导致展示的信息量少，出现信息密度不足的情况，同样会导致阅读效率下降，因此在间距上我们应该取中度，这个中度的标准就是将一个24寸的显示器放在距离眼睛50cm的地方，然后去看这个页面的间距，两个元素看起来刚好不会很拥挤的时候，差不多就是刚刚好的，为什么使用24寸的显示器呢，因为24寸的显示器市场占有率较高，也是在日常环境中眼睛视线范围内看起来比较舒服的尺寸，比24存再小的显示器大多数就是笔记本屏幕了。

元素之间的科学距离通常使用等分原则与五分原则，就是同一模块的元素距离使用a，不同模块之间的距离则使用2a。

总结一下就是层级相同的模块之间保持相同的间距（等分原则），层级不同的模块保持不同的间距（五分原则）。

场景驱动间距

场景驱动间距，听起来有点不易理解，其实是so easy的，举个例子，当你要去一个陌生的停车场找自己的车，你又不知道你车放哪的时候，这时，你最希望的就是来一架无人机，从航拍的角度去看所有车辆，然后看哪个像自己的车，在做决定。当你找到你的车了，你要看看你车有没有被剐蹭，油还多不多了，你就需要放下无人机，走到车前仔细观看，而这时，整个停车场的布局什么的对你就没什么太大意义了。

这回应该很好理解了吧，找车就是信息检索，找到车了进去看车里有木有油就是内容阅读。信息检索，通常在后台以列表的形式存在，且常常配合检索功能（搜索、筛选、排序）等，这时检索出的信息密度一定要大，因为用户需要在大密度信息中快速浏览，找到符合自己的东西，假如你要是在淘宝搜索一个袜子，结果一屏就显示一条，你要浏览时，你还要来回翻页，你是否会很崩溃呢？

而筛选出的内容，这条内容就是用户千挑万选出来属于他的精华，他会仔细查看这个信息的详情，这时，我们要做的就是将留白加大，字间距加大，字号加大，让他很舒服的把这个信息阅读完成。还是上个例子，你淘宝搜索到了袜子，你要看看它的颜色，布料材质，穿上臭不臭等，这时袜子的的详情页信息比报纸还要拥挤，还需要你用放大镜才能看清，这时，你是否再次奔溃了呢。然后就直接关闭淘宝，前往京东查看了。。。

说了这么多就是，用户在进行信息检索时需要将间距适当调小，在保证有效阅读的条件下，尽量在一屏内显示更多的内容，当用户筛选完成准备阅读内容时，我们就要放大间距，最大的保证阅读的舒适性。这只是其中的一条小例子，场景可能千千万，这就需要设计师自己动脑去思考，去模拟了。

第五步：制定色彩体系

上帝说：要有光！！而颜色就是我们对光产生的视觉效应，目前我们肉眼可见的颜色大约是100多万种，那么这么多种颜色，选什么色作为主要的色彩使用在页面上呢，其实很简单，这么多颜色，我们只需要把色彩大致的分成：赤橙黄绿青蓝紫这7个颜色就可以了，毕竟人类更注重的是全局观，一个颜色，你稍微深一点，稍微浅一点，99%人都分辨不出来，毕竟大多数男性连口红色都分辨不出来呢。

在色彩中，色彩有三个属性：色相、明度、饱和度，这三个属性只要我们了解了原理就可以手动调色了，有人说，手调的不准确，不科学，那么如果你会写色彩的算法，请略过此处，普通人还是手动调调比较好，因为，只要是掌握了色彩心理学，色感别太差，全局色彩统一，对于中小公司完全可用。

调色怎么调呢，第一看色相，色相决定的色彩的大方向，那么色相条中这么多颜色，用那个色相范围好呢，这个就要看色彩心里学了，通常我们看到红色想起什么？五星红旗、党、激情、慷慨激昂、股票大涨，那老外看到红色呢，血腥、暴力、闹鬼了，同样一个红色，咋国内外差距这么大呢，这要说的就多了，毕竟是历史遗留问题，政治问题，生活传统问题等等，具体请参考度娘。。。除了红色，还有橙黄绿青蓝紫六种颜色呢，当你看到其他的颜色你想到什么，那这就是色彩心理，因为你什么都没干，就看个颜色就能脑补各种东西，有了各种感觉，色彩是不很神奇，没错就是很神奇，不同的色彩对于不同的地域的人群，不同职业的人群，不同年龄的人群都会有不同的色彩心里，这个具体就不细说了，知乎，百度一大堆相关研究。而我们要做的就是根据你的业务属性和面对的相关人群，使用他们的色彩心里去制定你的色相，要是面对医疗行业，可能绿色是个不错的选择，如果要是面对政府行业，或许红色更讨领导们喜欢。

确定好色相范围了，那么接下来我们就需要再考虑考虑饱和度问题了，饱和度是什么，爱修图的女性朋友一定知道，色彩的饱和度越高，那颜色越鲜艳，饱和度越低，色彩越枯燥，饱和度为0，嗯没错，50年前的电视机就没有饱和度。在制定颜色的时候，饱和度往往决定了年龄属性，一般年龄偏大的人不喜欢那花里胡哨的鲜艳，更喜欢柔和中性的颜色，年轻人更喜欢炫酷潮流的高饱和颜色，这么一说你们应该就恍然大悟了吧，年龄高的人群用低保和，年龄低的人用高饱和，对，也不全对，饱和度不只是和年龄挂钩，也和产品的属性挂钩，就像兰州拉面的门头看上去貌似有点low，但是看苹果的门头，觉得好像挺高端，为什么呢，因为过重的饱和度给人亲近感，但是相对来说就少了高级感，低保和俗称性冷淡风，给你一种高级感，比如莫兰迪色，饱和度较低的颜色会给人高级感，但会显得不近人情，饱和度较高给人廉价感，但是更亲民一些。

至于明度，就是颜色的亮度了，当你调完色相和饱和度时，发现这个颜色貌似有点刺眼，那么你就把亮度调低点，如果发现有点看不清，那么你就把明度调高点，明度就是这样子使用的吧~~~~

在使用颜色的同时还需要注意可视度，过浅颜色的按钮放上白色的字，眼神不好是看不清的，具体对比度什么样才算合理，请参考WCAG标准，能通过这个标准的，在可访问性上就没问题。

颜色舒适性

后台，大部分情况是企业自己用，或者给客户的幕后人员使用，相对于品牌色来说或许更在乎颜色的舒适性，红色波长，通常用作警示，所以看起来就比较刺眼，蓝色紫色波短，看起来就相对柔和，后台也许是很多人日常高频使用的工具，因此在舒适度上尽量要完美，舒适度包括较大的交互区域，合理的间距，基于人类视线的合理排版等等，这里我们只说颜色，不同人对于颜色的感知是不同的，但是基于色彩心理来讲，蓝色给人冷静理智安逸的感觉，因此，在大多数的后台产品当中，蓝色作为主题色的居多。

最终总结一下，不管是选择什么颜色作为主题色，一定要保证不能刺眼，否则对于长时间使用的操作者来说会是一个灾难性的问题，可能轻者视疲劳，重者干眼症青光眼。。。再者饱和度尽量不要过高，饱和度为：100是绝对不可以的，因为过于炫目的颜色会激起使用者的负面情绪，引起焦躁和不安的情绪，因此过高的饱和不可取。

第五步：制定文字体系

文字，是我们记录信息的主要工具，在后台页面的设计中，我们不需要对字形进行设计，只需要使用Web端常用的标准字体就可以。

文字还有许多其他的属性，合理运用属性可以大幅的提高文字的阅读效率。后台的元素较为简约朴素，以文字为主，较少的图形作为辅助元素，在整屏页面的元素中，文字占据了大多数，那么如何体现出哪些信息重要，哪些信息次要，这时文字的字重属性与字体尺寸属性就可以完美的帮我们解决这个问题。字重越重的字越有力量感，辨认度越高，视觉重点越高，字重越轻的字体，给人文艺典雅高端的感觉，后台算是B端产品，应该是不大需要高端文艺的感觉的，引导视觉与可读性更重要一些，因此我们常规下就使用标准Regular字重就可以，再轻的字体阅读起来比较费劲就没必要再去使用了，而像标题、主文案、按钮这些文字，我们可以使用更重的字体与更大的尺寸来突出，将重点信息的层级拉开，引起用户的视觉注意。

当整页的阅读信息较多时，我们需注意将文字适当放大，正常情况下网页的文字为14px，但是在大篇幅的连贯性文字出现时，我们应该将文字的尺寸合理升至16px或者18px的大小，在行间距与字间距上也应该适当加大，那么行间距（行高）为多少比较适合呢，正常情况下我们使用sketch自带的行高就可以，对于文字信息较多的情况下，我们使用1.2-1.8倍的行高就比较容易阅读，在以阅读为主的页面中，比如文章阅读页、文档页这些情景下，使用1.5-2.5倍的行距更好，有人会说1.5倍间距就已经很大了，其实不然，当你在长时间阅读信息的时候，越到后面阅读效率越低，那么超大的行距可以有效缓解阅读疲劳感，在长时间阅读的情况下也可以避免串行的问题发生。

字体颜色也是一个需要注意的地方，通常我们为了便于记忆，使用灰度色就可以，一般色值为#222222、#333333、#666666、#999999、#CCCCCC这些，在一个页面中，正文文字的颜色不应该超过3种色值，通常为一个标题色，一个文本色，一个辅助色，高亮色另说。颜色的使用主要目的是为了凸显信息，过多的使用颜色会给用户造成有很多层级的错觉，导致层级混淆，页面混乱。

第六步：提升趣味度

当后台产品的结构与信息元素全部排版完成后，这时我们会发现，整个页面除了文字和按钮貌似没有什么其他的东西了，确实，我们作为一个开发人员看起来都倍觉单调，更不用说每天使用我们产品的用户了，更是枯燥的要死。有人说，B端产品以效率为主，本身不就是枯燥的文字嘛，道理是这么个道理，但是作为开发人员，让用户使用的开心也是我们的一个任务，俗言道：一图胜千言，假如我们要学习一段历史，我相信比起来看书本上的文字，看电视剧的方式应该更受人青睐吧，谁都不喜欢全是文字的东西，客户也是一样的，因此我们应该对页面进行适当修饰，不应该把页面做成一个txt的文本文件。那么怎么去合理的修饰页面呢，很简单，图表化、图形化。

什么是图表化，简单解释来说就是将有规律的数据进行分类总结，用适合此类数据的图表进行展示，举个简单的例子，狗蛋想要去买股票，但是不知道买哪一只，于是想上网查一查最近5年每个公司的股票走势，结果找到了两份文件，一个是满是文字的数据列表文档，另一个是精美直观的K线图，那么你是狗蛋你会阅读哪个呢，当然去看k线图了，毕竟3秒钟就能知道个大概，如果看数据报表，眼花不说，一上午都不见得能阅读完。这时你就会发现图表的魅力。

那么图形化又是什么呢，依然很简单，就是将固定不变得字段图标化，将难以理解的字段插画化。人天生对于图形的识别能力就优于文字，对那些静态的字段给与图标的展示会大大提高用户的识别效率，什么是静态的字段呢？比如固定的按钮、导航、目录、设置等等，全局都长那样，不会因为切换场景而改变文字，这些就非常适合使用文字与图标相互配合来提升趣味度与辨识度了。

那么插画化又是什么呢？说白了就是将用户懒得看的那些字配张图，读书时我们的课本都是图文并茂的，那教育部就是怕学生光看文字产生厌倦导致不好好学习。同样的道理，有很多情况下，用户也懒的看文字，比如升级页，升级功能信息那么多字，不如多放几张图来的实在，这也就是那些APP产品为什么都有引导页的原因。

第七步：合理引导

当你看到这一步的时候，说明你的后台已经完成的差不多了，后台是个极其复杂的系统，一个新手去学习使用一套后台就像一个菜鸟去学习玩一款新游戏一样，只不过游戏有我们的兴趣驱动，兴趣是最好的老师，而后台则不同了，学习使用后台的那都是为了工作，兴趣可就没那么强了，如果恰恰碰到了做的很复杂的后台，那客户可能当场崩溃，古有唐雎之怒，流血五步，今有员工之怒，当场跑路，没准产品学不会，人家就辞职了。想想都觉得很严重，这时就体现出了合理引导的重要性，那么什么叫做合理引导呢？引导分为很多种，有新手引导、新功能引导、版本变更引导，操作流程引导等等，但是最终的目的是为了让用户快速学会使用你的产品。

新手引导：

可以使用视频教学，文字教学，体验教学等等，具体怎么使用应该根据自身的业务进行分析，看看适合用哪种的方法。

新功能引导：

要多提示，可以是红点提示，高亮提示，弹窗提示等，这块的主要目的就是：要将新功能在什么位置、有什么功能告知用户，别你功能去年就更新了，用户今年还不知道呢~，这就尴尬了。

版本变更引导：

每个版本交互设计师，产品经理，体验设计团队等等一大堆人去探讨，将旧版本不合理的功能升级，去除，换位置，合并等等，每动一点，用户都需要从新学习，因此当版本变更导致操作习惯和之前不同时就要提示用户最新的版本内容，最重要的是要对比引导，旧版本怎么回事，新版本怎么回事，在这一块可供参考的有很多，如Adobe全家桶每年的大版本更新，Autodesk全家桶的大版本更新，游戏的大版本更新等等，他们甚至还会出一个专门的文档来描述新旧版本更新对比。

操作流程引导：

顾名思义就是引导用户完成某一套操作流程，就像LOL里，刚注册游戏时，系统会引导你完成一局游戏，告诉你该点击哪里进行匹配，点击哪里选英雄等等，这种引导通常是让用户在真实场景下边操作边引导，纸上得来终觉浅，须知此事要躬行嘛，身临其境的体验才是快速学习的王道，这种的引导非常适用于操作步骤繁琐的产品。

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

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

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

概念简述 

视觉品牌这一概念，既陌生又熟悉。大部分ui设计师都或多或少做过视觉改版或者风格升级，先来看两个概念：视觉风格&视觉品牌。

▲视觉风格&视觉品牌重点偏向

风格是艺术概念，是在整体上呈现的有代表性的一种面貌。风格能反映时代、思想、审美等特性。也是设计师对审美独特鲜明的理解。那么视觉品牌呢？它除了要体现产品本身特性，融入产品希望传达的感受，也要思考什么对用户有意义。研究视觉品牌，就是探索如何通过设计维护用户对于产品的好感度 ，通过有共鸣的设计传递正能量，让产品获得最大的认同。简单来说：视觉风格重点是设计师对审美的传达；视觉品牌则是通过挖掘产品有价值的特点，创造有共鸣的视觉去打动用户，助力产品。

▲视觉品牌作用

了解完视觉品牌的概念，我们简单聊下它的作用。视觉品牌最大作用是建立用户和产品的关系。vivo互联网单个产品的视觉品牌也受vivo母品牌影响，不同业务被渗透的程度不同。比如vivo品牌对vivo官网，vivo商城影响比较大，但是对浏览器，i视频，短视频的影响就比较小。

流程

那么，如何定义好产品的视觉品牌？借企业文化里的一句话：做正确的事，并把事情做正确。在设计工作中，这句话也有一定的指导意义，我们先要确定是否要做视觉品牌，再用合理的流程规划好每一步。

结合过往的业务经验来看，对于已有视觉风格的产品来说，需要满足以下两个情况之一才是最适合做视觉品牌工作的时候：1、产品转型、重大业务调整（包括用户人群、需求变化等）；2、与相关行业设计语言水准差距巨大。另外需要考虑的还有时间安排，由于整个流程耗时需要大约12周（3个月），所以设计师前期就要做好时间规划。

确定要做视觉品牌工作后，需要准备哪些资料？项目环节和流程如何？让我们来看下这12周需要做的事情和基本顺序：

▲视觉品牌的流程

我们接下来会重点介绍流程中关键的8个步骤（图标标蓝色的step1～8）：1、品牌定位资料熟悉 2、明确视觉品牌关键词 3、关键词发散和可视化 4、提取元素建立视觉符号 5、完善主要页面 6、验证视觉风格喜好 7、完成所有页面的视觉效果 8、整理成视觉品牌规范手册。

1 、品牌定位资料熟悉

大部分项目的产品，运营和用研角色会提前做一些品牌定位的工作（品牌屋），品牌屋有助于我们对产品各方面进行解读。这类资料一般我们都可以获得，设计师可以从中了解到目前我们产品全面信息，包括：产品形象、调性、核心价值观等。我们需要的关键信息：产品关键词就可以从中找到。如果品牌屋资料不够明确或者设计师对确定的词汇抱有疑问，我们还可以通过工作坊形式，邀请项目核心成员进行脑暴会议，讨论出合适的词语。

▲案例：vivo浏览器品牌屋

图中为浏览器品牌屋资料案例，经过项目成员讨论，浏览器产品最终关键词：智慧、有趣、默契、可靠、年轻。

2、 明确视觉品牌关键词

然后，从产品关键词里，我们需要选出符合产品定位又能达到受众心理预期的视觉品牌关键词，聚焦产品的视觉调性。视觉关键词一般有2～5个，需要视觉专业团队、项目相关人员、核心用户一起来挑选，用户的选择可以放在问卷里进行，通过快速测试了解用户对产品的视觉感受和期待。如果确定的视觉品牌关键词比较多，可以适当确立1～2个核心视觉词汇，便于聚焦后期的风格指导。

▲明确视觉品牌关键词

选择标准有两条：1、延展性高，有一定视觉可视化潜力：词汇要抽象化，不能过于具体，一般都是描述情绪，气氛，氛围或者感受之类的。2、贴合公司品牌文化：追求乐趣、充满活力、专业音质、极致影像、愉悦体验、敢于追求极致、持续创造惊喜。

3、 关键词发散和可视化

发散

视觉品牌关键词选定后，在绘制可视化的情绪版之前，还差一步，就是针对选出来的词进行发散。做这一步的目的是希望设计师的思维能够尽可能打开，收获更大范围的灵感和思考。我们通过三层映射方式，分别对2~5个视觉品牌关键词进行发散收获大量衍生词。（图中以词语“友好”为案例，分别进行物化、心境、视觉映射出大量衍生词语。）

▲三层映射案例：词语友好

在大量衍生词里，我们还要经过一轮讨论筛选，去掉不合适的词语。主要看衍生词和我们的视觉关键词的关联度是否足够高，以及是否适合用视觉语言表达等。

如果项目没有做品牌相关的工作，没有产品关键词，那我们前3步骤怎么办？遇到这种情况，我们要怎么深入下去？当然，你可以尝试推进项目去做一下品牌屋，这对各个角色在产品认知上有很大的帮助。其实还有一个工具方法能够帮助我们较好的完成各类关键词提取。(Design O to O 主要是察觉用户情感化的一个工具，工具里得出该类别情感相关词汇和我们想要得出的视觉品牌关键词概念非常接近，所以推荐作为遇到这类情况的解决方法。)

▲Design OtoO方法 

这套工具方法的核心步骤分别是：收集，组织，反应，评估。每一步都有一些工具模型可以套用，能够较准的帮助大家达到目标，找出合适的关键词。

可视化

前面我们得出筛选后的衍生词，是为了之后可以做出更全面、精准的可视化情绪版。很多设计师在情绪版制作上比较随意，这里也给大家一些我们团队常用来搭建情绪版的方式。一般我们将收集的图片依照3个维度（人物、场景、物体）进行归纳整理，这样共性的东西更容易被发现。当然，拼贴整理的方式很多种，也包括常见的任意拼贴、参考式拼贴和精致化拼贴。大家可以多试一些平时不怎么用的维度进行拼接，也许会带来不一样的灵感。

▲情绪板拼贴常用方法

4、 提取元素建立视觉符号

每个情绪版带来的设计灵感都不相同，所以最终会有多个视觉符号方案。第四个step就是来解说如何从单个的情绪版里提取视觉符号的特征。

▲组成视觉语言最基本的五个维度

“形色字构质”是组成视觉语言最基本的五个维度，当你描绘一个东西的样子时，你通常会从这五个维度去阐述。所以，我们也从5个维度来提取视觉符号的特征。需要注意：五个维度不一定需要全部进行提炼，有时候遇到前期已经确定的就可以直接拿来用，也有的不涉及的，比如字体可能在部分图标里没有出现也就不需要提炼。让我们来对色彩、图形、字体、质感、构成这5个维度来细细展开：

(1) 色彩

▲快捷工具Dopelycolor对图片进行色彩分析

色彩提取常规是可以从情绪版里找出的，最简单的办法就是找出占比高的色彩并判断选择。这里分享一个快捷工具Dopelycolor ，能快速让你提取图片中颜色，以及占比，让你清晰的了解图片用色情况。

▲提炼色彩需要重要关注4点

需要注意的有以下几点：1、已有的品牌色是否要延续使用 2、选中颜色需要后期调整三元素，达到最好的视觉效果  3、如果有辅色，主辅色多结合色环考虑合理性 4、你选的颜色是不是和市面竞品太过雷同，是否要做点差异化？

(2) 图形

对于我们大多数产品目前现状，符号基础图形是不宜变动的。大环境也是如此，例如很大一部分视频类应用图标都围绕播放三角展开。因为变化会引起用户新的理解，可能会带来识别和理解的成本，所以项目设计师在方案的设计阶段，会多做几个保守的常用图形相关方案。

另外，在没有基础图形的产品品牌中，通常需要通过脑暴会去讨论出适合产品的符号基础形态。例如vivo积分商城在视觉品牌探索阶段，组织脑暴会议，邀请项目中各个关键角色一起来发散讨论适合积分产品的货币符号图形（这也是积分定义的视觉品牌符号）

▲vivo积分商城货币符号发散脑暴会现场

基础图形获取方法介绍完了后，图形的艺术表达，也就是图形设计是需要我们通过情绪版或者常用创意手法来捕捉的。通过情绪版，我们可以提取出零碎的一些特征，这些通过观察就可以提取了。比如下面这张情绪版图上能得出的共性图形特征有：描边图形、线面结合等。另一张能看出的有：大圆角、简单几何、Q型。

▲情绪板图片提取共性特征

特征好提取，但是如何去用于输出我们的视觉品牌符号，这块就依赖各位设计师的设计表达了。到这一步，建议参与的设计师们进行视觉比稿。比稿的设计师们可以看一看常用的6种创意设计手法，这些创意手法都是较常见的，在设计中协助我们创意的迸发。

▲6种常见图形创意手法

(3) 文字

严格意义上，符号里的文字也是图形的一种。不过，针对用文字来做的符号，可以参考字体创意设计的10个方法。这里不一一阐释含义了，大家可以在网上找到更多每一类图形的案例和应用解说。

▲10种常见字体创意设计方法

(4) 质感

如果要进行质感的提炼和确定，除了从情绪版里能够找到一些共性的东西以外，也可以多在流行趋势、设计网站材质图形相关专题里，去尝试获取思路。在设计方案阶段，可以多去尝试不同的设计质感。

▲质感素材专题

(5) 构成

构成通常会用在版式，招贴之类的平面设计中。很多产品标志在构成上都很讲究，图标的内容和留白比例搭配合理，具备设计舒适感。我们在做符号设计时候，同样要非常关注构成，好的构成会让我们的符号更具魅力。常用的图形构成有9种，我们在做图形时候可以多去尝试，也可以叠加尝试，找到适合的构成样式。

▲9大图形构成

案例

回到视觉符号提炼的5大维度方法，我们来看下vivo浏览器是如何提炼视觉品牌符号的。由于不同设计师整理的情绪版，方案都不一样，接下来来看浏览器视觉品牌探索众多方案其中的一个例子。

▲视觉符号提炼的5大维度

首先来看下浏览器目前一些背景设定，去除既定的情况，我们需要在这几个方面找寻特征（辅色、图形艺术、质感、构成），来完成我们的视觉符号。

▲vivo浏览器背景设定

在这个方案中，设计师从情绪版提取了想要的特征（图片中蓝色文字）：

颜色：从情绪版提出占比较高的颜色，归纳成色组，在色环中逐一讨论去留，去除对比强烈的黄色（因为浏览器作为工具类产品并不想传达出刺激，冲突，过于活力的感受，故去除。）在邻近色（青色、皮粉色）里考虑避开性别因素，青色更加适合。然后调整一下rgb，饱和度提高一些。

图形艺术：延续地球元素，情绪版提炼的：大圆角、简单几何、Q型，描边图形，线面结合。

质感：浏览器在先前资料收集的时候就有倾向，考虑近两年手机背面AG磨砂玻璃广泛使用，界面上苹果和微软也整体设计转向毛玻璃风格，关于这类品质感和空间感明显的处理方式，浏览器设计师也想进行尝试。

构成：结合情绪版和图形构成9个方法，提取并运用的主要特征是动势，也是想赋予符号活力感受。

最后，经过草稿比稿，评审通过的方案和确定的符号5个特征如下：

▲vivo浏览器符号的5个特征

5、 完善主要页面

视觉品牌符号完成以后，接下来需要继续绘制与符号强关联的页面。这些模块有：loading、缺省、核心页面、插画插图场景。不是把视觉品牌符号简单的原封不动放在各个页面里，而是通过一些设计手法将它更好的融入在页面中。

通常，核心页面模块的视觉呈现，都是基于已定的视觉品牌符号特征去发散。目前我们团队有两种不同的思路：一个是从先前符号里提取主要某个特征并结合场景做出版式布局的延展。类似我们做vi时候常用取logo的一部分进行图形组合再创意。另一个是将已定符号的不同特征进行多个组合，创作出符合这些特征的衍生的新视觉。

浏览器用的第二种方法，提取出的符号特征和定好绘制要求，其中为了保持整体风格的一致性，需要绘制的模块特征应不少于一半目前特征（满足1/2)，如果有新增的特征需要保持和谐，不应该有其它明显的风格倾向。这个也是用来检查你做的系列衍生效果是否整体的标准。经常有同学做了一个很好看的缺省图，但是风格特征与已定视觉符号风格相差甚远，最后导致不能使用。

下面是vivo浏览器视觉品牌符号延展的图形或页面样式：

▲缺省图样式（6/8特征）

▲装饰icon图样式（4/8特征）

▲特殊弹出层样式（4/8特征）

▲视频操作引导样式（4/8特征）

▲应用在整体页面效果

看完浏览器的符号延展方法，再来感受下另一个方法：通过符号，延展多个版式视觉的案例——短视频视觉品牌探索。项目设计师主要对视觉品牌符号图形特征做了延展，局部提炼并创新版式。

下图是短视频视觉品牌符号，基于此为基础型，设计师根据总结的6种手法，用对称、平移 等方式进行拓展，结合页面实际情况完成。

▲短视频品牌符号以及图形应用解说

▲短视频品牌符号页面背景应用

▲ 物料拓展概念

6、验证视觉风格喜好

完成主要页面后，我们会进行风格测试，用来验证不同的设计方案在用户眼里的喜好程度，从而修正设计师的认知偏差。我们建议至少完成3个视觉品牌符号方案和对应3套页面来供用户测试。

关于风格测试，是将已有的方案通过问卷和简单的线下访谈，得出用户的喜好结论。因为是敏捷测试，只需要一周就可以出结论。在这一步，有5条测试重点和对应解读需要设计师关注，具体内容参考下图：

▲5条测试重点与解读

目前vivo浏览器和i视频都在视觉品牌升级时候，运用了这个较为敏捷的测试方法。

▲i视频视觉品牌3套方案风格测试复盘

▲vivo浏览器视觉品牌升级核心页面风格测试

7、完成所有页面的视觉效果

经过用户的验证和后期修改，我们确定好了唯一的一套最合适的视觉品牌。在设计组内部评审+项目组核心成员评审效果通过后，接下来工作就是按部就班的去完成后续页面的规划和落地。这一环节的工作体量较大，需要花时间去梳理替换所有页面。整体t替换预计耗时需要2周左右，建议多些成员参与完成。

8、 整理成视觉品牌规范手册

最后一步也是最重要的一步，需要把视觉品牌的设计指导和规范进行沉淀。视觉品牌规范手册是需要项目组设计师一起维护的。好的设计语言是第一步，维护和让其发挥最大价值（原则、一致性、效率）是视觉品牌规范手册的意义。

▲视觉品牌规范手册4大模块

目前我们已经梳理出vivo浏览器、短视频的视觉品牌规范手册。内容包括4个部分：品牌概述、品牌符号、视觉语言、物料规范。对产品的视觉品牌理解和如何应用会完整的体现在手册里，建议每一个参与项目设计师都应该在设计前先整体看一遍。

结语

视觉品牌的定义流程以及方法，是我们团队资深ui设计师第三季度重点研究和探索的产物。希望能给正在做视觉品牌相关工作的设计师带来一些帮助和启发，如果有建议或者疑问，欢迎通过VMIC UED公众号和我们交流，让我们一起优化好这个视觉品牌定义体系，为用户创造更好的视觉体验。

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

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

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

1. 动态在 UI/UX 扮演的角色

动态能激发用户的情绪，为静态的视觉设计注入活力与生命力。有趣、奇妙、吸引人的动态，能让你的产品展现与众不同的魅力。另一方面，动态有助于支持可用性，通过自然流畅的物理运动，突显元素在过渡时的关联性与状态变化，增强用户对产品功能的感知。

因此，动态设计必须是有意义的，同时兼具可用性与美感，UX 行业也将动态设计视为多学科的交集，细分成一个专业的设计门类。作为 UI 和 UX 设计中重要的组成部分，动态设计从三个层面发挥影响力：

提高连贯性（Increase Continuity）

让界面元素在用户流程中顺畅地转变与过渡，将用户操作导向期望的任务结果。

连接场景（Connect Scenes）

在转换场景的过程中扮演润滑剂的角色，阐明场景之间的位置、层级与空间的关系。

视觉吸引（Visually Appealing）

聚焦用户视线，将其注意力放在重要的事情上，从而起到信息传达、提升识别度的作用。

2. 动态设计趋势

植基于 UI 和 UX 设计而发展的第三维度，动态设计的趋势自然与两者密不可分。综观近年，多数作品巧妙地运用绚丽的动态图像（Motion Graphics）与动效设计，让新的视觉手法得以表现更为出彩。再者，随着移动端芯片性能提升，跳脱二维平面的表现形式不再难以实现，让设计师能够解开束缚，发挥无限的想像空间。2021 年的动态设计可归纳为三个趋势：

增强表达（Enhance Expression）

运用引人注目的表现手法将信息传递给用户，包括变形、动态文字和背景动画。

创造层次（Create Hierarchy）

在视觉平面中创建空间层次结构，遮罩与视差是常用的表现手法。

扩展维度（Expand Dimensions）

突破二维限制，将界面元素多维化营造空间感，例如 3D 动态图形和摄像机运动。

增强表达

1. 变形 Morphing

变形创造了一种连续的叙事状态，告知用户元素的状态或作用发生变化，是一种最引人注目的表现手法，能将形状、图像、色彩无缝地融合与过渡。

动画插图 Animated Illustrations

2021 年看到许多有趣、吸引人的插图，而更多的设计师开始为静态图像添加动态，也让 GIF 和动画插图越来越受欢迎。

动画插图看起来更生动，并带有叙事性质。在示例中，运用动画插图来呈现这杯果汁是由哪些水果打成，比起文字描述更能吸引观众的注意力。

by Lobster

通过动画插图来呈现同一系列的转变，有利于延续外形上的特征，让不同的物体具有连结性。比如从桌子、衣柜到灯具的连续变化，同样风格的系列家具利用动画来体现一致性。

by Graceful illustrations ™

流体动态 Liquid Motion

动态的有机形状，包括流体、烟雾和火焰等粒子效果，能够极大地增强视觉效果。流体动态并非明确的过渡与场景转换，而是颜色在流动的液体中扩散，进而创造出抽象或真实的视觉形状。这种风格能实现无缝过渡，并为设计增添有机感，也是 2021 年最引人注目的动画趋势之一。

运用流体动态来展现抽象的有机体，除了轻易地攫取受众目光，还让人不自觉地伫足在画面上，感受流体变化的韵律与美感。这类动态设计可作为烘托主题的背景动画，或是吸引目光焦点的主角。

by ✞anton mishin✞

流体动态运用到网站设计所营造的视觉冲击力更为惊艳，能为用户带来独特、新鲜的视觉感受， 使得流体动态深受风格前卫的设计师喜爱。网站还能利用鼠标悬停与流体进行互动，因此会在许多特效网站见到流体动态的踪迹。

by Gilles Tossoukpé

动态渐变 Dynamic Gradients

扁平化设计缺少现实质感的元素，搭配渐变色能有效缓解不足，为设计创造深度与层次。变化中的渐变色同时带有动感与舒缓，充满活力却又平静。使用动态渐变能让设计师展示一系列不断变化的情绪，许多内容创作者和品牌已经注意到这一点，开始在广告活动、识别设计和数字内容使用动态渐变。

by Pixelz Studio

微交互 Micro Interactions

在用户体验设计中微交互变得日益重要，而动态设计正是微交互的灵魂所在，即使只是微小的视觉提示或反馈，都是人机交互易于使用的关键。从经典案例来看，微交互的动画细节必须带有明确的目的性，让用户获得实时反馈，指导用户进行下一步。从近几年的设计趋势来看，微交互已成为不可或缺的存在。

by Илья Бабушкин

by Google

动画商标 Animated Logos

过去几年动画商标是最流行的动画趋势之一，通过各种视觉效果，设计师能创造出不同类型的动画商标，许多企业开始采用动画商标作为吸引注意力的手段。多数情况下，商标是进入网站时最先看到的东西，因此商标应该令人难忘、引人入胜，并使用符号或排版来揭示品牌个性。结合动画的优势，设计师可以运用一些动态或效果来讲述简短的故事以强调品牌特征，并为静态排版和商标注入一股活力。

by Yulia K.

by Meta

2. 动态文字 Kinetic Typography

动态文字是使用移动文本来吸引注意力的动画技术，许多卓越的品牌在网页设计中使用动态文字，为网站外观增添动感和视觉冲击力，是近年 UI 动画的趋势之一。

设计师使用动态文字为单词或句子添加生动的元素，借此定下情绪氛围与设计基调，吸引用户的注意力。几种常见的表现手法，挤压和拉伸一个词能会唤起一种俏皮感，而连续重复这个词则具有催眠感和前卫感。另外，使用大号和粗体字体来增强份量以强调某些信息，也是动态文字的特征之一。

无论在电商网站、电视广告或音乐视频，动态文字都占有举足轻重的地位，有利于加深用户对品牌的关注与印象。

by HOLOGRAPHIK®

by Hrvoje Grubisic

3. 背景动画 Background Animation

通过背景动画来强化叙事，成为许多行业常用的品牌传播手段。你可以创建动态的品牌故事，展示有趣的制造过程、产品的使用场景。背景动画深获大众喜爱，它能让用户在进入登录页或网站首页时，轻易地了解更多有关公司或产品的信息。调研显示，从银行、医疗保健公司、电商零售商、餐馆到 B2B 供应商，这些跨越不同细分市场和行业的网站都开始使用背景动画。

by Carlo Soleri

by Kirill Zhukovsky

创造层次

1. 遮罩 Masking

遮罩过渡是将几何或有机形状作为衔接下个场景的遮挡物，等同于舞台幕布设计，能在界面元素进场或退场时创造连续性效果。这种表现手法简洁高效，是最常见的过渡动画之一。

切换场景 Scene-Switching

其中一种遮罩过渡，是将当前场景完全置换，如同揭开蒙在上层的布，逐渐展露叠在下方的景，并利用景物相似性和动作延续性，让两个场景能够顺畅地衔接，不致于差异过大，造成用户心理负担。

by intent

by Minh Pham ✪

状态变换 State Transformation

另一种遮罩的表现形式，较无明显的场景过渡，而是利用遮罩来表现景物的状态变化，界面元素和布局基本保持一致，以此塑造无缝过渡的视觉效果，这种手法被广泛地使用，例如气候变化、人物换装、产品组合等。

by Daniel Tan

by Outcrowd

2. 视差 Parallax

视差是利用不同的界面元素以不同的速率移动，创造前后景深的分离效果，借此在平面中塑造空间层次，已成为网站首页最为普遍的表现形式。

视差之所以能形成一股风潮，广为各个行业所接受，一方面是信息层级更加清晰，明确定义各种元素的关系，让用户专注于主要操作和内容，将背景或非交互元素往后退，同时保持设计的完整性。另一方面是丰富的层次变化，当用户滚动或滑动时，能在扁平化界面拉开空间关系，利用不同的速率和纵深，塑造多层次的感官体验。

by Studio VØR

by Studio VØR

扩展维度

1. 3D 动态图形 3D Motion Graphics

近年来，结合 3D 动态图形的界面设计呈现爆炸式增长，虽然创建 3D 动画需要更多的时间、技巧与协作，但不可否认的，3D 动画比 2D 图形更加逼真，从而提供更具吸引力和互动性的用户体验，并有效地展示品牌的活力。

更生动的表情 Lively Emoji

动画的吸引力在于能够创建各种角色，并为无生命物体注入生命力，表情符号就是一个很好的例子。作为独特的网络语言，表情符号生动地描摹日常面对面交流的非言语信息，随着图形界面的设计趋势逐渐结合 2D 与 3D，运用 3D 动态图形来创造更加动感、拟人化的表情，能让这些非言语信息更加丰富，有机会引领下一波风潮。

by Outcrowd

营造空间感 Spatial Awareness

3D 动态图形为平面设计建构了空间叙事框架，在扁平化界面中展现立体感，从而表达空间中元素的位置与层级关系。多维化的发展趋势，推动了视觉表达形式的演变，空间感让界面设计更符合人类的认知逻辑，运用各种 3D 运动特效，包括旋转、翻转、折叠、透视、Z 轴位移等，打造令人难忘的感官冲击。

by UI8

by Bruno Ortolland

拟人动画 Anthropomorphic Animations

拟人化能让物体、植物、动物等非人类事物，表现出人类属性的行为与状态。动画片运用拟人的手法是最普遍的，1927 年迪士尼第一部系列动画《幸运兔子奥斯华》的主角便是拟人的兔子形象。由于人们容易被以人类行事的事物所吸引，越来越多设计师在界面中添加拟人元素，利用这种效果让画面更加生动有趣，增强用户体验的愉悦感。

by Gregory Riaguzov

2. 摄像机运动 Camera Movements

在动态设计中，摄像机运动是最自由、灵活的一种表现形式，能让画面过渡更有张力，突破 2D 平面在视角上的限制，创造一个无界线的立体空间。常见于影视、动画和广告的摄像机运动，包括推近、拉出、平移、跟拍等方式，备受动态设计师青睐，让用户以多变的视野探索数字产品。

推近/拉出 Dolly In/Dolly Out

推镜头是指被拍摄的对象不动，摄像机由远而近，朝着对象不断推进， 用来突出人或物的主体。镜头推近的运动方式，用来呈现从整体到局部、由分散到集中的变化，引领用户进入故事情景，给人一种身临其境的感受。

相反地，拉镜头则是将摄像机后退，使画面逐渐远离被摄主体，侧重的是从局部到整体、由点到面的转变，强调主体所处的空间环境。随镜拉出的景象，能激起人们无限的想像。

by Michael Crawford

by Ali Zafar Iqbal

水平/垂直移动 Truck/Pedestal

水平向左或向右，垂直向上或向下移动摄像机，使画面不断变化，让用户跟随镜头视角一起移动，产生一种置身其中的感觉。这种运镜方式，通常用于具体的场景，利用角色或景物的延续性来消除场景过渡时的边界，表现出一种流动感，无论是手势滑动或鼠标滚动都能有顺畅的操作体验。

by Netguru

by Minh Pham

结合多种运镜 Multiple Camera Movements

运用多种摄像机运动相当普遍，既能扩大视野，又有很强的空间感，可以更加自由与多样地展示不同视角和情景。比方说结合横摇（Pan）、直搖（Tilt）和跟随（Tracking）镜头，连续而详尽地展示一个产品，由于画面始终跟随一个主体，有利于突出产品特征，并让用户从不同的角度和距离观看产品，是一种增强临场感和参与感的有效方法。

by Sang Nguyen

by Paul Ilnitski

一镜到底 One Shot

在电影中为了不将观众的情感和注意力割裂，使用一个镜头来完成全片的场景刻画和叙事，这种拍摄手法被称作一镜到底或长镜头。连续镜头逐渐被运用到界面过渡，以此增强操作过程的流畅性，例如一气呵成的购物体验，或是贯穿全场的人物角色，其特点是给用户最沉浸的感官体验，无间断地体验整个流程。

by Orizon: UI/UX Design Agency

by Minh Pham ✪

结语

动态设计作为近年热门的创作形式，广泛应用到各个领域，逐渐成为设计的主流趋势。受益于技术演进与发展，从创意生产到落地实现，动态设计的门槛不再遥不可及。设计师得以将想法转化为生动、有趣的作品，并有机会创造新的表现手法，玩出许多新花样，成为 2021 年动态设计的特色。

本文归纳的设计趋势，有助于启发设计师对动态设计的想像，激发更多创作灵感，为静态界面赋予灵魂，打造令人难忘的视觉体验和品牌形象。

文章来源：优设 作者：腾讯ISUX
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

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

导航栏（Navigation Bar）作为一个基础控件，极高的复用率和看似单调的设计样式，往往会让人习惯性忽略其中隐藏的诸多细节，以及背后的设计原因。本篇文章主要探讨导航栏视觉和交互上的各种组合可能性和相关设计细节点，希望能提炼出一般性的设计规律。观点仅是个人粗浅的分析，如果有哪里说得不对的地方，希望大家多多指点。

理解导航栏的作用

导航栏是用来帮助用户定位、导航、操作的基础组件。既负责告知用户当前所在位置，防止迷失，又负责连通页面跳转路径，允许用户在不同层级的界面之间来去自如。同时还承载了针对当前页面全局性的操作。

简要概述导航栏的作用，有以下 6 个：

1. 定位：告知用户当前所在位置
2. 导航：提供离开当前页面的出口，即返回上级（适用于非一级页面）
3. 提供全局操作：一般是以图标、文字、按钮或组合的形式存在
4. 扁平层级：以分类 tab 为代表，本质是将多个相关的同级页面聚合在一起
5. 增加品牌曝光：一般放置在首页左上角
6. 解释页面当前状态：属于瞬时状态，动态变化

梳理导航栏常见的布局方式

实际上，导航栏的布局方式非常丰富，除了上文提到的几种基础布局之外，还有许多复杂的布局方式。

不同的布局方式体现了不同页面的信息架构。

为了方便描述，我将导航栏可以放置信息的部分划分为左、中、右三个区域。

接下来，我将从「结构简单」到「结构复杂」的顺序来讨论导航栏的各种布局方式。

突出视觉重点的 4 种设计策略

视觉服务于功能，不同视觉权重背后对应的是不同功能权重。以搜索功能为例，不同产品、不同场景下，搜索功能的权重都是不同的。对于电商产品来说，首页搜索是非常关键的流量入口，必须足够突出，减少用户的认知和操作负担，使用户更加顺畅高效地使用产品。而对于不同产品或不同场景来说，搜索的优先级就未必有这么高。

提升视觉权重的本质是将重要信息和次要信息「区分」开来，而建立区分的本质则是「建立对比」。

我们以“搜索”功能为例。

拆解视觉细节

我们从以下几个方面来拆解导航栏：

1. 标题样式
2. tab 样式
3. 控件样式
4. 背景样式

整理交互细节

首先，我们要了解，页面固有的层级结构决定了某些信息是常驻于屏幕的，另外的信息是随着用户竖直方向滑动手势而滚动的。而导航栏绝大多数情况下是常驻于页面顶部的。

尽管导航栏一般都是常驻于页面顶部，但仍有不同的情况要分类讨论：

1. 常驻区域无变化：导航栏不会随着用户手势的滑动而发生变化。
2. 常驻区域有变化：导航栏会随着用户手势的滑动而发生变化。

首先要明确，哪些内容属于常驻内容。

上方这种情况比较明显，头部区域是常驻区域，但要注意并不包括四个主图标。

我们再来看下面的案例。

上述变化的本质是从「状态 a」过渡到「状态 b」。

状态 b 决定了常驻于屏幕的元素数量，这和内容层显示效率息息相关，需要在页面设计之初就考虑好。

确定好了「常驻区域」和「被折叠区域」之后的交互就比较简单，直接折叠相应内容即可。

使用这种「状态过渡」的思路，相当于明确了变化的起点和终点，之后就可以将精力投入在如何使两种状态之间的过渡更加自然。

当我们确定了「过渡变量」之后，我们只需要考虑如何安排变量如何入场（进入状态 b）。变量的出场（撤出状态 a）并不需要考虑，因为变量是跟随内容层一齐滚动的，自然会被上层的导航栏遮挡。

上方微信读书的案例用了硬切的方式，过渡变量直接出现在状态 b 中。通过观察 iOS14 的信息，我们不难发现，iOS 系统采用的标题栏过渡方式是渐现。本质上没有区别，细节上，渐现相对于硬切更加柔和丝滑。

结语

以上是我个人对导航栏相关的一些整理和总结。

分别从功能作用、布局样式、如何突出重点、视觉细节、交互细节几个层面梳理了导航栏设计策略和设计思考。基础且复用率极高的控件蕴含了许多细节和门道，通过大量细致观察总结出一般性的规律，希望我的文章能帮助大家看到一些平时可能会忽略的细节。

文章来源：优设 作者：设计师doo
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

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

最近在整理系统的组件规范，收集各个场景下的组件应用，在搜集应用控件时，弹窗的套用、混用、乱用情况挺多的。

主要是模态框和非模态框的使用。

模态框：一般会有一层黑色透明的蒙板，它打断用户所属的主流程，不能进行下去，只能到完成模态框的操作，才能返回到主流程中去，这个操作很明确，不会被误解；

非模态框：一般没有那一层蒙板，不会影响所属的主流程，也不用担心原有进度会停止，仍然可以持续操作。即打开非模态也能看见底层的主流程。

概述

模态or 非模态，统称为弹窗。样式上可以理解为类似卡片，能够帮助用户快速定位获取关键信息和进行操作，它的内容是灵活的，一般情况下包含文字、图标、按钮。弹窗的设计是给用户传递与当前场景需要的操作相关的内容。

      你是不是经常感觉自己在项目组里没有发言权，发了言也不被重视，想做的设计也落地不了。尤其是做到运营相关的设计时，感觉设计价值微弱。那么我今天来说一下如何通过设计驱动运营价值最大化。作为UED我们并不是单纯的只负责活动的美化，而是作为全链路的体验设计师，把活动运营当做一个产品项目对待。从业务开始跟踪，明确目标、建议方案、优化体验链路、优化数据策略等不同阶段做出设计价值。我们的投入初见成效，以下是我这段时间的总结，分享给大家，希望能给大家带来新的思路。

一、明确活动业务目标

1.1 活动目标

运营活动（Operating activities）是指针对不同性质的活动进行运营，包含活动策划、活动实施、营销推广、品牌传播，达成提升相关运营指标的有目的的运营行为。为了更好的达成既定目标，项目立项后我们需要了解此次运营活动的目标，以目标展开设计策略和设计实施。常见的运营活动目标主要是拉新、促活、回流、营收，本质上就是利用增长模型AARRR来达成运营目标，助力产品用户增长。

1.2 活动目标分类

目标的细分拆解后，基本都是围绕“用户、营收、品牌”这三个维度来进行活动策划设计。一般来说目标越单一活动复杂度越低，目标综合性越高，越需要调动不同类型用户参与，活动的复杂度就越高。对于综合性目标的活动，不能以单一数据来判定活动效果，需要进行综合分析。定量的我们可以埋点分析数据，定性我们可以通过问卷来调研用户对活动附加效应的感知，比如对品牌的识别和记忆以及NPS（净推荐值）。

二、参与活动策划过程

活动策划过程就是对整个活动方案设计的过程，运营人员和产品经理落地初步方案后，设计师就可以参与进来。这一部分需要看设计师的自主积极性，和团队流程的开放度。总体来说设计师积极参与策划过程也能很好的助力活动实施。

其一、设计师平时关注活动较多，可以在脑暴的时候提出一些相对专业与互补的建议；

其二、参与策划过程或者参与方案评审过程中能帮助设计师更好的理解这个活动的底层逻辑和核心价值；

其三、前期项目组的方案想法达成一致可以减少对后期的修改。

三、优化体验链路

除了遵循尼尔森十大交互原则，在《社交红利》一书中，徐志斌老师总结了活动运营的6特点：免费、简单、有趣、透明、可积累、可兑换。在优化链路时，我们可以从这几个方面考虑：

3.1 本着简单、有趣、易传播的设计原则。

简单：是指用户易理解，教育成本低，操作简单。在运营设计中一般我们会与游戏结合，在此我称为游戏运营。在游戏运营的设计中，如果不是一个约定俗成用户都熟悉的游戏任务，教育用户如何操作的成本是相对较高的，需要有详细的操作引导。一般引导的步骤注意不要超过四步，或者在用户使用的场景恰当的分步展示。比如鲤鱼跳龙门游戏操作就比较简单，引导只需要一个简单的提示；而京东全民运动会作为大型活动比较复杂，引导步骤较多，对一步分用户来说认知成本高就不会参与活动。

有趣：是指具备一定的趣味性和创新性，可达成KANO模型的兴奋型需求。在设计过程中，简单和有趣这两个维度考虑不能单一靠假想的用户体验来判定活动是否好玩。比如在金哥接金币游戏设计中，有一个交互手势是金哥如何接金币。手势锁定在底部点击，全局点击，左右滑动。其实按照ui惯性的思维，底部点击成本低于全部点击低于左右滑动，所以一开始是建议使用的是底部点击。但是后面进行测试发现，左右滑动的趣味性远大于点击，且执行成本也比较低。主要是在游戏过程中点击是精确的操作，由于金币的数量多，且面积小，分散点击友好度不高（拼多多的红包点击区域更大），而滑动则是在一定范围内，金哥用平底锅区域可以接到金币难度系数更低，得分率高。从沉浸感上来说，点击更像你点哪个金哥到哪里，按住金哥移动会有中你就是金哥的体验，对金哥的掌控感更强，自然沉浸感也更好。

易传播：是指低理解成本传播与裂变。一是触发按钮突出可识别；二是操作任务明确无歧义；三是传播交互易操作。通常我们设计的时候会理所当然感觉用户是很明确他们的操作行为的，但是基于某证券一期的活动用研反馈，用户对活动的邀请机制，甚至是步骤都是迷惑的，不知道自己是否已经成功分享，导致失去再分享的动力，为此我们在邀请模块下设计了简易的步骤去引导客户。

3.2 考虑活动规则的底层逻辑与开发算法能否实现。

设计方案时，需要考虑到开发实现的可行性。比如活动的任务得分和游戏得分规则机制，开发算法能否实现，如果开发算法难以实现就会导致大返工。所以需要及早跟开发做好评审工作，并且是很细致的评审，只是粗略评审后续还会出现问题。

3.3 梳理交互流程，保证整体链路的完整性。

交互状态都要考虑全面，如登录前后状态，空状态，各个等级的状态，任务前后的状态，不同类别用户的状态等。

四、设计策略

运营设计策略可从策略层、风格层、基础层三大层面展开。整个过程可以使用双钻模型，通过发散和聚焦来打开思路，聚焦落地目标，以下是我总结的设计策略画布。

策略层：1、确定增长动力；2、锁定活动类型；3、故事场景化；4、IP角色品牌化；5、游戏化设计

风格层：插画风格、平面风格、立体维度、复古与趋势

基础层：配色、字体、图形、动效、声音

4.1 策略层

策略层是通过前期基于产品定位、品牌定位了解后，针对运营目标分析用户画像用的一系列的设计策略。为实现最优的业务转化，需要在设计之初明确活动覆盖的用户人群。同时在各个环节都能考虑到特定用户群体的不同需求，尤其是在业务转化的过程中，考虑用户体验地图，就能更好的到达运营效果。以下是我总结的策略画布：

常用的运营策层包括以下几个步骤：1、确定增长动力；2、锁定活动类型；3、故事场景化；4、IP角色品牌化；5、游戏化设计。

1、确定增长动力

增长动力是指用户产生行动共鸣的心理机制，是刺激用户增长的裂变的核心。

利益刺激：使用金钱、虚拟货币、实物大奖等，引起用户内心的金钱欲和贪小便宜的心理到达动力。比如抽奖、红包、返利、电子货币等。

共情刺激：激发用户的使命感、炫耀、好奇、从众、互惠等心理，使活动场景与用户心智产生共情的动力。比如账单、战绩、评价、祝福等。

艺术刺激：通过美图、插画、艺术图等，与用户达成审美和情怀共情的动力。比如年画、主题卡牌、美图美照等。

正所谓“无利不起早”，利益刺激是最直接有效的，属于马斯洛人类需求层次理论的生理需求。以下沉的拼多多为例，红包提现是不败的运营策略，以微信为分享载体的裂变是指数型的。共情刺激、艺术刺激则在更高的层次上，想要戳中用户心智就比较难。对于运营活动利益刺激是基础，同时如果能使用共情刺激、和艺术刺激可达到更高期望的需求。比如我在玩今日头条的集卡活动的时候，还能意外收获到十分精美的插画，风格正好又是我非常喜欢的，所以我就有了集卡的动力，就算没有得到卡，我还能分享我精美的插画何乐而不为。

2、锁定活动类型

确定增长动力后，需要锁定活动的类型。如果我们简单、易传播的原则，可以选用市面上常规用到的活动类型降低用户认知成本，对于一些比较有名的活动，像支付宝集五福，其本质就是通过完成运营任务来收集某种虚拟物品，再由集齐的虚拟物品变现红包完成用户利益激励。设计时不能完全照搬，既要根据活动目标结合产品自身逻辑层级优化链路，也要在表现层做好风格形式的区分，已达成有新的识别度的活动。

常见活动运营的类型：

收集类（集福、集卡）；养成类（蚂蚁庄园、撸猫）；操作类（鲤鱼跳龙门、金哥接金币）；棋牌类（大富翁）；抽奖类（大转盘、抽签）；测试类（心理测试、智力问答）等。

3、故事场景化

故事场景化，是在锁定活动类型后，把活动主题化，围绕主题打造故事，引人入胜。良好的场景设计、氛围营造可以带来沉浸式的用户体验，也可以与用户建立情感共鸣。比如在金哥接金币的运营活动中，我们选用操作类的运营游戏类型。故事主线就是围绕IP金哥接金币得金币展开的。有了基础的故事背景，需要建立一个实际展示的场景。利用联想思维，天上掉金币，那么应该是在户外 ，金币掉到了金哥的哪里，是手上还是哪里，金哥还是在地面还是在树上。经过脑暴后选用了超乎常规的岛屿群场景设计，层次分明的场景，使得整个场景广阔，极富空间感。

4、IP角色品牌化

现在几乎每个产品都有自己的ip，一方面是连接品牌更容易使用户记忆，另一方面ip的扩展也为运营带来了趣味和无限的可能性。ip的使用一是要保证ip的识别性，另一方便是需要很好的融入我们的故事场景。比如金哥他出现在我们接金币的场景需要什么样的装束，使用什么动作更好的连接到这个接金币的故事场景中。一开始想着用箩筐去接金币，但是箩筐体积大而高，会挡住ip，降低了ip的识别度。在设计的过程中突然灵光一闪，为了什么不用平底锅呢，它除了打人，接金币也不错。通过金哥头顶平底锅的接金币方式，增添了整个游戏的创新性和趣味性，至于箩筐可以收纳平底锅接到的金币，整个场景就很有逻辑性和画面感了。同时为了凸显游戏的氛围，还给ip设计了头带必胜的绑带的小细节，和有冲击力的动作，增添了ip的生命力。

5、游戏化设计

由于游戏本身对用户就有一种天然的吸引力，加上可以很好的与运营活动结合打造沉浸式体验，越来越多活动都是与游戏结合来达到活动目标，也叫运营的游戏化。核心宗旨是“以人为本”的设计理念，并不是以功能为中心，在设计时可以使用游戏化设计八角模型。

使命——重大意义与使命感

让用户认为自己正在做的事情，其意义比事情本身更重要，从而达到激励用户的作用。譬如支付宝里面的蚂蚁森林，种的不是树，而是地球的一点绿，这个使命感瞬间油然而生，在玩的过程中还能帮助地球绿化，激发了用户环保使命感。再比如在奥运期间的微博的金牌大满惯的活动，以围观奥运会之名，集奥运金牌卡喊你助威中国，利用了用户对时时热点的从众心理，又联系到了爱国上升了到了爱国使命感。

成就——进步与成就感

指参与过程中取得进步、获得技能、获得荣誉，从而获得成就感，去克服困难达成目标。一般我们会通过证书，勋章，排行榜等去给与用户成就奖励。挑战和技能是促使用户不断升级的主要因素，为了让用户沉浸其中护住心流，适当的挑战难度和技能解锁就显得尤为重要。挑战难度高了容易引起用户的焦虑，难度低了又会让用户感觉无聊。比如集卡行动，在考虑总预算不变的情况下，如何设置稀有卡的比例，集卡的难度就尤为重要。支付宝集五福在初期，敬业福的比例比较低，所以用户抽到敬业福的体验就很开心，但随着支付宝后面为了扩大社交属性，提高了集齐率，集五到五福的兴奋感就弱了，导致部分用户失去动力，因为集到的人越多后续瓜分的钱就越少。

稀缺——稀缺性与渴望

当想要某样东西获得率很低的时候就有了稀缺性，能激发起用户更大的渴望。就像支付宝的敬业福，其他几个福集齐较快，获得后就没有很大的惊喜感，而获得敬业福就会非常激动，甚至一度风靡在微信朋友圈晒敬业福，因为集到敬业福相当于集齐了五福。这种稀缺也成为了氪金最好的办法，比如稀缺的装备，高于其他人的权限等。

创造——创意与及时反馈

制定基本元素、和规则，把玩法策略交给用户，给用户足够高的自由度，驱使全身心投入到创造性的过程。通过不断体验创造的过程，同时注重创造的结果，并及时的反馈。比如淘宝人生，可以打造自己的形实质上就是装扮类的游戏，这种常驻型的游戏，不仅可以提高用户使用产品的时长，还可以联动品牌做营销提高下单率。其生命力的不竭动力就源于，对用户不断提供创新的服装、妆容、饰品、场景，让用户自由创造新角。

拥有——所有权与拥有感

使用户拥有或控制某样东西，获得激励，持续升级。结合挑战设置，当用户通过一定努力而拥有的东西会倍感珍惜，也能激发其收集欲望和挑战欲。最常用的就是收集类的游戏，比如各种收集类的活动中，先会获得一个物品激发你对该系列的占有欲，不断收集其他款。还有一种常用的是勋章的激励，勋章本身是对行为的阶段性的奖励，好的策略和勋章样式同样能激发用户的收集欲。

社交——社交影响与关联性

社交影响指的是别人的状态、想法、行动、言语等对外展示能驱动到他人，也就是我们的行为通常会收到其他人的影响，比如羊群效应。就像看抖音，点赞量多的，没准我们会跟有耐心看到最后，因为有个潜意识心理就是大家都觉得好，总之差不到哪里去。在游戏和运营活动中，营造有很多人玩的氛围，鼓励用户炫耀自己的成果都是非常见效的方式。关联性我理解为我们会选择尽可能与我们有关联的事物。比如拼多多推荐你去分享，都是优先推荐与你互动最为频繁的，这样去拼单和拼单成功的几率更高。

未知——未知性与好奇

不知道接下来会发生什么，勾起用户的对未知的好奇心。比如闯关，玩家不断闯关就是这种未知带来的牵引。在活动运营中最常见的就是大转盘抽奖，现在比较流行结合盲盒的活动，就是满足猎奇心理，让用户欲罢不能.

亏损——亏损与逃避心

利用用户害怕损失属于自己的东西来让他们参与进来。可以结合损失厌恶来理解。损失厌恶是指人们面对同样数量的收益和损失时，认为损失更加令他们难以忍受。同量的损失带来的负效用为同量收益的正效用的2.5倍，可见损失对我们的心理影响更大。比如商家发给你的免费优惠券，其实你本身不需要购买什么，但是商家偏偏在优惠券上加上时效性，超过活动日期就置灰了，即使你原本没有购买需求，但是感觉没用掉优惠券就像损失了优惠券的钱一样，就会去购买，甚至为了凑单购买更多东西。

结合游戏的运营中，八角模型的原则不一定都需要用到，但是优秀的基本都会使用到所有原则。而最基础的使用到的原则就是“成就”，“拥有”和“社交”，就是利用金钱刺激，促使用户分享。成就、拥有、稀缺都属于外在动机，创造、社交、未知属于内在动机。短期的活动中一般为了快速引流会主要使用外在动机的抓手，如红包、优惠券，这种效果显著，但是一旦失去供给红利，就会面临用户流失。所以做一个长期或者大型活动，需要尽可能的提升内在动机，使用户真正对游戏上瘾，才有可能获得更多的活跃的用户。

4.2 风格层：

风格层主要从这几个面入手：插画风格，平面风格，立体维度，复古与趋势。运营的设计风格主要是从插画风格和平面风格衍生和组合使用。

插画风格：在ui界分为有扁平插画、肌理插画、手绘插画、MBE插画、渐变插画、2.5D插画、描边插画等。

立体维度：按照立体维度可分为扁平风格、立体风格（3D风格）、写实风格（真实质感，照片合成），在确定立体维度的时候一般会确定整体风格的质感。

平面风格：赛博朋克、波普风格、孟菲斯风格、“FUI”未来风格、蒸汽波风格、以及前几年流行的“故障风格”和现在非常流行的弥散流体酸性风等。

结合实际风格还有一个维度可以对风格进去区分就是时间维度。首先设计师应该把握最新的设计趋势。比如在扁平风格流行了很长一段时间，现在慢慢又开始进入立体的风格，尤其是C4D的使用，使得3d风格又风靡设计界。把握潮流趋势的一般都是当下流程的设计风格，在特定主体下我还是可以追溯时间线，做一些复古风的设计。复古风分中西方，也分具体的历史时间节点，可以根据主题选择。

风格选用原则：

一、符合产品调性

二、顺应设计趋势

三、具有鲜明特色

4.3 基础层：

确定好活动风格后就是打造活动的基础层，活动最基础的就是配色、字体、图形定下了整个活动的基调，而动效声音则拉开了活动运营的体感纬度。

配色：不同的主题色和配色对整个活动的氛围和用户的心理感知是不同的。除了常规的《色彩心理学》知识（这里不做展开），由于人们庆祝节气的习俗，衍生到活动运营还跟时令节气、季节、传统节日、新兴现象级节日（如双十一、618等）有关；值得注意的是运营活动虽然相对有独立的闭环，却是产品不可获取的组成部分，因此活动运营的风格需要与产品气质、核心品牌理念一致。比如工具类APP，基于色彩感受，将主要颜色进行延展并融入整个活动中，突出活动科技、智能的视觉感受；电商APP通常比较注重买卖氛围，喜欢大红大紫来塑造商场大卖场的感觉，刺激用户的购买欲，而金融APP更偏于冷静克制，留白较多，颜色使用也不会过于花哨，有些还比较忌讳使用绿色（这个跟用户喜欢涨的心理有关）。

字体：字体的使用一是需要体现活动特色，二是注意字体的版权。好的字体设计可以提升整个活动的画面质量，尤其是标题可以结合主题重点设计，体现活动特色，吸引用户注意。主体内容可以用一些免费商用的字体。整体字体的使用不要超过3种，过多的字体会使画面感受不高级。

图形：图形分为大块面图形和点缀性图形，大块面的图形使用可以很好的起到第一眼营销的作用，比较适合创意图形；点缀性图形比较适合提升活动的氛围，提升局部的质感，还可以给人一种润物细无声的精细感。

图形的选择可以从这几个方向入手：

a、风格角度入手：使用具有风格特色的点线面的几何图形，如孟菲斯风格。

b、品牌、ip、logo基因图形：品牌图形、ip、logo是最具有产品视觉识别性的，从中提取品牌基因图形，即简单，又可以有效的与产品品牌挂钩，抓住用户心智塑造品牌认知。

c、选用主题活动的关联图形：从主题的联想衍生去创造符合活动的图形，将衍生图形重新结构化成为活动的主题标示性图形。

动效声音：常规活动运营的动效主要是用在关键按钮、操作引导、页面转场、获得荣誉、点睛小元素上，主要是为了吸引用户关注提升转化率，同时提升用户的愉悦度和体验感。与游戏结合的运营活动动效发挥的空间就更大了，但是不能单纯的理解为动效，游戏更是一个动态交互的过程。游戏中动效和声音的使用，能拉开了活动运营的体感纬度，比如鲤鱼跳龙门就是利用了游戏、动效、声音、点击形成视听触的三维立体感受，鲤鱼吃金币的游戏过程惟妙惟肖，又简单易操作，成为金融游戏的典范。

五、数据与策略思维

5.1、不同时效性的运营优化方案不同

运营类活动中数据跟踪与策略思维是保证活动效果最大化的有效手段。根据运营目标，提取关键的转化点进行埋点，获取CTR（转化率)。运营活动从时效性来分可以分为：常驻性运营活动和时效性运营活动。常驻性运营活动我们可以使用abtest去选着更优的设计方案，甚至是隔段时间替换方案，对比分析数据进行方案选择和优化，这个跟产品优化逻辑类似。时效性运营活动使用abtset的成本太高，所以一般是在上线后根据埋点数据监测来调整相关设计元素、局部交互、文案等来提升CTR（转化率)。

目标——策略——埋点——跟踪数据——修改

1、常驻性运营活动：使用ABTest选择更优方案

2、时效性运营活动：根据埋点数据监测调整相关设计

5.2、上线后运营优化

1、提升曝光率

内循环中多渠道触达提升曝光率：app、pc端、微信公众号、短信召唤、线下海报、应用市场等；外部渠道投放：针对不同用户细分在用户感兴趣的外部热门渠道投放活动，吸引用户参与活动。

2、提升链路转化

1）、关键节点文案优化

比如在某证券活动中，我们针对线上数据结果做了以下优化（仅部分）：

a、跑马灯文案激励，时时播放中奖名单营造活动热度，提高活动可信度，激发用户从众心理。

b、完善邀请引导，对于新手用户以及没有邀请好友在顶部进行二次提醒，以大奖刺激用户参与邀请。

c、用户进阶游戏文案提示完善，对不同等级用户给于不一样的红包激励。

d、排行榜展示策略调整，前几百名瓜分大奖的文案优化与曝光。

2）、发放策略调整

根据活动领奖数据分析，通过管控台灵活配置各个阶段红包金额与数量，提高不同阶段的用户转化。

3）、断点用户召回

通过push、短信的形式对活动用户分层分类在合适的时机触达，吸引用户再次参与。

4）、裂变路径优化

a、展示榜单（可刮分大奖）最后一名数据,展示邀请人数，激励榜外用户冲刺榜单

b、已接受好友再次填手机号验证,引导至换起app页面

c、绑定邀请关系后,增加弹窗引导用户

3、优化效果对比与总结

根据优化前后的数据进行对比分析，把有效提高数据的策略点总结出来，可复用在其他项目。

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

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

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

由于产品性质和业务阶段，身为B端设计师更加需要贴近一线场景，深入了解业务逻辑和用户使用场景，在不断深入的用户调研中，也收获了一些心得和经验，所以和大家分享一下我常见的三种用研方式，相关物料可以通过文章底部的原文链接得到获取方式

一、认识用研

1.1设计师为什么需要了解用研

我们对产品进行设计探索的本质是利用已知信息去挖掘未知信息，最终利用获得的信息进行决策的过程，信息的完整、准确程度与判断力、等共同决定了决策过程中错误决策的概率高低

用研的过程就是一个信息的收集与处理的过程，在信息不足时我们可以通过同理心来“侧写”用户心智推测信息，这一点从事C端设计的小伙伴应该感同身受，但由于B端用户画像与设计师自身往往偏差较远，单纯的通过同理心来感知用户心智的门槛和难度较大

此时我们就需要通过用户研究的手段获取更准确更完善的信息，通过用户研究，设计师可以贴近一线场景，了解用户的真实场景和工作诉求，切身感受到产品的业务逻辑和使用链路，以便我们进行更准确的设计决策，同样的，这样也可以让我们的设计方案在讲述时有理可依，有据可靠，更容易获得上下游的信任

接下来是我对于可用性测试、用户访谈、问卷调研的学习总结，简单与大家分享，大家有什么见解也可以互相交流

1.2用研的纬度

这是《赢在用户》书中经常被人用到的用户研究二维分布图，这幅图很好的展示了用户研究的纬度，横轴是研究用户的结果；纵轴是理解用户的方式，行为、态度，即观察用户做什么、听用户说什么，因此，用研主要通过定性调研和定量调研分别关注用户的行为或者态度

那么什么是定量，什么是定性，行为和态度之间又有什么样的关系，在正式进入用研工作之前，有必要对这四个方向进行一个简单的了解

定性与定量

定性与定量是用户研究中常用的两种方法，两者之间性质和分析方法有一定的差异

• 定性研究主要回答“是什么”和“为什么”的问题，是对种类或者质的差异的分析，说白了就是通过经验、逻辑、同理心等非量化的方式去分析【主观】的信息

• 定量研究，除了能告诉我们是什么以外，还能告诉我们“是多少”，一般指具体【客观】的数据信息

通过上述示意可以发现，定量更加在意得出的数据，至于为什么会得出这个结果，就需要通过定性数据去验证，因此定性分析在一定程度上会更偏向于阐述某件事物的意义

二者是站在不同的角度看待问题——定量关注数，定性关注人，在实际工作中定性与定量往往相互配合，例如通过定量挖掘关键数据，再用定性剖析原因，最后定量进行验证，两者结合以求得研究效果的最大化

行为和态度

行为主要是指用户的某种动作，比如操作时的点击、滑动，以及视觉的关注点、肢体语言等，这些都是下意识，无需思考的行为数据，这些数据可能与信息层级、传递效率、操作时长、交互链路等息息相关，观察收集这些行为数据的最终目的是了解用户为何按照自己的方式进行操作，与我们预期设想的路径有什么不同之处，进而探究是什么促使用户做出的行动

态度则是用户的主观想法或者情绪，情绪会诱发用户产生一系列行为，例如操作遇阻时的焦虑，对产品体验不满的愤慨或者Aha moment时的惊喜这些都反映出了用户对于产品当下体验的一个态度，关注这样用户态度就能收集到产品体验的信息，所以，用户行为导致了某种结果，态度则揭示了影响行为的根本原因

在了解了定量与定性，行为与态度之后，我根据目前工作中常用到的可用性测试、用户访谈、问卷调研，并对每个方法的适用场景和进入调研的关键动作进行详细分析

二、如何选择用研

在开始进行用户调研之前，我们需要根据具体情况确定调研形式，以便实施后续的展开工作，根据用研目的、产品设计阶段、频次、所需样本量和成本等多方面因素进行考虑，选定适合当下情况的调研方式

三、用研执行关键动作

A. 可用性测试

1.准备阶段

1.1明确测试目的

首先应该以目标为导向，确定需要测试的产品是什么，想要验证什么样的结论或者达到怎样的预期，是为了发现产品或原型中可用性的问题，还是借此与竞品进行有效性、效率、满意度的比较，或是对某些功能点进行测试

1.2设计测试任务

在明确测试目的后开始设计测试任务，测试任务是可用性测试的核心内容，需要根据已经确定的测试目的结合用户在实际使用过程中可能存在的场景和需求，将任务场景化，然后对复杂任务的整体流程进行拆解，列出任务列表，以此来编写任务提纲

任务包括场景，操作和具体目标，设计的任务要有代表性，对应的功能或模块必须是功能使用的典型场景、尽量模拟用户真实的使用场景；在任务描述时做到语言简洁，避免指定的操作或引导用户，若任务流程较长，可以进行拆解形成多个用户触点，但触点操作不需要告知用户，仅在用户操作时进行观察即可

1.3 设定衡量指标

在设计好测试任务后，我们需要为任务匹配对应的可用性指标，目的是为了通过指标反应测试内容的可用性问题，帮助实施者有重点的进行观察和记录，还可以结合ASQ量表帮助测试者对每个测试任务的完成情况和满意度进行反馈

可用性指标主要包括有效性、效率性、满意度；这三者构成了衡量指标的一级指标，而每个一级指标下还包括更加细分的二级指标及衡量方式和标准，这就构成了可用性指标对照表；我们依照可用性指标对照表对每个任务的重点有了基本的概念，并且可以根据具体任务描述和衡量指标得到测试记录表

现在我们对每个任务的可用性指标有了基本的概念，但是可用性问题除了从实施者角度去观察用户行为和结果，还需要帮助测试者结合任务进行自评和反馈

而在帮助测试者进行任务反馈时，需要将有效性、效率性、满意度站在测试者的角度进行更加通俗易懂的拆分和信息传递，并且能够做到量化分析，这也就是ASQ评估量表的作用和目的

有效性可以理解为任务的完成情况，即成功完成、求助后完成，未能完成

效率性则是针对特定任务，观察其完成时间是否在正常范围内，其任务完成路径是否符合标准路径，是否存在偏离和犹豫的地方，在进行定量研究时常用指标有任务完成效率、理想路径偏移率等

满意度则是用户自我报告数据，包括任务完成难易度评价、任务完成满意度评价、及评价原因

根据场景描述、测试任务、节点反馈和ASQ评估量表，我们可以得到“任务卡片”，“任务卡片”可以帮助用户快速进入角色，明确内容，量化反馈，在每次任务完成后，将测试者所勾选的ASQ选项对应的分值相加，便可以得到任务评估分值

1.4准备测试脚本

可用性测试一般情况下需要两人协同配合进行，通常一人安排任务鼓励用户发声，一人观察记录，由于涉及内容较多，成本高样本含量低，对被试用户进行的活动任务也比较复杂且环环相扣，所以为了保障测试任务更好的实施，一般情况下会准备一份较为完整的测试脚本以供团队更好的配合

一般测试脚本包括自我介绍、访谈预热、测试规划、测试任务、量表问卷（可选）、结束语、记录文档、相关文档

1.5准备测试原型

1.6招募用户

用户可以大概分为新手用户和专家用户两种类型，当然也可以进行更精细的划分，例如（萌新、高浅、活跃、专业）在招募时为了结果可靠，应避免产品设计相关人员的参与，选择有代表性的用户，其中真实的产品目标用户为最佳，测试者不宜过多，一般5名左右就够了

例如调研XX产品的直播教室的可用性问题，就需要招募已在平台入驻且售卖直播课的老师，在招募时还需要进一步的筛选，如果招募的5名老师都是长期使用平台产品进行直播上课，用户对于产品功能足够了解，关注点会与新手用户会产生较大的差异

1.7准备场地

包括预约测试场地、记录设备、分配主测员和观察记录员、准备相关话术及活动礼物

• 测试场地：一般选择安静明亮的房间/会议室进行，访谈者和用户最好呈90度的座位

• 记录设备：安装测试产品的电脑、手机；记录设备可以使用录音笔、相机或DV。设备要稳定，电量充足

2.测试中

2.1暖场

在了解用户情况和布置任务前，不要太直接的进入测试氛围，营造一个相对轻松的交流环境。先聊点轻松的话题，“您从哪里过来的呀”“平常工作忙不忙”等问题，缓解气氛，把用户带入测试场景。可和用户聊聊被测产品相关的小问题，平时怎么用的？一般什么时候用？感受怎么样等等

2.2布置任务

向测试者发放任务卡，结合任务卡中的角色和使用环境对任务进行简单的介绍，如果是专家用户任务就不用过多描绘场景，可以具象更具体的任务——“上传一门新的课程、将课程分成基础班和进阶版分别售卖”等等

2.3观察并记录用户使用过程

这个过程观察记录和引动测试者随时的发声很重要，与其他用研方式不同的地方在于可用性测试可以了解到用户在操作时的想法和行为，用户的发声思考可直接影响可用性测试的效果和结论

我们可以适当引导用户进行思考发声，甚至可以为用户做一些简单的示范，例如 在新建时，可以说“我准备新建一门课程”，“我正在寻找建班功能，我现在遇到一些问题”等等，将自己操作时的想法表达出来，不需要刻意去思考，这有助于主测员去了解测试者的想法和感受

每个任务完成后，通过“任务卡片”重点回答测试者任务的完成情况，遇到的问题，询问测试者的态度和感受，还需记录任务完成的时间；与任务不相关的反馈可以记录在备注中，而在记录时尽量采用词组、短句的快速记录方式记录核心内容，整理后作为优化任务帮助产品进一步提升可用性和易用性

2.4进行量表问卷

ASQ量表

上面在介绍可用性指标及任务卡片时我们有提到ASQ量表，其主要涉及有效性、效率性、满意度3个方面，安排在用户完成单个情景任务之后，这时用户对于任务流程的操作感受是最明确和清晰的

SUS量表（可选）

SUS量表一般在相对完整产品整体的大型可用性测试后才会使用，因为一般的中小型测试任务比较集中和针对，用户无法感知整个系统，量表针对测试设置10个问题（有效性、效率、满意度），包含5个选项：1分（非常不同意）、2分（不同意）、3分（一般）、4分（同意）、5分（非常同意）

在布置问题时，奇数问题采用正面阐述，偶数问题采用反面阐述，以此来确保用户评价的可靠性

单个测试者提交量表后，我们需要计算量表分值，奇数项计分采用“用户打分”-1，偶数项计分采用“5-用户打分”，由于是5点量表，每个题目的得分范围为0-4，共10题，所以最大值为40，而SUS的范围在0-100，所以需要将所有转换分相加后乘以2.5，即可获得SUS分数

3.测试后

3.1问题归类分析

简单测试直接根据发现的问题优化设计即可；如果目的是用于讨论和汇报，需要对记录内容进行整理和输出，这时需关注问题的出现频次、优先级和用户反馈，按照问题维度分类，将不同用户暴露的相应问题进行合并，罗列问题所对应的功能点、可用性指标、用户比例、用户反馈及相关现场记录文件，之后基于问题对业务和体验的影响划分优先级并且标出对应的PM同学，最后针对这些问题给出优化建议

问题优先级的划分方式

通过前期记录观察以及录音录屏我们可以发现用户在任务测试中遇到的问题，根据问题对任务完成度的影响，我们可以划分为P0（紧急问题）、P1（重要问题）、P2（次要问题）的方式对问题进行优化和排期

• P0：用户遇到阻力且无法解决，未能完成任务的问题

• P1：用户遇到阻力且反馈频次较高，在求助后完成任务的问题

• P2：用户遇到阻力但可以自行解决，完成任务但感到不顺利的问题

3.2输出测试报告

较大的可用性测试在得出结果后需要向团队内的成员分享，所以需要进行一次报告输出做到内容对齐，一般包含整体概括、重点发现、项目背景、测试过程、测试结论、优化方案几个模块，具体汇报形式是不受限制的，一般文档形式输出较为高效，keynote汇报从内容和形式上会更加丰富

• 整体概括可以将测试背景及测试结论简单的阐述，其中测试背景包括（项目背景、测试内容、施测情况），测试结论包括（测试结论、优化建议）

• 项目背景就不必多说了，将业务背景和测试目的进行简单概括即可

• 测试过程包括准备阶段（如何招募用户、招募了多少名、用户的基本信息和类型；有哪些测试任务、如何进行测试和记录形式）及测试阶段（本次测试安排的任务、设计的量表问卷、现场的录像照片）两个环节进行展示

• 测试结论需要将暴露的问题进行问题描述，结合整理的文档表格详述问题未读和用户反馈

• 最后，结合问题提出完整深入的优化建议和解决方案

3.3后续跟进方案

• 探讨解决方案：协调产品、设计等多个角色来探讨合适的解决方案，要注意，设计时要思考新方案是否会带来新问题，并再次通过可用性测试来验证新的方案。

• 持续跟进：了解项目结果的落地情况；已改进的问题或遗留的问题可在下个版本的测试中继续跟进

B. 问卷调研

在进行问卷调研之前，我们需要认识到问卷调研包括两种调研类型，定量调研与定型调研，实际上大部分的问卷都是定量调研，需要大量的用户样本，在收集问卷后需要分析数据占比来验证用户想法，另外小部分就是定型研究，一般原因是因为用户样本量较小，通过小样本量来研究产品的可用性问题

1.问卷前的准备

1.1明确调研目的

问卷调研中设计者并不直接接触用户，所以在问题的深度和广度上是有限的，一份问卷不能解决多个问题，通常会围绕解决1-2个核心问题去研究，在设计问题之前需要明确此次问卷调研的目的，然后围绕这个目的去思考各种问题，通过怎样的问题达到怎怎样的结果

例如通过思考和确认，针对我们这款由0到1的知识教育平台型产品，其调研的目的主要在于

• 需求验证，包含对用户进行市场分析、了解现状、发现问题，从而提供解决方案，再到两端用户是否满意现在的解决案

• 用户接受并付费的意愿如何。收集用户信息、挖掘分析用户的付费意愿以及付费习惯

问卷的目的一般可以分为六个方面：

1.2目标用户分析

对调研用户进行分类是较为重要的环节，用户类型不同，问题内容也不同，只有在不同角度不同用户下设计的不同问题才会获得有价值的结果

这种情况在问卷中还是比较常见的，例如我们填完问题一后，根据选择的不同，可能会跳转到问题三或者问题五，这就是问卷设计者根据不同用户分类进行的多种问题设计

例如在收集知识平台满意度和相关竞品使用习惯时，个人机构和组织机构的视角是不一样的，B端客户和C端消费者的视角也是不一样的，所以在问题设计时需要分开对待

问题根据用户分类设计的好处在于问卷后期可以快速验证产品的用户类型和比例，提高调研质量和数据可信度，便于后期对用户进行更加深入的调研

举例

结合上面调研的目的及用户分类，以此我们思考在问卷的设置方面：

对于B端（老师）来说，首先要了解的是客户目前是否有在使用我们提供的服务、什么时候会使用、使用的频率是多少、目前使用的体验如何、有没有遇到什么问题、有什么建议、对我们提供的解决方案是否愿意接受

对于C端（学生）来说，首先需要了解的是用户基本信息，是否使用过课程相关的服务，用过哪些竞品、吸引用户的点在哪等等

1.3内部需求对齐

当需要有问卷调研的需要时，首先应该与团队内部各合作方对齐调研意向，一方面是为了避免过量的问卷投放打扰到用户，另一方面问卷调研属于团队项目，在团队内部充分讨论调研目的后或许你会了解到各业务方当下最关心的用户问题从而调整调研问卷的内容甚至得到更好的解决办法，这样一来才能将问卷调研的价值最大化

例如教育平台侧在新版本上线前为了调研售课老（机构）师对平台使用的满意度和深层次的需求问题，那么在发起调研之前，需要跟产品、教研、客服等业务合作伙伴对齐需求

2.设计问卷

2.1划分问卷模块

设计具体问题之前，我们需要预设几个问卷的模块，通常围绕几个类型：用户类、行为类、产品类、态度等，在得出完整的问卷之前，我们不需要考虑问题的先后逻辑是否合理，先根据调研目的和模块类型进行问题穷举，当用户模块相关问题写完后再继续写下一个模块的问题，直到所有模块的问题都已经设想完毕，在对问题进行重组

用户类：收集用户基本情况，方便我们了解用户群体，比如：职业、学历、团队构成

行为类：了解用户的行为或者与围绕产品相关但不涉及产品本身的问题。比如：有没有在其他平台入驻、售课时视频课比较多还是直播课比较多

产品类：了解用户直接与产品相关的体验问题。比如：对产品印象如何、一般使用某产品的哪些功能、频率怎样、还用过哪些竞品、喜欢哪些功能

态度类：用户对产品的看法。比如:评价、好感、想要的功能；尽量避免提一些无法判断、没头没尾的问题，一方面对产品优化没有帮助，另一方面会降低用户的的期望

2.2衡量问题类型

问卷的问题形式是多样的，题目类型主要有封闭/半封闭问题、量表式问题、开放式问题组成，需要根据具体目的来选择相对应的问题

封闭/半封闭题型的选择在于能否将答案穷举，避免出现用户因为没有合适的选项而随便勾选答案的情况

量表题型在答案上有明显的程度高低区分，设计者对该问题有进行统计的需求

在问卷中应尽量避免较多的开放问题，一般在针对某种方向/某个定性的问题做预探索时使用

这里只对问题的类型做简单的概述，具体的形式是多样的，例如选择题可以有单选、多选、图片选择；量表题除了打分之外，还有排序和点数分配等其他形式

2.3问题重组

在得到具体的问题后，我们需要对问题进行重新编排，通过改变问题的前后顺序来保证用户在可控的情况下进行真实的问卷回答，除了按照问题的难易度之外，还需要根据问题的属性由浅入深的重组问题

例如问卷开始先安排过滤题用于过滤用户，识别用户是否符合问卷的目的来保证问卷数据的质量，然后按照暖场型问题、渐入型问题、高难度问题、敏感问题来对问题进行重组，当然这些顺序并不是固定的，需要依据具体的问卷内容进行调整

关于过滤问题：

用户在实际问卷回答中，受到各方面因素的影响有很多，例如有时用户出于自我暗示、自尊心或者时间紧张状态下，很难根据自身实际情况完成问卷调研，而是随机挑选或者作出相反的选择，这种问卷在回收后会对定量分析造成干扰，所以我们需要依据问卷重要程度，安排适量的过滤题来避免此类情况的发生

比如在对于关于产品改版的满意度调研中，向用户询问有关产品功能的问题

如果用户回答“某某功能”，但在是否知道时选择了否，或者使用时长很久，但却不知道某某功能时，在后期数据中，可以将这部分无效问卷去除

• 问题注意事项

3.问卷投放

3.1问卷评审

一切准备就绪，是不是准备投放问卷了？别急，许多问卷在投向用户之前，往往会忽视通过内部手段进行问卷自评，通过问卷自评可以发现这份问卷有没有偏离最初的调研目的，你所设想的问题用户是否可以正确理解、问卷是否有可优化的空间等

一般自评包括3个环节：问卷自审、问卷内审、问卷内测

• 问卷自审

问卷设计完毕之后，需要根据最初确定的调研目的对问卷进行自审，可以站在用户的视角对问卷进行第一次填写，确定问题是正确有价值的，是有其他选项，也可以估算回答问卷所用时间，问题中的词语是否能被用户理解且没有歧义等

• 问卷内审（可选）

不少公司内部有设立专门的用研团队，在确立调研需求初期就应该与需求方深度绑定，有明确的需求认知，有句话叫当局者迷，邀请用研团队参与审查可以从专业角度把控用研目标，评估问题是否能被用户接受等，他们可以从一些不同的角度发现问题

• 问卷内测（可选）

内审之后，可以借助产品的代表性用户（一般3-5人）进行问卷内测，通过观察填写情况来检验问卷设计的合理性，例如观察答题时间、用户类型与题目是否关联等等，确保证问卷上没有其他问题

3.2预计采集样本量

内测完毕之后，就可以向用户投放问卷了，为了避免给过多的用户造成打扰，我们需要根据产品的用户数量判断问卷的投放数量

一般没有明确规范多少用户投放多少问卷，基本都是自己判断，一般如果总用户量不足30，需要至少覆盖50%（15个）；如果总用户量30-100，30人以上就可以；如果是总用户量100-1000，覆盖20%-50%就可以。

3.3选择投放渠道

我一般常用投放渠道有：1）飞书推送；2）站内公告；3）其他内部资源

问卷调研基本分为线上调研，线下调研两种方法，线上通常是问卷投放或者电话询问的形式，线下一般与用户访谈相结合，做到定性定量相结合；选择投放渠道时，一般根据调研目的、投放预算、预计采集样本量、统计分析成本来进行判断

4.数据清洗产出报告

一般用研团队会使用专业的解决方案快速作出数据分析，比如SPSS，而设计师在实际工作中很少会接触到此类工具，因为此类视角下探索的方向和内容更加具体，变量在可控范围之内，不太需要复杂的分析模型，较为常见的更偏向Excel或者问卷平台自带的分析功能，所以我们可以对分析思路做一个简单的了解

4.1数据清洗

前面在问题设计时我们有讲到筛选题相关的内容，加入筛选题的目的就是在数据分析前便于我们将异常问卷剔除出去，保证最终结果的准确性，除了观察筛选题的选项之外，我们还可以根据问卷填写时长、量表打分规律、问卷填写完整度等几点进行问卷筛选

4.2问卷分析

• 看整体

还记得我们设计问题的第一步划分问卷模块吗？模块通常围绕几个类型：用户类、行为类、产品类、态度等，在分析问卷时可以基于这些结构得出一个较为整体的情况分析，例如用户群体结构（用户类）、存在的问题和新的诉求（用户建议）等，通过对比相同角色的回答，找出共性的问题和信息

• 看差异

在得出整体结论之后，我们可以通过差异分析深入挖掘更多信息，例如观察不同用户角色对于产品的建议或者评分，会发现用户角色对于产品的建议和需求是不同的，这种分析方法重点在于找到两个可能存在关系的因素，通过对比不同角色的回答，找出差异和影响因素，根据上述举例就是将（是什么）（怎么样）进行差异对比

• 问题归类

根据反映问题的模块对用户问题进行归类分析，写明用户的问题描述和具体模块，并且对后续优化提供解决方案

4.3产出报告

问卷报告一般包含调研背景、问卷回收情况、调研结论（功能优先级、用户反馈、数据展示等）、整体评价（功能评价、体验评价）、等，分析时从数据出发找出差异，分析原因，给出结论，在具体汇报时可以按照先结论后具体问题的方式呈现报告，同时可以结合数据提供相对应的解决方案

C.用户访谈

1.访谈前

1.1明确访谈目标

明确访谈目标，可以保证访谈内容在大方向上是一致的，例如调研班主任实际外呼的场景及外呼时关注的信息，在访谈时就不会去问关于主讲排课的问题，也可以防止访谈过程中遇到富有表达欲的用户偏离主题，在访谈过程中难免有用户兴致勃勃的谈论自己对产品的看法，在这种情况下，拥有明确的访谈目标可以保证深陷用户的情境中不迷失访谈方向，保证访谈的最终结果是有价值的 

1.2确定访谈类型

根据不同的访谈目标，可以分为三种访谈类型：

• 开放式访谈

在围绕的主题和问题上都是开放的，没有固定的问题也没有固定的答案，采访者可以根据受访者的表现进行相应的问题补充，受访者可以充分表达自己的观点和意见，氛围最为轻松，接近人们日常的对话，适合进行定性研究。但即使是选择了开放式访谈也需要事先准备访谈提纲来确保此次访谈是有效的

• 结构式访谈

有严格的问题顺序，采访者必须按照顺序和题目提问，受访者回答的答案都是固定的A、B、C、D，这就需要采访者必须有一个很清晰的目标，在问题的设计上要仔细推敲和打磨受访者可能回答的形式，当然，再缜密的设想在实际访谈中也会有意外，所以也会设置一些开放性的问题让受访者可以自由的进行表述，并给出更加开放和深入的回答，适用于定量数据的研究

• 半结构式访谈

是实际工作中运用的最多的一种形式，在形式上是结构式与开放式的结合，包含了固定的的问题之外，也设置了开放式的问题，根据访谈时的受访者的实际情况进行问题的增减，适合定性+定量研究

按照访谈的途径来划分，又可以分为线上和线下两种，在受访者不方便的情况下可以进行电话访谈的方式来进行，但是如果访谈包含较为复杂的经历和过程的询问，线上访谈比线下访谈要逊色不少

1.3设计访谈提纲

明确访谈目的与访谈类型后，就要基于访谈目的，拟定访谈提纲，访谈提纲是方便与用户交谈过程中抓住核心，保证访谈高效有序进行的关键，就类似一个标准流程，保证需要研究的问题都可以包含在内，访谈提纲一般包含五个部分，分别是访谈目的、开场白、提问访谈、用户演示、结束语（基本信息、过往经历、产品感受、流程体验、竞品体验），其中提问访谈可以根据具体的访谈内容展深挖细节或者发散问题

提问访谈是提纲中较为重要的一环，问题设计要由易到难，由浅入深，由边缘到核心，在开始阶段设计一些简单的开放式问题来营造访谈的氛围，这个过程中可以了解用户的基本情况或者对产品的使用情况，等访谈向一个方向聚焦时，再逐渐收缩问题范围，逐步追问核心问题

设计好的问题还需要整理成访谈记录表，在进行访谈、时，一方面按照访谈清单大纲尽可能的进行脱稿提问，另一方面则需要记录用户对于问题反馈，记录问题时记录员最好记录用户的逐字稿，以便于后期进行记录整理时不与用户表达产生偏差

1.4招募用户：

用户招募是较为重要的一环，承接访谈前后两个阶段的关键节点，用户招募准确，后面的访谈才有实际意义，招募哪些用户是由访谈目的所决定的，一般招募环节分为三部分

• 1.41.明确目标用户

招募用户的选择是由访谈目的决定的，不同的访谈目的所招募的用户是不一样的，一般按照使用产品深度的纬度来划分用户

• 核心用户：产品中较为活跃的用户

• 边缘用户：产品中即将流失或者已经流失的用户

• 潜在用户：当前并不是产品用户，但在产品定位的用户群体中

而访谈目的一般有两种情况

• 研究产品所存在的问题，例如研究一下最近用户活跃度为什么下降

• 研究产品目标用户所存在的需求，例如研究用户对新功能的满意度

所以如果访谈目的是发现产品现存的问题，那么应该去寻找核心用户，他们那对于产品有着明确的认知；但如果为了增长，则应该寻找边缘用户和潜在用户，他们会告诉你他们需要什么，你需要做什么

• 1.4.2多渠道招募

面向内部用户的产品进行用户访谈时，一般直接找对应访谈者的leader或者pm沟通即可，而在对外产品时则需要根据确定的筛选条件进行用户招募工作

核心用户的招募相对边缘用户较为简单，一般可以通过行为日志数据、登录时留下的联系方式、产品用户群或产品内运营推送推送来招募核心用户

潜在用户由于对产品接触较少，一般通过问卷、外包招募、熟人推荐的形式进行招募

• 1.4.3验证目标用户并邀约

在得知用户是否愿意接受访谈后，需要再次验证这些用户是否真的符合样本特征，要注意的是，筛选访谈对象要注意平衡，避免同一类型的对象占了过多比例，导致访谈结果不全面

例如做一次关于学习平台APP的功能优化访谈，就要避免对象大部分是管理者、80后的情况，因为用户不是目标用户、80后用户的需求频率不大

很显然，90后/95后/00后、大学生/刚进入职场的职场新人才是我们的目标用户，那就根据这类人群的角色模型来筛选邀约对象

1.5准备场地和物料

• 场地选择

用户访谈的可选场地有很多，大部分是请用户到公司来使用公司的会议室，或者有的公司拥有休息区或者共享空间，环境较为舒适和温馨，也是可以的

需要注意的是，场所的选择也会对访谈有些影响。应该尽量选择温馨舒适的环境来打消用户的紧张感

• 物料

采访者需要提前准备好物料，包括访谈记录表、访谈提纲、录音设备；访谈时可以一人负责提问，另一人负责记录，在使用录音设备对受访者进行录音时，需要提前告知并取得同意

2.访谈中

2.1开场白

在一切准备工作ready之后，可以进行访谈了，访谈中难免遇到一些不善表达的用户，如果一开始就切入正题进行访谈，访谈者可能在紧张的状态下无法与采访者达成信任关系，气氛就会有些尴尬

所以需要先进行简单的寒暄和自我介绍让气氛轻松起来，还可以简单介绍访谈的背景、流程、内容、时间，告知受访者今天只是探讨问题，没有对错之分，所以希望畅所欲言，不要掩饰真实想法

2.2访谈并记录

还记得咱们前面准备的访谈提纲吗？在进行简单的暖场之后，我们可以先对用户的基本情况和使用经历进行询问，从职业、流程、爱好等基础信息作为切入点，为用户营造特定的使用场景，然后再进入访谈环节

访谈时，抛出问题的目的不仅仅是得到用户的一个结论，而是希望用户借此将自己的体验和前因后果告诉采访者，然而很多时候，用户告诉我们的信息都比较浅显，比如“我想要个xxx功能”“我觉得xxx挺好的”，这时我们需要对用户想法刨根问底，从而证实用户说的“想要xxx功能”是否合理，或者看能否想到其他解决方案

• 如何刨根问底？

1、结合梯子理论，通过问用户以下4个层层递进的问题，来了解用户需求和用户心理

• 属性：对于这个产品，你最在乎什么功能？

• 利益：你为什么在乎这个功能，它可以解决你什么问题？

• 心理：解决这个问题，可以达成你什么目标？

• 价值观：你为什么在乎这个目标？

2、情景再现

回答提问时，用户很少会去主动联想具体使用场景下的体验问题，比如当你问“上次旅行去哪玩了？”用户大概率会回答“去环球影城玩，人特多排队两小时，玩了个什么叫鹰马过山车，20秒，下次去绝对买优速通...”并不会告诉你怎么去的、以什么标准定的酒店、为什么选择这个项目/地点，等等这些更想要了解的问题告诉你

我们需要帮助用户在基本体验之上还原体验的动机，引导用户对使用场景进行还原，了解用户当时场景下的行为，再针对场景和行为去挖掘用户产生这种体验感受的动机

3、鹦鹉学舌

复述的时候，有时用户还会根据你的复述追加一些他当时没有想到的关联信息，比如“你的意思是。。。我的理解是。。。对不对？”这样可以避免双方理解的偏差，还可以总结提炼用户的观点。这样又可以挖掘到更多内容

2.3结束语

在访问结束后，我们可以与用户一起快速回顾访谈的内容，如果用户有提出一些意见或者建议我们可以再复述一遍进行查缺补漏，并将事先准备好的礼物或者酬劳送给用户表示感谢，向参与度高，善于沟通的优质用户表示保持联系，留下联系方式方便后续进行可用性测试或者再次访谈

3.访谈后

3.1整理访谈内容

一般是在两个用户访谈之间的间隙进行笔记的整理， 将用户的口头语言转换为书面语言，这样一方面减少后续因访谈内容大量堆积而形成的整理压力，另一方面可以根据上一场访谈进行复盘，从而对下一场即将开始的访谈进行内容调整，在整理时我们需要将重点放在用户的提出的问题和负向反馈上

3.2问题归类分析

整场访谈结束之后，我们会发现用户会提出各种各样的问题，我们需要依据问题的纬度进行分类，将不同用户遇到的相同问题进行归纳

问题归纳主要包含两个部分，主要问题和具体问题，主要问题就是访谈中出现的较为明显的反馈问题，例如“超7成用户对首页推荐的内容并不感兴趣”，而具体问题则需要明确用户反馈原因、对应的功能模块和问题类型

3.3产出报告

访谈报告是至关重要的，一方面可以和大家共同讨论发现用户真实想法，另一方面也方便产研团队根据问题关键点投入人力作出进一步优化，一般在访谈当天完成结论报告，时间有限是以关键结论为主，具体问题可以后续补充。访谈报告一般包含访谈背景、参与人员、用户信息、主要问题、具体问题、用户建议、优化建议

总结

本篇文章是我学习到的用户调研的三种方式，调研方式不重要，重要的在于如何理解用户需求，真正了解用户想要的是什么，无论B端还是C端，产品最终还是要服务于用户，作为设计师同样需要了解用户研究，只有对用户足够了解才能作出高体验质量的产品。

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

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

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