作為視覺(jué)設(shè)計(jì)師來(lái)說(shuō)，能設(shè)計(jì)出一款賞心悅目、走在設(shè)計(jì)潮流前線而又有自己品牌設(shè)計(jì)基因的產(chǎn)品是每個(gè)人心目中的追求。如果提到當(dāng)今移動(dòng)產(chǎn)品UI設(shè)計(jì)風(fēng)格趨勢(shì)時(shí)，相信不少設(shè)計(jì)師心目中的答案是扁平化設(shè)計(jì)。無(wú)可否認(rèn)，在2013年扁平化設(shè)計(jì)風(fēng)格全面普及以來(lái)至今，扁平化依舊是移動(dòng)產(chǎn)品設(shè)計(jì)的主流方向，但眾多產(chǎn)品使用扁平化設(shè)計(jì)的同時(shí)會(huì)使得產(chǎn)品之間的視覺(jué)差異越來(lái)越小，設(shè)計(jì)師如何把自己的產(chǎn)品設(shè)計(jì)做得與眾不同，讓自己產(chǎn)品于同類競(jìng)品中脫穎而出就變得尤為關(guān)鍵，這要求設(shè)計(jì)師時(shí)刻要保持設(shè)計(jì)上的創(chuàng)新，而創(chuàng)新的基礎(chǔ)則是要先正確了解好當(dāng)前行業(yè)內(nèi)設(shè)計(jì)的主流趨勢(shì)。

本文結(jié)合自己的工作經(jīng)驗(yàn)簡(jiǎn)單分享下當(dāng)前移動(dòng)產(chǎn)品扁平化視覺(jué)的一些趨勢(shì)，主要由“質(zhì)感、色彩、文字、圖標(biāo)、內(nèi)容展示、動(dòng)效、手勢(shì)、品牌應(yīng)用”幾點(diǎn)分析，如果有說(shuō)得不正確的地方歡迎大家指正，也希望對(duì)扁平化設(shè)計(jì)有興趣的同學(xué)私底下與我多多交流，大家相互學(xué)習(xí).

質(zhì)感

1，極致扁平：

趨向使用更輕量、簡(jiǎn)潔的方式設(shè)計(jì)界面，去除所有質(zhì)感，追求極致扁平設(shè)計(jì)是當(dāng)下一個(gè)設(shè)計(jì)潮流，界面內(nèi)只關(guān)注核心內(nèi)容，拋開(kāi)任何無(wú)關(guān)的設(shè)計(jì)元素，排除了視覺(jué)干擾，同時(shí)也使界面風(fēng)格變得更加現(xiàn)代、優(yōu)雅，工具及內(nèi)容展示類產(chǎn)品特別適合于此種風(fēng)格。

2，弱質(zhì)感:

過(guò)度扁平的設(shè)計(jì)對(duì)于內(nèi)容比較復(fù)雜的產(chǎn)品來(lái)說(shuō)并不利于視覺(jué)層級(jí)的表現(xiàn)，所以現(xiàn)在很多產(chǎn)品的視覺(jué)設(shè)計(jì)融入了輕微質(zhì)感元素，既豐富了細(xì)節(jié)，同時(shí)也使內(nèi)容層級(jí)更加清晰直觀。

色彩

配色以簡(jiǎn)潔為主，界面中的顏色比例對(duì)比之前更加精簡(jiǎn)，更傾向于用更少的顏色進(jìn)行設(shè)計(jì)，充分利用顏色對(duì)比度去突出重要的內(nèi)容信息，提高視覺(jué)沖擊力并強(qiáng)調(diào)產(chǎn)品關(guān)鍵功能，同時(shí)也可以為產(chǎn)品體驗(yàn)營(yíng)造氛圍，提升產(chǎn)品的品牌辨識(shí)度。

文字

文字信息作為內(nèi)容的重要載體之一，一直是偏平化設(shè)計(jì)排版的重要環(huán)節(jié)?，F(xiàn)在更多產(chǎn)品的文字設(shè)計(jì)更加趨向于使用單一字體，通過(guò)字體自身樣式（加粗、中等、細(xì)體、斜體）去劃分內(nèi)容層次，有助于優(yōu)化瀏覽體驗(yàn)，打造更加簡(jiǎn)潔、優(yōu)雅的界面，增強(qiáng)產(chǎn)品的品牌屬性。

偏向選用無(wú)襯線字體設(shè)計(jì)，字體線條清晰、筆觸統(tǒng)一，避免過(guò)多的裝飾性細(xì)節(jié)。IOS9專門針對(duì)中文字體做了設(shè)計(jì)調(diào)整，使用新的“蘋(píng)方”字體，字體形態(tài)更粗，邊角更圓潤(rùn)。

圖標(biāo)

圖標(biāo)是產(chǎn)品功能的重要標(biāo)識(shí)，同時(shí)也是塑造產(chǎn)品品牌設(shè)計(jì)風(fēng)格的核心基因之一。圖標(biāo)設(shè)計(jì)必須注重好辨識(shí)度與創(chuàng)意的平衡，太抽象的圖標(biāo)影響用戶認(rèn)知，不利于操作，太普通的圖標(biāo)則比較中規(guī)中距，視覺(jué)上沒(méi)有亮點(diǎn)。扁平化的圖標(biāo)主要以“線、面”兩個(gè)基礎(chǔ)元素不斷地進(jìn)行多種組合表現(xiàn)，不同的組合能產(chǎn)生不同的質(zhì)感風(fēng)格，在視覺(jué)呈現(xiàn)上具有一定的差異化。

1，純線條形式：

線條式圖標(biāo)在當(dāng)今設(shè)計(jì)中被廣泛應(yīng)用，線條的提煉對(duì)于以前越來(lái)越精簡(jiǎn)，同時(shí)更注重細(xì)節(jié)呈現(xiàn)

2，“線+面”組合形式：

通過(guò)線與面的搭配，讓圖標(biāo)在保持扁平風(fēng)格基礎(chǔ)的同時(shí)融入擬物化元素，貼近實(shí)際，豐富細(xì)節(jié)。

3，剪影形式：

現(xiàn)代設(shè)計(jì)趨勢(shì)的剪影圖標(biāo)更加講求色彩的對(duì)比度，同時(shí)也可以通過(guò)對(duì)形體不同的面進(jìn)行拼色搭配達(dá)到擬物效果，讓圖標(biāo)與現(xiàn)實(shí)物件聯(lián)系起來(lái)，減少用戶認(rèn)知成本。

另外，圖標(biāo)設(shè)計(jì)上考慮觸發(fā)后的效果，可以加強(qiáng)情感化元素，給用戶帶來(lái)輕松愉悅的視覺(jué)感觀。

內(nèi)容展示

扁平化視覺(jué)設(shè)計(jì)的核心是追求純粹的內(nèi)容信息本質(zhì)， ?過(guò)往界面會(huì)使用線條分隔各種區(qū)域內(nèi)容，但是這樣的處理會(huì)顯得界面比較擁擠，同時(shí)整體信息排列也比較散亂，使用卡片的形式呈現(xiàn)內(nèi)容，并通過(guò)適當(dāng)?shù)牧舭组g隔，可以減少線條等元素對(duì)內(nèi)容造成的視覺(jué)干擾，可以創(chuàng)造出更干凈、清晰的界面，讓用戶更專注于內(nèi)容，提高了易用性。

融入一些平面排版元素（如雜志版式），可讓界面更加高端、文藝

動(dòng)效

在產(chǎn)品使用過(guò)程中，操作動(dòng)效通過(guò)視覺(jué)上的反饋可以把用戶的注意力吸引到特定區(qū)域，減少用戶對(duì)產(chǎn)品的思考，促進(jìn)了任務(wù)參與。此外，產(chǎn)品動(dòng)效在情感上可取悅用戶，讓用戶在操作過(guò)程中感到驚喜，有利于塑造品牌設(shè)計(jì)基因

流行的動(dòng)效設(shè)計(jì)是以交互思想作為核心準(zhǔn)則去設(shè)計(jì)，以“輕”為主，視覺(jué)呈現(xiàn)上要把握好合適的度，不能太刻意地隨意添加，因?yàn)槎喽鴱?fù)雜的動(dòng)效既影響了性能，也使操作過(guò)程變得更為復(fù)雜，極大降低了效率。一般來(lái)說(shuō)，動(dòng)效設(shè)計(jì)比較適合于用在產(chǎn)品核心功能操作、切換、使用反饋上，也可以用在產(chǎn)品特性介紹上。

1，操作反饋的動(dòng)效設(shè)計(jì)，讓產(chǎn)品的使用體驗(yàn)更加輕松愉悅，促進(jìn)了用戶的參與度，并且交互層次更“輕”

2，案例中啟動(dòng)頁(yè)通過(guò)動(dòng)效的使用，讓用戶在等待過(guò)程中不再枯燥，同時(shí)也體現(xiàn)了品牌設(shè)計(jì)基因。

手勢(shì)

隨著IOS、安卓智能手機(jī)的普及，用戶對(duì)手勢(shì)操作也有了一定的認(rèn)知，產(chǎn)品結(jié)合手勢(shì)運(yùn)用能大幅度提升效率，給用戶呈現(xiàn)更簡(jiǎn)潔、直觀的體驗(yàn)。

品牌應(yīng)用

品牌設(shè)計(jì)是個(gè)比較大的概念，色彩、版式、質(zhì)感等設(shè)計(jì)元素都可以是品牌設(shè)計(jì)中的一種。這里說(shuō)的品牌應(yīng)用是指在產(chǎn)品界面中應(yīng)用到的一些品牌延伸設(shè)計(jì)，比如依據(jù)品牌定制的圖形、動(dòng)效等等，這些設(shè)計(jì)元素可以讓用戶對(duì)產(chǎn)品品牌有更深刻的認(rèn)識(shí)，以達(dá)到品牌推廣目的。

總結(jié)：

了解設(shè)計(jì)趨勢(shì)對(duì)后面的視覺(jué)設(shè)計(jì)工作有重要幫助，它能讓設(shè)計(jì)師形成“審美標(biāo)準(zhǔn)”，讓具體的設(shè)計(jì)工作更加有效率，但設(shè)計(jì)趨勢(shì)畢竟是帶主觀的分析結(jié)果，具體的產(chǎn)品視覺(jué)呈現(xiàn)還要綜合產(chǎn)品需求定位、交互、市場(chǎng)運(yùn)營(yíng)等等因素，所以視覺(jué)設(shè)計(jì)師在設(shè)計(jì)中要學(xué)會(huì)靈活運(yùn)用，不能一味照搬，選取最符合自己產(chǎn)品的設(shè)計(jì)方法才能更好地包裝產(chǎn)品，突出品牌設(shè)計(jì)基因，并不斷地加以優(yōu)化去加深品牌設(shè)計(jì)對(duì)用戶的影響。

建議：

1，作為視覺(jué)設(shè)計(jì)師，除了工作之外應(yīng)該要多注重生活中的發(fā)現(xiàn)，要善于發(fā)現(xiàn)美。

2，當(dāng)看到一個(gè)很棒的設(shè)計(jì)效果，除了收藏之外，更應(yīng)該多想一下為什么。

3，工作之外視覺(jué)設(shè)計(jì)師應(yīng)該勤做設(shè)計(jì)嘗試，注重自我提升，不要依賴產(chǎn)品項(xiàng)目提升自己。

4，時(shí)刻了解設(shè)計(jì)行情與資訊，關(guān)注產(chǎn)品的最新動(dòng)態(tài)，設(shè)計(jì)不是閉門造車。

5，優(yōu)秀視覺(jué)設(shè)計(jì)師要有更好的發(fā)散思維，懂得針對(duì)當(dāng)前流行的設(shè)計(jì)手法加以優(yōu)化提煉，形成自己獨(dú)樹(shù)一幟的設(shè)計(jì)文化去引領(lǐng)潮流。

完，謝謝。

【本文作者】

劉戈，網(wǎng)易資深設(shè)計(jì)專家。2005年開(kāi)始從事網(wǎng)頁(yè)設(shè)計(jì)職務(wù)，2008年加入網(wǎng)易，先后完成了網(wǎng)易相冊(cè)、簡(jiǎn)約版郵箱、網(wǎng)易閃電郵、網(wǎng)易有錢、網(wǎng)易嚴(yán)選等重要項(xiàng)目的設(shè)計(jì)，積累了豐富的項(xiàng)目設(shè)計(jì)經(jīng)驗(yàn)，現(xiàn)為網(wǎng)易郵件事業(yè)部設(shè)計(jì)經(jīng)理、資深視覺(jué)設(shè)計(jì)專家，負(fù)責(zé)網(wǎng)易嚴(yán)選的產(chǎn)品三端（app\wap\web）與市場(chǎng)運(yùn)營(yíng)設(shè)計(jì)，力求為用戶打造更好的電商設(shè)計(jì)體驗(yàn)。

【小編打硬廣從不含糊】

劉戈老師領(lǐng)銜講授的網(wǎng)易云課堂高級(jí)UI設(shè)計(jì)師課程已經(jīng)上線啦！全網(wǎng)最詳盡深入的產(chǎn)品設(shè)計(jì)指導(dǎo)，實(shí)現(xiàn)更易用、更具美感和商業(yè)價(jià)值的設(shè)計(jì)。最高顏值的講師團(tuán)隊(duì)來(lái)啦！網(wǎng)易UEDC總監(jiān)結(jié)合多年的從業(yè)經(jīng)驗(yàn)，提供設(shè)計(jì)美學(xué)理論和方法論。課程將詳細(xì)介紹工具類、電商類、文藝類和工具類產(chǎn)品的設(shè)計(jì)思路與實(shí)踐，為目前市面上最詳盡的一線產(chǎn)品設(shè)計(jì)分析。詳情請(qǐng)戳課程鏈接 http://163.lu/SGr5p3

5.31前購(gòu)買課程還有早鳥(niǎo)價(jià)活動(dòng) 1398哈~還有UEDC內(nèi)刊贈(zèng)送 期不期待！驚不驚喜！