天天看點

【UI設計】APP的扁平化呈現!

作者:衍果視覺

移動互聯時代,消費者的消費行為、方式和以往相比都發生了巨大的改變。界面作為App展示内容的門戶,其視覺效果的優劣,直接影響到使用者的使用體驗,影響到品牌的認知度和購買力,是以,界面的視覺設計顯得尤為重要。

【UI設計】APP的扁平化呈現!

作為手機App的門戶,值得詳細研究的就是界面視覺設計,作為App的門面,視覺設計的好壞直接決定着使用者體驗效果,是赢得市場的關鍵因素,這樣界面設計研究就成了視覺設計的重要問題。扁平化視覺設計是對極簡主義設計理念的一種延續,不用無關元素,隻用簡單的文字,簡單的圖形來表達。

【UI設計】APP的扁平化呈現!

減少界面元素中的一些拟物化的設計手法,減少在視覺上的幹擾,強調内容本身,華而不實的效果讓使用者在視覺上産生疲勞,産生閱讀障礙。與拟物化設計相比,扁平化設計可以使人們看起來更舒服,緩解拟物化帶給人們的審美疲勞。

【UI設計】APP的扁平化呈現!
【UI設計】APP的扁平化呈現!

生活中文字廣泛存在于我們周圍,事實上,文字元号的存在即是一種資訊在視覺上的傳達。字型是扁平化設計中非常重要的設計點,在扁平化視覺設計界面裡,在字型的選擇和使用中,我們可以用無襯線字型建立風格和鋪定基調,以此來統一整體設計,確定設計出簡潔的界面,進而在整體表意上表現一緻。

【UI設計】APP的扁平化呈現!

界面設計風格還要參考産品的實際情況,視覺設計中文字的表達,更加趨向于的簡潔清爽明快的表達。

【UI設計】APP的扁平化呈現!
【UI設計】APP的扁平化呈現!

色彩具有表達情感的功能,可以讓閱聽人産生豐富的聯想。在精神世界裡有着豐富的含義,單單就扁平化視覺設計而言,在界面中的色彩需要更加明了,純度相對要高,更加凸顯得界面有活力。扁平化界面設計中搭配簡潔的顔色是很重要的,整體的主色系作為基點配上一些其他明快的色彩,表現出界面簡潔、明亮的視覺效果。

【UI設計】APP的扁平化呈現!

在扁平化的程序裡,複古系列和流行元素的風格更多地被設計師運用,如橙色、紫色。扁平化色彩設計是一種開放的,靈活的,扁平化設計能用很多其他的顔色,但是,一般來說視覺設計師更傾向于大膽醒目的亮色。

【UI設計】APP的扁平化呈現!

顔色在扁平化的設計中,是可以多層次、多拓展性的。設計師将明快飽和度較高的顔色搭配平緩甯靜的灰色和黑色,這是目前市場上設計師大部分采用的設計手法。在塊面與塊面的銜接處,用低飽和度的陰影來表達、區分,與此同時看顔色是否違和、統一。扁平化在色彩的呈現上就是運用飽和度和明亮高的顔色對比平緩的顔色。

【UI設計】APP的扁平化呈現!
【UI設計】APP的扁平化呈現!

文字是符号,是詞句的表達。而最直接的視覺符号是圖形,圖形和文字在一起圖形更容易獲得目光,圖形視覺元素在設計中是不可替代的,是一種可視的情感表達方式。在界面設計中,扁平化的圖形能使使用者将圖像與某些資訊或事物相關聯,讓人産生聯想的判斷,進而實作傳達資訊的功能。

【UI設計】APP的扁平化呈現!

與拟物化的圖像符号臨摹來真實地表達事物不同,扁平化的設計圖像符号強調以簡潔形式表達事物的特征。這樣的結果要歸功于扁平化設計的直覺明了,減少了使用者大量的閱讀負擔,節省了使用者大腦思考過程,同時啟發他們的聯想。

【UI設計】APP的扁平化呈現!

從符号學角度來說,既表達意義又引發互動。要注意的是,太簡潔的圖像符号也會造成資訊傳達的模糊,與表達的事物意思不對稱。

【UI設計】APP的扁平化呈現!

手機類App是提升人們生活品質、傳達給人們不一樣的生活态度的産品,它極大地友善了人們的生活,可以讓商家和使用者垂直對接,也可以使商家和使用者産生互動。

【UI設計】APP的扁平化呈現!

繼續閱讀