起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何構建界面設計框架？4個維度幫你找到答案
編輯導語：如何理解和搭建界面設計框架？在構建界面設計框架時，產品設計師除了需要考慮到用戶需求和用戶的使用體驗，還需要將競品設計、媒介屬性等方面也納入考慮。本篇文章里，作者對搭建界面設計框架的幾個維度做了總結，一起來看看吧。
講完需求分析、設計策略、信息架構等概念，終于到了可見的交互設計產物：界面框架。那一個界面的框架究竟是如何設計出來的呢？我們可以從4個維度來尋找答案：
▲圖1 界面框架的構建邏輯
分別是用戶需求、業務目標、媒介屬性和競品設計。
為什么是這四個維度呢？我相信大家對用戶需求和業務目標都沒什么疑問，因為這是產品體驗設計的基石，我們整體產品設計目標就是想通過滿足用戶需求，來助力業務目標的達成。
▲圖2各目標之間的關系
那為什么要考慮媒介屬性呢？因為不同的媒介，形態不同，可供性和系統規范也大相徑庭。
每個在其生態上產品，都需要遵守其基本的規則，才既符合平臺上架的標準，也符合用戶對平臺上產品的使用預期。
最后是頭部競品設計，細分到某個具體品類的產品，頭部競品會塑造用戶對該品類產品的認知和習慣，作為后來者，有必要了解并借鑒頭部競品的一些設計模式，以順應用戶的心智模型，減少用戶的操作成本，所以競品設計也是設計師需要提前進行分析的。
下面我們以瀏覽器首頁框架設計為例，為大家講解界面框架的構建邏輯。
一、用戶需求
關于用戶需求，我們可以通過用戶調研這種偏用戶主觀的方式進行獲取，并結合后臺數據——用戶真實行為數據進行驗證，來確定用戶的需求。
以瀏覽器首頁為例，我們通過問卷調研，這種定量的調研方式，了解用戶主觀上挑選瀏覽器的驅動因素，其中代表功能需求的依次是：搜索、網頁瀏覽、信息流、視頻、小說（不同頁面調研的問題需要有針對性的設計，首頁作為產品的初始界面，可以以APP的整體的選擇驅動為參考）。
▲圖3主觀和客觀的用戶需求
再看看后臺客觀數據——瀏覽器首頁的功能轉化率數據，從高到低依次是：信息流、搜索、名站、提示、天氣、二樓小程序。
對比主客觀數據，如果數據一致，說明產品設計大概率是符合用戶心智模型和業務預期的。如果主觀和客觀數據有偏差，一方面要審視產品設計是否有問題導致用戶轉化率低，另一方面也要挖掘是否用戶言行有偏差導致預期數據虛高。
結合瀏覽器的這個案例，大家可以先想一想，二者的數據差異（用戶認為搜索是核心驅動，但實際信息流的日活更高）代表什么呢？
我的理解是：用戶使用瀏覽器的核心驅動是搜索+網頁瀏覽體驗，結合福格行為模型B=MAP。
用戶使用瀏覽器的搜索動機M非常強，搜索功能和網頁體驗是瀏覽器的核心基礎，很容易形成用戶心智（主觀認知），所以必須在產品設計上加以強化和優化，以穩固用戶使用瀏覽器的核心驅動心智。
其次，信息流雖然在用戶認知中排名相對靠后，但卻是轉化最高的功能，說明信息流的觸發性P極強（本來無主動訴求（動機），因提示而激發）加上對用戶能力要求A極低，所以就形成了非常高的轉化率數據（但有可能并未進入用戶的心智）。
所以在保障搜索體驗的前提下，要盡可能地提升信息流的展示空間和內容吸引力，提升信息流的使用心智，進而給業務帶來更多的收益。
二、業務目標
瀏覽器作為vivo手機上最重要的一個互聯網產品之一，其核心的業務目標就是盈利，通過提供優質的搜索+內容服務，帶來更高的日活和時長（廣告收益），助力vivo手機業務的發展。
為了便于理解，我就將瀏覽器的業務目標實現簡單的以搜索和信息流來達成，回到我們之前的目標拆解公式：
▲圖4業務目標的拆解
總目標=目標1(A1*X1%)+目標2(A2*X2%)+……+目標N(An*Xn%)
我們可以這么簡單拆解（數值非真實，僅作案例參考）：
瀏覽器總營收=瀏覽器日活1億*搜索點擊50%*搜索完成90%*1元廣告收益*2次人均搜索+瀏覽器日活1億*信息流轉化60%*0.1元信息流廣告/10分*40分鐘。
從中可以看出，作為設計師，我們可以發力的主要集中在搜索/信息流入口的轉化率、搜索的完成率以及信息流的連續消費上，在后續界面及流程設計中，我們可以圍繞這幾點展開設計。
三、媒介屬性
在任何媒介上設計產品，我們都需要了解媒介的硬件和軟件特性。因為媒介的形態和可供性會影響并塑造人們的認知和行為。
▲圖5不同媒介的形態
比如電視、電腦、平板和手機，硬件不同，人們與之交互的方式也大相徑庭。
- 電視：大屏幕（32~86英寸），距離遠（2.5~5米），多用遙控器交互；
- 電腦：中型屏幕（13~38英寸），距離中（50~70厘米），多用鍵鼠交互；
- 平板：中小屏幕（8~12英寸），距離較近（40~60厘米），多用手勢交互；
- 手機：小屏幕（4~7英寸），距離近（32~50厘米），多用拇指交互。
今天我們就重點以手機為例，為大家講講手機媒介的特性和拇指交互的特點。
2013年，Steven Hoober和其他一些研究員，對人們在街上、機場、公共汽車站、咖啡館、火車和公共汽車上使用移動設備進行了 1,333 次觀察。發現當人們在手機上進行操作時：
▲圖6有操作時的3種持機手勢
有49%的情況是單手操作，有36%的情況是一手持機，另一只手的拇指或食指進行操作，有15%的情況是雙手持機并雙手操作。綜合來看，人們用拇指交互的比例達到了75%（49%+26%），所以我們日常的互動操作的布局及熱區設計，需要盡可能的滿足拇指的可操作范圍和精度范圍。
我們具體看一下不同持機手勢的操作熱區分布：
▲圖7不同持機手勢的操作熱區
從中可以看出，單手持機的交互盲區相比雙手持機會更加顯著。再進一步，我們來看一下單手持機時，左右手持機交互熱區的分布：
▲圖8不同持機手勢的操作熱區
給大家補充一個容易犯錯的知識點：在生活中，右利手的用戶占比約87%，但調研中偏向于右手持機并操作的用戶僅占28%。
▲圖9左右手習慣調研
調研給出的原因是，多數用戶會選擇左手持機，以便讓靈活的右手做更復雜的操作，比如吃飯等。其次是因為多數人是以左眼為主視眼的，左手持握會更方便左眼看手機。
坦白講，我對這個數據是有些質疑的，但不管左手持機會不會翻轉，都提示我們設計師：要兼顧用戶左右手持機的習慣設計去設計頁面框架，盡可能保證用戶高頻操作處于綠色熱區內。
給大家舉個視頻的例子：
▲圖10左右持機操作按鈕布局變化
夸克視頻檢測到用戶不同手持機時，會改變中間常用功能的位置：右手持機按鈕在右側，左手持機按鈕在左側，以方便拇指操作。
再回到OS系統特性，我們需要了解ios和android的布局規范，去順應不同系統下的界面框架布局：
▲圖11 不同系統的頁面框架
這個之前在《ios人際界面指南》和《Material Design 3》中講得比較多，這里就不再贅述，感興趣的小伙伴可以查看（現在ios和material design上的界面框架布局已趨于一致，大家可靈活使用）。
基于OS的系統框架，我建議采用標準組件布局時，盡量使用其標準位置（可以與硬件的布局及熱區相匹配），把更多精力聚焦在內容區，去思考用戶需求和業務目標的內容框架布局，這方面競品設計可以給我們一些參考。
四、競品設計
從平臺特性中吸取平臺系統的產品設計框架，再從競品中了解競品內容區的設計框架，可以幫助我們初步構建好界面框架。以瀏覽器為例，我們選擇了幾大廠商和3個頭部的第三方瀏覽器作為參考：
▲圖12瀏覽器核心競品頁面
我們把這幾個產品的框架進行梳理可以得到下圖：
▲圖13瀏覽器核心競品頁面框架
由此可以歸納出主流競品的頁面框架從上到下依次是：天氣+運營位、搜索框、名站、信息流、導航欄。這是宏觀的功能框架布局。如果我們的需求里包含的就是這幾大模塊，那可以延續這幾大模塊的布局順序。
那進入到微觀層面，明確每一個模塊對用戶的意義，對業務的價值，這里一定更要結合第一二步的分析結論，幫助我們判斷：每一個模塊在首頁中應該占據什么樣的位置，起到什么樣的作用，應該占用多大的視覺空間，多強的視覺焦點。
以vivo瀏覽器的首頁設計為例：最核心的功能是搜索+信息流，所以需要保證搜索功能的可見性（位置延續搜索框的頂部一致性認知）和操作的便捷性（適當往下且增加搜索欄的高度），并盡可能為為信息流騰出更多的展示空間（縮減名站的個數和高度，強化信息流的視覺樣式）。
PS：因為瀏覽器新版首頁還未上線，所以暫時就不給大家展示新設計了。希望通過這個案例，可以讓大家對如何進行界面框架設計有清楚的認識。
#專欄作家#
悅有所思，人人都是產品經理專欄作家。10年體驗設計經驗，崇尚理論指導實踐，實踐迭代理論，熱衷于學習、解構、建構、傳播交互設計、服務設計、行為設計等設計相關領域知識。
本文原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議。
- 目前還沒評論，等你發揮！
