Thiết kế trường văn bản tốt hơn ‍

May 09 2022
15 lưu ý khi thiết kế trường văn bản crack
Giới thiệu Tôi không phải là bậc thầy về lĩnh vực văn bản, nhưng tôi đã làm được nhiều việc với chúng trong nhiều năm. Tôi cố gắng logic theo những gì có ý nghĩa và tạo ra những gì dễ tiếp cận và dễ sử dụng.

Giới thiệu

Tôi không phải là bậc thầy về lĩnh vực văn bản, nhưng tôi đã làm được nhiều việc với chúng trong nhiều năm. Tôi cố gắng logic theo những gì có ý nghĩa và tạo ra những gì dễ tiếp cận và dễ sử dụng.

Có vẻ đơn giản phải không. Vâng, nó có và nó không phải.

Hầu hết những gì tôi nói đến là các trường văn bản trên các trang web với những người sử dụng máy tính để bàn hoặc máy tính xách tay. Tôi không tập trung vào khía cạnh di động của mọi thứ. Đã từng thử di chuột trên thiết bị di động .

Hãy vào đó.

NỘI DUNG— 3 PHẦN

Trường văn bản là gì?
Các phần của trường văn bản
Các trạng thái của trường văn bản

Lưu ý: Danh sách này không đầy đủ nhưng nó cung cấp hầu hết những gì bạn cần để tạo ra một trường văn bản có thể sử dụng vững chắc.

LĨNH VỰC VĂN BẢN LÀ GÌ?

Còn được gọi là hộp nhập liệu hoặc hộp văn bản. Trường văn bản trong ngữ cảnh này là một phần tử hoặc phần trên trang web hoặc ứng dụng cho phép ai đó nhập bằng chữ cái hoặc số.

Nó có phải là một trường văn bản nếu bạn có thể thêm số vào nó không? Câu hỏi hay.

Nếu bạn đặt đám cưới trực tuyến tại Elvis Chapel ở Vegas, đặt đồ ăn từ Uber Eats ở Miami hoặc làm sạch giày thể thao của bạn tại Sneaker Laundry ở Melbourne, bạn sẽ cần phải điền một số chi tiết trực tuyến để thực hiện.

Bạn sẽ sử dụng một trường văn bản.

CÁC BỘ PHẬN CỦA LĨNH VỰC VĂN BẢN

1. Thùng chứa

Vùng chứa là nền tảng của trường văn bản.

Đừng bận tâm đến việc phát minh lại bánh xe về điều này.

  • Giữ màu tô đơn giản
    Tôi khuyên bạn nên tô màu trắng bên trong. Google nói khác với tùy chọn màu xám của họ, tôi không phải là người yêu thích tùy chọn màu xám đậm với khả năng tiếp cận và màu phông chữ, v.v. Mọi người thường có màu tô xám nhạt có thể hoạt động tốt để tách nó khỏi nền trang trắng.
  • Phác thảo hoặc gạch dưới
    Tôi thích tùy chọn được phác thảo, như mục yêu thích của tôi bên dưới. Nó cung cấp một điểm tiếp xúc rõ ràng và dễ dàng. Gạch chân (một trong những tùy chọn Material Design) là phổ biến đối với Android, nhưng tôi không phải là một người hâm mộ lớn vì điểm tiếp xúc không quá rõ ràng.
  • Độ dày đường
    chứa 1px Đường chứa hoạt động tốt cho trạng thái mặc định. Hãy nhớ rằng trạng thái tiêu điểm hoạt động tốt với dòng vùng chứa dày hơn mặc định.
  • Màu và khả năng tiếp cận của dòng vùng chứa
    Truy cập vào Webaim , nhấn vào nền của trang mà vùng chứa sẽ nằm trên đó. Thêm màu bạn muốn sử dụng cho dòng Vùng chứa. Xem phần Đối tượng đồ họa ở dưới cùng. Nếu không thành công, hãy loại bỏ nó và thử một màu mới. Hầu hết các trang web không có các đường chứa rất dễ tiếp cận. Tôi đã gặp rắc rối về điều này vài lần.
  • Bán kính góc của thùng chứa Các
    cạnh hình vuông hoặc bán kính góc nhỏ hoạt động. Tùy thuộc vào bạn, nhưng tránh bán kính góc lớn vì điều này có thể không hoạt động với một số yếu tố bạn có thể cần. Góc lên đến 4px, bán kính hoạt động khá tốt.
  • Vùng điểm tiếp xúc vùng chứa
    tôi có chiều cao 44px. Tôi sẽ không đi ít hơn cho web hoặc điện thoại di động. Lên đến 48px cũng hoạt động.
  • Chiều dài thùng chứa
    Một số làm việc với diện tích mà chúng có chiều dài. Tôi muốn có các thùng chứa phù hợp với thành phần mà nó có trong đó (chẳng hạn như một phương thức) và phù hợp với những gì đang diễn ra trong thùng chứa. Có một thùng chứa dài để đặt trong độ tuổi của bạn không phải là lý tưởng. Tất nhiên, nó vẫn có thể sử dụng được. Nhưng hãy thử và làm việc với độ dài vùng chứa phù hợp với những gì được nhập vào.

Nhãn là tiêu đề của trường văn bản.

  • Có nhãn hoặc không có nhãn
    Đôi khi nhãn này có thể không cần thiết. Tôi muốn nói như một quy tắc có một.
  • Tôi có nên sử dụng nhãn kiểu Google Material ưa thích không?
    Tôi sẽ giữ cho nó đơn giản và đi cho nhãn phía trên thùng chứa. Material design thực hiện điều đó với trình giữ chỗ dưới dạng nhãn trong vùng chứa và sau đó nó di chuyển để ngắt dòng. Đối với tôi, nhãn vật liệu ngoài hộp quá nhỏ khi được lấy nét (xem bên dưới). Nếu bản sao nhãn lớn hơn, điều này sẽ hoạt động tốt hơn nhiều đối với tôi.
  • Đậm, nửa đậm, trung bình
    Điều này phụ thuộc rất nhiều vào bạn và phông chữ của bạn. Các nhãn văn bản hiện tại của tôi có trọng lượng phông chữ là 14px và trung bình (500).
  • Kích thước nhãn, màu sắc và khả năng truy cập
    Có nhãn có kích thước ít nhất 14px. Đưa nó qua Webaim và đảm bảo rằng màu sắc sẽ hoạt động.
  • Độ dài nhãn
    Giữ nó ngắn gọn, tối đa 4 từ là tốt. Không có quy tắc nào ở đây, nhưng nó là một tiêu đề cần làm rõ trường văn bản nói về cái gì. Văn bản trợ giúp / gợi ý có thể xây dựng nếu cần.

Trình giữ chỗ cho bạn biết những gì nên được đưa vào trường.

  • Không thay thế nhãn
    Một số người sử dụng trình giữ chỗ thay vì nhãn. Nó tiết kiệm không gian, nhưng trình giữ chỗ sẽ biến mất khi bạn nhấn vào trường văn bản. Material Design làm điều đó để bạn chạm vào trường văn bản và nó di chuyển đến vị trí nhãn ngắt dòng (như tôi đã lưu ý ở trên).
  • Màu và khả năng truy cập của kích thước chỗ dành sẵn
    Đưa nó qua Webaim và đảm bảo rằng màu bạn đã chọn có thể truy cập được. Tôi chọn kích thước phông chữ tối thiểu là 16px và trọng lượng phông chữ thông thường (400).

Đây là văn bản mà bạn đã nhập.

  • Bóng
    tối hơn Đặt cái này trong bóng tối hơn văn bản chỗ dành sẵn của bạn. Tôi sử dụng Hex màu xám đậm nhất # 101828 của chúng tôi
  • Kích thước
    phông chữ Kích thước phông chữ sẽ phù hợp với kích thước văn bản giữ chỗ. Tôi sử dụng font-weight 16px, thông thường (400).

Đây là bản sao biểu mẫu ngắn cung cấp thông tin hữu ích và trợ giúp ngữ cảnh cho trường văn bản.

  • Thông tin quan trọng
    Đây là thông tin quan trọng đối với trường văn bản và là phần bổ sung cho nhãn. Đó là một phụ kiện hữu ích của hãng. Văn bản trợ giúp / gợi ý là thông tin cần thiết để người dùng hoàn thành nhiệm vụ.
  • Kích thước và màu sắc văn bản
    Như với tất cả các yếu tố này, hãy đưa chúng qua Webaim và đảm bảo rằng chúng có thể truy cập được. Văn bản gợi ý trợ giúp không được lớn hơn kích thước văn bản nhãn để giữ đúng thứ bậc. Tôi có nó ở 14px và bóng sáng hơn nhãn có Hex # 475467.
  • Văn bản lỗi & các phần bị vô hiệu
    Tôi sẽ hiển thị điều này trong các phần sau. Văn bản trợ giúp / gợi ý có ba công dụng.
    - Là văn bản trợ giúp / gợi ý.
    - Là một văn bản báo lỗi (thường có màu đỏ) khi có điều gì đó sai hoặc chưa được điền vào.
    Khi trường văn bản bị vô hiệu hóa, tôi sử dụng văn bản trợ giúp / gợi ý để giải thích lý do.

Thông tin không cần thiết (nhưng hữu ích) liên quan đến trường văn bản sẽ được đưa vào chú giải công cụ. Mọi người không cần phải đọc chú giải công cụ để hoàn thành nhiệm vụ của mình.

  • Kích thước
    Có thể có một số câu trong chú giải công cụ. Không có quy tắc nào ở đây. Quy tắc của tôi là giữ nó trong 2-3 câu.
  • Không cần thiết (nhưng quan trọng)
    Đây là thông tin không cần thiết để hoàn thành nhiệm vụ. Tuy nhiên, nó có thể giải thích chi tiết những gì đã có ở đó.
  • Biểu tượng
    chú giải công cụ Biểu tượng có thể là thông tin hoặc biểu tượng dấu chấm hỏi. Không có quy tắc cứng ở đây nhưng những điều này dường như phổ biến và được hiểu rộng rãi.
  • Màu sắc biểu tượng
    Làm cho biểu tượng đủ tối để có thể truy cập được. Một lần nữa, hãy truy cập Webaim và tô màu của bạn.
  • Màu
    chú giải công cụ Tôi đi chú giải công cụ màu đen với bản sao màu trắng. Điều này phụ thuộc rất nhiều vào màu sắc trang web của bạn và chế độ tối, v.v. Điều chính ở đây là làm cho nó rõ ràng để xem trang web đằng sau nó. Vì vậy, trang web ở chế độ tối có thể có chú giải công cụ màu trắng và ngược lại đối với trang web sáng có chú giải công cụ tối.
  • Kích thước sao chép
    Tôi sẽ chọn kích thước tối thiểu là 14px. Ít nhất ở phông chữ 400 thông thường.
  • Vị trí của biểu tượng cho chú giải công cụ
    tôi đặt nó sau nhãn. Hoạt động tốt cho tôi.
  • Di chuột hoặc nhấn
    Chú giải công cụ cần phải dễ dàng truy cập. Bạn nên di chuột và xem chú giải công cụ. Có những người có nó mà bạn nhấn vào biểu tượng và xem chú giải công cụ. Cả hai đều hoạt động nhưng di chuột ít hoạt động hơn.

Đây là một biểu tượng ở đầu trường văn bản.

  • Không cần thiết nhưng hữu ích
    Đây là một con thú hiếm và có thể giúp ích trong một số trường hợp, chẳng hạn như phong bì chứa địa chỉ email hoặc thẻ ngân hàng (như ở trên) để thêm chi tiết thẻ tín dụng của bạn. Không cần phải lo lắng về điều này quá nhiều. Tôi cảm thấy thật tuyệt khi có nhưng một yếu tố không cần thiết trong trường văn bản.

Đây là biểu tượng ở cuối trường văn bản.

  • Hữu ích hơn biểu tượng hàng đầu
    Khu vực này trong trường văn bản là khu vực hữu ích hơn khu vực biểu tượng hàng đầu. Điều này có một số biểu tượng thực sự hữu ích và quan trọng. Xem và ẩn văn bản như hình trên là một ví dụ điển hình.
  • Các ví dụ khác
    Lịch (xem bên dưới) là một biểu tượng giải thích nhỏ đẹp mắt để thêm ngày. Bạn cũng có thể đặt biểu tượng micrô ghi âm giọng nói ở cùng một vị trí.

Đây là một phần tử nằm trước văn bản / số sẽ được nhập.

  • Tiền
    tệ Ký hiệu tiền tệ được thêm vào đầu tiên. Khi trường văn bản có thêm số, chúng bắt đầu sau ký hiệu đô la.
  • Tùy chọn thay thế
    Bạn cũng có thể thêm biểu tượng tiền tố bên ngoài trường văn bản (xem bên dưới). Điều này cũng hoạt động tốt nhưng nó không phải là sở thích của tôi.
  • Trường văn bản kết thúc
    Nếu bạn cần thêm phần trăm hoặc trọng lượng theo đơn vị lbs, bạn cần có các số trước rồi đến phần tử liên quan sau.
  • Tùy chọn thay thế
    Bạn cũng có thể thêm biểu tượng đủ bên ngoài trường văn bản. Thành thật mà nói, tôi chưa bao giờ thấy điều này nhưng nó có thể được thực hiện.

Điều này hiển thị khi một số ký tự giới hạn được phép trong trường văn bản.

  • Các biến thể
    Có một số cách có thể được thực hiện. Nó có thể đếm ngược đến 0 mà hoạt động tốt. Một số hiển thị tổng số được phép với số giảm, cho biết bạn đã sử dụng 122 trong số 200 ký tự được phép, ví dụ: 122/200.

12. Trạng thái di chuột

Trạng thái di chuột cho người dùng biết rằng họ đang tương tác.

  • Một số tùy chọn
    Có một số tùy chọn cho lần di chuột trên trường văn bản. Con trỏ phải thay đổi để cho thấy rằng trường văn bản có thể nhấp được và tồn tại. Vùng chứa của trường văn bản có thể chuyển sang màu bóng mờ rất nhẹ. Hộp chứa có thể trở nên tối hơn hoặc có thể dày hơn (xem phiên bản cực đoan của tôi ở trên).

Nhấn vào trường văn bản và nó được tiêu điểm.

  • Một số tùy chọn ở đây
    Theo cách tôi thích là một dòng container đậm hơn và tối hơn. Một số trang web của chính phủ làm cho dòng container tối hơn và dày hơn. Họ cũng thêm một đường bên ngoài sáng đậm vào đường chứa. Dưới đây là trường văn bản tập trung của trang web gov.uk trông như thế nào.

Khi trường văn bản có lỗi, trường đó cần được thông báo rõ ràng cho người dùng.

  • Màu đỏ là màu
    Đỏ là màu tiêu chuẩn mà tôi sử dụng. Tôi không thể nói cho tất cả các nền văn hóa nhưng màu đỏ là màu phổ biến cho các lỗi.
  • Tùy chọn
    Một số người làm cho nhãn có màu đỏ, một số làm cho dòng chứa màu đỏ và một số làm cho văn bản trợ giúp có màu đỏ. Một số làm một sự kết hợp của cả ba. Tôi đi cho dòng vùng chứa và văn bản trợ giúp màu đỏ (như trong hình trên).
  • Văn bản trợ giúp
    Điều thực sự quan trọng là văn bản trợ giúp nêu rõ rằng có lỗi và có thể làm gì để giải quyết lỗi đó. Ví dụ: nếu đó là trường bắt buộc, nó phải nêu rõ điều đó trong văn bản trợ giúp lỗi.
  • Biểu tượng có dòng chữ trợ giúp
    Nếu người dùng không nhìn rõ màu đỏ, thì có thể thông minh để có biểu tượng lỗi để hiển thị rõ ràng rằng có lỗi, hãy xem bên dưới.

Rất vui được thông báo cho mọi người về lý do tại sao trường văn bản bị vô hiệu hóa.

  • Thay đổi con trỏ
    Khi bạn di chuột con trỏ có thể hiển thị loại ký hiệu không có mục nhập kỹ thuật số nhỏ này. Đây là một dấu hiệu tốt cho thấy bạn có thể làm bất cứ điều gì. Tuy nhiên, nó không đưa ra nhiều lời giải thích tại sao.
  • Các tùy chọn để giúp mọi người nhiều hơn
    Có một số điều có thể được thực hiện để giúp đỡ mọi người khi họ nhìn thấy trường văn bản bị vô hiệu hóa. Hiển thị cho họ chú giải công cụ khi họ di chuột trên trường văn bản. Điều này giúp giải thích những gì đang xảy ra. Hoặc bạn có thể thêm một số bản sao trợ giúp hiển thị trước. Chú giải công cụ không được hiển thị trước nên đó có thể là một nhược điểm. Tuy nhiên, bạn có thể lấy thêm thông tin vào chú giải công cụ có thể hữu ích.

Nghĩ rằng tôi đã sử dụng quá nhiều các trường văn bản trong một thời gian nên đây là tôi ký tắt. Chỉ cần nhớ, các trường văn bản là các phần tử chức năng, vì vậy đừng cố gắng và quá ưa thích chúng. Material design trở nên lạ mắt và mất đi một số khả năng sử dụng trong quá trình sử dụng.

Cảm ơn bạn đã đọc

Hãy vỗ tay 50 lần nếu bạn thích bài viết này
Hãy theo dõi tôi, Guy Ligertwood , để cập nhật bài viết của tôi. Bạn có thể không muốn bỏ lỡ những điều thú vị như trường văn bản

20 câu chuyện phổ biến nhất của tôi

© Copyright 2021 - 2022 | vngogo.com | All Rights Reserved