- Framework UI mã nguồn mở giải quyết các vấn đề về tính đối xứng và tỷ lệ, với cấu trúc trong đó mọi yếu tố đều được suy ra từ tỷ lệ vàng
- Tự động hiệu chỉnh sự cân bằng thị giác và độ thoáng không gian trong nút, thẻ, ô nhập liệu, v.v. để duy trì tỷ lệ tự nhiên
- Thực hiện tính toán tỷ lệ chính xác đến mức subpixel dựa trên global scale factor nhằm tạo ra sự hài hòa nhất quán
- Thông qua bảng điều khiển màu mô-đun, có thể xem trước màu theo thời gian thực và điều chỉnh theme, đồng thời hỗ trợ các thiết lập chi tiết như typography, material, scaling, v.v.
- Ngay cả ở giai đoạn MVP, công cụ này vẫn mang lại chất lượng hình ảnh hoàn thiện cao, nên được chú ý như một công cụ nâng tầm độ hoàn thiện của thiết kế ban đầu
Tổng quan về LiftKit
- LiftKit là framework UI mã nguồn mở giải quyết vấn đề đối xứng
- Mục tiêu chính là tự động cân chỉnh sự cân bằng thị giác giữa các thành phần UI
- Đang ở giai đoạn “Extremely Early Access”, tức phiên bản thử nghiệm rất sớm
- Mọi tỷ lệ trong framework đều được suy ra từ tỷ lệ vàng (golden ratio), giúp mọi yếu tố như margin, cỡ chữ, bán kính bo góc, v.v. được render hài hòa
- Sử dụng một global scale factor duy nhất để tính toán tỷ lệ với độ chính xác đến mức subpixel
Thành phần chính và tính năng
- Thành phần button tự động hiệu chỉnh sự mất cân bằng về padding thị giác phát sinh khi có icon
- Điều chỉnh padding động theo cỡ chữ để giữ cân bằng trái phải
- Thành phần card cung cấp thuộc tính
opticalCorrection để hiệu chỉnh sự mất cân bằng khoảng trắng do line-height của nội dung gây ra
- Trường nhập liệu (Input) được thể hiện với thiết kế khoảng cách dựa trên tỷ lệ vàng, tạo cảm giác “có không gian để thở”
Tỷ lệ và cảm giác thỏa mãn thị giác
- LiftKit sử dụng một hệ tỷ lệ được suy ra từ một scale factor duy nhất để tạo ra các tỷ lệ “oddly-satisfying”
- Mọi thành phần đều được tính toán với độ chính xác subpixel (subpixel accuracy), giảm thiểu các mất cân bằng thị giác nhỏ
- Cách tiếp cận này mang lại cho người dùng một “cảm giác tự nhiên và hài hòa” khó diễn tả
Kiểm soát màu sắc và theme
- LiftKit cung cấp bảng điều khiển màu mô-đun (modular control panel)
- Có thể thêm vào tệp đang làm việc để xem trước màu theo thời gian thực
- Hỗ trợ nhiều kiểu điều chỉnh, từ thay đổi sắc độ tinh tế đến phủ màu mạnh
- Ngoài màu sắc, có thể điều chỉnh trực tiếp trong CSS các mục sau
- Typography: kiểm soát typography toàn cục chi tiết vượt ra ngoài font family
- Custom Materials: tạo material mới dựa trên preset như glass, flat, rubber
- Scaling: không chỉ văn bản mà cả khoảng cách và toàn bộ yếu tố cũng được scale cùng nhau
- Component-specific configs: có thể điều chỉnh ngoại hình của từng thành phần một cách độc lập
Chi tiết tinh chỉnh và chất lượng thiết kế
- LiftKit được thiết kế để mang lại chất lượng hình ảnh hoàn thiện cao ngay cả ở giai đoạn MVP
- “Make MVP’s that don’t look like MVP’s”
- Mặc định cung cấp khoảng cách chính xác theo cảm nhận (perceptually accurate spacing), tối đa hóa cảm giác cân bằng mà người dùng cảm nhận được
- Những chi tiết tinh chỉnh này tạo ra kết quả “khó giải thích nhưng trông đẹp hơn”
3 bình luận
Trang landing page có phần so sánh trước và sau, nhưng cả hai bên đều trông khá ổn ..
Thường thì người ta dùng major second (1.125) thay vì tỷ lệ vàng, đúng không..?
Ý kiến trên Hacker News
Khi thiết kế Chrome, chủ nghĩa tối giản là cốt lõi
Thời đó màn hình còn nhỏ, nên đã dành rất nhiều thời gian để giảm không gian theo chiều dọc
Nếu giải thích tỷ lệ giữa dải tab, thanh công cụ và thanh tiêu đề là tỷ lệ vàng thì sẽ bớt tranh cãi hơn, nhưng thực ra hoàn toàn không phải tỷ lệ vàng
Những yếu tố như ánh sáng, màu sắc, bo góc, cường độ thị giác quan trọng hơn nhiều
Thực ra chỉ cần chỉnh một chút là cái gì cũng có thể khớp với tỷ lệ vàng. Kiểu này đặc biệt hiệu quả với những người thích cảm giác “tâm linh”
Đến giờ dù màn hình đã lớn hơn, tôi vẫn không muốn lãng phí không gian
Cuối cùng có vẻ vẫn là vấn đề gu thẩm mỹ
Với ấn phẩm in thì hữu ích, nhưng trong môi trường số lại làm giảm khả năng đọc
Việc cố ép icon về cùng một hình dạng hoặc bỏ màu sắc cũng làm giảm khả năng phân biệt
Tôi là tác giả của LiftKit
Dự án này vẫn còn ở giai đoạn rất sớm, và tôi đang làm một mình như sở thích cá nhân
Mã nguồn mở và miễn phí → liên kết GitHub
Phần lớn phản hồi đã được thảo luận trong chuỗi Reddit
Hiện tại ưu tiên là xây dựng lại bằng Radix primitives và cải thiện tài liệu
Có thể xem tổng quan trong video YouTube
Việc thực sự hiện thực hóa “hệ thống thiết kế nhất quán hoàn hảo” mà phần lớn lập trình viên frontend mơ ước đã là điều đáng nể
Khó mà tin tưởng một framework UI không thể render component ngay trong tài liệu của chính nó
Tôi từng thử áp dụng tỷ lệ vàng cho app iOS, nên muốn bạn chia sẻ quy trình thực hiện
Khi đưa ảnh chụp màn hình trước và sau, tốt hơn là cho chuyển đổi tức thì bằng nút bấm thay vì thanh trượt kéo
Mỗi lần bấm, mắt sẽ trực tiếp nhận ra khác biệt
Tham khảo liên quan: câu trả lời trên Quora của Andrei Herasimchuk
Cứ định kéo sang trái phải là nó lại trượt lên xuống. Cảm ơn phản hồi, tôi chắc chắn sẽ sửa
Video ví dụ: LUTLab Viewer
Ban đầu tôi tưởng trang này là bản nhại
Thật bất ngờ khi nó là thật, và các thành phần trông như lệch tâm, trọng lượng thị giác cũng có vẻ mất cân đối
Trên thực tế phải chỉnh từng vài pixel thì mới tự nhiên với mắt người
Về “optical correction none/top”, tôi tò mò không biết có phải bạn đo trực tiếp chiều cao chữ in hoa để căn chỉnh hay chỉ dùng nguyên font metrics
Rất khó tin vào các số liệu nội bộ của font, vì glyph thực tế lại không tuân theo các số đó
Đây chính là kiểu vấn đề biến công việc với font chữ thành cơn ác mộng
Rất khó tin tưởng một framework UI mà mọi component đều chỉ được hiển thị bằng hình ảnh
Tôi tìm giá thì chỉ thấy “Contact Sales”, rồi phải dùng ngay công cụ tính giá
Tính với 10 trang cấp cao nhất + 5 trang cấp dưới thì ra $16,500, khá sốc
Có phải bạn là người đã gửi form bằng “FUCK_YOU@DUMB.COM” không?
Có một điểm mà phần lớn thư viện UI đều bỏ lỡ
Khi các khối bo góc lồng vào nhau, cần cộng thêm border-radius đúng bằng khoảng cách
Nếu không sẽ luôn để lại cảm giác lệch về mặt thị giác
Ví dụ: component Snackbar, ảnh chụp bố cục tab Chrome
Cũng có nghiên cứu liên quan → liên kết bài báo PMC)
Trong phần mô tả LiftKit có câu “mọi yếu tố đều được dẫn xuất từ tỷ lệ vàng để tạo nên sự hài hòa hoàn hảo”, nhưng tôi không rõ đó là mỉa mai hay nghiêm túc
Có cảm giác tồn tại sự hài hòa mang tính cảm quan vượt lên trên lý thuyết