薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

幾乎每個(gè)網(wǎng)站都有自己的Slogan或者說口號(hào),作為網(wǎng)站的定位和價(jià)值觀輸出的一部分,它們常常拿來作為網(wǎng)站歡迎訪客的問候用語,是網(wǎng)站首頁設(shè)計(jì)的重要組成部分,也是完善打開體驗(yàn)的重要手段。雖然我們更習(xí)慣使用圖片和視頻來強(qiáng)化網(wǎng)站視覺,但是用精心設(shè)計(jì)的短句和問候語會(huì)顯得更加親切也更富于儀式感,所傳遞出的信息也會(huì)更加清晰。在這種思路下,許多網(wǎng)站選擇只使用最簡(jiǎn)單的Hello,來同網(wǎng)站訪客進(jìn)行問候。今天,我們搜集了一系列網(wǎng)站來為你展現(xiàn)其他的設(shè)計(jì)師都是如何向網(wǎng)站訪客問候“你好”的。

這些網(wǎng)站大都傾向于營(yíng)造友好的氛圍,以優(yōu)雅而平易近人的姿態(tài)來傳遞情緒,這樣一來,即使是一個(gè)簡(jiǎn)單的 Hello 都可以承載設(shè)計(jì)師的拳拳善意。接下來,我們一同看看這些案例。

Pixies Agency

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

這類網(wǎng)站通常有著大氣的布局,就像Pixies Agency這樣。黑色的背景可以看到城市的天際線,白色的文字在映襯下顯得非常顯著,加粗的 Hello 傳遞出設(shè)計(jì)者的意圖,給人沉穩(wěn)而對(duì)等的感覺。整個(gè)網(wǎng)站仿佛自帶BGM。

Michael Villeneuve

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

和前一個(gè)案例不一樣,Michael Villeneuve 顯得更加優(yōu)雅細(xì)膩,雖然整體色調(diào)同樣采用了黑白對(duì)比。漂亮的圖標(biāo)、線條感十足的字體讓頁面充滿了現(xiàn)代感,尤其當(dāng)網(wǎng)站的語言采用優(yōu)雅的法語的時(shí)候,這種感覺更加明顯。

Kalexiko

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

Kalexiko 首頁中模糊的背景中可以看到辦公室的倒影和靠座在辦公椅上的人影,網(wǎng)站給人一種務(wù)實(shí)的感覺,工作中的人影同網(wǎng)站的“Hello”讓人不禁將兩者聯(lián)系在一起,讓訪客感受到更為強(qiáng)烈的互動(dòng)感。

Have You Met Janet

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

人物形象是讓網(wǎng)站的問候語顯得真實(shí)親切的重要著力點(diǎn)。Heve you met Janet 的網(wǎng)站的著陸頁干脆就將Janet 的形象直接擺放到首頁之上,當(dāng)你打開網(wǎng)站的時(shí)候,看著問候語不由得與網(wǎng)站產(chǎn)生真實(shí)的情感聯(lián)系。

Daniel Spatzek

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

Daniel Spatzek 的這個(gè)頁面將我們熟知的極簡(jiǎn)主義融入到作品展示當(dāng)中來,整體風(fēng)格簡(jiǎn)約又溫和,一個(gè)簡(jiǎn)單的“Hi”和圖標(biāo)放置在首頁中間,充滿了現(xiàn)代藝術(shù)感,向下滾動(dòng),可以看到更多的內(nèi)容。

About Marco

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

這是一個(gè)葡萄牙設(shè)計(jì)師的個(gè)人網(wǎng)站,所以網(wǎng)站首頁所采用的問候語是葡萄牙語 “Ola”。暗色背景下很明顯是設(shè)計(jì)師工作室的場(chǎng)景,柔和的白色和背景色很好的構(gòu)成對(duì)比,但又不顯得突兀。

CK

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

CK的網(wǎng)站在文案的選取上顯得更加正式,加上經(jīng)典的黑白對(duì)比、紅色的點(diǎn)綴,網(wǎng)站的整個(gè)配比顯得剛剛合適。

Elespacio

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

Elespacio 在網(wǎng)頁設(shè)計(jì)上更講究標(biāo)準(zhǔn)化,語言上也更加得體,配合著時(shí)尚的圖形元素,使得整個(gè)版面顯得不是那么單調(diào)。

Studio Up

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

Studio UP 是我們?cè)?jīng)推薦過好幾次的意大利網(wǎng)站,Ciao 是意大利語中的問候語,當(dāng)然,如果你切換到國(guó)際版的頁面,這個(gè)詞會(huì)換成Hello。網(wǎng)站的亮點(diǎn)是極簡(jiǎn)的設(shè)計(jì)風(fēng)格和亮騷的配色。

Jacob Grubbe

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

Jacob Grubbe 是一個(gè)交互性極強(qiáng)的在線作品展示網(wǎng)站,如果用戶需要看到更多則需要通過些許操作來發(fā)掘這些隱藏信息。當(dāng)你開始輸入的時(shí)候,網(wǎng)站會(huì)自動(dòng)的反饋給你信息,第一條信息就是一句問候語。這樣的設(shè)計(jì)很早就出現(xiàn)了,但是現(xiàn)在看來依然很時(shí)尚,也相當(dāng)有趣。

Ahoy

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

Ahoy的設(shè)計(jì)師很會(huì)把控目前的流行風(fēng)格,在網(wǎng)頁中加入了許多抓人眼球的動(dòng)態(tài)元素,非常規(guī)的問候語“Ahoy”則顯得與用戶關(guān)系親昵,更加走心。

Wearegoat

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

Wearegoat 的首頁設(shè)計(jì)干凈清爽,一系列歡迎語散落在頁面上使得整體顯得并不單調(diào)。這些不同的歡迎用語在一個(gè)相對(duì)寬松的環(huán)境中,傳達(dá)出不同的意思,并吸引用戶的注意力。

Akaru

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

問候語還有一定的引導(dǎo)作用,Akaru 的首頁設(shè)計(jì)就比較豐滿,其中黑色的Hello 很好地將用戶引導(dǎo)到網(wǎng)站內(nèi)容上來,設(shè)計(jì)者的目標(biāo)很明確,問候只是開始,關(guān)鍵是要用戶注意到Akaru 的描述上來。

Jean-Baptiste Calzia

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

和上一個(gè)案例相似,網(wǎng)站的設(shè)計(jì)者重點(diǎn)在于引導(dǎo)用戶注意到網(wǎng)站的內(nèi)容和設(shè)計(jì)師本身的角色,而問候語則居于次席,用來引導(dǎo)用戶關(guān)注主要內(nèi)容。

Boy-Coy

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

Boy-Coy 的頁面所包含的元素相當(dāng)多,通常這種情況下用戶的注意力在其中是很容易分散的,不過設(shè)計(jì)師巧妙地運(yùn)用配色和對(duì)比解決了這個(gè)問題,將社交媒體鏈接、吉祥物和那個(gè)巨大的Hello 突出地展現(xiàn)出來。

Green Splash

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

Green Splash 的頁面充滿了復(fù)古的氛圍,正在寫字的猩猩和蒸汽朋克風(fēng)的小孩兒盯著屏幕外的你,一個(gè)簡(jiǎn)單的Hello 讓這種怪異而有趣的氛圍彌漫開來。

Getgonz

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

設(shè)計(jì)師希望網(wǎng)站的訪客能夠充分注意到他的名字,這種情況下一個(gè)簡(jiǎn)單的自我介紹是最有效的。

Work

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

Work 這個(gè)網(wǎng)站當(dāng)中Banner圖是最吸引用戶注意力的,然后才是圖片下的Hello,所以它的作用更多地是營(yíng)造友好的氛圍。

Binalogue

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

Binalogue 的頁面將所有的問候語集中到一塊,設(shè)計(jì)師成功地借助雙色對(duì)比將需要用戶注意到的字眼從一堆Welcome和Hola中區(qū)分出來。

RWS&Z

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

RWS&Z 也是一個(gè)很典型的現(xiàn)代簡(jiǎn)約風(fēng)格的網(wǎng)站,從背景的選取到文案字體的選擇都很好地貼合了簡(jiǎn)約的特征。

結(jié)語

Hello 這個(gè)詞很簡(jiǎn)單,但卻是最有效的和用戶的溝通方式之一,因?yàn)樗挥腥饲槲叮?a href="http://m.hx168888.com/tag/%e6%83%85%e6%84%9f%e5%8c%96%e8%ae%be%e8%ae%a1" class="tag_a" target="_blank">情感化設(shè)計(jì)一種手段。一個(gè)簡(jiǎn)單的問候有時(shí)候會(huì)讓網(wǎng)站的瀏覽者情緒一下子好起來,也許它會(huì)是促成用戶主動(dòng)與你溝通的第一個(gè)契機(jī)。如何這種設(shè)計(jì)手法和你的網(wǎng)站屬性暗合,不妨試試。

【技多不壓身的設(shè)計(jì)師工資更高!】

  1. 平面設(shè)計(jì):《超贊!設(shè)計(jì)師完全自學(xué)指南》
  2. 交互設(shè)計(jì):《交互設(shè)計(jì)師修煉指南!教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》
  3. UI設(shè)計(jì):《超實(shí)用新手指南!零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)?》
  4. 前端開發(fā):《天貓高手來教你!零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)?》
  5. 摳圖技巧:《從菜鳥到高手!PHOTOSHOP摳圖全方位攻略》
  6. 配色方案:《色彩搭配速成!3個(gè)實(shí)用方法幫你全面搞定配色》
  7. DPI指南:《基礎(chǔ)知識(shí)學(xué)起來!為設(shè)計(jì)師量身打造的DPI指南》
  8. 交互設(shè)計(jì)自學(xué)路徑圖:《零基礎(chǔ)入門!給非科班生的自學(xué)路徑圖之交互設(shè)計(jì)篇》

原文地址:designmodo
原文作者:Nataly Birch
優(yōu)設(shè)譯文:@陳子木

薩瓦迪卡!一組令人感到親切的Hello主題網(wǎng)站設(shè)計(jì)

【優(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ì)微博:擁有粉絲量108萬的人氣微博@優(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

收藏
點(diǎn)贊

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。