PS

说到产品设计规范，大家一定不会陌生。一套好的产品设计规范，将产品设计模块化、通用化、标准化，不仅能够为产品建立起统一的交互规则与品牌视觉，让用户拥有更好的产品体验、对产品风格有更深的认知，更重要的是，它能够减少产品设计人员的设计工作量，提升产品设计的效率。

很早以前小Q在《用好的交互设计来管理复杂－“筛选器”》一文，较为全面的剖析了筛选器的各种分类及其利弊。本文会继续筛选器的城市选择控件继续分析。A-Z index（字母索引）适用于对数据量为几十到几千之间的单词、词组或短语等类型的导航，且用户能对这些数据的首字母进行精确回忆。例如：国家、省份或城市的名称、姓名、昵称等。在移动端设计中A-Z index通常以竖轴形式出现在屏幕右侧，点击字母能将内容滚动到该字母的锚点位置。

今天咱们要聊的是“城市指南”（Big City Guide）网站这一概念设计案例研究。

首屏设计的7个技巧，它们并不复杂，却能帮你的首图设计更上一层楼。

趋势大多是这样，兴衰随着时间的推移快速的变化。

空状态，或称零数据状态，很多时候不太招设计师的待见。我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善一下，因为从表现上来看，空状态给人的感觉就是临时性的，有些微不足道。“用户会尝试多个同类app，然后在接下来的3到7天内决定其中的哪些不合适。对于’像样的’app，一旦用户决定保留超过7天，那么将会比较长久的存留下去。成功的关键在于怎样使产品在这3到7天当中保持与用户的良好互动。” Ankit Jain – Quettra“很多时候，人们放弃一款产品的原因其实都是我们可控的，例如他们无法一目了然的看出与你的app产生互动之后能给他们带来什么好处。” – Patrick Mckenzie

Slack 将保存时的「状态提示」设计在了同一按钮中。Flava 通过按钮的不同状态将「删除」与「确认」两个操作结合在了一起。Arent & Pyke 巧妙的将进度提示设计在了提交按钮中。Fantastical 2 利用了 iOS 的 Switch Button 来对 Event 和 Reminder 两种类型进行切换，并在按钮中加入了相应的图标用以识别。Wifeel 将 iOS 和 Android 版 App 的下载按钮统一设计在了一个按钮中。Tidy 在进行「归档」和「添加至相册」操作时，会在顶部以同色的方式来标识所对应的操作按钮。在 Tumblr 中关注某个用户时，「Follow」按钮会变为当前用户的头像并以一个小动画来作为关注成功的提示。

在这篇文章中，来自UXPin（一款用户体验设计的应用程序）的Chris Bank为我们带来了最近在现代互联网和移动应用中出现的一些优秀的用户界面模式，并将通过实例展示如何将这些出色的UI设计模式应用到其他的网站和应用中。

注：“可读性”是说动画绘制者如何定义动画的精准度，用来清晰而容易地理解正在发生的事情。例如：不可读=不清楚发生的事情很易读=它非常清楚，立刻能懂弹跳背后的物理理论：球刚开始被放开的时候，它有一个相对缓慢的速度。在重力的作用下，球的速度持续增长，直到接触地面的那一刻速度达到最大。地面给球反作用力，使它以几乎相同的速度反弹回去。当球移动时，两种力量作用正在球上 - 反弹的力、想把它拉下来的重力。反弹的力量正在慢慢释放，这使得球随着升高逐渐减低速度，直到它耗费掉所有的反作用力，最终到达反弹的最高点。它在顶部停留一微秒，直到重力把它拉下来，使它像之前一样加速下降。我用言语来描述这句话是有原因的。我们试着将一种自然行为分解为具体的步骤，这样我们就可以重新创造它。注：不要羞于“照搬”大自然。你的观众会更快地与动画关联起来，从而更容易读懂动画。注意：这一术语有可能与其它术语混淆。如果你正在阅读传统的卡通书，例如迪斯尼的《生命的幻象》或《动画师的生存工具》，那么这些书会告诉你，当一个物体开始减速然后加速时，这一过程被称为渐慢(ease-out)，因为它的姿态在“缓慢输出”。但是，在软件产业（CSS动画，Adobe Edge等），这一过程被称为渐快(ease in)！我不确定这一不同之处是怎么来的，但是不幸的是，这就是它的形成过程。所以，当你在阅读一篇文章时，而这篇文章把它们把“渐快”称为“渐慢”，那么不要觉得困惑。看一眼你所在的网站你就懂了:D。时间    Y轴的位置(秒) : (像素)—————-0.0  :   00.1  :  34
0.2  :  68
0.3  : 102
0.4  : 136
0.5  : 170时间    Y轴的位置(秒) : (像素)—————-0.0  :   00.1  :   2
0.2  :  10
0.3  :  36
0.4  :  87
0.5  : 170注意：你会在软件中看到更多用于设置缓冲的选项，例如二次的、三次的、四次的等等。它们只是缓和程度更高的选择，但是概念是相同的。只需记住——缓和的程度越高，你就会得到更多的缓和度。并不是规则，只是工具（There are no rules. Only tools）- Glenn Vilppu

交互设计 从来都不是简单的事情。可靠的交互通常需要借助对用户行为的深入分析，然后有针对性的精心策划。可是随着新的技术和新的交互模式的不断涌现，事情就变得不是那么容易了。

嗯，让我们从最最基础的说起——像素。你就把他当成一个个五颜六色的小色块.这些小色块们都有一个特定的标记值，比如，RGB值，CMYK值了。当然透明色块也是像素，不过值是零罢了。我们的计算机就是靠识别这些数值来认识颜色的。

在上篇《APP界面设计风格》确定下来后，产品经理（兼交互设计）还不用着急将所有的交互稿扔给设计师进行细致的界面设计。在细节设计启动前，拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧！

控件作为组织界面最基础的元素，相信大家都不会陌生，今天想谈谈这个不起眼的话题。文章从现实的控件过渡到软件界面，再用三大输入法的控件作为实际案例解说，全文干货满满，来收！扩大词汇量有助于提高你在某种语言上的表达能力，扩大「设计词汇量」可以帮助你更好地进行设计。但要记住，界面设计真正的艺术在于：解决正确的问题。

说起 Style Guide （即设计规范），大部分人的第一反应就是 Material Design 和 iOS Human Interface Guidelines，我自己就是靠读这两份文档逐渐入门设计领域，国内外的设计师、开发者们自然也是对它们了然于胸。来大公司实习之后，接到的第一个任 务就是维护、优化团队的设计规范网站，同时最近也经常和饿了么、随手记等互联网公司的设计师或产品经理探讨如何沉淀团队的设计。

“优秀的设计是隐形的。优秀的界面设计会细到亚原子级的微观字体（文字的精确定义）、看不见的宏观文字布局（文字的运用方式）、还有由交互设计和信息架构组成的隐形世界。最少的输入，最丰富的输出，界面设计师都致力于使用户花费最少的注意力。就像字体设计师与工程师那样，我们并不会试图找到完美的解决方案，但会寻找最佳的两全之策。”

本文编译自Medium，作者 Clark Wimberly 是一位用户体验（UX）设计师。

[核心提示] Google 为什么要换 logo，这个新 logo 是以什么样的理念和思路设计出来的？来听听 Google 设计团队自己的解释吧~

小白叨一叨：九月份设计圈的干货 合集来咯，包括前端开发、设计神器、设计素材 （字体、PSD等）、以及一大波实用的酷站推荐，全是精选干货 ，快来收吧！

“想清楚一点，你的智能手表应用为何存在，既然有iPhone应用。”“设计师：理解用户的体验，精确把握介入时机。”“如果你只能描述你所设计的功能，而不是相对应的时刻，那你还有很多事情要做。”