Đồ họa sản phẩm 6 Kỹ thuật để làm cho hình ảnh nhiều thông tin hơn

Các nhà thiết kế web đã trở nên rất xảo quyệt với các kỹ thuật tiếp thị. Nội dung trang hấp dẫn luôn tốt, nhưng khi nói đến việc thu hút khách truy cập của bạn, hình ảnh chú ý là hình thức truyền thông phổ biến nhất. Họ không yêu cầu âm thanh như video demo và họ có thể nhanh chóng chuyển tiếp thông tin quan trọng trong vài giây. Có vẻ dễ dàng, nhưng có một số kỹ thuật đáng chú ý để xây dựng hình ảnh thông tin trên các trang web.

Chúng bao gồm nhãn tính năng, ảnh chụp màn hình cận cảnh, so sánh giá và các chi tiết phút khác. Các nhà thiết kế web có thể sử dụng đồ họa thông tin để mô hình hóa các ứng dụng mới, phần mềm, trò chơi video hoặc nhiều sản phẩm khác! Mặc dù thông thường nhất bạn thấy các kỹ thuật này được sử dụng trong các lĩnh vực công nghệ khác nhau.

Kiểm tra các ý tưởng dưới đây, nơi chúng tôi cung cấp không chỉ các mẹo mà cả các ví dụ thực tế về đồ họa sản phẩm đẹp mắt được đóng gói với thông tin tuyệt vời.

1. Mở rộng nội dung của bạn

Hình ảnh thông tin không nên được sử dụng thay cho nội dung trang web tốt. Thay thế sử dụng hình ảnh để mở rộng các điểm chính của bạn và minh họa chúng rõ ràng cho khách truy cập của bạn. Một trong những cách tốt nhất để làm điều này là xây dựng một bản demo nhỏ để làm nổi bật các khu vực quan trọng của một hướng dẫn. Với một vài đồ họa và ảnh chụp màn hình thông tin, sẽ đơn giản hơn rất nhiều để giữ cho sự quan tâm của độc giả của bạn chuyển qua từng bước.

Khi bạn cố gắng thể hiện một hướng dẫn phần mềm (chẳng hạn như hướng dẫn Photoshop), có thể khó khăn để truyền tải thông điệp vào văn bản. Khách truy cập sẽ truy cập vào bài viết của bạn và ngay lập tức bắt đầu đánh giá một cách có ý thức các tài liệu trong một phần của giây. Web Designer Wall có một hướng dẫn tuyệt vời về xây dựng hình ảnh tròn CSS3 kèm theo một đồ họa tiện dụng. Điều này bao gồm một số nhãn và ảnh chụp cận cảnh về hiệu ứng.

Trên trang bài viết gốc, hình ảnh này sẽ thêm một hình ảnh rõ ràng hơn vào đầu bạn về những gì bạn sẽ tạo ra. Tác giả đã thêm một liên kết demo nhỏ, nhưng tại sao không bao gồm một số hình ảnh demo? Bạn có nhiều khả năng thu hút sự chú ý với ảnh chụp thử được dán nhãn đúng.

Cố gắng tránh thêm hình ảnh chỉ vì mục đích truyền thông trong bài viết của bạn. Nếu bạn có thể giải thích các phương pháp hoặc lý luận của bạn mà không có hình ảnh, hãy bắt đầu ở đây trước. Chỉ sau khi nhìn lại bản sao web của bạn, bạn mới nên xem xét lại một số điểm trong đồ họa hình ảnh chi tiết. Cụ thể bạn có thể tìm thấy một hướng dẫn đòi hỏi nhiều tín hiệu thị giác hơn khi độ phức tạp tăng. Hai ví dụ có thể bao gồm xây dựng cơ sở dữ liệu trang web hoặc tập dữ liệu bảng.

2. Làm nổi bật các tính năng đáng chú ý

Bởi vì mỗi phần mềm / công nghệ sẽ có rất nhiều tính năng nên gần như không thể giải thích từng bit một. Không chỉ điều này, nhưng rất có thể khách truy cập của bạn sẽ không thích đọc 20+ nhãn trên đồ họa thông tin của bạn. Bám sát các tính năng thú vị nhất và sử dụng nhãn để giải thích sâu hơn một chút.

Khi viết bản sao web cho nội dung nhãn của bạn tránh ngôn ngữ buồn tẻ bất cứ khi nào có thể. Nếu khách truy cập đang xem phiên bản mới nhất của ứng dụng của bạn, họ có thể không quan tâm nhiều đến những thay đổi trong bảng màu. Điều đó sẽ ảnh hưởng đến quy trình làm việc hàng ngày của họ như thế nào? Thay vào đó có thể làm nổi bật những gì có lợi cho họ, như bảng giao diện mới hoặc kết nối nhiều người dùng. Chúng thường là tính năng trừu tượng mà bạn không thể nhìn thấy chỉ bằng “tìm kiếm” tại sản phẩm.

Có một nhãn như vậy để giải thích các tính năng này hoàn toàn sẽ cung cấp phản ứng phong phú nhất. Du khách sẽ cảm thấy họ đang được đối xử như những người mua sắm thông minh, trưởng thành có khả năng tự đưa ra quyết định. Nếu họ thực sự thích các tính năng của bạn, điều này sẽ thúc đẩy việc mua phần mềm hoặc sản phẩm của bạn.

Dưới đây là một ví dụ từ trang cập nhật Mozilla Firefox.

Bạn có thể thấy các nhà thiết kế đã sử dụng các đường cong chấm chấm để chỉ ra các nhãn và các tính năng mới. Đây thực sự là những hình ảnh nền được định vị hoàn toàn bên trong một container div. Đáng ngạc nhiên là tất cả các văn bản nhãn cũng được viết bên trong các thẻ HTML (không phải chỉ một hình ảnh lớn).

Tôi cảm thấy phương pháp này không chỉ tiện dụng cho các trình thu thập thông tin của Google mà cả những người dùng di động thường không thể trải nghiệm toàn bộ trang web.

Cũng lưu ý cách tính năng Toàn cảnh ở bên trái cung cấp một nhỏ “Tìm hiểu thêm” liên kết. Đây có thể là cách thực hành tốt nhất bạn có thể có được khi xây dựng đồ họa thông tin! Nếu bạn có các trang hoặc neo thay thế trong cùng một trang, khách truy cập của bạn có thể nhấp vào các liên kết này để hiểu thêm về các tính năng phức tạp.

Hãy nhớ rằng đồ họa thông tin được sử dụng để dễ dàng hiển thị các lời trêu ghẹo và các tính năng sản phẩm cho khách truy cập của bạn. Vì vậy, mặc dù bạn bị giới hạn trong không gian xung quanh đồ họa, bạn có thể luôn luôn cung cấp cơ hội để tìm hiểu thêm trên một trang bên ngoài.

3. Nhãn đơn giản, không phô trương

Nhãn thực sự là khía cạnh quan trọng nhất trong việc tạo ra đồ họa sản phẩm thông tin. Khách truy cập có thể sẽ cần phải hiểu các lĩnh vực khác nhau trong sản phẩm, phần mềm, trang web, ứng dụng di động của bạn, v.v. Thật không may, việc sử dụng bảng và danh sách gạch đầu dòng chỉ có thể đi xa. Khi bạn thực sự cần giải thích các tính năng của sản phẩm, điều quan trọng là chọn ra điểm nóng để ghi nhãn.

Máy tính Apple có thể là ví dụ tốt nhất về chi tiết nhãn đơn giản. Bạn có thể nhận thấy những kỹ thuật chính xác này trên đồ họa của chúng khi nhìn qua máy tính bảng, máy tính xách tay hoặc iPhone khét tiếng. Các tính năng và thông số kỹ thuật của chúng thường giống như các nhà sản xuất máy tính thương hiệu lớn khác. Tuy nhiên, các mô hình đồ họa của họ rất nguyên sơ đến nỗi các sản phẩm thực tế đang tự bán.

Lưu ý rằng khi bạn chia nhỏ quy trình, nó đơn giản hơn bạn nghĩ rất nhiều! Đồ họa sản phẩm chỉ là một phần tiêu chuẩn của thiết kế trang web tổng thể. Ngay cả khi bạn đang bán phân bón hoặc ga trải giường hoặc thẻ giao dịch, bạn vẫn có thể sử dụng các kỹ thuật ghi nhãn này. Và mặc dù Apple có một số đồ họa thông tin thực sự đơn giản, nhưng họ không phải là công ty duy nhất làm như vậy. Thử Googling xung quanh cho các doanh nghiệp trong thị trường ngách của bạn để xem nếu họ thể thao bất kỳ nhãn thông tin ưa thích hoặc màn hình trêu ghẹo trên trang web của họ.

4. Hình ảnh với nội dung động

Đối với một số nhà phát triển web, có thể không đủ để chỉ tạo một đồ họa có nhãn của phần mềm của bạn. Có thể có rất nhiều tính năng độc đáo bạn muốn xem qua nhưng chứa trong một phần nhỏ của trang web của bạn. Có thể xây dựng một loạt các bước giới thiệu dẫn bạn truy cập trong suốt bản demo sản phẩm nhỏ.

Newsberry minh họa thanh lịch một ví dụ về điều này. Trên trang chủ của họ, bạn sẽ nhận thấy một khu vực khối với một điều hướng nhỏ bên dưới. Chúng bao gồm 5 bước trong quá trình với các ảnh chụp màn hình khác nhau và một số văn bản mô tả đi kèm. Ngay cả khi bạn không biết Newsberry được dùng để làm gì, thì họ nội dung giới thiệu giải thích mọi thứ rất rõ ràng. Bạn thậm chí còn được cung cấp một vài liên kết demo trong suốt loạt slide.

Khi bạn di chuyển qua nội dung của chúng, bạn sẽ nhận thấy nhiều slide chứa ảnh chụp màn hình bên trong một cửa sổ trình duyệt nhỏ. Hiệu ứng này thực sự rất đơn giản để bắt chước! Bạn chỉ cần tìm một hình ảnh để sử dụng làm hình ảnh nền của bạn và kích thước lại ảnh chụp màn hình để vừa với bên trong. Cấp hiệu ứng này sẽ không hoạt động cho mọi sản phẩm, nhưng đó là một cách hay để đóng khung màn hình từ một ứng dụng web.

5. Xóa ảnh chụp màn hình và ảnh sản phẩm

Có thể bao gồm tất cả các nhãn và tính năng tốt nhất cho các sản phẩm của bạn nhưng vẫn bị bỏ lỡ trong bán hàng. Các ảnh chụp màn hình và ảnh bạn chọn cho đồ họa của bạn cuối cùng cũng quan trọng như tất cả các chi tiết tốt hơn. Trên Windows và Mac OS X, có nhiều cách để chụp ảnh màn hình toàn bộ máy tính để bàn của bạn bằng các phím tắt. Sử dụng phương pháp này kết hợp với một chút thời gian trong Photoshop, bạn có thể tích lũy các bản demo tính năng rất thú vị.

Nếu sản phẩm của bạn rất phức tạp, bạn nên cố gắng ghép lại một vài hình ảnh khác nhau. Ví dụ trên từ trang web của Tweetbot sử dụng các vòng tròn màu xanh để biểu thị hành động khai thác trên ứng dụng. Thay vì một ảnh chụp màn hình với nhiều nhãn, hãy cân nhắc sử dụng một bộ sưu tập hình ảnh jQuery nhỏ để kết hợp 3-5 đồ họa khác nhau. Điều này cho bạn nhiều cơ hội hơn để tập trung vào các quan điểm khác nhau của sản phẩm trong khi du khách được cung cấp trải nghiệm phong phú hơn nhiều.

Khi bạn chụp ảnh từ PC hoặc điện thoại thông minh, ảnh luôn được lưu ở mức thu phóng 100%. Trình chỉnh sửa hình ảnh như Photoshop có khả năng chỉnh kích thước lại, nhưng chúng thường bị mất chi tiết. Vì vậy, làm thế nào bạn có thể phù hợp với một đồ họa như vậy vào trang web nhỏ của bạn? Một trong những kỹ thuật tốt nhất là phóng đại trong đó bạn thu nhỏ ứng dụng xuống và tạo các phần phóng to của các phần quan trọng nhất. Kỹ thuật này được nhìn thấy phổ biến hơn trong phần mềm so với các sản phẩm vật lý - Tôi đã trình bày chi tiết quy trình thiết kế bên dưới.

6. Xây dựng hiệu ứng "Ống kính zoom"

Tôi sẽ xây dựng các bước để xây dựng hiệu ứng kính lúp trong Adobe Photoshop. Nếu bạn đang sử dụng một trình soạn thảo đồ họa khác, rất có thể bạn có thể thực hiện các tác vụ tương tự, nhưng các menu và lệnh sẽ khác nhau.

Một trong những ví dụ tốt nhất về kỹ thuật này là trên trang chủ ứng dụng Things for Mac. Đồ họa có ứng dụng được thu nhỏ lại để nó phù hợp hoàn hảo trên trang, cùng với một bóng nhỏ. Tuy nhiên, trên một số khu vực quan trọng, bạn sẽ nhận thấy một vòng tròn với nội dung bên trong lớn hơn nhiều. Họ thậm chí đã thêm một ánh sáng bên trong màu trắng để xuất hiện khi ánh sáng khúc xạ chiếu qua ống kính!

Phần thưởng: "Zoom Lens" Hiệu ứng Hướng dẫn Photoshop

Để bắt đầu chụp ảnh màn hình bạn muốn sử dụng cho đồ họa của mình. Tôi đã chụp nhanh màn hình trang chủ Hongkiat. Tôi sẽ cắt chỉ cửa sổ trình duyệt và thay đổi kích thước khoảng 700px. Bạn nên thay đổi kích thước chiều rộng cho phù hợp với khu vực nội dung của trang web của riêng bạn. Bây giờ tạo một lớp mới trên đầu của nền này và thực hiện lựa chọn vòng tròn trong khi giữ shift để giữ cho nó tỷ lệ thuận. Tô với bất kỳ màu nào bạn thích.

Bước 1

Giữ vòng tròn được chọn, thay đổi% điền trong bảng điều khiển lớp thành 0%. Dưới lớp FX, thêm một nét đen 1px-2px và ánh sáng bên trong màu trắng. Bạn có thể giảm độ mờ cho ánh sáng trắng ít hơn.

Bước 2

Vẫn giữ vòng tròn được chọn di chuyển lên lớp nền của bạn và nhấn ctrl (Đối với người dùng Mac, đó là lệnh hoặc phím cmd.) + c để sao chép. Sau đó tạo một lớp mới phía trên nền nhưng bên dưới vòng tròn phóng đại và dán. Ngoài ra, bạn có thể chỉ cần nhấn ctrl + j để nhân đôi một lớp mới chỉ với lựa chọn trong chiến thuật.

Nhấn ctrl + t để mở công cụ chuyển đổi. Bây giờ mở rộng ra lớp trùng lặp mới trong khi giữ ca để giữ mọi thứ theo tỷ lệ và alt để giữ văn phòng phẩm trung tâm.

Bước 3

Nhấn ctrl và nhấp vào biểu tượng lớp kính lúp để lựa chọn lại. Lưu ý rằng bạn vẫn nên làm nổi bật lớp nền trùng lặp trong bảng điều khiển lớp (lớp trực tiếp dưới kính lúp của chúng tôi) có nghĩa là nó sẽ có nền màu xanh nhạt.

Nhấn Ctrl + Shift + i để đảo ngược lựa chọn hiện tại. Bây giờ nhấn xóa để xóa rác thừa từ ảnh chụp màn hình được thu nhỏ lại của chúng tôi. Để có một chút hiệu ứng được thêm vào, hãy kéo menu FX lên trên để thêm một bóng nhỏ. Bạn cũng có thể vẽ một đường thẳng đứng mỏng 1px và sử dụng Bộ lọc hóa lỏng (Lọc> Hóa) tạo một tay cầm nhỏ!

Phần kết luận

Để thiết kế đồ họa sản phẩm tuyệt vời, bạn phải nhớ những điều cơ bản. Khách truy cập chỉ muốn hiểu những gì bạn đang cố gắng bán chúng! Cách dễ nhất để có được thông tin này là thông qua một loạt các ảnh chụp màn hình hoặc một đồ họa chi tiết duy nhất. Nhãn chỉ là mảnh thứ hai cho câu đố này, nơi bạn có thể phác thảo các bộ tính năng quan trọng nhất.

Khi bạn đặt tất cả các kỹ thuật này lại với nhau, bạn có thể sẽ bắt đầu chú ý đến bức tranh lớn hơn. Tải xuống và mua hàng sẽ tăng vọt - đặc biệt nếu bạn đặt đồ họa của bạn ở phía trước và trung tâm trên trang chủ của bạn. Những kỹ thuật này là hoàn hảo cho các nhà thiết kế đồ họa và web để bắt đầu trong lĩnh vực thiết kế sản phẩm. Chúng tôi đã nêu chi tiết một vài ý tưởng trừu tượng, nhưng chúng tôi rất thích nghe suy nghĩ của bạn trong khu vực thảo luận bên dưới!