<p>首先，强烈推荐读者猛击《网站后台用户体验一个容易被遗忘的策划》一文。</p>
<p>同样都是Web页面，为什么要<span class="so-called">人为的区分</span>为“前台”和“后台”呢？有个缘由在其中：那些需要受到特殊安全保护的表单和网站控制中枢，在某些情况下<span class="so-called">必须集中的设计和部署</span>。管理员、内容编辑人员、权限用户……这些内容创造者是一群特殊的用户，需要关照；在“<span class="so-called">用户创造内容</span>”的大趋势下，“前台”和“后台”的概念越来越模糊，可以肯定的是类似SNS这样的软件也会有所谓“后台”；是否硬性的区分“前后台”并不在本文的讨论范畴，只针对“<span class="so-called">后台用户</span>”这一特殊群体提供一些<span class="so-called">可行的体验优化原则</span>。</p>
<p>线框图原型是网站核心策略“<span class="so-called">着陆</span>”的重要步骤。将机巧的想法转化为实际产品是一个<span class="so-called">复杂过程</span>，这种复杂并不仅仅体现在技术层面，而更突出的表现在团队配合中；倘若三两个人的迷你团队，只需要很少的文档就能够达成协作一致；页面原型作为<span class="so-called">从创意到执行的中间文档</span>，贯穿整个团队的工作，对于大型项目和团队协作的确有些效果。作为线框图系列教程的完结篇，本文将对页面原型的<span class="so-called">前世今生</span>进行讨论，探寻<span class="so-called">抛弃原型</span>的敏捷之路。</p>
<p>屏幕是万维网的创作介质，引入一个时下很流行的概念，屏幕也是所有“<span class="so-called">数字多媒体</span>”的展示介质，这是与传统的纸面印刷最大的区别；屏幕带来了用户交互、时间与空间差异，这也是毕昇发明活字印刷术时始料未及的；创建网页的本质是内容信息架构的呈现过程，如果玩转内容形式主义是<span class="so-called">雪中送炭</span>，那么用交互实现屏幕复用就是<span class="so-called">锦上添花</span>。当网站策划人员、产品经理也不得不暂时替代交互设计师的工作（这是大量存在的），就必须要掌握最基本的屏幕复用原则。</p>
<p>低保真原型已经确定了页面的基本结构，至此，作为产品规划和网站策划的工作已经完结了；但是往往在实际的团队配合中需要更精细的“<span class="so-called">蓝图</span>”作为可执行的指南，此时，高保真原型更具有实践价值。所谓“<span class="so-called">高保真</span>”即尽量的<span class="so-called">将页面细节进行规范和展现</span>，模拟最终页面效果和用户交互，是页面逻辑结构向最终形式的一种延展；同一内容结构具有<span class="so-called">表现多样性</span>的特征，即<span class="so-called">从一个低保真原型可以衍射出若干高保真原型</span>；进行页面高保真线框图设计，就是玩转内容的形式主义。</p>
<p>元素填充是一个快捷的过程。作为线框图设计者，那些简单项目完全可以一口气把所有的页面都进行填充；然而对于复杂的系列线框图，更推荐先对模板进行整理和细化。<span class="so-called">模板是贯穿整个项目的信息纽带</span>，同时<span class="so-called">决定了最终效果的访问风格</span>；理解模板的概念并不难，甚至很多原型设计工具都提供了单独的模板功能（比如Axure）；模板系统如何建立、如何灵活应用，将是本章的话题。</p>
<p>无论是设计低保真草稿还是高保真的模拟原型，线框图都是从<span class="so-called">基本的布局</span>开始；良好的布局是顺畅视觉流程的开始，同时也奠定了最终访问效果的基调；<span class="so-called">布局是一个画地为牢</span>的过程，什么东西放在哪里一旦基本确，界面就大体确定了；设置条条框框并不是为了限制界面设计师的发挥，而是要达到页面之间的协调和整个网站的统一；本文作为系列教程的第二篇文章，将讲述如何进行基本布局和需要注意的问题。</p>
<p>页面线框图（Wire frame）是网站设计方案中的重要组成部分，无论是<span class="so-called">I-Board</span> 、<span class="so-called">Page-Layout</span>、<span class="so-called">UI-Draft</span>这些不同的称呼，它们的本质都是一样的，网站策划师、网络产品经理的最后交付文档，通常的呈现设计是<span class="so-called">最直观有效的</span>。单纯从设计的角度，线框图也可以看作一个视觉呈现过程，虽然如此，也不能把线框图的设计当作<span class="so-called">简单的视觉问题</span>。如何看待线框图，如何着手设计线框图，如何把握线框图的详细程度，如何让其他合作者看懂线框图，就是本系列文章要解决的问题。</p>
<p>根据某权威机构的调查，早在2006年11月时，全球网站数量就突破<span class="so-called">1亿</span>大关了；每一个网站背后都至少有一位设计人员，那么全世界有多少网站设计师呢？这已经很难估算了，当然<span class="so-called">纯粹靠设计网站吃饭</span>的，毕竟是少数。今天要对比的中外网站设计差异，不是网站的风格流派，也不是设计工具和视觉技法，更不是技术环节，而是“网站设计”这项工作的差异，包含<span class="so-called">目标、流程、交付结果</span>等。</p>
<p>每时每刻，世界上有无数人访问着无数的网站，有无数的网站被建设或关闭。进入网站策划这个领域的第一步，就是要理解“<span class="so-called">我们要作什么，我们的思考围绕具有什么样的特质</span>”。</p>
<h2>网站的本质</h2>
<p>所有运行在万维网上的站点千奇百态、形式迥异、功能各样，从其组织原则和运作原理，我们可以窥探网站的本质：<span class="so-called">离散信息的集合</span>、<span class="so-called">屏幕的超级链接</span>、<span class="so-called">一种营销手段而不是目的</span>。</p><!--more-->
<h3 class="txred">离散信息的集合</h3>
<p>所谓离散信息，指的是<span class="so-called">网站上的独立信息单元</span>。页面上的每个元素，包括文字段落、图片、动画、按钮表单等，都可以是具有一个独立URL（统一资源定位）的<span class="so-called">信息单元</span>，可以相互割离的进行单独的访问。这些信息单元以超级链接或点击响应的方式组织在一起，这种组织方式就是“<span class="so-called">超文本</span>”，而整个万维网也就是运行在超文本协议之上。</p>
<div class="framedashe"><dl><dt>[定义]什么是“信息”和“信息单元”</dt>
<dd>在外部世界中，能够被感官识别感知的，具有确定意义的抽象概念，就是信息。一个手势可以是信息，一段文字可以是信息，一张图片可以是信息；而手势、文字、图片等具象概念，就是信息载体。信息可能是一系列抽象意义的集合，如果将这个集合进行离散化，那些代表离散信息的载体，叫做信息单元，简称“信元”。信息也可能不需要离散化，那他本身的载体就是一个信息单元。</dd></dl>
<p>
<span class="imagealt">页面中的三个信息单元分别代表了三个不同的离散信息</span></p>
| 信息单元 | 类型 | 信息 |
|---|---|---|
| 图片 | 图像 | 一杯咖啡 |
| 标题 | 文本 | 轻松时刻 |
| 段落 | 文本 | 轻松时刻的描述 |
</div>
<h3 class="txred">屏幕的超级链接</h3>
<p>在用户的眼中，信息单元在万维网上通常以“网页”的形式呈现，这就使用户产生了一种错觉：<span class="so-called">网站是由网页组成，而且不仅有一个网页</span>。其实在<span class="so-called">用户意识当中的“网页”就是“屏幕”</span>，也就是网页的用户可视区域，伴随“屏幕”切换，也就带领用户在不同的“页面”进行浏览。网站能够承载海量的信息，就是<span class="so-called">依靠超级链接在不同的“屏幕”之间切换</span>。</p>
<div class="framedashe"><dl><dt>[实例]单页面魔术</dt>
<dd><p>举一个极端的例子，无论什么样的网站，都可以只拥有一个页面！是的，我们用锚点（注）来进行“屏幕”的切换。设置锚点的方法很简单，只需要给HTML标记一个id就可以了，比如</p>
<p><span class="txred"><strong id=”secondpot”>这里是第二屏</strong></span></p>
<p>现在我们已经定义好了一个名字叫secondpot的锚点，我们只要在页面的其他地方设置访问锚点的链接指向secondpot锚点，就完成了锚点跳转。</p>
<p><span class="txred"><a href=http://www.hozin.com/index.html#secondpot title="这是一个锚点">跳转到第二屏</a>
HoZiN </span> </p>
<p><img src="/../usr/uploads/2015/09/1441126145.jpg" alt="使用多个锚点就能实现在同一页面实现N个“屏幕”的相互转换" class="bar" /><br /><span class="imagealt">使用多个锚点就能实现在同一页面实现N个“屏幕”的相互转换</span></p></dd></dl>
</div>
<p>既然用一个页面就可以包容所有信息单元，为什么几乎所有的网站都要分为若干的页面？原因非常简单，如果一个页面的字节数巨大，那么就会载入的非常缓慢，分页载入缩短了网站开打时间，为用户带来方便。</p><p>超级链接将离散的信息单元按照拓扑结构进行组织，让屏幕之间的切换“<span class="so-called">看起来很有逻辑</span>”，而这些信息单元未必都在一个域名之上，我们可以按照自己的需求引用那些万维网上的资源，实现了最大程度上的资源共享，使信息进行了有效的组织。直白的说，<span class="so-called">网站就是利用链接结构把离散信息进行整合</span>的结果，这种整合<span class="so-called">跨越了屏幕和空间</span>。</p>
<h3 class="txred">一种营销手段而不是目的</h3>
<p>无论是盈利性质的，还是非盈利性质的，网站本身不产生价值。实际上，你很难想象在服务器上的一堆二进制代码能够促使用户进行消费，消费关注点并非在网站本身，而是网站承载的有价值信息。在全世界，每天有成千上万的专业人士为了优化网站而努力，逐渐形成了一套所谓“<span class="so-called">网络营销</span>”理论和“<span class="so-called">电子商务</span>”模式。</p>
<p>建立一个网站，<span class="so-called">其目的是让信息传播得更快、更便捷、更广泛</span>，这些信息具备公益性或者具有商业价值；人们访问网站，其目的是更快、更便捷、更精确的了解这些信息。围绕信息传播，网站提供了一个<span class="so-called">开放和可控的介质平台</span>。</p>
<p>“所有的网站都是营销手段，所有的网站都需要经营。”必须明确，网站如果无法成为营销手段，那么就没有必要经营它。在建设之前，就应该明确网站在营销的位置，提供哪些信息和在线服务，有的放矢的进行<span class="so-called">规划、建设、运营</span>。
通常意义上，网站在营销中扮演了媒介角色，网站也越来越成为销售和交易工具，在这种情况下，我们也必须明确网站只是一种手段，而传播<span class="so-called">有用的信息</span>、实现其价值才是网站<span class="so-called">存在的目的</span>。</p>
<h2>网站的三个要素</h2>
<p><span class="so-called">由信息单元、页面、超级链接组成</span>的网站，是一个复杂的整体，其复杂性根据网站类型和用途的不同而存在差异。总的来说，网站由三个主要层次组成：<span class="so-called">内容</span>、<span class="so-called">功能</span>（行为）与<span class="so-called">表现</span>。</p>
<p>网站的三个要素之间不是平行关系，内容为首、功能其次、最后是表现，形成一个递减的权重关系。网站策划就是围绕这网站的三个要素展开，从营销的角度协调三者关系，实现网站存在的价值。</p>
<h3 class="txred">内容</h3>
<p>所谓“内容”，就是信息，是一种<span class="so-called">抽象概念</span>。</p>
<p class="framedashe">[举例]《简爱》作为一本畅销小说有各种不同版本，无论英文、日文、中文、简装、精装还是电子读物，所有版本的核心内容都是：珍妮的成长故事。如果我们建立一个以《简爱》为主题的网站，核心内容依然不变。</p>
<p>每当我们匆匆打开电脑，迅速在搜索引擎上查询某个办公室坐落位置；每当我们信手闲游，冲浪在门户网站；每当我们拇指飞动回复一条手机短信；让我们回忆数字科技给生活带来的一切，除了信息还是信息，<span class="so-called">关注点</span>一直是内容。</p>
<p>内容的<span class="so-called">存在方式</span>就是信息单元，内容可以蕴含在文本、图片、动画、视频等形式当中，即内容表象是多样的；所有内容都可以用文本来描述，因为文字是一切文化形式的源泉，就好比电视剧有剧本、动画有脚本、讲话有提纲。将文本作为一种通用的信息单元，即<span class="so-called">超文本</span>。</p>
<p>网站为了内容而存在，内容传播是网络营销的主要手段；浏览内容是用户的第一诉求，当万维网越发蓬勃发展，内容的重要性就越发凸显。那些失去用户的网站往往因为内容枯竭；那些失去吸引力的网站也往往因为内容落伍。</p>
<div class="framedashe">
<dl><dt>[思考] 在进行内容策划时，必须保持如下思考</dt>
<dd>传达主题是什么？（核心内容）</dd>
<dd>每个栏目如何表述？（分支内容）</dd>
<dd>如何组织网站的文字？（上下文方式）</dd>
<dd>还能提供那些信息？（内容关联）</dd>
<dd>哪些信息是不必要的？（内容一致性）</dd></dl></div>
<p><span class="so-called">网站的差异就是内容的差异</span>，<span class="so-called">网站竞争本质是内容竞争</span>。用户选择浏览某个网站，不是因为某个网站漂亮或者有好彩头，仅仅是因为那里有用户需要的信息。</p>
<p>一个漂亮但内容空洞的网站，很难产生价值；一个漂亮但内容不更新的网站，没有人会第三次访问。</p>
<h3><span class="txred">功能</span>（行为）</h3>
<p>“功能”具有<span class="so-called">两层含义</span>，一是网站<span class="so-called">提供内容的形式</span>，二是用户<span class="so-called">获得内容的方式</span>，两层含义相结合，就是所谓“交互”。</p>
<p>内容并不是网站特有的要素，书籍、杂志等传统印刷品都可以编排内容；正是因为有了交互才使得万维网能够在屏幕上展示无限丰富的内容，交互成为万维网最具吸引力的特性。</p><p>即便最简单的访问，用户也需要与浏览器产生交互，比如输入地址、滚动页面、点击鼠标等，通过不断切换“<span class="so-called">屏幕</span>”寻找有用内容。</p>
<p>我们总是能网站功能中找到在现实生活中内容组织形式的影子，更令人振奋的是网站功能正在代替传统沟通，例如电话调研正逐步转向万维网调查。</p>
<p>在万维网产生之前，人们的阅读习惯是<span class="so-called">线性的</span>；交互式阅读给了用户全新的体验，不断跳跃超级链接的过程中缩短用户与内容的距离。用户通过操作自发寻找那些他们感兴趣的内容，促使网站功能的形成；<span class="so-called">功能赋予内容以行为</span>，让那些羊皮卷中沉睡的文字变成了随时听候调遣的精灵。</p>
<p>功能（行为）整合了内容（信息），将<span class="so-called">内容更加可控、个人化</span>，网站可以为某种特殊身份的用户提供<span class="so-called">特殊内容</span>。正是这种<span class="so-called">整合</span>，使那些非物质商品方便的在万维网上交易和传播。如果没有网站功能，那么在线交易充值卡、论文、电子优惠卷都无法实现。</p>
<p>功能不仅缩短了用户与内容之间的距离，更使得用户之间的信息交流成为可能，而“<span class="so-called">用户创造内容、用户分享内容</span>”也逐渐成为网站运营的主流。</p>
<div class="framedashe">
<dl><dt>[思考] 设置网站的功能，保持如下思考：</dt>
<dd>通过这个功能，你能给用户带来什么？（交互必要性）</dd>
<dd>用户在什么情况下会使用这个功能？（交互效率）</dd>
<dd>用户需要哪些操作？（用户成本）</dd>
<dd>如何实现这个功能？（技术成本）</dd>
<dd>所有的用户都使用这个功能么？（交互差异性）</dd>
<dd>特殊用户无法使用功能时怎么办？（交互容错性）</dd></dl>
</div>
<p>内容是吸引用户访问网站的主要原因，交互帮助用户<span class="so-called">更便捷、更自主</span>的访问内容；优秀的功能策划是<span class="so-called">催化剂</span>，帮助内容去实现网站的价值。</p>
<div class="framedashe">
<dl><dt>[知识]“功能”与“技术”的关系</dt>
<dd><p>网站“功能”依赖“技术”去实现，然而“功能规划”与“技术规划”是完全不同的概念。功能是面向“内容”与“用户”，技术是面向“系统”与“硬件”。</p><p>万维网出现的十几年间，计算机技术有了突飞猛进的发展，从运算速度和运行效率上都有了显著的提高；网站功能是一个平稳的发展过程，搜索和内容管理依然是最常见的万维网服务。</p>
<p>在实际的网站运营中，存在着重视技术而忽略功能的现象：很多网站不断采用运算速度更快的服务器、执行效率更高的开发语言，而忽略了功能的创新和开发。功能作为网站核心要素之一，应该得到足够的重视。</p>
</dd></dl></div>
<div class="framedashe">
<dl><dt>[误区]功能越强大的网站才是好网站</dt>
<dd><p>交互是为了让信息更便捷的被用户找到，这种便捷是以增加用户的操作为代价的。在实际操作中，只有那些信息量巨大的网站，通常才设置复杂的功能；功能的设置还与网站的访问量、用户兴趣差别有关。</p><p>我们经常可以看到一些小型网站设置了非常复杂的功能，而这些功能要么徒劳增加了用户操作、要么被“束之高阁”很少被使用，造成了不必要的浪费。复杂的功能还可能造成网站载入速度缓慢，影响了用户体验。</p><p>网站功能设置是一个循序渐进的过程，应该根据内容量、访问情况的变化逐渐增加交互，并及时撤销那些不经常被使用的功能。</p></dd></dl>
</div>
<h3 class="txred">表现</h3>
<p>通过视觉修饰对信息单元进行美化，让整个网站“<span class="so-called">看起来舒服</span>”，就是所谓“表现”。</p>
<p>内容与表现是可以分离的，同样的内容可以有不同的表现形式，即一个网站可以有很多套不同的“<span class="so-called">风格</span>”。关于“<span class="so-called">舒服还是漂亮</span>”的大讨论一直在万维网设计师之间延续；漂亮吸引用户，舒服留住用户，从营销角度分析：“<span class="so-called">舒服就是漂亮</span>”。</p>
<p>网站视觉修饰依据内容差异也会有不同要求：</p>