hand lthand lthand lthand lthand lthand lt
28Oct, 2020
Language blog :
Thai
Share blog : 
28 October, 2020
Thai

7 เทคนิคออกแบบ Card Design ให้มีประสิทธิภาพ!

By

3 mins read
7 เทคนิคออกแบบ Card Design ให้มีประสิทธิภาพ!

Card Design คืออะไร?

Card Design คือ เทคนิคในการออกแบบ User Interface (UI) โดยการนำเสนอข้อมูลออกมาเป็นการ์ด ​​​​​(Card) การ์ดแต่ละใบจะประกอบด้วยรูปภาพ, ข้อความ และลิงก์ไปยังหน้าที่มีข้อมูลรายละเอียดเพิ่มเติมเกี่ยวกับหัวข้อนั้น ๆ ซึ่งช่วยในการจัดกลุ่มข้อมูลให้ออกมาใช้งานได้ง่าย และสวยงาม

Card Design

(Reference: dribbble.com)

วันนี้เราจะมาแนะนำ 7 เทคนิคในการนำ Card Design มาใช้งานให้มีประสิทธิภาพมากที่สุด โดยคุณสามารถนำไปใช้ในการออกแบบการ์ดของคุณได้อย่างแน่นอน

1.โครงสร้างของ Card Design

ด้วยความที่เป็นรูปแบบการ์ด จะมีพื้นที่ค่อนข้างเล็ก หรือมีพื้นที่จำกัด เพราะฉะนั้น การ์ดจึงควรมีแต่องค์ประกอบที่สำคัญ ได้แก่ รูปภาพ, หัวข้อ, เนื้อหา และปุ่มต่าง ๆ เป็นต้น ซึ่งเทคนิคนี้ จะช่วยทำให้การจัดวางข้อมูลกระชับมากยิ่งขึ้น

Card Design Structure

2. หลีกเลี่ยงการเชื่อมโยงแบบอินไลน์ (Inline Links)

ข้อมูลในการ์ดต้องมีเนื้อหาที่ชัดเจน ละเอียด สามารถอ่านแล้วเข้าใจได้ทันที ไม่ควรมีลิงก์ที่ให้ผู้ใช้ต้องคลิก เพื่อไปอ่านเนื้อหาจากที่อื่น ดังนั้น ควรหลีกเลี่ยงการใช้ลิงก์แบบอินไลน์ในข้อความ เพื่อไม่ให้ผู้ใช้สับสน

Inline Link

(Reference: rubygarage.org)

3. เพิ่มเงาหรือเส้นขอบ

เทคนิคนี้จะช่วยให้การ์ดดูโดดเด่นขึ้น มีมิติ ไม่กลืนไปกับพื้นหลัง ทำให้ผู้ใช้เห็นได้ทันทีว่าการ์ดแต่ละใบมีพื้นที่เท่าไหร่

(Reference: rubygarage.org)

4. จัดเนื้อหาให้อ่านง่าย และชัดเจน

ข้อมูลทั้งหมดในการ์ดควรอ่านง่าย โดยแบ่งส่วนหัวข้อและเนื้อหาอย่างชัดเจน ซึ่งสามารถแบ่งได้จากสีข้อความ หรือการเลือกขนาดตัวอักษรที่เหมาะสม

(Reference: rubygarage.org)

5. ออกแบบการ์ดให้เรียบง่าย

พยายามออกแบบให้คลีนเข้าไว้ หลีกเลี่ยงเส้นขอบที่มากเกินไประหว่างองค์ประกอบ

(Reference: rubygarage.org)

6. จำกัดเนื้อหา

ระวังอย่าให้เนื้อหาท่วมการ์ด ควรมีข้อมูลย่อย ๆ เพื่อเกริ่นเนื้อหาพอสังเขป เมื่อคุณใส่เนื้อหาลงในการ์ดมากเกินไป จะทำให้การ์ดยาวเกินความจำเป็น ซึ่งจะทำให้ผู้ใช้หลุดโฟกัสในการอ่านเนื้อหานั้น

(Reference: rubygarage.org)

7. ใช้รูปภาพที่น่าดึงดูด

การใช้รูปภาพที่สอดคล้องกับเนื้อหา จะช่วยเพิ่มความน่าสนใจ และดึงดูดสายตาของผู้ใช้ หากน่าสนใจ ผู้ใช้จะอยากอ่านเนื้อหาใต้ภาพต่อ ดังนั้นควรเลือกรูปภาพอย่างระมัดระวัง

(Reference: rubygarage.org)

สุดท้ายแล้วการออกแบบการ์ดไม่ได้มีกฎตายตัวว่าต้องออกแบบอย่างไร ดีไซเนอร์สามารถออกแบบ ปรับแต่งได้ตามเห็นสมควร แต่สิ่งที่ต้องนึกถึงไว้ตลอด ก็คือความเรียบง่าย ไม่ซับซ้อนต่อผู้ใช้ แนวคิดพื้นฐานในการออกแบบ ใช้ประสบการณ์ของคุณให้เป็นประโยชน์ เรียนรู้ และพัฒนาตนเองอย่างต่อเนื่อง

 

Reference: 

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

17
April, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
17 April, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
หลายคนคงเคยเจอเหตุการต่างๆ บนโลกดิจิทัลที่สามารถนำพาเราไปเสียเงินหรือสมัครใช้บริการได้ง่าย ๆ ทั้งที่ไม่รู้ตัว ลองมาดูกันว่า พวกเขาเหล่านั้น ใช้วิธีหลอกล่อนักชอปอย่างเรากันอย่างไรบ้าง พื้นฐานของคนทั่วไปนั้นไม่อยากที่จะสูญเสียอะไรไป แม้แต่สิ่งที่อาจจะไม่จำเป็น เราอาจจะพบการทำการตลาดในเชิงนี้ได้บ่อย ๆ ทั้ง ๆ ที่เราไม่รู้ตัว และอาจจะไม่จำเป็นต้องซื้อแต่โดนกระตุ้นด้วยข้อมูลที่เรารับมาแบบงง ๆ เช่น Flash sale 40% สินค้าที่มีจำนวนจำกัด นั้นจะน่าสนใจมากกว่าการเดินเจอสินค้าเดียวกันในห้างที่ลดราคา 40% เช่นเดียวกัน ข้อความบนเว็บช็อปปิ้งที่ส่งมาหาคุณว่าสินค้าที่คุณเคยสนใจกำลังลดราคาอยู่ อย่าพลาดโอกาสที่จะซื้อตอนนี้ มักกระตุ้นความต้องการซื้อของเราได้เป็นอย่างดี เพราะเรากลัวที่จะเสียโอกาสดี

By

3 mins read
Thai
17
April, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
17 April, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
แต่ก่อน เวลาที่เว็บไซต์ถูกดีไซน์ด้วยฟอนต์แปลก ๆ หรือมีเอกลักษณ์เฉพาะตัว จะทำให้ผู้ใช้งานบางคนมองไม่เห็น เพราะในเครื่องของผู้ใช้งานไม่มีฟอนต์นั้น ระบบก็จะเลือกเอาฟอนต์อื่นในเครื่องขึ้นมาแสดงผล เห็นเป็นฟอนต์อื่นไป ทำให้ดีไซเนอร์ต้องแก้ปัญหาด้วยการทำรูปแล้วเอามาแปะในเว็บไซต์แทน หรือแม้ว่าจะแสดงผลตามที่ถูกออกแบบมา ความเร็วก็อาจเป็นปัญหาในการโหลดและเข้าถึง เพราะฟอนต์ถูกโหลดจากเซิร์ฟเวอร์ แต่สมัยนี้ไม่มีใครใจเย็นพอที่จะรออะไรนานๆ เพราะจากรายงานระบุว่า 40% ของคนที่เข้าเว็บไซต์ จะออกหรือปิดทันทีถ้ามีการโหลดนานกว่า 3 วินาที โดยเฉพาะนักช็อปออนไลน์เกือบครึ่งที่พร้อมจะหันหลังให้อีคอมเมิร์ซเว็บไซต์ที่โหลดช้ากว่า 2 วินาที และ 79% บอกว่ามีโอกาสที่จะไม่ใช้บริการอีก Google Fonts คืออะไร? (กันแน่) หลายคนคงรู้จัก Google Fonts แต่วันนี้เราจะพามาทำความรู้จักให้มากขึ้น

By

4 mins read
Thai
17
April, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
17 April, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
S&P Food’s yearly revenues were 435 mils $USD. 10% of the revenue was from online sales. The board of directors felt that online sales should account for more. The digital

By

4 mins read
English

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.