一、什么是大標(biāo)題設(shè)計(jì)風(fēng)格？

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

 

CR這種風(fēng)格有四個(gè)明顯的特征：

 

1.刪除多余的顏色；

2.又大、又黑、又粗的標(biāo)題；

3.簡(jiǎn)單、可識(shí)別的圖標(biāo)，也不要使用顏色(常用黑灰色)；

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

 

下圖是比較典型的使用CR風(fēng)格的APP（分別是愛(ài)彼迎、ENJOY、火球買(mǎi)手、MOO音樂(lè)），大家可以結(jié)合CR風(fēng)格的4大特征感受一下：

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

二、中西方的差異

那么問(wèn)題來(lái)了，為什么這種CR風(fēng)格鮮少出現(xiàn)在中國(guó)特有的淘寶類電商APP中呢？

 

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

 

實(shí)際上即便使用大標(biāo)題風(fēng)格也不要盲目采用iOS11官方的大標(biāo)題導(dǎo)航，其原因在于中英文的差異。

 

英文大標(biāo)題一個(gè)單詞有大小寫(xiě)的變化，富有一定的層級(jí)變化，而中文如果使用iOS11給定的68px（二倍圖下）的字號(hào)，那真是大到閃瞎我的眼。中文一個(gè)詞語(yǔ)每一個(gè)字都是差不多的大小，沒(méi)有層級(jí)上的變化，太大的字體在整個(gè)界面中看起來(lái)會(huì)很奇怪，如下圖：

三、合理使用大標(biāo)題

雖說(shuō)iOS11那么大的標(biāo)題不適合大部分的APP，但并不是說(shuō)大標(biāo)題風(fēng)格就不適合大部分APP了，實(shí)際上目前大多數(shù)的APP依然使用了大標(biāo)題的風(fēng)格，不過(guò)進(jìn)行了一定的改良。

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

1.大標(biāo)題導(dǎo)航欄

大標(biāo)題導(dǎo)航欄大致有兩種樣式，一種是延用iOS11的大標(biāo)題導(dǎo)航欄，一種是稍微改良使用的大標(biāo)題導(dǎo)航欄。

1）iOS11大大大標(biāo)題導(dǎo)航欄

iOS11的大標(biāo)題導(dǎo)航欄標(biāo)題字號(hào)約為68px、欄高192px(二倍圖)，大標(biāo)題對(duì)齊導(dǎo)航欄左邊，頁(yè)面滑動(dòng)時(shí)轉(zhuǎn)換為常規(guī)的導(dǎo)航欄。

 

國(guó)內(nèi)使用這種大大大標(biāo)題的APP比較少，標(biāo)題文字實(shí)在太大，若只作為導(dǎo)航標(biāo)題占位，會(huì)極其浪費(fèi)屏幕空間。

 

使用這種大大大標(biāo)題時(shí)，導(dǎo)航標(biāo)題一般都有一定的意義，如下圖:

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

2）改良大標(biāo)題導(dǎo)航欄

某些APP在使用大標(biāo)題導(dǎo)航欄時(shí)，在iOS11的大標(biāo)題導(dǎo)航欄上進(jìn)行了一定的改良，最常見(jiàn)的就是一定程度縮小了標(biāo)題的字號(hào)，如下圖:

這三個(gè)APP的標(biāo)題字號(hào)都沒(méi)有到68px，常用40px~48px的字號(hào)，陌陌與天貓是固定在頂部導(dǎo)航欄的，而Kepp會(huì)隨頁(yè)面上滑變?yōu)槌Ｒ?guī)標(biāo)題導(dǎo)航。

 

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

2.Tab欄大標(biāo)題

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

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

3.模塊化大標(biāo)題

大標(biāo)題的風(fēng)格除了應(yīng)用在界面頂部導(dǎo)航，在模塊化標(biāo)題上應(yīng)用的也非常多，有些APP即便頂部導(dǎo)航不使用大標(biāo)題，卻會(huì)在模塊化標(biāo)題上使用較大的字號(hào)，如下圖：

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

4.文字變大變粗變黑

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

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

四、劃重點(diǎn)

· 大標(biāo)題設(shè)計(jì)風(fēng)格源自Complexion Reduction這種設(shè)計(jì)風(fēng)格，CR這種風(fēng)格的特征就在于顏色少、標(biāo)題大黑粗、圖標(biāo)通用簡(jiǎn)單、大留白；

· 由于中英文字體的差異，中文使用超大字號(hào)沒(méi)有英文富有變化；

· 合理使用大標(biāo)題，做一些適當(dāng)?shù)母牧?。常?jiàn)用于導(dǎo)航欄、一級(jí)Tab選中標(biāo)題、模塊化大標(biāo)題以及內(nèi)容標(biāo)題。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：人類君  來(lái)源：站酷

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

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