焦点区域 Hero Section

标签: #经验杂谈 #Section #WebDesign 更新：2023-01-07 [[焦点区域 Hero Section.canvas]] ## 概念网页中最重要的区域，引入用户眼帘的第一个区域非常重要。用户最关心的问题如下： - 这是什么？我在哪？ - 这个网站上干什么的？ - 为什么我应该停留在这个网站上？ **注意:** 这样才能更好的抓住用户的注意力 ## 组件/模式的常规构成 - 一个 [[CTA按钮]] [[按钮 Button]] - [[Logo设计]] - [[顶部导航栏 Top Navigation bar]] - 主标题 - 副标题 - 吸引用户的图像 ## 视觉 ### 文字叠压在图片上 Overlay the imagery with the text. ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230107165348.png) ^0af008 - 高度 100%屏幕 - 一般是视频背景，或者高品质大气图片 ^120336 - 透明的[[顶部导航栏 Top Navigation bar]] ![Pasted image 20211016230545](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Pasted%20image%2020211016230545.png) ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230107165247.png) 配合 [[背景 Gallery 画廊]] [Upgrade and save more – SAVEE](https://savee.it/upgrade/) ![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230927103457.png) ### 左右结构 1 - 掌握好左右占比，一般是对半开，或者黄金比。图片： ![布局左右](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/%E5%B8%83%E5%B1%80%E5%B7%A6%E5%8F%B3.jpg) ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230107164709.png) ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230107164719.png) ### 左右结构 2 ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230107164749.png) ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230107164753.png) ### 垂直布局 ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230107164814.png) ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230107164824.png) ### 图片融入文字 Put the imagery inline with the text. ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230107164906.png) ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230107164909.png) ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230107164917.png) ### Surround the text with imagery. #设计模式/布局/中心环绕型 ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230107165436.png) ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230107165443.png) ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230107165452.png) ### 夸张巨大的元素。 ![[设计视觉风格灵感记录#^8ab628]] ## 交互 ### 在 HERO 中增加快捷入口 ![Pasted image 20210804204413](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Pasted%20image%2020210804204413.png) ## 动效更多请跳转查看 [[Banner 视觉设计手法#^49a900]] ### 1. 背景图片逐渐放大或者缩小 ![[Banner 视觉设计手法#^98db66]] ### 2. 图形的组合 ![[Banner 视觉设计手法#^1d1d28]] ### 3. 动态输入的文字 ![[Banner 视觉设计手法#^7b7db2]] ## 资源 - [[Banner 视觉设计手法]] - [Design The Perfect Hero Section (With Example) - YouTube](https://www.youtube.com/watch?v=LJbkLdtEW00) 比较偏业务侧的。这个老哥的视频质量一直挺高的。![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230403123035.png)