UI設(shè)計中的7個小技巧

2018-8-29    博博

UI設(shè)計中的7個小技巧

 賀紅陽


如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

原文鏈接:https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

原作者:Adam Wathan & Steve Schoger 

譯:賀紅陽


用設(shè)計戰(zhàn)術(shù)代替天賦,提高我們的設(shè)計能力。


在我們設(shè)計開發(fā)過程中都不可避免的遇到需要做出視覺決策的情況,除了

專業(yè)資深高級設(shè)計師外,其他非專業(yè)設(shè)計師外不管喜歡與否,又或者我們的

公司沒有全職設(shè)計師,需要我們自己為新的產(chǎn)品實現(xiàn)UI。


有時候我們正在攻克一個新項目,并希望它看上去比之前的另一個網(wǎng)站更好。對于我們(技術(shù)人員或者非專業(yè)設(shè)計師來說)難為的說“我永遠(yuǎn)也無法讓這幅畫好看,因為我不是藝術(shù)家?!钡聦嵶C明,有很多技巧可以提高我們的工作水平,而不需要有平面設(shè)計背景。


這里有7個簡單的方法,大家可以使用來改進(jìn)我們的設(shè)計工作。


1使用字體顏色(color)和字體重量(weight)來代替字體大?。╯ize)創(chuàng)建視覺結(jié)構(gòu)層次



當(dāng)我們設(shè)計UI,樣式文本化的時候,常見的錯誤是過于以來字體的大小,也就是字體的字號來控制層次結(jié)構(gòu)。

“這文字重要嗎?那我們就讓它大點兒?!?

“這是次層級文字嗎?那我們就讓它小點兒?!?

不要把所有的重?fù)?dān)都放在字體的大小上,試著使用字體顏色和重量來完成同樣的工作要求。

“這文字重要嗎?那就選用一個字重大些的字體,讓它變得粗些?!?

“這是次層級文字嗎?那我們就用一個明度高些的字體顏色。”

試著并堅持使用2-3種顏色:

用深色而不是黑做主要內(nèi)容,就像一篇文章的標(biāo)題。

灰色用做次層級文字內(nèi)容,像一篇文章的出版日期信息。

更淺的灰用作輔助次次要內(nèi)容,也許是頁腳的版權(quán)聲明信息。


同樣的道理,對于UI工作來說兩種字重通常就足夠了:

就英文字體來說,對于大部分的文本,普通字重(400—500),如果想要強(qiáng)調(diào)的文本可以是(600—700);就中文來講,主要內(nèi)容字體一般在常規(guī)30-34,標(biāo)題和想要強(qiáng)調(diào)的文本中黑36-42


在ui工作中,英文字體遠(yuǎn)離字重在400以下的字體,中文字體遠(yuǎn)離16像素以下的字體。如果你考慮使用更輕的字體重量來淡化一些文字,那就使用一個更淺的顏色或者更小的字體大小代替。


關(guān)于字體重量(font weight)字體粗細(xì)的值:

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 繼承值

font-weight的屬性值有3種指定方法:第1種是關(guān)鍵字法,關(guān)鍵字包括“normal”和“bold”兩個;也是我們常見的;第2種是相對粗細(xì)值法,相對粗細(xì)也是由關(guān)鍵字定義,但是它的粗細(xì)是相對于上級元素的繼承值而言的,包括“bolder”和“l(fā)ighter”兩個;第3種為數(shù)字法,包括從“100”到“900”的9個數(shù)字序列(注意,只能是100、200之類的整百數(shù))。這些數(shù)字序列代表從最細(xì)(100)到最粗(900)的字體粗細(xì)程度。每一個數(shù)字定義的粗細(xì)都要比上一個等級稍微粗一些。

字體的粗和細(xì)這種描述方法本身就是一種相對描述,所謂粗和細(xì)也必須要有一個參照體。例如,在上面介紹的3類屬性值之間需要有一個相互對照匹配的過程,這是一個很難界定的過程。關(guān)鍵字“normal”相當(dāng)于“400”,“bold”相當(dāng)于“700”。除了“normal”和“bold”以外的其他關(guān)鍵字常常會令瀏覽器產(chǎn)生誤解,無法直接和數(shù)值相匹配,此時字體的粗細(xì)程度通常取決于字體本身的設(shè)置。

另外,有的字體看上去比較粗,但是它們的字體描述卻是“Regular、Roman、Book(常規(guī))”、“Medium、Semi-(半)”或者“DemiBold、Bold、Black(黑體)”等字樣,這主要取決于該字體本身“normal”表示的粗細(xì)程度。


2不要在彩色背景板上使用灰色文字


在白色背景下將文本設(shè)置成淺灰色是淡化內(nèi)容重要性的一個好方法。但是在彩色背景此效果就不那么好了。這是因為我們在白色上看灰色是弱化了對比關(guān)系。讓文本顏色更接近背景顏色,實際上創(chuàng)建了信息層次結(jié)構(gòu),而不是使用更亮的灰。

在彩色背景下有兩種方法降低對比度:

1減少白色文本的透明度

使用白色白色文本,降低不透明度。讓背景顏色稍微滲透些,以與背景不沖突的方式淡化文本

2.基于背景,選一個顏色

當(dāng)你的背景是圖片或是圖案;或者當(dāng)降低文字的透明度太枯燥或是文字降低透明度被沖淡時,這種方法都優(yōu)于降低透明度的方法。

選擇一個和背景相似的顏色,調(diào)整它的飽和度和亮度直到你覺得合適為止。


3.偏移卡片的投影

不要使用大的模糊和擴(kuò)展值,這樣會使得卡片的陰影更明顯,所以添加一個垂直偏移量。它會看上去更自然,因為它模擬了一個從上往下發(fā)光的光源,就像我們真實世界中經(jīng)??吹降哪菢?。


這種內(nèi)嵌式陰影可以很好的用在輸入表單上

如果你有興趣學(xué)習(xí)更多關(guān)于陰影設(shè)計的知識, Material Design是很好的設(shè)計指南(https://material.io/design/environment/elevation.html)


4盡可能少使用分割線和描邊

當(dāng)你需要在兩個元素之間創(chuàng)建分割時,試著不使用分割線。

雖然分割線是區(qū)分兩個元素的好方法,但它并不是唯一的方法,使用太多分割線會讓你的設(shè)計感覺很雜亂。

下次當(dāng)你發(fā)現(xiàn)自己想要使用分割線的時候,試試下面的方法:

1使用卡片投影

卡片投影是一個非常好的區(qū)分元素的輪廓方式,就像邊框分割線一樣,完成同樣的目標(biāo)但它更巧妙而不分散注意力

2使用兩種不同背景顏色

為相鄰的元素添加稍微不同的背景顏色通常是在他們之間創(chuàng)建區(qū)別的好方法。如果你已經(jīng)使用了不同的背景顏色,又使用了邊框,那請試著把邊框刪掉,你可能不需要它。

3添加額外的空間,也就是留白。

除了簡單地增加距離之外,還有什么更好的方法在元素之間創(chuàng)建分離呢?在空間上加大更多的距離(更多的留白)是一種好的方法,在不引入任何新的UI組件元素時來區(qū)分元素

5.不要放大本來應(yīng)該很小的圖標(biāo)

如果你正在設(shè)計一個可以使用一些大圖標(biāo)的頁面,像一些登錄頁面的“特色”部分,你可能本能的使用免費圖標(biāo)庫里的圖標(biāo),然后放大它們的尺寸直到符合你的需要。

兩個超棒的免費圖標(biāo)庫分享給大家:

1FONT AWESOME (https://fontawesome.com/icons?d=gallery)

2 Zondicons(http://www.zondicons.com/)


“它們畢竟是矢量圖,所以如果你放大尺寸質(zhì)量是不會受到影響的對吧?”

雖然我們增大矢量圖片的尺寸它們的質(zhì)量是不會下降的,但是當(dāng)我們把它們放大到3倍或者4倍的時候,那些原來用16-24px繪制的圖標(biāo)永遠(yuǎn)不會看起來非常的專業(yè)。因為它們?nèi)鄙偌?xì)節(jié),并且總是感覺不成比例的矮胖矮胖的。

如果你只有小圖標(biāo),試著把它放在另一個圖形里,并且給這個圖形一個背景色:

這可以讓你的圖標(biāo)尺寸更接近原始圖標(biāo)尺寸,同時仍就充滿大的空間。如果你有足夠的預(yù)算,你也可以使用高級優(yōu)質(zhì)圖標(biāo)集做設(shè)計,在大的尺寸上使用大的圖標(biāo),付費圖標(biāo)庫如Heroicons和Iconic。

1  Heroicons  (http://www.heroicons.com/)

2   Iconic(https://useiconic.com/)


6.在平淡的設(shè)計中使用超重的彩色的邊框

如果你不是一名平面設(shè)計師,相比其他作品里的漂亮攝影照片或者顏色豐富的插圖作品,你如何在你的uI設(shè)計中添加少許的視覺天賦。


有一個簡單的技巧可以讓你的界面有一點不同,那就是添加超重的彩色邊框在你的部分界面里,它會使得你的界面不同于其他平淡的設(shè)計。

例如,沿著警告信息的側(cè)邊加一個超重的彩色邊框:

又或者是高亮顯示激活的導(dǎo)航欄項目

甚至是在橫穿整個布局的頂部:


它不需要任何的設(shè)計天賦增加一個彩色的矩形在你的UI作品里,并且它可以讓你的網(wǎng)站像你期望的那樣更具設(shè)計感。


選顏色很困難?試著從有限的顏色板中選取顏色,例如dribbble的顏色搜索,以避免被傳統(tǒng)顏色選擇器帶來的無盡的可能性。


7不是每一個button按鈕都需要一個背景顏色


當(dāng)用戶在一個頁面上有多個可操作路徑時,很容易陷入基于純語義設(shè)計行為陷阱。

如Bootstrap這樣的框架式網(wǎng)站鼓勵你這樣做,當(dāng)你添加一個新按鈕時,它會給你一個語義樣式菜單供你選擇。

“這是一個正面的行為嗎?是,那就使用綠色?!?

“這是刪除數(shù)據(jù)的操作嗎?如果是,那就使用紅色按鈕?!?


語義是按鈕設(shè)計的重要部分,但還有一個常常被忘記的重要的維度,那就是等級/層次結(jié)構(gòu)(hierarchy)


頁面上的每個按鈕放在哪都基于重要性金字塔的某個位置。大部分頁面僅有一個主操作按鈕(primary action),幾個不重要的次級操作(secondary actions),和幾個很少使用的三級操作(tertiary actions)


當(dāng)設(shè)計這些操作按鈕時,最重要的是考慮它們在層次結(jié)構(gòu)中的位置。

主要操作按鈕應(yīng)該是顯而易見的,實心純色的,與背景顏色是高亮度對比。

次要操作按鈕應(yīng)該是明確清晰但不突出。輪廓風(fēng)格或者是與背景顏色低對比是很好的選擇。

三級操作路徑應(yīng)該是可發(fā)現(xiàn)但不顯眼。將這些操作路徑設(shè)置成鏈接樣式通常是最好的方法。


“那破壞性的行為呢,難道不應(yīng)該是紅色的嗎?”

不一定!如果破壞性操作不是頁面上的主要操作路徑,那么最好對其樣式按照二級或者三級按鈕的形式處理。


保存大的,紅色的并且加粗的設(shè)計樣式,以便于當(dāng)界面的主要操作路徑是負(fù)面的操作路徑時使用,比如在確認(rèn)的對話框中:






藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


日歷

鏈接

個人資料

存檔