【網(wǎng)易云課堂】關于扁平化視覺設計趨勢的一些小分享

作為視覺設計師來說鞭莽,能設計出一款賞心悅目坊秸、走在設計潮流前線而又有自己品牌設計基因的產品是每個人心目中的追求。如果提到當今移動產品UI設計風格趨勢時澎怒,相信不少設計師心目中的答案是扁平化設計褒搔。無可否認,在2013年扁平化設計風格全面普及以來至今喷面,扁平化依舊是移動產品設計的主流方向星瘾,但眾多產品使用扁平化設計的同時會使得產品之間的視覺差異越來越小,設計師如何把自己的產品設計做得與眾不同惧辈,讓自己產品于同類競品中脫穎而出就變得尤為關鍵琳状,這要求設計師時刻要保持設計上的創(chuàng)新,而創(chuàng)新的基礎則是要先正確了解好當前行業(yè)內設計的主流趨勢咬像。


本文結合自己的工作經驗簡單分享下當前移動產品扁平化視覺的一些趨勢算撮,主要由“質感、色彩县昂、文字肮柜、圖標、內容展示倒彰、動效审洞、手勢、品牌應用”幾點分析待讳,如果有說得不正確的地方歡迎大家指正芒澜,也希望對扁平化設計有興趣的同學私底下與我多多交流,大家相互學習.

質感

1创淡,極致扁平:

趨向使用更輕量痴晦、簡潔的方式設計界面,去除所有質感琳彩,追求極致扁平設計是當下一個設計潮流誊酌,界面內只關注核心內容,拋開任何無關的設計元素露乏,排除了視覺干擾碧浊,同時也使界面風格變得更加現(xiàn)代、優(yōu)雅瘟仿,工具及內容展示類產品特別適合于此種風格箱锐。


2,弱質感:

過度扁平的設計對于內容比較復雜的產品來說并不利于視覺層級的表現(xiàn)劳较,所以現(xiàn)在很多產品的視覺設計融入了輕微質感元素驹止,既豐富了細節(jié)浩聋,同時也使內容層級更加清晰直觀。

色彩

配色以簡潔為主幢哨,界面中的顏色比例對比之前更加精簡赡勘,更傾向于用更少的顏色進行設計嫂便,充分利用顏色對比度去突出重要的內容信息捞镰,提高視覺沖擊力并強調產品關鍵功能,同時也可以為產品體驗營造氛圍毙替,提升產品的品牌辨識度岸售。

文字

文字信息作為內容的重要載體之一,一直是偏平化設計排版的重要環(huán)節(jié)〕Щ現(xiàn)在更多產品的文字設計更加趨向于使用單一字體凸丸,通過字體自身樣式(加粗、中等袱院、細體屎慢、斜體)去劃分內容層次,有助于優(yōu)化瀏覽體驗忽洛,打造更加簡潔腻惠、優(yōu)雅的界面,增強產品的品牌屬性欲虚。

偏向選用無襯線字體設計集灌,字體線條清晰、筆觸統(tǒng)一复哆,避免過多的裝飾性細節(jié)欣喧。IOS9專門針對中文字體做了設計調整,使用新的“蘋方”字體梯找,字體形態(tài)更粗唆阿,邊角更圓潤。

圖標

圖標是產品功能的重要標識锈锤,同時也是塑造產品品牌設計風格的核心基因之一驯鳖。圖標設計必須注重好辨識度與創(chuàng)意的平衡,太抽象的圖標影響用戶認知牙咏,不利于操作臼隔,太普通的圖標則比較中規(guī)中距,視覺上沒有亮點妄壶。扁平化的圖標主要以“線摔握、面”兩個基礎元素不斷地進行多種組合表現(xiàn),不同的組合能產生不同的質感風格丁寄,在視覺呈現(xiàn)上具有一定的差異化氨淌。

1泊愧,純線條形式:

線條式圖標在當今設計中被廣泛應用,線條的提煉對于以前越來越精簡盛正,同時更注重細節(jié)呈現(xiàn)

2删咱,“線+面”組合形式:

通過線與面的搭配,讓圖標在保持扁平風格基礎的同時融入擬物化元素豪筝,貼近實際痰滋,豐富細節(jié)

3续崖,剪影形式:

現(xiàn)代設計趨勢的剪影圖標更加講求色彩的對比度敲街,同時也可以通過對形體不同的面進行拼色搭配達到擬物效果,讓圖標與現(xiàn)實物件聯(lián)系起來严望,減少用戶認知成本多艇。


另外,圖標設計上考慮觸發(fā)后的效果像吻,可以加強情感化元素峻黍,給用戶帶來輕松愉悅的視覺感觀。

內容展示

扁平化視覺設計的核心是追求純粹的內容信息本質拨匆, ?過往界面會使用線條分隔各種區(qū)域內容姆涩,但是這樣的處理會顯得界面比較擁擠,同時整體信息排列也比較散亂涮雷,使用卡片的形式呈現(xiàn)內容阵面,并通過適當?shù)牧舭组g隔,可以減少線條等元素對內容造成的視覺干擾洪鸭,可以創(chuàng)造出更干凈样刷、清晰的界面,讓用戶更專注于內容览爵,提高了易用性置鼻。

融入一些平面排版元素(如雜志版式),可讓界面更加高端蜓竹、文藝


動效

在產品使用過程中箕母,操作動效通過視覺上的反饋可以把用戶的注意力吸引到特定區(qū)域,減少用戶對產品的思考俱济,促進了任務參與嘶是。此外,產品動效在情感上可取悅用戶蛛碌,讓用戶在操作過程中感到驚喜聂喇,有利于塑造品牌設計基因

流行的動效設計是以交互思想作為核心準則去設計,以“輕”為主,視覺呈現(xiàn)上要把握好合適的度希太,不能太刻意地隨意添加克饶,因為多而復雜的動效既影響了性能,也使操作過程變得更為復雜誊辉,極大降低了效率矾湃。一般來說,動效設計比較適合于用在產品核心功能操作堕澄、切換邀跃、使用反饋上,也可以用在產品特性介紹上奈偏。

1坞嘀,操作反饋的動效設計躯护,讓產品的使用體驗更加輕松愉悅惊来,促進了用戶的參與度,并且交互層次更“輕”

2棺滞,案例中啟動頁通過動效的使用裁蚁,讓用戶在等待過程中不再枯燥,同時也體現(xiàn)了品牌設計基因继准。

手勢

隨著IOS枉证、安卓智能手機的普及,用戶對手勢操作也有了一定的認知移必,產品結合手勢運用能大幅度提升效率室谚,給用戶呈現(xiàn)更簡潔、直觀的體驗崔泵。

品牌應用

品牌設計是個比較大的概念秒赤,色彩、版式憎瘸、質感等設計元素都可以是品牌設計中的一種入篮。這里說的品牌應用是指在產品界面中應用到的一些品牌延伸設計,比如依據(jù)品牌定制的圖形幌甘、動效等等潮售,這些設計元素可以讓用戶對產品品牌有更深刻的認識,以達到品牌推廣目的锅风。

總結:

了解設計趨勢對后面的視覺設計工作有重要幫助酥诽,它能讓設計師形成“審美標準”,讓具體的設計工作更加有效率皱埠,但設計趨勢畢竟是帶主觀的分析結果肮帐,具體的產品視覺呈現(xiàn)還要綜合產品需求定位、交互漱逸、市場運營等等因素泪姨,所以視覺設計師在設計中要學會靈活運用游沿,不能一味照搬,選取最符合自己產品的設計方法才能更好地包裝產品肮砾,突出品牌設計基因诀黍,并不斷地加以優(yōu)化去加深品牌設計對用戶的影響。

建議:

1仗处,作為視覺設計師眯勾,除了工作之外應該要多注重生活中的發(fā)現(xiàn),要善于發(fā)現(xiàn)美婆誓。

2吃环,當看到一個很棒的設計效果,除了收藏之外洋幻,更應該多想一下為什么郁轻。

3,工作之外視覺設計師應該勤做設計嘗試文留,注重自我提升好唯,不要依賴產品項目提升自己。

4燥翅,時刻了解設計行情與資訊骑篙,關注產品的最新動態(tài),設計不是閉門造車森书。

5靶端,優(yōu)秀視覺設計師要有更好的發(fā)散思維,懂得針對當前流行的設計手法加以優(yōu)化提煉凛膏,形成自己獨樹一幟的設計文化去引領潮流杨名。

完,謝謝译柏。


【本文作者】

劉戈镣煮,網(wǎng)易資深設計專家。2005年開始從事網(wǎng)頁設計職務鄙麦,2008年加入網(wǎng)易典唇,先后完成了網(wǎng)易相冊、簡約版郵箱胯府、網(wǎng)易閃電郵介衔、網(wǎng)易有錢、網(wǎng)易嚴選等重要項目的設計骂因,積累了豐富的項目設計經驗炎咖,現(xiàn)為網(wǎng)易郵件事業(yè)部設計經理、資深視覺設計專家,負責網(wǎng)易嚴選的產品三端(app\wap\web)與市場運營設計乘盼,力求為用戶打造更好的電商設計體驗升熊。


【小編打硬廣從不含糊】

劉戈老師領銜講授的網(wǎng)易云課堂高級UI設計師課程已經上線啦!全網(wǎng)最詳盡深入的產品設計指導绸栅,實現(xiàn)更易用级野、更具美感和商業(yè)價值的設計。最高顏值的講師團隊來啦粹胯!網(wǎng)易UEDC總監(jiān)結合多年的從業(yè)經驗蓖柔,提供設計美學理論和方法論。課程將詳細介紹工具類风纠、電商類况鸣、文藝類和工具類產品的設計思路與實踐,為目前市面上最詳盡的一線產品設計分析竹观。詳情請戳課程鏈接 http://163.lu/SGr5p3

5.31前購買課程還有早鳥價活動 1398哈~還有UEDC內刊贈送 期不期待镐捧!驚不驚喜!


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末栈幸,一起剝皮案震驚了整個濱河市愤估,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌速址,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,248評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件由驹,死亡現(xiàn)場離奇詭異芍锚,居然都是意外死亡,警方通過查閱死者的電腦和手機蔓榄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評論 2 381
  • 文/潘曉璐 我一進店門并炮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人甥郑,你說我怎么就攤上這事逃魄。” “怎么了澜搅?”我有些...
    開封第一講書人閱讀 153,443評論 0 344
  • 文/不壞的土叔 我叫張陵伍俘,是天一觀的道長。 經常有香客問我勉躺,道長癌瘾,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,475評論 1 279
  • 正文 為了忘掉前任饵溅,我火速辦了婚禮妨退,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己咬荷,他們只是感情好冠句,可當我...
    茶點故事閱讀 64,458評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著幸乒,像睡著了一般轩端。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上逝变,一...
    開封第一講書人閱讀 49,185評論 1 284
  • 那天基茵,我揣著相機與錄音,去河邊找鬼壳影。 笑死拱层,一個胖子當著我的面吹牛,可吹牛的內容都是我干的宴咧。 我是一名探鬼主播根灯,決...
    沈念sama閱讀 38,451評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼掺栅!你這毒婦竟也來了烙肺?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,112評論 0 261
  • 序言:老撾萬榮一對情侶失蹤氧卧,失蹤者是張志新(化名)和其女友劉穎桃笙,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體沙绝,經...
    沈念sama閱讀 43,609評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡搏明,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,083評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了闪檬。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片星著。...
    茶點故事閱讀 38,163評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖粗悯,靈堂內的尸體忽然破棺而出虚循,到底是詐尸還是另有隱情,我是刑警寧澤样傍,帶...
    沈念sama閱讀 33,803評論 4 323
  • 正文 年R本政府宣布横缔,位于F島的核電站,受9級特大地震影響铭乾,放射性物質發(fā)生泄漏剪廉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,357評論 3 307
  • 文/蒙蒙 一炕檩、第九天 我趴在偏房一處隱蔽的房頂上張望斗蒋。 院中可真熱鬧捌斧,春花似錦、人聲如沸泉沾。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽跷究。三九已至姓迅,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間俊马,已是汗流浹背丁存。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留柴我,地道東北人解寝。 一個月前我還...
    沈念sama閱讀 45,636評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像艘儒,于是被迫代替她去往敵國和親聋伦。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,925評論 2 344

推薦閱讀更多精彩內容