新版Material Design 官方动效指南已经翻译到第三章了！这部分，从动效的运动和材料形变入手，让你的动效自然真实，贴近现实状态。再系统的干货都比不上官方的动效指南，西瓜就在这，赶紧来捡。 运动 Material design 的动效会被类似真实世界中的力的影响，类似重力。 物体在屏幕内的运动 屏幕内物体在两点之间的运动，是沿着一条自然、凹…
Material Design的动效设计是响应式的，自然的。使用缓动曲线和持续时间模式可以创建平滑、一致的动效。 速度 某个元素移动或者改变状态的时候，运动速度应该足够快，使用户不用等待。出现频率高的转场动画应该短一点，而有些转场动画要慢一点，来保证用户能理解它。 ↑↑正确：动效应该足够快，让用户不用等待动画完成。 ↑↑错误：不要做无意义的拖延。 …
在Material design的世界中，动效用一种优雅、流动的方式来描述空间关系、功能、和意向。 为什么说动效很重要？ 动效可以向我们展示一个App 是如何构成和用途。 动效可以做到： 不同视图之间的焦点引导。 当用户完成了一个手势后，提示用户将会发生什么 明确元素之间的层级和空间关系 当程序在后台运行时，分散用户的注意力（例如获取内容或载入下一…
大多数时候，交互的工作是和内容设计一起完成的，但是为了让你能够了解这两者之间的差别，我特地把材料分成两个阶段，也可以让自己梳理一下细节。 交互是什么？ “我躺在沙滩上，感觉到细碎的沙子在后背陷入；我踩在小溪里，感觉到脚底的乱石和流过脚面的溪水。我和沙子，我和溪水，产生了交互。” 在讲交互的过程中，我必须排除体验（感觉）的干扰。这是极容易被混淆的两个…
在用Axure做原型设计时常常需要用到图标。常用的方法就是采用网络上分享出来的部件库，比较全的就是小楼老师的部件库。但是这种部件库的ICON一般都是图片，当颜色与当前原型色调不一样的时候，就不能用了。而且ICON常常表示状态，不同的状态需要不同的颜色，用图片做原型ICON就不合适了。后来发现了一个神器，字体icon，每个icon其实就是一个文字，文…
分享一些设计模式，在交互设计学习过程中，这些设计模式有助于对产品结构的理解，比较成熟成熟的框架通常使用了多种设计模式,而且是可以复用的，让你的项目进程大大缩短，提高效率。 如果你熟悉这些设计模式，毫无疑问，你将迅速掌握产品框架的结构，学习设计模式，无疑是给了你剖析产品结构和思路的一把利器。 Web Design： 首页设计 搜索设计模式…
前言：小编对文中部分一些词汇及语句和字体加粗进行了个人理解上的修编。 总会在一些网络上看到有人纠结“UI”这个词的定义，有说是美工的，有说是交互的，有说是画icon的，还有说各种结合的。现在我来从英文的角度唠一下八一八这个词。。。 *在下初来乍到，码字纯靠YY，误人子弟概不负责。另外这个行业包括国外也是发展初期，有些概念并未定型定性成系统。如有胡言…
6个输入框 ，47个设计点 “乍一看到某个问题，你会觉得很简单，其实你并没有理解其复杂性。当你把问题搞清楚之后，又会发现真的很复杂，于是你就拿出一套复杂的方案来。实际上，你的工作只做了一半，大多数人也都会到此为止……。但是真正伟大的人还会继续向前，直至找到问题的关键和深层次原因，然后再拿出一个优雅的、堪称完美的有效方案。” - 史蒂夫·乔布斯 这篇…
尽管原型制作工具哪家强的论战在知乎愈演愈烈，但Axure无疑还是多数产品狗的主力工具。究其原因，Blink简单的总结为：在目前互联网环境下，Axure是更好的平衡了快速、好用、适用专业原型制作工具，对于像Sketch、OmniGraffle等热门工具来说，Blink认为他们是能做到部分Axure做不到或做起来很麻烦的功能罢了，并不能完美替代，而且他…
Alan Cooper：除非有更好的选择，否则就遵从标准。 作为交互设计之父的阿兰·库珀最为人熟知的或许就是这句“除非有更好的选择，否则就遵从标准”了，在交互设计领域有很多经过了时间的验证的法则定律被认作了标准，那么你都知道都有哪些吗？ 1. Fitts’ Law / 菲茨定律（费茨法则） 定律内容：从一个起始位置移动到一个最终目标所需的时间由两…