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

梅問題-免費資源-《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》網頁前置作業-網站架構圖製作

相關文章

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 0 留言