雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁 案例 服務(wù) 關(guān)于 face+

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

Time: 2019-12-30


對于有一名優(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ù)排版的。


responsive-prototype.jpg

(圖片來自網(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)一性。


img_36124_mockup_protoype_entertop.jpg

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


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


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號22號樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號
028-62790929
service@faceui.com

辦公地址地圖
首頁 | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

上海辦公地點地圖
北京辦公地點地圖
深圳辦公地點地圖
在微信中搜索faceui
或保存二維碼在微信中打開