转载Nokia视觉设计.doc

转载 Nokia视觉设计原文地址：Nokia视觉设计作者：iveodesign资料来自诺基亚论坛翻译：Johnson目录：新用户指导视觉设计的重要性理解设备平台屏幕尺寸颜色字体支持图形动画使用设计原则直觉组织的格式塔原则取得设计上的统一性把所有的东西放在一起设计更新：中国新手指南这部分我们介绍移动设备的视觉设计方法。我们首先从介绍移动平台独特的特点开始，然后介绍与之相关的视觉设要点计比如说屏幕尺寸，使用的颜色，图像的支持以及字体的使用。然后我们会重温主流设计的原则然后会提供它们在手机上应用的实例。视觉设计的重要性这是一个晴朗的星期一的早晨，米特苏珊即将为一个会议而迟到了。当她接近地铁站的时候，飞快地看了一下她手机上的地图软件，在她在地下失去信号之前，她确定了一下她的目的地。视觉设计在帮助苏珊确定她的目的地的时候发挥了重要的作用：她帮助她在即使阳光刺眼的环境下也能够看清屏幕，使她搜索的结果很容易被读取并且理解，在信号很差的时候能够提供给她重要的反馈。很多人把视觉设计错误地理解成一项高度主观性的，与情感密切相关的的工作，认为它们是一个项目的非关键性因素。实际上，视觉设计能够在任何项目的成功中扮演重大的角色。尽管视觉风格，个性，颜色，对字体和图像的选择都是视觉设计的一部分，但是还有其它的重要方面，那就是信息设计。它支持一个应用程序的功能，使它能很好的使用，并且最终，影响着这个应用程序成功与否。理解设备在手机设计中，一个主要的挑战是仅仅有一个设备或者平台。你完成的静态设计可能被应用并且被移植到数百个平台上。你越多的理解这些平台，了解它们的性能，了解它们如何与特定的设备交互，你就能越好的装备自己做出更好的设计，使它们运行得完美无缺，并且能很容易的被移植。这些知识有以下貌似不那么明显的好处：设备和平台的限制，使你更多的明白应该和开发团队一起尝试各种实现的可能性，这将会使你的更加具有创造性，从而使我们在项目中作出很多明智的决策。如果文档是你生活中的一部分，那么这些平台和设备的知识能够使你产生对整个团队更加相关和有用的参考文档。对一个效果实现可能性的一个公认的理解有助于你更容易的向你的团队证明你的视觉设计的正确性。你的设计应该是在平台上可以实现的，并且能够按时移植，同时控制在预算以内，最终，它要使每一个用户满意。理解设备从理解你可能会着手的平台开始入手。平台作为一个视觉设计师，你可能要集中你大部分的注意力在显示器前，你总是要考虑如何在你的操作系统或者浏览器或者第三方应用里面呈现或者解释内容。这些东西最有可能在以下的平台上得以呈现：塞班系统：为智能手机专门设计，提供一个丰富并且稳定的操作系统从而使智能手机使用3G，无线网络，VoIP(网络电话)，交互式媒体以及Web技术。因为塞班系统是一个开放的平台，几乎任何人都可以为塞班系统开发应用软件。S60平台式就是基于塞班系统的。S60：S60平台是世界上最流行的智能手机平台。它为所有开发者提供一组一致的技术并且适合多种不同的设备。开发者能够在这个系统上使用塞班C+，一系列的开源C语言和C+API，以及Java语言，Web技术，Flash Lite和Python等一系列语言。Series 40：Series 40系列平台是世界上最广泛使用的手机设备平台。它包含大众市场的移动互联网设备，同样也服务于特定的市场，比如说音乐和时尚。与多任务的S60系统相比，Series 40是一个简单的操作系统。Maemo：在maemo平台上是建立桌面开源组件。这个平台基于GUN/Linux操作系统GNOME桌面环境。其目的是促进应用开发和移动设备的创新技术。maemo UI的屏幕大小是定制的，并且使用典型的具有触摸功能的手持设备。Java：Java平台：微型版(Java ME版本)是优化的移动应用，并且它是最广泛使用的运行环境时的版本。Flash Lite：在网页上提供媒体内容方面，Adobe的Flash技术是一种领先的技术。Flash Lite技术是那种技术的一个移动优化版本。三个版本的Flash Lite技术可以应用到超过九十个诺基亚设备上。Web浏览器和Web Runtime(WRT)：诺基亚通过多个平台来传达移动互联网的体验。S60的网络浏览器是最先进的移动设备的浏览器之一。它能够显示标准的网页，能够显示Flash Lite，音频和视频内容。能够对XHTML和CSS、Javascript技术提供高水平的支持。以万维网的标准为基础，它能够提供一个优化的移动浏览体验。Web Runtime(WRT)是S60浏览器的一个扩展，它本身作为一个运行的平台。它使设计师和开发者们使用现有的网络技术，比如说HTML，CSS，JavaSctipt来创建好看的，容易安装的部件。屏幕尺寸和PC端的显示不同，在PC端，只有两到三种通用的标准尺寸。在移动终端有很多不同的屏幕的大小和形状。目前，很多设备的屏幕已经逐渐变大，但是小一点的屏幕仍然在低端市场上存在。显示器通常支持肖像和风景的显示模式。以前240320的显示就是比较大的了，随着S60第五版本的推出，我们看到了360640像素这样更大的显示屏，他被应用到N97等手机上。目前使用的许多老一代的入门级设备包括流行的176208，128160，和128128像素的显示器。从简单的小屏幕的设备到目前大屏幕的智能手机已经经历了平稳的进步。但是即使是今天，低端设备比如说经典的Nokia2323仍然使用128*160象素的屏幕。为了应对屏幕大小的不同，通用的做法是针对一组设备开发具有相同特征的产品。屏幕大小肯定肯定是那些特征中的一个。其他的可能包括浏览器的类型，XHTML和CSS支持与否，以及颜色深度。一旦这些设备被成组，规则就会被建立来适应图形，布局，造型，甚至是每一个设备的内容。在屏幕尺寸一定的情况下，对设计有影响的部分是你正在设计的平台存在的限制性因素。手机网站要设计一个手机网站，屏幕宽度是你首先需要考虑的因素，因为网页被设计成垂直滚动的。动态改变图像的大小以匹配屏幕的宽度是适应手机网页的最常用的方式。举个例子来说，下面的设备清单，由屏幕的像素宽度分组：很小：84,96,101,128,130,and 132小：160 and 176中：208,220,and 240大：320,360,480或者更大纽约时报网站监测设备的屏幕大小，然后替换标志和其它图形内容以适应屏幕宽度。本机应用程序设计一个本机应用程序，其方法与为一组设备做设计是相似的。但是因为布局经常是固定的，宽度和高度都是要考虑的因素。实际上，设计本机应用程序的最好的方法是完全根据特定的需求和你所做的项目的特征而定，包括你的开发团队的能力，你的设备支持的范围，以及你的项目的进度时间表和预算。这里有一些你要记住的基本的指导因素：避免让人吃惊。提前和你的开发团队沟通，在整个过程中都要让他们投入进来，特别是关于显示效果实现和技术限制的问题。这将在其他人赞成你方案的每一个细节之前，给他们时间考虑你的设计方案并解决存在的问题，如果你的项目将要被移植到数百个平台上，知道从哪里开始是一件很聪明的事情。大部分的项目有一个参考设备，其中一些有几个。一个参考设备是设备的开发团队将基地初步的建立，它将充当其它设备端口的基础。这个设备的设计将继续跟踪设计并且提供一个屏幕尺寸，字体大小和设备的参数等方面的数据。考虑多种方式使你的设计可以被缩放。例如：你可以使用一个平铺的背景而不是一张大的图片吗?某些特定的UI元素(方形，线或者标签)由简单的颜色和形状组成，它们是否可以被动态的创建而不是被纳入每一个应用程序端口的个别的图形。与你的开发团队核对去寻找是否有方法来使你的设计变得更加的灵活。物理屏幕尺寸按照像素进行尺寸的显示仅仅是完成了一半。作为一个设计师，你应该也注意到物理屏幕尺寸对你的设计的影响。考虑一下下面的设备。每一个的屏幕像素都是240320，但是他们有不同的物理尺寸因为他们的屏幕分辨率是不同的。这三个设备中的每一个屏幕都是240320px，但是他们的物理屏幕的大小是不一样的。所以，在像素密度方面，每英寸包含154-199像素不等。这种影响在图形上是非常明显的。尤其是那些包含图形文本和很多细节的图像。所有的这些设备都是240px象素的宽度，然而一个每英寸少于154px的logo可能不知怎么的在199px每英寸的屏幕上显示这么少。虽然这很可能没有意义，但是确实说明了真实的测试设备在设计早期的重要性。这样能够确保在大型计算机上显示的图像适合应用到移动平台同时保持在所有屏幕尺寸下视觉元素保持清晰。同样的内容在更高的屏幕分辨率下可能很快的变得难以确认。颜色像电脑显示器一样，移动设备使用加法颜色模式。虽然早期的移动设备支持非常少的颜色，但是现在颜色的支持功能非常的强大，可以支持12位，16位，24位颜色。你会发现，类似于屏幕尺寸的多样性一样，许多设备支持不同的颜色深度。典型的较新的，低成本的代表(Nokia2330)支持12或者16位的颜色深度。上图是不同比特深度的图像显示模拟，正如这个例子表明：Nokia设备绝大部分都在12-24位的范围。这种颜色深度的不同，随着设备的大量应用，已经成为在设计过程中应该实际考虑的问题。复杂梯度，那些包含两种以上的颜色或者相对一个复杂的路径的元素，也许不能按照预期的效果那样进行显示，即使是在比较新的设备上。应该避免使用渐变色作为背景或者是应用到屏幕的大片区域上。如果从不同的视觉角度看的话，一些设备显示的颜色是不同的，所以你应该在不同的位置测试你的设备。记住和桌面电脑不同，手机设备不会一直被从一个角度进行观察。某些开发工具，比如Adobe Device Central CS4,能够模拟多种显示状态，比如说背光超时或者日光反射到屏幕上。显示效果也是各不相同的，而最新的设备不一定就是最聪明的。通过测试多种设备了解亮度的范围。要特别注意颜色的对比。黑白将始终创造一个最高的对比度。作为一个经验法则，你的目标应为约百分之五十的对比。要记住的是，设备也经常会在日光下使用，在这种状况下，视觉上的对比将会进一步的降低。如果你和品牌经理和市场部门一起工作，尝试管理他们早期的颜色预期。甚至是具有相同的颜色深度的平台实现的颜色也会有不同。并且，由于颜色饱和度上的不同，你很难在让手机屏幕显示相同的颜色。尤其对于蓝色色调，在不同的设备上会有一个比较广泛的范围。字体支持字体在移动设备上的支持是非常的有限的。你对字体控制的严格水平将取决于你的平台。所有的设备支持至少一种字体。此字体经常作为该设备默认的字体，通常称为本机字体或者设备字体。例如。Nokia的S60平台使用一种字体：S60 Sans。该字体由桑那设计，呈现在浏览器或者操作系统中。所有的设备制造商都提供他们自己的定制字体，所以你值得花一些时间让自己熟悉这些字体。如果你正在设计一个网站，它将显示在S60系统的浏览器上，你能影响的类型将会有很大的限制，仅限于控制S60 Sans字体的大小，颜色，样式和字重。在Java ME的开发中，设备字体样式是有限的。字体被分为小，中和大。这实际上是一个很粗略的划分，因为实际的大小会因为平台的不同而不同。你也可以制定一个字体样式(通常黑体或者斜体，但是范围有限，又没有添加对所有平台的支持)并且使用RGB元件或者十六进制值来测试颜色。Java ME技术还可以使您指定自定义字体。但是这个过程可能是相当不同于你熟悉的Web或者是Flash。Java ME技术不仅仅可以指定一个字体。尽管这种方法可以让你显示你想显示的任何字体，它也会增加应用程序的大小。这可能导致程序运行的问题，所以我们不推荐大面积的使用。请注意，它不可能动态的改变位图字体的颜色，所以你希望使用的每一种字体颜色都需要一个单独的版本。在一个大的显示器上为小屏幕而设计可能是非常具有挑战性的一件事，最常见的错误是使字体变得非常大。考虑到设备字体变量的性质和物理显示尺寸的影响，许多设计师使用物理线框创作。然而，这里也有简单的方法来提高你设计的准确性。给屏幕进行截图并且测量一般的文本元素的大小，比如说主体，标题和标点。为了避免到了最后才发现问题，在正式设计开始前，要使用这些测试数据作为指导并且交叉检验你的设计。使用S60 Sans字体在你的线框和设计之中。你可以获取该种字体的TrueType版本并且安装在S60的SDK，然后在你的驱动器上寻找一下位置。C：Symbianversion#ex.9.2release#ex.S60_3rd_FP1_5Epoc32releasewinscwudebzresourcefonts避免使用斜体，它可能很难阅读。不同于传统的印刷字体，它通常使用一个自定义的字体斜体变种，模拟设备的字体往往通过改变字体的上半部略微向右斜体。这种方法会在一定程度上减少易读性。请记住，越来越多的设备支持肖像和风景模式。这些模式可以应用在所有的应用程序或者仅仅是特定的应用程序，比如说浏览器，照相机，或媒体浏览器。图形手机设备支持多种你可能已经非常熟悉的图形格式，包括PNG，JPG和GIF。SVG技术也能在移动平台上通过Flash Lite或者SVG Tiny技术使用。但是要考虑到你的应用要跨设备，跨平台，或者跨制造商，为了避免出现意外，在项目进行的过程中就要讨论图像的格式。在浏览器中的图形一般的图形格式比如说PNG，JPG和GIF在浏览器内都能够得到很好的支持。有超过三分之二的诺基亚设备支持这三种格式。更先进的GIF89a格式通常局限在新一些的设备上。为了确定是否一种设备支持一种特定的图形格式，你可以咨询诺基亚设备论坛或者是DeviceAtlas，他们将会帮你生成通用的表格和图形来可视化图像在设备上的支持。在本机上应用的图形图像在本机应用程序上的需求也是很强烈的。在使用图标或者是其它的界面元素的时候，你会遇到的最常见的问题是透明度的问题。不是所有的设备或者操作系统都支持8-bit的透明度。不同指数的透明度，这无论是开或者关闭，Alpha透明度都提供了不同的级别，这样都不会造成突然地组成。可缩放矢量图形(SVGT)SVGT是一种使用XML来描述2D图形的语言。SVG能够实现交互式的图形内容并且能够缩放和调整不同的分辨率和纵横比的显示。实际上，SVGT特别适合于图标动画，过渡和其它动态的视觉元素。SVGT在许多的平台上都被支持。实际工作的水平会因为平台的不同而不同，这取决于制造商和SVGT安装的版本。对于诺基亚的设备来说，对于SVGT的支持是非常强大的。S60第三版的设备支持SVGT1.1图形。在这些设备上，SVG的内容可以被看作是单独的，或者SVGT图形用户界面可以作为嵌入式应用的图形或者图标。S60的Web浏览器包含一个SVGT插件，这使我们可以直接在浏览器中查看SVGT图形。想要了解更多的信息，请看诺基亚论坛上关于SVGT的介绍。支持java技术的设备也能够支持JSR226，它是一种可以选择的组件，它可以帮助平台在java应用中充分的使用SVGT。SVG能够被富含图形的接口很好的使用，因为图形能够仅仅被缩放就能够适应不同的屏幕尺寸。这样你就不必为每个器件包含不同大小的位图图形。想要了解更多的信息，请到诺基亚论坛上查找。在你使用SVGT来工作时有几点是你一定要记住的：一定要保存成SVGT图形。乍一看，SVG和SVGT可能看起来非常的相似。实际上，SVGT是专门优化来适应资源闲置的设备。注意包含复杂渐变的图形，效果。这些图像，尤其是动画图像，能够对设备的显示有非常严重的影响。动画对于设计师来讲，Flash Lite是迄今为止最简单的平台，它能够让你使用已有的Flash技术来很容易的创建手机动画。如果你正在为其它的平台而设计，告诉你的开发团队：这个项目有好几个选项可以选择，包括SVGT的使用，3D，以及精灵动画。另外值得一提的是，大量的诺基亚设备在浏览器端端支持GIF动画。Flash Lite和Flash相似，它的桌面表兄Flash Lite技术同样支持以时间线为基础的动画和位图图形。由于它支持平台的广泛性，性能是一个值得关注的问题，所以在设计Flash Lite动画的过程中，你应该确定你考虑了以下问题：避免复杂的动画，尤其是那些基于多个时间轴的动作补间动画。使用补间开始你的动画并且手动调整你的动画以去掉不必要的帧。避免不必要的透明度效果或者是渐变效果，在透明度或其它的图形效果上不要添加什么动画效果，因为它们很可能会减慢你的动画速度。使用设计原则无论你是为小屏幕或者是大屏幕而设计，都要适用相同的设计原则。然而，在小屏幕，这些原则更加的重要因为它们与很多小屏幕设备独特的特点相关。它们总是使用间接操作的方式，它们在可变光照的条件下运行，并且任务执行的过程很可能被中断。这些状况和大屏幕的手持设备有着明显的不同。因此，充分的使用设计原则来确保你的应用能够很快的运行并且能够很好的交互是非常重要的。知觉组织的格式塔原则格式塔这个术语是形状或者形式的通用术语。在设计方面，格式塔是20世纪20年代创造的描述设计的整体性原则：一个设计的整体超过它的部分的总和。换句话说，设计的每一个部分影响了整体同时整体也被它的元素所影响。作为一个设计师，你能够应用这些原则来组织信息并且保证用户能够很快的理解屏幕上这些元素的含义，了解各个部分所代表的功能并且让各个组成部分很好的运行。相似性我们本能的会把一些相似的东西组成一个组，比如说一些东西在大小、颜色或者形状方面一致。这个原则能够直观的分隔某一个群体的确定元素即使它们相距很远。反过来，通过对比的创建，我们能够强调某些元素或者使某些元素与其它的元素不同。在下面提供的例子里面，诺基亚viNe应用使用颜色或者形状上的相似来群组一些事物并且在相似的媒体类型之间暗示它们之间的关系。接近性原则相近的元素很自然的被感觉到是相关的。这一原则应该被用于组织内容并且保证关键性的内容比如说顶级导航栏被认为是相关的。因为小屏幕尺寸的限制，接近性原则的使用也许会受到很大的限制。毕竟，你要把很多独立的实体组织到一个屏幕上并且不让它们因为太靠近而混淆为一个整体。在下面的例子里面，Flickr的组合导航链接已经创建了一个导航菜单，但都有不同程度的接近来区分三个部分的关系。通过比较，诺基亚的菜单被视为一个单一的网格因为图标彼此靠近并且在距离上没有什么区别。重复性原则这个原则讲的是在位置，大小，颜色或者形状上的重复能够创造一种自然的统一。这种原则经常在平铺背景这种应用中看到，这种方法创造了一种深度和兴趣而不显得界面很满或者是使你的眼睛分神而不去关注界面上的重要的元素。图的对地关系这个原则讲的是最引人注目的视觉元素被作为是觉得焦点被感觉到然而它周围的空间则会作为背景被感觉到。这个原则，通常通过颜色，明度或者是阴影等视觉效果来实现。这个原则应用到弹出窗口，对话框以及被选择强调的元素会起到很好的效果，他能使其看起来和下面的内容分开。在下面提供的例子里面。相比背景元素，弹出窗口使用一种相似的颜色。为了建立明确的对地关系，设计师把背景暗了下去，因此增加了内容和背景之间的对比度。关闭在这个原则中，我们会很自然的关闭使整个视觉设计看起来不完整的缺口。在下面的这个例子里面，前进按钮已经被相当的暗下去了。乍看一下，这个圆圈里有一个很大的缺口。尽管这样，这个音乐播放器仍然会被视为一个圆形的元素。临近原则加强了这种看法。假设这五个按钮在整个界面上随机的放置，我们很可能不把他们作为一系列的相关的控制。连续原则这个原则讲的是我们有一种内在的能力来完成视觉模式并且把元素安排成一连串的表单。下面的这个例子显示了被筹划的一系列的元素以使它们形成一个连续的路径并且引导眼睛无论在横向上或者是纵向上扫过屏幕。这一原则同样也是我们使用一连串的图片来产生动画的基础。在手机设备的导航菜单上，短的动画能够产生很好的效果，帮助使用者在导航条上在他们的手指之间理清一个清楚地联系并把相应的结果显示在屏幕上。在设计上实现统一统一是设计的另外一个重要的元素。尽管没有具体的指标来测量统一性，但是当所有的屏幕元素感觉就像它们是在一起的一样并且按照一定的目的被组织或者排列起来的时候，你也可以明显的感觉到这一原则被实现了。正如一个随机的，不匹配的系列服务的产品将会使人感觉不平衡一样，随便构思的视觉元素和位置也会给人同样的感觉。为了达到这种统一，下面的因素是要注意的：空间在移动设备上，空间是非常珍贵的。但是在所有的设计中保持一定的空间都是非常重要的。一个相关的例子说明了拥挤的屏幕可能是很危险的因为对你的观众来讲，看到你的意图或者你强调的东西可能是很困难的。下面的这个例子说明了如何设计原则和把部分的工作组合起来来创建设计中的统一。在中心放置了一个小的头像并且让它与周围形成很高的对比度以确立其主导地位并且创造兴趣。周围的地图是暗淡的，与小头像形成了强烈的对比，这样就形成了对地关系，从而进一步提高了组成的影响。视觉流通过你的应用来引导用户是很重要的。眼睛典型的浏览方式是从左到右，即使在移动平台上也是这样，然后是从上到下。使用格塔式原则中的重复和持续等原则已经能够在屏幕上按照一种特定的顺序来呈现你的信息。然而，确保你的设计不会通过内容是你的浏览者的目光迅速的转动。下面的两个设计方法：显性和层次结构也能够在创建视觉流方面对你有用。显性原则显性是一种对比度的形式：一种视觉元素与另一个相比占据主导地位。在下面的例子A中使用了清楚的，高对比度的元素来表明导航处的元素是视觉的焦点。然而在例子B中，使用的元素的整体颜色与背景色是相近的所以就很难被感知到了。在移动平台上，这种显性的缺乏可能是非常危险的，因为它可能是用户停下来他们正在做的东西并且仔细的审视他们屏幕上的所有的元素来确定哪一个可能是焦点。这就会导致时间的浪费，造成混淆，并且使使用导航信息变成了一种缓慢，痛苦的任务。层次结构原则在小屏幕上，建立一种明确的视觉层次在暗示元素之间的关系和指导用户按照一种一致和可预测的方式的方面是非常有用的。再一次，设计原则中的对比和显性原则密不可分。在下面的例子里，明亮的，高对比度的头部建立起的视觉层次帮助把成组的元素很容易的分成了有区别的部分。层次结构原则在小屏幕上，建立一种明确的视觉层次在暗示元素之间的关系和指导用户按照一种一致和可预测的方式的方面是非常有用的。再一次，设计原则中的对比和显性原则密不可分。在下面的例子里，明亮的，高对比度的头部建立起的视觉层次帮助把成组的元素很容易的分成了有区别的部分。颜色在视觉设计中，颜色扮演了很重要的角色。它能够帮助我们组织和分组信息，帮助集中注意力，传达区分。颜色也能够帮助使用者浏览信息并且很快的确定结构或者功能。比如说头部，菜单项或者超级链接。然而，当它没有被正确的使用的时候，它可能会分散你的注意力，创造视觉噪音，可能导致使用者在根本没有联系的元素之间建立起联系。鉴于你可能要支持平台的多样性以及人们在他们的移动设备上往往执行一些重要的任务，在处理颜色的时候，一些东西是一定要记住的。不要完全依赖色彩来传达关键信息比如网络中断或者信息错误。这种做法将确保用户在不太复杂的设备或者可变的光照环境下清楚地了解你提供信息的重要程度。记住大约10%的人有不同程度的色盲。如果一种颜色被用来表达一种特定的意义(比如，红色是危险或者错误的警告)，一定要确保你所选择的颜色与你想要表达的含义之间有一种普遍的联系并且并且当心由于文化差异造成的潜在性的冲突。参考可用性文章，诺基亚论坛上的文化解释来了解文化方面的可用性以及视觉方面的信息。记得保持图的对地关系清晰地重要性。努力保持在50%以上的对比度，尤其是对于关键性的界面元素和正文。如果你对你的颜色不确定的话，你可以把你的设计转换成灰度模式来看一下哪些元素很突出哪些元素融入到背景中去了。图像和图形元素在视觉设计中，图形和图像扮演着一个重要的角色，但是大部分的视觉元素增加