Cách thiết kế giao diện di động thân thiện với người dùng

Feb 12, 2026

Cách

Một số thiết kế di động bị ảnh hưởng đến một vấn đề: chúng có thể trông tuyệt vời trên bề mặt, nhưng bắt đầu sử dụng chúng và bạn sớm phát hiện ra rằng một yếu tố toàn diện quá quan trọng đã bị bỏ qua: công thái học. Nghệ thuật tạo ra các thiết kế phù hợp với cơ thể con người (chứ không phải cách khác) là một trong những anh hùng vô danh thực sự của thế giới thiết kế.

Công thái học luôn rất quan trọng đối với các nhà thiết kế công nghiệp, nhưng nó đang ngày càng trở nên quan trọng đối với các nhà thiết kế kỹ thuật số. Tại sao? Bởi vì điện thoại thông minh và máy tính bảng đang thay đổi cách chúng ta tương tác với các thiết kế kỹ thuật số. Chúng tôi không còn chỉ chỉ sử dụng bàn phím cồng kềnh và một con chuột để nói với những người bạn kỹ thuật số của chúng ta phải làm gì. Bây giờ nó trực tiếp hơn, thể chất nhiều hơn. Chúng tôi giữ các thiết bị của chúng tôi. Chúng tôi nhấn vào họ. Chúng tôi véo họ. Chúng tôi yêu thương đột quỵ họ.

Trái phiếu ngày càng lớn này với các nhà thiết kế lực lượng thiết bị di động yêu quý của chúng tôi không chỉ nghĩ về cách một vẻ ngoài thiết kế và cảm nhận, mà còn là các khía cạnh vật lý của việc sử dụng nó. Nó buộc các nhà thiết kế nghĩ về cách người dùng giữ và tương tác với điện thoại thông minh và máy tính bảng của họ; Khoảng bao nhiêu màn hình chúng có thể thoải mái với nhau và làm thế nào một thiết kế sẽ cảm thấy trong tay. Nó buộc các nhà thiết kế nghĩ về công thái học của thiết kế di động.

Vậy làm thế nào để bạn thực hiện việc tạo ra một thiết kế di động là công thái học và do đó thoải mái khi sử dụng?

01. Ra khỏi văn phòng

Ngay cả trước khi bạn bắt đầu nghĩ về các thiết kế có thể, hãy ra khỏi văn phòng để thực hiện một số quan sát đầu tiên. Dành một buổi sáng hoặc buổi chiều đang nhìn vào nơi, khi nào, làm thế nào và tại sao mọi người đang sử dụng thiết bị di động của họ.

Hãy ghi lại cách mọi người đang giữ và tương tác với thiết bị của họ, những gì họ có thể đang làm vào thời điểm đó và các loại thách thức và phiền nhiễu mà họ có thể phải tranh cãi. Thông tin này sẽ giúp thông báo cho công thái học của thiết kế, và có nghĩa là khi nói đến việc thử nghiệm một thiết kế, bạn có thể kiểm tra các kịch bản mà bạn biết thực sự xảy ra trong thế giới thực.

02. Thiết kế cho nhiều lần giữ

The three main holds used for a smartphone, and the frequency which they’re typically used — Ba giữ chính được sử dụng cho điện thoại thông minh và tần số mà chúng thường được sử dụng

Nếu bạn quan sát mọi người sử dụng thiết bị di động, bạn sẽ sớm thấy rằng họ sử dụng một Nhiều loại giữ khác nhau . Sự đa dạng của các tổ giữ được sử dụng và tần suất mà người dùng thay đổi nắm giữ của họ có nghĩa là điều quan trọng là thiết kế với nhiều lần lưu trong tâm trí.

Ví dụ: bắt đầu một thiết kế điện thoại thông minh với việc sử dụng một tay trong tâm trí (vì đây là thử thách nhất), nhưng luôn thử nghiệm các thiết kế trên một phạm vi giữ để xem mỗi trong số họ thoải mái như thế nào.

03. Đặt các điều khiển phổ biến trong tầm với

Green areas are easy to reach, amber takes more effort and red areas are hard to reach — Khu vực xanh dễ dàng tiếp cận, Amber mất nhiều nỗ lực và khu vực màu đỏ rất khó tiếp cận

Đặt các điều khiển được sử dụng thường xuyên, chẳng hạn như các nút và liên kết, nơi chúng có thể dễ dàng đạt được bằng ngón tay hoặc ngón tay cái. Trung và dưới cùng của màn hình là các khu vực tốt để sử dụng, mặc dù các góc dưới cùng có thể khó chạm vào khi một thiết bị đang được giữ chỉ trong một tay (Đọc thêm đây ).

Nó vẫn là quy ước để đặt các menu ở trên cùng của màn hình. Tuy nhiên, đây có thể là một khu vực khó tiếp cận, do đó, đó là một ý tưởng tốt để cũng hỗ trợ một hành động vuốt để hiển thị menu.

04. Đặt nội dung trên các điều khiển

The BBC iPlayer iPad app places controls in easy to reach areas and below content — Ứng dụng BBC iPlayer iPad đặt các điều khiển trong các khu vực dễ dàng để đạt được và bên dưới nội dung

Bạn không muốn ngón tay hoặc ngón tay cái của ai đó che khuất nội dung khi chúng chạm vào màn hình, vì vậy hãy đặt nội dung trên các điều khiển. Cũng đảm bảo rằng thông tin chính không ở trong một khu vực của màn hình nơi có thể dễ dàng bị che khuất bởi ngón tay hoặc ngón tay cái - chẳng hạn như các góc dưới cùng, thường được che đậy khi điện thoại thông minh được giữ trong một tay.

05. Thiết kế với chế độ chân dung trong tâm trí

Mặc dù việc giữ có thể thay đổi, một thứ phù hợp hơn nhiều đối với cả điện thoại thông minh và máy tính bảng là xu hướng cho mọi người giữ chúng theo chiều dọc trong phần lớn thời gian. Giữ ngang thường được sử dụng cho các tác vụ cụ thể, chẳng hạn như xem video hoặc ảnh, nhưng đây là ngoại lệ, không phải định mức.

Tất nhiên một thiết kế di động nên hỗ trợ lý tưởng cả các chế độ chân dung (dọc) và ngang (ngang), nhưng trừ khi bạn đang thiết kế một video hoặc ứng dụng hoặc ứng dụng nặng ảnh, thiết kế với chế độ chân dung.

06. Thiết kế cho ngón tay cái

The Spotify app is designed to be thumb-friendly, with large tap targets — Ứng dụng Spotify được thiết kế để thân thiện với ngón tay cái, với các mục tiêu vòi lớn

Thumbs lái phần lớn các tương tác trên tất cả các tương tác trên điện thoại thông minh. Điều này là do ngón tay cái được sử dụng riêng khi di động được giữ bằng một tay và được sử dụng nhiều khi nó được giữ trong hai tay.

Thumbs lớn hơn một chút so với ngón tay, và do đó cần một mục tiêu vòi lớn hơn. Cố gắng thực hiện các mục tiêu nhấn này ít nhất 44 x 44 điểm (16 x 16mm), với ít nhất 7 điểm (2,5mm) giữa chúng. Mục tiêu Tap lớn hơn luôn tốt hơn và bạn chắc chắn không nên đi bất kỳ nhỏ nào hơn 44 x 30 điểm (16 x 11mm).

Ngay cả khi bạn đang thiết kế máy tính bảng, vẫn thiết kế cho ngón tay cái vì thiết kế sẽ hỗ trợ phương pháp chạm chính xác nhất để chạm mà nó sẽ gặp phải. Một mục tiêu vòi lớn không chỉ là tốt cho ngón tay cái, nó cũng tuyệt vời cho ngón tay.

07. Thiết kế cho cử chỉ lớn

Vì vậy, các mục tiêu vòi lớn hơn là tốt hơn. Mục tiêu vòi nào lớn hơn so với toàn bộ màn hình? Cố gắng thiết kế với các cử chỉ lớn trong tâm trí, chẳng hạn như cho phép người dùng vuốt để di chuyển về phía trước hoặc ngược trong thư viện ảnh hoặc để hiển thị một menu.

Ghi nhớ người dùng có thể không nhận ra một cử chỉ được hỗ trợ, vì vậy luôn luôn là một ý tưởng tốt để cung cấp một cách thứ cấp để làm một cái gì đó, chẳng hạn như nhấn vào một biểu tượng mũi tên để hiển thị ảnh tiếp theo.

08. Tăng vào thử thách

Trong công thái học, đôi khi bạn nghe nói về việc thiết kế phù hợp với ít nhất 95% người dùng bằng cách tạo ra một thiết kế thoải mái từ lần thứ 25 đến phần trăm người dùng 97,5. Sẽ luôn có những người dùng cực đoan rất khó để chứa - như tất cả chúng ta đều biết bạn không thể làm hài lòng tất cả mọi người, nhưng nếu bạn có thể tạo ra một thiết kế mà người dùng thách thức nhiều hơn có thể sử dụng với sự thoải mái, nó cũng sẽ hoạt động cho tất cả mọi người những người ở giữa.

Đây là lý do tại sao đó là một ý tưởng tốt để thiết kế với những người dùng và kịch bản đầy thách thức trong tâm trí. Ví dụ, hãy nghĩ về một người đi làm bận rộn đi bộ xuống đường với cà phê trong một tay và điện thoại di động ở bên kia, hoặc ai đó bị viêm khớp.

09. Giữ tương tác ở mức tối thiểu

Bạn có biết sự tương tác thiết bị di động thoải mái nhất là gì? Nó không phải là một vòi, hoặc vuốt, hoặc báo chí. Nó không có tương tác gì cả. Sự tương tác ít hơn thiết kế di động của bạn yêu cầu, bạn càng ít phải lo lắng về công thái học. Tôi luôn cố gắng giữ tương tác ở mức tối thiểu. Tàn nhẫn cắt giảm các hình thức di động, sử dụng AutoSugests và hạn chế các thông báo cho những điều mà người dùng thực sự cần phải được thông báo về.

10. Thiết kế nguyên mẫu

Bạn chỉ đơn giản là không thể đánh giá công thái học của thiết kế di động cho đến khi bạn có thể giữ nó trong tay và thử các kẹp khác nhau. Đây là lý do tại sao tôi sẽ tạo ra một thiết kế càng sớm càng tốt. Chúng tôi thích Axure. , nhưng có rất nhiều khác Công cụ tạo mẫu tuyệt vời .

Để dùng thử nhanh, bạn thậm chí có thể chạy các thử nghiệm người dùng cơ bản với các nguyên mẫu giấy đơn giản. Bản in phác thảo hoặc giấy bị mắc kẹt trên thiết bị di động sẽ cho bạn biết một số tiền đáng ngạc nhiên về công thái học.

11. Kiểm tra, kiểm tra, sau đó kiểm tra thêm một số

Bạn muốn biết một cách được đảm bảo để tạo ra các thiết kế di động công thái học? Đó là để kiểm tra các thiết kế, sau đó lặp đi lặp lại và kiểm tra, lặp đi lặp lại và kiểm tra ... và tiếp tục cho đến khi bạn có một loạt các loại khác nhau, bao gồm một loạt các thiết bị khác nhau, tất cả các báo cáo rằng thiết kế thoải mái khi sử dụng. Nó đơn giản mà.

Thiết bị di động tất nhiên được thiết kế để trở thành 'di động', vì vậy hãy ra khỏi văn phòng để kiểm tra các thiết kế trong môi trường và tình huống mà họ có thể sẽ được sử dụng trong. Các quán cà phê luôn là một nơi tốt để kiểm tra. Thiết kế thử nghiệm với như Nhiều người càng tốt (ít nhất năm hoặc sáu) và tập trung vào các tình huống khó khăn hơn, chẳng hạn như sử dụng điện thoại thông minh một tay. Nếu thiết kế hoạt động tốt khi các tương tác của người dùng bị ràng buộc nhiều hơn, nhưng nó chắc chắn sẽ xuất sắc trong phần còn lại của thời gian. Nó chủ yếu là bằng cách liên tục thử nghiệm và lặp đi lặp lại rằng bạn có thể tạo ra các thiết kế di động thực sự tiện dụng.

Bài viết này ban đầu xuất hiện trong tạp chí Net. Đăng ký tại đây.

Những bài viết liên quan:

16 tài khoản instagram UX / UI Bạn phải tuân theo
20 công cụ khung dây tốt nhất
5 xu hướng thiết kế UX lớn nhất cho năm 2018

Cách thiết kế giao diện di động thân thiện với người dùng

01. Ra khỏi văn phòng

02. Thiết kế cho nhiều lần giữ

03. Đặt các điều khiển phổ biến trong tầm với

04. Đặt nội dung trên các điều khiển

05. Thiết kế với chế độ chân dung trong tâm trí

06. Thiết kế cho ngón tay cái

07. Thiết kế cho cử chỉ lớn

08. Tăng vào thử thách

09. Giữ tương tác ở mức tối thiểu

10. Thiết kế nguyên mẫu

11. Kiểm tra, kiểm tra, sau đó kiểm tra thêm một số

Cách - Các bài báo phổ biến nhất

Cách vẽ cổ và vai

Xây dựng một blog phản ứng nhanh với Svelte và Sapper

Tạo một cảnh với Renderman cho Maya

Xây dựng một thành phần đầu thân thiện với SEO cho NextJS / React

Cách tạo hiệu ứng gõ hoạt hình

Làm thực vật thực tế trong rạp chiếu phim 4D

Vẽ một bức chân dung trong dầu

Cách vẽ run rẩy ma thuật

Thể loại