三季度，焦點(diǎn)房產(chǎn)首頁(yè)進(jìn)行了一次大的改版，這次我負(fù)責(zé)了頁(yè)面視覺(jué)設(shè)計(jì)。

這次改版的方向和目的是：”以用戶為中心，幫大家找好房”，提高用戶通過(guò)首頁(yè)進(jìn)入樓盤詳情頁(yè)的到達(dá)率。

改版項(xiàng)目啟動(dòng)后先和產(chǎn)品同學(xué)做了溝通，針對(duì)改版需求做了分析，對(duì)于布局也參與了討論。

討論結(jié)果，上一版在首屏更多突出的資訊，占了首屏的主要位置，這樣用戶進(jìn)入首頁(yè)后不便于找到搜索，另外樓盤的信息也相對(duì)靠下，用戶需要翻過(guò)首屏才能看到。針對(duì)主要問(wèn)題，產(chǎn)品在出UE時(shí)，做了多種嘗試，同期我考慮風(fēng)格，并按不同的UE做嘗試。

在風(fēng)格上，明確了需要保持繼承性，要保留焦點(diǎn)的立體風(fēng)格元素，同時(shí)根據(jù)頁(yè)面設(shè)計(jì)發(fā)展趨勢(shì)，去掉過(guò)多的裝飾，采用簡(jiǎn)潔的風(fēng)格進(jìn)行設(shè)計(jì)。期間對(duì)近期主流網(wǎng)站都做了分析和研究，同時(shí)也重點(diǎn)關(guān)注了對(duì)手首頁(yè)，比較優(yōu)缺點(diǎn)。

講過(guò)嘗試，在產(chǎn)品UE的基礎(chǔ)上，推出了兩個(gè)嘗試方案：

方案A：相對(duì)保守，對(duì)搜索區(qū)域加寬至通欄，右側(cè)擺放工具，方便用戶找房。

方案B :這個(gè)大膽一些，相對(duì)上一版，是一個(gè)突破，將搜索置于頂部，導(dǎo)航之上，更符合用戶找房的目的。

另外在設(shè)計(jì)過(guò)程中得到了數(shù)據(jù)同學(xué)針對(duì)運(yùn)行中的首頁(yè)，進(jìn)行了熱力分布圖記錄，對(duì)布局調(diào)整給予了有力支持。

最終確定了B方案。

之后產(chǎn)品出完整UE，然后一氣呵成，期間我們交互設(shè)計(jì)師子軒同學(xué)也積極參與，提出各種改進(jìn)想法和建議。

另外說(shuō)一下關(guān)于首頁(yè)寬度。

在最初的討論中就涉及到是否加寬頁(yè)面寬度。

最近一年有多家網(wǎng)站的寬度做了變寬調(diào)整，例如騰訊首頁(yè)的寬度改成了1000PX，和產(chǎn)品一起做了內(nèi)部討論，基本確定加寬頁(yè)面寬度。

加多寬呢，但如果用1000px，就要出新的尺寸(焦點(diǎn)現(xiàn)有尺寸包括950、980、1002。如果要變寬，可以選擇到1000，這樣在1024下能夠正常顯示。)，當(dāng)然也有好處，更便于建立柵格體系。

最終討論結(jié)果，采用1002，不出新的尺寸，更好滿足廣告系統(tǒng)，關(guān)于柵格系統(tǒng)，有一單列間隙定位12px給予解決。

本文來(lái)源：搜狐焦點(diǎn)UED