2016 GSS Solution Day keynote

1. Line with the
UI DESIGN
TREND
1
符合時代的介面設計潮流
叡揚資訊 前端設計部 經理 李宗青

2. Bear Lee
叡揚資訊 前端設計部 經理
臺灣師範大學美術研究所藝術指導組畢業
高雄世界運動會吉祥物原創設計者
2006-2009 臺灣師大首頁設計
60個以上網站系統開發設計
臺北市立大學兼任講師
2

3. 3
UX - 聚焦真正的使用行為
設計的趨勢 - 扁平化設計
內容優先 - 簡單的色彩元素
聚焦互動 - Google設計原則
永續發展 - 網站、系統視覺規範

4. 4

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

6. 6

7. 7
我們不停吸收來自國際的設計趨勢引進新的概念，
並研究使用上的原則，而非看到的樣子而已

8. 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. 9
This is the client's favorite
one, 4 columns using white
space and trying to keep
everything above the fold.
客戶最愛！
不用往下捲

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

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

12. 12

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

14. 14
One useful method I've used on one of my projects some time ago is using 2 panels
分析表單內容，將輸入表單徹底分群

15. 15
單欄垂直輸入內容

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

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

18. 18
其實使用者不是真的不想滾動滑鼠，
而是再次填寫時，會找不到某個欄位。

19. 19
第一次使用者 每天使用者
單
欄
多
欄
設計開發者

20. 20
回歸到原點，
檢視表單內容本身，資訊間應該怎樣群組與歸納。
透過表單的導航與分群，提昇再次使用表單者的體驗。

21. 21

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

23. 23
23
當然對我們來說看到的樣子也超重要
符合時代的設計，才有專業感!!!!
因此我們都很愛跟大家分享
想要帶給您當前最新的介面設計風格與趨勢。
23

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

25. 25
內容優先的設計
Flat Design
減少實體風格的漸層、陰影，讓畫面簡潔，透過物體與間距透露畫面
的元素間的安排，凸顯內容本身。
事實上扁平風格也可以說是從平面設計中所帶入的風格概念。

26. 26

27. Why Flat Design
27

28. 28

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

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

31. skeuomorphism flat flat-ghost flat-ios & windows8
31

32. 32

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

34. 34
每一個系統或網站根據其視覺系統
都會統合出一個自有的色彩計畫。
從以下案例就可以分析出各大網站
都會將配色縮減在3個左右，如果
扣除灰階色彩甚至可以說只有1種
Google Twitter Facebook
Microsoft Pinterest
Yahoo
Instagram
Flickr
Spotify
Rdio Svbtle Medium

35. 系統介面設計
低彩度大面積區塊
顏色使用謹慎
內容為主
35

36. 35
d
36

37. 37

38. Office 360 word
38

39. 3938
Adobe Illustrator CC

40. 40
SPEED 3.0

41. 41
SPEED 3.0

42. 42
SPEED 3.0

43. 43
SPEED 3.0

44. 44
SPEED Fitt’s Law

45. 45
Fitt’s Law

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

47. 47

48. 48

49. 49

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

51. 51

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

53. 53

54. 54

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

56. 56

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

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

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

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

61. 61

62. 62

63. 63

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

65. 65

66. 66

67. 67

68. 68

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

70. 70
微互動
Micro-Interations
設計者透過設計出操作流程的圈
套，讓使用者成功順暢的達成操
作過程並達到目的。過程中流程
獲取喜悅與學習操作邏輯的概念
即為微互動所強調的。
70

71. 7171

72. 72
透過閃爍提示訊息
利用結構改變提供
更多訊息

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

74. 74

75. 75

76. Visual Identity & UI Kit
76
視覺系統 與 介面元件
進入網路時代，網站的視覺系統UI規範，抑是當今
一個網站成長茁壯需要被定義與持續更新的體系

77. 77

78. 78

79. 79

83. 83

84. 84

85. 85

86. 86

87. 87

88. 8888
GSS
Domain knowhow
88

89. Bear Lee
歡迎提問
89