《规律与逻辑·用户体验设计法则》 学习笔记6

用户体验设计师的主要产出物是什么？从打开产品的引导页到数据为空状态的设计技巧，逐渐扩展到运营Banner设计，最后深入到界面层次感的打造以及不同风格产品的设计路线，全面解决用户体验设计实际工作中的各种难题。

我打算用两次笔记学完这里。该部分为书中第四章内容，视觉体验进阶前半部分。笔记摘自《规律与逻辑》。

设计中的感性与理性

设计是感性与理性的结合体，只有两者完美融合，才能呈现出独特的美感。感性听从内心，理性服从大脑，理性让人逻辑，感性让人自然。

如果理性束缚意识自由，感性就要消除压力。对于设计而言，应当做到感性和理性的结合，既要懂得设计规律逻辑思维，也不能让思维受到局限，勇于大胆尝试。

引导页设计

引导页是指导用户如何使用产品的页面，之所以会大量出现在移动端产品中，是因为受到传统PC软件时代的影响。PC时代的软件，用户往往不知道如何操作，所以对于软件而言必须配备一个完备的说明书，甚至需要进入专门的培训班进修才能掌握某种软件的使用。

不过移动互联网时代，这样的说明书似乎显得有些笨重了。软件的轻量也使得用户学习成本大大降低，并不需要以前那样再配备一个说明书了。于是人们使用引导页代替说明书，对用户进行软件使用介绍。

引导页分为产品介绍型、操作指引型和讲故事型。

• 产品介绍型

简单介绍产品，让用户有个大致的了解，体现产品的格调，多为图文共同展示形式。文字作为简要介绍，图片烘托氛围，下方最好提供一个阅读进度条，让用户了解当前介绍所处的位置。

• 操作指引型

这样的引导页除了会在首次打开产品时出现，还会在产品内首次打开某个界面时出现。这种引导方式会加深用户的印象，但在用户使用过程中，不经意间弹出的引导会打断用户操作，会引起用户反感。所以这样的引导页尽量不要出现在简单易理解的操作步骤中。

• 讲故事型

讲故事型引导页的主要目的是营造具有浓烈感情色彩的场景，增加用户对产品的关注，提升在用户心理认知中的情感。一般是设定一个与产品相关的场景进行介绍，使用形式也是图文共同展示较多。

引导页设计规律：

• 控制文字量并有效传达信息：人类对于文案在短时间内能记忆住的字符不超过9个。
• 改变常规的交互方式：可以使用更创新的形式吸引用户关注，比如使用弹窗。
• 信息聚焦：引导页中不应该出现过多的视觉焦点，容易分散用户注意力。

空状态设计

（老师！这个问题我会！让我来！）

某列表或某区域的信息为空，没有任何可以展示的东西，或者说获取数据出错，断网，程序异常等情况，都可以认为是空状态适用的场合。

空状态对于提升用户体验的重要性是极其高的。我在《前端工程简史》那篇笔记中写到AJAX技术改变了前端， AJAX技术进行的异步加载表现到页面上就是信息的更新，那如果更新出来是空或者调用接口时爆500了呢？（error 500代表服务器内部错误，一般是后台程序bug了）。此时如果是一个全白的区域，给人的感觉就类似于“是不是正在加载？卡了？”，那自然用户就会感到迷惑，但此时不一定是卡了，而是确实没有什么可以展示的。使用空状态便可解决这样的问题。

空状态分为以下三类型：

• 系统推荐型空状态

适合在应用初次启动时使用，此时用户没有或很少在应用内执行任何操作，对于一些信息推荐相关的内容自然是“无米可炊”，那么可以设定一个推荐页面，让用户根据喜好选择一些内容，就解决了内容空的问题。

• 操作指引型空状态

这样的空状态适合以下逻辑：界面应该展示产生的内容→界面并没有展示产生的内容→空状态指引用户前往产生内容的页面。

举个例子，某书籍阅读类应用，用户刚注册账号时书单内没有任何书，此时访问书单页面时，空状态提示用户书单为空，可以前往找书页面发现自己喜欢的书籍，给出一个明显的按钮便于用户跳转。

刚才的例子，使用推荐型空状态一样适合，但同样需要给出跳转找书页面的链接，否则用户体验会不太好。

• 情感表达型空状态

这是一种“实话实说”型空状态，适用于用户操作的结果页面。比如用户搜索某关键词却什么都没搜到，此时并不怎么需要多余的跳转（毕竟当用户没搜到东西时，常见的操作要么是返回上一页，要么是换个关键词继续搜），此时只需要放一张有趣的图片，可以配上一些幽默的文案，提示用户没有结果，就足够了。

设计空状态应该避免死角，每个有可能为空的状态都应当考虑一下（是考虑一下，不是都需要，下面会说），在用户使用一个产品并完成他之前从未完成过的功能时，不能让用户“走进死胡同”。

但并不是每个空状态都需要设计，也不是每个空状态都需要来个配图进行精心设计。当同屏只有一个版块时，使用带图空状态是合适的，但如果同屏有多个版块，每个版块的空状态都带个图就显得有点占地方了，这时候空状态只给一句话就可以。如果是多版块页面，某版块信息为空时也可以直接设定其折叠显示或者不显示，这样其实也是空状态的一种体现。

Banner设计

Banner可以作为网站界面的横幅广告，也可以作为活动用的旗帜，还可以作为报纸、杂志上的大标题。对于移动端设计，Banner可以理解为最高视觉层级的功能或活动入口，因为Banner在设计时通常都会花里胡哨的，视觉层级相当高。

Banner的尺寸并没有固定的规范，形状也没有规范，圆角矩形，弧形都是可以的。我在工程实践中常用到的PC端Banner尺寸有1920*700px和1200*400px，手机端可以等比缩放一下或者根据实际情况调整。

Banner的组成五要素：文案、素材商品或模特、背景渐变、纹理叠加、点缀图形。

Banner的设计要点：

• 文案注意排列规则，一行文字不能超过9个字。
• 设计背景渐变让视觉添加纵深感，用色应当符合产品特性。（色彩选取参考请参照我的同系列学习笔记3）
• 合理使用纹理叠加衬托主体，但避免过度使用喧宾夺主。
• 实物点缀，人物点缀，图形点缀对设计Banner尤为必要，这三者至少应当出现一个。
• 注意控制版面色彩与版式平衡。

据书上说，带着这几个要点去网上找找比较成熟的banner图，会发现万变不离其宗。

Banner的组成形式分为纯文案型和文案素材结合型。

纯文案的Banner一般出现在电商以外的产品中，这种Banner不需要图的原因或者结果就是重点突出文案，所以设计这样的Banner必须在字体上下功夫（字体规律请参考我的同系列学习笔记5）。这样的Banner需要元素和图形来烘托气氛，绘制或选取素材时应当尽量贴合Banner的主题。

文案与素材结合型的Banner在电商类或音乐类产品中应用较多，电商类Banner推广销售产品，音乐类Banner推广音乐专辑。设计这样的Banner需要注意权衡文案和素材的视觉层级关系，同时两者尽可能统一风格，营造产品应当表达的氛围。

Banner的设计风格有以下六种：

• 素雅文艺型：大面积留白，字体多宋体，字号差距大，饱和度较低，明度拉高点，常见灰白色。
• 高冷时尚型：文案很简洁，黑体无衬线，色调就两种，素材大比例，摄影很细腻，点缀得小心。
• 传统中国风型：灰调用的多，书法中国色，文案多竖排，排版右到左，不要渐变感，传统元素加：印章、山水画、墨迹、扇面、剪纸、园林窗格、祥云、京剧元素、卷轴、锦鲤等。
• 青春活力型：排版随你意，饱和度拉高，互补加对比，标题别太细，背景多点缀，字体也随意。
• 节日促销型：就图一热闹，多用红黄紫，画面少留白，标题得夸张，字号放大些，视觉冲击强。
• 科技概念型：底色用暗色，光效配科技，不要大圆角，配色蓝紫黑，画面要硬朗，科技元素加：光线，金属，线条，光点，宇宙，地球，人脑等。

Banner在设计中需要注意的问题：

• 主题要明确，构图要紧凑，整体性要强
• 左边的视觉重量更高，想突出什么元素就尽量把它放左边
• 巧用装饰元素，避免画面单调
• 纹理应当体现一定的质感
• 装饰性图案元素一般不让用户明显感知到，视觉上隐约可见即可
• 留白和点缀的多少应当根据风格确定

装饰元素的分布方法：

• 散点分布法
• 流星雨分布法
• 点状环绕分布法
• 放射发散分布法

装饰元素的设计方法：

• 渐变图形法
• 元素提取法
• 发散联想法

启动页设计

启动应用程序后，进入主功能界面之前一般会有一张图或一个动画，在程序进行加载时显示，加载完成后消失，这就是启动页。

启动页本身不是为了展示艺术品，而是解决用户会因为等待时间过长产生厌烦的问题。PC时代一般都是大型软件和网游才有启动页，移动端应用程序启动页应用变得非常广泛了。

启动页设计有以下四种形式：

• 快速启动型启动页，尽量让用户不去感知界面的存在，无缝衔接到应用中。这样的形式有两种实现方法，第一种是把App首页背景图作为启动页，第二种是把首页加载状态作为启动页，但这样的设计具有局限性，仅适合轻量级应用，使用量较少。
• 品牌传递型启动页，这样的启动页是比较常见的，通常包括三个要素：产品图标，产品名称，宣传口号。部分启动页还会加入如开发者信息等其他信息，这样的启动页能加深用户的直观印象，拉近与用户的距离，强调品牌性格。
• 节日氛围型启动页：这样的启动页多以插画形式出现，一般会在节日或特殊纪念日时出现，时效性很强。当然也有一些直接用普通插画当启动页的，这样的启动页会很吸引用户的注意力，所以在设计插画时应当用心一些。
• 广告推广型启动页：恰饭启动页，无非就是弹广告了，这样的启动页在设计时和节日氛围型差不太多，细节之处其实在于没多少用户愿意看广告，所以最好给个倒计时提示或能点击跳过（恶心心做法：跳过按钮做成跳转按钮，参照几年前的某app）

设计启动页的注意事项：

• 避免过度设计，不能画的太花里胡哨，做到简洁耐看就足够了。
• 避免高频率改动，启动页往往可以代表产品的第一印象，频繁更换会造成心理感觉等待时间加长，如果像QQ，微信那样长时间不换的，用户甚至有时候回感受不到启动页的存在，这只是心理感受，并不代表实际时间一定变短了。