如何設(shè)計(jì)頁(yè)面布局

時(shí)間：2023-09-12 10:54:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-12 10:54:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

如何設(shè)計(jì)頁(yè)面布局：

回顧：

如何設(shè)計(jì)信息架構(gòu)：如何成為一個(gè)合格的交互設(shè)計(jì)師（五）
如何設(shè)計(jì)任務(wù)流和頁(yè)面流：如何成為一個(gè)合格的交互設(shè)計(jì)師（六）

假如覺(jué)得有所受益，歡迎關(guān)注我的專欄《成為一個(gè)交互設(shè)計(jì)師》




完成了信息架構(gòu)設(shè)計(jì)、任務(wù)流/頁(yè)面流設(shè)計(jì)后，便要開(kāi)始設(shè)計(jì)頁(yè)面排版布局，在開(kāi)始學(xué)習(xí)方法論之前，我們需要先了解一個(gè)概念——交互優(yōu)先級(jí)

交互優(yōu)先級(jí)

交互優(yōu)先級(jí)有以下7個(gè)需要考慮的維度：

①靈活度與復(fù)雜度

靈活度與復(fù)雜度成反比關(guān)系，產(chǎn)品功能越靈活，意味著復(fù)雜度越高，用戶的學(xué)習(xí)成本和操作成本相應(yīng)增加。例：PS等專業(yè)處理軟件和美圖秀秀




②效率

效率分兩方面：

1）步驟（即點(diǎn)擊次數(shù)）

對(duì)于互聯(lián)網(wǎng)產(chǎn)品來(lái)講，都遵從漏斗模型，每一次點(diǎn)擊和跳轉(zhuǎn)，都意味著流失一部分用戶。那是不是意味著步驟越少越好？例：下圖的軟件中的所有功能都展示出來(lái)，可以一步到位，但好用嗎？

顯然，步驟的數(shù)量并不是絕對(duì)的衡量標(biāo)準(zhǔn)，核心是用戶的認(rèn)知成本和決策成本。




2）距離與大小

費(fèi)茨定律：移動(dòng)到目標(biāo)的時(shí)間與目標(biāo)大小成反比，與目標(biāo)距離成正比。

增大與主要任務(wù)相關(guān)的元素，減小相關(guān)性操作的元素距離，提高優(yōu)先級(jí)，可以幫助用戶認(rèn)知和決策。

錨定作用：位于屏幕邊緣的元素，用戶更容易點(diǎn)擊到。

操作舒適區(qū)：




③頻率

任務(wù)有高頻和低頻之分，為高頻任務(wù)盡可能提供快的支持；低頻任務(wù)考慮需要隱藏和弱化，但要做到易學(xué)易記。例：iOS的控制中心，低頻，但用戶需要時(shí)可以隨時(shí)提供；iOS的設(shè)置，位置固定，幫助用戶記憶冗雜的選項(xiàng)：




④轉(zhuǎn)化率

交互優(yōu)先級(jí)提現(xiàn)在數(shù)據(jù)上，就是每一步驟的轉(zhuǎn)化率。做到高頻任務(wù)的每一步驟也是高轉(zhuǎn)化。




⑤引導(dǎo)使用

對(duì)于主推的功能，可以通過(guò)提高交互優(yōu)先級(jí)引導(dǎo)用戶使用。




⑥習(xí)慣

需要從用戶習(xí)慣和行業(yè)慣例這兩個(gè)維度看。

例：支付寶推出社交列表時(shí)，被用戶吐槽抄襲微信。但在當(dāng)時(shí)這是最好的方案，微信已經(jīng)培養(yǎng)了中國(guó)幾乎所有移動(dòng)互聯(lián)網(wǎng)用戶的使用習(xí)慣，這種方案不一定是最好的，但是最合適的，極大地降低了用戶的學(xué)習(xí)成本。

當(dāng)想要顛覆用戶習(xí)慣和行業(yè)習(xí)慣時(shí)，回答三個(gè)問(wèn)題：

1）衡量不遵循用戶習(xí)慣的改變所帶來(lái)的好處是否能夠cover掉學(xué)習(xí)的成本。（包括改變的實(shí)際成本和心理成本）

2）衡量新老用戶的比例。違背用戶習(xí)慣但正確的改動(dòng)造福了新用戶，影響了老用戶。

3）衡量產(chǎn)品在行業(yè)內(nèi)的影響力。如office2007改RibbonUI，如微信在社交領(lǐng)域的地位。

4）衡量行業(yè)標(biāo)準(zhǔn)和慣例。如鍵盤(pán)，盡管不是最符合人體使用習(xí)慣的方案，但延續(xù)至今，已然成為一種絕對(duì)的標(biāo)準(zhǔn)，除非出現(xiàn)里程碑式的創(chuàng)新，不然顛覆的成本無(wú)法承擔(dān)。




⑦階段

交互優(yōu)先級(jí)具有階段性，短期和長(zhǎng)期的重點(diǎn)不同。

例：淘寶起步時(shí)，重點(diǎn)在于獲取更多的賣家和消費(fèi)者；而現(xiàn)在的重點(diǎn)在于完善生態(tài)。




設(shè)計(jì)主線與支線

每個(gè)頁(yè)面都承載著用戶目標(biāo)、產(chǎn)品目標(biāo)和商業(yè)目標(biāo)的矛盾，需要設(shè)計(jì)師去權(quán)衡，做出最優(yōu)的方案。通常，我們將用戶目標(biāo)作為主線任務(wù)，產(chǎn)品目標(biāo)和商業(yè)目標(biāo)作為支線任務(wù)。

定義：大多數(shù)場(chǎng)景下，用戶和產(chǎn)品的目標(biāo)很明確和單一，往往集中在一條主線上，為了用戶體驗(yàn)，應(yīng)該盡量減少支線和噪音。可現(xiàn)實(shí)是我們總會(huì)覺(jué)得有太多好東西希望用戶發(fā)現(xiàn)，太多好功能希望用戶使用（產(chǎn)品目標(biāo)），還要考慮盈利（商業(yè)目標(biāo)），于是會(huì)存在很多支線。

噪音：與主線任務(wù)無(wú)關(guān)的元素。噪音越多，用戶越不容易找到滿足需求的功能和內(nèi)容。

核心問(wèn)題：控制合適的信噪比。

難點(diǎn)在于：1. 主線需要篩選和過(guò)濾出來(lái)；2.克制提供更多選擇的誘惑。

目標(biāo)：合理規(guī)劃用戶在產(chǎn)品中的線路，引導(dǎo)和幫助用戶在主線上完成任務(wù)，同時(shí)在某些場(chǎng)景下適當(dāng)?shù)靥峁┲Ь€，以完成產(chǎn)品目標(biāo)和商業(yè)目標(biāo)。

優(yōu)秀案例：

1. Kindle和閱讀類應(yīng)用。閱讀時(shí)只呈現(xiàn)內(nèi)容，營(yíng)造沉浸式的閱讀體驗(yàn)，需要其他功能時(shí)點(diǎn)擊屏幕，喚起導(dǎo)航和工具面板。
2. 商場(chǎng)規(guī)劃路徑。用戶熟悉后可以直奔目標(biāo)，每隔一段時(shí)間會(huì)重新調(diào)整，在用戶尋找目標(biāo)的過(guò)程中來(lái)滿足商業(yè)目標(biāo)，刺激消費(fèi)。
3. 與主線場(chǎng)景相結(jié)合的廣告或推廣。使用圖片處理應(yīng)用處理完圖片后，推薦圖片分享社區(qū)的產(chǎn)品，非常自然且符合場(chǎng)景，轉(zhuǎn)化率會(huì)更高。

方法論

梳理好交互優(yōu)先級(jí)的7個(gè)維度和頁(yè)面的主支線后，頁(yè)面排版布局的設(shè)計(jì)工作已經(jīng)完成了一半。接下來(lái)，只需要按照既定的方法完成：

1. 確定頁(yè)面的主線與支線
2. 使用卡片分類法確定頁(yè)面信息元素的分類
3. 根據(jù)主線與支線，使用各類技巧(下文講解)對(duì)組塊進(jìn)行排版布局
4. 頁(yè)面排版的設(shè)計(jì)驗(yàn)證

頁(yè)面排版布局的技巧

• 利用視覺(jué)引導(dǎo)：根據(jù)大量的眼動(dòng)研究，人的閱讀視線軌跡呈F型，重要的東西要放在左上角。

• 對(duì)角線法則

• 弱化或隱藏

• 刪除不必要的信息

設(shè)計(jì)驗(yàn)證

交互設(shè)計(jì)階段，無(wú)法通過(guò)灰度測(cè)試、嚴(yán)格控制變量的線上A/B等正規(guī)的測(cè)試方法驗(yàn)證原型。那么是否必須等到上線后才能驗(yàn)證？顯然不是。隨著項(xiàng)目的推進(jìn)，走到視覺(jué)、開(kāi)發(fā)等步驟，修改成本會(huì)隨之增大。能夠在交互設(shè)計(jì)階段提前暴露問(wèn)題，節(jié)省試錯(cuò)成本，對(duì)項(xiàng)目的成功意義巨大。

粗暴的用戶測(cè)試

1. 不拘泥于形勢(shì)的原型
2. 有針對(duì)性抓取同事或朋友進(jìn)行測(cè)試
3. 可以任務(wù)走查，也可A/B測(cè)試
4. 獲取測(cè)試結(jié)果后快速優(yōu)化

可以使用以下方式進(jìn)行驗(yàn)證：

• 紙上原型：如果覺(jué)得紙面原型難以直觀表達(dá)交互效果，可以使用POP - Prototyping on Paper 這款app，將紙面原型拍下來(lái)，放到應(yīng)用中，可以選取特定區(qū)域添加手勢(shì)和鏈接。如此，設(shè)計(jì)師便不用費(fèi)勁解釋頁(yè)面之間的邏輯關(guān)系了。

• 墨刀（MockingBot）：墨刀具有非常強(qiáng)大的控件庫(kù)和鏈接功能，現(xiàn)已支持導(dǎo)入Sketch文件，非常便利。

• 甚至拿著沒(méi)有任何鏈接說(shuō)明的紙上原型，拉到一個(gè)人就可以做用戶訪談，往往會(huì)有意外的收獲。

這里，就紙面原型稍微展開(kāi)聊聊。

紙面原型的目的不是為了交付，而是為了溝通、測(cè)試，盡快解決那些不確定的問(wèn)題。

紙面原型可以看做是最終設(shè)計(jì)方案的雛形，最需要關(guān)注的是框架、流程、基本功能和內(nèi)容，切不可過(guò)早陷入設(shè)計(jì)細(xì)節(jié)的糾結(jié)中去。在前面的專欄文章中，已經(jīng)對(duì)需求、任務(wù)、信息架構(gòu)、操作等都有了分析，紙面原型的目的就是把這些內(nèi)容串聯(lián)起來(lái)并準(zhǔn)確無(wú)誤地表達(dá)出來(lái)。

如果想表達(dá)出交互效果，可以用便簽貼和小卡片，可以當(dāng)做提示氣泡、彈出層、模態(tài)窗口等。

回顧

今天我們講述了如何設(shè)計(jì)頁(yè)面排版布局：

1. 了解了交互優(yōu)先級(jí)的概念和7個(gè)維度（靈活度與復(fù)雜度，效率，頻率，轉(zhuǎn)化率，引導(dǎo)使用，階段，習(xí)慣）
2. 如何設(shè)計(jì)主支線
3. 設(shè)計(jì)頁(yè)面排版布局的方法論
4. 頁(yè)面排版布局的技巧
5. 如何進(jìn)行原型的設(shè)計(jì)驗(yàn)證，其中特別推崇運(yùn)用紙面原型，盡早測(cè)試設(shè)計(jì)效果

假如覺(jué)得有所受益，歡迎關(guān)注我的專欄《成為一個(gè)交互設(shè)計(jì)師》