千萬級用戶的視頻體驗(yàn),我們是這么做的

如今app的更新迭代速度很快,因此無論在視覺審美還是交互功能上都有新的趨勢和風(fēng)格。樂視視頻原有的ui設(shè)計風(fēng)格已經(jīng)無法跟上目標(biāo)客戶群的審美變化,且在功能上較難滿足用戶預(yù)期,因此需要在整體視覺和產(chǎn)品功能上進(jìn)行相應(yīng)的美化和完善,使我們的視頻產(chǎn)品無論從視覺還是功能上都能夠在給予老用戶新鮮感的同時吸引更多的目標(biāo)用戶。
設(shè)計語言
新的版本著重點(diǎn)在于沉浸式設(shè)計,意在讓用戶能夠更加沉浸于內(nèi)容本身,在給予用戶使用流暢感和視覺美觀感的同時,有效提高用戶對于視頻內(nèi)容的關(guān)注。
背景分析
1.用戶人群分析
90后人群,年輕有活力,享受生活,除了注重性價比、品質(zhì)之外,更加注重顏值,強(qiáng)調(diào)好玩、好看,審美上喜歡簡潔、有設(shè)計感,又有趣的東西。
往往忠誠度較低,強(qiáng)調(diào)個性,喜歡張揚(yáng)個性又能沉下心來,矛盾感強(qiáng),需要更加新穎獨(dú)特又符合當(dāng)前潮流的風(fēng)格抓住用戶群體。
2.使用場景分析
不同場景下如在地鐵上觀看離線視頻,在家里連接Wi-Fi追劇等使用的APP,針對其特定因素做出的界面需在任何環(huán)境下都能充分展示其交互和功能。
界面設(shè)計(UI)
1.界面模塊(卡片式設(shè)計)
卡片式的布局能夠把信息、圖像、文本、按鈕、鏈接等一系列數(shù)據(jù)整合到各種矩形方塊中。這些模塊可以分層或移動,并都傾向于調(diào)整到全屏幕尺寸。如果你把它滑動到手機(jī)的一側(cè),它就會和其它的卡片堆疊在一起。
卡片能夠合理利用空間,清爽的列出全部信息。樂視是視頻公司里第一個倡導(dǎo)卡片設(shè)計的,從2012年的樂視PC改版,到TV端、移動端的升級,都完美符合“2015年和2016年手機(jī)設(shè)計流行趨勢”——最好的設(shè)計思路是把每個卡片作為一個獨(dú)立整體來設(shè)計。
而卡片式設(shè)計能夠成為流行趨勢的一個最重要的原因就是——卡片式設(shè)計能夠完美利用手機(jī)屏幕的空間,不但界面清爽,內(nèi)容也一目了然。在大多數(shù)的交互場景下,卡片式設(shè)計與移動應(yīng)用程序簡直是絕配。而矩形的設(shè)計也能夠完美體現(xiàn)出UI設(shè)計的簡潔美。
2.界面細(xì)節(jié)
UX設(shè)計師Erik D. Kennedy寫了一篇非常棒的文章(一共分為兩部),這篇文章打破了許多傳統(tǒng)的設(shè)計觀念。以下是我們認(rèn)為在這篇文章中最適用于卡片式設(shè)計的幾條規(guī)則:
了解光線的物理性質(zhì):設(shè)計師應(yīng)仔細(xì)考慮如何使用陰影和漸變,使元素看起來更加真實(shí)。這對于卡片式設(shè)計而言是非常重要的,因?yàn)樗婕暗搅丝ㄆ摹罢鎸?shí)感”。如果陰影投在各個角落邊上的話,這種卡片式的體驗(yàn)可能就會被破壞掉。
確保UI在黑白兩色下能夠正常使用:設(shè)計的第一步就是要拋棄顏色。這將能夠讓你明確地把設(shè)計重點(diǎn)放在實(shí)用性和內(nèi)容上。根據(jù)Kennedy的說法,設(shè)計師應(yīng)該在設(shè)計的最后一步再添加顏色,顏色對UI設(shè)計只是起到點(diǎn)綴的作用。
不要吝嗇使用留白:請先給你的卡片一些空白的空間,之后再去慢慢縮減這部分空白。正如我們在“網(wǎng)頁設(shè)計中留白的禪學(xué)”中所描述的那樣,“負(fù)空間”是幫助你“組織和分離各種必要與不必要元素”的良師益友。
掌握分層文字的藝術(shù):這可能并不是那么容易掌握的。一定要使用一個明確的、清晰的圖像作為背景。為了確保文本看起來效果更好一些,你可以使用一個黑暗的色調(diào)來進(jìn)行疊加——把文字放進(jìn)一個“盒子”里,或者是嘗試虛化背景圖。
知道如何創(chuàng)建與排版對比:無論是猶豫用大卡片還是小卡片,或是糾結(jié)用更多的文字還是更少的文字進(jìn)行組合,其實(shí)最重要的是要把這些元素有機(jī)的配合起來,達(dá)到吸引用戶注意這一最終目標(biāo)。其實(shí),在卡片式設(shè)計上簡單的排版往往效果最好。通過給卡片加以美化潤色,來使得用戶對卡片更加熟悉,而且這種方式也并不失創(chuàng)意。例如,把陰影元素加進(jìn)卡片中的話就會使用戶感到更加親切自然。
配色:所謂配色,簡而言之是將適當(dāng)?shù)念伾旁谶m當(dāng)?shù)奈恢?,做出最佳安排。色彩是通過人的印象或者聯(lián)想來產(chǎn)生習(xí)理上的影響,而配色的作用就是通過改變空間的舒適程度和環(huán)境氣氛來滿足用戶的各方面的要求。因此配色的重要性不言而喻。
在6.0/6.1的配色方案上,由于是版本的優(yōu)化,因此在主視覺色彩上依然秉承了樂視整體VI體系的紅色。那么問題來了,原有的紅色由于是集團(tuán)VI,所以色感偏沉穩(wěn),而我們現(xiàn)在的目標(biāo)用戶是相對年輕的群體,因此我們在原有紅色色值的基礎(chǔ)上進(jìn)行了微調(diào),在RGB的調(diào)整中提高了明黃的成份,讓原有偏暗的紅色用非物理的手法提高明度,從而使整體顯得更加年輕、有活力,同時增加了用戶對紅色感知的更多可能性。
輔助色選用了藍(lán)灰色(#5895ED),作為冷色調(diào)的藍(lán)色能夠給人冷靜、平和等外在感知,從而附加上科技、專業(yè)等內(nèi)在聯(lián)想。用灰色降低藍(lán)色的明度能夠使色調(diào)更加的沉穩(wěn)、大氣,突出專業(yè)的感覺。另一方面,它又能和另一輔助色——橙色在色相上形成對比,從而使整體的色彩搭配極具沖擊力和視覺張力。同時,藍(lán)灰色與主色調(diào)紅色可以形成很好的搭配,從而給人年輕、青春活力同時又與叛逆碰撞的豐富聯(lián)想。
另一輔助色橙色(#EC8E1F)的選用除了上述所說的形成對比色之外,其無論在白色或黑色的底色上都能夠清楚顯示。這樣即保證了色彩上的傳承和一致性,又能夠在視覺上有亮點(diǎn)。
總結(jié)-
總是有一些剛?cè)胄械耐瑢W(xué)問我,我色感不行,我真不知道這個應(yīng)該怎么做!其實(shí),做好一個款app的設(shè)計并不難。設(shè)計并不是純粹的感官思維,相反設(shè)計更佳偏向于理性的傳達(dá)感性思維!
引用新像素設(shè)計的話,設(shè)計師和理發(fā)師其實(shí)有點(diǎn)像,理發(fā)師基本分為三種:一種是只會搞基礎(chǔ)發(fā)型的,比如寸頭、中規(guī)中矩的長發(fā)、老太太卷頭等;一種是只會剪流行發(fā)型的(這種發(fā)型師還很容易 搖身一變成為造型大師,告訴你你應(yīng)該改變,應(yīng)該剪目前最流行的某款發(fā)型,但實(shí)際上可能是他只擅長這款發(fā)型);還有一種是最可遇不可求的,他根據(jù)你的臉型、 性格等,用最簡單的手法量身設(shè)計發(fā)型,讓顧客的氣質(zhì)度立刻得到提升。
這次樂視視頻的整體視覺體驗(yàn)提升,除了設(shè)計師的基本修養(yǎng)(色彩、圖像、行業(yè)動向等),其實(shí),更重要的,還有和產(chǎn)品運(yùn)營等多個環(huán)節(jié)的充分溝通。
做為已經(jīng)較成熟的一款視頻應(yīng)用的設(shè)計師,我們更要懂用戶、懂產(chǎn)品、懂運(yùn)營,要對工作的上下游環(huán)節(jié)熟悉。
要知道,設(shè)計遠(yuǎn)遠(yuǎn)不止視覺設(shè)計那么簡單,每一次設(shè)計都是對一個行業(yè)的知識整合與管理,而設(shè)計師也應(yīng)該在每一次項(xiàng)目完成后進(jìn)行必要的復(fù)盤。因?yàn)樵O(shè)計師之間的差距其實(shí)更多的就是每個人閱歷與履歷之間的差距。 只有親身經(jīng)歷過才能將更好的作品呈現(xiàn)給大家。
最后,請記住,視覺設(shè)計遠(yuǎn)不止好看這么簡單。
作者:DavRann,來自樂視用戶體驗(yàn)中心(LeUX)。這是一個專注設(shè)計、交互、用戶研究的交流平臺,探索互聯(lián)網(wǎng)最前沿UX案例,從實(shí)戰(zhàn)出發(fā)解讀行業(yè)趨勢。微信ID:LetvUX
本文由@DavRann 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?,未經(jīng)許可,禁止轉(zhuǎn)載。
- 目前還沒評論,等你發(fā)揮!