PPT版面设计、视觉设计课件.ppt

Web设计中，什么最重要？毫无疑问，内容！ 但是，能够在一瞬间，抓住访问者眼球的是什么？是外观！;引言;先来看看视觉设计与其它web设计的关系;视觉设计的定义;当谈到网站的视觉设计这个问题时，有两种截然相反的观点。 一：可用性倡导者们，一直认为，网站要便于使用，而非漂亮。 jakob nielsen认为，几乎所有为实现视觉效果而做的事情，都会对 可用性产生妨碍。 不过在过去几年，可用性倡导者们的防线，以有松动。 ;二：美观性 反对的观点则将网站提升到“体验”的高度。因此网站应该利用web这种媒介的独特性（它扩大媒介的限制），刺激、吸引、迷惑、愉悦、迷住访问者。 出色的视觉设计，能够赋予意义，提供语境，唤起情感。它可激起访问者的兴趣，并使其相信网站的专业性和可靠性。它可以确定焦点，设立重点，建立网站元素之间的关系，并指导用户完成任务。但是，如果不能妥善处理，可能会交付一个华丽空虚的网站。 ;对使用web的人来说，争论双方的观点既非完全错误，也非完全正确。 事实上可用性与美观性在web上是不冲突的。 我们能够同时拥有美感与功能性。让我们尽全力平衡形式与功能。 如果说，可用性因素使网站具有功能性，视觉设计使网站令人难忘，那么，我们的目标是，二者兼具。 ;那么应该怎样做好 web网站的视觉设计呢？ ;视觉设计—传播产品理念; 1、视觉设计—传播产品理念; 传播产品理念;视觉设计;品牌：塑造身份 视觉设计的一个任务就是：确保网站具有视觉一致性。所有页面看起来，就像是从一个模子里刻出来的一样。它们必须有相同的logo,相同的配色方案，以及（对大部分而言）相同的布局。访问者看到一个页面，就应该可以立即识别出其他的所有页面。除此之外，这种一致的外观和感觉，应支持网站的“品牌”。 什么叫品牌？ 它是一个产品或整个组织给人的整体映象。 它包括logo、包装、广告、视觉呈现、当然还有网站本身。 令人映象深刻的品牌，具有一种身份，个性，以及自身的特色，具有能够吸引目标，与众不同的外观和感受。 更为重要的是品牌令人难以忘记。;2、视觉设计—干净，简洁，工具化;干净，简洁，工具化;wordpress 博客的后台管理界面，我们可以看到清晰的从属关系：管理–文章–文章内的修改区域。;vista 系统的界面：三个区域的层级关系一目了然 ，“1”区要高出“2”区域，“2”区域要比“3”区域的颜色深，这样整体的从属关系就很明显。;是什么就是什么，图形达意尽量明确。 什么样子代表什么都有其特定的视觉暗示，如果不是游戏，我们应该尽量避免和用户捉迷藏。例如应该用页签来表现的从属 关系，我们不应该简单的做几个链接，这样会表达不清楚各部分关系。除此类的布局因素之外，图标的表达是视觉中的一大块，好的图形表达可以帮助用户直观 感受功能，缩短操作时间，提高效率；不过表达不好可就麻烦了，用户可能要歪着脑袋想半天！;箭头所指之处为刷新图标，上面那个刷新图为原来图标，假如是做成下面这个样子就会和后退图标显得太象了，意思区别不是太明确，会造成误解。 就准确性而言，上面那个刷新图标更让客户容易接受。;明确你的视觉状态 理想状态是：用户的每个操作行为都应该有相 应的视觉反馈，比如有没有选中，操作有没有成功等。仅按鼠标操作的状态分就有默认、鼠标指向、鼠标按下、鼠标点击四种状态，准确的反馈可以让用户流畅的感 觉自己的操作；关于鼠标和键盘的状态，大家在操作系统的时候注意一下，就可以看到各种操作的对应关系，而我们平时是不太注意的，因为它默默的达到了设计的 目的。站在是否可用的角度分有：可用状态、不可用状态. ;请用准确的视觉来辅助信息反馈。 我们用来对应的视觉辅助图要力求表现每种情况的准确含义。当然，为了增加趣味性，我们可以允许任意表现形式或表情的存在，前提是你的表达要准确，不要有歧义，否则使用者的第一反映可能不是你要表现的，由于理解的歧义所带来的损失和挫折感会让用户感到厌恶。 通过下面几张图我们来对比一下： ;下面哪一个更能体现出“对不起，出错啦！” ;第二张图的淘气鬼脸图，我以为我成功了； 第三张图的表 现让我以为是在警告。 第四张图如果你犯错的时候出现了，你会想到什么？ 只有第一张图让我意识到我失败了，并且有趣味性。 由此可见： 趣味性和准确性并不矛盾， 我们在设计趣味性的同时，别忽略设计的准确性。;3、视觉设计—制定规范，维持统一;4、视觉设计—重点突出;5、视觉设计—防止不恰当的低龄化;小结;案例分析;;;;;栏目???层级 ; 无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径。 ;判断一个网站的好坏，要从太多方面分析，以上分析这只是其中一个小小的方面。 如有不同见解，可予以提出。