一定要有的前言：
這篇是來記錄去上網站使用者經驗設計 (也就是 UX) 的一些課後心得
其實這門課俺去年已經上過了，但是也都快還給老師了....
所以這次打算記錄下來
我是在文化大學教育推廣部，上謝明權老師的課
老師人非常之好~~我去年有沒上到的課，居然今年還會通知我去補上!
有時有新的資訊也會 mail 跟大家分享，所以非常建議對 UX 有興趣的朋友可以去報名這堂課
通知我來上課這堂應該是第二堂，所以這篇就針對"資訊架構"的上課心得做個整理
最後 強烈建議網站企劃、網頁設計人員去上有關 UX 的課
你會設計出令人感動的網站，而不是令人感慨的網站
======================================================
目錄：
一、資訊架構
二、內容清單
三、網站組織體系
1. 明確型組織體系
2. 模糊型組織體系
3. 層面分類法
四、網站組織結構
五、標籤系統
六、網站圖表
八、導覽系統
九、雛型設計
正文開始：
這篇要講的是有關 UX 的 資訊架構，好的資訊架構可以幫助使用者快速找到他要的內容
而資訊的架構決定了網站組織資訊的方式、設計的結構與標籤歸類
(就是你的網站分類方式、設計成以什麼為導向)
一般網站從設計到完成大概會經過如下面的步驟
相信很多公司都是直接省略.....一些步驟，或是根本重頭到尾都是一個人在處理 (沒有資訊架構師)
而這堂課所說的資訊架構，就是在講黃色區塊 + 紅色圈圈的部分
在規劃網站資訊架構之前，首先要了解一些相關知識，了解一下你的網站要朝哪個方向設計
網站的設計主要分成兩種
1. 主動式邀約設計
首頁主動陳列商品，吸引顧客點入瀏覽或購買，就像一般的購物型網站首頁一樣
2. 被動式邀約設計
頁面上只提供了功能連結，必須要點入連結才能得知大部分的網站資訊
被動式邀約的網站已經越來越少了，例如這個踢不爛的網站就是屬於被動式的邀約設計
http://responsibility.timberland.com/
原因在於它並沒有做陳列商品的動作，首頁只放了跟這公司有相關的資訊
雖然有個標籤叫 Product 但是必須要點進去看才會知道葫蘆裡賣什麼膏藥
行動版網站則是盡量使用主動式的邀約設計
資訊架構
前面有提到，資訊的架構決定了網站組織資訊的方式、設計的結構與標籤歸類
由上面這段話可知，整個網站的資訊架構至少涵蓋了
1. 網站組織體系
2. 網站組織結構
3. 標籤系統
除此之外資訊架構中還包含了
4. 網站圖表 (網站概念性圖表、網站藍圖)
5. 線框圖
6. 導覽系統
7. 雛型設計
(以上只看名詞不知道是幹嘛的很正常，底下才會講到)
1 + 2 合起來被稱為組織系統，而在進行組織系統的建立之前，必須要先建立內容清單
內容清單
內容清單是幹嘛的呢? 一般公司如我們壓根沒看過這東西啊 哈哈哈 (悲)
一般在製作網站，或是規劃網站改版前都必須要製作一份內容清單
內容清單是用來檢查網站是否有過時的功能需要移除，或是有新功能需要增加
可以用來檢視自己網站的功能，方便於日後的管理
他長得會像下面這樣 (老師給的教材範例之一)
一般而言都是利用excel 來整理的，編號的方式可以使用樹狀的結構來做編碼
製作完內容清單之後，再來看看組織系統的網站組織體系
一、網站組織體系
網站組織體系分為三種：
1、 明確型組織體系 (屬於資料分類)
2、 模糊型組織體系 (屬於客觀分類)
3、 層面分類法
1、明確型組織體系
首先看看明確型組織體系是怎麼分類的~
明確型代表 使用者已經很清楚知道自己想找什麼
例如：找台北、基隆某地點資訊，找特定日期、品牌名稱
因此明確型組織體系可以分為下面三種：
1. 筆劃 / 字母
按照字的筆劃或英文字母來檢索，像是下面這個網站
http://www.abb.com.tw/ProductGuide/Alphabetical.as...
這個頁面就是屬於明確型組織體系的一種
TED 這個頁面也是 : http://www.ted.com/people/speakers?sort=first
2. 時間
依照時間別來做分類，像是下面這個網站
http://tenplay.com.au/tv-guide
3. 地理位置
按照地理位置來分類，像中央氣象局的天氣預報
http://www.cwb.gov.tw/V7/forecast/index2.htm
2、模糊型組織體系
模糊型的組織體系分為以下三種 (主題、使用者、任務)
1. 主題分類
主題分類法一般以商品類型、服務名稱、類別....等來分類，幾乎一般商業網站都會使用
像下面這樣 :
The North Face：http://thenorthface.com.tw/zh-tw
分了男裝、女裝、童裝...等
2. 使用者分類
像玉山國家公園的網站 : http://www.ysnp.gov.tw/index.aspx
有分為一般遊客、登山山友、玉山志工....等
用使用者的身分來做分類，但這種分類有一個壞處
如果使用者對自己的身分搞不清楚，反而會造成混淆
例如：我覺得我是登山山友，也是一般遊客，就會不知道要點哪邊進去
3. 任務分類
ex : 辦信用卡、找醫生......之類的
http://www.commonhealth.com.tw/medical/index.actio...
3、層面分類法
層面分類是從多個面向去找尋資料，就像是一般網站的多維度搜尋
例如下面這個例子：
左方可以根據不同面向去找尋所要的資料
再次複習一下一開始講的資訊架構，資訊架構涵蓋了
1. 網站組織體系
2. 網站組織結構
3. 標籤系統
而以上講的就是資訊架構中的網站組織體系 (明確、模糊、層面)
再來看看資訊架構中的 "網站組織結構"
二、網站組織結構
網站組織結構主要是描述你的網頁是用哪一種模式串起來的
主要分了三種：
1. 線性型結構
就像購物車結帳的流程，就是屬於線型結構
2. 階層型結構
大部分的網站都是屬於階層型結構，架構就像下圖
一般網站偏好淺寬式的階層設計，公司的組織圖也是這種階層型
3. 網狀型結構
就像 Wikipedia 一樣，文章中看到哪個關鍵字點下去就又是另一個說明頁面，可以說是沒有所謂的首頁
一般商業型網站大多使用階層型 + 線性型，原因是網狀結構容易讓使用者迷路
而網狀型適合用在社群網站上
三、標籤系統
是一種表達形式，它的目的在於有效的溝通訊息和傳達意義 (講義裡面寫的)
標籤的用途是用來跟使用者溝通的，所以命名上就要有一致性
所謂的標籤系統就是指網站上面標籤的文字
ex : 關於我、公司簡介、首頁、產品分類，購物車.....這些字
所謂的一致性就是指，網站一個地方叫做購物車，另一個地方叫購物袋之類的
標籤命名則可以參考相同性質的網站
四、網站圖表
a. 網站概念性圖表
在網站尚未建置之前用來組織網站各頁面的圖表，之後可以拿來轉成網站地圖
長得像這樣 :
其實就是網站的階層圖啦!
b. 網站藍圖圖表
這個表是給工程師看的，長得像這樣
上面會有標明階層與頁面檔名 + 位置
繪製的方式可以用樹狀圖、梳狀圖、水平式地圖來畫
五、線框圖 (WIREFRAME)
線框圖是一個網站的初步原稿，他應該清楚的表明
線框圖通常被拿來當作網站專案的說明圖，因為是靜態的圖，所以無法拿來做測試
但他適合用來快速的收集回饋與意見，線框圖長得像這樣
圖有點小，那也沒辦法了~
線框圖就是網站的原稿了，上面會標明了各項功能與功能的描述
線框圖有分為
1. 低精確度線框圖 (隨便畫畫，單純說明頁面的圖)
2. 高精確度線框圖 (ex: 上面那張圖)
3. 功能性線框圖 (只針對單一功能來做描述，例如描述加入購物車的運作方式)
六、導覽系統
網站的導覽系統可以告訴使用者
1. 我在哪裡 (ex: Breadcrumbs 導覽路徑)
2. 我還可以去哪裡 (相關推薦)
3. 我曾經去過哪裡 (超連結點過會變色)
導覽系統的目的就是在幫助使用者找路，好的導覽系統可以幫助使用者暢遊你的網站
然後上課時有提到，"首頁" or 網站 logo 對使用者而言是最好的逃生門
因為只要迷路了就可以按"首頁" 或網站 logo 到網站首頁去了
導覽系統又分為以下幾種
1. 全站導覽
2. 區域導覽
3. 頁尾導覽
4. 相關性導覽
5. 工具性導覽
6. 輔助性導覽
用一張圖來解釋就是這樣
輔助性導覽的話上面的圖沒有列到，像是搜尋、Breadcrumbs、Sitemap 都是屬於輔助性導覽
導覽系統的設計有這三點要注意：
七、雛型設計
雛型設計的目的有下面三個
低精確度的雛型設計可以直接用紙來畫，好處是開發成本低 + 可快速得到使用者的回饋
(缺點是在易用性測試會有限制)
高精確度的雛型設計就是指實際的網頁了，好處是互動性高，但開發成本也高
結束! 沒有要補充的
謝謝辛苦的老師能讓我學到沒接觸過的東西
留言列表
CSS、Responsive Web Design (2)