當前位置:首頁> 2018

UI設計中字體的應用

發布者:乾學教育 發布時間:2018-5-22 138瀏覽

        我們在一直趕路,有時候要停下來,好好想想,沿途的風景我們好好欣賞過了嗎?我們的基礎知識牢固嗎?我們有總結沉淀嗎?

        你說你是不是外貌協會的,反正我是的。想啥呢,我是說設計。在設計中,我們大多數人也都是不知不覺的加入到外貌協會中了。工作中你是不是經常遇到產品經理在你后面指點江山,讓你出幾個稿子對比。其實很多情況下你自己早就做了很多設計方案了,現在已經是你這些設計方案中暫時最優的方式了。但是,你還是要做出幾種樣式來給他們看。你講的再多都沒有直接展示來的更直接。你去買菜,買衣服的時候,也會拿幾種來做對比,所以嘛,設計多種方案那也是家常便飯了(即使你給的是最優方案,那你也可以給出幾種其他方案,以便于他們做決策)。

        設計發展太快,我們過多的去追逐炫酷特效UI設計時,還是不要忘記設計的基礎知識。Behance,Dribbble上的設計你是不是經常被他們給迷住。很多界面設計看著很簡潔,很舒服。他們在處理文字、顏色、配圖上都下了很大功夫。你也知道,能在dribbble上傳作品的人視覺設計能力都不差的。那今天就從基礎的文字入手,看看文字在UI設計中的規范和應用。

 

一、兩種設備中的字體

很多朋友在進入UI行業的時候,總是在糾結我要用什么字體呀、設計稿的尺寸該設計多大呀、圖標該多大呀……這些東西,對于剛入行的朋友來說卻實是一臉懵逼。但這些都是很容易找到的,只要你不是伸手族。


Android

在Android中,英文字體使用Roboto,中文字體使用Noto(思源黑體)。以前的設計中,中文字體主要是使用微軟雅黑,但微軟雅黑在界面中就顯得有點厚重、臃腫。Google聯合Adobe發布了「思源黑體」作為Android的默認中文字體,新的「思源黑體」不僅僅在字形上更易于在屏幕的閱讀,并且擁有7個字重,充分滿足了設計的需求。

1.jpg


Image titleImage title



Roboto有6種字重:Thin、Light、Regular、Medium、Bold 和 Black(圖片來谷歌官網)

2.jpg


Image titleImage title

Noto有7種字重:Thin, Light、DemiLight、Regular、Medium、Bold 和 Black

 

iOS

在英文方面,蘋果加入了新的字體San Francisco,該字族包含了有兩個字體:為 iOS 和 OS X 設計的 SF,以及為 Watch OS 設計的 SF Compact ,而各自分為各自分為Text 和 Display,前者 6 個字重,后者 9 個(多了三個斜體)。

在中文方面,終于,iOS帶來了全新的「蘋方」,字形更加優美,且在屏幕的顯示也更加清晰易讀,擁有6個字重,滿足了日常的設計和閱讀需求。

所以,在設計稿中,你用平方就好了。

3.jpg

Image titleImage title



iOS英文字體”San Francisco“展示

4.jpg

Image titleImage title



iOS中文字體“平方”展示

 

很多公司都是兩個客戶端同時進行,而設計資源并不是很充足,只有一人設計的小公司比比皆是。所以你在設計app的時候,既要設計iOS端,也要設計安卓端,那你是不是要崩潰掉。而且兩個端的界面基本一樣的,所以就沒有必要設計兩個了,除非你“咸”的蛋疼。現在的互聯網,不僅是拼資源,也在拼速度,快速迭代產品是現在互聯網的一大特點。所以,設計的快速迭代也必須緊跟產品步伐。那怎么解決呢,通常只出iOS版就好了,其他的微調就行,開發會給你搞定的。

 

二、文字的大小規范

文字的大小規范,關系著整個app界面的統一性、協調性。掌握好文字的大小規范,是初學者入門的必要技能。

簡單說明下,在Android開發中,字體使用的單位是sp;iOS開發中,字體使用的單位是pt

 

Android

同時使用過多的字體尺寸和樣式可以很輕易的毀掉布局。字體排版的縮放是包含了有限個字體尺寸的集合,并且他們能夠良好的適應布局結構。最基本的樣式集合就是基于 12、14、16、20 和 34 號的字體排版縮放。

這些尺寸和樣式在經典應用場合中讓內容密度和閱讀舒適度取得平衡。字體尺寸是通過 SP(可縮放像素數,scaleable pixels)指定的,讓大尺寸字體獲得更好接受度。

一款app中,你想要整體界面統一,就必須統一字體,設定字體使用規范(如圖所示)

5.jpg6.jpg

Image titleImage title



你在規范字體的時候可以參照這種樣式來規范自己的設計

 

iOS

iOS的系統字體是San Francisco。該字體有兩個變種:SF UI Text (用于19pt及以下大小的文本)和SF UI Display(用于20pt及以上大小的文本)。當你在標簽和其它界面元素應用了系統字體時,iOS系統會根據字號自動選擇最合適的字體樣式。它還會根據需要自動改變字體,以滿足輔助性功能的設置。

是不是有點懵,其實我們簡單點來看,在iOS中,通常使用的字體大小就這么幾個:11pt、13pt、15pt、17pt、20pt。具體怎么使用并沒有限定死,但是最小的字不要小于11pt。現在的app文字都趨向于大字體,用戶的時間是越來越難獲取,怎樣在有效的時間內博得用戶眼球,大文字標題也逐漸使用在app中了。

7.jpg

Image titleImage title



 

三、文字的顏色規范

最基本的常識是,相同顏色的背景和文字是很難閱讀的。但有些人不知道的是,帶有過強對比度的文本會有些炫目,同樣難以閱讀。這一點在深色背景下尤其明顯。要獲得良好的辨識度,文本應當滿足一個最低的對比度,也就是 4.5:1(依據明度計算)。7:1 的對比度是最適合閱讀的。這些色彩的組合同樣要考慮到某些非典型用戶對于對比度的不同反應。

下圖是安卓系統中文字常用的色彩劃分。以純黑為基礎,根據透明度來區分文字的色彩層級。最深的顏色為Black 87%,

切記不要使用純黑色,純黑在設計中用的非常少。

8.jpg


Image titleImage title



用透明度來區分文字的層級,如果你閑麻煩,你完全可以用另一種方式來設計文字。iOS中,主要文字顏色為#333333,次要文字顏色為#666666,輔助文字顏色為#999999,提示性文字或不可用文字顏色為#CCCCCC。所以說,兩種方法你都可以采用。主要是要讓你的文字有層級,易讀。當然,最好不要用彩色系文字,即使你要用,那也最好是稍微帶點有彩色的深色文字(比如黑色中帶一點點藍紫色),根據自己的需要來制定文字的層級。展示文字還是以無彩色系(黑、白、灰)展示為主。

 

四、如何讓你的app中的文字更有層級

一款app,文字層級展示是非常重要的。那么如何讓你的app文字更有層次感呢。主流的層級方式我總結如下:大小、色彩、加粗。當然你也許會說,那還有不同字體、藝術文字、斜體呢。不過,這種使用方式一般在app中較少,很多時候藝術文字我們把它當成一種圖片。在游戲app中,會經常食用其他字體,即使是其他字體,那也需要有層級。

 

大小

前面也說過,app中通常使用的文字根據不同的作用,它的大小是不一樣的,比如Android中,通常使用的文字大小為12sp(多用于提示,或者較弱的層級展示)、14sp(用于展示型文字,或者輔助型文字)、16sp(用于展示型文字,或者小標題)、18sp(多用于導航文字或者標題)

9.jpg

Image titleImage title

顏色

顏色區分app文字層級是最常用的一種方式,它不僅能體現主次,還能代表點擊功能。如下圖iOS-設置,左邊是有顏色區分的,右邊的顏色是相同的。當左右顏色相同的時候,用戶就很難一眼看出重點,不知道界面想表達什么。而右邊本來就是的提示性說明文字,就需要弱化。

10.jpg

Image titleImage title

在一款app中,可點擊的文字需要和普通展示文字區分開。那么通常的方式就是采用不同的顏色來區分。通常你會在朋友圈或者QQ空間看到,能點擊的文字都是采用藍色。當然,并不是說點擊的顏色就一定要用藍色,你也可以用其他顏色,但是一定要統一。不過Android和iOS系統,基本都是用藍色來代表可點擊的。所以藍色是一個很好的選擇。

11.jpg

Image titleImage title



加粗

文字加粗是區分層級的另外一種方式,這種常用于標題,不僅能區分上下文層級,還能分區塊,能讓用戶快速定位到自己需要的頻道。

12.jpg

Image title

熱門文章

南京蘇州各大高校寒假時間表新鮮出爐(文章)免費

乾學原創課程26已學習

二肖中特精准资料37期资料