ui/ux網(wǎng)站模型設(shè)計(jì)指南

　　網(wǎng)站模型可幫助您節(jié)省資金，同時(shí)提高最終產(chǎn)品的用戶體驗(yàn)。在ui/ux網(wǎng)站模型設(shè)計(jì)指南中了解操作方法!
 

　　ui/ux網(wǎng)站模型設(shè)計(jì)指南?它與線框和原型有何不同?您如何將一個(gè)人放在一起?這些正是我們在設(shè)計(jì)網(wǎng)站模型時(shí)所要研究的問題的類型。
 

　　除了研究網(wǎng)站模型所包含的基本方面之外，我們還將研究如何在模型工具中設(shè)計(jì)模型，以及它可以給您，您的團(tuán)隊(duì)和最終產(chǎn)品帶來的好處。我們還提供了一些靈感來源，以幫助您克服這一創(chuàng)意障礙!
 

　　目錄
 

　　1、什么是網(wǎng)站模型?

　　2、為什么要設(shè)計(jì)網(wǎng)站模型?

　　3、逐步設(shè)計(jì)網(wǎng)站模型

　　4、網(wǎng)站樣機(jī)設(shè)計(jì)的最佳做法

　　5、為什么您的網(wǎng)站模型應(yīng)具有響應(yīng)性?

　　6、設(shè)計(jì)師如何制作響應(yīng)式模型?

　　7、模板資源
 

一、什么是網(wǎng)站模型?
 

　　在Web設(shè)計(jì)領(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)品的所有重要因素，以確保在開始昂貴的編碼之前就可能獲得最佳的用戶體驗(yàn)。因?yàn)樵诖穗A段，您所做的任何更改都將由您支付。
 

二、為什么要設(shè)計(jì)網(wǎng)站模型?
 

　　設(shè)計(jì)網(wǎng)站模型是個(gè)好主意，原因有很多。簡短的答案是，它可以更有效地將您的產(chǎn)品推向市場，降低開發(fā)成本，并增加其長期成功的機(jī)會。這是如何做：
 

　　盡早發(fā)現(xiàn)設(shè)計(jì)錯誤
 

　　將網(wǎng)站模型組合在一起時(shí)，無論從功能上還是從外觀上，您都可以看到您的設(shè)計(jì)是否真正有效。它們使您可以迭代設(shè)計(jì)，直到達(dá)到完美的美學(xué)和諧。
 

　　構(gòu)建網(wǎng)站屏幕模型可以幫助您在最終開發(fā)的產(chǎn)品之前掩蓋不適合的視覺組件。在樣機(jī)階段，您已經(jīng)在評估元素之間的視覺層次。
 

　　盡早實(shí)施有價(jià)值的反饋
 

　　網(wǎng)站模型還使您有機(jī)會在開始任何編碼之前從客戶和利益相關(guān)者那里獲得有價(jià)值的反饋。向客戶提供高保真，可點(diǎn)擊的網(wǎng)站模型是使他們確信您的設(shè)計(jì)方法適合其產(chǎn)品的絕佳方法。
 

　　您還將有機(jī)會進(jìn)行一批用戶測試，以幫助確保您以對目標(biāo)用戶角色友好的方式設(shè)計(jì)產(chǎn)品。除了發(fā)布后的錯誤修復(fù)和持續(xù)更新之外，這將防止以后產(chǎn)生巨大的開發(fā)成本。
 

　　改善與開發(fā)團(tuán)隊(duì)的協(xié)作和溝通
 

　　網(wǎng)站模型縮小了跨職能團(tuán)隊(duì)之間作為溝通工具的差距，并確保順利進(jìn)行設(shè)計(jì)交接。移交過程是產(chǎn)品開發(fā)中至關(guān)重要的時(shí)刻。當(dāng)您將最終設(shè)計(jì)交給開發(fā)人員時(shí)，需要他們提供將原型編碼成生動，令人呼吸的產(chǎn)品所需的資產(chǎn)和指南。
 

　　完整的網(wǎng)站模型，理想情況下是與包含樣式指南，設(shè)計(jì)規(guī)范，樣式和組件的設(shè)計(jì)系統(tǒng)結(jié)合在一起，可確保產(chǎn)品沒有不確定性，從而幫助開發(fā)人員。
 

　　設(shè)計(jì)和開發(fā)之間來回的往來將更少，因?yàn)槊總€(gè)人都將擁有他們所需的信息，并且您將避免進(jìn)行昂貴的返工。
 

三、逐步設(shè)計(jì)網(wǎng)站模型
 

　　如果不適合任何人，則設(shè)計(jì)網(wǎng)站模型是沒有意義的。在使用網(wǎng)站樣機(jī)工具時(shí)牢記用戶，將幫助您更快地設(shè)計(jì)成功的相關(guān)網(wǎng)站。因此，以下許多步驟很大程度上取決于用戶測試和研究。
 

　　就像這樣：定義一個(gè)最小的可行產(chǎn)品，創(chuàng)建您的模型，與用戶進(jìn)行測試，解決問題，然后再次測試直到用戶滿意為止。
 

　　1.用戶研究
 

　　識別市場機(jī)會
 

　　但是，在您甚至夢想設(shè)計(jì)網(wǎng)站模型之前，您還需要回答一些重要問題。
 

　　您的網(wǎng)站是干什么的?是的，這聽起來似乎很明顯，但是您聽說過多少個(gè)網(wǎng)站是從一個(gè)目標(biāo)和受眾開始的，然后在開發(fā)后又以另一種方式轉(zhuǎn)向?
 

　　提出這個(gè)重要問題可以節(jié)省很多時(shí)間。在此階段進(jìn)行調(diào)整并完全改變您的想法是可以的，也是絕對可以原諒的。
 

　　創(chuàng)建用戶角色
 

　　這導(dǎo)致我們進(jìn)行用戶研究。當(dāng)您認(rèn)為自己對網(wǎng)站的主要目標(biāo)有一個(gè)清晰的了解時(shí)，那就是該到那里去詢問潛在用戶是否真正需要它的時(shí)候了。事實(shí)證明，他們還需要其他東西，從而使您的想法發(fā)生變化。在線調(diào)查以及咖啡店訪談非常適合識別市場需求。
 

　　確定了要為網(wǎng)站用戶解決的問題后，您需要在開始制作網(wǎng)站樣機(jī)之前具體了解用戶角色(您網(wǎng)站的主要用戶)的身份。您可以在用戶研究階段收集此類信息，匯總數(shù)據(jù)并從大眾中創(chuàng)建單個(gè)角色。
 

　　角色數(shù)量取決于您的項(xiàng)目，但請記?。涸缴僭胶谩ＴO(shè)計(jì)網(wǎng)站模型時(shí)，記住兩到三個(gè)角色要容易一些，而不是20個(gè)，這會使最終產(chǎn)品更具凝聚力。
 

　　信息架構(gòu)
 

　　既然您已經(jīng)擁有了用戶角色，那么在您為他們設(shè)計(jì)網(wǎng)站模型之前，請確保已對您的信息體系結(jié)構(gòu)進(jìn)行了深思熟慮。為什么不邀請適合那些角色的人參加卡片分類測試?
 

　　卡片分類是一種用戶測試，可幫助您確定用戶的最佳站點(diǎn)地圖。在此階段執(zhí)行此操作將幫助您確定在網(wǎng)站上組織信息的最佳方式，以便您的用戶可以輕松找到它，從而帶來令人敬畏的用戶體驗(yàn)。
 

　　現(xiàn)在，您已經(jīng)掌握了來自用戶研究階段的所有重要信息，接下來您可以袖手旁觀，開始設(shè)計(jì)網(wǎng)站模型。
 

　　啟動網(wǎng)站模型的主要方法有兩種：從線框開始或直接跳入設(shè)計(jì)模型。在Justinmind，我們建議您采用第一個(gè)選項(xiàng)，以清晰地了解屏幕上顯示的元素，元素的位置–元素彼此之間的關(guān)系以及它們的作用。
 

　　在本循序漸進(jìn)指南中，我們將假定您已經(jīng)準(zhǔn)備好原理圖，并已完成結(jié)構(gòu)，UI布局，層次結(jié)構(gòu)和功能的映射。因此，讓我們開始使其看起來更漂亮!
 

　　2.平面設(shè)計(jì)-使您的網(wǎng)站模型更漂亮
 

　　導(dǎo)航和號召性用語
 

　　要特別注意導(dǎo)航元素和號召性用語的設(shè)計(jì)。它們需要清晰，易于理解和大膽，但決不能壓倒一切。
 

　　視覺層次結(jié)構(gòu)，例如在相關(guān)字段旁邊放置標(biāo)簽，以及在較長的輸入字段中將相關(guān)主題分組在一起，可以提高可讀性。確保您考慮了不同的按鈕設(shè)計(jì)概念，大小，陰影以及如何使用它們。
 

　　顏色
 

　　色彩心理在用戶體驗(yàn)中起著關(guān)鍵作用，并且可能對用戶產(chǎn)生深遠(yuǎn)的情感影響。選擇具有出色UX的配色方案，同時(shí)使您的品牌更令人難忘，這是很有意義的。
 

　　色彩可以使您的網(wǎng)站元素具有對比感和層次感，使其使用起來更加直觀，并且更加引人注目。另一方面，錯誤地選擇顏色可能會使您的產(chǎn)品在用戶看到產(chǎn)品的那一刻就沉沒。
 

　　一個(gè)明顯的例子是將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文件上。實(shí)際上，通過Justinmind，您可以充分利用我們與Photoshop的集成來設(shè)計(jì)醒目的，像素完美的交互式PSD模型!
 

　　對于UI元素，始終堅(jiān)持使用UI套件始終是一個(gè)好主意，以便用戶已經(jīng)熟悉您使用的設(shè)計(jì)語言。在Justinmind網(wǎng)站上可以下載許多UI套件，用于Web，iOS和Android，以及許多免費(fèi)的圖標(biāo)集和模板。
 

　　版式
 

　　排版是引導(dǎo)用戶關(guān)注，提高整體理解力以及確定網(wǎng)站模型中元素和文本層次結(jié)構(gòu)的絕佳工具。
 

　　但是，太多的字體可能會發(fā)生沖突并導(dǎo)致震撼的體驗(yàn)。作為一般的經(jīng)驗(yàn)法則，您應(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)容時(shí)，我們通常同時(shí)指文本和圖像。盡早考慮內(nèi)容是一個(gè)好主意，因?yàn)樗ǔ绊懢W(wǎng)站模型的布局和設(shè)計(jì)。
 

　　您決定在模型階段包含多少內(nèi)容取決于您正在設(shè)計(jì)的網(wǎng)站的類型以及用戶進(jìn)行測試所需的最少信息，我們將在下面詳細(xì)介紹。
 

　　但是，用文本和圖像填充產(chǎn)品的內(nèi)容區(qū)域通?？梢詭椭脩舸_切地了解產(chǎn)品完成后的外觀。盡管可以僅在每個(gè)文本框中粘貼Lorem Ipsum，但我們還是建議嘗試使用真實(shí)的標(biāo)題和標(biāo)題文本來幫助您全面理解網(wǎng)站模型并了解每個(gè)屏幕的功能。
 

　　3.添加互動
 

　　對網(wǎng)站模型的圖形設(shè)計(jì)進(jìn)行排序后，就該添加一些交互設(shè)計(jì)了。如前所述，我們認(rèn)為樣機(jī)應(yīng)該是可單擊的，否則，在與利益相關(guān)者交流想法，進(jìn)行用戶測試以及與開發(fā)人員協(xié)作時(shí)，樣機(jī)的效率將大大降低。
 

　　當(dāng)您向網(wǎng)站模型中添加交互時(shí)，請專注于產(chǎn)品中的基本導(dǎo)航，而不是其高級功能。您應(yīng)該以添加足夠的交互元素為目標(biāo)，以便用戶可以瀏覽網(wǎng)站模型，輕松地逐頁傳遞。
 

　　用戶在模型中流動
 

　　用戶流是用戶在瀏覽您的網(wǎng)站模型時(shí)從進(jìn)入到退出所遵循的路徑。您可以根據(jù)用戶角色瀏覽網(wǎng)站的方式來映射這些內(nèi)容。這里有些例子：
 

　　對于已建立的每個(gè)用戶流，訂購網(wǎng)站模型的頁面，并添加用戶實(shí)現(xiàn)模型所需的導(dǎo)航交互設(shè)計(jì)。
 

　　4.用戶測試
 

　　建立布局，視覺設(shè)計(jì)和基本交互之后，就可以開始用戶測試了。您可以通過許多不同的方式對網(wǎng)站模型進(jìn)行用戶測試。但是，我們同意可用性極客在網(wǎng)站可用性測試中的職位，即可用性測試主要分為三類：探索性，評估性和比較性。
 

　　探索性的：在產(chǎn)品開發(fā)的早期用于評估初步設(shè)計(jì)或模型的有效性和可用性，以及用戶的思維過程和概念理解。
 

　　評估：在產(chǎn)品開發(fā)中途使用，或用作技術(shù)評估的整體可用性測試。評估該技術(shù)的實(shí)時(shí)試驗(yàn)，以確定其滿意度，有效性和整體可用性。
 

　　比較：比較兩個(gè)或多個(gè)教學(xué)技術(shù)產(chǎn)品或設(shè)計(jì)，并區(qū)分每種產(chǎn)品的優(yōu)缺點(diǎn)。
 

　　在可點(diǎn)擊的網(wǎng)站模型上的用戶測試應(yīng)側(cè)重于探索性方面。這樣做的目的是測試樣機(jī)，以了解用戶對設(shè)計(jì)的理解程度?？梢岳斫?。
 

　　5.應(yīng)用更改，迭代和更多用戶測試
 

　　此步驟很簡單，但通常需要重復(fù)幾次。收集用戶反饋并在網(wǎng)站模型中進(jìn)行適當(dāng)?shù)男迯?fù)。然后再次測試。最重要的是：您越早解決問題并進(jìn)行迭代，它就會越便宜。
 

　　6.開發(fā)人員交接
 

　　網(wǎng)站和應(yīng)用程序模型設(shè)計(jì)的最后階段是將其交給開發(fā)團(tuán)隊(duì)，這樣他們就可以開始對產(chǎn)品進(jìn)行編碼。但這并不像直接向他們發(fā)送樣機(jī)并說“玩得開心!”那樣簡單。
 

　　您需要確保為開發(fā)人員提供相關(guān)的功能規(guī)范文檔，例如樣式表，項(xiàng)目范圍，站點(diǎn)地圖，用戶流程，用戶要求等。
 

　　值得慶幸的是，Justinmind樣機(jī)工具使您在創(chuàng)建網(wǎng)站樣機(jī)后只需單擊幾下即可生成此功能規(guī)范文檔!
 

四、網(wǎng)站樣機(jī)設(shè)計(jì)的最佳做法
 

　　說明你的樣機(jī)是一個(gè)模型
 

　　確保您的用戶和涉眾在交互性方面了解該模型實(shí)際上提供了什么。例如，如果某個(gè)視頻無法播放，并且他們實(shí)際上無法注冊您的地板清潔劑的終生供應(yīng)，請確保在提供樣機(jī)時(shí)明確說明!
 

　　始終與合適的用戶進(jìn)行測試
 

　　返回您的用戶角色，并確保您正在與符合您已定義的用戶類型的人員進(jìn)行測試。
 

　　簡而言之，毫無意義地問一個(gè)對您的網(wǎng)站模型的主要目標(biāo)或主題不感興趣的人。
 

　　在模型中構(gòu)建備用用戶路徑
 

　　利用各種潛在的用戶流(而不僅僅是一種)來構(gòu)建您的網(wǎng)站模型。這為您提供了關(guān)于用戶如何瀏覽產(chǎn)品并與之交互的更可行的見解。它還打開了與用戶討論有關(guān)產(chǎn)品導(dǎo)航的區(qū)域。
 

　　客戶端測試就是用戶測試
 

　　您應(yīng)該將客戶端測試視為用戶測試的一種形式。在開始測試之前，請確?？蛻舳藴y試人員具有明確的說明。僅僅因?yàn)檫@是他們的最終產(chǎn)品，當(dāng)您給他們一個(gè)模型進(jìn)行測試時(shí)，不要將其他三個(gè)技巧視為理所當(dāng)然!
 

五、為什么您的網(wǎng)站模型應(yīng)具有響應(yīng)性?
 

　　設(shè)計(jì)具有響應(yīng)能力的網(wǎng)站模型是一個(gè)好主意，因?yàn)樗梢詭椭鷮?shí)現(xiàn)以下目標(biāo)：
 

　　移動優(yōu)先索引
 

　　您可能之前曾聽說過，自2019年中以來，Google已采用移動優(yōu)先的方法對網(wǎng)站建立索引，以提高總體可用性。
 

　　您可能會問“移動優(yōu)先索引如何改善總體可用性?” 答案在于以下事實(shí)：超過50%的Web流量來自移動設(shè)備。那么，有意義的是，無論用戶是否在臺式機(jī)上查看Google，Google都因此將最適合這些設(shè)備的網(wǎng)站編入索引。
 

　　吸引更多用戶
 

　　由于響應(yīng)能力是影響網(wǎng)站可用性的一個(gè)方面，并且由于創(chuàng)建網(wǎng)站模型的整個(gè)想法都是為了改善用戶體驗(yàn)，因此盡快處理響應(yīng)因素是有意義的。
 

　　此外，如果您設(shè)計(jì)了一個(gè)響應(yīng)式樣機(jī)，則意味著當(dāng)您將其編碼為生動，令人呼吸的產(chǎn)品時(shí)，您已經(jīng)可以接觸到更多的用戶。使您的網(wǎng)站具有響應(yīng)性，對業(yè)務(wù)和可用性都是有意義的!
 

　　存錢
 

　　響應(yīng)式樣機(jī)設(shè)計(jì)如何幫助您省錢?通過從設(shè)計(jì)的早期階段就著眼于響應(yīng)能力，可以確保避免進(jìn)一步的設(shè)計(jì)問題。
 

　　確保您的網(wǎng)站適合較小的設(shè)備，使您可以重新考慮整個(gè)網(wǎng)站的設(shè)計(jì)。它迫使您提出一種在臺式機(jī)和移動設(shè)備上都看起來不錯的布局。
 

　　反過來，當(dāng)涉及到元素，字體和整體布局的位置時(shí)，這也將使您能夠發(fā)現(xiàn)潛在的設(shè)計(jì)問題。
 

　　開發(fā)后必須對設(shè)計(jì)的布局進(jìn)行更改可能會導(dǎo)致成本高昂并引起很多麻煩。節(jié)省您所有麻煩，使您的網(wǎng)站模型能夠快速響應(yīng)。
 

　　確定最佳信息層次
 

　　通常在手機(jī)，平板電腦甚至智能手表等移動設(shè)備的屏幕上，由于這些設(shè)備的分辨率較低，因此顯示的內(nèi)容會更少。這意味著您需要確保用戶首先查看最重要的內(nèi)容，這會影響您如何考慮網(wǎng)站樣機(jī)的用戶流。
 

六、設(shè)計(jì)師如何制作響應(yīng)式模型?
 

　　設(shè)計(jì)人員通過使用斷點(diǎn)來響應(yīng)其模型，斷點(diǎn)是寬度的點(diǎn)，設(shè)計(jì)布局可以在其中改變并適應(yīng)較小的分辨率。
 

　　結(jié)果，許多設(shè)計(jì)師采用了Twitter開發(fā)的Bootstrap框架。Bootstrap框架使用12列網(wǎng)格布局。為什么?因?yàn)橥ㄟ^提供將屏幕劃分為不同斷點(diǎn)的最佳安排，這很容易實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。
 

七、模板資源
 

　　想設(shè)計(jì)一個(gè)網(wǎng)站樣機(jī)，但不確定從哪里開始?關(guān)鍵是靈感!在設(shè)計(jì)網(wǎng)站模型時(shí)，UI設(shè)計(jì)是首要任務(wù)。
 

　　但是，要創(chuàng)建引人入勝的UI設(shè)計(jì)，您可能想要提高您的圖形設(shè)計(jì)技能，或者只是查看一些一般的藝術(shù)和設(shè)計(jì)網(wǎng)站。您肯定會從這些圖形設(shè)計(jì)之一中得到啟發(fā)。
 

　　盡管UI設(shè)計(jì)對于用戶體驗(yàn)很重要，但是要能夠?yàn)槟繕?biāo)受眾創(chuàng)建最佳的用戶體驗(yàn)，它也可以幫助您徹底了解UX設(shè)計(jì)的基礎(chǔ)。
 

　　即使您認(rèn)為自己是UX的資深人士，重溫該行業(yè)的最新發(fā)現(xiàn)和發(fā)展也不會有任何傷害。
 

　　如果您希望削減成本并以最佳的保證可用性將產(chǎn)品更快地推向市場，那么網(wǎng)站模型是一個(gè)明智的主意。它們也是盡早將UX集成到您的設(shè)計(jì)中的一種好方法，可確保您從一開始就始終與目標(biāo)用戶保持聯(lián)系。
 

　　此外，網(wǎng)站模型可幫助您的團(tuán)隊(duì)團(tuán)結(jié)起來，并且是促進(jìn)設(shè)計(jì)與開發(fā)之間的協(xié)作和交流的好方法。呈現(xiàn)網(wǎng)站模型也是從利益相關(guān)者處進(jìn)行驗(yàn)證和購買的好方法。項(xiàng)目經(jīng)理和客戶都將了解設(shè)計(jì)的方向以及原因。
 

　　最后，在移動優(yōu)先編制索引的時(shí)代，創(chuàng)建網(wǎng)站時(shí)從一開始就不實(shí)施響應(yīng)式設(shè)計(jì)是虛擬的，并且是財(cái)務(wù)上的自殺。樣機(jī)可以幫助您從一開始就將這種實(shí)踐融入您的設(shè)計(jì)中，而該項(xiàng)目仍然便宜，熱情和模糊。