Thiết kế web: Làm thế nào để trình bày nội dung trên trang web - núm vú

Khi xây dựng wireframes của bạn, hãy nhớ rằng bạn không giới hạn ở một bản trình bày tĩnh của văn bản và đồ hoạ. Nhiều công nghệ, từ hoạt hình Flash sang DHTML, giúp bạn tối đa hóa không gian trang và trình bày nội dung theo những cách thú vị và tương tác hơn.

Chỉ dẫn văn bản trên khung dây

Bởi vì bạn đang chia sẻ wireframes với khách hàng và các thành viên trong nhóm, chỉ ra tất cả các yếu tố điều hướng và tiêu đề cho phần nội dung chính với phần văn bản có thể đọc được để định hướng chúng. Tất cả các thành phần sao chép khác có thể được chỉ ra với cái gọi là văn bản Tiếng Hy Lạp (mà thực sự là tiếng Latin không rõ ràng) phản ánh số ký tự được phân bổ của chúng (số chữ cái, dấu phân cách và dấu cách) để bạn có cảm giác thực tế khối văn bản khối.

Bạn có thể tìm kiếm web cho máy phát điện lorem ipsum để tìm các trang web tạo các đoạn văn bản tiếng Hy Lạp - và thậm chí cả các ký tự cụ thể - mà bạn có thể sao chép và dán vào mạng dây của bạn.

Làm việc với hệ thống quản lý nội dung

Hệ thống quản lý nội dung là một trang web thân thiện với người sử dụng hoặc ứng dụng cung cấp cho các quản trị viên trang web an toàn truy cập vào cơ sở dữ liệu lưu trữ trang web của họ. Bằng cách đăng nhập vào CMS, người quản lý của trang web có thể dễ dàng thêm, xóa và cập nhật nội dung được lưu trữ trong cơ sở dữ liệu. Lợi ích của việc sử dụng CMS để lưu trữ văn bản và đồ hoạ là khi bạn xác định một loạt các loại nội dung như "mô tả ngắn", "tên sản phẩm" và "hình thu nhỏ sản phẩm", bạn tạo trường hợp của các đối tượng này, điền vào chúng bản sao hoặc hình ảnh thực tế, sau đó gán chúng cho một hoặc nhiều trang web. Bằng cách đó, nếu bạn cập nhật các cá thể trong CMS, nội dung sẽ tự động cập nhật bất cứ nơi nào nó được sử dụng trên trang web. Chiến lược này tách nội dung từ trình bày trang web để giúp bạn linh hoạt hơn trong việc thay đổi nội dung thiết kế và nội dung, làm cho trang web dễ dàng hơn để duy trì.

Nếu trang web của bạn sử dụng một hệ thống quản lý nội dung, Nhà chiến lược Nội dung sẽ làm việc chặt chẽ với Kiến trúc sư Thông tin (đối với các nhóm nhỏ hơn, đây có thể là một và cùng một người) để xác định tất cả các loại nội dung trang web có và sau đó xác định loại nội dung nào sẽ xuất hiện trên mỗi trang.

Tối đa hóa không gian của bạn trên web

Hầu hết mọi người đều có màn hình máy tính nhỏ và nhiều người đang duyệt các trang web thông qua điện thoại thông minh và các thiết bị. Nếu bạn giữ một tờ 8-1/2 x 11-inch theo chiều ngang, bạn sẽ nhìn vào kích thước cửa sổ của hầu hết mọi người trên World Wide Web.Sau khi bạn xem xét giao diện trình duyệt với tất cả các nút trên cùng, các tab yêu thích và các điều khiển cuộn, không gian xem dành cho web được rút xuống kích thước bưu thiếp, hoặc khoảng 800 x 600 cho nhiều người dùng. Cửa sổ scrawny này là vải thiết kế web của bạn.

Dưới đây là một số chiến lược tổ chức và tương tác để giúp bạn trình bày nội dung của mình tốt hơn trên không gian nhỏ này:

Cuộn để xem nội dung ít quan trọng hơn.

• Bạn không thể đẩy tất cả mọi thứ vào khu vực có thể xem được - 800 x 600 pixel đầu tiên của cửa sổ trình duyệt. Vì vậy, đặt các mục có mức độ ưu tiên cao trong cửa sổ ban đầu đó và các mục ưu tiên thấp hơn trong màn hình đầu tiên. Cung cấp các gợi ý thị giác để cho người dùng biết nhiều thứ hơn trong màn hình đầu tiên bằng cách hiển thị có chủ đích hoặc các đỉnh của hình ảnh dẫn đến nhiều nội dung hơn bên dưới. Người dùng không quan tâm di chuyển, miễn là trang không chạy mãi mãi. Quy tắc tốt là nhắm mục tiêu tổng chiều cao của trang gấp đôi chiều cao có thể xem ban đầu (vì vậy 1200 pixel đối với trang có độ rộng 800 đến 600 trang).

  Sử dụng không gian ngang cũng vậy.

• Bạn có thể sử dụng các công nghệ như Flash hoặc HTML 5 để hiển thị nội dung cuộn theo chiều ngang hoặc một "băng chuyền" xoay vòng nội dung. Tín dụng: © Bohemia Design Ltd.

  

  Lồng các nội dung của bạn.

• Một cách khác để tối đa hóa không gian xem là hiển thị các lớp nội dung trên đầu trang khi người dùng cuộn qua hoặc nhấp vào một cái gì đó. Bạn có thể ẩn và hiển thị các lớp nội dung thông qua các công nghệ như JavaScript, DHTML (Dynamic HTML) và Flash. Tín dụng: © Rollover người dùng DisneyA mở rộng module nội dung này trên một trang web của Disney để tiết lộ thêm thông tin.

  

  Tín dụng: © Television Food NetworkDHTML có thể tạo ra trình đơn thả xuống "nâng cao" cung cấp các tùy chọn được tổ chức khi người dùng cuộn qua một mục điều hướng.

  

  Thiết kế cửa xoay của nội dung.

• Bởi vì không gian trang web ở mức cao, một kích thước khác mà bạn cần phải xem xét là thời gian. Nếu bạn không thể phù hợp với mọi thứ bạn muốn trong khu vực có thể xem được, bạn có thể muốn suy nghĩ về hoạt hình khu vực. Chú thích wireframes của bạn

Đôi khi các trang web chứa các thành phần tương tác cao cần được giải thích trong wireframes thông qua các chú thích.

Chú thích chỉ đơn giản là các ghi chú bên lề mô tả các yếu tố trên trang hoạt động như thế nào, điều gì gây nên tương tác và nội dung hiển thị trong các tình huống khác nhau. Bằng cách đánh số các khu vực của wireframe và đánh số ghi chú của bạn, bạn có thể mô tả hiệu quả chi tiết tương tác. Thông thường, bạn cũng cần phải bao gồm sơ đồ trang trí cho biết trạng thái khác xuất hiện khi hành động của người dùng như rollover hoặc nhấp chuột. Chú giải dạng khung dây chú thích kèm theo chú thích được đánh số này cũng có phần nhập cho biết các trạng thái nội dung khác nhau khi người dùng tương tác với nó.