是什么使一個(gè)好UI設(shè)計(jì)容易閱讀？是什么讓用戶輕松瀏覽？設(shè)計(jì)師如何創(chuàng)造一個(gè)閃亮的UI？任何軟件產(chǎn)品的關(guān)鍵部分都是用戶界面。

好的UI設(shè)計(jì)，用戶甚至?xí)雎运Ｈ绻龅貌缓?，就?huì)成為用戶使用產(chǎn)品的絆腳石。為了更有效地設(shè)計(jì)能夠滿足用戶使用的設(shè)計(jì)UI，大多數(shù)設(shè)計(jì)師都遵循界面設(shè)計(jì)的原則。本期我們將帶您了解UI設(shè)計(jì)三大原則！

一，美學(xué)性

創(chuàng)造視覺美學(xué)UI這些小規(guī)則通常有以下幾點(diǎn)：

1.規(guī)則1：光來自天空

陰影是一個(gè)寶貴的線索，告訴我們要檢查哪些用戶界面元素。

當(dāng)光線從天而降時(shí)，它照亮事物的頂部，在其下方投下陰影。

頂部較輕，底部較暗。UI也是如此。

就像我們所有面部特征的底部都有小陰影一樣，幾乎每一個(gè)UI元素的底部有陰影。

我們的屏幕是平的，但是細(xì)節(jié)的設(shè)計(jì)會(huì)讓屏幕上幾乎所有的東西看起來都是立體的。

2.規(guī)則2:黑白優(yōu)先。

在添加顏色之前，灰度設(shè)計(jì)可以簡化視覺設(shè)計(jì)中最復(fù)雜的元素，使設(shè)計(jì)師能夠?qū)Ｗ⒂陂g距和布局元素。

先設(shè)計(jì)黑白。從更困難的問題開始，讓應(yīng)用程序在各個(gè)方面都很漂亮和可用，但是不需要顏色的幫助，最后添加顏色。

這是為了讓應(yīng)用程序看起來“干凈”和“簡單”簡單可靠的方法。在太多的地方有太多的顏色往往很容易搞砸設(shè)計(jì)。

之后，在灰度站點(diǎn)添加一種顏色可以簡單有效地吸引眼球。

通過修改單一色調(diào)的飽和度和亮度，可以產(chǎn)生多種顏色——深色、淺色、背景、強(qiáng)調(diào)色、引人注目的顏色，但這樣不會(huì)讓人眼花繚亂。

在一種或兩種基本色調(diào)中使用多種顏色是一種可靠的方法，突出或中和元素，不會(huì)混淆設(shè)計(jì)。

3.規(guī)則3：將空白加倍

為了使UI看上去很有設(shè)計(jì)感，需要增加大量的喘息空間。

空白是構(gòu)成優(yōu)秀視覺布局最容易被忽視和未充分利用的元素之一。

很多時(shí)候，空白被視為一個(gè)空白空間，從而浪費(fèi)了屏幕空間。

空格對(duì)于更好、更簡化的布局是必要的，因?yàn)樗罱K會(huì)讓用戶專注于他們打算看到的東西。大量的空白可以使一些混亂的界面看起來簡單和吸引人。

4.規(guī)則4：為每個(gè)屏幕創(chuàng)建一個(gè)焦點(diǎn)

為了吸引觀眾對(duì)特定設(shè)計(jì)元素的注意，強(qiáng)調(diào)是一種策略。這可能是內(nèi)容區(qū)域、圖像、鏈接或按鈕等。

在大多數(shù)設(shè)計(jì)領(lǐng)域，包括建筑、景觀設(shè)計(jì)和時(shí)裝設(shè)計(jì)。

二，清晰

為了通過視覺元素準(zhǔn)確地傳遞給用戶信息和導(dǎo)航，不讓用戶迷失方向，通常有以下規(guī)則：

1.規(guī)則1：避免不必要的復(fù)雜性

始終以盡可能少的步驟和屏幕為目標(biāo)。

使用底部工作表和模式窗口等覆蓋物來壓縮數(shù)據(jù)，并減少應(yīng)用程序的占用空間。同時(shí)，確保以獨(dú)立和獨(dú)立的方式組織信息。任務(wù)子任務(wù)可以結(jié)合起來。

重要的是，不要將子任務(wù)隱藏在用戶想不到的頁面上。屏幕及其內(nèi)容按照清晰合理的分類組織。

同樣，完成任務(wù)所需的步驟總是減少到最小值。

當(dāng)只需要一兩個(gè)操作時(shí)，不要讓用戶經(jīng)歷繁瑣的點(diǎn)擊障礙。三擊規(guī)則是最實(shí)用的UI其中一個(gè)設(shè)計(jì)原則是指用戶應(yīng)該能夠?qū)崿F(xiàn)任何操作或訪問他們需要的任何信息，通過在應(yīng)用程序中的任何位置點(diǎn)擊不超過3次。

最重要的是，永遠(yuǎn)不要要求用戶重新輸入他們已經(jīng)提供的信息。這會(huì)讓用戶扔掉他們的設(shè)備，直接放棄使用。

2.規(guī)則2：提供清晰的標(biāo)記

這一原則涉及到直觀的布局和清晰的信息標(biāo)簽。即使是第一次使用的用戶，瀏覽應(yīng)用程序也不應(yīng)該以任何方式混淆。

相反，探索界面應(yīng)該是有趣的，并在不知不覺中舒適地學(xué)習(xí)。

確保頁面結(jié)構(gòu)簡單，邏輯清晰。

用戶永遠(yuǎn)不應(yīng)該懷疑他們在軟件中的位置，也不應(yīng)該不斷思考如何達(dá)到他們想要的位置。

3.規(guī)則3：促進(jìn)視覺清晰度

良好的視覺組織提高了可用性和可讀性，使用戶能夠快速找到他們正在尋找的信息，并更有效地使用界面。

在設(shè)計(jì)布局時(shí)，避免一次在屏幕上顯示過多的信息。構(gòu)建網(wǎng)格系統(tǒng)設(shè)計(jì)，避免視覺混亂。

應(yīng)用內(nèi)容組織的一般原則，如將類似的項(xiàng)目組合在一起，對(duì)項(xiàng)目進(jìn)行編號(hào)，并使用標(biāo)題和提示文本。

這些規(guī)則用figma、sketch等軟件就能輔助做的不錯(cuò)。https://js.design/special/sketch/

三，隱喻

簡化視覺認(rèn)知，讓用戶盡快“認(rèn)識(shí)”界面、圖形元素符合用戶對(duì)現(xiàn)實(shí)世界的聯(lián)想，更符合用戶對(duì)界面的慣性認(rèn)知。

在UI在設(shè)計(jì)中使用隱喻可以讓用戶在現(xiàn)實(shí)世界和數(shù)字體驗(yàn)之間建立聯(lián)系。

好的隱喻會(huì)與用戶腦海中真實(shí)世界的過去體驗(yàn)有很強(qiáng)的聯(lián)系。隱喻常用于熟悉不熟悉的事物。

以桌面上的回收站為例，它包含已刪除的文件——但它不是真正的垃圾桶。它是可視化的，可以幫助用戶更容易地理解這個(gè)概念。

在為UI選擇隱喻時(shí)，選擇能讓用戶掌握概念模型最精細(xì)細(xì)節(jié)的隱喻。

例如，在詢問用于支付處理的信用卡的詳細(xì)信息時(shí)，可以參考現(xiàn)實(shí)世界中的實(shí)體卡作為例子。