programming4:theme:items
Khác biệt
Đây là những khác biệt giữa hai phiên bản của trang.
Phiên bản trước của cả hai bênPhiên bản trướcPhiên bản sau | Phiên bản trướcPhiên bản sauPhiên bản sau của cả hai bên | ||
programming4:theme:items [2017/06/04 15:08] – volong1012 | programming4:theme:items [2022/03/22 14:14] – [7. Quy chuẩn về khoảng cách các khối] laser | ||
---|---|---|---|
Dòng 3: | Dòng 3: | ||
Để có thể thiết kế được 1 giao diện các bạn cần phải biết được 1 số định nghĩa cùng với các thành phần " | Để có thể thiết kế được 1 giao diện các bạn cần phải biết được 1 số định nghĩa cùng với các thành phần " | ||
- | ** 1. Định nghĩa về giao diện(theme)** : tham khảo [[https:// | + | ===== 1. Định nghĩa về giao diện (theme) |
- | ** 2. Cấu trúc của giao diện** | + | Tham khảo [[nukeviet4: |
- | //Demo về dạng cấu trúc cơ bản của giao diện// {{ : | + | ===== 2. Cấu trúc của giao diện |
- | | + | |
- | Body bao gồm : những thành phần thuộc nhóm -> Block left , Content, Block right. | + | |
- | | + | |
- | ** 3. Font sử dụng trong giao diện** :\\ Nukeviet thường sử dụng các dạng font sau : **tahoma, arial, vendara, awesome, roboto**... (Tùy vào từng loại giao diện mà người thiết kế có thể thay đổi dạng font cho phù hợp).\\ | + | Giao diện được chia làm 3 phần |
+ | |||
+ | //Demo về dạng cấu trúc cơ bản của giao diện// | ||
+ | {{ : | ||
+ | |||
+ | * Header bao gồm: Logo , Banner , Menu , Search và Date. | ||
+ | * Body bao gồm: những thành phần thuộc nhóm -> Block left , Content, Block right. | ||
+ | * Footer bao gồm: những thành phần từ List 2, ADS Product, Address trở xuống phía dưới. | ||
+ | |||
+ | ===== 3. Font sử dụng trong giao diện | ||
+ | |||
+ | \\ Nukeviet thường sử dụng các dạng font sau : **tahoma, arial, vendara, awesome, roboto**... (Tùy vào từng loại giao diện mà người thiết kế có thể thay đổi dạng font cho phù hợp).\\ | ||
Ngoài ra thiết kế giao diện có thể kiếm thêm font để sử dụng tại : [[https:// | Ngoài ra thiết kế giao diện có thể kiếm thêm font để sử dụng tại : [[https:// | ||
- | ===== 1. List site download | + | ====== 4. Hình ảnh sử dụng trong giao diện ====== |
Ảnh hiển thị đóng góp 1 phần rất quan trọng đến giao diện và rất nhiều người thiết kế hiện nay đang sử dụng ảnh bị dính bản quyền tác giả mà không biết (khi bạn sử dụng ảnh bản quyền mà bị phát hiện thì rất có thể bạn sẽ bị kiện và trả một số tiền cực lớn cho việc này). Dưới đây là list các site download ảnh free mà thôi đã check và kiểm tra về quyền sử dụng các bức ảnh : | Ảnh hiển thị đóng góp 1 phần rất quan trọng đến giao diện và rất nhiều người thiết kế hiện nay đang sử dụng ảnh bị dính bản quyền tác giả mà không biết (khi bạn sử dụng ảnh bản quyền mà bị phát hiện thì rất có thể bạn sẽ bị kiện và trả một số tiền cực lớn cho việc này). Dưới đây là list các site download ảnh free mà thôi đã check và kiểm tra về quyền sử dụng các bức ảnh : | ||
*[[http:// | *[[http:// | ||
Dòng 32: | Dòng 40: | ||
- | Chú ý : | + | Chú ý : |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | ===== 2. Các layout thường sử dụng trong giao diện ===== | + | ===== 5. Các layout thường sử dụng trong giao diện ===== |
Trong nukeviet thì các layout được biến đổi để phù hợp với từng giao diện sử dụng. NukeViet có những layout nào ? | Trong nukeviet thì các layout được biến đổi để phù hợp với từng giao diện sử dụng. NukeViet có những layout nào ? | ||
- | ^ Layout (dạng body hiển thị của nukeviet) | + | ^ Layout (dạng body hiển thị của nukeviet) |
- | | Left - Main | 6 - 18 | + | | Left - Main | 6 - 18 |
- | | Left - Main - Right | 5 - 13 - 6 | + | | Left - Main - Right | 5 - 13 - 6 |
- | | Left - Right - Main | 5 - 6 - 13 | + | | Left - Right - Main | 5 - 6 - 13 |
- | | Main | 24 | + | | Main | 24 |
- | | Main - Left - Right | 13 - 6 - 5 | + | | Main - Left - Right | 13 - 6 - 5 |
- | | Main - Right | 18 - 6 | + | | Main - Right | 18 - 6 |
- | Chú ý | + | Chú ý |
- | | + | |
- | | + | |
- | ===== 3. Quy chuẩn trong giao diện ===== | + | ===== 6. Quy chuẩn trong giao diện ===== |
Trong nukeviet có một số thành phần được quy chuẩn mà thiết kế cần phải tránh hoặc cân nhắc (khi thay hoặc thêm vào) khi sử dụng cho giao diện. | Trong nukeviet có một số thành phần được quy chuẩn mà thiết kế cần phải tránh hoặc cân nhắc (khi thay hoặc thêm vào) khi sử dụng cho giao diện. | ||
- | - **Quy chuẩn về icon** : Hầu hết các icon đều sử dụng font để hiển thị, lợi ích ở đây là nhẹ và không phải sử dụng nhiều hình ảnh do đó người thiết kế **nên hạn chế** thay đổi về mặt hình ảnh của những icon này. | + | ==== Quy chuẩn về icon ==== |
- | - **Các icon nên ít chỉnh sửa** : Các icon này gần như cố định ít thay đổi nên người thiết kế cần hạn chế chỉnh sửa những icon này | + | |
- | | + | Hầu hết các icon đều sử dụng font để hiển thị, lợi ích ở đây là nhẹ và không phải sử dụng nhiều hình ảnh do đó người thiết kế **nên hạn chế** thay đổi về mặt hình ảnh của những icon này. |
- | | + | === Các icon nên ít chỉnh sửa === |
- | | + | |
- | | + | Các icon này gần như cố định ít thay đổi nên người thiết kế cần hạn chế chỉnh sửa những icon này |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | - **Các icon có thể chỉnh sửa** : Các icon này không cố định nên người thiết kế có thể thay đổi được | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | === Các icon có thể chỉnh sửa === |
- | - **Quy chuẩn về khoảng cách các khối** :Theo quy chuẩn thường thì các khối sẽ có 1 khoảng cách nhất định với nhau (khoảng cách trên dưới trái phải). Tất nhiên nó không ràng buộc quá chặt chẽ, người thiết kế có thể thò ra thụt vào tùy ý để website hấp dẫn hơn nhưng cần chút hợp lí để không tạo sự hụt hẫng trong giao diện. | + | |
+ | Các icon này không cố định nên người thiết kế có thể thay đổi được | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | |||
+ | |||
+ | ==== Quy chuẩn về khoảng cách các khối | ||
+ | |||
+ | Theo quy chuẩn thường thì các khối sẽ có 1 khoảng cách nhất định với nhau (khoảng cách trên dưới trái phải). Tất nhiên nó không ràng buộc quá chặt chẽ, người thiết kế có thể thò ra thụt vào tùy ý để website hấp dẫn hơn nhưng cần chút hợp lí để không tạo sự hụt hẫng trong giao diện. | ||
Ngoài ra việc quy chuẩn này áp dụng cho cả các trang trong vì vậy người thiết kế cần lưu ý khi thiết kế các trang này)\\ | Ngoài ra việc quy chuẩn này áp dụng cho cả các trang trong vì vậy người thiết kế cần lưu ý khi thiết kế các trang này)\\ | ||
+ | |||
Ví dụ như sau : | Ví dụ như sau : | ||
{{nukeviet4: | {{nukeviet4: |
programming4/theme/items.txt · Sửa đổi lần cuối: 2022/03/22 14:30 bởi laser