設(shè)計(jì)的成功完全取決于用戶如何與之交互。

人們?cè)饺菀桌斫夂吞幚硭麄兊墓ぷ?，他們就越愿意使用該產(chǎn)品。因此，對(duì)于設(shè)計(jì)師來(lái)說(shuō)，重要的是要充分了解人類將如何與界面互動(dòng)，尤其是他的眼睛如何拾取視覺信息的模式，這樣他們才能設(shè)計(jì)出有效的視覺層次結(jié)構(gòu)，即用戶使用的順序。解釋頁(yè)面上的數(shù)據(jù)。

設(shè)計(jì)認(rèn)為我們?cè)绞歉鶕?jù)人類的視覺處理進(jìn)行設(shè)計(jì)，我們就越會(huì)為出色的用戶體驗(yàn)而設(shè)計(jì)。這一切都是關(guān)于使用人類的能力來(lái)幫助他們以更好的方式理解界面。

四個(gè)主要因素可以幫助設(shè)計(jì)師設(shè)計(jì)更好的用戶體驗(yàn)：

首先是形式，并具有更多屬性，如方向、形狀、大小、線寬和線高以及外殼。作為設(shè)計(jì)師，可以使用所有這些屬性來(lái)區(qū)分不同類型的信息。

其次是顏色。這個(gè)特性可以幫助我們根據(jù)用戶的需求設(shè)計(jì)帶有顏色的界面，比如在需要注意的地方使用硬色，使用較少的相反顏色組合來(lái)降低認(rèn)知成本或區(qū)分信息類型等。

空間位置是人們可以感知界面中位置重要性的另一種方式。例如，左上角是最重要的信息。此外，一致的位置可以幫助用戶回憶他們之前接觸過(guò)的界面，這可以幫助他們以更好的方式理解它。

運(yùn)動(dòng)是最后一個(gè)因素，可用于在需要時(shí)吸引用戶的注意力。這是因?yàn)檠劬椭苓呉曈X的形成在檢測(cè)運(yùn)動(dòng)方面非常強(qiáng)大。

格式塔原則：

格式塔原則 是一組解釋人類思維如何感知視圖的規(guī)則。其中一些原則包括：

>人類更喜歡完整的形狀并首先看到它們，因此當(dāng)元素之間有空間時(shí)，我們傾向于自動(dòng)填充間隙。

>人類遵循路線和相同的流程。

>人類先于凹形注意到凸形。

>人類渴望穩(wěn)定，避免不確定性，因此我們尋找穩(wěn)定的對(duì)象。我們的注意力總是被前景吸引，除非我們正在看的圖像不清楚。

>人類將這些元素聯(lián)系在一起，形成有意義的圖像。

>人類對(duì)彼此接近的元素進(jìn)行分組。

>人類在形成圖案的同時(shí)對(duì)相互連接的物體進(jìn)行分類。

>人類尋求平衡，并盡最大努力為設(shè)計(jì)帶來(lái)秩序。

層次結(jié)構(gòu) UI 設(shè)計(jì)模式：

在查看 Web 或桌面應(yīng)用程序時(shí)，人眼傾向于

遵循某些特定模式來(lái)掃描內(nèi)容。這些眼球追蹤模式可以幫助我們?cè)O(shè)計(jì)一個(gè)界面或有效的 UI DESIGN PATTERNS。最常見的描述如下： F模式：

F型：

在文本內(nèi)容較多的應(yīng)用中，F(xiàn)PATTERN主要用于解釋用戶的眼球運(yùn)動(dòng)。可以看出，在查看最上面的水平線或標(biāo)題后，讀者首先垂直掃描屏幕，尋找會(huì)引起他們興趣的重要單詞。找到它們后，他們開始以正常的閱讀方式水平閱讀這些線條。這種做法在重復(fù)時(shí)會(huì)形成一個(gè)類似于字母 F 的圖案。

通過(guò)這種模式可以學(xué)到的一些東西是讀者幾乎不會(huì)閱讀完整的文本。所以正文最重要的部分應(yīng)該在整個(gè)內(nèi)容的前兩三段，重要的關(guān)鍵詞應(yīng)該用標(biāo)題、粗體字和項(xiàng)目符號(hào)突出顯示。

Z 模式：

Z PATTERN 用于包含等量混合內(nèi)容類型（如圖像和文本）的應(yīng)用程序。 在這種情況下，讀者首先查看第一條水平線（通常是主標(biāo)題和/或菜單欄），然后將他們的眼睛移到左下角，掃描放置在中心的任何圖像或其他媒體并重復(fù)該過(guò)程。這種眼球運(yùn)動(dòng)描繪了一個(gè) Z 形圖案。

對(duì)于這種模式，需要注意的是背景和前景應(yīng)該是清晰可辨的。另外，可以看出最上面一行是最適合應(yīng)用重要標(biāo)識(shí)符的地方；左側(cè)最適合徽標(biāo)和標(biāo)題，右側(cè)最適合使用菜單欄進(jìn)行重要操作調(diào)用。中心應(yīng)由描述服務(wù)的圖像或視覺媒體組成，并能夠分隔頂部和底部的文本區(qū)域。

眼睛和顏色：

對(duì)手過(guò)程理論認(rèn)為，顏色感知是由眼睛視網(wǎng)膜中的各種受體系統(tǒng)控制的。這些系統(tǒng)位于視錐細(xì)胞內(nèi)，每個(gè)都有兩種相反的顏色，如黑色和白色、紅色和綠色或黃色和藍(lán)色。每個(gè)系統(tǒng)都會(huì)刺激兩種類型的化學(xué)物質(zhì)，但兩種相反的顏色不能同時(shí)產(chǎn)生相同的化學(xué)物質(zhì)。例如，具有紅色和綠色的系統(tǒng)不能同時(shí)傳輸兩種顏色的化學(xué)物質(zhì)。

這些解釋有助于我們了解在儀表板中使用顏色的重要性。我們不能使用隨機(jī)的顏色組合來(lái)嘗試使儀表板美觀。應(yīng)該少用硬色，并且只在重要的信息部分使用。反色也不宜過(guò)多使用，因?yàn)樗鼈冊(cè)黾恿擞脩舻恼J(rèn)知成本?！?

要記住的要點(diǎn)：

為了設(shè)計(jì)一個(gè)有效的視覺層次和設(shè)計(jì)，設(shè)計(jì)師應(yīng)該牢記幾個(gè)因素。簡(jiǎn)要說(shuō)明如下：

>元素的大小應(yīng)該足夠大，以便用戶輕松查看它們。較大的元素比較小的元素吸引更多的注意力，因?yàn)槿藗儍A向于忽略他們看不清楚的物體。

>應(yīng)該使用明亮但平靜的顏色，因?yàn)樗鼈儠?huì)迫使用戶使用它們。此外，所使用的配色方案應(yīng)該是對(duì)比鮮明的，尤其是在背景和前景元素之間，以幫助用戶輕松區(qū)分它們。

>額外的裝飾字體使用戶難以理解單詞。應(yīng)首選簡(jiǎn)單字體，例如 Arial、Roboto、New Times Roman 等。此外，字體大小應(yīng)至少為 16 像素，以便在各種設(shè)備上輕松可見。

>相似的內(nèi)容應(yīng)該具有相同的對(duì)齊方式，以便用戶可以將它們聯(lián)系在一起。此外，脫離對(duì)齊模式的元素往往會(huì)吸引用戶的更多注意力。

>當(dāng)涉及到設(shè)計(jì)領(lǐng)域時(shí)，邊距是最重要的因素之一。盡管放置得很近的元素給人一種相關(guān)的印象，但所有元素都應(yīng)該以一種清晰且易于找到的方式組織和間隔開。

>每種元素都應(yīng)使用標(biāo)準(zhǔn)形狀，盡管可以向它們添加樣式變化。

>美觀和復(fù)雜的設(shè)計(jì)將無(wú)關(guān)緊要。

>重要的是不要將空白視為額外的空間，而是將其視為重要的設(shè)計(jì)元素。適當(dāng)放置的空格使用戶能夠毫不費(fèi)力地感知每個(gè)元素。

>重要的元素和內(nèi)容應(yīng)放置在人眼首先或比其他人眼更頻繁地掃描的地方。還應(yīng)該通過(guò)使用更大的字體大小、粗體樣式以及對(duì)比色和對(duì)齊方式來(lái)強(qiáng)調(diào)它們。

>形狀、圖標(biāo)包、顏色和字體等一致的樣式主題使用戶將內(nèi)容識(shí)別為相關(guān)的主體。

因?yàn)闊釔鬯栽谝黄?

如果您對(duì)有效的用戶體驗(yàn)有更多看法，可以與設(shè)計(jì)分享，我們?cè)敢饨邮芨嗟慕ㄗh和看法，設(shè)計(jì)是一家熱愛設(shè)計(jì)，在乎用戶體驗(yàn)，以人為本的網(wǎng)站設(shè)計(jì)公司。

希望更多熱愛設(shè)計(jì)的小伙伴加入設(shè)計(jì)，或成為我們的合作伙伴，為創(chuàng)造更好的用戶體驗(yàn)?zāi)繕?biāo)攜手前行。