Axure中文社区

WebPPD产品原型设计

 找回密码
 新用户注册
查看: 20672|回复: 28

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

[复制链接]

413

主题

6609

帖子

6万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
66724

实名认证

QQ
发表于 2012-4-16 22:36:59 | 显示全部楼层 |阅读模式
闪念心情日记
最近注意到一个现象:

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

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

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

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

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

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

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


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

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

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

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



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

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

评分

1

查看全部评分

413

主题

6609

帖子

6万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
66724

实名认证

QQ
 楼主| 发表于 2012-4-16 23:06:15 | 显示全部楼层

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

Chat-UI.jpg
SimpleApp.jpg
634643341955781250.jpg
P885x664-05360.png
navigation21.jpg
sfsfj.jpg
werg.jpg
634685670853437500.jpg
68209523jw1doypztswj8j.jpg
IMG_1001.jpg
IMG_0919.jpg
retina-light.jpg
封 iCloud Mail - 收件箱(1 封邮件).jpg
Fluent.jpg
634649084940156250.jpg_500.jpg
P612x792-04967.png
map-creator-premium-photoshop-actions.jpg
site-screenshot.jpg
list-of-goods.jpg
FBCW-Large.jpg
jfjfj.jpg

0

主题

184

帖子

168

积分

会员

摸索中

Rank: 5Rank: 5

积分
168

实名认证

QQ
发表于 2012-4-17 11:22:26 | 显示全部楼层
多谢分享,学习了!
谦于心,勇于行!

0

主题

22

帖子

91

积分

会员

Rank: 5Rank: 5

积分
91

实名认证

发表于 2012-4-24 16:24:10 | 显示全部楼层
谢谢分享!图都不错!

3

主题

194

帖子

898

积分

版主

桎梏人

Rank: 7Rank: 7Rank: 7

积分
898

实名认证

QQ
发表于 2012-4-25 16:06:38 | 显示全部楼层
尹老师,你的发型很有爱。我只关注到了这个
这个世界太浮躁了,我渴望宁静和单纯

0

主题

4

帖子

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2012-4-26 11:41:20 | 显示全部楼层
学习了

0

主题

25

帖子

97

积分

会员

Rank: 5Rank: 5

积分
97
发表于 2012-4-29 12:28:02 | 显示全部楼层
。。。。。。。。。。。。

0

主题

8

帖子

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2012-5-25 16:05:00 | 显示全部楼层
很好,页面不错

0

主题

8

帖子

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2012-5-25 16:05:07 | 显示全部楼层
很好,页面不错

0

主题

8

帖子

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2012-5-25 16:05:08 | 显示全部楼层
很好,页面不错

0

主题

8

帖子

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2012-5-25 16:05:09 | 显示全部楼层
很好,页面不错

0

主题

16

帖子

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2012-5-25 23:41:35 | 显示全部楼层
美工水平太差,经常做出来的东西达不到自己想要的效果,头痛啊

0

主题

2

帖子

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2012-6-15 21:49:01 | 显示全部楼层
图片不错,我的美工也很差·····

0

主题

3

帖子

62

积分

会员

Rank: 5Rank: 5

积分
62
发表于 2012-6-22 14:25:54 | 显示全部楼层
非常珍贵的分享,收藏了。

0

主题

15

帖子

12

积分

会员

Rank: 5Rank: 5

积分
12
发表于 2012-6-26 18:21:51 | 显示全部楼层
有启发!!!!!!!!产品经理的终极任务就是清晰的展现信息的层次。

0

主题

5

帖子

12

积分

会员

Rank: 5Rank: 5

积分
12
发表于 2012-7-3 16:07:55 | 显示全部楼层
不错,顶楼主!

0

主题

13

帖子

12

积分

会员

Rank: 5Rank: 5

积分
12
发表于 2012-9-19 15:55:27 | 显示全部楼层
真的是学习了 谢谢楼主不辞辛劳的分享

0

主题

4

帖子

12

积分

会员

Rank: 5Rank: 5

积分
12
发表于 2013-4-24 19:48:47 | 显示全部楼层
我看学习过,留下一个印记

0

主题

9

帖子

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2013-6-12 00:39:53 | 显示全部楼层
谢谢楼主耐心分享

0

主题

1

帖子

11

积分

会员

Rank: 5Rank: 5

积分
11
发表于 2013-8-5 11:30:27 | 显示全部楼层
学习了,果断收藏
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|Axure中文社区

GMT+8, 2019-9-19 02:15

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表