Lưu
Cập nhật km
Huỷ
Đã thay rồi
Xoá xe
Mọi câu hỏi trong app này đều là “còn bao xa nữa?” — và khoảng cách thì thẳng. Nên bản thiết kế này bỏ vòng cung, bỏ nền loang màu, và dựng lại toàn bộ quanh một thanh đo có vạch mốc: thứ duy nhất kể được cả “đã đi bao nhiêu”, “còn bao nhiêu”, và “bắt đầu nhắc từ đâu” trong cùng một hình.
Ba quyết định gốc, mỗi cái giải một vấn đề cụ thể của bản cũ: màu thương hiệu phải nằm xa ba màu trạng thái nên chọn indigo (teal cũ quá gần “còn nhiều”); chữ hẹp kiểu công-tơ-mét để số km lớn mà không chiếm hết màn; và xám lệch xanh thay xám thuần, để nền không bao giờ trông như trang giấy chưa vẽ xong.
#4340E6 → #6F6BFF#E9E8FF → #221F60chữ #12855C · tô #17A86Fchữ #96620A · tô #E8A317chữ #C93434 · tô #E14343#7B8195 → #7E86A0#F4F5F9 → #0A0C12#11131C → #F1F3FANửa trái ô là màu chữ, nửa phải là màu mảng tô. Chúng phải khác nhau: chữ cần sẫm để đọc được trên nền mềm, còn thanh đo cần tươi để nhìn ra từ xa. Dùng chung một giá trị thì hoặc chữ mờ, hoặc thanh đo ra màu nâu bùn — đã thử cả hai.
Trạng thái đã chiếm hết xanh lá, hổ phách và đỏ. Màu thương hiệu đứng trong ba dải đó thì mọi nút bấm đều trông như một lời cảnh báo. Indigo là dải rộng còn trống duy nhất còn đủ tương phản để làm nút chính trên cả nền sáng và nền tối.
Công-tơ-mét thật dùng chữ số hẹp vì phải nhồi 6 chữ số vào một ô bé. App này cũng vậy: “14.320 km” ở cỡ 62px mà vẫn vừa một dòng trên máy 390px — chữ thường phải hạ xuống 44px mới vừa, và mất luôn cảm giác “đây là con số quan trọng nhất màn hình”.
| Thứ | Giá trị | Dùng ở đâu |
|---|---|---|
| Bo thẻ | 18px | Thẻ, nhóm dòng, ô công-tơ-mét |
| Bo ô nhập / nút | 14px | Nút, ô nhập, phím số, segmented |
| Bo icon nền | 10px | Ô 34×34 sau icon hạng mục |
| Bo sheet | 26px | Chỉ hai góc trên của bottom sheet |
| Viên thuốc | 999px | Chip, huy hiệu trạng thái, thanh đo |
| Thanh đo | 6px / 11px | 6 trong dòng hạng mục, 11 ở khối chính |
| Vạch mốc nhắc trước | 2px, cao +6px | Chồm ra ngoài thanh đo cả hai đầu |
| Nhịp lề | 4 · 8 · 12 · 16 · 22 | Không có giá trị nào ngoài dãy này |
| Chiều cao chạm | ≥ 44px | Mọi thứ bấm được, kể cả chip 36px + lề |
| Độ nổi | 2 mức | Thẻ (nhẹ) và sheet/máy (sâu). Không có mức ba. |
Toàn bộ app dựng từ chín thứ dưới đây. Không có thành phần nào tồn tại chỉ để trang trí — mỗi cái mang một mẩu thông tin mà thiếu nó user phải tự đoán.
Cái vạch xám mảnh chồm ra hai đầu thanh là mốc “bắt đầu nhắc”. Nhìn nó, user hiểu ngay vì sao app kêu — chứ không phải app tự nhiên kêu. Ở dòng “Dầu máy” trên, phần tô đã vượt qua vạch: đó là toàn bộ lời giải thích, không cần một câu chữ nào.
Bốn tab: Trang chủ · Xe · Lịch sử · Cài đặt. Mỗi tab trả lời đúng một câu và không tab nào lặp nội dung của tab khác — đây là chỗ bản cũ vỡ nặng nhất, khi Trang chủ và Xe cùng in một danh sách hạng mục.
Bản cũ chia việc này thành wizard ba bước. Gộp lại một màn, vì cả ba bước cộng lại chỉ có bốn ô nhập — chia bước chỉ thêm ba lần bấm “Tiếp”.
Chu kỳ mặc định khác nhau theo loại xe (xe máy 1.500 km/dầu máy, ô tô 5.000 km) — bản cũ dùng một bộ số chung cho cả hai, và số đó sai với một nửa người dùng.
Câu hỏi duy nhất: “có việc gì phải làm không, và làm cái nào trước?” Trả lời bằng thứ tự, không bằng biểu đồ.
Cần làm ngay · 2 việc. Nhóm rỗng thì cả nhóm biến mất, không để lại một tiêu đề trống trơn.km hay ngày), chỉ thứ tự là chung. Tách giấy tờ thành nhóm riêng thì user phải tự so hai nhóm với nhau — đúng cái việc app nên làm hộ.Bỏ vòng cung 270°, bỏ nền loang aurora, bỏ nút tròn nổi. Cả ba đều là trang trí phải trả giá bằng diện tích — mà diện tích ở màn này đang thiếu.
Một người đi xe máy cập nhật số km vài lần mỗi tháng. Nó phải là thao tác rẻ nhất trong app: một lần bấm để mở, bốn lần bấm để gõ, một lần để lưu.
000 — số km ở Việt Nam luôn có bốn tới năm chữ số. Ba số 0 một nhát là phím được bấm nhiều thứ hai sau các chữ số.Đây là hành động app sống bằng nó. Nếu ghi một lần bảo dưỡng mất hơn ba mươi giây, user sẽ thôi ghi, và app thành vô dụng sau hai tháng.
* cho ô bắt buộc. Người không quen dùng app không biết dấu hoa thị nghĩa là gì.Chip “Khác…” mở ra ô đặt tên tự do, và mỗi tên là một hạng mục riêng có chu kỳ riêng. Nhờ vậy “Thay dây curoa”, “Vệ sinh kim phun”, “Thay má phanh” cùng tồn tại được — bản cũ chỉ có đúng một ô “Khác” duy nhất cho tất cả.
Bản cũ không có màn này. Hệ quả: chu kỳ, bật/tắt nhắc và lịch sử của từng hạng mục đều bị nhồi vào tab Xe dưới dạng dòng mở rộng — và đó chính là lý do tab Xe “dài ngoằng và rối”.
⋯, vì đó là việc làm một lần chứ không phải việc làm hằng tháng.Tab này trả lời “xe này gồm những gì?”. Trang chủ trả lời “làm gì bây giờ?”. Hai câu khác nhau nên hai màn không được trùng nhau.
⋯ cạnh biển số. Đây là ngoại lệ hợp lý duy nhất cho luật “icon phải có nhãn chữ”: ⋯ không tự làm gì, nó chỉ mở ra một danh sách đều có nhãn.Lịch sử có hai công dụng thật: bán xe (chứng minh xe được chăm) và biết mình tốn bao nhiêu. Thiết kế theo đúng hai việc đó.
19 / Th8, không phải “Tháng 8”. Định dạng tháng dài của tiếng Việt tràn khỏi cột 42px — đây là lỗi có thật ở bản cũ.Xuất ra PDF/CSV — thứ khiến lịch sử có giá lúc bán xe. Cũng là chức năng đáng đặt sau bản Pro nhất, vì nó có giá trị rõ ràng mà không cắt bớt tính năng lõi của bản miễn phí.
Cài đặt của app. Không phải của xe — xe có tab riêng. Bản cũ trộn hai thứ này và kết quả là tab Cài đặt chỉ còn một dòng “Xe”, trông như chưa làm xong.
⋯ của từng xe, nơi user đang nhìn đúng thứ mình sắp xoá.Màn trả tiền là chỗ dễ nhất để làm mất lòng tin. Nguyên tắc: nói thật cái gì miễn phí, trước khi nói cái gì phải trả.
Bảng này để đọc cùng người sẽ code. Cột vì sao quan trọng hơn cột đổi gì — không có lý do thì đó chỉ là đổi cho khác.
| Bản cũ | Bản này | Vì sao |
|---|---|---|
| Vòng cung 270° | Thanh đo tuyến tính có vạch mốc | Vòng cung chiếm 200×200px để nói một con số, và không đặt được mốc “bắt đầu nhắc”. Thanh đo cao 6px nói cùng lượng thông tin, cộng thêm cái mốc — nên nó nhân được ra mọi dòng hạng mục, không chỉ một cái ở đầu màn. |
| Nền loang aurora | Nền phẳng + vân chéo 3,5% chỉ ở khối công-tơ-mét | Nền loang màu làm chữ nhỏ mất tương phản không đều, và trên máy Android giá rẻ nó là thứ giật đầu tiên. Giữ lại đúng một mảng vân rất mờ để khối quan trọng nhất có chất liệu. |
Brand teal #0E8B86 | Brand indigo #4340E6 | Teal nằm sát “còn nhiều”. Mỗi nút teal đọc thành một tín hiệu trạng thái. Indigo không trùng dải nào trong ba màu trạng thái. |
| Nút tròn nổi (FAB) | Hai nút có nhãn trong khối công-tơ-mét | FAB che nội dung ở đáy màn (bản cũ nó đè lên đúng thẻ cuối cùng), và tách hành động khỏi con số mà nó sửa. |
| Danh sách hạng mục phẳng | Chia “Cần làm ngay” / “Còn nhiều” | Chữa trực tiếp bệnh “dài ngoằng”. Bốn hạng mục ổn không cần bốn dòng đầy đủ như hai hạng mục đang gấp. |
| Chu kỳ + công tắc nhồi trong tab Xe | Màn chi tiết hạng mục riêng (3.5) | Đây là nguyên nhân gốc của “tab Xe rối”. Mỗi hạng mục là một thực thể có chu kỳ, lịch sử và trạng thái riêng — nó xứng một màn, không phải một dòng mở rộng. |
| Một ô “Khác” duy nhất | Hạng mục tự đặt tên, không giới hạn | Thực tế có hàng chục việc ngoài danh sách: dây curoa, má phanh, kim phun, bình điện. Gộp hết vào một dòng “Khác” là làm mất dữ liệu. |
| Km và ngày là hai danh sách rời | Một danh sách, sắp theo số ngày còn lại | Người ta xếp lịch theo ngày, không theo km. Vì app biết km/ngày trung bình, nó đổi được mọi hạng mục sang cùng một thước và xếp chung — bảo hiểm hết hạn sau 52 ngày đứng đúng chỗ của nó giữa các hạng mục tính bằng km. Mỗi dòng vẫn hiện đơn vị gốc. |
| Wizard 3 bước lúc mở app | Một màn, bốn ô, có cửa thoát | Ba bước cho bốn ô nhập chỉ thêm hai lần bấm “Tiếp” và hai lần user có thể bỏ ngang. |
| Cài đặt gộp cả xe | Cài đặt chỉ của app, xe có tab riêng | Vì gộp nên bỏ xe ra là tab Cài đặt trắng trơn — chính cái user thấy và nói “chưa làm gì”. |
| Màu chỉ có nghĩa | Ba màu trạng thái không bao giờ dùng để trang trí, và không thứ nào khác được dùng ba màu đó. Tiền, ngày, tên xe: mực đen. |
| Màu không đứng một mình | Khoảng 8% nam giới Việt Nam khó phân biệt đỏ với xanh lá. Mỗi trạng thái luôn mang màu + hình icon riêng + chữ: Quá hạn đọc được cả khi in đen trắng. |
| Icon phải có nhãn | Không icon nào đứng một mình mà thực hiện hành động. Ngoại lệ duy nhất: ⋯ — nó chỉ mở ra một danh sách mà mọi dòng đều có chữ. |
| Con số to nhất là câu trả lời | Mỗi màn có đúng một con số cỡ lớn, và nó phải là con số user mở màn đó để xem. Trang chủ: số km. Chi tiết hạng mục: số km quá hạn. |
| Chữ số luôn tabular | Mọi con số dùng font-variant-numeric: tabular-nums. Thiếu nó thì cả một cột km nhảy ngang khi cuộn. |
| Không chôn quá hai tầng | Từ Trang chủ tới bất cứ thứ gì tối đa hai lần chạm. Chu kỳ dầu máy: Trang chủ → Dầu máy. Hết. |
| Nói hậu quả, không nói tình trạng | “Mất máy là mất hết” thay cho “Chưa đồng bộ”. “Chu kỳ tiếp theo 15.820 km” thay cho “Đã lưu”. |
| Không làm | Vì sao |
|---|---|
| Menu hamburger, tab thứ năm | Bốn tab là đủ cho bốn câu hỏi. Tab thứ năm nghĩa là có câu hỏi thứ năm mà app chưa xác định được. |
| Dashboard biểu đồ | Sáu cột chi phí theo tháng là hết. Đây là app tiện ích, không phải công cụ phân tích — và không ai mở app nhắc bảo dưỡng để ngắm đồ thị. |
| Huy hiệu, streak, điểm thưởng | Nhắc bảo dưỡng xe đã có động lực thật là tiền sửa xe. Gắn game vào chỉ làm loãng. |
| Dialog “Lưu thành công” | Con số trên màn đổi + một rung nhẹ đã nói xong. Chặn màn hình để báo tin tốt là phạt user vì đã làm đúng. |
| Ảnh xe cỡ lớn | Đẹp trên Figma, nhưng đẩy thông tin quan trọng xuống dưới màn. Ảnh xe chỉ là icon 40×40. |
| Chuyển động nhiều hơn 200ms | Phần lớn máy user là Android tầm trung. Chuyển động giật trông tệ hơn nhiều so với không có chuyển động. |
| Nhắc theo giờ tuỳ từng hạng mục | Gom mọi lời nhắc vào một giờ trong ngày. Sáu hạng mục × sáu giờ khác nhau là công thức để user tắt hết thông báo. |