• Tùy chọn
• Đăng nhập
• Đăng ký
• Xem như trên Máy tính
• Accelerated Mobile Pages Theme

Thiết kế giao diện Form: một số thủ thuật giúp Form trực quan hơn.

• Trang chủ

  • Thủ Thuật Access
  • Access Cơ Bản
  • Forms
  • Thiết kế giao diện Form: một số thủ thuật giúp Form trực quan hơn.
• Thiết kế giao diện Form: một số thủ thuật giúp Form trực quan hơn.

• Thiết kế giao diện Form: một số thủ thuật giúp Form trực quan hơn.

  ongke0711 > 30-07-18, 12:41 AM

  Chào các bạn,
  
    
  Trong quá trình thiết kế các ứng dụng, tôi cũng đã học hỏi được một vài kỹ thuật thiết kế giúp Form trực quan hơn đối với người dùng. Lần này tôi chia sẻ các thủ thuật này cho các bạn mới bắt đầu bước chân vào việc thiết kế Form của Access được hiệu quả hơn.
  
  Tại sao tôi viết bài này?
  
  Trước đây có câu “Tốt gỗ hơn tốt nước sơn”, theo quan điểm marketing của tôi câu này vẫn đúng nhưng chưa đủ trong thì hiện tại nữa. Thời buổi bây giờ cạnh tranh cao, gỗ tốt rất nhiều, giống nhau hết rồi thì để bán được hàng phải cạnh tranh tới nước sơn luôn. Do vậy bạn đừng nói ứng dụng tôi quan trọng là chạy nhanh, nhẹ, đáp ứng yêu cầu là được rồi nên chỉ tập trung vô phân tích CSDL, viết code kiết chứ không cần mất thời gian nhiều cho thiết kế giao diện thì phải suy nghĩ lại. Nói chút về marketing, để hàng tiếp cận được ngừoi dùng thì trước hết phải tạo cơ hội người dùng được dùng thử (Trial) -> rồi mới chuyển sang dùng luôn hay bỏ luôn (Conversion). Và một trong nhưng yếu tố đầu tiên để gây ấn tượng cho người dùng, kích thích họ tò mò, tiến tới dùng thử chính là vẻ bề ngoài sản phẩm + Quảng cáo các đặc điểm nổi bật của nó + Giá. Vậy trong một rừng sản phẩm, sp nào có đặc điểm nổi trội (chỉ ở giai đoạn mới nghe quảng cáo thôi) + vẻ ngoài bắt mắt sẽ có cơ hội được người dùng chọn dùng thử trước các sản phẩm khác. Từ đó đối với một ứng dụng, phần mềm ngoài các tính năng xử lý của nó,  giao diên sử dụng chính là yếu tố gây chú ý của người đùng đầu tiên.
  
  Bạn xem ví dụ sau: Tôi đang muốn kiếm phần mềm quản lý quán cafe, search trên mạng thì thấy rất nhiều phần mềm, vậy lướt sơ qua cái giao diện ứng dụng đó xem sao rồi download về dùng thử trước khi quyết định mua bản quyền.
  
  Ứng dụng số 1:
  
  
  
  
  Ứng dụng số 2:
  
  
  
  ==> Trong môi trường quán ăn, quán cafe, hoạt động tấp nập, thao tác phải nhanh để tính nhập, tính tiền cho khách thì ứng dụng nào đáp ứng y/c này sẽ thắng. nếu chỉ nhìn phớt qua (scanning), cái ứng dụng số 2 sẽ có cơ hội được người dùng chú ý hơn vì nhìn có vẻ bắt mắt, rõ ràng, không rối, dễ nhập liệu hơn --> cơ hội download về dùng thử cao hơn --> cơ hội bán ứng dụng cao hơn.
  
  Nói đông dài như vậy để các bạn thấy được tầm quan trọng của giao diện ứng dụng, nên dành thêm thời gian để chăm chút cho nó. Thiết kế giao diện cũng là một môn khoa học nó gộp chung tâm lý học của người với thiết bị, sự dễ sử dụng, dễ hiểu vô 1 form. Dữ liệu hiển thị trên Form càng nhiều thì thiết kế phải càng nhất quán và thân thiện người sử dụng.
  
  Mở bài xong rồi, giờ đến thân bài. 
  
  Trong phần này tôi tổng hợp và chia sẻ về một số đề xuất liên quan để giao diện Form như sau:
  - Canh lề, bố trí các control (label, textbox...).
  -  Font.
  -  Màu sắc (màu nền, font).
  
  
  1. Canh lề, bố trí controls:
  
  # Cái bẫy khi thiết kế kích cỡ các textbox bằng nhau.
  
  Một trong các khuynh hướng thiết kế để Form nhìn gọn gàng hơn là canh đều kích cỡ các textbox như hình dưới đây:
  
  
  
  Việc dùng cùng một kích thước cho các field như trên làm mắt giảm đi cái khả năng lọc, phân biệt các thông tin cần điền khi nhìn lên form. Ví dụ như thông tin số điện thoại, fax rất ngắn nhưng cái ô thì dài ngang các field khác nên người sẽ khó bắt tín hiệu, định vị nhanh nó nằm ở dòng nào.
  
  Thực ra chỉ cần bố trí trật tự ngay hàng thẳng lối, độ dài của field tương ứng với dữ liệu cũng đem lại một thiết kế đẹp, hợp lý cho form như hình dưới.
  
  
  
  
  # Tránh thiết kế Form có nhiều cạnh thò ra thụt vô.
   
  Bạn xem 2 hình bên dưới. Rõ ràng là cái hình thứ 2 dễ nhìn hơn nhiều.
  
  
  
  
  
  Do vậy, chúng ta nên thiết kế thẳng hàng dọc khi bắt đầu các lable và khi kết thúc textbox (có cùng kích cỡ) cũng nên thẳng theo hàng dọc. Nó sẽ làm tăng tính thẩm mỹ hơn.
  
  # Việc dàn hàng ngang các checkbox cũng không thuận tiện cho người dùng thao tác. Layout hàng dọc, mắt người dùng quét qua sẽ nhanh hơn và việc chọn cũng được nhanh hơn.
  
  
  
  
  
  
  # Canh lề các Label:
  Các bạn thấy trong hình dưới, việc canh phải tất cả các label giúp chúng ta dễ liên kết tiêu đề với ô nhập liệu hơn. Có nhưng trường hợp các dòng label nhiều thì ta có thể nhóm các dòng nào cùng loại ở một bên. Ví dụ: danh sách bảng câu hỏi - trả lời. Các câu hỏi có thể canh trái và tất cả câu trả lời thì canh phải.
  
          
  
  
  Có một khảo sát nhỏ về việc mắt người dùng phản ứng như thế nào đổi với việc bố trí các Label trên Form của Matteo Penzo. Tôi lược dịch lại để các bạn tham khảo. Họ test người dùng về việc đảo mắt (liếc mắt) và số lần liếc mắt trên 1 Form. Có 4 cái test như sau:
  1. Canh trái Label so với textbox:
  
  
  
  Đối với layout này, khoảng cách giữa Label và ô nhập liệu khá cao,  nên số lần người dùng phải đảo mắt qua lại giữa Label và ô nhập liệu là cao nhất. Các hình tròn xanh đại diện cho 1 lần đảo mắt của người dùng tới control. Các bạn thấy các hình tròn dày đặc tức là phải nhìn qua lại nhiều lần. Thời gian trung bình 1 lần đảo mắt là 500 ms, do đó người dùng sẽ mất nhiều thời gian hơn cho việc nhập liệu ở Form layout dạng này.
  
  2. Canh phải Label so với textbox:
  
  
  
  Đối với layout này, việc kết nối giữa Label và ô nhập liệu được nhanh hơn do nằm sát nhau hơn. Do đó số lần người dùng phải đảo mắt qua lại giảm đi một nữa  và thời gian để điền hết Form này cũng được cải thiện nhanh hơn. 
  
  3. Canh trái và đặt label nằm bên trên so với textbox:
  
  
  
  Việc đặt Lable nằm ngay bên trên ô nhập liệu cho phép người dùng chỉ cần một lần nhìn là có thể nắm bắt ngay nội dung (liên kết) giữa tiêu đề và ô nhập liệu mà không cần phải đảo mắt qua lại để xem. Bên cạnh đó nếu người dùng có đảo mắt thì cũng chỉ mất khoảng 50 ms. Thời gian xử lý cũng chỉ bằng 1/10 so với trường hợp đầu.
  
  4. Canh trái , đặt label nằm bên trên và tô đậm (bold) so với textbox:
  
  
  
  Đây là thí nghiệm làm thêm. Họ muốn tô đậm cái label để xem có cải thiện hơn không. 
  Cũng có nhưng quan điểm thiết kế nói rằng nếu bạn dùng Bold quá nhiều các tiêu đề thì sẽ đem lại cảm giác nặng nề khi xem cái form và tôi cũng đồng quan điểm này. Trong thiết kế, cái gì bạn cũng muốn nổi bật (muốn highlight) thì hoá ra chẳng có cái nào nổi bật khi xem.
  Nhưng đối với khảo sát này thì việc Bold các label lại tăng tới 60% khả năng cho mắt kết nối giữa label và ô nhập liệu. Số lần cần phải đảo mắt qua lại đối với thiết kế kiểu này là thấp nhất (hiệu quả nhất)
  Nói túm lại là dùng layout này cũng ok nhưng có chừng mực.
  
  
  # Label nằm trong ô nhập liệu:
  
  Một cách thiết kế khác cũng thường áp dụng là đặt cái label nằm luôn bên trong textbox để tiết kiệm không gian của form.
  
  - Một cách thông thường khi không gian thiết kế dư giả là như thế này: gọi là cách 1
  
  
  
  - Cách tiết kiệm không gian (cách 2): lấy vị trí của placeholder text làm label luôn.
  
  
  
  Cách thứ 1 hoặc 2 trên cũng không khuyến khích dùng, đặc biệt là cách 2 vì các lý do sau:
  + Khi nhập liệu vào ô này thì cái label cũng biến mất gây khó cho người dùng trong việc kiểm tra lại xem mình nhập có đúng ô yêu cầu không vì có thể không nhớ.
  + Không có gợi ý nhập liệu gì, như thế nào cho textbox, người dùng đôi khi cũng lúng túng. Nếu theo cách thiết kế đầu tiên, họ có thể xoá trắng cái textbox để đọc lại nội dung gợi ý, nhưng theo cách 2 thì không thể.
  + Textbox mà có chữ bên trong sẽ ít tạo sự chú ý người dùng. Cũng theo nghiên cứu về EyesTracking thì ô Texbox để trống sẽ thu hút sự chú ý tập trung hơn. Người dùng có khuyn hướng nhìn lướt qua nếu ô nào có dữ liệu rồi hoặc đôi khi họ nghĩ các từ gợi ý, ví dụ trong ô đó như là nội dung mặc định (default) nên bỏ qua ô này.
  + Người dùng mất thời gian để xoá các từ gợi ý trong textbox trước khi nhập liệu. Nếu không lập trình tốt công đoạn này thì sẽ gây mất thời gian nhập liệu của người dùng.
  
  Nói tóm lại:
  - Có thể dùng dạng Label nằm trong textbox đối với các form ít ô nhập liệu và nội dung các ô này quen thuộc với người dùng. Ví dụ: form Login - form này thì theo thói quen là ô đầu nhập username, ô sau nhâp pass 
  - Cách tốt nhất vẫn là form như thế này:
  
  
  
  
  (Còn tiếp)

• RE: Thiết kế giao diện Form: một số thủ thuật giúp Form trực quan hơn.

  ongke0711 > 30-07-18, 12:43 AM

  2. Font:
  
  Font nói chung được thiết kế chia ra 2 loại: Serif (font có chân) và San Serif (không chân). Mỗi kiểu đều có điểm mạnh riêng nên tuỳ văn cảnh mà sử dụng. Ngoài ra font còn được thiết kế tuỳ theo môi trường sử dụng là xem trên màn hình hoặc in ấn. Ví dụ: cùng là font Serif, font Georgia xem rất tốt trên màn hình vì có đặc tính không bị răng cưa khi phóng lớn, còn font Constantia thì tốt cho in ấn vì rất tiết kiệm mực in. Trong bài này tôi chỉ đề cập font dùng cho màn hình thôi nhé.
  - Các Font Serif như: Time New Roman, Georgia, Constantia, Garamond...Font này đem lại cảm giác cổ điển, truyền thống.
  - Các Font Sans - Serrif như: Arial, Tahoma, Verdana, Helvetica. Segoe UI...Font này đem lại cảm giác hiện đại, thuộc về kỹ thuật số.
  Đối với các font có chân (serif), thường được dùng trong các văn bản dài (in báo chí, sách...), số lượng từ nhiều, nó đem lại cảm giác đọc nhẹ nhàng hơn, dễ đọc và đọc được nhanh hơn với các nét thanh nét đậm.
  Đối với font không chân (sans-serif) thì thường dùng trong bài trình chiếu (powerpoint), các ứng dụng desktop, các văn bản ngắn. Ở cự ly xa người đọc cũng có thể phân biệt chữ này với chữ khác (đó là lý do nên dùng trong Powerpoint).
  
        
  
  # Chọn font:
  
  Trở lại với ứng dụng desktop, nó cũng còn tuỳ theo con mắt thẩm mỹ của nhà phát triển nhưng thường thì font sử dụng cho Form phải đảo bảo dễ đọc trên màn hình kể cả khi chữ nhỏ và font đó có sẳn trên hệ thống luôn là tốt nhất (tránh phải kèm thêm font đặc biệt khi cài đặt). Thường thì nên sử dụng font Sans-Serif.
  Một số font Sans Serif thích hợp cho Form như: Verdana (size 9), Tahoma (size 10), Arial (10), Helvetica, Segoe UI. 
  Một số đặc tính của font:
  - Arial: là một trong các font an toàn, máy Win nào cũng có. Tương tự với Arial cho Windows là Helvetica cho Mac OS. Arial là font tiêu chuẩn nếu bạn dùng cho Form thì cũng ok nhưng không có gì mới mẻ, ấn tượng (quan điểm thẩm mỹ các nhân nhé). Helvetica là một trong nhưng font đẹp được lựa chọn trên nền Web nhưng đối với ứng dụng Access thì không được vì không phải font có sẳn trong hệ thống.
  - Verdana là font dễ đọc nhất khi chữ nhỏ nhưng nếu size lớn thì sẽ không đẹp (vừa mập vừa lùn  )
  - Tahoma: cũng là font dễ đọc ở size chữ nhỏ, không bị răng cưa (do độ phân giải màn hình). Font Tahoma cân đối, rất dễ nhìn và khi Bold cũng đẹp. Đây cũng là font thông dụng cho Form và cho các file trình chiếu trên màn hình. Tahoma và Verdana cũng gần tương tự nhau chỉ khác là Verdana có khoảng cách các ký tự xa hơn, co chữ tròn hơn do đó nếu không gian Form không nhiều thì dùng Tahoma, nếu phóng khoáng thì dùng Verdana  . Tôi thì hay dùng Verdana 9pt.
  - Segoe UI: được chọn làm font hệ thống mặc định của Win 7. Font này cảm giác thân thiện, tao nhã và được đánh giá là dễ đọc hơn Tahoma hay Arial. Ứng dụng dùng font này cũng khá hiện đại, mới mẻ.
  - Calibri: font này ra đời sau các font trên và được dùng mặc định trong Offiice 2007 trở lên. Font này có các góc bo tròn nhẹ, tạo cảm giác mềm mại, hiện đại nhưng có 1 nhược điểm là khi gõ chữ "i" Hoa và chữ "l" (lờ) viết thường sẽ giống nhau hoàn toàn, gây hiểu lầm cho người đọc. 
  
  Tôi chỉ mô tả sơ qua một số font thông dụng mà tôi biết và hay dùng thôi. Nói tóm lại là nên dùng font không chân (sans-serif) để dễ đọc như: Tahoma, Verdana, Arial... cho Form chứ không nên dùng font Serif.
  
  # Không nên dùng quá nhiều Font trên 1 Form:
  
  Để có sự nhất quán trong Form, bạn không nên dùng quá 3 font cho 1 form cũng như nhiều size chữ (1 hoặc 2 cỡ chữ là tốt nhất). Nhiều font chữ và kích cỡ khác nhau làm form nhìn không chuyên nghiệp và gây sao nhãng sự tập trung. 
  
  Một đề nghị khác là không dùng chữ nghiêng hoặc gạch dưới.
  - Tốc độ đọc chữ nghiêng sẽ chậm hơn nhiều.
  -  Chữ có gạch dưới thậm chí còn tệ hơn chữ nghiêng: nó làm khó đọc hơn, tạo cảm giác các chữ dính vào nhau. Cũng có một lý do khác là gây khó khăn cho người mắc chứng "khó đọc". Hội chứng này cũng bị ảnh hưởng bởi font Serif.
  
  # Tránh dùng chữ HOA cho Label:
  
  
  
  - Việc dùng chữ HOA sẽ khó đọc hơn vì các ký tự đều ngang nhau khó phân biệt các con chữ hơn, tốc độ đọc lướt chậm hơn.
  - Chỉ nên dùng hạn chế cho thanh tiêu đề, ít ký tự.
  
  
  3. Màu sắc (màu nền, font):
  
  Màu sắc là một trong những yếu tố gây chú ý đầu tiên nên nó đóng góp vai trò quan trọng trong thiết kế Form.  nó giúp bộ não xử lý thông tin cũng nhanh hơn nếu dùng hợp lý. Việc dùng màu sắc trong Form cũng tuỳ theo thẩm mỹ của mỗi người nhưng nên đảm bảo một số yêu cần thiết kế sẽ đề cập bên dưới.
  Các bạn xem cái form nhập liệu dưới đây:
  
      
  
  Một form  thì rất nổi bật với nhiều màu sắc khác nhau nhưng bạn biết chọn phần nào để xem, thao tác theo trình tự trước đây? Một form thì nhập vài dòng xong "đỏ con mắt bên phải, ngứa con mắt bên trái" do chói loá.  
  
  # Sử dụng màu sắc một cách tiết chế:
  
  
  
  - Các bạn thấy dấu hoa thị "*" nổi bật hơn vì cách dùng màu tiết chế. Màu đỏ ở đây có ý nghĩa bắt buộc.
  - Còn việc tô màu field nhập liệu như hình dưới đây thì lại không truyền tải một ý nghĩa gì cả.
  
  
  
  Về màu sắc nếu các bạn muốn sử dụng thì nên chọn những màu nó tương thích với nhau để có hiệu ứng tốt đối với người dùng. Tránh những màu sắc gây chói mắt, mỏi mắt nếu người dùng phải thường xuyên đối diện với form nhập liệu. Các màu không nên dùng như: đỏ, xanh lá, xanh dạ quang như hình ở trên, hồng...
  
  Một vấn đề cũng nên lưu ý thêm là nếu bạn sử dụng chữ Trắng (thuần - #FFFFFF) trên nền Đen thuần (#000000) thì sẽ gây hiệu ứng mờ và méo mó (như lốc xoáy) đối với người bị hội chứng "khó đọc". Tốt nhất là nên dùng màu trắng mờ và xám đậm (gần đen). Tôi hay dùng 90% màu đen: #191919 - RGB (25,25,25). 
  
  Các trang web gợi ý các màu tương thích với nhau cho bạn chọn như:
    + http://www.colorblender.com
    + https://color.adobe.com/create/color-wheel/
  
  
  
  
  # Tránh (hạn chế) dùng màu đỏ và xanh lá:
  
  Đối với người bị mù màu thì 2 màu này họ không nhìn thấy rõ (8% nam, 1% nữ bị mù màu).
  
  
  
  
  # Tránh dùng chữ nhấp nháy:
  Chữ hay nội dung nhấp nháy sẽ gây khó chịu cho mắt và mất tập trung người dùng nói chung.
  
  
  
  
  # Độ tương phản giữa Label và màu nền:
  
  Các bạn tham khảo ví dụ về độ tương phản.
  
  
  
  Theo một nghiên cứu của Cty W3C, họ đề xuất tỉ lệ tương phản giữa chữ và nền như sau:
  - Nếu co chữ nhỏ thì độ tương phản tối thiểu là 4.5 : 1 so với màu nền.
  - Nếu co chữ to (14pt trở lên) thì độ tương phản tối thiểu là 3 : 1 so với màu nền.
  - Các bạn có thể vào 2 trang web sau để kiểm tra tỉ lệ độ tương phản của font và nền dùng trong form:
     + https://webaim.org/resources/contrastchecker/ 
     + http://contrast-ratio.com
  
      
  
  Tóm lại:
  - Màu sắc không chỉ để làm cái form trông đẹp hơn mà còn để truyền tải thông tin tương tác với người dùng.
  - Chỉ dùng màu khi cần thiết và tiết chế.
  
  
  Đối với thiết kế giao diện cũng còn nhiều vấn đề khác liên quan cần xem xét như các nút lệnh, bố cục form theo nhóm, các thông báo lỗi v.v..nhưng trong giới hạn kiến thức, tôi chia sẻ với các bạn nhưng phần chính ở trên tương đối đủ để thiết kế một form tiêu chuẩn dễ nhìn, dễ đọc.   
  
  -----------------------------------****----------------------------------------------
  
  Trên đây là một số kiến thức cơ bản tôi góp nhặt, học hỏi được liên quan đến việc thiết kế giao diện Form. Hy vọng sẽ giúp ích cho các bạn trong quá trình thiết kế ứng dụng của mình. Và cũng xin nhắc lại rằng bài viết này cũng có một phần quan điểm cá nhân tôi nên chưa chắc đúng với mọi người. Việc thiết kế này cũng còn tuỳ thuộc quan điểm thẩm mỹ của mỗi người nên bạn nào thấy phù hợp thì tham khảo còn không thì đọc cho vui thôi.

• RE: Thiết kế giao diện Form: một số thủ thuật giúp Form trực quan hơn.

  Cuong Servenet > 30-07-18, 03:49 PM

  (30-07-18, 12:43 AM)ongke0711 Đã viết: 2. Font:
  
  Font nói chung được thiết kế chia ra 2 loại: Serif (font có chân) và San Serif (không chân). Mỗi kiểu đều có điểm mạnh riêng nên tuỳ văn cảnh mà sử dụng. Ngoài ra font còn được thiết kế tuỳ theo môi trường sử dụng là xem trên màn hình hoặc in ấn. Ví dụ: cùng là font Serif, font Georgia xem rất tốt trên màn hình vì có đặc tính không bị răng cưa khi phóng lớn, còn font Constantia thì tốt cho in ấn vì rất tiết kiệm mực in. Trong bài này tôi chỉ đề cập font dùng cho màn hình thôi nhé.
  - Các Font Serif như: Time New Roman, Georgia, Constantia, Garamond...Font này đem lại cảm giác cổ điển, truyền thống.
  - Các Font Sans - Serrif như: Arial, Tahoma, Verdana, Helvetica. Segoe UI...Font này đem lại cảm giác hiện đại, thuộc về kỹ thuật số.
  Đối với các font có chân (serif), thường được dùng trong các văn bản dài (in báo chí, sách...), số lượng từ nhiều, nó đem lại cảm giác đọc nhẹ nhàng hơn, dễ đọc và đọc được nhanh hơn với các nét thanh nét đậm.
  Đối với font không chân (sans-serif) thì thường dùng trong bài trình chiếu (powerpoint), các ứng dụng desktop, các văn bản ngắn. Ở cự ly xa người đọc cũng có thể phân biệt chữ này với chữ khác (đó là lý do nên dùng trong Powerpoint).
  
        
  
  # Chọn font:
  
  Trở lại với ứng dụng desktop, nó cũng còn tuỳ theo con mắt thẩm mỹ của nhà phát triển nhưng thường thì font sử dụng cho Form phải đảo bảo dễ đọc trên màn hình kể cả khi chữ nhỏ và font đó có sẳn trên hệ thống luôn là tốt nhất (tránh phải kèm thêm font đặc biệt khi cài đặt). Thường thì nên sử dụng font Sans-Serif.
  Một số font Sans Serif thích hợp cho Form như: Verdana (size 9), Tahoma (size 10), Arial (10), Helvetica, Segoe UI. 
  Một số đặc tính của font:
  - Arial: là một trong các font an toàn, máy Win nào cũng có. Tương tự với Arial cho Windows là Helvetica cho Mac OS. Arial là font tiêu chuẩn nếu bạn dùng cho Form thì cũng ok nhưng không có gì mới mẻ, ấn tượng (quan điểm thẩm mỹ các nhân nhé). Helvetica là một trong nhưng font đẹp được lựa chọn trên nền Web nhưng đối với ứng dụng Access thì không được vì không phải font có sẳn trong hệ thống.
  - Verdana là font dễ đọc nhất khi chữ nhỏ nhưng nếu size lớn thì sẽ không đẹp (vừa mập vừa lùn  )
  - Tahoma: cũng là font dễ đọc ở size chữ nhỏ, không bị răng cưa (do độ phân giải màn hình). Font Tahoma cân đối, rất dễ nhìn và khi Bold cũng đẹp. Đây cũng là font thông dụng cho Form và cho các file trình chiếu trên màn hình. Tahoma và Verdana cũng gần tương tự nhau chỉ khác là Verdana có khoảng cách các ký tự xa hơn, co chữ tròn hơn do đó nếu không gian Form không nhiều thì dùng Tahoma, nếu phóng khoáng thì dùng Verdana  . Tôi thì hay dùng Verdana 9pt.
  - Segoe UI: được chọn làm font hệ thống mặc định của Win 7. Font này cảm giác thân thiện, tao nhã và được đánh giá là dễ đọc hơn Tahoma hay Arial. Ứng dụng dùng font này cũng khá hiện đại, mới mẻ.
  - Calibri: font này ra đời sau các font trên và được dùng mặc định trong Offiice 2007 trở lên. Font này có các góc bo tròn nhẹ, tạo cảm giác mềm mại, hiện đại nhưng có 1 nhược điểm là khi gõ chữ "i" Hoa và chữ "l" (lờ) viết thường sẽ giống nhau hoàn toàn, gây hiểu lầm cho người đọc. 
  
  Tôi chỉ mô tả sơ qua một số font thông dụng mà tôi biết và hay dùng thôi. Nói tóm lại là nên dùng font không chân (sans-serif) để dễ đọc như: Tahoma, Verdana, Arial... cho Form chứ không nên dùng font Serif.
  
  # Không nên dùng quá nhiều Font trên 1 Form:
  
  Để có sự nhất quán trong Form, bạn không nên dùng quá 3 font cho 1 form cũng như nhiều size chữ (1 hoặc 2 cỡ chữ là tốt nhất). Nhiều font chữ và kích cỡ khác nhau làm form nhìn không chuyên nghiệp và gây sao nhãng sự tập trung. 
  
  Một đề nghị khác là không dùng chữ nghiêng hoặc gạch dưới.
  - Tốc độ đọc chữ nghiêng sẽ chậm hơn nhiều.
  -  Chữ có gạch dưới thậm chí còn tệ hơn chữ nghiêng: nó làm khó đọc hơn, tạo cảm giác các chữ dính vào nhau. Cũng có một lý do khác là gây khó khăn cho người mắc chứng "khó đọc". Hội chứng này cũng bị ảnh hưởng bởi font Serif.
  
  # Tránh dùng chữ HOA cho Label:
  
  
  
  - Việc dùng chữ HOA sẽ khó đọc hơn vì các ký tự đều ngang nhau khó phân biệt các con chữ hơn, tốc độ đọc lướt chậm hơn.
  - Chỉ nên dùng hạn chế cho thanh tiêu đề, ít ký tự.
  
  
  3. Màu sắc (màu nền, font):
  
  Màu sắc là một trong những yếu tố gây chú ý đầu tiên nên nó đóng góp vai trò quan trọng trong thiết kế Form.  nó giúp bộ não xử lý thông tin cũng nhanh hơn nếu dùng hợp lý. Việc dùng màu sắc trong Form cũng tuỳ theo thẩm mỹ của mỗi người nhưng nên đảm bảo một số yêu cần thiết kế sẽ đề cập bên dưới.
  Các bạn xem cái form nhập liệu dưới đây:
  
      
  
  Một form  thì rất nổi bật với nhiều màu sắc khác nhau nhưng bạn biết chọn phần nào để xem, thao tác theo trình tự trước đây? Một form thì nhập vài dòng xong "đỏ con mắt bên phải, ngứa con mắt bên trái" do chói loá.  
  
  # Sử dụng màu sắc một cách tiết chế:
  
  
  
  - Các bạn thấy dấu hoa thị "*" nổi bật hơn vì cách dùng màu tiết chế. Màu đỏ ở đây có ý nghĩa bắt buộc.
  - Còn việc tô màu field nhập liệu như hình dưới đây thì lại không truyền tải một ý nghĩa gì cả.
  
  
  
  Về màu sắc nếu các bạn muốn sử dụng thì nên chọn những màu nó tương thích với nhau để có hiệu ứng tốt đối với người dùng. Tránh những màu sắc gây chói mắt, mỏi mắt nếu người dùng phải thường xuyên đối diện với form nhập liệu. Các màu không nên dùng như: đỏ, xanh lá, xanh dạ quang như hình ở trên, hồng...
  
  Một vấn đề cũng nên lưu ý thêm là nếu bạn sử dụng chữ Trắng (thuần - #FFFFFF) trên nền Đen thuần (#000000) thì sẽ gây hiệu ứng mờ và méo mó (như lốc xoáy) đối với người bị hội chứng "khó đọc". Tốt nhất là nên dùng màu trắng mờ và xám đậm (gần đen). Tôi hay dùng 90% màu đen: #191919 - RGB (25,25,25). 
  
  Các trang web gợi ý các màu tương thích với nhau cho bạn chọn như:
    + http://www.colorblender.com
    + https://color.adobe.com/create/color-wheel/
  
  
  
  
  # Tránh (hạn chế) dùng màu đỏ và xanh lá:
  
  Đối với người bị mù màu thì 2 màu này họ không nhìn thấy rõ (8% nam, 1% nữ bị mù màu).
  
  
  
  
  # Tránh dùng chữ nhấp nháy:
  Chữ hay nội dung nhấp nháy sẽ gây khó chịu cho mắt và mất tập trung người dùng nói chung.
  
  
  
  
  # Độ tương phản giữa Label và màu nền:
  
  Các bạn tham khảo ví dụ về độ tương phản.
  
  
  
  Theo một nghiên cứu của Cty W3C, họ đề xuất tỉ lệ tương phản giữa chữ và nền như sau:
  - Nếu co chữ nhỏ thì độ tương phản tối thiểu là 4.5 : 1 so với màu nền.
  - Nếu co chữ to (14pt trở lên) thì độ tương phản tối thiểu là 3 : 1 so với màu nền.
  - Các bạn có thể vào 2 trang web sau để kiểm tra tỉ lệ độ tương phản của font và nền dùng trong form:
     + https://webaim.org/resources/contrastchecker/ 
     + http://contrast-ratio.com
  
      
  
  Tóm lại:
  - Màu sắc không chỉ để làm cái form trông đẹp hơn mà còn để truyền tải thông tin tương tác với người dùng.
  - Chỉ dùng màu khi cần thiết và tiết chế.
  
  
  Đối với thiết kế giao diện cũng còn nhiều vấn đề khác liên quan cần xem xét như các nút lệnh, bố cục form theo nhóm, các thông báo lỗi v.v..nhưng trong giới hạn kiến thức, tôi chia sẻ với các bạn nhưng phần chính ở trên tương đối đủ để thiết kế một form tiêu chuẩn dễ nhìn, dễ đọc.   
  
  -----------------------------------****----------------------------------------------
  
  Trên đây là một số kiến thức cơ bản tôi góp nhặt, học hỏi được liên quan đến việc thiết kế giao diện Form. Hy vọng sẽ giúp ích cho các bạn trong quá trình thiết kế ứng dụng của mình. Và cũng xin nhắc lại rằng bài viết này cũng có một phần quan điểm cá nhân tôi nên chưa chắc đúng với mọi người. Việc thiết kế này cũng còn tuỳ thuộc quan điểm thẩm mỹ của mỗi người nên bạn nào thấy phù hợp thì tham khảo còn không thì đọc cho vui thôi.

  
  cảm ơn a đã chia sẻ thông tin bổ ích.
  em co dowload 1 vài ứng dụng trên diễn đàn về máy tính mở ra, thấy các chương trình đó màu mè , tô nhìn rối hết mắt
  em thì mới tìm hiểu về access, và làm việc với bọn nước ngoài thấy chúng nó ko màu mè như vậy? với lại các bố trí các cái combobox , menu nhìn khoa học lắm.

• RE: Thiết kế giao diện Form: một số thủ thuật giúp Form trực quan hơn.

  lehongduc > 30-07-18, 05:06 PM

  Chào các Bạn,
  Theo tôi, giao diện cần tránh "màu mè hoa lá cành", vì:
  + Nhiều màu không hẳn là đẹp
  + Nhân viên làm việc với màn hình máy tính liên tục với giao diện như vậy sẽ rất dễ rối loạn, hoặc ít nhất là mau bị nhức mắt.
  Thế nào là giao diện đẹp? Xin hỏi những người sử dụng máy tính thường xuyên, nhất là những người thường xuyên sử dung phần mềm do ta viết ra. Chứ đừng bao giờ đi hỏi mấy anh là tác giả viết ra phần mềm các Bác ạ.

• RE: Thiết kế giao diện Form: một số thủ thuật giúp Form trực quan hơn.

  tranthanhan1962 > 31-07-18, 06:18 AM

  Form là công cụ làm việc thường xuyên của người sử dụng phần mềm chứ không phải là bảng quảng cáo. Một form đẹp không phải là một form rực rỡ, chói mắt với nhiều hình ảnh, màu mè nổi bật, nó phải là một giao diện có bố cục với các control được bố trí hợp lý, thuận tay, độ tương phản giữa màu nền - màu chữ rõ ràng nhưng không gây chói. Kinh nghiệm cho thấy các cặp màu sau đây rất OK.
  - Chữ đỏ nền trắng.
  - Chữ đỏ nền vàng nhạt.
  - Chữ tím nền trắng.
  - Chữ vàng nền lam.
  - Chữ đen nền cam.
  Ngoài ra cần tránh dùng các cặp màu chữ - màu nền có độ tương phản quá mạnh. Các cặp màu này làm chữ có hiệu ứng rung rất khó đọc và gây đau mắt cho người nhìn:
  - Đỏ / Lục
  - Đỏ / Lam
  - Hồng / Lục
  - Hồng / Lam
  Không sử dụng các màu chói (luminer-neon) làm màu nền, vì dễ gây nhức mắt,khó tập trung như: Vàng chanh, Hồng tươi, Cam rực rỡ, Đỏ tươi, Xanh lục tươi.

• RE: Thiết kế giao diện Form: một số thủ thuật giúp Form trực quan hơn.

  ongke0711 > 31-07-18, 03:18 PM

  Đồng ý với anh lehongduc là "nhiều màu không hẳn là đẹp" bởi vậy trong thiết kế có câu "Less is More" -"Đơn giản là nhất" - "Ít là nhiều" là sự tối giản nhưng vẫn đảm bảo thời thượng, công năng và thẩm mỹ
  
  
  
  
  
  Vai trò của UX/UI Designer:
  
  Quay lại ứng dụng , thường thì các Cty phần mềm có một đội ngũ chuyên thiết kế giao diện riêng đó là các UX/UI Designer - là nhưng chuyên viên thiết kế giao diện cũng như trải nghiệm của người dùng trên giao diện đó. Họ là cầu nối giữa khách hàng và lập trình viên, là người giải mã, hiểu được những insight (tạm dịch bên dứoi) của khách hàng, dung hòa với mục tiêu kinh doanh và biến nó thành những tính năng, tương tác, giao diện cho ứng dụng.
  (* Insight: sự thật ngầm hiểu - nói chung là sự thấu hiểu khách hàng và hành vi của họ dù họ không nói ra)
  Người thiết kế giao diện này phải dựa trên những yêu cầu của khách hàng để từng yếu tố được đặt trên giao diện phải có mục tiêu rõ ràng và liên quan đến nhu cầu người dùng. Nhưng... trong thực tế có những người dùng không thật sự hiểu chính bản thân họ muốn cái gì, ngay cả bản thân mình cũng vậy. Do đó không nên ngay lập tức chấp nhận những ý kiến của người dùng như là một chân lý rồi làm theo họ, có khi mình phải định hướng lại cho họ để đi đúng mục tiêu.
  Lấy một ví dụ đơn giản như: người dùng yêu cầu đưa mục này, mục nọ lên hết trên form để khi cần thì bấm vô cho nhanh, rồi tab này với tab kia khác màu để dễ phân biệt v.v.. Đến khi đưa vô form thì nó thành đám rừng, cái nào cũng nỗi bật, chẳng biết tập trung vô cái nào, rồi một đống nút, tab...
  
  
  
  Trong bài trên có để cập cái thí nghiệm về việc đảo mắt của người dùng đ/v label và field nhập liệu trên form. Người dùng thực tế không hề biết cái lợi ích này để đề xuất với người thiết kế, người lập trình: thiết kế label nằm ngay trên field nhập liệu nhằm giảm áp lực cho mắt. Nghiên cứu này là do người thiết kế UI đứng trên vai trò người dùng thực hiện ngâm cứu khảo sát rồi đưa vào thiết kế để giúp người nhập liệu.
  UX/UI designer  phải giải mã nhưng mong muốn của người dùng rồi truyền tải theo cái cách có khoa học, logic lên form. Ví dụ như: người dùng muốn highlight màu đỏ bao quanh textbox mỗi khi con trỏ đang nằm đó để dễ chú ý thì UX nên tư vấn chuyển sang màu Cam đỏ để đỡ chọc vào mắt hơn, người mù màu cũng có thể thấy v.v..
  
  Còn nếu để thiết kế giao diện cho ông lập trình mà ông này ít kiến thức về UX,UI thì cũng không xong. Ông lập trình chỉ tập trung code, giao diện tập trung sau cùng, khi nghĩ và code ra một Function gì mới là phan vô ngay trong giao diện kết quả là:
  
  
  
  Từ đó thấy rằng vai trò của UX hay UI designer rất quan trong trong thiết kế ứng dụng là vậy.
  
  Đối với lập trình ứng dụng Access, thường ứng dụng nhỏ thì ta mới dùng Access nên ta vừa code vừa thiết kế giao diện luôn chứ hơi đâu mà có thêm tay thiết kế UI nữa cho tốn kém . Mà cũng vì thế đôi khi ta chỉ tập trung phân tích CSDL, xử lý code để phầm mềm đáp ứng đúng yêu cầu của khách hàng, phần giao diện nghĩ đến sau cùng và chi thiết kế tương đối là được rồi. Do đó nhiều ứng dụng Access có công năng, đặc tính rất hay nhưng nhìn không hấp dẫn lắm.

• RE: Thiết kế giao diện Form: một số thủ thuật giúp Form trực quan hơn.

  DooHoaangPhuuc > 31-07-18, 09:10 PM

  Ngoài ra, một phần quan tâm không nhỏ khi xem xét đến giao diện kích thước màn hình làm việc.
  Tuỳ theo yêu cầu sử dụng phần mềm trên kích thước màn hình, các giao diện của chương trình phải phù hợp để có thể tạo được sự tối ưu làm việc của người sử dụng.
  Vì có thể khi sử dụng trên kích thước màn hình này là phù hợp. Song khi đem chương trình qua màn hình khác (kích thước khác) thì sẽ gây rất nhiều khó khăn cho người sử dụng.
  Do vậy, việc thiết kế chương trình , bố trí bố cục đơn giản nhưng đầy đủ, xem xét thiết bị liên quan cũng tạo nhiều hiệu quả của chương trình.
• Bài trước Bài tiếp