2015年移動UI/UX設計趨勢

5 評論 10509 瀏覽 172 收藏 11 分鐘

不論在app界面、網頁瀏覽器中還是智能手表上,設計都是驅動用戶參與最重要的動力之一。從扁平化設計到Material design,我分析了設計趨勢的發展,得出了一些結論與讀者分享,看看設計領域有哪些趨勢?為什么這些趨勢對用戶有益?以及如何設計出符合趨勢的產品?

1. 更輕量化的設計

Image title

What

“扁平化設計”去除了多余的傾斜和陰影,在app中采用一種更加輕量化的美學,界面更簡單,只關注獲取核心信息,拋開所有無用的設計元素。

Why

輕量化的設計排除了干擾因素,把注意力放在屏幕上有意義的內容,讓用戶的操作更加簡單,同時使界面更加優雅、現代。

2. 只用一種字體

Image title

What

減少屏幕上字體的數量才能真正發現排版的力量。設計師不需要使用多種字體,只用一種字體,配上斜體、加粗、改變字號等手段,也可以分辨不同區域的內容。

Why

在app、移動端和PC端網站中使用單一字體有助于增強品牌的統一性,優化全平臺的體驗。此外,用戶也更喜歡單一字體所帶來的簡潔性。

3. 利用留白和卡片式設計——不再有線條

Image title

What

以前,人們會使用線條和各種分隔符號來區分界面上的不同區域,但實際上這種方式現在看來會顯得過于擁擠。在設計中去掉線條通過留白和卡片的方式呈現內容,可以創造出更干凈的界面。

Why

去掉明顯的線條和分隔符可以使界面更加時尚,也更容易關注到功能。圖片和字體可以放得更大,界面更加明晰,產品的易用性也將提高。而且,利用留白空間區分不同模塊也不像劃線那樣突兀。

4. 強調數字

Image title

What

現在的用戶傾向于更簡單的界面,因此使用大字號和突出的顏色能夠更好地確保數字在人們注意力的中心。根據目標消費者的不同,所強調的數字可以有所變化。

Why

使用更大的字號或更突出的顏色可以將用戶的注意力吸引到屏幕上某個特定的區域,同時又不需要十分扎眼的推送,也不必要求用戶進行操作。最終結果就是,用戶更快地獲取到了關鍵信息,整個頁面的瀏覽體驗更好。

5. 微交互

Image title

What

微交互指的是一些細微的視覺效果增強(比如動畫或音效)。在用戶完成交易、添加收藏或者彈出消息時都可以設置小的交互動作,將人們的注意力吸引到合適的位置,讓你的產品與眾不同。

Why

這些微交互可以作為用戶完成某個動作的信號。微交互較好的產品使用起來會更簡單、有趣,用戶的參與感也更強。

6. 使用更簡潔的配色方案

Image title

What

自2013年扁平化設計開始普及以來,使用更簡潔的配色方案就成為一種趨勢。設計師和用戶都傾向于使用更少的顏色,以保持界面的干凈。

Why

正確使用顏色可以營造情境,將用戶的注意力引導到合適的位置,強調關鍵功能,提高整個使用app過程中的體驗。此外還能增強用戶對于品牌的辨識度。

7. 分層的界面

Image title

What

以前,用戶界面都是擬物化的,從事物本身選取素材,比如電子日歷長得和紙質桌面日歷一樣,把app圖標設計成立體的,按鍵音也模仿傳統電話?,F在,扁平化設計通過分層的方式來表現事物的深度和層次,創造一種更加“有形”的感覺。

Why

我 們的現實世界是3D的,以前人們習慣的界面也是擬物的,所以在進行扁平化設計時可能會出現的一個風險就是“過于扁平”,導致用戶的不適應,而分層設計就是 解決這個問題的方法,把一個物件放在另一個物件的上方,充分利用縱向的層次,幫助用戶理清不同物件之間的關系,把注意力放在特定的位置。

8. 虛擬按鈕

Image title

What

虛擬按鈕指的是透明的按鈕,沒有顏色填充,通過細線勾勒出長方形或正方形的邊緣,邊角是直角或圓弧形。按鈕中文字也極簡的。

Why

這些設計優雅的按鍵可以抓住用戶的注意力,看起來十分干凈、時髦又不花哨。同一個頁面上的按鈕還可以通過不同的設計和位置來表現優先級,比如用虛擬按鈕來顯示選項或者中間步驟。在material design的一些情況下,還可以用細微的陰影幫助用戶理解按鈕的層級。

9. 手勢

Image title

What

隨著陀螺儀和運動傳感器的普及,用戶在使用設備時不僅可以點擊屏幕,還可以將現實生活中的一些手勢運用到屏幕上。

Why

很多手勢是符合用戶的直覺的,比如當需要刪除某個東西時,不論年齡性別的用戶都會想到把這個東西扔出屏幕。手勢可以顯著提升產品的使用體驗,幫助用戶以更少的點擊完成更多交互。

10. 動態效果

Image title

What

隨著軟件技術的進步,設計師現在可以利用樣式表來控制畫面的動態效果,比如用來過渡、顯示動畫甚至模仿3D立體感。設計中動態效果的使用可以促進用戶的參與,并適當強調某些元素。

Why

動態效果可以將用戶的注意力吸引到特定區域,或者讓他們不要注意某個區域。通過視覺上的反饋,它可以增加用戶的參與度,取悅用戶,甚至讓他們感到驚嘆。

11. 更短的用戶操作流程

Image title

What

以前,人們完成一次交易可能要跳轉好幾個頁面,而現在在一屏內就可以完成這些步驟,省時省力。比如用戶在完成某項任務后會高亮接下來所需要進行的操作或者自動打開新頁面。

Why

現在人們的生活節奏較快,經常會在走路的時候用手機,因此簡單快捷的操作更受歡迎。按照這種思路設計產品操作流程可以幫用戶省時省力,增加轉化率并提高用戶打開app的頻率。

12. 最優化設計規范

Image title

What

設計規范是在項目開始之初制定的視覺語言規范,包括顏色、圖標和整體風格等方面的標準。

Why

制定設計規范可以保持應用內以及各平臺之間設計語言的一致性,同時還能在開發過程中盡可能減少錯誤,在未來做出修改時也更方便。

13. 利用原型不斷改進

Image title

What

產品原型可以為功能的開發設計提供寶貴的指導。在產品設計的早期做出矯正,避免在產品基本成型時才修改,浪費時間和精力。

Why

通過低成本的“實驗”,可以測試產品各個功能的需求,通過迭代改進產品,用更少的時間開發出更好的產品。

原文來自36kr

本文編譯自medium.com

作者:Onur Oral

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. nice

    來自山東 回復
  2. 不錯,總結的很好,雖然我每天都在關注這些,但總結概括不了

    來自廣東 回復
  3. 知乎日報有。。。

    來自廣東 回復
  4. 有收獲,作者辛苦

    來自上海 回復