ทรัพยากรที่ดีที่สุดสำหรับการร่างภาพโครงลวดที่อิงกับกริด

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

ฉันเป็นแฟนของกระดาษและดินสอแบบดั้งเดิมพร้อมเครื่องมือพิเศษตามต้องการ แต่ wireframing ดิจิตอล มีขนาดใหญ่และเป็นตัวเลือกที่เหมาะสมสำหรับนักออกแบบสมัยใหม่ ในบทความนี้ฉันต้องการแบ่งปันทรัพยากรที่ดีที่สุดสำหรับทั้งสองเทคนิคเพื่อช่วยคุณสร้างของคุณเอง wireframes UI แบบอิงกริด.

UI / UX Conceptualization ล่วงหน้า

เริ่มกันโดยการอธิบายความแตกต่างระหว่าง โครงร่าง และ แบบเดิม. คำสองคำนี้มักจะใช้แทนกันได้เนื่องจากเกี่ยวข้องกับกระบวนการเดียวกัน.

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

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

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

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

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

เป้าหมายสำหรับ Wireframing

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

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

ค้นหาเว็บไซต์ที่คล้ายกันอื่น ๆ และจดคุณสมบัติที่ดีที่สุดไว้ วิเคราะห์วิธีการจัดระเบียบเนื้อหาและวิธีการย้ายแต่ละหน้า.

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

การมีแหล่งข้อมูลแบบกริดไม่ว่าจะทำจากกระดาษหรือเป็นดิจิทัลสามารถช่วยในการร่างอย่างรวดเร็ว ตอนนี้ลองตรวจสอบแหล่งข้อมูลที่ดีที่สุดสำหรับการสร้าง wireframes.

เส้นตาราง Sketchpads

คุณสามารถเริ่มต้นด้วยภาพร่างย่อพื้นฐานบนกระดาษของเครื่องพิมพ์ได้เสมอ ทำแผนที่ความคิดคร่าวๆ. โดยส่วนตัวฉันมักจะเริ่มทำงานกับกระดาษเครื่องพิมพ์เพราะวิธีนี้ฉันกังวลน้อยเกี่ยวกับกริดและอื่น ๆ สร้างความคิด.

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

มีผลิตภัณฑ์ที่ยอดเยี่ยมมากมายหากคุณต้องการ เริ่มต้น wireframing บนกระดาษ, เช่น Rhodia Dot Pad มีหลายขนาดเพื่อใช้ในชีวิตประจำวัน มันมาพร้อมกับ 80 หน้า แต่นี่เป็นเรื่องปกติของหนังสือร่างแบบตารางส่วนใหญ่.

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

Dotgrid ยังยอมรับคำสั่งซื้อตามสั่งที่ให้คุณ ออกแบบ Sketchpad ของคุณเอง. หนังสือแต่ละเล่มมีแผ่นน้อยกว่า 100 แผ่นดังนั้นรวมทั้งด้านหน้าและด้านหลังคุณจะได้รับประมาณ 200 หน้าสำหรับการร่างแบบตาราง.

สมุดร่าง dot dot คู่อื่นที่ฉันต้องการพูดถึง ได้แก่ Behance Dot Grid ซึ่งเป็นปกแข็งและเกลียวผูกแม้ว่ามันจะมีกระดาษแค่ 50 แผ่น.

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

แผ่นออกแบบที่ตอบสนองเหล่านี้ยังมี 50 แผ่นรวม 100 หน้า แต่แต่ละหน้ามี สี่กริดตอบสนองที่แตกต่างกัน แทนจุดพักที่แตกต่างกันในการออกแบบที่ตอบสนอง: เดสก์ท็อปแล็ปท็อปแท็บเล็ตและสมาร์ทโฟน.

แม้ว่าการออกแบบนั้นดูอ่อนช้อยเมื่อเทียบกับหนังสือ Dotgrid แต่ก็ไม่มีใครคิดว่า sketchbooks ตอบสนองสำหรับนักออกแบบเว็บไซต์ หากคุณเป็นคนประเภทนั้นคุณควรสั่งซื้อไดรฟ์ทดสอบ.

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

กริดมาในขนาดตัวอักษร A4 และ US สำหรับกระดาษสไตล์ต่างๆ คุณสามารถเลือกจากตัวเลือกมากมายเช่นแม่แบบสำหรับเว็บเบราว์เซอร์ที่มีความยาวเต็มหรือหน้าจอ iPhone ที่แตกต่างกัน.

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

เครื่องมือดิจิทัลและเว็บแอพ

มีโปรแกรม wireframing ที่ยอดเยี่ยมมากมายที่สามารถครอบคลุมได้โดยไม่ต้องเสี่ยงกับการวิเคราะห์อัมพาตดังนั้นตอนนี้เรามามุ่งเน้นไปที่ตัวเลือกที่ดีที่สุดสำหรับ wireframing ที่อิงกับกริด.

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

1. Moqups

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

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

เว็บไซต์ดำเนินงานโดยค่าเริ่มต้นบนแผนฟรีซึ่ง จำกัด ผู้ใช้ถึง 300 หน้าวัตถุ ไซต์มีตัวเลือกแบบพรีเมี่ยม แต่จ่ายค่าบริการรายเดือนอาจน่ารำคาญกว่าการใช้เครื่องมือของ Adobe หรือการซื้อ Sketch เพียงครั้งเดียว.

2. ตาราง Papr

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

โครงร่างใหม่แต่ละอัน มาพร้อมกับกริด ซึ่งช่วยให้คุณดำเนินการ snap-to-grid ในองค์ประกอบทั้งหมด คุณสมบัติง่าย แต่ก็เพียงพอที่จะ สร้างโครงลวด lo-fi ในไม่กี่นาที. เพียงลากสิ่งที่คุณต้องการลงบนหน้าและทำตามกริดเพื่อสร้างโครงลวดดาวฤกษ์.

3. Wireframe.cc

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

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

4. กระเต็น

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

กระเต็นมีห้องสมุดที่ไม่มีที่สิ้นสุดขององค์ประกอบ UI เช่น แท็บแอคคอร์เดียนเมนูดร็อปดาวน์เครื่องเล่นวิดีโอและลิงก์ข้อความแบบง่าย. กริดเริ่มต้นใช้ระบบกริด 960gs แต่คุณสามารถเลือกได้ 12, 16 และ 24 คอลัมน์.

คำพูดสุดท้าย

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

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

(ภาพปกโดย Oykun Yilmaz)