กาแล็กซี
วงโคจร II · กลุ่มดาว

Brand & Surface

แบรนด์และพื้นผิว

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

ขับเคลื่อน XNLABทุกโปรเจกต์
5 โมดูล · 5 บทเรียน
โมดูลของกลุ่มดาว เปิดแต่ละโมดูลเพื่อดูบทเรียนเต็ม
BS-01

มินิมอลลิสม์สุดขั้ว

บทเรียน

ตรวจสอบหน้าจอจริงหนึ่งหน้า แล้วส่งมอบ before/after ที่ทุกองค์ประกอบซึ่งถูกลบออกมีเหตุผลรองรับจากการตัดสินใจ ไม่ใช่จากรสนิยม

Minimalism แบบสุดขั้วของ XNLAB ไม่ใช่เรื่องสุนทรียะ แต่เป็นวิธีการตัดสินใจ operator ส่วนใหญ่เชื่อว่าการ "ทำให้สะอาด" คือการลด opacity และเพิ่มช่องว่าง แต่ในความเป็นจริงกลับตรงข้าม นั่นคือทุกองค์ประกอบที่อยู่รอดต้องพิสูจน์สิทธิ์ของตนเองด้วยการตอบคำถามที่เป็นรูปธรรม (ผู้ใช้ทำอะไรตรงนี้ ตัดสินใจอะไร) นี่คือการผ่าตัด ไม่ใช่การประดับ หากปราศจากวิธีการที่ชัดเจน คำว่า "minimalist" จะเสื่อมไปเป็น "ว่างเปล่าและตามอำเภอใจ" ซึ่งแย่ยิ่งกว่ารกรุงรัง เพราะมันดูสะเพร่า ยาแก้คือ audit ที่มีเกณฑ์เขียนไว้เป็นลายลักษณ์อักษร ที่ซึ่งการลบเป็นการกระทำที่ปกป้องได้และย้อนกลับได้ ไม่ใช่แรงกระตุ้นชั่ววูบ

บทเรียน

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

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

before/after ที่ไม่มีเหตุผลเป็นลายลักษณ์อักษรคือความเห็นส่วนตัว แต่เมื่อมีเหตุผลรองรับ มันคือ audit ที่ปกป้องได้ต่อหน้าลูกค้า ทำซ้ำได้โดยคนอื่น และย้อนกลับได้หากข้อมูลขัดแย้งกับมัน

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

กฎของ XNLAB เป็นแบบอนุรักษ์นิยมแต่ไม่ยึดติดเป็นหลักคำสอน ค่าเริ่มต้นคือการแก้ไขแบบผ่าตัด ซึ่งทบทวนได้ด้วยข้อมูล conversion ไม่ใช่กฎทางศีลธรรม

แบบฝึกหัด

เลือกหน้าจอที่หนาแน่นซึ่งมีอยู่แล้ว (landing, dashboard หรือ form หน้าของ MOONKEY เองก็ใช้ได้) จับภาพสถานะปัจจุบันเป็น 'before' จากนั้นจัดทำรายการทุกองค์ประกอบที่มองเห็นลงในตาราง สำหรับแต่ละองค์ประกอบ ตอบในหนึ่งบรรทัดว่า มันรองรับการตัดสินใจใดของผู้ใช้ ณ ที่นี่และขณะนี้ ทำเครื่องหมายว่าเป็นผู้ที่อาจถูกลบ สำหรับทุกสิ่งที่ไม่ได้ตอบคำถามใด ลงมือตัดแล้วจับภาพ 'after' เขียนกำกับการลบแต่ละครั้งด้วยเหตุผล (ซ้ำซ้อน / ไม่ตอบการตัดสินใจใดเลย / ย้ายไปวิวอื่นได้ / ประดับโดยไม่มีหน้าที่) ตรวจสอบว่าการตัดออกไม่ได้ทำลายงานที่ผู้ใช้จำเป็นต้องทำให้สำเร็จ

สิ่งที่ส่งมอบ

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

ข้อคิดสำคัญ

การลบเป็นการตัดสินใจที่ปกป้องได้ยากที่สุด เพราะมันไม่ทิ้งร่องรอย ด้วยเหตุนี้จึงต้องเขียนเหตุผลก่อนลบ ไม่ใช่หลังลบ audit เปลี่ยน minimalism จากความเห็นให้กลายเป็นวิธีการ

ข้อผิดพลาดที่ควรเลี่ยง

  • ×สับสนระหว่าง minimalism กับการลด opacity และใส่ช่องว่าง นั่นคือความว่างเปล่าตามอำเภอใจ ไม่ใช่การผ่าตัด ผลลัพธ์ดูสะเพร่า ไม่ได้ดูพรีเมียม
  • ×ลบองค์ประกอบที่ค้ำจุนงานของผู้ใช้ และทำลายโฟลว์เพื่อไล่ตามความสะอาดทางสายตา
  • ×ไม่บันทึกเหตุผลของการตัดแต่ละครั้ง หากไม่มีเหตุผลเป็นลายลักษณ์อักษร audit จะย้อนกลับไม่ได้และปกป้องต่อหน้าลูกค้าไม่ได้
  • ×ปฏิบัติต่อกฎเสมือนกฎทางศีลธรรมที่แก้ไขไม่ได้ แทนที่จะเป็นค่าเริ่มต้นที่ทบทวนได้ด้วยข้อมูล conversion
BS-02

ตัวอักษรที่มีเจตนา

บทเรียน

สร้างหัวเรื่องคู่หนึ่งที่ผสม Inter sans กับ span ตัวเอียง serif (Cormorant) โดยที่สายตาจับการกระโดดไม่ได้ และบันทึกการแก้ไขขนาดที่ทำให้มันใช้งานได้

การผสม sans (Inter) กับ serif ตัวเอียง (Cormorant) ภายในหัวเรื่องเดียวกันเป็นหนึ่งในลีลาทางตัวอักษรที่ให้ผลตอบแทนสูงและมีกับดักมากที่สุด กับดักที่เป็นรูปธรรมและได้รับการพิสูจน์แล้วใน XNLAB คือ serif ตัวเอียงมี x-height ต่ำกว่า ดังนั้นที่ font-size เท่ากันมันจะดูเล็กกว่าในเชิงทัศนะ และหัวเรื่องจะดูพังราวกับว่าตัวเอียงจมลงไป operator ที่ไม่รู้จักการปรับนี้จะปล่อยมันไว้แบบนั้น และผลลัพธ์ก็ขัดหูขัดตาโดยที่เขาไม่รู้ว่าทำไม การแก้ไขนี้ไม่ใช่ทฤษฎี แต่เป็นการ bump ขนาด font-size อย่างชัดเจนใน span ตัวเอียง (~1.18-1.2em) เพื่อให้ความสูงที่รับรู้เท่ากัน การรู้สิ่งนี้คือความแตกต่างระหว่างตัวอักษรที่มีเจตนากับฟอนต์สองตัวที่ทะเลาะกัน

บทเรียน

font-size ตามชื่อไม่ใช่ขนาดที่รับรู้ สิ่งที่สายตาวัดคือ x-height และ serif ตัวเอียงมีค่านี้ต่ำกว่า sans ดังนั้นที่ px เท่ากันมันจึงดูเล็กกว่า

การปรับที่พิสูจน์แล้วสำหรับ Inter + Cormorant ตัวเอียงคือการ bump fontSize เป็น 1.18-1.2em ใน span serif นี่ไม่ใช่ตัวเลือก หากปราศจากมันหัวเรื่องจะถูกอ่านว่าพัง

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

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

แบบฝึกหัด

เขียนหัวเรื่อง XNLAB สองชิ้นที่มีคำสำคัญหนึ่งคำเป็น serif ตัวเอียงอยู่ในข้อความ sans (เช่น คำนามที่แบกความหมายไว้) เรนเดอร์แต่ละชิ้นสองครั้ง: ครั้งหนึ่งให้ span ตัวเอียงมี font-size เท่ากับ sans อีกครั้งใส่ fontSize:'1.18em' ใน span เปรียบเทียบสองเวอร์ชันโดยวางเทียบกัน และยืนยันด้วยสายตา (ไม่ใช่ด้วยตัวเลข) ว่าเวอร์ชันไหนทำให้ความสูงที่รับรู้เท่ากัน บันทึกค่าที่ลงตัวพอดีสำหรับคู่ตัวอักษรของคุณ หากยังเห็นการกระโดดอยู่ ให้ปรับขึ้นไปทาง 1.2em แล้วตรวจสอบใหม่

สิ่งที่ส่งมอบ

หัวเรื่อง italic-mix คู่หนึ่งที่ทำงานได้ แต่ละชิ้นมาพร้อมการเปรียบเทียบ 'ยังไม่แก้ / แก้แล้ว' ที่ทำให้ปัญหา x-height มองเห็นได้ บวกกับบรรทัด CSS ที่แม่นยำ (fontSize:'1.18em' หรือค่าที่ลงตัว) บันทึกไว้เป็นการตัดสินใจที่นำกลับมาใช้ซ้ำได้

ข้อคิดสำคัญ

ตัวอักษรที่มีเจตนาจะสังเกตได้ก็ต่อเมื่อสังเกตไม่ได้ หากผู้อ่านรับรู้การกระโดดระหว่าง sans กับ serif แสดงว่าคุณล้มเหลว การปรับ x-height ที่ทำได้ดีจะล่องหน และที่ทำผิดจะเด่นชัด

ข้อผิดพลาดที่ควรเลี่ยง

  • ×สมมติว่า font-size เท่ากันหมายถึงขนาดทางสายตาเท่ากัน เป็นการมองข้าม x-height และทิ้งให้หัวเรื่องจมไปกับตัวเอียง
  • ×ใช้ serif ตัวเอียงเป็นการประดับโดยไม่มีน้ำหนักทางความหมาย คอนทราสต์ทางตัวอักษรต้องชี้บางสิ่ง ไม่ใช่เพียงเติมเต็มช่องว่าง
  • ×ตรวจสอบการปรับด้วยตัวเลข (1.18em) แทนที่จะด้วยสายตา ค่าที่แม่นยำขึ้นอยู่กับคู่ฟอนต์และขนาด ต้องมองด้วยตา
  • ×ใส่ bump แบบ global แทนที่จะใส่ที่ span ที่เจาะจง ทำให้ลำดับชั้นส่วนที่เหลือพังลง
BS-03

น้ำเสียงของสตูดิโอ

บทเรียน

เขียน copy deck ของหน้าจริง (hero + สามเซกชัน) ในเสียงของสตูดิโอที่ไม่เปิดเผยตัวตน ที่ผ่านการทดสอบ "ความจริงหรือการตลาด": ทุกประโยคต้องตรวจสอบได้ ไม่เช่นนั้นก็ลบทิ้ง

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

บทเรียน

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

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

คำสัญญาที่ว่างเปล่า ('เราเปลี่ยนแปลง' 'ยอดเยี่ยม' 'ผู้นำ') คือสัญญาณรบกวนที่ลดความน่าเชื่อถือของทุกสิ่งรอบข้าง รวมถึงสิ่งที่เป็นความจริงด้วย

ความซื่อสัตย์ทางกฎหมายเป็นส่วนหนึ่งของเสียง: ไม่กุข้อมูลของนิติบุคคล สิ่งที่ไม่ได้จดทะเบียนถูกระบุว่าไม่ได้จดทะเบียน รอบ (cycle) ถูกอธิบายตามสภาพจริง ('Open.') ไม่ใช่ตามที่สะดวก

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

แบบฝึกหัด

เลือกหน้าหนึ่ง (home หรือ /contact) เขียน hero และสามเซกชันในเสียงของสตูดิโอ จากนั้นนำแต่ละประโยคผ่านการทดสอบ: ในคอลัมน์หนึ่งวางประโยค ในอีกคอลัมน์เขียน 'ความจริง' (และวิธีตรวจสอบ) หรือ 'การตลาด' (และทำไมมันคือควัน) ทุกประโยคที่ติดป้าย 'การตลาด' ต้องเขียนใหม่ให้เป็นข้อเท็จจริงที่ตรวจสอบได้หรือลบทิ้ง ตรวจสอบว่าไม่มี 'ฉัน' ไม่มีชื่อเฉพาะ และไม่มีข้อมูลของนิติบุคคลที่กุขึ้นหลุดเข้ามา ยืนยันว่าสถานะของรอบถูกอธิบายตามสภาพจริง ไม่ใช่ตามที่ขายได้ดีกว่า

สิ่งที่ส่งมอบ

copy deck ของหน้าจริงหนึ่งหน้า (hero + 3 เซกชัน) พร้อมตารางทดสอบ 'ความจริงหรือการตลาด' วางเคียงข้าง: ทุกประโยคสุดท้ายจัดประเภทเป็นความจริง-ที่ตรวจสอบได้ โดยไม่มีคำสัญญาว่างเปล่าเหลือรอดแม้แต่ประโยคเดียว และไม่มีข้อมูลของนิติบุคคลที่กุขึ้น พร้อมวางลงในหน้า

ข้อคิดสำคัญ

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

ข้อผิดพลาดที่ควรเลี่ยง

  • ×เติมช่องว่างจากการไม่มีผู้ก่อตั้งด้วยคำขั้นสูงสุด ('ยอดเยี่ยม' 'ผู้นำ' 'พลิกโฉม') แทนที่จะด้วยข้อเท็จจริงที่ตรวจสอบได้
  • ×ปล่อยให้บุรุษที่หนึ่งหรือชื่อเฉพาะหลุดเข้ามาและทำลายความนิรนามของสตูดิโอ
  • ×กุข้อมูลของนิติบุคคล (NIF ที่อยู่ การจดทะเบียน) เพื่อให้ดูเป็นกิจการที่มั่นคง สิ่งนี้ละเมิดสถานะทางกฎหมายจริงและตรวจพบได้
  • ×สับสนระหว่างนิรนามกับเย็นชา แล้วเขียน copy ที่ไร้ชีวิตชีวา ความอบอุ่นมาจากความเข้มงวดและความเป็นรูปธรรม ไม่ใช่จาก 'ฉัน'
  • ×อธิบายรอบตามที่สะดวกในเชิงการค้า ('เหลือที่ว่างหนึ่งที่') แทนที่จะตามสภาพจริง ('Open.')
BS-04

แปลโดยรักษาความหมาย

บทเรียน

ผลิตคู่ EN/ES ของบล็อก copy ที่ภาษาสเปนพูดสิ่งเดียวกับภาษาอังกฤษ ไม่ใช่ตรงตัว และส่งมอบบันทึกของการตัดสินใจทางความหมายแต่ละครั้ง

การแปล copy ของ XNLAB ไม่ใช่การแทนที่คำ แต่เป็นการรักษาความหมายให้ข้ามผ่านสองภาษาที่มีไวยากรณ์ต่างกัน ความผิดพลาดที่ถูกบันทึกและเกิดซ้ำคือการสะท้อนคำศัพท์ (lexical mirror): แปล 'Not X' เป็น 'Sin X' ทั้งที่ภาษาอังกฤษกำลังชี้การเปรียบเทียบ (ไม่ใช่การขาดหาย) แล้วภาษาสเปนเปลี่ยนมันเป็นอย่างอื่น เช่นเดียวกับการเปลี่ยน passive ของอังกฤษเป็น reflexive ของสเปน หรือการตกหล่นของ modifier และกริยาโดยที่ไม่มีใครสังเกต ความพลั้งพลาดแต่ละครั้งเปลี่ยนความหมายไปหนึ่งระดับ และอีกสามระดับต่อมา หน้าภาษาสเปนก็พูดสิ่งที่ภาษาอังกฤษไม่เคยพูด การป้องกันเดียวคืออ่านทุกบรรทัดในภาษาสเปนเหมือนเจ้าของภาษา ไม่ใช่เหมือนนักแปล และยืนยันว่าคำกล่าวเป็นสิ่งเดียวกัน ไม่ใช่ว่าคำตรงกัน

บทเรียน

การแปลคือการรักษาความหมาย ไม่ใช่การสะท้อนคำศัพท์ คำถามที่ถูกต้องไม่ใช่ 'คำนี้มีในภาษาสเปนไหม' แต่คือ 'ประโยคนี้กล่าวสิ่งเดียวกันหรือไม่'

'Not X' → 'Sin X' คือกับดักตัวเอก: การขาดหายเทียบกับการเปรียบเทียบ บางครั้งภาษาอังกฤษกำลังเปรียบเทียบ และ 'Sin X' เปลี่ยนมันเป็นความขาดแคลนที่ต้นฉบับไม่ได้พูด

passive ของอังกฤษที่เปลี่ยนเป็น reflexive ของสเปนอาจเปลี่ยนว่าใครทำการกระทำและความรับผิดชอบที่แฝงอยู่ ต้องตรวจสอบผู้กระทำ (agent) ไม่ใช่แค่รูปประโยค

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

การควบคุมคุณภาพคือการอ่านทุกบรรทัด ES เหมือนเจ้าของภาษา ไม่ใช่การเทียบกับ EN ทีละคำ หากฟังดูเหมือนคำแปล ก็คือคำแปล หากฟังดูเหมือนต้นฉบับ ก็ถือว่าถูกต้อง

แบบฝึกหัด

นำบล็อก EN จริง (hero หรือเซกชันที่มีคำกล่าวหนักแน่น) แปลเป็นภาษาสเปนโดยให้ความสำคัญกับความหมาย จากนั้นตรวจสอบทีละบรรทัด: มี 'Not X' ใดกลายเป็น 'Sin X' โดยเปลี่ยนการเปรียบเทียบเป็นการขาดหายหรือไม่ มี passive ใดกลายเป็น reflexive และย้ายผู้กระทำหรือไม่ มี modifier หรือกริยาใดตกหล่นหรือไม่ สำหรับแต่ละสิ่งที่พบ บันทึกการตัดสินใจ: ภาษาอังกฤษพูดอะไร ร่างแรกของคุณพูดอะไร คุณใส่อะไรลงไปและทำไมมันรักษาความหมายไว้ อ่านเวอร์ชันสุดท้ายในภาษาสเปนออกเสียงดังเหมือนเจ้าของภาษา และยืนยันว่ามันกล่าวสิ่งเดียวกันกับภาษาอังกฤษทุกประการ

สิ่งที่ส่งมอบ

คู่ EN/ES ของบล็อกจริงพร้อมบันทึกการแปล: สำหรับแต่ละบรรทัดที่มีความเสี่ยง (Not X / passive-reflexive / modifier ที่ตกหล่น) มีการตัดสินใจที่บันทึกไว้ว่ารักษาความหมายไว้อย่างไร ES ผ่านการอ่านแบบเจ้าของภาษาโดยไม่มีกลิ่นของคำแปล

ข้อคิดสำคัญ

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

ข้อผิดพลาดที่ควรเลี่ยง

  • ×การสะท้อนคำศัพท์: 'Not X' → 'Sin X' เปลี่ยนการเปรียบเทียบให้กลายเป็นการขาดหายที่ภาษาอังกฤษไม่ได้ระบุ
  • ×ปล่อยให้ passive ของอังกฤษกลายเป็น reflexive ของสเปนและเลื่อนผู้กระทำหรือความรับผิดชอบที่แฝงอยู่
  • ×สูญเสีย modifier หรือกริยาในการถ่ายโอนและทำให้พลังของคำกล่าวราบเรียบโดยไม่รู้ตัว
  • ×ตรวจสอบโดยเทียบทีละคำกับ EN แทนที่จะอ่าน ES เหมือนเจ้าของภาษา การสะท้อนคำศัพท์ผ่านการทดสอบนั้นได้แต่ก็ยังโกหกอยู่ดี
BS-05

สีและมิติความลึก

บทเรียน

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

สีและความลึกคือจุดที่พื้นผิว minimalist จะได้ชีวิตชีวาหรือพังลง glass แถบสี และสนามสีพื้นหลังสามารถทำให้หน้าที่แบนราบหายใจได้ หรือเปลี่ยนมันเป็นงานคาร์นิวัลที่ขัดกับ minimalism แบบสุดขั้วของ BS-01 ความแตกต่างระหว่างสองผลลัพธ์นี้ไม่ใช่รสนิยม แต่เป็นระบบ หากไม่มีกฎที่เขียนไว้ (เมื่อไรใช้ glass ความเข้มเท่าไร ความลึกของสนามเท่าไร อะไรเคลื่อนไหวและอะไรไม่) แต่ละหน้าจะด้นสด และทั้งชุดจะสูญเสียความสอดคล้อง ยังมีกับดักในการตรวจสอบที่ถูกบันทึกไว้ใน XNLAB: แอนิเมชันพื้นหลังจะหยุดชั่วคราวเมื่อแท็บไม่ได้ทำงาน ดังนั้นการอ่านค่า opacity จึงโกหก ความลึกที่มีแอนิเมชันต้องตรวจสอบด้วยภาพจับหน้าจอ ไม่ใช่ด้วยการอ่านค่า ชิ้นงานที่ส่งมอบคือระบบที่เขียนไว้: token, กฎ และตัวอย่างที่ใครก็ตามนำไปใช้ได้โดยไม่ต้องคิดค้นใหม่

บทเรียน

สีและความลึกให้ชีวิตชีวาได้เฉพาะภายในระบบเท่านั้น glass แถบสี และสนามสีที่ไม่มีกฎจะเสื่อมไปเป็นสัญญาณรบกวนที่ขัดกับ minimalism

ระบบถูกเขียนในรูปของ token และกฎ: เมื่อไรใช้ glass ความเข้มเท่าไร ความลึกของสนามเท่าไร อะไรเคลื่อนไหวและอะไรอยู่นิ่ง นำกลับมาใช้ซ้ำได้ ไม่ใช่ด้นสดทีละหน้า

ห้าม interpolate class สีแบบ dynamic (bg-${theme}) เด็ดขาด เพราะมันทำลาย JIT ของ Tailwind ธีมต้องประกาศเป็น entry ที่ชัดเจนในแผนที่ THEME

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

เกณฑ์คือ 'ชีวิตชีวาโดยไม่มีสัญญาณรบกวน' หากสนามสีหรือ glass ไม่ได้เพิ่มลำดับชั้นหรือการหายใจ มันก็เกินจำเป็น ความลึกรับใช้การอ่าน ไม่ใช่ถูกนำมาอวด

แบบฝึกหัด

ทำบัญชีทรัพยากรความลึกที่พื้นผิวใช้อยู่แล้ว (glass, แถบสี, blob, สนามสีพื้นหลัง) สำหรับแต่ละอย่าง เขียนกฎ: ใช้เมื่อไร ความเข้มเท่าไร รับใช้ลำดับชั้นใด เคลื่อนไหวหรือไม่ เปลี่ยนพวกมันให้เป็น token ที่มีชื่อ เรนเดอร์ตัวอย่างหนึ่งที่ใช้ระบบและอีกตัวอย่างที่ไม่ใช้ วางเทียบกัน เพื่อพิสูจน์ว่าเวอร์ชันที่ใช้ระบบให้ชีวิตชีวาโดยไม่เพิ่มสัญญาณรบกวน ตรวจสอบเลเยอร์ที่มีแอนิเมชันใดก็ตามด้วยภาพจับหน้าจอในแท็บที่ทำงานอยู่ ไม่ใช่ด้วยการอ่าน opacity (ซึ่งโกหกเมื่อแท็บอยู่ใน background) ยืนยันว่าไม่มีสีใดถูก interpolate ใน class แบบ dynamic

สิ่งที่ส่งมอบ

ระบบสีและความลึกที่บันทึกไว้: token ที่มีชื่อ + กฎการใช้ (เมื่อไร/ความเข้มเท่าไร/อะไรเคลื่อนไหว) + ตัวอย่างคู่ ใช้ระบบ / ไม่ใช้ระบบ ที่พิสูจน์ 'ชีวิตชีวาโดยไม่มีสัญญาณรบกวน' ตรวจสอบด้วยภาพจับหน้าจอ นำกลับมาใช้ซ้ำได้โดยทุกหน้าจอโดยไม่ต้องคิดค้นเกณฑ์ใหม่

ข้อคิดสำคัญ

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

ข้อผิดพลาดที่ควรเลี่ยง

  • ×ด้นสด glass แถบสี และสนามสีทีละหน้าโดยไม่มีกฎ ทำให้ทั้งชุดสูญเสียความสอดคล้องและ minimalism พังลง
  • ×interpolate class สีแบบ dynamic (bg-${theme}) และทำลาย JIT ของ Tailwind ทิ้งสไตล์ที่ไม่ถูก compile ไว้
  • ×ตรวจสอบความลึกที่มีแอนิเมชันด้วยการอ่าน opacity ใน DOM แอนิเมชันหยุดชั่วคราวเมื่อแท็บไม่ได้ทำงานและค่าที่อ่านได้โกหก ต้องจับภาพหน้าจอ
  • ×ใส่สนามสีหรือ glass ที่ไม่ได้เพิ่มลำดับชั้นหรือการหายใจ การประดับที่เพิ่มสัญญาณรบกวนและทรยศต่อ 'ชีวิตชีวาโดยไม่มีสัญญาณรบกวน'

กลุ่มดาวถัดไป

Ops & Security

วินัย