相關文章

644ffd50d5236ad45daa44dd4d67987f2cc2cc74 這個DENIM說的不是牛仔褲,當然更不是單寧酸(Tannin)。它其實是美國華盛頓大學研發中的一款網站架構程式,雖然不能輸入HTML或CSS之類的程式語言,也不能像Frontpage或Dreamweaver那樣用來製作網頁,卻可以用很簡單的方式呈現設計師對網站的初步構想,並透過它進行討論,快速掌握整個網站的架構與脈絡。

全平台、開放原始碼

DENIM目前是由華盛頓大學旗下一個名為「dub」的團體負責開發,這個團體把開發重心放在「Human-Computer Interaction and Design」,也就是「人與電腦間的互動與設計」,因此DENIM採用了許多有趣的構思,底下我們會一一作介紹。這邊先來看看DENIM的基本資料:

因為DENIM是建構在JAVA平台上,因此才能適用於各種作業系統。不過也因為這樣,可下載的檔案分成兩個版本,一個是包含JRE(Java Runtime Environment)的版本,檔案大約17.7MB;另一個則是只有DENIM的版本,僅僅5.48MB左右大。

各位可依照自己的作業環境選擇合適的版本。另外,安裝之後,初次執行時會要求輸入專案名稱,以便日後識別。

DENIM01_wm

 

▲dub手上其實有很多專案,DENIM則是其中比較具實用性的一個(小編個人觀點)。

DENIM02_wm

 

▲第一次執行的時候,會要求輸入名稱,將來可以用來分辨是誰的設計。

簡單直覺的控制介面

DENIM的主介面看起來相當簡單,左邊是導覽列,只要滾動滑鼠滾輪,就可以從不同的層次來看整個網站的架構。最上面可說是從宏觀視角(Overview)來看,只能大略看到網頁的縮影以及層次;往下則是推進到網站地圖(Site Map)的層級,我們可以看到網站的標題及連結關係,快速理解整個網站的架構;再往下依次是略圖(Storyboard)、網頁(Page)及細節(Detail)等層級。

基本上,實際編輯和規劃網站時,大多是在網頁(Page)或細節(Detail)視角上作業,但如果要瞭解網站的全貌,當然還是要靠網站地圖(Site Map)或甚至宏觀視角(Overview)來看。右下角還有導覽視窗,可以大概看到目前頁面與整個網站間的相對位置。

 

DENIM03_wm

▲左邊的拉桿可以用來調整我們看待網站的視角,由上到下,分別代表由遠而近的不同視野。

 

DENIM04_wm

▲實際規劃網站及網頁內容時,通常還是要從細節(Detail)的視角切入。

 

DENIM05_wm

▲右下角的導覽器可以快速掌握目前我們所在的頁面位置。

下方那一排圖示則是工具及元件列。最左邊的「鉛筆」是用來手寫或直接勾勒頁面布局;「手」則是用來拖曳頁面,調整畫面位置;「橡皮擦」不用說,當然是用來刪除鉛筆痕跡、頁面及元件;而「鋼筆」則有點類似簡報用的光筆,可以用來圈畫要說明的重點,但痕跡很快就會自動消失。

再過去的幾個印章圖示都是常見的網頁元件。它們分別是用來點選意見的「方格」、「圓點」、送出選擇的「按鈕」、輸入文字的「空白文字框」、代表大段文字的「行文方塊」以及供人點選的「下拉選單」。如果不小心把工具列弄得亂七八糟,只要按一下最右邊的掃把,它們就會乖乖排隊站好。

基本上,這些元件的設計讓我們能夠很快地鉤勒出網頁的大致布局,不過可惜的是,這些元件一旦置入,大小、位置、內容等都無法調整,因此真的只能用來製作意象圖或草圖,不能做太詳細的設計。

 

DENIM06_wm

▲底下這一排是工具列,需要什麼工具就拿什麼,相當直覺的表現方式。

別出心裁的圓盤式選單

DENIM的編輯方法很簡單。在空白的底稿上按一下右鍵,或是按一下視窗左上角的「Menu」,就可以叫出相當別緻的圓盤式選單,一開始通常都是按「Insert>Page」來插入新的頁面。接著就可以將視角調近,開始對頁面進行規劃,像是用「Insert>Text」或「Insert>Image」來插入文字或圖片。

當然,我們也可以在文字上按下滑鼠右鍵,選擇「Link To」,將文字連結到其他頁面。大致上來看,DENIM可以設定、規劃的東西真的非常之多,非常之有趣。

 

DENIM07_wm

▲相當少見的圓盤式選單,讓小編頗為驚豔。按一下中間的小圓圈,就可以取消選單。

網站架構動態預覽

DENIM還有一個有趣的功能,就是可以建立網站的動態預覽。當各網頁之間的連結建立起來之後,我們還可以設定連結的操作方式,如按一下滑鼠左鍵、按一下滑鼠右鍵等等。接著只要打開選單,點選「File>Run」,就會跳出一個新視窗,讓我們進行各個連結的操作,就像真的在使用網站一樣。底下我們就做個簡單的實例介紹:

STEP 1

在「Gallery」文字方塊上按一下滑鼠右鍵,然後點選「Link To」。

DENIM08_wm DENIM09_wm

STEP 2

在新視窗中,將連結指向「Gallery」。

DENIM10_wm

STEP 3

對準連結箭頭最前端的綠色圓點,按一下滑鼠右鍵,點選「Arrow」。

DENIM11_wm

STEP 4

設定連結生效方式,一般來說都是「Left Click」(按一下滑鼠左鍵)。

DENIM12_wm

STEP 5

連結設定好之後,打開選單,點選「File>Run」叫出動態預覽視窗。 在連結上按一下滑鼠左鍵,果然,網頁切到我們指定的「Gallery」頁面了。這時按一下「Back」就可倒回上一頁。

DENIM13_wm DENIM14_wm

概念獨特有趣,實用度……囧

實際測試過之後,小編必須很遺憾的說,DENIM雖然是一款有趣的軟體,但目前離堪用都還相當遙遠。就算因為它是英文環境下開發的軟體,所以先撇開中文支援度零蛋的問題不說,使用起來仍然還有很多不方便的地方。

譬如頁面、插入文字以及按鈕等網頁元件在插入後都不能微調位置大小,插入圖片沒辦法調整前後層次等等,都會影響我們的操作。至於它沒事就會當機掛點之類的問題,那就更不用說了。

不過真正重要的是,從人機介面的角度來看,DENIM確實有很多值得我們借鏡的地方,不論是工具列、選單或者呈現手法等等,都有它獨特的創意在。如果有哪位讀者有心開發自己的軟體,不妨多參考看看囉。

使用 Facebook 留言

50c4a5a8f503f324c78b16ecd28e4c27?size=48&default=wavatar
1.  tony (發表於 2010年1月17日 23:04)
試用了一下...滿難用的...

可以面對面溝通的話,還是紙筆畫的wireframe最好了!
estel
2.  estel (發表於 2010年1月18日 12:06)
以目前來說,DENIM的確離「好用」還滿遠的,甚至連「堪用」都還算不上。之所以會介紹它,主要還是因為想讓大家看看不同的設計及操作概念。譬如那個圓盤形的menu,比起平常看到的選單,不是有趣、直覺得多嗎?

發表回應

謹慎發言,尊重彼此。按此展開留言規則