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

有时一个新功能的上线，新内容的更新，会导致在一个页面中出现层叠式的引导内容，页面上大部分引导的触发时机也比较接近。那么，对于这种多重引导，要如何处理呢？

交互设计流程中，每当有新功能上线或者新的内容优化更新时，对应版本中一定会出现新手引导或者相应形式的提示内容，这在业界似乎已经成为一个约定俗成的东西。

毕竟，酒香也怕巷子深，在这个用户注意力被极度分散的时代，任何一个应用都不敢说，自己可以占据用户每天绝对时长的时间，让用户来“充分”自己挖掘每个版本的更新内容。

所以，“自荐”似的引导出现在了每一次的应用安装或者更新中。

在一次版本验收中出现了这样一个问题：最初的设计过程中，由于功能模块都是单独提出需求的，所以交互设计文档给出的时候也是拆分成不同的模块提交，可是实际验收时，当所有的新功能都在一个页面中呈现的时候，问题就出现了。

由于页面功能改版较大，既有新功能的上线，又有新内容的更新，所以在一个页面中出现了层叠式的引导内容，页面上大部分引导的触发时机也比较接近，因此就会在某些页面出现气泡、蒙层引导堆叠显示效果，让人防不胜防。

在于产品和开发同学沟通后发现，除了需要合理统筹调整触发时机以外，需求提出时并未严格区分每个引导是根据用户ID来判断，还是依据设备ID来判断，实现过程中统一默认以用户ID作为了引导出现的标准。

结果导致页面中出现引导堆积的情况出现，将引导的触发条件增加一条设备ID和用户ID，本质目的是将引导出现的时机更加合理化，在不影响用户操作流程的情况下向用户传递信息，提升用户体验。

如何解决这个问题？

还是需要从本源找起：一是引导的目的，二是触发的判断依据。

一、引导的目的

（1）新用户操作引导

主要是指用户第一次安装应用后出现的引导，告知用户核心操作方法和流程。

（2）功能更新引导

主要针对产品功能升级后，用来告知用户新功能的入口、操作方式等内容。

（3）与用户权益相关更新或说明

当更新内容与用户权益、身份属性内容相关时，需要出现适当的引导或者气泡形式的提示来告知用户，这种引导与用户的激励体系、产品玩法高度相关。

（4）常规功能操作引导

这种操作引导较为常见，每次更新应用或者新安装时都会出现，几乎成为例行出现的“常识性”引导，例如：页面中的手势操作引导等。

以上4中引导类型，在具体展示形式上主要包括前置引导和过程中引导两类。

前置引导：类似于引导页，在用户开始使用应用前直接告知用户更新的功能、玩法等enrich，一般都是全端出现的。

过程中引导：是指用户在实际使用到，或者进入该功能入口所处界面时出现的引导，这种引导需要用户的触发时机。而且由于出现在操作过程中，对操作本身具有阻碍的副作用，所以也只会出现一次而已。

了解了使用引导的目的，再来看一下触发引导的判断依据——设备ID和用户ID。

二、触发的判断依据

（1）设备ID

是指Device ID，是一台设备的识别标识，正常情况下，一款移动设备上的应用，无论切换都少个登录账户，其设备ID是不变的（刷机除外）。

（2）用户ID

即User ID 或者UID，是用户在登录应用后的身份识别码。用户ID产生的条件是需要用户注册生成账户后登录App，这样用户就可以想服务器发送和接收消息，服务器也可以通过UID来进行准确的push消息推送，用户与服务器之间可以进行交互。

除去一些纯工具类型的产品，大部分应用都需要用户注册登录后使用，当然，在这里就不深究是否强制用户登录等逻辑。

三、解决方案

明确了以上两方面内容，同时考虑引导使用的形式，其实也就不难判断，应该如何处理页面中多层引导的问题了。

（1）新用户操作引导/功能更新引导

这类引导如果使用前置引导类型，则信息传递是面向全局的。

当功能引导与用户个人信息无关，只是功能操作或者内容更新时，往往可以以设备ID作为推送判断标准，即一个设备，在一次应用安装周期中，出现一次即可。若用户在引导出现后，切换了登录账户，再次打开该界面时，不在出现重复的新手引导。

简单来说，此类引导的出现不需要区分用户信息，甚至不需要用户登录即可使用，所以基本上此类引导均已设备ID为触发判断的基本条件。

若此类引导使用过程中引导，则需要在实际使用过程中抓取适当的触发时机，此时如果出现多重引导时，则需要适当区分使用用户ID或者设备ID作为触发条件，从而将引导出现的时机合理区分。

（2）与用户权益相关更新或说明

此类引导一般需要细分用户身份信息，准确推送用户所需的内容。例如：会员与非会员之前在某个功能上有权益的差别，引导或者提示的内容则需要按身份不同来推送。使用前置形式时，可以根据实际需求调整判断依据；使用过程中中引导，这时则基本上需要使用用户ID作为触发依据，其他引导可使用设备ID用以区分不同引导。

（3）常规功能操作引导

『例行』出现的引导，不受场景限制，与用户权益关联度较低，因此以设备ID作为触发的基本判断依据即可。

四、小结

当页面功能过多的时候，难免会遇到多重引导的问题出现，除了通过展示形式、页面内的触发时机来区分以外，还可以通过设备ID和用户ID的作为触发依据来细化和区分引导出现的时机和场景。

不过这种判断方式也并不是一成不变的，需要灵活处理，例如：当引导出现时，该场景下用户处于未登录状态，此时服务器根本无法获取用户ID，在此场景下讨论设备ID还是用户ID显然毫无意义，需要重新调整引导出现的时机或者展示形式。

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

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

在工作中，有时会遇到这样的一个现象：自以为是最优的设计方案，用户却并不会按照预期的方式使用。每每发生这样的事情都会让我很困惑，用户为什么不听话呢？

一、出现问题

试想这样一个场景：假设有电话打进来，你却没有接，试想一下可能有哪些原因导致了「没接电话」 的这个行为呢？

问题可能出现在三个方面：

• 你发现打进来的是一个保险推销电话，不想接电话。这代表着你缺少接电话的动机，因此导致了没接电话的行为。
• 你正在开会，不能接电话。这代表着你当前缺少接电话的能力，因此导致了没接电话的行为。
• 你的手机静音了，没有听到电话。这代表着「电话来了」 这件事情并没有触达到你，缺少触发也能导致没接电话的行为。

通过上述的例子不难发现，用户的行为是受多种因素影响的，我们姑且将这些影响分为三类：动机、能力、触发。

二、案例分析

现在试着用这三个要素来分析一个身边的案例：虽然我知道这样不好，但是我依然热衷于打王者荣耀，这是为什么呢？

1. 动机

王者荣耀作为一款游戏，自带着「好玩」 的属性，可以让玩家在其中获取快乐，抵御痛苦；另外，来自朋友的邀请、因为玩游戏游戏而带来的谈资、通过提升段位获得的群体认同感等等都可能成为强有力的游戏动机。

2. 能力

王者荣耀成功的将 DOTA、LOL 等 MOBA 游戏从 PC 端迁到移动端，只要拥有一部智能手机和一个稳定的网络环境，随时随地都可以拿出手机玩上一局王者荣耀，MOBA 类游戏的设备门槛从未被如此降低；另外，游戏的操作、套路等等也被极度简化，没有了 PC 端 MOBA 游戏极高的学习门槛，让更多人可以具备加入这款游戏的能力。

3. 触发

来自朋友的邀请通常无法拒绝，这就是依托于社交的病毒式传播所具有的巨大威力，当茶余饭后，朋友喊你一起开黑时，一次有效的触发就已经达成了。除此之外还有来自官方的 push 消息、微信中的每周战报等等，这些都在不停地触发用户，让玩家不断强化对于游戏的印象。直到有一天，当你闲来无事的时候不由自主的想到拿起手机打一局王者荣耀，这时它就已经达成了来自玩家内部的触发，成为了你的一个习惯。

拥有强烈的游戏动机、具备参与游戏的能力、再加上合理的触发机制，这些因素共同造就了玩家热衷于打王者荣耀的行为。

三、分析影响因素

由上述案例可以看出，动机、能力及触发这三个因素对于用户的行为有着十分重要的影响，而且如果你仔细思考会发现，这三个因素不仅仅适用于上述的案例，而是可以用来解释绝大多数场景下用户行为产生的原因，所以接下来我们展开分析这三个影响用户行为的关键因素。

1. 行为动机的根源

用户的行为动机大致可以分为三种：

追求快乐、逃避痛苦：用户更加喜欢能够快速带来快乐的产品，例如微视等短视频产品，让用户通过快速消费几秒钟的短视频就可以马上获取快乐，这也是越来越多的用户沉迷其中的重要原因之一。

追求希望、逃避恐惧：用户也会为了追求希望/逃避恐惧做出许多下意识的行为。例如我曾经观察到，很多人在点击保存文件时会连续点击多次工具栏中的保存按钮，或者多次在键盘上按下「Ctrl+S」 的快捷键，这样的行为大概是害怕不小心丢掉自己的劳动成果。这种下意识的多次点击保存的行为，就是「追求希望、逃避恐惧」 的一个具体表征。

追求认同、逃避排斥：人是具有社会属性的，我们都会追求他人的认同，避免被他人排斥。因此在社交网站上的点赞、评论、转发等互动往往会给作者提供源源不断的创作动力，其本质上是人类追求他人认同的心理成为了强有力的驱动力。

2. 能力限制

用户的能力限制来自六个方面：时间、金钱、体力、脑力、社会偏差、非常规性。

前四种能力限制比较容易理解，在此不做赘述。

社会偏差，是指他人对该项活动的接受程度。例如曾经在社交平台中随处可见的「不转不是中国人」 、「为了家人转起来」 之类的绑架式传播，现在已经很少见了，因为大家都不喜欢这样的东西，所以当用户遇到类似的内容时，也不太容易选择转发了。

非常规性，是指该项行为与常规活动的匹配程度或者矛盾程度。例如大型超市会在用户的常规的行动路线上放置一些小商品，这样用户就很可能会产生计划外的购买行为，如果放置小商品的位置与用户常规的行动路线不匹配，甚至互相矛盾，显然就达不到引导用户产生额外购买行为的目的。

3. 触发方式

触发大致可以分为外部触发和内部触发两种。

外部触发可以理解为产品为了触达用户而做的事情，又可细分为四种：

付费型触发：通过付费的形式进行推广，最常见的就是广告，商家花钱做广告，使其产品让更多人知道。

回馈型触发：通过正向反馈获取的曝光，例如产品在应用商店的排行榜中位于榜首，自然会获得更多的触达用户的机会。

人际型触发：通过口口相传的方式触达用户。

自主型触发：产品自主产生的触达行为，例如新闻APP 每天在固定时间 PUSH 的新闻给用户，久而久之，即使一个不怎么经常看新闻的用户也会知道有这样的一个 APP 可以查看新闻。

相较于外部触发，内部触发则显得更加有价值。内部触发是指用户的内在情绪/情感等驱动而触发的用户行为，这是所有产品的最终目标。例如用户发现通过玩某款游戏可以治疗「无聊」 的情绪时，一旦其产生无聊的情绪，就会自然而然的想到玩这款游戏。这样产品就与用户建立了一个内在的良性联系。

外部触发往往是昙花一现，而内部触发才能真正让用户产生习惯。

总结

总结起来，用户的行为规律是有迹可循的，总体上符合这样的一个模型：

行为（Behaviour） = 动机（Motivation） + 能力（Ability） + 触发（Trigger）

如果一个产品/功能使用起来比较难，则需要用户有较高的动机，再加上合理的触发，才能让用户的行为触发成功；反之，如果用户的动机较低，则必须让产品/功能非常易于使用，再加上合理的触发，才能让用户的行为触发成功。动机、能力、触发三者共同制约着用户的行为，缺一不可。

因此，如果再遇到「用户不听话」 的情况，不妨用这个模型来检验自己的产品/功能是否存在问题：用户的使用动机是否较低？使用难度是否太大？是否合理的触达了用户？相信这样一轮检视下来，总会有一些收获的！

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

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

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

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

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

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

1. 以白色和浅色为主的配色方案

虽然以白色和浅色为主的配色方案似乎哪里都有，但是在最近，这种趋势体现的非常的明显。

色彩的运用一直都是诸多设计趋势当中，最为醒目的组成部分。这种以白色和浅色为主的色彩美学，似乎在和之前所流行的高饱和度霓虹色的流行做对抗，柔和的灰色，相对清冷的色调，甚至是显得没有足够温度的粉色，这些色彩都在力图淡化之前配色方案中浓稠的情感和激荡的氛围。

Verho

以白色和浅色为主的配色方案，相对而言是没有那么醒目的，设计师在采用这种配色方案的时候，常常会结合其他的元素，来丰富整个设计的视觉感，这样就避免了出现「过于普通」的视觉感受。这种配色设计还包括了使用片拍的图片素材，就像 Verho 这个网站。

Omega Yeast

Alexandra Elise

不过图片和色块并不是唯一的实现这种配色的方案，采用视频或者插画元素同样可以做到，比如 Omega Yeast 和 Alexandra Elise 这两个网站，它们同样足够吸引人。

这一设计趋势可以搭配风格相对清爽、情绪比较清浅的网站主题，在炎热的夏季显得尤为有感觉。页面中的文本内容只需要采用相对较深色彩的字体，即可确保良好的可读性。

在按钮和为数不多最为重要的元素上，可以采用明亮的色彩，以示强调，整体风格则可以保持极简。

如果你喜欢极简主义的设计，并且打算运用这一趋势，这篇文章别错过了：

2. 数据可视化

数据可视化将数据的直观性提到了一个全新的层次，它使得跨行业的数据展示和信息呈现变得更加有价值，也更加可靠，而大规模的可视化的数据呈现并不是奇怪的事情。

不过也正是因为数据可视化让数据变得更加亲民，设计师开始更多地将图表和数据加入到日常的设计当中来，结合交互式动画，让数据在整个网页设计当中，开始发挥更多的作用。借助可视化的设计，数据信息更轻松地为用户所理解，整体设计也开始显得更加富有吸引力。

而这种设计趋势需要设计师花费更多的精力来处理数据，尽量多借助现成的数据可视化的工具来进行设计。

在网页设计当中，将数据以可视化的方式嵌入进去有很多不同的方式，而这一趋势最吸引人的地方也是交互式的动态信息展现。

Tree Tree Tree

Tree Tree Tree 这个网站就很好的利用了数据可视化来展示天气，当你输入你感兴趣的地方的时候，它会使用可视化的树木来呈现当地风力大小。此外，你还能和底部的交互式的地图进行互动。

Tomorrow’s World

Tomorrow’s World 这个网站则始于一项调研，而网站最终会将一系列的调查使用可视化的方式呈现出来，帮助用户了解周围的世界。

Qravity

Qravity 在网站中加入了多个数据输入点，用户可以通过滚动交互来调整时间轴，信息的呈现也会随之发生改变（比如日期和事件），这比起简单的列表要好懂得多。

3. 多边形2.0

多边形元素从2017年开始成为设计师们的心头好，作为一种持续流行的、泛用型的设计趋势，一直流行到现在。有意思的是，多边形元素也不再维持以往常见的样子，开始在外观和视觉上发生改变。现如今的多边形不再是以往小巧玲珑、成群结队的样子，设计师开始有意识地挑选一些多边形，赋予它们超大的外观造型，而不再是简单的点缀和堆砌。

这些超大的多边形元素可以在不同的设计风格之下良好地运作，结合不同的样式和色彩，发挥作用。它们可以作为整个设计模式中的一员，作为装饰元素也可以用来作为强调特定内容的容器（比如图片和文本）。

多边形元素的有点在于，它们造型多变，可以区别于常见的原型和矩形，更容易吸引用户的注意力。这种不同的使用方式，我们姑且称之为 多边形 2.0。

The Alan Turing Institute

多边形的特征、角度可以随着你的设计需求来灵活选择，比如 The Alan Turing Institute 这个网站会在右侧露出三角形的一部分，Evoluted 这个网站则将简单的线条和多边形搭配在一起，互相叠加营造出聚合的感觉，而 Iqor 这个网站则更加倾向于使用多边形来承载内容。

Evoluted

iqor

多边形和不同的色彩搭配，所带来的视觉体验和强调效果都是非常突出的。不过要将内容和多边形结合起来，设计师还是得花点心思。

更多多边形元素的玩法看这里：

结语

对于设计趋势而言，它是存在时效性的，它之所以在特定的阶段流行有诸多因素的影响。当你在设计的时候没有想法的时候，设计趋势能够给你的不仅仅是当下设计方向上的选取，也为你提供了一个可供参考的选择。

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

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

之前一直觉得色彩，图形，字体是 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。