阿拓帶你飛：最近設(shè)計(jì)師片择、產(chǎn)品經(jīng)理談到高保真原型，但是都沒有一個(gè)標(biāo)準(zhǔn)來(lái)確定應(yīng)保真到什么程度骚揍。首先應(yīng)該定義什么是高保真字管，其次考慮不同的交付對(duì)象，產(chǎn)品本身不同時(shí)期信不，不同環(huán)境下的高保真嘲叔，最后各方工作習(xí)慣和討論根據(jù)該怎么做到高保真。以下是來(lái)自“知乎問(wèn)答”整理的回答抽活！
一：為什么要做高保真硫戈？
@March Liang,產(chǎn)品設(shè)計(jì)師
根據(jù)開發(fā)狀態(tài)，做最高保真的原型下硕。最終期望是能達(dá)到的就是和產(chǎn)品實(shí)際運(yùn)行時(shí)一樣的狀態(tài)丁逝。
1. 高保真原型可以顯著降低溝通成本。
所有人只用看一個(gè)交付件卵牍，并且這個(gè)交付件可以反映最新的果港、最好的設(shè)計(jì)方案。產(chǎn)品的流程糊昙、邏輯辛掠、布局、視覺效果释牺、操作狀態(tài)萝衩。也許制作高保真原型需要花費(fèi)多一些設(shè)計(jì)的時(shí)間，但這是完全值得的没咙，降低的溝通損耗猩谊，帶來(lái)順暢的開發(fā)制作流程是無(wú)以復(fù)加的。如果是遠(yuǎn)程配合的團(tuán)隊(duì)祭刚，這個(gè)好處會(huì)加倍放大牌捷。設(shè)計(jì)師還是可以做很多效果圖墙牌，貼的滿墻都是，到處展示暗甥。產(chǎn)品經(jīng)理也可以盡可能詳細(xì)的列出流程圖喜滨，和人討論邏輯。但最終撤防，請(qǐng)一起制作高保真原型虽风，作為最終確定方案輸出。
2.高保真原型會(huì)最大的降低制作成本寄月。
好的設(shè)計(jì)是不斷嘗試出來(lái)的辜膝。高保真原型可以在只投入少數(shù)開發(fā)力量的同時(shí)，就進(jìn)行各種測(cè)試漾肮。很多問(wèn)題厂抖，要投入使用場(chǎng)景才能發(fā)現(xiàn)。高保真原型可以幫助開發(fā)者模擬大多數(shù)使用場(chǎng)景初橘。如果等所有人努力都結(jié)束才看到成果验游，這真的太可怕了。盡早對(duì)自己產(chǎn)品進(jìn)行驗(yàn)證保檐，這個(gè)是敏捷開發(fā)的原則。產(chǎn)品的開發(fā)要分為一個(gè)迭代一個(gè)迭代的短期開發(fā)崔梗，以一個(gè)一個(gè)小成果來(lái)持續(xù)驗(yàn)證產(chǎn)品夜只，就是為了避免風(fēng)險(xiǎn)，然后持續(xù)改進(jìn)蒜魄。
@朱晨扔亥，產(chǎn)品設(shè)計(jì)師
任何產(chǎn)出物都具備兩種作用。一種是創(chuàng)意發(fā)散階段谈为，產(chǎn)出多個(gè)方向旅挤，供后面篩選；一種是交付階段伞鲫，設(shè)計(jì)方案確定了粘茄，需要交付給下一階段。從節(jié)約資源的角度來(lái)考慮秕脓，高保真存在的前提是其依賴的前期元素都是確定的柒瓣，這樣投放在后期的資源才不會(huì)因?yàn)榍捌诟膭?dòng)搖而盡廢。
在創(chuàng)意發(fā)散階段吠架，假設(shè)項(xiàng)目進(jìn)度已經(jīng)到了需要確定精確尺寸芙贫，顏色，風(fēng)格等后期元素的程度傍药，設(shè)計(jì)師就應(yīng)以用戶需求場(chǎng)景磺平、信息架構(gòu)魂仍、布局等為確定的基礎(chǔ)約束條件進(jìn)行發(fā)散，想出多種視覺設(shè)計(jì)方案填充到已有的低保真原型框架上拣挪，再按照一些客觀原則進(jìn)行收斂過(guò)濾蓄诽，找出最合適的選項(xiàng)。但通常收斂這個(gè)階段會(huì)是產(chǎn)品大老板來(lái)拍板媒吗，雖然這并不應(yīng)該成為唯一的決策方式仑氛。
在交付階段，設(shè)計(jì)師應(yīng)該對(duì)高保真階段選定的設(shè)計(jì)方案中的元素進(jìn)行充分的描述闸英，以便充分地傳達(dá)給下游的合作者锯岖。通常這些合作者是前段重構(gòu)。所以要用程序員最熟悉的語(yǔ)言來(lái)描述設(shè)計(jì)甫何，比如以CSS的盒子模型的方式來(lái)標(biāo)注尺寸出吹，以網(wǎng)頁(yè)色彩體系來(lái)標(biāo)注顏色。
二：什么是高保真?
@朱晨辙喂，產(chǎn)品設(shè)計(jì)師
讓產(chǎn)品原型盡可能的高保真捶牢、華麗麗、無(wú)限逼近于完整產(chǎn)品是每個(gè)人都要的巍耗。但同時(shí)高保真也意味著大量的資源投入秋麸。如何在設(shè)計(jì)中既實(shí)現(xiàn)盡可能高的保真度，同時(shí)又避免資源浪費(fèi)呢炬太？這即需要我們對(duì)高保真的意義有清醒認(rèn)識(shí)灸蟆，同時(shí)也需要吸取一些敏捷的思想。一個(gè)華麗麗的作品（不局限于互聯(lián)網(wǎng)產(chǎn)品）不可能一下子就從腦子里創(chuàng)意變成現(xiàn)實(shí)亲族。它會(huì)被拆分成一系列相互依存的元素炒考，整個(gè)組裝過(guò)程會(huì)先從最基本的元素開始，逐漸填充和豐富霎迫。高保真的高是以完整的斋枢、可為消費(fèi)者服務(wù)的產(chǎn)品為標(biāo)準(zhǔn)的。產(chǎn)品的諸多元素知给，目標(biāo)用戶瓤帚、用戶需求場(chǎng)景、信息架構(gòu)炼鞠、布局缘滥、控件邏輯、尺寸谒主、色調(diào)朝扼、紋理、風(fēng)格等等霎肯，被填充的越豐滿擎颖，對(duì)最終完整產(chǎn)品的“模擬”程度就越高榛斯。只要能讓這個(gè)半成品看起來(lái)更像是成品，就是高保真搂捧，怎么個(gè)像法驮俗，可以有很多選擇。所以允跑，所謂的“高”保真可以是對(duì)外觀的高保真王凑，也可以是對(duì)交互邏輯的高保真，或者對(duì)代碼性能聋丝、流量消耗的高保真索烹。
@Qin Yu，交互設(shè)計(jì)師
高保真”并非一個(gè)既定的目標(biāo)弱睦，高保真/低保真原型都是一種溝通的媒介百姓，具體使用高保真或低保真取決于原型的目的(比如項(xiàng)目前期的方向探索、中期的細(xì)節(jié)討論或后期的交付)
高保真原型并不局限于界面况木，(至少)包括以下幾項(xiàng)：
1原型的概念或想法說(shuō)明; 2詳細(xì)交互動(dòng)作與流程;3各類后臺(tái)判定;4界面排版;5界面切換動(dòng)態(tài);6異常流處理;要做到讓PM,RD垒拢，客戶能夠理解的程度。
@胡振宇
按照原型的保真性來(lái)劃分的話：
手繪靜態(tài)線框
Axure等軟件創(chuàng)建靜態(tài)線框
Axure等軟件創(chuàng)建靜態(tài)線框+PS出的實(shí)際UI效果圖
Axure等軟件創(chuàng)建帶交互效果的動(dòng)態(tài)線框+PS的出實(shí)際UI效果圖
HTML+CSS+JS的實(shí)際html頁(yè)面
如果做對(duì)外項(xiàng)目火惊，那么建議做到“Axure等軟件創(chuàng)建帶交互效果的動(dòng)態(tài)線框+PS的出實(shí)際UI效果圖”求类。這樣的原型能作為項(xiàng)目的備底，未來(lái)和客戶有爭(zhēng)議的時(shí)候矗晃，拿來(lái)用仑嗅。如果做內(nèi)部開發(fā)項(xiàng)目，只要對(duì)方能理解张症。保真度需要做多高？這個(gè)問(wèn)題很難有準(zhǔn)確的結(jié)果鸵贬，高保真原型主要是從兩個(gè)方面進(jìn)行研討：一是視覺效果俗他，二是可用性，包括用戶體驗(yàn)阔逼。其實(shí)只要能給予產(chǎn)品開發(fā)足夠的支持兆衅，就夠了。
@chrisyuan嗜浮，騰訊交互設(shè)計(jì)
真正意義上的高保真原型我認(rèn)為應(yīng)該是產(chǎn)品邏輯羡亩、交互邏輯、視覺效果等等極度接近最終產(chǎn)品的形態(tài)危融。這樣不熟悉產(chǎn)品的人也能通過(guò)觀察畏铆、使用明白這個(gè)產(chǎn)品有什么用。
那是否由一個(gè)人來(lái)獨(dú)立完成這樣的高保真原型呢吉殃？或者說(shuō)是否有一個(gè)大牛能獨(dú)立完整這樣的原型辞居？應(yīng)該有楷怒，但是數(shù)量肯定有限。而大部分人都應(yīng)該是專精某一方面瓦灶，所以才有了團(tuán)隊(duì)的協(xié)作鸠删，通過(guò)集體努力打造一個(gè)成功的產(chǎn)品。對(duì)于互聯(lián)網(wǎng)產(chǎn)品團(tuán)隊(duì)而言贼陶，基于瀑布流式的開發(fā)模式刃泡，產(chǎn)品經(jīng)理、交互設(shè)計(jì)師碉怔、視覺設(shè)計(jì)師烘贴、前端開發(fā)、后端開發(fā)等等角色重點(diǎn)關(guān)注的方向是不同的眨层，每一個(gè)角色應(yīng)該在各自專注的領(lǐng)域做到盡量高保真庙楚。
產(chǎn)品經(jīng)理應(yīng)該保證產(chǎn)品策略和產(chǎn)品邏輯的高保真，然后交付給交互設(shè)計(jì)師趴樱，交互設(shè)計(jì)師應(yīng)努力保證交互邏輯馒闷，使用邏輯，信息結(jié)構(gòu)等等的高保真叁征，再交付給視覺設(shè)計(jì)師纳账。
三： 使用高保真原型的禁忌
@朱晨，產(chǎn)品設(shè)計(jì)師
高保真原型其實(shí)就是產(chǎn)品開發(fā)進(jìn)行到后期的半成品捺疼。從一個(gè)腦袋里的idea到像模像樣的半成品疏虫，是需要投注很多心血的。每艱難地前進(jìn)一步啤呼，都是以已有的步子為前提卧秘。
最大的禁忌就是老大說(shuō)我只看高保真的漂漂亮亮的東西，然后指著高保真的設(shè)計(jì)說(shuō)早期的哪些步子定的不對(duì)官扣。這種決策方式是對(duì)資源極大的不尊重翅敌，一旦早期的東西被干倒，后面的功夫都白費(fèi)惕蹄。
第二個(gè)禁忌就是各合作方?jīng)]有把自己份內(nèi)的構(gòu)思充分夯實(shí)蚯涮，就交付給下一步的合作者。夯實(shí)可以通過(guò)多從利益及決策相關(guān)人獲取反饋卖陵，也可以通過(guò)自己多加發(fā)散再嚴(yán)格收斂遭顶，但終究要保證交付給別人的東西是經(jīng)得起考驗(yàn)的，靠譜的泪蔫，不會(huì)輕易改變的棒旗。一旦別人以你的東西為參考投入更多精力去豐富了產(chǎn)品，卻被告知要返工鸥滨，損失的資源和信任不止一點(diǎn)點(diǎn)嗦哆。
第三個(gè)禁忌就是在向下一步合作方交付時(shí)傳達(dá)信息不充分谤祖。傳達(dá)信息可以靠更恰當(dāng)、充分的文字標(biāo)注老速，也可以靠面對(duì)面的交談探討粥喜，甚至還可以加上重復(fù)確認(rèn)。當(dāng)然橘券，這是要消耗大量精力的额湘，但這也是成為一個(gè)負(fù)責(zé)人的雇員應(yīng)有的盡責(zé)態(tài)度。
鏈接https://www.zhihu.com/question/19973970/answer/15700829
著作權(quán)歸作者所有旁舰，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)锋华。
我認(rèn)為所謂的高保真產(chǎn)品原型需要同時(shí)并且充分考慮：產(chǎn)品邏輯、信息架構(gòu)箭窜、設(shè)計(jì)和交互毯焕。
產(chǎn)品經(jīng)理&產(chǎn)品設(shè)計(jì)師最快速度勾勒出來(lái)的產(chǎn)品原形，工程師可以在設(shè)計(jì)師還沒有全部搞定設(shè)計(jì)稿磺樱、甚至于因?yàn)橐恍┩獠坎豢煽匾蛩叵乱曈X設(shè)計(jì)師沒有完全介入項(xiàng)目前就可以開始Coding
所有關(guān)鍵流程纳猫，特別是界面的跳轉(zhuǎn)，在原型中通過(guò)錨點(diǎn)和連接建立基本關(guān)聯(lián)竹捉；較為復(fù)雜的產(chǎn)品邏輯芜辕，產(chǎn)品經(jīng)理&交互設(shè)計(jì)師麻煩配上工程師最能夠理解的流程圖說(shuō)明
簡(jiǎn)單的交互動(dòng)畫在原型繪制過(guò)程中，面板空白處黃底高亮注明說(shuō)明块差；復(fù)雜的交互實(shí)現(xiàn)侵续，稱得上高保真的原型需要同時(shí)配合Flash實(shí)現(xiàn)基本動(dòng)畫效果；比如 解鎖動(dòng)畫憨闰，Paper Fold状蜗、Path2.0 Flyout Menu 類似復(fù)雜程度的效果（這點(diǎn)我目前做不到，但是合作過(guò)的一個(gè)交互設(shè)計(jì)師十分擅長(zhǎng)通過(guò)Flash 或 GIF 實(shí)現(xiàn)復(fù)雜動(dòng)畫效果）
在敏捷高效的團(tuán)隊(duì)中鹉动，讓設(shè)計(jì)師淪為美工诗舰。這句話說(shuō)出來(lái)估計(jì)會(huì)被很多人領(lǐng)出來(lái)批斗，但是我主要想要表達(dá)的一個(gè)觀點(diǎn)是：你有想過(guò)在你的有限的職業(yè)生涯中有機(jī)會(huì)碰到一個(gè)有想法會(huì)交流训裆，然后又跟你磨合的很好的設(shè)計(jì)師機(jī)的概率概率有多大？我承認(rèn)蜀铲，優(yōu)秀的設(shè)計(jì)師會(huì)讓整個(gè)產(chǎn)品的用戶體驗(yàn)提升數(shù)個(gè)檔次边琉，但是你可能并不那么走運(yùn)，遇到的也許只是一些傲嬌的PS美工记劝。所有人都希望與最優(yōu)秀的人共事变姨，但事實(shí)情況下并非如此，所以厌丑，你只能更多的嚴(yán)格要求自己定欧，通過(guò)自生專業(yè)技能的不斷提升渔呵，讓設(shè)計(jì)師最終心甘情愿淪為你的雙手、你的專屬美工砍鸠，注意扩氢，是心甘情愿的。
下圖是一個(gè)多月前我在折騰的某電影網(wǎng)站V1.0 HTML5版本的原型圖—電影排片以及預(yù)訂支付的原型爷辱。
本文由人人都是產(chǎn)品經(jīng)理@阿拓整理自知乎問(wèn)答录豺，轉(zhuǎn)載請(qǐng)注明出處并保留本文鏈接。
您的贊賞饭弓，是對(duì)我創(chuàng)作的最大鼓勵(lì)双饥。
