当前课程知识点：界面设计导论 > 第三章：界面设计元素 > （1）信息结构与交互设计（1-4） > 第四讲
前面我们讲了信息分类
在界面上信息分类是以标签 热文本
和搜索等等形式出现的
我们先讲讲标签
标签呢把信息的分类视觉化
比如图示的书籍标签
把某些内容用不同颜色的彩色纸条标出来
方便快速的查找
这就是一种视觉化的标签
和书籍标签不同的是
界面它是呈现在一个有限的屏幕上
这就需要标签的数量不能太多
比如说BBC是一个新闻内容网站
在这个界面上有很多种标签形式
最上一栏是用作导航的标签
它在每页都保持一致
中间的这一栏是新闻分类标签
这里新闻是指最新的消息
下面左侧是标题式的标签
也就是用文章的标题作为标签
中间的照片是图像标签
右侧是列表式标签
标签有的采用名词
有的是短语 有的是图片
有的用图标
运用标签的原则就是能够反映
它所代表的内容
符合用户的认知逻辑
另外一个和它对比的例子
是搜狐旧版的新闻网站
可以看到它们一个显得很简洁
另外一个十分复杂
图示的这个页面信息太多了
而且这些分类的重要性都差不多
几乎是均匀分布在界面上
以至于缺少有效阅读需要的层次
而BBC的优点非常明显
它把显示在主界面的分类简化到了八个
对信息进行了分层和分级的处理
把小分类合并到大分类当中
把不重要的分类做了隐藏
这样呢界面呢就简洁易读
搜狐新版的网页已经改进了很多
之所以拿出旧版网页呢
主要是为了做个对比
下面谈一谈导航
导航的作用呢是方便用户
往返于不同的内容
避免迷失
类似于指路系统
告诉用户你在哪可以去哪儿
比如图示的例子
路牌表达了目前位置
和前方可以到达的位置
这个标牌对行驶在路口的司机
之所以具有导航的作用呢
是因为有具体的情境
这个情境就是目前我所在的位置
比如路牌中的凤凰路
以此为参照
可以知道我可以去哪里
比如路牌中直行可以到达迎春路
右转到达月川中路等等
如果缺少这个情境
路牌就失去了导航的作用
再比如这张地图
它尽管很详细
但是呢因为没有标出
使用者所在的位置
也就是缺少游客当时的使用情境
对于身处公园中的人
如果不知道自己在哪里
这张地图
也是没有办法起到导航作用的
从前面两个例子来看呢
导航最重要的
是随时关注用户当时的使用情境
告诉用户当前位置
和可以前往的位置
不同的是界面无法提供
类似实体空间的地标线索
不过位置一致的导航条
和所在位置的提示
都可以提供浏览的情景
这种固定在每个页面的导航呢
叫全站式导航
除了全站式导航以外
还有区域导航 情境导航等
比如以apple网站为例
我们分别讲一下各种不同的导航方式
这个网站内容非常多
但是信息的层次非常清晰
有灵活的导航系统
进入网页上方apple的图标
告诉用户网页所属的企业品牌
固定的导航栏形成了全站式的导航
因为这个网站的目标用户
是想购买和了解apple产品
或者想要得到相关服务的用户
所以标签的命名
是以产品和服务来命名的
主导航条下面的区域呢
一般会放他们最新的产品
和最想让用户看到的新鲜事
比如在这张iPhone8的高清图片前面
网页上的图片呢
是iPhone和iWatch等等的图片
高清的图片构成了首页的区域导航
它直接引导用户
访问它们推出的最新产品
这种设计呢往往非常奏效
因为即使访问网站的初始目的
可能只是想修改一下账户信息
但也难免不被这个夺目的图片吸引
从而一直探索下去
在访问新产品页面的不同内容的时候呢
出现了新的导航标签
这些导航呢被称为情境式导航
它的作用就是针对你当前的所在位置
和使用的情境来进行引导
除了前面所说的全站式 区域式
和情境式页面导航以外
导航呢还有其他的灵活处理的方法
比如说个性化定制
和社会化导航等等
我们以亚马逊为例
当你在浏览一本书的时候
页面下方就会出现一排其他的书
并且会出现这样一个标签
你可能还喜欢等等字样
这些新标签呢
是通过后台的用户数据计算出来的
系统会根据大数据
自动给每个用户推荐图书
也可能会根据用户个人的偏好
来推荐图书
那这两种导航
分别就是社会化导航和个性化导航
个性化导航呢
除了前面所说的这种形式以外
还有用户自己自定义的导航栏
比如说interest这个网站
在用户登录的时候
会让用户填一些个人偏好的图表
填完以后
用户就会进入自己定制的导航页面
也就是说在页面上出现的内容
是根据用户个人偏好筛选出来的
选择了不同的偏好
页面出现的内容也会不一样
不过通过社会化导航和个性化导航
它不是任何情况下都适用的
设计导航的时候呢
需要根据具体的情况
来决定要采用哪一种导航
或者多种形式的导航的组合
下面呢我们来谈一谈
信息结构的图示方法
这个是信息结构的视觉图表
每一个方框代表一个页面
连线代表页面之间的关系
这两张图的页面
是具有层级关系的树形结构
进入一个页面需要从上到下进行点击
树形结构的好处呢
是层级结构比较清晰
从大分类到小分类再到目的信息
逐级进入
再一级一级沿原路返回
树形结构的层级呢不能太深
宽而浅的结构比较容易使用
如果层级关系超过了三级
就容易迷路
变得复杂难用了
这张图表表现的也是
树形层级结构
不同的是橙色线条
表示在二三级页面之间也可以跳转
也就是说在页面中
存在打破页面等级关系的导航
这种情况还是比较常见的
比如说在内容中的热文本
可以不经过入口
直接跳转到下一个内容
有些大型的网站结构
也可能表现为这种复杂的嵌套式的结构
比如说通过博物馆的官网
可以访问虚拟展厅
而虚拟展厅又是一个树形结构
信息结构还可以用流程图来表示
在这张图表中
菱形部分是需要经过逻辑判断的交互节点
满足不同的条件
可以进入不同的内容
信息结构图可以采用手绘
也可以用计算机软件绘制
这类软件非常多
也比较容易学习
比如这张图就是用PPT制作的
它是一个个人作品网站的信息结构
比较简单
我们可以用这种树状图
来表示界面之间的层级关系
可以看到首页有四个信息分类
分别是作品集
联系方式 个人简历和口碑
这四个分类的每一项
是一个导向其它二级页面的入口
在这个课的附件中呢
我会上传一个pdf文档
里面有对信息结构图示方法的描述
如果对信息结构感兴趣
可以看一看这本书
关于信息结构和交互设计的部分
就讲到这里
-课程简介
--课程简介
-（1） 什么是界面
--什么是界面
-（2）界面设计为什么重要
-（3）UI的进化
--UI的进化
-（4）设计师的自我修炼
--新手的疑问
-第一章总结
--第一章总结
-第一章：界面设计概述--课后习题
-本章概述
--本章概述
-（1） 为什么设计？
-- 为什么设计？
-（2）界面设计流程
--界面设计流程
-（3）视觉优化原理
--视觉优化原理
-（4）可用性评估的基本原则
-第二章：GUI设计心法--课后习题
-本章概述
--本章概述
-（1）信息结构与交互设计（1-4）
--第一讲
--第二讲
--第三讲
--第四讲
-（2） 界面草图与原型设计
-（3）视觉设计原则
--视觉设计原则
-（4） 文字与阅读
--字体设计
-（5）图标
--图标
-（6） 色彩
--色彩
-（7） 动效
--动效设计概述
--动效小制作1
--动效小制作2
-（8）第三章小结
--第三章小结
-（9）学生个人作品网站主页设计体会
--张铁汉
-第三章：界面设计元素--大作业
-前言
--前言
-（1）什么是网页
--什么是网页
-（2）标签与元素
--标签与元素
-（3）文本格式化、块级元素与行内元素
-（4）如何使用H5进行网页布局
-（5）目录、目录结构及在页面中插入图片
-（6）CSS样式表
--CSS样式表
-（7）CSS盒子模型
--CSS盒子模型
-（8）CSS控制文本
--CSS控制文本
-（9）CSS背景、特效、动画
-（10）初识javascript及jquery
-总结
--总结
-邱艺芸-清华大学艺术博物馆APP设计
--邱艺芸
-潘俊丞-阿甘跑步改版界面设计——“趣跑”
--潘俊丞
-王婧-星巴克改版设计
--王婧
-李向阳-DIY服装app设计
--李向阳
-相宸卓-效率软件改版设计
--相宸卓
-周文欣-“你好，安德烈”app设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
