中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

大標(biāo)題怎么設(shè)計(jì)才不會(huì)感覺怪怪的？首要一點(diǎn)就是不要為了用大標(biāo)題而做大標(biāo)題，做之前先想想是否合適。

雖然大字體的標(biāo)題設(shè)計(jì)自iOS11開始后已有一段時(shí)間了，但因?yàn)樽罱ぷ魃蠂L試了這種形式的設(shè)計(jì)，所以想總結(jié)心得和大家交流。

不知道你是否有過這種困惑，看到流行的設(shè)計(jì)趨勢(shì)就想運(yùn)用，但“為什么看起來(lái)怪怪的？”。這篇文章將從大標(biāo)題的功能和視覺切入分析，分享大標(biāo)題設(shè)計(jì)的思路。

蘋果的大標(biāo)題設(shè)計(jì)原則

蘋果帶起的風(fēng)，還是從蘋果說(shuō)起。17年蘋果秋季發(fā)布會(huì)上和新品一起推出iOS11，在UI設(shè)計(jì)方面，大粗黑的標(biāo)題是其中最為顯著的一個(gè)變化：

如上圖，iPhone內(nèi)“很多”APP都改用了大標(biāo)題，注意是“很多”而不是“全部”。所以這里的重點(diǎn)不是討論蘋果為什么改用大標(biāo)題，而是想要強(qiáng)調(diào)為什么不是所有iPhone APP都用大標(biāo)題設(shè)計(jì)？

1. 大標(biāo)題OK：布局相似或內(nèi)容豐富、層級(jí)深，能幫助用戶快速確認(rèn)所處位置

蘋果官方已經(jīng)說(shuō)明了大標(biāo)題的適用情況。一是像短信這樣內(nèi)容布局非常相似的頁(yè)面設(shè)計(jì)，二是像Apple Music和App Store這樣內(nèi)容非常豐富、層級(jí)結(jié)構(gòu)較深的，大標(biāo)題能夠起到“導(dǎo)航”作用，幫用戶快速確認(rèn)自己的位置。

據(jù)說(shuō)這是蘋果設(shè)計(jì)師在Apple Music中做實(shí)驗(yàn)并驗(yàn)證有效的。但是我對(duì)于大標(biāo)題的確認(rèn)位置的作用并沒有很強(qiáng)烈的感知（可能因?yàn)槲疫€不是哪個(gè)APP的深度使用用戶）。總之，也許是有些導(dǎo)航作用的。

2. 大標(biāo)題不OK：頁(yè)面內(nèi)容本身差異大，且更強(qiáng)調(diào)功能的使用時(shí)應(yīng)避免用大標(biāo)題

再看看沒有用大標(biāo)題的APP：

在蘋果時(shí)鐘APP各界面，內(nèi)容本身差異就很大，用戶可以快速辨別出當(dāng)前所在位置，如果用大標(biāo)題，反而會(huì)影響用戶對(duì)功能的關(guān)注和使用。類似情況的還有日歷、查找朋友APP。

這些工具類型的應(yīng)用，對(duì)用戶來(lái)說(shuō)更為重要的是“使用”而非瀏覽。

（以上內(nèi)容部分摘錄自蘋果官方，想看詳細(xì)說(shuō)明的請(qǐng)進(jìn)：https://developer.apple.com/videos/play/wwdc2017/810#）

互聯(lián)網(wǎng)APP的大標(biāo)題設(shè)計(jì)

如果以蘋果的大標(biāo)題設(shè)計(jì)原則來(lái)考察其他應(yīng)用大標(biāo)題設(shè)計(jì)的APP，會(huì)發(fā)現(xiàn)很多產(chǎn)品既沒有相似的頁(yè)面布局，層級(jí)結(jié)構(gòu)也非常簡(jiǎn)單。這是盲目跟風(fēng)嗎？還是說(shuō)除了“導(dǎo)航性”，大標(biāo)題還有別的意義？

帶著這個(gè)疑問扒了很多APP，收集了很多大標(biāo)題以及大標(biāo)題的“變種”設(shè)計(jì)，總結(jié)了以下適用大標(biāo)題的類型和作用：

1. 體現(xiàn)產(chǎn)品的設(shè)計(jì)感和逼格

相較于偏重系統(tǒng)性的手機(jī)ROM UI設(shè)計(jì)，互聯(lián)網(wǎng)APP可能更想強(qiáng)調(diào)品牌和個(gè)性，而大標(biāo)題恰能滿足這一點(diǎn)。它帶有一點(diǎn)雜志和海報(bào)風(fēng)格，標(biāo)題和內(nèi)容字體的大小形成鮮明的對(duì)比，讓設(shè)計(jì)感更強(qiáng)。但是同樣用大標(biāo)題，和不同的視覺語(yǔ)言組合，也會(huì)形成不一樣的設(shè)計(jì)感：

（1）大標(biāo)題+特殊字體+雜志排版——文藝、藝術(shù)

有一類產(chǎn)品是非常適合大標(biāo)題的——藝術(shù)相關(guān)或閱讀類APP，這類產(chǎn)品本身自帶藝術(shù)感或文藝氣息，當(dāng)大標(biāo)題結(jié)合特殊字體，或雜志風(fēng)版式，就能瞬間提高產(chǎn)品調(diào)性。

（2）大標(biāo)題+留白——大氣、現(xiàn)代

除了文藝懷舊，大標(biāo)題+留白還能夠表現(xiàn)現(xiàn)代感。

比如新能源汽車APP，通過運(yùn)用當(dāng)下流行的漸變色和簡(jiǎn)約的視覺語(yǔ)言，打上了“現(xiàn)代”的標(biāo)簽。

（3）大標(biāo)題+留白——簡(jiǎn)約、清新

蝦米也用到大標(biāo)題，但相比小鵬汽車，更多的是清新和細(xì)膩的感覺，因?yàn)槌肆舭祝w的設(shè)計(jì)語(yǔ)言更為精致、趣味（具體可參考上一篇關(guān)于蝦米圖標(biāo)設(shè)計(jì)的分析）。

2. 改良版的頁(yè)面大標(biāo)題

像iOS那樣的大標(biāo)題設(shè)計(jì)，占用屏幕較高的空間，大大降低屏幕利用率，一般PM和老板都是不能接收的。除了上面說(shuō)的高逼格產(chǎn)品，在現(xiàn)實(shí)中更為常見的是“小一點(diǎn)”的大標(biāo)題設(shè)計(jì)，如下中間兩個(gè)截圖APP。

它們的導(dǎo)航欄高度其實(shí)是常規(guī)標(biāo)準(zhǔn)（參考最右微信），但是拿掉了導(dǎo)航欄下的分割線。

在這種情況下把標(biāo)題字加大，單從視覺效果來(lái)看，字體大小的對(duì)比度不是很突出，同時(shí)由于留白不足，頂部稍顯擁擠，已經(jīng)沒有了大標(biāo)題原來(lái)的味道。

3. 區(qū)分層級(jí)的模塊標(biāo)題

從導(dǎo)航大標(biāo)題延伸出來(lái)的一種是用于區(qū)分頁(yè)面內(nèi)各模塊的標(biāo)題，和過去相比，這種模塊標(biāo)題變得更大更粗了。

內(nèi)容豐富、圖文結(jié)合的瀏覽型APP適合采用，字體大小的對(duì)比、以及圖文的排版讓人在瀏覽時(shí)感受到一種節(jié)奏感。

4. TAB標(biāo)題

和模塊標(biāo)題一樣，TAB欄的字體也變大了。但個(gè)人覺得這部分不好把握。因?yàn)橥ǔＳ玫絋AB欄的，都是內(nèi)容比較多的產(chǎn)品，而這類產(chǎn)品往往內(nèi)容的呈現(xiàn)和曝光率最為重要。

我翻了下頻道很多的新聞和瀏覽器類主流產(chǎn)品，都沒有用大的TAB。

下圖數(shù)英網(wǎng)是個(gè)例，雖然用了大標(biāo)題，但它在交互上做了處理。默認(rèn)狀態(tài)下，當(dāng)前的頻道標(biāo)題很大，加上高亮的色彩，真的很搶眼。但是在內(nèi)容頻道中上滑時(shí)，頂部TAB欄會(huì)隱去，并不會(huì)影響閱讀。而在其他非內(nèi)容頻道上滑時(shí)，TAB沒有消失。

所以TAB標(biāo)題是否需要特別強(qiáng)調(diào)？需要強(qiáng)調(diào)到什么程度？會(huì)占用多少空間？影響閱讀的話怎么辦？這些都需要仔細(xì)斟酌。

大標(biāo)題設(shè)計(jì)需要考慮的情況

如果你覺得自己的大標(biāo)題有點(diǎn)怪，很可能是因?yàn)樗静贿m合你。所以設(shè)計(jì)之前先判斷是否適用。

1. 從功能側(cè)考慮：是否有用大標(biāo)題導(dǎo)航的必要

也就是第一部分關(guān)于蘋果大標(biāo)題的分析?？疾炷愕腁PP各頁(yè)面是否內(nèi)容布局相似，或內(nèi)容層級(jí)結(jié)構(gòu)復(fù)雜，是否需要大標(biāo)題幫助用戶確認(rèn)當(dāng)前位置。

2. 大標(biāo)題會(huì)占據(jù)一定屏幕高度，需考慮屏幕利用率

滿足第1點(diǎn)條件后，還需考慮是否值得為此犧牲那部分屏幕空間。標(biāo)題導(dǎo)航重要還是內(nèi)容呈現(xiàn)更為重要？（前面討論過資訊類APP）尤其夾著廣告的信息流，曝光一條就是錢啊。

3. 從視覺側(cè)考慮：大標(biāo)題設(shè)計(jì)是否符合產(chǎn)品定位和氣質(zhì)

由于大標(biāo)題通常會(huì)結(jié)合大面積的留白來(lái)突出對(duì)比，所以多數(shù)是簡(jiǎn)約的調(diào)性，可能還會(huì)給人些許安靜甚至冷感。這可能就決定了一些品類不太適用，比如非高端電商和交友類。

平臺(tái)社交類APP是需要較強(qiáng)烈的氛圍感的，用了大標(biāo)題會(huì)怎樣？如圖左一，為了營(yíng)造氛圍，添加了暖色漸變背景。但是兩種強(qiáng)調(diào)的手法疊加，稍復(fù)雜了些。

右邊三張圖，不知道是什么APP什么定位，看著都像是社區(qū)交友類，如果單看這些消息頁(yè)面的話，就覺得有點(diǎn)冷清。

此外，還要看產(chǎn)品具體的定位。蝦米本身定位清新小眾，大標(biāo)題和留白的的設(shè)計(jì)是和它的產(chǎn)品氣質(zhì)符合的，視覺上干凈清爽。放到網(wǎng)易云身上，就不一定適合了。

以上條件都OK，還是覺得怪的話，那可能是因?yàn)闆]做對(duì)。在實(shí)際設(shè)計(jì)時(shí)需要注意：

1. 考慮統(tǒng)一性和個(gè)性

是否每個(gè)界面都要用大標(biāo)題呢？

如果APP各頁(yè)面都用大標(biāo)題，視覺上就有一致性。但即使是蘋果，也有APP內(nèi)沒有統(tǒng)一使用大標(biāo)題的例子。

小鵬汽車APP也是如此，因?yàn)橄Ｍ谑醉?yè)展示更多內(nèi)容，所以一致性退居第二。其實(shí)根本的是要理清前面說(shuō)的：是否必要是否合適。如是，個(gè)別頁(yè)面是可以特別處理的。

下圖的APP在標(biāo)題欄的設(shè)計(jì)上就挺混亂了。歷史頁(yè)應(yīng)該是用了大標(biāo)題設(shè)計(jì)，并且是所有頁(yè)面中最突出的導(dǎo)航標(biāo)題。但不知道為什么要在這里做這樣的設(shè)計(jì)？

2. 考慮標(biāo)題與背景的設(shè)計(jì)

大標(biāo)題搭配干凈背景時(shí)效果最佳，但是有些APP內(nèi)容和頁(yè)面層級(jí)結(jié)構(gòu)豐富，要是用大塊白色的話會(huì)顯冷清，需要豐富的配圖或色彩渲染氛圍，這種情況怎么設(shè)計(jì)？

下圖左二螞蜂窩的做法，是用漸變疊加在圖片上面文字后方，保證文字的可讀性。左一做的就不是很好了，圖片背景、Banner還有頻道TAB，不僅文字不易讀，且頭部?jī)?nèi)容過多顯得沉重。

最右自如采用插畫的形式效果不錯(cuò)，同一色相漸變，畫面不單調(diào)又有層次感。

如果你真的要用大標(biāo)題了，背景一定不能做復(fù)雜。如下例子，當(dāng)背景插入了banner之后，不多說(shuō)了。

3. 注意對(duì)比度，該留白留白，該加粗加粗

最后還需要注意的是對(duì)比度。對(duì)比不夠的時(shí)候視覺上就會(huì)顯得別扭。比如前面提到的沒有足夠的導(dǎo)航欄高度、只能用不那么大的“大”標(biāo)題時(shí)，就表現(xiàn)不出大標(biāo)題原來(lái)的形式感了。所以，留意疏密、大小、粗細(xì)的對(duì)比，大膽地應(yīng)用。

總結(jié)

本文最重要的是二、三部分，多對(duì)比多思考，細(xì)細(xì)體會(huì)大標(biāo)題的氣質(zhì)特點(diǎn)，不要為了用大標(biāo)題而做大標(biāo)題。所有流行的東西都一樣，不要輕易買單，先想想是不是適合自己。

本文由 @REMY 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議