概述

每年年底，QQ都会迎来一年一度的年终盘点活动，帮助用户实现QQ社交记忆回溯。通过生成用户专属的社交形象，拉近用户和QQ之间的距离，体现品牌温度。

一、设计目标

年度盘点活动不同于主题运营活动，是对QQ用户年度高光时刻的总结。在活动设计目标的设立上，我们希望塑造QQ温暖品牌形象的同时清晰展示QQ用户年度的社交记忆点，通过创造用户记忆点，激发用户分享。

二、创意构思

我们从QQ用户熟知的社交行为、场景出发，进行视觉元素延展。将用户的浏览过程喻作QQ社交记忆的探索历程。通过QQ元素等场景映射，唤醒用户的社交记忆，最终形成用户专属的社交形象。

三、风格设定

基于活动的目标我们衍生出以下设计关键词（见下图），简洁有品质是本次活动视觉风格的核心传达目标。

1、色彩

为凸显回忆感知以及透传QQ品牌。在色彩的选择上我们使柔和的蓝黄渐变色系，背景色系就像天空会跟随活动节奏、故事内容而动态变化，利用色彩变化传达时光回溯的氛围感知。

2、质感

考虑到整体的风格设定偏洁净明快的感受，我们多以玻璃、半透明3s，哑光三类材质为主。选择透光性强与色彩融合度高的材质搭配使用，让画面更具轻盈、简约的品质感。

四、视觉表现

1、信息传达

年终盘点活动与主题运营活动不同，繁冗的氛围传达并不等同清晰的信息传达，在活动的设计上，我们希望一页只讲述一件事，弱化装饰，突出主体内容。

2、品牌透传

场景内我们融合了QQ品牌调性的元素，如聊天aio、消息气泡，QQ空间等，加强用户代入感。

3、动效编排

我们根据页面场景的展示内容类型，进行动画节奏上的编排。保持信息传递的效率，并在需要氛围强化的环节增强动画吸引力。营造灵动的内容浏览体验，提升动画张力。

在动画的运动样式上，我们提炼出映射QQ社交场景的动态设计语言。通过模拟聊天气泡出现、新消息通知弹出、空间访客踩一踩等社交场景中的动画形式，透传QQ品牌调性，增强动画表现力。

五、激发分享欲

从设计层面，如何激发用户的分享欲？在本次活动分享中用户的专属社交形象扮演着重要的角色，接下来我们将介绍影响社交形象品质的三大设计因素。

1、形象设定

我们选用QQ作为社交形象主体，根据用户不同的社交属性去赋予其色彩、材质的变化。在初步的生成方案上，我们尝试挖掘更多的组合可能性，从QQ围巾、嘴巴等部件进行材质变化。但三维的部件设计、审核成本高且组合起来多种情况形象差异性小。

为此我们降本提效精简了生成逻辑，在鹅身上视觉强感知的场域进行差异化设计。

2、构成规则

我们将社交关键词分为三大阶级并衍生出社交形象构成的梯度规则。从社交小白到社交天花板，不同强弱的社交属性决定着鹅身的变化。例如低阶的材质表现使用的是石膏、木纹，形容人们在社交上木讷、寡言少语，而高阶的鹅身质感、色彩，图案表现更加丰富。 

3、隐藏款埋入

在QQ形象设计上，我们根据不同的社交关键词进行了不一样的设计，包括样式、材质、颜色等，这些不一样的设计在隐藏款上尤为突出。

例如针对社交关键词“一呼百应KOL“，此社交关键词形容的是人气高，是众人的焦点，为了体现这种超高人气，QQ形象通体采用透明材质，并在内部放置了很多不同的体现开心的黄脸表情。

在隐藏款“自带光环的主角”的设计上，我们希望传递出受人瞩目的光感，结合我们的生活，光线经过玻璃后，通过不断折射反射，能很好的传递出多彩和绚丽感觉，所以这款QQ形象通体采用了玻璃材质，强化和传递出受人瞩目的主角光环。

隐藏款之外，其他更多QQ形象我们也会根据社交关键词进行不一样的设计。

六、形象展示

• 金属鹅 Metal Q

• 玻璃鹅 Glass Q

• 树脂鹅 Resin Q

七、形象延展应用

除此之外，我们在春节贺卡活动中还复用了部分鹅身形象，并为虎年设计了专属的虎纹迷彩鹅。期待后续在运营活动中尝试更多的个性化QQ形象，刷新IP，升华品牌。

结语

在当今社会强调本我的趋势下，活动千人千面的属性越发重要。将经典的QQ形象与用户社交特征相结合，传递具备独特性、品质感的品牌视觉表现，更能拉近QQ与用户的距离。我们相信在未来的年终盘点活动中，QQ会带给大家更多的惊喜，敬请期待吧！

原文地址：腾讯ISUX

作者：ISUX设计

转载请注明：学UI网》探秘｜QQ社交形象年度盘点设计密码

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

数据来源：《2021年中国互联网行业体验设计工具趋势研究》

但体验是的一种主观感受，是用户在使用一个产品、系统或服务之前、使用期间和使用之后的全部感受。公司的品牌、网站、系统、产品、服务、营销活动、线下门店等等各个环节的用户触点都会是用户体验的影响要素，面对如此复杂的情况，体验管理的边界是什么？内核又是什么？接下来我将结合自己开展体验管理工作的相关经验，谈谈我对于体验管理几方面的思考。

一、如何理解体验管理

顾名思义，体验管理即为对体验的管理，既可以是用户的体验，也可以是商家的体验、供应商的体验、经销商的体验，合作伙伴的体验，还可以是内部员工的体验。但无论是哪类角色的体验，都是一种主观的情绪感受，都会受到多个环节、多种因素的影响。因此，对于一家公司来说，体验的提升和优化也势必涉及多个部门团队的工作协同，需要从宏观视角、从战略视角对“整体”体验进行管理，充分分析并把握用户与公司产品或服务接触的每一个触点环节，聚合和分析全渠道、全流程的体验数据，洞察用户痛点、需求及偏好，并以全链路整体体验提升为目标，通过各部门团队的协同，不断改善公司产品或服务的触点体验，从而为用户提供系统性价值交付，为企业提供持续性增长动力。

二、为什么要做体验管理

首先，从体验提升的宏观价值视角来说，提升用户体验是企业在流量红利逐步消失、行业竞争日益加剧的宏观背景下，继降低成本、提升效率之后实现业务增长的共识性举措。实施体验管理有助于提升用户满意度、忠诚度；有助于提升品牌口碑、品牌影响力；有助于促进用户增长、商业目标达成；有助于促进产品创新、营销创新以及企业升级。

其次，从体验提升的工作开展痛点来看，现阶段国内体验管理仍处于刀耕火种期，虽然越来越多的公司纷纷入局，但多数只是停留在散点式、被动性的体验需求研究、体验问题收集及优化、用户反馈及态度采集上，缺少对体验的整体性管控能力，因此在开展体验提升工作的过程中往往会遇到以下困境：

1. 缺少统一的量化指标。各团队对体验的理解、当前的体验水平、体验影响的大小均不像转化率、用户量等业务指标那么清晰，所以团队之间缺少统一的体验语言，导致体验提升工作的推进成本远高于更明确的业务目标提升工作。

2. 传统体验研究分析的周期长，时间跨度和体验触点的覆盖范围有限，导致体验优化工作难以适应现有产品或服务的迭代更新节奏。

3. 体验分析与体验优化有脱节现象，未形成完整的体验提升进度跟踪保障机制。

4. 公司同事体验意识参差不齐，缺少统一的体验文化引导。导致先上线后优化的不良模式盛行，增加了用户首试体验受损的风险，增加了体验挽回所需付出的成本。

因此，开展体验管理所能带来的直观可见的价值是能帮助我们解决以体验提升为目标的各项工作的难点，提升各项工作的效率。同时，从体验管理的长远价值来看，开展体验管理可以提升企业竞争力，促进整体商业目标达成。

三、体验管理的通用模型

结合国内公司在体验管理工作开展上的主要内容，大致可将体验管理工作分为三大类：

1. 数据采集为主的研究执行，即诊断用户使用产品或服务全链路上的体验现状和问题，为体验优化提供方向指引；

2. 体验优化为主的机制建设，在公司层面建立规范的流程或机制，保障体验优化工作顺利开展；

3. 体验管理工具或系统建设，结合公司体验管理需求，依托现有体验分析及优化的工作流程、机制，设计开发体验管理工具或系统，提升体验管理的系统化能力。

数据来源：《2021年中国互联网行业体验设计工具趋势研究》

综合现有各公司所开展的体验管理工作内容以及我们现有的工作实践，我将体验管理工作的具体内容按照覆盖范围分为三层结构：数据层、系统层和运营层。

图1. 体验监测管理体系

每一层级上都有对应的工作目标和工作内容：

数据层：建设体验数据，量化体验水平，追踪体验变化。

图2. 体验监测数据示例

做体验的监测管理，首先我们需要看到它，并且能及时的掌握它的现状和变化情况，这样我们才能针对现状去分析判断我们应该怎么提升它，改善它，才能针对变化情况来分析、判断、衡量我们所做的提升和改善措施是否有效，才能不断沉淀经验方法，在体验提升的台阶上逐级而上，而不是原地打转。

但正如前文所述，体验是用户的主观情绪感受，无论是对单个用户的情绪感受的测量方法，还是对整体用户主观情绪感受数据的收集技术都不是很成熟，所以，体验数据不像运营数据或财务数据那么容易追踪和衡量。

在这样的背景下，我们首先需要找到那些可以直接或间接反映用户情绪感受的数据，构建收集渠道来收集可以反映用户情绪感受的数据。

那这类数据都有哪些呢？结合用户体验度量的数据维度来看，大概可以将其划分为两类：用户自我报告式的主动反馈类数据和系统埋点收集的客观行为类数据。

自我报告式的主动反馈类数据主要有满意度评价（CSAT）、推荐意愿（NPS）、客户费力度（CES）等反映整体感受的数据，以及用户通过客服或在线反馈等渠道针对特定问题的反馈数据。此类数据主要通过直接询问用户或用户主动反馈的方式来采集。

系统埋点收集的客观行为类数据主要是用户与产品或服务的交互过程数据，比如App的整体使用频率，使用时长，App分享率等，以及重点功能或页面的点击率、转化率、跳出率等。此类数据主要通过系统后台自动记录来采集。

为了能更精细化的对体验状况进行分析，也可以增加一些体验水平分析的辅助型数据，比如用户的性别、年龄、会员等级等特征类数据。以便我们看到整体体验水平有所变化时，能具体的分析出是哪个群体的变化导致。

系统层：构建体验管理系统，承载体验数据，提效体验运营。

图3. 体验监测管理系统界面截图

体验监测管理体系的中间层重点在于系统的建设。这主要是因为：

首先，体验管理系统是体验数据的承载系统。单独一期的体验数据采集因为缺少对比的基准，所以参考意义不大，我们需要长期的采集体验数据，并进行不同时间的体验水平对比，这样才能及时有效的发现体验水平的变化，找到需要重点提升体验的用户群体、产品模块或服务环节。

而长期的数据采集及分析需要耗费较大的人力成本，且工作重复性较高，数据的人工分析也容易出现失误，因此，通过系统来完成数据的自动采集、数据的自动分析、数据的自动诊断，不仅能及时且长期的采集体验数据，而且能有效的节省人力成本，减少人工计算的失误。

其次，体验管理系统是体验运营工作的主要辅助工具。体验数据的监测分析诊断只是基础，依据监测分析诊断的结果如何能有效的促进产品或服务体验提升才是体验管理的最终目的，围绕用户体验提升所要做的运营工作还有很多，比如产品/服务体验问题的优化跟踪，团队/公司体验文化的建设等。为了能高效的完成各方面的体验运营工作， 我们依然需要借助系统的能力。

因此，体现管理系统的建设在体验管理体系的构建工作中是非常重要的一部分内容。

运营层：构建运营机制，分析体验数据，管理体验问题，维护体验用户，建设体验文化

图4. 体验监测管理相关运营产出

体验运营主要是指围绕用户体验所进行的人工干预工作的总称。我们的日常运营工作主要包含体验数据分析、体验问题管理、体验用户维护和体验文化建设四个方面。

体验数据分析主要是对体验数据结果进行统计整理跟踪以及综合性的分析，比如结合主观数据及客观数据来综合评估特定功能或服务的体验情况；并及时将体验数据分析结果同步给对应功能/服务的责任团队，协助其分析体验水平的变化。

体验问题管理主要是对体验问题的分析和优化。体验数据的监测可以让我们更及时的发现体验上的问题，但单纯的发现问题仅仅是开始，我们需要联合相应的责任团队一起对问题进行分析优化，在这过程中经常需要我们通过快速的调研来验证问题，评估问题的严重性，找到问题的解决方案，同时需要推动或协助责任团队完成优化方案，跟进优化进度和效果。

体验用户维护主要是对产品/服务典型用户群体或社区的日常管理和活动组织。主要是为了能及时的获取产品/服务方面的体验情况，及时了解产品/服务创新方案的用户态度评价，让用户更深入的参与到产品/服务的设计开发过程中，引导用户为产品/服务的迭代创新贡献优秀创意。

体验文化建设主要是通过体验数据分析结果/体验专项研究结果传播，体验问题协同机制构建，体验活动组织，体验考核机制创建等方式不断培养各团队及时关注体验水平的意识，营造各团队积极推动体验优化的氛围，激励各团队推行体验优化/体验创新的主动性。

四、体验管理的趋势展望

随着越来越多的公司开始进入体验管理的行列，势必会促进体验管理不断的发展变化。结合对现有体验管理工作现状的观察，我认为可以用三个关键词来概括体验管理将来可能的三个发展方向。

精细。体验涉及用户与公司接触的方方面面，时时刻刻，体验管理也将围绕用户的全部场景，完整链路触点，以及用户的整个生命周期来进行更加精细化的数据采集、分析和优化，全方位的监测、诊断和管理。

多元。从宏观行业到微观数据都将变得更多元。未来的体验管理不仅仅只是用户体验部门的工作重点，也将作为抓手逐渐成为整个企业从上至下的重点工作方向。体验管理不再只是互联网企业的专属，也将逐步渗透至各行业的企业公司。不同行业、不同企业的产品或服务类型多种多样，用户与产品或服务的交互触点、场景也各不相同，为了满足不同行业、不同企业的多样化需求，体验数据的采集渠道和场景也将结合多样的触点场景变得更多元，体验数据的采集维度也将变得更丰富，分析数据的方式方法以及体验管理工具的功能类型也将在不同行业/不同企业中呈现出个性化、多元化的趋势。

智能。技术的进步和发展也势必会带来体验管理能力的不断提升，体验数据的采集、体验水平的分析诊断、体验问题的优化管理将借助新技术而变得更智能、更高效。体验数据的采集将在用户无意识中完成，且能兼顾体验数据的多种维度，使体验场景的还原更便捷，更真实；体验水平的分析诊断将结合更多维的数据来进行综合性的自动化诊断，并提供切实可行的优化方案，使体验问题的暴露更准确，更人性；体验问题的分发、进度跟踪、效果评估等管理工作的自动化程度更高，使体验优化的效率更高。

转载请注明：学UI网》关于体验管理的几点思考

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一、建立原子化组件思维

1、什么是原子化组件思维？

原子思维：原子最早是由英国化学家/物理学家约翰·道尔顿提出的，继承古希腊原子论和牛顿微粒说，提出的原子论。化学元素由不可分的微粒（原子）构成的，它在一切化学变化中是不可再分的最小单位。

原子理论同理适用于我们的设计系统中：

页面是由原子（最小单位设计元素）、分子（基础控件）、组织（基础功能组件）、模版（业务定制组件）、页面构成。

原子：原子是最基本和最小颗粒度的单位，无法进一步细分的UI元素，在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线等。

分子：原子排列组合构成了分子，在界面中多以「设计控件」的形式存在，形成相对简单的UI组件的原子的集合。例如：导航栏、标签栏、搜索框、按钮、弹窗等。

组织：原子、分子排列组合形成界面离散部分的相对复杂的组件，在界面中多以「基础组件」的形式存在，例如：内容卡片、表单页面。

模版：原子、分子、组织按照业务需求排列组合构成了模板，在界面中也称为「业务组件」，例如：筛选列表。

页面：按照一定规则后排列组合而成的满足业务需求且包含品牌属性的一个完整「页面」。

2、组件化的内核

设计组件不是把UI元素堆积到一个地方，然后各处集中引用这么简单。组件化的工作方式信奉独立、完整、自由组合。

目标就是尽可能把设计与开发中的元素独立化，使它具备完整的局部功能，通过特定规则自由组合来构成整个产品。

独立：一个组件就是一个独立的产品：在制定组件的过程中要考虑到组件应用中的各个场景，降低、拆解组件中的耦合度，同时把一个组件当作一个独立产品来设计 考虑空状态、极端情况、尺寸变化 尽可能灵活适应各种使用场景

完整：一个完整组件构成包含三种属性：

A.响应状态-包含组件库中原子的大小类型、分子的响应和组合方式、多状态的交互；

B.行为状态-组件中元素的与背景的组合方式、组件中不同组件拼合的层级关系、组件与用户行为的交互；

C .数据状态-包含组件不同的状态枚举：如提交中、审核中、已结束状态。

自由：每个组件都是相互独立的，组件间的组合方式灵活且多样的。灵活多变的同时也要遵循统一的栅格尺寸与表达约束，最大程度上保证页面呈现出一种有秩序的美。

二、建立设计说明指南

1、什么是设计说明指南？

针对企业级产品反复出现的设计问题，设计模式给出一般性的解决方案，实现跨应用交互一致性的有效融合。减少了不必要的认知成本，提升交互确定性和设计的效率。

考虑到需要适应各种独特的业务场景，模式的规则具有一定的灵活性，万变不离其宗，通过了解设计模式的构建逻辑，可以衍生出更具场景特性的解决方案。

设计模式包含以下内容：

原则：基于价值观衍生出的一般设计技巧，包括如何高效组织信息、帮助建立用户与界面的互动等原则性要求。

全局规则：通过规范常见的互动行为，包括导航、数据录入、数据展示、反馈、操作、帮助等，呈现组件元素的标准用法和弹性空间，并了解如何将他们组织在一起来创建良好的体验。

构图模版：我们总结了表单、列表、数据可视化、详情页、工作台、异常、结果、编辑器几类页面的典型解决方案，介绍每类页面的设计目标、设计技巧以及典型页面内容等，帮助设计师和产品经理可以快速开始构建界面。

2、服务于谁

A.设计师：交互设计时，整体流程框架或分支流程可快速复用。

B.产品经理：原型设计时，可复制并套用现有交互模式进行原型绘制，或直接引用进行开发。

C.研发人员：可作为标准交互流程的参照，统一相似流程的代码设计方式。

3、有什么内容

前言：对这次建立设计说明指南的目的性说明；

设计概览：描述这次调整的范围的维度；

设计原则：基于哪些设计原则输出设计内容；

构图模版：页面的构图模版、组合控件和组合范围；

全局规则：全局范围出发，除了页面构图以外，涉及到共用组件，制定的规范；

组件：基础控件和组织控件，甚至涉及到业务定制控件（模版）。

4、设计说明指南的输出

《GM Design》交互设计说明指南，涉及几十个产品线的成百上千个的功能，业务体量和复杂度极大，为了让整体SaaS产品具备简洁高效的一致性交互体验，设计说明指南是设计过程中问题解决的核心方法，也是构建整个平台或框架所要遵循的基础和标准。

设计模式辅助设计者将业务引向实践，并使设计更具有一般性、简单性、一致性及稳定性。同时，设计者也可结合不同业务情境，实现模式在一般性和特殊性的衔接并作要素与结构的调整。

最后

最后，为大家提供一份详细的GM Design交互设计文档，里面包含设计概览、设计原则、构图模版、全局规则、组件等多类B端后台交互设计内容。

完整版交互设计说明文档-体验链接：https://lanhuapp.com/url/947cJ

大家可以在公众号后台回复文档，获取访问密码。

慢慢来比较快，希望对你有帮助！

原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》B端后台产品的设计细节-设计说明指南篇

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

今天会跟大家分享一些被广泛运用的界面设计规则，它们能快速使得你的界面设计更干净、高效。

1. 文案要易于理解

用更容易让用户理解（说人话）的引导文案，提升使用体验。

（彩云注：下面2个案例中，左侧的“购物车”和“库存2”太过于术语化，右侧的“仅剩2”和“加入购物车”更加贴近用户的日常理解。大家平时工作的时候，也一定要注意界面中的文案，尤其是说明文字，控件文字等等，这个点经常容易被忽略。）

2. 垂直对齐易于扫视

良好的对齐方式，可以增强内容的可读性，让用户的视线更容易扫描。

（彩云注：左侧的“之”字形视动线比较难阅读，且不够专业；右侧的垂直对齐增强了可读性，也让设计看起来更加统一，能够快速的提升设计细节。）

3.给选项加图标

使用图标、动画作为标签，有助于更轻松地理解内容，它使界面看起来更加理性和丰富，能瞬间抓住用户的眼球。

（彩云注：左侧的导航相较于右边，很难第一时间准确识别它的意思，增加图标后不仅更快看清，视觉上也更加美观。）

4. 大段内容要拆分

大段的长句会让内容变得难以阅读。为了获得好的体验和UI，应该注意拆分内容，并使用项目符号突出关键点，利用拆分好的内容块让用户更快抓住重点。特别是在“功能说明和条款条件”或任何声明时，提炼要点有助于提升用户体验，这样也不至于让用户直接忽略。

（彩云注：左侧的大段文字我想应该没多少人会去阅读，右边的至少还能在短时间内快速看看几个关键词。）

5. 流程增加进度条

进度条帮助用户追踪流程，它也能使查看上下步骤更加容易。线上购物，表单填写，申请流程等场景使用这种格式能很好的简化流程。

（彩云注：左边的表单UI不方便跟踪进度和流程，右边的表单把进度放在顶部能帮助用户清楚的知道流程进度。）

6.错误提示要明确

错误提示一定要明确，易于理解，方便用户进行下一步的操作。如果用户不理解界面上出现的错误，用户就会感到很失望，可能会放弃接下来的流程。在UI设计时，在正确的地方用通俗的语言说明问题，以避免歧义，这一点非常重要。

（彩云注：我常常遇到各种出错，但出现的提示太过于术语化，也没有提示在正确的地方让我非常苦恼。）

7.按钮要正确合理

从菲茨定律（Fitt’s Law）中我们应该知道，目标区域的距离和外观与所采取的行动成正比。因此，为了将注意力集中在转化按钮上，按钮应该准确放置在合理位置上。此外，按钮的大小应该易于点击，避免用户因尝试点击时不方便而流失。

（彩云注：左侧的按钮不在正确的决策位置以及按钮太小，右侧的按钮简洁明了并且符合用户的心理预期，能够让用户更快决策并点击。）

8. 用好色彩心理学

颜色是UI中不可缺少的部分，它能影响用户使用应用时的情绪。正确地使用颜色将使UI看起来更加丰富合理。

（彩云注：左侧的蓝色按钮颜色并不符合用户对于删除的心理预期，右侧的红色按钮对用户的心理预期有危险和警告，用红色代表删除能够让用户集中注意力关注这一特殊的操作。）

9. 单列更易保持关注度

用单列展示内容，能更好地帮助用户扫描。当你的应用和网站上要展示大量信息时，将所有信息垂直对齐时，能更好的保持用户关注度。

10. 优先社交媒体账号登录

当用户准备登录或注册你平台的时候，把所有可用的社交媒体登录尽量放在首位。这将避免用户填写表格时付出额外的认知负担和时间消耗而流失。首先使用社交媒体账号，能很好地增加点击率。

11. 选择状态要清晰

在用户做选择的时候，需要清晰地告诉用户选中的到底是哪一个选项。模棱两可的颜色会增加用户的认知负担。更少的颜色和清晰的选中状态能让用户获得更好的体验。

（彩云注：左侧的问题在于选中状态不清晰且选项的颜色过于丰富，右侧的选中状态清晰且选项颜色只有2种，选中和非选中，体验会更好。）

12. 用留白分组

如果想给信息分组，使用留白是最好的方式。加条线作为分组符号会在界面中增加了一个额外元素，空白能让UI看起来更加干净和优雅。用线分组的情况适用于类似Twitter、Medium之类的重内容平台等场景。

13. 控件样式保持一致

保持设计的一致性，能够降低功能复杂度并让用户更快决策，一致性设计让用户更快熟悉操作而不需要太多思考。（彩云注：左侧的选项圆角不一致，会让用户思考为什么这里会有不同，而右侧的一致性选项设计，能让用户忽略内容外的干扰。）

14. 搜索中的占位符要用好

在搜索输入栏添加适当的占位符，提示用户可以在平台上搜索和找到的内容，这样可以提供用户参考并带来更好的用户体验。

总结

以上这些就是在设计数字产品体验时应该遵循的14个基本规则，这些点虽然基础，但却经常被人忽略，我在星球中帮大家看作品集时发现上面提到的这些点出现的是最多的，希望大家可以把这些知识运用到自己的设计中，提升UI产品体验。

原文：https://bootcamp.uxdesign.cc/dos-and-don-t-for-ui-design-part-2-8f56dcd66b4
作者：Ayushi Verma
译者：彩云Sky
本文翻译已获得作者的正式授权（授权截图如下）

希望对大家有帮助，欢迎转发分享~

原文地址：彩云译设计（公众号）
作者：彩云Sky
转载请注明：学UI网》想要优化好UI作品，这14个设计细节一定要检查到位！

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

1、菲茨定律

选中目标所需时间与移动距离长短和目标面积大小有关。（与距离负相关，与面积正相关）

现实中的应用

在商场中寻找洗手间取决于标志的大小及步行的距离。为了满足这两个标准，标志设计得更大、更容易接近。

设计应用

▲ 左侧页面的CTA按钮很小，没有突出显示，与表单的其他元素基本上没有区分；右侧页面CTA按钮尺寸很大，能让用户清晰识别。

2、希克定律

决策所需要花费的时间随着选择的数量和复杂性增加而增加。

现实中的应用

与餐厅相比，快餐店的菜单选项有限。因此顾客点餐速度更快，门店提供的服务也更快。

设计应用

▲ 在Whatsapp上转发消息时，会在“最近聊天”列表上方看到“经常联系”的3个好友。这对用户来说是一种简单的交互，帮助用户节省操作时间。

3、共域定律

被一个显而易见的边框包围起来的多个元素，被视为一个群组。(从属于格式塔理论)

现实中的应用

在服装店中，衣服按照类型被分到不同的架子上来展示，即使对这家服装店一无所知，顾客也会将一个货架内的商品关联成相似的东西。

设计应用

▲ 过滤器被封闭在产品页面之外的单独区域中，因此可以清楚地识别左右两部分的差异。

4、雅各布定律

用户将大部分时间花在别人家的网站(产品)上，而不是你的。这意味着他们希望你的网站(产品)跟别人的有相同的使用方式。

现实中的应用

假设家中的阳台是一扇推拉门，我们可能希望酒店的阳台门也以同样的方式操作。因此如果酒店有一个滑动门，我们可能会下意识地先去推门。

设计应用

▲ 以上是国外知名的电商网站导航栏设计，这几个网站导航栏中显示的信息及其结构都非常相似：左侧是品牌标志，中间为搜索栏，右侧为其他选项(购物车/个人账户)。

5、系列位置效应

用户更容易记住系列中出现的第一项(首因效应)和最后一项(近因效应)。

现实中的应用

我们通常更容易记住某个电话号码的前4位或后3位，这条法则也是银行卡号被分成4组数字的原因。

设计应用

▲ 在亚马逊主页上，网站的第一部分总是显示最重要的内容：导航包含logo、搜索和其他重要功能；轮播图通过图形设计吸引用户的目光，引导新的交易或优惠。

6、冯·雷斯托夫效应

又称隔离效应。当存在多个相似物体时，与众不同的物体最容易被记住。

现实中的应用

在商场购物时，相较于普通装饰的门店，我们更有可能记住或将注意力转移到具有霓虹灯效果的门店上。

设计应用

▲ App上有新消息时，会在图标上用红点显示，这样的提示更清晰和突出，从而吸引用户的注意力，引导用户点击并查看消息。

7、审美可用性效应

用户通常认为漂亮的设计更易用。

现实中的应用

当参观汽车展厅时，我们通常会对汽车精美的展示感到惊叹，并立即对这个品牌产生积极的印象。

设计应用

▲ 在爱彼迎上，我们住在陌生人的房子里，因此建立双方的信任是必要的。当访问像爱彼迎这样干净简洁的网站时，我们会下意识地信任这个产品，也确保了用户对品牌的信任。

8、峰终定律

人们评论体验优劣，大多基于峰值和结束时的感受，而不是所有环节的平均值。

现实中的应用

在足球比赛中，整场的观看体验将根据比赛结束(谁获胜)和比赛高潮（谁进球最多/比赛中最激动人心的时刻)来判断。

设计应用

▲ 在夜晚非常饥饿的时候，我们使用订餐App选择食物时，却被告知付款失败。这时候App界面设计的再好看也无关紧要，订餐失败就是从这次体验中收获的结果。

原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》用户体验设计法则应该怎么用？来看看这些应用原理！

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

设计思考及诠释方法

我们先要去了解用户是如何消费热点内容的，基于用户情景认知链路分析用户在事件消费的链路，可以分为三个重要节点：1.热点环境的感知；2.热点事件的理解；3.事件观点的产生。

结合用户的消费路径，我们将设计逻辑框架拆分为三个层级：

1.氛围背景层：分层呈现热度氛围，辅助用户感知热点环境；

2.信息内容层：精细化拼装管理，帮助用户理解热点事件；

3.功能互动层：轻互动玩法设计，激发用户参与抒发事件观点。

1. 热点环境感知：分层呈现热度氛围

从氛围表现层面，助力用户更快速的辨别事件的热度及重要程度。设计师结合搜索热点使用场景以及业务时效性配置诉求，归类了两种设计表现层次：1.日常热度氛围  2. 大事件热度氛围

1）第一个层次：日常热度氛围

主要应用于热点新闻场景，时效性要求高，同时事件热度也会在：“发酵—爆发—消退” 间实时变化，设计根据热度“强弱”程度需求，划分两档视觉展现阶梯，以自动化的方式展现，满足热度的实时变化需求，辅助用户感知当前事件热度。“低热氛围”弱标签设计用以展现上升/今日热点，“高热氛围”色彩背景通顶效果+上榜标签用以展现上榜热点。

如，“马斯克收购推特”，搜索热度持续上升，以第一阶梯-标签方式展示低热氛围；在 “马斯克收购推特” 的事件热度不断增长，成为热榜事件后，以第二阶梯 – 高热氛围自动匹配 ，通过背景及榜单标签的呈现，明确告知用户当前事件的火热程度。 

2）第二个层次：大事件热度氛围

主要应用于热点大事件或运营活动场景，个性化展现要求高，同时事件关注度及重要程度也不同，设计根据事件的关注度及重要程度划分为两档阶梯，以人工配置的方式展现，超强的运营氛围，可以让用户充分感知当前事件的重要程度，“A级氛围”头部叠加场景元素设计用以展现大事件，“S级氛围”整页沉浸式视觉设计用以展现重大事件。

如，冬奥会，重大事件，选用第二阶梯 S级氛围，打造超强的运营大事件会场认知。

前置突发大事件氛围设计

近几年我们不断的经历各类突发大事件，如：疫情/暴雨/名人逝世等等，每次突然发生的事件都让设计师措手不及，匆忙产出运营氛围设计方案紧急上线，保时效就很难保障质量，因此我们在想能不能总结事件类型提前储备设计，以备不时之需。

不同突发事件会牵动网友不同的情感情绪，比如河南暴雨，我们为受难同胞担心，为救助工作加油，为逝者哀悼；火箭发射成功，我们骄傲喝彩；名人结婚，我们送上温馨的祝福。不同事件带来不同的情感情绪，也要求设计师要用准确的视觉语言表达。

因此我们在前置设计时也充分考虑了事件情感因素，通过对近一年突发大事件的归类梳理，并推导不同细分场景下的用户情绪，通过情绪分类的方式，总结两种视觉设计表达形式：1.实景图合成效果满足严肃/庄重/权威场景情感需求；2.手绘效果满足积极/欢快/庆祝场景的情感需求。结合以上思路我们共储备6大类20个子分类场景的前置氛围+金刚位等运营物料设计，保障突发热点运营设计质效。

截至22年Q1，前置设计已在38个热点场景应用：

2. 热点事件理解：内容精细化拼装管理

为满足用户不同事件场景下的信息需求，设计结合百度搜索：主要内容区（主要需求满足）+ 延展内容区（延展需求满足）的综合聚合能力，通过组件分区布局+精细化规则管理，为热点场景内容的高效拼装打好体验基础。

1）主要内容区

主要内容区，能够帮助用户快速了解事件的主题、时间及主要内容，结合热点事件长期的需求沉淀，设计将主要内容区又细分为主题区域及内容区域。主题区域可承载拼装事件主题、事件倒计时、会场分发导航等主题类组件；内容区域可承载拼装图文/视频/直播等事件主体内容分发组件。通过不同区域内组件拼装规则的制定，业务可以快速选择所需组件进行页面组织拼装，达成分场景个性化满足用户主需求的目标。

如：元宵晚会，热点主要内容区 以“ 晚会直播时间倒计时+ 各卫视晚会分会场导航+图文内容 ” 组件支撑起重大晚会预热期的事件主需求满足。

因为有设计拼装规则，不同大事件活动，各场景内容可个性化满足需求，交互布局设计上又可兼顾横向一致性。

2）延展内容区

延展内容区，能够帮助用户了解事件相关知识信息或提供事件相关服务。业务可根据事件场景需求，选择多个延展内容模板与主要内容区进行拼装，搭建完整页面以呈现不同热点事件内容。

如：俄乌战争-战事场景，脉络卡帮助用户快速了解事件进展 ；冬奥会-赛事场景，数据卡帮助可视化呈现赛事进展；博鳌亚洲论坛-会议场景，百科卡帮助用户科普相关名词知识。

3. 事件观点产生-轻互动玩法强化参与感

通过氛围打造和内容组织，已经达成用户需求满足的目标，但到此截止，搜索结果的体验还是理智疏远单向的，搜索场景与用户、用户与用户间也无法产生对当前热点的讨论与态度表达。因此设计师对用户的互动行为认知习惯进行分析，并采取具体的设计策略逐步引导用户参与互动。

1）互动唤醒 – 吸引围观增强互动意愿

优化前的热搜结果页，用户的讨论内容都是隐藏在资讯落地页评论区内，需要点击进内容落地页内才能参与“围观”或“讨论”，除互动氛围已脱离当前场景外，也削弱了用户对此事件表态的参与积极性。

通过弹幕滚动+输入框组件组合外显的交互设计方式，将用户讨论外露，不仅丰富热点事件搜索场景的内容维度，同时基于从众心理，进一步刺激用户的参与欲望。弹幕结合事件类型配色来更好贴合热点事件整体环境氛围。

2）情绪抒发-轻互动玩法降低互动门槛

而投票表态+弹幕轻互动组合效果设计，能进一步降低用户交互心理门槛，让用户动一动手指就可以参与其中。在表态/投票抒发情感的同时也可以发弹幕聊聊对当前热点事件的看法，使用户互动情绪表达更充分。

3）惊喜反馈-强化视效打造记忆点

原有设计风格，无法在去世祭奠、颁发勋章等庄重严肃场景精准的表达视觉情感，无互动反馈状态仅有互动前后状态变化。

结合热点场景积极外放情绪及庄重内敛情绪，视觉主要从形/质两个维度进行优化升级，并增加互动反馈动效，同时运营可结合具体事件主题配置，综合提升互动惊喜效果，打造产品记忆点。

视觉层：通过更立体的形态和更丰富的层次质感，更精准的表达情感

动效反馈层：以主图形+辅助元素，通过符合场景氛围的动态效果设计，更充分的表达情感

运营主题配置：在日常反馈基础上，增加运营主题配置层级，为特定主题场景提供定制反馈效果

写在最后

通过热点环境感知分层呈现、内容组件合理布局拼装满足等设计手段，助力搜索平台以更高效丰富的内容展现形态应对全年3万+热点大事件运营。会场拼装呈现系统的应用场景也在不断扩展，如营销活动、品牌造节等。设计不会止步于此，我们将基于用户需求不断探索深耕，为用户呈现更快速、准确、全面、有温度的搜索热点体验。 

原文地址：百度MEUX（公众号）

作者：百度APP用户体验

转载请注明：学UI网》用设计诠释搜索热点

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

01 设计网页中遇到的问题

面对企业级中后台庞大且复杂的集合，会面临各类问题：

• 业务多，资源少

• 人力成本高

• 没有品牌性

• 体验差

官网设计中也有很多相似功能，面对繁多需求，设计者快速做出响应会产生重复劳动成本。只能做到满足功能，用户体验并不是很友好。

02 突破问题

通过总结之前的工作，发现很多设计内容有50%以上的重复率，我们要做的是将这50%重复率形成设计体系化，建立资源整合，搭建规范化官网模块，并把模块设计反推给产品，在提高设计效率的同时也减少产品工作，减少协同成本。

通过“收集需求——整合归纳——定义组件——代码搭建“ 的过程提升设计效率。       

• 第一步：整合资源，模块的确立

整合各个业务线资源，并根据业务系统进行分类：数据中台，技术中台，业务中台。面对这三大类别，目前官网需求量会达到几十个，而面这些繁多网站需求，首先要做的就是整合分类。

通过对对业务线归类，统计出高频15+个组件模块：

Banner、产品优势、产品特色、案例、信息内容、信息流程、合作方、联系我们、关于我们、使用流程、功能介绍、手机\电脑信息展示、合作方、地理地图、其他模块等…

• 第二步：模块梳理归类

并更具根据模块类别的复用率进行再次梳理，产出设计模版。模版根据设计形式、排版布局等方面进行进一步延展，复用率高的模块对应模板更丰富。

03 设计语言（理念）的建立与模块产出

• 设计风格建立

视觉体系上，B端产品不同于C端，设计更多为体验服务，色彩的丰富度相对较弱，单一。要突出b端设计，我们决定从精致性上为切入点，选定“轻拟态”风格，即突出设计的细节性又不会因为过度设计影响内容。并根据业务体系与设计风格，完善设计语言关键词提炼：科技、高效、简约。

          

• 字体与颜色规范

色彩能够起到视觉语言传达和信息承载作用。企业级产品延用了matrix 的配色体系，以蓝色调为主色，同时模块产出深浅色系，便于多方面选择。

• 设计布局

采用删格系统定义布局，根据首页和内页展示形式进行基础布局

         

• icon再创新

图标也进行三大层级划分，以应用于不同场景：

3D图标

3d质感图标。用于重要层级模块，数量控制4个以内。

玻璃球图标

磨砂玻璃风格已经广泛应用于ui产品中的很多地方，我们在磨砂玻璃基础上，创新新的icon风格“玻璃球”icon，该风格能更换的和轻质感设计融合在一起，用几何元素设计，通过拼接组合和系统icon设计，能够在短时间内快速产出立体icon，适用少于8个类别的模块icon。

轻拟态线性图标

3d线性图标适用于多场景模块，可大范围出现在页面中。

         

三维设计

banner模块分为3d三维风格和二维平面图片，根据不同业务线定义使用规则。如商业，公益相关产品，选定图片作为banner展示更能准确传达信息，而技术类官网用3d效果更能传递科技性。

同时定义多种banner布局：左文右图，文字居中，banner加搜索模块，图片banner等，

可根据需求自由选择。

几何化形的装饰元素

为了体现网页设计的“空间感” 网页设计中加入几何元素穿插，根据业务品牌语言 圆、三角、方定义辅助装饰元素。（圆-业务 ；方-技术 ；三角-数据圆、三角、方定义设计几何元素）

多样性变化 

为官网模块的产出依据业务线，在建立规范化组件的同时也需要考虑设计中的“区别性”业务线-营销产品，更多体现商业性质设计采用暗色系，而技术类官网更多体现科技感，加入3d元素。在同一模块的设计也加入背景白色/暗色和模块的亮色/暗色。

04 实际应用

目前我们已经产出50+模块，10个+网页模版，通过代码化，建立“云搭”这一网页生成工具，建立中台系统在生成平台，目前已经支持多个业务线。从设计产出模块到开发实现模块代码话再到产品拼接选择，整体过程节约了设计资源，为产品研发提效提供一站式解决方案。

后续我们将发布云搭二期文章，会为大家介绍设计师是如何从产品、交互思维，自主研发“云搭”这款工具的，敬请期待。

一、交互设计师能力模型图

二、交互岗专业能力描述

能力模型图中的每个点都可以很详细的写一篇专题文章，本文不做过多展开，只是抛砖引玉：向大家说明具体能力维度可提升落地的点有哪些。其中一些能力点我之前的文章中也有提及，以后有机会我会针对其他能力点单独梳理文章。

基础专业能力 

一直在强调交互设计师要尽可能前置到业务中，在设计工作的起始阶段对业务背景、业务目的、现阶段存在的问题、产品规划有一定程度的了解，为后续设计方案提供决策依据。

除了承接上游需求，许多设计师自主驱动的需求都建立在对业务的综合了解基础之上，如果仅是体验设计层面的优化，实践中很难获得上下游同事对其价值的支持和认可，想要落地就更加无从谈起了。

可以从以下几点逐步加强对各业务线、各终端产品的理解：

• 了解各个业务线或产品的阶段性或长远规划。
• 多与产品经理、运营等上游同事沟通，深入了解产品发展的历史缘由。
• 通过用研分析逐步了解不同产品的优势与不足。

需求分析主要是指与产品经理的协作配合，有时候也会直接与运营、销售或者客户对接。交互设计师介入一般有两种方式：

A. 业务方诉求明确，产品需求初稿规划完成，此时交互设计师介入，基于产品需求目的给出体验设计层面的建议。

B. 只明确了要实现的业务目标，产品需求尚未明确，需要交互设计师与产品经理或业务方一起沟通共创，相当于协助产品明确需求的过程。

在这个阶段，交互设计师需要注意以下几点：

• 了解需求的背景与目的，需求方案的合理性，针对需求不合理之处提出质疑并综合考虑给出建议方案。
• 需求分析与设计规划时要尽可能平衡业务诉求、用户体验、技术可行性与实现成本等因素。
• 查看需求文档虽然是基本功，但是对于新人而言这里容易踩的坑比较多。不同产品经理描述风格与方式不同，也难免有一些规则遗漏，所以查看时若存在问题及时与产品经理沟通。
• 经过需求分析，交互设计师可以推导出整体的设计目标与设计策略。

设计规范是基于设计语言或设计指南而来的，不同公司产品会有不同的定义。根据业务复杂程度和产品特性，一些公司会梳理自己的设计规范，交互设计师重点关注交互层面的规范，也需要对视觉规范有一定了解。

设计组件是以设计规范为指导原则，为提升产研协作和开发效率而设定的UI组件库。这里需要注意：

• 设计组件一般分为基础组件和业务组件，基础组件类似Ant Design；业务组件则是依据公司具体产品使用场景决定的，比如电商类应用：产品列表的产品信息、直播模块等频繁被调用的、由多个基础组件组合而成的内容。
• 由于不同终端交互设置和操作方式存在差异，所以可能会有针对移动端、Pad端、Web端、TV端等多终端设计组件。

大家可以参考iOS人机交互指南与谷歌的MD系统级设计规范；目前市场上有许多开源的设计基础组件，比如Ant design、滴滴、腾讯、京东、有赞、饿了么等。

设计方案具象化的呈现依靠“规范的交互文档”，输出交互文档注意以下几点：

• 了解并绘制信息结构图

  交互设计师绘制的信息结构图通常用于“信息层级的梳理”。比如一个网站或APP的导航划分与层级，可以通过信息结构图直观的呈现，也可以更直观的判断与其他内容的关联关系，确认是否符合用户的心理模型。可参考我之前写过的文章：你对信息架构图了解多少？

• 了解并绘制任务流程图

  对于逻辑判断比较复杂的项目，比如涉及多角色、多状态、多任务流、多终端时，任务流程图有助于设计师及相关查阅的人更快更清晰的了解需求。可参考我之前写过的有关流程图的文章：案例分析：绘制流程图需要注意哪些事项？

• 绘制交互原型

  关于如何绘制规范的原型图，几年前我写过一篇相关文章，里面提到的基础原则仍然适用：如何设计规范的原型图？

• 交互说明的书写要求

  关于如何将交互说明尽可能写的完备和细致，可以参考我之前写的两篇文章：

  宏观角度：原型图的交互说明该怎么写？

  微观角度：原型图的交互说明该怎么写

这部分内容涉及到交互层面的一些“参考规则”，之所以叫参考规则是因为不是必须遵守，可能针对不同业务和产品会做适当补充或删减。比如页面打开方式研究、尼尔森可用性原则等。可以通过阅读一些专业书籍掌握理论知识，然后在实践项目中应用总结。

交互设计师在日常工作流程中，会参与不同类型的会议，比如需求讨论会、需求评审会、设计评审会（交互与视觉内评与外评）、测试用例评审会、开发问题讨论会等。有的会议交互设计师作为参与方，有的作为主导方，因此需要对会议节奏和效率综合把控。

对于新人或初级交互，可以选择性地参加其他交互同事组织的以上相关会议，了解和熟悉如何高效开会达成会议目的。

在日常项目流程中，需求评审过后交互设计排期需要首先给到，下游的视觉设计师、前端研发、甚至包括后端研发、以及测试工程师都需要根据交互文档给出各自更加精确的排期。

因此评估交互排期在项目流转过程中非常重要，如果评估排期少了无法按时交付，可能会造成下游同事时间不够，甚至导致项目延期；如果评估排期多了，对于有上线时间要求的项目，总体时间可能又会不够。

所以交互设计师只要做到根据自己手头时间客观评估即可。这里对于新手或初级交互而言，有两点注意事项：

• 承接的项目类型由简单到复杂过渡。
• 交互排期需要包括“需求沟通时间、设计方案输出时间、评审时间、评审后调整时间等”，刚开始排期可以给自己多预留1-2天。

对于一些项目周期紧张或者频繁变更，导致设计输出时间增加的需求属于特殊情况，需要另当别论。

关于交互验收的流程和验收的具体内容，我之前有梳理成一篇文章可供参考：如何做好交互验收？

既需要熟练使用设计相关的软件工具，比如交互常用的Axure、Figma、思维导图工具等；也需要跟上“软件出新的步伐”，比如Figma这种云端多人协作的设计工具诞生之后，过往使用Axure的交互设计师和使用Sketch的视觉设计师，都对它青睐有加。

进阶专业能力

• 查阅公司内部已沉淀积累的用研资料。
• 掌握并应用常用的用研方法，如“体验走查、竞品分析、AB测试、可用性测试、问卷调研、用户访谈等”。

• 有些公司可能没有资源推进用户研究，但至少你需要先掌握相关理论知识，学到的有价值的东西在未来总会用到的；
• 还有一些公司有专门的用研部门，在用研方法和工具使用方面会更加专业，这种情况设计师与用户研究员协作配合会更加高效。

• 在日常工作流程中具备数据意识：无论是需求前期的分析阶段，还是设计开始实施之前，亦或是需求上线后的效果复盘，数据都作为有力的客观佐证，为你的设计决策提供依据。
• 培养数据分析能力：实际项目的数据分析过程可能会非常复杂，涉及到不同类型的数据指标、数据分析方法的应用、数据查看与配置工具、复杂的业务因素等等。需要你对业务和数据都比较了解，是一种综合能力的体现，需要日积月累的打磨。

• 逻辑思维：分析和拆解复杂问题的能力。
• 产品思维：多维度考虑用户需求与业务诉求。
• 数据思维：掌握数据的收集、分析和应用。
• 系统思维：逐步学会结构化、体系化地看待问题。

通用能力

个人影响力

• 设计分享

  不限于具体形式，包括日常项目总结、软件工具使用、设计方法论应用等。对内分享促进部门内学习提升；对外通过输出专业文章等方式分享，沉淀积累的同时，也能帮助有需要的人，顺带还能结交一些靠谱的朋友，不亦乐乎！

• 设计指导

  当你已经是有几年工作经验的中高阶设计师，带教新人是一种传承责任，我们都是从初出茅庐一步步经历过来的，非常理解眼前这个行业小白有多么渴望在正确的指引下持续努力。多给予别人帮助，毕竟予人玫瑰，手留余香嘛！

• 设计创新

  许多人一听这两个字就觉得有点可笑，该做的事情还没做好呢就谈创新？其实创新在我理解更多是一种“微创新”，可能会体现在你的每一次需求洞察中、设计方案的细节中，不要小看微创新，点滴积累之后，你会比别人更有想法和竞争力。

写在最后：

设计师不能总是输出，更要持续输入才会有源源不断的创造力！想要系统地学习专业知识，性价比最高、成本最低、也最靠谱的方式是系统性地“阅读专业书”。后面我会写一个系列的专栏文章推荐“设计师必读的专业书籍”。

原文地址：人人都是产品经理

作者：Viksea

转载请注明：学UI网？交互设计师专业能力体系

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

1、错开对齐

如果你对自己的排版不是太自信，又担心排版太死板，错开展示是一个很容易上手的技巧。只需要把界面稍微错开一下，展示效果就会好很多。下面就是一些Behance大佬用这种手法做的展示效果，可以从背景，作品摆放比例，留白，间距和错开幅度上进行研究学习。

2、增加层次感

为了增加展示细节，丰富层次是一个非常好用的展示技巧。如果你的作品界面在视觉上比较寡淡，那么把一些界面元素提取出来，利用投影加多层次感，视觉效果上就可以很快得到提升。这个技巧在执行上也比较简单，关键要注意投影的大小和颜色，千万别做的太重。

3、出界设计

有时候，一些界面元素确实视觉效果好的元素太少，比如很多B端表格的界面，用这种方法可以增加画面中的图片率，将本来隐藏在界面外的图片进行出界展示，更多利用图片提升画面的设计感。

甚至可以将banner图中的元素进行出界，增加设计感。

4、倾斜设计

倾斜设计，也是一个提升设计感的常用技巧。先在正视角度下摆好，利用技巧1错开一下界面，然后整体旋转一个角度就能很好的提升画面表现力，增加设计感。但要注意用这个方法的时候，要保证界面元素的清晰度，不要出现锯齿。

倾斜后也可以适当增加一些圆点点缀

把一些UI 组件斜角后，结合层次感设计技巧

倾斜设计+出界+底部方块装饰

倾斜设计后，增加一些半透明的装饰层次设计

5、3D厚度设计

现在3D设计非常流行，把自己做的界面增加一定的厚度然后结合倾斜设计，也能快速提升界面的设计感。

但因带有倾斜，很容易出现锯齿。我有一个常用的小技巧是做的时候可以把图做大一倍，然后再缩小放到作品集中，就能提升清晰度。例如我要做一份1920×1080的PPT，那么我就会先做一个2x 尺寸，也就是3840×2160然后再缩小，会比你直接做1x尺寸的图要清晰很多。

把界面增加3D厚度后，再稍微加一些比较轻量的3D装饰元素，常用的有小球、方块等3D元素能让画面效果更好。

6、增加底图设计

这个技巧要注意让界面与背景图自然融合，关键在于需要找到一张非常好的图片，考验选图的能力，存在一定的风险。如果你对这种包装方式不大放心的话，建议你谨慎使用。

比如这张图，细节点在于界面左边浅色配上底图中左边的白，右边深色界面搭配右边深色的山体颜色，看起来就很和谐。

下面这张图用了一个跟界面中配图同一个调性的图片，为了防止干扰界面，还加了一点高斯模糊，效果也非常不错。

这张图的底图用了一些比较具有设计感的图形，整体比较简洁高级

常用的一些底图元素还有圆形，点等等

用一些插画元素作为底图也是非常不错的

7、套用样机来展示

前面提到的很多实用技巧，能看到都是不需要用样机的，我自己更倾向于不用手机模型来展示，即使要用也是比较轻量的那种。有看过不少同学的作品集，其中的样机用的太过了，不知道的还以为你成了卖手机的作品集。这也是我放到最后一条来说的原因，我更推荐你在不使用样机的情况下把自己的作品展示做好。

当然，如果用样机也没什么大问题，原则还是为作品服务的，保证清晰度，不抢作品本身的视觉就OK。用上了样机，它就成了你作品的一部分，要保证样机是最新的，且质量要高。

关于样机的话，彩云之前也帮大家找了一些非常高质量的样机资源，需要的话可以点击下面的文章看看内容，并找到获取方式下载使用。

《2021年全网最新品质最好的样机资源被我找到了，免费分享给你！》

《2021年全网最好的样机资源都在这里，收藏这一篇就够了！》

原文地址：彩云译设计（公众号）

作者：彩云Sky

转载请注明：学UI网》Behance 首页推荐的作品集为什么这么高级？为你拆解其中7个秘密

工具

工具：AI(Adobe illustrator)

适合：零基础入门

扁平风的基础思维准备：几何形组合造型

几何形一直被视作是抽象造型的基础元素，通过几何形有意识的相互叠加组合，就可以使得这个造型呈现出可识别的对象，比如我们在这个教程里所表现的那样：用几何形画水果。

比起细腻丰富的传统画法，极简的几何平涂造型所创作的水果，看起来有着别样的生动的特质，摆脱了对水果表面质感的依赖，转向对形色的探索，是扁平插画的基础思维。

常用的几何形是：圆、方、三角，在这个教程里，我们就运用矢量软件AI(Adobe illustrator)进行创作，接下就开始来打造我们的《鲜果派对》海报吧。

用方形塑造苹果基础形

常见苹果的画法可以是圆形起步，也可以是从方形开始。

STEP 01

打开AI，新建一个文档，运用粉色画出一个正方形，这就是苹果的起始形。起始形非常重要，它决定了接下这个苹果的形状走向。

然后，我们把这个正方形改变为梯形，改变的方法有很多种，这里我们利用变形工具，进入【效果>变形>弧形】，在变形工具的面板里，将垂直这个滑块调整为-15%。

STEP 02

在选中上一步所变形成为的梯形的基础上，进入到【对象>扩展外观】对它做一次扩展外观。

扩展外观就是让这个形状真正变为矢量梯形的路径，如果没有做这一步，这个形状看似是梯形，其实还是原来正方形的矢量路径。分辨真假梯形也很简单，只要选择这个形状，看到路径的走向仍然是正方形，那就是假性梯形，这就需要为它做一次扩展外观。

STEP 03

然后再选中这个梯形的基础上，单击左边的工具栏里的【直接选择工具】，就会看到四个角内分别带有四个很小的圆点（仔细看是一个同心圆），拖动它，你会发现它会控制这个角，将它从锐利的角变为圆弧。

根据圆弧离形状中心的距离多少，弧度也会相应发生变化。

好了，苹果的基础形就完成啦~

细节的魔力

我们开始为苹果增加叶片，叶片的画法首先也是要从基础几何形开始慢慢演变而成。我们在叶片这个部分提供的基础几何形同样是正方形。

STEP 04

用蓝紫色画出一个正方形，然后再复制一个正方形，将这个复制的正方形旋转45°，变为菱形。再复制第一个正方形。于是我们得到了两个正方形和一个菱形，将它们像下图所示拼起来。

然后再选中这个组合造型，进入到【窗口>路径查找器】，在路径查找器的面板中运用【联集】将它们拼合成一个独立的封闭的路径。

STEP 05

然后再利用控制形状角度的小圆点，就像STEP 03那样分别选中下方以及左右两边的圆点，将角转为弧形。一片叶子就这样制作而成。

问：感觉似乎这样的方式比较麻烦，为什么不直接用钢笔工具画呢？

这也是我在这一风格的画法中想要重点强调的：尽量避免使用钢笔工具，而用几何形进行转化，是保持扁平风格中几何感和抽象感的诀窍。

因为手动画出的路径毕竟不会特别严谨，这时就难免让扁平风格失去了它本身的风格特点，而这时如果没有较强的结构感，整个画面就会看起来”平淡“甚至”无趣“。

其实叶片的造型也可以探索出其他的几何方式进行组合构造，本文只表现一种方法。其他的方法，可以留给你下去尝试。

STEP 06

这时，把这个叶片的形状的混合模式改为“正片叠底”，利用叠加的视觉效果增加画面的几何感和时尚感，这是在我们过去写过的文章《超级可爱！插画萌新必学的PS极简马克笔简笔画：盆栽篇》以及相关系列文章也都运用过类似的技法。

STEP 07

最后，用线条增加最后的细节。这里所用的线条是较细的3px的黑色线条。这里的线条粗细要根据形状本身的尺寸大小比例来确定。总之，对细节的描绘可以克制一些，不要太过复杂。

利用线形的组合以及形状叠加的视觉效果，扁平风的简约苹果元素就画好了。

准备好元素，完成海报

STEP 08

蓝莓的画法从矩形起步，对矩形的组合以及成形的演变方法，是我们重点要训练的对象。中间的步骤我们已在文章前面详细叙述过了，这里就不再重复。可以继续用这个方法演练下去。

STEP 09

画草莓的时候，运用了两个梯形进行组合。利用叶片造型进行叠加，也能增加图形的魅力。

STEP 10

我们把其他的水果元素也画好，我这里准备了一些比较可爱的樱桃、西瓜之类，你也可以画点菠萝、芒果之类，注意要把握每一个水果的基础形特点，然后在细节的部分加以强调。

把每个水果元素放到海报的设计中时，要考虑的还有对水果元素之间的间隙的疏密均匀程度，元素可以较大，有些元素甚至可以渗出到海报之外，这样会让视觉效果更为延伸。

如果经过路边有家鲜果店，挂上这样一张海报，应该效果是不错的吧~ 先自我陶醉一波~

最后，献上我的同类作品集小站

当然，如果你想要临摹或者参考更多，可以通过访问下面这个网站，我在这里会放入更多类似的作品，继续保持对这类风格的探索。

原文地址：飞屋设计

作者：飞屋睿UIdesign

转载请注明：学UI网》无需手绘的AI矢量扁平几何风基础插画：《鲜果派对》海报