Mấy năm gần đây, chúng ta rất chuộng những giao diện phẳng lì tối giản. Các hãng thi nhau đổi mới thiết kế – làm lại logo, tân trang giao diện web, phần mềm, ứng dụng.
Các bạn thấy gì quen ở những sản phẩm được cập nhật gần đây của những “ông trùm” công nghệ:
Windows 11 – Office 365 (Microsoft), Android 12 (Google), Facebook và hàng tá các sản phẩm nổi tiếng khác.
Giao diện tối?
Thôi. Cái này còn gì lạ. Nó vẫn chỉ là tùy chọn riêng theo sở thích người dùng.
![Microsoft Fluent Design](https://nguyenminhhung.com/wp-content/uploads/2021/12/Microsoft-Fluent-Design.jpg)
Có những cái tên nghe hoành tráng:
- Microsoft: Fluent Design
- Apple: Flat Design
- Google: Material Design
Vẫn là sự tối giản. Nhưng có một số thay đổi thêm vào bớt nhàm chán.
Có điểm gì chung và dễ tiếp cận cho giao diện web? Điều gì đang diễn ra và sẽ tiếp nối trong 2022?
1. Bo góc everywhere
Nó đơn giản đến mức nhà thiết kế không muốn nhắc về nó hoặc không muốn thừa nhận về nó.
Xiaomi làm chấn động thế giới với logo mới 7 tỷ
![Logo Xiaomi Bong Cong](https://nguyenminhhung.com/wp-content/uploads/2021/12/logo-Xiaomi-bong-cong.png)
Windows 11 có giao diện rất đẹp. Và nó bo góc mọi nơi
![Windows 11 Bo Vien](https://nguyenminhhung.com/wp-content/uploads/2021/12/Windows-11-bo-vien.jpg)
![Windows 11 Bo Goc](https://nguyenminhhung.com/wp-content/uploads/2021/12/windows-11-bo-goc.jpg)
Microsoft mang kiểu thiết kế này lên cả bộ Office 365
![Giao Dien Office 365 Bo Goc](https://nguyenminhhung.com/wp-content/uploads/2021/12/giao-dien-office-365-bo-goc.jpg)
Google uốn cong mọi thứ trên Android 12.
![Android 12 Qua Cong](https://nguyenminhhung.com/wp-content/uploads/2021/12/android-12-qua-cong.jpg)
Apple đã làm điều đó từ lâu trên IOS
![Giao Dien Ios Giao Dien Ios](https://nguyenminhhung.com/wp-content/uploads/2021/12/giao-dien-IOS.jpg)
![Giao Dien Ios 15 Giao Dien Ios 15](https://nguyenminhhung.com/wp-content/uploads/2021/12/giao-dien-IOS-15.jpg)
Ứng dụng nó cho web thế nào?
- Bo góc ảnh của bạn
- Bo góc các nút bấm
- Bo góc các ô chứa nội dung
Bằng 1 dòng CSS đơn giản:
border-radius:9px;
với 9px là độ bo cong bạn muốn
![Giao Dien Web Bo Cong](https://nguyenminhhung.com/wp-content/uploads/2021/12/giao-dien-web-bo-cong.jpg)
![Bo Cong Doi Tuong Web](https://nguyenminhhung.com/wp-content/uploads/2021/12/bo-cong-doi-tuong-web.jpg)
![Genetic.vn](https://nguyenminhhung.com/wp-content/uploads/2021/12/genetic.vn_.jpg)
2. Chia nội dung thành các hộp đặt cạnh nhau
Hãy tưởng tượng trang web của bạn như 1 trang giấy.
Thay vì viết mọi thứ vào đó, ta viết nội dung lên những mảnh giấy nhỏ, rồi dán chúng lên tờ giấy ban đầu.
![Style Web 2022](https://nguyenminhhung.com/wp-content/uploads/2021/12/style-web-2022.jpg)
Windows 11 đã làm vậy
![Giao Dien Windows 11 Giao Dien Windows 11](https://nguyenminhhung.com/wp-content/uploads/2021/12/giao-dien-windows-11.jpg)
![Action Center Windows 11 Action Center Windows 11](https://nguyenminhhung.com/wp-content/uploads/2021/12/action-center-windows-11.jpg)
Facebook đã làm vậy
![Giao Dien Moi Cua Facebook Bo Cong Goc](https://nguyenminhhung.com/wp-content/uploads/2021/12/giao-dien-moi-cua-Facebook-bo-cong-goc.jpg)
Mình đã áp dụng điều này trên trang Genetic.vn
![Xu Hhuong Thiet Ke Web 2022](https://nguyenminhhung.com/wp-content/uploads/2021/12/xu-hhuong-thiet-ke-web-2022.jpg)
3. Đổ bóng siêu nhẹ làm nổi khối
Như những quả bóng bay là là mặt đất.
Việc tạo chiều sâu cho các khối nội dung làm nó dễ được nhận diện hơn trong mắt người dùng. Đây cũng chính là điểm quan trọng nhất trong ngôn ngữ thiết kế Fluent Design của Microsoft.
![Xu Huong Thiet Ke Web 2022](https://nguyenminhhung.com/wp-content/uploads/2021/12/xu-huong-thiet-ke-web-2022.jpg)
![Do Bong Noi Dung](https://nguyenminhhung.com/wp-content/uploads/2021/12/do-bong-noi-dung.jpg)
Ứng dụng nó lên giao diện web thế nào?
- Chọn những hộp nội dung cần nổi bật
- Đổ bóng (shadow) chúng bằng CSS
Như dòng css mình đã dùng trong bài viết này:
box-shadow: 0px 5px 16px 9px rgb(0 0 0 / 5%);
![Shadow Css](https://nguyenminhhung.com/wp-content/uploads/2021/12/shadow-css.jpg)
Chung quy lại chúng ta có
1
Chia nội dung thành các hộp
2
Bo góc các hộp đó
3
Rồi đổ bóng siêu nhẹ
__
Dễ nhỉ
GIỜ MỚI ĐỌC ĐƯỢC CÁI NÀY, VẪN CÒN KỊP, HEHE
Hôm nay vào trello trên windows 11.
Đã thấy bo cong rất đẹp.