ในการประชุม Google I / O ในปี 2014 Google ได้ประกาศ Material Design ซึ่งเป็นภาษาการออกแบบใหม่ของพวกเขา พวกเขาได้แปลงแอปพลิเคชันยอดนิยมจำนวนมากให้เป็นไปตามข้อกำหนดใหม่นี้เพื่อมอบประสบการณ์ที่สอดคล้องกัน ตอนนี้พวกเขาพยายามโน้มน้าวให้คุณทำตามเช่นกัน

ดีไซน์ Material คืออะไร?

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

เป้าหมาย

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

หลักการ

การออกแบบวัสดุ ตั้งอยู่บนหลักการสามประการ

วัสดุเป็นอุปมา

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

เป็นตัวหนา, กราฟฟิค, เจตนา

การเลือกสีโดยละเอียดภาพจากขอบจรดขอบตัวอักษรขนาดใหญ่และพื้นที่สีขาวโดยเจตนาสร้างอินเทอร์เฟซที่เป็นตัวหนาและกราฟิกที่ทำให้ผู้ใช้สัมผัสได้ถึงประสบการณ์ Floating Action Button หรือ FAB เป็นตัวอย่างที่สำคัญของหลักการนี้ คุณสังเกตเห็นวงกลมเล็ก ๆ ที่มีสัญลักษณ์ 'บวก' ลอยอยู่รอบ ๆ ในแอป Google Inbox ของคุณหรือไม่ ดีไซน์ Material ทำให้เห็นได้ชัดว่านี่คือปุ่มสำคัญ

การเคลื่อนไหวให้ความหมาย

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

AngularJS เหมาะกับดีไซน์ Material อย่างไร

AngularJS ซึ่งเป็น“ Superheroic JavaScript MVW Framework” ของ Google กล่าวถึงความท้าทายมากมายที่พบในการพัฒนาแอปพลิเคชันหน้าเดียว (SPA) มีกรอบงานที่จำเป็นสำหรับการสร้างเว็บแอปพลิเคชันสมัยใหม่ที่เชื่อมต่อกับ API และไม่จำเป็นต้องรีเฟรชหน้า

ตัวอย่างการรวมสปริงทีละขั้นตอน

AngularJS: แนวทางใหม่

Angular คือสิ่งที่ HTML จะเป็นหากได้รับการออกแบบมาสำหรับแอปพลิเคชัน HTML เป็นภาษาประกาศที่ยอดเยี่ยมสำหรับเอกสารแบบคงที่ แต่การสร้างแอปพลิเคชันแบบไดนามิกมีไม่มากนัก

การสร้างแอปพลิเคชันแบบไดนามิกด้วย HTML เป็นแบบฝึกหัดในการหลอกล่อเบราว์เซอร์ให้ทำในสิ่งที่ไม่ควรทำ มีสองวิธีในการดำเนินการนี้

1. ไลบรารี - ชุดของฟังก์ชัน (jQuery)
2. กรอบงาน - โค้ดจะเติมในองค์ประกอบแบบคงที่เมื่อจำเป็น (Durandal, Ember)

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

จะไม่เป็นระเบียบถ้า Google สร้างชุดคำสั่งตามหลักการออกแบบวัสดุ

ขอแนะนำ Angular Material

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

เริ่มต้นใช้งาน

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

ลองดูการสาธิต ที่นี่ หรือแยก รหัสบน GitHub .

คำสั่ง

คำสั่งเป็นคุณลักษณะเชิงมุมหลัก Angular มาพร้อมกับคำสั่งต่างๆที่คุณใช้ตลอดเวลาเช่น ng-model หรือ ng-repeat พวกเขาเป็นชิ้นส่วนที่สำคัญมากของ Angular ที่ทำให้เฟรมเวิร์กทำงานได้ตามที่ควร

วิธีใช้คำสั่งวัสดุเชิงมุม

Angular Material ขยายไลบรารีคำสั่งนี้ด้วยชุดคำสั่งที่ได้รับแรงบันดาลใจจากดีไซน์ Material ที่สวยงาม คำสั่ง Angular Material คือแท็ก HTML ที่ขึ้นต้นด้วย 'md' ย่อมาจาก Material Design ไม่สามารถใช้งานได้ง่ายกว่ามากนัก ตัวอย่างเช่นลองดูปุ่มเก่า ๆ

ปุ่ม HTML มาตรฐานอาจมีลักษณะดังนี้

Click Me

ปุ่ม Angular Material จะเป็นแบบนี้

Click Me

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

Click Me

บริการ

บริการยังเป็นหัวใจสำคัญของฟังก์ชัน Angular ใช้เพื่อแชร์รหัสผ่านแอปพลิเคชัน มีการใช้บริการหลักทั่วไปเช่น $ http และใช้ซ้ำสำหรับการโทรข้อมูลในแอปพลิเคชัน Angular

บริการเชิงมุม ได้แก่ :

1. การสร้างอินสแตนซ์แบบเกียจคร้าน - Angular จะสร้างอินสแตนซ์ของบริการเมื่อส่วนประกอบของแอปพลิเคชันขึ้นอยู่กับมันเท่านั้น
2. Singletons - ส่วนประกอบแต่ละส่วนที่ขึ้นอยู่กับบริการจะได้รับการอ้างอิงถึงอินสแตนซ์เดียวที่สร้างโดยโรงงานบริการ

วิธีใช้บริการวัสดุเชิงมุม

Angular Material มาพร้อมกับบริการบางอย่างที่มีฟังก์ชันพิเศษบางอย่างให้กับแอปพลิเคชัน นอกจากนี้ยังมีส่วนช่วยในการปฏิบัติตามคำสั่งบางส่วน ตัวอย่างที่ดีของบริการคือ 'ขนมปังปิ้ง'

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

ใน JavaScript

$mdToast.show( $mdToast.simple('Simple Toast!') .position('left bottom') .hideDelay(3000) );

ตัวอย่างนี้แสดงขนมปังแบบธรรมดาที่จะปรากฏขึ้นที่ด้านล่างซ้ายของหน้าจอและจะถอยหลังจาก 3 วินาที

บริการบางอย่างสามารถปรับเปลี่ยนในแบบของคุณได้ด้วยเทมเพลตที่กำหนดเอง ในกรณีนี้บริการ $ mdToast สามารถใช้เทมเพลต HTML ที่กำหนดเองได้โดยใช้คำสั่ง md-toast

ธีม

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

ตามหลักเกณฑ์การออกแบบวัสดุคุณต้อง 'จำกัด การเลือกสีของคุณโดยเลือกเฉดสีสามสีจากจานสีหลักและสีที่เน้นสีเดียวจากจานสีรอง' Angular Material ทำให้การปฏิบัติตามแนวทางนี้ง่ายขึ้นโดยใช้ JavaScript เพื่อกำหนดค่าธีม แต่ก่อนอื่นจานสีและสีคืออะไร?

• สี: สีเป็นสีเดียวในจานสี
• Palette: จานสีคือชุดของเฉดสี

ตัวอย่างเช่นจานสีจะเป็น 'สีเขียว' และสีจะเป็นสีเขียวโดยเฉพาะ Angular Material มาพร้อมกับจานสีที่ถูกต้องทั้งหมดจากข้อกำหนด Material Design คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับจานสีที่ถูกต้อง ที่นี่ .

การกำหนดค่าธีม

โครงการของคุณคือเค้กชิ้นหนึ่ง ในไฟล์ app.js ตั้งค่าจานสีและเฉดสีที่คุณต้องการโดยใช้บริการ Theming Provider

angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette(‘cyan’, { 'default': '400', 'hue-1': '100', 'hue-2': '600', 'hue-3': 'A100' }) .accentPalette('amber') .warnPalette('red') .backgroundPalette('grey'); });

การใช้ธีม

ในการใช้ธีมกับส่วนประกอบให้ตั้งค่าคลาสขององค์ประกอบเป็นจานสีและสีที่ต้องการ

Click me Click me Click me or maybe me Careful

เค้าโครง

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

คำสั่งวัสดุเชิงมุมที่ดีที่สุด 9 อันดับแรก

มีคำสั่ง Angular Material มากเกินไปที่จะแสดงรายการทั้งหมดดังนั้นฉันจึงอยากแบ่งปันรายการโปรดของฉันกับคุณ

9. ความคืบหน้าเชิงเส้น

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

8. ตัวเลือกวันที่

เลือกวันที่ คำสั่งทำให้การเลือกวันที่เป็นประสบการณ์ที่เรียบง่ายและสะอาดตาสำหรับผู้ใช้และเขียนซับเดียวได้อย่างแท้จริง เพียงใช้ md-datepicker และเลือก จำกัด ช่วงด้วย md-min-date และ md-max-date เท่านี้เอง

7. เติมข้อความอัตโนมัติ

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

6. แผ่นด้านล่าง

แผ่นงานด้านล่าง เป็นเมนูเล็ก ๆ ที่เลื่อนขึ้นจากด้านล่างของหน้าจอครอบคลุมเนื้อหาและโฟกัส เดิมทีมีจุดประสงค์เพื่อใช้กับอุปกรณ์พกพาเท่านั้นแผ่นด้านล่างได้รับความนิยมบนหน้าจอขนาดใหญ่ ในการใช้งานให้สร้างเทมเพลตที่มี md-bottom-sheet ที่มี md-grid หรือ md-list สำหรับเค้าโครงกริดหรือเค้าโครงรายการตามลำดับ จากนั้นเรียกด้วยบริการ Bottom Sheet $ mdBottomSheet.show ()

5. อินพุต

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

4. ขนมปังปิ้ง

ประสบการณ์ผู้ใช้ที่ซ้ำเติมที่สุดคือไม่รู้ว่าแอปพลิเคชันกำลังทำอะไรอยู่ เราบรรเทาอาการนี้ได้ด้วยเครื่องปิ้งขนมปังหรือการแจ้งเตือนที่ไม่สร้างความรำคาญเล็กน้อย ในสมัยก่อนเมื่อเราส่งคำขอไปยังเซิร์ฟเวอร์เรารอในหน้านั้นจนกว่าคำตอบจะกลับมาก่อนที่เราจะดำเนินการต่อ ช่วงความสนใจของผู้ใช้ลดลงอย่างมากตั้งแต่นั้นมา ใน SPA ของวันนี้เราคลิกปุ่มและคาดว่าจะย้ายไปทันทีพร้อมกับการตอบสนองของเซิร์ฟเวอร์เมื่อมาถึง ขนมปังปิ้ง คำสั่งทำให้เค้กชิ้นนี้ เครื่องปิ้งขนมปังจะถูกเรียกโดยใช้ Toast Service, $ mdToast.show () และตั้งค่าข้อความระยะเวลาและมุมที่จะปรากฏสร้างเครื่องปิ้งขนมปังของคุณเองด้วย md-toast

3. รายการตาราง

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

2. กรอบสีขาว

แนวคิดเรื่องอวกาศเป็นหัวใจหลักของการออกแบบวัสดุและการเปรียบเปรยกระดาษ กระดาษสองแผ่นในตำแหน่ง z เดียวกัน (หรือความลึก) สร้างรอยต่อและต้องเลื่อนเข้าหากัน กระดาษสองแผ่นที่ทับซ้อนกันโดยมีตำแหน่ง z ต่างกันเป็นขั้นตอน พวกเขาเคลื่อนไหวเป็นอิสระจากกัน เพื่อให้เป็นไปตามการออกแบบเราต้องสามารถเลื่อนองค์ประกอบตามแกน z ได้ Angular Material มีวิธีง่ายๆในการทำเช่นนี้ ใช้ กรอบสีขาว คำสั่งตั้งค่าคลาสเป็น md-whiteframe-z {x} โดยที่ x คือหน่วยของความลึกจากพื้นหลัง ยิ่งจำนวนมากขึ้นเงาของกระดาษก็จะยิ่งใหญ่ขึ้น

หน้า 1

การสร้างเมนูการนำทางด้านข้างไม่เคยง่ายอย่างนี้มาก่อน คำสั่ง Sidenav จะวางเมนูการนำทางไว้ทางซ้ายหรือขวาของหน้าจอ โดยคำนึงถึงอุปกรณ์เคลื่อนที่โดยจะเลื่อนเข้าและออกตามที่คาดไว้หรือโดยใช้โปรแกรมด้วยการคลิกปุ่ม นอกจากนี้ที่ดีคือคุณสมบัติเปิดล็อค การนำทางด้านข้างสามารถตั้งค่าให้ล็อกเปิดเมื่อหน้าจอมีขนาดที่กำหนด เมื่อตั้งค่าพารามิเตอร์ md-is-lock-open =” $ mdMedia (‘gt-sm’)” เมนูจะถูกซ่อนไว้ในโทรศัพท์ แต่ล็อกไว้เปิดบนแท็บเล็ตและมีขนาดใหญ่กว่า

สรุป

Google กำลังแปลงแอปพลิเคชันยอดนิยมให้เป็นดีไซน์ Material ตอนนี้พวกเขากำลังมุ่งหน้าไปที่การพัฒนา Angular Material ซึ่งเป็นการใช้งานการออกแบบวัสดุที่เขียนใน AngularJS ดีไซน์ Material ใช้การเปรียบเปรยกระดาษความตั้งใจที่กล้าหาญและการเคลื่อนไหวที่มีความหมาย AngularJS จัดระเบียบ แอปพลิเคชั่นหน้าเดียว . Angular Material ใช้หลักการออกแบบวัสดุกับแอปพลิเคชัน AngularJS

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

คุณคิดอย่างไรเกี่ยวกับสิ่งที่ฉันเลือกสำหรับคำสั่ง Angular Material ที่ดีที่สุด ฉันเข้าใจถูกไหม รายการโปรดของคุณคืออะไร?

ที่เกี่ยวข้อง: บทช่วยสอน Angular 6: คุณสมบัติใหม่พร้อมพลังใหม่