寫給新手的APP結(jié)構(gòu)指南

關(guān)于首頁的內(nèi)容照舊蠻多的，我給分成了上下兩部，文章有點(diǎn)略長，還盼望諸位拿出一點(diǎn)耐心能夠看完，信賴大家會(huì)有所收獲，也不枉我費(fèi)力碼字一場(chǎng)。老規(guī)矩，照舊先來看一下團(tuán)體結(jié)構(gòu)：

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

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

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

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

授權(quán)彈窗的設(shè)計(jì)可以直接使用體系模態(tài)彈窗的樣式，iOS 和安卓彈窗的樣式還有點(diǎn)不一樣，iOS 除了體系固定筆墨外還可以配以需要的說明筆墨，告知授權(quán)的緊張性和不授權(quán)的后果，而安卓只能是體系固定的筆墨，相比起來又是 iOS 更優(yōu)一點(diǎn)。如今大部分用戶已經(jīng)十分認(rèn)識(shí)這類彈窗的緊張性，一次性許可授權(quán)的通過率也很高，這里還要提一下：iOS 只能出現(xiàn)一次授權(quán)彈窗，而安卓比較特別，下次登錄時(shí)還會(huì)彈出授權(quán)彈窗，也可以點(diǎn)擊不再提示。

假如 iOS 用戶在第一次拒絕了授權(quán)，產(chǎn)品也是有二次授權(quán)的機(jī)會(huì)的，比如電商類產(chǎn)品新聞關(guān)照的授權(quán)，我一樣平常都不會(huì)授權(quán)，由于不喜好被促銷新聞所打攪（這只是我小我風(fēng)俗，不知道大家是不是也是如許），但是這類授權(quán)對(duì)電商類產(chǎn)品很緊張，再次登錄產(chǎn)品時(shí)，會(huì)彈出二次授權(quán)彈窗提示用戶去打開新聞關(guān)照，但是這里的區(qū)別就是，點(diǎn)擊授權(quán)是行使深層鏈接（deep-link）直接跳轉(zhuǎn)到體系設(shè)置中去打開響應(yīng)授權(quán)，如許就會(huì)比較繁瑣。還有一類情況是在網(wǎng)頁中使用指導(dǎo)的體例去打開權(quán)限，無關(guān)授權(quán)彈窗的內(nèi)容這里就不多說了。當(dāng)然還有的產(chǎn)品很聰明，在授權(quán)彈窗出現(xiàn)之前會(huì)使用預(yù)授權(quán)機(jī)制（pre-permission），先試探一下用戶是否會(huì)授權(quán)，比如會(huì)先彈出設(shè)計(jì)比較美觀的彈窗（帶有誘導(dǎo)性的筆墨或是插畫），在你點(diǎn)擊 button 后再彈出體系授權(quán)彈窗，如許做可以避免二次授權(quán)的繁瑣，操作成本也會(huì)比較高，能這么做的產(chǎn)品照舊比較少見的。

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

2. 下拉刷新

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

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

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

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

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

上面說的是下拉刷新，這里要說的是在首頁持續(xù)下拉會(huì)進(jìn)入的網(wǎng)頁是二樓活動(dòng)網(wǎng)頁或是其他功能網(wǎng)頁，這是對(duì)下拉刷新基礎(chǔ)上的推翻，信賴這一功能的出現(xiàn)會(huì)讓用戶面前目今一亮。記憶中最先這么做的是淘寶，彷佛京東搞活動(dòng)的時(shí)候也這么做過，有點(diǎn)記不太清了。目前淘寶首頁團(tuán)體持續(xù)下拉是《一千零一夜》活動(dòng)，是短視頻+相干商品+UGC 的體例，給了用戶一個(gè)完備的購物體驗(yàn)，這種做法跟廣告行業(yè)的營銷是一樣的。我看了一下，每個(gè)短視頻的播放量都是百萬級(jí)的，視頻的體驗(yàn)都很不錯(cuò)，基本上是先講述一個(gè)故事，播放完或點(diǎn)擊停息會(huì)出現(xiàn)關(guān)聯(lián)商品，可以點(diǎn)擊進(jìn)入商品詳情促成購買。但是光有商品是不夠的，用戶的評(píng)價(jià)也很緊張，就跟我們平時(shí)購物一樣，我們一定也會(huì)關(guān)注大家的評(píng)價(jià)如何。另外還會(huì)鼓勵(lì)用戶進(jìn)行訂閱和分享，也盼望用戶多多生產(chǎn) UGC 內(nèi)容，綜合來說團(tuán)體的體例比較有說服力，用戶也比較能夠接受。

早期微信6.6.1版本更新后，首頁下拉出現(xiàn)的是小程序的快捷入口，可以更加快速的找到近期使用過的小程序，節(jié)省了許多步驟。假如持續(xù)下拉團(tuán)體網(wǎng)頁的話會(huì)出現(xiàn)提醒文案「這不是入口」，也是不錯(cuò)的體驗(yàn)，記憶中早期的文案更俏皮一點(diǎn)，如今應(yīng)該是換掉了。

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

可能還有一些產(chǎn)品首頁也有二樓這一功能，我就不逐一舉例了，大家有愛好的就本身研究研究吧。

4. 城市/地址定位

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

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

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

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

5. 搜索模塊

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

搜索入口情勢(shì)一樣平常有2種，一種就是搜索框，還有一種就是點(diǎn)擊搜索icon 進(jìn)入搜索網(wǎng)頁。先來說說搜索框，這種情勢(shì)最為普遍，由于搜索框是直觀的情勢(shì)，大多數(shù)產(chǎn)品都是采用這種體例，由于用戶一進(jìn)入首頁就可以看見，目的性比較強(qiáng)，電商類產(chǎn)品這種情勢(shì)比較普遍，組成情勢(shì)：搜索框+搜索icon+熱搜關(guān)鍵詞（+掃一掃/相機(jī)掃描識(shí)別），熱搜關(guān)鍵詞是根據(jù)運(yùn)營必要或是數(shù)據(jù)保舉不準(zhǔn)時(shí)替換的，假如熱搜詞剛好是用戶感愛好的，可以點(diǎn)擊搜索框進(jìn)入搜索頁，直接點(diǎn)擊搜索，減去了還要輸入關(guān)鍵詞的繁瑣步驟；當(dāng)然產(chǎn)品使用第二種搜索icon 的體例也蠻多的，常見于垂直類電商或是閱讀類產(chǎn)品等，這類產(chǎn)品將搜索功能進(jìn)行了弱化，可能搜索內(nèi)容并不是用戶的重要訴求，用戶只想進(jìn)來隨便看看和逛逛。

進(jìn)入搜索網(wǎng)頁后，大致重要組成有：搜索框+搜索icon+熱搜關(guān)鍵詞（+掃一掃/相機(jī)掃描識(shí)別）+關(guān)鍵詞聯(lián)想+清空關(guān)鍵詞button+返回/取消/搜索button（+分類tab）+歷史搜索+清空搜索記錄（+熱門搜索）（+語音輸入）+輸入鍵盤（搜索button）；詳解如下：

• 掃一掃/相機(jī)掃描識(shí)別：通過掃描條碼或商品進(jìn)行識(shí)別，得出搜索效果和類似商品；

• 關(guān)鍵詞聯(lián)想：這個(gè)功能十分緊張，可以削減用戶輸入，每輸入一個(gè)字段就要加載一次，將聯(lián)想的效果展示出來，方便用戶快速找到目標(biāo)搜索對(duì)象；

• 清空關(guān)鍵詞 button：一鍵點(diǎn)擊快速清空錯(cuò)誤關(guān)鍵詞或替換新的關(guān)鍵詞；

• 返回/取消/搜索 button：假如搜索框左側(cè)沒有返回 button，右側(cè)就會(huì)有取消 button；假如左側(cè)有返回 button，右側(cè)取消 button 可以變?yōu)樗阉?button；

• 分類 tab：針對(duì)當(dāng)前分類下進(jìn)行關(guān)鍵詞搜索，更加快速、正確；

• 歷史搜索+清空搜索記錄：保留歷史搜索記錄可以方便用戶一鍵點(diǎn)擊，再次進(jìn)行搜索，可以避免重復(fù)操作，當(dāng)然刪除搜索記錄也很需要，可以削減網(wǎng)頁無用信息的占比，也可以有用珍愛用戶的搜索隱私；

• 熱門搜索：可能是搜索熱度較高的關(guān)鍵詞；運(yùn)營必要主推的關(guān)鍵詞；大數(shù)據(jù)保舉猜你感愛好的關(guān)鍵詞；

• 語音輸入：用戶通過語音直接說出關(guān)鍵詞，免去輸入步驟，可以方便老年人/殘疾人或是特別場(chǎng)景下也能使用搜索功能；

• 輸入鍵盤：進(jìn)入搜索頁鍵盤默認(rèn)彈出；搜索 button 最好設(shè)置在鍵盤上，會(huì)更加方便；關(guān)鍵詞輸入結(jié)束后用戶上下滑動(dòng)查看搜索效果時(shí)鍵盤要主動(dòng)收起；

還有許多產(chǎn)品細(xì)節(jié)差異上的功能和搜索效果網(wǎng)頁的內(nèi)容就不睜開說了，有機(jī)會(huì)再細(xì)致說一說。

6. 掃一掃

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

• 微信：掃碼識(shí)別+相冊(cè)照片二維碼識(shí)別+書籍/CD 等封面識(shí)別+街景識(shí)別（定位功能）+筆墨拍照翻譯+操作筆墨提醒+手電筒（在環(huán)境光較暗時(shí)出現(xiàn)，指導(dǎo)用戶的體驗(yàn)很好）；

• 付出寶：網(wǎng)頁布局和交互跟微信類似，區(qū)別是網(wǎng)頁底部的 AR tab；AR 掃描信賴大家應(yīng)該都體驗(yàn)過了，春節(jié)期間 AR 掃福字和掃紅包也是大熱；

• 淘寶：底部 AR/掃碼/拍照識(shí)別tab（tab間切換會(huì)有動(dòng)效）+識(shí)別歷史+相冊(cè)照片二維碼識(shí)別+手電筒+幫助+操作筆墨提醒+廣告；

• 京東：頂部 掃碼識(shí)別/拍照識(shí)別/AR tab+識(shí)別歷史+交易記錄+輸入條形碼+操作筆墨提醒+手電筒+底部 付款碼/付出優(yōu)惠/相冊(cè)照片二維碼識(shí)別/會(huì)員碼；沒有看出網(wǎng)頁底部放置付款碼/付出優(yōu)惠/會(huì)員碼功能的用意，點(diǎn)擊是跳轉(zhuǎn)到下級(jí)網(wǎng)頁，是否有點(diǎn)多余？相冊(cè)照片二維碼識(shí)別功能不應(yīng)該穿插其中，小我感覺體驗(yàn)不是很好。

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

小結(jié)

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

迎接關(guān)注作者的公眾微旌旗燈號(hào)：「Eason張UED」

圖片素材作者：Manoj Rajput