[ 2010-08-28 08:25 by Mr.FIG | 分类:
产品设计,
学习 | 访问:25 views |
查看评论
发表评论 ]
一、网页的Grid(栅格、网格)的定义
就是用规则的格阵来指导和规范网页中的版面布局以及信息分布。
二、Grid系统设计页面具有以下优势
- 能大大提高网页的规范性。在Grid系统下,页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说,能节约不少成本。
- 基于Grid 进行设计,可以让整个网站各个页面的布局保持一致。这能增加页面的相似度,提升用户体验。
- 对于设计师们来说,灵活地运用Grid系统,能做出很多优秀和独特的设计,应用“黄金分割”原理确定版块宽高比例。
之前做网页,总再想“这一栏要多宽才好看呢?加一两个像素看看~ 哎呀~ 还是减一两个看看吧……”很耽误时间,没有个定数完全凭感觉。现在好了,有了Grid指导,就可以为所有栏目的宽度做一个约束,这下定宽有数了(优势1),这样页面整体看起来端庄一些(优势2)。

Loading ...
[ 2010-08-23 09:20 by Mr.FIG | 分类:
交互设计,
学习 | 访问:30 views | 1条评论 |
查看评论
发表评论 ]
转自:http://isd.tencent.com/?p=2075
3. 信息树应尽量窄而浅,且保持平衡(信息结构的宽度和深度)
信息树可以看成是对信息集合中的信息按照某种方式加以组织以后所形成的有序的信息载体,。在描述信息树时,信息的组织关系通常被描绘为一个树形的结构。对于信息架构而言,组织信息所要达到的目标有两个:一个是信息的有序;另一个是形成信息树。
而信息树的设计在网站上的体现主要是导航的设计,首先我们来看看信息树的宽度和深度的关系:
· 较大的宽度,使得信息树变浅,可以将信息明确显示在界面上,用户可以减少点击次数,但容易使一级导航承载的信息过多,用户不容易发现重点及内在组织关系;
· 较大的深度,使得信息树变窄,界面显得有重点、组织关系清晰,但由于用户不能通过一级导航获得所有组织关系,点击和寻找的难度加大。
因此,信息树的宽度和深度是相互制约的关系的,如何让信息树在这两者关系中保持平衡,并尽量使信息结构窄而浅,是信息架构中的基本原则之一。
接下来我们来看亚马逊(amazon.com)导航的变迁史(资料及图片整理来自LukeW’s Functioning Form):
在1998年,亚马逊网站只有两个一级大类:书籍和音乐。即使增加了一些分类,比如音像和礼物,水平的 Tab 式导航也能够扩展的非常平滑,并且通过颜色的不同,很容易区分产品。


Loading ...
[ 2010-08-23 08:58 by Mr.FIG | 分类:
交互设计,
学习 | 访问:35 views | 1条评论 |
查看评论
发表评论 ]
转自:http://isd.tencent.com/?p=1769
本文不准备重复讨论Web信息构架过程中的细节(比如,搜索框应当放什么地方),这些细节很多文章都讨论过了。我们把重点放在与网站信息构架的相关核心原则和方法上。适当的使用这些原则可以简化从互联网认知信息的过程,且使呈现的信息更容易被获取。
为了能顺利理解并恰当运用这些原则,我们首先要理解什么是信息构架,信息架构的目标、核心理念、组件和构架的一般过程是什么。
了解信息构架
什么是信息构架?
Information Architecture(简称IA)是美国建筑师沃尔曼(RichaId SaMl wMMan)先生在1975年创造出的一个新词语。
IA的基本定义:
IA是组织信息和设计信息环境、信息空间和信息体系结构,以满足需求者的信息需求,实现该目标的一门艺术和科学,他包括调查、分析、设计和实施过程,涉及组织、标识、导航和搜索系统的设计。
为什么需要信息构架:
由于互联网上的信息种类繁多、内容特征多种多样的多媒体信息,信息存储分散无序,加之超链接技术的广泛使用,互联网具有非常复杂的信息空间,用户在其中很容易迷惑和迷失方向。因此,互联网网尤其需要信息构架成为信息序化和优化的思想和工具,以帮助人们在异质的信息空间中管理和获取信息。
信息构架的目标:
1) 获得和理解信息内容。 将信息组织好。
2) 优化信息结构。
3) 面向用户传达信息内容。
4) 提供一个清晰的易于信息获得的界面。
核心理念:
信息架构的核心理念是以用户为中心。信息构建是信息用户、信息内容与信息组织三者的交集,信息生态在其中起着很重要的作用,而用户、内容和组织构成了信息构建的三个生态环。

The Three Circles of Information Architecture by Peter Morville
信息构架组件:
信息架构的核心组件包含:组织系统、标签系统、导航系统、搜索系统四个方面。
信息架构的一般过程:
概念设计→组织信息内容→生成信息结构→设计信息界面→提供信息导航→信息展示和信息发布。

Loading ...
[ 2010-08-18 09:14 by Mr.FIG | 分类:
产品设计,
思考 | 访问:138 views | 1条评论 |
查看评论
发表评论 ]
在上一篇日志“银泰网B2C开业推广活动分析(一)”中,主要从交互设计和信息架构的角度去分析了这个活动页面,也稍微提了一下这个活动的产品(抽奖功能)设计,今天从产品设计的角度来具体分析下这个产品和背后的数据。
产品的流程图:


整个抽奖的流程分为8步,为了不让用户觉得很难完成,所以在第二步进行了过度;
- 完成第二步,即可“获赠银泰网10元代金券,可做现金使用。”
- 完成第七步,用户离参加抽奖的机会就很近了,接下要做的就是去获得更多的徽章,因为抽奖的资格是和徽章的数量挂钩的。

Loading ...
[ 2010-08-13 08:42 by Mr.FIG | 分类:
交互设计,
学习 | 访问:62 views | 1条评论 |
查看评论
发表评论 ]
转自“阿里巴巴中文站UED” http://china.aliued.com/?p=2328

·引言
一直以来,交互设计师都是一个受到广泛质疑的岗位,很多人不了解交互设计师的价值,更直接的说,我们大多数的交互设计师没有表现出足够的、令人信服的专业度。
大约五年前选择了这个职业,一路走来,质疑过、探讨过,也争辩过。和很多交互设计师一样,我也有过盲目自信和茫然失措,历经时间的鞭挞后,渐渐的我对这份工作、这个专业,有了一些个人的感悟……

Loading ...
[ 2010-08-10 11:26 by Mr.FIG | 分类:
产品运营,
思考 | 访问:172 views | 7条评论 |
查看评论
发表评论 ]
下面是银泰B2C开业倒计时的活动页面,网址:http://news.yintai.com/exchange/index


Loading ...
Tags:
[ 2010-08-10 02:17 by Mr.FIG | 分类:
产品设计,
学习 | 访问:78 views | 3条评论 |
查看评论
发表评论 ]
转自: http://www.ikent.me/blog/3042#ixzz0wAIbsyY5
本文想说的事情是,那个叫PRD文档的家伙只是个称呼而已,PRD的问题不在于如何写而在于如何被传递与执行。这里简单介绍一下我基于axure rp的一种新的PRD写法。(友情提醒:从来不用axure,认为他笨重无比的人请路过。)

Loading ...