ในปี 1487 เลโอนาร์โดดาวินชีได้วาดแผนผังที่เรียกว่า รถต่อสู้ ” ได้รับการออกแบบในขณะที่เขาอยู่ภายใต้การอุปถัมภ์ของลูโดวิโกสฟอร์ซาดยุคแห่งมิลาน แม้ว่าเครื่องจะได้รับการออกแบบมาโดยเจตนาไม่ให้ทำงานอย่างถูกต้อง แต่กลุ่มวิศวกรได้สร้างขึ้นใหม่ในปี 2010 Da Vinci’s แผนผัง เป็นหนึ่งในตัวอย่างแรกสุดของโครงร่างพื้นฐาน

ระยะ โครงร่าง ได้รับการ ใช้มานานหลายทศวรรษ นานก่อนที่โลกการออกแบบเว็บจะถูกนำมาใช้ เดิมใช้ Wireframes ในซอฟต์แวร์ Computer Aided Design (CAD) เพื่อแสดงการออกแบบของวัตถุโดยไม่จำเป็นต้องมีรายละเอียด ผลที่ได้คือ พิมพ์เขียว ดูเหมือนว่ามันทำมาจากสายไฟเออร์โกเราจบลงด้วยโครงร่าง

แต่ไฟล์ โครงร่าง ในการออกแบบและจุดประสงค์ของการมีคืออะไร?

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

นักออกแบบใช้ Wireframes เพื่อเชื่อมต่อโครงสร้างแนวคิดพื้นฐานกับการออกแบบภาพของไซต์หรือหน้าจอแอป Wireframes มีสามประเภท:

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

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

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

โดยใช้ไฟล์ส่วนหัว c++

แผนผังโครงร่างรวมโครงร่างเข้ากับการเดินทางของผู้ใช้ (หรือขั้นตอนของผู้ใช้) เพื่อแสดงให้เห็นเส้นทางของผู้ใช้ผ่านผลิตภัณฑ์โดยใช้โครงร่าง

เครื่องมือ Wireframing ยอดนิยม

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

• ความสามารถในการผลิตความเที่ยงตรงที่หลากหลาย (ต่ำไปสูง)
• ซอฟต์แวร์ที่เสถียรใช้งานง่ายและอัพเดตบ่อยครั้ง
• เทมเพลตสัญลักษณ์และส่วนประกอบ UI มาตรฐานในตัวพร้อมความสามารถเสริม

เครื่องมือบางอย่างในคู่มือนี้มุ่งเน้นไปที่ Wireframing มากขึ้นในขณะที่เครื่องมืออื่น ๆ พยายามสร้างสมดุลระหว่าง Wireframing และ Prototyping และฟังก์ชันจำลอง การเลือกใช้เครื่องมือหนึ่งกับอีกเครื่องมือหนึ่ง (หรือหลายอย่างรวมกัน) ขึ้นอยู่กับความชอบของนักออกแบบ

Balsamiq

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

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

Balsamiq มีให้บริการในเวอร์ชันเดสก์ท็อป (Windows และ Mac) บริการคลาวด์หรือเป็นปลั๊กอินสำหรับ Google Drive, Confluence และ JIRA

Moqups

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

ความแตกต่างหลักระหว่าง Moqups และ Balsamiq คือความเที่ยงตรงของโครงร่าง ในขณะที่ Balsamiq สร้างรูปลักษณ์แบบ 'วาดด้วยมือ' Moqups มีลายฉลุและชุดสีเต็มรูปแบบสำหรับการออกแบบแอปบนอุปกรณ์เคลื่อนที่และเว็บรวมถึง iOS, Android และ Bootstrap

Moqups แตกต่างจาก Balsamiq ในรูปแบบอื่น ๆ ซอฟต์แวร์นี้ช่วยให้สามารถแก้ไขอ็อบเจ็กต์และการจัดการเพจได้อย่าง จำกัด ทำให้นักออกแบบสามารถกำหนดอ็อบเจ็กต์“ master” ได้ซึ่งจะช่วยประหยัดเวลาได้มากเมื่อทำการเปลี่ยนแปลง wireframes ในระหว่างกระบวนการวนซ้ำ

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

ฉันถาม

ฉันถาม เป็นเครื่องมือ Wireframing อันดับต้น ๆ ที่เน้นการส่งมอบที่มีความเที่ยงตรงต่ำพร้อมการโต้ตอบขั้นพื้นฐานบางอย่าง นอกจากนี้ระบบคลาวด์ยังใช้ประโยชน์จากส่วนประกอบที่ใช้ซ้ำได้และแตกต่างจาก Balsamiq และ Moqups ด้วยประสบการณ์โครงร่างการคลิกผ่านที่มีประสิทธิภาพมากขึ้น

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

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

นักออกแบบเว็บไซต์เริ่มพัฒนาสถาปัตยกรรมข้อมูลสำหรับเว็บไซต์โดย

Glyffy

Glyffy เป็นเครื่องมือ Wireframing ที่มีความเที่ยงตรงปานกลางพร้อมคุณสมบัติพิเศษบางประการที่ทำให้มันแตกต่างจาก Balsamiq และ Mockups คุณลักษณะเฉพาะอย่างหนึ่งคือความสามารถในการสร้างกระแสไฟ Gliffy มีผังงานและความสามารถในการสร้างแผนภาพในตัวพร้อมด้วยลายฉลุแผนที่ความคิดและการสร้างแบบจำลองกระบวนการทางธุรกิจ

เช่นเดียวกับเครื่องมือ wireframing อื่น ๆ Gliffy มีไลบรารีของรูปทรงไอคอนและความสามารถในการแบ่งปัน wireframes Atlassian’s Confluence , หย่อน , Basecamp , Trello และ WordPress .

วิธีใช้ react native

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

Wireframe.cc

Wireframe.cc เป็นเครื่องมือ Wireframing พื้นฐานเหมือนกับ Balsamiq มีอินเทอร์เฟซที่สะอาดตาโดยไม่มีแถบเครื่องมือและไอคอนที่กวนใจ ซึ่งแตกต่างจากเครื่องมืออื่น ๆ อีกมากมายที่ช่วยให้คุณสามารถ 'ร่าง' โครงร่างด้วยเมาส์ได้

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

ไม่มีการสร้างต้นแบบหรือการโต้ตอบในตัวเนื่องจากมุ่งเน้นไปที่ Wireframing ความเที่ยงตรงต่ำเท่านั้น

แปลก

เรียกว่า“ Google เอกสาร” สำหรับ Wireframes แปลก เลียนแบบเครื่องมือสร้างไดอะแกรมเช่น OmniGraffle และ Visio . ไม่ได้มุ่งเน้นไปที่การสร้างต้นแบบ / การจำลองเนื่องจากจุดสนใจหลักคือการจัดทำโครงร่างและผังงานทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการผลิตแบบลวด

เช่นเดียวกับ Gliffy Whimsical เป็นเครื่องมือ wireframing ระดับกลางและมีไลบรารีองค์ประกอบที่กำหนดค่าได้ขนาดใหญ่ (ปุ่มอินพุตช่องทำเครื่องหมาย ฯลฯ )

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

Adobe XD

Adobe XD เมื่อเร็ว ๆ นี้ได้รับความสนใจจากนักออกแบบเนื่องจากอินเทอร์เฟซที่เรียบง่ายความสัมพันธ์ที่ลึกซึ้งกับผลิตภัณฑ์ Adobe อื่น ๆ ใช้งานง่ายและฟังก์ชันในตัวที่ช่วยลดความจำเป็นในการพึ่งพาปลั๊กอินและส่วนขยาย

มีสองวิธีในการสร้าง wireframes ใน Adobe XD สามารถสร้างโดยใช้เส้นและรูปร่างเพื่อสร้างวัตถุและองค์ประกอบหรือสามารถสร้างโดยใช้ชุด UI ที่สร้างไว้ล่วงหน้าจากแหล่งต่างๆเช่น behance.net และ ทรัพยากร XD .

คุณลักษณะที่ช่วยประหยัดเวลาอย่างหนึ่งของ Adobe XD คือความสามารถในการสร้างส่วนประกอบ 'ต้นแบบ' (เรียกว่า Symbols in Sketch) ซึ่งมีประโยชน์เมื่อทำการเปลี่ยนแปลงเนื่องจากส่วนประกอบทั้งหมดที่สร้างอินสแตนซ์จากต้นแบบจะสืบทอดการเปลี่ยนแปลงใด ๆ

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

ร่าง

ร่าง ซึ่งเป็นเครื่องมือออกแบบยอดนิยมสำหรับนักออกแบบ UX / UI เป็นแพลตฟอร์มสำหรับการแก้ไขเวกเตอร์การสร้างต้นแบบและการทำงานร่วมกันและมีไลบรารีปลั๊กอินหลายร้อยรายการที่เพิ่มฟังก์ชันการทำงาน

Wireframing ใน Sketch ก็เหมือนกับ Adobe XD ด้วยการใช้ชุด / เทมเพลตและเครื่องมือวาดภาพ Sketch ใช้ประโยชน์จากไฟล์ สัญลักษณ์ ซึ่งเป็นส่วนประกอบที่ใช้ซ้ำได้ซึ่งสามารถกำหนดได้ครั้งเดียวและใช้หลายครั้ง (ปุ่ม ฯลฯ ) สัญลักษณ์ที่สร้างอินสแตนซ์ยังใช้กับการเปลี่ยนแปลงใด ๆ ที่เกิดขึ้นกับสัญลักษณ์ 'ต้นแบบ' นี่เป็นข้อดีสำหรับนักออกแบบเนื่องจากมักจะมีการเปลี่ยนแปลงมากมายที่ต้องทำตลอดกระบวนการ wireframing

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

UXPin

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

ข้อมูลบัตรเครดิตที่ถูกแฮ็กฟรี

UXPin ไปไกลกว่า Wireframing โดยเน้นที่การสร้างต้นแบบด้วยไลบรารีคอมโพเนนต์ UI สัญลักษณ์เครื่องมือวาดภาพเวกเตอร์และการแก้ไขร่วม

มี Windows, macOS และเวอร์ชันคลาวด์ / เบราว์เซอร์ สำหรับ Wireframing ความเที่ยงตรงสูง UXPin จะทำงานเหมือนกับ Sketch และ Adobe XD ไม่ใช่การลากแล้ววางเหมือน Balsamiq แต่ต้องใช้การสร้างต้นแบบและการจำลองขึ้นไปอีกระดับสำหรับ นักออกแบบ ต้องการอยู่ในระบบนิเวศเดียว

Marvel

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

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

หนึ่งในเหตุผลที่นักออกแบบเลือก Marvel สำหรับ Wireframing คือการทำงานร่วมกับแพลตฟอร์มอื่น ๆ เช่น Jira, Sketch, Confluence, Dropbox, Slack และอื่น ๆ อีกมากมาย สำหรับการทำงานร่วมกันกับนักพัฒนาทีมออกแบบระยะไกลและลูกค้าคุณลักษณะนี้ช่วยให้นักออกแบบประหยัดเวลาได้มาก

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

Axure RP

Axure RP มีมานานแล้วและเป็นเครื่องมือที่ยอดเยี่ยมสำหรับการสร้างโครงลวดแบบคงที่ (เช่นเดียวกับต้นแบบที่มีการโต้ตอบสูง) ไม่ใช่ระบบคลาวด์แม้ว่าจะทำงานได้ทั้งบน Windows และ macOS

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

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

คืออะไร

เครื่องมือ Wireframe สุดโปรดของนักออกแบบ ApeeScape

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

“ รายการโปรดของฉันคือ Adobe XD และ UXPin ฉันเริ่มเลือก XD เป็นรายการโปรดเพราะง่ายต่อการสร้าง wireframes และทดสอบแนวคิดอย่างรวดเร็วและจากนั้นฉันก็สามารถเริ่มออกแบบและสร้างต้นแบบบนแพลตฟอร์มเดียวกันได้” - ไมเคิลเครก

“ รายการโปรดของฉันคือป๊อปเพราะมันเร็วมาก ฉันมักจะวาดโครงร่างบนกระดาษอยู่เสมอดังนั้นจึงใช้งานได้ดีและไม่ต้องจับอะไรซ้ำ นอกจากนี้ฉันยังพบว่ามันดีสำหรับคนทั้งโลก 'อย่าตกหลุมรักวิธีแก้ปัญหา' เพราะมันชัดเจนมาก ' - Nicola Rushton

“ ฉันใช้ Axure ตลอดเวลาในการออกแบบ เป็นเครื่องมือที่มีการประเมินต่ำมากสำหรับงานออกแบบที่ครอบคลุมและมีความซับซ้อนสูงมาก” - Andi Omtvedt

“ ฉันไม่ได้ใช้โครงร่างต่อกันอีกต่อไปแล้วเพราะฉันคิดว่าเครื่องมือนั้นแข็งแกร่งพอที่จะสร้างต้นแบบที่มีความเที่ยงตรงต่ำดังนั้นเกือบจะรวมโครงร่างเริ่มต้นเข้ากับภาพที่ดีกว่า ฉันนำ Framer X มาใช้ตั้งแต่เดือนมกราคมปีนี้และฉันก็รักมัน” - ชาร์ลีวิลเลียมส์

สรุป

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

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

แม้ว่าจะมีการพัฒนาจากความเที่ยงตรงต่ำที่สามารถส่งมอบได้ไปสู่ระดับกลางหรือความเที่ยงตรงสูง แต่ Wireframing ก็ไม่หายไปไหน

•••

อ่านเพิ่มเติมในบล็อกการออกแบบ ApeeScape:

• Wireframe Mapping: วิธีหลีกเลี่ยง Scope Creep
• ตายไปยังโครงร่าง ตรงสู่ความเที่ยงตรงสูง!
• Design Tool Showdown - Adobe XD เทียบกับ Sketch (2019)
• ฝึกฝนฝีมือของคุณด้วยเครื่องมือ UX ชั้นนำเหล่านี้
• 10 UX สิ่งที่นักออกแบบชั้นนำใช้

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

โครงร่าง UX คืออะไร?

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

ซอฟต์แวร์ออกแบบโครงร่างคืออะไร?

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

โครงร่างที่ดีคืออะไร?

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

โครงร่างควรมีอะไรบ้าง?

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

ทำไมคุณต้องมีโครงร่าง?

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