如何浪費時間篮幢、金錢和資源
考慮一下這個場景：我們設(shè)計一個應(yīng)用程序或網(wǎng)站。我們投入一切-時間为迈，金錢三椿，努力『看起來很棒搜锰。我們釋放它，但它是坦克耿战。人們討厭它蛋叼。它令人困惑，令人沮喪剂陡，結(jié)果只包括糟糕的評論和安裝狈涮。為什么？當(dāng)事情發(fā)生如此嚴(yán)重的錯誤時鸭栖，通常是因為以下原因：我們沒有集思廣益地思考足夠多的想法歌馍，我們急忙投入到視覺設(shè)計上-我們沒有創(chuàng)建線框-我們沒有進(jìn)行用戶/可用性測試-我們沒有收集足夠多的反饋信息(或者根本沒有收集到足夠多的災(zāi)難)。
通過在一條路徑上航行晕鹊，而不考慮其他路徑末端的情況松却，我們最終可能會到達(dá)錯誤的目的地，浪費寶貴的時間溅话、金錢和資源晓锻。進(jìn)入線框和快速成型的令人興奮的世界。
什么是快速原型飞几？
快速原型的設(shè)計過程是頭腦風(fēng)暴砚哆，草圖，協(xié)作屑墨，創(chuàng)建線框模型躁锁，并使用創(chuàng)造性的能量來可視化盡可能多的想法。反饋和用戶測試被用來廢棄那些糟糕的想法绪钥，并確認(rèn)最好的想法確實是…灿里。最好的主意。我們的想法是引導(dǎo)一些/所有這些路徑程腹，看看它們的走向匣吊，但并不是很難回頭。我們稱它為快速原型绢掰，因為它是一個快速缰猴、快節(jié)奏累铅、迭代的過程-我們用非常有限的時間和資源模擬了最基本的設(shè)計版本嫂用，構(gòu)建得足夠讓用戶能夠可靠地進(jìn)行測試。我們稱之為低保真度原型糯钙。在那之后罗心，我們重新投入拄踪，根據(jù)需要進(jìn)行改進(jìn)吏砂，每一輪都會增加一點保真度撵儿。最終，我們會得到一個高保真度的原型狐血，直接達(dá)到高保真度通常是災(zāi)難性的淀歇。
從紙張原型開始
設(shè)計師經(jīng)常使用紙原型，因為它是快速和容易的匈织。這些草圖可以是完全徒手的浪默，或者我們可以使用所謂的UI模板或線框模板，如葡萄柚下面的例子所示缀匕。線框模板的好處是纳决，我們可以把它們握在手中，更現(xiàn)實地體驗我們的設(shè)計乡小。
我們要解決什么問題阔加？
現(xiàn)在視覺設(shè)計與我們無關(guān)，我們只能把我們的創(chuàng)造力集中在這個問題上劲件。假設(shè)已經(jīng)進(jìn)行了用戶研究掸哑，最顯著的是约急，客戶開發(fā)零远，我們設(shè)計這個應(yīng)用程序或網(wǎng)站是因為用戶需要它。他們?yōu)槭裁葱枰岜危克鉀Q了什么問題牵辣？素描從主要的用戶流開始，并回答以下問題：“用戶如何使用我們的應(yīng)用程序或網(wǎng)站解決他們的問題奴饮？”現(xiàn)在纬向，可以肯定的是，我們的隱私政策通常不會為用戶的目標(biāo)做出貢獻(xiàn)戴卜，所以這不會包括在我們的流/故事板中逾条。也許在站點地圖中(稍后會出現(xiàn))，但不是用戶流投剥。
如何逼近快速迭代
快速迭代應(yīng)該是快速的师脂，但非常有洞察力，最好的方法之一就是所謂的四步草圖。這項活動通常發(fā)生在設(shè)計sprint的第2/周二吃警，這是Google Ventures的杰克·克納普發(fā)明的一種方法糕篇，用于通過快速迭代和用戶測試快速驗證想法。它遵循以下四個步驟(提示：記住用戶的問題)：
第一步：記筆記20分鐘酌心，
步驟2：為20分鐘勾勒一些粗略的想法拌消，
步驟3：草圖8變體最佳想法(8分鐘，總計)
第4步：勾勒出整個解決方案的高保真3步故事板安券。
下面是安東尼·拉古恩的故事板草圖墩崩。
盡早收集反饋，并經(jīng)常收集反饋
即使在這個階段侯勉，收集反饋(不一定來自用戶泰鸡，但至少從團隊成員那里)可以提供有價值的見解。事實上壳鹤，甲板上…的人手越多越好盛龄。集思廣益在團隊努力的時候效果最好，所以準(zhǔn)備好一些便條芳誓，開始互相交談吧余舶！草圖→反饋→草圖→反饋！??
如何創(chuàng)建線框
線框只是我們設(shè)計的骨架(通常是無色的)锹淌。線框模型可以是草圖匿值，但也可以是數(shù)字化模型(不管怎樣，它們的保真度仍然比較低)赂摆。它們可以描述一個用戶流(如上面所示)挟憔，也可以演示整個站點地圖和/或原型。線框是一種工具烟号，而不是一步绊谭。設(shè)計師可以隨心所欲地從素描切換到數(shù)字化-素描不一定意味著低保真度，而線框也不一定意味著更多細(xì)節(jié)汪拥。下面是埃迪·洛巴諾夫斯基(EddieLobanovskiy)的一幅相對詳細(xì)的線框草圖达传。
但是，話雖如此迫筑，在增加保真度時宪赶，草圖變得更難維護、共享和重用脯燃，這時我們通常會開始使用線框工具搂妻，并開始更多地考慮整個應(yīng)用程序或網(wǎng)站用戶體驗。簡而言之辕棚，我們需要考慮可用性(使用這個設(shè)計有多容易欲主？)追他、信息體系結(jié)構(gòu)(信息結(jié)構(gòu)有多好？以及站點地圖(用戶很容易導(dǎo)航并找到他們想要的內(nèi)容嗎岛蚤？)邑狸，同樣的概念也適用：迭代→反饋→迭代→反饋。
最佳線框工具
與其他類型的屏幕設(shè)計工具相比涤妒，線框工具有一些標(biāo)準(zhǔn)化的特性单雾；畢竟，它們的設(shè)計只是為了實現(xiàn)一個目標(biāo)：幫助我們迭代低保真度原型她紫。盡管如此硅堆，它們確實有一些細(xì)微的區(qū)別。所有的線框工具都有一個現(xiàn)成UI組件庫贿讹，可以幫助我們快速模擬應(yīng)用程序和網(wǎng)站渐逃，大多數(shù)工具還配備了協(xié)作和用戶測試功能，以幫助團隊盡早從實際用戶那里快速收集反饋和有用的見解民褂。一些工具還提供了一些功能來幫助繪制流程圖和用戶流圖茄菊。當(dāng)涉及到低保真度模型的數(shù)字化時，這些是最好的線框工具：
Balsamiq
Balsamiq是一個專注于線框模型的快速原型工具赊堪，它允許UX/UI設(shè)計人員更快地迭代面殖、用戶早期測試，并使用他們的“素描”視覺美學(xué)創(chuàng)建Web和應(yīng)用模型哭廉，這提醒我們要將視覺效果保存到以后脊僚。與其他線框工具相比，Balsamiq是輕量級的遵绰！
Axure
雖然Axure包含了許多與Balsamiq相同的線框UI組件辽幌，但Axure是數(shù)據(jù)驅(qū)動模型的更好選擇，這使得它成為信息體系結(jié)構(gòu)實驗的理想選擇椿访。87%的財富100強公司不會錯乌企！總之-雖然速度不太快，但更強大赎离。
OmniGraffle
OmniGraffing是一個具有圖表功能的線框工具逛犹，它適合于在創(chuàng)建線框模型之前對用戶流進(jìn)行原型化和對信息體系結(jié)構(gòu)進(jìn)行實驗。OmniGra顯的界面使用了本地的MacOSUI組件梁剔，因此MacOS用戶使用OmniGra顯時會感覺非常自在。
Moqups
Moqups是一個在線模擬工具舞蔽，但它不會讓人感到不舒服荣病，也不會讓人覺得使用起來很尷尬。它非常通用渗柿，很像OmniGraffy个盆，可以幫助設(shè)計師脖岛、經(jīng)理和利益相關(guān)者使用用戶流圖表和快速原型。
Whimsical
異想天開是新的孩子在街區(qū)颊亮，雖然它已經(jīng)吸引了特別的評論柴梆，如Shopify，Invision终惑，微軟和我們绍在！異想天開是第一個真正掌握快速查找圖標(biāo)和可配置元素的線框工具。這是很容易看到異想天開的競爭巴爾薩米克在速度方面雹有，后來的線偿渡。獎金：美麗的圖表和流程圖，就在盒子里霸奕。
UXPin
除了原型和線框工具之外溜宽，UXPin還包括設(shè)計系統(tǒng)、設(shè)計切換和UI設(shè)計工具质帅，UXPin是設(shè)計人員的一種完整的UX解決方案适揉。不幸的是，在一個基于網(wǎng)絡(luò)的應(yīng)用程序中有這么多的功能煤惩，使應(yīng)用程序變得緩慢和令人沮喪涡扼，但是如果你有活力的話，它是一個強大的工具盟庞，認(rèn)真的設(shè)計師吃沪。
Justinmind
JustinMind是線框和高保真度原型的理想平衡。它沒有UXPin那么雄心勃勃什猖，但在這一點上票彪，使用起來更有效、更令人愉悅不狮，它幫助設(shè)計師在一個應(yīng)用程序中創(chuàng)建線框模型和UI設(shè)計降铸。
其他線框工具
Picoco
MockFlow
Mockplus
Wireframe.cc
快速原型工具
雖然這些快速原型工具并不是嚴(yán)格意義上的線框圖，但它是為低保真度和高保真度的原型設(shè)計而設(shè)計的摇零，對于那些寧愿節(jié)省一些錢和/或?qū)⒄麄€設(shè)計工作流程保持在單一訂閱下的設(shè)計師來說非常有用推掸。
Adobe XD
Adobe確實在UI設(shè)計領(lǐng)域?qū)崿F(xiàn)了轉(zhuǎn)變，引入了AdobeXD驻仅，包括UI設(shè)計谅畅、交互式原型設(shè)計，甚至設(shè)計切換功能噪服。AdobeXD并不是一個嚴(yán)格意義上的線框工具毡泻，但它已經(jīng)提供了線框UI工具包。
Sketch
在用戶數(shù)量方面粘优，素描是用戶界面的第一大設(shè)計工具仇味，在2015年超過Photoshop呻顽。這可以說是設(shè)計用戶界面最快的方法之一，盡管在沒有拖放UI組件的情況下丹墨，它在技術(shù)上并不是一種線框工具廊遍。草圖對于快速原型化來說是一種史詩，但需要與Flinto贩挣、Practice喉前、Marvel App或Origami相結(jié)合來實現(xiàn)原型交互，或者是用戶圖表的溢出揽惹。盡管如此被饿，Sketch仍然是首選的。
尊敬的提及
首先搪搏，讓我們首先說狭握，這些工具是業(yè)內(nèi)最好的工具之一。我們之所以只將它們包含在榮譽版中疯溺，是因為它們不是為線框設(shè)計而構(gòu)建的论颅，盡管這并不意味著它們不能用于這種設(shè)計。
Figma
Framer Studio
InVision Studio
三米工作室“大吉大利”小組的每周優(yōu)質(zhì)設(shè)計文章漢化計劃03篇--《A Beginner’s Guide to Rapid Prototyping（快速原型入門指南）》囱嫩。
Sidebar英文原文鏈接https://uxtricks.design/blogs/ux-design/wireframe-tools-and-rapid-prototyping/
