Làm thế nào để thiết kế giao diện của bạn hấp dẫn và tiên tiến｜Phần 1

Các nhà thiết kế thực sự có thể gặp phải một số [rắc rối] trong quá trình thiết kế, điều này có thể khiến kết quả thiết kế có vẻ không [cao cấp, hoành tráng hoặc đẳng cấp] hoặc không [cảm thấy] đủ. Trong trường hợp này, làm sao để giải quyết những vấn đề này? Bài viết này chia sẻ hai phương pháp có thể giúp chúng ta thiết kế giao diện tốt hơn và nâng cao tính tinh tế của giao diện.

PHẦN 01 Học và phân tích bố cục nâng cao

Thiết kế kiểu chữ là gì

[Câu hỏi nhỏ] Trong hai tấm áp phích bia sau đây, tấm nào trông rẻ tiền hơn?

Không cần phải nói, đó là B, vì đó là một anh chàng đẹp trai~ Vì B có chân dung nhân vật, nên anh ấy dễ gần hơn nhiều so với A, người lạnh lùng và xa cách. Chỉ những thứ giá cả phải chăng mới có thể tiếp cận được, nên B có vẻ rẻ hơn và nằm trong phạm vi giá cả phải chăng của tôi. Mặt khác, A mang lại cho mọi người cảm giác xa cách, đắt đỏ và không đủ khả năng chi trả. [Câu hỏi nhỏ] Trong hai danh thiếp sau đây, danh thiếp nào có khả năng khiến mọi người cảm thấy đáng tin cậy hơn?

Không cần phải nói, đó là B, vì sự căn chỉnh được thực hiện tốt, mang lại cho mọi người cảm giác gọn gàng và chuyên nghiệp. Mặt khác, chữ A thì quá phức tạp và lòe loẹt. Tại sao lại có vẻ như có người có thể làm việc nghiêm túc? Vì vậy B có thể khiến mọi người tin tưởng mình hơn. Tại sao cả hai đều trông giống danh thiếp nhưng lại mang lại cho mọi người những cảm xúc tâm lý khác nhau?

"Đây thực chất là tác động của các thiết kế bố cục khác nhau" là khái niệm cơ bản của thiết kế bố cục.

[Định nghĩa] Là một nhánh quan trọng của thiết kế đồ họa, thiết kế bố cục tập trung vào việc sử dụng khéo léo các yếu tố mô hình hóa và nguyên tắc chính thức khác nhau để sắp xếp cẩn thận văn bản, hình ảnh, đồ họa, đường kẻ, bảng, khối màu và các yếu tố khác trong bố cục. Quá trình này không chỉ là sự sắp xếp và kết hợp đơn giản mà còn là cách truyền tải trực quan ý định và thông tin của nhà thiết kế đến người xem dưới dạng nghệ thuật thị giác. Thông qua bố cục cẩn thận, chúng tôi nỗ lực tạo ra một trang web có tính thẩm mỹ hài hòa và thống nhất, đồng thời đảm bảo truyền đạt thông tin hiệu quả để người xem có thể cảm nhận sâu sắc sự sáng tạo và ý định của nhà thiết kế.

Hãy cùng xem xét một nhóm phong cách thiết kế áp phích khác. Bạn thích cái nào nhất ngay từ cái nhìn đầu tiên? Hay cái nào thu hút bạn ngay từ cái nhìn đầu tiên? Lý do thu hút chính là vai trò của thiết kế bố cục mà chúng ta đã nói đến.

[Chức năng] Thu hút sự chú ý của người đọc và kích thích hứng thú đọc của họ là nhiệm vụ chính của thiết kế bố cục. Thông qua bố cục cẩn thận, đảm bảo chủ đề chính của bố cục có thể được trình bày rõ ràng cho khán giả. Đồng thời, nó phát huy hết khả năng biểu đạt của thiết kế bố cục, củng cố chủ đề của bố cục và thu hút sâu sắc sự chú ý của khán giả bằng sức hấp dẫn nghệ thuật độc đáo, mang đến cho họ sự thưởng thức thị giác và chạm đến trái tim. Bảy nguyên tắc thiết kế kiểu chữ

Chúng ta có thể trích xuất nhiều khái niệm trừu tượng hơn từ bất kỳ công nghệ nào để hướng dẫn việc học thực tế của mình. Tiếp theo, chúng ta hãy bắt đầu tìm hiểu bảy nguyên tắc của thiết kế bố cục - tính biểu cảm, tỷ lệ hình ảnh, tốc độ nhảy văn bản, tốc độ nhảy hình ảnh, tốc độ ràng buộc lưới, tốc độ bố cục và thành phần.

1. Sự biểu cảm

[Khái niệm] Tính biểu cảm đề cập đến khả năng của thiết kế bố cục trong việc truyền tải trực quan cảm xúc, bầu không khí và chủ đề.

[Ý nghĩa] Một thiết kế bố cục có sức biểu cảm mạnh mẽ có thể nhanh chóng thu hút sự chú ý của khán giả, truyền tải hiệu quả ý định của nhà thiết kế, tạo được tiếng vang với khán giả và để lại ấn tượng sâu sắc.

[Ví dụ]

2. Tốc độ đĩa

【Khái niệm】Tỷ lệ hình ảnh đề cập đến tỷ lệ diện tích mà hình ảnh chiếm giữ trong bố cục trang.

[Ý nghĩa] Tỷ lệ hình ảnh trên trang ảnh hưởng trực tiếp đến hiệu ứng hình ảnh của bố cục trang và hiệu quả truyền đạt thông tin. Tỷ lệ hình ảnh trên văn bản cao thường làm cho bố cục sống động và tươi tắn hơn, trong khi tỷ lệ hình ảnh trên văn bản thấp có thể làm cho bố cục trông ngắn gọn và rõ ràng hơn.

[Ví dụ]

3. Tốc độ nhảy văn bản

[Khái niệm] Tỷ lệ nhảy văn bản đề cập đến mức độ tương phản giữa các thành phần văn bản có kích thước, phông chữ, màu sắc và các thuộc tính khác nhau trong bố cục.

[Ý nghĩa] Bằng cách điều chỉnh tốc độ nhảy văn bản, bạn có thể làm nổi bật thông tin văn bản quan trọng, hướng dẫn thứ tự đọc của người đọc và cải thiện khả năng đọc trang cũng như hiệu quả truyền đạt thông tin.

[Ví dụ]

4. Tỷ lệ thoát

[Khái niệm] Tỷ lệ nhảy ảnh là mức độ tương phản giữa các thành phần hình ảnh có kích thước, hình dạng, màu sắc và các thuộc tính khác nhau trong bố cục.

[Ý nghĩa] Tốc độ nhảy hình ảnh phù hợp có thể tăng cường tác động trực quan của bố cục, làm cho bố cục có nhiều lớp và năng động hơn, đồng thời giúp thu hút sự chú ý của khán giả.

[Ví dụ]

5. Ràng buộc lưới

[Khái niệm] Tỷ lệ ràng buộc lưới đề cập đến mức độ sử dụng và sự phụ thuộc vào hệ thống lưới trong thiết kế bố trí.

[Ý nghĩa] Hệ thống lưới có thể làm cho bố cục chuẩn hóa và gọn gàng hơn, đồng thời cải thiện tính nhất quán và khả năng đọc của thiết kế. Tuy nhiên, những ràng buộc quá mức về lưới có thể hạn chế khả năng sáng tạo của nhà thiết kế, do đó việc sử dụng lưới cần phải cân bằng theo nhu cầu và phong cách thiết kế.

[Ví dụ]

6. Bố cục trang

[Khái niệm] Tỷ lệ bố cục là tỷ lệ giữa diện tích chiếm dụng của các thành phần như văn bản, hình ảnh trong bố cục so với diện tích của toàn bộ bố cục.

[Ý nghĩa] Tỷ lệ bố trí quyết định khả năng truyền tải thông tin và hiệu ứng hình ảnh của bố trí. Tỷ lệ bố cục hợp lý có thể đảm bảo bố cục không quá chật chội hoặc quá trống trải, duy trì sự cân bằng thị giác và hiệu quả truyền đạt thông tin.

[Ví dụ]

7. Thành phần

[Khái niệm] Bố cục là việc sắp xếp, kết hợp các yếu tố khác nhau trong bố cục (như văn bản, hình ảnh, đường nét, v.v.) theo những quy tắc, nguyên tắc nhất định để tạo thành một bức tranh thị giác hoàn chỉnh và hài hòa.

[Ý nghĩa] Bố cục tốt là cơ sở của thiết kế bố cục, quyết định hiệu ứng hình ảnh tổng thể của bố cục và cách truyền tải thông tin. Thông qua bố cục thông minh, bạn có thể làm nổi bật chủ đề, định hướng tầm nhìn, tạo bầu không khí và khiến bố cục hấp dẫn và lôi cuốn hơn.

[Ví dụ]

Những khái niệm này đóng vai trò quan trọng trong thiết kế kiểu chữ. Chúng có mối quan hệ mật thiết và ảnh hưởng lẫn nhau, cùng nhau tạo nên hiệu ứng và phong cách tổng thể của thiết kế bố cục. Các nhà thiết kế cần nắm vững những khái niệm này và áp dụng linh hoạt theo nhu cầu và mục tiêu thiết kế để tạo ra những tác phẩm thiết kế xuất sắc.

Giới thiệu Sau khi thảo luận sâu hơn, bảy nguyên tắc thiết kế bố cục là: tính biểu cảm, tỷ lệ hình ảnh, tốc độ nhảy văn bản, tốc độ nhảy hình ảnh, tốc độ ràng buộc lưới, tốc độ bố cục và thành phần. Hôm nay chúng ta sẽ tiếp tục bài viết tiếp theo. Bây giờ chúng ta đã biết rất nhiều nguyên tắc, làm sao chúng ta có thể áp dụng chúng vào thực tế? Chúng ta đi thôi.

PHẦN 2 Cách sử dụng trong thiết kế giao diện

2.1 Sự tương phản và khác biệt

Có sự khác biệt đáng kể giữa thiết kế bố cục và thiết kế giao diện APP về mặt trọng tâm thiết kế, các yếu tố thiết kế và yêu cầu, nhưng chúng có một số điểm chung về nền tảng thiết kế trực quan, định hướng người dùng, công nghệ và công cụ. Trên cơ sở nắm vững những điểm chung này, các nhà thiết kế cần tiến hành nghiên cứu chuyên sâu và thực hành trong các lĩnh vực thiết kế cụ thể để có thể đáp ứng tốt hơn các thách thức và nhu cầu thiết kế khác nhau. Thiết kế bố cục và thiết kế giao diện APP đều chiếm vị trí quan trọng trong lĩnh vực thiết kế hình ảnh. Có những điểm khác biệt đáng kể giữa chúng, nhưng cũng có một số điểm chung.

Sau đây là so sánh chi tiết về sự khác biệt và điểm tương đồng giữa hai loại:

1. So sánh sự khác biệt

Một. Trọng tâm và mục đích thiết kế

【Thiết kế bố cục】chủ yếu tập trung vào hình thức và cách trình bày trực quan. Nó theo đuổi phong cách nghệ thuật và hiệu ứng hình ảnh độc đáo, nhằm thu hút sự chú ý của khán giả thông qua cách sắp chữ và bố cục tinh tế, tạo nên điểm nhấn ấn tượng sâu sắc. Thiết kế bố cục tập trung nhiều hơn vào tính sáng tạo và tác động trực quan, cũng như cách truyền tải thông tin hiệu quả trong không gian bố cục hạn chế.

【Thiết kế giao diện APP】chú ý nhiều hơn đến việc truyền đạt thông tin, thực hiện chức năng và trải nghiệm của người dùng. Mục đích là giúp người dùng nhanh chóng hiểu và sử dụng các chức năng khác nhau của ỨNG DỤNG thông qua thiết kế giao diện rõ ràng và trực quan. Thiết kế giao diện APP cần phải tính đến thói quen sử dụng của người dùng, logic tương tác và tính dễ sử dụng để đảm bảo người dùng có thể hoàn thành nhiều thao tác khác nhau một cách trơn tru trong quá trình sử dụng.

b. Các yếu tố và yêu cầu thiết kế

[Thiết kế bố cục] thường liên quan đến nhiều yếu tố như văn bản, hình ảnh, màu sắc, đường nét, v.v., đòi hỏi người thiết kế phải có khả năng thẩm mỹ và sáng tạo cao, có khả năng kết hợp khéo léo các yếu tố này để tạo nên hiệu ứng bố cục có sức hấp dẫn về mặt nghệ thuật.

[Thiết kế giao diện APP] tập trung nhiều hơn vào bố cục giao diện, thiết kế nút bấm, hiệu ứng tương tác, v.v. Nó đòi hỏi người thiết kế phải quen thuộc với các thông số kỹ thuật và nguyên tắc thiết kế giao diện người dùng và có khả năng thiết kế giao diện phù hợp với thói quen và mong đợi của người dùng.

2. So sánh điểm chung

Một. Kiến thức cơ bản về thiết kế hình ảnh Cho dù là thiết kế bố cục hay thiết kế giao diện ỨNG DỤNG, bạn cần nắm vững các nguyên tắc và kỹ thuật thiết kế hình ảnh cơ bản, chẳng hạn như phối màu, chọn phông chữ, quy tắc sắp chữ, v.v. Những kiến ​​thức cơ bản này là nền tảng để xây dựng nên những thiết kế tuyệt vời và giúp các nhà thiết kế thể hiện tốt hơn ý định thiết kế của mình và đạt được mục tiêu thiết kế.

b. Hướng đến người dùng Cả hai đều đòi hỏi sự hiểu biết sâu sắc về nhu cầu và thói quen hành vi của người dùng để thiết kế các tác phẩm đáp ứng tốt hơn mong đợi của người dùng. Cho dù là để thu hút sự chú ý của khán giả hay cải thiện trải nghiệm của người dùng, thì tư duy thiết kế lấy người dùng làm trung tâm là điều cần thiết.

c. Công nghệ và công cụ Trong quá trình thiết kế, cả hai sẽ sử dụng một số phần mềm và công cụ thiết kế giống nhau hoặc tương tự nhau, chẳng hạn như phần mềm Adobe (Photoshop, Illustrator, v.v.) và các công cụ thiết kế giao diện như Sketch và Figma. Những công cụ này có thể giúp các nhà thiết kế hoàn thành nhiệm vụ thiết kế hiệu quả hơn và hiện thực hóa ý tưởng thiết kế.

2.2 Phân tích trường hợp APP

Hãy cùng xem xét hiệu quả thực hiện của một số trường hợp cụ thể và xem chúng có thể truyền cảm hứng gì cho chúng ta:

MẸO: Sự khác biệt giữa phân chia theo dòng và phân chia theo khoảng cách là dòng phân chia tạo cho người đọc cảm giác áp bức, trong khi phân chia theo khoảng cách tạo cho người đọc trải nghiệm đọc thoải mái hơn.

MẸO: Trong thiết kế trang Trung tâm thành viên QQ Music, các cấp độ khác nhau tương ứng với các thẻ màu khác nhau. Việc sử dụng màu sắc để tô nền giúp thu hút người dùng tăng tỷ lệ độc quyền của giao diện và đóng vai trò hướng dẫn trực quan khi chuyển đổi tài khoản. Đây là một ý tưởng thiết kế hay.

MẸO: Chỉ ra nội dung nổi bật hơn trong hình ảnh, để người dùng có thể thu hút sự chú ý ngay từ cái nhìn đầu tiên khi duyệt sản phẩm; tiêu điểm là tương đối và có thể là tiêu điểm trong một trang lớn hoặc trong một mô-đun nhỏ.

MẸO: Khi mua sắm trực tuyến, chúng ta thường có ấn tượng đầu tiên về sản phẩm thông qua hình ảnh, vì vậy tỷ lệ hình ảnh trên các trang web mua sắm nên phù hợp nhất có thể với đặc điểm của sản phẩm để thiết kế bố cục tốt hơn.

MẸO: Nhìn chung, khi thiết kế, chúng ta thường hướng đến "màu xám cao cấp" hoặc "độc đáo". Trên thực tế, điều quan trọng hơn là phải phù hợp với tông điệu của sản phẩm và nhóm đối tượng mục tiêu của sản phẩm, chúng ta không thể theo đuổi một cách mù quáng “mục tiêu thiết kế” của riêng mình. "Việc lựa chọn các mẫu khác nhau theo các yêu cầu khác nhau của dự án chắc chắn sẽ đạt được kết quả gấp đôi với một nửa nỗ lực!"

2.3 Áp dụng những gì bạn đã học để nâng cao kỹ năng của bạn

Mọi kiến ​​thức kỹ thuật đều có thể chuyển giao được. Chúng ta cần áp dụng những gì đã học vào thực tế và linh hoạt áp dụng kiến ​​thức và kỹ năng đã học vào công việc thực tế. Quá trình chuyển giao kiến ​​thức kỹ thuật không chỉ là quá trình đào sâu hiểu biết về kiến ​​thức mà còn là quá trình nâng cao toàn diện năng lực. Thông qua thực hành, khám phá và đổi mới liên tục, chúng ta có thể chuyển hóa kiến ​​thức kỹ thuật đã học thành khả năng giải quyết các vấn đề thực tế.

Sau đây là một kinh nghiệm nhỏ mà cá nhân tôi đã tóm tắt lại. Thông qua bốn bước, chúng ta có thể dần dần cải thiện nó và làm cho thiết kế giao diện trở nên thú vị hơn! 】

Là một nhà thiết kế, đừng để bị giới hạn bởi CSS, HTML hoặc bất kỳ công cụ kỹ thuật nào khác. Chúng không nên cản trở bố cục lý tưởng của bạn. Những nguyên tắc thiết kế này áp dụng cho mọi phương tiện, như nền tảng, ngành, web, v.v. Chúng là ví dụ đơn giản và rõ ràng về cách não và mắt của chúng ta tiếp nhận thông tin trực quan ở mọi định dạng. Chỉ bằng cách học mọi thứ và sử dụng mọi thứ, bạn mới có thể vượt qua được nút thắt.

Sau khi thảo luận sâu hơn, bảy nguyên tắc thiết kế bố cục là: tính biểu cảm, tỷ lệ hình ảnh, tốc độ nhảy văn bản, tốc độ nhảy hình ảnh, tốc độ ràng buộc lưới, tốc độ bố cục và thành phần. Những nguyên tắc này không chỉ nâng cao thứ bậc trực quan mà còn cho phép chúng ta thể hiện các yếu tố mà chúng ta muốn trình bày một cách khoa học và chặt chẽ. Khi xem xét các trường hợp tương ứng với từng nguyên tắc, không khó để nhận thấy rằng mỗi trường hợp thực chất là sự áp dụng toàn diện của nhiều nguyên tắc. Chúng phụ thuộc lẫn nhau và không thể tồn tại riêng lẻ.

Tôi hy vọng rằng tất cả chúng ta có thể nâng cao năng lực của mình, đảm bảo rằng mọi yếu tố thiết kế có thể cùng tồn tại hài hòa, cùng nhau xây dựng hiệu ứng bố cục vừa đẹp vừa thiết thực, tạo ra trải nghiệm hình ảnh hấp dẫn hơn và làm cho thiết kế phù hợp hơn với mong đợi và nhu cầu của người dùng.