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
先完成屬於你的第一座小島，再決定下一步要讓它多做什麼。