大家平时多的界面应该都是常规类型的居多，应该很少会接触到游戏类型的界面设计吧？哈哈。今天就给大家分享一个游戏类型的排行榜界面，看看是怎么做。和咱平时的又有什么不同呢？

先来看看效果：

确实和普通页面还是有很大差异的哈，可以发现所有的模块更风格化，也蕴含了光影细节在里面。

这样一张界面细节很多，我们今天主要讲讲1、2、3名的头像框怎么做出等级差异。

1. 明确风格

首先我们就要先明确游戏风格的界面和普通界面有什么不同，特点有哪些，造型、光影、质感等等。

明确了才能动手去执行。

2. 等级差异

大家平时应该也会遇到很多排行类的需求，需要做出等级感。那是如果如何表现等级差异的呢？我主要是从以下三个点去推进，分享给大家：

2.1颜色

·主色：

首先就是三个等级的颜色差异

比如第一名最尊贵，我们就可以选用和背景色对比最强烈的金色去表现。

金色本身也带有尊贵感。

第二名和第三名的颜色就可以选用背景的类似色或者同类色比如紫色和蓝色，让它们在视觉上天然的弱化下去一个等级。

·微渐变：

采用微渐变的形式，让颜色更丰富，不会显得很平，同时靠颜色的变化也能表现出轻微的质感。

2.2复杂度

第二点就是复杂度了。

这个很好理解，就是越重要的，在造型上就会有越多的细节和层次。第一名层次细节非常丰富，第三名就简简单单的，从造型上表现出等级差异感。

2.3大小

比较常规的一个方法就是大小差异了，第一名最大，二三名一样大就可以了。

3.细节精致度

明白了原理，怎么把细节做到位也是很重要的，我们拿第一名框的造型举例，说说是怎么做出复杂度这么高的造型的。

3.1 重复

先有一个基础圆，然后我们重复几个。这一步很简单，很多同学都会做。但也有很多同学到这就做不下去了。重点要学会后面怎么做。

3.2 圆的对比

全是相同的圆就会显得很重复，没有细节。我们可以调整圆线段的不同粗细、形式去增加细节。

把他们组合到一起看看。

有点那味了，有些同学做到这一步就不知道该怎么继续了，可能会继续加圆，这肯定是不行的。

3.3 丰富基础形

如果我们继续加圆圈可能又会变得重复了，这是因为我们的基础形单一，所以我们要加入别的基础性在画面里去。

为了方便理解，我们加入一个比较直观的形状正方形看看：

正方形组合又组成很多三角形，造型一下就丰富了很多！所以基础形状的多样性是我们丰富造型很重要的一个点哦。

本案例就加入了其它相对更复杂一些的基础形，效果会更细腻一些，但道理是相同的。

4. 加入点缀和光影

因为是游戏风格的，加上一点外发光更有感觉，再加上一些星星点缀，可以进一步提升丰富度。

看下页面效果：

等级差异明显，造型精致，整体还是比较满意的。

01 颜色掉层次了

很多时候，我们会发现，我们加的质感有点平，比如像下面这种：

很明显，这种地方就有点平：

原因就是因为“颜色掉层次了”，我们只需要在他的中间再加一层颜色，就可以让它的质感饱满起来。

具体步骤就是，我们可以先给它加一些“形状”然后进行羽化:

我们可以看下前后对比，这样就不会那么平了：

一旦发现质感有点平，就可以用这种“颜色掉层次”的思维去尝试优化！

02 颜色要透

这是一位同学做的质感临摹练习：

颜色有点太闷了，不够透彻，我们先来把颜色弄的透一点，我用圆形来表示，首先我们的颜色不能太重，弄个小渐变：

这是我们的一个基础，如果感觉明暗对比不够，可以再适当加强对比：

然后加一点反光，这是非常灵魂的一个步骤：

然后再加一点左上角的高光：

这时候我们再来加中间的暗部形状，我们看原版的有一个很大的问题，就是中间的暗部爱心和背景有点糊在一起了：

就是因为两层都是暗色，所以没有区分开，所以这也是为什么我们把背景色调亮的一个原因，我们把中间的形状加上去：

然后再来个内阴影和边缘光：

大功告成，我们再来对比下前后的质感：

是不是好了很多。

03 不重要的颜色千万不能高饱和

有时候我们会觉得自己的设计有点主次不分，这种感觉往往和颜色有关。

下面两个圆形，你会觉得那个更吸引你的眼球：

对，没错，肯定是第一个，因为第一个颜色的饱和度比较高，颜色比较纯，所以更加吸引眼球。

那我们看下面跟米同学的启动图标作业：

感觉所有颜色有点糊在一起，甚至感觉背景比形象还要吸引眼球，就是因为背景的颜色饱和度太高了！

当跟米把背景的颜色饱和度降低时，我们再看下效果：

我们可以很清晰的把视线聚焦在吉祥物的身上。

所以我们在做视觉的时候，一定要注意，你的重点是什么，注意饱和度对比、明暗对比，千万不要本末倒置！

一、改版背景
QQ游戏中心是手Q用户触达游戏的重要场景，每天有海量用户来此进行游戏相关的互动操作，随着产品的功能迭代，体验的逐步更新，用户对QQ游戏中心也有着更多更强的诉求。
在2022年的研究报告《游戏中心核心价值及机会点定性研究》中发现用户在游戏中心内最为关心的是领取福利，通过在游戏中心获得游戏相关的礼品道具帮助提升游戏体验。同时用户对游戏有着较强的社交感、成就感、沉浸感诉求。
随着产品目标的调整，游戏中心的功能也逐渐丰富化，除开领福利和找游戏，用户可以在此消费游戏内容、购买游戏道具、以及使用游戏相关功能等，用户触达游戏的方式变得更加多元，用户的粘黏性也进一步提升，产品依势也需要打造更好的产品游戏氛围感和品牌印象来建立用户口碑、提升转化。
同时，以“生机”为设计理念的QQ，也进行了体验上的版本迭代，游戏中心作为QQ内的重要业务，也将跟随紧随其后完成体验的更迭，提升用户体验、延续QQ品牌基因。

二、制定设计策略
对用户、产品、设计的诉求进行整合后，梳理出本次改版的基本设计思路——在提升产品用户体验的基础上，以品牌符号强化产品的记忆点，一方面从产品体验上给用户带来更顺畅体验，同时以品牌图形强化游戏感和沉浸感，提升用户心中的品牌印象。
优化基础体验：跟随手Q“生机”设计理念和界面风格，统一UI界面样式 ；重构内容消费的信息容器，提升内容消费效率；提升设计效率，以及打造更高效团队合作方式。
打造品牌记忆点：通过品牌基因的植入、游戏氛围感的增强，让产品更具辨识度，同时加强产品的游戏属性，强化用户的沉浸感。

游戏中心改版总览图

三、解决问题
3.1 基础体验优化
游戏中心本次改版在体验上的优化聚焦在3方面：

① 焕新界面
随着产品功能的扩充和迭代，游戏中心的界面风格开始趋于参差，同时伴随QQ设计规范——Q语言的更新，游戏中心的首要任务即完成界面风格的统一。

· 统一风格

以往的游戏中心，采用更为丰富多彩的设计语言，导致从手Q进到游戏中心较为强烈的割裂感。而本次改版中延续手Q的简约透气的风格表现，通过色彩样式、组件、圆角等设计要素将界面进行规范统一，保证体验的一致性。

· 求同存异

在首页、游戏、攻略这3个场景，界面的风格向手Q设计语言靠拢，色调以手Q蓝为主，以相对简洁的界面风格保证内容传递的高效性。
同时根据业务诉求，也保持了游戏中心自有特色——在福利和商城tab两个主场景下强化游戏氛围感：采用3D图形和多彩图标、界面主色调使用情绪更高的橙黄色，让整体感知更符合产品的特质。

除开界面风格，图标的设计也融入了游戏中心的特色——保持基础型与手Q图标一致外，同时将一些图标通过游戏化语义表达出来，使其更具趣味性和游戏感。

②重构容器

· 优化内容消费体验

内容卡片结构化
游戏中心的消费内容来源丰富，包含问答站、小世界、频道等多处内容源，给用户带来海量内容的同时，也导致了信息容器的冗杂，增加用户的认知负担、降低浏览效率。
在前期和产品的梳理中，发现游戏中心的feed类型可以分为4大类，总计有21种样式。为解决用户的浏览体验问题，对feeds结构进行了结构化整理，以流式布局将所有样式整合为6个部分，基于不同消费内容去排列组合feed类型，简化产品逻辑，同时用户更聚焦内容阅读。

· 提升游戏分发效率

游戏tab作为游戏分发的主要场景，改版前主要以横向列表容器去承载游戏信息，用户探索新游的效率较低，同时雷同化的结构，容易浏览疲劳。
针对以上情况，在页面设计上丰富了承载容器的样式，采用高效率的游戏图标排列或者游戏合集卡片，提高了浏览效率，也让用户更容易命中自己钟爱的游戏类型，不同的容器类型组合也让整个浏览更有节奏，减少疲劳感。

③提升设计效率
游戏中心在以往产品功能的快速迭代中，由于规范和组件的不完善以及和开发同学协作模式的不确定性，让产品界面的实现往往不尽满意，无论是开发效率还是还原程度都受到一定的影响，最终导致用户体验的不完满，所以本次的改版，提升设计的效率也是体验提升的重要一环

· 统一设计规范

界面的基础样式和控件，和手Q基本规范保持一致，包括颜色、图标风格、基础控件、圆角、栅格等。同时基于业务的诉求，我们在手Q基础上拉出一条规范支线用于游戏中心的设计——主要在基础色、图标等拓展了更多样式。

· 提升协作效率

以往黑夜模式的适配，开发和设计需要同时输出和还原两次设计稿，导致适配成本较高。在本次改版中，将新风格页面的组件token化，搭建起设计和开发之间界面样式的映射关系，开发和设计只需还原一次设计稿，即可完成黑夜模式的适配，达到高效设计、快速上线迭代目的。

黑夜模式的上线，也提升了游戏中心的浏览感受，让用户的体验更友好、更亲近用户，回归Q语言亲和自然的设计原则。

3.2 打造品牌记忆点
① 打造品牌记忆符号
QQ围绕社交有效性、社交广度与深度、社交动力等维度，打造一个积极向上充满生命力的社交生态体系。生机的理念承载乐观活力与积极延续，具备有序和精致的特点，也象征万物发展所蕴含的生命力。——Q语言-设计理念
在游戏的世界观中，“能量”经常作为源动力元素以推动游戏进展，QQ游戏中心承接Q语言“生机”的设计理念，提炼衍生“能量”概念，以能量元素将生机理念具像化，赋予产品积极快乐充满活力的品牌感知。

在确定能量作为核心关键词后，对此发进行情绪版关键词的发散，结合前文提到各方诉求，最终把关键词锁定到能量、游戏感、氛围上。

② 品牌基因拓展
在对关键词的发散阶段，讨论和尝试了多种能将“能量”概念视觉化的元素，考虑到UI界面的延展性和可用性，最终把可视化元素锁定在宝石和光上——宝石造型上相对简单，光在动画塑造上能拥有多样丰富的表现形式。
为契合概念的设定和后续的延展，我们把宝石定义为能量石。在能量石的设计上，特意营造出能量充盈、光感琉璃的视觉感受，造型上采用多面切割结构，色彩上兼容蓝色和黄色两种色调，以匹配游戏中心的整体界面风格。

除开主体图形，也从其他设计维度去落地能量的设计理念：

• 图形

能量之石
除开前面的基础宝石，也设计了多种能量石的造型，并兼容磨砂质感，以应对不同场景使用。

在UI界面的运用
在产品的核心界面上，将能量石作为背景图案使用，强化品牌和氛围感；
和业务也进行结合——以能量石将商城的幸运值图形化，让品牌和功能直接连接起来；
把能量石材质和游戏元素进行结合——王者皮肤墙功能内，将游戏LOGO赋予能量石材质，让游戏和平台品牌之间产生品牌上的关联。

能量之石图形在界面内的运用

与3D图形的结合
宝箱是游戏中心一个重要道具，每日有大量活跃用户来游戏中心做任务开宝箱，开宝箱成为了产品触达用户的高频场景。

因此对宝箱进行了设计，希望在高触发场景加强用户的品牌感知，强化游戏感。宝箱在造型上采用了和宝石一样的切割造型，同时宝箱上加入了能量石，把3D图形和能量石进行结合。

除开宝箱外，对业务内常用的图标进行了3D化处理。

3D图形在界面内的运用

· 动效

在动效的设计上，也承接能量的设计理念，以光为设计灵感，设计了游戏感强烈，电光火石般的的动画效果——能量光，用于界面内UI界面和3D图形动画，强化整个产品的游戏氛围感。 

动效在界面中的运用

· 颜色

在界面颜色的使用上，主界面延续手Q的标准蓝色调，包括控件、字色也与手Q统一，保证界面整体色调的延续性。同时基于业务诉求，拓展了情绪感知更强烈的“游戏橙”。

对于以内容体验为主的页面——比如游戏中心的首页、游戏发现页、攻略页，使用手Q的标准蓝；在需要强氛围和游戏感的页面——游戏福利页和游戏商城页，采用游戏橙。

· 质感

由于游戏中心内多处用到的3D元素，对3D的质感进行了规范统一。

材质
考虑到UI界面的通用性，避免3D材质的喧宾夺主，材质风格以简单通用为主，颜色以界面主色调为基础，漫射材质多营造轻黏土的通用质感；针对能量石的材质，则采用光感通透的玻璃材质。

灯光
灯光采用基本的三点布光，旨在表现物体的质感、立体感和空间透视感。整体布光氛围积极，友好，明朗，透传QQ活力生动的品牌气质。 

· 字体

游戏平台内，有着较多需要运营设计的场景，字体是信息展示的重要元素，选择了造型感较强造字工房的逼格青春字体，作为界面内的强调字体，更好的营造游戏氛围感。   

字体在运营活动和UI界面中的运用

四、总结
QQ游戏中心作为QQ用户触达游戏的重要途径，用户们在体验链路上有着各式各样的诉求。产品功能的多元化也让用户体验必须追随功能持续迭代。拥有几亿用户的QQ，各类产品的统一优质体验，也是“一切以用户为中心”原则的必要体现。

引言

如今人们出行都离不开手机，都通过手机接触过互联网地图，手机地图凭借着可手势直观操作、地图可快速迭代、信息可实时更新的优势，形成了成熟的地图交互体验。在解析手机地图的体验设计前，让我们先看看地图的发展历程。

一、地图的发展

地图拥有着古老的历史，记录了人类对世界认知的演进过程，经历过泥板、壁画、羊皮、纸张等载体，依据使用和文化需要拥有着丰富多样的美术形式。不同时期、材质、美术形式的地图见证人们认识世界的过程。

随着照相机和飞机的发展，出现了航空摄影测量技术，让地图的测绘精准度达到顶峰。交通、旅游、印刷业的发展，让纸媒地图开始融入人们的生活，地图的平面设计更是百花齐放，有具体也有抽象，让地图兼顾功能、美感、有趣。

再随着卫星影像、瓦片地图技术和互联网的发展，人们可以日常地使用电子地图。受限于网络速度的限制，矢量地图应运而生，在特定范围显示相应的矢量瓦片信息，让互联网地图的形状趋向统一化。

iPhone革命性的触屏体验，通过手势与地图进行直观自然的交互体验，结合内置GPS、陀螺仪传感器，小蓝点成为地图定位的通用标志，激发更多地图的功能和创意。

二、手机地图的创新体验

手机地图继承了互联网电子地图的可快速迭代、信息可实时更新的优势，结合触屏手势操作后，大大的提升了地图展示信息的维度。电子地图从工具逐步被引入到各种垂类服务和社交娱乐中，这些场景也不断丰富和完善着地图的信息。

手势交互让地图从移动到缩放都高效地动起来，激励人们探索更广的区域。更革命性的是让地图从平面到立体之间的顺滑转换，帮助人们更好的映射到真实世界。

可视化信息是互联网地图的主要优势之一，将数据转化为可视化图形，归类在不同的数据层，可以单个或多个层级叠加在地图上展示，传达位置上的数据。

底图是手机地图的基础，通常就是地图本身，它承托着上面的可视化信息。随着地图可更自由地缩放，地图本身的内容不断细化和归类，在不同的缩放层级下，展示符合用户查看场景的核心内容。

三、手势交互：全方位呈现地图立面

触屏手势交互有别于摇杆、鼠标、触控笔等物理外设的控制方式，让用户在小小的屏幕对大范围的地图有更随心所欲的操作，让原本受矢量图形限制的地图有了更多层次、更丰富立面的信息呈现方式。

单指拖动

拖动是地图最基本的阅读操作，一般以用户的定位为初始中心点，用户可以有目的有方向地查看附近的地点。

单指划动

当用户想快速翻阅时会拨走要略过的内容，划动模拟了这一行为。地图被划动后也会模拟物理世界以一定的摩擦力停下，向用户展示地图的新区域，是比拖动要快速的浏览方式。

双指拖动缩放

物理控件只能让地图根据屏幕中心进行缩放，而触屏缩放能让地图根据两个指尖的中心点缩放，并同时位移，符合用户空间操控认知。

双指划动缩放

划动缩放和划动一样，让用户以更轻量的手势加速的缩放地图，并以一定的摩擦力减速停止，让用户快速找到目标位置。

单指快捷缩放

为了让用户能单手并可控地缩放地图，不少地图都设计了自己独有的缩放方式。 zenly，通过屏幕两侧的边缘，直接完成地图的最大和最小缩放跨度。

snapchat拖动右侧边可缘唤起缩放滑块，并使用emoji来表达距离，充满幽默感。

腾讯地图，通过划动右侧的滑块，实现单手顺滑地缩放，滑块也支持划动手势。

百度地图，通过点击一个缩放控件，让地图以当前中心点进行分段缩放。

无限循环的地图

地球是圆的，可以无限巡航，一些应用将缩到最小的世界地图做循环处理，以呼应地球的循环转动体验。

方向视角切换

在陌生的环境用户未必能分得清楚南北方向，利用手机的陀螺仪，可以告知用户正在面向的方向。定位按钮的二次点击，将地图从南北向转到用户面向的方向，有助于用户二次确认自己的定位。

更多地图使用了2D/3D视角的切换方式，2D是南北向的标准地图，3D是用户面向方向的地图，帮助用户更直观地对应物理空间。

旋转方向

可通过双指或陀螺仪旋转地图，地图上的文字也做出相应调整，保持水平、沿道路方向调整，以保证可读性。

3D的旋转也一样，在保持水平和沿道路方向的同时，文字保持垂直。

当缩小到足够远时，用户面向的方向意义就不大了，苹果在缩小到一定范围时，将地图回弹保持南北向。

双指拖动调整视角

地图3D视角也支持自由调节，通过双指平行的上下滑动，可以平顺调整3D视图鸟瞰的角度。

在地图的最低视角做回弹处理，生动不呆板。

远近也能影响鸟瞰的视角变化，视角越低越接近平视，拉进时有俯冲的感觉。

四、可视化信息：生动呈现地图动态数据

从古代开始，人们就已经懂得通过绘制山脉、河流、海洋、建筑等对重要位置信息进行标记，地图本身就是一个信息可视化工具。 互联网地图最大的优势，就是能提供实时的信息数据。将数据标记在相应位置的坐标上，并分别归类在不同的层级，叠加在地图上查看。

地图的常用数据形式可大致分为：点、线、面、热力图等，一个地图可同时唤起多种类型、多个图层的信息内容。

点数据

点数据是单个地理坐标上的标记，代表该位置上的信息，是地图上最常用的数据信息。地图通过不同的小图标来区分位置类型，使用频率越高的样式越简洁，地标建筑做形象化图形标识。

聚合图在地图上呈现也是点数据，它实质是显示一定区域内的信息聚合，但不强调具体的区域。聚合图可以避免因为该区域的点数据过多，在地图上信息过于密集。

百度的充电桩地图就是以区域聚合充电桩数量，根据缩放调整数据的聚合。

腾讯地图的文博地图也是聚合图，并根据文物的类型做了快速筛选。

线数据

线数据在地图上呈现为线性，一般都沿着可行道路展示信息。导航路线是最常用的线数据，它提供具体行驶路线方案，并实时展示线路行驶的进度与方向。

也有粗略表示进度的线路数据，如快递的物流进度路线就不需要具体的实际线路，只需要示意大致进程。

街景地图则仅展示有全景图的道路范围，不提供进度与方向。

面数据

面数据要展示地图上的具体区域，疫情环境下出现了区域风控需求，需通过了面数据画出区域范围。疫情地图采用了聚合图、面区块两种数据形式。

zenly使用了反向的面数据，根据用户的行走记录，将用户走过的范围擦亮，用户未走过的地方是一块彩色的平面，充满娱乐感。

热力图

热力图以特殊的高亮梯度显示地图上区域的热度，热力图的数据不会指向地图上具体的位置，它能呈现热度变化的趋势。百度地图用热力图直观展示地区上的拥挤程度。

高德地图的空气质量地图，使用聚合图作为空气质量评分，热力图作为空气质量范围。

snapchat使用热力图来表现该区域用户发布动态的热度，引导用户发现内容，由于热力图不指向具体位置，能更好的保护用户隐私。

热力图并不局限于面，路线也可以反映道路的热度。Strava利用用户的骑行数据，生成光点线路的热力图，可以看出哪些是热门的骑行线路和必经地点。

路况也是一种线性的热力图，路况使用按段测量的方式，热力值的梯度相对跳跃。

让数据动起来

地图是安静的，但真实世界是忙碌的，让数据动起来，给地图增添更多情感化设计，缓解用户的等待压力。

忙碌的商家

外卖小哥端午节雨中送餐

公交努力奔来

五、底图：为更好呈现信息的色彩系统

手机地图的底图最常使用矢量瓦片地图，因为数据体积小，在互联网环境下读取速度快。矢量地图用几何图形来表达区域，不展示具体细节，因此需要通过颜色去传达不同区域的属性或功能。

人们对于颜色和环境是能建立一定的联想的，如绿色想到大自然，蓝色想到水，红色想到警示。根据人们对色彩的联想，给矢量地图中不同属性的区域进行配色，帮助用户理解地图。谷歌地图就曾经为不同类型的信息标记出700多种颜色，最后简化为25个颜色，形成了地图的色彩系统。

工具类地图应用以地图为核心基础，对矢量图形有最全面的归类，因而拥有最丰富的配色系统。由于人们对区域功能的颜色联想是相似的，各地图厂商的标准地图的配色都很接近。地图用色素雅，才能让多个颜色能和谐的同时存在，降低用户的视觉疲劳，并能突出地图上的信息图层，让用户聚焦所关心的数据。

而一些垂直场景的应用，地图区域功能的描述相对次要，通常会对地图的用色进行大幅度精简。以打车应用为例，地图用色少且色调相近，突出核心的打车状态信息颜色，同时体现应用的品牌特色。

不少运用地图的概念设计中，会更极致的使用单色系地图，仅突出数据信息的颜色，充满未来感。

六、未来的地图

随着网络速度的提升，手机硬件的升级，顺应AR/VR技术的发展，地图逐步进入3D和全真时代。苹果地图在现有的地图的3D视图下，已对地标建筑赋予更多细节，并在夜间模式模拟了灯光效果。

3D地图就像是虚拟世界中的基础建设一样，苹果地图添加精细地标模型后，同时应用到Carplay的导航中，在驾驶时可直观看到与现实世界对应的3D地标。

谷歌更是提出“沉浸式视图”的高保真3D地图，使用图像还原一座城市的面貌，为浏览一座城市提供了几乎真实的鸟瞰视角。

同时全真模拟日照和天气系统，和现实一样模拟东升西落的光线方向，模拟晚上和雨天下的城市面貌。

随着地图的立体全真化，地图的数据也将向空间延伸。相对全真地图而言，人们本身就身置真实的地图场景中，未来借助AR设备，人们无需对照地图即可完成导航。

结语

地图历来是人们借助艺术的手法，以极具想象力的方式对世界进行再现，它遵循科学测量的法则，使用几何的线条和形状对地球的进行抽象化。地图反映了制作者对世界的认知，而现代的科学技术让地图呈现尽可能客观。但地图并非单纯地呈现地球，而是呈现人们眼中的世界，它寄托着人们对美好生活的想象，更好的认识、探索和规划世界。

宜家的设计为销售负责。比如设计一个杯子，宜家的设计师需要考虑如何更多的卖出杯子。没错，销售更多的产品是设计师的KPI。在这样的目标导向下，设计师很容易去思考几个问题。

• 一定成本的杯子，用户为什么要买我的产品？解决做好产品设计的动力。
  
• 杯子的使用场景和定位，是刷牙杯、还是咖啡杯，它应该是家用的、还是在高端的商业场所出现？基于成本出发，对设计、原材料和制作工艺的思考。
  
• 杯子在售卖时期的陈列、互动形式应该是怎样的？基于如何能售出更多，解决产品的流量获取问题。

• 杯子在使用过程中的手感、方便性。基于用户感受和体验，解决产品和用户互动的故事性，口碑问题。

众所周知，宜家的产品是场景化的，总能让人感受到设计师们的热情、心血和心机。设计为销售负责，售出更多的产品确实可以作为设计有效性的验证方式之一，但销售量却不能作为设计的量化标准。

这两者之间有很微妙的差异。我们引入一个概念叫做“数据趋势的正向反馈”来解释这个问题。“数据趋势的正向反馈”，它具备允许波动，且不为一个具象的数值服务的特征。类似下图示：

设计为销售负责，我们可以理解为，衡量好设计的其中一个维度标准就是销售“数据趋势的正向反馈”，值得注意，不是销售量的某个单一的KPI值。因为达成某个销售量的KPI值有很多手段，设计策略、产品策略、运营策略和营销策略等等方式都可能完成，如果用销售量去衡量设计，会让设计变得不够纯碎。但是，用“数据趋势的正向反馈”来衡量设计是否有效，用户是否认同却是可行的。而且，“数据趋势的正向反馈”意味销售量是持续增长的，哪怕有波动，哪怕有快慢，长期看能够持续增长代表用户是健康的。设计价值是为产品带来健康用户，或者说是保障产品的健康度。产品健康度一般看几个值。

用户跳出率

用户跳出率指只访问了入口页面就离开的访问量与所产生总访问量的百分比。通常互联网的平均跳出率大致是73%，如果你的产品跳出率超过这个值，说明用户质量不高。

平均访问时长

平均访问时长指用户在一次访问中，平均使用产品的时间。互联网的平均访问时长大致是2分40秒。

平均访问页数

平均访问页数=浏览量（PV）/访问次数。互联网的平均访问页数大致是2页。

除此之外，产品还会从营收的角度看用户支付金额、ARPU值和转化率等等。营收指标对与设计来说，就是需要参考的趋势数据了。了解了这些原理，怎么做呢？我们用首页改版为例，首先按上述要求定义用户健康度指标。假设首页承载电商内容，根据电商特性在基础指标之上，增加一个用户在首页的停留时长指标，这个指标衡量用户是否能在首页逛起来。

依据这些指标，就可以搭建针对于当前项目的用户健康度指标，在设计过程中通过对指标和指标用户的数据分析和对指标用户的访谈综合得出项目的核心问题及解决思路。通过线上验证设计方案观测数据模型的趋势变化，以获得最优的设计。设计在保障产品用户健康度上，是一个持续迭代的过程。

产品没有最健康，只有更健康。

作者：ZA大人

转载请注明：站酷

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

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

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

设计趋势每年都在不断地变化及轮回，多年前的风格技法在结合了当下的设计元素后，又会给我们展现出不同以往的主流时尚。

“趋势不一定每年都会更新，但趋势是我们设计的风向标。”

基于对网络数据的搜集及分析，我们对2023年设计趋势做出了预测。

无论是否顺应趋势，我们都应该了解趋势，拥抱变化，这才是我们设计师的准则。

NO.1 3D立体元素

借助当今的软件和技术，3D创作已经不再被神话，越来越多的设计师开始在自己的作品中运用3D元素。

下图是Droga5为格林威治（Greenwich）创作的一系列视觉设计，这组设计利用3D图形，创造了更醒目的视觉效果，将格林威治宣传为伦敦的新创意社区。

在手机品牌宣传物料中，设计师将3D元素与手机进行了紧密结合，这样的视觉样式在市场中很快便能脱颖而出。

NO.2 酸性设计

提起“酸”，大家下意识会想到酸的味道，而所谓的酸性设计更多表现的是一种设计理念。

酸性设计大多画面元素丰富，各种金属、玻璃、流体渐变、镭射等科技感的元素都会运用其中，这也导致这类作品十分强调艺术的视觉冲击性。

乍一看酸性设计会给人一种混乱失调的感觉，而实际上酸性设计并不止是某一种单一的设计风格，而是一种视觉情绪的表达。当下的暗黑金属风、二次元的可爱风、明显的幻彩渐变风格……往往都含有酸性设计的影子。

NO.3 复古怀旧风

回看设计领域每一年的发展，“复古怀旧”一直是必不可少的关键词。

无论是品牌形象，亦或是包装设计，设计师们频频用现代手法诠释复古之风。

还有传媒集团CNET的品牌重塑，在现代时尚元素的基础上，还融合了复古插画，整体设计从1950-1970年代的美国新闻行业中汲取的灵感。

NO.4 艺术衬线字体

最近，衬线字体在品牌设计中的出镜率极高。

不少网站的设计都是围绕着衬线字体作为构图中唯一或主要的设计元素而存在。

Stradivarius是诞生于1994年的西班牙女装品牌，与ZARA隶属同一公司。

2022年2月初，Stradivarius推出了全新的Logo视觉，衬线字体更容易彰显女性简洁现代的气质外，同时兼具女性力量。

NO.5 NFT艺术

近两年，NFT可以说是对设计、艺术、技术行业产生冲击最大的新事物之一了。

NFT与平面设计联系起来，就是我们所说的数字平面艺术。它的到来对设计师影响有很大变化，横向能力要求有所提高，比如了解虚拟数字化设计，以及对全新审美和新三维技术有更高的要求。

以下这幅《Metafisica》便是非常热门的NFT作品。

NO.6 超萌趣emoji

表情符号在如今是一个超越文本并能得到广泛认知、跨越文化和多领域的视觉语言。

单一的枯燥图标很难满足多元化场景下情感的表达，于是，动态emoji图标来了，它能带来更强的视觉欣赏体验。

NO.7 高饱和度撞色

高饱和度色彩是年轻的色彩，它是先天的乐天派，同时也是情感的直接表达。

可尽管“吸睛”对品牌而言十分重要，但在设计之余要注意色彩平衡，以免混用色彩，很容易引起视觉疲惫。

NO.8 极简化设计

极简主义杜绝一切多余的装饰，形成独特而简单的视觉语言，用最简洁的表现形式勾勒出产品最基本的形态。

简洁的图形设计摒弃了多余的图案、文理等装饰样式，为真正重要的信息创造了呼吸的空间。

留白，是最高级的美。

NO.9 氛围手写字体

将富有表现力的手写字体写在设计中，能为作品带来不一样的氛围感。

随手一写，便是一幅“画”！

NO.10 玻璃拟物化

2022年，我们在Dribbble或Behance中会发现很多设计师都开始有意识地采用“玻璃拟物化”美学的设计。相信在2023年，我们会看见更丰富的表达~

毛玻璃效果广泛应用于UI设计之中，在摹客DT中也能快速完成。

使用玻璃拟物化设计的界面，由于毛玻璃的通透性，会呈现出一种虚实结合的美感。

除此以外，我们还可以看到的，这一趋势已经明显转移到了玻璃和水晶质感上，而且以令人难以置信的用立体拟真度将图形设计提升到了一个全新的高度。所以，2023我们也将看到更多与全息和3D趋势相辅相成的透明质感和逼真的玻璃背景等元素的设计。

结语

2023年的设计趋势给我们展示了设计的无尽可能，设计师们可以创作出更多超乎寻常的非凡设计，为用户营造出独树一帜的全新体验。

身为设计师，我们要持续积累优质的设计素材，要知道设计趋势因人而异，我们能做的就是选择合适的风格应用在设计中，才能发挥它不可估量的价值！

作者：摹客设计云

转载请注明：站酷

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

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

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

前言

互联网瞬息万变，在产品不断更迭的过程中，我们经常说要保证产品设计的一致性和质量，提升产研链路的效率。但现实情况是：产研团队长期面对的是产品越来越复杂，体量越来越大，一个个复杂的产品下包含N个业务线，N个业务团队，甚至还有外部合作的业务，每个迭代都要面对数以百计的功能上线，经常容易出现各种相同但不一致的功能，上线质量参差不齐，执行者也容易陷入日复一日的需求海洋而没有更多精力去挖掘更有价值的事情。

所以如何解决团队效率和产品质量问题？我们的解法是抽象体系化的解决方案：设计模式化和代码化，设计从原子到全局进行统一和优化，并形成系统化的设计指导，由开发进行模式代码化，提供灵活可配置的规则。以此，设计有更系统化的设计原则，整体的统一性和体验有保障，设计和开发周期也可以缩减，甚至大部分日常需求可直接由产品对接开发直接上线。

目录

• 一、什么是系统化解决方案，什么样的团队适合做
• 二、如何输出、推进设计解决方案
• 三、解决方案的管理和发展

(一)什么是系统化解决方案，什么样的团队适合做

1.1 什么是系统化解决方案？

大多数日常需求大多是从单点出发，当点变多变复杂了，就容易出现上述说到的现状问题。所以解决方案需要基于业务全盘进行设计抽象：从元素——组件——区块——页面——功能流程沉淀设计规则并代码化，来灵活提供拼装N个不同页面的机制，帮助团队更系统化的进行产品设计。从组成内容不难看出，解决方案是需要建立在基础组件基础上，与基础组件、复杂组件、行为模式共同组成设计系统的【功能模式】部分。

1.2 什么样的团队适合做

解决方案是一套相对稳定的设计机制，所以在产品初期或团队建立初期，产品可能经常会调整的情况下，并不适合做。初期可以借助成熟的设计系统来减少投入成本。而到成长期可以根据业务的发展梳理基础元素、组件，选择性的建立部分稳定且利用率高的解决方案，并持续发展，保证解决方案可以起到指导和提效的作用。随着产品或团队逐渐成熟，解决方案也应该随着一起成长，相互影响相互作用。

(二)如何输出、推进设计解决方案

2.1 由大到小的进行信息拆解

1）对产品页面（尤其是重点功能）进行盘点，划分页面类型：比如列表、表单、详情、dashboard；

2）对页面中的内容进行区块归类

3）对区块中的信息进行拆解

这三个过程下来，对于问题、规则、规律都会有一定的概念。以一个后台系统为例

1、页面大类主要是：列表、表单、详情。

2、其中列表的内容大致区块分为：页面标题区、列表操作、列表筛选、列表内容，到这个阶段已经可以发现，相同区块位置就存在不稳定，在后台系统中可能影响面不会非常大，但对于内容复杂繁多的工具或C端界面就会容易出现找不到的情况。

3、不同区块的内容拆解，同样也会发现一些细节问题，比如筛选的样式、规则不一致，列表操作的方式、位置、样式、交互不一致等等

2.2、抽象、重组：从布局——区块——组件——设计规则

从第一步全盘的信息拆解和归纳, 已经发现问题, 这一阶段主要2点：第一是如何通过设计规则来避免同样的问题产生，第二是如何通过简单的规则重组减少多人合作记忆复杂度。思路类似于设计一个界面，首先得有一个布局划分，不同的区块要放哪些内容，再到区块里的细节内容规则，从而抽象出由布局到区块的设计规则和可复用的组件。

以前面说的列表为例

1) 区块主要是4类，明显的问题是区块位置不稳定，所以在布局结构上，需要定义1-2个稳定的可配置的布局框架来适应不同的内容

2）不同区块梳理组成内容，内容细则

3）标记出可组件化的内容及规则

4）提炼整个过程中通用的设计规则，作为全局的指导。如：国际化、排版规则、超限规则、适配规则、文案规则等等。

通过布局——区块——组件——设计规则，可以灵活的进行页面拼搭

2.3 落地代码库 

区分通用层和业务层，通用层落地到通用模板市场，利用脚手架生产新页面。业务层面的落地则是基于通用库封装具备业务属性（如：业务主题、业务数据、业务拓展方案）的业务库来生产新页面。

目前群核设计团队建立了一套平台通用的解决方案，适用于所有中后台产品。业务属性比较强的产品也基于通用解决方案封装业务层面的解决方案，同样的思路也应用在不同体系的工具场景中。整体实践下来，产研效率提升近50%，甚至完全解放了一条业务线的设计资源。产品体验的一致性、上线质量也有明显的提升

三、解决方案的管理和发展

解决方案作为设计系统的一部分，与设计系统一同管理，业务设计师使用系统来输出，反馈问题或需求给系统，有系统设计师判断可行性，周期性的管理，及时更新并在内部互通，促进互相成长和发展。

解决方案与设计系统的发展有一点不同的是解决方案有更多业务化的内容，业务团队根据业务迭代维护解决方案。当业务的方案达到通用级别，则列入到通用库。

这些方法和思路也并不限制行业或产品类型，仅是在我们当前服务的产品体系下总结的方法。当然解决方案并不能解决所有问题，只是希望在提供更系统化的设计方法和模式的同时能减少重复工作提升效率，让产研团队有更多的精力和时间投入更有价值的事情。

作者：酷家乐UED

转载请注明：站酷

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

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

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

写在前面

一年一度的年底复盘总结大会即将开启，期间闲聊时被问：作为设计师，日常工作中如何体现设计价值？你们平时做的那些不是业务需求吗？如何体现设计价值呢？直白一点：你们设计一年都没产出啊！！！我开始反思：如果平时做的业务需求不能体现设计价值，那么什么体现我的价值呢？设计价值到底用什么来衡量？

分享目录

1、如何理解设计价值

2、设计师价值分层 

3、设计价值案例体现

4、设计价值具体表现方向

一、如何理解设计价值

很多招聘上都写着会插画会动效的加分，很多职场人没面试或没应聘上理解是不会某个技能，因此抱怨设计要学的太多了...但是注意「加分」这个词的前提是满足必要条件之后才去考虑的，如果公司有大量的剪辑和插画需求，自然会招插画师和剪辑师（我上家公司有专门的插画师和视频剪辑人员），所以不妨反省自己是否满足必要条件。

前几年大家或许可以凭借这些差异化优势拿到不错的薪水，但是寒冬之下公司更多的思考着如何活下去，更看中设计能给产品发展带来什么价值

商业设计本质上服务于业务，公司需要用户参与盈利，所以每个季度或每个月分发每个部门业务目标，项目团队根据当前部门任务制定相应的项目目标，然后再一层层分发到设计，总结他们的关系如下：

因此判断设计价值的关键是：是否真正地帮助业务解决问题，助力业务目标达成。换言之，设计价值就是设计师通过设计思维/策略/方法，帮助业务创造的那部分价值。

• 实现了哪些业务目标
• 解决了哪些业务问题
• 创造了哪些业务价值

根据设计价值，市场上衍生出各种设计师头衔，被划分为更靠近产品的UXD（User Experience Design)、以及在UXD基础上提升出与业务更密切的UGD（User Growth Design)，最后就是更偏纯视觉的VD（Visual design)。

相信大家和我一样，在公司对设计师的要求再也不是单纯界面输出了，虽然职称头衔没变，但是公司对我们的要求越来越高了，那说明你正在向体验型设计师或用户增长型设计师发展。今天看了我的文章，打开格局，未来的路也会越走越宽

二、设计师价值分层

设计师的价值可以分为五层：

基础价值（设计协同）：重要且紧急，设计师立身之本

二级机制（优化负向）：自驱解决负向问题，量化优化结果

三级价值（增长爆破）：洞察增长爆破点，自驱推动增长

四级价值（L型赋能）：垂直击穿，经验沉淀，实现L型赋能

五级价值（业务领军）：人人都是业务方，拓展设计师在行业和生态影响力

今天主要聊聊前三种，我相信很多人最初选设计师这个职业认为设计不用对接太多人，做好自己的事情就OK，紧接着慢慢的在无止尽的改稿消耗了激情，开始喊出设计没前途想转行不好找工作等等，但是正真玩明白设计的人往往笑而不语

第 1 层：基础价值

不知其然，表象复刻。设计协同最基本要求就是在拿到需求后高效又完美地实现落地。也就是我们刚刚入行时日常工作中所做的事情：产品给到原型、设计开始执行、接着进入研发、再接着走查等等，甚至很多人都没玩明白设计系统有哪些，各个设备的的规范区别...
做好这个阶段是设计师基本素养，需要良好的专业能力，良好的沟通能力，并参与到产品的探索与构思中来。

第 2 层：负向优化

我之前在小红书分享了很多关于设计优化内容，优化前VS优化后。以用户体验为核心，不同场景不同设计。相较于基础价值而言，负向优化开始逐渐融入业务当中，慢慢了解整个业务流程，很多小伙伴往往提出优化方案后被认定为优先级不高，就是没有针对当前业务主要功能提出优化

第 3 层：增长爆破

这个阶段在设计师晋升中非常关键，领导非常看重设计是否主导项目优化，我目前公司晋升标准是设计师除业务需求外，一年至少需要2次设计主导项目推动。这个过程比做业务需求复杂的多，因为当你没有足够资源协助优化时，需要设计自己前期调研、设计问卷、找数据、写产品文档、画原型图、标注交互规则...整个过程由你主导。

当然这个阶段的设计师会比上一个阶段更能体现设计价值，并对产品产生一定的影响力。我们要把格局打开不要局限于设计本身，不是说忽略设计，是基于日常设计界面去考虑设计的意义，给产品和业务带来的影响。能在以用户为中心的基础上，寻找机会点，推动业务的增长，所以这个阶段的设计也被称为UGD（User GrowthDesign）

这时候对设计的要求更高，比如需要具备用户洞察力，数据分析能力等，从这些维度出发，去熟悉业务、分析业务，寻找设计机会点，制定设计策略，从而推动业务。这个阶段的设计师，也是市场最需要并且很稀缺的。

三、设计价值案例体现

通过一个案例我们一起讨论设计价值体现，首先看一下业务目标，设计目标是由它推导而来，这个推导的过程并不是直观可见的，需要我们进行用户调研、问卷调查、数据分析等等一系列方式去推导，最后总结归纳出可行设计目标。推导过程是整个设计过程中最重要的环节，为了让大家理解，我在网上查了很多案例

1、业务目标

一般业务目标是决策人开会共同决定的，它只是某个阶段大的方向，基本可以套进下面这个公式

以我目前工作正在执行的项目为例，可以组合其中一部分作为业务目标，例如：
Q4：通过提升中介版位的曝光率引导中介入驻（上传社区资料），来增加社区内容的丰富度

阿里《五导家设计法》中对业务目标和设计目标的定义是：

1、业务目标：用［某策略］给目标用户带来［某价值］，以实现［某变现方式］

2、设计目标：用［某设计策略］给目标用户带来［某价值］，以助力［某变现方式］

这个刚开始理解会比较困难，因为很多项目其实只有一个总体的目标并不会细化到这样的颗粒度。于是我去网上查了一些设计师的分析部分内容，整理组织一下发现大致的信息是这样的：

由业务方提出一个需求，这个需求背后往往伴随着一个业务指标，设计师则需要将定量指标拆解为有设计执行指向的目标。上图中简化XX功能的操作路径，就需要拉出整个操作过程中的数据，观察同级功能及子级功能有什么影响，用户是在哪一步流失的，有什么优化途径...，可以看出短短几个字背后的工作远远比想象的多

2、洞悉产品的业务场景

这次设计改版也是伴随着业务的发展而来的，为了做出贴近业务目标的设计，项目前期对产品的定位及业务底层逻辑做了深刻的理解，思考我们为什么要做这个产品？用户通过我们产品得到什么？为了方便理解，我从项目背景开始说起
项目背景：随着平台买卖租赁业务迅猛发展，用户对于房屋周边关注度越来越高，单个房屋详情无法满足用户对整个房屋周边的了解，所以推出社区找房平台。产品主要定位是提供小区内真实有效的房屋信息，帮助用户省时省力的筛选出优质房源
问题：由于第三方合作平台房屋资料更新不及时，导致C端用户（买卖租赁）去线下看房时发现已卖已租，渐渐地对平台产生不信任，最后很大可能弃用。
解决：为了改善这一现状，平台引入「社区专家」这一概念，并通过提升中介版位的曝光引导中介入驻，入驻则需上传该小区户型图/平面图/内景图等 。也就是说中介入驻后被称为社区专家，在APP端曝光量增加，吸引C端用户点击互动，从而提升房屋成交量的可能性（也就是业绩）

这样一来，我们就明确了现阶段为什么要做这件事：中介通过上传房屋信息获得一定的曝光量；而买卖租赁用户通过房屋信息省力省心找到符合自己预期的房源。

3、洞察目标用户特征

产品最终服务于用户，不同产品面对的不同人群的需求是不一样的，所以前期深入了解了用户，明白用户诉求，这样能更好的聚焦设计策略，将产品的核心价值及服务价值传递给用户，从而提升用户使用体验
接着对此次需求目标用户（中介）进行了调研分析，当前我们的中介用户特征具体表现为：年龄在45岁以下的用户人群占73%左右，整体年龄不大，对互联网接受度较高，工作业绩直接与房屋成交金额挂钩

4、梳理用户入驻流程

社区专家入驻流程简单的看就是上传社区信息图片，然而其实是一个系统化决策的过程，整条关键路径从了解入驻优势（信息获取）到怎么上传（上传图片）再到上传成功（入驻成功）经历了几个关键节点，开始呈现一个漏斗状的情形，转化率越来越低。
因此在产品设计之前，我们对用户决策的关键路径进行了相应的梳理：主要为入驻前、入驻中、入驻后几个阶段，同时围绕着每个环节去强化用户内心感知，挖掘设计上的机会点
在这几个阶段我们主要解决的问题可以归纳以下几点
1、入驻前：如何让中介快速找到入驻入口，明确入驻优势
2、入驻中：如何让用户入驻更顺畅
3、入驻后：如何提升用户入驻后效果感知，为再次入驻做推动

5、设计目标推导

到此产品整体的设计思路已经很明确了，如果前期我们没有对业务进行宏观层面的拆解和分析，设计后期可能找不准设计的发力点，从而导致设计没有贴合实际业务场景
围绕着这些背景，经过多次沟通最终设计和产品同学达成了一致，本次主要设计目标为
1、提升用户信息阅读效率
2、提升用户入驻决策效率
3、提升用户入驻后效果感知

6、设计方案落地

在明确了设计目标之后，最后一部分是设计落地了，正确的设计始终围绕着产品策略来执行的，并通过深耕的设计解决方案来为用户打造优质的服务体验，那么我们将从以下几个维度来进行视觉方案的设计

6.1、提升用户信息阅读效率

(1）以传达信息内容为主
说到权益设计师视觉常常会体现荣誉感，就会联想到黑金权益对比，但是不管是什么样的视觉表现，最终的结果都是以清晰传达信息内容为主，让用户看的明白这个是干什么的，对他有什么好处
如果用户看不明白，即使信息有效触达，最终会以为是广告不明所以的关闭

当然这中间也不仅仅是设计的问题，产品给的交互原型稿就有问题，整个图就没让人明白这个是基础权益和置顶权益的对比。设计拿到原型搞后要提前沟通，在交互原型不确定的情况下不要开始设计，这个在《设计如何提升工作中话语权》有提到过，等交互评审多方达成一致后开始着手设计，这样才会事半功倍

(2）利益点的展示
关于用户入驻的利益点运营角度肯定是展示越多越好，但是产品为了减少用户跳出率，期望查看任务是在当前页面用弹框承载。由于弹框承载信息有限，我们尽量想在电脑一屏内展示完当前任务及主要利益点，所以在用户能看明白的前提下不能无限增加利益点

(3）挽留弹框优化
无论什么类型的弹框，必须要做到文案简洁。不要让用户看半天还没明白你要说的是什么，然后才没办法也无所谓的点了确定或取消，当然大部分这种情况，他们都会点击取消，或者右上角的关闭键。
而一般弹框按钮，右边是主操作按钮，也就是引导用户操作下一步的按钮，这次优化前按钮文案不好理解，确定操作与用户本身理解有歧义，易造成误操作

6.2、提升用户入驻决策效率

(1）统一入驻后的视觉效果
中介入驻前后状态分为：入驻前、入驻中（审核中、未通过、已通过）、入驻后（免费续期）。其中入驻中未通过使用警示色红色，为了强化中介入驻后的视觉效果也采用了红色，这与入驻成功的绿色不符。
在视觉上用色混淆，那么后续红色是表示警示的同时还可表示强调？那么下图中「1筆成交」用红色是成功了还是未成功？为了避免这个问题，入驻后视觉效果统一为绿色，在后续色彩感知上更清晰明确，无论是设计师还是用户都不会混淆

(2）优化入驻路径

主要按照流程最短，操作最少方向去优化，1.0版本完成整套任务流程：免费入驻 → 入驻成功 → 做任务 → 免费置顶。当1.0第一版设计稿灰度上线后，产品预期是与中介达成共赢的结果，但是灰度数据结果显示中介用户入驻率低
在优化前我建立了一个用户调研群收集用户反馈，与部分用户电话1V1，发现有很大潜力去提升。比如与用户沟通时，用户说不知道入驻成功后还需要做任务；做完一个任务置顶后怎么还需要做任务；再做任务有什么作用等等
①免费入驻 → 入驻成功过程产生疑问，即入驻成功有权益还是做任务有权益？有什么不同？
②置顶一词有歧义，他们理解置顶是整个流程完成，而产品放理解置顶是前端页面的置顶

(3）任务弹框关闭方式
通常来说为了方便用户关闭弹框，点击蒙层或点击关闭都可任务。入驻任务弹框是中介进入后强制弹出，1.0版本用户点击蒙层也可关闭，在2.0版本时候新增上传社区格局图，需要填写筛选格局信息，关闭筛选框最常见方式点击筛选框其它区域，由于任务本来是弹框展示区域有限，点击蒙层是大多数人选择，这时候可能上传一半就打断了，体验非常不好。
处理方式：增加关闭按钮点击区域，弹框只能点关闭按钮关闭，点击蒙层不能关闭

6.3. APP优化专家入口

买卖租赁用户与中介的互动率在一定程度上影响着中介留存以及再次入驻意向，入驻后中介用户在APP展示上至关重要。
由于品牌色是饱和度比较高的橙色，所以前期整个页面的可点击区域基本以品牌色为主，每次强调都是在原视觉上更强。当专家版位的视觉强调用橙色，视觉上可能无法凸显；
用其辅助色蓝色时，存在2个问题，①蓝色辅助色视觉感比较重（新建案品牌色不能随意修改），作为按钮时更像是一个主按钮；②后续设计可能与其他业务线用色混淆，用户也可能分不清2个业务之间的关系

设计侧如何解决呢？

面对这样的僵局再做优化，就一定需要转换思路了。跳出纯页面设计的层面去看转化，我们到底设计什么？此时需要重新梳理模块内容，明确产品诉求是想突出什么，结合产品诉求重新梳理内容优先级，以视觉维度重新输出设计优化。

7、数据反馈

这一个阶段就是证明之前所说内容是对的，证明你的设计正确性与有效性，并对后续的优化做准备

从入驻前中后期及APP展示在10月18号优化上线后，中介入驻成功率明显上升，从而影响着社区入驻率也明显上升，APP端互动按钮点击率也极大提升。整体来说这次改版非常成功，后续在响应式详情页上也会做相应的专家版位优化，社区专家曝光率最大化，同时也提升C端用户找房效率

上面说了这么多，以上五步简单来说：

为了什么做 (问题在哪) → 要怎么做 (如何解决) → 如何才算做好了 (评估体系) → 做好了吗 (“定性、定量”在过程中的合作方式和态度) → 还需要优化吗 (验证复盘，再次出发)

四、设计价值具体表现方向

上面说了这么多其实想说明设计价值的本身不是局限的，它不仅仅是大多数人看到的可感知的界面，它还包含对外增值和对内成本两种类型：

对外增值是指价值的增加，用户、营收、知名度等，这些都是对外增值的部分，也就是我上面从设计维度改版产品；对内成本是指成本的控制，资源、效率、投产比等，这些都是对内成本的部分
而这两部分又可以被分为有形和无形

1、对外增值的有形价值

对外增值的有形价值，一般是指用户行为数据、业务盈利数据这些，是能被直观看见的。
如果一个决策是由你主导推进的，且因为这个决策引起了数据的上升，这个决策就是唯一变量，它能直接证明你的价值；

但是设计不是万能的，大多情况下设计只能通过“影响/实现局部用户价值”间接助力变现，我们只需关注可以通过设计手段参与、干预和落实的部分即可，这个就是我上面内容项目复盘总结的内容
当然，直接证明并不一定比间接证明更有价值。更重要的是，你要情境合理、逻辑自洽。

通常我们需要关注的指标有新增（新用户数，日周月）、传播（传播周期）、活跃用户数（DAU、MAU）、留存率以及流失率，还有aarrr的海盗指标-获取、激活、留存、传播、收入，这里不展开讲了大家可以去搜索一下。这些数据在改版以及做新功能的时候我们经常会用到。

2、对外增值的无形价值

对外增值的无形价值是什么呢？比如公司周年庆，设计组会承担全部的舞美设计，但是这个结果没办法用数据来衡量的。但是整个过程是设计全程跟进支持，使得客户好评高于往年，甚至还在行业内有一定的传播和讨论，这些都是对外增值的无形价值。
也就是说除了直观的数据目标，我们还可以从定义抽象的目标，抽象的目标也可以衡量。

3、对内成本的有形价值

设计组件规范可以最大化的保证设计的一致性、提升开发的效率以及方便产品的迭代优化，我们就使用了这样的公式：组件开发时间*使用次数-投入的时间成本，以此估算出组件库带来的工时缩减。当然组件库只是对内成本价值的一种，对内价值包含很多，比如设计原则提炼、设计语言统一等，这些在多个设计合作时事半功倍

大家常被到的问题：市面上开源的组件这么完善，设计师为什么花费那么多时间重新做组件？其实它存在2个问题

3.1、业务属性不符
虽然网上存在很多第三方组件比如Ant Design、TDesign等等，研发使用这些确实提升效率，但由于设计语言不同（公司不同业务属性不同），市面上的组件不一定与自家产品属性贴合，需要我们结合产品愿景以及业务规划进行重新设计。

3.2、业务特性不贴合

我们见到的很多组件只是基础组件，可以保证基础设计一致性，但由于业务领域的独特性和多样性，在一些专业的场景中有着强烈的业务属性，需要我们对一些基础组件进行组合，进行更专业的沉淀，这样在实际使用的时候会更加高效。例如高级筛选、不同的场景弹框等。

4、对内成本的无形价值

推动产研设流程优化，比如我之前写的《设计师如何提升话语权》就是我今年上半年发现了协作流程的不合理，反复沟通推动了流程的优化。这件事让整个团队有了更高效的合作，就属于对内成本的无形价值。
项目复盘对于我们设计师的能力成长的作用是巨大的。它之所是最快的学习方式，因为它在是实践中的反馈，这种直观的经验沉淀最终会融入自己解决问题的知识体系架构，而这将进一步反辅自己的职业成长。
复盘可以让我们站在第三方角度，重新对项目流程进行全面的回顾与总结。结合不同的反馈，客观的了解当前设计在整个业务目标中的价值，这是对我们设计量化最佳途径。

---

和大家再说远一点，工作可能常遇到的场景，设计优化推不动，无法进行下去。得到反馈是：优先级不高，后续有时间再优化...这个其实在大中小厂都有这个情况，属于设计价值的第二层体验优化，它优先级高不高，取决于这个问题是否足够致命。

比如说这个问题是核心功能，但根本不可用，这些就是致命问题；如果核心功能可用，只是没那么好用，也许对于你这个产品来说，就没有那么致命。所以与其想着怎样优化体验，不如看看是不是还有什么可以带来增长的方式，比如扩充下一类用户，或者更多的生态、品类等等

另外有个例子是关于一个朋友的，这个朋友工作很拼，在怀孕的时候周末都不休息，她当时负责2个业务中的一个很差。她调研了相关用户，把用户做画像分层，也找出了可以带来增长的方式，但是发给当时的合作方，他和他leader都是想混混日子的类型，就应付了一下，也没有往上汇报。在当时，级别差两级去沟通就很费劲了，这家公司在绩效期，也不强制要求给合作方评价，所以问题得不到解决，这些辛苦却换不来的成长
最后朋友就离开了，但她的性格闲不下来，而是找了一份挑战更大的工作。在之后的几份工作中，一路得到赏识和重用，充分发挥了能力。HR告诉她主管的评价是，没有做不好的事，就算不带设计团队，也可以转行带别的团队甚至创业。
他现在的公司，上下级也要互相打评价。所以身为主管，本身也要真的能力强，不然会被下属挑战，所以大家的话语权，就靠自己的能力和人品，简单明了，行就上，不行就下。团队的同学都说在她来了之后，他们有干劲多了。他们之前也很积极提方案，但总是被说优先级不高，其实是没有找准更值得做的项目。
所以建议是，首先看看是否是自己的问题，如果在和他人充分沟通后，明确问题确实不在自己身上，那你改变不了环境，就改变自己。或者你本身所在的公司挺好的只是部门不好，那就换个部门，找个级别相对弱化，专注于能力本身和项目本身的公司，成长会非常快。

作者：贝贤设计笔记

转载请注明：站酷

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

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

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