ฉันจะสร้างต้นแบบ UI แบบ lo-fi (ไม่โต้ตอบ) ได้อย่างไร

ฉันกำลังทำงานเกี่ยวกับการสร้างต้นแบบพื้นฐานบางส่วนเพื่อรวบรวมข้อกำหนดและอีกส่วนหนึ่งเพื่อออกแบบ UI ขั้นสุดท้าย

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

อะไรคือวิธีที่แนะนำสำหรับนักพัฒนาในการสร้างต้นแบบ UI แบบไม่โต้ตอบ?

และทำไม?

ฉันลองใช้ปากกากระดาษและ Post-it note แล้วพวกเขาก็ลงไปเหมือนบอลลูนตะกั่ว (น่าจะเป็นทักษะการวาดของฉัน) ในท้ายที่สุดฉันใช้Balsamiqซึ่งผู้ใช้ส่วนใหญ่ชื่นชอบและผู้ใช้ส่วนใหญ่ได้รับมันเป็นเครื่องต้นแบบ อนิจจาบางคนยังคงมีปัญหากับความคิดที่ว่าคนแรกควรทราบว่าแอปพลิเคชันควรทำอะไรผ่านต้นแบบต้นแบบ lo-fi และต้องการ "เห็นบางสิ่งบางอย่างบนหน้าจอ" ก่อนที่จะทำอะไร

ฉันชอบไวท์บอร์ด

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

Bockamiq mockups มักจะเป็นพอร์ตแรกของการโทรเกือบจะเร็วเท่ากับการใช้ปากกาและกระดาษและสามารถใช้ซ้ำได้

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

http://balsamiq.com/

โครงงานดินสอเป็นส่วนเสริมของ Firefox ที่เลียนแบบได้ง่ายและดี

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

คุณสมบัติการวาดภาพที่เป็นที่นิยมยังถูกนำมาใช้ในดินสอเพื่อลดความซับซ้อนของการวาดภาพ ...

ฉันใช้การผสมผสานของ MS Paint และ Visual Studio ฉันใช้ VS เพื่อลาก / วางส่วนควบคุมทั้งหมดที่ฉันต้องการลงบนแบบฟอร์มจากนั้นจับภาพหน้าจอลงในโปรแกรมระบายสี MS เพื่อจัดเรียงใหม่จนกว่าฉันจะชอบวิธีที่ดูเหมือน

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

แก้ไข: คำตอบของ Tobyนำฉันสู่Balsamiqและตอนนี้เป็นเครื่องมือหลักที่ฉันเลือกสำหรับการจำลอง UI เพื่อนำเสนอต่อผู้อื่น

ฉันยังคงดึง MSPaint หรือปากกา / กระดาษออกมาในบางโอกาส แต่โดยปกติแล้วก็ต่อเมื่อฉันร่างการออกแบบ UI พื้นฐานสำหรับการอ้างอิงของฉันเองหรือถ้าฉันต้องการนำเสนอลูกค้าด้วยสองตัวเลือกสำหรับหน้าจอที่เสร็จสมบูรณ์ (เช่น"คุณ ต้องการปุ่มที่นี่หรือที่นี่? " )

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

ที่ถูกกล่าวว่าวิธีการ low-fi ต่างๆมีจุดแข็งที่แตกต่างกัน:

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

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

• Balsamiqเป็นทางลัดสำหรับการสร้างต้นแบบกระดาษที่สามารถนำกลับมาใช้ใหม่ได้อย่างรวดเร็ว ฉันพิมพ์ภาพหน้าจอและใช้เป็นภาพต้นแบบกระดาษ ฉันยังใช้มันในระหว่างการประชุมเพื่อช่วยเยาะเย้ยความคิดตามที่เรามี - คล้ายกับการสร้างต้นแบบไวท์บอร์ด ฉันยังใช้ Visio และ OmniGraffle สำหรับสิ่งนี้

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

ฉันไม่เคยทำต้นแบบกับผู้ใช้ ฉันทำกับทีมออกแบบตามข้อมูลผู้ใช้ที่เรามี ผู้ใช้จะไม่ออกแบบ ; หากคุณปฏิบัติต่อพวกเขาในฐานะนักออกแบบคุณท้ายด้วยซอสมะเขือเทศน้ำกาแฟขม (ขอบคุณ Malcolm Gladwell) และรถโฮเมอร์ รวบรวมอินพุตของผู้ใช้ในการออกแบบของคุณและใช้เพื่อปรับแต่งการออกแบบกับทีมออกแบบ

mock-ups แรกของฉันมักจะเป็นดินสอ & กระดาษหรือไวท์บอร์ด แต่เมื่อพื้นฐานถูกตอกลงไปฉันมักจะย้ายไปที่ HTML ฉันมีรูปภาพตัวยึดมากมายที่พูดว่า "ส่วนหัว", "แบนเนอร์", "รูปภาพ", "แผนภูมิ" และสิ่งที่คล้ายกัน CSS ง่าย ๆ บางอย่างสำหรับการจัดวางสิ่งต่าง ๆ ออกมาค่อนข้างสงบและฉันก็ทำเสร็จแล้ว JS ตัวเล็ก ๆ ที่ยึดติดกับตัวควบคุมสามารถทำให้คุณมีฟังก์ชั่นการใช้งานบางอย่างและผู้คนก็ดูเหมือนจะ "ทำให้ดีขึ้น"

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

ฉันใช้ปากกาและกระดาษก่อนจากนั้นหลังจากวาด UI อย่างรวดเร็วสองสามครั้งฉันพยายามทำให้เป็น powerpoint 2 หรือ 3 ครั้ง การมีการทำซ้ำ 5 หรือ 6 ก่อนเข้าสู่ตัวแก้ไขจริงช่วยฉันลด UIs ที่ไม่สามารถใช้งานได้ (เช่นการสร้างเนื้อหา Y ตาม textbox X เมื่อผู้ใช้ยังไม่เคยเห็น X เลย) ฉันเห็นว่ามันเป็นโอกาสที่จะกำจัดพวกโง่ออกไปทันที

ปากกา & กระดาษ / ไวท์บอร์ดและคุณยังสามารถใช้ Visio หรือสิ่งที่คล้ายกัน (Visio มาพร้อมกับเทมเพลต UI สำหรับการควบคุมทั่วไป) บางครั้งฉันถ่ายรูป UI ที่มีอยู่ (คล้าย) ที่เรามีและตัดและวาง UI ใหม่ลงบนมันโดยใช้โปรแกรมระบายสีเช่น Paint.NET

ฉันทำต้นแบบอย่างรวดเร็วใน Delphi หลายครั้ง มันทำให้ง่ายต่อการรวมรูปแบบหน้าจอเข้าด้วยกันอย่างรวดเร็วมากเร็วกว่าใน powerpoint หรือ visio exe ที่ได้สามารถแนบกับอีเมลได้โดยไม่ต้องมีการพึ่งพาใด ๆ ตั้งแต่ฉันใช้มันเพื่อเว็บแอพต้นแบบไม่มีอันตรายจากคนสับสนต้นแบบกับรุ่นสำเร็จรูปครึ่งหนึ่ง

ฉันพยายามทำแบบเดียวกันกับ Sencha Ext Designer แต่ระบบเลย์เอาต์ของ Ext JS นั้นใช้งานได้ยากกว่าและรู้สึกว่าเป็นภาระมากกว่าความสะดวกในการย้ำความคิดอย่างรวดเร็ว

ฉันไม่ได้ใช้วิธีการเดียวกันเสมอไป เทคนิคบางอย่างที่ฉันใช้คือ (ตามลำดับความถี่คร่าวๆ):

• ไวท์บอร์ด (สำหรับการสร้างต้นแบบโต้ตอบ / พูดคุยถ่ายรูปหลังจากนั้น!)

• นักออกแบบ GUI สไตล์ RAD (Visual Studio, NetBeans, Delphi)

  • ทำความดีให้กับสิ่งนี้และมันสามารถกลายเป็นหนึ่งในวิธีที่เร็วที่สุดในการสร้างต้นแบบของแอพพลิเคชั่น "windows, widgets และ form" โบนัส: ต้นแบบสามารถจบลงด้วยการดูเป็นมืออาชีพที่น่ารักจริงๆขึ้นอยู่กับว่าคุณจะโยนมันเร็วแค่ไหน บางครั้งพวกเขาสามารถทำหน้าที่เป็นจุดเริ่มต้นสำหรับการสร้างของจริงเมื่อต้นแบบได้รับการอนุมัติ
    
    

• กระดาษและปากกา / ดินสอ (โดยปกติจะระดมสมองเพื่อตนเอง)

• ไฟล์ HTML / CSS / JS แบบคงที่บนดิสก์

  • ฉันจินตนาการว่าแอปพลิเคชันการออกแบบแบบ WYSIWYG จะไม่ทำร้ายที่นี่ แต่ฉันมักจะแฮ็คกับ HTML แบบดิบ ฉันไม่ได้ทำอะไรมากมายเลย
    
    

• เครื่องมือวาดภาพเวกเตอร์ - Illustrator / Inkscape / Visio / PowerPoint / Impress

• เครื่องมือกราฟิกแรสเตอร์ - Photoshop / Gimp

• ศิลปะ ASCII ;-)