網站規劃通識：原型圖繪制的一些注意事項

本文來自網易雲社群

作者：林玮園

雷火遊戲部 網站組

基本概念：

一、什麼叫原型圖？

用線條、圖形描繪出産品/專題的架構，即為原型，也可稱線框圖。

原型圖的輸出可根據品質，大緻分為低保真、中保真、高保真原型圖。

編輯日常會根據專題的重要性、難易程度等，輸出不同等級的原型。如正常玩法專題/節日專題，可輸出低保真原型；推廣期重點FAB考慮輸出中保真原型。

二、什麼叫原型規劃？

一句話描述，原型規劃就是“将抽象資訊轉化為具象資訊的過程”。

無論是大型項目或小型專題，原型規劃在其中起到了承上啟下的作用。編輯通過前期采集營銷需求、梳理産品/專題功能，綜合考慮使用者體驗等因素，對産品/專題的各版塊、資訊層級、界面和功能進行合理的排序。

原型規劃的目标為，将粗略規劃進行細化，規劃成為一份可落地執行的解決方案。

三、原型規劃的作用是什麼？

原型規劃可輔助編輯、營銷、設計、前端與背景，清晰明确産品/專題，共同溝通産品思路。

低/中保真原型在項目前期使用，相較設計稿成本效益更高，節約溝通時間，提高需求修改工作效率。

正文： 

首先根據工作經驗的總結，說一下原型規劃的幾個基本原則吧。

1、畫圖工具

雷火網站組普遍采用Axure RP8.0做原型圖。

Axure RP可以繪制出比較正式的産品原型，如果增加了色彩和互動動作（高保真），基本最終産品形态無異。同時最新的RP8版本包含了強大的各類功能icon庫，甚至可以滿足基本的APP中保真原型輸出。

（新手上路：Axure教程 axure新手入門基礎（1-11）http://www.woshipm.com/rp/39203.html）

2、畫圖原則

a)  原型架構層級分明

新手畫原型一般會有兩種做法，要麼想到哪就畫到哪，整個專題所包含的原型圖都在一個頁面上，最多加一些箭頭作為示意；或者一張頁面圖就建一個Page。這兩種都會加重做規劃的人的思維混亂，讀原型圖的設計和開發同僚也不容易了解。

做規劃，最重要的是想清楚。畫原型圖前，編輯先搞清楚頁面與頁面之間的關系，在頁面目錄中根據層級關系建好空的頁面，就像寫文章前列提綱，然後再填充進行每一個頁面的具體設計。這裡放了一張夢島的規劃檔案目錄作為示意：

b)  原型規劃不影響設計的自由發揮

編輯做原型規劃有時候會進入“心流”，完全沉浸其中，美化美化再美化，原本計劃做低保真中保真的原型圖，改着改着擋不住往高保真的方向奔去了。這也是新人工作中很容易誤入的“歧途”。為什麼呢？

完成原型規劃後，編輯需要用原型圖和設計師進行直覺溝通，随後設計師就會開始設計。原型圖對設計師而言，是一個便于了解需求的檢視工具。從這個角度說，編輯就不該在原型圖上過多的進行“美觀”規劃，甚至固定布局，影響了設計師的視覺發揮空間。

比如編輯使用了一個并不太能準确表達功能意圖的icon（受限于Axure RP8.0的元件庫），設計師看到你給到的icon，就極可能會按照你找的風格來做。

c)  排版整齊，頁面元素統一

畫原型圖時，會用到很多軟體中自帶的元件。一開始沒有形成自己習慣的時候，可能會有以下情況：

同一個頁面内同一種元件代表好多種行為；

同一個頁面内同一種元件表示同一個行為，不同頁面之間同一種元件表示好多種行為；

規劃的混亂會影響設計過程中設計師對于樣式的把控，甚至出現出錯-返工設計的情況，這些都是在前期原型規劃期間可梳理并避免的。

此外，排版整齊主要指：1）左右對齊；2）上下居中；3）間隔一緻。

做到以上幾點，基本上輸出的原型都能保持簡明清晰了。

3、畫圖雷區

a)  原型圖不宜占用過多時間

原型圖固然要清晰清晰美觀，但不能為了好看而主次颠倒，花費大量時間在原型圖上是得不償失的。最具成本效益的是根據産品/專題規模和複雜程度，判定所繪原型圖的保真度，想清楚流程後進行規劃。原型圖可以說是需求分析的最後一層了，重點始終是前面的思考。

為什麼會有不少人畫原型圖慢呢？總結下來不外乎這幾點：A）做得慢，對軟體太不熟悉，快捷操作幾乎不知道；B）想不清楚，做了原型圖反複修改，瑣碎返工。這兩點都是可以在前期培養好習慣，避免掉的。

b)  原型圖不要隻圖“美”，再次強調！

最重要的始終是“想清楚”，然後“講清楚”。一份沒有需求說明的原型圖是不合格的，除非專題非常簡單一目了然。

強調第三次，原型輸出需要保證的是以下要點：

頁面架構要清楚；

頁面不影響設計；

頁面元素要統一；

頁面排版要整齊；

4、畫圖技巧

a)  善用輔助線

輔助線就像是PS裡面的參考線，能分分鐘幫你對齊。

做原型必用的3根輔助線：左右線辨別出頁面的主體寬度、橫的一根辨別專題的版頭高度（PC版應用較多）。 

b)  善用組合

比如在一個頁面較多的專題，或APP規劃中，在多處會用到的一整塊的東西可以做成組合。這個習慣會在複雜産品規劃的時候給編輯省了很多時間（别問我為什麼知道~~）建議新人在新上手學習的時候就養成這習慣。

如果采用複制粘貼的老方法，一旦有修改就需要修改每一處地方，不僅容易遺漏還降低工作效率；母版順便解決了對不齊的問題，畢竟大部件拖起來輕松的多。

相比于滑鼠拖個範圍選中一大坨東西來說，組合實在是顯得太幹淨了！

網易雲大禮包：https://www.163yun.com/gift

本文來自網易雲社群，經作者林玮園授權釋出

相關文章：

【推薦】 人力資源管理中的大資料應用之道

【推薦】 HBase優化實戰

【推薦】 linux系統記憶體dump機制介紹（一）--kdump