25 ตัวอย่างดีไซน์ Material ที่คุณจะหลงรัก
เผยแพร่แล้ว: 2018-07-10การออกแบบวัสดุเป็นภาษาภาพที่สังเคราะห์หลักการพื้นฐานของการออกแบบที่ดีและผสมผสานเข้ากับนวัตกรรมของวิทยาศาสตร์และเทคโนโลยีสมัยใหม่
ต่อไปนี้คือตัวอย่างการออกแบบ Material ที่เราชื่นชอบ แต่ละรายการเป็นไปตามแนวโน้มและหลักการออกแบบ Material และมีสิ่งพิเศษที่จะสอนคุณ
หากคุณเป็นแฟนตัวยงของความสะอาดของส่วนต่อประสานผู้ใช้ดีไซน์ Material คุณจะชอบรายการนี้ เรารวบรวมแนวคิดสำหรับทั้งแอปและเว็บไซต์ไว้ที่นี่ด้วยจานสี โครงสร้าง และเลย์เอาต์ที่แตกต่างกัน สนุก!
ต้องการมากขึ้น? ลองดูแหล่งข้อมูลการออกแบบ Material เครื่องมือสีสำหรับการออกแบบ Material และพื้นหลังการออกแบบ Material ฟรี
CryptoAim Dashboard
CryptoAim เป็นโครงการออกแบบ Material ที่ยอดเยี่ยมสำหรับแอปที่ช่วยให้คุณสามารถตรวจสอบแนวโน้มการค้นหาของ cryptocurrencies ต่างๆ มีส่วนต่อประสานผู้ใช้ที่มืดพร้อมรายละเอียดที่ทันสมัยและสะอาดตา
ตัวแทน
นี่คือเว็บไซต์จำลองตามเทรนด์การออกแบบ Material ประสบความสำเร็จในการรวมสีนีออนที่สดใสเข้าด้วยกันในรูปแบบใหม่ ใครจะคิดว่าสีเหลือง สีฟ้า และสีม่วงเข้ากันได้ดีในจานสีเดียวกัน!
แนวคิดเมนูแนวตั้ง
ลองดูแนวคิดเมนูแนวตั้งที่เป็นไปตามเทรนด์การออกแบบ Material เมื่ออยู่ใกล้กับขอบหน้าจอ เมนูง่ายๆ นี้จะจัดวางในแนวตั้งเพื่อให้รายการเมนูทั้งหมดมองเห็นได้อย่างสมบูรณ์
เครื่องมือกลยุทธ์เนื้อหา
นี่คือการออกแบบเครื่องมือกลยุทธ์เนื้อหา มีส่วนต่อประสานผู้ใช้ที่มีสีสันสดใสพร้อมองค์ประกอบที่เรียบง่ายและมีรายละเอียดอย่างรอบคอบ ประกอบด้วยตัวบ่งชี้ความคืบหน้าและกิจกรรมที่บ่งบอกถึงขั้นตอนที่ผู้ใช้ต้องดำเนินการเพื่อใช้แอป
ตัวรับ – มือถือ
นี่เป็นระบบที่ยอดเยี่ยมที่สร้างขึ้นสำหรับ บริษัท Tec Mobile จุดประสงค์คือเพื่อมอบประสบการณ์การจัดการงานอีเวนต์ที่สะอาด ทำให้ง่ายและรวดเร็ว ทั้งสำหรับผู้จัดงานและพนักงานที่ทำงานที่นั่น การออกแบบเป็นไปตามแนวโน้มของวัสดุและรวมถึง ระบบเว็บและแอปสำหรับผู้ดูแลระบบสำหรับแท็บเล็ตและโทรศัพท์มือถือ
แอพ CasualTrack
นี่คือการออกแบบแอปพลิเคชัน Android ชื่อ CasualTrack โครงสร้างนี้ประกอบด้วยแถบแอปถาวรที่ด้านบนและปุ่มการทำงานแบบลอยที่ด้านล่างขวาของไซต์
บรรณาธิการออนไลน์
นี่คือการออกแบบตัวแก้ไขออนไลน์ที่ดูดีซึ่งสร้างขึ้นด้วยความช่วยเหลือของหลักการออกแบบ Material ประกอบด้วยกล่องโต้ตอบที่แจ้งให้ผู้ใช้ทราบเกี่ยวกับงานเฉพาะ
Sens วิจารณ์
นี่คือแนวคิดการออกแบบใหม่สำหรับ Sens Critique ซึ่งเป็นแอปวัฒนธรรมฝรั่งเศสที่คุณสามารถใช้เพื่อค้นหา ให้คะแนน และแสดงความคิดเห็นเกี่ยวกับภาพยนตร์ ซีรีส์ เพลง หนังสือ และอื่นๆ ประกอบด้วยรายการกริด ซึ่งเป็นทางเลือกแทนมุมมองรายการมาตรฐาน ซึ่งช่วยปรับปรุงความเข้าใจในเนื้อหาที่นำเสนอ
Mobile SDK – การออกตั๋ว, แชท, บทความบน Android
ต่อไปนี้คือตัวอย่างหน้าจอบางส่วนสำหรับ Zendesk Mobile SDK บน Android ประกอบด้วยปุ่มการทำงานแบบลอยซึ่งแสดงถึงการดำเนินการหลักในแอป เป็นรูปวงกลม โดยมีไอคอนอยู่ตรงกลาง ลอยอยู่เหนือ UI ที่มุมล่างขวาของหน้าจอ
กำลังมาแรง – ความท้าทาย UI รายวัน 069
นี่คือการออกแบบแอพรูปภาพสต็อกที่แสดงรูปภาพที่กำลังเป็นที่นิยมอยู่ด้านบน นำเสนอประสบการณ์ที่รวมเป็นหนึ่งเดียวในทุกแพลตฟอร์มและอุปกรณ์ และรวมถึงกฎเกณฑ์ทางมือถือที่สำคัญบางประการ
การออกแบบ UI ของบล็อกโพสต์
แนวคิดการออกแบบวัสดุนี้มีประโยชน์สำหรับบล็อกโพสต์ มีการใช้ตัวอักษรอย่างดีเยี่ยม อย่างไรก็ตาม ขนาดของแบบอักษรควรเพิ่มขึ้นเล็กน้อย
วอลล์เปเปอร์ออกแบบวัสดุ
คุณเป็นแฟนตัวยงของดีไซน์ Material หรือไม่? ดาวน์โหลดวอลเปเปอร์ฟรีนี้และใช้สำหรับโทรศัพท์หรือหน้าจอเดสก์ท็อปของคุณ
แนวคิด UI ของแอปอีเลิร์นนิง
นี่เป็นแนวคิด UI ขนาดเล็กสำหรับแอปหลักสูตรอีเลิร์นนิงที่ใช้หลักการดีไซน์ Material 2.0 ตรวจสอบไอคอนที่สร้างขึ้นมาอย่างดี!
ปฏิทิน
นี่คือการออกแบบหน้าจอปฏิทินสำหรับแอปพลิเคชันที่ใช้สำหรับจัดการสิ่งสำคัญทั้งหมดของคุณ แอพนี้รวมปฏิทินในตัวที่ให้คุณดูกิจกรรมทั้งหมดของคุณ
แอพ SmartEnergy Ios
นี่คือการออกแบบสำหรับแอพ SmartEnergy IOS ที่ให้วิธีง่ายๆ ในการเชื่อมต่อกับเมนบอร์ดพลังงานในบ้านของคุณจากสมาร์ทโฟนของคุณ
แนวคิดการออกแบบใหม่ของ Google Play เพลง
นี่คือแนวคิดการออกแบบใหม่ของ Google Play เพลงที่เป็นไปตาม หลักการดีไซน์ Material 2.0 ทั้งหมด ตรวจสอบรายละเอียด
แอพวันแรก
นี่คือภาพการออกแบบ Material บางส่วนสำหรับการเริ่มต้นใช้งานแอป Firstdate iOS มันมีภาพประกอบที่น่ารักและโฟลว์ที่สะอาดตาและใช้งานง่าย
การออกแบบแอพพลิเคชั่น
สีในการออกแบบวัสดุได้รับแรงบันดาลใจจากสีที่เด่นชัดซึ่งวางไว้ในสภาพแวดล้อมที่เป็นกลาง นอกจากนี้ยังมีเงาที่ลึกและไฮไลท์ที่สว่าง ซึ่งเป็นคุณสมบัติอีกสองประการของการออกแบบด้านล่าง
แอพ Field Inspector
นี่คือแนวคิดแอพมือถือ Field Inspector ที่ใช้ สำหรับการตรวจสอบและตรวจสอบวัตถุ เป็น หน้าจอที่แสดงเมนูหลัก วัตถุบนแผนที่ และรายการพารามิเตอร์ที่ต้องตรวจสอบ
เข้าสู่ระบบ/ลงทะเบียน แอนิเมชั่น
จานสีนี้ทำจากสีหลักและสีเฉพาะที่ได้รับการออกแบบให้ทำงานร่วมกันอย่างกลมกลืน แนวคิดการออกแบบนี้ยังมีแอนิเมชั่นที่ลื่นไหลซึ่งควรค่าแก่การลองดู
จองโรงแรม – ความท้าทาย UI รายวัน 067
การออกแบบ Material ใช้แรงบันดาลใจจากองค์ประกอบการออกแบบที่เน้นการพิมพ์ เช่น การพิมพ์ สี และภาพ และปรับให้เข้ากับเว็บเพื่อสร้างลำดับชั้นและโฟกัส นี่คือสิ่งที่การออกแบบด้านล่างทำ ด้วยเส้นตารางพื้นฐานและแม่แบบโครงสร้าง นำเสนอโซลูชันที่สอดคล้องกันโดยทำซ้ำองค์ประกอบภาพและตารางโครงสร้าง
เค้าโครงเว็บไซต์ Natgeo
ในการออกแบบวัสดุ คุณสมบัติทางกายภาพของกระดาษ เช่น ความเรียบและความทึบ จะถูกแปลไปยังหน้าจอ นี่คือตัวอย่างของหลักการด้านล่างนี้
แอป Android GrandPad – ออกแบบใหม่
นี่คือการออกแบบใหม่ของแอพคู่หู Android ของ GrandPad การออกแบบแอพ iOS ใหม่นี้ใช้ประโยชน์จากความยืดหยุ่นของดีไซน์ Material และส่วนประกอบวัสดุ Extended FAB ใหม่
บริการ: กราฟฟิค
การออกแบบวัสดุสร้างภาษาภาพสำหรับผู้ใช้ที่สังเคราะห์หลักการพื้นฐานของการออกแบบที่ดีและทันสมัย นี่คือตัวอย่างกราฟิกไอคอนที่ทำอย่างนั้น
การออกแบบกระเป๋าสตางค์
ในการออกแบบ Material ที่ใช้กับแอพ เมนูมักจะปรากฏขึ้นเมื่อมีการโต้ตอบกับปุ่ม แล้วแสดงรายการตัวเลือก นี่คือตัวอย่างที่ดีของสิ่งนั้น!