乾貨 移動端APP扁平化UI設計解析

2021-10-05 22:14:40 字數 2032 閱讀 3352

扁平化的ui設計通過將有效資訊分類,對資訊層級的編排與梳理,將核心內容的路徑扁平化,使使用者通過更少的路徑便迅速獲得資訊。

內容簡潔不僅能夠縮小應用程式自身的空間佔用量,而且縮短了資料載入的時間,提高了使用效率。

扁平化ui主要設計步驟

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

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

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

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

⑤介面的視覺效果設計,根據介面原型圖為框架,在此基礎上進行視覺效果的處理。

參考品牌定位和品牌形象來確立不少於兩種視覺風格提案並進行分析,當方案確立之後再對其進行深化設計,包括介面元素的布局、色調風格、圖示、**的表現等方面。

扁平化ui的設計美學

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

無襯線字型

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

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

色調與飽和度

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

我們在進行顏色的選擇時都會考慮到視覺疲勞因素,通常選擇視覺上相對柔和,在使用過程中盡量延遲視覺疲勞出現的時間的顏色,通常的做法是降低色彩的飽和度。

扁平化ui設計更加傾向於單色調的色彩,歸根結底就是色調與飽和度的匹配,選用主色和輔助色的組合,運用多種配色手法來創造優秀的視覺體驗。

簡化圖形

扁平化ui設計中常用高度精簡的圖示,來代表某乙個操作步驟或者是功能的視覺展現,在形態上進行最大化的精煉和提取。

有簡潔、形象的控制項圖示,也有線條色彩豐富、具有描述性的圖示,它們的共同特徵是都具有基本的幾何形狀。

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

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

留白可以理解成版率,其主要的作用就是凸顯層次、突出內容。

有限的手機螢幕尺寸能夠顯示出的資訊量也是有限的,而通常介面中所展示的資訊量和使用者所接受的有效資訊,並不是成正比的,如果是為了提高資訊量而壓縮版率,可能會降低使用者接收的有效資訊量。

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

動態效果

美學不僅包含了圖形、色彩等藝術表現方式,也包含了其它可以引起使用者反映的其他視覺效果,所以動態效果從某種程度上來說也屬於美學的範疇。適度的動態效果可以使介面顯得更加一致和真實,並且能給使用者帶來眼前一亮的感覺。

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

UI設計,扁平化還是擬物化?

2010,當windows phone開始扁平化的時候,換來的是世人的嘲笑。2011,當安卓4.0開始扁平化的時候,人們把這當作安卓為了和蘋果不同的掙扎。2013,當 ios 7開始扁平化的時候,就突然成了設計潮流了 擬物設計就是追求模擬現實物品的造型和質感,通過疊加高光 紋理 材質 陰影等各種效果...

C 扁平化窗體UI

1 設定窗體邊框的型別,把formborderstyle屬性設定為none,窗體將變成無邊框 2 無邊框窗體預設不能隨意拖動,也沒有窗體最大化 最小化 關閉等按鈕,解決辦法如下 1 實現隨意拖動窗體 參考部落格 c 無邊框窗體實現拖動 最大化 最小化 關閉 2 窗體最大化 最小化 關閉等按鈕的實現 ...

扁平化設計與色彩趨勢

b 扁平化設計進修 b img img img img 扁平化設計你可以通俗的理解為 使用簡單特效,或者無特效來建立的設計方案,它不包含三維屬性。諸如投影 斜面 浮雕 漸變等特效都不要在設計中使用。扁平化設計給人的感覺通常都很簡潔,即使它可以做的很複雜。簡單 直接 友好的特性也使得它廣受移動介面和時...