当前课程知识点：界面设计导论 > 第三章：界面设计元素 > （1）信息结构与交互设计（1-4） > 第三讲
前面我们讲了任务分析
任务分析呢
重点是分析人机交互过程中
完成一个任务需要的
输入和输出行为有哪些
需要什么样的顺序
有哪些逻辑判断等等
任务分析呢关注的是交互的功能
但是在交互过程中传递的是信息
信息需要通过语言文字 图形
等等形式呈现出来
才能为人所用
那反应到界面上呢
就是信息结构
信息结构呢包括分类 标签
导航和搜索等形式
界面上有序的内容呈现
首先是建立在信息分类上的
大量的杂乱无章的数据呢
是不可读的
分类是理解的基础
其次呢经过分类的信息
需要可视化为某种视觉结构
也就是通过有效的布局
让人们能够更加有效的获取和感知信息
信息怎么分类怎样组织
会影响用户对界面的使用
好的信息结构呢
应该层次清晰重点突出
符合人们的期望
信息分类呢是人们一直在使用的方法
比如说书的目录呢
就是一种对信息的分类
和结构化的呈现
我们阅读的时候阅读目录就可以
大致了解作者写了哪方面的内容
那么读者呢可以选择按照顺序看
或者呢按照目录
快速找到感兴趣的章节去看
所以这个目录呢起到了导读的作用
比如说大量藏书的图书馆
它有非常严谨和详细的书目分类系统
凭借书目的编号
我们就可以找到藏书的位置
读者在图书馆的海量藏书中
也是凭借着图书分类的指示牌
去浏览自己感兴趣的书目
在空间里面呢
处处可以见到信息分类和结构化的例子
比如商场中划分出服装区
化妆品区 餐饮区等等
这些分类呢
让人们可以更好地识别和选择
那信息的结构和组织的分类方法
有很多种
在这里列举了14种不同的分类方法
很多的分类方法我们都很熟悉
那么采用什么样的分类方法好呢
有没有什么评价标准
这个应该具体问题具体对待
比如说一本纸质的企业电话簿
应该是按字母顺序排列好呢
还是按照企业类型分类好呢
或者最好按照地理位置进行分类呢
事实上呢这几种方法各有优缺点
因为查询企业电话的人
有不同的偏好
甚至存在几种偏好共存的情况
如果他知道确切的企业名称
当然按照字母顺序查询最有效率
如果想看附近的企业
按地理位置查最好
如果只想看某一类的企业呢
当然希望按照企业类型查询
所以呢合理的分类呢
应该满足使用者不同的意图
让使用者能看得懂看得明白
比如ps软件的工具栏
是按照任务进行分类的
因为工具栏的作用
是满足用户绘图的需要
不过在多数情况下
信息的组织和分类是混用的
面向不同使用目的的内容
在分类上有不同的优先级
比如说左侧网页是商品售卖的内容
售卖商品的种类是最优先的
右侧页面呢是按照用户进行分类的
这里用户分类的优先级别是最高的
再比如Booking.com
这是一家提供预订酒店服务的网站
在它的首页提供了地点名称
时间和人数的搜索
还有地区 城市等分类的入口
另外呢还有特价搜索等等
采用什么样的分类策略
怎样判断信息结构的好坏
最终还是要追溯到源头
就是我们开头讲到的三要素
情境 用户和内容
airbnb显然和booking.com
有着不同的情境用户和内容
这个网站的主体用户呢分为两类
一类是民宿的使用者
另一类呢是民宿的提供者
在主界面呢优先级最高的
是面向民宿使用者的分类
其次呢是面向民宿提供者
发布房源的入口
那么发布房源的入口
会把用户引流到不同的页面
美国的越战纪念碑
是一个通过信息分类
来进行传达设计的优秀范例
越战纪念碑呢是要求
刻上阵亡和失踪士兵的姓名
设计者呢巧用心思
并没有按照常规的
按姓氏笔画分类的方法
而是按照时间顺序
把阵亡将士名单在空间上展开
这个纪念碑呢是有两个
有120度夹角的三角形拼接而成
从东墙到西墙
纪念碑形成一个立体的时间轴
代表着从1959年越战开始
到1975年越战结束的历史时期
1959年第一个阵亡士兵的名字
刻在东墙的入口处
然后按照时间顺序从上到下从东到西
依次刻上死者的名字
直到西墙的出口
刻上最后一个阵亡者的名字
随着时间轴的展开
墙体逐渐增高
名单也越来越长
凸起的山丘下沉的地面
仿佛把纪念碑埋在地下
这种从空间到时间的对应关系
和越来越长的阵亡者名单
让一个一个消失的生命
和战争的进程发生了联系
让人们体验到那段战争的严酷性
引发人们对战争的反思
那么这个案例中呢我们可以看到
好的分类不仅可以降低复杂性
还可以改善认知和传达的意义
-课程简介
--课程简介
-（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设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
