PS设计教程网欢迎你!

WEB交互设计中的页面表达常用方式(2)

文章来源于 腾讯 UED,感谢作者 秩名 给我们带来经精彩的文章!
设计教程/前端设计/前端设计2010-05-13
五、内容逻辑:并列关系、从属关系 人们往往喜欢有条理的视觉信息,逻辑清晰、层次分明、严谨的内容才能有助于便捷快速地阅读。这里主要介绍并列关系和从属关系。 并列关系:并列关系就是把同等重要的信息依次罗列

五、内容逻辑:并列关系、从属关系

人们往往喜欢有条理的视觉信息,逻辑清晰、层次分明、严谨的内容才能有助于便捷快速地阅读。这里主要介绍“并列关系”和“从属关系”。

并列关系:并列关系就是把同等重要的信息依次罗列,彼此没有层级关系。逻辑上相关的部分在视觉表达上也相关。例如,把相近的内容分成一组,放在同一个标题至下,采用类似的方式显示信息,并把它们全部放在一个定义明确的区域以内。

在表现的形式上,常常用到的方法有:内容缩进、位置或留白、线框或分组(线条、方框、颜色条)。

内容缩进:

WEB交互设计中的页面表达常用方式

位置或留白:

WEB交互设计中的页面表达常用方式

线框或分组:(线条、方框、颜色条等等):

WEB交互设计中的页面表达常用方式

从属关系:从属关系表示A信息全部包含在B信息之内,或者表示A信息依附于B信息。就好比如标题和正文的关系,所以A信息是B信息的一个子集。如下图中,“空间热点”就包含“日志精选”,她们之间就是从属关系。而“日志精选”里又包含6条文章名称,它们之间也是一种从属关系,这就是我们所说的正文和标题的关系。

WEB交互设计中的页面表达常用方式

在这里,B信息里面也可以是好几条并列关系的内容组构成。如:

WEB交互设计中的页面表达常用方式

六、多项并列的信息

多项并列的信息,由于视觉的连续性,混在一起容易产生混淆。我们可以用一些小技巧将其区分。比如,在并列的信息内容前面加上小图标,或者区分排序:

WEB交互设计中的页面表达常用方式

七、不同的排序方式VS筛选

这里需要先说明两个名词的含义。“排序方式”——指的是将文件中的各个信息按数值(如参与人数、点击数等)、或者某种特性(如热度)的递升或递降次序重新排列成为一个新的记录序列。而“筛选”是指一个以多个信息中按预定目标就某种特定性质进行精选的操作过程。它们都有“进一步”的关系,但是排序不会有数量的变化;而“筛选”因为是进一步针对特定条件精确挑选所剩,有可能导致数量的减少。如:

排序:

WEB交互设计中的页面表达常用方式

筛选:

WEB交互设计中的页面表达常用方式

版权所有PS设计教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa