jankspace精准概括这类痛点：产品对外宣传全链路无缝自动化，实际使用却要在账号、支付、文件、权限间反复跳转，消耗用户耐心却毫无体验增益，属于设计失误带来的无效负担。消费心理学宜家效应佐证：用户亲手投入步骤完成事物后，会自发抬高产品价值；动手参与的沉没成本，最终转化为情感与记忆沉淀。
| 摩擦分类 | 用户体感 | 典型场景 | 设计决策 |
|---|---|---|---|
| 坏摩擦 | 被迫填坑、烦躁流失 | 重复登录、错乱跳转、无效排队 | 全盘删除优化 |
| 交易必要摩擦 | 安全感确认 | 支付二次核验、隐私授权 | 精简话术、保留必要步骤 |
| 仪式型好摩擦 | 沉浸场景、充满期待 | 开箱、线下试穿、集章打卡 | 结构化设计，配套情绪回报 |
| 记忆型好摩擦 | 愿意投入时间、加深印象 | 长内容观看、线下展览动线、手作 DIY | 设计体验峰值 |
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
留存边界：极小众精细化定制场景，配置向导保留兜底入口，不作为主流操作路径。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
列表页就是以展示列表 List 为主的页面，所以我们需要先理解列表是什么。
列表源自编程术语，是一种数据结构，即按照线性顺序排列的数据项集合（有限序列）。说人话，就是按照一定顺序展示数据的形式。
我们再用UI设计的角度来理解它，可以把它分为 “列” 和 “表” 两个部分。我们先理解表，表就是“表格”的意思，这也是计算机中存储数据最基础的形式（关系型），我们在页面中看见的多数内容都以这种形式记录。
列则是动词 “排列” 的意思，用一定的逻辑、方法、顺序将表格排列出来。这种排列是要经过设计和调整的，不会和原来的表格完全一致。
也就是说，列表设计是种对表格的转换，是种对数据的可视化呈现形式。
之所以要强调这个，就是因为想要做好列表设计就离不开对数据的理解，一个专业的列表设计不是做一个好看整齐的重复性组件，而是将数据表格清晰有效的反映出来。
数据表格对列表的影响包含下面几个要素：
1. 属性字段的影响
属性字段就是列表内要放的具体信息点，也就是数据表格中的表头。比如一个商品列表中，要放商品图片、商品名、品牌标签、节日标签、营销标签、销售量、好评率、价格、原价……每个独立的信息就是一个字段。
而一个真实的项目列表内，往往会包含非常多的字段，所以开始设计前要先搞清楚数量和明细，以及它们各自的含义。一方面是设计中不能有字段的缺失，另一方面是字段中包含对应的权重、分类，是设计前必须要确定的信息。
比如下面的列表内容，就包含了大量的字段信息，而这些字段既有权重的强弱，也有分类的整理，是经过设计师的专业分析和设计的结果。
2. 属性值的影响
属性值就是每个属性具体放什么内容，有什么限制。比如商品名，肯定是放商品名称的文本，但文本一般是什么样的，最长支持多少字，这些就是属性值的基本信息。
属性值在开发环境中只能是文本（字符串），但在设计中这个值就不一定只是文本，可能还是图片、图标、符号等内容，中间会有转化过程。比如用户列表中，用户有不同的 VIP 等级，数据中记录的等级肯定是文本性质的，而展示出来却可能是专属的黄金、白银、青铜图标。
属性值的认识同样非常重要，决定了列表的设计是否准确，符合产品的规划。
3. 字段状态的影响
最后字段的状态，就是字段展示的逻辑，简单解释起来就是字段什么情况下出现，什么时候隐藏，出现的时候显示什么内容这三个问题。
比如美团的列表中，有美团商家列表中，运输标签有美团快送、专送、全城送、商家自配等不同类型，而下方的配送时间也在样式上会有差异，这就是对字段状态的表达。
而越是复杂的列表，包含的字段状态差异就越大，往往会直接影响列表的样式，所以设计过程中就要体现尽可能多的样式状态，也就是设计它的不同变体，确保在各种场景中它们能正确显示。
想要设计好列表，就要面对上面提到的三个问题。优秀的列表不止是一种视觉结果，而是一种能兼容相关数据展示的容器规则。
接着我们来理解列表页的主要框架和布局形式，入门它的基本设计要点。
首先列表页不是只有列表一种组件，多数还会包含对列表数据进行搜索、筛选、排序的组件。
除此之外，部分重要的列表页还可能在顶部放运营模块，用来展示一些热门推荐内容或单纯作为广告位。
运营内容放顶部且篇幅较小是因为页面形式的限制，不能在顶部放太多内容让列表被顶到第二屏去。所以目前的设计为了更好的塞入内容，就会选择在列表中插入其它数据，比如纯运营广告，也可能是内容推荐，或者是模块入口等。
总结起来，列表页的主要框架就是顶部搜索栏、特殊模块、筛选排序栏、列表区域的组合。
而最关键的列表区域，可以使用不同的列表来展示信息，我们可以简单分成“单列”和“多列”两个布局大类。下面我们就分别对这两个分类类型做个解析。
1. 单列列表
单列列表就是一行只有一个数据对象的列表形式。而单列列表模式中还区分两种类型的列表，一种是引导型，一种是展示型。
引导型就是引导用户点击进入查看详情，比如商品列表、酒店列表，是为了让我们在列表中找到感兴趣的内容点击进入详情页面。
而展示型，就是直接在列表中展示主要信息，让用户直接顺着列表的顺序查看主要的内容，而不是进入到详情页查看。最有代表性的展示型列表，就是朋友圈这类动态列表了。
单列列表对单个数据对象的展示空间较大，但是单屏浏览数据量就会减少，适用于数据对象字段较多的场景。
2. 多列列表
多列列表就是一行会展示多个数据对象的列表形式。通常移动端的多列列表只有两列，在少数情况下才会出现三列。而两列模式中，也包含两种布局形式，一种是等高展示，一种是瀑布流。
等高展示就是列表内数据对象的高度是保持一致的，每个数据对象的尺寸统一左右对齐，适用于字段类型、内容相对统一变化小的场景。
而瀑布流，则是数据对象高度不一致的多列布局形式，相对更灵活适用面更广，适合字段类型、内容变化较大，不同数据对象的差异极大的场景。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
我想这是很多新手设计师都有过的感受，明明懂了很多设计知识，但到真正设计的时候还是会出现迷茫或者没思路的情况。
造成这种情况的主要原因是，虽然我们每天看了大量的设计文章或者技法，但没有第一时间应用到设计实践中。
换句话说就是，我们每天看的设计内容可能跟我们实际做的工作需求不够搭边，这样就很容易造成拿到一个新需求后没有想法，感觉之前看了很多设计图或者文章都没派上用场，不得不重新找竞品找参考才能展开设计。
就像学了一节新课程，如果没有第一时间做配套的练习题，等过了一周再做练习题发现根本不会做，因为之前学的课程早都忘得差不多了。
北京兰亭妙微UI设计公司：下面展开讲讲如何避免这种情况，建立自己的设计成长体系。
对于设计技法vs设计原理的问题，我觉得对于设计师来说同等重要，但具体要结合你现在的工作情况找到一个侧重点。
举个例子，比如当前的工作偏UI视觉多一点，需要常做一些运营活动图，那么日常就可以多侧重练练技法，多做视觉练习；如果当前的工作偏向纯UI，那么就可以多重视设计理论，多思考产品规划、交互流程、用户使用体验等等这些产品交互相关的知识，用理论支撑起我们的设计方案。
这样既能保证我们能很好地胜任当前的工作，还能让我们在持续的工作中不断有进步有提高。
对于平面能力差的问题，我觉得平面设计能力是基础。可能很多同学在大学时有过这种体验，无论你的专业是视传、数媒、产设，甚至摄影，都需要经历平面设计这一关。排版、手绘、字体、后期合成等等这些平面能力需要我们不断练习实践。
现在AI绘画工具的出图效果都不错，大家可以好好利用起来辅助出图，补齐UI设计师在平面设计上的短板。
总的来说，平面能力要多练习多积累，日常工作中还是建议灵活运用“AI+设计”的形式，也能打造出好的效果图，没必要为了某个视觉效果死磕PS而浪费太多工作时间。
针对看了很多设计但做需求还是没想法，以及到底怎么学UI、建立自己的设计体系这些情况，我结合自己的经历总结一下，希望能对你有帮助：
首先还是多积累，多看好的设计，审美需要一直提高。比如每天早上我都会拿出半小时的固定时间去Pinterest或者花瓣里去看各种各样的设计图。
需要注意的是，这里的看也分为两个方向：一个是日常看图，一个是专项看图。
其次，每天看的图很多，就需要把图都整理一下，这个时候就需要建立一个系统性的设计素材库。
拿花瓣举个例子，在花瓣里可以创建各种各样的分组。
比如APP是一个大的分组，在这个APP的分组里面可以建各种各样的画板，像APP-首页、APP-导航栏、APP-标签设计等等；再比如网页设计是一个大的分组，我可以在网页设计底下创建网站首页设计、网站登录页设计这些画板。
这样整理的好处一个是让我们每天看的图更加清晰有条理；另一个是有了分组/画板后，接到新的设计需求后就可以直接定位到某个分组里，看看我们之前创建的画板里有没有类似的一些参考图，省去了从0~1再重新找参考图的这种过程。
而且看到自己采集的参考图突然派上了用场的过程，对于设计师来说特别棒！这说明我们每天看的内容有价值，不只是在收藏夹里吃灰。
比如要设计一个UI标签，我们可能需要反复去创建的素材画板里看各种各样的标签设计，这样不止一次地反复看收集的素材，看的多了之后我们就对这些素材图特别熟悉，这样就不怕后面的设计再没思路。
现在每天网络上都有特别多的零碎信息，所以这种清晰的整理是一个特别有效的成长方法。经过这种「先整理再回看再设计」反复练习的过程，会有一个更清晰的设计体系和工作流，设计能力肯定会有一个质的提升。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
通过制造视觉元素的差异—— 让 “不一样” 的元素从周围环境中凸显出来，自然成为视觉焦点。
引导用户注意力优先落在关键信息或操作点上，这就是对比原则，我们可以通过形状的对比让卡片突出，增加视觉表现力：
在一些视觉页面中，也可以用异形容器增加视觉表现力，可以结合主题设计容器，例如下方就是一个以纸质火车票造型作为卡片背景的例子：
也可以结合内容设计容器，例如页面的内容是感谢用户，就可以从感谢信或者信纸的角度设计容器：
在设计中，想要为卡片或页面增加形式感，丰富背景是直接且高效的方式，可以从颜色、底纹、装饰元素这三个核心维度展开，让背景不再单调，为整体设计加分：
1. 优化颜色增加背景的形式感
可将背景的无彩色（如黑白、灰度色）替换为带有明确色相的有彩色（如柔和的薄荷绿、清新的天蓝、低饱和的珊瑚橙等）
借助 “无彩色与有彩色” 的属性差异，让卡片与周围的浅灰背景或普通卡片形成直观色彩对比，快速从整体布局中跳脱出来：
也可以将卡片的单一纯色设计，升级为多种颜色的渐变效果 —— 通过这种渐变色，让卡片与周围的背景、其他组件形成鲜明对比
从而快速从整体布局中凸显出来，成为视觉焦点，快速抓住用户注意力：
2. 给背景增加底纹
在背景中增加底纹（如低透明度的几何纹理、轻微的肌理质感等），不仅可以强化视觉层次，还可以向用户传递页面的风格氛围，增强记忆点。
例如科技类产品用细线条网格底纹增强科技感，古风类产品可以用纸张等营造复古的氛围感：
下面列举了一些常见的底纹元素，可搭配图层的混合模式、不透明度使用：
3. 在背景上增加装饰
可以根据页面/活动添加合适的装饰元素，装饰可以是图形、文字等与页面相关的元素。
装饰元素主要是为了平衡界面视觉，优化整体协调性：当界面存在 “大面积空白” 或 “元素分布不均” 时，装饰元素可起到 “视觉平衡” 作用。
这里的文字不仅是卡片标题，也可以是活动标题或者页签导航，那么文字的设计感可以怎么加呢？我们可以从图形装饰、线条装饰、文字装饰、背景装饰四个方面给文字添加设计感：
1. 图形装饰
将图形放在标题空白处增加标题的设计感：
也可以用来填补标题的空白区域，平衡视觉：
用图形代替文字的某一个笔画，传递产品的氛围：
2. 线条装饰
用简单的线条突出标题，辅助信息分层，突出重点信息，降低认知成本：
3. 文字装饰
用风格独特的字体写一句英文作为标题的装饰：
另一种方法是将文字放大起到装饰作用：
4. 背景装饰
在标题后面增加背景，不仅可以保证标题的可读性，还能让标题抓住用户的眼球，进一步强化视觉表现力：
尽管上面的案例分别展示了不同的提升形式感的方法，但在实际设计中，不必局限于单一形式。
将多种手法灵活组合（比如为卡片搭配有彩色背景的同时，叠加轻量底纹并点缀细节装饰），更能放大视觉表现力，让界面摆脱单调感，呈现出更丰富的层次与质感。
如果这篇内容对你有启发，或是你有其他提升形式感的实用思路，欢迎在评论区分享交流，一起探索更多设计可能性～
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
一般用户在登录后台管理系统后，后台首页就成为了用户与产品交互的第一个页面，这某种程度上也凸显了这一页面的重要性。那么，后台管理系统的首页设计可以遵循哪些策略？本文作者结合实战项目发表了他的想法，一起来看看吧。
很久没有更新文章了，一方面文章选题困难，公众号的阅读量真是有点惨不忍睹，写作的动力有所下降。另一方面工作确实比较忙，时间精力有限，最近参加了多个工作项目一直在加班。
今天总结下项目过程中，关于后台管理系统首页设计引发的一些思考。
主要的内容包括：
后台首页是用户登录后，与产品交互的第一个页面，信息内容非常重要，作用也非常明显。一方面可以帮助用户宏观了解系统的整体运行状态，洞察业务问题。另一方面可以帮助用户快速处理业务问题，不需要到专门的功能页面操作，缩短用户的操作路径。
后台首页需要依托整个产品的功能体系，根据用户角色的职能、权限、业务范围，提取关键的用户关心的业务功能点搭建页面内容。所以一般是在业务功能完成之后再进行首页设计。这就要求产品经理能够从全局视角理解用户和场景，才能做出有效的设计方案。
另外首页不属于具体的业务领域，所以一般不会安排固定的产品经理，而是由产品经理兼任。如果产品设计没有整体规划，首页就容易被忽略，成为「三不管」地带。
根据以往的设计经验，我总结了以下四点：
首页设计要求产品经理对用户角色的分类、业务职能有比较深入的了解，否则产品设计就可能变成内容堆砌。
通常后台系统需要面向管理层和执行层两类用户，他们对于信息需求存在比较大的差异。管理层更关注宏观层面的统计信息，方便了解业务动态，从而制定工作决策等，所以各类可视化图表就成为首页重要的内容组成。
对于执行层用户，主要是完成具体的工作任务，所以更加关注明细数据。除此之外，适当地增加一些统计数据，可以更全面了解系统状态，也便于对上汇报，减少人工统计的工作量。
B 端产品了解用户和场景并不容易，如果只靠“猜测”做设计，就会发现首页设计有很多种可能，怎么做似乎都对，怎么做似乎都不对。而且参与的人越多，想法也会越多。
所以在项目中，需要尽可能地收集用户场景信息加以分析完成设计，即使存在一部分“猜测”信息，也需要能够自圆其说，才能更好的推进产品设计落地。
对于小的业务系统，单独的一个页面就可以涵盖所有的业务信息，内容也会比较清晰简单。
对于比较大的业务系统，首页包含的消息会比较多，例如阿里云、腾讯云等产品，一个页面内容无法承载所有的信息。因此需要根据场景/主题拆分首页内容，便于用户有目标地快速查看信息。比如阿里云采用的是资源管理、安全管理、成本管理等主题去划分首页内容。
1）串联内容，缩短路径
某些场景下，首页要满足用户快速处理业务工作的需求，例如待办事项，审批操作等，通过明细列表的展示，结合抽屉等详情信息展示，用户可以在首页直接处理工作任务，无需进入到功能页面。
「常用功能」也是首页的常见组件，类似操作系统桌面的快捷方式一样。可以将一些二级甚至三级功能作为常用功能放在首页中，用户不需要通过菜单逐级点击，即可进入功能页面，对缩短用户操作路径也有很大帮助。
2）高频常用功能信息聚合
首页的价值在于帮助用户简单、高效的认知系统，是高频常用功能的信息聚合。因此需要尽量减少花哨、不实用、看似高大上的功能，或者改变展示形式，保证重要信息的优先展示。
有些 B 端产品的门槛比较高，为了降低认知成本，于是有人希望在首页中增加系统介绍、系统架构图的形式来展示产品的功能流程，在产品演示是可以更好的让用户理解产品功能。
这些本来应该是在 PPT 中展示的信息，却要放到首页中展示。看似酷炫的一张图，实际上在应用阶段对用户的工作没有任何帮助。因为用户根本不关心你的系统架构是什么，需要的是产品帮助他解决工作中的问题，带来的效率提升。
即使用户需要了解这些信息，也不是每天打开首页就要一眼看到，可以采用其他的呈现方式。比如用户引导，或者与业务信息关联，既可以呈现出业务流程，也可以展示业务信息，又或者首页增加入口、引导在帮助中心查看。
B 端产品业务功能是面向用户角色的，同一角色的用户具有相同的工作任务。但是首页则有所不同，同一类角色的不同用户，关注点也不完全相同。尤其是业务系统内容较多时，首页内容可定制就成为了满足不同用户信息需求的方式。
当然系统的定制化并不是让用户从零定制，而是在系统初始内容基础上，重新组织页面内容、调整页面布局等。否则定制化反而会带给用户更差的体验。
在项目设计中，就碰到了这个问题。有同事认为首页应该简单点，避免过多的信息量增加用户的学习成本。
当然这个问题需要根据产品定位具体分析。不过总的来说，我个人认为首页应该丰富一些。
首页是信息聚合页面，天然就会有较多的信息内容，用户需要通过信息传递了解系统的状态和变化，人为的过滤掉内容后会影响信息的全面性。
其次用户有信息选择权，通过一定时间的摸索，可以形成自己的信息查看轨迹，或者个性化定制首页内容过滤掉工作中冗余的信息。
而且B 端产品经过多年的发展，单从布局和表现形式上看，首页已经有比较成熟的设计模式了，大多数企业用户也形成了统一的认知和习惯。卡片风格是首页最常见的展现形式，卡片可以让页面分割更加清晰，方便信息读取，有助于弱化信息量带来的复杂感。即使不采用卡片分割， 可以通过间距、标题等引导用户视线，划分页面内容。
简单总结下：
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
vivo小游戏的改版揭示了轻量化产品的设计本质——从点击量到用户时长的指标跃迁。本文深度拆解其首页分发逻辑重构与去低幼化视觉升级，揭秘如何通过动态专题矩阵、情感化设计和品牌色系统，同时实现商业价值提升与品牌心智进化。
小游戏业务的核心特点是“轻量化启动，依赖时长变现”。
在产品形态方面，“点击即玩”是重要特征，其试错成本极低，用户可快速、反复尝试多款游戏，使用时长比点击更能代表深入程度。在营收方面，对于依赖广告变现的游戏，时长直接影响广告曝光次数；对于内购游戏，时长则意味着付费窗口期的延长。“停留”比“点击”更能创造商业价值。
依据以上两个原因，小游戏业务成功的关键指标并非传统的分发效率（点击量），而是用户游戏总时长。这是小游戏设计改版的第一个核心目标。
<图：业务目标>
除此之外，在存量竞争时代，设计不仅仅是“做得好用”，更需要“做得准确”——准确理解业务，准确洞察用户，准确传递品牌心智。
“小游戏”，在很多用户的印象中，往往是“休闲、轻松、可爱，甚至样式上带点低幼感”的存在，这造就了其固有的用户心智。
实际上，【vivo小游戏】希望服务的用户是丰富、全面的，所以矛盾便浮出水面——亟待扭转“低幼感知”，这就是小游戏设计改版的第二个主要目标。
在以上两个背景之下，本次改版目标如下：
目标一（来自业务目标）：提升游戏时长，让分发更精准，帮助用户“玩进去，愿意留下”。
目标二（来自用户心智）：去除低幼感知，重塑“年轻、放松、品质”的产品形象。
<图：本次设计改版的两个目标>
这不仅仅是一次界面优化，更是一次以设计驱动产品品牌升级的系统性设计。下文将从三个维度，分享我们的设计推导与落地过程。
重构首页分发逻辑，使其服务于“提升时长”的目标。对首页三大核心模块——“用户爱玩”、“平台推荐”、“随机游戏”——进行了数据洞察和体验重塑。
<图：首页改版的三个重要模块>
数据显示，“最近爱玩”模块贡献了极高的总游戏时长。这证明，用户主动沉淀的偏好列表，是游戏启动的最强驱动力。
新的洞察随之而来：绝大多数的用户，其“最近爱玩”的游戏只有1-2款。旧版首页将4款游戏“平铺”外显，反而稀释了用户的注意力，导致分发的目标不清晰。
针对这一现象，我们的A/B Test结论是：满足需求，比增加曝光更重要。新版设计强化了“用户爱玩”的模块心智，使其成为用户返回时的“第一眼”核心，让用户能最快回到那个“TA真正想玩的游戏”，而不是在多个似是而非的选择中犹豫，从而直接锁定并延长核心游戏时长。
<图：左图为老方案，右图为新方案>
“平台推荐”是发现新游戏的主阵地。我们放弃了“一招鲜”的模式，转而构建了一套专题矩阵，针对不同游戏和用户意图，设计差异化的推荐理由：小编推荐专题：从“系统”到“有温度的个体”建立了“安利官”角色，把真实的小编推向用户。用真人头像、亲切口吻和官方认证，打造“有温度、有信任感”的真人推荐。情感化与专业性的结合，极大地拉近了与用户的距离。
<图：小编推荐>
<图：小编推荐>
场景化专题：从“游戏是什么”到“我此刻需要什么”将游戏分发融入用户生活场景。例如，“早上好：提神醒脑”、“下午好：坚强摸鱼人”、“晚上好：放松一下”。通过时间、情绪、状态的匹配，让游戏推荐更具说服力和即时价值。
<图：场景化推荐>
高品质专题：从“文字说”到“视觉证明”针对精品或内购游戏，我们用更大尺寸的卡片、更具沉浸感的图文或视频预览，来直观呈现游戏的“品质感”，将“高质量”这一抽象概念具体化。
<图：左图为老方案，右图为新方案>
玩法专题：用IP强化“类别识别”在“男生爱玩”、“挂机轻松玩”等玩法标签下，将专题内最具代表性的头部游戏IP（如“太空行动”、“一波超人”）进行视觉放大，强化用户对专题游戏类型的“一眼识别”。
<图：玩法专题>
魅力信息前置：从“默默无名”到“热度可见”将“XX万人在玩”这类强吸引力信息，从传统的文字区剥离，设计为高识别度的半透明标签，与游戏Icon强绑定。通过调整色彩、字重，使其在不遮挡Icon主视觉的同时，成为辅助用户决策的“魅力因子”，有效提升了点击意愿。
我们注意到，有相当一部分用户是在首页“逛了好几屏”后仍未找到目标，此时我们猜想“随机一下”可能是他们留下的最后机会。
强化了其“提供一次惊喜、一种可能性”的心智，为探索型用户保留了一个“轻量级出口”，这背后是对用户分层和场景的细致体察。
<图：随机玩>
设计思考：分发设计的精髓在于“对症下药”。我们不再追求统一的曝光策略，而是将首页视为一个动态的、有层次的决策场。“用户爱玩”是确定性满足，“平台推荐”是引导性探索，“随机游戏”是可能性兜底。
设计的价值在于，为每一种用户路径，都铺就了最合适的体验轨道，最终合力指向“停留与探索”的核心目标。
“去低幼化”不仅是风格的转换，更是品牌心智的重塑。为此，我们建立了一套完整的研究与执行方法。
“低幼”是一个感性评价。为了找到解法，我们首先要将其“可视化”。
对比了市面上的儿童教育产品，并结合对自身旧版设计的审视，提炼出三个维度的“低幼”视觉特征：
这三点，共同构成了我们需要打破的旧有特征。
<图：关于低幼感知来源的研究>
有了要规避的视觉特征，同时，要确立新方向。结合产品特性和目标用户，我们定义了vivo秒玩小游戏应有的产品调性：
<图：从情绪板到色彩定义>
色彩体系重构
定义品牌色：我们摒弃了“大杂烩”式的色彩，定义了“活力黄”与“轻松绿”作为品牌主色，分别承载“生命力、有趣”与“放松、自然”的情绪。并严格设定了60%背景色、30%白色卡片、10%品牌色的色彩使用比例，建立清晰的视觉层次。
<图：品牌色>
分层处理原则：
<图：分层处理原则>
注入“情绪价值”：
<图：“海岛”微动效>
<图：随机玩>
传承品牌基因：我们没有割裂历史，而是巧妙延续了品牌核心符号“闪电”。
新版设计中，“闪电”图形以“斜切线”的形式，融入魅力信息标签、专题卡片头图等细节，在去低幼的同时，保留了用户对品牌的核心认知，完成了视觉语言的平滑演进。
<图：老版本页面示例>
<图：新版本页面示例>
设计思考：去低幼化不等于“高冷化”或“同质化”。我们的解法是建立系统性的设计语言。它不是对某个元素的修修补补，而是从底层色彩逻辑、视觉层次、情感传达、品牌符号多个维度进行的一体化重构，最终在视觉上完成了从“儿童乐园”到“年轻人休闲客厅”的转变。
回顾整个项目，这不仅仅是一次界面优化。我们将其视作一个通过设计系统性地解决商业和品牌问题的范本。复盘整个过程，我们有几点深刻的心得，这几条心得从我们刚刚入行到目前都适用，感受愈发深刻：
1、理解产品是在做什么：设计必须服务于商业本质。深刻理解“小游戏靠时长盈利”这一核心，才让我们敢于将“提升分发效率”的惯性思维，转向“提升用户停留与沉浸”的差异路径，这是所有设计决策的“北极星”。
2、抓住重点：资源永远是有限的。通过数据分析，我们精准地识别出“最近爱玩”模块是提升大盘时长的关键。集中优势资源，在关键模块上做深做透，才能带来数据层面的最大回报。
3、以用户需求为导向：用户的核心需求是“找到我想玩/可能爱玩的游戏”，而不是“看到更多游戏”。设计要做的，是提供“理由”和“路径”，帮助用户高效决策，而不是制造“信息过载”。对“最近爱玩”模块的聚焦，正是这一思维的体现。
4、任何时候都不要忘记有趣。在追求“去低幼化”的过程中，我们并没有走向另一个极端——“严肃与无趣”。相反，我们将“放松”、“惊喜”、“有趣”这些属于游戏产品的核心情感价值，通过动态效果、场景化文案、情感化设计重新注入体验。
我们交付的不仅是一个“更好看、更好用”的首页，更是一个“更清晰、更高级、更具吸引力”的vivo小游戏品牌。
注：插图中全部实例均为设计稿，非线上截图。游戏icon、名称、在玩人数等基础信息非线上信息。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
作为一个 B 端设计师，我们究竟要如何理解组件？
当接触到一个新组件时，通常会陷入到迷茫。一方面是组件过于的熟悉，我们在日常的工作当中会频繁接触到大量的组件内容（毕竟是组件设计师...）另一方面则是新的组件不断涌入，我们作为设计师一时之间不知道如何进行分析，今天我们就来聊聊 B 端设计师与组件之间的“爱恨情仇”。
先来简单说说什么是组件？
我认为组件就是组成用户界面的基本元素，也是前端在开发过程当中，抽象出来可以复用的模块。对于定义大家不必过于纠结，最主要还是要了解其使用，比如在下方页面当中，会包含有哪一些组件？
A. 输入框 开关 上传 按钮 文本提示
B. 输入框 开关 上传 按钮 气泡卡片
C. 输入框 开关 图片预览 按钮 文本提示
这就是我们要了解关于一个组件的判断流程，我认为会有三步：形式、交互、场景。
其实我们在去辨别新一个组件的时候，会优先关注组件的「样子」，进而来进行辨别。
比如下方的两个组件，我们其实很快速就能判断出一个是 单选框，一个是多选框。因为在我们潜意识当中单选为圆形、多选则为方形，因此对于一个组件的第一印象则会和它的形式相关。
但很多时候，随着业务的变化，我们也会给组件更多含义。比如在下方三个新建按钮当中，因为他们的形式不同，所对应的含义也并不相同。
通过形式上，我们可以理解为：
再举一个例子，比如在这三个选择组件当中，正是由于其组件形式的变化，导致它们在使用上也会存在较大差别~
当然，正是因为它们样子的改变，组件的使用含义也会产生变化。
知道它的样子还不够，我们还要了解它究竟应该如何操作，因此就需要明确对应的交互状态。
比如同样给到大家两个组件，请你去辨别这两个组件分别是什么？
其实我们很难进行细致的辨认，因为这两个组件在形式上基本相同。但我们一旦将其动起来，你就会发现不同，左侧的是一个按钮，而右侧则为链接。
其实我们在辨别交互状态时，通常会存在两种辨别维度：常规交互与业务交互。
常规交互是指在网页端当中的基础交互，比如 Hover、点击，这种情况大多数设计师经常接触，因此我们就不花太多时间放在这上面。
第二种交互类型是业务交互，它主要出现在特定的页面上。比如在图表中的下钻、过滤、联动、缩放等等；在表格就会有 冻结、拖拽、选中 等交互，这些内容都是我们在涉及特定页面时需要关注的。
所以我们再去理解一个组件的时候，也需要去考虑这个组件所关联的交互状态，这样才能够对于这个组件有个更为全面的认识。
作用对比则是去思考这个组件与其他作用类似的组件之间究竟会存在什么差别？
因为每一个组件都会有它存在的意义，我们可以通过横向单维度的对比，了解到这个组件它所对应的特点。
这个我们来举一个完整的例子，带大家感受一下~
举一个例子
比如最近在行业当中，出现一种新的组件叫做：蚂蚁线
刚开始在腾讯云的官网看到了蚂蚁线，但其实我对他真的一无所知。于是乎，我开始了组件调研。
从形式开始，你会发现“蚂蚁线”是位于文本下方，通过虚线的方式呈现。
通过这种形式，我们能够拓展一些其他的类似样式。
比如在飞书当中，当你写一个错别字的时候，飞书会提供默认的下划线提示你修改错误。但这个下划线是一个实线，并且会以黄色作为标注，这就是形式上的差异。
其次，在交互上，在整个页面中，当你将鼠标悬停在虚线上时，这个提示会告诉你这里有信息可以进行预览。通过这样，我们就能大致明白“蚂蚁线”的含义：它出现在文本下方，使用虚线的方式提示用户这里有更多的信息。用户通过将鼠标悬停在虚线区域的文本上，便可以查看更多内容。
最后，在对组件进行对比时，思考与“蚂蚁线”具有相同作用的组件，我想到有两个：Tooltips和Popover。并简单整理它们在日常页面的使用，一共会包含三种相同的情况下的交互形式。同时，明确分析纬度以信息凸显程度进行对比，进而能够将这三个组件进行区分。
并且在页面中，交互的形式也会有所不同。因此我们简单整理，会有三种相对应的对比方式。并明确它们，以信息干扰程度作为标准，来进行单维度的划分。进而就能得到“蚂蚁线”组件的一个整体的用途。
关于组件，确实由于时间有限，给大家分享到这里。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
我们的世界正在快速的数字化，这也是为什么UI界面在近10年来一直都是热门话题，同时，这也意味着，作为设计师的我们比以往任何时候都要专注打造高素质的UI，以及让用户欲罢不能的用户体验。我们需要好的UI和优秀的设计。
兰亭妙微设计公司，一直在追求好设计，优秀的设计，让人难忘的设计，能够脱颖而出的设计。我们相信设计是有迹可循的，有成熟的、可考量的标准来衡量，它甚至可以作为我们设计的方向而存在。
从网站到手机，从家用的恒温控制器到汽车的控制面板，所有的这些UI构成了我们的日常数字体验。越来越多的屏幕和日渐庞大的数字化内容，使得我们对于优质的UI设计越来越渴望。
虽然好设计的原则是老生常谈，但是我们还是要经常总结，结合自己的设计，三省吾身。
优秀的UI界面是隐形的，华丽的装饰和不必要的元素都已经被剔除，简单直接的页面逻辑和直观必要的元素构成了这样的UI界面。设计UI的时候，你在添加任何元素的时候，都最好问一下自己“这个功能是否会影响用户现有的任务？它是否真的必要？”先将你的UI内的元素限定为必须的，专注于核心的用户体验。
如何设计一个简单的UI界面，Maaemo 的产品在这方面就做的很突出。这个挪威餐厅的网站上，你看到的是预订的表单，其他次重要的内容被隐藏在汉堡菜单当中，避免引起混乱。用户不用浪费时间去来回浏览扫视，直接进入预订的环节。
清晰应该是所有UI界面都具备的基本属性。请记住，你的UI界面存在的目的是让用户能够更便捷地同你的系统进行交互，为此，它需要能够清晰地同用户进行沟通，如果用户无法弄明白界面的使用，会因此感到沮丧。
保持清晰的UI界面设计并不难，首先要保证一点：按钮和操作的标签文字指向性要明确，保持清晰的信息传递，让用户能够快速弄明白交互的指向性。
这个时候，你也别忘了开头的“简单”的原则。尽量不要在UI中使用冗长、复杂、难以记住的文本标签，你的用户不会花费时间去读，也不会去欣赏它们，越复杂越“独特”，就越会影响整体的用户体验。
一个词能解释清楚的事情，千万不要用更多的语言去表述。保持简明能够让你的界面更加清晰，节省用户的阅读时间，降低认知疲劳。可能精简出直观又易于识别的文本很难，但是做好了是很有价值的，对于整体体验的加分很多。
不论是哪个设计师，都会希望自己的设计能给用户带来一致的体验的吧？一致的设计能够让用户对于你的设计模式更快认知、熟悉，并且在此基础上快速适应整体的体验。人们渴望规律，追求一致性，也希望在实际操作中验证自己所“发现”的一致性。
所以，用户是期望借助自己习得的经验，来探索更多的内容的，而探索能否有效就得看设计的一致性是否够好了。在整个UI设计中保持一致的语言、布局和设计规律，整个用户体验会显得更加“通透”。
用户体验设计的一个重要的目标是要让用户能够凭借直觉来操作UI界面。那么，怎么才能让用户更加“直觉”地完成交互呢？用户要能够自然地理解其中的内容，操作自然就不难了，也就是说，你要让用户对你的界面产生“熟悉感”。所以，你要充分利用用户对于你的设计所熟悉的部分。
当用户对UI界面抱有熟悉感的时候，通常意味着他们对于这个设计有所了解，甚至知道怎么交互，他们明白操作之后大概会发生什么，也知道哪些事情不应该做。所以，如果你能利用好用户对于交互和界面模式的熟悉来进行设计的话，能让你的用户更快上手操作。
汉堡图标就是这样的典型。现在当用户看到汉堡图标的时候，就会明白这代表着菜单。当用户在界面中找不到预期的功能或者服务的时候，会主动地寻找汉堡图标，希望能在其中找到需要的东西。
Born Shoes 这个网站也充分利用了这一点，将熟悉的图标放在熟悉的位置，用户上手就知道怎么用了。
UI界面的视觉层次是非常重要且常常被忽视的一个属性，它能够帮助用户专注重要的内容。如果你想让界面中每个内容都看起来很重要，那么只会单纯地让信息过载，让每个元素都分摊用户的注意力，最终只会让整个设计显得混乱不堪。不同尺寸的字体、不同的色彩和不同的控件最终应该是相互搭配，构成层次，有轻重缓急地呈现给用户，将复杂的结构简单化，帮助用户完成任务。
Budnitz Bicycles 的网站就很好地使用色彩营造出视觉层次，吸引用户关注到网站的特定部分。网站中的按钮在整个设计中显得非常显眼，引导访客点击。
你的UI界面最终的目标是要带着用户完成任务，达成目标，或者去他们要去的页面。不同的流程要求不同，但是最优秀的UI设计有个共通的特征：高效。提升界面效率最有效的方法是进行任务分析。
熟悉用户的流程，了解用户的目标，然后在此基础上尽量简化流程，使得用户能够便捷快速的达成目标。在此过程中，仔细考虑每个功能细节，规避可能存在的漏洞，帮助用户快速完成用户流程。
Mulberry 在他们的活动页面上提升了用户效率，帮助用户更快地挑选节日礼物，降低繁复的搜寻和思考过程。
UI界面响应牵涉到体验的方方面面。首先，UI界面的响应应该是迅速的，它背后的整个系统应该能够快速反应，否则不够快速的响应会让用户感到沮丧，缓慢的网页加载过程会令人抓狂。
事实上，如果你的网站没有在3秒内加载完成，就会开始有访客因此而流失。根据 Kissmetrics 的统计，超过40%的访客会在加载速度超过3s之后而离开，而加载时长的增加，更多的用户会随之离去。
此外，UI界面的响应是否合理，是否足够“人性化”。当用户点击界面元素的时候，用户希望知道他们的操作是否成功，而这个时候，合理而快速的界面反馈就显得很重要了。比如，当用户点击一个按钮，按钮的状态变化，又或者界面加载时的加载进度条，都能够让用户明白状态的改变，以及他们操作的结果。
界面的合理响应让UI更为富有人性，减少错误的发生，并且让交互进入真正良性的循环。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
响应式是一种网页前端技术，让网页可以根据分辨率、设备的变更，自动调整样式和布局。
它的诞生起源于移动互联网兴起的热潮，彼时智能手机访问网站的需求激增，但多数网站的适配都是面向电脑端的大屏幕，仅有少数网站会额外开发符合移动端显示需求的版本（自适应）。
响应式的提出，就是为了解决这种问题，通过建立一套约定好的设计、开发方法，用一套代码自动适配台式电脑、笔记本、平板、移动端等各种设备，提高网站的兼容性和开发效率。
而学习响应式，首先就要从浏览器开始说起。
浏览器是一个非常特殊的软件，比如大家熟知的 Chrome、Safari、Eage 等，我们日常访问的所有网页，都需要通过浏览器加载并渲染出最终的样式。
可以把网页 HTML 文件理解成是一个程序，而浏览器就是运行这个程序的系统（环境），也就是说解析网页依靠的是浏览器而不是 Windows、Mac、iOS、Android、Linux 等客户端系统。
浏览器即系统中的系统（类似虚拟机)，不管在任何系统或设备上，只要安装了浏览器，就可以用大体相同的规则、逻辑去加载、渲染出网页。
但不同设备的屏幕有很大差异，网页如何识别并匹配这些设备呢？
方法主要有两种，第一种是浏览器会识别当前系统和设备，并提供接口让网页读取。而部分网站会准备多种规格的网页，根据获取的设备类型推送对应的规格，这种做法叫做自适应模式。
通常自适应只区分桌面端和移动端两种，较大的门户、购物、工具类网站，普遍使用自适应模式。因为移动端访问网页的需求并不高，所以会对移动端版本做大量的精简，降低开发、维护成本。
另一种方法，则是读取浏览器视图区域的分辨率。任何浏览器的界面，都包含功能区域和视图区域两个部分，功能区域提供相关的软件菜单、操作按钮，视图区域则是显示网页界面的区域。随着设备和屏幕分辨率的变化，浏览器的大小也会不同，网页视图区域也会跟着缩放。
网页视图注定小于整个浏览器的软件窗口，而浏览器作为软件，在系统中的尺寸不等于系统分辨率（或设备分辨率），一方面有系统的全局组件影响，另一方面窗口并不是非得全屏，用户可以任意调整。
所以响应式网页就是根据浏览器的视图区域做适配，不管你是在电脑上缩放软件窗口，还是在不同的设备、系统中打开，本质上都只是显示区域大小的变更。而在浏览器的检查选项中，模拟不同的设备其实就是缩放出一个指定的视图窗口出来。
这种依赖关系延伸出一个新的知识点，即网页显示的分辨率，和显示设备的屏幕分辨率，是两套不同的体系。
这是因为硬件分辨率和系统渲染的分辨率是两个概念，尤其在今天高分辨率屏幕普及的背景之下。比如我的 Macbook Pro14 寸笔记本，硬件分辨率是 3024 x 1964 (254 ppi)，但在系统的屏幕分辨率选择中，默认的却是 1512*982（即原来的 1/2）。
这是因为硬件分辨率太高了，1:1 渲染的话，那么大多数图标、文字是无法被看清的，所以默认使用了 2x 的规格渲染。但这只是其中一个选项，在 HIDPI 技术的加持下，用户还可以选择别的分辨率，比如我会进一步调高到 1800*1169。
在 Windows 系统中同理，虽然有很多高分辨率的屏幕，但是用户为了看清内容，会在系统中设置 120%、150% 的放大效果，等于为系统分辨率做出变更。
说到底，系统显示分辨率的规格也是无穷无尽的。但是不管外部的转换逻辑有多复杂，规格有多少，都和响应式网页无关，它只需要认准浏览器的视图区域分辨率即可。
所以了解线上案例的响应式布局规则，或者检查已经开发好的响应式页面，并不需要切换不同设备查看，只要拖拽缩放浏览器的大小（主要是宽度）即可获得完整的响应效果。
最后总结起来，响应式网页是面向浏览器视图区域做适配的布局方法，而不是面向系统、屏幕分辨率的适配，这和自适应布局有本质的差异。
在 B 端领域，绝大多数项目都只部分兼容响应式，放弃移动端的适配，即使支持移动端也是使用自适应的混合模式。要面对这些复杂的场景，就月需要理解上面这些基础的概念，否则设计师就无法真正满足响应式项目的前期创建和后期交付需要。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com
