LINE
Information Architecture as an Extension of Web Design
把資訊架構學當作是網頁設計的一種衍伸
分格線
資訊架構設計師和網頁開發者總是一昧的想要定義對方工作上的定位, 他們總是持續的把互相職責給推擠到一個小盒子裡.
相反的, 很多網頁設計師並不清楚資訊架構在網頁設計裡面所扮演的角色.
設計師常會認為資訊結構這一回事只是一些人把所有的東西給分類組織好, 反之, 資訊架構設計師們也常會低估了網頁設計師在專案裡面所扮演的腳色, 她們認為當她們把網站的規格制定了出來之後, 設計師們就應該把程式給寫出來.
其中之一的後果即是造成雙方的誤解. 結構設計師致力於組織, 資訊結構化, 和制定規格; 網頁設計師則是被引導著讓她們只能一直作她們一向擅長的設計工作而必須將資訊結構這檔事留給結構設計師. 但是實際上卻不一定總是這樣的.
事實上所有網際網路上的資訊結構學是不可能一天之前學會的, 但是也有很多資訊結構的技巧是網頁設計師們可以輕鬆學會而且應用到工作上的. 可以把資訊結構當成是網頁設計的一種延伸.
這個觀點上來看能讓你佔有很多優勢
- 它能夠完全消除了 - "我們與他們" 這一種工作思想上的隔閡, 也打破本來墨守成規的一些想法
- 它並不是在雙方所扮演的腳色上制定了一條分界線, 而是把各別的工作角色上當成是一種延伸
- 這個想法上網頁設計師們能夠更了解資訊結構這一回事
- 也讓網頁設計師們能夠輕鬆的扮演資訊結構師的角色
為了要實踐這個想法, 我們必須將三個最基本的網頁開發元素 ( 使用介面, 版面設計, 程式 ), 延伸到資料結構的範疇
使用介面
嗯...我們先從使用者介面開始, 這一向也是我們最喜愛也最討厭的網頁設計元素之一.
當一個單獨的頁面被新增到網站裡面的時候, 設計師們總是無法拒絕一種念頭 - 就是馬上把這個頁面分類到她們認知裡認為理所當然的網站分類裡...
但是問題是...當然你們應該早知道了, 同樣的頁面, 網站瀏覽者卻不一定總是跟設計師一樣有同樣的觀感, 或是根本不知道她們正在瀏覽的頁面是否就是她們想要的.
作為一個初步練習, 為了開發一個使用者介面結構, 你可以將頁面群組化, 並將它們分類在各個類別. 但是在這個練習之後你應該邀請一些潛在的使用者作一些卡片的排序.
這個卡片的排序的作用在於去了解其他們怎麼去分類東西還有她們如何替這些類別命名.
只要跟著以下這些簡單的步驟
- 在各別的紙上寫下你所有頁面的名稱
- 要求這些參加者依照她們的感覺去分類 - 當然, 如果需要的話, 她們也可以自己建立子目錄
- 要求這些參加者替這些分類命名
當你進行了幾次測驗之後, 一些分類模式將會被整合並明朗化, 這將會幫助你去建立一個最適合的分類方案.
接下來則是我們要怎麼將這些測驗作延伸?
當你知道了這個網站將包含怎樣的資訊及內容之後, 再替你的將要設計的網站與內容替使用者作一個 Brief 然後再與一些使用者進行最後幾次的交叉測試.
最後, 你將會得到一個資訊結構上稱為 "類別", 以及 "階層性, 有組織的分類計畫" 的訊息.
之後, 當你在為你的網站設計導覽系統或是網站結構圖的時候, 你將發現這些資訊相當的有價值.
版面設計
接下來, 我們來談一談版面設計吧, 長久以來這都是網頁設計非常重要的一環, 突出的版面設計讓設計師們越來越習慣於在 Photoshop 裡面進行網頁的頁面設計. 但是對於那些國際性且有大量且多樣網頁使用者需求的網站, 網頁設計師們就不能只是替網站設計一個頁面出來, 相反的她們還必須先規劃出一個網站的框架 (WireFrame) 出來.網站框架透過一種灰階(黑白)的塊狀圖, 詳細標示出各種階層的頁面資訊以及內容, 像是文字框, 圖片, 選單的位置. 聽起來很像是先用 Photoshop 將頁面給畫出來, 但是這個階段注重的是資料的結構而不是視覺的設計.
這對於與客戶審核資訊及內容來說, 卻是很重要的工具.
以下是我們如何執行這個階段
在你使用 Photoshop 設計頁面之前, 你可以先使用一些軟體如 Visio, OmniGraffle 去將網站框架給畫出來, 你會發現...在你替網站決定用哪些顏色之前, 這些過程讓你對於網站的內容分析有更進一步的了解.所以你現在有了使用者介面(Navigation)跟網站架構圖(SiteMap),當然,再經過幾次使用者調查以及執行之後, 你應該也已經有了網頁的版面設計以及視覺設計.
已經大功告成了嗎, 當然還沒, 我們還沒開始建置網頁.
程式
是的, 我們已經到了程式開發的這個階段, 那資料結構和這個階段又有什麼關係呢? Well...如果你是精通於網頁標準化的開發者, 這裡可就大有關係了.
身為一個精通於網頁標準化的網頁開發者, 你必須要知道如何去開發符合 W3C HTML/ XHTML/ CSS 標準的網站, 你當然也必須知道 HTML 語法上的結構, 比如說, h1 是用在內文標題 (Heading)上, P 適用於文章的段落 (Paragraphs); 你當然也懂得這些語法再開發過程中的層級, 如何將 HTML 及 CSS 整合應用到視覺設計. 但是你可能不知道的是, 當你應用到了這些所謂工作上的知識的時候, 你的思考已經像個資訊架構設計師了.標準化網頁的開發過程可以幫助資訊結構以及視覺設計的工作流程. 透過以下這三個方法
- 讓你的網站架構的命名可相容並應用於 CSS.
- CSS 標籤的命名應該是有意義的名稱而不應該只是數字
- 接下來你應該替你的語法結構的命名依照 "文章內容" 有意義的次序排列, (如 h1, h2, h3....h6, 比如說 h3 標題的重要性應該比 h1 還要低)
- 最後, 你需要列出所有在網站裡的標籤元素, 這樣可以找出不同頁面但是卻共用相同元素標籤之間的關係, 這樣你將可以重複使用這些元素.
以上, 在你開始要開發網站並寫下你第一個 tag 之前, 先利用上面的這些方法去定義她們. 透過這些步驟, 你將可以將資料結構化帶進你的開發流程裡. 也可以讓你在整個設計團隊裡有著更好的溝通, 更完善的工作流程.
如我以上所提到著這些, 我想, 介於網頁設計/ 網頁程式 以及資料結構這中間的隔閡並不需要總是那麼清楚. 每個層級的網頁開發者總是有很多機會可以把資料結構化的精神帶進每一個專案裡. 當然, 隨著網站更加的複雜以及多元化, 資料結構所扮演的的角色已經是越來越重要了.
分格線