漲姿勢(shì)+2！給產(chǎn)品繪制高保真原型有哪些必要規(guī)范？

編者按：上次給同學(xué)們科普一個(gè)產(chǎn)品的誕生過(guò)程，今天繼續(xù)深聊第二節(jié)，你可以了解到交互設(shè)計(jì)師在產(chǎn)品成型前要具體干哪些活兒，中間又有什么不為人知的技巧與規(guī)則，當(dāng)然，作為上節(jié)課的續(xù)集，我們將手把手帶你全面認(rèn)識(shí)高保真原型，趕緊來(lái)補(bǔ)充知識(shí)咯。

上一篇好文在這里喲！《漲姿勢(shì)！超細(xì)致的產(chǎn)品設(shè)計(jì)流程技巧全科普》

在第一節(jié)中，我們共同探討了草圖、線(xiàn)框圖、模型和低保真度原型等早期設(shè)計(jì)成果。隨著你設(shè)計(jì)的深入，視覺(jué)的保真度將自然地隨之提高，功能也會(huì)隨之完善。

雖然表面上看這一過(guò)程可能紛雜瑣碎，好像是一堆紙片和亂七八糟的屏幕畫(huà)面堆積在一起，但你心里明白最后終會(huì)有方法從雜亂中找到蹊徑。在本篇文章中，我們將為大家講解各種不同的文檔編制方法，以便大家在將創(chuàng)意融入設(shè)計(jì)時(shí)使用。下面我將為大家介紹概念草圖繪畫(huà)和線(xiàn)框圖繪制、低保真和高保真原型，以及產(chǎn)品設(shè)計(jì)規(guī)格。

原型設(shè)計(jì)原則

如果說(shuō)線(xiàn)框圖注重的是結(jié)構(gòu)，那么原型就更加注重體驗(yàn)。線(xiàn)框圖或模型可以使用Invision或UXPin等應(yīng)用相互聯(lián)系從而創(chuàng)建可以實(shí)際點(diǎn)擊的原型。

如上圖所示，保真度和工作流有各種不同的維度。HubSpot的前任用戶(hù)體驗(yàn)總監(jiān)Josh Porter喜歡從草圖繪制直接過(guò)渡到原型創(chuàng)作階段（跳過(guò)線(xiàn)框圖）這一比較簡(jiǎn)單的工作流程。對(duì)于他來(lái)說(shuō)，草圖耗時(shí)少，但能夠回答“頁(yè)面上呈現(xiàn)哪些物體、這些物體能執(zhí)行哪些操作”等功能性的問(wèn)題，而建立原型則需要投入更多精力。這并不意味著線(xiàn)框圖和模型沒(méi)有用，相反，其說(shuō)明可以將時(shí)間從開(kāi)發(fā)靜態(tài)資源上轉(zhuǎn)移到交互資源上。

原型制作的真正強(qiáng)項(xiàng)在于其能夠讓團(tuán)隊(duì)把思考的中心從交付作品轉(zhuǎn)移到實(shí)用性上來(lái)。有關(guān)線(xiàn)框圖和原型設(shè)計(jì)的完整原則和實(shí)操，請(qǐng)閱讀《線(xiàn)框圖繪制指南》。

高保真度原型

高保真度原型比較適合于用戶(hù)體驗(yàn)設(shè)計(jì)后期階段幫助你思考品牌塑造、外觀和感覺(jué)等等細(xì)節(jié)問(wèn)題。高保真原型可以讓你以比較低的成本盡量貼近真是產(chǎn)品。和低保真原型一樣，你也可以使用在線(xiàn)應(yīng)用或HTML代碼創(chuàng)建高保真原型。

據(jù)Silicon Valley Product Group的合伙人Marty Cagan介紹，高保真原型能夠刺激產(chǎn)品經(jīng)理、設(shè)計(jì)師和工程師更深入地開(kāi)展協(xié)作并共同探索可行產(chǎn)品所需的各方面內(nèi)容。保真度較高的原型能夠帶來(lái)下列好處：

較早地呈現(xiàn)出完整產(chǎn)品

營(yíng)銷(xiāo)、銷(xiāo)售和業(yè)務(wù)開(kāi)發(fā)團(tuán)隊(duì)能夠盡早理解產(chǎn)品，以便做出正確響應(yīng)。

縮短開(kāi)發(fā)時(shí)間

高保真原型更加精致，可以方便你在早期解決很多可能困擾開(kāi)發(fā)人員的具體問(wèn)題，另外，使用高保真原型進(jìn)行用戶(hù)驗(yàn)證可以大幅縮短開(kāi)發(fā)時(shí)間。

方便估計(jì)項(xiàng)目范圍

高保真原型可以提供較為詳細(xì)的信息，方便在流程早期（高保真原型作用最大的階段）準(zhǔn)確估計(jì)工程成本。如果你的產(chǎn)品引入了新技術(shù)，那么高保真原型將尤其有幫助。

Smashing Magazine的作者Lyndon Cerjeo建議不論保真度如何，原型都應(yīng)循序漸進(jìn)地搭建，而不應(yīng)反復(fù)更新?lián)Q代。一個(gè)比較有效果的方法就是先從泛泛的層面開(kāi)始原型設(shè)計(jì)，然后深入設(shè)計(jì)的特定部分提高保真度。舉例來(lái)說(shuō)，一個(gè)網(wǎng)站原型的初代可以先搭建出主要的登陸頁(yè)面，在之后的迭代期間逐漸提高保真度并細(xì)化網(wǎng)站的各個(gè)部分（例如下載時(shí)的各個(gè)步驟等）。

產(chǎn)品設(shè)計(jì)規(guī)格

原型的作用是展示交互和外觀，而設(shè)計(jì)規(guī)格的作用則是說(shuō)明產(chǎn)品成型所需的流程和藝術(shù)創(chuàng)作。

設(shè)計(jì)規(guī)格主要包括用戶(hù)流程和任務(wù)流程圖，這兩個(gè)流程圖將規(guī)劃出產(chǎn)品的功能以及內(nèi)容和樣式要求，進(jìn)而說(shuō)明其視覺(jué)表現(xiàn)上的創(chuàng)意和技術(shù)細(xì)節(jié)。有關(guān)用戶(hù)故事和任務(wù)故事的建議，請(qǐng)閱讀?《用戶(hù)體驗(yàn)設(shè)計(jì)與流程文檔編制指南》。

1. 用戶(hù)流程圖

用戶(hù)流程或者叫用戶(hù)旅程，是指所有會(huì)影響用戶(hù)實(shí)現(xiàn)某一目標(biāo)的場(chǎng)景和決策。用戶(hù)流程圖應(yīng)當(dāng)高度全面，并包含從用戶(hù)形成概念直到其目標(biāo)達(dá)成這一過(guò)程的全部時(shí)點(diǎn)。

用戶(hù)流程圖能夠表現(xiàn)出用戶(hù)總體上的目標(biāo)（例如安排旅游，或者像上圖中所示的雇傭員工等）。例如，現(xiàn)在有兩名用戶(hù)需要在線(xiàn)購(gòu)買(mǎi)CD，他們各自可能體驗(yàn)到完全不同的旅程。其中一個(gè)可能會(huì)通過(guò)地址欄打開(kāi)Amazon.com，搜索要買(mǎi)的專(zhuān)輯，然后添加到購(gòu)物車(chē)。另一個(gè)可能會(huì)先Google搜索，打開(kāi)第一個(gè)結(jié)果，瀏覽比較一番，然后查看一些細(xì)節(jié)，最后才進(jìn)入具體購(gòu)買(mǎi)環(huán)節(jié)。因此，你的用戶(hù)流程圖應(yīng)該非常復(fù)雜才對(duì)。

根據(jù)Wireframes Magazine所介紹，上面所展示的對(duì)話(huà)氣泡用戶(hù)流程能夠在你設(shè)計(jì)產(chǎn)品交互時(shí)有效地幫助你將側(cè)重點(diǎn)放到用戶(hù)的真實(shí)想法和需求上。隨著項(xiàng)目不斷進(jìn)展，你很可能會(huì)迷失在產(chǎn)品的復(fù)雜技術(shù)當(dāng)中。對(duì)話(huà)氣泡用戶(hù)留出可以讓你始終專(zhuān)注于分析階段所確立的產(chǎn)品特性上。

2. 任務(wù)流程圖

如果說(shuō)用戶(hù)流程側(cè)重于整體戰(zhàn)略，那么任務(wù)流程就注重微觀執(zhí)行。任務(wù)流程的作用是對(duì)一系列具體、可重復(fù)的操作進(jìn)行說(shuō)明，例如使用鬧鈴應(yīng)用、設(shè)定鬧鈴響起時(shí)間等。

如上例所示，任務(wù)流程圖展現(xiàn)的基本全部是運(yùn)算過(guò)程，因此相比用戶(hù)流程顯得比較枯燥。但任務(wù)流程能夠幫助你捋清完成產(chǎn)品預(yù)期可實(shí)現(xiàn)目標(biāo)所需執(zhí)行的全部步驟。

3. 設(shè)計(jì)資源與樣式要求

產(chǎn)品樣式指南通常用于說(shuō)明產(chǎn)品感官上的審美和技術(shù)規(guī)格。產(chǎn)品樣式指南中包含的內(nèi)容包括：用于說(shuō)明產(chǎn)品預(yù)期實(shí)現(xiàn)情感狀態(tài)的品牌規(guī)范、具體像素、文件格式等技術(shù)規(guī)格、設(shè)計(jì)資源的整體尺寸/大小等多種內(nèi)容。這一指南可以像Mozilla的品牌工具包一樣簡(jiǎn)短松散，只追求推動(dòng)創(chuàng)意，也可以像Apple的人機(jī)界面指南一樣精確繁復(fù)。

Salesforce的產(chǎn)品設(shè)計(jì)師Brad Haynes選擇圍繞產(chǎn)品而非概念打造出了Salesforce的樣式指南。面對(duì)自己團(tuán)隊(duì)反復(fù)提出的問(wèn)題，Brad成功地將Salesforce的外觀和感覺(jué)塑造成了一款移動(dòng)應(yīng)用，從而實(shí)現(xiàn)了品牌感官的一致化。其新產(chǎn)品樣式指南的核心內(nèi)容包含下列要素：

原則

明確列出有關(guān)層級(jí)關(guān)系、標(biāo)準(zhǔn)和簡(jiǎn)約性的指導(dǎo)原則，說(shuō)明產(chǎn)品設(shè)計(jì)背后的道理。

顏色

通過(guò)展示調(diào)色板的截圖給出充足但又不會(huì)讓設(shè)計(jì)團(tuán)隊(duì)困惑的信息。

排版

限用一種字體和給定的幾種字體粗細(xì)，保證設(shè)計(jì)簡(jiǎn)單。

圖標(biāo)

提供全套圖標(biāo)體系和庫(kù)（同時(shí)提供像素等技術(shù)細(xì)節(jié)）。

Yelp的樣式指南則更進(jìn)一步，其使用了更為方設(shè)計(jì)師和開(kāi)發(fā)人員使用的文檔。其樣式指南甚至包含了很多小段的代碼以幫助減輕技術(shù)上的負(fù)擔(dān)。最后，由于設(shè)計(jì)和開(kāi)發(fā)團(tuán)隊(duì)能夠直接使用很多現(xiàn)成的代碼和經(jīng)過(guò)更新的設(shè)計(jì)樣式庫(kù)，其高效協(xié)作有效減少了實(shí)現(xiàn)新功能所需花費(fèi)的時(shí)間。

有關(guān)其他最佳實(shí)踐，建議你閱讀Google、MailChimp和Salesforce的產(chǎn)品樣式指南。

定義、設(shè)計(jì)、再定義

無(wú)論你選擇低保真還是高保真，草圖、線(xiàn)框圖和原型制作的根本目標(biāo)都是交付出優(yōu)秀的產(chǎn)品理念，而不是簡(jiǎn)單的產(chǎn)品。

【交互設(shè)計(jì)高級(jí)教程合集】

總監(jiān)級(jí)設(shè)計(jì)師的信息架構(gòu)經(jīng)驗(yàn)分享！
《從優(yōu)秀到卓越！交互設(shè)計(jì)師怎樣理解信息架構(gòu)？》

設(shè)計(jì)流程！進(jìn)大公司的敲門(mén)磚！
《超多干貨！國(guó)內(nèi)知名UED團(tuán)隊(duì)的設(shè)計(jì)流程是怎樣的？》

交互設(shè)計(jì)的好問(wèn)題與好答案：
《對(duì)話(huà)資深設(shè)計(jì)師YOYO！交互設(shè)計(jì)往前走的問(wèn)與答》

原文地址：designmodo
譯文地址：uec.nq
譯者：蔣燦

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量86萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：