讲课视频在线视频

下面是交互设计的主体

也就是设计原理了

在这里

我给大家介绍了这样三个方面

就是包括图形用户界面

Graphical User Interface

它的设计规则

两个量化模型和定律

首先我们来看一下

叫GUI的设计规则

我们今天常用的终端

比如PC 笔记本

还有我们的平板和手机

它的界面我们都认为

它是运行在叫图形界面上

我们简称GUI或者念做gui

那么讲GUI的设计规则

首先要谈谈GUI的本质

以及它界面的组成

GUI它允许用户直接操纵

屏幕上的目标

这些操纵包括点击 拖曳

旋转 缩放等

操作的反馈要时时可见

即所谓我们这样的一个词

叫所见即所得

就是What You See Is

What You Get

而我们图形用户界面上的

基本元素我们称为WIMP

就是我们承载内容的窗口

我们的图形化的icon

也就是说

我们便于内容收起来的时候

这个图标

那么Menu就是说

我们来进行功能选择的时候

来操作的这个菜单

当然还有这个P很重要

是我们的叫点击的设备

而这些设备

今天也发生了很多的变化

比如我们的鼠标

我们的Touch pad

还有我们手机本身我们的手

就是Touch本身

都是组成了我们的pointing devices

因为像鼠标这样的设备

它的操纵空间

和显示空间的不一致

一个在桌上的平面

一个在我们立面的显示器

可能大家还用过

这个所谓C/D Ratio

就是说我们显示和

控制域之间的速度的调整

这些不一样的元素

就是决定了我们GUI

图形用户界面的这些基本元素

以及它的特征它的选项

我们就可以在GUI的设计中

对它们进行一个合理的

这种排布

那么具体的呢

在GUI的WIMP元素上

通过交互设计

要体现GUI的本质

它的设计目标

可以体现为下面四个方面

就是设计规则

就是可视化 一致性

直接映射和有效的反馈

最主要的是可视化的原则

原因也很简单

我们人类最重要的信息来源

80%是通过视觉获取的

那么在GUI上

可视化就体现为

刚才我们谈到的WIMP

这些屏幕元素的选择

布局 呈现以及装饰

同学们其实可以找到非常多的

所谓实战指南

这些繁多和分散的

设计规则之下

我需要同学们理解的是

人的视觉认知的基本原理

这是这些很繁多的规则

和呈现的一个最本质的依据

所以在可视化方面

我主要跟大家介绍的是

视觉认知的原理

我们称为叫格式塔

这就是上世纪初形成的

格式塔理论

这个词它是来自于德文

是当时几个德国心理学家

研究总结的

语意上是叫做完形心理学

这些学说发现和解释了

人类视觉认知活动的

这种整体性

解释了人是如何认识视场内的

就是说我们视线范围内的

元素之间的关系的

它主要包括六个方面

我们分别介绍

首先是所谓的叫做闭合律

也就是说

不管我们眼睛看到的环境中的

还是屏幕中的图形

人们不会孤立地看待

一个一个的像素

或者一个一个的元素

而是根据自己原有的知识

把缺失的像素

在视觉系统中补齐

比如在这个图上

我们可以看出有一个三角形

每个同学都可以看到

这里有个三角形

还有大熊猫的圆圆的脑袋

这是因为人的视觉认知

具有整体来决定部分的

这种性质

而部分 也就是说

部分像素它是依存于

整体的认知的

那么第二个定律我们叫连续律

是指对线条的一种

直觉的认知的这种倾向

比如这个图上所示

尽管一个线条受其他线条

这样的阻断

但是我们看到的时候

根本就是说未阻断

或者是连续一样

人们往往是在

认知知觉对象的时候

沿直线继续成为直线

使曲线连续成为曲线的

这样一个倾向

那么下一个定律叫做相似律

我们在图形上可以看到

这里有很多笑脸

但是我们会把

都是三角形为背景的笑脸

聚为一体

那么这就是所谓的相似律

下面还有接近律

我们看左右两个图

它都是12个笑脸

但是我们人去给别人介绍

去解释它的时候

我们会说左边是三行

而右边是三列

原因很简单

就是它们的距离决定了

你会怎样认知它是一个整体

那么对称律

看起来就似乎和接近律相佐

比如这里我们看到

这个中括号和这个小括号

它们的距离很近 很接近

但是人们还会倾向于

把这个作为一个整体

中括号的一对和小括号的一对

作为一个整体

那么最后一个定律

所谓前背景相分离

这是常见的就是说

我们在有很多所谓

找某种对象的这种视觉游戏

其实就是利用了

人们的这种区分前景和背景的

这种倾向性

并刻意来做了一些混淆

因为在视场内

人们会主动地

把他感兴趣的对象区分开来

那么在听觉中

其实也有这样的一个特性

就是跟前景和背景

主动来进行区分开

那么格式塔这个认知原理

是我们进行屏幕元素的

这种选择 布局 呈现

和进行一些装饰的一些依据

我们在格式塔指导下

会根据这些元素的接近 对称

连续 相似

整体性以及前背景区分的

这种程度来决定

我们屏幕元素的分组

比如元素的排列以及对齐的这种方法

屏幕元素的装饰方法

那么比如字体的选择 颜色

边框等等

以及屏幕元素之间的这种留白

那么这些我们看到的

那些具体的攻略

无不体现着

就是说我们对视觉原理的

理解和灵活的运用

这个非常重要

那么具体的操作方面

有大量的这种推荐内容

可以给大家来看

那么这里需要提醒的就是

大家要理解

我们这种可视化设计的

一些规则的基本来源

是根据格式塔视觉认知的原理

那么GUI设计的第二条规则

我想强调的叫做一致性

一直是因为我们前面讲到

我们的认知

分为潜意识和主动意识

那么潜意识实际上形成

是我们大量的习惯

跟我们的潜意识是有关的

那么我们在交互设计中

要充分利用人们的习惯

习惯的力量是非常强大的

如果遵守习惯了

可以节约很大的学习成本

就是说我们交互设计中

可用性目标里的学习成本

并且还可以提高使用的效率

那么比如相似的任务

在我们界面上和相似的操作

要用相似的元素来表示出来

这个时候你就不要刻意创新

刻意用不同的设计

比如我们举例来说

界面元素中的这种快捷键

和命令语句

这些设计要在程序内外

尽管保持一致

这是一个非常有序的例子

大家可以把自己的手机打开

你可以看看有不同的应用

我上面提示有两类应用

左边是一类应用

比如你去打电话

或者是作为遥控器出来

我们都有数字键

那么右侧是作为比如计算器

还有计算机上的

大键盘里的小键盘

如果是硬键盘的话

我们如果看软件

你可以看一个拨号

看一个计算器

它们都有数字键

而这两个数字键盘它的排布

我们一看就知道

是不一样的

那么我作为一个作业

请大家课后来分析一下

软键盘设计中的一致性

是怎么样的

这是一个例子

也是一个问题

大家通过问题来进行学习

第三条规则叫做直接映射

我们屏幕上需要操控的

这种元素的呈现排列

最好和我们现实世界中

对对象的操控方式和反馈方式

要尽量一致

所谓人在操控它的时候

形成直接的映射

这是减少用户认知负担的

一种非常有效的考虑

比如在图上所示

音量的控制

我们这两种方式都很好

当然这个是在触屏的模式下

反而的话就是说你的这种

所谓tangible

直接旋转的能力

是很难获得的

那么在流媒体

如果我们有一个流媒体播放器

那么就有一些操控的按钮

就是软的这个按钮的设计

大家可以考虑一下

上面的排列为什么没有

下面的排列好

那么我想提醒一点的是

所谓流媒体是有

基于时间量的媒体

是有方向性的

所以这个排列

也不是这样随意的

那么GUI设计的最后一个规则

我们叫做有效反馈

交互是一个动态的过程

就是系统当然要

及时告诉用户所处的

交互处理的状态

比如我们可以看到

非常有意义的一些

或者说很meaningful的

一些动态

关于Loading

就是加载过程的一些设计

它不仅能告诉用户

目前的进展量

而且还兼有评价网速性能的

这样的一些作用

所以你比如它不但是进度少了

而且速度比较慢

所以它就出来一个蜗牛

如果比较快的时候

可能就是一个鸟很快飞过去

所以这样才更加有趣

足够的信息量并且有趣

当然要掌握这些设计原则

需要大量的案例分析去学习

和实践的训练

希望同学们能有兴趣

去寻找和学习一下

那么有助于提高大家的

具体的实战的能力