UI การออกแบบวัสดุของ Google ได้รับการปรับปรุงใหม่ด้วยสีใหม่ การยึดถือ และการเน้นที่การสัมผัส

click fraud protection

ความมุ่งมั่นใหม่ใน Chromium Gerrit ดูเหมือนจะอ้างอิงถึง "การออกแบบวัสดุ 2" ซึ่งอาจเป็นภาษาการออกแบบวัสดุของ Google เวอร์ชันใหม่ที่ได้รับการปรับปรุง

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

นับตั้งแต่ Material Design เปิดตัวในปี 2014 ก็แพร่กระจายไปทั่วระบบนิเวศของ Android เช่น ไฟป่า ไม่ต้องพูดถึงแอป Google เช่น YouTube, Chrome, Gmail, Hangouts และ Google Calendar ปุ่มการทำงานแบบลอยตัว สีสันสวยงาม และเทคนิคการยกระดับได้ถูกนำมาใช้เป็นส่วนหนึ่งของ ไลบรารีส่วนประกอบวัสดุ บน GitHub (ภาคต่อจาก Design Support Library ของ Android และ Material Design Lite ที่เน้นเว็บของ Google) ซึ่งนำ Material ความดีต่อ Android ในรูปแบบมุมมองที่กำหนดเอง และต่อเว็บในรูปแบบบันเดิลที่สามารถนำเข้าและใช้งานได้เหมือน HTML มาตรฐาน แท็ก

เนื่องในโอกาสครบรอบสี่ปีของ Material Design ดูเหมือนว่า Google กำลังเตรียมการสำหรับรุ่นต่อไป ได้แรงบันดาลใจจากกระดาษและหมึก เกี่ยวกับความงาม: การออกแบบวัสดุ 2. ข้อมูลเล็กๆ น้อยๆ อันล้ำค่าเปิดเผยต่อสาธารณะเกี่ยวกับ Material Design 2 ซึ่งเราได้เปิดเผยในสัปดาห์นี้ในข้อตกลงใหม่ใน Chromium Gerrit เราไม่อ้างว่าเป็น เหมาะสม ผู้สืบทอดจากกรอบงานดีไซน์ Material ใหม่ล่าสุด แต่ความมุ่งมั่นชี้ไปที่การเปลี่ยนแปลงจานสี การยึดถือ และพฤติกรรมของหน้าจอสัมผัสที่สังเกตเห็นได้ชัดเจน (หากละเอียดอ่อน)


การออกแบบวัสดุ 2 ปรากฏใน Chromium Gerrit

ในช่วงต้นเดือนกุมภาพันธ์ ข้อตกลงใหม่เกี่ยวกับ Chromium Gerrit ได้นำ UI "Material Design 2" มาใช้ใน Chrome แถบแท็บ—แท็บที่ลากได้ซึ่งมีชื่อหน้าเว็บ ไอคอน Fav และปุ่ม "ปิดแท็บ" เหนือ Chrome แถบที่อยู่.

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

ชุดแท็บ Chrome

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

การเจาะลึกลงไปในโค้ดคอมมิตจะแสดงชุดสี "Material Design 2" ใหม่สำหรับธีม Chromium สีเทา แดง และแดงเข้ม และสีใหม่สำหรับแถบเครื่องมือ Chrome มาตรฐานและแถบเครื่องมือที่ไม่ระบุตัวตน เราใช้ตารางค้นหาเลขฐานสิบหกเพื่อสร้างตัวอย่าง RGB:

สีแดงของ Material Design 2 คือ เข้มขึ้นเล็กน้อย กว่าดีไซน์ Material ในปัจจุบัน สีแดง 800 (#C62828) และ สีแดง 600 (#E53935) ในขณะที่สีเทาเฉดใหม่ (#3C4043, #5F6368, #BDC1C6, #F1F3F4) มีโทนสีน้ำเงินที่เบากว่า การออกแบบวัสดุประกอบด้วยสีเทาแบบดั้งเดิม โดยที่ R=G=B ในขณะที่อยู่ที่นี่ B>G>R ในทุกเฉดสี (แต่เพียง 1-4 จาก 255 เท่านั้น)

Chrome เวอร์ชันที่เข้ากันได้กับ Material Design 2 จะมีแถบเครื่องมือที่สว่างกว่าบิวด์ปัจจุบันมาก โดยเกือบจะเป็นสีขาวเมื่อเทียบกับโทนสีเทาในปัจจุบัน

ต่อไปนี้เป็นตัวอย่างสั้นๆ ว่าแถบเครื่องมือจะมีลักษณะอย่างไรเมื่อใช้สีใหม่:

ในที่สุดการคอมมิตจะเพิ่มสิ่งใหม่ IsTouchOptimizedMaterial () ปักธงไปที่ ตัวควบคุมการออกแบบวัสดุซึ่งอาจหมายถึงองค์ประกอบ Material Design 2 ที่ปรับให้เหมาะกับระบบสัมผัส เราเขียนเมื่อต้นเดือนมกราคมเกี่ยวกับความพยายามของ Google ในการปรับปรุง การรองรับหน้าจอสัมผัสของเว็บเบราว์เซอร์ Chrome บนอุปกรณ์ Chrome OS และดูเหมือนว่าจะเป็นความต่อเนื่องของมัน

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


ความสำคัญของสีในการออกแบบวัสดุ

สีใหม่มีความหมายอย่างไรในบริบทที่กว้างขึ้นของดีไซน์ Material

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

Google ให้ตัวอย่าง จานสี ออกแบบมาเพื่อ "ทำงานร่วมกันได้ดี" บนแพลตฟอร์มต่างๆ และสนับสนุนให้นักพัฒนาใช้ประโยชน์จากแหล่งที่มา สีแอปหลัก หรือที่เรียกว่าสี "เด่น" จากคอลเลกชันที่แตกต่างกัน 500 สี ตัวอย่าง (ลองนึกถึง "สีน้ำเงิน" "สีเขียว" หรือ "สีม่วง" และสีพื้นฐานอื่นๆ) หากจำเป็น สีเหล่านี้จะมาจากสีรองจากคอลเลกชั่นที่ขยายออกไปอีก 700 สี (สีเสริมสำหรับองค์ประกอบ UI ที่สำคัญที่สุด และคล้ายคลึงกับองค์ประกอบ UI ที่มีความสำคัญน้อยกว่า และสีระดับอุดมศึกษาจากชุดย่อยของ 300).

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

จากสิ่งที่เรารู้เกี่ยวกับชุดสีของ Material Design 2 ตัวอย่างบางส่วนใน "primary 500" ของ Google เช่น Red 600 และ 800 นั้นเข้มกว่า Material Design รุ่นก่อน แต่คนอื่นๆ เช่น สีเทา จะได้รับการปฏิบัติที่ตรงกันข้าม-- ทั้งตัวอย่างสีเทาและสีขาวที่แสดงในจำลองแท็บ Chrome มีระดับสีเทาที่เย็นกว่าและค่าสีน้ำเงินที่สูงกว่า.


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

อัปเดต 2/4/2018: ไม่นานหลังจากการตีพิมพ์บทความนี้ การกระทำดังกล่าวก็ถูกเปิดเผยเป็นส่วนตัว ซึ่งอาจหมายความว่าการกระทำดังกล่าวตั้งใจที่จะเก็บเป็นความลับ เราจะตรวจสอบการเปลี่ยนแปลง Chromium Gerrit ต่อไป และอัปเดตบทความนี้หากเราพบการเปลี่ยนแปลงใดๆ