การใช้งานดีไซน์ Material ที่สวยงามในแอปบนอุปกรณ์เคลื่อนที่

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

ใช่ การออกแบบ Material มาและเปลี่ยนประวัติศาสตร์การออกแบบ และในช่วงสองปีที่ผ่านมา ดีไซน์นี้ได้รับความนิยมอย่างมากในการออกแบบแอปบนอุปกรณ์เคลื่อนที่ และมีการนำดีไซน์ Material Design ไปใช้ในแอปบนอุปกรณ์เคลื่อนที่จำนวนมาก

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

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

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

ในปี 2015 แอปพลิเคชันมือถือของ Google สำหรับ Android ส่วนใหญ่ได้ใช้ภาษาการออกแบบใหม่ รวมถึง Gmail, YouTube, Google Drive, Google เอกสาร, ชีตและสไลด์, Google Maps, Inbox

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

การนำการออกแบบวัสดุไปใช้ตามรูปแบบบัญญัติสำหรับอินเทอร์เฟซผู้ใช้เว็บแอปพลิเคชันเรียกว่าพอลิเมอร์

ประกอบด้วยไลบรารี Polymer ชิมที่ให้ API ของ Web Components สำหรับเบราว์เซอร์ที่ไม่ได้ใช้มาตรฐานแบบเนทีฟ และแค็ตตาล็อกองค์ประกอบ ซึ่งรวมถึง "คอลเล็กชันองค์ประกอบกระดาษ" ที่มีองค์ประกอบที่มองเห็นได้ของดีไซน์ Material

ระบบซึ่งเน้นที่เลย์เอาต์แบบกริด เอฟเฟกต์การเปลี่ยนภาพ และความลึก ในไม่ช้าก็เข้าสู่แอป Android และนำระบบไปสู่มาตรฐานการออกแบบของ iOS

หลักการออกแบบวัสดุ

ตัวชี้นำภาพเป็นแรงบันดาลใจ

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

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

สุนทรียศาสตร์ที่โดดเด่น

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

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

โพสต์ที่เกี่ยวข้อง: ข้อผิดพลาดที่พบบ่อยที่สุดในการออกแบบแอพมือถือ

ความหมายที่เกิดจากการเคลื่อนไหว

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

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

Material Design ไม่เพียงแต่สร้างคำสั่งซื้อ แต่ยังสร้างคำสั่งซื้อที่มีวัตถุประสงค์และความหมายอีกด้วย เป็นการแสดงออกทางประสาทสัมผัสของแบรนด์ Google

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

ความจำเพาะที่ทำให้มึนงงของการออกแบบวัสดุเป็นการตอบสนองต่อข้อเท็จจริงสองประการ:

• หากนักพัฒนาสามารถทำลาย UI ได้ พวกเขาก็จะทำ
• ทางเลือกในการออกแบบที่ดีไม่ใช่การออกแบบ แต่เป็นการออกแบบที่ไม่ดี

ต่อไปนี้คือการใช้งานดีไซน์ Material ที่สวยงามที่สุดในแอปบนอุปกรณ์เคลื่อนที่

ใครสามารถใช้ดีไซน์ Material ได้ดีกว่าผู้ที่สร้างมันขึ้นมา Google ปฏิทินเป็นหนึ่งในการใช้งานดีไซน์ Material ที่สวยงามที่สุดในแอพมือถือ ด้วยการดาวน์โหลดมากกว่า 1,000,000 ครั้ง งานนี้จึงเขย่าขวัญปาร์ตี้อย่างแน่นอน

Google ปฏิทิน

สำหรับผู้เริ่มต้น ในที่สุดแอปของ Google ก็เลิกใช้การออกแบบ skeuomorphic แบบเดิมๆ ที่แอปปฏิทินส่วนใหญ่ใช้ซึ่งเลียนแบบเลย์เอาต์ของผู้วางแผนทางกายภาพ

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

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

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

Evernote

Evernote มักได้รับการยกย่องในด้านการออกแบบ Material และเป็นตัวอย่างที่สะดุดตาของการใช้งาน Material Design ที่สวยงามในแอปบนอุปกรณ์เคลื่อนที่

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

ไอคอน Elephant นั้นเรียบง่ายและสวยงาม ในขณะที่แอพเว็บไซต์, iOS และ Windows 10 ก็ได้รับการออกแบบและจัดวางอย่างพิถีพิถันเช่นเดียวกัน

Microsoft Health

Microsoft Health เป็นหนึ่งในตัวอย่างที่ดีที่สุดใน Play Store

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

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

เยี่ยม: กระตุ้นให้ฉัน

หลายคนคิดว่า Fabulous: Motivate Me เป็นการนำดีไซน์ Material ไปใช้จริงและแม่นยำที่สุดในแอปบนอุปกรณ์เคลื่อนที่

แอพสำรวจหลักการออกแบบวัสดุใหม่ด้วยวิธีปกติด้วยภาพที่คมชัด แบนราบ และสีสันสดใส แต่ก็มีแอนิเมชั่นที่น่าดึงดูดที่สุดบางส่วนบน Play Store

รายการจะไม่สมบูรณ์หากไม่มีแอปพลิเคชันมือถือของ Facebook Live

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

ใช้ประโยชน์จากรูปเคารพ แอนิเมชั่น และการออกแบบการโต้ตอบ ซึ่งเป็นลักษณะสำคัญของ Material