ขาวดำ: ระบบการออกแบบที่สร้างขึ้นเพื่อโฟกัส

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

เหตุใดเราจึงลบสีออกโดยตั้งใจ

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

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

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

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

ลำดับชั้นที่ไม่มีสี: สามคัน

คันโยกสามคันทำหน้าที่แทนสีบนโต๊ะ

ประเภทสเกล เราใช้สเกลแบบโมดูลาร์ที่มีการกระโดดที่ชัดเจน ไม่ใช่การไล่ระดับขนาดอย่างต่อเนื่อง ขั้นตอนที่นั่งใกล้เกินไปจะอ่านเป็นเสียง ดวงตาต้องการอันดับที่ชัดเจน ขนาดการทำงานของเราคือประมาณ 12 / 14 / 16 / 20 / 28 / 40 / 64px ข้อความเนื้อหาอยู่ที่ 16 เมตาดาต้ารองอยู่ที่ 14 และทุกอย่างที่สูงกว่า 20 ถือเป็นโครงสร้าง หากสองสิ่งจำเป็นต้องรู้สึกถึงความแตกต่างในความสำคัญ พวกเขาจะได้รับขั้นตอนที่ต่างกัน ไม่เคยก้าวเดียวกันด้วยสีเทาสองเฉด

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

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

คอนทราสต์เป็นระบบ ไม่ใช่บรรยากาศ

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

--ink-000: #000000   /* primary text, headings */
--ink-700: #3d3d3d   /* body on light, secondary headings */
--ink-500: #6b6b6b   /* metadata, captions, disabled-adjacent */
--ink-300: #b0b0b0   /* borders, dividers, placeholder */
--ink-100: #e6e6e6   /* subtle fills, hover backgrounds */
--paper:   #ffffff   /* base surface */

หกค่า นั่นคือทั้งระบบ บวกกับการผกผันของโหมดมืด กฎที่เราบังคับใช้ในการตรวจสอบ: ไม่มีสีเทาที่ไม่ได้อยู่บนทางลาด ทันทีที่มีคนหยอดตา #8a8a8a เพราะ "รู้สึกว่าขอบสัมผัสหนัก" ระบบก็เริ่มเน่า ชุดค่าปิดคือสิ่งที่ทำให้ UI ขาวดำไม่ลอยไปสู่ความเหมือนกันที่เป็นโคลน

ข้อความล้าง 4.5:1 โครงสร้างล้าง 3:1

การจับคู่ข้อความบนพื้นผิวทุกครั้งจะได้รับการตรวจสอบกับอัตราส่วนคอนทราสต์ของ WCAG ก่อนจัดส่ง --ink-500 บน --paper อยู่ที่ประมาณ 5.7:1 ซึ่งเกินเกณฑ์ 4.5:1 สำหรับข้อความเนื้อหาอย่างสบายๆ --ink-300 ล้มเหลวในรูปแบบข้อความ ดังนั้นจึงอนุญาต เฉพาะ สำหรับเส้นขอบและตัวแบ่ง โดยที่เกณฑ์ที่ไม่ใช่ข้อความใช้ 3:1 การเข้ารหัสกฎในการใช้งานที่ได้รับอนุญาตของโทเค็น ไม่ใช่แค่มูลค่าเท่านั้น คือสิ่งที่ทำให้กฎยังคงอยู่

เงินปันผลด้านการเข้าถึง

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

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

คุณได้รับการสนับสนุนคอนทราสต์สูงและสีบังคับที่ใกล้เคียงกับฟรีเช่นกัน เนื่องจากคุณไม่เคยต่อสู้กับการแทนที่การเข้าถึงของเบราว์เซอร์ด้วยชุดสีแบรนด์ที่ละเอียดอ่อน

ข้อจำกัดเร่งการตัดสินใจอย่างไร

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

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

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

กฎที่คุณสามารถนำไปใช้ในวันพรุ่งนี้

หากคุณต้องการลองโดยไม่ต้องสร้างทุกอย่างใหม่:

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

ปิดความคิด

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