头部内容设计的一些技巧。
1. 关于尺寸
对于网页头部图片的大小是没有统一的答案。有时候设计师希望提供相对固定的数字,但网页设计最大的难点之一是很难确保每个屏幕尺寸的有效性。即使两个屏幕的尺寸相同,分辨率也可能不同,因此用户看到的内容也不一定完全一样。
因此,我们不要拘泥于精确的像素概念,最好遵循经验积累的常识规则。
举几个可以临摹的例子,看看优秀作品是如何操作的,更多网页设计 到搜UI(SOOUI) www.sooui.com 根据关键词搜索!
![9e26ebac7dda3d39d1ea61032c4ea171.png](https://i-blog.csdnimg.cn/blog_migrate/04470fb24ecdc622be0f3ac8ccb6a83f.png)
HMK Template
头部的高度本着不干扰内容感知的基本原则。对于一些展示信息资源的页面,较小的头部区域是一个不错的选择,而对于落地页或者企业客户首页,头部区域可能会更大,而且多数大客户会有主视觉单屏展示页。
如果某些网页,例如落地页头部内容较长的情况下,最好在首屏给下一屏内容露出一些空间,这样用户就可以意识到下一页还有内容,引导用户滚动。
![87034f065869aa157fb440423a0a9c05.png](https://i-blog.csdnimg.cn/blog_migrate/8e1890254df75628666bca32888c6ad0.png)
单页摄影模版
2. Logo展现
当一个人发现自己在陌生网站上,总是习惯于从屏幕的左上角开始浏览网站。尽管设计师有时候认为打破常规的布局也可以带来不错的效果,但是多数用户如果他们常规位置找不到预期的信息,将会不假思索地认为这个页面是难用的和不规范的,需要花费很多的努力才能理解。这就要看你的设计目的和受众群体能够接受哪些程度的变化,我们今天主要说大多数受众。
![de7b8997e72674996a5b150108174c5f.png](https://i-blog.csdnimg.cn/blog_migrate/4a6a090ae91da39f3904aa872000b45c.png)
个人投资组合的JAVEN HTML模板
Logo ——与居中或右侧放置相比,用户更容易记住那些 Logo 放在左边的品牌。如果你使用的是圆形 Logo,那么可以把它居中放置,尽管它的有效性仍然比放在左侧要低。
![b680155cf1170c4fd30d0014663cde4f.png](https://i-blog.csdnimg.cn/blog_migrate/c0bf475f4201b0265227761f46005c23.png)
活套 - 免费的figma模板
3. 吸顶导航栏
吸顶导航,换句话说就是「粘性标题」,当你滚动页面时,导航区在页面中跟随,现在成为一个网页设计标准。如果不违反网站整体设计理念,请将导航栏吸顶固定。无论是PC端还是移动端设计,这都是一个好的选择:
- 例如长页面展示、浏览内容同时客户需要导航区总是在视线范围内。
- 如有滚动信息,不断提示客户点击,则可置顶或置底处理。
![ce3f3425c6327753ac619e9197ea9acb.png](https://i-blog.csdnimg.cn/blog_migrate/e0565acec029a99cc9b6b13501406ae2.png)
旅行登陆页面
可根据页面内容展示要求,向下滚动时调整导航背景透明度,尽量少的影响内容展示同时使页面看起来更生动和通透。还可以在滚动时简化导航栏样式或高度,使用户能找到但又不过于抢眼。
总之,固定导航栏有助于提升用户体验,保持用户导向并给予了他们更多控制权。
4. 关于图片的应用
头部内容所用图片可以选择直接和要表达的业务相关性很强的,例如招聘类网站使用招聘场景图片;也可以选择中性感觉的例如办公场景、城市风景类图片进行虚化降低清晰度或明度来突出前景内容;
![fbd6c4e8fdcf92ec5a267cc482417f08.png](https://i-blog.csdnimg.cn/blog_migrate/9d22d59c0357f591f2c7209b14318759.png)
节约用水-UI设计
高质量图片——摄影对于网页设计师来说是一个强大的工具。它可以讲述一个故事,唤起用户的情感,并鼓励访问者进一步滚动。对于那些有强烈冲击力的图片的网站,试着做一个透明的标题,它可以更好地显示图像,并保留了主要链接
![1cd5eed8974e5a96fc54cc495b6f70b8.png](https://i-blog.csdnimg.cn/blog_migrate/cc8147e909defb60555a4f51a86453cc.png)
经典咖啡馆小资生活时尚咖啡Cafetaria网页设计PSD模板设计
轮播图片——如果客户给了几张代表该企业业务的出色照片,这种方式就没错!企业希望用户可以滚动浏览一组精美的高分辨率图像。
![a58c4d072e1b9b794dbb771456135385.png](https://i-blog.csdnimg.cn/blog_migrate/4879ff239055d5589e58cba147714d08.png)
平板视图 - 沙龙WordPress主题
插画——网站的头部图片必须能引起读者的共鸣,建立起人与人之间的联系。如果图片是独特的且易于辨认,即使是从网站标题中剪切出来,效果也会很好,可以利用当今的插图潮流来实现这一点。
![f26cf51075fa162425d5d0962e291fac.png](https://i-blog.csdnimg.cn/blog_migrate/cd8867754a7b76bc1182cdfc9304a27f.png)
网上银行平登陆页面模板
5. 视频或动画
当然我们也不能只关注静态图片,添加视频也是最有效的网站头部创意之一。如果可能的话,尝试着在头部内容中添加主题视频材料,很多网站利用在背景中添加短视频来吸引用户,尽可能以最好的方式展示他们的公司或产品。
![4fe6c88e5c6694c91582121f377cdec0.png](https://i-blog.csdnimg.cn/blog_migrate/839b6fe1bfb4073dc3869c503034a7fe.png)
Greetmas - 免费圣诞贺卡介绍HTML模板| Personlize和发送