Web设计视觉设计

基于UCD的WEB设计之-视觉设计User-Centered Design for the Web-Visual Design金蝶研究院张少华2010年12月31日

目录视觉设计相关概念及发展构成要素基于UCD用户体验模型的视觉设计Web 2.0 :为表达信息而设计常见的视觉设计的错误理解总结

一、视觉设计的相关概念章节标题概念发展趋势

视觉设计的一般定义视觉设计是针对视觉感官的主观形式的表现手段和结果。自身视觉需求因素的诉求视觉传达设计（Visual Communication Design）以某种目的为先导的，通过可视的艺术形式传达一些特定的信息到被传达对象，并且对被传达对象产生影响的过程。三个基本要素：文字、图形、色彩标志设计、广告设计、包装设计、店内外环境设计、企业形象设计等

通过视觉形象传达给目标用户，起着沟通桥梁的作用。视觉设计定义的演变趋势对未来发展的推测：Graphic Design1，人所获得的信息近80%来自视觉； 2，从知识爆炸到信息爆炸的现代文明进程观； 3，优秀媒体和新媒体无一不是对视听渠道的整合结果； 4，高科技时代的嗅觉、味觉和知觉需要或者已经在充分发掘。

视觉设计的理论研究范畴a.眼睛器官的生理分析；b.视觉信号传递的生理分析；c.视觉经验形成分析理论；其它感官对视觉的影响；d.视觉心理学；e.与视觉科学的交叉学科；f.视觉仿生学；g.视觉与认知的关系研究；h.视觉信息分析；i.视觉科学展望；j.视觉哲学；k.视觉效率；l.视错心理研究；m.增强视觉途径研究；n.极端视觉的形态与意识影响分析；......

F形网页浏览眼球轨迹的研究报告示例2006年美国长期研究网站可用性的著名网站设计师杰柯柏·尼尔森（Jakob Nielsen）发表了一项《眼球轨迹的研究》报告报告称，大多数情况下浏览者都不由自主的以“Ｆ”形状的模式阅读网页，这种基本恒定的阅读习惯决定了网页呈现F形的关注热度。第一步：水平移动浏览者首先在网页最上部形成一个水平浏览轨迹。第二步：目光下移，短范围水平移动浏览者会将目光向下移，扫描比上一步短的区域。第三步：垂直浏览浏览者完成上两步后，会将目光沿网页左侧垂直扫描；这一步的浏览速度较慢，也较有系统性、条理性。

F形浏览模式对网页设计的影响示例用户不会逐字的完全阅读你的文本。

前两段必须指出最重要的信息。F形浏览模式不是绝对，具有局限性和时代特征，最大的启示是对具体的浏览行为的重视：人们阅读方式不同，你的书写方式也必须不同。倒金字塔倒金字塔是一种在文章开头表达总结文字的写作风格。这种方式使用了新闻业中著名的“瀑布效应”，新闻作者试图让他们的读者即时知道他们的报道的主题。文章以总结开头，接着是关键点，最后那些次要的细节，如背景资料。由于网络用户需要即时的满足，这种倒金字塔写作风格，对于网络写作和更好的用户体验是非常重要的。

WEB2.0 的中心定位原则示例08年以前，你可以找到很多“流动布局”和“左对齐并固定宽度”的F形布局，现在内容开始在出现在屏幕的中央。现在以前

视觉设计研究的几个立论

视觉需要传递准确的信息

视觉应包含一定的信息量

视觉效果来源于匹配程度

视觉与信息的唯一匹配性（这是视觉传达的最高境界）二、视觉设计语言的构成要素章节标题色彩图形文字布局

色彩在视觉感知过程中，色彩是第一信息刺激，视觉传达信息接受者对色彩的感知和反射是最敏感、最直接和最强烈的。色彩是人类生活中的一个重要元素;非常容易带有政治、经济、文化、宗教、情感等要表达的意念。色彩对人眼刺激的最佳时间值约为0.7秒。人对色彩的生理反应强---弱---强人对色彩的心理反应满意---不满意---满意

色彩的情感倾向性示例红色最具有视觉冲击力的色彩；暗示速度和动态；可以刺激心跳速度、加快呼吸、刺激食欲；红色的衣服使人身形显大；红色的车最容易被偷。红色的正面联想激情、爱情、鲜血、能量、热心、激动、热量、力量、热情、活力。橙色橙色能促进食欲；橙色的房间代表了友善，带给人愉快，能促使人谈话和思考；橙色能够用来强化视觉，海滩救生员的救生服橙色的正面联想光明、智慧、创造力、温暖、欢喜、鼓舞、独特性、能量、活跃、模拟、社交、健康、奇想、活力、华美、明朗、甘美。

色彩的情感倾向性示例黄色比纯白色的亮度还要高；可以促进新陈代谢；明亮的黄色是所有色彩中最容易让人产生疲劳感的颜色，很刺激人的眼睛；暗淡的黄色可以加强人们的注意力，所以多应用于提示牌黄色的正面联想聪明、才智、乐观、光辉、喜悦、平凡、泼辣、明快、希望、光明、明媚、理想主义。绿色让眼睛放松的色彩；绿色对人的精神有镇静和恢复的功效，通常在医院中让病人放松；通常绿色的意义是“通行”，还有秩序的意义；绿色可以促进消化，还可以减轻胃痛绿色的正面联想和平、安全、生长、新鲜、丰产、金钱、种植、康复、成功、自然、和谐、诚实、青春。

色彩的情感倾向性示例蓝色自然界中很难找到蓝色的事物，抑制食欲，让人没有胃口；能让人的身体分泌安定素，放松身体；在蓝色的环境中工作效率比较高；蓝色的服装通常会体现出一种可信赖关系蓝色的正面联想学识、凉爽、和平、雄性、沉思、忠诚、正义、智慧、平静、悠久、理智、深远、无限、理想、永恒。紫色娇柔的、浪漫的品性；通常与中性化产生联系；自然界中很难找到紫色，所以具有“人造”的意义；古代紫色染料洗染的衣物只有贵族和富有的人才能够穿上；紫色能够激发人们的想像力紫色的正面联想优雅、高贵、重、神秘、女性化、奢侈、智慧、想像、诡辩、等级、灵感、财富、高尚、古朴。

色彩的情感倾向性示例黑色黑色具有视觉收缩作用；黑色能让和它相配的颜色看上去更明亮；在色彩治疗学中，认为黑色可以激发自信和力量；黑色通常会与黑手党产生联系黑色的正面联想权力、威信、重量、诡异、高雅、仪式、严肃、高贵、孤独、神秘、时髦、严肃、刚健、坚实、生命。白色西方一般认为会带来好运；白色是表达到最完美平衡的颜色；由于白色太明亮，会引起某些人群的头疼感；白光会引起暂时的失明；白色经常会同上帝、天使联系起来白色的正面联想清洁、神圣、洁白、纯洁、纯真、神秘、完美、美德、柔软、庄严、简洁、真实、婚礼。

色彩的情感倾向性示例灰色灰色通常不能引起观众比较强烈的情感变化；灰色是白色和黑色平衡的结果；灰色的补色也是其本身灰色的正面联想中性、平衡、安全、可信、谦虚、成熟、智能、才智、平凡、古典主义。

图形图形设计是一个把概念（理念）视觉化、形象化、信息化的表达过程图形作为一种视觉形态，本身就具有语言信息的表达特征

图形几个特征表现性设计所应用的图形或符号应具有明确的意思；使视觉传达信息接受者，能够快速、准确地认知或解读图形信息。

图形几个特征功能性图形语言应充分刺激视觉传达信息接受者的联想能力和视觉经验

图形几个特征象征性图形的象征特性非常容易使视觉传达信息接受者理解和感知信息语言的目的和效应

文字文字是人们思想感情的图画形式，是记录语言信息的视觉符号。象形文字：利用绘画表现思想、记录事实；表意文字和表音文字：在形式上都有抽象的含义，并且是依照一定的构成法则组成；

文字设计从视觉角度上讲，任何形式的文字都具有图形含义。以文字的内容为依据进行艺术处理字体造型的设计表现出丰富的艺术内容和情感气质主要内容：研究字体的合理结构、字形之间的有机联系、文字的编排。设计分类：平面文字设计、立体文字设计、动态文字设计

布局（编排）以传达的主体思想为依据，将各种视觉要素进行科学的安排和组织，使各个组成部分结构平衡协调。

布局(编排)的概念图形是一种视觉邀请！布局是一种对视觉空间的设计！

黄金分割法布局方法示例黄金分割点约等于0．618：1因为黄金分割率和黄金矩形能够给画面带来美感，令人愉悦的原因，不同行业中都有着广泛而重要的应用。网站设计排版黄金分割-twitter网站设计排版黄金分割-QQ官网网站设计排版黄金分割-大旗

人的视觉流程“视觉流”——人在观察或者阅读的时候，视线有一种自然的流动习惯（从左到右，从上到下，从左上到右下流动，在流动过程中，人的视觉注意力会逐渐减弱）12最佳视域画面一般在画面的左上部和中上部而画面上部占整个面积的三分之一处最为引人注目

空间布局的形式随着时代的发展，编排的概念已经不仅仅局限在二维空间上面，空间视觉元素的编排和动态视觉元素的编排已经越来越受到重视。（１）平面编排设计（２）空间编排设计（３）动态编排设计

三、基于UCD用户体验模型的视觉设计章节标题UCD相关简述视觉设计处于用户体验模型的顶端视觉设计的“轻设计重体验”

UCD（User Centered Design）以用户为中心的设计。在网站设计过程中以用户体验为设计决策的中心，强调用户优先的设计模式。构建提供使用价值，又能提供积极用户体验的网站清晰、易用，减少误操作，缩短找到信息使用时间并提升用户满意度。

以使用者为中心的设计模式

以公司为中心的设计模式

以技术为中心的设计模式

以设计者为中心的设计模式

没有需要的产品或服务

访问速度过慢用户放弃一个网站的原因

典型的10种错误想法网站已经对用户很友好了；在一下个月开始运行前，我们需要做一些可用性测试；我们能够使用xml,SOAP以及其他先进技术来解决这个问题；如果可以停下来，花一点时间考虑界面如何工作就足够了；用户太蠢；哦，用户应该读读用户手册；我们不需要用户测试，我知道容易使用；我们刚刚放了一个“建设中”标志；缩小字号，那样我们可以在首页放更多的内容；我们需要一个光彩四射的界面。

用户体验的要素The Elements of User Experience约瑟夫▪派恩和詹姆士▪吉尔摩在《体验经济》一书中提出其观点：所谓“体验”就是企业以商品为道具，以服务为舞台，以顾客为中心，创造出可以使消费者全面参与、让消费者感到值得回忆的活动。了解视觉设计所在的层面表现层框架层结构层范围层战略层

用户体验的5个要素自身目标与用户需求5.战略层成功的用户体验，起基础是一个被明确表达的“战略”。

知道企业与用户双方对网站的期许和目标，有助于确立用户体验各方面战略的制定。用户体验的5个要素对需求的整合4.范围层带着“我们想要什么”、“我们的用户想要什么”的明确认识，我们就能弄清楚如何去满足所有这些战略的目标。

当你把用户需求和网站目标转变成网站应该提供给用户什么样的内容和功能时，战略就变成了范围。用户体验的5个要素如何、可以、应该……3.结构层在收集完用户需求并将其排列好优先级别之后，我们对于最终产品将会包括什么特性已经有了清楚的印象。

但是，这些需求并没有说明如何将这些分散的片段组成一个整体。这就是范围层的上面一层：为网站创建一个概念结构。用户体验的5个要素布局2.框架层在充满概念的结构层中开始形成了大量的需求，这些需求都是来自我们的战略目标的需求。

在框架层，我们要更进一步地提炼这些结构，确定很详细的界面外观、导航和信息设计，这能让晦涩的结构变得更实在。用户体验的5个要素视觉呈现1.表现层在这个五层模型的顶端，我们把注意力转移到网站用户会首先注意到的那方面：视觉设计。

这里，内容、功能和美学汇集到一起来产生一个最终设计，这将满足其他四个层面的所有目标。基于体验模型的层次结构的思考按照用户体验的层次进行项目设计如果想在开始“较高层面”设计之前，要完全确定“较低层面”的话，几乎可以肯定的是，你已经把你的项目日程——也许是你最终产品的成功——扔进了一个危险的境地之中。用户不仅仅为了体验导航的乐趣而访问网站。关键是内容。信息架构着重于设计组织分类和导航的结构，从而让用户可以提高效率、有效地浏览网站的内容。避免比喻，就是要减少对用户在“理解和使用网站功能”时对心理的要求。有时候，你不需要自己创造一些与众不同的新词汇，否则会让用户感到迷惑。

视觉设计的”轻设计重体验”User Experience网站体验是基于网络的体验，是体验的延伸。指的是利用网络特性，为客户提供完善的网络体验，提高客户的满意度，从而与客户建立起紧密而持续的关系。视觉设计与网站体验 1、感官体验2、交互体验3、情感体验4、浏览体验5、信任体验

用户体验的5个分类1. 感官体验：呈现给用户视听上的体验，强调舒适性。作为网站交互体验设计的第一层，感官体验主要通过网站的整体形象来创造，核心是网站的主题风格和UI(USER INTERFACE)设计。UI(USER INTERFACE)设计色彩布局网站元素主题风格是指感官形象中独特、持续、一致的品质，这是最能体现网站差异化的地方，UI的设计很多网站都有共同之处，但网站主题风格的提炼和表现都是独一无二的。视觉设计风格“style” 构成：1.色彩倾向 2.布局结构 3.造型的提炼 4.质感的营造主要包括：制定站点VI规范，维持视觉统一性，按照色彩的应用规范进行设计，形成视觉主题风格并合理色彩视觉应用的规范性性、一致性、差异化的设计原则文字使用要规范，语法，大小，颜色，大小写的规范化界面的用户体验是否良好，讲究均衡，重点突出的设计思路。

信息的有效传达主要包括：是否符合框架的需求要求，符合信息架构内容交互的基本构想重点内容的有效传达；每个页面（板块）只有一块视觉重点。并且，突出重点，不让用户去找。

用户体验的5个分类2. 交互体验：呈现给用户操作上的体验，强调易用和可用性。网民使用网站过程中的感受。这种感受来源于很多方面：包括功能、视觉和可用性等多个方面。但如果分析网民在网站上的所有操作行为，无非就两类：一类是需要点击鼠标的，一类是需要键盘输入的。

交互行为优化，也就是网站操作的便捷程度。

主要体现在流程是否合理、减少无效点击、简化注册流程、厘清访问路径等。视觉设计是交互体验的第一要素。

视觉设计的引导和强化推荐操作示例强而明晰的引导是十分必要的，研究表明用户在浏览页面的时候是跳跃性、非线性的，用户并不喜欢在诸多的操作中选择和寻找最佳选项。所以清晰的引导就显得更加重要了。重要和常用操作还可以特异处理，以便于寻找和点击。纠错状态：获取焦点后的强烈视觉提示

视觉设计的高可见按钮交互模式-----提供明晰的视觉暗示指引隐藏或弱化不常用的操作

最本质的设计原理，让待触发的按钮被关注和实施是视觉交互体验的职责所在

用户体验的5个分类3.浏览体验：呈现给用户浏览上的体验，强调吸引性。用户对信息内容的获取的便利性，功能的合理性内容的重点推介(倒金字塔)

多通道的信息粘度用户体验的5个分类4.情感体验：呈现给用户心理上的体验，强调友好性。情感体验关系到人们访问网站时的好恶情绪和态度心情。

情感体验设计的核心是激发用户的共鸣心理。这需要深刻理解用户的访问期待，找到那些能够刺激用户情况的设计要素，才能吸引用户进一步的关注和参与。用户体验的5个分类5.信任体验：呈现给用户的信任体验，强调有用性。感官和情感体验更多的是一种条件反射式的流露，而用户的信任体验则是一个相对理性的思考过程。树立形象，建立信任

基于用户体验网站视觉设计过程中一些补充在视觉设计中，我们用于吸引用户注意的一个主要工具就是对比（contrast）。把用户的注意力吸引到界面中的关键部分，对比是一个重要手段，能帮助用户理解页面导航元素之间的关系。同时，对比还是传达信息设计中的概念群组的主要手段。在设计中保持一致性（uniformity）是另一个重要的组成部分，它能使你的设计有效地传达信息，而不会导致用户迷惑或焦虑。“一致性”在视觉设计的许多不同方面都会起到作用。视觉化地呈现结构，对我们而言，这是表述“分支、群组、组件之间的联系”的一种最高效的方式。很多时候，你必须在不同的做法之间作出妥协并评估利弊以及进行取舍。有意识、有目的做出每一个决定，并在执行时将每一个决定都建立在对其背后的议题的理解之上。

对用户体验决策的反思由现状决定的设计

由领导决定的设计基于用户体验层次流程的用户体验输出输出用户体验分析报告输出用户体验分析报告基于视觉设计的整合输出用户体验分析报告输出用户体验分析报告

四、Web 2.0:为表达信息而设计章节标题Web 2.0Web 2.0 视觉元素当前趋势

Web 2.0Web 2.0：面向用户的需求，努力提供具有最简单，给用户提供最有效的网站访问解决方案。Web2.0视觉的最基本印象是大图标，直观的导航，中心的设计和多项实用功能。特征特点用户参与网站内容制造。web2.0更加注重交互性。符合web标准的网站设计。web2.0网站与web1.0没有绝对的界限。web2.0的核心不是技术而在于指导思想。(UCD)多人参与；用户是主体；可读可写的互联网；具备WEB 2.0的技术元素；信息源数据的管理Web2.0技术主要包括：博客（BLOG）、RSS、百科全书(Wiki)、网摘、社会网络（SNS）、P2P、即时信息（IM）等。

Web 2.0视觉元素当前趋势色彩版式标志（logo）导航按钮Icon(图标)大字号其他WEB2.0站点的总体设计风格：简约设计，渐变色的应用，艳丽的图标，反射效果，下拉阴影，以及大号文字等等。。。

a. 色彩的倾向性明快的颜色带给人愉悦的心情；大部分 Web 2.0 网站不约而同地采用了绿色，但是深蓝、橙色和粉红色也同样适用；渐变的使用（色彩的梯级变化）。色彩特征：色相上的高纯度；明度上的高亮度

B. 版面设计趋势1.干净色块化水平分布中心定位原则其他---空白的活力 (非指白色；使页面具备呼吸空间)巧妙利用空白可以提高页面的易读性和易用性。空白可以分离出重要信息，使眼睛得到休息，并给人以冷静和有秩序的感觉。

轻设计，重体验-----清晰且温和的提示

c. 标志（logo）web2.0时代的logo一般是字体活泼、颜色鲜艳、字体较大、结构简明，感觉很有生气。

具备光亮感和装饰性元素；色系变化富有通透感！质感的表现多样化。演变的力量

d. 导航WEB 2.0 多数导航的设计趋势的一个大的主题要素是：简单、有效与干净。对于视觉设计导航要解决的问题：灵活的响应和清晰的可交互元素导航的设计除了视觉设计之外，更重要的是导航信息流的宽度和深度问题！保持平衡关系深度：较大的深度空间时，信息重点明确；架构清晰；缺点是用户需通过多次点击或许相关信息内容，增加了难度。宽度：较大的宽度时，用户可以明确的获取相关信息的选择，减少点击；缺点是用户不易发现重点信息。简介的导航网站设计一般最多不超过7个导航菜单项。有些甚至少于二个（首页、注册）

http://www.amazon.com/1998年1999-2000年2001年之后不断的尝试

现在的 http://www.amazon.com/使用商品目录做为侧辅助导航，彻底取代分类菜单。核心是强化了搜索引擎的效能！淘宝也一样！

Web设计视觉设计

More Related Content

Viewers also liked (15)