09.17 扁平化UI設計解析,都是知識點

在當今信息爆炸的文化背景下,人們每天要通過過手機APP接觸巨大的信息流,然後再持續的進行評估、過濾並且再加工,具有認知上的負擔,扁平化UI設計更加適合信息碎片化的傳遞方式。

扁平化UI設計解析,都是知識點

扁平化的UI設計通過將有效信息分類,對信息層級的編排與梳理,將核心內容的路徑扁平化,使用戶通過更少的路徑便迅速獲得信息。內容簡潔不僅能夠縮小應用程序自身的空間佔用量,而且縮短了數據加載的時間,提高了使用效率。

扁平化UI設計解析,都是知識點

扁平化UI主要設計步驟

①在進行手機應用程序UI的設計之前,首先要做的就是明確功能和目的,要對產品的定位要有一個明確的瞭解,對目標用戶進行詳細的研究,分析出用戶群體的使用特徵、情感、習慣、心理、需求等信息,並得出用戶研究報告和可行性設計建議。

扁平化UI設計解析,都是知識點

②其次要做的就是界面信息的梳理工作。在對應用程序功能和目的訴求充分了解的情況下,對整個信息層級進行規劃,同時將整個應用程序的重點功能和邏輯關係清晰的展示出來,把不必要的信息全部刪除。

扁平化UI設計解析,都是知識點

③在完成了信息梳理的基礎上,第三步是為整個界面做岀原型的架構,包括操作與跳轉流程、結構與佈局,按照有意義的方式將信息分組,每一級頁面中所包含的內容與交互反饋方式都必須在這一步完成,為後續的原型設計做出明確的框架結構。

扁平化UI設計解析,都是知識點

④根據成本和進度,繪製出界面的原型圖,原型是一種設計的表現形式,它必須在最終方案成型之前就進行展示,所以在此階段繪製出線框原型圖,便於展示方案、進行討論,同時在設計中和開發人員進行溝通,一旦發現問題能夠及時的進行修改。

扁平化UI設計解析,都是知識點

⑤界面的視覺效果設計,根據界面原型圖為框架,在此基礎上進行視覺效果的處理。參考品牌定位和品牌形象來確立不少於兩種視覺風格提案並進行分析,當方案確立之後再對其進行深化設計,包括界面元素的佈局、色調風格、圖標、皮膚的表現等方面。

扁平化UI設計解析,都是知識點

扁平化UI的設計美學

從設計本質上來講就是簡單的設計,是整體簡約的設計風格,視覺效果是為功能服務的,提倡功能大於形式。

扁平化UI設計解析,都是知識點

無襯線字體

扁平化設計的魅力在於極簡,同時能展現出極高的功能性。視覺效果上的極簡,功能性上的最大化,又不妨礙信息的溝通,很大程度上必須依賴字體的編排,為了使文字的字體更加符合扁平化。

扁平化UI設計解析,都是知識點

在設計時應該選擇簡單易用的字體,在通常情況下,最好的選擇就是無襯線字體,在西文中它被稱為無襯線體,在中文中則與黑體相對應,它沒有銳利的轉折和收筆時的稜角,整體感覺較為流暢、簡潔,呈幾何形態,在手機屏幕中也更加容易被閱讀。

扁平化UI設計解析,都是知識點

色調與飽和度

鮮豔明亮的色彩能夠使界面在任何亮度背景下都有良好的對比度,為界面創造出與眾不同的感覺,以此獲得用戶的注意。所以在通常情況下,提到扁平化設計的色彩方案,就會聯想到高飽和、單色調的色塊等等。

扁平化UI設計解析,都是知識點

我們在進行顏色的選擇時都會考慮到視覺疲勞因素,通常選擇視覺上相對柔和,在使用過程中儘量延遲視覺疲勞出現的時間的顏色,通常的做法是降低色彩的飽和度。扁平化UI設計更加傾向於單色調的色彩,歸根結底就是色調與飽和度的匹配,選用主色和輔助色的組合,運用多種配色手法來創造優秀的視覺體驗。

扁平化UI設計解析,都是知識點

簡化圖形

扁平化UI設計中常用高度精簡的圖標,來代表某一個操作步驟或者是功能的視覺展現,在形態上進行最大化的精煉和提取。有簡潔、形象的控件圖標,也有線條色彩豐富、具有描述性的圖標,它們的共同特徵是都具有基本的幾何形狀。

扁平化UI設計解析,都是知識點

沒有多餘的裝飾效果,僅僅將圖案從最開始的具象表現的含義進行提取,再用線條和色塊來進行模擬,中間會經歷數個步驟,並將細節與輪廓進行適度的取捨,將極簡的要素運用到界面設計中去,清晰明瞭的表達信息。

扁平化UI設計解析,都是知識點

版率

對於簡潔的內容元素來說,還需要進行美觀的排版設計,才能獲得更加良好的視覺效果。由於扁平化設計中使用的都是簡潔的視覺元素,所以佈局方案就顯得非常重要。

扁平化UI設計解析,都是知識點

留白可以理解成版率,其主要的作用就是凸顯層次、突出內容。有限的手機屏幕尺寸能夠顯示出的信息量也是有限的,而通常界面中所展示的信息量和用戶所接受的有效信息,並不是成正比的,如果是為了提高信息量而壓縮版率,可能會降低用戶接收的有效信息量。

扁平化UI設計解析,都是知識點

進行版面設計的時候,在重要信息四周加上留白,就容易將視線集中到小面積的內容上去,使焦點得到突出。

使用大圖片或者是色塊的時,根據頁面的不同內容和功能,來適當的調整週邊的留白也較為重要,縮小留白或者是不留白,會使版面更加豐富、充滿活力,另外圖片展示空間的增加,會增強衝擊感,使版面更加富有張力。

扁平化UI設計解析,都是知識點

動態效果

美學不僅包含了圖形、色彩等藝術表現方式,也包含了其它可以引起用戶反映的其他視覺效果,所以動態效果從某種程度上來說也屬於美學的範疇。

適度的動態效果可以使界面顯得更加一致和真實,並且能給用戶帶來眼前一亮的感覺。

扁平化UI設計解析,都是知識點

動態效果要在符合物理定律的基礎上來構建動畫,例如:考慮到重力、慣性、剛性等,使動態效果顯得比較真實,同時能夠使用戶感覺更加自然。

扁平化UI設計解析,都是知識點


分享到:


相關文章: