ข้อกำหนดการออกแบบเนื้อหาจาก Google มุ่งสู่แพลตฟอร์มแอนดรอยด์เป็นแนวทางในการแนะนำการออกแบบบนแพลตฟอร์มอย่างสม่ำเสมอ
01 จาก 06
วิธีสร้างบัตรออกแบบวัสดุใน Adobe Design Experience CC
เมื่อนักออกแบบเริ่มต้นเจาะลึกและเข้าใจแนวคิดเบื้องหลังเนื้อหา Material Design ได้กลายเป็นหนึ่งในปรัชญาที่มีอิทธิพลมากที่สุดใน การออกแบบเว็บและอุปกรณ์เคลื่อนที่ สิ่งที่คุณต้องทำเพื่อดูว่าเรากำลังทำอะไรอยู่คือการค้นหาเนื้อหาใน Pinterest และคุณจะเห็นตัวอย่างและการทดลองบนอุปกรณ์แท็บเล็ตและแม้แต่เว็บไซต์หลายร้อยตัวอย่าง
ลักษณะที่น่าสนใจของ Material Design คือความคิดของ Google เกี่ยวกับวิธีการที่แอปควรปรากฏและทำงานบนอุปกรณ์เคลื่อนที่ แต่แนวคิดเหล่านี้ถูกประยุกต์ใช้กับหน้าจอทุกขนาดบนแพลตฟอร์มใด ๆ ดังที่ Google ระบุไว้ในย่อหน้าที่เริ่มต้นของข้อกำหนด "เราท้าทายตัวเราเองในการสร้างภาพพจน์สำหรับผู้ใช้ของเราที่จะสังเคราะห์หลักการคลาสสิกของการออกแบบที่ดีพร้อมด้วยนวัตกรรมและความเป็นไปได้ทางเทคโนโลยีและวิทยาศาสตร์ นี่คือการออกแบบวัสดุ ข้อมูลจำเพาะนี้เป็นเอกสารชีวิตที่จะได้รับการอัปเดตเมื่อเราพัฒนาหลักการและการออกแบบวัสดุอย่างต่อเนื่อง "
วัสดุที่พูดถึงในแง่ทั่วไปคือกระดาษและตราสัญลักษณ์ของ Material Design เป็นการ์ด คิดว่าบัตรดัชนีบนพื้นผิวและคุณกำลังติดตามขวา การ์ดเป็นองค์ประกอบที่มีรูปภาพวิดีโอลิงก์ข้อความและอื่น ๆ แต่แตกต่างจากการออกแบบเชิงโต้ตอบมากที่สุดคือการมุ่งเน้นเรื่องเดียว การ์ดมีมุมกลมมีเงาจาง ๆ แสดงว่าอยู่เหนือพื้นผิวและหากทั้งหมดอยู่บนระนาบเดียวกันพวกเขาจะเรียกว่า "คอลเลกชัน"
ใน "วิธีการ" นี้เราจะสร้างบัตรขึ้นอยู่กับข้อมูลจำเพาะ แทนที่จะสร้างการ์ดที่มีเครื่องมือถ่ายภาพและภาพวาดจำนวนมากเราจะมาจากทิศทางที่ต่างไป เราจะใช้เครื่องมือในการออกแบบประสบการณ์การทำงานของ Adobe ซึ่งขณะนี้อยู่ในรูปแบบสาธารณะของ Macintosh เท่านั้นและไม่มีค่าใช้จ่าย คุณสามารถดาวน์โหลดได้ที่นี่
มาเริ่มกันเลย.
02 จาก 06
การสร้าง Artboard ต้นแบบใน Adobe Design Experience CC
ไม่มีวิธีที่ชัดเจนในการสร้างหน้าจอแอนดรอยด์จากหน้าจอเริ่มต้นในประสบการณ์การออกแบบ CC (XD) สิ่งที่เราเคยทำเมื่อเราเปิด XD คือเลือกตัวเลือก iPhone 6 และเมื่อส่วนติดต่อเปิดขึ้นเราจะเลือก เครื่องมือ Artboard ที่ด้านล่างของ Toolbar และเลือก Android Mobile จากส่วนที่เลือกในแผงคุณสมบัติที่ด้านขวา จากนั้นเราจะเปลี่ยนไปใช้เครื่องมือการเลือกคลิกหนึ่งครั้งบนชื่อ artboard ของ iPhone และลบอาร์ตเวิร์ก ไม่มีอีกแล้ว
ในเวอร์ชันปัจจุบันของ XD มีลูกศรเล็ก ๆ อยู่ข้างๆ iPhone 6 ซึ่งเมื่อคลิกแล้วจะเปิดเมนูแบบเลื่อนลง จากที่นั่นคุณจะเลือกเวอร์ชัน Android Mobile และ เลือกอาร์เรย์ Android Mobile ในอินเทอร์เฟซ
เพื่อให้แน่ใจว่าเรามีพื้นที่หน้าจอที่ถูกต้องสำหรับการ์ดเรามักจะไปที่ Sketch 3 และคัดลอกและวางแถบสถานะ Nav Bar และ App bar จากเทมเพลตการออกแบบเนื้อหาลงในอาร์ตเวิร์ก ร่าง 3.2 มีเทมเพลต Material Design ( ไฟล์> ใหม่จากแม่แบบ> การออกแบบเนื้อหา ) และอีกหนึ่งที่ฟรีที่ดีจริงๆจาก Kyle Ledbetter ซึ่งคุณสามารถดูได้ที่นี่ หากคุณไม่มี Sketch คุณสามารถคัดลอกและวางภาพจากสติกเกอร์ XD ที่พบใน ไฟล์> ชุด UI ที่เปิด> Google Material คุณสามารถดาวน์โหลดได้จาก Google เพื่อใช้ใน Photoshop, Illustrator, After Effects และ Sketch
03 จาก 06
การเพิ่มบัตรการออกแบบวัสดุลงใน Artboard ของ Adobe XD CC
หนึ่งในคุณลักษณะที่มีประโยชน์มากที่สุดของ XD คือ การรวม UI Kits สำหรับ Apple iOS, Google Material และ Microsoft Windows ในหลาย ๆ เรื่องพวกเขาเพิ่มคำว่า "Rapid" เป็นคำว่า "Rapid Prototyping" เช่นกันทำให้งานออกแบบของพวกเขาง่ายขึ้นโดยที่องค์ประกอบ UI ทั่วไปไม่จำเป็นต้องสร้างขึ้นใหม่ในแอปพลิเคชันการออกแบบเช่น Photoshop, Illustrator หรือ ร่าง.
องค์ประกอบ UI ที่เราต้องการคือการ์ด เมื่อต้องการเข้าใช้งานเราเลือก ไฟล์> ชุด UI ที่เปิด> Google วัสดุ และชุดเริ่มต้นเป็นเอกสารใหม่ องค์ประกอบที่เราต้องการพบในหมวดการ์ด
สิ่งที่เราชื่นชอบเกี่ยวกับเรื่องนี้ก็คือพวกเขาปฏิบัติตามข้อกำหนดด้านการออกแบบวัสดุตามที่ระบุในข้อกำหนดของบล็อกเนื้อหาตลอดจนข้อกำหนดการจัดรูปแบบข้อความและระยะห่างที่กำหนดไว้ในข้อกำหนดเกี่ยวกับการพิมพ์
รูปแบบการ์ดที่เราต้องการคือรูปแบบที่ด้านล่างซ้าย เราเพียงแค่กระโจมด้วยเมาส์ของเราและคัดลอกไปยังคลิปบอร์ด แต่ XD ไม่มีส่วนติดต่อแบบแท็บสำหรับเอกสารแบบเปิด สิ่งที่เราทำคือย้ายหน้าต่างเอกสารแบบเปิดลงเล็กน้อยเพื่อเปิดเผยเอกสารที่เรากำลังดำเนินการเลือกและวาง อีกวิธีหนึ่งในการสลับเอกสาร XD แบบเปิดก็คือการ กด Command- '
04 จาก 06
วิธีแก้ไของค์ประกอบการออกแบบเนื้อหาใน Adobe Design Experience CC
เมื่อการ์ดในรูปแบบ XD มาจากคลิปบอร์ดไม่ควรเริ่มต้นทำงานกับการ์ดดังกล่าว สิ่งแรกที่คุณต้องทำ ก็คือการเลิกใช้งานการ์ด เนื่องจากคุณต้องการเข้าถึงบิตและชิ้นส่วนที่เขียนการ์ด เมื่อต้องการทำเช่นนี้ให้เลือกการ์ดและ เลือกวัตถุ> ยกเลิกการจัดกลุ่ม หรือ กด Shift-Command-G
การ์ดของคุณประกอบด้วยสามส่วน:
- กล่องสีเทาอ่อนสำหรับภาพ
- กล่องสีเทาขนาดกลางสำหรับข้อความ
- กล่องด้านหลังใช้เป็นพื้นหลัง
ขั้นตอนแรกคือการลบกล่องสีเทาอ่อน วัตถุประสงค์เฉพาะของมันคือการทำหน้าที่เป็นตัวยึดตำแหน่งสำหรับภาพซึ่งทำให้ถ้าคุณเลือกไม่จำเป็น
กล่องที่มีข้อความเป็นสีเทาเข้มและมีความโปร่งแสง 50% กล่องนี้สามารถใช้เป็นพื้นหลังของข้อความและคุณสามารถเปลี่ยนสีและความทึบของกล่องได้
แม้ว่าจะไม่ปรากฏชัดทันทีกล่องสีเทาอ่อนตามข้อมูล Design Material ในมุมด้านบนที่มีการปัดเศษโดย 2 พิกเซล โปรดจำไว้เสมอหากคุณเพิ่มรูปภาพ นอกจากนี้ยังต้องมีมุมโค้งมนซึ่งสามารถเพิ่มลงในแอปพลิเคชันการถ่ายภาพหรือ XD
การมองว่าสถานะนี้เป็นสถานะพักการทำงานของการ์ดนั้นจำเป็นต้องมีเงาอีกด้วย ข้อมูลจำเพาะทำให้ชัดเจนว่ามีความสูงของการวางตัวของการ์ด 2 พิกเซล หากต้องการเพิ่มรูปแบบนี้ให้ เลือกรูปพื้นหลังสีดำและตั้งค่า Y และ B (เบลอ) เป็น 2 ในแผงคุณสมบัติ
05 จาก 06
วิธีการเพิ่มรูปภาพลงในการ์ดการออกแบบวัสดุใน Adobe XD CC
การรู้การ์ดมีความกว้าง 344 พิกเซลและพื้นที่ภาพสูง 150 พิกเซล (ความสูง ครึ่งหนึ่งของกล่องสีเทาอ่อน ) เราได้เปิดภาพใน Photoshop แล้วตัดขนาดและบันทึกโดยใช้ตัวเลือก @ 2x ในกล่องโต้ตอบ Export As ของ Photoshop กล่อง. ภาพถูกนำเข้าไปยัง Adobe XD
จากนั้นเราลากกล่องสีเทาอ่อนไปที่ภาพบนกระดานและเลือก Object> Mask With Shape ผลที่ได้คือภาพที่หยิบมุมโค้งมนของรูปร่าง จากนั้นเราย้ายภาพไปยังตำแหน่งสุดท้าย
ด้วยภาพในตำแหน่งเราจึงเปลี่ยนสีพื้นหลังของกล่องสีเทาขนาดกลางเปลี่ยนข้อความและสีของข้อความลิงก์
06 จาก 06
ใช้คุณลักษณะ Adobe XD CC Grid
ด้วยบัตรที่สมบูรณ์ตอนนี้ต้องมีการจัดวางอย่างถูกต้องตามข้อมูลจำเพาะของ Material Design ซึ่งหมายความว่ามี 8 พิกเซลที่ด้านใดด้านหนึ่งของการ์ดและการ์ดต้องมีขนาด 8 พิกเซลที่ด้านล่างของแถบ app เมื่อต้องการทำเช่นนี้ให้คลิกที่ชื่อ artboard และใน Properties Panel ให้เลือก Grid เส้นตารางปรากฏเหนืออาร์ตบอร์ด
ขนาดกริดเริ่มต้นคือ 8 พิกเซลซึ่งเป็นขนาดกริดเดียวกันสำหรับ Material Design ถ้าคุณต้องการขนาดที่ต่างกันให้เปลี่ยนค่าในพื้นที่ตาราง ถ้าคุณต้องการเปลี่ยนสีของตารางให้คลิกชิปสีและเลือกสีจากตัวเลือกสีที่ได้รับ
เมื่อมองเห็นเส้นตารางให้คลิกที่การ์ดและเลื่อนลงในตำแหน่งสุดท้าย
เมื่อต้องการเสร็จสิ้นเราเลือกการ์ดคลิกที่ปุ่ม "ทำซ้ำตาราง" และเปลี่ยนระยะห่างระหว่างการ์ดเป็น 8 พิกเซลด้วย