對于有一名優(yōu)秀的網(wǎng)頁設(shè)計師來說，要想做出個理想的網(wǎng)站，那么首先就要會設(shè)計網(wǎng)頁原型圖，畢竟在網(wǎng)頁原型圖的基礎(chǔ)上，也更高效率完成工作。那么，你知道怎么設(shè)計網(wǎng)頁原型圖嗎?如果不清楚怎么設(shè)計的話，不妨跟著小編一起來學(xué)下。

怎么設(shè)計網(wǎng)頁原型圖

　　一、基礎(chǔ)規(guī)范

　　1.繪制原型圖的尺寸

　　考慮到繪制與查看原型圖的便利性，以及大部分產(chǎn)品與開發(fā)人員使用小屏幕筆記本，當(dāng)前原型圖的尺寸一般采用375*670px。

　　2.原型圖常用組件尺寸

　　指經(jīng)常使用的通用組件，如狀態(tài)欄、頂部導(dǎo)航欄、底部導(dǎo)航欄等，這里由于最大寬度已經(jīng)確定都是375px，因此關(guān)注的是各通用組件高度。狀態(tài)欄可以設(shè)置為母版高度是20px，頂部導(dǎo)航欄高度44px，底部tab導(dǎo)航欄高度49px。

　　3.對齊

　　頁面中的模塊或元素不能隨意放置，要保持對齊性，這樣呈現(xiàn)出的效果才規(guī)整有序。

　　4.親密關(guān)聯(lián)

　　也就是我們經(jīng)常提到的“格式塔原理”的演變，是指內(nèi)容屬性可以劃歸為一組的，在位置布局上距離相近，不同屬性內(nèi)容之間的距離相對遠一些。如下圖閱讀類APP的個人中心頁面，按照消費行為、個人互動消息、系統(tǒng)操作分成了不同模塊，同一模塊下相近屬性歸為一組。

　　5.對比和重復(fù)

　　頁面不同元素之間要有對比效果，目的是更清晰的組織信息、使層級關(guān)系明了，能夠引導(dǎo)用戶瀏覽并且制造焦點。

　　設(shè)計的某些元素可能在整個頁面中多次出現(xiàn)。重復(fù)的元素可能是某個模塊、一條分割線、某種粗字體、某類型圖標(biāo)標(biāo)識等。

　　如下圖，我的書評-我的回復(fù)頁面，通過背景色對比區(qū)分“原貼以及針對原貼的回復(fù)”，并且多個貼子的回復(fù)樣式是重復(fù)排版的。

（圖片來自網(wǎng)絡(luò)）

二、細節(jié)規(guī)范

　　1.字體或模塊色值

　　原型圖模塊背景或元素一般采用黑白灰色值，目的是避免給視覺設(shè)計師造成用色干擾。

　　頁面中重點凸顯的內(nèi)容，如字體元素顏色加重，按鈕或某個模塊采用深色塊填充。下圖中購買價格、余額是重點信息，因此色值加重;購買章節(jié)數(shù)以及購買按鈕也是關(guān)鍵內(nèi)容，因此給予色塊填充。

　　這樣做的目的是視覺設(shè)計師可以很快明確頁面元素的重要性層級，而不必一定要仔細閱讀頁面交互說明。

　　作為交互設(shè)計師必須始終明確，原型圖的重點是功能和邏輯結(jié)構(gòu)的梳理與呈現(xiàn)，用色不是我們應(yīng)該考慮的。

　　2.字體類型與字號大小

　　原型圖中使用相同的字體，保持所有頁面字體呈現(xiàn)一致性。字號要依據(jù)具體頁面中元素重要性的不同而定，一般來說為便于清楚查看，字號最小12px。如下圖紅色框選部分，標(biāo)題與簡介不是相同的字體，給人感覺頁面很跳破壞了統(tǒng)一性。

（圖片來自網(wǎng)絡(luò)）

　　怎么設(shè)計網(wǎng)頁原型圖?主要涵蓋了兩大步驟，包括基礎(chǔ)規(guī)范和細節(jié)規(guī)范這兩個要執(zhí)行到位的規(guī)范。如果您對網(wǎng)頁設(shè)計制作很感興趣的話，不妨關(guān)注本小編，小編會利用接下來的時間陸陸續(xù)續(xù)更新。