首頁(yè)就是app默認(rèn)的第一個(gè)頁(yè)面？在進(jìn)行首頁(yè)改版時(shí)，設(shè)計(jì)師需要考慮哪些因素？本文作者以支付寶首頁(yè)改版為例，對(duì)app首頁(yè)進(jìn)行了全方位拆解分析，結(jié)合實(shí)際案例，深入淺出地闡述app首頁(yè)的重要性以及設(shè)計(jì)思考。

支付寶App首頁(yè)改版了

支付寶在3月10日舉行的合作伙伴大會(huì)上宣布，支付寶由原先金融支付平臺(tái)的定位升級(jí)為數(shù)字生活開(kāi)放平臺(tái)，原來(lái)的slogan同時(shí)也變更為“生活好，支付寶”。對(duì)普羅大眾而言，定位升級(jí)這件事并不那么直觀，最直觀的莫過(guò)于支付寶app的改版了，因?yàn)檫@是大家能夠直接看到的變化。反過(guò)來(lái)，支付寶也是通過(guò)app的改版給用戶(hù)們傳遞定位升級(jí)了這么一個(gè)訊號(hào)。

圖片來(lái)自互聯(lián)網(wǎng)，如有侵權(quán)，請(qǐng)告知

說(shuō)到app的改版，首先是logo顏色的調(diào)整，也就是主色調(diào)的調(diào)整。支付寶logo的顏色，從原來(lái)的淺藍(lán)升級(jí)調(diào)整為更徹底的亮藍(lán)。很多人在討論logo的顏色新版和舊版那個(gè)更好。個(gè)人倒是覺(jué)得顏色哪個(gè)更好這個(gè)并不是重點(diǎn)，無(wú)須過(guò)度討論，一來(lái)是時(shí)間久了大家就習(xí)慣了，并不會(huì)對(duì)你的選擇有什么影響，該用他還是會(huì)用他。二來(lái)是這種logo主色調(diào)的變化只是傳遞給用戶(hù)一種訊息，那就是“我變了”。變的不是表象，變的是內(nèi)涵，這個(gè)內(nèi)涵就是他本身的定位、背后提供的內(nèi)容以及其商業(yè)邏輯。

除了主色調(diào)的升級(jí)，支付寶app的首頁(yè)也進(jìn)行了改版。在最新的版本中，在頂部區(qū)域增加了外賣(mài)、美食玩樂(lè)、酒店住宿、電影演出、市民中心這五個(gè)常駐服務(wù)入口，入口的數(shù)量由原來(lái)的9個(gè)增加到14個(gè)，整體上更豐富了。同時(shí)，在頁(yè)面下部也增加了外賣(mài)到家、果蔬商超醫(yī)藥等生活服務(wù)板塊。

圖片來(lái)自互聯(lián)網(wǎng)，如有侵權(quán)，請(qǐng)告知

我們能看到的是主色調(diào)變了、首頁(yè)露出的內(nèi)容變了、首頁(yè)樓層和布局變了、視覺(jué)樣式變了。首頁(yè)改版，改動(dòng)的無(wú)非就是這些東西，但這些東西只是表象，我們還是需要看表象背后的東西。

支付寶的這次改版，從首頁(yè)新增內(nèi)容類(lèi)別上，我們能夠清晰地看到加大了對(duì)生活服務(wù)內(nèi)容的曝光力度，這些生活服務(wù)內(nèi)容將共同承擔(dān)12億用戶(hù)帶來(lái)的海量流量的分發(fā)任務(wù)。這些生活服務(wù)內(nèi)容的背后，是海量的商家，尤其是中小微商家，這也是這一次整體定位升級(jí)的核心所在。

據(jù)稱(chēng)，在未來(lái)三年，支付寶將聯(lián)合5萬(wàn)服務(wù)商，幫助線(xiàn)下4000萬(wàn)商家做數(shù)字化升級(jí)。這些商家提供的本地生活服務(wù)，將都在支付寶這個(gè)開(kāi)放平臺(tái)下，一起構(gòu)建起一個(gè)全新的生活服務(wù)數(shù)字化生態(tài)。形式服務(wù)于內(nèi)容，支付寶的這次改版，尤其是首頁(yè)改版，完全服務(wù)于他的商業(yè)邏輯升級(jí)和轉(zhuǎn)型。為什么要改首頁(yè)呢？那還得從首頁(yè)是什么說(shuō)起。

app首頁(yè)是什么

app的首頁(yè)是什么？這個(gè)問(wèn)題看上去好像是一個(gè)特別低智商的問(wèn)題，就好像在問(wèn)“我是誰(shuí)”那樣。首頁(yè)嘛，顧名思義，就是app默認(rèn)的第一個(gè)頁(yè)面，也就是當(dāng)用戶(hù)啟動(dòng)一個(gè)app時(shí)，展現(xiàn)的第一個(gè)頁(yè)面。就僅此而已嗎？當(dāng)然不是。

首頁(yè)，確實(shí)是用戶(hù)啟動(dòng)app時(shí)第一個(gè)展現(xiàn)的頁(yè)面，但也正是因?yàn)槿绱?，他也就成為了整個(gè)app的“門(mén)面”和“流量集散地”，擁有最高的曝光頻次的一個(gè)頁(yè)面。

一方面他需要擔(dān)負(fù)著整個(gè)app核心用戶(hù)價(jià)值以及調(diào)性信息傳遞的功能，另一方面也承擔(dān)著app的流量承接和分發(fā)的重要任務(wù)，在這一層，他就已經(jīng)遠(yuǎn)超所謂“第一個(gè)頁(yè)面”這個(gè)意義了。在首頁(yè)，一方面需要努力提高流量分發(fā)效率，讓不同的用戶(hù)來(lái)到首頁(yè)后都能最高效快捷地找到所求。另一方面也需要讓用戶(hù)對(duì)整個(gè)app是什么以及能從中獲得什么價(jià)值快速建立感知，當(dāng)然也包括整個(gè)app的調(diào)性。

首頁(yè)，除了上面說(shuō)的這一層意義之外，他還是企業(yè)商業(yè)邏輯和商業(yè)意圖的體現(xiàn)。商業(yè)的原點(diǎn)是用戶(hù)，我們拿什么去和用戶(hù)交易以及怎樣進(jìn)行交易，一步步地從用戶(hù)身上獲取用戶(hù)生命周期價(jià)值，進(jìn)而轉(zhuǎn)換為自身的商業(yè)價(jià)值，這個(gè)是底層的商業(yè)邏輯。首頁(yè)上面放什么不放什么，怎么放其實(shí)都取決于背后的商業(yè)邏輯。

還是拿支付寶這次升級(jí)來(lái)說(shuō)，在升級(jí)之前支付寶本身的工具屬性更強(qiáng)，而工具屬性的一個(gè)很大弊端在于用戶(hù)在真正需要的時(shí)候才會(huì)去用，而且用完就走，和社交產(chǎn)品例如微信等相比最大的短板就在于用戶(hù)的使用時(shí)長(zhǎng)很短。我以前文章里說(shuō)過(guò)，和用戶(hù)的交易可以是金錢(qián)的交易，也可以是用戶(hù)時(shí)間的交易，最終用戶(hù)時(shí)間是能夠進(jìn)行變現(xiàn)的，所以支付寶十分在意用戶(hù)的使用時(shí)長(zhǎng)。

在和微信的對(duì)抗中，支付寶一度通過(guò)社交屬性的“生活圈”、公益屬性的“螞蟻森林”、游戲養(yǎng)成屬性的“螞蟻莊園”等提升用戶(hù)使用時(shí)長(zhǎng)，但是好像都不是很明顯。在用戶(hù)使用時(shí)長(zhǎng)這個(gè)維度爭(zhēng)奪失利后，這一次就換成了用戶(hù)使用頻次這個(gè)維度的爭(zhēng)奪和對(duì)抗。

這一次，以小程序生態(tài)能力為底層基礎(chǔ)，上層幫助中小微商家進(jìn)行數(shù)字化轉(zhuǎn)型，并借此整合這些海量商家的生活服務(wù)，覆蓋了用戶(hù)生活的方方面面，借此來(lái)提高用戶(hù)的使用頻次。所以，很顯然看到在這次首頁(yè)改版上，更多地露出了生活服務(wù)內(nèi)容，而且在頁(yè)面頭部常駐服務(wù)入口和下部的板塊上都放了。

首頁(yè)，除了是企業(yè)商業(yè)邏輯的體現(xiàn)外，更是內(nèi)部資源爭(zhēng)奪和博弈的結(jié)果。一個(gè)首頁(yè)畢竟空間有限，而且因?yàn)橛脩?hù)注意力資源分布的特性，首頁(yè)上真正有優(yōu)質(zhì)價(jià)值的就在首屏和前面的幾屏，這些地方的流量分發(fā)作用最好。在那些業(yè)務(wù)條線(xiàn)很多，體量比較大的企業(yè)，每一條業(yè)務(wù)都希望能夠在首頁(yè)上占據(jù)資源優(yōu)勢(shì)。每一個(gè)業(yè)務(wù)在首頁(yè)上放在哪個(gè)位置、尺寸有多大、呈現(xiàn)什么內(nèi)容、什么樣的展現(xiàn)樣式等所有的這些設(shè)計(jì)要素都是內(nèi)部關(guān)注的內(nèi)容，也是相互爭(zhēng)奪和博弈的對(duì)象。

當(dāng)然，作為平臺(tái)方的app負(fù)責(zé)部門(mén)，也不能由著大家，首頁(yè)的改版也需要進(jìn)行通盤(pán)的規(guī)劃和限制。那么，我們?cè)谑醉?yè)改版規(guī)劃和設(shè)計(jì)時(shí)，都需要考慮些什么？

app首頁(yè)改版應(yīng)該考慮些什么

app的首頁(yè)是設(shè)計(jì)的產(chǎn)物。一件設(shè)計(jì)作品如果能夠被稱(chēng)為好作品，他需要具備三個(gè)基本功能，即傳遞信息、傳遞情緒以及激發(fā)響應(yīng)。

app的首頁(yè)首先需要將我們想要傳遞給用戶(hù)的信息準(zhǔn)確地進(jìn)行傳達(dá)，這個(gè)信息包括我們這個(gè)app是干嘛的、用戶(hù)能夠獲得什么價(jià)值、幫助他解決什么核心問(wèn)題、具體能夠在我們這里獲得哪些服務(wù)等等。用戶(hù)在下載安裝app啟動(dòng)后，首頁(yè)就承擔(dān)著在短暫的時(shí)間內(nèi)，快速讓用戶(hù)形成對(duì)整個(gè)app以及app背后的企業(yè)品牌、產(chǎn)品和服務(wù)快速形成認(rèn)知的重任。信息傳遞效率和效果也是我們?cè)谠u(píng)判一件設(shè)計(jì)作品時(shí)常說(shuō)的有沒(méi)有溝通感這個(gè)話(huà)題，我們需要將這些信息準(zhǔn)確、清晰、高效地通過(guò)界面?zhèn)鬟f給用戶(hù)，讓用戶(hù)接收到這些信息。

其次，app的首頁(yè)作為一件設(shè)計(jì)作品，需要能夠傳遞情緒，比如從整體視覺(jué)上獲得的情緒感受，是熱情奔放還是冷靜理性、是年輕活力還是老成穩(wěn)重、是簡(jiǎn)單有序還是復(fù)雜混亂、是粗糙低劣還是精細(xì)品質(zhì)等等。一件好的作品是有情緒的，并且總是能夠傳遞合適的情緒給到用戶(hù)，產(chǎn)生情感上和生理上的共鳴。

最后，app的首頁(yè)作為設(shè)計(jì)作品，還需要能夠激發(fā)用戶(hù)響應(yīng)，這個(gè)響應(yīng)就是用戶(hù)的意愿和行動(dòng)，是否有意愿進(jìn)一步了解和產(chǎn)生后續(xù)的使用行為，比如對(duì)于首頁(yè)上展現(xiàn)的各類(lèi)運(yùn)營(yíng)活動(dòng)是否激發(fā)了欲望并點(diǎn)擊參與、對(duì)于陳列的精選產(chǎn)品是否愿意點(diǎn)擊看詳情并產(chǎn)生后續(xù)購(gòu)買(mǎi)行為等等。

傳遞信息、傳遞情緒、激發(fā)響應(yīng)，是在理論上對(duì)一件好設(shè)計(jì)作品的要求，我們會(huì)另外撰文闡述，就不在這里贅述了。理論上的東西，需要落到實(shí)際的操作層面。下面我們就從首頁(yè)的定位、內(nèi)容、結(jié)構(gòu)、樣式這幾個(gè)層面來(lái)簡(jiǎn)單看一下怎們落地。

1. 明確首頁(yè)的功能定位

首先是對(duì)首頁(yè)的功能定位。定位理論自從上世紀(jì)七十年代被提出后，經(jīng)久不衰，時(shí)間證明了他是有效的。從定位理論來(lái)看，我們對(duì)市場(chǎng)和對(duì)用戶(hù)的爭(zhēng)奪，本質(zhì)上是對(duì)用戶(hù)心智的占領(lǐng)，我們需要在用戶(hù)頭腦中占有一席之地。首頁(yè)，作為用戶(hù)打開(kāi)app后的第一個(gè)頁(yè)面，是整個(gè)app的門(mén)面，擔(dān)負(fù)著讓用戶(hù)對(duì)整個(gè)app的核心用戶(hù)價(jià)值快速形成認(rèn)知的重任。要想把核心用戶(hù)價(jià)值這個(gè)信息傳遞給用戶(hù)，在用戶(hù)大腦中建立認(rèn)知，首先我們自己要對(duì)首頁(yè)有一個(gè)明確的功能定位。

從粗略上來(lái)講，首頁(yè)的功能定位大致可以分為營(yíng)銷(xiāo)型、管理型和工具型等幾個(gè)大類(lèi)，在大類(lèi)之下可以再打造更精準(zhǔn)和差異化的定位，讓用戶(hù)能夠比較有印象、記得住。

像電商類(lèi)app的首頁(yè)就是典型的營(yíng)銷(xiāo)型首頁(yè)，他的目的在于最大化內(nèi)容發(fā)現(xiàn)效率，這個(gè)“內(nèi)容”包括商品、資訊、營(yíng)銷(xiāo)信息等等。通常來(lái)說(shuō)，這一類(lèi)會(huì)更多的將各類(lèi)優(yōu)質(zhì)的內(nèi)容前置在首頁(yè)，主動(dòng)地推到用戶(hù)面前，用來(lái)捕獲到用戶(hù)的注意，刺激用戶(hù)買(mǎi)買(mǎi)買(mǎi)。當(dāng)然，在為了匹配不同目標(biāo)明確程度的用戶(hù)的內(nèi)容發(fā)現(xiàn)行為模式上，會(huì)在首頁(yè)上設(shè)置搜索、目錄/分類(lèi)檢索、精選推薦、秒殺、品類(lèi)樓層、feed流等。這一類(lèi)首頁(yè)在用戶(hù)心智上沒(méi)什么獨(dú)特的地方，靠的是以?xún)?nèi)容發(fā)現(xiàn)效率本身取勝，例如精準(zhǔn)推薦能力等。

相比營(yíng)銷(xiāo)型首頁(yè)，管理型首頁(yè)就比較克制，更多的是用戶(hù)自身相關(guān)的內(nèi)容展現(xiàn)和操作。像一些銀行的app如微眾銀行、交通銀行等，會(huì)將用戶(hù)的賬戶(hù)情況、資產(chǎn)情況、負(fù)債情況、日歷提醒等作為首頁(yè)的核心內(nèi)容。管理型首頁(yè)的最大特點(diǎn)在于首頁(yè)的內(nèi)容都是和用戶(hù)自身相關(guān)的，用戶(hù)比較關(guān)心并由此驅(qū)動(dòng)他經(jīng)常主動(dòng)啟動(dòng)app，打開(kāi)首頁(yè)看看當(dāng)下?tīng)顩r。例如，用戶(hù)是一個(gè)典型的投資用戶(hù)，那么每天的收益漲跌和資產(chǎn)配置健康情況是驅(qū)動(dòng)他打開(kāi)app的核心動(dòng)力。一旦發(fā)現(xiàn)資產(chǎn)配置不健康，就會(huì)進(jìn)行調(diào)倉(cāng)操作，包括買(mǎi)新的投資產(chǎn)品、贖回不合適的投資產(chǎn)品等，而不是一味的買(mǎi)買(mǎi)買(mǎi)。

工具型首頁(yè)和營(yíng)銷(xiāo)型、管理型均不同，他是將用戶(hù)高頻使用的功能在首頁(yè)進(jìn)行強(qiáng)化，讓用戶(hù)縮短尋找路徑，直達(dá)功能。例如搜索引擎、導(dǎo)航、網(wǎng)約車(chē)、共享單車(chē)等，這些都是非常典型的工具型首頁(yè)。

雖然我們粗略上將首頁(yè)功能定位劃分為這三大類(lèi)，但是在現(xiàn)實(shí)中，通常會(huì)有交叉融合，新改版的支付寶首頁(yè)就是一個(gè)典型的融合的例子。支付寶首頁(yè)的上半部分是偏工具型的，都是一些高頻常用功能和服務(wù)，方便用戶(hù)一上來(lái)就找到入口，縮短尋找路徑。而下半部分就是典型的營(yíng)銷(xiāo)型首頁(yè)，就是要讓用戶(hù)買(mǎi)買(mǎi)買(mǎi)。

不管怎么樣，我們還是需要回過(guò)頭來(lái)從用戶(hù)心智的視角去看，用戶(hù)他是怎么理解app的首頁(yè)的，他從首頁(yè)獲得的是什么信息。拿銀行的app首頁(yè)為例，來(lái)看怎么理解從用戶(hù)心智角度傳遞信息。像微眾銀行的首頁(yè)就比較克制，主體是賬戶(hù)和資產(chǎn)相關(guān)的信息，是一個(gè)典型的管理型首頁(yè)。他通過(guò)首頁(yè)給用戶(hù)傳遞的情緒是專(zhuān)業(yè)、可信、穩(wěn)定、冷靜，整個(gè)app的核心價(jià)值是幫助你管理資產(chǎn)，首頁(yè)在用戶(hù)心智層面給用戶(hù)傳遞的是“賬戶(hù)”的概念。新改版后的交通銀行的首頁(yè)也比較有特點(diǎn)，是一個(gè)偏管理型的首頁(yè)。在首頁(yè)上默認(rèn)展現(xiàn)和用戶(hù)自身相關(guān)的資產(chǎn)、負(fù)債、我的提醒、我的管家等，而且支持首頁(yè)自定義。很明顯，交通銀行想把首頁(yè)打造成一個(gè)用戶(hù)的“個(gè)人中心”的概念。

2. 圈定首頁(yè)展現(xiàn)內(nèi)容

定位之后，就需要去表達(dá)，此后用戶(hù)才能感知并產(chǎn)生行為，在首頁(yè)的功能定位明確后，需要從內(nèi)容、結(jié)構(gòu)、樣式等多個(gè)方面去進(jìn)行表達(dá)。內(nèi)容，是在定位之后我們需要第一件需要考慮的事情，我們需要決定在首頁(yè)放什么內(nèi)容。

首頁(yè)放什么的決策依據(jù)，一是業(yè)務(wù)需求，二是內(nèi)容效用。

業(yè)務(wù)需求很好理解。如前面說(shuō)，首頁(yè)除了是商業(yè)邏輯的體現(xiàn)外（就是拿什么去和用戶(hù)的金錢(qián)或時(shí)間進(jìn)行交易），還是內(nèi)部業(yè)務(wù)資源爭(zhēng)奪的結(jié)果，每個(gè)業(yè)務(wù)都想從首頁(yè)獲取更大的流量分流。所以說(shuō)，我們可以根據(jù)內(nèi)部的業(yè)務(wù)需求去決定在首頁(yè)放什么內(nèi)容。

從業(yè)務(wù)線(xiàn)角度，每個(gè)業(yè)務(wù)都想從首頁(yè)獲得給自己最大的流量分流，幫助自己創(chuàng)造更大的營(yíng)收。但從整體的角度，一定是希望首頁(yè)的流量得到最優(yōu)化的分發(fā)效率，不浪費(fèi)每一個(gè)uv。首頁(yè)流量分發(fā)效率的典型和簡(jiǎn)單的指標(biāo)是跳出率和點(diǎn)擊率（從效用角度還有更復(fù)雜的計(jì)算邏輯，例如和 ROI 、商品單價(jià)等進(jìn)行收益的綜合計(jì)算等，這里不贅述）。

如果一個(gè)首頁(yè)的流量分發(fā)效率高，那么每一個(gè)進(jìn)入首頁(yè)的用戶(hù)之后都會(huì)產(chǎn)生進(jìn)一步的行為，所以整體跳出率會(huì)比較低。同理，首頁(yè)的點(diǎn)擊率或者點(diǎn)擊uv占比也會(huì)比較高。這個(gè)低跳出率和高點(diǎn)擊率都是因?yàn)槭醉?yè)上的內(nèi)容對(duì)用戶(hù)而言是有吸引力的，對(duì)用戶(hù)是有價(jià)值的，能夠解決他的問(wèn)題的。從效用角度講，就是首頁(yè)上的內(nèi)容是具有比較高的效用的。

還是拿銀行類(lèi)的app舉例，在一些營(yíng)銷(xiāo)型的首頁(yè)上，通常會(huì)放比較高收益高流動(dòng)低門(mén)檻的存款或理財(cái)產(chǎn)品、比較高額度低利息的借款產(chǎn)品，比較爆款的生活服務(wù)補(bǔ)貼活動(dòng)等等，以此來(lái)吸引用戶(hù)產(chǎn)生進(jìn)一步了解的興趣。而且會(huì)根據(jù)數(shù)據(jù)表現(xiàn)不斷地進(jìn)行調(diào)整或智能推薦，以進(jìn)一步地提高數(shù)據(jù)表現(xiàn)。同樣的，管理型和工具型的首頁(yè)也會(huì)根據(jù)數(shù)據(jù)表現(xiàn)不斷地調(diào)整在首頁(yè)展現(xiàn)的內(nèi)容。從邏輯上，比較好的數(shù)據(jù)表現(xiàn)也說(shuō)明了首頁(yè)內(nèi)容是符合用戶(hù)對(duì)首頁(yè)所傳遞的app核心用戶(hù)價(jià)值的認(rèn)知預(yù)期的，也就是說(shuō)是符合具體的首頁(yè)功能定位的。

相比在諸多內(nèi)容之間進(jìn)行取舍，其實(shí)難度更大的在整體沒(méi)有豐富內(nèi)容時(shí)，如何決定在首頁(yè)放什么。筆者自身就經(jīng)歷過(guò)這么一個(gè)異常艱辛的過(guò)程。當(dāng)時(shí)，整一個(gè)app上財(cái)富業(yè)務(wù)加上信貸業(yè)務(wù)，總共的產(chǎn)品用一只手都數(shù)得過(guò)來(lái)。如果在首頁(yè)將這些產(chǎn)品都放上去吧，那首頁(yè)和后面的頻道頁(yè)內(nèi)容上就基本完全重疊了，所以首頁(yè)和頻道頁(yè)就根本沒(méi)有共同存在的必要。反過(guò)來(lái)，如果在首頁(yè)不放或者只放一兩只產(chǎn)品吧，首頁(yè)就會(huì)顯得很寒酸和單薄，也就沒(méi)有存在單獨(dú)首頁(yè)的必要了。所以，當(dāng)時(shí)就特別尷尬。有興趣的朋友可以勾搭一下，私下跟你講講在這種情況下我們的心路歷程和處理方法。

3. 確定首頁(yè)結(jié)構(gòu)布局

在圈定首頁(yè)的內(nèi)容之后，接著就需要確定首頁(yè)的結(jié)構(gòu)和布局。首頁(yè)的結(jié)構(gòu)和布局，是對(duì)內(nèi)容的擺布，直接決定了流量分配的優(yōu)先級(jí)順序。誰(shuí)是親生的，誰(shuí)是后娘養(yǎng)的，通過(guò)首頁(yè)的結(jié)構(gòu)布局，一眼就能看出來(lái)。當(dāng)然，決定結(jié)構(gòu)布局的也不光是流量分配這個(gè)功利性的因素，還有對(duì)首頁(yè)定位以及風(fēng)格的一個(gè)通盤(pán)考量。

在一個(gè)頁(yè)面上，從設(shè)計(jì)上存在著兩大類(lèi)信息，一類(lèi)是結(jié)構(gòu)信息，另一類(lèi)是特征信息。拿我們?nèi)祟?lèi)的面孔打個(gè)比方，所謂的特征信息就是面孔上的眼睛、眉毛、鼻子、嘴等一個(gè)個(gè)“物件兒”，結(jié)構(gòu)信息就是這些“物件兒”之間的空間關(guān)系，例如方位、距離等。我們?nèi)祟?lèi)對(duì)面孔的識(shí)別是基于這兩類(lèi)信息的，計(jì)算機(jī)在利用人工智能進(jìn)行人臉識(shí)別時(shí)大多是基于結(jié)構(gòu)信息。

閑話(huà)扯回來(lái)，具體說(shuō)到我們app首頁(yè)的結(jié)構(gòu)布局，他本質(zhì)上就是一種結(jié)構(gòu)信息，從設(shè)計(jì)上來(lái)說(shuō)無(wú)非就是各內(nèi)容在頁(yè)面中所在的位置、所占空間大小、他們之間的空間順序和親密關(guān)系。

筆者曾經(jīng)在攻讀心理學(xué)研究生的時(shí)候?qū)θ祟?lèi)的眼動(dòng)有過(guò)深入學(xué)術(shù)研究，包括在參加工作后也從事了大量的應(yīng)用研究。本質(zhì)上，人類(lèi)看一個(gè)頁(yè)面時(shí)的注視點(diǎn)分配基本反應(yīng)了他的關(guān)注點(diǎn)的分配，而關(guān)注點(diǎn)的分配基本決定了頁(yè)面上內(nèi)容的曝光量和點(diǎn)擊量，是成正比的。視線(xiàn)的移動(dòng)規(guī)律基本反應(yīng)了用戶(hù)的瀏覽和閱讀模式，包括先看哪個(gè)、后看哪個(gè)。

我們先從注視點(diǎn)說(shuō)起，頁(yè)面的注視點(diǎn)分布基本是F型分布的，即從上到下、從左到右依次遞減，而且面積越大，占據(jù)的注視點(diǎn)越多。所以，在app的頁(yè)面上，越在頁(yè)面的上部、面積越大，獲得的關(guān)注和點(diǎn)擊就會(huì)越多，也就是分得的流量就會(huì)越多。通常來(lái)說(shuō)，從整體考慮，為了整體效果最大化，會(huì)把效用最好的內(nèi)容放在頁(yè)面的上部，而且給予較大的展示面積，最大程度地提高流量分發(fā)效率，這是從功利性的一面去考量的。

但是，首頁(yè)除了需要考慮功利的一面外，還需要考慮定位問(wèn)題。把什么內(nèi)容占據(jù)頁(yè)面上部的位置、面積越大，從用戶(hù)角度來(lái)說(shuō)，接收到的信息權(quán)重就越大，就越是代表了這個(gè)頁(yè)面的定位。例如銀行的app，我們?cè)陧?yè)面上部大面積的去展示借款產(chǎn)品，其他的像存款理財(cái)、各類(lèi)生活服務(wù)等都放在下面，面積也不太大，那么用戶(hù)心智上會(huì)大概率認(rèn)為，這是一個(gè)信貸為主的app，核心的用戶(hù)價(jià)值就是解決用戶(hù)的借款問(wèn)題。

關(guān)于首頁(yè)的結(jié)構(gòu)信息，上面提到了位置、面積，還有空間順序和親密關(guān)系沒(méi)提?？臻g順序，在app首頁(yè)上就是從上到下（pc還需要考慮從左到右的問(wèn)題）先放哪個(gè)、后放哪個(gè)的問(wèn)題。在考慮空間順序時(shí)，第一，我們需要考慮內(nèi)容主次問(wèn)題（主營(yíng)業(yè)務(wù)和非主營(yíng)業(yè)務(wù)等）；第二我們要考慮內(nèi)容節(jié)奏問(wèn)題（固定內(nèi)容和非固定內(nèi)容）；第三我們要考慮用戶(hù)習(xí)慣問(wèn)題。

內(nèi)容的主次這個(gè)問(wèn)題上，我們優(yōu)先把主要內(nèi)容優(yōu)先排在次要內(nèi)容前面。從業(yè)務(wù)角度，主營(yíng)業(yè)務(wù)會(huì)排在非主營(yíng)頁(yè)面的前面，例如銀行app通常會(huì)把核心金融業(yè)務(wù)（轉(zhuǎn)賬匯款、賬戶(hù)查看、存款等）排在生活服務(wù)（福利等）前面。在內(nèi)容節(jié)奏問(wèn)題上，我們優(yōu)先把固定的內(nèi)容優(yōu)先排在非固定的內(nèi)容前面，幫助用戶(hù)形成較為穩(wěn)定的認(rèn)知。例如，功能入口、產(chǎn)品推薦會(huì)放在運(yùn)營(yíng)活動(dòng)的前面，因?yàn)榍罢咦儞Q的頻率低，相對(duì)穩(wěn)定，后者變換的頻率高。在用戶(hù)習(xí)慣問(wèn)題上，我們會(huì)優(yōu)先把高頻使用內(nèi)容優(yōu)先排在低頻的前面，縮短用戶(hù)尋找路徑。

至于親密關(guān)系，是內(nèi)容和內(nèi)容之間的遠(yuǎn)近親疏關(guān)系。通常會(huì)把有關(guān)聯(lián)的內(nèi)容放在一起，使之在用戶(hù)認(rèn)知上更接近形成一個(gè)整體，他們之間的間隔距離就會(huì)比較小。相反，關(guān)聯(lián)關(guān)系小的或者沒(méi)有關(guān)聯(lián)的內(nèi)容，他們之間的間隔距離就會(huì)比較大。我們?cè)谝?guī)整首頁(yè)內(nèi)容時(shí)，一般會(huì)將比較碎的內(nèi)容去尋找他們之間的關(guān)系，盡量讓他們形成一個(gè)整體，一是避免在視覺(jué)上比較零碎，二是幫助用戶(hù)形成認(rèn)知習(xí)慣。越是零碎，用戶(hù)的頁(yè)面瀏覽和信息加工成本就越高，同時(shí)因?yàn)橐?guī)律性差，形不成認(rèn)知習(xí)慣，所以不利于信息傳遞效率，也會(huì)在情緒傳遞上給用戶(hù)傳遞混亂無(wú)序的不良情緒。

例如，我們通過(guò)瓷片的方式去承載比較系列性的運(yùn)營(yíng)活動(dòng)內(nèi)容，將多個(gè)瓷片整合成一個(gè)福利專(zhuān)區(qū)。將不同品類(lèi)的爆款內(nèi)容放在一個(gè)專(zhuān)區(qū)形成一個(gè)爆款推薦專(zhuān)區(qū)。用戶(hù)在訪(fǎng)問(wèn)首頁(yè)后，很快就能形成對(duì)這些區(qū)域的認(rèn)知習(xí)慣。

首頁(yè)的結(jié)構(gòu)布局，不光是決定了流量分配機(jī)制，也一定程度上決定了首頁(yè)的定位以及風(fēng)格。在決定風(fēng)格這件事情上，還有一個(gè)重要的元素是最終的樣式。

風(fēng)格，是設(shè)計(jì)作品傳遞的一種情緒，好的情緒帶來(lái)用戶(hù)響應(yīng)上的好結(jié)果。決定風(fēng)格的最大因素，就是首頁(yè)的展現(xiàn)樣式。關(guān)于風(fēng)格樣式這件事，完全可以另設(shè)文章講述，因?yàn)槠脑?，就不在這里贅述了。但不管怎樣，在視覺(jué)上的舒適、美感、統(tǒng)一是最基本的要求，體現(xiàn)在色彩的運(yùn)用、造型語(yǔ)言、字體等多個(gè)方面的細(xì)節(jié)上。

寫(xiě)在最后

首頁(yè)，是商業(yè)邏輯的體現(xiàn)，是資源爭(zhēng)奪的結(jié)果，但歸根結(jié)底，是對(duì)用戶(hù)心智的占領(lǐng)。我們?cè)谠O(shè)計(jì)首頁(yè)、對(duì)首頁(yè)進(jìn)行改版時(shí)，一方面要考慮企業(yè)的商業(yè)訴求，另一方面更需要考慮用戶(hù)的心智訴求。只有真正讓用戶(hù)在心智層面感知到對(duì)他是有價(jià)值的、使用門(mén)檻低的、信息獲取高效的、并且能夠產(chǎn)生愉悅情緒的，才能占據(jù)用戶(hù)的心智。也只有是能夠占據(jù)用戶(hù)心智的首頁(yè)，才是一個(gè)好首頁(yè)。

作者：郭建偉；百信銀行用戶(hù)體驗(yàn)總監(jiān)

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

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