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

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

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

　　1.繪制原型圖的尺寸

　　考慮到繪制與查看原型圖的便利性，以及大部分產(chǎn)品與開(kāi)發(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.對(duì)齊

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

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

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

　　5.對(duì)比和重復(fù)

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

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

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

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

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

　　1.字體或模塊色值

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

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

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

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

　　2.字體類型與字號(hào)大小

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

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

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