網頁設計隨著技術的演變,近幾年比較流行的網頁技術就是 RWD 自適應設計,簡單的說就是做一個頁面自動符合電腦、平板、手機各種不同解析度的畫面,以往電腦版和手機版都是分開製作的,最常見的設計方式就是透過 Bootstrap,不過這還是需要有相當的基礎才好上手,Pingendo 這套 RWD 網頁設計工具則是全視覺化,讓你直接用拖曳的方式完成基本的 RWD 頁面結構設計,可以大幅的減少版面編排的時間,對網頁設計的人來說是相當實用的工具。
Pingendo 使用介紹:
只要有一點網頁設計基礎的人應該很快就能夠上手,阿湯往下就簡略的帶一下功能的部份,首先開啟時新增頁面會有全空白跟預設的版面讓你選擇,基本上要自己做當然是從全空白開始。
最左邊是全部可以用的工具,包含區塊及各種內容項目,最右側則是用來調整你所選擇的區塊或項目,中間則是編輯區。
編輯方式完全是視覺化,直接拖著你要使用的項目到中間畫面就可以了,如果有外包內,或是順序時,拖曳進到編輯區時也都會有藍線做區分,讓你方便拖曳到要放置的地方。
阿湯簡單拖曳個幾個元件,看起來就有網頁的樣子了。
為了讓 Demo 畫面更逼真,Pingendo 內建了一些圖庫素材可以使用,當你點擊圖片的 X 區塊就會進到這畫面,可以選擇用來 Demo 的照片。
把圖片加入後是不是看起來更像一回事了。
當基本結構設定完後,也可以在右側微調各項目的 ID、Class 等。
除此之外也能直接透過下方展開 HTML 及 CSS 區塊,直接編輯。
剛剛做的放到瀏覽器來預覽一下,看起來有模有樣啊。
RWD 設計的好處就是連帶手機版一併搞定,加上這是視覺化設計的工具,要自己快速弄出簡易的 RWD 網頁真的蠻輕鬆的,推薦給網頁設計人員試看看。
相關資訊:
- Pingendo 官方網站:請點我(直接進入下載即可)
- 支援系統:Mac、Windows、Linux