- alien:
hi您好 ... - Richard:
悠識數位的網站企劃/A... - jing:
想請問一下要畫這種圖要... - kassey:
這是國外搞笑影片吧 ... - awoo:
私密留言
從事網站建置工作的人想必一定對Wireframe(以下簡稱WF) 這個字不陌生。
WF簡單來說就是網站頁面的藍圖,主要的功能IA是讓用來(資訊架構分析人員,時常會是網站必須企劃兼任的角色) 與網站置作團隊的其它成員溝通想法的工具。
WF的表現形式有很多種,可以精細也作出與真實頁面相近的WF,也可以用很簡略方式表達頁面中應具備的元素,對麥斯而言,WF是一種溝通的工具,因此最重要的是能夠讓看WF的人了解你的想法,要用那種形式來表現,應該視當時的需要,以及合作的對象。
下面是兩個WF的例子,上面的較為簡略,而下面的則是較為精細的形式的wf:
麥斯有時會被要求製作一些十分接近真實頁面的WF,精細形式的WF表面上看來似乎會讓工作流程變得順利,但實際上,在看不到的地方卻有許多潛在的危機。
l 首先,WF是用來溝通IA的工具,但一個擬真的WF常會讓討論的焦點轉移到頁面的視覺設計,然而那是創意人員的工作而不是IA人員的專業。因此,當一份擬真的WF出現後,常會出現兩種情形:
1. 創意人員覺得WF 阻礙了他們發揮的空間。
2. 上面那點是對比較勤勞的人來說,至於比較懶的,就會直接把這個WF加上圖片顏色做出網頁。
l 再者,也許因為擬真的WF容易讓非專業的人也看懂網頁設計,因此這樣的wf常被拿去與客戶溝通,這樣的作法也許對能讓客戶看到一些實質的產出,因而簽下合約,但卻是非常不正確的作法。
1. 讓客戶看到擬真的WF會讓他對頁面中會出現什麼產生不當的期待。我們知道WF只是頁面的IA架構,最後完成的網站通常會與wf有許多不同之處,如果客戶在一開始就看到擬真的WF,而之後完成的網站卻與他心中的期待不同時,客戶常會認為一開始所看到的wf是一個不實廣告,這樣一來會為自已製造許多不必要的麻煩。
2. 如果客戶太早看到擬真的WF,那麼他的會將焦點放在介面視覺設計上,這時從客戶口中聽到的就會是:我要這個在這裡,這個頁面中應該有這個功能,還有,某個圖應該要出現在頁面上。
但是,在未進入實際的制做前,我們所應該了解的是到底有那些資訊是重要的? 這些資訊之間又有那些關係? 通常客戶對這方面的想法會是散亂的,IA人員需要有些技巧才能讓了解客戶真正的想法,然而過早秀出擬真的WF只會讓客戶的想法失焦,這樣一來我們就更無法得到設計IA時所需要的資訊。
Dan Brown (http://www.boxesandarrows.com/archives/where_the_wireframes_are_special_deliverable_3.php) 提出了一個用Description Diagram 來代替WF的溝通方式,這種方式感覺上似乎更能讓創意與客戶focus在IA的設計上進行討論。
與其用WF來與創意及客戶討論網站的資訊架構,Dan Brown則改用以內容描述為主的Description Diagram,這種方式是將網站可能會有的內容以文字描述的方式,依重要性不同列在一份文件上來進行討論,這樣一來,文件中少了視覺的要素,因此討論的內容就可以專注在IA議題上,較可能針對內容類形與重要性與客戶進行討論。
如下圖 ,我們可以先將網站可能會有的內容先列在一份文件,這些內容依重要性的不同由右向左排列,然後以這份文件作為與客戶溝通內容層級的工具。


Dan Brown在其文章中只談到這兩個例子,麥斯認為,如果能先以這樣的Description Diagram來溝通想法,那麼IA人員接下來,只需將網站中會出現的各個分頁標定出來,然後將每一頁中將出現的內容以描述的方式說明,剩下的就可以讓創意自由發揮了。
網站的建構通常需要的是team work,而這種team就像是一個Jazz Band,其中每個人都有不同的專長,要讓team的效能發揮到淋漓盡致,就要讓不同才能的人都能在自已的領域盡情的發揮,彼此之間能夠多一點互補,少一點干擾,而以Description Diagram進行溝通最大的好處正在於此。
再進一步,可以依內容的不同放入一些初步的功能設計,這些功能設計在視覺上都以灰階的方式呈現,如此一來,對創意人員而言,既能達到溝通內容的目的,又能保有很大的創意空間。













