網頁設計, 網頁資源

《RWD Wireframes》自適應網頁版型架構圖線上產生器

梅干 2014/03/03
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
  先前梅干曾分享過《Uxpin》網站、行動裝置架構圖線上產生器,透過這個網站,可以快速的將網頁、APP等版型與架構繪製出來,方便跟程式與設計人員討論,也可加速設計人員的製作時間,但隨著自適應網頁的盛行,因此當在規畫網頁版型時,已不再只有單純的桌機模式,更同時要考慮到平板、手機等行動裝置,但要一個一個繪製,還真是挺麻煩,所以梅干要來分享一個好東西,那就是RWD Wireframes自適應網頁版型線上產生器,讓你可快速的規畫出,網頁在各裝置下所要呈現的區塊與版型,至於要怎麼用呢?現在就一塊來看看吧!

自適應網頁框架圖產生器:
網站名稱:RWD Wireframes
網站網址:http://www.lifeishao.com/rwdwire/

RWD Wireframes註冊會員:
Step1
進入RWD Wireframes網站後,先點右上角的會員圖,再點下方的Register鈕,註冊為會員,這樣才能有儲存的功能。
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step2
接著只要輸入Email與密碼就可以了。
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step3
註冊完畢後,會看到頁面中,分成四個區塊,分別就是桌機(大、小)、平板、手機。
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
RWD Wireframes新增區塊:
Step4
若要自行增加區塊時,只需點左邊的+圖示
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step5
按住滑鼠不放,就可拖拉出所需的區塊來。
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step6
接著設定區塊的屬性。
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step7
這樣就可依自已所需,自行的增減網頁的區塊內容啦!是不是超方便的呀!
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
RWD Wireframes區塊顯示/隱藏:
Step8
比方像手機版,若有某些區塊要隱藏的話,點左邊的第三個圖示。
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step9
再將要隱藏的區塊,由Visible向下拉到Disabled,就可隱藏起來。
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step10
這樣側邊欄就不見了,就可將其它的區塊,點一下將它拉大。
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
RWD Wireframes解析度切換:
Step11
接著點上方的尺寸,切換到其它的解析下,這時若希望側邊欄顯示時,只要將它再拉回Visible就會再顯示出來。
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step12
這時側邊欄就會再顯示出來。
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
RWD Wireframes編輯區塊內容:
Step13
若要重新命名區塊時,只要雙響就可編輯區塊的內容,甚至還支援中文與安插圖片。
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step14
當編輯完後,再拉到下方,按Save儲存起來。
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
RWD Wireframes匯出:
Step15
只要點左邊的原始碼圖示,分別可將html與css給匯出。
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
RWD Wireframes儲存:
Step16
將各個版型都設定好後,再點左邊最後一個鈕,就可將它儲存起來。
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器
Step17
儲存完畢後,在上方會員圖示的鈕,點一下就會出現所有的儲存記錄清單。
梅問題-網設必備-《RWD Wireframes》自適應網頁版型架構線上產生器