WEBVTT

1
00:00:00.000 --> 00:00:02.400
這堂課，我們用簡單的對話，

2
00:00:02.400 --> 00:00:06.800
做出一個能旋轉、能點建物看介紹的小島網站。

3
00:00:06.800 --> 00:00:10.160
先開啟課程頁上方的原始參考網站，

4
00:00:10.160 --> 00:00:15.040
看看你喜歡的是玩具模型的外觀，還是點選探索的方式。

5
00:00:15.040 --> 00:00:17.840
接著只挑一個最想做的功能。

6
00:00:17.840 --> 00:00:22.480
你不需要先知道小島的尺寸、光線參數或程式架構。

7
00:00:22.480 --> 00:00:25.760
這些細節可以請人工智慧提出建議。

8
00:00:25.760 --> 00:00:29.400
課程裡的畫面，是我們自己的虛構學習範例；

9
00:00:29.400 --> 00:00:33.440
提示詞也是教學示範，並非原作者的聊天紀錄。

10
00:00:33.440 --> 00:00:37.520
先把目標說清楚，做出一小步，再看結果調整，

11
00:00:37.520 --> 00:00:39.440
就是這堂課的練習方式。

12
00:00:39.440 --> 00:00:44.320
你可以隨時暫停影片，把畫面上的短指令換成自己的主題。

13
00:00:44.540 --> 00:00:45.340
開始前，

14
00:00:45.340 --> 00:00:49.660
選一個能協助寫程式並開啟網頁預覽的人工智慧工具。

15
00:00:49.660 --> 00:00:53.180
如果工具有內建預覽，就請它把作品放進預覽。

16
00:00:53.180 --> 00:00:55.340
如果你使用本機程式編輯器，

17
00:00:55.340 --> 00:00:59.580
就請它建立專案、說明必要的安裝，並開啟本機網址。

18
00:00:59.580 --> 00:01:02.220
你只需要確認網頁真的能打開。

19
00:01:02.220 --> 00:01:05.020
先不要加入登入、後台或資料庫。

20
00:01:05.020 --> 00:01:08.860
遇到工具詢問風格時，可以回答溫暖的玩具模型；

21
00:01:08.860 --> 00:01:11.580
問內容時，可以先用虛構的圖書館。

22
00:01:11.580 --> 00:01:16.060
如果它一次問太多問題，就告訴它每次只問一件必要的事。

23
00:01:16.060 --> 00:01:19.660
沒有編輯環境也可以先使用課程頁的可操作範例，

24
00:01:19.660 --> 00:01:23.660
觀察旋轉與點選的結果，再回來動手做自己的版本。

25
00:01:23.660 --> 00:01:25.900
不同工具的按鈕位置可能不同，

26
00:01:25.900 --> 00:01:28.220
我們練習的是一樣的對話順序。

27
00:01:28.220 --> 00:01:32.140
第一個要求就用剛才那句話：一座小島、一棟建物，

28
00:01:32.140 --> 00:01:33.660
點下去能看介紹。

29
00:01:33.660 --> 00:01:36.380
內容先用一句虛構的圖書館說明。

30
00:01:36.380 --> 00:01:39.580
完成後不要急著加功能，先自己拖曳畫面，

31
00:01:39.580 --> 00:01:42.140
看看能不能從不同方向看見小屋。

32
00:01:42.140 --> 00:01:45.100
再點小屋，確認出現的是圖書館介紹；

33
00:01:45.100 --> 00:01:47.260
關掉介紹後，還能繼續探索。

34
00:01:47.260 --> 00:01:49.580
如果畫面只有圖片，不能旋轉，

35
00:01:49.580 --> 00:01:52.300
就明確回覆要可操作的三維場景。

36
00:01:52.300 --> 00:01:56.380
如果整個網頁打不開，先把錯誤訊息交給人工智慧處理。

37
00:01:56.380 --> 00:02:01.180
第一版的成功標準很小：能打開、能旋轉、點得到、看得懂。

38
00:02:01.180 --> 00:02:04.700
先留下這個版本，後面每次改動，都可以跟它比較。

39
00:02:04.700 --> 00:02:07.660
這樣就算某一步失敗，也不必從頭開始。

40
00:02:07.660 --> 00:02:12.020
最小版本能操作後，再告訴人工智慧你想放哪些內容。

41
00:02:12.020 --> 00:02:16.460
你可以直接用白話列三個主題：交通、公共空間與文化，

42
00:02:16.460 --> 00:02:18.300
每個主題先放兩個項目。

43
00:02:18.300 --> 00:02:21.380
例如交通有步行導覽和單車路線；

44
00:02:21.380 --> 00:02:23.740
文化有故事展間和典藏工坊。

45
00:02:23.740 --> 00:02:27.980
每個項目只寫名稱與一句介紹，不必先自己寫資料格式。

46
00:02:27.980 --> 00:02:31.020
請人工智慧幫你整理，並保留文字清單。

47
00:02:31.020 --> 00:02:34.460
完成後，挑一個項目，把名稱改成自己的文字。

48
00:02:34.460 --> 00:02:38.140
再檢查清單、建物名稱與介紹是不是一起更新。

49
00:02:38.140 --> 00:02:42.380
這一步學的是內容如何跟畫面對上，不是背欄位名稱。

50
00:02:42.380 --> 00:02:44.780
範例的數字和故事都是虛構的；

51
00:02:44.780 --> 00:02:49.340
如果之後換成真實資料，再補上資料出處，並逐筆確認內容。

52
00:02:49.340 --> 00:02:50.860
現在再調整外觀。

53
00:02:50.860 --> 00:02:54.140
你可以說，把它改成溫暖的玩具模型城市，

54
00:02:54.140 --> 00:02:57.740
有柔和的顏色、圓潤的小屋、樹木與小橋。

55
00:02:57.740 --> 00:03:02.060
如果喜歡六角形拼接的感覺，就補一句：小島像六角積木，

56
00:03:02.060 --> 00:03:04.460
彼此留一點水道，用橋連起來。

57
00:03:04.460 --> 00:03:07.900
這些要求已經足夠讓人工智慧提出實作方式，

58
00:03:07.900 --> 00:03:10.380
不必自己指定每座橋幾片木板。

59
00:03:10.380 --> 00:03:13.660
完成後，先看島有沒有重疊、橋有沒有接好，

60
00:03:13.660 --> 00:03:15.660
再看樹木是否擋住建物。

61
00:03:15.660 --> 00:03:20.300
覺得畫面太擠，可以直接說減少裝飾，讓主要建物更清楚。

62
00:03:20.300 --> 00:03:23.260
長版技術規格由編者拿來檢查細節，

63
00:03:23.260 --> 00:03:27.100
學員只需要描述想要的畫面，並指出實際看到的問題。

64
00:03:27.100 --> 00:03:31.580
一次調整一種感受，比一次加入所有特效更容易看懂差別。

65
00:03:31.580 --> 00:03:33.860
有了更多內容後，再加搜尋。

66
00:03:33.860 --> 00:03:37.980
短指令可以是：讓我搜尋項目，從清單或建物點進去，

67
00:03:37.980 --> 00:03:39.420
都看到同一份介紹。

68
00:03:39.420 --> 00:03:41.500
完成後試著搜尋典藏。

69
00:03:41.500 --> 00:03:45.340
清單只留下相關項目時，場景也應該有對應的變化。

70
00:03:45.340 --> 00:03:49.180
點清單看一次介紹，再清除搜尋、點同一棟建物，

71
00:03:49.180 --> 00:03:50.540
看內容是否一致。

72
00:03:50.540 --> 00:03:53.460
你不需要先知道點選偵測的程式怎麼寫，

73
00:03:53.460 --> 00:03:55.340
但需要知道怎麼檢查結果。

74
00:03:55.340 --> 00:03:57.900
如果拖曳旋轉時常常誤開卡片，

75
00:03:57.900 --> 00:04:02.100
就把這個操作描述給人工智慧，請它分開拖曳和點擊。

76
00:04:02.100 --> 00:04:04.780
這裡的操作畫面來自本課的獨立範例，

77
00:04:04.780 --> 00:04:06.860
示範的是可以自己重現的檢查，

78
00:04:06.860 --> 00:04:10.100
不代表每個工具都會一次產生相同畫面。

79
00:04:10.100 --> 00:04:11.500
接著可以加入日夜。

80
00:04:11.500 --> 00:04:14.060
先要求白天與夜晚兩個按鈕就好。

81
00:04:14.060 --> 00:04:18.300
白天看得清楚建物，夜晚天空變暗，窗戶和路燈亮起，

82
00:04:18.300 --> 00:04:20.060
但文字仍然容易閱讀。

83
00:04:20.060 --> 00:04:23.820
完成後，來回切換幾次，看看建物是否還在原位，

84
00:04:23.820 --> 00:04:26.300
原本的搜尋和點選能不能使用。

85
00:04:26.300 --> 00:04:30.620
夜晚太黑，就說保留夜晚氣氛，但讓主要建物更清楚。

86
00:04:30.620 --> 00:04:34.460
太亮看不出差別，就請它調整天空與燈光的對比。

87
00:04:34.460 --> 00:04:38.780
等手動切換穩定後，再考慮自動循環，並保留暫停按鈕。

88
00:04:38.780 --> 00:04:42.860
學習重點是把一種效果加好，確認原來的功能沒有壞掉；

89
00:04:42.860 --> 00:04:47.420
至於天空、水面和燈光要用什麼參數，可以讓人工智慧處理。

90
00:04:47.420 --> 00:04:51.740
如果還想加一些小人，可以先讓一個角色沿橋走到另一座島。

91
00:04:51.740 --> 00:04:55.980
請它沿著步道走，不穿過建物，也不要一下子放很多角色。

92
00:04:55.980 --> 00:04:59.660
這時要想一件事：這段移動只是讓城市更生動，

93
00:04:59.660 --> 00:05:01.820
還是在表達真實的工作進度？

94
00:05:01.820 --> 00:05:05.980
本課使用的是示意搬運，所以畫面會明確標示為虛構，

95
00:05:05.980 --> 00:05:08.540
不會說角色到站就代表政策完成。

96
00:05:08.540 --> 00:05:11.500
沒有確認的合作關係，可以先用文字說明；

97
00:05:11.500 --> 00:05:14.140
想保留線條時，也要有清楚的標示，

98
00:05:14.140 --> 00:05:16.220
並避免演成已確認的流動。

99
00:05:16.220 --> 00:05:19.900
原本的入門範例和外觀範例採用不同的顯示選擇，

100
00:05:19.900 --> 00:05:23.260
這些都是教學設計，不應直接當成原站規則。

101
00:05:23.260 --> 00:05:26.540
把畫面意思說清楚，再決定要不要加入動畫。

102
00:05:26.540 --> 00:05:30.380
作品在大螢幕看起來正常，還要縮到手機大小試一次。

103
00:05:30.380 --> 00:05:34.460
檢查三件事：按鈕好不好按，介紹文字有沒有被擋住，

104
00:05:34.460 --> 00:05:35.820
清單能不能捲動。

105
00:05:35.820 --> 00:05:39.660
如果模型畫面太小，就請人工智慧把介紹放到下方，

106
00:05:39.660 --> 00:05:41.340
讓你可以調整面板高度。

107
00:05:41.340 --> 00:05:45.980
也試著用鍵盤選取清單，確認不用拖動三維場景也能閱讀。

108
00:05:45.980 --> 00:05:48.700
動畫讓人不舒服時，應該可以暫停；

109
00:05:48.700 --> 00:05:51.900
裝置設定減少動態時，也應減少自動移動。

110
00:05:51.900 --> 00:05:55.340
這些都可以用一般話提出，不必先學專業術語。

111
00:05:55.340 --> 00:05:59.660
手機尺寸預覽可以先找版面問題，真的要交給別人使用時，

112
00:05:59.660 --> 00:06:04.060
仍要拿實際手機操作，因為滑鼠測過不等於手指一定好用。

113
00:06:04.060 --> 00:06:08.060
當結果不如預期，不需要立刻寫一份更長的提示詞。

114
00:06:08.280 --> 00:06:12.680
先說你做了什麼、看到什麼、希望變成什麼。

115
00:06:12.680 --> 00:06:17.880
例如我搜尋典藏後，清單剩一筆，但場景還有全部建物；

116
00:06:17.880 --> 00:06:21.640
請修正兩邊不同步的問題，保留其他功能。

117
00:06:21.640 --> 00:06:25.720
或者我點屋頂，開出的卻是旁邊建物的介紹；

118
00:06:25.720 --> 00:06:28.920
請先找原因，再只修改點選對應。

119
00:06:28.920 --> 00:06:33.720
能貼出錯誤訊息或提供畫面時，也一起交給人工智慧。

120
00:06:33.720 --> 00:06:38.840
修好後，重做剛才失敗的操作，再試一次原本正常的功能。

121
00:06:38.840 --> 00:06:42.520
每完成一小步，就請它保存一個可回到的版本。

122
00:06:42.520 --> 00:06:47.240
這比一次要求修好所有問題，更容易確認究竟改好了什麼，

123
00:06:47.240 --> 00:06:49.320
也能減少無關的變動。

124
00:06:49.320 --> 00:06:53.680
最後，回到最初的小目標：作品能打開，能旋轉，

125
00:06:53.680 --> 00:06:57.880
點建物能看介紹，搜尋和文字清單也能使用。

126
00:06:57.880 --> 00:07:01.800
想繼續練習，就把其中一個主題換成自己的內容，

127
00:07:01.800 --> 00:07:04.040
再挑一種外觀或效果調整。

128
00:07:04.040 --> 00:07:07.400
你可以做閱讀島、校園導覽，或活動介紹；

129
00:07:07.400 --> 00:07:09.720
不用一次做成完整城市。

130
00:07:09.720 --> 00:07:12.840
請人工智慧整理一份簡短的使用方式，

131
00:07:12.840 --> 00:07:17.160
列出已完成和還沒完成的地方，再請另一個人試用。

132
00:07:17.160 --> 00:07:18.680
這堂課要帶走的，

133
00:07:18.680 --> 00:07:23.040
是說目標、做一小步、看結果、再調整的順序。

134
00:07:23.040 --> 00:07:27.000
課程頁提供短指令教材、最小範例和外觀示範，

135
00:07:27.000 --> 00:07:30.760
想了解程式原理時，再打開選讀的技術說明。

136
00:07:30.760 --> 00:07:35.560
先完成屬於你的第一座小島，再決定下一步要讓它多做什麼。