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