讓設(shè)計更高級的實用小技巧
發(fā)布時間:2021-12-17 09:03 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 2712

在做 UI 界面設(shè)計時,有時候看著設(shè)計出來的界面總覺得不大好,但又不知道問題出在哪,這里其實考驗的就是設(shè)計觀察力。資深設(shè)計師之所以強,往往就是強在對設(shè)計細節(jié)的把握能力,他們總能找到你所看不到的細節(jié)問題。大的問題往往一眼就能看出來,但設(shè)計品質(zhì)高低往往就藏在這些設(shè)計細節(jié)中。今天這篇文章,保證看完就能用到自己的工作中。

UI 連載系列!讓設(shè)計更高級的12個實用小技巧

當(dāng)你在設(shè)計一個高效、美觀的 UI 界面時,有時只需要一些小的調(diào)整,就能快速提高設(shè)計的品質(zhì)。有時候僅僅是簡單的調(diào)整就能設(shè)計出讓客戶、用戶和你自己真正滿意的界面。

在這篇文章中,我整理了一些小的設(shè)計技巧,來幫助你快速改進自己的設(shè)計,提高用戶體驗。


適當(dāng)使用文本裝飾元素


UI 連載系列!讓設(shè)計更高級的12個實用小技巧

有些人會拿極簡設(shè)計出來說事,認為不應(yīng)該加多余的文字干擾 ,界面上的內(nèi)容都應(yīng)該遵循有意義這個原則,這沒有問題。但有時候增加文本的目的只是簡單的為了“裝飾”,這樣是可以的。我們不希望所有的設(shè)計都變得平平無奇。

純粹出于裝飾原因而加入一些比較特別的元素也完全沒問題,它可以不遵循可訪問性標(biāo)準(zhǔn),比如顏色對比度特別淺,看不清都沒關(guān)系。只要這些元素不影響用戶體驗就可以。


UI 界面中的不同元素要有區(qū)分度


UI 連載系列!讓設(shè)計更高級的12個實用小技巧

按鈕、通知(文字鏈接)是用戶界面中兩個獨立又重要的元素。如果可以的話,一定要確保用戶在瀏覽你的網(wǎng)站或應(yīng)用時能夠快速且輕松地將它們區(qū)分開來。

按鈕,在大多數(shù)情況下都是最重要的,所以在界面中一定要確保是最突出,并且很容易區(qū)分其他元素(例如:文本鏈接)。


使用更自然的投影


UI 連載系列!讓設(shè)計更高級的12個實用小技巧

設(shè)計過程中我們通常都會用到投影。投影的恰當(dāng)使用,可以有效提高視覺品質(zhì)。在設(shè)計界面時,避免使用比較重的投影,降低不透明度,讓界面看著更加自然。


使用讓視覺更加清晰的字體


UI 連載系列!讓設(shè)計更高級的12個實用小技巧

在設(shè)計中,字體適當(dāng)都使用大寫也是很不錯的。它可以幫助你在設(shè)計中實現(xiàn)元素之間的多樣性和對比度,提高視覺的整體效果。但要確保選擇是合適的字體,行高和字重粗細,確保給用戶呈現(xiàn)的內(nèi)容清晰度。


面包屑導(dǎo)航設(shè)計要便于用戶理解


UI 連載系列!讓設(shè)計更高級的12個實用小技巧

導(dǎo)航的設(shè)計無處不在,通常會應(yīng)用在內(nèi)容比較多的網(wǎng)站上,但有時很難理解它所表達的意思。如果將字體顏色和粗細稍微調(diào)整下, 就可以讓用戶快速確定自己所在站點中的位置,以及他們可能需要去的其他地方。

例如:如果他們通過搜索跳轉(zhuǎn)到某個站點的某個位置,這就特別有用。像上圖中的設(shè)計一樣,始終讓導(dǎo)航鏈接中的最后一項讓它在視覺上與其他有明顯區(qū)別,這樣用戶更加容易理解。


少用過高飽和度的顏色


UI 連載系列!讓設(shè)計更高級的12個實用小技巧

高飽和度的顏色(明亮的藍色、紅色、綠色等)在網(wǎng)站上是挺有視覺沖擊力,并能吸引用戶的注意的。但是如果過度使用它們可能會讓用戶的眼睛感到疲勞,尤其是結(jié)合文本內(nèi)容一起使用的時候。

盡量少地使用高飽和的顏色,你可以嘗試把飽和度降低,增加顏色中的灰度來使顏色變淡,這樣不僅能避免用戶視覺疲勞,還能更加突出重點內(nèi)容,讓用戶閱讀起來更加方便且不被視覺干擾。


使用用戶熟悉便于識別的圖標(biāo)


UI 連載系列!讓設(shè)計更高級的12個實用小技巧

在設(shè)計中使用圖標(biāo)時,最好使用用戶熟悉并便于識別的圖標(biāo),讓用戶能快速理解使用它能做什么。使用不能傳達正確含義的圖標(biāo),只會變成視覺噪音,引起用戶混淆,成為用戶的認知障礙。


使用親密性原則來表達元素之間的關(guān)系


UI 連載系列!讓設(shè)計更高級的12個實用小技巧

版式設(shè)計四大基本原則:對比,重復(fù),對齊,親密性,其中親密性原則是把畫面中相關(guān)元素進行分類,建立某種視覺上的關(guān)聯(lián),實現(xiàn)頁面整體結(jié)構(gòu)清晰度,加快用戶在瀏覽網(wǎng)站或應(yīng)用時的認知。


使用 4pt 基線網(wǎng)格+8pt 網(wǎng)格來做字體排版


UI 連載系列!讓設(shè)計更高級的12個實用小技巧

進行文字排版時,將 4pt 基礎(chǔ)網(wǎng)格 與 8pt 網(wǎng)格 一起使用可以為設(shè)計帶來更加和諧的垂直節(jié)奏。

你只需要使用 4 的倍數(shù)(16、20、24、28 等)的行高值將字體與 4 的基線網(wǎng)格對齊。為什么是 4? 好吧,就我個人而言,我發(fā)現(xiàn)在處理某些文本大小時,過去以 8 的倍數(shù)進行縮放并不是那么通用。


減少標(biāo)題的行高


UI 連載系列!讓設(shè)計更高級的12個實用小技巧

冗長的正文需要足夠的行高來增加可讀性,而標(biāo)題通常要短得多,所以你可以稍微減少間距。

標(biāo)題的推薦行高通常是文本大小的 1 – 1.3 倍,標(biāo)題文字越大,需要的行高就越少。


使用色輪上的鄰近色不容易出錯


UI 連載系列!讓設(shè)計更高級的12個實用小技巧

鄰近色,是最和諧的配色方案之一,當(dāng)你在挑選顏色遇到困難時,它能給你很大的幫助。

一組由“主”、“次”、“再次”組成的鄰近色可以幫你快速構(gòu)建一個簡單的、不會出錯的配色方案。


在設(shè)計中最大化信噪比


UI 連載系列!讓設(shè)計更高級的12個實用小技巧

設(shè)計中的清晰度和可用性可以通過“最大化信號”和“最小化噪音”來實現(xiàn),這反過來又產(chǎn)生了高信噪比。

你可以通過確保相關(guān)信息(信號)有效地呈現(xiàn),而不相關(guān)的信息(噪聲)被完全減少或刪除來實現(xiàn)這一點。剪掉絨毛。使事情更加清晰,刪減無關(guān)信息,強化重要信息,提高信噪比達到提高界面設(shè)計品質(zhì)的目的。


零基礎(chǔ)教你做UI
我要自學(xué)網(wǎng)商城 ¥50 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC