5 mẹo thiết kế giao diện ứng dụng iPhone

• Chia Sẻ,Mobile & Tablets
• Jul 9, 2012
• 0 Comments

Thiết kế giao diện trên iPhone khác so với thiết kế giao diện trên web: màn hình nhỏ, kích thước cố định … Sau đây là một vài kinh nghiệm để thiết kế layout trên iPhone:

1. Cài đặt Photoshop

Nếu bạn thiết kế cho iPhone 4 có nghĩa là bạn đang thiết kế trên 1 màn hình có độ phân giải cao. 2 dòng điểm ảnh xuất hiện như 1 điểm khi họ đang hiển thị trên màn hình. Cách setup: Photoshop > Preferences > Guides, Grid & Slices+ Gridline every: 20 px + Subdivisions: 2

Chắc chắn rằng có cài đặt:  snap to all, để chắc chắn mỗi objects di chuyển đúng 2px grid

Và cũng chắc rằng: shapes tool is setup to snap to pixels. Điều này để giữ cho mọi thứ đẹp và sắc nét

Màu sắc trên mỗi màn hình hiển thị rất khác nhau, vì vậy bạn cũng cần phải điều chỉnh thông số màu. Để điều chỉnh, bạn đọc bài sau để hiểu rõ hơn  Làm thế nào để cài đặt màu sắc chuẩn trên photoshop

2. Cần có 1 template PSD

Nếu bạn là 1 web designer, bạn cần có những template PSD để design 1 website hoặc là 1 framework để làm HTML/CSS

3. Tải về  iPhone 4 GUI PSD retina display

4. Sử dụng chế độ Use Liveview để xem lại bảng thiết kế

1. Window > Arrange > New window for [documentName]
2. Move the new window to part of the screen you’re not using (a separate monitor works best)
3. Open Liveview and place the ‘frame’ over that window in Photoshop.
4. Now open Liveview on your iPhone, connect to your computer, and voila there is your app on your iPhone, giving you a live preview of how it looks.

5. Hiểu biết Apple iOS Human Interface Guidelines và thực hành nó

Apple có documentation on designing interfaces for iOS mà bạn cần phải đọc nếu bạn thiết kế bất kỳ 1 iOS nào. Có rất nhiều hướng dẫn ở link trên để thiết kế 1 layout mobile Examples:

 - 44px là tappable lý tưởng trên màn hình,  thuận tiện cho ngón tay người dùng.
 - Người dùng mong muốn iPhone apps có thể xoay theo chiều ngang
 - Thương hiệu không nên phô trương
 - Mỗi ứng dụng cần phải có 1 vài kích thước biểu tượng
 - Trình điều khiển nên look tappable 
 - Phương thức cửa sổ / nhiệm vụ gián đoạn để sử dụng một cách tiết kiệm
etc.

Leave a Comment Cancel reply

CAPTCHA Code *

Message*

* required