雨涵Zoe：很多產(chǎn)品的信息量很大，又因?yàn)楦鞣N各樣的原因設(shè)計(jì)師不能對(duì)內(nèi)容進(jìn)行輕易刪減。如果不好好整理信息，會(huì)讓界面越來越凌亂。我從去年開始做的很多項(xiàng)目都是這種情況，于是總結(jié)了一套簡(jiǎn)單好用，又有理有據(jù)的為復(fù)雜界面設(shè)計(jì)布局的方法。

為了方便大家理解，我使用Facebook首頁作為案例。

1. 把需要展示的信息都列出來

先不考慮信息之間的關(guān)系和順序，大致列出即可。主要信息一定要列出，優(yōu)先級(jí)較低的信息不用100%覆蓋也沒有關(guān)系。

以Facebook為例，首頁需要展示的信息有：

Logo、搜索、用戶信息、導(dǎo)航、Explore功能列表、發(fā)帖發(fā)圖、最新動(dòng)態(tài)、朋友推薦、語言選擇、網(wǎng)站聲明、聊天板、我創(chuàng)建的、設(shè)置、注銷…

2. 從產(chǎn)品策略的角度整理信息

與對(duì)這個(gè)產(chǎn)品比你更了解的人討論（如產(chǎn)品經(jīng)理），從產(chǎn)品策略的角度將這些信息進(jìn)行分組歸納（這時(shí)還不需要過多考慮用戶）：

• 基礎(chǔ)功能：搜索、導(dǎo)航、設(shè)置、注銷
• 基礎(chǔ)信息：Logo、用戶信息
• 主要功能：發(fā)帖發(fā)圖
• 主要信息（不斷更新）：最新動(dòng)態(tài)
• 重要功能：聊天板
• 重要信息：朋友推薦
• 輔助功能：我創(chuàng)建的、Explore功能列表
• 輔助信息：語言選擇、網(wǎng)站聲明

3. 從用戶的角度整理信息

與用戶（或潛在用戶）交流，觀察他們對(duì)這些信息的真實(shí)想法。因?yàn)樵劫N近真實(shí)心理越好，所以可以用一些口頭話、感性的表達(dá)方式：

• 可能是我使用這個(gè)東西的唯一目的：最新動(dòng)態(tài)
• 我常用的東西，越方便越好：發(fā)帖發(fā)圖
• 必須有，但我通常不會(huì)仔細(xì)去看：Logo、搜索、用戶信息
• 如果有動(dòng)態(tài)我就感興趣：聊天板、我創(chuàng)建的
• 我想要時(shí)才回去找：設(shè)置、注銷、語言選擇
• 我不關(guān)心，偶爾可能看一眼：朋友推薦、Explore功能表
• 這東西需要嗎：網(wǎng)站聲明

4. 根據(jù)用戶心理調(diào)整按照產(chǎn)品策略整理的信息

產(chǎn)品策略中的重要功能“聊天板”根據(jù)用戶反饋，除非有動(dòng)態(tài)否則不會(huì)關(guān)心。所以放到輔助功能里。

產(chǎn)品策略中的重要信息“朋友推薦”根據(jù)用戶反饋，并不會(huì)主動(dòng)去看，所以放到輔助信息里。

再將其余的信息結(jié)合用戶關(guān)心的優(yōu)先級(jí)前后排列。

調(diào)整后，信息的分類變成了這樣：

• 基礎(chǔ)功能：導(dǎo)航、搜索、設(shè)置、注銷
• 基礎(chǔ)信息：Logo、用戶信息
• 主要功能：發(fā)帖發(fā)圖
• 主要信息（不斷更新）：最新動(dòng)態(tài)
• 輔助功能：聊天板（策略重要）、我創(chuàng)建的、Explore功能列表
• 輔助信息：朋友推薦（策略重要）、語言選擇、網(wǎng)站聲明

5. 用信息分類畫頁面布局

分析其它產(chǎn)品，發(fā)現(xiàn)主流的形式是把基礎(chǔ)功能和信息放在頂部，主要功能和信息放在中間，兩側(cè)放置輔助信息。為了方便理解，我挑選了一些大家比較熟悉的：

△ 簡(jiǎn)書

△ Quora

△ 淘寶

△ 微博

△ 知乎

綜合分析后，設(shè)計(jì)出自己的布局：

一個(gè)復(fù)雜頁面的布局設(shè)計(jì)就完成了。

「用一個(gè)案例教你學(xué)東西系列」

1. 智能對(duì)象丨《用一個(gè)實(shí)戰(zhàn)教程，讓你學(xué)會(huì)智能對(duì)象》
2. 直方圖丨《用一個(gè)后期教程，幫你學(xué)會(huì)利用直方圖破解圖像的方法》
3. 圖層樣式丨《做一個(gè)實(shí)戰(zhàn)教程，讓你學(xué)會(huì)圖層樣式9大技能》
4. 設(shè)計(jì)流程丨《用一個(gè)實(shí)戰(zhàn)案例，幫你認(rèn)識(shí)完整的設(shè)計(jì)流程》
5. 總監(jiān)思考方式丨《用一個(gè)簡(jiǎn)單的體重記錄功能，揭秘UI設(shè)計(jì)總監(jiān)的思考過程》
6. 交互思考方式《用一個(gè)文本框，讓你學(xué)到交互設(shè)計(jì)師的邏輯思考方法》
7. 交互面試題丨《用一個(gè)框架，幫你學(xué)會(huì)這個(gè)最常見的交互面試題》
8. 數(shù)據(jù)驗(yàn)證交互丨《用一個(gè)實(shí)戰(zhàn)案例，幫你學(xué)會(huì)用數(shù)據(jù)驗(yàn)證產(chǎn)品設(shè)計(jì)》

原文地址：jianshu

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com