諮詢熱線:02-2369-8858

讓人快速採取行動的卡片式網站設計

讓人快速採取行動的卡片式網站設計

最後更新:2015/08/05 作者:KPN 企劃部
加入好友
卡片式網站設計
讓人快速採取行動的卡片式網站設計!
 
從社群網站,新聞網站,到購物網站,越來越多的網站朝向卡片式的網站設計。Google 在2014 I/O大會發表的Material Design也是以卡片的設計為出發點,而這樣的設計在2015達到了高峰。接下來我們就來探討卡片式的網站設計的來源與影響。
 
日常生活中我們常常用到的卡,信用卡,會員卡,駕照等等,它們的形狀與格式都有一定的規範。而卡片上更充滿了許多訊息,有單面也有雙面,而轉化到網站的設計上,賦予了更多的可能性。
 
在網站中,"一個卡片"可能包含了連結,按鈕,圖片等等,他們通常只有一個目的,要你去按它們。事實上,整個核心目標就是讓使用者可以在瀏覽這些訊息後,讓他們更有興趣看更多的內容。
比方說: 立即洽詢、立即購買,都是為了讓使用者可以看完內容後可以採取行動!
 
 
 
 
Facebook,就是一個最好的例子。 他在有限的範圍內用卡片式設計,以最顯眼的圖片或是影片來吸引瀏覽者的目光,進一步引導瀏覽者去點"....更多"或是與貼文者互動。
此外,卡片設計的方式,在響應式的網站上能有更好的相容性,從大尺寸螢幕上可以一欄四格,到行動裝置上的一欄兩格卡片,甚至是一格卡片。
 
 
 
 
Wired 的網站編排方式也是用卡片設計為主,從圖片中可以發現,在行動裝置上,格式的改變。
我們整理一下卡片式的設計的主要優點 : 
  • 卡片式設計讓版面更有組織性,卡片無論如何擺設都不會讓整個設計看起來很雜亂
  • 卡片式設計對於響應式網站來說是個理想的設計方式
  • 卡片式的設計可以更有效率的呈現網頁的資訊 
  • 卡片式的設計讓網站不會頭重腳輕
 
未來在網站改版的情況下,不防將卡片式網站設計的精神加入,讓使用者可以看完內容後可以採取行動!
 
 
熱門文章

行銷STP 品牌市場定位:報紙廣告實戰演練

先了解自己,才能步入正軌,成長茁壯,發揚光大。 你了解自己的產品服務嗎? 在艱難的行銷道路上,是否開始迷失方向? 好的定位讓您上天堂,沒有明確定位則會讓你陷入泥淖,越陷越深離目標越來越遠。   今日來分享KPN奇寶廣告優化績效師日常- ....

SEO是什麼?SEO該怎麼做?一篇就懂SEO搜尋引....

我不了解什麼是SEO   什麼是SEO(搜尋引擎優化)?   SEO是Search Engine Optimization的縮寫,中文稱作搜尋引擎優化。是一種對搜尋引擎規則的了解,針對網站進行調整,同時打造優良的使用者體驗,提供使用者關心的資訊與內容,進而提升網站排....

在你的FB粉絲專頁新增Instagram頁籤!

不知道你有沒有注意過,有些粉絲專頁上會有Instagram的應用程式。 如果你也是常使用Instagram分享圖片做行銷的廠商,可以一起看看究竟要如何連結這兩種社群平台喔! 目錄 登入FB 搜尋「Instatab」 新增粉絲專業 請點選「小齒輪圖示」 選擇「編輯設定....

結構化資料與語意標記,讓Google更懂網站的....

結構化資料標記,讓Google更懂網站的心! 2020/05/29 更新:使用影片結構化資料搜尋成效   你有沒有在搜尋資料的時候,在結果頁上看到有些網頁呈現出來的資訊就是比其他人還要豐富?能夠展示公司網站中重要頁面、最近的活動、發文、或是在地商家的評等....

延伸閱讀

如何創造終極廣告到達頁面?

如何創造終極廣告到達頁面?   在一個「內容為王」的時代,提供給訪客有幫助的內容非常重要,但卻從沒有思考過用戶或許沒有時間、興趣和耐心坐在電腦前看著一行又一行的文字,想要廣告帶來有效的轉換率,到達頁面扮演了非常重要的角色,除了要提供給訪客他們想....

6大響應式網頁設計的重點要素

6大響應式網頁設計的重點要素 為何要做多螢(響應式)網頁設計? 近兩年行動商務迅速崛起,消費者的習慣已逐漸改變,傳統透過電視當作娛樂,手機當做聯絡工具的時代已經正式走入歷史,現在每一個可見的螢幕載具,幾乎都一具多用,能聯絡、看影片、工作、娛樂、購物......

A/B測試小改變,大大提高轉化率

當消費者透過廣告連結到公司網站,往往會帶來相當的流量,但畢竟行銷活動常常只是曇花一現的嘉年華會,要如何讓消費者藉此機會對產品或服務產生黏著性,最終還是得回到用戶體驗設計的邏輯上來,從產品的內容和網站動線來留住消費者的心才是長久之計。   &nbs....

網站表格很多,怎樣設計對行銷最好?

網站設計分享-以表格設計為主的內容行銷 要如何打造吸引人的網站內容??今天KPN設計部要分享以表格設計為主的內容應該要注意什麼?根據我們做了千千百百個專案經驗,將其珍貴經驗分享給大家:       (1)首先是以表格label tag的左與上的差別....

Copyright © KPN SEO 2020. All Rights Reserved / 台北市大安區羅斯福路三段301號8樓 02-23698858 service@kpnweb.com

線上客服