页面线框图教程.doc

网页设计页面线框图教程转自页面线框图教程（之一）：从本质到表象2确定页面逻辑架构2低保真还是高保真4规范图例与交付物5基本框架模板6本章小结7页面线框图教程（之二）：画地为牢的框架设计8分析屏幕的复杂度8从纵栏入手进行内容分块10横导航还是纵导航14左边还是右边16向内容分块填充元素17本章小结18页面线框图教程（之三）：模板的活字印刷术18确定模板数量19最简模板20模板之间不是简单的外观区别21Logo22登录注册22逐个设计模板22本章小结25页面线框图教程（之四）：再谈网站导航系统25为导航建立场景映射25压扁！压扁！再压扁26突破一条主导航的局限28线框图中的导航应该细化到何种程度30本章小结30面线框图教程（之五）：玩转内容形式主义31区分“可交互”的部分32无处不在的栅格系统33优势一：通过栅格控制屏幕资源34优势二：轻松实现整站图片尺寸规划34优势三：形成线框图的块级复用35图还是文？36块级内容变形记39本章小结44页面线框图教程（之六）：用交互实现屏幕复用45稀奇古怪“层”的概念45覆盖与切换45不要吝惜用户的点击47新内容的屏幕定位48本章小结50页面线框图教程（之七）：不需要存在的原型50以前不存在51纸绘草图51线框图原型的本质51原型的窘境52说不清的为什么52从来都不敏捷的中间件52折腾人的原型测试52原型最终将向内容回归52页面线框图教程（之一）：从本质到表象返回首页页面线框图教程（之一）：从本质到表象 2009/9/13 页面线框图（Wire frame）是网站设计方案中的重要组成部分，无论是I-Board 、Page-Layout、UI-Draft这些不同的称呼，它们的本质都是一样的，网站策划师、网络产品经理的最后交付文档，通常的呈现设计是最直观有效的。单纯从设计的角度，线框图也可以看作一个视觉呈现过程，虽然如此，也不能把线框图的设计当作简单的视觉问题。如何看待线框图，如何着手设计线框图，如何把握线框图的详细程度，如何让其他合作者看懂线框图，就是本系列文章要解决的问题。线框图的本质是信息架构的表象。根据需要，页面线框图可能是一个独立页面或一整套页面序列：当针对中小型项目时，可能只需要首页以及关键页面的设计；针对复杂项目和大规模的团队协作，则需要一系列相互关联的线框图，并且包含交互设计部分。在网页线框图教程的第一篇文章中，主要帮助读者了解线框图之前的必要步骤： 确定页面逻辑架构 低保真还是高保真 规范图例与交付物 基本框架模板确定页面逻辑架构在最近流行的一篇国外译文画好线框图的20个步骤中有一句话“线框图是计划中的第一步也是最重要的一步”，这是大错特错的。线框图肯定不是计划中的第一步，在没有确定页面中“到底有什么”之前，根本无从下手去设计；确定线框图的蓝图不是靠设计者拍脑门，而是基于对内容分析之后的信息架构设计，请各位读者参考从概念设计到信息架构一文。线框图并非计划中的必需步骤，更谈不上什么重要步骤。当与优秀的界面设计师、视觉设计师配合一些中小项目的时候，根本不需要什么线框图，而作为网站策划师和产品经理只需要提供页面逻辑框架就可以了。所谓页面逻辑框架，是在整个网站信息架构确立的基础上，具体描述某个页面：都包含什么元素；这些元素的权重；页面的大概形式。页面逻辑框架可以用逻辑表和逻辑图两种形式交付，可以单独采用一种形式，也可以同时提交两者。例：PageList02Article_ListT1的页面逻辑表 类型包含权重Logo图片 模板T1导航 链接组合 模板T1面包屑 链接组合 模板T1列表标题 文字 重要 文章列表 序列 文章名称、作者、发布时间 明显 页码及翻页 链接组合 上一页 下一页 当前页 明显 搜索 表单 模板T1广告 图片 模板T1例：PageList02Article_ListT1的页面逻辑图 确定各个页面的逻辑结构是进行页面线框图的设计前提，也是界面设计、视觉设计呈现的基础；非常推荐在着手设计线框图之前建立一个项目的页面列表，记录整个项目需要多少张线框图的支持，每张线框图的标号和使用模板的情况，如果时间充裕，甚至可以给每张线框图一个简洁的描述。项目的页面列表 页面名称文件名字代号模板简介模板01Template_01T1无 这是一个通用的左右两栏模板 首页 IndexPage01T2首页使用T2模板，纵列三栏布局 文章列表 Article_listList02T1某栏目的文章全集，使用T1模板 这个项目的页面列表对衡量整个设计的工作量、把控进度和工作重点非常有帮助。低保真还是高保真线框图的细节要逼真到何种程度，要根据执行团队的实际情况来决定。一般来说，线框图的细节越逼真，执行越流畅，但是给界面设计和视觉设计的发挥空间越小；相反，线框图越是粗略，对团队配合的要求越高，界面设计和视觉设计发挥的空间越大。低保真原型（线框图）通常包括：页面的基本布局，元素的大概位置，交互的基本形式，表单项。在低保真原型的基础上，高保真原型（线框图）通常包括；精确到像素的页面布局，辅助设计元素的数量和位置，图片格式尺寸，屏幕划分，超级链接的标示，带时间轴的FLASH关键帧，每个交互步骤的界面变化，表单项说明，具体文案。对于三两个人配合的微型项目（比如中小企业网站）使用低保真原型配合口头沟通就可以解决实际的问题；对于复杂一些的项目，更推荐以低保真和高保真模型混搭的模式开展工作。无论线框图的细节要逼真到何种程度，一定要在线框图开始设计之前明确，并且在项目的页面列表中标注每一个页面的逼真程度；明确交付物的细化程度，对保障工作进度和团队配合是非常重要的。规范图例与交付物一个团队的效率来自每一位成员的专业技能和敬业精神，而每一个人力量的集合需要通过工作流程和规范体现。在你的工作中是否存在这样的情况：交付的线框图与最后的执行结果出入悬殊，根本不是你的设计初衷，造成不对等原因是 “执行部门看不懂你的设计”。此时，就需要流程和规范出场摆平问题了。工作流程是对项目执行上下级关系的一种描述，即上级交付给下级何种结果时，下级可以开始自己的工作；当交付结果不符合要求时，下级变为上级，要求前一环节进行返工。规范并不是某一个部门强制规定的（虽然的确可能存在这样的情况），而是工作流程的上下级默认的一种约定；非常建议把工作流程中上下级的约定整理成手册，提供给所有的执行部门；如果整个执行团队规模在20人以下，没有必要单独设立Workflow这样的职位，但是确定质量监督人员是非常重要的。一些常用的WireFrame图例 无论手绘、纸面模型、Visio、Dream Weaver、Axure、PowerPoint甚至Word都可能成为线框图设计工具，使用何种工具进行设计并不重要，然而这些文档能否被其他执行部门理解，是另外一回事；各个执行环节的默认约定成为线框图的图例，是保证所有的设计被理解、被合理执行的前提。基本框架模板感谢模板给设计带来的便捷！站在用户的角度，需要在大致相同的浏览环境中学习网站的使用；站在界面设计的角度，应用模板能够大大缩减设计与实现的时间；站在程序开发的角度，复用结构能够提升整体的开发进度和系统效率；最后站在线框图设计者自己的角度，合理的使用模板能够缩减相当的工作量全都受益，何乐不为。在编写项目的页面列表的过程中，已经逐渐确立了大体的模版种类和应用范围；构建线框图的第一步就是针对那些常用的页面模板进行设计。一张页面线框图模板的实例，其中包含了可编辑部分图片点击可看全图 模版可以包含Logo&Slogan、页面导航面包屑、广告、常用功能、侧边栏和页底版权栏；每个模板都包含一些可编辑的部分。在确立了模板之后，剩下的工作无非就是根据每个页面逻辑架构的区别，设计那些可编辑的部分而已。本章小结在本章节中，确定了在开始设计线框图之前，整个项目及参与团队需要完成的工作。在了解一共有多少页面，每个页面都包含什么内容，那些内容是可以复用的这些问题之后，必须确认已经完成项目的页面列表线框图图例基本框架模版这三个文档，那么就可以开始具体的线框图设计。了解更多线框图设计中的技巧，请关注HoZiN.CoM的页面线框图教程（之二）：画地为牢的框架设计页面线框图教程（之二）：画地为牢的框架设计返回首页页面线框图教程（之二）：画地为牢的框架设计 2009/9/15 无论是设计低保真草稿还是高保真的模拟原型，线框图都是从基本的布局开始；良好的布局是顺畅视觉流程的开始，同时也奠定了最终访问效果的基调；布局是一个画地为牢的过程，什么东西放在哪里一旦基本确，界面就大体确定了；设置条条框框并不是为了限制界面设计师的发挥，而是要达到页面之间的协调和整个网站的统一；本文作为系列教程的第二篇文章，将讲述如何进行基本布局和需要注意的问题。分析屏幕的复杂度依照页面逻辑架构，页面中有多少元素，每种元素要占用多大的屏幕面积，这是一个非常复杂的问题。引入一个“标准屏幕”的概念，即常用分辨率中最小宽度和高度尺寸的乘积。在这里可能有若干种不同的声音，在宽屏显示器越来越流行的今天，网站依然要关注那些使用4:3比例显示器的人群，因此，一个相对“保守”的设计是把“800pix600pix”作为标准屏幕尺寸。当然还有一种相对“大胆”的设计是以“1024pix768pix”作为标准屏幕尺寸。常用分辨率的交集就是标准屏幕尺寸图片点击可看全图 虽然在设计低保真时只需要进行粗略的计算，但是如果有时间，还是推荐各位线框图设计人员将所有元素可能占据的屏幕空间一一列出。最简便的方法是，保存其他网站上类似元素的截图，估算它们占用的屏幕面积。所有元素占用屏幕面积的总和/标准屏幕面积= Screen值公共元素占用屏幕面积的总和/标准屏幕面积=Template Screen值简单的说：在排列的最拥挤的条件下（不考虑间距和留白），Screen值代表了网页占用几个屏幕的空间。通过简单的计算，可以得到整套线框图中那些重点页面（模板）的Screen值，并且可以轻松的计算出整个网站的Average Screen（平均值）；将重点页面中的重复出现的公共部分提出，形成一个元素集合，将它们的屏幕面积加法求和除以标准屏幕可以得到Template Screen值。（Screen值01+ Screen值02+ Screen值03+ Screen值n）/n=Average Screen（平均值）Template Screen值/ Average Screen（平均值）100%= Template Ratio 模板比例简单的说：在排列最拥挤单条件下（不考虑间距和留白），Template Ratio 模板比例代表了整个网站的页面中公共部分的百分比。已经得到了两个最重要的屏幕复杂度参数：Average Screen（平均值）与Template Ratio 模板比例。在整个布局页面的过程中，将紧紧围绕这两个参数展开工作；而针对这两个重要的指标，有如下的具体分析。Average Screen（平均值）分析Average Screen（平均值）分析 平均值区间定义描述与对策AS=2简单页面 只需要两个屏幕即可以把页面中的全部信息传达清楚，将采用最简单的方式处理，甚至是“不分栏”处理 2AS=6组合式页面 最常见的页面形式，通常使用分栏的方法进行内容区块的归并和分类，进行信息的组合 6AS10超复杂页面 必须进行减肥或拆分，删除多余的页面元素，才能进行设计 Template Ratio 模板比例分析Template Ratio 模板比例分析 比例区间分析TR25%臃肿的公共部分，让用户不断的在不同的页面中看到相同的内容，必须对模板的合理性进行重新的审视。建议隐藏那些不经常使用的公共部分，或者采用屏幕资源复用的方示压缩公共部分的比例 在研究屏幕复杂度的过程中，要紧紧围绕在前一章从本质到表象中项目的页面列表，通过对重点页面的屏幕分析，不断地改善公共部分的元素数量，同时确定使用模板种类和类型。对于那些计算，也完全不必十分精准，只需要简略的进行估计就可以了，毕竟线框图设计不是做精确的数学统计。从纵栏入手进行内容分块“使用纵栏分隔内容能够获得更灵活的页面设计”，看到这句话，那些页面架构师和前端开发人员都心领神会。众所周知，Web页面是一个在纵向无限伸展的巨大创作介质，这就是为什么鼠标要设置中间的滚轮。要是非要抬杠，Web页面也可以向横向伸展的，这样的网站的确有，但不符合用户的浏览习惯，可以完全理解为行为艺术的范畴。Web页面存在一种纵向的空间延展 对于AS2的组合式页，通常需要有一个横栏放置Logo等内容，然后将页面分隔成若干的纵栏，便于对信息进行分块梳理；纵栏通常有两栏式、三栏式、四栏式，在极其特殊的情况下可能用到五栏式，如果栏目再多，那样每个纵栏分配的屏幕资源就极其有限了；最后还可以加上给版权等元素信息用的底栏。在进行分栏的过程中，一定要给每个栏命名，这个命名可以在心里默念，而不必写在线框图上。一种典型的两栏布局，每个栏都有命名 内容分块的意义是将同类内容集合在一起，在页面中规划对应区域的好处非常明显： 对于设计者，能够在增加元素的时，明确的按图索骥 对于用户，能够形成一定的浏览习惯，知道去哪里找到自己想要的东西（页面功能） 对视觉设计，能够体现“格式塔视觉原理”中的贴近关系 内容分块通常包含这样四个大分类： 页面识别（Page_ID）：包含商标、标语、页面标题、广告词、版权信息等 导航系统（Navi）：导航条、面包屑 交互工具（Tools）：搜索、登录、功能区、友情链接等 内容（Content）：内容的正文、列表、摘要 其中的内容（Content）可以根据实际的网站内容主题进行细分。 将不同的内容分块以颜色进行区分，就可以得到一个大体的页面安排，这些颜色分区可以在线框图最终完稿之前删除，但是在此之前，一定牢记这些区块的划分；由于整体设计是可以纵向延伸的，因此今后需要添加元素的时候，只要确定这些元素从属的分类，进行填充和重新排列就可以了。用颜色区分内容分块的图例 一种两栏的组合式内容分块的页面实例 一种“极简梳形”内容分块的页面实例 横导航还是纵导航在分栏和内容分块的过程中，所有的设计人员都在面临一个问题，页面中的主导航条，应该采用横排还是纵列结构；而实际上，基于两种导航条模式甚至形成了两大页面设计流派；选择横纵两种导航模式，不是设计人员去决定的，而是需要去用一些数值衡量。相信在阅读网站导航设计杂谈一文之后，读者能够明确“导航是被逼无奈的产物”，那么，在什么时候选择横排导航？什么时候选择纵列导航呢？需要引入一个“导航最大宽度”的概念。无论在信息架构中设置了多么复杂的分类，无论你打算设计多少导航级别，将所有的导航项目无差别的横向排列，类似研究屏幕复杂度问题时的方法，计算所有导航项目以横排一列时（绝对扁平化）的最大宽度，就是Navi Max Width（导航最大宽度） 。绝对扁平化之后的导航最大宽度图片点击可看全图 Navi Max Width（导航最大宽度）/标准屏幕宽度=Navi值导航最大宽度是一个像素值约数，除以标准屏幕的宽度，可以得到一个Navi值，这个值对页面导航条设计具有非常重要的意义。当Navi值大于4的时候，亲爱的朋友，你的导航项目实在太多了，无论使用弹出效果还是其他的什么方法去缩减一级导航的长度，都无法改变臃肿的现实，要么应该选择纵列导航，要么你应该学习一下卓越网的作法，给导航一个全景的展示。卓越网首页弹出一个全景导航展示 正如所料，极力的推荐横排导航条，而在Navi值很大，又无法缩减的情况下，使用纵列导航解决访问分流问题。在横排导航条的设计中要注意如下的问题： 一级导航项目的数量尽量不要超过8个 如果一级导航项目超过8个，那么请使用多行的横排导航 多行横排导航不要再使用弹出效果 弹出的导航项目条不要超过标准屏幕高度的2/3 尽量不要让弹出的导航条遮挡主重要内容，比如Page_ID内容区块 纵列导航是一种“权宜之计”，当然很多网站都在使用它们，比如w3c.org的首页和Yahoo英文版；实际上纵列导航比横排导航更具弹性和灵活，只是在中文万维网当中，横排导航实在是太主流了，用户已经形成了某种习惯；如果页面有比较大的空间，强烈建议在设置横排导航的同时提供一个纵列导航的映射，二者并不矛盾，是可以相辅相成的。左边还是右边越来越的网页使用两栏或者两栏半的纵栏布局，特别是那些博客系统和SNS社区。通常设计者会把一些辅助导航、交互工具规划到一些“侧栏”里面，那么就出现了一个问题：“侧栏是应该设置在左边还是右边？”哈，其实把侧栏设置在那一边只是一个浏览习惯的问题；设置在那一边并不重要，重要的是整个网站的统一，让用户形成一种习惯。需要注意，把Logo放在左上角已经成为所有网站的共识；另外还要明确最基本的视觉流程原理，用户的视觉注意力总是“从左到右，从上到下”进行衰减。可以简单的把左边和右边进行一下划分，这种划分不是绝对的，但是的确存在，即：“侧栏左置的网站，更注重品牌和导航功能；侧栏右置的网站，更注重内容”。于是，很容易去理解为什么SNS网站要把它们的交互工具条设置在左边，而搜索引擎的结果页面要把辅助的搜索信息放在右边。侧栏左置的网站，更注重品牌和导航功能 侧栏右置的网站，更注重内容 这些左边和右边的区分，并不是什么科学道理，也不是硬性规定，只是很多线框图设计人员自发的遵守的某些惯例，用户也逐渐的熟悉了这些区分，所以还是需要认真考虑的。向内容分块填充元素在完成分栏和内容区块划分的基础上，已经可以把页面逻辑框架中的元素填充到线框图当中去了。推荐先以一个项目中最复杂的页面进行填充，这样能够对其他页面中的分栏不合理进行及时的调整。低保真模型是高保真模型的基础，千万不要一次把细节描绘完美，向内容分块填充元素的过程就是低保真线框图描绘的过程，具体操作如下：1. 把每一个元素建立一个单独的组件，这个组件可以很简单的用一个方块表示 2. 每个组件都要有一个独立的名字，虽然在线框图完成之后，这些个名字可以删去，但是一定要进行命名 3. 把元素按照分类先放置到内容区块中 4. 元素放置过程中以纵向 “自上而下、从左到右”的排列“从重要到普通”的权重 给页面逻辑框架中的每个元素命名将所有的元素放置到对应的区块后，一个简单的线框图已经具有了雏形，当然，即便是生成低保真原型，这也仅仅是一个开始而已。有些“丑陋”的线框图雏形图片点击可看全图 本章小结通过屏幕复杂度分析，区分了简单页面、组合式页面、复杂页面的种类；并且基于Web页面的特点，提出了纵向延伸的灵活设计概念；以纵栏分隔页面，按内容分块进行基本排列让元素填充工作有的放矢；但是这些仅仅是一个开始，目前的线框图还只搭建了基本框架，要领略线框图设计的进阶技巧，还请关注HoZiN.CoM后续文章页面线框图教程（之三）：模板的活字印刷术页面线框图教程（之三）：模板的活字印刷术返回首页页面线框图教程（之三）：模板的活字印刷术 2009/9/17 元素填充是一个快捷的过程。作为线框图设计者，那些简单项目完全可以一口气把所有的页面都进行填充；然而对于复杂的系列线框图，更推荐先对模板进行整理和细化。模板是贯穿整个项目的信息纽带，同时决定了最终效果的访问风格；理解模板的概念并不难，甚至很多原型设计工具都提供了单独的模板功能（比如Axure）；模板系统如何建立、如何灵活应用，将是本章的话题。逐张的设计线框图，可以理解为是雕版印刷术；使用模板系统进行原型设计，就是活字印刷术。模板的精髓是复用元素，而模板之间的区别描绘了内容和功能的各个层面。如果读者已经阅读过画地为牢的框架设计，特别是对项目的内容列表和内容分块有初步的认知，那么就能够更清晰的理解下文中的思路和方法。确定模板数量4个主要的内容区块中，通常意义上说：除去内容（Content）的其他三个内容区块就是模板，即那些页面中有规律变化的部分。根据项目的页面列表，采撷那些重要的页面，对它们的元素进行分类，将页面识别（Page_ID）、导航系统（Navi）、交互工具（Tools）的使用情况记录下来，形成一个页面元素复用表（以下简称复用表），具体形式举例如下。页面元素复用表 区块元素List01 产品列表页List02 资讯列表页Page01 资讯最终页Index 首页Colum02 栏目页页面识别Logo&Sloganhavehavehavehavehave导航系统导航havehavehavehavehave面包屑havehavehavehave快速入口have交互工具搜索havehavehavehavehave登录注册havehavehavehavehave对比功能havehave产品推荐havehavehave收藏have关联内容have访问历史havehavehave在上面表格中不难发现：某些元素以一贯之的在页面中存在；某些元素只在特定的页面中存在；某些元素与页面的主题关联，时隐时现。表格中的页面采样越多，这种分析就越有效，根据每个人的经验，有些页面在意识中就是相似的，它们只需要“派个代表”参加对比就可以了。确定模板数量的过程是这样的：步骤#1# 将复用表中排列相似的页面归并为使用一个模板，为这个模板命名。例如List02与Page01可以使用同一个模板T1 步骤#2# 标记已有模板的页面，排除它们，在剩下的页面中重复步骤#1#直到很难找到相似的页面 步骤#3# 对于那些特殊的页面或者没有与其相似的页面，不需要使用模板系统，通常称为“独立页面”，例如Index首页 步骤#4# 将每个模板也添加到复用表，列出每个模板的元素，按照步骤#1#将相似的模板进行合并 模板的数量应该尽量缩减，通常的网站设计，线框图模板一般需要35个就可以了；如果模板数很多，那只能证明你正在参与一个超级复杂的项目。最简模板将以一贯之存在的那些元素集合在一起，就可以生成项目的最简模板，最简模板是所有模板的根源，即“模板的模板”。内容分块中的页面识别（Page_ID）类元素，基本都是最简模板中的组成部分，导航也经常是通用的元素。最简模板很少能进行具体的应用，但是几乎所有的模板都是从最简模板衍化而来的；因此在设计最简模板布局和填充元素的过程中，要特别注意对未来的延展性，要给其他模板预留足够的屏幕空间。纵栏分隔和内容分区需要明显的体现。在复用表实例中，在所有页面都出现的“公共元素”包括Logo&Slogan、页面主视觉、导航、搜索、登录注册、底栏，于是可以得到如下的最简模板设计。从复用表推演出的最简模板实例图片点击可看全图 模板之间不是简单的外观区别模板的表象是代表了一系列访问风格外观相似的网页，而模板的本质是代表了信息架构相似的页面逻辑。表现是本质的映射，因此在模板设计当中，虽然有同样的元素，但是要依据模板的特性进行有区别的设计。模板中相同元素的区别设计，是一种界面亲和力的体现；即便相同的元素在不同的模板里也会拥有不同的权重和作用；虽然它们可能都被“放置在那里”，但是拥有迥异的外观；为了解释这个问题，来简单研讨一下“Logo”和“登录注册”在不同模板中的表现。Logo品牌标识在不同的页面往往具有不同的权重。一般的说，在首页中品牌标识具有比较大的视觉意义；而在一些内容页面中，品牌标志仅仅作为一种站内的识别；因此在不同的模板中，Logo可能采用不同的形式进行体现。突出品牌图形的Logo通常放置在首页或重要的分流页面 简化的Logo通常在内容阅读页面提醒用户识别目前的网站 登录注册一旦用户进行了注册，并且了解登录之后的内容优势，那么他们往往会选择自动记住登录状态或者主动去寻找它们；为首次进入的用户提供明显的登录注册提示非常重要；而对于经常访问的用户，只需要给登录一个“方便的”位置就可以了；尽量把页面中最重要的位置留给最重要的内容，而不是登录注册这样的常用功能。标准的登录框非常抢眼，通常放置在分流页面简单高效的登录条占用屏幕资源较少，一般设置的内页的固定位置 逐个设计模板如果生成最简模板的过程是对页面架构中的重复项目进行减法操作；那么逐个设计模板的过程就是在最简模板基础上进行加法操作。加法的过程，就是依据复用表中的分析结果，将模板元素中的元素进行填充的设计；推荐由最简模板向那些复杂的模板逐渐的过渡；设计过程中，要给下一个模板留下设计的余地和弹性；加法保持了模板的一致性，给用户带来了访问便捷。从最简模板到复杂模板逐步加法的过程模拟加法中，元素的排列顺序不是固定的，新加入的元素可能排列在已有元素之前；因为这些新加入也许是“只在特定的页面中存在”的元素；例如在List01产品列表页应用的模板中加入“产品对比”这个功能元素时，就需要将其放在页面重要的位置，而其他的元素可能需要相对后置。本章小结使用复用表对比查看公共元素的情况，将它们分为三个类型：常驻、特定、偶然；根据典型页面采样的重复程度不断的进行模板归并，最终确定模板的数量；从最简模板开始，使用加法原则完善整个模板系统；形成的整合项目的表现同一和访问一致。在建立模板系统之后，按照项目的页面列表进行模板之外的具体页面设计，就能够轻松的完成一套低保真线框图。低保真模型已经可以对项目最终形态进行表达了，对低保真模型进行不断的修改确认之后，可以逐渐的生成高保真线框图；虽然高保真原型不是必须的，但是却是非常有效的。在本系列教程后面的文章中，将带领大家进入具体的页面元素设计领域，请关注HoZiN.CoM后续文章页面线框图教程（之四）：再谈网站导航系统页面线框图教程（之四）：再谈网站导航系统返回首页页面线框图教程（之四）：再谈网站导航系统 2009/9/22 在确立低保真原型线框图之后，一般的根据需要进行高保真设计；在网站导航设计杂谈中，已经明确了导航系统的设计并非网站设计的第一要务，然而整个网站的设计的核心任务却只有一件事：引导用户快速的访问到自己需要的内容；导航系统是完成这种用户引导的重要工具之一，因此无论是否需要生成高保真模型，针对导航系统的详细描摹都显得非常的迫切，几乎成为了设计线框图的必须步骤。导航通常作为线框图模板的一部分，即多个页面具有相同的导航条，这些导航条组成了网站复杂的导航系统；在众多以用户为中心的设计方法中，很多设计师喜欢使用卡片分类进行导航设计；在敏捷的开发模式下，不可能获取大量的用户调查采样，而少量的调查结果又缺乏可信度；如何快速合理的设计导航系统，是本文要讨论的中心话题。为导航建立场景映射毋庸置疑，网络世界是现实世界的映射；用户在现实世界中形成的习惯和用例，这就好比戴手表的人都会下意识的抬起手腕看时间，也许这个时候手表恰巧不在手腕上，但是他们还会抬起手腕来看一下；在没有时间去仔细研究用户的情况下，需要解决“导航中应当包括哪些项目”的问题；为用户建立一个简单的网络映射，就能够轻松建立导航中的项目，让他们感觉熟悉，用起来方便。聪明的设计人员总是善于观察生活的，实际上，当策划一个与手机有关的网站时，只要亲身的体验一下手机的卖场就好咯：促销海报、产品陈列柜、导购人员、售后服务人员只要把这些现实元素的服务功能映射到网站中就能构架一个最基本的导航系统了。电子商务网站的购物车并不是网络时代最伟大的发明，设计人员参考了超级市场的一些灵巧设计，将人们现实世界购物的过程进行了良好的映射；一些传统的行业，经过千百年的积累形成了固有的良好模式，这些人与人、人与物之间的交互，只需要简单的思考就能够应用到万维网上去。如果读者正在设计一个特殊的网站，而又很难找到对应的场景进行调查研究，那么可以参考一个通用的现实场所图书馆；信息架构学的鼻祖就是图书馆管理学，书籍是网络出现之前，人们获取信息的最主要手段。图书被整齐的按照分类摆放在书架上；图书馆会为每一本书一个独特的编号；图书馆允许那些持有会员卡的用户借阅图书；图书馆管理员会如实的记录图书的借阅情况；很多图书馆会按照用户的年龄和专业提供有区别的服务；用户通常会去一份藏书单上寻找自己喜欢的书目和简介；如果某一本图书全部被借光，那么读者只能等到其他人归还才有可能阅读到只要去缜密思考，这一切都可以映射到网站的设计中来，特别是导航的设计。网站除了简单的信息服务，可能还包含信息推送和主动提醒等业务，此时，可以设想这家图书馆带有“邮局”的功能，即可以让用户索取信息又能够提供信件转发和包裹快递服务。场景映射虽然不能建立“完美”的导航系统，但是可以快速有效的建立一套“合理”的用户分流手段；当“合理”比“完美”更迫切时候，大胆的尝试场景映射去设计导航中的项目吧。压扁！压扁！再压扁导航的偏平化，是一个刚性的需求，甚至可以是“不择手段”的；避免将内容埋藏的太深，缩短浏览路径，有效帮助用户快速找到目标内容；如何将导航合理的压扁，如何对导航项目进行合理的安排呢？合并缩减导航项目 如果按照先架构后设计导航的原则，几乎是很难出现雷同导航项目的；在实际的设计中，被压扁的导航远远超出了屏幕的宽度，这就必须先给导航项目减肥。不要吝惜合并那些具有相似度的项目，为了整体的和谐，牺牲局部利益在所难免。 合并项目，导航减肥图片点击可看全图 打破从属逻辑关系 在进行卡片分类等研究过程中，往往会建立一种极其严谨的从属关系；简而言之，卡片分类是让逻辑清晰，但是可能导致层级过深；一个直白明了的导航可能会打破逻辑关系，采用自然语言能够理解的结构。 用自然语言打破严格的从属逻辑 多级展开式导航 即便压缩了Navi Max Width（导航最大宽度），还是无法把冗长导航项目装载入有限的屏幕宽度当中，这时就要进行导航分级了；导航可以有很多级，但在线框图设计当中，主导航应该尽量保持在2级（当然只有1级更好）；当屏幕资源足够时，尽量使用类似网站地图的展开式导航。 复用屏幕空间资源 使用弹出菜单和无刷新的Tab选项卡切换是目前网站上经常使用的屏幕复用方法；明确这种复用是不得已而为之，并非最佳的导航设计方法；更有甚者，网站使用Flash制作弹出式导航效果，造成了可访问性中的一大堆难题。突破一条主导航的局限导航系统是信息架构的表象，这并不表示导航设计是信息架构设计的全部。很多设计人员总是把导航设计作为线框图的第一步，这是错误的；只有在明确网站信息架构的本质之后，才有可能进行导航系统的设计；更推荐先确立页面逻辑架构，然后再考虑导航系统；甚至在完成全部低保真线框图之后，再对导航系统进行设计。同一样事物，从不同的角度去理解，总会有迥异的脉络和结构；这就好比天上的云彩，有的人会觉得某块云彩形状似骏马，而同样一块云彩，其他人会觉得形状更像棉花糖。因此，网站的导航系统可以有若干条导航，相互交织组成用户分流系统。使用多条导航是网站扁平化的一种变形，能够有效的缩减Navi Max Width（导航最大宽度），增加同一内容的入口路径；某个页面中可能只有其中的一条导航；两条导航可以并存，同时发挥作用，存在内容交集。例如设计一个赛车场的网站，通常可以有两个思路：一、从赛车场的角度解析网站架构；二、从各种赛事的角度规划内容。赛车场是一个非常独特的例子，某时某地，只能进行某项赛事的某种比赛，而不可能存在并行的情况；这种空间和时间上不存在交集的例子恰恰是那些可以使用多条导航产生交集的情况。赛车场网站拥有两个导航条，分别是以场地为核心的Navi#01和以赛事为核心的Navi#02，它们的导航项目如下表：赛车场网站的导航项目 场地导航Navi#01赛事导航Navi#02场地介绍AboutF1方程式 比赛时间表ScheduleA1方程式 赛场服务ServiceD1漂移大赛 商店Shop摩托车大奖赛Motor GP车迷俱乐部Fan Zone超级跑车锦标赛FIA GP联系信息Contact赛车场网站的多导航结构设计实例两条导航是相互交融，互为交叉的关系；在具体的页面应用中，两条导航可能出现相互包容的关系；两条导航项目数的乘积形成了一个庞大的排列组合矩阵，支撑着整个网站的用户分流工作；两股绳子紧密地缠绕在一起，成为维系用户和内容之间的纽带。在页面级的应用中，两条导航可能存在交集，呈现相互引用包含的状态必须明确：由于屏幕的宽度所限而把一条导航写成两排的情况不属于多条导航的范畴。线框图中的导航应该细化到何种程度很希望有专业的交互设计师负责具体的界面交互，然而线框图设计人员普遍的独立工作，往往需要一个人包揽所有的工作；无论是否有交互设计师支持，都推荐线框图设计人员亲自动手完成页面中的导航部分；导航的交互形式已经基本固化了，且距离信息架构层面更近；真的不应该劳烦交互设计师去设计导航的交互。除了要标注导航中的项目，它们的排列顺序，基本的交互效果，还应当将具体的超级链接形式和页面去向标注清楚。列出导航项目，明确排列顺序和超级链接的指向对于弹出菜单式的多级导航，有两种区分形式，即“父级项目链接”和“父级项目非链接”；很多设计师往往忽略了二者的区别，在线框图交付之后的执行中，出现了“缺少页面”的现象。父级导航项目是否需要有超级链接？如果有专门属于父级项目的页面，当然有需要加入链接；如果没有专属页面，可以把父级项目链接到第一个子项目（Son#01）中去，即便有用户真的去点击父级项目，也会有相应的页面作为目标。父级项目的链接情况本章小结导航不是网站最重要的设计环节，然而在设计线框图中是需要特别关注的；作为信息架构和现实世界的映射，可以通过模拟的方法快速建立合理的导航系统；在尽量压扁导航系统的前提下，可以通过合并项目、打破从属关系等方法缩减导航最大宽度；特殊的网站系统中，可以存在多条主导航共存的局面；无论是否有交互设计师的支持，线框图设计人员都应该将导航的细节呈现出来。导航系统的描绘是从低保真原型向高保真原型过渡的第一步；在信息作为主体的页面当中，如何设计应用模板后的可编辑部分，才是线框图设计的重点，请关注HoZiN.CoM后续文章页面线框图教程（之五）：玩转内容形式主义面线框图教程（之五）：玩转内容形式主义返回首页页面线框图教程（之五）：玩转内容形式主义 2009/10/11 低保真原型已经确定了页面的基本结构，至此，作为产品规划和网站策划的工作已经完结了；但是往往在实际的团队配合中需要更精细的“蓝图”作为可执行的指南，此时，高保真原型更具有实践价值。所谓“高保真”即尽量的将页面细节进行规范和展现，模拟最终页面效果和用户交互，是页面逻辑结构向最终形式的一种延展；同一内容结构具有表现多样性的特征，即从一个低保真原型可以衍射出若干高保真原型；进行页面高保真线框图设计，就是玩转内容的形式主义。网站三要素：内容、功能、表现，它们与高保真原型的关系网站的本质就是形式主义，内容、功能、表现这三个网站的要素，低保真原型解决了基础内容层面的问题，而高保真线框图规划了网站的功能和表现；内容是网站最基本最重要的核心，因此高保真原型必须建立在低保真原型的基础上，直接进行页面的细节规划是一种本末倒置的错误行为。区分“可交互”的部分讨论内容的形式主义，并非要简单的区分哪些是图片，哪些是文字，哪些是Flash动画而是要将那些用户可交互的内容进行延展和变换；在这里谈及的交互就是人与机器的互动，对于万维网而言，最常见的就是鼠标响应和键盘响应。使用颜色对不同的页面元素类型进行标注是十分有效的方法，比如： 绿色代表超级链接 橙色代表表单项目 紫色代表Js效果 使用颜色对页面“可交互”部分进行区分区分有链接的文本和无链接文本是非常重要的工作，在低保真原型中你可能完全可以不理会它们，然而对于高保真线框图则必须区分哪些文本是可以点击的，哪些纯浏览文本；对于标题级的文本，应该使用较大字体，同时赋予一个浅色的背景进行标识；那些没有链接的文字段落，可以使用首行缩进的多条灰色背景代表它们（真正的页面中可以没有缩进）；如果时间充裕，更推荐以真实的文字去填充页面中的段落部分。区分标题、有链接文本、文字段落对交互形式进行区分，可以看作对线框图图例的一种补充；这种增补可能根据不同网站的需要有所社区，甚至提供一些非常独特的图例，比如在规划一个房地产SNS社区的过程中，甚至可以增加Icon图例，这样做的好处不仅仅是给其他设计实现人员以提示和方便，并且使得高保真原型具有“可读性”，更趋近于最后的页面结果。某房地产SNS网站线框图中的Icon图例无处不在的栅格系统栅格系统已经在网页设计中被普遍的采纳，网络中已经有诸多的介绍性文章，更可以参考960.gs的相关代码进行具体的应用；不要以为栅格系统只对视觉设计师有帮助，在高保真线框图的设计中同样可以获得非常大的帮助；类似Visio和Axure这样的原型设计软件都提供了强大的辅助线和网格对齐支持，能够让你轻松的实现线框图中的栅格。在高保真线框图中建立栅格系统带有栅格系统的高保真原型是最接近真实页面的设计（甚至可以认为选择合理的栅格系统是建立高保真线框图的第一步骤）， 具有以下三个优势：优势一：通过栅格控制屏幕资源内容形式主义的核心就是对屏幕资源进行规划，建立栅格系统能够对页面的整体和局部尺寸进行有效的把握，提高原型的真实度和适应性。例如，在以60像素为基准的栅格系统中，可以实现适应标准屏幕尺寸（800px600px）的兼容，整个网站的页面风格提供强大的伸缩。能够适应800*600标准屏幕分辨率的线框图栅格优势二：轻松实现整站图片尺寸规划将那些具有内容意义的图片（非装饰图）放手给没有经验的视觉设计师，往往会带来灾难性的后果，这也是很多看起来很美的设计与实际效果相差悬殊的主要原因；既然已经决定进行高保真原型设计，就肯定要对视觉设计层面的工作进行干预；内容图片是伴随内容经常更换的，本身更贴近交互设计的范畴，在某些时候，视觉设计应该合理让路。基于栅格系统的基准宽度，通常需要规划23个常用的宽高比例，并且按照页面的需要进行尺寸的规划；这一系列的图片尺寸应该在高保真线框图开始之前，栅格系统确立之后，就准备妥当，用来做内容填充时使用。包含两个固定比例和一个可伸缩比例的整站图片尺寸规划图片点击可看全图优势三：形成线框图的块级复用网页设计的灵活源自规划中的块级复用。通常可以把某几个相关的内容元素形成一个 “内容块”，在页面的制作过程中，这些块可能是一个div、ol、ul、dl级的标记语言；由于Web页面是一种纵向的延展，因此在线框图的高保真设计中主要是依据栅格系统对块级内容的宽度进行规划；在常用宽度确定之后，就可以轻松的实现“乾坤大挪移”，缩减设计工作量，提高团队的设计执行效率（视觉设计师们也很欢迎这种规划）。按照栅格系统建立的可以灵活组合的“积木式”内容块图还是文？使用图片还是文字作为内容形式，就应该引用一个时下流行的词汇纠结曾经有人断言万维网进入了读图时代，在“眼球经济”的影响下，网站渴望每个内容元素都得到用户的充分关注，越来越多的Web界面使用图片作为内容传达形式，这也带来了访问速度缓慢和搜索引擎优化的难度；什么时候使用图片，如何进行图文搭配，是高保真线框图的一个重要环节。使用图片的优劣势分析 优势：直观，吸引关注 劣势：增加文件量，需要特别的搜索优化，占用屏幕资源比较大 使用文字的优劣势分析 优势：占用屏幕资源少，导入速度快，可读性强 劣势：乏味，不易区分 合理的内容形式设计，根据不同的需要和屏幕资源，灵活的使用图文搭配进行信息有效传达。静态图片（小）内容示意，通常搭配文本出现 静态图片（大）页面主视觉、需要突出细节的视觉内容 动态图片（多媒体）广告、特别需要注意的环节，不宜过多 链接文字独立成句的内容单元、关键词 描述性文字在点击之前，必须向用户进行解释的大段文字 标题重要关键字，重要主题 使用图文搭配进行内容形式化，从某某意义上说决定了内容元素和分块占用的屏幕资源，从一个侧面反映了它们之间的强弱关系；在完善且合理的页面逻辑架构基础上，根据页面元素之间的权重进行高保真线框图设计，是一件非常轻松的事情。同一个页面元素的6种形式块级内容变形记块级内容由元素级内容组成。在解决了元素级的内容形式化之后，按照栅格系统对块级内容进行多样化的整合，就能够使页面线框图像搭积木那样简单了；相同的块级元素在不同的页面当中往往占有不同的权重，这就意味着占有屏幕资源的变化（影响这种变化的因素主要是宽度），因此在整合网站中需要给同一个块级元素赋予不同的形式。以最常见的“同主题链接列表”这个内容块为例，解决在不同屏幕资源分配下的变形问题；所谓“同主题链接列表”可能是一系列的文章，也可能是围绕某个主题的一系列关键字，总之是相互关联的同级内容节点；这些兄弟节点从属的某个主题，在页面中以标题的形式体现。简单式 图形列表 单列展开式 两列混搭式 两列文本式 最简图文式 上面的6种延展形式，仅仅是从一个内容块出发进行的衍化；要形成高度的块级复用，就必须对每一个内容区块进行类似的延展；正如很多重复性劳动一样，只要设计人员通过一个案例积累出常用的块级内容形式，就不必为每一个项目都如此的操劳了。在高保真线框图的设计层面，其实就是对这些形式进行合理的运用而已。为了适应同一内容块的不同形式，设计开发人员往往会在内容发布环节也进行了相应的改进，比如人工的或自动截取不同长度的标题和链接文字。本章小结高保真线框图的设计，仅仅围绕那些“可交互”的内容展开，为了达到块级内容形式复用和敏捷的开发，首先从元素级内容的图文搭配入手，逐步达到块级内容的高效灵活，符合网页的栅格系统设计，追求最佳的逻辑权重表现效果。虽然在玩转内容形式主义之后，线框图在设计上已经基本完善，但是Web设计毕竟与传统的平面设计有着本质的区别信息在网页上是可以跨越时间和空间进行显示的；在没有专业交互设计师配合的情况下，线框图设计人员通常要承担按时间轴和操作响应进行内容变化的规划工作，这是锦上添花的过程，请关注HoZiN.CoM后续文章页面线框图教程（之六）：用交互实现屏幕复用页面线框图教程（之六）：用交互实现屏幕复用返回首页页面线框图教程（之六）：用交互实现屏幕复用 2009/10/25 屏幕是万维网的创作介质，引入一个时下很流行的概念，屏幕也是所有“数字多媒体”的展示介质，这是与传统的纸面印刷最大的区别；屏幕带来了用户交互、时间与空间差异，这也是毕昇发明活字印刷术时始料未及的；创建网页的本质是内容信息架构的呈现过程，如果玩转内容形式主义是雪中送炭，那么用交互实现屏幕复用就是锦上添花。当网站策划人员、产品经理也不得不暂时替代交互设计师的工作（这是大量存在的），就必须要掌握最基本的屏幕复用原则。稀奇古怪“层”的概念很多架构师包括某些网页设计的教材，都提出了“层”的概念，即在内容之上覆盖其他内容；在Html语言中的确存在标记，它是一个私有的标记，从未得到过W3C的承认；把简单的理解为“层”也是不正确的，任何页面元素都可以通过设置覆盖其他的元素。“层”具有太多广泛的意义，可以片面的理解为“图层”或者“内容层”；讨论“层”的意义在于：如果真的没办理解屏幕复用，那么可以简单理解为“网页分层规划”。时间轴给屏幕增加了新的维度，也使得不同“层”的切换成为了可能；网页的时间轴并不如电影播放那样呈线性，而是根据用户操作有选择的变换，于是产生了“状态”。片面的理解交互的本质，可以把所有的内容架构于一个页面，通过“无刷新”技术实现所有的屏幕切换。“层”这个概念在“无刷新”与“Flash” 中被广泛称呼，以至于提到“交互”必想到“弹出一个层”；内容覆盖是屏幕复用的重要形式之一，但这不代表设计者可以滥用“非标准”技术，加大浏览器的负担可能带来灾难性的后果。覆盖与切换在抛弃了“层”的概念之后，言归正传。屏幕复用最常见的两种形式是覆盖与切换：覆盖就是在某个“状态”下，出现新内容覆盖原始内容的情况；切换就是在某个“状态下”，新内容替换原始内容的情况。“从属内容使用覆盖，平行内容使用切换”是屏幕服用的最基本原则。新内容依赖原始内容存在，即产生了从属关系；新内容不依赖原始内容而孤立存在，即可视为平行关系。依据内容关系使用屏幕切换方式并不是绝对的，通常完整的页面设计方案中，根据内容逻辑结构就已经确定了那些可以复用的内容。在一定丛属关系上建立的“内容覆盖”使用“内容覆盖”的注意事项： 新内容不应该占用过大的屏幕面积 切忌将重要内容覆盖，比如Logo或者主导航条 一定要提供新内容的撤销方法在平行关系上建立的“内容切换”使用“内容切换”的注意事项： 切换内容之间应该占用同等屏幕面积，避免破坏网页整体结构 使用Tab选项卡等形式明确当前内容状态 在新内容中谨慎使用滚动和分页不要吝惜用户的点击没有任何先兆的情况下，逼迫用户关注内容变化是非常不明智的，比如某些门户网站的“背投广告”、“漂浮广告”。以用户为中心的屏幕复用必须是以操作触发为前提的