高級(jí)感UI設(shè)計(jì)三大原則有哪些？你知道嗎
來(lái)源：優(yōu)漫教育
發(fā)布人：UMAN
時(shí)間：2023-11-20 18:01:47
為了更高效地設(shè)計(jì)能滿足用戶使用的UI，大多數(shù)設(shè)計(jì)師都遵循界面設(shè)計(jì)原則。設(shè)計(jì)師如何創(chuàng)建一個(gè)大放異彩的UI？用戶界面是任何軟件產(chǎn)品的關(guān)鍵部分。好的UI設(shè)計(jì)，用戶甚至?xí)雎运?。如果做得不好，?huì)成為用戶使用產(chǎn)品路上的絆腳石。優(yōu)漫教育小編本期我們就帶你了解UI設(shè)計(jì)三大原則！
為了創(chuàng)建視覺(jué)美學(xué)UI通常有以下這些小規(guī)則：
1.規(guī)則1：光來(lái)自天空
陰影是告訴我們正在查看哪些用戶界面元素的寶貴線索。
當(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ì)師可以專注于間距和布局元素。
首先設(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使用戶專注于本來(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é)元素傳遞給用戶信息并導(dǎo)航準(zhǔn)確，不讓用戶迷失方向，通常有以下幾點(diǎn)規(guī)則：
1.規(guī)則1：避免不必要的復(fù)雜性
始終以盡可能少的步驟和屏幕為目標(biāo)。使用諸如底部工作表和模式窗口之類的覆蓋來(lái)壓縮數(shù)據(jù)并減少應(yīng)用程序的占用空間。同時(shí)，確保自主和獨(dú)立的方式組織信息?？梢詫⑷蝿?wù)和子任務(wù)組合在一起。
重要的是，不要將子任務(wù)隱藏在用戶想不到的頁(yè)面上。根據(jù)清晰且合乎邏輯的分類組織屏幕及其內(nèi)容。同樣，始終將完成任務(wù)所需的步驟數(shù)量減少到最小值。
當(dāng)只需要一兩個(gè)操作時(shí)，不要讓用戶經(jīng)歷繁瑣的點(diǎn)擊障礙。三擊規(guī)則是最實(shí)用的UI設(shè)計(jì)原則之一，它指出用戶應(yīng)該能夠通過(guò)在應(yīng)用程序內(nèi)的任何位置單擊不超過(guò)3次來(lái)實(shí)現(xiàn)任何操作或訪問(wèn)他們需要的任何信息。最重要的是，永遠(yuǎn)不要要求用戶重新輸入他們已經(jīng)提供的信息。這可能讓用戶扔掉他們的設(shè)備，直接放棄使用。
2.規(guī)則2：提供清晰的標(biāo)示
這條原則涉及直觀的布局和清晰的信息標(biāo)簽。瀏覽應(yīng)用程序不應(yīng)以任何方式令人困惑，即使初次使用的用戶也是如此。相反，對(duì)界面的探索應(yīng)該是有趣的，并在不知不覺(jué)中舒適地學(xué)會(huì)。確保頁(yè)面架構(gòu)簡(jiǎn)單、合乎邏輯且有清晰的標(biāo)示。用戶永遠(yuǎn)不應(yīng)該懷疑他們?cè)谲浖械奈恢茫膊粦?yīng)該不斷思考才能確定如何到達(dá)他們想去的位置。
3.規(guī)則3：促進(jìn)視覺(jué)清晰度
良好的視覺(jué)組織提高了可用性和易讀性，使用戶能夠快速找到他們正在尋找的信息并更有效地使用界面。設(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)題和提示文本。
三、用戶控制
視覺(jué)設(shè)計(jì)要讓用戶感受到是用戶在控制界面，而不是被界面所控制。
規(guī)則：讓行動(dòng)可逆
用戶應(yīng)該始終能夠快速回溯他們正在做的任何事情。這允許用戶探索產(chǎn)品而不必?fù)?dān)心失敗，當(dāng)用戶知道錯(cuò)誤可以很容易地撤消時(shí)，這鼓勵(lì)了對(duì)不熟悉的選項(xiàng)的探索。相反，如果用戶必須對(duì)他們采取的每一個(gè)動(dòng)作都非常小心，這會(huì)導(dǎo)致探索速度變慢且令人不安。當(dāng)用戶錯(cuò)誤地選擇系統(tǒng)功能時(shí)，“撤消”會(huì)非常有用。在這種情況下，撤消功能用作“緊急出口”，允許用戶離開(kāi)不需要的狀態(tài)。
一、美學(xué)性
為了創(chuàng)建視覺(jué)美學(xué)UI通常有以下這些小規(guī)則：
1.規(guī)則1：光來(lái)自天空
陰影是告訴我們正在查看哪些用戶界面元素的寶貴線索。
當(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ì)師可以專注于間距和布局元素。
首先設(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使用戶專注于本來(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é)元素傳遞給用戶信息并導(dǎo)航準(zhǔn)確，不讓用戶迷失方向，通常有以下幾點(diǎn)規(guī)則：
1.規(guī)則1：避免不必要的復(fù)雜性
始終以盡可能少的步驟和屏幕為目標(biāo)。使用諸如底部工作表和模式窗口之類的覆蓋來(lái)壓縮數(shù)據(jù)并減少應(yīng)用程序的占用空間。同時(shí)，確保自主和獨(dú)立的方式組織信息?？梢詫⑷蝿?wù)和子任務(wù)組合在一起。
重要的是，不要將子任務(wù)隱藏在用戶想不到的頁(yè)面上。根據(jù)清晰且合乎邏輯的分類組織屏幕及其內(nèi)容。同樣，始終將完成任務(wù)所需的步驟數(shù)量減少到最小值。
當(dāng)只需要一兩個(gè)操作時(shí)，不要讓用戶經(jīng)歷繁瑣的點(diǎn)擊障礙。三擊規(guī)則是最實(shí)用的UI設(shè)計(jì)原則之一，它指出用戶應(yīng)該能夠通過(guò)在應(yīng)用程序內(nèi)的任何位置單擊不超過(guò)3次來(lái)實(shí)現(xiàn)任何操作或訪問(wèn)他們需要的任何信息。最重要的是，永遠(yuǎn)不要要求用戶重新輸入他們已經(jīng)提供的信息。這可能讓用戶扔掉他們的設(shè)備，直接放棄使用。
2.規(guī)則2：提供清晰的標(biāo)示
這條原則涉及直觀的布局和清晰的信息標(biāo)簽。瀏覽應(yīng)用程序不應(yīng)以任何方式令人困惑，即使初次使用的用戶也是如此。相反，對(duì)界面的探索應(yīng)該是有趣的，并在不知不覺(jué)中舒適地學(xué)會(huì)。確保頁(yè)面架構(gòu)簡(jiǎn)單、合乎邏輯且有清晰的標(biāo)示。用戶永遠(yuǎn)不應(yīng)該懷疑他們?cè)谲浖械奈恢茫膊粦?yīng)該不斷思考才能確定如何到達(dá)他們想去的位置。
3.規(guī)則3：促進(jìn)視覺(jué)清晰度
良好的視覺(jué)組織提高了可用性和易讀性，使用戶能夠快速找到他們正在尋找的信息并更有效地使用界面。設(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)題和提示文本。
三、用戶控制
視覺(jué)設(shè)計(jì)要讓用戶感受到是用戶在控制界面，而不是被界面所控制。
規(guī)則：讓行動(dòng)可逆
用戶應(yīng)該始終能夠快速回溯他們正在做的任何事情。這允許用戶探索產(chǎn)品而不必?fù)?dān)心失敗，當(dāng)用戶知道錯(cuò)誤可以很容易地撤消時(shí)，這鼓勵(lì)了對(duì)不熟悉的選項(xiàng)的探索。相反，如果用戶必須對(duì)他們采取的每一個(gè)動(dòng)作都非常小心，這會(huì)導(dǎo)致探索速度變慢且令人不安。當(dāng)用戶錯(cuò)誤地選擇系統(tǒng)功能時(shí)，“撤消”會(huì)非常有用。在這種情況下，撤消功能用作“緊急出口”，允許用戶離開(kāi)不需要的狀態(tài)。
相關(guān)推薦
-
【UI培訓(xùn)】：關(guān)于UI設(shè)計(jì)新手常遇到的問(wèn)題及解決方法
UI設(shè)計(jì)新手常遇到的問(wèn)題有哪些？比如，請(qǐng)問(wèn)UI設(shè)計(jì)師每天的工作內(nèi)容是什么樣的？除了做圖還要干什么？還需要哪些技能？個(gè)人職業(yè)規(guī)劃通常什么樣？做圖只是視覺(jué)設(shè)計(jì)師最基礎(chǔ)的工作，除了視覺(jué)執(zhí)行，還需要向上接入PD了解產(chǎn)品需求、在設(shè)計(jì)中驗(yàn)證交互流程，向下跟進(jìn)程序開(kāi)發(fā)、數(shù)據(jù)收…行業(yè)資訊發(fā)布時(shí)間：2022/03/24 查看詳情 -
室內(nèi)設(shè)計(jì)應(yīng)體現(xiàn)文化元素的六大重要思維
無(wú)論是首都北京的故宮，還是西藏的布達(dá)拉宮，其精巧的室內(nèi)裝潢和環(huán)境藝術(shù)，都有誰(shuí)能說(shuō)出這并非出自頂級(jí)的專業(yè)室內(nèi)設(shè)計(jì)師和藝術(shù)大師之手，中國(guó)傳統(tǒng)室內(nèi)設(shè)計(jì)文化也正是傳統(tǒng)東方文化與古典建筑藝術(shù)的精華部分。行業(yè)資訊發(fā)布時(shí)間：2022/03/24 查看詳情 -
UI設(shè)計(jì)培訓(xùn)中有沒(méi)有學(xué)不會(huì)UI的人
UI設(shè)計(jì)培訓(xùn)中有沒(méi)有學(xué)不會(huì)UI的人？?jī)?yōu)漫教育小編要說(shuō)是真的有，就是那些根本不想學(xué)的，就像你永遠(yuǎn)叫不醒一個(gè)裝睡的人。如果你對(duì)ui有強(qiáng)烈的學(xué)習(xí)興趣，想在ui行業(yè)有所建樹(shù)，那么不論你是高中畢業(yè)、大學(xué)畢業(yè)，不論你是有計(jì)算機(jī)基礎(chǔ)、零基礎(chǔ)，不論你是男生、女生，不論你是20歲、30…行業(yè)資訊發(fā)布時(shí)間：2022/04/01 查看詳情
