界面设计阶段容易忽略的小细节

按钮部分

按钮状态

按钮的状态全部想好——默认状态、禁用状态、选中状态、激活状态。虽然不一定会用上，但全都罗列一下，以备不时之需。

按钮样式

App里面，按钮样式不能过多，要尽量统一。

查看完页面所有出现过的按钮样式（图标按钮、文字按钮、幽灵按钮、实心按钮，水晶按钮等），然后从功能和排版的角度去选择。如果都没有匹配的话，我就会再多设计一个。

明确按钮含义

按钮使用不可以含糊，触发怎样的行为就直接使用该行为含义的按钮。

例子：本来这里的交互是「关闭弹窗」。但我的「下拉按钮」如果是对应之前的「上拉按钮」，明显就会有一种这里只是收起弹窗而不是直接关闭。直接替换成「关闭按钮」则更明确。

文字部分

多语言情况

当App含有多种语言版本时，你就要考虑当前的行数、排版是否可以满足不同长度时候的显示。例如：下面的这一个排版的文字，如果转换成其他语言就会不够位置显示，从而影响阅读使用。

文案

UX文案在设计中起着关键作用。合适的UX文案对于用户的使用和业务的发展承载巨大的作用。这里需要另外开一篇文章去阐述。

数据和内容的极限值

数字：最大值和最小值？

内容：对齐方式？最多显示几行？超出部分怎么处理？
内容最多显示多少，超出部分怎么处理（使用「…」还是不显示，还是修改文案）。

最方便的做法是设计界面的时候，使用最多文字的选项做设计。
例如：下边的“报警灯闪烁时长”，若是换成英文两边都会溢出，所以先要知道最大长度为多少，再考虑溢出时怎么处理。

预设文字/数值

未点击的输入框显示值、选项的默认值、输入数值的默认值应该显示最常用、最方便的数值。
例子：
A.警笛的鸣响时长选取最频繁使用的时间。
B.苹果的闹钟设置，它是基于当前时间为默认值。这样设计让我们更加便利地调整时间长的闹钟或者是短时间的闹钟。

字号、字间距、行间距与段间距（可读性）

（这个研究了我老半天。。）

不同的承载方式，书本、网页和手机的字间距这些的测量也是不一样的。而且，在设计稿和开发中，因为不同的软件自身预设的字号、字间距等值是不一样的，所以这样会导致开发和视觉最终效果的不一样。所以，给出规范时，不能仅仅给出字号，还要把行间距和段落距等也给出来。

总原则：字距 < 行间距 < 段间距。 间距应当遵循倍数原则，切间距数量不宜过多。

字号：字号是一切的参考值。字号大小根据不同的适用人群和场景定义。但是，字号越小，字距（tracking）就应当相对更大、行高也应该相对更大。反之亦然。

字距：中文使用每种字体的默认数值即可（理由：中文字符区域大多是正方形，且每种字体设计时也已经考虑了最佳默认显示值）。英文则要参照对应的字体官方给出的参数调整。（理由：英文字母多数不同字宽）

行间距：通常情况下，行间距应该是文字的1.5倍为最佳。网页上面的文字通常也是1.5倍行距。宽松型行距：行间距为文字的1.5倍～2倍。紧凑型行距：行间距为文字的1.2～1.4倍。Sketch：字体大小的50% < 行间距 < 字体大小的100%

行高：行间距和行高是两个不一样的概念。而且， 每个软件或者平台定义的行高是不一样的，所以自己先google一下再设定。sketch：行高 = 字体大小 + 行间距

段间距：通常情况下，段间距一般为行间距的2倍或1.25倍。sketch：间距约等于200%字体大小。

单行与多行文字情况

对齐方式：单双行都是用统一对齐方式。如果不能下判断，看一下实际情况下，单行和双行的频率谁比较多。行高：以多行文字来设置合理的行高。

（没有图片）

光标颜色

光标的颜色是最容易忽略的。应该全局统一使用一个光标颜色，不同的背景颜色下面也要保持一致的颜色。

颜色部分

暗黑模式下的显示

暗黑模式到了2020年应该已经是设计刚需了。这里就需要我们设计师去读懂iOS和MD的官方规范文件进而去设计。

界面部分

异常状态考虑

异常状态如网络错误、操作失败，展现等，其实这些情况应该是在绘制功能流程图或者绘制交互线稿时候应该想到的。设计的时候不能只考虑最优情况，而忽略这些异常情况处理，而这些异常情况往往也是程序员会刨根问底的，所以想流程时一定要把异常情况也想进去。

页面打开速度，数据加载和提交的快慢

功能挤在一个页面，会出现loading很慢，拿不到数据的情况，从而导致整个页面瘫痪。
例子：左边的两个功能全都放在同一个页面上，会让加载时间变长，但用户往往只是会使用一小部分，让用户失去耐心不再等待。右边则三个分开，同时也就代表着分开加载，加载速度更快。

弹窗还是打开新页面

可以从内容关联度，及时反馈性和操作性判断使用哪种。
内容关联度：相关较少内容使用弹窗，多内容使用新页面
反馈及时性：不需要及时反馈的话使用新页面，及时反馈使用弹窗
操作性：只读或者填写？
弹窗更适合临时性、补充性或突发性的情况展示。新开窗口更适合浏览型场景或共存型页面，单任务场景或进程型页面。

例子：更多的网络信息因为内容较少，且是补充性的情况，更快的反馈速度能让用户使用感更加顺畅，因此使用弹窗。

错误信息、超时信息提示

这两个情况是每一个功能都可能出现的，怎么优化方案和用户体验。可以从出现方式，文案，提供其他解决方案等方向着手解决。

（没有图片）

使用手势

点击、下滑这些手势是不需要告知就可以直接操作的。但是长按、左右滑动等更多的手势支持则需要说明和告知用户使用。
例子：使用更多手势支持的操作，第一次使用时告知用户。

相同手势引起的歧义

避免同一个相同的手势用在同一个页面不同的地方。
例如：MD设计里面，tab选项卡和cell里面的内容切换，如果cell内容切换也是可以左右滑动就会显得混乱，不知道同时出现应该究竟是切换tab还是cell内容。

（没有图片）

加载方式

加载状态常用有下列的这几种：分布加载、预加载、智能加载和模态加载。区分好这几种加载的不同，不同情况使用不同加载状态。这个设计的时候最好和程序员确认一下。

分布加载：根据不同情况而优先加载哪一部分的内容。优先级：界面布局>文字>图片>视频。

预加载：当用户已经看完这一页的内容时，预先加载下一页的内容（常用于长文浏览的页面）。

智能加载：不同的网络情况使用不同的加载方式。（流量和Wi-Fi不同的使用状态时）

懒加载：当内容出现在界面区域的时候再进行加载。

占位加载：使用色块来展示未加载的数据，可以展示即将加载的框架，让用户感知。

白屏加载：白色屏幕+动画loading/图片loading/进度条。一般用于整个大page时使用。

进度条加载：白色屏幕+进度条。

模态加载：一般使用以限制关键性（提交数据时，且不想用户在加载的时候随意修改刚刚提交的数据）的操作（如创建订单、支付、修改数据），因为会打断别人的使用进度，所以要慎用。

界面可拓展性

页面的内容随着不同的阶段也会有不同的变化，我们的界面不能够“画死”，必须容许新增内容。

例子： 如果要增加一个状态，这样的设计就“画死”只能显示三种状态，如果以后有新增状态就得重新设计了。

小屏幕的宽度和长度适配

一般我们的设计稿是按iPhone 8的标准（375*667 @1x）的状态下设计的。但是iphone SE等的这些小屏幕手机也要考虑他们能否装下。

（没有图片）

页面功能是否需要推送

每次开始一个页面设计时，问一下自己，该界面上的功能是否需要推送？哪些需要推送？为什么？什么时候发推送好？把需要推送的文案也敲定好。

步骤显示

当涉及到填写表单、问卷或其他含有多次步骤的功能，应该考虑是否加上步骤显示。

例子：下面的三个界面都用了数字、标明的设计告诉用户目前再第几步。

反馈

反馈可以让用户知道当前的进度，反馈不宜过少或者过量，过少会让用户感到不安，过多会让用户厌烦。一般的反馈不宜打断用户的使用，但重要的反馈可以根据流程步骤（比如填写表单功能的最后一步，可以打断）或功能重要性来使用打断用户操作。

例子：用户反馈界面，当用户填写完之后，我们给一个强提醒模块弹窗，这样不仅不会打扰用户，而且还会给用户一种「我们是很在意你提出的意见」的感觉。

空页面

空页面是最出彩也是最容易遗忘的部分。从0开始设计的App会先从内容开始设计而往往忘记。所以，刚设计就想想这个会出现没有内容的情况吗？把有空页面情况的界面记录下来，等到完成好重要功能界面时再一次过润色空页面，效率和统一性上面也会好很多。

信息层级

信息层级的排序，不要全部都放在一起结构化。要善用利用分割线，灰色块，间距，阴影，来说明信息的重要性。当然这个是平面设计的基础功。

（没有图片，自己找教程看）

关联地方设计

功能除了在该界面显示外，它可能还会以其他方式弹出显示。例如弹窗、推送、短信、历史记录。所以，想想有没有其他地方出现的功能。

（没有图片）

排序

从重要到次要；从常用到少用；

例子：配件为例，把常用的放在首位

动画

动画实现方式

实现的方式使用flash，还是使用Lottie，还是程序自己写代码实现。当你设计的时候有动画，一定要确定好使用的技术，再去描绘无限的idea，不然想了也是白想。

Lottie是否支持

若你是使用lottie导出动画的话，请看看在ae使用的内容（表达式、特效），Lottie是否支持导出。

出现机制

当你知道了动画视线方式后，你要写好动画的触发条件、出现时间、出现位置、出现次数、是否循环、点击区域、持续时间和进退场效果。

弹窗层级

有时候，动画提示也可以看作为一个弹窗。动画也需要考虑清楚它的弹窗优先级。

-The End