首頁 > 網頁教程 > 設計分享 > UI設計分享:用戶界面設計的10個小技巧

UI設計分享:用戶界面設計的10個小技巧

時間:2019-10-04    來源:Aa設計專題

我們大多數人開始接觸 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公式=顏色變淺

相關推薦
20個精致漂亮的視頻播放器界面設計欣賞及點評
視覺設計:頁面構建的審圖與細節
15個超棒的無線移動終端UI設計案例賞析
響應式網頁設計正成為移動互聯網大勢所趨
淺談界面設計中的結構設計
分享:5招助你打造更加簡潔的用戶界面
淺談界面UI設計中的包容性設計
國外精彩網頁界面設計案例賞析
Photoshop教程:提高IOS設計效率的30個要訣分享
網站專題頁面的視覺設計及結構布局要點分享
另眼觀看用戶界面扁平化設計的不足之外
產品視覺設計與用戶心理的有趣現象
10個漂亮實用并附帶源碼的Web設計教程分享
優秀移動APP應用圖標設計指南
在視覺設計中對像素的深度解析
什么是扁平設計?如何創建扁平化設計風格?
色彩情感對用戶體驗設計的影響
換湯不換藥?看應用們如何“為iOS 7設計”
高效UI設計秘笈 Photoshop CC使用技巧圖文教程
界面設計教程:如何做好扁平化設計之交互篇
移動應用圖標配色訣竅 APP界面配色設計教程
產品設計教程:提升用戶使用黏性的6個誘惑手段
扁平化:回歸真實的設計
iOS7用戶界面設計的10個準則分享
UI設計師自學記:抄襲別人,超越自己
Windows Phone 8 UI設計指南分享
APP設計經典:Pinterest的交互細節
從引導頁設計說起 談談如何提高產品體驗
游戲網站設計案例分享:聊聊那些讓頁面更加出彩的設計
8個評價UI設計作品好壞的標準
20個最火爆的Behance網頁設計及UI案例解析
大開眼界!2014年最逆天的UI設計
界面設計必備:全方位科普常用的字體規范
手機屏幕尺寸擴展如何影響用戶體驗設計?
那些丑丑的應用圖標 設計的人是怎么想的
產品設計:FEEDLY創始人再聊改版實戰經驗

精彩推薦

熱門教程

北京pk10走势图下载 四川金7乐玩法规则 快乐918棋牌游戏 骑车赚钱的软件是哪个 福彩中奖机 体彩快中彩中奖规则 金牛棋牌游戏网站 中国联通股票 开元棋牌官方版下载 麻将群里群主能赚钱吗 足彩17146奖金多少 山东十一选五360 325棋牌下载官网