Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (15)
Web设计 视觉设计
- 1. 基于UCD的WEB设计之-视觉设计 User-Centered Design for the Web-Visual Design 金蝶研究院 张少华 2010年12月31日
- 2. 目录 视觉设计相关概念及发展 构成要素 基于UCD用户体验模型的视觉设计 Web 2.0 :为表达信息而设计 常见的视觉设计的错误理解 总结
- 3. 一、视觉设计的相关概念 章节标题 概念 发展 趋势
- 7. F形网页浏览眼球轨迹的研究报告 示例 2006年美国长期研究网站可用性的著名网站设计师杰柯柏·尼尔森（Jakob Nielsen） 发表了一项《眼球轨迹的研究》报告 报告称，大多数情况下浏览者都不由自主的以“Ｆ”形状的模式阅读网页，这种基本恒定的阅读习惯决定了网页呈现F形的关注热度。 第一步：水平移动 浏览者首先在网页最上部形成一个水平浏览轨迹。 第二步：目光下移，短范围水平移动 浏览者会将目光向下移，扫描比上一步短的区域。 第三步：垂直浏览 浏览者完成上两步后，会将目光沿网页左侧垂直扫描；这一步的浏览速度较慢，也较有系统性、条理性。
- 9. 前两段必须指出最重要的信息。F形浏览模式不是绝对，具有局限性和时代特征，最大的启示是对具体的浏览行为的重视：人们阅读方式不同，你的书写方式也必须不同。 倒金字塔 倒金字塔是一种在文章开头表达总结文字的写作风格。 这种方式使用了新闻业中著名的“瀑布效应”，新闻作者试图让他们的读者即时知道他们的报道的主题。文章以总结开头，接着是关键点，最后那些次要的细节，如背景资料。由于网络用户需要即时的满足，这种倒金字塔写作风格，对于网络写作和更好的用户体验是非常重要的。
- 10. WEB2.0 的中心定位原则 示例 08年以前，你可以找到很多“流动布局”和“左对齐并固定宽度”的F形布局，现在内容开始在出现在屏幕的中央。 现在 以前
- 12. 视觉需要传递准确的信息
- 13. 视觉应包含一定的信息量
- 14. 视觉效果来源于匹配程度
- 17. 色彩的情感倾向性 示例 红色 最具有视觉冲击力的色彩； 暗示速度和动态；可以刺激心跳速度、加快呼吸、刺激食欲； 红色的衣服使人身形显大； 红色的车最容易被偷。 红色的正面联想激情、爱情、鲜血、能量、热心、激动、热量、力量、热情、活力。 橙色 橙色能促进食欲； 橙色的房间代表了友善，带给人愉快，能促使人谈话和思考； 橙色能够用来强化视觉，海滩救生员的救生服 橙色的正面联想光明、智慧、创造力、温暖、欢喜、鼓舞、独特性、能量、活跃、模拟、社交、健康、奇想、活力、华美、明朗、甘美。
- 18. 色彩的情感倾向性 示例 黄色 比纯白色的亮度还要高； 可以促进新陈代谢； 明亮的黄色是所有色彩中最容易让人产生疲劳感的颜色，很刺激人的眼睛； 暗淡的黄色可以加强人们的注意力，所以多应用于提示牌 黄色的正面联想聪明、才智、乐观、光辉、喜悦、平凡、泼辣、明快、希望、光明、明媚、理想主义。 绿色 让眼睛放松的色彩； 绿色对人的精神有镇静和恢复的功效，通常在医院中让病人放松； 通常绿色的意义是“通行”，还有秩序的意义； 绿色可以促进消化，还可以减轻胃痛 绿色的正面联想和平、安全、生长、新鲜、丰产、金钱、种植、康复、成功、自然、和谐、诚实、青春。
- 19. 色彩的情感倾向性 示例 蓝色 自然界中很难找到蓝色的事物，抑制食欲，让人没有胃口； 能让人的身体分泌安定素，放松身体； 在蓝色的环境中工作效率比较高； 蓝色的服装通常会体现出一种可信赖关系 蓝色的正面联想学识、凉爽、和平、雄性、沉思、忠诚、正义、智慧、平静、悠久、理智、深远、无限、理想、永恒。 紫色 娇柔的、浪漫的品性；通常与中性化产生联系； 自然界中很难找到紫色，所以具有“人造”的意义； 古代紫色染料洗染的衣物只有贵族和富有的人才能够穿上； 紫色能够激发人们的想像力 紫色的正面联想优雅、高贵、重、神秘、女性化、奢侈、智慧、想像、诡辩、等级、灵感、财富、高尚、古朴。
- 20. 色彩的情感倾向性 示例 黑色 黑色具有视觉收缩作用； 黑色能让和它相配的颜色看上去更明亮； 在色彩治疗学中，认为黑色可以激发自信和力量； 黑色通常会与黑手党产生联系 黑色的正面联想权力、威信、重量、诡异、高雅、仪式、严肃、高贵、孤独、神秘、时髦、严肃、刚健、坚实、生命。 白色 西方一般认为会带来好运； 白色是表达到最完美平衡的颜色； 由于白色太明亮，会引起某些人群的头疼感； 白光会引起暂时的失明； 白色经常会同上帝、天使联系起来 白色的正面联想清洁、神圣、洁白、纯洁、纯真、神秘、完美、美德、柔软、庄严、简洁、真实、婚礼。
- 21. 色彩的情感倾向性 示例 灰色 灰色通常不能引起观众比较强烈的情感变化； 灰色是白色和黑色平衡的结果； 灰色的补色也是其本身 灰色的正面联想中性、平衡、安全、可信、谦虚、成熟、智能、才智、平凡、古典主义。
- 30. 黄金分割法布局方法 示例 黄金分割点约等于0．618：1 因为黄金分割率和黄金矩形能够给画面带来美感，令人愉悦的原因， 不同行业中都有着广泛而重要的应用。 网站设计排版 黄金分割-twitter 网站设计排版 黄金分割-QQ官网 网站设计排版 黄金分割-大旗
- 33. 三、基于UCD用户体验模型的视觉设计 章节标题 UCD相关简述 视觉设计处于用户体验模型的顶端 视觉设计的“轻设计重体验”
- 34. UCD（User Centered Design） 以用户为中心的设计。 在网站设计过程中以用户体验为设计决策的中心，强调用户优先的设计模式。 构建提供使用价值，又能提供积极用户体验的网站 清晰、易用，减少误操作，缩短找到信息使用时间并提升用户满意度。
- 36. 以公司为中心的设计模式
- 37. 以技术为中心的设计模式
- 38. 以设计者为中心的设计模式
- 39. 有挫折感
- 40. 导航太难用
- 41. 没有需要的产品或服务
- 42. 得到不喜欢的大惊喜
- 44. 典型的10种错误想法 网站已经对用户很友好了； 在一下个月开始运行前，我们需要做一些可用性测试； 我们能够使用xml,SOAP以及其他先进技术来解决这个问题； 如果可以停下来，花一点时间考虑界面如何工作就足够了； 用户太蠢； 哦，用户应该读读用户手册； 我们不需要用户测试，我知道容易使用； 我们刚刚放了一个“建设中”标志； 缩小字号，那样我们可以在首页放更多的内容； 我们需要一个光彩四射的界面。
- 54. 信息的有效传达 主要包括： 是否符合框架的需求要求，符合信息架构内容交互的基本构想 重点内容的有效传达；每个页面（板块）只有一块视觉重点。并且，突出重点，不让用户去找。
- 58. 视觉设计的引导和强化推荐操作 示例 强而明晰的引导是十分必要的，研究表明用户在浏览页面的时候是跳跃性、非线性的，用户并不喜欢在诸多的操作中选择和寻找最佳选项。所以清晰的引导就显得更加重要了。重要和常用操作还可以特异处理，以便于寻找和点击。 纠错状态： 获取焦点后的强烈视觉提示
- 62. 可读性读性
- 63. 便利性
- 64. 易于获取或更新
- 67. 基于用户体验网站视觉设计过程中一些补充 在视觉设计中，我们用于吸引用户注意的一个主要工具就是对比（contrast）。 把用户的注意力吸引到界面中的关键部分，对比是一个重要手段，能帮助用户理解页面导航元素之间的关系。同时，对比还是传达信息设计中的概念群组的主要手段。 在设计中保持一致性（uniformity）是另一个重要的组成部分，它能使你的设计有效地传达信息，而不会导致用户迷惑或焦虑。“一致性”在视觉设计的许多不同方面都会起到作用。 视觉化地呈现结构，对我们而言，这是表述“分支、群组、组件之间的联系”的一种最高效的方式。 很多时候，你必须在不同的做法之间作出妥协并评估利弊以及进行取舍。 有意识、有目的做出每一个决定，并在执行时将每一个决定都建立在对其背后的议题的理解之上。
- 69. 由模仿决定的设计
- 70. 由领导决定的设计基于用户体验层次流程的用户体验输出 输出用户体验 分析报告 输出用户体验 分析报告 基于视觉设计 的整合 输出用户体验 分析报告 输出用户体验 分析报告
- 71. 四、Web 2.0:为表达信息而设计 章节标题 Web 2.0 Web 2.0 视觉元素当前趋势
- 74. a. 色彩的倾向性 明快的颜色带给人愉悦的心情； 大部分 Web 2.0 网站不约而同地采用了绿色，但是深蓝、橙色和粉红色也同样适用； 渐变的使用（色彩的梯级变化）。 色彩特征：色相上的高纯度；明度上的高亮度
- 75. B. 版面设计趋势 1.干净 色块化 水平分布 中心定位原则 其他---空白的活力 (非指白色；使页面具备呼吸空间) 巧妙利用空白可以提高页面的易读性和易用性。 空白可以分离出重要信息，使眼睛得到休息，并给人以冷静和有秩序的感觉。
- 79. d. 导航 WEB 2.0 多数导航的设计趋势的一个大的主题要素是：简单、有效与干净。 对于视觉设计导航要解决的问题：灵活的响应和清晰的可交互元素 导航的设计除了视觉设计之外，更重要的是导航信息流的宽度和深度问题！ 保持平衡关系 深度：较大的深度空间时，信息重点明确；架构清晰；缺点是用户需通过多次点击或许相关信息内容，增加了难度。 宽度：较大的宽度时，用户可以明确的获取相关信息的选择，减少点击；缺点是用户不易发现重点信息。 简介的导航 网站设计一般最多不超过7个导航菜单项。有些甚至少于二个（首页、注册）
- 80. http://www.amazon.com/ 1998年 1999-2000年 2001年之后 不断的尝试
- 81. 现在的 http://www.amazon.com/ 使用商品目录做为侧辅助导航，彻底取代分类菜单。 核心是强化了搜索引擎的效能！淘宝也一样！
- 83. 立体化
- 84. 圆角装饰
- 85. 图文结合
- 86. 动画导航
- 88. 图标之间要具备差异化设计
- 89. 造型的提炼与再现
- 90. 风格统一，与背景协调
- 94. 按钮或图标的富UI化表现 示例 基于ajax,falsh或者siverlight等技术的应用，WEB的UI有了显著的提高！ 显示用户与系统之间的交流的视觉状态！有一种桌面化的感觉！
- 98. 引导视觉流、加强用户体验；
- 99. 基于新的技术的应用支撑；
- 101. 五、常见的视觉设计的错误理解 章节标题 视觉设计是美化产品 突出显示能改善视觉设计 可以分割评估视觉效果
- 103. 怎么使用？
- 105. 网络应用工具设计示例 示例 相同基本设置的三种表现方式，字体、颜色、渐变和图片都相同; 区别是页面元素组织方式不同 1 图1，表现方式清晰显示出主要功能------查找客户联系信息；其次，用户可以编辑、删除或者增加备注。 图2，重点是顾客和公司之间的交流；其次，用户可以查看、编辑和删除联系人信息。 图3，关注点放在编辑客户信息上。查看联系人信息和跟踪正在进行的会话功能被弱化。 2 3
- 107. 两个互联网浏览器下载页面 示例
- 109. eBay意大利主页 示例 孤立决策的后果 页面上很多元素似乎互相竞争，互相干扰，没有形成有效设计。 视觉设计绝不仅仅是设计样式、显化元素或做出孤立决定。
- 110. 六、关于视觉设计的总结 章节标题
- 112. 哪个设计要素在第一时间吸引用户的注意力？
- 113. 它们对战略目标来讲是很重要的东西吗？