一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
訂閱我們
一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
訂閱我們
沒有結果
檢視所有結果
一塊設計 | apo design - 設計共筆部落格
沒有結果
檢視所有結果
Home UI / UX 設計

為網站內容選擇適合呈現方式

in UI / UX 設計
by Shuan Wen
12 月 09,2020
4 min read

內容目錄

  • 輪播 Carousel
  • 卡片 Card
  • 拼圖 Grid
  • 手風琴 Accordion
  • 光箱 Lightbox
  • 標籤切換內容 Tab
  • 大圖背景 Background image
  • 表格 Table

資訊的傳達是網頁設計的重要關鍵。除了靜態的圖文排版外,可以結合滾動、游標移入、點擊等多樣化的互動模式,讓畫面更豐富。

以首頁來說,它像是全站的重點整理,除了視覺吸睛外,也要順利傳達資訊,並引導使用者順利找到內容,為了讓畫面更簡潔凸顯重點,呈現方式的選擇就更加重要。以下整理了首頁中常見的幾種呈現方式:

輪播 Carousel

來源:Three Sixty° Property Group

網站中最常使用的呈現方式,將多個或不確定數量的內容,收納在一排輪播中有效節省空間,有興趣的使用者也會自行點選看更多內容。

輪播的方式多樣,程式上也有完整的套件做運用,設計師們如果不確定程式的可行性,不妨從程式面的功能發想,延伸回設計上,參考Demo: https://swiperjs.com/demos/

適用內容:主視覺、最新消息、產品、合作夥伴、廣告Banner

設計技巧:有些輪播看不出能左右拖曳,忽略了隱藏內容,設計上記得提示使用者有更多內容。


卡片 Card

來源:awwwards.

顧名思義,將內容放進一張張卡片中,每張卡片就像撲克牌,有相同的排版但放置不同資訊。 卡片的設計可能在一張卡片中已完整呈現資訊(像是品牌優勢),也可能只是簡短摘要(像是產品列表),引導你連結進內頁。因為它能放入各種資訊且有大面積的點擊範圍,隨著螢幕寬度改變,卡片的寬度也容易做調整,幾乎所有網站都能看到它。

適用內容:團隊介紹、產品特色、作品展示

設計技巧:注意視覺層級,別讓一張卡片找不到傳達重點。


拼圖 Grid

來源:katvig

卡片設計的延伸,用網格系統將畫面切割,拼湊不同組合,再利用大小不同的方塊來達到視覺平衡,很容易創造設計感。

適用內容:分類項目、產品

設計技巧:善用不同大小的塊狀,創造視覺層級,讓重點更醒目。


手風琴 Accordion

來源:ikea

適合運用在大量的文字資訊,過多的文字往往讓人想忽略且找不到重點,收合後留下標題更容易找到目標,且節省空間。

適用內容:Q&A、操作說明

設計技巧:要清楚的看出標題可以被點選,或將第一個內容設為展開。


光箱 Lightbox

來源: H3 Platform

光箱效果能讓畫面在不換頁的狀態下呈現更多資訊,可有效的隱藏許多資訊在光箱中,避免內容過於冗長。常見光箱分為兩種:

自動浮出:常用於廣告宣傳,經常出現在剛進入網站或是滾動到一半時,自動觸發,有別於網站中穿插的廣告Banner,彈跳視窗必須被關閉後網站才能繼續使用,會強迫使用者關注視窗達到廣告效果。

點擊觸發:有些內容或圖片較為細節,不需呈現於首頁中,利用光箱讓想了解的使用者自行點選。

適用內容:廣告、細節介紹、放大圖

使用技巧:關閉光箱的按鈕要清楚,避免使用者找不到按鈕。光箱浮出時,可利用背景變暗、模糊等效果,讓光箱更凸顯。


標籤切換內容 Tab

來源:H3 Platform

有點像是頁面中的小分頁,內容可多可少,可能互相關聯希望你一步步按下去,也可能互相獨立只為了讓畫面更簡潔。

適用內容:產品介紹、流程

設計技巧:標籤內容過多超出螢幕高度,滾動後可以將標籤固定於頁面上方,方便切換內容。


大圖背景 Background image

來源:bakertilly

裝飾性的成分較高,內容可能只有一段話或是一個標語配上一顆按鈕,卻能利用適合的圖片或影片,為網頁提升不少溫度,增加情感成分,進一步讓使用者想了解更多而點擊按鈕。

適用內容:主視覺、slogan

設計技巧:避免雜亂的背景影響文字閱讀。


表格 Table

來源:JOO

最理性的呈現方式,利用表格的工整排列,將瑣碎的資訊排列乾淨,例如產品有分不同規格細項,用表格呈現可以很直覺地看出差別。也很時常用在競品比較。

適用內容:規格比較、競品比較

設計技巧:利用色彩變化、裝飾、動畫等,凸顯想宣傳的品項,讓使用者一眼就能看出它的差別。



如果還是不知道要怎麼呈現某項資訊,不妨直接搜尋看看別人是如何呈現同類型資訊。網頁中多樣化的排版很多是從基本架構去延伸,掌握了基本邏輯就能組合出多樣化的視覺效果!

Tags: UI網頁設計
ShareShareShare
Shuan Wen

Shuan Wen

身兼網頁設計師與前端工程師,但熱愛設計多一點。

上一篇文章

Figma V.S Adobe XD 比較心得 : (二) Adobe XD 篇

下一篇文章

照片選用基本原則

相關文章

接案設計師的常見盲點

接案設計師的常見盲點

by Shuan Wen
7 月 06,2022

踏入全職接案滿三年了,加上前面兩年待在接案公司的經驗,五年來也經手近百個專案了吧! 儘管接觸了各樣的專案,每次執行時還是避免不了一些錯誤,加上幾次和待在產品公司...

來做作品集吧!|網站作品集製作心得

來做作品集吧!|網站作品集製作心得

by sanmu
6 月 22,2022

前陣子為了換工作做了新的網站作品集,算了一下目前為止差不多做四五次了,剛好最近朋友也因為公司招人在幫忙審作品集,有討論到一些想法,覺得可以來寫篇分享文章!內容基...

【 F2E – PK 心得 】公車動態網站設計 – 訪談到 UI 設計

【 F2E – PK 心得 】公車動態網站設計 – 訪談到 UI 設計

by Debby
12 月 28,2021

這篇文章主要是分享之前公司收到六角學院的邀約,參與 F2E PK 賽 的參賽心得紀錄。PK 所製作的內容是『全台公車動態時刻查詢應用服務』活動的目標不是一個月內...

Back to List

一塊特別企劃

一塊特別企劃|設計師問與答
連結至一塊設計 facebook 專頁

標籤

Adobe Xd (3) B2B (1) COVID19 (1) designer (2) design tool (3) Figma (4) functional map (1) HTML (2) illustrator (1) UI (26) UX (18) web design (1) Wordpress (2) 字體 (7) 無障礙網站 (5) 產品設計 (2) 筆記 (4) 經驗分享 (26) 網頁設計 (20) 設計師問答 (1) 設計選書 (2) 課程心得 (1) 講座 (2) 購物流程 (1) 週年企劃 (5) 遠端工作 (2) 電子報 (1) 靈感 (4)
一塊設計 a piece of design

聯絡我們

任何合作或問題請洽:
info@apodesign.tw

  • 服務條款
  • 隱私權政策

Follow us

Copyright © 2020 apodesign.tw All Rights Reserved.

沒有結果
檢視所有結果
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書