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

本文來自網易雲社區

做者：林瑋園

雷火遊戲部 網站組

基本概念：

1、什麼叫原型圖？

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

原型圖的輸出可根據質量，大體分爲低保真、中保真、高保真原型圖。

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

 

2、什麼叫原型規劃？

一句話描述，原型規劃就是「將抽象信息轉化爲具象信息的過程」。

不管是大型項目或小型專題，原型規劃在其中起到了承上啓下的做用。編輯經過前期採集營銷需求、梳理產品/專題功能，綜合考慮用戶體驗等因素，對產品/專題的各版塊、信息層級、界面和功能進行合理的排序。

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

 

3、原型規劃的做用是什麼？

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

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

正文： 

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

一、畫圖工具

雷火網站組廣泛採用Axure RP8.0作原型圖。

Axure RP能夠繪製出比較正式的產品原型，若是增長了色彩和交互動做（高保真），基本最終產品形態無異。同時最新的RP8版本包含了強大的各種功能icon庫，甚至能夠知足基本的APP中保真原型輸出。

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

 

二、畫圖原則

a)  原型框架層級分明

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

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

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

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

完成原型規劃後，編輯須要用原型圖和設計師進行直觀溝通，隨後設計師就會開始設計。原型圖對設計師而言，是一個便於理解需求的查看工具。從這個角度說，編輯就不應在原型圖上過多的進行「美觀」規劃，甚至固定佈局，影響了設計師的視覺發揮空間。

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

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

畫原型圖時，會用到不少軟件中自帶的元件。一開始沒有造成本身習慣的時候，可能會有如下狀況：

同一個頁面內同一種元件表明好多種行爲；

同一個頁面內同一種元件表示同一個行爲，不一樣頁面之間同一種元件表示好多種行爲；

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

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

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

 

三、畫圖雷區

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

原型圖當然要清晰清晰美觀，但不能爲了好看而主次顛倒，花費大量時間在原型圖上是得不償失的。最具性價比的是根據產品/專題規模和複雜程度，斷定所繪原型圖的保真度，想清楚流程後進行規劃。原型圖能夠說是需求分析的最後一層了，重點始終是前面的思考。

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

b)  原型圖不要只圖「美」，再次強調！

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

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

頁面框架要清楚；

頁面不影響設計；

頁面元素要統一；

頁面排版要整齊；

 

四、畫圖技巧

a)  善用輔助線

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

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

b)  善用組合

好比在一個頁面較多的專題，或APP規劃中，在多處會用到的一整塊的東西能夠作成組合。這個習慣會在複雜產品規劃的時候給編輯省了不少時間（別問我爲何知道~~）建議新人在新上手學習的時候就養成這習慣。

若是採用複製粘貼的老方法，一旦有修改就須要修改每一處地方，不只容易遺漏還下降工做效率；母版順便解決了對不齊的問題，畢竟大部件拖起來輕鬆的多。

相比於鼠標拖個範圍選中一大坨東西來講，組合實在是顯得太乾淨了！

 

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

本文來自網易雲社區，經做者林瑋園受權發佈

 

相關文章：
【推薦】 人力資源管理中的大數據應用之道
【推薦】 HBase優化實戰
【推薦】 linux系統內存dump機制介紹（一）--kdump