- 相關(guān)推薦
40個(gè)網(wǎng)頁(yè)設計優(yōu)秀案例
關(guān)于我們的頁(yè)面設計并不難，但是要設計一個(gè)完美的版本并不容易。它通常取決于你的出發(fā)點(diǎn)，是要個(gè)性化的設計，還是品牌化的運作?是提供自己聯(lián)系方式，還是獲取用戶(hù)的聯(lián)系方式?下面的優(yōu)秀案例會(huì )告訴你，優(yōu)秀的關(guān)于我們頁(yè)面要如何設計。
1、友好的界面
友好的聯(lián)系人界面總會(huì )讓人感到親切的，如果它還具備一些功能性，并且易于閱讀，用戶(hù)會(huì )感覺(jué)更加舒適的�！癢hat can we help you with”則可以引導用戶(hù)去點(diǎn)擊“加入我們”“聘用我們”以及參與郵件訂閱。
2、展示全球各地辦公室
Tool 的關(guān)于我們頁(yè)面中，設計師用醒目的字體標注出團隊在洛杉磯、紐約和法國的辦公室的地址和聯(lián)系方式，點(diǎn)開(kāi)關(guān)于我們頁(yè)面的用戶(hù)不就是想知道這些信息么?正確的聯(lián)系方式，簡(jiǎn)單直接的設計，就是這么做的。
3、簡(jiǎn)化溝通流程
Productiong Location的聯(lián)系我們頁(yè)面同樣采用了大膽而視覺(jué)化的頁(yè)面設計，但是和其他的同類(lèi)頁(yè)面不同的是，它簡(jiǎn)化了溝通流程，把用戶(hù)可能會(huì )關(guān)注的內容和需要溝通的具體部分都劃分了一下，讓不同需求的用戶(hù)直接被引導到特定的頁(yè)面和部分，從而達成簡(jiǎn)化和分流的目的。
4、頭像和個(gè)性化的信息
放上設計師和團隊成員的圖片，讓用戶(hù)認識你。最關(guān)鍵的并不是你的頭像夠不夠漂亮，而是要讓用戶(hù)知道這個(gè)漂亮的網(wǎng)站背后是一位和你我一樣真實(shí)而平凡的設計師，是他或者她努力設計之后的成果。頭像可以讓頁(yè)面更加個(gè)性化，也能讓它更加真實(shí)而親近。
5、鼓勵用戶(hù)溝通
關(guān)于我們頁(yè)面的核心設計目的通常是溝通，而Hello Innovation 的頁(yè)面設計則充分貫徹這一思路：試圖鼓勵用戶(hù)主動(dòng)同網(wǎng)站進(jìn)行溝通。用親切而富有親和力的設計，留下聯(lián)系方式，從文案到留下郵箱的地址都在鼓勵用戶(hù)。聊一句，能有多難呢?
6、用圖片來(lái)傳遞隱喻
設計博物館中收藏了許多設計相關(guān)的藏品，而關(guān)于我們頁(yè)面中的這個(gè)電話(huà)不僅是網(wǎng)站的藏品，而且作為一個(gè)重要的隱喻來(lái)向用戶(hù)傳遞“溝通”的意象，這也算得上是一種設計上的“雙關(guān)”了。
7、創(chuàng )造令人難忘的設計
古怪的設計和有趣的文案總能讓人難忘，每天海量的信息攝入讓人們只會(huì )記住最突出的那些。不過(guò)，古怪的設計不一定適合任何品牌任何網(wǎng)站，但是對于那些古靈精怪的網(wǎng)站而言，那些獨樹(shù)一幟的腦洞總能起到作用。
8、表現品牌的性格
對于網(wǎng)站而言，在關(guān)于我們頁(yè)面中將自家的品牌性格呈現出來(lái)自然是合理合適的。Boone Selections 就是這樣優(yōu)雅又專(zhuān)業(yè)地將品牌配色和相關(guān)設計元素融入關(guān)于我們頁(yè)面的。作為一個(gè)專(zhuān)業(yè)的葡萄酒進(jìn)口公司，Boone Selections 的關(guān)于我們頁(yè)面用獨特的排版和滾動(dòng)式的頁(yè)面設計，營(yíng)造出獨有的品牌氣息。
9、展示聯(lián)絡(luò )方式
This Also 的關(guān)于我們頁(yè)面設計可謂是可靠而到位了，頁(yè)面地圖標注出了公司地點(diǎn)也就算了，當你向下滾動(dòng)頁(yè)面的時(shí)候，還能看到詳細地址的說(shuō)明、沿線(xiàn)地鐵的乘坐方式、溝通的電子郵件地址、電話(huà)，等等等等，不一而足。
10、給個(gè)提示
網(wǎng)站 Deux Huit Huit 的關(guān)于我們頁(yè)面并沒(méi)有提供傳統意義上的溝通方式，而是設計成了一個(gè)直觀(guān)而簡(jiǎn)單的對話(huà)框。頂上“Say hello ”的對話(huà)框非常直接地提示用戶(hù)，只要輸入內容，網(wǎng)站的開(kāi)發(fā)者就能看到了。
11、標明開(kāi)門(mén)/工作時(shí)間
對于諸如餐廳、博物館、商店等有具體營(yíng)業(yè)時(shí)間的機構的官方網(wǎng)站，在關(guān)于我們頁(yè)面當中標注店鋪開(kāi)門(mén)的時(shí)間、接受電話(huà)咨詢(xún)的時(shí)間，可以讓用戶(hù)更加有效地接受服務(wù)。
12、使用醒目的字體
Panache 的關(guān)于我們頁(yè)面中標題字體采用了非常醒目的“Travaillons Ensemble”，這種字體更為輕巧，雖然獨特但是具有極高的識別度。
13、使用大膽的配色方案
經(jīng)典的黑白黃的配色方案被運用到Sponge 的關(guān)于我們頁(yè)面當中，這種強對比的配色結合細致的細節刻畫(huà)，讓整個(gè)頁(yè)面看起來(lái)銳利又富有質(zhì)感。設計師將明亮的色彩運用到最關(guān)鍵的信息上，讓用戶(hù)更容易注意到它們。
14、采用形象化的插畫(huà)
插畫(huà)總能以更加視覺(jué)化的方式來(lái)吸引用戶(hù)的注意力，尤其是當插畫(huà)足夠風(fēng)格化、個(gè)性化的時(shí)候。Legwork Studio 的關(guān)于我們頁(yè)面中，加入了狼頭人插畫(huà)，配合手寫(xiě)字體，營(yíng)造出了一種個(gè)性化的氛圍。
15、使用簡(jiǎn)約的圖形
Giampiero Bodini 的關(guān)于我們頁(yè)面并沒(méi)有使用復雜的設計技巧，而是在素描的繁復背景上，放上一個(gè)簡(jiǎn)單的矩形，將聯(lián)系方式與相關(guān)信息置于其中。繁復和簡(jiǎn)單，手繪和圖形，形成了鮮明的對比。
16、借助表單來(lái)溝通
溝通是相互，你可以發(fā)信息給網(wǎng)站，也可以留下聯(lián)系方式，讓網(wǎng)站的運營(yíng)者給你發(fā)信息。QED Group 直接在聯(lián)系我們頁(yè)面中留下一個(gè)表單，你可以通過(guò)這個(gè)表單留下聯(lián)系方式。
17、使用單色配色
簡(jiǎn)單優(yōu)雅和易讀是 Joseph A Avoue 的網(wǎng)站聯(lián)系我們頁(yè)面的設計風(fēng)格，沒(méi)有華麗的設計，也沒(méi)有花哨的功能，一個(gè)纖細的環(huán)，中間是最基本的聯(lián)系信息，就是這么直接。
18、幽默
幽默的設計師不會(huì )放過(guò)任何一個(gè)搞怪的機會(huì )，Bio-Bak 的設計師即使是在聯(lián)系我們頁(yè)面當中也會(huì )嘩眾取寵一把。涂鴉字體和俏皮的文案讓人忍俊不禁，你能夠從每一個(gè)細節感受到這個(gè)設計師的幽默細胞。
19、填寫(xiě)表單
Anakin 的關(guān)于我們頁(yè)面同樣是讓用戶(hù)填寫(xiě)聯(lián)系信息，不過(guò)在表單的設計上更加獨特，并沒(méi)有專(zhuān)門(mén)的表單，而是使用占位符提示用戶(hù)各個(gè)位置需要填寫(xiě)的內容，貼心、直覺(jué)，也非常走心。
20、個(gè)性化的辦公地點(diǎn)展示
和第二個(gè)案例類(lèi)似，CPB集團在全球各地都有辦公室，但是在設計的樣式上也更加獨特，各地辦公室的內容和個(gè)性化的背景融為一體，信息得到了整合，展現方式也個(gè)性十足。
21、介紹一下業(yè)務(wù)
在關(guān)于我們頁(yè)面當中介紹自己并不稀奇，不過(guò)除此之外可以做的還有很多，比如介紹一下自家的業(yè)務(wù)，展示一下自家的品牌，吸引用戶(hù)來(lái)聊聊也是很不錯的手段。Hello Monday 的關(guān)于我們頁(yè)面就是這么做的。
22、視頻背景
在網(wǎng)站里面添加視頻背景已經(jīng)是一種非常流行的手段了，而作為電影制作工作室而存在的Moodboard 在關(guān)于我們頁(yè)面中使用視頻背景不僅符合他們團隊的工作性質(zhì)，而且讓整個(gè)關(guān)于我們頁(yè)面更加鮮活了。
23、使用柵格布局
要設計結構化的頁(yè)面，柵格總是你最好的朋友。Urban Influence 的關(guān)于我們頁(yè)面使用柵格來(lái)組織整個(gè)頁(yè)面的信息，需要展示的內容，讓用戶(hù)輸入的部分，裝飾性的部分和展示用的地圖，都界限分明地分布在頁(yè)面上。
24、讓界面更加友好
如果讓界面更加友好，設計師要做的工作并不少。清晰而易讀的界面設計是最基本的，信息要能夠清晰的傳遞出來(lái)，沒(méi)有侵略性的配色，讓人感到熟悉、親切的呈現方式，易于操作的交互方式，這都是設計師要做好的地方。
25、分步引導
取得聯(lián)系包含著(zhù)一系列的操作，如果將整個(gè)交互過(guò)程分割成為若干步驟，一步一步引導用戶(hù)來(lái)操作，加入動(dòng)效和微交互，這絕對是一種不一樣的體驗。
26、增加聯(lián)系人快捷方式
團隊中負責不同部分的負責人通常不一樣，用戶(hù)打開(kāi)聯(lián)系我們頁(yè)面通常有著(zhù)明確的目標，如何將FAQ部分加入其中，并且添加特定的聯(lián)系人的聯(lián)系方式，讓用戶(hù)可以更加直接地同不同的負責人進(jìn)行溝通。
27、同網(wǎng)站其他部分整合到一起
Robby Leonardi 的網(wǎng)站似乎被設計成一個(gè)扁平風(fēng)的電腦游戲，當你瀏覽頁(yè)面的時(shí)候，會(huì )隨著(zhù)主角去不同的頁(yè)面，做不同的事情，而去關(guān)于我們頁(yè)面也是其中的一個(gè)“場(chǎng)景”。這是一種整合頁(yè)面的方式，值得學(xué)習。
28、團隊合影
許多網(wǎng)站背后都是一整個(gè)開(kāi)發(fā)和設計團隊在運作，用團隊成員合影作為關(guān)于我們頁(yè)面的背景圖也是非常合理且有個(gè)性的做法。
29、使用留白
通常留白能強化整個(gè)頁(yè)面的空間感和結構感，而B(niǎo)eta Tataki 在關(guān)于我們頁(yè)面就放置了一個(gè)設計感十足了電話(huà)，通過(guò)留白強化了聯(lián)系方式等內容的存在感。
30、活用字體排版
精心設計的字體排版不僅具有裝飾性，還可以承載一定的內容。Pauline Osmont 的聯(lián)系我們頁(yè)面使用了黑色、銀色和金色來(lái)構建吸引人的字體排版主視覺(jué)設計。當你向下滾動(dòng)頁(yè)面的時(shí)候，能看到易于閱讀排版到位的表單。
31、親手展示
這也是近幾年比較常見(jiàn)的一種內容展現方式，設計師親手舉起展板來(lái)展示設計作品。如果用在聯(lián)系我們頁(yè)面中，這種設計師手法也是相當的應景呢。就像Mark Jaworkski 的這個(gè)頁(yè)面，設計師的技能、介紹還有留言用的表單都整齊地展示在這塊被平舉的白板上。
32、列舉社交媒體聯(lián)系方式
現在哪個(gè)網(wǎng)站沒(méi)幾個(gè)社交媒體帳號呢?在關(guān)于我們的頁(yè)面當中將自家網(wǎng)站的各個(gè)社交媒體的鏈接都貼出來(lái)，對于許多用戶(hù)來(lái)說(shuō)反而更加便于聯(lián)系。
33、借用傳統的溝通方式
復古的樣式是不錯的選擇，但是使用傳統的聯(lián)系方式來(lái)設計，似乎更加走心也更有意思。Lionway 的聯(lián)系我們頁(yè)面就設計成了明信片的形式，還有一些固定的信息干脆就列舉在一個(gè)打印賬單上。
34、俏皮的文案
文案的設計也是聯(lián)系我們頁(yè)面中重要的部分，親切、幽默的文案設計會(huì )讓用戶(hù)感到親近，但是同樣的，俏皮的、機智的文案也一樣會(huì )讓用戶(hù)難忘。
35、展現個(gè)性
設計工作室 Resn 的聯(lián)系我們頁(yè)面設計絕對是這組案例中最有個(gè)性的頁(yè)面之一，充滿(mǎn)80年代風(fēng)情的設計元素，和帶著(zhù)動(dòng)物頭套的團隊成員圖片組成了頁(yè)面的主體。
36、運用信息圖
信息圖是近幾年一直處于上升階段的設計手法，如果有合適的展示內容，在關(guān)于我們頁(yè)面中使用信息圖也是相當不錯的選擇。Quicksprout 的關(guān)于我們頁(yè)面就使用了信息圖來(lái)呈現內容，清晰易讀，而且準確到位。
37、動(dòng)畫(huà)和卡通
在聯(lián)系我們頁(yè)面中使用卡通和動(dòng)漫式的形象來(lái)呈現設計師和設計團隊是相當常見(jiàn)也相當有效的手段，Melonfree 的關(guān)于我們頁(yè)面就將設計師和開(kāi)發(fā)者的卡通形象擺了出來(lái)。
38、使用半透明的圖形
人的眼睛總會(huì )有意識地去識別想要石碑的內容，所以即使的半透明的元素加載在一起，也不會(huì )特別嚴重地影響閱讀體驗。Indofolio 的頁(yè)面設就充分運用半透明的元素，將核心的聯(lián)系方式放在半透明的矩形上，透過(guò)圖形用戶(hù)依然能看到背景的細節，但是又不會(huì )看不清關(guān)鍵的聯(lián)系方式。
39、手繪效果
手繪的聯(lián)系我們頁(yè)面，尤其是那些畫(huà)的還相當養眼的頁(yè)面，總能讓用戶(hù)感受到設計者的貼心。Mario Petrone 的這個(gè)頁(yè)面設計就相當的俏皮有趣。
40、僅用一個(gè)下拉框
Spokes Pedicabs 的聯(lián)系我們頁(yè)面其實(shí)談不上一個(gè)完整的頁(yè)面，而用一個(gè)下拉框代替，當你點(diǎn)擊導航了中的鏈接，會(huì )出現這個(gè)醒目的橙色下拉框。
網(wǎng)頁(yè)設計色系案例分析
橙色又稱(chēng)之為橙黃或者是橘色，它的穿透力僅次于紅色，色感較紅色更暖。在網(wǎng)頁(yè)設計中橙色是十分活潑的色彩，給人以華貴而溫暖、興奮而熱烈、歡樂(lè )與活力的感覺(jué)，也是令人振奮的顏色。
橙色在網(wǎng)頁(yè)中的使用范圍非常廣泛，可以通過(guò)變換色調營(yíng)造出不同分氣氛，不僅僅能表現出青春活力，也能達到一個(gè)穩重的效果。橙色的波長(cháng)居于紅和黃之間，具有健康、富有活力、勇敢自由等象征意義，為了讓大家對橙色有更好的理解，下面分別對不同類(lèi)型網(wǎng)頁(yè)進(jìn)行分析。
一.食品飲食類(lèi)網(wǎng)頁(yè)設計案例分析
推薦案例：橙色+黃色+深橙色
整個(gè)頁(yè)面以橙色為主，通過(guò)不同明度和純度的“黃”進(jìn)行調和，頁(yè)面非常融洽而不顯單調。很好的突出了的圖片，食品圖片色調也是相近的，故不會(huì )非常的突兀。而利用白色將網(wǎng)頁(yè)分層，有層次感。
二.娛樂(lè )類(lèi)網(wǎng)頁(yè)案例分析
推薦案例：深橙色+土黃色+黃色
整個(gè)頁(yè)面是利用深橙和淺黃色的搭配來(lái)展現的，使頁(yè)面看起來(lái)更加的溫暖，深色的鋪墊，黃色的文字，達到一種突出而不突兀的視覺(jué)效果，賦予了網(wǎng)站生命力。
三.電子商務(wù)網(wǎng)站案例分析
推薦案例：橙色+卡其色+綠色
這一個(gè)案例使用的顏色相對較多，而橙色的導航輔佐明度較高的卡其色，不會(huì )顯得非常凌亂，反而更加有特色，很活潑。加上利用一些綠色的按鈕來(lái)點(diǎn)綴頁(yè)面，頁(yè)面就顯得不那么單調，有萬(wàn)橙之中一點(diǎn)綠的視覺(jué)效果。
四.科技發(fā)展機構網(wǎng)站案例分析
頁(yè)面用的色彩相對較雜，但讓人感覺(jué)亂中有序。大家可以注意到，頁(yè)面都是采用深紅色作為文字，而橙色出現在紅色文字的附近，例如頂部的橙底紅字，大標題紅色小標題橙色，這些元素就使頁(yè)面亂中有序。
總結：橙色運用的非常多，調整飽和度、純度都可以達到非常好的視覺(jué)效果，當然在視覺(jué)沖擊力的同時(shí)，可適當采用少許對比色調和緩和于視覺(jué)，從而削弱視覺(jué)的疲勞度。
【40個(gè)網(wǎng)頁(yè)設計優(yōu)秀案例】相關(guān)文章：
網(wǎng)頁(yè)設計案例分享:網(wǎng)頁(yè)專(zhuān)題設計技巧10-09
網(wǎng)頁(yè)設計色系案例分析08-30