三季度，焦點房產(chǎn)首頁進行了一次大的改版，這次我負責了頁面視覺設計。

這次改版的方向和目的是：”以用戶為中心，幫大家找好房”，提高用戶通過首頁進入樓盤詳情頁的到達率。

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

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

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

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

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

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

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

最終確定了B方案。

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

另外說一下關于首頁寬度。

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

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

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

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

本文來源：搜狐焦點UED