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