BỘ NHẬN DIỆN PHẦN MỀM CỦA KIỂM TOÁN NHÀ NƯỚC

KIỂM TOÁN NHÀ NƯỚC BỘ NHẬN DIỆN PHẦN MỀM CỦA KIỂM TOÁN NHÀ NƯỚC Hà nội, tháng năm 2021 MỤC LỤC Chương I GIỚI THIỆU CHUNG Mục đích tài liệu Phạm vi tài liệu 3 Nguyên tắc xây dựng nhận diện phần mềm KTNN Chương II CÁC QUY ĐỊNH BỘ NHẬN DIỆN GIAO DIỆN PHẦN MỀM CỦA KTNN Các quy định chung Quy chuẩn controls sử dụng thư viện Telerik mặc định hệ thống Các quy định trang thành phần 12 Các thư viện sử dụng 18 Chương I GIỚI THIỆU CHUNG Mục đích tài liệu Mục đích tài liệu đưa tiêu chuẩn thiết kế controls sử dụng phần mềm Kiểm toán nhà nước, yêu cầu phi kỹ thuật mà ứng dụng cần đáp ứng dựa vào yêu cầu phần mềm Phạm vi tài liệu Tài liệu để bên xây dựng phần mềm cho Kiểm toán nhà nước xây dựng giao diện cho phù hợp đồng quy chuẩn chung Trong phần mềm có sử dụng mẫu số cơng cụ trả phí miễn phí Telerik, ChartJs, … ứng với phần mềm cụ thể nhà cung cấp chức khơng sử dụng thư viện cần tuân theo tieu chuẩn màu sắc, cỡ chữ, khoảng cách Nguyên tắc xây dựng nhận diện phần mềm KTNN Thiết kế, xây dựng nhận diện phần mềm KTNN cần đáp ứng nguyên tắc sau đây: - Đảm bảo tính thống phần mềm theo tiêu chuẩn chung - Màu sắc đồng bộ, thể theo nhận diện KTNN Màu sắc toàn giao diện phải hài hòa mang lại cảm giác dễ chịu cho người dùng - Sử dụng biểu tượng (icons) cách thống - Điều hướng rõ ràng thuận tiện cho thao tác người sử dụng - Không sử dụng nhiều hiệu ứng, hình ảnh sử dụng có kích thước hợp lý để khơng làm ảnh hưởng đến tốc độ tải trang - Bố cục xếp hợp lý, đảm bảo tính thẩm mỹ tạo thuận tiện cho thao tác người dùng - Sử dụng font chữ tiếng Việt theo chuẩn Unicode - Giao diện tương thích hiển thị tốt nhiều thiết bị khác nhau: máy tính, máy tính bảng điện thoại di động với nhiều kích thước hình với nhiều trình duyệt (Google Chrome, Mozilla FireFox, Microsoft Edge, Apple Safari, Opera,…) - Vị trí liên kết phải hữu vị trí quán trang - Tuân thủ theo tiêu chuẩn thiết kế Chương II CÁC QUY ĐỊNH BỘ NHẬN DIỆN GIAO DIỆN PHẦN MỀM CỦA KTNN Các quy định chung 1.1 Các quy định màu sắc  Sử dụng tông màu chủ đạo - Mẫu với màu xanh da trời làm chủ đạo - Mẫu với màu xanh làm chủ đạo  Ngồi sử dụng thêm màu sắc theo ngữ cảnh để biểu đồ, cảnh bảo, … Bootstrap 1.2 Các quy định font chữ - Font family: Roboto - Tiêu đề: Cỡ chữ 16px - Nội dung: Cỡ chữ 14px - Với chữ đậm: Sử dụng Roboto – Medium 1.3 Các quy định header Header mối phần mềm phải đầy đủ thành phần: - Height: 70px - Logo Kiểm toán nhà nước: size: 60x60 px - Text “KIỂM TOÁN NHÀ NƯỚC”: Font: Roboto; Size: 22px; Color: #FFFFFF - Text “TÊN PHẦN MỀM”: Font: Roboto; Size: 24px; Color: #FFFFFF - Hình trống đồng làm hình - Thơng tin thông báo: - Ảnh người dùng: size: 30x30 px - Tên người dùng: Font: Roboto; Size: 14px; Color: #FFFFFF - Thiết lập thông tin: Font: Roboto; Size: 12px; Color: #FFFFFF - Thơng tin tìm kiếm (nếu có) - Background + Mẫu với màu xanh da trời làm chủ đạo + Mẫu với màu xanh làm chủ đạo 1.4 Các biểu tượng (icon) sử dụng Sử dụng Bộ thư viện icons – Font Awesome https://fontawesome.com/ 1.5 Button - Height: 40px - Font: Roboto; Size: 14px - Text color: #FFFFFF 1.6 Textbox, Dropdown list, Text area - Height: 40px (default) - Font: Roboto; Size: 14px - Text color: #666666 1.7 Radio button, Checkbox, file, Toggle swich - Font: Roboto; Size: 14px - Text color: #666666 1.8 Gridview - Mẫu với màu xanh da trời làm chủ đạo - Mẫu với màu xanh làm chủ đạo - Các quy định control + Header: Roboto; Size: 14px; bold; color: #FFFFFF + Content: Roboto; Size: 14px; color: #333333 - Màu header icon ghi theo màu mẫu Quy chuẩn controls sử dụng thư viện Telerik mặc định hệ thống Đối với controls sử dụng CSS theo quy định mục 1, đơn vị xây dựng phần mềm sử dụng thư viện Telerik mặc định hệ thống 2.1 Combobox 2.2 Dropdown list 2.3 NumbericTextBox 2.4 Treeview 10 2.5 DateInput 11 2.6 RadGrid Các quy định trang thành phần 3.1 Trang login 3.1.1 Các yêu cầu Các thông tin hiển thị trang Login bao gồm: - Thông tin tiêu đề trang - Logo KTNN - Thông tin đăng nhập (Tên đăng nhập, Mật khẩu) - Cho phép ghi nhớ tài khoản - Nút đăng nhập - Bao gồm nút chức với trường hợp quên mật - Các thông tin hỗ trợ (Email, hotline) 3.1.2 Mẫu ví dụ 12 3.2 Trang chủ 3.2.1 Các yêu cầu Các thông tin hiển thị trang Login bao gồm: - Thông tin tiêu đề trang - Các cảnh bảo (nếu có) - Các biểu đồ tổng hợp/ thống kê - Khu vực phản hồi từ người dùng phần mềm - Các danh sách xem nhanh(nếu có) 13 3.2.2 Mẫu ví dụ  Mẫu với màu xanh da trời làm chủ đạo 14  Mẫu với màu xanh làm chủ đạo 3.3 Trang danh sách 3.3.1 Các yêu cầu - Thông tin tiêu đề trang - Danh sách nút chức thao tác (Tải lại, thêm mới, ) - Tìm kiếm danh sách 15 - Danh sách dạng lưới - Các nút chức danh sách (Sửa, Xóa, Chi tiết, ) 3.3.2 Mẫu ví dụ 3.4 Trang chi tiết popup 3.4.1 Các yêu cầu - Thông tin tiêu đề trang - Các control - Các nút chức (Lưu, Thốt, Bỏ qua, … ) 3.4.2 Mẫu ví dụ chức 16 3.4.3 Mẫu ví dụ thơng báo, cảnh báo 17 3.5 Trang kết hợp chi tiết danh sách Các thư viện sử dụng - Telerik UI (Trả phí): https://demos.telerik.com/aspnet- ajax/?_ga=2.235078785.1669473218.1630925069956756011.1629447012 - Notify (Miễn phí): http://bootstrap-notify.remabledesigns.com - Bộ icons Google Fonts (Miễn phí): https://fonts.google.com/icons?selected=Material+Icons - Bộ thư viện cho biểu đồ - ChartJs (Miễn phí): https://www.chartjs.org/docs/latest/samples/bar/vertical.html - Bộ thư viện Popups – Sweetalert2 (Miễn phí): https://sweetalert2.github.io/ - Bộ thư viện icons – Font Awesome (Miễn phí – Trả phí): https://fontawesome.com/ 18