Mình nghĩ Design System Bible là tài liệu còn quan trọng hơn cả Visual Bible.

Vì:

• Visual Bible trả lời: Trông như thế nào?
• Design System Bible trả lời: Vì sao mọi thứ lại trông như vậy?

Đây là tài liệu mà sau này:

• UX Designer
• Product Designer
• Illustrator
• Animator
• Motion Designer
• Frontend Engineer

đều sẽ dùng chung.

Nếu làm đúng, 100 người thiết kế vẫn tạo ra cùng một Clarity World.

---

Design.

Không tồn tại.

Để.

Làm đẹp.

Design.

Không tồn tại.

Để.

Thể hiện.

Kỹ năng.

Design.

Tồn tại.

Để.

Giúp.

Con người.

Hiểu.

Nhanh hơn.

Nhẹ nhàng hơn.

Ấm áp hơn.

---

Không hỏi.

"Cái này đẹp chưa?"

Hỏi.

"Người dùng có thấy điều mình muốn họ thấy không?"

---

Mọi thành phần.

Đều phải giúp người dùng đi qua.

Cùng một hành trình.

Hmm...

↓

Wait...

↓

I see!

↓

Let's build.

Nếu UI không giúp hành trình này.

Nó không thuộc Clarity World.

---

Mọi sản phẩm.

Đều phải tạo ra.

4 cảm giác.

Safe

Mình không sợ sai.

---

Curious

Mình muốn khám phá.

---

Calm

Không bị áp lực.

---

Hopeful

Mình tin mình sẽ hiểu.

---

Bridge Style.

Không có.

Hình sắc.

Không có.

Góc nhọn.

---

Primary Shapes

○ Circle

⬭ Rounded Rectangle

🌉 Arch

🌿 Organic Curve

---

Không dùng.

Tam giác sắc.

Đa giác phức tạp.

---

Hình quan trọng nhất.

Không phải.

Circle.

Mà là.

Arch.

Vòm cầu.

Vì.

Arch.

Là hình học.

Của.

Bridge.

Nút bấm.

Card.

Dialog.

Window.

Đều nên mang.

Một chút.

Arch.

---

Không dùng.

Grid cứng.

Bridge Style.

Dùng.

Organic Grid.

Khoảng cách.

Đều.

Nhưng.

Không tạo cảm giác.

Máy móc.

---

Warm White

Natural Beige

Soft Wood

Stone Gray

---

🟢 Growth

🔵 Understanding

🟡 Curiosity

🟠 Exploration

🟣 Reflection

🔴 Care Needed

Không dùng.

Màu.

Để gây.

Stress.

---

Typography.

Không đọc.

Giống.

Báo cáo.

Nó đọc.

Giống.

Một cuốn sổ tay.

Headings

Rộng.

Ấm.

Thở.

Body

Dễ đọc.

Khoảng cách dòng lớn.

Không ép người đọc.

---

Icons.

Không mang tính kỹ thuật.

Không outline mỏng.

Không futuristic.

Icon.

Giống.

Được khắc.

Trên gỗ.

Ví dụ.

Bridge.

Leaf.

Book.

Lantern.

Seed.

Compass.

Notebook.

---

Animation.

Không nhằm.

Gây ấn tượng.

Animation.

Chỉ.

Thu hút.

Attention.

Ví dụ.

Một chiếc lá.

Khẽ rung.

↓

Người dùng.

Nhìn.

Theo.

---

Một Bridge.

Được hoàn thành.

↓

Hai đầu cầu.

Nhẹ nhàng.

Nối lại.

---

Không dùng.

Đỏ.

To.

ERROR.

Không dùng.

Success.

Lòe loẹt.

Feedback.

Giống.

Một người bạn.

Ví dụ.

❌

Wrong.

↓

🌱

"Let's look again."

---

❌

Failed.

↓

🌉

"One more bridge to build."

---

Không bao giờ.

Trống.

Một Empty State.

Luôn kể.

Một câu chuyện.

Ví dụ.

"Chưa có Bridge nào."

↓

Một cây cầu.

Đang xây dở.

---

Không dùng.

Progress Bar.

Thẳng.

Bridge Style.

Dùng.

Bridge Progress.

Ví dụ.

Một cây cầu.

Đang.

Được.

Lát.

Từng tấm gỗ.

Người dùng không thấy.

73%.

Họ thấy.

Bridge.

Đã nối.

Được.

Bao nhiêu.

---

Navigation.

Không gọi.

Dashboard.

Nó gọi.

Journey.

Ví dụ.

Library.

Garden.

Workshop.

Bridge Hall.

Reflection.

Không gọi.

Settings.

Analytics.

Management.

---

Card.

Không giống.

PowerPoint.

Card.

Giống.

Một.

Tấm gỗ.

Hoặc.

Một.

Tờ giấy.

Được.

Đặt.

Trên bàn.

Có thể.

Cầm lên.

Đọc.

---

AI.

Không nổi bật.

AI.

Không phải.

Hero.

AI.

Giống.

Một người bạn.

Ngồi cạnh.

Thỉnh thoảng.

Chỉ tay.

Vào.

Một điều.

Bạn chưa thấy.

---

Bridge Style.

Không tối ưu.

Cho người bình thường.

Bridge Style.

Tối ưu.

Cho tất cả.

Ví dụ.

• Màu không là nguồn thông tin duy nhất.
• Icon luôn có ý nghĩa rõ.
• Chữ đủ lớn.
• Animation không gây mệt.
• Tương phản vừa đủ.
• Không ép thao tác nhanh.

Một cây cầu tốt là cây cầu mà nhiều người có thể đi qua.

Điều này cũng đúng với thiết kế.

---

Một màn hình.

Chỉ được coi là.

Bridge Style.

Nếu trả lời được.

Có.

Cho tất cả.

1

Người dùng biết.

Điều gì.

Quan trọng nhất.

Trong 3 giây?

---

2

Có ít nhất.

Một chi tiết.

Khơi gợi.

Curiosity?

---

3

Có khiến người dùng.

Bớt lo.

Hơn.

Không?

---

4

Có giúp.

Hiểu.

Mà không cần.

Đọc nhiều?

---

5

Có làm người dùng.

Muốn quay lại?

---

Nếu chỉ còn.

Một quy tắc.

Đó sẽ là.

Design every screen as if you are helping someone cross a bridge.

Không kéo họ.

Không đẩy họ.

Chỉ làm.

Con đường.

Rõ hơn.

An toàn hơn.

Và đáng để bước tiếp.

---

Theo mình, Bridge Style không nên có Design System như Material Design hay Human Interface Guidelines.

Nó nên có:

Bridge Design Language (BDL).

Giống như Apple có Human Interface Guidelines.

Bridge World có:

Trong đó mọi thành phần đều được phân loại theo "vai trò trong hành trình":

• Lantern → giúp người dùng chú ý.
• Bridge → giúp người dùng tiến lên.
• Notebook → giúp người dùng suy nghĩ.
• Compass → giúp người dùng định hướng.
• Garden → thể hiện sự phát triển.
• Workshop → nơi thử nghiệm.
• Library → nơi lưu giữ những cây cầu đã xây.

Như vậy, ngay cả một button cũng không còn được gọi là "Primary Button".

Nó có thể được gọi là:

Bridge Button

Vì nhiệm vụ của nó là giúp người dùng bước sang bờ bên kia.

Theo mình, đó là một Design System đủ khác biệt để sau này, chỉ cần nhìn giao diện, người ta cũng biết:

"À... đây là Bridge Style."