10 ตัวอย่างโค้ดการออกแบบวัสดุที่มีประโยชน์

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

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

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

ตารางตอบสนอง

นี่คือตัวอย่างดีไซน์ Material ที่มีเอกลักษณ์เฉพาะตัว ตารางที่ตอบสนองซึ่งสร้างโดย Sergey Kupletsky จริง ๆ แล้วโฮสต์ ลิงก์อื่น ๆ ไปยังตัวอย่างการออกแบบวัสดุ สวยเย็น!

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

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

การเปลี่ยน UI ของการ์ด

นักพัฒนา Ivan Villamil ได้สร้างการออกแบบ UI ของการ์ดที่มีเอกลักษณ์เฉพาะตัวนี้ด้วยแอนิเมชั่นสุดเพี้ยน

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

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

เข้าสู่ระบบขนาดกะทัดรัด

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

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

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

เติมแอนิเมชั่น

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

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

ปุ่มวัสดุ BS4

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

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

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

การออกแบบวัสดุ เลือกเมนู

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

การเลือกการออกแบบวัสดุนี้ช่วยยกระดับเมนูการเลือก HTML ทั่วไปให้อยู่ในระดับใหม่ทั้งหมด

ไม่ใช้ลักษณะเอกสารทั่วไปในการเลือกตัวเลือก แต่จะใช้รายการที่ไม่เรียงลำดับกับ jQuery ที่จัดการแอนิเมชั่นและกระบวนการคัดเลือก และฉันต้องบอกว่าสิ่งนี้ตอกย้ำรูปแบบวัสดุ

วัสดุเงา

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

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

เอฟเฟกต์สุดเจ๋งและบางสิ่งที่คุณอาจคัดลอกในโครงการของคุณเอง

UI ของการ์ดสภาพอากาศ

นักพัฒนา Thomas Vallez ได้สร้างการ์ดสภาพอากาศที่ยอดเยี่ยมนี้ซึ่งทำงานบน HTML และ CSS ล้วนๆ ใช้เอฟเฟกต์เฟดอินที่เรียบง่ายในการโหลดเพจ แต่ความงามที่แท้จริงที่นี่คือสไตล์การออกแบบวัสดุ

ทุกอย่างตั้งแต่สีไปจนถึงแบบอักษรและแม้แต่ไอคอนสภาพอากาศ ล้วนแล้วแต่ใช้สไตล์วัสดุที่เป็นธรรมชาติ

คุณสามารถใช้เทมเพลตนี้และใช้กับเลย์เอาต์การ์ดประเภทใดก็ได้ เป็นปรากฎการณ์และแน่นอนว่าเป็นหนึ่งในโครงการที่ตรงไปตรงมากว่าในรายการนี้

แท็บวัสดุ

นี่คือโครงการที่น่าสนใจที่สร้างจากแนวคิดของแท็บการออกแบบวัสดุ Michael Richins สร้างปากกานี้ด้วย JavaScript พื้นฐานและความรู้บางประการเกี่ยวกับหลักเกณฑ์การออกแบบของ Google

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

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

แอนิเมชั่นตอบสนองการคลิก

นักพัฒนาซอฟต์แวร์ Emmanuel Pilande ได้สร้างเอฟเฟกต์การตอบสนองที่ยอดเยี่ยมนี้โดยเป็นวิธีง่ายๆ ในการทำซ้ำไมโครอินเทอร์แอกชันของวัสดุของ Google

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

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