ฉันต้องการทราบความแตกต่างระหว่าง Wireframes และ Mockups ฉันหวังว่าจะได้รับความเข้าใจที่เรียบง่ายเกี่ยวกับความแตกต่างหรือเพื่อทราบอย่างชัดเจนว่าทั้งสองอย่างนั้นเหมือนกัน
ฉัน googled มัน แต่ฉันไม่เข้าใจว่าอะไรคือความแตกต่างฉันจะขอบคุณถ้ามีใครสามารถอธิบายให้ฉันอย่างกระชับ
คำตอบ:
wireframeเป็นเรื่องเกี่ยวกับการทำงาน มันอาจเป็นภาพร่างที่เรียบง่ายที่แสดงให้เห็นถึงสิ่งที่คุณสามารถทำได้ในการออกแบบของคุณ ตัวอย่างเช่นโครงร่างของเว็บไซต์จะแสดงการนำทางปุ่มหลักคอลัมน์การวางองค์ประกอบต่าง ๆ คุณสามารถคิดว่ามันเป็นพิมพ์เขียวสำหรับเว็บไซต์
การจำลองเป็นสิ่งที่แสดงให้เห็นจริงว่าผลิตภัณฑ์จะเป็นอย่างไรในกรณีนี้: เว็บไซต์ ผลลัพธ์สุดท้ายอาจมีลักษณะเหมือนการจำลองหรือเป็นรูปแบบที่เปลี่ยนแปลงหลังจากการแก้ไขเวอร์ชัน ในขณะที่บางคนชอบที่จะวาด mockups โดยใช้ซอฟต์แวร์กราฟิกคนอื่น ๆ ทำมันตรงใน HTML / CSS
ฉันใช้ Balsamiq สำหรับ wireframes และ Photoshop / Illustrator หรือ HTML + CSS (ขึ้นอยู่กับความซับซ้อน) สำหรับการจำลอง
ตัวอย่างของโครงลวด:
Wireframesเป็นรูปทรงพื้นฐานหรือเส้นที่ใช้กำหนดตำแหน่งและ / หรือขนาดเท่านั้น เป้าหมายของโครงลวดใด ๆ คือ "ปรับ" องค์ประกอบให้เป็นเลย์เอาต์ไม่ได้ระบุว่าองค์ประกอบอาจปรากฏในการออกแบบขั้นสุดท้ายจริง ๆ เฉพาะที่ที่พวกเขาจะอยู่
Mockupsถูกสร้างขึ้นที่ด้านบนของ wireframes และดำเนินการต่อเพื่อแสดงลักษณะโดยรวมของการออกแบบรวมถึงตัวเลือกประเภทการเลือกสี ฯลฯ เป้าหมายของการจำลองคือการแสดงให้ใกล้เคียงที่สุดเท่าที่จะทำได้
ฉันสนับสนุนการตอบกลับโดยละเอียดของ @Yisela รวมถึงเพิ่มวิสัยทัศน์นี้ในการนำเสนอดังต่อไปนี้
นี่คือบทสรุปสั้น ๆ ของบทความโดย Marcin Treder :
wireframe
โครงลวดเป็นตัวแทนความเที่ยงตรงต่ำของการออกแบบ ควรแสดงอย่างชัดเจน:
•โครงสร้างของข้อมูล (ที่ไหน?)
•คำอธิบายและการสร้างภาพพื้นฐานของผู้ใช้ - การโต้ตอบกับผู้ใช้ (อย่างไร)
รูปจำลอง
Wireframes ใช้เพื่อกำหนดกรอบงานลำดับชั้นข้อมูลแสดงเวิร์กโฟลว์จัดเตรียมรายละเอียดเกี่ยวกับสิ่งที่อยู่บนหน้าจอและคำอธิบายเกี่ยวกับการทำงานขององค์ประกอบ (หมายเหตุประกอบ) ทั้งนี้ขึ้นอยู่กับความซับซ้อนของแอปพลิเคชันหรือเว็บไซต์ wireframes ควรถูกสร้างขึ้นตามความต้องการอื่นที่สามารถส่งมอบได้ แบบจำลองกระบวนการ Wireframes สามารถใช้เพื่อล้วงข้อกำหนดจากไคลเอนต์และในที่สุดก็ยืนยันข้อกำหนดกับไคลเอนต์ Wireframes เป็นโมเดลภาพของโครงสร้างของไซต์หรือแอปพลิเคชัน พวกเขาไม่ได้กำหนดแบบอักษรที่จะใช้, การขยาย, สี, สไตล์ ฯลฯ พวกเขาจะไม่ปรับขนาดและพวกเขาไม่มีเสียงหรือการไล่ระดับสี ทั้งหมดนี้จะต้องมีการสื่อสารกับลูกค้าเพื่อให้พวกเขาเข้าใจกระบวนการและบริบทของโครงร่างการส่งมอบโครงข่ายร่วมกับการส่งมอบความต้องการอื่น ๆ
โดยทั่วไปจะสร้าง mock-up ขึ้นใน Photoshop และในขณะที่โครงสร้างหรือเฟรมเวิร์กของ wireframe ที่ยืนยันแล้วสามารถส่งมอบได้มันเป็นการส่งมอบที่แตกต่างกันโดยมีกำหนดการและกระบวนการอนุมัติที่แตกต่างกัน Mock-ups หรือ comps, กำหนดรูปแบบการมองเห็นหรือเสียงของอินเตอร์เฟซ เมื่อยอมรับแล้วการจำลองจะแปลความต้องการเพิ่มเติมหรือผลิตภัณฑ์ทำงานเช่นรหัส CSS คำแนะนำสไตล์สินทรัพย์กราฟิก ฯลฯ
Wireframes จะไม่ถูกจำลอง Mock-ups สามารถใช้เป็น wireframes แต่อาจมีผลกระทบต่อการแก้ไขใด ๆ ที่อาจจำเป็นและส่งผลกระทบต่องบประมาณของคุณอย่างมีนัยสำคัญ
ที่มา: 15 ปีในฐานะนักออกแบบการสื่อสาร, UX Lead, นักวิเคราะห์ธุรกิจในการพัฒนาเว็บไซต์และแอพพลิเคชั่น และ BABOK อันเป็นที่รัก
ฉันยังไม่มีชื่อเสียงที่จะแสดงความคิดเห็นต่อการตอบสนองของ Dave Kaye ดังนั้นฉันต้องตอบโดยตรง มันคุ้มค่าที่จะสังเกตคำตอบของเขาเปรียบเทียบกับคำตอบที่ยอดเยี่ยมของ Rachuru
ในการตีความของวลีที่ทันสมัยคำอธิบายของคนธรรมดาอาจ / ควร;
คำศัพท์ที่แท้จริงมาจากยุค 80 เมื่อก่อนคุณไม่มีพลังในการคำนวณเพื่อสร้างภาพเรียลไทม์ แต่คุณสามารถดู "wireframes" ของกราฟิกที่ลอยอยู่บนหน้าจอแบบเรียลไทม์ "การสาธิต" ที่เหมาะสมจำเป็นต้องใช้การเรนเดอร์ข้ามคืน
ในช่วงเวลาเหล่านี้ "โครงร่าง" หมายถึงโครงกระดูก "การออกแบบ" และด้วยกระบวนการออกแบบที่ดีซ้ำแล้วซ้ำอีกผู้คนควรสร้างจำลองจากโครงร่างรับความคิดเห็นและส่งกลับไปปรับปรุงการออกแบบโครงลวด
น่าเสียดายที่ทุกวันนี้ลูกค้ามีซอฟต์แวร์จำนวนมากที่อนุญาตให้พวกเขาออกแบบจำลองที่ไม่ได้ใช้สิ่งใด ๆ ที่โปรแกรมเมอร์ใช้งานได้โดยตรง บ่อยครั้งที่การออกแบบของพวกเขาถูกสร้างขึ้นโดยคนอื่น ๆ ดังนั้นการเยาะเย้ยจะได้รับการเพิ่มความเป็นส่วนตัวมากกว่าที่จะถูกนำกลับไปยังโปรแกรมเมอร์เพื่อคำนึงถึงการออกแบบที่ยิ่งใหญ่
ฉันคิดว่านั่นเป็นสิ่งที่เดฟพูดจาสุภาพเล็กน้อยเกี่ยวกับการพูดถึง :-)
คี ธ
วิธีทำให้มันง่าย:
โครงลวด : โครงกระดูก / โครงสร้าง
Mockups : ด้านผิวหนัง / ภาพ
ดังที่บางคนสังเกตเห็นในปัจจุบันโครงลวดมีความสำคัญมากขึ้นในขณะที่ mockups กำลังหลอมรวมเป็นต้นแบบ
ต้องเพิ่มจุดเดียวที่ผู้คนไม่ได้ทำ ... คำตอบเหล่านี้ทั้งหมดให้คำอธิบายทางเทคนิคที่ดี แต่ในสภาพแวดล้อมการทำงานความแตกต่างไม่ชัดเจนเสมอไป บริษัท บางแห่งอาจเพิ่มฟังก์ชันการทำงานให้กับการจำลองและบาง บริษัท อาจวางข้อกำหนดการออกแบบระดับสูงไว้ในโครงลวด ฉันควรระวังเกี่ยวกับการถูกล็อคไว้ด้วยคำตอบของสิ่งที่ "ควร" เป็น บริษัท แรก ๆ ที่คุณไปทำอาจจะทำอะไรที่ไม่ได้เป็นอย่างนั้น!
ตามหน้าจอความรู้จำลองของฉันคือการตอบโต้ครั้งสุดท้ายของ UI, รูปลักษณ์และความรู้สึก สิ่งที่จะเป็นกระแสปกติและสิ่งที่จะเป็นกระแสทางเลือก ฉันคิดว่ามันสามารถสร้างเว็บต้นแบบได้เป็นส่วนใหญ่ใน HTML และ CSS เราทำส่วนใหญ่ในช่วง HLD เพื่อแสดงและได้รับการยอมรับจากลูกค้า
Wireframes เมื่อเปรียบเทียบจะมีสมาธิมากกว่าเหมือนแผนภาพการไหลที่มีคำอธิบายทั่วไปอยู่ที่นั่น หากไม่ได้เป็นตัวแทนของคำอธิบายรายละเอียดเล็ก ๆ น้อย ๆ เช่นเกิดอะไรขึ้นกับการคลิกของเหตุการณ์เปลี่ยนกิจกรรมและสิ่งที่คล้ายกัน พวกเขาส่วนใหญ่ทำโดย SA / BA และจำลองขึ้นโดยนักออกแบบ / นักพัฒนา มากกว่าบางคนแนบข้อกำหนดทางเทคนิคกับ wireframes เช่น DB ที่เกี่ยวข้องกับ UI นั้น
แต่อีกครั้งมันขึ้นอยู่กับโครงการในโครงการ ในกรณีของเราโครงลวดยืนแหล่งที่มาของความจริง
นี่คือสิ่งที่ฉันเข้าใจว่าเป็นความแตกต่างในพวกเขา
โครงลวดสามารถจำลอง การจำลองจะถือว่าเป็นโครงร่าง ในขณะที่บางครั้งพวกเขาก็แยกสิ่งต่าง ๆ (ตามที่คนอื่นได้ระบุไว้) พวกเขาก็มักจะไม่แยกจากกัน
ในคราวเดียวเราอาจพิจารณา wireframes ที่ Visio จะสร้าง และ Mockups จะเป็นสิ่งที่ PhotoShop สร้างขึ้น
แต่ทุกวันนี้ด้วยเครื่องมือที่เรามีอยู่พวกเขามักจะเป็นเอกสารจริงเดียวกัน ในตอนแรกพวกเขาอาจเริ่มต้นด้วย wireframes (รูปแบบและฟังก์ชั่นล้วนๆ) แต่เมื่อเวลาผ่านไปมีรายละเอียดมากขึ้นเรื่อย ๆ จนถึงจุดที่พวกเขาอาจถูกมองว่าเป็นการเลียนแบบ และหากใช้เครื่องมือแบบอินเทอร์แอคทีฟเช่น Axure ณ จุดหนึ่งก็สามารถพิจารณาต้นแบบได้
ดังนั้นมันจึงเป็นสเปกตรัมที่มีการทับซ้อนกันมากมาย
wireframes
เมื่อคุณต้องการออกแบบแอปพลิเคชั่นมือถือหรือเว็บแอปพลิเคชันคุณจะต้องร่างภาพว่าแต่ละหน้ามีลักษณะอย่างไร ตามแนวคิดทางธุรกิจเท่านั้นผู้ออกแบบสามารถกำหนดขั้นตอนการสมัครและแบบร่างแรกของการออกแบบที่มีภาพร่างว่าจะมีลักษณะอย่างไรปุ่มใดจะอยู่ที่นั่นฟิลด์ใดจะอยู่ที่นั่นเป็นต้นนั่นคือโครงลวด มีความหมายสำหรับ
mockups
Mockups เป็นภาพที่มีชีวิตมากกว่า พวกเขาดึงดูดสายตามากขึ้นมีสีแบบอักษรธีมปุ่มโลโก้ ฯลฯ ในขั้นตอนนี้จะมีป้ายกำกับของฟิลด์บันทึกย่อชนิดแบบอักษรเมนูการนำทางและอื่น ๆ ที่ระบุไว้ในการออกแบบ เป็นการแสดงลักษณะแอพมือถืออย่างแน่นอนหรือหน้าเว็บจะเป็นอย่างไร
คุณสามารถค้นหาการเปรียบเทียบรายละเอียดระหว่าง Wireframes และ Mockups ในบทความข้อมูลนี้: ความแตกต่างระหว่าง Wireframe, Mockup และ Prototype