写在前面

近几年云计算和大数据的兴起，以及政府数据化战略的升级，G端逐渐出现在大众视野里，受到各大互联网公司、IT厂商的青睐，BAT也在2018年宣布进军G端市场，给信息化市场带来了新的气息。

由于工作需要，经常会和客户沟通，总结出来G端客户有一个特性是，他们大部分为高知人群，从学历、社会地位、经济收入、家庭背景等都占有相当的优势，长期在政府部门工作，他们习惯于政令形式、层级森严的环境，会有工作任务固定、重复率高、失误率低的需求。

与toB相比，toG产品项目的特点是——

1/ 客户业务主导性强

调研对象政府相关部门的领导和科员，对业务主导性强

2/ 改变用户行为难

原系统运行时间较长，形成了用户习惯，接受新系统难度较大

3/ 项目工期短

部分toG项目要求工期紧，系统需求调研、开发时间较短

4/ 系统应用阻力大

涉及原系统、单位内部环境等问题，系统使用过程需要长期博弈

工作以来做了不少toB和toG的项目，这两者相似却又不同。

【相同点】

• 都是服务于用户，需要站在用户的角度分析用户需求，为用户解决问题

• 都是要把产品和项目做好，兼顾功能的同时，使用户体验更好，才能实现盈利

• 都是重功能、轻视觉，要符合产品的实际需求，并有效提升业务运营的效率

• ...

  
  

【不同点】

1/ 面对的客户群体——

toB是面向企业客户的，一般为企业内部人员使用，不向大众公开。

toG是从toB衍生出来的一种特殊划分，面向的企业是政府相关单位。

2/ 资金来源——

toB通常由企业拨出资金

toG通常由国家财政拨出预算，并非完全基于自身的组织或企业的资金。

3/ 决策机制——

toB一般为客户、公司管理层

toG的话，不同层级的决策者有不同的考量，比如高层领导希望打造影响力来获得政绩，中层领导希望体现布局和价值，小领导希望解决自身申请项目和提升职称等的需求，最终用户能否用起来，反而不是很重要。所以解决方案要满足不同层级和角色的需求。

4/ 产品需求——

toB满足刚性需求并满足一线使用者需求为主

toG非常多的产品功能非刚性，通常会让研发人员难办，因为比较难证明产品或研发价值，但在售前和控标阶段，大而全的功能又会成为各产品之间的军备竞赛，最后将产品功能补齐，开启同质化竞争。所以更多的是满足非刚性、但有利于搞定决策人的、有价值的功能需求。

5/ 产品标准化——

toB面对中小型客户，需求浅、没有足够的谈判筹码，不需要定制化；大客户的话，需求更深入，定制化不可避免。

toG比较难实现标准化，因为toG本质上是重政绩轻实用，这就导致相关决策人总希望做出不一样的东西，不仅别人有的我要有，我的还要有特色。所以可以从两方面入手，一是只做通用层能力，定制化找合作伙伴来做，保证渠道和底层能力的核心竞争力；一是自建定制化团队，专做定制化需求，避免拖累正常的产品迭代。

6/ 视觉设计——

toB一般冷色系居多，整体简洁

toG要根据客户喜好来设计，最好能体现单位或地方特色；视觉方面，界面不能过于简单，互联网扁平化并不适用，要尽可能充实界面，但要把握「度」，不能太花哨，一般配色以红&蓝为主，庄重、大气；内容方面，要遵循国家相关要求和当下政策环境，不可随意乱造，最好是当前业务测试内容；交互方面，不可有过多的交互层级和特效，操作路径要尽可能短一些，一般是一到两个交互动作就可以完成任务，要考虑40-50岁人群的体验习惯。

（这里可参考之前写的一篇文章，详细介绍了简化操作路径的案例，一站式解决问题，有需要的同学可以看看，链接如下https://www.zcool.com.cn/article/ZMTIxNDg4NA==.html）

7/ 产品迭代——

toB一般有一定的周期

toG产品项目，一般第一次上线之后，客户会提出一系列问题，返工重新做的情况也是有的。所以toG很适合MVP(最小可行性产品)，因为政务用户不同层级的需求和对需求的认知不同，造成了对统一功能不同用户的意见有很大的不同，其实第一次上线运行就相当于一次内部测试，返工的时候不必太挫败，只要做到核心业务流程和业务模块完整即可。接下来再通过几次的测试、收集意见反馈，讨论决定最后的需求，这就是很多toG项目需要去客户现场驻场的一个原因，采用小版本、多迭代、多沟通，及时解决问题。

PS: 关于去客户现场，这里想多说几句。

通常情况下，是产品经理和开发团队驻场居多，但有时候设计方面常会遇到一种情况是，客户需求不明确。通过产品经理在客户和设计师之间来回转达消息，效果也并不是很好，这个时候就需要设计师主动争取机会去客户现场。有一个典型的案例是，去年做GAB的项目，需要设计一个登录界面。设计稿做了很多，客户一直不满意，于是我申请到客户现场进行面对面沟通，去的时候会带几个有代表性的风格给客户看，先把不想要的风格排除掉，然后把握大的设计方向。具体设计的时候同步表达自己的设计理念，一步步引导客户，客户中途一步步给意见建议，参与其中，这样更容易明确需求，客户也会觉得这是自己与设计师共同的成果，会更容易接受，做出双方都满意的设计，促进验收，最后双赢。

这就是那个「看起来平平无奇 · 但解决了实际问题 · 客户很满意」的登陆界面，如下图：

8/ ...

很多toG的产品项目上线后造成的客户影响不好，这个时候要调整好心态，只要你设身处地站在用户的角度思考，分析场景和需求，用我们的专业技能来解决问题，当你经历各种否定和困难最终得到客户的认可，这种打磨过后的成就感真的难以言喻。

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

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

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

互联网行业，竞品分析已不仅仅是产品经理的工作内容，对于UI设计师来说系统地分析竞品并且做出有理有据地分析已经成为必不可少的技能了。

*文章中出现的工具名单以及网址出处，我会汇总到文章结尾，供大家学习使用。

一、竞品分析的概念

竞品分析（Competitive Analysis）一词最早源于经济学领域，是指对现有的或潜在的竞争产品的优势和劣势进行分析。

通过找寻市场上存在竞争关系，高品质的产品，把他们进行分类和对比，输出结论为下一步决策提供正确的方向，它就像是武林中的吸星大法武功秘籍一样，可以把各家的绝招都变成自己的武功招式。

他山之石，可以攻玉。竞品分析是一个长时间定期持续积累，不断挖掘和分析的一个过程，我理解它更像是一种解题公式。设计产品最终目标就是追溯用户需求本身，解决用户痛点，而竞品分析就是解决用户痛点这道大题的思路方法，就好比要解开一道复杂的数学题，需要用到很多公式，而竞品分析就是一个环节中的一种公式而已。

二、竞品分析的框架

一套完整的竞品分析主要由以下七个模块组成，因为企业资源的原因一般是不需要全部输出出来的，需要根据具体需求进行重点分析，并不是每次竞品分析都是面面俱到的。

正是因为企业为了适应小步快跑的产品迭代频率，要求在做竞品分析时候都会尽量地精简化，比较有针对性，所以市面上就出现了三种不同表现形式的竞品分析，分别是商业模式分析、交互体验分析视觉体验分析。

3.1 产品经理——商业模式分析

如果你以为产品经理只是拍脑袋想需求的这样一个工作者的话，那你就大错特错了，其实在现实工作中产品经理有一半以上的时间是做竞品分析的。

产品经理作为架构产品核心功能，排期产品迭代频次的主要负责任人，考虑的多数是产品盈利问题。所以产品经理关注的是产品的商业模式的分析，多有对产品数据层、产品层、用户层、盈利方式等维度的分析。

3.2 交互设计师——交互体验分析

交互体验的分析，顾名思义，就是对产品功能场景交互结构的分析。对于体量小一点的公司会把这项重任都交付给UI设计师了。

交互体验分析可以分为三个层次的分析分别是：

·核心功能：对产品的基础交互框架的分析。

·次核心功能：对产品易用性、提升效率、消除担忧的功能点的分析。

·辅助功能：对产品情感化设计、特殊状态处理、特定使用场景优化等交互功能的分析。

3.3 视觉设计师——视觉体验分析

视觉体验的分析，一般是由UI设计师和运营设计师两个职业完成的工作：

·UI设计师：主要是对比竞品中图形、颜色、字体、页面布局构成、质感、动态效果等元素。

·运营设计师：是近几年刚刚兴起的一个职业，主要负责设计风格、品牌影响力和内部运营渠道的分析。

*有人还会说要分析设计规范，我觉得没必要，因为不可能看到竞品的设计规范，另外与其说是看设计规范，倒不如说对比页面的还原程度。

三、 竞品分析的2个视角

3.1 宏观视角——纵向分析

以宏观的视角，根据不同的版本迭代，拉长战线进行纵向的对比总结，这类做法虽然并不常见，但是可以提炼出很多竞品的设计思路，在做产品规划起到很好的借鉴作用，常用于产品定位、商业模式、运营思路模块的分析中。

3.2 深入视角——横向分析

以深入勘探的视角，通过在不同的产品上相同或者类似的功能（这类的相同的功能可以是一个功能或者是一组功能）上作比较。这种横向的分析方法有助于在相对关键的场景中找到竞品的功能亮点， 常用于产品体验、产品功能、UI视觉等模块的分析比较多。

3.3 竞品分析&体验报告的不同

值得一提的是，很多新手在制作竞品分析的时候，上面就写几个竞品分析的模板，也有同学直接上来就开始写文档，写的和产品体验报告，傻傻分不清楚。这里我就讲解一下两者区别。

我举一个例子，如果有人问“这个男生怎么样子，那就这就产品体验；你看别人家的男朋友在看看你，这个就是竞品分析。”竞品分析比较强调“产品功能的对比”，即指两款以上产品的差异化；而产品体验则强调对“产品体验的深度”。

四、为什么做竞品分析

随着互联网的发展，竞品分析被应用在互联网产品发起项目或者改版初期阶段，帮助我们摸清产品规律和对手弱点的一个工具。

4.1 竞品分析的三个意义

对于产品经理而言：他是避开之前产品迭代功能坑的试金石，比如：有一天，老板觉得我竞品的这个功能就不错，想把这个功能弄到我们的产品上，我们没有参考行业里面的竞品，直接按照老板的意思实现了，效果应该不会理想。为什么会这样，主要是因为在做新功能如果都是拍着脑袋想需求，是很缺乏经验的一种表现，结果肯定不会特别理想。

对视觉设计师而言：竞品分析其实可以作为一个设计决策的依据和支撑。比如说别人在质疑你设计风格或者是颜色选择，两方不能很好地达成一致观点，这个时候你就可以说我这个东西是调查、分析过的，而不是“我认为”这种苍白无力的表述，用专业的水平说服对方目前方案是最优方案。

对整个团队而言：竞品分析可以让团队更好地了解这个行业，了解对手，了解别人都在做什么，在和竞争企业PK中取得胜利。通过竞品分析，确定其自己的产品的优势和劣势，并制定有效的产品策略或者设计策略。

五、竞品分析的目的

通过关注竞争对手与自己的差异化，分析其设计背后的原因，取其精华，去其糟粕，发现自己的产品问题，为产品后期的迭代提供最为合适的方案。

竞品分析有三个关键词发现——分析——论证。一套完整的竞品分析要具备了解、目的、竞品、对比、分析、总结六个步骤。

一、 大视野了解信息

做竞品分析最忌讳的就是直接找到竞品进行对比，我们第一步应该做的是了解，比如在抖音的竞品分析中就有对视频行业的分析，如图：

1.1 了解哪些维度信息

了解行业信息其实就是了解我们目前产品的生态环境，例如了解整个行业背景、竞品的产品定位、现阶段行业内发生了什么事件、新的功能玩法等等，这些信息都可以了解，这里提供四个了解信息的维度（以下内容不用全写，挑几项重要的即可）：

·产业链路图：行业中产业链图，从生产到服务之间的产业链条之间的关系是如何进行的。

·成员规模：公司内成员的规模和产品的核心目标以及在行业中的品牌影响力、企业价值、slogan等。

·盈利情况：季度、年度的盈利数值、各条产品线资金重点投入的信息，投资占比。

·用户群体：用户群体覆盖面积、市场占有率、运营盈利模式、产品的注册用户量。

1.2 搜集信息的两种渠道

很多人不知道从哪些渠道获取行业或者市场的信息，可能在第一个步骤出了问题，这里我推荐两个渠道进行信息搜集，一个是用户的意见的渠道另一个是第三方平台的行业信息报告。

·收集用户意见渠道：如qq群、微信群、知乎、 微博、百度论坛（现在用比较少）、用户访谈、在做可用性测试对用户的询问问题、看应用商店的评论等等。

·第三方平台信息渠道：这类渠道市场上有很多，我推荐几种如酷传咨询、易观智库、比达咨询、企鹅智库等找一些行业分析报告，通过这些报告了解目前行业发展现状、国家政策的支持方向、竞争对手占有市场份额等。（下图大家也可以收藏使用）

在竞品分析上展示的了解的信息可以不具体，但是一定要有了解的过程，因为了解信息是竞品分析是有科学依据的证明，所有不关注市场趋势和行业现状的竞品分析都属于功能性的竞品分析，是没有说服力的。

1.3 呈现形式案例借鉴

通过行业和市场的了解，为了梳理一个对自己产品和竞品的认知、观点，如下图这样表格的形式把自己的认知和观点一一梳理出来。

或者可以梳理得更加精细一些，如把产品定位差异化、关键词、产品特点都梳理出来。

再或者像是摩拜单车这种，以产品生命周期为横向维度把每个阶段的产品当时确定的战略目标都书写出来。

二、明确分析目标

目的决定一切，明确目标也是竞品分析前最为关键的一个步，目标确立直接关系到后续竞品选择、分析思路和结论的输出。

许同学在做竞品分析的时候会被其他产品的某一个功能所吸引，导致后续在推导结论的过程中失去了方向。带着问题，带着目的去分析体验竞品，只有这样才不会流于表面，学习到表象。所以我们在做竞品分析之前就要想好我们想要得到什么，也就是做竞品分析的目标。

2.1 不妨多问自己几个问题

做之前不妨多问问自己几个问题，希望通过竞品分析，获得什么？资讯or知识or行动方案？需要通过竞品分析抄袭这个新功能吗？不做行不行，为什么？这些新功能会和产品的其他模块有什么联系？等等。当我们以自我反省式的问法向自己提问时候，并给出答案时候，这个答案就是我们做竞品分析的目标了。

2.2 三种常见的目标类型

在工作中做竞品分析基本出于这三个目的，第一次做竞品分析的同学可以按照我这三个目的找出自己项目的竞品分析目标：

·了解市场动向：如果是“为了了解行业的动向，把确定下一个季度作为目标的话”，那分析侧重点应该放在行业新闻领域，查阅一些行业竞品的日活月活情况，盈利模式等宏观层面上的信息。

·帮助做出决策：如果“为了敲定新功能是否上线的话作为目标的话”，那分析侧重点应该围绕有这个功能的竞品的功能对比上，多思考新功能解决什么问题，新功能和其他模块的功能有什么联系，竞品是怎么做这个新功能的等。

·借鉴竞品优点：如果‘为了确定下一版本采用什么UI风格作为目标的话”，那分析侧重点应该围绕有视觉设计做得好的竞品，对比分析竞品的UI用了什么设计风格和设计元素等等。

2.3 不同阶段目标侧重点不同

众所周知，每个产品都是具有周期的，分别是进入期、成长期、成熟期、衰退期（衰退期一般不做竞品分析），产品所处的周期不同那产品所处的阶段就不同，进去期的产品处于开拓阶段、成长期的产品处于成长阶段、成熟期的产品处于防守阶段。

接下来聊一聊产品处于的阶段不同，那产品的需要关注的问题不同，竞品分析的目标（内容）也会有所不同。

·产品进入期——开拓阶段：作为一个行业的新产品，活下去是最重要的事情，关注的问题应该是做什么产品？关注核心应该行业情况。

比如行业发展史、经营环境、市场规模及增长趋势、产品发展史、目标客户、业务流程、盈利模式等维度分析。

·产品成长期——成长阶段：在成熟期的产品总会遇到自身的瓶颈，如何在激烈的市场提出创新性需求，更好地服务和其他竞争对手拉开差距这是成熟期要考虑的问题。

关注的侧重点是我要做出什么样子的产品？怎么实现？怎么去运营推广？怎么和竞品拉开差距？关注核心应该是竞争对手经营数据和经营策略，产品功能、用户规模、研发技术成本、用户体验设计等维度。

·产品成熟期——防守阶段：经历了成长期后，可以证明产品在行业中是有一定的竞争优势，产品需要考虑的问题就是如何守住原有的用户，不被其他竞争对手侵占市场份额。

关注侧重点是市场份额不被吞噬、侵占，关注核心应该是监控追赶竞品的各项指标及行动举措等维度。

为什么要讲这个，很多时候我们接到的竞品分析需求都是不明确的，我们可以结合自己产品所处的阶段，更明确地分析出竞品分析的目标。

三、寻找·划分 ·挑选竞品

明确了竞品分析的目标，就可以进行第三步挑选竞品了。对于不知道怎么选择合适的竞品的同学可以用“寻找——划分——挑选”这三个步骤选出最合适的竞品。

3.1 寻找·竞品的三种方法

寻找好的竞品无外乎就是考察自己的“搜商”能力，这里我推荐三种方法，帮助大家在搜索阶段找到竞品：

·习惯搜索方法：最常用的办法就是通过“关键词”在浏览器上进行搜索，注意的是这个“关键词”不用太具体，比如自己产品是大学生咖啡，我在浏览器中搜索“大学咖啡”，是没有这类竞品的，那可以用瑞星咖啡来代替。

·资源搜索方法：除了在浏览器进行搜索，还可以去应用商店或者第三方平台的“排行榜”找竞品，这种方法我经常用，因为可以直观地看到各个维度的竞品分析数据指标，比较高效。

·推荐搜索方法：就是找公司的产品经理询问相关竞品，因为公司里面的员工比较了解公司业务说出来的竞品会比较有针对性。也可以上脉脉这种平台找行业大牛，问问他们的想法，唯一缺点就是在脉脉上等待回复的时间比较长，建议提前询问。

*对资源搜索方法，我推荐四个可以查发布的时间、排行榜、版本号、注册用户量竞品的网站，分别是酷传咨询、易观分析、七麦数据、it橘子。

3.2 划分·竞品的三个种类

找寻到竞品之后不用全部分析，工作量太大，可以按照竞争关系给竞品划分种类。竞品大致分为直接关系的竞品（核心竞品）、间接关系的竞品（重要竞品）和其他关系（翘楚竞品）这三类。

垂直竞品：是指市场目标方向一致，用户群体针对性较强，产品核心功能和用户需求相似度较高的产品，如优酷和爱奇艺。

·间接竞品：是指在功能需求方面互补的产品，用户群体高度重合，先阶段不是直接市场利益的竞争者，但是有可能成为潜在的竞争关系，如大众点评和小红书。

·翘楚竞品：是指没有直接的用户群重合，在市场利益上也没有竞争关系，但有高水准前瞻性的产品，如夸克和躺友。

3.3 挑选·竞品的二八原则

竞品的选择不在量多，而在质优，接下来的重点在于“挑选”，在这个环节我建议可以通过二八原则挑选竞品，其目的就是缩小竞品范围，比如在直接关系中挑选前1到2个算是头部的直接竞品来分析，然后挑选个别优秀的间接竞品和翘楚竞品中比较优秀的竞品。

a 垂直竞品找相似、差异化设计

垂直竞品中因业务线高度吻合所以比较适合对比相似设计与差异化设计特点。

·所谓相似化设计，就是针对自己产品有相似的功能可以直接借鉴。比如在做优酷和爱奇艺两款产品对比发现，视频的固定比例16:9、弹幕功能都是在最左侧，并且都会对新注册的用户进行VIP会员服务购买的指引，反观自己的产品在做视频播放功能也可以采用视频的固定比例16:9，引导VIP服务购买指引的功能，不要出现3：4等其他尺寸影响用户的惯性体验。

·差异化的设计，就是考虑其相同功能，但是产品背景原因不同造成设计不同的样式，比如快手和抖音两款产品，都有关注功能，快手关注后会有标签展示，而抖音却没有。分析后可以得出结论是两款产品的页面布局不同，抖音有底部tab栏而快手没有，如果抖音关注后也有“已关注”的标签展示，加上tab栏的高度有可能会遮挡住视频画面，影响用户直观感受，我们在设计类似视频功能时候，是不是也要考虑一下有tab栏的设计样式和没有tab栏如何选择呢。

b 间接竞品找相同设计

通过间接竞争找相同设计和通过垂直竞品找相似设计有些类似。间接竞品因为用户群体高度重合，业务领域或是核心功能上有类似的地方，是找相同的设计点很好的办法，这些共同点都是我们需要借鉴和避免踩坑的地方。

比如大众点评/小红书都是种草社区的产品，在首页Feed流推荐的功能上，卡片的设计上就可以找到相同的设计（ 图片比例、内容布局、播放图标样式），降低用户的学习成本，促成大众点评用户往小红书产品上用户流量的转换。

c 翘楚竞品找灵感设计

如果我们在做竞品分析时候只挑选垂直类和间接类的产品进行分析，最后的结论只能是和竞品很像很难走出“抄袭”的困境，在这个时候同类竞品就派上用场了。

利用同类竞品可以激发灵感创造更多可能性，比如自如的设计师可能借鉴了喜马拉雅产品滑动Banner背景图片更换的设计亮点，再加上腾讯动漫对主题形象破形的处理手法，形成了现在独特的自如Banner表现形式。

当然他们的设计不仅如此，还增加了更有趣的设计亮点，Banner采取重力感应设计方式，图片中的所有元素会实现x轴的位移。

当手握住手机左右摇晃的时候，可以感受Banner元素竟然会动，这不失为一种通过翘楚竞品找寻灵感的设计案例。

四、需要对比什么

挑选出合适的竞品之后，我们不可能把全部的竞品功能都做对比，一般都会分析以下四个维度进行对比功能对比、价格对比、用户体验对比和服务对比，如图：

五、需要分析什么

产品的分析是指对原始信息进行整理、归纳、推理，使信息转化为有价值结论的过程，接下来我就以网上一个咸鱼的竞品分析案例，梳理一个产品大致可以从以下4个维度进行分析。

a 对产品属性的分析

在了解行业信息那一个部分，我们讲到通过第三方平台查阅对行业、市场的研究报告，这个时候就派上了用场。

前面做的行业了解，都是为了进一步对自家产品的分析，比如我们就可以从七麦数据这个平台，获取一些咸鱼和竞品的数据。

b 对用户画像的分析

对用户的分析可以从用户的基础属性和用户消费这两个维度入手，看看彼此的目标用户的需求上有哪些异同点，比如对核心用户的分析（最忠诚的用户群体是那类）; 对主流用户的分析（占领最大的用户群体是那些）; 用户构成的分析（各类用户群体的比例构成）。

基本属性：姓名、性别、学历、婚姻状况、兴趣爱好等。

用户消费：从事行业、职业、收入水平、设备型号。

对用户进行分析之后并没有结束，最重要的是得出自己产品的用户画像，可以参考以下四个问题给予自己分析维度的思考：

·竞品的目标用户是谁？有哪些关键特征？与自己产品的目标用户群一致吗？

·竞品的用户数据，包括活跃用户数、付费用户数、ARPU值等。

·用户对竞品优、劣势的看法。

·用户喜欢产品的哪些功能？不喜欢产品的那些功能。

d 对功能对比的分析

另外就是对产品功能的对比分析，可以把竞品的主要功能路径画出来，思考竞品为什么做这个功能，做这个功能会给产品带来什么好处，把自己认为重要的功能列举出来，再看看哪些平台有，哪些平台没有等等。

对竞品功能对比分析并不是把功能简单地罗列出来，最重要的是通过功能的对比，帮助梳理出用户需求的痛点，发现自己产品的问题，尤其对后续的改版的方向都可以在对产品功能的解析中找到答案。

e 对功能数据的分析

对于数据的分析可以理解为对功能对比分析的升华，假设我们提案一个产品功能是否值得上线，这时就需要产品的数据增长波动，来佐证提案的可行性。

一般在进行产品数据收集的时候我们可以把目光锁定在两个数据维度——基础数据和趋势数据，我们需要用两个维度的数据去判断产品的体量和目前的阶段状态。

基础数据的范围有：产品的日活跃用户数字、周/月活跃用户数字、使用时长/下载次数、版本号/最后更新时间。

趋势数据的范围有：产品在一年内的用户的增长情况或者固定周期的总注册用户量/下载量/有效转化率的趋势情况、产品平台及官方的排名情况。这里再推荐两个针对查询产品数据趋势比较好用的网站。

六、以终为始复盘总结

以上5步全部做完还是不够的，最重要的还是竞品分析的结论，也就回到了开篇那个问题，我们的目的是什么？达到了吗？

很多同学的竞品分析，就是为了分析而分析，并没有总结出一个结论。没有结论前面所有的分析岂不是就没有任何的意义， 没有结论的话又按照什么方向去迭代产品升级改版呢？所以说

·一定要有最后的结论：虽然结论很主观但是也要有结论，没有结论的竞品分析是展示报告，是没有意义的。

·结论要具有真实性：是推导出来的而不是硬加上去的，要知道一个错误的结论比没有结论的后果更可怕。

文章很长，我们来做一个小练习吧～

有些同学们在做竞品分析时候，先找到市面上的最火爆的直接竞品，把自己的产品与直接竞品一一对照，把设计亮点直接copy；或者是找到间接竞品、翘楚竞品找到与自家产品共有的功能，取一部分粘贴复制到自己产品身上。

这样的做法并不是错误的，只会让自己产品与竞品相似度很高很难让我们的设计改版具有创新性。为什么大家做竞品分析相似度很高，我认为问题出在目标不够明确和方法使用不正确这两点上。

接下来我就用锤子和钉子的关系，向同学们一一说明，竞品分析的十锤法则，希望大家在不同的竞品分析目标面前用对竞品分析方法。

一、对比表格法——最为直观的对比工具

钉子：

常用于竞品的横向比较，比如想要全面地了解一个功能的概况。或者是当我们思考某个功能元素是否需要保留，可使用对比表格法。

锤子：

对比表格法是竞品分析最经常用到的一种分析方法，衍生的还有打勾比较法、评分比较法和描述比较法三种形式，常用于视觉竞品分析里面。

打勾比较法通过与竞品的功能一一对比打勾，有的话就在表格上对应位置打勾，不存在就空着。用这种方法来了解自己产品与竞品在产品功能上的差异，全方位地了解竞品的功能分布，为自己的产品是否加入这个功能规范做参考依据。

评分比较法多用于体验设计中，把自家产品都有的功能得分列成一行作为一个标准，把竞品的数据依次排列，可以直观看到与竞品之间数据的差异。

另外描述比较法这种方法比较的是竞品的功能细节、界面的比较等功能，并且跟上自己的观点和看法，在竞品中也很常用，如图。

二、用户体验地图——发现用户痛点的工具

钉子：

当自己不知道产品的问题是什么？或者想避免自己产品在产品体验上犯同类错误的时候，可以使用用户体验地图，算是一种寻找产品问题、用户痛点的方法。

锤子：

用户体验地图的意义是在于分析前模拟用户的视角去发现用户整个行为的痛点，发现用户要的是什么，而不是说我们想在产品上放什么。

建立多张用户体验地图可以对比不同的产品在流程中的不同，发现并记录流程中的共同的问题来帮助设计师避免自己产品犯同类错误。

三、竞品画布—— 最小可行性方案

钉子：

当时间排气不充足，但是需要快速出一份竞品分析的场景交付到领导面前的场景时候，可以采用竞品画布的方法。

锤子：

竞品画布是提前避免不符合领导需求造成返工和浪费时间的工具，比如领导想让你写一份竞品分析报告，先通过竞品画布快速地写明分析的目标、挑选竞品范围等信息，再找领导确认是否符合领导要求，确认和领导所期望的目标一致后再投入大量精力做详细的竞品分析。

以下是我在网上找到的制作竞品画布的要点，建议大家收藏。

1、竞品分析的目标要明确，最好能够解决产品当前面临的问题。

2、选择竞品时先发散后收敛，初选阶段可以把眼界放宽，避免遗漏重要的竞品；精选阶段要收敛，聚焦到3个左右的竞品做重点分析。

3、分析维度取决于分析目标，最好写出分析维度的选择理由。

4、搜集竞品信息时，除了常规渠道，还可以考虑合法的非正式渠道。找不到关键信息时，可以尝试在公司内部寻求帮助。

5、优势、劣势是企业内部的，最好不超过5个。

6、机会、威胁是外部环境，最好不超过5个。

7、建议总结要具体，不要泛泛而谈，同时要考虑可操作性。

四、精益画布 ——分析商业模式的工具

钉子：

精益画布应用于以下两个场景：

·想知道自己产品商业模式是否完成或者存在纰漏或者是想清楚竞品在某一个功能上这样做在商业上是怎么想的。

· 想判断产品的商业模式、运营渠道等各个方面是否一致等问题。

锤子：

精益画布常用于产品成熟阶段的产品，做产品商业模式分析，建立产品全局观，检查产品商业功能清单来使用，一般产品经理或者是产品战略者的角色会使用。比如OFO这种体量比较大的公司会用到精益画布，制定产品战略，如图

以下是关于 精益画布的模块构成，需要的自行复制吧：

1、问题：目标用户最需要解决的3个问题是什么？用户有哪些痛点？

2、用户细分：你的目标用户是谁？这些用户有哪些关键的特征？

3、独特卖点：为什么用户要选择你的产品而不选竞品？你能以清晰、独特、令人印象深刻的方式说明为何你的产品更加优异或者卓尔不群吗？

4、解决方案：你能为现存问题找到正确的解决方案吗？

5、渠道：如何将产品或服务送到用户手中，又如何收取用户支付的款项？如何与用户保持连接？

6、关键指标：哪些数据指标能让你了解产品的真实状况？

7、竞争壁垒：如何为产品构建“护城河”？无法被对手轻易复制或买去的竞争优势有哪些？

8、成本分析：做这个产品的直接成本和间接成本都有哪些？

9、收入分析：产品如何赚钱？收入能大于成本吗？何时能达到盈亏平衡？

五、PEST 模型 ——预测市场、大环境的工具

钉子：

属于宏观层面的分析，是一种想要了解市场大环境、市场趋势，直观地找出机会与威胁所在的方法。

比如2018年p2p网贷行业集体暴雷，因为政府的监管制度的完善，一大批不合法律法规的p2p平台倒闭，预测未来p2p的市场份额将会减少。再比如，当今中国市场人口老龄化严重，年龄分布不均匀等情况属于社会分类的范畴，预测未来适老化的产品可能会成为互联网市场下一个风口。

锤子

在一张大白纸上画出4个格子，团队成员分别代表“政治、经济、社会、技术”尽可能多地罗列关键词填写到4个格子中，最后集体投票，每个格子选出得票较高的3～5个点子作为PEST分析的结果。

六、竞品雷达图 ——不同竞品功能对比的工具

钉子：

不知道自己产品的竞品如何分类的，常用来对比多个产品或者同一产品的多个方面的非常好的工具。

锤子：

雷达图起源于财务状况的综合评估方法，通过雷达图的绘制可展现公司各项财务指标，后被人应用于互联网行业，称竞品雷达图（又叫蜘蛛图）。

竞品雷达一般选6个-9个维度分析，这9个维度参考尼尔森的十大可用性原则自行组合，进行产品分析。

七、四象限矩阵 ——区分竞品类型的工具

钉子：

对自己产品的优势、劣势不明确，判断现有的产品是否需要重新定位，并帮助我们重新找到合理的定位的场景的工具。

锤子：

矩阵分析法是一个场景的分析法，以四维矩阵的方式分析自己的产品与竞品的定位、特色或优势，最大的好处就是可以梳理清楚市场中存在的空白点。以下图为例，在严肃和亲民这个范围领域就是没有这个产品，企业是否可以在战略层面上投入开发成本，开发这个空白领域的产品，抢占市场。

八、SWOT 模型 ——制定战略规划的工具

钉子：

SWOT是一种基于四个要素的战略规划方法，与PEST模型不同的是这个SWOT模型不仅可以帮助梳理产品优势和劣势，还可以制定企业的竞争策略和未来开发的计划规划，是一种既可以分析产品/公司内部（优势、劣势）外部（机会、威胁）竞争环境的工具。

锤子：

S、W 指产品内部有哪些优劣势，O、T 指的是产品外部市场存在哪些机会和威胁。简单地来说就是将与研究对象密切相关的各种主要内部优势、劣势和外部的机会和威胁，通过四个格矩阵排列出来，加以分析，从中得出一系列相应的结论，而这个结论是带有一定决策性和预测性。

我自己使用的时候会把这个方法放到竞品分析和总结的那部分，比如在竞品分析前半部分把宏观层分析完、竞品的功能亮点对比完，最后进行输出总结归类到产品的优势和劣势，再预警一下现阶段可能会出现的问题，预测一下以后的机会。

九、五层九纬度法

钉子：

对于做竞品分析一点头绪都没有的同学，可以使用这个五层九纬度法（也叫用户体验五要素）。

锤子：

一套完整的竞品分析其实和做产品思路一样，将复杂的事物抽象成分层的模型，能让人直观、清晰地获取其内在的逻辑，算是比较常规的方法了。

十、可用性测试 &用户访谈

钉子：

使用场景分为两个，第一个是针对竞品分析前不知道竞品哪个功能来说对用户意义重要；第二个是竞品分析后验证自己产品中某个功能改版是否成功。

锤子：

可用性测试的意义在于如果不用竞品的产品，自己可能不能真实地感受到竞品好在哪里，就不能真实找到竞品在体验层面上值得我们借鉴的功能是什么。它除了可以还原竞品功能对用户真实的体验之外，更是一个验证功能改版是否成功的工具。之前讲到了数据是有欺骗性，数据会受环境因素所影响，有些数据是代替不了可用性测试和用户访谈的结论的真实性。

通过以上的讲解，我相信大家对“竞品分析”会有一个更为深入的认知，虽然大家较为清晰地知道了竞品分析的概念、制作流程以及方法，但是在我实际工作中经常出现以下9个问题，值得注意。

一、要注重平时积累

人的认知是有局限性的，尤其是接受一个不太熟悉的观点时候，就好比你让雕刻工刻一个马的扶手，因为描述不清楚的问题，他可能会刻成一个驴的扶手。

我们在论证一个观点最好就是举例论证，这样才能做到有理有据，所以要注重平时的素材积累，有一定的知识储备，做到观点都有资料可以佐证避免假大空，不会出现低级错误。最好把竞品分析当作一个产品来做，用产品思维（有逻辑性）做竞品分析。

二、不要定过大的目标

竞品分析绝对不是说找不同，竞品分析方法千千万，无论是在分析前，还是分析后，跟着目标走才能得出有价值的结论，最终做到产品设计人无我有，人有我优的终极目标。我梳理了两类目标，供大家思考自己做竞品分析的目标。

现在互联网公司的发展相当快，已经没有那么多时间让我们做大而全的竞品分析，对于初创公司来讲，有可能做完竞品分析公司都倒闭的尴尬局面。所以，小而精地分析、跟紧产品、业务的脚步才是企业需要的。

三、分清楚给谁看

知己知彼，百战不殆。分清楚给谁看也是容易犯的一个错误，最好要问清楚最终呈现给谁看，因为同事、领导、老板的角度不同所以需要看的切入点就不同。

·老板的角度：竞品在行业中的影响力、目前行业的经营状况如何、自己产品的发展方向怎么样，竞争对手的经营状况怎么样。

·团队/领导的角度：竞品的产品功能、交互设计、视觉的优点和缺点是什么；有没有创新性的产品体验点可以应用到产品迭代中去，决策是采纳A方案啊，还是采纳B方案或者是还有更好的C方案。

·自己/同事的角度：为了更好地执行领导们定的目标，自己或者团队内部协调的同时，需要用到什么方法把任务完成好。

四、多用事实佐证结论

分析是一个严谨的过程，得有理有据让人信服。在分析报告里面，发现很多分析的数据没有标明来源，可信度真的不高。设想如果是把这样一份数据来源不明确的报告递到一个企业决策者办公桌上，他敢作出决策吗？我看很悬。

所以在分析报告中，事实一定是严谨可信的，是市场上认可的，这样通过分析得出来的观点才会不带有主观臆测的。

五、注重产品深度&上下文逻辑

正所谓，学我者生，像我者死！在与竞品进行比较阶段的时候，并不是什么情况下去模仿照搬，应该把关注点放到竞品这么做的背后原因。一个上层建筑的高度和样式必定由其底层地基决定，产品也是如此，虽然是一个简单的功能，也可以从数据、产品定位、用户群体、经营策略等层面，多注重自己产品与竞品的对比，挖掘产品策略背后的原因，为后期迭代思考我们是否可以去优化做准备。

另外一点我想说的是注重逻辑，有些竞品分析一会儿分析市场大环境，一会分析产品核心功能，看似面面俱到，但是分析的主线思路不清晰，缺乏逻辑关系，形式归于表面。

六、选择最为合适的分析方法

做竞品分析常规的方式是先挑选3-5个竞品，围绕用户体验要素（战略层、范围层、结构层、框架层、表现层）对竞品展开分析，我知道大家都是受了ajax之父jesse james garrett的经典之作《用户体验要素：以用户为中心的产品设计》的影响，我最开始入行的时候也是我的启蒙书。

但是大家要清楚“由于产品不同、受众用户不同、产品阶段不同、分析目标不同竞品分析最终呈现的样子就会不同，”如果大家都用这五层去写的话，避免不了有套模板的嫌疑。

这里列举一个不恰当的例子，2015年时候互联网很流行“互联网+传统行业”的创业概念，但互联网+并不是适合所有行业，要认清自己产品适合“互联网+传统行业还是传统行业+互联网”，了解清楚自己产品的特长，清楚谁主导谁的，处于什么产品阶段后再做决策，不要跟着主流舆论裹挟，盲目做选择。

除了我所讲的通过适合竞品的方法来审视自己产品之外，还有一点值得大家注意的就是设计方案的合理性，尤其是在UI设计当中，并不能保证设计方案是一直对的，只能说在某一个产品阶段或者应对某一个问题设计方案是最好的方案，更为精准的说法是设计方案没有绝对的正确和错误，只能说那个设计方案更合适当前这个需求。

七、形式与内容同样重要

我看了很多竞品分析，内容深度很深，视角也很独特，观点也很鲜明有价值，只是其表现形式太难让人阅读下去。我们是设计师，竞品分析的结论固然重要，但是精心包装才能更好地传递竞品分析的价值本身，这也是体现我们基础设计师价值的一部分。

设计领域中的眼球理论也是如此，一份好的竞品分析，务必在视觉包装上下点功夫，通过合适的逻辑结构进行梳理，可以让你的观点更易于理解并接受，配上适当的图文制作成PPT，保证文字信息可以高速清晰地进行传达，让读者第一眼就有继续阅读的兴趣。正所谓好的内容+好的设计形式=易于别人接受，才能发挥最大的效用。

八、务必要自我检查

细节决定成败，很多同学按照流程步骤一一分析了，得出了结论也是真实有效的，认为竞品分析就完成了。

我们的目的不是交付100分的答卷，而是交付100+的答卷，自我检查是提高自己的能力的好方法，如果工作周期允许的情况下，还是要从头到尾，把竞品分析查缺补漏，这样也利于发现更有价值的信息。

九、持续跟踪，保持节奏

竞品分析不是一次性的事情，它对团队来说是每时每刻的，因为市场和需求是不停地更新，做竞品分析也是一个了解市场了解产品的手段，需要持续更新的。可以说它是贯穿整个产品迭代的始终的，把握节奏可以让你更从容地应对市场的变化，建议至少半年更新一次。

总结

竞品分析在不同的阶段能给我们的产品带来不同的效益，学习好竞品分析也能避免走很多的弯路。

最后，感谢文章内容案例的作者，写这篇文章着实不容易 ，查阅了大约40个竞品分析，但编成系统方法写出来真的很耗心神。

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

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

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

导语：提起中后台，除了高效、灵活和强大之外，不可忽视的还有它的海量数据。海量数据的筛选与呈现，直接决定决策人员的效率高低。本文作者主要是结合自己在实际工作中遇到的表格设计问题，针对Web端数据呈现方式之一，表格的设计进行探讨。

表格，是一种常见的信息组织整理手段。常用来展示、保存、对比分析、排序、筛选 、归纳等，是最清晰、高效的数据展现形式之一，由内、外两部分组成。

• 内部：由表头、表体、表尾共3部分组成；
• 外部：由筛选区域、操作按钮区、分页区共3大类组成。

说完表格的组成，接下来将会从易读性和易操作性两个方面来分析下表格设计。

易读性

1. 行与列

表格的组成，也可以看作行与列的自由组合，这种组合赋予了表格多样性的特点。行与列构成了单元格的长与高，不同的长高会有疏密之分，充实与透气之感。

B端中后台通常会对应不同的角色及场景需求，根据目的及信息主体的不同，让用户根据自己的需求来定义表格的展示列及列的顺序，也可以通过行与列的显隐变化，来更好的满足信息的传达。

但需要注意的是系统应记住用户上一次的自定义列设置，减少用户重复操作。对于列的选择，应尽量减少列的数量，既要展示用户必要信息，又要避免出现用户无关数据，以免信息冗余，影响信息阅读效率性。对于用户需要的非重点、辅助性信息可以通过入口提供的方式来解决。

默认排序，应从用户目的出发，遵循用户查看数据的习惯，尊重数据之间的关联性，设计用户查看、操作数据的路径，而非随机排列。

2. 数据展示

B端中后台中的表格展示的数据多且杂，这就要为用户先一步对数据进行梳理归纳，提高用户获取信息速度。

为便于对数据进行对比分析，一般需要在原始数据的基础上给出差值、升降变化、平均值、总计等数据处理结果，减少用户二次加工数据的过程，提升用户阅读信息的效率。

数据汇总展示

在表头或者表尾分别提供了总计的数据，方便用户进行快速查阅。

数据对齐展示

常用对齐方式有数字右对齐，文字左对齐，混合型文本左对齐，列标签的对齐方式与数据的对齐方式保持一致。这样能形成的视觉边界线，便于视线的流动，从而快速提升数据的浏览、对比效率。

空数据展示

B端中后台数据类型较多，对于空数据，切忌不要与数据为“０”进行混淆，对于空数据通用做法是用“－”表示，而不是什么都不显示，会让用户误以为是没有数据还是“0”数据。

最好做法就是为空数据做出释义，可以加在“列标签”的名词解释文案中。

数据的关键属性标识展示

对于用户重点关注的数据状态、上升和下降等，可以用符号进行标识，帮助用户快速定位到目标信息。

3. 固定表头、固定列和固定分页

在有限屏幕内，有限的内容展示区域内，阅读丰富且繁多的表格时，用户不得不拖动横向或纵向滚动条来阅读信息。

固定表头、固定列和固定分页，能够让用户明白当前单元格内信息的属性而不至于不知道该信息的意思。

固定表头

在固定的小区域内滚动会非常局促，而且区域滚动和全屏滚动同时存在时体验也很不好。固定表头可帮助用户识别信息，在全屏滚动上去后固定表头，有利于用户向下翻屏时能够便利的阅读数据。

固定列

固定列的内容可视业务及目标用户的诉求而定，一般采用方法是固定比较重要信息，方便用户进行数据定位与对比，最好可以让用户自定义，满足不同用户诉求。

固定分页

分页处理目前有放在上部、下部或上下部均有，需要根据场景来选择。分页固定目的是为了省去用户需要翻到顶部或底部进行操作的麻烦。

特别是可以自定义每页的数量和需要横向拖动数据查看，这就需要把分页固定在底部，方便用户横向拖动滑条查看信息和进行翻页操作。

4. 分页

在Web端中的表格，涉及到跨页的数据操作时，分页会带来不便。

但往往受限于数据加载的压力，这种情况在大厂中尤其突出，加载数据都是亿量级别的，在Web端和手机端都需要实时下载数据的终端，我们通常做法就是提供分页展示数据来缓解服务器的压力。

表格中的的数据内容超过一定“数量”时需要提供翻页功能，而这个“数量”是由表头的数据的高度、表格的行间距、目标用户群体的显示设备的配置等因素来决定。

原则上整张表不要超过一屏，考虑到每个用户的使用习惯，我们一般提供可以让用户自定义每页的显示的数量，相比于跨屏翻页而言，向下滚屏会更便利，也更符合浏览信息路径。

5. 全屏查阅

表格全屏展示是非常有必要的：

• 特别是在小屏设备上，全屏模式下可以直接屏蔽掉左侧导航栏、上方的报表区域和顶部的导航栏，可为用户提供更多可视区域。
• 在大量数据前面，可为用户提供沉浸式阅读体验，让用户更加专注，可减少与表格无关的视觉干扰。
• 用户可通过ESC键或关闭按钮随时退出全屏模式，操作成本低。

易操作性

1. 筛选

在大量的表格信息中，如果没有筛选查找信息简直犹如大海捞针，而表格跟筛选是不分家的。

说到表格一定会说到筛选，筛选也就是数据过滤，常在数据量较大的场景中使用，其目的是通过关键字搜索和条件筛选能够帮助用户快速的找到所需要的信息内容。

对于表格外部筛选，如果有时间会单独出一篇详情介绍。这里不展开详细说。

筛选根据筛选功能的位置不同，可分为表外筛选和表内筛选。

• 表外筛选：筛选功能位于表格上方，与表内筛选的不同之处是过滤值可以不限“表格列”的内容、可单次进行多列的交叉筛选。
• 表内筛选：筛选功能位于表格内，也就是放置在列标签上的筛选，受“表格列”内容的限制，仅能做单次单列的筛选。

2. 数据选择

在信息列数较多的情况下，数据的选择就尤为重要。当鼠标指针悬停在表格列或行时，给予视觉状态的变化提示，可以让用户捕捉到所在的位置，而不至于视觉上的错行，能够降低人的心理压力和增加掌控感。根据数据选择功能分为单个选择和批量选择。

单个选择

鼠标指针悬停在整行时应与默认态有所区分。当标识选中行或选中行的数量，选中行可操作的命令状态须同步，明示当前行可操作的命令或反馈当前已选行的数量。

批量选择

提供选择当前页部分行、选择全部行、取消选择全部行三种功能；状态反馈分为半选态 、未选态、全选态共三种。

• 当用户未进行选择时，表头的选择框的状态是未选态；
• 当用户选择一行数据时，此时表头的选择框的状态切换为半选态，同时反馈此行的数量；
• 当用户在表头勾选“当前页所有行”时，表头的选择框切换成了全选态，且给出了选择“全部所有行”的操作。

3. 数据操作

对于数据的操作，主要针对表格内部来说。表格操作大体可分为显性操作和隐形操作。

显性操作

指操作选项显示在行内，优点是明显直观，可以根据列表上的信息做出快速的判断并且高频发生的操作。

适用列数较少的列表。但弊端是信息过载，尤其是列数较多，可展示列数会随操作数增加而减少，同时误操作率较高。对于危险系数比较高的操作，也不建议采用这种设计。

隐性操作

当鼠标悬停或点击时才显示其他低频、高危的操作选项，优点是界面简洁明快，信息密度低，可以帮助页面突出更加重要的信息，可减轻空间压力，减少干扰。

弊端是增加用户的点击次数和提高了操作门槛。列数较少的表格不适用隐性操作。

4. 数据下载

为方便用户对数据进行再次整合分析、统计分析等，可提供数据下载功能及多种下载格式。

5. 空表

对于B端中后台来说，表格显示最多就是两种情况：一种就是表格有数据，这种最容易解决，有数据就显示相应数据；还有一种表格是没有数据，也就是空表状态，这也是让很多设计师容易忽略掉的页面。

空表分两种：可创建和纯展示

可创建

是用户有创建诉求，数据是由用户或系统产生的，可创建分两种：

• 比较轻量的方式，是直接示意用户创建数据，无须给出表格样式。
• 在表格的空白内容处加入创建的快捷入口，引导用户新建。

纯展示

没有创建诉求的，数据是系统产生的，不是由用户创建的，直接告之暂无数据。

写在最后

看上去平淡无奇的数据表格，其实是非常重要的，通过合理的组织架构和呈现方式，使原本枯燥的数据呈现出生命力，这是一件很神奇的事。

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

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

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

为什么了解网页布局很重要？网页布局在很大程度上决定了网站的访问者将如何与网页内容进行交互。

这里将介绍一些常见的网页布局形式，例如卡片式、分屏布局、网格布局……一起来看看吧！

卡片式网页布局

卡片式布局被Pinterest、脸书和推特等网站所使用，它非常适合在新闻网站和博客上使用，因为卡片式布局可以在页面上放置大量内容，同时又保持每部分内容各不相同。

卡片式布局主要有两种形式：

网页中每个卡片的尺寸相同，卡片的排列非常标准，例如Dribbble的网页布局；

使用不同尺寸的卡片组成页面的布局，卡片间没有固定的排序，例如Pinterest、花瓣的页面布局。

分屏布局

当两个元素在页面上具有相等的权重时，分屏布局是一种流行的设计选择，并且通常用于文本和图像都需要突出显示的设计中。

分屏设计特别适合电子商务网站上的产品页面。产品图片需要在页面上突出显示，但价格、规格、购物车按钮等信息也要显示。

大标题

随着移动设计的盛行，大标题排版变得流行起来。大号字体在标题中特别流行，在一些网站的正文中也能看到。

较大的文本更具可读性，可以改善使用体验。另外它还提供了强大的视觉效果，因此这种布局在极简主义设计中特别受欢迎。

个性化推荐

个性化算法推荐可以根据每个人的喜好量身定制数字体验。人工智能技术的发展让算法变得更易用，能精确分析用户的喜好。

根据用户之前的订阅习惯，Netflix可以为用户个性化推荐他们最有可能观看的电影。

像Medium这样的网站会基于用户以前阅读和喜欢的内容，向他们展示很多同类型的文章。

网格布局

网格为设计提了视觉上的平秩序感，以一种平衡且有组织的方式呈现内容，使内容更易于人们使用。

在网格设计中使用不同大小的内容可以在保持内容有序的同时增加视觉吸引力。

杂志版式布局

杂志和期刊的布局方式影响了网络杂志的版面设计。这些网页布局很适合有大量内容的网站，尤其是每天都需要更新内容的网站。

单页布局

单页布局将网站的所有主要内容放在一个网页上，通过滚动完成导航，有时还使用视差滚动效果。

对于内容稀疏的网站，单页布局是一个很好的解决方案。同时它也是内容叙事的完美选择，比如交互式儿童读物。

F型&Z型布局

F型和Z型布局是指用户的视线如何在页面上移动，即用户如何扫描内容。F型布局有非常明确的视觉层次结构，因此适合内容更多的页面。

Z型布局将视线吸引到顶部，然后沿对角线方向向下延伸到底部，然后再次延伸。

不对称布局

在设计中，不对称会产生动态化的视觉冲击力。大多数情况下不对称是由于图像和文本间无法平衡而造成的。

由于不对称会产生动态的、充满活力的视觉印象，因此对那些想要传达这种形象的品牌来说是非常有用的。

简洁布局

这种布局的优点在于完全专注于内容，没有视觉上的混乱。

干净简单的布局几乎适用于任何类型的网站。许多优雅的网站都可以被认为是“简洁的”，无论它们包含什么设计形式。

导航标签

导航标签适合用于包含少数项目的菜单，否则导航会显得很混乱。

轮播

轮播内容包含图像和文本，通常出现在网站的顶部，用来突出显示内容。

总结

好的网页设计具有很强的适应性并且对用户来说始终是友好的。

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

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

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

无论作为设计师还是普通浏览者，大家观看一个网站时最先接触到的就是网页的头部区域，这部分内容为网站的其他各个方面设定了基调，在网页设计中起着非常关键的作用。

尤其是如今简洁设计比较盛行，多数时候把头部内容设计好就变成了吸引用户眼球最好的办法。网页设计师在设计网站头部时投入了大量精力，同时要兼顾创造力和实用性。根据一项Google的研究，用户只需要短短数秒就可以形成对一个网站的看法，甚至有些观点是在令人难以置信的1秒内形成的。用户对品牌的了解就是从这么短的时间内开始的。

头部区域在哪儿？

在通常网页设计中，首页上方的整个空间都被视为头部区域。作为人们在加载网站后的最初几秒内看到部分，头部信息起到了一种邀请作用，它应该提供有关网站的基本信息，以便用户能够在几秒内了解网站的主要内容。

如果以招聘活动站点为例，整个头部区域设计要明确传达企业形象，及本次招聘活动的特点。给浏览者一个强烈的视觉印象，企业已向你发出邀请，我们对人才十分渴求，等等信息… 如果有线上线下活动同时参与，那么在整体风格上尽量保持一致。

包含哪些内容与功能？

网页头部的任务是给用户提供一些基本问题的答案：代表什么品牌，提供什么服务等等。如果我们在内容上引起了用户情感上的共鸣，那么就是正确的设计。

那么主要元素通常包括：

• Logo 或品牌标识
• 交互指引
• 标题Slogan
• 导航要素
• 搜索功能

在设计网站头部内容时，从思维层面来讲没有任何东西会限制你的创造力，它应该是令人难忘的、简洁和兼具实用性的，是一个可以展示创造性的开放领域。

下面让我们一起来看看头部内容设计的一些技巧。

1. 关于尺寸

对于网页头部图片的大小是没有统一的答案。有时候设计师希望提供相对固定的数字，但网页设计最大的难点之一是很难确保每个屏幕尺寸的有效性。即使两个屏幕的尺寸相同，分辨率也可能不同，因此用户看到的内容也不一定完全一样。

因此，我们不要拘泥于精确的像素概念，最好遵循经验积累的常识规则。

头部的高度本着不干扰内容感知的基本原则。对于一些展示信息资源的页面，较小的头部区域是一个不错的选择，而对于落地页或者企业客户首页，头部区域可能会更大，而且多数大客户会有主视觉单屏展示页。

如果某些网页，例如落地页头部内容较长的情况下，最好在首屏给下一屏内容露出一些空间，这样用户就可以意识到下一页还有内容，引导用户滚动。

2. Logo展现

当一个人发现自己在陌生网站上，总是习惯于从屏幕的左上角开始浏览网站。尽管设计师有时候认为打破常规的布局也可以带来不错的效果，但是多数用户如果他们常规位置找不到预期的信息，将会不假思索地认为这个页面是难用的和不规范的，需要花费很多的努力才能理解。这就要看你的设计目的和受众群体能够接受哪些程度的变化，我们今天主要说大多数受众。

Logo ——与居中或右侧放置相比，用户更容易记住那些 Logo 放在左边的品牌。如果你使用的是圆形 Logo，那么可以把它居中放置，尽管它的有效性仍然比放在左侧要低。

3. 吸顶导航栏

吸顶导航，换句话说就是「粘性标题」，当你滚动页面时，导航区在页面中跟随，现在成为一个网页设计标准。如果不违反网站整体设计理念，请将导航栏吸顶固定。无论是PC端还是移动端设计，这都是一个好的选择：

• 例如长页面展示、浏览内容同时客户需要导航区总是在视线范围内。
• 如有滚动信息，不断提示客户点击，则可置顶或置底处理。

可根据页面内容展示要求，向下滚动时调整导航背景透明度，尽量少的影响内容展示同时使页面看起来更生动和通透。还可以在滚动时简化导航栏样式或高度，使用户能找到但又不过于抢眼。

总之，固定导航栏有助于提升用户体验，保持用户导向并给予了他们更多控制权。

3. 关于图片的应用

头部内容所用图片可以选择直接和要表达的业务相关性很强的，例如招聘类网站使用招聘场景图片；也可以选择中性感觉的例如办公场景、城市风景类图片进行虚化降低清晰度或明度来突出前景内容；

高质量图片——摄影对于网页设计师来说是一个强大的工具。它可以讲述一个故事，唤起用户的情感，并鼓励访问者进一步滚动。对于那些有强烈冲击力的图片的网站，试着做一个透明的标题，它可以更好地显示图像，并保留了主要链接。

轮播图片——如果客户给了几张代表该企业业务的出色照片，这种方式就没错！企业希望用户可以滚动浏览一组精美的高分辨率图像。

插画——网站的头部图片必须能引起读者的共鸣，建立起人与人之间的联系。如果图片是独特的且易于辨认，即使是从网站标题中剪切出来，效果也会很好，可以利用当今的插图潮流来实现这一点。

4. 视频或动画

当然我们也不能只关注静态图片，添加视频也是最有效的网站头部创意之一。如果可能的话，尝试着在头部内容中添加主题视频材料，很多网站利用在背景中添加短视频来吸引用户，尽可能以最好的方式展示他们的公司或产品。

△ 华夏幸福校招官网首页动画，拨云见日的效果加上中式剪纸风格的运用，将公司各业务线融合到几个转轮中，产生了故事性的动画场景。

如果想要使设计更具吸引力、生动和令人难忘的另一种方法是添加动画。它可以使网站头部内容变得非常酷。以每季校园招聘企业站点为例，各大公司对应届生群体的追逐，很大程度上体现在对该群体审美和喜好的迎合上，年轻有活力的动画或视频元素绝对是吸引眼球的不二之选。

当然不一定只有满屏大型动画，一般动画越复杂面积越大占用流量越多，客户打开延迟也影响观感。这时候我们可以根据功能不同，设计一些交互性的动画，去提升客户使用感受，尽量不影响网页打开速度。

5. 移动端头部设计

网页头部不可能只显示PC端的网页上，还应该正确显示在移动端的网页上。因此，在近年的设计中，网页必须具有响应性，并且能够很好地适应各种移动设备，这样才能带给用户完整的设计体验。

移动设备的日常使用广泛性早已影响网站设计，即使在PC中，也有一些细节看起来像是面向移动设备的网站设计。例如，Banner和汉堡包菜单都起源于移动设计。

移动端有着与PC端不同的屏幕尺寸和操作方式，很多时候需要设计师在一开始就考虑到两种界面的适应情况，比如在PC上顶部一条的导航，到移动端就演变为一个汉堡包菜单。而原本PC页面中展开显示的内容，在移动端会向下层延伸，首层界面成为一个内容聚合页。

写在最后

网站是以头部内容为先导的，它就像是一张独特的名片。因此，我们在设计网站时，尽可能最大限度地关注该区域。

最后还要提醒大家，一定记得定期更新网站头部内容哦！以校园招聘大客户为例，大多数企业都会在每年春秋两季的招聘旺季更新其招聘主题风格，以保持网站的新鲜感和时效性。

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

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

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

用户在操作系统时所看到的页面框架其实就是系统布局，它是一个产品最外层的框架结构，一般包含了顶部导航、侧边导航栏、面包屑、图文、卡片、内容等元素。

对于设计师而言，想要了解一个中台，首先要了解它的系统布局，系统布局是页面设计的基础，它与页面的关系，就如同建筑与地基的关系。日常完成需求时，UI 界面反复的调试页面宽度与卡片比例会占用我们大量的时间。为了提高工作效率，并且把更多的时间放在业务、视觉创新等方面，我们就应该需要一套完整的布局规范。

对整个公司产品体系而言，内部员工与普通用户使用的操作系统达到几十甚至上百个，单一的页面布局满足不了各个子项目的使用场景。所以我们从前期的布局框架设计调研到产品业务的特性，定义了中台界面的几大类型，并且在我们的设计规范中定义了几大类型系统布局方式，根据其布局方式定制好栅格，方便日后在各个业务场景中使用，从而能够保持一致性、并且可扩展，方便快速迭代和维护。

了解布局

1. 布局方法论

视觉层次

对于中台的 UI 设计师们而言，良好的理性思维相对比感性的视觉思维更加重要，因为在 UI 设计师设计页面时需要把很多互不相关的元素有秩序的组织在一起，正确引导用户操作与使用。亨利·亚当斯（Henry Adams）曾经说过：「混沌是自然法则，秩序是人类的梦想」。人们总是喜欢秩序，因为秩序可以让事情变得更容易理解。这同样适用于数字产品的用户界面，当 UI 元素被有序组合和结构化时，人们可以轻松的使用应用程序和网站，并对产品感到满意，所以设计页面时需要结合视觉层次理论。视觉层次理论是设计过程的核心方法之一。最初是建立在格式塔原理的基础上，它观察到了用户对相互关联元素的视觉感知，并展示了人们如何将视觉元素归为一类。那么什么是视觉层次呢？官方概括：视觉层次结构致力于一种用户能够理解的方式呈现产品的内容，以便用户可以理解每个元素的重要性级别。它可以组织页面内容，以便大脑可以根据物理差异例如：大小，颜色，对比度，样式等区分对象。

苹果的设计一直以来都是引领着设计趋势，其设计被国内外用户所认可，所以就以苹果官网作为案例。其中，字重对比：苹果官网在字重上给人眼前一亮的感觉，它采用 Medium+Bold 的字重使得标题与详情内容产生强烈的大小对比，用户进入官网的第一眼便能了解核心内容。颜色对比：在颜色上使用黑色背景承托产品和内容，强烈的黑白对比增强了信息传播中的识别度和对比度。图文排版：在图片与文字排版中使用了文字层和图片层互相叠加的视觉效果，使得页面层次感更加的丰富。如下图：

格式塔理论

往往用户打开页面进行阅读或者操作界面时视觉的第一感受是产品的整体效果，而并不会感知到一些较细节的元素。往宏观来讲当人们感知到一个物体由许多元素组成的复杂对象时，人们会采用有意识或无意识的方法将这些部分安排到整个组织的系统中，而不只是简单的元素级。它适用于不同级别的感知，但是视觉部分似乎是设计师设计界面时最能体现价值的部分，这其实就是格式塔理论，格式塔（Gestalt）这个术语来自德语单词 Gestalt，中文翻译为「形状，形式」。

格式塔心理学家库尔特·科夫卡（Kurt Koffka）的一句话可以捕捉到这一运动背后的基本思想：「整体不是元素基因的总和」。官网概括：「在心理现象中，人们对客观对象的感受源于整体关系而非具体元素，也就是说知觉不是感觉元素的总和，而是一个统一的整体，部分之和不等于整体，因此整体不能分割」。格式塔理论中元素之知见的原则分别为临近，相似，连续，封闭和连接。

在我们的现实生活中有很多自然规律都遵守了格式塔原则，比如说每到秋天，北方的严寒气候不再适合大雁生存，这时候大雁便会飞往较暖和的南方，当人们看到天空正在南飞的大雁队伍，它们组织链接得十分严密，并且群体在往同一个方向移动，所以队伍的形状在我们的大脑中将它们视为一个群组的一部分，产生人字形或一字形的图形。

信息框架

刚刚我们也介绍了视觉层级结构和格式塔理论，接下来简单介绍一下信息框架，它也是在系统布局中需要考虑的内容。信息框架是将信息内容进行组织分层，一个产品的信息框架取决于其特有的业务，他与业务强相关并且需要了解用户群体目标。根据业务和用户目标将内容组织搭建信息框架，形成系统布局的骨架，方便用户在浏览或操作页面时能够快速找到重点内容，提升用户使用效率。我们用今日头条 Web 端和飞书 Web 端两个线上产品作为案例分析吧，今日头条和飞书属于两种完全不同类型的产品，那么其信息架构也完全不同。

今日头条属于门户类新闻客户端，主要是生产内容展现给用户，首先进入到产品映入眼帘的是无穷式的信息流，它不需要用户登录/注册作为身份门槛，而是直观的把内容展示给用户，推送用户感兴趣的内容，也不需要用户决策任何选择，用户只需沉浸式的阅读体验即可，目的是方便第一时间抓取用户、吸引用户达到留住用户的目的。当用户产生兴趣以后想要进入下一步操作如：点赞、评论时才会弹出登录/注册，一方面是获取用户的身份等信息，另一方面是间接性的把用户留下来。从产品业务属性来看，今日头条的布局把重要的内容放入中间，并且占有整个布局的一半大小，其次放在内容两侧；

飞书属于工具协作类产品，用户第一次打开产品需要注册才能使用。与新闻阅读类产品不同的是工具类型产品用户目的比较明确，所以首页做成一个功能介绍页面，作用是引导用户了解产品核心功能从而转化成产品的用户。当然功能介绍页也是一个网站的门面，首页想要出彩，不仅需要在布局上做的合理还需要考虑网站的色彩、插图等元素的统一性。在设计网站时，首页的功能介绍页一定要充分突出自身产品特色，强调出自身产品的优势和亮点，如飞书首页主要是想突出其产品能够提高工作效率，所以直接把「在飞书，享高效」slogan 这句话放在了首页的第一屏，辅助文案详细的介绍了产品的核心功能，直接抓住用户的痛点。用户完成注册以后，进入到功能页面，如右下图可以看出，其系统布局的模块分成三份，占面积最大的模块属于产品最核心的部分也就是聊天窗口，较重要部分是联系人部分，最小区域是功能 Tab 部分。

小结

所以对于设计师而言，在设计页面时必须熟练掌握一些基本设计基础知识，并且将这些知识灵活运用到实际的工作当中。比如设计师在搭建系统布局时需要熟知页面视觉层次、格式塔理论、信息框架等知识才可创建合理的布局基础。当然布局框架只是整个产品的基础骨架，在骨架确定之后，设计师才可进行下一步的设计，如统一的视觉表达元素，清晰的功能操作，流畅的交互表达。

2. 布局的设计原则

系统布局规范，需要通过统一的设计元素和间距规范去引导使用者们（使用规范的设计师）跨平台使用并且能够适配不同屏幕尺寸，目的是达到一致性，可适配、可控性原则。

一致性：对于界面来讲，界面中的元素和结构需要保持一致性，如：在使用布局时应当使用一致的网格，基准线和填充，在使用设计元素时配色、图标、文本等需保持一致。

可适配：布局是可自适应的，根据用户在不同的设计环境下能够通过交互动效、界面样式有效作出极致适配反应。用户操作后需给出即时反应。

可控性：当用户看到界面时应直观有效传递内容，如界面中模块区域明确、内容组织明确、表意明确都能使得用户快速理解。界面需要简单直白，让用户快速识别，减少用户记忆负担。

3. 适配方案

在设计过程中，为了减少设计师们的日常沟通和理解成本，在设计内部我们统一了一套设计画板尺寸为 1280。经过我们官方调研得出在中台系统中用户使用的电脑屏幕主流分辨率分别为：1440*900、1366*768、1920*1080、1280*800，而1280 是主流分辨率中最小且最为保险的的一个尺寸，在设计页面时设计师如果能够在 1280 尺寸下，缩小宽度或拉升页面宽度都能保证没有遮挡或挤压问题，那么设计是合理的。在我们的规范中页面再小于 1280 时需要吊起系统的横向滚动条。在中台系统中考虑到用户效率问题很少做响应式，所以常规情况下设计师会限定界面的一个最小值。如果设计师把画板设置为 1440 或者 1366 时可能会存在其在画板中页面大小正好合适，但是页面上线以后缩小浏览器可能会发生遮挡或挤压的情况。所以我们建议设计师们使用 1280 宽度画板画图。

4. 框架

首先先分析一下界面框架，我们将页面的用户操作行为进行层级区分。我们至下而上将元素进行层级分层，目的是把用户界面模块化。界面可分成背景区域、内容层、全局控制层、内容弹层，每一层都具备独特性，将界面中所有的信息层级提取分类并且按结构属性分层，目的是能够使得页面视觉和交互逻辑符合用户的习惯认知。之前我们有提到过视觉层次、格式塔理论和信息框架，设计师在创建这一步的时候可以用来指导搭建一套合理的页面信息层级，一个内容模块都属于一个容器，容器可以承载各种内容元素。

背景层

背景层样式固定，在界面中永远置于界面底部，并且一般会给予背景层中性色，作用是方便突出内容层和全局控制层。

内容层

视图结构中最核心和复杂的一层，他与业务强相关，内容层的容器承载了业务场景的用户需要获取的核心信息以及辅助核心任务的操作。容器承载了内容，从 Material Design 中的 Elevation（海拔）概念中可以了解到，它属于第二层级内容，基本布局结构有平行结构或者父子结构。如下图卡片属于容器，卡片中承载了数据图表等内容，整个卡片+内容就属于内容层。

全局控制层

全局控制层我们定义他在内容层之上，属于页面第三层级内容，一般在业务场景中对整个网站的控制以及导航功能如：Header menu、Sidebar menu 组件，如下图中 Header menu 浮在内容层之上。

内容弹层

当前任务或者内容相关的临时出现层，优先级高于内容层，一般承载当前需要临时处理的任务或者需要进行内容补充说明等功能。如：Modal（Dialog 各个平台叫法不一致）、Tooltip、Popover、Notification 等组件 。其中 Modal 是以滑出或者弹出的形式展现给用户。Modal 它包括两种类型，一种是模态内容层不可操控，被蒙版遮罩禁用，比如在业务中需要较为聚焦的分支流程操作时使用。另一种是非模态，吊起弹出层后不印象内容层操作。当然，Tooltip、Popover、Notification 都属于非模态，反馈较轻，不干扰用户使用界面。如下图的页面中的内容弹层使用了 Popover，在次页面它的功能就是加以补充说明。

网格基础

1. 单位

随着科技高速发展，屏幕分辨率也越来越多样化对于 UI/UX 设计师来讲必须熟练的基本知识方便日常工作所需。首先我们先了解一下屏幕中的一些单位。

• 「PX」pixel，像素，大多数电子设备成像的基本单元，同样尺寸的屏幕成像单元越细小、越密集的屏幕，分辨率就越高；
• 「PT」point，点，这个单位，就同时出现在 iOS、CSS、还有传统的平面设计里，与 px 相比 px 是相对单位而 pt 绝对单位，如在设计稿中如果导出一倍图 1px=1pt 那么导出二倍图就是 2px=1pt，它是一个绝对长度，为1/72英寸；
• 「PPI」pixel per inch，每英寸像素数，决定电子设备的物理显示尺寸，只有涉及到显示才有意义。该值越高，则屏幕越细腻；
• 「DPI」dot per inch，与PPI一致，唯一区别是它表示每英寸多少点，该值越高，则图片越细腻；
• 「DP」density-independent pixel，是安卓开发用的长度单位，1dp等于屏幕像素密度为 160ppi 时 1px 的长度，因此dp 在整个系统大小中是固定的。
• 「SP」scale-independent pixel，安卓开发用的字体大小单位，可以认为 SP=DP。

2. 像素密度

在高密度屏幕下每英寸具有比低密度屏幕更多的像素，可能导致开发实现稿的视觉不符合设计师心理预期，比如：相同像素尺寸的 UI 元素在低密度屏幕上显得较模糊，而在高密度屏幕上则比较清楚。同一物理尺寸（肉眼所见尺寸）下，低密度显示器的像素个数明显小于高密度显示器的像素个数。

其实像素是与密度没有关联，我们简称密度为 DP (读作 DIP，英文全称 Density-independent pixel )，它是可缩放的灵活单位，可在任何屏幕下现实相同的尺寸，如图显示，红色网格为像素密度，被放大内容为 UI 元素物理尺寸。

所以我们可以得出，DP 可以自适应屏幕的密度，不管屏幕密度怎么变化，实际显示的物理尺寸相同，DP 可以保证物理尺寸的一致性，所以 DP 是目前比较适合 UI 设计的单位。当屏幕的密度为 160 的一个物理像素时，1PD=1PX。要计算屏幕密度，可以使用以下公式得出：DP=(PX*160)/PPI。

3. 网格

关于网格

网格线(Grid Line)，网格线又称布局分割线，它是构成网格结构的分界线。一般在布局中它们是由行网格线和列网格线组成。如下图是模拟网格做了一个示意，其中橘黄色两根线分别是行网格线和列网格线。

网格轨道(Grid Track)，两个相邻网格线之间的空间。你可以把它们想像成网格的行或列。如下图橘黄色的行网格线和列网格线之间的空间既是网格轨道。

网格单元格(Grid Cell)，两个相邻的行网格线和两个相邻的列网格线之间的空间属于网格单元格。这是网格系统的一个「单元」。如下图橘黄色的行网格线和列网格线交叉处即是网格单元格。

网格区域(Grid Area)，由单个或多个网格单元格组成，它是可以用来摆放页面元素。如下图所示，橘黄色的行网格线和列网格线交叉处即是网格区域。

网格设置

在设计界面时可以通过网格定制能够使界面更加有序、整齐、规范，网格的主要用途之一是保持设计元素对齐和排序。通过建立一个网格系统，设计师可以为自己创建一个结构来适配不同的屏幕宽度。

在我制定的规范中一般会把网格的基数设置为 4，它不仅符合偶数的思路同时也能够匹配多数主流的显示设备，如中台系统的用户主流分辨率用 1440*900、1366*768、1280*800。我们可以通过设置网格规范帮助设计师快速搭建页面，使用有律可循的布局空间的设计给到开发减少沟通成本。下图所示设计布局网格由三个元素组成：列宽，间距，边距。

在 Sketch 中设置网格，在菜单栏中找「视图」-「画布」-「网格设置」-弹出浮层可设置网格大小，网格设置的基数设置成4，之后在设计界面时可按照网格基础的倍数作为组件的大小和页面元素间距分割，如下图：

我们放大页面局部大家可以看到，把网格基数设置成 4，每个网格单元格为 4*4 大小。同理，如果把网格基数设置成 8 以后，每个网格单元格大小为 8*8 大小。

定义布局模块

界面框架内系统布局是页面所有模块的组合方式，我们定义一个页面框架中基础模块和内容模块的数量最好不超过 3 个。经过调研和归纳总结出 3 大布局类型，分别是上下布局、左右布局、T 字型布局。

1. 上下布局

上下布局布局是 Web 端运用最广泛的布局方式之一，页面内容区以 feed 流形式展现，一般用在 Web 端官网首页。设计师普遍做法是对两边留白区域为内容区并进行最小值的定义，一般定义值为 1200 较多（具体宽度要设计师如何设置栅格，后面会讲到如何设置栅格），当留白区域到达极小超过极限值之后需要对中间的内容区域进行动态缩放或遮挡，此逻辑需设计师根据业务所需而定。也有少部分设计师会设计成全屏布局，内容随浏览器宽度自适应。

其优点是页面结构清晰简单，强突出内容区，但缺点是布局的规矩呆板，变化少。设计师如果不注意合理的视觉元素和色彩细节变化，用户很容易感觉到乏味，此布局适用于层级较为简单页面。

巨量引擎（Ocean Engine）是字节跳动旗下的营销服务品牌，整合了今日头条、抖音短视频、火山小视频、西瓜视频、懂车帝、Faceu 激萌、轻颜、穿山甲等产品的营销能力，为全球广告主提供综合的数字营销解决方案。我在设计此官网时正是采用了上下布局作为页面布局，顶部导航整合了所有子页面的内容，导航下方为主要内容区并且内容定宽，当时采用此布局原因第一是因为次官网层级较简单只有三个层级内容，第二是官网更需要的是突出内容区，所有页面使用次布局更为合适。

2. 左右布局

设计师在设计重内容，轻导航类型网站是常用左右布局作为基础框架进行页面设计。此布局把系统页面分为两大模块，其中设计师常见的做法是将左侧设置成导航栏模块并且固定，常常用来控制全局内容。而右侧区域设置成工作区域或内容区，内容区可进行动态缩放。

下图为飞书沟通窗口截图，由于关系到内部信息保密性我把内容进行了模糊，从外观结构上看还是能大致了解飞书结构是采用了左右布局，整个布局结构清晰有理也是符合左右布局特点。从交互体验分析左侧属于导航区，它承载了不同功能并且固定。飞书属于即时沟通产品设计师考虑到浏览器窗口有限所以对导航设计成较小模块，而右边为聊天窗口对于业务属性分析它更为重要，所以模块较大。其导航栏固定，内容区可进行动态缩放。

3. T字型布局

T 字型布局常用在 Web 端的中台系统中，因为中台系统业务结构复杂、层级多，而 T 字型布局能够解决复杂结构的问题。使用此结构能够把页面结构清晰化，主次更加分明。设计师常常的做法是将顶部作为一级导航栏方便控制全局，二左边设计成是二级导航并且固定导航栏固定，右边的内区域可进行动态缩放（一般会把其设计成栅格动态区域），内容随浏览器宽度自适应。

下图是 Material Design 设计文档，首先简单介绍一下 Material Design，它是由谷歌的设计团队创建的一种语言，宗旨是帮助设计师们创建易用性和实用性较强的网站和应用程序，其设计理念是将现实中的物理学带入进设计中。Material Design 设计文档中的结构使用了 T 字型布局作为基础布局。页面分为了三个模块，其中顶部导航作为页面一级内容进行全局控制，接下来左边为侧边导航作为二级内容控制页面，右边是内容区满足用户使用浏览。从放眼望去整个页面架构清晰明了。

4. 小结

以上为 Web 最常见的三大布局，但是需要大家在实际的工作中灵活运用。设计师在日常工作中可能会遇到更为特殊的业务场景，设计师可以通过整理基础模块然后分析其业务的信息框架，将模块进行相互组合、嵌套归纳可以总结出更多的 Web端布局框架并落地到业务中。

网页栅格

刚刚在定义布局模块中已经分析过了三大布局类型，接下要分享的是 UI 设计师更为关注内容「网页栅格」。网页栅格也是设计师口中常常提及的栅格系统。其实网页栅格系统是从平面栅格系统中发展而来，它延续了平面设计的方法与风格，在网页中使用栅格能够使得网页信息展现更加清晰明了、美观易读。

首先网页栅格系统基本由是栅格总宽度/页面总宽度（W）、一个栅格的宽度（a）、栅格与栅格之间的间隙（i）、一个单元的宽度（A）、外边距（M）组成。

1. 列宽

一个栅格的宽度（a），我们称之为列宽，一个列宽包涵了N个网格单元格（Grid Cell）我们也可以把它看成一个网格区域(Grid Area)，在上面我们已经讲到过网格的内容，主要目的正是为栅格做铺垫。其中我把一个网格单元格设置为4（原因在网格中也解释过，如果忘记的同学可以爬楼看下）。由此可见列宽非固定值，这样可以使内容自由适配任何屏幕尺寸。在栅格中列宽由屏幕尺寸决定。

2. 水槽

栅格与栅格之间的间隙（i），我们称之为水槽，一个水槽宽度大于等于1个网格单元（Grid Cell）。在栅格中水槽为一个定值，宽度可以是N个网格单元，如网格单元格设置成4，那么水槽可以是4、8、12、16…N*4。

3. 栅格单元

1个列宽+1个水槽宽度即一个单元的宽度，一个栅格总宽是由N个栅格单元组成，次宽度不固定，由屏幕尺寸决定。

4. 栅格总宽

列宽+水槽再成以N即是一个栅格的总宽，公式为：W=(A*n)-i。

5. 栅格设置

经过调研我们得出常见的栅格分为 12 列栅格系统和 24 列栅格系统。其中 12 列栅格系统在流行的前端开发开源工具库Bootstrap 与 Foundation 中广泛使用，适用于业务信息分组较少、业务结构较简，单个盒子内信息体积较大的中后台页面设计。24 等分的栅格系统适用于业务信息量大、信息分组较多、单个盒子内信息体积较小的中后台页面设计；相对 12 栅格系统，24 栅格系统变化更加灵活，更适合内容比较多样复杂的场景。如下图分别是 12 栅格系统（左）和 24 栅格系统（右）。

6. 小结

在栅格系统结合布局结构和网格做了我做了一些知识结合，其实前面所讲的网格版块和布局版块都是为栅格做一个铺垫，利于同学们更加深入的了解网格、布局、栅格三者的关系。

写在最后

系统布局只是网页中的基础部分，但也是核心内容，一个产品布局需要根据其业务属性决定。布局搭的好相当地基打得好，但是同时在对美感的追求之上，还应当结合可用性来看待设计。在实际的工作中肯定还会遇到各种形形色色较奇葩的需求，所以希望这篇文章能够做的不是限制而是启发，大家可根据此次分享内容能够进行举一反三利用到实际的工作当中。

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

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

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