淘寶 UED：從設計的角度，揭秘「一千零一夜」的誕生和后續動作
相傳古代印度與中國之間有一薩桑國，國王山魯亞爾生性殘暴嫉妒，因王后行為不端，將其殺死，此后每日娶一少女，翌日晨即殺掉，以示報復。宰相的女兒山魯佐德為拯救無辜的女子，自愿嫁給國王，用講述故事方法吸引國王，每夜講到最精彩處，天剛好亮了，使國王愛不忍殺，允她下一夜繼續講。是為，一千零一夜的故事...
來源：AlibabaGroupUED（微信號：AlibabaGroupUED）
原標題：一千零一夜的前一夜
01、浪的開始
“我們要做一個內容化欄目，會有視頻和文章，欄目入口暫時定在首頁下拉里，可能每晚會更新一期。”
“欄目名稱? 就先叫《深夜食堂》吧。”
由于項目從開始到完成設計的階段，一直沒有產品經理，對接的是三個思維活躍、天馬行空、追求細節的市場部同學，所以以上信息也是到產品上線為止，得到的所有需求文檔。
當然，這也注定是一個UED可以‘浪起來’的開始…
02、骨架
每晚都可能會更新，但每次只更新一篇內容，設計時聯想到的第一個東西是‘日歷’——隨著時間的變化每天都會有新的一頁，而每一頁的內容都只關注在今天，沒有其他多余的內容。然后，這也變成了此次設計的目標：盡量通過內容和產品形態本身傳達功能及產品特質，減少不必要的元素和信息，讓用戶多關注內容，少感知界面。（雖然，此后經歷過無數次痛苦的‘節操不保’）
至于，后來又是怎么從‘日歷’抽象到‘卡片’，和使用‘卡片’作為內容承載容器的，我絞盡腦汁的歸結為：看心情，以及：
因為欄目的進入方式是下拉，因而在欄目一級承接頁，上下滾動操作在用戶心里已經一定程度上和欄目的開啟關閉關聯。而當內容被不同的卡片承載時，傳統的框架和頁面結構便可以被打破和重構，橫向滾動也就變得自然而不突兀。
每天需要透出的信息類型多樣（圖片、標題、簡介、數據），而當這些內容用同一張卡片包裝時，用戶會自動對信息進行過濾分組，瀏覽效率會比傳統的列表方式更高，也更利于更新頻率不高的內容展示。
我們希望保證不同屏幕大小或不同設備終端的用戶對欄目的認知體驗一致，而卡片在保持形式統一和內容規整的平衡性上比普通列表更好。
立體感和擬真性。卡片可以被堆疊、滑動、縮放、翻轉，在視覺深度和操作維度上都進行了擴展，也能保證卡片放大進入視頻詳情界面過渡的合理性。
03、豎著看片
“為啥是豎版的視頻？”
答案1: 最后視頻定成豎屏的形式，其實是為了滿足廣大男性同胞，單手持機看片的需求，完。
答案2: 因為這次的項目更多是設計先行，再產出內容，所以一定程度上也有了更多空間和可控范圍。目前大部分非直播性質的流媒體應用，在播放視頻時都需要用戶翻轉手機；或者先展示一個迷你播放界面，再讓用戶主動切到橫向全屏模式。那我們就多做一點，一次點擊，全屏體驗，無需翻轉，單手持機，持久看片，以及豎版視頻比較酷。至于為什么視頻播放過程中，不允許用戶快進快退拖動進度，除了希望用戶能尊重市場部同學內容制作的辛勞成果和對內容的自信之外，還有就是為了盡可能減少不必要的操作，凸顯內容，有效的限制在某些場景下比無限的開放更合適。
04、殺馬特的轉型
早期開始做設計的時候，沉迷于各種酷炫華麗的動效，然后在設計方案中穿插塞滿了各種效果，結果往往都是華而不實，江湖人稱“設計界的殺馬特”。
現在我認為優秀的動效，是那種你不會一開始就注意到，但當你發現時能會心一笑的方式。它的存在應該是輔助和加深設計或內容表達，而非無意義的疊加。
列表頁卡片背景的緩動，是為了增加一點夜間版欄目的動感，也在一定程度上和視頻內容本身做呼應；卡片點擊放大進入詳情，是為了保持內容層級結構上的連續；視頻播放結束，底部詳情卡片上浮滑出，是想通過模塊運動的流向，引導用戶往下滾動瀏覽。
聽起來是在自圓其說，但我們試過移除這些之后的效果，那會是另一番景象...
05、「拉」還是「不拉」
由于系統級的交互灌輸（尤其是iOS用戶），下拉手勢對于用戶來說，一定程度上已經和‘刷新’功能綁定。而下拉手勢又是非常主動的用戶行為，在用戶原本有其他結果認知的基礎上，再疊加一個層結果，而且這兩個結果之間又沒有遞進關系，其實非常冒險。（比如：有的郵箱App，左滑一半是已讀，繼續左滑則是刪除，功能之間存在遞進關系）在嘗試和對比過幾種滑動距離后，我們最后的方案是：首先，欄目的開啟不能影響用戶的主動刷新行為，用戶主動刷新行為基于兩個參考維度，下拉距離和下拉速度。當用戶下拉距離很短時，不進入欄目頁；當用戶下拉速度很快，即使拉動距離超過臨界值，也同樣保證是刷新功能。而為了讓主動下拉的用戶感知到存在第二級操作，我們在釋放刷新的區域，透出了部分欄目的引導信息，并保證所有單手操作用戶在有效的屏幕滑動距離內能完成二級滑動。
在你手指觸動屏幕的那一刻，希望我們給的，是你想要的...
06、被遺棄的孩子
基礎的界面設計其實在二月份就已經完成并確認，但這個過程中一直有一個直到上線前一天還在搖擺不定的功能，“互動”。
產品最初的策略是希望在視頻的播放過程中，增加一個互動功能，讓用戶形成參與感，并且希望用戶的互動能形成持續的正反饋，繼續刺激用戶參與，形成完整的交互閉環。我們也嘗試設計了數版方案，從最簡單的點贊互動，到用戶心電圖，再到細到每幀的實時截圖反饋...從某個方面來講，可以說是設計沒有產出一個足夠有趣的和產品無縫結合的互動方案；從另一角度看，我們在設計過程中發現短視頻和直播類視頻應用存在很大差別，讓用戶在一個4分鐘左右的視頻播放過程中，同時參與互動反而會讓內容的瀏覽體驗變得復雜厚重。此外，因為視頻不具有實時性，很難保證用戶在觀看過程中與其他用戶的互動感受。
所以，上線的前一天，我們放棄了這個難產的"孩子"…
07、辛德勒名單
不論怎么把自己的設計方案吹噓的有多牛、多完整、多好看，設計稿完成只是其中的一環，最終上線的產品才是真正的作品。所以最后大家在線上看到了制作精良的視頻，但確有一個bug不少、體驗卡頓的界面，我們會在后續版本中優化修正，以下未上線的內容名單：
場景化引導，將下拉進入一千零一夜欄目和用戶的操作行為結合，而非現在生硬的通過變換文字、浮層等方式完成。
更順暢的動效和過渡，目前版本列表頁的卡片滾動、放大，到詳情頁的內容滾動參數都會再重新優化
閱讀體驗，詳情頁內容區排版和過多的內容類型分割導致的瀏覽問題
更符合用戶場景的功能展示邏輯和呈現方式，包括：我要吃、評論、分享的入口展示
所有異常、內容占位等特殊界面的補充兼容
…
下一夜的故事
今晚十點 淘寶二樓 見
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）