全面系統解析產品交互原型設計
在產品設計的過程中,原型設計是將抽象需求轉化為具體界面的關鍵步驟。本文將系統性地解析產品原型設計的基礎知識,探討其在用戶體驗中的重要性。
無論何時、何地,無論是誰,無論在什么地方,都可以用畫圖解決問題。
——《餐巾紙的背面》丹 · 羅姆
產品設計師最有價值的是思考分析和解決問題的能力。丹 · 羅姆 在《餐巾紙的背面》一書提出,畫圖是一種解決問題的視覺化思考方法。同樣,在互聯網數字產品領域,產品設計師也可以通過畫草圖,洞察需求、思考設計策略、探索設計方案,或用于設計表達與溝通。但是,原型設計又并不是簡單地畫草圖,而是將產品需求還原為用戶易理解易使用的界面設計方案,更嚴謹規范,可以體現產品設計師產出設計解決方案的能力,以及設計價值的強有力產出物。
一、原型設計
原型設計,是整個產品設計思考過程最后的關鍵步驟,將抽象的產品需求和設計策略轉化為具象的產品交互原型。本階段對應的是用戶體驗五要素模型中的結構層、框架層和表現層,包括用戶任務流程、信息架構、交互設計、信息設計、導航設計和界面設計等元素細節。
圖 1 用戶體驗五要素模型
設計師做項目,并不是一上來就先畫原型圖,而是要先進行需求分析和設計思考。原型制作,通常只占據設計排期時間的三分之一,更多的時間是用于理解業務需求,洞察分析用戶場景下的痛點 、癢點、爽點,判斷需求真偽,評估需求價值,研究產品和設計策略,尋找產品設計切入點,思考原型方案設計。比如在頭腦風暴階段,用一支筆和一張紙就能把自己的設計策略想法輕松表達出來。一般而言,設計師在對接產品需求時,產品經理會給到一份產品需求文檔(PRD),用于產品需求表達,產品需求文檔中也會提供產品經理出的原型圖,相對比較粗糙,主要是輔助設計師理解產品的功能解決方案。
既然產品經理已經出了原型圖,那么設計師還需要做什么呢?僅僅是幫助產品經理細化場景和優化界面嗎?設計師和產品經理出的原型有什么不同嗎?原型設計方案和設計策略是一回事兒嗎?如何將產品需求和設計策略轉化成簡單易用的界面呢?原型設計如何對齊商業目標、產品目標和用戶目標?設計如何平衡商業價值和用戶體驗?原型應該包含哪些元素?原型設計究竟具體如何體現設計價值?
針對以上問題,本文將重點拆解原型,由淺入深解析原型設計。
二、原型
原型,是我們將抽象的解決策略和前期思考過程,落地轉化為具象界面的結果。具體而言,使產品的原型設計無限接近用戶的心理模型,讓用戶更加有效地完成其操作目的,通過改善用戶體驗的方式提升產品的價值。
整個項目的產品研發團隊,可以通過原型全面了解產品的交互流程和實現的邏輯細節,快速推進項目落地;同時,原型設計方案也是以用戶體驗為基礎,以解決業務問題和用戶問題為核心,以商業目標為終極目標導向的設計,助力業務和產品目標的達成。
三、解構原型
設計師在做原型設計時,首先要明確價值目標以及需要解決目標用戶什么問題,其次是明確設計項目所屬的終端平臺,遵循平臺規范和系統差異。
原型,一般包含結構、框架布局、交互控件、內容和功能信息層次。以 PC 端原型為例,從界面 Z 軸視角看,原型圖自下而上包括系統層、基礎框架層、內容層、遮罩層和反饋層。
圖 2 原型框架和結構拆解(以 PC 端原型為例)
A. 系統層
一般指原型所屬終端系統或平臺規范的結構。例如手機端頂部狀態欄、iOS 端全面屏頂部的靈動島功能和底部 Home 橫線(Home Indicator)、Android 手機端底部物理按鍵,以及微信小程序端標題欄右側固定區域,常駐顯示關閉和更多圖標按鈕等。
圖 3 iPhone 14 Pro 靈動島功能 (圖片來源蘋果官網)
不同平臺,用戶使用習慣也會有細微差異。比如,iOS 端用戶習慣通過左滑列表喚起更多操作,而 Android 端用戶則習慣長按列表喚起操作。使用 macOS 系統蘋果電腦設備的用戶,習慣確認按鈕在右側,取消按鈕在左側,而 Windows 系統用戶卻完全與之相反。
此外,macOS 和 Windows 系統的快捷鍵也存在不同。macOS 存在專屬的 Command 鍵?和 option 鍵?,Command 鍵又稱蘋果鍵(Apple key),一般情況下,Command 鍵等同于 Windows 下的 Ctrl 按鍵,Option 鍵對應的是 Windows 的 Alt 鍵。在 Mac 電腦上按 Option 鍵點擊左上角的系統圖標,原來最上面的“關于本機”命令會切換為“系統信息”,進入后可以查看更詳細的 Mac 信息。Option 選項鍵還可以幫助用戶繞開一些不想要的對話框提示。
Web 端網頁以瀏覽器為載體,用不同的瀏覽器打開網頁,網頁首屏可視高度均不同。根據調研結果顯示,Windows 系統,顯示器在 1024*768 分辨率下,瀏覽器 Chrome 頭部高度是 70px,IE10 是 80px,Firefox 頭部高度是 100px,任務欄高度為 50px,其中 chrome、IE 瀏覽器占比最大,所以網頁首屏可視高度至少為 600px(Chrome:648px,IE:638px,Firefox:608px)。無論是 web 端還是移動端,設計師在設計原型界面時,都需要關注首屏高度,因為需要結合產品目標和用戶體驗,綜合考慮首屏信息的透出。
B. 基礎框架層
框架布局設計,需要綜合考慮產品信息結構的邏輯性、可拓展性和一致性交互體驗,既能滿足業務需求,又能為目標用戶提供良好的用戶體驗,界面容易理解使用,符合用戶使用習慣。
PC 端頁面基礎框架布局,通常有五種布局方案,分別是上下布局、左右布局、T 字布局、響應式布局和自適應布局。也可以根據實際業務的產品特性,基于以上基礎布局延伸出其他的布局方式,通?;A框架會包括頂部導航、左側導航、頁眉、面包屑(頁面訪問路徑)、頁腳、主內容模塊。
圖 4 Web 框架布局 (從左到右分別是 左右布局、上下布局、T 字布局)
1)上下布局
上下布局是最基礎的布局方式之一,通常用于信息展示類的網站。上面是頁眉和頂部導航模塊,下面是主體內容模塊,自上而下,簡潔明快。
但是,由于屏幕尺寸和設備的不同,又可以細分為固定寬度和跟隨屏幕寬度兩種布局。一般而言,固定寬度的布局方式,頁面兩側有足夠的留白,用戶可以更加聚焦于內容。而且,用戶自左向右橫向瀏覽的視覺距離更短,用戶消費內容的效率更高,用戶掃視內容瀏覽體驗更佳,所以更適合信息展示類型的網站。比如知乎、新浪微博、中國四大門戶網、百度搜索等內容展示型的網站,都采用的是固定寬度的上下結構布局方式。
圖 5 上下布局 (固定寬度布局 vs 跟隨屏幕寬度布局)
早期的網頁設計,一般使用的是固定寬度 960 網格系統(960 Grid System)作為設計框架。然而,隨著電腦屏幕尺寸和分辨率逐漸變大,頁面固定寬度的數值也在變化。無論是 macOS 還是 Windows 系統,一般都是以 1440*1024 px 為原型設計畫布尺寸。
根據 gs.statcounter 網站數據表明:2022.5-2023.5,國內桌面端屏幕分辨率尺寸使用情況,排列前五的分別是 1920*1080、1536*864、1366*768、2560*1440、1440*900,為了更好的向上和向下適配,所以通常選擇正好位于中間的尺寸 1440*900 作為通用寬屏網頁設計的畫布尺寸,而 figma 和 sketch 軟件中已經為設計師內置好原型畫布尺寸 1440*1024。
圖 6 2022 年 5 月~2023 年 5 月全球桌面屏幕分辨率統計 數據來源 http://gs.statcounter.com
而跟隨屏幕寬度的布局,使用的場景更適合需要向用戶透傳更多信息和內容曝光,對屏幕寬度的利用率有更高的要求,為大屏設計,打造沉浸式網站體驗。比如,協同辦公等工具類型的產品。
例如,阿里云和金山云等云廠商的官網首頁,即采用了上下布局寬屏設計。界面跟隨屏幕瀏覽器窗口寬度拉伸顯示,可以充分利用電腦橫向寬屏特性展示更多信息,避免縱向頁面過長,導致首屏以下的信息很少被用戶消費到。
圖 7 云廠商首頁
一般而言,用戶在頁面首屏的瀏覽量和停留時長最高,上滑頁面,二屏和三屏以下的瀏覽量會呈現遞減趨勢,所以產品設計師在具體的原型設計時,會更加注重首屏高度,基于產品目標進行設計。例如,淘寶、京東、拼多多等電商產品 App 首頁的界面設計,首頁不像早期那樣有三四屏以上,現在首頁的頁面長度越來越短,而且各業務線為了爭奪首屏的資源位置也更加激烈。歸根究底,還是用戶流量的因素。因為首頁首屏的用戶流量是最高的,越往下,用戶流量相對越少,像漏斗一樣。也正因如此,產品設計師在設計原型方案時,會利用二屏以下的長尾流量展開設計,防止用戶流失,充分利用頁面存量用戶的流量價值。比如,利益點彈框挽留、底部商品 feeds 信息流千人千面推薦、上滑頁面時商品分類固定在頂部等策略。
2)左右布局
左右布局通常左側是全局一級導航菜單,右側為內容主體區域。當頁面橫向空間有限時,左側導航可以收起固定,內容區根據瀏覽器窗口大小進行自適應,可以有效提高界面橫向空間的使用率。
另外,左右布局的優點是左側導航的擴展性更好,導航菜單可以擴展至三級以上,信息層級更加扁平,用戶也可以快速通過側導航定位和切換當前位置,操作效率高。而上下布局,頂部導航一級菜單的拓展性不強,通常會遵循 7 加減 2 法則(不需要絕對遵循,根據具體業務實際場景而定),盡量控制一級菜單數量,盡量縮短并平衡導航菜單的長度數量和菜單分類層級深度,減少用戶選擇,提高導航菜單使用效率。
缺點是導航橫向頁面內容的空間會被側邊欄擠壓一部分,但是可以通過收起側邊導航來解決。左右布局方式,常用于功能層級相對不復雜的應用場景,比如網站后臺系統等等。
例如,微信、QQ 音樂客戶端等,采用的是左右布局方式。左側為全局側邊導航,右側為內容區。左側導航菜單一目了然,有良好的可拓展性,用戶可以更加聚焦音樂內容本身,通過側邊導航菜單切換位置也比較便捷。一般側邊導航操作頻率相對比較高。
圖 8 QQ 音樂客戶端(Mac)
3)T 字布局
“T”型布局是網頁設計中使用最廣泛的一種布局方式,是指同時擁有頂部全局一級導航及側邊二級導航欄的結構,左下方為主菜單,右面顯示內容。優點是頁面結構清晰,主次分明,更適合功能更為復雜的應用型網站,如各國內各云廠商的控制臺。
例如,金山文檔的首頁,屬于 T 字布局方式。頁面頂部結構是全局導航,左下方側邊欄為文件管理器導航類目,右側是文件管理內容區。用戶進入金山文檔首頁,找文檔是剛需之一,也是高頻需求,所以側邊文件目錄導航菜單常駐顯示,便于用戶通過目錄索引方式快速找到文檔。
圖 9 金山文檔首頁-個人賬號
4)響應式布局
圖 10 響應式 vs 自適應
響應式布局可以動態實時適配不同界面尺寸。設計師只要設計一套界面,開發通過一套代碼可以實現不同斷點(指頁面寬度)的界面布局,也因此加載速度比自適應的方式要慢,需要加載一整套的網站代碼。響應式布局具體通常又包含拉伸布局、等比縮放、擴展布局和固定布局四種??梢愿鶕撁鎻碗s程度,混合使用以上四種布局方式。
圖 11 響應式布局
響應式布局,主要是容器適配瀏覽器窗口變化,一般用于內容展示類型的網站。所有設備數據同步,無需單獨維護某個終端網站數據,網站內容維護成本低。通過 JS 及 CSS 的控制,借助 rem、百分比等相對度量單位,在不同尺寸的設備上呈現相同的網頁。
例如 TED 官網,使用了響應式布局。向內縮放瀏覽器窗口,先使用拉伸布局和擴展布局。在達到 pad 端斷點時,頂部導航收起。繼續向內拉伸到手機端斷點時,列表布局由左文本右圖改為單行顯示一個信息卡片。
圖 12 TED 響應式布局
一般網頁斷點數值是 640px、1008px,針對不同設備屏幕大小,設計不同的界面布局。如下圖所示:
圖 13 Windows 不同設備大小和斷點
5)自適應布局
自適應設計是基于斷點使用靜態布局。依據產品對應的用戶群體使用設備分辨率占比情況,設計師需要根據不同終端設備的斷點,設計不同的界面布局和內容呈現方式。一般需同時設計手機端、平板電腦和 PC 端界面,開發要用多套代碼實現不同斷點的界面布局,一般加載速度比響應式布局要快。
比如淘寶網頁版有 PC 端和 m 站,是針對 PC 和手機端采用不同的界面布局設計,寫的是多套代碼,數據是不同步的,網站維護成本高。PC 端采用的是自適應設計,向內縮放窗口達到某斷點后,隱藏左側分類模塊,“猜你喜歡”由原來的一行三列調整為一行二列。
圖 14 淘寶網頁版首頁 – 自適應布局
C. 內容層
內容層,主要是承載核心內容信息、交互控件和信息層次。對應的是用戶體驗五要素中的信息設計、交互設計和視覺表現層設計。例如,列表、表單等。
D. 遮罩層
當用戶瀏覽或操作頁面時,頁面有臨時分支任務,為了減少頁面跳轉,通常會在當前頁面出現模態彈框,用戶更聚焦彈框內容,這時候彈框之下會展示遮罩層。遮罩層顯示與否,需遵循平臺差異和特定業務場景。
比如金山文檔 App,打開輕文檔查看目錄場景設計。用戶通過目錄索引的方式查找文檔內容,目錄和內容是強相關的信息,而且用戶點擊目錄時需要定位核對內容,所以此處隱去了遮罩層,便于用戶在索引目錄的同時,定位查看對應內容。而抖音的提醒發貨場景是一個相對獨立的分支流程,所以底部彈框之下增加了遮罩層,便于用戶聚焦提示信息。
圖 15 金山文檔 &抖音 App (圖片來源產品截圖)
E. 反饋層
當用戶操作頁面時,若有隸屬于該頁面的臨時態任務時,通常會在當前頁面出現模態或非模態的彈出框。一般反饋層包括加載中狀態、全局提示、對話框、底部彈框等。
- 反饋類型,一般包括行為反饋和流程反饋。具體有四種反饋方式,分別是對話框反饋(模態)、全局 toast(非模態)、狀態反饋和頁面反饋。
- 行為反饋,指的是對用戶交互行為的即時性反饋。用戶可以立即看到反饋結果,常用狀態反饋方式提示,比如微信朋友圈點贊和取消點贊的狀態反饋。
- 流程反饋,指的是對用戶的交互操作提供結果反饋。顧名思義,系統需要一定的時間處理用戶交互操作請求,用戶一般不能立即看到反饋結果,通常使用全局反饋 toast 和頁面反饋方式。
對話框反饋,是一種阻斷式提示,用戶可立即看到反饋結果。一般涉及用戶數據丟失,不可撤銷的場景下,需使用模態對話框提示,明確讓用戶進行二次確認。全局 toast 反饋,是一種非阻斷式、輕量化的反饋,反饋主體是操作行為或流程處理,如操作成功、失敗等全局反饋。狀態反饋,是一種輕量化提示,用戶可立即看到反饋結果。頁面反饋,用戶需要對操作的結果進行確認。
圖 16 反饋方式示例
綜上所述,原型一般由系統層、基礎框架層、內容層、遮罩層和反饋層構成。產品經理設計的原型圖(低保真),側重將用戶需求轉化為產品需求(即產品解決方案,包括功能規格和內容需求),具有全局觀,更多思考產品的商業價值和滿足業務需求,不太會糾結于交互方式和體驗細節。而產品設計師產出的原型圖,更接近最終的產品,更側重于產品的結構層和框架層。重點是用戶行為設計和交互邏輯層面,平衡用戶體驗和商業價值,提出更有效的產品策略以及設計解決方案。這是產品經理和產品設計師進行原型設計的不同點。
產品設計師可以根據受眾群體,選擇不同保真程度的原型圖。產品設計師通常面向的受眾群體是產品經理、UI 設計師和研發測試人員,所以一般只要產出中保真交互原型圖即可,以黑白灰的設計稿呈現,但是需要明確體現出功能和信息層級關系。
四、原型認知誤區
很多職場人士認為做設計就是畫原型,這是對產品設計師最大的偏見和誤解。以下是原型認知的常見誤區:
- 設計策略≠原型設計方案。設計策略不是原型設計方案,兩者不能混為一談。前者是想法,后者是用原型圖的方式去實現設計策略和想法。
- 原型設計≠原型制作。原型設計將抽象的設計策略和想法轉化為具象界面的過程和結果,側重于行為設計和信息設計,聚焦的是設計層面。而原型制作,更側重使用具體的設計工具如何繪制出原型。
- 原型不是單一靜態的頁面。原型是動態的流程界面,包括用戶獲取信息或任務的交互路徑設計。
- 原型有低保真、中保真和高保真之分。需要根據受眾群體不同,選擇不同的保真程度原型圖。
原型是交流和表達的工具,在需求溝通環節起到至關重要的作用。產品需求文檔里的低保真原型圖,可以方便產品表達產品需求,減少和設計師之間的溝通和理解成本,但是也會限制設計師做設計。所以,產品設計師在做設計時,需要先進行需求分析和用戶分析,通過一步步拆解去思考設計或產品的解決方案。
專欄作家
誠俊,微信公眾號:UX設計研究所。人人都是產品經理專欄作家,金山軟件交互設計副總監,曾任職騰訊、京東、蘇寧、同程旅行。關注電商、直播、O2O、云計算、企業數字化、協同辦公等領域,擅長產品體驗和增長設計。
本文原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
蘋果為何大賣,它的營銷策略和改進政策值得我們學習