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