在互联网行业，竞品分析（Competitive analysis）是一个耳熟能详的词汇。但实际上，竞品分析一词最早起源于经济学领域，它是一种调研分析手段，旨在对现有或潜在竞争产品进行优劣势分析评估，从而制定战略。

今天和大家聊聊颜色系统，在做一套新产品的色彩体系时，大家常常需要解决一个问题，那就是颜色梯度，也就是色卡制作。如何从品牌色开始建立一套科学的调色板？这篇文章尝试解决这个问题。

无论你是一位需要从 0-1 制定色彩系统的品牌设计师，还是在一个已有设计系统的产品设计师，都需要掌握如何更加专业的创建设计系统中的颜色梯度。

我们都知道做网页相关的项目，不管是 C 端的还是 B 端的，往往都会应用响应式布局，用了响应式布局，就肯定要做栅格系统，才能确保响应式的正常执行。但是，移动端要不要用栅格，怎么用，就成为很多人困扰的问题，我们就用今天这篇分享来解释。

在设计领域，调研是一个至关重要的环节，然而，要进行一次有效的设计调研并不容易。它需要我们掌握一系列方法和技巧，灵活运用定性和定量的研究手段，同事还要结合实际情况进行分析和判断。本文将探讨如何进行设计调研，介绍产品分析，竞品分析和用户分析的方法和工具，为您的设计工作注入新的灵感和价值。

产品思维是设计师在设计产品时所需具备的关键能力之一。拥有强大的产品思维能力可以帮助设计师更好地理解客户需求，使设计效果更加符合市场需求，从而实现商业成功。那么如何判断一位设计师是否具有产品思维能力呢？

设计的价值怎么衡量？更有钱？更有名？更有权？全都不是工作价值 = 社会需求 X 生态位 也就是设计在越大越难的社会需求中，承担越大越难的职责，那就意味着有更大的价值。钱也好，名也好，权也好，都只是真正价值交付后产生的副产品，我们把这些副产品暂时抛开，关注事情的本质。

生成式AI到了技术发展从开始走向期望的膨胀期，现象级产品已经出现；
在产业结构中，AI智能应用近乎爆发的状态；
生成式AI的可控性突破也是爆火的重要原因之一。

用户体验设计流程

由于系统软件糟糕的UI设计（菜单排布问题）所导致的误操作，美国居民受到导弹袭击的惊吓

· 美国Forester的一项研究发现，针对UX投入的每1美元，能够带来2~100美元的收益。

· Amazon把按钮文字从“注册（register）”改成“继续（continue）”之后，销售增长了3亿元。

· McAfee重新设计UI之后，客服电话减少了90%。· Airbnb的Mike Gebbia认为，公司从接近失败到获得100亿美元市值，最大因素要归功于UX

UX究竟在设计些什么 

广义的用户体验设计，是包含了内容功能设计，信息架构设计，用户界面设计，交互设计，视觉设计，语言设计，动效设计，音效设计，在一定程度上涵盖了产品物理外观设计（工业设计），平面/包装设计，空间设计，服务流程设计等。它意味着一个高度交叉综合的领域，涉及到人与产品系统或服务发生关系并产生体验的所有触点。一般或狭义的UX Design，则主要作为与UI Design区分，多用于互联网软件（或消费电子等）行业基于屏幕的设计，包含信息框架设计，用户交互设计，可用性研究等。这里的UI Design偏重于视觉上的设计。而在现实中我们也经常把UX等同于“交互”。

用户体验设计的核心和本质，就是研究目标用户在特定场景下的思维方式和行为模式，通过设计提供产品或服务的完整流程，去影响用户的主观体验。可见用户研究在整个UX流程当中的重要性。而认知心理学（Cognitive Psychology）则是用户体验设计的理论基础和科学依据。它是一门研究认知及行为背后之心智处理（包括思维、 决定、推理和一些动机和情感的程度）的心理科学。这门科学包括了广泛的研究领域，旨在研究记忆、注意、感知、知识表征、推理、创造力，及问题解决的运作。相关的还有人体工学（Ergonomics）与人因工程学（Human Factors Engineering），是研究人和机器、环境的相互作用及其合理结合，使设计的机器和环境系统适合人的生理及心理等特点，达到提高效率、安全、健康和舒适目的的一门科学。可用性（Usability）的概念最早出现于1979年，远比唐·诺曼在1993年提出的“用户体验”概念要早。可用性的ISO定义是“用户在特定环境下完成指定目标的效果、效率和满意度”(ISO 9241-11)，而用户体验指“用户与产品、服务、设备或环境交互时各方面的体验和感受”。可用性的范畴比用户体验窄，它聚焦于任务完成。而用户体验是外观呈现、功能组合、系统性能和交互行为等因素的综合结果。

上图将用户体验细分为工具性(Utility)、可用性(Usability)、合意性(Desirability)和品牌体验(Brand Experience)，最内部的圆代表最基础的用户体验。

用户体验 / 产品设计的流程与方法

以用户为中心的设计（User-Centered Design，简称UCD）概括了用户体验设计的典型流程和方法学。以用户为中心的设计思想非常简单：在设计开发产品的每一个步骤中，都要把用户列入考虑范围。从前期的用户研究需求挖掘，到后期的用户测试设计验证，都要围绕目标用户群来进行。

在UCD设计流程的每个阶段，都有多种不同的方法来帮助我们达到目的。

用研分析：

· 单独访谈（Individual Interviews）：一对一的用户讨论，让你了解某个用户是如何工作，使你知道用户的感受，想要什么和他的经历。

· 焦点小组（Focus Groups）：组织一组的用户进行讨论，让你更了解用户的理解、想法、态度和想要什么。

· 关键利益人访谈（Stakeholders Interview）

· 情境访谈（Contextual Inquiry or Field Study）：走进用户的现实环境，让你了解你的用户的工作方式，生活环境等等情况。

· 日记研究（Diary Study）：日记研究可以让用户记录自己的进程，研究者以非打扰的视角探查用户的体验。

· 问卷调研（Questionnaire Study）：利用网上或纸张的问题list对用户进行发放填写，从而收集用户对产品的需求建议。

· 任务分析（Task Analysis）：通过任务分析了解用户使用产品时的目标和操作方式，习惯（GOMS模型）。

· 用例分析（Use Case Analysis）

· 卡片分类（Card Sorting）、树形图测试（Tree Testing）：观察用户是如何理解内容和组织信息，用来帮助你的产品更合理地组织信息。· 竞品分析（Competitive Analysis）、标杆分析法（Benchmarking）· 桌面研究（Desktop Research）、市场研究（Market Research）· 用户角色模型（Personas）：构建一个虚构的人来代表特定目标用户群组，设计团队围绕这个虚拟人物设计开发产品。

· 用户体验旅程图（User/Customer Journey Mapping or Experience Mapping）：从用户角度出发，以叙述故事的方式描述用户使用产品或接受服务的体验情况，以可视化图形的方式展示，从中发现用户在整个使用过程中的痛点和满意点，最后提炼出产品或服务中的优化点、设计的机会点。

· 态度研究（Attitudinal Research）和行为研究（Behavioural Research）

· 定性研究（Qualitative Research）和定量研究（Quantitative Research）

设计阶段：

· 脑力风暴（Brainstorming Ideation）

· 概念草图（Concept Sketching）

· 思维导图（Mind Mapping）· 交互流程（User Interaction Flow）

· 信息架构（Information Architecture）：对功能内容进行高度概括的统筹规划、设计安排。

· 情景与故事版设计（Scenario & Storyboard Design）：情景是指特定用户如何使用产品完成特定目标的简短故事。故事板是连续的一系列草图，用视觉的方式表现用户如何使用产品，形式上类似漫画分镜。

· 线框图（Wireframing）

· 低保真原型与高保真原型（Lo-fi & Hi-fi Prototyping）

· 纸质原型（Paper Prototype）

· 视频原型（Video Prototype）：通过视频来演示用户如何与产品系统进行交互。

· 绿野仙踪原型（Wizard of oz Prototype）：使用角色扮演来模拟用户如何与产品系统进行交互。

· 可交互原型（Interactive Prototype）

· 视觉设计（Visual Design）

· 设计模式（Design Patterns）、设计语言（Design Language）、设计规范（Design Guidelines）与设计体系（Design System）

· 标注文档（Design Spec）

· 动效设计（Animation Design）

· 参与式设计（Participatory Design）：将终端使用者或利益相关者带入设计流程中。

· 共情/移情/同理心设计（Empathic Design）：将设计师带入使用者情境中进行观察设计。

· 平行设计（Parallel Design）：对同一个产品进行分开的设计，从而比较选择一个最佳方案。

评估验证：

· 启发式评估（Heuristic Evaluation）：由一组行内专家依据尼尔森十大原则对产品进行可用性检查。

· 专家评审（Expert Inspection）

· 可用性测试（Usability Testing）：邀请用户来试用你的产品，有任务性的完成测试，从而达到评估的目的。分为Moderated和Unmoderated，In-person或Remote。

· 组内测试（Within-Subject Testing）与组间测试（Between-Subject Testing）

· 游击式调研（Guerrilla Research）：便宜、快速地得到大致的用户反馈。

· 问卷调查（Surveys）：利用网上或纸张的问题list对用户进行发放填写，从而收集用户对产品的反馈意见。

· CSAT（Customer Satisfaction Score）与NPS（Net Promoter Score）

· 眼动追踪（Eye Tracking）和热力图（Heat Map）

· 点击流分析（Clickstream Analysis）

· 产品漏斗（Product Funnel）和使用情况分析（Usage Analytics）

· 统计学分析（Statistical Analysis）

· A/B测试：在同一时间维度，分别让相似的目标人群随机的访问产品的不同版本，收集各群组的用户体验数据和业务数据，最后分析、评估出最好版本，正式采用。

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

分享此文一切功德，皆悉回向给文章原作者及众读者.免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

一、为什么要提高界面信息识别效率？（Why）

界面设计的好坏，会直接影响到用户的使用体验，很多时候我们往往会直接拿到竞品的页面搬运到自己产品上，而没有针对自身产品的特点和业务加以思考。

这种做法理论上不会让自己的页面出错。但是很多人往往忽略了一点，就是别人这么设计的出发点是什么，是否匹配自身产品的业务流程，如果不了解这些贸然的去搬运设计，那么时间久了就会养成一个不好的习惯，导致思维不能得到足够的刺激和知识的沉淀。当需要我们专门进行设计构思时，就会遇到诸多困难。

如果是刚入手的领域，前期可以去进行适当的搬运参考，但是一定要了解别人设计思考点，明白其背后的原因，将其沉淀成自己的知识储备在脑海中。

1. 信息大爆炸

过去60年，人类社会的数据发生了爆炸式增长。2008年人类大约创造了近10亿张DVD能存储的数据，这等同于过去5000年的人类创造数据的总和。12年，调研机构预测信息每隔18月会翻一倍20年，调研机构预测信息每隔73天会翻一倍

2. 人类的生理局限

在信息爆炸的年代，人类进化的速度却是缓慢的，我们现在的大脑跟250万年前的原始人并没有太大区别。

我们的大脑每秒钟要接收约4000万次的感官信息输入，但意识一次能注意到其中约40个，其中短期工作记忆能处理的只有4±1个。

正是由于现代信息数据的大爆炸，多数产品日益臃肿的结构，以及人类有限的处理能力，所以呈现什么信息，以何种形式呈现的信息层级设计就非常重要。

作为设计师，我们有必要根据自身产品的业务方向，以及用户的行为和特征，结合信息环境，选择合适的信息，并以适合的方式进行组织和呈现，以便让用户获取并理解信息更容易，完成信息的组织和传达作用。

二、如何提高界面信息识别效率？（How）

1. 信息分类

相关联信息需要进行归类，无论是什么类型的产品模块，我们在设计中应当做好信息分层，当两段内容元素具有关联性时，他们应当作为一个整体给用户展现。

2. 层级区分

（1）层级数量应靠近“3”

信息层级作为影响页面信息传达效率的重要因素之一，那么怎样做好页面的信息层级便尤为重要。网上资料大多都在围绕对比、对齐、亲密、重复四个基本原则讲解。

不可否认的是这四个方法对于我们排布信息层级确实起到了很大的作用，并且也是我们非常熟悉的。但其阐述得太过宽泛，在我们实际工作中面对复杂层级排版时，仍会面感到困惑，很难直接有效地利用。

于是我把优秀的案例进行收集并整理分析。

经过线上页面与概念的整体研究发现，他们在遵循排版原则的基础上，都存在着一个简单的规律：主内容的层级控制在三层左右。

如下图所示：

可以发现，三层左右的层级是最容易被用户识别的，且视觉上不易混乱。三层往后，随着层级越多其复杂性会成比增加。

比如我们看下面这两个例子，左边层级方面平铺直叙没有重构区分，使得层级复杂，造成用户识别效率变低。但其实我们只需要对信息加以归类并控制层级数量，瞬间就变得更简单且易懂。

因此，我们需要在着手设计前，首先思考一个逻辑：尽量将我们的内容层级控制在三层左右，且这三层内有比较明显的对比关系。

有朋友看到这肯定要问了，这个道理大家都懂啊，可是在实际工作中大多数拿到的信息都非常多，根本做不到保持在三层以内。别着急，本文的重点当然不是告诉你这么简单的道理，而是在面对复杂层级的时候，我们应该怎样去控制它的层级表现，从而让它在最终呈现上保持在三层左右，让用户获取信息的效率更高。

（2）源头筛选处理

源头筛选的关键在于接手复杂信息时，我们首先需要从源头上进行第一层的判断，了解这些信息是否真实地被需要。这也是我们大多数人容易忽视的一点，当然这也不能完全怪我们，因为通常需求给到我们的时候都是大致的概括，好一点的话还有个交接文档，甚至有时候需求拿到我们手上时，已经转好几手了交接人可能也不知所云，导致很难知晓其底层出因，

源头筛选的本质就是判断我们当前所要呈现的信息是不是必要的。

比如某些时候产品给到了我们很多信息，但我们并不一定会全盘接受，而是通过当前页面的业务场景去进行判断。确定每个信息的合理性，从而可以决定有些元素是否可以删减，提高整体信息设计的一致性。

过程需要我们对以下2点进行思考：

1. 此信息真的是页面中的必要信息吗，如果去掉是否会产生直接影响：比如当打开高德地图的时候，在你浏览地图时，界面只呈现强关联功能模块。只有当你上划进入二级页面时，其它相关功能才会展现，这些都是按照用户的使用场景来进行对应的呈现。
2. 当前信息的重要程度是怎样的，对于某些不重要的信息是否可以通过隐藏的方式展现：当你拿到一堆信息，信息的重要程度就决定了我们需要将哪些信息作为主体，哪些信息作为次要辅助信息，哪些信息甚至可以收起或者省略。比如当你使用语雀创建文档时，编辑和浏览永远是最关注的，而跳转入口等都是次要信息，将其隐藏反而提高效率。

上述两个问题的确认，会影响我们对后面的信息排布。因此我们需要在源头，比如去和产品或者业务沟通，弄清楚该信息呈现的缘由以及必要性，这样能够帮助我们最后理清楚信息层级。

（3）在排布上降低复杂度

信息排布的本质是通过我们对信息进行主观的排列上的组织重构，来将复杂的层级控制在三层左右的区间里。从而保证我们页面的简洁性、规律性、识别性。

通过目前的实践总结，合理地安排信息层级的方法大致可以分为：分组、组件、组织、融入、弱化。

① 信息分组

信息分组是大家在设计时都能够想到的形式，分组能够将复杂的信息归组从整，从而降低整体复杂度，清晰线索。

我们常用的分组方式主要有三种：间距、分割线、卡片。

那么这三种方式有没有区分呢？

VIVO设计团队曾经就这个问题展开过用户调研，但结果表示，如果纯粹从用户的角度来讲，对其变化感知不大。但这三种分割方式会影响我们在呈现信息时的整体视觉观感，因此我们可以根据当前信息的复杂度作出以下规则：

• 复杂度较低时，优先采用留白分割，视觉清爽五干扰；
• 当留白分割效果不明显时，可引入线性分割，让层次更清晰且保证屏效；
• 需要进一步强化信息之间的边界感，可引入卡片样式，强化层次和可操作性。

② 利用组件拆分

组件其实是目前大部分设计师在进行信息排布时必备的部分，因此对于这部分设计师的熟练度也是最高的。而本篇想要强调的是，目前这几种组件对于我们信息层级的划分起到了比较重要的作用：树形结构、表格结构、步骤条、选项卡。

• 树形结构。对于有关联性的多层级非常适合，可以将复杂的层级结构进行收拢，从而能够显著降低信息的复杂度。
• 表格结构。对于信息多且关联性不大的复杂信息，可以聚合到表格来进行呈现，但表格的呈现方式不宜滥用，需要根据我们场景来进行选择。
• 步骤条。步骤条则对场景要求非常明确，我们可以将多个场景通过分步的形式进行呈现，从而减少当前页面的复杂度。
• 选项卡。选项卡更适合与同级的数据，对于同类型的结构可以更好地将页面进行拆分，从而让当前页面更简洁。

③ 灵活组织

通过对组织方式的调整，我们可以将多层结构的样式通过拆分布局来将其控制在三层内。

举个简单的例子：

从图中你可以看出左侧的层级较多，尤其是两层tab的叠加，视觉上就会显得稍微有点凌乱。我们可以通过将第二层tab换个布局，从上下结构变为左右结构，达到从视觉上简化层级的作用：

当然以上只是举了一个简单的例子。这里底层逻辑就是当遇到相对比较复杂逻辑时，我们可以通过改变结构使其交互逻辑更清晰，从而减少其复杂度。

④ 巧妙融入

我们可以利用信息融入的形式来减弱其对层级的影响。信息融入从本质上讲就是将某两种层级信息通过不同的组合方式，让其融入到同一个层级中。比如我们看下面这一个例子，产品设计中将button与查询项利用分割排列在一起，从而变为同一层级，通过这种方式有效降低了页面的复杂度。

当我们在进行B端布局时，信息融入这个方法用得比较多。比如我们最常见的标题、搜索和按钮等都放在同一行上。这样既能够节省视觉空间，还能够降低信息层级的复杂度。

但在进行信息融入的过程中，我们需要注意的是：如果放在同一层级会造成理解上的误解时，这个时候不要采用该方案。比如搜索框的位置，放在哪个层级决定了对应的搜索范围。

⑤ 信息弱化

信息弱化的原则是：将某些超出层级的部分进行弱化。

比如图中有5个层级，但其巧妙地将功能筛选融入到了当前的结构中，使得即使超过3层我们也不会觉得其特别复杂。

在很多时候，我们觉得信息混乱的原因，就是页面要素太多太花哨。

比如工作中的一个小卡片，也就是利用信息弱化去减少画面的复杂度：

因此我们需要学会对信息分级，不重要的信息就进行弱化，这样整体的呈现上会好很多。

但不可否认仍会有更复杂的页面，即使缩减也仍有过多层级，那么这个时候就一定要记得最开始的从源头去追溯这些所有信息是否必要。

（4）突出热区

当模块具有按钮、文字链、图片入口等需要下一步操作的关键元素，需要进行高亮显示，以此帮助用户快速定位目标。

图中 “Learn more” 使用文字高亮进行处理，通过颜色让用户快速定位入口，且不影响用户正常阅读，若使用色块按钮进行突出，模块会冗余，过于喧宾夺主。

3. 可见性

当产品需要用户进行多步骤完成任务时，应当展示系统进度，让用户了解他们的行为操作在界面中所处于的位置。

比如下图中房屋装修信息填写流程，用户面对这种多流程任务时，耐心往往很低，我们可以在设计时添加系统状态进度条，时刻提示用户当前的节点，此方法应用场景还有注册登录、信息完善等更多场景，目的都是为了让用户达到交互可预测的状态，提升用户体验。

4. 遵循视觉动线

我们在设计内容复杂的网页时，建议根据产品诉求和用户目标，合理的放置元素，以此来达到目标，另一方面符合眼动规律的浏览顺序，可以让用户不会产生视觉疲惫，每个视觉点停顿时看到元素都是不同，提升用户体验。

5. 合理的字体加粗

在设计大面积文字排版时，应当注意字体粗细，它决定着我们的设计是否易读性高。

无论标题还是内容，字体过重或者过轻都会降低文本的基本识别度，而且遇到文字信息过多的情况，长时间专注文本的识别很容易出现视觉疲劳的情况。

在设计UI界面中，无论是长文字体还是模块元素字体，我们都要注意字体的重量，保证基本识别度的同时，优化视觉重心，确保用户在阅读时不容易陷入疲劳。

6. 孰轻孰重

当界面中存在多个入口时，我们可以对这些入口进行优先级处理，以突出核心功能为目的，用户浏览界面的动作是大面积扫读的形式，这就意味着我们需要弱化无关信息，既保证了界面的基本美观性，又能够具备良好的体验。