谷歌

本文讲述的是户研究与A/B测试相结合，发现问题的真实原因，并进行有效的判断处理。“实验可以证实一个理论，但实验永远无法创造出一个理论。   ” —— 爱因斯坦

即便你是一名如此经验丰富、作品惊艳、才思敏捷、手法高超、声名显赫、有强大号召力……的设计师，如果你还未亲手尝试过低保真原型测试，我依旧会推荐此方法。

近年来，越来越多的国内开发者将目光从国内转移到国外，纷纷投入到移动大航海时代的浪潮之中。在产品国际化的过程中，产品UI是否也跟上了国际化的步伐？Dropbox 设计师 John Saito 针对产品设计国际化中出现的问题进行了分析并提出了 7 条建议，值得一看。

了解食材是厨师的基本功课之一，了解器材是摄影师的基本功课之一，了解城管的时间表是卖热干面大叔大妈的基本功课之一，了解各个组件的设计模式和属性是交互设计师的基本功课之一。

精美的动画对于提升产品体验有很大帮助，如促进用户理解功能，缓解用户情绪，调动用户积极心理，为产品提供亮点等等。诸如此类的文章相信各位已经看过不少了，不少人已经开始越来越重视动效在产品中的应用了，还没有看过的同学不用急，谷歌官方的动效指南讲解得很详细，建议只看这个就够了，配合一些动画理解起来更容易。说明：

1.优化直播间分享面板，增加特效

2.当用户点击分享按钮时（*包括传统直播间主播面板的分享按钮和上方分享按钮，手机直播间的分享按钮*），从下方弹出分享面板，逐个弹出分享icon，并淡入显示分享奖励。

3.用户关闭分享面板时，分享icon从右到左依次下落淡化消失
相关参数：

1.分享面板减速弹出，运动时间225ms
2.分享icon从左到右依次弹出，运动时间225ms。带有奖励图标的，当对应分享icon弹出后，分享图标淡入显示（时间225ms），第二个图标比第一个迟100ms开始运动

eg：如图第一个为qq图标，当用户点击分享按钮，分享面板弹出后，qq图标开始弹出（时间225ms），100ms后第二个图标（qq空间）弹出，当qq图标完全弹出时，淡入显示分享奖励图标，时间225ms。
3.分享icon从右往左依次收回，分享面板收回，所有运动的时间减少30毫秒，如分享面板收回时间195ms，分享icon收回时间195ms。

andorid端动画曲线采用系统自带：AccelerateDecelerateInterpolator（在动画开始与结束的地方速率改变比较慢，在中间的时候加速）

iOS端动画采用系统自带：kCAMediaTimingFunctionEaseInEaseOut （在动画开始和结束的时候速度稍慢些）
具体效果可参考附件视频

“怎样才能改善用户体验设计？这是关于用户体验研究恒久不变的话题。今天给大家推送的是关于运用认知心理学中的相关理论来提升用户体验的研究。希望对大家有帮助。 文章太长，会分成两次推送，欢迎期待~“通常，飞速行驶的货车不可能轻松地停下来。因为它需要花费很多努力，运用更多的动能去改变运动状态。与其强迫人们从他们的主任务上转移注意力，不如直接带他们去他们想去的地方。”
——Luke Wroblewski，谷歌产品总监

极简风格能帮助用户简化操作，兼容性好，载入页面快等等优点，不过虽然看起来简单，我们需要考虑的东西可一点都不少。这一次，就让我们一边学习简约风格的原则，一边将它应用到实际网站制作中去吧。

今天的文章我们来聊聊搜索框的设计，如何让用户尽量节省时间，搜到他们想要的内容。

模态已成为今天的可怕的弹出窗口的版本。用户发现模态窗口很骚扰人，人们本能地自动关闭这些窗口。

从iOS 9改版到iOS 10之后，锁屏页面的音乐控件变大了，用户体验 明显提高。那么最佳的按钮触摸大小应该是多少？经过1.2亿次的实验后，这个结果被微软/苹果等顶级公司采用，强烈推荐学习。

针对APP同质化现象，本文作者从从交互层面探索了不一样的 App 该如何设计，且谈及自己的解决方案。值得一读。     “首先占据人们大多数时间的同类型APP内容高度同质化，而风格取决于内容，在平庸的内容下只能诞生风格平庸的APP设计。其次，对于以商业目标为根本的APP应用设计开发，设计风格的投入产出比并不高（游戏依然除外），设计模式的流行以及交互方式的单一使得保守的设计投入产出更高。最后在现今的消费领域，功能主义盛行，界面设计中理性居于主导地位，设计风格显示不是理性思考的首要考量目标。”

图标设计如何具有品牌性？这可能是设计师工作中经常会遇到的问题。但很多新人也许并不了解什么是品牌性，更不知道如何将品牌性融入到图标当中，不过没关系，看了这篇文章你就不会那么困惑了！

搜索框一种常见的交互控件，用于精准提取海量的信息中的准确内容。本文作者分享了设计一个搜索框的几个要点，希望大家从中可以有所收获。

你有没有遇到过一款APP让你用的很不舒服？你的拇指必须要伸得老远才能够得到菜单，或者页面里元素太多导致你经常误操作。这些都是因为交互设计师在设计的时候没有考虑拇指的感受，或者更学术化点说，没有考虑到“拇指法则”。

每个设计师在工作中都会纠结于是使用瀑布流还是分页列表去展示内容。到底如何选择，让我们先分析下两种交互方式的优缺点。

作为设计师有一个重要的技能：如何选择文字。这是因为文字是设计师和客户沟通的主要方式之一。那么排版就是决定你设计好坏的重要因素。GoldenRatio (1:1.618)
1.000x 1.618 = 1.618
1.618x 1.618 = 2.618
2.618x 1.618 = 4.236
4.236x 1.618 = 6.854
6.854x 1.618 = 11.089GoldenRatio (1:1.618)
…
11.089x 1.618 = 17.942
17.942x 1.618 = 29.03
29.030x 1.618 = 46.971
46.971x 1.618 = 75.999
75.999x 1.618 = 122.966MinorSecond 15:16
MajorSecond 8:9
MinorThird 5:6
Major Third 4:5
…PerfectFourth (3:4)
…
9.969x 1.333 = 13.288
13.288x 1.333 = 17.713
17.713x 1.333 = 23.612
23.612x 1.333 = 31.475
31.475x 1.333 = 41.956
41.956x 1.333 = 55.927FontSizes
Header1: 55px
Header2: 42px
Header3: 31px
Header4: 24px
Header5: 14px
Body:17px
Caption:14px

本文作者将对魅族最新研发的交互方式—mBack进行分析，从谈论手机操作系统方式与电脑的操作系统方式有着两个较为明显的差异，到分析mBack的缺点，值得一看。乔布斯说：伟大的产品都是只有一个按键的。在已经将交互优化到已经不能再删减时，如何有效的组织和隐藏就显得尤为重要。随意性用户可能使用过类似的产品或服务，有兴趣使用更为复杂的产品，但是不愿意接触全新的产品，除非新功能足够简单。主流用户是最大地群体。他们使用产品的目的是完成任务，他们永远也不会产生学会所有功能的想法。

译者按：对色彩的研究通常要么太过随意缺乏逻辑，要不太过理论化难以理解，这篇文章用非常浅显易懂的方式，讲述了一个专门研究数据可视化的团队探寻图标色彩搭配的历程，给出有力的论证，并得出很棒的结论，非常值得一读。对色盲色弱来不够友好*：原文中问题一的标题是“Low Accessibility”，通常用形容来产品对残障人士的友好度不够，这一点在欧美国家经常作为需要重视的产品硬指标（也是由于他们的色盲色弱发病率比亚洲高很多）。因为在中文里没有简短精准的说法，所以我在写的是“对色盲色弱不够友好”。
逻辑性较强的人*：原文的写法是“left-brained folks”，直译是左脑型的人。通常左脑型的人被认为逻辑严谨，右脑型的人被认为有艺术天赋。因为这种说法在中文里不是很通用，所以我写的是“逻辑性较强的人”。

本文介绍一些关于响应式图像的适配应用策略，回退原理，SVG的换色技巧，雪碧图的百分比定位计算公式等相关的一些小知识点，目的在于帮助一部分同学快速的理清图像应用思路，以及一些web图像的应用技巧。data-src
data-srcset
在加载到的时候更换为
src
srcset容器元素的尺寸：elW * elH
单张图片的尺寸：imgW * imgH
Sprites图片的尺寸：spritesW * spritesH
单张图片在Sprites图上的位置：imgPosX, imgPosY点的位置为 (x, y)
容器上的(x, y)点与容器左上角的距离为 cX, cY
Sprites图上的(x, y)点与本张图片左上角的距离为 sX, sYelW = imgW, elH = imgH
cX = sX, cY = sYcX = elW * x
sX = spritesW * x – imgPosX
elW * x = spritesW * x – imgPosXx = imgPosX / (spritesW – elW) = imgPosX / (spritesW – imgW)
y = imgPosY / (spritesH – elH) = imgPosY / (spritesH – imgH)