网站排名优化网40个网页设计卓越典范
在关于我们页面的构思上，尽管并非难事，但要打造一个无懈可击的版本却非易事。这往往关乎你的起点，是追求个性化的设计，还是走品牌化的路线？是展示你的联系方式，还是收集用户的联络信息？以下精选案例将揭示，一个出色的关于我们页面该如何布局。
1、亲切的界面
亲切的联络界面总让人倍感温馨，若它兼具实用性和易读性，用户将倍感舒适。“我们能为您提供什么帮助？”这样的引导性问题，可以引导用户点击“加入我们”“招聘我们”以及订阅邮件。
2、展示全球办公地点
在Tool的关于我们页面中，设计师巧妙地用醒目字体标注了团队在洛杉矶、纽约和法国的办公地址及联系方式。用户点击关于我们页面，不就是要了解这些信息吗？正确的联系方式，简洁直接的设计，正是如此。
3、简化沟通流程
Productiong Location的联系我们页面同样采用了大胆而视觉化的设计，但与其他同类页面不同的是，它简化了沟通流程，将用户可能关注的内容和需要沟通的具体部分划分清楚，引导不同需求的用户直接跳转到特定页面和部分，从而实现简化和分流。
4、头像与个性化信息
展示设计师和团队成员的照片，让用户认识你们。关键不在于头像是否漂亮，而在于让用户知道这个网站背后是一位真实平凡的设计师，是他或她的努力成果。头像可以让页面更具个性化，也更加真实亲切。
5、激励用户沟通
关于我们页面的核心设计目的通常是沟通，而Hello Innovation的页面设计则充分体现了这一理念：鼓励用户主动与网站沟通。通过亲切而富有亲和力的设计，留下联系方式，从文案到邮箱地址，都在激励用户。交流一句，又有多难呢？
6、图片传递隐喻
设计博物馆中收藏了许多设计相关藏品，而关于我们页面中的这个电话不仅是网站的藏品，还作为一个重要的隐喻，向用户传递“沟通”的意象，这也可谓是一种设计上的“双关”。
7、打造难忘设计
独特的设计和有趣的文案总能让人印象深刻，在信息爆炸的时代，人们只会记住最突出的那些。然而，独特的设计并非适合所有品牌和网站，但对于那些独具匠心的网站而言，那些独树一帜的创意总能发挥作用。
8、展现品牌个性
对于网站而言，在关于我们页面中展现自家品牌个性是合情合理的。Boone Selections就是这样优雅专业地将品牌配色和相关设计元素融入关于我们页面，作为一个专业的葡萄酒进口公司，Boone Selections的关于我们页面以独特的排版和滚动式设计，营造出独有的品牌气息。
9、展示联系方式
This Also的关于我们页面设计可靠而周到，页面地图标注了公司地点，当你向下滚动页面时，还能看到详细地址说明、地铁乘坐方式、沟通的电子邮件地址、电话等，应有尽有。
10、提供提示
网站Deux Huit Huit的关于我们页面并未提供传统沟通方式，而是设计成一个直观简单的对话框。顶部“Say hello”的对话框直接提示用户，只需输入内容，网站开发者即可看到。
11、标注营业时间
对于有具体营业时间的机构，如餐厅、博物馆、商店等，在官方网站的关于我们页面中标注营业时间和电话咨询时间，可以让用户更有效地接受服务。
12、运用醒目字体
Panache的关于我们页面中标题字体采用了醒目的“Travaillons Ensemble”，这种字体轻盈独特，具有较高的识别度。
13、运用大胆配色方案
经典的黑白黄配色方案被运用到Sponge的关于我们页面中，这种强对比的配色结合细致的细节刻画，使整个页面看起来锐利而富有质感。设计师将明亮色彩运用到关键信息上，让用户更容易注意到。
14、采用形象插画
插画总能以更加视觉化的方式吸引用户注意力，尤其是当插画风格化、个性化时。Legwork Studio的关于我们页面中，加入了狼头人插画，配合手写字体，营造出一种个性化的氛围。
15、运用简约图形
Giampiero Bodini的关于我们页面并未使用复杂设计技巧，而是在素描繁复背景上，放置一个简单矩形，将联系方式与相关信息置于其中。繁复与简单、手绘与图形，形成鲜明对比。
16、借助表单沟通
沟通是相互的，你可以给网站发信息，也可以留下联系方式，让网站运营者给你发信息。QED Group在联系我们页面中留下一个表单，你可以通过这个表单留下联系方式。
17、运用单色配色
简单优雅、易读是Joseph A Avoue网站联系我们页面的设计风格，没有华丽的设计，也没有花哨的功能，一个纤细的环，中间是最基本的联系信息，就是这么直接。
18、幽默
幽默的设计师不会放过任何一个搞怪的机会，Bio-Bak的设计师即使在联系我们页面中也会哗众取宠。涂鸦字体和俏皮的文案让人忍俊不禁，从每一个细节都能感受到这个设计师的幽默细胞。
19、填写表单
Anakin的关于我们页面同样让用户填写联系信息，但在表单设计上更加独特，没有专门的表单，而是使用占位符提示用户各个位置需要填写的内容，贴心、直观，也非常走心。
Anakin的“关于我们”页面同样让访客填写联络信息，不过在表单布局上更为独到，并非设有固定表单，而是采用占位符指引访客填写所需内容，更显贴心、直观，亦充满心意。
20、定制化的办公场所呈现
与第二个案例相似，CPB集团在全球多处设有办公室，但在设计风格上更为独特，各办公室的内容与个性化的背景完美融合，信息得以整合，呈现方式也颇具个性。
21、介绍业务
在“关于我们”页面中介绍自己并不稀奇，但除此之外还可以做得更多，例如介绍自家业务，展示品牌形象，吸引访客交流也是一种不错的选择。Hello Monday的“关于我们”页面正是如此。
22、视频背景
在网站中添加视频背景已成为一种流行趋势，而作为电影制作工作室的Moodboard，在“关于我们”页面中使用视频背景不仅符合其团队性质，而且使整个页面更具活力。
23、运用栅格布局
设计结构化页面时，栅格总是一个好帮手。Urban Influence的“关于我们”页面利用栅格组织整个页面信息，使需要展示的内容、访客输入部分、装饰性部分和展示地图等界限分明地分布在页面上。
24、打造友好界面
若要打造友好界面，设计师需付出诸多努力。清晰易读的界面设计是最基本的，信息需清晰传递，配色无侵略性，呈现方式亲切、易于操作，这些都是设计师需关注的地方。
25、分步引导
取得联系涉及一系列操作，若将整个交互过程划分为若干步骤，逐步引导访客操作，并加入动效和微交互，这将带来不一样的体验。
26、添加联系人快捷方式
团队中负责不同部分的负责人通常不同，访客打开“联系我们”页面通常有明确目标，如何将FAQ部分融入其中，并添加特定联系人联系方式，使访客能更直接地与不同负责人沟通。
27、与网站其他部分整合
Robby Leonardi的网站设计成扁平化风格的电脑游戏，浏览页面时，访客会跟随主角进入不同页面，完成不同任务，而“关于我们”页面也是其中一环。这是一种整合页面的方式，值得学习。
28、团队合影
许多网站背后都有整个开发和设计团队在运作，用团队成员合影作为“关于我们”页面的背景图既合理又具个性。
29、运用留白
留白通常能强化页面的空间感和结构感，Beta Tataki在“关于我们”页面放置了一个设计感十足的电话，通过留白强化了联系方式等内容的存在感。
30、灵活运用字体排版
精心设计的字体排版不仅具有装饰性，还能承载一定内容。Pauline Osmont的“联系我们”页面使用黑色、银色和金色构建吸引人的字体排版主视觉设计，页面滚动时，访客能看到易于阅读且排版到位的表单。
31、亲自展示
这也是近几年较常见的一种内容展现方式，设计师亲自举起展板展示设计作品。若用于“联系我们”页面，这种设计师手法也十分应景。就像Mark Jaworkski的页面，设计师的技能、介绍和留言表单都整齐地展示在平举的白板上。
32、列举社交媒体联系方式
如今哪个网站没有几个社交媒体账号呢？在“关于我们”页面中列出自家网站的社交媒体链接，对许多访客来说，更便于联系。
33、借鉴传统沟通方式
复古风格是不错的选择，但使用传统联系方式设计似乎更具心意和趣味。Lionway的“联系我们”页面设计成明信片形式，一些固定信息直接列举在打印账单上。
34、幽默文案
文案设计也是“联系我们”页面中的重要部分，亲切、幽默的文案设计会让访客感到亲近，而俏皮、机智的文案同样会让访客难忘。
35、彰显个性
设计工作室Resn的“联系我们”页面设计极具个性，充满80年代风情的设计元素，以及带着动物头套的团队成员图片成为页面主体。
36、运用信息图
信息图是近几年一直上升的设计手法，若展示内容合适，在“关于我们”页面中使用信息图也是不错的选择。Quicksprout的“关于我们”页面就使用了信息图呈现内容，清晰易读，且准确到位。
37、卡通和动漫形象
在“联系我们”页面中使用卡通和动漫形象呈现设计师和设计团队相当常见且有效。Melonfree的“联系我们”页面就展示了设计师和开发者的卡通形象。
38、运用半透明图形
人的眼睛会自动识别想要关注的内容，所以即使半透明元素叠加在一起，也不会特别影响阅读体验。Indofolio的页面设计充分运用半透明元素，将核心联系方式放在半透明矩形上，透过图形，访客依然能看到背景细节，但又不至于看不清关键联系方式。
39、手绘效果
手绘的“联系我们”页面，尤其是那些绘制得相当精美的页面，总能让访客感受到设计者的贴心。Mario Petrone的页面设计就相当俏皮有趣。
40、仅用一个下拉框
Spokes Pedicabs的“联系我们”页面其实谈不上一个完整的页面，而是用一个下拉框代替。点击导航中的链接，会出现这个醒目的橙色下拉框。
网页设计色系案例分析
橙色又称橙黄或橘色，其穿透力仅次于红色，色感比红色更暖。在网页设计中，橙色十分活泼，给人以华贵而温暖、兴奋而热烈、欢乐与活力的感觉，也是令人振奋的颜色。
橙黄又称作橙黄或橘黄，其穿透力仅略逊于红色，色感相较红色更为温暖。在网页设计中，橙色是一种充满活力的色彩，给人以尊贵而温馨、激情而热烈、欢快与活力的感受，亦为一种令人振奋的色调。
橙黄在网页中的应用十分广泛，通过调整色调可以营造出不同的氛围，不仅能够展现出青春的活力，还能达到稳重的效果。橙黄的波长介于红黄之间，寓意着健康、充满活力、勇敢自由等象征意义，为了让大家更好地理解橙黄，以下分别对不同类型的网页进行分析。
一.食品饮食类网页设计案例分析
推荐案例：橙黄+黄+深橙黄
整个页面以橙黄为主，通过不同明度和纯度的“黄”进行调和，页面和谐而不单调。很好地突出了图片，食品图片色调也与之一致，故不会显得突兀。而利用白色将网页分层，具有层次感。
二.娱乐类网页案例分析
推荐案例：深橙黄+土黄+黄
整个页面是利用深橙黄和浅黄色的搭配来呈现的，使页面看起来更加温馨，深色的底色，黄色的文字，达到一种突出而不突兀的视觉效果，赋予了网站生命力。
三.电子商务网站案例分析
推荐案例：橙黄+卡其色+绿
这个案例使用的颜色相对较多，而橙黄的导航辅佐明度较高的卡其色，不会显得杂乱，反而更有特色，十分活泼。加上利用一些绿色的按钮来点缀页面，页面就显得不那么单调，呈现出“万绿丛中一点红”的视觉效果。
四.科技发展机构网站案例分析
页面用的色彩相对较杂，但给人一种乱中有序的感觉。大家可以注意到，页面都是采用深红色作为文字，而橙黄出现在红色文字的附近，例如顶部的橙底红字，大标题红色小标题橙黄，这些元素就使页面乱中有序。
总结：橙黄运用得非常广泛，调整饱和度、纯度都可以达到非常好的视觉效果，当然在视觉冲击力的同时，可适当采用少许对比色调和缓和于视觉，从而减轻视觉的疲劳度。
25个高体验的优秀文字排版网站页面设计
虽然排版是网页设计中极为重要的组成部分，但是绝大多数的网站并未在排版上做过专门的设计和调整。
事实上，在我看来我们日常访问的许多网站在排版设计上并无亮点，这也是为什么，当我们发现这些在排版设计上用心雕琢的网站的时候，会由衷地感受到喜悦和别样的幸福感。
如果你厌倦了无处不在的宋体、雅黑、Arial和Helvetica，那么你应该会喜欢接下来的案例，这些巧妙运用字体排版的优秀网站会再次扩充你的网页收藏夹。
1. V02 Group
雅致的文字排版悬浮在半空中，和背景融为一体，这种设计除了众所周知地提升逼格之外，能明显地提升页面的深度。强对比的色彩搭配也是设计师独具匠心的体现，我想你已经发现了。
所用字体: Crimson Text, Futura
2. What is Your Future?
这个名为“What is your future”的网站同样设计精美，排版也颇为严谨。设计师很明显喜欢极简和扁平风，所用的字体Baron Neue又是极具表现力的样式，在黑色的背景之下极为醒目，使得整个页面都炫酷起来了。撇开排版技巧不说，这字体都值得来一发吧？
所用字体: Baron Neue, Georgia
3. Jacob Grubbe
复杂的网站都是一样的复杂，而简洁的网站却总能玩出不一样的风情。这个形同Windows蓝屏死机了一样的背景之上，用不同色彩的单一字体来呈现内容，而这个字体正是我们所熟知的“Android的灵魂”——Roboto。极简风，合理的选色，加上一个足够现代的字体，就可以输出一个有个性的页面。
所用字体: Roboto
4. Secret Resolutions
当今这个时代，个性即正义。这个网站的设计思路和上一个很接近，让色彩发声，用字体展现个性，这个网站用的字体名为Brandon Grotesque，虽然稍显怪异，但是搭配其他的元素之后，就显得极为独特了。这就是冒险的乐趣，改着改着，就成了一个独一无二的网站了，你觉得呢？
所用字体: Brandon Grotesque
5. Basics09
正如同这个网站在标题介绍上所说，它旨在“提供用于基本的网站设计和印刷的字体（Benton Sans）”。坦率的讲，Benton Sans的确是一种非常朴素的非衬线体，稍微调整就能创造出层次感。网站和字体俱佳，挺不错的。
所用字体: Benton Sans
6. Degordian
Degordian这个网站充分运用了对比强烈的大背景和具有冲击力字体（Futura）的组合（这也是目前网站设计的一个大趋势），网站另一个值得称赞的地方是它用的正文字体：Merriweather。
所用字体: Futura, Merriweather
7. Brancott Estate
设计师将网站的排版和配图都做成黑板画的效果，质感非常不错。虽然无法确认网站的主要字体，但是用来搭配的字体可以确认是Georgia，两者组合看起来非常舒服。
所用字体:未知, Georgia
8. Miles Calder
这也是一个极简风的网站，整个网站使用了一个字体：Founders Grotesk。有意思的是，设计师用这一字体的不同色彩、尺寸营造出了层次感。
所用字体: Founders Grotesk
9. Run for AJD
这是一个法语网站，从字体样式上来讲可读性确实很差，但是从风格和个性上来说，极为突出。
所用字体: Avenir Book
10. SendAMessage.to
只需几个步骤，你就可以借助这个网站给朋友和亲人发送个性化的信息。在网站设计上，设计师同样使用了单一字体用作网站排版。Proxima Nova字体的大尺寸看起来非常漂亮。
只需数步，你便可以利用此网站向亲友传达专属信息。在设计上，设计师同样采纳了统一字体进行网站排版。Proxima Nova字体的大号字体观感极佳。
字体选用：Proxima Nova
11. Amazee Labs
Amazee Labs的网站似乎采用了自创字体，其设计灵感主要来源于Source Sans Pro和Museo。这两种字体和谐地融合在一起，与色彩的搭配排版也相当美观。
字体选用：Source Sans Pro, Museo
12. Oudolf
与之前的Jacob Grubbe网站类似，Oudolf网站的设计几乎仅围绕排版展开。在这里，排版设计与图片巧妙地结合在一起。
所用字体：Mason Neue Book, Univers Standard
13. I Am Baaz
此网站主要运用了两种字体：Verlag Book和Acrom Extra Bold。设计师采用了时下流行的视频背景图，视频背景与前景美观的字体组合起来仿佛一个可交互的动态海报，非常受欢迎。
字体选用：Verlag Book, Acrom Extra Bold
14. FS Millbank
作为一个字体的宣传网站，低调的排版设计几乎是一定会出现的。与许多优秀的前辈一样，它旨在默默无闻地存在，成为一个“路人”一样的字体——美观，现代，可靠，耐看。
字体选用：FS Millbank
15. Studio Lovelock
过去一年里，Futura PT似乎成为了用户增长最快的字体，这个Studio Lovelock网站干脆全站都使用了这个。尽管如此，设计师巧妙地将不同字重不同尺寸的Futura PT用于网站的不同地方，依然多变，依然出色。
所用：Futura PT
16. Adoratorio
玩弄色彩很容易玩出花样，虽然有时候看起来略显奇怪，但是与富有表现力的字体搭配，反而会成为网站的亮点。Montserrat和Courier New都不是以有趣好玩为卖点的字体，但是在这个网站就显得特别突出。
所用字体：Montserrat, Courier New
17. The Pattern Library
说起这个网站几乎没怎么用到排版设计，但是它的“Download Now”按钮之处巧妙地使用了MostraNuova字体，在这个地方几乎是绝配。好字体有时候确实能成就一个好设计。再次不得不推荐一下国产iOS记事应用“小记”，真心是字体选的好，逼格就爆表啊。
所用字体：MostraNuova
18. Spotify. Sweet Spot
作为一个知名音乐类服务，Spotify在字体选用上还是颇有一套的。Spotify的设计师在他们的情人节活动“Sweet Spot”上选用了Circular TT字体，这套完备的字体应对了不同位置对排版的要求，简约现代，又变化多端。
所用字体：Circular TT
19. 51 North
51 North是一家位于荷兰的设计机构，网站设计采用了Minion W01和Tw Cen W01两套字体，谨慎，但对比明显，非常美观。
所用字体：Minion W01, Tw Cen W01
20. RelaisBlu
RelaisBlu是一家地处意大利的高端酒店，他们的这个网站使用了三种不同的字体进行排版设计。通常超过2种不同的字体用于一个页面会让人觉得混乱，但这个网站不会，反而看起来颇具冲击力。
所用字体：Geosans, Fanwood, Theano
21. April Studio
这个网站所用的字体你们肯定熟悉，这就是iOS7之后的标配字体：Helvetica Neue。在国外它已经有点被滥用的趋势了，但这也正好反映了这一字体的强大兼容性和出色的表现力。
所用字体：Helvetica Neue
22. EMyth
EMyth是一个简单但接地气的网站，这主要还是得益于排版设计所用的两大字体：Museo Slab和Proxima Nova。
所用字体：Museo Slab, Proxima Nova
23. Melanie DaVeid
左右对称的网站越来越多，这个网站除了左侧的标题之外，正文部分仅用了一种字体：Proxima Nova。正文部分，设计师通过不同字重的对比而呈现出网站的层次（实际上我们也经常这样做），少许自定义的字体则赋予了网站以个性。
所用字体：Proxima Nova,自定义字体
24. Formlets
虽然Formlets家的产品迟迟没有突出，但他们的网站还是非常引人注目的。个性化的脸谱插画和现代感十足的字体搭配在一起，呈现出同类企业所不具备的个性和气质。DIN和Roboto谁不知道呢？但是要作出这样的网站，只能说功夫在诗外了。
所用字体：DIN Rounded, Roboto
25. Nicholas Bussiere
一个字体打天下，好像这真是许多欧美设计师的选择啊。设计师在整个网站只使用了Apercu字体，为了整站清爽的气质，也仅仅使用了Light和regular两种粗细，层次分明而清晰，有对比但不强烈。
所用字体：Apercu
25个高体验的优秀文字排版网站页面设计
更多设计知识，创意资讯，请关注思维网设计前沿
