网站UI视觉设计入门教程

1、Web设计中，什么最重要？毫无疑问，内容！ 但是，能够在一瞬间，抓住访问者眼球的是什么？是外观！,web-视觉设计,视觉设计,引言,讨论的主题： web的视觉设计问题 讨论目的： 有助于我们了解web设计中的视觉设计问题， 加强我们的学习交流，更好的运用web中的视 -觉设计。,视觉设计,先来看看视觉设计与其它web设计的关系,视觉设计,视觉设计的重要性！,视觉设计的定义,视觉设计是指：针对眼睛官能的主观形式 的表现手段和结果。 “爱美之心人皆有之”，在Web领域也不例外。 无论网站界面采用什么样的设计风格，或简约、明快，或复杂、精致， 大家都喜欢井然有序、外观漂亮的网站。 漂亮的外观，首先给

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

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

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

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

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

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

8、示，如果不是游戏，我们应该尽量避免和用户捉迷藏。例如应该用页签来表现的从属 关系，我们不应该简单的做几个链接，这样会表达不清楚各部分关系。除此类的布局因素之外，图标的表达是视觉中的一大块，好的图形表达可以帮助用户直观 感受功能，缩短操作时间，提高效率；不过表达不好可就麻烦了，用户可能要歪着脑袋想半天！,干净，简洁，工具化,视觉设计,箭头所指之处为刷新图标，上面那个刷新图为原来图标，假如是做成下面这个样子就会和后退图标显得太象了，意思区别不是太明确，会造成误解。 就准确性而言，上面那个刷新图标更让客户容易接受。,干净，简洁，工具化,视觉设计,明确你的视觉状态 理想状态是：用户的每个操作行为都应该

9、有相 应的视觉反馈，比如有没有选中，操作有没有成功等。仅按鼠标操作的状态分就有默认、鼠标指向、鼠标按下、鼠标点击四种状态，准确的反馈可以让用户流畅的感 觉自己的操作；关于鼠标和键盘的状态，大家在操作系统的时候注意一下，就可以看到各种操作的对应关系，而我们平时是不太注意的，因为它默默的达到了设计的 目的。站在是否可用的角度分有：可用状态、不可用状态.,干净，简洁，工具化,视觉设计,请用准确的视觉来辅助信息反馈。 我们用来对应的视觉辅助图要力求表现每种情况的准确含义。当然，为了增加趣味性，我们可以允许任意表现形式或表情的存在，前提是你的表达要准确，不要有歧义，否则使用者的第一反映可能不是你要表现的

10、，由于理解的歧义所带来的损失和挫折感会让用户感到厌恶。 通过下面几张图我们来对比一下：,干净，简洁，工具化,视觉设计,下面哪一个更能体现出“对不起，出错啦！”,干净，简洁，工具化,视觉设计,第二张图的淘气鬼脸图，我以为我成功了； 第三张图的表 现让我以为是在警告。 第四张图如果你犯错的时候出现了，你会想到什么？ 只有第一张图让我意识到我失败了，并且有趣味性。 由此可见： 趣味性和准确性并不矛盾， 我们在设计趣味性的同时，别忽略设计的准确性。,干净，简洁，工具化,视觉设计,3、视觉设计制定规范，维持统一,文字使用要规范，语法，大小，颜色，大小写都需要注意 能用一个词表达的，不用一句话。能用一句话

11、表达清楚的，不用两句话 每个概念都只有唯一一种表达。如”VIP”的概念 能用一种字体颜色的，不多用一种颜色 能用一种字体大小的，不多用一种大小 用标准组件 能用标准控件的，不自己画控件 能用文字的，不用图片（加图片是要申请的） 保持尽可能少的格式式样 维持统一 就算字体和行间距等小细节都应该关注到,视觉设计,4、视觉设计重点突出,每个页面（板块）只有一块视觉重点。并且，突出重点，不让用户去找。左边的设计排版不对，有一横条的压着的情况黄色块就不能加框，视觉会很繁杂看着不舒服，句号也是多余的 原来方案 目前方案,视觉设计,Pony：在设置了独立密码的情况下, 当登陆到需要输入独立密码时, 总是先出

12、来输入框, 此时已可输入, 我经常是立刻输入, 但打了几个字母后上面, 才瞬间出现上面的黄色提醒请输入独立保护密码, 而会导致输入框位置立刻下压, 比较影响输入. 最好能改一改html里的结构, 能够快速让人立刻输入(越快越好)的基础上,其他显示的可以慢些load到但不应影响其他部件的改变.,5、视觉设计防止不恰当的低龄化,在追求“简单”的过程中，QQMail不知不觉的变得“中性”、“成熟”化。 当我们更加理性和严谨地设计产品的时候，自然会远离“低龄”倾向。“成熟”源自合理的设计，“低龄”源自不合常理的设计。,视觉设计,不恰当的低龄化,小结,传播产品理念 大气成熟，干净整洁，工具化 规范与统一

13、 重点突出 防止不恰当的低龄化,视觉设计,案例分析, ,视觉设计,我们的案例是从整体视觉这块来分析,不同点,页面导航,饭桶网：无导航条，有标签 大众点评网：有导航条，有标签,视觉设计,大众点评网,饭桶网,广告,大众点评网：有广告，但广告能避免干扰视线，避免喧宾夺主，广告图片符合整体风格 饭桶网：有广告，且广告干扰视线，喧宾夺主,视觉设计,大众点评网,饭桶网,不同点,网站地图,饭桶网：为用户提供清晰的网站指引。 大众点评网：地图更加具体。,视觉设计,大众点评网,饭桶网,不同点,新开窗口,尽量减少新开的窗口，以避免开过多的无效窗口，设置弹出窗口的关闭功能。 显然大众点评网就比饭桶网做的好。,视觉设

14、计,大众点评网,饭桶网,不同点,栏目的层级,饭桶网：导航不清晰 ，栏目没超过3层。 大众点评网：导航清晰、栏目超过3层。,视觉设计,不同点,内容的原创性,公司介绍,饭桶网：有小部分内容为转载的 资讯 大众点评网：尽量多采用原创性内容，以确保内容的可读性,饭桶网：除了以下的信息都有以外还有 视频介绍。 大众点评网：真实可靠的信息发布，包 括公司规模、发展状况、 公司资质等,好友推荐,饭桶网：未提供 大众点评网：提供邮件推荐功能,无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径。,视觉设计,设计风格,符合用户的审美习惯，并具有一定的引导性。,确保logo的保护空间，确保品牌的清晰展示 而又不占据过分空间。,网站LOGO,页面速度,重点突出，