• Giới thiệu
    • Multimedia
    • Arena Multimedia
    • Tại sao chọn Arena Multimedia?
    • Cơ sở vật chất
    • Cộng đồng nói về Arena
    • Nhân vật truyền cảm hứng
    • Hỏi & đáp
  • Đào tạo tuyển sinh
    • Đào tạo
    • Chương trình đào tạo
    • Phương pháp đào tạo
    • Học phí
    • Tuyển sinh
    • Kết quả thi tuyển
    • Thông tin tuyển sinh
    • Lịch tuyển sinh
    • Tài liệu tuyển sinh
    • Đề thi mẫu
  • Gallery
    • Đội ngũ giảng viên
    • Đồ án nổi bật
    • Hoạt động học viên
    • Arena Face
    • Học viên tiêu biểu
    • Câu chuyện học viên
    • Portfolio học viên
  • Tin tức – sự kiện
    • Tin tức
    • Tin Arena
    • Tin Multimedia
    • Tin Báo chí
    • Theo dấu chân Alumni
    • Arena Multimedia Global
    • Sự kiện
    • Cuộc thi
    • Cuộc thi The TrendZ
    • Kỳ thi lớn nhất cuộc đời
  • Liên thông – Việc làm
    • Đối tác liên thông
    • Hỗ trợ tuyển dụng
    • Nghề nghiệp
    • Tin tuyển dụng
  • Liên hệ
  • Giới thiệu
    • Multimedia
    • Arena Multimedia
    • Tại sao chọn Arena Multimedia?
    • Cơ sở vật chất
    • Cộng đồng nói về Arena
    • Nhân vật truyền cảm hứng
    • Hỏi & đáp
  • Đào tạo tuyển sinh
    • Đào tạo
    • Chương trình đào tạo
    • Phương pháp đào tạo
    • Học phí
    • Tuyển sinh
    • Kết quả thi tuyển
    • Thông tin tuyển sinh
    • Lịch tuyển sinh
    • Tài liệu tuyển sinh
    • Đề thi mẫu
  • Gallery
    • Đội ngũ giảng viên
    • Đồ án nổi bật
    • Hoạt động học viên
    • Arena Face
    • Học viên tiêu biểu
    • Câu chuyện học viên
    • Portfolio học viên
  • Tin tức – sự kiện
    • Tin tức
    • Tin Arena
    • Tin Multimedia
    • Tin Báo chí
    • Theo dấu chân Alumni
    • Arena Multimedia Global
    • Sự kiện
    • Cuộc thi
    • Cuộc thi The TrendZ
    • Kỳ thi lớn nhất cuộc đời
  • Liên thông – Việc làm
    • Đối tác liên thông
    • Hỗ trợ tuyển dụng
    • Nghề nghiệp
    • Tin tuyển dụng
  • Liên hệ
Đăng ký
Trang chủTin tức - sự kiệnTin MultimediaCách để thiết kế web có độ phản hồi cao và tương thích các thiết bị

Cách để thiết kế web có độ phản hồi cao và tương thích các thiết bị

Post on Thứ Tư, 13-12-2017 -
Lượt xem: 634
  • Facebook
  • Twitter
  • LinkedIn
  • Copy Link

Làm sao để thiết kế các biểu mẫu và làm chúng hoạt động hoàn hảo trên các thiết bị di động? Đừng bỏ qua những lời khuyên bổ ích sau đây từ các chuyên gia.

Dù là các biểu mẫu cho việc đăng ký thông tin hoặc một dãy các biểu mẫu đa chiều, thì biểu mẫu là một trong những thành phần quan trọng nhất của bản thiết kế sản phẩm kỹ thuật số – nên bạn cần thiết kế chúng sao cho chúng hoạt động hiệu quả trên thiết bị di động.

1. Thiết kế cuộn theo chiều dọc

Bố trí thành cột đơn sẽ hiệu quả hơn

Bất kể kích thước của thiết bị là bao nhiêu, cách đơn giản nhất để hoàn thành là thiết biểu mẫu theo kiểu thẳng. Quá nhiều cột có thể làm giảm và ảnh hưởng mức độ chú ý của người dùng (người dùng chắc hẳn sẽ nói rằng những khu vực để điền dữ liệu không có tính nhất quán, đây là một yếu tố không mấy tích cực khi xét đến tính khả dụng) và có thể bắt người dùng buộc lòng phải sử dụng theo chiều ngang.

Khi nhắc đến việc bố trí 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 một biểu mẫu nào đó đã được chứa trong một cột duy nhất, thì việc còn lại để hoàn thành là chúng ta chỉ cần một đường kẻ thẳng xuống cho trang đó là đủ

2. Hãy đặt nhãn dán lên phía trên các trường thuộc tính (khu vực để nhập liệu)

Đặt nhãn dán trên vị trí của các trường thuộc tính tại biểu mẫu

Nhãn dán cho người dùng biết những trường thuộc tính đầu vào tương ứng nghĩa là gì. Khi bạn chọn nơi để đặt nhãn, bạn sẽ có hai lựa chọn: dồn hết sang bên trái hoặc đặt lên phía trên cùng.

Những nhãn dán được đặt thẳng hàng theo bên trái sẽ hoạt động tốt nếu biể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 không phải là giải pháp tốt nếu không muốn nói sẽ trở nên khủng khiếp cho các thiết bị di động, nguyên nhân là do sự giới hạn của màn hình. Vì các nhãn dán ở bên trái, phải được đặt ở phía trước của trường thuộc tính, với một màn hình bị hẹp sẽ để lại không gian rất ít cho trường thuộc tính – đặc biệt khi thiết bị đang ở chế độ xoay thẳng. Điều này tạo ra hai vấn đề nghiêm trọng xét về tính khả dụng:

  • Trường thuộc tính trên biểu mẫu sẽ không đủ rộng để hiển thị toàn bộ dữ liệu vào từ người dùng, điều này sẽ dễ dàng làm cho họ gõ máy nhầm và cũng như sẽ làm cho các biểu mẫu càng sai hơn khi chúng được gửi.
  • Khi người dùng được thông báo rằng họ đã nhập liệu sai thông tin, họ lại có thể gặp phải khó khăn trong việc tìm kiếm và khắc phục sự cố đó bởi nguyên nhân rằng họ sẽ khó thấy được bao quát toàn bộ các dữ liệu sai.

Khi người dùng đang duyệt bằng thiết bị di động, việc bố trí nhãn dán bên trên trường thuộc tính của biểu mẫu sẽ đảm bảo rằng họ có thể thấy được toàn bộ độ rộng để nhập thông tin cho chính xác, vì bạn có bao giờ sử dụng hết khoảng rộng đó cho nhãn dán đâu.

Việc viết nhãn dán của bạn ở phía trên khu vực nhập liệu cũng sẽ giúp cho bạn dễ dàng viết những nhãn dán rõ ràng và có ý nghĩa , vì lúc này bạn sẽ có đủ không gian cho nhiều từ hơn.

3. Sử dụng những đối tượng để chạm (tap target)

Các tap target nên mang tính dễ sử dụng ở bất kể kích thước nào trên thiết bị khi chúng được hiển thị trên màn hình. Các đối tượng lớn hơn (khu vực nhập liệu và các nút) sẽ dễ dàng hơn cho người dùng không mấy khéo léo, cho dù tình trạng đó lúc nào cũng vậy hoặc mang tính tạm thời do hoàn cảnh nào đó gây ra.

Hiện tại chúng ta thấy, đối tượng mang kích thước lớn nhất thì dành cho thiết bị cảm ứng, vì vậy bạn cần phải thiết kế những chi tiết cảm ứng đầu tiên. Điều này đảm bảo rằng người dùng sẽ không cần phóng to màn hình ra để nhập liệu hoặc chọn một tùy chọn nào đó. Các khu vực có thể nhấp vào được phải tuân theo quy tắc “ngón tay béo” (khi ngón tay trở nên quá khổ với diện tích khu vực nhập dẫn đến chạm sai vị trí) và chúng không được phép lấn vào những vùng xung quanh: kích thước ngón tay trung bình của người khi chạm là 10 x 14mm và kích thước đầu ngón tay trung bình là 8-10mm, điều này làm cho kích thước của đối tượng phải đạt tối thiểu là 10 x 10mm.

Nhưng không chỉ riêng tap target phải đúng kích cỡ, bạn cũng nên đảm bảo rằng sẽ có đủ không gian giữa chúng. Trên thực tế, nếu bạn nhận được lỗi “Tap target size” trên các công cụ SEO thiết bị di động thì điều này thường vì nguyên nhân bố trí tap target của bạn quá gần nhau chứ không phải do đối tượng đó có kích thước quá nhỏ.

Việc đọc nội dung trên thiết bị di động có thể trở nên khó khăn, vì vậy việc làm dữ liệu đầu vào đạt 100{2fbbcdce6fba7ceca857f06e76ee977e945822970f76c6e598e150c203d39bd9} và đảm bảo văn bản được để ở16px (1em) sẽ tạo ra sự khác biệt lớn. Bằng cách đó, việc kéo thả bằng nhiều ngón tay để thu phóng hoặc cuộn lên xuống nhiều lần để đọc các thông tin cần thiết sẽ không còn nữa.

4. Sử dụng các trường thuộc tính biểu mẫu của HTML5

Các thiết bị di động cung cấp các bàn phím phần mềm có thể tùy chỉnh được cho các kiểu dữ liệu đầu vào khác nhau và các trường thuộc tính biểu mẫu HTML5 là cách đơn giản nhất để cải thiện trải nghiệm người dùng khi họ sử dụng các biểu mẫu của bạn. Các kiểu nhập liệu này gợi nhắc cho trình duyệt biết về kiểu bố trí bàn phím nào để hiển thị cho bản thân chúng trên màn hình.

Các thiết bị di động ấy còn bao gồm các kiểu dữ liệu đầu vào cho kiểu số học, email, điện thoại, đường dẫn và ngày tháng, và dữ liệu bàn phím đầu vào trên thiết bị di động sẽ được cập nhật để giúp người sử dụng điền vào biểu mẫu một cách dễ dàng hơn. Bạn sẽ không cần phải thêm vào những lớp đối tượng khác cho những dạng biểu mẫu chứa dữ liệu đầu vào, tất cả những gì bạn cần làm là sử dụng kiểu dữ liệu hợp lệ của HTML5 khi nhập :

Đồ án học kỳ Thiết kế Web “Nhà Hàng Ẩm Thực Beezeen” của học viên Arena Multimedia

5. Sử dụng “Flexbox” (một kiểu dàn trang mà nó sẽ tự cân đối kích thước của các phần tử bên trong để hiển thị trên mọi thiết bị)

Chúng ta hãy nên đối mặt với độ khó của việc tạo ra cách bố trí cho tính chất dễ điều khiển trong HTML. Chúng ta hầu hết đã và đang vật lộn với điều này trong từng thời điểm nào đó. Mặc dù từ trước đến nay chúng ta đều có thể tạo ra các bố cục như ý muốn bằng cách sử dụng những công nghệ chuyên dụng, và quá trình này thì chưa bao giờ là dễ dàng.

Những công nghệ để “làm việc” với bố cục có kết cấu đã lần lượt xuất hiện cũng như không còn thịnh hành, các nhà phát triển đã sử dụng các khung dữ liệu HTML, bảng HTML, các bố cục mang tính động, và gần đây hơn là họ sử dụng các hệ thống đường kẻ ô được ưa chuộng đến từ các khung cơ cấu của CSS như Bootstrap.

Nhưng với sự xuất hiện của mô hình Flexbox, cuối cùng HTML đã được trang bị một công cụ định dạng ô phong phú nhằm giải quyết các bố cục phức tạp, bao gồm các biểu mẫu HTML.

Flexbox mang lại cho chúng ta tính linh động tốt cho việc thiết kế các biểu mẫu đẹp đẽ một cách nhanh chóng. Điều mấu chốt để hiểu về Flexbox là : nó là một mảng chứa các công cụ thao tác : nó nhằm mục đích cung cấp một cách hiệu quả hơn để trình bày, sắp xếp và phân phối cho không gian giữa các mục trong một mảng chứa, ngay cả khi kích thước của chúng chưa được định rõ và cũng như hoặc mang tính động (vì thế từ ‘flex’ mang nghĩa như vậy).

Điều thú vị là Flexbox mang lại cho chúng ta sự linh hoạt tuyệt vời để nhanh chóng xây dựng mẫu cho mình mà không cần sử dụng bất kỳ truy vấn đến thiết bị nào cả. Ngoài ra, tất cả các trình duyệt hiện tại đều hỗ trợ Flexbox. Bản hướng dẫn cho thiết kế web của chúng tôi về mục Flexbox sẽ nói rõ cho bạn biết thêm, nhưng bây giờ chúng ta hãy tiến đến thực hành và học cách tận dụng Flexbox để tạo ra một biểu mẫu thuận lợi hơn.

Điều quan trọng phải giải quyết trước tiên là, chúng ta hãy định nghĩa cấu trúc HTML cho biểu mẫu của mình :


       

       

       

       

       

         

     

Hãy chú ý rằng mỗi danh sách mục trong biểu mẫu của chúng ta đều có một lớp đối tượng flex. Lớp này sẽ gắn liền với mảng chứa flex trong biểu mẫu ấy. Một trong những lợi ích lớn của Flexbox là khả năng để sử dụng bất kỳ phần tử HTML nào để xác định cho các mảng chứa và các phần tử của nó.

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

Chúng ta hãy xác định mảng chứa flex trong CSS của mình, ngoài ra chúng ta sẽ muốn đặt các đối tượng flex dọc theo trục thẳng đứng. Chúng ta có thể dễ dàng định rõ điều đó chỉ với việc thiết lập một quy tắc CSS đơn giản:

.flex li {
  display: flex;
  flex-wrap: wrap;
align-items: center;
}

Bước tiếp theo là định rõ những chiều rộng cho các đối tượng flex. Các yêu cầu chính là :

  • Nhãn dán phải có ít nhất 100px và tối đa 200px
  • Các phần tử biểu mẫu sau khi ta hoàn thành nhãn dãn nên có ít nhất 200px

Điều này cung cấp cho chúng ta mỗi nhãn và phần tử biểu mẫu liên kết của chúng sẽ được hiển thị trên một hàng ngang đơn lẻ khi tổng cộng chiều rộng của biểu mẫu ít nhất 300px ( hãy nhớ rằng ở đây, chúng ta đang sử dụng các nhãn dán được sắp xếp thẳng hàng sang bên phải ).

.flex > li > label {
  flex: 1 0 100px;
  max-width: 200px;
}
.flex > li > label + * {
  flex: 1 0 200px;
}

Và cuối cùng, đối với nút ấn để gửi – cũng là một đối tượng của flex, thì chúng ta sẽ định rõ một vài kiểu cơ bản sau:

.flex li button {
  margin: auto;
  padding: 22px 46px;
}

Như các bạn thấy đó, với các đánh dấu rất nhỏ như vậy cũng như tận dụng sức mạnh của Flexbox, thì chúng ta đã đi đúng hướng để xây dựng một biểu mẫu dễ điều khiển.

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

Theo CreativeBloq

Bản dịch được Việt hóa bởi Arena Multimedia


Bài viết nổi bật

Cựu học viên Arena từng làm kỹ xảo bom tấn Hollywood: Không giỏi vẽ tay vẫn làm Art Director ngành Game

Tin Arena Post on Thứ Sáu, 18-08-2023
Năng khiếu vẽ có thật cần thiết để theo học Multimedia Design, làm sáng tạo cần những tố chất gì, thị trường Game 3D có thật “màu mỡ” cho các nhà sáng tạo trẻ vẫy vùng, tin rằng các bạn có thể tìm được câu trả lời sau những chia sẻ của VFX Art Director Nguyễn Minh Nhật.

Đạo diễn Phương Vũ – “Hãy cứ nghĩ: Sáng tạo thật đơn giản”

Tin Arena Post on Thứ Sáu, 18-08-2023
Đạo diễn Phương Vũ – chàng trai trẻ tuổi sinh năm 1995 đã tạo ra hàng loạt  tác phẩm đình đám khiến giới yêu thích sáng tạo nghệ thuật phải “phát cuồng”. Anh là Giám đốc Nghệ thuật của Nirvana và còn là Nhà sáng lập/Đạo diễn của AntiAntiArt – Một trong những Team gây...

Sáng Destiny: 300 suất học bổng trị giá 4 tỷ đồng dành cho thế hệ trẻ đam mê ngành Sáng tạo

Tin Arena Post on Thứ Ba, 18-07-2023
Arena Multimedia đồng hành cùng ước mơ chinh phục ngành Thiết kế - Sáng tạo của thế hệ trẻ với 300 suất học bổng SÁNG DESTINY với tổng giá trị 4 tỷ đồng.

Xem thêm
Post on Thứ Năm, 14-09-2023

8 điều Illustrator cần nhớ khi làm portfolio

Làm portfolio là một nghệ thuật và người làm portfolio cũng là một nghệ sỹ. Trong đây là 8 tip hướng dẫn có thể giúp bạn thực hiện một chiếc...
Tin Multimedia
Post on Thứ Năm, 14-09-2023

8 cách giúp dân thiết kế tìm lại đam mê trong công việc

Mất đi niềm đam mê trong công việc hay hiệu năng sáng tạo bị giảm sút không phải là vấn đề hiếm gặp trong cộng đồng thiết kế. Tuy nhiên,...
Tin Multimedia
Post on Thứ Tư, 06-09-2023

Ý nghĩa và nghệ thuật sử dụng màu sắc trong thiết kế (Phần 2)

Đôi khi các màu sắc mang nhiều ý nghĩa hơn những gì bạn đang nghĩ, đặc biệt tại các vùng miền hay trong các nền văn hóa, mỗi màu sắc...
Tin Multimedia
Post on Thứ Tư, 06-09-2023

Ý nghĩa và nghệ thuật sử dụng màu sắc trong thiết kế (Phần 1)

Đôi khi các màu sắc mang nhiều ý nghĩa hơn những gì bạn đang nghĩ, đặc biệt tại các vùng miền hay trong các nền văn hóa, mỗi màu sắc...
Tin Multimedia
Post on Thứ Năm, 31-08-2023

5 bí quyết tìm kiếm khách hàng dành cho người mới bắt đầu làm Freelancer

Đối với các Freelancer, việc xây dựng một mạng lưới khách hàng ổn định là vô cùng quan trọng. Bài viết này sẽ chia sẻ 5 tips để mọi người...
Tin Multimedia
Post on Thứ Năm, 24-08-2023

7 lời khuyên từ chuyên gia giúp Designer bớt “chằm Zn” khi làm nghề

Dẫu biết work-life balance là niềm mơ ước xa xỉ trong thế giới Thiết kế quay cuồng. Nhưng để tồn tại ở lĩnh vực này, Designer cần đến khoảng thời...
Tin Multimedia

TP.HCM

Nguyễn Đình Chiểu

212-214 Nguyễn Đình Chiểu, P. Võ Thị Sáu, Q. 3

Tel: 1800 1525

Email: [email protected]

Hồ Văn Huê

43R/12 Hồ Văn Huê, P. 9, Q. Phú Nhuận

Tel: 1800 6325

Email: [email protected]

Tân Bình

Số 6 Tân Kỳ Tân Quý (gần Etown), P.15, Q.Tân Bình

Tel: 1800 2074

Email: [email protected]

Lê Tuấn Mậu

136 Lê Tuấn Mậu (CV Phú Lâm), P.13, Q.6

Tel: 1800 2046

Email: [email protected]

HÀ NỘI

Trúc Khê

80 Trúc Khê, P. Láng Hạ, Q. Đống Đa

Tel: 1800 1542

Email: [email protected]

Phạm Văn Bạch

D29 Phạm Văn Bạch, P. Yên Hòa, Q. Cầu Giấy

Tel: 1800 1542

Email: [email protected]

Trần Phú

110 Trần Phú, P. Mộ Lao, Q. Hà Đông

Tel: 1800 1542

Email: [email protected]

NHẬN ARENA YEARBOOK

DMCA.com Protection Status
© 2020, ARENA MULTIMEDIA
  • Arena Multimedia
  • Đăng ký học
  • Liên hệ
  • Sitemap
  • Arena Multimedia
  • Đăng ký học
  • Liên hệ
  • Sitemap