IT瘾视觉推荐

打动用户的 12 条 UI 设计法则

Sun, 10 Oct 2021 20:39:05 CST

前言：不少设计师看到好看的设计，第一时间是保存起来，或粗略浏览、或不再过问。但草草地浏览并不意味着我们真正理解这样设计的内涵，或者真正了解设计背后的技巧。要让用户动心，还需要了解设计心理学，从用户心理去引导用户行为。今天设计达人分享的这篇文章，分别从格式塔心理学、色彩心理、形状心理学角度进行案例分析，希望能给你一些帮助！

1. 连续性法则

连续性的元素排列形成组织关系，能够让阅读变得更加的连贯和清晰。目的是为了驱动用户完成我们想要的操作，如左滑可以看到更多卡片。通过连续性的方式进行引导告知，用户隐藏的部分。例如：导航分类、列表、轮播图、卡片中都有运用。提示了用户查看更多信息，在轮播图中经常会用到这个方法设计。

2. 相似性法则

我们的视觉感官会把相似的元素联系在一起，主观认为这些元素有同样的意图，所以在设计相同状态或相同功能元素时，我们需要保持视觉的统一性，让用户认为是一样的功能按钮或模块。看到导航栏下方的图标，因为形状大小一致，用户会认为他们的功能属于同一类型，并且可以点击。

3. 封闭性法则

在我们看到一个残缺的图形时，我们会脑补出它完整的样子。这种表现方式经常会用到 LOGO 的设计中，同样在界面设计中也会运用。例如图标、可视化图表等。

4. 邻近性法则

我们的眼睛会把相邻的内容组成一组，从而减少内容带来的阅读压力。这是设计中必不可少的排版方法，特别是复杂的信息流页面，经常会运用邻近性方法进行设计，保证信息传递更有条理性。在设计的时候，利用间距将元素组合在一起，这种方法通常会运用在内容信息、卡片、横幅中。

5. 对称性法则

对称的图形会让我们感觉稳定可靠。我在界面设计中为了提高稳定性会运用对称法则进行设计。但是过度使用对称会让人感觉单调和乏味，所有需要合理运用对称性法则，在适当时候出现。这个方法通常会运用在焦点图、产品展示、列表、导航中。

6. 组合性法则

为了提高页面中内容关系，会进行视觉性分组。采用卡片框的形式进行区分，从而让多种元素整合成块，让布局更加的规整。组合性法则经常会用到内容、列表的设计中。

7. 同属性法则

在同一个方向移动的元素，会感觉到它们是有联系的。如点击折叠菜单后，同时出现的多个元素，它们是有联系的。这样的规律可以有效建立元素的关系，从心理上认为它们的属性一致，这样的方式经常会出现在导航、下拉菜单、折叠菜单中。

8. 焦点性法则

通过加强对比度或对元素放大来凸显重点，从而吸引眼球。目的是为了让用户聚焦到我们想让他看到的信息上，从而引导用户关注重点信息。特别是在详情页中或提示性框中，会使用 “焦点法” 进行设计。

9. 生理性法则

越真实的感观越容易被接受，同样也能吸引注意力。就像文字不如图片好阅读，而图片不如视频更加直观一样。通过图像可以多感知传递信息，所以很多产品会用照片或视频来激发用户购买。为了让体验更有趣，还会通过震动或音效来强化感知。照片对比图能让用户直观的看到整容前后的效果，激发整容的欲望。

10. 隔离性法则

人的视线容易被不同元素或突出元素吸引，并且能很快的记住。这个法则很容易与焦点法则相混淆。不同的地方是，应用这个规则的元素往往是独立存在的，并没有额外的功能和信息。

11. 色彩心理学

颜色对我们的潜意识有特别的影响。不同性别、不同宗教、不同文化的人对色彩的看法也不同。例如红色代表的是错误、绿色代表了成功、蓝色代表着进行中、黄色代表活力同时隐含着危险感。

12. 形状心理学

形状是所有设计中无法忽略的关键因素。研究表明，每种形状有着它们的含义。和颜色一样，人的潜意识对不同的形状也有不同的反应。

方形和矩形

由于我们会看的物体墙壁、家具、图书都是方形和矩形的形状，潜意识会认为直角带来可靠和安全的感觉。但过度使用会造成 “死板” 的感觉，所以在活泼的产品调性中避免使用。给人的感受：力量、勇气、安全、可靠

三角形

三角形给人的感受是充满阳刚之气、活力和动感。三角形的的夹角还会吸引用户的视线，起到指引方向的左右。朝向上的三角会让人安心，而相反的倒三角会感觉到危险。给人的感受：权利、运动、稳定、危险。

圆形和椭圆

圆形会给人带来永恒的感觉，由于没有尖角，会看起来更加的温和柔软，好亲近。所以在社交产品或女性产品中经常使用圆形。同时看到圆形我们会联想到宇宙、太阳、地球元素，因此圆形会给人带来科技感。另外椭圆相对圆形更加有趣味性，比圆形更加有活力。给人的感受：神秘、亲近、宇宙

平行线

平行线和矩形一样给人感觉比较的稳定，相对矩形层次更加的丰富。平行线给人的感受是冷静，所以多用于硬件设计或工具类的产品中。给人的感受：冷静、稳重

垂直线

和平行线不同，垂直的线条会让人感觉高大。人心理面对高大的物体的时候都会感觉到侵略感。所以在制作友好的界面中我们很少用到。给人的感受：力量、侵略性、霸道。

对角线

对角线的设计会打破安静的设计，带给我们动感和活力。所以很多运动类的产品会使用到对角线的设计。给人的感受：活力、成长、动力。今天分享的 12 个心理学法则，它们本质都是一样的，就是通过设计引导帮助用户。通过法则我们可以影响用户的行为，管控好用户的使用路径，达到设计的目的。好的设计源自细节，也源自用户心理。注重用户的反馈，避免糟糕的体验，积极引导用户情绪，才能做出更好的产品。作者 | micu 设计原文网址：https://www.zcool.com.cn/article/ZMTI2OTUzMg==.html

(ノ◕‿◕)ノ*:･ﾟ✧ 查看最受欢迎 301 个设计网站 *:･ﾟ✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论

设计师要理解的10个心理学原理

Tue, 20 Apr 2021 17:18:05 CST

前言：高手的设计作品都是有理有据的，学习设计心理学，除了让作品有依据，在向客户提案时也会更有说服力。而作为设计师除了要掌握基本的设计规范外，还需要对每个层面的情感以及创造情感的心理学原理有更深入的了解。好的设计不仅能解决问题，还能为用户带来积极的情感，并通过三个层面产生情感：本能层：用户想要的感受；行为层：用户想要做什么；反思层：用户想要成为谁。

1.格式塔原则

相似原则 人的眼睛会把具有相似特征的元素当成一个整体，认为这些元素具有相同的作用。 ▲ 界面中的绿色图标具有相同的功能，方便用户快速认知和操作。因此在设计具有相同功能或内容的界面元素时，应该保持一致性。 应用位置：导航、链接、按钮、内容页。 连续原则 用户倾向于把连续排列的元素视为一个整体。这条原则与对称性和相似性密切相关。通过在序列上创建相似且重复的元素，引导用户的视线方向，使操作更加连贯和清晰。 ▲ 只露出一部分的卡片会向用户发出信号，表示滑动可以查看更多的书。 应用位置：菜单和子菜单、列表、产品页、轮播页。 封闭原则 当看到不完整的图像时，我们会依据已有的经验把不完全封闭的图像当成一个统一的整体，这是在平面或logo设计中常用到的原则。 ▲ 尽管页面右上方的饼图只显示了一部分，我们仍然能够轻松地识别出来。 应用位置：图标、加载、数据可视化。 邻近原则 人们会将彼此相邻的元素视为一组。在设计时要注意使用间距将元素组合在一起。使用较大的间距来分隔大的内容组，再使用较小的间距来分隔大内容组中的小内容组。 ▲ 页面上的每个卡片中都含有4组信息，很难快速识别具体的内容。通过调整间距，可以将这些信息清楚地分为2组。 应用位置：导航、卡片、横幅、列表页、分页。 对称原则 我们喜欢看到对称且平衡的事物。它是所设计领域中最常用和最安全的原则，有助于营造一种稳定感和秩序感。 ▲ 对称的布局不仅增强了用户的印象，还强调了中间的视频播放按钮。 应用位置：产品展示页、列表、导航以及任何内容丰富的页面。 共同区域原则 通过信息分组和内容组织，实现内容的组合，有助于提升内容的层次结构和可扫描性。 ▲ 卡片式UI有助于将信息分组并创建内容的层级深度。 应用位置：卡片、内容、服务、摘要。 共同命运原则 向同一方向移动的元素被认为比静止或向另一个方向上移动的元素更相关。这个原则有利于建立不同分组或状态之间的关系。 ▲ 页面右侧的3个图形方向相同，有利于展示信息并让用户了解它们的功能。 应用位置：导航/下拉、折叠条目、工具提示、产品滑块、滚动条。

2.焦点

看东西时，我们的视线往往会首先关注最突出的元素。理解这种行为有助于我们在设计中创建一个“锚点”，从而引导用户按照我们设计的场景查看内容。 ▲ 通过人物插画将用户的注意力引导到账单和人数等主要信息上。 应用位置：内容、登录页、产品页。

3.冯·雷斯托夫效应

又称隔离效应，相对于普通事件或物体，独特、有特色的事件或物体更容易被人记住。应用此原则的元素通常独立存在，不需要向用户导航额外的信息。 ▲ 中间的升级插画部分在整个页面上是独立存在的，并且吸引注意力是号召性用语或转化的关键。 应用位置：价格表、促销页、图标入口。

4.本能反应

根据现实中的用户行为创建视觉上引人入胜的体验。例如看幽默类视频的时候，如果在视频的高潮伴有笑声音效，我们也会更容易跟着笑起来。如果能让用户感觉良好和舒适，他们也会更喜欢我们的设计。 应用位置：产品图、插图、摄影。

5.色彩心理学

许多研究表明，颜色对我们的潜意识有特殊的影响。性别、宗教和文化对颜色的理解也有所不同。 ▲ 关于颜色的运用，这张色彩心理学海报介绍了丰富的方法。同时也要记住最广泛使用的系统颜色：红色代表错误；绿色代表成功；蓝色代表进行中；黄色代表警告。

6.形状心理学

▲ 同颜色一样，人们的潜意识对不同的形状也有不同的反应： 圆形、椭圆形：传达积极的信息，通常与社区或关系有关； 正方形、三角形：传达强烈的信息，通常与强度和稳定性有关； 垂直线：表示强度或力量。 水平线：表示平静、相等或安静。

7.双重编码理论

这个理论解释了人类需要视觉和语言信息来尽快处理信息。为了最大限度地提高设计的有效性，不应该删除必要的说明性文字。 ▲ 大多数App的底部导航栏都利用图标与文字相结合的方式让用户快速知道功能。另一个好的设计案例：

8.并行设计

人眼倾向于看到平行因素比其他因素更相关。这一原理经常用来对同一页面中的两组不同内容进行分类。 ▲ 使用垂直排列的卡片代表相同的问题，水平排列的卡片代表不同的问题。

9.公共区域

这一原理类似于格式塔原则中的相似原则。公共区域通过使用线、形状或颜色划分的方式创建。 ▲ 如果页面需要用户不断滚动来查看内容，可以考虑使用颜色来更清楚地划分这些内容，而不仅仅是使用间距。

10.扫描模式

根据NNGroup、UXPin等设计团体的研究，最常用的两种扫描模式是“F型”和“Z型”： “F型”应用最为广泛，尤其是对于内容丰富的网站。 “Z型”用于那些文字信息少，最后需要强调用户点击类的网站。了解如何使用这些模式后，我们就可以有效地选择布局和安排元素来实现设计目标。最后第一印象是最令人难忘的，好的体验可以在用户与产品之间建立持久的联系。原文：blog.prototypr.io/10-psychological-rules-i-used-to-make-users-love-at-first-sight-55c71f99bfa 作者：Hoang Nguyen 译者：Clippp 来源：Clip设计夹 (ID:ClipppDesign)

(ノ◕‿◕)ノ*:･ﾟ✧ 查看最受欢迎 301 个设计网站 *:･ﾟ✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论

如何建立一份移动UI设计规范？

Tue, 05 Mar 2019 11:17:37 CST

作者：白鹭漫谈在多人团队里，通常不同的设计师负责不同的流程，如果没有UI设计规范，不同的设计师就会对相同的组件做出不同的方案。产生大量重复工作，效率比较低。而制作设计规范和UI KIT之后，则可以直接利用KIT里的组件快速搭建好页面，把设计师从基础工作中释放出来，大大提升设计效率。目录 一、为什么要建立规范

用户体验一致
塑造品牌感
利于多人协作
方便维护和更新，减少冗余内容

二、规范的适用范围

适用于处于成长期和成熟期的产品。
规范不是越全越好。适合就是最好。

三、如何建立规范

整理产品的组件和复用的内容
基础规范（栅格间距基础网格颜色字体）
组件规范（按钮、导航、弹框、缺省图、标签、列表、卡片等等）

一、为什么要建立设计规范？

1 利于多人协作，提高效率 2 增强一致性，塑造品牌感 制作和遵循设计规范，能够保证整个产品的交互效果和视觉风格、乃至文案的统一性，提升用户的体验。 3 减少冗余内容，方便维护和更新 同类内容使用一样的组件，能够降低输出的内容量，减少冗余的控件和代码。同时也便于维护，在迭代时进行统一的更新和应用。 4 利于工作交接 方便设计团队和其他团队交接，如果团队有人员变动，也方便后续入职的同事能够通过规范迅速熟悉产品，快速上手。

二、规范的适用范围

前面的文章我提到过，如果产品处于启动期的话，这个时候最重要的事情是圈到第一波用户，让自己活下去。在这个阶段产品会频繁的改版、验证，迭代非常快，整个团队可能都处于拼命加班的状态。在这种情况下做设计规范文档显然事倍功半，一个是浪费人力资源，另外就算做了，在频繁更新的背景下也很难去执行。因此 设计规范文档更适合于那些跨越0-1阶段的产品，这个时候产品已经用有了一定的用户，团队也会扩张。这个时候我们可以选择制作基础的设计规范，比如栅格、配色、字体、图标规范等等。对于成熟期的产品来说，大版本更新的周期是非常长的，这个阶段通常会制作更为详细的设计指南、设计原则、do & don’t、品牌书、图标手册等等。

三、如何建立设计规范

电商类的产品对于大家来说都是比较熟悉的，就算不从事这个方面，日常使用也会很频繁，所以此次案例我们以下面这个电商APP作为示范。做规范时通常会有这两种情况： 1、不打算进行大版本更新的产品 对于小版本迭代的产品来说，建立规范只需要在sketch里把所有设计稿进行归拢和分类。直接根据现有的稿子梳理出规范，再对不符合规范的文件进行调整即可。 2、新版本新规范 而对于需要做新版本并且建立新版本规范的产品来说，在做设计稿之前，我们就需要先统一一些基础的内容，比如颜色、字体、栅格等等，然后在设计过程中去制作KIT、对基础的规范进行补充。

四、基础规范

1 制定统一的栅格系统 因为现在都是一稿适配多端，所以首先需要确定设计的基准尺寸，是基于iphone8？还是iphone 8P？或者1080*1920等等……每个公司设计稿的基准都不一样，我们是以一倍图为基准进行设计的，所以我这里的基准尺寸就是375*667，单位为pt。栅格一种情况是制定网格系统，网格系统的话首先要制定最小的设计单位，比如淘宝的最小单位是3，掌阅的最小单位是4，airbnb的最小单位是6……定好最小设计单位之后，界面中所有间距采用最小单位的倍数。假定我们最小单位4的网格，排版时横向和纵向的间距都是4的倍数，比如8、12、24。第二种情况是可以直接建立横向栅格系统，常用的是12栅格，12栅格比较好的地方是能够同时被2、3、4整除，因此能够根据具体需求灵活的设计各种模块。当然如果产品比较轻量化，是不需要这么复杂的栅格的，可以根据需求设置6、4甚至2栅格等等。 2 色彩规范 色彩规范主要表明色彩的色值和使用范围，一般会从品牌色、辅助色、基础色、状态用色等等。如下图所示。如果产品常用到渐变的话，需要注明渐变的角度以及渐变色的色值。包括产品如果有夜间模式的话，要额外注明日间和夜间模式下各个颜色的对应色值。当然这里的夜间模式说的是真·夜间，而不是微博那种直接加一个黑色透明度蒙层的伪·夜间。额外提一句，重要内容和正文内容要保证文本的可识别度，WCAG指南中指出，文本和背景色的对比度需要达到3：1。大家可以通过 https://webaim.org/resources/contrastchecker/ 的颜色对比检查器来核对颜色。我这里的品牌色和强调色对比度为3：1和6.3：1，而辅助颜色（比如标签）的对比度则在2-3之间。 3 字体 字体规范最需要注意的是提取出各个场景下需要用的字体和字号。需要注意的是，要标注上应用场景方便其他人理解。不然其他成员也并不知道到底什么时候应用一级标题、什么时候用二级标题。 4 图标 通常来说图标分为两种，功能性图标和展示性图标。功能性图标是为了引导用户理解和操作，需要表现精确和简介，方便用户识别其含义。功能性图标常规状态下为无彩色。展示性图标通常为页面入口，会有更多形状、颜色、质感的表达，吸引用户的注意力和点击欲望，强调差异性，比如各种品类区的图标、徽章、等级图标等等。图标规范通常来说会先定一些基础尺寸，梳理好各个页面的图标尺寸，进行整合，最后确定好几个基础尺寸，比如我这里的基础尺寸是4个。功能层级一致的图标尺寸要一致。为了保证不同形状的图标在视觉上保持大小一致，会制作一个图标的基础制作说明。制作说明里会统一图标的圆角、描边的粗细；如果是涉及到展示性图标的话，还会有图标的视角选择、配色的选择、以及如何表现质感等等等等 5 默认图 电商APP的话有大量的产品图片，所以我们也把默认的占位图样式进行了统一。因为我们这里样式都是一致的，所以采用了统一的规范，如果有多种默认样式，或者有其他类型的占位图，需要分别进行说明。

五、页面组件

页面组件通常包括导航栏、工具栏、弹框、列表、卡片、空状态等等，按照原子设计理念来说，还可以把组件拆分为原子、分子等更小的基础设计组件，比如角标、标签、按钮、图像、优惠券、选择器、进度指示器等等页面组件除了梳理出规范之外，通常会整理成一整套UI KIT，保存为sketch文件日常拖拽使用，或者导入为Libraries直接调用。当然，也可以直接在KIT上备注出规范和注意事项，具体输出什么格式这个看团队的需求即可。因为组件部分是一个比较庞大的内容，需要根据具体产品 1按钮 按钮一般有悬浮按钮、填充按钮、线框按钮和文本按钮等类型。其中悬浮按钮具有最高的优先级，属于强引导型按钮。按钮通常会有三种状态，常规状态、点击状态和不可用状态。因此在规范中需要标明按钮在这三种状态下的样式，比如颜色、投影、圆角、文字大小等等除此以外，也可能会有加载状态，也就是在点击按钮后，如果有1S以上的数据延迟，通常会考虑触发按钮的加载状态。加载状态的按钮样式为按钮上显示进度指示器。 2 导航 对现有页面的导航进行收拢和分类，比如我这里分类为常规标题样式、标签样式、搜索框样式、无标题样式、字母导航…… 标题需要注意文字的极限值，ICON尺寸和位置的话要考虑最小可点击区域，我这里icon的尺寸设置为24pt，但是热区是44pt，所以要注意间距的设置，热区不能重叠。 3 标签 标签通常有多个使用场景，我们可以对标签进行分组，比如运营类标签、内容属性标签、筛选标签等等然后对每类的标签统一样式、文字内边距以及说明适用场景。 4 弹窗 弹窗是为了提示和通知用户而位于页面内容之上的一种控件。它是引导用户专注于某一项任务，用户可以通过操作来关闭弹框。弹框包含模态（对话框、操作菜单）和非模态（toast、 snake bar等）两种形式。模态弹窗需要定义蒙层的样式（颜色、透明度），以及弹框内的文字说明和按钮。我这里拿一个对话框的规范进行举例，这是一个无ICON的双按钮对话框，因此在这里我们需要说明标题、正文文本、按钮以及背景遮罩的信息，还有字号、行距、文字极限值、文字色、按钮的状态等等…… 除此之外，组件类的规范可以配上常用案例、don’t&do，会更方便团队人员理解，防止错误状况。 5 列表 列表是由多个等宽的行组成的、按照一定规律排列的连续条目。列表在一些资讯类产品里会有更多的组合形式。我这款产品里用到的列表主要是单行和双行列表，那么我们就整理出对应的列表类型和需要说明的事项。

六、结语

写这篇文的初衷，是因为从去年底我建立公众号，并且在站酷发表了一些文章，得到了很多人的认可。很多粉丝私信我各种问题，陆续有人问我设计规范怎么做、交互规范什么样之类的问题。但是公司内部的文件确实没有办法公开分享，所以我就想说，那不如专门写一篇文章详细教大家制作移动UI设计规范吧。这篇的基础部分我做的比较详细，组件部分写的有些概括，主要是因为组件部分不是通用的，要根据自己的稿子进行整理和归纳，归纳好之后做好标注和规范说明即可，这部分是一个罗列的内容，所以就不必展开了…… 当然还有很多内容没有展开说，比如在Sketch里把KIT制作成Libraries统一使用，但是我想作为一篇设计规范入门教程目前应该足够了，更多的内容我在后续开新文去补充吧。

下载规范文档

素材名称：UI设计规范PDF.zip 格式：PDF 下载链接: https://pan.baidu.com/s/13EGxD7GmDTxVl0Dnw7sXlg 提取码: bpjq

(ノ◕‿◕)ノ*:･ﾟ✧ 查看最受欢迎 301 个设计网站 *:･ﾟ✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论

那个让大多数手机有美颜功能的虹软，开始免费开放人脸识别技术了

Thu, 15 Nov 2018 20:42:50 CST

对于大多数人来说，虹软并不是一家知名度很高的厂商。手机发烧友们可能会有些印象，因为不少的手机厂商在开发布会的时候，会说自己手机拍照用的影像传感器用的索尼的最新款，而相应的软法则来自虹软。

其实可以说得更明白一点儿，现在大多数智能手机所采用的前置美颜算法，都是出自虹软，没有虹软，就没有社交网络上那么多的好看小姐姐。除了美颜算法之外，虹软还在输出 HDR 技术、人脸识别技术、暗光拍照技术、防抖技术、双摄方案、全景方案等等。

另一方面，计算机视觉可以算是人工智能皇冠上的明珠，趁着这股东风，在计算机视觉上研究颇久的虹软也不想仅仅局限于给智能手机提供技术和方案。实际上，这家成立了 24 年的科技企业，经历了数个技术周期，早先他们还给柯达提供过影像上的技术支持，到后面就是尼康这类的数码相机厂商，再后来就是诺基亚这样的功能机生产者，然后就是现在的三星华为小米蓝厂绿厂在用虹软算法了。

虽然说硬件厂商们还不知道在 PC 和手机之后，还有什么能够掀起产业浪潮的消费电子产品新形态出现。不过这个问题对于虹软来说不算什么问题，因为跟他们发生强联系的，其实是摄像头，而非具体的产品。

所以在今天，虹软宣布了升级旗下的视觉人工智能开放平台，基于该平台，虹软免费开放人脸识别、人脸属性分析等离线 SDK。也就是说，对于很多硬件厂商来说，他们不再需要自己费力去研发人脸识别，或者花钱进行采购相关技术了。

而且现今技术迭代的速度实在太快，不光是中小企业，甚至是一些大的企业都会在人脸识别技术的实际应用中遇到产品研发迭代成本高的问题，无法做到移动互联网产品那样多快好省。小企业就更惨了，人工智能算法市场非常新，价格不透明，一不小心采购成本就会溢出。

除了免费开放人脸识别、人脸属性分析等离线 SDK，方便无网络环境使用之外，虹软还新增了活体检测 SDK、人证比对 SDK、性能全面升级的人脸识别 2.0 SDK、人脸识别门禁基础应用套件等多个部分。

这里就可以看出端倪了，虹软的这个视觉人工智能开放平台其实更多的应用场景是智慧工地、智慧旅游、智慧办公、智慧小区、智慧校园、智慧楼宇等场景，利用人脸识别技术的便捷性，以逐步取代现有的部分门禁安防技术。

虹软之外，国内外也有像是旷视、商汤这样计算机视觉技术的人工智能厂商。不过面对竞争，虹软副总裁朱丽蓉表示，他们目前算是视觉人工智能领域盈利不错的公司，也很欢迎竞争。

在产业里耕耘了 24 年的虹软除了免费开放人脸识别技术之外，进一步做了两件事：首先是连接产业上下游，将模组厂商、芯片厂商、设备整机方案商进行资源整合，帮助中小创新企业获得精准高效的产业链支持。然后虹软还推出了「星火」计划，通过技术产品、产业链、营销、资金、服务与支持等资源，帮助行业中小企业。

刘学文

在命运的塑料大棚里，每棵被喷了过多农药的白菜心中，都曾经有一个成为无公害有机蔬菜的梦想。

邮箱新浪微博 1

#欢迎关注爱范儿官方微信公众号：爱范儿（微信号：ifanr），更多精彩内容第一时间为您奉上。

爱范儿 | 原文链接 · 查看评论 · 新浪微博

后台产品的容错性设计

Fri, 03 Mar 2017 13:20:19 CST

容错性是什么？

容错这个词严格来说应当是计算机领域的词汇，如果以比较标准化的描述来定义的话，容错指的是“当计算机由于种种原因在系统中出现了数据、文件损坏或丢失等等其他故障问题的时候，系统能够自动将这些损坏或丢失的文件和数据恢复到发生事故以前的状态，使系统能够连续正常运行的一种技术。”这个听着有点绕口，其实简单来说，就是当计算机故障发生或者存在的情况下，计算机系统依然可以正常工作的能力，这就是计算机的容错能力。容错性其实就是可用性之中细分的一个模块，是专门针对用户在使用产品的过程中如何避免出错以及一旦出错如何尽快有效的纠错的研究和设计。

容错包含产品防止错误的程度和帮助用户从错误中恢复。防止错误是通过页面的设计、重组或特别安排，防止用户出错。比出现错误信息提示更好的是更用心的设计防止这类问题发生。纠错设计就是当错误发生时，人们看到的界面，并且提出一个建设性的解决方案。就像对付不该发生的错误一样，容错性设计的关键在于“做好防御”。产品设计者们必须不断寻找可能造成用户困惑和不满的出错点。好的防御性设计决定用户体验的好坏。

为什么强调后台产品的容错性设计 ?

后台产品和前端产品存在很大的差异性。后台多为复杂型交互逻辑，有多分支功能页面多功能交互能力，后台产品更加注重的是业务逻辑的清晰和功能的实现，而前端产品对视觉设计和交互设计有更高的要求。一个完备的后台可能会包括多种类型或者不同权限的用户，在不熟悉业务情况下会产生已知未知错误或误操作等行为。很多后台功能复杂功能之间很多时候并非完全割裂互相交织的，粗暴的将功能堆积在一起自然不太合适，影响用户的操作体验。

容错性的设计分析：

1、操作前-提醒防错

1）详尽的说明文字且引导和提示，突出表现

主要是针对新用户，目的是为了正确引导用户学习使用。引导和提示要突出表现，从而引起用户关注，确保用户在操作前能注意到引导或提示信息。

输入框填写说明可以让用户很容易清晰的识别具体填写内容。

2）当结果不可逆的时候，询问用户让其知道操作的后果

在用户操作前即给出正确且有效地引导和提示，有助于减少错误发生的可能性。如对于比较重要的操作，需要通过二次确认减少错误的发生。

2、操作中-实时提示&实时反馈

1）给用户的操作进行提醒

在后台众多需要填写表单当中，当鼠标聚焦在某一个操作区域时如果没有明确的预提醒，则容易引起误操作。

2）对用户的信息输入进行视觉化呈现，并提供回馈

数据录入是后台交互设计中最为重要的元素之一。对用户输入的信息进行实时检验，并给用户传递回馈，在下面这个案例中，当用户输入自己的邮件信息之后，即被告知用户这个动作的含义，到底是输入正确还是输入错误。

拿1688评价功能来举例，输入评价内容时评价所允许字数会随着输入内容逐个减少，实时的联动表达状态并提供反馈，并且这个操作也提升了用户直接的操作感，然后让用户看到自己的操作结果。

3）适当限制用户的某些交互操作

可以对一些可能造成错误的操作入口设置障碍或直接禁止操作，以避免错误的发生。举个例子：填写完一个模块内容，展开另一模块的同时收起上一个模块。填写过程限制用户某些操作这样始终让用户聚焦在当前内容。

3、操作后-结果反馈&纠正引导

1）错误发生时，即使反馈错误并提供纠错帮助

反馈错误及时就能保证用户每个阶段的操作都能得到回馈，避免因为一个小的错误就要修改相关联的一系列内容的情况，提高成功完成任务的效率；反馈不仅要指出有错，还要指出错在哪里。错误反馈文案要清晰、准确，这样便于用户了解错误的原因，方便下一步的修改。

2）允许用户犯错，并使操作者能够撤销以前的指令

Phone手机的还原功能，可以在用户出错时将多种功能设置快速还原到原始状态。

用户选购完商品后完成下单，可以通过“关闭交易”取消该订单。

3）不仅要反馈出错更要给用户解答，给予用户适当指引和建议

在发布供应产品中完成发布信息的编辑添加，点击“商品发布”按钮，如果有错误发生会在发布导航中提醒用户并告知用户导致发布不成功的原因。再比如：检测发布商品质量时，会提示该offer的质量星级以及给用户优化的内容指引与建议等。

4）允许用户犯错，且帮助纠正错误

当用户操作出现错误时允许用户犯错，且帮助将错误的信息纠正同步给用户。拿1688搜索来举例：用户想搜索“连衣裙”这类商品，但输入时用户输入成“连衣”，系统允许用户输入错误并且帮助用户纠正为正确字段。

除了上面讲的设计点以外其他重要的设计方法

1、费茨定律

Fitts定律其实很容易理解的。显然，指点设备的当前位置和目标位置相距越远，我们就需要越多的时间来移动；而同时，目标的大小又会限制我们移动的速度，因为如果移动得太快，到达目标时就会停不住，因此我们不得不根据目标的大小提前减速，这就会减缓到达目标的速度, 延长到达目标的时间。目标越小，就需要越早减速，从而花费的时间就越多。通俗点讲：任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。

菲茨定律的启示： 1）、按钮等可点击对象需要合理的大小尺寸。 2）、屏幕的边和角很适合放置像菜单栏和按钮这样的元素，因为边角是巨大的目标，它们无限高或无限宽，你不可能用鼠标超过它们。即不管你移动了多远，鼠标最终会停在屏幕的边缘，并定位到按钮或菜单的上面。 3）、出现在用户正在操作的对象旁边的控制菜单（右键菜单）比下拉菜单或工具栏可以被打开得更快，因为不需要移动到屏幕的其他位置。

2、提供非模态的反馈，不打断任务流

模态是指界面中只有提醒弹框才具有可交互行为，其他一切都不可操作；非模态不会把提醒做成弹框，可能会处理成List Notification, Toast list等方式来提醒用户。

3、视觉情感化

心理学把情感定义为：“人对客观现实的一种特殊反映形式，是人对于客观事物是否符合人的需要而产生的态度的体验”。而设计的目标则是在用户接触和使用产品的过程中，激发用户的正向情感，比如愉快，信任，满足；避免用户产生负向情感，比如失望，挫折感，痛苦。正向的情感会使用户更乐于使用产品，遇到使用过程的一些小问题也更加包容。举个例子：网络问题导致加载数据失败404页面，通过友情提示动画的情感表达，这种情感化的语言也能舒缓出错时给人带来的失望，挫折感。

[MUX翻译] Apple TV 人机界面指南

Wed, 16 Sep 2015 22:43:05 CST

新Apple TV重新定义了起居室的体验，你能将非同凡响而身临其境的内容投放到大屏幕上，这是前所未有的体验。

1 概述

1.1 设计原则

无论你是在开发游戏、媒体流应用，还是家庭实用应用，在构想产品的时候请记住这些设计原则。

互联 Connected

Apple TV通过革命性的Siri遥控器为电视带来了触控体验。用户可以在房间的任何一个角落，通过流畅、直观的手势与内容进行交互。触控板的操作犹如人们熟悉的trackpad，全新的遥控器支持轻触、滑动和点按。请利用触控的优势，运用令人愉悦、引人入胜的方式，将用户和内容连接在一起。

明确 Clear

Apple TV给人自然、直观的感受，令你本能地知道该怎么做。你的应用应该增强这一体验。用布局网格、动作和透明度打造语境。为每个元素赋予空间感，让用户清楚它们在你的应用中的位置。Apple TV的导航采用焦点模型。用户使用遥控器在界面元素间移动，例如电影海报、应用或按钮，通过点按选中某个元素。导航中的当前项是选中态，如果一个元素被选中聚焦，即使远看也该一目了然。

沉浸 Immersive

精美、绵延无边框的艺术画面将用户吞没在丰富多彩的影音体验中。对单个内容的聚焦提升了这种体验，遥控器的触控版会让你觉得自己在直接触摸屏幕，与在iOS设备上操作无异。通过吸引人的内容、令人振奋的影像、以及精巧流畅的动画力求沉浸感。

1.2 应用 APP

tvOS为一系列本地运行的应用提供了开发框架，如吸引人的游戏、实用工具和其他Apple TV本地应用。如果你熟悉iOS应用设计，你就已经知道大部分你需要了解的东西了。大部分界面元素和开发框架在tvOS里也同样存在。然而，想创造一个可以遥控、在电视屏幕运转良好的出色影音体验确实需要一些重要而且独特的设计考量。

仔细思考用户交互。把你应用的体验设计得直观、简洁、流畅。在iOS里，用户看到的和触摸的是同一个设备。在Apple TV上，用户看着房间另一头的屏幕，同时触摸的是遥控器。寻找机会通过遥控器让用户感到和应用连接在一起，即使他们坐在一定距离之外。

考虑用户与屏幕的距离，让焦点醒目。你的应用将会是在距离电视10英尺外的沙发上也能被使用的。相应地去设计界面元素，让用户不会感到困惑。并且明确聚焦的事物以及明确在遥控器上操作带来的反馈。

创造共享体验。用户通常在公共环境中享受电视。考虑你的应用应该怎样吸引一组用户，以及每次打开应用的都是不同的用户。

应用开发相关信息，参阅 tvOS应用编程指南。

1.3 首页

Apple TV首页展现已安装的应用。用户浏览网格排列的一系列应用图标，选中一个并通过点击来启动应用。

在首页上，你的应用图标是讲述你应用的故事以及与用户建立情感连接的最好机会。你的应用图标应该建立好的第一印象，所以请设计一个独特、动人、便于记忆的图标吧。设计指导参阅 4.2 应用图标。

1.4 顶部展区 Top Shelf

顶部展区是首页上位于首行应用列表之上的内容展示区域，用户可以决定顶部展区展示哪些应用。当聚焦这些应用中的一个时，顶部展区展示于此应用相关的特定推荐内容。

顶部展区突出展现应用中最新、推荐或者有价值的内容，并且给用户提供直接跳转的独特机会。例如，当聚焦App Store时，横幅突出展现值得关注的新应用。当聚焦iTunes TV Shows时，用户可以看见一系列推荐节目。聚焦并且点击一个节目，就会直接跳转到应用内相关的节目详情页。聚焦到一个节目时，按下遥控器的播放／暂停键即刻开始回放该节目。

推荐内容的设计指南，参阅 4.3 顶部展区图片。

1.5 焦点和视差

在Apple TV上，导航过程中当前的界面元素，如某图标、图片、按钮或其他的界面元素，可视为处于聚焦态。当一个元素被聚焦，它会被缓缓的提到前景。在遥控器触控板上轻轻画圆，元素会相应地做出摇摆动作。与此同时，元素上出现照明光泽，制造表面反光的视觉效果。如果用户一段时间内没有操作，非聚焦中的内容转为暗淡而聚焦中的元素变的更大。这些共同作用的效果，与坐在沙发上的用户保持一种联系，并且提供了上下文和一种明确的感受，强调了什么在焦点。

视差效果是一种贯穿整个系统的精巧视觉效果，它传达了聚焦元素的纵深和动态。通过图片分层、透明度、缩放和动效，视差效果打造了活灵活现的、真实的3D感。为了支持视差效果，提供图像分层是应用图标的要求之一，也是首页顶部展区的动态内容可以支持的。我们提倡应用中任何可被聚焦的图片内容都使用分层图片。

更多关于焦点的信息，见 3.2 焦点和选择。在 4.5 图像分层中学习如何为视差设计图片。聚焦和视差实现指南，见 tvOS应用编程指南。

2 遥控器与交互

使用革命性的Siri遥控器，与屏幕内容创建一种独特、亲密的联系。

2.1 遥控器

遥控器为Apple TV最主要的操作设备，创造性地利用遥控器的触控板、加速计以及陀螺仪，为用户提供令人感叹的和直观的体验。用户在客厅使用遥控器时感觉像直接与电视交互一样。

2.2 手势

遥控器的触控板可以检测到多种直观的单指手势。利用手势可以与你的内容建立一种实感的联系。

滑动 Swipe

用户可以在选项间向上、下、左、右移动焦点。滑动手势的滚动通常带有惯性，即基于滑动的力度，滚动开始快，随后慢下来。通过这种方式，用户可以毫不费劲地在大量内容中移动。

点击 Click

点击能激活控件或选择一个选项。点击是一个强意图性的动作，也是触发行动的主要形式。“点击并长按”是用来触发特定情境下的动作。举个例子，点击并长按界面元素可以进入编辑状态。

轻触 Tap

轻触能在一系列的元素中逐个浏览。在基于UIKit的标准界面的应用中，轻触导航的不同区域能直接导航。举个例子，轻触触控板的顶部向上导航。一些应用会使用轻触手势来显示隐藏的控件。

为了避免在无意中触发动作，所以要区分点击和轻触。点击手势是一种强意图的交互行为，常适用于按下按钮，确认选择以及在游戏中发起一个动作。轻触手势适用于导航或者展示一些额外的信息。但需要注意的是用户在拿起遥控器、移动遥控或把遥控器交给他人时，他们的手指可能会自然地放在遥控器上。

避免使用标准手势执行非标准的行为，除非你的应用是一个需要手势的互动游戏 (active gameplay)。重新定义标准手势的含义会导致用户困扰和交互复杂性。

当且仅当必要时，你的应用能定义新手势。人们熟悉标准的手势，不喜欢被迫学习其他的方法去完成相同的事情。在游戏或者其他沉浸式应用里，定制手势也是体验中有趣味的部分。但在其他应用里，最好还是使用标准手势，这样用户就不需要额外的努力去发现或者记住它们。

适当时，不同位置的轻触手势能辅助导航和游戏。遥控器可以区分的触控板上下左右的轻触手势。如果要对不同位置的轻触做出响应，前提是你的应用和对应的情境需要该轻触动作，且这一行为是直观的、可发现的。

2.3 游戏手柄

在游戏里，游戏手柄可以提升可玩性以及增加沉浸感。游戏手柄也能对Apple TV的基于焦点的界面进行导航，省去切换输入设备的需要。

重要：游戏手柄是选购项，用户不一定有购买。但每台Apple TV一定会配置遥控器。如果你的应用可以支持游戏手柄，那么你必须让遥控器也能控制游戏控制。

确认游戏手柄的连接。你的游戏可能随时启动，甚至在没有游戏手柄连接的情况下。为了确保可靠的用户体验，应用启动时应该检查手柄是否就位，如手柄是必要的，可以友好地提示用户连接手柄，还需要告知用户游戏手柄比遥控器多提供的能力。

不要让用户在使用你的应用时切换操作设备。用遥控器和游戏手柄测试你的应用，以及确保它们能在菜单和必要的导航上能使用。考虑一下，在使用遥控器时，你还能使用什么交互。举个例子，在赛车游戏里，你可以让用户在遥控器横屏模式上进行旋转和操作。参阅 2.4 按钮了解按钮预期行为。

关于游戏手柄支持的相关信息，可以查看 tvOS应用编程指南中的 Working with Game Controllers。了解如何开发游戏，请查阅 GameplayKit Programming Guide。

2.4 按钮

遥控器上除了触控板外，还有些可点击的按钮，例如播放/暂停键也可以用于你的应用或者游戏上。当菜单按钮被按下时，使用游戏控制框架（Game Controller framework）的应用程序也能收到通知并采取适当行动。在你的应用或游戏的情境中，不管用户使用遥控器还是游戏手柄，按钮的行为应该一致且可预测的。

Siri遥控器的按键操作预期

按钮	应用里的预期行为	游戏里的预期行为
触控板（轻触 / 滑动）	导航改变焦点	视情景而异执行方向键的行为
触控板（点击）	激活控件或选项	执行主按键的行为
菜单键	返回到上一界面退出到Apple TV主屏	暂停 / 继续游戏返回到上一界面、退出到游戏主菜单、推出到Apple TV主屏
播放 / 暂停键	开始媒体播放暂停 / 继续播放媒体	执行辅助按键行为跳过介绍视频

游戏手柄的按键操作预期

按钮	应用里的预期行为	游戏里的预期行为
方向键	导航改变焦点	视情景而异
A	激活控件或选项	视情景而异执行主按键的行为执行“确认”行为
B	返回到上一界面退出到Apple TV主屏	视情景而异执行辅助按键的行为执行“否定”行为
X	开始媒体播放暂停 / 继续播放媒体	视情景而异
Y	无	视情景而异
菜单	返回到上一界面退出到Apple TV主屏	暂停 / 继续游戏返回到上一界面、退出到游戏主菜单、推出到Apple TV主屏
LS (Left Shoulder)	向左导航	视情景而异
RS (Right Shoulder)	向右导航	视情景而异
LT (Left Trigger)	向左导航	视情景而异
RT (Right Trigger)	向右导航	视情景而异
左摇杆	导航改变焦点	视情景而异
右腰杆	无	视情景而异

给用户返回到上一屏以及离开你的应用或者游戏的路径。用户预期按下遥控器或者游戏手柄上的菜单按钮时，可以回到上一屏或者Apple TV的首页。当在应用或者游戏首页时，按下菜单按钮应该始终回到Apple TV首页。在游戏过程中，按下菜单按钮应该可以显示或者隐藏游戏中的暂停菜单，里面也应该包括一个选项可以导航回到游戏的主菜单。

始终可以使用Siri遥控器上的播放/暂停按钮。无用的按钮感觉像坏了一样，所以应该始终为播放/暂停按钮提供合理的行为。举一个例子，让用户使用播放/播放键来开始游戏，跳过一页教程说明，或者直接开始播放媒体。在游戏过程中，如果不需要辅助操作，播放/暂停应执行主操作。在一个应用里，如果没有明显的可播放内容，播放/暂停的操作行为等同于点击，用来激活一个焦点选项（focused item）。

3 导航和焦点

运用这些设计准则能帮助你创造运行自然的应用，如同Apple TV身临其境体验的一部分。

3.1 导航

用户往往不会注意到一个应用的导航，除非它并不符合他们的预期。你的工作是建立既能支持应用的结构和目标，又不会吸引用户注意力的导航。导航应该是自然而熟悉的，它不应该主宰用户界面或让用户从内容中分心。

在Apple TV上，用户在堆叠的页面间移动，浏览内容。每一屏可能放置前往其他屏的入口，并且通过遥控器返回到前一屏或主菜单。一般情况下，使用标准的用户界面元素，如标签栏、表单视图（table views）、内容集视图（collection views）和分屏视图（split views），可以在不同的页面间切换。

设计一个能快速简单到达内容的信息结构。用户想用最少的轻触、滑动，迅速地访问到内容。简化你的信息结构，用最少屏数来组织它。

利用触控来达成流畅性。提供简单的，用最少手势便能在焦点元素中阻力最低地移动的方法。

考虑焦点。Apple TV的导航并不总能一步到位。由于电视采用基于焦点的选择模型，用户需要先通过遥控器，把焦点移动到目标界面元素后，才能与其交互。如果你的导航方案需要太多的手势才能实现目标，用户可能会感到沮丧。参阅 3.2 焦点和选择。

通过菜单按钮实现后退导航。让用户能通过遥控器上的菜单按钮返回，以创建简单和可预期的导航体验。在玩游戏时，点击菜单按钮应该回到游戏主界面或调起有返回至菜单主界面选项的游戏菜单。在应用或游戏的一级界面，点击菜单按钮会退出至Apple TV的主屏幕。

避免显示返回按钮。用户知道按菜单键能返回，所以不要在你的应用中浪费空间去显示一个额外的重复此功能的控件了。但当界面中只存在购买或删除的按钮时，可以考虑提供取消按钮，便于让用户能返回上一界面。

内容合集在一屏显示比优于在多屏显示。即使一屏的元素非常多，遥控器的手势也能帮助用户快速移动。如果你有个焦点元素的集合，可以考虑用一屏显示，以保持导航的简单。

使用标准的导航组件。如果你的应用用户界面使用UIKit实现，采用标准的导航控件，如页面控制器（page controls）、标签栏（tab bars）、分段控件（segmented controls）、表单视图（table views）、内容集视图（collection views）和分屏视图（split views），用户已经熟悉这些控件，他们将直观地知道如何使用你的应用。你可以在 6 界面元素了解这些导航组件。

支持内容垂直导航。左右滑动比上下滑动更自然，在选择或设计内容布局时，请考虑这一点。

3.2 焦点和选择

在iOS设备上，用户直接通过在触控板上轻触或滑动与用户界面交互。Apple TV没有触屏，用户在房间里，通过遥控器直接与屏幕中的元素交互。这一交互模式是基于焦点模型的。通过按下按钮或使用遥控器上的手势，用户可以在元素间变换焦点，停留于某一元素，点击到达内容或激活动作。焦点改变时，微妙的动画和视差效果营造的纵深感，能明确标识出此元素现正处于焦点。

使用标准界面元素，获得相应动效。如果你的应用使用UIKit和focus API实现用户界面，你的界面元素的焦点模式会带有相应的动效和视觉效果，这能使你的应用感觉更像一个平台原生应用，并帮助减少用户在界面移动时的阻力。当用户在你的应用使用Siri遥控器时，他们会发现焦点元素间的转换流畅而直观。

按用户预期方向移动焦点。在Apple TV中，几乎都是间接操作——手势在元素间移动焦点，系统滚动界面使焦点元素保持可见。如果你的应用使用间接操作，确认焦点与手势方向一致。如果用户在遥控上点按向右或滑动向右，焦点应该向右移动，即内容应该左移。如果用户点击向上或向上滑动，焦点也应该向上移。而全屏幕元素，如照片，应该采用直接操作，手势移动的实体而不是焦点。举例，向右滑应该从左向右移动相片。

聚焦元素显性化。用户在远处选择并操作屏幕上的元素，因此让他们时刻知道哪个元素正处于焦点中至关重要。通常而言，如果你使用UIKit中的界面元素，系统会自动做到这点。如果你想使用自行开发的焦点模型，请确保焦点元素突出。举例而言，一个图像为主的合集中，图像会有标题，你应该在焦点元素，而不是非焦点元素下显示其标题。

使用视差效果，让焦点元素对用户交互响应更迅速。在遥控器上轻柔地画圈，相应的焦点元素也会实时产生柔和的位移。这样的反馈能提高对内容连接的认知，并强调了正处于聚焦态的元素。这种视差效果内置于UIKit，使用分层图像的方式，赋予焦点元素活力感。使用视差能创造更身临其境的互动体验。要了解更多信息，请参阅 1.5 焦点和视差和 4.5 图像分层。

创建尺寸合适的焦点元素。间距恰当的、较大的元素比较小的元素更易浏览和选择。

界面元素的焦点和非焦点态都应设计得美观。在Apple TV上，处于焦点的元素通常会稍微放大。当你设计界面时，应该同时考虑元素的焦点态和非焦点态。为聚焦状态配置较大尺寸，以确保它们看起来始终清晰。你可以在 4 图标和图片中查看图片尺寸规范。

焦点的改变应是流畅的。一个元素转为聚焦状态时，它会发生颜色改变或伴有微妙的动画；当焦点再次发生变化时，记得让它自然地恢复至非焦点态，而不要让这个过渡显得不和谐。

不要显示光标。用户预期通过改变焦点导航，而不是尝试移动屏幕上一个小小的光标。使用焦点模型来提供行之有效的、一致的体验。

了解更多应用中的焦点运用，请参阅 tvOS应用编程指南。

4 图标和图片

应用图标和图片对创造沉浸式的用户体验至关重要，这样的体验吸引着用户并让他们充满兴趣。

4.1 图片尺寸

总是按照界面所需尺寸提供图片。运行时需要缩小的大尺寸图像需要花更长时间加载，并对渲染性能有负向影响。Apple TV上的所有图片按@1x分辨率提供。

4.2 应用图标

每个应用都需要一个漂亮并令人记忆深刻的图标，在App Store中吸引用户的注意，在Apple TV首页能跳出来抓人眼球。一瞥之间，图标是第一个向用户传达应用内容的机会。

提供单一的视觉焦点。为应用设计单一、中心的视觉焦点，能立刻抓住眼球并能清晰地表现应用。用户不应该需要仔细分析图标才能理解其代表的意思。

保持背景简洁。不要用太多背景元素塞满你的图标。给图标绘制一个简洁的背景，能够突出上面的图层，但并不过分压制它周围的应用图标。记住，你不必填满整个图标。

仅当必要或文字是LOGO一部分的时候，才使用文字。当图标被选中聚焦时，应用名会出现在图标的下面。不要包含非必须的文字来重复名字或者告诉用户如何使用你的应用，比如观看(Watch)或者玩(Play)之类的。如果你的设计包含文字，可以强调与应用实际功能相关的部分。

不包括截图。截图对应用图标来说太复杂，而且通常不能帮助传达应用内容。相反，还是花时间去设计个漂亮、迷人、突出的图标吧。

保持图标四角是直角。系统会自动用蒙板来生成圆角。

分层

重要：应用图标要求使用分层图片。具体参见 4.5 图像分层。

应用图标必须有2-5个图层来创造聚焦状态时的纵深感和生动感。

仔细考虑如何分离图层。如果你的图标包含一个LOGO，把它从背景层中分离出来。如果你的图标包含文本，把文本放在前景层，这样在视差效果下就不会被其他图层所遮盖。

图层样式

仔细考虑渐变和阴影。背景的渐变和花纹可能会与视差效果有冲突，因此使用时要谨慎。关于渐变，推荐使用上到下、浅到深的渐变，记得它们会影响整个图层。

应用图标中，阴影最好看起来是锐利、硬线条、融入背景层的着色，当图标静止时不可见。

利用不同程度的透明度来增强纵深感和活力度。创造性地使用透明度能够使你的图标脱颖而出。举个例子，Photos图标的核心分成多个半透明图层，为设计带来更多活力。

图标尺寸

重要：每个应用必须提供一个小尺寸和大尺寸图标。应用图标必须呈递两种尺寸，两者长宽比相同。

小尺寸图标——这个尺寸的图标在Apple TV主屏上使用。

实际尺寸：400px by 240px

安全区域尺寸：370px by 222px

非聚焦态尺寸：300px by 180px

聚焦态尺寸：370px by 222px

大尺寸图标——这个尺寸的图标在App Store使用。

尺寸：1280px by 768px

大尺寸图标应照搬小尺寸图标的设计。尽管大尺寸图标与小图标使用不同，它仍然是你的应用图标，应该在外观与小图标相匹配。

应用图标安全区域模板能够帮你把内容放在合适位置，参见参考资料。

4.3 顶部展区 (Top Shelf) 图片

当用户把你的应用放在Apple TV主屏的最上面一行时，顶部展区 (Top Shelf) 是增加可见度的好机会。应用被选中聚焦时，你能够展示迷人的图片，来鼓励用户使用应用去发掘更多。

重要：最低要求，每个应用至少提供单张顶部展区静态图——当应用在主屏最上面一行且被选中聚焦时使用。

让用户能直接跳到相关内容。顶部展区通往用户最关心的内容，帮助用户快速到达。用户能通过点击被选中的图片来打开应用并直达相关内容，也能使用遥控器上的播放键直接启动媒体播放或进入游戏。

展示引人注目的动态内容。你展示在顶部展区上的图片应该吸引用户、让他们渴望更多。尽管你也可以在顶部展区放静态图片，还是要考虑放置更有魅力的动态图片，比如最新的或者评价最高的内容。

提供视觉丰富的静态图像。当没提供动态图或动态图不可用时，顶部展区展现静态图。静态图不可被选中聚焦，所以利用这个机会展现品牌吧。

顶部展区静态图尺寸：1920px by 720px

个性化内容。用户熟悉他们放在Apple TV主屏最上面一行的应用，他们经常使用这些应用。考虑把体验个性化，在顶部展区展现有针对性的推荐项，比如让用户能够恢复视频播放、继续游戏。

不显示广告。当用户将你的应用放在主屏的顶行时，你已经成功地把自己推销给他们了。别再对他们进行广告轰炸，这样会把用户推开，怂恿他们把你的应用撤下来。可以在顶部展区展示可购买内容，但是要强调最新、令人激动的内容，千万不要展现价格。

你可以为顶部展区提供单一图层或多图层的图像。具体参见 4.5 图像分层。

动态内容布局 Dynamic Content Layouts

动态顶部图像可以作为一排可聚焦内容或者滚动横幅出现。布局样式为展现你的内容提供了一系列灵活的格式选择。不管使用什么样式，展示用户最为关心的内容，帮助他们快速获得所求。

分栏内容行 Sectioned Content Row

这一布局样式展现了一行带标签的内容。它通常用于高亮最近浏览内容、新的内容、或者收藏的内容。

行内内容可被聚焦，允许用户按自己想要的速度滚动。当一个内容被聚焦选中时，一个标签会出现，同时，在遥控器触控板上轻轻移动，会让图片活过来。如果需要的话，一个分栏内容行也可以被配置多个标签。

提供足够的内容,构成完整的一行。最低限度，在分栏内容行至少载入能撑满屏宽的内容。此外，为了平台一致性或展现额外信息，至少包含一个标签。

分栏内容行支持多种长宽比的图片，包括以下尺寸：

海报 (2:3)

实际尺寸：404px by 608px

安全区域尺寸：380px by 570px

非聚焦态尺寸：333px by 500px

聚焦态尺寸：380px by 570px

方图 (1:1)

实际尺寸：608px by 608px

安全区域尺寸：570px by 570px

非聚焦态尺寸：500px by 500px

聚焦态尺寸：570px by 570px

HDTV (16:9)

实际尺寸：908px by 512px

安全区域尺寸：852px by 479px

非聚焦态尺寸：782px by 440px

聚焦态尺寸：852px by 479px

注意，当多种图片尺寸混合时，可能会发生额外的缩放。如果你的顶部图区含有多种图片尺寸，图片会自动放大去匹配最高图片的高度。例如，当和海报、方图混合在一排中时， HDTV图片会放大到500px高。

滚动横幅区 Scrolling Inset Banner

这一布局样式展示一系列几乎整屏宽的大图。在限定的时间内，Apple TV自动从左到右滚动横幅直到其中某个被选中。滚动到最后一张图片后，序列回到开始。

当一个横幅被选中时，在遥控器触控板上轻轻画圈会触发系统聚焦效果：横幅动起来、打光、产生3D效果（如果横幅由多个图层构成的话）。在触控板上滚动，按次序进入下一个或者上一个横幅。使用这种设计展示丰富、引人注目的内容，比如受欢迎的新电影。

提供合理数量的内容确保滚动舒适。滚动横幅区中至少要有3张图片；超过8张的话很难手动导航到某张特定图片。

如果你需要文字，将它加入到你的图片中。这种布局样式在内容下面不显示标签，因此任何文本必须是图像自身的一部分。在分层图片中，应考虑把文字放在最顶层突出出来。

滚动横幅区支持以下尺寸的图片：

超宽比例

实际尺寸：1940px by 624px

安全区域尺寸：1740px by 620px

非聚焦态尺寸：1740px by 560px

聚焦态尺寸：1740px by 620px

4.4 游戏中心图片

如果你的应用是一款游戏，游戏中心会给你更多让用户沉浸在抢眼图像中的机会。

成就图标

每个成就都需要一张不透明的图标，来直观地表现用户在游戏中达成的成就。系统会自动把成就图标裁切成圆形，所以你需要确保核心内容在图片正中。成就图标是用来展示的，没法被选中。

可见尺寸：200px by 200px

实际尺寸：320px by 320px

控制面板 (Dashboard) 插图

这种可选图像出现在你游戏控制面板的顶部。透明度可能被用于让背景从图像中显示出来。控制面板插图不能被选中。

最大尺寸：923px by 150px

排行榜插图

你必须为游戏中的排行榜或排行榜集合提供1-3张单层或多层、长宽比为16：9的图像。插图的底层必须是不透明的。在运行时，深色渐变可能会从下往上覆盖图片，你可以在图片右下角放置文本。这些图像可被选中，在遥控器触控板上轻轻画圈会触发聚焦效果。

实际插图尺寸：659px by 371px

安全区域尺寸：618px by 348px

未聚焦尺寸：548px by 309px

聚焦尺寸：618px by 348px

如需在应用中实现对游戏中心的支持，参见游戏中心编程指南。

4.5 图像分层

图像分层是Apple TV用户体验中的精髓。结合视差效果一起，能够产生真实、有活力的体验，并且能随着用户与屏幕上内容的交互唤起实体联系感。

一张分层图片由2-5个不同图层叠加而成。通过分离图层和使用透明度来创造景深的感觉。当用户与图片互动时，靠前的图层升起并变大，同时靠后的图层进一步后退，产生3D效果。

重要：应用图标要求使用分层图片。应用中其他可被选中的图像，包括顶部图区图片，并非必需使用分层图片，但我们强烈建议使用。

使用标准的界面元素来显示分层图像。如果应用的用户界面使用UIKit框架和focus API，当分层图像被选中聚焦时，会自动被处理成带有视差效果的。

合理地区分前景、中景、背景元素。在前景层展现重要突出的元素，比如游戏中的角色、专辑封面或电影海报中的文字。中景层尤其适合展现次要内容和效果，比如阴影。背景层是不透明的幕布，能够衬出上面的图层、但又不抢风头。

通常，把文字放在前景层。把文字放在最上层以便清晰展现，除非你需要文字是模糊的。

背景层是不透明的。使用不同级别的透明度并让靠下层的内容透出来没问题，但背景层必须是不透明的，否则你会得到错误提示。不透明的背景会确保你的设计在视差效果下、投阴影时、在系统背景上使用时都看起来很好。

保持简单精致的分层。视差被设计成几乎注意不到的效果，过度的3D效果看上去不真实、不和谐。保持图像景深的简洁，让你的设计充满生命力和惊喜。

在核心内容周围预留安全区域。选中时和视差效果中，靠近边缘的图层内容会被裁切或在图像缩放移动时难以看清。为了确保核心内容总是可见的，不要把它摆放的太靠近边缘。安全区域的大小随图片尺寸、图层前后顺序和移动动作变化。前景层会比背景层裁切得更厉害。

总是预览你的分层图像。设计在Apple TV上看起来很棒的分层图像，你需要在设计过程中通过Xcode预览。重点关注缩放和裁切，如果需要的话调整图像直到重要的内容总在可视范围内。分层图像成稿后，你还需要在Apple TV上预览用户实际会见到的效果。

分层图像的大小

在确定分层图像合适的尺寸时，同时需要考虑选中态和非选中态。在视差效果中，背景图层可能会被少量裁切，所以把核心内容设计在安全区域以内，并在区域内适当留白，以确保你的设计在各种情况下都看起来很好。

推荐使用以下公式来计算分层图像的大小，这一算法根据图像非选中态的尺寸来计算。

选中态尺寸

实际尺寸

安全区域尺寸

长边：长边非选中态尺寸 + 70px

短边：基于长边等比例缩放

长边：长边选中态尺寸 x 106%

短边：基于长边等比例缩放

与选中态尺寸相同

创建分层图像

Apple TV使用CAR和LCR文件加载分层图像。

CAR文件

CAR是苹果定义的一种专有的资源目录运行时文件格式。你并不直接创建CAR文件，Xcode会在编译项目的LSR文件和图像栈时自动为你建立。

LSR图像。LSR是苹果定义的一种专有的分层文件格式。除了在应用当中使用，LSR文件还可以被导入iTunes Connect用作媒体图像，比如电影电视剧海报。Parallax Previewer工具和Parallax Exporter Photoshop插件能让你预览并以LSR格式导出分层图像。在参考资料可以下载这些工具。
图像栈。任何标准PNG文件都可以导入并作为图像栈中的独立图层。与所有分层图像一样，图像栈不超过5层。Xcode还可以把图像栈导出成LSR文件。

LCR文件

LCR是苹果定义的一种专有的运行时分层文件格式，并在内容服务器上使用。如果你的应用运行时需要从服务器获取分层图片，就必须要用LCR格式提供这些图片。LCR图像不应该嵌入在应用本地。

你并不直接创建LCR文件，而是使用Xcode中的layerutil命令行工具，通过LSR文件或Photoshop文件建立。

如果需要在Xcode应用项目中运用分层图像的指南，请查看 tvOS应用编程指南。

4.6 启动图像

启动图像在应用启动时展现，即时出现并很快被应用的首屏替代，让用户感觉应用响应速度很快。启动图像并不是艺术表达的窗口，它唯一的意图是增强这样的用户认知：你的应用启动很快，立即就可以使用。启动图像是静态图、不分层。

重要：每个应用必须提供启动图。

尺寸：1920px by 1080px

把启动图设计成与应用首屏几乎一样。如果启动图中含有不同的元素，当启动完成时，用户能够感知到从启动图切换到应用首屏的闪动。

在启动图中避免避免使用文字。因为启动图是静态图，所以任何文字展现不会经过本地适配。

淡化启动效果。用户可能会频繁切换应用，所以设计引导图时请不要意图引起用户对启动过程的关注。

别做广告。启动图并不是做品牌宣传的机会。不要设计得像闪屏或“关于”窗口，也不要使用LOGO或其他品牌元素，除非它们本来就是应用首屏的一部分。

5 视觉设计

Apple TV充满了一些设计独到并且兼顾体验的应用。以下这些原则可以帮助你设计出可以向用户传达品牌理念的应用。

5.1 动效

Apple TV通过UIKit的方式，内置了很多适用于获得焦点、选择、和转场的动画，你可以在自己的应用中利用他们。这些微妙的动画为用户和屏幕内容建立了视觉感受上的联系。内置的动画效果与有品位的自定义动画的结合使用，可以增强内容的沉浸式体验。

避免使用无意义的动画。屏幕上的动画应该只是用于响应用户的操作。非用户行为触发的动画会造成体验的中断和注意力的分散，不要仅仅是为了使用动画而使用动画。

避免过分夸张的动画。多余的跳动或弹簧效果也许让动画在电脑频幕上看起来非常棒，但是呈现在更大的屏幕上的时候，会是非常让人恼火的。考虑下用优雅温和的动画来替代吧。请务必经常测试你的设计，以确保在电视上看起来也棒棒哒。

追求真实可信的动画。Apple TV的设计理念是轻量化，关键的界面组件都在体现轻薄的质感。这些轻量化的组件动起来不应该表现的像有质量似的，比如可以反弹到某个地方或者是从某个地方冒出来。虽然用户乐于接受艺术化的处理，但不合理的或是违背物理定律的运动效果，会让人感到迷惑。

5.2 品牌传达

成功的品牌传达不仅是将品牌元素添加到应用中这么简单。成功的应用需要通过明智的选择字体、色彩、配图，来传达品牌独一无二的理念。在应用中应当适度的向用户提供品牌内容，但不要过量。

优雅并潜移默化的传达品牌。用户使用应用是有目标的，为了得到讯息或是处理事务，而不是为了看广告。在应用的设计中向用户柔和的提示品牌信息，才能达到最好的使用体验。比如，在应用的界面中使用和应用图标一样的的色彩，就是呈现品牌内容的一种好方法。

内容为先，而不是品牌。一条一直存在的顶部栏，除了用来展示品牌什么也做不了，而且还会限制内容的空间。内容为先（的设计方式）则是用一种弱化干扰的方式来呈现品牌。此外还可以考虑去自定义色彩、字体、或者巧妙定义背景。

抵住在应用中到处展现品牌标志的诱惑。除非品牌标志的呈现对使用情景很必要，否则请避免在应用中频繁出现。

5.3 色彩

Apple TV的平台采用轻量简约的设计风格。色彩应当用于让用户更沉浸式的体验，引导用户关注内容，而不是界面本身。当面临决定选用哪种色彩和在哪里使用色彩时，请考虑它是否可以起到增强内容的作用。色彩同样有助于传达品牌，通常，可以使用应用标志的填充色。

在真实的电视上预览色彩。用户在计算机上和电视上看到的色彩并不总是一样的。为了获得最佳的效果，请使用sRGB的色彩格式，并且需要在真实电视上经常测试，可以通过这样的方式熟悉如何选择色彩以及将色彩转投到大屏幕上。如果条件允许，请在多台电视上预览你的应用，因为不同的电视型号可能导致很明显的色彩差异。

柔和的色彩更优。如果你的应用使用自定义色彩模式，请避免使用高饱和度色彩。这些色彩在电视的大屏幕上看上去会非常炫目和喧宾夺主，如果用户调整了他们的显示设置，则更甚。

请考虑色盲以及文化差异对色彩认知的影响。用户看待色彩的方式是不同的。比如有些色盲的人很难区分红色和绿色。所以请避免仅使用红绿色彩差异来区分状态或数值。一些图片编辑工具软件有提供可以验证色盲人群是否可以识别（当前的色彩）的功能。

不仅仅通过色彩来告知焦点状态。在Apple TV上，当元素获得焦点时，微妙的缩放以及响应式的动画是表示可交互的主要手段。

在不同的显示级别上预览色彩。电视的色彩效果取决于不同的生产商，亮度以及显示设置。如果某些设置会导致应用中的内容会混在一起或者变得看不清楚，请考虑重新选择色彩。

5.4 内容

Apple TV提供了一种可以在客厅中和各个年龄段的家人共享的家庭影院式体验。整个平台的页面和内容非常的丰富、美观、简单、可参与，相比科技感它更强调那种人和人联系起来的感觉。

尊重家长的控制。请记住一些家庭会使用家长模式来控制色情和限制级的内容。你的应用应当在适当的时候遵循这些限制。对于实施指南，请参阅IOS应用指南的限制条款相关内容。

5.5 布局

电视有很多不同的尺寸。Apple TV上的应用和在IOS上一样不会自动适应屏幕的大小。相反的，应用在每一个显示器上都会呈现完全一样的界面。设计的时候要格外注意，这样应用才能够在各种尺寸的屏幕上都呈现非常赞的布局。

优化大屏显示效果。

将你的应用的界面分辨率设置为1920 x 1080 (1080p)像素，这意味着16:9的界面宽高比。所有得比例都应该是@1x 分辨率的。

保持主要内容远离屏幕的边缘。

留意距离界面顶部和底部60像素，以及距离侧边90像素的区域。在这个接近边缘的区域内很难看清楚内容。在一些旧的电视中，为了适应界面尺寸也会裁掉边缘的内容。

有焦点状态的元素之间注意保留适当的间距。

如果你使用UIKit或者focus API，元素在获得焦点的时候尺寸会增大。请注意元素在获得焦点时候的视觉样式，确保它们不会无意中遮盖了重要信息。

通过显示一部分当前屏外的内容来暗示隐藏了更多的内容。

呈现大量内容时，会遇到单独一屏不能承载全部内容的情况，可以通过展示一部分当前屏以外的内容来暗示还有更多的内容

构建媒体为主的应用时，使用布局模板。

如果你的应用布局需要少量的定制并且内容呈现要精美。请考虑使用预设的布局模板。详见布局模板。

网格

在Apple TV上，网格有助于更好地呈现内容。这些内容不仅在远距离很容易浏览，还可以使用遥控器快捷地导航，呈现效果非常理想。

以下的网格布局和界面宽度提供了最佳视觉体验。请确保元素在非焦点状态保持适当间距，以防止他们在获得焦点的时候内容重叠。

3栏网格

内容宽度：548像素

水平间距：48像素

垂直间距：100像素

5栏网格

内容宽度：308像素

水平间距：50像素

垂直间距：100像素

6栏网格

内容宽度：250像素

水平间距：48像素

垂直间距：100像素

9栏网格

内容宽度：148像素

水平间距：51像素

垂直间距：100像素

如果你使用UIKit提供的内容流的集合样式，网格栏数会根据内容的宽度和间距自动确定。详细的内容请参见 UICollectionViewFlowLayout Class Reference。

考虑屏幕的安全区域。牢记将内容左右缩进90像素，上下缩进60像素。可以通过在缩进造成的区域中，用溢出的方式展示未在当前屏出现的内容。

为标题行留出额外的垂直间距。如果一行内容有标题，请确定非焦点状态的上一行底部和当前标题行的中间有适当间距。然后，确定该行非焦点状态下标题底部和内容顶部的有适当距离。

请使用一致的间距。不一致的间距会让网格看起来不像网格。

余光的内容保持左右对称。为了可见内容更直观的获得焦点，请保持屏幕安全区域外的溢出内容在各个边缘都保持相同的宽度。

布局模板

Apple TV提供了样式美观、布局一致、并且凸显内容的模板。这些模板是基于JavaScript和Apple TV的编程语言(TVML)开发的。当应用启用时，它们会动态加载内容。这些模板可以灵活创建丰富的内容，并且这些内容可以很好地在电视屏幕上呈现，非常适合流媒体。

有品位的自定义模板。布局模板的可定制程度很高，你可以控制背景、文字、色彩、尺寸、布局甚至更多。在设计应用的时候，请无论何时都遵从于内容，避免出现分散注意的、跳跃的或突兀的定制内容。

在使用之前了解模板的使用意图。如果你的定制化使得基本模板无法识别，请考虑换个模板或者使用完全自定义的界面。

更多应用中模板整合方面的内容详见 Apple TV Markup Language Reference。

提醒模板 Alert Template

提醒模板用于在屏幕上呈现相关信息并询问是否执行操作，比如确定购买或删除等负向操作。

另请参阅 6 界面元素中的 6.9 提醒。

目录模板 Catalog Template

目录模板用于呈现内容相关的组内容，比如电影或电视节目的流派的分组。浏览左边的分组列表，聚焦于其中一项的时候右侧可以看到对应的内容。

专辑模板 Compilation Template

专辑模板用于呈现元素包含的内容，比如专辑中的歌曲或者播放列表的轨迹。它最常用于显示音频相关的内容。

描述性提示模板 Descriptive Alert Template

描述性提示模板用于显示大段的长内容，可能要求用户同意某一项操作，比如同意条款或者许可协议。

保持简短，避免滚动。远距离在屏幕上阅读大量文字一点都不好玩，对眼睛简直是折磨。所以请认真斟酌应用需要呈现的文字内容。

显示，而不是讲述。如果可能，避免描述提示内容，可以考虑用更容易理解的方式来展现相同的信息，比如用图片。

按键要仔细摆放。当文字内容可滚动展示时候，请横向并排摆放按键。这样一来，可以通过上下滚动来阅读文字，通过左右滚动来切换按钮的焦点状态。

另请参阅 6 界面元素中的 6.9 提醒。

表单模板 Form Template

表单模板用于显示一个或者多个输入框比如名字和邮件地址，包括键盘。

另请参见 6 界面元素中的 6.3 文本和搜索。

列表模板 List Template

列表模板用于以列表的形式在屏幕右方呈现电影或电视的节目列表。当聚焦与一项内容时，左边会呈现其对应的内容，比如它的图片或者描述。

加载模板 Loading Template

当内容在服务器中检索的时候，会出现加载模板，它会时时显示一个进度显示器和一些文字描述。它让用户知道有一些行为正在进行，应用看上去并没有终止。

保持加载文案的简练和准确。如果加载很快，用户也许来不及在文案消失前读完很长的内容，这会让他们以为遗漏了一些信息。

另请参阅 6 界面元素的 6.7 进度指示器。

主菜单模板 Main Menu Template

主菜单模板会展示一个带底部菜单的全屏图像。它通常出现在电影的首页，有一个可以播放电影和访问特定章节或其它功能的菜单。

菜单栏模板 Menu Bar Template

菜单栏模板是为了一级页面而设计，作为内容的入门页。它包含一个贯穿顶部的菜单。当一个元素获得焦点时，它相关的内容会在下方呈现。

保持菜单栏的整洁。每增加一个元素都会导致更多的选择，并且还增加了应用的复杂度。

将菜单元素保持在屏幕上。当菜单栏获得焦点的时候，它所有的元素都应当可见。一般情况下，短标签应当限制在7个以内，这样能避免由于内容拥挤导致的元素超出当前屏。

另请参见 6 界面元素的 6.1 标签栏。

展览式模板 Parade Template

展览式模板通过将当前焦点状态下的组内容，通过旋转的方式进行预览。组内容列表会呈现在右边。聚焦与其中的一项内容，左侧用旋转的方式呈现其内容。

产品模板 Product Template

产品模板用于电影、电视或其他产品的展示。它通常包括产品图片、背景和描述信息。在产品内容下方会提供产品的相关信息，用户可以通过向下滚动来获取更多信息，比如演员列表，打分和评论。

自定义背景时，请仔细考虑图片和文字信息的颜色。默认情况下，背景会呈现出一个产品图片的投影，来制造互补的视觉效果。如果你决定使用自定义背景，请确保他不会与其它内容造成冲突。

产品集合模板 Product Bundle Template

产品集合模板用于呈现系列电视节目，电影和其他产品。通常情况下它包括图片，背景和描述信息。内容下方提供了包内的全部产品，比如一季的电视剧。用户可以通过向下滚动的方式获取更多的信息，比如演员列表，打分和评论。

评分模板 Rating Template

评分模板用于让用户对特定元素进行评价，比如电影或一首歌。

搜索模板 Search Template

搜索模板用于让用户搜索应用中的内容和查看搜索结果。它包括搜索框，键盘和结果列表。

堆栈模板 Stack Template

堆栈模板用于成组的展示产品，比如不同流派的电影。每组产品都直接在前一组的下方展示。

5.6 质感纹理

在整个系统中，柔软细腻，半透明质感的窗口的呈现，是为了传达一种深度和层次感。这些设计同样也给人沉浸感，但并不引人注意，也不会造成内容的分心。这些质感纹理有多种色彩，适用在多种场景中，看上去非常棒。

考虑使用系统的质感。系统质感能带给你原生应用的感觉，当用户从其它应用切换到你的应用的时候，过渡会非常平滑。下面的质感样式可供选择：

超轻薄

UIBlurEffectStyleExtraLight

大部分全屏模式中会使用这种纹理，效果非常棒。如果你的应用采用透明窗口的背景，系统会默认自动呈现此样式。

轻薄

UIBlurEffectStyleLight

这种纹理适用于覆盖层，它会模糊屏幕上的部分内容。

使用更轻薄，半透明的质感来提升内容，让它有新鲜感。深色的质感会导致沉重的感觉，这样的质感使内容显得陈旧，与背景混为一体且看不到投影，从而降低了页面纵深感和活力。当你看不到投影的时候，很难区分哪个元素处于获得焦点的状态。

5.7 字体排版

San Francisco是Apple TV的系统字体。这个字体有两个变体：San Francisco Text 和 San Francisco Display，在大屏幕上易读性都很高。

在标签或其他界面元素中使用系统字体时，Apple TV会根据选择的磅值自动应用最合适的文本样式。它也会按需自动更改字体并遵循辅助设置。

尽可能减少应用中的文字数量。展示给用户，而不是通过文字来说明。阅读房间对面屏幕上的大量文字十分费劲也并不好玩。认真考虑你的应用实际需要展示的文本数量，尝试用更容易理解的方式来呈现信息，比如使用图片或动画。

在设计时选择合适的系统字体。最重要的是，文字在远处必须清晰易读。当设计应用时，39点或更小的字适合用San Francisco Text，40点或更大的字用San Francisco Display更好些。

尽量使用内置的文本样式。内置的文本样式允许你用不同的视觉效果来表达内容，同时保留最优易读性。这些样式使用系统字体并且允许你利用重要的排版功能，比如动态排版（为不同字号自动调整字距和行距）。主要内容使用正文样式，标签和次要内容可以使用注脚样式和说明样式。

使用自定义字体时，在远处需要清晰易读。Apple TV支持自定义字体，但在远处可能难以阅读，尤其当字体笔画过细时。所以，除非你有必须使用自定义字体的理由，比如为了品牌推广或创造沉浸式的游戏体验，否则还是坚持用系统字体吧。

使用自定义字体时，支持辅助特性。系统字体自动会对辅助特性作出反应，比如字体加粗。使用自定义字体的应用，应该检查是否启用了辅助特性并在特性发生变化时接收通知，实现与系统字体相同的行为。

请在参考资料下载San Francisco字体。

5.8 视频

Apple TV的视频播放器让用户能在应用内欣赏视频，而且它专为触屏设计。与Siri遥控器的无缝集成让用户能够流畅、直觉地使用手势来浏览多媒体。

用户可以使用遥控器做这些事：

快速翻看视频：拇指在触控板上滑动。
视频的快进和快退：点击触控板的左侧或右侧。
视频节点上快进和快退：点击唤起视频播放进度条，然后点击触控板的左侧或右侧。
连续快进或后退：点击并按住触控板的左侧或右侧。
展现额外信息：向下滑动，能够展现字幕、小节、音轨、扬声器输出选项。

使用系统视频播放器。内置的视频播放器能够提供很棒的视频播放体验。它的控件极简而低调，让媒体本身成为注意力的中心。除非你的应用确实需要一个自定义播放器，否则请使用系统视频播放器，会创造跨平台统一的多媒体浏览体验。

在视频上展现LOGO或非交互的浮层时，内容为先。一个小小的不引人注目的LOGO或倒计时可能适合放在视频上，避免使用与观看体验无关的又大又让人分心的浮层。用户期望在观看内容时不受打扰，他们会欣赏干净整洁的观看体验。

优雅地在视频顶部显示互动元素。一些视频中会展现可交互浮层，比如小测试、调研、进度签到等。为了体验更佳，暂停播放中的视屏，需要精确到仅有0.5秒的延迟，然后展现可交互浮层。提供清晰的关闭浮层的方式，一旦用户完成交互就恢复视频播放。

提供额外的增值信息。通过提供图片，标题，描述和其它有用的信息，来实现视频附加信息的定制化。一般来说，这些内容的高度应当限制在8行以内，以免影响到视频播放。

6 界面元素

界面元素是构成应用的基石。用界面元素来展示信息、促进与应用内容的互动。

6.1 标签栏 Tab Bars

对于Apple TV的多数应用而言，导航主要以屏幕顶部的标签栏形式呈现。内容区域位于标签栏之下，显示当前选中标签的内容。标签栏让用户知道当前处于应用哪个位置；同时提供一种便捷路径，让用户在不同页面和内容之间移动，或者触发操作行为，如搜索。

当遥控聚焦标签栏时，标签栏出现在屏幕顶部，高度是140px。标签栏默认半透明，可以看到标签栏覆盖区域下的内容。一般而言，标签栏总是位于屏幕顶部，移开聚焦的标签栏时，标签栏消失，屏幕展现完整内容。

使用标签栏，有逻辑的来组织应用内容。标签栏可以很好地扁平化信息层级，快速访问同级信息模块。一些特殊信息不够明确时，采用角标补充说明。与当前视图或模式相关联的新信息或重要信息，需要解释说明时，通常在某个选项上使用以下角标 – 一个包含白色数字或解释说明文字的红色椭圆角标。

对角标进行管理。一个页面不要试图展示大量的新信息或重要信息，这样会让用户无所适从。

对选项数量进行管理。每增加一个选项，既增加应用本身的复杂性、又增大用户选择认知困难。

当聚焦标签栏时，所有的选项都应该要在屏幕内。选项应该使用短标题，从而避免拥挤或者导致有选项超出屏幕显示范围。

保证所有选项都可访问。如果一个选项可见、可用，而其他选项不可见、不可用，那么应用界面状况将不可控。

保证所有选项位于屏幕上，且随时可用。当选项下没有内容展现时，给出相关说明。例如，iTunes的音乐选项下，当没有歌曲列表时，给出了如何下载音乐的引导说明。

标签栏适配应用风格。采用颜色提取，或调整透明度，来适配应用的配色方案和风格。

更多的实施细则，请查看 UITabBarController Class Reference 和 View Controller Programming Guide for iOS。

标签栏选项 Tab Bar Items

选项标题通常使用文字。一般而言，相比于易被曲解的图标，简明的书面文字更干净、更直接。

采用短的、有意义的名词或动词作为选项标题。标题清晰定义了当前选项内容类型。一般而言，标题应该是名词（如音乐、电影和流派），但某些情况下，动词可能更加合适（如播放和搜索）。

6.2 表单和内容集 Tables and Collections

Apple TV包含了一些关于组织和呈现内容集合的标准，帮助用户理解以及导航。

表单 Tables

单列表单以滚动形式来呈现数据，可以将它们划分成多个区域或组别。不同量级的信息，使用表单的形式来更清晰有效地展现。

一般来说，单列表单是一个很好的承载文字信息的载体，而且经常以导航形式出现在页面一边，同时页面另一边呈现相关联的内容。更多可查看分屏视图。

考虑单列表单宽度。窄的列表导致列表标题截断和重叠，让用户很难阅读和快速浏览。同样地，宽的列表也很难阅读和浏览，且占据了内容区域空间。

页面内容采用优先加载模式。不要等待全部内容读取完成后一起加载，而应先加载一部分。优先先加载文字部分，待图片数据读取完毕后，再加载图片内容。这种技术让用户尽可能快的获取有用信息，同时提升应用的用户感知反应。某些情况下，页面没有刷新时，显示旧数据可能是有意义的。

内容加载状态。如果一个列表内容加载时间较长，需要一个加载进度条或动态的指示图标来告知用户应用仍在加载中。

更多的实施细则，请查看 UITableViewController Class Reference。

单列表单 Table Celss

你可以采用标准的单列表单样式，定义表单中内容如何出现。

默认样式。单列表单的左侧为“可选图像+左对齐标题”。对于不需要补充信息的内容来讲，这是一个很好的选择。更多的实施细则，请查看 UITableViewCellStyleDefault。

小标题模式。内容左对齐，大标题在上，小标题在下。采用小标题模式可以很好分行。更多的实施细则，请查看 UITableViewCellStyleSubtitle。

补充说明1. 单列表单中，标题左对齐，小标题右对齐，且小标题采用更小的字号。更多的实施细则，请查看 UITableViewCellStyleValue1。

补充说明2. 单列表单中，标题右对齐，小标题左对齐，且小标题采用更小的字号。更多的实施细则，请查看 UITableViewCellStyleValue2。

标准的单列表单样式也允许存在图形元素，如复选标签或标记。当然，增加这些图形元素，会减少列表标题和小标题的显示空间。

保持标题文字简洁性，避免被截断。被截断的词句很难被理解。标准单列表单样式中，标题文字是被自动截断的。而由于文字截断产生问题的多少，取决于采用哪种单列表单样式和定义截断何时发生（给出最大文字字符数，超出截断）。

测试选中态。选中表单内某行内容时，该行内容放大高亮。同时选中态样式包含圆角，这直接影响到该行中图形样式。基于此，如需使用图形元素，可直接采用表单圆角样式，而不增加额外的圆角。

考虑是否增加表单编辑功能。在Apple TV 上进行删除和重新排序操作，是一个缓慢而乏味的过程。因此需要考虑是否值得提供此类功能。

为用户定制个性化表单。用标准单列表单样式，满足绝大多数用户和使用场景，但是你的内容可能需要满足更多操作。这种情况下，相比于调整标准样式，为用户特别需求定制表单是一个更好的选择。了解如何创建个性化表单，参考 Table View Programming Guide for iOS 中的 Customizing Cells。

更多的实施细则，请查看 UITableViewCell Class Reference。

内容集 Collections

内容集有序的管理一组内容，并在一个可自定义、高度可视化的页面中呈现。内容集不强制要求呈现线性格式，因此特别适合显示大小不同的内容。一般而言，内容集适合呈现图片相关内容。

当标准样式或网格布局足够满足需求时，避免进行全新设计。一个内容集应该提升用户体验，而非变成视觉焦点。

更容易的聚焦选项。在用户找到感兴趣的内容前，如果很难找到想找的内容选项，他将感到沮丧和丧失兴趣。给图片周围足够留白，以保持内容清晰聚焦，同时避免内容重叠。

考虑使用表单组织文字，代替文字堆叠。在电视屏幕上，滚动列表中的文字信息，通常更简单和更易理解。

如果应用内容丰富，需要一个标准的网格布局呈现内容集，请考虑使用模板。详见 Templates 和 Apple TV Markup Language Reference。更多实施细则，请查看 UICollectionViewController Class Reference。

分屏视图 Split Views

分屏视图决定相邻2个内容面板的呈现样式。每个内容面板都可包含多种元素，如列表、内容集、图像和自定义视图。分屏视图中，一级面板显示固定的、可聚焦的内容；二级面板显示与之相关联的信息。分屏视图经常伴随着可筛选内容使用，一级面板中显示可筛选类别列表，二级面板中展示选中类别的具体内容。

根据内容选择效果最好的分屏视图。默认情况下，分屏视图以1:3的比例分隔屏幕空间，一级面板占据屏幕的1/3，二级面板占据2/3。当然屏幕也可按照1:1的比例分隔。基于内容本身，选择适当的分隔比例，以确保面板看上去均衡。

高亮一级面板中选中项。二级面板中内容是可变的，总是对应一级面板中选中项。这有助于用户理解面板之间关系。

每个分屏视图显示单独标题。对于屏幕中多个标题，用户很难找出当前内容。相反，显示单独标题，提供了一个视图对应关系框架。

当二级视图显示了一个内容集合，考虑使用一个聚焦的标题。当二级视图包含了重要内容，考虑在一级视图上显示标题，这样就有更多的空间用来显示内容。

更多实施细则，请查看 UISplitViewController Class Reference。

6.3 文本和搜索 Text and Search

如果必要，你的应用可以申请基于文本信息来执行搜索、登录服务等等。需要留意的是，除非物理键盘连接，在Apple TV上的文本输入任务的体验可能较为乏味。

文本框 Text Field

输入区域是一个固定高度、带有圆角的单行文本框，在用户点击输入区域的时候可以自动调起一个键盘屏幕。通过使用输入框获取少量信息，例如电子邮件地址。

在应用中最小化文字输入。键入长段文本内容或是填写大量文字在Apple TV上是极为耗时的。减少输入并且考虑有效的收集展示信息，比如说带有按钮的形式。

文本框中的提示信息增强用户理解。当输入框内没有键入其他文字内容的时候，一个文本框可以展示占位文本 – 例如邮件地址或是密码。当占位提示文本内容足够清晰时，不要使用单独的标签来描述文本字段。

在条件允许的情况下，使用安全输入框。当你的应用需要获取一些敏感信息的时候，例如密码输入，尽量使用安全输入。

更多实施细节，请参见 UITextField Class Reference。

键盘 Keyboards

任何时候点击文本框都会自动弹起一个输入面板。屏幕风格由当时使用的输入设备决定。

线性面板。当用户使用Siri遥控器的触摸板时，线性的键盘会展现在屏幕上。这种风格优化了触控体验，使用户更快速更流畅的输入文字。

网格面板。当用户使用Siri遥控器以外的设备时，网格状的键盘会展现在屏幕上。内容布局会基于键盘类型自适应。

虽然你不能控制键盘屏幕风格，但是你可以指定键盘类型。

根据选择的内容，制定相应的输入面板类型。为特定类型的内容，Apple TV提供几种不同类型的键盘设计，使输入更加便利。相对应的键盘让输入过程更轻松，比如输入名字，邮箱地址或是数字。有关可用键盘类型的列表，请参阅 UITextInputTraits Protocol Reference的 UIKeyboardType。要了解你的应用内的键盘管理，请参考 Text Programming Guide for iOS的 Managing the Keyboard。

在适当的时候选择使用附属视图。键盘屏幕包含一个可选的附属视图。使用此区域提供有关您所收集的数据上下文和其他信息。例如，您可以添加您的应用程序标识和标签到附属视图，告知用户“请输入您的电子邮件地址登录到您的MyApp的帐户”。更多实施细节，请参阅 Text Programming Guide for iOS的 Custom Views for Data Input。

搜索 Search

搜索屏幕是一个专用键盘屏幕，用来执行搜索输入操作。在此屏幕上，搜索结果将以可定制视图形式，显示在键盘下呈现。

允许用户使用近期搜索记录。用户经常在Apple TV上搜索重复内容。在用户开始输入前，通过在键盘下方罗列出流行或近期搜索结果，减少重复输入。

简化搜索结果。不提供需要大量滚动查看的冗长搜索结果列表。使信息易于获取，例如，将搜索结果分为多列，或呈现最匹配的搜索结果信息集合。

考虑让用户手动过滤搜索结果。如果可以，在搜索结果区域设置一个筛选区，以帮助人们方便快捷的过滤搜索结果。

更多实施细节，请参见 UISearchController Class Reference。

6.4 按钮 Buttons

应用特定的启动按钮可以包含一个标题和图标。

一般情况下，使用标题名称或图标来传达按钮的语义。由于按钮空间有限，为了避免拥挤和视觉复杂性，尽量不合并文本和图标。

明确标签和破坏性操作。如果点击一个按钮操作，导致不可逆转的结果，如删除内容，请确保这个按钮的指示性是非常明确的。使用明确描述的标签，如“删除”或相应的图标。在执行破坏性操作之前显示一个警告要求确认，也是很好的做法。

不要使用后退按钮。用户习惯于通过点击遥控器上的菜单按键带他们返回上一级界面或回到主菜单。除非你的应用有正当的理由去使用额外的后退按钮，尽量不要在你的页面上加入返回按钮。

对于实施细节，参见 UIButton Class Reference。

按钮图标 Button Icons

使用简单、可识别图形作为按钮图标。在电视屏幕上，太多细节的图标很难解释。保持图标简洁更好的传达信息。有可能的话，使用通用图标帮助理解，例如放大镜图标代表执行搜索。

按钮文字 Button Text

如果合适的话，在图标下方显示描述性文本。一个图标通常足够表达含义。但如果附加的文字描述提供了有用的信息内容，则把它放在按钮下方。

使用动词或动词短语来描述一个按钮的操作。以操作行为为特定标题，表示交互性，并且明确了单击该按钮时会发生什么。

使用大写式标题。除了文章以外，大写按钮上的每一个字，并列连词，和四个字母以下的介词。

确保按钮文本简短，重点突出。过长的文字可能被截断，从而使其难以阅读。

6.5 导航栏 Navigation Bars

你可以在视窗的顶部增加一个导航栏，用来展示标题、导航按钮、以及其他交互元素。应用设置使用一个导航栏，导航栏的标题用来提供内容信息，让用户随时知道处于应用的哪个位置。

请注意透明度。导航栏默认就是透明的，所以所有在导航栏下面滚动的内容都是清晰可见的。确保导航栏里的交互元素不要与底下内容元素有所冲突。当内容滚动时，考虑把导航栏下的内容元素淡化，从视觉上将它们与导航栏上的元素区分开。

6.6 页面控制器 Page Controls

有些应用会把内容分散到多个页面上呈现，一个页面控制器可以清楚地告诉用户总共的页面数量，以及现在处于哪个页面。它的呈现方式就是有一连串小的空心的指示原点，可以从左边滑动到右边，同时呈现出页面数量及顺序。一个实心原点指示的是当前页面。视觉上来说，这些小点的间隔是相同的，如果点数太多的话，屏幕上会省略掉一部分。

页面控制器它本身是一个非交互的元素，只是作为信息呈现的功能使用。它并不真正的具有导航的作用－比如说，你不能点击一个小点去到一个特定的页面。相对应的，真正的页面之间的导航会使用其他的交互机制，比如说手势控制以及分离按钮的按压／点击。

请在完整的屏幕页面上使用页面控制器。当全屏页面的内容很多且是同级情况下，使用页面控制器。在页面间切换时，尽量避免使用额外的交互方式，保持用户注意力集中。

不要展示太多的页面。超过10个小点，用户很难让一眼就数过来；然后超过大约20页的话，用户查看起来就会非常耗时。如果你的应用需要展示超过20个同级页面时，请考虑使用不同的设计方式，比如网格，因为网格不需要按照既定顺序来导航。

更多的实施细则，请查看 UIPageControl Class Reference。

6.7 进度指示器 Progress Indicators

不要让用户坐在那死盯着一个静止的屏幕，等待应用加载内容或者呈现冗长的数据处理操作过程。利用动态的指示图标还有进度指示条来让用户知道应用正在加载中，同时告诉他们还要等多久。

动态的指示图标 Activity Indicators

一个动态的旋转指示图标用来表示比较难测量时间的任务的加载，比如说正在加载或者同步复杂的数据。当任务完成时，这个图标就会消失。

相比于动态指示图标，多使用进度指示条。如果任务是可以被计算测量时间的，请不要使用指示图标（就是那个旋转的小圈圈），请使用进度指示条，这样用户就能更好的评估正在发生什么，还需要等待多少时间。

保证指示图标是动态显示的。用户会自然而然地将静止的活动图标（也就是本应该活动的东西）当作是死机的迹象，所以让那个小圈圈一直转着可以让他们知道应用正在运作。

在用户等待加载的时候，可以给他们提供一些有用的信息。这些有用的信息可以是在动态指示图标上增加的文字信息。不要增加意思模糊的术语，比如说正在加载或者正在授权这样的字眼，因为它们并不会更好地帮助用户理解。

想看更多的细节信息，可以参考 UIActivityIndicatorView Class Reference。

进度指示条 Progress Bars

进度指示条是用来显示可测量任务的加载进度的，表现为一条从左到右填充的轨迹。

精准告知用户任务的加载进度。不要为了让应用看起来很忙，而显示不精准的进度信息。如果任务是可被测量时间的，使用进度指示条，否则使用动态指示图标。

进度指示条适用于可测量时间的任务。进度指示条有益于显示任务状态，尤其是它能告知用户完成当前任务，还需多长时间。

更多实施细则，请查看 UIProgressView Class Reference。

6.8 分段控件 Segmented Controls

分段控件是指一串线性排布的控件，每个控件都作为一个按钮来呈现不同的视图。分段控件包含两个或两个以上、统一比例的控件，单个控件包含了标题或图标。利用一个分段控件来提供功能联系非常紧密，但是又互不兼容的一些功能，比如说播放列表和唱片集。

不要把其他很容易被用户注意到的元素放在分段控件旁边。只要聚焦到这些控件上，就会被选中，所以要十分注意它与其他交互元素位置摆放，尤其是当这个分段控件与页面的其他交互元素是相关联的。如果其他容易被注意到的元素和分段控件太近，用户在切换不同控件时，可能会容易引起误操作。

考虑在屏幕上，将内容以控件形式分割成多个模块，帮助用户进行信息过滤。在分离模块环境下，用户操作导航定位和内容筛选时，会来得更加轻松。一个控件操作的难易程度，取决于该控件的放置位置。

控制好控件数量。超过7个控件就会使用户很难一眼分辨出来，而且在定位时也会变得非常费时。另外，尽量保证各个控件的大小与它所包含的内容匹配。因为所有的的控件是相同的宽度，如果一些控件里有内容，一些控件里没什么内容，这样看起来就不是很舒服。

避免把文本和图标混在一起。单独的控件可以包含文字标题或者图标，但是不要同时涵盖。最好避免在一些控件里使用文字标题，然后在其他控件里使用图标。否则，你的应用界面内容看起来就会非常多且琐碎。

如果要个性化定制控件的话，要更注重内容元素的排布，要保证内容排布看起来是合理的，尤其是居中的时候。

更多的实施细则，请查看 UISegmentedControl Class Reference。

控件图标 Segment Icons

利用简单、可识别的图形来来作为控件图标。在电视屏幕上，太多细节的图标很难解释。保持图标简洁更好的传达信息。有可能的话，使用通用图标帮助理解。

控件文本 Segment Text

使用短的，具有含义的名词作为控件标题。一个控件的标题清楚地传达出当控件被选中后，它所呈现的内容类型。一般来说，标题应该使用名词。

使用大写式标题。除了文章以外，大写按钮上的每一个字，并列连词，和四个字母以下的介词。

确保文本简短，重点突出。过长的文字可能被截断，从而使其难以阅读。

6.9 提醒 Alerts

与应用或设备所处的状态相关的重要信息，且需要用户反馈时，弹出全屏提醒弹窗。提醒弹窗包含一个标题、一个或多个按钮、以及可以附加文字说明。除了上述的内容元素，提醒弹窗的样式应该是静止的，且与系统统一。

尽量减少提醒弹窗的使用。提醒弹窗会阻断用户体验，除非在非常重要紧急的情况下使用，比如执行毁灭性操作（删除等）、购买、或者出现问题需要告知用户时。提醒弹窗的不时出现会帮助用户对于当前动作提高注意力，设计者要确保每一个提醒都提供非常重要的信息以及有用的选择。

更多的实行细则，请查看 UIAlertController Class Reference。

提醒标题和信息 Alert Title and Messages

提醒标题使用多词。单个词的标题，比如说“看”或者“租”，很少能够提供有用的信息。

使用一个描述性的提醒标题，就可以代替文字段描述。用户在屏幕上所读取到的文字内容越少越好。考虑使用问问题的方式或者使用两个短句子来作为你的提醒标题，以此来避免增加附加文字段信息。

如果你必须要提供附加文字段提醒信息，保持精简，使用完整的句子。理想话来讲，要确保信息足够短，只需要在1行或者2行内展示，避免滚动查看，使用大写和合适的标点符号。

提醒按钮 Alert Buttons

一般来说，使用含有两个按钮的提醒弹窗。提醒弹窗包含2个简单的选项。如果只有单个按钮，使得用户没有选择的余地；大于等于3个按钮就会增加操作的复杂性。提醒弹窗的按钮应该简洁明了，且标题具有逻辑性。按钮标题最好由1到2个描述结果的单词组成，以下是一些是在设计提醒弹窗按钮时的一些准则：

所有的按钮标题，应该大写且结尾没有标点符号
尽可能使用与提醒弹窗标题与附加文字信息相关的动词或者动词短语，比如说“查看全部”、“回复”、“忽略”
简单的接受操作使用ok。避免使用yes或no
按钮标题避免使用你、你的、我、我的这类人称代词，因为这些字眼看起来模棱两可，且有时候用户会认为带有侮辱性

提醒弹窗的取消标签要易操作。取消提醒弹窗的按钮标签，应该足够明显，比如使用取消或撤销的字眼。

如果提醒弹窗的某个按钮操作具有破坏性，其按钮样式应该具有高辨识度。一个不可逆操作的提醒按钮，比如删除，在样式设计上强化，使其与系统相一致。更多的实行细则，请查看 UIAlertActionStyleDestructive。

允许使用遥控器来取消提醒弹窗。按下遥控器上的菜单按钮可以产生与单击取消按钮一样的效果，也就是说，你按下遥控器上的菜单按钮也可以退出提醒。如果你的提醒弹窗没有一个取消按钮，可以考虑给你的菜单按钮添加退出提醒弹窗的代码。

原文地址：https://developer.apple.com/tvos/human-interface-guidelines/

译文仅作学习用途，如有其它用途请联系原作者。

译文转载请注明：本文来自MUX

Keep calm and be awesome.

网页大图片应用技巧浅析

Wed, 11 Mar 2015 18:17:39 CST

用图像创造场景感，增强用户的真实体验，近些年来，图片作为背景填充整个屏幕的设计越来越广泛，曾经只有时尚潮流网站或者摄影类站点才会特别依赖富有冲击力的图像，但是现在几乎任何类型的网站都有可能采用这种大图片作为背景，特别是企业品牌宣传、产品介绍等等。

在设计网页过程中，需要用到大量的图片，而且找到的图片大多风格迥异、无品牌感，那么如何找到合适而又能正确地应用图片呢？

如何正确应用图片

整理了一些经验总结供大家参考：

1 .提炼关键词寻找图片

首先需要提炼产品特性关键词，通过关键词的形式寻找合适的图片。

上图是google云盘官网banner背景为一张在飞机向外看的图片，不难发现用这种比拟手法来表现云盘的口号“随时随地使用”，在任何时候、任何地点都可以使用文件。换位思考，假如我们来设计google云盘官网，首先提炼出关键词：随时随地、自动同步、超大空间等等，用最能突出特点和有代表性的关键词来寻找合适的图片。

上图是IBM旗下的MobileFirst产品，其主要为用户移动应用从创建到维护推出的一体化解决方案为广大用户提供更便利服务，那么根据项目提炼出关键词：手机、用户，该网站用了一张人拿着手机进行使用的图片，目的是为了突出项目的业务特点。

上图分别为苹果官网、研究无线电技术企业——高通的网站中运用的图片同样也是通过产品特点提炼的关键词来完成图片的选用。

2. 图片品牌化

什么是图片品牌化？通过关键词寻找到的图片进行深度加工处理，使之在项目中运用到的图片都是一整套的、风格统一的，比如可以在图片的色调、色彩饱和度与特色风格上做调整等等，下面举几个案例。

Google Drive官网摘取出来的图片，这些图片不难发现无论在色调、色彩饱和度上是一致的，特点是低饱和度、颜色深沉和图片噪点，颜色上新颖有特色、风格上具有明显的品牌统一性。

上图为SAP公司官网的系列图片，作为全球最大的B2B企业为各行各业、不同规模的其他企业提供解决方案，正如它运用不同行业场景的图片一样：色彩丰富、但色调又不过于鲜艳，它们所有用到的图片都有这些特点。

美国高通网站的品牌宣传图片让人印象深刻，品牌特点独树一炽，颜色上运用冷暖搭配，加以渐变效果巧妙地叠加于图片上，虽然颜色种类不多，但能在风格、品牌上具有强烈的统一性，让人对品牌辨识度有更加深刻的记忆性。

项目实践

去年做了几个腾讯云的项目改版，尝试新的风格探索，排版上采用了大图片为背景。设计过程中考虑到产品的长远发展，通过研究后发现图片统一风格在产品品牌推广上有着非常重要的作用，通过几经打磨快速整理了实现方案。腾讯云线上新版本的页面图片已经实现了统一风格。

总结

大图片作为背景的设计风格，这种设计方式虽然非常强有力地抓住用户的注意力，能准确应用图片而达到更大的体验效果是非常重要的，如果去掌握，了解项目背景，利用关键词的方式寻找更合适的图片，此外还需关注用户对产品的印象程度，那么图片的品牌化就显得格外重要，把产品所用的图片设计为一整套统一的风格出来的效果是不可估量的。

以场景为中心的产品设计：突破你的大脑然后像用户一样思考

Mon, 12 Jan 2015 00:08:29 CST

当第一次开始设计交互式产品时，我是非常挣扎的。小的项目都还好，但是当交互变得复杂时，我注意到工具、团队的交流甚至是我自己的思考都开始失效了。我看到今天许多创业公司面临着同样的问题。所以我想（和大家）分享一些方法，利用这些方法我已经在过去的几年中改变了处理复杂大型产品的设计过程。

过去常常进行页面设计

回顾大学，我们主要设计海报，图书封面，（网站）主页和很多其它页面。我们使用 Adobe Illustrator 和 Photoshop 软件，它们在设计页面时表现都非常棒。同行的批评是非常有用的，因为批评本身就非常类似于使用产品：一个普通的观众走到他们之前没有见过的事物面前，然后看上几分钟。在一个设计工作室看到一张海报就好像走在大街上看到这张同样的海报。

以页面为中心的设计不是服务于 APP 的

一旦你将要处理一个拥有十多个页面和数百个状态的APP时，你不能像（设计）一张海报一样在大脑中 Hold 住整个产品。我注意到我们团队在围绕着单个页面发邮件，讨论着单个页面，给所有页面命名时仅仅只是记录（keep track）。但是我们对如何把页面和特征组合在一起（这件事）没有任何的关注。

我们把产品当作一组页面来思考。但是这种工作方法有一个问题：人们怎样在现实生活中体验这款产品是不重要的。在任何地方人们都在很短的时间流里使用产品，大概从30秒到几分钟。

一个用户可能在一个搜索结果中首先注意到你的产品，花一分钟的时间大概浏览一下这款产品，然后离开。他们可能回来，注册，然后再次离开。他们可能打开来自这款产品的邮件，回来，购买产品，然后离开。每一个这样的小故事都是人们实际情况下体验你的产品的一种方式。

一个产品不是（简单的）一组页面——它是这些页面组成的使用场景。

如果你的团队没有关注这些使用场景，如果你孤立地思考每个页面，那么你的想法将和实际使用你的产品的用户完全不同。

以场景为中心的设计

一旦我意识到使用场景是我们实际上设计的东西，一切都变得简单起来。但是我对保持关注的故事仍然有困惑——我不断地发现自己在思考个别页面。

所以我开始通过不同的方式来突破我的设计过程。我改变了工具，可交付成果，以及如何和我的团队一起工作。这里有我发现的最好的四种可以专注于故事的方法。

方法一：在画线框图之前使用故事板

在开始设计产品之前我会思考它的一个使用场景，这对于产品的成功是至关重要的。产品的核心很有可能是由十几个或是更多的使用场景组成的，但是我只选择一个开始。然后我构建了一个故事板——很像漫画。如果我已经在脑海里有了线框图，那么故事板的每个框架在界面上都会有一个对应的页面。有时候我得到的更多是抽象的使用场景，每个框架都是一个小型交互数据块：用户阅读或点击的任何区域。

好吧，这不是火箭科学，但这门学科在很多方面都有帮助：

1、故事板帮我同样专注于我们需要设计的所有屏幕——其中一些甚至可以被搜索引擎用来搜索信息片段或电子邮件。

2、故事板强迫我去思考用户目标，因为它们显示了如何在产品中完成任务。

3、一旦我们认同故事板是对公司最重要的东西，它们能够帮忙选定所有功能在屏幕上的优先级。

4、故事板真的能够帮助我专注于屏幕之间的切换，一个按钮在屏幕上要有它的意义，但它也需要设定好用户将在接下来的屏幕上看到什么。

而且最棒的部分是，我可以反复使用这些相同的故事板，所以它大幅加快了我的其它工作速度。当我向团队展示UI设计稿时，我需要向他们展示一个故事板。当用户开始使用产品的时候，我们可以在一组屏幕上向用户展示相同的故事板。如果我们做出了一个可交互的demo或者完成了一个产品的介绍视频，就如你猜测的那样——我们需要一个故事板。

方法二：用 Fireworks 渲染整个使用场景

我知道大多数的设计师都使用 Photoshop 或 Illustrator ，况且是视觉设计，没有什么软件比它们更好了。但是如果我们正在设计故事板，那么设计标准应该是将来用户会看到的高保真页面。这些故事板可能需要20~30个页面，如果用 Photoshop 去设计它们会变得很艰难，所以大部分的设计师不会找这麻烦，我们又再次回到设计单个页面。幸运的是， Fireworks 有一些巧妙的功能能够使设计尽可能地保持以故事为中心：

1、内置网页：您可以在一个文件中建立一个完整的故事。上下方向键可以很容易地翻阅故事班，看看到底用户将看到什么。

2、母版：如果页眉或图标出现在多个页面，你可以把它做成一个母版。然后，如果你需要在用户测试之修正一个图标，你不必单独修改20个文件。

3、查找和替换：团队可以在设计进程的中途修改一个功能的名字吗？没问题。

4、高保真：您可以在同一个工具中把一个粗糙的线框图变成一个好看的线框图，一旦故事板是固化的（solid），你可以为了更好的细节设计而回到 Photoshop 软件中。

方法三：在纸上回顾整个使用场景

当我们团队到了需要审查设计稿的时候，我几乎从来不展示孤立的一个个页面，相反，我将会把一个故事板里的所有页面都打印出来，然后把他们铺在很长的会议桌上或者用胶带把它们贴在墙上。

这样的工作方法非常好，因为团队人员可以近距离地看到一个页面上的所有细节。他们可以往后退一步，看到相邻的页面，想想页面之间的交互切换。甚至他们可以后退更多以看到整个故事板，这有助于让每个人对页面上需要有的内容的用户目标和任务保持相同观点。

当我向其他设计师展示工作内容时，我将跳过图纸仅仅是在电脑上点击屏幕——他们将获得所需信息。而且我发现打印的这种方法对工程师和PM们来说是非常有帮助的，他们不会像我一样花整天的时间来研究交互设计。哦对了，在设计的时候你可以直接用纸做笔记，并且可以把他们带回你的办公桌上作为下次的迭代素材。

方法四：不要发送 mockups ，记录屏幕录像。

这是我所知道的最奇怪又是最有帮助的设计交付物。我过去常常通过电子邮件来解释交互细节。我会附上一组页面，然后努力去解释它们是如何组合在一起的。这写起来很痛苦，而且阅读起来也不是那么轻松。所以我开始用ScreenFlow录制故事板的视频。由于每个页面已经建在Fireworks中，我只需要假装去点击用户会点击的地方，跳转到下一个页面，然后对着相机描述正在发生什么。第一个视频我花了很长的时间去录制，并且通过实践的方式克服了我的怯场，不久之后，我录制视频的速度要比写邮件快得多了。

我常常惊讶于真正的产品是如何从这些视频当中感受到的。因为它们可以很好地模拟最终的产品是什么样的。它会成为收集反馈的一个很好的工具，它几乎像再次批判了一个简单的海报。

以上这些仅仅是一些我已经改变的工作方法，它们能让我和我的团队专注于故事场景。我很好奇是否其他人已经注意到了以页面为中心的设计和以场景为中心的设计之间的不同？你有学到什么方法可以让你在设计过程中专注于故事这些故事场景吗？

译文地址：点击查看

本文由 @沈晓马投稿发布，本文禁止在本人未允许的情况下，任何形式的全文转载和部分转载。

互联网从业者必备微信公众号：woshipm，如果你已经关注了，证明你已经很牛逼了。

windows 10 新特性变化研究

Thu, 29 Jan 2015 15:47:51 CST

早在win10刚出消息的时候，笔者就一直有对它进行关注，而笔者对win10的有些猜测居然和前几天发布会上的版本不谋而合。趁着微软这股势头，我们也来看看究竟win10有哪些新的变化，趁此机会也分享一些个人对这些新变化的理解和对设计的启发。（多图、多文字预警）

Windows 10作为微软新一代系统的统一品牌名称，将覆盖所有尺寸和种类的Windows设备，贯彻了 “移动为先，云为先(mobile first, cloud first)”的设计思路，是一个跨平台最广的操作系统。主要的几个变化如下：

一.自动选择默认桌面

熟悉的默认桌面重新回到用户的第一视角。Win10将会自动判断用户的硬件设备，来决定默认进入的是经典的操作桌面，还是支持触屏手势的开始屏幕。

变化分析：

很多传统的PC用户不懂得如何使用Win8的开始屏幕（metro UI），白领或办公用户无疑更喜欢传统桌面，可以随便按意愿摆放自己的文件文档。因此经过win8、8.1的版本验证，微软作出让步，想通过把熟悉的桌面回归到传统用户的第一视角，弱化开始屏幕，赢回用户口碑。

二.开始菜单回归

Win10里开始菜单真正回归，并在菜单的左边新增win8开始屏幕的磁贴显示功能。

菜单演变过程：

变化分析：

从win8~10的变化中，笔者大胆猜测微软不会放弃磁贴的设计。毕竟移动是主流，PC市场在衰弱，而微软又想所有设备使用一个系统，磁贴设计无疑更适合在移动端上使用。甚至可能等磁贴的体验成熟后，开始菜单有可能会逐步退出用户的视线（以后的开始菜单=苹果的home键？开始屏幕=iOS的桌面？），大家也不妨对未来的windows菜单进行大胆猜想。
因此笔者也认为微软是想通过传统开始菜单和磁贴的整合，让用户逐渐适应过渡，培养使用习惯，也算是微软作出让步的折中方案。

三.智能分屏

通过拖拽窗口到桌面左右边缘的方式来进行左右分屏放置。

win10里如果将窗口拖拽到屏幕四角，会有对应的划分提示，可以把桌面分成四块使用。
当划分出最后一个窗口时，就会在当前未分配窗口的空白区域出现窗口列表供用户选择。

变化分析：

大屏幕里如果只是执行单个任务，效率偏低，因此微软提倡用户在大屏幕里执行多任务。
定义四角有可能是帮助用户更好地利用桌面空间，尽管提倡多任务，但微软可能觉得4个任务目前足以让用户使用。
目前的主流显示器同时放4个窗口也显得相当憋屈，参考设计师已有的多个显示器的工作方式，未来可能会出现更大尺寸或超大尺寸的显示器？（PS:就在得出这猜测的后几天，微软就在它的最新发布会上发布了一款大屏硬件：Surface Hub）
单任务适合小屏设备，多任务适合大屏设备。业界消息说今年苹果将会推出12寸的ipad平板，如果是真的话，这个尺寸已经相当接近小尺寸的手提电脑，触屏和传统鼠键的硬件临界点将会来临，大胆猜测其临界点可能就在12寸大小左右诞生？或者说触屏平板和传统鼠键电脑将进一步融合？

四.虚拟桌面

win10在任务栏上新增了Task view按钮（快捷按钮win+tab），点击后可查看当前桌面正在运行的程序，在底部区可快捷添加、切换、关闭虚拟桌面。另外触屏设备也能通过边缘左侧单指划入也可进入Task view。

变化分析：

虚拟桌面能让用户拥有更多自由的空间处理执行多任务。一台机器也能有类似接入多个显示器的体验。
苹果Mac OS早就有这样的体验，微软这一变化算是针对桌面功能的完善补充，并跟上竞争者的步伐。

五.Metro应用桌面窗口化

在win10中，Metro应用默认以窗口化方式运行，在应用标题栏图标右侧的“…”菜单中可点击“全屏显示”来全屏化。

有趣的是，当窗口全屏化以后，开始菜单也会相应全屏化（如果再激进些把左侧一栏干掉…）

变化分析：

既然传统桌面回归了，面对传统PC用户，相应也必须弱化应用全屏的概念。
metro窗口化了，自然能提高用户的使用率，用户上去了，也能重新吸引开发者的回归。
配合传统桌面回归，窗口化的展示更适合多任务。
保留全屏按钮，方便用户沉浸式处理任务（与最大化的差异？后面最大化按钮会消失？）。
菜单全屏后其实就是win8 的metro UI了，因此猜测是在培养用户对磁贴的使用习惯？

六.窗口自适应

当对窗口进行拉伸缩放时，窗口内的元素会跟随窗口的变化进行自适应调整。

变化分析：

界面自适应有利于提高智能分屏下的窗口体验。
更有利于多终端的统一体验。
关于多端自适应的技术可以多关注。

七.通知中心

点击任务栏右下方入口，可呼出新的通知中心。目前程序的更新、系统更新、以及程序或日历中的提醒，都会在通知中心中出现。

变化分析：

对一些像应用更新、安装、提醒等通用的信息进行归类梳理。
像邮件、聊天等软件，提供了更快捷直观的外显方式。

后续对通知中心的猜想：

支持快捷回复。
给应用的某些核心能力提供快捷入口。
多个平台终端的通知功能体验对齐。
进一步向android或iOS借鉴对齐。（PS：最新的通知中心已变成侧栏打通，如下图）

八.强化全局搜索

任务栏上新增了搜索按钮，点击后会打开一个小的搜索窗口。默认先搜索本机程序，然后再搜索互联网内容，也会给出相应的搜索建议。

变化分析：

落后于竞争者的能力完善补齐。

九.语音助手Cortana

任务栏上新增了搜索按钮，点击后会打开一个小的搜索窗口。默认先搜索本机程序，然后再搜索互联网内容，也会给出相应的搜索建议。

在最新的win10版本里搜索入口变得更加显眼，界面也有了明显的优化。

变化分析：

未来智能AI的战略部署。
落后于竞争者的能力完善补齐。

十.新增“主页“文件夹

点击任务栏上的文件资源管理器按钮，默认会进入一个名为“主页”的文件夹，里边包含了一些用户文件夹。相关资料有待补充。

十一.Charms bar默认被隐藏

Windows Charmsbar默认被隐藏，但可以通过快捷键呼出，并且依然为触摸用户保留。

变化分析：

Charms bar的功能与任务栏左侧的能力重复，因此隐藏或去掉更为合适。
保留charms bar是为了照顾触屏用户的使用。

十二.UI变化

图标扁平化，图标间距有所调整。

窗口去边框（左：win10 右：win7）

变化分析：

凸显信息，追赶设计趋势。
在适合鼠标点击和触屏这两者之间进行摸索。
整体风格不统一，部分因为还原不到位，部分是因为兼顾鼠标点击和触屏体验，因此还有漫长的路要摸索。

十三.程序云管理

据说Win10可以通过远程的方式关闭本地运行的应用程序，而通过任务栏里面的小图标还可以时刻提醒还有哪些应用在云端运行。相关资料有待补充。

总结

win10在变化上的一些缘由和启示：

照顾传统PC用户。
迎合扁平的设计趋势。
功能在部署完善，跟上竞争者步伐。
微软在不断优化大屏系统体验。
跨终端统一体验。
云端化的部署。
Win10依然在摸索过渡中，相对成熟的系统估计还需要2~3个大版本的改进。

在设计上一些可关注的方向：

终端系统趋向大同小异。
关注自适应的设计（包括框架、UI、及相关技术）。
面板设计更加趋向一体化。
在系统的变化和设计理念上，可多看一下微软、苹果和谷歌这几家巨头的设计理念和定位，会有很多相似或有趣的地方值得深入研究。

因为这是在21号发布会之前整理的内容，东西较多。整理下来也需要一定的时间，某些内容和还有所欠缺，如Surface Hub、HoloLens 智能眼镜、新浏览器Spartan等待。本人后续也会不断对win 10的内容进行补充，对其特性变化背后的缘由进行深入挖掘，欢迎感兴趣的同学一起交流讨论。

最后，不关微软是否能打成这场翻身之战，我还是挺欣赏能看到它作出的改变和尝试。尽管目前我还不是太认同win 10的大一统体验， 但梦想终究还是要有的，万一实现了呢亲~

能坚持看下来的同学都是棒棒哒，最后友情附送，Win10消费者预览版发布会全程视频中文字幕版（由于1个多小时的发布会视频时间较长，请大家点击链接跳转到视频网站观看）： http://v.qq.com/page/y/w/s/y0015bl4ews.html

互联网教育将进化出三个主要阶段

Mon, 26 Jan 2015 00:26:12 CST

当未来的孩子天然的生活于互联网中，活在人与人更为加速紧密的连接中，我们是否真的还需要教育？互联网对于这些孩子来说其实是一个工具，并且会越来越强大，从互联网的发展趋势来看，互联网会对教育的影响会进化出以下几个阶段。

阶段一，加速影响下一代人的思维方式

能够将互联网这一工具在学习上新知识上发挥到淋漓尽致的，必然是程序员，因为这个虚拟世界本身就是这些程序员创造的，这本来就是他们的世界，所以他们在获取信息能力上也注定是远超常人的。

以我个人举例，我之前学校学的是JAVA语言，但是很多内容都不是课堂上学的，都是属于自学，我们更多的是在做项目的时候遇到问题让老师提供具体解决思路，因为有些特殊问题在网上实在搜不着了，老师对于我们的作用其实等于一个技术辅助而已。而很多问题没有解决，是因为互联网的数据库还不够大，无法搜索到全部答案，但随着经验能力增强，我逐步发现不需要老师的任何指导就能解决问题，CSDN，GITHUB上会有一大堆第三方开源代码以及解决方案，可以拿过来迅速学习，并且改之源代码应用即可。

在这里，我想说明的是程序员高度利用互联网来解决问题的思维方式，而互联网也将会自然的不断产生出所有问题的答案，同样我们再看看现在的00后其实也越来越具备程序员式的思维方式，他们遇到具体问题都不再去问老师，而是通过手机拍下来直接通过360和百度的题库找到自己想要的答案，进而解决问题，那么当这群高度利用互联网的小孩长大后，思维方式肯定与我们这代人会大有不同，他们获取知识的能力，搜索的能力将远在我们这代互联网移民之上，而这种加速会使得他们在未来变得更有活力，更有创造力。

阶段二，整合教师与学生资源

当前在线教育的模式是在满足这么一个情况，当一个人对信息的搜索能力不够时，才需要老师，而目前这个需求确实是庞大的。在我所观察到的我们这群90到95的互联网老年人中，他们对互联网的利用能力依然极为低下，他们还是需要一个老师来教，否则没有安全感，他们对互联网还是没有足够的自信，而此时的互联网对他们来说是一个老师与学生的整合者角色，将他们想要的内容连接起来，所以对在线教育有旺盛的需求。

目前这种趋势已经越来越明显，美国三大MOOC，Coursera、Udacity和edX，国内也有网易学院，果壳MOOC，超星学术视频等等，这在一定程度上很好的整合了学校资源。

预计在线教育火热程度还会比较漫长，直到当有一天所有的小朋友可以不利用这些视频而学到自己想要的知识，那时在线教育将寿终正寝。

阶段三，改造社会结构，人的全面发展

从功利的角度来说，老师本质上也是一种工具，用来向学生传递如何融入社会的信息的工具，其中包括工作生存技能以及一些为人处世等等，但事实上这些互联网都能天然给予，在相关专业知识方面互联网已经保罗万象，哪怕是深奥的学术知识也能从国内国外的高等院校的学术资料库中搜到，只需要花点小钱就能下载各种学术论文。再谈为人处世方面，那帮年轻人早就被微信QQ空间的心灵鸡汤成长励志类文章轮番轰炸过，这也同样很好的起到了价值观的引导作用。而这两方面原来不都是老师的工作么？

这里可能会有人反对，年轻人如果不受控制可能会做出出格的行为，没有引导好，以后会危害社会的云云，这实际上也是个伪命题，因为年轻人从来都是不受引导的，他们内心天然有反叛的动力，因为传统的教育把价值单一化，压抑了人的天性，而互联网会逐渐瓦解这种情况，那些被压抑的年轻人，会在互联网上找到存在感，那些拥有特别天赋的年轻人会在互联网上搜索其想要学习的知识，他们高中没毕业就已经开始写网络小说，成为微博贴吧大号接单赚钱，为网站抓漏洞，开发APP，做飞机模型，各种发明创造并申请专利，这一切让都他们有了更多的多元化的选择，用互联网来完成自己其他方面的成就。这不就很好的融入社会了吗？

所以我对未来是乐观的，越来越多的学生将从互联网上获得知识，获得生存技能，获得成就感，加速与社会的连接融入，而整个教育体系将会从控制者下沉为辅助者，辅助大家发挥天性，投其所好，完成马克思的预言。

结语：从本质上说，教育的本质是帮助人融入社会，让社会更好的运行，由于之前的社会是工业社会，所以整个教育体系为工业社会服务，呈现出一种狭窄单一的价值取向，要么成为教授，要么成为技术专才。而互联网的出现无意要改变教育，而是将会从顶层摧毁工业社会这种价值观的单一取向，让价值观变得更为多元开放，加速个人与社会的碰撞式融合，学生可以直接通过互联网加速与社会的连接，并且只要一个人对其他人有价值有贡献，在互联网上会被迅速放大，他将借助互联网完成自己对于这个社会的使命。

人是社会关系的总和，马克思的预言正在一点点发生。

来源：百度百家，作者：承哲

互联网从业者必备微信公众号：woshipm，如果你已经关注了，证明你已经很牛逼了。

交互设计原则有哪些？

Sun, 08 Feb 2015 14:03:02 CST

笑天涯说：交互设计直接决定用户使用你的产品过程中体验，其重要性不言而喻。那么我们做交互设计的时候该考虑哪些交互设计原则呢？

知乎问题：交互设计原则有哪些？

问题虽然有点久远，但是知乎用户向华胜的回答还是很干货，感兴趣的读者可以仔细看看。

知乎回答：

产品设计的原则有点太泛哈，这里想结合自己的工作心得来小结一下手机无线设计8原则：

原则 1 ：用户界面应该 是基于用 户 的心里模型，而不是基于工程 实现模型

就是把后台本来很复杂的事情通过设计符合用户日常生活中常用的浏览方式或操作方式。其实这一点是设计师把生活中的细节和数据结合的凝聚点，用户的心理模型抓的越准，界面就会越优秀。

#左边界面#：大众点评新版的价格的搜索就比之前改得更符合用户心里模型；#右边界面#：食神摇摇的摇动手机找餐厅更加符合大众用户的心里，大家应该都有那种中午不知道去哪家餐厅就餐，那么就摇一摇来随机抽出一个附近的餐厅。

原则 2 ：培养用 户 使用情景的思 维 方式做 设计

要做到这个原则其实是很难的，需要长期的实战经验才能做到这点。
那我们都知道米聊出的比微信早，但后来被微信反超，个人认为不光是QQ帮了微信很大忙，比如用户登录门槛低，用户来源，广告打得响之类的，其实在用户使用情景方面米聊研究的没有微信透彻。

对于一个社交即时通讯产品，添加好友的功能是好友汇聚的来源，虽然米聊微信都绑定手机通讯录，但话又说回来，用户找手机通讯录联系人语音聊天的还是比较少。添加好友是引导用户去发现好友，找好友, 碰好友的一扇门。所以对于这么重要的功能放置在应用程序的哪个位置，在产品前期就会让用户明显的去选择用哪个应用，因为聊天工具的前提是要有人和你聊天。再回到现实的界面中来，看看下面的对比：

微信1.0的时候（我这里只截了4.0的图）把添加好友放置主Tab上，方便用户很快的添加好友

米聊2.0时还是把添加好友放置在好友列表的第一排，用户很难发现

原则 3 ：尽量少的 让用户输入，输入时 尽量多 给 出参考

移动端的虚拟键盘一直是科技界无法解决的一个难题，虚拟键盘的主要缺点：1.输入定位无法反馈，所以无法形成高效的盲打；2.虚拟键盘的空间限制，手指的点击经常造成误按。光是上面这两点就让虚拟键盘在输入上大打折扣，所以我们在设计应用程序时，只要遇到Input Box的控件时，首先就要想到尽量让用户少输入，或者智能的给出参考。

百度音乐

搜索先是把近期最热门的歌曲依次排列在列表中，当有字输入时，会出现歌手的候选词，这里值得称赞的是百度音乐的搜索能根据用户输入的字来判断用户是搜索歌手还是歌名。

百度地图

是我用得比较顺手的一个地图导航应用，在减少输入方面也做的比较出色，百度地图拥有cookies功能, 另外就是百度搜索的技术应用在地名的匹配中也很让人欣喜，在用户输入到一半的时候，下面的候选列表就出现了目标地址，用户直接停止输入点击列表即可。

原则 4 ：全局导 航需要一直存在， 最好还能预览 其他模 块的动态

全局导航在Web交互设计中比较容易做到，在手机移动端全局导航要看产品设计的需求，什么功能需要全局导航，社交应用通常是：消息，通知，请求；音乐视频应用通常是：下载，搜索；工具类产品经常是核心工具条（tool bar) 比如浏览器，语音助理，音乐识别应用等等。

全局导航的价值在于可以让用户在使用过程中不会丢失信息，减少主页面和次级页面之间的跳转次数，当然全局导航中的info-task要能在当前页面完成，如果需要跳转到新界面，就会失去全局导航的意义，因为当出现多个info-task的时候，就需要用户不停的进入全局导航页面来完成。

Facebook 的朋友请求，消息，通知都是采用全局导航的方式，就是面板设计的丑了些~

米聊的通知中心，里面包含的通知类型蛮多的，显得有点凌乱，希望下面的版本会筛选归类

原则5： 提供非模 态的反馈， 不打断任务流

模态弹出框的书面名称在iphone OS中称作：Alert-box，在Android OS中称：Pop-up box, 我们都知道弹框会打断任务流，所以在有限的屏幕上怎样让这些弹框弱化，或者说优雅、绅士的提醒用户，这个需要设计师来定义。

Gmail是第一个把删除的模态弹框设计成List Notification这种方式的，提醒用户撤销刚才的删除操作，这种非模态的处理，让删除的流程更加顺畅和轻松自如。

K歌达人第二版的弹框就是模态处理，界面很不友好，用户在K歌过程中要被打断三次才能发表一首自己唱的歌曲，所以降低了用户的参与度。

原则6： 不要让用户等待任务完成，用户还要发现更多有意思的地方

移动互联的核心就是给用户带来移动体验的方便和高效，这是移动互联网Apps需要考虑的，用户在使用你产品在很多情况下都是碎片时间，所以在设计上尽量让用户在短时间内熟悉我们的产品，知道这个产品的诚意，特别是某些等待界面需要设计，不能把一个很枯燥的等待界面呈现在用户的面前，那用户很快就会换其他apps。

在Instagram 拍完照片后，点击上传后，它的处理方式是回到首页的位置，告诉你的照片正在提交，并不是显示一个上传进度的界面，让用户看那上传百分比。因此，我们在设计米吧上传歌曲文件时也只是告知用户后台正在帮你上传，叫用户放心，用户自然就会去玩其他的功能，没有让用户焦虑的等待，等上传完毕时，我们再用Toast list通知用户已经上传成功，这样把查看上传结果的主动权交给用户。

原则7： 自动保存用户的输入成果

在移动端，由于输入面板的复杂性，而且触摸输入没有物理按键的反馈自然，特别是手机上去输入一段文字或者信息，对用户而言本身就是一件很痛苦的事情；对产品而言，用户的在你的产品中输入是一个很值得庆幸的事情，所以设计人员需要让你的apps自动保存用户的输入成果。

微博官方的手机客户端在用户输入信息后，点击左上角的叉时会弹出Action sheet来询问，确认是否要放弃，或者保存为草稿；path的处理则更为人性化，在处于断网的情景下，用户依然可以发布照片和文字，当然后面联网成功后，系统会自动上传，只是发表时间是连网后发布的时间点；Instagram的评论也很友好，在断网或者网络情况不稳定的情景，用户输入的评论依然可以发布，后面会有一个叹号提醒用户稍后发布或者重试，提升了用户参与的积极行，同时活跃了社区。

原则8： 为了程序响应的速度，设计有时候需要担任掩护的作用

科技并不是万能的，技术依然是移动互联网应用程序最需要优化和完善的，作为技术的盟友我们设计人员也需要辅佐他们，让用户觉得程序原本就应该是这么运行的。特别是程序响应的速度很多时候不光是技术的问题，与网络环境也有很大的关系，这时候设计人员需要考虑这些客观存在的情况，帮助程序来掩护这些瑕疵，让用户感觉到在使用时是流畅的。

#随后实现# Instagram帖子“赞” 不管对参与者还是帖子作者都是激发其积极性活跃社区氛围的重要功能，所以在程序的响应方面一定要具有可用，易用的特性，我们看左图中，“赞”的按钮已经现实“已赞”，同时我们看红色框内的“菊花瓣”就知道后台在loading赞的数据，所以这就是设计的巧妙之处，先让用户感知到程序是非常快速的，而不是等loading完之后再显示“已赞”；

#提前传输# Instagram中发布帖子的时候，用户处理完照片点击“上传”按钮就看到中间的界面，这时候界面是让用户去为自己的帖子输入一个主题，或者去设置分享等功能，同时我们可以看到红色框中的“菊花瓣”，很明显后台已经开始传输刚才上传的照片了，所以当用户在点击“完成”时，数据只需要上传剩下的一部分，让用户感知上传很迅速；

#边唱边完成# 把伴奏和用户的歌声合成为一首音乐时需要后台处理大量的数据，如果分步做就要让用户等待比较长的合成时间，为了让用户不用枯燥的等待合成，我们需要后台在用户唱歌的同时，后台就已经开始把唱过的伴奏和歌声合成。

以上八项原则是我在工作中体会比较深刻的交互设计原则，希望能对观看到这篇博文的朋友有所帮助。当然设计原则是随着时间的变化而不断变化的，所以也请各位朋友完善和补充，谢谢！

本文整理自知乎问答，转载请注明出处和原作者 @向华盛

互联网从业者必备微信公众号：woshipm，如果你已经关注了，证明你已经很牛逼了。

5种实用App导航菜单设计方案

Thu, 08 May 2014 09:04:28 CST

手机分辨率比桌面平台小很多，所以设计手机网站或是移动应用的时候，导航菜单都需要考虑周全，尽量保持简约和易用性高，这里我们整理了5种实用的移动手机App导航菜单设计方案，你可以尝试这些菜单设计模式用在你的新设计项目上，好用而且有新鲜感。

这5种App菜单设计方案也许有很多设计师已经在使用，但不能否认它是目前实用的，而且能提高用户体验的菜单设计方案。下面摘选移动手机UI设计美观、时尚，希望你看了后会有灵感收获，能把你的菜单设计得更棒，好好学习吧。

APP导航设计类型：

列表式菜单
矩阵、网格式菜单
底部菜单
顶部菜单
扩展菜单

一、列表式菜单

列表式菜单设计这个从网站到手机APP上都很常用的，遵循由上至下的阅读习惯方式，所以使用起来用户不会觉得困难。另外我们可以通过漂亮的配色、图标组合来设计，使得菜单更多加美观。

GIF Aimation

Elevatr

HabitClock App

Instagrab for iOS

二、矩阵、网格式菜单设计

网格式菜单就类似于metro UI的堆砌色块，优点简约而不简陋，导航清晰、明显，并能提高效率。但设计时切记不分青红皂白的去使用色彩哦，这可能会让用户不知所措和产生疲倦感。

Vectra

Arrivo Mobile App

Abracadabra App

TRAVERSE

三、底部菜单

底部菜单主要是列出应用程序重要的功能。

Badoo concept

Animated sliding tab bar

四、顶部菜单

顶部菜单和底部意义差不多，把菜单放在顶部，可以遵循上至下的阅读习惯，不过我认为有个缺点就是不能单手操作。

Horner

Discovery Channel

Air flow calculation app

Shario App

五、扩展菜单

扩展式菜单设计现在连网站也很常用，当我们觉得菜单比较点用位置的时候，可以尝试用这种方式来隐藏菜单，需要注意的是设计展开菜单按钮大部设计在左或右上角这些显示的位置。

MuSeek

Univit UI

SVOY app design

Időkép

总结

从上面5个菜单设计方案中可以看出都有自己的优缺点，所以我们应该选择对你项目最为有效的方案，并能提高用户体验。

原文地址：shejidaren

您可能也喜欢：
手机界面常用导航设计分析	APP 创业煎熬生存的持久战	Web导航设计二三事	在屏幕上画个C—基于人机工程学的安卓导航碎片化解决方案	如何输出有效的设计方案
无觅

（关注更多人人都是产品经理观点，参与微信互动（微信搜索“人人都是产品经理”或“woshipm”）

再见Metro，Windows 10通用应用设计趋势分析

Fri, 24 Apr 2015 20:09:58 CST

众所周知，当初微软在Windows 8上做了非常大胆的变革，除了开创性的Metro设计语言，传统桌面和平板两种模式的融合也是一大特色，可这两种操作模式在使用体验上的不一致也成为Windows 8饱受用户诟病的原因之一，但微软自始至终都朝着平台大融合的目标坚定前行着。经过一路探索，微软终于通过在Windows 10系统的公布，展示了一个更加清晰明了的战略方向：构建一个面向全部Windows设备的核心操作系统。下面，本文就通过系统新特性和已公布的通用应用，来简单分析一下Windows 10通用应用的设计趋势。

一. 系统新特性

首先，我们先来了解几点与应用设计相关的一些系统特性：

· 通用应用（Windows Apps）

在微软Windows 10发布会上，通用应用（已经由Universal Apps更名为Windows Apps）是出现频率很高的一个名词，那什么是通用应用呢？简单来说，在Windows 10上将真正实现以尽可能少的开发量即可打造全平台都可运行的应用，从电脑、平板、智能手机，甚至到Xbox One都无缝过渡，并且保持整体一致的用户界面和操作体验。与Windows 8上的Metro应用只有全屏模式不同的是， 通用应用在桌面模式下支持窗口模式，这意味着触屏和键鼠两种操作将得到更好的融合。

通用应用具有以下优势：

1. 统一的UI和体验可以减少用户在不同平台间的学习成本

2. 大大减少了开发成本

3. 可通过一个应用拉动不同平台的用户群

· 自适应用户体验（Adaptive UX）

微软针对Windows 10系统专门提出了自适应用户体验的这种理念，并为通用应用提供了一套统一的跨设备自适应控件。这套控件的视觉元素和交互体验都是整体一致的，但针对不同的操作场景和设备有细微不同的体现，比如触摸屏、应用弹出控件等，当用户触摸时自动使用较大面积按钮，使用键盘时与之相反。

· Continuum模式

Continuum模式是专门为混合形态设备设计，比如Surface，也就是说开启此模式后我们的设备可以自由切换平板状态和笔记本状态，系统会根据是否为触控屏幕以及是否有键鼠来判断是否进入“平板模式”。比如有触控功能的设备拔下了键鼠配件，Windows 10 会提示是否开启“平板模式”并将应用全屏显示，整个界面会针对触控略微放大，而且开始菜单也会变成全屏。这种模式较好的融合了触屏和键鼠两种操作场景，减轻了桌面和平板模式间的孤立感。图为在桌面和平板模式下开始菜单的不同样式。

二. 设计趋势分析

再来看看Windows 10上的官方应用对比Windows 8上的版本有什么不同：

应用商店（平板）

XBOX（平板）

Skype（平板）

可以看出Windows 10的应用标准已经与之前的样式发生了非常大的变化，笔者认为可以归纳如下几点：

· 自适应布局（响应式设计）成为通用应用核心结构

除了要应对通用应用在桌面模式下缩小放大的窗口变化，未来搭载Windows 10的设备尺寸也会多种多样，所以， 灵活且高效的自适应布局理所当然是最符合通用应用跨平台、窗口化的特点的，在上面的图中我们可以看到Xbox和Skype都改为了多栏式布局。

· 横向滑动不再是典型的系统浏览形式

我们都知道Metro UI的设计语言之一就是横向滑动浏览，但随着Surface系列设备的屏幕比例从前几代基于横向操作而设计的16：9变成了Surface Pro 3的3：2，似乎已经是微软在传递调整产品方向的讯息。而如今我们可以看到上图中Windows 10官方通用应用基本已经摒弃了整个信息流的横滑浏览，只是在个别分类下采用。对此变化，可以想到的原因之一是通用应用在桌面模式下为窗口模式，当窗口尺寸变得窄小时，自然不适合用横滑来浏览信息。

· 探索新的导航解决方案

既然Windows 10已决定弱化横向浏览，那必然需要一种更好的导航形式来替代之前的大字号横滑导航，大部分的通用应用都开始尝试采用“汉堡菜单”（Navigation Drawer）来作为统一的导航形式。虽然汉堡菜单已经被广泛应用在网站、IOS及Android系统中，但是由于其易用性还存在很大争议（特别是在Phone上），所以在正式版发布前，汉堡菜单会不会成为微软的最终解决方案还不得而知。

· 更多元化的设计风格

在Windows 8上，不论是手机还是平板应用，在系统设计规范的指引下都显得“高度统一化”，以至于每一个应用看起来几乎都是大号字体+方块磁片的组合。Metro UI这种去掉所有装饰只呈现信息的设计理念其实一定程度上等于剥离了带给用户情感化体验的元素，从而使用户越发审美疲劳。还好在新的通用应用设计中，我们可以看到除了开始菜单以外，曾经那些单一的Metro元素已经越来越少，而线型图标、居中布局、圆形、分割线等等元素的加入使界面变得更加丰富起来，可以说 Metro UI的设计语言已被逐渐弱化，微软开始鼓励并给予开发者更大的设计自由，未来Windows 10将逐渐和IOS及Android平台的扁平化风格趋于统一。

· 不同设备和操作场景需要定制化设计

虽然在理论上开发者可以通过一次编写和一套UI使通用应用在所有Windows平台上运行，但根据实际情况来看，小尺寸的设备界面并不等同于大尺寸的设备界面缩小为窗口化时的效果，设计师仍然需要针对不同的设备和操作场景（如触屏或键鼠）来定制设计方案。在保证应用设计统一性的同时，也要兼顾不同设备的使用体验，这对设计师来说也许是一个挑战。

针对不同的设备特点，同一个通用应用运行在手机和平板上的区别

最后，根据以上趋势分析，再补充两个小Tips：

1.开发者们可以利用这次Windows 10设计风格向其他平台靠拢的机会，更方便的从IOS及Android平台将应用移植到Windows 10，或者对原有的Metro版本进行优化，保证品牌和设计的统一性。

2.很快，通过免费升级到Windows 10的PC用户将会占绝大多数，所以在为通用应用进行设计时应以窗口模式键鼠体验为基准进行设计，再保证全屏触控模式的可用性。

总结：

这一次，微软再次彻底的颠覆了自己，也许我们开始从Windows 10身上看到其他平台的影子，也许曾经独树一帜的Metro UI即将与我们告别，但是从目前的体验来看，笔者认为Windows 10毫无疑问是变得更优秀了，只不过跨平台统一这条路是否好走，未来还有待验证。现在，背负着改变微软命运这个沉重使命的Windows 10即将起航，祝愿它。

产品细节中的情感化设计

Thu, 04 Dec 2014 14:33:36 CST

原研哉在他的《设计中的设计》中有介绍过这样一个案例：日本机场原来是用一个圆圈和一个方块表示出入的区别，形式简单并且好用，但设计师佐藤雅彦却用一个更“温暖”的方式来重新设计了出入境的印章：入境章是一架向左的飞机，出境章则是个向右的飞机。

通过一次次的盖章，将这种“温暖”的情绪传递给每一位进关的旅行者们。在他们的视线与印章相交的那一刻，会将这种温暖转化为小小的惊喜，而不由自主且充满善意的『啊哈』一下。一千一万次的『啊哈』就会伴随着这一千一万次对旅行者的善意与好客。这便是产品中的细节与用户直接情感化传递的结果。一兰拉面是在日本非常受欢迎的拉面店，在顾客吃完面并把汤喝完会看下碗底有这样几个字“この一滴が最高喜びです（你最后一口是对我们最大的肯定）”，他们用这种简单的细节打通了产品与顾客感情的传递，顾客在喝完最后一口面汤是对店主的肯定，并也因为对店主的肯定同时获得了店主的感谢。产品中的情感化的细节经常会成为产品与用户之间情感传递的桥梁，这种传递情感的细节不仅可以增加用户对产品的好感度，更可以让产品更加深入人心，利于产品口碑的传播，有时候可能仅仅一句文案，一个动画，一个彩蛋都可以打动用户，使其与产品产生情感上的共鸣，这便是产品细节中的情感化设计的作用。以下便是情感化设计在网页或者App上的实际运用：

情感化设计可以加强用户对产品气质的定位

Timehop是一款让你回顾那年今日的App，它可以帮你把去年今日写过的Twitter，Facebook状态和拍过Instagram照片翻出来，帮你回顾过去的自己。Timehop为自己的产品塑造了一个蓝色小恐龙的吉祥物形象。许多小恐龙贯穿于界面之中，用吉祥物+幽默文案的方式来将品牌形象的性格特点和产品气质传达出来。用户在打开App时就能感受到小恐龙的存在，闪屏中一个小恐龙坐在地上说了句“Let’s time travel”，立马将用户从情感上带入了App的主题——时间之旅。

有趣的地方还有很多，类似下图，在默认情况下是露出一半的恐龙在向你招手，小恐龙边上是一句不明意义的文案“My mom buys my underwear（我妈妈给我买了我的内衣）”，当你继续向上拖动时，会发现一只穿着内裤的恐龙，用户就会马上明白上面这句幽默文案的含义。

类似的地方还有下图，在设置页面顶部向下拖动会有一只摇动的小恐龙，在用户顺着他的引导不断下拉，拉到头，会发现这是一个对话的气泡，蓝色的小恐龙说了句“You made it to the top!（你拉到了最顶端！）”，产品“诙谐有趣”的气质便从这些隐秘于界面细节之中的设计传递给了用户。

一个产品能获得用户的青睐不仅要有强烈的需求、优秀的体验，更主要的是让产品与用户之间有情感上的交流，有时对细节的巧妙设计将会极大的加强用户对产品气质的定位，产品不再是一个由代码组成的冷冰冰的应用程序，拉近了与用户的情感距离。

情感化设计帮助用户化解负面的情绪

情感化设计的目标是让产品与用户在情感上产生交流从而产生积极的情绪。这种积极的情绪可以加强用户对产品的认同感甚至还可以提高用户对使用产品困难时的容忍能力。注册登录是让用户很头疼的流程，它的出现让用户不能直接的使用产品，所以在注册和登录的过程中很容易造成用户的流失。巧妙的运用情感化设计可以缓解用户的负面情绪。

在Betterment的注册流程中，在用户输入完出生年月日后会在时间下面显示下次生日的日期，一个小小的关怀马上就让枯燥的注册流程有了惊喜。

在Readme的登陆页面上，当你输入密码时，上面萌萌的猫头鹰会遮住自己的眼睛，在输入密码的过程中给用户传递了安全感。让这个阻挡用户直接体验产品的“墙”变得更有关怀感，用“卖萌”的形象来减少用户在登录时的负面情绪。

Virgin America 的注册流程非常的“拟人化”，在你输入First name以后你会收到“Hey There”的打招呼，当你在把Middle name输入好后会出现“Nice name”的提示，好像有一个人在指示你完成注册步骤一样。亲切友好的文案相比冷冰冰的话语更能得到用户的好感与共鸣，人机的对话变得更加情感化。

Basecamp则运用了一个更拟人的情感化方式在注册之中，当你在表单中输入文字是正确的时候，边上的卡通人物会开心的指着输入内容，当表单中输入错误时，小人的脸将变成一脸惊讶状。

注册和登录对于一个互联网产品来说都是相当繁琐但又缺失不了的部分，这些流程阻碍的用户不能直接使用产品。对用户来说这便是在使用产品时候的“墙”，在这些枯燥的流程中赋予情感化的元素，将大大减少“墙”给用户带来的负面情绪，同时加强用户对产品的认同感，并感受到产品给用户传递的善意与友好。

情感化设计可以帮助产品引导用户的情绪

在产品的一些流程中，使用一些情感化的表现形式能对用户的操作提供鼓励、引导与帮助。用这些情感化设计抓住用户的注意，诱发那些有意识或者无意识的行为。在Turntable.fm中的订阅模式中有一个滑块，你付多少钱决定了猴子欣喜若狂的程度。在涉及到真金白银的操作中，给用户卖个萌也许有奇效。

在Chrome浏览器的Android版中，当你打开了太多的标签卡，标签卡图标上的数字会变成一个笑脸。使用细微的变化友善的对用户的操作进行引导。

在用户将要流失前，给予用户情感化的元素也许能挽留下一部分的用户。当你想取消订阅Spotify时，Spotify会在取消订阅的网页上为用户播放Jackson 5的“Want you back”。

有趣的文案有时比醒目的视觉元素更具有引导用户作用，当你在使用InVision切换到别的标签时，标题的标签会改成“ Don’t forget to read this…”。

人类是地球上最具情感的动物，人类的行为也常常受到情感的驱动。在界面上融入情感化元素，引导用户的情绪，使其更有效的引发用户那些有意识无意思的行为，这种情感化的引导比单纯的使用视觉引导会来的更有效果。

结语

一个优秀的产品应该是有人格魅力且让人愉悦的，这种让人愉悦的积极的情绪便是由产品中那些多多少少的情感化细节来表现出的。那些让用户“啊哈”的细节，都将会成为积极的情绪所传递下去，影响的将可以能千千万万用户的体验与口碑。

搞懂数据可视化的五虎将，做热门信息图！

Sat, 20 Sep 2014 18:45:00 CST

【Martin导读】数据可视化（Data Visualization）技术指的是运用计算机图形学和图像处理技术,将数据换为图形或图像在屏幕上显示出来,并进行交互处理的理论、方法和技术。通过数据可视化技术输出的图象通常具有交互性、多维性、可视性的特点，能清晰有效地传达与沟通信息。

本文从面积&尺寸、颜色、图形、地域空间、概念五个方向阐述了数据可视化的要点和心得，值得认真品读。

因为接下来要做卖家后台数据纵横的改版，对数据可视化这块儿又进行了研究和心得的整理，跟大家分享下数据可视化常用的五种方式，希望能给大家带来思路的拓展。

概念

借助于图形化的手段，清晰、快捷有效的传达与沟通信息。从用户的角度，数据可视化可以让用户快速抓住要点信息，让关键的数据点从人类的眼睛快速通往心灵深处。

数据可视化一般会具备以下几个特点：准确性、创新性和简洁性。

常用五种可视化方法

下面从最常用和实用的维度总结了如下5种数据可视化方法，让我们来一一看一下：

一、面积&尺寸可视化

对同一类图形（例如柱状、圆环和蜘蛛图等）的长度、高度或面积加以区别，来清晰的表达不同指标对应的指标值之间的对比。这种方法会让浏览者对数据及其之间的对比一目了然。制作这类数据可视化图形时，要用数学公式计算，来表达准确的尺度和比例。

a: 天猫的店铺动态评分

天猫店铺动态评分模块右侧的条状图按精确的比例清晰的表达了不同评分用户的占比。从下图中我们第一眼就可以强烈的感知到5分动态评分的用户占绝对的比例。

b: 联邦预算图

如下图，在美国联邦预算剖面图里，用不同高度的货币流清晰的表达了资金的来源去向，及每一项所占金额的比重。

c: 公司黄页-企业能力模型蜘蛛图

如下图，通过蜘蛛图的表现，公司综合实力与同行平均水平的对比便一目了然。

二、颜色可视化

通过颜色的深浅来表达指标值的强弱和大小，是数据可视化设计的常用方法，用户一眼看上去便可整体的看出哪一部分指标的数据值更突出。

a: 点击频次热力图

比如下面这张眼球热力图，通过颜色的差异，我们可以直观的看到用户的关注点。

b: 2013年美国失业率统计

在图中可以看到，通过对美国地图以州为单位的划分，用不同的颜色来代表不同的失业率等级范围，整个的全美失业率状况便尽收眼底了。

c: 美国手机用户城市分布

图中红点是用iPhone的人，绿点是用安卓的人。这两张在微博上看到的图，第一张是美国一个城市的一览，第二张图特写了纽约的市中心，尤其是曼哈顿地区。我们可以看到在市中心和主干道的人用iPhone居多，而用安卓的人都在郊区。这也引起了人们的热议，有的说在美国富人都住郊区别墅，所以富人爱用安卓手机；有的反驳说曼哈顿地区的人几乎都用iPhone，说明富人喜欢用iPhone手机。不管结论如何，都足以说明用户都被这些图所吸引，所以可视化的方式效果真的很直观。

注：科学家统计了2年里30亿条含有地理数据的twitter推文，根据客户端总结出来的数据。

想知道数据可视化可以干嘛吗？热门信息图就是从这里诞生的！《经验分享：一幅热门信息图诞生的前世今生》

三、图形可视化

在我们设计指标及数据时，使用有对应实际含义的图形来结合呈现，会使数据图表更加生动的被展现，更便于用户理解图表要表达的主题。

a: iOS手机及平板分布

如下图所示，当展示使用不同类型的手机和平板用户占比时，直接用总的苹果图形为背景来划分用户比例，让用户第一眼就可以直观的看到这些图是在描述苹果设备的，直观而清晰。

b: 人人网用户的网购调查

下图可以看出，该数据可视化的设计直接采用男性和女性的图形，这样的设计让分类一目了然。再结合了颜色可视化（左面蓝色右面粉色），同时也采用了面积&尺寸可视化，不同的比例用不同长度的条形。这些可视化方法的组合使用，大大加强了数据的可理解性。

四、地域空间可视化

当指标数据要表达的主题跟地域有关联时，我们一般会选择用地图为大背景。这样用户可以直观的了解整体的数据情况，同时也可以根据地理位置快速的定位到某一地区来查看详细数据。

a: 美国最好喝啤酒的产地分布

下图中，通过以美国地图为大背景，清晰的记录了不同州所产啤酒在1987-2007年间在美国啤酒节中获得的奖牌累计总数。再辅以颜色可视化的方法，让用户清晰的看到美国哪些州更盛产好喝的啤酒。

五、概念可视化

通过将抽象的指标数据转换成我们熟悉的容易感知的数据时，用户便更容易理解图形要表达的意义。

a: 厕所贴士

下图是厕所里贴在墙上的节省纸张的环保贴士，用了概念转换的方法，让用户清晰的感受到员工们一年的用纸量之多。如果只是描述擦手纸的量及堆积可达高度，我们还没有什么显性化概念。但当用户看到用纸的堆积高度比世界最高建筑还高、同时需砍伐500多颗树时，想必用户的节省纸张甚至禁用纸张的情怀便油然而生了。所以可见用概念转换的方法是多么的重要和有效。

b: Flickr云存储空间达1TB的可视化描述

Flickr对云存储空间升至1TB确实是让人开心的事情，但相信很多人对这一数量级所代表的含义并不清晰。所以Flickr在宣传这一新的升级产品时，采用了概念可视化的方案。从下图可以看出，用户可以动态的选择照片的大小，之后Flickr会采用动态交互的方式计算和显示出1TB能容纳多少张对应大小的图片。这样一来，用户便有了清晰的概念，知道这1TB是什么量级的容量了。

注意事项

在总结了常见维度的数据可视化方法和范例之后，要再次总体强调下做数据可视化设计时的注意事项，总结了三点如下：

1）设计的方案至少适用于两个层次：一是能够整体展示大的图形轮廓，让用户能够快速的了解图表所要表达的整体概念；之后再以合适的方式对局部的详细数据加以呈现（如鼠标hover展示）。

2）做数据可视化时，上述的五个方法经常是混合用的，尤其是做一些复杂图形和多维度数据的展示时。

3）做出的可视化图表一定要易于理解，在显性化的基础上越美观越好，切忌华而不实。

总结

作为设计师，除了掌握方法来有针对性的设计之外，还要在平时多留心积累素材，同时培养自己的创造力和专业素养，保持一颗好奇心，才能真正的设计出样式精美又实用的数据可视化图表。

文章来源：优设

互联网从业者必备微信公众号：woshipm，如果你已经关注了，证明你已经很牛逼了。

提高Axure设计效率的10条建议

Tue, 01 Jul 2014 23:08:30 CST

Axure 是创建软件原型的快速有力的工具。上手很容易，但是，其中存在一个危险。这款软件是如此的直观以至于很多用户可以在没有接受过任何正式培训的情况下进行使用。他们可能不知道的是他们可能没有以恰当的方式来使用 Axure。

作为一位有经验的用户体验设计师，我很少在画一页的时候第一次就能把它设计正确。大部分时候，我要经历5到10次的反复迭代（iterations）。当你的用户体验设计是用来作为敏捷项目（agile project）的蓝图，那你可能需要在项目周期内跟上整个项目。有时候，这些变化将会影响到十几页或是更多的设计页。正是在这种情况下，Axure 的一些不太明显的特征可以为设计师节省巨大的时间。

我一般在团队中的工作是创建线框图和原型。为此，我会使用Axure 中的「共享项目」功能（在Axure 7中叫做「团队项目」）。能多人实时协同设计一个项目是我最喜欢Axure 的地方，但它的确要求简洁的和结构化的工作方式。毫无疑问，你将会发现别人正在你设计过的设计稿上工作，或者你正在别人的设计稿上工作。我已经把这些使用Axure的准则记在了心里，因为那是我现在工作的工具，而且我相信这些建议也同样适用于其它软件工具。

从长远角度来看，我认为我提出的这10条建议是节约时间的重要方法（crucial techniques）。这种工作方式并不总是在短期内体现它的优势，但是它确实可以比正常情况更加具有灵活性（But it does allow for optimal flexibility further down the line.）。

一、用一个控件就可以完成的事永远不要用两个控件

我看到的最浪费时间的行为是 Axure 的初级和高级用户都在使用不必要的控件。我发现自己仍然在犯这个错误，所以必须不断提醒自己这是第一条准则。每一个你添加到项目中的控件，当在未来需要改变时都要耗费更多的工作时间。所有这些工作在经过十次迭代后会逐渐增加。举个简单的例子，两个在视觉上完全一样的对象怎样能够用不同的方式被建立起来呢？

上面两个例子说明了一种情况，即有些人使用一个文本标签加一个按钮这种分离式的控件。当这个人想对整个对象添加 OnClick 事件的时候，他们有两种选择。第一个方法是在整个部件上添加一个热区，这种方法使得三个控件都需要被维护。第二种方法是为每一个元素添加一个 OnClick 的交互事件，这种方法使得两个交互动作需要被维护。

当部件需要被修改的时候，这两种方式都会花费不必要的时间。一个更为简单的方法是通过在矩形框上添加文字的方式来创建对象。

那么你的文字可以使用「对齐和填充」工具栏进行调整位置。你现在只有一个控件需要维护而且只需要一个交互事件。

二、不要复制对象，而是把对象转成母版

当我发现自己处在一个设计阶段的后期且我们需要改变每一页主导航的时候，我体验了巨大的喜悦。不是因为我喜欢一大堆（a big pile of）的重复性工作，而是因为我所要做的仅仅只是编辑单个母版，然后很快（presto）整个项目就被更新了。

为主导航使用母版似乎是相当平淡无奇的，但是创建一个母版是值得的，当你使用任何操作超过一次的时候。无论何时你发现自己一直在复制和粘贴一组控件，永远记住，创建一个母版可能是更好的选择。

创建了母版后，例如上面的产品展示图 "tile" ，如果你决定改变按钮上的文字为 "Buy now" ，你将只需要编辑一次，然后发现模板中的每个实例都发生了改变。

记住，不要把太大的组合对象变成母版。越是大的组合对象，越是有可能需要在母版的很多地方做出修改。把一些母版和另外一个母版合并起来一般会是更好的办法。当你只需要在一个母版中做些改变的时候这种方法就变得很方便。也就是说一些元素一直被包含而其它一些元素一直要变化，比如下图：

这个基础母板没有包含价格的信息，但是它可以结合另外一个母版来为所有的产品展示图创建新的母版。

三、在创建母版之前要设置好样式（Place Styles）

母版对于创建需要重复利用的元素是很好的，但它们不允许变化。一个母版的每个实例都是一模一样的。这个时候样式来了。假设你有一个按钮需要被复制到多个页面，但在按钮上的标签需要修改，样式可以帮你很容易地完成。每个按钮的属性可以通过样式去设置，你需要做的就是修改文本标签。

按钮的作用往往是增加鼠标悬停等相关事件。在 Axure 中，这些事件往往通过使用动态面板来创建。不同的状态被放置在不同的动态面板和脚本中。然而，使用这种方法你将要进入每个动态面板的状态来修改这个按钮。

一个更快的方式来处理按钮的事件是使用「交互样式」对话框。使用这个功能，仅仅需要为不同的事件状态设置不同的样式（With this feature, simply set different styles for each behavior state），然后只需要复制按钮和设置大小一次。

提示：可以在按钮上使用在 Axure 7中介绍的「自动适应宽度」的功能。如果你在样式中使用了左右填充的功能，你要修改的是仅仅是按钮的文本，然后按钮的大小会自动适应。

四、保持项目的组织性和命名的清晰性

Axure提供了许多选项来保持项目的组织性。你放置在页面上的每个元素都拥有独一无二的命名。页面可以被命名然后组织成一个树状结构。例如母版可以被命名然后在文件夹中排序等等。但是为什么要花费力气来给每个对象一个清晰的命名呢？

1）保持东西的组织性

当你有一个精心制作的网页，然后你想通过动态面板来创建一个交互，你将不得不通过一长列表的元素来找到你想要的那个。你可以使用搜索框——但这只是在你已经考虑周到地为你的项目命了名的情况下。

2）允许团队成员介入

可能像我一样，你在团队中，你的项目总是会发生意料之外的事情。你或你的同事可能会生病或意外地必须工作在另一个项目中。至关重要的地方是这个项目建立得非常清晰以至于他人可以顺利地介入然后接管事务。由其他人添加的交互事件可以完成得特别复杂。

3）可以和第三方分享

一般我参与的项目中，我的线框图至少需要和10位同事分享。有些人会坐在我桌旁，然后我可以指导他们。其他人，我们永远不会见面，然后我不知道他们对线框图的理解情况。理想状态下，一个原型应该是清晰易懂不需要解释的（viewable autonomously）。

我会做如下的事情来完成任务。

1)创建一个登录页面

2)给页面一个独一无二的、可以自我解释的命名

如果页面的命名是清晰的而且说明了每个页面的内容，那么这个原型将更容易理解。人们也会在以后的交流中使用这些名称。举个例子，如果一位平面设计师基于你的设计做出了一份样稿（comp），他们可能像你一样为页面使用相同的命名。如果一个页面的名称不是独一无二的，那么将会出现一个页面有两个不同的名字。

3)创建最常见的流程图

大多数的人不把设计页做成树状结构，他们喜欢根据活动流程图来设计。你可以在 Axure 中创建流程图来反应重要的用户流程，并且链接到相关页面。然后你会提供额外的方式浏览原型。（流程图上的名称是基于那些站点地图的名称。因此，你是否命名清楚就变得很重要了。）

五、养成使用全局辅助线和网格的习惯

Axure 允许用户创建两种辅助线：一种是局部辅助线，只存在于一个页面上，一种是全局辅助线，存在于全部的页面上。辅助线可以使用「创建辅助线」对话框来设置。例如，如果你设置了一个960px 的网格，然后再在不同的页面定位元素就变得容易多了。与此同时，你的团队成员将在一个共享项目中看到这些全局辅助线。

使用网格可以帮助你保持设计的整洁和结构化。我经常设置我的网格是10×10px ，然后以10的倍数的尺寸来创建我的对象。例如，60×20像素的按钮，而不是55×18像素。当你把这些对象放在网格上的时候，一切变得更容易对齐了，而且可以满足你的任何强迫症。当然，允许那些需要不同尺寸的特殊对象偏离网格。

提示：在Axure 7中，你可以为移动端和网页端建立不同的全局辅助线。下面是我喜欢用的一个移动端网格的应用实例：

六、不要忘记导入功能

在大多数项目中，人们制作的元素对其他项目也都是有用的。不需要重新发明轮子，而是重复使用那些在过去工作中使用过的元素。许多基础的东西在整个项目中都要保持一致，例如样式，辅助线和母版。虽然复制粘贴一个项目从这一个 .rp 文件到另一个 .rp 文件是可以的，但并不是所有的信息都会在。当你粘贴一个具有独特风格的按钮，样式并不会跟着一起粘贴过去。

重复使用元素的最好方法就是使用超强的导入功能。这使您可以导入页面和母版，还有样式和辅助线。

提示：创建一个「母的」.rp 文件来导入新的项目，在那儿你可以保持标准的母版。

七、要保留网页的旧版本

我经常发现自己需要回到一个项目的一个旧版本。在过去的日子里，我经常需要在Visio中创建线框图，管理有很多页面的项目是困难的，所以我最终会丢失页面。

在Axure中，追踪旧版本是容易的。仅仅是创建一个命名为 "Bin" 的文件夹（或者在Axure 6.5 或更早的版本中创建一个页面）。

把旧版本的页面放在那儿，以便于当你需要及时返回去的时候能很容易找到。当需要导出的时候，只要选择部分就行了，不需要全选页面。这样的话，你可以向您的客户分享一个简洁的版本，而且旧版本任然可以被直接访问。

八、不要设计不必要的交互动作

Axure 的初始用户通常对Axure 可以很轻松地将交互动作添加到原型中留下深刻印象。一开始的时候，我忍不住对我创建的每一页添加交互动作。然而，在许多情况下，我可以清楚地传达设计而不需要任何交互——仅仅是静态图像。现在，我只会对下面这些问题当中有一个回答"Yes"的时候才增加交互动作。

1. 「我确实要交互动作才能明确无误地表达我的设计吗？」

如果你提供的仅仅是静态图像而没有交互元素的时候，你的设计会被错误理解吗？这可能是一个需要依赖于一定的动画才能被理解的情况。

2. 「从长远角度来看，这个交互设计节省时间吗？」

创建一个元素的交互会比展示不同页面的不同状态更快吗？比如，创建和维护一个交互式网页的标签会比为每个页面创建多个标签更容易。

3. 「我需要说服某些人一些交互元素的概念吗？」

我拿出了一个我认为是问题的最佳的解决方案，但我知道这个方案很难被推进发展，那么我需要别人支持我的想法。我发现做交互原型可以帮助我传播想法。

但是，如果所有这些问题的答案是否定的，那么我宁愿去创建仅仅显示一个交互元素不同状态的多个版本。

九、要使用字体图标（Icon Font）而不是图片

另一个简单的但经常被忽视的保持 Axure 项目可管理性的方式是使图片的数量最小化。在一个原型中想要改变一个图片的颜色，你就不得不经过好几个步骤。你需要打开一个图片编辑器，对图片进行更改，再导出一个新的位图，最后导入您的 Axure 项目。

另一个选择是使用一个字体图标。一，你可以在 Axure 中改变颜色和图标的比例。一个很棒的基本的字体图标资源站是 http://copypastecharacter.com/ ，它的图标在很多平台上都能立即使用。

对于字体图标，你可以在一个按钮上添加一个图形，但是任然需要听从第一条建议。

十、在浏览器或是设备上预览原型

如果设计师得知他们的原型在 Axure 中和在浏览器中看到的不一样时，他们会感到沮丧的。尤其是文字的间距和位置不一样。更糟糕的是，它们在不同的浏览器中显示得也不一样。为避免差错，你需要在浏览器中不断地预览你的原型，如果是移动端原型则在设备上预览。

即使你永远不能消除 Axure 和浏览器之间所有的差异，下面有一些减小差异的方法。

文字环绕

下面是文字如何环绕：

下面显示浏览器如何文本换行：

为了防止文本框从环绕变成到了下一行，请确保你的文本框有足够的冗余空间。最安全的方法就是给文本框可能需要的足够大的空间。因此，如果将来你需要编辑这个文本，你将不需要改变文本框的大小，它将使用文字环绕的方式。

垂直间距

垂直间距可以看出浏览器和 Axure 之间的不同。你可以在 Axure 里微调间距，直到你发现文本在浏览器中看起来很好，但是这是相当努力然后换来了一个不确定的结果。确定文本位置的唯一方法就是要么 break up the copy into chunks ，要么把文字转换成图形。不幸的是，第一个选择打破了第一条建议，然而有时候它是不可避免的。

总结

从短期来看，这些建议很少能显示出效果，但是从长远来看，它有很多好处。也许更重要的是，缩短工作时间能使你工作更快乐。

我希望这些建议像对我一样对你们也是有帮助的。我相信，有人会认为其他的一些规则会更重要，我们很乐意听到它们，所以请在下面的评论框发表您的想法。

如果你还没有 Axure 的话，试试 Axure 7 测试版。一些变化真的有助于保持工作的组织性。

最后一点：这些规则，像任何其他的规则一样，是用来被打破的。不要让它们影响你的工作。聪明的设计师们，我们需要知道何时打破规则。

本文由 @沈晓马原创翻译，转载请注明出处并保留本文链接

原文地址： The Ten Commandments Of Efficient Design In Axure

（关注更多人人都是产品经理观点，参与微信互动（微信搜索“人人都是产品经理”或“woshipm”）

浅谈极简主义设计

Wed, 28 May 2014 11:38:41 CST

说到极简主义设计，相信网页设计师们都不会陌生，本期我们就从这方面说起…

起源

极简主义设计运动始于瑞士，然后被用于多种媒体：图形设计，建筑，音乐，文学，绘画，以及网页设计。

极简的网页设计的最终目标是帮助用户去快速的关注焦点，并尽快实现他们的目的。

概念

在最纯粹的样式中，还原其最基本的东西。

从一个视觉的角度来说，极简主义设计意味着平静和将思想带回本真。

极简绝不是简陋。

为什么要极简？

当我们被眼前多元化的图形和繁杂的颜色搅乱到找不到北的时候，重新回到最原始的画面，也许它像一张白纸，从最本质最原生的状态出发，足以让它生根发芽，甚至开花。

在这个浮躁的城市，周围越来越多的事物被简化包装、摒弃华丽的外衣，以它特有的低调、简约和实用，打动了用户的心。

极简的网页设计

极简的思维是现代网页设计的基础

极简的网站，往往会产生较少的CSS规范，HTML元素，镜像，JavaScript等等。这最终意味着增强了前端Web性能，进而提高了可用性和得到更好的用户体验。

大面积的留白，使图、文、底主次分明，更具有强烈的视觉冲击力。页面设计中整体运用极简设计手段，阅读省力和信息获取快捷，白的透气，可以让用户有很大的空间呼吸并保持欢快的情感进行浏览。

极简网页设计视觉呈现技巧

产品原型视觉转化

确定你绝对需要的内容

在一个列表里面，区分内容的优先级

给予你的列表绘制线框的草图以实验最佳的视觉层级

网页布局

排版布局中的平衡、对齐及对比关系，对页面视觉效果至关重要

如果画面效果头重脚轻，或者左右不均衡，会让用户感觉到压迫感，从而影响到浏览信息的顺畅

生动的排版

基于排版网站设计和极简主义紧密的联系到一起

当设计师乏于用别的方法激发用户，他们往往会利用有趣的排版。

用排版作为唯一的视觉元素你甚至可以走得更远

色彩的应用

色彩丰富会导致作品的多义性，会导致用户与用户之间的理解有差异。

极简设计使用原色，偏向明亮色和无彩色系中的白灰色，满足极简主义追求的简单明了的，将元素精简至原始状态。

另外从人对于世界的认知过程中来看，最早在儿童时期喜欢需要简单的、新鲜的、强烈刺激的色彩，随着年龄的增长，色彩感觉相应趋向于成熟和柔和些，对于色彩的理解差异也就越来越大。极简设计使用原色试图剔除时间因素对于色彩认知程度的影响。

色彩的应用——简约通透的白

白色，因其明度最高，无色相，明亮干净、畅快、朴素，永恒无暇，在自然界象征着极致的纯净与贞洁。

白色优雅、平和而简单，没有强烈的个性，因而网站设计中，白色具有高级，科技的意象，是永远流行的主色调。

轻快的白色可以给人很好的轻快速度感，运用得当可以让其它任何浅颜色及亮颜色呈现出其深度、明度和饱和度的不同，通过对比让其亮色更加明快、专注和舒适。

整洁、大空白的同时让用户保持欢快的情感进行浏览。

色彩的应用——精致高雅的灰

灰色也是极简主义网站设计的首选色彩，这类网站通常会选用浅灰色作为背景色彩，然后选用深灰色作为主要的字体颜色。

灰色与黑白照片、大量留白，还有一小段有活泼手写体的文字，给网站一种高雅的感觉

图形

以理性的几何图形或符号为表现形式，产生一种理性的秩序感，在此同时空间也被压缩至二维化，采用简单平凡的四边形或立方消隐具体形像传达意识的可能性

极简设计使用重复和均等分布的表现手法，减少元素的数量并且不以衬托的手法去突出某一个元素

极简主义是一种理性设计，其布局要求对于数学计算能力有一定要求，如网页设计中有栅格系统，每一个元素的位置都经过严密的计算，杜绝设计的随意性

文字

当图形简化之后，文字变的更为重要。一方面，文字有成为视觉元素可能性。另一方面，各种形式的文字可用于传达信息，比图形更为快捷和精确，如黑色文字为正文，灰色文字为辅助信息，蓝色文字为链接，红色文字为提醒类文字。

极简网页设计的一些思考

极简设计不等于简约设计

极简设计秉承了极简主义的思想，并以造型、色彩、图形和文字等视觉元素体现出来。极简设计与简约设计虽有形式上的相似性，但两者并不等同，简约设计是为了反对过度装饰而产生的，其范围更广，不可混为一谈

极简设计是趋势

极简主义可以是很漂亮的而且将会在未来几年内出现，所以学习它的一些技术会不能相信的有益，无论对你的客户或你自己的项目。

极简设计的悖论

极简设计作品品位高雅，摒弃陈俗和浮华，直至本质，却不适用于大众化设计，因为其形式去除了具有视觉冲击力的元素，这与一些商业目的相违背的。

原文地址：http://ued.focus.cn/wordpress/?p=2963

（关注更多人人都是产品经理观点，参与微信互动（微信搜索“人人都是产品经理”或“woshipm”）

用户界面设计原则

Mon, 09 Jun 2014 10:04:26 CST

“设计绝不是简单的拼合，排列甚至编辑；设计是通过阐明，简化、明确、修饰，使之庄严，有说服性，甚至带一点趣味性，来赋予其价值及意义。”——保罗·兰德（Paul Rand）

1.“明确”应该放在设计的首要位置

对任何界面而言，“明确”是首要的也是最重要的一点。人们必须能够辨别出它是什么，才能有效地使用你设计出来的界面。设计师们在设计的时候，要去关心人们为何会使用这个应用，去了解什么样的界面是能帮助他们与之互动的，去预测人们在使用时的行为并能够成功地反馈给他们。这样做了之后，界面中再出现的需要推理的地方以及延时反应都是可以被容忍的，但是绝对不能出现让用户困惑的地方。明确的界面能够给使用者进一步操作的信心。一个应用就算它有一百张页面，但是每一页都是清晰明确的，它也远胜于只有一页却不知所云的应用。

2.界面是为了交互而存在

界面的存在是为了让人和我们的世界产生互动。它可以帮助人们厘清，明白，使用，展示相互之间的关系，他能够把我们聚集在一起可以将我们隔开，实现我们的价值并为我们服务。界面设计不是艺术设计。界面设计也不是用来标榜设计师的个人。界面的功用和效果是可以被测量的。但是它们不是功利性的。优秀的界面不但能够让我们做事有效率，还能够激发、唤起和加强我们与这个世界的联系。

3.不惜一切代价吸引用户注意

我们生活在一个容易被打扰的世界。我们很难在一个不被干扰的环境中静下心来阅读。用户注意力是非常宝贵的。所以，不要在应用的周围丢一些容易令人分心的东西……

要把设计这个画面最初的目的时刻放在首位。如果用户正在阅读，那先让他们专心的读完之后再弹出广告（如果一定要放广告的话）。尊重用户的注意力，不仅仅会让用户感到高兴，你本身的设计也会收获好结果。如果在界面设计中，用户使用是首要目标的话，那么尊重用户的注意力是先决条件。要不惜一切代价保护它。

4.让用户掌控一切

人们会在自己能掌控的环境中感觉最舒心，最放松。设计草率的软件应用不但剥夺了这种舒适性，还会迫使人们面对毫无预期的互动，困惑的流程和意外的结果。通过定期的梳理系统状态，描述因果关系（如果你这个做了，就会被体现出来），并且在每一步操作都给出提示，让用户感觉每一步操作都在他的掌控中。不要担心说，这不是“显而易见”的吗？因为世界上从来没有显而易见的事情。

5.直观操作是最好的

好的界面是无意识的，就像我们在实际生活中直接操作的感觉一样。这并不是那么容易实现的，并且随着元素和资讯的不断增加，这就变得更难，所以我们设计界面来帮助我们去和它们互动。要想在画面上添加一个不必要的东西是非常简单，例如，加个华丽的按钮，镶边，图形，选项，偏好，窗口，附件和其它一些冗余的东西。以至于我们一头扎进处理界面元素细节的怪圈中而忽视了最重要的事情。取而代之的，你应该抓住直观操作这个最初的目标……界面设计要尽可能的简洁，更多的可识别的惯用自然手势。理想情况下，界面会变得非常细微，用户在会有直观操作的感觉。

6.一个页面一个主要操作

我们设计的每一个画面，都应给用户提供有实际意义的单一操作。这一点，令界面更快上手、易于操作，如果有需要的话，新增或扩充也更简易。如果一个画面上有两个或两个以上的主要操作，瞬间就会让用户感到困惑。就像写文章要有单一的以及强有力的论点一样，界面设计中的单个画面，也都应该有单一且明确的操作，这是它存在的理由。

7.让次要操作在次要位置

画面在包含一个主要动作的同时，可以有多个次要动作，但尽量不要让它们喧宾夺主！就像你写一篇文章的目的，是为了让人可以阅读可以了解，而不是为了人们能够把它转载在社交网络上……让次要得动作放在次要的位置，削减它们的视觉冲击力，或是在主要动作完成后再显示它们。

8.提供自然而然的下一步操作

很少有交互是故意被放在最后的，所以要为用户精心设计交互的下一步操作。你要预期用户下一步的交互是怎样的，并且通过设计将其实现。就像我们的日常谈话，要为深入交谈开一个好头。当用户已经完成要做的操作后，别让它们不知所措的停留在那……提供自然而然的下一步，帮助他们完成操作。

9.界面外观遵循用户行为

人总是对符合期望的行为最感舒适。当某人或某件事的行为始终按照我们所期望的那样去进行时，我们会感觉到和他们之间的关系不错。因此，设计出来的元素，看起来，应该像它们本身特征一样。在具体操作中，这意味着，用户只要看到这个界面元素，就应该能猜测出这个元素是做什么的。如果看起来是个按钮，它就应该有按钮的功能，不要在基本的交互问题上耍小聪明……把你的创造力留到更高层次的需求上吧。

10.前后一致的重要性

遵循上一规则，画面中，视觉元素的外观不应该是一样的，除非他们的功能相近。如果是功能相同或相近的元素，那么它们外观就应该是类似的，反之，如果元素各自的功能不同，那么它们的外观也应该不同。为了保持一致性，新手设计师通常在会把相同的视觉处理 (重用代码) 方式用在，应该用不同的视觉处理方式的元素上。

11.强烈的视觉层次会让效果更好

强烈的视觉层次会让画面有清晰的浏览次序。也就是说，当用户每次都用相同的顺序浏览同样的东西，微小的视觉层次令使用者不知道哪里才是需要注意的重点，最后只会让用户感到困惑和混乱。在不断变化的设计环境中，保持强烈的视觉层次是很困难的，因为所有元素视觉上的重量是相对的：当所有文字都是粗体，那就没有所谓的"粗体"了。如果要在画面中添加一个视觉强烈的元素时，设计者应该要重新调整页面上所有元素的重量分配，来达到强烈视觉层次的效果。大多数人都不会注意到视觉重量这一点，但它其实是强化（弱化）设计的最简单的方法。

12.巧妙的布局减轻用户认知负担

正如约翰前田（John Maeda）在他《Simplicity》书中所说的，恰当地编排画面上的元素能够以少见多，帮助他人更加快速简单地理解你设计的界面，因为你已经用你的设计清楚的说明了她们彼此之间的关系。用方位和方向上的编排可以自然地将相同的元素联系在一起。通过对内容的巧妙编排，可以减轻用户的认知负担，他们不再需要花时间去思考元素之间的关联，因为你已经做好了。不要迫使用户去思考……用你的设计直接呈现给他们看。

13.重点不要总是用颜色来强调

物体的色彩会随光线改变而改变。艳阳高照下与夕阳西下时，同一棵树，也会呈现不同的景象。在自然世界中，色彩很容易受环境影响而改变，所以在设计时，色彩不应该占很大的比重。作为辅助，我们可以用高亮的颜色，吸引注意力，但这不是区别这些的唯一方法。在长篇阅读或是长时间对着电脑屏幕的情况下，可以使用柔和的背景，降低亮度，当然也可用活泼亮丽的色彩当背景，但是要确保适合你的读者。

14.逐步说明

只在画面中显示必要的信息。如果用户需要作出决定，只要展现足够的信息供其选择，然后他们会到下一页去寻找更多的细节。避免一次呈现或解释全部的信息，如果可以的话，将选择放在后面的画面展示。这会使你的界面交互更加清晰。

15.内置帮助

在理想的界面设计中，「帮助」选项是没有必要，因为界面操作是有引导性的。「帮助」的下一步，实际上是，内嵌在上下文中的“帮助”，只有在用户确实需要的时候才显示，平常应该是隐藏的状态。让用户自己去寻求帮助，。重要的是你要保证用户可以顺畅的使用你的界面。

16.重要时刻：初始状态

第一次使用界面的体验是非常重要的，而这却常常被设计师忽略。为了让用户更快的上手，最好在设计的时候保持初始状态，也就是还没开始使用过的状态。这个状态不是一张空白的画布……它应该要提供一个方向和指引，令用户迅速进入状况。在初始状态下的互动过程中可能会存在一些摩擦，一旦用户了解了规则，那将会有很高的机会获得成功。

17.好的设计是隐形的

好的设计有一个奇怪的特性，它通常是会被用户忽略的。其中的一个原因是，一这个设计非常的成功，以至于用户完全专注在他想要达到的目标，而不是这个界面……当用户顺利的完成目的，他们会感到很满意，并不需要反映任何问题。作为一名设计师，这样会很困难……因为我们很少收到正面的回应，我们很少知道哪些设计是好的。但是优秀的设计师是满足于设计出好用的界面……并且他们知道满意的使用者通常是沉默的。

18.从其他设计领域下手

视觉，平面设计，排版，文案，信息架构和视觉设计……所有这些学科都是界面设计的一部分。他们都是可以被涉猎和研究的。不要企图跟他们划分界线，或看不起其他的领域：从学到学到很多知识可以帮助你的工作推动你成长，还可以从看似无关的学科学起，接触你不熟悉的领域……我们能从出版、编程、书本装订、滑板、消防，空手道中学到哪些知识呢？

19.界面的存在是为了被使用

在大多数设计领域，有用户使用就是界面设计的成功。就像是一个漂亮椅子，虽然漂亮，但坐起来不舒服，用户就不会选择它，它就是一个失败的设计。因此界面的存在就为了尽可能多的创造好用的环境让用户使用，就像你设计了一个好用的工艺品。设计师设计作品如果仅仅是拿来满足自己的虚荣心，那是远远不够的：它必须要被使用！

source:UI中国

（关注更多人人都是产品经理观点，参与微信互动（微信搜索“人人都是产品经理”或“woshipm”）

手绘移动端极致体验

Fri, 17 Jan 2014 09:58:40 CST

(Lennart Hennigs 著 Ellazou & Charrywang译 Crispinzhu校正查看原文转载请注明出处)

移动端用户体验设计正日趋成熟。衡量这一点的方法之一就是看工具。原型工具可以让我们创建线框图以及点击事件，比如Balsamiq、Axure以及Fireworks，帮助我们诠释目标用户体验。跨浏览器的框架工具如PhoneGap、Zurb Foundation以及jQuery Mobile可以帮助我们用互联网本地化语言来创建原型：HTML、CSS以及JavaScript。

为什么？举个草图的案例

与以往几乎没有时间来设计极致的体验来比，我们似乎处于一个相对更好的处境。然而，这些工具也伴随着隐藏成本：它们引导我们跳过了创造一个良好设计的产品必经的关键步骤——也就是花时间去理解我们所面对的问题。
这也就是为什么我会建议在打开你钟爱的工具之前，先手绘着理解问题并想出概念。
现在， 你可能想的是如下问题：
“我们的截止时间很紧迫，根本没有时间再去涂鸦。我们必须马上开始。”
“在XX工具里设计是目前为止比较快的方式，我必须很快能看到结果。”
“我们必须把结果给我们的客户或合作伙伴或同事看。我们不能给他们看手绘
的线稿。”
“不好意思，我真的不会画画。”

我不仅听别人几次这样反对，我对自己也这么说过。

定义问题和解决方案

手绘可以让我们一边探索问题一边定义解决方案。它可以结构化我们目前对问题的理解，同时帮助我们找到可能的解决方案。
当我们手绘出自己的想法时，新的主意也会萌生。 模糊和缺乏细节的草图会培育出新的思路。在这里，模糊是件好事，因为我们会自动尝试填补脑中的空白。这也正是草图富有“创造性“的原因：它捕捉到我们已经成型的想法，并迸发出新的火花。正如Bill Buxton在《Sketching User Experiences》中提到的：
“从草图上学习到的内容很大程度上是基于其表现的模糊性。也就是说，他们并不指定所有事情，而是鼓励创造者们不自觉的融入各种不同的解释。”

通过手绘不同的解决方案，我们不用立刻实现其中一种，就可以探索他们的可行性。这为我们提供了新的见解，也提出了新的问题。手绘本质上就是一个头脑风暴的锻炼。

草图的“成本”

把我们脑袋里的东西倒出来最快的方式就是拿起一只笔和一张纸迅速的画出来。在我们钟爱的原型工具里来做这件事情则需要花费太多的时间：我们需要先创建一个项目，使用合适的库，将一些小矩形放在画布上，画一些小箭头来连接这些矩形，把所有的元件都调整一下让它们看上去更好看一些——30分钟过去了。
如果我们不喜欢纸上画的东西，可以将它扔进垃圾桶然后重新开始。然而用原型工具的话，扔掉一些东西就比较困难了，因为我们花费了时间和努力去创建它——就算那个想法不是最好的，重新开始也更困难。反过来说，纸上手绘的内容则成本低廉，实现迅速。

捕捉和评估设想最快的方式就是将它勾画出来。

把草图作为沟通工具

不过俗话说，一图胜千言。草图可以让我们与合作者以及项目关注人们一块探讨对项目当前的理解。我们可以使用很多不同的表现方式去诠释项目不同的方面（下一个章节中我们会介绍最常用的一种方式）。在《餐巾纸的背后》一书中，Dan Roam提到：
“图片可以表示很复杂的概念，概括大量信息，并以一种我们容易看容易理解的方式呈现，它们在澄清和解决各种问题上都是有用的。”

我们的小伙伴可以直接指出我们想法上的鸿沟，共同讨论可能的解决方案和替代方案。他们可以很好的理解我们的草图，并且在想法的细节上给出一些反馈。 向其他人展示我们的想法也会让我们反思自己的想法。借此展示想法，我们会看到错误的地方以及找到更好的替代方案。

把草图作为合作工具

草图作为一种有力的工具可以让项目关注人们在设计过程中尽早参与进来。在定义的过程中，以下鸡生蛋的问题非常典型：项目关注人们在看到一些可视化的解决方案之前，是没法制定一套完整的需求的，但是我们设计师在没确定需求稳定完善之前，是不愿意开工去实施解决方案的——我们想要去避免不必要的反复修订，因为这会导致额外的工作。
摆脱这种困境的一种方法是在协作式工作坊里来手绘可能的解决方案，比如这一期设计工作室（参看Will Evans的文章“ Introduction to Design Studio Methodology“）。我们可以带领项目关注人们一步步的理解我们的概念（和其他备案），向他们解释他们的需求对设计的影响。
草图的 入门门槛也很低，非设计师也可以参与。（到底是否通过手绘的方式与项目关注人讨论，即取决于个人偏好，也存在许多争议。你需要自己做决定。）
由于草稿是粗略不完整的，给出反馈也就更加容易。一些人会隐忍不发，直到看到一个看上去完成度很好的页面，因为他们认为所有的工作必须要有一定的深入才行。高保真的视觉效果也会分散大家的注意力——大家会更倾向于讨论视觉效果或微妙细节，而不是聚焦在想法概念上。草图会让他们聚焦在核心概念上。
你唯一需要克服的就是不愿意将未经打磨的作品展示给他人的心理障碍。

草图不是绘画

一个常见的误区就是你的草图必须要画的很漂亮。但交互设计可不是上艺术课。 你的草图不需要看上去很漂亮；它们只需要表达出你的想法就可以。它们应该是引发讨论和催生想法的；它们并不是挂在墙上的艺术品。只要你会画方框，箭头，圆圈和简笔画，你就可以画草图。正如Joshua Brewer在“ Sketch, Sketch, Sketch”一文中提到：
“草图不是最终目标。最终目标是在手绘过程中你学到了什么。所以即使你不会手绘也不用担心。”

学习如何手绘不是本文的内容，但是可以从以下的宣讲、文章以及书目当中学习到一些基础：

“ The ‘Art’ of Sketching Interfaces”（PPT文档），作者Jason Mesut和Sam Smith
“ Sketching 101” （PPT文档），作者Jackson Fox
“ The Messy Art of UX Sketching”，作者Peiter Buick
《Sketching User Experiences: The Workbook》，作者Saul Greenberg，Sheelagh Carpendale，Nicolai Marquardt，Bill Buxton（Morgan Kaufman出版：2011）

如何手绘

现在，但愿我已经说服你认同手绘应该是你工作流程中的一部分了。让我们聊一聊在移动项目中手绘什么吧。

发散式手绘

一开始，你需要为你的移动应用或网站收集不同的创意。开始绘制出针对一个关键页面或其中一部分的各种版本。目标有两个：获取大量不同的想法，同时加以探索和评价。想法越多，后期的选择就越多。这个阶段通常被称为“发散式手绘”。
这个阶段的手绘有一种有效的多页模版的工具。它提供了一页以内绘制6个不同版本方案的空间，并且它留出了指引描述的空间。不同创意一起呈现，为后续的比较和讨论提供便捷。
有很多在线模版（我最常使用 Erik Loehfelm的模板）。选一个你喜欢的模板。

各种全局导航的变化方案线框稿

上面的截图展示了关于 一个App主菜单六个不同设计方案（顺带说一句，它生动地证明了我的草图并不漂亮）。我并不总能想出6个不同版本（我喜欢告诉自己我是一个追求结构的人），不过我会针对一个单页面努力创造至少3种变化方案。因为这是一场头脑风暴，并且你会在后续的讨论中需要多种选择的可能性。在这里数量即朋友。
如果你碰巧才思枯竭，浏览一些手机UI图册去激发新思路（例如 Inspired UI, Pttrns, Lovely UI 和 UI Parade）。它们演示了按主题或特性分组的解决方案（例如主菜单，聊天窗口）。汇集起你喜欢的草图，组合成你自己的创意。
养成对每张草图命名的习惯。这样更容易标注出方案之间的差别，并便于后续引用。我会增加说明和标注去解释草图以及它们后面贯穿的思路（比如优点、缺点、与其他方案之间的抉择、问题、新特性，等等）。打标签和登记日期同样是不错的习惯。

收敛式手绘

一旦你对一个界面绘制了多个版本的草稿时，就可以选择最佳解决方案了。不幸的是，单一的草图很难验证所有界面。大多数情况下，你需要糅合几个创意或创意中的不同方面形成优胜概念。为了达到这个目的，你需要通过绘制更详尽的草图来深入探究。利用空白区域做标注。 草草记下全部问题、新想法、要点或不明之处，以及留待讨论的事项。这些都将帮助他人更好的理解你的思路。这项工作通常被称为“收敛式手绘”。
更多关于发散式手绘和收敛式手绘的信息，请查看 Leah Buley在2010年失败者大会（FailCon大会）的演说：“ Good Design Faster”，和Brandon Shauer的文章“ Sketchboards: Discover Better + Faster UX Solutions”。

创建UI流程

在归结几个关键页面的创意后，下一步就要探索它们如何配合使用了。为此，创建一些UI流程（也就是一系列的关键页面）展示一个用户将如何通过你的解决方案完成一则任务。UI流程强调了使用什么界面元素（例如点击哪个按钮或使用何种手势），系统如何反馈（例如系统通过一个动画、转场、弹出框或新页面做出反馈）。它们同样展示关键界面的不同状态（例如，最初的空白然后填入内容）。
你可以视觉化呈现一个UI流程中的不同结果（例如搜索有结果页和搜索无结果页）。你的流程最好不再仅仅是单线。不同的分支流程将展示不同的结果。不过要尽量限制单个UI流程中分支的数量。每增加一个分支都会提升复杂度，让你的流程难以理解，也令它们很难被解释清楚。

UI流程视觉化呈现了用户如何从A到B的过程。

你不需要绘出所有的用例，选择重要且被使用最多的用例。帕累托原则是个很好的标准：20%的功能会在80%的时间里被使用到。
我通常从一则重要用例开始绘制并最终解决它。我会强调出各个界面之间的交互，通常用箭头连接彼此。我会解释每一步骤并标记重要页面。同样，我会宽泛地做上注释。
关于如何激发手机界面和UI流程绘制创意，请查看Gisele Muller的文章“ Inspiring UI Wireframe Sketches”； MOObileFrames 一个提供手机界面线框图的博客； Wireframes，Jakub Linowski的个人站点。你也可以将Jakub的 Interactive Sketching Notation（PDF文档）运用到你的UI流程中。

操作步骤

为了给你更多的上下文环境，并演示上文提及的三种方式之间的关系，现在提供一个典型手绘的步骤分解：

列出已有的信息和确立的目标
绘制第一组草图（例如一个关键界面的各种方案或一个初始UI流程）
自我复查草图
每个方案的优点和缺点是什么？
UI组件和数据是否保持一致？（就是说同一任务中是否使用了相同的组件）
数据展示方式是否相同？
交互选项是否明确？
征询他人的意见。从同事开始再到潜在用户。
他们的第一印象是什么？
他们最喜欢哪个？为什么？
最不喜欢哪个？为什么？
草图中哪些信息他们不清楚？
他们提了什么改进意见？为什么？
重审各个概念方案
是否可以合并各个概念方案的优点于一体？
草图能进一步清理吗？
步骤能进一步缩减吗？
依据最初的反馈再次复查
是否引入新的问题？
你可以从中得到什么启发？

你是否发现，这里有很多的“为什么”。这是因为 手绘是为了在提出解决方案的同时增进对问题的理解。在手绘后写下绘制过程中产生的的问题。它们会指引你走向正确的方向。

超越手绘

在创建关键页面和核心用例的草图后，你会希望在真实的手机上试验你的概念了。像 Pop和 Protosketch实现了导入草图的照片，将它们转变成原型。这种超快的低保真方法可以对交互方案找到一些感觉。这两款应用都允许你定义可点击热区和页面的切换，这令得交互原型更真实。
此外，可以选择导入页面到像Axure这类更高级的软件中生成原型。
无论你选择什么工具， 你的目标是在真实的手机上用很小的代价快速测试原型。

便携小贴士

手绘可以帮助你更好的理解问题并可视化潜在的解决方案。这是一种快速且省钱的头脑风暴方式，同时它也在锁定方案前测试很多的概念。手绘加速了概念创想和反复阶段，在方案变更较容易的阶段实现了早期问题反馈。
在你下次手绘环节中，请牢记以下原则。它们能帮助你保持正确：

偷懒
别尝试去再造一个轮子。手绘时利用现成的模版。
激发灵感
浏览设计范式库和手机UI图库，查看线框图示例。挑选你喜欢的，糅合你自己的想法，创造一些新方案。
适可而止
你的手绘要能传达你的想法。不要迷失在（不重要的）细节中。
帕累托怎么用？
你解决方案中只有小部分特性将被最频繁地使用。聚焦在它们上面。想清楚哪20%的方案会在80%的时间里被用到？
保持统一性
用已有的手绘标记或创建一种你自己的方式。这样是的你的手绘更可靠。同事能较好地理解你的风格，花更少的时间浏览完手绘并给予反馈。
详尽注释
手绘过程中，会涌现各种新命题、想法、问题。记下它们，否则，你就忘了。
开放心态
将你的手绘公之于众。把它们钉在墙上，并勤于向他人演示方案并获取反馈。
陷入怀疑时，继续手绘
当你不能确信某个方案时，重新开始衍化方案。列举出它们的利弊并从反馈中想清楚什么是最佳方案。

手绘愉快！

作者：腾讯mxd

微信号：woshipm，干货天天推荐，欢迎关注

Web设计中的视觉层次

Thu, 16 Jan 2014 14:31:04 CST

作者：七武海

原文链接： http://www.zcool.com.cn/article/ZNTg3MDg=.html

视觉层次是什么？

领导和客户经常说的一个点就是，xxx，这个设计总感觉少了点什么东西，太”平”了，没有层次呀，你再改改吧~~你脑中可能一片雾水，层次听过也知道，但怎么做呢？

那什么是视觉层次呢？其实视觉层次没有明确的官方定义，但我们可以理解为通过点、线、面、色彩、图形等造型元素来表达平面构成与空间构成的方式，合理的点、线、面、色彩、图形的排布会让平面和空间更加合理，即有视觉层次。视觉层次通过很多方面来体现，比如颜色、元素的大小和对比等，由于本人是做游戏视觉的，以下会多用游戏网站来给大家讲解如何在做网站时把视觉层次做好。但设计是相通的，所以时于其他行业的设计也是适用的。

画面元素的层次

在做设计的时候，如果你只是把素材啪啪的放上去，而不去处理元素之间的层次关系。比如元素之间的光源和透视，那么做出来的东西肯定会显得平乱花，如下图：

大家可能会有疑问，该放的元素我也已经放了呀，怎么还是会显得没有层次呢？咱们可以从-些好的摄影作品中去学习他们的处理元素的手法。视觉层次和摄影中透观其实是-个道理，这会让你受益匪浅。

上图这些都是我对照片的-些解析，大家从图中可以看出，摄影师处理视觉层次的-些手法。一般摄影照片中都会存在前中远三景，并通对这三者的不同处理方法来实现视觉层次。如果把前景作为视觉中心（如图一图二），那么前景一定最大最清晰明亮可见的，远景一定是最模糊视觉上最弱的。如果把中景作为视觉中心点（如图三），那么前景和远景在视觉上是最弱的。这样处理的话，整个照片就显得很有层次。看着也自然。因为人眼也是这样看事物的。至于如何加强或弱化，无非就是大小、明暗、清晰度。说了这么多，那么这些跟咱们的设计有毛关系呢，这些如何用到咱们的网页设计中呢？让我们看看优秀的设计师们是如何处理的吧~

上面的这个网页是EA公司旗下一款MVP棒球游戏的展示站，做的很棒，这是其中-张。大家可以看到，这个网站层次鲜明，那么他们又是如何做的呢’下面咱们来解析下他们的处理手法吧。

可以很清晰的从网页中看出网页分为前、中、远三景。以前景为视觉中心点。并通过不同层次的元素进行不同的处理方法，如图所示，前景做了锐化、中景和远景都做模糊处理。

跟上图比这个的处理方法有些不同，是以中景为视觉中心的。所以中景的元素是最清晰可见的，前景和远景都通i过模糊等弱化处理。这种处理手法会显得更加有层次感。

颜色的层次

-个优秀的网页，你光做好元素的层次是远远不够的，颜色也是至最重要，关于如何配色，网上的教程和文章已经
一大堆，这里我就不详细说了，主要说怎么通过用色来表现层次感。

大家都知道做设计时会有主色和辅色，对比色。但不知道为什么做出来的东西不是单调就是花哨。那么这可能是色彩的层次关系没处理好。色彩的层次是指当我把作品去色后，作品中有没有表现出从黑到灰到白的存在比例。如果一个作品的黑色比较多那么整体的效果就会显得很沉重，而如果白色很多的话那么整体效果就会显得很苍白，如果灰色很多，白色与黑色都少，那么整个版面就显得很脏了！

通过上图，大家可以看到，就算图片去色后，只剩下黑灰白，图片也不显得单调也不平，是因为设计师在颜色的明暗度和纯度上做了调整，所以就算是去色后看着也很有层次。

颜色的之间的比例也会影响视觉层次，如下图，主色是蓝色、黑色，辅色是白色和黄色，大家可以看到这几种颜色的比例并不是均等的，如果所有的地方都只用-种颜色，那这个网页肯定又掉入色彩单调的坑中了，如果各种颜色太多，每种颜色占的比例都很大，那么肯定掉入了颜色花哨的坑中了，所以颜色的比例也一定要把握好。-般都是重点的地方想办法突出，作为视觉中心点，弱化不重要的，加强对比，这样层次就能出来，如下图：

大家可以看到重要的信息是在整个网页中是突出的。通过跟明暗、大小对比，以突出视觉层次，从而实现视觉层次，这样做出的网页看着也不单调也不花哨，方便浏览者找寻重要信息。

总结

视觉层次是小伙伴们值得去好好研究的一块地方，单视觉层次只是做设计的一部分，除此之外还有字体排版、素材的选择等等都需要去好好钻研。讲的不是特别详细，但希望小伙伴们都能知道讲的这些在做设计的时候是需要注意的，是需要去思考的。

七月 3, 2013 -- 积累，如此简单 (5)
七月 1, 2013 -- 用户界面的扁平化设计？小心为妙！ (4)
五月 16, 2013 -- 素食公司网站设计思路 (3)
七月 24, 2013 -- PS拼图场景天空之城 (1)
七月 6, 2011 -- 网页设计标记工具——马克鳗 (9)

扁平和简约来袭

Wed, 12 Feb 2014 10:30:54 CST

　　译者注：本文作者 Adrian Taylor 是一位交互创意总监并且是 Pushstart Creative的创办人,专注于多种研究，如物理聚合、人机交互技术和品牌体验等。尽管他目前工作的重点是产品研发、战略发展、UX等，但是对pixels却一往情深。想了解更多可以去 designtaylor.com或者上 Twitter查找 Adrian Taylor。

　　原文地址： http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/

　　在过去几年里，软件和APP的界面设计风格发生了迅速变化，由3D、拟物发展到扁平、简约。尽管这一趋势普遍存在，我们还是思考下是如何发展至此的，以及它对整个界面设计领域有何影响。另外，我会分享扁平界面设计的一些技巧和注意问题。

Windows Phone 8 和 Apple’s iOS 7的用户界面

发生了什么？

　　那么，为什么群体意识从喜爱带纹理、有透视和阴影的设计转变喜爱扁平色彩和极简图形的设计呢？当然导致这一转变有很多因素，但是有一些因素更为突出。

信息过载

　　随着世界联系越来越紧密，我们不断地接受大量信息，一些信息是重要的、相关的，但大部分不是。我们不断地评估其价值，过滤无用信息，或创建新的内容，所有这些都使我们精疲力竭。还有，大部分内容消费已转移到小屏幕设备，更是加剧了超负荷现象。这样我们就很容易就淹没在信息中，砍掉用户界面（UI）的繁杂元素才是视觉设计的王道。

摆脱混乱: Geckoboard的设计使关键数据被一目了然呈现，并易于理解

简约就是金科玉律

　　同样有个趋势就是，颠覆性的网页应用和服务正提供高度专用化的工具，只设计少数功能。虽然传统软件开发员倾向于为产品加载过多功能，以期获得高价定位；但目前变化趋势专注于微应用，偏爱功能简洁。简单的应用意味着有简单的界面。

美观且精致：由Oak.设计的 Blue 天气应用程序

又一次，以内容核心

　　新设备和新技术涌入市场时，常常会出现这样的情况，我们热衷于思考于它们能做什么，我们又怎样才能提高交互性。但关注界面设计这一狂热之后又 回归专注于内容。媒体资源的消费，不论文字、音乐还是视频、音视频，等我们设备上最常用的活动，在你乐享其中时，肯定不希望被无关的界面元素打扰。

技术水平

　　随着智能手机和平板电脑已渗透到千家万户，显性操作正在逐渐减少。过去，如果弹窗没有从屏幕跳出来，我们曾担心用户会错过操作，而现在，我们更愿意让用户去探索这种细微的交互体验。鉴于此，很多互联网产品已经支持没有任何视觉引导的触碰指令。

Fitbit的仪表盘的视觉设计清爽,、胆大,和亲和力

技术的影响

　　大部分软件受限于运行平台。屏幕尺寸和像素密度也受限于硬件设备条件。一个简约的界面需要十分有限的设计元素，这意味着每一个元素都要有所发挥。排版布局和字体粗细在很大程度上决定了扁平设计的美观和易用性。

　　如果你的目标设备不能处理好这方面的细微差别，你就不太幸运了。随着屏幕尺寸和像素密度不断增加，更细、更小的样式也能呈现最佳的清晰度。当然，对 @font-face属性的支持，提高了对文字间距的集中处理，也增加了极简排版的吸引力。

Wallmob的市场数据监控应用：从任何一个有一个浏览器的设备上都可以检测到数据

响应式设计

　　随着各种尺寸联网设备的普及，交互界面变得更需要强调适配性，响应式设计也就应运而生。虽然响应式设计并不要求特定风格，但扁平的交互界面显然比其它样式要更容易处理。简约设计的另一种优势就是，能见降低页面重量和缩短加载时间。

无重量的响应设计: OnSite. ( 大尺寸展示)

勇于实践

　　好了，不唠叨理论了。让我们看看实践上的操作吧。设计一个有效的简约风格很具有挑战的。当你抛弃界面上那些花哨的装饰元素（下拉阴影，透视关系，纹理材质等），立马就会意识到剩余的元素关键且重要。以下几个技巧在设计中普遍很实用，特别是针对扁平UI设计：

开始设计之前

　　任何项目开始第一步，就是确保你选对风格。深入设计之前，确保风格符合目标用户的感知需求，适应目标平台、承载设备和应用类型。如果该方案风格与项目不匹配，那么接下来的导向则毫无意义。

流程

　　设计流程非常重要，无论选择何种样式！简约设计时记住以下几点：

　　1. 设计minimal界面时，我会从pre-pc时代寻求灵感，那个时候的艺术大师，用少量的资源做了大量的设计。例如：Josef Müller-Brockmann 和Wim Crouwel，重温这些大师的作品是很好的学习机会。但是有时我也会参考minimal画家的作品，如Ellsworth Kelly，建筑师，如Mies van der Rohe 和工业设计师，如Dieter Rams。

　　2. 放下工作，休息一下很有帮助。扁平和简约设计的一切均关乎到细节的差异。因此小憩片刻后再回到工作，带着全新的眼光工作，比长时间冥思苦想更有效。

　　3. 并排比较各个版式 同样有帮助。哪怕花20分钟前将一个线条下移各5个像素分别保存，对比两个版式就能很快分清孰好孰坏。

　　4. 由于实物展示的相对比例至关重要，所以要及早在不同的目标设备上测试。

　　5. 整个设计过程中不断问自己“真的需要吗？” 。支撑项目时候，找一些讨巧的办法，例如，添加一些有趣的元素、样式会这样会很容易也会很吸引人，但必须始终注意剔除不必要的元素，不断精简。甩掉你费尽心血的部分总是难以割舍，但修改过程必须挑剔。

Global Closet: 由 The Workshop为美国地理杂志教育板块设计的一个互动游戏

网格

网格在界面设计中扮演很重要的角色，这里也不例外。如果你想通过建立视觉规范使整个设计次序化、直观化，那么网格就很有帮助。

　　 1. 网格不仅仅能展现视觉次序。还可以使用网格划分内容和功能组。你可以不用总是使用直线或框划分对象组，其实简单的对齐和间距设置也能帮助用户理解界面结构。

　　 2. 试着打破网格的结构，突出重要的元素来吸引用户眼球。告别虚假的3D元素装饰后，实物比例和定位等基本布局原则就是展现视觉次序的关键。

　　 3. 尝试一下你不习惯的更密集的网格设计。当你大量减少视觉配色这些元素时，又会发现这种设计方式可以承载更复杂的结构，也不显得凌乱。如果你有想表达的额外的内容信息你可以单独放置。

Rossul 设计的 Live School iPad app

颜色

当然，颜色在视觉设计中角色很重要，对minimal界面更为关键。

　　1. 考虑更宽泛的配色方案。如果你们像我一样，那么就会明白相近的配色往往使界面功能性更强。而以强烈的宽泛的配色来设计就更容易了。现在是你发挥的机会，只用少量的元素，扩展配色方案会让你感觉很好。

　　 2. 设置配色方案时，测试所选色调要在很宽的色谱内进行，才可保证用明暗对比来表现画面。

　　 3.如果你想试试同系配色和鲜明对比。要及早测试配色，以确保微妙变化和高对比度元素都能有足够的选择空间。

TriplAgent‘的视觉设计使用了丰富的配色

文字排版

以内容主导的扁平式网页而言，文字排版就是大英雄，功不可没。

　　 1.衬线是一种选择，无衬线则会显得更干净。

　　 2. 在品种繁多，粗细和样式各有差别的字体系列查找你需要的字体。当然不是使用全部，而宽泛的选择帮你更准确的定义出层级关系，同时你也会发现某些字体会更适合特定环境。

　　 3. 不要顾忌把大小和粗细差别悬殊的字体搭配在一起就一定会造成视觉凌乱。用超大、超细的字体做标题而用中等粗细的小号字体做正文其实也是一种尝试。

　　 4. 要注意字体便于阅读。我知道听起来可笑，但人们会对你选择的字体产生很多质疑，所以确保按任何比例缩放时均能阅读

Siteleaf的设计，文字呈现干净且易读

交互

在扁平设计中，证明元素的交互性会显得很棘手。这是我采用的几个方法。

　　 1. 对比很关键。如果构图留白比较多，你可以给可操作元素一点彩色；如果是文字为主，可以使用简单的配图；如果标题是大号小写字母，链接可以用小号大写字母；就是这个意思。

　　 2. 传统布局也很有用。如果你要放置一个返回按钮，那就将其放置在用户期望找到返回按钮的位置上，左上角。

　　 3. 当页面堆叠更多功能时，把每个交互元素设计成按钮没意义。界面尽量设计直观一些。但如果交互特别复杂或者出乎意料，提供简单的错误恢复功能。

　　 4.下拉框、模式窗口、弹出框等层级元素在扁平设计中一般比较难处理。而对鲜明的对比、边框、着色的处理，也能从视觉上区分出交互层级。

简洁的构图和鲜明的对比: Taasky.

总结

我不相信设计有固定规则可循。看到设计师呕心沥血只为构建干净、简洁的用户界面，实在令人叹服。扁平就真的不需要渐变和阴影了吗？当然不是。实际上我见过最引人兴趣的工作，是那种能明智的呈现内容、同时能够保持交互直观性和平衡维度。

在我们这个高度联系、资讯丰富和功能齐全的数字世界里，简约设计又重新广泛兴起。而它并不能解决一切，但如果考虑周全、应用得当，也同样能给我带来易用和愉悦的数字体验。

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=7951)

综合下拉菜单：下一个网页设计趋势

Wed, 26 Mar 2014 17:54:17 CST

就目前而言，“综合下拉菜单”这种设计模式还是相对少见的。但是我确信，不出半年，它将会普及开来。

什么是的 “ 综合下拉菜单 ” ？

大型网站的导航系统一直是一个难点。当然你可以试图创建一个庞大的站点地图一样的导航菜单来链接到所有的页面，但是实际上，当页面越来越多而且不断增加的时候，这种做法将会变成一个不可能完成的任务。

一般情况下，设计师会有两种做法：

1.设计一个轻巧简洁的主导航菜单，链接到各个主要的页面，并在主要页面上添加附加的导航菜单，以便链接到更深的层次。这种方式很容易实现，可用性也不错。但是如果访问者想要看到的页面藏得比较深，那么就只好多点几次鼠标了。

2.采用动态下拉或展开式菜单，这种模式可以让访问者无论在浏览哪个页面时，都可以直接到达另外更多的页面。它提供了一种快速导航的模式，然后，在可用性方面，如果访问者的浏览器没有开启JavaScript的支持，他们有可能根本就看不到下拉或展开的菜单。
( 仅用 CSS 实现的下拉菜单也是可以实现的，但是 :hover 这个鼠标悬停的伪类并不是每个浏览器都能完整支持的 …… 比如 …… 万恶的 IE6 ！ )

综合下拉菜单，则是上面两个模式的一种折衷方案。它的效果类似Microsoft Office 2007里的Ribbon菜单。

( 示例： Office 2007 Ribbon)

( 示例： actionenvelope.com)

综合下拉菜单有哪些特点？

通常，一个综合下拉菜单:

1.是一个通过鼠标悬停感应来展示和隐藏的下拉菜单。

2.在一个较大的面板上显示所有的项目。

3.这些项目根据相关性进行了分组排列。

4.使用图标和图形来帮助访问者更好地识别项目。

为什么综合下拉菜单会流行？

有很多理由可以预示综合下拉菜单将会在许多网站成为主流的设计：

1.它提供了在简单导航和复杂的动态菜单中的一个折衷方案，既不会显得信息量太少，也优化了信息结构，不会显得太复杂而难于访问。

2.它实现方便，仅需考虑到极少的可用性问题。

3.它给了设计师更多的空间和视野来发挥自己的创意，而且通常看上去都很吸引访问者。

或许更引人注目的一点是， web可用性专家Jakob Nielsen也推荐使用综合下拉菜单！一般来说，他对很多新的web控件、模式都持批评态度，但是这次他也认为综合下拉菜单是一个好的模式，并建议设计师们可以尝试使用这种模式来增强自己设计的网站的导航系统。

你怎么看？综合下拉菜单会变得无处不在吗？你是否在使用他们了呢？还是说你会在你的网站尝试一下呢？

via Mega Menus: the Next Web Design Trend by Craig Buckler

微信号：woshipm，干货天天推荐，欢迎关注

留住访客！超有趣网站进度条设计

Tue, 10 Dec 2013 22:32:33 CST

人们讨厌等待，特别是加载网站的时候，可有些时候由于网速或者浏览器的原因，等待总是不可避免，如果在网站中也能像移动应用一样，有创意的进度条，会很大地减少人们的焦虑，还能避免因等待过久放弃进入这种不幸的事故。

相对于移动端，在网站中使用进度条不常见，该用哪种方式呈现给访客也是一个考验设计师的难题。现在你可以来看看这10个在网站中创意运用进度条的设计，它们既带给访客乐趣，也不妨碍内容阅读，学习一下，让它们在无形的展示中留住网速拙急的访客！（大多数提供源码，你可以很方便地学习它们）

进度条运用得当可不简单，细节是魔鬼，当你不知道如何处理这个魔鬼时，建议阅读《谈谈加载(LOADING)的那点事》，你也可以从其他优秀作品中吸取灵感：《18个读取进度条的优秀设计案例》

Creative Loading Effects

这个教程非常漂亮，展示了不止一种加载进度的方式，你可以点击DEMO玩一下。

Spinning Loading

用大写的「Loading 」，中间的O以新奇的动态旋转，是个非常清新的设计，提供了源码，可以很方便应用到你的网站。

Planets

看两个萌萌的小星球在跳舞真是太好玩了，它特别适合用在卡通风格的网站上。

Sinister Loadscreen

是的，看起来很邪恶的形象，不过很适合应用在暗黑系的黑色风格网站上，或者你可以用它来营造神秘感。

Yet Another Loading Animation

这个动效做得非常有节奏感，你可能想把它应用在音乐风格的网站上。

CProgress

Cprogress使用jQuery来展现一个非常酷的和易于使用的loadscreen。强大的是，你也能鼓捣成这几行代码，因为它们是完全可定制的！

Spin.js

一个让世界快速旋转的「Loading 」！你也可以通过控制右边的滑块来改变它的形状，给它加点阴影，甚至改变旋转的方向！

Alessio Atzeni

这教程又酷又好学，因为它是完全用HTML和CSS来实现的，还有三种进度模板供你选择。

Facebook-ish Loading Animation

如果你想让网站看起来像Facebook，那么这个进度条最适合你了，它的加载方式与Facebook加载图像时一样。

Flickr Style

如果你是Flickr的爱好者，那么这个不能错过，完全仿照Flickr的效果来。

文章来源：优设网编译（ 1stwebdesigner）

本文链接《留住访客！超有趣网站进度条设计》
官方微信：woshipm，干货天天推荐，欢迎订阅

人人都“懂”交互设计

Sat, 21 Dec 2013 15:18:20 CST

近些年来，随着交互设计概念越来越为人们所熟知，交互设计师这个职位，也已经在互联网公司里得到广泛并且专业化的应用——对于交互设计的定义、目标和作用，人们或多或少，都能说出个八九不离十。即便是行业外的人，如果跟他说起交互设计是做什么的，得到的反馈往往会是：
这个工作，挺好！
这个事，有意义！
这个，我也能做！
——作为一名交互设计师,听到这些,会有什么样的感想呢？

人人都懂交互设计！
——这听起来确实是个好事儿：在达成共识，彼此理解的基础上，工作才能更好地开展。然而，在实际工作中，大家也许都会或多或少地存有这样的疑问：我们有着共同的目标，都想把产品做好，想有好的市场回报和用户口碑，为什么我们如此努力，却往往会感到力不从心，还不断地遇到这样,或那样的纠结：

每个人都困惑着

——交互设计师的疑虑:

1、拿到一个产品需求时，交互已经差不多定了

需求说明中包括了交互框架和交互形式，有时还包括了交互效果和细节，那么，交互设计师的职责就只是来review原型中是否有遗漏？

2、产品需求是什么？先画出交互原型再看

需求说明中只有大致的产品描述，交互设计师根据自己的理解设计并画出原型后，产品才能发现需求中的诸多问题，这时再修改需求并重新设计交互，一遍，又一遍…

3、就几个页面，用不了太多时间

交互设计被给予的时间往往是用页面的个数来衡量的。很多时候，交互设计师不得不在完成任务和保证质量的单选题中挣扎。难道，交互设计师的职责就是照着需求简单地把页面草图“画”出来？

4、产品上线了，我的设计呢？

设计方案被实施上线后，交互设计满怀激情地打开产品界面，却发现自己的设计已经全然变了模样，谁动了我的设计……

——很多交互设计师，不仅仅是刚入行的设计师，包括一些从业多年的设计师，都会时不时产生这样的怀疑：交互设计师的价值到底是什么？难道真的就是一个可有可无的角色，一个简单劳动者，一个用来辅助需求的工具……那么,我们的出路和未来在哪里？

——产品经理的担忧
1、需求和交互分不开，交互设计师如何参与？
做需求的过程中，交互部分就顺带着一起想了，如果让交互设计师专门做交互的话，就意味着必须把两者分开来考虑，这是不是多此一举了……
2、交互一介入，我的需求就被推翻了？
我想让交互设计师帮着出一个原型图，但他似乎总是想挑战我的需求……原型图出来后，需求很多地方都被更改了，怎么办？
3、专门做交互，时间上不允许啊
有专门的设计师进行交互设计当然更好，但是在产品需要快速上线的情况下，很难留出时间来做专门的交互设计，特别是在需要一些用户研究数据支持的时候，交互设计往往需要花比预计更多的时间，这个确实很难接受
——产品经理有他们的苦衷和迷茫：交互设计师到底能为我们带来什么？我们想让交互设计师发挥更专业的作用，但是，似乎总是找不到一种更合适的模式。

—视觉设计师的苦恼
1、我应该面对需求，还是面对交互
视觉设计师设计的起点，以及设计迭代过程中，都会希望是在界面信息结构及交互形式等全部确定以后再进行，但是在实际工作中往往会遇到这样的问题：有时候输出给设计师的是产品需求（需求的细化程度也很不一致）；有时候输出的是交互原型。设计中什么地方需要与交互设计师讨论并确定，什么地方需要通过产品经理，这个往往让设计师们无所适从。
2、视觉设计不停地被要求调整，其实是需求在变化
视觉设计方案经常会被要求频繁地迭代，这种情况有时候是由于设计本身的性质决定的，但更多的情况，却是因为一个设计版本出来之后，会展露出诸多产品需求和交互方面的问题，这之后的很多修改，其实是在调整需求或者交互，造成很多之前的设计成为了无用功
——视觉设计师希望他们能在清晰的需求和交互框架下进行设计，并且在设计过程中明确什么样的问题，该与谁进行讨论和确定。

从我做起

理清了自身，以及合作伙伴的困惑和疑问之后，作为一名交互设计师，我们首先必须从自我做起，才能更好的帮助自己，帮助他人解决问题，扫清合作中的障碍：
——专业性
体现一个职位的价值和不可替代性，要做的第一件事就是完善自己的专业结构，时刻保持自身的职业素养。
1、交互设计是一门交叉学科，所涉及的学科领域非常广泛。由于中国现在还没有形成较为成体系的交互设计专业，所以，相对于专业出身而言，相关的专业知识积累和丰富的跨学科经验，就成为衡量一名好的交互设计师的最重要基础。

2、当然，仅仅具备这些理论背景知识和经验还是不够的，只有将这些知识、经验和原理等经过自己的消化、吸收并有机地贯彻到实践中，才能学以致用，逐渐体现交互设计的实用价值。
3、不得不提到的是，交互设计的确需要一些天赋：一名优秀的交互设计师，应当具备敏锐的洞察力，清晰缜密的逻辑思维，要能够善于权衡利弊，以小见大，对复杂事物进行合理的分辨和判断，以及拥有交互计师最为重要的品质：同理心（Empathy）——这些，也许仅仅通过理论知识学习和经验积累，也是不一定能轻易达到的。

只有对照以上各方面的要求，具备了职业的交互设计师的能力和素质，才能在实际工作中发挥更专业、更让人信得过的作用。

——设计实践

专业性在实际工作中的体现，在于设计中的一言一行——每一个设计细节，都要考虑周到，有理有据；每一个设计作品的产出，都应该能够经得起推敲。
1、要在深入理解产品背景、目标和定位的前提下开展设计
2、设计过程中，要时刻将产品目标和用户目标综合起来考虑，将产品需求最为妥帖地“翻译”为用户需求
3、让交互设计贯穿于整个产品的生命周期：从前期的产品规划，需求产出，到交互设计本身、视觉设计，一直到产品开发、测试、迭代环节，以及用户研究和用户测试的UCD方法等，都应该有不同的程度的参与或关注。这样，交互设计才能真正地融入产品，为产品服务
4、在工作中注意站在更高的层面考虑问题，把握大的方向，明确团队中各成员的职责及彼此的分工协作方式，善于根据实际情况调整合作模式和方法，时刻以最为有效、顺畅的方式协同工作

写在后面

也许就在前些年，交互设计师还得费很大的劲儿才能给别人解释清楚自己的职业——大多数人对交互设计这个词是完全是陌生的。现在，这种尴尬的情况基本上已经一去不返了。在这个全民都在讲用户体验，人人都懂交互设计的时代，作为一名交互设计师，当然应该感到幸福，而同时，我们也更愿意看到——在人人都懂交互设计的基础上，人人都需要交互设计，并且以自己的团队中拥有一名专业的交互设计师而感到骄傲。

source:http://uxc.360.cn

本文链接《人人都“懂”交互设计》
官方微信：woshipm，干货天天推荐，欢迎订阅

Android界面与交互设计原则

Wed, 22 Jan 2014 17:32:15 CST

译者按：

在 iOS HIG已经强大经典了N年之后，Android终于推出了一套比较系统的 HIG（大概是为了配合Android 4.0 Ice Cream Sandwich）。仔细比较两套HIG的“设计原则”部分，发现完全是截然不同的两种风格。iOS HIG走的是更专业型的路线，描述严谨且有不少的专业词汇（比如Metaphors、Consistency之类的）。而Android则显得亲民许多，不仅描述方式简要易懂，配图鲜明直观，甚至还用了“me”作为了一系列要点的标题，更充分地传达出以用户自身的体验为中心的思路。

设计原则

这些设计原则是由安卓的用户体验团队制定并应用的，以此来保证用户心目中最佳的用户体验。应用开发者应该参考这些设计原则，并将之用于自己的创作与设计，有针对性地在用户体验方面进行实践。

吸引我

以令人惊讶的方式取悦我
漂亮的界面，精心设置的动画，或是恰到好处的声音效果，都是快乐的情感体验。各种细微的效果精妙地组合在一起往往效果惊人，不仅显得轻松明快，更可以营造出丰富强大的氛围。

真实的物件远比按钮和菜单更有趣
使用现实世界中的对象和操作来构建应用中的对象和操作。这样不仅能够帮助用户，尤其是新手，迅速地理解应用程序的操作方法和作用，减少认知成本，同时也使他们能获得更多的情感满足。

把它变成“我的”
人们喜欢添加个性化风格，因为这让他们感觉像在家一样一切尽在掌握，也让这个应用显得和自己一样与众不同。应用应该提供明快合理且漂亮的默认值，同时最好也考虑添加一些有趣但不妨碍主要任务的自定义项目。

了解我
随着使用时间的推移，应用应该了解并记住用户的行为和使用偏好。不要让用户一遍又一遍作出相同的选择，最好能让他们能够方便地使用上一次的选择。

简化我的生活

用语简洁
使用简单的单词和短句进行说明——用户极有可能跳过冗长复杂的句子。

图片比文字更直接
尽量使用图片来进行说明。图片更吸引用户的目光，往往也比文字更有效。

为我选择，但最终是我说了算
智能地推断用户的行为，并推荐相应的解决方案，而不是一开始就询问用户想干嘛——太多的选择和决定让用户烦躁。不过为防万一推荐得不对，记得给出“撤消”操作。

只在我需要的时候显示
同时看到太多的东西让人感到不堪重负，所以最好把复杂的任务和信息分解成一段段的便于操作和理解的步骤。隐藏当前不需要的选项，并让当用户学会在需要时到哪儿去找它们。

我应该知道我在哪里
让用户清楚地知道他们在应用中的位置和操作路径。让你的应用中各个部分看起来区分明确，并在界面切换时使用适当的过渡效果，以表明它们之间的关系。对正在进行的任务提供反馈。

不要丢失我的内容与设置
保存用户花费时间创建的内容与设置，让它们在任何时间任何地点都可以被访问，并在手机、平板电脑和计算机之间保持同步一致。这也可以让升级变得更加容易与方便。

如果它看起来一样，那它的功能也应该一样
尽量使用明显是视觉差异来帮助用户区分功能上的不同。避免使用看上去相同或相似的模式、操作来实现其实并不相同功能。

只在重要的时刻打断我
如同拥有一个优秀的私人助理一样，用户不应该被无关紧要的旁枝末节所打断。人们希望能集中注意力完成手上的任务，除非有十万火急的事情需要处理。任务中的一次打断真是让人觉得费力又沮丧。

让我惊艳

给我各处皆适用的技巧
当用户自己摸索出使用技巧时会感觉非常良好。在你的应用程序里使用其他安卓应用广泛采用的交互技巧——包括相同的视觉模式和肌肉动作，可以让用户更容易上手也更容易获得满足。比如，“轻扫”就是一个在安卓应用中广泛使用的良好的导航快捷手势。

不是我的错
友好礼貌地提醒用户改正错误——在使用你的应用时，用户当然不希望自己显得很蠢。如果出了差错，请清楚简明地给出解决方案，以便用户能够快速地进行修正，避免提及让用户看不懂的技术细节。如果应用能够在后台默默处理那就更好了！

积极反馈
把复杂的任务分解成较小的步骤可以让用户更轻松地完成。给每个行动都提供反馈鼓励，即使只是一个微妙的光芒也会让用户大受鼓舞。

为我完成复杂的任务
让新手使用他们能够做的简单操作，完成他们从未奢望过可以处理的专家级任务。例如，结合多种照片效果的快捷方式，只需几步操作，就可以使业余的照片看起来让人惊艳。

让更重要的事情更快
并非所有的操作都是平等的。决定在你的应用程序什么是最重要的，并让它能更容易更快速地被找到和使用——比如照相机的快门按钮，或是音乐播放器的播放/暂停按钮。

via Android Design Principles

微信号：woshipm，干货天天推荐，欢迎关注

[干货]APP用户引导设计秘籍

Fri, 15 Aug 2014 19:35:45 CST

用户引导的目的

用户引导，其主要目的当然是引导用户，开个玩笑啦！一般而言，用户引导的目的主要有两种：用户需求和产品需求。

用户需求

即出于用户自己的需求，这一类引导主要的目的是 为了使产品更加方便用户，让用户能够更加顺畅便利地使用自己的产品 。比较极限的例子就是Paper，它的交互基本建立在全手势操作地原则之上，所以在用户初次接触的阶段做了大量的引导设计。一反“ 用户引导都会给用户带来困扰”的印象，根据Stef Miller在User Testing网站上发布的文章《Six UX Lessons Learned from the New Facebook App, Paper》中给出的测试结果，用户非常喜欢Paper的引导设计，因为它在需要用到某项功能的时候恰到好处地出现，帮助无所适从的用户找到方向。用户喜欢这种“及时雨”式的引导方式，105名测试用户给Paper的引导打出了4.47/5的分数。

产品需求

即出于产品方向上的思考带来的需求，这一类引导主要的目的是 为了塑造用户的使用习惯，提高特定功能的转化率，或者降低特定功能的PV 。比如微信朋友圈，在用户第一次通过长按照相机按钮触发测试功能——发布纯文字朋友圈时，会提醒用户“为内部测试功能，后续版本可能取消”，这就是一种对用户使用习惯的塑造。当然，这种“内部功能”的噱头在当时微信的推广期也有自己的一份功劳，时至今日，相信每天发布纯文字朋友圈的量不会太小，微信真正取消这个功能恐怕会比较困难。

用户引导的基本思路

针对不同的目的，设计用户引导时的思路也各有不同。对于用户需求类引导，主要目的是 优化用户体验 、帮助用户更好地使用这款应用，那么这个引导本身就需要在体验上多做文章，尽可能地“不打扰”用户，让用户在愉悦的心情中学习到一个又一个方便简单地功能或者操作方式。（此类引导通常都会采用下面说到的非阻断式引导。）

而对于产品需求类引导，为了塑造用户的产品使用习惯，达到PM的目的，通常会采用比较“破坏”用户体验地方式，以保证对用户的 有效引导 。之所以可以这样做，是因为不管怎样优化用户引导，突然出现地多余元素都是一种对操作成本的提高，假若过多追求用户体验，结果就是在没有达到目的的同时提高了用户使用成本，最终舍本逐末。所以，在做产品需求类引导时，须谨记，永远记得自己出发的目的。（此类引导通常都会采用下面说到的阻断式引导。）

非阻断式引导

即用户使用过程中闪现地引导元素，不影响用户的操作连贯性，不打断用户的使用。换句话说，引导出现之时，用户仍然是想干什么就干什么，除了一定视觉干扰之外，完全不受到限制。例如Facebook客户端中普遍采用地浮标式引导设计，这种设计利用界面中额外出现地视觉元素吸引注意力，但不会阻碍用户正常的操作，用户完全可以忽视弹出地引导。

此种引导对于用户干扰小，在用户体验上较为优秀， 通常用户需求类引导采用这种方式 。

阻断式引导

顾名思义，此类引导会阻断用户地正常操作，用户至少需要一步点击来结束引导。例如微信当中第一次进入朋友圈点击相机按钮时弹出地引导，用户必须点击“我知道了”才能关闭此对话框；再比如Tidy中的用户引导，用户需要点击“Got it”才能完成引导过程。这一类阻断式地引导有两个好处：其一，引导阅读率更高，用户几乎不可能错过；其二，适当情况下，阻断式引导可以放入更多的字，充分说明需要解释的问题，例如特定功能的隐性规则。

此种引导对用户干扰较大，但是引导效果好， 通常产品需求类引导采用这种方式 。但是如果引导的内容较多、较复杂，比如Paper基于产品需求的复杂的交互手势的引导，也会采用这种阻断式引导来保证用户的学习率。

用户引导设计要点

不管是阻断式还是非阻断式引导，如下几个要点是必须遵从的。

触发情境自然

如果你的应用在一开始就给出5页10页的使用教程，用户既不会看，也不喜欢，即便看了，也记不住。因为引导的触发情境不对，所以用户并不需要这些引导，记忆这些复杂的信息也是一种很大的压力。所以， 事前引导是不正确的 ，真正好的引导应当是出现在用户最需要它的时候，即触发情境要是用户刚刚要使用或者刚刚使用完此功能的时候，前者可以是对功能的隐性规则的说明，也可以是对复杂交互的一个教学；后者可以是对用户后续操作地一个预期，降低后续操作地成本。

尽量减少文字

过多的文字让本来就是正常使用流程中的“干扰”——用户引导雪上加霜，茫茫多的文字会给予用户非常大的压力，以至于很多用户在看到长串文字之后下意识地会选择直接跳过。尤其对于移动应用，屏幕空间是无比宝贵的，况且人对图形的记忆比对文字的记忆要来得更简单， 引导最好是 “ 展示出来 ” ，而不是 “ 说出来 ” 。

增加引导趣味性

避免单纯的说教，增加引导在形式、内容上的趣味性。比如可以给出较为夸张的赞美式反馈，或者是采用较为活泼的动态设计，再或者甚至可以采取比较可爱的动画形象用拟人化、口语化的语言进行引导。这些方法都是通过增加趣味性来降低用户对于“被打扰”这件事的反感，然后让用户在愉悦的心情下快速掌握引导内容。

总结

紧紧抓住引导目的，遵循引导设计的基本思路，选择合适的引导类型，设计过程中注意几大要点，相信优秀的用户引导设计马上就会出炉！

来源：早读课作者：陈橙

（关注更多人人都是产品经理观点，参与微信互动（微信搜索“人人都是产品经理”或“woshipm”）

行人检测

Thu, 28 Aug 2014 07:26:45 CST

最近一直在看行人检测的论文，对目前的行人检测做大概的介绍。

行人检测具有极其广泛的应用：智能辅助驾驶，智能监控，行人分析以及智能机器人等领域。从2005年以来行人检测进入了一个快速的发展阶段，但是也存在很多问题还有待解决，个人觉得主要还是在性能和速度方面还不能达到一个权衡。

1.行人检测的现状（大概可以分为两类）

（1）.基于背景建模：利用背景建模方法，提取出前景运动的目标，在目标区域内进行特征提取，然后利用分类器进行分类，判断是否包含行人；

背景建模目前主要存在的问题：(背景建模的方法总结可以参考我的前一篇博文介绍） （前景目标检测总结）

必须适应环境的变化（比如光照的变化造成图像色度的变化）；
相机抖动引起画面的抖动(比如手持相机拍照时候的移动)；
图像中密集出现的物体（比如树叶或树干等密集出现的物体，要正确的检测出来）；
必须能够正确的检测出背景物体的改变（比如新停下的车必须及时的归为背景物体，而有静止开始移动的物体也需要及时的检测出来）。
物体检测中往往会出现Ghost区域，Ghost区域也就是指当一个原本静止的物体开始运动，背静差检测算法可能会将原来该物体所覆盖的区域错误的检测为运动的，这块区域就成为Ghost，当然原来运动的物体变为静止的也会引入Ghost区域，Ghost区域在检测中必须被尽快的消除。

（2）.基于统计学习的方法：这也是目前行人检测最常用的方法，根据大量的样本构建行人检测分类器。提取的特征主要有目标的灰度、边缘、纹理、颜色、梯度直方图等信息。分类器主要包括神经网络、SVM、adaboost以及现在被计算机视觉视为宠儿的深度学习。

统计学习目前存在的难点：

（a）行人的姿态、服饰各不相同、复杂的背景、不同的行人尺度以及不同的关照环境。

（b）提取的特征在特征空间中的分布不够紧凑；

（c）分类器的性能受训练样本的影响较大；

（d）离线训练时的负样本无法涵盖所有真实应用场景的情况；

目前的行人检测基本上都是基于法国研究人员Dalal在2005的CVPR发表的HOG+SVM的行人检测算法 (Histograms of Oriented Gradients for Human Detection, Navneet Dalel,Bill Triggs, CVPR2005)。HOG+SVM作为经典算法也别集成到opencv里面去了，可以直接调用实现行人检测

为了解决速度问题可以采用背景差分法的统计学习行人检测，前提是背景建模的方法足够有效（即效果好速度快），目前获得比较好的检测效果的方法通常采用多特征融合的方法以及级联分类器。（常用的特征有Harry-like、Hog特征、LBP特征、Edgelet特征、CSS特征、COV特征、积分通道特征以及CENTRIST特征。

2.行人检测综述性文章　　

[1] D. Geronimo, and A. M.Lopez. Vision-based Pedestrian Protection Systems for Intelligent Vehicles, BOOK, 2014.

[2] P.Dollar, C. Wojek,B. Schiele, et al. Pedestrian detection: an evaluation of the state of the art [J]. IEEE Transactions on PatternAnalysis andMachine Intelligence, 2012, 34(4): 743-761.

[3]苏松志, 李绍滋, 陈淑媛等. 行人检测技术综述[J]. 电子学报, 2012, 40(4): 814-820.

[4]M. Enzweiler, and D.Gavrila. Monocular pedestrian detection: survey and experiments [J]. IEEE Transactions on Pattern Analysis andMachine Intelligence, 2009, 31(12): 2179-2195.

[5] D. Geronimo, A. M.Lopez and A. D. Sappa, et al. Survey of pedestrian detection for advanced driverassistance systems [J]. IEEE Transactionson Pattern Analysis and Machine Intelligence, 2010, 32(7): 1239-1258.

[6]贾慧星, 章毓晋.车辆辅助驾驶系统中基于计算机视觉的行人检测研究综述[J], 自动化学报, 2007, 33(1): 84-90.

[7] 许言午, 曹先彬,乔红. 行人检测系统研究新进展及关键技术展望[J], 电子学报, 2008, 36(5): 368-376.

[8] 杜友田; 陈峰;徐文立; 李永彬;基于视觉的人的运动识别综述, 电子学报, 2007. 35(1): 84-90.

[9]朱文佳. 基于机器学习的行人检测关键技术研究[D]. 第一章, 硕士学位论文, 上海交通大学. 2008. 指导教师: 戚飞虎.

最新论文

2014_ITS_Toward real-time pedestrian detection based on a deformable template model

2014_PAMI_Scene-specific pedestrian detection for static video surveillance

2014_CVPR_Pedestrian Detection in Low-resolution Imagery by Learning Multi-scale Intrinsic Motion Structures (MIMS)

2014_CVPR_Switchable Deep Network for Pedestrian Detection

2014_CVPR_Informed Haar-like Features Improve Pedestrian Detection

2014_CVPR_Word Channel Based Multiscale Pedestrian Detection Without Image Resizing and Using Only One Classifier

2013_BMVC_Surveillance camera autocalibration based on pedestrian height distribution

2013_Virtual and real world adaptation for pedestrian detection

2013_Search space reduction in pedestrian detection for driver assistance system based on projective geometry

2013_CVPR_Robust Multi-Resolution Pedestrian Detection in Traffic Scenes

2013_CVPR_Optimized Pedestrian Detection for Multiple and Occluded People
2013_CVPR_Pedestrian Detection with Unsupervised and Multi-Stage Feature Learning
2013_CVPR_Single-Pedestrian Detection aided by Multi-pedestrian Detection
2013_CVPR_Modeling Mutual Visibility Relationship in Pedestrian Detection
2013_CVPR_Local Fisher Discriminant Analysis for Pedestrian Re-identification

3.行人检测source code

1. INRIA Object detection and Localization Toolkit, Dalal于2005年提出了基于HOG特征的行人检测方法，行人检测领域中的经典文章之一。HOG特征目前也被用在其他的目标检测与识别、图像检索和跟踪等领域中。

2. Real-time Pedestrian Detection. Jianxin Wu实现的快速行人检测方法。

3. Hough Transfom for Pedestrian Detection. Olga Barinova, CVPR 2010 Paper: On detection of multiple object instances using Hough Transforms

4. HIKSVM, HOG+LBP+HIKSVM, 行人检测的经典方法.

5. GroundHOG, GPU-based Object Detection with Geometric Constraints, In: ICVS, 2011. CUDA版本的HOG+SVM, video.

6. 100FPS_PDS, Pedestrian detection at 100 frames per second, R. Benenson. CVPR, 2012. 实时的(⊙o⊙)哦。 Real-time!!!

7. POM: Probabilistic Occupancy Map. Multiple camera pedestrian detection.

8. Pitor Dollar Detector. Integral Channel Feature + 多尺度特征近似+多特征融合. Real-Time!

4.行人检测DataSets

MIT数据库

该数据库为较早公开的行人数据库，共924张行人图片（ppm格式，宽高为64x128），肩到脚的距离约80象素。该数据库只含正面和背面两个视角，无负样本，未区分训练集和测试集。Dalal等采用“HOG+SVM”，在该数据库上的检测准确率接近100%。

INRIA数据库

该数据库是目前使用最多的静态行人检测数据库，提供原始图片及相应的标注文件。训练集有正样本614张（包含2416个行人），负样本1218张；测试集有正样本288张（包含1126个行人），负样本453张。图片中人体大部分为站立姿势且高度大于100个象素，部分标注可能不正确。图片主要来源于GRAZ-01、个人照片及google，因此图片的清晰度较高。在XP操作系统下部分训练或者测试图片无法看清楚，但可用OpenCV正常读取和显示。

Daimler行人数据库

该数据库采用车载摄像机获取，分为检测和分类两个数据集。检测数据集的训练样本集有正样本大小为18x36和48x96的图片各15560（3915x4）张，行人的最小高度为72个象素；负样本6744张（大小为640x480或360x288）。测试集为一段27分钟左右的视频（分辨率为640x480），共21790张图片，包含56492个行人。分类数据库有三个训练集和两个测试集，每个数据集有4800张行人图片，5000张非行人图片，大小均为18x36，另外还有3个辅助的非行人图片集，各1200张图片。

Caltech行人数据库

该数据库是目前规模较大的行人数据库，采用车载摄像头拍摄，约10个小时左右，视频的分辨率为640x480，30帧/秒。标注了约250,000帧（约137分钟），350000个矩形框，2300个行人，另外还对矩形框之间的时间对应关系及其遮挡的情况进行标注。数据集分为set00~set10，其中set00~set05为训练集，set06~set10为测试集（标注信息尚未公开）。性能评估方法有以下三种：（1）用外部数据进行训练，在set06~set10进行测试；（2）6-fold交叉验证，选择其中的5个做训练，另外一个做测试，调整参数，最后给出训练集上的性能；（3）用set00~set05训练，set06~set10做测试。由于测试集的标注信息没有公开，需要提交给 Pitor Dollar。结果提交方法为每30帧做一个测试，将结果保存在txt文档中（文件的命名方式为I00029.txt I00059.txt ……），每个txt文件中的每行表示检测到一个行人，格式为“[left, top,width, height, score]”。如果没有检测到任何行人，则txt文档为空。该数据库还提供了相应的Matlab工具包，包括视频标注信息的读取、画ROC（Receiver Operatingcharacteristic Curve）曲线图和非极大值抑制等工具。

TUD行人数据库

TUD行人数据库为评估运动信息在行人检测中的作用，提供图像对以便计算光流信息。训练集的正样本为1092对图像（图片大小为720x576，包含1776个行人）；负样本为192对非行人图像（手持摄像机85对，车载摄像机107对）；另外还提供26对车载摄像机拍摄的图像（包含183个行人）作为附加训练集。测试集有508对图像（图像对的时间间隔为1秒，分辨率为640x480），共有1326个行人。Andriluka等也构建了一个数据库用于验证他们提出的检测与跟踪相结合的行人检测技术。该数据集的训练集提供了行人的矩形框信息、分割掩膜及其各部位（脚、小腿、大腿、躯干和头部）的大小和位置信息。测试集为250张图片（包含311个完全可见的行人）用于测试检测器的性能，2个视频序列（TUD-Campus和TUD-Crossing）用于评估跟踪器的性能。

NICTA行人数据库

该数据库是目前规模较大的静态图像行人数据库，25551张含单人的图片，5207张高分辨率非行人图片，数据库中已分好训练集和测试集，方便不同分类器的比较。Overett等用“RealBoost+Haar”评估训练样本的平移、旋转和宽高比等各种因素对分类性能的影响：（1）行人高度至少要大于40个象素；（2）在低分辨率下，对于Haar特征来说，增加样本宽度的性能好于增加样本高度的性能；（3）训练图片的大小要大于行人的实际大小，即背景信息有助于提高性能；（4）对训练样本进行平移提高检测性能，旋转对性能的提高影响不大。以上的结论对于构建行人数据库具有很好的指导意义。

ETH行人数据库

Ess等构建了基于双目视觉的行人数据库用于多人的行人检测与跟踪研究。该数据库采用一对车载的AVT Marlins F033C摄像头进行拍摄，分辨率为640x480，帧率13-14fps，给出标定信息和行人标注信息，深度信息采用置信度传播方法获取。

CVC行人数据库

该数据库目前包含三个数据集（CVC-01、CVC-02和CVC-Virtual），主要用于车辆辅助驾驶中的行人检测研究。CVC-01[Geronimo,2007]有1000个行人样本，6175个非行人样本（来自于图片中公路区域中的非行人图片，不像有的行人数据库非行人样本为天空、沙滩和树木等自然图像）。CVC-02包含三个子数据集（CVC-02-CG、CVC-02-Classification和CVC-02-System），分别针对行人检测的三个不同任务：感兴趣区域的产生、分类和系统性能评估。图像的采集采用Bumblebee2立体彩色视觉系统，分辨率640x480，焦距6mm，对距离摄像头0~50m的行人进行标注，最小的行人图片为12x24。CVC-02-CG主要针对候选区域的产生，有100张彩色图像，包含深度和3D点信息；CVC-02-Classification主要针对行人分类，训练集有1016张正样本，7650张负样本，测试集分为基于切割窗口的分类（570张行人，7500张非行人）和整张图片的检测（250张包含行人的图片，共587个行人）；CVC-02-System主要用于系统的性能评估，包含15个视频序列（4364帧），7983个行人。CVC-Virtual是通过Half-Life 2图像引擎产生的虚拟行人数据集，共包含1678虚拟行人，2048个非行人图片用于测试。

USC行人数据库

该数据库包含三组数据集（USC-A、USC-B和USC-C），以XML格式提供标注信息。USC-A[Wu, 2005]的图片来自于网络，共205张图片，313个站立的行人，行人间不存在相互遮挡，拍摄角度为正面或者背面；USC-B的图片主要来自于 CAVIAR视频库，包括各种视角的行人，行人之间有的相互遮挡，共54张图片，271个行人；USC-C有100张图片来自网络的图片，232个行人（多角度），行人之间无相互遮挡。

5.Others

相关资料资料
1. Edgar Seemann维护的行人检测网站，比较全，包括publications, code, datasets等。
2. Pedestrian detection: state of the art. A video talk by Pitor Dollar. Pitor Dollar做了很多关于行人检测方法的研究，他们研究小组的Caltech Pedestrian Dataset也很出名。

6.人体行为识别（Human Action Recognition)

来源：http://hi.baidu.com/susongzhi/item/656d196a2dcd733cac3e83e3

1. Statistical and Structural Recognition of Human Actions. ECCV, 2010 Tutorial, by Ivan Laptev and Greg Mori. （注：要用爬墙软件才能访问到）
2. Human Action Recognition in realistic scenarios, 一份很好的硕士生毕业论文开题资料。

参考：http://hi.baidu.com/susongzhi/item/085983081b006311eafe38e7

前景目标检测1（总结）

Thu, 28 Aug 2014 07:27:58 CST

运动前景对象检测一直是国内外视觉监控领域研究的难点和热点之一，其目的是从序列图像中将变化区域从背景图像中提取出来，运动前景对象的有效检测对于对象跟踪、目标分类、行为理解等后期处理至关重要，那么区分前景对象，非常关键的一个问题是确定一个非常合适的背景，背景从象素的角度来理解，每一个象素就是有可能是前景点，也有可能是背景点，那么我们就要防止背景中误进入原属于前景点的对象，目前有几种常用的方法，但分别有利弊。

主要可以分为：背景建模，帧差法，光流法

1: Single Gaussian(单高斯模型）

Real-time tracking of the human body

2:Mixture of Gaussian model(混合高斯模型）

An improved adaptive background mixture model for real-time tracking with shadow detection

基于混合高斯模型的自适应背景差分算法，类似于帧间差分法，使用混合高斯分布模型来表征图像帧中每一个像素点的特征，当获取新的图像帧时，适时更新混合高斯分布模型，某一时刻选取混合高斯模型中的一个子集表征当前背景，如果当前图像帧的某个像素点与混合高斯模型的背景子集匹配，则判定为背景，否则判定为前景点。总体来说是通过学习与训练计算出有没有运动对象时的背景

3:Running Gaussian average(滑动高斯平均）

Real-tine tracking of the human body

混合高斯在现有的背景建模算法中算是较好的，很多新的算法或者改进的算法都是基于它的原理变形的，但是混合高斯的缺点是计算量相对比较大，速度偏慢，对光照敏感。

4：CodeBook(码本）

Real-time foreground-background segmentation using codebook model

Real-time foreground-background segmentation using a modified codebook model

码本的效果还可以，之后有多中版本, 但是对光照也敏感；

5：SOBS-Self-organization background subtraction(自组织背景检测）

A self-Organizing approach to background subtraction for+visual surveillance

对于自组织背景建模算法即SOBS算法，该算法对光照有一定的鲁棒性，但MAP的模型比输入图片大，计算量比较大，但是可以通过并行处理来解决算法的速度问题，可以进行尝试；

6：SACON(样本一致性建模算法）

A consensus-based method for tracking

A consensus-based method for tracking-Modelling background scenario and foreground appearance

SACON-Background subtraction based on a robust consensus method

该方法是基于统计的知识，效果还不错；

7：ViBe算法

ViBe-A Universal Background Subtraction

作者网站：http://www2.ulg.ac.be/telecom/research/vibe/

ViBe算法是一个有别于传统方法的算法，作者已经申请了专利，可以做研究，用一帧图像就可以初始化背景模型，该方法计算量比较小，速度很快，可以嵌入到相机中，可以抗摄像头抖动，并且对噪声也有一定的鲁棒性，检测效果很不错；

8：Color(基于颜色信息的背景建模方法）

A statistical approach for real-time robust background subtraction and shadow detection

基于颜色信息的背景建模方法,简称Color算法，该算法将像素点的差异分解成Chromaticity差异和Brightness差异，对光照具有很强的鲁棒性，并有比较好的效果，计算速度也比较快，基本可以满足实时性的要求，做了许多视频序列的检测，效果比较理想；

9：统计平均法

10：Temporal Median filter（中值滤波法）

Automatic congestion detection system for underground platform

Detecting moving objects,ghost,and shadows in video streams

统计平均法和中值滤波法，对于这两个算法，只对统计平均法做了实现，并进行了测试，算法的应用具有很大的局限性，只能算是理论上的一个补充；

11：W4方法

W4.pdf

W4算法应该是最早被用于实际应用的一个算法，这个大家可以去查看相关的资料，这里不再细说；

12：本征背景法

A Bayesian computer vision system for modeling human interactions

基于贝叶斯框架

13：核密度估计

Non-parametric model for background subtraction

最后就是核密度估计算法，该算法应该是一个比较鲁棒的算法，可以解决很多算法参数设置方面的问题，无需设置参数应该是算法的一大优势。

SOBS、Color、VIBE、SACON、PDF等可以进行深入的了解，特别是近年来出现的Block-based（块）或Region-Based（区域）、Features-Based（特征）、基于层次分类或层次训练器的算法可以进行深入的研究。

14：光流法（速度太慢，基本不用）

光流法概念源自光流场，当运动物体的影象在表面上的模式运动就是所谓的光流场，是一个二维速度场。而光流法根据连续多帧图像序列，计算各象素点运动的大小和方向，它反映了图像上每一像点灰度的变化趋势。优点：不需要背景建模，在无法预先获得场景的任何信息的情况下，也能够检测出独立的运动对象。缺点是计算复杂，往往需要特殊的硬件支持，很难满足实时性要求。

15： http://code.google.com/p/bgslibrary/ 这个网站的库包含了各种各样背景减除的方法，可以省很多时间。

16：Evaluation of Background Subtraction Techniques for Video Surveillance

综述性评估文章，可以看到各种算法的性能。

17：王先荣博客对前景提取的分析（含代码）

http://www.cnblogs.com/xrwang/archive/2010/02/21/ForegroundDetection.html

18：帧差法

|frame(i) - frame(i-1)| > Th，背景就是上一帧图像。每一帧与上一帧进行差分运算。提取效果显然与运动前景对象的速度和帧率有关（帧率指一秒钟有几张图片）。扩展下，建立在统计模型基础上的有选择的背景建模，实际上就是混合高斯法。优点：速度较快，稳定性较好。缺点是可能出现物体的“空洞现象”，空洞是由于某一大型运动物体，它的两帧之间存在象素十分接近的重合部分，所以导致这部分被差分剪去了。（帧差法主要有，二帧差，三帧差，累积帧差）

19：固定背景法

|frame(i) - background(i)| > Th，由于背景是预先设定的固定的一幅图像，这里必然引入了四个问题：光照变化，摄像机抖动，高频率振荡背景，运动转静止物体的干扰。优点：计算简单，易于实现。缺点是摄象头要绝对静止，而且不适应光照变化。

20：Pixel-Based Adaptive Segmenter

Background Segmentation with Feedback: The Pixel-Based Adaptive Segmenter

http://www.mmk.ei.tum.de/~hom/pbas 网站

（PBAS）检测算法是基于像素的无参数模型，该算法结合了SACON和VIBE两个算法的优势，并在这两个算法的基础上改进而来；

主要创新点：

（1）引入控制论的思想，使前景判断阈值和背景模型更新率自适应变化，随背景的复杂程度变化。

（2）引入背景复杂程度的度量方法，根据背景复杂程度调整前景判断阈值和背景模型更新率。

本文转载自： Albert-Lxy

电商网站社交关系探索

Tue, 25 Feb 2014 10:21:31 CST

越来越多的电商网站努力在社交关系上寻求突破点，淘宝天猫一直在优化类似千人千面的用户体验，国外一些比较有趣的网站比如Svpply则是在feed推送上不断深入。那么，在电商中融入社交关系有神马意义？如何去巧妙的发动“群众的力量”，从商家对用户，发展到用户与用户之间的商品推送关系？我们自从接触爱逛这个项目以来，思考了蛮多，咱就借着这篇博文来看看通过爱逛而收集到的数据，聊聊以后爱逛可能有些什么变化。

一、平面视角的社交电商页面设计：

电商页面的UI设计经常会出现的频道有：首页、团购、品牌特卖、专题活动、达人等。爱逛现有的页面，也是按照这种布局设计的。如果把看页面的视觉流程比拟成我们在shopping mall逛街的路线，这就类似于“楼层”的概念，不同楼层经营着“品牌区”“折扣区”“美食区”等等。这种设计的导航分类明显，页面布局清晰，对用户进行方向感明确的视觉动线引导，能够很好的展示商品图并进行有目的主动搜索。大家对于去年淘宝抛出的“千人千面”这个词一定不会陌生，千人千面的概念简单点说就是搜索时根据用户留下的轨迹，推送符合每个人不同需要的商品，这种个性化搜索能够根据用户的喜好，更灵活的推送商品。在新版的淘宝和天猫上，爱淘等偏社交性板块也占了很大比重，这些功能主要是让用户主动关注一些店铺和品牌，从而第一时间在首页上展示这些品牌的动态。这些在设计上增加的社交关系，都是在围绕“准、快”的推送商品做文章。

老版本的爱逛如上述内容一样，按照现有大部分电商网站的模式进行了设计。但是就像传统购物一样，用户不仅仅是需要在商场里找到商品，影响最后下单的因素有很多，比如：

需要货比三家
错过折扣时间
确定购买目标后，受到店里的顾客人数、老板的态度等干扰
单独购物时犹豫不决，需询问朋友

可见，在不断完善“更快找到需要的商品”这个前期问题的同时，还有一个后期的重要问题需要设计，就是——“如何让商品更快下单”。那么，肿么让用户更快下单？“马上”下单！我们是否可以设计一些内容去影响用户？针对这个目标，产品、用研、交互、视觉、重构的小伙伴们进行了多番讨论。商品展示、频道、商品详情页、下单购买页，这些页面就像商场里的所有指示系统和商品。而商场里的人流、一起逛街的朋友、老板的叫卖声、顾客的回应这些隐形因素。就是我们需要设计的社交关系点，由于爱逛本来依附于QZONE大平台，有社交网站的DNA，在整个流程里穿针引线就有很多玩法了。

我们按照这个思路对爱逛用户进行了一组调研，找出了一些可以尝试的突破点：

用户关注的点依次是：（1）打折特价（2）新品发布（3）品牌商品；（4）好友推荐
用户经常想要分享自己购买的商品，而41.9%的用户会接受好友推荐
分享目的依次是：打折信息、推荐、求参谋、晒单、拼团
分享对象占比依次是：闺蜜好友54.2%、同事、同爱好者、同学、另一半

用户分享的声音如此迫切，我们怎能视而不见，要让用户在虚拟的世界中，也能找到结伴逛街的感觉~~~

二、立体视角的社交电商页面设计：

在页面中加入社交关系链之后，我们发现整个网站从平面化进击成为立体化的社交电商思路。大致的关系如下图所示。这时候我们就可以在与好友有关的点上进行设计，让评价、喜欢等等因素，灵活的对各频道的商品进行影响：

举几个例子：

1.打标签，丰富用户信息库内容。

◆ 初次登录时让用户对自己打标签，比如关注的品牌、风格、所在地域。
◆ 让具有好友关系的用户互相打标签。
◆ 给品牌设计标签让用户选择。
◆ 设计不同风格的卡通形象，类似QQ秀让用户选择，从而了解用户喜好。

2. 把折扣\新品\商品信息从网站单一推送折扣信息，转化为用户间传播。

◆ 运营折扣活动时，可以通过关注按钮进行定时提醒设置，以免错过折扣时间。
◆ 用户关注折扣活动后，激励用户分享出去。
◆ 收到好友推送的折扣信息后，建立好友提醒。
◆ 在品牌信息展示区，设计好友曾关注的该品牌折扣。
◆ 尝试新的团购形式，让用户去拉好友拼团购\邮费，发掘熟人关系。

3.建立更快捷的好友互动渠道，打破电商中“一个人逛街”的形式。

◆ 即时显示商品的人气，以及好友评论。
◆ 置顶喜欢人数最多的产品，适时变成团购并告知用户。
◆ 以好友的喜欢和收藏为轴线，展示商品，从单纯的商品展示页，变为商品展示社区。
◆ 设计优惠券和红包互赠模块，增加优惠券流通。
◆ 设计推荐和参谋快捷按钮，让互动变得更轻松。

这三个想法的目的依次是：快速了解用户；把折扣等信息，由网站单一运营转化为用户之间的运营；把电商中的陌生人买卖关系转化成熟人之间的关系，增加购物时的互动。总结一下就是：打破用户在网站中简单的1.浏览商品2.进行购物的体验，为用户打造一个圈子，可以快速的看到好友对商品的评价，从而形成一人购买多人参考的形式，使网购这件事更有趣起来。

根据这个思路，我们在新版的爱逛中尝试了几个社交关系点：

这次改版综合了产品和设计组的想法，对上述脑暴之后的点子进行了一些设计点探索。电商网站中的社交关系网如何更完美的编织出来，使平面化的设计方式真正变成多维度综合性的商品展示方法，还需大家体验后的更多ideas!

聊聊那些令人愉悦的动画效果

Sun, 22 Sep 2013 10:10:20 CST

由于静态图片传达信息的有限性，很多动态效果需要设计师通过添加设计说明并配合口述才能表达。这样做的优点是节约时间，有助于实现快速迭代，成本较低；但这样做的缺点是不够直观，很多细节存在于设计师自己的心中，仅通过静态图片和叙述没有办法完整地传达，冗长的设计说明让人丧失耐心，设计师心中的画面，往往到了开发时被理解成了另外的样子。

设计师内心的动画

因此，在时间较为充裕的前提下，很多设计师开始尝试输出动态设计稿，以求将自己的设计理念用更加直观且更吸引人的方式展现出来。

（网页动态设计稿案例）

（移动应用动态设计稿案例）

在进行动画效果设计的过程中，会涉及到怎样的思考，应该如何做出妥善的决策呢，笔者收集了一些案例，希望能和大家交流讨论。本文将会先从从流畅、适度、惊喜这三个角度展开。

一、流畅

平滑清晰的动画总是受欢迎的，相反，一卡一顿的模糊动画使人感到烦闷。

那么怎样才能输出流畅清晰又便于展示的动态设计稿呢？

下面介绍一种dribbble设计师们常用的输出方法：

① 使用After Effects编辑动态效果并渲染输出成QuickTime文件

② 将Quicktime文件导入Photoshop中，选择文件→保存为Web格式→GIF，并调整输出设置，可参考下图：

③ 点击保存，流畅又清晰的gif就导出啦：）

本案例参考设计师Dash的Dribbble主页： http://dribbble.com/Dash

本文案例中的AE源文件模板请戳： http://dribbble.com/shots/1089895-UI8-Presentation-Template

其他设计师AE源文件下载： http://dribbble.com/shots/1187158-iOS-7-animation-ae-giveaway

再分享一个移动端手势合集，可以帮助设计师在动画中直观的表达触发动画的交互方式： http://areuswade.com/precomposed-touch-gestures/

二、适度

中国有句古话，过犹不及。动画固然高端洋气酷炫帅毙，但也不是越多越好，设计得越复杂越讨人喜欢。动画效果的滥用也会让用户产生眩晕感，失去聚焦点，甚至产生厌烦和抵触的情绪。

① 在不影响性能和响应度的前提下设计动画

如果动画影响到了性能和响应度，那就变成了累赘，不仅不能提升用户体验反而成了让人恼火的存在。这时，要么想办法改进为轻量的动画，要么干脆不要。

② 权衡开发成本

越独特的动画，往往开发成本也越大。设计动画效果之前，先明确自己这样设计的目的，可以反问自己这样的目的是否一定需要使用动画的方式才能达成良好的效果，若确实需要，又能否优先采用开发容易实现的效果来达到同样的目的。建议和开发同事一起探讨设计思路，权衡成本。

③ 重复多次出现的动画越短越简单越好

再美的东西，看多了也容易审美疲劳。使用非常频繁的操作，不建议使用过于绚丽的动画效果，如果的确需要动画作为平滑过渡，推荐使用较为基本的干扰较小的动画。另外，当长时间的等待无法避免时，可以考虑让等待时出现的内容具有一定的随机性。

④ 若非特殊情况需要，动画效果应保持在舒适度范围内，避免眩晕和干扰

一些flash网站，设计得非常炫，初看让人印象深刻，但却难以留住用户。页面的动画元素太多，使人眼花缭乱，丧失焦点，不知所措，新鲜感一过，就再也不想看了。

在设计时，可以通过控制动画出现的时机，触发方式和影响范围来避免这类问题的发生。譬如在一些网页的设计中，滚动到特定区域才会触发特定内容区域内的动画，动画效果显示完毕后，只会在下次刷新并滚动到相应位置时，才会再次出现。

三、惊喜

惊喜通常是意料之外，情理之中的。抓准时机，设计巧妙的动画够能提升产品体验，增加趣味性，在给用户带来惊喜的同时为产品目标服务。如何 激发用户探索的兴趣，让用户产生成就感，提供超出用户预期的愉悦体验，是设计时需要思考的方向。

我们在使用微信的时候会留意到，当发送特定关键词时会触发微信背景某些绚丽特效。这些效果不是固定的，特殊的日子会有新的彩蛋，经常能带给我们一些惊喜。

游戏中往往会设置不同关卡和成就，有小有大，当玩家一个个达成的时候，会获得一定的奖励，此时用户就会产生成就感，获得自我满足。同样的思路，当用户在完成注册、支付、上传文件成功或者是完成别的较为复杂费时较长的任务时，也可以通过类似的方式，给用户激励。

Haze是个人很喜欢的一款天气应用，它的动态效果与交互模式简洁而新颖，完全超出了我对天气应用的预期，让人爱不释手。制作Haze的团队最近又出了一款Thunderspace的应用，延续了同样的设计风格，大家有兴趣也可以下载体验一下。

不得不提到设计师们都很喜欢的一个应用Path。令笔者印象深刻的是它的睡眠动画，点击去睡了之后，屏幕渐渐变暗，从底部缓缓升起一轮月亮，月亮的阴晴圆缺还会根据当前的时间产生变化。

deal in的界面底部有一个黄牛皮纸袋，你可以根据洗好长按一个项目并把他拖入到袋中，操作的感觉就像是你把它从纸上撕下来一样，充满趣味。

小结：

1、动画要做到平滑清晰

2、动画效果不能滥用，也不是越复杂越好

3、找准时机，给用户一点惊喜吧

在设计动态效果的实际流程中，还需要具体考虑动画的呈现方式，触发时机和持续时长等，需要和开发同事保持良好的沟通，以确保设计从单纯的概念真正落地为实在的产品，关于这部分的心得体会希望在接下来的文章中和大家探讨:)