設計師於新創產業生存指南: 資訊架構思考| by Erik Chen | Tenten

Responses (1) · 把資訊架構當作是設計的一部分 · 了解IA 的思考能讓設計師佔有很多優勢 · 為了要實踐這些想法，我們可將三個基本的網頁開發元素: UI 使用介面/ Layout 版面 ... OpeninappHomeNotificationsListsStoriesWritePublishedinTenten|數位轉型與創新視覺設計師轉型UI/UX設計師第一步:學習資訊架構的思考把資訊架構當作是設計的一部分資訊架構師和設計師與開發者們總是對於彼此的工作有著狹隘的認知，持續的把相互的職責都推擠到一個小盒子裡。

舉例來說，很多設計師並不清楚資訊架構在網頁或UI設計裡應扮演的角色。

設計師也常認為所謂的資訊結構只是把所有的資訊給分類組織好即可，反之，資訊架構師也常會低估設計師在專案裡面所扮演的腳色，總認為當他們把網站的資訊架構制定出來之後，設計師裡所當然的可以很容易的將UI給設計出來。

這樣的想法往往會造成雙方合作上的誤解。

資訊架構師致力於組織，資訊結構化和制定規格;網頁設計師則是被引導著讓他們只能作自己擅長的設計工作而不需參與IAProcess了解整個網站架構，只需把資訊架構這檔事留給架構師即可。

但實際上我們認為不一定只有這樣的可能性。

現實的情況是，現今互聯網上的資訊架構(IA)思考是不可能一天之前學會的，但也有很多資訊結構的技巧是設計師們可以輕鬆學會並應用到工作上。

設計師們只需把資訊結構當成是設計發想過程的一部分，一種不同於視覺思考的延伸。

設計不只是視覺裝飾或只是設計出漂亮的UI，在転転我們認為設計師應該有著更高的使命，設計師應該要尊重設計發想的過程，Designisallaboutsolvingproblems—設計的使命是解決問題，而不在於視覺的裝飾。

了解IA的思考能讓設計師佔有很多優勢它能夠完全消除了—“我們與他們”這一種工作思想上的隔閡,也打破本來墨守成規的一些想法，讓設計師們更能thinkoutofthebox。

資訊架構並不僅只是在雙方所扮演的腳色上制定了一條分界線，而是把各自的工作角色上當成是一種延伸，相互合作輔助這個作法讓設計師們能夠更了解資訊架構是怎麼一回事讓網頁設計師們也能夠輕鬆的扮演資訊架構師從專案的一開始及參與去發想了解整個網站架構，同時也能幫助你綜觀全局，避免設計思考的盲點。

為了要實踐這些想法，我們可將三個基本的網頁開發元素:UI使用介面/Layout版面設計/Programming程式—介紹如何導入資訊架構的思考。

網站構成三個基本元素:UI使用介面/Layout版面設計/Programming程式UI使用者介面當一個單獨的頁面被新增到網站的當下，設計師們總是無法拒絕馬上將這個頁面分類到她們認知裡認為理所當然的網站分類裡(sitemap)。

但問題來了。

Well…你們應該也能夠理解，即使是一樣的頁面，但網站瀏覽者卻不一定跟設計師有一樣的觀感，很多時候使用者們根本不知道他們正在瀏覽的頁面是否就是她們想要的。

所以在網站製作的初期，為了開發一個使用者介面結構，你可以將頁面群組化，替這些繁瑣的資訊定義類別，並將它們分類在各個類別裡。

在這個過程你可以邀請一些潛在的使用者(如非專案相關人員或開發者—你的家人/朋友之類的)，邀請他們作卡片排序(Cardsorting)。

卡片排序讓我們更深入的去了解其他人對於這些資訊分類以及個別分類命名的認知。

透過Cardsorting你往往會得到令你意想不到的有趣答案CardSortingcanverywellperformwithvolunteersfromtheaudience(Flickr:BenSortingCards|vonDannyHope,CCBY)卡片排序其實很簡單，只要跟著以下簡單的步驟做即可在各別的紙上寫下所有頁面的名稱要求這些參加者依照她們的感覺去分類—當然,如果需要的話,她們也可以自由的建立子目錄要求這些參加者替分類命名當進行了幾次測驗與IA/UX/Designer專家一討論之後，一些分類模式將會透過這樣的過程被整合並明朗化，幫助你建立一個最適合的分類方案。

接下來我們要如何定義這些測驗所得到的答案?當我們從使用者身上得到了最初步的卡片測試答案之後，我們再將這個網站的整體內容替使用者作簡單的描述與解說，最後再讓使用者進行幾次的交叉測試。

最後，我們將可以整理出一個資訊結構上稱為“類別”以及“階層性，有組織”的分類計畫。

日後，當我們在替網站設計導覽系統(Navigation)或是網站結構圖(SiteMap)的時候，將會發現這些資訊相當的實用，也讓你不再有霧裡看花猜測使用者心態的臆測。

EVERRICH.COM—昇恆昌免稅品購物電商(跨裝置的使用者體驗)Layout版面設計這是網站製作相當重要的一個環節，因為一個設計突出/搶眼/與眾不同的版面能夠很容易的讓你的網站脫穎而出。

不過這個想法卻也會讓設計師們越來越習慣於在繪圖軟體裡(如Photoshop/Sketch/illustrator/inDesign…等)直接執行網站的頁面設計。

但對於那些大型的網站架構，有複雜的互動與操作，或含有大量資訊且多種網頁使用者需求(TA)的網站，設計師們就不能只是直接替網站設計出一個版面。

反之，設計師或使用者經驗規劃師必須先擬出網站的框架(WireFrame)。

透過簡單的網站框架(往往是灰階/黑白的線框圖)，同時也詳細標示出各種階層的頁面資訊以及內容，像是文字框，圖片，選單的位置等。

聽起來感覺很像是用類似Photoshop的繪圖工具將頁面給畫出來，但其實不然，這個階段注重的只是資料的結構而非視覺的設計。

Wireframe對於需要跟客戶/團隊審核資訊與內容來說，是非常重要的工具Axure/OmniGraffle/Balsamiq如何製作網站框架圖(Wireframing)?在使用illustrator,inDesign,Sketch與Photoshop設計網站之前,我們可以先使用一些軟體如Visio,OmniGraffle,Axure,Balsamiq，或萬用的筆紙將網站框架畫出來，你會發現…在設計師決定網站要使用哪個他喜愛的顏色之前，這些過程讓你對於網站內容分析能有更進一步的了解，當然啦，設計師怎麼有辦法設計出他尚未完全理解的資訊呢?到了這個階段已經有了構成網站的兩大基本元素“使用者介面(UI)”跟“網站架構圖(Sitemap)”，當然，再經過幾次使用者調查及訪談之後，透過這樣的反覆設計方法，網站的版面設計及視覺設計應該已經慢慢在設計師的腦海裡成形。

已經大功告成了嗎,當然還沒,我們還沒開始建置網頁呢程式開發終於到了開發的階段，那資訊架構和這個階段有什麼關係呢?不要以為我們看起來都像設計師。

其實在転転，我們具有Maker/Hacker的DNA。

我們可是極度注重程式開發呢。

對於精通於網頁標準化(WebStandard)的開發者來說，IA對於我們的開發流程有著密不可分的關係。

在這裡不管是PM/UX/Designer/Developer/Programmer都精通HTML5與CSS3(HTML是転転人的共通語言)，我們的內部文件都是由Markdown構成。

你必須要知道如何開發符合W3CHTML/XHTML/CSS標準的網站,當然也必須清楚了解HTML語法上的結構，比如說,h1是用在內文標題(Heading)上，P適用於文章的段落(Paragraphs)…諸如此類;必須了解這些標記語法在資訊架構中的層級，如何將HTML,CSS整合應用到視覺設計上。

其實在開發過程中導入運用到這些相關知識的同時，身為開發者的你也已運用資訊架構設計師的思維了。

透過以下這三個符合網頁標準化的開發流程，可讓資訊結構及視覺設計有更高度的整合網站架構的命名可相容並應用於CSSCSS標籤的命名應該是有意義的名稱而不應該只是數字HTML標籤(HTMLTAG)的命名依照“文章內容”有意義的次序排列(如h1,h2,h3….h6，比如說h3標題的重要性應該比h1還要低)最後，列出網站裡所有的標籤元素,這樣可以找出不同頁面但是卻共用相同元素標籤之間的關係，讓我們可以重複使用這些元素以上，當要開始網站製作並寫下第一個tag之前,先利用上面的這些方法去定義網站資訊，將資訊架構帶進網站開發流程裡。

這樣可讓整個製作團隊有著更好的溝通，更完善的工作流程，Becauseyouarespeakingthesamelanguage!。

資訊架構可視為介於網頁設計/前端開發/程式開發中間共通的橋樑，讓專案溝通更暢行無阻。

遠傳電信新生活APP—転転替遠傳電信設計的電信用戶實戰經驗:網頁設計與IA提到網站製作的溝通與工具。

相較於國外嚴謹IA/UX的process，從Cardsorting/Taxonomy/Prototyping/UserTest/ABTest/Persona…等。

在台灣實在是很難完全實踐於專案當中(主要是來自預算,客戶與各層級專案人員的認知，等因素…)當然，在台灣最常會遇到情況往往是因為預算的考量變成只剩下Define->Prototyping->Design->WebDevelopment。

因此，這時prototype就變成與客戶在專案溝通初期極為重要的工具。

以転転剛成立時執行的幾個小型網站項目舉例，因為我同時兼具UX/IA/Designer/Developer身分的關係，所以我會先用Mindmeister(MindMapping的軟體)先將網站的資訊/功能分類好與客戶確認後，再直接使用illustrator/sketch將prototype跟Layout一起執行(因為illustrator/sketch在資訊大規模的調整，排版上會比photoshop方便許多)，客戶第一次看到的prototype即是相當擬真的網站Layout。

省略到許多中間IA確認，與Developer確認的流程。

當然這不是最專業的作法，但基於預算的拉鋸與考量，這也是設計師有IA思維並成功執行出專案的實踐。

而目前転転團隊執行的較多是大規模且複雜的軟體開發/企業網站/電商/App項目為主。

所以目前的Workflow則必須是有完整的UX/IA/UI/VisualDesign/FrontEnddevelopment/Programmingdevelopment團隊與流程參與項目開發完成，日後有機會的話我會再分享實際執行大型專案及如何導入類似國外專業的IA/UX的方法與流程。

由於筆者的主修是資訊工程，但有將近2/3的職業生涯工作內容都是從事設計為主(品牌設計/包裝/網站設計/編排設計/UI設計..etc)，所以能深刻了解IA的重要性，也能夠體會設計師總是想先從設計上創新，創意角度(Bedifferent)去思考執行網站設計的原因，而過去，筆者隸屬前公司的UE(UserExperience)部門，一直以來的目標就是以實踐IA/UX為目標，但在網站製作上卻又常常跟公司內創意部的設計師想法衝突讓我很挫折，他們總是只專注在客戶提案與視覺裝飾但卻往往忽略IA理性思考的重要性。

事後總是讓我思考是否有更好/更睿智的工作流程?經營転転這10+年下來，建立類似新創公司的工作流程與團隊，並協助客戶打造產品/官網。

驗證自己對於NewDigitalAgencyBusinessModel的想法。

而這些IA(資訊架構)的思考即是讓我們這僅僅只有25個人的小團隊，能夠順利打造出這些企業級的大型專案背後的主因。

企業官網:Vanmoof,ambahotels,國賓大飯店,Moxa,台灣橡膠TSRC,LaWeekly,永光化學,中華電信MOD,TPK宸鴻光電,欣陸投控ContinentalHoldingsFintech金融科技/區塊鏈創新:ESUn玉山銀行,KVB昆仑国际环球资本集团,Orsus,KronosToken電商網站:Everrich,Vanmoof,SparkProtein,Topeak,Teamson,綠藤生機GreenvinesApp/產品設計:FETFriday購物,FET遠傳App,KVBApp也因為這些成功的專案項目也讓我們決定投入更多資源於新創產業。

而將這篇粗淺的心得重新整理分享出來，主要是希望能鼓勵設計師在網站執行的初期就先從更高的角度IA/UX去思考，綜觀全局。

了解分析整個專案的資訊內容之後再去發想整個網站資訊設計(InformationDesign)與使用者介面(UI)的可能性，進而去deliver更好的使用者經驗。

筆者ErikChen現為転転的ManagingDirector，想了解我們如何用IA/UX思考替企業建立數位品牌形象或打造新創服務可到tenten.co。

Promo你是UIDesigner或是iOSDeveloper嗎?転転現在正在尋找新血加入我們的團隊，想和我們一起打造服務或產品嗎?請參考以下網址:https://careers.tenten.co/已經是創業團隊的一份子?或許你會對我們的新創孵化器有興趣?仍是學生?如果你對於技術或設計充滿熱血及想脫離舒適圈挑戰自己的話。

何不考慮來転転實習?喜愛我們的文章與作品?我們的Facebook會更頻繁的更新產業資訊讓你跟外國的新創與最新的開發技術接軌。

--1MorefromTenten|數位轉型與創新FollowAdigitalagencyusingtechnologyanddatatohelpleadingcompaniesgrowandscaletheirbusiness.Tenten是間使用技術和數據幫助客戶打造產品與成長策略的機構，幫助企業與新創公司發展和擴大其業務ReadmorefromTenten|數位轉型與創新AboutHelpTermsPrivacyGettheMediumappGetstartedErikChen823FollowersFounderofDigitalProductStudio—Tenten(Tenten.co)/SparkProtein.comandKnckff.cominvestor。

Practiceareas:Martech,Ecommerce,SaaSandFintechFollowMorefromMediumUXNotesUsabilityTesting — What,How,andWhyClaudiaProchniewskaIronhack’sPrework:DesignThinkingUX/UIAmyKimUXDesignProject2(Research1)MaushumiHuqIronhackDesignChallenge1HelpStatusWritersBlogCareersPrivacyTermsAboutKnowable