25款独特且走心的“关于我们”页面设计

25款独特且走心的“关于我们”页面设计,第1张

毫无疑问,你是没有第二次机会来给人以“第一印象”。每个网站从首页到子页面都是介绍产品、提供服务、探讨功能,唯有“关于我们”这个页面是关乎产品和服务的创建者——我们自己,也是为什么它如此的重要。

一个成功的“关于我们”不仅仅是将品牌、公司和团队信息填满一个页面那么简单粗暴,你需要将团队和品牌视作一个整体,呈现出独有的风格,不同的个性,让用户记住。

这听起来似乎是一件特别棘手的事情,但是仔细推敲整理,实际并不复杂。选择走肾的设计技巧,挑个或现代或简约的匹配自家品牌的风格,用最走心的方式展现自己的团队,这就够了。

听起来玄乎,不如看看别人家的案例来的直观。

01. 醒目的色彩和鲜亮的配色

严格的色彩搭配和醒目的色调选取,使得Rook 的“关于我们”页面的设计看起来简单而突出。醒目的金色贯穿整个设计,从LOGO到图像、排版都保持着一致性。

在图片和成员照片的处理上,设计师采用了单色的色彩滤镜,这让关于我们页面在色彩上更加严格也更加统一,品牌化的设计在这里一览无余。

02. 手绘排版和简单的图片

Madebyband 的“关于我们”页面的设计比较不同,结合品牌的特征,当然也是为了表现个性,他们的页面运用了许多手绘的字体和排版,配合手工制作品的图片,传达品牌的个性。整个页面设计简洁,大量的留白也平衡了页面的结构。

所以,无论是自定义的字体还是自定义的图片,都是呈现品牌性格表现团队差异化的可靠手段。

03. 俏皮的插画和活泼的配色

“关于我们”的页面中最常见的信息就是团队的照片和地点等内容,那么为什么要用传统而死板的方式来呈现呢?Pulp Fingers 就没有这么做,设计师挑选了三种色彩来制作尖锐而极具风格的插画,这种风格不仅漂亮而且有趣,独特而足够引人入胜。作为企业的“关于我们”页面绝对独具一格,令人难忘。

04.专业的团队合影和整饬的排版

“关于我们”的页面中,团队成员照片非要是单独个人的么?并不一定,专业的合影也是不错的选择(一群人随意地站在某栋楼门口的楼梯上拍摄,这样的合影中国人有过太多,谈不上专业,放这里通常都非常的违和)。这种专业的团队成员摄影有不少企业做过,很容易做得过于“商业风”,做得有风格也恰到好处的并不多,有兴趣的同学可以找找锤子科技团队的男神合照,大概也有Jam3团队合影的风格。

Jam3 团队选择的是统一的黑色服装,在深色背景衬托下逼格四射,质感十足,成熟而精美,是绝对的焦点。搭配这个图片的排版和背景都非常的现代而清爽,主次分明。

当然,这种合照存在的问题在于,团队成员如果变动的话,你得重新照一次……如果这个不是问题的话,那就来一发吧。

05. 醒目的标题和有趣的动画

如果想让客户、未来的员工和同事们确切地了解你们的品牌价值的所在,那么为什么不把这些核心的内容直接醒目地写出来呢?Purple, Rock, Scissors 就是这么做的。这个“关于我们”的页面还有两个地方非常贴心,一个是短视频背景,它很好地展现了工作环境和整体氛围;另外一个是团队成员头像的设计,鼠标悬停的时候,你可以看到其中人物表情变化的动效,不仅贴心而且有趣。

06. 双色搭配和大胆的插画

Mike Kus 的“关于我们”的页面设计采用了独特的双色配色,前景色是黄色,背景色是红色,双色搭配的优势在于它极强的凝聚力,这样的风格通常厚重而复古,而且可以很好地强化品牌色给人的感觉。另外一个引人入胜的地方就是其中大胆的插画——大脑。

当然,配设在整个设计中起到了决定性的作用,要作出靠谱的配色并不容易,不妨在优设首页的搜索框中搜搜配色,会有惊喜哦。

07. 整洁的图形和信息可视化

是否你也会更喜欢视觉突出的图形而非整片的文字呢?那么你看看Huge公司的“关于我们”页面吧。这家公司用先锋而大胆的配图来呈现他们的独特之处,硕大而简洁的标题文字让这些配图更加富有张力,同时还传达出他们的企业价值观。

如果图形化是设计的核心的话,信息图的使用就顺理成章了。关键的信息用信息图来表现,不仅贴合网站的整体风格,还能让用户更轻松地接受网站传递的信息。

08. 整齐的排版和温暖的色调

坦率的讲,栅格运用的最多的地方还是传统媒体,网络媒体运用栅格的方式与之还是有差别的。不过Studio Alto的网页证明了一点:网页排版一样可以借助栅格做到类似传统屏幕印刷行业的排版样式。页面中暖色调的运用,让整个页面的更加风格化,这种类似牛皮纸的色彩令整个页面的质感更上一层楼了。

09. 简单的布局和干净的留白

设计网页的时候,留白是重要的工具和元素,掌控留白的使用技巧非常有必要。Made By Shape的“关于我们”页面的设计就是这样的一个案例,棱角分明的形状和不同的区块被留白清晰地分割开,柔和的色调赋予页面以时尚感和生命力。如果你所设计的页面内容信息量很大,不妨好好运用留白吧。

10. 可视化的时间轴和吸引人的配色

如果要展现一个产品的发展历程,没有什么比时间轴更加合适了。Moz 的这个关于我们的页面设计就充分运用了这一元素。时间轴并非是固定的图片,其中的事件和内容是可以同用户进行交互和互动的。如此一来,整个时间轴便可以向用户讲述整个故事,让用户也感受到参与感。整个设计的另外一个亮点是它的配色。

11. 插画式图片和温暖的基调

你们是否拥有一个强大的幕后团队呢?如果是,不妨在“关于我们”页面中好好地展现他们。其实Food Studio 的这个页面的设计并不涉及过于复杂的技巧,他们只是将团队成员的头像更换为插画风,配合温暖的基调,让整个页面的风格一下就脱颖而出。这样的设计最重要的一点是统一,一致性是风格化的基础。

12. 大胆的用色和超大的团队照片

如果你想让你的设计更加突出更有影响力,不妨试着让一些元素更大,让配色更加亮眼。正如Mixd 所设计的,用高清的团队成员大图来突出每个成员的存在感,加上高对比度的色彩搭配,整个设计看起来也非常不错。值得注意的是,挑选合适的元素放大,不要全都放大,这样就没有重心了。

13. 时尚的图片和简约的布局

Kingdom Coffee and Cycles 的整个设计可以说是现代风设计的典范,布局简单,时尚的图片,干净整齐,色彩明亮。图片是整个页面的视觉设计的重心,图片、视频、地图的混合搭配消解了页面的单调和简单的特质。技巧上,设计师使用了团队的Instagram的作品做成拼贴置于页面底部,看起来也非常时尚有趣。

14. 简洁的图形和锋锐的线条

这种类型的网页设计走的是时尚现代风,干净的外观,轻量级的图片选取,大量的留白和整齐的排版,非常专业也非常的养眼,堪称完美的框架可以承载多种多样的内容。同时,这个页面的设计案例也同样展现出留白的重要性。

15. 大胆的提亮色和高亮信息

6tematik 的关于我们页面设计非常有意思。黑白配色永远不会过时,但是在某些情况下黑白并不足以满足全部的需求,这个页面就使用了高饱和度的红色来蓝色来作为提亮色,大胆而有效。要注意的地方在于,你高亮的信息越多,高亮的效果就越差,因为高亮的地方越多,用户越难于发现真正重要的地方。所以,你要做的是标记出真正重要的事情。

16. 大留白和小元素

大和小在很多情况下都是对比出来的。Margin 通常指的是主体周围的边缘、留白和边界。较小的边界可以让主体更有张力,覆盖更大的范围。但是Alfred 的关于我们页面并没有这么做,大量的留白、宽广的边缘让整个页面看起来文艺气息十足,简约而轻松。虽然这样的设计并不常规,但是也正是这种非常规的设计让整个页面充满了独特的风格与调性。

17. 独特的字体和个性化的档案

独特的手写字体赋予Big Cartel的页面以一种不同凡响的张力,虽然简单,但是让设计大放异彩。个性化的员工档案同上方别具一格的字体一样独特,参差多态的设计让整个页面在气息上保持了一致性。当你点击员工头像的播放按键的时候,会播放一段颇有性格的视频,独树一帜。

18. 模块化布局和温暖的色彩

当你看到这个页面的时候,我想你也会注意到它独特的设计:页面的区块是精心分割出来的,从上到下每一块的内容都会承上启下,上一块引出下一块,就像梯子一样。这样一来,模块化的页面也显得很有条理,整齐而又自由。页面的配色和用图也是非常讲究的,黑白的基调配合温暖的棕色,创造出温馨的氛围。

19. 醒目的色彩和大胆的图片

Visionaire的用色简直是大胆的典型,红色Banner的使用极为抓人眼球,还和品牌用色相互呼应。错落的排版和别具一格的图片使用让用户不会轻易忘记这个不同一般的网站。信息图的使用也是这个关于我们页面的特色。

20. 强对比和复古插画

Woah Nelly Catering 的关于我们页面并没有追随最流行的设计手法,而是采用了温暖怀旧的色调和设计元素来营造氛围,鲜艳漂亮的插画不仅让页面充满活力,而且也简单直观。复古插画的微妙之处在于其中添加了纹理,让它质感非常不错,这也让白底黑字的元素可以更加显眼突出,构成对比。

21. 整洁的配色和均衡的排版

漂亮的无衬线字体、均衡的排版和均匀光洁的配色让EB Pearls 的关于我们页面看起来专业无比。合理的留白和浅色的图片的使用给人一种优雅的感觉。

22. 柔和的色彩和简单的插画

很多时候设计并不是越复杂越好,EVA Black Design的关于我们页面使用简单的设计反而更容易营造时尚现代的感觉。简约的暖色调图片同黑白灰配合在一起,给人以柔和的感觉,点缀以简单的插画,让整个页面在整饬的设计之下还拥有了些许个性。

23. 动效和富有冲击力的排版

想让你的设计栩栩如生富于生命力?那么让它们动起来好了!用短视频替代图片,或者使用GIF图片,这也都是目前流行的设计手法。纯黑色的文本和红色的元素的使用,让整个页面充满了个性,也让排版充满了冲击力。

24. 创意排版和吸引力十足的图片

图片居中的独特排版是这个关于我们页面的有趣之处,而团队成员的照片也正好居于这样的位置,这使得两边的档案信息排版需要向中间对齐。复古元素和配色的使用则支撑起了整个页面的设计,值得学习哦。

25. 大胆的布局和色彩滤镜

大胆使用独特的、先锋的布局是令人难忘的重要手段,同时搭配以个性十足的配色,效果绝对不错。干净的无衬线体的选择,色彩滤镜下的图片,都是这个关于我们页面的突出之处。

本文地址: 思维素材

app的SCU页面指的是什么?APP页面类型以及标准术语

1. 启动图标

点击后可以启动 APP 的图标,如图分别是淘宝在不同场景下的启动图标。

2. 应用市场展示页

在应用市场中为了帮助用户在下载之前了解 APP 功能的页面叫应用市场展示页,也能够通过优秀的 UI 设计吸引用户下载。

如图中红框内分别是苏宁易购、设计本、当当网的应用市场展示页。

3. 启动页(闪屏)

APP 启动后加载过程中显示的页面叫启动页,如图是微信、有道云笔记、得到的启动页。一般启动页的设计都会比较简洁,只有启动图标+solgen,或是吉祥物、一张精美图片的形式。

4. 广告页

国内一些公司由于变现困难在启动页之前或之后,进入主页之前加了一张广告页,主要用来显示接的广告或自己公司的运营活动,可以跳转链接或打开其他 APP。

如图是 UC浏览器、网易云音乐、宝宝树的广告页。

5. 引导页

用户第一次打开 APP 后为用户介绍 APP 主要功能的页面,只显示一次,或是 APP 版本更新后用来介绍新版本新功能。

如图是前程无忧 APP 的引导页。

6. 首页

进入 APP 后默认显示的页面,如图是微信、澎湃新闻、淘宝的首页。

7. 一级页面

一般指通过底部标签切换的方式能够到达的页面。如:

· 微信的一级页面有微信、通讯录、发现、我的;

· 淘宝的一级页面有首页、微淘、消息、购物车、我的淘宝;

· 澎湃新闻的一级页面有首页、视频、问政、问吧、我的。

8. 二级页面

指通过一次反馈操作能够回到一级页面的页面,叫二级页面。

如图分别是微信聊天页面、朋友圈页面、支付宝我的余额页面,它们都是二级页面。

9. 注册登录页面

用户注册账号、登录账号的页面。如图是洪恩故事的注册登录页。

10. 个人主页/我的页面

显示用户个人信息、和用户有关的订单、收藏、优惠券、课程、商品等等信息的页面。

如图是 luckin 咖啡、家长帮、丁香医生的个人主页。

11. 菜单导航页

包含很多分类、不同栏目,可以跳转到很多个不同内容页面的页面叫做菜单导航页。一般首页大部分属于菜单导航页,如我们的 pro 小程序的首页就是一个菜单导航页。

如图是一条、新世相阅读、美图秀秀的菜单导航页。

12. 搜索页面

用于搜索的页面。有的 APP 没有单独的搜索页面只有一个输入框,有的有单独的,因为可以放一些推荐内容或广告位。

如图是喜马拉雅 FM、贝贝、搜狗阅读的搜索页。

13. 设置页面

更改 APP 设置的页面,如图是百度阅读、淘票票、夸克浏览器的设置页面。

14. 详情页面

展示内容详细信息的页面,如图分别是淘宝的商品详情页、起点学院的课程详情页、今日头像的咨询详情页。

15. 关于我们页面

介绍 APP 版本信息、功能介绍、公司信息、联系方式、版权声明的页面。

如图分别是夸克浏览器、极客时间、火辣健身的关于我们页面。

16. 意见反馈页面

一般的 APP 都会设计一个意见反馈功能来收集用户需求,对应的页面就是意见反馈页面。

如图分别是贝贝、阿里钉钉、花生地铁的意见反馈页。

APP 中的页面类型大致可以分为以上这些,上边所写的页面名称是被使用得最多的、最规范的名称。沟通时使用上面的页面名称应该 90% 的成员都能理解。


欢迎分享,转载请注明来源:夏雨云

原文地址:https://www.xiayuyun.com/zonghe/436442.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-28
下一篇2023-05-28

发表评论

登录后才能评论

评论列表(0条)

    保存