ENJOY作為一款美食應(yīng)用鹏往，以精致高端從眾多同類應(yīng)用中區(qū)分出來蓖租，而它也獲得了2015年的豌豆莢設(shè)計獎旱物，今天就它的頁面交互來進(jìn)行一下分析。
啟動頁面
啟動頁面并不是像普通app（通過引導(dǎo)頁展現(xiàn)產(chǎn)品的功能）而是通過一系列富有視覺沖擊力的動畫梳星，以食物赞赖、食器為元素，展現(xiàn)出飲食的儀式感冤灾，很有藝術(shù)氣息前域。
主頁元素
主頁沒有采用常見的tab bar的形式，而是篩選功能和navigition bar安排在同一個黑色的背景上韵吨。整個頁面可以一直向下滾動匿垄，有更好的瀏覽體驗(yàn)。
1.導(dǎo)航欄
導(dǎo)航欄將搜索、位置椿疗、個人漏峰、發(fā)現(xiàn)、篩選功能很好的進(jìn)行了排布届榄。
第一層安排了一些基本入口浅乔，搜索、位置铝条、個人靖苇。地理位置字號很小，但不影響可讀性班缰。
第二層將新品贤壁、附近、夜生活（可根據(jù)不同時段進(jìn)行更改）組合在一起埠忘，這三個都代表發(fā)現(xiàn)脾拆，但代表不同分類。將熱門分類安置在最右端莹妒，代表另一種信息名船，與前三種不同。
搜索功能
搜索功能安排在頁面的左上角动羽，以一個放大鏡的形式進(jìn)行展現(xiàn)包帚。
1.點(diǎn)擊效果
點(diǎn)擊放大鏡按鈕，觸發(fā)（按照時間順序排列）
- 放大鏡按鈕透明度發(fā)生變化
- 主頁左移运吓，搜索頁面左移，v（主頁）< v（搜索）
- 搜索框刪除按鈕顯示
- 輸入鍵盤彈出
兩個頁面移動速度不一樣疯趟，保證了視覺上的連貫性拘哨。在移動過程中輔以其他元素的動畫效果，增加了頁面的活潑程度信峻。
頁面左滑進(jìn)入倦青，點(diǎn)擊取消，頁面右滑退出盹舞。使用手勢右滑产镐，也可回到主界面。
『思考』
沒有使用后退<踢步，是為了使頁面左右更加平衡癣亚。
點(diǎn)擊搜索向左滑動而不是向右滑動，是因?yàn)樵谕顺鲰撁孢^程中获印，右滑在用戶心中已經(jīng)形成思維定式述雾。
2.搜索頁面內(nèi)容
頁面內(nèi)容：
- 搜索框提示“請輸入商品名、商家、分類玻孟、商圈”唆缴，簡明的告訴用戶可以在搜索框中搜索什么。
- 搜索頁面中推薦了9個（3x3）熱門搜索黍翎，詞條內(nèi)容包括商品名面徽、商家、分類匣掸、商圈趟紊，與搜索框內(nèi)置提示文字類型相符。
- 當(dāng)搜索過一些詞條后旺聚，頁面增添搜索歷史元素织阳。搜索歷史包括最多包含5條內(nèi)容，按照搜索先后順序進(jìn)行排列砰粹，在搜索歷史最后有清除搜索記錄按鈕唧躲。
頁面交互：
- 在搜索框中輸入相應(yīng)文字，點(diǎn)擊鍵盤上搜索按鈕進(jìn)行搜索碱璃。如果輸入錯誤弄痹，點(diǎn)擊差號進(jìn)行刪除。點(diǎn)擊取消則退回主界面嵌器。
- 點(diǎn)擊熱門搜索中關(guān)鍵字或搜索歷史關(guān)鍵字肛真，關(guān)鍵字會顯示在跳轉(zhuǎn)頁中的搜索欄中。點(diǎn)擊差號爽航，可以跳轉(zhuǎn)到上一頁蚓让，且關(guān)鍵字消失，替換成“請輸入商品名...”讥珍。頁面直接右滑历极，關(guān)鍵字則不消失。
- 在頁面跳轉(zhuǎn)過程中有加載小動畫衷佃。
主頁信息流
1.內(nèi)容排布
主頁信息流中主要分為活動banner與單品推薦兩種趟卸。
Banner
- Banner數(shù)量不定量（在觀察過程中發(fā)現(xiàn)有1張、3張）氏义，呈縱向平鋪锄列。
- Banner種類有整點(diǎn)搶禮券、同種單品集等形式惯悠。
單品推薦
- 單品推薦分兩種形式邻邮，一種是水平的滾動條，另一種是單品大圖的瀑布流吮螺。
- 水平滾動條中顯示食物小圖饶囚、單品名稱帕翻、價錢與喜歡按鈕。
- 瀑布流中顯示食物大圖萝风、食物分類嘀掸、餐廳地點(diǎn)、餐廳評價（愜意用餐環(huán)境帶來獨(dú)到體驗(yàn)）规惰、價錢（原價和現(xiàn)價）與喜歡按鈕睬塌。
『思考』
使用不同形式的單品推薦（橫向滾動、縱向滾動）可以讓頁面交互形式更佳多樣化歇万。
Banner采用縱向平鋪可以盡可能的展現(xiàn)所有信息揩晴，且當(dāng)banner數(shù)量較少（1-2張）的時候就不存在占用過多頁面空間現(xiàn)象。但當(dāng)數(shù)量過多（超過3張）贪磺，則會將頁面中下面的元素排擠出首屏硫兰，影響閱讀。
2.動效
滾動
當(dāng)頁面處于滾動狀態(tài)時寒锚，購物車平移出主界面劫映，但保留一些邊框。當(dāng)頁面恢復(fù)靜止刹前，購物車圖標(biāo)又回到界面左下角泳赋。
『作用』盡量減少對頁面主體內(nèi)容的干擾，但又可以及時在主界面中快速查看自己的購物車內(nèi)容喇喉。
刷新頁面
下拉刷新動畫分為兩個步驟祖今，一個是頁面加載動畫，另一個是購物車移出界面動畫拣技。頁面加載過程中千诬，動畫跟隨用戶下拉動作產(chǎn)生變化，當(dāng)頁面到達(dá)下拉位置膏斤，用戶釋放后大渤，動畫保持形狀不變，形狀內(nèi)部發(fā)生變化掸绞，告知用戶正在刷新。刷新完成耕捞，動畫上移消失衔掸。
**
