06 facebook更換封面動態刪除(APP UI結構-首頁相關)

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

4.城市/地址定位

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

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

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

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

5.搜索模塊

搜索功能幾乎是所有產品的標配，也是必不可少的功能之一，因為搜索既可以幫助用戶方便快捷地找到想找的內容，也可以通過用戶的歷史搜索進行相關大數據分析，在“猜你喜歡”模塊可以給用戶推薦可能感興趣的商品，引導用戶去購買。

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

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

a.掃一掃/相機掃描識別：通過掃描條碼或商品進行識別，得出搜索結果和類似商品；

b.關鍵詞聯想：這個功能十分重要，可以減少用戶輸入，每輸入一個字段就要加載一次，將聯想的結果展示出來，方便用戶快速找到目標搜索對象；

c.清空關鍵詞button：一鍵點擊快速清空錯誤關鍵詞或更換新的關鍵詞；

d.返回/取消/搜索button：如果搜索框左側沒有返回button，右側就會有取消button；如果左側有返回button，右側取消button可以變為搜索button；

e.分類tab：針對當前分類下進行關鍵詞搜索，更加快速、準確；

f.歷史搜索 清空搜索記錄：保留歷史搜索記錄可以方便用戶一鍵點擊，再次進行搜索，可以避免重復操作，當然刪除搜索記錄也很必要，可以減少頁面無用信息的占比，也可以有效保護用戶的搜索隱私；

g.熱門搜索：可能是搜索熱度較高的關鍵詞；運營需要主推的關鍵詞；大數據推薦猜你感興趣的關鍵詞；

h.語音輸入：用戶通過語音直接說出關鍵詞，免去輸入步驟，可以方便老年人/殘疾人或是特殊場景下也能使用搜索功能；

i.輸入鍵盤：進入搜索頁鍵盤默認彈出；搜索button最好設置在鍵盤上，會更加方便；關鍵詞輸入結束后用戶上下滑動查看搜索結果時鍵盤要自動收起；

還有很多產品細節差異上的功能和搜索結果頁面的內容就不展開說了，有機會再詳細說一說。

6.掃一掃

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

a.買粉絲：掃碼識別 相冊照片二維碼識別 書籍/CD等封面識別 街景識別(定位功能) 文字拍照翻譯 操作文字提示 手電筒(在環境光較暗時出現，引導用戶的體驗很好)；

b.支付寶：頁面布局和交互跟買粉絲類似，區別是頁面底部的AR tab；AR掃描相信大家應該都體驗過了，春節期間AR掃福字和掃紅包也是大熱；

c.淘寶：底部 AR/掃碼/拍照識別tab(tab間切換會有動效) 識別歷史 相冊照片二維碼識別 手電筒 幫助 操作文字提示 廣告；

d.京東：頂部 掃碼識別/拍照識別/AR tab 識別歷史 交易記錄 輸入條形碼 操作文字提示 手電筒 底部 付款碼/支付優惠/相冊照片二維碼識別/會員碼；沒有看出頁面底部放置付款碼/支付優惠/會員碼功能的用意，點擊是跳轉到下級頁面，是否有點多余？相冊照片二維碼識別功能不應該穿插其中，個人感覺體驗不是很好；

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

小結

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

以上，Thanks for reading! To be 買粉絲ntinued…

本系列相關文章推薦閱讀：

純干貨！肢解APP UI的結構UI設計師們還不重視閃屏設計？

APP UI結構-用戶引導提示APP UI結構-注冊/登錄

作者：EasonzhangUED，UI中國。欲轉載請聯系我。

UI中國

作者：EasonZhangUED

很赞哦!（5922）