当前课程知识点:界面设计导论 >  第三章:界面设计元素 >  (1)信息结构与交互设计(1-4) >  第三讲

返回《界面设计导论》慕课在线视频课程列表

第三讲在线视频

第三讲

下一节:第四讲

返回《界面设计导论》慕课在线视频列表

第三讲课程教案、知识点、字幕

前面我们讲了任务分析

任务分析呢

重点是分析人机交互过程中

完成一个任务需要的

输入和输出行为有哪些

需要什么样的顺序

有哪些逻辑判断等等

任务分析呢关注的是交互的功能

但是在交互过程中传递的是信息

信息需要通过语言文字 图形

等等形式呈现出来

才能为人所用

那反应到界面上呢

就是信息结构

信息结构呢包括分类 标签

导航和搜索等形式

界面上有序的内容呈现

首先是建立在信息分类上的

大量的杂乱无章的数据呢

是不可读的

分类是理解的基础

其次呢经过分类的信息

需要可视化为某种视觉结构

也就是通过有效的布局

让人们能够更加有效的获取和感知信息

信息怎么分类怎样组织

会影响用户对界面的使用

好的信息结构呢

应该层次清晰重点突出

符合人们的期望

信息分类呢是人们一直在使用的方法

比如说书的目录呢

就是一种对信息的分类

和结构化的呈现

我们阅读的时候阅读目录就可以

大致了解作者写了哪方面的内容

那么读者呢可以选择按照顺序看

或者呢按照目录

快速找到感兴趣的章节去看

所以这个目录呢起到了导读的作用

比如说大量藏书的图书馆

它有非常严谨和详细的书目分类系统

凭借书目的编号

我们就可以找到藏书的位置

读者在图书馆的海量藏书中

也是凭借着图书分类的指示牌

去浏览自己感兴趣的书目

在空间里面呢

处处可以见到信息分类和结构化的例子

比如商场中划分出服装区

化妆品区 餐饮区等等

这些分类呢

让人们可以更好地识别和选择

那信息的结构和组织的分类方法

有很多种

在这里列举了14种不同的分类方法

很多的分类方法我们都很熟悉

那么采用什么样的分类方法好呢

有没有什么评价标准

这个应该具体问题具体对待

比如说一本纸质的企业电话簿

应该是按字母顺序排列好呢

还是按照企业类型分类好呢

或者最好按照地理位置进行分类呢

事实上呢这几种方法各有优缺点

因为查询企业电话的人

有不同的偏好

甚至存在几种偏好共存的情况

如果他知道确切的企业名称

当然按照字母顺序查询最有效率

如果想看附近的企业

按地理位置查最好

如果只想看某一类的企业呢

当然希望按照企业类型查询

所以呢合理的分类呢

应该满足使用者不同的意图

让使用者能看得懂看得明白

比如ps软件的工具栏

是按照任务进行分类的

因为工具栏的作用

是满足用户绘图的需要

不过在多数情况下

信息的组织和分类是混用的

面向不同使用目的的内容

在分类上有不同的优先级

比如说左侧网页是商品售卖的内容

售卖商品的种类是最优先的

右侧页面呢是按照用户进行分类的

这里用户分类的优先级别是最高的

再比如Booking.com

这是一家提供预订酒店服务的网站

在它的首页提供了地点名称

时间和人数的搜索

还有地区 城市等分类的入口

另外呢还有特价搜索等等

采用什么样的分类策略

怎样判断信息结构的好坏

最终还是要追溯到源头

就是我们开头讲到的三要素

情境 用户和内容

airbnb显然和booking.com

有着不同的情境用户和内容

这个网站的主体用户呢分为两类

一类是民宿的使用者

另一类呢是民宿的提供者

在主界面呢优先级最高的

是面向民宿使用者的分类

其次呢是面向民宿提供者

发布房源的入口

那么发布房源的入口

会把用户引流到不同的页面

美国的越战纪念碑

是一个通过信息分类

来进行传达设计的优秀范例

越战纪念碑呢是要求

刻上阵亡和失踪士兵的姓名

设计者呢巧用心思

并没有按照常规的

按姓氏笔画分类的方法

而是按照时间顺序

把阵亡将士名单在空间上展开

这个纪念碑呢是有两个

有120度夹角的三角形拼接而成

从东墙到西墙

纪念碑形成一个立体的时间轴

代表着从1959年越战开始

到1975年越战结束的历史时期

1959年第一个阵亡士兵的名字

刻在东墙的入口处

然后按照时间顺序从上到下从东到西

依次刻上死者的名字

直到西墙的出口

刻上最后一个阵亡者的名字

随着时间轴的展开

墙体逐渐增高

名单也越来越长

凸起的山丘下沉的地面

仿佛把纪念碑埋在地下

这种从空间到时间的对应关系

和越来越长的阵亡者名单

让一个一个消失的生命

和战争的进程发生了联系

让人们体验到那段战争的严酷性

引发人们对战争的反思

那么这个案例中呢我们可以看到

好的分类不仅可以降低复杂性

还可以改善认知和传达的意义

界面设计导论课程列表:

第一章:界面设计概述

-课程简介

--课程简介

-(1) 什么是界面

--什么是界面

-(2)界面设计为什么重要

--界面设计为什么重要

-(3)UI的进化

--UI的进化

-(4)设计师的自我修炼

--新手的疑问

--访谈|linkedin设计师-顾盼

--访谈|爱奇艺设计师-张乙申

--访谈|爱奇艺用户体验设计中心负责人-李威

--访谈|创新工厂人工智能工程院副总裁-吴卓浩

-第一章总结

--第一章总结

-第一章:界面设计概述--课后习题

第二章:GUI设计心法

-本章概述

--本章概述

-(1) 为什么设计?

-- 为什么设计?

-(2)界面设计流程

--界面设计流程

-(3)视觉优化原理

--视觉优化原理

-(4)可用性评估的基本原则

--可用性评估的基本原则

-第二章:GUI设计心法--课后习题

第三章:界面设计元素

-本章概述

--本章概述

-(1)信息结构与交互设计(1-4)

--第一讲

--第二讲

--第三讲

--第四讲

-(2) 界面草图与原型设计

--界面草图与原型设计

-(3)视觉设计原则

--视觉设计原则

-(4) 文字与阅读

--字体设计

-(5)图标

--图标

-(6) 色彩

--色彩

-(7) 动效

--动效设计概述

--动效小制作1

--动效小制作2

-(8)第三章小结

--第三章小结

-(9)学生个人作品网站主页设计体会

--张铁汉

--案例:国家地理杂志的APP改版设计

-第三章:界面设计元素--大作业

第四章:从设计到实现:H5网页基础概念

-前言

--前言

-(1)什么是网页

--什么是网页

-(2)标签与元素

--标签与元素

-(3)文本格式化、块级元素与行内元素

--文本格式化、块级元素与行内元素

-(4)如何使用H5进行网页布局

--如何使用H5进行网页布局

-(5)目录、目录结构及在页面中插入图片

--目录、目录结构及在页面中插入图片

-(6)CSS样式表

--CSS样式表

-(7)CSS盒子模型

--CSS盒子模型

-(8)CSS控制文本

--CSS控制文本

-(9)CSS背景、特效、动画

--CSS背景、特效、动画

-(10)初识javascript及jquery

--初识javascript及jquery

-总结

--总结

《界面设计导论》作品分享活动

-邱艺芸-清华大学艺术博物馆APP设计

--邱艺芸

-潘俊丞-阿甘跑步改版界面设计——“趣跑”

--潘俊丞

-王婧-星巴克改版设计

--王婧

-李向阳-DIY服装app设计

--李向阳

-相宸卓-效率软件改版设计

--相宸卓

-周文欣-“你好,安德烈”app设计

--周文欣

2020年春活动:“和美院学生聊聊界面设计”

-走近游戏交互设计

--走近游戏交互设计

-《稻之道》(作者:于汉杰)

--稻之道-于汉杰

-《思想咖啡》(作者:艾瑞雯)

--思想咖啡-艾瑞雯

-《稻香村京八件销售网页设计》(作者:王依柳)

--《稻香村京八件销售网页》(作者:王依柳)

第三讲笔记与讨论

也许你还感兴趣的课程:

© 柠檬大学-慕课导航 课程版权归原始院校所有,
本网站仅通过互联网进行慕课课程索引,不提供在线课程学习和视频,请同学们点击报名到课程提供网站进行学习。