很多網(wǎng)站的信息量很大，又因為各種各樣的原因設計師不能對內容進行輕易刪減。如果不好好整理信息，會讓網(wǎng)站界面越來越凌亂。我從去年開始做的很多項目都是這種情況，于是總結了一套簡單好用，又有理有據(jù)的為復雜界面設計布局的方法。
為了方便大家理解，我使用Facebook首頁作為案例。
1. 把需要展示的信息都列出來
先不考慮信息之間的關系和順序，大致列出即可。主要信息一定要列出，優(yōu)先級較低的信息不用100%覆蓋也沒有關系。
以Facebook為例，首頁需要展示的信息有：
Logo、搜索、用戶信息、導航、Explore功能列表、發(fā)帖發(fā)圖、最新動態(tài)、朋友推薦、語言選擇、網(wǎng)站聲明、聊天板、我創(chuàng)建的、設置、注銷…
2. 從產品策略的角度整理信息
與對這個產品比你更了解的人討論（如產品經(jīng)理），從產品策略的角度將這些信息進行分組歸納（這時還不需要過多考慮用戶）：
基礎功能：搜索、導航、設置、注銷
基礎信息：Logo、用戶信息
主要功能：發(fā)帖發(fā)圖
主要信息（不斷更新）：最新動態(tài)
重要功能：聊天板
重要信息：朋友推薦
輔助功能：我創(chuàng)建的、Explore功能列表
輔助信息：語言選擇、網(wǎng)站聲明
3. 從用戶的角度整理信息
與用戶（或潛在用戶）交流，觀察他們對這些信息的真實想法。因為越貼近真實心理越好，所以可以用一些口頭話、感性的表達方式：
可能是我使用這個東西的唯一目的：最新動態(tài)
我常用的東西，越方便越好：發(fā)帖發(fā)圖
必須有，但我通常不會仔細去看：Logo、搜索、用戶信息
如果有動態(tài)我就感興趣：聊天板、我創(chuàng)建的
我想要時才回去找：設置、注銷、語言選擇
我不關心，偶爾可能看一眼：朋友推薦、Explore功能表
這東西需要嗎：網(wǎng)站聲明
4. 根據(jù)用戶心理調整按照產品策略整理的信息
產品策略中的重要功能“聊天板”根據(jù)用戶反饋，除非有動態(tài)否則不會關心。所以放到輔助功能里。
產品策略中的重要信息“朋友推薦”根據(jù)用戶反饋，并不會主動去看，所以放到輔助信息里。
再將其余的信息結合用戶關心的優(yōu)先級前后排列。
調整后，信息的分類變成了這樣：
基礎功能：導航、搜索、設置、注銷
基礎信息：Logo、用戶信息
主要功能：發(fā)帖發(fā)圖
主要信息（不斷更新）：最新動態(tài)
輔助功能：聊天板（策略重要）、我創(chuàng)建的、Explore功能列表
輔助信息：朋友推薦（策略重要）、語言選擇、網(wǎng)站聲明
5. 用信息分類畫頁面布局
分析其它產品，發(fā)現(xiàn)主流的形式是把基礎功能和信息放在頂部，主要功能和信息放在中間，兩側放置輔助信息。為了方便理解，我挑選了一些大家比較熟悉的：

簡書

Quora

淘寶

微博

知乎

綜合分析后，設計出自己的布局：
一個復雜頁面的布局設計就完成了。

網(wǎng)頁標題：復雜網(wǎng)站界面的布局設計
URL地址：http://www.rwnh.cn/news/116827.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿網(wǎng)站建設、企業(yè)建站、響應式網(wǎng)站、品牌網(wǎng)站建設、營銷型網(wǎng)站建設、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)