明明可以靠天賦做出好設計,卻偏偏要技巧。
每個開發(fā)團隊都不可避免的需要有做界面設計的人,畢竟當下都是靠顏值打天下??!
但是很多小的團隊沒有全職的ui設計師,或者只能請資歷比較淺的ui設計師,當你需要一個好看又好用的界面時,一定很抓狂,也常抱怨:我不是搞藝術(shù)的,不知道怎么做才好看?。?/em>
但其實,有很多實用的技巧可以讓你的界面更好看,不需要非常專業(yè)的平面設計教育背景就能做到。對于已經(jīng)從事界面設計多年的ui設計師,這些技巧也可以審視自己的設計,是否更接地氣,不是僅僅停留在酷炫的概念設計上。
1.通過改變字體的顏色和粗細來區(qū)分層次結(jié)構(gòu),而不是字體的大小
界面設計中,設計文本樣式時常犯的一個錯誤是,過于依賴字體大小來控制層次結(jié)構(gòu)。
“這段文字重要嗎?讓我們做得更大一點吧?!?/span>
“這段文字比較次要?讓它變小一點咯。”
不要一做設計就想著改變字號的大小上,要多嘗試使用顏色或字體粗細來完成相同的工作。
“這段文字重要嗎?讓我們做得更大膽吧。”
“這段文字比較次要?讓我們使用更淺的顏色咯。”
嘗試并堅持兩種或三種顏色:
主要內(nèi)容用深色(不是全黑色)(如文章的標題)
次要內(nèi)容灰色(如文章發(fā)表日期)
輔助內(nèi)容的淺灰色(可能是頁腳中的版權(quán)聲明)
類似地,兩種字體粗細通常足以應付所有的界面設計:
大多數(shù)文本的正常字體粗細(400或500取決于字體)
較重的字體粗細(600或700)用于您要強調(diào)的文字
用于界面設計的字體粗細不要低于400(細或極細)?;?細體或極細體可以作為大標題,但在較小的屏幕尺寸下,閱讀起來非常困難。如果您正在考慮使用細體來淡化某些文字,請改為使用較淺的顏色或較小的字體。
2.不要在彩色的背景上使用灰色文字
在白色背景上使用淺灰色的文本可以起到淡化的效果,但在彩色背景上使用灰色文本看起來并不理想。
這是因為,我們實際上在白色背景上看灰色的效果是對比度降低。所以,既然是這樣的目的,我們應該使文本更接近背景色,創(chuàng)建層次結(jié)構(gòu),而不再繼續(xù)使用灰色。
如何在彩色背景上降低對比度呢?這邊分享2種方法:
方法A,使用白色文本,然后調(diào)整透明度,讓背景顏色滲透出來,不再與背景形成沖突。
方法B,尋找與背景色同色系的顏色。如果背景是單色,方法A沒有問題。如果碰到的背景是圖片或者有紋理時,方法A會使文字過于枯燥乏味,這時,挑選與背景相同色調(diào)的顏色就是更理想的選擇,不要忘記多調(diào)整一下飽和度和亮度,直到最佳。
3.讓您的陰影帶一點偏移
不要使用較大和擴散的模糊值來讓陰影變得更明顯,一定要記得添加垂直方向的偏移值。
帶偏移的陰影模擬了現(xiàn)實世界中的從上照下來的自然光照,讓界面看上去更自然。
除了外框用這種方式外,輸入框也適用這樣的方式。
推薦拓展閱讀:Material Design Guidelines
4.使用更少的邊界線
當您需要在兩個元素之間創(chuàng)建分割時,請立即停止想用分割線的念頭!雖然分割線是一個好辦法,但不是唯一的方法,使用太多的分割線會讓設計變得繁復和混亂。
這邊提供3個好的設計思路:
思路A,使用陰影來替代,陰影在表現(xiàn)卡片式信息條方便更加出色,不容易用用戶分散注意力。
思路B,使用兩種不同的背景顏色,通常兩種相鄰的元素背景顏色略微不同就可以了,不需要有強烈的對比。如果已經(jīng)使用了兩種顏色做區(qū)分,同時又添加了分割線,這樣就顯得多余啦,真的可以把分割線刪了!
思路C,調(diào)節(jié)額外的間距。讓元素離的遠一點能夠區(qū)分兩個元素,那如何區(qū)分不同類別的元素呢?答案很簡答,那就讓這兩類元素離得更遠一點吧!!
5.不要原本就小的圖標放大使用
如果您設計的頁面(比如著陸頁的“功能”部分)需要用到大的圖標,你可能會調(diào)用一些免費的例如Font Awesome圖標庫,然后放大使用,畢竟這些都是矢量的圖形,尺寸放大了也很清晰嘛!
但是?。?!雖然這些矢量圖標放大了不會模糊,然而它們原本是為16-24像素而“生”的,人為的放大3-4倍絕對會顯得不專業(yè),缺少細節(jié)設計。
如果只有小圖標可以使用,沒有找到原生的大圖標,請嘗試將這個小圖標放在另外一個帶背景顏色的形狀中。
這樣可以讓圖標的尺寸不會人為放大,同時又能滿足大尺寸的需求。當然,最理想的方案是使用原生設計的大圖標,可以在如Heroicons或Iconic上找到。
6.使用多彩的粗邊框線為平淡的設計加點點綴
如果您不是專業(yè)的ui設計師,如何才能讓自己的界面也能有高大上的視覺風格,看上去像設計過的一樣?
一個小技巧就是在某個邊框添加多彩的粗邊框線條,例如,在警報消息的旁邊添加:
或者導航條的底部突出激活的欄目:
或者整個頁面的頂部:
7.并非每個按鈕都需要背景顏色
當用戶在頁面上可以有多個選擇按鈕時,很容易讓用戶陷入理解語義的選擇動作。
像Bootstrap這樣的的框架,通過點選這樣的語義樣式菜單按鈕來進行選擇。
“這是一個積極的行動?讓按鈕變綠?!?/span>
“這是否刪除數(shù)據(jù)?將按鈕設為紅色。”
這樣設計并不是說不對,但是還有一個更重要的緯度不要忽略了:層次結(jié)構(gòu)。
界面設計上的每個觸發(fā)動作在位于金字塔的某個位置,大多少頁面只有一個真正的一級動作,一些不太重要的二級動作,還有幾個很少使用的三級動作。
在設計這些動作時,要充分考慮它們的層級結(jié)構(gòu),要傳達給用戶正確的層級信息。
一級動作:非常明顯的顯示,用實心填充,并用高對比的背景色。
二級動作:明天但不突出??梢圆捎幂喞€,或者較低對比度的背景色。
三級動作:可以發(fā)現(xiàn)但不顯眼。將這些按鈕設計為鏈接是比較合適的做法。?
“取消按鈕要怎么設計呢,它們不應該總是紅色嗎?”
其實不一定,如果取消按鈕不是頁面上的主要動作,那么用二級或三級按鈕可能會更好。
當指引和導向按鈕是一級動作時(例如確認對話框),應該使用紅色背景的按鈕,而取消則用三級按鈕。
如果你喜歡這篇文章,歡迎繼續(xù)關(guān)注25學堂。
全站高品質(zhì)素材免費下載!