如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

之前一直觉得色彩，图形，字体是 UI设计的三大构成，任何设计都是从这三大元素开始的，所有的 UI设计都是由这些构成的，但是却忽略了界面中空间的运用，也就是我们常说的间距。今天我想分享下几年前从 Google 的 Material Design 以及 8 pt grid 中学到的关于间距相关的教程，这篇分享有助于我们处理好界面间距一致性问题，让设计更加统一，同时定义规范里面的原子设计方法，能完美融合。

间距无处不在，界面中的边距，距离上边，左边，右边，顶部等各种属性。因此作为一名设计师，我们需要很好的掌握各种间距规律，通过间距规律很好的组织好内容。

一、为什么要统一间距？

是否大家和其他设计师在合作过程中，经常打开一个设计师源文件时候，发现各种间距大小，各种不一致地方，明明同一个页面，已经定义好规范，但是每个人使用的间距大小不一致。可能你们规范已经定义好了，最小单位是5，按照5的倍数去做设计，但是还是会出现各种奇葩的间距，10，12，18等等。或者说有的设计师是按照5来说的，间距会出现10，15，20，25，30，很难解释清楚哪种场景下用什么样间距规则。

不止是设计师，估计研发打开我们标注稿都是崩溃的。所以我们需要去统一间距规则，它的优点是能很好的让设计师之间合理的了解我们间距系统规则，同时开发在做设计开发时候，不需要每次都重复开发不同间距，导致整个 APP 风格混乱，那么我们如何去做呢？

二、它的价值是什么？

对于设计师：效率上，减少决策和思考，当我做一个需求时候，我不需要考虑到底用多大间距，同时能保持元素之间的节奏。

对于团队：设计师和开发之间沟通更加简单，开发人员能很好的按照最小单位按照增量递增去写间距，而不必每次都进行测量。

对于用户：他们信任的品牌有一致性的美感，在设备上没有模糊的像素偏移等，就和微信一样，说不出哪里好，但就是最好的。

三、站在巨人肩膀上思考

△ Material Design 在他的布局中有讲过，他们的间距，所有间距规则都是在8的倍数上进行递增，而且并不是毫无头绪的递增，只定义了几种增量关系，克制的有序的间距弹性，最小的是8，16，24，32，48，56，72。

△ 同样在 iPad端，间距规则也是有序的，克制的间距弹性，而不会出现我们日常设计中经常间距随意任选的使用，毫无规则乱用。

△ 在 Airbnb 的规范中，PC 和无线所有设计间距规范原则只定义了5种，8，16，24，48，64让规则更加简单，更好的统一了整个风格的一致性。

这些原则除了在元素和元素中运用，其实在按钮中，在按钮里面文字和上下左右的距离，都是有序的，我特别喜欢一句话，设计语言只有在有序的遵循和重复使用下才有用。

四、怎么做？

1. 定最小原子单位

这个最小间距规则可以是3的倍数，像蘑菇街、豆瓣一样，如果你希望产品留白比较多，也可以是5的倍数，例如 pinterest、亚马逊等，这个没有绝对的，一切根据你们产品内容丰富程度决定。

△ 亚马逊和 AliExpress 都是按照5为倍数来做间距增量

2. 确认间距弹性

大家都买过衣服或者鞋子，一般鞋子尺码，只会有固定几个（36，37，38，39，40，41，42，43）如果你需要的鞋子特别大，可能需要订制，包括衣服也是同样（XS,S.M.L.XL）。

在定义间距上同理，以往做设计规范的经验，在上一步定义好最小单位就完啦，然后设计师按照增量去设计就 ok，这样只是完成一半，如果按照4的增量（4，8，12，16，20，24，28，32，36，40….）这种带来问题就是任何间距都不可预测，提供的选择过于接近了，在什么情况下使用24，什么情况下使用28，我们很难去决策，如何去做。

之前在团队做过一个调研，我们问了设计师，也看了很多设计源文件，包括国外也有一个类似调查，就是在用4作为设计原子间距做设计时候，设计师使用最多的间距有哪些？结果很有意思，使用16的占一半，8和32的占一半，所以定义太多间距其实毫无意义，只会带来设计时候的不确定元素。

3. 根据业务场景，定义间距

正如前面所说，过多间距规则，只会带来设计师困惑，徒增界面复杂性，对开发，对设计师都是一种负担，所以我们在定义间距时候，一定要少，要让我们间距原则覆盖到绝大多数场景。可以从 XS，S，M，L，XL 为参考，小，中，大为纬度。

△ Airbnb 的间距规则 XS，S，M，L，XL 是最小为8，常用8，16，24，48，64，Airbnb 则更加克制，给设计师选择更少，反而更能保持设计次序。

△ quickbooks 的间距规则 XS，S，M，L，XL 是最小为4，常用8，16，20，40，60能很好满足各种业务场景，包括各种的间距场景都是在此基础上去拓展。

△ 那么界面中所有的间距地方，全部运用8，16，20，40，60这几个原则来做设计，保证页面统一性。

△ 包括页面中的元素高度，比如 banner 高度也是按照间距增量去设计高度，那么整个页面就更加有系统性和科学性。

△ 这也是我们在做系统设计时候经常用到的，通过增量来做设计。

△ 同理，在国外很多优秀产品中，我们不难发现这种规律的使用，更好的提升了设计效率。

总结

统一简化间距规则，通过这些规则，构建一致性界面，所有边距，元素空间都遵循规则时候，对于视觉设计和开发人员来说，都能很好解决一致性和效率问题。

在我们刚开始设计时候，可能会觉得没有真正的好处，但是当项目越来越复杂时候，团队规模越来越大，每天处理各种设计原子和设计分子时候，你会发现，当你使用固定的间距，它会比之前随意的间距规则有更好的效果。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在今天的 UI设计中，投影使用的范围和频次越来越高。打开手机APP，或是看追波上的练习稿，都可以看见无数投影使用的案例。

掌握好投影的使用，是必备的 UI 视觉设计基础。投影远没有大家想象的那么简单，即使软件中可以设置的参数并不多，在我的教学过程中，很多学员始终没办法很好的应用投影来提升自己的设计质感。

所以，这篇文章就会详细讲解投影的正确设计方法。

一、投影的基本介绍

在了解投影和设计的关系前，我们要先知道投影是什么。用专业点的方式解释，即：

投影指的是用一组光线将物体的形状投射到一个平面上去，称为「投影」。

有了光源，才有投影。光影是美术和摄影最核心的基础。那么投影有什么特征呢，先看看下面的这张静物摄影。

图中有很清晰的向右延伸的投影。距离主体越远的投影，也就越模糊，越淡。通过这样的投影我们还可以很轻易的分析出，光源在左侧，且物体是放置在地面上的。

投影可以带给我们非常多隐藏的信息，而这些往往被我们所忽略。再看看下方的案例，当背景无法直观的提供物体所处高度时，投影就能起到关键的作用。

在平面画布中，投影的做法直接影响我们对元素的认识。 例如下图中，投影可以让我们了解按钮本身是有厚度（遮挡了光线）或是离开了水平面处于悬浮状态。

当然，投影除了对物理信息的暗示，还涉及到对视觉效果的表现。上面的白鞋投影很重，且轮廓清晰，这样能塑造更强烈的冲突，增加鞋子的立体感。但是不是所有摄影都需要有这样雕刻版的投影效果呢？答案是否定的，例如下面这张图片。

主体物和背景色彩能很好的结合，创造出有趣欢快的视觉氛围，所以只需要柔和的投影即可。在 UI 的设计中，对于阴投影参数的定义，也会直接影响我们画面的视觉效果。

成熟的摄影作品，会根据对投影的需要再去调节打光的方式，这是个非常复杂而且繁琐的过程，需要经年累月的学习。而在设计的过程中，创造投影却非常容易，所以我们更该重视的是，如何正确的设计投影。

即先构思出元素的物理特性，再给予它正确美观投影样式。

二、UI设计中的投影

在进入了扁平化的设计环境后，投影有很长一段时间被抹除，因为大家认为那是拟物的遗毒，就怕设计里用到拟物元素显得不够时髦。

到了 Material Design 发布以后，谷歌在规范中增加了 Z 轴的概念，也就是为平面预设了立体的空间，设计元素可以定义与空间中水平面的距离。

下图中，Z 轴数字越大，代表和水平面的距离越远，上升得越多。而带给我们这种感受的原因，就是投影的暗示，元素本身的坐标并没有任何改变。

既然增加了投影，那么谷歌的专业设计团队，肯定不会很随意的制定其参数。当我们打开谷歌的官方 UI KITS 源文件进行查看时，就能发现其中的不同。

可以看见，元素叠加了多层的投影，这是违反新手对于投影定义的直觉的。原因在与，一般软件中定义的投影，其深浅与元素的距离是线性等比的，而现实世界中，深浅与距离是非线性的函数关系。

在 UI设计师接触的平面类软件中，只有 PS 具备完美复现这种投影的能力，即控制投影的等高线。

而 Sketch、XD 这些软件都不具备这样的功能，且手机系统的投影渲染机制也是线性的，所以谷歌就通过使用 TopShadow、BottomShadow 叠加的方式，去模拟真实的投影效果，让它们看起来更和谐自然，这就是多层投影的奥秘。

上面出现的投影都是黑白灰，但在现在流行的设计作品中，最常见的是应用了彩色的投影，摄影中也经常会应用彩色的投影渲染氛围。

但是，投影中的这些彩色区域，并不完全都是投影，还包含了折射和漫反射的原理等。为了简化，我们可以认为是光线穿透物体从而投射出带有物体本身颜色的投影。就像撑起一把绿色的阳伞，伞下的人头顶也会弥漫着草原的芬芳……

三、投影设计演示

在开始展示具体的设计案例前，我们要先明确一个原则，即：

优雅的投影是让你感受到它的存在，但不会吸引你去关注它！

一般的设计软件中，元素的阴影即是在元素的背后添加了一个相同轮廓的纯色矢量图形，我们可以通过 XY 轴移动它的位置，并使用模糊的参数来设置它的模糊度。

当元素的距离水平面越近，阴影距离元素也就越近，即 XY 轴越小，模糊也越小，如果离得远则相反。

1. 常规投影类型

第一种投影的类型，即光源从元素的上方投射下来，可以参考谷歌提供的投影方案叠加两层投影。第一层是 XY 轴坐标为0，只添加模糊的参数，透明度较低。第二层阴影使用相同的模糊参数，增加 Y 轴坐标，透明度较高。

在非 MD 设计中，它浓郁的投影参数会让整个界面变「脏」，变拥挤。我们要做的是要降低投影的透明度，这样才能让投影的表现更自然舒适。要牢记的是，当使用纯黑色做阴影时，透明度无论如何都不应该高于 20%，正常区间在 5%-15%。

既然知道阴影属性的规律，我们还可以复制个矢量图层做模糊效果也可以得到一样的效果，这种方法可以支持我们设计出更真实的投影。即将 BottomShadow 独立出来，缩小并向下移动。

如果想要得到彩色的投影，那么只要切换投影的色彩即可。值得注意的是，不同色彩的刺激程度不同，我们要凭感觉去调整它们的透明度。

如果感觉不得劲，阴影太少了，那么我们就让元素的 Z 轴上升。

既然前面提到彩色投影是由于光线穿透了元素，那么当使用了渐变色或者是图片的投影，我们在上一步复制出的那层投影，就可以不使用填充色，而是直接用渐变或者是原图进行模糊和透明度调整。

2. 非常规投影类型

光有垂直于平面的关系，那么发挥想象力，我们还可以更改光与面的位置，如下图所示。

在这个场景中，投影就作用在图片下方的地面，只有地面处于透视状态时，才能可以看见它的投影，所以，我们就可以得到下方的效果。

当然，我们还可以结合光源的类型，比如使用聚光灯等，那么阴影的轮廓就会发生变化。

我们甚至可以预设元素本身产生有一定的变形，如边缘翘起，那么就会产生独特的阴影类型。

我们可以从日常生活中的观察将各种不同的投影形式引用进我们的设计中，让我们的设计视觉更丰富有趣。

总结

学会正确的投影设计方式，并不是仅仅让我们局限在对 UI 元素的设计上。它还能给我们带来很多意想不到的帮助，例如做设计的包装。

通过前面讲解的知识点，上方展示案例中应用的阴影方式相信你们已经可以看出端倪了，如果使用基础的阴影设置去创建展示的阴影，就会发现效果远远不如案例的高级，自然也难以带给别人良好的视觉体验。

最后，在项目中，想要将设计出来的阴影交付给开发，真正落地实现出来，无论安卓或是 iOS ，阴影的渲染和设计软件的参数是不一致的，这就需要大家自己钻研了。

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

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一、网页设计是什么？

网页设计也被称为 Web Design、网站设计、Website design、WUI 等。它的本质就是网站的图形界面设计。虽然现在我们常使用移动端上的 APP 来获取资讯，但是显然基于个人电脑平台的网站上网方式陪伴我们的历史要比手机久很多：从1987年钱天白教授向德国发出第一封电子邮件到2000年搜狐、新浪、网易在美国纳斯达克挂牌上市，再到现在网站遍地；中国的网站高速发展了近三十年。我是在小学开始去网吧「上网冲浪」的，那时的电脑屏幕非常小，分辨率只有800×600像素（对比一下，iPhone8的分辨率是750x1334px），网速也很慢，经常掉线或者加载失败。那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面动效、富媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。那么作为 UI设计师我们就必须掌握网站设计的规范和理解网站运行的原理，才能更好地驾驭这个平台。今天就向您好好说道一下网站必须懂得的那些事儿。

二、工作流程

首先让我们来看一下网站设计的工作流程吧，除了之前介绍过的用户研究、撰写产品需求文档、市场文档、做竞品调研等工作之外，与设计师密切相关的网站项目流程可以分为原型图阶段、视觉稿阶段、设计规范阶段、切图阶段、前端代码阶段、项目走查阶段六个阶段。每个阶段都需要设计师参与和了解，千万不要只在意视觉稿这个阶段，有很多前期与后期工作同样需要得到我们的重视。好，让我们一个一个来了解它们吧。

1. 原型图阶段

原型图阶段中设计师需要和产品经理沟通需求，这时要注意，并不是产品经理向设计师下发需求，而是需要相互就自己擅长的方面进行沟通。视觉方面具体呈现也许设计师会有更好的方式，这时需要在设计之前与产品经理达成一致。

△ 构建网站原型图（工具：Axure RP）

2. 视觉稿阶段

视觉稿阶段就是我们要根据原型图确定的内容和大体版式完成网站的界面设计了，在设计网站的时候，我们需要一些图像和灵感的素材。比如做世界杯专题时，我们除了收集很多素材之外，也可以设计一个「情绪板」（Mood Board）。简单说情绪板就是将一些与主题相关的资料和素材拼贴在一起，这样可以更好地指引我们整个需求的设计主题和大体感觉。另外，很多网站的头部通常需要主视觉来抓人眼球，这时可能会使用到需求方提供的明星照片、主题素材、LOGO、主视觉PSD等，那么用素材和这些需求方提供的资料进行混合并拼出让人觉得震撼的头部视觉就是我们的目标了。主视觉下面的信息排布更强调合理性，这时也需要和产品经理沟通从后台调取的图片尺寸、标题字段长度等，然后根据这些要求完成页面信息部分的设计。总之，设计过程中需要我们不断思考和沟通才可以完成一个比较棒的视觉稿。

△ 视觉稿设计阶段（工具：Photoshop）

3. 设计规范

当视觉稿通过后，很多设计师可能不会主动去做设计规范。其实每一个可迭代的产品都需要设计师来总结设计规范，设计规范就是所有页面中共性的东西，比如说字体不同的大小、图片的尺寸、按钮的样式等，这些共性也是用户访问网站时会理解成固定概念的凭证。比如同样的分享功能如果采用两种截然不同的样式就会让用户困惑。那么设计规范主要也是在约束设计师我们自己，在用户有限的记忆力中减少思考的成本。同时，设计规范也可以保证同一个项目的不同设计师都能输出一样风格的设计来。最后，设计规范对于设计师个人来说也是对项目影响的一个佐证，可以证明你的思考和你在项目中的地位。所以我认为设计师应该主动去做设计规范和项目总结。设计规范如何去做？其实设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等不同分类。

△ 视觉规范（工具：Photoshop）

4. 切图

网页设计师通常不需要为前端工程师切图。因为前端工程师通常需要掌握 PS 软件技能。如果遇到特殊情况需要我们切图时，我们可以使用诸如 Cutterman、Zeplin 等切图插件中的 Web 选项为前端切出网站所使用的图片。

△ 从PSD中提取出来的切图（插件：cutterman）

5. 前端代码

前端工程师会用代码重构我们设计的页面，把图纸变为静态页面。然后和后端工程师对接调取数据接口，一个网站就活了起来。工程师们为了方便了解网站是不是达到了我们要求的数据，也会进行埋点。埋点就是在页面代码里插入一些统计代码，方便我们之后确定哪些页面访问量高，哪些没有达到预期。在此后其实还会有测试工程师介入来发现编译完的网站是否存在一些漏洞等。

△ 前端工程师代码编译（工具：Notepad +）

6. 项目走查

网页设计完成后还需要设计师进行项目走查，来确定网页还原度是否有问题。如果发现有和设计稿出入很大的，就需要要求前端工程师进行调整。这个步骤非常重要，因为网站的成品才是我们最终的输出，不要认为设计稿很漂亮而实现后的页面就不需要我们负责了。

△ 将实现后的截图和设计稿进行比对（工具：Photoshop）

三、网站种类

网站的分类按对象来划分可以分为 To C端和 To B端两种。To C端就是面向用户和消费者，例如门户网站、企业网站、产品网站、电商网站、游戏网站、专题页面、视频网站、移动端H5 等，均是面向用户和消费者的产品。由于是面向用户和消费者，所以设计上一定要可以吸引人，并且以用户为中心考虑体验设计。而 To B端作为一个需求量很大的类别，其实往往被设计师所忽视。什么是 To B端项目呢？比如电商网站供货商的后台、Dashboard、企业级OA、网站统计后台等这些面向商家和专业人士的网站就是 To B 类网站项目了。这些项目的要求和 To C端网站的要求大相径庭：To B 类项目最重要的是效率而不是体验，因为说白了我们在设计使用者工作的工具，我们在设计时必须首先要保证操作者可以地完成他们所需要完成的工作。那么让我们来了解一下网站的不同门类吧。

1. 门户网站

门户网站国内比较知名的有新浪、腾讯、网易、搜狐；国外比较知名的如 Naver、Llinternaute 等。我们可以看得出，门户网站都是大而全包罗生活万象的。比如腾讯网就有新闻、财经、视频、体育、娱乐、时尚、汽车、房产、科技、游戏等不同频道。门户网站的门槛很高，必须要有雄厚的实力才可以建立起一个门户网站，而门户网站需要的设计师数量也惊人。首先门户网站需要产品方向的界面设计师以迭代的方式维护迭代网站首页、二级页面、底层页等网站基石。然后需要各个频道的设计师来处理日常需求：比如巴黎时装周需要负责时尚频道的设计师来设计对应的专题、世界杯小组出线需要负责体育频道的设计师来设计对应的专题等。地球上的每一天都有大事发生，那么门户网站中的设计工作就不会少。另外，具体对接频道的设计师也需要有一定擅长之处：比如对接体育频道的设计师起码应该熟悉足球篮球等体育项目、时尚频道的设计师要懂得各个大牌的设计风格、佛学频道的设计师需要懂得基本的佛学知识和忌讳、文化频道的设计师需要对传统文化有所涉猎。所以基本上门户网站的设计师可以分为产品组和频道组两种。

△ 韩国门户网站Naver

2. 企业网站

每个企业都需要有一个网站来对外展示自己的能力、介绍自己的产品等。现在接触一个陌生的企业时，很多老百姓都会上网搜索一下其官方网站验证真伪。网站已经是中小企业的标配了。企业网站设计时通常会有网站首页、公司介绍、产品中心、公司团队、在线商城、联系我们等这几个模块，企业网站会展示很多诸如公司环境、团队成员、企业文化等实际的照片，配合一些资料进行设计。企业网站通常也追求所谓「高端」、「大气」、「上档次」的风格，也就是为了达到让消费者认同品牌这个要求。所以如果我们接到了企业网站的设计需求，不妨多去浏览参考一些更加大牌的企业网站作为竞品来参考。

△ 美国通用公司官网

3. 产品网站

从苹果公司的 iPhone 介绍页到小米手机8的介绍页，我们会发现一种新鲜的产品营销模式，就是产品网站。设计这类网站的内容主要是该产品的工艺、技术、设计、特点、构造、使用场景等。这样的产品页希望可以让用户有沉浸感，所以一般来说都是使用全屏布局，然后配合一些如视差滚动等方式让我们感觉到这个产品的精细。由于中国互联网和产品设计发展很快，所以产品类网站设计需求一定会越来越多。

△ 苹果公司产品介绍页

4. 电商网站

电商设计师也属于网页设计师吗？是的。如果按照平台细分，无疑电商设计师所在的平台大部分属于网站。以淘宝、天猫为代表的电子商务发展得太快了，以至于从内蒙的牧民到海南岛的渔民，甚至台湾、日本、东南亚的商人都开始在中国电商平台上开店铺了。店铺其实本身属于平台本身的页面。但是为了增强每个店的个性，平台为商店开通了一些页面自定义的装饰功能，比如宝贝详情、店铺排版、banner头图设计等。这样商铺有一定权限在平台规定的范围内使用图片和一部分css样式代码来装饰自己的店铺，电商设计应运而生。虽然带着镣铐跳舞，但是有很多店铺因为设计精良而能带动销售。那么电商设计师当然就变得非常重要了。

△ 淘宝网首页

5. 游戏网站

游戏是一个巨大的产业，很多公司的收入大半壁江山都来自游戏产业。那么除了游戏需要制作精良之外，游戏的官网也必须设计精美。不要忘记，每一个玩家都需要访问你的游戏官网才能完成下载、充值、社交等重要操作。国外游戏网站比如暴雪娱乐公司（https://www.blizzard.com）的官网设计得极其精美，每个游戏的官网都是一个精品。比如魔兽世界、星际争霸2等游戏官网，头部都是视觉冲击非常强烈的动画。然后网站界面的元素都带有游戏的风格，仿佛登录这个网站你就在游戏之中了。

△ 暴雪公司星际争霸2游戏官网

6. 专题页面

当然不管是电商还是门户网站，在节日都会需要设计师来设计一些专题页面增加曝光。比如儿童节、情人节、母亲节、圣诞节等节日往往会有促销、专题报道等各式活动。专题设计生命周期很短，上线后基本过了流量的那个点就基本没用了。所以我们找不到前几年的618或者双11专题页面，因为过了特定的时期专题页面就无人问津了。所以在那么短的生命周期怎么抓住人的眼球？当然不能使用现代主义设计那种性冷淡风格，而应该在头部尽量刺激用户，用刺激对比强的色彩、复杂立体的造型、冲击感强的文字吸引用户来看。毕竟每个人可能只会看一次，不能放过这个机会。所以专题设计和产品设计正相反，专题设计必须刺激。

△ 极有家淘宝专题页面

7. 视频网站

视频网站的访问量惊人，并且用户的黏着度更高。很多视频网站除了购买版权之外还有很多 UGC 内容。多说几句，UGC（User Generated Content）是指用户产生的原创内容，很早之前 web1.0时代用户主要是单向浏览网站，web2.0提出的 UGC 概念就是说用户不仅在浏览也会上传内容。那么视频网站为什么会火呢？首先要感谢宽带的发展。在今年我们国内点击视频就立马可以播放了，而在几年前需要等待几分钟才可以加载够缓存。视频网站的设计主要是要考虑应用场景：视频是用户主要观看的区域，所以视频区域首先要足够大，另外颜色应该以暗色为主，因为亮色会干扰到用户观看视频。然后其他的区域图片比例应都为16:9的视频尺寸，方便后期编辑在后台添加。视频网站的设计师同样也可以分为产品组和运营组两个种类来处理产品方向和运营方向的不同需求。

△ 腾讯视频播放页面

8. 移动端H5

你一定在朋友圈被《穿越未来来看你》、《淘宝造物节》等 H5 刷过屏吧？平时我们经常被这种好玩儿的 H5 刷屏。其实 H5 全称是 HTML5，并不是仅仅指移动端，而是网页前端的开发语言，由于约定俗成的概念，我们现在常常把手机中的集合视频、动效、互动的这种营销形式称为 H5。其实它的本质是运用网页技术运行在手机浏览器或内置浏览器内的网页。随着技术日新月异的发展，H5 显得越来越有传播价值和份量。微信、浏览器等平台级产品在手机端中火爆促进了依靠入口而传播的 H5 的发展。如果设计出色，你的项目可能会在朋友圈产生病毒传播的效果。

△ 使用前端语言编译的适合手机浏览的H5界面

移动端H5尺寸

设计移动端 H5 项目的时候，我们一般以用户量较高的 iPhone6/7/8的尺寸：750x1334px为准，然后我们要在顶部预留出微信或者浏览器导航区域。主要内容区域就可以自由设计了。一般H5的操作是上下滑动。字体方面使用苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利。英文则需要使用 SF-UI 代替。当然 H5可以调用背景音乐、视频、链接等多媒体，让体验更佳。除了让前端小哥哥们开发之外，其实还有一种方式可以无需代码生成简易版的 H5，就是通过 H5 工具生成。目前比较火的 H5 生成工具有：MAKA、iH5、兔展等，如果我们要自己生成而不是通过前端开发，那么我们设计稿的尺寸需要设置为640x1008PX。这些工具较为简单，注册后将 PSD 上传即可对每个原件进行动效的设置了。但是如果需要复杂的动效和交互，还是需要前端工程师的配合。

△ H5项目的尺寸

9. 后台网站

后台网站又叫 Dashborad，中文翻译为仪表盘。其含义就是有一大堆数据与统计信息。后台网站是 To B 类型，那么首先的需求就是能快速地显示给操作者他需要掌握的数据。可是数据非常枯燥，我们可以使用诸如「折线图」、「饼状图」、「曲线图」、「表格」等不同方式来展现这些繁琐的数据，这种图形表达数据的方式也叫做数据可视化。后台网站不需要特别可爱的插图以及卡通形象，最重要的是效率。所以如果您经常处理 To C 类的需求，接到了 To B 类的产品需求时一定要注意这一点。后台网站因为需要更大的画面，通常会使用全屏式排版，也就是撑满整个画布。那如果小屏怎么办呢？前端会使用相对布局缩小各个元素，排版的位置也会用百分比来确定。

△ 微信公众号后台

10. CRM系统

CRM 即 Customer relationship management，翻译过来是客户管理管理系统。CRM 是企业对客户进行信息化管理的一种形式，用互联网技术实现对客户信息进行收集、管理、分析，对企业的销售、服务、售后进行监控。常见的功能有员工日程管理、订单管理、发票管理等。我们在设计这种项目时一定要将信息按所属的逻辑关系分类，加强对比、对齐、重复、亲密性的原则，使操作者在使用的时候感觉到便利。

△ Admin CRM dashboard by Divan Raj

11. SaaS

如果我们服务于为企业搭建 CRM、ERP 或者 OA 等系统的第三方公司，那么我们可能会老听到 SaaS 这个词。SaaS 是(Software-as-a-Service)，即软件就是服务。其他公司会来提供 SaaS 服务的公司定制系统，然后服务公司会为客户提供从服务器到设计一体化的服务。这里提到这个词是防止设计师误解它的定义。

12. 企业OA

企业OA，即(Office Automation)，也就是办公自动化系统。在六七十年代就兴起了一场使用电脑来改变传统办公方式的革命。在大型企业时常会面临人员众多、地域广袤、办理公司事宜手续冗长等问题，那么企业OA 可以很好地解决这方面的问题。通过企业OA 可以完成请假、调休、离职、查询公司规章制度、请示、汇报等工作。这样减少了很多窗口成本和员工的时间成本，增强了公司办事效率。互联网公司更是提供给员工除了企业OA 之外的交流功能，比如建立员工 BBS 和留言板等，在上面大家可以对公司提出建议和意见。企业OA 一般出于安全和保密性的原因，很多公司都更加愿意自己开发。设计师在设计此类项目时同样要以操作者的体验和效率为重，让操作者轻易可以找到在当前页面中最重要的功能。

△ Robo Advisor – Projection, List and Questionnaire by Michal Parulski

四、网站组成部分

了解了网站的不同类别后，让我们来看看组成一个网站需要哪些部分吧。网站是由不同网页通过超链接连接而成的，而不同网页也是由不同模块组成的。我们设计的是一个像蜘蛛网一样的网络，而不是一张海报。所以我们在设计网站时要格外考虑从用户角度出发看到的网站，而不能孤立地把它想象成一个平面作品。

1. 首页

访问一个网站时第一个我们触及的就是网站首页。首页别名叫作 Index 或者 Default，是索引和目录的意思。在网站发展的前期阶段，网站并不是富媒体，而是类似于一本书一样：首页类似书籍的目录，需要查看哪个子网页就点击链接即可进入。到了现在，网站首页仍然是引导用户进入不同区域的一个「目录」，这个目录除了导航功能外也要露出一部分内容给用户来吸引点击，露出的部分一定要有一个「更多」按钮来指引用户找到二级页面。

△ 首页原型图

2. 二级页面

在逻辑上，首页是一级页面，从首页点击进入的页面均为二级页面。二级页面之后还有三级页面等级别。从点击的概率上来说，自然是越靠前访问量越高，页面层级越深越不容易被用户找到。一般网站有三级页面，就是为了避免用户迷失。为此还会在页面中加入面包屑导航。面包屑导航就是在页面第一屏出现的诸如 首页 > 体育 > NBA频道，这样的超链接结构，方便用户理解自己在哪里，并且点击可以回到其他页面。

△ 二级页面原型图

3. 底层页

在网站结构中最后提供用户实质资讯的页面就是底层页。比如，在门户网站首页或二级页面中我们点击感兴趣的标题后，在底层页中才会看到全部的资讯。待用户阅读完底层页的信息后可以顺势在左侧或右侧的侧栏寻找用户可能感兴趣的相关内容；在底侧可以看到网友的评论；底侧也会有分享按钮、赞功能等；如果侧栏用户转化率比较差，最底部还可以再次出现推荐相关资讯的功能。总之，在用户阅读完自己喜欢的资讯后，要继续吸引用户顺势阅读其他的资讯或者回到频道。

△ 底层页原型图

4. 广告

门户类网站如何盈利？广告是变现方法之一。网站的广告一般由负责运营需求的设计师负责，但是也可能由频道设计师、产品侧设计师来完成。在网站中常见到的广告图形式就是 banner。banner 一般尺寸巨大，在网站之中非常显眼。因此也不一定是外部广告，也有内部活动、推荐资讯等。那么 banner 图的尺寸有固定吗？答案是没有。Banner 的宽度有两种，一种是满屏（1920PX）、一种是基于安全距离的满尺寸（1200px或1000px）。高度要注意了：一般以1920x1080px为基准的用户屏幕，加上浏览器本身与插件和底部工具条等距离，留给网站的一屏高度大概为900px，所以 banner 不可以做得很高，否则第一屏信息会显示得不够。你可能会说，那就让用户往下拉啊。但是在网站的访问用户之中，第二屏触及到的用户比第一屏会少很多。也就是很多用户可能点击网站后就会跳走或者关闭，那么第一屏的信息真的非常重要了，可谓是寸土寸金。所以我们的 banner 不应该占据过大的区域。比如站酷网的 Banner 区域为1380x350px。那么除了首页巨大的 banner 广告位，网站还有哪些广告形式呢？

对联广告

在门户网站中我们经常会看到网站左右安全区域之外会有个随屏幕滚动的像「对联」一样的广告，通常 banner 也会是一个广告内容，并且居中会弹出由 HTML5 技术或 Flash 技术制作出来的弹窗广告。这种广告一般组合售卖，也就是说一进网站你就会被全面轰炸，无法不注意到这个广告的存在。这种广告点击进入还有配合的专题页等，可见需要设计师配合的地方非常多。

△ 对联广告形式

信息流广告

信息流广告是埋在信息流中的一种广告形式。这种形式利用了格式塔原理，用户会不自觉地阅读起广告的内容，原因是因为它的形式和其他信息一样。比如朋友圈、知乎、Facebook 都采用了信息流广告，信息流广告的效果非常强，但是会牺牲一定的用户体验。信息流广告的尺寸与信息流相同。

△ 知乎APP中信息流中的广告

以上从广告的形式上简单介绍了三种常见的网站广告形式，如果我们在阅读需求时看到了 cpm、pv 等单词是什么意思呢？他们是广告的收费模式。cpm 是指按照广告 pv 来收费，cps 是指按照用户消费收费，cpa 是指按照用户注册数收费，cpc 是指按照用户点击付费。针对不同的收费模式，在设计时也会采取不同策略来增强广告需要达到的目的。

5. Footer

在网站具体的页面设计中，底部会有一个区域我们称之为 footer。一般 footer 的颜色都会比上边内容区域要暗，因为 footer 的信息在逻辑的级别上是次要的。footer 区域的主要功能是版权声明、联系方式、友情链接、备案号等信息。在设计时一定要降级处理，不要让 footer 变得特别明显。

五、技术原理

网页设计师在做项目之前必须了解网页背后的技术原理，技术决定了哪些设计和交互是可以实现的、哪些是不可以的。同时技术原理也决定了我们需要如何配合前端工程师来完成一些复杂的交互。其实在过去网页前端工程师和设计师是一个岗位，就叫做网页美工，这个职位需要在完成视觉设计后把页面做成静态网页交给下面的环节。随着分工越来越细致，产生了网页设计师和前端工程师两个工种。但是网页设计师不可以脱离技术局限天花乱坠地去设计。下面让我们来了解网站的基本存储原理：在您的电脑 C盘保存一个叫 logo.jpg 的图片，然后在浏览器打开这个网址：C:\logo.jpg 你看到了什么？对，就是这张图片。这就是网站的原理：网站的资源和文件存储在一个类似我们电脑的东西里，那就是服务器。我们通过域名来调取网中不同的页面和文件，如果服务器关机了那么网站也就瘫痪了。每次当我们通过浏览器访问网站时，敲击一个网址，这时这个域名会转向一个 IP地址，这个 IP地址就是服务器所在的门牌号码。找到了以后，我们的浏览器会从服务器上下载网站的代码并把代码翻译成我们能看懂的界面，比如文字、边框、表格等实际上都是代码的形式。浏览器还会把网站中所需要的图片、视频等单独下载到缓存里。当我们通过表单输入用户名和密码时，我们的信息就会上传到服务器中，服务器处理完（比如登录成功这个信息）然后再下发给我们的浏览器。所以平时我们访问网站时，我们的电脑和浏览器要通过互联网与服务器进行多次「握手」。当然老「握手」会造成加载速度变慢，于是我们聪明的浏览器会把已经下载过的资源缓存下来，避免浪费。这个机制就是「cookies」：浏览器会自动存储你访问过的网址、网站图片、视频、表单信息等。

△ 基于鼠标的手势操作

1. 基于鼠标的交互

在不久的未来，个人电脑可能通过多点触控、语音交互等方式与我们交互，但目前网站设计最主流的交互方式还是鼠标和键盘。来让我们看看鼠标有什么结构吧！我们对鼠标的使用无外乎移动、左键、右键、拖拽四种方式。我们在页面中的大部分操作都是通过鼠标左键点击完成的，所以网页也是点击的艺术。右键一般会唤起右键菜单，但是很多网站与网页应用程序也会将右键自定义设计一些操作和交互。与鼠标发生交互的主要是超链接与按钮。那么让我们来了解一下超链接的四个状态吧（前端术语是：超链接标签的 CSS 四个伪类）。

△ 按钮与文字的不同状态

Link

Link 是指超链接正常的时候的状态。一般超链接需要与普通文字区别开来，比如换一种颜色或者加下划线。当然下划线还有一个作用就是方便弱视群体区分超链接与普通文字。Link 默认都是蓝色的（色值：#72ACE3），但是为了增强网站的品牌性我们也可以把链接颜色更换成另一种颜色。总之一定要在形式上与普通文字产生差别才可以。

Visited

Visited 是超链接被点击以后的状态。比如新浪网新闻非常多，所以点击完一个新闻后用户可能不知道自己看过没看过这条新闻了。所以新浪网使用了 Visited 属性，点击后的新闻颜色就不一样了，方便用户区别自己哪些新闻还没有浏览。

Hover

Hover 是超链接鼠标经过状态。这个状态是连接中最为重要的状态。其实不只超链接，按钮和图片以及视频等一切可交互的元素都应该设置 Hover 属性，也就是鼠标悬停时的状态。一般来说变换颜色和放大是 Hover 状态的基本方式。

Active

Active 是指超链接的激活状态。点击后超链接可以通过 CSS 加载一个状态。

同样的链接样式也可以应用在图片、按钮、表单之上。点击、鼠标悬停、鼠标按下都可以设计成不同的样式，方便用户通过鼠标感知这个物体是被我按下去的，这种给用户的暗示我们也叫做「点击感」。当然按钮会和链接稍有不同，按钮除了具备正常和鼠标悬停等状态，还有一种状态叫不可点击。这种状态将按钮置灰，提示用户这个功能因为条件不满足不可以点击。好了，您可以举出几个点击感 Web 设计的例子吗？

2. 静态网页

了解完基本技术背景、鼠标的交互之后，让我们来聊点真格的。我们一般看到的网页都是静态网页。静态网页是由 HTML 编译的，我们在服务器上存储的网页代码基本都是 HTML 格式。HTML 全称是 HyperText Markup Language，即超文本标记语言。「超文本」是说这种语言内可以包含文字元素以及调用图片、链接、音乐等非文字元素。HTML语言对于没有编程的人来说可能会很头疼，但是它已经是所有编程代码中最简单的一种了。别紧张，你可以把它当做摩尔代码，它是服务器和浏览器之间的密语，浏览器会将这些密语翻译成我们能看懂的色彩和链接等。那么如果我们用 HTML语言写一段文字会是什么样呢？

△ 模拟代码编译过程

没错，代码就是这么一点一点编起来的。在任何网站空白处右键点击查看网页源代码你就可以看到网页的 HTML 代码啦。HTML 这种代码是由一个国际组织——W3C 发布和维护的。W3C 创建于1994年，是网站国际中立性技术标准机构。W3C 已经发布了 HTML 的诸多版本，其中影响最深远的是 HTML4版本。而 HTML5 简称 H5 则可以说是划时代的版本了。H5 的标签更加接近现代，并且本身可以播放视频，这就可以淘汰掉 Flash 插件了。（Flash插件带来了比如系统漏洞、加载速度过慢等问题）同时 H5 对多平台支持很好，所以适应移动端为王的当今时代。H5 甚至还可以变成游戏、Webapp（在网页上如本地程序一样工作的网站，比如蓝湖等）、多媒体等多种形式。可是由于 IE浏览器这类不支持 HTML5 效果的浏览器在用户中占比还很高，所以造成了 HTML5 发展的制约。浏览器可以理解为一个代码阅读器，由于它对 HTML5 代码的翻译工作不好就会造成所谓「兼容性」的问题。比如 HTML5 中可以通过代码给一个 DIV添加投影，那么在某些浏览器中就显示不了这个效果。不难理解为什么有程序员会穿着 i hate IE 字样的T恤了吧。在每次做完一个网站项目时，测试工程师都会用 Chrome、Safari、Firefox、Opera、IE、Edge 等多个浏览器测试网站的兼容性，这时通常让前端工程师非常头疼。因为代码动一发牵全身，经常这个好了那个又不行了。但是针对这种问题也有一些解决方案，比如减少对用户占比不高浏览器的支持、对不好搞的浏览器单独加载特定的适配代码等。道高一尺魔高一丈呀。

3. 其他前端语言

有了 HTML 这个骨架，加上图片和多媒体后，网站的发展速度就更快了。但是服务器的损耗很大：所有用户都需要重复地来服务器下载代码和图片等资源进行「握手」，而且很多 HTML 代码都是重复的，造成了资源的浪费。比如，如果我网站的头部都是黄色的、链接都是蓝色的，那么每个页面都会啰嗦这几句代码。这个问题没多久就被一种崭新的代码解决了：CSS技术。CSS 是层叠样式表的意思：我们可以理解为现在把网站的样式（颜色、大小、位置等样式信息）也就是 CSS 和网站的内容（文字、图片、链接等内容信息）也就是 HTML 完全分开，并且一个网站可以下载一份 CSS 然后不同页面都调取这份 CSS 的缓存，那么就节省了服务器资源。另外，由于网站需要一些交互效果，比如点击和菜单等，那么需要前端工程师使用 Javas cript 代码来配合。Javas cript 是一种比较短小精悍的语言，构建一些基于浏览器的非常顺手。所以目前主流的网站配置是 HTML5+CSS3+JS 代码的组合，当然为了兼容那些低端浏览器也可能使用 HTML4+CSS+JS 的套餐。这取决于我们的主要目标用户群在使用什么样的浏览器。当然，我讲这些并不是要求您去学习 HTML、CSS、JS 代码然后进行前端开发，因为在现代互联网公司里已经有专业的前端工程师了。我们了解这些主要是要理解前端工程师的工作以便更好地配合他们。

△ 主流形式：HTML + CSS + JS

4. 动态网页

了解完静态网页还不够，现在让我们谈谈网站如何动起来。动态网页不是说它有狂拽酷炫的动画，而是动态网页会随着时间、内容和数据库的调用而产生动态的网页。比如今天看到的新闻网站和昨天的新闻肯定不一样了，可是网站首页的 HTML 代码并不需要人去手工修改，而是让小编通过后台录入新闻、上传图片就好了。小编上传后台的过程就会输入数据库，而动态网页又是调取数据库内容显示给用户的一种形式。动态网页会随时调取数据库中的信息给用户，而对用户来说似乎静态网页和动态网页长得都是一样的。那么最傻瓜的判断方式是看网址结尾，静态网页结尾是 html 或 htm，而动态网页由于使用了高级网页编程技术，结尾则是 Asp、Php、Jsp等。Asp、Php、Jsp、Aspx、Cgi 都是动态网页的语言，当然有的时候为了让网站效率提升也会使用伪静态结构，结尾和静态网页就一致了，但是实际上是会在用户访问前调取一遍数据库的。同时动态网页的网址会有一个特点，含有？符号。动态语言目前最火的是 Php，较早而现在比较少见的是 Asp、Cgi，最安全的是 Jsp，所以很多银行采用 JSP 编译。了解完这些，我们基本就弄清楚网站的运行原理了。

△ 主流后台编译语言：PHP ASP JSP CGI

5. 雪碧图

我们经常看到网站中会有动画，那么动画实现的原理一般有如下这么几个：第一，HTML5 视频播放；这种方式缺点就是不兼容低端浏览器。第二，Flash Player 播放器播放；这种方式的缺点是Flash安全性很低而且效率慢。第三，动画使用 Gif 格式；这种方式的问题是动画长度不够，并且这个格式仅仅支持透明和不透明两级属性。那么像 Google 首页 Doodle 的动画是怎么实现的呢？这种技术叫做：雪碧图。CSS 雪碧即 CSS Sprite，也有人叫 CSS 精灵，它是一种 CSS 图像合并技术。它本身调用的图片是支持多级透明的 PNG 格式，然后把动画并排排列出来。比如一个卡通人物的动画每帧宽度是100px，那么就把它的动作1 动作2 动作3 动作4 并排放在一张宽度是400px的 PNG 图片里。然后代码在一个100px的宽度框子内背景图调用这张 png，我们就看到了动作1，然后过一秒钟代码会悄悄移动100px我们就看到了动作2。由于速度很快就让我们看到了连续动画。雪碧图也有自身的缺点：如果帧数太多，会消耗很大的内存。所以帧数一定要控制少。如果你的动作设计了12帧，那么我建议你可以试试将2、4、6、8、10删除，保留一半的动作。

△ 雪碧图

6. 视差滚动

视差滚动是一种运动速率不一样的设计效果，用以实现空间感。比如密尔沃基警察局官网就大量运用了视差滚动效果。其实现原理是，代码判定网页滚动，滚动时页面中三层图片运动速率和位移距离不同。这样给人造成的视觉体验仿佛是我们在物理现实中看到的空间感一样。视差滚动已经不是什么高新技术，如果你的网站比较适合视差滚动，请大胆设计并和前端工程师提需求，相信前端工程师可以满足你的要求。我们需要准备的就是运动速率不同的分层静态 PSD 文件。

△ 运用了视差滚动效果的密尔沃基警察局官网（milwaukeepolicenews.com）

六、网页设计规范

终于，经历过长篇大论网站的原理与组成部分后，我们要谈谈网站设计的规范了。网站设计并无具体平台限定的风格，也没有必须要设计的系统级导航栏和工具栏。所以网站设计更加灵活，然而因为太灵活也会让我们的设计师无从下手。那么接下来我将介绍网站设计的规范，在您工作的时候可以参考。注意，在设计之前一定要和前端沟通我们使用的尺寸、字体、交互等，这样有助于后期不会有误会。

1. 画板尺寸

因为网页尺寸与用户屏幕相关，而用户屏幕的种类难以统计。所以我们的设计稿只能主要顾及主流用户的分辨率，其他分辨率用适配的方式来解决。在版 Photoshop 网站 Web 预设尺寸给了我们一些启示：常见尺寸（1366x768px）、大网页（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。这些是主流尺寸，而我们如果做网站时建议按主流的分辨率1920x1080px来设计。所以我们通常设计网站时的网站宽度为1920px，每个屏幕的高度约为900px。为什么是900px呢？因为1080还要减去浏览器头部和底部高度，大约就是900px了。内容安全区域为1200px （或1000px / 1400px）。以这个尺寸来设计相对标准。当然在设计网页前需要知会前端设计尺寸，因为对于适配的方式和后续配合他们更有发言权。

△ 网站的尺寸规范

2. 文字规范

我们现在都知道了网站上面的文字是通过前端工程师重新写在代码里的。那这种文字在浏览器上的渲染与系统和浏览器有关。比如在苹果电脑上看到的文字效果和 Windows 系统电脑上看到的文字效果就有所不同：苹果会对文字进行渲染，而 windows 的文字几乎充满了像素颗粒。按照用户占比来说无疑 Windows 的用户是主流，所以尽管我们可能使用苹果电脑设计网页，但是设计出来的网页效果也应该和 Windows 显示一致。否则我们设计完漂亮的设计稿，程序员无法还原成我们设计的样子。另外，字号的大小也非常重要。网页的显示区域决定了文字不可以过大，在网站设计中我们的文字大小一般来说是12-20像素。为什么不能比12px更小？因为如果比12像素更小的中文无法放得下复杂的笔画了。而且奇数的文字表现和适配都不好做，也就是说我们必须使用偶数的字号来设计。那么总结一下：文字使用宋体、大小为12px、渲染方式选择无。稍大一些的字体使用微软雅黑、大小为14-20px、渲染方式选择 Windows Lcd 或锐利。另外，英文和数字需使用 Arial字体，渲染方式选择无。

△ 网站字体规范

3. 图片规范

网站设计中的图片常用4（宽）：3（高）、16（宽）：9（高）、1:1等比例。具体图片大小没有固定要求，但整数和偶数为佳。主要是考虑到一些适配的问题。作为内容出现的图片一定需要有介绍信息和排序信息。图片的格式有很多，比如支持多级透明的 png 格式、图片文件很小的 jpg 格式、支持透明/不透明并且支持动画的 gif 格式等。在保证图像清晰度地情况下文件大小越小越好，如何让网页使用的图片更小呢？

第一种方法，给程序员切图的时候我们可以适当缩小图片文件的大小。比如 Photoshop 中存储为 web 所用格式就会比快速存储文件更小。

第二种方法，可以尝试使用例如 Tinypng、智图等工具再次压缩图片。这些工具会把图片中的多余信息删除并且压缩，而图像质量不受损失。

第三种方法，Google 研发了一种 Webp 格式，它的图片压缩体积大约只有 JPEG 的2/3，能节省大量的服务器宽带资源。比如 Facebook、Ebay 还有我们设计师常用的站酷图片存储都是使用了 Webp 图片格式。

第四种方法，浏览器和服务器握手时需要下载网页所调用的图片资源，那么如果一个网站有一百张图片的话，浏览器和服务器就得握一百次。第一会耗费服务器资源，第二访问速度就会慢一些。所以前端工程师们有一种做法，就是把网页中所使用的图片拼成一大张 png。然后每个调用图片的元素都调用这张图片然后分别位移一点儿，显示的那块区域移动到一大张图片中所需要的那个图像。

△ 在线压缩工具Tinypng网站

4. 按钮

按钮的风格在过去的十几年发生了很大的变化，由一开始的「斜面与浮雕」风格过渡到后面的「拟物风格」，现在更流行的是扁平风格。如果按钮在一张图片中，为了不影响图片的美观性，会去掉填充只保留边框，这种设计方式叫做幽灵按钮。注意在设计按钮时记得同时设计好按钮的鼠标悬停、按下状态。

△ 不同时代下不同的按钮风格

5. 表单

在网站设计中我们经常需要使用一些输入框、下拉菜单、弹窗、单选框、复选框、编辑器等。这些都是系统级的控件，一般是直接调用系统设计的。但是系统设计有时不能满足我们的要求：系统内置的表单高度不够，点击起来不舒服；不符合网站整体设计的品牌感等。那么我们可以通过 CSS 给这些表单增加样式，包括颜色、大小、内外边距等。所以我们遇到涉及到表单的需求时也可以进行自定义设计。

△ 表单不同风格的设计 UIDE Kit by Mateusz Dembek

6. 栅格

我们把整体宽度定义为 W。然后整个宽度分成多个等分单元 A。每个单元 A 中有元素 a 和间距 i。所以他们之间的关系就是 (A×n)-i=W。当然每个应用的尺寸不止可以整除成一种栅格，这就要看我们内容排版的疏密程度了。之后，我们将过多内容的栅格和另一个栅格相加得到更大的排版空间；其他元素都须老老实实呆在自己的栅格内，这样就完成了一个布局非常科学的设计了。 比如：

栅格系统具体有以下优势：能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。另外，基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。

△ 网站的栅格化会使网站看起来更有秩序感

7. 适配Retina屏幕

2012年苹果发布了 Retina Macbook Pro，Retina 屏幕的电脑占有量越来越高了。Retina 屏幕简单地说就是屏幕密度是传统屏幕的两倍，拥有更大地清晰度。甚至可以满足我们视网膜最高的识别度，所以也叫视网膜屏幕。这种屏幕下我们设计的安全距离大约为1000像素的网站就显得非常粗糙了。所以如果我们现在 Retina 屏幕下显示一个400X300PX的区域，实际上我们需要提供给前端一张800X600PX的切图才行，因为 Retina 屏幕一个点顶过去两个像素。那么我们的用户是视网膜屏占比更多的用户，比如设计师群体，那怎么兼顾高清屏幕和普通屏幕呢？

首先我们需要以视网膜屏幕大小完成设计稿，建议是传统设计稿的两倍。之后切出两套切图（非 Retina 屏幕用户如果也加载双倍大小的资源会很慢），普通的切图命名为如logo.jpg，Retina切图命名为logo@2x.jpg。前端用代码来识别，如果屏幕是 Retina 就加载双倍尺寸，不是则加载普通尺寸。前端可以使用 Retina.js（https://retinajs.com/）提供的技术进行识别。

8. 自适应与响应式网站

我们看到有些网站使用电脑端或者手机端甚至 iPad 去浏览时体验都非常好。这就需要我们为了用户体验而进行网站的自适应或响应式布局了。响应式与自适应的原理是相似的，都是通过代码检测设备屏幕宽度，根据不同的设备加载不同的 css。

自适应网站

自适应网站的设计稿是一致的，但是设计稿需要考虑屏幕变小时的变化方式。比如一个网站的内容有5个区块和4个间距，那么如果宽度缩小成900时需要如何变化，这就是自适应布局。比如站酷网、Dribbble 等网站都采用了自适应布局。

响应式网站

响应式网站则需要设计不同版本的设计稿，然后根据不同的设备提供不同的 CSS 样式。比如判定你设备的宽度是750px，那么网站就知道你使用了手机来访问，就会给你导入一份手机才有的样式；如果是电脑的宽度就给你导入电脑的 CSS 样式。对于设计师来说，自适应需要考虑网站在不同设备宽度下的整除与排版；响应式则需要设计电脑、平板、手机等至少三套设计稿（但这三套设计稿的内容是一致的）。总之，自适应和响应式都是网站为了用户体验所适应浏览设备而做出的努力。

适配的规范

手机方面：适配手机页面时，我们一般以 iPhone 为画布标准。原因是 iPhone 相对显示比较清晰，并且要求较高。而且用户占有量也很高。在适配时我们一般以750x1334px尺寸为主，然后将网站导航改变为手机 APP 常常使用的汉堡包+抽屉式导航的形式。同时网站里的按钮也需要变为手机 APP 中我们看到的左右几乎满屏的按钮，并且每个按钮要大于88PX，方便手指的点击。字体方面，我们要把网站的字体全部改为苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利。英文则需要使用 SF-UI 代替。也就是将网站改变成一个类 APP 的手机网页，这样才可以保证手机用户体验良好。如果用户使用安卓手机，那么前端代码则会基于设计稿的设计适度加大图片与间距来适应安卓屏幕。

iPad：iPad的尺寸为1024×768、2048x1536px等，无论怎么变基本与电脑屏幕尺寸类似。所以在 iPad 上浏览网页是基本舒适的。因此，很多网站并没有专门为 iPad 做适配，如果我们希望 iPad 用户用的更爽，可以从文字大小（24PX以上）、按钮大小（88PX左右以及以上）、交互形式（抽屉式导航、导航不随屏幕滚动）等方式入手。

△ 不同设备的注意事项

总结

无论您面对的项目是 To C 的还是 To B 的网站产品，我们都应该首先确立设计风格 > 寻找设计素材 > 建立情绪板 > 完成视觉稿 > 切图标注 > 建立视觉规范 > 进行项目走查。

如果设计一般网站的页面，可以按照1920 X 1080px尺寸设计。每屏高度900px，字体使用宋体12px、无和微软雅黑 14-20、Windows LCD。Banner 尽量满屏，但是图片需要按照4:3或16:9等比例来设计。做网站时可以建立栅格以更好地进行自适应和响应式布局，我们也要为超链接和按钮设计不同的相应鼠标的状态；另外我们也可以多多尝试在网站设计中加入视差滚动、雪碧图动画等好玩的交互。

如果设计手机端的页面，可以按照750X1334PX尺寸设计。字体使用苹方24PX以上、锐利。英文字体使用SF UI。按钮和点击区域需要大于88PX方便手指点击。并且头部需要预留出微信或浏览器的导航区域。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

最近在做一款工具类软件，主要涉及表格的设计，边工作边整理了一些表格的设计样式和原型图，拿出来与需要的人分享。欢迎与我交流，有需要原型的小伙伴也欢迎在下方留言。

表格样式一

表格样式主要分为两大类，第一类表格中通常以一行为组，操作均是以组为单位进行。此类表格优点是简单直观，操作感强，可提前设定好计算公式；缺点是对于某一数据的批量操作较为复杂，不方便自定义复杂计算。

常用于信息展示，无需复杂计算的网页和C端界面中。

表格样式一：缝隙

第一类表格以行为一组，表头通常固定在最上端不参与滑动，现代设计为了美观通常也没有单元格的线框，设计时为了更直观的体现一条数据，可以在每条数据之间留一个缝隙。

表格样式一：斑马线

或者用斑马线形式更直观的展示数据，避免用户可能看串行的对不齐数据的情况。

表格样式一：按钮

为了页面的简洁可以将上端按钮尽可能减少，整个表格上端原则上保留批量操作功能按钮，对于单行的操作按钮可以放置在单行中悬浮展示。

表格样式一：拖拽

因为单行是一个模块，当有需要调整顺序时可以支持整行的拖拽操作。

表格样式一：分页1

当内容较多需要除了无限滚动外，还可以选用分页的方式，目前较为常见的可以选择如下方式。

表格样式一：分页2

若不需要突出页码，主要查看都在第一页上时可以考虑将放在角落里，到达首页和到达尾页根据产品需求决定是否使用。

表格样式一：搜索

搜索功能考虑到用户需要手动输入，很难保证精准搜索，原则上所有搜索均为模糊搜索，必要精准搜索的地方使用筛选功能，给用户提供筛选选项。通常上端搜索栏不被限定搜索范围，可以全部搜索。

表格样式一：分项搜索

对比必要的分项搜索功能可以对应到各个列中，同时输入时可以给出联想结果，仍然应该设计为模糊搜索。

表格样式一：筛选

对于各个列中必须精准搜索的数据可以设计为筛选功能，可为用户提供可勾选的筛选信息。

表格样式一：高级筛选

对于部分列有筛选需求的情况，可以设计弹框输入筛选条件，也可以在此设计复杂筛选条件，筛选规则在上端展示，可以更直观的看到已筛选项。

表格样式一：可编辑单元格提示

表格中存在可编辑单元格和不可编辑单元格时，为了界面的一致性和美观性，可以考虑鼠标悬浮时给出可编辑单元格的编辑框，区分两种不同单元格样式。

表格样式一：信息预览（浮窗）

对于汇总表中如有预览详情的需要，同时对于数据仅为查看没有修改需要的时候可以考虑悬浮提示将主要数据进行展示。

表格样式一：信息预览（弹窗+蒙板）

对于详细有部分属性修改需求，对于细节没有修改需求的，可以考虑在一侧弹出弹框进行展示和修改属性。（如报价单表格信息，报价单审核状态的可以在此修改，详细信息仍在明细表中修改）

表格样式一：信息预览（折叠）

折叠模式的使用环境基本等同于弹出模式，可根据设计风格进行选择。

表格样式一：信息预览（弹窗）

单独弹出窗口在需要有多项数据进行对比查看时可以选用，弹出窗体操作通常只考虑状态改变，不建议其他数据在此更改。

表格样式一：信息预览（变导航）

此种展示方式，对于需要查看和修改较多数据的需求可以选中，汇总表将收为类似于导航栏的模式，数据可以精简只展示关键数据，弹窗可设计复杂操作，可以包含明细的修改等功能。

表格样式一：信息预览（变窗体结构）

通过减少列表高度流出信息展示空间，建议两部分在一屏内展示可分别滑动或翻页，汇总表信息完整，弹出窗体也可进行复杂操作设计。

表格样式一：信息预览（自定义表头）

自定义表头设计可以将此操作藏在较明显的位置同时可以保证界面的简洁。

后续

上篇中主要展示了一些表格样式一的一些操作习惯，除此之外还会在很多专业工具的设计中用到另一种展现形式类似于EXCEL表格。

欢迎各位做过类似项目的产品经理与我多多交流，如有需要原型的小伙伴可以在下方留言，我再将下载地址放出。如果大家喜欢这篇文章我会继续完成下篇的内容。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

最近在做一款工具类软件，主要涉及表格的设计，边工作边整理了一些表格的设计样式和原型图，拿出来与需要的人分享。欢迎与我交流，有需要原型的小伙伴也欢迎在下方留言。

表格样式一

表格样式主要分为两大类，第一类表格中通常以一行为组，操作均是以组为单位进行。此类表格优点是简单直观，操作感强，可提前设定好计算公式；缺点是对于某一数据的批量操作较为复杂，不方便自定义复杂计算。

常用于信息展示，无需复杂计算的网页和C端界面中。

表格样式一：缝隙

第一类表格以行为一组，表头通常固定在最上端不参与滑动，现代设计为了美观通常也没有单元格的线框，设计时为了更直观的体现一条数据，可以在每条数据之间留一个缝隙。

表格样式一：斑马线

或者用斑马线形式更直观的展示数据，避免用户可能看串行的对不齐数据的情况。

表格样式一：按钮

为了页面的简洁可以将上端按钮尽可能减少，整个表格上端原则上保留批量操作功能按钮，对于单行的操作按钮可以放置在单行中悬浮展示。

表格样式一：拖拽

因为单行是一个模块，当有需要调整顺序时可以支持整行的拖拽操作。

表格样式一：分页1

当内容较多需要除了无限滚动外，还可以选用分页的方式，目前较为常见的可以选择如下方式。

表格样式一：分页2

若不需要突出页码，主要查看都在第一页上时可以考虑将放在角落里，到达首页和到达尾页根据产品需求决定是否使用。

表格样式一：搜索

搜索功能考虑到用户需要手动输入，很难保证精准搜索，原则上所有搜索均为模糊搜索，必要精准搜索的地方使用筛选功能，给用户提供筛选选项。通常上端搜索栏不被限定搜索范围，可以全部搜索。

表格样式一：分项搜索

对比必要的分项搜索功能可以对应到各个列中，同时输入时可以给出联想结果，仍然应该设计为模糊搜索。

表格样式一：筛选

对于各个列中必须精准搜索的数据可以设计为筛选功能，可为用户提供可勾选的筛选信息。

表格样式一：高级筛选

对于部分列有筛选需求的情况，可以设计弹框输入筛选条件，也可以在此设计复杂筛选条件，筛选规则在上端展示，可以更直观的看到已筛选项。

表格样式一：可编辑单元格提示

表格中存在可编辑单元格和不可编辑单元格时，为了界面的一致性和美观性，可以考虑鼠标悬浮时给出可编辑单元格的编辑框，区分两种不同单元格样式。

表格样式一：信息预览（浮窗）

对于汇总表中如有预览详情的需要，同时对于数据仅为查看没有修改需要的时候可以考虑悬浮提示将主要数据进行展示。

表格样式一：信息预览（弹窗+蒙板）

对于详细有部分属性修改需求，对于细节没有修改需求的，可以考虑在一侧弹出弹框进行展示和修改属性。（如报价单表格信息，报价单审核状态的可以在此修改，详细信息仍在明细表中修改）

表格样式一：信息预览（折叠）

折叠模式的使用环境基本等同于弹出模式，可根据设计风格进行选择。

表格样式一：信息预览（弹窗）

单独弹出窗口在需要有多项数据进行对比查看时可以选用，弹出窗体操作通常只考虑状态改变，不建议其他数据在此更改。

表格样式一：信息预览（变导航）

此种展示方式，对于需要查看和修改较多数据的需求可以选中，汇总表将收为类似于导航栏的模式，数据可以精简只展示关键数据，弹窗可设计复杂操作，可以包含明细的修改等功能。

表格样式一：信息预览（变窗体结构）

通过减少列表高度流出信息展示空间，建议两部分在一屏内展示可分别滑动或翻页，汇总表信息完整，弹出窗体也可进行复杂操作设计。

表格样式一：信息预览（自定义表头）

自定义表头设计可以将此操作藏在较明显的位置同时可以保证界面的简洁。

后续

上篇中主要展示了一些表格样式一的一些操作习惯，除此之外还会在很多专业工具的设计中用到另一种展现形式类似于EXCEL表格。

欢迎各位做过类似项目的产品经理与我多多交流，如有需要原型的小伙伴可以在下方留言，我再将下载地址放出。如果大家喜欢这篇文章我会继续完成下篇的内容。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

作为设计师，我们需要很好的控制用户在使用产品过程中，他们浏览的路径，需要了解我们的眼睛是如何处理信息，本周我会结合我之前学习的一些知识和大家分享下视觉动线这个概念，以及如何在设计中进行运用！学习过程红大家任何不明白地方，欢迎加我微信交流:uiskyss

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

头脑风暴是创意点子常用的方法，那么从用户出发的脑暴有什么不同？从过去几年用研发现向产品方案转化的脑暴案例中，总结成功与失败经验，提炼出目前最优的流程与执行技巧，一起来提高创意点子产生的成功率吧！

关于新产品创新的成功率，有这样一组数据：3000个原始想法，能变成300个成熟想法，300个成熟想法能产生125个项目，其中大概有9个能进入早期开发，4个能大力开发，最后成功的只有1.7个。（来自彭肯恩博士的研究）

大多数点子的失败，可能的原因有很多，比如疏于对趋势的关注和研究、缺乏理论的突破、缺乏执行力、难以逃脱组织思维惯性等等（来自创新管理课程），其中还有一个常常提到的原因：离用户太远。在最初想点子的时候，由于不知道用户需求、脑补用户需求、片面地针对用户表面部分需求却忽视深层需求来规划，就会导致产品或功能开发完成以后，不知道目标用户、目标场景，也不知道对用户的价值，最终产品也会因用户不去使用，而导致创新失败。

作为用户研究者，洞察和分析用户真实需求是我们的本职和专长，但如何把这些用户研究的发现以更有效的方式转化为「靠谱」的好点子，则需要与团队里各个角色一起不断的努力。从14年起，我们在一次次从用研发现到产品点子的头脑风暴实践中，不断优化流程、评估效果，形成了现在的「从用户出发的创意脑暴」流程，在这里分享给大家。

传统的头脑风暴法（brainstorming）相信大家都熟悉，就是一组人围在一起，随意的将脑中与主题有关的见解提出来，再将大家的见解分类整理。但在实际执行的过程中，头脑风暴的现场却常常交错着讨论、脑补、推理、玩笑等等，然后时间很快过去，却没有产出「靠谱」的点子。从用户出发的创意脑暴，是以典型用户故事为线索，轻松、的产出点子的头脑风暴过程：一方面，线索契合用户真实完整的需求场景，点子变得更容易想也更符合用户需求；另一方面，通过流程上的细节设计，可以更的激发点子产生。

整个过程分为8步。虽然常常的情况是一个人想不出方案，就马上拉人一起脑暴发散，但其实脑暴前的素材和流程准备，以及达成共识对脑暴的最终效果起到了至关重要的作用。

第一步：确定一个不远不近的脑暴主题

产生好点子的前提是问对问题，问对问题需要跳出眼前的思维限制，但又不要太天马行空。要做到这点并不容易，这要求脑暴的组织者在一开始就想清楚团队真正要解决的问题是什么，而不仅仅「产品的某个功能眼下要怎么做」这种具体问题（这样的问题听起来就让人疲惫）。举个例子，当眼前的业务问题是想出一些装扮功能，如果把脑暴的主题定为「装扮还可以做哪些新功能」，思路就会陷入现有的装扮流程里，这时点子的方向已经被具象和限制，有时甚至是无解的；如果定为「如何帮助用户通过装扮来表达自己」（前提是用户真的用装扮在满足这一需求）就会更合适一些，这样就可以去想如何通过装扮表达自己的心情、兴趣、状态、、所属群体身份等等，思路打开的同时又与业务结合；而如果仅仅是「用户如何表达自己」，想出的点子，就会太泛，脱离业务。

第二步：有选择的邀请团队成员

首先，有选择的邀请乐于分享、乐于沟通、思维活跃的人，他们会自然而然的产生想法，互相交流，否则每个人盯着自己的点子说着自己的故事就会丧失一组人在一起的意义；其次，在邀请成员时，不建议只有自己组的组员（虽然这样比较方便），因为参与角色的多样性一方面可以相互激发创意，同时也让点子在收敛阶段能得到更多元的评价（比如工程师对点子可行性的评估就有其专业的判断）。在人数上，虽然6-8人是脑暴的建议人数，但因为我们的脑暴流程会让点子批量产生，人数的增加会直接导致后续点子收敛时效率的降低，所以目前来看建议6人为佳。

第三步：准备简洁又有代表性的用户故事

用户故事的准备是脑暴的一个关键，吸引着我们不断的去改进和探寻。过去，我们也有过一些不太理想的尝试：让参与者分享自己的故事（如毕业生如何找房），这时很容易就根据主观和片面的需求想点子；给出一些用户需求的词让大家联想（如不孤单），这时参与者对着普通又太正确的词已经想过很多遍，很难进入状态；给出一系列相关故事（如多个类似的故事）帮参与者发想，这时呈现的信息对参与者来说已经过于复杂，传达的效率很低；给出的每个故事都带有用户痛点（如粉丝给明星发消息得不到回应），这时参与者往往会依照故事中的情节去推理，绞尽脑汁非常辛苦，却忽略了没有痛点的地方藏着用户的真实需求（如粉丝默默的把想对明星说的话记录在手机备忘里）。

所以，目前的做法是：

• 对调研中收集到的大量用户原始故事进行分析；
• 根据分析点之间的相互关系，按照一定的维度把分析点组织起来，比如组织成几类典型的用户画像、使用产品的几类动机、几个场景、几步行为流程等等，组织维度符合 MECE（ Mutually Exclusive Collectively Exhaustive，相互独立、完全穷尽）原则即可；
• 按照组织后的结构（如画像/动机/场景/流程等），把同一个类别下多个反映分析点的真实故事组合改编成一个典型故事。

举例来看，研究粉丝的过程中，我们发现有的粉丝会组团给偶像投票打榜并感叹「团结就是力量」、有的粉丝会在活动现场和他人一起大声应援并觉得暖心、有的粉丝在 QQ群和其他粉丝一起讨论相互诉说并且感觉很棒。这些故事都反映出粉丝对于「群体」、「团结」的诉求，将这几个不同人的真实故事综合起来，就形成了一个特别在意「团结形象」的典型粉丝故事。这个「团结」的典型故事和「秩序」、「强大」等等典型故事一起反映了粉丝「群体形象」方面的诉求。

通过这样的方式得到的典型故事不仅有真实故事的细节，而且严谨地反映用户需求，信息量大，结构完整。脑暴参与者面对这些故事，就很容易理解，并联想出更多符合用户真实需求的点子。整个过程说起来简单，但在实际执行时却考验着研究人员的大局观、逻辑能力、洞察力、组织能力等等，整个研究过程有时可能会需要1-2个月。

第四步：设置严谨又轻松的流程

在脑暴流程上的设置上，主要的尝试点在个人想点子和大家交流点子的方式和顺序安排。如果大家同时一边想一边交流，会出现没空思考或有人不认真想的情况；如果大家先写再轮流说，会出现思考时独立思考，交流时只关心自己的说法而忽视交流发散的情况。所以在尝试了默写式头脑风暴（后文会详细介绍）后，我们就沿用了这个鼓励思考交流、弱化发言的脑暴方式。

另外要注意的一个点是，不用在流程上对想点子的思路有过多的限制，比如告诉参与者「你可以先想什么再想什么」或「你想出的点子不能太抽象或太具体」，这种「急功近利」的做法会让参与者困惑和紧张。相反的，应该要做的是让他们放松，比如放一些音乐、摆一些零食等等，这样更容易产生想法。

第五步：在正式脑暴前，达成共识

在脑暴前，向参与者说明本次脑暴的目的、主题、流程和规则，能够帮助大家统一目标，提率。

头脑风暴的四个基本规则在脑暴过程中要落到实处：

• 追求数量（可设置一个小荣誉激励大家想点子）；
• 禁止批评（包括负面的表情或语气词都不能有）；
• 提倡独特的想法（可以异想天开、天马行空）；
• 综合并改善设想（可以在别人的基础上写新的点子）。

组织者也可以给出一些用户研究的发现，帮助大家建立概念、了解用户。

第六步：默写式头脑风暴

默写式头脑风暴是在奥斯本头脑风暴的基础上改造而成的一种书面脑暴方法（具体操作方式如下图）。从用户出发的创意脑暴在此基础上，增加了用户的典型故事作为线索。在开始前，每个参与者会拿到3张用户典型故事卡；在第一个5分钟，每人针对3个故事各写至少1个点子，贴在故事卡上，然后传给右邻；第二个5分钟，每人从传来的故事卡和前人的点子上得到启发，再各写至少1个点子，传给右邻；这样直到故事传完，就能得到至少6 x 3 x 6=108个点子。这也是为什么前面提到要控制参与者人数的原因，因为每增加1人，就会多一轮脑暴的时间，点子的数量会相应增加，在下一步分类交流时的工作量和时间也会直接增加。

第七步：点子现场收敛

在已经有了一百多个点子的情况下，现场投票可以快速把「好点子」筛出来。但由于在写点子的时候，把想法准确的表达在一张便签纸上并不是一件容易的事，所以在投票前，还是会有一个简单的交流，让大家了解彼此的点子，同时合并类似的点子。

投票分为感性轮和理性轮：感性轮是让人眼前一亮的点子，每人3票；理性轮是可行或能有效提升业绩的点子，也是每人3票。这样两个维度交叉出来就能得到既让人眼前一亮，又具有可行性的点子。参与者多样的背景也让点子的评估更加全面。

第八步：点子的后续跟进

脑暴结束并不是点子的结束。最初的点子只是一句话或一个示意图，从点子走向方案，还需要不断地打磨交互、视觉、文案、逻辑、场景等等方面的细节；从方案到投入开发乃至上线，则需要综合考虑优先级、人力、技术等更多方面的问题；在上线后，点子的可用性以及对业务的效果，也需要提前规划和进一步验证。

总的来说，从用户出发的创意脑暴，在线索和流程设计上做出了一些尝试，让产生的想法更加符合用户真实需求，以此来提高创新点子的成功率。但创新毕竟不是一件容易的事，在未来，我们也会不断地尝试和打磨这个流程，思考更好的方式，让创新有迹可循。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

作为在即时通讯领域超越昔日霸主 qq，并成为第一大全民 app。微信在产品设计领域一直被奉为经典享受着无数赞美和模仿追逐。

但是我们用户在使用产品过程中，难免对微信的某些设计产生疑问，有的设计可以说脱离了我们对用户体验的认知。

为什么会这样呢？是否在微信这些「不友好」的设计存在其背后的深层次的逻辑呢？

以下我举例10个点来分析这些「不友好」设计以及它背后的设计产品逻辑（个人思考猜想）。

1. 点赞评论为何要聚合，增加一个操作层级

朋友圈点击操作 icon，出现评论和点赞两个操作按钮。如果要点赞评论还要点击对应的点赞评论按钮，为何不直接将点赞和评论按钮放出来呢？

从用户操作的性来看，现在的朋友圈这种设计方式不够，多增加了一个操作路径。微信这样设计是有什么背后的深意和思考呢？

朋友圈的定位是分享生活，重点是分享而不是互动，如果将点赞和评论的入口直接放出来的话，用户互动频率变高，导致点赞者和评论者的特意的意图性和含金量远远不如将两个操作收起来的高。收起来的点赞评论所收到的赞美和互动会让分享者更真心实意，同时也减少了消息通知的无效打扰。这样整个朋友圈互动分享生态会变得更好。

2. 朋友圈为何不单独为一个tab，而只是tab里面的一个模块

在大众用户使用最多的两个功能，一个就是对话，一个就是朋友圈了。但是朋友圈却作为 tab3 中一个模块，按照用户高低频操作来说，朋友圈完全可以另成为一个单独 tab 了。

微信为什么这么做呢？我觉得如果微信朋友圈作为一个 tab 的话，那么微信真的变为了一个社交工具，而不是一种生活方式了。从格局纬度上说，生活方式的格局定义远高于社交工具。同时朋友圈作为一个模块，可以很好的将一部分流量分发到购物、游戏、扫一扫及小程序等模块中。

3. 购物、钱包、游戏商业盈利强的产品为何都只是tab的一个小模块

在互联网产品中，几乎所有产品的思路都是如何将产品做大，然后实现变现盈利。在中国用户流量最大的 app 上可以有无限的变现玩法，向游戏、购物、支付这些都是强盈利的产品，而微信却只以 tab 中的列表展示给用户，这似乎不符合商业逻辑。

如果将购物、游戏、支付再升一级进行强化，那么微信给用户的标签和定位不再是生活方式，而变成了一个单纯的卖货、游戏、支付平台，这样的话可能会影响微信牢不可破的用户认知和产品地位。

4. 朋友圈为何不支持gif

gif 图通常是好玩有意思的图，里面可以充满各种梗，各种笑点。对于发朋友圈的人来说，发 gif 图是用户一个较大的需求。

在考虑用户分享者的需求时，也同时要考虑朋友圈浏览者的用户，如果做了 gif 图，那么用户在浏览朋友圈的过程中，很容易被 gif 动态所吸引干扰，影响浏览者浏览整个朋友圈的视觉焦点。有的用户为了吸引用户注意会故意发一些哗众取众动态图，吸引微信好友重点关注，这样会导致浏览者体验很差。

所以说用户需求并不是都要做的，需要综合考虑产品所有角色的所有需求和体验。

5. 通讯录作为一个超低频的需求，为何作为第二个tab

在微信寸土寸金的页面上，作为第二个 tab，无疑是代表着特别重要的地位，但是呢？这个 tab 内容都是和联系人相关的。用户进入这个页面操作的频率很小，为什么要将这么重要的位置给予通讯录联系人呢？

历史原因，早期的微信版本就是一个即时通讯的 app，所以联系人显得比较重要，作为 tab2 是很正确的，这样更有即时聊天软件的认知。

随着微信成熟之后，其他各个业务的进入，导致微信平台的臃肿，为了避免微信产品的认知和意识形态的改变，毕竟微信认知还是要保留即时工具这个属性，所以这个 tab2 一直保留。

6. 微信号为什么不能修改

很多用户第一次设置微信号时，随意取了，例如前任的拼音、以前手机号、很长随意的字母等等，现在都有想改的需求。但是微信号只能设置一次，不允许修改。

• 微信号如果可以随意修改，那么和 qq 昵称一样了，不具有唯一性和识别性，整个后端数据存储会变得特别混乱。
• 很多用户会在好多地方留下微信号（二维码）以此联系，如果可以修改的话，那么留下的微信号（二维码）可能会作废，这样很影响添加微信的成功率和体验，导致以后双方添加为了保险都不敢用微信添加好友而转用 qq 添加好友了。

7. 我的-相册为何不叫我的朋友圈

朋友圈鼓励发相片，发相片比单纯的发文字的动态质量更高，所以呢，我的-相册为何不叫我的朋友圈，如果改为了我的朋友圈，则更偏向动态发布。

8. 朋友圈为什么不支持分组查看

• 实现朋友圈分组，首先需要对所有微信好友分组，这就需要改变微信添加好友操作逻辑，而且维护分组成本特别高，使用起来是灾难。
• 大部分用户查看朋友圈是打发时间的需求。所以朋友发的内容对于他们来说，越多越好。增加分组功能，反而会降低内容的数量，让用户需要很多操作才能看完所有内容。
• 对于内容过滤的需求，已经提供屏蔽某人功能。
• 从内容分发上来说，增加按组来查看内容，很容易忽略掉其他分组的朋友产生的高质量内容。
• 朋友圈分组，会导致很多的好友动态无法被浏览到，影响朋友圈的数据，也影响朋友圈的互动性。

9. 为什么群发仅限200人

很多人有群发需求，希望可以将所有的好友群发消息，但是微信只支持200人群发。

这里也涉及到两种角色：群发者和接收者。

现在群发的使用场景：二维码宣传、点赞请求、过年群发，微商定目标人群发广告消息等等，这些对于接收者而言都是骚扰信息。

如果支持不限量群发，那么接收者的垃圾信息会变多，会被过度干扰。

10. 对话列表为何不能批量删除

• 如果可以批量删除，则微信对话的整体活跃会降低，批量的话聊天列表都删了，后续和被删者主动对话概率下降。
• 删除为谨慎操作，删除后聊天记录不在。

总结

微信的设计逻辑大体上都分为两个方面：

• 所有角色整体考虑，在考虑角色 a 的使用需求，同时还要角色 a 的使用需求给角色 b、c 亦或平台所带来的影响（这点很重要，也是我们在做设计的时候很容易忽略的）。
• 整个产品的定位以及平台生态考虑，考虑需求或设计时先全局再局部。

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

   

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在做UI设计之初，我就有跟踪一些app版本和更新的习惯。在互联网行业工作久了，我总是会从他们每一个版本的产品形态去揣测这个公司的动态。看到一些功能和交互点，我会设身处地地思考如果我是他们的产品设计师应该如何处理；遇见一些深得我心的功能点，我也总是有一种和他们的产品设计师惺惺相惜的江湖感情。反正久而久之，我边猜测边总结，也是养成了自己的一套“歪门邪道”的方法论。

言归正传，我们来看这一篇文章的内容。

时间来到了2017年，手机空间越来越大，大家的手机中也装了越来越多的app。很多时候，当拿起一个朋友的手机，看他手机里都有哪些应用，这些应用的优先级是如何排布的，我经常会从中得出关于这个人的另一层线索。

比如一个人手机里优先位置上有脉脉、知乎、豆瓣、一个ONE、单读这几个app，那我可以推测这个人一定是具备文艺属性的互联网从业者。

比如一个人手机封面是吴亦凡或者鹿晗，手机里优先位置上有优酷、爱奇艺、腾讯视频、芒果TV、天猫、京东、蘑菇街这样的一堆app，就可以看出这是一位爱综艺、爱追星、爱剁手的小姑娘。

……

 1. 意识是主观形式与客观内容的内在统一

如果说2013~2015年app的 UI设计上充斥了很多同质化产品的话，到了2017年，UI设计师们在dribbble和behance的风格影响下，产品的设计有了更多的发展空间。我们不得不说的是，现在的app比之前越来越好看和越来越好用了。

如下图所示我随意截取了九个我自己觉得UI很棒的产品和大家分享，他们分别是Enjoy、单读、Artand、Airbnb、一个ONE、Gilt、良仓、Zeen、和氧气。

那这里有一个关键的问题就出现了，为什么有些app，普通用户一打开就自然而然地觉得它很美？用户这种“觉得它很美”的意识到底是从哪儿来的？

在此之前，我先来说两组哲学概念。

意识是主观形式与客观内容的内在统一。（马克思主义哲学）

内容决定形式，形式反作用于内容。（黑格尔唯心主义哲学）

为了阐述用户这种“觉得它很美”的意识到底是从哪儿来的，就必须要了解app中“内容”和“形式”之间的关系。那我们不妨来看一下什么叫内容，什么叫形式。

2.内容

如果斗胆给app设计工作中的“内容”下一个定义的话，我大概会说：内容是集成在app中，所有可被感知的图片、文字、声音的合集。这里之所以说是可被感知的，主要是从用户层面上看，忽略了用户不可感知的“代码”层面。

那么我们有必要搞清楚的是，一个app的内容到底是如何产生的？也就是一个app到底是如何产生的？

那这里我不妨展开一下，假设我是一个产品设计师，有一天CEO告诉我最近想做一个电商app。（这里我假设我们公司很有实力，忽略了市场和运营、渠道和资金上的问题，只考虑产品设计方面。）

那这个时候我会问老板：“老板，你做电商类app，是想做平台类的呢还是做垂直的呢？你可想好了啊，你做平台类的想要从淘宝、京东分份额的话，那你必须要有自己的特色。比如国内app‘xx’、‘xx’和‘xx’、他们都有自己的特色。或者说你是想做垂直一些的么？比如‘xx’是专门做化妆品领域的，比如‘xx’是专门做美食的。”然后老板被我一番“驯化”之后得出的结论是我们来做一个美食电商，但是这个美食电商不会对标Enjoy那样的高档人群，而是做成类似于“什么值得吃”这样的大众场景。

好，故事讲完了，现在我化身为这个产品设计师，简短片面地阐述我的思考过程：首先我拿到的目标是做一款“什么值得吃”app，它的目标人群是全中国吃货，且要满足吃货推荐、评价和在线下单支付（前期无法做渠道的话需要跳转淘宝京东链接）等功能。

经过一番思考，我认为这款app的MVP状态应该需要如下图所示的功能。

这里简单说一下MVP是啥意思。“MVP=Minimum Viable product（最小可行产品）”是《精益创业》的作者埃里克·莱斯提出提出的一个概念，字面意思就是可保证产品正常使用（主逻辑闭环）的最小产品单元。MVP又分为Validating MVP和Invalidating MVP，在这里就不展开了。《精益创业》是一本特别赞的书，推荐大家阅读。

我设计的这个其实是Invalidating MVP，大概需要四个部分。

“推荐”是核心，以帖子形式或者别的什么形式推荐一些东西并附上链接。“专题”方面做一些可供运营和推广的专题，比如“情人节送什么巧克力”、“最适合食辣族的几款辣酱”之类。“商城”里面会放一些自营的物品。“我的”里面会有我的推荐、我的收藏、我的订单之类的一堆东西。

你们发现了吗，其实这个时候，产品设计师就已经在定义产品的信息架构了。

第一，因为这个app叫”什么值得吃”，那我们是不是还需要推荐一些线下值得吃的店呢？如果做了是不是就和Enjoy同质化太严重了？那最好就是先不做。

第二，在推荐这一页里面我大概需要什么功能，因为面向的对象不太像Enjoy那种偏一线城市的人群，那我应该用户群体同类对标到今日头条这种level的感觉。

第三，这个首页我是按照各种食品属性的分类来建立推荐列表呢，还是说我按照人的属性来建立推荐列表呢？如果是按照食物的分类的话，给别人的感觉可能和淘宝很像，比如我在列表里面看到“巧克力”再点进去看巧克力的推荐，和我在“甜品族”这个人群标签里看到某巧克力好吃，这两种行为逻辑给用户的感觉完全不同。大家体会一下，作为“什么值得吃”这款app来说，肯定是后者更适合，所以得出结论是以人的属性建立推荐列表。（我甚至考虑到了以后迭代未来功能版本的可能性，比如到时候每个人可以有多种身份标签，再去做匹配社交之类的。）

好，那我现在关于产品首页大概得出了以下几点感觉。

（1）首页推荐按照人的属性标签去区分推荐列表。

（2）产品风格不宜太洋气（尤其是一定不能像Enjoy那样使用黑白配色），最好是产品对标今日头条和微博的感觉，受众偏向二三四线城市。

（3）每一个推荐应该有收藏、购买链接等部件，在首页上应该有专门为运营活动或者市场换量设置的入口（可能是banner形式）。

（4）为了不使推荐属性具有倾向性，每一个推荐都应该尽量层级平行。（比如“吃辣党”和“甜品族”就应该入口平行。）

（5）一定要保证一个完整且通顺的支付逻辑和用户推荐逻辑，这是最基本的两个功能。中间可能涉及到推荐里面要有商城链接（如果商城没有的要跳转淘宝），自己的商城要支持支付宝、微信等支付方式，要有订单状态和退单等一系列功能，余额功能或退款自动退回功能二选一（看公司需不需要资金池）。

....（此处省略N条）

其实，app“内容”的产生，就是我上述这些奇怪东西的综合（当然其实并没有上述这么简单，这个以后有机会细讲），比如我们从上面的论述当中，可以归纳出这款“什么值得吃”app的首页“推荐”应该具有如下信息。

我写这么多字其实就是想告诉大家一个app的“内容”是如何产生的，当然我这里说得十分简单，真实情况可能比这个复杂百倍，大家意会就是了。

好了说完了内容，我们来看所谓app中的“形式”又是什么。

3.形式

如果说我们把所有集成在app中可感知的图片、文字、声音的集合称作app的内容的话，那么app的形式就是“承载这些内容，使内容更好被感知的方式”。

人有五感，包括视觉、听觉、嗅觉、味觉和触觉。而人去和一款手机应用进行交互的时候只会从视觉、听觉、触觉（反馈）三个方面去感知，而触觉涉及到交互层面，以后我写到app的交互架构的时候会详细说。 听觉其实也不是本文重点，我举个例子一笔带过就好了。比如大家都用过滴滴，滴滴有一个“内容（功能）”是司机送一个乘客的过程中，当判断距离目的地很近的时候会默认进行一个“下一单的匹配”的功能。我们用滴滴的这个功能来对比手机游戏里面的“匹配下一局”，我们会发现这是几乎相同的“内容”，但是承载形式不一样。手游是视觉展现，你必须点击手机上的“匹配”按钮，而滴滴因为考虑到司机在开车很难解放双手去点击匹配，所以从产品逻辑上设计的是“语音提示+主动匹配+手动接单”的方式，所以我们总能在快下出租车的时候听到司机手机上传出响亮的“开始接单啦”语音提示。

本文的重点是视觉。

可能在大家以往的工作当中并不会关注一款app原型是怎么样设计出来的，大家可能只会关心我拿到原型以后应该如何转化为惊艳的高保真页面。

把一个内容整理、排列成一个app页面，就是大家更关心的“形式”的部分。还是回到上文“什么值得吃”这款虚构的app上，综合上面的观点，我大致能画出原型如下图所示两种。

当然这个是最粗糙的原型。（如果各位UI设计师在工作中接到了类似于这样的原型那只能说心疼你们一秒。）那么问题来了，大家在生活中一定见到过这两种原型的app。左边这个很常见，比如斗鱼tv这些直播平台，早期闲鱼、网易严选和今日头条等都是用的这种感觉；右边这个就更常见了，不论是点餐平台（美团、百度、饿了吗），还是大型电商（京东、淘宝）你都可以看到它。

那么问题来了，尝试分析一下，上面这两种形式到底有什么优劣呢？

第一件事应该想到的是如果需要采用右边的排列形式就必须要控制标签（tag）的字数，你懂我是什么意思吧？比如今天有个运营跳出来说我们做一个新的标签把名字叫“酸酸甜甜就是我”。产品一定特别崩溃，原因如下图所示。

第二，由于右边的标签占据了推荐贴的位置，导致推荐贴可能没有左边的那种展现形式更加醒目。但是相对的，右边的优势在于，由于竖向排列可以让一个屏幕显示更多的标签，这一点就需要取舍，比如一个产品的初期没准备放这么多切换标签的话，还是建议用左边那种。

更深层次的，外卖产品之所以用右边这种形式是因为力求一屏展示更多的菜，而且外卖产品的左侧标签一般是一家店铺的菜的品类，用户下滑菜品配合点击品类，点完即走，很方便（京东和淘宝电商类平台也是类似的）。但是比如早期的今日头条只能采用左边的这种形式，因为头条是需要用户长时间沉浸的，比如用户选中一个“体育”的标签一般要看好久好久，用户需要沉浸在这个标签下的内容中，那这个时候显然用右边这种设计方式让标签常驻屏幕左侧是不合适的。

基于以上分析，作为内容+电商平台的“什么值得吃”应该选用左边这种设计形式。

好，“什么值得吃”这个虚拟的例子就说到这里，主要是让大家明白内容和形式之间的关系，只有你们明白了这个，才可以正式进入本章的主题——app的视觉美成因分析。

4.app的视觉美成因分析

首先来看结论。一款app让你感觉到长得美，一定是团队在两个方面下功夫了——第一是内容的视觉优化，第二是形式的视觉优化。

我先来给你们看两张图，让你们感受一下什么叫内容的视觉优化。

你们可以看到左右两张图，左边是Enjoy的精选页，右边是我随手糟蹋的，大家会发现其实信息内容一模一样，但是左边的和右边的视觉设计差距大家一眼就能看出来吧。如果出现右边这样的UI稿，那只能说明这个团队在内容的视觉优化上面不用心！以上就是内容的视觉优化的作用。关于内容当中的图片，其实大家都有直观感受：一款app允许用户自定义的图片越多，这款app视觉就一定越难把控。原因很简单，因为用户自定义的信息里面，文字信息我们是可以通过限制字段和select（选择）去控制的，但是对于图片来说，哪怕控制了用户自定义图片的尺寸，我们也无法控制这些图片的质量。大家去看一下秒拍这款app，它的框架设计做得很棒，包括一些empty status（无内容状态页）的小图标绘制都很棒，但是我们打开app的时候，首页的内容总是参差不齐，差强人意。同理还有闲鱼这款app， UI框架做得很漂亮，但是内容页面总会显得没那么“高大上”。

Enjoy，自如、氧气、想去以及Gilt、美团等这些轻量电商或者租房app都选择花一大笔成本自己聘请一批或全职或兼职的摄影师的原因，就是为了得到符合自己规范的优质内容图片（比如你们去看自如的房源信息照片基本就是那种样子，氧气的内衣样片背景永远是白色）。

我之前做过一款旅行游学类app，在立项之初我们的图库里面就已经有了几万张高质量有版权的摄影师作品，然后在设计的过程中大胆采用流式布局（类似于今天开眼app），大量展示优质图片，才使得在2015年初那个时期我们的UI风格比较具有鲜明的特色。

其实这也是一个产品团队需要深思熟虑的点：

·比如旅行app，一定要有大量优质的图片作为依托才可能美。

·比如淘宝这种体量的大型电商，那除了尽可能控制图片质量以外，更多的应该在优化专题和banner上，并且告诉入驻商家（用户）上传优质的图片更容易获取用户流量从而转化为成订单。

·比如知乎、贴吧之类这样的问答和社区，用户上传的图片五花八门千奇百怪，那我们可以考虑在首页列表展示的时候就压根不要展示图片……

那是不是内容的视觉优化只包含图片的优化呢？其实不是的，除了图片的视觉优化以外，icon的优化、文字的视觉优化这些都是很重要的。

关于icon的优化大家应该已经看过足够多的文章在这里我就不赘述了，比如线性icon里面不能掺入块状icon，负空间icon里面不应突然出现一个奇怪的渐变icon。我有一点心得可以分享，比如大家画了一个2px的线性图标用于@2x，那在plus iPhone 的plus机型，6p 7p 8p都叫plus上面应该要手动调整一下图标变成3px而不是用png自动生成，否则会有虚边（除非你们的工程师使用的是svg的iconfont）。

关于文字的视觉优化，几乎市面上的所有app，只要涉及文字内容的排版，毫无例外都做得很好了。从根源上出发，为什么一个设计师需要去不厌其烦像个工匠一样折磨开发调整字体大小间距粗细什么乱七八糟的东西？其实，字体视觉优化去达到的目的主要有两点：

（1）辅助视觉对焦

（2）减轻视觉压力

第二点没什么好说的了，大家应该都明白，主要说第一点，视觉对焦这个事情是这样的，我们在一个界面中，如果不出现特别突兀的信息，正常人眼一般是从左到右，从上到下的顺序阅读。

比如上图是一个阅读界面，所有问题都没有特别突兀的地方。我们把界面做一个高斯模糊去分析视觉焦点，会发现整个页面呈现很平和，所以，这个页面的阅读顺序应该是一行一行地阅读文字，也就是从上到下，从左到右。

但是，这只是页面形式很平的情况，举个没那么平的例子。

上图是知乎的一个页面，我们把它去色并且高斯模糊去分析它的视觉焦点。大家会发现其实视觉焦点是加粗加大的标题字体和上面的小头像构成的。

这就是使用文字优化去辅助视觉对焦。我不妨再举一例，大家来看下面的2016年5月左右的氧气app截图。

左边是氧气的原UI，右边是我做的对比图。显然，关于文字优化辅助视觉对焦这一点，氧气的设计师深谙此道。他们没有按照右边那种传统办法设计这个页面，而是把每一个深夜话题的题目都变成了一张图，变成一张图还不算，还在这张图上面用浅绿色“划了重点”。这样虽然加大了设计师的工作量，但是这个页面正是因为这样的处理，能让用户第一眼聚焦到标题上。

关于内容的视觉优化，我来总结一下吧。

app内容是集成在app中，所有可被感知图片、文字、声音合集。那么内容的视觉优化主旨在于通过图片，文字，图形（icon）等的优化，去使得app更加易读、易用和美观。

说完了内容的视觉优化，我们再看一下形式的视觉优化案例。按说只要内容都已经优化好了，表现内容的形式不是排得特别烂，视觉效果展现出来应该都不错。我们再重复一遍app形式的定义——能更好地承载内容，使内容更好地被感知的方式。

我们该如何去排列不同的内容让它们更好地被感知呢？

这里面最常见的方法就是UI组件化设计，关于UI组件化设计我个人的定义是一款app里面同样形式排列但是不同内容的单元。这样的例子不胜枚举，我们每天都见到的最常见的一个组件化设计是微信里的每一个table view （表格视图）。

大家打开你们的微信，可以看到其实微信的聊天列表的每一个单元都是由固定的内容组成的。内容包含一张图（头像），两段文字（名字和信息），一段时间组成。

再看以下两个页面。

先看左面这个页面，虽然第二个品牌故事被遮挡了很多，但是由于我们看到了第一个GUCCI的banner之后，用户心理预期就有了，用户左滑一下屏幕大概率出现的也是这样形式的不同内容。

再看右边这张图，一个app的每一个专题都是以一本杂志的形式呈现的，所以当你看到这个页面的时候，用户心里会有“我左滑右滑都是一本专题书”的预期。

在设计过程中，我们往往会把相同属性的内容设计成同一形式。这样做有什么优点呢？最大的优点是减少用户认知负担，使得内容更好地被感知。

举个大家都懂的格式塔的例子。

看上图A，大家都知道接下来一个一定是正方形，但看上图B，下一个别说你们不知道是什么，我也不知道。格式塔相似律告诉我们，人们在知觉时，对刺激要素相似的项目，只要不被接近因素干扰，会倾向于把它们联合在一起。

那么我们就很容易解释下图。

大家看到这里是不是很熟悉？联系上下文，现在应该知道为什么市面上的app都这么设计了吧？还不就是为了让用户更好地接受信息。

5.总结

一切UI设计本质上是为了更好地展现信息。

更好地展现信息是为了更好地指引用户完成交互操作，从而让用户更好地去接收信息并完成一定功能目的。

本章一直在讲述app信息呈现上的视觉优化。其实视觉优化也好，逻辑优化、交互优化也罢，都是为了使得app更加好用、易用、有效。

在我刚开始接触UI设计的时候，也曾经沉迷dribbble，不断模仿那些大师们的惊艳界面。在长达一两年的学习和工作中，我一直认为UI设计师的本职工作就是画一个漂亮的壳子，把信息装进去然后能让app变得更好看而已。

但是后来我完全不这样想，如果现在让我评价一款app的UI，我可能真正最看重的那个维度已经不是“视觉感觉”上的好看，而是“视觉逻辑”上的严谨和“视觉风格”上的一体化，比如分割线，比如icon的样式，比如tableview（表格视图）的设计，比如字体的主次对比等。

当我没有理由的画一条分割线，只为了分割两个也不知道是啥的元素时，当我没有理由地就是想要为卡片化组件加上一个box-shadow（阴影）时，当我没有理由的设计一个奇怪的交互方式还硬说它特别好用时，我都在警醒自己一句话：每一个UI界面的设计都应该被赋予应有的理由。希望以此共勉。

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