成人亚洲综合,日韩高清一区二区三区五区七区,三级网址日本,亚洲激情成人,av成人在线电影,亚洲免费成人在线,超清首页国产亚洲丝袜

復(fù)雜界面的布局設(shè)計(jì)

作者:雨涵_Zoe
2017-04-12
4272

很多產(chǎn)品的信息量很大,又因?yàn)楦鞣N各樣的原因設(shè)計(jì)師不能對內(nèi)容進(jìn)行輕易刪減。如果不好好整理信息,會讓界面越來越凌亂。我從去年開始做的很多項(xiàng)目都是這種情況,于是總結(jié)了一套簡單好用,又有理有據(jù)的為復(fù)雜界面設(shè)計(jì)布局的方法。為了方便大家理解,我使用Facebook首頁作為案例。1. 把需要展示的信息都列出來先不考慮信息之間的關(guān)系和順序,大致列出即可。主要信息一定要列出,優(yōu)先級較低的信息不用100%覆蓋也沒有關(guān)系。以Facebook為例,首頁需要展示的信息有:Logo、搜索、用戶信息、導(dǎo)航、Explore功能列表、發(fā)帖發(fā)圖、最新

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

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

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

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

以Facebook為例,首頁需要展示的信息有:

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

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

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

基礎(chǔ)功能:搜索、導(dǎo)航、設(shè)置、注銷

基礎(chǔ)信息:Logo、用戶信息

主要功能:發(fā)帖發(fā)圖

主要信息(不斷更新):最新動態(tài)

重要功能:聊天板

重要信息:朋友推薦

輔助功能:我創(chuàng)建的、Explore功能列表

輔助信息:語言選擇、網(wǎng)站聲明

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

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

可能是我使用這個東西的唯一目的:最新動態(tài)

我常用的東西,越方便越好:發(fā)帖發(fā)圖

必須有,但我通常不會仔細(xì)去看:Logo、搜索、用戶信息

如果有動態(tài)我就感興趣:聊天板、我創(chuàng)建的

我想要時(shí)才回去找:設(shè)置、注銷、語言選擇

我不關(guān)心,偶爾可能看一眼:朋友推薦、Explore功能表

這東西需要嗎:網(wǎng)站聲明

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

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

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

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

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

基礎(chǔ)功能:導(dǎo)航、搜索、設(shè)置、注銷

基礎(chǔ)信息:Logo、用戶信息

主要功能:發(fā)帖發(fā)圖

主要信息(不斷更新):最新動態(tài)

輔助功能:聊天板(策略重要)、我創(chuàng)建的、Explore功能列表

輔助信息:朋友推薦(策略重要)、語言選擇、網(wǎng)站聲明

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

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

簡書布局設(shè)計(jì).png

簡書

Quora布局設(shè)計(jì).png

Quora

淘寶布局設(shè)計(jì).png

淘寶

微博布局設(shè)計(jì).png

微博

知乎布局設(shè)計(jì).png

知乎

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

自己的布局設(shè)計(jì).png

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


0
0
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學(xué)科技園東區(qū)9號樓2層

版權(quán)信息

  移動 Android 版 豫 ICP 備16038122號-2 豫公網(wǎng)安備 41019702002261號