Đôi mắt là bộ phận kỳ lạ luôn biết cách đánh lừa cảm giác của con người. Tuy nhiên, nếu nắm rõ những đặc thù về thị giác, bạn có thể xây dựng các thiết kế gần gũi và rõ ràng hơn.
Trong những năm 1920, định luật Gestalt về nhận thức thị giác đã được tăng trưởng. Nó lý giải cách mắt tất cả chúng ta giải quyết và xử lý những hình ảnh khác nhau và cách bộ não của tất cả chúng ta diễn giải chúng. Bạn hoàn toàn có thể đã nghe nói về những thứ như nguyên tắc gần hoặc quy tắc nhóm. Bài viết này đề cập đến một số ít điểm của kim chỉ nan Gestalt và nêu bật những góc nhìn thực tiễn trong nghiên cứu và điều tra khoa học .
Ở phần 1 và 2, tất cả chúng ta đã khám phá về giám sát, kích cỡ và cách chỉnh sửa những hình dạng khác nhau trong phong cách thiết kế. Ở phần cuối, bài viết sẽ đưa bạn khám phá về cách bo góc trong hiệu ứng thị giác. Cùng iDesign mày mò nhé !
Bài viết của tác giả : Slava Shestopalov – Trưởng phong cách thiết kế tại eleks.com
3. Bo tròn góc trong hiệu ứng thị giác
Không có gì tròn hơn hình tròn? Tôi từng nghĩ như vậy! Thế nhưng như tôi đã nói ở đầu bài viết này, đôi mắt của chúng ta rất đặc biệt và đôi khi chúng cảm nhận mọi thứ không như chúng ta mong đợi. Vì vậy, vòng tròn nào bên dưới trông có vẻ mềm mại nhất?
Đa số mọi người sẽ lựa chọn giữa số 3 và 4. Còn số 1 và 2 chắc như đinh là quá méo, số 5 là quá đầy đặn. Nếu tất cả chúng ta chồng lên những biến thể thứ 3 và thứ 4 – một vòng tròn hình học và một vòng tròn được tinh chỉnh và điều khiển – tất cả chúng ta sẽ thấy rằng vòng tròn thứ hai sẽ vừa khít hơn so với hình tròn trụ tiên phong. Do đó, chúng sẽ mang lại cảm xúc thướt tha hơn .
Để miêu tả những gì đã nói, tôi lấy chữ “ o ” từ ba font chữ hình học nổi tiếng – Futura, Circe, và Geometria. Đây là những font chữ chất lượng cao được thiết kế xây dựng dựa trên nhận thức trực quan của con người và sử dụng một mạng lưới hệ thống thiết kế xây dựng thị giác phức tạp, tôi cho rằng hình dạng của chúng trông tròn hơn hình tròn trụ hình học. Những chữ này có mang lại cảm xúc dễ chịu và thoải mái cho đôi mắt của bạn không ?
Hãy chồng chúng lên những vòng tròn hình học. Ngay cả chữ “ o ” của Futura cũng có 4 cạnh dư ra. Các vần âm của Circe và Geometria, cũng rộng hơn vòng tròn. Mặc dù chúng có chiều cao và chiều rộng bằng nhau, nhưng tất cả chúng ta hoàn toàn có thể thấy cả bốn “ phần bụng ” lồi lõm không đều .
Vì vậy, về mặt thị giác, một vòng tròn được điều khiển và tinh chỉnh ( ở bên phải ) thậm chí còn trông còn “ tròn ” hơn một hình tròn trụ thông thường ( ở bên trái ) .
Làm thế nào tất cả chúng ta hoàn toàn có thể ứng dụng hiện tượng kỳ lạ này ? Đó là vận dụng chúng vào việc bo tròn góc ! Nếu bạn sử dụng tính năng bo tròn có sẵn trong những ứng dụng chỉnh sửa đồ họa thông dụng, chúng sẽ không mang lại hiệu quả tốt về mặt thị giác .
Mắt người ngay lập tức phát hiện ra điểm mà một đường thẳng đùng một cái biến thành một đường cong. Và cách bo tròn này có vẻ như không tự nhiên .
Tôi đã khắc phục lỗi này trên cơ sở nhận thức thị giác của tất cả chúng ta .
Ở góc bo tròn này có một khu vực phụ vượt ra ngoài vòng tròn hình học, nó làm mất đi tiếp điểm mà một đường thẳng chuyển thành đường cong.
Chỉ cần cố gắng cảm nhận sự khác biệt giữa các phương pháp bo tròn này.
Bây giờ tất cả chúng ta hoàn toàn có thể vận dụng chiêu thức này để bo tròn những button .
Bạn có thể nhận thấy rằng các button ở bên phải có góc bo tròn mượt và mềm mại hơn.
Cũng là câu truyện chung so với những icon của ứng dụng. Khó hoàn toàn có thể đạt tác dụng hoàn hảo nhất nếu sử dụng cách bo tròn thường thì. Nhưng trước khi tất cả chúng ta đi sâu vào chủ đề này, hãy xem xét hai hình dưới đây .
Hình đầu tiên là hình chữ nhật bo tròn, mà tôi đã tạo trong Sketch. Hình dạng thứ hai là super ellipse, còn được gọi là đường cong Lamé. Nó được phát hiện bởi một nhà toán học người Pháp Gabriel Lamé và tùy thuộc vào công thức để thay đổi từ một cái gì đó như một ngôi sao bốn cánh thành hình dạng trông như một hình vuông bo tròn.
Marc Edwards đã yêu cầu công thức của đường cong Lamé để tạo ra một hình dạng tuyệt đối và quyến rũ. Các icon từ iOS 7 trở đi đều được phong cách thiết kế dựa trên công thức này .
Sau đó, hình dạng này đã được sửa đổi bằng cách thêm tỷ suất vàng và lưới để hướng dẫn những nhà phong cách thiết kế tạo ra những icons mới, nhưng đó là một câu truyện khác .
Lợi ích chính của việc sử dụng những hình dạng như super ellipse là sự quyến rũ của chúng. Mặt khác, những hình dạng phi tiêu chuẩn này rất khó để chèn vào một giao diện thực. Một trong hai nên phối hợp với nhiều SVG, gồm có những công thức hoặc tập lệnh đặc biệt quan trọng chuyển thành code hay sử dụng PNG như Apple đã làm cho icon ứng dụng của họ .
Đối với quy trình phong cách thiết kế chính, có một cách điều khiển và tinh chỉnh đơn thuần cho những góc bo tròn. Bạn cần phải quy đổi những hiệu ứng bo tròn thành một đường viền, nhập chính sách chỉnh sửa hình dạng và vận động và di chuyển đường cong gần nhau hơn .
Sự độc lạ thậm chí còn còn dễ nhận thấy hơn khi bo tròn góc nhọn .
Những điều cần nhớ
- Bo góc tròn theo cách thông thường nhìn sẽ không tự nhiên, vì bạn có thể dễ dàng nhìn thấy tiếp điểm mà một đường thẳng đột nhiên biến thành một đường cong.
- Việc bo tròn góc chính xác cần có công thức đặc biệt hoặc điều chỉnh hình dạng theo cách thủ công.
Bonus
Đôi khi một hình vuông vắn trông không hề vuông. Bạn hoàn toàn có thể nghĩ : “ Thật là vô lý ? ” Vậy, bạn nghĩ gì về những ô vuông bên dưới ? Hình dạng nào trông có vẻ như vuông góc hơn ?
Nếu bạn đã chọn hình dạng bên trái, theo hiệu ứng thị giác bạn đã đúng .
Cá nhân tôi đã rất ngạc nhiên khi biết rằng đôi mắt của chúng ta nhạy cảm hơn với chiều cao của một vật thể hơn là chiều rộng của nó. Nó giải thích tại sao ngay cả trong các font chữ hình học, các chữ cái “o” luôn luôn rộng hơn các vòng tròn hình học, và chiều cao của chữ “H” luôn dày hơn các chữ cái nằm ngang.
Biên tập : Thao Lee
Nguồn : medium
Ảnh bìa : Balraj Chana
Source: https://swing.com.vn
Category: Wiki
