ใครจะรู้ว่า Adobe CC สามารถใช้ Wireframe ได้?

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

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

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

เช่นเดียวกับนักออกแบบหลายคนที่เปลี่ยนมาใช้การออกแบบดิจิทัลจากโลกแห่งการพิมพ์ ฉันเป็นผู้เชี่ยวชาญในแอปพลิเคชัน Adobe เช่น Illustrator, InDesign และ Photoshop ฉันสามารถใช้งานได้อย่างมีประสิทธิภาพและเป็นธรรมชาติจากทุกที่และทุกเวลา (แม้ว่าจะมีใครมาปลุกฉันกลางดึกและไม่ยอมให้กาแฟฉันสักแก้วก็ตาม)

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

ในแต่ละโปรเจ็กต์ ฉันมักจะเริ่มออกแบบโดยสเก็ตช์ภาพคร่าวๆ บนกระดาษ หรือบนหน้าจอ iPad หรือสมาร์ทโฟน ถ้าฉันไม่ได้อยู่ใกล้โต๊ะทำงาน สเก็ตช์เหล่านี้มีไว้เพื่อเน้นความคิดของฉันเกี่ยวกับแนวคิดที่เลือก ลูกค้าอาจจะไม่เคยเห็นพวกเขาเลย เมื่อฉันรู้สึกมั่นใจว่าความคิดของฉันใช้ได้ผล ฉันจะเปลี่ยนไปใช้โครงลวด ฉันมักจะใช้ Adobe Illustrator และ InDesign รวมกัน: Illustrator เพื่อสร้างองค์ประกอบชุด UI ส่วนใหญ่และ InDesign สำหรับโครงร่างโครงร่าง

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

ข้อดีและข้อเสียของการใช้ Adobe InDesign เป็น Wireframe และเครื่องมือสร้างต้นแบบ

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

• มาสเตอร์เพจ – คุณสามารถใช้องค์ประกอบการออกแบบส่วนกลางได้อย่างรวดเร็วและสม่ำเสมอ เช่น การนำทาง ส่วนหัว ส่วนท้าย และอื่นๆ โดยใช้มาสเตอร์เพจ คุณสามารถสร้างมาสเตอร์เพจได้มากเท่าที่คุณต้องการ และยิ่งไปกว่านั้น มาสเตอร์เพจหนึ่งสามารถอ้างอิงจากเพจอื่นได้
• รองรับ Solid grid – ช่วยให้คุณสร้างและปรับใช้กริดประเภทต่างๆ ได้อย่างง่ายดาย เสริมคอลัมน์, เส้นบอกแนวแนวนอนและแนวตั้งเพื่อสร้างโมดูล และ Sub-grids เพื่อความซับซ้อนและความแม่นยำที่มากขึ้น
• เลย์เอาต์ สำรอง – เปิดใช้งานไวร์เฟรมสำหรับอุปกรณ์หลายตัวและการวางแนวในไฟล์เดียวกัน
• CC Libraries – สร้างไลบรารี่ของทรัพย์สินที่นำกลับมาใช้ใหม่ได้ เช่น วัตถุ สี อักขระ และลักษณะย่อหน้าที่ใช้กันทั่วไป สร้างแอสเซทใน InDesign, Illustrator หรือ Photoshop หรือด้วยแอพ Adobe Capture สำหรับอุปกรณ์พกพา ตามที่คุณต้องการ
• เลเยอร์ – ให้ความสามารถในการจัดระเบียบ จัดกลุ่ม แสดง/ซ่อน และล็อก/ปลดล็อกวัตถุและเนื้อหาแบบเลือกในโครงร่าง ทุกหน้าของเอกสาร InDesign ที่มีหลายหน้ามีจำนวนและลำดับชั้นเท่ากัน การเปลี่ยนแปลงทั้งหมดที่คุณทำกับเลเยอร์จะมีผลกับทุกหน้า เช่น การมองเห็น ลำดับการซ้อน หรือการลบ
• สไตล์และตาราง – ให้การควบคุมรูปลักษณ์ของข้อความ วัตถุ และตารางของคุณอย่างสมบูรณ์ผ่านการใช้สไตล์ InDesign สไตล์สามารถสืบทอดจากกันและกัน ทำให้สามารถเรียงรูปแบบที่ต้องการได้อย่างง่ายดายตลอดทั้งเอกสาร การสร้างและการจัดรูปแบบตารางเพื่อใช้เป็นองค์ประกอบเนื้อหาแบบมีโครงลวด หรือแม้แต่ผู้ช่วยเพื่อวัตถุประสงค์ในการจัดวางนั้นทำได้ง่ายมาก
• การรวม Typekit – ในการจำลองความเที่ยงตรงสูง คุณสามารถใช้แบบอักษร Typekit ใดๆ ที่ซิงค์กับเดสก์ท็อปได้
• การโต้ตอบและแอนิเมชั่น – คุณสามารถใช้คุณสมบัติการโต้ตอบและแอนิเมชั่นในตัวของ Adobe InDesign เพื่อสร้างสถานะต่างๆ ขององค์ประกอบการออกแบบเว็บหรือแอปพลิเคชันสำหรับการสร้างต้นแบบการโต้ตอบ คนส่วนใหญ่ใช้คุณสมบัติเหล่านี้ในขณะที่สร้างนิตยสารสำหรับโซลูชันการเผยแพร่ดิจิทัลและการส่งออก EPUB ที่มีเลย์เอาต์คงที่ แต่ก็เหมาะสำหรับการสร้างต้นแบบเช่นกัน
• ตัวเลือกการส่งออก – InDesign สามารถส่งออกโครงร่างและต้นแบบที่คุณสร้างขึ้นในหลากหลายรูปแบบ ไฟล์ PDF แบบโต้ตอบอาจเป็นรูปแบบที่คุณเลือกได้ในกรณีส่วนใหญ่ แต่คุณยังสามารถใช้คุณลักษณะ Publish Online เพื่อแปลงเอกสารของคุณเป็น HTML เชิงโต้ตอบ ซึ่งสามารถดูได้ในเบราว์เซอร์เดสก์ท็อปและมือถือสมัยใหม่ ขออภัย คุณไม่สามารถควบคุมการส่งออกโดยใช้ Publish Online ได้มากนัก และไฟล์ที่ส่งออกจะถูกโฮสต์บนเซิร์ฟเวอร์ของ Adobe คุณสามารถแบ่งปัน URL ต้นแบบให้กับลูกค้าของคุณหรือฝังลงในเว็บไซต์ของคุณ สำหรับการควบคุมเพิ่มเติมและการส่งออกโดยตรงไปยัง HTML5 คุณสามารถใช้ส่วนขยาย in5 จาก Ajar Productions

Adobe InDesign มีข้อดีหลายอย่างที่จะใช้เป็นเครื่องมือสร้างโครงร่างและการสร้างต้นแบบ แต่ก็มีข้อเสียบางประการเช่นกัน:

• ไม่มีเทมเพลตและองค์ประกอบโครงร่างโครงร่างที่กำหนดไว้ล่วงหน้า – เนื่องจาก InDesign ไม่ได้ออกแบบมาเพื่อเป็นเครื่องมือสร้างโครงลวด คุณต้องสร้างและเตรียมเทมเพลตและสินทรัพย์ของออบเจ็กต์ด้วยตัวเอง (ฉันจะแสดงวิธีจัดการกับขั้นตอนนี้ในบทความต่อไป) ข่าวดีก็คือ งานส่วนใหญ่จะเสร็จเพียงครั้งเดียว และหลังจากทำงานไม่กี่ชั่วโมง คุณก็พร้อมที่จะเริ่มต้นอย่างรวดเร็ว อินดีไซน์ ไวร์เฟรม นอกจากนี้ยังมีทรัพย์สินและชุดโครงลวดจำนวนมากที่คุณสามารถดาวน์โหลดได้จากอินเทอร์เน็ต ดังนั้นจึงไม่จำเป็นต้องวาดทุกอย่างด้วยตัวเอง
• ฟีเจอร์การโต้ตอบและแอนิเมชั่นมีจำกัด – แม้ว่าคุณจะสามารถเชื่อมต่อเพจและเพิ่มการโต้ตอบและแอนิเมชั่นได้ แต่บางครั้งกระบวนการอาจใช้เวลานาน เครื่องมือโต้ตอบแบบง่ายบางอย่างไม่ได้ใช้งานง่ายนัก หากคุณไม่ได้ใช้คุณลักษณะการโต้ตอบของ InDesign คุณจะต้องเอาชนะช่วงการเรียนรู้เล็กน้อยก่อนจึงจะสามารถใช้งานได้อย่างมีประสิทธิภาพ
• เอกสาร InDesign ไม่สามารถส่งออกโดยตรงเป็นไฟล์ PSD แบบเลเยอร์ได้ หากคุณออกแบบภาพใน Adobe Photoshop และต้องการแยกองค์ประกอบโครงลวดสำหรับสร้างการออกแบบ คุณจะต้องส่งออกกรอบลวดของคุณเป็น PDF ก่อน จากนั้นคุณจะต้องเปิด PDF ใน Illustrator และส่งออกอีกครั้งเป็น PSD แบบเลเยอร์ ผู้ที่ทำงานบน Mac สามารถใช้สคริปต์ฟรีที่เขียนโดย Rob Day เพื่อบันทึกไฟล์ InDesign เป็น PSD แบบเลเยอร์ได้

การเตรียม Wireframe ที่ดีคือครึ่งหนึ่งของงาน

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

เมื่อเสร็จแล้ว ให้บันทึกพื้นที่ทำงานโดยเลือก Window > Workspace > New Workspace... ทำสิ่งเดียวกันใน InDesign โดยใช้พื้นที่ทำงาน Digital Publishing เป็นตัวเริ่มต้น

การประกอบ Wireframe/Mockup/Prototype Kits

เวิร์กโฟลว์การวาดเส้นลวดที่มีประสิทธิภาพโดยใช้ Illustrator และ InDesign นั้นต้องการให้คุณใช้เวลาในการสร้างชุดทรัพยากรอินเทอร์เฟซผู้ใช้ของคุณก่อน นับตั้งแต่เปิดตัว Adobe Creative Cloud CC Libraries เป็นวิธีที่ดีที่สุดในการจัดเก็บส่วนประกอบชุด UI ทั้งหมดของคุณ

คุณสามารถสร้างไลบรารีได้ตั้งแต่หนึ่งไลบรารีขึ้นไปเพื่อวัตถุประสงค์ในการ wireframing และการสร้างต้นแบบ ตัวอย่างเช่น คุณสามารถสร้างไลบรารีหนึ่งไลบรารีสำหรับการทำ Wireframing ของเว็บไซต์ อีกไลบรารีสำหรับแอปพลิเคชัน iOS ไลบรารีที่สามสำหรับแอปพลิเคชัน Android และอื่นๆ

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

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

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

การสร้างส่วนประกอบ Wireframe Kit

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

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

เริ่มต้นด้วยการสร้างเอกสารใหม่สำหรับส่วนประกอบโครงลวดหรือชุดจำลอง ตรวจสอบอีกครั้งว่าคุณเลือกโปรไฟล์ Web/Devices ใน Illustrator หรือ Web/Digital Publishing Intent จากกล่องโต้ตอบ New Document เพื่อให้แน่ใจว่าพิกเซลถูกใช้เป็นหน่วยและโหมดสีถูกตั้งค่าเป็น RGB

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

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

แอสเซท Adobe Illustrator ใน CC Libraries

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

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

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

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

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

Adobe InDesign ยืดหยุ่นกับเนื้อหาและคัดลอก

เพื่อให้แน่ใจว่าคุณสามารถเปลี่ยนการคัดลอกและการพิมพ์ในโครงร่างของคุณได้อย่างง่ายดาย ให้สร้างที่เก็บข้อความใน InDesign InDesign มีคุณสมบัติที่ดีในการเติมกล่องข้อความด้วยข้อความที่พัก เมื่อคุณวาดกล่องข้อความ ให้คลิกขวาที่กล่องข้อความแล้วเลือก Fill With Placeholder Text

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

พิจารณาสร้างองค์ประกอบ UI ของปุ่มใน InDesign ด้วย ในการสร้างปุ่ม ให้สร้างกรอบข้อความ พิมพ์ข้อความ จากนั้นใช้ Object > Text Frame Options เพื่อกำหนดระยะห่างของสิ่งที่ใส่เข้าไป ปรับการจัดแนวข้อความในแนวตั้งภายในกล่องโดยเลือกตัวเลือกที่ต้องการจากเมนูดรอปดาวน์ Align

สลับไปที่แท็บขนาดอัตโนมัติและเลือกการปรับขนาดอัตโนมัติที่เหมาะสม (ซึ่งอาจเป็นความกว้างเท่านั้น) และจุดอ้างอิงที่สะดวก หากคุณไม่ต้องการให้ InDesign แบ่งข้อความของคุณออกเป็นมากกว่าหนึ่งบรรทัด ให้เลือกตัวเลือก No Line Breaks

ใช้ทรัพยากรที่มีอยู่

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

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

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

การสร้างเทมเพลต InDesign Wireframe

เหลืออีกขั้นตอนการเตรียมการที่สำคัญ: สร้างเทมเพลต InDesign ที่คุณจะใช้สำหรับสร้างโครงร่างโครงร่าง เริ่มต้นด้วยการสร้างเอกสารใหม่ด้วยความตั้งใจของ Web หรือ Digital Publishing และกำหนดขนาดหน้าที่เหมาะสมสำหรับหน้าจอที่คุณกำลังออกแบบ

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

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

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

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

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

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

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

การสร้าง Wireframes

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

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

คุณไม่สามารถเลือก เปลี่ยนแปลง หรือลบองค์ประกอบต้นแบบในหน้าเอกสารปกติได้ เว้นแต่คุณจะคลิกในขณะที่กด Command/Control + Shift ค้างไว้เพื่อแทนที่ต้นแบบ เมื่อองค์ประกอบของคุณถูกแทนที่แล้ว คุณสามารถเปลี่ยนพารามิเตอร์ใดๆ ขององค์ประกอบหรือลบออกจากเค้าโครงโดยสิ้นเชิง

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

เมื่อแทรกหน้าเพิ่มเติมลงในเอกสารการวาดโครงลวดของคุณ อย่าลืมยึดตามหน้าหลักที่เกี่ยวข้อง หากคุณต้องการเปลี่ยนต้นแบบสำหรับเพจที่อยู่ในเลย์เอาต์อยู่แล้ว ให้เลือกในแผงเพจ คลิกขวา แล้วเลือก Apply Master to Pages ใช้ทรัพย์สินของห้องสมุดและจัดเรียงโดยใช้ตัวเลือก Smart Guide และ Align เพื่อสร้างเค้าโครงโครงร่าง UI ขั้นสุดท้าย

หากคุณกำลังสร้างการออกแบบสำหรับขนาดหน้าจอมากกว่าหนึ่งขนาด ให้สร้างเค้าโครงอื่นจาก Layouts > Create Alternate Layout หรือแผง Pages คุณสามารถใช้กฎเลย์เอาต์ของเหลวเมื่อสร้างเลย์เอาต์อื่นเพื่อนำองค์ประกอบของเพจจากขนาดหนึ่งและการวางแนวไปใช้กับอีกขนาดหนึ่งโดยอัตโนมัติ หรือคุณสามารถควบคุมพวกมันเองได้ สำหรับการใช้และทดสอบ Liquid Layout Rules ให้ใช้เครื่องมือ Page หรือเปิดแผง Window > Interactive > Liquid Layout

การเพิ่มการโต้ตอบ

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

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

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

คุณสามารถสร้างปุ่มจากกราฟิก ข้อความ รูปภาพ หรือกลุ่มขององค์ประกอบใดก็ได้ ในการสร้างปุ่มจากวัตถุที่เลือก ให้ใช้แผง Window > Interactive > Buttons and Forms และคลิกที่ไอคอน Convert to Button

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

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

หากคุณต้องการแปลงเอกสารของคุณเป็นต้นแบบ HTML โดยใช้ฟีเจอร์ InDesign CC 2015 Publish Online คุณสามารถใช้ตัวเลือกแบบโต้ตอบอื่นๆ ได้มากมาย เช่น ภาพเคลื่อนไหว วัตถุแบบหลายสถานะ และการทำงานของปุ่มหลายปุ่ม รวมถึงตัวเลือกทั้งหมดที่ต้องการสำหรับการส่งออก SWF/EPUB

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

สำหรับองค์ประกอบ UI ที่ต้องการแสดงสถานะต่างๆ ให้สร้างวัตถุหลายสถานะ สร้างวัตถุแยกต่างหากสำหรับแต่ละรัฐ วัตถุอาจเป็นองค์ประกอบเดียว (รูปภาพ กล่องข้อความ กราฟิก) หรือกลุ่มขององค์ประกอบต่างๆ เปิดพาเนล Window > Interactive > Object States เลือกออบเจ็กต์ทั้งหมดที่คุณสร้างสำหรับออบเจ็กต์หลายสถานะ แล้วคลิกปุ่มใหม่ที่ด้านล่างของพาเนล

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

หากคุณต้องการมีเฟรมแบบเลื่อนได้ในโครงร่าง/ต้นแบบ วิธีที่ง่ายที่สุดในการสร้างกรอบคือการใช้ส่วนขยาย Universal Scrolling Frames จาก Ajar Productions หลังจากที่คุณดาวน์โหลดและติดตั้งส่วนขยายแล้ว คุณจะสามารถใช้เป็นแผง InDesign ได้ สำหรับเฟรมที่เลื่อนได้ คุณจะต้องสร้างเนื้อหาและหนึ่งเฟรมสำหรับคอนเทนเนอร์

เนื้อหาที่เลื่อนได้อาจเป็นกรอบข้อความ รูปภาพ หรือองค์ประกอบต่างๆ ที่จัดกลุ่มเข้าด้วยกัน เมื่อคุณสร้างกล่องเนื้อหาและคอนเทนเนอร์เสร็จแล้ว ให้เลือกเนื้อหาแล้วแก้ไข > ตัด จากนั้นเลือกคอนเทนเนอร์และวางเนื้อหาภายในโดยใช้ Edit > Paste Into เลือกคอนเทนเนอร์และใช้ Universal Scrolling Frames ปรับทิศทางการเลื่อนที่ต้องการ

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

หากคุณยังไม่เคยใช้คุณลักษณะอินเทอร์แอกทีฟของ Adobe InDesign ให้เตรียมพร้อมในตอนแรก มีช่วงการเรียนรู้เล็กน้อย แต่ด้วยการฝึกฝนเพียงเล็กน้อยและการลองผิดลองถูก คุณจะเชี่ยวชาญอย่างรวดเร็ว

การส่งออกเอกสารสำเร็จรูป

เมื่อคุณสร้าง wireframes และไฟล์การนำเสนอเสร็จแล้ว เหลือเพียงการแสดงแนวคิดที่ยอดเยี่ยมของคุณให้กับลูกค้าในวิธีที่ดีที่สุดเท่าที่จะเป็นไปได้ เพื่อจุดประสงค์นั้น คุณจะต้องส่งออกโครงร่างของคุณในรูปแบบที่ลูกค้าของคุณสามารถดูตัวอย่างได้ แม้ว่าไฟล์ InDesign จะสามารถส่งออกได้หลากหลายรูปแบบ แต่คุณคงจะใช้ Interactive PDF หรือฟีเจอร์ Publish Online หากทำการทดสอบต้นแบบที่มีความแม่นยำสูงหรือต่ำที่ใช้งานได้ หากต้องการบันทึกเป็น PDF แบบโต้ตอบ ให้เลือก Adobe PDF (แบบโต้ตอบ) จากเมนูดรอปดาวน์รูปแบบในกล่องโต้ตอบส่งออก แล้วปรับคุณสมบัติตามต้องการ อย่าลืมทำเครื่องหมายที่ฟอร์มและสื่อหากมีองค์ประกอบแบบโต้ตอบที่คุณต้องการรวมไว้ ลูกค้าสามารถดูโครงร่างไฟล์ PDF ใน Adobe Reader ได้ฟรี และเขียนความคิดเห็นทั้งหมดลงในไฟล์เดียวกัน

คุณยังสามารถใช้เอกสาร PDF ที่ส่งออกจาก InDesign เพื่อสร้างต้นแบบ InVision (หรือเครื่องมืออื่นๆ ที่รองรับ PDF) หากเครื่องมือสร้างต้นแบบมาตรฐานของคุณ บางที Marvel ไม่สามารถนำเข้า PDF ได้ ให้ส่งออกหน้าโครงร่าง InDesign ของคุณเป็นรูปภาพ JPEG หรือ PNG

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

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

เมื่อส่งออกโครงร่าง/ต้นแบบแล้ว ก็ถึงเวลาที่กระบวนการทดสอบ ตรวจสอบ และทำซ้ำเพื่อเริ่มต้น