iOS Design Guidelines (phần 2)

Phần 1

Tab Bar

Tab bar cho phép người dùng nhanh chóng điều hướng thông qua các views riêng biệt của app và nó cũng chỉ nên dùng cho mục đích này. Tab bar luôn xuát hiện ở cuối cùng ở màn hình. Theo mặc định, tab bar trong suốt 1 chút và sử dụng cùng 1 hệ thống làm mờ cho nội dung bên dưới như navigation bar.

Một tab bar chỉ có thể chứa 1 số lượng tabs cố định. Nếu có nhiều hơn, tab cuối cùng sẽ được thay thế bằng “More tabs” để dẫn đến các tabs bị ẩn, với lựa chọn để sắp xếp lại các tabs đã hiển thị. Trong khi số lượng tabs tối đa trên iPhone là 5, thì trên iPad là 7 tabs. Để thông báo người dùng về thông tin mới trên 1 khung hình, thỉnh thoảng có thể áp dụng một huy hiệu tính đến nút tab bar. Nếu khung hình tạm thời bị chặn, nút tab liên quan không nên bị ẩn hoàn tòan, thay vào đó sẽ bị làm mờ để tương tác hình ảnh trong trạng thái bị vô hiệu hóa.

Table View

Table views được dùng để hiện thị số lượng từ nhỏ đến lớn danh ssch các thông tin trong 1 hoặc nhiều cột và với lựa chọn chia nhiêu hàng thành những sections riêng biệt hoặc nhóm chúng lại. Có 2 loại table view căn bản, phụ thuộc vào loại dữ liệu bạn đang thể hiện.

• Plain

Một table trơn gồm nhiều hàng có thể có header ở trên và 1 footer ở sau hàng cuối. Nó có thể hiển thị điều hướng ngang bên phải màn hình để điều hướng xuyên suốt bảng, đều này phù hợp khi hiển thị lượng dữ liệu lớn và phân loại được (theo abc..)

• Grouped

Một table được nhóm cho phép bạn sắp xếp các hàng trong nhóm. Mỗi nhóm có thể có 1 header (dùng để miêu tả bối cảnh của nhóm) cũng như footer (hỗ trợ tốt cho text..). Một table được nhóm lại cần chứa ít nhất 1 nhóm và mỗi nhóm cần chứa ít nhất 1 hàng. Cho cả 2 loại table view, một số phong cách có sẵn dùng để hiển thị dữ liệu theo cách mà người dùng dễ dàng tìm kiếm, đọc và sửa đổi.

• Default

• Với phụ đề

• Với giá trị

Định dạng table giá trị cho phép bạn hiển thị giá trị cụ thể liên quan đến tiêu đềhàng. Tương tự như định dạng mặc định, mỗi hàng có một hình ảnh và một tiêu đề đều có thể căn chỉnh về bên trái. Tiêu đề được theo sau bởi nhãn căn chỉnh bên phải dành cho giá trị, thường đượ hiển thị trong màu text dịu màu hơn tiêu đề.

Modals, Popovers và Alerts

iOS cung cấp nhiều phong cách views tạm thời đa dạng, có thể hiển thị, chỉnh sửa và vận dụng dữ liệu 1 cách phù hợp nhất. Trong khi mỗi khung hình tạm thời tồn tại đều có mục đích cụ thể và đều khác biệt, tất cả các khung hình tạm thời vẫn có 1 điểm chung: Khi được hiển thị, chúng có chỉ số layer cao nhất trên khung hình hiện tại (chúng thường xuất hiện ở đầu mọi thứ khác), và nội dung bên dưới bị che phủ bởi background đen trong suốt.

• Activity View

Một activity view được sử dụng để thực hiện các nhiệm vụ chuyên biệt. Những nhiệm vụ này có thể là nhiệm vụ mặc định của hệ thống như chia sẻ nội dung qua các lựa chọn có sẵn hoặc có thể hoàn toàn là hành động tùy chỉnh. Khi thiết kế icons cho các buttons nhiệm vụ tùy chỉnh, bạn nên làm theo những hướng dẫn tương tự dành cho trạng thái động của icons bar button – fill toàn bộ, không hiệu ứng trên background trong suốt.

• Actions

Action Sheets được sử dụng để thực hiện 1 hành động đơn từ danh sách các hành động có sẵn và thúc đẩy người dùng app xác nhận hoặc hủy bỏ 1 hành động.

Trong trạng thái chân dung (và trên những độ phân giải màn hình bối cảnh nhỏ), các hoạt động luôn được hiển thị như 1 danh sách các buttons trượt và giữ ở dưới đáy màn hình. Trong trường hợp này, một action sheet luôn có button “hủy” để đóng màn hình và không thực hiện bất kì hành động nào được liệt kê. Khi có đủ dung lương có sẵn (vd: trên màn hình iPad), các action sheet chuyển đổi thành popover 1 cách trực quan. Một button để đóng màn hình không cần nữa vì khi chạm vào điểm bất kì bên ngoài popover sẽ tự động đóng màn hình.

• Alerts

Mục đích của alerts là thông báo cho người dùng về thông tin quan trọng và tùy chọn thúc đẩy người dùng đưa ra quyết định về 1 hành động nào đó. Một alert view không chưa 1 text tiêu đề, không dài hơn 1 dòng và 1 (dành cho các alerts thông tin thuần tùy như “Ok”) hoặc 2 (dành cho các alerts yêu cầu quyết định như “Send” hay “Cancel”) button.

Nếu cần thiết, bạn cũng có thể thêm 1 text message cũng như 2 fields input text, 1 trong số đó có thể là field input bị che khuất, phù hợp cho các thông tin nhạy cảm như mật khẩu hoặc mã PINs.

• Chỉnh sửa menu

Edit Menu cho phép người dùng thực hiện các hành động như sao chép, dán, cắt… khi 1 yếu tố được chọn (text, hình ảnh…). Trong khi có thể kiểm soát các hoạt động người dùng lựa chọn, sự xuất hiện trực quan của các edit menu là cố định và không thể cấu hình được nếu bạn không tự xây dựng edit menu được tùy chỉnh hoàn toàn của chính mình.

• Popover

Popovers hữu dụng khi một hành động cụ thể yêu cầu nhiều input của người dùng trước khi thực hiện. Một ví dụ tốt là khi thêm 1 item, có 1 ít đặc tính cần cố định trước khi item có thể được tạo. Trong môi trường ngang, popover tiết lộ dưới control liên quan (như 1 button) với mũi tên chỉ đến control khi được mở. Màn hình nền của popover sử dụng mức độ đục giảm nhẹ và làm mờ nội dung bên dưới, tương tự như nhiều yêu tố UI khác đã thực hiện từ iOS 7.

Một popover là màn hình tạm thời mạnh mẽ có thể chứa nhiều objects khác nhau navigation bar của nó, table views, biểu đồ hoặc màn hình web. Khi một popover tăng kích thước do số lượng các yếu tố được chứa đựng và tiếp cận đáy của viewport, có khả năng để cuộn trong popover.

• Modals

Modals là màn hình hữu dụng cho các nhiệm vụ yêu cầu nhiều câu lệnh hoặc input bởi người dùng. Chúng xuát hiện trên đầu và trong khi mở, sẽ chặn phản ứng với các yếu tố tương tác khác bên dưới. Một modal thông dụng thường cung cấp:

• một tiêu đề để miêu tả nhiệm vụ;
• một button để đóng modal mà không tiết kiệm hoặc thực hiện bất kì hành động nào khác;
• một button để lưu hoặc đề xuất thông tin được nhập bất kì; và
• nhiều yếu tố khác nhau cho input người dùng trong khung chinh của modal.

Có 3 phong cách modal khác nhau có sẵn:

• Toàn màn hình: che toàn bộ màn hình
• Page sheet: Trong trạng thái chân dung, modal bao phủ 1 phần nội dung bên dưới, để một phần nhỏ của màn hình mẹ có thể thấy được dưới màn hình đen trong suốt. Trong trạng thái landscape, modal của page sheet sẽ hoạt động như modal toàn màn hình.
• Form sheet: Trong trạng thái chân dung, modal xuất hiện ởtrung tâm màn hình, giữ nội dung xung quanh của màn hình mẹ có thể thấy được dưới màn hình trong suốt đen. Vị trí của moda điều chỉnh tự động khi 1 bàn phím cần hiển thị. Trong trạng thái landscape, page sheet sẽ hoạt động như modal toàn màn hình.

Controls

iOS cung cấp phạm vi rộng các control cho bất kì loại input cần có căn bản mà bạn có thể nghĩ tới. Danh sách bên dưới gồm các control quan trọng nhất (được sử dụng thông dụng) nhưng bạn có thể xem iOS Developer Library để xem danh sách đầy đủ các control có sẵn

Buttons

Có khả năng là phần lớn các control được sử dụng là button cũ sử dụng tốt. Kể từ iOS 7, thiết kế button mặc định không thực sự giống button nữa, mà giống text link đơn thuân hơn. Button control được tùy chỉnh cao và cho phép bạn thiết kế mọi thứ từ text style, thả bóng và màu sắc đến 1 icon đã được thêm vào trước hoặc đặt trung tâm nếu không có text label, cũng như background tùy chỉnh toàn bộ. Lưu ý rằng một button có thể có nhiều trạng thái, và chúng nên được tương tác với ngôn ngữ trực quan: mặc định, được highlight, được lựa chọn và được vô hiệu.

• Pickers

Pickers được sử dụng để chọn 1 giá trị từ danh sách các giá trị có sẵn. Trang web tương đường sẽ là 1 hộp lựa chọn (đây là box mà picker control được sử dụng khi chạm vào 1 lựa chọn trong Safari). Một phiên bản mở rộng của picker là datepicker, cho phép người dùng cuộn danh sách ngày và thời gian và lựa chọn các giá trị cho ngày, tháng và thời gian (có thể cấu hình được).

Ngoại trừ màu màn hình nền, bạn không thể thay đổi phong cách trực quan hoặc kích cỡ (tương tự như keyboard) của 1 picker control. Thông thường, chúng xuất hiện ở phía cuối của màn hình, khi các keyboard cũng xuất hiện nhưng có thể sử dụng chúng ở các vị trí khác.

• Các control segment

Một control segment gồm 1 bộ các phân khúc (ít nhất là 2 phân khúc) có thể được dùng cho 1 số thứ như lọc nội dung hoặc tạo tabs cho các loại nội dung phân loại rõ ràng.

Mỗi segment chứa 1 text label hoặc 1 hình ảnh (icon) mà không chứa cả hai. Ngoài ra, không thực sự khuyến khích việc sử dụng 1 bộ phối hợp các loại segment (text và hình ảnh) trong 1 segment control. Độ rộng của 1 segment thay đổi tự động dựa trên số lượng các segment (2 sedments: 50% độ rộng tổng cộng của control, 5 segements: 20% của độ rộng control tổng cộng).

• Sliders

Slider control cho phép người dùng chọn 1 giá trị cụ thể từ trường các giá trị được cho phép. Bởi việc chọn 1 giá trị thực hiện khá trơn tru và không có bất kì các bước nào, bạn nên chọn sliders khi lựa chọn 1 giá trị ước lượng, không phải giá trị chính xác. Ví dụ, 1 slider sẽ là control tốt để thiết lập âm lượng. bởi người dùng có thể nghe khác nhau và có thể nhận biết sự khác nhau giữa ồn và rất ồn nhưng 1 input text để thiết lập giá trị dB sẽ không thực tế.

Bạn có thể thiết lập các icon for giá trị nhỏ và lớn, được hiển thị lúc bắt đầu và góc cuối của slider control, vì vậy cho phép bạn nắm được mục đích của slider 1 cách trực quan.

• Stepper

Steppers nên được sử dụng khi người sử dụng nhập 1 giá trị chính xác từ trường giới hạn các giá trị có thể (vd: 1-10…). Một stepper luôn chứa 2 buttons đã được phân khúc, một cho giá trị hiện hành đang xuống và một cho giá trị hiện hành đang lên.

Mộtcashc trực quan, stepper control được tùy chỉnh cao:

– bạn có thể dùng chính icon của mình cho stepper buttons;

– khi duy trì bề ngoài iOS nguyên bản, bạn có thể tùy chỉnh màu sắc của các đường viền, hình nền và các icon bằng cách sử dụng màu sọc – màu được thiết lập tự động cho mỗi yếu tố sau và

– nếu bạn muốn đi xa hơn, bạn có thể sử dụng các hình ảnh nền tùy chỉnh hoàn toàn dành cho các stepper button cũng như cho separator.

• Switch

Một switch cho phép người dùng chuyển đổi nhanh chóng giữa 2 trạng thái: on và off. Đó là checkbox của app iOS. Bạn có thể tùy chỉnh màu sắc cho trạng thái on và off, nhưng hiển thị của button chuyển đổi và kích thước của switch là cố định và không thể thay đổi.

Bàn phím

Có nhiều loại keyboard đa dạng có sẵn để cung cấp bàn phím tốt nhất có thể cho input text cụ thể. Tuy bạn có thể xây dựng keyboard tùy chỉnh hoàn toàn riêng của bạn, các keyboards mặc định không thể thay đổi phong cách hoặc kích thước.

Các nguồn khác

Những hướng dẫn này mới chỉ cung cấp thông tin cơ bản để giúp bạn bắt đầu với thiết kế iOS. Khi bạn đào sâu hơn, bạn sẽ hứn thú với các chi tiết hơn. Những bài báo và nguồn tài liệu này sẽ giúp bạn.

ITZone via IDE Academy