頁面布局的設(shè)計經(jīng)驗總結(jié)

時間：2023-10-05 00:30:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-10-05 00:30:01 來源：網(wǎng)站運(yùn)營

頁面布局的設(shè)計經(jīng)驗總結(jié)：頁面布局指的都是頁面信息結(jié)構(gòu)布局方案，即頁面中的元素如何展示給用戶。對于產(chǎn)品而言，頁面的布局方案是非常重要的，一個合理的頁面布局方案，能為用戶提供更好的產(chǎn)品體驗，進(jìn)而為產(chǎn)品帶來更多的正向數(shù)據(jù)。尤其是當(dāng)產(chǎn)品進(jìn)入成熟穩(wěn)定期后，功能方面已經(jīng)沒有多少空間進(jìn)行創(chuàng)新了，更多的需要我們在細(xì)節(jié)方面進(jìn)行打磨，而頁面布局就是其中很重要且容易達(dá)成產(chǎn)品目標(biāo)的一個點。影響頁面布局的因素有很多，如產(chǎn)品目標(biāo)需求，用戶需求等，但此文僅從通用的角度來簡單總結(jié)一下常見APP頁面布局設(shè)計的一些經(jīng)驗。

1. 頁面與用戶之間的交互

用戶使用任何產(chǎn)品都需要與產(chǎn)品進(jìn)行互動，一般來說用戶與產(chǎn)品之間交互的載體就是頁面中布局的元素信息，即頁面（產(chǎn)品）通過布局設(shè)計方案向用戶展示元素傳遞各種信息，用戶從這些信息篩選出自己需要的目標(biāo)信息，然后進(jìn)行相關(guān)的操作并反饋給頁面（產(chǎn)品），頁面與用戶的交互流程可以簡單歸納為如下圖所示。因此從頁面與用戶的交互流程中可以看出，不能的頁面布局方案就會對用戶產(chǎn)品不同使用體驗影響。




2. 頁面布局的評估

在設(shè)計好一個好的頁面布局方案前，我們需要知道什么是好的頁面布局。個人認(rèn)為一個好的頁面布局方案應(yīng)該能滿足用戶需求的同時還能夠滿足產(chǎn)品需求，當(dāng)然在實際中設(shè)計方案評估的維度遠(yuǎn)遠(yuǎn)不止這兩點，但這兩點在任意設(shè)計場景下一定是需要考慮的。同時用戶需求和產(chǎn)品需求都是非常復(fù)雜的問題，不同的產(chǎn)品甚至同一產(chǎn)品的不同功能模塊都會會有不同的用戶需求和產(chǎn)品需求，此處僅從基礎(chǔ)的角度來簡單分析一下用戶目標(biāo)和產(chǎn)品目標(biāo)對頁面布局設(shè)計的影響。

（1）用戶需求

頁面布局受用戶需求影響可以簡單的歸納為以下幾個方面：

用戶目標(biāo)

用戶目標(biāo)指的是用戶需要通過頁面完成自己的目標(biāo)，而頁面布局就需要為用戶提供完成這些目標(biāo)的元素布局方案。如果頁面的布局方案不能幫助用戶完成用戶目標(biāo)，那么頁面的布局方案就是一個失敗的設(shè)計方案。例如用戶需要買一個商品，那么在上屏詳情頁中就需要產(chǎn)品提供商品的名稱，規(guī)格，價格，是否有貨，購買按鈕等信息元素，如果頁面中不能滿足用戶的這些需求，那么這個商品詳情頁面的布局設(shè)計方案就是失敗的，是不可用的。

產(chǎn)品體驗

產(chǎn)品體驗良好是用戶對所有產(chǎn)品的預(yù)期，一般來說擁有良好體驗的頁面布局設(shè)計方案應(yīng)該有以下幾點：

信息理解簡單

頁面中向用戶傳遞的信息用戶應(yīng)該能夠很好的理解，且用戶不會產(chǎn)生歧義，例如頁面布局中信息提示的描述文案應(yīng)該使用通俗易懂的語句，盡量減少專業(yè)化語句的出現(xiàn)。

信息瀏覽高效

一般來說，頁面中都包含的布局元素都是較多的，那么用戶在使用產(chǎn)品的過程中就希望自己能夠快速的在頁面中“抓取”到自己需要的信息元素，即用戶使用較低的代價達(dá)到自己的需求目標(biāo)。這就要求頁面的布局方案能夠讓用戶在瀏覽使用時能夠快速高效的獲取自己需要信息元素，而不需要用戶花費較大精力在龐雜的信息中尋找自己需要的信息。

操作便捷

便捷操作是頁面布局中用戶體驗的另外一個重要因素，即通過頁面布局可以很好的降低用戶的操作路徑和操作成本。例如在頁面布局中一般全局（當(dāng)前頁面）操作按鈕都布局在標(biāo)題欄或者頁面底部固定操作區(qū)域中。

（2）滿足產(chǎn)品需求

頁面布局不僅要考慮用戶目標(biāo)，還需要考慮產(chǎn)品本身的相關(guān)目標(biāo)，如導(dǎo)流，用戶活躍度等產(chǎn)品數(shù)據(jù)。實際中，不同的產(chǎn)品需求，需要使用不同的頁面布局方案。如下圖所示為常見的2種分享設(shè)計方案，如下左圖所示將分享按鈕布局在標(biāo)題欄（點擊分享按鈕出現(xiàn)分享方式），右圖將分享方式直接布局在頁面，這兩種方案對需要分享的用戶來說基本上都是可以滿足自身需求的，沒有太大差異，但從產(chǎn)品的自身的角度來說右圖中分享數(shù)據(jù)肯定比左圖好（用戶操作漏斗），但是右圖設(shè)計方案的缺點是直接展示分享方式占據(jù)了一定的頁面布局空間，會直接影響頁面中其他信息元素的布局和使用體驗。




3. 頁面布局的設(shè)計思路

在實際中，不同的功能，不同的使用場景，不同的用戶或不同的產(chǎn)品目標(biāo)都會導(dǎo)致不同的設(shè)計布局方案，我們無法歸納或總結(jié)出一個一勞永逸的頁面布局設(shè)計思路或頁面布局模板。但從普適性的角度來講，我們還是可以利用和參考一些通用的原則和設(shè)計思路來進(jìn)行頁面布局的方案設(shè)計。如下是通過設(shè)計實踐中總結(jié)的一些關(guān)于頁面布局的設(shè)計思路。

（1）符合用戶認(rèn)知和習(xí)慣

用戶的認(rèn)知和習(xí)慣對頁面布局設(shè)計有非常大的影響，因為用戶的認(rèn)知和習(xí)慣在一定程度上就決定了用戶從頁面布局中獲取“信息”和進(jìn)行操作的特點，如果頁面布局的不符合用戶的認(rèn)知和習(xí)慣，那么就用戶就需要付出更大的代價才能完成和頁面之間的交互操作。在實際頁面布局方案設(shè)計中關(guān)于用戶認(rèn)知和習(xí)慣需要注意以下幾點：

閱讀操作習(xí)慣

絕大數(shù)語言中，用戶閱讀和操作順序是從到右和從上到下，且先閱讀再進(jìn)行操作，如下圖所示為用戶閱讀和操作習(xí)慣順序示意圖。頁面布局的設(shè)計方案也應(yīng)該遵循這個規(guī)則，以保證用戶能夠快速的閱讀理解并操作頁面中的相關(guān)信息，否則用戶的使用體驗就會非常的差。

與用戶的閱讀的習(xí)慣順序類似，用戶的操作習(xí)慣基本上也是從左到右，從上到下。在實際中，一般來操作按鈕不會單獨存在，會與相關(guān)的信息同時布局在頁面中，即用戶閱讀了相關(guān)的操作信息后在執(zhí)行相應(yīng)的操作。在“信息+操作”的布局設(shè)計中必須保證“先閱讀信息后操作”的用戶路徑，即操作按鈕布局在信息的后面，即“信息+操作”使用上下布局或左右布局，如下圖所示。

根據(jù)菲茨定律，頁面或區(qū)域的四周，即其頂部，底部以及兩側(cè)，都是操作按鈕布局的黃金位置。但考慮到實際頁面布局設(shè)計的“信息+操作”的需求（頁面需要布局“信息”元素），由上述用戶閱讀操作習(xí)慣可知，頁面的定頂部和左側(cè)一般用來布局信息，右側(cè)用來布局信息所對應(yīng)的操作按鈕，頁面左側(cè)不適宜布局操作按鈕。因此對頁面布局來說，操作按鈕布局的黃金位置就是頁面頂部的標(biāo)題欄區(qū)域和頁面底部的操作區(qū)域，如下圖所示。

在頁面布局中，如上右圖所示，一般布局在頁面頂部（標(biāo)題欄）的操作按鈕是針對產(chǎn)品全局或當(dāng)前頁面的，且操作按鈕的優(yōu)先級是從左到右，而布局在頁面底部的操作按鈕都是針對當(dāng)前頁面，且操作按鈕的優(yōu)先級一般是右側(cè)較高（便于用戶操作）。整體上，底部草所按鈕的優(yōu)先級是高于頁面頂部優(yōu)先級的，因為底部更適合用戶對當(dāng)前頁面進(jìn)行操作且因為底部顯示區(qū)域較大更容易獲得用戶視線聚焦。

同樣類似的，頁面局區(qū)域的布局設(shè)計中，操作按鈕的黃金布局位置是區(qū)域的底部和頂部右側(cè)，如下圖所示。

認(rèn)知習(xí)慣

頁面布局應(yīng)該符合用戶的認(rèn)知習(xí)慣，即設(shè)計布局方案與用戶對方案布局的預(yù)期保持一致，不僅需要在產(chǎn)品內(nèi)保持一致，還需要與其類似產(chǎn)品保持一致，以降低用戶的學(xué)習(xí)成本，如頁面標(biāo)題欄的中返回按鈕就需要布局在標(biāo)題欄左側(cè)，網(wǎng)格布局中就需要使用上圖下文的布局形式，如下圖所示。因為這寫常見的布局形式已經(jīng)在用戶心中形成了認(rèn)知習(xí)慣，而使用不同與用戶認(rèn)知習(xí)慣的設(shè)計方案的成本代價是非常高的。頁面布局符合認(rèn)知習(xí)慣就需要保證在設(shè)計中我們需要使用合適的方式和形式進(jìn)行設(shè)計，而不能漫無目的的進(jìn)行所謂的設(shè)計“差異化”和“創(chuàng)新”。

（2）相同/類似/邏輯關(guān)聯(lián)的元素布局在一起

當(dāng)產(chǎn)品頁面中布局的元素比較多的時候，我們就需要對頁面中元素進(jìn)行整理和歸納，即將相同/類似/邏輯關(guān)聯(lián)的元素元素進(jìn)行歸納和分組，并在設(shè)計方案中同組的元素布局在一起，這樣就可以保證用戶閱讀瀏覽的快速高效（可參考格式塔理論），并且進(jìn)行相關(guān)的操作。頁面信息整理歸納的維度非常多，一般來說，可以從信息結(jié)構(gòu)層級，邏輯關(guān)聯(lián)性，元素類型，產(chǎn)品需求目標(biāo)等多個方面進(jìn)行頁面信息元素的歸納和分組。如下圖所示為JD商品詳情頁部分信息歸納分組的結(jié)構(gòu)示意圖。

（3）重要的元素優(yōu)先展示

盡管對頁面元素的歸納分組可以提升用戶的使用體驗，但當(dāng)頁面中的元素較多時，簡單的信息元素分組并不能幫助用戶快速定位到自己要想的信息元素或者產(chǎn)品本身需要突出并信息用戶的信息。此時我們那就需要對元素進(jìn)行優(yōu)先級區(qū)分，并在布局設(shè)計過程中遵循“重要的元素優(yōu)先展示”的布局原則。頁面中信息元素優(yōu)先級的確定標(biāo)準(zhǔn)一般可以從2個方面來確定：一是產(chǎn)品目標(biāo)，即產(chǎn)品需要高優(yōu)先級的展示和設(shè)計，從而提示引導(dǎo)用戶進(jìn)行特定的操作，二是用戶需要，即對升用戶體驗有較大的影響的元素。突出重點信息的元素有很多辦法，具體需要根據(jù)實際的設(shè)計需求來氣確定，具體的可以以下幾個方面進(jìn)行考慮。

布局位置（上到下，左到右）

信息元素的布局位置是非常好的區(qū)分優(yōu)先級的方法之一。一般來說頁面中位置優(yōu)先級是從上到下，從左到右，因為這也是用戶閱讀操作的習(xí)慣順序。

元素類型

不同的元素類型對用用戶視線聚焦的效果也是不同的，一般來說動態(tài)元素（動畫）大于靜態(tài)圖片大于純文本。因此在設(shè)計中，如果某個元素需要突出表現(xiàn)，則可以嘗試使用不同的元素類型進(jìn)行設(shè)計表達(dá)。如下圖所示為2種Tabs組件的設(shè)計方案，左圖使用純文本作為選項卡，右圖選項卡的設(shè)計方案使用了圖文結(jié)合的形式，相比較而言，右圖的視線聚焦效果更好，即Tabs組件會在頁面中得到更高優(yōu)先級的設(shè)計表達(dá)。

元素大小

一般來說，在頁面如果一個元素占據(jù)的大小越大，那么其在頁面中的重要程度就越重要。如下圖所示為常見的文章閱讀列表，其中列表項包含2個元素，其中標(biāo)題為優(yōu)先級最高的元素，因此在設(shè)計中通過加大標(biāo)題字體的大小來提升標(biāo)題的優(yōu)先級。

元素顏色

與元素大小類似，同樣可以通過元素顏色來提升元素在頁面中優(yōu)先級，如下圖所示，同樣的2個按鈕，右側(cè)按鈕使用了顏色填充，左側(cè)按鈕未使用顏色填充，則使用顏色填充的按鈕優(yōu)先級相對較高。

（4）不同的元素應(yīng)該有明顯的區(qū)分

頁面中布局的元素越多，那么用戶瀏覽頁面的效率就會相應(yīng)的降低。在頁面元素保持不變的前提下，我們應(yīng)該增加元素見的“辨識度”，即不同的元素應(yīng)該有著明顯的區(qū)分。如上文所述的元素優(yōu)先級等都是增強(qiáng)元素辨識度的設(shè)計方法，但在實際中還是會經(jīng)常碰到元素優(yōu)先級一致或邏輯結(jié)構(gòu)完全一致的場景，如列表中，無法通過列表項本身屬性差異來表現(xiàn)其差異化，此種情況下一般我們需要借助其他設(shè)計方法來增強(qiáng)元素之間的差異，常見的方法有以下幾種

主題/標(biāo)題

如果頁面中包含多個邏輯結(jié)構(gòu)都相似的元素組，則可以為不同元素組之間增加“標(biāo)題”，通過標(biāo)題/主題來增加頁面元素的“辨識度”，如下左圖所示為未增加標(biāo)題的網(wǎng)格列表，如下右圖所示為增加標(biāo)題的網(wǎng)格列表，這樣通過標(biāo)題里用戶就可以快速的區(qū)分不同的網(wǎng)格列表項。

分割線

分割線也是常見的區(qū)分布局元素的設(shè)計方法之一。如下左圖所示在純文本的Tabs組件中，使用豎線分割線來區(qū)分選項卡，如下右圖所示為使用橫線進(jìn)行列表項的區(qū)分。

元素間距

增加元素（組）之間的間距也可以增強(qiáng)元素之間的辨識性，其與分割線的作用基本一致，區(qū)別在于分割線的辨識性大于增加間距。

元素形式

元素形式指的是元素在頁面中展現(xiàn)的視覺樣式，即使是標(biāo)準(zhǔn)的控件，也會有多種視覺形式，如按鈕就有圖標(biāo)按鈕，文字按鈕，線框按鈕和色塊填充按鈕幾種常見的形式，不同的形式元素會有不同的實視線焦點效果，因此可以幫助用戶快速區(qū)分不同的元素。

（5）頁面信息密度

在頁面布局中，除了需要關(guān)注各種元素的自身的布局和設(shè)計方案外，還需要整體的關(guān)注頁面中的信息密度，即頁面或者特定區(qū)域內(nèi)布局元素的多少。頁面布局元素密度不能超過一定程度（具體可以結(jié)合實際需求來判斷），否則就會造成信息過載，即頁面中信息密度超出用戶接收和處理的程度，從而降低用戶的信息瀏覽效率和增加信息瀏覽成本，從而對產(chǎn)品的使用體驗造成負(fù)面影響。為了避免頁面信息過載，一般可以從以下幾個方面進(jìn)行設(shè)計思考。

優(yōu)化用戶體驗路徑，分解用戶路徑

如果頁面中需要布局信息元素較多，可以考慮通過優(yōu)化用戶體驗路徑來解決，即將頁面中過多的信息元素通過適當(dāng)?shù)闹亟M優(yōu)化，將用戶的操作路徑幾個步驟，每一個步驟包括若干信息元素，這樣就可以加大程度降低用戶單次接收到信息量。例如在常見的賬戶注冊流程中，用戶需要填寫很多資料信息，但是如果將所有信息都一次性展示給用戶，就會造成頁面中信息過載，此時可以將頁面中用戶的任務(wù)路徑當(dāng)分解為幾個小步驟，每一個步驟僅包括部分元素，這樣就可以避免頁面中的信息過載了。與信息過載相比較，適當(dāng)?shù)难娱L用戶操作路徑帶來的用戶使用成本的增加是可以接受的。

頁面中僅布局必須的元素

在頁面布局設(shè)計過程中，我們必須要保證頁面中布局的所有元素都是必須合理的（可從用戶和產(chǎn)品等多個維度來衡量），應(yīng)該遵循“如無必要，勿增實體”的原則。

展示重要元素，隱藏次要元素

如果在設(shè)計過程中發(fā)現(xiàn)，頁面元素較多且都是必須的，則可以在設(shè)計中遵循“展示重要元素，隱藏次要元素”的原則，即根據(jù)元素的優(yōu)先級，重點設(shè)計展示重要的元素，將次要的元素通過設(shè)計方法隱藏起來，用戶可以通過特定的操作按鈕來查看隱藏起來的次要信息，如常見的更多按鈕，展開/收起按鈕和溢出菜單按鈕。如下圖所示為常見的溢出菜單和更多按鈕的示意圖。

（6）頁面布局與信息層級結(jié)構(gòu)

頁面中布局的元素較多，并一定所有的元素都是屬于同一層級結(jié)構(gòu)，那么在頁面布局中我們就需要同設(shè)計方案來體現(xiàn)元素的層級結(jié)構(gòu)關(guān)系，從而幫助用戶來理解產(chǎn)品的頁面信息結(jié)構(gòu)。手機(jī)屏幕本質(zhì)上是沒有Z軸的，但是可以通過顏色，邊界線和陰影等特定的方法來表達(dá)頁面的Z軸層級關(guān)系，從而來表達(dá)信息元素的層級結(jié)構(gòu)。

（7）產(chǎn)品的規(guī)范性和一致性

雖然產(chǎn)品的規(guī)范性和一致性在UI視覺樣式上體現(xiàn)的最為直觀，但在純粹的頁面布局中設(shè)計方案中，我們?nèi)匀恍枰伎籍a(chǎn)品的規(guī)范性和一致性，這主要表現(xiàn)在產(chǎn)品信息結(jié)構(gòu)以及通用組件使用規(guī)范等方面，即產(chǎn)品中邏輯結(jié)構(gòu)類似的功能或頁面需要使用相同或近似的布局設(shè)計方案，這樣可以保證產(chǎn)品形象和用戶體驗的一致性，同時降低用戶的產(chǎn)品使用成本。




需求設(shè)計中，頁面布局是一個非常復(fù)雜的工作，需要考慮的東西非常多，這里所講到的點也僅僅是冰山一角，很多需要根據(jù)具體設(shè)計需求進(jìn)行思考分析的地方就無法此處詳細(xì)的展開敘述了。