網(wǎng)站模型可幫助您節(jié)省資金,同時提高最終產(chǎn)品的用戶體驗。在ui/ux網(wǎng)站模型設(shè)計指南中了解操作方法!
ui/ux網(wǎng)站模型設(shè)計指南?它與線框和原型有何不同?您如何將一個人放在一起?這些正是我們在設(shè)計網(wǎng)站模型時所要研究的問題的類型。
除了研究網(wǎng)站模型所包含的基本方面之外,我們還將研究如何在模型工具中設(shè)計模型,以及它可以給您,您的團(tuán)隊和最終產(chǎn)品帶來的好處。我們還提供了一些靈感來源,以幫助您克服這一創(chuàng)意障礙!
目錄
1、什么是網(wǎng)站模型?
2、為什么要設(shè)計網(wǎng)站模型?
3、逐步設(shè)計網(wǎng)站模型
4、網(wǎng)站樣機(jī)設(shè)計的最佳做法
5、為什么您的網(wǎng)站模型應(yīng)具有響應(yīng)性?
6、設(shè)計師如何制作響應(yīng)式模型?
7、模板資源
一、什么是網(wǎng)站模型?
在Web設(shè)計領(lǐng)域,網(wǎng)站模型是網(wǎng)站外觀的高保真模擬。網(wǎng)站模型將線框的結(jié)構(gòu)和邏輯與最終產(chǎn)品將具有的圖像,圖形和UI元素結(jié)合在一起。
但是,盡管網(wǎng)站模型不包括您將在原型和最終產(chǎn)品中看到的過渡和可用功能,但它們通常包括基本的導(dǎo)航和交互。簡而言之,樣機(jī)可以幫助我們定義:
信息架構(gòu):您如何邏輯和分層地組織網(wǎng)站信息
用戶流程:用戶如何與您的網(wǎng)站和導(dǎo)航UX交互
視覺層次結(jié)構(gòu)和布局:所有元素如何顯示在您的網(wǎng)頁上,它們的大小和相對位置以及之間的間距
顏色:幾乎總是包含您將在最終產(chǎn)品中使用的配色方案
字體:包含最終產(chǎn)品將具有的確切字體類型,大小和粗體
圖片:使用SVG和高質(zhì)量圖片,它們可以完全反映出最終產(chǎn)品中將包含的圖片
相互作用:
簡而言之,網(wǎng)站模型可幫助您定義產(chǎn)品的所有重要因素,以確保在開始昂貴的編碼之前就可能獲得最佳的用戶體驗。因為在此階段,您所做的任何更改都將由您支付。
二、為什么要設(shè)計網(wǎng)站模型?
設(shè)計網(wǎng)站模型是個好主意,原因有很多。簡短的答案是,它可以更有效地將您的產(chǎn)品推向市場,降低開發(fā)成本,并增加其長期成功的機(jī)會。這是如何做:
盡早發(fā)現(xiàn)設(shè)計錯誤
將網(wǎng)站模型組合在一起時,無論從功能上還是從外觀上,您都可以看到您的設(shè)計是否真正有效。它們使您可以迭代設(shè)計,直到達(dá)到完美的美學(xué)和諧。
構(gòu)建網(wǎng)站屏幕模型可以幫助您在最終開發(fā)的產(chǎn)品之前掩蓋不適合的視覺組件。在樣機(jī)階段,您已經(jīng)在評估元素之間的視覺層次。
盡早實施有價值的反饋
網(wǎng)站模型還使您有機(jī)會在開始任何編碼之前從客戶和利益相關(guān)者那里獲得有價值的反饋。向客戶提供高保真,可點擊的網(wǎng)站模型是使他們確信您的設(shè)計方法適合其產(chǎn)品的絕佳方法。
您還將有機(jī)會進(jìn)行一批用戶測試,以幫助確保您以對目標(biāo)用戶角色友好的方式設(shè)計產(chǎn)品。除了發(fā)布后的錯誤修復(fù)和持續(xù)更新之外,這將防止以后產(chǎn)生巨大的開發(fā)成本。
改善與開發(fā)團(tuán)隊的協(xié)作和溝通
網(wǎng)站模型縮小了跨職能團(tuán)隊之間作為溝通工具的差距,并確保順利進(jìn)行設(shè)計交接。移交過程是產(chǎn)品開發(fā)中至關(guān)重要的時刻。當(dāng)您將最終設(shè)計交給開發(fā)人員時,需要他們提供將原型編碼成生動,令人呼吸的產(chǎn)品所需的資產(chǎn)和指南。
完整的網(wǎng)站模型,理想情況下是與包含樣式指南,設(shè)計規(guī)范,樣式和組件的設(shè)計系統(tǒng)結(jié)合在一起,可確保產(chǎn)品沒有不確定性,從而幫助開發(fā)人員。
設(shè)計和開發(fā)之間來回的往來將更少,因為每個人都將擁有他們所需的信息,并且您將避免進(jìn)行昂貴的返工。
三、逐步設(shè)計網(wǎng)站模型
如果不適合任何人,則設(shè)計網(wǎng)站模型是沒有意義的。在使用網(wǎng)站樣機(jī)工具時牢記用戶,將幫助您更快地設(shè)計成功的相關(guān)網(wǎng)站。因此,以下許多步驟很大程度上取決于用戶測試和研究。
就像這樣:定義一個最小的可行產(chǎn)品,創(chuàng)建您的模型,與用戶進(jìn)行測試,解決問題,然后再次測試直到用戶滿意為止。
1.用戶研究
識別市場機(jī)會
但是,在您甚至夢想設(shè)計網(wǎng)站模型之前,您還需要回答一些重要問題。
您的網(wǎng)站是干什么的?是的,這聽起來似乎很明顯,但是您聽說過多少個網(wǎng)站是從一個目標(biāo)和受眾開始的,然后在開發(fā)后又以另一種方式轉(zhuǎn)向?
提出這個重要問題可以節(jié)省很多時間。在此階段進(jìn)行調(diào)整并完全改變您的想法是可以的,也是絕對可以原諒的。
創(chuàng)建用戶角色
這導(dǎo)致我們進(jìn)行用戶研究。當(dāng)您認(rèn)為自己對網(wǎng)站的主要目標(biāo)有一個清晰的了解時,那就是該到那里去詢問潛在用戶是否真正需要它的時候了。事實證明,他們還需要其他東西,從而使您的想法發(fā)生變化。在線調(diào)查以及咖啡店訪談非常適合識別市場需求。
確定了要為網(wǎng)站用戶解決的問題后,您需要在開始制作網(wǎng)站樣機(jī)之前具體了解用戶角色(您網(wǎng)站的主要用戶)的身份。您可以在用戶研究階段收集此類信息,匯總數(shù)據(jù)并從大眾中創(chuàng)建單個角色。
角色數(shù)量取決于您的項目,但請記?。涸缴僭胶?。設(shè)計網(wǎng)站模型時,記住兩到三個角色要容易一些,而不是20個,這會使最終產(chǎn)品更具凝聚力。
信息架構(gòu)
既然您已經(jīng)擁有了用戶角色,那么在您為他們設(shè)計網(wǎng)站模型之前,請確保已對您的信息體系結(jié)構(gòu)進(jìn)行了深思熟慮。為什么不邀請適合那些角色的人參加卡片分類測試?
卡片分類是一種用戶測試,可幫助您確定用戶的最佳站點地圖。在此階段執(zhí)行此操作將幫助您確定在網(wǎng)站上組織信息的最佳方式,以便您的用戶可以輕松找到它,從而帶來令人敬畏的用戶體驗。
現(xiàn)在,您已經(jīng)掌握了來自用戶研究階段的所有重要信息,接下來您可以袖手旁觀,開始設(shè)計網(wǎng)站模型。
啟動網(wǎng)站模型的主要方法有兩種:從線框開始或直接跳入設(shè)計模型。在Justinmind,我們建議您采用第一個選項,以清晰地了解屏幕上顯示的元素,元素的位置–元素彼此之間的關(guān)系以及它們的作用。
在本循序漸進(jìn)指南中,我們將假定您已經(jīng)準(zhǔn)備好原理圖,并已完成結(jié)構(gòu),UI布局,層次結(jié)構(gòu)和功能的映射。因此,讓我們開始使其看起來更漂亮!
2.平面設(shè)計-使您的網(wǎng)站模型更漂亮
導(dǎo)航和號召性用語
要特別注意導(dǎo)航元素和號召性用語的設(shè)計。它們需要清晰,易于理解和大膽,但決不能壓倒一切。
視覺層次結(jié)構(gòu),例如在相關(guān)字段旁邊放置標(biāo)簽,以及在較長的輸入字段中將相關(guān)主題分組在一起,可以提高可讀性。確保您考慮了不同的按鈕設(shè)計概念,大小,陰影以及如何使用它們。
顏色
色彩心理在用戶體驗中起著關(guān)鍵作用,并且可能對用戶產(chǎn)生深遠(yuǎn)的情感影響。選擇具有出色UX的配色方案,同時使您的品牌更令人難忘,這是很有意義的。
色彩可以使您的網(wǎng)站元素具有對比感和層次感,使其使用起來更加直觀,并且更加引人注目。另一方面,錯誤地選擇顏色可能會使您的產(chǎn)品在用戶看到產(chǎn)品的那一刻就沉沒。
一個明顯的例子是將CTA按鈕設(shè)為紅色,該顏色通常與刪除和錯誤相關(guān)。
我們建議使用諸如Adobe Color CC之類的顏色組合工具來查找要在您的網(wǎng)站或應(yīng)用程序模型中使用的互補(bǔ)色。
圖像和圖標(biāo)
對于圖像,質(zhì)量至關(guān)重要。記住–您的模型應(yīng)盡可能接近您的最終產(chǎn)品。您應(yīng)該始終將目標(biāo)放在高質(zhì)量的PNG或SVG文件上。實際上,通過Justinmind,您可以充分利用我們與Photoshop的集成來設(shè)計醒目的,像素完美的交互式PSD模型!
對于UI元素,始終堅持使用UI套件始終是一個好主意,以便用戶已經(jīng)熟悉您使用的設(shè)計語言。在Justinmind網(wǎng)站上可以下載許多UI套件,用于Web,iOS和Android,以及許多免費(fèi)的圖標(biāo)集和模板。
版式
排版是引導(dǎo)用戶關(guān)注,提高整體理解力以及確定網(wǎng)站模型中元素和文本層次結(jié)構(gòu)的絕佳工具。
但是,太多的字體可能會發(fā)生沖突并導(dǎo)致震撼的體驗。作為一般的經(jīng)驗法則,您應(yīng)該努力在網(wǎng)站模型中使用不超過兩種或三種不同的字體。只需更改字體的大小和粗體,就可以幫助定義對比度和層次結(jié)構(gòu)。
對于您包含在網(wǎng)站模型中的任何正文文本,其行距的目標(biāo)是140-180%。對于標(biāo)題,標(biāo)題和縮影,請確保您的文本永遠(yuǎn)不會局促!
內(nèi)容
當(dāng)我們談?wù)摼W(wǎng)站模型中的內(nèi)容時,我們通常同時指文本和圖像。盡早考慮內(nèi)容是一個好主意,因為它通常會影響網(wǎng)站模型的布局和設(shè)計。
您決定在模型階段包含多少內(nèi)容取決于您正在設(shè)計的網(wǎng)站的類型以及用戶進(jìn)行測試所需的最少信息,我們將在下面詳細(xì)介紹。
但是,用文本和圖像填充產(chǎn)品的內(nèi)容區(qū)域通??梢詭椭脩舸_切地了解產(chǎn)品完成后的外觀。盡管可以僅在每個文本框中粘貼Lorem Ipsum,但我們還是建議嘗試使用真實的標(biāo)題和標(biāo)題文本來幫助您全面理解網(wǎng)站模型并了解每個屏幕的功能。
3.添加互動
對網(wǎng)站模型的圖形設(shè)計進(jìn)行排序后,就該添加一些交互設(shè)計了。如前所述,我們認(rèn)為樣機(jī)應(yīng)該是可單擊的,否則,在與利益相關(guān)者交流想法,進(jìn)行用戶測試以及與開發(fā)人員協(xié)作時,樣機(jī)的效率將大大降低。
當(dāng)您向網(wǎng)站模型中添加交互時,請專注于產(chǎn)品中的基本導(dǎo)航,而不是其高級功能。您應(yīng)該以添加足夠的交互元素為目標(biāo),以便用戶可以瀏覽網(wǎng)站模型,輕松地逐頁傳遞。
用戶在模型中流動
用戶流是用戶在瀏覽您的網(wǎng)站模型時從進(jìn)入到退出所遵循的路徑。您可以根據(jù)用戶角色瀏覽網(wǎng)站的方式來映射這些內(nèi)容。這里有些例子:
對于已建立的每個用戶流,訂購網(wǎng)站模型的頁面,并添加用戶實現(xiàn)模型所需的導(dǎo)航交互設(shè)計。
4.用戶測試
建立布局,視覺設(shè)計和基本交互之后,就可以開始用戶測試了。您可以通過許多不同的方式對網(wǎng)站模型進(jìn)行用戶測試。但是,我們同意可用性極客在網(wǎng)站可用性測試中的職位,即可用性測試主要分為三類:探索性,評估性和比較性。
探索性的:在產(chǎn)品開發(fā)的早期用于評估初步設(shè)計或模型的有效性和可用性,以及用戶的思維過程和概念理解。
評估:在產(chǎn)品開發(fā)中途使用,或用作技術(shù)評估的整體可用性測試。評估該技術(shù)的實時試驗,以確定其滿意度,有效性和整體可用性。
比較:比較兩個或多個教學(xué)技術(shù)產(chǎn)品或設(shè)計,并區(qū)分每種產(chǎn)品的優(yōu)缺點。
在可點擊的網(wǎng)站模型上的用戶測試應(yīng)側(cè)重于探索性方面。這樣做的目的是測試樣機(jī),以了解用戶對設(shè)計的理解程度。可以理解。
5.應(yīng)用更改,迭代和更多用戶測試
此步驟很簡單,但通常需要重復(fù)幾次。收集用戶反饋并在網(wǎng)站模型中進(jìn)行適當(dāng)?shù)男迯?fù)。然后再次測試。最重要的是:您越早解決問題并進(jìn)行迭代,它就會越便宜。
6.開發(fā)人員交接
網(wǎng)站和應(yīng)用程序模型設(shè)計的最后階段是將其交給開發(fā)團(tuán)隊,這樣他們就可以開始對產(chǎn)品進(jìn)行編碼。但這并不像直接向他們發(fā)送樣機(jī)并說“玩得開心!”那樣簡單。
您需要確保為開發(fā)人員提供相關(guān)的功能規(guī)范文檔,例如樣式表,項目范圍,站點地圖,用戶流程,用戶要求等。
值得慶幸的是,Justinmind樣機(jī)工具使您在創(chuàng)建網(wǎng)站樣機(jī)后只需單擊幾下即可生成此功能規(guī)范文檔!
四、網(wǎng)站樣機(jī)設(shè)計的最佳做法
說明你的樣機(jī)是一個模型
確保您的用戶和涉眾在交互性方面了解該模型實際上提供了什么。例如,如果某個視頻無法播放,并且他們實際上無法注冊您的地板清潔劑的終生供應(yīng),請確保在提供樣機(jī)時明確說明!
始終與合適的用戶進(jìn)行測試
返回您的用戶角色,并確保您正在與符合您已定義的用戶類型的人員進(jìn)行測試。
簡而言之,毫無意義地問一個對您的網(wǎng)站模型的主要目標(biāo)或主題不感興趣的人。
在模型中構(gòu)建備用用戶路徑
利用各種潛在的用戶流(而不僅僅是一種)來構(gòu)建您的網(wǎng)站模型。這為您提供了關(guān)于用戶如何瀏覽產(chǎn)品并與之交互的更可行的見解。它還打開了與用戶討論有關(guān)產(chǎn)品導(dǎo)航的區(qū)域。
客戶端測試就是用戶測試
您應(yīng)該將客戶端測試視為用戶測試的一種形式。在開始測試之前,請確保客戶端測試人員具有明確的說明。僅僅因為這是他們的最終產(chǎn)品,當(dāng)您給他們一個模型進(jìn)行測試時,不要將其他三個技巧視為理所當(dāng)然!
五、為什么您的網(wǎng)站模型應(yīng)具有響應(yīng)性?
設(shè)計具有響應(yīng)能力的網(wǎng)站模型是一個好主意,因為它可以幫助您實現(xiàn)以下目標(biāo):
移動優(yōu)先索引
您可能之前曾聽說過,自2019年中以來,Google已采用移動優(yōu)先的方法對網(wǎng)站建立索引,以提高總體可用性。
您可能會問“移動優(yōu)先索引如何改善總體可用性?” 答案在于以下事實:超過50%的Web流量來自移動設(shè)備。那么,有意義的是,無論用戶是否在臺式機(jī)上查看Google,Google都因此將最適合這些設(shè)備的網(wǎng)站編入索引。
吸引更多用戶
由于響應(yīng)能力是影響網(wǎng)站可用性的一個方面,并且由于創(chuàng)建網(wǎng)站模型的整個想法都是為了改善用戶體驗,因此盡快處理響應(yīng)因素是有意義的。
此外,如果您設(shè)計了一個響應(yīng)式樣機(jī),則意味著當(dāng)您將其編碼為生動,令人呼吸的產(chǎn)品時,您已經(jīng)可以接觸到更多的用戶。使您的網(wǎng)站具有響應(yīng)性,對業(yè)務(wù)和可用性都是有意義的!
存錢
響應(yīng)式樣機(jī)設(shè)計如何幫助您省錢?通過從設(shè)計的早期階段就著眼于響應(yīng)能力,可以確保避免進(jìn)一步的設(shè)計問題。
確保您的網(wǎng)站適合較小的設(shè)備,使您可以重新考慮整個網(wǎng)站的設(shè)計。它迫使您提出一種在臺式機(jī)和移動設(shè)備上都看起來不錯的布局。
反過來,當(dāng)涉及到元素,字體和整體布局的位置時,這也將使您能夠發(fā)現(xiàn)潛在的設(shè)計問題。
開發(fā)后必須對設(shè)計的布局進(jìn)行更改可能會導(dǎo)致成本高昂并引起很多麻煩。節(jié)省您所有麻煩,使您的網(wǎng)站模型能夠快速響應(yīng)。
確定最佳信息層次
通常在手機(jī),平板電腦甚至智能手表等移動設(shè)備的屏幕上,由于這些設(shè)備的分辨率較低,因此顯示的內(nèi)容會更少。這意味著您需要確保用戶首先查看最重要的內(nèi)容,這會影響您如何考慮網(wǎng)站樣機(jī)的用戶流。
六、設(shè)計師如何制作響應(yīng)式模型?
設(shè)計人員通過使用斷點來響應(yīng)其模型,斷點是寬度的點,設(shè)計布局可以在其中改變并適應(yīng)較小的分辨率。
結(jié)果,許多設(shè)計師采用了Twitter開發(fā)的Bootstrap框架。Bootstrap框架使用12列網(wǎng)格布局。為什么?因為通過提供將屏幕劃分為不同斷點的最佳安排,這很容易實現(xiàn)響應(yīng)式設(shè)計。
七、模板資源
想設(shè)計一個網(wǎng)站樣機(jī),但不確定從哪里開始?關(guān)鍵是靈感!在設(shè)計網(wǎng)站模型時,UI設(shè)計是首要任務(wù)。
但是,要創(chuàng)建引人入勝的UI設(shè)計,您可能想要提高您的圖形設(shè)計技能,或者只是查看一些一般的藝術(shù)和設(shè)計網(wǎng)站。您肯定會從這些圖形設(shè)計之一中得到啟發(fā)。
盡管UI設(shè)計對于用戶體驗很重要,但是要能夠為目標(biāo)受眾創(chuàng)建最佳的用戶體驗,它也可以幫助您徹底了解UX設(shè)計的基礎(chǔ)。
即使您認(rèn)為自己是UX的資深人士,重溫該行業(yè)的最新發(fā)現(xiàn)和發(fā)展也不會有任何傷害。
如果您希望削減成本并以最佳的保證可用性將產(chǎn)品更快地推向市場,那么網(wǎng)站模型是一個明智的主意。它們也是盡早將UX集成到您的設(shè)計中的一種好方法,可確保您從一開始就始終與目標(biāo)用戶保持聯(lián)系。
此外,網(wǎng)站模型可幫助您的團(tuán)隊團(tuán)結(jié)起來,并且是促進(jìn)設(shè)計與開發(fā)之間的協(xié)作和交流的好方法。呈現(xiàn)網(wǎng)站模型也是從利益相關(guān)者處進(jìn)行驗證和購買的好方法。項目經(jīng)理和客戶都將了解設(shè)計的方向以及原因。
最后,在移動優(yōu)先編制索引的時代,創(chuàng)建網(wǎng)站時從一開始就不實施響應(yīng)式設(shè)計是虛擬的,并且是財務(wù)上的自殺。樣機(jī)可以幫助您從一開始就將這種實踐融入您的設(shè)計中,而該項目仍然便宜,熱情和模糊。
填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc