一個(gè)成功的“關(guān)于我們”不僅僅是將品牌、公司和團(tuán)隊(duì)信息填滿一個(gè)頁(yè)面那么簡(jiǎn)單粗暴，你需要將團(tuán)隊(duì)和品牌視作一個(gè)整體，呈現(xiàn)出獨(dú)有的風(fēng)格，不同的個(gè)性，讓用戶記住。它不僅僅是展示公司的服務(wù)理念，更是讓你的用戶更加了解你的唯一途徑。如果你還在困惑怎么設(shè)計(jì)一個(gè)具有情懷的“關(guān)于我們”界面，那么不凡看看別人都是怎么做的吧：

首先，先了解下這10個(gè)“關(guān)于我們”界面設(shè)計(jì)技巧：

1. 明確告訴用戶你是做什么的

2. 清晰的信息排版布局

3. 增加地圖模塊和數(shù)據(jù)來(lái)提高真實(shí)性

4. 獲獎(jiǎng)信息的展示可以增強(qiáng)用戶信任感

5. 團(tuán)隊(duì)以及個(gè)人真實(shí)照片的展現(xiàn)

6. 明顯的CTA讓用戶可以隨時(shí)體驗(yàn)產(chǎn)品

7. 不要放置毫無(wú)意義且冗長(zhǎng)的信息

8. 向用戶展示你的特色信息

9. 附有個(gè)性的設(shè)計(jì)可以讓用戶眼前一亮

10. 干凈的布局和簡(jiǎn)潔的設(shè)計(jì)更讓人喜歡

10個(gè)真實(shí)的“關(guān)于我們”界面案列設(shè)計(jì)

1. https://www.website.com/about-us/

整個(gè)頁(yè)面是以灰白以主色調(diào)，同時(shí)宣導(dǎo)了這個(gè)公司的品牌故事、品牌價(jià)值以及真實(shí)的數(shù)據(jù)支撐。往下滾動(dòng)會(huì)看到一個(gè)明顯的藍(lán)色的CTA讓用戶可以更加深入的了解產(chǎn)品并且試用。雖然頁(yè)面上并沒有放置公司管理人員或者職員的照片，但整個(gè)頁(yè)面簡(jiǎn)潔干凈易于瀏覽，并不會(huì)影響用戶對(duì)這個(gè)公司的影響。

2. https://www.starbucks.com/about-us

Starbucks的“關(guān)于我們”頁(yè)面可以說是非常簡(jiǎn)單，幾句意味深長(zhǎng)的語(yǔ)句很抓住人心，“我們的宗旨就是為客戶提供全世界最好喝的咖啡”。左側(cè)的富有年代感的照片讓我們了解了它的歷史悠久。右側(cè)點(diǎn)擊鏈接則有具體的關(guān)于Starbucks的公司特色信息和傳統(tǒng)文化等。整個(gè)頁(yè)面雖然文字少，但是產(chǎn)品已經(jīng)深入人心了。

3. https://www.tumblr.com/about

Tumblr的“關(guān)于我們”頁(yè)面設(shè)計(jì)的非常標(biāo)準(zhǔn)化，一張大圖logo顯示公司的標(biāo)志。圖片下方是具體的網(wǎng)站數(shù)據(jù)：博客數(shù)和文章數(shù)量。接下來(lái)就是簡(jiǎn)潔的文字來(lái)傳遞公司的服務(wù)宗旨和理念，最棒的是在底部有最近發(fā)布的文章推薦，它們真的是為留住用戶想盡了一切辦法。

4. https://www.salsajeans.com/en/about-the-brand/abou...

Salsa是一個(gè)服裝網(wǎng)站，在“關(guān)于我們”的頁(yè)面直接展示給我們的是一個(gè)2分多鐘的介紹視頻，從設(shè)計(jì)到制作，整個(gè)視頻傳達(dá)他們優(yōu)良的工藝和公司服務(wù)宗旨。并且使用視頻解說，用戶停留時(shí)間更長(zhǎng)，更容易達(dá)成轉(zhuǎn)化，這就是他們聰明的一點(diǎn)。往下滾動(dòng)可以看到公司的三大宗旨：Vision，Value，Mission。

5. https://www.thoughtworks.com/about-us

“關(guān)于”我們頁(yè)面設(shè)計(jì)就是為讓用戶更加了解我們是誰(shuí)？我們是做什么的？這個(gè)頁(yè)面的設(shè)計(jì)完美了詮釋了這兩點(diǎn)。上方放置了一張團(tuán)隊(duì)的照片。告訴訪問者了解你的網(wǎng)站背后是有一群真實(shí)的人，而非機(jī)器。頁(yè)面上的信息排版想當(dāng)順暢，告訴用戶公司的服務(wù)宗旨和理念，還讓我們了解了公司運(yùn)營(yíng)。當(dāng)然，你會(huì)看到公司領(lǐng)導(dǎo)層的照片，也是告訴用戶這個(gè)公司是誰(shuí)在運(yùn)作的，證明公司的真實(shí)性。底部還有公司最新的咨詢來(lái)留住用戶不離開網(wǎng)站。

6. https://www.odoo.com/page/about-us

Odoo的“關(guān)于我們”頁(yè)面設(shè)計(jì)除了公司的傳遞的服務(wù)理念和宗旨以外，還有地圖展示每個(gè)公司辦公地址增加真實(shí)性。如果你想要用戶更了解你們的公司？更信賴你們的公司？那么公司在外獲得獎(jiǎng)必須要展示出來(lái)，這樣用戶才能更加信賴你們，達(dá)成的轉(zhuǎn)化就會(huì)更高。Odoo就做到了這點(diǎn)。

7. https://www.sulzer.com/en/about-us

“關(guān)于我們”頁(yè)面必須是易于瀏覽的，又不要給與用戶毫無(wú)意義的冗余信息。用戶對(duì)文字只是瀏覽，太多的信息內(nèi)容讓他不知道點(diǎn)哪里。Sulzer就采用了很聰明的排版方式，以圖片文字鏈接的形式橫向排列公司的介紹以及信息等，你如果愿意了解更多，那么可以點(diǎn)擊了解。不愿意了解更多那么可以忽略，可以給用戶更多選擇。

8. https://www.kittiescakes.com/story

復(fù)古風(fēng)格是我個(gè)人十分鐘愛的一種設(shè)計(jì)風(fēng)格。通常我們看到的復(fù)古風(fēng)都擁有著溫暖色色調(diào)和俏皮的插畫，在配上傳統(tǒng)的布局手法，就堪稱完美了。Kittie’s Cakes 的頁(yè)面中散落著許多簡(jiǎn)單但是極為歡快有趣的插畫，這些天馬行空的配圖讓整個(gè)設(shè)計(jì)一下就擁有了強(qiáng)烈的風(fēng)格和個(gè)人特色。復(fù)古的配色和層次豐富的頁(yè)面結(jié)構(gòu)，讓用戶在獲取信息的同時(shí)還不時(shí)地收到驚喜。

9. https://www.dropbox.com/about

以動(dòng)圖的形式展示展示網(wǎng)站的信息，用色大膽，個(gè)性鮮明，讓人留下深刻的印象。文字排版主要是以黑紅為主色調(diào)，紅色總是給人一種熱情洋溢的心情，也顯示出文字內(nèi)容的重要性。

10. http://featherandstone.co/fine-art-wedding-photogr...

完全不同于其他的頁(yè)面設(shè)計(jì)，F(xiàn)eather and Stone 的關(guān)于我們頁(yè)面采用了手繪插畫來(lái)表現(xiàn)他們的獨(dú)特之處。由于他們是婚禮攝影師，所以這種浪漫的表現(xiàn)手法就顯得恰到好處。

Dribbble上8個(gè)最佳的“關(guān)于我們”界面設(shè)計(jì)

About Page

Auri About Page

DGiT - About us design

Digital Agency About Page

Dustin-putnam

IIoT Corporate Website About Us Page Animation

Namibia Park About Us Page

Unfold - About Page

看了這么多優(yōu)秀的設(shè)計(jì)，是時(shí)候該你上場(chǎng)設(shè)計(jì)一個(gè)屬于你的個(gè)性““關(guān)于我們”頁(yè)面，只需要一個(gè)簡(jiǎn)單易上手的原型設(shè)計(jì)工具就可以幫你搞定。Mockplus是一款簡(jiǎn)單無(wú)需學(xué)習(xí)成本的網(wǎng)頁(yè)原型設(shè)計(jì)工具，可創(chuàng)建網(wǎng)頁(yè)項(xiàng)目，自由項(xiàng)目，自定義項(xiàng)目，APP項(xiàng)目等。不論是做頁(yè)面滾動(dòng)和排版布局，Mockplus封裝的200個(gè)組件輕松實(shí)現(xiàn)交互設(shè)計(jì)。如果你需要一套嚴(yán)格的設(shè)計(jì)規(guī)范來(lái)管理你的頁(yè)面，那么摹客的設(shè)計(jì)系統(tǒng)是你不二的選擇，輕松管理你的設(shè)計(jì)資源。

總結(jié)

不論是采用大膽的用色，夸張的動(dòng)效；還是使用簡(jiǎn)單的插畫，溫暖的配色等，都要于整個(gè)網(wǎng)站頁(yè)面設(shè)計(jì)風(fēng)格一致。對(duì)于許多網(wǎng)站來(lái)說，“關(guān)于我們” 界面的好壞直接影響了用戶的去留，想要讓用戶能夠有更好地“第二印象”，可以多參考下其他網(wǎng)站是如何做的。希望這篇文章可以幫助你。