不可不知的UI三大核心(二)

前面講解了三大核心原則之一的"清晰",接下來繼續講解三大核心原則剩下的剩下的原則。

遵守

關於“遵從”的含義蘋果認為,“流暢的交互動效和清晰美觀的界面將有助於用戶理解內容並明白其交互邏輯,通常內容應充滿整個屏幕,並使用半透明和模糊效果提示用戶有更多的內容。使用合適的邊距、漸變和投影效果,可以讓界面清爽並有呼吸空間,但要確保內容為王。”

對於這段話可以通過以下內容的講解進一步理解。

內容為王的設計風格
這是該設計理念中最為重要的一點,界面設計的核心應該是思考如何更好地展示內容,關於內容為王有以下幾點需要注意。

①保持界面簡潔,儘量少添加視覺干擾元素,應把注意力更多地放在界面的排版上。當然,遊戲設計除外。減少視覺元素干擾也並非只是簡單的在界面中留白,比如天氣界面(中圖)可以把相關的視覺元素放在界面上,增加沉浸感;又比如健康應用的界面(右圖)可以通過不同的顏色對內容進行區分。

不可不知的UI三大核心(二)

②最大化內容展示區域,如果一屏無法展示完整的內容,用戶滑動時內容最好鋪滿屏幕,而不是讓內容只在某個區域內展示。

不可不知的UI三大核心(二)

合理使用半透明和模糊效果
從iOS7以後毛玻璃(即半透明和模糊)效果已經非常普及,這實際上是為了更好地突出當前的內容而產生的一種設計風格,在攝影的時候會把焦點放置在需要突出的主體上,這時主體是清晰的,而周圍非焦點區域則是模糊的,這在人像攝影中尤為明顯。

同樣,通過半透明和模糊效果可以更好地突出內容本身,因此這一效果往往是作為背景效果而使用。

不可不知的UI三大核心(二)

合理的設置邊距
雖然強調內容為王,建議最大化展示內容,但是合理的邊距設計反而能更好地幫助用戶把目光焦距在內容上。一般會在屏幕左右兩側留出8pt~16pt的邊距,而對於內容與內容之間的邊距也不應低於8pt。注意,用戶看到的越少往往會更注意所看到的內容,因此合理的留白和邊距設置是非常重要的,且隨著屏幕和分辨率的不斷變大,這將變得越來越重要。

不可不知的UI三大核心(二)

縱深(Depth)
縱深的設計理念是現代界面設計中非常重要的內容,縱深是指界面內容的層次感,通過獨特合理的頁面跳轉動效傳達出內容的層次結構,使得界面活潑生動便於理解,並且點擊跳轉時還能加深用戶的印象,提供更加沉浸的體驗。

縱深是界面設計中的難點需要結合動效理解,如果把這三大核心設計理念比作幻燈片的製作,前面的兩個核心設計理念是關於幻燈片的展示,而這一設計理念則是關於幻燈片的轉場。

不可不知的UI三大核心(二)

合理的頁面跳轉動效
注意,這裡有兩個關鍵詞:合理和跳轉。以iOS系統中自帶的“日曆”APP為例,當年、月、日進行切換時使用了縮放動效,可以讓用戶清晰瞭解彼此的層級關係,同時這樣的動效也很符合邏輯。動效在應用中的使用不應過多,一定要明白使用動效的兩個核心目的:一是為用戶提供引導;二是減少加載過程中的等待感。

不可不知的UI三大核心(二)


清晰的模態界面

可以把模態界面簡單理解為彈框,但又不侷限於彈框,凡是在當前頁面中彈出的內容,都可以理解為模態內容。

在當前頁面中彈出內容時,應該希望用戶的注意力集中在彈出的內容上,這時候內容應該突出,比如可以在頁面上增加一層遮罩,或者是使用背景模糊效果等。

不可不知的UI三大核心(二)

合理的利用新技術
每次硬件的更新往往會帶來一些新技術的出現,在進行界面設計時也應該考慮到這些內容,比如合理的使用指紋識別來加強頁面的統一性,使用3D touch技術快捷顯示內容等。需要注意的是,使用新技術的時候,也一定要考慮到不支持該技術的設備上的使用方式。

不可不知的UI三大核心(二)

當下,是一個動態卻又相對靜態的詞,雖然過去十年UI設計風格有了翻天覆地的變化,但是有些本質性的東西卻一直沒變,比如設計是為了更好地把內容傳達給用戶。

雖然當下的設計風格是一個很虛的事情,但要做好當下的設計,最重要的是掌握好當下的設計理念並將其和自己所負責的產品相結合,打造出能最大化提升產品價值的界面。



愛讀微課(iread360.com) | 色技手稿


分享到:


相關文章: