网站排名优化网40个网页设计典范
在我们的页面设计上，实现基本设计并不复杂，但要打造一个极致版本则颇具挑战。这往往取决于你的设计初衷，是追求个性化的风格，还是品牌化的战略？是展示联系方式，还是收集用户信息？以下精选案例将揭示如何打造出色的“关于我们”页面设计。
1、亲切的界面
亲切的联系人界面总让人感到温馨，若再具备一定功能性和易读性，用户将倍感舒适。“我们如何能帮到您”的提示能引导用户点击“加入我们”“招聘我们”或订阅邮件。
2、全球办公室展示
在Tool的“关于我们”页面，设计师通过醒目字体标注了团队在洛杉矶、纽约和法国的办公地址及联系方式。用户点击页面即能获取这些信息，这种简洁直接的设计方式正是其成功之道。
3、简化沟通流程
Productiong Location的“联系我们”页面采用了大胆且视觉化的设计，但与同类页面不同的是，它简化了沟通流程，将用户可能关注的内容和具体沟通部分进行了划分，引导不同需求的用户直接访问特定页面和部分，实现了简化和分流。
4、头像与个性化信息
展示设计师和团队成员的图片，让用户认识你们。关键不在于头像是否漂亮，而在于让用户了解这个网站背后是一位真实的设计师，是他/她辛勤工作的成果。头像使页面更具个性，也更加亲切。
5、激发用户互动
“关于我们”页面的核心设计目的是沟通，而Hello Innovation的页面设计则完美贯彻了这一理念：鼓励用户主动与网站互动。通过亲切且具有亲和力的设计，留下联系方式，从文案到邮箱地址都在鼓励用户进行沟通。
6、图片传递隐喻
设计博物馆中收藏了许多设计相关藏品，而“关于我们”页面中的这个电话不仅是网站的藏品，还作为一个重要隐喻传递“沟通”的意象，这可算是一种设计上的“双关”。
7、打造难忘设计
独特的设计和有趣的文案总能让人印象深刻，每天接收的信息量庞大，人们只会记住最突出的。不过，古怪的设计并不适合所有品牌和网站，但对于那些独特、有趣的网站而言，独树一帜的创意总能起到作用。
8、展现品牌个性
在“关于我们”页面中展现品牌个性对于网站来说自然是合理的。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，那么你应该会喜欢接下来的案例，这些巧妙运用字体排版的优秀网站会再次扩充你的网页收藏夹。
-
V02 Group
雅致的文字排版悬浮在半空中，和背景融为一体，这种设计除了众所周知地提升格调之外，能明显地提升页面的深度。强对比的色彩搭配也是设计师独具匠心的体现，我想你已经发现了。
所用字体: Crimson Text, Futura
-
What is Your Future?
这个名为“What is your future”的网站同样设计精美，排版也颇为严谨。设计师很明显喜欢极简和扁平风，所用的字体Baron Neue又是极具表现力的样式，在黑色的背景之下极为醒目，使得整个页面都炫酷起来了。撇开排版技巧不说，这字体都值得来一发吧？
所用字体: Baron Neue, Georgia
-
Jacob Grubbe
复杂的网站都是一样的复杂，而简洁的网站却总能玩儿出不一样的风情。这个形同Windows蓝屏死机了一样的背景之上，用不同色彩的单一字体来呈现内容，而这个字体正是我们所熟知的“Android的灵魂”——Roboto。极简风，合理的选色，加上一个足够现代的字体，就可以输出一个有个性的页面。
所用字体: Roboto
-
Secret Resolutions
当今这个时代，个性即正义。这个网站的设计思路和上一个很接近，让色彩发声，用字体展现个性，这个网站用的字体名为Brandon Grotesque，虽然稍显怪异，但是搭配其他的元素之后，就显得极为独特了。这就是冒险的乐趣，改着改着，就成了一个独一无二的网站了，你觉得呢？
所用字体: Brandon Grotesque
-
Basics09
正如这个网站在标题介绍上所说，它旨在“提供用于基本的网站设计和印刷的字体（Benton Sans）”。坦率的讲，Benton Sans的确是一种非常朴素的非衬线体，稍微调整就能创造出层次感。网站和字体俱佳，挺不错的。
所用字体: Benton Sans
-
Degordian
Degordian这个网站充分运用了对比强烈的大背景和具有冲击力字体（Futura）的组合（这也是目前网站设计的一个大趋势），网站另一个值得称赞的地方是它用的正文字体：Merriweather。
所用字体: Futura, Merriweather
-
Brancott Estate
设计师将网站的排版和配图都做成黑板画的效果，质感非常不错。虽然无法确认网站的主要字体，但是用来搭配的字体可以确认是Georgia，两者组合看起来非常舒服。
所用字体: 未知, Georgia
-
Miles Calder
这也是一个极简风的网站，整个网站使用了一个字体：Founders Grotesk。有意思的是，设计师用这一字体的不同色彩、尺寸营造出了层次感。
所用字体: Founders Grotesk
-
Run for AJD
这是一个法语网站，从字体样式上来讲可读性确实很差，但是从风格和个性上来说，极为突出。
所用字体: Avenir Book
-
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在字体选择上颇具心得。在他们的情人节活动“Sweet Spot”上，设计师选用了Circular TT字体，这套完备的字体满足了不同位置对排版的要求，简约现代，变化多端。
字体应用：Circular TT
19. 51 North
51 North是一家位于荷兰的设计机构，网站设计采用了Minion W01和Tw Cen W01两套字体，既谨慎又对比鲜明，极具美感。
字体应用：Minion W01, Tw Cen W01
20. RelaisBlu
RelaisBlu是一家位于意大利的高端酒店，他们的网站使用了三种不同的字体进行排版设计。虽然通常超过两种不同的字体用于一个页面会让人感到混乱，但这个网站却让人眼前一亮，极具冲击力。
字体应用：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个高体验的优秀文字排版网站页面设计
更多设计知识，创意资讯，请关注思维网设计前沿
