PS

不要让视觉效果过重以至于霸占了整个网页的重心
视频比起文本和图片更容易吸引用户的注意力
女性和孩子的形象更容易吸引用户的注意力
用户浏览页面的视觉轨迹是“F”型的

动机
能力
触发

我有两种方式 来建立这种认识。
简单而迅速的方式是用一句话把它写出来，包括我要设计什么，要遵循哪几条设计规则，尽量使用最简单的术语。然后，在面对设计功能对照表而犹豫不决时，我就会暂时停下来，问我自己：“做这个表是为了什么？”这个描述是我判断设计是否简单的基准。在做一些比较小的设计（大型网络中的一个页面）或者在我多多少少了解到设计背景的情况下，这种方式都是很奏效的。
更好而花费时间更长的方式是描述我希望用户拥有什么样的体验。具体一点说，就是描述用户的使用背景，以及我的设计怎么满足用户在该情下的需求。在设计一些大型啊项目时（比如整个网站或者移动设备），这种方式很适合，因为我这种方式可以让我深入透彻地考虑到每一个细节。

在Material design的世界中，动效用一种优雅、流动的方式来描述空间关系、功能、和意向。

题外话：作为一名交互设计师，平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样，作为一名资深的吃货，毋庸置疑，当然先给大家分析几款“外卖”的交互设计。

Material Design的动效设计 是响应式的，自然的。使用缓动曲线和持续时间模式可以创建平滑、一致的动效。

“如果所有都是重点，那么就不存在重点了。——Patrick Lencioni”“用户在手机上永远用不到这些内容。”

“hey各位！我们要开始做一件重要的事了！”陈老湿已经走到我们的工位前，兴致昂扬地说道，“竞对已经上线了类似的功能，我们得抓紧了。上海那边出了方案，看，在这里！”

新版Material Design 官方动效指南已经翻译到第三章了！今天这部分，从动效的运动和材料形变入手，让你的动效自然真实，贴近现实状态。再系统的干货都比不上官方的动效指南，西瓜就在这，赶紧来捡。

“我躺在沙滩上，感觉到细碎的沙子在后背陷入；我踩在小溪里，感觉到脚底的乱石和流过脚面的溪水。我和沙子，我和溪水，产生了交互。”如果是静态的画面，我们恐怕不能确定画面中人是先吼叫被抓住，还是先被抓住再吼叫：
“疯狂罪犯终于落网！”
“魔法界警察暴力执法！”
——这两者之间的差别可大了。“大页面的设计是焦点的设计，小页面的设计是空间的设计”“扁平化其实为了让你觉得地方足够大。你信吗？反正我信。”——“李白”“使用APP，你不需要别人告知左箭头是什么意思。”你应该熟读Android和ios的官方设计规范、人机交互指南文档，只要遵循这些规范，用户不会因此犯错。
Ps：规范可以帮我们“不出错”，但要达成“绝妙的设计”还需更多创造力。突然！你被人打晕了！
醒来的时候你发现自己到了一个陌生的地方。
现在你在想啥？——
“我在哪？”
“我是谁？”
“我该怎么办？”“我在18层1806，我要去3层0303。出门左拐坐电梯，出了电梯再右拐“

通常带有明确指向性和说明的标签（按钮内容，文本）会比通用的“OK”或者“确定”要更好。
尽可能使用动词，而不是OK，因为前者意义会更明确，用户不会断章取义从而作出错误的选择。

OK/[Do it]/Yes
[Don’t do it]/No
Cancel

踏入新创科技业以来，总是听见许多设计师/工程师朋友们在抱怨设计师与工程师之间的合作有多么的…不融洽（糟糕），要码是设计师常常抱怨工程师没有 美感，不重视设计细节，或是连Guideline都不读完就来跟我讲该怎样设计（ → 强烈建议iOS/Android 工程师不管未来是否会接触接口设计都花些时间把iOS的Human Interface Guideline跟Material Design Guideline给看完，这是基本啊！！基本啊！！在线已经有满坑满谷的翻译文章啰，所以别再拿看不懂英文当借口啰）；另一方面就是工程师也常常会抱怨 设计师总是把写动画当作小画家，把写程序当成写国字（Framer会红的原因？！）或是总是有着过于天马行空的设计想法。

文案规范
视觉指南

配色方案，包括每种色彩的具体参数，以及其他可接受的色调
字体和排版方案，包括每个部分的字体类型、尺寸、字重以及具体用法
LOGO，包括它的样式、变体、尺寸以及位置的说明
拼写、关键词的选择、文案的风格（包括按钮、社交媒体等）
图片使用规范，包括色彩、裁剪规则和视觉表现方面的标准
SEO信息，比如可选的标签和关键词
栅格标准（主要用作网页排版和印刷）
空间与留白方面的说明（设计的松紧度等）
关键点的说明（团队成员可能会提出的问题或者有待澄清的点）

在内容表述上不要限制太多，这毕竟是风格指南，重点是视觉上的引导，设计是核心；
将相关、相联的条目整合到一起做快速指引：一个页面介绍色彩，在另外一个页面做排版的规范等等；
用图片案例来展示界面应有的外观，而不要单纯用枯燥的文字来做介绍；
提供可用的具体说明。比如配色方案中提供色彩的RGB或者CMYK的具体值，确保色彩的运用能够一致；
将一部分的设计案例分解说明，确保每个元素的功能和使用规则都足够明晰；

现在新手引导已经成手机客户端标配，但是通用的做法不见得是最有效的。这篇文章中我们将会看到为什么新手引导经常无效，以及如何借鉴游戏设计的原理来提高用户的参与度。

我们手机里面装满了各种各样的APP。安装这些应用，我们的初衷是让我们的生活更加便捷。但是当这些应用无法满足用户的需求的时候，用户自然而然会离开，并寻求更好的解决方案。一个成功的应用包含有诸多元素，而其中的用户体验设计 则起到了决定性的作用。在残酷的竞争中，用户体验 往往是决定成败的核心。

社交虽常见，但音乐真的适合社交吗？音乐社交存在哪些特殊性？如何利用音乐来社交？可能你常常使用云音乐，却不曾想过这些问题。现在来看看作者对这些问题的思考吧。

iOS10发布了，苹果遵循了一切从简但又增加了一些提升用户体验的功能，比如向开发者开放了更多接口，设计者又如何跟随iOS的步伐做好产品设计呢？

互补指的是我们视野中色彩和色彩之间相互补足的关系。选择色轮中处于相对位置的色彩，构成的配色 方案令双眼觉得和谐。最常见的互补配色有两种，三元配色和复合配色，我们将稍后探讨。
对比则可以将不同的元素区分开来，从而降低视觉疲劳，构建出视觉重心和焦点。元素之间的高对比度让文字更容易被识别，引导用户注意到更关键的信息。背景和背景之上文本的色彩选取就是一个非常常见的对比度的问题，我们会随后聊到。
色彩对于用户的情绪上的感染也是一个重要因素。

较小的文本应当确保至少和背景之间有4.5:1的对比度比率
较大的文本（14pt粗体，18pt常规）应当确保和背景之间的对比度超过3:1

字体作为界面设计的一个元素，对用户的阅读体验起着至关重要的作用。本文是 UI 设计师 Viljami Salminen 分享的用户界面字体设计的基本规则和技巧。一个优秀的设计师懂得：网页上的文字不仅仅作为内容而存在，它还是用来交互的界面。
– Oliver Reichenstein
Helvetica 真的弱爆了。它不是为小屏显示而设计的。像「milliliter」这样的单词显示效果就很差。
– Erik Spiekermann

色彩：鲜艳的色彩更抓眼球，适宜于可点击的元素使用
空间：在关键元素周围留下足够的空间，让用户更容易发现，也更容易操作
排版：使用简单干净的字体（尽量使用笔画粗细统一的字体），并且挑选适合屏幕的字体，确保整体可读性。

告知用户他们所处的位置，或者显示当前状态（比如光标悬停色彩改变等）
当某个动作执行的时候，应当给出相应反应（比如提交表单完成之后给予成功提交的提示）
告诉用户发生了什么，以及接下来将会发生什么（比如加载中的进度条）