Soumettre la recherche
Mettre en ligne
Web设计 视觉设计
•
17 j'aime
•
677 vues
S
S 2
Suivre
从视觉设计的概念到基于UCD的思想在用户体验方面一些探索及对Web视觉设计新的认识!
Lire moins
Lire la suite
Design
Signaler
Partager
Signaler
Partager
1 sur 81
Recommandé
Grenelle 2 : nouveaux outils, nouveaux langages - conférence
Grenelle 2 : nouveaux outils, nouveaux langages - conférence
Cap'Com
Plus d’1 milliard de pages traitées par Esker on Demand
Plus d’1 milliard de pages traitées par Esker on Demand
ESKER
Etude CXP 2014
Etude CXP 2014
ESKER
Time to Act
Time to Act
Gouyette Jean Michel
Décadence et renaissance d'un viaducer
Décadence et renaissance d'un viaducer
l’Institut français des sciences et technologies des transports, de l’aménagement et des réseaux
20110416 la coffre-fort_de_la_fin_du_monde
20110416 la coffre-fort_de_la_fin_du_monde
思黎 辛
L'information personnelle numérique - BSidesQuebec2013
L'information personnelle numérique - BSidesQuebec2013
BSidesQuebec2013
Etude et implémentation de quelle que
Etude et implémentation de quelle que
Yassine Nasser
Recommandé
Grenelle 2 : nouveaux outils, nouveaux langages - conférence
Grenelle 2 : nouveaux outils, nouveaux langages - conférence
Cap'Com
Plus d’1 milliard de pages traitées par Esker on Demand
Plus d’1 milliard de pages traitées par Esker on Demand
ESKER
Etude CXP 2014
Etude CXP 2014
ESKER
Time to Act
Time to Act
Gouyette Jean Michel
Décadence et renaissance d'un viaducer
Décadence et renaissance d'un viaducer
l’Institut français des sciences et technologies des transports, de l’aménagement et des réseaux
20110416 la coffre-fort_de_la_fin_du_monde
20110416 la coffre-fort_de_la_fin_du_monde
思黎 辛
L'information personnelle numérique - BSidesQuebec2013
L'information personnelle numérique - BSidesQuebec2013
BSidesQuebec2013
Etude et implémentation de quelle que
Etude et implémentation de quelle que
Yassine Nasser
Ppe gsb pao_souchard
Ppe gsb pao_souchard
Belzebuth78
122912 public notification (obama & pay pal attacks) - french
122912 public notification (obama & pay pal attacks) - french
VogelDenise
(Cr marchés publics 121112)
(Cr marchés publics 121112)
ALGuiheneuf
Gaza
Gaza
Regis Barbosa Batista
Présentation Assemblée Générale du REF68
Présentation Assemblée Générale du REF68
webmasterref68
Activité commerciale du premier trimestre 2014
Activité commerciale du premier trimestre 2014
ESKER
Signature électronique ou piste d’audit fiable : vrai ou faux débat ?
Signature électronique ou piste d’audit fiable : vrai ou faux débat ?
ESKER
La belle époque
La belle époque
Mónica Prado
Logiciel de gestion SaaS : quelle valeur ajoutée pour les experts comptables ?
Logiciel de gestion SaaS : quelle valeur ajoutée pour les experts comptables ?
ITvite by Audaxis
Le transporteur
Le transporteur
Bernard Alexandre
Page Personnel, filiale de PageGroup, se tourne vers Esker pour automatiser s...
Page Personnel, filiale de PageGroup, se tourne vers Esker pour automatiser s...
ESKER
Direct Energie confie à Esker la gestion de ses factures fournisseurs
Direct Energie confie à Esker la gestion de ses factures fournisseurs
ESKER
Competitvite Entreprises
Competitvite Entreprises
Gouyette Jean Michel
3
3
servicequipos
La reina del sur
La reina del sur
shirleycantillo
Contenu connexe
En vedette
Ppe gsb pao_souchard
Ppe gsb pao_souchard
Belzebuth78
122912 public notification (obama & pay pal attacks) - french
122912 public notification (obama & pay pal attacks) - french
VogelDenise
(Cr marchés publics 121112)
(Cr marchés publics 121112)
ALGuiheneuf
Gaza
Gaza
Regis Barbosa Batista
Présentation Assemblée Générale du REF68
Présentation Assemblée Générale du REF68
webmasterref68
Activité commerciale du premier trimestre 2014
Activité commerciale du premier trimestre 2014
ESKER
Signature électronique ou piste d’audit fiable : vrai ou faux débat ?
Signature électronique ou piste d’audit fiable : vrai ou faux débat ?
ESKER
La belle époque
La belle époque
Mónica Prado
Logiciel de gestion SaaS : quelle valeur ajoutée pour les experts comptables ?
Logiciel de gestion SaaS : quelle valeur ajoutée pour les experts comptables ?
ITvite by Audaxis
Le transporteur
Le transporteur
Bernard Alexandre
Page Personnel, filiale de PageGroup, se tourne vers Esker pour automatiser s...
Page Personnel, filiale de PageGroup, se tourne vers Esker pour automatiser s...
ESKER
Direct Energie confie à Esker la gestion de ses factures fournisseurs
Direct Energie confie à Esker la gestion de ses factures fournisseurs
ESKER
Competitvite Entreprises
Competitvite Entreprises
Gouyette Jean Michel
3
3
servicequipos
La reina del sur
La reina del sur
shirleycantillo
En vedette
(15)
Ppe gsb pao_souchard
Ppe gsb pao_souchard
122912 public notification (obama & pay pal attacks) - french
122912 public notification (obama & pay pal attacks) - french
(Cr marchés publics 121112)
(Cr marchés publics 121112)
Gaza
Gaza
Présentation Assemblée Générale du REF68
Présentation Assemblée Générale du REF68
Activité commerciale du premier trimestre 2014
Activité commerciale du premier trimestre 2014
Signature électronique ou piste d’audit fiable : vrai ou faux débat ?
Signature électronique ou piste d’audit fiable : vrai ou faux débat ?
La belle époque
La belle époque
Logiciel de gestion SaaS : quelle valeur ajoutée pour les experts comptables ?
Logiciel de gestion SaaS : quelle valeur ajoutée pour les experts comptables ?
Le transporteur
Le transporteur
Page Personnel, filiale de PageGroup, se tourne vers Esker pour automatiser s...
Page Personnel, filiale de PageGroup, se tourne vers Esker pour automatiser s...
Direct Energie confie à Esker la gestion de ses factures fournisseurs
Direct Energie confie à Esker la gestion de ses factures fournisseurs
Competitvite Entreprises
Competitvite Entreprises
3
3
La reina del sur
La reina del sur
Web设计 视觉设计
1.
基于UCD的WEB设计之-视觉设计 User-Centered Design
for the Web-Visual Design 金蝶研究院 张少华 2010年12月31日
2.
目录 视觉设计相关概念及发展 构成要素
基于UCD用户体验模型的视觉设计 Web 2.0 :为表达信息而设计 常见的视觉设计的错误理解 总结
3.
一、视觉设计的相关概念 章节标题 概念
发展 趋势
4.
5.
6.
7.
F形网页浏览眼球轨迹的研究报告 示例 2006年美国长期研究网站可用性的著名网站设计师杰柯柏·尼尔森(Jakob
Nielsen) 发表了一项《眼球轨迹的研究》报告 报告称,大多数情况下浏览者都不由自主的以“F”形状的模式阅读网页,这种基本恒定的阅读习惯决定了网页呈现F形的关注热度。 第一步:水平移动 浏览者首先在网页最上部形成一个水平浏览轨迹。 第二步:目光下移,短范围水平移动 浏览者会将目光向下移,扫描比上一步短的区域。 第三步:垂直浏览 浏览者完成上两步后,会将目光沿网页左侧垂直扫描;这一步的浏览速度较慢,也较有系统性、条理性。
8.
9.
前两段必须指出最重要的信息。F形浏览模式不是绝对,具有局限性和时代特征,最大的启示是对具体的浏览行为的重视:人们阅读方式不同,你的书写方式也必须不同。 倒金字塔 倒金字塔是一种在文章开头表达总结文字的写作风格。
这种方式使用了新闻业中著名的“瀑布效应”,新闻作者试图让他们的读者即时知道他们的报道的主题。文章以总结开头,接着是关键点,最后那些次要的细节,如背景资料。由于网络用户需要即时的满足,这种倒金字塔写作风格,对于网络写作和更好的用户体验是非常重要的。
10.
WEB2.0 的中心定位原则 示例
08年以前,你可以找到很多“流动布局”和“左对齐并固定宽度”的F形布局,现在内容开始在出现在屏幕的中央。 现在 以前
11.
12.
视觉需要传递准确的信息
13.
视觉应包含一定的信息量
14.
视觉效果来源于匹配程度
15.
16.
17.
色彩的情感倾向性 示例 红色
最具有视觉冲击力的色彩; 暗示速度和动态;可以刺激心跳速度、加快呼吸、刺激食欲; 红色的衣服使人身形显大; 红色的车最容易被偷。 红色的正面联想激情、爱情、鲜血、能量、热心、激动、热量、力量、热情、活力。 橙色 橙色能促进食欲; 橙色的房间代表了友善,带给人愉快,能促使人谈话和思考; 橙色能够用来强化视觉,海滩救生员的救生服 橙色的正面联想光明、智慧、创造力、温暖、欢喜、鼓舞、独特性、能量、活跃、模拟、社交、健康、奇想、活力、华美、明朗、甘美。
18.
色彩的情感倾向性 示例 黄色
比纯白色的亮度还要高; 可以促进新陈代谢; 明亮的黄色是所有色彩中最容易让人产生疲劳感的颜色,很刺激人的眼睛; 暗淡的黄色可以加强人们的注意力,所以多应用于提示牌 黄色的正面联想聪明、才智、乐观、光辉、喜悦、平凡、泼辣、明快、希望、光明、明媚、理想主义。 绿色 让眼睛放松的色彩; 绿色对人的精神有镇静和恢复的功效,通常在医院中让病人放松; 通常绿色的意义是“通行”,还有秩序的意义; 绿色可以促进消化,还可以减轻胃痛 绿色的正面联想和平、安全、生长、新鲜、丰产、金钱、种植、康复、成功、自然、和谐、诚实、青春。
19.
色彩的情感倾向性 示例 蓝色
自然界中很难找到蓝色的事物,抑制食欲,让人没有胃口; 能让人的身体分泌安定素,放松身体; 在蓝色的环境中工作效率比较高; 蓝色的服装通常会体现出一种可信赖关系 蓝色的正面联想学识、凉爽、和平、雄性、沉思、忠诚、正义、智慧、平静、悠久、理智、深远、无限、理想、永恒。 紫色 娇柔的、浪漫的品性;通常与中性化产生联系; 自然界中很难找到紫色,所以具有“人造”的意义; 古代紫色染料洗染的衣物只有贵族和富有的人才能够穿上; 紫色能够激发人们的想像力 紫色的正面联想优雅、高贵、重、神秘、女性化、奢侈、智慧、想像、诡辩、等级、灵感、财富、高尚、古朴。
20.
色彩的情感倾向性 示例 黑色
黑色具有视觉收缩作用; 黑色能让和它相配的颜色看上去更明亮; 在色彩治疗学中,认为黑色可以激发自信和力量; 黑色通常会与黑手党产生联系 黑色的正面联想权力、威信、重量、诡异、高雅、仪式、严肃、高贵、孤独、神秘、时髦、严肃、刚健、坚实、生命。 白色 西方一般认为会带来好运; 白色是表达到最完美平衡的颜色; 由于白色太明亮,会引起某些人群的头疼感; 白光会引起暂时的失明; 白色经常会同上帝、天使联系起来 白色的正面联想清洁、神圣、洁白、纯洁、纯真、神秘、完美、美德、柔软、庄严、简洁、真实、婚礼。
21.
色彩的情感倾向性 示例 灰色
灰色通常不能引起观众比较强烈的情感变化; 灰色是白色和黑色平衡的结果; 灰色的补色也是其本身 灰色的正面联想中性、平衡、安全、可信、谦虚、成熟、智能、才智、平凡、古典主义。
22.
23.
24.
25.
26.
27.
28.
29.
30.
黄金分割法布局方法 示例 黄金分割点约等于0.618:1
因为黄金分割率和黄金矩形能够给画面带来美感,令人愉悦的原因, 不同行业中都有着广泛而重要的应用。 网站设计排版 黄金分割-twitter 网站设计排版 黄金分割-QQ官网 网站设计排版 黄金分割-大旗
31.
32.
33.
三、基于UCD用户体验模型的视觉设计 章节标题 UCD相关简述
视觉设计处于用户体验模型的顶端 视觉设计的“轻设计重体验”
34.
UCD(User Centered Design)
以用户为中心的设计。 在网站设计过程中以用户体验为设计决策的中心,强调用户优先的设计模式。 构建提供使用价值,又能提供积极用户体验的网站 清晰、易用,减少误操作,缩短找到信息使用时间并提升用户满意度。
35.
36.
以公司为中心的设计模式
37.
以技术为中心的设计模式
38.
以设计者为中心的设计模式
39.
有挫折感
40.
导航太难用
41.
没有需要的产品或服务
42.
得到不喜欢的大惊喜
43.
访问速度过慢用户放弃一个网站的原因
44.
典型的10种错误想法 网站已经对用户很友好了; 在一下个月开始运行前,我们需要做一些可用性测试;
我们能够使用xml,SOAP以及其他先进技术来解决这个问题; 如果可以停下来,花一点时间考虑界面如何工作就足够了; 用户太蠢; 哦,用户应该读读用户手册; 我们不需要用户测试,我知道容易使用; 我们刚刚放了一个“建设中”标志; 缩小字号,那样我们可以在首页放更多的内容; 我们需要一个光彩四射的界面。
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
信息的有效传达 主要包括: 是否符合框架的需求要求,符合信息架构内容交互的基本构想
重点内容的有效传达;每个页面(板块)只有一块视觉重点。并且,突出重点,不让用户去找。
55.
56.
交互行为优化,也就是网站操作的便捷程度。
57.
主要体现在流程是否合理、减少无效点击、简化注册流程、厘清访问路径等。视觉设计是交互体验的第一要素。
58.
视觉设计的引导和强化推荐操作 示例 强而明晰的引导是十分必要的,研究表明用户在浏览页面的时候是跳跃性、非线性的,用户并不喜欢在诸多的操作中选择和寻找最佳选项。所以清晰的引导就显得更加重要了。重要和常用操作还可以特异处理,以便于寻找和点击。
纠错状态: 获取焦点后的强烈视觉提示
59.
视觉设计的高可见按钮交互模式-----提供明晰的视觉暗示指引 隐藏或弱化不常用的操作
60.
最本质的设计原理, 让待触发的按钮被关注和实施是视觉交互体验的职责所在
61.
62.
可读性读性
63.
便利性
64.
易于获取或更新
65.
66.
67.
基于用户体验网站视觉设计过程中一些补充 在视觉设计中,我们用于吸引用户注意的一个主要工具就是对比(contrast)。 把用户的注意力吸引到界面中的关键部分,对比是一个重要手段,能帮助用户理解页面导航元素之间的关系。同时,对比还是传达信息设计中的概念群组的主要手段。
在设计中保持一致性(uniformity)是另一个重要的组成部分,它能使你的设计有效地传达信息,而不会导致用户迷惑或焦虑。“一致性”在视觉设计的许多不同方面都会起到作用。 视觉化地呈现结构,对我们而言,这是表述“分支、群组、组件之间的联系”的一种最高效的方式。 很多时候,你必须在不同的做法之间作出妥协并评估利弊以及进行取舍。 有意识、有目的做出每一个决定,并在执行时将每一个决定都建立在对其背后的议题的理解之上。
68.
69.
由模仿决定的设计
70.
由领导决定的设计基于用户体验层次流程的用户体验输出 输出用户体验 分析报告
输出用户体验 分析报告 基于视觉设计 的整合 输出用户体验 分析报告 输出用户体验 分析报告
71.
四、Web 2.0:为表达信息而设计 章节标题
Web 2.0 Web 2.0 视觉元素当前趋势
72.
73.
74.
a. 色彩的倾向性 明快的颜色带给人愉悦的心情;
大部分 Web 2.0 网站不约而同地采用了绿色,但是深蓝、橙色和粉红色也同样适用; 渐变的使用(色彩的梯级变化)。 色彩特征:色相上的高纯度;明度上的高亮度
75.
B. 版面设计趋势 1.干净
色块化 水平分布 中心定位原则 其他---空白的活力 (非指白色;使页面具备呼吸空间) 巧妙利用空白可以提高页面的易读性和易用性。 空白可以分离出重要信息,使眼睛得到休息,并给人以冷静和有秩序的感觉。
76.
轻设计,重体验-----清晰且温和的提示
77.
78.
具备光亮感和装饰性元素;色系变化富有通透感!质感的表现多样化。演变的力量
79.
d. 导航 WEB
2.0 多数导航的设计趋势的一个大的主题要素是:简单、有效与干净。 对于视觉设计导航要解决的问题:灵活的响应和清晰的可交互元素 导航的设计除了视觉设计之外,更重要的是导航信息流的宽度和深度问题! 保持平衡关系 深度:较大的深度空间时,信息重点明确;架构清晰;缺点是用户需通过多次点击或许相关信息内容,增加了难度。 宽度:较大的宽度时,用户可以明确的获取相关信息的选择,减少点击;缺点是用户不易发现重点信息。 简介的导航 网站设计一般最多不超过7个导航菜单项。有些甚至少于二个(首页、注册)
80.
http://www.amazon.com/ 1998年 1999-2000年
2001年之后 不断的尝试
81.
现在的 http://www.amazon.com/ 使用商品目录做为侧辅助导航,彻底取代分类菜单。
核心是强化了搜索引擎的效能!淘宝也一样!
82.
83.
立体化
84.
圆角装饰
85.
图文结合
86.
动画导航
87.
88.
图标之间要具备差异化设计
89.
造型的提炼与再现
90.
风格统一,与背景协调
91.
92.
93.
94.
按钮或图标的富UI化表现 示例 基于ajax,falsh或者siverlight等技术的应用,WEB的UI有了显著的提高!
显示用户与系统之间的交流的视觉状态!有一种桌面化的感觉!
95.
96.
97.
98.
引导视觉流、加强用户体验;
99.
基于新的技术的应用支撑;
100.
创新的力量。来获取用户的信任;提升用户满意度;带给用户友好、亲切的印象!
101.
五、常见的视觉设计的错误理解 章节标题 视觉设计是美化产品
突出显示能改善视觉设计 可以分割评估视觉效果
102.
103.
怎么使用?
104.
为什么要使用? 回答这些问题是功能和可用性的关键组成部分,尤其是对于交互产品。
105.
网络应用工具设计示例 示例 相同基本设置的三种表现方式,字体、颜色、渐变和图片都相同;
区别是页面元素组织方式不同 1 图1,表现方式清晰显示出主要功能------查找客户联系信息;其次,用户可以编辑、删除或者增加备注。 图2,重点是顾客和公司之间的交流;其次,用户可以查看、编辑和删除联系人信息。 图3,关注点放在编辑客户信息上。查看联系人信息和跟踪正在进行的会话功能被弱化。 2 3
106.
107.
两个互联网浏览器下载页面 示例
108.
109.
eBay意大利主页 示例 孤立决策的后果
页面上很多元素似乎互相竞争,互相干扰,没有形成有效设计。 视觉设计绝不仅仅是设计样式、显化元素或做出孤立决定。
110.
六、关于视觉设计的总结 章节标题
111.
112.
哪个设计要素在第一时间吸引用户的注意力?
113.
它们对战略目标来讲是很重要的东西吗?
114.
115.
第二,在不需要用太多细节来吓倒用户的前提下,为用户提供有效选择的、某种可能的“视觉引导”。
116.
117.
118.