34af6444d2b525123041f2abf899322e

優秀設計師都要知道的UI/UX設計發展趨勢

  • App相關|
  • 3362
  • HWITT
  • 2017/10/31 09:00
  • 0

國內移動裝置的發展已遠遠超過網頁,新創公司們想拓展品牌都會首選手機App。近期App設計風格的趨勢,無論是App還是網頁瀏覽器或者智慧手錶的介面, UI/UX設計都是消費者購買它們的最關鍵因素之一。從扁平化設計到Google的Meterial design, UI/UX設計的流行趨勢,是每個App設計者都應該好好的瞭解。

Lighter Design 輕量化設計

放棄了使用漸層或陰影等效果,現在App裡更流行使用「扁平化設計」的風格,給人一種「更輕」的體驗。這意味著設計師要善於利用負空間(指物體和物體的間隙)來取代漸層、陰影等效果,用以創造一個更加簡潔的界面,讓使用者的注意力可以集中在介面的核心訊息上,去掉對使用者無效的設計元素。去除多餘視覺元素,可讓使用者的眼睛只專注在有意義的訊息上,也降低了使用者在該介面的導航成本,同時讓品牌更具時尚感。

One Typeface 字體統一

減少過多不同種類字體的使用更能體現排版美學。與其使用不同的字體形式表現相異的特性,不如使用斜體、加粗、或半加粗,不同的字型大小更能將不同部分的內容加以區別。在整個App中僅使用單款字體可以為品牌帶來一致性的感受,這種效果是跨平台的,比如 App,行動端網站、PC端網站。因此,優化行動端的設計細節是可以全方位提升使用者體驗。同時,使用者會更喜歡統一的字體所帶來的簡潔化。

Spaces & Blocks 卡片與留白

過去我們設計線條來將不同的內容主題或分類明顯地區分開,但這些線條卻營造出一個笨拙擁擠的介面。我們可以將不同的內容放置於不同的區塊上,使用空白將不同內容區塊劃分開來,這樣我們就能騰出足夠空間,創建一個乾淨的介面。分界線的棄用是為了帶來一個具有現代感的外觀,將使用者注意力集中在功能性上,這樣一來,視覺體驗更加清爽,產品的易用性也得到了提昇。利用空間來取代分界線是一個因應使用者使用習慣的不錯選擇。

Spotlighted Data 聚焦於數據

由於使用者經驗傾向於操作更加簡潔的介面,所以利用較大字型與醒目顏色來顯示具體的數據,可將使用者的注意力更加集中聚焦。而透過高亮數據更能吸引不同的目標客戶。利用更大的字型或者一種流行色調,來吸引使用者的注意力到一個螢幕的某個特定區域,這完全不會給使用者帶來壓迫感。而讓使用者能夠更快地接收到有效訊息,導航和閱讀訊息的體驗也會更好。

Micro-interaction 微量互動

在使用場景中,微量互動是一個細緻的使用者體驗變化。這些場景包括完成一個交易,收藏喜歡的物件或者彈出一個消息。這些互動都是很細節微小的,但對使用者來說,產品的差異性就在於讓合適的使用者,使用合適的效果。這些微互動像是信號一樣驅動這使用者去逐步完成一項任務,例如調適設置一個新的內容彈出窗口。有微量互動的App將會給使用者帶來更簡潔、更有趣、更有參與感的感覺。

Smaller Color Palette 更少的色彩

在扁平化設計推出後,設計主題中使用更少顏色變成了一個流行趨勢,如此可以使設計變得清晰和簡潔。所以,設計師和使用者都更喜歡顏色更少的設計,以求一個更乾淨的外觀。顏色的運用在表達情緒、引導使用者注意力、品牌深化上都有顯著重要的作用。採用更少的顏色更能容易顯露品牌特性。此外,使用者也喜歡這樣美觀的介面,關鍵元素能被輕易展露凸顯,導航體驗也更好。

Layered Interface 分層介面

過去的介面設計遵守擬物化的原則,模擬一個物體的真實形態(例如數字日曆對紙質日曆的模仿,App圖標的3D縱深,手機相機的快門聲等等)。如今扁平化設計已不再採用這一原則,它使產品設計者可以用新的方式展示縱深效果,也就是分層設計,能更好地體現出縱深和規格化的感覺,為使用者提供一種更直覺的體驗。且由於扁平化設計最終導致的結果可能是「過於扁平」,隨著設計越來越簡化,使用者還怎麼被引導和吸引,畢竟這和他們在3D現實世界裡的經驗並不一致,分層提供了將一個條目放在另一個之上顯示的可能,它充分利用了Z軸深度的變化,幫助使用者理解不同條目之間的關係,並將他們的注意力吸引到需要他們關注的重點區塊。

Ghost Buttons 幽靈按鈕

幽靈按鈕是指沒有被填上顏色的透明按鍵。它們有著非常細化的邊緣,且外觀形狀往往很簡單,例如矩形、正方形或者直角、軟化邊緣等。這些按鈕中的文字往往很簡單且很小。這些設計得很微妙的按鈕可以吸引使用者注意力,而且看上去還很乾淨、時髦、不會惹人煩。它使你可以在螢幕上能放置更多層級的按鈕,若在同一頁面上有不同的按鈕,你可以根據優先度排列他們(例如那些提供選項的或作為中間步驟的幽靈按鈕)。在高質感設計的趨勢下,你可以透過陰影來提示使用者某一按鈕所屬的層級和優先度。

Gestures 手勢

隨著手持裝置設備陀螺儀和動作傳感器的功能演進,它能夠更好地感知使用者的動作。有了這些,使用者和設備之間的互動方式從滑鼠點擊演變成為真實的手勢。使用者對一些手勢有著出於直覺的感受。當要刪除某個條目時,不管哪個年齡層或哪個性別的使用者都會試圖把它移出螢幕。事實上,更少的點擊和更多的滾動都能提升使用者體驗,透過手勢在螢幕定位而非點擊目標可以讓你的應用程序看上去互動性更強。

Motion 動作

由於設計軟體的創新,設計師現在可以利用樣式表來控制元件的移動。基於動作的設計元素能夠以各式各樣的形式呈現,包括過場、動畫效果甚至模仿3D效果的紋理。設計動作的使用能幫助使用者接觸和吸收內容,這和以往通過數據和對象來突出內容重要性的方式已大有不同。動作元素能夠將使用者注意力吸引到一個明確的區域,或將他們的注意力移開。透過視覺響應,它可以增進使用者對內容的理解,讓使用者產生一種愉悅的體驗。

Shorter Flows 流程簡化

比起透過複雜的頁面來介紹如何使用產品,一個簡單的介面就可以幫你省去教導使用者的麻煩,並減輕設計者投入到App上的不必要的時間和精力。例如,當使用者完成前面的字段輸入後,一個表單可以自動打開或顯露後續的輸入區域,藉此提示使用者後續的操作。App手機使用者較喜歡簡潔、快速地完成操作,尤其在他們忙碌的時候。根據人們的這個需求,在設計上縮短使用者的使用流程,如此能增加轉化率以及人們打開App的頻率。

Design Standards 設計標準化

設計標準化是透過設計風格標準的訂定,諸如訂定標準的顏色,圖示和佈局色調之風格來設計項目,讓使用者體驗一致化。設計的標準化有助於在應用程序和不同平台之間創建一致性。它可以最大限度地降低可能的設計失誤,同時使項目讓使用者體驗一致,並使將來更容易進行修改。

Best Practice 最佳的實踐

產品原型是一個產品最終目標的最初演示,也可以是早期的可上線版本。提供產品原型能夠提供一個更直覺的視角去觀察產品的功能設計,以及產品想讓人看到的驚奇亮點,這能夠提升使用者體驗而不必浪費設計師太多時間和精力。透過創造這些低成本的產品原型,可以更方便去釐清目標的關鍵,包括功能特徵與需求等。從產品原型來了解產品可以增加我們必要的時間和資源,用內部驅動的過程來推進產品進步。