? 原型该画到什么程度? - 蓝蓝设计_UI设计公司

追求卓越一諾千金

藍藍設計,2011年成立,主創清華團隊,專注軟件和互聯網ui設計開發。擅長企業信息化管理、監控、大數據軟件UIUE咨詢和設計開發服務。立足UI,好好學習,天天進步!


原型該畫到什么程度?

2019-8-29 泥人張 交互設計及用戶體驗


原型的不同階段,含義和作用也各不相同,更加認清了原型在工作中的用途,希望對各位也有所幫助~

不知你有沒有這樣的經歷:為了不讓原型看起來丑,會糾結各種細節處理(間距、大小),結果造成工作周期延長,精力損失;為了讓原型接近于真實效果,會思考各種精致布局,結果leader來一句‘你現在做這么好看干嘛,這個功能都沒確定好’....在各種階段畫出了不合適的原型。


所以今天想聊聊‘交互原型’這一話題,也算是對自己成長的一個總結和沉淀。


文章目錄:

·原型的不同階段

·原型與用戶體驗的5個層面

·原型產出的原則

Image title




Part1:原型的不同階段


其實我覺得畫原型和做設計的理念是一樣的:沒有好壞,只有是否合適~

當產品經理/交互設計師沒認清當前的需求階段時,無論你畫的好不好看,都會出現一些糟糕的現象:一開始就注重細節處理、在原型需要重點輸出時,又忽略功能與邏輯上的思考、在功能未確定時追求精致頁面效果...


下面是我對‘原型’的理解,所繪制用于表示不同階段下的需求特征。

Image title




01.想法階段:


在產品需求的初始階段,功能概念都比較模糊,大部分想法都停留在腦海和口述上(工作中典型的場景,如團隊風暴、需求討論、會議評審)。需要我們不停地理清概念想法,驗證需求的合理性、目標是否正確。


所以這個階段的強調是:產品雛形 - 將我們的想法、概念需求可視化出來,并加以討論驗證。因此,最合適的方式就是用‘草圖’表達,快速產出快速修改,能即時看見產品的雛形。

Image title


常用‘草圖’勾勒產品雛形,除了可以表達想法、探索方向外,好處還在于:

a. 能提升你快速思考、驗證假設、優化設計流程的能力。

b. 能展示你思考問題的過程(設計思維),體現專業能力。

Image title



02.修改階段: 


這階段的產品目標和方向較為清晰,接下來需要優化原有的概念想法,為產品創建一個信息架構、梳理功能邏輯等工作,方便在需求評審會、團隊討論中推動產品功能的進展。 


該階段強調:理清目標 - 根據用戶訴求、業務目標、運營需要等不同目標點,逐步梳理出原型上需要展示哪些功能內容(界面布局、信息取舍)。

Image title


所以對產品經理/交互設計師來說,只需產出一個大體上看得明白、能理清產品功能的‘中保真原型’即可。方便即時修改,向產品定型/高保真原型過渡。

Image title



03.確定階段:


到了這個階段,產品需求的功能布局、信息設計已全部確定,這時一份全面、嚴謹的‘高保真原型’就尤為重要。


一方面可以為視覺同事的UI輸出、開發的落地實現等提供依據。另一方面在各種工作場景中,高保真原型都能發揮很大的作用,如交互評審、領導過稿、A/Btest、demo演示等等。

Image title


這一階段強調:細節核對 - 因為關系著UI輸出、界面實現等工作,所以需要注意各種交互細節,以防出現設計、流程上的漏洞。


有2個核對緯度上的檢查:


a. 規范對齊


若團隊內部有設計規范時,一定要對齊字體大小、顏色、布局、間距等視覺元素。且能復用已有樣式就盡量復用,避免出現“一個功能,兩種樣式”的情況,如圖:

Image title


b. 交互走查


高保真原型輸出后,需要根據交互自查表,一一梳理原型說明是否存在漏洞,以防出現異常流程和內容狀態。Image title


另外,當你想要獲得用戶反饋、測試你的想法是否為業務/用戶創造價值時,盡量使用高保真原型。原因在于:能夠產生真實的操作效果、給用戶帶來‘身臨其境’的瀏覽體驗。

Image title

最后總結一下,不同階段的原型用途:


·草圖:快速表達想法、驗證需求、展示思考過程。

·中保真原型:梳理大體產品框架,繼續優化功能。

·高保真原型:為UI輸出與開發實現提供依據、測試用戶反饋、制作交互demo、向領導過稿等等。

Image title





Part2:原型和用戶體驗5個層面


另外我還發現,結合‘用戶體驗5個層面’來看不同階段的原型,兩者是多么地吻合、有理有據。


01。戰略層和范圍層 - 草圖


產品想要做什么?如何去滿足戰略目標?在構思把目標和需求轉變成功能和內容時,用草圖的方式是極為合適的:快速表達、即時驗證,能讓概念想法馬上‘可視化’出來。

Image title



02。結構層 - 中保真原型


想法表達后,需要為產品構思一個具體的框架結構,根據業務目標和用戶訴求,不斷地修改產品功能、信息設計,慢慢完成產品的定型。所以這時候只需產出一個大體上看得懂、方便修改的中保真原型即可。

Image title



03.框架層 - 高保真原型


這是原型設計的最后階段,產品關系已理清、功能內容已確定。這階段注重原型的界面細節處理,如梳理異常流程、信息的不同狀態、是否對齊規范等等,以便后期的界面實現,所以一份高保真原型就尤為重要了。

Image title



04.表現層 - UI效果圖


原型確定后,接下就是UI優化階段了,這時候產品的最終效果也就出來了。產品的下次功能迭代,也是根據此UI效果圖的基礎上進行原型優化、修改。

Image title





Part3:交互原型的原則


最后簡單說下,原型產出的幾個原則:‘使用灰色圖’和‘復用已有樣式’,避免在今后工作上踩坑:


01.使用灰色圖


原型就要有原型的樣子,大面積的彩色布局,很容易讓人覺得這是UI效果圖(視覺同事可不背這個鍋),尤其是在交互評審會上,這種細節更應該注意。



02. 復用已有樣式


這個上面已經說了,能復用樣式就復用,避免出現“一個功能 兩種樣式”的情況,否則和視覺、開發同事對接原型時,會造成一定的理解干擾。



總結:

以上對交互原型的一些見解,若有描述得不當請多指教,下面是總結文件(轉發截圖給我可領取)。

Image title


文章來源:UI中國

標簽: ui設計 原型圖 yuan'xin « el-table + el-form實現可編輯表格字段驗證 | element ui在table中放入input且實現驗證»


藍藍 http://www.thriveonsite.com

訂閱Rss
2019半灰色网赚项目 互联网赚钱方式 投票网赚 现在的网赚是怎么回事 www.xieeybaa.com 2019挂机网赚游戏 吉林快3 2019网赚棋牌项目 山东群英会怎么玩 快三娱乐平台