起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Web產(chǎn)品的原型布局需要遵循什么規(guī)范
編輯導(dǎo)語(yǔ)：原型布局是指按照合適的位置排放頁(yè)面各種元素，PM需要根據(jù)產(chǎn)品的特性采用合適的布局設(shè)計(jì)；本文作者詳細(xì)介紹了Web產(chǎn)品的原型布局需要遵循什么規(guī)范，我們一起來(lái)看一下。
同一個(gè)產(chǎn)品不同頁(yè)面的布局規(guī)則應(yīng)該盡量保持統(tǒng)一，即大部分頁(yè)面都是采用一樣的布局，特殊頁(yè)面可以單獨(dú)處理。
我們可以先看一下常見的Web產(chǎn)品是采用什么樣的布局設(shè)計(jì)，這樣我們就有一個(gè)大概的認(rèn)知感受了。
Web產(chǎn)品遵循原型布局規(guī)范，有以下幾點(diǎn)好處：
- 確定產(chǎn)品的布局規(guī)范之后，可以制作成屬于自己的母版然后快速添加到相應(yīng)頁(yè)面。
- 再去畫頁(yè)面的時(shí)候，只需要從內(nèi)容區(qū)的固定位置開始畫起來(lái)，比如(200,150)，簡(jiǎn)單好記。
- 展現(xiàn)給大家看的原型效果，每個(gè)頁(yè)面的布局都是統(tǒng)一的，體現(xiàn)了產(chǎn)品經(jīng)理的原型能力很專業(yè)。
常見的原型布局有以下幾種，本文會(huì)詳細(xì)描述每種布局的組成&位置&大?。涣硗饪梢圆榭聪鄳?yīng)的演示網(wǎng)址進(jìn)行了解https://spd43m.axshare.com。
一、上下布局
上下布局包含導(dǎo)航欄、內(nèi)容區(qū)。
- 導(dǎo)航欄位于畫布位置(0,0)，寬度建議采用1200px，高度建議80px。
- 內(nèi)容區(qū)位于畫布位置(0,100)，寬度1200px，高度自適應(yīng)。
二、左T布局
左T布局包含導(dǎo)航欄、菜單欄、內(nèi)容區(qū)。
- 導(dǎo)航欄位于畫布位置(0,0)，寬度建議采用1200px，高度建議80px。
- 菜單欄位于畫布位置(0,100)，大小取決于每個(gè)菜單項(xiàng)的大小160*40px。
- 內(nèi)容區(qū)位于畫布位置(180,100)，寬度1020px，高度自適應(yīng)。
三、右T布局
左T布局包含導(dǎo)航欄、內(nèi)容區(qū)、側(cè)邊欄。
- 導(dǎo)航欄位于畫布位置(0,0)，寬度建議采用1200px，高度建議80px。
- 內(nèi)容區(qū)位于畫布位置(0,100)，寬度1020px，高度自適應(yīng)。
- 側(cè)邊欄位于畫布位置(970,100)，大小取決于每個(gè)菜單項(xiàng)的大小160*40px。
四、國(guó)字布局
國(guó)字布局包含導(dǎo)航欄、菜單欄、內(nèi)容區(qū)、側(cè)邊欄、頁(yè)腳。
- 導(dǎo)航欄位于畫布位置(0,0)，寬度建議采用1200px，高度建議80px。
- 菜單欄位于畫布位置(0,100)，大小取決于每個(gè)菜單項(xiàng)的大小160*40px。
- 內(nèi)容區(qū)位于畫布位置(180,100)，寬度1020px，高度自適應(yīng)。
- 側(cè)邊欄位于畫布位置(1010,100)，大小取決于每個(gè)菜單項(xiàng)的大小160*40px。
- 頁(yè)腳位于頁(yè)面位置(0,640)，高度位置根據(jù)實(shí)際情況調(diào)整。
五、總結(jié)
Web后臺(tái)產(chǎn)品，建議遵循左T布局來(lái)畫原型，可以很好的展示產(chǎn)品的菜單導(dǎo)航，方便運(yùn)營(yíng)快速找到自己所需的功能進(jìn)行使用。
Web用戶產(chǎn)品，建議遵循國(guó)字布局來(lái)畫原型，可以很好的展示產(chǎn)品的各種內(nèi)容，用戶可以方便的查看網(wǎng)站的全部?jī)?nèi)容和結(jié)構(gòu)。
相關(guān)閱讀：
Web后臺(tái)產(chǎn)品的列表頁(yè)規(guī)范
Web后臺(tái)產(chǎn)品的詳情頁(yè)規(guī)范
Web后臺(tái)產(chǎn)品的表單頁(yè)規(guī)范
Web后臺(tái)產(chǎn)品的搜索頁(yè)原型規(guī)范
#專欄作家#
浪子，個(gè)人微信langzipm，公眾號(hào)：浪子畫原型(langzisay)。專注于Axure原型設(shè)計(jì)和產(chǎn)品規(guī)范。
本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于CC0協(xié)議。
- 目前還沒評(píng)論，等你發(fā)揮！
