วิธีการสร้างแอปมือถือด้วย Adobe XD

Sep 13, 2025

วิธีการ

บทช่วยสอนนี้แสดงให้คุณเห็นวิธีการสร้างต้นแบบแอพมือถือใน Adobe XD ได้รับการรวบรวมด้วย Adobe XD CC (2017 Beta) ในปี 2559 เปิดใหม่ Adobe XD CC มีการปรับแต่งสองสามครั้งทำให้ง่ายต่อการใช้งาน

รับส่วนลด 15% สำหรับ Adobe Creative Cloud ที่นี่

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

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

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

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

ในการกวดวิชานี้เราจะแสดงพื้นที่หลักของ Adobe XD โดยการออกแบบการสร้างต้นแบบและการแบ่งปันแอพมือถือ 'พบกับทีม' อย่างง่าย

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

ดูวิดีโอด้านบนและทำตามขั้นตอนการเขียนด้านล่างเพื่อเรียนรู้วิธีการสร้างต้นแบบด้วย Adobe XD เราจะไม่เพียง แต่จะแสดงวิธีการทำเราจะแสดงวิธีทดสอบบันทึกวิดีโอตัวอย่างของมันในการดำเนินการและวิธีการแบ่งปันและส่งออก

โปรดทราบว่ากระบวนการบางอย่างอาจมีการเปลี่ยนแปลงเล็กน้อยใน Adobe XD รุ่นใหม่กว่า

01. ติดตั้ง Adobe XD และเริ่มการออกแบบใหม่

Start your design by selecting the iPhone artboard from your template options — เริ่มการออกแบบของคุณโดยเลือก Iphone Artboard จากตัวเลือกเทมเพลตของคุณ

ก่อนอื่นให้แน่ใจว่า Adobe XD คือ ติดตั้งบนคอมพิวเตอร์ของคุณ . เปิดตัวให้ดูที่หน้าจอต้อนรับและเริ่มการออกแบบใหม่ด้วยเทมเพลต ARTBOARD iPhone

02. สร้างอาร์ตบอร์ดที่สอง

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

03. ดาวน์โหลดสินทรัพย์แบบฝึกหัด

ฉันรวบรวมโฟลเดอร์สินทรัพย์ที่ฉันจะใช้ตลอดการกวดวิชานี้ คุณสามารถดาวน์โหลดได้ ที่นี่ . จาก Finder ลาก 'iPhone-status-bar.svg' ไปที่ด้านบนของอาร์ตบอร์ด 1 ( X: 8, Y: 5 . จากนั้นคัดลอกและวางลงใน Artboard 2 ดังนั้น Artboards ทั้งสองจึงมีแถบสถานะอยู่ด้านบน ตี cmd + l ในการล็อคแถบสถานะเหล่านี้ในทั้งสองอาร์ตบอร์ดเพื่อให้คุณสมบัติของพวกเขาไม่สามารถแก้ไขได้ หากต้องการปลดล็อกพวกเขาคุณสามารถใช้ทางลัดอีกครั้งหรือคลิกไอคอน 'ล็อค'

04. วาดสี่เหลี่ยมผืนผ้าและกำหนดขนาด

ลองโฟกัสที่ Artboard 1 (หน้าทีม) การใช้เครื่องมือสี่เหลี่ยมผืนผ้า ( r ) วาดสี่เหลี่ยมสีชมพู (# FF2BC2 โดยไม่มีเส้นขอบ) ในอาร์ตบอร์ด 1 และตั้งค่าขนาดของมันเป็น 375 x 230 โดยใช้แผงตรวจสอบคุณสมบัติทางด้านขวา

05. เรียงลำดับวัตถุใหม่

ในการหมุนขอบหรือเติมเปิดและปิดให้คลิกที่ไอคอน 'Eye' ทางด้านขวา ตี Shift + CMD + [ เพื่อส่งไปจนถึงด้านหลังหรือไปที่ วัตถุ & GT; จัดและ GT; ส่งกลับ . หากคุณต้องการเปลี่ยนสีโดยใช้ค่าเลขฐานสิบหกให้คลิกที่ไอคอนสีและเมื่อตัวเลือกสีพื้นเมืองปรากฏขึ้นให้เลือกแท็บที่สองที่ด้านบนและเปลี่ยนแบบหล่นลงเป็น 'RGB Sliders'

06. สร้างส่วนหัว

การใช้เครื่องมือข้อความ ( t ) คลิกเพื่อสร้างส่วนหัวสำหรับหน้าทีมของคุณ ของฉันคือ Helvetica Bold, 20, #FFFFFFF, X: 18, Y: 123. เริ่มรวบรวมรายชื่อสมาชิกของเราด้วยกัน วาดสี่เหลี่ยมสีเทาที่รูปของสมาชิกในทีมจะนั่ง (100 x 100, x: 8, Y: 238, # D0D0D0 โดยไม่มีเส้นขอบ)

07. เพิ่มสี่เหลี่ยมผืนผ้าอื่น

ทางด้านขวาของสิ่งนี้เราต้องการสี่เหลี่ยมสีขาว (260 x 100, x: 108, Y: 238, #FFFFFFF ที่ไม่มีชายแดนที่เราจะรวมชื่อของสมาชิกในทีมเป็นส่วนหัวและตำแหน่งงานเป็นหัวเรื่องย่อย สำหรับตอนนี้ใช้ข้อความตัวยึดตำแหน่งและจัดรูปแบบตามที่คุณต้องการ

08. เพิ่มไอคอนลูกศร

ในการแสดงกล่องนี้จะเป็นพื้นที่ที่ใช้งานได้เราจะรวมไอคอนลูกศร ลาก 'path.svg' จากตัวค้นหาไปยังผ้าใบ XD ไปจนถึงจุดปิดอาร์ตบอร์ด จากนั้นเปลี่ยนตำแหน่งเป็น X: 330, Y: 279

09. วางหัวของคุณ

จาก Finder ให้ลาก headshot เข้าที่บนจัตุรัสสีเทา

10. สร้างรายการ

Use the powerful Repeat Grid feature to create your list of team members — ใช้คุณสมบัติกริดซ้ำที่ทรงพลังเพื่อสร้างรายชื่อสมาชิกในทีมของคุณ

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

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

11. ปรับระยะขอบ

ปรับระยะขอบของกริดซ้ำ ๆ ของคุณโดยโฉบบนขอบของรายการของคุณคลิกและลาก มาตั้งค่าระยะขอบเป็น 7 ลากกริดซ้ำที่ด้านล่างของอาร์ตบอร์ดของคุณ ตอนนี้เรามีสี่แถวที่จะเล่นด้วย

12. แก้ไขฟิลด์ข้อความ

Drag all the headshots onto the grid — ลาก headshots ทั้งหมดลงบนกริด

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

13. สร้างเอฟเฟกต์ที่มืดมิด

มากระโดดไปที่ Artboard 2 (หน้ารายละเอียด) กันเถอะ อีกครั้งเราจะเริ่มต้นด้วยตัวยึดตำแหน่ง (375 x 444, x: 0, y: 0, #ffffff ที่ไม่มีเส้นขอบ) และลาก headshot เพื่อเติมเต็ม เราจะสร้างเอฟเฟกต์ที่มืดมิดโดยการเปลี่ยนความทึบของภาพเป็น 60 เปอร์เซ็นต์และส่งไปที่ด้านหลัง ( Shift + CMD + [ .

14. เพิ่มลูกศรอื่น

จากนั้นล็อครายการ headshot ( cmd + l ) และเพิ่มลูกศรอื่น ('back-arrow.svg') เพื่อระบุผู้ใช้สามารถกลับไปที่รายการทีม สิ่งนี้ต้องนั่งที่ X: 20, Y: 40 เป็นสิ่งสำคัญที่จะล็อคภาพก่อนเพราะมิฉะนั้น SVG จะแทนที่ headshot

15. เพิ่มแถบข้อมูลการติดต่อ

เราต้องการรวมบาร์สีชมพูในแต่ละหน้าซึ่งจะแสดงรายชื่อผู้ติดต่อของสมาชิกในทีม (375 x 45, x: 0, y: 400) ใช้เครื่องมือข้อความ ( t ) เพื่อสร้างองค์ประกอบข้อความการอ่าน 'ลิงก์ตัวยึดตำแหน่ง' ศูนย์ไอทีสไตล์มันขึ้นและวางที่ X: 169, Y: 416

16. สร้างอินสแตนซ์เพิ่มเติมขององค์ประกอบข้อความ

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

17. สร้างชื่อและกล่องชีวภาพ

ในการออกแบบให้เสร็จสร้างกล่องสีขาว (360 x 214, x: 8, y: 445) ซึ่งจะรวมถึงชื่อของสมาชิกในทีมและ Biog ก่อนเพิ่มองค์ประกอบข้อความโดยใช้ตัวยึดตำแหน่ง 'ชื่อบุคคล' สำหรับองค์ประกอบข้อความที่เก็บ BIOG เราต้องการใช้ข้อความพื้นที่ ในการทำเช่นนี้ให้เลือกเครื่องมือข้อความ ( t ) และคลิกและลากเพื่อกำหนดพื้นที่สำหรับสำเนาของคุณ อีกครั้งพิมพ์ข้อความตัวยึดตำแหน่งบางอย่างในตอนนี้และปรับคุณสมบัติการจัดแต่งทรงผม

18. สร้าง Artboards สำหรับสมาชิกในทีมอื่น ๆ

Duplicate your detail page so there is one for each team member — ทำซ้ำหน้ารายละเอียดของคุณดังนั้นจึงมีหนึ่งสำหรับสมาชิกในทีมแต่ละคน

ตอนนี้เรามาทำอาร์ตบอร์ดใหม่สำหรับสมาชิกในทีมอื่น ๆ ก่อนอื่นให้ปลดล็อกภาพหลัก ( cmd + l ) จากนั้นคลิกที่ชื่อของ Artboard 2 เพื่อเลือกและกด cmd + c เพื่อคัดลอก ซูมออก ( cmd + - หรือใช้แทร็คแพดเพื่อหยิกเพื่อซูม) จากนั้นกด cmd + v เพื่อวางกระดานศิลปะใหม่สามอัน เพิ่มข้อมูลชีวภาพบางส่วนในแต่ละหน้า อัปเดตชื่อและรูปภาพ Headshot และจัดเตรียม Artboards บนผืนผ้าใบ เย็น! การออกแบบของเราเสร็จสิ้นแล้วตอนนี้

19. ตั้งค่าการไหล

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

20. เชื่อมต่อขึ้น

Wire each item on your list to its respective detail page — ลวดแต่ละรายการในรายการของคุณไปยังหน้ารายละเอียดที่เกี่ยวข้อง

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

21. ทดสอบต้นแบบ

Any changes to your design will be reflected immediately in the preview — การเปลี่ยนแปลงใด ๆ ในการออกแบบของคุณจะสะท้อนให้เห็นทันทีในตัวอย่าง

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

22. สร้างวิดีโอ

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

23. แบ่งปันงานของคุณ

Share prototypes on the web — แบ่งปันต้นแบบบนเว็บ

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

24. ส่งออกไฟล์

You can export designs as PNGs for Web, iOS and Android at different sizes, or SVGs — คุณสามารถส่งออกการออกแบบเป็น pngs สำหรับเว็บ, iOS และ Android ในขนาดที่แตกต่างกันหรือ svgs

จาก XD คุณสามารถส่งออก PNG สำหรับเว็บ iOS และ Android ในขนาดที่แตกต่างกันรวมถึงไฟล์ SVG ที่ปรับให้เหมาะสมอย่างสูง

25. เพลิดเพลินไปกับผลลัพธ์

ขอแสดงความยินดี! คุณเข้าใจพื้นฐานของการออกแบบ Adobe Experience CC (ดูตัวอย่าง) อย่าลังเลที่จะแบ่งปันต้นแบบของคุณบนเว็บและโซเชียลมีเดีย - เพิ่ม #adobexd ดังนั้นเราสามารถเห็นงานของคุณ

บทความนี้ปรากฏในเดิม นิตยสารสุทธิ ปัญหา 280 สมัครสมาชิก NET ที่นี่ .

บทความที่เกี่ยวข้อง

วิธีหลีกเลี่ยงข้อผิดพลาดในการสร้างต้นแบบ
วิธีใช้แอนิเมชั่นในแอพมือถือ
10 เคล็ดลับสำหรับการออกแบบ UX มือถือที่ดีขึ้น