Theo ngôn ngữ hình học, trục z là trục đo khoảng cách trên và dưới trục x và trục y. Giải thích đơn giản cho những kẻ ngủ gật trong tiết hình học như chúng ta: đó là cách chúng ta mô tả các bảng (panels) và các lớp (layers) nằm trên hoặc dưới nhau.
Việc thiết kế trên trục z đơn giản là kết hợp vật lý ba chiều — được biểu diễn bằng trục z — vào thiết kế giao diện của chúng ta. Đó không chỉ là là mô phỏng chiều sâu thực tế bằng đổ bóng chữ của văn bản và sự nổi bật các nút bấm, mà còn là một giao diện được tạo thành từ các thành phần tồn tại trên các lớp riêng biệt và di chuyển độc lập với nhau.
Như Andy Clarke đã lưu ý, trang web là một phép ẩn dụ đã lỗi thời cho những gì chúng ta đang thiết kế ngày nay. Không bền như mực trên giấy, một trang web là một loạt các hình ảnh sống động được tạo nên từ nhiều cách kết hợp khác nhau. Các ứng dụng yêu cầu chúng ta xem xét rằng chúng có đem lại sự vui vẻ hay không, và thậm chí các trang web tiếp thị tĩnh cần các thành phần thiết kế có thể tái sử dụng để có thể thích ứng với các nhu cầu nội dung khác nhau.
Bằng cách sử dụng trục z để đặt các phần tử giao diện ở trên hoặc dưới các phần tử khác, chúng tôi có thể tạo ra các hệ thống thiết kế tốt hơn, linh hoạt và trực quan hơn khi sử dụng.
Sử dụng trục z để giải quyết các vấn đề về thiết kế
Trong khi vật lộn với những hạn chế của việc sử dụng một giao diện làm việc trên nhiều màn hình, tôi thường gặp phải các vấn đề giống nhau. Tôi phải đặt cái này ở đâu? Làm thế nào để thực hiện điều này hiệu quả trên màn hình cảm ứng? Tôi có thể cho hiển thị những gì ngay lập tức, và có thể ẩn những gì?
Câu trả lời không hề dễ dàng, nhưng may mắn thay chúng ta có thể dựa vào trục z khi không có pixel phụ. Bạn có bảng tùy chọn không phù hợp? Bạn cố gắng thêm bộ lọc nhưng giao diện người dùng quá lộn xộn làm những bộ lọc kia trở nên vô nghĩa? Khi bạn đã hết dung lượng và cần tìm kiếm giải pháp thông minh, hãy nhớ rằng bạn có cứu tinh là không gian thiết kế ba chiều.
Việc tạo một giao diện hoạt động liền mạch trên trục z yêu cầu hai yếu tố quan trọng: các lớp và sự chuyển tiếp.
1. Lớp
Sự kết hợp giữa các lớp là chìa khóa cho việc thiết kế trên trục z, vì các lớp là cách chúng ta phân biệt các cấp ở trên và dưới với nhau. Một lớp có thể chứa một phần tử giao diện người dùng chỉ ở trên phần đầu trang web hoặc có thể xuất hiện toàn màn hình và biến mất khi cần thiết. Tuy nhiên, khi bạn kết hợp các lớp, mỗi lớp phải có mục đích — một lý do tồn tại — và được sử dụng nhất quán trên toàn bộ trang web để giúp người dùng hiểu rõ hơn về thiết kế của bạn.
Ví dụ, một bảng điều khiển bao phủ toàn bộ giao diện phải là một trong những chức năng quan trọng nhất trên trang web. Mặt khác, một tùy chọn trong bảng điều khiển bí mật xuất hiện từ phía sau một đối tượng khác nên liên quan đến những gì ở trước nó, nhưng ít quan trọng hơn.
MENUS
Nói chung, những thứ nằm trên trục z ở tọa độ càng cao thì nó càng quan trọng. Menu điều hướng chính thường được đặt ở nơi cao hơn các phần khác; chúng có thể chiếm toàn bộ màn hình xem bên dưới, chúng có thể đứng ở phía đầu trang web hoặc có thể được truy cập bằng cách phóng to đến bản menu lớn hơn.
Teehan + Lax đã phát triển rất mạnh điều này với lớp phủ menu trên trang web của họ. Menu của trang web không chỉ là một cửa sổ bật lên mà giống như là một tuyên ngôn về quy mô của họ : “Hãy nhìn vào menu của chúng tôi đi!”. Ảnh động trượt kết hợp với lớp màn hình mới đã thu hút sự chú ý của người dùng, trong khi đó kích thước phông chữ và menu liên kết lớn hơn bình thường đã cung cấp nhiều nội dung hơn thanh điều hướng chính thông thường, và một lớp riêng biệt sẽ có thể được cân nhắc để sử dụng.
Tôi có thích kiểu trình bày menu ấn tượng như này không? Có chứ. Liệu tôi có nghĩ rằng đó là phương pháp hay nhất mà chúng tôi nên kết hợp vào mọi trang web bản thân mình xây dựng? Không đời nào. Không phải mọi trang web đều cần sự tinh tế ấn tượng đó.
Nhưng tôi thích cách kiểu trình bày này truyền cảm hứng cho tôi để suy nghĩ về một menu như là một phần của nội dung bên trong nó và của chính nó, chứ không phải là những giao diện được thiết kế xấu và không được chăm chút. Teehan + Lax nhấn mạnh việc trình bày một menu cho người dùng và làm thế nào để nó có thể có ích hơn là việc chỉ nhảy lên hoặc trượt qua từ bên trái - đây có thể là một cơ hội mang đến sự bất ngờ và hài lòng.
NÚT HÀNH ĐỘNG
Các nút tác vụ chính, chẳng hạn như đăng ký hoặc thêm bài đăng mới, thường được đặt phía trên các phần tử khác trên trục z. Thật dễ dàng để biết sự quan trọng của một ứng dụng khi nó được đặt nằm trên mọi thứ khác, và ta có thể lấy một ví dụ với thanh trò chuyện của Facebook.
Tại thời điểm này, rõ ràng Facebook cho rằng nhắn tin là tính năng quan trọng nhất của họ. (Nếu bạn không cảm thấy thuyết phục, Facebook cũng có ứng dụng Messenger riêng biệt và gần đây đã trả 19 tỷ USD cho What’s App trong một thương vụ mua lại và sát nhập hồi đầu năm 2014.) Vì các lớp cho phép các phần tử vẫn cố định ở một nơi trong khi mọi thứ khác di chuyển xung quanh chúng, do vậy các nút tác vụ trôi nổi dễ dàng trở nên nổi bật hơn mà không chiếm nhiều “mảnh đất” có giá trị trên màn hình.
Trục z cung cấp cho Facebook một cách dễ dàng hơn để giữ tác vụ nhắn tin ở vị trí trung tâm trên cùng của trang, và ngay cả khi tôi không thích việc phải bấm vào tài khoản của bạn bè và gia đình mình, thì có vẻ việc nhắn tin vẫn hoạt động khá tốt. Đối với những khách hàng muốn một nút “nổi bật” hơn một chút, việc sử dụng trục z để mang lại một lớp riêng sẽ khiến cho chúng trông thanh lịch hơn.
KỂ CHUYỆN (STORYTELLING)
Các đối tượng trên các lớp khác nhau của trục z có thể di chuyển với tốc độ khác nhau khi bạn cuộn trang lên xuống. Hiệu ứng này — thường được gọi là thị sai - được tiên phong trong trò chơi điện tử, nhưng nó dần trở nên phổ biến trong thiết kế tương tác. Khi các đối tượng di chuyển với tốc độ khác nhau, nó tạo ra sự xuất hiện của chiều sâu và mô phỏng sự trôi qua của thời gian, khiến cho thị sai trở thành một công cụ mạnh mẽ của việc kể chuyện trực tuyến.
Việc sử dụng thị sai quá mức theo phong trào bắt mắt đã bị chỉ trích một cách thích đáng , nhưng khả năng di chuyển các lớp độc lập với nhau cho phép chúng ta tạo ra những câu chuyện trên web, nhưng chúng sẽ không hiệu quả nếu như thiếu video. Các trang web như Let’s Free Congress và Inception Explained sử dụng thanh cuộn không đồng bộ để biến infographic ( trình bày thông tin bằng hình ảnh trực quan) phẳng thành những câu chuyện trực quan. Bằng cách chia nhỏ các phần tử bằng việc sử dụng các lớp, mỗi trang có thể mở ra ở tốc độ riêng trong khi người dùng kiểm soát tốc độ của mình.
Các nhà thiết kế web luôn làm việc trong giới hạn của các màn hình phẳng, dựa trên pixel, và họ buộc các tương tác phức tạp vào hai trục thị giác. Các lớp trên màn hình phẳng là một bước nhảy cóc, nhưng cũng là một điều quan trọng; đó là bước đầu tiên hướng tới việc tương tác đa chiều thực chỉ cách đây vài năm. Bằng cách tạo các mẫu phân lớp trong giao diện, chúng tôi giúp chuẩn bị người dùng — và chính chúng ta — cho những gì đang diễn ra.
2. Hiệu ứng chuyển tiếp (transitions)
Khi bạn sử dụng các lớp trong thiết kế giao diện, điều quan trọng bạn cần làm là phải bao gồm các hình ảnh động làm trơn tru độ chuyển tiếp giữa các lớp. Sự chuyển tiếp của hình ảnh động phục vụ một số chức năng quan trọng: giúp giảm bớt khả năng di chuyển thô của trang, mô tả nơi bạn đi và đến và cung cấp sự liên quan của thông tin trên các lớp mới với mọi thứ khác.
TRƯỢT (SLIDING)
Hiệu ứng trượt là một trong những cách chuyển tiếp hình hoạt phổ biến nhất bởi vì quá trình chuyển đổi tương đối dễ thực hiện và dễ hiểu. Menu điều hướng, bảng ẩn - ta chỉ cần trượt chúng ra nhanh bất cứ khi nào cần, phải không? Nghe có vẻ đơn giản, nhưng hiệu ứng trượt đòi hỏi nhiều sự chăm chút hơn bạn nghĩ.
Menu bên trái, được sử dụng trong nhiều ứng dụng phổ biến dành cho thiết bị di động bao gồm Gmail, là một ví dụ hoàn hảo. Khi được kích hoạt, menu của Gmail sẽ không trượt đi; nhưng cửa sổ chính sẽ trượt sang phải, để lộ menu ở bên trái bên dưới hộp thư đến của bạn.
Những sự khác biệt có vai trò khá quan trọng, bởi vì khả năng nhìn thấy một vài từ đầu tiên của mỗi dòng chủ đề khiến hộp thư đến vẫn luôn hoạt động ngay cả khi menu được đính kèm; nếu không có sự khác biệt đó, hộp thư đến sẽ trở nên vô nghĩa hơn bao giờ hết. Các trang web trên điện thoại di động đang học hỏi về tương tác này cần lưu ý — trượt một menu bên trái trên đầu trang web thường khiến người dùng thấy bối rối và bị quấy rầy hơn là trượt sang chế độ xem chính.
Bạn cũng có thể trượt các phần tử hiện có ra khỏi chế độ xem để hiển thị các bảng ẩn. Tweetlist trượt bàn phím xuống để hiển thị các tùy chọn tweet bổ sung như gắn thẻ địa lý hoặc đính kèm ảnh. Đó là một cách thông minh để hiển thị các tính năng phụ không cần hiển thị mọi lúc và việc sử dụng mặt còn lại của bàn phím đã giúp ích cho việc gửi một tweet.
PHÓNG TO (ZOOMING)
Hoạt ảnh có thể thu phóng đã xuất hiện từ khá lâu, nhưng việc nó được sử dụng thường xuyên trong iOS 7 của Apple đã giúp đưa cả mức độ và tính phổ biến của hoạt ảnh lên tầm cao mới. Một số người cho rằng việc phóng to được sử dụng trong toàn bộ hệ điều hành - đặc biệt là khi mở và đóng các ứng dụng — làm cho người xem cảm thấy đau đầu. Khi điều này xảy ra, chúng tôi sẽ cần phải hiểu sự đa dạng của việc sử dụng việc thu phóng để chuyển đổi từ lớp này sang lớp khác, và tại sao một số loại thu phóng có thể có nhiều chuyển động hơn so với các loại khác.
Mở rộng hoặc thu hẹp các đối tượng đơn lẻ là một hoạt ảnh phổ biến trong vũ trụ Apple kể từ khi phát hành Mac OS X và ra mắt dock (ổ cắm). Hiệu ứng thu phóng đã lách chân vào thế giới di động qua iPhone, và người dùng nhanh chóng làm quen với việc chạm vào một bức ảnh và phóng to nó để xem chi tiết hơn.
Trong trường hợp ảnh, phóng to là một ảo ảnh đơn giản được tạo ra bằng cách phóng to hình ảnh. Mọi thứ xung quanh bức ảnh vẫn được giữ nguyên; chỉ chính bức ảnh đó mới chuyển động.
Hiệu ứng zoom được sử dụng trong iOS 7 thì phức tạp hơn. Nó hoạt động bằng cách di chuyển "camera" vào và ra khi bạn mở và đóng các ứng dụng để mọi thứ trên màn hình thay đổi, không chỉ một đối tượng. Ví dụ: khi bạn đóng ứng dụng, cửa sổ ứng dụng sẽ co lại thành biểu tượng trên màn hình chính. Xem hậu cảnh phía sau màn hình và bạn sẽ thấy tất cả các đối tượng màn hình chính khác cũng phóng to lại thành chế độ xem.
Sự khác biệt chính này — phóng to máy ảnh thay vì một phần tử đơn lẻ — tạo ảo giác thật hơn nhiều: đưa góc nhìn của người xem tới một cấp độ mới trên trục z. Sự thay đổi mô phỏng trong góc nhìn đó khiến người dùng ngạc nhiên bằng cách giới thiệu một yếu tố siêu thực tế: nó bắt chước hiệu ứng vật lý trong thế giới thực, trong khi tạo ra một hiệu ứng không thể có trong cuộc sống thực. Sẽ không có gì đáng ngạc nhiên khi các nhà thiết kế đang háo hức tận dụng các khả năng mà nó cung cấp, bất chấp những tác dụng phụ tiềm ẩn.
Thử nghiệm thiết kế này từ Creative Dash cho thấy việc phóng to camera hết cỡ cho phép chúng tôi sử dụng không gian trong quá trình chuyển tiếp xung quanh các trình duyệt. Nền tảng web của chúng tôi vừa sâu vừa rộng, và thử nghiệm này tận dụng lợi thế của cả hai — mặc dù độ sâu thu phóng cực đại có thể khiến cho một số ít người dùng cảm thấy đau đầu, chóng mặt .
Foursquare đã sử dụng một phiên bản tinh tế hơn nhiều trong việc phóng to camera để thể hiện chi tiết bản đồ. Bạn không đi xa về phía trước, nhưng việc phóng to củng cố quan niệm rằng bạn đang đi đến một mức độ thông tin sâu hơn.
Cho dù bạn áp dụng thu phóng cho một đối tượng hay toàn bộ chế độ xem, điều quan trọng là hoạt ảnh phải nhất quán với hệ thống phân cấp thông tin bạn đang sử dụng. Khi bạn di chuyển máy ảnh ra, bạn sẽ ở tầm nhìn bao quát hơn, trong khi phóng to sẽ cung cấp nhiều chi tiết hơn.
CÁC CHẾ ĐỘ CHUYỂN TIẾP KHÁC
Trượt và phóng to là hai trong số các hiệu ứng chuyển động hoạt ảnh phổ biến nhất được sử dụng ngày nay, nhưng vẫn còn các lựa chọn khác, bao gồm lật hoặc gấp.
Đối tượng ba chiều có hai (hoặc nhiều) cạnh, nhưng hầu hết giao diện người dùng giống như mặt trăng: chúng có mặt “sáng” luôn hiển thị và mặt “tối” mà chúng ta không bao giờ thấy. Lật một đối tượng trên sẽ tạo ra một không gian trực quan mới dễ hiểu và dễ nhìn hơn cho người dùng. Nhược điểm duy nhất? Hiệu ứng lật thường chậm.
Trong khi hiệu ứng lật đôi khi được áp dụng để tạo ra một cảm giác giống như tạp chí hơn vì 180 độ là một quá trình chuyển đổi lớn; nó thường khiến ta cảm thấy chậm và rối rắm. Trong bối cảnh tốc độ là điều quan trọng, thời gian mà một cú lật thêm vào tương tác thường không đem lại nhiều lợi ích. Do vậy, nếu được triển khai ở đúng nơi đúng cách, nó có thể trở nên tuyệt vời. Layout dựa trên thẻ (card-based layout) cung cấp nhiều cơ hội để lật các đối tượng và tiết lộ thêm thông tin.
Điều gì sẽ xảy ra tiếp theo?
Trung tâm xử lý dựa trên cử chỉ, giao diện ba chiều — bất kỳ công nghệ nào nằm ở ranh giới xa nhất mà chúng ta có thể nhìn thấy, chúng ta sẽ chuẩn bị tốt hơn để thích ứng với kỹ năng của mình nếu hiểu rõ về các nguyên tắc thiết kế mang đến thông tin chứ không chỉ là các thủ thuật trực quan để thiết kế mọi thứ chỉ với dạng hộp và màu sắc. Cũng giống như một khi các nhà thiết kế trong in ấn đã học cách thể hiện tài năng của họ trên trang web, chúng ta cần đưa khả năng của mình đi xa hơn là chỉ ở trên màn hình — và sử dụng được trục z một cách thành thục sẽ là một khởi đầu tuyệt vời.