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

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

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

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

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

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

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

ข้อดีข้อเสียของการใช้ Adobe InDesign เป็น Wireframe และ Prototyping Tool

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

cfo ของบริษัททำอะไร?

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

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

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

การเตรียมโครงร่างที่ดีเป็นครึ่งหนึ่งของงาน

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Adobe Illustrator Assets ใน CC Libraries

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

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

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

เว็บไซต์ที่ดีที่สุดในการเรียนรู้ c ++

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

วิธีทำกราฟิก 3 มิติ

การสร้าง Wireframes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

หากคุณต้องการมีเฟรมแบบเลื่อนได้ในโครงร่าง / ต้นแบบของคุณวิธีที่ง่ายที่สุดในการสร้างเฟรมคือการใช้ไฟล์ 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 (Interactive) จากเมนูแบบเลื่อนลงรูปแบบในกล่องโต้ตอบส่งออกและปรับคุณสมบัติตามต้องการ อย่าลืมเลือกแบบฟอร์มและสื่อหากมีองค์ประกอบแบบโต้ตอบที่คุณต้องการรวมไว้ ลูกค้าสามารถดูโครงร่าง PDF ใน Adobe Reader ฟรีและเขียนความคิดเห็นทั้งหมดในไฟล์เดียวกัน

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

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

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

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

ทำความเข้าใจพื้นฐาน

การใช้ Adobe InDesign คืออะไร?

Adobe InDesign เป็นแอปพลิเคชันในชุด Adobe CC ที่มักใช้สำหรับการพิมพ์และการออกแบบกราฟิก InDesign ยังเป็นเครื่องมือที่มีประสิทธิภาพอย่างน่าประหลาดใจสำหรับนักออกแบบในการสร้างโครงร่างและชุด UI สำหรับการออกแบบเชิงโต้ตอบ

การใช้ Adobe Audition CC คืออะไร?

Adobe Audition CC เป็นหนึ่งในซอฟต์แวร์ในชุด Adobe Creative Cloud ที่ใช้สำหรับการบันทึกเสียงการแก้ไขและการมิกซ์เสียงเป็นหลัก

ต้นแบบโครงร่างคืออะไร?

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

ทำไมโครงร่างจึงมีความสำคัญในการออกแบบเว็บ

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

Wireframes และ Mockups คืออะไร?

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