@米田的天空 以往電腦端頁面盛行的時候，這東西顯得還不算特別重要。除非是那些關注你業務的同學，很少會有人會看“關于我們”的內容。相反，在個人博客這里，卻是了解博主的重要信息來源。

什么是關于我們：

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

• 寫給客戶和員工：由于受公司性質的限制，不見得創意的形式會適合。這部分內容更重要是方便他們看到想要的信息。最好能將兩者分開，客戶更喜歡看到影響力和價值，數據型的圖表和典型合作案例更符合他們的胃口；員工則更喜歡看到他們在這里的身影，對于潛在求職者，這也是了解企業的重要窗口。可以適當展示些工作環境、活動福利和公司動態。
• 寫給競爭對手：因為如果要做產品，肯定會拿同領域相似的產品做對比。同樣，競爭對手也會通過這里了解你的動態。這主要指的是公司級的關于我們，如果是做為業余的個體或團體，這塊內容就可以適當減弱。針對前者，這部分主要寫的是你的優勢，弱化劣勢或干脆不提。

單頁面的價值：

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

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

飛機稿VS正稿：

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

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

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

第二版是根據整體品牌形象做了視覺延伸，將整體形象做了統一性的處理。

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

正稿！單頁面的信息：

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

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

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

代碼：

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

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

font-weight:normal;font-family:arial;

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

【延伸閱讀】
“關于我們”頁面的設計范例和趨勢
騰訊雇主品牌——招聘官網改版項目總結
如何讓“關于我們”的頁面設計會講故事
 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。

【特色推薦】
設計講座：定期邀請國內互聯網公司的設計前輩及行業總監在群內及YY語音（YY頻道：15335158）分享實戰經驗。
設計微博：我們擁有粉絲量25萬的人氣微博@優秀網頁設計 ，歡迎大家關注及時獲取設計資源。
設計導航：史上最贊最全面的設計師網址導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：