设计趋势

由于全球疫情的影响，2023年的设计趋势依旧延续自2022年，没有太大的变化。但是疫情对于设计影响是潜移默化的，深入了每一个领域。任何一个新事物的出现，都有可能对我们的行业造成巨大的冲击。我们能做的是，在趋势刚刚出现的时候，寻找到它，赶在趋势到来之前思考未来的方向，在变化降临之前先拥抱变化

新拟态 icon

3D图标的应用，以2020年苹果发布的macOS Big Sur系统中应用3D效果图标为节点，将又要引领一波设计趋势。新拟态风格的3D图标与之前的强拟物风格不同，它在保留了主体元素的基础上去除了大量繁琐的的细节，整体更加轻量化，降低了视觉负重

3D 运营

目前各大厂已经开始尝试在产品中加入3D元素，主要以主视觉3D化、IP形象3D化为主，通过更加立体的视觉形象突破传统的视觉冲击力加深用户对品牌印象，给用户营造一种时刻建立品牌认知的习惯，加深用户对品牌的记忆点

玻璃拟物化

这是UI设计的最新趋势，它主要基于一种叫做背景模糊的效果，它基本上创造了元素的“穿透玻璃”的效果。它先是在WindowsVista中被引入，后来又在iOS7中出现，在这里停留了一段时间后以全新的形式出现！

总的来说毛玻璃拟物化在界面设计中适当的使用是可以提升界面的：通透性、层次感、品质感、用户的惊喜感、更好的表达用户当前的位置。玻璃拟物化的在UI中应用可以大致分为3类，分别是：卡片、图标、背景

方案目录

根据用户体验报告，我对小程序进行了大范围的体验优化。其中包含了设计语言、界面框架、以及全链路场景。所有的改变都是为了提升品牌形象，给用户营造更加良好的体验环境。我们希望作为产品与用户的纽带，通过设计体验的改进有效建立品牌与用户的深度沟通。

本次体验优化包含专家走查、竞品分析、优化方案以及规范输出4大部分。

专家走查

1.背景调查&需求分析

为了打造领先行业的线上服务平台，为用户提供安全、便捷、全面的移动化服务，随着互联网服务业务的发展和产品需求的迭代，用户对产品的体验升级的需求越来越迫切，同时基于移民业务的设计经验积累，我们发起了对小程序的新一轮优化迭代和体验升级

作为引流工具，通过测评功能进行引流，将数据导入后台系统，便于分类管理，同时也会同步进度到小程序中，让用户在产品上了解需要关注的政策，获取优惠券以及查询预定服务进度，减少客服的重复工作

2.模型分析&搭建

用户层次模型（AARRR）

用户增长不仅仅只是用户数量的增加，其中应该包括新用户的拉新、促活和老用户的留存、转化等，完成这一系列才是有价值的用户增长，我们以用户为中心，着眼于转化率的增长模型2A3R为基础，它是用户生命周期的模型，同时也是用户层次模型：先拉新，其次促活，接着提高留存，然后获取收入，最后实现自转播。

通过短期的活动运营对用户用户进行注册转化，从而达到长期产品增长目标

用户刚刚进入产品时，对产品还缺乏感知，那么简洁明了的引导和简短流畅的产品流程就十分重要了；从产品启动页开始，到用户注册流程，使用流程，我们都需要尽可能缩短用户操作的步骤

用户的生命周期是引入、成长、成熟、休眠和流失

把产品真正做好，满足用户的需求，打造用户口碑，并用产品手段适当引导用户分享，实现产品的自传播

设计背景

对于设计师而言，由于组织内缺乏一个公认的评价体系，设计师并不清楚自家产品体验到底处于什么水准，提出的优化建议与产品目标不一致而“流产”，因此组织内需要设定一个公认的体验衡量标准和描述体验优劣的方式，帮助设计师和其他角色更客观地理解和描述体验

设计定义

随着业务环境越来越复杂，参与其中的产品经理/设计师/开发也非常多样，容易导致体验质量参差不齐。为了提高产品体验在行业中的水准，增强设计驱动商业价值的主动性，在于复杂的业务环境中建立评估和推进设计质量提升的度量体系，提出并初步实践了QMD（Quality,Metrics,Driven）设计品质驱动模型，QMD模型包括三个层面：体验提升目标（Quality）、度量标准（Metrics）和驱动方式（Driven）。

对于产品而言，QMD模型在产品设计流程末端通过客观的度量指标，对设计品质进行管控约束。对于组织而言，其价值在于增强各类角色对当前阶段优秀产品体验的清晰认知，提升设计师在组织内的话语权和推进问题的主动性。

制定目标和评估规则

面对错综复杂的业务环境，需要对各业务进行横向整体性评估，同时推进各业务问题点优化。因此，首先在横向层面从几个主要业务中提取共性评价维度，根据当前品质提升目标拆分评价指标，通过专家交叉评估方式，周期性评价各业务体验质量分数和问题点。在纵向层面，之后与业务体验考核指标进行匹配，建立体验需求池并驱动设计师主动推进优化，从而深度嵌入产品研发流程中。

尝试将QMD设计品质驱动模型嵌入产品设计流程中，在组织内建立共同语言。在Quality层面需要明确当下产品体验质量提升的目标，根据目标拆解出度量维度和指标（Metrics），随后在组织内建立高效评估机制与流程（Driven），实现体验质量可观测，体验问题可挖掘，体验优化可推动。

在评估内容上，为了实现对所有业务的整体性评估，我们根据业务特点抽象出主要的页面和流程作为评估结构，随后业务线根据结构提供评估内容。业务具有信息聚合、沟通的特点，因此提炼出信息结构和功能流程两大维度，核心内容包括详情页结构、列表页结构、评估流程、客服/电话等，实现对业务内一致性和美观度的评估。同时各页面梳理各自主要功能流程，从统一和美观这两个角度进行评估

最终将内部质量分与外部对比分进行综合计算，我们采用各业务线负责专家主观赋权法，对内部结构质量和内容质量进行权重分配，使用乘以系数的方式将内外评分进行联结，系数的设置上用减分方式反向刺激缩小业务与竞品的差距，用加分方式正向激励排名靠前业务，通过分数刺激业务优化体验的动机。

制定评估和迭代驱动机制

完成目标和规则搭建只是第一步，在驱动层面（Driven）需要考虑目标和规则如何与设计组织环境和产品研发流程相结合，推进评估执行和优化点落地，并且让评估机制深入到设计师个人工作的习惯和思考方式中

借用芒特·莱特尔图中（Mount-Reiter diagram）对机制构成的理解，一个好的机制首先是因地制宜的，有高效的信息沟通渠道和清晰的规则，参与者可以很快理解规则并达成共识，随后个体产生主动参与的行为并形成集体行为，参与过程中消耗最少的人力和时间资源，最终导向结果产出，并在多次迭代中与变化的环境达成契合，从而在环境中建立长期稳固的机制。

在设计组织内实现评估机制的良好运行，需要建立高效的沟通渠道，及时传达规则和目标，促进参与者达成共识；需要建立客观的评估方式，尽量避免影响专家客观评价的个人、设备或环境因素；同时需要提供低能源损耗和轻量的评估流程和工具，减少评估过程对组织人力和产品研发效率的损耗；并且需要考虑机制对参与者个人或集体参与动机的影响，是否可以激励主动参与意识和行为；最后，需要及时跟进优化点落地可行性和推进效率，从而反观评估机制和规则设置的效果，洞察与业务环境和产品特点不匹配之处，便于持续优化机制。

在评估工具上采用在线协作评估+问卷统计分数方式，提高评估、问题收集和分数统计效率，同时提高专家之间的沟通和协作效率，即使在远程环境下也可以实现远程协同评估

方向与探索

框架重构

对首页进行分层布局，明确信息层级，聚焦内容，提高核心模块触达率

视觉升级

提升基础色彩的映射。统一图标样式，优化核心入口的视觉表现

基础体验

提升通用组件覆盖率，加强用户对产品的信赖感及辨识度

竞品分析

定义

分析和我们产品定位相似，目标用户人群重合的产品，得出一系列有利于我们产品优化迭代的建议

作用

• 明确目标

做产品设计时，需要通过分析竞争对手的产品，取长补短，特别是要关注产品的功能与用户的体验设计方面

• 寻找差异化

事实上，竞品分析已经不再局限于一种工具方法。如何进行对比分析，如何批判性的比较以及从差异中获取价值，更是一种思维模式。当对于相同需求时，检查其他设计师对相同需求的解决方案必然会对你有所启发，有利于你从中获取灵感来优化产品

• 决策支持

做产品改版时，需要通过分析竞品的功能和体验，为改版方案提供理论依据，并制定竞争策略

• 快速调整

比如政策变化、新技术的出现、颠覆性的替代品出现，可以快速的调整过来，以保持自身产品在市场的稳定性或者快速提升市场占有率

竞品分析的流程

1.明确前提

产品阶段

成长期

确定初步方向，产品上线后需要全面提升。主要关注内容：产品框架、核心业务流程、交互&视觉等维度。

分析目标

产品架构初步建立，需要对视觉进行优化，提升产品的品质感，达到新中产用户人群的审美要求

2.竞品挑选

竞品分类

直接竞品

跟产品直接竞争，使用场景和用户群体一致，目标用户的痛点或问题相同的产品，目前从产品方收集的信息是没有

间接竞品

产品形态不同，市场目标客户群体类似，在功能需求上互补，间接竞品分为替代品和参考品

替代品

解决问题不同，解决方案相同

产品有金吉列、去海外、美移、海那边、有绿卡

参考品

解决问题不同，解决方案不同

产品有携程旅行、飞猪旅行、途牛旅行

3.定义范围

设计侧分析

视觉设计又分界面视觉设计、运营视觉设计，这里主要指界面视觉设计。界面视觉设计：以产品功能和服务设计为主，通过对目标用户、行业的了解，推导出符合自己产品定位、符合用户审美的视觉风格。通过对业务目标、用户目标的理解，运用色彩、排版、交互、心理学等知识为用户提供清晰易懂、高效、深刻的产品体验

分析目的

主要目的是设计参照和开拓思路，比如，通过了解行业内的设计风格，避免跑偏，同时尝试建立差异化设计。比如，做跨境留学签证产品时，多查看竞品设计，了解不同产品功能和页面布局

对页面内图形元素分析前，可以先分析品牌logo的特点，从形和色两个维度进行分析，后续分析具体内容（图标、卡片圆角、标签、按钮等），图形决定着整个产品的调性，能直接将产品蕴含的情感文化通过视觉表现传达给用户，在App界面中更多体现在图标和按钮上

1.形（图形元素）

对页面内图形元素分析前，可以先分析品牌logo的特点，从形和色两个维度进行分析，后续分析具体内容（图标、卡片圆角、标签、按钮等），图形决定着整个产品的调性，能直接将产品蕴含的情感文化通过视觉表现传达给用户，在App界面中更多体现在图标和按钮上

通过分析图形元素，logo以图形居多，品类区容器形状相同居多，底部导航突出区分度，注意品牌延展

品牌强化

成功的产品都会带给用户记忆点，品牌的传达是贯穿整个产品，潜移默化的给用户不断传达产品品牌，树立品牌形象，品牌设计的目的就是为了利用图形化的元素，去加强用户的记忆，而随着产品发展成熟，为了可以非常有效的去强化品牌，形成产品间的差异性，设计在表现层可以利用不同的形式去强化品牌

参考京东金融我们可以把品牌图形化，设计成纹理融入界面的背景、卡片和Banner中，形成贯穿整个界面的品牌语言，提升品牌的感知力

除此之外也可以利用品牌元素进行一定的延展设计，像Logo图形可以用到很多的图标和默认图上，或者也可以使用品牌形象，在一些界面的提示信息、内容引导、以及一些插画绘制上，都可以进行有效的融入，进一步达到品牌延展的功能

2.色（色彩体系）

色彩分析包括：色彩情绪、色彩规范、色彩层级等，主要分析logo、瓷片区颜色、Tab图标和个人中心卡片和图标

3.字（字体体系）

通过截图测量字号、字号层级、行高参考相关参数，分析竞品界面信息层级，为提升阅读体验做准备

通过分析各竞品字号和层级，参考字号范围，根据自身产品进行相应调整，达到用户视觉体验的最佳参数

4.构（页面布局）

测量栅格，研究界面元素之间的亲疏关系，板块之间的划分方式，细节处理手法，分析排版方式，拆解页面布局

通过分析得出，一个页面多遵循六三一原则，主色占比60%，辅助色30%，点缀色10%，整体的颜色风格、页面色相、饱和度、明度保持统一，logo背景单色反白，品类区以颜色区分，容器形状相同，配色可以渐变投影，顶部导航白色为主，品牌色主要是底部导航体现

少用禁区色，色板下三角区域的颜色少用，很容易用脏，右上角变成高饱和度的色值，会使用整体颜色通透很多

多使用颜色呼应，用好叠加模式，尝试不同渐变，例如同色系渐变、邻近色渐变和撞色渐变，提高页面质感

推荐板块

产品首页需要作为流量入口，同时为了降低跳出率，也需要用户关心的文章攻略和案例分析板块，通过优质的内容可以提高新用户的转化率

5.质（质感风格）

产品给人带来质感，这与界面内的设计细节息息相关，通过分析竞品在界面内哪些模块质感比较强，也能得知这部分内容在整个产品中的重要程度。一般常见会增强质感的有：品类区图标、重要标签/按钮、首页运营模块、个人中心、会员中心等

在页面的内容卡片也保持了圆润亲和的设计，整体设计语言比较统一并且采用品牌色来保持品牌融入，在人像处理上采用破形设计，比较有设计感

优化方案

1.视觉语言焕新

随着产品服务升级，在越来越多的丰富内容呈现给用户的同时，如何平衡产品整体视觉感知，提升设计的聚焦度和包容性是本次视觉设计的要点。 本次视觉设计通过采用产品新视觉语言“共赢”语言（包容万物，成长共赢理念），打造更具有包容性的视觉体验。 新的视觉设计以圆为核心要素，核心组件如图标、卡片、以及按钮均以圆形为基础进行统一设计。新的设计不仅包容性更强，复用场景丰富，而且各场景间更容易达成统一性；同时设计师还延续了 “圆”的视觉符号，对首页金刚位图标和工具图标进行了设计延展重塑。

卡片容器设计

我们希望用户更专注于内容，因此对承载内容的容器——信息卡片的样式和内容布局进行了结构化设计，使之可以较好地聚合各类信息，更加有利于信息流内容的清晰展现。 为使整体视觉风格轻量化，背景底色采用了带有品牌倾向的灰色以及品牌性的圆角设计，在达到明确边界的同时，使整个卡片与背景有即清晰又相对统一的视觉效果。

产品内容整合

为了整合信息内容，提升阅读效率和用户操作体验，将卡片式设计纳入自己的容器设计语言，合理利用卡片式设计能更好地呈现功能和处理信息集合、提升页面美观度、操作体验，增加界面空间利用率以及响应适配多端设备

结合用户的认知，对智汇银河现有各项工具做聚类整合，按照身份服务、商务服务和我的功能进行分类，使之更符合用户的实际使用习惯；其次，对服务的名称和图标设计进行规范化优化，使之更加清晰易懂，同时也为后续小程序承接更多功能打下良好基础。

品牌风格优化

结合新中产的用户群体和流行视觉风格，将原先的扁平风格改为磨砂玻璃渐变风格，使用背景模糊制作出磨砂玻璃的效果并且漂浮在空间中，通过前后关系表现层次感，有助于用户建立界面的层次结构和深度，提升视觉效果

用户体验升级

用户的体验感对于一个产品来说，是至关重要的。一个好的产品能够充分照顾到用户的感受，从而拥有大批的忠实用户，表现层是用户感知最明显的一个维度，通过对设计细节和整体风格的优化，提升用户体验

规范输出

设计规范是针对特定产品所制定出来的一整套产品标准，包括流程标准，技术标准，设计规则等等。通过这套标准，能减少错误发生率并提高设计质量和输出稳定性。

原子化设计

设计需求的多变性体现在分子的组合方式各不相同，但其共用特征是最小元素（原子）基本相同，因此统一最小元素，定义其组合的规则，即可从源头把控设计的一致性。同时通过特定的组合原则，设计师结合各项目需求根据组合和应用原则（布局、文字等）进行设计，从而实现其灵活性

基础规范

为了应对公司快速迭代开拓市场和一部分购买者的定制化需求，与此同时还要保障产品间的用户体验一致性，需要建立基础规范，包括文字规范、颜色体系、文案规范、布局系统等

布局系统

就像拼乐高一样，UI Library设计组件库提供了一个个乐高方块，「布局」规范就是拼装设计组件乐高的说明书，指导设计师和产品经理如何拼装组合，应该遵循哪些规则，设计执行中有哪些注意要点。 一个页面如何构成，设计和工程实现两个视角下给出的答案是不同的，所以我们引入了盒子模型，让设计师带着工程实现的思维去考虑页面布局，设计侧和工程侧对页面一致性的解读，能够有效降低设计到实现的转化成本，提高开发效率。

图标规范

界面引入图标后，降低了用户的认知负荷，帮助用户更快导航，提高用户使用产品的效率。另外一方面、设计精致风格统一的图标提高界面的美观度的同时，也为用户带来了连贯一致的使用体验，由于不同形状(三角形，圆形、长方形、正方形)具有不同的视觉大小，仅仅规范图标的大小是不够的，通常我们会设计一套图标keyline，来保证不同的图标具有相同的视觉大小，除此之外，还包括圆角、端点、线宽、倾斜角度等其他规范

文案规范

空格是我们平时接触最多的一种字符了，常使用与内容分割中，但是在排版中有很多场景也会用到空格。 例如英文排版中的点号后面需要加空格，不然会导致语句之间过于拥挤，而中英文结合的时候，之间也是需要空格进行分割处理，除此之外中文和数字之间也是如此