Line with the UI DESIGN TREND

1

符合時代的介面設計潮流

叡揚資訊 前端設計部 經理 李宗青

Bear Lee叡揚資訊 前端設計部 經理

臺灣師範大學美術研究所藝術指導組畢業

高雄世界運動會吉祥物原創設計者

2006-2009 臺灣師大首頁設計

60個以上網站系統開發設計

臺北市立大學兼任講師

2

3

UX - 聚焦真正的使用行為

設計的趨勢 - 扁平化設計

內容優先 - 簡單的色彩元素

聚焦互動 - Google設計原則

永續發展 - 網站、系統視覺規範

4

Focus on User

5

聚焦使用者

當我們設計產品介面時，聚焦於使用者與介面交互的過程 從使用者生活中接觸過的經驗與我們設計的產品間連結。

6

7

我們不停吸收來自國際的設計趨勢引進新的概念，

並研究使用上的原則，而非看到的樣子而已

8

In the example above I'm using the one column form (most recommended in UX studies), but with a very long vertical scroll.

http://ux.stackexchange.com/questions/46019/what-is-the-best-way-to-deal-with-very-complex-forms

What is the best way to deal with very complex forms

9

This is the client's favorite one, 4 columns using white space and trying to keep everything above the fold.

客戶 愛！ 不用往下捲

10

真正的設計不是看到這個表單的樣子而已，而是填寫它。

11

多欄位的安排打斷使用者填寫的視覺動線。

12

13

根據欄位屬性、邏輯組織同類型的欄位。

14

One useful method I've used on one of my projects some time ago is using 2 panels

分析表單內容，將輸入表單徹底分群

15

單欄垂直輸入內容

16

我不想要使用滑鼠滾動頁面

17

http://uxmyths.com/post/654047943/myth-people-dont-scroll

18

其實使用者不是真的不想滾動滑鼠，

而是再次填寫時，會找不到某個欄位。

19

第一次使用者 每天使用者

單 欄

多 欄

設計開發者

20

回歸到原點，

檢視表單內容本身，資訊間應該怎樣群組與歸納。

透過表單的導航與分群，提昇再次使用表單者的體驗。

21

22

配合標籤分群提示，讓往後表格的尋找加快

2323

當然對我們來說看到的樣子也超重要

符合時代的設計，才有專業感!!!!

因此我們都很愛跟大家分享

想要帶給您當前 新的介面設計風格與趨勢。

23

Flat Design

24

扁平化設計扁平化設計在Windows、Google的倡導與 大量設計師的跟隨下，近幾年大量流行在此 之下也產生許多於扁平設計下的相關風格

25

內容優先的設計Flat Design

減少實體風格的漸層、陰影，讓畫面簡潔，透過物體與間距透露畫面 的元素間的安排，凸顯內容本身。

事實上扁平風格也可以說是從平面設計中所帶入的風格概念。

26

Why Flat Design

27

28

29

適合未來的世界Flat Design

事實上，扁平設計企圖讓使用者接受虛擬，並與現實世界有所區別 對於未來的擴充實境的介面設計來說，是必需使用的視覺策略

30

然而對於現在Flat Design

以往介面設計透過使用者生活經驗中與介面中象徵物的連結達到 指引操作的目的，然而介面元件中，去除實體的一些暗示， 例如陰影、漸層後，事實上會提高一般使用者的學習曲線。

skeuomorphism flat flat-ghost flat-ios & windows8

31

32

33

簡單的色彩元素Simple Color Schemes

扁平設計風在少即是多的原則下，簡單少量的色彩亦是 近介面設計 的趨勢，減少複雜色彩的使用，有利於對於單一系統中，使用者降低 色彩這個面向的記憶複雜度。

34

每一個系統或網站根據其視覺系統 都會統合出一個自有的色彩計畫。

從以下案例就可以分析出各大網站 都會將配色縮減在3個左右，如果 扣除灰階色彩甚至可以說只有1種

Google Twitter Facebook

Microsoft Pinterest

YahooInstagram

Flickr Spotify

Rdio Svbtle Medium

系統介面設計

低彩度大面積區塊

顏色使用謹慎

內容為主

35

35

d

36

37

Office 360 word

38

3938

Adobe Illustrator CC

40

SPEED 3.0

41

SPEED 3.0

42

SPEED 3.0

43

SPEED 3.0

44

SPEED Fitt’s Law

45

Fitt’s Law

46

幾何元素編排Geometric Elements

在極簡的設計中，透過幾何元素的編排，能夠導引出動線的特殊性一方面也替 介面增加其趣味性、藝術性。

47

48

49

50

模糊背景Blurry Background

模糊背景有別於純色背景的使用，透過背景的照片，增添畫面的色彩，卻又能保持內容的呈現，也可以說是未來擴充實境式介面的表現模式體現

51

52

巨大特殊字體Very large typography

由於網路字體技術的興盛，與簡潔風格的推崇，當視覺元素更形回歸到 內容層面，設計師將頭腦動到字體上，透過精挑細選的字體，呈現純粹 具意義個視覺元素

53

54

55

闡述與滾動特效Storytelling and Parallax Scrolling

對於產品或具有故事性的頁面，現今流行以精美的視覺設計 結合動畫效果吸引使用者與內容間有更深刻緊密的互動

56

57

然而現實層面，扁平化有需要更多的調和， 輔助其實用性

Material Design

58

Google的介面設計原則當google於2014 提出此介面設計原則其動態回饋、介面 空間邏輯、動畫加速度等方面，都給予介面設計界一個標 準的原則認識。

59

3D的介面空間Layers and Depth

Material所存在的環境是一個3D空間，這表示所有物件都有x、y和z維度。畫面的物件，透過現實的空間關係，更能夠讓使用者了解操作對象之間的關聯

60

擴散陰影

Diffuse Shadow

從Apple TV OS公開後，其設計更是呼應了Material Design對空間的使用，透過擴散陰影重新將真實世界的空間、光線體驗帶回介面，並凸顯內容

61

62

63

64

動態過程的意義Animation

透過元素反應變形或移動的過程中，引導使用者的注意力，並同時了解物件與畫面間的關係。微互動中”反饋”的部份，常常透過動畫來表現。

65

66

67

68

69

從按鈕型態、顏色的擴展，提示狀態的改變

70

微互動

Micro-Interations

設計者透過設計出操作流程的圈

套，讓使用者成功順暢的達成操

作過程並達到目的。過程中流程

獲取喜悅與學習操作邏輯的概念

即為微互動所強調的。

70

7171

72

透過閃爍提示訊息

利用結構改變提供更多訊息

73

物件操作後 與接下來畫面的過渡揭示畫面與操作間的關係

74

75

Visual Identity & UI Kit

76

視覺系統 與 介面元件

進入網路時代，網站的視覺系統UI規範，抑是當今 一個網站成長茁壯需要被定義與持續更新的體系

77

78

79

83

84

85

86

87

8888

GSS

Domain knowhow

88

Bear Lee

歡迎提問

89