1. 程式人生 > >關於扁平化視覺設計趨勢的一些小分享

關於扁平化視覺設計趨勢的一些小分享

分享 重要 調整 利用 自己 亮點 自我提升 自身 之一

本文來自網易雲社區

作者:劉戈

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

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

質感

1,極致扁平:

趨向使用更輕量、簡潔的方式設計界面,去除所有質感,追求極致扁平設計是當下一個設計潮流,界面內只關註核心內容,拋開任何無關的設計元素,排除了視覺幹擾,同時也使界面風格變得更加現代、優雅,工具及內容展示類產品特別適合於此種風格。

技術分享圖片

2,弱質感:

過度扁平的設計對於內容比較復雜的產品來說並不利於視覺層級的表現,所以現在很多產品的視覺設計融入了輕微質感元素,既豐富了細節,同時也使內容層級更加清晰直觀。

技術分享圖片

色彩

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

技術分享圖片

文字

文字信息作為內容的重要載體之一,一直是偏平化設計排版的重要環節。現在更多產品的文字設計更加趨向於使用單一字體,通過字體自身樣式(加粗、中等、細體、斜體)去劃分內容層次,有助於優化瀏覽體驗,打造更加簡潔、優雅的界面,增強產品的品牌屬性。

技術分享圖片

偏向選用無襯線字體設計,字體線條清晰、筆觸統一,避免過多的裝飾性細節。IOS9專門針對中文字體做了設計調整,使用新的“蘋方”字體,字體形態更粗,邊角更圓潤。

技術分享圖片

圖標

圖標是產品功能的重要標識,同時也是塑造產品品牌設計風格的核心基因之一。圖標設計必須註重好辨識度與創意的平衡,太抽象的圖標影響用戶認知,不利於操作,太普通的圖標則比較中規中距,視覺上沒有亮點。扁平化的圖標主要以“線、面”兩個基礎元素不斷地進行多種組合表現,不同的組合能產生不同的質感風格,在視覺呈現上具有一定的差異化。

1,純線條形式:

線條式圖標在當今設計中被廣泛應用,線條的提煉對於以前越來越精簡,同時更註重細節呈現

技術分享圖片

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

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

技術分享圖片

3,剪影形式:

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

技術分享圖片

另外,圖標設計上考慮觸發後的效果,可以加強情感化元素,給用戶帶來輕松愉悅的視覺感觀。

技術分享圖片

內容展示

扁平化視覺設計的核心是追求純粹的內容信息本質, 過往界面會使用線條分隔各種區域內容,但是這樣的處理會顯得界面比較擁擠,同時整體信息排列也比較散亂,使用卡片的形式呈現內容,並通過適當的留白間隔,可以減少線條等元素對內容造成的視覺幹擾,可以創造出更幹凈、清晰的界面,讓用戶更專註於內容,提高了易用性。

技術分享圖片 融入一些平面排版元素(如雜誌版式),可讓界面更加高端、文藝

技術分享圖片

動效

在產品使用過程中,操作動效通過視覺上的反饋可以把用戶的註意力吸引到特定區域,減少用戶對產品的思考,促進了任務參與。此外,產品動效在情感上可取悅用戶,讓用戶在操作過程中感到驚喜,有利於塑造品牌設計基因

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

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

技術分享圖片

技術分享圖片

2,案例中啟動頁通過動效的使用,讓用戶在等待過程中不再枯燥,同時也體現了品牌設計基因。

技術分享圖片


技術分享圖片

手勢

隨著IOS、安卓智能手機的普及,用戶對手勢操作也有了一定的認知,產品結合手勢運用能大幅度提升效率,給用戶呈現更簡潔、直觀的體驗。

技術分享圖片

技術分享圖片

品牌應用

品牌設計是個比較大的概念,色彩、版式、質感等設計元素都可以是品牌設計中的一種。這裏說的品牌應用是指在產品界面中應用到的一些品牌延伸設計,比如依據品牌定制的圖形、動效等等,這些設計元素可以讓用戶對產品品牌有更深刻的認識,以達到品牌推廣目的。

技術分享圖片

總結:

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

建議:

1,作為視覺設計師,除了工作之外應該要多註重生活中的發現,要善於發現美。

2,當看到一個很棒的設計效果,除了收藏之外,更應該多想一下為什麽。

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

4,時刻了解設計行情與資訊,關註產品的最新動態,設計不是閉門造車。

5,優秀視覺設計師要有更好的發散思維,懂得針對當前流行的設計手法加以優化提煉,形成自己獨樹一幟的設計文化去引領潮流。

網易雲大禮包:https://www.163yun.com/gift

本文來自網易雲社區,經作者劉戈授權發布

相關文章:
【推薦】 認識用戶訪談
【推薦】 流式斷言器AssertJ介紹

關於扁平化視覺設計趨勢的一些小分享