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

設計語言

新的版本著重點在于沉浸式設計，意在讓用戶能夠更加沉浸于內容本身，在給予用戶使用流暢感和視覺美觀感的同時，有效提高用戶對于視頻內容的關注。

背景分析

1.用戶人群分析

90后人群，年輕有活力，享受生活，除了注重性價比、品質之外，更加注重顏值，強調好玩、好看，審美上喜歡簡潔、有設計感，又有趣的東西。

往往忠誠度較低，強調個性，喜歡張揚個性又能沉下心來，矛盾感強，需要更加新穎獨特又符合當前潮流的風格抓住用戶群體。

2.使用場景分析

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

界面設計（UI）

1.界面模塊（卡片式設計）

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

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

而卡片式設計能夠成為流行趨勢的一個最重要的原因就是——卡片式設計能夠完美利用手機屏幕的空間，不但界面清爽，內容也一目了然。在大多數的交互場景下，卡片式設計與移動應用程序簡直是絕配。而矩形的設計也能夠完美體現出UI設計的簡潔美。

2.界面細節

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

了解光線的物理性質：設計師應仔細考慮如何使用陰影和漸變，使元素看起來更加真實。這對于卡片式設計而言是非常重要的，因為它涉及到了卡片的“真實感”。如果陰影投在各個角落邊上的話，這種卡片式的體驗可能就會被破壞掉。

確保UI在黑白兩色下能夠正常使用：設計的第一步就是要拋棄顏色。這將能夠讓你明確地把設計重點放在實用性和內容上。根據Kennedy的說法，設計師應該在設計的最后一步再添加顏色，顏色對UI設計只是起到點綴的作用。

不要吝嗇使用留白：請先給你的卡片一些空白的空間，之后再去慢慢縮減這部分空白。正如我們在“網頁設計中留白的禪學”中所描述的那樣，“負空間”是幫助你“組織和分離各種必要與不必要元素”的良師益友。

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

知道如何創建與排版對比：無論是猶豫用大卡片還是小卡片，或是糾結用更多的文字還是更少的文字進行組合，其實最重要的是要把這些元素有機的配合起來，達到吸引用戶注意這一最終目標。其實，在卡片式設計上簡單的排版往往效果最好。通過給卡片加以美化潤色，來使得用戶對卡片更加熟悉，而且這種方式也并不失創意。例如，把陰影元素加進卡片中的話就會使用戶感到更加親切自然。

配色：所謂配色，簡而言之是將適當的顏色放在適當的位置，做出最佳安排。色彩是通過人的印象或者聯想來產生習理上的影響，而配色的作用就是通過改變空間的舒適程度和環境氣氛來滿足用戶的各方面的要求。因此配色的重要性不言而喻。

在6.0/6.1的配色方案上，由于是版本的優化，因此在主視覺色彩上依然秉承了樂視整體VI體系的紅色。那么問題來了，原有的紅色由于是集團VI，所以色感偏沉穩，而我們現在的目標用戶是相對年輕的群體，因此我們在原有紅色色值的基礎上進行了微調，在RGB的調整中提高了明黃的成份，讓原有偏暗的紅色用非物理的手法提高明度，從而使整體顯得更加年輕、有活力，同時增加了用戶對紅色感知的更多可能性。

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

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

總結-

總是有一些剛入行的同學問我，我色感不行，我真不知道這個應該怎么做！其實，做好一個款app的設計并不難。設計并不是純粹的感官思維，相反設計更佳偏向于理性的傳達感性思維！

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

這次樂視視頻的整體視覺體驗提升，除了設計師的基本修養（色彩、圖像、行業動向等），其實，更重要的，還有和產品運營等多個環節的充分溝通。

做為已經較成熟的一款視頻應用的設計師，我們更要懂用戶、懂產品、懂運營，要對工作的上下游環節熟悉。

要知道，設計遠遠不止視覺設計那么簡單，每一次設計都是對一個行業的知識整合與管理，而設計師也應該在每一次項目完成后進行必要的復盤。因為設計師之間的差距其實更多的就是每個人閱歷與履歷之間的差距。 只有親身經歷過才能將更好的作品呈現給大家。

最后，請記住，視覺設計遠不止好看這么簡單。

作者：DavRann，來自樂視用戶體驗中心（LeUX）。這是一個專注設計、交互、用戶研究的交流平臺，探索互聯網最前沿UX案例，從實戰出發解讀行業趨勢。微信ID：LetvUX

本文由@DavRann 原創發布于人人都是產品經理?，未經許可，禁止轉載。