网站UI视觉设计入门教程.ppt

LOGO Page ? * 本作品采用知识共享署名-非商业性使用 2.5 中国大陆许可协议进行许可。 专业交流 模板超市 设计服务 本作品的提供是以适用知识共享组织的公共许可（ 简称“CCPL” 或 “许可”） 条款为前提的。本作品受著作权法以及其他相关法律的保护。对本作品的使用不得超越本许可授权的范围。 如您行使本许可授予的使用本作品的权利，就表明您接受并同意遵守本许可的条款。在您接受这些条款和规定的前提下，许可人授予您本许可所包括的权利。 查看全部… NordriDesign?中国专业PowerPoint媒体设计与开发 LOGO 由NordriDesign?提供 Web设计中，什么最重要？毫无疑问，内容！ 但是，能够在一瞬间，抓住访问者眼球的是什么？是外观！ web--视觉设计 视觉设计 引言 讨论的主题： web的视觉设计问题 讨论目的： 有助于我们了解web设计中的视觉设计问题， 加强我们的学习交流，更好的运用web中的视 觉设计。 视觉设计 先来看看视觉设计与其它web设计的关系 视觉设计 视觉设计的重要性！ 视觉设计的定义 视觉设计是指：针对眼睛官能的主观形式 的表现手段和结果。 “爱美之心人皆有之”，在Web领域也不例外。 无论网站界面采用什么样的设计风格，或简约、明快，或复杂、精致， 大家都喜欢井然有序、外观漂亮的网站。 漂亮的外观，首先给访问者一个不错的第一印象。 视觉设计 当谈到网站的视觉设计这个问题时，有两种截然相反的观点。 一：可用性倡导者们，一直认为，网站要便于使用，而非漂亮。 jakob nielsen认为，几乎所有为实现视觉效果而做的事情，都会对 可用性产生妨碍。 不过在过去几年，可用性倡导者们的防线，以有松动。 视觉设计 二：美观性 反对的观点则将网站提升到“体验”的高度。因此网站应该利用web这种媒介的独特性（它扩大媒介的限制），刺激、吸引、迷惑、愉悦、迷住访问者。 出色的视觉设计，能够赋予意义，提供语境，唤起情感。它可激起访问者的兴趣，并使其相信网站的专业性和可靠性。它可以确定焦点，设立重点，建立网站元素之间的关系，并指导用户完成任务。但是，如果不能妥善处理，可能会交付一个华丽空虚的网站。 视觉设计 对使用web的人来说，争论双方的观点既非完全错误，也非完全正确。 事实上可用性与美观性在web上是不冲突的。 我们能够同时拥有美感与功能性。让我们尽全力平衡形式与功能。 如果说，可用性因素使网站具有功能性，视觉设计使网站令人难忘，那么，我们的目标是，二者兼具。 视觉设计 那么应该怎样做好 web网站的视觉设计呢？ 视觉设计 视觉设计—传播产品理念 视觉设计—干净，简洁，工具化 视觉设计—重点突出 视觉设计—防止不恰当的低龄化 视觉设计—制定规范，维持统一 视觉设计 从五个方面做好视觉设计 1、视觉设计—传播产品理念 只有当我们对产品抱有一个完美的理念和愿景的时候，我们才能做出优美的设计来体现理念 “QQ邮箱，常联系”是腾讯的愿景。这个愿景需要完美的产品设计，优秀的技术实现，和优质运营来达到 “封面画和选词，呼应邮件含义，淡雅而不张扬” 视觉设计 传播产品理念 找对你的感觉。 视觉设计首先要考虑的就是整体的感觉，即视觉设计的风格。视觉设计的风格是否准确关系着设计的成败。 那么一个产品的视觉设计也同样需要一个对的定位，最终以合适的视觉表现出来。 我们不妨以几种聊天软件来做个的比较，从中窥视一点设计定位的视觉意 味。 看下面一组图： 视觉设计 视觉设计 传播产品理念 图一： QQ 的视觉定位是以青少年为主的，所以它的视觉设计才采用了比较明亮活泼的色彩。 图二、图三：msn 和TM 的视觉定位是以办公室工作人员为定位，所以它的视觉使用比较稳定和平静的色彩。 品牌：塑造身份 视觉设计的一个任务就是：确保网站具有视觉一致性。所有页面看起来，就像是从一个模子里刻出来的一样。它们必须有相同的logo,相同的配色方案，以及（对大部分而言）相同的布局。访问者看到一个页面，就应该可以立即识别出其他的所有页面。除此之外，这种一致的外观和感觉，应支持网站的“品牌”。 什么叫品牌？ 它是一个产品或整个组织给人的整体映象。 它包括l