流利说®少儿英语是流利说®为 3-8 岁儿童定制的一款英语启蒙类产品，本次邀请到 UI 设计师 kelly，从视觉设计与输出的角度，详细地介绍该产品游戏题型的设计过程。

流利说®少儿英语，目标是帮助该年龄段的用户建立发音自信，并且能对英语学习产生持续的兴趣。基于儿童贪玩的天性，自然而然我们会想到使用游戏化的设计，将枯燥的英语学习过程变得更有趣。

△ 收集糖果

△ 警察抓小偷

△ 切水果

△ 消灭细菌

视觉设计

游戏为辅，教育为主。

对于视觉设计而言，游戏题型设计的主要有以下 2 个难点：

• 把握题型趣味性与教学目标之间的平衡；
• 为教学内容找到最适合的游戏展示形式。

接下来我将从视觉表达、视觉层级、反馈这三点分享我的一些思考和经验。

1. 明确的视觉表达

在开始设计前，我们对 3-8 岁儿童进行了调研，发现处于该年龄段的用户，大多有以下特性：

• 不识字，且不能进行复杂逻辑操作；
• 易被色彩鲜艳且有动效的对象吸引，并且会主动点击；
• 仅能理解自己生活中接触过的事物（比如玩具，食物，游乐园等等）；
• 趣味性是调动他们持续学习的重要动力。

基于以上几点，我们便总结出以下几点设计方法。

视觉形式即题型玩法

以拼图题为例，此题的目标是检测孩子拼写单词的能力。如果仅将单词挖空再让用户选择，那么孩子会觉得这道题既不会玩，也不好玩。但如果在视觉表现上采用孩子比较熟悉的拼图，就可以方便孩子更好的理解题目的意思，进而引导孩子的操作。

场景故事要有视觉连贯性

「游戏」（此处的「游戏」代指游戏题型）结束后有一个和故事设定相关的结束画面，承接前面的操作，让整个「游戏」过程能呈现出相对比较完整的体验，以增强小朋友在「游戏」过程中的沉浸感。

△ 游戏操作：切水果

△ 游戏结尾：切水果榨果汁

2. 清晰的视觉层级

由于儿童缺乏成年人所具备的视觉筛选能力，他们往往很难分辨出界面中的重要元素和次要元素。尤其是 3-5 岁的孩子，他们会习惯性地去点击界面上所有吸引他们的东西。因此我们需要为不同层级的元素设置强烈的视觉区分，明确告诉他们哪些元素是可以点击的，需要被关注的，哪些元素是不可互动的。

提高教学内容易识别性

游戏题型的设计方法通常是使用游戏的形式去包装常规的教学题型，让小朋友感觉是在玩游戏，而不是在做题。因此我们需要设计恰到好处的游戏容器去承载教学内容，使其兼具教学内容的识别性又不会影响「游戏」体验。此处我们尝试去拉开游戏元素和教学内容的视觉差距──在画面中的视觉焦点处摆放教学内容，而游戏元素仅作为背景或者容器，用于衬托教学内容，并且尽量选取不易和教学内容发生冲突的形式。此外，为兼顾游戏画面的丰富性和多样性，容器的设计需要有一定的适配性。

△ 适配文字

△ 适配图片

△ 适配文字和图片

对于看文本读单词的题型，游戏容器则以烘托文字为主要目标。在该场景下，游戏容器的视觉设计重点在于外形的刻画，简化内部细节，以此将孩子的视觉重点聚焦在文本，而非容器本身。此外，为平衡字符段不同所带来的显示差异，我们对文字的大小也进行了适配。

△ 1-12 个字符──文字大小 88

△ 13-25 个字符──文字大小 76

△ 26-45 个字符──文字大小 62

背景画面的层级感

在游戏题型中，有不少故事性强，空间延续性高的设定。为加强画面的运动感和空间感，视觉输出时，我们额外增加了前景层，利用前景图片打造视差效果，以增强整个背景的层次感。

前景图片的设置，同时也能解决适配不同屏幕尺寸时，背景区域显示差异所带来的视觉问题。

纵向运动的情况下，两侧的图形如果设置在背景里，当适配到短屏幕的时候就无法呈现出来。

而单独设置成前景图，则可以灵活地适配不同屏幕比例的机型。

克制地使用过于明亮的色彩

用研时，我们发现孩子们容易被颜色醒目的东西所吸引，但如果一个页面上过度使用明亮的色彩，则会大大分散孩子们的注意力，颜色过载所导致的视觉信息复杂性会增加孩子们的使用难度。

3. 合理的反馈

合理的反馈包括符合交互逻辑的及时反馈和适当的正负反馈。在游戏设计中，设计师大多会通过酷炫的动效来做重要操作的点击反馈，以增加游戏爽感。这套法则，在儿童世界也同样适用。

及时反馈制造小惊喜

我们在产品的反馈设计中适时地增加一些有趣的微动画，给孩子们制造一些小彩蛋。这些小惊喜，不仅能及时地拉回小朋友的注意力，给他们带来趣味性的同时，对他们而言也是一种鼓励。

例如：当用户点击拼图题选项时，会出现 IP 相关的卡通元素，这些元素既能加强趣味性，又能加强用户对品牌的认知。

适当的正负反馈

大约从 4 岁开始，孩子们就会有输赢的概念，会因为赢而喜悦，因为输而感到焦虑。──《数字时代儿童设计》

对孩子的正向反馈宜欢呼、表扬性的动画为主，整个画面氛围可处理得热闹一点，这对孩子来说是一个很好的刺激点，能让孩子有继续玩下去的欲望。

△ 正向反馈1：IP 形象高兴地跳出

△ 正向反馈2：IP 形象高兴地跳出 + 打分星星

△ 正向反馈3：IP 形象鼓掌

考虑到孩子们会因为输而感到焦虑，因而在处理负面反馈的时候，需要考虑他们此刻的心态，动效设计应拉开与正向反馈的差别且不能过于消极，消极的反馈容易打击孩子的积极性，产生挫败感，鼓励性的反馈为宜。

△ 负面反馈：IP 形象配合鼓励性语音做加油的姿势

反馈动画的设置也需要考虑用户的可接受程度，慎用具有攻击性动效。如下图，错误反馈时 IP 形象会受到攻击而感冒，上线后发现孩子们对这种反馈表现出了害怕的心理。

以上 IP 动画由流利说®少儿英语设计团队倾情制作。

视觉输出

不会写代码的设计也是好开发。

视觉稿如果不能被很好的实现落地，那再好的设计稿也只能是概念，而不是一份有效的方案。在如何更好的把控视觉实现程度这一问题上，我们也走过不少弯路，和开发经过几轮的探索，最终形成了一份适合我们团队的输出模式。

在整个开发环节，设计师主要承担一部分的动画开发工作。在和开发对接的过程中，我们主要使用的软件是：

• CocosCreator：游戏开发软件，内含动画编辑器。
• SourceTree：向开发提交动画代码。

△ CocosCreator

△ SourceTree

开发搭建完框架后，设计在 CocosCreator上，完成部分元素的动画，再用 SourceTree 向开发提交动画代码。开发最后通过代码将每个动画串联起来形成一个完整的动画。

△ CocosCreator 动画编辑器界面截图

题型动画连贯且细节多，单靠视频 demo 是无法协助开发精准实现设计效果的。为了解决这个问题，我们建立了对设计落地具有指导性意义的文档──适配标注文档和动画标注文档。

1. 适配标注文档

用户机型调查结果显示，使用 0.462、16:9、4:3 这三类屏幕比例的用户占比最大。为保证不同屏幕比例上的展示效果，我们根据上述三种主流尺寸，分别输出大小为 780×360，640×360，480×360 的设计稿，并规定以 780×360 为设计基准，对另外两个尺寸进行适配。

标注内容为三个主屏幕尺寸下的缩放比例、大小位置、特定动画的起始点或终止点位置等细节调整标注，方便开发在做适配的时候能准确还原设计稿的布局。

2. 动画标注文档

该文档主要是对动画和音效的详细说明。每个题型的动画会被拆分，以最小可拆分动画为一个标注对象，对其标注时长、具体的动画效果以及运动曲线数值等，方便开发地还原 demo 的设计效果。详细的标注文档不仅方便了开发，更为后续测试和视觉走查降低了不少沟通成本。

总结

游戏化题型的设计，需要更多的从用户的角度出发去思考和权衡游戏与教学的平衡性。对于儿童产品而言，设计服务于教育，愉悦和多变的体验是设计的方向，教学才是最根本的设计目标。

文章来源：优设

在年复一年的电商促销节的渲染下，如今618、双11俨然成为全国最大的线上狂欢节。而在狂欢节中担任着重要角色的主会场，承担着为各分会场分发流量的重要使命。与此同时，大促的页面设计也越来越趋向于同质化，大多基于以往的经验沉淀，少有突破。在这样的背景下，设计师不仅需要考虑如何满足商业需求，更要兼顾用户的体验感受。本文将通过多次主会场设计实战中沉淀下的经验与教训，以京东微信手Q购物入口的年货主会场为例，深入探讨如何在成熟产品中做突破设计。

洞察：发现问题（面临挑战）

1. 页面结构与动线逐渐趋于稳定

主会场设计不断进化和演变，从以往简单的会场入口展示，到会场+品牌+单品+关键词的综合内容展示。虽然视觉风格不同，但无论从结构上还是体验上来看，本质都相差不大。

2. 需要更丰富的诠释品牌价值与用户感知

在消费升级的大环境下，消费者的消费能力/品牌/品质在全面升级，此时需要更加注重品牌价值与内涵的塑造，精准化传递用户感知。而主会场现有模式以大促营销为主，重点突出促销卖货氛围和类目分流，品牌价值与用户感知的传递较为薄弱。

3. 既要效率分流，也要逛起来（成交）

分流坑位与效率的提升，在一定程度上会降低会场的成交转化，如何平衡二者之间的关系，在设计上需要平衡把握。

聚焦：设计目标

在电商设计中，我们需要把握很重要的一点就是：平衡商业目标与用户体验之间的关系。设计目标的制定，需要我们对主会场的商业诉求与用户诉求进行深入了解，才能制定有理有据的设计目标。

1. 商业诉求

因电商环境的特点，主会场设计需要以商业诉求为思考起点，为商业价值赋能，辅助其商业目标的达成。因此，在策划阶段，设计师应该提前加入讨论，和业务方一起梳理并明确业务诉求。因京东大促节奏时间长的特点，节奏规划上会分为预热、品类、高潮三个时间，而针对不同的时期，主会场的业务诉求也会略有变化，但整体差别不大。

会场分流

大促期间，主会场作为流量矩阵中心，若只通过主会场一个页面来满足用户需求是不太可能的，因此的会场分流是核心的商业诉求目标。

提升成交转化

虽然主会场的核心目标是分流，但随着大促策划的逐渐深化，提升流量成交转化率，赋能主会场价值最大化也是需要考虑的重要因素。

会场预约

京东大促节奏具有时间长的特点，节奏规划上会分为预热、品类、高潮三个时期。如何保障品类日-品类会场的流量曝光，为会场预约也是主会场设计需要考虑的重要因素。

2. 用户诉求

主会场最终面对的还是用户，服务好用户才能使其产生价值，并最终实现商业目标。根据对以往大促设计的用户及数据反馈进行深入剖析，可大致分为新用户及老用户两种类型，并进一步对用户特征/诉求等方面进分析整理出用户角色卡。

通过以上分析，总结出以下三大核心用户诉求。

捡便宜薅羊毛

大促期间，用户一般通过购物首页、社交分享、外部投放等入口进入主会场，无目的或半目的型用户居多。不管新用户还是老用户，都是以「闲逛」来寻找折扣，捡便宜薅羊毛心理加重，但也相对理性。

快速筛选

面对越来越复杂的电商大促内容与玩法，用户需要一个更简单、更的会场为他们传达促销氛围与优惠。

个性化推荐

个性化算法基础上，用户对自己强相关的内容更加感兴趣。

3. 核心设计目标

通过对商业诉求与用户目标的充分解读，在主会场设计中我们需要在两者之间找到平衡点，来更好的兼顾商业与体验。最终将今年京东微信手Q购物入口的年货主会场的核心设计目标设定为：打造极简用户体验，提升用户专属感知。

4. 设计策略

设计策略的制定能够有效帮助我们始终贯彻核心设计目标来探寻解决方案，根据前面的设计分析，定义出本次年货节主会场的五大设计策略：用户专属感知、化繁为简，整合、多场景可复用、年味春节、多纬度多场景。

效率 · 化繁为简，整合

1. 页面动线设计

主会场作为大促版图中的流量矩阵中心，堪称绝对 C 位。在向用户传递大促氛围及专属感知的同时，又要满足效率分流及成交等目标，同时还要引导用户参与各种互动，这需要构建合理的页面动线。本次主会场页面动线设计划分为三大板块：头颈部、中间和尾部，采用总分总的节奏引导用户浏览。

• 头颈部：氛围与利益点传达、高质量个性化推荐传递用户专属感知；
• 中间：楼层锚点设计，便捷筛选，内容分流；
• 尾部：长尾 BI 商品推荐，深化用户专属感知。

2. 首屏-头部设计

主会场头部作为门面担当，承载着向用户传递主题诉说与促销氛围的功能。随着运营需求的不断增加，以及头部资源利用率等问题，头部设计不在单一的追求氛围打造，而将更多的承载功能型需求，如：会场推荐、活动推荐、预约时间轴、互动入口、优惠券等。在有限的空间里如何进行内容展现和传达，本次年货节将通过内容重组和层级划分来进行实现。

体验 · 打造专属感知

1. 首屏-头部设计

精准化营销下的千人千面，用户对自己强相关的内容更加感兴趣。大促环境下，他们更期望了解自己感兴趣的单品、品牌、品类的促销折扣信息。在首屏如何向用户传递专属感知的体验？我们根据用户属性进行新老用户切分，结合日常活动数据验证整理出：猜你喜欢商品、购物车降价商品、BI 拼购商品、BI 会场等四类内容，打造用户专属年货节模块。

2. 中间-楼层设计

类型繁杂、内容众多的中部楼层设计，承担着 50+ 分会场曝光分流的重要使命。我们把 50+ 分会场划分为 9 大品类，每个品类一个楼层进行内容组合设计，包括：优惠券、品类主会场、分会场入口、品牌曝光、单品曝光、热搜词等内容。楼层顺序根据 BI 进行展示，让用户即使在内容繁杂的情况下也能快速定位自己感兴趣的内容。

3. 尾部-猜你喜欢设计

长尾理论是网络时代兴起的一种新理论，当商品的销售成本急剧降低时，几乎任何以前看似需求极低的产品，只要有卖，都会有人买。这些需求和销量不高的产品所占据的共同市场份额，可以和主流产品的市场份额相比，甚至更大。简单了解长尾的含义后，可以清晰的知道主会场页面中加入长尾设计的原因：利用互联网移动端页面无限延长的框架，进行更多货品的曝光，来留住剩余未跳转流量，进行商品售卖来实现价值最大化。在长尾内容上加入 BI 推荐，深化用户专属感知，提升用户消费转化。

规范 · 多场景可复用

1. 今日必买模块设计

因京东大促品类日节奏性曝光的特点，主会场的今日必买模块作为这一特性的承接模块，需要满足不同品类日之间的差异化需求。如何在满足个体差异化需求的情况下，又能降低设计、开发成本？本次年货节主会场对今日必买模块进行了组件化设计。

除了今日必买模块，品类楼层的设计也遵循了这一设计原则。

互动 · 多维度多场景

1. 轻互动设计

如何让用户深度参与会场并形成记忆点？会场的互动设计是很好的方法。通过轻量的互动方式，引导用户参与并拿到奖励的同时，满足商业价值的需要。本次年货节主会场从用户角度出发，通过：做任务赢大奖、分享赢京豆、新年红包、明星拜年等四个互动玩法，有节奏的投放在年货节的不同时期，形成用户记忆点。

效果反馈

有些地方虽略有遗憾，但整体反馈不错。成交、UV 跳转率、UV 价值等指标显著提升，其中 UV 跳转率、UV 价值均为近两年大促主会场最高值。因涉及敏感数据，这里就不再一一详述。

总结

通过对 19 年年货主会场设计的详细解读，相信坚持阅读到这里的小伙伴们对「如何在成熟产品中做突破设计」已经有了深入的了解，希望我的这些思考能够给你在工作中带来一些帮助。

在手机app应用中各种格式的弹窗效果相信大家都看过，也可能反感过某些弹窗，本文就来谈谈关于app弹窗设计以及弹窗的适用情景。

一. 弹窗的定义

1. 弹窗作用

弹窗是为了让用户回应，需要用户与之交互的窗口。

非模态弹窗一般被设计成用来告诉用户信息内容，而模态弹窗除了告诉用户信息内容外还需要用户进行功能操作。

2. 模态弹窗

会打断用户的操作行为，强制用户必须进行操作，否则不可以进行其他操作。

（Alerts／dialog，Actionbar，Popover）

3. 非模态弹窗

不会影响用户操作，用户可以不与回应，通常有时间限制，出现一段时间就会自动消失。

（Toast/HUD，Snackbar）

二. 弹窗分类

以下将以各类弹窗的含义、作用、适用来进行浅析。

1. Alerts/Dialog：警告框与对话框

含义：英文意为警告、对话，跟弹窗属性非常吻合，就是紧急状况，打扰用户的行为。

剖析：iOS中警告框称之为Alerts，作用是用来传达重要信息，并伴随着需要用户进行操作。

iOS规范中，警告框包含的元素如下：标题（必选）、描述信息（可选）、输入框（可选）、按钮（必选）。

必须包含标题、包含一个或多个按钮。

Android规范中，弹窗交互按钮需结合实际情况，不用「是/否」原则进行设计。

作用：告知用户当前发生的状况，让用户主动选择回应。

适用：重要性较高的操作时，如退出、删除、清空等。

2. Actionbar（Sheets、Acitivity View）：操作栏、操作列表、活动视图

含义：英译为工具栏、操作栏。

剖析：当用户激发一个操作的时候，出现此窗口。

一般会给用户提供更多的功能选择，一般可采用官方控件。

一般都设计有一个默认的「取消」按钮，点击取消可以关闭弹窗。

Aciton Sheets和Activity Views是iOS上特有的交互形式。

特性是用户触发、包含两个或以上的按钮。

△ 以上为今日头条、iOS系统相册

作用：操作列表提供一系列在当前情景下可以完成当前任务的操作，而这样的形式不会永久占用页面UI的空间。

适用：如分享功能。

3. Popover/Popup：浮出框/浮层弹窗

含义：英意为弹出窗口，浮动于顶层窗口，气泡。

△ 以上为微博、qq、微信

剖析：当用户点击某个控件或者某个区域时浮出的半透明或者不透明的弹窗窗口。

不会对用户所在位置进行跳转。

作用：可以在当前页面进行更多的操作行为，显示/隐藏页面中的折叠信息。

适用：首页位置呈现一些常用操作的快捷入口。

4. Toast/HUD：提示框（iOS没有Toast，只有HUD）

含义：Toast也被称为吐司提示，Toast是安卓系统的一个控件名词，现也应用于iOS系统中。

剖析：提示框属于一种轻量级的弹窗反馈形式，常以小弹框的形式出现，持续1-2秒自动消失，可以出现在屏幕任意位置，但是建议同一款产品尽量使用相同位置，让用户产生统一认知，成为习惯。

提示信息能给予用户及时反馈，确保用户知晓自己所处的状态，并可以做出相应的措施。

iOS用户更习惯于在顶部感知反馈信息，不干扰用户浏览主体内容。Toast出现在屏幕顶部不会遮挡主体内容。（如花瓣、有道云笔记）

Android正统的规范中Toast：

• 出现在屏幕底部。
• 只能放文字不能带图标，文字要精简不宜太长。
• 不是模态的，可以通过Toast对其他控件进行操作。
• 短时间后会自动消失。
• 不能对Toast进行交互。
• 优先适用于系统提示，不能手动操作让Toast主动消失。

△ 以上为今日头条、微博、即刻

HUD与Toast的区别：

• HUD只出现在屏幕的中央，Toast则在底部。
• HUD可以包含icon，Toast只能纯文字。
• HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明。
• HUD中内容可以变化（如调节音量时），Toast中内容不可变化。

△ iOS音量调节

优点：

• 占用屏幕空间小。
• 不会打断用户操作。
• 使用简单，适用范围广。

缺点：

• 出现时间短，在碎片化时代注意力不集中容易错过Toast提示。
• 遮盖其他控件，但不能对Toast进行交互。

适用：提示不需要的反馈信息，如刷新后的成功状态。

5. Snackbar：底部弹窗

Android特有的交互形式，在Google的MD规范中，将Toast和Snackbars归为一类。有些时候也有应用在iOS系统中，也可以理解为加强版的Toast。

含义：英译为快餐、小吃。

剖析：Snackbars与toast一样是从屏幕底部向上出现，但是Snackbar不同的是可以经过用户进行其他操作而消失。

适用：较多适用于撤销操作。

三. 总结

通过分析和了解弹窗的类别、适用范围，才能更好的在设计中进行优化与改变。用户体验设计的重点，是一步步了解用户，然后设计出适合用户体验，满足用户心理需求的产品。把握好弹框设计规范，避免弹框设计的误区，能更好的帮助你完善产品。

但是，没有十全十美的产品，所以要根据设计趋势与用户需求不断地进行更新迭代，通过用户反馈，不断地改良产品体验，才是做出优秀产品的前提。

从事电商方面的设计师，详情页设计可以说是必修课，好的详情页会给带给用户更流畅的视觉体验、更直观的产品信息、亮点等等，也有助于提升交易的达成率。正是因为如此，所以很多商家不惜重金请设计师为其打造爆款产品的详情页，由此可见详情页在电商设计中的重要程度。本期和大家一起分析总结：如何把详情页做的足够出彩，详情页做不好需要从哪些方面进行提升？

目前被认可的一种详情页设计形式是分屏式，就是按照手机端设计思维以一屏为单位制作，最后整合成一个完整的详情页，这种形式有助于提升视觉流畅度及内容识别度，所以我们可以将每一屏都当作一张海报来制作。而说到海报，就离不开设计构图。

详情页的构图与传统的PC端海报有所不同，因为详情页设计更注重手机端，所以一屏的内容又可以看做是手机端竖向的海报。而一副出彩的海报，必然需要优质的骨架。那么常见竖向海报构图形式有哪些？下面为大家总结了几种在详情页设计中比较实用的构图形式：

如图所示，这三种构图形式看似简单，实则兼顾了手机端的很多必要点，比如：视觉的流畅度、整洁度、辨识度、用户的接受度等等，详情页设计在构图及板式方面并不需要很复杂，反而干净整齐的画面更易于视觉表达，也更利于手机端展示。

这三种构图形式在详情页中使用频率是非常高的，下面我们看几组案例：

看似简单的构图，反而在详情页设计中非常实用，仅靠这三种构图，完全可以做出很优秀的详情页。另外还有一些从这三类衍生的构图形式，也比较常用：

文案在配图下半部分的这类构图相比而言用的少一些、也难把控一些，当然用的好了在版式上会有打破、眼前一亮的视觉感受，只是这类构图不宜多用，完整的详情页中出现1-2次即可。而左右式配图+文案的形式是比较常用的，下面看组案例：

详情页的构图不易太复杂，这六种构图形式完全够日常工作，只需选取其中1-3中构图形式交替使用即可。以上构图示例中标识的装饰元素可以是线条、英文、图标、数字、实物素材等等，也可以选择不使用，具体情况根据配图的留白以及重心灵活使用即可。

所以，详情页中每一屏的构图并不难，完全可以把这六种构图形式当做公式，需要哪种直接套用其结构就可以（结构类似即可，并非要求1:1）。另外：配图形式可以分为三种：全屏、半屏、透明图，具体的构图形式需要结合画面整体的重心、留白、美观度决定。更通俗一些的话，构图就可以理解为填空，内容就往空的地方填，注意好适量的留白。

补充：当透明图作为配图时，不管哪种构图形式都有可能出现空的现象，这时我们可以用一些具有装饰性的数字、英文、线条、形状、文字等等进行填充，举例说明：

案例中的文字、数字与产品相互结合，既解决了空的问题、提升了整体的饱满度，又在形式上做到的新颖、有创意。构图形式与前面所说的皆能吻合。

说到设计素材，浮在脑海中的可能会很多种，而这次要说的主要是三类，即：手势、植物、肌理（在花瓣搜索关键词“手势”“植物”“材质”“肌理”就能找到对应素材），这三类素材在详情页设计中出现的频率也是很高的，如果运用得当会将详情页的出彩度进一步提升一个档次，而且对于视觉表达也会更加生动、形象、富有说服力，下面我们逐一来说：

手势素材

顾名思义，就是各种各样关于手方面的动作，比如：拿、托、指等等，下面举个例子来看：

这些手势在很多详情页中都会出现，接下来我们不妨思考这么一个问题：为什么要用这些手势，只是单纯的好看吗？

其实不然，在视觉上，这些手势使得画面更加生动、有立体感、有层次感，让作品更饱满、更出彩。而对于用户而言，能让其更加深刻的体会到产品是有温度的、可操作的、更真实、更容易理解，所以对于交易的达成以及加深用户对产品的了解也更具说服力。

影响详情页转化率的因素有很多种，视觉表达能否真正抓住用户心理也是很关键的一点！

植物素材

这类素材相信大家都不陌生，在很多页面以及详情页出现的频率都很高，而且装饰性很强，寓意也很宽泛，比：自然、清新、贴合现实、有生机等等，下面举个例子：

如图所示，这里的植物都能很好的与画面主体形成很好的遮挡关系，在视觉层面显得更有层次感、画面也更饱满；而且植物的运用并不是随便使用的，而是与海报氛围、文案都紧密相关，形成了很好的呼应、装饰作用。

我们常用的植物元素可以是清晰的，也可以模糊处理，只要与画面整体气质相符，可以根据实际情况灵活使用。

肌理素材

关于材质、肌理的妙用在前面很多文章中都有提到过，这里简单的说一下：肌理素材对于提升作品细节感、层次感、出彩度以及饱满度都有很大的帮助，如果作品碰到上述问题，不妨用肌理素材试试。

单看标题可能很多人不太明白，什么叫做抽象名词具体化？其实简单理解就是：将一些比较抽象的名词通过设计手法表现出来，比如：风、声音、温度、轻重、锋利等等。这样做的目的不仅可以提升用户体验、加快用户理解，而且在视觉上能生动形象的将抽象化名词表现出来，对于视觉出彩度的提升也很大。给人留下的印象也更加深刻，间接的提升了视觉传达的时效性，下面看个例子：

通过案例我们不难发现：将抽象化的名词通过视觉手法表现出来，对于用户理解的难易程度以及视觉出彩度而言都有提升。如果一款产品详情页中能出现1-2次这样的处理手法，会使得详情页在视觉上更加生动、形象。

补充：在详情页设计中，若文案中出现一些LOGO、数字、英文，注意不要放过它，因为它具有装饰性的特点，对于详情页板式的活跃以及设计感提升都有很大的帮助！形式多为：水印、与产品穿插、作为主体信息使用等等！一款详情页这种用法可以出现2-3次！

详情页设计不可忽视的两点：视觉的流畅度以及文案辨识度。文章所提到的一些构图方式、元素使用、视觉表现形式都是为大家提供一个可供参考的方向，落实到工作中要灵活运用、举一反三。一般情况下，一款详情页大概有2-4屏比较出彩的即可，能形成一定的对比，不至于视觉疲劳、千篇一律！

不妨找一些不错的详情页，按照文章中所写的自己尝试分析分析，看是否与之吻合。切记详情页设计构图及文字排版不易太过复杂，切记、切记、切记，重要的事情说三遍！

文章来源：站酷

在做设计的过程中，大部分设计师只专注于主操作流程、主页面、分支流程、小页面和页面的不同状态。却容易忽略产品中容易出现的各种异常状态。

当用户停留任何一个界面，进行任何一个操作都可能发生异常状态。

如果接到每个需求都去制定一次异常状态，这样的后果可能会使得产品的不同模块、不同流程，异常状态都不一致。全局规范性被破坏，同时设计师的效率也降低。

因此全局制定异常状态规范很有必要，后续就不需要再设计，开发直接复用异常状态的规范。省时省力、提率、设计规范、运行更流畅、减少代码重复率、安装包也会更小。

异常状态一共有以下 10 类：

• 网络异常
• 消耗大量流量时
• 空数据
• 加载失败
• 操作失败
• 服务器异常
• 搜索无结果
• 无权限
• 功能建设中
• 内容被删除

网络异常

当移动设备网络异常时，导致无法上传和下载数据，从而无法正常的使用产品。

网络异常存在两种场景：

• 网络异常时，用户打开 App，这种情况 App 会出现异常状态提示给用户，这是 App 主动告知行为；
• 用户点击操作时，由于网络异常，这时候通过交互反馈给用户，这是 App 被动告知行为。

1. App主动行为

当无网络时，用户打开 App，通常有三种方式提醒用户当前网络异常。

tips 提示，通过 tips 提示用户当前网络不可用，tips 使用场景一般为用户打开后，界面停留在首页，且首页以列表形式展示，这样的话， tips 才能合理的融入到界面中，常见使用这种布局方式的有微信、qq等。

使用toast提示用户网络异常，同时提示用户可以去使用非数据影响的操作。例如网易云音乐，当无网络时候，告知用户可以去正常听已下载的音乐。

使用对话框，引导用户进入设置页面，关闭飞行模式或者打开 Wi-Fi，例如美团进入首页后的对话框提示。

2. App被动行为

当前无网络时，用户点击操作，无法正常使用产品，这时候通常有两种处理方式。

一种是当前界面出现 toast 提示。另一种是进入下一级界面，以缺省页的形式提醒用户当前网络异常。

例如手机淘宝，没有网络时，用户点击会进入下一页，出现缺省页提示，告知用户网络异常，同时提供刷新按钮。

美团在无网络时，点击其他 tab bar，出现 toast 提示用户当前网络异常，稍后重试。

3. 小结

• 个人觉得，当 App 打开进入列表页面时，常见的如 IM，则使用 tips 提示告知用户，非列表的 IM 工具时，可使用 toast 告知用户。
• 当用户进行界面交互时，用户点击操作，通过 toast 告知用户。

消耗大量流量时

当涉及需要消耗大量流量数据时，且非 Wi-Fi 情况下，这时候需要告知用户。常见的例如看视频，听/下载歌曲、视频通话、下载上传文件等。

例如B站，当使用移动数据看视频，则通过提示语和对应按钮上的流量值告知用户。

网易云音乐在非 Wi-Fi 情况下，下载音乐时，通过对话框，告知用户当前使用数据流量，同时提供可继续下载的功能，也提供通过办理新业务解决数据流量的问题。

空数据

空数据一共分为两种类型，分别为初始状态和清空状态。

1. 初始状态

用户首次使用，没有任何内容数据时，需要用户进行某种操作才能产生内容的界面，这时候需要提示用户需要进行某种操作。

例如淘宝App，当用户没有把商品加入购物车时，进入购物车界面，会给出提示购物车界面为空。给出用户提示，给出相对应的入口按钮，引导用户操作。

如果初始状态，无任何内容直接给出一个空白界面，用户可能会以为该界面出 bug 了。

Gmail 直接用一个插画提示用户收件箱为空。

一般对于初始状态的设计，常规做法是简单的插画配合简洁的文案，必要的时候给出引导用户操作行为的按钮。

现在流行的设计趋势是插画越轻量越简单越好，以免抢夺了文案信息。

2. 清空状态

当用户清空当前的页面内容，产生了空界面，这时候需要有明确的提示告知用户出现当前页面的原因，且告知用户该如何处理。

清空状态是对初始状态的进一步细化。清空状态的界面和初始状态设计很相似，唯一不同的是文案的提示。

有的产品直接把清空状态的界面按照初始状态来设计，这样也是可以的，缺点就是没有告知用户产生空状态原因是初始化还是清空所致。

加载失败

在加载过程中，App 向服务器请求数据，如果是网络原因导致，则使用网络异常的设计规范。

如果非网络异常原因，则可能因为服务器异常导致接口请求不到数据，从而加载失败。

第一次请求失败，有些场景可能重试 2 次，例如微信支付宝，这种情况可使用 toast 告知用户加载失败的原因。

操作失败

任何操作行为的交互界面都伴随着操作失败的概率。

当用户操作失败时，在当前页面给予一个反馈，告知用户操作失败，最好告知用户操作失败的原因，让用户知道接下来如何避免操作失败。

服务器异常

因为服务器异常是小概率事件，但是也会发生。

当服务器异常时，且用户在操作过程中，出现这种情况，一般可设计为对话框提示，明确告知用户，服务器出现问题，让用户稍后重试。

例如下图的华为云备份恢复界面：

搜索无结果

用户在搜索过程中，除了出现正常的匹配结果，还存在无匹配结果的情况。针对搜索无结果的情况，要给予用户操作无结果的提示。

几乎搜索无结果的状态都是在内容区出现对应提示。例如 iOS 相册，通过搜索关键词，当没有匹配照片时，则出现对应的提示，如下图右侧图：

下图淘宝买家版后台，当用户搜索关键词无结果时，出现对应的提示语和插画。

无权限

无权限的场景，通常适用于 b 端产品，对于不同组织架构的企业员工，会存在不同的权限。

例如部分重要的内容，非同一组织架构的员工无权限查看，这种情况，用户点击进入一般给出对应的提示。

当然最好的方案是在 App 上面过滤掉无法查看的内容，但是存在员工间的转发行为，这时候无权限的员工，点击进入，则显示暂无权限查看的提示页面。

功能建设中

一般 App 功能正在开发中，这种情况不会在 App 界面中展示出来，只有完全开发完毕并上线后才会出现在 App 上。

但是也有一些产品的特殊业务，会将一些未开发的功能展示出来，例如微信公众号，长按微信文章，即出现对应的提示。

也有一些新闻频道还没有开发完毕上线，这时候用户点击进入下级界面，则出现对应的提示语/插图提示，如下图所示：

内容被删除

有的时候，文件或者页面内容被删除，但由于文件或者页面内容的上一级页面有缓存，所以当用户点击进入时，会出现文章/文件被删除的情况。

已被删除的异常状态，常见的设计是用户进入新页面出现对应的插画和标题提示。

例如下图微信公众号文章内容被作者删除，读者点击进入，加载后的界面就出现内容被删除的提示。

以上就是常见的 10 种异常状态的简单介绍和说明。在制定异常状态的设计规范时，可以参考本篇文章。

当然也有公司特殊的业务导致存在很特殊的异常状态，针对这种情况，可以适当的增加、删除或者修改，使其更适用于自己公司的项目。

文章来源：优设

每一次学习改版案例，不仅仅只是去看在视觉层面的变化，更多的应该是要学习到作者改版背后的思考。为什么要这么改，原因是什么，目的又是什么，怎么做，有哪些限制等等，有很多东西要去思考。所以，带着问题并结合自己实际中所做的项目来看案例，应该会是一个很有收获的过程。

项目背景

Booking.com缤客 是一家荷兰初创公司，并已经发展成为全球最大的旅游电子商务公司之一。
在Booking上，旅客可以选择世界上任何一处的住宿地点，包括公寓，度假酒店，民宿，五星级豪华度假村，树屋甚至冰屋等等。每天，通过平台预订的房间数超过155万。无论是商务旅行还是休闲旅行，人们都可以快速轻松地预订到理想的住处。

竞品分析

自从Booking发布以来，许多竞争对手都采用类似的商业模式疯狂跟进，抢占市场，并且在某些方面比Booking本身做的还好。

在调研的前期阶段，我去搜集了一些竞争对手和类似的平台，分析UI，用户体验，用户地图，信息架构和关键功能。但是我并不会花太多时间过于深入的去分析这些产品，因为我希望将重点放在Booking这个产品本身的诉求上。

使用场景

在之前的调研过程中，我发现了许多不同的使用场景，经过汇总归集，我集中关注以下3个场景：

• 场景1：用户知道其行程的日期和目的地（默认场景）
• 场景2：用户明确了日期但对其旅行的目的地不清楚
• 场景3：用户知道目的地但不确定其旅行日期

典型用户

在进一步的研究中，我明确了4位具有不同需求和不同目标的典型用户，这些数据对于改善不同用户的体验非常有用。

这个分析的目的是通过梳理最佳的用户流程并提升产品体验，来为不同需求的用户提供最好的用户体验。

△ 数据来源：在线研究和用户访谈（30个用户样本）

用户反馈

收集用户评论，从中我收到了很多有价值的反馈，这些评论中没有特别明确指出是可用性或功能性的问题。我将这些反馈分为4类（译者注：对反馈的问题进行提炼整理）：

• 预订被取消
• App的Bug
• 投诉的处理效率
• 反馈的进度

毫无疑问，最相关的是预订被取消的问题。太多用户会注意到不合理的费用或与房间的主人取得联系时遇到困难。

用户访谈

基于30个用户样本，我试图获得进一步的用户反馈，从中注意到以下的几点事实：

• 与其他平台相比，booking的平均价格通常更高
• 产品过于突出好评，用户很难发现一些真实的差评
• 当房屋主人接收到用户的回复时联系用户也很困难

我想引用一段话，来总结这里面遇到的问题，这段话也蛮有意思的，它说的是：

「与其他应用比较来看，套路显得有点多，会让你觉得一切看起来都蛮划算，总是想多卖一些东西给你。」

用户痛点

总结之前的分析，我提出了以下几点观点：

• 没有一个完美的解决方案能够满足所有用户，用户需要尽可能多的掌握有用信息。
• 没有的功能没有太多考虑到个性化需求。
• 可以改进UI并使用户更加集中于他的目标，而不是完全「以推销为中心」
• 优化用户与房东之间的联系问题

解决方案

从用户痛点出发，尝试找到合适的解决方案，来提升产品体验。

1. 主页

总的来说，我对首页进行了大手术。主页的搜索功能已经完全重新设计，减少过多的干扰信息。

导航：我设计了一个新的导航栏，剥离出「已保存」功能，这样用户就可以快速找到自己所收藏的商品。此外，我也优化了「交易」的模块，后面我会详细的说说这块的改动思路。

其它功能 :至于之前的版本，我保留了搜索和相关推荐的功能，重新设计界面以改善UI的可用性。

2. 社交功能

如今，社交网络在用户的生活中扮演重要的角色，那没理由在booking中做的这么差。我搞了一个新功能，允许用户关联自己的好友并查看他们的选择，包括他们的评价（喜欢/不喜欢）。我已将此功能放置到主页的下方，因为我希望在将其推广到其他模块之前收集更多有关它的数据。

3. 搜索功能

把这个功能分解为多个步骤。在输入第一个词后，即使没有指定日期或其他信息，也能显示相匹配的酒店。此外，我也加入了语音搜索，使搜索更容易。基于之前我对不同用户角色的定义，搜索的结果将根据最后的信息进行推荐：

• 1名成人 ——背包客 ——酒店
• 2名成人——度假夫妇——酒店，宾馆或B＆B（某种酒店形式）
• 2名成人+儿童——家庭——民宿公寓或酒店
• 1名成人+商务选择——商人——酒店

4. 列表页面

列表页针对易用性方面做了整体的优化：

• 我将筛选功能从3个按钮更改为2个按钮以减少用户的操作步骤——将它放在页面底部，方便使用
• 我添加了标签功能来更好的区分属性类型
• 在第一时间向用户展示物业的主要设施特点。注意：根据不同的用户，可以智能突出显示不同人正在寻找的不同信息。
• 我将报价的方式转换为「单晚」而不是「总价」，以便在不同商品之间进行比较

5. 详情页

我列出许多可以在详情页面中加入的修改。将总价格突出显示，以免有些隐形消费用户可能会被忽略。

增强了一个与评论相关的次要功能，允许用户通过不同标签筛选它们。

6. 交易功能

在优化开始时，我确定了操作场景2—— 「用户还不知道自己的目的地」作为优化方向。为了提供更好的用户体验，我增加了一个新的功能，用户可以在其中找到不同目的地的区间。利用筛选功能，用户可以选择最适合其需求的区间（区间 – 大陆 – 国家等…）

动效原型

最后，我还设计了一个整个项目的动效原型，把之前所有重设计的页面串联起来。

结语

由于时间限制，分析和结果是基于我的个人经验和少量数据，需要进行深入分析和其他测试，以便完善和验证解决方案。

文章来源：优设网

还在频繁地使用弹窗对用户展示重要提示吗？明知这样有损体验却没有更好的选择吗？那么不妨来试试干扰度更低，却依然可以用于重要提示的 Sheet 控件吧。

什么是Sheets

Sheets 控件并非弹窗，通常会被熟称为「浮层」或「浮窗」。

该控件在 iOS 和 Android 系统规范中都有相关定义，属于多才多艺的控件，可以用于给予信息提示，也可用于展示更多的拓展信息。

从用于提示的角度来看，Sheets 控件和 Dialogs 控件的相同点和不同点在哪里呢？

1. 共同点

模态化

二者都可以设置模态，当模态控件显示时，页面背景会显示深色遮罩，并立即打断用户当前操作。

承载操作和信息

二者都可以承载丰富的操作和信息，支持嵌入列表、选择器等控件及图片、文本信息。

2. 不同点

触发方式不同

Dialog 可以不通过用户操作而自动触发，Sheet 必须通过用户操作才可以触发显示，因此用户对 Sheet 的显示会更有预期。

关闭方式不同

Dialog 的关闭方式较少，通常会要求用户进行选项操作后才可关闭；Sheet 的关闭方式较多，对于用户而言有更丰富的选择权。

因此综上所述，我们可以发现，Sheet 对比 Dialog 的优势在于，它的显示会更符合用户的预期，它的干扰层度也会低于Dialog（因为更易关闭）。

• Sheets 在 Google Material design 规范中被分为了 Bottom sheest 和 Side sheets 两类；
• 在 iOS Human Interface Guidelines 中被分为了 Action sheets 和 Activity views 两类。

下面就由我来依次详解其特性和玩法吧。

Bottom sheets 底部浮窗

专属于 Android 的 Sheets 控件。

1. 使用场景

用于补充内容相关的更多信息（非模态）、提供可交互的菜单或对话（模态）或其它关键功能/任务的拓展。

2. 注意事项

• Bottom sheet 通常用于 Android 竖屏场景，在 Android 横屏场景建议使用 Side sheet。
• 在 iOS 中不建议使用 Bottom sheet，建议使用原生的 Action sheets 或 Activity views。

3. 样式类型

菜单样式

可嵌套 Menus，展示多个选项内容。

宫格样式

可使用宫格布局，展示多个选项内容。

迷你样式（非模态）

一个非模态底部浮窗可被设置固定展示在页面底部，用户可以随时用它来对其它功能/任务进行快捷操作，如进入购物车、查看所选图片、查看聊天和查看刚才的视频等。

4. 模态/非模态

非模态浮窗：如左下图所示，非模态浮窗与内容保持在同一层级，用户可同时对内容和浮窗进行操作。

模态浮窗：如右下图所示，模态浮窗层级高于内容，背景深色显示遮罩，用户仅能对浮窗进行操作。

5. 显示与消失

显示

浮窗显示时从底部向上滑入，非模态浮窗显示时不会打断用户操作，模态浮窗显示时会显示深色遮罩以打断用户操作。

消失

浮窗消失时会向底部滑出。

模态浮窗在以下情况下会消失：

• 用户触发浮窗上的对应操作（自定义）；
• 用户点击浮窗外的区域；
• 用户下拉浮窗达到收起阈值后（自定义）；
• 用户点击 Android 系统返回键。

非模态浮窗在以下情况下会消失：用户选中浮窗上的对应按钮（自定义）。

6. 支持高度延伸

当浮窗底部仍有未显示的内容时，可设置通过滑动或拖动浮窗来使其变为全屏展示，并在顶部显示 Toolbar 来展示关闭/收起操作。

7. 支持深层链接

模态浮窗中可以展示其它应用的深层链接内容或操作，譬如调用 Google 翻译。

8. 范例

抖音的评论功能使用的是模态 Bottom sheet；百度地图的路线切换功能使用的是非模态 Bottom sheet。

Side sheets 侧边浮窗

专属于 Android 的 Sheets 控件。

1. 使用场景

用于补充内容相关的更多信息（非模态）或提供可交互的列表信息（模态）。

2. 注意事项

• Bottom sheet 通常用于 Android 竖屏场景，在 Android 横屏场景建议使用 Side sheet。
• 在 iOS 中不建议使用 Bottom sheet，建议使用原生的 Action sheet 或 Activity views。

3. 样式类型

菜单样式：可嵌套 Menus，展示多个选项内容。

宫格样式：可使用宫格布局，展示多个选项内容。

4. 模态/非模态

如左下图所示，非模态浮窗与内容保持在同一层级，用户可同时对内容和浮窗进行操作（在移动端较少使用，通常用于 PC 端）。

如右下图所示，模态浮窗层级高于内容，背景深色显示遮罩，用户仅能对浮窗进行操作。

5. 显示与消失

显示

浮窗显示时从左/右边缘滑入，非模态浮窗显示时不会打断用户操作，模态浮窗显示时会显示深色遮罩以打断用户操作。

消失

浮窗消失时会向左/右边缘滑出。

模态浮窗在以下情况下会消失：

• 用户触发浮窗上的对应操作（自定义）；
• 用户点击浮窗外的区域；
• 用户侧拉浮窗达到收起阈值后（自定义）；
• 用户点击 Android 系统返回键。

非模态浮窗在以下情况下会消失：用户选中浮窗上的对应按钮（自定义）。

6. 滑动说明

支持上下滑动，不支持左右滑动。

7. 范例

淘宝的筛选功能使用的是 Side sheet。

Action sheets 操作浮窗

专属于 iOS 的 Sheets 控件。

1. 使用场景

用于呈现一组与当前操作相关的选项，如启动某个任务，或者确认是否开始执行某个可能具有破坏性的操作。

2. 注意事项

在 Android 中不建议使用 Action sheet，建议使用原生的 Bottom sheet 或 Simple dialog。

3. 样式类型

如下所示，支持单个或多个操作的展示，以及说明文案的展示：

4. 显示与消失

显示

浮窗显示时从底部向上滑入，会显示深色遮罩以打断用户操作。

消失

浮窗消失时会向底部滑出。会在以下情况消失：

• 用户触发浮窗上的对应操作（自定义）；
• 用户点击浮窗外的区域；
• 用户点击浮窗「取消」按钮。

5. 显示位置

竖屏时显示在页面底部，横屏是居中显示在页面底部。

6. 范例

微信的选择朋友圈发布类型及清除聊天记录的二次确认，都是使用的 Action sheet。

Activity views 活动浮窗

专属于 iOS 的 Sheets 控件。

1. 使用场景

用于呈现一组与当前操作相关的选项表，如复制、收藏或分享。

2. 注意事项

在 Android 中不建议使用 Activity views，建议使用原生的 Bottom sheet。

3. 样式类型

列表样式

宫格样式

混合样式

4. 显示与消失

显示

浮窗显示时从底部向上滑入，会显示深色遮罩以打断用户操作。

消失

浮窗消失时会向底部滑出。会在以下情况消失：

• 用户触发浮窗上的对应操作（自定义）；
• 用户点击浮窗外的区域；
• 用户下拉浮窗达到收起阈值后（自定义）。

5. 显示位置

竖屏时显示在页面底部，横屏是居中显示在页面底部。

6. 支持高度延伸

当面板底部仍有未显示的内容时，可设置通过滑动或拖动面板来使其高度进行延伸，从而展示更多信息。

7. 范例

爱奇艺的分享功能和泡泡圈选择发布内容类型，都使用的是 Activity view。

用法总结

建议针对非系统级或业务级的重要提示，使用 Sheets 控件进行提示；Dialogs 控件仅用于最重要的信息提示才算是「好钢用在了刀刃上」。

另外在调用原生 Sheets 组件时，记得分端的差异性。

文章来源：优设网