设计页面结构原型
网站其实是一种特殊的信息组织系统,其特殊在于,信息架构需要人机对话做中转。
早在全球首个网站问世的前二十年,信息架构的概念就已经提了出来。所以,在网站产品设计中所提到的信息架构,只是设计执行理念,而“网站架构”则是此理念支持的技术落实方法。
在实现角度,网站架构由信息的生产、组织、呈现三部分组成。国内前几年的网站普遍不易用、不友好,因为当时的网站架构全部由写程序的工程师设计,也就是说,只完成了系统需求的信息“生产”,而没有考虑针对用户需求的信息“组织、呈现”。
根据用户需求,分解出用户对网站的信息获取点,可以得到一组关系:
- 功能与功能,能够做什么?
- 页面与页面,有几条路线可以到达?
- 模块与模块,入口在哪里?
分为三个级别,对于网站来说,我觉得最直接和用户体验相关的,是能够呈现出来的物理结构,也就是系统模块和更具体的数据呈现的页面结构原型,几点个人经验:
- 根据功能和页面的重要性排任务顺序,才能实现最高的性价比。
- 适当考虑信息获取流,以便能更好的和交互设计衔接上,但不需要深入。
- 先做减法,灵活性和可扩展性同时重要。
- 考虑用户阅读习惯,视线轨迹跟踪是评估信息可用性的重要理论依据。
- 细节越早定往后越顺畅,细到每条数据、每个字符。
关于页面结构原型怎么做,我比较习惯用Web页面来落实,原因有四:
- 制作简单迅速,前提是写页面和画图同样熟练。
- 容易修改,批量改代码肯定比批量改图形快。
- 分离结构更直观,使用IE Developer Toolbar配合相当完美。
- 方便过渡到交互原型,可以直接做链接。
设计中的过程产物,呈现方式和格式都不重要,速度第一,以同事能理解为原则。由此看来,设计师可发挥的余地很大,但是团队协作,如果这些细节没有事先约定,配合起来会有麻烦。
6月 17th, 2007 at 8:51
很喜欢你的文字,慢慢研读,慢慢吸收。
6月 17th, 2007 at 23:41
这篇文章很实用,观察很细腻,说到点子上了。
6月 25th, 2007 at 9:21
不错~从结构上入手~感觉对网站的了解又进了一步~
6月 28th, 2007 at 9:30
[…] 有些吹毛求屁了,哦原来是设计网站.. 不错~从结构上入手~感觉对网站的.. 看来这服务器效果的确不错!前段时.. […]
7月 13th, 2007 at 11:09
网站结构很重要,从用户体验,SEO,效率
11月 20th, 2007 at 10:24
网站与软件一样,信息结构同样重要。
11月 24th, 2007 at 17:57
[…] 我的理解,传统软件原型设计使用Visio线框图比较好,而互联网产品则使用Html线框图更划算。出于归档考虑,纸质、手绘或者拍成的照片,只适合做为可讨论草稿。 […]
2月 13th, 2008 at 11:10
我觉得用HTML设计页面结构,比较适用于带有交互效果的站点,如社区之类.
visio更适用于以信息呈现为主的资讯类网站,这类网站需要更谨慎的内容排列及设计要求.或者简单说,visio更适于视觉化的产品.
2月 13th, 2008 at 15:18
初学者,很高兴看到这些文字,受益良多.
是否能够以一个实例进行详细讲述,以便象我们这样的初学者可以尽快入门.谢谢.
10月 28th, 2008 at 15:37
学习ing
12月 25th, 2008 at 15:18
学习了.
4月 18th, 2010 at 16:06
[…] 设计页面结构原型 http://ucdchina.com/blog/?p=92 […]
6月 18th, 2010 at 14:25
[…] 设 计页面结构原型124页 […]
5月 25th, 2011 at 10:55
[…] 设计页面结构原型 – 团队博客 – 以用户为中心的设计 […]
9月 28th, 2011 at 23:49
[…] 设计页面结构原型 – 团队博客 – 以用户为中心的设计 […]
10月 27th, 2011 at 13:36
[…] 设计页面结构原型 http://ucdchina.com/blog/?p=92 […]