top of page
Coco Szeto

【排版教學】內容排版的重要性!介紹不同的排版小工具


圖片來源:Creato | Canva | 內容|排版|佈局|教學

內容排版有那麼重要嗎?

其實內容排版間接展示了作者的表達思維。一個條理清晰、設計精美的內容排版絕對可以讓讀者賞心悅目地吸收想要表達的資訊。大部分人往往以為內容排版只是浪費時間去滿足不必要的視覺享受,但其實不盡然。內容排版除了能讓整體畫面感精緻外,還可以有效地讓不同主題的內容被系統化地排列和組織,使讀者容易閱讀和理解。


更重要的是排版不只涉及介面設計,還有一個重要因素就是——用戶體驗。如果讀者或用戶發現文章貼圖風格各異、內容混亂,很大機會不會再次造訪該網站。一個良好的用戶體驗才能持續地吸引新用戶,並留下支持者。



圖片來源:WEBA | 內容|排版|佈局|教學

1. 內容佈局


為了讓讀者更容易地吸收文章或帖子內容,創作者在內容佈局上的首要任務就是要讓文字內容簡單明瞭,配搭主次分明的脈絡結構,這樣傳遞的信息才會清晰明確,方便觀眾在短時間內閱讀全文。例如:我們可以減少字數和合理的行距,用項目符號列出重點字句即可。


第二,內容佈局要有設計美感。一篇再好的文章或帖子,如果沒有美觀的圖案和字型亦難以留下觀眾。創作者不妨參考一些軟件模板,獲取設計靈感。在設計的時候,創作者謹遵設計切勿太過花巧,避免文字內容被喧賓奪主, 而且設計風格也要和傳遞信息相符。


最後,創作者可在構圖上花些功夫,先定下想要的構圖,然後才把剪裁好的內容擺上不同的空間裡。常見的構圖設計有:


a. 水平構圖


圖片來源:攝圖網 | 內容|排版|佈局|教學

b. 垂直構圖


圖片來源:攝圖網 | 內容|排版|佈局|教學

c. 對稱構圖


圖片來源:souhu | 內容|排版|佈局|教學

d. 對角構圖


圖片來源:設計達人 | 內容|排版|佈局|教學

e. 九宮格構圖


圖片來源:Boul | 內容|排版|佈局|教學

2. 呈現方式


介紹完文字內容上的佈局,不少網站內容排版亦值得花心思設計一番。不管你是商家或是創作者都有機會製造一個專屬的官方網站。究竟新手應該如何設計出與其他大型公司相媲美的精緻網站呢?


有兩個關鍵點需要注意:

  • 網頁內容的排版方式要讓資訊有效地傳播出去

  • 兼具清楚的排版和吸睛的設計


傳統的網頁設計只有圖片和文字,隨著設計多元化,不少市場銷售、公司企業都會用活動網頁(Landing Page)吸引外來訪客觀看網頁,並有機會把他們轉換成潛在顧客或使用者 。活動頁面也有其不同但清晰的目標,包括要引導用戶在專注的情況下進行產品宣傳、網頁登記、填寫表格,甚至是結帳付費。要如何讓客戶在神不知鬼不覺地進入你的網絡宣傳世界裡,既享受到良好的網頁用戶體驗,又成為你的粉絲或客戶?馬上來看看有什麼實用小工具吧!

一、輪播圖片 Slider


主要功能:

  • 收納多張網頁中的圖片或 Banner

  • 放在網站較顯眼的位置

  • 作為主要視覺,或加插在副標題下的輔助說明

  • 輪播圖片作為內容呈現時,可自動播放,或讓用戶手動滑動圖片

適用情境:用戶體驗、商品推薦、Logo

圖片來源:Creato | 內容|排版|佈局|教學

二、輪播影片 Carousel


主要功能:

  • 放置的內容不止是圖片,也可以是影片、文案、按鈕、連結等,更可以在單一的輪播空間內隨意排版

  • 常見的一種網站排版方式

  • 最大的好處是可以在有限的版面位置中露出較多的內容資訊

  • 手機版網頁中效果更為明顯

適用情境:最新商品、消息、介紹

圖片來源:Creato | 內容|排版|佈局|教學

三、收縮網域 Accordion


主要功能:


收縮網域(簡稱手風琴)是指網頁中

  • 透過折疊、擴展的網域。

  • 讓用戶透過動態的切換延展,查看較多的內容

  • 收合後只留下大標題,讓內容條理分明

  • 讓用戶輕鬆找到目標,又節省下不少空間

使用情境:網頁主題分類、列表

圖片來源:Creato | 內容|排版|佈局|教學

四、頁籤 Tab


主要功能:

  • 在其中一個網域透過點擊標題(有些網站也會設定為自動切換)進行水平切換的內容呈現方式

  • 建立多個分頁把內容分類

  • 各頁籤內裡呈現的可以是同一主旨下相近的內容

  • 也可以是不同資訊之間的比較

使用情境:產品資料、使用流程

圖片來源:Creato | 內容|排版|佈局|教學

五、提示頁 Pop-up


主要功能:


  • 將網頁中的項目次要內容隱藏起來的排版方式

  • 需透過使用者自行點擊或某樣行為觸發後,才會在不換頁的狀態下彈出

  • 其與一般排版元件的差別在於,提示頁彈出時會強迫性的讓使用者專注在畫面上

  • 必須完成某些指定行為如:點擊關閉或送出按鈕後,才可繼續原先的瀏覽

使用情境:登入提示、注意事項

圖片來源:Creato | 內容|排版|佈局|教學


登記成為Creato用戶,利用Creato來支持創作!



 

立即登記CREATO,成為第一班用戶!

登記後,用甜甜圈支持你喜歡的創作者,成為他們在創作路上的動力吧~






Comments


Post: Blog2_Post
bottom of page