前言

我的工作：交互设计师 /UE/产品设计师
为什么写这个：因为经常在此站看到你们请不起设计师时做的应用，希望掌握了下面的原则，可以帮到你
其他：我就想到哪写到哪，因为我要从这么多经验理论去提取概要，给你们最关键的东西

这不是教程（免得被喷）

开始吧

1.三个概念

1.交互设计：

动效只是交互的很小一部分，但是经常有人把他们划等号。交互设计包含：业务逻辑、信息结构、操作流程、页面布局等。每一项里面又包含更多交叉理论，下面会提一些关键点。

2.用户体验：

正如你所理解的字面意思。用户从接触你的服务-接受服务-离开服务过程的体验感受。它可以反映在一条情绪曲线上，爽点痒点痛点。如果你能将用户情绪保持在较高的水平，那就是好的用户体验。

3.好的 UI/不难看的 UI

纯个人观点，就三点： ·简洁的 ·精致的 ·跟我交互稿没分歧的

下面就不区分交互和 UI 了，尽量找例子说明。

2.怎么做？不能怎么做？

1.保持逻辑清晰，从用户视角，按故事构建页面：

避免“产品设计图”这种全局思维。按用户故事划分，逐渐梳理各流程。
包括：设立用户目标、完整使用路径、引导用户行为、给予用户能力、结果和反馈等。（能理解，不细讲

2.一个页面只侧重于一件事：

这个好懂，每个（二级）页面只有一个主要任务（主要按钮）其他都应该弱化。
有个问卷调查小程序那个帖子问题严重。

3.去掉不必要的步骤和页面、别轻易阻断用户行为

·比如说“启动页”、“广告页”、等。（还有问卷调查那个小程序打开的第一个界面，点击后才进入首页），（契合 Human interface guideline ）。这些既提升体验，也有助于转化。
·能不用弹窗就不用弹窗，减少阻断用户行为。容错机制也不一定用弹窗，比如 apple 用的垃圾桶、左滑删除的二次确认等，既提升效率，又容错。
ps：这里疯狂 diss 麦当劳小程序

4.符合习惯和心理预期，给予反馈、提示

·例如，左上角返回的习惯、iOS 右滑返回的习惯、按钮左否定右肯定的习惯、等。
·例如，点击返回，预期是按页面堆叠顺序从右侧划出；例如，麦当劳小程序选择套餐内容后，预期是直接返回 or 确认按钮，然而都不是。
·反馈和提示就很好理解，不细说

有上面这些就差不多比较易用了，还有更多的，比如尼尔森可用性法则、减少输入、情景判断，就不说了。下面是视觉上的一些内容：

5.颜色

·最好看、最耐看的颜色：黑、白。
·app 上避免使用的颜色：中性灰（大面积）、中低饱和度的颜色。正绿、正黄、紫色慎用。
·好的颜色：较高饱和度、90%以上亮度。
·配色：互补色（色相相对，红-蓝 /橙-蓝）、近似色（红-橙 / 蓝-青）两种，这里红不特指 0°的正红，其他也一样。要保持较高的饱和度。
·除图片外，移动端 APP 界面应以黑白为主，主色面积 20%以内，辅色 5%左右，慎用大面积色块。否则界面杂乱无重点。
·现在渐变用得少了，最后会发现，还是简单的东西好看（ ps：手机也是一样）

6.样式

·不要描边。按钮、标签除外。
·线越少越好。如果你非常想用，那么：border：0.5pt 、#EEEEEE。越细越好、越淡越好。
·禁止绝对直角。喜欢尖一点的，那 radius：4pt。圆润一点的，border 8、12、16、24pt。
·对齐。文字排版、元素较少时，左对齐不会错。按钮居中 or 靠右。
·投影。直接给经验值，白色块投影 #000 0.1 blur：16pt，spread：-8pt （ blur 值的一半），垂直偏移自己调整。有色色块：投影颜色=色块颜色，alpha：100%，其他同前。
·避免：既有圆角又有直角，通栏跟卡片结合。
·重复元素（比如 list ）中按钮应该弱化，减小大小 or 描边按钮。
·不要色块套色块，禁止套娃。

icon 就不说了，其实影响不大

7.文字

·一定要有对比。字重、字号、颜色。不要怕太夸张。
·字号不能太多。除标题和注释标签外，最多 2 个字号，一共四个。建议 18、14、12、10pt。
·同一行文字靠近时，不要字号对比。
·大段文字避免中性灰，建议：#434343 #9999 #CCC。
·文字与背景颜色一定要有边距。
·不要用细体。
·大段文字要调整行间距。1.2~1.5 倍。
·文字与背景要有足够对比。

8.其他

·页面乱不乱，就看格式塔法则：相似、接近、连续、闭合、简单，不展开说，可自行百度。
·页面顶部、底部的 icon 可以稍粗，描边 1.5pt 、2pt，其他 icon 尽量保持跟文本一样粗细（ 1pt ）。

如果你还是记不住：

·简洁至上

·一个（二级）界面只做一件事，只有一个主要按钮。

·黑白为主要颜色，背景色#F5F5F5 左右，主题色辅色用高饱和、高亮度颜色，分别不超过 20%、5%。别用中性灰。（移动端）

·完全扁平，都通栏 or 都不贴边，不用分割线，亲近关系靠间距体现。

·标签栏标题：18pt #434343 bold，内容标题：14pt #434343 medium，主要内容：14pt #434343 regular，次要内容：12pt #999/#CCC regular、标签等小字：10pt #999 regular。

·高级的左对齐。

看情况再补充

来了：无设计经验，迅速掌握如何构造易用、不丑的应用

前言