Sushi Design System - UI Kit

UI Kit แสนอร่อยสำหรับสร้างแอพ Android ทำด้วย❤ by zomato

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

ระบบการออกแบบและการอ้างอิงสำหรับแนวทางของแบรนด์ มีการใช้และนำเสนอโดยทีมต่างๆ ภายใน Zomato เช่น - ผลิตภัณฑ์ วิศวกรรม การตลาดและการสร้างแบรนด์

ระบบการออกแบบคืออะไร

ระบบการออกแบบคือชุดของส่วนประกอบที่นำกลับมาใช้ใหม่ได้ โดยมีแนวทางมาตรฐานที่ชัดเจน ซึ่งสามารถประกอบเข้าด้วยกันเพื่อสร้างการใช้งานจำนวนเท่าใดก็ได้ ระบบการออกแบบไม่ได้เป็นเพียงการรวบรวมทรัพย์สินและส่วนประกอบที่คุณใช้ในการสร้างผลิตภัณฑ์ดิจิทัลเท่านั้น Emmet Connolly ผู้อำนวยการฝ่ายออกแบบผลิตภัณฑ์ของ Intercom กล่าวว่า "... ระบบการออกแบบส่วนใหญ่เป็นเพียง Pattern Libraries: กล่องขนาดใหญ่ของชิ้นส่วน UI Lego ที่สามารถประกอบเข้าด้วยกันในรูปแบบที่แทบจะไม่มีที่สิ้นสุด ชิ้นส่วนทั้งหมดอาจสอดคล้องกัน แต่นั่นไม่ได้หมายความว่าผลลัพธ์ที่ประกอบเข้าด้วยกันจะเป็น ผลิตภัณฑ์ของคุณเป็นมากกว่าองค์ประกอบ UI ที่นำกลับมาใช้ใหม่ได้ มีโครงสร้างและความหมาย ไม่ใช่หน้าเว็บทั่วไป แต่เป็นศูนย์รวมของระบบแนวคิด”

ระบบออกแบบซูชิ

รองพื้น

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

การออกแบบปรมาณู

Atomic Design (ตามที่อธิบายโดย Brad Frost) จับคู่กับระบบของเรา

#อะตอม

หน่วยที่เล็กที่สุดคืออะตอม ป้ายข้อความ ปุ่ม และรูปภาพใน Android (หรือ UI ของอุปกรณ์เคลื่อนที่) เป็นอะตอม

#Molecules

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

#Organisms

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

วิชาการพิมพ์

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

เราสนับสนุนรูปแบบตัวอักษรต่อไปนี้ -

ExtraLight

แสงสว่าง

ปกติ

ปานกลาง

กึ่งหนา

ตัวหนา

ExtraBold

คุณสามารถใช้แบบอักษรใดก็ได้ที่มีน้ำหนักแบบอักษรไม่เกิน 8 และกำหนดจากนามแฝงเหล่านี้ ในขณะที่เรามี Metropolis, Okra และ Roboto สำหรับการสาธิต คุณสามารถใช้แบบอักษรใดก็ได้ที่เข้ากับแบรนด์ของคุณ

สี

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

ที่เก็บโค้ด