索框，這種形式最為普遍，因為搜索框是直觀的形式，大多數產品都是采用這種方式，因為用戶一進入首頁就可以看見，目的性比較強，電商類產品這種形式比較普遍，組成形式：搜索框 搜索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