關(guān)于我們！單頁(yè)設(shè)計(jì)的價(jià)值

什么是關(guān)于我們：

　　這個(gè)頁(yè)面說(shuō)簡(jiǎn)單很簡(jiǎn)單，說(shuō)復(fù)雜也很復(fù)雜。短短數(shù)字，就能將事情說(shuō)的很清楚，配合些鏈接就能拓展內(nèi)容?？此茮](méi)什么內(nèi)容可說(shuō)，常常就堆積些文字上去。這不是做產(chǎn)品的思路，分析下看這個(gè)頁(yè)面的受眾，很容易劃分出幾種類型的用戶，潛在的客戶、員工和競(jìng)爭(zhēng)對(duì)手。普通的用戶較少會(huì)關(guān)注這部分內(nèi)容，而前面說(shuō)的三者，則是基本都看過(guò)你的簡(jiǎn)介（關(guān)于我們）。

　　寫給客戶和員工：由于受公司性質(zhì)的限制，不見(jiàn)得創(chuàng)意的形式會(huì)適合。這部分內(nèi)容更重要是方便他們看到想要的信息。最好能將兩者分開(kāi)，客戶更喜歡看到影響力和價(jià)值，數(shù)據(jù)型的圖表和典型合作案例更符合他們的胃口；員工則更喜歡看到他們?cè)谶@里的身影，對(duì)于潛在求職者，這也是了解企業(yè)的重要窗口?？梢赃m當(dāng)展示些工作環(huán)境、活動(dòng)福利和公司動(dòng)態(tài)。

　　寫給競(jìng)爭(zhēng)對(duì)手：因?yàn)槿绻霎a(chǎn)品，肯定會(huì)拿同領(lǐng)域相似的產(chǎn)品做對(duì)比。同樣，競(jìng)爭(zhēng)對(duì)手也會(huì)通過(guò)這里了解你的動(dòng)態(tài)。這主要指的是公司級(jí)的關(guān)于我們，如果是做為業(yè)余的個(gè)體或團(tuán)體，這塊內(nèi)容就可以適當(dāng)減弱。針對(duì)前者，這部分主要寫的是你的優(yōu)勢(shì)，弱化劣勢(shì)或干脆不提。

單頁(yè)面的價(jià)值：

　　看到上面所說(shuō)的數(shù)點(diǎn)，恐怕要將內(nèi)容拆分成幾個(gè)頁(yè)面才能完成。上一個(gè)版本的關(guān)于我們確實(shí)是這樣設(shè)計(jì)制作，由于不是自己經(jīng)手，卻要自己維護(hù)。會(huì)發(fā)現(xiàn)很多奇怪的問(wèn)題 1）主要集中在頁(yè)面片放置零散，維護(hù)成本過(guò)大。2）用戶需要不斷在切換窗口中尋找合適的信息，增加點(diǎn)擊成本。

　　那么為什么么不將這些信息集中在單頁(yè)面處理呢？單頁(yè)面不一定就是簡(jiǎn)單，就只能代表一種功能，它其實(shí)也可以模擬完整的信息閱讀順序。這和一個(gè)交互原理“奧卡姆剃刀原理”很相似，都奉行一種“簡(jiǎn)單有效原理”，即不要用過(guò)多的東西就去簡(jiǎn)單的事情，較少的東西也能到達(dá)同一效果。尤其它是功能性的網(wǎng)頁(yè)，能快速的找到對(duì)應(yīng)的內(nèi)容才是最重要的事情。

飛機(jī)稿VS正稿：

　　設(shè)計(jì)注定是苦逼的活，很少有機(jī)會(huì)一次通過(guò)。而優(yōu)秀的產(chǎn)品也有類似的痛楚，第一版就完美的應(yīng)用也不曾在世界存在過(guò)。在不斷迭代更新的過(guò)程中，設(shè)計(jì)師主要看的應(yīng)該是為什么要改？怎么改能快速簡(jiǎn)便達(dá)到目的。

請(qǐng)?jiān)黾屿轫?yè)

　　看似比較無(wú)聊的需求，尤其是針對(duì)功能性頁(yè)面。大家肯定都知道，增加扉頁(yè)就會(huì)增加用戶的點(diǎn)擊次數(shù)，如果它只是一幅畫或一組動(dòng)畫，你覺(jué)得用戶會(huì)真的看完么？特別是非首次用戶，長(zhǎng)期不更新會(huì)增加他們的煩躁感。

　　第一版是針對(duì)這種體驗(yàn)，做了迷你的扉頁(yè)。即包含最簡(jiǎn)單功能的展示頁(yè)。預(yù)想后面的背景可以輪換，且能很方便的更新型的內(nèi)容。下部類似metro的模塊則是對(duì)應(yīng)的主要功能。

第二版是根據(jù)整體品牌形象做了視覺(jué)延伸，將整體形象做了統(tǒng)一性的處理。

第三版覺(jué)得功能部件顯得復(fù)雜，將其去掉。只保留輪換效果，考慮的模型也是基于整體品牌形象。

正稿！單頁(yè)面的信息：

　　經(jīng)過(guò)上述幾階段的迭代，最后還是選擇放棄上面的扉頁(yè)掙扎。直接選擇將關(guān)于我們鏈接到這樣一個(gè)單頁(yè)內(nèi)。真正的單頁(yè)面效果實(shí)現(xiàn)起來(lái)并不復(fù)雜。功能性頁(yè)面無(wú)非是導(dǎo)航和主要信息的關(guān)系處理，最主要是關(guān)注分類和交互。

　　分類：主要層級(jí)是三層，第一大類是精彩大粵、廣告服務(wù)和聯(lián)系我們；第二類是旗下的分支信息，第三類是隱藏在內(nèi)容里的輪換信息，像廣告服務(wù)里的報(bào)價(jià)。依據(jù)分類，主要在色彩上做了區(qū)分，剛開(kāi)始設(shè)想時(shí)采用的是多彩色，橙+藍(lán)+綠以區(qū)分三大類的信息。在視覺(jué)端實(shí)現(xiàn)時(shí)，會(huì)發(fā)現(xiàn)整體顯得很花哨。導(dǎo)航就是導(dǎo)航，右側(cè)的內(nèi)容區(qū)信息才是最重要。所以最終處理的手法是統(tǒng)一同一種色彩，并且拉大第一個(gè)類間的距離和縮短第二類信息的距離。保證觀看時(shí)，能清楚區(qū)分它們間的關(guān)系即可，這塊左側(cè)的導(dǎo)航區(qū)只是保持輔助作用。

　　交互：交互模型沿用了招聘頁(yè)的效果，即跟隨滾動(dòng)+當(dāng)前欄目在導(dǎo)航區(qū)高亮的處理。具體可以看這篇文章里《為什么這樣設(shè)計(jì)-招聘頁(yè)改版》。在實(shí)踐中，發(fā)生頻繁變動(dòng)的頁(yè)面其實(shí)不太適合以上面的方法實(shí)現(xiàn)。尤其是有第三方的介入，往往會(huì)導(dǎo)致頁(yè)面某些區(qū)域的點(diǎn)擊失效，出現(xiàn)導(dǎo)航區(qū)斷裂的現(xiàn)象。保持一致的交互，像最重要的導(dǎo)航交互都使用豎直的模型，也包含內(nèi)容區(qū)廣告服務(wù)的刊例價(jià)導(dǎo)航。而稍微次要的導(dǎo)航都采用橫向交互，像圖片輪換和合作案例。

代碼：

　　1）主要的滾動(dòng)代碼是使用《側(cè)邊欄跟隨滾動(dòng)效果》，一個(gè)封裝的很棒的js組件。基本能滿足大部分隨屏滾動(dòng)的效果。唯一不是特別友好的地方是當(dāng)需要滾動(dòng)的組件在屏幕靠上的位置，精確點(diǎn)是610px以內(nèi)的部分，在IE下會(huì)出現(xiàn)抖動(dòng)的現(xiàn)象。最后不得不采用最傻瓜css代碼的position：fixed。

　　2）組件輪換會(huì)影響到字體的顯示，問(wèn)了前端的同學(xué)。也不能給出完美的解釋，只要?jiǎng)h除那段js效果就正常了。通過(guò)寫這段CSS，能使部分元素顯示正常。

地址：http://gd.qq.com/gydyym.htm