Thiết kế hệ giao diện số
Khi thương hiệu có nhiều sản phẩm số, mỗi đội tự dựng giao diện một kiểu. Sinh Vũ biến nhận diện thành một nguồn chuẩn duy nhất cho cả người thiết kế lẫn lập trình viên.
Chúng tôi đã có brand guideline rồi, vì sao còn cần Hệ Thiết kế Số?
Brand guideline là tài liệu để con người đọc, còn Hệ Thiết kế Số là phiên bản máy đọc được của cùng nhận diện đó. Guideline cho biết thương hiệu nên trông thế nào, Hệ Thiết kế Số đảm bảo nó luôn đúng vậy trên mọi màn hình khách thấy. Đổi một token màu ở nguồn gốc, toàn bộ website, ứng dụng và component cập nhật theo, không sót chỗ nào.
Thương hiệu đẹp trên giấy vẫn loãng dần khi vào sản phẩm số, vì thiếu cơ chế thực thi tự động.
Các bước triển khai
Kiểm kê thành phần đang chạy
Gom mọi thành phần giao diện đang có, ghi chỗ dùng và tần suất, gom nhóm theo việc chúng làm.Anh chị duyệt: Duyệt kết quả kiểm kê, trong 3 ngày làm việc
Dựng nền
Chốt thang màu, thang chữ, thang khoảng cách và lưới, đây là thứ mọi thành phần sẽ đọc.Anh chị duyệt: Duyệt nền, trong 3 ngày làm việc
Thành phần mẫu đầu tiên
Dựng một thành phần mẫu đủ các trạng thái để đội thiết kế và đội lập trình cùng soát và cùng duyệt trước khi nhân ra.Anh chị duyệt: Hai đội cùng duyệt thành phần mẫu, trong 5 ngày làm việc
Dựng bộ thành phần
Dựng các thành phần còn lại theo lớp, mỗi thành phần đủ trạng thái và kèm tài liệu dùng khi nào, không dùng khi nào.Anh chị duyệt: Duyệt bộ thành phần, trong 5 ngày làm việc
Bàn giao và đào tạo
Bàn giao hệ và đào tạo đội của anh chị, nghiệm thu bằng cách đội lập trình dựng lại một màn mẫu chỉ bằng hệ.Anh chị duyệt: Nghiệm thu bàn giao, trong 5 ngày làm việc
Bao lâu thì anh chị có
Hai con số trên cộng lại mới là thời gian thật từ lúc khởi động tới lúc bàn giao. Phần anh chị giữ tính theo hạn duyệt của từng bước, duyệt sớm thì lịch rút lại.
Anh chị cần chuẩn bị gì
- Quyền vào tệp thiết kế và kho mã đang chạy.
- Một người của đội lập trình tham gia soát, đây là điều kiện bắt buộc chứ không phải mong muốn.
- Danh sách màn hình ưu tiên làm trước.
- Công cụ thiết kế và công cụ lập trình đội đang dùng.
Chuẩn bị sẵn những phần này giúp dự án chạy đúng lịch. Thiếu phần nào thì Sinh Vũ vẫn bắt đầu được, chỉ là mốc bàn giao lùi theo.
Anh chị nhận được gì
Mỗi tài liệu kèm định dạng file và lý do nó giúp ích cho Anh chị.
Một nguồn chuẩn duy nhất cho màu, font, khoảng cách, đổi một chỗ là cả hệ thống cập nhật theo.
Đội phát triển ghép giao diện từ component dựng sẵn thay vì code lại từ đầu.
Những tình huống giao diện phức tạp đã có lời giải chuẩn sẵn, không phải nghĩ lại mỗi lần.
Lập trình viên xem, thử và lấy code component ngay trên trình duyệt.
Người thiết kế và lập trình viên nhìn cùng một component, hết cảnh bản chạy khác bản vẽ.
Hệ thống tiến hóa có kiểm soát, mọi thay đổi có người đề xuất và người duyệt.
Được tin tưởng qua 17 năm
Hơn 200 thương hiệu trên 16 ngành đã tin Sinh Vũ tạo hình bản sắc.
Ba mức theo phân khúc
Sinh Vũ báo giá theo phạm vi và độ phức tạp của dự án, chốt trọn gói sau khi nghe brief, không phụ phí giữa chừng.
Chưa chắc mức nào hợp? Trao đổi 5 phút, Sinh Vũ gợi ý đúng mức →
- Rà soát toàn bộ giao diện số hiện có
- Bộ DTCG JSON tokens ba lớp, hỗ trợ sáng và tối
- Báo cáo điểm lệch chuẩn kèm mức độ ưu tiên
- Hướng dẫn tích hợp token vào dự án hiện tại
- Toàn bộ phần Nền tảng tokens
- Thư viện 40-80 component lõi đầy đủ trạng thái
- Tài liệu Storybook tương tác
- Figma Code Connect đồng bộ một đổi một
- Toàn bộ phần Hệ thống đầy đủ
- Quy trình quản trị RFC cho mọi thay đổi
- Bộ chỉ số đo mức độ áp dụng theo từng đội
- Bảo trì 15-30% phí dự án mỗi năm
Trước khi gửi brief về Thiết kế hệ giao diện số
Sinh Vũ trao đổi trước với đội kỹ thuật của anh chị hoặc bên phát triển để nắm công nghệ đang dùng, ví dụ nền tảng web hay ứng dụng di động cụ thể, trước khi định hình token (các giá trị thiết kế chuẩn hóa như màu sắc, khoảng cách, cỡ chữ) và component (khối giao diện dùng lại nhiều nơi, như nút bấm, ô nhập liệu). Kết quả bàn giao được dựng theo cách đội lập trình đọc và ráp vào code được ngay, không phải một bộ file thiết kế đẹp nhưng dev phải tự suy diễn.
Được, nhưng Sinh Vũ cần thống nhất trước những nền tảng cơ bản như màu, font, khoảng cách trước khi dựng component, nếu không hệ thống sẽ thiếu gốc để bám. Với trường hợp này Sinh Vũ thường đề xuất làm gọn phần quy chuẩn nhận diện song song, để hệ thiết kế số không phải đoán.
Mục tiêu của hệ thiết kế số là để đội anh chị tự thêm màn hình, tự dùng component có sẵn mà không cần hỏi lại Sinh Vũ từng chi tiết nhỏ. Sinh Vũ bàn giao kèm tài liệu quy tắc sử dụng, và có thể hỗ trợ đào tạo nhanh cho đội thiết kế hoặc lập trình nội bộ nếu anh chị cần.
Không khóa. File được dựng trên công cụ thiết kế phổ biến và token xuất ra ở định dạng chuẩn mà công cụ dựng web, ứng dụng thông thường đọc được. Đội của anh chị hoàn toàn có thể tiếp tục chỉnh sửa mà không cần quay lại Sinh Vũ.
Hệ thiết kế số được xây với tư duy component và token ngay từ đầu, chứ không phải vẽ giao diện đẹp rồi mới nghĩ cách chuyển sang code. Đây là lý do bước trao đổi với đội kỹ thuật của anh chị luôn có trước khi bắt tay dựng hệ thống, để hai bên nói cùng một ngôn ngữ.
Số lượng component, màn hình và mức độ phức tạp của sản phẩm số mỗi doanh nghiệp khác nhau rất nhiều, nên một bảng giá chung sẽ không phản ánh đúng khối lượng thật. Sinh Vũ tư vấn báo giá sau khi đã nắm rõ phạm vi sản phẩm và nền tảng kỹ thuật anh chị đang dùng.
Thời gian phụ thuộc vào quy mô sản phẩm, số lượng component cần chuẩn hóa và việc doanh nghiệp đã có quy chuẩn nhận diện hay chưa. Mốc thời gian cụ thể được thống nhất khi báo giá, dựa trên phạm vi thật đã trao đổi.
Phần token và nguyên tắc thiết kế gốc không gắn chặt với một công nghệ cụ thể nên vẫn dùng lại được. Phần cần làm lại chỉ là cách hiện thực hóa component sang công nghệ mới, việc này thường nhẹ hơn nhiều so với dựng hệ thống từ số không.
Bắt đầu dịch vụ Thiết kế hệ giao diện số
Gửi vài dòng về nhu cầu, Sinh Vũ phản hồi trong ngày làm việc.