1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. 網頁企畫人員必備《Uxpin》網站、行動裝置架構圖線上產生器

網頁企畫人員必備《Uxpin》網站、行動裝置架構圖線上產生器

2014/01/20

梅問題-免費資源-《Uxpin》網頁前置作業-網站架構圖製作

  每當只要網頁要改版時,梅干都會先將網頁的架構畫在紙上,當架構確認後,才會開始動手作,雖然前置作業會較長一些,但後續在作業就相當的快,而在公司當網站企畫人員,要製作網頁時就得需要與程式和設計人員溝通,網站要長怎樣與有那些機制,往往大家都是口頭上說一說,但最後作出來後,都與企畫人員所想的一模二樣,因此最好的作法,就是先把網站的架構給勾勒出來,就可降低一些美麗的錯誤,但要企畫人員用手畫,那還真是要命的,所以通常會用word或小畫面來繪製,無論要用那一套,都要先練個一年半載的,才有辦法繪出一個比較像樣的架構圖出來,這時不妨可試試Uxpin線上網站架構圖產生器,讓你也能輕易的繪製出網站架構與版型喔!至於怎麼用現在就一塊來看看吧!


Uxpin:

網站名稱:Uxpin
網站性質:付費(免費試用30天)
網站網址:http://app.uxpin.com/

點上方的連結,先進行註冊,由於它的註冊相當的簡單,只需填Email與密碼,無需認證,註冊好後立即就可登入。
梅問題-免費資源-《Uxpin》網頁前置作業-網站架構圖製作


登入後,點右邊的Create new project鈕,建立一個新專案。
梅問題-免費資源-《Uxpin》網頁前置作業-網站架構圖製作


輸入專案的名稱。
梅問題-免費資源-《Uxpin》網頁前置作業-網站架構圖製作


點左邊的圖示,開始建立一個新的網站架構。
梅問題-免費資源-《Uxpin》網頁前置作業-網站架構圖製作


接著就會看到,工作面板的簡易介紹。
梅問題-免費資源-《Uxpin》網頁前置作業-網站架構圖製作


關閉說明面板後,在左邊的下拉選單中,就可選擇各種不同裝置的UI,所以就算是要規畫平板、手機也都不是問題。
梅問題-免費資源-《Uxpin》網頁前置作業-網站架構圖製作


比方要製作手機APP的版型架構時,當將選單切換到手機時,下方就會顯示所有手機上可用的UI圖示。
梅問題-免費資源-《Uxpin》網頁前置作業-網站架構圖製作


當要規畫網頁時,再將選單切回Web UI,接著將下方的圖示,直接拖拉到右邊的工作視窗中即可。
梅問題-免費資源-《Uxpin》網頁前置作業-網站架構圖製作


當要繪製圖塊時,選擇Box並拖拉到面板中後,可由八個控制點調整區塊的大小,以及在控制面板中設定圖塊的顏色與樣式。
梅問題-免費資源-《Uxpin》網頁前置作業-網站架構圖製作


像導覽列的設定。
梅問題-免費資源-《Uxpin》網頁前置作業-網站架構圖製作


當都配置好後,點右上方的分享圖示,就可將剛的框架圖,轉換成HTML檔並下載回來。
梅問題-免費資源-《Uxpin》網頁前置作業-網站架構圖製作


下載HTML的部分,有二種模式可選擇,左邊是含有網站的樹狀圖,右邊則是只有樣版的部分。
梅問題-免費資源-《Uxpin》網頁前置作業-網站架構圖製作


點一下所需的模式後,再按下方的Export鈕,就可將剛所規畫好的樣版給下載回來。
梅問題-免費資源-《Uxpin》網頁前置作業-網站架構圖製作


下載回來解壓縮後,就會看到以下的檔案。
梅問題-免費資源-《Uxpin》網頁前置作業-網站架構圖製作


點開來後,就會看到剛所規畫好的網頁版型。
梅問題-免費資源-《Uxpin》網頁前置作業-網站架構圖製作


而這是另一個模式,左邊會出現網站架構的樹狀圖。
梅問題-免費資源-《Uxpin》網頁前置作業-網站架構圖製作