เชื่อมช่องว่างระหว่างนักออกแบบและนักพัฒนา

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

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

ลองดูภาวะที่กลืนไม่เข้าคายไม่ออกทั่วไป:

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

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

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

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

อัญมณีที่ซ่อนอยู่ในความโกลาหลทั้งหมด

ฉันเพิ่งมีโอกาสได้ทบทวนเครื่องมือที่ไม่ได้ใช้มาสักระยะแล้ว ซึ่งเป็นเครื่องมือที่มุ่งเชื่อมช่องว่างนี้และลดค่าใช้จ่ายทั้งหมด: UXPin คุณลักษณะใหม่ที่เรียกว่า "ผสาน" ได้รับการเปิดตัวเพื่อช่วยฝ่าฟันช่องว่างของการออกแบบและการพัฒนา ทั้งหมดนี้ในขณะเดียวกันก็ปรับปรุงความคล่องตัวและคุณภาพที่ทีมของเราคาดหวัง เทคโนโลยีใหม่นี้อาจทำให้บางคน คิดใหม่ว่าทีมออกแบบและวิศวกรรมทั้งหมดทำงานร่วมกัน และทำงานอย่างไรผ่านกรณีการใช้งานและส่วนประกอบในการสร้าง

ออกไปด้วยกระบวนการเก่า

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

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

เกือบลืมไปเลยว่าเรายังต้องเผยแพร่การอัปเดตไปยังไลบรารีการพัฒนา! หวังว่าพวกเขาจะเสร็จก่อนที่ทีมผลิตภัณฑ์จะดำเนินการตามกำหนดเวลา

ด้วยกระบวนการใหม่

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

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

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

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

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

แต่พอเกี่ยวกับกระบวนการ มาดูกันว่า UXPin Merge ทำงานอย่างไร

การจัดการห้องสมุด

ส่วนที่ดีที่สุดคือสามารถนำเข้าไลบรารีได้โดยตรงจากที่เก็บโค้ดของคุณ เช่น GitHub, Bitbucket, GitLab (ใช้งานได้กับส่วนประกอบ React เท่านั้น) หรือแม้แต่จาก Storybook เมื่อสร้างห้องสมุดแล้ว คุณจะมีตัวเลือกในการตั้งชื่อห้องสมุด

เมื่อนำเข้าด้วย Storybook กระบวนการค่อนข้างตรงไปตรงมา เพียงคว้า URL ของไลบรารีแล้ว UXPin จะจัดการส่วนที่เหลือให้คุณ ด้วยส่วนประกอบ React โดยใช้ CLI คุณสามารถ ควบคุมส่วนประกอบ ที่เผยแพร่โดยการระบุโทเค็นเฉพาะของไลบรารี UXPin

การควบคุมเวอร์ชันและการทดสอบ

หนึ่งในข้อกังวลที่ใหญ่ที่สุดในหมู่นักออกแบบและทีมออกแบบคือการควบคุมเวอร์ชัน ข้อกังวลส่วนใหญ่สามารถแก้ไขได้ด้วยคุณสมบัติการผสานของ UXPin นี้ มาวาดภาพอย่างรวดเร็ว:

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

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

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

การอัปเดตการทดสอบ

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

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

การออกแบบด้วยโค้ด

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

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

ปุ่มไอคอนด้านล่างช่วยให้โต้ตอบได้ ซึ่งช่วยให้เราปรับแต่งและควบคุมองค์ประกอบที่ควรโต้ตอบด้วยได้อย่างแท้จริง และองค์ประกอบใดไม่ควร ทั้งจากมุมมองมาตรฐานและการเข้าถึงได้

ด้วยข้อจำกัดประเภทนี้ ทำให้ทีม Design Systems ได้ง่ายขึ้นว่าต้องใช้ส่วนประกอบในลักษณะที่เหมาะสม และหากมีการโอเวอร์ไรด์ จะเห็นได้ชัดเจนจากแผงเลเยอร์ว่ามีบางอย่างได้รับการกำหนดเอง

แฮนด์ออฟ

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

การช่วยสำหรับการเข้าถึง

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

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

เลย์เอาต์ เทมเพลต และกริด

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

แม่แบบทั่วไป (เช่น หน้าจอเข้าสู่ระบบ หน้ากรอกแบบฟอร์ม หน้าโปรไฟล์ และอื่นๆ) สามารถใช้เป็นส่วนประกอบแบบลากแล้ววางได้เช่นกัน พูดคุยเกี่ยวกับการเร่งกระบวนการและ ลดความผิดพลาดของมนุษย์ในการออกแบบ !

ในการปิด

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