鄭涵方 Cara

ch6 導覽和資訊結構

鄭涵方 Cara

誰該決定網站結構 ?

• 目標使用者族群 ( 客戶 ) - p.170 line3

• 內部系統與外部網站差異？• 人員擁有共同組織結構

• 擁有共通語言

• 明確知道使用的目的

p.168~p.173

誰該決定網站結構 ?誰該決定網站結構 ?

• 圖片表達

• 分類方法 - 揪竟要以公司方向為主 ? 還是預設客戶思考方式 ? p.171,p.172

• 謹慎使用文字 - 導覽列以及引導文字需要簡單且明確p.173

• 名稱可採用關鍵字等簡短有描述性的語言 p.173

參考書目 : Don’t Make Me Think Ch6-2

p.171~p.173

• 讀書習慣 - • 頁碼永遠在同一個位置• 目錄一定在前 20 頁裡• 資訊書籍書末會有索引• 目錄的項目一定跟進去頁面後的標題一致

導覽的一致性導覽的一致性

避免花俏的導覽 - http://www.retec-duplex.co.jp/

避免模糊不清的導覽方式 - http://ba.chinesegamer.net/index.asp

p.175~p.184

導覽列須知導覽列須知

• 優雅的操作方式 - 明確的連結顯示 , 避免掃雷式索引 p.184

• 重點性連結放大 - 重要連結在一個頁面上比例放大 > 同時放多個連結 p.185

• 避免重複的連結內容於同一個頁面中 p.186

• 導覽一個就很剛好了 ! ( 同樣內容的導覽列不需要有一個以上的視覺表現 ) p.187

p.184~p.197

• 文字的使用 - 連結與標籤名字的明確 - 可透過關鍵字或是資訊內容為開頭 ex: Bath&Body Works p.188~p.190

• 採用描述式的語言當作連結名稱 p.191

• Q. Learn more... , more... or ... p.193

• 規範十二 . 提供內容導引資訊（收錄於無障礙網頁條例）

導覽列須知導覽列須知p.188~p.197

• HONDA 第一版 - 型號導覽

• HONDA 第二版 - 型號 + 文字車型導覽

• HONDA 第三版 - 型號 + 車型圖片 + 金額導覽

• Ford Moter - 文字車型 + 車型 icon 導覽

導覽列須知導覽列須知

Q. Cara think - 3>4>2>1 你呢 ?

p.185~p.197

• 垂直下拉式 - • 當一個網站有兩層以上的結構時可以採用• 每層大約 8~10 個項目• 當你想要在頁面上使用隱喻式如一般桌面右鍵功能或著是開始鍵會顯示更多項目時• Do not use when there is a need to single out the location of the current section of the site.

Then use the Navigation Tabs. - http://ui-patterns.com/pattern/VerticalDropdownMenu

• 水平飛出式功能表• 同上 - http://ui-patterns.com/pattern/HorizontalDropdownMenu

• 請盡量思考第二層甚至第三層時將會出現的位置 ( 水平 > 對角線 )

功能表功能表p.198~p.200

• 藍色系• 底線• 粗體• 突起物 / 按鈕式• 高亮度文字或是圖形• 游標的樣式• hover 樣式 - 非連結項目請避免使用這種視覺效果• 一個網站三種以內的連結樣式

連結的隱喻連結的隱喻p.201

預設用途預設用途

參考書目 : The Psychology of Everyday Things p.128

p.201

ch7 字體設計中的易讀性和易辨認性

虛構文字虛構文字p.201

• 10pt ( 用百分比更好 p.221)• 對比性高的背景與文字 (ex:白底黑字 ) p.211•少用 -

• 移動文字 (跑馬燈 )

• 全部大寫文字 ( 會將閱讀速度降約 10%) p.232

• 圖形文字 ( 下載速度慢 / 無法正常放大縮小 / 無法使用搜尋工具 / 無法選擇 ) p.240

•畫面保留空氣感！（擁擠的畫面容易產生疲倦以及壓迫性）p.213

•空氣感不等同於讓空白加大字體更小的逆向操作 ! p.213

字體原則字體原則p.210~p.215

•依照 ...• 使用者族群 • 資訊結構 ex: h1, h2, h3, h4....p

• 頁面重要性 ex: 使用條款 (小 ), 頁面標題 ( 大 ), 頁面次標題 ( 中 ), 內容 (正常 )

如何決定畫面上的文字大小 ?如何決定畫面上的文字大小 ?p.215

• 避免使用反鋸齒技術 p.216• 不同字體尺寸的注意 p.218• 使用者瀏覽頁面的環境 p.217• 使用者硬體差別 p.219

• 請採用一般解析度的思考 1024x768

• 網站文字盡量不要超過四種顏色和三種字體 (聚焦模糊 ,缺乏專業感 ) p.229

•注意文字與背景的對比 ( 對比越高越容易閱讀 ) p.235

使用文字上的注意事項使用文字上的注意事項p.216~p.225

規範二 .

不要單獨靠色彩來提供特殊資訊 (除了顏色作為頁面的結構區分外 , 文字大小 ex: h1~h6)

確保前景顏色與背景顏色彼此呈現明顯的對比

規範七 .

螢幕閃爍或是快速移動，對於一些對光過敏的使用者而言，容易引起視覺上的不適，所以 應該避免在網頁上設計螢幕閃爍或是快速移動的效果 (跑馬燈 , 閃爍的按鈕或文字 )

無障礙設計無障礙設計

• http://www.webguide.nat.gov.tw/wSite/public/Attachment/f1243501591679.doc

p.220

• 是否能夠解決技術障礙？ ( 開發時程及簡化介面 ) p.222•若要放置 ,Icon 是否恰當合宜？ (ex: A A A 按鈕 )• 預設的字體以及尺寸是否經過挑選及測試？

調整字體大小的功能存在與否 ?調整字體大小的功能存在與否 ?p.222~p.

225

Arial

Comic Sans MS

Georgia

Verdana

Trebuchet MS

Times New Roman

Impact

p.226~p.227