【網頁設計】職種　【術科】模擬試題卷

一、主題說明：（請詳細閱讀）

親愛的網頁設計師們：

一則「您的包裹地址錯誤，請點連結更新」的簡訊、一通自稱檢察官的來電、一個保證每月獲利 20% 的投資群組——詐騙手法不斷翻新，受害者從長輩到學生都有。長輩常因為不熟悉數位工具而慌了手腳；年輕人則常因為太相信網路上的「熟人」與「好康」而上當。

社區防詐志工隊想建置一個「防詐生活館」網站，讓阿公阿嬤看得清楚、按得到，也讓國高中生願意花三分鐘看完。網站不是要嚇人，而是讓每個人在接到可疑訊息的那一刻，都能想起三個動作：停下來、掛掉、查證。

請你以「通用設計」的精神，打造一個不同年齡都能輕鬆使用的防詐網站。

二、圖形檔：

1. 至少使用主辦單位提供的「圖案檔」15 張以上。
2. 圖案檔（jpg）共有 22 張，可依照需要進行去背、合成、修改或重新繪製。
3. 圖案檔名可依照需求修改（不可使用中文檔名）。

三、製作內容：

1.【網站名稱與重點規劃】

1. 以「防詐生活館」為方向，構思網站名稱與一句容易記憶的 Slogan。
2. 網站請依照下列重點進行規劃：
   1. 首頁就要讓使用者看到「一聽、二掛、三查證」與 165 專線。
   2. 長輩與青少年的閱讀習慣不同，請分別設計入口與呈現方式。
   3. 把參考資料的詐騙手法整理成容易比較的形式（例如卡片、表格、圖示），避免整段文字貼上。

2.【網頁基礎內容】

1. 【首頁】（Home）：主視覺、網站名稱與 Slogan、防詐三步驟、長輩與青少年兩個快速入口。
2. 【詐騙手法圖鑑】（Scam Types）：參考資料中的六種手法，每種包含「常見說詞」「警訊」「正確做法」。
3. 【長輩專區】（For Seniors）：以獨立頁面呈現。（設計建議：大字、單欄、高對比、按鈕大，步驟一次只講一件事。）
4. 【青少年專區】（For Teens）：以獨立頁面呈現。（設計建議：圖像化、節奏輕快、可結合情境對話。）
5. 【求助資源】（Get Help）：遇到詐騙或已經匯款時的處理步驟與求助管道。

（重要！）長輩專區與青少年專區必須有明顯不同的版面與操作方式，符合不同年齡使用者的需求。

3.【網頁互動內容】

1. 妥善設計網站地圖與基礎內容中各個項目的排版布局與互動方式。
2. 情境判斷：至少 6 則模擬訊息或來電，使用者選擇「可信」或「可疑」後，立即顯示正確答案與理由。
3. 字級切換：全站提供「一般／大字」切換，切換後所有頁面維持同一設定。
4. 常見問答：以手風琴（展開／收合）呈現參考資料中的 Q&A。

4.【其他加分項目】

除了上述對於本網站需求之外，可以發揮你的創意性、設計感、技術力，增加一些可供額外加分的內容。

四、設計要求：

1. 響應式網站設計：確保網站在手機、平板與桌機上都有良好的顯示效果（涉及媒體查詢和 CSS 選擇器的使用），網頁呈現形式和頁數不限。
2. 使用者體驗（UX）：製作考慮過「視覺動線」、「色彩心理應用」、「圖片選擇」以及「導航結構」、「易讀性」和「功能性」的網站。

五、名詞解釋：

通用設計（UD，Universal Design）：設計時就考慮讓不同年齡、能力與情況的人都能使用，而不是事後再替特定族群另做一版。

六、參考資料（文字素材）：