个性宣言!40个优秀的关于我们页面网页设计案例(上) - 优设网 - UISDC

个性宣言!40个优秀的关于我们页面网页设计案例(上)

2016/01/12 19854评论区

contact-us-page-design-1-1

和网站访客进行沟通的方式有很多,但是最典型、最直接的还是通过关于我们页面来获取沟通方式。在网站设计越来越多样的今天,设计师和设计团队对于关于我们页面的设计也越来越重视,页面的每一个细节似乎都成了展示设计师个性和品牌特色的重要介质。

关于我们的页面设计并不难,但是要设计一个完美的版本并不容易。它通常取决于你的出发点,是要个性化的设计,还是品牌化的运作?是提供自己联系方式,还是获取用户的联系方式?下面的优秀案例会告诉你,优秀的关于我们页面要如何设计。

1、友好的界面

01.-Infinum-662x345

友好的联系人界面总会让人感到亲切的,如果它还具备一些功能性,并且易于阅读,用户会感觉更加舒适的。“What can we help you with”则可以引导用户去点击“加入我们”“聘用我们”以及参与邮件订阅。

2、展示全球各地办公室

02.-Tool-662x315

Tool 的关于我们页面中,设计师用醒目的字体标注出团队在洛杉矶、纽约和法国的办公室的地址和联系方式,点开关于我们页面的用户不就是想知道这些信息么?正确的联系方式,简单直接的设计,就是这么做的。

3、简化沟通流程

03.-Production-Locations-662x484

Productiong Location的联系我们页面同样采用了大胆而视觉化的页面设计,但是和其他的同类页面不同的是,它简化了沟通流程,把用户可能会关注的内容和需要沟通的具体部分都划分了一下,让不同需求的用户直接被引导到特定的页面和部分,从而达成简化和分流的目的。

4、头像和个性化的信息

04.-Bert-TImmermans-662x534

放上设计师和团队成员的图片,让用户认识你。最关键的并不是你的头像够不够漂亮,而是要让用户知道这个漂亮的网站背后是一位和你我一样真实而平凡的设计师,是他或者她努力设计之后的成果。头像可以让页面更加个性化,也能让它更加真实而亲近。

5、鼓励用户沟通

05.-Hello-Innovation-662x314

关于我们页面的核心设计目的通常是沟通,而Hello Innovation 的页面设计则充分贯彻这一思路:试图鼓励用户主动同网站进行沟通。用亲切而富有亲和力的设计,留下联系方式,从文案到留下邮箱的地址都在鼓励用户。聊一句,能有多难呢?

6、用图片来传递隐喻

06.-Design-Museum-662x482

设计博物馆中收藏了许多设计相关的藏品,而关于我们页面中的这个电话不仅是网站的藏品,而且作为一个重要的隐喻来向用户传递“沟通”的意象,这也算得上是一种设计上的“双关”了。

7、创造令人难忘的设计

07.-Molamil-662x311

古怪的设计和有趣的文案总能让人难忘,每天海量的信息摄入让人们只会记住最突出的那些。不过,古怪的设计不一定适合任何品牌任何网站,但是对于那些古灵精怪的网站而言,那些独树一帜的脑洞总能起到作用。

8、表现品牌的性格

08.-Boone-Selections-662x333

对于网站而言,在关于我们页面中将自家的品牌性格呈现出来自然是合理合适的。Boone Selections 就是这样优雅又专业地将品牌配色和相关设计元素融入关于我们页面的。作为一个专业的葡萄酒进口公司,Boone Selections 的关于我们页面用独特的排版和滚动式的页面设计,营造出独有的品牌气息。

9、展示联络方式

09.-This-Also-662x660

This Also 的关于我们页面设计可谓是可靠而到位了,页面地图标注出了公司地点也就算了,当你向下滚动页面的时候,还能看到详细地址的说明、沿线地铁的乘坐方式、沟通的电子邮件地址、电话,等等等等,不一而足。

10、给个提示

10.-Deux-Huit-Huit-662x651

网站 Deux Huit Huit 的关于我们页面并没有提供传统意义上的沟通方式,而是设计成了一个直观而简单的对话框。顶上“Say hello ☺”的对话框非常直接地提示用户,只要输入内容,网站的开发者就能看到了。

11、标明开门/工作时间

11.-Mugs-662x332

对于诸如餐厅、博物馆、商店等有具体营业时间的机构的官方网站,在关于我们页面当中标注店铺开门的时间、接受电话咨询的时间,可以让用户更加有效地接受服务。

12、使用醒目的字体

12.-Panache-662x332

Panache 的关于我们页面中标题字体采用了非常醒目的“Travaillons Ensemble”,这种字体更为轻巧,虽然独特但是具有极高的识别度。

13、使用大胆的配色方案

13.-Sponge-662x331

经典的黑白黄的配色方案被运用到Sponge 的关于我们页面当中,这种强对比的配色结合细致的细节刻画,让整个页面看起来锐利又富有质感。设计师将明亮的色彩运用到最关键的信息上,让用户更容易注意到它们。

14、采用形象化的插画

14.-Legwork-Studio-662x332

插画总能以更加视觉化的方式来吸引用户的注意力,尤其是当插画足够风格化、个性化的时候。Legwork Studio 的关于我们页面中,加入了狼头人插画,配合手写字体,营造出了一种个性化的氛围。

15、使用简约的图形

15.-Giampiero-Bodini-662x332

Giampiero Bodini 的关于我们页面并没有使用复杂的设计技巧,而是在素描的繁复背景上,放上一个简单的矩形,将联系方式与相关信息置于其中。繁复和简单,手绘和图形,形成了鲜明的对比。

16、借助表单来沟通

16.-Qed-Group-662x325

沟通是相互,你可以发信息给网站,也可以留下联系方式,让网站的运营者给你发信息。QED Group 直接在联系我们页面中留下一个表单,你可以通过这个表单留下联系方式。

17、使用单色配色

17.-Joseph-A-Avoue-662x314

简单优雅和易读是 Joseph A Avoue 的网站联系我们页面的设计风格,没有华丽的设计,也没有花哨的功能,一个纤细的环,中间是最基本的联系信息,就是这么直接。

18、幽默

18.-Bio-Bak-662x626

幽默的设计师不会放过任何一个搞怪的机会,Bio-Bak 的设计师即使是在联系我们页面当中也会哗众取宠一把。涂鸦字体和俏皮的文案让人忍俊不禁,你能够从每一个细节感受到这个设计师的幽默细胞。

19、填写表单

19.-Anakin-662x515

Anakin 的关于我们页面同样是让用户填写联系信息,不过在表单的设计上更加独特,并没有专门的表单,而是使用占位符提示用户各个位置需要填写的内容,贴心、直觉,也非常走心。

20、个性化的办公地点展示

20.-CPB-Group-662x319

和第二个案例类似,CPB集团在全球各地都有办公室,但是在设计的样式上也更加独特,各地办公室的内容和个性化的背景融为一体,信息得到了整合,展现方式也个性十足。

【优设人气超高的PS教程排行榜】

Top 1:效果超棒的极简风格海报!
《AI+PS新手教程!手把手教你打造简约现代的极简海报》

Top 2:给心爱的妹子画一个Q版头像!
《萌系PS教程!手把手教你打造Q版的个人头像》

Top 3:上帝说,要有光!
《PS高手教程!教你轻松打造效果美到爆的光照效果》

原文地址:designschool
优设译文:@陈子木

「子木说」

这几天最火的事情除开X播案,估计就是David Bowie的过世。这位在乐坛活跃了四十多年的英国音乐人,名字后面的音乐标签多的让人瞠目结舌,热爱摇滚的你不会不认识他的名字和音乐。这是一个大师相继离开的时代,但是即便要离开,宝爷也要先留下一张新专辑。97年的时候,林夕为他写了一首中文歌《刹那天地》,是黄耀明一句一句亲口教他唱的,值得你亲耳听一听。此刻回看歌曲中的那句“我祝福你,天地不过一刹那;我祝福你,一生一刹那”是如此的应景,也是如此的令人唏嘘。

有人说,也许是上帝他老人家最近换口味想听听华丽摇滚了,召唤宝爷去天堂继续摇滚继续燥。希望真的是如此。R.I.P.

uisdc-ad-wechat

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量108万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/contact-us-page-design-1

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 转场动效 设计师 优设大课堂 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 配色 素材下载 视觉设计 web前端开发 设计师专访 设计流程 AI教程 设计理论 用户体验设计 神器下载 字体下载 海报设计 设计趋势 psd下载 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 用户体验 酷站 PS教程 网页设计 经验分享

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里