致数据可视化设计师-设备篇详解

各位数据可视化设计师们大家好，鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方，阿勇决定花一些时间去详细剖析一下关于这方面的知识，全部都是多年工作经验所得，绝对有料。

整个合辑一共有10篇文章，分别涉及到设备篇、风格篇、字体篇、色彩篇、组件篇、布局篇、版式篇、视觉篇、团队篇、技能篇十篇文章，具体的详细的展开来讲一讲可视化大屏设计的知识点。（我命名为可视化设计十要素）

同时也会包含一些工作中的同学们问我的一些问题以及我搜集的一些问题，将会以问答的形式去给大家讲一讲，如有不对的地方，还请大家指出，我们一起探讨进步！

文章较长，请广大读者仔细阅读，基本涵盖：设备信息，分辨率尺寸，大屏适配，投屏事项，掌握本文可应对日常可视化设计设备方面的知识。

LED屏幕

政府大屏主要以点间距去区分屏幕的精细度，点间距越小，造价约昂贵；面积越大越整体，造价越高。离屏幕越近颗粒感越强，设计效果也就越不清晰，LED显示屏表面不平整是导致LED显示屏图像失真的主要原因。LED显示屏表面粗糙度的好坏主要取决于生产工艺。

屏幕介绍：按照不同点间距进行分类，P1.25、P2.5、P3、P4、P5、P6、P8、P10、P12、P20（间距越小，图像越清晰，价格也越高，一般政府led屏基本都在P1.25-P6之间)。

最佳视距=像素间距/（0.3~0.8），这是一个近似范围。如LED显示屏P16mm，最佳视距为20~54米。

液晶拼接屏

拼接屏相比于点间距比较小的LED屏，价格方面会更便宜一点，拼接屏设计时最主要就是拼缝的处理，注意拼缝，设计时非必要情况下，都要跳过拼缝，尤其是“圆”这个造型。

拼接屏：46寸，55寸  物理分辨率：1920*N 1080*N（n代表屏幕数量），1.7mm、3.5mm 、0.88mm、0.44mm、无缝隙；企业常用（1.7mm 和3.5mm）

大屏拼接缝隙：设计时应尽量不要跨屏去设计，会使画面交叉，不重叠，尤其是圆形。

大屏拼接处理器

大屏拼接处理器主要功能是将一个完整的图像信号划分成N块后分配给N个视频显示单元，完成用多个普通视频单元组成一个超大屏幕动态图像显示屏。大屏拼接处理器输入信号数量和类型取决于用户需要，输出信号数量等于显示单元数量。

视频矩阵处理器

矩阵是将多路输入信号切换输出到多个显示设备，一般来说输入信号数量要大于输出信号数量。（我们想在9块显示器上同时监控100个摄像头传来的信号，就用矩阵来实现即可）

视频矩阵是指通过阵列切换的方法将m路视频信号任意输出至n路监控设备上的电子装置，一般情况下矩阵的输入大于输出即m>n。有一些视频矩阵也带有音频切换功能，能将视频和音频信号进行同步切换，这种矩阵也叫做视音频矩阵。

模拟视频矩阵的输入设备：监控摄像机、高速球、画面处理器等很多个设备，显示终端一般监视器，电视墙，拼接屏等（通常视频矩阵输入很多，一般几十路到几千路视频，输出比较少一般2-128个显示器；例如64进8出，128进16出，512进32出，1024进48出等）。

总结：矩阵只能负责信号的切换，不能处理，不能做效果。大屏拼接处理器功能十分强大，具备矩阵功能的同时，还可以实现任意开窗、漫游、叠加、场景保存与轮换。

液晶拼接屏的优势 - 拼接处理器预设场景

4*2大屏展示端，我们通过控制端，借由拼接处理器可以对大屏进行随意开窗，漫游，叠加，画中画等效果。在控制端拖动布局，大屏会随之改变布局，非常方便。下面我就借由我以前做过的一个项目帮助大家理解一下拼接处理器的优势以及如何设定不同场景。

如果你们企业还在因为屏幕适配以及尺寸问题而纠结，或者想展示：开窗，漫游，叠加，画中画等效果，毫无疑问你们应该选择拼接处理器，这比传统投屏方式更合适，更没有比例不对的困扰。

预设场景一

把控制端的分屏进行编号，接下来移动控制端对应的编号区块，就可以对大屏进行重新布局，图中展示的正是我们的预设正常场景。场景为居中布局，左右两侧为图表展示。

预设场景二：任意窗口布局

对控制端进行随机布局，将主视觉模块移动到左侧四块屏幕，图表都集中在右侧，由此我们就由预设场景的居中布局变成了左右布局，左侧为主视觉。

预设场景三：任意窗口漫游

可以随意的关闭大屏某个模块的漫游，通过控制端进行屏幕的显示以及不显示。

预设场景四：任意窗口平移

画面的任何一个模块都是可以进行平移操作的，我们将模块一和模块五可以平移拖拽到任何一个位置。

预设场景五：任意窗口叠加

画面的任何一个模块都是可以进行叠加到屏幕任何一处，还可以控制模块置顶和置底，非常灵活。

WEB端大屏

基于web网页端的展示方式，通过在web开发，有需要时会投屏到大屏上去展示。设备比例一定不能差距过大，比如16:9的投屏到32:9的大屏就不是合适，解决方案可以是外接一块1920的显示器即可。

此处要注意web端演示时，记得全屏显示，浏览器边框滑动条等可以不考虑，前端会做相应的浏览器细节考虑，设计按正常分辨率走即可。

触摸屏

触摸屏（Touch Panel）又称为“触控屏”、“触控面板”、“触控台“，是一种可接收触头等输入讯号的感应式液晶显示装置。

当接触了屏幕上的图形按钮时，屏幕上的触觉反馈系统可根据预先编程的程式驱动各种连结装置可用作控制端操作大屏，原理等同于ipad控制，只是载体不同。

设计规范以及按键反馈等交互体验与ipad类似。

滑轨屏

滑轨互动屏系统——又称为滑轨电视、滑轨播放等，通过特殊设计的机械滑轨控制装置，结合高清液晶拼接幕墙，实现对屏幕内容的互动控制。滑动到不同位置屏幕展示相关信息，包括图片、文字、视频等，是一种全新的互动展示形式，可与触摸同时使用。

虚拟沙盘

虚拟沙盘/数字沙盘就是用计算机通过投影仪或者LED大屏显示屏动态/静态三维显示：智慧交通、智慧市政、智慧农业、智慧物流、智慧停车、智慧公交、智慧公安、智慧交运等模型，这是一种高科技的模型操作员通过程序，可以随意调整沙盘的尺寸、规划区域、区域布置，快速展示多种全新的创意。

具有三维显示效果，并可以从不同角度观察创意模型，筛选创意方案。注意虚拟沙盘和实体沙盘的联动效果，实体沙盘为底，虚拟沙盘做效果叠加。

分辨率：物理实际分辨率

Q：原本设计尺寸是1920*1080，使用场景是PC端，同时在大屏中展示，尺寸为3840*1080，该如何适配？

A：首先我们需要了解适配最主要的痛点就是：灵活，复用性高，可延展。

围绕这几个点我们可以通过模块化开发去做，将每个模块单独开发。我们设计师做这种需求之前，就需要提前去构思，在设计各模块时，尽量使用可扩展和可自适应的图形，这样面对适配的时候我们可以通过移动，缩放这些模块，来完成适配。尽量避免二次设计以及开发，提升时间成本。

图形放大适配

图形位移适配

Q：如果是16:9适配非32:9是否也是这么去适配的？如果是特殊的形状或比例该怎么适配？

A：我们适配一定要记住灵活，减少工作量这些原则，如果不遵循这些原则，那么我们做适配的初衷就错误了。这样我们还不如直接就重新开发一套了。就好比我们通过控制端去控制大屏，如何用开发一套的时间去适配两个甚至是多个终端，这是我们需要注意的。当然考虑到一些实际情况，会有一定程度上的修改，但是一定是要从节省工作量去出发的。

场景一：拼接屏分辨率计算，已知某项目设备分辨率为宽高4*2拼接屏，设计稿我们该如何去定义分辨率？分辨率又是多大？

从命题我们可以看到4*2的拼接屏，我们可以通过一块屏幕为1920*1080去计算，那么通过计算分辨率应该是1920*4 &1080*2，也就是7680*2160，这样就计算出我们的分辨率了。

场景二：LED屏分辨率计算，已知某项目LED屏幕物理尺寸为宽15米，高4米，设备分辨率未知（可以支持4K或者2K输出），那么如何去制定分辨率？

工作中相信不少同学都遇到过这种只知物理尺寸而不知道分辨率的项目，那么我们只能通过计算大概的设计分辨率来出初期的设计稿件。

可能一：屏幕支持4K输出，既然支持4K输出，保证画面输出的清晰我们可以将设备的高度设定为2160

此场景下公式为：15/4=X/2160     X=8100    那么可以大概得出宽度大概为8100像素（只是我们通过计算大概得出来的）

可能二：屏幕支持2K输出

此场景下公式为：15/4=X/1080     X=4050  

重点来了，不要以为这样就结束了，我一直强调的可视化设计师为什么一定要在现场，为的就是方便各种测试。刚才我们只是通过计算得出的大概数值，此时我们可以在纸上画一个正方形，并投到设备上，如图。

• 结果一：如果正方形比例不变，设计尺寸无限接近于大屏实际比例；

• 结果二：如果正方形比例被拉伸，设计尺寸小于大屏实际尺寸；

• 结果三：如果正方形比例被压缩，设计尺寸大于大屏实际尺寸。

此处图片上主要是为了测试计算出来的分辨率究竟是拉伸还是被压缩了，通过这样的方式去测试设备大概的分辨率的大小比例，在我们产出效果图之后，也可以投射设计图的方式看看屏幕是否是完美适配，这种方法可以在未开发之前，尽可能确定屏幕对设计图的影响，从而避免对开发造成大规模修改。

注意：这样做也只是在不知道设备分辨率的情况下，去大概计算设备分辨率，仅供参考！

电脑直接投屏

使用场景：会议室，展厅等

等比例投屏，投屏电脑投到2*2大屏（4K）

投屏电脑支持输出4K分辨率，投屏电脑分辨率以3840*2160作为设计，投到4K拼接屏上，大屏会完美展示，并且画面非常清晰。

投屏电脑支持输出2K分辨率，投屏电脑分辨率以1920*1080作为设计，投到4K拼接屏上，只会以1920*1080进行输出，因为输出像素只能支持2K，也只是1920*1080的放大。

此处需要了解两个概念：输出像素和显示像素，输出像素指的的是投屏电脑的最大支持分辨率，显示像素就是我们大屏的支持的最大分辨率。

我们实际项目中最好以显示像素的尺寸进行设计（就是以大屏尺寸为主），但是也要看输出设备的像素大小。

硬件投屏本地运行

使用场景：科技展厅，以及一些带主机的设备。

此种情况，一般我们的大屏会自带主机，大屏本身就可以看成一个显示器非常大的电脑。我们如果需要进行可视化演示，那么我们直接就可以通过显示器的尺寸去做设计，这样就是大屏的设计尺寸。

一般这种靠硬件的投射，都是在拼接处理器的处理下，将多个屏幕拼合成一个大的显示器，再通过拼控系统（硬件投屏）进行输出。

一般我们可以将我们大屏的（UE4或者U3D开发）应用程序打包，打包成一个后缀为.exe的应用程序，在大屏电脑上直接点击，程序就可以在大屏上完美的跑起来，也不需要去进行电脑投射大屏。

控制端操控大屏

如果通过控制端去控制大屏，那么投射设备就可以通过多种方式去展示了，可以是手机，平板，触摸屏，手势控制，体感控制等等。

这种情况下投射设备的尺寸就按照本身设备的规范去设计就可以了（比如750*1334，2048*1536），设计尺寸就是我们大屏本身的分辨率就可以了。

多主机多信号投屏

此种情况主要使用场景：屏幕宽度非常高，并且内容可以分很多模块展示，模块彼此之间不受影响独立展示，这种情况下我们就可以通过此种方式去投屏。

通过多个主机分别去投射大屏的同等大小区域，比如图中的场景模块被我分成了四等份，我们就可以通过四台主机去分别投射四个模块，形成一个完整的大屏。

此种大屏设计尺寸我们以输出设备的尺寸为主要参考，四台主机那么整体宽度就是1920*4=7680，高度就是1080（如果设备支持4k输出，那么提升相应的设备尺寸*2就可以了）。

不同比例投屏及解决方案

Q：如果遇到一个设备是16:9，投屏到一个20:3比例的大屏幕， 那我设计尺寸以16:9，还是20:3？

A：我们要记住，如果面对的是正常比例投屏到非等比的大屏，我们需要遵守的规范一定是：一切以大屏展示为主。所以我们设计尺寸一定是按照20:3来设计的，大屏展示正常才是我们的唯一标准，投屏电脑可能会出现的问题，我们只能妥协（投屏电脑可能只能展示很小的一部分，但也是没有办法的）

那么我们遇到这种是否就没有办法了呢？在这阿勇给大家提供了三种解决办法，在实际工作中，我也遇到过这种问题，所以在这给大家分享一下。

方案一：外接显示器（外接多个显示器，一般主机可以另外外接四个显示器，这样就可以解决投屏电脑显示不全的问题了）

方案二：采用拼控系统，而不是用纯粹的设备投屏（拼控系统完美解决了尺寸不一致的难点）

方案三：设计两稿，16:9，20:3我们都去做设计（做两套系统，相当于做的适配）

Q：请教大家一个问题，电脑的分辨率是3840*2160，单个大屏的分辨率是1920*1080，拼9*6的大屏，设计尺寸该设置多少啊？这样设计尺寸会不会太大了，如何优化这个设计稿尺寸？

A：前面的文章我们已经介绍过拼接屏的尺寸的问题，这个问题的解答：1920*9/1080*6 ，这个就是设计分辨率，通过计算得出，最终设计稿尺寸为17280*6480。可以看出设计分辨率确实太大了，设计的时候如何去优化设计尺寸呢？

通过命题我们可以看出电脑分辨率是支持4K的，就是说输出分辨率和显示分辨率我们都是可以上4K的，而4K的分辨率一般会做3840*2160，再结合设计稿尺寸17280*6480，可以将整个效果图尺寸缩小三倍，也就5760*2160。设计可以按照这个分辨率去出图，最终交付给开发的就是切三倍图，并提示开发是缩小三倍做的。

总结：不管在面对什么尺寸的设计，都要记住，万变不离其中，一切以大屏完美展示为准则，所有的一切都是要在大屏上观看，为了完美展示，投屏电脑，设备控制等页面可以适当的让步。

全篇知识点

通过以上的知识点总结，不知道大家对于数据可视化大屏设计是否有了新的认识，数据可视化对于设备的尺寸，设备的信息，以及投屏注意事项，都要有更多的了解才可以。下图就是总结本篇文章的知识点。

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

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

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

念起

作为一名UI设计师，不免每天都会和色彩打交道，但有时总会苦恼于色感把握不准，让我们配的色彩，总是“不对味儿”。我结合在近期的一些项目中对于HSB色彩模式的应用，与大家分享一些结合HSB（HSV）色彩模式帮助我们进行配色的理论和技巧。也欢迎大家一起讨论，共同进步。

色彩模式有哪些？

我们生活中借助观看而感觉到的“色彩”，可分为光加上颜色之后所透出的“透出色”，以及光照射到物体上反射出的“反射色”。

透过色是以“加色混合”的方式，由红、绿、蓝，共三色混合，表现出各种的颜色，我们的计算机屏幕就使用这种方式表现颜色。这种色彩表现方式，称为RGB色彩。

▲图1 《设计入门教室-色彩设计的原理》

物体色彩的反射色，是用画具或染料、油墨等“色材”来表现颜色，印刷品基本是由青、洋红、黄、黑四种油墨相互组合而成，所有的颜色皆以“减色混合”的方式表现，这种方式称为CMYK色彩。

RGB和CMYK两大色彩模式是最重要和最基础的。RGB更是与我们的工作密不可分。可是，在实际工作中我们往往很少直接通过RGB模式进行调色。

简单聊聊HSB色彩模式

1.HSB是什么？

「这是什么颜色？鲜不鲜艳？很亮还是很暗？」当我们看到一个颜色时，往往心中都会闪现这三个问题。

事实上，人类对于色彩的第一个感知往往是从色相（Hue）开始，即红色橙黄色绿色青色蓝色紫中的一个，然后是它的深浅度。

HSB模式对应的媒介是人眼，在选择色彩这件事上，HSB使用了更贴近人类感官直觉的方式来描述色彩，它把颜色分为色相、饱和度、明度三个因素（将我们人脑的“深浅”概念扩展为饱和度和明度）。

H—色相/色调：颜色的相貌，颜色的调性，在标准色轮上，色相是按位置度量的，取值在0—360度之间（黑色与白色无色相）。

▲图2 网络图片-圆形色相环

S—表示饱和度/纯度：颜色的纯度，取值在0—100之间，饱和度高色彩较艳丽。饱和度低色彩就接近灰色。

B—表示明度/亮度：颜色的明暗程度。取值也是在0—100之间。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。

工作中，我们常用的设计软件ps、 Sketch都是通过拾色器帮助我们选择需要的颜色。

▲图3 软件拾色器截图

HSB模式，可以完美固定HSB中的某一个参数，只对其他两个参数做改变或者只改动其中的一个参数，这一点，完全符合人的色彩直觉，也只有HSB能做到，而RGB、CMYK都是牵一发动全身的节奏。

通过HSB模式，我们可以在已有颜色的基础上，进行饱和度、明度的微调。以及选定主体色之后，根据需要，通过数值的加减改变色相，选取合适的颜色（互补色为180°、对比色为120°到150°、类似色为90°、邻近色为60°、同位色为15°。）

2.在设计中如何运用HSB色彩模式

通过上述对HSB的原理、特点简单介绍后，相信大家对其都有了基本的了解。以下我结合在工作中的几个案例来说明HSB在设计中是如何实际应用。

举个例子：如果我们在设计一个页面时，除主色之外我们需要一个近似色，就可以运用HSB色彩模式。

通过图片我们可以看出右侧的颜色整体视觉效果感觉更加和谐、舒适。在界面设计中我们常会遇到以颜色对同一种类型的不同状态进行区分，比如背景，按钮等。

结合上述的例子，以及饱和度与明度的变化规律：

（在不改变色相的情况下）

HSB色彩模式在项目中的实际应用

1.爆款、预约详情页色卡库

在去年的vivo游戏中心爆款、预约详情页的改版优化中，都运用了HSB色彩模式。使不同游戏可以根据头部氛围图配置出3个相同色相值的近似色并运用到页面中。保证色彩搭配有规律可行，并且展示效果在基准线之上。

系统统一从头部氛围图吸取、确定颜色后，通过调整饱和度和明度值（色值不变），即可得到一套色卡。

▲图4 vivo游戏中心预约详情页设计规范

2.联运深色模式中的应用

在双系统的深色模式适配要点中有提到“高饱和的颜色在深色的背景下容易产生视觉抖动，从而导致人眼疲劳”，在深色模式下我们应当选择更浅的颜色以达到更好的可读性。

我通过结合Material Design以及Developer深色模式适配规范中的色彩示例来简单说明，怎样借助HSB，来达到深色模式色彩科学合理的适配。

▲图5 Material Design深色模式适配规范

▲图6 Developer深色模式适配规范

通过对两种规范的学习以及对比，可以看出Material Design的规范相对而言更加直观和系统（手把手教你），Developer的适配则比较微妙（只可意会），没有明确的说明方法或者规律。但Developer示例中的适配则更加注重视觉表达以及色彩的一致性，带给人的视觉感受更加的舒适和谐。       

重点分析Developer深色适配中的配色示例中，通过将Developer给出的深色模式适配示例的色值转换为HSB之后，发现其HSB的数值变化是有一定规律的，规律基本符合：

BUT：

在根据Developer的深色模式颜色适配的示例总结其规律的过程中，对于数值的变化，产生了一些疑惑：

直到了解到：「每个颜色都有其专属的“感知明度”，也就是亮度」

将色相环“去色”后，可以明显看出：

每一种颜色（色相），都有着独特的“感知明度”，在S、B相同的情况下，黄，青，洋红的颜色会让人感觉比较亮，结合这点再结合Developer深色模式的适配示例以及得到的基础规律后。可以得出：

将上述我们所得的“HSB配色一般规律”运用在vivo游戏中心联运深色模式主色的推导，以及vivo游戏中心爆款详情页自动吸色系统优化中，使得页面的阅读体验更加良好，整体配色和谐舒适。

▲图7 vivo游戏中心、联运游戏爆款详情页

写在最后的话

HSB在设计工作中的应用当然不止上面讲的这些，比如我们经常碰到的页面中为了区分不同层级的文字，会给予文字不同灰度的颜色（最常见的#000000、#333333、#666666、#999999）也是应用了HSB模式，当我们所要区分的层级多于四种时，就不需要在色板里纠结了，只要按照上述的规律，以不同明度的变化就可以了。

在我寻找资料的过程中，也看到很多通过色相，饱和度，明度的一致或者对比等方式得到协调优秀配色的方法。这些都可以通过方法和HSB模式的结合，快速方便准确帮我们找到合适的颜色。

▲图8 网络图片-色相环配色图

在日常设计中，可以通过个人对色彩的感知与把握选取一个颜色，再通过HSB快速的选择相应的色板，运用在页面配色中。到这里关于HSB色彩模式在设计中的应用就全部介绍完成了，如果你阅读完也有所收获，不要忘了点赞哟~

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

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

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

• 有层级关系的数据该怎么展示？

• 一条数据有父子关系，该如何展示？

• 一条数据类型太多，表格容不下怎么展示？

• 一些数据其中的一类型字段较长，其他类型字段段，甚至只有几个字，该怎么展示？

• 一组数据，数据不全，类型不全，部分数据是共同的主体，该怎么展示？

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

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

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

用户体验研究可帮助企业了解目标受众的需求和行为，证明或反驳潜在假设，使他们不会根据虚假信息继续前进，并根据数据战略性地发展他们的产品。最终，它帮助他们创建和维护能够吸引和留住客户的产品，从而使企业取得成功。但是，您实际上如何确定用户体验研究项目的最佳方法？

本文分享了四步框架的概述：(1) 确定您想学习的内容；(2) 确定您要针对的对象；(3) 考虑时间表、预算和团队；(4)选择方法。

1. 确定你想学什么

让我们从第一步开始——确定你想学习什么。此时有3个问题：

您是在尝试探索想法还是评估想法？

探索性研究，也称为生成性研究，通常发生在产品设计和开发过程的开始阶段。它提供了对客户问题、需求和动机的深入洞察，帮助您确定构建什么、如何构建以及目标对象。

评估研究通常发生在产品设计和开发已经开始或产品发布之后。它评估产品的功效和可用性，帮助您确定痛点和改进机会。

您是在收集与新产品还是现有产品相关的数据？

如果您正在尝试产生想法并弄清楚如何塑造新产品，那么探索性研究将是最合适的。

如果您正在尝试确定如何改进和改进现有产品，则评估研究将是最佳选择。

这是一项独立的研究工作还是更大项目的一部分？

探索性研究通常是在推进产品创意之前自行进行的。

评估研究活动往往是在正在进行的设计和/或开发工作的背景下进行的。

2. 确定您的目标对象

现在让我们进入第二步——确定你想要定位的对象。这是该过程的关键部分。只有与合适的人一起进行研究，您的研究见解才会有价值，因此您需要注意寻找能够提供您所需观点的参与者。此时有3个问题：

谁是目标受众？

定义你想要接触的人的特征。例如，您的目标受众可能是向消费者销售产品或服务且每月在数字广告上花费不到 1,000元的小型企业的所有者。

您是否已经可以访问此受众群体？

如果您正在对现有产品进行研究，您可以利用现有的客户群。

如果您正在研究新产品或尝试接触新的客户群，则需要探索其他选择来接触目标受众。

如果没有，你怎么能接触到有代表性的受众？

您可能会考虑使用自助招聘工具，如用户面试或与招聘机构合作。

3. 考虑时间表、预算和团队

现在让我们进入第三步——考虑时间表、预算和团队。所有项目——不仅仅是研究项目——都有限制，重要的是在考虑这些限制的情况下定义你的研究方法。不过，约束不一定要受到限制。它们实际上是一个有用的工具，可帮助您专注于如何利用可用资源来产生最大影响并提供最大价值。

时间线

对于您的时间表，您想确定您是否在特定的截止日期前工作，例如即将举行的董事会会议或产品发布。

预算

对于预算，您需要确定哪些资源可用并且可以分配给该项目。当您考虑预算时，不仅要考虑人员成本，还要考虑任何补充研究成本，如招聘费用、参与者薪酬和工具，这一点很重要。

团队

对于任何团队限制，确定您是否具有研究能力以及这些能力是什么。您需要考虑您的团队中是否有可以进行研究的人员，或者您是否需要引入外部支持。即使你有一些内部能力，这些人也可能没有能力在截止日期前完成工作。

4. 选择方法

现在是该过程的最后一步 - 选择用于收集数据的方法。在这里，您可以真正深入研究并弄清楚自己要做什么。有两个组成部分会影响您的决策——范围和数据。

范围

对于范围，您首先需要确定是要使用单个方法还是多个方法。利用多种方法可以收集更广泛、更细致的数据集，但也更昂贵和耗时。您还需要确定是要进行长期研究还是需要立即获得反馈。

长期研究将是最适合的探索性研究，你需要建立的观众基础的了解，然后才能继续前进。

即时反馈 最适合评估性研究，在这种研究中，您希望在继续之前获得投入的正在进行的工作。

数据

对于数据，您首先要考虑哪种方法最适合目标和受众。

如果您正在探索新产品的想法，您可以从采访开始。如果您正在收集有关原型的反馈，并且需要尽快从受众那里获得反馈，您可以利用简短的未经审核的可用性测试会议。

您还需要考虑是要捕获定性数据、定量数据还是两者兼而有之。如果我们回到前面，定性数据可以帮助我们理解原因，而定量数据可以帮助我们理解什么。

您使用的方法将取决于您尝试获取的信息类型，以及与您合作的时间表、预算和团队。

每个研究项目都是独一无二的。但是定义方法的过程在不同项目中是相似的。如果您对进行研究感兴趣，我鼓励您利用上面概述的四步框架来帮助您找出最佳的前进道路。一旦您有了基本的构建块，您就可以继续制定更精细的研究计划，其中概述了具体的假设以及您将如何执行工作。

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

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

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

导航和可查找性是用户体验设计的核心方面。如果用户无法找到他们需要的东西，他们就会感到沮丧并可能决定去别处寻找。在信息架构特别复杂的网站上，多级菜单是提高导航和可查找性的有效方式，从而提供有效的网络体验，促进产品信任和促进转化。

由于产品和使用它们的设备千差万别，因此没有一刀切的解决方案。但是，有一些经验法则可以帮助您构建多级菜单，从而增强在不同屏幕尺寸上的导航和可查找性。

不同尺寸屏幕的设计技巧

一个好的多级菜单应该通过以清晰、直观的方式呈现信息，让用户快速找到他们需要的信息。在我们进入特定于尺寸的指南之前，让我们看看一些适用于所有菜单的做法。

使用不超过两级的子菜单。任何多于两级的子菜单都可能使用户感到困惑。保持导航相对平坦可以提高用户的可查找性，并减少记住他们所在位置所需的认知负担。如果站点的页面结构很深，请考虑在密切相关的页面顶部添加本地导航菜单。例如，设计复杂业务支持产品的 Zoho 在每个产品页面的顶部放置了一个特定于产品的本地菜单，就在主菜单的下方。虽然顶部的主菜单列举了 Zoho 的核心产品，但本地菜单提供了对包含更详细信息的页面的访问，例如用例和定价。

用图标标记子菜单。通过始终明确何时有可用的子菜单来管理用户的期望。熟悉的选项包括一个小的下角图标或三角形图标。此外，请考虑在子菜单打开时翻转指针图标。

直观地组织信息。确保信息的层次结构与用户的心智模型一致。例如，在电子商务网站上，考虑购物者是否更有可能期望按品牌或商品类型组织商品。如果用户单击“鞋子”类别，他们是否希望子菜单显示运动鞋、凉鞋和靴子的选项？或者他们是否希望看到一个子菜单列出商店出售的每个品牌的鞋子？

确保用户始终知道他们在哪里。始终突出显示主菜单上与用户所在页面相对应的链接。如果当前页面在子菜单中，则在主菜单上也突出显示子菜单链接。

保持简单。菜单不是进行巧妙文字游戏的地方；确保链接标签具有强烈的信息气息。这意味着保持标签名称简单明了和描述性，以便用户在点击时立即知道他们会找到什么。文案越清晰，用户就越快找到他们需要的东西。

优先考虑可读性。使用简单的无衬线字体并确保项目周围有足够的间距以避免混乱。确保背景足够不透明以遮挡菜单后面的任何内容。但不要忽视网站的整体品牌。虽然可读性是第一位的，但要确保菜单的样式与网站的其他外观和感觉相得益彰。

使点击变得可访问。为了让有精细运动控制障碍的用户可以访问菜单，请遵循 Google 的Material Design指南，并将可点击元素的大小设置为至少 48 x 48 像素。

网站菜单设计技巧

即使移动趋势日益增长，客户可能需要功能齐全的网站的原因仍然很多。例如，他们可能需要在网上提供比移动网站可行的更多信息。或者他们的研究可能表明他们的用户只是更多地依赖台式机。

网站菜单应该易于浏览，提供清晰的交互，当然还有响应性。它还应尽可能与移动网站保持一致，以便为回访者提供直观的体验。

菜单应该在点击时打开，而不是悬停。您需要做出的最基本的决定之一是用户将如何访问站点的菜单。将指针悬停在菜单上是否足以触发菜单的外观，还是用户需要单击它？

悬停方法很流行，但点击打开是确保菜单在所有设备上可靠、直观地工作的最佳方式。单击方法使网站能够在传统的计算机显示器和类似的触摸屏上更一致地工作，并避免悬停方法出现的许多问题，包括：

a) 狭窄的悬停空间。悬停空间是鼠标在保持菜单打开的同时进行导航的路径。如果它太窄，菜单可能会在用户到达他们想要的链接之前消失。

b) 意外打开。如果用户在前往页面上的另一个位置的途中尝试浏览悬停菜单，则很容易无意中打开悬停菜单。设置一个短暂的延迟可以解决这个问题，但当用户确实想要打开菜单时可能会导致不适。

c) 触摸屏上的用户体验不一致。悬停菜单在触摸屏上不起作用。他们需要一个代码来检测触摸屏并切换到点击打开；随着笔记本电脑和平板电脑之间的界限越来越模糊，这些变通办法可能会过时。

d) 关于什么是可点击的问题。使用悬停菜单，用户在尝试单击之前并不总是知道父链接是否可单击。这与直觉相反。

e) 可访问性。悬停菜单可能会给使用屏幕阅读器或通过键盘导航的用户带来问题。

选择正确的布局：下拉菜单与超级菜单。如果网站使用传统的菜单布局（位于页面顶部的水平菜单栏），您可以考虑两种类型的子菜单：标准的单栏下拉菜单或多栏超级菜单。

如果父类别包含的链接少于八个，请考虑使用下拉菜单。如果下拉菜单足够长，需要垂直滚动，您应该考虑以不同的方式组织信息——也许作为一个大菜单或通过细化父类别。

超级菜单是一种嵌套菜单，通常使用可以扩展浏览器宽度的宽布局。如果子菜单包含许多可以按列分组的不同链接，您应该使用这种类型的菜单。通常，您会在大型电子商务网站上看到这样的菜单。

设计大型菜单时，请考虑以下事项：

a) 添加图像或图标，使信息更易于浏览。

b) 添加标题以对相关页面进行分组。

c) 如果类别名称不言自明，请添加说明。

大型菜单在移动设备上可能难以阅读和导航，但有时在更大屏幕上用户体验的改进使得为移动设备重新配置信息而做额外的工作是值得的。

添加清晰的悬停状态。使用点击打开菜单，包括所有可点击元素的清晰悬停状态，会使户确信链接处于活动状态。您可以使可点击区域的背景稍微变暗以指示悬停状态。只要确保悬停区域与可点击区域匹配。如果测试表明用户需要更多指导或上下文，请考虑添加更多描述性标签名称或工具提示，只要它不会阻止任何重要的内容。

单击以关闭子菜单。当用户点击别处或打开另一个子菜单时，通过关闭菜单来保持直观。这就是下拉输入字段在表单中的工作方式，因此大多数用户会觉得这很熟悉。

在桌面上启用键盘导航。并非每个人都使用鼠标进行导航，因此菜单应允许用户使用键盘进行导航。这意味着所有链接都应该具有不同的焦点状态，以便用户可以一目了然地看到它们的位置。通常，深色框可以很好地指示聚焦状态。

移动屏幕的设计技巧

如果您尚未设计移动优先，则需要优化手持设备的菜单。传统的菜单布局在非常小的屏幕上很少能很好地操作——如果你只是缩小桌面菜单栏，没有人能够阅读它。

简化主菜单。由于智能手机屏幕很小，您在桌面菜单中找到的大部分信息最初都必须隐藏。主菜单栏必须非常简单，但最好显示最重要的链接以提高可查找性。您可以将菜单栏固定在屏幕底部或顶部。

添加菜单触发器。由于移动菜单的全部或部分可能被隐藏，用户需要一种方法来找到它。在菜单栏或易于触及的浮动按钮中添加汉堡图标是一种流行的解决方案，许多用户都会认可。然而，汉堡菜单并不是唯一的选择。例如，如果您正在为年长的用户设计，则最好使用带有“菜单”一词的框。或者，如果您想让网站的功能更加突出，您可能希望将它们显示在顶部或底部的选项卡式菜单中。

将菜单放在侧边栏中。您可以通过多种不同的方式设计移动菜单。您可以使用全宽布局，适用于任何情况；底部抽屉，最好只有几个链接；或圆形菜单。一个不错的选择是使用带有深色半透明背景的侧边栏来遮挡页面内容，从而消除干扰，并允许用户轻松点击它以将其关闭。还可以考虑使用从左滑动的动画来避免不和谐的体验。对于侧边栏和底部抽屉菜单，请确保菜单可垂直滚动，以便在较小的屏幕或横向模式下不会有任何内容被遮挡。

允许用户轻松关闭菜单。用户可以直观地点击菜单来关闭它，但也可以考虑添加一个关闭按钮。您可以将汉堡图标变成 X 或在菜单的右上角添加一个。

对单个子菜单使用扩展部分。如果菜单只有一级子菜单，请考虑使用扩展部分。您可以将它们展开到父项下方，并使用不同的背景颜色来清晰显示。您还可以允许用户同时展开多个子菜单。考虑使用父项右侧的下角或三角形图标来指示子菜单可用。

用重叠菜单替换大型菜单和多个子菜单。如果您需要展开多个子菜单或重新配置大型菜单，请选择重叠方法：不要在父菜单下方或旁边展开子菜单，而是让子菜单替换父菜单。使用这种方法，您必须在除第一级之外的所有面板上都包含一个“返回”链接。对于顶级菜单，请考虑为父项使用直角图标或右箭头。

预打开子菜单。在小屏幕上，如果用户点击打开主菜单并且他们当前所在的页面在子菜单中，请考虑自动打开子菜单，以便用户了解它们相对于其余菜单项的位置。

总结

导航是客户体验的重要组成部分。用户不想进行寻宝游戏，也不想花更多的时间浏览菜单。如果他们无法轻松找到他们需要的东西，他们可能会放弃网站或界面，将他们的注意点转移到其他地方。

精心设计的多级菜单是具有复杂信息架构网站的关键组成部分。希望这些方法在各种用例中为您提供良好的帮助。

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

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

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

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

第一步：选择导航板式

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

顶部导航板式

顶部导航是大多数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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

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

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

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

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

概述

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