標(biāo)題欄是我們最常見的功能模塊了，這一次來(lái)解讀一下標(biāo)題欄為什么是標(biāo)題欄

標(biāo)題欄的功能，在當(dāng)下的產(chǎn)品環(huán)境里是有原因的，我們來(lái)看看這幾個(gè)產(chǎn)品的標(biāo)題欄。

我知道還有許多時(shí)候會(huì)去思考一些可有可無(wú)的問(wèn)題，比如微信為什么不做消息閱讀狀態(tài)，為什么不做離線狀態(tài)。又或者頭像為什么是方的不是圓的。這些問(wèn)題往往會(huì)以對(duì)方的個(gè)人價(jià)值觀為終結(jié)答案，畢竟不參與到其中的成員，無(wú)法知道真正的情況是什么樣的。也因?yàn)檫@個(gè)情況，許多會(huì)將此類問(wèn)題定義到主觀因素里，忽略了對(duì)問(wèn)題的深入思考過(guò)程。其實(shí)我覺得這些問(wèn)題背后總有一些深意，如果明白做法的原因后，我們可以借鑒，但在不清楚原因的情況下，就只有抄襲了。

布局分析

• 為什么陌陌的篩選放在右上角?
• 為什么微信的搜索放在右上角?
• 為什么設(shè)置放在右上角?

這篇文字，我們就來(lái)回答這三個(gè)任性的“問(wèn)題”!

首先，我們來(lái)看看視覺熱點(diǎn)圖

這是在網(wǎng)絡(luò)中找到的一張APP的眼動(dòng)熱力圖，可以看到標(biāo)題欄幾乎不會(huì)被注意到，對(duì)視覺熱力圖感興趣的朋友，可以百度視覺熱力圖或者眼動(dòng)熱力圖，類似這樣的素材并不那么容易被找到，需要有多一點(diǎn)耐心。

配圖

App的頂部局域是最容易被忽視地方，我們?cè)诳唇缑鏁r(shí)，潛意識(shí)是看中間部分，這和我們生活中的視線有關(guān)聯(lián)的。如果你身邊有一本書，或者一個(gè)鍵盤，不如試試你第一眼看的是哪個(gè)位置。讓我猜猜，你會(huì)看到書的中間，或者書的標(biāo)題，不太會(huì)看到書的頂部，你也會(huì)看到鍵盤上FGHJ這四個(gè)按鍵，不太會(huì)看到F5，F(xiàn)6這一列。人們的眼睛似乎遵守著某種生物本能，潛意識(shí)的會(huì)先看“中間部分” 。我們?cè)谑褂檬謾C(jī)app 閱讀一篇文章時(shí)，為什么會(huì)將文章標(biāo)題做的和正文內(nèi)容完全不一樣，也是因?yàn)檫@樣的一個(gè)原因。

借助標(biāo)題的視覺特殊性，將人們的視線從中間部分，提升到頁(yè)面頂部，這樣才能從頭看內(nèi)容，否則人們第一眼就會(huì)看到文章中間部分的內(nèi)容，這樣就會(huì)出現(xiàn)閱讀障礙了，難以理解文章從哪里開始的。

左圖，你看見的第一個(gè)字是什么?

用戶使用的迫切欲望

當(dāng)我們特別想得到什么時(shí)，會(huì)做出一些平時(shí)難以理解的行為，其中包括做一些成本非常高的動(dòng)作。如果將用戶對(duì)一款A(yù)PP的使用理解成許多的行為動(dòng)作，那用戶的使用欲望變可以理解為對(duì)某個(gè)行為的專注程度。專注度，越高，對(duì)行為成本的感知越弱，越不敏感。被放置在標(biāo)題欄的功能，具備很強(qiáng)的特性。

上圖列舉了一部分常見的 標(biāo)題欄功能，而這部分功能最典型的特征便在于用戶使用的迫切欲望。也就是當(dāng)用戶想要舉報(bào)某條內(nèi)容時(shí)，對(duì)“舉報(bào)”這一行為的專注度，超過(guò)了行為成本。

我們?cè)囅胍幌?，上述的功能，在什么時(shí)候會(huì)被用戶使用?

比如：搜索功能

人們不太可能去“隨意搜索”，往往已經(jīng)有了明確搜索對(duì)象了，我已經(jīng)明確知道我要搜索的內(nèi)容，此時(shí)，我想要立即知道搜索結(jié)果。此時(shí)，我的注意力都放在搜索結(jié)果上，也就是行為之后的結(jié)果，并不太在意這個(gè)行為發(fā)生的過(guò)程。同理推斷，舉報(bào)，添加，清空，刪除，修改等等一系列行為，都是屬于專注度較高，且專注對(duì)象都是行為之后的結(jié)果，而非行為本身的過(guò)程。類似這樣的需求，我們便可以利用人們對(duì)行為的專注度，將這部分功能設(shè)計(jì)在一些比較薄弱的角落里(前文已經(jīng)提及到了頂部屬于視覺薄弱區(qū)域)。

反向思維，若用戶對(duì)這個(gè)功能沒(méi)有使用欲望，又會(huì)怎么樣呢?被設(shè)計(jì)在標(biāo)題欄的功能，在用戶沒(méi)有產(chǎn)生需求的時(shí)候，會(huì)被很自然的遺憾，并且是完全遺忘。我們?cè)谇拔囊呀?jīng)提及了用戶對(duì)頂部?jī)?nèi)容的不關(guān)注，源自于人們作為生物的視覺本能，因此，在沒(méi)有產(chǎn)生需求的時(shí)候，我們的視覺就會(huì)自動(dòng)忽視這部分的內(nèi)容。

這樣一來(lái)，所謂的“高成本行為”就變成了“不存在的行為”自然就不會(huì)給用戶產(chǎn)生復(fù)雜或者不方便的感知了。簡(jiǎn)單的來(lái)講，當(dāng)用戶需要時(shí)能夠不計(jì)成本去使用，當(dāng)用戶不需要時(shí)，能夠“自動(dòng)消失”便是標(biāo)題欄功能的特色。

微信之分享

微信是個(gè)能引起山寨效應(yīng)的產(chǎn)品，比如在標(biāo)題欄右側(cè)設(shè)計(jì)分享以及上傳功能。因此我單獨(dú)來(lái)說(shuō)解讀一下微信標(biāo)題欄右側(cè)的分享功能。微信，為什么將分享放在標(biāo)題欄右側(cè)?將分享功能放置在右上角的原因，除了前文所提及的兩點(diǎn)之外，還有一個(gè)決定性因素是對(duì)H5的支撐。H5在app內(nèi)的使用往往是以內(nèi)嵌瀏覽器的方式進(jìn)行實(shí)現(xiàn)，而分享面板的功能則是native自身的能力。

我們?cè)谂笥讶λL問(wèn)的H5頁(yè)面實(shí)際上是這樣的。

除了標(biāo)題欄區(qū)域以外的地方，都是H5的區(qū)域。

我們可以嘗試在底部參考標(biāo)題欄的做法，也固定一個(gè)底部區(qū)域由native來(lái)開發(fā)，但這樣一來(lái)就會(huì)減少H5的展示空間，同時(shí)也會(huì)局限H5本身的擴(kuò)展玩法，這樣的做法并沒(méi)有被大面積的使用。鑒于技術(shù)上的交互成本以及瓶頸，H5沒(méi)有辦法直接控制客戶端的響應(yīng)事件，這表示我們也沒(méi)有辦法點(diǎn)擊H5上的分享按鈕，直接喚起native的分享面板。你還記得箭頭指向右上角提示用戶點(diǎn)此分享的引到頁(yè)嗎?

右上角放置分享按鈕基本上是微信特色，只是因?yàn)榧夹g(shù)限制以及更開放的對(duì)待其他人的H5接入。有時(shí)，我看到某款產(chǎn)品使用native做的頁(yè)面承載，也依然學(xué)習(xí)微信將分享按鈕置于頁(yè)面右上角時(shí)，覺得挺浪費(fèi)的。我相信大部分產(chǎn)品都希望用戶將內(nèi)容分享到微信朋友圈，以此產(chǎn)生擴(kuò)散效應(yīng)，不過(guò)盲目的抄襲，可不是一位好的產(chǎn)品應(yīng)該做的事情。這會(huì)讓我們失去很多尋找真相和原因的機(jī)會(huì)。

誰(shuí)是需求方

發(fā)布內(nèi)容這個(gè)功能也是標(biāo)題欄的一個(gè)奇葩功能，我們?cè)谠O(shè)計(jì)產(chǎn)品時(shí)，都希望盡可能多的生產(chǎn)內(nèi)容，按照前文的原則，這樣一個(gè)重要的功能似乎不應(yīng)該放在容易被忽視的右上角。其實(shí)這個(gè)做法也是微信引起來(lái)的，朋友圈的上傳功能就在頁(yè)面右上角，于是許多產(chǎn)品經(jīng)理在不知道如何放置功能時(shí)，就參考了微信的做法。把發(fā)布內(nèi)容丟到右上角去了。

提問(wèn)：為什么朋友圈的發(fā)布功能放在標(biāo)題欄右側(cè)

先說(shuō)個(gè)思維陷阱吧。

朋友圈是微信這個(gè)產(chǎn)品的一部分組成元素，發(fā)朋友圈的價(jià)值僅在這個(gè)板塊存在價(jià)值，而對(duì)于整個(gè)微信產(chǎn)品而言，更提倡的是用戶聊天，而不是發(fā)布動(dòng)態(tài)。這個(gè)地方的誤區(qū)在于，我們常常將朋友圈提升到了一個(gè)獨(dú)立APP的地位進(jìn)行思考。

比如：

我們做了一款圖片社交軟件，功能比較多，以至于我們沒(méi)有地方放置“上傳圖片”這個(gè)功能入口了。A產(chǎn)品經(jīng)理說(shuō)：“放到右上角去吧，微信也是這樣做的?！痹谶@樣的判斷下，微信的一個(gè)子模塊的功能，成了另一款產(chǎn)品的設(shè)計(jì)源頭。最終的結(jié)果是什么呢?

就算微信用戶不發(fā)朋友圈，人們還在聊天呢，甚至因?yàn)槿趸l(fā)朋友圈的設(shè)計(jì)，讓人們更多的去聊天，而不是枯燥的發(fā)朋友圈。而這款根據(jù)微信而設(shè)計(jì)的圖片社交產(chǎn)品，很不幸的是，用戶即不發(fā)照片，也沒(méi)有產(chǎn)生其他的行為。然后就這樣迷惑的一直尋找提高用戶內(nèi)容生產(chǎn)率的辦法。不同的產(chǎn)品環(huán)境，相同的功能，但需求方是不一樣的。功能的需求方，這大概是我第一次公開提到這個(gè)概念。

就如同發(fā)布內(nèi)容，對(duì)于微信而言，用戶是需求方，當(dāng)用戶需要時(shí)，就會(huì)遵從于文中所提到的第二個(gè)概念，迫切的行為欲望會(huì)讓我們忽視行為成本。所謂的需求方，是指尋求幫助的人，雖然這樣說(shuō)并不耿直，但話糙理不糙，我們可以向需要幫助的人提出一定的要求。什么時(shí)候向他人提出要求最容易得到回應(yīng)呢?當(dāng)他有求于你時(shí)?！澳阆氚l(fā)布內(nèi)容對(duì)吧，那你就去右上角發(fā)吧”

這是微信對(duì)待“發(fā)布內(nèi)容”的態(tài)度，想發(fā)你就去上面發(fā)， 不想發(fā)就算了，是不是很高冷?其實(shí)朋友圈的更新頻率并不高，試想一下你是多久發(fā)一條朋友圈呢?而對(duì)于我們案例里提到的圖片社交而言，發(fā)布內(nèi)容的需求方并不是用戶，而是產(chǎn)品。其實(shí)對(duì)于許多產(chǎn)品而言，發(fā)布內(nèi)容的需求方是產(chǎn)品本身，是我們希望用戶去發(fā)內(nèi)容，可以說(shuō)想盡辦法讓用戶發(fā)內(nèi)容。我們希望用戶最好一天能發(fā)多條內(nèi)容，盡管他現(xiàn)在可能并不想發(fā)。

對(duì)于這種類型的產(chǎn)品，將發(fā)布入口放在右上角并不是一個(gè)明智的決定，這會(huì)導(dǎo)致用戶不想發(fā)的時(shí)候，完全忽視掉這個(gè)功能。常見的做法是放在底部菜單的中間位置，而置于這個(gè)地方也是出于一個(gè)簡(jiǎn)單的概念?！熬退隳悻F(xiàn)在不發(fā)，萬(wàn)一看到了，就想發(fā)了呢?”以此為基礎(chǔ)，所引發(fā)的做法則是提高“發(fā)布入口”的曝光率以及視覺權(quán)重，反復(fù)的告訴用戶，“這里能發(fā)內(nèi)容，這里能發(fā)內(nèi)容，這里能發(fā)內(nèi)容”如此一來(lái)，我們便能理解為什么 發(fā)布內(nèi)容這樣一個(gè)重要的功能，卻被放在了標(biāo)題欄右側(cè)，

原因有三：

• 微信高冷，不追求用戶發(fā)布朋友圈的頻率及數(shù)量
• 用戶是需求方，有需求時(shí)，可以讓用戶付出行為成本
• 盲目跟風(fēng)，搞不清楚誰(shuí)是需求方

結(jié)尾

現(xiàn)在你知道標(biāo)題欄的設(shè)計(jì)原理了嗎?

• 標(biāo)題欄是容易被忽視的地方，基本不在人們的視線熱力區(qū)域
• 用戶對(duì)功能有迫切使用欲望
• 標(biāo)題欄的分享，設(shè)計(jì)原理是對(duì)H5的兼容，并不是用戶習(xí)慣
• 若功能的需求方是用戶，那就放在標(biāo)題欄吧。
• 反之，若功能的需求方是產(chǎn)品本身，切忌放在標(biāo)題欄，會(huì)被忽視的。

網(wǎng)頁(yè)題目：【app界面設(shè)計(jì)】標(biāo)題欄設(shè)計(jì)
網(wǎng)頁(yè)網(wǎng)址：http://www.rwnh.cn/news/163535.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、外貿(mào)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、網(wǎng)站建設(shè)、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)