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

3938 lượt xem
Layout Margins for mobile app design

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ó lại 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.

Layout Margins for mobile app design

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

 

luongnh avatar

Lượng Nguyễn Hữu

CEO & Co-Founder

Xin Chào, mình là Hữu Lượng. Mình tạo ra website này với mục đích chia sẻ những thông tin nhỏ hữu ích về chuyên môn, về nghề, cùng với đó là đưa lên trên này các sản phẩm LTS Studio đã thực hiện để chúng ta hiểu rõ về nhau hơn.

Nếu cảm thấy chúng ta hợp nhau, đừng ngần ngại nhấc máy lên và làm một chầu cafe để chúng ta bàn những gì cùng làm với nhau sắp tới nhé.

Behance | Dribbble | Medium | Facebook 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

DMCA.com Protection Status