Mockups: การเข้ารหัสกับการวาด?

9

นี่ไม่เกี่ยวกับการออกแบบเว็บ แต่เกี่ยวกับการออกแบบอินเตอร์เฟสโดยทั่วไป ควรใช้โค้ด Mockups ของอินเทอร์เฟซหรือ "วาด" ในโปรแกรมกราฟิกเช่น GIMP, Photoshop เป็นต้นหรือไม่

website-design  interface-design  design-process 
— ริสโตเฟอร์
แหล่งที่มา
3
ฉันมักจะบอกว่า "ร่างอินเทอร์เฟซของคุณถ้าคุณทำใน photoshop หรืออะไรก็ตามที่คนอื่นจะคิดว่าคุณเป็นมากกว่าที่คุณเป็นจริงปล่อยให้ mockups ของคุณดูสเก็ตช์เอาพื้นฐานลงเพื่อให้ลูกค้าของคุณรู้ว่า บน UI ของคุณในภายหลัง "
— ฮันนา
1
มันขึ้นอยู่กับโครงการทั้งหมด ไม่มีคำตอบ 'สากล' ที่ดีที่สุด
— DA01

คำตอบ:

14

ถามตัวเองด้วยคำถามเหล่านี้:

  • คุณสามารถสำรวจเลย์เอาต์ / ตัวเลือก UI ได้ใน 30 นาทีโดยการเข้ารหัส คุณสำรวจได้กี่ภาพโดยการร่าง

  • คุณได้รับการออกแบบ UI บ่อยแค่ไหนในการลองครั้งแรก ถ้าไม่บ่อยวิธีที่รวดเร็ว / ง่ายในการเปลี่ยนภาพร่างเมื่อเทียบกับการจำลองแบบรหัสคืออะไร?

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

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

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

— หมิ่นพระบรมเดชานุภาพ
แหล่งที่มา
OP อาจเป็นเพียงแค่การใช้ตัวแก้ไขโค้ดแบบ WYSIWYG คุณสามารถเลือกสีหรือแม้แต่ "วาด" วัตถุ ...
— jackJoe
2
จริงๆแล้วการเข้ารหัสโดยไม่ต้องออกแบบ UI ก่อนเป็นเทคนิคที่ค่อนข้างถูกต้อง แน่นอนว่าถ้า "การเข้ารหัส" ไม่ได้หมายถึงส่วน UI หรือ UX :) API และไลบรารีส่วนใหญ่ได้รับการออกแบบตามความเป็นจริงโดยไม่คำนึงถึง UI - นั่นอาจเป็นไปไม่ได้
— thebodzio
1
@lese คุณกำลังขว้างวิธีน้ำตก ซึ่งสามารถใช้ได้ แต่แนวโน้มวันนี้คือไปเปรียวซึ่งมีโอกาสมากที่คุณทำงานในรหัสจากวันแรก
— DA01
@ DA01: คุณกำลังทำงานกับโค้ดตั้งแต่วันแรก แต่คุณยังคงใช้วิธีการจากบนลงล่าง ไม่มีอะไรในความคล่องตัวที่บอกว่าคุณไม่สามารถวางแผนสถาปัตยกรรมข้อมูลของคุณหรือกำหนด UI เป็นอันดับแรกก่อนการเข้ารหัสได้
— Lèsemajesté
2
@thebodzio: ใช่แน่นอนนั่นคือสิ่งที่แยกออกจากความกังวลสำหรับ แต่ฉันไม่ได้หมายถึงการเข้ารหัสแบ็กเอนด์ เมื่อฉันพูดว่าการเขียนโค้ดในส่วนของการออกแบบของคำถาม (ไม่ใช่การเขียนโปรแกรมเปรียบเทียบฉันใช้เพื่ออธิบายจุด - ฉันรู้ว่าสับสนเล็กน้อย) ฉันหมายถึงการเขียนโค้ด mockup (CSS + HTML หรือภาษา UI ของคุณอาจเป็นอะไรก็ได้ )
— Lèsemajesté
5

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

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

— thebodzio
แหล่งที่มา
2
"และคุณคุ้นเคยและคุ้นเคยกับการทำงานที่" รหัส "ระดับ" -> เป็นสิ่งสำคัญที่ทีม UI / UX สามารถทำงานได้ที่ระดับรหัส นักออกแบบทุกคนไม่จำเป็นต้องเป็น coder แต่ทีมจะต้องสามารถสร้างทุกสิ่งที่พวกเขาออกแบบและเข้าใจวิศวกรรมมากเท่ากับการออกแบบด้วยภาพ
— DA01
ฉันสามารถตกลงได้ตราบใดที่คุณหมายถึงทีมโดยรวม ฉันคิดว่าเมื่อคุณออกแบบ UI / UX ไม่ใช่การเขียนโค้ดความรู้เกี่ยวกับการทำงานของโค้ดนั้นสามารถยับยั้งคุณได้เพราะคุณมักจะหลีกเลี่ยงวิธีแก้ปัญหาที่อาจเกิดขึ้นเพียงเพราะคุณคิดว่ามันยากเกินไป การดำเนินการ" หมายความว่างานออกแบบของคุณจะถูกตัดออกจากความคิดที่ยอดเยี่ยมเพราะ "การคิดชุดเครื่องมือ" จะล็อคส่วนของจินตนาการของคุณ จากนั้นอีกครั้ง…เป็นเพียงด้านเดียวของใบมีด :) นอกจากนี้คำถามเกี่ยวกับ "จำลอง" เท่านั้น
— thebodzio
1
ฉันได้ยินการโต้เถียง 'ระงับกลับ' มาก แต่พบว่ามาจากนักออกแบบภาพที่ดื้อรั้นกับเลเยอร์รหัสงานนำเสนอเท่านั้น คนเหล่านี้มีแนวโน้มที่จะล่องลอยไปทำทุกอย่างใน Flash :) ฉันอยากจะแนะนำว่ามันไม่ต่างไปจากการออกแบบการพิมพ์ การรู้วิธีการทำงานของการพิมพ์ไม่ได้ 'รั้งคุณไว้' ในฐานะนักออกแบบการพิมพ์ แต่เป็นการป้องกันไม่ให้คุณสร้างไฟล์ที่จะทำให้หายใจไม่ออก RIP หรือทำให้เครื่องพิมพ์ส่งเสียงกรีดร้องที่คุณสำหรับความครอบคลุมหมึก 300% มันเป็นเพียงการทำความเข้าใจกับสื่อและข้อ จำกัด ที่เกี่ยวข้อง
— DA01
1
WYSIWYG ไม่ได้มีไว้สำหรับอำนวยความสะดวก 'การคิดเชิงภาพ' มันมีไว้เพื่อให้คนที่ไม่ต้องการเรียนรู้อะไรบางอย่างที่อ่อนแอ ;) สำหรับข้อ จำกัด พวกเขากำหนดสื่อ สถาปนิกที่สามารถวาดภาพที่ยอดเยี่ยม แต่ไม่เข้าใจพื้นฐานของโหลดและช่วงเวลาที่ถูกยึดไว้ในระดับที่ยอดเยี่ยม ... เนื่องจากไม่มีสิ่งใดที่วาดได้จริงสามารถสร้างขึ้นได้
— DA01
1
(และความคิดเห็นของฉันจำนวนมากได้รับการทำงานทั้งกับหรือในทีม UX ที่ไม่มีความคิดวิธีการสร้างสิ่งที่พวกเขามาด้วยพวกเขาไม่ได้คิดค้นนวัตกรรมส่วนใหญ่เวลา ... แต่ค่อนข้างออกแบบเพียงครึ่งคิดออก โซลูชั่นที่ไม่สามารถนำไปใช้ได้จริงในแง่ของระยะเวลาการใช้งานผู้ใช้หรืองบประมาณ [ซึ่งเป็นข้อ จำกัด เพิ่มเติมทั้งหมดที่แทนที่จะเป็น 'กำแพง' เป็นสิ่งที่ช่วยกำหนดโซลูชันการออกแบบ]) PS: การสนทนาที่ดี!
— DA01
3

สำหรับการออกแบบ UI ฉันมีสามขั้นตอนโดยมีวัตถุประสงค์แตกต่างกัน:

  1. ร่าง ก่อนอื่นคุณต้องทำให้ความคิดพื้นฐานขององค์ประกอบต่างๆมีอยู่และวิธีที่พวกเขาจะรวมเข้าด้วยกัน รายละเอียดใด ๆ หรือความสมบูรณ์แบบด้านสุนทรียภาพในขั้นตอนนี้คือสิ่งที่ทำให้ไขว้เขว ฉันใช้ปากกาไวท์บอร์ดและปากกาที่สามารถลบได้ไขมันดังนั้นจึงเป็นไปไม่ได้ที่จะไขว้เขวโดยรายละเอียดมากเกินไปและง่ายต่อการเขียนแนวคิดที่แตกต่างและเริ่มต้นใหม่ได้ตลอดเวลา ฉันได้ยินคนที่วาดเฉพาะโน้ตหลังโพสต์เล็ก ๆ หรือใช้มือข้างนอก (เช่นมือซ้ายถ้าคุณถนัดขวา) เพื่อบังคับตัวเองให้ไม่ใส่ใจต่อความสวยงามและมุ่งเน้น 100% บนความคิดและฟังก์ชั่น (ภาพไม่ใช่ของฉันจาก Frank Prendegast )

ภาพถ่ายของโครงลวดไวท์บอร์ด

  1. (2!) จำลองสถานการณ์ประการที่สองคุณต้องการดูและรับข้อเสนอแนะค้นหาข้อมูลให้มากที่สุดเท่าที่จะทำได้เกี่ยวกับสิ่งที่สัญชาติญาณของผู้คนและการตอบสนองที่ไม่พร้อมเพรียงกันก่อนที่คุณจะเริ่มการใช้งานที่ต้องใช้เวลามาก สิ่งนี้ควรอยู่ในสิ่งที่คุณทำงานอย่างมีประสิทธิภาพที่สุดเพราะหากคุณทำถูกต้องคุณควรกลับไปที่กระดานวาดภาพบ่อยครั้งเพื่อค้นหาคำวิจารณ์และตั้งเป้าที่จะระบุปัญหาที่ไม่คาดคิดให้เร็วที่สุดเท่าที่จะทำได้ หากคุณเป็นเครื่องเข้ารหัสที่บ้าคลั่งและเป็นสิ่งที่คุณทำงานได้อย่างสะดวกที่สุดการเข้ารหัสนั้นดี แต่คนส่วนใหญ่จะทำงานได้เร็วขึ้นในบางเรื่องเช่น Fireworks, Photoshop, ซอฟต์แวร์ wireframing เฉพาะหรืออาจจะเป็นเครื่องมือสร้างอินเตอร์เฟส UI เช่น Flash Catalyst (ไม่เป็นไรหากผลิตภัณฑ์สุดท้ายไม่ใช่ Flash เป้าหมายคือการได้รับการตอบรับที่ดีก่อนที่จะเริ่มดำเนินการ)

  2. (3!) การใช้งาน ในที่สุดคุณก็นำสิ่งนั้นไปใช้และตั้งเป้าหมายที่จะทำให้คุณได้รับผลตอบกลับเร็วขึ้นและบ่อยขึ้น

วงจรโครงการสามส่วนนี้มีจุดมุ่งหมายที่แตกต่างกันดังนั้นหากเป็นโครงการขนาดใหญ่ควรใช้เครื่องมือที่เหมาะสมที่สุดสำหรับงานในแต่ละขั้นตอน

— user56reinstatemonica8
แหล่งที่มา
2

คำถามนี้ค่อนข้างคลุมเครือและเช่นเดียวกับคำตอบ

ยิ่งไปกว่านั้นโครงการจะแตกต่างกันอย่างดุเดือดเช่นเดียวกับทีม

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

โดยทั่วไปฉันจะบอกว่านี่เป็นประเภทของเวิร์กโฟลว์ที่คุณควรตั้งเป้าหมาย:

  1. ร่าง. ดินสอ + กระดาษ กระดานไวท์บอร์ด ย้ำ. ทำงานกับสมาชิกในทีมให้มากที่สุด
  2. การจำลองแบบ low-fi อาจเป็น PSD อาจเป็น visio อาจเป็นกระดาษ ผู้ใช้ทดสอบสิ่งเหล่านี้
  3. รับการสร้างต้นแบบ นี่คือที่ที่คุณต้องการเริ่มทำมากที่สุดในรหัสการทำงาน ข้ามไปที่ Photoshop ตามที่คุณต้องการและนำสิ่งต่าง ๆ ออกมาเป็นรหัสให้เร็วที่สุดเท่าที่จะทำได้ ดำเนินการทดสอบโดยผู้ใช้ / ทำซ้ำ
— DA01
แหล่งที่มา
0

สิ่งที่ดีสำหรับฉันคือการสร้าง mockups โดยใช้โปรแกรมที่เน้นไม่สร้างเค้าโครงพิกเซลที่สมบูรณ์แบบ สำหรับฉันนั่นคือ Balsamiq Mockups ซึ่งคุณสามารถตรวจสอบได้ที่http://www.balsamiq.com/products/mockups

— วอร์เรน Keuffel
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.