Lý thuyết thiết kế đồ họa đằng sau trang đích


7

Ngày nay, hầu hết các trang đích đang sử dụng mô hình phổ biến như sau

  • Phần thanh điều hướng
  • Phần chiều rộng đầy đủ với hình ảnh cuộn
  • Ba phần nhỏ với hình ảnh đặc trưng
  • Chi tiết liên lạc

Có bất kỳ lý thuyết thiết kế đằng sau này? Làm thế nào để tổ chức một thiết kế tốt cho trang đích?


1
Trong thực tế, lược đồ không cần thiết cho "trang đích" những gì bạn đang mô tả có lẽ là bố cục một trang.
Rafael

Câu trả lời:


7

Đổ lỗi cho các khung lưới như 960.gs và Bootstrap. Họ đã làm cho nó rất dễ dàng để xây dựng bố cục chính xác này:

http://getbootstrap.com/examples/carousel/

nhập mô tả hình ảnh ở đây

Các khung này đã giải quyết rất nhiều vấn đề về bố cục CSS và giúp các nhà phát triển / thiết kế web dễ dàng tạo ra trang web dựa trên lưới có cấu trúc, thoải mái, quen thuộc và dễ sử dụng.

Các trang web chủ đề sau đó bắt đầu bán các biến thể của các phiên bản được tạo sẵn của loại bố cục này và làm cho nó không gây đau đớn cho ngay cả Joe hoặc Jane trung bình sử dụng. Mẫu thiết kế chung này đã trở thành quan điểm thực tế mà hầu hết mọi người liên kết với "một trang web" ngày nay.

Tweet của người dùng Twitter @jongold tổng hợp điều này khá ngắn gọn :

nhập mô tả hình ảnh ở đây


4

Tôi nghĩ rằng bài viết này từ NNG rất hữu ích trong trường hợp cụ thể này, đặc biệt là đối với bố cục "một trang":

https://www.nngroup.com/articles/page- Fold-manifesto /

Nói tóm lại, bạn cần cung cấp cho người đọc / người dùng lý do để cuộn trang của bạn bằng cách sử dụng văn bản / nội dung "nối họ vào". Bằng cách định vị các yếu tố phát triển sở thích, ví dụ hình ảnh cho các phần mới xuất hiện ngay phía trên nếp gấp, bạn tạo ra một mong muốn trong tâm trí của người dùng. Không có gì khác nhau khi bán hàng và bạn cần cung cấp cho mọi người lý do để đầu tư thời gian của họ vào trang web của bạn, thay vì cho rằng họ sẽ cuộn hoặc đọc nó thông qua bản năng.

Các ví dụ bạn đang thấy trong các câu trả lời được cung cấp không có lý thuyết thực sự đằng sau chúng và chỉ là các mẫu, và là một nhà thiết kế, bạn nên luôn luôn hướng đến sự độc đáo.

Nội dung của bạn sẽ ra lệnh cho dòng chảy của trang. Đọc và hiểu nội dung của bạn sau đó vị trí lý tưởng sẽ đến với bạn. Đối với tôi, không có giải pháp "một kích thước phù hợp với tất cả" để thiết kế trang web. Có những yếu tố hoặc bố cục bạn có thể kết hợp nhưng chúng chỉ có thể được xác định thông qua nghiên cứu mở rộng và hiểu nội dung bạn hiện có.


1

Đó là một câu hỏi hay nhưng thiếu điểm. Đây không phải là lý thuyết thiết kế cho trang chủ 'tốt', mà là về giai đoạn tiếp cận thiết kế - một giải pháp sáng tạo hợp lý phục vụ tốt nhất cho mục tiêu / đối tượng khách hàng cho dù đó là trang web, brochure, ứng dụng màn hình cảm ứng, v.v. Bạn nên bắt đầu tại cùng một vị trí cho các yếu tố cốt lõi của dự án của bạn (Tôi đã phát triển quy trình của mình trong nhiều năm). Điều này sẽ bao gồm nền tảng khách hàng / thương hiệu / màu sắc / phông chữ / hình ảnh và quan trọng nhất là những gì họ đang cố gắng đạt được trong ngắn hạn / trung bình / dài hạn.

Đây là chìa khóa - ví dụ: Tôi đã phải xây dựng một hội nghị quốc tế một lần, chưa bao giờ thực hiện nó trước đây, giành được vị trí của chương trình. Tại sao? Bởi vì tôi đã không bắt đầu với gỗ, kính, thảm, đồ họa khổ lớn, màn hình plasma như những cái khác (ví dụ mẫu bootstrap trang chủ của bạn). Khách hàng muốn phá vỡ thị trường với một sản phẩm mới. Họ có đội ngũ nhân viên bán hàng tuyệt vời nên bản tóm tắt đã khiến mọi người có mặt trong suốt sự kiện để chúng tôi có thể nói chuyện với họ - đó là điều đó. Tôi đã thiết kế gian hàng xung quanh một quán cà phê mạng với chỗ ngồi mềm mại, cà phê và trà đắt tiền (miễn phí), điểm truy cập web và email (miễn phí) và màn hình xem định dạng lớn cho các bản demo (có âm thanh và ánh sáng). Tôi cũng đặt một tòa tháp ở giữa đã dừng 6 "trần nhà với các biển báo đối diện với NSEW, bạn có thể thấy điều này từ bất cứ nơi nào trong hội trường. Đứng đã bị đâm trong 3 ngày.

Quay lại trang web của bạn. Tôi bắt đầu với những gì khách hàng đang cố gắng đạt được thông qua ứng dụng của trang web và cách nó phù hợp với kế hoạch tiếp thị ngoại tuyến / ngoại tuyến rộng hơn của họ. Rõ ràng các khách hàng khác nhau sẽ có các mục tiêu khác nhau mặc dù có các yếu tố phổ biến như dịch vụ / liên hệ. Điều này là, những thứ này không tự bán nên bạn không nên bắt đầu với chúng. Thể hiện lợi thế & lợi ích sẽ thu hút người dùng để tìm hiểu khách hàng của bạn và những gì họ đang cố gắng thực hiện với doanh nghiệp. Ví dụ, ổ đĩa tổng thể có thể là để hỗ trợ phát triển nội dung và phương tiện xã hội HOẶC chuyển đổi kỹ thuật số đầy đủ với các dịch vụ và biểu mẫu điện tử HOẶC nó có thể chủ yếu là thông tin / dữ liệu theo chính quyền địa phương.

Một câu hỏi khác: di động là trọng tâm chính? Điều này có vẻ không ổn khi 80% lưu lượng truy cập theo cách đó mặc dù về mặt thương mại, màn hình rộng vẫn còn sống và MIGHT BE là đối tượng chính của khách hàng của bạn - ví dụ như trong HNW Finance chưa được chấp nhận do lo ngại về bảo mật. Trong mọi trường hợp, bạn cần biết FIRST này trước khi quyết định UX, gói trang web, kênh / đường ống, điều hướng và các ưu tiên của trang chủ .

Một vài ví dụ ngắn gọn - Tài chính (Thương mại ngoài khơi) và Cơ quan địa phương (Dịch vụ nước).

Yêu cầu quan trọng của công ty tài chính: (1) thúc đẩy nhân viên / kinh nghiệm (2) lợi ích ra nước ngoài (3) làm rõ những gì họ làm và lĩnh vực thị trường của họ (4) Quản trị (nền tảng, quy định, suy nghĩ tích cực / chuyển tiếp, mức độ / năng khiếu) (5) sự hiện diện di động mới (ứng dụng sắp tới) Trang chủ của tôi hướng dẫn bên dưới hiển thị bên dưới. Menu cực kỳ đơn giản và dẫn đến nhóm & liên hệ (hamburger cho phần còn lại của trang web), logo rõ ràng và anh hùng đủ điều kiện họ là ai và ngoài khơi (không có băng chuyền), đoạn giới thiệu ngắn gọn tóm tắt lời đề nghị với (tối đa 2 ký tự) về văn bản / về văn bản theo bên phải Bốn bảng CTA (kêu gọi hành động) cung cấp các kênh trực tiếp đến thông tin chính để hỗ trợ Quản trị. Mở Sans cho cơ thể màu đen 85% - thân thiện với thiết bị di động. LÀM XONG.

Tài chính nước ngoài

Yêu cầu chính quyền địa phương: (cung cấp dịch vụ và thông tin cho dịch vụ / thoát nước). Mặc dù tổ chức này rất mạnh về môi trường và tiếp thị, bao gồm các bài đăng xã hội hàng ngày, ưu tiên thực sự trong (1) là chuyển đổi sang các dịch vụ kỹ thuật số và đường dây trợ giúp khẩn cấp (2) (3) chuyển sang di động làm kênh thông tin chính (4) 24/7 thông báo trực tiếp về các công việc hiện tại và các vấn đề bao gồm từ các kỹ sư trên mặt đất. Ba kênh chính xác định từ phân tích và nghiên cứu khách hàng là (a) dịch vụ nước (b) tư vấn / hỗ trợ thoát nước (c) giúp khách hàng tự giúp mình bao gồm các tờ thông tin, Câu hỏi thường gặp, trung tâm truyền thông để cắt giảm các cuộc gọi điện thoại)

Giải pháp dưới đây theo hướng dẫn này. Không có anh hùng như vậy, không có băng chuyền - không gian được sử dụng để giới thiệu và liên kết dịch vụ điện tử. 3 kênh cốt lõi + tìm kiếm trang web với các biểu tượng thân thiện với thiết bị di động nằm trên menu phụ dưới thanh điều hướng chính (màu trắng) để giữ cho phần chính này rất rõ ràng chỉ có liên kết khẩn cấp và hamburger trang web. Pink giới thiệu với tư cách là đối tượng mục tiêu 75% là nữ (người trả hóa đơn) và làm việc tốt với màu xanh lam và nước (nước). Biểu tượng bespoke, đơn giản rõ ràng. Thông báo chính (được điều khiển bởi Twitter) theo dõi điều này trên màn hình chính. Độ tương phản màu sắc / mức độ dễ đọc đối với quy định về khả năng tiếp cận (quy định nghiêm ngặt của bộ Gov). CMS điều khiển bao gồm cả đáp ứng di động.

nhập mô tả hình ảnh ở đây

Cuối cùng, không được dẫn dắt bởi các xu hướng trên các trang web mẫu và bootstrap. Hiện tại có một xu hướng (mùa thu 2016) đi kèm với văn bản màu trắng trên phông nền nhạt, phông chữ tiêu đề mỏng (như Helvetica Ultra Light) và <60% màu đen cho văn bản cơ thể tức là màu xám. Chúng đến từ thiết kế in mặc dù chúng tạo ra nhiều vấn đề về khả năng truy cập (ví dụ: khiếm thị và đại diện trên màn hình di động). Hãy nhớ đào tạo thiết kế, hình thức và chức năng của bạn, đó là sự cân bằng đặc biệt quan trọng về mặt thương mại trên màn hình. Bạn là một nhà thiết kế, không phải là một lemming. Dẫn dắt thông qua logic, đừng theo dõi người khác một cách mù quáng.

Tôi đã dành thời gian để viết bài này vì về cơ bản tôi tin vào cách tiếp cận và tôi muốn giúp bạn và những người khác. Đừng gồng mình lên phong cách thiết kế hay sáng tạo của tôi, bạn sẽ có phong cách riêng của mình - hãy nghĩ về cách tiếp cận giải pháp. Nó đã làm việc cho tôi gần 20 năm trong thiết kế dịch vụ đầy đủ và tôi đã xây dựng trang web thành công từ năm 1997 trên MacII khi chúng tôi chỉ có 40K một trang và 256 màu để chơi :).

Chúc may mắn trên hành trình của bạn


1

Một trang đích là tất cả về sân thang máy. Và hầu hết các trang web nói chung không có gì nhiều hơn các trang đích. Mỗi trang được thiết kế cẩn thận để đưa mọi người tới mua hàng.

Đối với nhiều người điều này có nghĩa là - tiêu đề, thang máy, nút để mua. Và trên lý thuyết cho rất nhiều công ty điều này hoạt động. Nói một cách đơn giản, điều này được gọi là Trên The Fold. Nhưng điều này không hoàn toàn đúng.

"Trên màn hình đầu tiên" xuất phát từ thuật ngữ của tờ báo nơi có nghĩa đen là một tờ báo. Quảng cáo trên nếp nhăn tốt hơn những quảng cáo dưới đây. Đây thực sự không phải là trường hợp trong thiết kế web - nghiên cứu sau khi nghiên cứu sẽ chứng minh điều đó là do họ không thực hiện đúng nghiên cứu. Xem bài viết này trên Kissmetrics - Why the Fold là một huyền thoại để nghiên cứu tốt hơn.

Nhìn vào nó một cách chính xác, bạn sẽ thấy ít hơn về "Mọi người thấy gì khi tải trang của tôi" so với sau:

  • Tôi đã trình bày những lợi ích của sản phẩm của tôi?
  • Lời kêu gọi hành động (CTA) có dễ tìm và diễn đạt tốt không?

Khi các nhà tiếp thị hiểu rõ hơn về điều này, họ muốn các thiết kế đáp ứng các tiêu chí này. Các mẫu THEN như Grid và Bootstrap xuất hiện. Đừng nhầm lẫn - không quan trọng mẫu của nó đẹp đến mức nào, nếu nó không chuyển đổi thành doanh số thì sẽ không có ai sử dụng nó .


Nhập các mẫu đó và những mẫu khác. Đó là một cách nhanh chóng và dễ dàng cho các nhà thiết kế hoặc thậm chí không phải là nhà thiết kế để có được một trang tốt và chạy. Một nhà tiếp thị giỏi sẽ sử dụng nó làm cơ sở nhưng hoặc hack nó để phù hợp với nhu cầu chính xác của họ, hoặc thuê ai đó hack nó để phù hợp với nhu cầu chính xác của họ (câu chuyện về cuộc đời tôi!).

Sau đó, một nhà tiếp thị thực sự giỏi sẽ thực hiện Thử nghiệm A / B với những thay đổi nhỏ trong thiết kế hoặc bản sao. Tinh chỉnh cẩn thận để cải thiện tỷ lệ chuyển đổi. Hầu hết các doanh nghiệp không có tài nguyên để làm điều này. Nhưng hãy đoán xem, bằng cách nghiên cứu các trang web lớn hơn và tạo các mẫu bạn đã sẵn sàng trên con đường của mình.

Tóm lược

Có lý thuyết thiết kế đằng sau nó? Một chút nhưng lý thuyết thiết kế đặc biệt là trên một trang đích đến từ nghiên cứu thị trường và lý thuyết nhiều hơn lý thuyết thiết kế. Cuối cùng trang đích là công cụ chuyển đổi. Cho dù bạn sử dụng các kỹ thuật đã được chứng minh mà bây giờ bạn đã từng thấy hoặc một cái gì đó hoàn toàn khác biệt - cuối cùng nó sẽ sống và chết bởi cách nó chuyển đổi tốt như thế nào.

Câu hỏi liên quan

Các giao diện có thực sự cần phải "nhìn tốt" không?


0

Kiểu bố cục mà bạn đang mô tả có thể được thử và kiểm tra, nhưng tôi thấy rằng nó đã mất tác động mà nó đã từng quay lại vào năm 2012 hoặc 2013. Giống như một cách nói khác ở trên, các khung như Bootstrap đã góp phần nhìn thấy mô hình này ở mọi nơi, trong các chủ đề và các mẫu cũng vậy, nhiều trong số đó sử dụng Bootstrap.

Theo kinh nghiệm của tôi, đó là một bố cục rất dễ dàng thu nhỏ lại một cách duyên dáng. Không phải ngẫu nhiên, vào năm 2012, điện thoại thông minh đã trở nên rẻ hơn, trở nên có sẵn cho tất cả mọi người, cũng như nhiều máy tính bảng hơn.

Thật không may, tôi đã gặp nhiều khó khăn hơn khi đưa vị trí cơ bản của các yếu tố này và tinh chỉnh nó thành một thứ gì đó trực quan thú vị, và đã bắt đầu xem xét lại các ý tưởng bố trí mà tôi có trước xu hướng này và tinh chỉnh chúng.


Bạn có bằng chứng nào cho thấy nó "đã mất tác động mà nó từng có"?
Zach Saucier

Trải nghiệm của riêng tôi với khách hàng và người dùng, những người ngày càng yêu cầu "một cái gì đó khác biệt" khi bố trí toàn bộ chiều rộng 1-3-3 hoặc 1-2-2 với tiêu đề toàn chiều rộng được sử dụng. Bên cạnh đó, kinh nghiệm của riêng tôi từ phía người dùng.
Pixelpizer 6/12/2016
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.