วิธีใช้ UI Kits ใน Adobe XD
เบ็ดเตล็ด / / November 29, 2021
สำหรับผู้ที่สนใจออกแบบเว็บ UI kits ใน Adobe XD เป็นวิธีที่ยอดเยี่ยมในการเริ่มต้นโครงการออกแบบใหม่ ด้วยชุดเครื่องมือเหล่านี้ คุณจะสามารถเข้าถึงแหล่งข้อมูลที่มีประโยชน์ซึ่งคุณสามารถปรับเปลี่ยนและใช้สำหรับการออกแบบเว็บไซต์หรือแอพของคุณ
หากคุณเพิ่งเริ่มใช้ซอฟต์แวร์และไม่แน่ใจว่าจะใช้ชุด UI อย่างไรใน Adobe XD ถ้าอย่างนั้นคุณมาถูกที่แล้ว ในบทความนี้ ผมจะแสดงให้คุณเห็นถึงวิธีการติดตั้ง UI kits ในซอฟต์แวร์ จากนั้นจึงใช้ทรัพยากรที่รวมอยู่ในโปรเจ็กต์ของคุณ
วิธีดาวน์โหลด UI Kits ใน Adobe XD
ขั้นแรก มาดูวิธีดาวน์โหลด UI kits ใน Adobe XD ได้จากในซอฟต์แวร์ เพียงทำตามขั้นตอนเหล่านี้เพื่อเริ่มต้น:
ขั้นตอนที่ 1: คลิกที่ปุ่มเมนูแฮมเบอร์เกอร์ที่มุมบนซ้ายของซอฟต์แวร์
ขั้นตอนที่ 2: ในเมนู ให้เลื่อนลงไปที่ตัวเลือก Get UI Kits จากนั้นคลิกที่ตัวเลือกใดตัวเลือกหนึ่งที่มีอยู่
สำหรับบทความนี้ ฉันจะเลือกชุด Google Material UI อย่างไรก็ตาม ขึ้นอยู่กับโครงการของคุณ คุณสามารถเลือกชุดอุปกรณ์ Apple iOS หรือ Microsoft Windows ซึ่งจะเปิดหน้าเว็บอย่างเป็นทางการซึ่งคุณสามารถดาวน์โหลดชุด UI ได้ฟรี
ขั้นตอนที่ 3: ค้นหาชุด Adobe XD UI ในหน้าเว็บต่อไปนี้ และดาวน์โหลดลงในระบบของคุณ
ขั้นตอนที่ 4: ตอนนี้เปิดไฟล์ที่ดาวน์โหลดมาใน Adobe XD แล้วคุณจะพบกับอาร์ตบอร์ดจำนวนมากที่มีทรัพยากร UI สำหรับแพลตฟอร์มที่เกี่ยวข้อง
คุณสามารถกดปุ่ม Ctrl ค้างไว้แล้วเลื่อนล้อเลื่อนเพื่อซูมเข้า/ออกเพื่อดูอาร์ตบอร์ดแต่ละรายการ
หากคุณต้องการดาวน์โหลด Wireframes แทน คุณสามารถคลิกที่ตัวเลือก Wireframes ในเมนู Get UI Kits
คุณยังสามารถค้นหาชุด UI เพิ่มเติมบนเว็บไซต์ของ Adobe ได้โดยคลิกที่ตัวเลือกชุด UI เพิ่มเติมในเมนูรับชุด UI
เว็บไซต์มีตัวเลือกที่ยอดเยี่ยมให้เลือก รวมถึงชุด Movie Magic UI สุดเจ๋งที่ดูเหมือนจอแสดงผลแบบ heads-up
เมื่อคุณรู้วิธีดาวน์โหลดชุด UI แล้ว มาดูวิธีใช้งานในโปรเจ็กต์ของคุณกัน
วิธีใช้ UI Kits ใน Adobe XD
หากต้องการใช้ชุด UI ในโครงการของคุณ เพียงทำตามขั้นตอนง่าย ๆ เหล่านี้:
ขั้นตอนที่ 1: ซูมเข้าองค์ประกอบ UI ที่คุณต้องการใช้ในโครงการของคุณ และคลิกที่ชื่อเพื่อเลือก
ขั้นตอนที่ 2: ตอนนี้คัดลอกองค์ประกอบโดยใช้ปุ่มลัด Ctrl+C
ขั้นตอนที่ 3: จากนั้นเปิดโปรเจ็กต์ Adobe XD ใหม่จากเมนู
ขั้นตอนที่ 4: ที่นี่ วางองค์ประกอบ UI โดยใช้ปุ่มลัด Ctrl+V
สำหรับบทความนี้ ฉันจะใช้องค์ประกอบ Mobile Dark จากชุด Google Material UI องค์ประกอบนี้มีคำแนะนำเพื่อช่วยให้คุณวางได้มากขึ้น ชั้นแต่หากคุณไม่ต้องการใช้ คุณสามารถลบออกได้อย่างง่ายดายโดยทำตามขั้นตอนถัดไป
ขั้นตอนที่ 5: หากต้องการลบคำแนะนำ ให้คลิกไอคอนแม่กุญแจที่มุมซ้ายบน แล้วกดลบ คุณสามารถข้ามขั้นตอนนี้ได้หากต้องการใช้คำแนะนำเพื่อวางวัตถุเพิ่มเติมลงในองค์ประกอบอย่างถูกต้อง
ขั้นตอนที่ 6: ตอนนี้กลับไปที่ชุด UI เพื่อเลือกองค์ประกอบอื่นเพื่อเพิ่มในหน้านี้ อีกครั้ง คลิกที่ชื่อขององค์ประกอบและคัดลอกโดยใช้ปุ่มลัด Ctrl+C
ฉันจะสร้างขนมปังปิ้งพื้นฐานสำหรับบทความนี้ ซึ่งฉันจะใช้หนึ่งในกล่องโต้ตอบ
ขั้นตอนที่ 7: วางองค์ประกอบใหม่บนองค์ประกอบก่อนหน้า แล้วจัดแนวตามคำแนะนำ
ขั้นตอนที่ 8: ในการแก้ไขแต่ละองค์ประกอบในขนมปังปิ้ง ให้ดับเบิลคลิกที่กล่องข้อความแล้วป้อนข้อความที่คุณต้องการใช้ อันดับแรก มาเปลี่ยนชื่อของขนมปังปิ้งกันก่อน
ถัดไป เปลี่ยนเนื้อหาของเนื้อหาโดยดับเบิลคลิกที่กล่องข้อความและพิมพ์สิ่งที่คุณต้องการเพิ่ม
คุณยังสามารถเปลี่ยนข้อความของปุ่มในลักษณะเดียวกันได้ เมื่อคุณแก้ไขข้อความเสร็จแล้ว คุณสามารถเปลี่ยนสีและความทึบของข้อความได้ หากต้องการเปลี่ยนความทึบ ให้เลื่อนแถบเลื่อนใต้ตัวเลือกความทึบในแถบเครื่องมือไปทางขวา
หากต้องการเปลี่ยนสีของข้อความ ให้คลิกที่สี่เหลี่ยมถัดจากตัวเลือกเติม แล้วเลือกสีใหม่จากตัวเลือกสี
และไม่ใช่แค่ข้อความที่คุณสามารถแก้ไขได้ในลักษณะนี้ คุณยังสามารถเปลี่ยนสีและความทึบของรายการเกือบทั้งหมดในไดอะล็อกบ็อกซ์ ซึ่งดีมากถ้าคุณเลือกชุดสีที่ไม่ซ้ำใคร
เมื่อคุณพอใจกับผลลัพธ์แล้ว ให้ดำเนินการต่อและบันทึกไฟล์ของคุณโดยคลิกที่ตัวเลือกบันทึกเป็นในเมนูหรือโดยใช้ทางลัด Shift+Ctrl+S
ทำให้การออกแบบของคุณสมบูรณ์แบบโดยใช้ UI Kits
เมื่อคุณรู้วิธีดาวน์โหลดและใช้ชุดเครื่องมือ UI ใน Adobe XD แล้ว ฉันแน่ใจว่าคุณจะเริ่มต้นออกแบบที่น่าตื่นตาตื่นใจได้ในเวลาไม่นาน ชุด UI เหล่านี้ค่อนข้างสะดวกและช่วยให้คุณเข้าถึงโครงการได้โดยตรงโดยไม่ต้องกังวลเกี่ยวกับการออกแบบองค์ประกอบ UI แต่ละรายการ
ถัดไป: เสร็จสิ้นโครงการใน Adobe XD และไม่ทราบวิธีการส่งออกไปยัง HTML? ดูบทความถัดไปสำหรับบทแนะนำทีละขั้นตอนง่ายๆ