常見的網站內容呈現方式有哪些?「排版元件」讓你拖拉點選製作活動網頁

網站內容呈現方式

常見的網站內容呈現方式有哪些?

網站內容呈現方式要如何讓資訊有效的傳遞,又能兼具清楚的排版和吸睛的設計,是非常考驗網站規劃人員的經驗與技術的。

以一頁式的活動網頁來說,其有著明確的目標,要引導使用者在不易分心的環境下完成特定的行為轉換,如填寫表單、下載檔案,甚至付費結帳等。而為了說服使用者完成指令,良好的網站使用體驗與內容呈現方式即顯得更加重要。

因此,我們特別整理了網站中常見的內容呈現與排版方式供大家參考。

輪播圖 Slider

輪播圖的主要功能為收納多組網頁中的圖片或 Banner,我們可以常在很多網站較顯眼的位置看到,例如在首頁的最上方作為主視覺,或是出現在某標題旁做輔助使用。

在使用輪播圖作為內容呈現時,可以使其自動播放,或讓使用者自行滑動圖片。

使用情境:主視覺、客戶LOGO、使用者見證 …

輪播圖 Slider
▲ 圖片來源:WEBA 官網

輪播區塊 Carousel

輪播區塊與輪播圖的差異在於,輪播區塊內可以放置的內容不止是圖片,也可以是影片、文案、按鈕、超鏈接等,更可以在單一的輪播空間內隨意排版。

輪播區塊是非常常見的一種網站排版方式,其與輪播圖最大的好處是可以在有限的版面位置中露出較多的內容資訊,尤其在手機版網頁中效果更為明顯。

使用情境:廣告Banner、商品推薦、最新消息 …

輪播區塊 Carousel
▲ 圖片來源:中國信託 官網

收縮區塊 Accordion

收縮區塊(也被稱之為手風琴)是指網頁中可以透過折疊、擴展,以垂直排列的內容區塊。

其最主要的使用目的是可以讓使用者透過動態的切換延展,來查看較多的內容;收合後只留下標題時又能讓內容條例分明,不僅讓使用者更容易找到目標,且能節省下不少版面。

使用情境:常見問答、注意事項 …

收縮區塊 Accordion
▲ 圖片來源:三商美邦人壽 官網

頁籤 Tab

頁簽是網頁中,在某個區塊透過點擊標題(有些網站也會設定為自動切換)進行水平切換的內容呈現方式。

其特色類似在同一個頁面區塊中,建立多個分頁吧內容分類,而各頁簽內裡呈現的可以是同一主旨下相近的內容;也可以是不同資訊之間的比較。

使用情境:商品詳情/規格、使用流程 …

頁簽 Tab
▲ 圖片來源:第一銀行 官網

提示頁 Pop-up

提示頁是一種將網站中某項目的次要內容隱藏起來的排版方式,需透過使用者自行點擊或是某個行為的觸發後,才會在不換頁的狀態下彈出。

其與一般排版元件的差別在於,提示頁彈出時會強迫性的讓使用者專注在畫面上,必須完成某些指定行為如:點擊關閉或送出按鈕後,才可繼續原先的瀏覽。

使用情境:注意事項、內容細節 …

提示窗 Pop-up
▲ 圖片來源:人生設計所 官網

已經掌握了常見的網站內容呈現方式後,就可以應用這些基本邏輯延伸利用,藉由 WEBA 製作精美的活動網頁,搭起與客戶之間的橋樑

 

相關文章:

label標籤:

詳細了解 WEBA ,立即開始使用!

如需了解企業版資訊,請點此「申請演示