物质世界客观存在，而人的“视觉成像”是对当前世界的“唯心”重建。这种重建基于个人“经验”、“感知”和“集体意识”。最初科学家认为人类通过视觉被动获取周围世界的全部图像信息而建立个人的视觉资料库，近10年来的研究表明捕获“全部图像信息”只是个传说，其中由心理学家Daniel T. Levin 和Daniel J. Simons建立的实验“真实世界”客观说明一个事实：大脑利用眼球1/10秒的速度获取重要信息，而这些信息将服务于正在进行的核心任务。举个例子，你的大脑向眼球发出指令阅读这段文字，而让你忽略了文章右侧导航的其他信息。

左图为相机拍摄效果，右图为人类视觉关注效果

正因为有如此特性，研究“视觉注意力”变得尤为重要。如何让用户更容易发现我们的产品？如何让商家更有效的广告？如何让我们的网页和软件更容易触动用户，更有萌点？… 在深入问题之前先简单了解三个概念。

　　视觉信息处理流程

　　人脑皮质有140亿-160亿个神经元，其中常用的不到1/10，而五感瓜分到的神经元则更少，所以在睁开眼睛，有大量视觉信息输入的时候做有机筛选变得非常有必要，这也是漫长进化的优化结果。某些医学著作提到，视觉信息处理需经24个以上流程，Colin Ware又将其归纳为三个阶段，大致是： 一、基本信息提取，并行处理多个特征； 二、根据目的需要，筛选关注内容； 三、保存关键目标，联想相关描述。（详细见《Visual Thinking For Design》）

　　被动关注和主动关注

　　“被动关注”又称“刺激引发”，按照Colin Ware归纳的三阶模型可以理解为：最基本的视觉元素，颜色、位置、顺序、轮廓等交织形成 -> 过滤多余信息，有序构建复杂图像、塑造三维模型等 -> 确认信息对象，并从“经验”获取更多其他信息来描述对象。可参考示意图：

例如网页右下角的弹出广告，我们眼睛先是看到右下角一个框，很多颜色在跳动，然后看清楚是一个人在跳舞，最后才是确认出原来是**公司的广告。视觉信息是一种生物电流脉冲信号，眼球神经被动感知事件传送到大脑，大脑主动确认事件后回馈，形成一个循环过程。但是“关注”事件并不一定由眼球发起，那种由大脑发起的“主动关注”也称“概念引发”。比如打开下载网页，我们去寻找“下载按钮”，就是“主动关注”的典型例子。

　　此类概念还有很多，有兴趣研究的朋友可以找几本医学著作或视觉理论自己研读，我这里也不班门弄斧了。下面回归正题，如何让设计更容易吸引人？或者说影响视觉注意力促成视觉干扰的因素有哪些？

　　我们来看一下刚刚总结的三个阶段：“最基本的视觉元素、颜色、位置、顺序、轮廓等交织形成 -> 过滤多余信息，有序构建复杂图像、塑造三维模型等 -> 确认信息对象，并从‘经验’获取更多其他信息来描述对象”（主动关注则反行之）。可以发现一个问题，当第一阶段获取信息越少时，第二阶段的过滤和构建事件则越快，到达第三阶段形成“概念”的速度也更快，假设以1/10秒的速度获取一次信息，则在一秒钟时间里可重复10次，这样意味着可以对获取目标有更深刻的印象。我举两个例子。MUJI的设计崇尚简约实用、质朴又充满创意，统一的视觉标准和无装饰反而让用户更容易记住这个品牌。公车站灯箱广告也是如此，从公车进站到离开往往不过几十秒，在车上的我根本没有时间看完所有信息，这时简洁的设计更具优势。

MUJI设计（图片来自MUJI网站）

那么，如果第一阶段必须有比较多的信息怎么办？目前我们的设计确实遇到这样的问题，有大量的信息需要集中在一小张图片上，这时无序堆砌信息是致命的。我们来看一下这种图片：

APPLE设计（图片来自apple网站）

同样是非常多的信息，但是没有杂乱，可以快速找到我所关注的内容，非关键元素并没有过分分散我的注意力。怎么做到的？请重新阅读那个梯形图。

　　是的，大脑从一开始就会对基础元素进行挑选，所以优化设计无非有两种方式：一、减少基础元素信息；二、帮“用户”大脑先整理一次基础元素信息。当信息量过多的时候，“被动关注”的用户往往会有“逃跑”心理（实在看不完-_-），这时候被“设计”过的基础信息会吸引用户继续关注或引导用户重点关注特定信息，以期达到商家推广或者我们希望用户进一步操作的目的。再说得浅显一点，出现大量信息的时候，可以通过色彩、构图、光线明暗、闪动、符号导向、增强大小对比等方式强调重点信息（详细做法可以参考一下CDC其他同事的文章）。也许你还会问：“主动关注”的用户是否就不存在注意力分散问题？？非也！回想一下大学上课的场景，我们在“主动关注”老师分享的知识时，心里是不是还常惦记着隔壁班的那个她（他）… 实际情况就是“主动关注”的用户比“被动关注”的用户更难伺候。具体分析得等以后有时间再续写了。

　　最后感谢Colin Ware，他的《Visual Thinking For Design》触发了我写本文的动机。也感谢大家耐着性子坚持看完这篇文章，希望在视觉理论基础上对大家有所帮助。

感谢：cdc.tencent.com 分享！

我是一个初入互联网的视觉设计师，和以往做设计感受最大的不同就是：一个设计的最终定稿会受到多方面的挑战，有来自产品经理的，来自开发的，来自测试的…等等。那如何在其他团队成员的面前不卑不亢，游刃有余地应对呢？下面这篇文章给了我很大的启发，特别分享给大家。

　　产品经理、开发工程师和市场策划专员等产品利益关系人认为——视觉设计师在整个团队中没有突出的地位。难道这个论断是正确的吗？我们还能用哪些实例来向这些利益关系人证明视觉视觉设计的重要性呢？

　　尽管，视觉设计师在他的职业生涯中或者是在某个产品开发进程中会面临不同的阻碍，以下3点是会被经常提及的：

　　● 视觉设计就是怎样把东西做得更漂亮
　　● 做流行的东西就可以提高视觉设计的品质
　　● 我们从单个元素出发来评价视觉设计的效果

　　视觉设计就是怎样把东西做得更漂亮

　　尽管现在只有很少的一部分人依旧坚持着这个观点，但认为视觉设计只是蛋糕上的奶油这个观念已存在很久。这就好比把最后一步的视觉设计比喻成产品包装上的一个吸引人注意的蝴蝶结。

　　这个观点也许源于工业时代。在当时，工业产品才开始出现不同以往的外观设计，而且像雷蒙·罗维（Raymond Loeway，1889-1988，法国）这样的现代工业设计师开始大张旗鼓地宣扬自己的产品美学。

　　显而易见的，视觉设计确实可以改善产品的表征，但是它可以传递给用户的信息其实更多。通过对不同元素的排列布局，视觉设计师也在向用户传递着产品的核心价值：

　　● 这是什么？
　　● 我怎么使用？
　　● 为什么我只使用它？

　　上述3个问题在交互式产品的设计上尤其显得至关重要。下面我们通过一个实例来说明。

　　图1到图3呈现的是同一个网站的不同视觉排列，基于相同的视觉元素——字体、颜色、渐变和图片。不同的布局直接影响着主要功能点的不同。

上图中，我们可以清晰地看出页面的主要功能是查看客户联系信息。然后则是用户可以编辑、删除或者为联系信息写备注。在图2中，页面的重点放在了客户和公司的交流上，然后是用户可以浏览、编辑和删除客户信息。

最后，图3的设计重点是用户信息的可编辑性。查看和实时跟踪客户信息的功能被弱化了。

这3种不同的视觉呈现方案告诉了我们用户的3个主要任务：查看客户联系信息、管理和更新这些信息以及保留客户的记录。在每个方案中，视觉设计的基本元素是相同的：颜色、字体、渐变和图片。

　　视觉设计可以做到的远比美化界面多得多。它还肩负着传递产品核心功能的作用。“这是什么？”“怎么使用这些功能？”“怎样更高效地使用？”

做流行的东西就可以提高视觉设计的品质

　　就像现在很流行的网站“make my logo bigger”所为客户做的事一样，产品经理经常会要求视觉设计师更多地关注排版中的某个细节。这些意见在帮助我们更容易抓住设计重点的同时，也暴露了对于视觉设计的另一个误解：“为了改进这个网站的视觉效果，你要把这个做得大一下，这个字体用粗体，变成红色！”

　　然而，页面中任何元素的重要性如何是取决于它周围环境的。比如，在一个页面中放入一个大红色的圆，它会很引人注目。如果把同一个圆放在10个粉色的圆边上，它就不会那么醒目了。因此，决定某个元素的重要性要从设计的整体出发。我们不应该只关注于某个元素来改进设计。如果这样做的话，页面的整体平衡就会被破坏，也会混淆页面功能的层次关系。

　　如果你答应每个利益关系人去逐个调整页面的不同细节，你每次的调整都要在用户需求和产品需求之间做抉择，然而，大多数情况下，两种需求是无法同时得到满足。图4和图5是两个不同下载页面的比较。火狐的页面中有一个醒目的下载按钮来触发这个行为。而页面中其他的元素，比如产品特性等就不会那么明显。

图5是Flock的下载页面，有4个地方可被点击来触发下载的行为：页面的右上角、左边菜单的底部、新闻板块的右上角和页脚的位置。如果不是因为每个下载细节都被强化的话，Flock可能就会像火狐一样——只有一个下载的按钮。

我们从单个元素出发来评价视觉设计的效果

　　如果我们把关注的重点单单落在某个元素上而不是整体页面的话，也会让局部的调整很困难。“你能把logo做得大一些吗？”“你能把标题的颜色变一下吗？”“我们能在这里换一张图片吗？”…

　　这些零散的建议确实可以帮助我们更了解客户的意图，但客户很少会关注到这对整体页面设计的影响。换一个颜色可能需要重新定义页面的色调，设计师还需确保新的色调不会影响到用户关注主要任务。换一张图片可能意味着也要同时调整它周围的元素，因为原先图片制造的视觉焦点可能不复存在…等等。

　　一个最终的视觉设计稿应该是建立在平衡和调整各个元素相互关系上的——同时传递产品的核心价值。所以，当设计师在调整了一个元素后，他还必须重新考虑页面的布局以不破坏原有的平衡。孤立地完成一个个小设计，合在一起后并不能说这就是一个完整的设计。

　　互联网产品的页面元素尤其容易被独立开来进行评估。因为它也许是分一个个单独的模块做测试的，团队里的一个成员也可能认为我只要把自己的那部分给做好了，整体的项目也就做好了。图6就表明了独立设计可能造成的结果。

　　当我们单独看页面头部ebay的logo、paypal提供安全保障的提示和正中照相机的促销广告是，都会觉得不错。事实上，当这三者同时出现在一个页面上时，他们更像在互相竞争，都过于抢眼了。

但愿以上这些实例已经证明了视觉设计师在团队中的价值。但要让更多的团队成员认同视觉设计不仅仅关乎到样式、流行等，视觉设计师还需多提升自我经验，在项目初期就表明视觉设计对于整个项目的重要性。

　
《Common Visual Design Misconceptions》
By Luke Wroblewski
原文链接：http://www.uxmatters.com/mt/archives/2008/11/common-visual-design-misconceptions.php

组织系统
如何组织信息，例如，依据主题或年代顺序。

标签系统
如何表示信息，例如，科学术语（“Acer”）或通俗术语（“maple”）。

导航系统
如何浏览信息，例如，通过等级体系的点击。

搜索系统
如何搜索信息，例如，对索引系统进行搜索的查询。

———————————————————————————————–

分类信息架构的方式

浏览Browsing Aids

这些组件会展现一些预设的路径给用户看，协助他们浏览网站。用户无需清楚地说出查询的内容，而是通过菜单和链接找出他们要的东西。浏览帮手的种类包括：

组织系统
网站内容分类或分组的主要方式（例如，按主题、按任务、按用户，或者按年代），也称分类法和等级体系。标签云图（根据用户产生的标签）也是一种组织系统。

全站导航系统
主要的导航系统，协助用户了解他们人在网站的什么位置，以及在网站中可以到哪里去（如“面包屑”）。

区域导航系统
主要的导航系统，协助用户了解他们人在子网站的什么位置，以及在子网站中可以到何处去。

网站地图/目录
支持主要导航系统的次要导航系统，提供浓缩过的总览以及连向主要内容和子网站的链接，通常是采用概要的形式。

网站索引
辅助性的导航系统，可以提供排序后的链接列表，连向网站的内容。

网站指南
辅助性的导航系统，针对特定主题提供特定的信息，以及连向网站中相关子主题的链接。

网站向导
辅助性的导航系统，可以通过一系列的步骤来引导用户，也有连向网站中相关子主题的链接。

情境式导航系统
用链接统一连向相关内容。通常内嵌在文字内，一般是用来连结网站中高度专业化的内容。

搜索Search Aids

这些组件可以让用户定义查询字符串，然后自动回应一组满足查询条件的结果给用户。可以把搜索帮手当成是动态的、几乎全自动化的一种浏览帮手。搜索组件的种类如下：

搜索界面
输入和修改搜索字符串的方法，通常会提供一些教你怎么改善查询的信息，以及其他设定搜索的方式（例如，从特定搜索区域中选定）。

查询语言
搜索查询的语法。查询语言包括了布尔运算符（如AND、OR、NOT），相似运算符（如ADJACENT、NEAR），或者是指定要搜索哪个字段的方法（如AUTHOR= “Shakespeare”）。

查询构造器
一些提升查询效果的方式：常见范例包括拼写检查器，词干分析、概念搜索，以及从辞典中取出同义词。

搜索算法
是搜索引擎的一部分，决定哪些内容可以满足用户的查询。Google的PageRank也许是最著名的例子。

搜索区域
网站内容的子集合，已经特别做过索引设计，以满足较细致的搜索（例如，搜索软件厂商网站中的技术支持区）。

搜索结果
展示满足用户搜索条件的内容。牵涉到哪些类型的内容应组成为个别的结果，应该显示多少结果，以及结果应如何分级、排序和聚类。

内容和任务Content and Tasks

这是用户最终的目标，以及用户达到目标时所需的个别组件。然而，要从信息架构中把内容和任务单独提取出来是很困难的，因为内容和任务中都会嵌入组件协助我们找到方向。嵌入在内容和任务的信息架构组件实例如下：

标题
为内容命名的标签。

嵌入式链接
文字内的链接，就是连向某些内容的标签。

嵌入式元数据
可以作为元数据的信息，但是必须先被抽取出来（例如，在食谱之中，如果有提到某种材料，这项信息可以索引起来，可支持以材料搜索的功能）。

成块信息
内容的逻辑单元；这些单元可大可小（如节和篇章都是成块信息），而且可以是嵌套的（如章节是在书本之内）。

清单
一群成块信息，或者连向成块信息的链接。这些很重要，因为它们已经按组分类了（例如，具备某些共同特点），而且以特定次序展现（如按年表）。

顺序式帮手
暗示用户在某一流程或任务中所在位置的线索，以及完成任务之前还要走多远（例如，在八个步骤中的第三个步骤）。

标识符
暗示用户在信息系统中的所在位置的线索（例如，标志指出用户正在使用的网站是什么，“面包屑”表明现在处于网站的哪个位置）。

“隐藏的”组件”Invisible” Components
某些重要的组件完全是在幕后执行的，用户很少会和这一类组件交互。这些组件通常会“喂养”其他组件，诸如用来提升搜索查询的词典。一些隐藏的信息架构组件种类如下：

受控词表和叙词表
预先确定较佳的词汇，用以描述特定领域（如赛车，或外科手术）。通常会包含其他的称法（例如，“brewskie”是“beer”的另一种称法）。叙词表是通常包含上位类、下位类、相关关系的叙词链接和优选词的说明（也就是“范围注释”）组成的受控词表。搜索系统可以从受控词表中取出查询的同义词以提升查询效果。

搜索算法
用于对搜索结果按相关性排序；搜索算法反映了程序设计师对如何决定相关性的判断。

最佳猜测（Best Bets）
手动和搜索查询相配的较佳搜索结果；编辑和主题专家会决定哪些查询应该取出最佳猜测，以及哪些文件应有最佳猜测状态。

图1(典型的标签)

这个例子可能会觉的这类标签比较简单，容易理解，但要为一些相对专业性的网站做这类标签就抓狂了，比如：金融，医药，教育，政府（如图２）。

图2(看到这类标签，能想到哪些内容会在相应的标签中呢？)

标签的分类

情景式链接：简单说指定的类中放相关的内容。比如看到挂着[化学品]三个字的仓库，没进仓库前就可能联想到三聚氰酸、苏丹红这类。反过来，如果先进仓库看到三聚氰酸、苏丹红，等走出仓库却看到 [食品仓库]时，一定会让人费解。再比如一个论坛的[股票]栏目和一个财经网站的[股票]栏目，在这两个不同情景下（前一种讨论股票后一种观察股票），一个标签的概念就会更让人容易理解。

标题：比如文章的题目、新闻列表的编号、项目符号(CSS中list-style-type)、图片，这类标签还能区分内容的结构层次。比如注册时的第一步，第二步；读文章时的第一节，第二节。

导航系统的标签：这个比较常见，就是网站栏目名，关键要分类好相应栏目所包括的内容和取好这个栏目的名字，尽量用一些互联网上常见的匹配，比如[公司新闻]就公司新闻，别写什么[大事记]，[搜索]就搜索，别写[寻找]，别玩概念。如果一定要玩概念，书中还介绍了范围批注的一种方法，就是花时间介绍网站各个[栏目名]的意思，不过现在大多网站通过[网站地图]更清楚的分清栏目的所包括的内容。

索引术语：将网站中的内容纯粹通过一个个标签的形式组织并列出来，方便有目的用户找到相关标签或让没目的用户看到推荐标签，比如（图3），不过还有一种意义是通过设计好的标签，方便搜索引擎寻找，说白了就如同在GOOGLE搜索关键字的作用(keywords)。

图3（这就是书中例子的变种）

图标型：通过图形来说明文字表达的内容，这类用法在专业性强的网站上比较受用，所在的情景范围越小就越能突出图形所代表的文字内容。比如你在旅游网站上看到飞机类的图标会想到什么？在一个门户网站上看到飞机类的图标又会想到什么呢？

设计标签

尽量窄化范围：这是通过减少网站所涉及的范围，整理网站栏目概念，甚至减少网站内容。

开发一致的标签系统，而非标签：比如网站首页的栏目和内页的栏目包括命名和顺序都应该是一致的。

一致性会受到很多因素的影响：风格（标点符号，大小写）、版面形式（内容页的文章有一致的风格）、语法（口气一致）、粒度（代表特定内涵）、理解度（帮助用户想到网站能提供的给Ta内容）、用户（为不同的用户独立设计标签系统，即使这些系统说的都是同样的东西）

标签系统的来源

你的网站：做网站时的资料，比如公司要把那些资料，内容放到网上去，按资料属性分分类，按资料格式分分类，按资料作用也分分类，还有，标签＝目的地的标题＝目的地网页的TITLE。

找同行竞争对手：向QPAI学习做BE TO SEE

受控词表及叙词表：这概念就是些专业的人给一些特定领域制定了一些精确的表达方式，并且词汇通常是公开的，而且被广泛使用。比如有“沙发”，“可爱多”，“生男生女都一样”这类也算吧

创建新标签系统

内容分析：分析文章有代表性的内容，现在QQ空间和蓝色在你写完文章的时间，都会提取这类分析标签。

内容作者：让作者或者文章相关的研究人员来定义标签，然后专人来统计分析标签。

用户代言人及主题专家：找用户代表，或者和用户有直接接触的部门、专家，从用户的角度发言。收集资料找出他们认为用户会想在些网站上找到什么。从一小群用户开始，就可以产生足以为网站做索引的标签。我们对用户（外行）有点了解，所以可以做出能适合他们的术语（例如：“种菜”替换“寂寞”）与了解用户需求的人一起工作。

直接来自用户：开放式卡分类：可以为现有内容按主题分成各自的类别，然后，再为这些类别命名标签。

封闭式卡片分类：是根据现有的类别区分主题，然后再将内容排序到这些类别。对封闭卡片分类面言，一开始要询问用户，说明他们认为类别标签所代表的意义，然后和你自己的定义互相比较。

自由列表：选出关键重要的项目或畅销产品，让新用户或者使用者对项目或产品瞬间想出一些字眼予以描述。排列分析字眼，寻找模式和使用频率。

间接来自用户：搜索日志分析：获取用户实际使用的标签信息，通过哪些关键字搜索来本页中。
标签分析：如图（3）

调整和微调

设计的标签系统必须时常调整和改进。标签代表用户和内容之间的关系，这种关系时常变动。进行用户测试，定期分析搜索日志.

感谢：http://www.08show.com/ 分享

以下是创意发想阶段的线描草稿

在创意发想阶段，我们共同提出了灯泡，电池，龙舟，瓶子，灯丝，化学，七巧板这几个方案。每一个方案的执行又有几个不同的变形，比如电池的充电方式可以表现成尾部新加电池充电或者将支付宝三个字看成三个电池同时为这三节的正极充电。又如在七巧板方案中，我们出了两套方案，分别是以lab做七巧板和以支付宝这三个字作为七巧板。

以下是根据草稿进一步细化的设计稿

在设计过程中大家都学习到了以下设计技巧和方法：

设计logo时会特别留意缩小后的显示效果（比如龙舟的方案缩小后会看不清楚）；
元素切忌过多堆叠使用（比如七巧板不宜过多，保持七个即可）；
线条不必过于拘泥于原字体，可以根据设计需要灵活变化（比如最终灯丝方案的设计，lab这几个字可以稍微胖一点，流动一点以符合灯泡的造型）；
做到清晰突出重点（例如电池的L表达起来不是很容易显得清晰和突出）。
综合以上的这些考量因素最终决定使用灯丝的logo设计（见下图）。该设计创意十足，同时兼具实验室元素，执行结果也显得得十分可爱和清晰。

这只是一个开始，相信UED视觉小组成员经过本次活动能够越来越多的参与到更多创意活动中来。用自己的力量营造UED的创意氛围，也让我们的用户眼前一亮！

感谢：http://ued.alipay.com 分享

虽然只是一些小小的细节，一般人可能不会察觉，但是调整后视觉上有很大程度的改观。

平时我们的设计也是如此，常常做了一个方案后，因为花了很多精力，总会不自觉认为它已经够好了；当我们放下包袱，好好听取其他同事的建议，也许会看到很多自己没有考虑周全的细节还有待优化，优化后再和第一版去对比，是不是更棒了？

我相信好的视觉设计，都是细节经得起推敲的。

　　Bing刚出的时候，我很不喜欢它的背景图片，觉得丫怎么没一点常识。搜索引擎是效率型的产品，用户访问这个页面的时候，第一得加载快，第二得在“一瞬间”找到输入框的位置，这两项速度越快越好。可Bing的页面弄这么花里胡哨，加载速度自然比Google慢，视觉在第一时间又被背景图吸引了过去。从输入网址到输入关键字，可能比Google慢上2秒，效率这么低，仗还怎么打？

　　我把这个观点跟同事说的时候，并没有得到他们的支持。纯粹讲大道理的话，他们也承认我讲的没错，可是，“我就是喜欢Bing的图片，多漂亮啊”，他们这么回复我。

　　几个月后，看一篇新闻，微软一个产品负责人谈到Bing市场份额上升的时候特意提到，很多用户喜欢Bing的背景图片也是增长原因之一。这时我意识到自己犯了一个错误，当用户喜欢那张图片的时候，愿意为此付出时间上的溢价，快2秒或者慢2秒并不是问题，关键在于“我就是喜欢Bing的图片”。于是干燥的逻辑论断输给了柔软的情感触动，效率的劣势反而转换成感性的优势，对比简洁而冷漠的Google式主页，通过情感触动来建立差异化的品牌。

　　2、投票的结果显示

　　和同事谈投票的设计。一个观点是投票结束后再露出结果（传统风格），相反的观点是一进入投票页就直接露出结果（开心风格），我坚定不移地支持后者。理由有两点。

　　第一，投票不仅仅是一个功能性的操作，也是一份可供阅读的内容。把结果直接露出来，降低了内容阅读者获取信息的效率（少点击一次），尤其对那些不打算投票，只是来看看内容的用户更加友好。

　　第二，当你进入一个投票页面，如果看到的仅仅是冷冰冰干巴巴的选项，这时唯一打动你的就是投票的主题，多大路货啊，第一印象平淡无奇，毫无感染力可言。但投票作为公众参与行为，它需要煽动，不完全是个人观点的表达，最好的煽动方式是告诉用户“大家都来参与”。如果把结果直露出来，在大平台上动辄有成千上万人投票，这成千上万人的参与就构成了内容上的感染力。人越多感染力越强。在打开页面的第一时间看到这“千万人的选择”，由此带来的情感触动就能建立用户对投票内容的良好印象，渐渐累积为对于此间投票的认同。

　　开心式的投票用得多了，很容易就能明白这个道理。

　　3、相片冲印的图片调用方式

　　之前在杂念中提过，我带的项目组临时接了个相片冲印流程设计的单子，因为上手太仓促，不了解冲印用户而犯了一些错误。其中之一是，以前该流程的第一步是选择“本地上传图片”或者“从相册调用图片”；我们觉得太累赘，把这两步合为一步，用户直接进入相册调用界面，又可以在该界面内选择本地上传功能，减少了一个页面流程。

　　上线后，按惯例作后期访谈和数据分析。改版前选择“本地上传”和“相册调用”的用户大约是1∶1，改版后变成了1∶2。看上去新流程起到了效果——但我左想右想觉得不对劲，猛然醒悟，谢特！我们错了！

　　要知道相册上传为节约空间使用，缺省是不保留原图的，绝大部分用户上传的图片都被压缩为750px，只有极少数用户手动选择了保留原图。但750px并不符合冲印规格，如果你调用个人相册内750px的图片去冲印，会用橙色叹号来警示你：最终效果可能不尽如意。那么对于一个从未上传过原图的相册用户，满屏警示符必然带来极强的挫折感，即便提供了重新上传原图的快捷途径，他恐怕也会烦躁放弃。换句话说，用户选择“从相册调用图片”的冲印成功率是很低的，我们更应该鼓励本地上传。

　　当充分考虑到这个因素时，就会发现，一个庞大的相册并不能为相片冲印提供内容素材库，而只是庞大的广告位罢了。如果拘泥于大相册这个内容背景，反而会绊住自己的脚。结果之前那个单独选择“本地上传”和“相册调用”的流程才是对的，我们还可以在这个页面流程中明确提示，告知用户什么情况下使用本地上传，什么情况下使用相册调用。否则，绝大部分用户进入下一步看见满屏警示符，他也就意兴阑珊了。

　　在这个案例里，产品设计人员一味追求流程上的简洁，倚重于大相册的存量优势，却忽略了绝大部分用户相片像素不足的缺陷，尤其未能把握好当用户发现像素不足时产生的挫折感。这种沮丧的情绪足以打消他所有的冲印冲动。如果我们希望他从沮丧中快速恢复过来，进入重新上传原图的快捷通道，其实是个奢望。就和两口子吵架怄气一样，一时半会儿无法消停。

　　4、新动态的提示

　　最近，我个人在产品设计中还犯过一个错误。

　　在新相册的改版中，顺应潮流地加入了“上传和发表动态”这个功能。我既不愿意把动态嵌入到个人相册里边，希望保留其简洁风格，又觉得仅仅加一个标签页来存放动态的话，提示太弱，难以推动用户去建立“访问相册动态”的习惯。因此将关注对象的相册动态合并入消息中心，给予新消息提示。

　　那时有人提醒我，这个行业里很少有对动态作新消息提示的先例；我反驳说，人腾讯的QQ2009就这么干。IM面板左上角第一个就是QQzone的新动态提示。

　　别人又提醒我说，会不会构成对用户的骚扰？这点我倒是很有信心，相册用户的上传和发表行为是非常不活跃的，动态数量很少，又随时可以通过取消关注来屏蔽信息。既然可定制，何谈骚扰？何况他关注某人，不就是为了获取某人的最近动态吗，我们只是提供了一个更方便的提示渠道而已。

　　然后我就这么干了。大概过了3个月，还好开发进度很慢，还没开发到消息中心这一块，我忽然反应过来，妈的，踩雷了。大多数产品都不把动态和信息合并，果然是有道理的。倒不是基于别人提醒过我的那些理由，而是我没把握好用户阅读“动态”和“消息”这两种信息时的心态。

　　浏览消息的时候，心情是急切的，希望尽快看到别人对自己的反馈内容，重视信息获取的效率；而浏览动态的时候，由于是去看人家发表的内容，于是换上了相对舒缓的阅读节奏。这两种节奏的一快一慢，无法强行整合在同一个框架内，否则必然牺牲其一。很显然，消息是自己的，动态是人家的，最终牺牲的肯定是动态。

　　再直白点讲，由于用户已经建立了快速浏览新消息，快速返回的使用习惯，这时我把动态给嵌入消息中心，相当于把它也投入了一个“快速浏览快速返回”的流程之中，完全不吻合动态本身的阅读节奏。但如果我希望用户在消息中心内的阅读节奏忽快忽慢，简直是个妄想！

　　结果刻意推广动态的手段，反而将之溺死。

　　5、起点的付费模式

　　起点的付费模式很成功，被不少人追捧，这点我也承认。但不少人（尤其是时髦的互联网时评家）还希望把这个小额付费模式推而广之，普及到各种内容产品上去。有人认为这是拯救媒体的一道曙光，有人认为这是2.0时代向用户收费模式的达摩老祖，必将发扬光大桃李遍野。我对此嗤之以鼻。

　　要研究小额付费模式的成功，首先要了解，用户在起点购买的到底是什么样的内容居多。收费文章通常得符合四个要素：第一，独创性强；第二，内容长，10万字起；第三，更新频繁，每周更新不低于2万字，最好是日更5000字；第四，有主角代入式的阅读快感，情节高潮不断。同时满足这几点的绝大部分是YY文。

　　把这四个要素代入应用情景，很容易就能明白，用户之所以付费，也就是在快节奏的阅读状态下被故事连载勾着鼻子走，急着看情节如何推进，高潮如何迭起，人物命运如何。看了一半，刚来劲，不付费就看不到了。可作者每天还更新啊，看不到就急啊，抓耳挠腮地急。怎么办？只好掏钱了。

　　那么，除了典型的起点YY文之外，还有什么样的内容符合这四个付费要素呢？我看恐怕是没有的。有近似作品的，用户没道理付费。内容不够长，更新不够频繁的，吊不足胃口用户就不会付费。情节做不到高潮迭起的，内容节奏一慢下去，用户也不乐意付费。那么起点的付费模式又如何惠及寰球呢？

　　如果它真的是王道，这个模式出来好几年，能抄的话早就被抄得遍地开花了。何至于一枝独秀。

　　以上讲了五个案例，都是我最近遇到的一些琐事。在不同的应用情景下，用户的产品使用过程会触发不同的情绪反应，对多变情绪的把握，就是所谓的“产品感”，是一个产品设计人员最重要的才能。积累产品感没什么捷径，只能自己多用产品，要带感情地大量地用，什么产品都尽可能玩一下；此外做大量的用户访谈，看大量的用户反馈，数量越多越好，从中去体会他们的情绪变化。很多信息靠用户取样或访谈技巧都是拿不到的，凑巧这个用户跟你讲了，那个用户又没讲到；或是某个意见你多听到几次，用户变着花样地反复跟你讲，就会触动更大一些，理解得更深刻一些。所以我一直重视用户的个体研究甚于群体研究，重视用户访谈的数量甚于取样精准。简单来说就要多用，多聊，英特纳产品感就一定会实现。

一、头图介绍

首先顶部仍然和上一版一样，采用了很大的头图，不过不同的是采用了轮换的方式，这个细节的改动确实很不错。通常来一张顶部头图，是用来介绍和宣传产品功能的最好手段。但是往往的问题的，要表达的东西过多，虽然头图面积很大，但是还是很难充分利用好要表达的内容。有些时候甚至根本起不到表达和介绍的内容，仅仅是好看而已。但是支付宝这次采用了轮换的方式，轮换通常用来用作图片新闻，用在头图还是很少见的。这次头图不仅可以自动切换，每个切换按钮都是精工细琢。把支付宝的特色功能点进行分类，一张一张图来介绍，而且每张图都采用了类似漫画的方式。这样做不仅起到了充分介绍产品特点的作用，同时也增加了趣味性，让用户印象十分深刻。

二、数字、logo、信任

作为一个线上支付产品，最关键的一点就是赢得用户的信任。而这次改版可以发现，基本采用了两种表达方式赢得用户的信任，第一个就是数字，第二个就是合作单位。对于数字，譬如：65家机构，46万家商户，14家银行等，页面特别在数字的地方加粗，加亮，或者用注释的方式显现出来。大量的数字可以很好的赢得用户的信任感，也就是常说的“数据说服力”。合作单位：页面上也用较大的地方来摆放各种合作公司的LOGO，而且我们不难发现这些logo都是精挑细选，不仅是大公司，而且是热门很熟悉的公司，再有每一个行业的logo只有一个出现在首页上。因为这些公司都是大家熟悉信任的公司，那么他们与支付宝合作，就会把这种权威性转嫁给支付宝。也就是常说的“狐假虎威”。

三、入口

网站的登录和注册仍然是放在首页，不过细节上的变化就是，整个页面强调的是登录，而在上一版中强调的是新用户注册。新版中登录用了橘黄色，十分抢眼。虽然注册按钮很大，但是用的是灰白色，不是十分明线。这跟上一版的设计正好是相反的方式。新版的登录框规划的更好，登录，注册，问题处理很自然的用一个线性的整体方式表现出来。而在上一版就比较凌乱。

四、色彩

不知道是不是，支付宝的团队大量配置苹果电脑的原因。新版的色彩搭配方式和苹果网站十分相似，采用了无色+有色的方式。内容图片用色彩丰富的配图，而且每张图都制作精良。区块分割采用了灰色。可以很好的分割各个内容块儿，又不会突兀。

作为电子商务网站来说，支付宝这次首页改版是相当成功的，各个部分都是精雕细琢，整体又十分和谐。总体风格由原来的稳重大气，变成了时尚大气。这也非常迎合了大量80后使用人群的风格。

ps：支付宝花大把资金招人，看来是没白招。

感谢：blog.d8in.com博主分享

　　问题1：视觉表现与开发实现的平衡点

　　提起移动设备的设计，难免想起目前火热的iPhone，微软的windows mobile系统，以及很多时不时让你大饱眼球的新颖、时尚的产品，其整体的印象感觉是前卫、酷炫和充满科技感的。

　　多说无宜，相信大家随处都可以看到类似的惊艳设计，这里要强调的一点就是，手机软件需要兼顾到多个手机操作系统，而目前主流的智能手机操作系统有很多如诺基亚的Symbian、微软的Windows Mobile，PALM、Linux，还有Blackberry OS、iPhone OS，以及Java和MTK等等，况且每个系统会不断更新升级出多个版本，比如Symbian系统又根据不同的硬件特性分为S40、S60、S80、 S90等不同版本，这些系统和版本都具有不同的特性，所支持的界面表现也都不尽相同。所以在进行视觉设计的时候，要对不同系统有所了解，不能一味强调视觉上的表现力，单纯追求酷炫的视觉效果而失去了兼容性。

　　同时，手机软件亦会受到硬件设备的限制。我们可以注意到不同的品牌占据了整个手机市场，其中占有率高的有诺基亚、索爱、三星、摩托罗拉，还有多普达、苹果等后起之秀。整个手机行业更新换代非常快，新的型号很快出来，旧的型号又不会马上被淘汰，所以手机软件开发还要细化到不同品牌的不同型号。

　　而且，要关注到产品开发的成本。目前QQ手机浏览器的开发还属于前期阶段，目标是快速打造简洁快速、轻便易用的手机浏览器，简约的设计是与当前目标相符的。我们不用刻意追求外在表现，而是设计一款实用为主、性能第一的浏览器。手机浏览器沿用了手机QQ的界面实现机制，同时也因为操作系统的原因，现在还不支持半透明的效果；在质感表现上，主要以单向渐变为主；另外对安装包的体积有严格的控制，尽量少的使用贴图元素和动态效果。

问题2：围绕核心价值进行设计

　　浏览器的核心功能是页面浏览和内容呈现，用户在使用浏览器上网的时候，浏览器的任务便是对用户查看网页进行解析并快速正确的呈现网页内容，而网页的样式及风格则是网站建设者需要考虑的事情。这里要提到在preview版本里曾设定的手机QQ风格的主题皮肤，其中对网页浏览窗口的背景色也进行了定义，即与起始页一致的深蓝色，在实现和测试的过程中，我们发现这个深色的背景影响到了部分网页的浏览。比如，CCTV的wap网站使用样式表将网页文字定义为深色，在明暗度很接近的背景色值下，基本无法看清文字。因此preview版本我们暂停了该主题的实现，在beta2版本中我们将该主题的浏览窗口背景色调整为浅色。

　　控件设计也遇到了类似的问题，开始控件样式是跟当前应用的主题风格统一的，默认蓝色主题的控件是蓝色的，粉色主题的控件就是粉色的，但这在通用性上就比较差，比如在一个蓝色风格的网页中，想区分出蓝色的输入框就有点困难。因此，我们最终定义了一套通用的手机浏览器的标准控件，可以应用在各个主题里面。

站在巨人的肩膀上

　　公司已经有一些比较成熟的无线产品，如手机QQ项目就积累了丰富的移动设备设计的经验，在手机浏览器项目的前期我们与手机QQ项目的设计师进行了多次的交流和学习，在后期的设计过程中也非常感谢他们的经验分享和热心支持。其它还有手机QQ音乐、手机QQ影院等产品也有值得我们学习的地方，后续我们会增强各项目间的交流和技术分享，共同提高。

　　多渠道的学习移动设备相关的设计知识是很有必要的，特别推荐下诺基亚论坛(forum.nokia.com)，其中的Design and User Experience栏目中有大量的交互设计和视觉设计的文章，同时Library中的规范建设文档也十分的全面和完善，是很好的设计参考资料。比如其中几篇关于Vertical List、Horizontal List和Tabbed List的讨论文章，就对手机浏览器beta2版本的起始页的列表设计提供了很大的帮助。

　　还有目前比较流行的手机浏览器产品，如UCweb、Opera等，相对来讲已经比较成熟，对浏览器的整体体验已经有很好的把握，并且吸引了相当很多忠实用户，我们也可以通过吸取他们设计的优点来提升产品的体验。

　　另外，参考优秀的手持设备软件设计是一个很好的捷径，正如前面所说的手机软件会受到操作系统、硬件设备等的很多限制，而优秀的设计已经较好地避免了许多问题。

过程保证结果

　　手机屏幕的显示效果与电脑屏幕的差别非常大，不同型号的手机的色差也很大，我们在进行视觉设计的时候需要在不同手机上调试设计稿的色调和对比度，通过不断测试保证最终的显示效果。为了节省测试和调整效果图的时间，这里建议使用数据线连接，这样在pc和手机间传输图片的速度会快许多，并尽量多的在不同手机上查看效果，因为很多手机的颜色显示没有达到真彩色，有些色值会不被正常显示。

　　手机浏览器是多部门合作的项目，在设计过程中难免会出现各方面的意见分歧，通过严格的评审流程可以保证最终设计质量以及合理的解决意见分歧。设计稿首先要通过设计中心的专家评审，然后在项目组内进行二次多方评审并最终确认，最后提交开发实现。

　　为方便开发同事快速高质量的进行界面实现，以及后续功能模块的添加和维护等工作，我们制定了需要制定详细的规范。规范制作对后续的工作开展有着重要的意义，比如新主题的增加，界面实现的检查等。

其它的补充

　　手机软件的界面设计中要特别注意内容、结构的层次清晰，尽量能适合在不同场景下的表现，因为手持设备的特点就是很方便的在不同的场合使用。

　　手机和pc端的设计原则是共通的，关键是将不同设备的特性发挥出来。

　　手机字体相关规范还需要进一步完善补充。

　　最后的话

　　手机浏览器项目对于移动设备的设计来讲，仅仅是迈出了第一步，尚有很广阔的空间需要去拓展，对于手机软件设计的经验积累现在也还只是杯水车薪，要靠大家一起来补充，随身携带的设计，我们可以让你爱不释手。

感谢：腾讯CDC 分享

Joost de Valk 采用了细的高对比度边线，让访客能更容易区分页面的不同区域。在上图中放大了的部分，你可以看到，大多数时候这种对比只是一条1像素的高亮线挨着1像素的暗线。

话说回来，这个页面上的“More”和“Go”按钮与周围的对比度太小，即使你刻意在找也很容易被忽略掉。

WordPress 为页面中最受欢迎的链接 “Download(下载)” 使用了对比色。 这种红色在冷灰色调的页面中自己跳了出来。但这红色在明度方面有所收敛，避免了影响页面整体效果。

如果你对于该不该使用对比犹豫不决，就把这一决定过程当做是化妆。你要做的不是让人们大吼“看呐，对比色！”，你需要的是自然而然的吸引他们注意页面中重要的内容，高亮出已经存在的重点。