细水

本期整理的是基础规范和设计走查表的部分，个人感觉是慢慢的干货。很多细节规范是我们在日常工作中容易忽略和考虑不全的。

基础规范

1.色彩

品牌色在界面设计中的使用应同时具备品牌识别性以及界面设计功能性，色彩的运用应达到信息传递、动作指引、交互反馈，或是强化或凸显某一个元素的目的。

人们的大脑记忆主要分为3个阶段：识记、保存、重视。在实际设计中，我们可以利用这一特点，更好地传达品牌的视觉感知。支付宝移动端通过视觉感官来增强品牌色的引用主要分为3种途径，如下图：

a.当前选中项

b.主操作按钮

c.操作类文案信息

2.字体

有些个性的app，若字体也做个性设计，会产生3个方面的影响：

• 增加了app的安装包大小

• 用户在使用该app时，增加额外的学习和适用成本

• 个性字体与系统字体没有统一性

建议大家采用系统字体做设计方案的产出。

3.控件和组件

通过对支付宝数百个页面的拆解和分析，我们根据页面元素的稳定性，将所有的页面元素归纳为不同的5个层级，并且定义每个层次的设计自由度。如下图：

1）系统层

系统层——完全调用系统原生的控件和组件，不做任何额外的定义和设计。

2）框架层

框架层——用于组织页面信息，并且起到导航作用的控件。

这部分控件包括导航栏、Tab栏、分段控件、工具栏，

3）临时层

临时层——页面中临时出现的浮层和内容，在调整符合系统交互特性的基础上，样式根据支付宝特点定制和开发。

临时层包括活动视图、活动菜单、POP菜单、弹框、Toast、选择器、临时公告等。

4）内容层

内容层——页面中剩下的内容，跟页面内容的特点相关，每个页面可能都不同，是设计师发挥空间最大的部分。

但是一些具有共性的控件，如列表项、按钮、输入框等可以抽离出来，做成标准化，如下图：

设计走查表

设计走查表应该从什么维度开始建立？建立的具体内容是什么？

一般我们描述一个产品时，一定是将其放在一个场景中去描述的，用户在场景中和产品产生互动，互相影响。场景可能包含了移动App使用的软件系统、硬件载体、移动环境下的网络状态以及App实现的技术框架、版本兼容、使用时间、地点等内容。这些场景中遇到的问题是我们设计走查表里的核心骨架。如下图所示，App在各种场景下都有交互行为发生，而我们则保证它能够完善地运行，使用户产生信任和安全感。

下面我们将从用户使用移动设备的硬件特性、软件特性、网络特性，以及具体的用户界面内页面状态、页面流程完整性及消息通知，及涉及设计细节、与时间/数字相关性问题来阐述如何建立设计走查表。

网络特性

网络环境对移动应用设计有较大影响，如快速启动、合理缓存、弱网环境、终端/超时，都与网络状态密不可分。通过设计策略可以避免网络环境的各种状态对用户体验造成影响。

1.快速启动

应用在启动时需要一个加载时间，为避免用户在等待时间赶到枯燥、乏味，可采用以下3种方式

（1）让用户感知到应用的启动速度比较快

使用一张与应用相同的图片，在用户点击应用时，这张图片就显示出来，用户会认为这个时候应用已启动，虽然用户会在启动页面停留几秒，但是会觉得应用加载速度比较快。

（2）作为一个产品品牌展示区

启动页面展示的是产品的广告语，如支付宝的“我有我的方式”或者如犀牛的故事“犀牛故事，在故事里相遇”。

（3）作为一个广告展示区

启动页面可以是产品代言人或者某个时间段的活动。如手机淘宝就经常会有这样的启动页面。

2.合理缓存

页面合理缓存可以让用户感受到应用的速度更快，不浪费流量。但是缓存不能过量，不能任何页面内容都做缓存，那哪些页面需要做缓存呢？一般应用首页有比较固定的内容时需要做缓存或已有内容的页面不需要全页面加载，可以先展示较旧的内容人后加载出新的内容。相比每次进入都重新加载，缓存会让用户有更好的体验。

3.弱网环境

（1）弱网环境下加载失败

网络环境不稳定容易导致加载失败，加载时间 控制在8秒内（8秒是用户最长的等待时间，用户在等待8秒左右时开始感到不耐烦并且想离开当前页面），并且尽可能地采用有趣的加载来降低用户的等待时间，加载失败后，要给予用户重试的机会，并且告知加载失败的原因。

（2）弱网环境下内容展示不全

弱网环境下可能只能显示部分内容，经常遇到的情况是文字内容显示，而图片无法加载出来，只出现占位图或是空白图片，下图为2016年新春红包出现的占位图。

（3）弱网无网状态下数据传输/设置生效机制

如果网络环境不稳定或者断网，但用户需要将内容发布出去，可以支持用户本地发出去，本地可见。当有网络请求时，再将内容上传到服务端，并且让其他用户可见。这样可以有效提升用户体验，让用户不受网络环境的限制。下图为Facebook自动检测网络，有网络后立即上传失败内容的设计。

4.中断、超时

在网络中断时，帮助用户保存当前的输入内容或浏览内容，当重新连接到网络时用户可以继续当前的任务。若超时则给用户提示，让用户停止等待，重新请求网络或退出。

页面状态

1.页面初始化

启动应用进入首页时，可以在启动过程中预加载首页内容，让用户快速进入且有内容可预览。页面初始化需要配合加载策略进行。

2.页面刷新

通过刷新可以更新当前页面的数据。一般情况下采用用户手动下拉刷新，下拉刷新不需要对整体页面进行刷新，只需要拉取最新的状态，显示出来即可。但是如果当前页面涉及一些数字的提醒或通知，则不需要刷新也可以展示给用户，当用户点击查看时触发刷新，则将页面内容更新到最新的状态。

3.页面加载

(1)分步加载

为了尽快地显示页面内容，可先加载文字内容，再加载图片等内容。让用户在网速不够快的情况下可以尽快预览到内容。这种加载方式通常应用在用户首次进入页面时。

(2)懒加载

懒加载也称为延迟加载，即在需要的时候才加载，这种加载效率低，但占用内存小。一般在页面浏览过程中加载新内容时采用这种方式进行加载。

(3)智能加载

第一种策略是在产品中增加网络判断的机制，如果在弱网环境下，提前压缩图片并显示小图片，使其能尽量展示预览出的内容，点击小图，可查看大图。最好是可以让用户点击未加载的内容后继续加载，不需要重新刷新页面（只针对客户端页面）。第二种策略是降低图片视频质量，点击后可以加载高清图片或者点击播放视频选择高清模式。而在网络环境不佳的情况下，则默认帮助用户降低质量，减少流量的耗损。

4.页面内容被限流

一般产品页面是不会遇到限流的问题的，只有在活动页面可能因为访问量太大而遇到限流。

5.页面内容为空

一般与用户相关的页面内容为空，如我的动态、评论等。这些页面为空时不能不显示，但可以在显示上用调皮一点的文案避免空页面过于枯燥。

6.页面内容失效

一般固定入口不会有页面失效的状态。非固定入口的页面失效后，可以将入口下掉或者在用户进入后重新刷新出可用内容。页面内也需要考虑信息的时效性、延时、过期等问题。

页面流程完整性

（1）快速回到首页/主要页面

（2）让用户始终知道自己在哪儿

• 通过页面标题来让用户确认当前的位置

• 通过页面之间跳转的转场动效让用户确认当前的位置

•  用户可以沿原路返回

（3）返回到原来的浏览位置

明确任何一个可点击的去向，且去向是可以返回的。返回问题连带定位，从哪里去返回到哪里，特殊路径需要定制，可能会出现连跳几个页面的情况，在验收过程中需要重点注意。

（4）任务完成后跳转

• 任务成功后，页面跳转后可返回到来源页面。

• 任务失败后，需提示当前状态，并引导用户如何查看最新的状态。在有新结果时，通知用户

交互在画原型是很容易忽略在结果页面，返回时是需要返回到那个页面。

消息通知

根据消息的强弱进行消息通知的设计

强消息通知：可以使用客户端推送，用户可以在手机屏幕或者手机的通知栏预览到内容。用户可以通过通知的新消息直达到详情页面或通知列表。如消息push通知

若消息通知：弱消息通知，可以在用户打开应用后，在内容层上统一提示，告诉共有××条新消息。点击后可查看所有消息内容，如页面消息通知

细节

1.点击状态

包括开始、结束、不可点、失效、已领完、已过期等

2.发送状态

发送状态分两种：一是发送后需要较长时间返回结果的，此时发送后直接到结果页面，结果页面上显示当前进度和最终结果及其时间。如下图：

二是发送后较短时间就返回结果的，此时发送后到过渡页面，有几秒的等待时间，然后跳转到最终结果页面。如下图：

3.输入

（1）减少输入

在移动端输入的成本比较高，设计师可以通过表单、选项卡、默认填入值来减少输入。在社交会话中则可以通过更多的语音、图片、视频来减少输入，让用户沟通得更轻松。

（2）输入限制

在内容不确定多寡的输入框内，可以采用暗文或数字的方式帮助用户确认当前的输入内容有没有超过限制。输入的内容一定要做长度限制，因为不只是在输入过程中会遇到显示的问题，在发布后也会有显示问题。

（3）中断时保存内容

移动环境不稳定，经常会出现中断退出的情况。当遇到异常情况时，可以保存用户在中断前输入的内容，待环境稳定后用户可以继续操作。

4.反馈、

（1）及时反馈

当用户操作后，若有需要反馈的信息，在操作后立刻给出，反馈的区域不能距用户的操作区域太远，否则就会被忽略。如果是非阻塞式的反馈，那反馈的方式要轻，不要因反馈而干扰用户当前的任务，对用户造成困扰。

（2）反馈效果

所有的点击都要有明确的反馈状态，点击后会出现一系列的状态变化。如有的按钮只可以被点击一次，用户点击后首先按钮状态会改变，其次会产生一个与点击相关的操作结果反馈。

5.音效

应用音效需要考虑其大小，配合操作使用时是否有延迟。特别需要考虑用户当前的使用场景出现声音是否合适。

总结

本章总结的只是部分内容，在设计过程中还有很多的细节需要设计师考虑，并纳入设计走查表中。设计走查表不仅能帮助设计师本身，还可以帮助与设计师一起的项目小伙伴，在项目进行前期，交互设计师在参与需求策划讨论时就可以与项目组的同事一起阅读设计走查表，并制定项目在执行层面的规划，可以保证多项目并行时调用相同组件的统一性；在项目结束后，设计走查表可以有效地进行设计验收。

下图是3个案例，表内的内容不仅可以帮助开发梳理各种状态，还可以在后期给大家提供验收的依据，不会遗漏任何细节和状态。

框架案例

页面状态案例

消息通知案例