B-DNA · Ứng dụng đời thực
Ngân hàng số cá nhân, dựng từ B-DNA.
Đây là bản demo giao diện của một app ngân hàng số — minh hoạ cách B-DNA (cấu trúc, màu sắc, typography, component, khoảng cách, chuyển động, phân cấp) biến thành một sản phẩm người dùng cầm trên tay. Hãy bấm thử ngay trong khung điện thoại: mở khoá → xem số dư → chuyển tiền 4 bước → xác nhận thành công. Bảng bên phải mô tả luồng đang diễn ra và ánh xạ từng màn hình về quy tắc B-DNA tương ứng.
⚠️ Chỉ UI & flow. Toàn bộ dữ liệu là giả lập, không có backend — không tài khoản, không tiền thật, không gọi API.// luồng đang diễn ra
Luồng người dùng (User Flow)
Bấm trong khung điện thoại để đi qua các bước. Bước hiện tại được tô sáng theo thời gian thực — đây chính là “bản đồ” thao tác của một app ngân hàng số.
- Mở khoáPIN 4 số hoặc sinh trắc học. Bảo mật trước, nội dung sau.
- Trang chủSố dư nổi bật + 4 hành động nhanh + giao dịch gần đây.
- Chuyển tiền · 3 bướcChọn người nhận → nhập số tiền → xác nhận. Mỗi bước một quyết định.
- Thành côngPhản hồi rõ ràng, tích xanh, lối ra về trang chủ.
- Thẻ & lịch sửQuản lý thẻ (đóng băng tức thì) và tra cứu giao dịch.
// vì sao nó trông “thuộc về” sản phẩm
Ánh xạ về B-DNA
Mỗi quyết định thiết kế ở đây đến thẳng từ một quy tắc B-DNA — không có màu hay token mới nào được tạo ra.
Cấu trúc
Mỗi màn = một stack section có biên rõ; thẻ là primitive chính, không bảng dày đặc.
Màu sắc
Một primary cho hành động chính; ~90% là neutral. Đọc từ --c-accent, --c-bg-*.
Typography
Một font kế thừa site; phân cấp bằng size + weight; số dùng tabular-nums.
Component
Button · field · card · toggle tái dùng; mỗi màn chỉ một CTA primary.
Khoảng cách
Mọi padding/gap bước trên thang 4px; bo góc cùng họ ~11–16px.
Chuyển động
Chuyển màn 150–260ms, tích thành công “pop” nhẹ; tôn trọng reduced-motion.
Phân cấp
Số dư & số tiền lớn nhất; nhãn định hướng; đơn vị thì thầm.
Phạm vi
Toàn bộ scope dưới .nbk; không đụng nav/header/footer hay token global.