Thiết kế giao diện trên iPhone như thế nào?

Directory App Blog Image 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.

sketches 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ẽ 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.

1 Thiết kế giao diện trên iPhone như thế nào?

Fill the background with Black.

2 Thiết kế giao diện trên iPhone như thế nào?

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:

top bar Thiết kế giao diện trên iPhone như thế nào?

Save, or copy and paste các hình ảnh trên và dán nó vào tài liệu Photoshop của bạn.

3 Thiết kế giao diện trên iPhone như thế nào?

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.

4 Thiết kế giao diện trên iPhone như thế nào?

Let’s apply a bit of texture to the background. Here is a free download of one of the textures in ourSoft Grunge Seamless Textures pack.

Apply this texture as a Pattern Overlay

5 Thiết kế giao diện trên iPhone như thế nào?

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 ..

6 Thiết kế giao diện trên iPhone như thế nào?

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.

7 Thiết kế giao diện trên iPhone như thế nào?

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.

8 Thiết kế giao diện trên iPhone như thế nào?

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.

9 Thiết kế giao diện trên iPhone như thế nào?

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.

10 Thiết kế giao diện trên iPhone như thế nào?

Bước 5: Apply Styles to the Title 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

11 Thiết kế giao diện trên iPhone như thế nào?

Apply an Inner Shadow:

12 Thiết kế giao diện trên iPhone như thế nào?

And finally, a Gradient Overlay:

13 Thiết kế giao diện trên iPhone như thế nào?

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ả:

14 Thiết kế giao diện trên iPhone như thế nào?

Step 7: The Title Bar Buttons

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:

15 Thiết kế giao diện trên iPhone như thế nào?

Apply a Drop Shadow:

16 Thiết kế giao diện trên iPhone như thế nào?

Inner Shadow:

17 Thiết kế giao diện trên iPhone như thế nào?

And finally, Gradient Overlay:

18 Thiết kế giao diện trên iPhone như thế nào?

Place this icon from the iPhone Toolbar Icons set, just above the button. And give it a subtle Drop Shadow:

19 Thiết kế giao diện trên iPhone như thế nào?

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

20 Thiết kế giao diện trên iPhone như thế nào?

Use the Rounded Rectangle tool to draw 3 shapes, each 34 pixels wide and 7 pixels high, as shown below. Also apply a subtle Drop Shadow to all 3.

21 Thiết kế giao diện trên iPhone như thế nào?

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:

22 Thiết kế giao diện trên iPhone như thế nào?

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:

23 Thiết kế giao diện trên iPhone như thế nào?

Apply a Drop Shadow to the shape:

24 Thiết kế giao diện trên iPhone như thế nào?

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.

25 Thiết kế giao diện trên iPhone như thế nào?

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:

26 Thiết kế giao diện trên iPhone như thế nào?

Apply an Inner Shadow with these settings:

27 Thiết kế giao diện trên iPhone như thế nào?

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.

28 Thiết kế giao diện trên iPhone như thế nào?

Add some text:

29 Thiết kế giao diện trên iPhone như thế nào?

Draw a divider below the search field, using the Line Tool.

30 Thiết kế giao diện trên iPhone như thế nào?

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:

31 Thiết kế giao diện trên iPhone như thế nào?

 

32 Thiết kế giao diện trên iPhone như thế nào?

Bước 11: Listing Information

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

33 Thiết kế giao diện trên iPhone như thế nào?

Add some text for the location of the listing:

34 Thiết kế giao diện trên iPhone như thế nào?

Use the Polygon Tool to draw 5 star shapes:

35 Thiết kế giao diện trên iPhone như thế nào?

Apply a Gradient Overlay to some of the stars to illustrate the rating of the listing.

36 Thiết kế giao diện trên iPhone như thế nào?

Add some text for the “Reviews” link.

37 Thiết kế giao diện trên iPhone như thế nào?

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:

38 Thiết kế giao diện trên iPhone như thế nào?

 

39 Thiết kế giao diện trên iPhone như thế nào?

Bước 13: Arrange the Results

Draw a divider with the Line Tool:

40 Thiết kế giao diện trên iPhone như thế nào?

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:

41 Thiết kế giao diện trên iPhone như thế nào?

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.

Goldmouse dịch từ Medialoot