Ý tưởng thiết kế cho các trang web bán hàng (P.1)

Trong bài viết này tôi muốn nói đến một số xu hướng giao diện người dùng hiện đại cho thiết kế web bán hàng. Chúng ta đều biết về những thứ hiển nhiên như xe đẩy mua sắm, trang thanh toán, thanh tìm kiếm, và các tính năng bảo mật.

Mua sắm trực tuyến đã trở thành một phương pháp mua bán phổ biến cho người tiêu dùng ở mọi quốc gia. Cửa hàng có thể truy cập vào trang web từ bất cứ nơi nào có kết nối Internet, các sản phẩm đến trước cửa nhà của bạn, và thường có nhiều lựa chọn hơn. Bỏ qua các chủ đề như tiếp thị và ngân sách còn có một chủ đề lớn đáng thảo luận: đó là thiết kế website thực sự.

Trong bài viết này tôi muốn nói đến một số xu hướng giao diện người dùng hiện đại cho thiết kế web bán hàng. Chúng ta đều biết về những thứ hiển nhiên như xe đẩy mua sắm, trang thanh toán, thanh tìm kiếm, và các tính năng bảo mật.

Nhưng những gì khác có thể được thêm vào một thiết kế Average Joe để làm cho nó có một thiết kế Spectacular Joe? Thật không may Joe đã không có sẵn để thẩm vấn nhưng tôi có danh sách riêng về xu hướng đó và nó hoàn hảo cho bất cứ ai thiết kế hoặc tung ra một trang web thương mại điện tử mới.


Trang chủ cửa hàng chi tiết

Trang chủ của trang web nên cung cấp một ấn tượng tuyệt vời cho đầu tiên truy cập. Việc bố trí, màu sắc, và nội dung nên để lại một dấu ấn đáng nhớ bốc lửa trong tâm trí của mỗi khách truy cập.Có thể cho rằng  sẽ quan trọng hơn so với các thành phần trang tổng thể là nội dung trang. Khái niệm này nắm giữ công lao còn lớn hơn khi thảo luận về các cửa hàng thương mại điện tử.

Hãy suy nghĩ về nó từ góc độ của riêng của bạn: bạn ngồi xuống bàn làm việc của bạn, hoàn thành một số công việc và thấy mình lướt web cho một vài phút hoặc vài giờ, bạn sẽ biết nó phát triển như thế nào.

Dù sao bạn cũng sẽ gục ngã trên một trang web tuyệt vời nào đó và có vẻ như họ bán cái gì mát mẻ nhưng bạn không thể thống kê nó ra ngay lập tức ... Hoặc có lẽ bạn thấy một hình ảnh sản phẩm trên trang nhưng bạn vẫn không có ý tưởng gì về nó.

Thiết kế trang web với hình ảnh và tài liệu tham khảo để cung cấp cho du khách một ấn tượng thông tin đầu tiên là điều tất yếu. Các trang web cho Gridbooks là một ví dụ tuyệt vời. Tất cả mọi thứ mà một người mới cần biết là nằm trên màn hình đầu tiên trong một widget carousel trượt. Ngoài ra còn có nhiều hơn các thông tin dưới màn hình gấp để thỏa mãn những người bị lôi kéo vào các trang web.

gridbooks homepage design thiet ke web

Với cái tên như Gridbooks các trang web có thể được bán bất cứ số lượng nào các mặt hàng. Sách giáo khoa trung học? Một FreshBooks ripoff? Hoặc có lẽ tiểu thuyết viễn tưởng hình học?

Trên thực tế Gridbooks là một thương hiệu máy tính xách tay được thiết kế với các trang lưới định dạng cho phác thảo mockups wireframe của các trang web và các ứng dụng di động. Sai lầm tưởng đúng? Cũng không có duh, nhưng ngay cả với một ý tưởng ngọt ngào như cách trình bày trang web đóng một vai trò lớn.

Mày mò sử dụng một chiến lược nội dung giống nhau. Tới trang web của họ bao gồm một danh sách các sản phẩm đặc trưng trong một thanh trượt quay toàn màn hình lớn. Thanh trượt thậm chí có thể đóng gói thêm thông tin về từng sản phẩm. Nhưng cấu trúc thiết kế và hình ảnh có xu hướng cung cấp nhiều hơn một chút về phía những loại dịch vụ được cung cấp.

 products homepage thiet ke web


Danh sách các thể loại đa dạng

Dưới đây là một ý tưởng khá đơn giản, bạn có thể sử dụng như là một trong số những cái nổi bật trong một hodgepodge của các mặt hàng. Đó là một phương pháp duyệt web mà không phụ thuộc hoàn toàn vào trình đơn menu.

Về cơ bản bạn muốn chia mỗi mục vào các mục và tiểu thể loại sau đó được liệt kê trên một trang duy nhất. Nếu cửa hàng có một danh sách các sản phẩm, hãy giữ điều này trong tâm trí bạn trong giai đoạn thiết kế.Sẽ có rất nhiều những ý tưởng nảy ra trong quá trình thiết kế.

zazzle shop categories listing thiet ke web

Từ trang chủ Zazzle khách có thể cảm nhận được sự tò mò và đi lang thang vào các trang cửa hàng . Giao diện này là một ví dụ hoàn hảo của cấu trúc nội dung có tổ chức và làm thế nào bạn có thể liệt kê các hạng mục quan trọng. Nó giúp rất nhiều trong việc để có một bức ảnh nhỏ của mỗi loại lớn - hình ảnh cộng với nội dung tốt là hai yếu tố quyết định.

adobe knowhow videos products list thiet ke web

Các trang web của Adobe biết cách làm thế nào để sử dụng một giao diện rất giống phục vụ thay vì các sản phẩm khác nhau của họ. Mỗi khóa học được liệt kê với một biểu tượng phù hợp, giá cả, và các thông tin liên quan. Mặc dù giao diện chiếm một phần lớn của tất cả mọi thứ nhưng vẫn tạo ra sự cân bằng trên trang chủ.

Đây là một ví dụ cổ điển về thương mại điện tử, chúng như là một đại dương đa dạng các ý tưởng. Bạn sẽ cần phải thử nghiệm những ý tưởng khác nhau trên cơ sở từng trường hợp cụ thể để xem cái gì làm việc tốt nhất. Để xây dựng các hạng mục và sản phẩm, danh sách, bạn phải suy nghĩ về số sản phẩm sẽ được cung cấp trên trang web và tính toán giá trị tiềm năng của việc thêm một trang như vậy.


Mở rộng Navigation

Khi bạn thiết kế web mứt đóng gói với thông tin mà bạn sẽ cần phải sử dụng một số tinh tế với điều hướng. Khách thăm rõ ràng là muốn tìm bất cứ điều gì họ đang tìm kiếm một cách nhanh chóng chưa súc tích. Khi nói đến liên kết điều hướng tiêu đề lớn, tôi thấy rằng các menu thả xuống là xu hướng khá phổ biến.

caliroots ecommerce dropdown meganav thiet ke web

Như một ví dụ các trang chủ Caliroots có hướng sử dụng cả biểu tượng và nhãn văn bản. Di chuyển bất kỳ các link này sẽ làm động một trình đơn thả xuống với một tấn các nội dung. Nghiêm túc mà nói, các "thương hiệu" menu thả xuống thậm chí có liên kết / prev next để di chuyển giữa các cột.

Một nhược điểm mà tôi nên đề cập đến là thiếu sự hỗ trợ đáp ứng cho chuyển hướng của họ. Việc tạo ra một bố trí di động cụ thể hoặc làm lại menu để chứa ít liên kết hơn sẽ trở nên khó khăn trong thiết kế lại chuyển hướng bao la này để phù hợp với màn hình điện thoại thông minh nhỏ bé ... nhưng theo ý kiến ​​của tôi nó là rất đáng nỗ lực để làm như vậy.

skinny ties dropdown navigation menu thiet ke web

Việc chuyển hướng cho Skinny Ties cũng có một danh sách thả xuống cho mỗi liên kết chính. Nhưng trước sự ngạc nhiên sung sướng của tôi, bố trí của họ là hoàn toàn đáp ứng và vẫn quản lý tốt để hỗ trợ các trình đơn thả xuống bất kể ở độ phân giải của trình duyệt. Kỹ thuật khác nhau sẽ làm việc cho các trang web khác nhau vì vậy nó có thể giúp bạn xem những gì các nhà thiết kế khác đã tạo ra.

Tác giả bài viết: Giang Nguyễn

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây