如今app的更新迭代速度很快，因此無(wú)論在視覺審美還是交互功能上都有新的趨勢(shì)和風(fēng)格。樂視視頻原有的ui設(shè)計(jì)風(fēng)格已經(jīng)無(wú)法跟上目標(biāo)客戶群的審美變化，且在功能上較難滿足用戶預(yù)期，因此需要在整體視覺和產(chǎn)品功能上進(jìn)行相應(yīng)的美化和完善，使我們的視頻產(chǎn)品無(wú)論從視覺還是功能上都能夠在給予老用戶新鮮感的同時(shí)吸引更多的目標(biāo)用戶。

設(shè)計(jì)語(yǔ)言

新的版本著重點(diǎn)在于沉浸式設(shè)計(jì)，意在讓用戶能夠更加沉浸于內(nèi)容本身，在給予用戶使用流暢感和視覺美觀感的同時(shí)，有效提高用戶對(duì)于視頻內(nèi)容的關(guān)注。

背景分析

1.用戶人群分析

90后人群，年輕有活力，享受生活，除了注重性價(jià)比、品質(zhì)之外，更加注重顏值，強(qiáng)調(diào)好玩、好看，審美上喜歡簡(jiǎn)潔、有設(shè)計(jì)感，又有趣的東西。

往往忠誠(chéng)度較低，強(qiáng)調(diào)個(gè)性，喜歡張揚(yáng)個(gè)性又能沉下心來(lái)，矛盾感強(qiáng)，需要更加新穎獨(dú)特又符合當(dāng)前潮流的風(fēng)格抓住用戶群體。

2.使用場(chǎng)景分析

不同場(chǎng)景下如在地鐵上觀看離線視頻，在家里連接Wi-Fi追劇等使用的APP，針對(duì)其特定因素做出的界面需在任何環(huán)境下都能充分展示其交互和功能。

界面設(shè)計(jì)（UI）

1.界面模塊（卡片式設(shè)計(jì)）

卡片式的布局能夠把信息、圖像、文本、按鈕、鏈接等一系列數(shù)據(jù)整合到各種矩形方塊中。這些模塊可以分層或移動(dòng)，并都傾向于調(diào)整到全屏幕尺寸。如果你把它滑動(dòng)到手機(jī)的一側(cè)，它就會(huì)和其它的卡片堆疊在一起。

卡片能夠合理利用空間，清爽的列出全部信息。樂視是視頻公司里第一個(gè)倡導(dǎo)卡片設(shè)計(jì)的，從2012年的樂視PC改版，到TV端、移動(dòng)端的升級(jí)，都完美符合“2015年和2016年手機(jī)設(shè)計(jì)流行趨勢(shì)”——最好的設(shè)計(jì)思路是把每個(gè)卡片作為一個(gè)獨(dú)立整體來(lái)設(shè)計(jì)。

而卡片式設(shè)計(jì)能夠成為流行趨勢(shì)的一個(gè)最重要的原因就是——卡片式設(shè)計(jì)能夠完美利用手機(jī)屏幕的空間，不但界面清爽，內(nèi)容也一目了然。在大多數(shù)的交互場(chǎng)景下，卡片式設(shè)計(jì)與移動(dòng)應(yīng)用程序簡(jiǎn)直是絕配。而矩形的設(shè)計(jì)也能夠完美體現(xiàn)出UI設(shè)計(jì)的簡(jiǎn)潔美。

2.界面細(xì)節(jié)

UX設(shè)計(jì)師Erik D. Kennedy寫了一篇非常棒的文章（一共分為兩部），這篇文章打破了許多傳統(tǒng)的設(shè)計(jì)觀念。以下是我們認(rèn)為在這篇文章中最適用于卡片式設(shè)計(jì)的幾條規(guī)則：

了解光線的物理性質(zhì)：設(shè)計(jì)師應(yīng)仔細(xì)考慮如何使用陰影和漸變，使元素看起來(lái)更加真實(shí)。這對(duì)于卡片式設(shè)計(jì)而言是非常重要的，因?yàn)樗婕暗搅丝ㄆ摹罢鎸?shí)感”。如果陰影投在各個(gè)角落邊上的話，這種卡片式的體驗(yàn)可能就會(huì)被破壞掉。

確保UI在黑白兩色下能夠正常使用：設(shè)計(jì)的第一步就是要拋棄顏色。這將能夠讓你明確地把設(shè)計(jì)重點(diǎn)放在實(shí)用性和內(nèi)容上。根據(jù)Kennedy的說(shuō)法，設(shè)計(jì)師應(yīng)該在設(shè)計(jì)的最后一步再添加顏色，顏色對(duì)UI設(shè)計(jì)只是起到點(diǎn)綴的作用。

不要吝嗇使用留白：請(qǐng)先給你的卡片一些空白的空間，之后再去慢慢縮減這部分空白。正如我們?cè)凇熬W(wǎng)頁(yè)設(shè)計(jì)中留白的禪學(xué)”中所描述的那樣，“負(fù)空間”是幫助你“組織和分離各種必要與不必要元素”的良師益友。

掌握分層文字的藝術(shù)：這可能并不是那么容易掌握的。一定要使用一個(gè)明確的、清晰的圖像作為背景。為了確保文本看起來(lái)效果更好一些，你可以使用一個(gè)黑暗的色調(diào)來(lái)進(jìn)行疊加——把文字放進(jìn)一個(gè)“盒子”里，或者是嘗試虛化背景圖。

知道如何創(chuàng)建與排版對(duì)比：無(wú)論是猶豫用大卡片還是小卡片，或是糾結(jié)用更多的文字還是更少的文字進(jìn)行組合，其實(shí)最重要的是要把這些元素有機(jī)的配合起來(lái)，達(dá)到吸引用戶注意這一最終目標(biāo)。其實(shí)，在卡片式設(shè)計(jì)上簡(jiǎn)單的排版往往效果最好。通過(guò)給卡片加以美化潤(rùn)色，來(lái)使得用戶對(duì)卡片更加熟悉，而且這種方式也并不失創(chuàng)意。例如，把陰影元素加進(jìn)卡片中的話就會(huì)使用戶感到更加親切自然。

配色：所謂配色，簡(jiǎn)而言之是將適當(dāng)?shù)念伾旁谶m當(dāng)?shù)奈恢茫龀鲎罴寻才?。色彩是通過(guò)人的印象或者聯(lián)想來(lái)產(chǎn)生習(xí)理上的影響，而配色的作用就是通過(guò)改變空間的舒適程度和環(huán)境氣氛來(lái)滿足用戶的各方面的要求。因此配色的重要性不言而喻。

在6.0/6.1的配色方案上，由于是版本的優(yōu)化，因此在主視覺色彩上依然秉承了樂視整體VI體系的紅色。那么問(wèn)題來(lái)了，原有的紅色由于是集團(tuán)VI，所以色感偏沉穩(wěn)，而我們現(xiàn)在的目標(biāo)用戶是相對(duì)年輕的群體，因此我們?cè)谠屑t色色值的基礎(chǔ)上進(jìn)行了微調(diào)，在RGB的調(diào)整中提高了明黃的成份，讓原有偏暗的紅色用非物理的手法提高明度，從而使整體顯得更加年輕、有活力，同時(shí)增加了用戶對(duì)紅色感知的更多可能性。

輔助色選用了藍(lán)灰色（#5895ED），作為冷色調(diào)的藍(lán)色能夠給人冷靜、平和等外在感知，從而附加上科技、專業(yè)等內(nèi)在聯(lián)想。用灰色降低藍(lán)色的明度能夠使色調(diào)更加的沉穩(wěn)、大氣，突出專業(yè)的感覺。另一方面，它又能和另一輔助色——橙色在色相上形成對(duì)比，從而使整體的色彩搭配極具沖擊力和視覺張力。同時(shí)，藍(lán)灰色與主色調(diào)紅色可以形成很好的搭配，從而給人年輕、青春活力同時(shí)又與叛逆碰撞的豐富聯(lián)想。

另一輔助色橙色（#EC8E1F）的選用除了上述所說(shuō)的形成對(duì)比色之外，其無(wú)論在白色或黑色的底色上都能夠清楚顯示。這樣即保證了色彩上的傳承和一致性，又能夠在視覺上有亮點(diǎn)。

總結(jié)-

總是有一些剛?cè)胄械耐瑢W(xué)問(wèn)我，我色感不行，我真不知道這個(gè)應(yīng)該怎么做！其實(shí)，做好一個(gè)款app的設(shè)計(jì)并不難。設(shè)計(jì)并不是純粹的感官思維，相反設(shè)計(jì)更佳偏向于理性的傳達(dá)感性思維！

引用新像素設(shè)計(jì)的話，設(shè)計(jì)師和理發(fā)師其實(shí)有點(diǎn)像，理發(fā)師基本分為三種：一種是只會(huì)搞基礎(chǔ)發(fā)型的，比如寸頭、中規(guī)中矩的長(zhǎng)發(fā)、老太太卷頭等；一種是只會(huì)剪流行發(fā)型的（這種發(fā)型師還很容易 搖身一變成為造型大師，告訴你你應(yīng)該改變，應(yīng)該剪目前最流行的某款發(fā)型，但實(shí)際上可能是他只擅長(zhǎng)這款發(fā)型）；還有一種是最可遇不可求的，他根據(jù)你的臉型、 性格等，用最簡(jiǎn)單的手法量身設(shè)計(jì)發(fā)型，讓顧客的氣質(zhì)度立刻得到提升。

這次樂視視頻的整體視覺體驗(yàn)提升，除了設(shè)計(jì)師的基本修養(yǎng)（色彩、圖像、行業(yè)動(dòng)向等），其實(shí)，更重要的，還有和產(chǎn)品運(yùn)營(yíng)等多個(gè)環(huán)節(jié)的充分溝通。

做為已經(jīng)較成熟的一款視頻應(yīng)用的設(shè)計(jì)師，我們更要懂用戶、懂產(chǎn)品、懂運(yùn)營(yíng)，要對(duì)工作的上下游環(huán)節(jié)熟悉。

要知道，設(shè)計(jì)遠(yuǎn)遠(yuǎn)不止視覺設(shè)計(jì)那么簡(jiǎn)單，每一次設(shè)計(jì)都是對(duì)一個(gè)行業(yè)的知識(shí)整合與管理，而設(shè)計(jì)師也應(yīng)該在每一次項(xiàng)目完成后進(jìn)行必要的復(fù)盤。因?yàn)樵O(shè)計(jì)師之間的差距其實(shí)更多的就是每個(gè)人閱歷與履歷之間的差距。 只有親身經(jīng)歷過(guò)才能將更好的作品呈現(xiàn)給大家。

最后，請(qǐng)記住，視覺設(shè)計(jì)遠(yuǎn)不止好看這么簡(jiǎn)單。

作者：DavRann，來(lái)自樂視用戶體驗(yàn)中心（LeUX）。這是一個(gè)專注設(shè)計(jì)、交互、用戶研究的交流平臺(tái)，探索互聯(lián)網(wǎng)最前沿UX案例，從實(shí)戰(zhàn)出發(fā)解讀行業(yè)趨勢(shì)。微信ID：LetvUX

本文由@DavRann 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。