指導教授：吳有龍 老師 課程名稱：人因 與 資管 報告人： M 陳鈞宏

 前言  學校網站設計的兩個盲點  盲點改善之道  學校網站結構化的幾項建議  結論

 為了擴大學校的服務層面與提高服務品質， 設立學校網站已經是每間學校的基本要求， 然後縱觀今日學校設立的網站，其專業性與 人性化方面仍有待努力，每次使用者的上網 活動，通常都是一次又一次的網路嘗試錯誤 的視窗開啟。  以下將為學校網站的設計及規劃，提供精簡、 清晰與結構化的使用者導向設計原則供作參 考。

 雖然許多學校所設置的網站，畫面細緻精美， 但網站內所要呈現的圖文訊息太多，常常增 加使用者的認知負荷，對於不常到該站瀏覽 的人來說，其友善層面仍待努力。  其改善之道比較好的做法是將資訊內容以瀏 覽身分分類與深分淺出地結構化呈現，舉下 圖為例來說明！

 左圖是一個介紹台灣原 住民的知識架構，可讓 讀者清楚看出原住民十 二族有哪些，所傳達出 來的訊息是可讓讀者對 十二族完整架構的認識， 當這樣的概念結構被統 整到讀者的腦海後，它 的次結構 ( 附屬概念 ) 或更 下層結構將逐步地被含 攝在讀者的認知結構當 中。

 因此不同身份的瀏覽者 代表著具有不同知識背 景的使用者，就與學校 有關的知識背景而言， 其實都需要有不同的結 構序列編排。  左圖為義守大學學術單 位電機資訊學院其內包 含資訊管理學系所 … 等 大樹 小樹

 另外一個學校網站呈現設計時所需關注的議 題是什麼內容該在網站上呈現？以及每頁要 呈現多少的問題？為了避免結構過於龐雜， 因此精準簡要的用字遣詞就顯得十分重要， 在此以下圖作為說明。

 左圖可看出三項意涵： 設計者要能呈現清晰而 正確的伸縮架構給予使 用者。 字詞的使用必須是能精 準傳達該連結內容的最 簡單用語。 要為不同使用者重組符 合其認知的架構。

 每次上網活動，其實都是瀏覽者發展其個人 認知架構的開始，需包含：「有層次結構」、 「用語清晰簡潔」或「合乎認知背景」等重 要元素。因此，筆者指出設計時可以參考的 三項原則。 學校網站首頁上應規劃角色瀏覽序列的連結專區 運用超連結與樹狀結構的網路屬性，製作出可以自 由伸縮的結構化網站內容 擴大參與設計層面，建構合乎瀏覽者知識背景的網 站

 學校網站的建置上，應該要有不同角色的連 結專區，例如：教師、訪客、校友、學生 … 等，並將所要連結的專區頁面內容依照業務 工作的程序性質，予以序列安排，其間若為 避免瀏覽者於瀏覽時因錯誤點選而迷失，最 好能一併出現如「我目前所在位置」之附屬 視窗設計，該視窗可以指出連結位置點與整 個網站架構之間的關係。

 以左圖 - 義守大學為例， 為避免因錯誤點選而迷 失，所以有註記目前位 置所在，但此一選項卻 出現在首頁右下角的選 項「網站地圖」  其二，也是在網站地圖 裡出現角色不同的選項。 避免迷失

 左圖 - 為大仁科技大學 首頁，其頁面左方在一 開始有清楚標示其使用 者身份為何，有符合如 標題「網站上應規劃角 色瀏覽序列的連結專區」

 學校網頁的呈現必須兼顧細部與整體關係間 的訊息傳達，除了可以放大特寫看細部之外， 也能綜覽全貌，這樣的好處是使瀏覽者不至 於「見樹不見林」，對於整個網站架構能有 較為清晰的理解，有助於瀏覽者認知的統整。

 網頁製作時透過超連結 可以不用將所有打算呈 現的內容，全部都擠在 同一文件內，在精簡後 的網頁主題內容當中， 可以利用超連結將所欲 詳加說明詮釋的部分製 作成超連結。

 左圖 - 高雄應用科技大 學，利用 Flash JavaScript 程式語言  利用這項技術可做出樹 狀結構，當然還有其它 的技術可以達成， Flash 就是其中一項。

 學校網站就好比一座虛擬的學校，校內的任 何設施佈置或標示，隨時隨時都在呈現學校 學的專業知識或佈置原則，為了達成這樣的 目標，網站設計時必須有更多學校專業人員 的融入與建議，這樣才能了解並設計不同角 色上網的需求，能辨明網站所要呈現的內容 應「如何分類」、「如何建立概念內容架構 之間的從屬關係」。

 學校網站的瀏覽者好比是一位學習者，網頁 內容如同學習的教材，網頁設計都正如教材 製作者，必須儘量提供有助於認知發展的知 識架構，而這些知識架構需包含「有層次」、 「用語清晰簡潔」或「合乎認知背景」等重 要元素。  唯有人性化並能盡量符合每位不同使用者的 網站設計，才能把學校的特色及資訊傳達給 每位使用者，而使用都也能獲取自已要的資 訊！