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

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

ภาพตัดปะของโมดูล

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

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

นี่คือส่วนหนึ่งของภาพตัดปะโมดูลล่าสุดของฉันตัวอย่างของปุ่มที่ฉันออกแบบ ร่าง เมื่อเริ่มโครงการ:

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

.net core web api

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

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

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

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

  
  
  

• แทนที่จะใช้เวลาหลายชั่วโมงในการออกแบบการจำลองแบบคงที่หลาย ๆ แบบสำหรับความละเอียดหลาย ๆ แบบฉันสามารถประหยัดเวลาได้มากโดยการเข้าสู่โค้ดตั้งแต่เนิ่นๆ ปรับแต่ง CSS ช่วยให้ฉันสามารถแสดงให้เห็นถึงการเปลี่ยนแปลงและการตอบสนองต่อลูกค้าได้อย่างรวดเร็วบนอุปกรณ์ต่างๆ - สมาร์ทโฟนแท็บเล็ต ฯลฯ

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

การสร้างโมดูลสำหรับการพัฒนาส่วนหน้า

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

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

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

.submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; } A link

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

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

• รหัสที่ยุ่งเหยิงไม่สอดคล้องกันยากต่อการสแกนและทำความเข้าใจ
• รหัสป่องและไฟล์ XXL CSS ที่มีการทำสำเนาจำนวนมาก
• รหัสที่ยากต่อการบำรุงรักษา
• การขาดการแยกโครงสร้างและผิวหนัง

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

วิธีหนึ่งในการหลีกเลี่ยงหรือลดปัญหาเหล่านั้นคือการสร้างแบบแยกส่วน

ปุ่มโมดูลาร์

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

.button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; } A link

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

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

แล้วสิ่งที่ซับซ้อนมากขึ้นล่ะ?

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

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

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

เกี่ยวข้องกับลูกค้า

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

ขวด (เฟรมเวิร์กเว็บ)

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

ใช้โมดูลที่คุณสร้างขึ้นเพื่อเป็นส่วนประกอบสำหรับเพจ สำหรับหน้าดัชนีของคุณคุณอาจวางโมดูลการนำทางไว้ด้านบนโมดูลฮีโร่ถัดไปโมดูลเนื้อหาบางส่วนถัดไปจากนั้นส่วนท้ายของคุณที่ด้านล่าง ก่อนที่คุณจะรู้คุณมีเพจสำหรับต้นแบบ HTML อยู่แล้ว แต่ต้นแบบคืออะไรกันแน่? ฉันชอบคำจำกัดความของต้นแบบของ Leah Buley มาโดยตลอดจากหนังสือที่ยอดเยี่ยมของเธอ The ประสบการณ์ของผู้ใช้ ทีมเดียว:

ตัวอย่างการทำงานหรือกึ่งการทำงานของการออกแบบควรทำงานและดำเนินการเมื่อนำไปใช้แล้ว

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

ใช้ Building Blocks ซ้ำ

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

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

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