一、什么是大標題設計風格？

大標題導航欄是從iOS11發(fā)布后，開始在中國的UI設計師中急速流行的一種設計風格。其實這種風格最早在2016年就在硅谷盛行了起來，源自一位叫Michael Horton的設計師發(fā)表的一篇《Complexion Reduction: A New Trend In Mobile Design 》的文章，這篇文章提到的Complexion Reduction這種設計風格(下文簡稱CR)就是大標題導航欄的起源，即大、黑、粗的標題。

 

CR這種風格有四個明顯的特征：

 

1.刪除多余的顏色；

2.又大、又黑、又粗的標題；

3.簡單、可識別的圖標，也不要使用顏色(常用黑灰色)；

4.留白留白留白，更多的留白。

 

下圖是比較典型的使用CR風格的APP（分別是愛彼迎、ENJOY、火球買手、MOO音樂），大家可以結合CR風格的4大特征感受一下：

 不知道小伙伴們有沒有發(fā)現(xiàn)，這幾個APP的功能會比較單一或是某一垂直領域，且視覺上都給人一種高品質(zhì)，超極簡的感覺，人們會更多的關注界面中內(nèi)容本身，對內(nèi)容的要求也會更高。

二、中西方的差異

那么問題來了，為什么這種CR風格鮮少出現(xiàn)在中國特有的淘寶類電商APP中呢？

 

國外的APP大都是小而精致的，一般一個APP只能做一件事，功能比較單一，而國內(nèi)的淘寶類電商APP，攜程類的綜合旅游APP所包含的業(yè)務與功能都非常廣泛，在狹小的手機屏幕上展示更多的商品就顯得尤其重要，CR風格提倡的大標題大留白無疑不是在挑戰(zhàn)老板的底線。

 

實際上即便使用大標題風格也不要盲目采用iOS11官方的大標題導航，其原因在于中英文的差異。

 

英文大標題一個單詞有大小寫的變化，富有一定的層級變化，而中文如果使用iOS11給定的68px（二倍圖下）的字號，那真是大到閃瞎我的眼。中文一個詞語每一個字都是差不多的大小，沒有層級上的變化，太大的字體在整個界面中看起來會很奇怪，如下圖：

三、合理使用大標題

雖說iOS11那么大的標題不適合大部分的APP，但并不是說大標題風格就不適合大部分APP了，實際上目前大多數(shù)的APP依然使用了大標題的風格，不過進行了一定的改良。

以下參考尺寸均是二倍圖下的尺寸

1.大標題導航欄

大標題導航欄大致有兩種樣式，一種是延用iOS11的大標題導航欄，一種是稍微改良使用的大標題導航欄。

1）iOS11大大大標題導航欄

iOS11的大標題導航欄標題字號約為68px、欄高192px(二倍圖)，大標題對齊導航欄左邊，頁面滑動時轉(zhuǎn)換為常規(guī)的導航欄。

 

國內(nèi)使用這種大大大標題的APP比較少，標題文字實在太大，若只作為導航標題占位，會極其浪費屏幕空間。

 

使用這種大大大標題時，導航標題一般都有一定的意義，如下圖:

餓了么的訂單頁詳情頁使用了這種大大大標題，但是標題賦予了訂單狀態(tài)的意義，比起單純的“訂單詳情”，這樣有一定意義的標題文字則可考慮使用iOS11的大大大標題。

2）改良大標題導航欄

某些APP在使用大標題導航欄時，在iOS11的大標題導航欄上進行了一定的改良，最常見的就是一定程度縮小了標題的字號，如下圖:

這三個APP的標題字號都沒有到68px，常用40px~48px的字號，陌陌與天貓是固定在頂部導航欄的，而Kepp會隨頁面上滑變?yōu)槌Ｒ?guī)標題導航。

 

一般這種固定的較大標題都會隱去導航欄的分割線，顯得導航欄更高，更有呼吸感。像是天貓的大標題導航欄使用的色塊，與下方模塊又比較近，就顯得很擁擠。

2.Tab欄大標題

Tab欄的文字標題切換樣式最常見的就是顏色變化，加小短線等，隨著大標題風格的流行，Tab欄的切換樣式也出現(xiàn)了大標題的選中樣式，選中字號通常采用40~48px（甚至更大，如蝦米音樂的72px），而非選中標題通常則是采用的28~32px，如下圖：

使用這樣的Tab欄，能夠迅速幫助用戶辨識自己所在的位置，就差指著自己說“這兒”了。需要注意的是一個屏幕內(nèi)盡量只在一級Tab使用大標題切換，與二級Tab做出區(qū)分。

3.模塊化大標題

大標題的風格除了應用在界面頂部導航，在模塊化標題上應用的也非常多，有些APP即便頂部導航不使用大標題，卻會在模塊化標題上使用較大的字號，如下圖：

這種模塊化大標題常配合留白分割的界面使用(這也符合了CR風格的特征)，模塊化大標題在留白分割的界面上能夠更好地幫助上下模塊做到層級區(qū)分的作用。

4.文字變大變粗變黑

拋開大標題不談，不知大家有沒有發(fā)現(xiàn)，現(xiàn)在越來越多的APP的內(nèi)容標題、正文內(nèi)容的字體也在逐漸變得更黑更粗，甚至更大，畢竟我們的手機變得越來越大了。如下圖：

即便是擁有復雜業(yè)務的淘寶與飛豬，在某些內(nèi)容標題上也變得更粗更黑，一眼看過去用戶能更容易找到自己想看的內(nèi)容。

四、劃重點

· 大標題設計風格源自Complexion Reduction這種設計風格，CR這種風格的特征就在于顏色少、標題大黑粗、圖標通用簡單、大留白；

· 由于中英文字體的差異，中文使用超大字號沒有英文富有變化；

· 合理使用大標題，做一些適當?shù)母牧?。常見用于導航欄、一級Tab選中標題、模塊化大標題以及內(nèi)容標題。

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系

作者：人類君  來源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司