靜電說：又到了APP案例復盤欄目的時間了，今天我們?yōu)榇蠹医馕龅氖翘云逼边@款應用。這是一款可以查看影訊，買電影票和演出票的應用。雖然疫情沖擊導致電影行業(yè)普遍低迷，但是淘票票這款應用卻通過自己的不斷改善來滿足用戶在不同環(huán)境和使用場景下的需求。

我們主要通過產品，交互，設計三個層面來為大家解析。

001.首頁

淘票票的首頁內容非常多，但并不顯得凌亂。頭部黃+粉色的漸變背景，可以讓設計更加活躍，避免大白板背景帶來的無趣感。繼續(xù)往下，淘票票的2級tab內容非常多，在單純“購票”行為低迷的大環(huán)境下，轉型為內容型的設計更符合當前的需求。輪播圖區(qū)域則更矮，騰出更多的空間來展示下方內容。而影視互動區(qū)域則是淘票票的創(chuàng)新，已經保留了非常長的時間。通過動態(tài)影片與下方熱門電影的疊加展示，吸引用戶來產生購票欲望。菜單方面，我們則主要觀察設計師是如何設置欄目的，依據(jù)當前應用的重心來設計菜單，會員欄目占據(jù)了非常重要的位置，說明產品目前的經營重點。

002.二級菜單欄目

對于2級Tab菜單，設計師采用不同的顏色來表達不同風格和功能的頁面，另外需要注意上方榜單欄目的做法，一般采用較重的顏色卡片，然后對于title和下方榜單進行分區(qū)處理。

在下面的這個頁面中，如果你想把卡片做出一點與眾不同的效果，或者想凸顯它，最好的方式就是加上一點背景和漸變效果，還有紋理。而很多同學對卡片模式下的列表標題不太會處理，在這里大家可以選擇將標題放在卡片區(qū)域外，并加大加粗文字的方式處理。

003.VIP會員頁

淘票票將會員欄目入口放在了菜單的中間，可見這個模塊對于產品的重要程度。而頁面內部，遵循VIP頁面設計的規(guī)則，用戶名和用戶頭像，以及積分放在了最顯著的位置上。而升級會員模塊則排在了緊隨其下的位置，激勵用戶升級成為會員，并給出了明確的進度提示。會員特權則在下方，并突顯表達，因為這是用戶最關注的內容，不能沒有。下方的運營廣告和積分兌換則是活躍用戶的重要手段。

設計上，在頭部，黃+橙+紫色的漸變模式背景可以有效的突出卡片內容。而下方的兩個卡片，內部也采用邊框，背景色等方式來凸顯各自的內容。“會員特權”模塊，Title的另一種表現(xiàn)形式，異型圖形加居中排列，讓會員特權模塊更明顯。

004.“我的”頁面

我的頁面是幾乎所有應用都具備的功能性頁面，必要的內容為：用戶頭像，用戶名，用戶成就，設置按鈕。還有常用工具的入口以及下方的推薦內容，這個頁面也是促進用戶進一步轉化的重要頁面，因此下方的內容推薦也一樣必不可少。

設計上，一般我的頁面會再次展示“VIP會員”的入口，將普通用戶轉化為VIP用戶。所以這個模塊會再次加強展示一遍，一般采用較重顏色的卡片形式。金剛區(qū)圖標和“我的服務”圖標，采用彩色圖標與線性圖標進行區(qū)分，可以有效的讓用戶區(qū)分重要程度。“我的觀影時光”模塊，漸變卡片與角標相結合的形式，凸顯模塊重要性。

005.影片詳情頁

在影片詳情頁中，淘票票同樣采用了視頻+圖片相結合的方式，并直接在頁面頭部采用播放宣傳片的方式來展示電影。另一塊值得我們學習的，就是“淘票票口碑”模塊，大卡片中使用細線設計強調了這個子模塊的歸屬性。


006.總結
淘票票這個應用中，最值得我們學習的內容就是卡片與模塊設計，不同的模塊采用不同的設計風格，線框，漸變色等等形式，設計師用靈活的展示方式強化了不同模塊之間的層次關系，且更具有視覺效果和可讀性。小伙伴們，大家學起來！

新一期UI全鏈路就業(yè)特訓課程開始報名啦

↓↓長按二維碼加靜電老師咨詢↓↓?