編輯導(dǎo)語(yǔ)：設(shè)計(jì)師如何創(chuàng)建一個(gè)大放異彩的UI？好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。本文詳細(xì)地給大家整理了UI設(shè)計(jì)的四大原則。一起來(lái)看看吧。

是什么讓一個(gè)好的 UI 設(shè)計(jì)易于閱讀？是什么讓用戶(hù)輕松瀏覽？設(shè)計(jì)師如何創(chuàng)建一個(gè)大放異彩的UI？用戶(hù)界面是任何軟件產(chǎn)品的關(guān)鍵部分。

好的UI設(shè)計(jì)，用戶(hù)甚至?xí)雎运?/p>

如果做得不好，會(huì)成為用戶(hù)使用產(chǎn)品路上的絆腳石。

為了更高效地設(shè)計(jì)能滿(mǎn)足用戶(hù)使用的UI，大多數(shù)設(shè)計(jì)師都遵循界面設(shè)計(jì)原則。

本期我們就帶你了解UI設(shè)計(jì)四大原則！

一、美學(xué)性

為了創(chuàng)建視覺(jué)美學(xué)UI通常有以下這些小規(guī)則：

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

陰影是告訴我們正在查看哪些用戶(hù)界面元素的寶貴線索。

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

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

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

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

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

在添加顏色之前進(jìn)行灰度設(shè)計(jì)可以簡(jiǎn)化視覺(jué)設(shè)計(jì)中最復(fù)雜的元素，這樣設(shè)計(jì)師可以專(zhuān)注于間距和布局元素。

首先設(shè)計(jì)黑白。從更難的問(wèn)題開(kāi)始，讓?xiě)?yīng)用程序在各個(gè)方面都美觀且可用，但不需要顏色的幫助，最后再添加顏色。

這是讓?xiě)?yīng)用程序看起來(lái)“干凈”和“簡(jiǎn)單”的可靠的簡(jiǎn)單方法。在太多地方有太多顏色是往往容易搞砸設(shè)計(jì)。

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

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

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

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

為了使 UI 看起來(lái)很有設(shè)計(jì)感，需要增加很多喘息的空間。

空白是構(gòu)成出色視覺(jué)布局的最容易被忽視和未充分利用的元素之一。

很多時(shí)候，空白被視為空白空間，因此浪費(fèi)了屏幕空間。

空格對(duì)于制作更好和簡(jiǎn)化的布局是必要的，因?yàn)樗罱K使用戶(hù)專(zhuān)注于本來(lái)打算看到的內(nèi)容。大量的空白可以使一些雜亂的界面看起來(lái)簡(jiǎn)單又容易吸引人。

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

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

我們看到大多數(shù)設(shè)計(jì)領(lǐng)域都會(huì)注重焦點(diǎn)的創(chuàng)建，包括建筑、景觀設(shè)計(jì)和時(shí)裝設(shè)計(jì)。

二、清晰

為了通過(guò)視覺(jué)元素傳遞給用戶(hù)信息并導(dǎo)航準(zhǔn)確，不讓用戶(hù)迷失方向，通常有以下幾點(diǎn)規(guī)則：

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

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

使用諸如底部工作表和模式窗口之類(lèi)的覆蓋來(lái)壓縮數(shù)據(jù)并減少應(yīng)用程序的占用空間。同時(shí)，確保自主和獨(dú)立的方式組織信息。可以將將任務(wù)和子任務(wù)組合在一起。

重要的是，不要將子任務(wù)隱藏在用戶(hù)想不到的頁(yè)面上。根據(jù)清晰且合乎邏輯的分類(lèi)組織屏幕及其內(nèi)容。

同樣，始終將完成任務(wù)所需的步驟數(shù)量減少到最小值。

當(dāng)只需要一兩個(gè)操作時(shí)，不要讓用戶(hù)經(jīng)歷繁瑣的點(diǎn)擊障礙。三擊規(guī)則是最實(shí)用的 UI 設(shè)計(jì)原則之一，它指出用戶(hù)應(yīng)該能夠通過(guò)在應(yīng)用程序內(nèi)的任何位置單擊不超過(guò) 3 次來(lái)實(shí)現(xiàn)任何操作或訪問(wèn)他們需要的任何信息。

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

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

這條原則涉及直觀的布局和清晰的信息標(biāo)簽。瀏覽應(yīng)用程序不應(yīng)以任何方式令人困惑，即使初次使用的用戶(hù)也是如此。

相反，對(duì)界面的探索應(yīng)該是有趣的，并在不知不覺(jué)中舒適地學(xué)會(huì)。

確保頁(yè)面架構(gòu)簡(jiǎn)單、合乎邏輯且有清晰的標(biāo)示。

用戶(hù)永遠(yuǎn)不應(yīng)該懷疑他們?cè)谲浖械奈恢茫膊粦?yīng)該不斷思考才能確定如何到達(dá)他們想去的位置。

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

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

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

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

三、隱喻

簡(jiǎn)化視覺(jué)認(rèn)知，讓用戶(hù)能盡快“認(rèn)識(shí)”界面，圖形元素符合用戶(hù)對(duì)真實(shí)世界的聯(lián)想，更符合用戶(hù)對(duì)于界面的慣性認(rèn)知。

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

好的隱喻會(huì)與用戶(hù)腦海中真實(shí)世界的過(guò)去體驗(yàn)產(chǎn)生強(qiáng)烈的聯(lián)系。隱喻常用于使不熟悉的事物變得熟悉。

以桌面上的回收站為例，它包含已刪除的文件——但它不是真正的垃圾箱，它以一種可以幫助用戶(hù)更輕松地理解概念的方式進(jìn)行可視化表示。

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

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

四、用戶(hù)控制

視覺(jué)設(shè)計(jì)要讓用戶(hù)感受到是用戶(hù)在控制界面，而不是被界面所控制。

1. 規(guī)則1：讓行動(dòng)可逆

用戶(hù)應(yīng)該始終能夠快速回溯他們正在做的任何事情。這允許用戶(hù)探索產(chǎn)品而不必?fù)?dān)心失敗，當(dāng)用戶(hù)知道錯(cuò)誤可以很容易地撤消時(shí)，這鼓勵(lì)了對(duì)不熟悉的選項(xiàng)的探索。

相反，如果用戶(hù)必須對(duì)他們采取的每一個(gè)動(dòng)作都非常小心，這會(huì)導(dǎo)致探索速度變慢且令人不安。

當(dāng)用戶(hù)錯(cuò)誤地選擇系統(tǒng)功能時(shí)，“撤消”會(huì)非常有用。在這種情況下，撤消功能用作“緊急出口”，允許用戶(hù)離開(kāi)不需要的狀態(tài)。

例如，當(dāng)用戶(hù)意外刪除電子郵件時(shí)，Gmail 的通知消息帶有撤消選項(xiàng)。

2. 規(guī)則2：適應(yīng)不同水平的用戶(hù)

不同技能水平的用戶(hù)應(yīng)該能夠與不同水平的產(chǎn)品進(jìn)行交互。不要為了新手或臨時(shí)用戶(hù)的易于使用的界面而犧牲專(zhuān)家用戶(hù)。

相反，要嘗試針對(duì)不同用戶(hù)的需求進(jìn)行設(shè)計(jì)，因此，用戶(hù)是專(zhuān)家還是新手并不重要。

添加教程和解釋等功能對(duì)新手用戶(hù)非常有幫助。

一旦用戶(hù)熟悉了產(chǎn)品，用戶(hù)就會(huì)尋找快捷方式來(lái)加快常用操作的速度。

設(shè)計(jì)師應(yīng)該讓有經(jīng)驗(yàn)的用戶(hù)使用快捷方式，從而為他們提供快速路徑。

 

作者：格格學(xué)姐

本文由 @空兩格 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Pexels，基于CC0協(xié)議。

蘭亭妙微(www.0391cbd.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan