1. Ant Design là gì?
Đối với các lập trình web nói chung, ai chắc cũng đã từng nghe qua về bootstrap, nhưng với sự phát triển của các thư viện front end như reactjs, angular, vuejs… thì những thư viện về UI đang dần được ưa chuộng hơn, có thể kể đến như Material UI hay là Antd Design.
Ant là tập hợp các components của React được xây dựng theo chuẩn thiết kế của Ant UED Team. Tương tự như chuẩn Material Design, Ant cung cấp hầu hết các component thông dụng trong ứng dụng web hiện đại, như Layout, Button, Icon, DatePicket, v.v…Bên cạnh đó Ant cũng có những component riêng thú vị, như LocaleProvider cho phép bạn thay đổi ngôn ngữ trên toàn ứng dụng.
2. Giá trị trong thiết kế
Ant Design cung cấp một đánh giá thực tế về các thiết kế đẹp dành cho cả các nhà thiết kế của Ant Design và những người đang sử dụng nó. Đồng thời, nó xây dựng một nền tảng trên cùng các nguyên tắc và mẫu thiết kế để đưa ra hướng dẫn và giải pháp chung cho mục tiêu thiết kế được chỉ định.
Sự tự nhiên
Sự tự nhiên trong thiết kế sẽ có ảnh hưởng rất lớn tới hành vi của người dùng, các nhà thiết kế nên lấy cảm hứng từ đó và áp dụng nó vào công việc thiết kế hàng ngày. Chúng tôi đã đang bắt đầu khám phá và sẽ theo đuổi sự tự nhiên trong thiết kế, đó là định hướng tương lai của chúng tôi.
- Hệ thống thị giác đóng vai trò quan trọng nhất trong việc tiếp nhận và nhận thức của con người. Bằng cách tinh chỉnh các quy luật khách quan trong tự nhiên và áp dụng nó vào thiết kế giao diện, điều này sẽ tạo ra việc trải nghiệm sản phẩm tốt hơn cho người dùng. Ngoài ra, hệ thống thính giác hoặc hệ thống xúc giác có thể được thêm vào phần thiết kế trong tương lai để mang lại trải nghiệm sản phẩm thực tế hơn qua nhiều chiều. Đó có thể coi là ngôn ngữ lập trình trực quan.
- Trong thiết kế sản phẩm, các phương pháp như phân tích hành vi, trí tuệ nhân tạo và cảm biến có thể được áp dụng để hỗ trợ người dùng đưa ra quyết định hiệu quả nhất, giảm thao tác người dùng không cần thiết, làm cho tương tác giữa người với máy tính trở nên tự nhiên hơn.
Sự chắc chắn
Các nhà thiết kế cần đưa ra các phương án tốt hơn về thiết kế, tạo ra các sản phẩm chất lượng cao cho nhóm phát triển. Trong khi đó, nhiều nhà thiết kế khác nhau có thể cùng tạo ra 1 bản thiết kế đạt cùng chất lượng để phù hợp với nhu cầu của doanh nghiệp dựa trên cùng sự hiểu biết về yêu cầu kinh doanh và hệ thống thiết kế
- Hãy thận trọng: Đừng đưa quyết định cho tới khi chúng ta bắt buộc phải làm điều đó. Nhà thiết kế nên tập trung vào các tính năng hữu hiệu nhất bằng cách sử dụng các yếu tố thiết kế đơn giản để thể hiện. Như Antoine de St.Exupery đã nói: “Khi đạt được sự hoàn hảo, không phải khi không còn gì để thêm vào, mà là khi không còn gì để lấy đi.”
- Hướng đối tượng: Biết được các quy tắc thiết kế và tóm lược chúng thành “đối tượng” để tăng cường tính linh hoạt và duy trì được việc thiết kế giao diện người dùng, đồng thời giảm phán đoán chủ quan của người thiết kế và sự bất ổn định của hệ thống. Ví dụ: chuyển đổi giá trị màu, sắp xếp khoảng cách.
- Môđun: Tóm lược các phần phức tạp hoặc có thể tái sử dụng, điều này có thể cung cấp các giao diện nhất định để tương tác với các môđun khác, làm giảm độ phức tạp của hệ thống tổng thể, làm cho độ tin cậy và khả năng bảo trì của hệ thống tốt hơn. Các nhà thiết kế có thể tận dụng các các tài nguyên đã có sẵn hoặc biến chúng thành các tài nguyên của riêng họ, tránh được việc thêm vào các phần không cần thiết trong thiết kế để họ có thể tập trung sáng tạo nhất.
3. Cài đặt Ant Design
Cài đặt
npm install antd --save |
Sử dụng
Chỉ cần import nó vào và sử dụng như các component trong React.
import { Layout, Menu, Icon } from <antd<; |
Nhược điểm của ANTD
- Document của ANTD vẫn còn một vài chỗ viết bằng tiếng Trung, đặc biệt là Document của ANTD PRO/UMIJS
- Trên các trang như Stackoverflow, dev.to,… có ít các bài được giải thích hoặc hỗ trợ cho ANTD
- Khả năng tùy chỉnh theme không mạnh bằng material UI khi chỉ có thể thay đổi các mặc định về màu săc, kích thước…
4. Ant Design Pro
Ant Design Pro là 1 theme gần như hoàn chỉnh dành cho các trang Admin, CMS (Control Mangament System). Antd Pro mang đậm tính “all-in-one”, chỉ 1 lần cài đặt mà bạn có thể sử dụng luôn:
- Webpack (Webpack giúp tăng tốc độ cho dự án, đóng gói thành một file duy nhất,…)
- Less (một css giống preprocessor giống với SCSS)
- Umijs: là một thư viện Plugin enterprise-level cho React. Nghe thì xa tầm với nhưng ý lại nằm trong lời, UmiJS bao hàm bên trong là redux-saga, gọi api thay vì với Axios thì sẽ là Request.
Cài đặt ANTD PRO
Npx create-umi myapp |
