關(guān)于我們！單頁設(shè)計的價值

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

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

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

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

單頁面的價值：

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

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

飛機(jī)稿VS正稿：

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

請增加扉頁

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

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

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

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

正稿！單頁面的信息：

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

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

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

代碼：

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

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

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