当前课程知识点：视觉传达与传播设计 >  第六章 视觉传达的多元化拓展 >  6.1 视觉设计的平面拓展 >  6.1.1 界面设计

返回《视觉传达与传播设计》慕课在线视频课程列表

6.1.1 界面设计资料文件与下载

6.1.1 界面设计

随着数字传播领域的不断扩大，几乎所有优秀的系统设计和成功的多媒体产品都必定涉及到友好的交互界面。交互又称人机交互，交互界面又称用户界面，是人们通过互动获得信息的媒介与模式。简单、自然、友好、一致是友好界面的基本特征。

界面设计强调交互性过程。一方面是物的信息传达，另一方面是人的接受与反馈。

现代设计已经从功能主义逐步走向了多元化和人性化。今天的用户纷纷要求表现自我意识、个人风格，反映在界面上亦使界面越来越丰富。一方面要求界面信息齐全、高效；另一方面又要满足人们的审美和情感需要，实质是界面要求被赋予人的情感进行沟通交流。

界面提供人们一种信息暗示，不同的界面风格体现一定的内容特征，与内部信息形成内在的联系与呼应，在设计网站界面时，考虑网站的属性与个性，不同的界面传达了特定的信息。人性化的交互体现为交互过程中得自然舒适、获取信息直接有效。设计中注重对用户交互心里的研究分析，注意对重要信息部分进行形式、色彩以及排列方式的分析，使人们在打开界面的第一时间就能够自然地点击交互。

[K7OI1RWG}4{3~21618Y8XI.png

图5-1苹果的操作界面，自然的交互源自人性化的图标以及界面整体设计


  semillero的交互网页设计从一粒种子开始，点击它开始发芽生长，每到一定阶段会有一个标签掉落在枝条上，点击标签出现相应的文字信息和动画。枝条一直向上攀升，当攀升到一定阶段，枝条上结出粉色的手状花苞，此时点击标签，花朵盛开，有蜻蜓嗡嗡飞过，点击向上，枝条上结出红色的心脏果实，夜空变成深蓝色，有星星聚拢成文字在天空中闪闪发光。（见图5-2）

回顾历史我们会发现，早期的数字界面都是基于文本的。对用户来说，文本命令的掌握复杂而困难，文本界面既不美观也缺乏效率，如果将它们换成图形，就会直观很多，理解起来也轻松有趣。正因为如此，当昨天的文本界面演变成今天的图形界面时，数字技术才真正打破了交互的壁垒，成为日常生活中不可缺少的一部分。

无论操作软件还是浏览网站，用户都是为了获取或传播相应的信息。每天充斥着我们感官的大量资讯并不是信息，只是零散的数据，对沟通交流而言毫无用处。数据必须被组织转化并构建一种有意义的形式表达，才能达到为人理解为人所用的信息价值层面。图形界面的出现极大地提升了人机交互的效率，而界面上的图标发挥了至关重要的作用。图标是一种包含特定语意的图形符号，通常具有一定的指示性。在数字界面中，图标既可以代表某个功能，也可以代表某个数据。（见图5-）

1.jpg

2.jpg

30.jpg

图5-2 semillero交互网页设计，http://www.semillero.net/

4.png

5.jpg

图5-3 网站上下文广告图标 俄国turbomilk公司 http://turbomilk.com/


信息与数据的根本区别在于数据构筑的信息对用户是否产生意义。将数据转化为信息的过程就是在数据之间发现联系和模式的过程。因而，设计符号的创造过程就是将数据组织为有意义的结构或模式并以适合的图形形式表达出来，用户图形界面充分考虑信息、用户、以及所处的环境之间的关系，将界面转化为有意义的艺术符号，有效促进用户对信息的理解和记忆。

6.png

图5-4 google地图中的图标设计


通过与其他视觉元素一起构建出整个界面的视觉隐喻，图标极大地提升了人机交互的效率。原本在文本界面需要使用冗长的文字才能表达的信息，在图形界面只需要一个图标就可以代表。更重要的是，文本界面中指令式的操作逻辑可通过使用图标转化成某种视觉隐喻，从而可以被更多的人轻松地理解和使用。如垃圾桶的图标，不言自明，是放置不要的文件。

7.jpg

图5-5 图标

在用户操作图形界面时，隐喻的构建离不开图标自身视觉语意的表达。只有当用户正确理解了这些视觉语意之后，才能以正确的方式与系统互动。因此图标设计的优劣直接关系到人机互动的成败。好的图标设计必须满足两个层面：

一是识别层面，即图标的视觉设计是否符合传达的需要，是否清晰可见，是否美观；二是语意层面，即图标所表达的含义是否能够合理地表现视觉语意，用户能否正确地理解图标的含义。

数字界面既然需要通过屏幕显示，界面上图标的设计就不会简单等同于图形设计。除了一般的图形设计的要求外，图标的设计还必须考虑屏幕显示的特点。有时候为了丰富视觉效果，一些图标可能会采用一定的动画形式。在多媒体交互界面中，图标需要响应用户的操作，考虑用户操作前后图标状态的变化，如文件夹的打开和关闭。一个完整的图标一般具备三个状态，鼠标离开，鼠标经过，鼠标按下。同时需要为一个图标设计多个不同尺寸和颜色的版本，使之能应对显示设备分辨率的变化。一个应用程序的界面中可能会使用许多图标，从传达的角度来看，这些图标必须统一设计，并且形成统一的视觉风格。

8.png


图5-6 系统图标设计 俄国turbomilk公司 http://turbomilk.com/


图标作为界面上的视觉元素，如何被用户解读，是设计时必须仔细考虑的问题，人机交互时，错误的理解会引起错误的操作，甚至导致严重的后果。

在为图标构建语意时我们可以采用二种基本的方式：基于符号形式的相似性隐喻；基于符号意义的相似性隐喻。

基于符号形式的相似性隐喻是对现实世界中的一切物质和现象的直接指代，是指将所要表达的事物直接用图标描绘出来。一般说来，直接指代表达的关系比较简单直接，所以容易被用户理解，适应面较广。地球、山水、动物等，人工产物如垃圾桶、文件夹、光盘等。

9.png

10.png


图5-7 教育类网站图标设计http://turbomilk.com/  

基于符号意义的相似性隐喻是指从隐喻对象包含的意义指向出发，是指通过本体和喻体所指涉的功能意义的相似性，使用语言图形来对某个事物进行映射表达，其解读有赖于用户对约定事物的理解。比如：Photoshop软件界面中的剪切、拷贝以及粘贴图形，就像使用现实世界中的剪刀和胶水进行图文剪贴一般。

11.png

图5-8 经济类网站的图标设计http://turbomilk.com/

在设计图标时要注意，一旦使用了一个适合表达该功能的隐喻对象，不要轻易改变它。比如文件夹、文档等这些系统认可的隐喻，可以用多种手段来丰富文件夹的视觉表现，而没必要放弃这一喻体转而诉求别的喻体。因为当喻体一致时，用户凭借经验很容易推测其意义，比如：放大镜+白纸是打印预览；放大镜+文件盒对应的功能是“信息检索”。









下一节:6.1.1 自然的演绎

返回《视觉传达与传播设计》慕课在线视频列表

视觉传达与传播设计课程列表：

第一章 课程概述

-教学大纲

--教学简介

第二章 视觉传达的基本理论

-2.0 章节预习

--2.0本章预习

-2.1 视觉传达发展概述

--2.1 视觉传达发展概述

--2.1.1 graphic design（平面设计）

--2.1.2 visual communication（视觉传播）

--2.1.2 Apple iPod

--2.1.2 iPhoto 广告

--2.1.3 communication design（传播设计）

--2.1 小节作业

--2.1 课堂讨论

-2.2 视觉传达设计的特征

--2.2.1 视觉传达的基本功能

--2.2.1 识别

--2.2.1 可口可乐广告

--2.2.1 Coca-Cola广告

--2.2.1 小节作业

--2.2.1 课堂讨论

--2.2.2 传播（文化的传播）

--2.2.2 吉普车广告

--2.2.2 可口可乐广告

--2.2.2 乐事薯片广告

--2.2.2 传播（情感的传播）

--2.2.2 MINI广告

--2.2.2 'MINI'广告

--2.2.2 “MINI”广告

--2.2.2 NIKE 分屏广告

--2.2.2 第二人生游戏

--2.2.2 小结作业

--2.2.2 课堂讨论

--2.2.3 表现 （有效）

--2.2.3 表现（快速）

--2.2.3 东京奥运会

--2.2.3 表现（合理）

--2.2.3 番茄酱广告

--2.2.3 表现（语言）

--2.2.3 视觉动态效果

--2.2.3 视觉动态效果

--2.2.3 小节作业

--2.2.3 课堂讨论

-2.3 单元训练和作业——视觉语言符号的资料收集

--2.3 单元训练和作业——视觉语言符号的资料收集

-符号替换的案例

--向雅各布森致敬的椅子设计

第三章 视觉传达与传统文化

-3.0 章节预习

--本章预习

-3.1 视觉传达的国际化

--3.1.1 亚洲现代设计的发展受到欧美设计文化的影响

--3.1.2 亚洲设计对欧美设计的影响

--3.1 课堂讨论

-3.2 中国传统文化

--3.2.1小元老师讲视觉传达与传统文化

--3.2.1 汉字

--3.2.1 小元老师讲汉字的构造

--3.2.1 许娜老师讲汉字设计

--3.2.2 水墨

--3.2.2 李子柒活字印刷

--3.2.2 李子柒笔墨纸砚

--3.3.2 LV水墨风广告

--3.2.2 点石数码

--3.2.2 小节作业

--3.2.3 建筑

--3.2.3 小节作业

--3.2.4 工艺

--3.2.4 千里江山图宣传视频

--3.2.4 李子柒蜀绣

--3.2.4 蓝印花布

--3.2 小节作业

-3.3 视觉传达与象征符号

--3.3.1 象征符号

--3.3.2 中国传统文化象征符号

--3.3.3 传统文化象征符号的运用

--3.3.3 小元老师讲设计方法一：A+B

--3.3.3 小元老师讲设计方法二：发现问题的本质

--3.3.3 小元老师讲设计方法三：反向与背离

--3.3 小节作业

-3.4 单元训练和作业——传统文化符号的撷取、拆分与替换

--3.4 单元训练和作业——传统文化符号的撷取、拆分与替换

第四章 视觉传达的媒体基础

-4.0 章节预习

--4.0 本章预习

-4.0视觉传达的媒体基础

-4.1 传统媒体

--4.1.1 报纸

--4.1.1 许娜老师讲印刷工艺

--4.1.1 色卡汇聚成的河流

--4.1.1 字体设计

--4.1.1 插画设计（1）

--4.1.1 插画设计（2）

--4.1.1 插画设计（3）

--4.1.1 字体设计（1）

--4.1.1 字体设计（2)

--4.1.1 字体设计（3）

--4.1.2 杂志

--4.1.2 纽约时报杂志

--4.1.3 ＤＭ

--4.1.3 许娜老师讲型录设计

--4.1.4 广播

--4.1.4 可口可乐FM应用

--4.1.5 电视

--4.1 课堂讨论

-4.2 现代新兴媒体

--4.2.1 户外媒体

--4.2.2 电影

--4.2.3 互联网

--4.2.4 手机媒体

--4.2 小节作业

--4.2 课堂讨论

-4.3 视觉传播的媒介策略

--4.3.1 媒体的选择策略

--4.3.2 媒体的组合策略

--4.3 小节作业

--4.3 课堂讨论

-4.4 单元训练和作业——不同媒体的视觉创意资料收集

--4.4 单元训练和作业——不同媒体的视觉创意资料收集

第五章 视觉传达与传播设计

-5.0 章节预习

--5.0 本章预习

-5.1 视觉传播的过程、要素、手段以及受众分析

--5.1.1 视觉传播的过程以及要素

--5.1.2 视觉传播的传播者

--5.1.3 视觉传播的传播手段

--5.1.3 百事可乐广告

--5.1.3 苏打水创意广告

--5.1.3 NIKE广告

--5.1 小节作业

--5.1 课堂讨论

-5.2 视觉传播的调查与效果评估

--5.2 视觉传播的调查与效果评估

--5.2 华为广告“鸡同鸭讲”

--5.2 不是所有的视频都应该被分享

--5.2 华为广告“HUAWEI"

--5.2 华为科技广告

--5.2 小节作业

--5.2 课堂讨论

-5.3 单元训练和作业——媒体策略制定以及媒体效果分析

--5.3 单元训练和作业——媒体策略制定以及媒体效果分析

第六章 视觉传达的多元化拓展

-6.0 章节预习

--6.0章节预习

-6.1 视觉设计的平面拓展

--6.1 视觉传达的新媒体化

--6.1.1 界面设计

--6.1.1 自然的演绎

--6.1.1 数据信息视觉化

--6.1.1 小节作业

--6.1.2 品牌传播

--6.1.3导向设计

--6.1.3 谷歌线上线下

--6.1.3 陈叶老师讲视觉传达“空间”延伸创意案例研究1

--6.1.3 陈叶老师讲视觉传达“空间”延伸创意案例研究2

--6.1.3 小节作业

-6.2 视觉设计的立体拓展

--6.2.1 产品的语意

--6.2.1 小节作业

--6.2.2 交互体验与服务设计

--6.2.2 纪念碑谷宣传视频

--6.2.2 生态建筑

--6.2.2 小节作业

-6.3 单元训练和作业——传统文化符号的设计应用

--6.3 单元训练和作业——传统文化符号的设计应用

第七章 结课考试

-7.1 小元老师讲优秀结课作业范例

6.1.1 界面设计笔记与讨论

也许你还感兴趣的课程:


  1. 视觉传达与传播设计(2021秋)

  2. 时尚网页设计(2021秋)

  3. 马克思主义经典著作研读(2021秋)

  4. 婚姻家庭继承法(2021秋)

  5. 西班牙语入门(2021秋)

  6. 保险法(2021秋)

  7. 园艺作物育种学(2021秋)

  8. 艺术思政课(2021秋)

  9. 人体解剖生理学(2021秋)

  10. 肝硬化及其并发症的诊疗现状及研究进展(2021秋)

  11. 爆炸气体动力学(2021秋)

  12. 马克思主义基本原理概论(2021秋)

  13. 大数据算法(2021秋)

  14. 武术(2021秋)

  15. 民族居住环境与传续设计(2021秋)

  16. 科学计算与数学建模(2021秋)

  17. 欧盟经济(2021秋)

  18. 大学化学(2021秋)

  19. 高等化工热力学（下）(2021秋)

  20. 创新创业基础(2021秋)
© 柠檬大学-慕课导航 课程版权归原始院校所有，
本网站仅通过互联网进行慕课课程索引，不提供在线课程学习和视频，请同学们点击报名到课程提供网站进行学习。