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

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

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

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

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

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

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

02. 手繪排版和簡(jiǎn)單的圖片

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

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

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

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

04.專業(yè)的團(tuán)隊(duì)合影和整飭的排版

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

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

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

05. 醒目的標(biāo)題和有趣的動(dòng)畫

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

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

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

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

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

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

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

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

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

09. 簡(jiǎn)單的布局和干凈的留白

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

10. 可視化的時(shí)間軸和吸引人的配色

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

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

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

12. 大膽的用色和超大的團(tuán)隊(duì)照片

如果你想讓你的設(shè)計(jì)更加突出更有影響力，不妨試著讓一些元素更大，讓配色更加亮眼。正如Mixd 所設(shè)計(jì)的，用高清的團(tuán)隊(duì)成員大圖來突出每個(gè)成員的存在感，加上高對(duì)比度的色彩搭配，整個(gè)設(shè)計(jì)看起來也非常不錯(cuò)。值得注意的是，挑選合適的元素放大，不要全都放大，這樣就沒有重心了。

13. 時(shí)尚的圖片和簡(jiǎn)約的布局

Kingdom Coffee and Cycles 的整個(gè)設(shè)計(jì)可以說是現(xiàn)代風(fēng)設(shè)計(jì)的典范，布局簡(jiǎn)單，時(shí)尚的圖片，干凈整齊，色彩明亮。圖片是整個(gè)頁面的視覺設(shè)計(jì)的重心，圖片、視頻、地圖的混合搭配消解了頁面的單調(diào)和簡(jiǎn)單的特質(zhì)。技巧上，設(shè)計(jì)師使用了團(tuán)隊(duì)的Instagram的作品做成拼貼置于頁面底部，看起來也非常時(shí)尚有趣。

14. 簡(jiǎn)潔的圖形和鋒銳的線條

這種類型的網(wǎng)頁設(shè)計(jì)走的是時(shí)尚現(xiàn)代風(fēng)，干凈的外觀，輕量級(jí)的圖片選取，大量的留白和整齊的排版，非常專業(yè)也非常的養(yǎng)眼，堪稱完美的框架可以承載多種多樣的內(nèi)容。同時(shí)，這個(gè)頁面的設(shè)計(jì)案例也同樣展現(xiàn)出留白的重要性。

15. 大膽的提亮色和高亮信息

6tematik 的關(guān)于我們頁面設(shè)計(jì)非常有意思。黑白配色永遠(yuǎn)不會(huì)過時(shí)，但是在某些情況下黑白并不足以滿足全部的需求，這個(gè)頁面就使用了高飽和度的紅色來藍(lán)色來作為提亮色，大膽而有效。要注意的地方在于，你高亮的信息越多，高亮的效果就越差，因?yàn)楦吡恋牡胤皆蕉?，用戶越難于發(fā)現(xiàn)真正重要的地方。所以，你要做的是標(biāo)記出真正重要的事情。

16. 大留白和小元素

大和小在很多情況下都是對(duì)比出來的。Margin 通常指的是主體周圍的邊緣、留白和邊界。較小的邊界可以讓主體更有張力，覆蓋更大的范圍。但是Alfred 的關(guān)于我們頁面并沒有這么做，大量的留白、寬廣的邊緣讓整個(gè)頁面看起來文藝氣息十足，簡(jiǎn)約而輕松。雖然這樣的設(shè)計(jì)并不常規(guī)，但是也正是這種非常規(guī)的設(shè)計(jì)讓整個(gè)頁面充滿了獨(dú)特的風(fēng)格與調(diào)性。

17. 獨(dú)特的字體和個(gè)性化的檔案

獨(dú)特的手寫字體賦予Big Cartel的頁面以一種不同凡響的張力，雖然簡(jiǎn)單，但是讓設(shè)計(jì)大放異彩。個(gè)性化的員工檔案同上方別具一格的字體一樣獨(dú)特，參差多態(tài)的設(shè)計(jì)讓整個(gè)頁面在氣息上保持了一致性。當(dāng)你點(diǎn)擊員工頭像的播放按鍵的時(shí)候，會(huì)播放一段頗有性格的視頻，獨(dú)樹一幟。

18. 模塊化布局和溫暖的色彩

當(dāng)你看到這個(gè)頁面的時(shí)候，我想你也會(huì)注意到它獨(dú)特的設(shè)計(jì)：頁面的區(qū)塊是精心分割出來的，從上到下每一塊的內(nèi)容都會(huì)承上啟下，上一塊引出下一塊，就像梯子一樣。這樣一來，模塊化的頁面也顯得很有條理，整齊而又自由。頁面的配色和用圖也是非常講究的，黑白的基調(diào)配合溫暖的棕色，創(chuàng)造出溫馨的氛圍。

19. 醒目的色彩和大膽的圖片

Visionaire的用色簡(jiǎn)直是大膽的典型，紅色Banner的使用極為抓人眼球，還和品牌用色相互呼應(yīng)。錯(cuò)落的排版和別具一格的圖片使用讓用戶不會(huì)輕易忘記這個(gè)不同一般的網(wǎng)站。信息圖的使用也是這個(gè)關(guān)于我們頁面的特色。

20. 強(qiáng)對(duì)比和復(fù)古插畫

Woah Nelly Catering 的關(guān)于我們頁面并沒有追隨最流行的設(shè)計(jì)手法，而是采用了溫暖懷舊的色調(diào)和設(shè)計(jì)元素來營(yíng)造氛圍，鮮艷漂亮的插畫不僅讓頁面充滿活力，而且也簡(jiǎn)單直觀。復(fù)古插畫的微妙之處在于其中添加了紋理，讓它質(zhì)感非常不錯(cuò)，這也讓白底黑字的元素可以更加顯眼突出，構(gòu)成對(duì)比。

21. 整潔的配色和均衡的排版

漂亮的無襯線字體、均衡的排版和均勻光潔的配色讓EB Pearls 的關(guān)于我們頁面看起來專業(yè)無比。合理的留白和淺色的圖片的使用給人一種優(yōu)雅的感覺。

22. 柔和的色彩和簡(jiǎn)單的插畫

很多時(shí)候設(shè)計(jì)并不是越復(fù)雜越好，EVA Black Design的關(guān)于我們頁面使用簡(jiǎn)單的設(shè)計(jì)反而更容易營(yíng)造時(shí)尚現(xiàn)代的感覺。簡(jiǎn)約的暖色調(diào)圖片同黑白灰配合在一起，給人以柔和的感覺，點(diǎn)綴以簡(jiǎn)單的插畫，讓整個(gè)頁面在整飭的設(shè)計(jì)之下還擁有了些許個(gè)性。

23. 動(dòng)效和富有沖擊力的排版

想讓你的設(shè)計(jì)栩栩如生富于生命力？那么讓它們動(dòng)起來好了！用短視頻替代圖片，或者使用GIF圖片，這也都是目前流行的設(shè)計(jì)手法。純黑色的文本和紅色的元素的使用，讓整個(gè)頁面充滿了個(gè)性，也讓排版充滿了沖擊力。

24. 創(chuàng)意排版和吸引力十足的圖片

圖片居中的獨(dú)特排版是這個(gè)關(guān)于我們頁面的有趣之處，而團(tuán)隊(duì)成員的照片也正好居于這樣的位置，這使得兩邊的檔案信息排版需要向中間對(duì)齊。復(fù)古元素和配色的使用則支撐起了整個(gè)頁面的設(shè)計(jì)，值得學(xué)習(xí)哦。

25. 大膽的布局和色彩濾鏡

大膽使用獨(dú)特的、先鋒的布局是令人難忘的重要手段，同時(shí)搭配以個(gè)性十足的配色，效果絕對(duì)不錯(cuò)。干凈的無襯線體的選擇，色彩濾鏡下的圖片，都是這個(gè)關(guān)于我們頁面的突出之處。

【那些充滿異域風(fēng)情的網(wǎng)頁設(shè)計(jì)】

《兼容并蓄！20個(gè)來自澳大利亞最優(yōu)秀的網(wǎng)頁設(shè)計(jì)》
《狂拽酷炫！20個(gè)來自美國(guó)最優(yōu)秀的網(wǎng)頁設(shè)計(jì)》
《KEEP CALM & DESIGN！26個(gè)來自英國(guó)最優(yōu)秀的網(wǎng)頁設(shè)計(jì)》
《嚴(yán)謹(jǐn)而浪漫！20個(gè)來自德國(guó)最優(yōu)秀的網(wǎng)頁設(shè)計(jì)》
《情迷西班牙！20個(gè)來自西班牙最優(yōu)秀的網(wǎng)頁設(shè)計(jì)》
《時(shí)尚雅致！25個(gè)來自法國(guó)最優(yōu)秀的網(wǎng)頁設(shè)計(jì)》
《請(qǐng)多關(guān)照！20個(gè)來自日本最優(yōu)秀的網(wǎng)頁設(shè)計(jì)》

原文地址：designschool
優(yōu)設(shè)譯者：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量103萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com