解构UI设计

解构UI设计

第一章 界面类型

1.1 闪屏页

又称为启动页，就是APP启动在进入功能主界面前用户看到的页面。

闪屏页决定了用户对App的第一印象。

闪屏页显示的时间很短，通常只有1秒。

闪屏页分为品牌宣传型、节日关怀型和活动推广型3种类型。

1.1.1 品牌宣传型

App的闪屏页是为体现产品的品牌而设定的，主要组成部分是产品名称+产品形象+产品广告语。

例子1：闲鱼的闪屏页

• 产品名称：闲鱼
• 产品形象：鱼和蚯蚓
• 产品广告语：让你的闲置游起来！

例子2：molto闪屏页

• 没有“产品广告语”这一要素
• 产品形象是logo

例子3：QQ空间闪屏页

• 三要素俱全
• 产品形象是logo

品牌宣传型的闪屏页特点总结：

• 产品名称：可以是普通的字体、艺术字或者是特殊设计的图片（闲鱼）
• 产品宣传语：字体比产品名称小，一般在产品名称下方
• 产品形象：吉祥物、看板娘或者产品logo
• 除了三要素外的页面元素：一般没有，页面采用单色作为底色（白色、蓝色、闲鱼的黄色等）

1.1.2 节日关怀型

当节假日来临，很多App 会通过营造节假日的气氛来体现人文关怀。

例子1：QQ音乐端午节闪屏页

例子2：途牛等品牌的中秋节闪屏页

节日关怀型的闪屏页特点总结：

• 同样具备三要素：产品名称、产品节日形象、产品节日广告语
• 其中产品节日形象有多种，如例子1中QQ音乐对品牌Logo进行了延展设计，例子2中直接采用整个场景的插画来营造节日氛围。更多节日形象可以看拓展阅读-以中秋主题聊闪屏设计

1.1.3 活动推广型

有时候产品在运营过程中会做一些活动或者广告，推广内容通常会显示在闪屏页上。活动推广型的闪屏页多以插画形式表现，要着重体现的是活动主题及时间节点，营造热闹的活动氛围。在设计时一定要抓住主次，避免因为烦琐的场景影响到主题的体现。

例子1：途牛活动页

• 产品名称：途牛
• 产品活动广告句：奔跑吧暑价 畅玩全球
• 产品活动形象：卡通牛

例子2：

• 省略了产品名称（因为用户已知APP的名称）
• 产品活动广告句很多
• 产品活动形象用一整张插画来表现

其他例子：

• 增加了“立即参与“的互动按钮
• 增加了优惠券的图案，主题更明确

1.2 引导页

引导页是什么：一般只给用户展现一次，是用户第一次启动APP，在启动页之后的，对产品的价值和功能的介绍页面。

常见的形式：由多个页面组成，用户经过上下/左右滑动后，到达最后一个页面，会有一个登录/立即体验的按钮，点击后即可进入APP的主界面。

分类：功能介绍型、情感带入型和搞笑型3种类型

引导页的基本要素：功能文案、功能形象、按钮、指示器

1.2.1 功能介绍型

功能介绍型引导页是最基础的一种引导页，目的是通过简洁明了、通俗易懂的文案和界面将产品的功能呈现给用户。

文案的原则：用户需求就是你的文案

例子1：不带按钮和指示器的功能介绍型引导页

• 功能文案：两段式（总结句和解释句）
• 功能形象：多取与功能相关的APP内元素（比如图1中的文档图标、视频图标，图2、3中采用APP的一个实际模块作为主要元素）
• 没有按钮
• 背景通常是纯色，没有其他构成元素

例子2：带按钮和指示器的功能介绍型引导页

• 按钮：一般社交类的产品会强制引导用户去登录，所以会在引导页面中加入登录的入口
• 指示器：给用户页数的预期，我觉得有会更好。

1.2.2 情感带入型

情感带入型的引导页能通过文案和配图，把用户需求通过某种形式表现出来，引导用户去思考这个App的价值。

这种类型的引导页要求设计形象化、生动化、立体化，能够增强产品的预热效果，同时给用户带来某种惊喜。

例子：

• 功能文案：不是直白地描述功能，而是将用户的需求以某种引导的方式写出来。也不是简单的两段式，可以多条分散的，长短句和字词相结合。（如图1，”人人都会做，我的不一样“广告句的再加上“拿手菜”的提示，说明这个APP有指导用户做菜，增进厨艺的功能）
• 功能形象：不拘泥于产品本身的元素，而是发挥想象，尽力去配合文案和功能的要求。
• 其他元素：不定

1.2.3 搞笑型

搞笑型引导页的阅读量一般都比较高，拼的是设计效果或动画效果。

需要设计师学会扮角色和讲故事，综合运用拟人化和交互化的表达方式

例子：

• 功能形象：突出的特点是拟人化形象（可以是吉祥物、看板娘的动作行为，比如telegram的引导页就是小黄鸭的不同动作展示产品的功能和特点）
• 功能文案：多条分散的，长短句和字词相结合。
• 其他元素：不定
• 背景：可以是纯色背景，也可以是整张插画。

1.3 浮层引导页

浮层引导页是什么：浮层引导页一般出现在功能操作提示中，是为了能够让用户在使用过程中更好地解决问题而提前设计的用户教育。

浮层引导页的特点：

• 通常以手绘表现方式为主
• 会使用箭头和圆圈来指示功能的位置和操作
• 同时采用高亮的颜色和蒙版方式相结合来加强突出功能
• 还可以加入拟人化形象扮演引导者

例子：

1.4 空白页

空白页是什么：空白页就是由于网络问题等原因而出现的错误提示页面或者是没有内容的页面，例如页面中显示“没有信息”“列表为空”“错误”和“无网络”等内容的页面就属于空白页。

空白页的功能：

• 提示（为什么是空白的）
• 引导用户进行实质性的操作（怎么转到有内容的页面，这样就可以防止用户直接退出APP，从而加强用户对产品的黏性）

空白页的要素

• 空白提示
• 空白形象
• 空白引导操作（多个要素构成，比如箭头+圆圈、引导文案+跳转按钮+箭头【可选】）

设计原则：一定要简洁明了

分类：空白页分为首次进入型和错误提示型两种

1.4.1 首次进入型

在用户第一次打开App时，App会利用空白页中的提示引导用户进行操作，帮助用户找到需要的内容。

例子：初次进入时“关注列表为空”“记账记录为空”“提出的问题为空”的空白页（以图1为例分析）

• 空白提示：你还没有任何关注
• 空白形象：眼睛
• 空白引导操作：引导文案（查看推荐给你的吧~）+功能按钮（推荐关注）

1.4.2 错误提示型

错误提示型的空白页不仅在网页中很常见，在App中也经常出现，例如显示“找不到页面”或者“网络中断”等内容的页面。错误提示型空白页一般会指引用户解决问题，如点击“刷新页面”按钮可以刷新页面等。

例子：“网络错误”的各种错误提示型空白页

同样具备

• 空白提示：网络出错了
• 空白形象：天线等
• 空白引导操作：重新加载按钮、刷新页面按钮、马上报错按钮、检查网络按钮等