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