信息设计中的“父子关系” [www.aliued.com]

标签: 信息设计 父子 关系 | 发表时间:2012-07-28 23:26 | 作者:
出处:http://pipes.yahoo.com/pipes/pipe.info?_id=3f2fc00d12ca7b0d916d4a6358c93b0a

交互设计工作核心在于信息架构和交互细节设计。信息架构包括信息分类以及信息展示逻辑设计;交互细节则多表现为控件的选择,交互效果的定义等。在信息设计中,遇到最棘手的问题就是信息量太多而显得设计结果不尽人意,那么在砍不掉需求的前提下(信息太多,也许是需求本身还有被精简的可能性),如何解决这类问题呢?

通常来说,信息设计的时候有很对可遵循的关系在,信息间互斥,信息间相辅相成,信息间属于包含与被包含关系等。那么今天要探讨的是”父子关系”。所谓”父子关系”也就是核心信息与辅助信息(同类信息),重点信息与次要信息(非同类信息)在界面设计上的对比关系。

一、 “父子关系”在设计中的意义

如果你不能做到让一个页面不言而喻,那么至少应该让它自我解释,这是由Krug先生在《Don’t make me think》中提及的观点。而“父子”关系的体现,则是向用户解释哪些是需要被关注的,哪些是当前最重要的,以保证主路径的畅通无阻(即便是广告,如果是定制化的也是有积极意义的)。

二、如何在设计中找到“父子关系”

设计师首先需要判断需要设计的信息间关系。而判断依据可以是业务逻辑,可以是用户操作逻辑。

比如一个成功反馈页面。如果业务逻辑到此为止结束,没有下一步动作,那么反馈信息显得比较重要;如果业务逻辑中这个成功反馈只是逻辑中的一个环节,那么下一步动作的引导则强于反馈信息。

三、 如何在设计中体现“父子关系”

第一步:信息分类

将所有的信息按照某种逻辑(card sorting)归类。归类前将所有信息设置为相同字号,字体,颜色。

分类的设计方法:

线:设计辅助线,实线,虚线等

面:背景底色,背景框

留白:通过信息间空白区域来分割

比如邮箱验证成功页面,按照业务不同,将信息划分为三种:

原有页面

第二步:信息在页面的排列顺序

不同信息在页面排列的顺序是特定的,这个顺序可能一种规范,比如该页面成功反馈肯定出现在页面顶部,引导排后。那么将之前分类好的信息以类为单位,按照这个顺序陈列在页面上。

第三步:信息在页面的优先级

虽然信息在页面上陈列的顺序是某种规范,但是信息的优先级却不受这种规范的限制。在明确优先级之后,我们需要通过设计,将优先级体现出来。

优先级设计方法:层

所谓层的概念,类似ps的图层。就是让优先级最高的信息第一时间吸引用户眼球,并给用户一种距离更近的感觉。通常处理方式有加阴影,加底色等。

比如在邮箱验证成功页面,引导用户完善个人信息优先级最高,那么采用加底色加阴影的方式突出:

第四步:大框架设计完了之后,设计类单位下信息的优先级

对于类单位下信息的设计方法同上面方法一样。

比如会员信息完善引导中信息的设计:页面信息分为3类:标题,action,解释语言。action应该紧随标题存在,

解释语言围绕action附近。注意信息间留白处理。

第五步:交互细节调整

在以上设计步骤完成之后,页面信息基本已经ok。那么交互细节的调整着重从视觉是帮助用户定位信息。

设计方法:区别对待字体,字号,颜色以及样式。

在邮箱验证成功页面,成功提示正文颜色#666666,12px(网站规范);引导文字中链接色#0066cc,标字14px bold等

第六步:做减法

这一步必不可少,刚开始都是采用各种效果已达到页面设计的最好的效果,但是最后的时候要从整体角度出去去看这个页面,将一些过重过多的设计元素去除

最终设计效果:

页面信息层级明显,“父子”关系尤为突出。

四、“父子关系”在平常设计中的应用

    A. Apple.com

苹果官方网站首页的信息设计中,包括重点与次要,核心与辅助的关系。

    B. Amazon.com

亚马逊默认首页的局部设计中,也存在比较明显的运营息与常规,重点与次要,核心与辅助的关系

Ps:常规信息本身可能是最重要的,比如导航,但是在网站成熟之后用户对导航的认知度很高,反而不再需要视觉强化,而运营信息本身的周期性决定它在某段时间需要被强化。

    C. Gap.com

潮牌gap官网女装页面,以人物着装大图为主要推广方式,在信息设计上,运营与常规,核心与辅助信息关系非常明了。

有设计方法的指导固然可以保证页面的规范性和规整性,但是在具体对应的项目中,采用哪一种设计方法需要设计师有深入的思考和分析,同时,在完成项目之后对设计review并能总结经验,以取得更大进步。

相关 [信息设计 父子 关系] 推荐:

信息设计中的“父子关系” [www.aliued.com]

- - ChinaUEDCollection
交互设计工作核心在于信息架构和交互细节设计. 信息架构包括信息分类以及信息展示逻辑设计;交互细节则多表现为控件的选择,交互效果的定义等. 在信息设计中,遇到最棘手的问题就是信息量太多而显得设计结果不尽人意,那么在砍不掉需求的前提下(信息太多,也许是需求本身还有被精简的可能性),如何解决这类问题呢. 通常来说,信息设计的时候有很对可遵循的关系在,信息间互斥,信息间相辅相成,信息间属于包含与被包含关系等.

有关系,没关系?

- jinn - 左岸读书_blog
我们常说「有关系就没关系,没关系就有关系. 这话一点都没错,而且何止中国人. 不信你看看,连好莱坞都有多少演员,是圈里人的孩子. 原因很简单:第一,近水楼台先得月;第二,你有孩子,我也有,今天我照顾你的,明天你照顾我的,这关系可以利益交换. 政军商界就更甭说了,除了提拔自家人,将来可以利益交换,而且出自同一个圈子,比较安全无虞,用自己人总比用外面来的安全.

芬兰语笑话:父子与母女

- Ice - 译言-每日精品译文推荐
男孩突然问父亲:“老爹啊,女人的咪咪都有哪几款啊. 父亲一惊,略加思索之后答道:“嗯,儿啊,女人的咪咪有三个阶段. 二十来岁的时候,像西瓜,光滑而坚挺;三四十岁的时候呢,像梨子,感觉更好,但是呢有些下垂;五十岁以后呢,像洋葱. 女儿问妈妈:“老妈啊,男人的弟弟有哪几款啊. 老妈答道:“哦,亲,男人的弟弟有三个阶段.

互动与关系

- 韩叙 - 坏脾气的小肥
两周前夜观产品,看了美丽说与蘑菇街,短暂观察的结论是美丽说展示强而互动弱,蘑菇街反之. 此外,用人妖号注册美丽说之后,很快有一个人来加我好友,而这时的我无头像,无昵称,无发言,典型的三无人士. 再看加我的这个人,她的好友95%都是三无人士,猜测为运营人员,帮助新人融入社区. 由此引申开来,2.0风格的内容产品有两颗脆弱的蛋蛋,第一是增强互动,第二是发展关系.

关系是王道

- 品味视界 - FT中文网_英国《金融时报》(Financial Times)
马克西米利安•约翰逊为英国《金融时报》撰稿. 在研究了所有我可能攻读的学位后,我决定去读MBA. 有一次在北京旅行时,我发现清华大学提供清华-麻省理工(MIT)国际MBA课程,英文授课. 如今,我已在北京为英国金属和矿产交易公司英国五金资源(Wogen Resources)工作了两年. 毕业后,我去过很多地方,从山东到新疆,从广东到内蒙古,参与过很多谈判.

Linux进程关系

- - 博客园_首页
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明. Linux的进程相互之间有一定的关系. 比如说,在 Linux进程基础中,我们看到,每个进程都有父进程,而所有的进程以init进程为根,形成一个树状结构. 我们在这里讲解进程组和会话,以便以更加丰富的方式了管理进程.

乔布斯父子心结至死未解

- sec314 - cnBeta.COM
科技传人物乔布斯过世,根据最新报导,他高龄八十岁的生父蒋达利(Abdulfattah John Jandali)面对这个从未谋面的儿子,以及白发人送黑发人的悲哀,蒋达利只对媒体淡淡表示:“我不知道该说什么.

父子页面之间跨域通信的方法

- - TID-财付通设计中心
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案. 之前也有小网同学分享过一篇“ 跨域,不再纠结” 开始照着尝试时还是有些不够明白的地方,深入了解之后,这里给大家补充一点更具体的做法. 先来看看哪些情况下才存在跨域的问题:.

vue父子组件通信高级用法

- - SegmentFault 最新的文章
vue项目的一大亮点就是组件化. 使用组件可以极大地提高项目中代码的复用率,减少代码量. 但是使用组件最大的难点就是父子组件之间的通信. . . // 参数就是子组件传递出来的数据.