Grid cho thiết kế giao diện app multi-platfrom

Như ACE đã biết, iphoneX (375dp x 812dp) có tỉ lệ thiết kế UI cho Mobile App thích thật thích. Mình hay dùng tỉ lệ này để làm chuẩn cho các dự án lớn nhỏ. Nhưng khổ nỗi 375dp nó lại lẻ. Khi dùng áp dụng 8-Point Grid, hoặc có thể kỹ hơn là 4-Point Grid thì nó hay dư.

Và rồi iPhone 12 Mini ra mắt. Nhưng nó li vẫn giữ 375dp trong khi chỉ có 5.4inch (Đê Ma nó). Nhưng không sao, tin vui là nó bị downscale xuống, render ở 2,88, từ đó mình có thể thiết kế với tỉ lệ 360dp x 780dp ngoài 375dp giống như iphoneX. Nó rất nhàn khi thiết kế multi-platfrom app. Vì android tớ hay thiết kế với tỉ lệ 360dp x740dp của samsung S8, cũng là 1 tỉ lệ đẹp để ACE có thể diễn UI.

Mình đã dựng bộ grid cơ bản cho iPhone 12 Mini để ACE sử dụng nếu cần. Với 2 định dạng là Adobe XD do tớ thực hiện, Figma do anh Phạm Hồng Quân (https://www.facebook.com/Gum.Walkaz) giúp tớ thực hiện. ACE có thể tải về lưu lại để sử dụng.

Các bạn có thể download tại đây:

DOWNLOAD LAYOUT MARGINS IPHONE 12 MINI

Trong bài viết này, mình muốn chia sẻ với bạn hệ thống lưới có thể sẽ hữu ích với bạn khi xây dựng lưới trong thiết kế giao diện cho ứng dụng (Mobile App Design). Và đây chỉ là kinh nghiệm của mình thôi, không phải là kiến thức chuẩn mà các bạn bắt buộc phải sử dụng khi thiết kế giao diện app nhé.

Layout grids in Mobile App Design

Contact me: Luongnh.lts@gmail.com

Website: https://lts-studio.com
Behance: https://www.behance.net/lts-studio.com
Dribbble: https://dribbble.com/lts-studio

Best regards!

Hello! LTS Studio is a subsidiary of the company LTS Software. We are passionate about creating high-quality UX / UI systems and new visions for the beginners.

Hello! LTS Studio is a subsidiary of the company LTS Software. We are passionate about creating high-quality UX / UI systems and new visions for the beginners.