TTO Design System¶

TTO Design System được xây dựng để đáp ứng nhu cầu phát triển của Tuổi Trẻ Online, đồng thời hướng tới sự nhất quán, kế thừa, mở rộng và tái sử dụng.

TTO Design System bao gồm các quy định, hướng dẫn và tài nguyên để thiết kế giao diện người dùng một cách nhất quán với các của tắc và ngôn ngữ thiết kế của TTO. Thay vì tốn thời gian cho việc căn chỉnh giao diện, bằng việc áp dụng TTO Design System, lập trình viên chỉ cần tập trung cho việc lập trình ứng dụng, và người thiết kế có thể chuyên tâm vào trải nghiệm người dùng, các tương tác và luồng sử dụng.

Tài liệu này cung cấp nhiều tài nguyên cho lập trình viên và người thiết kế, bao gồm:

các đoạn code html cho từng thành phần của website
các đoạn code css tương thích với nhiều trình duyệt và nền tảng
icon, fonts và các hướng dẫn thiết kế

Mục lục¶

Tổng quan¶

TTO Design System phản ánh những kiểu mẫu và thành phần đặc trưng của TTO. Những kiểu mẫu và thành phần này tạo ra một ngôn ngữ thiết kế thống nhất và nhất quán khi thiết kế các sản phẩm thuộc TTO.

Nguyên tắc thiết kế¶

Chúng tôi luôn luôn giữ những nguyên tắc cơ bản này khi thiết kế TTO, và bạn cũng thế.

1. Rõ ràng¶

Loại bỏ các yếu tố mơ hồ, hạn chế các yếu tố gây nhầm lẫn, giúp người dùng nhìn, hiểu và hành động một cách tự tin.

2. Hiệu quả¶

Hợp nhất và tối ưu dòng thông tin, giúp độc giả tiếp cận thông tin nhanh hơn, dễ dàng hơn, thông minh hơn.

3. Nhất quán¶

Tạo ra sự tương đồng và nhất quán bằng cách áp dụng những giải pháp giống nhau cho những vấn đề giống nhau.

4. Thẩm mỹ¶

Chú ý đến từng tiểu tiết một cách chu đáo và tinh tế.

Khả năng tiếp cận¶

TTO Design System cung cấp những đoạn code về khả năng tiếp cận (accessible) làm nền tảng cho TTO và các sản phẩm thuộc TTO. Nhằm đảm bảo mọi thành phần đều có khả năng tiếp cận cao, bạn cần bám sát các hướng dẫn này, bao gồm hành vi sử dụng bàn phím cũng như quản lý các thuộc tính và vai trò ARIA của từng thành phần.

Khả năng tiếp cận là gì?¶

Khả năng tiếp cận trong website đảm bảo người khuyết tật có thể nhận thức được, hiểu được, di chuyển được, tương tác được và sử dụng được ứng dụng web của bạn. Perceivable, Operable, Understandable and Robust. Để đáp ứng điều này, một trang web cần cung cấp các thao tác bàn phím thay thế cho tất cả các thao tác bằng con trỏ chuột, nhận dạng rõ ràng tất cả các ô nhập dữ liệu và nút bấm, cung cấp từ ngữ thay thế cho tất cả các hình ảnh, video, biểu tượng, cũng như việc xây dựng các thành phần có khả năng tự diễn đạt cao.

TTO Design System cho phép phát triển các thành phần có khả năng tiếp cận cao bằng việc cung cấp các bộ thành phần chuẩn mực, mỗi thành phần đều đáp ứng tiêu chuẩn ARIA, do đó chúng có thể được nhận diện chính xác bằng các công cụ hỗ trợ người khuyết tật.

Tuân thủ các bộ thành phần chuẩn¶

Các thành phần trong TTO Design System và việc sử dụng các vai trò ARIA trong các thành phần đó dựa trên bộ tiêu chuẩn W3C và các tiêu chuẩn công nghiệp khác.

Điều hướng bàn phím¶

Tất cả các tương tác bằng con trỏ chuột đều cần có thao tác bằng bàn phím tương ứng. Chúng tôi khuyến khích sử dụng các ngôn ngữ lập trình như Javascript để thực hiện điều này.

Sử dụng màu sắc hợp lý¶

Tất cả các thành phần trong TTO Design System đều bám sát 2 nguyên tắc chính của màu sắc về khả năng tiếp cận:

Không bao giờ chỉ sử dụng màu sắc để truyền đạt thông tin hay yêu cầu thao tác.
Phối hợp giữa chữ và màu nền không thấp hơn ngưỡng khuyến nghị của WCAG với tỉ lệ 4.5:1 cho chữ thông thường và chữ nhỏ, và 3:1 cho chữ lớn.

Khả năng tiếp cận các ô nhập dữ liệu¶

Tất cả các ô nhập dữ liệu đều sử dụng thẻ <fieldset> và <legend> và gắn nhãn hợp lý. Các ô lựa chọn và đánh dấu sử dụng một giải pháp cân bằng giữa khả năng tiếp cận và sự linh hoạt trong thiết kế.

Hình ảnh và biểu tượng¶

Các hình ảnh và biểu tượng phải được cung cấp các câu chữ thay thế.

Nhận dạng thành phần¶

Các thành phần tương tác được tạo ra dựa trên ARIA Authoring Practices bao gồm các thuộc tính nhằm giúp những người sử dụng màn hình đọc chữ có thể hiểu được.

Xác thực khả năng tiếp cận¶

Sử dụng các công cụ xác thực khả năng tiếp cận hợp lý trước khi phát hành sản phẩm. Khuyến nghị dùng WCAG Standard at the AA Level

Tài nguyên tham khảo¶

Màu sắc¶

Sử dụng¶

Biểu thị thông điệp¶

Một số màu sắc vốn biểu thị thông điệp nhất định đối với đa phần người sử dụng, dù ở bất kỳ vùng miền, văn hoá nào. Ví dụ, màu đỏ biểu thị thông điệp lỗi.

Biểu thị sự khác biệt¶

TTO sử dụng nhiều màu sắc thứ cấp để biểu thị sự khác biệt giữa các nội dung tương tự. Tuy nhiên, quan trọng là, không nên phụ thuộc hay lạm dụng màu sắc. Nếu quá nhiều màu sắc được sử dụng theo cách này, chúng sẽ mất ý nghĩa khác biệt.

Biểu thị sự phân cấp¶

Một màu nào đó được sử dụng rất ít trên một trang nhằm thu hút sự chú ý đến các thành phần quan trọng trong trang, nhằm kêu gọi người sử dụng tương tác trên thành phần đó. Phần lớn các thành phần trên trang sử dụng tôn màu xám, do vậy chỉ cần một màu khác biệt sẽ thu hút được ánh nhìn.

Khả năng tiếp cận¶

Giữ cho tất cả các thành phần trên ứng dụng đáp ứng tất cả các tiêu chuẩn về khả năng tiếp cận là một điều cực kỳ quan trọng, bao gồm độ tương phản tối thiểu mà WCAG 2.0 đã quy định cho chữ và màu nền của chữ. Điều này giúp cho những người bị mù màu hoặc có tật về mắt có thể tương tác tốt với TTO, đồng thời tăng khả năng sử dụng và khả năng đọc chữ cho tất cả những người dùng khác.

Layout¶

Layout là cấu trúc mẫu nhằm mang lại sự nhất quán của sản phẩm bằng việc định nghĩa các khung lưới, khoảng cách và phân vùng.

Trước khi lựa chọn layout, xem xét các hướng dẫn sau:

Hiểu rõ trường hợp sử dụng. Hiểu rõ cách thông tin trên trang được người dùng sử dụng.
Ưu tiên nội dung. Tổ chức nội dung để nêu bật những thông tin quan trọng nhất.
Nhóm các nội dung liên quan. Tạo ra sự hiệu quả cho người dùng sử dụng nội dung.

Layout toàn trang¶

Layout 1 cột¶

Layout 2 cột¶

Layout 3 cột¶

Layout 5 cột¶

Layout 12 cột¶

Markup và Style¶

Các thành phần của TTO Design System được phát triển để lập trình viên có thể tạo ra giao diện đồng nhất trong tất cả các sản phẩm thuộc TTO bằng cách áp dụng những quy tắc CSS tiêu chuẩn.

Để đạt được điều đó, TTO Design System sử dụng kỹ thuật đặt tên đặc tả. Điều này giúp duy trì các đoạn code ngắn gọn, tính cụ thể thấp. TTO Design System dử dụng phương pháp đặt tên BEM, đi kèm một số quy ước bên dưới.

BEM Naming¶

BEM là một phương pháp đặt tên phổ biến: block, element, modifier.

Block¶

Một block đại diện cho tên một thành phần chính. Nếu bạn đang xây một ngôi nhà, tên class sẽ là .house. Tất cả các thành phần thuộc ngôi nhà, sẽ được đặt tên dựa trên .house.

Element¶

Một element đại diện cho một thành phần con, được ngăn cách với thành phần chính bằng 2 dấu gạch dưới. Cánh cửa trong ngôi nhà sẽ được đặt tên class là .house__door. Cửa sổ sẽ là .house__window.

Cẩn thận với các thành phần nhỏ hơn trong một thành phần lớn. Đặc biệt trong trường hợp có thể bị lặp lại bởi các thành phần không đồng cấp hoặc không liên quan. Tránh việc đặt tên như .house__stair__step. Thay vào đó, hãy sử dụng .house__stair-step (dấu gạch nối dơn không biểu thị bất kỳ thành phần nào trong BEM, và có thể sử dụng để đặt tên nhóm các thành phần). Hoặc nếu các thành phần của cầu thang (stair) có thể được sử dụng trong một thành phần khác, lúc đó sử dụng .stair như một thành phần lớn, và tạo các thành phần nhỏ hơn .stair__step.

Modifier¶

Một modifier là một biến thể của thành phần hoặc phần tử, và được ngăn cách bằng một dấu gạch dưới. Biến thể có thể được sử dụng cho các thành phần tổng quan, hoặc có thể áp dụng cho một phần tử bên trong thành phần khác.

Vì các thuộc tính nên được áp dụng cho tất cả các ngôi nhà .house, do vậy các ngôi nhà đều có tên class .house. Nếu một ngôi nhà nào đó có một đặc điểm khác, ví dụ nhà màu xám, .house_grey sẽ được thêm vào bên cạnh tên class .house đang có. .house .house_grey.

Nếu ngôi nhà có cửa màu hồng, biến thể có thể được đặt ngay tại tên của phần tử đó, .house__door__pink.