Zi 字媒體

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