Cách thiết kế các hình thức đáp ứng và thông thường thiết bị

Sep 17, 2025

Cách

Cho dù đó là một luồng đăng ký hoặc bước bước nhiều góc nhìn, các hình thức là một trong những thành phần quan trọng nhất của thiết kế sản phẩm kỹ thuật số - vì vậy bạn cần thiết kế chúng để chúng hoạt động hiệu quả trên thiết bị di động.

Dưới đây là cách thiết kế các biểu mẫu cho các thiết bị di động, bao gồm xem nhanh Cách sử dụng Flexbox .

01. Thiết kế cho cuộn dọc

A single column layout works better — Một bố cục cột duy nhất hoạt động tốt hơn

Bất kể kích thước thiết bị, cách dễ nhất để hoàn thành một hình thức là trong một thời trang tuyến tính. Nhiều cột làm gián đoạn động lượng của người dùng (người dùng có khả năng diễn giải các trường không nhất quán, đó là một yếu tố tiêu cực về khả năng sử dụng) và có thể dẫn đến người dùng phải dùng đến cuộn ngang.

Khi nói đến các biểu mẫu, bạn nên thiết kế các mục trong một cột: Nếu một biểu mẫu nằm trong một cột duy nhất, đường dẫn để hoàn thành là một đường thẳng xuống trang.

02. Đặt nhãn trên các trường

Place labels above form fields — Đặt nhãn trên các trường biểu mẫu

Nhãn cho người dùng biết các trường đầu vào tương ứng có nghĩa là gì. Khi chọn nơi đặt nhãn của bạn, bạn có hai tùy chọn: căn lề trái hoặc căn chỉnh trên cùng.

Các nhãn được căn trái hoạt động tốt nếu mẫu được hoàn thành trên máy tính để bàn hoặc máy tính bảng. Tuy nhiên, chúng là một giải pháp khủng khiếp cho các thiết bị di động nơi có bất động sản màn hình hạn chế. Vì các nhãn được căn gần phải cần ngồi trước trường, màn hình hẹp để lại rất ít không gian cho chính trường - đặc biệt là nếu thiết bị ở chế độ dọc. Điều này tạo ra hai vấn đề khả năng sử dụng nghiêm trọng:

Trường biểu mẫu sẽ không đủ rộng để hiển thị toàn bộ đầu vào của người dùng, khiến chúng có nhiều khả năng nhầm các phản hồi của họ và dẫn đến các hình thức sai lầm hơn được gửi
Khi người dùng được thông báo rằng họ đã nhập thông tin sai, họ có thể gặp khó khăn trong thời gian khó phát hiện và khắc phục sự cố vì chúng sẽ không thể thấy toàn bộ đầu vào không hợp lệ

Đặt nhãn phía trên trường biểu mẫu khi người dùng duyệt từ thiết bị di động sẽ đảm bảo người dùng có thể thấy độ rộng tối đa để nhập thông tin chi tiết của họ, vì bạn không cần sử dụng bất kỳ cho nhãn nào.

Viết nhãn của bạn phía trên các trường đầu vào cũng giúp bạn dễ dàng viết nhãn trường rõ ràng và có ý nghĩa, vì bạn sẽ không bị giới hạn ở một hoặc hai từ.

03. Sử dụng Ticket Targets

Tap Targets nên dễ sử dụng cho dù có kích thước của thiết bị nào chúng được hiển thị trên. Các mục tiêu lớn hơn (trường và nút đầu vào) dễ dàng hơn đối với người dùng có sự khéo léo thấp hơn, cho dù đó là một điều kiện vĩnh viễn hoặc một điều kiện tạm thời gây ra bởi môi trường.

Hiện tại, kích thước mục tiêu lớn nhất là dành cho các thiết bị cảm ứng, vì vậy bạn cần thiết kế cảm ứng đầu tiên. Điều này đảm bảo người dùng sẽ không phải phóng to để nhập văn bản hoặc chọn một tùy chọn. Các khu vực có thể nhấp được phải tuân theo quy tắc Fat Finger và không lấn chiếm các khu vực xung quanh: Pad ngón tay trung bình của người là 10 x 14mm và đầu ngón tay trung bình là 8-10mm, tạo 10 x 10 mm một kích thước mục tiêu cảm ứng tối thiểu tốt.

Nhưng không chỉ nên một mục tiêu vòi được kích thước đúng, bạn cũng nên đảm bảo có đủ dung lượng giữa các mục tiêu nhiều lần. Trên thực tế, nếu bạn đang gặp lỗi 'Chạm vào kích thước mục tiêu' trên các công cụ SEO di động, thường là do các mục tiêu vòi của bạn quá gần nhau, thay vì mục tiêu vòi thực tế là quá nhỏ.

Có thể khó đọc nội dung trên thiết bị di động, do đó, thực hiện các đầu vào 100% và đảm bảo văn bản được đặt thành ít nhất 16px (1EM) sẽ tạo ra sự khác biệt lớn. Bằng cách đó, không cần thu phóng pinch hoặc cuộn thêm sẽ được yêu cầu để đọc thông tin cần thiết.

04. Sử dụng các trường biểu mẫu HTML5

Thiết bị di động cung cấp bàn phím phần mềm tùy chỉnh cho các loại đầu vào khác nhau và các trường biểu mẫu HTML5 là cách dễ nhất để cải thiện trải nghiệm người dùng về các biểu mẫu của bạn. Các loại đầu vào này đưa ra gợi ý cho trình duyệt về loại bố cục bàn phím để hiển thị cho bàn phím trên màn hình.

Bao gồm các loại đầu vào của con số Cái gì e-mail Cái gì điện thoại Cái gì URL. và ngày và đầu vào bàn phím trên thiết bị di động của bạn sẽ cập nhật để giúp người dùng điền vào biểu mẫu dễ dàng hơn. Nó không yêu cầu bạn thêm các lớp bổ sung vào đầu vào biểu mẫu kiểu, tất cả những gì bạn cần làm là sử dụng các loại đầu vào HTML5 hợp lệ:

<input type="email" id="input-email">

05. Sử dụng Flexbox.

Hãy đối mặt với nó - thật khó để tạo ra một bố cục đáp ứng trong HTML. Hầu hết chúng ta đã vật lộn với điều này tại một điểm này hay điểm khác. Mặc dù luôn có thể thực hiện bố cục hoạt động như mong đợi bằng cách sử dụng các công nghệ chuyên biệt, quá trình này chưa bao giờ dễ dàng.

Các công nghệ để đối phó với các bố cục có cấu trúc đã đến và đi qua nhiều năm: Các nhà phát triển đã sử dụng các khung HTML, bảng HTML, bố cục dựa trên float và, gần đây hơn, các hệ thống lưới khác nhau được các khung CSS phổ biến như Bootstrap. .

Nhưng với sự ra đời của mô hình hộp linh hoạt HTML (hoặc Flexbox. ), HTML cuối cùng đã đạt được một công cụ định dạng hộp phong phú giải quyết các bố cục phức tạp, bao gồm các biểu mẫu HTML.

Flexbox cho chúng ta sự linh hoạt tuyệt vời để nhanh chóng xây dựng các hình thức đẹp. Điều quan trọng để hiểu về Flexbox là đó là một công cụ thao tác container: nhằm mục đích cung cấp một cách hiệu quả hơn để bố trí, căn chỉnh và phân phối không gian giữa các mục trong một thùng chứa, ngay cả khi kích thước của chúng không xác định và / hoặc động (do đó từ 'flex').

Điều thú vị là flexbox cho chúng ta sự linh hoạt tuyệt vời để nhanh chóng xây dựng biểu mẫu của chúng tôi mà không cần sử dụng bất kỳ truy vấn phương tiện truyền thông nào. Thêm vào đó, tất cả các trình duyệt hiện tại hỗ trợ nó.

Của chúng tôi Hướng dẫn của nhà thiết kế web về Flexbox Bài viết cho bạn biết nhiều hơn, nhưng bây giờ, hãy thực hiện một số thực hành và tìm hiểu cách tận dụng lợi thế của Flexbox để tạo ra một hình thức đáp ứng. Trước tiên, hãy xác định cấu trúc HTML cho biểu mẫu của chúng tôi:

 & lt; hình thức & gt;
& lt; ul class = "flex" & gt;
& lt; li & gt; & lt; nhãn cho = "tên đầu tiên" & gt; tên đầu tiên & lt; / nhãn & gt; & lt; "văn bản" id = "Tên đầu tiên" = "Nhập tên của bạn ở đây" & gt; / li & gt;
& lt; li & gt; & lt; nhãn cho = "tên cuối" & gt; tên cuối cùng & lt; / nhãn & gt; & lt; nhập loại = "văn bản" id = "Tên người đứng tên =" Nhập tên cuối cùng của bạn ở đây "& gt; & lt; / li & gt;
& lt; li & gt; & lt; nhãn cho = "email" & gt; email & lt; / nhãn & gt; & lt; "email" id = "email" ider = "Nhập email của bạn ở đây" & gt; / li & gt;
& lt; li & gt; & lt; nhãn cho = "điện thoại" & gt; điện thoại & lt; / nhãn & gt; & lt; "tel" id = "điện thoại" id = "Nhập điện thoại của bạn ở đây" & gt; / li & gt;
& lt; li & gt; & lt; nhãn cho = "tin nhắn" & gt; tin nhắn & lt; / nhãn & gt; & lt; textarea rows = "6" id = "tin nhắn" Trình giữ chỗ = "Nhập tin nhắn của bạn tại đây" & gt; & lt; & lt; / Li & GT;
& lt; li & gt; & lt; nút loại = "gửi" & gt; gửi & lt; / nút & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; / form & gt;

Lưu ý rằng mỗi mục danh sách trong biểu mẫu của chúng tôi có một lớp flex. . Lớp này xác định container Flex ở dạng của chúng tôi. Một trong những lợi ích lớn của Flexbox là khả năng sử dụng bất kỳ yếu tố HTML nào để xác định các thùng chứa và các phần tử của nó.

Bạn có thể áp dụng kiểu dáng flexbox cho bất kỳ yếu tố HTML nào, điều đó có nghĩa là bạn có thể dễ dàng restyle và giải phóng các phần tử độc lập với nhau. Hãy nhớ rằng Flexbox chỉ là một cơ chế tạo kiểu, có nghĩa là bạn có thể thêm và loại bỏ nó theo ý muốn.

Hãy xác định các thùng chứa flex trong CSS của chúng tôi. Ngoài ra, chúng tôi muốn trung tâm theo chiều dọc các vật phẩm Flex trên trục chéo. Thật dễ dàng để chỉ định rằng, chúng ta chỉ cần thiết lập quy tắc CSS đơn giản:

 .flex li {
Hiển thị: Flex;
Flex-Wrap: Wrap;
Căn chỉnh các mặt hàng: trung tâm;
}

Bước tiếp theo là chỉ định các chiều rộng cho các mục Flex. Các yêu cầu chính:

Nhãn phải ít nhất 100px và nhiều nhất 200px
Các yếu tố hình thức xuất hiện sau khi các nhãn phải có ít nhất 200px

Điều này cung cấp cho chúng ta những gì? Mỗi nhãn và phần tử biểu mẫu liên quan của nó sẽ được hiển thị trên một hàng ngang duy nhất khi chiều rộng của biểu mẫu tổng ít nhất 300px (hãy nhớ, chúng tôi đang sử dụng nhãn được căn chỉnh tại đây).

 .flex & gt; Li & GT; nhãn {
Flex: 1 0 100px;
chiều rộng tối đa: 200px;
Không thể
.flex & gt; Li & GT; Nhãn + * {
Flex: 1 0 200px;
}

Cuối cùng, đối với nút Gửi, đó cũng là một mục Flex, chúng tôi xác định một vài kiểu cơ bản:

 .flex li nút {
Biên độ: Tự động;
Đệm: 22px 46px;
}

Như bạn có thể thấy, với đánh dấu tối thiểu và sức mạnh của Flexbox, chúng tôi đã xây dựng một hình thức đáp ứng.

Với nhiều người dùng hơn mang theo thiết bị di động, điều quan trọng là mang đến trải nghiệm thân thiện với người dùng trên bất kỳ thiết bị nào. Điểm chính là thích ứng với cả nhu cầu của người dùng và khả năng của thiết bị.

Bài viết này ban đầu được công bố trong số 287 của Tạp chí Net. , Tạp chí cho các nhà thiết kế và nhà phát triển web chuyên nghiệp - cung cấp các xu hướng, công nghệ và kỹ thuật mới nhất mới nhất. Theo dõi Net ở đây.

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

Tạo các hình thức và bảng đáp ứng
Bắt đầu với khả năng truy cập web
7 công cụ tuyệt vời để kiểm tra thiết kế web đáp ứng của bạn

Cách thiết kế các hình thức đáp ứng và thông thường thiết bị

01. Thiết kế cho cuộn dọc

02. Đặt nhãn trên các trường

03. Sử dụng Ticket Targets

04. Sử dụng các trường biểu mẫu HTML5

05. Sử dụng Flexbox.

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

Cách đơn giản hóa Tạo hình Blend trong Maya

Sử dụng Brain.js để xây dựng mạng lưới thần kinh

Cách vẽ một con sói

Xây dựng trang đích chia tách màn hình hoạt hình

Cách sử dụng Adobe Capture CC

Cách tạo nhân vật hoạt hình Furry

12 mẹo cho ánh sáng 3D thực tế

10 Hướng dẫn hàng đầu Houdini

Thể loại