“如何快速畫易懂的紙面原型呢？”?
“沒有手繪基礎(chǔ)不會呀？”
“總害怕畫錯怎么辦？”
“有沒有什么紙面原型技巧呢？”
“想法創(chuàng)意都在腦子里，到軟件原型繪制時(shí)就忘記很多細(xì)節(jié)，好沮喪?”
...許多設(shè)計(jì)師及朋友反饋說。
那么怎樣讓“紙面原型圖”不再是沒有迷惑的閑談，而是真正有意義的快速表達(dá)創(chuàng)意想法的一個技能呢？配上我的項(xiàng)目實(shí)例、結(jié)合書中的一些要點(diǎn)提取及整理，供大家學(xué)習(xí)和探索。（關(guān)于紙面原型模版打印源文件，如有需要請留言即可^_^）
設(shè)計(jì)師在得到產(chǎn)品最初需求或若干個創(chuàng)意思路時(shí)，但他們還仍然是一些抽象的分析、概念或詞匯，想要把他們變成比較直觀的設(shè)計(jì)效果，則需要動手在速寫紙上用筆把他們畫成草圖形式。
一、紙面原型的定義
Wireframe直譯為線框圖，由線條構(gòu)成的草圖或示意圖、簡單的陰影表現(xiàn)或者上色草圖都屬于wireframe，也稱為紙面原型或原型草圖。
二、紙面原型的目的？
“探索、過濾、驗(yàn)證、問題分析、設(shè)計(jì)機(jī)會”，產(chǎn)品設(shè)計(jì)規(guī)劃為承前啟后的階段，將最初需求及創(chuàng)意一步一步變?yōu)楝F(xiàn)實(shí)。
三、為什么要選擇紙面原型？
1.具有可塑性、可多次修改重建。
2.短時(shí)間內(nèi)驗(yàn)證設(shè)計(jì)的可行性。
3.方便與項(xiàng)目團(tuán)隊(duì)及其他人員交流討論、溝通合作。
4.有筆和紙就可隨時(shí)隨地簡單快速記錄表達(dá)。
Idea是指好的設(shè)計(jì)創(chuàng)意、靈感。創(chuàng)意可大可小，經(jīng)常是嚴(yán)謹(jǐn)調(diào)研和苦想之后的拍案而起。那么，概念便是創(chuàng)意的載體。設(shè)計(jì)師的能力體現(xiàn)在想法和執(zhí)行上，當(dāng)我們有了一個好的創(chuàng)意也應(yīng)通過概念把它呈現(xiàn)出來。
對于一個需求，交互設(shè)計(jì)師應(yīng)盡量發(fā)散思維設(shè)計(jì)盡量多的方案，從主到次、從大到小將他們畫出來，并主動召集團(tuán)隊(duì)成員一同討論這些方案，盡快解決那些不確定的問題。不再是一味說著想法而是落到實(shí)實(shí)在在的概念想法圖上，雖然看起來多一步，但繪畫概念草圖畢竟比低保真原型成本低很多，又可收集來自更多角度的智慧，發(fā)現(xiàn)概念有不足便快速修改，少走很多彎路。
四、紙面原型草圖潦草但要認(rèn)真
1. 使用簡單工具
紙面原型不需要什么高級的工具和復(fù)雜的技巧，可繁可簡。可以使用最簡單的鉛筆（自動鉛筆最好）、圓珠筆、簽字筆、鋼筆、紙張（速寫本最好）（如下圖1）
2. 粗細(xì)線條、空間體積、陰影
為了增強(qiáng)原型草圖的表現(xiàn)力，我們善于變換不同的表現(xiàn)手法，使畫面更加活躍而充滿內(nèi)涵。希望表達(dá)出界面的邏輯，可以使用馬克筆、雙頭畫筆等，運(yùn)用粗細(xì)不等的線條和陰影關(guān)系，畫出界面的層次關(guān)系； 同時(shí)，還要簡單把物體、控件、圖標(biāo)的空間和體積感表現(xiàn)出來，譬如用鉛筆涂抹少量的陰影、沿著造型的右、下邊勾畫雙線，使用淡灰色馬克筆等，當(dāng)然最好可以把上述的這些技巧結(jié)合起來展示（如下圖2）
3. 交互、動態(tài)
我們要把交互和旋轉(zhuǎn)的動態(tài)表現(xiàn)出來，主要通過重疊、各種箭頭來實(shí)現(xiàn)。重疊就是表現(xiàn)物體運(yùn)動過程的重影，箭頭的使用就比較廣了，即可以表現(xiàn)物體運(yùn)動的方向（如下圖3-1），也可以表現(xiàn)不同界面間的交互關(guān)系（如下圖3-2），還可以表現(xiàn)導(dǎo)航、進(jìn)度和彈出等。希望表達(dá)出交互效果，可使用便簽紙和小卡片，他們可以當(dāng)做提示氣泡、彈出層、模態(tài)窗口等，貼在繪圖本的任何地方，也可以作為頁面標(biāo)注的工具及說明產(chǎn)品功能。
4. 聲音、振動
紙面原型的手繪表現(xiàn)力是無窮的，除了上訴這些有形和具象的事物，有時(shí)還可以根據(jù)需要，勾畫出一些無形和抽象的事物，譬如閃爍、聲音和振動（如下圖4所示）
五、紙面原型工具模板？
1. 使用人群
由于紙面原型的快速靈活性，有些創(chuàng)業(yè)公司甚至已經(jīng)拋棄了電子版的高保真原型，直接采用紙面原型作為交互設(shè)計(jì)師的最后交付物。這對于紙面原型有了更高的要求。另外，有很大一部分人不具備手繪能力而避開繪畫技能的限制也可使用這些工具便事半功倍。
2. 來源、特點(diǎn)
由Suki Kits公司生產(chǎn)的原型設(shè)計(jì)模板套裝是一個比較好的選擇（如下圖6），不同的應(yīng)用平臺有不同的產(chǎn)品套裝，包括iOS、iPhone、iPad、Android平臺各版本、Windows Phone平臺產(chǎn)品。
（1）模板由不銹鋼制成，精度很高；
（2）模板上有：各應(yīng)用平臺的狀態(tài)欄、標(biāo)簽欄、確認(rèn)按鈕等幾乎所有基本控件樣式；
（3）模板完美符合造型規(guī)范和大小規(guī)格，邊緣還帶有以像素（PX）為單位的刻度；
（4）套裝里還配有印著手機(jī)或平板電腦圖形的設(shè)計(jì)繪圖紙（如圖），規(guī)格與模板一致，便于使用者用模板直接在相應(yīng)的產(chǎn)品圖形里設(shè)計(jì)、勾畫；
優(yōu)點(diǎn)：可以準(zhǔn)確畫出應(yīng)用的真實(shí)大小、有助于進(jìn)一步的細(xì)節(jié)推敲，也確實(shí)能達(dá)到快速精確、標(biāo)準(zhǔn)的效果 ；
缺點(diǎn)：繪圖局限性大，畢竟模板的內(nèi)容是有限的，而且容易禁錮一定的概念設(shè)計(jì)、創(chuàng)意及思維想象力 ；
六、如何檢驗(yàn)、分享你的思考結(jié)果？
1. 有連貫有情節(jié)的流程圖
創(chuàng)意構(gòu)思階段完成，將進(jìn)入設(shè)計(jì)的布局和調(diào)整階段。在開始下一步細(xì)節(jié)之前，我們要把紙面原型草圖整理好、查漏補(bǔ)缺，把所有頁面按照創(chuàng)意和設(shè)計(jì)思路串在一起，使他們成為流程圖。每一項(xiàng)功能的每一個動作都不要漏掉，做到前有因、后有果、中間過程有條理。（如下圖7）
2. 利用紙面原型草圖進(jìn)行可用性測試
在原型草圖階段，就可以對應(yīng)用進(jìn)行簡單的可用性測試。體驗(yàn)大致功能、導(dǎo)航、布局結(jié)構(gòu)等，檢驗(yàn)功能、布局是否合理？控件是否規(guī)范？導(dǎo)航是否正確？把原型草圖中的每一個界面單獨(dú)拍照，之后使用照片美化應(yīng)用對照片稍加調(diào)整，譬如邊緣裁剪、調(diào)整亮度、對比度等，使圖片清晰完整。并在移動設(shè)備端的可交互原型應(yīng)用工具，譬如：Pop (iOS)?(如下圖9視頻所示)、快現(xiàn)(Android)，一張張導(dǎo)入拍照圖片，選取特定區(qū)域添加熱區(qū)、手勢操作、鏈接，就可以實(shí)現(xiàn)點(diǎn)擊界面后跳轉(zhuǎn)、切換等效果。直觀的草圖演示可以大大提升溝通效率。（如下圖8）
