有沒(méi)有糾結過(guò)在設計產(chǎn)品的過(guò)程中是使用低保真原型還是高保真原型？?jì)烧哂心男﹨^別？分別在什么時(shí)候使用最合適？
在這篇文章中，和大家一起討論低保真原型和高保真原型之間的主要差異，最恰當的使用時(shí)機以及兩種原型的案例分析。
1.什么是
低保真原型？
低保真原型是在紙上畫(huà)的的草圖或原型，也可以是在電腦上設計的產(chǎn)品頁(yè)面。低保真原型的作用是表現產(chǎn)品中最重要的用戶(hù)流程和功能所涉及的頁(yè)面關(guān)系。
在設計低保真前，我們會(huì )先進(jìn)行用戶(hù)研究并收集一系列產(chǎn)品需求，這些工作做完后，接下來(lái)就要考慮產(chǎn)品的功能。
基本功能和信息架構
在設計的早期階段，我們都不希望陷入頁(yè)面版式、圖像和漸變之類(lèi)的細節中，相反我們需要展示的是產(chǎn)品的核心功能、信息架構以及頁(yè)面間的流程。
我們首先要概述頁(yè)面的一些基本情況，這些設計可以幫助用戶(hù)完成主要目標并滿(mǎn)足每個(gè)功能的基本要求。
基本的布局和元素
除了信息架構和流程外，低保真還有助于定義產(chǎn)品UI的基本布局，例如確定頁(yè)面元素和各部件的尺寸、位置以及頁(yè)面中留白的使用情況。
2.什么是
高保真原型？
高保真原型展示的細節比低保真更深入細致，高保真原型是盡可能接近最終產(chǎn)品的樣式。高保真原型具有與低保真相同的流程和信息架構，也會(huì )展示更多的細節和頁(yè)面關(guān)系。
進(jìn)階的頁(yè)面設計
高保真原型的目標是對最終產(chǎn)品的討論，包括在最終產(chǎn)品中看到的所有內容，例如產(chǎn)品的顏色、漸變、陰影、圖形以及排版等。
進(jìn)階的互動(dòng)原型和功能
高保真原型會(huì )近一步展示產(chǎn)品的動(dòng)效情況，比簡(jiǎn)單點(diǎn)擊原型更進(jìn)階，例如展示頁(yè)面的滾動(dòng)效果、手風(fēng)琴菜單、下拉列表、拖放等動(dòng)效。
高保真原型還可能包含頁(yè)面上移動(dòng)的圖形和動(dòng)畫(huà)，或者用戶(hù)可以操作的元素，還包含例如錯誤消息和表單設計的驗證等，以及在其他各種頁(yè)面尺寸上存儲和再現數據的能力。
3.什么時(shí)候使用低保真原型？
頭腦風(fēng)暴
低保真原型適合快速的頭腦風(fēng)暴，并向客戶(hù)、開(kāi)發(fā)和項目參與者演示設計想法，適合將一些早期的用戶(hù)測試集成到產(chǎn)品設計中。
獲得開(kāi)發(fā)的認可
通過(guò)展示原型，開(kāi)發(fā)能夠在一開(kāi)始就告知我們的某些設計在技術(shù)上是否可行，避免了花費大量時(shí)間來(lái)設計需求交稿時(shí)卻被告知某些功能不能實(shí)現的情況。
進(jìn)行早期用戶(hù)測試
產(chǎn)品是為用戶(hù)而準備的，所以在設計早期階段對他們進(jìn)行測試很有意義。
例如，當朝著(zhù)高保真原型設計時(shí)，我們會(huì )添加許多額外的細節和次要功能，如果在這個(gè)過(guò)程中，發(fā)現產(chǎn)品的某個(gè)核心功能在早期階段被忽略了，導致產(chǎn)品存在可用性缺陷怎么辦？
在低保真原型設計階段，撤消和修改設計要容易得多。向用戶(hù)展示低保真原型有助于在做更進(jìn)階的設計需求前把握關(guān)鍵的功能，更好地定義流程、信息架構以及UI布局。
始終以低保真開(kāi)始
低保真度原型不僅有助于設計師集思廣益地思考想法，還有助于與客戶(hù)保持聯(lián)系。通過(guò)向總監清晰地展示低保真原型而不是簡(jiǎn)單地談?wù)撟约簩⒁龅氖虑?，有利于避免繁瑣的返工?div style="height:15px;">
4.什么時(shí)候使用高保真原型？
產(chǎn)品需要提供盡可能好的用戶(hù)體，制作高保真原型可以確保從產(chǎn)品經(jīng)理到UX設計師，每個(gè)人都能把握產(chǎn)品的方向。
基本功能實(shí)現后
基本功能實(shí)現是指流程和頁(yè)面完成后，至少在核心功能需求方面滿(mǎn)足了用戶(hù)的基本目標。通過(guò)低保真我們會(huì )知道需要設計的頁(yè)面原型，以及每個(gè)頁(yè)面的基本布局，接下來(lái)就可以進(jìn)行高保真的制作。
測試更高級的交互時(shí)
當開(kāi)始設計或測試更復雜的交互和功能時(shí)，應該使用高保真原型。我們需要確保原型中的大多數交互動(dòng)效都是直觀(guān)的，可以為用戶(hù)帶來(lái)價(jià)值甚至趣味性。
把設計移交給開(kāi)發(fā)時(shí)
高保真原型設計可以讓開(kāi)發(fā)更容易將產(chǎn)品用代碼寫(xiě)出來(lái)，不需要太多的想象空間。這樣做不僅減少了錯誤和返工，還減少了在寫(xiě)代碼上花費的時(shí)間，從而減少了將產(chǎn)品推向市場(chǎng)所花費的時(shí)間。
5.
低保真原型案例分析
▲ 網(wǎng)頁(yè)使用很少的顏色來(lái)突出基本功能，例如菜單選項、我的連接等，其余部分都是灰色的，這樣就可以忽略細節只專(zhuān)注于產(chǎn)品的主要功能。
▲ 利用紙質(zhì)版原型來(lái)表現產(chǎn)品的低保真，包括剪貼畫(huà)、草圖、色塊等。這樣做能快速演示基本的頁(yè)面流程和功能，通過(guò)不斷的迭代來(lái)細化這些功能和流程，提升產(chǎn)品體驗。
▲ 當你想讓用戶(hù)注意到產(chǎn)品的核心功能，即圖二中公司在地圖上的位置時(shí)，可以在低保真中把地圖更詳細地表現出來(lái)，弱化其他元素的設計。
▲ 在軟件中完成的低保真，元素的間距、位置以及尺寸的大小會(huì )比紙質(zhì)版更明確，這種原型也是進(jìn)入高保真迭代前的樣子。
6.
高保真原型案例分析
▲ 一款航班預訂產(chǎn)品的高保真原型，用戶(hù)可以選擇城市、日期、添加乘客等功能。這個(gè)例子展示了高保真原型在將最終產(chǎn)品交付給開(kāi)發(fā)之前應該表現得多么接近。
▲ 這個(gè)高保真電商頁(yè)面具有輪播功能，用戶(hù)可以來(lái)回瀏覽所提供的產(chǎn)品范圍。同時(shí)它還具有其他交互功能，例如可擴展的漢堡菜單，以及吸引用戶(hù)注意的按鈕。低保真原型通常不會(huì )涉及太多細節，僅具備基本的可點(diǎn)擊性。
▲ 蘋(píng)果手表的高保真原型不僅顯示了原型可能達到的真實(shí)程度，而且還表明原型不必局限于手機、平板或網(wǎng)站頁(yè)面。
▲ 高保真通常意味著(zhù)帶有色彩，耐克網(wǎng)站的原型完美體現了這個(gè)概念。頁(yè)面具有強烈的顏色、陰影和漸變，以及真實(shí)的互動(dòng)、文案、價(jià)格和產(chǎn)品圖像等。
▲ 一款3D打印機產(chǎn)品的高保真原型，顯示了頁(yè)面可交互的程度，用戶(hù)可以在打印3D產(chǎn)品時(shí)看到最終產(chǎn)品的真實(shí)動(dòng)畫(huà)。頁(yè)面中的圖形有著(zhù)清晰的細節，感覺(jué)像是產(chǎn)品的最終版本。
最后
低保真和高保真原型之間的區別在于涉及的細節程度。在設計過(guò)程中，實(shí)際上不用太糾結于保真情況，先仔細考慮在每個(gè)階段需要滿(mǎn)足哪些設計目標再選擇合適的原型，這樣更實(shí)用。
慢慢來(lái)比較快，希望對你有幫助～
