復(fù)雜網(wǎng)站界面的布局設(shè)計(jì)

2021-06-08    分類: 網(wǎng)站建設(shè)

很多網(wǎng)站的信息量很大,又因?yàn)楦鞣N各樣的原因設(shè)計(jì)師不能對(duì)內(nèi)容進(jìn)行輕易刪減。如果不好好整理信息,會(huì)讓網(wǎng)站界面越來(lái)越凌亂。我從去年開(kāi)始做的很多項(xiàng)目都是這種情況,于是總結(jié)了一套簡(jiǎn)單好用,又有理有據(jù)的為復(fù)雜界面設(shè)計(jì)布局的方法。
為了方便大家理解,我使用Facebook首頁(yè)作為案例。
1. 把需要展示的信息都列出來(lái)
先不考慮信息之間的關(guān)系和順序,大致列出即可。主要信息一定要列出,優(yōu)先級(jí)較低的信息不用100%覆蓋也沒(méi)有關(guān)系。
以Facebook為例,首頁(yè)需要展示的信息有:
Logo、搜索、用戶信息、導(dǎo)航、Explore功能列表、發(fā)帖發(fā)圖、最新動(dòng)態(tài)、朋友推薦、語(yǔ)言選擇、網(wǎng)站聲明、聊天板、我創(chuàng)建的、設(shè)置、注銷…
2. 從產(chǎn)品策略的角度整理信息
與對(duì)這個(gè)產(chǎn)品比你更了解的人討論(如產(chǎn)品經(jīng)理),從產(chǎn)品策略的角度將這些信息進(jìn)行分組歸納(這時(shí)還不需要過(guò)多考慮用戶):
基礎(chǔ)功能:搜索、導(dǎo)航、設(shè)置、注銷
基礎(chǔ)信息:Logo、用戶信息
主要功能:發(fā)帖發(fā)圖
主要信息(不斷更新):最新動(dòng)態(tài)
重要功能:聊天板
重要信息:朋友推薦
輔助功能:我創(chuàng)建的、Explore功能列表
輔助信息:語(yǔ)言選擇、網(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è)置、注銷、語(yǔ)言選擇
我不關(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功能列表
輔助信息:朋友推薦(策略重要)、語(yǔ)言選擇、網(wǎng)站聲明
5. 用信息分類畫(huà)頁(yè)面布局
分析其它產(chǎn)品,發(fā)現(xiàn)主流的形式是把基礎(chǔ)功能和信息放在頂部,主要功能和信息放在中間,兩側(cè)放置輔助信息。為了方便理解,我挑選了一些大家比較熟悉的:
網(wǎng)站界面設(shè)計(jì)
簡(jiǎn)書(shū)
網(wǎng)站界面設(shè)計(jì)
Quora
網(wǎng)站界面設(shè)計(jì)
淘寶
網(wǎng)站界面設(shè)計(jì)
微博
網(wǎng)站界面設(shè)計(jì)
知乎

綜合分析后,設(shè)計(jì)出自己的布局:
網(wǎng)站界面設(shè)計(jì)
一個(gè)復(fù)雜頁(yè)面的布局設(shè)計(jì)就完成了。
(鄭重聲明:本文版權(quán)歸原作者Z Yuhan所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如有侵權(quán),請(qǐng)聯(lián)系我們刪除;如作者信息標(biāo)記有誤,請(qǐng)聯(lián)系我們修改。)

當(dāng)前標(biāo)題:復(fù)雜網(wǎng)站界面的布局設(shè)計(jì)
文章分享:http://www.muchs.cn/news27/116827.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開(kāi)發(fā)、小程序開(kāi)發(fā)虛擬主機(jī)、面包屑導(dǎo)航、建站公司外貿(mào)網(wǎng)站建設(shè)

廣告

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

h5響應(yīng)式網(wǎng)站建設(shè)