18個最具有情懷的“關(guān)于我們”頁面設(shè)計
時間：2023-09-11 13:54:02 | 來源：網(wǎng)站運營
時間：2023-09-11 13:54:02 來源：網(wǎng)站運營
18個最具有情懷的“關(guān)于我們”頁面設(shè)計：一個成功的“關(guān)于我們”不僅僅是將品牌、公司和團隊信息填滿一個頁面那么簡單粗暴，你需要將團隊和品牌視作一個整體，呈現(xiàn)出獨有的風(fēng)格，不同的個性，讓用戶記住。它不僅僅是展示公司的服務(wù)理念，更是讓你的用戶更加了解你的唯一途徑。如果你還在困惑怎么設(shè)計一個具有情懷的“關(guān)于我們”界面，那么不凡看看別人都是怎么做的吧：
首先，先了解下這10個“關(guān)于我們”界面設(shè)計技巧：
1. 明確告訴用戶你是做什么的
2. 清晰的信息排版布局
3. 增加地圖模塊和數(shù)據(jù)來提高真實性
4. 獲獎信息的展示可以增強用戶信任感
5. 團隊以及個人真實照片的展現(xiàn)
6. 明顯的CTA讓用戶可以隨時體驗產(chǎn)品
7. 不要放置毫無意義且冗長的信息
8. 向用戶展示你的特色信息
9. 附有個性的設(shè)計可以讓用戶眼前一亮
10. 干凈的布局和簡潔的設(shè)計更讓人喜歡
10個真實的“關(guān)于我們”界面案列設(shè)計
1.
https://www.website.com/about-us/整個頁面是以灰白以主色調(diào)，同時宣導(dǎo)了這個公司的品牌故事、品牌價值以及真實的數(shù)據(jù)支撐。往下滾動會看到一個明顯的藍色的CTA讓用戶可以更加深入的了解產(chǎn)品并且試用。雖然頁面上并沒有放置公司管理人員或者職員的照片，但整個頁面簡潔干凈易于瀏覽，并不會影響用戶對這個公司的影響。
2.
https://www.starbucks.com/about-usStarbucks的“關(guān)于我們”頁面可以說是非常簡單，幾句意味深長的語句很抓住人心，“我們的宗旨就是為客戶提供全世界最好喝的咖啡”。左側(cè)的富有年代感的照片讓我們了解了它的歷史悠久。右側(cè)點擊鏈接則有具體的關(guān)于Starbucks的公司特色信息和傳統(tǒng)文化等。整個頁面雖然文字少，但是產(chǎn)品已經(jīng)深入人心了。
3.
https://www.tumblr.com/aboutTumblr的“關(guān)于我們”頁面設(shè)計的非常標(biāo)準(zhǔn)化，一張大圖logo顯示公司的標(biāo)志。圖片下方是具體的網(wǎng)站數(shù)據(jù)：博客數(shù)和文章數(shù)量。接下來就是簡潔的文字來傳遞公司的服務(wù)宗旨和理念，最棒的是在底部有最近發(fā)布的文章推薦，它們真的是為留住用戶想盡了一切辦法。
4.
https://www.salsajeans.com/en/about-the-brand/abou...Salsa是一個服裝網(wǎng)站，在“關(guān)于我們”的頁面直接展示給我們的是一個2分多鐘的介紹視頻，從設(shè)計到制作，整個視頻傳達他們優(yōu)良的工藝和公司服務(wù)宗旨。并且使用視頻解說，用戶停留時間更長，更容易達成轉(zhuǎn)化，這就是他們聰明的一點。往下滾動可以看到公司的三大宗旨：Vision，Value，Mission。
5.
https://www.thoughtworks.com/about-us“關(guān)于”我們頁面設(shè)計就是為讓用戶更加了解我們是誰？我們是做什么的？這個頁面的設(shè)計完美了詮釋了這兩點。上方放置了一張團隊的照片。告訴訪問者了解你的網(wǎng)站背后是有一群真實的人，而非機器。頁面上的信息排版想當(dāng)順暢，告訴用戶公司的服務(wù)宗旨和理念，還讓我們了解了公司運營。當(dāng)然，你會看到公司領(lǐng)導(dǎo)層的照片，也是告訴用戶這個公司是誰在運作的，證明公司的真實性。底部還有公司最新的咨詢來留住用戶不離開網(wǎng)站。
6.
https://www.odoo.com/page/about-usOdoo的“關(guān)于我們”頁面設(shè)計除了公司的傳遞的服務(wù)理念和宗旨以外，還有地圖展示每個公司辦公地址增加真實性。如果你想要用戶更了解你們的公司？更信賴你們的公司？那么公司在外獲得獎必須要展示出來，這樣用戶才能更加信賴你們，達成的轉(zhuǎn)化就會更高。Odoo就做到了這點。
7.
https://www.sulzer.com/en/about-us“關(guān)于我們”頁面必須是易于瀏覽的，又不要給與用戶毫無意義的冗余信息。用戶對文字只是瀏覽，太多的信息內(nèi)容讓他不知道點哪里。Sulzer就采用了很聰明的排版方式，以圖片文字鏈接的形式橫向排列公司的介紹以及信息等，你如果愿意了解更多，那么可以點擊了解。不愿意了解更多那么可以忽略，可以給用戶更多選擇。
8.
https://www.kittiescakes.com/story復(fù)古風(fēng)格是我個人十分鐘愛的一種設(shè)計風(fēng)格。通常我們看到的復(fù)古風(fēng)都擁有著溫暖色色調(diào)和俏皮的插畫，在配上傳統(tǒng)的布局手法，就堪稱完美了。Kittie’s Cakes 的頁面中散落著許多簡單但是極為歡快有趣的插畫，這些天馬行空的配圖讓整個設(shè)計一下就擁有了強烈的風(fēng)格和個人特色。復(fù)古的配色和層次豐富的頁面結(jié)構(gòu)，讓用戶在獲取信息的同時還不時地收到驚喜。
9.
https://www.dropbox.com/about以動圖的形式展示展示網(wǎng)站的信息，用色大膽，個性鮮明，讓人留下深刻的印象。文字排版主要是以黑紅為主色調(diào)，紅色總是給人一種熱情洋溢的心情，也顯示出文字內(nèi)容的重要性。
10.
http://featherandstone.co/fine-art-wedding-photogr...完全不同于其他的頁面設(shè)計，F(xiàn)eather and Stone 的關(guān)于我們頁面采用了手繪插畫來表現(xiàn)他們的獨特之處。由于他們是婚禮攝影師，所以這種浪漫的表現(xiàn)手法就顯得恰到好處。
Dribbble上8個最佳的“關(guān)于我們”界面設(shè)計
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è)計，是時候該你上場設(shè)計一個屬于你的個性““關(guān)于我們”頁面，只需要一個簡單易上手的原型設(shè)計工具就可以幫你搞定。Mockplus是一款簡單無需學(xué)習(xí)成本的網(wǎng)頁原型設(shè)計工具，可創(chuàng)建網(wǎng)頁項目，自由項目，自定義項目，APP項目等。不論是做頁面滾動和排版布局，Mockplus封裝的200個組件輕松實現(xiàn)交互設(shè)計。如果你需要一套嚴格的設(shè)計規(guī)范來管理你的頁面，那么摹客的設(shè)計系統(tǒng)是你不二的選擇，輕松管理你的設(shè)計資源。
總結(jié)
不論是采用大膽的用色，夸張的動效；還是使用簡單的插畫，溫暖的配色等，都要于整個網(wǎng)站頁面設(shè)計風(fēng)格一致。對于許多網(wǎng)站來說，“關(guān)于我們” 界面的好壞直接影響了用戶的去留，想要讓用戶能夠有更好地“第二印象”，可以多參考下其他網(wǎng)站是如何做的。希望這篇文章可以幫助你。
文末福利：體驗Mockplus團隊新產(chǎn)品——摹客設(shè)計系統(tǒng)，人人都有獎，iPad Pro等你來拿??！
產(chǎn)品：摹客設(shè)計系統(tǒng)活動：這個夏天一起嗨，iPad Pro等你拿相關(guān)閱讀：
2018最佳網(wǎng)頁設(shè)計：就是要你靈感爆棚反面教材，這9個糟糕的網(wǎng)頁設(shè)計實例引以為戒設(shè)計類網(wǎng)站的“聯(lián)系我們”頁面設(shè)計盤點干貨！2018年你值得一看的網(wǎng)頁設(shè)計作品集賞析網(wǎng)頁設(shè)計有難題？12款網(wǎng)頁設(shè)計模板給你靈感！極簡網(wǎng)頁設(shè)計技巧，打造簡約之美進階學(xué)習(xí)，如何無代碼設(shè)計一款美觀且實用的網(wǎng)站？網(wǎng)站著陸頁設(shè)計，讓用戶開心著陸的10大技巧！網(wǎng)站設(shè)計缺乏創(chuàng)意？視差滾動網(wǎng)站設(shè)計讓你與眾不同收集網(wǎng)站用戶反饋的5個常用問題這9款小眾時尚的酒店網(wǎng)站設(shè)計，讓你不再戀家時尚的不僅僅是它們的服裝，還有它們的網(wǎng)站設(shè)計10個最新交互式Web設(shè)計實例欣賞
在線咨詢