คำแนะนำสำหรับมืออาชีพในการออกแบบ UI

เนื้อหา

• นักออกแบบ UI ทำอะไร?
• เว็บเทียบกับแอปเนทีฟ
• ปรับปรุงชุดทักษะของคุณ

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

เมื่อฉันดูภาพยนตร์ไซไฟฉันจะดูอินเทอร์เฟซ และเมื่อฉันเล่นวิดีโอเกมฉันจะสังเกตวิธีจัดวางเมนูต่างๆ หากลักษณะเหล่านี้ฟังดูคุ้นเคยคุณอาจเป็นนักออกแบบ UI ที่เป็นหัวใจหลัก

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

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

นักออกแบบ UI ทำอะไร?

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

การสื่อสารกับลูกค้า

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

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

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

การรวมวิธีการสื่อสารแบบซิงโครนัสและอะซิงโครนัสเข้าด้วยกันมีประโยชน์ การโทรเป็นสิ่งที่ดีหากคุณต้องการข้อมูลจำนวนมากอย่างรวดเร็ว แต่คุณต้องไปพร้อม ๆ กัน เราคิดว่า Slack เป็น "เครื่องทำน้ำเย็นเสมือนจริง" ของเราและใช้ Basecamp เพื่อจัดการโครงการออกแบบที่ซับซ้อน เมื่อเราออกแบบต้นแบบโดยใช้ HTML และ CSS เราจะใช้ GitHub Issues เพื่อพูดคุยเกี่ยวกับโค้ดโดยตรง

การวิจัย

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

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

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

การออกแบบและการสร้างต้นแบบ

ในฐานะนักออกแบบคุณมักจะใช้เวลาส่วนใหญ่ในการออกแบบและสร้างต้นแบบ โครงการออกแบบ UI สามารถก้าวไปข้างหน้าได้หลายวิธีตั้งแต่การร่างภาพการออกแบบโดยละเอียดไปจนถึงการเขียนโค้ด

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

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

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

ดังที่กล่าวไว้การสนใจเครื่องมือที่ดีต่อสุขภาพเป็นสิ่งที่ดี ฉันชอบลองใช้เครื่องมือใหม่ ๆ ที่สามารถช่วยให้ฉันทำงานได้มากขึ้น เครื่องมือแก้ไขเวกเตอร์ที่ฉันชอบคือ Illustrator แต่งานออกแบบภาพส่วนใหญ่ของฉันทำใน Sketch ในทุกวันนี้ สมาชิกในทีมคนอื่น ๆ ได้เปลี่ยนไปใช้เครื่องมือที่ใหม่กว่าเช่น Affinity Designer

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

การสื่อสารของนักพัฒนา

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

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

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

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

เว็บเทียบกับแอปเนทีฟ

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

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

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

ที่ บริษัท ของเราเราชอบใช้ Bootstrap มีขนาดเริ่มต้นที่เหมาะสมสำหรับองค์ประกอบ UI ทั่วไปเช่นปุ่มตารางข้อมูลและโมดอล

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

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

ข้อ จำกัด ของเว็บ

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

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

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

ปรับปรุงชุดทักษะของคุณ

ดังนั้นคุณจะติดตามข่าวสารล่าสุดเกี่ยวกับอุตสาหกรรมเว็บที่มีการเคลื่อนไหวอย่างรวดเร็วและพัฒนาชุดทักษะของคุณได้อย่างไร? มาดูวิธีการต่างๆในการเพิ่มพูนทักษะของคุณ ...

ความรู้เกี่ยวกับแพลตฟอร์ม

คลังแสงของนักออกแบบส่วนสำคัญคือความรู้เกี่ยวกับแพลตฟอร์ม คุณควรทราบเกี่ยวกับระบบปฏิบัติการต่างๆและวิธีการใช้งานของผู้คน ในฐานะนักออกแบบเรามักจะใช้ Mac แต่ก็ง่ายที่จะลืมว่าผู้คนส่วนใหญ่ใช้กล่อง Windows เพื่อทำงานให้สำเร็จลุล่วง

ฉันรู้สึกว่าคุณสามารถเข้าใจบางสิ่งได้อย่างแท้จริงถ้าคุณใช้มันด้วยตัวเอง ฉันชอบใช้ Mac ในการออกแบบ แต่ใช้เวลาส่วนใหญ่ในการติดตามวิวัฒนาการของแพลตฟอร์มอื่น ๆ ฉันมี Windows หลายสำเนาติดตั้งบน Mac เป็นเครื่องเสมือน ฉันยุ่งอยู่กับการทดสอบบิวด์ใหม่ของ Windows 10 โดยใช้โปรแกรม Insider ของ Microsoft เพื่อตรวจสอบการเปลี่ยนแปลงต่างๆใน UI

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

นอกจากนี้เว็บยังสามารถมองเห็นได้ว่าเป็นระบบปฏิบัติการของตัวเอง มีการพัฒนาอย่างต่อเนื่องโดยมีการเพิ่มคุณลักษณะใหม่ ๆ ให้กับผู้จำหน่ายเบราว์เซอร์ทุกรายในแต่ละสัปดาห์ การทราบข้อมูลทางเทคนิคของเบราว์เซอร์นั้นคุ้มค่าอย่างยิ่งโดยเฉพาะอย่างยิ่งเกี่ยวกับความสามารถของ CSS และกราฟิก คุณต้องรู้ว่า SVG และ WebGL คืออะไรและคุณจะใช้ Web Animations API ได้อย่างไร

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

กลับไปที่ข้อมูลพื้นฐาน

สิ่งที่เราดิ้นรนในวันนี้ไม่ต่างจากสิ่งที่เราดิ้นรนเมื่อ 20 ปีก่อน มีคำแนะนำดีๆมากมายในหนังสือ ลองใช้ Defensive Design สำหรับเว็บโดย Jason Fried และ Matthew Linderman และ Don’t Make Me Think by Steve Krug เป็นตัวเริ่มต้น

หากคุณไม่ทราบเกี่ยวกับแนวคิดเช่นกิริยาและความประหยัดคุณจำเป็นต้องอ่าน คุณควรจะสามารถอธิบายได้ว่ากฎหมายของ Fitts คืออะไร กฎของ Gestalt แห่งความใกล้ชิด? นี่คือขนมปังและเนยของการออกแบบ UI

รับแรงบันดาลใจจากเกมและภาพยนตร์

ในฐานะนักออกแบบ UI ฉันใช้แหล่งที่มาของแรงบันดาลใจอื่น ๆ ในการทำงานของฉัน ฉันพบแรงบันดาลใจมากมายในเกม เกมบางเกมมีความซับซ้อนมากและนักออกแบบ UI ต้องแก้ปัญหาอินเทอร์เฟซที่ซับซ้อนเช่นเดียวกับนักออกแบบ UI ที่ทำงานในโครงการทางธุรกิจ

เกมยังสามารถบ่งบอกถึงแนวโน้ม ความเรียบง่ายที่พบในเมนูของ Colin McRae Rally ทำให้ฉันนึกถึงทิศทางของ iOS7 ในทางหนึ่งการออกแบบแอนิเมชั่น UI ที่กำลังอินเทรนด์กำลังปรากฏในเกมเมื่อหลายปีก่อน การเปลี่ยนจากความคลางแคลงไปสู่อินเทอร์เฟซที่ใช้งานได้และ "การออกแบบที่แบนราบ" ก็ปรากฏให้เห็นในเกมเช่นกัน เปรียบเทียบการลืมเลือนปี 2006 กับ Skyrim ปี 2011 ทั้งสองเกมเป็นเกม RPG ในซีรีส์เดียวกัน แต่ความแตกต่างที่โดดเด่น

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

คุณเติบโตในฐานะนักออกแบบจากการทำงานหนักความพากเพียรพูดคุยกับเพื่อนและอ่านสิ่งที่น่ากลัวมากมาย ประมาณหนึ่งปีที่แล้วฉันได้อ่านบทความใน New York Times เกี่ยวกับผู้คนในยุค 80 ของพวกเขาที่ยังคงฝึกฝนฝีมือของพวกเขา ฉันรู้สึกเหมือนเพิ่งเริ่มต้น แล้วคุณล่ะ?