文档文库
手机版
投诉建议
热门搜索:
心得体会
演讲稿
思想汇报
首页
心得体会
学习心得体会
培训心得体会
军训心得体会
社会实践
作风建设
工作心得体会
教育心得体会
演讲稿
演讲稿格式
演讲稿范文
竞聘演讲稿
师德演讲稿
三分钟演讲稿
思想汇报
思想汇报范文
转正思想汇报
大学生思想汇报
季度思想汇报
教师思想汇报
工作计划
工作计划格式
工作计划开头
工作计划结尾
总结与计划
工作计划模板
工作总结
年终工作总结
年度工作总结
个人工作总结
实习报告
实习报告范文
实习计划范文
实习鉴定范文
实习报告内容
个人简历
求职简历
简历范文
简历模板
简历表格
简历格式
祝福语
春节
除夕
元宵
端午节
合同范文
合同范本
合同样本
合同范本格式
首页
>
40个网页设计优秀案例
40个网页设计优秀案例
发布时间:2021-04-11 来源:
文档文库
小
中
大
字号:
手机查看
40
个网页设计优秀案例
40
个网页设计优秀案例
关于我们的页面设计并不难,但是要设计一个完美的版本并不容
易。它通常取决于你的出发点,是要个性化的设计,还是品牌化的
运作
?
是提供自己联系方式,还是获取用户的联系方式
?
下面的优秀
案例会告诉你,优秀的关于我们页面要如何设计。
1
、友好的界面
友好的联系人界面总会让人感到亲切的,如果它还具备一些功能
性,并且易于阅读,用户会感觉更加舒适的。
“Whatcanwehelpyouwith”则可以引导用户去点击“加入我
们”“聘用我们”以及参与邮件订阅。
2
、展示全球各地办公室
Tool
的关于我们页面中,设计师用醒目的字体标注出团队在洛
杉矶、纽约和法国的办公室的地址和联系方式,点开关于我们页面
的用户不就是想知道这些信息么
?
正确的联系方式,简单直接的设计,
就是这么做的。
3
、简化沟通流程
ProductiongLocation
的联系我们页面同样采用了大胆而视觉化
的页面设计,但是和其他的同类页面不同的是,它简化了沟通流程,
把用户可能会关注的内容和需要沟通的具体部分都划分了一下,让
不同需求的用户直接被引导到特定的页面和部分,从而达成简化和
分流的目的。
4
、头像和个性化的信息
放上设计师和团队成员的图片,让用户认识你。最关键的并不是
你的头像够不够漂亮,而是要让用户知道这个漂亮的网站背后是一
位和你我一样真实而平凡的设计师,是他或者她努力设计之后的成
果。头像可以让页面更加个性化,也能让它更加真实而亲近。
5
、鼓励用户沟通
关于我们页面的核心设计目的通常是沟通,而
HelloInnovation
的页面设计则充分贯彻这一思路:试图鼓励用户主动同网站进行沟
通。用亲切而富有亲和力的设计,留下联系方式,从文案到留下邮
箱的地址都在鼓励用户。聊一句,能有多难呢
?
6
、用图片来传递隐喻
设计博物馆中收藏了许多设计相关的藏品,而关于我们页面中的
这个电话不仅是网站的藏品,而且作为一个重要的隐喻来向用户传
递“沟通”的意象,这也算得上是一种设计上的“双关”了。
7
、创造令人难忘的设计
古怪的设计和有趣的文案总能让人难忘,每天海量的信息摄入让
人们只会记住最突出的那些。不过,古怪的设计不一定适合任何品
牌任何网站,但是对于那些古灵精怪的网站而言,那些独树一帜的
脑洞总能起到作用。
8
、表现品牌的性格
对于网站而言,在关于我们页面中将自家的品牌性格呈现出来自
然是合理合适的。
BooneSelections
就是这样优雅又专业地将品牌
配色和相关设计元素融入关于我们页面的。作为一个专业的葡萄酒
进口公司,
BooneSelections
的关于我们页面用独特的排版和滚动
式的页面设计,营造出独有的品牌气息。
9
、展示联络方式
ThisAlso
的关于我们页面设计可谓是可靠而到位了,页面地图
标注出了公司地点也就算了,当你向下滚动页面的时候,还能看到
详细地址的说明、沿线地铁的乘坐方式、沟通的电子邮件地址、电
话,等等等等,不一而足。
10
、给个提示
网站
DeuxHuitHuit
的关于我们页面并没有提供传统意义上的沟
通方式,而是设计成了一个直观而简单的对话框。顶上“Sayhello”
的对话框非常直接地提示用户,只要输入内容,网站的开发者就能
看到了。
11
、标明开门
/
工作时间
对于诸如餐厅、博物馆、商店等有具体营业时间的机构的官方网
站,在关于我们页面当中标注店铺开门的时间、接受电话咨询的时
间,可以让用户更加有效地接受服务。
12
、使用醒目的字体
Panache
的关于我们页面中标题字体采用了非常醒目的
“TravaillonsEnsemble”,这种字体更为轻巧,虽然独特但是具有
极高的识别度。
13
、使用大胆的配色方案
经典的黑白黄的配色方案被运用到
Sponge
的关于我们页面当中,
这种强对比的配色结合细致的细节刻画,让整个页面看起来锐利又
富有质感。设计师将明亮的色彩运用到最关键的信息上,让用户更
容易注意到它们。
14
、采用形象化的插画
插画总能以更加视觉化的方式来吸引用户的注意力,尤其是当插
画足够风格化、个性化的时候。
LegworkStudio
的关于我们页面中,
加入了狼头人插画,配合手写字体,营造出了一种个性化的氛围。
15
、使用简约的图形
GiampieroBodini
的关于我们页面并没有使用复杂的设计技巧,
而是在素描的繁复背景上,放上一个简单的矩形,将联系方式与相
关信息置于其中。繁复和简单,手绘和图形,形成了鲜明的对比。
16
、借助表单来沟通
沟通是相互,你可以发信息给网站,也可以留下联系方式,让网
站的运营者给你发信息。
QEDGroup
直接在联系我们页面中留下一个
表单,你可以通过这个表单留下联系方式。
17
、使用单色配色
简单优雅和易读是
JosephAAvoue
的网站联系我们页面的设计风
格,没有华丽的设计,也没有花哨的功能,一个纤细的环,中间是
最基本的联系信息,就是这么直接。
18
、幽默
幽默的设计师不会放过任何一个搞怪的机会,
Bio-Bak
的设计师
即使是在联系我们页面当中也会哗众取宠一把。涂鸦字体和俏皮的
文案让人忍俊不禁,你能够从每一个细节感受到这个设计师的幽默
细胞。
19
、填写表单
Anakin
的关于我们页面同样是让用户填写联系信息,不过在表
单的设计上更加独特,并没有专门的表单,而是使用占位符提示用
户各个位置需要填写的内容,贴心、直觉,也非常走心。
20
、个性化的办公地点展示
和第二个案例类似,
CPB
集团在全球各地都有办公室,但是在设
计的样式上也更加独特,各地办公室的内容和个性化的背景融为一
体,信息得到了整合,展现方式也个性十足。
21
、介绍一下业务
在关于我们页面当中介绍自己并不稀奇,不过除此之外可以做的
还有很多,比如介绍一下自家的业务,展示一下自家的品牌,吸引
用户来聊聊也是很不错的手段。
HelloMonday
的关于我们页面就是
这么做的。
22
、视频背景
在网站里面添加视频背景已经是一种非常流行的手段了,而作为
电影制作工作室而存在的
Moodboard
在关于我们页面中使用视频背
景不仅符合他们团队的工作性质,而且让整个关于我们页面更加鲜
活了。
23
、使用栅格布局
要设计结构化的页面,栅格总是你最好的朋友。
UrbanInfluence
的关于我们页面使用栅格来组织整个页面的信息,需要展示的内容,
让用户输入的部分,装饰性的部分和展示用的地图,都界限分明地
分布在页面上。
24
、让界面更加友好
如果让界面更加友好,设计师要做的工作并不少。清晰而易读的
界面设计是最基本的,信息要能够清晰的传递出来,没有侵略性的
配色,让人感到熟悉、亲切的呈现方式,易于操作的交互方式,这
都是设计师要做好的地方。
25
、分步引导
取得联系包含着一系列的操作,如果将整个交互过程分割成为若
干步骤,一步一步引导用户来操作,加入动效和微交互,这绝对是
一种不一样的体验。
26
、增加联系人快捷方式
团队中负责不同部分的负责人通常不一样,用户打开联系我们页
面通常有着明确的目标,如何将
FAQ
部分加入其中,并且添加特定
的联系人的联系方式,让用户可以更加直接地同不同的负责人进行
沟通。
27
、同网站其他部分整合到一起
RobbyLeonardi
的网站似乎被设计成一个扁平风的电脑游戏,当
你浏览页面的时候,会随着主角去不同的
`
页面,做不同的事情,而
去关于我们页面也是其中的一个“场景”。这是一种整合页面的方
式,值得学习。
28
、团队合影
许多网站背后都是一整个开发和设计团队在运作,用团队成员合
影作为关于我们页面的背景图也是非常合理且有个性的做法。
29
、使用留白
通常留白能强化整个页面的空间感和结构感,而
BetaTataki
在
关于我们页面就放置了一个设计感十足了电话,通过留白强化了联
系方式等内容的存在感。
30
、活用字体排版
精心设计的字体排版不仅具有装饰性,还可以承载一定的内容。
PaulineOsmont
的联系我们页面使用了黑色、银色和金色来构建吸
引人的字体排版主视觉设计。当你向下滚动页面的时候,能看到易
于阅读排版到位的表单。
31
、亲手展示
这也是近几年比较常见的一种内容展现方式,设计师亲手举起展
板来展示设计作品。如果用在联系我们页面中,这种设计师手法也
是相当的应景呢。就像
MarkJaworkski
的这个页面,设计师的技能、
介绍还有留言用的表单都整齐地展示在这块被平举的白板上。
32
、列举社交媒体联系方式
现在哪个网站没几个社交媒体帐号呢
?
在关于我们的页面当中将
自家网站的各个社交媒体的链接都贴出来,对于许多用户来说反而
更加便于联系。
33
、借用传统的沟通方式
复古的样式是不错的选择,但是使用传统的联系方式来设计,似
乎更加走心也更有意思。
Lionway
的联系我们页面就设计成了明信
片的形式,还有一些固定的信息干脆就列举在一个打印账单上。
34
、俏皮的文案
文案的设计也是联系我们页面中重要的部分,亲切、幽默的文案
设计会让用户感到亲近,但是同样的,俏皮的、机智的文案也一样
会让用户难忘。
35
、展现个性
设计工作室
Resn
的联系我们页面设计绝对是这组案例中最有个
性的页面之一,充满
80
年代风情的设计元素,和带着动物头套的团
队成员图片组成了页面的主体。
36
、运用信息图
信息图是近几年一直处于上升阶段的设计手法,如果有合适的展
示内容,在关于我们页面中使用信息图也是相当不错的选择。
Quicksprout
的关于我们页面就使用了信息图来呈现内容,清晰易
读,而且准确到位。
37
、动画和卡通
在联系我们页面中使用卡通和动漫式的形象来呈现设计师和设计
团队是相当常见也相当有效的手段,
Melonfree
的关于我们页面就
将设计师和开发者的卡通形象摆了出来。
38
、使用半透明的图形
人的眼睛总会有意识地去识别想要石碑的内容,所以即使的半透
明的元素加载在一起,也不会特别严重地影响阅读体验。
Indofolio
的页面设就充分运用半透明的元素,将核心的联系方式放在半透明
的矩形上,透过图形用户依然能看到背景的细节,但是又不会看不
清关键的联系方式。
39
、手绘效果
手绘的联系我们页面,尤其是那些画的还相当养眼的页面,总能
让用户感受到设计者的贴心。
MarioPetrone
的这个页面设计就相当
的俏皮有趣。
40
、仅用一个下拉框
SpokesPedicabs
的联系我们页面其实谈不上一个完整的页面,
而用一个下拉框代替,当你点击导航了中的链接,会出现这个醒目
的橙色下拉框。
本文来源:
https://www.2haoxitong.net/k/doc/4f2f39b87a3e0912a21614791711cc7931b778b3.html
《40个网页设计优秀案例.doc》
将本文的Word文档下载到电脑,方便收藏和打印
推荐度:
点击下载文档
文档为doc格式
分享到:
相
关
案
例
正在进行安全检测...
2024-04-30
公司补卡理由不让写忘记打卡但我真的是忘记了编个什么理由好
2024-04-30
唐立淇2015年巨蟹座运势
2024-04-30
十个柴犬八个咬人
2024-04-30
忘记考勤的情况说明模板
2024-04-30
名著阅读艾青诗选
2024-04-30
正在进行安全检测...
2024-04-30
正在进行安全检测...
2024-04-30
事业单位的概念以及性质和宗旨是什么
2024-04-30
浪漫七夕短信祝福语录
2024-04-30
相关推荐
1
理想课堂中的“三声”
2
幼儿园中班体育活动优秀教案《潜水员探宝》含反思
3
双棱镜干涉测光波波长
4
泰坦尼克号电影简介
5
婚介乱象调查
6
双棱镜干涉测光波波长
7
党代表座谈会发言要点
8
2018综治宣传月活动方案
9
苹果已经和Adobe达成了协议,2019年为iPad发布完整版Photoshop
10
小学教学规章制度汇编
推荐内容
通知更改上班时间
中班语言活动萝卜回来了说课稿之欧阳法创编
大三学生预备党员转正思想汇报【三篇】
2020-2021学年山西省初中九年级中考练兵英语模拟试题及答案
2020-2021学年山西省初中九年级中考练兵英语模拟试题及答案
2020-2021学年山西省初中九年级中考练兵英语模拟试题及答案
文明礼仪教学计划(通用3篇)
惊世骇俗是不是褒义词吗
护理礼仪
“好人好事册子”制作评比活动