[UX/UI] 網站使用者經驗設計- 資訊架構(上課心得) - 小雕雕的家

通知我來上課這堂應該是第二堂，所以這篇就針對"資訊架構"的上課心得做個整理 ... 他長得會像下面這樣(老師給的教材範例之一). 小雕雕的家 跳到主文 這個要打什麼啊? 部落格全站分類：數位生活 相簿 部落格 留言 名片 歡迎轉載(註明出處)或直接轉貼網址也ok，但是請不要直接把內容摳走貼在別的地方~ Nov24Tue201523:33 [UX/UI]網站使用者經驗設計-資訊架構(上課心得) 一定要有的前言： 這篇是來記錄去上網站使用者經驗設計(也就是UX)的一些課後心得 其實這門課俺去年已經上過了，但是也都快還給老師了.... 所以這次打算記錄下來 我是在文化大學教育推廣部，上謝明權老師的課 老師人非常之好~~我去年有沒上到的課，居然今年還會通知我去補上! 有時有新的資訊也會mail跟大家分享，所以非常建議對UX有興趣的朋友可以去報名這堂課 通知我來上課這堂應該是第二堂，所以這篇就針對"資訊架構"的上課心得做個整理 最後強烈建議網站企劃、網頁設計人員去上有關UX的課 你會設計出令人感動的網站，而不是令人感慨的網站 ====================================================== 目錄： 一、資訊架構 二、內容清單 三、網站組織體系 1. 明確型組織體系 2. 模糊型組織體系 3. 層面分類法 四、網站組織結構 五、標籤系統 六、網站圖表 七、線框圖(WIREFRAME) 八、導覽系統 九、雛型設計 正文開始： 這篇要講的是有關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.主題分類 主題分類法一般以商品類型、服務名稱、類別....等來分類，幾乎一般商業網站都會使用 像下面這樣:  http://www.apple.com/ 分了mac、ipad、iphone.......等不同性質或平台的商品 TheNorthFace：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、層面分類法 層面分類是從多個面向去找尋資料，就像是一般網站的多維度搜尋 例如下面這個例子： http://www.sydney.com/events 左方可以根據不同面向去找尋所要的資料 再次複習一下一開始講的資訊架構，資訊架構涵蓋了 1.網站組織體系 2.網站組織結構 3.標籤系統 而以上講的就是資訊架構中的網站組織體系 (明確、模糊、層面) 再來看看資訊架構中的"網站組織結構" 二、網站組織結構 網站組織結構主要是描述你的網頁是用哪一種模式串起來的 主要分了三種： 1.線性型結構   就像購物車結帳的流程，就是屬於線型結構 2.階層型結構 大部分的網站都是屬於階層型結構，架構就像下圖 一般網站偏好淺寬式的階層設計，公司的組織圖也是這種階層型 3.網狀型結構 就像 Wikipedia 一樣，文章中看到哪個關鍵字點下去就又是另一個說明頁面，可以說是沒有所謂的首頁 一般商業型網站大多使用階層型+線性型，原因是網狀結構容易讓使用者迷路 而網狀型適合用在社群網站上 三、標籤系統 是一種表達形式，它的目的在於有效的溝通訊息和傳達意義 (講義裡面寫的) 標籤的用途是用來跟使用者溝通的，所以命名上就要有一致性 所謂的標籤系統就是指網站上面標籤的文字 ex: 關於我、公司簡介、首頁、產品分類，購物車.....這些字 所謂的一致性就是指，網站一個地方叫做購物車，另一個地方叫購物袋之類的 標籤命名則可以參考相同性質的網站 四、網站圖表 a.網站概念性圖表 在網站尚未建置之前用來組織網站各頁面的圖表，之後可以拿來轉成網站地圖 長得像這樣:  其實就是網站的階層圖啦! b.網站藍圖圖表 這個表是給工程師看的，長得像這樣 上面會有標明階層與頁面檔名+位置 繪製的方式可以用樹狀圖、梳狀圖、水平式地圖來畫 五、線框圖(WIREFRAME) 線框圖是一個網站的初步原稿，他應該清楚的表明  1.內容的大綱(What?) 2.訊息的結構(Where?) 3.描述最基本的使用者介面(How?) 線框圖通常被拿來當作網站專案的說明圖，因為是靜態的圖，所以無法拿來做測試 但他適合用來快速的收集回饋與意見，線框圖長得像這樣 圖有點小，那也沒辦法了~ 線框圖就是網站的原稿了，上面會標明了各項功能與功能的描述 透過線框圖，也可以了解使用者互動經驗行為 線框圖有分為 1.低精確度線框圖(隨便畫畫，單純說明頁面的圖) 2.高精確度線框圖(ex:上面那張圖) 3.功能性線框圖(只針對單一功能來做描述，例如描述加入購物車的運作方式) 六、導覽系統 網站的導覽系統可以告訴使用者 1.我在哪裡(ex:Breadcrumbs導覽路徑) 2.我還可以去哪裡(相關推薦) 3.我曾經去過哪裡(超連結點過會變色) 導覽系統的目的就是在幫助使用者找路，好的導覽系統可以幫助使用者暢遊你的網站 然後上課時有提到，"首頁"or網站logo對使用者而言是最好的逃生門 因為只要迷路了就可以按"首頁"或網站logo到網站首頁去了 導覽系統又分為以下幾種 1.全站導覽 2.區域導覽 3.頁尾導覽 4.相關性導覽 5.工具性導覽 6.輔助性導覽 用一張圖來解釋就是這樣 輔助性導覽的話上面的圖沒有列到，像是搜尋、Breadcrumbs、Sitemap都是屬於輔助性導覽 導覽系統的設計有這三點要注意： 1.要保持一致的風格 2.展現資訊階層的結構 3.提供建立情境的線索 七、雛型設計 雛型設計的目的有下面三個 1.快速測試導覽系統 2.使用者介面功能上的易用程度 3.節省日後開發時間和成本 低精確度的雛型設計可以直接用紙來畫，好處是開發成本低+可快速得到使用者的回饋 (缺點是在易用性測試會有限制) 高精確度的雛型設計就是指實際的網頁了，好處是互動性高，但開發成本也高 結束!沒有要補充的  謝謝辛苦的老師能讓我學到沒接觸過的東西 全站熱搜 創作者介紹 小雕 小雕雕的家 小雕發表在痞客邦留言(0)人氣() E-mail轉寄 全站分類：數位生活個人分類：UX/UI使用者經驗設計此分類下一篇：[UX/UI]電子商務網站的規劃與設計課後心得(一)-電子商務網站發展趨勢、線上購物行為模式、首頁與類別頁的規劃與設計 上一篇：HTML5驗證搭配Javascript在Chrome上可能遇到的錯誤(Aninvalidformcontrolwithname='xxxxx'isnotfocusable) 下一篇：[吃到飽]漢來海港自助餐-台北SOGO敦化店-無時間限制吃到飽初體驗(圖多請小心) ▲top 留言列表 發表留言 文章分類 CSS、ResponsiveWebDesign(2) CSS(3)ResponsiveWebDesign(5) JS、JQuery、Angular、React...(4) Javascript(18)React(4)jQuery(18)AngularJS(8) Facebook(14)ASP.Net(24)AndroidAPP推薦+小知識(11)Android相關開箱文(8)Android開發(10)SQL(9)PHP(1)Bootstrap(1)UX/UI使用者經驗設計(5)網站相關工具(3)網站分析(7)想要轉型成食記(17)想要轉型成遊記(19)想轉型成命理網站(5)生活類開箱文(8)心情(29) 最新文章 熱門文章 最新留言 我的連結 技術相關 ECMAScript6入門GoogleWebFundamentalsfiddler-檢查http封包內容工具HTML5FileAPIJavaScript本質部份CleanCodeJavascript(簡中版)jQuery寫作標準+好的實踐如何做到jQuery-free？React入门教程HTTPArchive 有趣 任天堂大亂鬥分享你的塗鴉~ 生活更美好 小雕雕的心靈道場小雕雕的命理練功坊 參觀人氣 本日人氣： 累積人氣： 回到頂端 回到頁首 回到主文 免費註冊 客服中心 痞客邦首頁 ©2003-2022PIXNET 關閉視窗