產(chǎn)品分享社區(qū)
聲明:網(wǎng)站上的服務(wù)均為第三方提供,請用戶注意甄別服務(wù)質(zhì)量
要為您的團隊建立有效的工作流程,了解低保真線框和高保真原型之間的區(qū)別非常重要。
如果您已經(jīng)在使用線框,或者只是為團隊的線框和原型制作需求尋找合適的解決方案,那么您可能已經(jīng)遇到過“低保真”和“高保真”這兩個術(shù)語。
lo-fi 和 hi-fi 的一般含義并不難直觀。但是,如果您是創(chuàng)始人、設(shè)計師、開發(fā)人員、業(yè)務(wù)分析師、產(chǎn)品經(jīng)理,或跨職能團隊的任何成員,深入挖掘可能會很有用。
在 UX 設(shè)計的特定背景下了解保真度可以幫助您建立更好的產(chǎn)品和更高效的團隊。那么,讓我們來看看線框圖在開發(fā)中的重要性,解釋低保真和高保真線框圖的區(qū)別,并討論如何將它們兩者發(fā)揮到最大效果。
“線框”一詞早于其在數(shù)字設(shè)計中的當前使用。Web 和應(yīng)用程序設(shè)計師從 CAD(計算機輔助設(shè)計)和 CGI?? 動畫領(lǐng)域借用了這個術(shù)語。反過來,他們從早期的汽車建模、定格動畫和雕塑領(lǐng)域借用了它。
事實上,大多數(shù)人在小學(xué)時就第一次接觸到線框圖,并使用鐵絲網(wǎng)為他們的紙制木偶、面具和恐龍搭建框架!
在每種情況下,線框都有相同的用途:在添加最終元素(如表面、皮膚、顏色、紋理、照明等)之前,充當最終產(chǎn)品的粗略近似。
將線框視為最終設(shè)計的藍圖。在設(shè)計過程的早期嘗試這種骨架是有意義的,在大量時間和金錢投入到拋光產(chǎn)品或最終編碼開始之前。
為了了解網(wǎng)頁設(shè)計中的線框圖是什么樣子,這里有一個購物車的線框圖,取自我們的電子商務(wù)網(wǎng)站模板包。您可以看到頁面的大部分重要元素已經(jīng)到位。但是,線框使用通用占位符,而不是全彩、品牌圖形和描述性內(nèi)容:
就像“線框圖”的概念是從預(yù)先存在的設(shè)計實踐中得出的一樣,“保真度”這個詞也是從錄音世界中借來的。在唱片和收音機的早期,低保真和高保真指的是音樂錄制和播放的質(zhì)量。
同樣,在移動應(yīng)用程序和網(wǎng)頁設(shè)計中,保真度是指線框、模型或原型中的詳細程度。我們經(jīng)常談?wù)摰捅U婧透弑U?,好像它們是不同的類別,但它們真正代表的是產(chǎn)品設(shè)計演變的起點和終點。
將保真度視為一系列細節(jié)和交互性。
在該范圍的開始,您會發(fā)現(xiàn)模擬紙質(zhì)草圖以及低保真數(shù)字線框。兩者都使用臨時占位符來表示網(wǎng)頁或設(shè)備屏幕的基本設(shè)計元素。在勾勒出一個想法的第一次迭代時,兩者都很有用。
然后,隨著每一次新的改進,產(chǎn)品的表現(xiàn)形式自然地從線框演變?yōu)槟P驮俚皆汀獜牡捅U娑认蚋弑U娑绒D(zhuǎn)變。占位符首先被草稿版本取代,然后最終被產(chǎn)品副本、內(nèi)容、圖形和品牌的最終再現(xiàn)所取代。
在頻譜的末端是一個高保真、完全交互、可點擊的原型,它與真實產(chǎn)品幾乎沒有區(qū)別——并??且非常適合用戶測試。
雖然,正如我們將看到的,用于描述線框圖的術(shù)語都可以非常靈活,但這會讓您大致了解保真度的范圍:
盡管這是典型的過程,但團隊通常從任何地方開始,并在低保真和高保真之間來回切換。因此,讓我們來看看低保真和高保真線框,并討論它們的優(yōu)缺點。
低保真線框充當網(wǎng)頁和應(yīng)用程序屏幕的初始藍圖——最終產(chǎn)品的粗略近似。它們在產(chǎn)品開發(fā)的早期階段特別有用,因為它們將重點放在純粹的功能上,而不是美學(xué)上。
因此,它們以單色調(diào)色板呈現(xiàn)——故意排除特定細節(jié),如顏色、字體、徽標和精確尺寸。相反,低保真線框使用圖像占位符和基本形狀來指示最終將填充頁面的元素。通用的“l(fā)orem ipsum”文本或“編輯”字體代表未來的內(nèi)容和副本。
這是我們的低保真線框模板之一,可讓您了解這一切在實踐中的樣子:
低保真線框是用戶流程圖和高保真原型之間的重要墊腳石。正是由于缺乏細節(jié),它們才如此有價值——并賦予它們一系列優(yōu)勢:
捕捉想法:因為低保真線框可以快速創(chuàng)建,您可以在有價值的想法消失之前從腦海中獲得靈感。只需單擊幾下,就可以將一個抽象的想法從概念轉(zhuǎn)變?yōu)閯?chuàng)造,為您和您的團隊保持動力。
基礎(chǔ)工作:低保真線框缺乏細節(jié)可以幫助您的團隊專注于產(chǎn)品的基本功能及其用戶體驗。設(shè)計師可以在游戲的早期與利益相關(guān)者檢查他們的假設(shè),并就屏幕上需要和不需要的內(nèi)容、最佳密度和間距以及他們想要收集和交流的信息達成快速共識。
無痛迭代:在任何特定外觀投入太多時間和精力之前進行試驗總是更好。低保真線框最好的一點是它們很容易改變——甚至丟棄。由于它們很容易創(chuàng)建,跨職能團隊中的任何人都可以模擬他們自己的變體,或者提出一種新方法。傾聽所有聲音——尤其是在設(shè)計和開發(fā)的早期階段——是建立共識和優(yōu)化用戶體驗的最佳方式之一。
簡化的工作流程:沒有什么比浪費精力和不必要的回溯更能破壞動力了。低保真線框可讓您的團隊在致力于像素完美的數(shù)字原型之前解決有關(guān)內(nèi)容、布局和產(chǎn)品要求的基本問題。通過建立在可靠決策的基礎(chǔ)上,團隊成員可以避免事后對精心渲染的資產(chǎn)進行返工。而且由于 lo-fi 不是很耗時,團隊可以快速模擬整個用戶流。通過確定項目的范圍及其信息架構(gòu),您的團隊可以及早獲得利益相關(guān)者的認可,并防止后來因預(yù)期不一致而失望。
低保真線框有很多優(yōu)點,但只有在正確的時間和正確的目的部署它們。由于它們?nèi)狈毣图毠?jié),它們也有一些你需要考慮的缺點:
低視覺沖擊:如果目標是傳達您未來成品的外觀和感覺,那么低保真線框可能不是正確的選擇。它們未經(jīng)修飾的性質(zhì)使它們不如高保真線框令人印象深刻。這使得它們不適合某些類型的投資者推銷和客戶演示——特別是如果您的利益相關(guān)者不熟悉設(shè)計過程。在這些情況下,高保真原型可以通過模仿產(chǎn)品的最終視覺設(shè)計來提供更多“驚喜”因素。
測試不足:在開發(fā)過程中,UX設(shè)計師經(jīng)常會使用低保真線框,通過添加交互來創(chuàng)建一個粗略的、可點擊的原型。低保真原型可以很好地用于內(nèi)部實驗,但通常不足以進行公共用戶測試。這是因為低保真原型缺乏一整套視覺線索(形狀、顏色、文本、間距)。因此,用戶瀏覽 UI 的速度可能會很慢——這會導(dǎo)致難以準確評估產(chǎn)品的可用性。
在我們將注意力轉(zhuǎn)向高保真之前,這里簡要總結(jié)一下低保真的優(yōu)缺點:
高保真線框令人興奮,因為它們在實際開發(fā)之前模仿了應(yīng)用程序或網(wǎng)站的外觀和感覺。它們通常包括將成為最終產(chǎn)品一部分的所有品牌、副本、顏色、徽標、字體和圖形。
高保真線框在設(shè)計過程的最后階段最有用,在完成初始用戶研究并做出有關(guān)布局和內(nèi)容的基本決策之后。
具有高保真元素但沒有交互性的線框通常被稱為模型。一旦添加了交互、過渡或動畫,模型就會成為高保真原型。通過可點擊的菜單和按鈕,高保真原型提供了用戶體驗的發(fā)自內(nèi)心的感覺。這允許團隊在最終設(shè)計批準、測試和移交給開發(fā)人員之前調(diào)整可用性。
如果您準備好您的高保真內(nèi)容,這里有一個您可以快速自定義的高保真線框模板。只需交換您的副本、圖像、圖形、品牌和顏色:
憑借其細節(jié)和交互性,高保真線框可以有效預(yù)覽您的產(chǎn)品,并為您的團隊提供許多重要優(yōu)勢:
激發(fā)熱情:從低保真到高保真的飛躍對于所有參與其中的人來說都是鼓舞人心的。在灰度打好基礎(chǔ)之后,團隊看到他們的努力以全彩和細節(jié)呈現(xiàn)會令人耳目一新。并且,從一個真實的原型中,利益相關(guān)者、客戶和投資者可以更好地掌握產(chǎn)品的真正吸引力。事實上,由于它們具有很高的視覺沖擊力,創(chuàng)始人有時會在設(shè)計過程的一開始就創(chuàng)建高保真線框——通常使用借用的情緒板元素——只是為了讓團隊成員盡早了解他們的愿景。
精致的反饋:由于高保真線框捕捉產(chǎn)品的完整外觀和感覺,它們?yōu)橐曈X設(shè)計高級階段的反饋提供了必不可少的機會。團隊有機會審查從品牌和用戶流程等大局問題到字體易讀性和精確間距等較小細節(jié)問題的所有內(nèi)容。合作者可以直接對設(shè)計發(fā)表評論,甚至可以與平面設(shè)計師、插畫家、文案和開發(fā)人員進行實時編輯會議。高度詳細的線框圖上的精確反饋讓團隊可以在移交給開發(fā)團隊之前進行最后的調(diào)整——并就項目的可交付成果達成最終共識。
身臨其境的體驗:添加交互可以將設(shè)計變成可點擊的原型,從而使設(shè)計栩栩如生。交互性可以在您的線框圖的任何階段添加,但在您的團隊可能想要評估和改進產(chǎn)品的可用性時,在設(shè)計過程結(jié)束時最有效。通過活動按鈕和可點擊菜單,高保真原型可以模仿您的實際應(yīng)用程序或網(wǎng)站,并讓利益相關(guān)者對最終的用戶體驗有真實的感覺。
準確的測試: Hi-fi 原型可以成為有價值的評估工具,特別是如果您有資源執(zhí)行未經(jīng)審核的用戶測試。當然,團隊可以使用從紙質(zhì)線框到高保真模型的任何東西進行指導(dǎo)測試。但是,如果您的目標是收集有關(guān)用戶交互和響應(yīng)時間的真實數(shù)據(jù),或者測試特定的 UI 組件,那么您將需要運行未經(jīng)審核的測試。為此,您需要一個高保真原型。完全交互式、可點擊的原型將最大限度地減少人為錯誤并提供更準確的結(jié)果。
憑借其精致、細節(jié)和交互性,高保真線框和原型有很多值得推薦的地方。但是由于團隊經(jīng)常犯錯誤,在錯誤的時間構(gòu)建它們,因此值得回顧一下它們的一些缺點和缺點:
資源密集型:如果您準備投入大量專業(yè)知識,則只有在 hi-fi 中工作才有意義。一個可信的高保真原型需要用戶體驗設(shè)計師、圖形藝術(shù)家和文案的參與。它可能還需要與負責(zé)照片和視頻等元素的無數(shù)外部合作者進行協(xié)調(diào)。創(chuàng)建詳細的高保真資產(chǎn)——并將它們整合到精美的設(shè)計中——需要時間和金錢。這可能意味著更長、更昂貴的交付時間表。
抗修訂:在每個人都針對特定設(shè)計進行測試之前,進行實驗要容易得多。因為高保真原型需要花費大量精力來創(chuàng)建,所以團隊很容易對特定方法進行深入投資。到那時,改變方向可能會很痛苦。改變 Hi-Fi 資產(chǎn)可能會讓團隊成員覺得他們“回到原點”,或者做了很多“浪費的工作”。盡管在這個過程中可能學(xué)到了很多東西,但這仍然會導(dǎo)致動力喪失和士氣低落。一個相關(guān)的問題是,一旦利益相關(guān)者看到了鼓舞人心的高保真演繹,他們可能會對部署感到不耐煩。這兩個因素的結(jié)合可以阻止經(jīng)常需要的那種激進的修改——并導(dǎo)致沉沒成本謬誤。
以下是高保真原型的優(yōu)缺點的簡要總結(jié):
高保真和低保真線框?qū)嶋H上只是整個保真范圍的書擋。在實踐中,隨著項目的發(fā)展,大多數(shù)團隊在該范圍內(nèi)流暢地移動,并結(jié)合了高保真和低保真元素。
例如,如果您正在為已建立的網(wǎng)站開發(fā)新頁面,或者為現(xiàn)有應(yīng)用程序開發(fā)新功能,您的團隊可能會通過調(diào)整現(xiàn)有設(shè)計來啟動他們的線框圖。他們將在高保真屏幕截圖上疊加低保真元素以制定新配置。更接近開發(fā)時,他們可能會改進那些低保真元素,或者干脆交出工作,因為他們知道開發(fā)團隊已經(jīng)熟悉品牌需求。
高保真/低保真混合的另一個例子是撰稿人在游戲早期就進入設(shè)計過程。書面內(nèi)容的范圍和性質(zhì)在很大程度上取決于用戶流程、頁面布局和可用空間。因此,為了在文案和用戶體驗/設(shè)計之間建立更好的整體凝聚力,文案通常直接在低保真線框上進行創(chuàng)作。在這些情況下,副本在圖形元素之前就已經(jīng)成為高保真,并且通常決定了設(shè)計,而不是相反。
Nielsen Norman Group 有一種很好的方式來思考線框或原型中的保真度問題。他們指出,保真度可以在三個方面有所不同:交互性、視覺效果和內(nèi)容。換句話說,隨著項目的發(fā)展,您的團隊可能會根據(jù)工作流程的性質(zhì)混合和匹配來自這些領(lǐng)域的高保真和低保真元素。
了解保真度很重要,但選擇的自由也很重要。因此,問題不在于是低保真還是高保真,而在于如何根據(jù)團隊的資源、時間線和期望來部署正確的保真度。
在 Moqups,我們明白任何面向世界的工作流程都將不可避免地比任何預(yù)定義的描述都更加混亂和有機。這就是為什么我們的應(yīng)用程序旨在為您的團隊提供最大的靈活性。使用 Moqups,您可以從任何地方開始,選擇低保真或高保真,然后根據(jù)您的要求來回跳躍。
我們的應(yīng)用程序使用簡單,并且有一個龐大的模板庫——因此很容易上手。由于 Moqups 是一個一體化協(xié)作平臺,您的團隊可以超越線框和原型,在數(shù)字白板、圖表、流程圖和戰(zhàn)略框架上進行實時協(xié)作——所有這些都在同一個應(yīng)用程序和創(chuàng)意環(huán)境中。
無論您的團隊如何在他們的工作流程中加入保真度,也無論您在產(chǎn)品設(shè)計過程中處于什么位置,Moqups 都可以讓您的團隊實時協(xié)作,聽取所有利益相關(guān)者的意見,并就設(shè)計留下反饋。
歡迎您使用Moqups!