方格精選

掌握 3 要領,新手也能設計出「簡潔、易懂」的懶人包圖卡!

更新於 發佈於 閱讀時間約 6 分鐘

許多人都有這樣的煩惱,手上的資料很豐富齊全,想要和他人分享,卻難以清楚表達。未經整理的資訊,就像是沒有分段的文章,儘管內容很好,但就是讓人讀不下去。

想要做出簡單好讀的懶人包圖卡,如果沒有設計技能,有辦法做到嗎?身為一位經常製作社群圖卡的設計師,我認為懶人包的重點是「資訊整理」,美感只是基本條件。然而不會設計的人,只要掌握這 3 個要領,也能做出具有一定質感的懶人包圖卡。


懶人包圖卡設計 3 要領

懶人包圖卡設計 3 要領


要領 1:一次一重點


懶人包圖卡最忌諱的就是「資訊爆炸」,就像說話,一次只說一件事,總比一次說十件事更好理解。在開始製圖之前,先把內容理出重點,最好可以分類或列點,舉例來說,一場活動的訊息就可分成「活動資訊」、「時程表」、「聯絡方式」等,或者是將盤點美食優惠列成 10 大點。

一次只要一重點,一張圖只說一個項目,有 10 大點就分成 10 張圖,處理少少的資料總比處理大量文字來得輕鬆吧!


要領 1:一次一重點

要領 1:一次一重點


要領 2:用色單純化


繽紛的色彩可以很活潑,也可能很雜亂,要是沒有掌握好界線,就很有可能成為後者。最不容易出差錯的方式,就是將用色單純化。舉例來說,使用單色或雙色來做為主要配色,不確定怎麼配色的話,選擇同色系做深淺變化也很好。

重點文字的部分,可使用對比色來做強調,就能在不破壞整體版面的情況下,凸顯想要傳達的重要資訊。


要領 2:用色單純化

要領 2:用色單純化


要領 3:字型統一化


不知道怎麼搭配字型,又想讓懶人包圖卡的質感提升,那就別讓圖上的字型超過 2 種。當畫面上有越多種類的字型同時出現,版面就會越顯雜亂。當然,在茫茫字海當中,千萬別使用新細明體!它真的很醜。

除此之外,字體的粗細是區分內容層次的絕佳工具,最大的標題字體最粗,內文則最細。掌握字體粗細的使用,即使只用同一種字型也能變化出很多花樣。


要領 3:字型統一化

要領 3:字型統一化



只要掌握以上 3 要領,即使是設計小白,也能做出簡潔有力又好看的圖卡啦!


...


或者至少,能夠理解國泰世華 CUBE App 究竟有多美!


介面以功能分類,線稿 icon 輕鬆辨別


CUBE App 以主要功能分類,一個分頁提供一個重點,包含「帳務總覽」、「投資」、「貸款」、「保險」、「更多」,功能很好找,介面使用很直覺。

我自己在使用網路銀行的習慣上,最常開啟的就是查詢帳務及轉帳功能,一打開 CUBE App 馬上就能找到。尤其是在帳務明細的介面,CUBE App 將搜尋功能做得很便捷,不只能搜尋帳務日期,還能分別搜尋「存入/提出/簽帳金融卡/薪資獎金」,甚至是使用「關鍵字」搜尋,這樣的方便程度,是在其他網路銀行 App 中相當少見的。不得不說,帳務明細採取白色方格堆疊呈現的方式,將最新資訊條列於最上方,視覺上簡潔易讀,一目瞭然,也是我相當滿意的部分。


CUBE App 以主要功能分類,功能很好找

CUBE App 以主要功能分類,功能很好找


帳務明細以白色方格堆疊呈現,簡潔易讀又美觀

帳務明細以白色方格堆疊呈現,簡潔易讀又美觀


選用白色為基底,淺綠色為主色調,適度跳色抓重點


CUBE App 的整體用色相當簡單,以白色為主、淺綠色為輔,並採用重點式的紅色、橙色、黃色,用暖色系來吸引目光,可以很輕易的從用色上,看出重點在哪裡、哪裡有新訊息正等待閱讀。

因為用色實在很清爽,在使用上較不會感到疲勞,而且能夠很快找到想使用的功能,在視覺的引導上很有幫助。


重點式紅色點點,作為提醒新訊息用途

重點式紅色點點,作為提醒新訊息用途




字型統一卻不單調,巧妙創造分明層次


在字型的選用上,CUBE App 的中文字基本上都是使用同樣的黑體,並採用不同粗細、灰階程度,來呈現出訊息的重要順序。這點在設計上真的很重要,不只能讓整體設計更有一致性、提升美感,善用字體粗細和大小,就能自然地將使用者的目光引導至對的地方。

CUBE App 採用統一化的字型,以字體粗細和顏色深淺來展現層次感

CUBE App 採用統一化的字型,以字體粗細和顏色深淺來展現層次感


以簡潔、留白創造美感的 CUBE App

以簡潔、留白創造美感的 CUBE App


整體來說,CUBE App 的介面設計不只有小清新風格,在功能使用上也很人性化,是設計師會愛不釋手的類型,不禁讓人心想,原來金融世界也可以具備美學啊!

另外提到,為同集團的國泰金控最近推出 國泰優惠CUBE Rewards App,一樣是走小清新風格的氣質設計,裡頭還能使用國泰世華小樹點兌換電子票券、航空飯店里程或是實體商品,我個人是超愛累積點數換票券的這種模式,因為通常用點數換都會比較便宜啊,精打細算也是種美學!


小樹點可用於兌換電子票券、航空飯店里程、實體商品等

小樹點可用於兌換電子票券、航空飯店里程、實體商品等



對於超愛開各種數位帳戶、使用超過 8 家網路銀行 App 的我來說,說實話國泰世華 CUBE App 介面設計真的很有質感,適度的留白,讓介面既乾淨又美觀。剛好多年前辦的簽帳金融卡 (大樹款) 即將停辦,最近收到寄來的新卡片,也順便來分享一下,灰灰藍藍的新卡面質感灰,真的很好看!可以深深的感受到,國泰世華是認真要將美學植入所有產品之中啊!


國泰世華新款簽帳金融卡,卡面灰藍色很有質感

國泰世華新款簽帳金融卡,卡面灰藍色很有質感


本文係由國泰世華銀行邀約

謹慎理財 信用無價 信用卡暨預借現金之各級別循環信用年利率為 6.75%~15%(依本行信用評分制度定期評估,循環利率之基準日為 104年9月1日)。預借現金手續費:預借現金金額乘以 3%加上新臺幣150元或美元5元,其他相關費用係依本行網站公告。




喜歡我的文章,請按下追蹤、愛心、留言~小小的舉動對我來說是大大的鼓勵 !

我的粉絲專頁 邊境牧羊犬的觀察筆記 三不五時會分享生活小故事,歡迎追蹤 :)


留言
avatar-img
留言分享你的想法!
月影紗💫-avatar-img
2025/01/10
這好實用!!馬上跟著說明製作卡片
邊境牧羊犬-avatar-img
發文者
2025/01/10
月影紗💫 太棒了~希望有幫助到你🥰
王木-avatar-img
2025/02/13
感謝您的分享,非常實用又明瞭!希望未來能做出這麼好看的圖卡 國泰的APP個人也覺得在各銀行中算特別漂亮簡潔的~
邊境牧羊犬-avatar-img
發文者
2025/02/14
王木 是啊,國泰的 App 是少數介面清楚明瞭的,有些銀行 App 可能功能太多(?),我都常找不到工具哈哈~
梧笙-avatar-img
2025/02/11
感謝分享,很實用。
狙擊王-avatar-img
2025/02/08
在網站上也很實用
Sylvia-avatar-img
2025/02/06
藍色新卡~我的白色卡片也好喜歡呢~
邊境牧羊犬-avatar-img
發文者
2025/02/07
Sylvia 白色卡片也好美❤️
avatar-img
邊境牧羊犬的觀察筆記
108會員
118內容數
我是邊境牧羊犬,自由接案的數位內容設計師,熱愛世上美的一切,在此將分享我感興趣的書籍、影視作品、旅遊美食、以及各種療癒心靈的事物。
2025/04/02
本文針對圖卡設計新手常犯的三大錯誤:字太多、字型多、沒重點,提供改善建議,並說明如何精煉文字、選擇適當字型和善用視覺層次強調重點,提升圖卡設計質感及品牌形象。
Thumbnail
2025/04/02
本文針對圖卡設計新手常犯的三大錯誤:字太多、字型多、沒重點,提供改善建議,並說明如何精煉文字、選擇適當字型和善用視覺層次強調重點,提升圖卡設計質感及品牌形象。
Thumbnail
2025/03/05
介紹常用的圖像排版方式「三分法」,說明如何運用此方法輕鬆設計出簡單大方的海報、優惠資訊或公告圖卡。文章包含步驟教學,從資訊整理、版型選擇到加入變化,逐步引導讀者學會運用三分法,並推薦相關書籍。
Thumbnail
2025/03/05
介紹常用的圖像排版方式「三分法」,說明如何運用此方法輕鬆設計出簡單大方的海報、優惠資訊或公告圖卡。文章包含步驟教學,從資訊整理、版型選擇到加入變化,逐步引導讀者學會運用三分法,並推薦相關書籍。
Thumbnail
2025/02/05
只要掌握文章排版的3項設計重點:字元間距、行距、字級,就能提升閱讀體驗,讓設計更有質感。
Thumbnail
2025/02/05
只要掌握文章排版的3項設計重點:字元間距、行距、字級,就能提升閱讀體驗,讓設計更有質感。
Thumbnail
看更多
你可能也想看
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
在傳統的筆記方法中存在著分類僵化和過度依賴關鍵字的問題。卡片筆記以一張卡片一個知識,確保知識的獨立性,並且建立知識間的多重連接,形成網狀結構。 這本書介紹了用卡片筆記做知識管理的技巧,幫助大家將零散的知識系統化,從而在需要時能夠迅速提取並應用。
Thumbnail
在傳統的筆記方法中存在著分類僵化和過度依賴關鍵字的問題。卡片筆記以一張卡片一個知識,確保知識的獨立性,並且建立知識間的多重連接,形成網狀結構。 這本書介紹了用卡片筆記做知識管理的技巧,幫助大家將零散的知識系統化,從而在需要時能夠迅速提取並應用。
Thumbnail
具有專業知識、技能或經驗,但尚未規劃成課程, 通常我會建議用便利貼進行整體的發想, 除了實體的便利貼以外,也可以用線上的便利貼軟體進行, 線上便利貼的好處是不用擔心牆面不夠用😆
Thumbnail
具有專業知識、技能或經驗,但尚未規劃成課程, 通常我會建議用便利貼進行整體的發想, 除了實體的便利貼以外,也可以用線上的便利貼軟體進行, 線上便利貼的好處是不用擔心牆面不夠用😆
Thumbnail
短時間教學,設計練習的四個訣竅: 1.最小產出成果 2.簡化流程步驟 3.提供素材或半成品 4.挑選錯誤並修正
Thumbnail
短時間教學,設計練習的四個訣竅: 1.最小產出成果 2.簡化流程步驟 3.提供素材或半成品 4.挑選錯誤並修正
Thumbnail
在人人都是自媒體的時代,如何打造個人專業知識品牌系統? 不知大家聽過知識系統三部曲嗎?這分別由建立價值、傳遞價值、獲取價值共三個面向所組成,看似簡單但實務上要怎麼做到呢? 一、建立價值的高手攻略-知識圖解 要結合你的經驗與觀點 要用自己的話重新詮釋 要能建立屬於你的架構 形式: 頻率: 平台:
Thumbnail
在人人都是自媒體的時代,如何打造個人專業知識品牌系統? 不知大家聽過知識系統三部曲嗎?這分別由建立價值、傳遞價值、獲取價值共三個面向所組成,看似簡單但實務上要怎麼做到呢? 一、建立價值的高手攻略-知識圖解 要結合你的經驗與觀點 要用自己的話重新詮釋 要能建立屬於你的架構 形式: 頻率: 平台:
Thumbnail
可以邊聽邊完成圖解紀錄到底怎麼做到的? 這是很多人常常問我的問題 而我的答案也往往分為兩個區塊 第一點、事前準備避免過多即興發揮 我常讓大家猜我自己在做視覺紀錄時,即興發揮的比重占多少? 有人猜99% 有人猜80% 有人猜50% 平均來說,大約20-30%左右 但你可能會好奇怎麼做到的?
Thumbnail
可以邊聽邊完成圖解紀錄到底怎麼做到的? 這是很多人常常問我的問題 而我的答案也往往分為兩個區塊 第一點、事前準備避免過多即興發揮 我常讓大家猜我自己在做視覺紀錄時,即興發揮的比重占多少? 有人猜99% 有人猜80% 有人猜50% 平均來說,大約20-30%左右 但你可能會好奇怎麼做到的?
Thumbnail
有不少人由於缺乏相關的概念認知,加上身邊的人沒有發覺引導,因而在校園與職場上表現便顯得弱勢。
Thumbnail
有不少人由於缺乏相關的概念認知,加上身邊的人沒有發覺引導,因而在校園與職場上表現便顯得弱勢。
Thumbnail
🖊️ 為什麼說,知識儲存難,則調用易。 有興趣的人可以google搜尋「必要難度理論」 🌞關於「知識卡片學習法」,推薦閱讀趙莎老師的《高效學習法》 📥卡片下載
Thumbnail
🖊️ 為什麼說,知識儲存難,則調用易。 有興趣的人可以google搜尋「必要難度理論」 🌞關於「知識卡片學習法」,推薦閱讀趙莎老師的《高效學習法》 📥卡片下載
Thumbnail
以近期看的簡報書來說,個人認為這本是最實用的。從簡報的構思到發表,非常簡要的說了重點,並且提供具體可行的策略,也提供了相應的例子。整體而言非常的推薦,適合需要簡報的人當作入門書仔讀。 首先是有關簡報的構思,作者提供了用便利貼具體化主要概念的做法,好處是這些便利貼移動容易,可以快速的調整順序和安排。另
Thumbnail
以近期看的簡報書來說,個人認為這本是最實用的。從簡報的構思到發表,非常簡要的說了重點,並且提供具體可行的策略,也提供了相應的例子。整體而言非常的推薦,適合需要簡報的人當作入門書仔讀。 首先是有關簡報的構思,作者提供了用便利貼具體化主要概念的做法,好處是這些便利貼移動容易,可以快速的調整順序和安排。另
Thumbnail
一位讀者問我:「什麼樣的文章寫法叫做『科普』」?其實不難,只要記得以下的幾個簡單原則,你也能寫或編出不錯的科普文章。
Thumbnail
一位讀者問我:「什麼樣的文章寫法叫做『科普』」?其實不難,只要記得以下的幾個簡單原則,你也能寫或編出不錯的科普文章。
Thumbnail
1.拆書有訣竅: Reading閱讀拆頁、Interpretation講解引導、Appropriation拆為己用。 2.活用便利貼,讀通一本書 3.三大思考,建造你的知識體系
Thumbnail
1.拆書有訣竅: Reading閱讀拆頁、Interpretation講解引導、Appropriation拆為己用。 2.活用便利貼,讀通一本書 3.三大思考,建造你的知識體系
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News