當前位置:
首頁 > 創意 > APP扁平化界面設計方法!

APP扁平化界面設計方法!

文/劉楠

交互界面是人機交互的渠道,扁平化的界面設計是以設計或者優化人的行為為出發點的,其關注的是人的心理和行為,其目的是為了提升用戶在使用軟體時的良好體驗。

扁平化界面設計並不是完全的抵制裝飾效果,而是合理適度的使用裝飾效果,合理適度的裝飾效果是指在不影響用戶對功能的使用的同時滿足用戶的審美需求。

拒絕特效。扁平化界面設計追求的是信息傳遞的直觀明了,具體表現去掉了多餘的透視、紋理、漸變以及3D效果的元素,注重減少信息的裝飾元素,減少圖片的分層效果。

簡潔清晰的界面元素。扁平化界面設計中的元素追求簡潔清晰,其中的圖標、文字、按鈕、按鈕使用效果和背景都製作的非常簡潔清晰,降低用戶的認知障礙。

優化排版。在扁平化界面設計當中,我們多採用網格化的排版方式,這種方式有利於對空間的合理利用,也有利於對於軟體中常用功能的凸顯。但同時應該注意,過於密集的排版,在很大的程度上會給用戶帶了很強烈的壓迫感。

關注配色。扁平化界面設計中,注重對明度較高的顏色的使用,通過色相、明度、純度的對比來區分每個功能,通過對色彩面積的的對比來凸顯核心功能,使用大量不同的顏色來豐富版面內容。

最簡方案。通過簡單的色塊加以分區,拒絕使用冗餘、厚重和繁雜等影響信息傳遞效果的裝飾效果,使得整個界面簡潔美觀。

讓用戶簡單明了的接收信息,不產生認知障礙,是交互界面設計一直追求的目標。

通過網格化對界面進行整體布局。運用網格化的布局方式又可以凸顯我們需要凸顯的功能,做到形式與功能的統一,特別是在移動終端的扁平化界面設計當中,網格化的布局可以使我們有效的利用可視面積,提高版面的利用率。推薦:UI素材包第28季

通過色彩和形狀對界面進行順序安排。對需要凸顯的功能多使用暖色,使其在與周邊顏色的對比,做到以冷暖為主的色彩對比;形狀的面積大小也可以在一定程度上引導用戶的注意,面積較大的形狀會使其與周邊的形狀做對比時加以凸顯。

注意安排留白區域。留白時我們必須要考慮留白對於整個版式的影響,過多的留白即會浪費版面的利用率,又會降低版面的連貫性,過少的留白又起不到其該起到的作用,這就要求我們在安排留白區域時必須注意留白在整個版面中的比率。

在扁平化界面設計當中,善於運用明度為主的色彩對比上,我們經常使用高明度基調,高明度基調會給人帶來輕快、明朗、高雅、純潔的感覺。依據明度的對比,我們可以凸顯一些重要的功能,使用戶可以直觀的找到他們想要找到的信息。

扁平化界面設計中也可以使用互補色相對比為主的色彩對比,在使用互補色相色調中,不太建議使用高純度的互補色相色調,而是建議通過對高純度的互補色調加入適量的黑、白、灰形成形成中純度的互補色相色調,這樣會使強烈對比的互補色相變弱。

扁平化界面設計當中對於字體的設計與運用也是重要的內容。我們都知道扁平化界面設計追求的是界面的簡潔明了,在色彩運用上使用色彩鮮艷,明度較高的顏色,所以在字體選擇上就要求我們選擇一些清晰度高且能夠與背景顏色做出鮮明對面的字體。

對於這樣的字體要求,推薦無襯線細巧字體,而在具體的字體選擇上,根據使用的目的不同,推薦使用幼線字體、蘭亭超細黑簡體、 Hiragino sans gB、 Microsoft yahei、 Droidsansfallback、 SourceHan sans等細巧的字體。

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!


請您繼續閱讀更多來自 設計智造 的精彩文章:

多姿多彩的色彩搭配方案
淺顯易懂的創意腦洞