页面线框图教程(之七):不需要存在的原型

Home » 原型/交互设计 » 页面线框图教程(之七):不需要存在的原型

<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>

<h2>以前不存在</h2>
<p>最初,万维网只是某些科学家的专利。在《画地为牢的框架设计》中,曾经提到过那种“<span class="so-called">极简梳形</span>”页面,就是最基础的一种万维网应用;<span class="so-called">如果编写一个网页就像书写Word文档那么容易,那么也就根本不需要线框图原型</span>。</p>
<p>最原始也就最本质,这是事物发展的一般规律。<span class="so-called">简单Web页面</span>虽然质朴,但的确是最接近内容本质的形式;商业给了Web大规模发展的契机,也带来了<span class="so-called">复杂网页结构</span>,从此有了导航、Banner、框架结构……为了赢得高速发展,越来越多的<span class="so-called">商业WUI</span>无差别的嫁接了平面设计的因子,其副作用是让Web<span class="so-called">逐渐离开了内容本质轨道</span>。</p>

<h2>纸绘草图</h2>
<p>曾几何时,网页设计是那些PS高手的天下(至少国内是这样);那些萌芽时期的网站策划者为了“<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>自如就好,那就是适合你的设计工具,因为思维干扰最小。</p>
<h2>线框图原型的本质</h2>
<p>“线框图的本质是什么”?这个问题就好像在问“<span class="so-called">烤白薯的本质是否为食物</span>?”一样庸人自扰。线框图的本质是图,是一种建立在“<span class="so-called">视觉为先导</span>”理念上的Web页面勾勒形式。</p>

<p>线框图产生原因是:大规模团队协作中的<span class="so-called">信息不对称</span>。试想,如果视觉设计师懂得人机交互原理,如果交互工程师熟练掌握Html语言,如果页面架构师深入理解产品策略,如果产品经理能够亲自开发数据库后台,如果程序开发人员能够规划合理的页面结构,如果内容编辑能够独立进行系统架构……当这些“如果”成为现实,<span class="so-called">世界上压根不想要线框图</span>!事实也证明,由一个人建立的个人主页往往不是从线框图开始的,因为一切尽在掌握。</p>
<h2>原型的窘境</h2>
<p>以图为本的线框图,与Web本质三要素的特征相悖,越来越显得力不从心了。</p>
<h3 class="txred">说不清的为什么</h3>
<p>产品经理、网站策划师为什么要进行线框图设计呢?理由会有很多,或者给视觉设计师一个参考,或者给程序开发人员进行系统架构提供参考,或者是给投资人描绘伟大蓝图……在这些理由中,能够始终站得住脚的是“<span class="so-called">参考</span>”二字;往往没有多少最终页面和线框图是完全相近的,因为<span class="so-called">网站始终不是一个静态产品</span>,需要不断的运营修正;于是就有了奇怪的现象,当网站的核心策略需要改变,无论功能还是交互上的改进,<span style="text-decoration:line-through">必须要从原型设计开始</span>,如果脱离了线框图,所有的部门无法工作。<span class="so-called">被原型所羁绊</span>,是所有大型Web团队面临的问题;是线框图解决了工作流程的对称,也是线框图增加了信息同步过程,真是“<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>。</p>
<h3 class="txred">折腾人的原型测试</h3>
<p>在此,并没有否定<span class="so-called">用户研究</span>的意思,但任何研究结论都应该具有“<span class="so-called">普遍适应性</span>”。面对网站的差异化要求,普适性似乎是很难达到的,于是任何网站都需要从最基础的用户采样开始,经历访谈、眼动仪、AB测试等复杂的流程,确立一个<span class="so-called">相对合理的原型</span>。这些流程并不繁琐,但可怕的是:此类“用户研究”往往<span class="so-called">CaseByCase</span>的单独进行,甚至变成网站之间的竞争资本。针对原型进行测试,有多大的实际意义,智者见智;劳累的是那些研究人员,折腾的是那些采样用户;如果不以最终页面提供给测试用户,而仅仅提供设计原型,至少是一种<span class="so-called">对用户的不尊重</span>。</p>

<h2>原型最终将向内容回归</h2>

<p>原型要摆脱“<span class="so-called">视觉指南</span>”的身份,就必须要回归到Web内容本质上来,即“语义化”原型。</p>

<p>一直以来都认为“<span class="so-called">懂得语义化Html是万维网从业者的充要条件</span>”,然而编写页面代码的终究不是国人的母语,这也使得语义化愈加困难。曾经有位计算机教授提出过“<span class="so-called">在屏幕上出现汉字本身就是一件匪夷所思的事情</span>”的论调,有些极端,但也有些道理。</p>
<p>试想,如果直接提供语义化的<span class="so-called">Html作为“原型”</span>,且所有的配合人员都深入的了解Html语义,那么可以抛弃线框图这个碍手碍脚的中间件,让<span class="so-called">“原型”本身即为最终产品</span>,事半功倍。</p>

<p>要搭建一个全都懂得<span class="so-called">语义原型</span>的团队是一件很难的事情,但也不是完全没可能,曾经有产品设计人士使用Html页面制作原型文档,效果不是非常理想,因为<span class="so-called">不是所有的配合者</span>都懂得Html语义。</p>
<p>寻找替代“<span class="so-called">线框图原型</span>”的方法是写作本套教材的基本出发点,于是有了这个的解决方案:建立一套以母语为基准的Html语义转换系统。</p>
<p class="framedashe"><商标>网站策划机构.jpg</商标>

<一级标题>网站策划师</一级标题>

<自然段>这是一个汉语Html语义转换系统,它能够帮助整个团队理解深入理解语义,搭建标准的页面原型。</自然段>
</p>
<p>
只要使用正则表达式,配合开发语言就能够把上面这段<span class="so-called">语义原型片断</span>转换为下面的Html代码:</p><p class="framedashe">
<img src=”网站策划机构.jpg”>

<h1>网站策划师</h1>

<p>这是一个汉语Html语义转换系统,它能够帮助整个团队理解深入理解语义,搭建标准的页面原型。</p></p>
<p>梦想着有一天,产品设计人员只需要用Html语义写出<span class="so-called">页面的逻辑架构</span>,交互设计师、视觉设计师、程序开发人员就能够<span class="so-called">发挥自己的专长</span>,轻松的将“原型”转化为实际的网络产品,而压根再不需要什么线框图了。</p>

标签: 网站设计, 线框图, 线框图设计, Wireframe, 原型, 网页原型, 原型测试, 纸绘原型, 原型本质, 中间件, 团队协作

添加新评论