网站UI视觉设计入门教程
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
LOGO 视觉设计
web--
视觉设计
Web设计中，什么最重要？毫无疑问，内容！ 但是，能够在一瞬间，抓住访问者眼球的是什么？是外观！
由NordriDesign™提供
www.nordridesign.com
引言
讨论的主题：
web的视觉设计问题
LOGO 视觉设计
讨论目的：
有助于我们了解web设计中的视觉设计问题， 加强我们的学习交流，更好的运用web中的视 -----------觉设计。
• • •
只有当我们对产品抱有一个完美的理念和愿景的时候，我们才能做出优美的 设计来体现理念 “QQ邮箱，常联系”是腾讯的愿景。这个愿景需要完美的产品设计，优秀 的技术实现，和优质运营来达到 “封面画和选词，呼应邮件含义，淡雅而不张扬”
Page 10
传播产品理念
LOGO 视觉设计
找对你的感觉。
视觉设计首先要考虑的就是整体的感觉，即视觉设计的风格。 视觉设计的风格是否准确关系着设计的成败。 那么一个产品的视觉设计也同样需要一个对的定位，最终以 合适的视觉表现出来。 我们不妨以几种聊天软件来做个的比较，从中窥视一点设计 定位的视觉意 味。
不同点
栏目的层级 饭桶网：导航不清晰 ，栏目没超 过3层。 公司介绍
LOGO 视觉设计
饭桶网：除了以下的信息都有以外还有 视频介绍。 大众点评网：真实可靠的信息发布，包 括公司规模、发展状况、 公司资质等
大众点评网：导航清晰、栏目超 过3层。
内容的原创性 饭桶网：有小部分内容为转载的 资讯 大众点评网：尽量多采用原创性 内容，以确保内容的可读性
判断一个网站的好坏，要从太多方面分析， 以上分析这只是其中一个小小的方面。 如有不同见解，可予以提出。共同进步。
Page 34
谢谢观赏
多多指教
通过下面几张图我们来对比一下：
wk.baidu.com
Page 20
LOGO 干净，简洁，工具化 视觉设计
下面哪一个更能体现出“对不起，出错啦！”
Page 21
LOGO 干净，简洁，工具化 视觉设计
第二张图的淘气鬼脸图，我以为我成功了； 第三张图的表 现让我以为是在警告。 第四张图如果你犯错的时候出现了，你会想到什么？ 只有第一张图让我意识到我失败了，并且有趣味性。
Page 18
LOGO 干净，简洁，工具化 视觉设计
明确你的视觉状态
理想状态是：用户的每个操作行为都应该有相 应的视觉反馈，比如有没 有选中，操作有没有成功等。仅按鼠标操作的状态分就有默认、鼠标 指向、鼠标按下、鼠标点击四种状态，准确的反馈可以让用户流畅的 感 觉自己的操作；关于鼠标和键盘的状态，大家在操作系统的时候 注意一下，就可以看到各种操作的对应关系，而我们平时是不太注意 的，因为它默默的达到了设计的 目的。站在是否可用的角度分有： 可用状态、不可用状态.
Page 32
好友推荐
饭桶网：未提供
大众点评网：提供邮件推荐功能
相同点
设计风格 符合用户的审美习惯，并具有一定的引导性。 网站LOGO 确保logo的保护空间，确保品牌的清晰展示 而又不占据过分空间。 页面速度 页面布局 重点突出，主次分明，图文并茂。与企 业的营销目标相结合，将用户最感兴趣的， 最具有销售力的信息放置在最重要的位置。
Page 5
LOGO 视觉设计
二：美观性
反对的观点则将网站提升到“体验”的高度。因此网站应该利用web这 种媒介的独特性（它扩大媒介的限制），刺激、吸引、迷惑、愉悦、 迷住访问者。 出色的视觉设计，能够赋予意义，提供语境，唤起情感。它可激起访问 者的兴趣，并使其相信网站的专业性和可靠性。它可以确定焦点，设 立重点，建立网站元素之间的关系，并指导用户完成任务。但是，如 果不能妥善处理，可能会交付一个华丽空虚的网站。
不同点
LOGO 视觉设计
饭桶网
网站地图
饭桶网：为用户提供清晰的网站指引。 大众点评网：地图更加具体。
大众点评网
Page 30
不同点
LOGO 视觉设计
新开窗口
尽量减少新开的窗口，以避免开 过多的无效窗口，设置弹出窗口 的关闭功能。 显然大众点评网就比饭桶网做的 好。
饭桶网
大众点评网
Page 31
Page 17
LOGO 干净，简洁，工具化 视觉设计
是什么就是什么，图形达意尽量明确。
什么样子代表什么都有其特定的视觉暗示，如果不是游戏，我们应该尽 量避免和用户捉迷藏。例如应该用页签来表现的从属 关系，我们不 应该简单的做几个链接，这样会表达不清楚各部分关系。除此类的布 局因素之外，图标的表达是视觉中的一大块，好的图形表达可以帮助 用户直观 感受功能，缩短操作时间，提高效率；不过表达不好可就 麻烦了，用户可能要歪着脑袋想半天！
边的设计排版不对，有一横条的压着的情况黄色块就不能加框，视觉
会很繁杂看着不舒服，句号也是多余的 原来方案 目前方案
Pony：在设置了独立密码的情况下, 当登陆到需要 输入独立密码时, 总是先出来输入框, 此时已可输入, 我经常是立刻输入, 但打了几个字母后上面, 才瞬间 出现上面的黄色提醒"请输入独立保护密码", 而会导 致输入框位置立刻下压, 比较影响输入. 最好能改一 改html里的结构, 能够快速让人立刻输入(越快越好) 的基础上,其他显示的可以慢些load到但不应影响其 他部件的改变. Page 24
LOGO 视觉设计
页面导航
饭桶网
饭桶网：无导航条，有标签 大众点评网：有导航条，有标签
大众点评网
Page 28
不同点
LOGO 视觉设计
广告
大众点评网：有广告，但广告能 避免干扰视线，避免喧宾夺主， 广告图片符合整体风格 饭桶网：有广告，且广告干扰视 线，喧宾夺主
饭桶网
大众点评网
Page 29
Page 19
LOGO 干净，简洁，工具化 视觉设计
请用准确的视觉来辅助信息反馈。
我们用来对应的视觉辅助图要力求表现每种情况的 准确含义。当然，为了增加趣味性，我们可以允 许任意表现形式或表情的存在，前提是你的表达 要准确，不要有歧义，否则使用者的第一反映可 能不是你要表现的，由于理解的歧义所带来的损 失和挫折感会让用户感到厌恶。
漂亮的外观，首先给访问者一个不错的第一印象。
Page 4
LOGO 视觉设计
当谈到网站的视觉设计这个问题时，有两种截然相反的观点。
一：可用性倡导者们，一直认为，网站要便于使
用，而非漂亮。 jakob nielsen认为，几乎所有为 实现视觉效果而做的事情，都会对 可用性产生妨 碍。
不过在过去几年，可用性倡导者们的防线，以有松动。
Page 7
LOGO 视觉设计
那么应该怎样做好 web网站的视觉设计呢？
Page 8
从五个方面做好视觉设计
LOGO 视觉设计
视觉设计—传播产品理念 视觉设计—干净，简洁，工具化 视觉设计—制定规范，维持统一 视觉设计—重点突出 视觉设计—防止不恰当的低龄化
Page 9
LOGO 视觉设计 1、视觉设计—传播产品理念
传播产品理念 大气成熟，干净整洁，工具化 规范与统一 重点突出 防止不恰当的低龄化
Page 26
案例分析
LOGO 视觉设计
http://www.dianping.com/changsha http://changsha.fantong.com/
我们的案例是从整体视觉这块来分析
Page 27
不同点
品牌：塑造身份 视觉设计的一个任务就是：确保网站具有视觉一致性。所有页面看起来，就像是 从一个模子里刻出来的一样。它们必须有相同的logo,相同的配色方案，以及 （对大部分而言）相同的布局。访问者看到一个页面，就应该可以立即识别 出其他的所有页面。除此之外，这种一致的外观和感觉，应支持网站的“品 牌”。 什么叫品牌？ 它是一个产品或整个组织给人的整体映象。 它包括logo、包装、广告、视觉呈现、当然还有网站本身。 令人映象深刻的品牌，具有一种身份，个性，以及自身的特色，具有能够吸引目 标，与众不同的外观和感受。 更为重要的是品牌令人难以忘记。
Page 13
LOGO 2、视觉设计—干净，简洁，工具化 视觉设计
•
“推广”很重要，“简洁”也很重要，因此舍“推广”而取“简洁”
– 语音邮箱放到邮箱登录后的邮箱首页右上角，但太重hardsell了
，会影响一些速度和简洁性
• 不多用一个图片
– 在好友Qzone文章的摘要前加头像，感觉会破坏阅读感（容易吸 引眼球到头像而非文章），而从关注好友的角度，头像能突出好 友。但给用户2个图片，用户看哪个呢？
– 能用一种字体颜色的，不多用一种颜色
– 能用一种字体大小的，不多用一种大小
• 用标准组件
– 能用标准控件的，不自己画控件 – 能用文字的，不用图片（加图片是要申请的）
– 保持尽可能少的格式式样
• 维持统一
Page 23
4、视觉设计—重点突出
•
LOGO 视觉设计
每个页面（板块）只有一块视觉重点。并且，突出重点，不让用户去找。左
Page 6
LOGO 视觉设计
对使用web的人来说，争论双方的观点既非完全错误，也非 完全正确。 事实上可用性与美观性在web上是不冲突的。 我们能够同时拥有美感与功能性。让我们尽全力平衡形式 与功能。 如果说，可用性因素使网站具有功能性，视觉设计使网站 令人难忘，那么，我们的目标是，二者兼具。
制作者：
第八组全体成员（陈闪闪 邓成琳 夏子晴 黄河 陶丽帆）
Page 2
LOGO 先来看看视觉设计与其它web设计的关系 视觉设计
视觉设计的重要性！
Page 3
视觉设计的
视觉设计 定义
LOGO
视觉设计是指：针对眼睛官能的主观形式 的表现手段和结果。
“爱美之心人皆有之”，在Web领域也不例外。 无论网站界面采用什么样的设计风格，或简约、明快，或复杂、精致， 大家都喜欢井然有序、外观漂亮的网站。
由此可见：
趣味性和准确性并不矛盾， 我们在设计趣味性的同时，别忽略设计的准确性。
Page 22
3、视觉设计—制定规范，维持统一
• 文字使用要规范，语法，大小，颜色，大小写都需要注意
LOGO 视觉设计
– 能用一个词表达的，不用一句话。能用一句话表达清楚的，不用
两句话 – 每个概念都只有唯一一种表达。如”VIP”的概念
看下面一组图：
Page 11
传播产品理念
LOGO 视觉设计
图一： QQ 的视觉定位是以青少年为主的，所以它的视觉设计才采用了比较明亮活 泼的色彩。 图二、图三：msn 和TM 的视觉定位是以办公室工作人员为定位，所以它的视觉使 用比较稳定和平静的色彩。
Page 12
传播产品理念
LOGO 视觉设计
LOGO 5、视觉设计—防止不恰当的低龄化 视觉设计
• •
在追求“简单”的过程中，QQMail不知不觉的变得“中性”、“成熟”化 。 当我们更加理性和严谨地设计产品的时候，自然会远离“低龄”倾向。“成 熟”源自合理的设计，“低龄”源自不合常理的设计。 不恰当的低龄化
Page 25
小结
LOGO 视觉设计
Page 33
LOGO 视觉设计
页面色彩 与品牌整体形象相统一，主色调辅助色 不超过三种颜色。以恰当的色彩明度和 亮度，确保浏览者的浏览舒适度。 图片展示 有图片，且图片比例协调，不变形， 图片清晰
显示路径
无论用户浏览到哪一个层级，哪一个页 面，都可以清楚知道看到该页面的路径。
LOGO 视觉设计
Page 15
LOGO 干净，简洁，工具化 视觉设计
wordpress 博客的后台管理界面，我们可以看到清 晰的从属关系：管理–>文章–>文章内的修改区域。
Page 16
LOGO 干净，简洁，工具化 视觉设计
vista 系统的界面：三个区域的层级关系一目了然 ，“1”区要高 出“2”区域，“2”区域要比“3”区域的颜色深，这样整体的从属 关系就很明显。
• 工具化设计意味着清晰的逻辑和操作。不是内容越多越好，是越简单越好。
Page 14
LOGO 干净，简洁，工具化 视觉设计
视觉结构和层级关系。
页面表现的层级关系和结构是用视觉的形式表现出来的，比 如包含关系及业务的先后顺序的表现。 让用户通过视觉就能够直接的明白应该先看什么，后看什么， 元素时间是什么关系等等。 让我们来看下面的两张图：
web--
视觉设计
Web设计中，什么最重要？毫无疑问，内容！ 但是，能够在一瞬间，抓住访问者眼球的是什么？是外观！
由NordriDesign™提供
www.nordridesign.com
引言
讨论的主题：
web的视觉设计问题
LOGO 视觉设计
讨论目的：
有助于我们了解web设计中的视觉设计问题， 加强我们的学习交流，更好的运用web中的视 -----------觉设计。
• • •
只有当我们对产品抱有一个完美的理念和愿景的时候，我们才能做出优美的 设计来体现理念 “QQ邮箱，常联系”是腾讯的愿景。这个愿景需要完美的产品设计，优秀 的技术实现，和优质运营来达到 “封面画和选词，呼应邮件含义，淡雅而不张扬”
Page 10
传播产品理念
LOGO 视觉设计
找对你的感觉。
视觉设计首先要考虑的就是整体的感觉，即视觉设计的风格。 视觉设计的风格是否准确关系着设计的成败。 那么一个产品的视觉设计也同样需要一个对的定位，最终以 合适的视觉表现出来。 我们不妨以几种聊天软件来做个的比较，从中窥视一点设计 定位的视觉意 味。
不同点
栏目的层级 饭桶网：导航不清晰 ，栏目没超 过3层。 公司介绍
LOGO 视觉设计
饭桶网：除了以下的信息都有以外还有 视频介绍。 大众点评网：真实可靠的信息发布，包 括公司规模、发展状况、 公司资质等
大众点评网：导航清晰、栏目超 过3层。
内容的原创性 饭桶网：有小部分内容为转载的 资讯 大众点评网：尽量多采用原创性 内容，以确保内容的可读性
判断一个网站的好坏，要从太多方面分析， 以上分析这只是其中一个小小的方面。 如有不同见解，可予以提出。共同进步。
Page 34
谢谢观赏
多多指教
通过下面几张图我们来对比一下：
wk.baidu.com
Page 20
LOGO 干净，简洁，工具化 视觉设计
下面哪一个更能体现出“对不起，出错啦！”
Page 21
LOGO 干净，简洁，工具化 视觉设计
第二张图的淘气鬼脸图，我以为我成功了； 第三张图的表 现让我以为是在警告。 第四张图如果你犯错的时候出现了，你会想到什么？ 只有第一张图让我意识到我失败了，并且有趣味性。
Page 18
LOGO 干净，简洁，工具化 视觉设计
明确你的视觉状态
理想状态是：用户的每个操作行为都应该有相 应的视觉反馈，比如有没 有选中，操作有没有成功等。仅按鼠标操作的状态分就有默认、鼠标 指向、鼠标按下、鼠标点击四种状态，准确的反馈可以让用户流畅的 感 觉自己的操作；关于鼠标和键盘的状态，大家在操作系统的时候 注意一下，就可以看到各种操作的对应关系，而我们平时是不太注意 的，因为它默默的达到了设计的 目的。站在是否可用的角度分有： 可用状态、不可用状态.
Page 32
好友推荐
饭桶网：未提供
大众点评网：提供邮件推荐功能
相同点
设计风格 符合用户的审美习惯，并具有一定的引导性。 网站LOGO 确保logo的保护空间，确保品牌的清晰展示 而又不占据过分空间。 页面速度 页面布局 重点突出，主次分明，图文并茂。与企 业的营销目标相结合，将用户最感兴趣的， 最具有销售力的信息放置在最重要的位置。
Page 5
LOGO 视觉设计
二：美观性
反对的观点则将网站提升到“体验”的高度。因此网站应该利用web这 种媒介的独特性（它扩大媒介的限制），刺激、吸引、迷惑、愉悦、 迷住访问者。 出色的视觉设计，能够赋予意义，提供语境，唤起情感。它可激起访问 者的兴趣，并使其相信网站的专业性和可靠性。它可以确定焦点，设 立重点，建立网站元素之间的关系，并指导用户完成任务。但是，如 果不能妥善处理，可能会交付一个华丽空虚的网站。
不同点
LOGO 视觉设计
饭桶网
网站地图
饭桶网：为用户提供清晰的网站指引。 大众点评网：地图更加具体。
大众点评网
Page 30
不同点
LOGO 视觉设计
新开窗口
尽量减少新开的窗口，以避免开 过多的无效窗口，设置弹出窗口 的关闭功能。 显然大众点评网就比饭桶网做的 好。
饭桶网
大众点评网
Page 31
Page 17
LOGO 干净，简洁，工具化 视觉设计
是什么就是什么，图形达意尽量明确。
什么样子代表什么都有其特定的视觉暗示，如果不是游戏，我们应该尽 量避免和用户捉迷藏。例如应该用页签来表现的从属 关系，我们不 应该简单的做几个链接，这样会表达不清楚各部分关系。除此类的布 局因素之外，图标的表达是视觉中的一大块，好的图形表达可以帮助 用户直观 感受功能，缩短操作时间，提高效率；不过表达不好可就 麻烦了，用户可能要歪着脑袋想半天！
边的设计排版不对，有一横条的压着的情况黄色块就不能加框，视觉
会很繁杂看着不舒服，句号也是多余的 原来方案 目前方案
Pony：在设置了独立密码的情况下, 当登陆到需要 输入独立密码时, 总是先出来输入框, 此时已可输入, 我经常是立刻输入, 但打了几个字母后上面, 才瞬间 出现上面的黄色提醒"请输入独立保护密码", 而会导 致输入框位置立刻下压, 比较影响输入. 最好能改一 改html里的结构, 能够快速让人立刻输入(越快越好) 的基础上,其他显示的可以慢些load到但不应影响其 他部件的改变. Page 24
LOGO 视觉设计
页面导航
饭桶网
饭桶网：无导航条，有标签 大众点评网：有导航条，有标签
大众点评网
Page 28
不同点
LOGO 视觉设计
广告
大众点评网：有广告，但广告能 避免干扰视线，避免喧宾夺主， 广告图片符合整体风格 饭桶网：有广告，且广告干扰视 线，喧宾夺主
饭桶网
大众点评网
Page 29
Page 19
LOGO 干净，简洁，工具化 视觉设计
请用准确的视觉来辅助信息反馈。
我们用来对应的视觉辅助图要力求表现每种情况的 准确含义。当然，为了增加趣味性，我们可以允 许任意表现形式或表情的存在，前提是你的表达 要准确，不要有歧义，否则使用者的第一反映可 能不是你要表现的，由于理解的歧义所带来的损 失和挫折感会让用户感到厌恶。
漂亮的外观，首先给访问者一个不错的第一印象。
Page 4
LOGO 视觉设计
当谈到网站的视觉设计这个问题时，有两种截然相反的观点。
一：可用性倡导者们，一直认为，网站要便于使
用，而非漂亮。 jakob nielsen认为，几乎所有为 实现视觉效果而做的事情，都会对 可用性产生妨 碍。
不过在过去几年，可用性倡导者们的防线，以有松动。
Page 7
LOGO 视觉设计
那么应该怎样做好 web网站的视觉设计呢？
Page 8
从五个方面做好视觉设计
LOGO 视觉设计
视觉设计—传播产品理念 视觉设计—干净，简洁，工具化 视觉设计—制定规范，维持统一 视觉设计—重点突出 视觉设计—防止不恰当的低龄化
Page 9
LOGO 视觉设计 1、视觉设计—传播产品理念
传播产品理念 大气成熟，干净整洁，工具化 规范与统一 重点突出 防止不恰当的低龄化
Page 26
案例分析
LOGO 视觉设计
http://www.dianping.com/changsha http://changsha.fantong.com/
我们的案例是从整体视觉这块来分析
Page 27
不同点
品牌：塑造身份 视觉设计的一个任务就是：确保网站具有视觉一致性。所有页面看起来，就像是 从一个模子里刻出来的一样。它们必须有相同的logo,相同的配色方案，以及 （对大部分而言）相同的布局。访问者看到一个页面，就应该可以立即识别 出其他的所有页面。除此之外，这种一致的外观和感觉，应支持网站的“品 牌”。 什么叫品牌？ 它是一个产品或整个组织给人的整体映象。 它包括logo、包装、广告、视觉呈现、当然还有网站本身。 令人映象深刻的品牌，具有一种身份，个性，以及自身的特色，具有能够吸引目 标，与众不同的外观和感受。 更为重要的是品牌令人难以忘记。
Page 13
LOGO 2、视觉设计—干净，简洁，工具化 视觉设计
•
“推广”很重要，“简洁”也很重要，因此舍“推广”而取“简洁”
– 语音邮箱放到邮箱登录后的邮箱首页右上角，但太重hardsell了
，会影响一些速度和简洁性
• 不多用一个图片
– 在好友Qzone文章的摘要前加头像，感觉会破坏阅读感（容易吸 引眼球到头像而非文章），而从关注好友的角度，头像能突出好 友。但给用户2个图片，用户看哪个呢？
– 能用一种字体颜色的，不多用一种颜色
– 能用一种字体大小的，不多用一种大小
• 用标准组件
– 能用标准控件的，不自己画控件 – 能用文字的，不用图片（加图片是要申请的）
– 保持尽可能少的格式式样
• 维持统一
Page 23
4、视觉设计—重点突出
•
LOGO 视觉设计
每个页面（板块）只有一块视觉重点。并且，突出重点，不让用户去找。左
Page 6
LOGO 视觉设计
对使用web的人来说，争论双方的观点既非完全错误，也非 完全正确。 事实上可用性与美观性在web上是不冲突的。 我们能够同时拥有美感与功能性。让我们尽全力平衡形式 与功能。 如果说，可用性因素使网站具有功能性，视觉设计使网站 令人难忘，那么，我们的目标是，二者兼具。
制作者：
第八组全体成员（陈闪闪 邓成琳 夏子晴 黄河 陶丽帆）
Page 2
LOGO 先来看看视觉设计与其它web设计的关系 视觉设计
视觉设计的重要性！
Page 3
视觉设计的
视觉设计 定义
LOGO
视觉设计是指：针对眼睛官能的主观形式 的表现手段和结果。
“爱美之心人皆有之”，在Web领域也不例外。 无论网站界面采用什么样的设计风格，或简约、明快，或复杂、精致， 大家都喜欢井然有序、外观漂亮的网站。
由此可见：
趣味性和准确性并不矛盾， 我们在设计趣味性的同时，别忽略设计的准确性。
Page 22
3、视觉设计—制定规范，维持统一
• 文字使用要规范，语法，大小，颜色，大小写都需要注意
LOGO 视觉设计
– 能用一个词表达的，不用一句话。能用一句话表达清楚的，不用
两句话 – 每个概念都只有唯一一种表达。如”VIP”的概念
看下面一组图：
Page 11
传播产品理念
LOGO 视觉设计
图一： QQ 的视觉定位是以青少年为主的，所以它的视觉设计才采用了比较明亮活 泼的色彩。 图二、图三：msn 和TM 的视觉定位是以办公室工作人员为定位，所以它的视觉使 用比较稳定和平静的色彩。
Page 12
传播产品理念
LOGO 视觉设计
LOGO 5、视觉设计—防止不恰当的低龄化 视觉设计
• •
在追求“简单”的过程中，QQMail不知不觉的变得“中性”、“成熟”化 。 当我们更加理性和严谨地设计产品的时候，自然会远离“低龄”倾向。“成 熟”源自合理的设计，“低龄”源自不合常理的设计。 不恰当的低龄化
Page 25
小结
LOGO 视觉设计
Page 33
LOGO 视觉设计
页面色彩 与品牌整体形象相统一，主色调辅助色 不超过三种颜色。以恰当的色彩明度和 亮度，确保浏览者的浏览舒适度。 图片展示 有图片，且图片比例协调，不变形， 图片清晰
显示路径
无论用户浏览到哪一个层级，哪一个页 面，都可以清楚知道看到该页面的路径。
LOGO 视觉设计
Page 15
LOGO 干净，简洁，工具化 视觉设计
wordpress 博客的后台管理界面，我们可以看到清 晰的从属关系：管理–>文章–>文章内的修改区域。
Page 16
LOGO 干净，简洁，工具化 视觉设计
vista 系统的界面：三个区域的层级关系一目了然 ，“1”区要高 出“2”区域，“2”区域要比“3”区域的颜色深，这样整体的从属 关系就很明显。
• 工具化设计意味着清晰的逻辑和操作。不是内容越多越好，是越简单越好。
Page 14
LOGO 干净，简洁，工具化 视觉设计
视觉结构和层级关系。
页面表现的层级关系和结构是用视觉的形式表现出来的，比 如包含关系及业务的先后顺序的表现。 让用户通过视觉就能够直接的明白应该先看什么，后看什么， 元素时间是什么关系等等。 让我们来看下面的两张图：