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

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

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

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

　　目錄
 

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

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

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

　　4、網(wǎng)站樣機設(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)航和交互。簡而言之，樣機可以幫助我們定義：
 

　　信息架構(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ā)成本，并增加其長期成功的機會。這是如何做：
 

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

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

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

　　盡早實施有價值的反饋
 

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

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

　　改善與開發(fā)團隊的協(xié)作和溝通
 

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

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

　　設(shè)計和開發(fā)之間來回的往來將更少，因為每個人都將擁有他們所需的信息，并且您將避免進行昂貴的返工。
 

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

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

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

　　1.用戶研究
 

　　識別市場機會
 

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

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

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

　　創(chuàng)建用戶角色
 

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

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

　　角色數(shù)量取決于您的項目，但請記住：越少越好。設(shè)計網(wǎng)站模型時，記住兩到三個角色要容易一些，而不是20個，這會使最終產(chǎn)品更具凝聚力。
 

　　信息架構(gòu)
 

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

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

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

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

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

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

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

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

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

　　顏色
 

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

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

　　一個明顯的例子是將CTA按鈕設(shè)為紅色，該顏色通常與刪除和錯誤相關(guān)。
 

　　我們建議使用諸如Adobe Color CC之類的顏色組合工具來查找要在您的網(wǎng)站或應(yīng)用程序模型中使用的互補色。
 

　　圖像和圖標
 

　　對于圖像，質(zhì)量至關(guān)重要。記住–您的模型應(yīng)盡可能接近您的最終產(chǎn)品。您應(yīng)該始終將目標放在高質(zhì)量的PNG或SVG文件上。實際上，通過Justinmind，您可以充分利用我們與Photoshop的集成來設(shè)計醒目的，像素完美的交互式PSD模型!
 

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

　　版式
 

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

　　但是，太多的字體可能會發(fā)生沖突并導(dǎo)致震撼的體驗。作為一般的經(jīng)驗法則，您應(yīng)該努力在網(wǎng)站模型中使用不超過兩種或三種不同的字體。只需更改字體的大小和粗體，就可以幫助定義對比度和層次結(jié)構(gòu)。
 

　　對于您包含在網(wǎng)站模型中的任何正文文本，其行距的目標是140-180%。對于標題，標題和縮影，請確保您的文本永遠不會局促!
 

　　內(nèi)容
 

　　當我們談?wù)摼W(wǎng)站模型中的內(nèi)容時，我們通常同時指文本和圖像。盡早考慮內(nèi)容是一個好主意，因為它通常會影響網(wǎng)站模型的布局和設(shè)計。
 

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

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

　　3.添加互動
 

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

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

　　用戶在模型中流動
 

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

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

　　4.用戶測試
 

　　建立布局，視覺設(shè)計和基本交互之后，就可以開始用戶測試了。您可以通過許多不同的方式對網(wǎng)站模型進行用戶測試。但是，我們同意可用性極客在網(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è)重于探索性方面。這樣做的目的是測試樣機，以了解用戶對設(shè)計的理解程度?？梢岳斫?。
 

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

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

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

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

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

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

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

　　說明你的樣機是一個模型
 

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

　　始終與合適的用戶進行測試
 

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

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

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

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

　　客戶端測試就是用戶測試
 

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

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

　　設(shè)計具有響應(yīng)能力的網(wǎng)站模型是一個好主意，因為它可以幫助您實現(xiàn)以下目標：
 

　　移動優(yōu)先索引
 

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

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

　　吸引更多用戶
 

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

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

　　存錢
 

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

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

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

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

　　確定最佳信息層次
 

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

六、設(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)站樣機，但不確定從哪里開始?關(guān)鍵是靈感!在設(shè)計網(wǎng)站模型時，UI設(shè)計是首要任務(wù)。
 

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

　　盡管UI設(shè)計對于用戶體驗很重要，但是要能夠為目標受眾創(chuàng)建最佳的用戶體驗，它也可以幫助您徹底了解UX設(shè)計的基礎(chǔ)。
 

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

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

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

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