the important of UI Design in Software Project

1. UI Design in
Project
1
介面設計與專案
叡揚資訊 前端設計部 經理 李宗青

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

3. 到底是怎樣的一回事
3

4. 4
Team

5. 5

6. 35
d
6

7. 7

8. 8

9. 9

10. 10

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

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

13. 35
d
13

14. 14
SPEED 3.0

15. 15

16. 16

17. 17

18. 18

19. 19

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

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

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

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

24. 24

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

26. 26

27. 27

28. 28
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

29. 29
This is the client's favorite
one, 4 columns using white
space and trying to keep
everything above the fold.
客戶最愛！
不用往下捲

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

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

32. 32

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

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

35. 35
單欄垂直輸入內容

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

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

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

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

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

41. 41

42. 42
時間、金錢一定不一樣！

43. 4343
.. ..

44. Workflow
44
工作流程
通常在整個UI設計開發流程中我們如何界定
每個階段的產出

45. Patterns Collection
45
資料收集
了解產品與同性質產品
補足知識與規劃

46. 46

47. 47

48. 48

49. Functional Map
49
功能的關聯地圖
•

50. 50

51. UI Flow
51
簡易或純文字的畫面流程圖
•

52. 52
UI Flow
•

53. Wireframes
53
簡易或純文字的畫面流程圖
低保真度的設計原型，在去除所有視
覺設計細節之下，進行頁面結構、功
能、內容規劃。

54. Wireframe
54

55. wireframe
55

56. 56

57. Mockup
57
設計模擬圖
wireframe

58. Mockup
• Wireframe
58

59. 59

60. …
• 請黯然的退回去wireframe的步驟…
• 不可能一次就完善，
但盡可能在進到Mockup之前
把問題都抓出來。
60

61. Prototype
61
雛形設計

62. 62

63. 6363

64. 6464

65. 6565

66. 6666

67. 6767

68. 6868

69. 6969

70. 7070

71. 7171

72. 7272

73. 7373

74. Hover Tooltip

75. ( )
Hover

76. 7676

77. 7777

78. 7878
Wireframe
Mockup
Prototype

79. 7979
Bear

80. 8080

81. 8181
Front-end &
Design
User Interface
User Experience
Front-end Develop

82. 8282
CSS HTML
...

83. 8383

84. 8484

85. 8585

86. 8686

87. 8787

88. 8888
http://engineering.flipboard.com/2015/02/mobile-web/

89. 8989

90. 9090

91. Bear Lee
歡迎提問
91