Guideline Sample (Draft Version)
- 2. 知世網絡
目錄
台灣大哥大網站規範.......................................................................................... I
修訂紀錄...............................................................................................................
本規範修訂紀錄 版本 0.2 版............................................................................
台灣大哥大網站規範......................................................................................... 4
1. 前言 ............................................................................................................. 5
1.1. 目標................................................................................................5
1.2. 文件架構與適用範疇......................................................................
1.3. 使用指引........................................................................................8
1.4. 更新與擴充程序建議..................................................................11
2. 設計規範說明（Guidelines） .................................................................... 13
2.1 共通性規範 (Overall Guidelines)......................................................... 14
2.1.1 瀏覽器與系統相容性規範 ......................................................................
2.1.2 螢幕解析度設定規範........................................................................... 15
2.1.3 最低使用者頻寬考慮規範 ......................................................................
2.1.4 W3C 網站標準（Web Standard）相容規範 ..........................................
2.1.5 其他網站使用性規範...............................................................................
2.2 設計要素共通性規範（Look & Feel）..................................................
2.2.1 網站名稱與識別標誌（Logo）應用規範 .............................................
2.2.2 網站色彩（含配置）計畫與應用規範 .................................................
2.2.3 網站字體應用規範（High level）..........................................................
2.2.4 網站之連結識別規範（High level）......................................................
2.2.5 網站之圖像設計與應用規範（High level）
2.3 網頁組成要素設計規範...........................................................................
2.3.1 必要要素 – 頁面寬度規範 ..................................................................
2.3.2 必要要素 – 頁面長度規範 ..................................................................
2.3.3 必要要素 – Top Toolbar 區域...............................................................
2.3.4 必要要素 – Logo 區域...........................................................................
1
Copyright © 2009 .知世網絡股份有限公司
- 4. 知世網絡
台灣大哥大網站規範
1. 前言
本文件是以能協助創造台灣大哥大所屬網站群之設計與使用經驗一致性為
前提，由知世網絡接受台灣台灣大哥大委託共同制訂的。其發展背景是由知世網
絡的相關專業團隊以台灣目前的網路環境（例如頻寬、設備）、使用者經驗暨現
況、以及各種國內外專家建議的網站使用性通則為基礎，並兼顧本次專案範疇及
其目標來進行規劃、編寫與彙整的。
需要特別注意的是，為能確保在台灣大哥大未來實際應用本規範上的效益與
彈性，本規範文件建議台灣大哥大內部未來可以進行持續性的維護與管理。相關
作法可參考本章第 4 節的更新與擴充程序建議，或配合台灣大哥大企業內的相關
流程與規定來進行。
1.1. 目標
如前言所述，本文件是作為設計應用規範 -- 以協助創造台灣大哥大所有網
站的使用者經驗一致性為前提，但其具體目標則可以進一步分別說明如下：
1. 使台哥大網站的品牌與使用者經驗更容易識別，且減低使用者在各個不
同網站間的學習與適應門檻。
2. 以共通性最高的必要性設計準則為基礎，並保留發展彈性。讓本文件在
未來面對各種環境與需求改變時，依然能由台哥大內部的專屬團隊按圖
索驥，來進行擴充與更新。
3. 以更有效率的方式設計符合使用者需要的網站，並使其更具親和力與使
用性。
4. 使台哥大網站更具相容性並盡量符合web standard 以提高搜尋引擎的友
，
善度外，也有助於維持網站設計品質。
5
Copyright © 2009 .知世網絡股份有限公司
- 5. 知世網絡
避免沒有其他出路的頁面設計（Dead-end Page）。
(以下略)
8
Copyright © 2009 .知世網絡股份有限公司
- 6. 知世網絡
1.2. 使用指引
由於規範文件的目的是希望能隨時提供設計者協助，以確保將來所完成的台
灣大哥大網站或網頁都能符合一致性原則。因此，雖然這些內容不是必須完全遵
守且不能改變的所謂設計標準（Design Standard），但明確定義要將它如何納入
台哥大平日的網站設計活動與流程裡，則是達成目的最重要的第一步。
因此本小節，將從未來台哥大可以如何在設計過程應用本文件提供建議，基
本上就像前一小節的章節關係示意圖所表示，本文件採取自概念層次到實際應用
這樣的架構來鋪成，因此當面對的設計問題或需求明確時，建議應先從第三章開
始，其第一個步驟就是尋找出最合適的版型來作為參考起點；然後再去對照該版
型上面的設計元素與第二章相關規範間的關係，以進行設計上必要的應用、擴充
或調整。
假如無法在第三章找到適當的參考版型時，則請設計者在進行新的設計規劃
時，務必要隨時對照第二章裡 – 仔細檢視那些與當下執行設計需求相關的要素
與規範，以確保最終成品能符合本規範所期達到的設計與使用者經驗一致性目
標。同時，第二章裡得每條規範（Guidelines）都有提供必要性等級指標，這個
資訊對於在進行設計評估或決策時，有很重要的參考性外，每個規範也會有針對
訂定這項規範的背景理由說明，以及如何應用該規範的實做案例參考，以加速應
用效率。
最後，當某些新的設計需求無法在現有規範文件裡找到，或現有的規範文件
內容明顯已無法滿足該需求時，就代表本文件可能需要進行適度的擴充或更新。
（不過這些需求的提出與滿足，仍必須在符合台哥大內部規章或本規範文件之擴
充程序來進行，相關流程建議可以參考下一個小節之敘述。）而在這個時候，本
文件第一章提供的目標與各種使用性設計通則就會是一個很好的參考資源與依
據。另外，每個新的版型或規範在提出或審核過程裡，不管是設計者、管理者或
9
Copyright © 2009 .知世網絡股份有限公司
- 8. 知世網絡
2. 設計規範說明（Guidelines）
本章的架構是以一般進行網站設計時需要考慮的設計面向為基礎，參照國
內外相關專家的研究建議，並配合本次專案之範疇與目標來制訂的。
這裡提供所有的設計原則與建議，並非針對任何特定網站、單元或頁面，因
此適用於台哥大所有網站參考。
另外，本章每一條規範的內容格式式，都包括了三個必要項目：
﹝必要等級﹞根據現況與國內外專家的研究建議 對這條規範重要性
，
指標提供建議，以便未來在應用上作為取捨的參考。
﹝規範理由﹞引用現況、專案目標與國內外專家的研究建議，說明這
條規範訂定的原因或目的，除了有助於在實際應用上對背景因素或脈絡多一
些瞭解與掌控外，未來在進行增修或異動時也可以作為必要的參考。
﹝實作說明﹞這個子項則是就這條規範本身提供具體的描述 某些規
，
範並提供必要的應用圖例猜考，以協助在實際應用的方便性與成效。
至於最後的﹝檢驗標準﹞則是配合某些規範的屬性需要，進一步提供的確認
程序建議，它本身並不是一個固定項目，所以不會出現在所有規範內容裡。
為能提升本規範的應用效益，我們建議在使用時，可以先參閱第一章第 3
小節的使用指引，以下也先就本章各小節預定提供之內容做個摘要說明：
1. 共通性規範：針對使用者環境與重要的網站使用性（Usability）、可及
性（Accessibilty）目標，提供了五條相關規範建議。
2. 設計要素共通性規範（Look & Feel）：以一致性為最重要的指導原則共
提供了包括了Logo、色彩、字體與影像等五條相關的設計規範。
3. 網頁組成要素設計規範：針對版面的共通性配置建議，提供了五條必
要、四條重要與五條輔助要素的規範。
13
Copyright © 2009 .知世網絡股份有限公司
- 9. 知世網絡
4. 導覽設計規範（Navigation）
：本小節則是就資訊架構（IA design）與瀏
覽介面的設計指標，提供了十條重要規範做為參考。
5. 網站字體應用規範：這個小節則是就網站或網頁裡各種不同文字屬性提
共更進一步的十條規範建議。
6. 表格與表單樣式規範：針對網站裡與表格或表單相關的設計，提供五條
規範建議。
7. 圖片與多媒體（Images and Multimedia）規範：本小節提供與網站內之
所有圖像、多媒體相關的五條重要規範建議。
8. 補充規範
2.1 共通性規範 (Overall Guidelines)
本小節主要是根據行政院研考會針對國內政府網站的管理規範建議：「網頁
設計應能符合至少九成使用者的裝置，以確保大多數使用者能正常瀏覽」來制訂
的。而在同時也在參考了國內外重要組織所提供的相關統計資料1發現（雖然實
際情況會因各國家與各企業的網站定位不同略有差異） 1)瀏覽器方面，目前 IE
：
與 Firefox 的加總佔有率約達 90%； 2)一般使用者的螢幕解析度設定則仍以
1024x768 的 33%為最高，然後依次 1280x800
（20.46%） 1280x1024
與 （12.12%）
。
過去主流的 800x600 目前已退居到<5%； 3)最後在台灣一般網路使用者的頻寬
方面，根據 98 年『台灣寬頻網路使用調查』報告顯示，台灣民眾除了寬頻上網
（66.47%）有上升趨勢外，行動上網（7.7%）也呈現小幅上升趨勢。
此外，除了參考上述的網路使用趨勢外，建議台灣大哥大也可依自身網站的
使用情況，透過「使用者數據分析」的內容，進行必要的調整與更新。
1
目前的使用者網路設備參考
(瀏覽器)http://www.w3counter.com/globalstats.php；
http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0
(解析度) http://marketshare.hitslink.com/report.aspx?qprid=17
14
Copyright © 2009 .知世網絡股份有限公司
- 10. 知世網絡
圖 2 台灣家庭連網方式趨勢圖
(以下略)
15
Copyright © 2009 .知世網絡股份有限公司
- 11. 知世網絡
2.1.1 螢幕解析度設定規範
﹝必要等級﹞所有 TWM 網站：必要。
﹝規範理由﹞
1024 * 768、1280 * 1024、800 *600 三種螢幕解析度使用率達 90%。使用者
設定的螢幕解析度雖以 1024 * 768 為最多，800*600 仍佔 17%的普及率，因此建
議宜考量符合 1024*768 並兼顧 800*600 螢幕解析度。
﹝實作說明﹞
基於 TWM 網站之整體設計調性與一致性的滿足，建議採固定式為主
（固定式網頁在小視窗中畫面會截斷，在大視窗中會呈現留白）。
設計固定式網頁時，網頁主要內容可設計在 800 像素寬度內，超出的則
為連至外站的按鈕或廣告看板等較次要的內容，讓網頁於 1024*768 螢
幕解析度下檢視網站，瀏覽器視窗不出現橫向捲軸；於 800*600 螢幕
解析度檢視，也可在不捲動橫向視窗時呈現到網頁主要內容。
設計時雖以 1024 * 768 為主要設計依據，但要考慮當使用者之螢幕解析
度高於該寬度時，瀏覽上的整體性與質感，不論採取置中或齊左的設
計都必須維持全站的一致性，並適度的應用設計技巧（例如背景）來
確保設計品質。
﹝檢驗標準﹞
務必同時測試在不同解析度搭配不同瀏覽器來確保所有頁面不會出現有重
要訊息截斷、不完整或者不必要之捲軸出現等問題。
(以下略)
16
Copyright © 2009 .知世網絡股份有限公司
