业内常把用户体验挂在设计工作中，但体验落地很难有统一评判标准，行业普遍以用户体验五要素作为自检框架：战略层、范围层、结构层、框架层、表现层。多数 UI、设计师难以参与产品顶层战略规划，却每日都要对接框架层与表现层落地工作，底部标签栏（Tab Bar）正是承载产品顶层框架、直面用户的核心基础控件。

很多设计师都会遇到同一个难题：功能完整、信息齐全的页面，整体观感平淡乏味，没有视觉亮点，客户总会提出 “缺少设计感” 的修改需求。本次我们以直播平台「心动榜」排行榜页面为落地案例，完整拆解从简陋基础界面到精致氛围感页面的全套优化逻辑，无需复杂特效、大幅改动业务结构，依靠分层视觉改造、主题元素适配、细节质感升级，就能让普通界面焕然一新，为各类榜单、列表类页面提供可直接复用的优化思路。

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

 一、项目定位与行业现存痛点

 产品简介

Buildexa是面向施工现场项目经理、施工工长、工程管理人员的轻量化移动端项目管理APP，聚焦建筑施工全流程进度管控，依托可视化进度图表、3D施工楼栋模型，实现总项目进度、分阶段施工工期、分项工程完成率、延期任务数据实时查看，适配工地户外碎片化办公场景，简化传统厚重工程管理系统复杂操作逻辑，让管理人员手持手机即可完成项目进度巡检、工期风险识别、分项任务追踪。

传统建筑施工管理四大行业痛点

1. 进度数据不直观：传统表格、纸质台账罗列工期数字，无法一眼区分计划、延期、待完成任务，工期延误发现滞后；

2. 分层施工管理割裂：土建结构、装修收尾、水电消防等分阶段进度分散记录，无统一汇总查看页面；

3. 户外操作门槛高：传统工程系统界面拥挤、深色高饱和配色，强光下看不清文字，工地临时查看操作繁琐；

4. 项目风险无可视化提醒：延期任务、滞后分项工程无醒目卡片标注，管理人员容易遗漏工期预警。

二、产品完整业务闭环

整套APP围绕「总项目概览→单楼栋施工计划→当日工期明细→分项工程进度追踪」搭建轻量化管理闭环

1. 首页总览层：实时展示项目整体完成百分比、计划竣工日期、累计延期天数，搭配渐变进度条直观展示整体施工进度；

2. 楼栋计划层：3D写实施工楼栋模型作为视觉核心，拆分土建结构、装修收尾两大核心工序，标注各工序完成率与预计完工时间；

3. 当日工期明细层：可视化区分计划任务、延期任务、剩余待办任务，标注各批次任务起止日期，快速识别工期滞后风险；

4. 分项工程追踪层：统一汇总设计、水电、消防、管道四大施工板块，环形进度条展示各分项完工比例，完整把控细分施工环节进度。

三、四大核心页面模块设计拆解

模块1：首页总览 Dashboard

极简轻量化卡片布局，适配工地户外快速扫视场景

1. 顶部品牌与账号区：Buildexa品牌标识、消息通知、个人头像快捷入口；

2. 核心进度指标区：超大粗体展示整体施工完成率，搭配渐变橙条纹进度条，标注竣工时间、总延期天数；

3. 楼栋可视化卡片：3D施工楼栋写实插图，一键跳转楼栋详细施工计划；

4. 底部固定导航栏：首页、日程、进度、文件、文档五大高频功能，单指快速切换页面。

设计价值：项目经理打开首页3秒掌握全项目整体进度、延期风险，无需多层级点击进入复杂报表。

模块2：单楼栋施工计划页面

以3D施工模型为视觉载体，分层展示分阶段施工进度

1. 顶部筛选栏：快速切换楼栋、筛选目标施工日期；

2. 视觉主视觉：写实在建楼栋3D插画，贴合建筑行业视觉认知；

3. 工序进度卡片：分「结构施工、装修收尾」双卡片，标注完工百分比与对应完工日期；

4. 楼栋单元进度条形图：渐变橙色条展示单元施工覆盖范围与施工距离，直观掌握楼栋施工覆盖进度。

模块3：当日计划进度页面

三色分区卡片设计，清晰划分三类任务状态，工期风险一目了然

1. 三色状态区块：橙色=计划内任务、深橙=延期滞后任务、浅灰=剩余待办任务，搭配对应起止日期；

2. 分项工程列表：设计、电气、消防、管道四大施工板块，搭配环形圆角进度条展示各分项完工比例；

3. 全局筛选入口：支持按日期筛选、导出进度明细，适配工地日报、周报整理需求。

模块4：分项工程详情页面

轻量化单列卡片布局，简化冗余信息，聚焦单板块施工进度，适合户外快速查阅各细分工序完成情况，无多余繁杂图表干扰视线。

四、视觉设计体系：工业柔和轻量化工程风

 1. 色彩系统

- 基底底色：纯净米白浅底色，户外强光下清晰可读，缓解工地长时间查看屏幕视觉疲劳；

- 主品牌色：暖工业橙，代表施工、进行中任务，层级区分柔和不刺眼，贴合建筑行业属性；

- 状态区分色：深橙标识延期风险任务、浅灰代表未开始待办工序，色彩语义直观，无需文字解读即可分辨工期状态。

 2. 图形与可视化规范

1. 写实3D建筑插画：在建楼栋、塔吊施工写实插图，替代抽象线条图标，建筑从业者直观理解页面业务；

2. 轻量化进度图表：渐变条纹进度条、圆角环形进度条、分段条形图，无厚重阴影、无复杂装饰，极简清晰；

3. 圆角柔和卡片：大圆角低弱阴影模块，页面分割柔和，摆脱传统工业系统生硬厚重视觉感受。

 3. 文字层级规范

全平台无衬线简约字体，三层清晰信息层级：超大粗体进度百分比数字→工序/模块标题→日期辅助小字，户外远距离也能快速抓取核心进度数据。

五、产品商业与用户落地价值

1. 工地办公轻量化：舍弃传统PC厚重管理系统，手机端一站式完成全流程进度查看，适配工地外勤、巡检碎片化办公；

2. 工期风险可视化管控：三色任务分区直观识别延期工序，提前介入调整施工计划，降低项目逾期风险；

3. 行业视觉适配：3D建筑插画+暖工业橙主色，贴合建筑从业者审美，降低产品学习上手成本；

4. 多维度进度拆分：总项目、单楼栋、当日任务、分项工程四层进度拆解，满足不同层级管理人员查看需求。

图片来自Behance

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

当下移动端 UI 设计体系日趋成熟，各大 App 界面组件、布局框架高度趋同，很难形成独特记忆点。兰亭妙微团队结合多年商业 UI 落地项目，整理 8 个落地性极强的创新设计思路，从卡片、导航、交互、视觉细节多维度拆解差异化设计手法，为设计师提供可复用的创新参考。

民宿预订平台的首页设计如何精准捕捉年轻用户？木鸟、途家、美团三大平台通过差异化的首页布局，分别满足了00后的场景化需求、家庭度假的深度体验和95后的低价偏好。本文将深入拆解各家平台的流量分发逻辑，揭示从搜索框到金刚区的每一个设计细节，如何成为影响用户决策的关键因素。

首页作为每个平台的门面，不仅是形象的体现，也是所有业务的入口、用户的必经之路。不同功能的App有着不一样的首页模块，选择一种适合产品本身的首页展示方式非常重要。国内民宿预订平台们，又是如何通过APP首页设置实现增长的？

木鸟、途家、美团用户群体差异

开始进行APP首页对比分析之前，我们先看下木鸟、途家、美团用户的差异。

木鸟民宿近年的年度报告中多次提到，00后用户占比59%。从途家民宿五一客群看，报告中提到：“00后”和“80后”是小城民宿消费的两大主力，预订量占比都达到24%。美团旅行清明报告中提到，“95后”占比达到48%。

三大民宿预订平台纷纷聚焦95后及00后——那些已经不满足于“酒店住宿”逻辑，对住宿体验产生兴趣的年轻用户群。

据马蜂窝数据，年轻用户群基础功能型的“硬性消费”占比从2021年约70%降至2025年约50%，而精神体验型的“弹性消费”则从约28%升至约42%，沉浸式体验年增速超过30%。千人千面的消费需求正在倒逼供给侧从标准化产品转向个性化、场景化供给。

回顾民宿市场十余年发展，一条清晰脉络是“加法逻辑”：从最初的农家乐、日租房，再到网红特色民宿，再到各种“民宿+”的挖掘。用户不再满足于单纯的民宿入住，开始期待有更多住宿功能场景之外的体验。

木鸟的细分场景、途家民宿的度假需求、美团民宿的低价体验，都不是标准化复制，而是根据各自不同的定位、用户、体验需求定制设计。本质上，是回答清楚一个问题：用户在什么场景下住民宿，旅游出片、携宠出游、周末度假、同学聚会，不同场景对应不同需求，最终催生出不一样的产品设计。

从首页设计看流量分发逻辑

研究表明，较少的选择会让用户更愉悦一些。木鸟、途家、美团作为垂类民宿预订平台，核心目标非常直接，省去了多元业务的流量取舍，流量分发和路径非常清晰。

从三家民宿预订平台的首页来看，首页的结构制定逻辑决定了首屏内容是权重最高的，越往下权重越低，这是一种头重脚轻的布局结构。基于这种逻辑，视觉效果的强弱也是由上到下衰减的，而不是下方权重低的模块反而视觉最突出。

木鸟、途家、美团APP的首页都把最核心的民宿预订按钮放到了首页首屏中心位置，重要属性依次下降。木鸟民宿区别于途家和美团民宿的点在于，木鸟民宿只有首屏，没有下拉界面。这样做的好处有二：一是用户目光更聚焦，核心首屏只保留了必要的预订功能和服务展示，减少用户在首屏阶段的跳出；第二点则是避免了二屏往后的流量衰减，对一个垂类平台来说，后续屏的设置意义不大，用户的核心目的就是为了订民宿。

下面笔者结合各家APP的详细路径来详细拆解。

（木鸟民宿）

木鸟民宿首页，重要的分流模块为：搜索、订民宿、二级导航、金刚区，分发逻辑由明确需求和隐形需求两部分组成。

明确需求：用户有明确目的，通过城市及地标定位直接查找民宿；隐形需求：根据用户兴趣不同，潜在需要的分发逻辑，例如周末出游、人气好房、宠物出游等。

明确需求各家差异不大，核心差异点在隐形需求。首页的又一个关键目标，是为不同风格不同诉求的用户铺设合理的下单路径。

按入住目的来分，有的用户是精准型用户，很清楚自己要住在哪里要哪天出行，这样的结构就方便用户一次筛选入离时间、地标位置等；有的用户是半精准用户，知道自己要去哪个城市但不具体，就可以通过目标推荐给与用户选择。

按出行喜好来分，有的用户是问题导向型，只要有地理位置符合的民宿就可以入住；有的用户是场景指向或特殊需求，比如携宠出行、出片等等。

木鸟民宿的目的分区相对清晰，没有重复的部分。

（途家民宿）

途家民宿的首页功能则相对繁琐，各种需求穿插出现。明确需求部分和木鸟民宿的逻辑相同，不同点在于宫格设置。途家民宿的宫格重点在平台侧的套餐推广和会员，这个区别或许是由于途家民宿营收压力增大，流量下滑导致单纯的订房佣金收入下滑，不足以支撑途家民宿的自造血，从而平台侧变现需求大。

（美团民宿）

美团民宿首页没有平台业务需求的设计，单纯的展示内容资源。首页结构单一，视觉美观，但屏幕效率低。

用户为什么要留在这里？

从三家民宿预订平台的首页结构拆解可以看出，木鸟民宿用户侧和平台侧设计相对平均，途家民宿重平台需求，美团民宿重用户需求。这与各平台的运营现状紧密相关。

木鸟和途家是中国最早的那批民宿平台，在2017年之后进入长时间的木途美三大时期。但在2020年途家民宿关停20城直营房源之后，途家民宿的现金流和营收压力骤然增加，携程商旅流量下滑加之重心转向跨境游，途家民宿可谓雪上加霜，难以独立行走的途家靠自身引流的佣金费用并不足以支撑商业运转，从而平台侧变现需求增加，这也是途家在首页中增加套餐和会员业务的最大因素。

木鸟民宿自2020年实现连续盈利后，尽管是一个独立运营的平台，但80%的自有流量让木鸟实现了良好的“流量-订单-扩张”的循环，网红民宿以及延伸的细分场景成为平台引以为傲的产品力，这也使得木鸟兼具用户体验和营收增长的双端利好条件。

美团民宿在首页舍弃了平台侧内容，主要和美团本地生活的发展息息相关。自外卖大战开始以来，美团确立的就是高频带低频的战略，酒旅的变现压力更多的放在主站美团旅行板块，对独立APP的要求并不大。

首页设计的最终目标还是要围绕让用户多逛逛，多看些民宿，以更少的点击完成转化。除设计外，重要的还是民宿平台的房源和服务。木鸟民宿依托特色民宿体验场景守住核心用户，途家期待通过家庭度假需求弥补商旅流量流失及特色体验短板，美团聚焦绝对低价民宿削弱品质缺失。因此，真正能让用户留下来的，仍在于平台能否在民宿市场的发展更新中，找到不可替代的生态位。

转载自：人人都是产品经理

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

一、列表页的基本认识

列表页就是以展示列表 List 为主的页面，所以我们需要先理解列表是什么。

列表源自编程术语，是一种数据结构，即按照线性顺序排列的数据项集合（有限序列）。说人话，就是按照一定顺序展示数据的形式。

我们再用UI设计的角度来理解它，可以把它分为 “列” 和 “表” 两个部分。我们先理解表，表就是“表格”的意思，这也是计算机中存储数据最基础的形式（关系型），我们在页面中看见的多数内容都以这种形式记录。

列则是动词 “排列” 的意思，用一定的逻辑、方法、顺序将表格排列出来。这种排列是要经过设计和调整的，不会和原来的表格完全一致。

也就是说，列表设计是种对表格的转换，是种对数据的可视化呈现形式。

之所以要强调这个，就是因为想要做好列表设计就离不开对数据的理解，一个专业的列表设计不是做一个好看整齐的重复性组件，而是将数据表格清晰有效的反映出来。

数据表格对列表的影响包含下面几个要素：

1. 属性字段
2. 字段值
3. 字段状态

1. 属性字段的影响

属性字段就是列表内要放的具体信息点，也就是数据表格中的表头。比如一个商品列表中，要放商品图片、商品名、品牌标签、节日标签、营销标签、销售量、好评率、价格、原价……每个独立的信息就是一个字段。

而一个真实的项目列表内，往往会包含非常多的字段，所以开始设计前要先搞清楚数量和明细，以及它们各自的含义。一方面是设计中不能有字段的缺失，另一方面是字段中包含对应的权重、分类，是设计前必须要确定的信息。

比如下面的列表内容，就包含了大量的字段信息，而这些字段既有权重的强弱，也有分类的整理，是经过设计师的专业分析和设计的结果。

2. 属性值的影响

属性值就是每个属性具体放什么内容，有什么限制。比如商品名，肯定是放商品名称的文本，但文本一般是什么样的，最长支持多少字，这些就是属性值的基本信息。

属性值在开发环境中只能是文本（字符串），但在设计中这个值就不一定只是文本，可能还是图片、图标、符号等内容，中间会有转化过程。比如用户列表中，用户有不同的 VIP 等级，数据中记录的等级肯定是文本性质的，而展示出来却可能是专属的黄金、白银、青铜图标。

属性值的认识同样非常重要，决定了列表的设计是否准确，符合产品的规划。

3. 字段状态的影响

最后字段的状态，就是字段展示的逻辑，简单解释起来就是字段什么情况下出现，什么时候隐藏，出现的时候显示什么内容这三个问题。

比如美团的列表中，有美团商家列表中，运输标签有美团快送、专送、全城送、商家自配等不同类型，而下方的配送时间也在样式上会有差异，这就是对字段状态的表达。

而越是复杂的列表，包含的字段状态差异就越大，往往会直接影响列表的样式，所以设计过程中就要体现尽可能多的样式状态，也就是设计它的不同变体，确保在各种场景中它们能正确显示。

想要设计好列表，就要面对上面提到的三个问题。优秀的列表不止是一种视觉结果，而是一种能兼容相关数据展示的容器规则。

二、列表页的框架布局

接着我们来理解列表页的主要框架和布局形式，入门它的基本设计要点。

首先列表页不是只有列表一种组件，多数还会包含对列表数据进行搜索、筛选、排序的组件。

除此之外，部分重要的列表页还可能在顶部放运营模块，用来展示一些热门推荐内容或单纯作为广告位。

运营内容放顶部且篇幅较小是因为页面形式的限制，不能在顶部放太多内容让列表被顶到第二屏去。所以目前的设计为了更好的塞入内容，就会选择在列表中插入其它数据，比如纯运营广告，也可能是内容推荐，或者是模块入口等。

总结起来，列表页的主要框架就是顶部搜索栏、特殊模块、筛选排序栏、列表区域的组合。

而最关键的列表区域，可以使用不同的列表来展示信息，我们可以简单分成“单列”和“多列”两个布局大类。下面我们就分别对这两个分类类型做个解析。

1. 单列列表

单列列表就是一行只有一个数据对象的列表形式。而单列列表模式中还区分两种类型的列表，一种是引导型，一种是展示型。

引导型就是引导用户点击进入查看详情，比如商品列表、酒店列表，是为了让我们在列表中找到感兴趣的内容点击进入详情页面。

而展示型，就是直接在列表中展示主要信息，让用户直接顺着列表的顺序查看主要的内容，而不是进入到详情页查看。最有代表性的展示型列表，就是朋友圈这类动态列表了。

单列列表对单个数据对象的展示空间较大，但是单屏浏览数据量就会减少，适用于数据对象字段较多的场景。

2. 多列列表

多列列表就是一行会展示多个数据对象的列表形式。通常移动端的多列列表只有两列，在少数情况下才会出现三列。而两列模式中，也包含两种布局形式，一种是等高展示，一种是瀑布流。

等高展示就是列表内数据对象的高度是保持一致的，每个数据对象的尺寸统一左右对齐，适用于字段类型、内容相对统一变化小的场景。

而瀑布流，则是数据对象高度不一致的多列布局形式，相对更灵活适用面更广，适合字段类型、内容变化较大，不同数据对象的差异极大的场景。

转载自优设网

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

vivo小游戏的改版揭示了轻量化产品的设计本质——从点击量到用户时长的指标跃迁。本文深度拆解其首页分发逻辑重构与去低幼化视觉升级，揭秘如何通过动态专题矩阵、情感化设计和品牌色系统，同时实现商业价值提升与品牌心智进化。

小游戏业务的核心特点是“轻量化启动，依赖时长变现”。

在产品形态方面，“点击即玩”是重要特征，其试错成本极低，用户可快速、反复尝试多款游戏，使用时长比点击更能代表深入程度。在营收方面，对于依赖广告变现的游戏，时长直接影响广告曝光次数；对于内购游戏，时长则意味着付费窗口期的延长。“停留”比“点击”更能创造商业价值。

依据以上两个原因，小游戏业务成功的关键指标并非传统的分发效率（点击量），而是用户游戏总时长。这是小游戏设计改版的第一个核心目标。

<图：业务目标>

除此之外，在存量竞争时代，设计不仅仅是“做得好用”，更需要“做得准确”——准确理解业务，准确洞察用户，准确传递品牌心智。

“小游戏”，在很多用户的印象中，往往是“休闲、轻松、可爱，甚至样式上带点低幼感”的存在，这造就了其固有的用户心智。

实际上，【vivo小游戏】希望服务的用户是丰富、全面的，所以矛盾便浮出水面——亟待扭转“低幼感知”，这就是小游戏设计改版的第二个主要目标。

在以上两个背景之下，本次改版目标如下：

目标一（来自业务目标）：提升游戏时长，让分发更精准，帮助用户“玩进去，愿意留下”。

目标二（来自用户心智）：去除低幼感知，重塑“年轻、放松、品质”的产品形象。

<图：本次设计改版的两个目标>

这不仅仅是一次界面优化，更是一次以设计驱动产品品牌升级的系统性设计。下文将从三个维度，分享我们的设计推导与落地过程。

第一部分：提时长——优化分发路径，从“广撒网”到“精准陪伴”

重构首页分发逻辑，使其服务于“提升时长”的目标。对首页三大核心模块——“用户爱玩”、“平台推荐”、“随机游戏”——进行了数据洞察和体验重塑。

<图：首页改版的三个重要模块>

1. 聚焦核心：强化“用户爱玩”的心智，而非盲目曝光

数据显示，“最近爱玩”模块贡献了极高的总游戏时长。这证明，用户主动沉淀的偏好列表，是游戏启动的最强驱动力。

新的洞察随之而来：绝大多数的用户，其“最近爱玩”的游戏只有1-2款。旧版首页将4款游戏“平铺”外显，反而稀释了用户的注意力，导致分发的目标不清晰。

针对这一现象，我们的A/B Test结论是：满足需求，比增加曝光更重要。新版设计强化了“用户爱玩”的模块心智，使其成为用户返回时的“第一眼”核心，让用户能最快回到那个“TA真正想玩的游戏”，而不是在多个似是而非的选择中犹豫，从而直接锁定并延长核心游戏时长。

<图：左图为老方案，右图为新方案>

2. 给出理由：重构“平台推荐”，让选择变得容易

“平台推荐”是发现新游戏的主阵地。我们放弃了“一招鲜”的模式，转而构建了一套专题矩阵，针对不同游戏和用户意图，设计差异化的推荐理由：小编推荐专题：从“系统”到“有温度的个体”建立了“安利官”角色，把真实的小编推向用户。用真人头像、亲切口吻和官方认证，打造“有温度、有信任感”的真人推荐。情感化与专业性的结合，极大地拉近了与用户的距离。

<图：小编推荐>

<图：小编推荐>

场景化专题：从“游戏是什么”到“我此刻需要什么”将游戏分发融入用户生活场景。例如，“早上好：提神醒脑”、“下午好：坚强摸鱼人”、“晚上好：放松一下”。通过时间、情绪、状态的匹配，让游戏推荐更具说服力和即时价值。

<图：场景化推荐>

高品质专题：从“文字说”到“视觉证明”针对精品或内购游戏，我们用更大尺寸的卡片、更具沉浸感的图文或视频预览，来直观呈现游戏的“品质感”，将“高质量”这一抽象概念具体化。

<图：左图为老方案，右图为新方案>

玩法专题：用IP强化“类别识别”在“男生爱玩”、“挂机轻松玩”等玩法标签下，将专题内最具代表性的头部游戏IP（如“太空行动”、“一波超人”）进行视觉放大，强化用户对专题游戏类型的“一眼识别”。

<图：玩法专题>

魅力信息前置：从“默默无名”到“热度可见”将“XX万人在玩”这类强吸引力信息，从传统的文字区剥离，设计为高识别度的半透明标签，与游戏Icon强绑定。通过调整色彩、字重，使其在不遮挡Icon主视觉的同时，成为辅助用户决策的“魅力因子”，有效提升了点击意愿。

3. 留有余地：优化“随机游戏”，提供“多一次机会”

我们注意到，有相当一部分用户是在首页“逛了好几屏”后仍未找到目标，此时我们猜想“随机一下”可能是他们留下的最后机会。

强化了其“提供一次惊喜、一种可能性”的心智，为探索型用户保留了一个“轻量级出口”，这背后是对用户分层和场景的细致体察。

<图：随机玩>

设计思考：分发设计的精髓在于“对症下药”。我们不再追求统一的曝光策略，而是将首页视为一个动态的、有层次的决策场。“用户爱玩”是确定性满足，“平台推荐”是引导性探索，“随机游戏”是可能性兜底。

设计的价值在于，为每一种用户路径，都铺就了最合适的体验轨道，最终合力指向“停留与探索”的核心目标。

第二部分：去低幼——重塑视觉语言，从“缤纷低幼”到“放松高级”

“去低幼化”不仅是风格的转换，更是品牌心智的重塑。为此，我们建立了一套完整的研究与执行方法。

1. 拆解“低幼感”：从感性描述到理性标准

“低幼”是一个感性评价。为了找到解法，我们首先要将其“可视化”。

对比了市面上的儿童教育产品，并结合对自身旧版设计的审视，提炼出三个维度的“低幼”视觉特征：

1. 色彩：高明度、高纯度色彩被大面积、平均化地使用，色相过多且对比强烈，形成“缤纷喧闹”的观感。
2. 图形：表达过于具象，细节复杂，视觉元素堆砌，呈现出“卡通卡片”式的质感。
3. IP形象：IP设计（如吉祥物）偏向可爱、低龄化，缺少成人世界的“人设”感，且使用频率过高、场景过泛。

这三点，共同构成了我们需要打破的旧有特征。

<图：关于低幼感知来源的研究>

2. 定义新气质：从“喧嚣”到“轻松、年轻、快捷”

有了要规避的视觉特征，同时，要确立新方向。结合产品特性和目标用户，我们定义了vivo秒玩小游戏应有的产品调性：

• 年轻有趣：是年轻人爱用的，能带来惊喜感的。
• 轻松休闲：能随时玩、不用学，是“放松”的载体。
• 快捷高效：点击即玩，响应迅速。

<图：从情绪板到色彩定义>

3. 系统化升级：从色彩到体验的全链路焕新

色彩体系重构

定义品牌色：我们摒弃了“大杂烩”式的色彩，定义了“活力黄”与“轻松绿”作为品牌主色，分别承载“生命力、有趣”与“放松、自然”的情绪。并严格设定了60%背景色、30%白色卡片、10%品牌色的色彩使用比例，建立清晰的视觉层次。

<图：品牌色>

分层处理原则：

• 氛围层（背景/装饰）：采用“低纯度/高透明/大面积”的用色原则，大量使用渐变、晕染，弱化色彩视觉重量，只为衬托氛围，绝不抢夺信息。
• 内容层（信息主体）：用大面积的白色卡片清晰呈现游戏Icon，保证内容的“高还原、高识别、高点击感”。
• 操作层（高优信息/行动点）：在小面积、关键的操作区域（如按钮、标签）使用“高饱和/高明度”的品牌色，实现“小面积、高体感”的提亮效果，精准引导用户操作。

<图：分层处理原则>

注入“情绪价值”：

• 从功能到情感“放松感”融入：在“最近爱玩”等模块，引入海岛沙滩、漂浮云朵等动态视觉元素，将“玩游戏”包装成一种“放松”的体验，给予用户情感上的暗示与安抚。
• “趣味、惊喜感”传达：在“随机游戏”模块，利用骰子旋转动画强化“随机、有趣”的心智；在品宣位置，用海量游戏图标交叠微动效，直观传递“海量游戏、应有尽有”的丰富感。

<图：“海岛”微动效>

<图：随机玩>

传承品牌基因：我们没有割裂历史，而是巧妙延续了品牌核心符号“闪电”。

新版设计中，“闪电”图形以“斜切线”的形式，融入魅力信息标签、专题卡片头图等细节，在去低幼的同时，保留了用户对品牌的核心认知，完成了视觉语言的平滑演进。

<图：老版本页面示例>

<图：新版本页面示例>

设计思考：去低幼化不等于“高冷化”或“同质化”。我们的解法是建立系统性的设计语言。它不是对某个元素的修修补补，而是从底层色彩逻辑、视觉层次、情感传达、品牌符号多个维度进行的一体化重构，最终在视觉上完成了从“儿童乐园”到“年轻人休闲客厅”的转变。

总结：不止于“改版”的设计价值

回顾整个项目，这不仅仅是一次界面优化。我们将其视作一个通过设计系统性地解决商业和品牌问题的范本。复盘整个过程，我们有几点深刻的心得，这几条心得从我们刚刚入行到目前都适用，感受愈发深刻：

1、理解产品是在做什么：设计必须服务于商业本质。深刻理解“小游戏靠时长盈利”这一核心，才让我们敢于将“提升分发效率”的惯性思维，转向“提升用户停留与沉浸”的差异路径，这是所有设计决策的“北极星”。

2、抓住重点：资源永远是有限的。通过数据分析，我们精准地识别出“最近爱玩”模块是提升大盘时长的关键。集中优势资源，在关键模块上做深做透，才能带来数据层面的最大回报。

3、以用户需求为导向：用户的核心需求是“找到我想玩/可能爱玩的游戏”，而不是“看到更多游戏”。设计要做的，是提供“理由”和“路径”，帮助用户高效决策，而不是制造“信息过载”。对“最近爱玩”模块的聚焦，正是这一思维的体现。

4、任何时候都不要忘记有趣。在追求“去低幼化”的过程中，我们并没有走向另一个极端——“严肃与无趣”。相反，我们将“放松”、“惊喜”、“有趣”这些属于游戏产品的核心情感价值，通过动态效果、场景化文案、情感化设计重新注入体验。

我们交付的不仅是一个“更好看、更好用”的首页，更是一个“更清晰、更高级、更具吸引力”的vivo小游戏品牌。

注：插图中全部实例均为设计稿，非线上截图。游戏icon、名称、在玩人数等基础信息非线上信息。

转载：人人都是产品经理

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

兰亭妙微UI设计公司：你会发现现在的移动端UI界面中极简风的设计越来越多了。极简主义设计风之所以能够如此的受欢迎，很大程度是源自于它对于设计、开发的友好，它不仅让APP的加载速度更快，让APP对于不同屏幕的兼容性更加优异。与此同时，越来越多的用户也开始青睐极简风的设计，极简风的UI界面不仅漂亮，而且在可用性上也非常的突出：它易于导航，并且具备强大的视觉表现力。

1、一屏一个任务

降低用户完成任务之时所需耗费的精力。

你为APP的每一屏都应当承载一个对用户有用、有价值的交互或者任务，一次完成一个任务，且只能有一个任务，其中应该不包含超过1次的行为召唤（CTA）。这样的设计能让用户更轻松地学习，更便捷地使用，在设计上也更容易添加删减以及构建。

以Uber为例，Uber 清楚地知道用户的目的是乘坐出租车，所以，应用程序不会一次给用户太多的信息，会根据地理信息自动检测用户的位置，而Uber 提供给用户的每一个界面的交互都是单个的，用户只需要选取位置，下单即可。

2、隐形的UI

内容即是界面。

专注于内容，并且尽量删除不必要的元素，这样可以缩短用户集中注意力的时间，用户将会更快地被引导到他们正在搜寻的内容，而内容本身正是一个隐形的界面。最典型的就是Google 地图。在重新设计的时候，Google 地图删除了所有不必要的面板和按钮，地图本身就是最好的界面。

3、呼吸的空间

使用负空间让重要的内容吸引用户的注意力。

留白，或者负空间，指的是页面设计布局中的空白部分，或者空白元素，它们常常被忽略和忽视，虽然许多设计师认为这样的设计会浪费屏幕的空间，但是留白本身就是设计的基本元素之一。

留白可以提升可读性和内容的优先级，在页面布局中也发挥着重要的作用。因此，它可以合理地简化UI并提升用户体验。

4、直观的导航

导航应该是每个APP当中优先级最高的组成部分。移动端APP中导航应当容易被发现，可访问的，且尽可能少的占用屏幕空间。由于小屏幕的限制以及内容优先级的需要，移动端导航的可访问性设计一直是一个挑战。

标签栏和导航栏是非常适合用来展现较少的导航选项的，它们非常适合用来展示主要的导航选项，一个简单的点击就能流畅地切换到不同的页面。

5、单手操作

让你的设计兼容更大的屏幕。

关于用户如何握持手机，下面的图为你展现了最常见的三种模式：

通过观察可以发现，85%的用户使用单手握持他们的手机，下面的热图展示了从2007年一来，各种不同尺寸的iPhone 的拇指操作区域。毫无疑问，随着屏幕尺寸的增加，拇指能够触及的区域的比例正在逐步降低。所以，移动端界面的用户体验设计应当进行调整，尝试让你的APP 能够在手机上面能够单手操作，将导航置于用户的拇指可以触及的区域之内。

6、让APP运行快速

不要让用户等待内容呈现

试图让程序的响应速度提升起来。许多任务尽量在后台跑起来，让前台的展现速度显得很快。将一部分操作打包到后台运行有两个好处：让一些等待和加载过程不再展现在用户面前，并且可以让许多操作在用户请求之前就发生。一个很好的例子就是 Instagram 中上传图片，当用户选择要共享的图片之时，上传就已经开始。

7、善用推送通知

在推送信息之前请三思。

每天用户都会被无数无用的推送通知所轰炸，被分散注意力，这也使得通知常常会显得颇为恼人。根据调研，超过70%的受访者表示，令人烦躁的推送信息是促使他们卸载应用的主要原因。

所以，要做好移动端设计，需要用好每一次的信息推送。不要为了吸引用户而推送消息，这往往会适得其反。你需要将对于用户有价值的信息推送出去，这样才合适。

有效的移动端APP信息推送策略是采用多种类型的信息推送机制，推送通知，电子邮件，应用内通知，新闻Feed等。多样化的信息推送通过合理的协调，创造良好的用户体验。

转载自优设网

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。