25 ตัวอย่างดีไซน์ Material ที่คุณจะหลงรัก

เผยแพร่แล้ว: 2018-07-10

การออกแบบวัสดุเป็นภาษาภาพที่สังเคราะห์หลักการพื้นฐานของการออกแบบที่ดีและผสมผสานเข้ากับนวัตกรรมของวิทยาศาสตร์และเทคโนโลยีสมัยใหม่

สารบัญ ซ่อน
CryptoAim Dashboard
เข็มหมุด
ตัวแทน
เข็มหมุด
แนวคิดเมนูแนวตั้ง
เข็มหมุด
เครื่องมือกลยุทธ์เนื้อหา
เข็มหมุด
ตัวรับ – มือถือ
เข็มหมุด
แอพ CasualTrack
เข็มหมุด
บรรณาธิการออนไลน์
Sens วิจารณ์
เข็มหมุด
Mobile SDK – การออกตั๋ว, แชท, บทความบน Android
เข็มหมุด
กำลังมาแรง – ความท้าทาย UI รายวัน 069
เข็มหมุด
การออกแบบ UI ของบล็อกโพสต์
เข็มหมุด
วอลล์เปเปอร์ออกแบบวัสดุ
เข็มหมุด
แนวคิด UI ของแอปอีเลิร์นนิง
เข็มหมุด
ปฏิทิน
เข็มหมุด
แอพ SmartEnergy Ios
เข็มหมุด
แนวคิดการออกแบบใหม่ของ Google Play เพลง
เข็มหมุด
แอพวันแรก
เข็มหมุด
การออกแบบแอพพลิเคชั่น
เข็มหมุด
แอพ Field Inspector
เข็มหมุด
เข้าสู่ระบบ/ลงทะเบียน แอนิเมชั่น
เข็มหมุด
จองโรงแรม – ความท้าทาย UI รายวัน 067
เข็มหมุด
เค้าโครงเว็บไซต์ Natgeo
เข็มหมุด
แอป Android GrandPad – ออกแบบใหม่
เข็มหมุด
บริการ: กราฟฟิค
เข็มหมุด
การออกแบบกระเป๋าสตางค์

ต่อไปนี้คือตัวอย่างการออกแบบ Material ที่เราชื่นชอบ แต่ละรายการเป็นไปตามแนวโน้มและหลักการออกแบบ Material และมีสิ่งพิเศษที่จะสอนคุณ

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

ต้องการมากขึ้น? ลองดูแหล่งข้อมูลการออกแบบ Material เครื่องมือสีสำหรับการออกแบบ Material และพื้นหลังการออกแบบ Material ฟรี

CryptoAim Dashboard

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

1 ตัวอย่างการออกแบบวัสดุแดชบอร์ด CryptoAim เข็มหมุด

ตัวแทน

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

2 ตัวอย่างการออกแบบวัสดุของหน่วยงาน เข็มหมุด

แนวคิดเมนูแนวตั้ง

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

3 การออกแบบวัสดุแนวคิดเมนูแนวตั้ง เข็มหมุด

เครื่องมือกลยุทธ์เนื้อหา

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

4 เครื่องมือกลยุทธ์เนื้อหา ตัวอย่างการออกแบบวัสดุ เข็มหมุด

ตัวรับ – มือถือ

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

5 Receptiva - ตัวอย่างการออกแบบวัสดุมือถือ เข็มหมุด

แอพ CasualTrack

นี่คือการออกแบบแอปพลิเคชัน Android ชื่อ CasualTrack โครงสร้างนี้ประกอบด้วยแถบแอปถาวรที่ด้านบนและปุ่มการทำงานแบบลอยที่ด้านล่างขวาของไซต์

6 ตัวอย่างการออกแบบวัสดุแอป CasualTrack เข็มหมุด

บรรณาธิการออนไลน์

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

Sens วิจารณ์

นี่คือแนวคิดการออกแบบใหม่สำหรับ Sens Critique ซึ่งเป็นแอปวัฒนธรรมฝรั่งเศสที่คุณสามารถใช้เพื่อค้นหา ให้คะแนน และแสดงความคิดเห็นเกี่ยวกับภาพยนตร์ ซีรีส์ เพลง หนังสือ และอื่นๆ ประกอบด้วยรายการกริด ซึ่งเป็นทางเลือกแทนมุมมองรายการมาตรฐาน ซึ่งช่วยปรับปรุงความเข้าใจในเนื้อหาที่นำเสนอ

ตัวอย่างการออกแบบวัสดุวิจารณ์ 8 Sens เข็มหมุด

Mobile SDK – การออกตั๋ว, แชท, บทความบน Android

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

9 Mobile SDK – Ticketing, Chat, Articles on Android Material Design Example เข็มหมุด

กำลังมาแรง – ความท้าทาย UI รายวัน 069

นี่คือการออกแบบแอพรูปภาพสต็อกที่แสดงรูปภาพที่กำลังเป็นที่นิยมอยู่ด้านบน นำเสนอประสบการณ์ที่รวมเป็นหนึ่งเดียวในทุกแพลตฟอร์มและอุปกรณ์ และรวมถึงกฎเกณฑ์ทางมือถือที่สำคัญบางประการ

10 เทรนด์ - ความท้าทาย UI รายวัน ตัวอย่างการออกแบบวัสดุ เข็มหมุด

การออกแบบ UI ของบล็อกโพสต์

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

11 บล็อกโพสต์ การออกแบบ UI ตัวอย่างการออกแบบวัสดุ เข็มหมุด

วอลล์เปเปอร์ออกแบบวัสดุ

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

12 วอลล์เปเปอร์ออกแบบวัสดุ เข็มหมุด

แนวคิด UI ของแอปอีเลิร์นนิง

นี่เป็นแนวคิด UI ขนาดเล็กสำหรับแอปหลักสูตรอีเลิร์นนิงที่ใช้หลักการดีไซน์ Material 2.0 ตรวจสอบไอคอนที่สร้างขึ้นมาอย่างดี!

13 แนวคิด UI ของแอปอีเลิร์นนิง ตัวอย่างการออกแบบวัสดุ เข็มหมุด

ปฏิทิน

นี่คือการออกแบบหน้าจอปฏิทินสำหรับแอปพลิเคชันที่ใช้สำหรับจัดการสิ่งสำคัญทั้งหมดของคุณ แอพนี้รวมปฏิทินในตัวที่ให้คุณดูกิจกรรมทั้งหมดของคุณ

14 ปฏิทิน เข็มหมุด

แอพ SmartEnergy Ios

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

15 ตัวอย่างการออกแบบวัสดุแอป SmartEnergy Ios เข็มหมุด

แนวคิดการออกแบบใหม่ของ Google Play เพลง

นี่คือแนวคิดการออกแบบใหม่ของ Google Play เพลงที่เป็นไปตาม หลักการดีไซน์ Material 2.0 ทั้งหมด ตรวจสอบรายละเอียด

16 แนวคิดการออกแบบใหม่ของ Google play music เข็มหมุด

แอพวันแรก

นี่คือภาพการออกแบบ Material บางส่วนสำหรับการเริ่มต้นใช้งานแอป Firstdate iOS มันมีภาพประกอบที่น่ารักและโฟลว์ที่สะอาดตาและใช้งานง่าย

17 ตัวอย่างการออกแบบวัสดุแอป Firstdate เข็มหมุด

การออกแบบแอพพลิเคชั่น

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

18 การออกแบบแอพพลิเคชั่น เข็มหมุด

แอพ Field Inspector

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

19 ตัวอย่างการออกแบบวัสดุแอปสารวัตรแอป เข็มหมุด

เข้าสู่ระบบ/ลงทะเบียน แอนิเมชั่น

จานสีนี้ทำจากสีหลักและสีเฉพาะที่ได้รับการออกแบบให้ทำงานร่วมกันอย่างกลมกลืน แนวคิดการออกแบบนี้ยังมีแอนิเมชั่นที่ลื่นไหลซึ่งควรค่าแก่การลองดู

20 เข้าสู่ระบบ:ลงทะเบียนตัวอย่างการออกแบบวัสดุแอนิเมชั่น เข็มหมุด

จองโรงแรม – ความท้าทาย UI รายวัน 067

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

21 การจองโรงแรม - ความท้าทาย UI รายวัน ตัวอย่างการออกแบบวัสดุ เข็มหมุด

เค้าโครงเว็บไซต์ Natgeo

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

22 Natgeo เค้าโครงเว็บไซต์ ตัวอย่างการออกแบบวัสดุ เข็มหมุด

แอป Android GrandPad – ออกแบบใหม่

นี่คือการออกแบบใหม่ของแอพคู่หู Android ของ GrandPad การออกแบบแอพ iOS ใหม่นี้ใช้ประโยชน์จากความยืดหยุ่นของดีไซน์ Material และส่วนประกอบวัสดุ Extended FAB ใหม่

23 GrandPad Android App - ออกแบบใหม่ เข็มหมุด

บริการ: กราฟฟิค

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

24 บริการ- ตัวอย่างการออกแบบวัสดุกราฟิก เข็มหมุด

การออกแบบกระเป๋าสตางค์

ในการออกแบบ Material ที่ใช้กับแอพ เมนูมักจะปรากฏขึ้นเมื่อมีการโต้ตอบกับปุ่ม แล้วแสดงรายการตัวเลือก นี่คือตัวอย่างที่ดีของสิ่งนั้น!

25 ตัวอย่างการออกแบบวัสดุการออกแบบกระเป๋าเงิน เข็มหมุด