功能结构和页面结构的设计

曾经有一个丝毫不懂网站设计的朋友问我:设计一个网站到底有多少活,一个普通的网站具体需要设计多少个页面?
我回答:一般情况下不会超过30个页面;事实上一切的设计工作只是为了设计好这不足30个的页面,这些几乎是整个网站的所有。

我没有骗他,事实确实可以这么说。

针对于这30个页面,我们在设计之前需要搞清楚:这些页面是给什么样人看的?他们有什么样的特征?我们需要给这些人什么样感觉的页面东西?(以上基本上是用户研究、产品和数据分析、概念设计所要解决的事情,我们前几期刚写过)。


接着我们需要开始具体的设计了……

首先,要解决:
1、针对于产品服务的角色们,整个产品需要那些功能点。
2、功能与功能之间的组织关系是什么,这就是所谓的产品结构。menutree。
3、每个功能点最终会具象化到一个页面;
4、这个页面里都应该有什么内容?(一个页面会包含进去N个功能点),这个页面主要为那个或者那些角色服务
5、这个页面的内容要如何摆放。
然后,要解决:页面和页面之间的关系是什么,如何交互,细节如何表现……

这篇文章我们只说”首先要解决”的问题,也就是一般情况下我们在”信息架构设计”阶段要做的事情。



功能结构的设计:
1、针对于产品服务的角色们,整个产品需要那些功能点
2、功能与功能之间的组织关系是什么,这就是所谓的产品结构。menutree。

通常情况下我建议设计师按照可能的产品导航的思路去设计这个menutree,功能结构的产出物最好可以直接转化为产品导航。因为这样做有利于让后面的设计工作变得更可预知,也会让产品的功能结构更加靠近用户所见到的表现层结构。
我们可能会用卡片的方式去完成这个工作,例如下图:
http://ucdchina.com/blog/attachments/0706/ia_w01.jpg
或者用word、excel,例如:
http://ucdchina.com/blog/attachments/0706/ia_w02.jpg

在这里需要注意的是:
1、产品需要那些功能点一定要从角色的角度去思考
2、可以照顾到后台的数据结构和逻辑,但不能受限于数据结构而去设计功能结构
3、用户不知道产品的底层什么样子的,他们只看到表现层。所以表现层越和底层一致对于产品的架构会越好。也就是说”功能树的结构最好等于导航菜单的结构”。
4、产品需要一定的积累期,一开始不是所有能想到的功能都要一股脑的做全、做细,但一定要想到功能升级时的延展性。
5、我们不需要做到非常细致,只需要构架好整体的框架即可。


页面结构的设计:
4、这个页面里都应该有什么内容?(一个页面会包含进去N个功能点),这个页面主要为那个或者那些角色服务
5、这个页面的内容要如何摆放。

页面的内容信息需要参照menutree的信息,每个页面如何摆放是页面结构设计的主要内容。
和经验丰富的设计师一起合作时,我们会在一块块的纸上绘制简单的原型,然后再通过反复的讨论来决定把他们摆到什么位置。
通常情况下和不是很熟练的设计师合作时,我们会用PPT或者PS去一步步的落实这些内容,先把内容都给列出来、接着考虑他们放到哪里去,然后考虑他们占多大空间,最后具体落实到主要模块的具体展现方式是什么样的。
例如下图:(直接看大图>
http://ucdchina.com/blog/attachments/0706/ia_w03.jpg

在这里需要注意的是:
1、一般情况下建议不要先设计首页再去设计二级或三级页面,从内到外的设计会更加的有的放矢。
大多时候二级页面的内容会是其所有三级页面的提炼,首页的内容会是所有二级页面内容的提炼。用户是从外到内看,到我们却应该从内到外设计..
2、尽量少或者根本不要去考虑页面之间的交互关系和怎么跳转。只需要按照功能结构去设计每个页面的结构即可。
3、除了较多页面都需要的通用模块和页面中很主要的模块,需要深入考虑具体的展示方式,但也无需认为”最后一定要按照这样的展示去做”,其他页面更是不要过多的深入到细节。





这篇文章写的相对很浅,泛泛的介绍一下我在用户体验设计的信息架构设计阶段 主要的工作内容;具体的工作原则已经思考方式等内容,欢迎陆续关注本话题其他作者的文章。

25 Responses to “功能结构和页面结构的设计”

  1. 兔子 Says:

    哈哈,抢到沙发了。自己对信息架构满感兴趣的,希望看到更多好的文章。

  2. Iceskysl Says:

    虽然自己不是信息架构,但是以前页犯了一个错误,就是我一般是先设计首页,然后在根据首页去二级页面,页觉得有点问题,看了文章才晓得,上一级是下一级的提炼~明白了~

  3. liliyun Says:

    白鸦,我突然想到你们可以把这几期内容整理后出版成书了。

  4. 不得不说 Says:

    这是一篇充满“问题"的文章。1.方法存在问题2.设计思路有问题。

    而且,有些结论太武断。比如”一般情况下不会超过30个页面“,我不知道你是根据什么结论得出来的。网站有大有小, 取决于复杂程度,怎可以用”一般情况下不会超过30个页面“就可以总结。还有其他的话,我不想一一列举,我也懒得去反驳什么,而是想对作者说,如果这是一个推崇ucd的网站,我觉得很多经不住推敲的话,最后多想两遍再说。

  5. 白鸦 Says:

    不得不说:愿闻其详

  6. wkcow Says:

    曾经参与过一个60多页的项目,由4个UI一起做的,最后发现 格式竟然不统一,吐血中;

    页面浓缩下确实不需要30个,多了绝对难以统一,这是ui的通病,一人一个风格

  7. Diesel Says:

    wkcow:前期需要定义规则及应有的概念图吧。

  8. 老冬瓜 Says:

    4楼的兄弟:

    呵呵,白鸦发的文章也不是教科书,主要是交流。

    没有没要反驳什么吧。 如果有什么需要交流的最好是把自己的观点拿出来,纯技术性的交流,我感觉比较好。

    从功能到页面我觉得工作量不小,如果只是针对页面结构,我觉得10个以内的页面就OK了。而且不能规划得太细,要把区域划分好,并详细说明每个区域我作用。比如说 菜单区 、 提示信息区 、 主要的操作区域 、 一般的按钮应该放置的区域等等。 有的区域在不冲突的情况下应该是重复使用的。

  9. happy3g blog » Blog Archive » 整理自“以用户为中心的设计”博客! Says:

    […] 功能结构和页面结构的设计 […]

  10. 三三 Says:

    认真地看了,受益匪浅哦,把我工作的内容很好的梳理了一下,还讲了我没有主要到的几点
    问题是:
    尽量少或者根本不要去考虑页面之间的交互关系和怎么跳转。只需要按照功能结构去设计每个页面的结构即可。
    功能结构里面把所有页面的内容都包含了么?考虑跳转了才不至于丢掉一些页面,页面的个数是通过什么确定下来的,我也都是先首页在下级一级级设计的,不过设计下来,再看首页,在综合修改

  11. Boolean Says:

    30个页面一说确实不太经得其Challenge……

     但是楼主的文章确实有自己的思路和看法,至少在目前方法论严重缺失的时代,给出了一个自己的方法

  12. geng Says:

    易用性高于可行性,

    经验说明一切;但经验值高低是要划分群体的;

  13. 今日读网:交互设计 :风中飞行=>来自魔力谷 Says:

    […] 功能结构和页面结构的设计 […]

  14. maomaoma Says:

    比较赞同,有内向外的设计。我们在设计导航前,已经对功能有了提取,再一步步的对它们进行分类,放置到合适的位置。

    不过,界面视觉布局设计,我认为从二级页面开始,向下设计子页会比较合适。先前的步骤已经明确了网站的结构,这时,从外向内的设计会与思维方式相一致。

    首页,内容,不能绝对的说是二级页面的提炼,首页显示内容是由网站的目标所决定的。显示的可能是某个非常细节的内容。

    不太明白为什么视觉布局的步骤,不需要考虑链接的问题。比如一个页面可能需要提供一些关联信息,这个可能就涉及到流转了。

  15. 白鸦 Says:

    14楼:  你的问题其实可以看angela在这期的新文, 我这期的文字写的很不完整,她那里算是很不错的补充了。
    其实不是一点不要考虑交互的问题,因为一点交互没有也不会产生出页面。 一般情况下很粗的任务过程就可以了,而无需做详细的任务分解..
    这是一个迭代循环的过程..

  16. jary Says:

    设计不是数量可以衡量的问题,不是卖白菜论斤两,呵呵.在实际的方法上,无论是从内到外的设计,还是从外到内的设计的方法,都不是问题.每个人都可以找到适合自己的方法和途径.

  17. 不得不说 Says:

    1.迭代的方式是设计的基本方法之一,由初到细。粗略的框架设计后,逐步细化,粗略的框架设计后,逐步细化,在这个过程中,有可能会出现信息结构的重新组织。这本身就是一个迭代的过程。

    2.功能列表不能作为页面的导航框架,card sorting是干什么?信息结构的设计不只是一个简单的功能映射过程

    3.信息的表达是一个逐步展现的过程,这是以用户的目标为中心流动的过程.

  18. blueben's blog » [转]产品设计-任务分解 Says:

    […] 在上期关于信息架构的文章里我匆匆留下”一个网站不超过30个界面”的观点,有不少人表示疑问和不解。 […]

  19. 小米渣 Says:

    我觉得很受用呀,看完文章,受益匪浅,有一些东西,可以结合自己平时的工作琢磨一下。我不是专门做产品的,但是以前也是先做首页的。

    很赞同这点:产品需要一定的积累期,一开始不是所有能想到的功能都要一股脑的做全、做细,但一定要想到功能升级时的延展性。
    mytino起初的改版,产品设计师的架构我个人很不以为然,但是现在慢慢做息优化,结合白鹤今天的文章,觉得我们的设计师很牛。

    有一点不是很明白:尽量少或者根本不要去考虑页面之间的交互关系和怎么跳转。只需要按照功能结构去设计每个页面的结构即可。
    页面与页面之间的交互性还是应该特别注意的,为什么根本不要去考虑呢。

  20. 289 Says:

  21. 199 Says:

  22. 166 Says:

  23. iceFiFi » Blog Archive » 《UCD火花集》电子书版下载 Says:

    […] 功能结构和页面结构的设计 http://ucdchina.com/blog/?p=89 […]

  24. 余博 Says:

    我半路出家做页面设计,之前老是参照别人的,现在自己设计感觉很乱

  25. 《UCD火花集》电子书版下载 « Tokgoo Says:

    […] 功能结构和页面结构的设计 http://ucdchina.com/blog/?p=89 […]

Leave a Reply

You must be logged in to post a comment.