在UI設(shè)計(jì)中如何構(gòu)建界面設(shè)計(jì)框架？本文從用戶需求、業(yè)務(wù)目標(biāo)、媒介屬性、競品設(shè)計(jì)4個部分，幫你掌握這個用戶體驗(yàn)設(shè)計(jì)的知識點(diǎn)。

如何構(gòu)建界面設(shè)計(jì)框架？

一個界面的框架究竟是如何設(shè)計(jì)出來的呢？我們可以從 4 個維度來尋找答案：

圖 1 界面框架的構(gòu)建邏輯

分別是用戶需求，業(yè)務(wù)目標(biāo)，媒介屬性和競品設(shè)計(jì)。

為什么是這四個維度呢？我相信大家對用戶需求和業(yè)務(wù)目標(biāo)都沒什么疑問，因?yàn)檫@是產(chǎn)品體驗(yàn)設(shè)計(jì)的基石，我們整體產(chǎn)品設(shè)計(jì)目標(biāo)就是想通過滿足用戶需求，來助力業(yè)務(wù)目標(biāo)的達(dá)成。

圖 2 各目標(biāo)之間的關(guān)系

那為什么要考慮媒介屬性呢？因?yàn)椴煌拿浇?，形態(tài)不同，可供性和系統(tǒng)規(guī)范也大相徑庭。每個在其生態(tài)上產(chǎn)品，都需要遵守其基本的規(guī)則，才既符合平臺上架的標(biāo)準(zhǔn)，也符合用戶對平臺上產(chǎn)品的使用預(yù)期。這也是為什么我們前期會花那么多時間來講解 iOS 和 Material design 的系統(tǒng)規(guī)范，就是為了讓大家了解基礎(chǔ)的界面元素和布局規(guī)則，準(zhǔn)備好產(chǎn)品設(shè)計(jì)的材料和秘方。

最后是頭部競品設(shè)計(jì)，細(xì)分到某個具體品類的產(chǎn)品，頭部競品會塑造用戶對該品類產(chǎn)品的認(rèn)知和習(xí)慣，作為后來者，有必要了解并借鑒頭部競品的一些設(shè)計(jì)模式，以順應(yīng)用戶的心智模型，減少用戶的操作成本，所以競品設(shè)計(jì)也是設(shè)計(jì)師需要提前進(jìn)行分析的。

下面我們以瀏覽器首頁框架設(shè)計(jì)為例，為大家講解界面框架的構(gòu)建邏輯。

1. 用戶需求

關(guān)于用戶需求，我們可以通過用戶調(diào)研這種偏用戶主觀的方式進(jìn)行獲取，并結(jié)合后臺數(shù)據(jù)——用戶真實(shí)行為數(shù)據(jù)進(jìn)行驗(yàn)證，來確定用戶的需求。

以瀏覽器首頁為例，我們通過問卷調(diào)研，這種定量的調(diào)研方式，了解用戶主觀上挑選瀏覽器的驅(qū)動因素，其中代表功能需求的依次是：搜索、網(wǎng)頁瀏覽、信息流、視頻、小說。（不同頁面調(diào)研的問題需要有針對性的設(shè)計(jì)，首頁作為產(chǎn)品的初始界面，可以以 App 的整體的選擇驅(qū)動為參考）

圖 3 主觀和客觀的用戶需求

再看看后臺客觀數(shù)據(jù)——瀏覽器首頁的功能轉(zhuǎn)化率數(shù)據(jù)，從高到低依次是：信息流、搜索、名站、提示、天氣、二樓小程序。

對比主客觀數(shù)據(jù)，如果數(shù)據(jù)一致，說明產(chǎn)品設(shè)計(jì)大概率是符合用戶心智模型和業(yè)務(wù)預(yù)期的。如果主觀和客觀數(shù)據(jù)有偏差，一方面要審視產(chǎn)品設(shè)計(jì)是否有問題導(dǎo)致用戶轉(zhuǎn)化率低，另一方面也要挖掘是否用戶言行有偏差導(dǎo)致預(yù)期數(shù)據(jù)虛高。

結(jié)合瀏覽器的這個案例，大家可以先想一想，二者的數(shù)據(jù)差異（用戶認(rèn)為搜索是核心驅(qū)動，但實(shí)際信息流的日活更高）代表什么呢？

我的理解是：用戶使用瀏覽器的核心驅(qū)動是搜索+網(wǎng)頁瀏覽體驗(yàn)，結(jié)合福格行為模型 B=MAP。用戶使用瀏覽器的搜索動機(jī) M 非常強(qiáng)，搜索功能和網(wǎng)頁體驗(yàn)是瀏覽器的核心基礎(chǔ)，很容易形成用戶心智（主觀認(rèn)知），所以必須在產(chǎn)品設(shè)計(jì)上加以強(qiáng)化和優(yōu)化，以穩(wěn)固用戶使用瀏覽器的核心驅(qū)動心智。其次，信息流雖然在用戶認(rèn)知中排名相對靠后，但卻是轉(zhuǎn)化最高的功能，說明信息流的觸發(fā)性 P 極強(qiáng)（本來無主動訴求（動機(jī)），因提示而激發(fā)）加上對用戶能力要求 A 極低，所以就形成了非常高的轉(zhuǎn)化率數(shù)據(jù)（但有可能并未進(jìn)入用戶的心智）。所以在保障搜索體驗(yàn)的前提下，要盡可能的提升信息流的展示空間和內(nèi)容吸引力，提升信息流的使用心智，進(jìn)而給業(yè)務(wù)帶來更多的收益。

2. 業(yè)務(wù)目標(biāo)

瀏覽器作為 vivo 手機(jī)上最重要的一個互聯(lián)網(wǎng)產(chǎn)品之一，其核心的業(yè)務(wù)目標(biāo)就是盈利，通過提供優(yōu)質(zhì)的搜索+內(nèi)容服務(wù)，帶來更高的日活和時長（廣告收益），助力 vivo 手機(jī)業(yè)務(wù)的發(fā)展。

為了便于理解，我就將瀏覽器的業(yè)務(wù)目標(biāo)實(shí)現(xiàn)簡單的以搜索和信息流來達(dá)成，回到我們之前的目標(biāo)拆解公式：

圖 4 業(yè)務(wù)目標(biāo)的拆解

總目標(biāo)=目標(biāo) 1(A1 * X1%)+目標(biāo) 2(A2 * X2%)+……+目標(biāo)N(An * Xn%)

我們可以這么簡單拆解：（數(shù)值非真實(shí)，僅作案例參考）

瀏覽器總營收=瀏覽器日活 1 億*搜索點(diǎn)擊 50%*搜索完成 90%*1 元廣告收益*2 次人均搜索+瀏覽器日活 1 億*信息流轉(zhuǎn)化 60%*0.1 元信息流廣告/10 分*40 分鐘。

從中可以看出，作為設(shè)計(jì)師，我們可以發(fā)力的主要集中在搜索/信息流入口的轉(zhuǎn)化率、搜索的完成率以及信息流的連續(xù)消費(fèi)上，在后續(xù)界面及流程設(shè)計(jì)中，我們可以圍繞這幾點(diǎn)展開設(shè)計(jì)。

3. 媒介屬性

在任何媒介上設(shè)計(jì)產(chǎn)品，我們都需要了解媒介的硬件和軟件特性。因?yàn)槊浇榈男螒B(tài)和可供性會影響并塑造人們的認(rèn)知和行為。

圖 5 不同媒介的形態(tài)

比如電視、電腦、平板和手機(jī)，硬件不同，人們與之交互的方式也大相徑庭。

電視：大屏幕（32~86 英寸），距離遠(yuǎn)（2.5~5 米），多用遙控器交互，；

電腦：中型屏幕（13~38 英寸），距離中（50~70 厘米），多用鍵鼠交互；

平板：中小屏幕（8~12 英寸），距離較近（40~60 厘米），多用手勢交互；

手機(jī)：小屏幕（4~7 英寸），距離近（32~50 厘米），多用拇指交互；

今天我們就重點(diǎn)以手機(jī)為例，為大家講講手機(jī)媒介的特性和拇指交互的特點(diǎn)。

2013 年，Steven Hoober 和其他一些研究員，對人們在街上、機(jī)場、公共汽車站、咖啡館、火車和公共汽車上使用移動設(shè)備進(jìn)行了 1,333 次觀察。發(fā)現(xiàn)當(dāng)人們在手機(jī)上進(jìn)行操作時：

圖 6 有操作時的 3 種持機(jī)手勢

有 49%的情況是單手操作，有 36%的情況是一手持機(jī)，另一只手的拇指或食指進(jìn)行操作，有 15%的情況是雙手持機(jī)并雙手操作。綜合來看，人們用拇指交互的比例達(dá)到了 75%（49%+26%），所以我們?nèi)粘５幕硬僮鞯牟季旨盁釁^(qū)設(shè)計(jì)，需要盡可能的滿足拇指的可操作范圍和精度范圍。

我們具體看一下不同持機(jī)手勢的操作熱區(qū)分布：

圖 7 不同持機(jī)手勢的操作熱區(qū)

從中可以看出，單手持機(jī)的交互盲區(qū)相比雙手持機(jī)會更加顯著。再進(jìn)一步，我們來看一下單手持機(jī)時，左右手持機(jī)交互熱區(qū)的分布：

圖 8 不同持機(jī)手勢的操作熱區(qū)

給大家補(bǔ)充一個容易犯錯的知識點(diǎn)：在生活中，右撇子的用戶占比約 87%，但調(diào)研中偏向于右手持機(jī)并操作的用戶僅占 28%。

圖 9 左右手習(xí)慣調(diào)研

調(diào)研給出的原因是，多數(shù)用戶會選擇左手持機(jī)，以便讓靈活的右手做更復(fù)雜的操作，比如吃飯等。其次是因?yàn)槎鄶?shù)人是以左眼為主視眼的，左手持握會更方便左眼看手機(jī)。

坦白講，我對這個數(shù)據(jù)是有些質(zhì)疑的，但不管左手持機(jī)會不會翻轉(zhuǎn)，都提示我們設(shè)計(jì)師：要兼顧用戶左右手持機(jī)的習(xí)慣設(shè)計(jì)去設(shè)計(jì)頁面框架，盡可能保證用戶高頻操作處于綠色熱區(qū)內(nèi)。

給大家舉個視頻的例子：

圖 10 左右持機(jī)操作按鈕布局變化

夸克視頻檢測到用戶不同手持機(jī)時，會改變中間常用功能的位置：右手持機(jī)按鈕在右側(cè)，左手持機(jī)按鈕在左側(cè)，以方便拇指操作。

再回到 OS 系統(tǒng)特性，我們需要了解 ios 和 andROId 的布局規(guī)范，去順應(yīng)不同系統(tǒng)下的界面框架布局：

圖 11 不同系統(tǒng)的頁面框架

基于 OS 的系統(tǒng)框架，我建議采用標(biāo)準(zhǔn)組件布局時，盡量使用其標(biāo)準(zhǔn)位置（可以與硬件的布局及熱區(qū)相匹配），把更多精力聚焦在內(nèi)容區(qū)，去思考用戶需求和業(yè)務(wù)目標(biāo)的內(nèi)容框架布局，這方面競品設(shè)計(jì)可以給我們一些參考。

4. 競品設(shè)計(jì)

從平臺特性中吸取平臺系統(tǒng)的產(chǎn)品設(shè)計(jì)框架，再從競品中了解競品內(nèi)容區(qū)的設(shè)計(jì)框架，可以幫助我們初步構(gòu)建好界面框架。以瀏覽器為例，我們選擇了幾大廠商和 3 個頭部的第三方瀏覽器作為參考：

圖 12 瀏覽器核心競品頁面

我們把這幾個產(chǎn)品的框架進(jìn)行梳理可以得到下圖：

圖 13 瀏覽器核心競品頁面框架

由此可以歸納出主流競品的頁面框架從上到下依次是：天氣+運(yùn)營位、搜索框、名站、信息流、導(dǎo)航欄。這是宏觀的功能框架布局。如果我們的需求里包含的就是這幾大模塊，那可以延續(xù)這幾大模塊的布局順序。

那進(jìn)入到微觀層面，明確每一個模塊對用戶的意義，對業(yè)務(wù)的價值，這里一定更要結(jié)合第一二步的分析結(jié)論，幫助我們判斷：每一個模塊在首頁中應(yīng)該占據(jù)什么樣的位置，起到什么樣的作用，應(yīng)該占用多大的視覺空間，多強(qiáng)的視覺焦點(diǎn)。

以 vivo 瀏覽器的首頁設(shè)計(jì)為例：最核心的功能是搜索+信息流，所以需要保證搜索功能的可見性（位置延續(xù)搜索框的頂部一致性認(rèn)知）和操作的便捷性（適當(dāng)往下且增加搜索欄的高度），并盡可能為為信息流騰出更多的展示空間（縮減名站的個數(shù)和高度，強(qiáng)化信息流的視覺樣式）

PS：因?yàn)闉g覽器新版首頁還未上線，所以暫時就不給大家展示新設(shè)計(jì)了。希望通過這個案例，可以讓大家對如何進(jìn)行界面框架設(shè)計(jì)有清楚的認(rèn)識。

作者：悅姐聊設(shè)計(jì)