“如何快速畫易懂的紙面原型呢毅糟？”?
“沒有手繪基礎(chǔ)不會(huì)呀柠并？”
“總害怕畫錯(cuò)怎么辦？”
“有沒有什么紙面原型技巧呢密幔？”
“想法創(chuàng)意都在腦子里楔脯，到軟件原型繪制時(shí)就忘記很多細(xì)節(jié)，好沮喪?”
...許多設(shè)計(jì)師及朋友反饋說胯甩。
那么怎樣讓“紙面原型圖”不再是沒有迷惑的閑談昧廷，而是真正有意義的快速表達(dá)創(chuàng)意想法的一個(gè)技能呢堪嫂？配上我的項(xiàng)目實(shí)例、結(jié)合書中的一些要點(diǎn)提取及整理木柬，供大家學(xué)習(xí)和探索皆串。（關(guān)于紙面原型模版打印源文件，如有需要請(qǐng)留言即可^_^）
設(shè)計(jì)師在得到產(chǎn)品最初需求或若干個(gè)創(chuàng)意思路時(shí)眉枕，但他們還仍然是一些抽象的分析恶复、概念或詞匯，想要把他們變成比較直觀的設(shè)計(jì)效果速挑，則需要?jiǎng)邮衷谒賹懠埳嫌霉P把他們畫成草圖形式谤牡。
一、紙面原型的定義
Wireframe直譯為線框圖姥宝，由線條構(gòu)成的草圖或示意圖拓哟、簡(jiǎn)單的陰影表現(xiàn)或者上色草圖都屬于wireframe，也稱為紙面原型或原型草圖伶授。
二断序、紙面原型的目的？
“探索糜烹、過濾违诗、驗(yàn)證、問題分析疮蹦、設(shè)計(jì)機(jī)會(huì)”诸迟，產(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í)隨地簡(jiǎn)單快速記錄表達(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)我們有了一個(gè)好的創(chuàng)意也應(yīng)通過概念把它呈現(xiàn)出來撮竿。
對(duì)于一個(gè)需求丁稀，交互設(shè)計(jì)師應(yīng)盡量發(fā)散思維設(shè)計(jì)盡量多的方案，從主到次倚聚、從大到小將他們畫出來线衫，并主動(dòng)召集團(tuán)隊(duì)成員一同討論這些方案，盡快解決那些不確定的問題惑折。不再是一味說著想法而是落到實(shí)實(shí)在在的概念想法圖上授账，雖然看起來多一步，但繪畫概念草圖畢竟比低保真原型成本低很多惨驶，又可收集來自更多角度的智慧白热，發(fā)現(xiàn)概念有不足便快速修改，少走很多彎路粗卜。
四屋确、紙面原型草圖潦草但要認(rèn)真
1. 使用簡(jiǎn)單工具
紙面原型不需要什么高級(jí)的工具和復(fù)雜的技巧，可繁可簡(jiǎn)续扔」ネ危可以使用最簡(jiǎn)單的鉛筆（自動(dòng)鉛筆最好）、圓珠筆纱昧、簽字筆刨啸、鋼筆、紙張（速寫本最好）（如下圖1）
2. 粗細(xì)線條识脆、空間體積设联、陰影
為了增強(qiáng)原型草圖的表現(xiàn)力，我們善于變換不同的表現(xiàn)手法灼捂，使畫面更加活躍而充滿內(nèi)涵离例。希望表達(dá)出界面的邏輯，可以使用馬克筆悉稠、雙頭畫筆等宫蛆，運(yùn)用粗細(xì)不等的線條和陰影關(guān)系，畫出界面的層次關(guān)系偎球； 同時(shí)洒扎，還要簡(jiǎn)單把物體、控件衰絮、圖標(biāo)的空間和體積感表現(xiàn)出來，譬如用鉛筆涂抹少量的陰影磷醋、沿著造型的右猫牡、下邊勾畫雙線，使用淡灰色馬克筆等邓线，當(dāng)然最好可以把上述的這些技巧結(jié)合起來展示（如下圖2）
3. 交互淌友、動(dòng)態(tài)
我們要把交互和旋轉(zhuǎn)的動(dòng)態(tài)表現(xiàn)出來煌恢，主要通過重疊、各種箭頭來實(shí)現(xiàn)震庭。重疊就是表現(xiàn)物體運(yùn)動(dòng)過程的重影瑰抵，箭頭的使用就比較廣了，即可以表現(xiàn)物體運(yùn)動(dòng)的方向（如下圖3-1）器联，也可以表現(xiàn)不同界面間的交互關(guān)系（如下圖3-2）二汛，還可以表現(xiàn)導(dǎo)航、進(jìn)度和彈出等拨拓。希望表達(dá)出交互效果肴颊，可使用便簽紙和小卡片，他們可以當(dāng)做提示氣泡渣磷、彈出層婿着、模態(tài)窗口等，貼在繪圖本的任何地方醋界，也可以作為頁(yè)面標(biāo)注的工具及說明產(chǎn)品功能竟宋。
4. 聲音、振動(dòng)
紙面原型的手繪表現(xiàn)力是無窮的形纺，除了上訴這些有形和具象的事物袜硫，有時(shí)還可以根據(jù)需要，勾畫出一些無形和抽象的事物挡篓，譬如閃爍婉陷、聲音和振動(dòng)（如下圖4所示）
五、紙面原型工具模板官研？
1. 使用人群
由于紙面原型的快速靈活性秽澳，有些創(chuàng)業(yè)公司甚至已經(jīng)拋棄了電子版的高保真原型，直接采用紙面原型作為交互設(shè)計(jì)師的最后交付物戏羽。這對(duì)于紙面原型有了更高的要求担神。另外，有很大一部分人不具備手繪能力而避開繪畫技能的限制也可使用這些工具便事半功倍始花。
2. 來源妄讯、特點(diǎn)
由Suki Kits公司生產(chǎn)的原型設(shè)計(jì)模板套裝是一個(gè)比較好的選擇（如下圖6），不同的應(yīng)用平臺(tái)有不同的產(chǎn)品套裝酷宵，包括iOS亥贸、iPhone、iPad浇垦、Android平臺(tái)各版本炕置、Windows Phone平臺(tái)產(chǎn)品。
（1）模板由不銹鋼制成，精度很高朴摊；
（2）模板上有：各應(yīng)用平臺(tái)的狀態(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ǔ)缺缚陷，把所有頁(yè)面按照創(chuàng)意和設(shè)計(jì)思路串在一起，使他們成為流程圖往核。每一項(xiàng)功能的每一個(gè)動(dòng)作都不要漏掉箫爷，做到前有因、后有果聂儒、中間過程有條理虎锚。（如下圖7）
2. 利用紙面原型草圖進(jìn)行可用性測(cè)試
在原型草圖階段，就可以對(duì)應(yīng)用進(jìn)行簡(jiǎn)單的可用性測(cè)試衩婚。體驗(yàn)大致功能窜护、導(dǎo)航、布局結(jié)構(gòu)等谅猾，檢驗(yàn)功能柄慰、布局是否合理鳍悠？控件是否規(guī)范税娜？導(dǎo)航是否正確坐搔？把原型草圖中的每一個(gè)界面單獨(dú)拍照，之后使用照片美化應(yīng)用對(duì)照片稍加調(diào)整敬矩，譬如邊緣裁剪概行、調(diào)整亮度、對(duì)比度等弧岳，使圖片清晰完整凳忙。并在移動(dòng)設(shè)備端的可交互原型應(yīng)用工具，譬如：Pop (iOS)?(如下圖9視頻所示)禽炬、快現(xiàn)(Android)涧卵，一張張導(dǎo)入拍照?qǐng)D片，選取特定區(qū)域添加熱區(qū)腹尖、手勢(shì)操作柳恐、鏈接，就可以實(shí)現(xiàn)點(diǎn)擊界面后跳轉(zhuǎn)热幔、切換等效果乐设。直觀的草圖演示可以大大提升溝通效率。（如下圖8）
