這個DENIM說的不是牛仔褲，當然更不是單寧酸（Tannin）。它其實是美國華盛頓大學研發中的一款網站架構程式，雖然不能輸入HTML或CSS之類的程式語言，也不能像Frontpage或Dreamweaver那樣用來製作網頁，卻可以用很簡單的方式呈現設計師對網站的初步構想，並透過它進行討論，快速掌握整個網站的架構與脈絡。
全平台、開放原始碼
DENIM目前是由華盛頓大學旗下一個名為「dub」的團體負責開發，這個團體把開發重心放在「Human-Computer Interaction and Design」，也就是「人與電腦間的互動與設計」，因此DENIM採用了許多有趣的構思，底下我們會一一作介紹。這邊先來看看DENIM的基本資料：
- 軟體名稱：DENIM
- 軟體性質：Freeware（開放原始碼）
- 介面語言：英語（不支援中文輸入）
- 操作平台：Windows全系列 / Mac OS 10.2 / Linux
- 官方網站：http://dub.washington.edu:2007/projects/denim/
- 下載網頁：http://dub.washington.edu:2007/projects/denim/download/
因為DENIM是建構在JAVA平台上，因此才能適用於各種作業系統。不過也因為這樣，可下載的檔案分成兩個版本，一個是包含JRE（Java Runtime Environment）的版本，檔案大約17.7MB；另一個則是只有DENIM的版本，僅僅5.48MB左右大。
各位可依照自己的作業環境選擇合適的版本。另外，安裝之後，初次執行時會要求輸入專案名稱，以便日後識別。
▲dub手上其實有很多專案，DENIM則是其中比較具實用性的一個（小編個人觀點）。
▲第一次執行的時候，會要求輸入名稱，將來可以用來分辨是誰的設計。
簡單直覺的控制介面
DENIM的主介面看起來相當簡單，左邊是導覽列，只要滾動滑鼠滾輪，就可以從不同的層次來看整個網站的架構。最上面可說是從宏觀視角（Overview）來看，只能大略看到網頁的縮影以及層次；往下則是推進到網站地圖（Site Map）的層級，我們可以看到網站的標題及連結關係，快速理解整個網站的架構；再往下依次是略圖（Storyboard）、網頁（Page）及細節（Detail）等層級。
基本上，實際編輯和規劃網站時，大多是在網頁（Page）或細節（Detail）視角上作業，但如果要瞭解網站的全貌，當然還是要靠網站地圖（Site Map）或甚至宏觀視角（Overview）來看。右下角還有導覽視窗，可以大概看到目前頁面與整個網站間的相對位置。
▲左邊的拉桿可以用來調整我們看待網站的視角，由上到下，分別代表由遠而近的不同視野。
▲實際規劃網站及網頁內容時，通常還是要從細節（Detail）的視角切入。
▲右下角的導覽器可以快速掌握目前我們所在的頁面位置。
下方那一排圖示則是工具及元件列。最左邊的「鉛筆」是用來手寫或直接勾勒頁面布局；「手」則是用來拖曳頁面，調整畫面位置；「橡皮擦」不用說，當然是用來刪除鉛筆痕跡、頁面及元件；而「鋼筆」則有點類似簡報用的光筆，可以用來圈畫要說明的重點，但痕跡很快就會自動消失。
再過去的幾個印章圖示都是常見的網頁元件。它們分別是用來點選意見的「方格」、「圓點」、送出選擇的「按鈕」、輸入文字的「空白文字框」、代表大段文字的「行文方塊」以及供人點選的「下拉選單」。如果不小心把工具列弄得亂七八糟，只要按一下最右邊的掃把，它們就會乖乖排隊站好。
基本上，這些元件的設計讓我們能夠很快地鉤勒出網頁的大致布局，不過可惜的是，這些元件一旦置入，大小、位置、內容等都無法調整，因此真的只能用來製作意象圖或草圖，不能做太詳細的設計。
▲底下這一排是工具列，需要什麼工具就拿什麼，相當直覺的表現方式。
別出心裁的圓盤式選單
DENIM的編輯方法很簡單。在空白的底稿上按一下右鍵，或是按一下視窗左上角的「Menu」，就可以叫出相當別緻的圓盤式選單，一開始通常都是按「Insert＞Page」來插入新的頁面。接著就可以將視角調近，開始對頁面進行規劃，像是用「Insert＞Text」或「Insert＞Image」來插入文字或圖片。
當然，我們也可以在文字上按下滑鼠右鍵，選擇「Link To」，將文字連結到其他頁面。大致上來看，DENIM可以設定、規劃的東西真的非常之多，非常之有趣。
▲相當少見的圓盤式選單，讓小編頗為驚豔。按一下中間的小圓圈，就可以取消選單。
網站架構動態預覽
DENIM還有一個有趣的功能，就是可以建立網站的動態預覽。當各網頁之間的連結建立起來之後，我們還可以設定連結的操作方式，如按一下滑鼠左鍵、按一下滑鼠右鍵等等。接著只要打開選單，點選「File＞Run」，就會跳出一個新視窗，讓我們進行各個連結的操作，就像真的在使用網站一樣。底下我們就做個簡單的實例介紹：
STEP 1
在「Gallery」文字方塊上按一下滑鼠右鍵，然後點選「Link To」。
STEP 2
在新視窗中，將連結指向「Gallery」。
STEP 3
對準連結箭頭最前端的綠色圓點，按一下滑鼠右鍵，點選「Arrow」。
STEP 4
設定連結生效方式，一般來說都是「Left Click」（按一下滑鼠左鍵）。
STEP 5
連結設定好之後，打開選單，點選「File＞Run」叫出動態預覽視窗。 在連結上按一下滑鼠左鍵，果然，網頁切到我們指定的「Gallery」頁面了。這時按一下「Back」就可倒回上一頁。
概念獨特有趣，實用度……囧
實際測試過之後，小編必須很遺憾的說，DENIM雖然是一款有趣的軟體，但目前離堪用都還相當遙遠。就算因為它是英文環境下開發的軟體，所以先撇開中文支援度零蛋的問題不說，使用起來仍然還有很多不方便的地方。
譬如頁面、插入文字以及按鈕等網頁元件在插入後都不能微調位置大小，插入圖片沒辦法調整前後層次等等，都會影響我們的操作。至於它沒事就會當機掛點之類的問題，那就更不用說了。
不過真正重要的是，從人機介面的角度來看，DENIM確實有很多值得我們借鏡的地方，不論是工具列、選單或者呈現手法等等，都有它獨特的創意在。如果有哪位讀者有心開發自己的軟體，不妨多參考看看囉。
可以面對面溝通的話，還是紙筆畫的wireframe最好了！