?在交互工作的各個環(huán)節(jié)中，「頁面布局」是將需求從文字、圖表、流程進(jìn)行可視化的執(zhí)行步驟，也是最終表達(dá)的一個關(guān)鍵步驟。但是很多人對于「頁面布局」的理解僅僅停留在用Axure/Sketch的各個控件拖拽出的頁面圖像上，并且可能這個圖像的質(zhì)量還很低，更不論去理解為什么要這么做？
本篇從用戶視角切入，較為全面的闡述「頁面布局」的思路過程，是一份新手入門的頁面布局全攻略。
首頁，我們來重新理解下什么是頁面？
簡單來說，頁面是用戶看到的信息集合的載體，這里面我們往往會忽略一個關(guān)鍵詞：“用戶看到”。這就決定了，頁面對于每一個受眾來說是不同的。橫向來看：同一個頁面，不同的人看感受不同；縱向來看，同一個人，每天按照生活軌跡也能看到不同的頁面。所以，頁面布局中如何把“用戶”因素納入考量，是非常重要的一點。
達(dá)成以上認(rèn)知之后，我們來實際看一下怎么樣簡單搞定頁面布局的“套路”呢？
舉個例子，頁面布局和裝修房子一樣。（在有限的空間內(nèi)，對特定的信息/物品進(jìn)行整理、歸類和擺放的過程）
一般在裝修之前，我們可能會去先考慮一下需要什么風(fēng)格的，是現(xiàn)代的、古典的，歐式的、日式的，還是中式的，有了這些比較典型的風(fēng)格，在裝修的時候基本就有了大致的方向。頁面布局也是一樣，也有沉淀下來的一些常見的頁面模式，正式“裝修”之前，我們需要對這些典型的布局方式了然于胸。
（一）移動端常見頁面模式
在移動端，導(dǎo)航模式是APP最重要的區(qū)別。導(dǎo)航就像書的目錄一樣，展現(xiàn)產(chǎn)品的基本框架和結(jié)構(gòu)，可以告訴你當(dāng)前處于什么位置，讓你在頁面中不迷路。按照產(chǎn)品的信息結(jié)構(gòu)，可分為一級導(dǎo)航和二級導(dǎo)航，常見頁面模式基本也是從導(dǎo)航角度來區(qū)分的。
1、Tab式/標(biāo)簽式
使用場景：
適合體量比較大的產(chǎn)品
功能與功能間關(guān)系密切，且需要頻繁切換。是移動端使用最廣的一種導(dǎo)航模式
優(yōu)點：
入口扁平，直接展現(xiàn)重要信息的入口
減少頁面跳轉(zhuǎn)的層級深度，減少用戶點擊次數(shù)，提高效率
缺點：
底部Tab受屏幕寬度限制，為保證可點擊性，可顯示的數(shù)量有限，一般最多5個。頂部標(biāo)簽，任務(wù)較多時一般使用滾動方式
2、Tab結(jié)構(gòu)變形-舵式
使用場景：
產(chǎn)品的幾個功能中，有一個是核心功能或者說有需要突出的功能
優(yōu)點：
一般會通過一些視覺方式進(jìn)行突出，較大限度引導(dǎo)用戶進(jìn)行操作
缺點：
一定程度使旁邊按鈕點擊率降
3、Tab結(jié)構(gòu)變形-豎向Tab
使用場景：
一般用于分類的場景，如電商類目，餐飲菜單，書籍目錄等
優(yōu)點：
能夠相對支持較多分類項的顯示，一目了然，減少頁面跳轉(zhuǎn)
缺點：
占用較大的面積，受屏幕寬度局限，且不利于單手操作
4、抽屜式
使用場景：
常使用于突出核心功能，隱藏較不重要/使用頻次低的功能。適用于核心功能突出，或者功能較為單一的產(chǎn)品，比如打車產(chǎn)品
優(yōu)點：
減少頁面控件，節(jié)省頁面空間，更聚焦產(chǎn)品核心功能
缺點：
抽屜內(nèi)的功能入口，層級更深
抽屜入口按鈕比較隱蔽，信息容易被忽略
隨著屏幕尺寸增大，左上角的區(qū)域，越來越不便于用戶單手操作
5、宮格式
使用場景：
一般作為二級導(dǎo)航，功能分類比較多的時候，且各功能使用頻率相近但彼此又相互獨立
優(yōu)點：
功能扁平化，充分利用整個頁面，在有限的空間內(nèi)羅列大量的入口
缺點：
同類入口太多時，沒有側(cè)重
6、列表式（及其衍生）
使用場景：
用于功能層級比較淺，且功能間切換不頻繁的主導(dǎo)航，垂直列表的視線都是從左往右，從上到下，所以要把最重要的條目放在最上方。是最常用的頁面布局之一。
優(yōu)點：
頁面結(jié)構(gòu)相對簡單、整齊，邏輯清晰，便于用戶快速定位，符合用戶從上往下的瀏覽習(xí)慣，用戶接受度高
手機屏幕一般是豎屏顯示，列表長度可以沒有限制，通過上下滑動可以顯示更多內(nèi)容，特別適合同類數(shù)據(jù)比較多的信息
但，由于同類信息較多，容易產(chǎn)生視覺疲勞，且相對頁面利用效率較低
隨著技術(shù)的發(fā)展，屏幕的變化，頁面導(dǎo)航模式也在變化，還有其他一些布局模式，比如：卡片式、衍生瀑布流、獨立主題結(jié)構(gòu)等。頁面的導(dǎo)航模式，從一定程度上決定了頁面布局的方式，這幾個導(dǎo)航模式都有優(yōu)缺點，根據(jù)產(chǎn)品的特點選擇合適的導(dǎo)航模式靈活運用就可以了。
（二）頁面布局三步走
弄清楚了裝修風(fēng)格，下一步正式裝修之前，我們要搞清楚誰住在這，住著的人有什么特點，希望裝修成什么樣等，房子面積有多大等，然后才動手開工。
1、從需求到功能
首先，確定這個頁面的任務(wù)目標(biāo)（用戶目的+業(yè)務(wù)需求）
以一個常規(guī)的購物頁面為例：
用戶任務(wù)/目的可能是：
清晰快速的了解自己想要的商品信息，方便、簡單、安心的購買
那么他可能需要的功能
查看商品的詳細(xì)情況：價格、規(guī)格、優(yōu)惠力度等
聯(lián)系客服，詢問詳情
查看物流、評價等幫助判斷
最終完成購買（加入購物車一起購買）
業(yè)務(wù)需求：
1、提升下單率-引導(dǎo)用戶購買/加購
那么可能需要側(cè)重表達(dá)的功能就是加購、購買
其次，提取所有功能點/信息點
把所有需求方表達(dá)和用戶需要的功能點進(jìn)行羅列：
然后，對功能/信息點進(jìn)行分類、組合、優(yōu)先級排序
2、定義屏幕
完成功能/信息提取之后，接下來需要把合適的功能/信息放在特定屏幕的合適的位置。就好比裝修布置，多大平的房子，不同的區(qū)域放置合適的東西，比如馬桶應(yīng)該放到衛(wèi)生間、櫥柜冰箱應(yīng)該放到廚房，頁面布局也是類似，不同的頁面區(qū)域承載不同的信息/功能。
一般來說，絕大多數(shù)場景我們采用豎屏布局，頁面的頂部是標(biāo)題及其他一些附屬全局功能；根據(jù)眼睛聚焦位置，頁面上部更適合放偏視覺的信息；頁面中部適合操作的區(qū)域，可以做核心功能/操作區(qū)；頁面底部一般做為導(dǎo)航，也可以放置需要重點突出的操作按鈕。
3、進(jìn)行布局
將所提取的功能/信息按照屏幕基礎(chǔ)規(guī)則填入：
似乎感覺不對？信息的重點、關(guān)聯(lián)度、細(xì)節(jié)的表達(dá)、頁面的美觀等，都與預(yù)期相差甚遠(yuǎn)。還差最后一步，根據(jù)布局原則進(jìn)行優(yōu)化調(diào)整。
基本的布局原則：
相同的形狀、顏色或其他特征會讓信息關(guān)聯(lián)
不同的間距能給信息分組
零散/分裂的信息按照一定規(guī)律排列，會讓人自動將其關(guān)聯(lián)起來
封閉的圖形，就算有缺失，人們也會自動將其“補全”
布局時，需保持整體風(fēng)格的一致性、延續(xù)性
布局原則的應(yīng)用舉例：
運用基本原則，進(jìn)行調(diào)整，然后整體優(yōu)化：
對比：突出主要的，弱化次要的
刪除：不必要的
隱藏：不能刪除的非必要的
如此以上，就能完成基本的頁面布局。
但，這樣就結(jié)束了嗎？當(dāng)然不是。
怎么樣構(gòu)建更科學(xué)的、更符合用戶認(rèn)知/習(xí)慣，方便用戶瀏覽/操作的頁面，還需要攻略以下幾點：
（三）了解視覺心理
1、控制信息數(shù)量
心理學(xué)研究表明，人一次只能“記住”4項事物。
人不知道大家有沒有打開一個網(wǎng)站或者APP，但是不知道看哪里，因為頁面中太多的信息內(nèi)容，我們不知道從哪開始，然后就很容易關(guān)閉這個APP或者網(wǎng)站！
2、聚焦重要信息
用戶每天接觸太多的信息，他們在接觸粗略信息時，是掃描，掃視！只有眼睛被吸引的時候，他們才會停下來閱讀。
所以當(dāng)全部的信息都加強時，就是所有的信息都變?nèi)趿?，重要的信息要足夠聚焦，聚焦方式有很多：顏色對比，大小對比，動效，音效等?/p>
2、了解用戶瀏覽習(xí)慣
用戶在瀏覽桌面端網(wǎng)頁時，視覺軌跡呈字母 "F" 型。而由于移動端設(shè)備屏幕小，用戶能抓取到整個頁面的內(nèi)容，在移動端頁面下，視覺軌跡則呈字母 "L" 型，位于右上角的信息較容易忽略，不要放重要信息。頁面整體的操作按鈕，位于頁面底部也比較符合瀏覽順序。
（四）分清頁面載體
不同的設(shè)備，操作方式不同，鼠標(biāo)還是觸控；控件和布局規(guī)范也是不同的。進(jìn)行頁面布局時要充分了解，頁面將在哪些載體顯示。
現(xiàn)在市場上設(shè)備的種類越來越多，屏幕的種類也越來越多，雖然平時設(shè)計的時候可能接觸最多的還是常規(guī)的手機屏幕，但在布局的時候最少要考慮屏幕的比例、橫屏豎屏等，以免出現(xiàn)一行信息過多，或者首屏信息露不出來等。
（五）操作方式&操作熱區(qū)
49%的用戶習(xí)慣于單手握持手機，用拇指操控屏幕，而用另外一只手做其他的事情
36%的用戶會雙手環(huán)抱手機，用其中一只手的拇指操控屏幕
15%的用戶會用雙手握持手機并用兩手的拇指操控屏幕，其中90%的用戶操作時習(xí)慣屏幕豎著，而10%的用戶偏向于橫屏操作。
所以：
頁面左上角、右下角不適合操作，不要放需要頻繁操作的button
結(jié)合視覺瀏覽習(xí)慣：頁面上方適合放重要的查看信息，下方適合做操作區(qū)。
（六）基于平臺/系統(tǒng)規(guī)范
不同的平臺/系統(tǒng)，由于底層邏輯、設(shè)計理念等不同，對于設(shè)計的規(guī)范不一樣，底層控件的表現(xiàn)也不一樣。
在頁面布局的時候，如果能盡可能的了解不同平臺的規(guī)范，既能更好地使用基本控件，也不會出現(xiàn)一些奇怪的復(fù)用現(xiàn)象。
以上6點是我對于「頁面布局」總結(jié)的一份思路攻略，類似武功心法，最終修行如何，還需各位自行摸索。
