原文作者：Milan Guenther
原文链接：Photos for interaction - Visual Interface Design: The photography example
译者：暗魔不生

越来越多的设计师在进行用户界面设计时会使用一些有特色的图形元素，而随着浏览器成为软件界面的技术基础，传统的基于桌面构建用户界面的方式已越来越多的被平面设计和web设计所取代。

在不远的将来，这种转化将会愈演愈烈，网页和桌面软件之间的界限将会消失。现代很多富客户端的用户界面技术，像Silverlight/WPF, Air, Java FX等，都使得设计师可以对软件总体用户体验有更好的把握。由于现在的软件都可以跨平台运行，并且这些软件在设计中会包含自己独特的样式，所以操作系统（如Mac OS或Windows）的界面样式开发指南将会慢慢失去作用。软件公司以及参与软件设计的各方都倾向用独特的视觉设计来传达公司的品牌形象，并给用户提供独特的交互体验。

一方面这表示设计师在软件的交互设计上获得了更多的自由，另一方面视觉设计在软件界面设计中的重要性被强化了。为一些特定的界面提供视觉方案的设计师们慢慢从软件公司建立好的标准中脱离出来。他们应该承担起自己的责任，去选择合适的图形元素应用到设计中来体现设计的原则和提示产品的可用性。

交互式视觉设计元素

就像最早出现在印刷和在线传达行业中的视觉设计一样，要设计一个在视觉上非常有表现力，在功能上也很完备的系统必须考虑各种各样的需求，尽管可能使用同样的方式来达到目的--使用文字、图片和颜色来动态的将一件交互式产品可视化。相比那些为了建立自己的品牌形象而进行的纯粹的单向视觉传达设计，为交互式产品进行视觉设计更接近于产品或工业设计--即创造一样产品让他更好的为用户服务。它需要交互设计、软件开发和产品管理等多方面人才的通力合作。

照片（摄影作品）在软件用户界面中扮演的角色

在软件用户界面中使用照片既有挑战也有机遇。我拿照片当例子是想让它代表传统的传达设计的元素，我同样也可以拿印刷术、插画技术、动画设计、平面设计等做例子，因为思想同样适用。该思想中非常重要的一点是在创建用户体验的过程中，需要不同的专业人才的合作，以及如何优化他们的合作方式从而提高效率，产生出更多有价值的想法。

案例1：照片作为内容

照片非常适合于捕捉人们现实生活的瞬间或传达特定信息，因此在软件系统中，照片大多数时候都会用作内容。照片通常有着语义上的含义，它们向网络或者应用程序的用户传达信息。

这样的例子随处可见，从私人照片管理软件（如iPhoto）到企业信息管理系统中的产品目录，再到网上的商店。对用户来说，这里的照片不是装饰或者设计元素，而是真正的内容的一部分。

从视觉设计的角度来看，难点就是如何把内容表现的更清晰，同时又能揭示上下文信息或使其具有某种意义。利用照片表示的内容往往因图像的冲击力显得较为突出，所以在设计过程中要注意其他的设计元素要支撑它而不是与它争夺用户的注意力。

想要在用户界面中使用图片来很好的表现内容，难点往往在于提供合适的元数据驱动的工具去增强图片所代表意义。比如Facebook上给人增加标签的功能，它把照片变成了某些可发现的东西。为内容找到合适而且有意义的可视化表示是普遍存在于视觉设计和信息架构中的一个难点。

案例2：照片作为设计元素

虽然在用户界面设计中使用照片是个较新的概念，但在网络广告设计方面使用照片却已有了很长的历史。品牌传达中的一些规则是可以遵循的，即把照片当做网站设计中一个不可分割的部分。

与案例1中的设计思想不同，这里照片是用来传达某种信息，为真正的内容创造上下文。比如某些金融机构或软件公司的网站，会使用现成照片（Stock Photo）比如人或者建筑物的照片；而另外一些公司可以把网站内容和要传达的企业形象合并在一张照片里，最明显的例子就是时尚网站。

Benetton在它网站的主页上使用一张图片来传达产品信息和品牌形象。照片是用户的注意力的焦点，它表现的更多是一种感情而不是网站实际的内容。设计该网页的人做了和广告设计师一样的事：把图片作为网站整体设计的一部分，而且图片是经过设计师精心挑选的。本应该作为网站内容的产品（译者注：模特身上的衣服）在这里成为了表达感情的一个媒介。

照片往往能够触发用户与网站建立联系或者与其交互的渴望。因此交互设计师在设计网站的交互流程时需要把那些能够触发用户交互渴望的关键信息告知视觉设计师，这样视觉设计师就可以采用合适的视觉样式。

案例3：软件界面设计中的图片

与许多的数字产品不同，桌面软件的可见部分中并不会使用很多的图片来传达信息。当今的桌面软件界面都是由大量的文字，矩形窗口，图标以及很多透明或3D的效果组成的。图片往往被用在启动画面中，所以并不是一个必需的内容。

在软件的网络界面中使用图片作为顶部的装饰是很常见的，这是由这些系统的“混合”特性决定的--它们同时拥有软件和网站的特点。大多数时候，图片都只起到装饰的作用，没有任何特定的意义，对产品本身的目的来说也不重要，因此往往只占用很小的一块屏幕空间。这样做是为了给实际的内容留出尽可能多的屏幕空间。

上图显示的是SAP的企业门户产品的标准视觉设计。在顶部很小的一张桥的照片是整个视觉设计的一部分，而屏幕下方的图片则是实际内容，它们是和左方的文字相关联的。

设计师虽然像设计网页那样使用了图片作为设计元素，但却把图片放在一个被挤压的位置，这就使得这张图片丧失了它在视觉上的表现力。由于这个图片与内容毫无联系，整个界面的布局（“mise en scene”）都受到了影响。在该程序的上下文中，我们勉强可以理解到这张图片的意义是想用一张模糊的桥的照片来表示这个门户系统的功能。

取其精华：向更高层次的质量迈进

每发布一个新版本，软件厂商都想在视觉表达上更进一步，都想提高自己产品的视觉设计质量。如果真的想要利用照片作为一个媒介来提升视觉设计，那么我们对待照片的方式需要有些改变。

与此同时，为了更好的在显示屏上模拟现实世界，软件厂商花费大量的人力物力去修饰自己的产品，好让它更加的“闪亮（Shiny and glossy）”。但是有时这些多余的“闪光点”并没有提高用户获取信息的效率，反而会造成不必要的干扰而降低效率。现在很多报表工具和商业智能工具都犯了这样的错误。

想要遵循我下面给出的例子或建议并不是那么容易，因为我们的目的是要设计一个以表现信息为中心的系统，同时又要提供给用户有效的工具来使用这个系统，把这两者有机的结合是个很难的任务。然而，一些视觉元素比如图片可以快速而有力向用户展示和建立自己的视觉形象。设计师应该利用这些可能性来抓住用户的注意力使他们参与到一个更全面的交互过程中，而不是使用大量的装饰元素和视觉错乱来打乱用户的工作。

交互式应用中的照片应用举例

上面的截图取自一个叫做DesignKlicks的德国网站（现在叫Seen.by）。该网站允许用户收集图片并给图片加标签。就像很多以照片为中心的应用比如Flickr一样，图片是设计的重点，可以看出图片与其他的设计元素（比如图标，标志，按钮和链接）有很清楚的区分。为了将其复杂的信息架构进行合适的视觉表达，它允许用户以不同的角度来对图片进行排序和显示，从简单的表格到可浏览的3D空间。

上面的截图来自与barbarian集团为gettyImages做的一个艺术项目。此项目应用宽屏的照片创建了一个由连在一起的一组房子组成的3D空间，房子由图片中出现的一些标记元素连接起来。（译者注：自己也没看明白这个例子）

Societe Generale银行使用照片作为其网站上的主要艺术元素，强调了公司为每个人提供个性服务的理念。主要的导航嵌在了图片中，但是通过在图片上新加一层使得导航可以很清楚的被发现。

一个在纽约的艺术品陈列馆 Van De Weghe Fine Art使用照片作为最主要的设计元素。它没有经过什么平面设计，只是简单的用一张全屏的照片来营造一间房子的入口的感觉。

去掉那些耀眼的东西，从大局出发思考用户体验

在设计过程中，信息架构师和交互设计师倾向于关注于他们那部分工作，把后续的工作交给平面设计师或视觉设计师，当然这往往是最好的方法。不过，所有的设计师（包括前面提到的两种设计师）都应该积极的思考产品最后的样子，它会给用户什么样的感觉，毕竟，这就是设计所有的目的所在。

那么，为什么我会在一个倡导“设计背后的设计”的网站上发表这篇文章呢？（译者注：boxes and arrows的主旨是design behind design）原因就是交互设计师和信息架构师拥有很强的概念思考（conceptual thinking）能力，他们往往能在概念层次上决定产品的灵魂。视觉设计应该支持他们的预见和想法，而实际上这种远见通常与“让产品看上去更漂亮”相反。

在下一代用户界面中使用照片的建议

• 把图片集成到交互设计中。不管是单纯的将图片用作视觉元素或是用作交互的一部分，都可以通过让它响应用户的操作来增强它的功能。由于图片比较贴近现实，又不是用语言文字传达信息，所以它比传统的界面元素如图标，按钮等都更有威力。
• 在屏幕空间上花点功夫。要使用图片就要让它对系统整个的外观有真正的影响，不要把它放在像广告条一样很窄的空间里。
• 照片在渲染气氛或调动感情方面比其他媒体更有优势。使用图片要注意使其符合系统的上下文，并要让用户感觉舒服。
• 清晰度，结构，动作，分离，联合--通过模糊，动画，组合，当然还有动机，图片可以迅速向用户传递各种信息。在这些设计元素上下功夫。
• 如果图片是要表现的内容，那么除了简单的把它们放在一个表格中，想想其他的方式。有很多的可能可以使图片对用户来说更加“有形（tangible）”。想想如何利用多图层，可移动的物体，或者3D空间等。
• 设计师要时刻想着应用程序的主题和要展示内容的本质。选择一些真正有意义且符合应用程序上下文的图片。避免使用现成图片或只有装饰作用的图片。尽量使用根据自己的意图和需求处理过的图片。
• 把所有的元素（包括视觉元素）整合到一起来创建一个“整体（holistic）”的用户体验。
  

打印  |  类别：信息和交互  |  源地址