สร้างเว็บแอปล้ำสมัยด้วยวัสดุเชิงมุม

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

การออกแบบวัสดุคืออะไร?

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

เป้าหมาย

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

หลักการ

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

วัสดุคือคำอุปมา

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

ตัวหนา กราฟิก ความตั้งใจ

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

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

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

AngularJS เข้ากับดีไซน์ Material ได้อย่างไร

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

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

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

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

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

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

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

แนะนำวัสดุเชิงมุม

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

เริ่มต้น

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

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

คำสั่ง

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

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

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

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

 <button>Click Me</button>

ปุ่มวัสดุเชิงมุมมีลักษณะดังนี้

 <md-button>Click Me</md-button>

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

 <md-button class="md-raised md-primary md-hue-1">Click Me</md-button>

บริการ

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

บริการเชิงมุมคือ:

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

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

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

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

ในจาวาสคริปต์

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

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

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

ธีม

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

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

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

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

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

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

 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'); });

การใช้ธีม

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

 <md-button class="md-primary">Click me</md-button> <md-button class="md-primary md-hue-1">Click me</md-button> <md-button class="md-primary md-hue-2">Click me</md-button> <md-button class="md-accent">or maybe me</md-button> <md-button class="md-warn">Careful</md-button>

เค้าโครง

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

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

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

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

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

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

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

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

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

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

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

5. อินพุต

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

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

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

3. รายการกริด

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

2. ไวท์เฟรม

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

1. ซิเดนาฟ

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

บทสรุป

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

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

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