LiftKit - เฟรมเวิร์ก UI สำหรับคนที่พิถีพิถันกับความสมบูรณ์แบบ

• เฟรมเวิร์ก UI โอเพนซอร์สที่แก้ปัญหาเรื่องความสมมาตรและสัดส่วน โดยมีโครงสร้างที่ทุกองค์ประกอบต่อยอดมาจากอัตราส่วนทองคำ
• ปรับสมดุลภาพลักษณ์และพื้นที่ว่างของปุ่ม การ์ด ช่องกรอกข้อมูล ฯลฯโดยอัตโนมัติ เพื่อคงสัดส่วนที่ดูเป็นธรรมชาติ
• คำนวณสัดส่วนอย่างแม่นยำในระดับซับพิกเซลโดยอิงจาก global scale factor เพื่อสร้างความกลมกลืนที่สม่ำเสมอ
• ปรับแต่งธีมและดูตัวอย่างสีแบบเรียลไทม์ได้ผ่าน แผงควบคุมสีแบบโมดูลาร์ พร้อมรองรับการตั้งค่ารายละเอียด เช่น typography, material และ scaling
• เป็นเครื่องมือที่น่าจับตาสำหรับยกระดับคุณภาพงานออกแบบตั้งแต่ระยะเริ่มต้น ด้วย คุณภาพงานภาพที่สมบูรณ์สูง แม้อยู่ในขั้น MVP

---

ภาพรวมของ LiftKit

• LiftKit คือ เฟรมเวิร์ก UI โอเพนซอร์สที่แก้ปัญหาความสมมาตร
  • เป้าหมายหลักคือปรับสมดุลทางสายตาระหว่างองค์ประกอบ UI โดยอัตโนมัติ
  • อยู่ในขั้น “Extremely Early Access” ซึ่งเป็นเวอร์ชันทดลองระยะเริ่มต้น
• สัดส่วนทั้งหมดของเฟรมเวิร์กต่อยอดมาจาก อัตราส่วนทองคำ (golden ratio) ทำให้องค์ประกอบทุกอย่าง เช่น margin, ขนาดฟอนต์ และรัศมีขอบ ถูกเรนเดอร์อย่างกลมกลืน
• ใช้ global scale factor เพียงค่าเดียวในการคำนวณสัดส่วนด้วยความแม่นยำระดับซับพิกเซล

องค์ประกอบหลักและฟีเจอร์

• คอมโพเนนต์ปุ่ม จะชดเชยความไม่สมดุลของ padding ทางสายตาที่เกิดขึ้นเมื่อมีไอคอนรวมอยู่ด้วยโดยอัตโนมัติ
  • ปรับ padding แบบไดนามิกตามขนาดฟอนต์เพื่อรักษาสมดุลซ้ายขวา
• คอมโพเนนต์การ์ด มีพร็อพ opticalCorrection สำหรับชดเชยความไม่สมดุลของพื้นที่ว่างที่เกิดจาก line-height ของคอนเทนต์
• ช่องกรอกข้อมูล (Input) ถูกออกแบบระยะห่างบนพื้นฐานอัตราส่วนทองคำ เพื่อให้ดูเหมือนมี “พื้นที่ให้หายใจ”

สัดส่วนและความพึงพอใจทางสายตา

• LiftKit ใช้ระบบสัดส่วนที่ต่อยอดจาก scale factor เดียว เพื่อสร้างสัดส่วนแบบ “oddly-satisfying”
• ทุกคอมโพเนนต์ถูกคำนวณด้วย ความแม่นยำระดับซับพิกเซล (subpixel accuracy) เพื่อลดความไม่สมดุลทางสายตาเล็กๆ น้อยๆ ให้เหลือน้อยที่สุด
• แนวทางนี้มอบความรู้สึก “เป็นธรรมชาติและกลมกลืน” ที่ผู้ใช้มักอธิบายออกมาได้ยาก

การควบคุมสีและธีม

• LiftKit มี แผงควบคุมสีแบบโมดูลาร์ (modular control panel)
  • เพิ่มเข้าไปในไฟล์ระหว่างทำงานเพื่อ ดูตัวอย่างสีแบบเรียลไทม์ ได้
  • รองรับการปรับแต่งได้ตั้งแต่การเปลี่ยนเฉดสีเล็กน้อยไปจนถึงการเติมสีแบบเข้มข้น
• นอกจากสีแล้ว ยังสามารถปรับรายการต่อไปนี้ได้โดยตรงใน CSS
  • Typography: ควบคุม typography ระดับโกลบอลได้อย่างละเอียดมากกว่าการเลือก font family
  • Custom Materials: สร้าง material แบบใหม่จากพรีเซ็ต เช่น glass, flat, rubber
  • Scaling: ปรับสเกลทั้งองค์ประกอบโดยรวม รวมถึงระยะห่าง ไม่ใช่แค่ข้อความ
  • Component-specific configs: ปรับรูปลักษณ์ของแต่ละคอมโพเนนต์แยกกันได้อย่างอิสระ

รายละเอียดที่ประณีตและคุณภาพงานออกแบบ

• LiftKit ถูกออกแบบมาเพื่อสร้าง คุณภาพงานภาพที่สมบูรณ์สูงแม้อยู่ในขั้น MVP
  • “Make MVP’s that don’t look like MVP’s”
• โดยพื้นฐานแล้วจะมอบ ระยะห่างที่แม่นยำในเชิงการรับรู้ (perceptually accurate spacing) เพื่อเพิ่มความรู้สึกสมดุลที่ผู้ใช้รับรู้ได้สูงสุด
• รายละเอียดเล็กๆ เหล่านี้ทำให้เกิดผลลัพธ์แบบ “อธิบายยาก แต่ดูดีกว่า”

[roxie]

ในหน้า Landing Page มีการเปรียบเทียบก่อนและหลัง แต่ทั้งสองแบบก็ดูดีนะ ..

[heal9179]

ปกติแล้วมักจะใช้เมเจอร์เซคันด์ (1.125) มากกว่าอัตราส่วนทองคำไม่ใช่เหรอครับ..?

[GN⁺]

ความคิดเห็นจาก Hacker News

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

  • มีมีมด้านดีไซน์ที่ฉันชอบมาก คือทำโลโก้เสร็จแล้วค่อยเอา รูปทรงอัตราส่วนทองคำ มาซ้อนทีหลัง พร้อมบอกว่าเป็น “ผลลัพธ์จากการครุ่นคิดอย่างลึกซึ้ง”
    จริง ๆ แค่ขยับนิดหน่อยก็ทำให้แทบทุกอย่างดูเข้ากับอัตราส่วนทองคำได้ เรื่องแบบนี้มักโดนใจคนที่ชอบอารมณ์แบบ ‘จิตวิญญาณ’ เป็นพิเศษ
  • ฉันชอบ มินิมัลลิสม์ ของ Chrome ยุคก่อนมาก
    ถึงตอนนี้หน้าจอจะใหญ่ขึ้นแล้ว ฉันก็ยังไม่อยากใช้พื้นที่อย่างสิ้นเปลือง
  • น่าขันตรงที่เว็บไซต์ที่ยกมาเป็นตัวอย่างอัตราส่วนทองคำ มักดีไซน์ออกมาแย่กว่าตัวที่เอามาเทียบเสียอีก
    สุดท้ายคงเป็นเรื่องของ รสนิยม
  • แนวคิดอย่าง “vertical rhythm” หรือ “modular scale” บนเว็บแทบจะเป็น ความเชื่อไร้สาระ
    มันมีประโยชน์กับงานพิมพ์ แต่ในดิจิทัลกลับทำลายความอ่านง่ายเสียมากกว่า
    การฝืนทำให้ไอคอนมีรูปทรงเหมือนกันหรือเอาสีออก ก็ยิ่งลด ความสามารถในการแยกแยะ
  • ยังมีมุกว่า “อัตราส่วนทองคำคือเพื่อนที่เราเจอระหว่างทาง” ด้วย

• ฉันคือผู้สร้าง LiftKit
  โปรเจกต์นี้ยังอยู่ใน ช่วงเริ่มต้นมาก ๆ และทำคนเดียวเป็นงานอดิเรก
  เป็นโอเพนซอร์สและใช้ฟรี → ลิงก์ GitHub
  ฟีดแบ็กส่วนใหญ่กำลังคุยกันอยู่ใน เธรด Reddit
  ตอนนี้กำลัง สร้างใหม่บน Radix primitives และให้ความสำคัญกับ การปรับปรุงเอกสาร เป็นอันดับแรก
  ดูภาพรวมได้ใน วิดีโอ YouTube

  • คิดว่าโปรเจกต์นี้เจ๋งมาก คำวิจารณ์ก็เป็น ฟีดแบ็กแบบมืออาชีพ จนควรรับเป็นคำชมด้วยซ้ำ
    การทำ “ดีไซน์ซิสเต็มที่สอดคล้องกันอย่างสมบูรณ์” ซึ่งเป็นสิ่งที่นักพัฒนาฝั่งฟรอนต์เอนด์ส่วนใหญ่ฝันถึง ให้เกิดขึ้นได้จริงนั้นน่าทึ่งมาก
  • ใน Reddit เมื่อ 7 เดือนก่อนบอกว่า “การเรนเดอร์คอมโพเนนต์คือสิ่งถัดไปที่สำคัญ” แต่ตอนนี้กลับไม่พูดถึงแล้ว
    UI framework ที่เรนเดอร์คอมโพเนนต์ในเอกสารของตัวเองไม่ได้ นั้นเชื่อถือได้ยาก
  • ไอเดียดี และหน้าโฮมเพจก็ให้ความรู้สึก น่าพึงพอใจทางสายตา
    ฉันเคยลองใช้อัตราส่วนทองคำกับแอป iOS เลยอยากให้แชร์กระบวนการทำด้วย
  • แทนที่จะใช้ Radix ลองดู Base UI หรือ React Aria ด้วยก็ดีนะ
  • ในภาพเปรียบเทียบ คุณทำเฟรมเวิร์กคู่แข่งให้ คอนทราสต์ต่ำแบบจงใจ ซึ่งไม่ยุติธรรม

• เวลาแสดงภาพหน้าจอแบบก่อน-หลัง น่าจะใช้การสลับทันทีด้วยปุ่มแทน ตัวเลื่อนแบบลาก จะดีกว่า
  เวลาคลิก ดวงตาจะรับรู้ความต่างได้โดยตรง
  อ้างอิงที่เกี่ยวข้อง: คำตอบใน Quora ของ Andrei Herasimchuk

  • ในฐานะคนทำเอง ฉันก็มองว่าตัวเลื่อนตอนนี้ แย่มากบนหน้าจอสัมผัส
    พอพยายามเลื่อนซ้ายขวากลับไถลขึ้นลง ขอบคุณสำหรับฟีดแบ็ก เดี๋ยวจะแก้แน่นอน
  • สำหรับการเทียบรูปภาพ ตัวเลื่อนถือเป็นมาตรฐานก็จริง แต่สามารถปรับปรุงได้ด้วยการใส่ ป้ายกำกับซ้าย-ขวา และให้คลิกเพื่อแสดงต้นฉบับชั่วคราว
    วิดีโอตัวอย่าง: LUTLab Viewer
  • ตอนแรกฉันก็สับสนเหมือนกันว่าฝั่งไหนคือ LiftKit
  • มันให้ความรู้สึกเหมือนเกม “ฝั่งไหนดูดีกว่า?”
  • ถ้าใส่ป้าย “material-style” กับ “liftkit” ไว้ในแต่ละภาพ แล้วให้ถูกบังตามการเลื่อนสไลเดอร์ ก็น่าจะชัดเจนขึ้น

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

  • ฉันเองก็คิดทุกครั้งว่า ‘อันนี้ดีกว่า’ แต่พอดูจริง ๆ กลับเป็นฝั่ง ก่อนหน้า (before) ทุกที
  • สัดส่วนที่สมบูรณ์แบบทางคณิตศาสตร์ ไม่ได้แปลว่าจะดูดีเสมอไป
    ในทางปฏิบัติต้องขยับทีละไม่กี่พิกเซลถึงจะดูเป็นธรรมชาติกับสายตา
  • โดยรวมแล้วมีอะไรบางอย่างดูเพี้ยน ๆ
  • สัดส่วน 1.618 ให้ระยะห่างที่ใหญ่เกินไปสำหรับงานออกแบบจริง

• เรื่อง “optical correction none/top” อยากรู้ว่าคุณวัดความสูงของตัวพิมพ์ใหญ่โดยตรงเพื่อจัดให้ตรงกัน หรือใช้ font metrics ตามเดิม
  ตัวเลขภายในฟอนต์เชื่อถือยาก และ glyph จริงก็มักไม่ทำตามตัวเลขนั้น
  เรื่องแบบนี้แหละที่ทำให้ งานฟอนต์กลายเป็นฝันร้าย

• ยากจะเชื่อถือ UI framework ที่โชว์ทุกคอมโพเนนต์เป็นแค่รูปภาพ

  • ลองกด dropdown แล้ว แต่กลับ ไม่มีแม้แต่รูปภาพ
  • อาจเป็นเพราะถ้าเปิดเผย CSS จริง คนก็จะก๊อปได้ เลยต้องปกป้อง ‘โค้ดอัตราส่วนทองคำลับ’ ไว้
  • ยังให้ความรู้สึกว่าควรจ้างผู้เชี่ยวชาญมาช่วย
  • ตอนเลื่อนหน้าใน Firefox มี เฟรมดรอป
  • การที่ UI ไม่ได้เรนเดอร์เองโดยตรง แต่พึ่งพา React หรือ Next.js ทำให้รู้สึกว่า ไม่เหมาะจะเรียกว่า UI kit

• ฉันลองหาดูราคา แต่เจอแค่ “Contact Sales” แล้วต้องไปใช้เครื่องคิดเลขทันที
  พอคำนวณเป็น 10 หน้าหลัก + 5 หน้าย่อย ก็ออกมาเป็น $16,500 จนน่าตกใจ

  • นั่นคือ เครื่องคิดเลขสำหรับบริการเอเจนซี LiftKit เองใช้ฟรี
    คนที่ส่งฟอร์มด้วย “[e-mail]” นั่นคุณหรือเปล่า?
  • ใช่แล้ว จริง ๆ มันเป็น ไลบรารีโอเพนซอร์ส และใช้ฟรีได้

• มีจุดหนึ่งที่ไลบรารี UI ส่วนใหญ่มักพลาด
  เวลาที่ กล่องมุมโค้งถูกซ้อนกันหลายชั้น ควรเพิ่ม border-radius ตามระยะห่างด้วย
  ไม่อย่างนั้นจะเหลือความรู้สึก เพี้ยนทางสายตา อยู่
  ตัวอย่าง: คอมโพเนนต์ Snackbar, ภาพหน้าจอเลย์เอาต์แท็บ Chrome

• มีงานวิจัยที่เกี่ยวข้องด้วย → ลิงก์บทความ PMC)

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

  • แต่พอเปิดหน้าเว็บมา ปุ่มก็ดู น่าพึงพอใจทางสายตา แบบแปลก ๆ ทันที
    เหมือนจะมี ความกลมกลืนเชิงสัมผัส บางอย่างที่มากกว่าทฤษฎี