[Tut] Dành cho bạn nào đang làm công việc thiết kế cho các ứng dụng cho OS như mình :)

Thiết kế giao diện trên iPhone như thế nào?
Trong hướng dẫn này, chúng tôi sẽ sử dụng Adobe Photoshop, thiết kế 3 trang ứng dụng danh sách thư mục đơn giản cho iPhone. Bài viết này sẽ hướng dẫn bạn qua các bước, và bao gồm tất cả các nguyên tắc cơ bản của thiết kế ứng dụng iPhone bằng cách sử dụng Photoshop.

Bắt đầu dự án của bạn bằng cách quyết định những gì là mục đích chính của ứng dụng của bạn. Và cách hiệu quả nhất đơn giản nhất để đạt được mục tiêu đó là những gì. Đối với dự án này, chúng tôi sẽ được thiết kế 3 trang ứng dụng danh sách thư mục đơn giản. Mục tiêu cuối cùng là tìm một doanh nghiệp gần người sử dụng, và cung cấp cho họ với các chi tiết liên lạc, hoặc hướng dẫn lái xe.

Vì vậy, tôi quyết định trang 1 tính năng một thanh tìm kiếm, và sống cập nhật kết quả. Cũng cần có một popup cung cấp cho bạn một tùy chọn để lọc kết quả theo thể loại. 5 kết quả sẽ được hiển thị tại một thời điểm, và khi bạn di chuyển xuống trên trang web, thêm 5 được tự động tải.

Trang 2 là trang thông tin cho người sử dụng lựa chọn kết quả, nó có tính năng một bức tranh lớn hơn, đánh giá, vị trí, và các chi tiết liên lạc. Trang 3 là trang cài đặt, với các tùy chọn chung cho các ứng dụng, và phân loại ưu đãi cho các kết quả.

Một khi bạn biết các thông tin cần thiết nhu cầu ứng dụng của bạn, làm một số bản phác thảo trên giấy, để lên kế hoạch bố trí sơ bộ về ứng dụng của bạn. Hãy thử các Sheets Phác thảo Wireframe để tăng tốc độ những thứ lên một chút.

Các thông số kỹ thuật cho thiết kế giao diện iPhone & iPad trong Photoshop

iPhone 3.0
Screen resolution: 72 ppi
Screen size: 320 x 480 px
Icon size: 57 x 57 px
File format: PNG-24 iPhone 4.0
Screen resolution: 72 ppi
Canvas size: 640 x 960 px
Icon size: 114 x 114 px
File format: PNG-24 iPad
Screen resolution: 72 ppi
Canvas size: 768 x 1024 px
Icon size: 72 x 72 px
File format: PNG-24
Graphics for the iTunes Store
Icon: 512 x 512 px (.tif, .jpg or .png, 72dpi, RGB)
iPhone Screenshots: 320 x 480 px or 640 x 860 px (.tif, .jpg or .png, 72dpi, RGB)
iPad Screenshots: 1024 x 768 px (.tif, .jpg or .png, 72dpi, RGB)

Wireframe để tăng tốc độ những thứ lên một chút.

Trong hướng dẫn này, chúng tôi sẽ thiết kế màn hình đầu tiên của các ứng dụng iPhone.
Bước 1: New Document

Mở Photoshop và tạo một tài liệu mới. Thiết lập độ rộng 640 pixel và chiều cao là 960 pixel. Nếu bạn có kế hoạch để in ra các khái niệm của bạn, độ phân giải của màn hình iPhone Retina là 326 ppi.

Đổ màu nền đen

Bước 2: The Top Bar

Thanh trên cùng với tín hiệu và thông tin pin nên luôn luôn vẫn là một liên tục trên các ứng dụng iPhone. Trừ khi ứng dụng của bạn là một trò chơi hoặc có một số lý do tốt để được toàn màn hình.
Khi thanh luôn luôn giống nhau, bạn có thể tiết kiệm thời gian bằng cách sử dụng một hình ảnh trước khi thực hiện:

Lưu hoặc copy các hình ảnh trên và dán nó vào tài liệu Photoshop của bạn.

Bước 3: The Background

Sử dụng công cụ Rounded Rectangle để vẽ một hình dạng màu trắng, lấp đầy phần còn lại của tài liệu. Bán kính góc là 10 pixels.


Hãy áp dụng mẫu hình nền. Tải về miễn phí của một trong các mẫu hình nền tại gói ourSoft GrungeSeamless

Áp dụng mẫu hình nền như một Pattern Overlay


Bước 4: The Title Bar

Vẽ một hình chữ nhật tròn, khoảng 640 điểm ảnh rộng và 94 điểm ảnh cao. Đặt nó ngay dưới thanh hàng đầu ..

Xóa các điểm neo công cụ lựa chọn, loại bỏ hai điểm đánh dấu màu đỏ trong hình dưới đây.

Với công cụ Convert Point lựa chọn, kích một lần vào mỗi điểm đánh dấu màu đỏ trong hình dưới đây.

Hai hành động cuối cùng sẽ có kết quả trong một hình chữ nhật được làm tròn trên các góc đầu và thẳng vào góc dưới cùng.

Tinh chỉnh các hình dạng nếu cần thiết để nó là chính xác 640 pixels rộng và cao 84 điểm ảnh. Sử dụng công cụ lựa chọn trực tiếp để lựa chọn và di chuyển các điểm neo. Và sử dụng công cụ chuyển đổi để kiểm tra kích thước của hình dạng.

Bước 5: Áp dung mẫu này cho tiêu đề bar

Mở Blending Options cho lớp thanh tiêu đề, và áp dụng một hiệu ứng bóng đổ với các cài đặt hiển thị dưới đây

Áp dụng Inner Shadow:

Cuối cùng tạo màu Gradient Overlay:

Bước 6: The Title

Sử dụng công cụ Type để tạo ra các danh hiệu. Trung tâm nó ở giữa của thanh tiêu đề, và áp dụng một bóng thả:

Step 7: Nút tiêu đề thanh Bar

Vẽ 56 x 56 điểm ảnh hình chữ nhật tròn, và sắp xếp phía bên phải của thanh tiêu đề, như hình dưới đây:

Áp dụng bóng đổ Drop Shadow:

Inner Shadow:

Cuối cùng, Gradient Overlay:

Đặt icon này từ các thiết lập các icon Thanh công cụ iPhone, ngay phía trên nút. Và cho nó mộtbóng đổ (Drop Shadow) tinh tế:

Copy vào nút trên bên trái của thanh tiêu đề, như hình dưới đây:

Sử dụng công cụ Rounded Rectangle để vẽ 3 hình dạng, mỗi 34 điểm ảnh và 7 điểm ảnh cao, như hình dưới đây. Cũng áp dụng một Drop Shadow tinh tế cho tất cả 3.

Bước 8: The Leather Texture

Nhân đôi layer Title Bar và di chuyển nó lên (Ctrl +]) cho đến khi nó là ở trên tiêu đề, và cả hai nút. Se Opacity Điền đến 0, và áp dụng mô hình này da liền mạch như một Pattern Overlay với các cài đặt sau đây:

Bước 9: The Page Background

Sử dụng công cụ Rounded Rectangle để vẽ một hình mà điền vào hầu hết các không gian còn lại. Để lại một lề mỏng, xung quanh hình dạng, như hình dưới đây:

Áp dụng bóng đổ cho hình dạng

Nhân đôi lớp hai lần, sau đó chọn lớp trung lưu và di chuyển các điểm dưới lên 10 pixels với công cụ lựa chọn trực tiếp. Sau đó lặp lại với các lớp trên, nhưng di chuyển nó lên 20 pixels.

Bước 9: The Search Field

Với công cụ Rectangle tròn chọn, thiết lập Radius là một cái gì đó cao, ví dụ 100px. Sau đó vẽ một hình ở trên cùng của trang, như hình dưới đây:

Áp dụng một Inner Shadow với các thiết lập:

Nơi này Icon Tìm kiếm từ bộ Vector những biểu tượng ứng dụng, ở phía bên trái của trường tìm kiếm.

Và chút text


Vẽ một chia dưới trường tìm kiếm, bằng cách sử dụng công cụ Line Tool.

Bước 10: The Thumbnail

Vẽ một hình chữ nhật tròn khoảng 100 x 100 pixel, và áp dụng một Drop Shadow như hình dưới đây:



Bước 11: Listing Information

Thêm một số văn bản cho tiêu đề niêm yết:

Thêm một số văn bản cho vị trí của danh sách:

Sử dụng công cụ Polygon để vẽ 5 hình sao:

Áp dụng một Gradient Overlay cho một số ngôi sao để minh họa cho sự đánh giá của danh sách.

Thêm một số văn bản liên kết "Nhận xét".

Bước 12: The More Info Button

Vẽ một hình chữ nhật tròn, chiều cao giống như hình ảnh thu nhỏ, ở phía bên phải của trang. Áp dụng một Gradient Overlay:



Bước 13: Sắp xếp kết quả

Vẽ một chia với công cụ Line Tool:

Nhóm tất cả các lớp tạo nên kết quả niêm yết. Bản sao các nhóm 4 lần và sắp xếp chúng như hình dưới đây:


Và có bạn có nó. Màn hình đầu tiên của ứng dụng iPhone của chúng tôi! Những kỹ thuật này có thể được áp dụng cho hầu hết các yếu tố thiết kế của iPhone ứng dụng trong Photoshop.