文章标签 ‘视觉设计’ 的存档

• 视觉注意力—解剖设计的根源

  日期：2010.01.23 | 分类：用户体验设计(UED), 视觉设计 | 评论数：0

  

  物质世界客观存在，而人的“视觉成像”是对当前世界的“唯心”重建。这种重建基于个人“经验”、“感知”和“集体意识”。最初科学家认为人类通过视觉被动获取周围世界的全部图像信息而建立个人的视觉资料库，近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 分享！

• 当视觉设计师遇上产品经理、开发工程师

  日期：2010.01.12 | 分类：用户体验设计(UED), 视觉设计 | 评论数：9

  

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

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

  　　尽管，视觉设计师在他的职业生涯中或者是在某个产品开发进程中会面临不同的阻碍，以下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