關于我們！單頁設計的價值

什么是關于我們：

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

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

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

單頁面的價值：

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

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

飛機稿VS正稿：

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

請增加扉頁

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

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

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

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

正稿！單頁面的信息：

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

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

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

代碼：

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

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

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