編輯導語:如何理解和搭建界面設計框架?在構建界面設計框架時,産品設計師除了需要考慮到用戶需求和用戶的使用體驗,還需要将競品設計、媒介屬性等方面也納入考慮。本篇文章裡,作者對搭建界面設計框架的幾個維度做了總結,一起來看看吧。
講完需求分析、設計策略、信息架構等概念,終于到了可見的交互設計産物:界面框架。那一個界面的框架究竟是如何設計出來的呢?我們可以從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 協議。
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!