ความลับของประสิทธิผลของการออกแบบการ์ด - SkillsUp - แคตตาล็อกบทเรียนที่สะดวกสบายเกี่ยวกับการออกแบบ คอมพิวเตอร์กราฟิก บทเรียน Photoshop บทเรียน Photoshop หน้าจอความละเอียดสูง จำกัดองค์ประกอบ UI

คุณต้องการพัฒนาอินเทอร์เฟซสไตล์การ์ดที่ทันสมัยหรือไม่? นี่อาจไม่ใช่ความคิดที่ไม่ดี การ์ดเป็นที่นิยมและใช้งานง่าย เหมาะสำหรับการออกแบบดิจิทัลและขนาดหน้าจอทุกประเภท กุญแจสำคัญในการออกแบบสไตล์การ์ดที่ประสบความสำเร็จคือการสร้างสิ่งที่ผู้ใช้ต้องการคลิก การ์ดควรทำหน้าที่เป็นที่เก็บเนื้อหาเฉพาะ เช่น ลิงก์ แบบฟอร์มเข้าสู่ระบบ โปรแกรมเล่นวิดีโอ ฯลฯ ที่ผู้ใช้ต้องการโต้ตอบด้วย ต่อไปนี้เป็นวิธีสร้างการออกแบบนี้

เริ่มต้นด้วยโครงร่างขาวดำ

ฟังดูง่ายมาก: เริ่มต้นด้วยการจำลองการออกแบบของคุณเป็นขาวดำ ลองนึกถึงจุดประสงค์ของการ์ดและส่วนใดของการ์ดที่สามารถคลิกได้ (การ์ดทั้งหมดสามารถใช้เป็นลิงก์ได้)

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

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

เช่นเดียวกับโปรเจ็กต์อื่นๆ หากการออกแบบไม่ทำงานเป็นขาวดำ เวอร์ชันสุดท้ายที่ออกแบบอย่างสมบูรณ์ก็จะใช้งานไม่ได้เช่นกัน

ใช้พื้นที่ว่างจำนวนมาก

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

“อากาศ” ที่อุดมสมบูรณ์จะทำให้องค์ประกอบการออกแบบมีพื้นที่ว่าง ทำให้การ์ดทั้งหมดดูกว้างขึ้น และเพิ่มความสามารถในการอ่าน

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

เพิ่มสีและเฉดสีที่เป็นธรรมชาติ

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

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

ใช้กฎทางกายภาพบางประการที่ใช้บังคับเมื่อคุณถือการ์ดไว้ในมือ:

• แสงจะทำให้เกิดเงาด้านล่างและด้านล่างของการ์ด
• ส่วนที่มืดที่สุดของดีไซน์จะอยู่ที่ด้านล่างของดีไซน์ เพราะโดยปกติแล้วเมื่อคุณถือการ์ดไว้ในมือ แสงจะมาจากด้านบน
• หลีกเลี่ยงการโพสต์เนื้อหาในตำแหน่งที่คุณจะถือการ์ดไว้ในมือ
• จุดสัมผัส (คำกระตุ้นการตัดสินใจ ฯลฯ) ควรเป็นจุดสนใจ และการโต้ตอบควรง่ายและชัดเจน (เช่นเดียวกับการเล่นไพ่ องค์ประกอบหลักคือศูนย์กลางของการออกแบบ)
• การ์ดใบเดียว - หนึ่งหน่วยข้อมูล

ง่าย ๆ เข้าไว้

ตอนนี้ โดยคำนึงถึงคุณสมบัติทางกายภาพแล้ว ให้ไปยังขั้นตอนถัดไป - สร้างรูปแบบการ์ดทั่วไปสำหรับอินเทอร์เฟซทั้งหมด ไม่รู้ว่าจะเริ่มตรงไหน? จุดเริ่มต้นที่ดีน่าจะเป็น คู่มือการออกแบบวัสดุจาก Google

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

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

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

เลือกแบบอักษรที่เรียบง่าย

เมื่อพูดถึงเรื่องการพิมพ์ ฟอนต์ sans serif แบบธรรมดามักเป็นทางออกที่ดีที่สุด หลีกเลี่ยงแบบอักษรที่บางหรือแคบเกินไปเนื่องจากอาจมองเห็นได้ยาก

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

จำกัดองค์ประกอบ UI

ข้อควรจำ: ไพ่หนึ่งใบเท่ากับหนึ่งการกระทำ

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

รักษารูปร่างและการออกแบบให้เรียบง่ายเหมือนเดิม Material Design เป็นตัวเลือกที่ยอดเยี่ยม และพยายามอย่าสร้างปุ่มมากกว่าหนึ่งปุ่ม

ปุ่มอาจเป็นองค์ประกอบ UI เดียวที่คุณต้องการ พยายามเพื่อมัน

บทสรุป

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

การแปล – โต๊ะทำงาน

26.12.2016

การ์ดคือที่เก็บข้อมูลเล็กๆ น้อยๆ ที่เรียบร้อย- การ์ดเกือบจะกลายเป็นองค์ประกอบที่ต้องมีเมื่อต้องรักษาสมดุลระหว่างความสวยงามและการใช้งานที่เรียบง่าย เดิมทีการออกแบบการ์ดได้รับการแนะนำโดยบริการต่างๆ เช่น Pinterest และ Facebook และในปัจจุบันอิทธิพลของการ์ดได้แพร่กระจายไปยังหลายอุตสาหกรรม

การออกแบบการ์ดที่ดำเนินการอย่างดีสามารถปรับปรุง UX (ประสบการณ์ผู้ใช้) ของแอปพลิเคชันของคุณได้ ในบทความนี้ ฉันจะอธิบาย 5 เทคนิคที่เป็นประโยชน์ในการออกแบบการ์ดและยกตัวอย่างที่น่าสนใจ

• อ่านเพิ่มเติม:

1. ปฏิบัติตามกฎ “ไพ่ใบเดียว - หนึ่งแนวคิด”

2. พื้นผิวทั้งหมดของการ์ดจะต้องคลิกได้

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

คำแนะนำ:เป็นการดีเมื่อไพ่สร้างเงาเพื่อแสดงความลึก - นี่คือ ยืนยันความสามารถในการคลิกของการ์ดด้วยสายตา.

3. ทำให้การ์ดดูน่าดึงดูด

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

เมื่อพูดถึงการออกแบบการ์ด คุณต้องเน้นไปที่ประเด็นต่อไปนี้:

รูปภาพ

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

เงาและการไล่ระดับสี

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

วิชาการพิมพ์

คุณยังสามารถดึงดูดความสนใจของผู้ใช้โดยใช้ข้อความได้ ทุกอย่างในการออกแบบการ์ดควรอ่านและทำความเข้าใจได้ง่าย:

• ใช้ แบบอักษรที่เรียบง่ายและจานสี (ข้อความสามารถอ่านได้มากที่สุดบนพื้นหลังที่ตัดกัน)
• ลองใช้แบบอักษรจำนวนขั้นต่ำ สำหรับการออกแบบการ์ด แบบอักษรเดียวก็เกินพอ

คำแนะนำ: แบบอักษร sans-serif ปกติเหมาะสำหรับการ์ด

• อ่านเพิ่มเติม:

4. จำกัดเนื้อหาการ์ด

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

ด้านล่างนี้เป็นตัวอย่างอินเทอร์เฟซของการ์ด สังเกตการ์ดที่อยู่ตรงกลาง ปัญหาคือมีข้อมูลมากมายซึ่งทำให้การ์ดเข้าใจยาก

5. ใช้ประโยชน์จากแอนิเมชั่นและการเคลื่อนไหว

ภาพเคลื่อนไหวสามารถส่งผลดีต่อ UX ได้หากใช้อย่างถูกต้อง ช่วยให้ผู้คนใช้งานอินเทอร์เฟซของการ์ดได้ดีขึ้น และสร้างการเชื่อมต่อด้วยภาพระหว่างสถานะต่างๆ ของการ์ดแต่ละใบ

สัญญาณภาพ

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

การตอบสนองด้วยภาพ

การตอบสนองด้วยภาพมีความสำคัญมากในการออกแบบอินเทอร์เฟซ มันใช้งานได้เพราะมันสนองความต้องการตามธรรมชาติของผู้ใช้ การยืนยัน- ในชีวิตจริง วัตถุตอบสนองต่อปฏิสัมพันธ์ และนี่คือสิ่งที่ผู้คนคาดหวังจากวัตถุ สำหรับแอปพลิเคชันเดสก์ท็อปหรือเว็บไซต์ คุณสามารถใช้เอฟเฟกต์โฮเวอร์เพื่อแสดงว่าวัตถุสามารถโต้ตอบได้ แอนิเมชั่นโฮเวอร์ช่วยเพิ่มระดับความเข้าใจและในขณะเดียวกันก็ทำให้ประสบการณ์ผู้ใช้สนุกสนานยิ่งขึ้น

การใช้เอฟเฟกต์โฮเวอร์คุณสามารถเปิดตัวเลือกต่างๆ ได้ ในตัวอย่างด้านล่าง เอฟเฟกต์โฮเวอร์ทำให้ผู้ใช้สามารถเปลี่ยนสี ตอบกลับข้อความ ส่งหรือลบข้อความได้

ดังนั้น ในบทความนี้ ฉันจะอธิบายให้คุณฟังว่า “การออกแบบการ์ด” คืออะไร และมันส่งผลต่อการออกแบบเว็บโดยทั่วไปอย่างไร

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

อย่างไรก็ตาม เราสามารถพูดได้อย่างมั่นใจว่าแผนที่ไม่ได้เป็นเพียงกระแสการออกแบบเท่านั้น แต่ยังเป็นอนาคตของการพัฒนาเว็บ เนื่องจากเป็นวิธีที่ดีที่สุดในการจัดระเบียบและแสดงเนื้อหาในลักษณะที่สอดคล้องกัน ดังนั้น ในบทความนี้ ฉันจะอธิบายให้คุณฟังว่า "การออกแบบการ์ด" คืออะไร และส่งผลต่อการออกแบบเว็บไซต์โดยทั่วไปอย่างไร ไป!

การออกแบบการ์ดตามยุคสมัย

แม้ว่าแผนที่จะได้รับความนิยมอย่างมากในการออกแบบเว็บไซต์เมื่อไม่นานมานี้ แต่ก็เป็นวิธีการสื่อสารด้วยภาพที่มีประสิทธิภาพมาเป็นเวลาอย่างน้อยพันปีแล้ว เปิดตัวครั้งแรกเป็นเกมในจักรวรรดิจีนในศตวรรษที่ 9 การ์ดจึงมีประโยชน์ในโลกธุรกิจในเวลาต่อมา

อันที่จริงในศตวรรษที่ 17 "การ์ดสะสม" ปรากฏตัวครั้งแรกในลอนดอนด้วยความช่วยเหลือจากผู้คนในการหางาน นี่เป็นตัวอย่างแรกของ "นามบัตร" สมัยใหม่

ปัจจุบันบัตรนี้มักจะเป็นรูปแบบคูปองจากร้านค้าหรือซูเปอร์มาร์เก็ต ผู้คนสะสมเพื่อรับส่วนลดพิเศษ

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

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

แผนที่บนอินเทอร์เน็ตคืออะไร?

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

วัตถุประสงค์หลักของแผนที่คือการให้ภาพรวมโดยย่อของหัวข้อเฉพาะในพื้นที่อับอากาศ และหากผู้อ่านสนใจข่าวสารก็สามารถไปที่หน้าใหม่พร้อมเนื้อหาเต็มได้ในคลิกเดียว เว็บไซต์ Facebook หรือ Twitter ใช้ประโยชน์จากสิทธิประโยชน์เหล่านี้และได้รวมเทมเพลตการ์ดในการออกแบบ แสดงเนื้อหาจำนวนมากในขณะที่ประหยัดพื้นที่อันมีค่า

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

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

เหตุใดคุณจึงควรใช้การ์ด?

เนื่องจากการ์ดกลายเป็นสากล จึงสามารถใช้งานได้หลายวิธีขึ้นอยู่กับฟังก์ชันที่ต้องการ ด้านล่างนี้คือเหตุผลบางประการว่าทำไมจึงควรใช้การ์ด:

นี่คือเทรนด์: เทรนด์เกิดขึ้นชั่วคราว แต่ด้วยการใช้แผนที่ คุณสามารถทำให้เว็บไซต์ของคุณมีชื่อเสียงได้อย่างมีประสิทธิภาพ

แผนที่แนะนำลำดับ: แผนที่แนะนำชั้นของการจัดระเบียบสำหรับเนื้อหา

แผนที่เหมาะอย่างยิ่งสำหรับการออกแบบที่ตอบสนอง: พอดีกับเว็บไซต์และแอปพลิเคชันมือถือได้อย่างง่ายดาย สิ่งสำคัญที่สุดคือ บนสมาร์ทโฟน แผนที่สามารถซ้อนกันในแนวตั้งเพื่อสร้างฟีดข่าวได้อย่างง่ายดาย

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

เป็นโซเชียล: การ์ดเหมาะสำหรับโซเชียลมีเดีย ไม่เพียงเพราะการใช้โซเชียลมีเดียเท่านั้น แต่ยังเป็นเพราะการ์ดทำให้ผู้ใช้สามารถแชร์ข้อมูลผ่านแพลตฟอร์มโซเชียลต่างๆ และทางอีเมลได้อย่างง่ายดาย

แนวโน้มและแนวทางสมัยใหม่ในการพัฒนาเว็บไซต์

เรียนรู้อัลกอริทึมสำหรับการเติบโตอย่างรวดเร็วตั้งแต่เริ่มต้นในการสร้างเว็บไซต์

ความสำคัญของเนื้อหาจะถูกลดระดับลง: แผนที่ช่วยให้คุณตัดสินใจว่าบทความใดเหมาะที่สุดที่จะวางไว้ที่ด้านบนของหน้า เมื่อใช้แผนที่ กลุ่มเนื้อหาที่มีความสำคัญเท่ากันสามารถอยู่ร่วมกันในหน้าเดียวกันได้อย่างง่ายดายโดยไม่จำเป็นต้องจัดอันดับ ผู้ใช้ตัดสินใจว่าอะไรสำคัญสำหรับเขาและสิ่งที่เขาต้องการอ่าน

ใครใช้บัตรบ้าง?

เลี้ยงบอล

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

พินเทอเรสต์

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

Twitter ซึ่งจำกัดความยาวไว้ที่ 144 อักขระต่อโพสต์ เกิดมาพร้อมกับ "เลย์เอาต์การ์ดในตัว" เมื่อปีที่แล้ว โซเชียลเน็ตเวิร์กได้เปิดตัวผลิตภัณฑ์ของตัวเองชื่อ Twitter Cards ซึ่งเป็นแอปที่ออกแบบมาเพื่อช่วยคุณแมปเนื้อหาของคุณเมื่อคุณโพสต์ลงในระบบ นักพัฒนาอธิบายว่าแอปพลิเคชันของตนสามารถ:

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

ด้วยเหตุนี้ หน้าแรกของ Twitter จึงเต็มไปด้วยการ์ดทวีต เมื่อคลิกที่รายการใดรายการหนึ่ง ทวีตจะขยายออกโดยแสดงเนื้อหาหรือตัวเลือกเพิ่มเติม

เดอะการ์เดียน

หนังสือพิมพ์ชื่อดังของอังกฤษอย่าง The Guardian ใช้การออกแบบการ์ดบนเว็บไซต์เพื่อ “คิดแตกต่างและปรับปรุงการค้นพบและการโปรโมตเนื้อหา”

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

บทสรุป

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

ด้วยความดึงดูดสายตา อินเทอร์เฟซของการ์ดจึงเป็นมากกว่าเทรนด์

ในปี 2014 อินเทอร์เน็ตเริ่มมีการใช้งานบนอุปกรณ์เคลื่อนที่บ่อยกว่าบนคอมพิวเตอร์ นั่นเป็นเหตุผลว่าทำไมการออกแบบเว็บไซต์ในปัจจุบันจึงนิยมใช้หน้าจอขนาดเล็ก และการออกแบบแบบตอบสนองจึงกลายเป็นสิ่งจำเป็น เราจะพูดอะไรได้บ้างเกี่ยวกับปี 2018 เมื่อตามสถิติจากสำนักข่าว RNS พบว่าชาวรัสเซีย 54% ใช้อินเทอร์เน็ตบนมือถือแล้ว ด้วยเหตุนี้ รูปแบบอินเทอร์เฟซที่เรียบง่าย เช่น การออกแบบแบนใหม่ ความเรียบง่าย และโดยเฉพาะอย่างยิ่ง การ์ดจึงได้รับความนิยมมากขึ้นกว่าที่เคย

ความเหมาะสมของรูปแบบ UI ของการ์ดนั้นมีมากกว่าเวลาในการโหลดที่รวดเร็วและความสามารถในการปรับให้เข้ากับขนาดหน้าจอที่แตกต่างกัน เนื้อหาที่จำกัดเหมาะกับช่วงความสนใจของผู้ใช้เว็บส่วนใหญ่ (โดยเฉพาะบนอุปกรณ์มือถือ) เทมเพลตการ์ดได้รับการเลี้ยงดูโดย Pinterest และต่อมาได้รับความนิยมในโซเชียลเน็ตเวิร์ก เช่น Facebook และ Twitter ปัจจุบันเทมเพลตการ์ดนี้สามารถพบได้บนเว็บไซต์ในทุกอุตสาหกรรม

ในบทความนี้ เราจะสำรวจการเพิ่มขึ้นของรูปแบบ UI ของการ์ด: เหตุใดจึงใช้งานได้จริง เข้ากันได้กับการออกแบบที่ตอบสนองและ Material อย่างไร และคาดหวังอะไรจากรูปแบบดังกล่าวในอนาคต

การออกแบบเว็บคอนเทนเนอร์คืออะไร?

เพื่อทำความเข้าใจรูปแบบนี้ คุณต้องเข้าใจก่อนว่าตัวไพ่คืออะไร การ์ดมักจะเป็นที่เก็บข้อมูลขนาดเล็ก การ์ดแต่ละใบมีธีมของตัวเอง การ์ดสามารถมีเนื้อหาใดก็ได้ - ภาพ ข้อความ ลิงก์ ฯลฯ - แต่ข้อมูลทั้งหมดมีไว้สำหรับหัวข้อเดียว

การเติมเต็มหน้าจอด้วยคอนเทนเนอร์ข้อมูลที่เป็นอิสระเหล่านี้คือสิ่งที่ The Guardian เรียกว่า "แบบจำลองคอนเทนเนอร์" มันมีอินเทอร์เฟซที่สะอาดตา เหมาะสำหรับการท่องเว็บอย่างรวดเร็ว เพื่อให้ผู้ใช้สามารถค้นหาสิ่งที่ต้องการได้อย่างง่ายดาย (นอกจากนี้วิธีนี้ยังเหมาะสำหรับระบบควบคุมแบบสัมผัสซึ่งเราจะเขียนเกี่ยวกับด้านล่าง)

ใช้งานได้จริงและน่าดึงดูด: ประโยชน์ของรูปแบบ UI ของการ์ดโดยสรุป

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

คุณสนใจไหม? อ่านบทความล่าสุดพร้อมตัวเลือก 18 เทรนด์ยอดนิยมประจำปี 2018

รูปแบบ UI ของการ์ดบนอุปกรณ์เคลื่อนที่และการออกแบบที่ตอบสนอง

ตามที่ระบุไว้ก่อนหน้านี้ การ์ดเข้ากันได้กับการออกแบบที่ตอบสนองได้อย่างไม่น่าเชื่อ ทำให้เป็นไปตามคำพูดของ Des Traynor ของ Intercom "อนาคตของเว็บ" รูปแบบนี้เข้ากันได้ดีกับอุปกรณ์เคลื่อนที่ด้วยเหตุผลหลายประการ ซึ่งเราจะอธิบายด้านล่าง

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

เปรียบเทียบภาพหน้าจอของเว็บไซต์ The Verge ด้านบนกับเวอร์ชันมือถือด้านล่าง:

สังเกตว่าข้อความ รูปภาพ และรูปแบบสียังคงเหมือนเดิม เมื่อพัฒนาการออกแบบเว็บแบบตอบสนอง การ์ดช่วยให้คุณได้รับการออกแบบที่สอดคล้องกันบนอุปกรณ์ต่างๆ คุณสามารถดูสิทธิประโยชน์นี้ได้ใน UXPin Design Lab ฟรี สังเกตว่าเค้าโครงที่ไหลจากเวอร์ชันมือถือไปสู่โหมดการดูแบบเต็มหน้าจอนั้นสะอาดตาเพียงใด

พื้นที่ดูเวอร์ชันมือถือ:

พื้นที่การดูแบบเต็มหน้าจอ:

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

การออกแบบการ์ดและวัสดุ

การออกแบบวัสดุ เหมาะสำหรับ ต้องใช้การ์ดเป็นอย่างมาก และการวิเคราะห์ทางเทคนิคโดยละเอียดจะต้องใช้พื้นที่มาก ดังนั้น หากคุณต้องการคำอธิบายที่ครอบคลุม ก็ควรอ่านคำอธิบายการ์ดในคู่มือดีไซน์ Material

การพัฒนาเว็บไซต์ อนาคตของการออกแบบการ์ด

เนื่องจากรูปแบบ UI ของการ์ดมีการเปลี่ยนแปลงรูปร่างอยู่ตลอดเวลาเพื่อให้เป็นไปตามข้อกำหนดใหม่ จึงน่าจะมีผลกระทบที่ใหญ่ที่สุดต่อการตอบสนองและการออกแบบแอป การเปลี่ยนแปลงนี้ส่วนหนึ่งอิงจากผลกระทบแบบหน้าต่อหน้าที่ดีไซน์ Material มีต่อแอป Android

1. เทคโนโลยี

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

วิดีโอจะเข้ามาแทนที่รูปภาพมากขึ้นเรื่อยๆ (แนวคิดที่นักออกแบบบางคนเล่นกันมานานหลายปี) ใช้อินเทอร์เฟซของคุณ (ด้านบน) ใช้การ์ด GIF แบบเคลื่อนไหวที่เติมเต็มหน้าแรกด้วยข้อมูลมากมาย

2. การมีปฏิสัมพันธ์ที่ลึกซึ้งยิ่งขึ้น

ในอนาคตอันใกล้ ความคิดสร้างสรรค์ในการใช้การ์ดอาจเพิ่มขึ้น และจะไม่เป็นเพียงลิงก์อีกต่อไป ดังที่เราเห็นในการออกแบบ Material การ์ดจะแตกต่างกันไปในระดับปฏิสัมพันธ์ระหว่างการ์ดกับสภาพแวดล้อม เช่น การเรียงลำดับอัตโนมัติและการอัปเดตแบบเรียลไทม์ (เช่น การพยากรณ์อากาศ)

Windows Phone ได้เปิดตัวการเรียงลำดับการ์ดอัตโนมัติแล้ว แต่แนวทางนี้อาจนำไปใช้กับผู้ใช้อุปกรณ์มือถืออื่นๆ ได้

ขนาด 3

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

HOW Arkitekter (ด้านบน) ผสมการ์ดขนาดใหญ่และขนาดกลางในการนำทาง การ์ดบางใบเป็นลิงก์ ในขณะที่บางการ์ดเพียงแสดงข้อมูลคงที่ พื้นที่กว้างแยกการ์ดออกจากกัน ทำให้ดีไซน์ดูโปร่งสบาย

4. อุปกรณ์สวมใส่ได้

ต้องขอบคุณ Google Glass การ์ดจึงกลายเป็นองค์ประกอบหลักของการออกแบบ UI สำหรับอุปกรณ์สวมใส่

แม้ว่านักวิจารณ์อาจมองว่า Google Glass เป็นความล้มเหลวในเชิงพาณิชย์ แต่บางคนก็เชื่อว่ายังมีโอกาสในตลาด ไม่ว่าจะเกิดอะไรขึ้น อุปกรณ์สวมใส่ก็จำเป็นต้องใช้พื้นที่อย่างมีประสิทธิภาพ และในกรณีนี้ การ์ดจะเป็นตัวเลือกที่ใช้งานได้จริงที่สุด

การพัฒนาเว็บไซต์ 2559-2561 บทสรุป

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

อ่านบทความเกี่ยวกับบทความอื่น - ดูโอโทนหรือดูเพล็กซ์

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

รูปแบบการ์ดมีความสะดวกไม่เพียงแต่จะช่วยลดเวลาในการโหลดหน้าเว็บและลดความยุ่งยากในการปรับขนาดอินเทอร์เฟซสำหรับหน้าจอต่างๆ เนื้อหาชิ้นเล็กๆ ตรงกับช่วงความสนใจของผู้ใช้เว็บ (โดยเฉพาะผู้ที่ใช้อุปกรณ์เคลื่อนที่) แรงบันดาลใจจาก Pinterest และได้รับความนิยมจากโซเชียลเน็ตเวิร์กเช่น เฟสบุ๊คและ ทวิตเตอร์, อินเทอร์เฟซการ์ดในปัจจุบันสามารถเห็นได้บนเว็บไซต์ในทุกหัวข้อ ในบทความนี้ เราจะดูรูปแบบ UI ของการ์ดโดยสมบูรณ์: อะไรคือข้อดีของรูปแบบนี้ รูปแบบดังกล่าวเข้ากับแนวคิดของการออกแบบแบบปรับเปลี่ยนได้และวัสดุอย่างไร และสิ่งที่คาดหวังจากรูปแบบดังกล่าวในอนาคต

ที่มา: ใช่อย่างเป็นทางการ

การออกแบบตามคอนเทนเนอร์คืออะไร?

หากต้องการเข้าใจรูปแบบ คุณต้องเข้าใจแนวคิดของตัวการ์ดก่อน

โดยพื้นฐานแล้ว การ์ดเป็นภาชนะขนาดเล็กสำหรับเก็บชิ้นส่วนข้อมูล และการ์ดแต่ละใบมีความคิดที่เป็นอิสระ สามารถมีเนื้อหาประเภทใดก็ได้: รูปภาพ, ข้อความ, ลิงก์ ฯลฯ - การ์ดทั้งหมดรวมเป็นหนึ่งเดียวตามธีมทั่วไป

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

การ์ดในอินเทอร์เฟซของเว็บไซต์บนมือถือและแบบตอบสนอง

ดังที่ฉันได้เขียนไปแล้ว อินเทอร์เฟซของการ์ดเข้ากันได้ดีกับเฟรมเวิร์กที่ตอบสนอง ซึ่งเป็นสาเหตุที่ Des Traynor ของ Intercom เรียกมันว่าอนาคตของเว็บ รูปแบบ UI นี้แปลได้ดีกับอุปกรณ์มือถือด้วยเหตุผลหลายประการ - เราจะพูดถึงมันตอนนี้

ที่มา: The Verge

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

เปรียบเทียบวิวพอร์ตบนเดสก์ท็อป (ด้านบน) และมือถือ (ด้านล่าง) จาก The Verge:

ที่มา: The Verge (ไซต์บนมือถือ)

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

คุณสามารถดูหลักการนี้ได้จริงโดยไปที่หน้าไลบรารีฟรีสำหรับนักออกแบบบน UXPin สังเกตว่าเลย์เอาต์ปรับขนาดจากอุปกรณ์เคลื่อนที่เป็นวิวพอร์ตเต็มหน้าจอได้อย่างราบรื่นเพียงใด

วิวพอร์ตมือถือ:

ที่มา: UXPin

หน้าจอความละเอียดสูง:

ที่มา: UXPin

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

อนาคตของการ์ด

รูปแบบ UI ที่ใช้การ์ดมีการพัฒนาอย่างต่อเนื่องเพื่อตอบสนองความท้าทายใหม่ๆ ซึ่งส่วนใหญ่เป็นแบบตอบสนองและการออกแบบแอป ดังที่เราได้พูดคุยกันในเทรนด์การออกแบบเว็บไซต์ปี 2015 และ 2016 การเปลี่ยนแปลงเหล่านี้ส่วนหนึ่งเป็นผลมาจากผลกระทบที่ดีไซน์ Material มีต่อแอป Android

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