15 กรอบการออกแบบวัสดุฟรีสำหรับนักพัฒนา 2021

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

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

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

เป็นรูปเป็นร่าง

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

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

วัสดุ Swift

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

กรอบงานวัสดุ

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

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

แก่นแท้

Essence ผสมผสานสองสิ่งเข้าด้วยกัน: Material Design & React.js — หากคุณกำลังมองหาประสิทธิภาพเว็บที่รวดเร็วพร้อมคุณสมบัติการออกแบบที่เหมาะสมที่สุด มันจะเป็นการยากที่จะจับคู่สิ่งที่ Essence นำเสนอสำหรับนักพัฒนาทั้งหมด ส่วนประกอบ UI ทั้งหมดที่การออกแบบวัสดุนำเสนอนั้นสร้างขึ้นใหม่ผ่าน React.js หากคุณตัดสินใจเลือกใช้ Essence! ผลลัพธ์สุดท้ายคือตัวเลือกองค์ประกอบอินเทอร์เฟซผู้ใช้ที่น่าทึ่งซึ่งจะสร้างประสบการณ์ผู้ใช้ที่ไม่เหมือนใคร Essence พร้อมใช้งานบน NPM เพื่อให้คุณสามารถติดตั้งและเริ่มต้นใช้งานด้วยคำสั่งการติดตั้งอย่างง่าย ส่วนประกอบจะต้องได้รับการติดตั้งและใช้งานแยกต่างหาก แต่ทุกอย่างจะอยู่ภายใต้โฟลเดอร์เดียวกันโดยไม่คำนึงถึง

ออนเซ็น UI

Onsen UI มีชื่อเสียงหลายไมล์ในการเป็นหนึ่งในเฟรมเวิร์กไฮบริดที่ดีที่สุดสำหรับการสร้างแอพมือถือโดยใช้ HTML5 แพลตฟอร์มโอเพ่นซอร์สนี้ไม่มีค่าใช้จ่ายใดๆ ทั้งสิ้น ความเข้าใจที่ทันสมัยเกี่ยวกับการออกแบบที่ดีได้ช่วยให้นักพัฒนา Onsen UI สามารถสร้างองค์ประกอบส่วนต่อประสานกับผู้ใช้ซึ่งจบลงด้วยการสร้างประสบการณ์ผู้ใช้ที่ไม่มีใครเทียบได้ ในฐานะที่เป็นเฟรมเวิร์กที่ไม่เชื่อเรื่องพระเจ้า คุณสามารถใช้ Onsen กับเฟรมเวิร์กอื่นๆ ที่มีอยู่จริงได้ และไม่ต้องกังวลกับการชนกันของโค้ดหรือปัญหาใดๆ นี่คือสิ่งที่เกิดขึ้นใน Onsen UI V2 ใหม่ — พวกมันรวมดีไซน์ Material, Angular 2 และ React เข้าด้วยกันเพื่อเพิ่มประสบการณ์ให้มากขึ้น ในขณะนี้ยังคงเป็นผู้สมัครรับเลือกตั้ง แต่มีคนใช้กันเป็นพันคนแล้ว หากคุณตั้งใจที่จะเปิดตัวผลิตภัณฑ์มือถือหรือเข้าสู่การพัฒนาซอฟต์แวร์มือถือ การเรียนรู้วิธีใช้ Onsen UI สามารถเพิ่มประโยชน์พิเศษบางอย่างให้กับประวัติย่อของคุณ

วัสดุ CSS

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

การออกแบบวัสดุ Lite

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

พื้นผิว

ดูเหมือนว่านักพัฒนาจำนวนมากใช้ความสามารถในการสร้างเฟรมเวิร์กด้วยตัวเอง Surface เป็นอีกหนึ่งเฟรมเวิร์กที่มีน้ำหนักเบา (ในกรณีนี้ น้ำหนักเบาจริงๆ) ซึ่งจบลงด้วยขนาดที่ใหญ่ประมาณ 6kb เมื่อลดขนาดลง นอกจากนี้ยังใช้ CSS ล้วนๆ ดังนั้นคุณจึงไม่ต้องเชื่อมต่อกับ JavaScript เลย เริ่มต้นด้วยการไปที่เอกสารประกอบของ Surface และเรียนรู้เกี่ยวกับวิธีการทำงานของกริด Surface เพื่อให้คุณได้รับส่วนประกอบทั้งหมดบนบอร์ดได้ง่ายขึ้น ส่วนประกอบต่างๆ เช่น แอนิเมชั่น การแจ้งเตือน ไทล์ องค์ประกอบที่ยุบได้ ส่วนท้าย โมดอล สื่อ ยูทิลิตี้ และคำแนะนำเครื่องมือ นักพัฒนาได้จัดระเบียบทุกอย่างไว้อย่างเรียบร้อยและตั้งค่าได้ง่ายกว่าการนับ 1 จาก 100 ย้อนหลัง

วัสดุ-UI

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

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

MUI

MUI เป็นเฟรมเวิร์ก CSS น้ำหนักเบาที่เติมสีสันให้กับการออกแบบของคุณด้วยดีไซน์ Material ของ Google มีรูปแบบการสาธิตประเภทต่างๆ แก่ผู้ใช้ ได้แก่ บล็อก หน้า Landing Page เมนูตัวเลื่อน และช่องการสมัครรับจดหมายข่าว HTML จากการสาธิตเหล่านี้เพียงอย่างเดียว นักพัฒนาสามารถเรียนรู้ว่าการออกแบบวัสดุมีประสิทธิภาพเพียงใด และการใช้งานนั้นง่ายเพียงใด MUI ยังใช้งานได้กับเฟรมเวิร์ก React.js และ Angular.js ดังนั้นคุณจึงสามารถเชื่อมต่อแอปของคุณกับเนื้อหาได้โดยไม่ยุ่งยาก นอกจากนี้ยังมีองค์ประกอบเว็บที่แตกต่างกันซึ่งพร้อมใช้งานทั้งหมด

วัสดุเชิงมุม

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

การออกแบบวัสดุสำหรับ Bootstrap

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

LumX

LumX เป็นเฟรมเวิร์กส่วนหน้าแบบตอบสนองแรกตามข้อกำหนด AngularJS และการออกแบบวัสดุของ Google มันมี CSS Framework เต็มรูปแบบที่สร้างด้วย Sass และส่วนประกอบ AngularJS จำนวนมาก ในการใช้ LumX คุณจะต้องรู้วิธีใช้ Bower ในการติดตั้งไลบรารี หากคุณไม่คุ้นเคยกับ Bower อีกทางเลือกหนึ่งของคุณคือดาวน์โหลดการพึ่งพาทั้งหมดทีละรายการ ซึ่งรวมถึงไอคอน Angular, jQuery, Velocity, Moment, Bourbon และ Material LumX ยังใช้ Flexbox เพื่อสร้างระบบกริดที่ได้มาตรฐานและตอบสนองได้โดยใช้คุณสมบัติ Flexbox LumX Components ครอบคลุมทุกพื้นที่และเป็นส่วนหนึ่งของการออกแบบเลย์เอาต์เว็บไซต์แบบดั้งเดิม

วัสดุไอออนิก

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

โพนอน

Phonon Framework เป็นโซลูชันที่กระชับสำหรับการสร้างแอปมือถือ HTML5 โดยใช้เทคโนโลยีเฟรมเวิร์กแบบไฮบริด จุดแข็งของ Phono คือสัญชาตญาณที่ดีในการปรับขนาดแอปของคุณอย่างรวดเร็วในที่ที่คุณต้องการ นอกจากนี้ยังเป็นไลบรารีส่วนต่อประสานผู้ใช้ที่ให้เครื่องมือด่วนสำหรับการสร้างอินเทอร์เฟซได้ทันที Phonon มีขนาดประมาณ 24kb เมื่อย่อและปรับให้เหมาะสมอย่างเต็มที่ นี่เป็นหนึ่งในเหตุผลหลักที่นักพัฒนามือถือใช้ Phonon นั่นต่ำกว่าที่คุณเห็นในเฟรมเวิร์กอย่าง Ionic หรือ Onsen!