毫無疑問，你是沒有第二次機會來給人以“第一印象”。每個網(wǎng)站從首頁到子頁面都是介紹產(chǎn)品、提供服務(wù)、探討功能，唯有“關(guān)于我們”這個頁面是關(guān)乎產(chǎn)品和服務(wù)的創(chuàng)建者——我們自己，也是為什么它如此的重要。

一個成功的“關(guān)于我們”不僅僅是將品牌、公司和團隊信息填滿一個頁面那么簡單粗暴，你需要將團隊和品牌視作一個整體，呈現(xiàn)出獨有的風格，不同的個性，讓用戶記住。

這聽起來似乎是一件特別棘手的事情，但是仔細推敲整理，實際并不復雜。選擇走腎的設(shè)計技巧，挑個或現(xiàn)代或簡約的匹配自家品牌的風格，用最走心的方式展現(xiàn)自己的團隊，這就夠了。

聽起來玄乎，不如看看別人家的案例來的直觀。

01. 醒目的色彩和鮮亮的配色 

嚴格的色彩搭配和醒目的色調(diào)選取，使得Rook 的“關(guān)于我們”頁面的設(shè)計看起來簡單而突出。醒目的金色貫穿整個設(shè)計，從logo到圖像、排版都保持著一致性。

在圖片和成員照片的處理上，設(shè)計師采用了單色的色彩濾鏡，這讓關(guān)于我們頁面在色彩上更加嚴格也更加統(tǒng)一，品牌化的設(shè)計在這里一覽無余。

02. 手繪排版和簡單的圖片

Madebyband 的“關(guān)于我們”頁面的設(shè)計比較不同，結(jié)合品牌的特征，當然也是為了表現(xiàn)個性，他們的頁面運用了許多手繪的字體和排版，配合手工制作品的圖片，傳達品牌的個性。整個頁面設(shè)計簡潔，大量的留白也平衡了頁面的結(jié)構(gòu)。

所以，無論是自定義的字體還是自定義的圖片，都是呈現(xiàn)品牌性格表現(xiàn)團隊差異化的可靠手段。

03. 俏皮的插畫和活潑的配色

“關(guān)于我們”的頁面中最常見的信息就是團隊的照片和地點等內(nèi)容，那么為什么要用傳統(tǒng)而死板的方式來呈現(xiàn)呢？Pulp Fingers 就沒有這么做，設(shè)計師挑選了三種色彩來制作尖銳而極具風格的插畫，這種風格不僅漂亮而且有趣，獨特而足夠引人入勝。作為企業(yè)的“關(guān)于我們”頁面絕對獨具一格，令人難忘。


04.專業(yè)的團隊合影和整飭的排版

“關(guān)于我們”的頁面中，團隊成員照片非要是單獨個人的么？并不一定，專業(yè)的合影也是不錯的選擇（一群人隨意地站在某棟樓門口的樓梯上拍攝，這樣的合影中國人有過太多，談不上專業(yè)，放這里通常都非常的違和）。這種專業(yè)的團隊成員攝影有不少企業(yè)做過，很容易做得過于“商業(yè)風”，做得有風格也恰到好處的并不多，有興趣的同學可以找找錘子科技團隊的男神合照，大概也有Jam3團隊合影的風格。

Jam3 團隊選擇的是統(tǒng)一的黑色服裝，在深色背景襯托下逼格四射，質(zhì)感十足，成熟而精美，是絕對的焦點。搭配這個圖片的排版和背景都非常的現(xiàn)代而清爽，主次分明。

當然，這種合照存在的問題在于，團隊成員如果變動的話，你得重新照一次……如果這個不是問題的話，那就來一發(fā)吧。

05. 醒目的標題和有趣的動畫

如果想讓客戶、未來的員工和同事們確切地了解你們的品牌價值的所在，那么為什么不把這些核心的內(nèi)容直接醒目地寫出來呢？Purple, Rock, Scissors 就是這么做的。這個“關(guān)于我們”的頁面還有兩個地方非常貼心，一個是短視頻背景，它很好地展現(xiàn)了工作環(huán)境和整體氛圍；另外一個是團隊成員頭像的設(shè)計，鼠標懸停的時候，你可以看到其中人物表情變化的動效，不僅貼心而且有趣。

06. 雙色搭配和大膽的插畫

Mike Kus 的“關(guān)于我們”的頁面設(shè)計采用了獨特的雙色配色，前景色是黃色，背景色是紅色，雙色搭配的優(yōu)勢在于它極強的凝聚力，這樣的風格通常厚重而復古，而且可以很好地強化品牌色給人的感覺。另外一個引人入勝的地方就是其中大膽的插畫——大腦。

當然，配設(shè)在整個設(shè)計中起到了決定性的作用，要作出靠譜的配色并不容易，不妨在優(yōu)設(shè)首頁的搜索框中搜搜配色，會有驚喜哦。

07. 整潔的圖形和信息可視化

是否你也會更喜歡視覺突出的圖形而非整片的文字呢？那么你看看Huge公司的“關(guān)于我們”頁面吧。這家公司用先鋒而大膽的配圖來呈現(xiàn)他們的獨特之處，碩大而簡潔的標題文字讓這些配圖更加富有張力，同時還傳達出他們的企業(yè)價值觀。

如果圖形化是設(shè)計的核心的話，信息圖的使用就順理成章了。關(guān)鍵的信息用信息圖來表現(xiàn)，不僅貼合網(wǎng)站的整體風格，還能讓用戶更輕松地接受網(wǎng)站傳遞的信息。

08. 整齊的排版和溫暖的色調(diào)

坦率的講，柵格運用的最多的地方還是傳統(tǒng)媒體，網(wǎng)絡(luò)媒體運用柵格的方式與之還是有差別的。不過Studio Alto的網(wǎng)頁證明了一點：網(wǎng)頁排版一樣可以借助柵格做到類似傳統(tǒng)屏幕印刷行業(yè)的排版樣式。頁面中暖色調(diào)的運用，讓整個頁面的更加風格化，這種類似牛皮紙的色彩令整個頁面的質(zhì)感更上一層樓了。

09. 簡單的布局和干凈的留白

設(shè)計網(wǎng)頁的時候，留白是重要的工具和元素，掌控留白的使用技巧非常有必要。Made By Shape的“關(guān)于我們”頁面的設(shè)計就是這樣的一個案例，棱角分明的形狀和不同的區(qū)塊被留白清晰地分割開，柔和的色調(diào)賦予頁面以時尚感和生命力。如果你所設(shè)計的頁面內(nèi)容信息量很大，不妨好好運用留白吧。

10. 可視化的時間軸和吸引人的配色

如果要展現(xiàn)一個產(chǎn)品的發(fā)展歷程，沒有什么比時間軸更加合適了。Moz 的這個關(guān)于我們的頁面設(shè)計就充分運用了這一元素。時間軸并非是固定的圖片，其中的事件和內(nèi)容是可以同用戶進行交互和互動的。如此一來，整個時間軸便可以向用戶講述整個故事，讓用戶也感受到參與感。整個設(shè)計的另外一個亮點是它的配色。

11. 插畫式圖片和溫暖的基調(diào)

你們是否擁有一個強大的幕后團隊呢？如果是，不妨在“關(guān)于我們”頁面中好好地展現(xiàn)他們。其實Food Studio 的這個頁面的設(shè)計并不涉及過于復雜的技巧，他們只是將團隊成員的頭像更換為插畫風，配合溫暖的基調(diào)，讓整個頁面的風格一下就脫穎而出。這樣的設(shè)計最重要的一點是統(tǒng)一，一致性是風格化的基礎(chǔ)。