關(guān)于首頁的內(nèi)容還是蠻多的，我給分成了上下兩部，文章有點略長，還希望諸位拿出一點耐心能夠看完，相信大家會有所收獲，也不枉我辛苦碼字一場。老規(guī)矩，還是先來看一下整體結(jié)構(gòu)： 

△ 以下圖片來源于應(yīng)用截圖，僅作為學(xué)習(xí)交流使用

1. 進入首頁前的授權(quán)彈窗

用戶在初次登錄進入產(chǎn)品首頁之前，難免會彈出一些彈窗，包括授權(quán)類彈窗或促銷類彈窗，這些授權(quán)彈窗的出現(xiàn)無可厚非，用戶只有通過授權(quán)產(chǎn)品才可以正常運轉(zhuǎn)和使用某項功能;授權(quán)彈窗也是操作系統(tǒng)安全機制中的一部分，會涉及到用戶的安全和隱私，近期 Facebook 用戶信息泄露的事件頻頻發(fā)生，相信很多用戶對隱私的保護感只會越來越強，試想用戶還未使用產(chǎn)品，此時對產(chǎn)品的信任感較低，所以需要用戶授權(quán)的彈窗***是權(quán)限較高的，也是必要的授權(quán)，比如常見的有：網(wǎng)絡(luò)授權(quán)、消息通知授權(quán)、獲取定位、相機/相冊的授權(quán)……非必要性的授權(quán)(權(quán)限較低)彈窗***是在用戶使用某個功能的情況下出現(xiàn)，切忌一股腦的全部彈出讓用戶進行授權(quán)，會給用戶造成不必要的困擾，體驗也會很差，相信這點大家也都知道，比如：麥克風(fēng)、日歷、藍(lán)牙、通訊錄等等可以在使用到該功能時再彈出。 

因為系統(tǒng)不一樣，授權(quán)彈窗也會有些不同，iOS 相對比較尊重用戶，消息通知授權(quán)和網(wǎng)絡(luò)授權(quán)等都是需要用戶允許的，而安卓則不需要，相比起來 iOS 更優(yōu)一點。說到網(wǎng)絡(luò)授權(quán)，之前有小伙伴跟我討論過這一問題，就是有的產(chǎn)品有網(wǎng)絡(luò)授權(quán)，有的產(chǎn)品卻沒有，我之前倒沒有刻意注意過，后來在網(wǎng)上查了一下：由于國家有關(guān)規(guī)定的出臺，蘋果自 iOS 10以后針對中國大陸地區(qū)提供了需要用戶授權(quán)允許「無線局域網(wǎng)與蜂窩移動網(wǎng)絡(luò)」的彈窗，它的出現(xiàn)位置應(yīng)該是用戶初次打開應(yīng)用，注冊登錄之前，通過率應(yīng)該是會蠻高的，因為沒有網(wǎng)絡(luò)下面什么也不用做了。 

授權(quán)彈窗的設(shè)計可以直接使用系統(tǒng)模態(tài)彈窗的樣式，iOS 和安卓彈窗的樣式還有點不一樣，iOS 除了系統(tǒng)固定文字外還可以配以必要的說明文字，告知授權(quán)的重要性和不授權(quán)的后果，而安卓只能是系統(tǒng)固定的文字，相比起來又是 iOS 更優(yōu)一點。現(xiàn)在大部分用戶已經(jīng)十分熟悉這類彈窗的重要性，一次性允許授權(quán)的通過率也很高，這里還要提一下：iOS 只能出現(xiàn)一次授權(quán)彈窗，而安卓比較特殊，下次登錄時還會彈出授權(quán)彈窗，也可以點擊不再提醒。 

如果 iOS 用戶在***次拒絕了授權(quán)，產(chǎn)品也是有二次授權(quán)的機會的，比如電商類產(chǎn)品消息通知的授權(quán)，我一般都不會授權(quán)，因為不喜歡被促銷消息所打擾(這只是我個人習(xí)慣，不知道大家是不是也是這樣)，但是這類授權(quán)對電商類產(chǎn)品很重要，再次登錄產(chǎn)品時，會彈出二次授權(quán)彈窗提醒用戶去打開消息通知，但是這里的區(qū)別就是，點擊授權(quán)是利用深層鏈接(deep-link)直接跳轉(zhuǎn)到系統(tǒng)設(shè)置中去打開相應(yīng)授權(quán)，這樣就會比較繁瑣。還有一類情況是在頁面中使用引導(dǎo)的方式去打開權(quán)限，無關(guān)授權(quán)彈窗的內(nèi)容這里就不多說了。當(dāng)然還有的產(chǎn)品很聰明，在授權(quán)彈窗出現(xiàn)之前會使用預(yù)授權(quán)機制(pre-permission)，先試探一下用戶是否會授權(quán)，比如會先彈出設(shè)計比較美觀的彈窗(帶有誘導(dǎo)性的文字或是插畫)，在你點擊 button 后再彈出系統(tǒng)授權(quán)彈窗，這樣做可以避免二次授權(quán)的繁瑣，操作成本也會比較高，能這么做的產(chǎn)品還是比較少見的。 

促銷類彈窗的內(nèi)容這里就不多說了，在往期文章中有所提到，可以在文章底部點擊鏈接查看。

2. 下拉刷新

下拉刷新相信大家已經(jīng)是司空見慣了，幾乎所有的產(chǎn)品都會有這一功能，這一交互的首創(chuàng)是源于 twitter，后來慢慢流行開來，下拉刷新其實也不只是在首頁存在，在產(chǎn)品很多頁面中普遍存在。

下拉刷新的過程：頁面整體下拉，頂部出現(xiàn)提示文案「松開即可刷新」— 松開后顯示旋轉(zhuǎn)動效+「刷新中」— 刷新成功后動效消失(toast 提示刷新數(shù)據(jù)情況)，頁面自動置頂/如果刷新失敗進行 toast 提示。整個過程中要保持動效的可見性，在刷新結(jié)束出現(xiàn)數(shù)據(jù)后再隱藏動效，并且刷新過程中用戶是可以繼續(xù)操作的，不是說刷新過程中就什么也做不了;刷新的結(jié)果根據(jù)時間排序，即***的數(shù)據(jù)在最上面;如果用戶在短時間內(nèi)進行多次下拉刷新，需要進行 toast 提醒(比如「你的操作太過頻繁啦」)，防止出現(xiàn)頁面卡頓或服務(wù)器請求失敗的情況。

下拉刷新的動效設(shè)計現(xiàn)在的趨勢真是越來越多樣化，早已不再局限于早期系統(tǒng)的刷新樣式，各大產(chǎn)品都設(shè)計了擁有自己特色的刷新動效，將自己的品牌基因融合進去，并加以趣味活潑的文案修飾，給人一種驚喜感，可以加深了用戶對產(chǎn)品的印象，這種做法可謂是一舉多得。 

這里還有必要提一下自動刷新，之前有小伙伴跟我聊過，產(chǎn)品為什么不能自動刷新呢，那樣多方便啊，自動刷新的情況也不是沒有，比如某個產(chǎn)品你長時間沒有登錄，再次登錄進入首頁會自動進行刷新動態(tài)數(shù)據(jù)，方便閱讀;還有的就是常見于數(shù)據(jù)類的產(chǎn)品，比如要實時查看數(shù)據(jù)的增長情況，自動刷新就會很有必要。但是為什么普遍產(chǎn)品在使用過程中還是使用下拉刷新而不是自動刷新呢，試想你在刷朋友圈、微博、知乎等情況下，系統(tǒng)在設(shè)置的時間段內(nèi)進行了自動刷新，你正津津有味的看著某個動態(tài)，數(shù)據(jù)突然自動刷新了，正在閱讀的動態(tài)可能就被擠到下面了，相信這樣的體驗對用戶來說就是災(zāi)難。

3. 持續(xù)下拉進入產(chǎn)品二樓

上面說的是下拉刷新，這里要說的是在首頁持續(xù)下拉會進入的頁面是二樓活動頁面或是其他功能頁面，這是對下拉刷新基礎(chǔ)上的顛覆，相信這一功能的出現(xiàn)會讓用戶眼前一亮。記憶中***這么做的是淘寶，好像京東搞活動的時候也這么做過，有點記不太清了。目前淘寶首頁整體持續(xù)下拉是《一千零一夜》活動，是短視頻+相關(guān)商品+UGC 的方式，給了用戶一個完整的購物體驗，這種做法跟廣告行業(yè)的營銷是一樣的。我看了一下，每個短視頻的播放量都是***的，視頻的體驗都很不錯，基本上是先講述一個故事，播放完或點擊暫停會出現(xiàn)關(guān)聯(lián)商品，可以點擊進入商品詳情促成購買。但是光有商品是不夠的，用戶的評價也很重要，就跟我們平時購物一樣，我們肯定也會關(guān)注大家的評價如何。另外還會鼓勵用戶進行訂閱和分享，也希望用戶多多生產(chǎn) UGC 內(nèi)容，綜合來說整體的方式比較有說服力，用戶也比較能夠接受。 

早期微信6.6.1版本更新后，首頁下拉出現(xiàn)的是小程序的快捷入口，可以更加快速的找到近期使用過的小程序，節(jié)省了很多步驟。如果持續(xù)下拉整體頁面的話會出現(xiàn)提示文案「這不是入口」，也是不錯的體驗，記憶中早期的文案更俏皮一點，現(xiàn)在應(yīng)該是換掉了。 

還有一個值得提一下的就是盒馬的二樓是「盒爾蒙」業(yè)務(wù)，是專門賣成人用品的，剛開始知道這個模塊的時候有點吃驚，畢竟盒馬是一家主營生鮮的電商，竟然玩起了跨界突然開始賣起了成人用品，尺度是不是有點大啊。可能市場上對成人商品的需求比較大，畢竟購買成人用品大部分還是線上購買比較多，畢竟線下購買可能很多人難免會有點不好意思，隱私得不到保證，而且價格比較貴，這樣一想盒馬想和阿里、網(wǎng)易分一杯羹也可以理解。盒爾蒙的三大競爭力是：品質(zhì)保障、30分鐘達(dá)、隱私包裝，相信光「30分鐘達(dá)」這一條就足夠有競爭力了。盒爾蒙為什么要在二樓售賣，可能畢竟盒馬的主營業(yè)務(wù)還是生鮮，總感覺生鮮和成人用品要是雜揉在一起銷售難免會有點奇怪，放到二樓可以保證2個模塊的獨立性，可以互不打擾。 

可能還有一些產(chǎn)品首頁也有二樓這一功能，我就不一一舉例了，大家有興趣的就自己研究研究吧。

4. 城市/地址定位

定位功能相信大家都很熟知了，在獲取用戶的定位授權(quán)后，產(chǎn)品可以根據(jù)定位范圍提供相應(yīng)的服務(wù)，功能很常見，比如電商類、團購類、社交類(做社區(qū))等;用戶每次進入產(chǎn)品首頁都會刷新定位，一般都很精準(zhǔn)，用戶除非需要更改定位才會想到要去點擊它。定位功能常見于首頁搜索框左側(cè)，但是發(fā)展來看首頁對于某些產(chǎn)品來說是***，比如電商類和社交類產(chǎn)品，用戶一般會在個人資料里添加多個收貨地址，下單時直接選擇地址就好，不需要用戶常去更改定位，所以現(xiàn)在首頁定位入口干脆隱藏掉了;而對于團購類或是需要提供及時配送服務(wù)的產(chǎn)品，需要用戶方便查看和更改定位，所以這類產(chǎn)品都將定位功能在首頁予以保留，下面就來舉2個例子說明一下：

美團首頁頂部保留著定位功能入口，考慮用戶使用場景，用戶通過產(chǎn)品可以查看定位城市周邊所有團購服務(wù)，只需要精準(zhǔn)定位到區(qū)/縣/市等即可，如有查看其它區(qū)域需求時，可以方便用戶點擊進行切換。點擊定位后進入定位頁面，組成結(jié)構(gòu)：直接搜索城市(方便快速選擇新城市)+國內(nèi)/海外tab+當(dāng)前城市+切換城市+熱門城市+所有城市(字母索引，根據(jù)城市首字母排序，可快速找到選擇字母下的所有城市)。 

美團外賣首頁頂部定位是精準(zhǔn)到具體地址，因為平臺需要根據(jù)用戶定位范圍X公里內(nèi)進行美食推薦，點擊地址進入收貨地址頁面，構(gòu)成：城市切換(比如給其它城市親人朋友點餐情況)+搜索收貨地址(針對當(dāng)前已選城市搜索具體地址)+當(dāng)前定位+重新定位+我的收貨地址(地址標(biāo)簽)+附近地址(方便快速選擇新地址)+新增地址(這個功能很有必要，可以快速鏈接到新增地址頁面)。這種頁面構(gòu)成常見于需要及時配送的平臺，因為需要考慮商品的時效性，需要當(dāng)日達(dá)/1小時達(dá)等，還比如：餓了么、每日優(yōu)鮮、盒馬…… 

不同產(chǎn)品對于定位功能的訴求是不一樣的：電商類首頁頂部不保留定位功能入口;團購類產(chǎn)品首頁定位到區(qū)/縣/市等;外賣/及時配送類產(chǎn)品首頁需要定位到具體地址;可以根據(jù)產(chǎn)品需求具體應(yīng)用。

5. 搜索模塊

搜索功能幾乎是所有產(chǎn)品的標(biāo)配，也是必不可少的功能之一，因為搜索既可以幫助用戶方便快捷地找到想找的內(nèi)容，也可以通過用戶的歷史搜索進行相關(guān)大數(shù)據(jù)分析，在「猜你喜歡」模塊可以給用戶推薦可能感興趣的商品，引導(dǎo)用戶去購買。

搜索入口形式一般有2種，一種就是搜索框，還有一種就是點擊搜索icon 進入搜索頁面。先來說說搜索框，這種形式最為普遍，因為搜索框是直觀的形式，大多數(shù)產(chǎn)品都是采用這種方式，因為用戶一進入首頁就可以看見，目的性比較強，電商類產(chǎn)品這種形式比較普遍，組成形式：搜索框+搜索icon+熱搜關(guān)鍵詞(+掃一掃/相機掃描識別)，熱搜關(guān)鍵詞是根據(jù)運營需要或是數(shù)據(jù)推薦不定時更換的，如果熱搜詞剛好是用戶感興趣的，可以點擊搜索框進入搜索頁，直接點擊搜索，減去了還要輸入關(guān)鍵詞的繁瑣步驟;當(dāng)然產(chǎn)品使用第二種搜索icon 的方式也蠻多的，常見于垂直類電商或是閱讀類產(chǎn)品等，這類產(chǎn)品將搜索功能進行了弱化，可能搜索內(nèi)容并不是用戶的主要訴求，用戶只想進來隨便看看和逛逛。 

進入搜索頁面后，大致主要組成有：搜索框+搜索icon+熱搜關(guān)鍵詞(+掃一掃/相機掃描識別)+關(guān)鍵詞聯(lián)想+清空關(guān)鍵詞button+返回/取消/搜索button(+分類tab)+歷史搜索+清空搜索記錄(+熱門搜索)(+語音輸入)+輸入鍵盤(搜索button);詳解如下： 

掃一掃/相機掃描識別：通過掃描條碼或商品進行識別，得出搜索結(jié)果和類似商品;

• 關(guān)鍵詞聯(lián)想：這個功能十分重要，可以減少用戶輸入，每輸入一個字段就要加載一次，將聯(lián)想的結(jié)果展示出來，方便用戶快速找到目標(biāo)搜索對象;
• 清空關(guān)鍵詞 button：一鍵點擊快速清空錯誤關(guān)鍵詞或更換新的關(guān)鍵詞;
• 返回/取消/搜索 button：如果搜索框左側(cè)沒有返回 button，右側(cè)就會有取消 button;如果左側(cè)有返回 button，右側(cè)取消 button 可以變?yōu)樗阉?button;
• 分類 tab：針對當(dāng)前分類下進行關(guān)鍵詞搜索，更加快速、準(zhǔn)確;
• 歷史搜索+清空搜索記錄：保留歷史搜索記錄可以方便用戶一鍵點擊，再次進行搜索，可以避免重復(fù)操作，當(dāng)然刪除搜索記錄也很必要，可以減少頁面無用信息的占比，也可以有效保護用戶的搜索隱私;
• 熱門搜索：可能是搜索熱度較高的關(guān)鍵詞;運營需要主推的關(guān)鍵詞;大數(shù)據(jù)推薦猜你感興趣的關(guān)鍵詞;
• 語音輸入：用戶通過語音直接說出關(guān)鍵詞，免去輸入步驟，可以方便老年人/殘疾人或是特殊場景下也能使用搜索功能;
• 輸入鍵盤：進入搜索頁鍵盤默認(rèn)彈出;搜索 button ***設(shè)置在鍵盤上，會更加方便;關(guān)鍵詞輸入結(jié)束后用戶上下滑動查看搜索結(jié)果時鍵盤要自動收起;

還有很多產(chǎn)品細(xì)節(jié)差異上的功能和搜索結(jié)果頁面的內(nèi)容就不展開說了，有機會再詳細(xì)說一說。

6. 掃一掃

相信掃一掃功能幾乎是每天都會用到的功能，二維碼付款已經(jīng)充斥了我們生活的各個方面，微信/支付寶的掃一掃功能相信大家是每天都會用到的，而且這個功能也越來越強大，不止掃描二維碼甚至還可以識別手機相冊內(nèi)照片上的二維碼;下面找了幾個具有代表性的產(chǎn)品分析一下掃一掃的功能： 

• 微信：掃碼識別+相冊照片二維碼識別+書籍/CD 等封面識別+街景識別(定位功能)+文字拍照翻譯+操作文字提示+手電筒(在環(huán)境光較暗時出現(xiàn)，引導(dǎo)用戶的體驗很好);
• 支付寶：頁面布局和交互跟微信類似，區(qū)別是頁面底部的 AR tab;AR 掃描相信大家應(yīng)該都體驗過了，春節(jié)期間 AR 掃福字和掃紅包也是大熱;
• 淘寶：底部 AR/掃碼/拍照識別tab(tab間切換會有動效)+識別歷史+相冊照片二維碼識別+手電筒+幫助+操作文字提示+廣告;
• 京東：頂部 掃碼識別/拍照識別/AR tab+識別歷史+交易記錄+輸入條形碼+操作文字提示+手電筒+底部 付款碼/支付優(yōu)惠/相冊照片二維碼識別/會員碼;沒有看出頁面底部放置付款碼/支付優(yōu)惠/會員碼功能的用意，點擊是跳轉(zhuǎn)到下級頁面，是否有點多余?相冊照片二維碼識別功能不應(yīng)該穿插其中，個人感覺體驗不是很好。

對比上面4種掃一掃功能，可以看出用戶的核心訴求還是掃描二維碼進行識別，其他的一些功能可以作為各自的特色和產(chǎn)品差異，做好核心訴求的交互體驗是最重要的，所以進入掃一掃頁面，掃描二維碼必須是默認(rèn)頁面，應(yīng)將其作為首要功能;操作過程中的文字提示引導(dǎo)也十分重要，及時告知用戶如何使用，避免識別不出和耗時較長造成的挫敗感;另外判斷出環(huán)境光不佳情況下，及時提示打開手電筒也很必要，因為用戶很可能會忽視，這一點微信、支付寶、京東都做到了。

小結(jié)

文章略長，上半部分只說了關(guān)于首頁頂部的一些內(nèi)容，可能有一些功能不是普遍現(xiàn)象這里就不多說了，整體寫下來感覺內(nèi)容還是蠻多的，如有不足之處大家可以留言探討，總之希望對你有所收獲，下半部分將盡快進行更新。