本人上半年有幸參與友商網(wǎng)的門(mén)戶(hù)優(yōu)化和伙伴門(mén)戶(hù)的設(shè)計(jì)，因?yàn)樗闶遣块T(mén)的重要任務(wù)，自然需要投入些心力來(lái)分析設(shè)計(jì)。作為企業(yè)門(mén)戶(hù)的設(shè)計(jì)，從一個(gè)設(shè)計(jì)師和交互師的角度，我首先是考慮到它的易用性，美觀(guān)度，功能性，模塊化，延展性。在一些細(xì)節(jié)的交互和技術(shù)的實(shí)現(xiàn)復(fù)雜度上，我們都需要做一些細(xì)致的分析和權(quán)衡?；ヂ?lián)網(wǎng)產(chǎn)品有它自身的特點(diǎn)，用戶(hù)群的喜好和先進(jìn)理念的迭代是推動(dòng)產(chǎn)業(yè)快速發(fā)展的主要?jiǎng)恿Α?/P>

1，前期需求分析

首先我們需求明確設(shè)計(jì)的需求，6.0版的門(mén)戶(hù)主要是針對(duì)一些用戶(hù)調(diào)查的反饋進(jìn)行一些結(jié)構(gòu)上的優(yōu)化。

比如：下圖的頁(yè)面，位于頁(yè)面中央的交互區(qū)很少有人點(diǎn)擊，可能是由于交互的隱蔽性讓用戶(hù)對(duì)該區(qū)域的內(nèi)容豐富性和交互性產(chǎn)生了質(zhì)疑。

針對(duì)這塊交互區(qū)，我們進(jìn)行一些交互形式上的調(diào)整，把這塊內(nèi)容做成客戶(hù)成功案例的一個(gè)接口，通過(guò)頁(yè)簽這種比較傳統(tǒng)的展現(xiàn)方式讓用戶(hù)意識(shí)到內(nèi)容的可點(diǎn)擊性和交互多樣性，這樣勢(shì)必會(huì)增加用戶(hù)的關(guān)注度和頁(yè)面的點(diǎn)擊熱點(diǎn)。

伙伴企業(yè)門(mén)戶(hù)的目標(biāo)用戶(hù)是一些較小的產(chǎn)品分銷(xiāo)商，他們的需求關(guān)鍵點(diǎn)是：功能的齊全，界面的專(zhuān)業(yè)，交互的流暢。我們首先應(yīng)該從這些基本的需求點(diǎn)入手，從而把握核心的內(nèi)容架構(gòu)。

2，前期結(jié)構(gòu)設(shè)計(jì)

企業(yè)的結(jié)構(gòu)這塊首先的基本需求是：首頁(yè)，產(chǎn)品與服務(wù)，新聞資訊，企業(yè)介紹，成功案例，企業(yè)博客，商圈和論壇，一般的企業(yè)網(wǎng)站在這個(gè)基礎(chǔ)上略有增減。

3，后期結(jié)構(gòu)調(diào)整

1，  增加解決方案，聯(lián)系方式，企業(yè)動(dòng)態(tài)等模塊，細(xì)化服務(wù)功能

2，  增加界面的統(tǒng)一感，banner的通欄設(shè)計(jì)

3，  強(qiáng)化首頁(yè)的產(chǎn)品模塊，突出業(yè)務(wù)主線(xiàn)

4，  解決方案的首頁(yè)模塊，突出產(chǎn)品服務(wù)

5，  成功案例的模塊強(qiáng)化，同樣是業(yè)務(wù)主線(xiàn)的凸顯。

6，  弱化企業(yè)動(dòng)態(tài)，博客，圈子等輔助功能

7，  左右結(jié)構(gòu)統(tǒng)一化， 讓用戶(hù)瀏覽更流暢

8，  強(qiáng)化菜單的設(shè)計(jì)和導(dǎo)航的作用

4，后臺(tái)控制頁(yè)面

 后臺(tái)的設(shè)計(jì)主要強(qiáng)調(diào)其功能性，我們借鑒了博客網(wǎng)站的模版修改功能，主要在模塊的增減，色彩方案的選擇和調(diào)整的直觀(guān)性上做設(shè)計(jì)。

5，整體調(diào)整

1，  介于公司b2b性質(zhì)的商務(wù)性，減少了一些色塊和圖片的運(yùn)用

2，  結(jié)構(gòu)上趨于嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)風(fēng)格，便于模板和色彩方案的變更

3，  標(biāo)準(zhǔn)化頁(yè)面容器的尺寸和圖片的尺寸

4，  強(qiáng)化一些重要元素的樣式，如：價(jià)格，主要產(chǎn)品，重要標(biāo)題，關(guān)鍵操作按鈕

5，  減少模塊間的相互干擾，統(tǒng)一左側(cè)模塊區(qū)的內(nèi)容

6，  弱化頁(yè)尾的注冊(cè)信息

統(tǒng)一后的左側(cè)模塊組

最終效果

原文：http://ucdchina.com/snap/7233