位置:設計主頁 > 設計作品 > UI設計 >

用戶界面設計的10個小技巧

來源:優設網 作者:Aa設計專題 時間:2019-09-30 10:06

我們大多數人開始接觸 UI 設計的時候,只是知道很少或者根本不懂任何設計理論。盡管萬事開頭難,我們還是需要通過許多設計類的書籍和文章來學習如何配色、排版、布局等。

設計不是簡單可以用顏色,形狀和文字表示的,應該是一個「言之有物」的過程,即每當我們改變字號、添加陰影或改變顏色時,一定要有必須這樣做的理由。在本文中,我將分享一些我在設計用戶界面時學到的東西,以及我在學習過程中的新發現。

用顏色和字重來設計層級,而不只是字號的大小

當面對需要信息層級結構的內容時,放大字號表示強調和重要性通常不能解決問題,如下圖所示:

信息層級并不僅僅是不同尺寸字體的組合,而是由字體尺寸,字重,字體顏色形成對比的正確組合。對比差異越大,層級關系表現越明顯。

1. 如何創建更好的對比度?

不要僅用大小不同,但是字重相同的文字來創建對比度和層次結構。

主要內容使用更粗更黑的字體樣式,次要內容使用更小更細的字體樣式。

從深到淺創建三種不同的文字顏色(參見下圖的示例)。

通常我使用我的基色作為正文的文字顏色。

在設計中敢于運用大的字間距(比如標題24px,正文16px,標簽文字10px等)。

更大的間距=更好的對比度

查看https://www.modularscale.com/,這是一個用來創建更好的字體層次結構的在線計算器。

對比度=尺寸+字重+顏色

最后,請務必檢查其對比度。

不要創建多種色調的黑色

我們都知道使用黑色文本顏色會導致讀者眼睛疲勞,所以我們的解決方案是創建更黑的變體作為替代。我們可以使用不同的不透明度的黑色作為解決方案,而不是選擇 3 個或更多的顏色值。

在下圖的例子中,我使用黑色作為主要顏色(000),并根據應用的位置(即主要內容、次要內容等)降低了不透明度。

運用數學原理理解顏色

我們大多數人都不太擅長選擇正確的顏色組合,每當我們看到具有精心配色的設計時,我們都會問自己:「他們是怎么做到的?」

直到我了解到在色相、飽和度、亮度(HSB)上進行簡單的加法和減法就能發揮魔法,在這個公式里我們將使用 HSB 的色彩模式,而不是 RGB 模式。你可以輕松擺脫彩色背景上無聊的白色,并把它變成畢加索的作品。(如下圖)

1. 那么HSB中的加法和減法怎么算呢?

實際上有兩種方法,如下圖,兩種方法都具有相同的基色#B9F4BC(圓形背景色),但圖標中文件夾和裝飾條的顏色則不同。在我們開始時,記住第一個字母相當于色相,其次是飽和度,然后是亮度。

方法A

在方法A中,我們可以看到在整個圖形(圓形背景,文件夾,裝飾條)中,色相H值保持 123 不變,而飽和度S和亮度B是變化的。

現在,當我們關注基色的飽和度S值是 24,亮度B值是 96 時,當我們為文件夾創建更深的綠色時,這兩個值都會改變。飽和度從 24 變為 40(增加+16),亮度從 96 變為 82(減少-14),這表明為了形成良好的對比度,飽和度的變化需要與亮度成反比例調整。裝飾條也是一樣的,使用文件夾的飽和度S值和亮度B值作為基礎值,飽和度從 40 移動到 44(增加+4),亮度從 82 變為 75(減少-7)。因此,我們得到了這個公式:

  • 較暗的顏色值=飽和度增加,亮度減少
  • 更亮的顏色值=飽和度減少,亮度增加

每當我想知道我的設計應該使用什么樣的正確顏色時,這個公式幫助了我。我了解到最好的起點是有一個基色,然后以基色為基礎,保持色相值相同,調整飽和度和亮度的值。

方法B

在方法B中,同樣的原理(上面的公式)依然適用,但是色相H值發生了變化。我們之前在各種設計材料中使用的顏色模式 RGB 和 CMY 現在對我們來說很有用。

RGB 分別代表紅色、綠色和藍色,而 CMY 代表青色、洋紅色和黃色。我剛開始設計時并不了解這兩種顏色模式的重要性,直到我無意中發現可以將 RGB 和 CMY 進行顏色組合。

現在在方法B中,如果想要在基色的基礎上有一個較暗的變化,我們需要在調色板中將顏色選擇器往靠近 RGB 的方向移動,反之將顏色選擇器往靠近 CMY 的方向移動選擇較淺的顏色。如下圖:

由于我們想要在文件夾圖標中使用比基色#B9F4BC(圓形背景)更深的顏色,我們需要將顏色選擇器移動到最靠近的 RGB(本例為藍色)的位置。如果想要一個顏色較淺的文件夾,把選擇器移動到左邊靠近 CMY(本例為黃色)的位置。

RGB 導致顏色變深,CMY 導致顏色變淺的情況比較多。

通過移動顏色選擇器得到我們想要的顏色后,基于方法A中的公式,我們得到以下的顏色公式:

  • 紅色,綠色,藍色(RGB)+方法A公式=顏色變深
  • 青色,洋紅色,黃色(CMY)+方法A公式=顏色變淺

使用留白間距分隔組

除了在兩個組之間添加一條線來表示區分之外,在組與組之間使用一個寬敞的留白的解決方案會更好、更容易的。正如鄰近定律所說:相互靠近或接近的物體,往往被歸在一起。

在我下方的例子中,我的目的是通過在標題和作者之間使用 24px 的大留白來創建一個分隔。

利用顏色分隔行

做列表界面往往很無聊,因為只需要不斷地復制組件就可以了。但是對于用戶,如果行與行之間沒有很明顯的區別,閱讀起來會很困難。因此,除了使用線條之外,在列表中添加彩色背景對于閱讀中的用戶來說很有效,并且對于我們設計師來說也會更有樂趣。

用正片疊底代替文本陰影

設計標題組件或在圖像上添加文本是非常具有挑戰性的,特別是如果圖像背景是動態的(或時不時變化)。對于動態圖像背景的文本,通常的解決方案是給文本添加陰影,但這并不能提高用戶的可讀性。而且它會增加文字周圍的視覺混亂,因為它們填補了文字之間的留白。

對于一些人來說,黑白顏色疊加是一種對設計很有幫助的解決方案。但是最近,我發現使用正片疊底是可以作為漸變填充的混合工具使用。

這樣做要比在圖像上創建一個黑色背景并減少其不透明度容易得多。此外,正片疊底效果的灰度比例還能使圖像的其他部分保持其自然的顏色,并使文本所在的部分圖像更暗一點,來提高文本的可讀性。

行的長度

大多數設計師經常使內容的長度更長,以便符合頁面。但這樣會使用戶造成視覺疲勞。每行 45-65 個字符是理想的。你是否曾遇到過像這樣兩難的情況:減少行的長度以達到理想狀態,但這樣做會在右邊留下一個像下圖這樣的大空白。

不要猶豫,使整個文本與頁面垂直居中,如下圖,這樣就可以減小空白區域了。

組件化提升效率

不是基于組件的設計會使設計不一致。當你意識到你已經制作了 5 種卡片界面,10 個按鈕,5 種標題樣式等等。

在開始為特定內容創建界面之前,請試著查看之前創建的設計,您可能看到可以回收利用的樣式模板。

我們可以使用「Aa的興趣打卡11Day」的樣式,并將其替換為「Aa 的潛水日記」的內容,而不是重新「發明輪子」并為「Aa 的潛水日記」創建另一張界面卡片。這將為設計人員節省時間,同時還能保持界面一致。

使用品牌色做為強調色

我們通常認為品牌顏色必須占據界面設計顏色的很大一部分。但事實上,在干凈簡潔的布局中,我們很難決定在哪里展示客戶的品牌顏色。好的方案是把它們用作強調色。

突出項目標記

最后,如果你正在創建一個類似下圖的列表設計,請將項目標記、符號或數字放在空白處以突出顯示列表。這將使用戶的可讀性流動不被打擾并且更清晰。

參考資料:https://medium.com/sketch-app-sources/design-cheatsheet-274384775da9

负盈利55打法