2019-8-29 資深UI設(shè)計者
原型的不同階段,含義和作用也各不相同,更加認(rèn)清了原型在工作中的用途,希望對各位也有所幫助~
不知你有沒有這樣的經(jīng)歷:為了不讓原型看起來丑,會糾結(jié)各種細(xì)節(jié)處理(間距、大?。?,結(jié)果造成工作周期延長,精力損失;為了讓原型接近于真實效果,會思考各種精致布局,結(jié)果leader來一句‘你現(xiàn)在做這么好看干嘛,這個功能都沒確定好’....在各種階段畫出了不合適的原型。
所以今天想聊聊‘交互原型’這一話題,也算是對自己成長的一個總結(jié)和沉淀。
文章目錄:
·原型的不同階段
·原型與用戶體驗的5個層面
·原型產(chǎn)出的原則
Part1:原型的不同階段
其實我覺得畫原型和做設(shè)計的理念是一樣的:沒有好壞,只有是否合適~
當(dāng)產(chǎn)品經(jīng)理/交互設(shè)計師沒認(rèn)清當(dāng)前的需求階段時,無論你畫的好不好看,都會出現(xiàn)一些糟糕的現(xiàn)象:一開始就注重細(xì)節(jié)處理、在原型需要重點輸出時,又忽略功能與邏輯上的思考、在功能未確定時追求精致頁面效果...
下面是我對‘原型’的理解,所繪制用于表示不同階段下的需求特征。
01.想法階段:
在產(chǎn)品需求的初始階段,功能概念都比較模糊,大部分想法都停留在腦海和口述上(工作中典型的場景,如團(tuán)隊風(fēng)暴、需求討論、會議評審)。需要我們不停地理清概念想法,驗證需求的合理性、目標(biāo)是否正確。
所以這個階段的強(qiáng)調(diào)是:產(chǎn)品雛形 - 將我們的想法、概念需求可視化出來,并加以討論驗證。因此,最合適的方式就是用‘草圖’表達(dá),快速產(chǎn)出快速修改,能即時看見產(chǎn)品的雛形。
常用‘草圖’勾勒產(chǎn)品雛形,除了可以表達(dá)想法、探索方向外,好處還在于:
a. 能提升你快速思考、驗證假設(shè)、優(yōu)化設(shè)計流程的能力。
b. 能展示你思考問題的過程(設(shè)計思維),體現(xiàn)專業(yè)能力。
02.修改階段:
這階段的產(chǎn)品目標(biāo)和方向較為清晰,接下來需要優(yōu)化原有的概念想法,為產(chǎn)品創(chuàng)建一個信息架構(gòu)、梳理功能邏輯等工作,方便在需求評審會、團(tuán)隊討論中推動產(chǎn)品功能的進(jìn)展。
該階段強(qiáng)調(diào):理清目標(biāo) - 根據(jù)用戶訴求、業(yè)務(wù)目標(biāo)、運營需要等不同目標(biāo)點,逐步梳理出原型上需要展示哪些功能內(nèi)容(界面布局、信息取舍)。
所以對產(chǎn)品經(jīng)理/交互設(shè)計師來說,只需產(chǎn)出一個大體上看得明白、能理清產(chǎn)品功能的‘中保真原型’即可。方便即時修改,向產(chǎn)品定型/高保真原型過渡。
03.確定階段:
到了這個階段,產(chǎn)品需求的功能布局、信息設(shè)計已全部確定,這時一份全面、嚴(yán)謹(jǐn)?shù)?strong>‘高保真原型’就尤為重要。
一方面可以為視覺同事的UI輸出、開發(fā)的落地實現(xiàn)等提供依據(jù)。另一方面在各種工作場景中,高保真原型都能發(fā)揮很大的作用,如交互評審、領(lǐng)導(dǎo)過稿、A/Btest、demo演示等等。
這一階段強(qiáng)調(diào):細(xì)節(jié)核對 - 因為關(guān)系著UI輸出、界面實現(xiàn)等工作,所以需要注意各種交互細(xì)節(jié),以防出現(xiàn)設(shè)計、流程上的漏洞。
有2個核對緯度上的檢查:
a. 規(guī)范對齊
若團(tuán)隊內(nèi)部有設(shè)計規(guī)范時,一定要對齊字體大小、顏色、布局、間距等視覺元素。且能復(fù)用已有樣式就盡量復(fù)用,避免出現(xiàn)“一個功能,兩種樣式”的情況,如圖:
b. 交互走查
高保真原型輸出后,需要根據(jù)交互自查表,一一梳理原型說明是否存在漏洞,以防出現(xiàn)異常流程和內(nèi)容狀態(tài)。
另外,當(dāng)你想要獲得用戶反饋、測試你的想法是否為業(yè)務(wù)/用戶創(chuàng)造價值時,盡量使用高保真原型。原因在于:能夠產(chǎn)生真實的操作效果、給用戶帶來‘身臨其境’的瀏覽體驗。
最后總結(jié)一下,不同階段的原型用途:
·草圖:快速表達(dá)想法、驗證需求、展示思考過程。
·中保真原型:梳理大體產(chǎn)品框架,繼續(xù)優(yōu)化功能。
·高保真原型:為UI輸出與開發(fā)實現(xiàn)提供依據(jù)、測試用戶反饋、制作交互demo、向領(lǐng)導(dǎo)過稿等等。
Part2:原型和用戶體驗5個層面
另外我還發(fā)現(xiàn),結(jié)合‘用戶體驗5個層面’來看不同階段的原型,兩者是多么地吻合、有理有據(jù)。
01.戰(zhàn)略層和范圍層 - 草圖
產(chǎn)品想要做什么?如何去滿足戰(zhàn)略目標(biāo)?在構(gòu)思把目標(biāo)和需求轉(zhuǎn)變成功能和內(nèi)容時,用草圖的方式是極為合適的:快速表達(dá)、即時驗證,能讓概念想法馬上‘可視化’出來。
02.結(jié)構(gòu)層 - 中保真原型
想法表達(dá)后,需要為產(chǎn)品構(gòu)思一個具體的框架結(jié)構(gòu),根據(jù)業(yè)務(wù)目標(biāo)和用戶訴求,不斷地修改產(chǎn)品功能、信息設(shè)計,慢慢完成產(chǎn)品的定型。所以這時候只需產(chǎn)出一個大體上看得懂、方便修改的中保真原型即可。
03.框架層 - 高保真原型
這是原型設(shè)計的最后階段,產(chǎn)品關(guān)系已理清、功能內(nèi)容已確定。這階段注重原型的界面細(xì)節(jié)處理,如梳理異常流程、信息的不同狀態(tài)、是否對齊規(guī)范等等,以便后期的界面實現(xiàn),所以一份高保真原型就尤為重要了。
04.表現(xiàn)層 - UI效果圖
原型確定后,接下就是UI優(yōu)化階段了,這時候產(chǎn)品的最終效果也就出來了。產(chǎn)品的下次功能迭代,也是根據(jù)此UI效果圖的基礎(chǔ)上進(jìn)行原型優(yōu)化、修改。
Part3:交互原型的原則
最后簡單說下,原型產(chǎn)出的幾個原則:‘使用灰色圖’和‘復(fù)用已有樣式’,避免在今后工作上踩坑:
01.使用灰色圖
原型就要有原型的樣子,大面積的彩色布局,很容易讓人覺得這是UI效果圖(視覺同事可不背這個鍋),尤其是在交互評審會上,這種細(xì)節(jié)更應(yīng)該注意。
02. 復(fù)用已有樣式
這個上面已經(jīng)說了,能復(fù)用樣式就復(fù)用,避免出現(xiàn)“一個功能 兩種樣式”的情況,否則和視覺、開發(fā)同事對接原型時,會造成一定的理解干擾。
總結(jié):
以上對交互原型的一些見解,若有描述得不當(dāng)請多指教,下面是總結(jié)文件(轉(zhuǎn)發(fā)截圖給我可領(lǐng)?。?。
文章來源:UI中國
藍(lán)藍(lán)設(shè)計的小編 http://paul-jarrel.com