105學年度下學期世新大學資管系「iOS程式設計」第七週

1. iOS程式設計 七
李晧
2016/04/07

2. 今天不講程式，談UI

3. 但是不會教如何設計
APP UI

4. 今天的重點是
建立APP UI時應注意事項

5. 另外要注意的有

6. 以下故事主⾓角非本⼈人

7. 在畢專時

8. 最少會有⼀一名組員要當
設計師

9. 或者

10. 當⼯工程師的組員
要兼職設計師

11. 好不容易易到畢展當天

12. 做出來來的成品可能會被
⼩小論⽂文評審挑三揀四

13. 不論中間過程如何

14. 畢專結束了了

15. 以為⼯工程師可以不需要
再兼職設計師

16. 畢業了了

17. 進公司
職稱是APP⼯工程師

18. 通常公司的設計師會給
完整的UI草稿

19. ⼯工程師可以專⼼心寫程式

20. 畫⾯面相關的設計就交給
設計師

21. ⼯工程師只要等設計稿完成

22. 例例如這樣

23. 現實⽣生活中
不是到處都有網路路

24. 像是坐台灣⾼高鐵時

25. 有網路路訊號
但是⼀一直無法成功連線

26. 可能會變成這樣

27. 此時就要去跟設計師要
設計稿

28. ⼈人品優良可以得到寶物

29. 得到等待畫⾯面

30. 等待太久
會被當成斷線

31. 再去找設計師

32. 設計師會覺得
這位⼯工程師太嘮叨

33. 不給設計稿了了

34. 我發現我錯了了

35. ⼯工程師無法專⼼心寫程式

36. 需要⾃自⼰己設計失敗畫⾯面

37. 如果是我
設計出來來的畫⾯面就會…

38. ⾄至少不是⼀一片⽩白

39. 資深的⼯工程師還會想到

40. ⾼高鐵會過⼭山洞洞的

41. ⼿手機收不到訊號

42. 到此
有成功、等待、失敗

43. 這樣就夠了了嗎？

44. 不是每個⼈人⼀一開始就有
朋友的

45. 初次使⽤用的畫⾯面
也要設計

46. 加字、按鈕，完成

47. 基本上
這個⾴頁⾯面算是完⼯工了了

48. 換個場景

49. 進入個⼈人資料⾴頁

50. ⼀一般來來說
只會有⼀一個設計

51. 填滿⼤大部份欄欄位

52. 不是所有⼈人都會乖乖填
資料

53. 所以要思考
只有部份資料時的案例例

54. 像是這樣

55. 總合上述範例例

56. 整體來來說設計UI
需要考慮五種狀狀態

57. UI的五種狀狀態
• 理理想狀狀態 (Ideal State)
• 空⽩白狀狀態 (Empty State)
• 錯誤狀狀態 (Error State)
• 局部資料狀狀態 (Partial State)
• 載入中狀狀態 (Loading State)

58. 接下來來
我們來來談錯誤狀狀態

59. 每個⼈人應該都看過這種

61. Mac⽤用⼾戶則是這個

63. 早期很常⾒見見到這種
很戲劇性的效果

64. 剛開始
容易易讓⼈人驚慌失措

65. 此後藍藍底⽩白字就變成
Windows死當的代名詞

66. Mac則稱為五國語⾔言

67. 近年年來來
以上兩兩個畫⾯面很難看到

68. Windows更更改了了設計

70. 有時候會看到另⼀一個版本

72. 有⼀一個QR code
好像滿先進的

73. 另⼀一⽅方⾯面
Mac是怎麼處理理的呢？

75. 無聲無息的重開機

76. 使⽤用者只會知道⼀一開始
電腦沒反應

77. 之後突然被登出

78. 以上的修改
無法評論是否完美

79. 相較早期
藍藍底⽩白字或五國語⾔言

80. 新的設計比較讓⼈人不會
驚恐

81. 另外在遇到錯誤狀狀態時

82. 盡量量不要讓使⽤用者的資
料消失

83. 例例如
註冊帳號時

84. 使⽤用者辛苦輸入的資料

85. 因為某個欄欄位出錯導致
所有的資料需要重新輸入

86. 記得在出錯後
幫使⽤用者填入之前的資料

87. 或是不要讓使⽤用者
有犯錯的機會

89. 接下來來講載入中

90. 通常
為了了⽅方便便會加入⼀一個圖⽰示

92. 使⽤用這個圖⽰示有個問題

93. 它會吸引使⽤用者的注意

94. ⼀一直看著圖⽰示在轉
會讓感覺時間被拉長

95. 使⽤用者就會抱怨等很久

96. 不要讓轉圈圖⽰示卡在畫
⾯面中⾯面

97. 在處理理載入中有幾種⽅方
式

98. 例例如
分批載入

99. 先將比較⼩小的⽂文字資料
取回並顯⽰示

100. 讓使⽤用者知道畫⾯面
正在完成的道路路上

102. 另外⼀一種⽅方式是
偷跑

103. 可以應⽤用的情境有
拍照打卡

104. 當使⽤用者拍完或選好照
片時

105. 有⼀一部份⼈人不會⾺馬上發
表⽂文章

106. 此時可以趁使⽤用者正在輸
入⽂文字時偷偷地上傳圖片

107. 當使⽤用者輸入完畢後

108. 資料也上傳完成了了

109. 這種⽅方式不是每個地⽅方
都可以使⽤用

110. 某些國家的法令會要求進⾏行行
連網時要得到使⽤用者的授權

111. 最後要談的是看不到的
東⻄西

112. ⼿手機相較於電腦
多了了⼤大量量的⼿手勢

113. 這些操作⼿手勢無法在畫
⾯面上被看⾒見見

114. 如果只是⽤用常⽤用的⼿手勢
例例如兩兩指縮放

115. 但是有不常被使⽤用的⼿手勢

116. 那麼這個功能被使⽤用的
機率將會相當低

117. 不要想透過初次使⽤用APP時
出現的教學⾴頁克服⼿手勢問題

118. 會認真看教學⾴頁的⼈人很
少

119. 真正好的設計是
使⽤用者⼀一拿到即會使⽤用

120. 過多的教學只會突顯這
套設計有問題

121. 在⼿手機平台在
除了了⼿手勢還有螢幕較⼩小

122. 在有限的空間中為了了能
放入所有功能

123. 有時會遇到使⽤用⼤大量量的
圖標

124. 圖標能取代冗長的描述

125. 但是能意會的⼜又有多少？

126. 以Gmail為例例

127. Facebook

128. 有時候
增加⼀一點敘述是必要的

129. Facebook

130. OpenPoint

131. 隨著產業的成熟

132. 有⼀一些設計
在當時是必備的

133. 2014年年的Youtube

134. 左上⾓角的漢堡圖標
在當年年是每個APP都會出現的

135. 後來來發現將所有的功能
隱藏是不明智的設計

136. 現今的Youtube

137. 但是也有例例外的

138. 現今的Gmail

139. 同樣是清單圖標

140. 有些適合留留在今⽇日

141. 但有些不適合出現

142. 有⼀一點是通⽤用的

143. 介⾯面與圖標的設計
在不同年年代有不同的風格

144. 要隨時關注市場動態

145. 不要想⽤用⼀一個設計打天下