编者按：互联网的诞生本就是一个奇迹，作为其中最重要的载体之一，网页就是这个大时代最重要的缩影，相关技术、设计伴随着信息共享催动着整个时代滚滚向前。这是一段简短的网页设计发展史，我们可以看到技术、设计与思想的演进，看到无数有识之士改变世界的剪影。本文作者是网站Froont.com的联合创始人Sandijs Ruluks。

当我发现设计网页有多投机取巧的方法之时，就逐渐开始对手打网页代码失去兴趣。的确，许多网页设计的问题并不止一种解决方案，但是很少有方案能解决所有的浏览器兼容性问题。最令我纳闷的是，为什么会有做设计和写代码的分工？随着技术的发展，许多在过去难以解决的问题现在可以轻松搞定，但为什么与此同时一些简单的事情反而越来越难以实现？这些问题的答案并不是简单的是与否，对与错，也许我们需要从网页设计的整个发展历程来寻找答案，找到真正弥合设计与代码之间隔膜的原因所在。

温故历史之前，不妨看看2014年最优秀的网页设计：《爱不释手！2014年最佳的20个优秀网页设计》

网页设计：黎明前的黑暗（1989）

在互联网真正开始之时，黑色的显示屏仅能显示单色的像素。可以说，当互联网天地初开之时，Web Design 仅仅意味着字符和空格的排列组合。虽然图形化的界面早在80年代初就有了，但在此时普及率并不高。直到90年代，图形化界面才真正进入千家万户，而那时候，才是属于互联网的狂野西部。

表格（table）：网页的兴起（1995）

能够显示图片的浏览器的诞生，是促使网页设计这个行业诞生的重要先决条件。实际上在当时，最接近于信息结构化的概念，是HTML中已有的元素：表格（Table）。所以，David Siegel 在他的网页设计书《Creating Killer Sites》讲述了他设计优秀网站的秘诀：在表格中嵌套表格，将静态的表格和动态的表格以巧妙的方式结合到一起。尽管表格本身是用来承载数据的，用来承载内容和图片有点奇怪，但是在那个时代，这种方法依然显得颇为靠谱，并且大行其道。

网页设计所面临的另外一个问题，就是如何保持网页那脆弱的结构。也正是因为这种需求，切片设计（Slicing Design）逐渐流行了起来。设计师创建出漂亮的网页布局，随后开发者将整个设计稿切片，找出呈现设计的最佳方法。另一方面，表格还有一些炫酷的功能，比如垂直对齐，以像素为单位或者以百分比来控制对齐。在那个时代，表格可是近乎栅格系统一般的灵活的设计神器，也正是因此，那个时代的开发者并不喜欢前端的代码。（表格嵌套表格有多乱？）

来自JavaScript的救援（1995）

JavaScript的出现补足了尚且原始的HTML。举个例子，如果你想写个弹出窗，或者想动态修改某些对象的顺序？HTML不行，但是JS可以！不过此时JS的主要问题在于，它处于整个网页布局的顶层并且需要单独加载。很多时候它仅仅被懒惰的开发者用作一个简单的补丁，但如果使用得当，JS可以非常强大。今天，同样的功能如果CSS能实现，我们会尽量避免使用JS。不可否认的是，JS本身确实很强大，前端常用的jQuery，后端的Node.js都是不可多得的好东西。

Flash：自由的黄金时代（1996）

作为一门新技术，Flash为网页开发者/设计师带来了前所未有的自由，它打破了之前网页设计所固有的限制。借助Flash，设计师可以随心所欲地在网页上展现任何形状、布局、动画和交互，可以使用任何喜欢的字体，他们借助Flash熔于一体。所有的这一切最终会被打包成为一个文件，然后被发送到浏览器端显示出来。这也就意味着，用户只需要拥有最新的Flash插件和些许等待时间，就可以享有一个魔术般的网页。这是启动页面（splash pages）、介绍动画以及各种交互特效的黄金时代。不幸的是，这种设计并不开放，也不利于搜索，还需要消耗计算机大量的运算能力。2007年，当苹果发布他们的第一台iPhone的时候，就决定彻底放弃Flash，也正是在这个时候，Flash开始走下坡路——至少在网页设计领域。

CSS的诞生 (1998)

差不多是在Flash崛起的同时，一种更好的网页结构化设计工具CSS诞生了。CSS的基本概念是将网页内容的样式分离出来，所以网页的外观和格式等属性将会在CSS中被定义，但内容依然保留在HTML中。早期版本的CSS并没有现在那么灵活，和许多新事物一样，它最大的障碍在于许多浏览器还没来得及接纳这一新技术，对于开发者而言，这是一个头疼的事情。需要明确说明的是，CSS并非全新的编程语言，它仅仅只是一种声明性语言。那么网页设计师需要学习编程吗？可能需要。但是网页设计师需要懂得CSS么？当然需要。

栅格与框架：移动端的崛起（2007）

此刻，在手机上浏览网页本就是一种全新的挑战。设计师除了要为不同设备设计不同的布局，还面临着内容控制的问题：小屏幕上展示的内容要和桌面端一样多，还是需要剥离开来？桌面端网页上闪亮精致的小广告要如何在手机上呈现？加载速度也是一个大问题，移动端设备的网络加载速度不够快，而且桌面端网页会消耗大量的流量。网页设计亟待改进。

第一个重大的改进是栅格系统的出现。经过摸索，960栅格系统最终胜出，经典的12栏栅格被设计师们广泛的接纳，甚至成为许多设计师最常用的设计工具。接下来，各种常见的设计元素诸如表格、导航、按钮被标准化，打包成为可复用的套件，这基本上就构成了视觉元素库，其中还纳入了常见的代码。其中最典型的代表就是Bootstrap和Foundation，它们也使得网站和APP之间的界限逐渐模糊。当然，它们也不是没有缺点，借助这些库设计出来的网页往往大同小异，而且网页设计师要想使用它们还得深入了解相关的代码知识。

响应式网页设计（2010）

惊才绝艳的设计师Ethan Marcotte决定挑战传统的网页设计，它让网页在内容不变的前提下，布局随着窗口和屏幕的变化而变化，并且将这种设计命名为响应式网页设计。网页设计师依然只需要HTML和CSS就可以实现这种功能，不得不承认这种设计理念非常超前。不过大家对于响应式设计依然有些许误解。对于设计师而言，响应式设计意味着为设计许多不同的布局。对于用户而言，响应式设计就意味着这个网页可以在手机上完美浏览。对于开发者而言，响应式设计意味着如何控制好网站图片应付移动端和桌面端，在不同情形和语义下，拥有良好的下载速度和呈现效果，等等。简而言之，就是一个网站能在任何情况下良好展现。至少在这一点上，所有人能达成共识。

扁平化的时代（2010）

设计网页布局总会花费大量的时间，好在这个时候我们开始抛弃复杂的光影效果，重新专注于根本的内容呈现。在此之前，网页设计讲求精美的图片和排版效果，漂亮的插画与周到的布局设计，而简化这些视觉元素之后，就是我们说所的“扁平化设计”。将复杂的效果淡化之后，视觉的扁平化，也促使内容和信息层级的扁平化。充满光影特效的按钮被扁平化的图标所替代，矢量图形和图标字体也开始被大范围使用，网页字体和版式设计的结合令网页视觉更加漂亮。有趣的是，这时候的网页设计开始有返璞归真的感觉。

光明的未来（2014）

技术的革新已经开始将网页设计推动到一个全新的境界。在许多设计平台上，设计师只需要在屏幕上移动不同的控件就可以生成整洁可用的代码出来，并且这些代码非常灵活，可控度极高！试想一下，开发者无需担心浏览器兼容性，可以专注于更加实际的问题！

新诞生的概念正在推动网页设计。CSS中新诞生的属性，诸如vh和vw（viewport height 与 width1），就使得网页元素的位置控制更加灵活自由，一次性解决了设计师纠结多年的顽疾。作为CSS一部分的Flexbox则是另一个新事物，它可以快速创建布局，轻松修改属性而无需编写过多代码。

网页设计正在飞速发展，未来还会有越来越多的创新，就让我们拭目以待吧！

文章来源：UI中国    推荐：陈子木

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

什么是表格？

表格页是公认为展示数据最为清晰和高效的形式，它的信息密度极高，就像是一个家庭衣柜，里面很多抽屉，我们需要把衣物整洁摆放收纳，提高空间利用率。

表格页由三个部分，如下图所示：

一、数据查看

数据查看可通过四个维度去自检设计是否合理，分别为信息降噪、呼吸适中、高效易读、详情查看。

1、信息降噪-内容

通过对表头内容删减，我们一眼就可以看到表格的重要信息，从而帮助用户能快速进行数据决策。因此，列数控制在7+-2，列表表头展示更为关注的数据，更多信息在详情中展示。

另外，如果不同用户想看到的信息侧重不同，我们还可以做自定义设置项，让用户自己去选择想要看到的表格内容。

用最少字数给表头做精简，精简到少一字不可。

另外，当遇到少一字都不可的长标题，我们可以定义专有名词，并且给一个解释专有名词的icon，便于第一次使用的用户易于理解。

2、 信息降噪-视觉

去掉不必要的分割线和斑马纹，用对齐和间距来区分列和行，可以鼠标滑上去给斑马纹，增强交互体验。

分割线的样式尽量轻盈，不要抢视觉，突出内容。

去掉不必要的装饰和颜色，为了防止视觉负担，少用面性图标，使用颜色保持克制，删除如果不是点击即可删除，可以不用预警色。

不要出现衬线字体，比如宋体，保持字体统一。

3、 呼吸适中-单元格

定义单元格高度。字号、行高、上下间距进行规范，这里有一个比较常见的规范，将字号设为N，那文字行高就是

1.5N，上下间距为1.2N，单元格高度=内容高度+上间距+下间距。

4、 呼吸适中-列宽

我们将首列和尾列定义为N1，列与列之间定义为N2，随着页面收缩和拉伸，N1保持不变，N2自适应变宽变窄，这样页面会看起来会更均衡，这样会显得有呼吸感。一般定义一个最小值，当表格宽度大于页面宽度时候，固定首尾列，左右滑动。

5、 高效易读-对齐方式

标题和内容一般采用左对齐，更高效的浏览顺序，有长短不一的数字时，右对齐方便比较。操作项一般放在尾列右对齐。

6、高效易读-不做无意义留白

当数据为零时就写上“零”，当没有数据时候就写上“-”。比如开发取不到的后台数据，我们就可以给“-”作为显示，如果得到的数据就是零，我们也要让它显示出来。

7、高效易读-选择合适的翻页器

选择合适的翻页器，利用分页可以缓解服务器的加载压力。无限浏览如果数据过多很容易使页面崩掉，使用功能较为强大的翻页器，每一页默认10行以上，减少翻页次数，增强用户体验，给出默认行数后，可以让用户自定义每页行数，相比跨屏翻页，向下滑动更便利。

8、高效易读-收起低频操作项

超过四项操作项收起来，可以用图标指引下一步操作。关于哪些可以操作项可以折叠起来，可以与产品经理沟通收起低频链接，或者埋点一个月时间查看点击量也可以做出决策。

9、高效易读-默认行数

当单元格内容长度不固定的时候，定义好内容的宽度和行数以及字数，超出显示的字数可以用省略号代替。

10、高效易读-行的排序

默认最近创建的在表格中第一行显示，使用户感知最新情况。也可以带排序的表头，让用户自定义排序。

11、详情查看-入口

入口可以在操作里加详情，也可以把发起人做成可以点击样式，跳转详情，并且可以避免视觉干扰，也就是降噪，当鼠标Hover上去时候，发起人才显示出跳转色，提示可点击状态。

12、详情查看-交互方式

第一种是用弹窗的形式。第二种是第一种的延伸，当内容过多时候可以考虑抽屉样式。这些交互的共同有点就是没有脱离原页面。当详情内容较多且需要编辑时候，我们就考虑跳新页面，使用新页面进行承载。(这里有个细节，新开tab页可以打开多个详情页，如果覆盖原页面则只能打开一个详情页，并且不能同时查看原页面和详情页。所以我们要根据具体场景、业务需求去设计)

二、数据过滤

数据过滤由搜索，筛选和标签页构成。

1、搜索

搜索可分为模糊搜索和带标签的搜索。工作中常用的搜索为模糊搜索，优点是只要有相关的内容都会搜索出来，减少了精准搜索带来的记忆负担。缺点是容易把不相关的信息也带出来，例如搜索手机号，把相关编码也匹配了出来。带标签的搜索优点是搜索匹配精准度高。缺点是每次只能对单一条件进行搜索，当用户要搜索的时候都要去切换选择信息，多了一个步骤。另外，在实际工作中，可以通过埋点或者调研，如果搜索框搜索手机号频率较大，我们可以把手机号设置为默认选项。

2、筛选

筛选框可以分为下拉筛选和平铺筛选。下拉筛选的优点是空间利用率高，起到了很好的收纳作用。缺点是无法直观看到所有筛选项。平铺筛选优点是操作效率高，筛选项一目了然，支持输入更多筛选条件，可以自定义输入。缺点是空间利用率低，不适合选项太多的情况。如果用户点击其中一个选项概率最多，我们就可以将点击率高的一项作为默认项，然后选择第一种下拉筛选框。如果用户点击每个选项概率相等，在空间允许情况下我们可以平铺出来。

当筛选项过多时，信息排序应是用户目标优于业务逻辑，即排序应该考虑用户的使用习惯。例如当用户查找订单时候，第一反应都是搜索框输入，而一般通过价格过滤较少的应该放在末尾。

当然，我们还有更多优化空间，当筛选项过多时，我们可以默认折叠低频筛选项。折叠哪些筛选项还是得基于用户习惯，可以通过数据埋点或者用户调研得到用户使用场景。

当通过数据埋点或者用户调研发现绝大多数用户只需要用到搜索项，那么我们就可以只保留搜索框，其他选项全部折叠到高级搜索里面，当点击高级搜索时候出现一个弹窗，既可以保留更多筛选内容，又可以使页面不会看起来很拥挤。

(当弹窗内容选择完毕时候，高级搜索按钮会呈现高亮颜色，未选择更多筛选内容时候则呈现默认态。）

3、标签页

标签页是比较常用的数据过滤方式，切换样式包括基本样式、卡片样式以及胶囊样式。一般和时间、状态的流转有关。

同样我们可以通过数据埋点或者调研，将用户最关注的选项设置为默认选项，减少用户的选择，提高用户体验。例如下图，用户更关注的是销售中的商品，即将到店的客户，以及即将发货的商品，所以我们将这些选项作为默认项。

三、数据操作

数据操作从控制范围可以分为单行操作、批量操作和全局操作。从操作属性可以分为新增数据、编辑数据和删除数据。

当从产品那里拿来一个原型图堆叠很多操作项，我们就可以根据控制范围来区分判断，从而明确摆放位置。单行操作可以放到表格里，批量操作根据亲密性原则放在左上方，这样可以离打勾矩形近一些，如果有利于用户操作，也可以放在左下方。全局操作则可以放单独一行，使得层级更加清晰。

调整后，我们发觉虽然解决了多个操作放一块的行为，但是层级还是不够清晰，我们可以通过割裂板块或者板块颜色不同来调整，使得识别性更强。

后记

B端设计强调的是在好用的基础上让页面变好看，所以更考虑用户体验。所有设计方式不局限与一种，只要操作上是顺手，业务上是合理的，都是优秀的设计。如果一个页面占据半屏都是筛选项，那么我们就得好好反思，因为所有筛选项不可能都是高频操作，接下来就需要去做数据埋点并进行页面优化了。另外，一张只有筛选项和表格的页面，表格数据查看区域建议占整个页面的百分之六十到百分之七十，这个时候浏览起来是比较舒适的。

文章来源：UI中国    推荐：最多三分糖

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

一个完整的后台，由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成，下面跟大家分享后台中的表格和表单的设计细节。

当接到一个全新的网页后台项目时，首先确定设计风格，然后考虑这个后台尺寸是做居中固定式，还是全屏响应式。全屏响应式的网页设计，除非有规定，否则你可以选择任意主流尺寸作为基尺寸来设计网页。当然，不管选择什么尺寸，都得基于做好一个后台而开展工作。

如何定义一个后台是好的？领导说好，用户说好，你自己也觉得好，那应该就是好的。大部分情况下产品已经定制好了每个功能模块，UI上只需要对着原型加以美化，如果你是这样做的，那么做出的东西一定会让人觉得有问题但是又不知道问题在哪里，总是想让你改。

跟产品经理好好沟通，他们只是把功能模块设计出来而已，并没有设计这些模块如何呈现，如何操作，如何结合，如何分类等等。交互上在后台设计很重要，如果有专业的交互设计师，这些可以交给他们，毕竟，交互设计的收入比UI要高。然而在很多中小企业，产品原型直接给到设计是很常见的。当缺少专业的交互设计时，不要让产品觉得我们只是按照他们的原型做美化，那跟美工有什么区别，不是看不起美工，美工的全程是美术设计工程师，很高大上的职称，但是大家还是不太愿意这样被称呼吧，可能觉得头衔套太大压力会很大吧。事实上，UI本来就应该具备基本的交互技能。

风格选定是很客观的，需要经过产品经理/领导确认，如果他们很相信你的实力，你得说出足够充分的理由，为什么要选择这种风格，而并不只是看起来更高大上或只是个人喜欢。

本人对后台网页设计的风格理解，大致可以分为三类：纯白背景风，轻淡背景风，深色背景风。在后台开始设计之前，你最好先选定其中一种风格，因为后面的所有元件的设计，都得基于这个风格来设计。刚刚好，在早些时间就已经发布了一个后台的三种风格界面设计的作品，大家可以看出每个模块的搭配和区分：

纯白背景风：线框/轻淡色（灰）背景（文字一般采用黑色）

轻淡背景风：纯白色块背景（文字一般采用黑色）

深色背景风：带有透明度的纯色背景（文字一般采用白色）

设计过程是很主观的，所有设计参数都取决于设计师，但是要严格按照设计规范，并且让所有设计看起来和用起来都是合适的。

全屏响应式+轻淡色背景风是目前很主流的设计，也是很保守和安全的设计。对于轻淡色的HSB色值，可参考：H:0-360；S:0-5；B:90-97，当然没有绝对大部分情况用的浅灰是最多的，如H0;S0;B93-95。

以下将依据这个设计风格做例子展示。

一个完整的后台，由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成，我把这些称为元件。这里主要分享的是构成后台中的模块和元件设计中的细节。下面重点跟大家分享表格和表单的设计。

你应清楚的是

为了避免在设计后台时一个人在YY，请保持左跟产品沟通，右跟前端沟通，这点非常重要。或许很多朋友在接到项目的时候不知道从何做起，会在网上寻找一些相关素材，然后会看到很多很炫的风格样式，像是各种各样的数据/图形展示，各种各样的统计曲线图，还有各种各样的展示动效，真想拖到自己要设计的后台。

如果合适当然可以，然而，很多情况下，统计分析一类的图表设计，产品已经有很多现成套用的模板，你可以做的很炫，但前端不一定会按照UI效果图来制作。从技术上来说，没有前端实现不了的效果，你真的不必怀疑前端的实力。所以，保持设计跟前端的良好沟通，更能提高工作的质量和效率，并且，很多时候口头/文字描述如何展示，是淡入淡出，还是弹出等等，前端是能理解的。通常地，做动效只是产品的一种展示，而并不是产品的本身，就当自己练手做动画吧。

简洁又灵活的表格

一个典型的表格(table)包含标题（表头单元格th），内容（标准单元格td），通常都是一行行(tr)展示。设计时，应该将标题和内容区分，比如标题文字加粗/颜色加深/字号加大，或标题背景加深。因选择淡灰背景风，一般用白色块区分的原则，表格设计也尽量不使用线框，然而一行行的标准单元格如果都是白色的就不便于预览，因此可以隔一行给背景设置比主背景更淡的背景。标题和内容一般有两种对齐方式，居中对齐，居左对齐，整个站的列表只选择一种对齐方式保持一致性。为了更简洁显示，我们还可以把每一列的间隔线去掉，但并不意味着间隔不存在。每一列的文字都不要贴边，给前端标记间距（内间距padding）值，告诉前端鼠标点击表头单元格的空白地方仍然可以拖动该列的宽度，拖动宽度时保持每一列的最小宽度并且标题仍然完全展示。

我们都遇到过这样头痛的问题，当列表字段太多，一屏无法完全展示，这时应该怎么做？给表格设计一个左右滑动的滚动条？如果内容真的太多并且已经确定，这也未尝不是一种办法，但是，重新设计过表格的字段或许会更好，这个时候应该跟产品好好沟通了。有以下方法：

• 减少不必要的文字（如下图中表头的“全选”去掉）。
• 缩略内容或者用…省略后面内容，鼠标经过出现更多内容（如时间可以缩略后面的时分，鼠标经过出现具体时间）。
• 将不重要的列表隐藏，表头右边设计一个>>按钮，点击跳到隐藏的列表，点击以后表头左边出现一个<<返回默认表格的状态。

因为每个列表的宽度是可以拖动的，我们不能决定其固定的宽度，但每一行的高度可以设置一个值，建议所有元件的高度、宽度、间距的数值参数都设置为偶数。

如果列表的数据很多，一般都会设计page控件，但是也有一些列表会设计点击加载更多，或者直接滑动滚动条加载更多。另外一种情况更常见，即设计固定高度的列表，一页最多展示5/10/20…条数据，不管多少条，它的高度都是相对固定的。然而有时候数据太少只有一两条，这个时候仍然要固定默认最多展示条数的高度，如图：

那么问题来了，在响应式设计当中，可没有什么参数是固定的值，一般都是用百分比来设置。因为默认显示的数据条数在任何宽度的情况下仍然保持不变，因此当列表宽度缩小时，内容出现换行会增加高度而拉高整个列表的高度。值得注意的是，当其中一条数据的内容有出现换行而又有其他数据没有出现换行的时候，每一行的高度都应该按出现换行的且最高的高度保持一致，并且内容仍然保持垂直居中显示。另外，当前端做成这种响应式的列表时，一般不再让鼠标拖动列的宽度了。

同一组数据的不同宽度显示

当宽度拖到第三种情况，按钮也出现了换行，那每一行的高度都应该按照这个高度保持一致，即使有一些数据只有一个按钮/地址并没有出现换行，如图：

当然，如果你不想让内容出现换行，就可以用上面说的那三种方法来实现了。

不要再说为什么别人做的表格那么高大上，明明自己做的效果图还挺好看，为什么实现出来却那么丑，当你了解这里面的各种参数和逻辑，并且很好的跟前端沟通，参照以上规则，不管再复杂的列表都可以做的得心应手并且得以实现。

整齐并带有交互功能的表单

在后台设计中，表单出现的频率并不低于表格，甚至可以说几乎所有类型的网页都会出现。比如登录注册、信息录入、搜索、选择器等等。常见的表单有输入框、普通按钮、开关按钮、单选框、复选框、下拉菜单。

一个输入框，通常有标签名称label、提示信息placeholder（输入信息后提示文字消失）、初始值value（需手动删除）。如果是必填表单，在适当位置（标签的前后，输入框后）加上红色*号（或其他符号）。

一些有字数规定的输入框，可以增加一个剩余字段提示

事实上，在设计表单之前，我们就要先对表单的标签进行优化，标签字段尽可能的简约。每个组的表单，标签都必须是对齐的，输入框/选择框也应是对齐的。当这个组的表单的标签字数较少并且较对应时，可以采用左对齐的方式，并且最长标签的名称离输入框有margin值。

另一种情况，也是更经常遇到的情况，当一组表单的标签很多时，某些标签字段不能更好的简化，标签的字段都不对应，这个时候可以采用右对齐的方式，这种方式更灵活。

当一组表单的标签太多时，请跟产品沟通并对其进行分类。

有些表单是有逻辑/顺序的，比如地区的选择、出生年月与生肖/星座的对应等等。例如，在选择省份之前，市区是不可操作的，在UI上做灰度显示不可操作。除了灰度代表不可操作，透明度也可以起到同样作用，这种方式也可以运用在按钮上。

带有识别功能的输入框：

当输入有误时，尽量避免弹出框提示，可以直接对输入框设计不同的状态显示默认状态、选中状态、错误状态、成功状态。

通过以上方式设计的一组信息录入型的表单设计，如图：

表单的设计可以单独出一篇更详细的文章，还有筛选/选择器一类的表单，这里就不一一描述了。

友好舒适的弹窗

弹窗在后台的出现频率非常高，其强度一般分为三种，弱弹窗、强弹窗、重弹窗。字面上已经很好理解，轻弹窗，一般鼠标经过的时候即可出现而不用点击，比如提示说明，显示更多信息，鼠标移过后立即消失，它不会影响下一层（当前页面内容）页面的视觉效果和操作，因此这个弹窗通常会设计一个浮动带有阴影效果的框。

而强弹窗则是一个对话框，它暗示你必须对这个对话框进行操作后才可以离开，如确认信息、错误提示信息。而重弹窗更像是一个新的页面，比如弹出的列表，详情，表单等。这两种弹窗通常是点击某一个按钮/经过某一个操作触发的。这两种弹窗一般会对下一层页面的视觉做蒙版处理，比如加上一定透明的黑色/白色，给下一层页面的内容做模糊滤镜等等。

当然，这三种弹窗式可以结合的，针对不同场景使用不同的弹窗设计这点非常重要，这直接关系到用户体验效果。你是否可曾遇到过使用一款产品时，动不动就弹窗，并且需要去点某一个按钮才可以关闭。

任何一种场景在设计上都可以得以解决，什么情况下使用什么弹窗设计，或者有时候必须使用强弹窗，但是又不想让用户操作关闭，我们可以设计几秒后自动关闭，或者点击弹窗以外的区域直接关闭。

弹窗还有两种主要的表现形式，一种是顶部有关闭按钮，另外一种是直接点击确认按钮或者读秒关闭。在保持规范性的同时，尽量避免按钮功能的重复，比如一个提示信息必须让用户点击确认按钮才可以关闭，那么就使用没有顶部关闭按钮的设计。对于重弹窗，一般都会采用顶部有关闭按钮的设计。

弹窗并不是后台的专利，它在移动端更高频率的出现，例如活动页面的弹窗，趣味性就显得更重要了。

总结：

这篇文章主要跟大家分享的是，当开始网页后台项目设计的时候，保持跟产品和前端的良好沟通。确定风格后开始设计，并分享了3个主要的点：

• 制作灵活又简洁的表格
• 设计整齐并带有交互功能的表单
• 选择友好舒适的弹窗

后台还有其他元件设计，欢迎大家共同探讨。

文章来源：优设网    推荐：程远

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

图表是数据可视化中最常用的一种表现形式，一定要吃透它。

随着互联网数字化越来越完善，数据可视化这个词的使用频率也越来越高，而图表是数据可视化中最常用的一种表现形式。无论是工作汇报还是后台设计，都离不开图表的使用。然而关于图表类相关的资料太零碎了，不成体系，对于初学者非常不友好，本篇文章我从图表的祖辈开始，把它都给挖了出来，希望对你有帮助。

什么是图表

图表的定义：可直观展示统计信息的属性，对知识挖掘和信息直观生动感受起关键作用的图形结构，是一种很好的将对象属性数据直观、形象地可视化的手段。

英文叫法：Chart。

用户对图形的敏感程度远远大于文字，所以产品就需要把数据信息可视化，用简单的图形表示出更多的信息量，而图表是数据可视化中最常用的表现形式。

接下来我们来介绍图表的具体构成及元素解析。

图表的构成

图表是由：标题、图例、刻度轴、数据展示、网格线、提示信息、水位线、时间轴组成，每一个元素都有它存在的意义。在实际使用中不一定非得把元素全部展示出来，精简化显示想要展示的内容即可。

图表元素解析

1. 标题

顾名思义，标题就是图表的名字，标题是必不可少的元素。标题的内容一定要言简意赅，不要太长，能两个字写清楚绝对不用三个字。

标题的常用位置有 3 个：左上角、顶部居中、底部居中。

一般情况下，标题字号 / 色值要突出一些，用户第一眼看到 chart 的时候，要清晰的看到这个图表是做什么的。

特殊情况下，如果需要对标题有额外解释的话，两种展现形式：

• 增加提示图标；
• 增加提示语。

2. 图例

图例的组成

颜色、名称、数值、单位。

图例的展现形式

圆形、开关、矩形、鼓包线、实线、虚线。

图例的位置

从左至右、从上至下。

图例的作用

• 标识出每个颜色所代表的的类别；
• 开启 / 隐藏数据显示；
• 图例显示的数值一般为当前值。

图例的颜色选择

同一组图例中，不要出现相近的颜色，否则在图表显示中分不清彼此。

产品使用中，要规范图例颜色使用，一般分为两种：

• 常用的图例颜色（颜色本身代表着行业中的某种含义），此类颜色需要是固定色值，无论哪个 chart 中，都是这个颜色；
• 无特殊含义的图例，可以规范出一个图例颜色的使用顺序表。那些无特殊含义的 chart 可以按顺序使用图例颜色，图例整齐划一。

图例过多时如何展示

• 如果图例可整合前提下，展示主要图例 / top n 图例，其他的图例做整合，增加个详情页来展示完整的；
• 如果图例不可整合/省略，则需要给出足够的展示空间。

共用图例

如果多个 chart 的图例一样，可进行合并，减少冗余图例。

图例省略

如果 chart 中只有一个图例的话，可省略。

图例名称限制

根据不同使用场景，为了更好的展示效果，要给图例名称设置一个最大值，超过最大值后省略展示。

3. 坐标轴

坐标轴分为 X 轴和 Y 轴，常规情况下为 1 个 X 轴+1 个 Y 轴。不过特殊情况下也会用到 2X+Y 或 X+2Y。

刻度值代表的意义

• 时间点：12:00；
• 时间段：周一、周二。

坐标轴使用规则

是否带单位：

• 如果刻度值的含义明确的情况下，可以不用带单位，比如：2018、2019、2020…；
• 如果刻度值含义有歧义的情况下，必须加上单位（具体是统一一个位置加单位，还是每个刻度值上加单位，则需要根据场景来判断）。

对齐方式（常用，但非必须）：

• X 轴：居中对齐；
• Y 轴：右对齐。

刻度值过多时如何显示：

• 可选择规律性省略刻度名称；
• 倾斜文字以显示更多的文案。

刻度值的选用一定要是同一个规律，禁止同距离的刻度值代表不同数据。

刻度点的样式使用规则：

刻度的线朝外。

4. 数据展示

数据的展示是 chart 中最为明显的地方，可以说如果只显示一个元素的话，就是他了。

数据展示的使用规则：

• 边界要清晰，不可虚化；
• 多个数据同时显示的时候，要保证每个数据都能清晰的看到，可以采用透明度来保证所有数据的显示。

5. 网格线

网格线的作用

呼应坐标轴，美观度。

网格线的使用规则

• 线的颜色要弱化，不要喧宾夺主；

网格线使用实线居多，尽量不用虚线。

使用场景

横、纵、横纵结合、无网格线。

6. 提示信息

通常情况下，提示信息用来标识出 chart 中重要点的数据信息，需要注意的是：重要信息尽量简化，信息量不要太大，言简意赅就好。

7. 水位线

根据不同产品的使用场景，有的时候会用到阈值，当达到某个阈值后，就会触发某种联动。这个时候就需要有个水位线了，它起到警示的作用。

形式有两种，实线和虚线，颜色的选取则取决于产品的警告级别。

水位线可以是一个，也可以是多个，视情况而定。

8. 时间轴

时间轴可以灵活地调节刻度值的上下限，从而更精确的看到自己想看的数据。

时间轴的功能及限制没有不是很复杂，所以就不过多解释了，需要用的话就用。

图表使用建议

1. 折线图 line

定义

折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。折线图是通过线条的波动来表示数据的波动，主要体现的是数据随着时间的推移而变动的图表。

使用场景

常用于观察一段时间内数据波动的浮动变化，比如：一天内内存的使用情况。

使用建议

Y 轴刻度值选择要合理，当前显示的数据波动要最大化的显示；

重要节点可以单独做重点标注；

数据拐点要平滑，不要太锋利。

2. 面积图 area

定义

面积图和折线图比较类似，区别在于面积图把数据区域做了个面积划分，让数据的显示更加清晰。

使用场景

面积图展示尽量不要超过 3 个图例，否则数据多的情况下，数据的展示会特别乱，影响观看。

使用建议

面积区域要和折线的颜色用统一色系，不要换色系；

面积区域一般要比折线颜色浅一些，这样视觉上更加让人舒适；

如果多条数据情况下也用面积图的话，面积区域尽量使用透明度，否则有的数据会被遮挡看不到。

3. 柱状图 bar

 定义

柱形图，又称长条图、柱状统计图。用来比较两个或以上的价值（不同时间或者不同条件），只有一个变量，通常利用于较小的数据集分析。

使用场景

• 柱状图分为横向和纵向两种展现形式；
• 用于在同一维度下不同数据的对比，用柱状图更能清晰的对比出数据的差异化。

使用建议

柱状图的厚度不要是固定值，要做成自适应来应对不同尺寸的分辨率显示；

厚度与间距的对比要合理设计；

可使用小圆角，千万不要用大圆角，太丑了……

如果想要强调某个柱子的话，可以进行颜色区分，但是柱子颜色不要超过 2 个（同一维度下）；

如果想要在柱子上显示数值的话，使用建议（下面的顺序为推荐顺序）：

• hover 的时候出现数值；
• 数值默认在柱子上显示；
• 数值在柱子顶部 / 右侧显示。

4. 饼图 pie

定义

饼图仅排列在工作表的一列或一行中的数据，它是有一个总和数据，方面查看每个类别分别占总数据的百分比的一种图表。

使用场景

• 常用于做总结、年度汇报等；
• 所有数据相加必须是 100% 才可用。

使用建议

• 每个数据要使用单独的颜色来表示，不要有相同颜色；
• 饼图中不能有负值；
• 图例数量没有限制，但是如果遇到可以合并的图例，可以进行合并；
• 饼图的开始点为 0/12 点位置。

5. 环形图

定义

环形图是由两个不同大小的圆叠在一起，切割中心部分得到的一种图形。

使用场景

• 环形图有一个独有的特点，就是可以在中心圆的位置突出某一项指标的数值。
• 它常用于做数据的监控，监控某一类指标是否正常。

使用建议

• 环形图的开始点为 0/12 点位置；
• 环的粗细要合理，不要太粗和太细；

环形图的两个圆要从中心对齐。

6. 堆叠面积图

定义

堆叠面积图是把数据面积按顺序逐步堆叠起来的一种图形。

使用场景

常用于不同资源中流量 / 容量的使用。

使用建议

• 不要有重复的颜色；
• 尽可能的把数据量按大小的顺序，由下至上的堆叠。

7. 堆叠柱状图

定义

堆叠柱状图是把数据柱状图按顺序逐步堆叠起来的一种图形。

使用场景

常用于不同维度下相同几个指标的展示。

使用建议

• 不要有重复的颜色；
• 按重要等级由下至上排序。

8. 非常用图表

上面介绍了常用的图表的使用建议，但是图表类型远远不止于此，还有很多非常用的图表类型，这次我先给大家列出来，如果大家感兴趣的话，我后面再写一期冷门图表的使用建议：

雷达图，散点图，K 线图，盒须图，热力图，旭日图，桑基图，树图，漏斗图，仪表盘。

常用的图表开源网站

1. echartsecharts

网站链接：https://echarts.apache.org/zh/index.html

2. highcharts

网站链接：https://www.highcharts.com.cn/

3. antv

网站链接：https://antv-g2.gitee.io/zh/examples/gallery

总结

Chart 是数据可视化必修课中最重要的模块之一，不可忽略。只有了解每个 chart 的定义及使用场景，才能在产品中用到最合适的那一个。

文章来源：优设网    作者：Luck gg

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

大家是不是很好奇别人的图形怎么都这么有创意，而自己想设计图形的时候却无从下手。可能是还没有掌握方法。今天就分享一个图形创意的方法。希望大家了解后，在设计图形的时候有一个清晰的思路。

△ 插图来自日本插画师 Yu Nagaba

我们先来看这个图形，大家能认出这是谁吗？

没错，是爱因斯坦。为什么仅仅几条简单的线条，就能把一个真实的人物刻画出来呢？这就是我们今天讲的内容，如何去简化并且衍生成完整的图形。

简化的图形一直是趋势。它不仅仅利于快速传播、具有非常强的延展性，也经常作为海报的主体。

标志上也大部分以图形为主。所以作为设计师，简化图形的能力是必不可少的。

但是很多人对于图形简化还没有一个清晰的理解，更多的只会在图片的基础上进行简单的描摹。

这样描摹出来的图像很可能缺乏识别度，就像这个例子，描摹出来后它到底是狗呢，还是狼呢？

简化的第一步是确定基本元素。总的来说，就是什么元素能够确定这个物体的种类。比如玫瑰是确定它是“花”这一种类。什么元素能让我们辨别它是花而不是其他东西呢？

枝茎加上花苞，以及红绿配色就可以让我们辨别它是“花”的种类了。至于叶子就属于补充元素。这都是让我们辨别它的种类的基本元素。

玫瑰花苞和枝茎的常态关系是：花苞在枝茎的末端。如果随意变换关系，会影响最简形态下的识别度，所以前期简化最好不要做变化。

虽然这两个步骤能确定它的种类是“花”。但是它是什么花呢？我们还分辨不出来。就需要到第三步，找到图形的重要特征。

这个时候玫瑰花就需要以种类内的事物做参考。也是和其他花做对比。找出玫瑰花区别于其他花卉的重要特征。

红绿配色是我们对玫瑰的印象。玫瑰的枝茎带刺。玫瑰花的花瓣开得比较紧密，花瓣层层包裹像漩涡一样。这些都是玫瑰比较明显的特征。

分析完这些特点，我们只需要在原有的元素关系上加上这些特点，就能分辨出它是玫瑰花了。而这些特点可以在保证识别度的情况下任意删减组合。

比如说去掉刺也能通过其他特征辨别玫瑰。或者保留刺，去掉花瓣的细节，如果对于玫瑰有刺这一点比较熟悉的人来说也可以辨别它是玫瑰。又或者保留所有的图形细节，把颜色变成黑白，都是可以的。

我们刚刚说的玫瑰是本身自带的特征，其实在现实生活中还存在其他因素影响的特征。

比如附加特征，这个图形我们都能分辨它是鸟，但是具体是什么鸟却看不出来。

一旦加入橄榄枝，啊，我们就知道，它是鸽子。鸽子本身是没有橄榄枝的，它代表和平也是人类赋予它的象征。所以这些属于附加特征。

还有状态特征，比如壁虎，哪种壁虎的状态和角度更容易让你辨别它们的身份呢？我相信应该是能看到壁虎紧紧抓在墙上的状态。所以它的状态是否能体现它的身份，也是很重要的一点。

现在的示意图它只是随便画出来的，如果用在设计中，这个图形是不合格的，所以需要对它进行改造。

衍生图形主要从两个角度入手，风格化和陌生化。

比如花的漩涡状可以用同心圆表现。花苞用半圆形、枝茎和叶子同样用最基本的形状概括。

这个风格的图形非常简单，会显得它的完成度不高。所以这时就需要陌生化的处理，让它在创意想法上有亮点。

比如我们把同心圆的颜色改变，虽然辨识度少了。但是这种创意图形加上文案与画面氛围，可以判断出它的身份。

那么漩涡一定要圆形的吗？

带着这种疑问，我们就可以开始第二个衍生。以四变形为基本形，通过旋转不同角度，再加上渐变风格。第二个图形就衍生出来了。可能这两个会偏抽象一点，那也可以选择保留更多的特征。

就像这个图形的外形和线条刻画上更大地保留了玫瑰形态，所以在颜色上就可以不用完全遵循现实。

很容易，三个不同的图形就完成了。

因为图形衍生的过程对于想法、造型能力、不同风格的掌握有所要求，没办法通过简单的理论来分析，接下来会通过分析四个不同的案例的衍生方式，给大家提供一些衍生的思路。

螃蟹它的颜色是橙红色。蟹钳是螃蟹比较明显的特征。蟹的八条腿可以作为辅助元素。它的躯壳偏圆形。这些特点的组合就能呈现一个非常清晰的螃蟹的形象。但是别忘了图形的衍生是需要对特征有所取舍和变化的。

为了让螃蟹看起来更加的陌生化，我们可以考虑改变印象中螃蟹的常见形态，让它以一种更加有趣的动态呈现，比如让这个多爪动物以一种太阳一样的放射状呈现，变身元气螃蟹。

第二个方案保留圆形的身体，加上尖锐的蟹钳特征，就完成了一个新的螃蟹图形。虽然颜色的变化和少了八条腿的特征，但是在保留其他特征时作出的变化却也能让我们清晰辨别它是螃蟹。

那传统的螃蟹都是圆形的身子，我们能不能尝试把螃蟹的身体变方呢？带着这种思考，保留其他特征的同时作相应的风格化处理。又一个新的图形产生。

这些就是螃蟹部分的衍生图形。

火龙果的配色是很明显的特点。表皮会带有绿色的鳞片。相对椭圆的身体。火龙果是白色的果肉和黑籽的组合。

第一个衍生很简单的，就是简化火龙果的外形，最后变化颜色。

这一次同样保留火龙果的外皮特征，因白色果肉和黑籽的结合让我联想到骰子，我们可以把这个想法和火龙果结合一下，让它变得更加有创意。

使用不寻常的切块方式，也能产生另一个图形。

这些就是火龙果部分的衍生图形。

颜色同样是我们辨别它的一个很重要的特征。除了颜色，我们还可以看到西瓜的表面有条纹的覆盖。像是西瓜这种简单的圆形水果，切块之后的造型，可能会更有辨识性。是一个很好的附加特征。最后，黑色的瓜籽同样是我们辨别西瓜时的一个显著特性。接下来就需要对它们进行风格化的处理。

西瓜的条纹部分，这一次我们用几何图形来做一些尝试。错位再压缩，让条纹的比例感更强。加入半圆形的西瓜切块之后，感觉有点像是人脸对吧？那我们就顺势添加一个眼睛，让它拟人化。

符合了这么多特征之后，造型上就不用那么写实了，我们完全可以抽象一些来绘制它。加入之前的眼睛和切块之后，它就完成了。

西瓜切开后的这个形状特征让我们很容易辨别它的身份，所以就可以保留这个形状特征，做一些大胆的变化。

比如颜色上可以完全脱离西瓜原有的颜色。用几何色块的方式去填充造型，让风格化的更强烈。到这里，这个图形也就完成了。按照这种思路，能不能保留配色，但是在切块的形状上进行改变呢？

那就到了第三个衍生，我们把它分成三块去表现西瓜的层次。因为造型已经足够抽象了，所以这里我们用颜色去尽量还原西瓜的印象。组合到一块，是不是就有西瓜切块的感觉了呢？

我们把这个数量增加一些，就更有辨识度了，再调整里面的一点变化。那么到这里，这个图形也就完成了。

这是西瓜部分的衍生。

青蛙是绿色的，由于身体和四肢的对比，会感觉四肢很细长。另外后爪很长，并且有蹼。弯曲的后腿是青蛙比较特别的地方。

这一次，我们可以从造型上做变化。比如切断连接四肢的关节部分，不过这样的造型在美感上还不是很理想。

那么尝试到这里，觉得下面的这个脚的直线结构很有趣，是一个很有变化性的特点。所以我们可以按照这个方向再去尝试一下。

把手臂的部分也修改成直线的样式，那么这里这个图形就完成了。

这一次，我们把目光聚焦到青蛙细长的四肢上，为了让造型看起来更生动，这个图形我决定打破对称的方式。将四肢和身体的比例做一些夸张的处理，让身体更小，四肢更大。爪尖用来划水的蹼也同样做了夸张的处理。那么在这个过程中，我们会继续摆放四肢的位置，让每个部分的空间看起来更均衡一些。

强调了四肢之后，我们还可以反着来，尝试强调身体的部分。为了让四肢看上去更细小，这一次我们用线条来绘制。

这是青蛙部分的效果。

来回顾一下我们这篇教程所有的图形。

我们从极简化的元素开始，通过不同特征的组合与变化，再为它添加陌生化和风格化的处理，就能能衍生出非常多形态各异、各种风格的图形。

文章来源：优设网       作者：研习社

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

导语：视频号从测试到上线也经过了很长的一段时间了，对于抖音快手来说，上面已经出现了不少电商巨头，但是谈到视频号，在电商行业目前好像并没有掀起特别大的水花，这又是为什么呢？

问各位村民几个问题，你可以试着在心理作答，也可以留言告诉村长。

1. 你每天主动打开微信视频号看直播卖货的次数是多少？
2. 你在视频号直播卖货中消费过几次？
3. 你有自己每天必逛的视频号卖货主播吗？

之所以要问大家这几个问题，也是源自于我今天和一位付费村民关于视频号直播卖货的交流。今天一位做视频号直播的村民私信村长，问我为什么那么多做视频号直播带货的主播GMV就是冲不上去呢？

她的原话是：微信生态里面这么多的消费人群，每天买东西的人也不少，咋就搞不到视频号直播里呢？这些人在朋友圈、微信群、小程序买，为什么就不在视频号直播里面买呢？

的确，视频号发展到现在已经一年有余了，号称日活也超过了3亿，为什么到现在还没有真正的直播带货玩家出现呢？今天，村长便把自己的一些思考和大家分享，也欢迎各位发表自己的看法。

一、认知：微信内的消费是随机的

尽管在微信里面有了支付、小商店、直播、小程序等电商的功能，包括还有京东、唯品会等电商平台的入口。但是当你问用户，微信是什么的时候？

我相信大家最基本的答案是一个私密的通讯录、一个交流工具。哪怕在微信里面还有公众号、朋友圈等内容。但是如果你问用户，淘宝是什么？头条是什么？百度是什么？

他们的答案其实也是肯定的，购物、资讯、搜索。这也就注定了，在微信里面的消费是随机性的。用户很少主动在微信里去找购物商城、去看视频号里的直播带货。

更何况，视频号支持直播并支持购物也才不久而已。但是你问用户哪里可以直播购物的时候，用户会告诉你淘宝直播、抖音直播、快手直播。因为你在这三个平台里面，都能找到直播带货的领袖，而在微信里面没有。

二、裂变：微信内的消费是私密的

我们都在说微信裂变，分享传播，但是各位试想一下，你真正在微信里面，主动向身边亲友推荐商品的次数有多少？是在你消费之前，还是消费之后？尤其你的出发点，不是为了赚分销佣金的前提下，你会在看直播的时候，把一件商品发给好朋友吗？

其实是不会的，绝大多数的购物分享，都在在消费完成之后，和朋友聊到的时候，才会分享的，而且视频号直播带货的分享也有很多不便：

1. 视频号播货还没有带分销锁佣的功能，所以用户没有足够充分的理由去分享；
2. 直播卖货是连续性的，当你看到A商品分享给朋友的时候，可能他看到的时候就是B商品了。

这种分享是不精准的，中断的，转化效率是低的，你相当于分享了一个直播间给你的朋友。而我们微信里面绝大多数的成交，还是单品推荐为主，而且也是消费后分享为主。

三、传播：微信内的投放是中断的

既然依靠个人分享直播间不行，那就花钱买流量啊！

最近视频号也上线了推广助手，可以针对个人的视频号进行投放。但微信内的视频号直播投放，其实是中断的。当你在淘宝、抖音、快手直播卖货的时候，你只要在开播前后根据流量的情况，适时进行一些投放，就会有流量导入进行。

但是当你在视频号里面进行投放的时候，用户想要看到你的视频号直播，必须点击【直播和附近】，可大部分用户的第一路径是点击朋友圈下方的【视频号】。

微信主动把视频号内容和直播给分开了，大家可以通过【视频号】入口找找，你连续刷到直播的次数有多少？尤其是和抖快淘相比的概率。另外，在抖快淘三个平台直播时，只要你的直播热度达到一定阈值还会得到官方的推荐，会影响到更多的人。

而在视频号呢？官方就算给你推荐了，很大一部分流量也是浪费的，所以再问各位两个问题：

1. 视频号百万大号有几个？能立马说出来吗？
2. 视频号直播时同时在线人数超过1万的有几个？

在视频号一个5万粉丝的账号都可以算上大号了，都可以接广告变现了。但是5万的账号和快手抖音淘宝100万、500万甚至1000万的账号相比，开播之后观看的人数完全不是量级的。

当然许多人一定会说，视频号一个粉丝的价值至少大于快手5个粉丝、抖音10个粉丝，但是村长想说，个体价值再大，也打不过基本量啊！

四、信任：微信内的直播消费信任度不够

我们在微信内的消费，绝大程度上都依赖于个人信任关系的建立。所以除非视频号的主播你是认识了解的，或者是朋友主动分享给你，极力推荐你购买的，你才会去关注或消费。

而在抖快淘看直播卖货，除了基于个人对主播的了解之外，还有平台官方、店铺等级、用户口碑。大家在看看视频号内直播带货，店铺有等级吗？买了货之后哪里看订单？主播明天还会不会直播？

消费的不确定性，极大提高了用户在视频号里面自主消费的门槛。

五、承接：视频号没有直播溢出的流量

不知道各位有多少人在快手看过一些大主播卖货的？

比如当辛巴直播间昨晚卖爆了一款商品，你在当日或者次日就能刷到其他人在视频或直播分享辛巴的直播同款。包括淘宝、抖音也是如此，只要李佳琦、薇娅、罗永浩直播带过的货物，过几天你就能看到许多商品的标题写着XX同款，包括还会用他们直播视频进行投放。

这在一定程度上面，再次强化用户对主播带货的认知。但各位什么时候看过，在视频号里面，一个主播卖完货，全网都在传播的？都在说XX主播同款的？另外，各位村民在视频号里面每天都会去刷一个主播视频的有多少？

所以，我们直到现在依然还没有看到，视频号里面有哪个真正的电商KOL，除非官方愿意去打造这样一个人设。但事实我们发现，整个微信体系内，微信是干预品牌最少的，都是靠品牌自己发展的。

那么，视频号这么好的工具、又有微信天然的流量和无缝的对接，难道真的就卖不了货了嘛？

那肯定不是的，虽然短期里面，我们很难看到一个大品牌或者电商KOL的出现，但是视频号卖货的可行性是存在的，而且对于个人直播来说，是很有好多的。

六、个体：视频号电商更适合个体户

视频号依然延伸了微信整体的理念：再小的个体也有自己的品牌。作为个人来说，想在视频号内做直播带货是完全可行的，原因有三：

1. 各种支付条件都很满足，比如支付、店铺；
2. 个人的信任价值更容易在小范围里面建立；
3. 流量的获取与转化方便，个人可以依靠朋友圈、微信群、公众号以及视频号本身吸引流量。

这也是为什么，许多做教育的，卖美妆、服饰、家居个人，在视频号能掘金的原因之一。

七、矩阵：视频号矩阵卖货才是出路

想在视频号里面，做大电商规模，就真的没有办法了吗？

我觉得除了官方主动持续造星以外，另一条路就是矩阵卖货。其实这种方法目前已经有一些品牌在尝试了，目前的交易额已经能做到三四千万了。

具体的做法就是打造头部主播甚至是创始人CEO出场，靠日更视频号和直播，来招募品牌代理。再通过培养1000个、10000个个人视频号主播，每天直播卖货。

只有这种方式，才能一天让一个品牌做到几千万的曝光量，从而产生转化。所以我个人认为，视频号直播，尤其是想做规模化，最适合传统的微商品牌、连锁店铺以及社交电商平台。

因为在他们这个体系里面，分销人员是现成的，大家可以统一卖一些品，保证了某一款品在视频号内集中的传播。

文章来源：人人都是产品经理   作者：十里村

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

最近负责的新项目快上线了（感觉我好像一直在做 0-1），给大家总结了5个一定会遇到的新项目盲区及最新的解法，希望能帮助大家在交付开发前就顺利完成设计输出。

关于苹果账户登录的硬性规定

2020 年 4 月后，我们在设计 iOS 登录界面的时候都知道必须加上苹果官方强行要求的 Apple 账户登录按钮，但关于这个按钮的设计规范其实有比较硬性的规定，没有注意的话到了开发还原的时候就容易踩坑。

在国内的 iOS 登录设计中通常突出的主流登录方式是“微信”，手机登录以及其他的第三方登录都会以更弱一点的视觉方式呈现。

苹果官方是允许对 Apple 账户登录按钮进行一定的自定义的，其中就包含将其弱化为一个圆形的图标按钮，只是图标与圆形按钮的大小比例是官方固定的比例（这个大家直接下载官方提供的图标，它是自带留白的区域的，保持图标与高宽一致就符合要求了）。

而国外的 iOS 登录设计中通常没有那么多的第三方登录方式并存，主要的“Facebook”与手机登录通常会与 Apple 账户登录按钮同一级出现在界面中。

这个时候需要特别注意的是，苹果官方对于这种大按钮的限制主要在于 3 个部分：

• 按钮的高度需要等于图标的宽高（图标官方有提供下载，已经是自带留白区域的）
• 按钮的高度需要与中间的文案成一定比例（字体是按钮高度的 43%，比如 44 的高度配 19 的字）
• 图标离左侧最小间距需要超过按钮高度的 10%

剩下的按钮样式，比如颜色和描边也非常有限，只可以使用白色填充黑色描边与纯黑色底这 2 种。

想了解更多具体内容，可以参考官方贴：https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/

关于安卓启动图标可带动效了

还记的早几年做安卓项目的时候上架应用商店的启动图标输出还是和 iOS 差异不大的，基本就是尺寸换换。这次输出启动图标，被安卓的开发大大告知，安卓可以出这种带动效效果的启动图标了，它的原理和效果，如下图：

实现这个效果的设计配合输出也很简单，只需要整理一下的具体启动图标输出就可以：

1. 启动图标（前景，不带背景的）-108dp（324px）

当然以上仅针对纯色背景，可以与 logo 主体轻易分隔的启动图标。如果是混为一体的话就需要调整输出方式为以下：

• 启动图标（前景，不带背景的）-108dp（324px）
• 启动图标（背景）-108dp（324px）

想了解更多具体内容的铁汁，戳底下官方传送门：https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

关于全屏切图的压缩限制

这次新项目又遇到了开发中改稿的问题，大部分都因为全屏的背景图切图大小问题。

个别全屏视觉的界面，比如闪屏、登录页、音视频语音等等，我们通常设计时不考虑切图的大小问题就会比较放飞去设计。

但实际情况是一张全屏的花色 3 倍 png 切图基本都在 2M 左右，就算把压缩率提到 80%+（市面上大部分压缩软件的压缩率都很有限，比如大家常用的 tinypng、pp 鸭等），就算你重复压缩，也有至少 200 多 KB，远远超出开发 100k 以内的切图大小限制。

所以不得不要求我们在输出格式的时候抛弃 png 格式，启用 JPG。

不过实际设计时候我们可能仍然会遇到不能用 JPG，必须用 PNG 格式的情况（透明度蒙层），那么建议大家可以尝试以下 2 个小技巧：

• 尽量使用纯色背景设计，这样背景图可以用代码来写，主体切图大小可以想对控制小一些。
• 如果还是需要使用花色背景，建议可以尝试高斯模糊的花色背景，这样开发可以直接用 1 倍图进行拉伸，也可以有效控制切图大小。

最后不想屈服于样式限制的铁汁，一定记得提前输出格式大小康康会不会超标严重（尽量控制在 100k 以内），不然无法落地再好看也没有用咯。

关于动效到底导出什么格式不坑爹

目前关于移动端界面里个别小动效的导出比较主流的几种格式是：Gif、逐帧图、Lottie（Jason）、Webp、Apng。

Gif、逐帧、包括前几年流行的 Lottie 大家应该都比较熟悉了，这里稍微科普 2 个陌生一点的格式：

• Apng：一个 PNG 格式的位图动画格式图片
• Webp：2010 年 Google 推出的全部通吃的图片格式（可代替 Jpg、gif、png）

目前我觉得性价比最高的就是 webp，它的优势主要在于：

• 压缩率极大提升，同分辨率的 webp 比 gif 要小很多
• 支持位图、支持支持 Alpha 透明和 24-bit 颜色数、支持 3D 翻转（这些 GIf 和 Lottie 都有限制），也就是不会出现毛边啦、变色一类的坑爹情况
• iOS、安卓都支持（比如同样高性价比的 Apng 只能用于 iOS 端）

唯一的 2 个问题在于：

• webp 目前只兼容 Chrome 和 Opera 浏览器，其它浏览器不支持。不过基本我们都应用于移动端应用，所以浏览器兼容对这个影响应该还好
• AE、PS 等各类动效设计的软件无法直接导出 webp 格式，需要通过插件或其他第三方软件转换。

我度娘过一些导出 webp 的方式都不是很好用，问了我司的动效设计师，推荐一个比较简单靠谱的方式分享给大家：

1. 先从 AE 导出逐帧图（记得需要循环的动效做好循环）

不知道如何到逐帧图的看这里：渲染→渲染设置→格式→选择“PNG”序列→导出即可

2.下载 isparta

3. 直接将 AE 导出的逐帧图文件包拖到 isparta 里导出 webp 格式（可选）

关于切图标注协作方式谁家强

设计交付的协同平台现在市面上很多，很多大厂也有自己内部的协同平台来承载设计交付，俺们猪厂用的叫 dbox（非常滴不好用），在强推之下开始申请经费改用 Figma 了。之前为了更换协同平台，把交付的协同平台都做了一番调研，这里给大家直接看表格吧。

看完图大家就会发现除了 Figma 大家的使用情况不会差很多，差的主要还是钱。总的来说的建议就是，如果已经从sketch改用Figma的土豪团队就可以直接分享Figma文件链接给开发搞定切图标注以及文件存档这2件事儿了。

如果还在用 sketch 和 XD 的铁汁，交付型的协同平台我个人比较推荐 Zeplin，虽然有的人会说它服务器在国外很卡，我觉得其实还好吧，同时 Zeplin 近几年还解决了 Win 系统适配的问题。

然后最后小吐槽下腾讯的 Xshow。一开始我觉得它是最香的，因为高清度、流畅度到美感几乎都比较完美。一直到我发现了它居然是个完全开放的交付协作平台，也就是别人知道你的账户 ID 之后就可以搜到你并看到你的所有项目文件，瞬间安全系数降为 0。作为一个明显对标企业级的协作平台这么疯狂的植入社交功能，到底是企鹅的社交基因太强大还是怎么肥四？

文章来源：优设网     作者：Nana的设计锦囊

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

       文字，是最常见的动效对象之一。我们可以通过对透明度、位置或者角度的改变，制作出丰富的动态效果。但你可能不知道的是，AE内置了超多的文字预设，只需用鼠标点击几下，就可以完成复杂丝滑的文字动效。 

AE文字动效预设使用方法 

       在AE的窗口中打开“效果和预设”面板，所有和文字有关的效果都在动画预设中的Text文件夹内，共十七种动效类型

       将动效预设拖动到对象上，即可应用动效。

17种动效预设预览

      十七种类型分别为：3D文字动效、入场动效、离场动效、模糊动效、曲线动效、表达式动效、填充与描边动效、图形动效、亮度与透明度动效、机械化动效、多样化动效、多行文案动效、拟态化动效、路径动效、旋转动效、缩放动效以及字间距动效。

预设搭配组合

          有些效果可以相互叠加组合，理论上我们能做出成百上千种不同的效果。 

文章来源：UI中国       作者：设计师深海

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

调查问卷，是一个低成本快速收集资料的定量分析工具。这是个看起来简单，产出的问卷也看似很简单，但是在整体设计的过程却是需要很多的思考和预备。

关于调查问卷，会分成三个部分来解说，

• 第一部分是关于「设计前的准备」
• 第二部分是关于「如何设计问卷」
• 第三部分是关于「数据清理和产出问卷报告」

废话不说，直接开干！

着手设计问卷前，先问

1. 为什么做问卷

这个是问卷的目的，也直接影响后面问题的设计。

2. 如何使用问卷的研究结果

这是关于问卷解决方案的落地。不需要太过细致的落地计划，但是至少要清楚，这份问卷的研究成果，可以获得多少支持力度。不管问卷发现了多么伟大的问题，如果没有落地，其实是没有无意义。也切忌不要今年做的研究结果，明年来实施，那问卷的时效性和准确性就会大打折扣了，因为市场的瞬息万变。

问卷的目的

这是做所有事前，都要问的问题，「为什么做 Why」。而这个问题为什么重要呢，因为这会关系到设计问卷的核心内容是什么，会影响问卷的构成，当然最后也会产出不同的结果。

问卷的目的主要可以分为六个方面

1. 收集用户信息

很多时候，我们或许知道理想目标用户是谁，但是谁才是真正使用我们产品的用户呢？了解真正使用的用户，可以对用户进行更针对性的分析和设计。

2. 了解用户使用习惯

了解用户在产品上是如何使用产品的，以及用户的使用路径是否按着我们期待的方式进行，这是很有必要，这也是一个验证的过程。

2. 满意度

了解用户对产品的满意程度，对于用户不满意的方面，可以进行归纳总结，并给出合理的解决方案

3. 建议反馈、吐槽、好评

从问卷中收集用户的心声，明白槽点是什么。同时也收集用户的好评，这也是激励团队一个很好的方法，因为是直接来自用户。

4. 体验优化

对一个成功的产品来说，它要好用，它也要好看。产品有大改版前，可以用问卷来评估整体产品的体验如何，以便在重新设计的方向上能更好聚焦。

5. 需求验证

很多时候，需求可能没那么明确，用户和产品间始终存在着 gap， 所以我们有时对方案琢磨不定时，可能会试运行，后续看用户反馈。通过合理设计问卷，我们也可以稍微窥探到用户的想法

但是对需求的验证，单通过问卷还是比较难的，只能窥探到比较浅的一层，最好后续可以对用户进行访谈来做后续跟踪，以便了解事情的全面。

这里要注意的是，问卷不适合探索用户的新的需求，或者要验证很精准的信息等比较复杂性的问题。

如果你问用户，近期会推出新功能，问他会不会用。大致上，你得到的回答都是肯定。很多时候，同意比拒绝更简单。

问卷问题的分类

根据提问的方式，可以分为 「是什么」「怎么样」「怎么办」

1. 是什么

主要是用户信息、使用习惯等问题。

例如，年龄层、职业、使用产品目的、知道产品的渠道、使用频率、使用竞品软件、整体满意度等

2. 怎么样

主要是询问用户原因，比如打这个分数的原因，某功能使用如何等

3. 怎么办

主要是询问用户的建议、期待产品改进的地方

设计问题需注意几点

问卷中并不是所有问题都适合问，有一些比较敏感的问题需要去避免，以免激起用户的负面情绪

1. 敏感性问题

个人信息类的问题比较容易会有敏感信息存在，就像你问用户工资区间，和在问卷最后告知用户参与问卷都有奖品，需要填写收货地址。很明显收货地址的准确性会比工资更高。

2. 措辞严谨

• 无错别字，文明用词
• 用词不产生歧义，准确表达；比如平时，比较多、近期，每个人对此理解是不同的，要提供明确的时间节点
• 一个问题，就只问一件事
• 尽量用陈述语句，不使用反问句、疑问句、否定句，用户可能无法准确明白，特别是否定句，用户有可能看成肯定句。
• 避免用语过于口语话，不中英文夹杂，除非名词已完全普遍。根据目标群体的不同，会有差异性。比如 iOS 系统，不一定所有人都知道，这指的是苹果的手机系统。
• 标准用词，尽可能或不使用缩写，比如 h，hr, 直接写小时，会更好。

3. 问卷的顺序

先简单后复杂，并注意整体逻辑性的表达。循序渐进，如果一开头就是很难的问题，用户很容易放弃答题

4. 问题长度

尽量保持所有问题在一个差不多的长度呢，保持一样的节奏。避免时长时短

5. 避免专业词汇

很多时候，我们会用一些所谓的“行话”来表达，但是在问卷当中，无法保证用户同样是理解的，而且也会让用户产生距离感，非必要情况下，不要使用专业词汇

6. 选择题枚举要穷尽

题目数最好不多于 7 个，太多也会造成用户选择困难，最后记得加个其他并提供文本框输入

7. 避免互斥、重复、相似

问题避免前后矛盾，造成用户困扰，也不要重复或相似度极高的问题，除非这个问题是陷阱题，为了检验用户是否认真答题。但是在数量有限的问题中，一般比较少使用陷阱题

8. 保持开放性

为所有选择的选项，加入「其他——」「以上都不是」「不知道」，用户可能会觉得问题或答案不匹配，而不知道选什么，这时需要给用户一个出口，避免产生无效数据

9. 避免询问引导性的问题

大部分用户认为 XX 功能，很好用，你觉得呢？

如果看到这样问题，大概可以从中读出两个信息，1. 大家都觉得好用 2. 平台希望我说好用。

这个问题所传达出来的隐藏含义会引导用户做出不真实的反馈，这是没有意义的问题

10. 避免让用户选择「 是/否」「真/假」「好/坏」

强制选择非黑即白，大部分情况下没什么意思，因为用户可能不确定。这个问题本身也没有太大价值，也会错过用户一些比较有趣的回答。

所以如果这个问题的目的，是一定要知道的，可以更改提问的方式。

对于用户的问题，答案要可以量化表达，来产生数据，才便于后续数据的分析

11. 避免问用户将来的事，或回忆许久前的事

当人们将自己的行为投射到未来时，通常会过于简单化和理想化，人们更擅于解释当下进行的内容。

所以，如果要知道特定环境下用户的操作，则要配合合适的场景预设，并且是用户熟悉的场景。或者可以直接问，今天你会如何如何

所以可以通过询问今天的行为来，确定将来会不会使用。当然这不是绝对的，毕竟未来存在太多变数。

对于许久前的用户的操作行为，也尽量不询问，因为会忘记，而当强迫他去思考时，他可能自己脑补，产生不准确的记忆，进而对研究结果产生偏差。

12. 其他

问卷中存在多选题，必选题，选填题，记得预览问卷时，注意问题平台有无自动添加文字说明。

不要用 checkbox, radio 来区别多选和单选，这是不能准确的传达，也有可能用户没有注意到，或者就不清楚，而使用文字的表述会更清晰，不会产生歧义。

必选题，选填题，如果问卷平台，也只是用*号来表达必选时，建议在文字上也加上这样的说明

设定日程安排

整体问卷的过程需要时间，所以也需要的具体的日程安排，以便整体问卷的进行是井然有序。

日程安排中，要包括：

• 确定问卷的目标人群、确定问卷目的
• 问卷设计时间
• 问卷评审时间
• 问卷内测时间
• 问卷投放时间、时间长度
• 产出问卷报告

最后的话

调查问卷从准备到产出报告，需要一个过程，建议与其他设计师或 PD 来一起配搭工作，更高效的完成，一个人去做，总是会有一些盲点，并且会比较大的压力。

如果你在问卷方面是新手，也建议找个有经验的设计师或 PD 来做你顾问，减少一些不必要的坑。

文章来源：优设网       作者：箴盐设计

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