版面设计、视觉设计

《版面设计、视觉设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Web设计中，什么最重要？毫无疑问，内容！但是，能够在一瞬间，抓住访问者眼球的是什么？是外观！web--视觉设计视觉设计引言讨论的主题：web的视觉设计问题讨论目的：有助于我们了解web设计中的视觉设计问题，加强我们的学习交流，更好的运用web中的视-----------觉设计。制作者：第八组全体成员（陈闪闪邓成琳夏子晴黄河陶丽帆）视觉设计先来看看视觉设计与其它web设计的关系视觉设计视觉设计的重要性！视觉设计的定义视觉设计是指：针对眼睛官能的主观形式的表现手段和结果。“爱美之心人皆有之”，在Web领域也不例外。无论网站界面采用什么样的设计风格，或简约、明快，或复杂、精致，大家

2、都喜欢井然有序、外观漂亮的网站。漂亮的外观，首先给访问者一个不错的第一印象。视觉设计当谈到网站的视觉设计这个问题时，有两种截然相反的观点。一：可用性倡导者们，一直认为，网站要便于使用，而非漂亮。jakobnielsen认为，几乎所有为实现视觉效果而做的事情，都会对可用性产生妨碍。不过在过去几年，可用性倡导者们的防线，以有松动。视觉设计二：美观性反对的观点则将网站提升到“体验”的高度。因此网站应该利用web这种媒介的独特性（它扩大媒介的限制），刺激、吸引、迷惑、愉悦、迷住访问者。出色的视觉设计，能够赋予意义，提供语境，唤起情感。它可激起访问者的兴趣，并使其相信网站的专业性和可靠性

3、。它可以确定焦点，设立重点，建立网站元素之间的关系，并指导用户完成任务。但是，如果不能妥善处理，可能会交付一个华丽空虚的网站。视觉设计对使用web的人来说，争论双方的观点既非完全错误，也非完全正确。事实上可用性与美观性在web上是不冲突的。我们能够同时拥有美感与功能性。让我们尽全力平衡形式与功能。如果说，可用性因素使网站具有功能性，视觉设计使网站令人难忘，那么，我们的目标是，二者兼具。视觉设计那么应该怎样做好web网站的视觉设计呢？视觉设计视觉设计—传播产品理念01视觉设计—干净，简洁，工具化02视觉设计—重点突出04视觉设计—防止不恰当的低龄化0506视觉设计—制定规范，维持

4、统一03视觉设计从五个方面做好视觉设计1、视觉设计—传播产品理念只有当我们对产品抱有一个完美的理念和愿景的时候，我们才能做出优美的设计来体现理念“QQ邮箱，常联系”是腾讯的愿景。这个愿景需要完美的产品设计，优秀的技术实现，和优质运营来达到“封面画和选词，呼应邮件含义，淡雅而不张扬”视觉设计传播产品理念找对你的感觉。视觉设计首先要考虑的就是整体的感觉，即视觉设计的风格。视觉设计的风格是否准确关系着设计的成败。那么一个产品的视觉设计也同样需要一个对的定位，最终以合适的视觉表现出来。我们不妨以几种聊天软件来做个的比较，从中窥视一点设计定位的视觉意味。看下面一组图：视觉设计视觉设计传播

5、产品理念图一：QQ的视觉定位是以青少年为主的，所以它的视觉设计才采用了比较明亮活泼的色彩。图二、图三：msn和TM的视觉定位是以办公室工作人员为定位，所以它的视觉使用比较稳定和平静的色彩。品牌：塑造身份视觉设计的一个任务就是：确保网站具有视觉一致性。所有页面看起来，就像是从一个模子里刻出来的一样。它们必须有相同的logo,相同的配色方案，以及（对大部分而言）相同的布局。访问者看到一个页面，就应该可以立即识别出其他的所有页面。除此之外，这种一致的外观和感觉，应支持网站的“品牌”。什么叫品牌？它是一个产品或整个组织给人的整体映象。它包括logo、包装、广告、视觉呈现、当然还有网站本

6、身。令人映象深刻的品牌，具有一种身份，个性，以及自身的特色，具有能够吸引目标，与众不同的外观和感受。更为重要的是品牌令人难以忘记。传播产品理念视觉设计2、视觉设计—干净，简洁，工具化“推广”很重要，“简洁”也很重要，因此舍“推广”而取“简洁”语音邮箱放到邮箱登录后的邮箱首页右上角，但太重hardsell了，会影响一些速度和简洁性不多用一个图片在好友Qzone文章的摘要前加头像，感觉会破坏阅读感（容易吸引眼球到头像而非文章），而从关注好友的角度，头像能突出好友。但给用户2个图片，用户看哪个呢？工具化设计意味着清晰的逻辑和操作。不是内容越多越好，是越简单越好。视觉设计干净，简洁，工

7、具化视觉结构和层级关系。页面表现的层级关系和结构是用视觉的形式表现出来的，比如包含关系及业务的先后顺序的表现。让用户通过视觉就能够直接的明白应该先看什么，后看什么，元素时间是什么关系等等。让我们来看下面的两张图：视觉设计wordpress博客的后台管理界面，我们可以看到清晰的从属关系：管理–>文章–>文章内的修改区域。干净，简洁，工具化视觉设计vista系统的界面：三个区域的层级关系一目了然，“1”区要高出“2”区域，“2”区域要比“3”区域的颜色深，这样整体的从属关系就很明显。干净，简洁，