Sử dụng cách con người xử lý thông tin hình ảnh trong thiết kế web
Thiết kế trang web và giao diện người dùng đã trở nên dễ dàng hơn trong vài năm qua. Có rất nhiều công cụ hiện có mà bạn có thể sử dụng khiến cho việc bắt đầu lại từ đầu khi phát triển UI trở nên vô nghĩa (hãy xem phần tổng hợp UI mới của chúng tôi). Nhưng tôi không ở đây để tranh luận về cái chết của thiết kế web.
Thay vào đó, những gì tôi sẽ làm là cố gắng giải thích các khái niệm cơ bản, dựa trên tâm lý học đằng sau vô số các công cụ thiết kế trực quan (từ bộ dụng cụ CSS cơ bản nhất đến các chủ đề cao cấp tiên tiến nhất). Bạn sẽ không chỉ sử dụng chúng, mà còn hiểu chúng. Tôi tự tin rằng điều này cũng sẽ giúp dễ dàng sửa đổi những cái hiện có thành công hơn.
Chúng ta hãy xem xét cách trí tuệ và cơ thể con người hoạt động khi xử lý thông tin trực quan và cách hiểu biết này được thiết kế để thiết kế cho web.
Các nguyên tắc của tổ chức tri giác
Theo tâm lý học Gestalt, toàn bộ là khác nhau tổng số các bộ phận của nó. Những người theo trường phái tư tưởng này cho rằng có một vài nguyên tắc về cách thức tâm trí con người nhóm đối tượng. Đây không chỉ đơn giản là lý thuyết, để tâm đến bạn, mà là thực tế thực tế về việc tổ chức các nhóm trực quan.
Dưới đây bạn sẽ tìm thấy một số luật và các cách sử dụng phổ biến và nổi tiếng hơn của các nguyên tắc này. Bạn thậm chí có thể tìm thấy một số ý tưởng mới cho thiết kế tiếp theo của bạn.
Luật tương tự
Nguyên tắc đầu tiên nói rằng các đối tượng nhỏ tương tự nhau được coi là một nhóm, thay vì nhiều trường hợp của cùng một đối tượng nhỏ. Sự tương đồng có thể dựa trên hình dạng, màu sắc, sắc thái hoặc một số chất lượng khác. Nguyên tắc này là cơ sở của thiêt kê Hoa văn cũng như nhiều thiết kế logo hình học và tối giản.
Ví dụ, hình ảnh này hiển thị dưới dạng logo tròn thay vì hình tam giác riêng biệt. Hình dạng tam giác ở dưới cùng của đại bàng làm cho chúng ta nghĩ rằng hình dạng cũng là một phần của hình ảnh.
Bạn có thể cũng vô tình sử dụng luật này khi tạo một vài, hộp nội dung đặc trưng cùng kích cỡ cho trang web của bạn. Nếu bạn muốn chỉ ra rằng các yếu tố nội dung nhất định có cùng tầm quan trọng hoặc chia sẻ thông tin tương tự, tạo một hình dạng cụ thể chỉ cho mục đích đó. Bằng cách này, người dùng của bạn sẽ ngay lập tức liên kết hình dạng cụ thể đó với một khu vực thông tin cụ thể.
Luật gần
Theo luật này các đối tượng gần hơn với nhau là được coi là cùng một nhóm. Các hình vuông giống nhau, khi được hiển thị cạnh nhau trong khoảng cách gần, đều đặn, tạo cảm giác nhóm.
Nguyên tắc này đã được sử dụng rất nhiều trên web gần đây, đặc biệt là khi làm việc với vòng lặp nội dung, ví dụ. trên blog và hội thảo.
Bạn có thể ngay lập tức nhóm tiêu đề, hình ảnh đặc trưng, siêu dữ liệu và đoạn trích với nhau ngay cả khi không có bất kỳ đường viền hoặc nền. Bạn có thể có thể loại bỏ các đường và màu không cần thiết khỏi thiết kế của mình để làm cho nó tối giản hơn, nhưng vẫn hoàn toàn dễ hiểu.
Để thuận tiện cho bạn, tôi sẽ trích dẫn Wikipedia cũng như:
Luật hình thức tốt
Còn được gọi là Luật của Pragnanz hoặc Good Gestalt, luật này quy định rằng chúng ta có xu hướng nhóm các đối tượng lại với nhau nếu chúng tạo thành một mô hình đơn giản, thường xuyên và có trật tự. Tâm trí của chúng ta cố gắng tách các hình thức phức tạp và khó nhận thức thành nhiều nhóm có hình dạng đơn giản dễ hiểu; điều này dẫn đến tầm quan trọng của sự đồng nhất.
Đây cũng là một trong những lý do có thể đằng sau sự thành công của thiết kế dựa trên lưới và điều này làm cho các cấu trúc web dựa trên bảng và khung (rất may là thời kỳ đen tối của thiết kế) rất phổ biến.
Nếu bạn luôn ghi nhớ nguyên tắc này, có lẽ bạn sẽ không tạo ra một trang web chứa đầy các hình dạng phức tạp của các khối nội dung sẽ được kết nối trong tâm trí thông qua các luật khác ở trên. Tuy nhiên, bạn có thể nhóm các đối tượng của bạn lại với nhau một cách thú vị, ví dụ. trong một hình dạng kim cương hoặc diều, vì những người vẫn được coi là hình dạng có trật tự và súc tích.
Lý thuyết màu sắc, nhận thức và cách sử dụng
Tầm nhìn màu sắc và nhận thức về màu sắc là chủ yếu là chủ quan dựa trên bộ não của người xem phản ứng thế nào đến sóng ánh sáng phản chiếu bởi các vật thể hoặc hình dạng đầy màu sắc. Quy tắc là những người khác nhau, thậm chí không có bất kỳ khiếm khuyết thị giác nào nhìn thấy cùng một đối tượng có màu khác nhau (bạn có thể nhớ trang phục).
Thuộc tính màu
Vẫn có ba thuộc tính khách quan của màu sắc; màu sắc, giá trị và cường độ.
Huế là tên của màu như được dán nhãn trên bánh xe màu hoặc trong cầu vồng. Có sáu (hoặc mười hai, tùy thuộc vào người bạn đang nói chuyện) màu sắc cơ bản: đỏ, cam, vàng, xanh lá cây, xanh dương và tím.
Vàng, xanh và đỏ là sơ cấp, cam, xanh lá cây và tím là thứ hai màu sắc; Cũng có đại học màu sắc là hỗn hợp trực tiếp của hai màu chính và màu phụ (ví dụ: màu vàng xanh hoặc đỏ tím).
Giá trị là độ sáng hay tối của màu, được gọi là giá trị cao cho màu sáng hoặc giá trị thấp cho màu tối.
Cường độ đề cập đến sáng hoặc mờ của một màu; điều này có nghĩa là một màu có cùng màu và cùng giá trị vẫn có thể được làm mờ hoặc sáng bằng cách thay đổi cường độ và tạo các đầu ra màu khác nhau.
Cường độ cao nhất của mọi màu là màu sắc chúng hiển thị trên bánh xe màu (xem bên dưới), trong khi thấp nhất là màu xám.
Tương phản màu sắc
Đề cập đến các quy luật tương tự đã nói ở trên, tâm trí của người nhận thức tạo ra các nhóm đối tượng nhỏ mà họ xem dựa trên các thuộc tính tương tự và khác nhau - thường là màu sắc.
Khi bạn chọn bảng màu cho trang web của mình, đặc biệt nếu bạn đi theo cách tiếp cận tối giản hoặc nếu bạn thiết kế một khu vực nội dung nặng văn bản, ví dụ: blog hoặc quảng cáo, bạn nên nhận biết sự tương phản màu sắc khác nhau Điều đó có thể giúp bạn tìm các giá trị màu phù hợp để có kết quả tốt nhất.
Có 7 sự tương phản màu sắc theo Julian Itten, mặc dù tôi sẽ chỉ đề cập đến 3.
1. Tương phản của màu sắc
Vàng, đỏ và xanh ở cường độ tối đa là sự tương phản trực tiếp và sống động. Màu sắc thứ cấp làm cho sự khác biệt ít sắc nét hơn, nhưng vẫn hoạt động, giống như màu sắc thứ ba làm, mặc dù không tạo ra như kết quả tuyệt vời như với màu sắc chính.
2. Tương phản bổ sung
Hai màu tương phản bổ sung nếu khi trộn lẫn với nhau chúng tạo ra một màu xám trung tính. Chúng cũng được gọi là cặp lạ. Nếu chúng liền kề nhau, chúng tăng cường độ sống động và cường độ, trong khi trộn lẫn với nhau, chúng triệt tiêu lẫn nhau. Mỗi màu có một và chỉ một bổ sung; trên bánh xe màu, các cặp đối diện chéo với nhau.
3. Tương phản sáng-tối
Nếu bạn muốn thử nghiệm với một trang web một màu, sử dụng các giá trị khác nhau của cùng một màu có thể tạo ra kết quả tuyệt vời. Thường được sử dụng trong thiết kế web tối giản, bạn cũng có thể tạo ra kết quả tuyệt vời dựa trên độ tương phản sáng tối nếu bạn muốn cung cấp tùy chọn màu chủ đề cho người dùng của mình. Sự tương phản này cũng được sử dụng cho thiết kế thang độ xám.
Nếu bạn muốn theo đuổi 4 màu tương phản còn lại, bạn có thể tìm thấy chúng ở đây.
Tạo bảng màu và kiểm tra độ tương phản
Biết lý thuyết là tuyệt vời, giải thích ý tưởng của bạn là một điều khác hoàn toàn. Mặc dù vậy, bạn không nên lo lắng, web cung cấp hỗ trợ tuyệt vời cho nhu cầu tung hứng màu sắc của bạn. Có rất nhiều công cụ giúp bạn tạo các mẫu màu tùy chỉnh dựa trên các quy tắc tương phản màu, ví dụ: Paletton hoặc Adobe Kuler.
Đối với mục đích web, bạn có thể muốn kiểm tra độ tương phản mà bạn đã chọn sử dụng tại webAIM, tại trang web của Jonathan Snook hoặc tải xuống bản sao của Trình phân tích độ tương phản màu của Nhóm Paciello tại đây.
Phần kết luận
Khi bạn bắt đầu làm việc với một chủ đề mới hoặc bắt đầu sửa đổi những chủ đề hiện có, hãy thử nghĩ về các nguyên tắc nhận thức để sắp xếp nội dung của bạn và nhớ xem xét các quy tắc màu sắc khi đưa ra thiết kế và hình thức cuối cùng của thiết kế.
Ghi chú của biên tập viên: Bài đăng của khách này được viết cho Hongkiat.com bởi Marton Fekete. Marton là một nhà phát triển trang web Hungary gần đây đã kết nối với WordPress. Anh ấy là một người đam mê thiết kế lại và viết nội dung tự do, thích chơi game nhập vai vào thời gian rảnh.
