邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

热门文章

Mockplus是什么?

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

了解更多

18个最具有情怀的“关于我们”页面设计【附设计技巧】

Summer 2018-07-30 08:47:47 阅读:799

一个成功的“关于我们”不仅仅是将品牌、公司和团队信息填满一个页面那么简单粗暴,你需要将团队和品牌视作一个整体,呈现出独有的风格,不同的个性,让用户记住。它不仅仅是展示公司的服务理念,更是让你的用户更加了解你的唯一途径。如果你还在困惑怎么设计一个具有情怀的“关于我们”界面,那么不凡看看别人都是怎么做的吧:


首先,先了解下这10个“关于我们”界面设计技巧:


1. 明确告诉用户你是做什么的

2. 清晰的信息排版布局

3. 增加地图模块和数据来提高真实性

4. 获奖信息的展示可以增强用户信任感

5. 团队以及个人真实照片的展现

6. 明显的CTA让用户可以随时体验产品

7. 不要放置毫无意义且冗长的信息

8. 向用户展示你的特色信息

9. 附有个性的设计可以让用户眼前一亮

10. 干净的布局和简洁的设计更让人喜欢


10个真实的“关于我们”界面案列设计


1. https://www.website.com/about-us/


整个页面是以灰白以主色调,同时宣导了这个公司的品牌故事、品牌价值以及真实的数据支撑。往下滚动会看到一个明显的蓝色的CTA让用户可以更加深入的了解产品并且试用。虽然页面上并没有放置公司管理人员或者职员的照片,但整个页面简洁干净易于浏览,并不会影响用户对这个公司的影响。


“关于我们”界面案列设计1


2. https://www.starbucks.com/about-us


Starbucks的“关于我们”页面可以说是非常简单,几句意味深长的语句很抓住人心,“我们的宗旨就是为客户提供全世界最好喝的咖啡”。左侧的富有年代感的照片让我们了解了它的历史悠久。右侧点击链接则有具体的关于Starbucks的公司特色信息和传统文化等。整个页面虽然文字少,但是产品已经深入人心了。


“关于我们”界面案列设计2


3. https://www.tumblr.com/about


Tumblr的“关于我们”页面设计的非常标准化,一张大图logo显示公司的标志。图片下方是具体的网站数据:博客数和文章数量。接下来就是简洁的文字来传递公司的服务宗旨和理念,最棒的是在底部有最近发布的文章推荐,它们真的是为留住用户想尽了一切办法。


“关于我们”界面案列设计3


4. https://www.salsajeans.com/en/about-the-brand/abou...


Salsa是一个服装网站,在“关于我们”的页面直接展示给我们的是一个2分多钟的介绍视频,从设计到制作,整个视频传达他们优良的工艺和公司服务宗旨。并且使用视频解说,用户停留时间更长,更容易达成转化,这就是他们聪明的一点。往下滚动可以看到公司的三大宗旨:Vision,Value,Mission。


“关于我们”界面案列设计4


5. https://www.thoughtworks.com/about-us


“关于”我们页面设计就是为让用户更加了解我们是谁?我们是做什么的?这个页面的设计完美了诠释了这两点。上方放置了一张团队的照片。告诉访问者了解你的网站背后是有一群真实的人,而非机器。页面上的信息排版想当顺畅,告诉用户公司的服务宗旨和理念,还让我们了解了公司运营。当然,你会看到公司领导层的照片,也是告诉用户这个公司是谁在运作的,证明公司的真实性。底部还有公司最新的咨询来留住用户不离开网站。


“关于我们”界面案列设计5

6. https://www.odoo.com/page/about-us


Odoo的“关于我们”页面设计除了公司的传递的服务理念和宗旨以外,还有地图展示每个公司办公地址增加真实性。如果你想要用户更了解你们的公司?更信赖你们的公司?那么公司在外获得奖必须要展示出来,这样用户才能更加信赖你们,达成的转化就会更高。Odoo就做到了这点。


“关于我们”界面案列设计6


7. https://www.sulzer.com/en/about-us


“关于我们”页面必须是易于浏览的,又不要给与用户毫无意义的冗余信息。用户对文字只是浏览,太多的信息内容让他不知道点哪里。Sulzer就采用了很聪明的排版方式,以图片文字链接的形式横向排列公司的介绍以及信息等,你如果愿意了解更多,那么可以点击了解。不愿意了解更多那么可以忽略,可以给用户更多选择。


“关于我们”界面案列设计7


8. https://www.kittiescakes.com/story


复古风格是我个人十分钟爱的一种设计风格。通常我们看到的复古风都拥有着温暖色色调和俏皮的插画,在配上传统的布局手法,就堪称完美了。Kittie’s Cakes 的页面中散落着许多简单但是极为欢快有趣的插画,这些天马行空的配图让整个设计一下就拥有了强烈的风格和个人特色。复古的配色和层次丰富的页面结构,让用户在获取信息的同时还不时地收到惊喜。


“关于我们”界面案列设计8


9. https://www.dropbox.com/about


以动图的形式展示展示网站的信息,用色大胆,个性鲜明,让人留下深刻的印象。文字排版主要是以黑红为主色调,红色总是给人一种热情洋溢的心情,也显示出文字内容的重要性。


“关于我们”界面案列设计9


10. http://featherandstone.co/fine-art-wedding-photogr...


完全不同于其他的页面设计,Feather and Stone 的关于我们页面采用了手绘插画来表现他们的独特之处。由于他们是婚礼摄影师,所以这种浪漫的表现手法就显得恰到好处。


“关于我们”界面案列设计10


Dribbble上8个最佳的“关于我们”界面设计


About Page


“关于我们”界面设计Dribbble作品欣赏


Auri About Page


“关于我们”界面设计Dribbble作品欣赏2


DGiT - About us design


“关于我们”界面设计Dribbble作品欣赏3


Digital Agency About Page


“关于我们”界面设计Dribbble作品欣赏3


Dustin-putnam


“关于我们”界面设计Dribbble作品欣赏3


IIoT Corporate Website About Us Page Animation


“关于我们”界面设计Dribbble作品欣赏4


Namibia Park About Us Page


“关于我们”界面设计Dribbble作品欣赏4


Unfold - About Page


“关于我们”界面设计Dribbble作品欣赏8


看了这么多优秀的设计,是时候该你上场设计一个属于你的个性““关于我们”页面,只需要一个简单易上手的原型设计工具就可以帮你搞定。Mockplus是一款简单无需学习成本的网页原型设计工具,可创建网页项目,自由项目,自定义项目,APP项目等。不论是做页面滚动和排版布局,Mockplus封装的200个组件轻松实现交互设计。如果你需要一套严格的设计规范来管理你的页面,那么摹客的设计系统是你不二的选择,轻松管理你的设计资源。


总结


不论是采用大胆的用色,夸张的动效;还是使用简单的插画,温暖的配色等,都要于整个网站页面设计风格一致。对于许多网站来说,“关于我们” 界面的好坏直接影响了用户的去留,想要让用户能够有更好地“第二印象”,可以多参考下其他网站是如何做的。希望这篇文章可以帮助你。

原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo
咨询客服

在线客服

置顶