信息呈现是一门层叠的艺术：交互设计表达好从属关系

尹广磊 · 发表于 2012-4-16 22:36:59

最近注意到一个现象：

人认识事物是一个由外到内的过程，是一个包含递进的关系。
而一个屏幕的信息呈现，本源上是一个由上到下、由左到右的线性传递关系。

而我突然认识到，也许正是因为这两者的不同，
所以才产生了在人机交互上，进行交互设计的必要性。

试想一下，如果我们不是要使用一个产品，
而仅仅是想读完一本小说或看完一个电视剧，
那所有信息就按着线性的方式铺开就好了，
这正好也是信息呈现最本源的方式。

然而，更多的时候我们不只是这样被动的接受信息，
而是要更灵活的操作一个应用程序或浏览一个网站。
这样就遇到了两个问题：

一个是用户需要了解认识这个应用程序或网站，
那认识事物就需要像我们前面提到的，最好是一个由外到内的包含递进关系。

二是用户可能即兴的要做各种不同的任务，并不是每次的任务过程都一样，
比如打开邮箱，有的时候是收邮件，有的时候是写邮件，有的时候是添加新联系人。
这就不能像看书或看电视剧一样，永远都是从头看起，
所以，线性信息的呈现方式也无法满足这一要求。

正是因为这两个问题，
人机交互设计才需要将一个本源上是线性呈现方式的载体，
加工成具有包含递进关系形式或感觉的东西，
从而更符合人的认识和操作需要。

如果是这样，那就需要将本来是平铺线性的东西，让它变得层叠立体起来。
结构上需要将相对独立的东西，放在不同的页面里，然后根据主次通过一个全局导航串联起来。
表现上需要不同区块放在一个页面时通过阴影或收缩与前进颜色的运用，表现出这种从属关系。

比如下面这样，就通过了色彩灰度的变化和图形很清晰的表达了它们内容间的从属关系。
让你觉得它们叠放在一起是有一个立体先后、前景与后景关系的。
这才是一个信息呈现，让用户认识了解更自然舒服的方式。

我把以上这些思考和认识，归结为“洋葱理论”，
意思指人是需要像剥洋葱一样一层层的来认识事物。

屏幕快照 2012-04-16 下午10.49.33.jpg

关于色彩可以参考《网页配色》这本书提到的一些
主要色彩、次要色彩、强调色彩、搭配色彩、背景色彩等。

关于让一个页面连贯的流转起来，可以参考：
交互过程三要素：响应、过渡效果、移位

尹广磊 · 发表于 2012-4-16 23:06:15

吴煜 · 发表于 2012-4-17 11:22:26

多谢分享，学习了！

付姣牧凉 · 发表于 2012-4-24 16:24:10

谢谢分享！图都不错！

闫峰 · 发表于 2012-4-25 16:06:38

尹老师，你的发型很有爱。我只关注到了这个

猪也会咬人 · 发表于 2012-4-26 11:41:20

学习了

艾英 · 发表于 2012-4-29 12:28:02

。。。。。。。。。。。。

122579171 · 发表于 2012-5-25 16:05:00

很好，页面不错

122579171 · 发表于 2012-5-25 16:05:07

很好，页面不错

122579171 · 发表于 2012-5-25 16:05:08

很好，页面不错

122579171 · 发表于 2012-5-25 16:05:09

很好，页面不错

Ψ寒Ж/qq · 发表于 2012-5-25 23:41:35

美工水平太差，经常做出来的东西达不到自己想要的效果，头痛啊

seo · 发表于 2012-6-15 21:49:01

图片不错，我的美工也很差·····

jin2008321 · 发表于 2012-6-22 14:25:54

非常珍贵的分享，收藏了。

ImDennis · 发表于 2012-6-26 18:21:51

有启发！！！！！！！！产品经理的终极任务就是清晰的展现信息的层次。

小佳佳子 · 发表于 2012-7-3 16:07:55

不错，顶楼主！

卡萨布兰卡 · 发表于 2012-9-19 15:55:27

真的是学习了谢谢楼主不辞辛劳的分享

张筱凡 · 发表于 2013-4-24 19:48:47

我看学习过，留下一个印记

Gloria · 发表于 2013-6-12 00:39:53

谢谢楼主耐心分享

EnjoyJane · 发表于 2013-8-5 11:30:27

学习了，果断收藏

[交互文章] 信息呈现是一门层叠的艺术：交互设计表达好从属关系

评分

更多我认为在表达页面区块从属关系上不错的UI案例