做UI/UX设计的同学几乎每天都要和切换类组件打交道，但很多人总会在开关、复选框、单选按钮之间踩坑——要么用错场景，要么给用户造成认知混淆，甚至引发操作失误。
苹果HIG (人机界面指南) 里明确把开关、复选框、单选按钮这三类，都归为「切换开关」组件。它们的核心共性是让用户在对立的状态间做选择，通过差异化的视觉形态清晰区分选中/未选中的状态。
开关是用来瞬间切换单个功能/设置的开启/关闭状态的组件，一次只能控制一个设置的开关，工作逻辑和我们家里的物理电灯开关完全一致，能让用户一眼看清当前的生效状态。
开关的结构非常简洁，核心分为3个部分：
如果要添加辅助图标，必须选表意清晰、强二元对立的样式，千万别用含义模糊、没有明确正反属性的图标（比如月亮、编辑图标），用户没法一眼对应开/关状态。
开关的核心交互逻辑是操作后立即生效，不需要用户额外点击确认按钮，切换状态时，可配合手柄尺寸的微动效强化操作反馈。
开关必须和描述控制功能的标签搭配使用，标签要简洁直白，不要把文字放到开关内部。这样会压缩视觉空间，还会破坏组件通用性，增加用户识别成本。
复选框的核心定位，是支持用户对一组关联选项，做单项或多项的选中/取消操作。
记住一个核心原则：当用户可以在一个列表里选择多个选项时就用复选框，不用开关或单选按钮。单选按钮的语义是「请选其中一个」，而复选框的语义是「可以选多个，也可以全不选」，二者的底层逻辑不同。
复选框的结构清晰，核心就是选择容器+选中状态图标，通过勾选/未勾选的视觉差异，直观传递用户的选择结果。
如果选项列表较长，建议添加「全选父复选框」提升操作效率，它的交互逻辑有明确的行业规范：
处理一组有关联的多选项时优先用复选框，而非一堆独立的开关。
一方面，复选框能天然传递「选项之间互相关联」的语义，另一方面，它比开关占用的视觉空间更小，页面会更整洁有序。
单选按钮的核心是互斥单选。在一组选项里，用户有且只能选择一个，选中新选项后之前选中的选项会自动取消。
它的语义非常明确：这一组选项里，「你必须、只能选一个」和复选框的「可多选、可全不选」形成了清晰的边界。
单选按钮的结构核心是选中/未选中的状态图标+对应的选项标签。行业通用的视觉规范是：用实心圆点表示选中，空心圆圈表示未选中，保证用户的视觉识别度。
不能打破互斥单选的核心逻辑，更不能让单选按钮出现布局重叠，否则会完全颠覆用户的固有认知，造成操作混乱。
如果选项数量较多、屏幕空间有限，可用下拉菜单替代单选按钮。
但要注意：下拉菜单需要用户多一步点击展开的操作，会增加交互成本，也没法让用户一眼看到全量选项，降低认知效率。因此选项较少时，优先用单选按钮。
单选按钮优先垂直排列，不建议水平排列。
垂直排列时每个选项的图标和标签对应关系更清晰，用户不会看错；水平排列不仅容易让页面拥挤、可读性下降，还会破坏布局一致性，在响应式适配中也更容易出问题。
前面讲了每个组件的细节，这里给大家整理了最简使用规则，设计时直接对照即可。
开关、复选框、单选按钮，都是设计里最基础、最常用的组件。设计时要先看场景、定语义，再选对应的组件，而不是凭感觉、看颜值随便乱用。
当然，我们也会看到一些特殊的设计案例，比如iOS在深色模式的选择里，用了圆形复选框，和我们今天说的常规用法不一样。这种情况，要么是为了整个系统的设计语言统一，要么是有特殊的产品考量，不建议盲目照搬。对于设计师来说，先搞懂这些基础组件的用法、可用性底层逻辑，才是做好设计的根基！
转载自 优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
大家一定经常听说 UI 设计师需要具备产品思维，但又不知道产品思维具体是什么，尤其是很多同学只把产品思维当成是产品经理做需求的能力。
兰亭妙微UI设计公司：今天我们的主题就是分享产品思维的具体思考方式和应用
产品思维一句话总结，就是——通过规划产品形式来解决产品问题的思考模式。
这里我们先明确 “产品问题” 是什么，它是一个非常宽泛的概念，可以说所有产品相关的问题都可以是产品问题，包括但不局限于功能、交互、体验、视觉、技术、服务等领域。
在产品的研发和运营过程中，产品团队总会发现和积累出各式各样的问题，比如功能太简陋不能满足用户需求、交互太复杂用户用不懂、逻辑太复杂技术实现不出来等等。这些问题当然需要被解决，而解决的方式有两种，一种就是直接使用相关领域的 “技术方案” 解决，另一种就是提供新的 “产品方案” 来解决。
这里技术方案是泛指，指产品以外的其它类岗位使用自身专业技能来解决问题的方案。比如用户觉得页面信息混乱，设计师通过布局、尺寸、间距、色彩的视觉调整，就能解决这个问题。或者某些交互设计需要非常复杂的编程方案，前端自己通过钻研技术，来实现这个效果。
比如下面这些就是纯粹的视觉优化方案：
产品方案则是指通过制定或调整产品的功能、服务、表现形式，来解决相关的问题。比如上面觉得信息混乱，不再是改设计，而是直接优化和增减字段信息。交互设计开发起来太难，那就直接调整产品功能，分拆交互步骤降低开发难度。
比如下面这个就是对产品的形式做出了一定的调整：
两种方案各有优劣，但在真实项目中，产品是先于设计和开发的，好的产品方案不仅能提高产品的实际表现，同时还可以大大降低技术实现的成本。所以在解决问题时，团队必然会倾向先使用产品思维来创建产品方案，然后再去实施。
总结起来，产品方案就是涉及对产品本身的调整方案。原则上，这种方案是由产品经理提供，设计师只要跟着产品的要求去做设计就好了。
但在真实项目中，产品不可能考虑到所有问题，尤其是和体验、交互、视觉高度相关的部分。
每当我们每做界面或功能时，碰到所有和产品有关的问题，都需要反馈给产品经理再等它做决策，那么他必然是处理不过来的，项目肯定也做不下去。所以设计师需要在自己力所能及的范围里，尽量自己去解决这些问题，提高项目整体运转的效率和质量。
尤其在一些对视觉要求不是特别严苛的环境中，UI设计的成果往往“能看”就够了，领导或者面试官对设计价值的定义就不会在视觉上，往往会聚焦在产品方案上。就是因为设计师自己有产品思维具备解决产品问题的能力时，可以极大的填补产品经理层面的空缺，还可以提高产品质量和研发效率。
但是，产品方案不是只提供解决方案就行了，还需要合理、有效，所以就要综合各方面的制约与影响，才能输出优质的结果，这就是一个非常综合性的分析过程，我很难用简单的语言进行归纳和总结。
所以，下面就通过前面的案例，来展示产品思维的具体思考过程
在原有两步路路线详情页中，顶部的大图和信息区域是我重点调整的区域之一。
之所以重点关注，不仅仅是因为它 “不好看”，而是这个大图的缺陷很多。作为浏览用户，图片的关注度不是没有但绝对不是重点，往往只是草草快速浏览一遍就够了，但现在的轮播形式就没办法高效看完相关图例，且占据的篇幅又过大，挤占下方的其它关键信息点。
当然也有同学可能会觉得看图怎么会不重要，你们看小红书找旅游地不就是被图吸引然后再点击进入做出选择的嘛？
不排除这种情况是存在的，但这不是小红书，这是一个比较硬核的徒步社区，不是给用户看大图就有问题，而是在发布用户这一侧，硬核优质的分享者（是去走或跑几十公里不是到打卡点自拍）大多不具备那种拍“美照”的能力，最终呈现的路线图景多数就是随手一拍的质量，浏览用户压根没必要仔细欣赏。
再进一步考虑，有很多经典线路本身景色就不是特别好，尤其是偏越野跑的线路往往杂乱又逼仄，照片带来的作用更多是一种对路线的概括（功能性），而不是作为吸引人的美照。在这个限制下面，大篇幅展示封面就不会获得常规以图片为导向的应用的结果。
这些就是针对问题的分析，而这里面既有体验的问题，也有产品的问题，甚至还有运营的问题，但具体去区分它们没有意义，只要它们不是纯粹的视觉问题我们都可以统一归纳为它们是产品问题。
基于这些问题去思考解决方案时，就可以问自己一个简单的问题，是不是只做视觉调整，如优化布局、更改尺寸、添加投影、增加圆角之类操作就能解决。如果不能，那就要涉及到对产品形式的调整了，也就是涉及功能、信息的改动。
这里我们先看改完之后的结果：
为了减少图片的面积和提高观看效率，我选择缩小图片并做成左右滑动的列表，把发布用户信息做到上面，合理利用空间且突出收藏、分享等操作。但光改这个依旧只是一个简单的视觉调整，缺乏深度和细节，没有什么解释的空间。
所以再往深一点挖掘，一屏只能展示一张图多一点，理由不是图片比例的问题，而是因为用户发布路线最小可以添加的封面图只有一张。如果只有一张，那么右侧留空显然是不能接受的，这样的方案也就做不了。而且只展示图片实在是有点不够看。
我会再想到链家之类看房软件的顶部区域，除了展示摄影图以外，还会添加固定的房型图，应用了多种图片类型。而在两步路中，如果发布路线，除了封面图外，路线图本身肯定也是能直接生成图片的，可以生成类似跑步软件的那种路径图。
顶部图片也可以不止有用户自己拍的摄影图，还可以添加路线生成图，同时这张图因为是静态的，就可以在生成过程中添加一些数据信息或标注内容等，和下方可交互的地图路线展示区分开来。并且在下方区域添加一个类似电商中 “商品图/视频” 切换的标签快速选择。
甚至再仔细想想，当我进入路线详情页时其实更关注的是路线本身，第一张图直接放路线图而不是放在最后，可能对相当一部分用户来说也是更实用的做法。但这么做就有点激进，需要给出初步设计以后再套一些真实内容做出页面看效果，这就是内部评审或用户测试要做的事情了。
到这里这个模块基本解释的就差不多了，而我们为了优化它已经做出了一些超出视觉设计外的变更，且需要考虑尽可能多的细节，照顾到方方面面，这就是产品思维应用的过程。
再往下的路线模块改动也同理，我就不多做展开，你们可以自己深入解构一下：
设计过程中对产品思维的应用，不是成为产品经理构思新的功能需求，而是维持原先目标的不变的情况下，给出新的、更完整、更合理的产品方案。
而产品方案当然不是你们想怎么输出就怎么输出，这些方案还需要再后续经过团队的评审（我要验牌），也就是说服其他人同意你的设计方案。而光看图肯定不够，所以要进行解释说明，从一开始的问题分析出发，到如何完成这个结果的考虑过程。
在这个场景中只看设计图效果是最没价值的，如果你能说服团队通过，那这套方案就是好方案，如果不行，那不管你想的如何天花乱坠还是视觉做得多花里胡哨都没用。所以方案构建逻辑性是非常重要的，因为没有逻辑就没有说服力。
产品思维本身就是一种比较抽象的思维，提升这种底层思维能力需要通过自己大量的积累。我们后续还会陆续做一些相关的案例分享（这应该才是最有用的）。
同时，面对真实工作场景里产品思维很多时候会沦为一种过稿的武器，是一种职场“诡辩”的技术，毕竟上线有没有用无所谓，领导、客户觉得好，才是真的好……
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
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。
蓝蓝设计的小编 http://www.lanlanwork.com
