Hướng dẫn thiết kế iOS 15: Hướng dẫn minh họa
Trong bài viết này, chúng tôi sẽ trình bày về cơ bản mọi thứ bạn cần biết để thiết kế một ứng dụng iPhone theo các quy ước và phong cách iOS 15 tiêu chuẩn.
Có thể bạn chưa bao giờ thiết kế một ứng dụng iPhone và không biết bắt đầu từ đâu. Có thể bạn đã thiết kế hàng tá, nhưng vẫn muốn có một nơi để tham khảo các phương pháp hay nhất. Có trời mới biết Hướng dẫn về giao diện con người của Apple rất đáng để thử và đọc.
MỤC LỤC
I. Kích thước màn hình iPhone
Trong 5 hoặc 6 năm đầu tiên phát hành iPhone, kích thước màn hình khá dễ quản lý. Nếu thiết kế của bạn hoạt động trên màn hình 320×480, thì bạn là vàng. Bây giờ , đó là miền tây hoang dã ngoài kia. Mỗi năm dường như lại có ít nhất một kích thước màn hình khác 🙄…
Đây là danh sách đầy đủ để bạn tham khảo (kéo liên kết này vào thanh dấu trang của bạn để lưu nó; tải bản PDF có thể tải xuống bên dưới )
| THIẾT BỊ | KÍCH THƯỚC KHUNG HÌNH (VÍ DỤ NHƯ FIGMA) | QUY MÔ XUẤT KHẨU |
|---|---|---|
| 13 Pro Max, 12 Pro Max | 428 x 926 | @ 3x |
| 13, 13 Pro, 12, 12 Pro | 390 x 844 | @ 3x |
| 13 Nhỏ, 12 Nhỏ | 375 x 812 | @ 3x |
| 11 Pro Max, XS Max | 414 x 896 | @ 3x |
| 11 Pro, X, XS | 375 x 812 | @ 3x |
| 11, XR | 414 x 896 | @ 2x |
| 8+, 7+, 6+, 6S + | 414 x 736 | @ 3x * |
| SE (thế hệ 2), 7, 6, 6 | 375 x 667 | @ 2x |
| 5, 5 giây, 5c, SE | 320 x 568 | @ 2x |
| 4, 4 giây | 320 x 480 | @ 2x |
| 1, 2, 3 | 320 x 480 | @ 1x |
* màn hình trên điện thoại về mặt kỹ thuật là 2,61x
- Kích thước bảng vẽ . Đây là kích thước “kích thước điểm” hoặc “@ 1x” của một thiết bị nhất định. Tôi thực sự khuyên bạn nên thiết kế trên bảng vẽ có kích thước này cho một thiết bị nhất định. (Đây là giải thích về điểm so với pixel )
- Mở rộng quy mô xuất khẩu . Đây là mức lớn hơn bao nhiêu để tạo hình ảnh raster (PNG, JPG) khi xuất để tận dụng tối đa độ phân giải cao hơn của một số thiết bị.
II. Tôi nên sử dụng artboard kích thước nào cho thiết kế iPhone?
Sử dụng kích thước màn hình iPhone phổ biến nhất cho đối tượng của bạn, nhưng nếu bạn có bất kỳ màn hình dày đặc, nhiều dữ liệu nào, hãy đảm bảo kiểm tra những màn hình đó trên kích thước màn hình nhỏ hơn.
- Nếu bạn đang ghi lại số liệu phân tích trên ứng dụng hoặc trang web hiện tại của mình, hãy kiểm tra những số liệu đó * để biết kích thước màn hình phổ biến nhất của khán giả
- Nếu bạn đang thiết kế ứng dụng cho đối tượng chung , hãy sử dụng kích thước màn hình iPhone phổ biến nhất: 375x812pt hoặc 375×667 pt (nhưng vì chúng có cùng chiều rộng nên không tạo ra nhiều khác biệt)
- Nếu bạn đang thiết kế một ứng dụng cho đối tượng hiểu biết về công nghệ hoặc thiết kế , thì kích thước màn hình iPhone phổ biến nhất có thể là 414×896 pt mới hơn
* Google Analytics ghi lại điều này tại Đối tượng> Di động> Thiết bị, sau đó đặt Thứ nguyên chính thành “Độ phân giải màn hình”
III. Điểm iOS so với Điểm ảnh
Khi pixel cao / rộng bằng một nửa so với lúc bắt đầu, chúng ta chỉ có thể sử dụng pixel vuông 2×2 cho mọi điểm (đây được gọi là @ 2x). Và khi pixel cao / rộng khoảng một phần ba khi chúng bắt đầu, chúng ta có thể sử dụng hình vuông 3×3 pixel cho mọi điểm.
Điểm là đơn vị cho phép chúng ta có màn hình độ phân giải cao hơn mà không cần tất cả các phần tử trên trang chỉ bị thu nhỏ lại. Yay, điểm ! Điều đó đang được nói, đôi khi các nhà thiết kế sử dụng các thuật ngữ thay thế cho nhau và bạn sẽ chỉ cần biết từ ngữ cảnh mà chúng có nghĩa là gì. Boo, các nhà thiết kế.
IV. Bố cục trang trên iPhone
Mặc dù các ứng dụng iOS khác nhau có bố cục khác nhau, nhưng nhiều trang tiêu chuẩn sẽ có bố cục giống như sau:
Lưu ý: trong phần tải xuống bên dưới, tôi có một mẫu iPhone Figma có thước chia các vùng trang này, cộng với thanh trạng thái và chỉ báo trang chủ. Nó cho phép bạn bắt đầu điền vào khuôn khổ này của trang rất nhanh chóng.
V. Thanh trạng thái iOS
Thanh trạng thái xuất hiện ở đầu mỗi trang – ngoại trừ một số hình ảnh, video hoặc phương tiện toàn màn hình.
Thanh trạng thái chứa các chỉ báo thời gian, tín hiệu, wifi và pin và có thể được viết (văn bản và biểu tượng) bằng màu đen hoặc trắng.
Nền của thanh trạng thái có thể là bất kỳ màu nào – hoặc thậm chí trong suốt. Để tìm các biến thể trên màu tương phản phù hợp với màu trắng, hãy sử dụng Trình tạo màu truy cập .
Nếu bạn đang sử dụng thanh trạng thái trên bất kỳ thứ gì ngoại trừ những hình ảnh nhẹ nhất, có thể bạn sẽ muốn sử dụng văn bản màu trắng .
Hoặc, nếu bạn muốn có một thanh trạng thái tối thiểu trên nhiều hình ảnh, hãy sử dụng tính năng làm mờ nền .
Thanh trạng thái kiểu “kính mờ” này không thêm bất kỳ màu sắc, đường viền bổ sung nào hoặc các yếu tố thu hút sự chú ý không cần thiết vào giao diện – nó chỉ làm mờ bất kỳ màu nào bên dưới nó, làm cho văn bản dễ đọc hơn.
Trong ví dụ trên, màu nền của trang màu xám nhạt là màu “mặc định” của kính mờ, có nghĩa là văn bản phía trên nó phải là màu đen – không phải màu trắng.
Chỉ kể từ iPhone X, iPhone mới có thiết kế “tai thỏ” và các góc bo tròn trên viền. IPhone cũ hơn (và tất cả iPad) có thanh trạng thái ngắn hơn, nhỏ gọn hơn.
VI. Thanh điều hướng iOS
Thanh điều hướng là nơi ứng dụng hiển thị điều hướng (ngạc nhiên!), Tiêu đề trang, các thao tác trên trang chính và – thường xuyên – tìm kiếm.
Bạn có thể coi thanh điều hướng iOS bao gồm tối đa ba “hàng” .
Giờ đây, các ảnh chụp màn hình ở trên chỉ hiển thị hành vi được cuộn trước . Ngay sau khi người dùng bắt đầu cuộn, iOS sẽ chỉ định một số hành vi thú vị.
Nếu một thanh tìm kiếm quan trọng để xem mọi lúc, nó chỉ di chuyển lên từ hàng thứ ba sang hàng thứ hai trong khi ứng dụng được cuộn.
Nếu nó ít quan trọng hơn, nó sẽ biến mất hoàn toàn – chỉ hiển thị khi người dùng ở trên cùng của trang.
Khi các hàng thanh điều hướng iOS biến mất khi cuộn, chúng sẽ xuất hiện lại khi người dùng cuộn trở lại đầu trang .
Lưu ý rằng quá trình chuyển đổi giữa các trạng thái được hoạt hình hoàn toàn mượt mà – một chi tiết nhỏ nhưng đặc trưng của phong cách iOS.
VII. Thanh tab iOS
Trên ứng dụng iOS, các điểm đến chính trong ứng dụng được liệt kê dưới dạng các tab ở phía dưới.
Hãy lưu ý một số điều về kiểu dáng khôn ngoan:
- Biểu tượng đã chọn được biểu thị bằng màu tô chủ đề ứng dụng
- Các nhãn là văn bản 10-11pt trong SF, phông chữ mặc định
- Nền có thể hơi mờ và có nền mờ – hiệu ứng “kính mờ”, một thanh điều hướng
Và một số lưu ý về hoạt động của thanh tab và các nút của nó:
- Các tab khác nhau ghi nhớ trạng thái của chúng. Nếu bạn di chuyển đến một điểm đến nhất định trong một tab, hãy chuyển sang tab khác, sau đó quay lại tab đầu tiên, bạn sẽ ở nơi bạn đã dừng lại trong tab đó – không phải là “màn hình chính” cho tab đó
- Nếu bạn nhấn vào tab đang hoạt động, bạn sẽ quay lại “màn hình chính” cho tab đó
- Thanh tab luôn hiển thị trong ứng dụng, ngoại trừ:
- Khi bàn phím được hiển thị
- Khi một phương thức được mở (trong các tác vụ quan trọng, người dùng nên tập trung vào nhiệm vụ đó thay vì điều hướng đến các phần khác của ứng dụng)
VIII. Chỉ báo Trang chủ iOS
Các iPhone mới (X và gần đây hơn) đều có chỉ báo màn hình chính – một thanh mỏng, tròn, hiện diện khắp nơi ở cuối màn hình. Chà, có mặt khắp nơi ngoại trừ khi bạn đã ở trên màn hình chính.
Nó có màu đen trên tất cả các màn hình sáng, nhưng có thể được tạo thành màu trắng trên các màn hình tối hơn.
Và bằng cách kéo nó lên một số lượng, bạn có thể điều hướng giữa các ứng dụng và đến màn hình chính:
- Kéo một số cách ngắn lên trên: chuyển đến màn hình trình chuyển đổi ứng dụng
- Kéo một đoạn dài lên trên: vào màn hình chính
Tham khảo bài viết bổ ích :
⩥ BẮT KỊP 10 TRENDS THIẾT KẾ APP THƯƠNG MẠI ĐIỆN TỬ NĂM 2020
⩥ 10 ỨNG DỤNG DẠY NẤU ĂN HÔ BIẾN CÔ NÀNG HẬU ĐẬU THÀNH ĐẦU BẾP SỐ #1