fbpx

Pingendo – 視覺化 RWD 網頁設計工具,動動手指搞定

2016/07/22 電腦軟體

網頁設計隨著技術的演變,近幾年比較流行的網頁技術就是 RWD 自適應設計,簡單的說就是做一個頁面自動符合電腦、平板、手機各種不同解析度的畫面,以往電腦版和手機版都是分開製作的,最常見的設計方式就是透過 Bootstrap,不過這還是需要有相當的基礎才好上手,Pingendo 這套 RWD 網頁設計工具則是全視覺化,讓你直接用拖曳的方式完成基本的 RWD 頁面結構設計,可以大幅的減少版面編排的時間,對網頁設計的人來說是相當實用的工具。

Pingendo 使用介紹:

只要有一點網頁設計基礎的人應該很快就能夠上手,阿湯往下就簡略的帶一下功能的部份,首先開啟時新增頁面會有全空白跟預設的版面讓你選擇,基本上要自己做當然是從全空白開始。

01

最左邊是全部可以用的工具,包含區塊及各種內容項目,最右側則是用來調整你所選擇的區塊或項目,中間則是編輯區。

02

03

編輯方式完全是視覺化,直接拖著你要使用的項目到中間畫面就可以了,如果有外包內,或是順序時,拖曳進到編輯區時也都會有藍線做區分,讓你方便拖曳到要放置的地方。

04

阿湯簡單拖曳個幾個元件,看起來就有網頁的樣子了。

05

為了讓 Demo 畫面更逼真,Pingendo 內建了一些圖庫素材可以使用,當你點擊圖片的 X 區塊就會進到這畫面,可以選擇用來 Demo 的照片。

06

把圖片加入後是不是看起來更像一回事了。

07

當基本結構設定完後,也可以在右側微調各項目的 ID、Class 等。

08

除此之外也能直接透過下方展開 HTML 及 CSS 區塊,直接編輯。

09

剛剛做的放到瀏覽器來預覽一下,看起來有模有樣啊。

10

RWD 設計的好處就是連帶手機版一併搞定,加上這是視覺化設計的工具,要自己快速弄出簡易的 RWD 網頁真的蠻輕鬆的,推薦給網頁設計人員試看看。

11

相關資訊:

  • Pingendo 官方網站:請點我(直接進入下載即可)
  • 支援系統:Mac、Windows、Linux

你可能對這些內容也有興趣

阿湯 作者:阿湯

對電腦 & 網路資訊充滿興趣與熱情、瘋了似的每日堅持發文,「阿湯」這個名字是由湯姆克魯斯而來的,雖然我沒有他帥氣,也不會演電影,但我會寫文章....

更多關於的文章》

1 個留言

  1. Avatar 王翊軒表示:

    您好,想請問您,如果我使用”list group”裡面是放一些文字,希望能點進去就進到另一個頁面,這樣我該怎麼做呢?不好意思打擾了!謝謝您^^

    阿湯 說:

    請自行研究,謝謝

發表留言 »

姓名(*)
信箱(*)