万花筒|设计万花筒|网页头部内容设计( 二 )


Logo ——与居中或右侧放置相比 , 用户更容易记住那些Logo放在左边的品牌 。 如果你使用的是圆形Logo , 那么可以把它居中放置 , 尽管它的有效性仍然比放在左侧要低 。
3. 吸顶导航栏
吸顶导航 , 换句话说就是“粘性标题” , 当你滚动页面时 , 导航区在页面中跟随 , 现在成为一个网页设计标准 。 如果不违反网站整体设计理念 , 请将导航栏吸顶固定 。 无论是PC端还是移动端设计 , 这都是一个好的选择:· 例如长页面展示、浏览内容同时客户需要导航区总是在视线范围内 。 · 如有滚动信息 , 不断提示客户点击 , 则可置顶或置底处理 。
万花筒|设计万花筒|网页头部内容设计
本文插图

可根据页面内容展示要求 , 向下滚动时调整导航背景透明度 , 尽量少的影响内容展示同时使页面看起来更生动和通透 。 还可以在滚动时简化导航栏样式或高度 , 使用户能找到但又不过于抢眼 。
总之 , 固定导航栏有助于提升用户体验 , 保持用户导向并给予了他们更多控制权 。
4. 关于图片的应用头部内容所用图片可以选择直接和要表达的业务相关性很强的 , 例如招聘类网站使用招聘场景图片;也可以选择中性感觉的例如办公场景、城市风景类图片进行虚化降低清晰度或明度来突出前景内容;
万花筒|设计万花筒|网页头部内容设计
本文插图


高质量图片——摄影对于网页设计师来说是一个强大的工具 。 它可以讲述一个故事 , 唤起用户的情感 , 并鼓励访问者进一步滚动 。 对于那些有强烈冲击力的图片的网站 , 试着做一个透明的标题 , 它可以更好地显示图像 , 并保留了主要链接 。
万花筒|设计万花筒|网页头部内容设计
本文插图

轮播图片——如果客户给了几张代表该企业业务的出色照片 , 这种方式就没错!企业希望用户可以滚动浏览一组精美的高分辨率图像 。
万花筒|设计万花筒|网页头部内容设计
本文插图

插画——网站的头部图片必须能引起读者的共鸣 , 建立起人与人之间的联系 。 如果图片是独特的且易于辨认 , 即使是从网站标题中剪切出来 , 效果也会很好 , 可以利用当今的插图潮流来实现这一点 。
5. 视频或动画当然我们也不能只关注静态图片 , 添加视频也是最有效的网站头部创意之一 。 如果可能的话 , 尝试着在头部内容中添加主题视频材料 , 很多网站利用在背景中添加短视频来吸引用户 , 尽可能以最好的方式展示他们的公司或产品 。
万花筒|设计万花筒|网页头部内容设计
本文插图


华夏幸福校招官网首页动画 , 拨云见日的效果加上中式剪纸风格的运用 , 将公司各业务线融合到几个转轮中 , 产生了故事性的动画场景 。
如果想要使设计更具吸引力、生动和令人难忘的另一种方法是添加动画 。 它可以使网站头部内容变得非常酷 。 以每季校园招聘企业站点为例 , 各大公司对应届生群体的追逐 , 很大程度上体现在对该群体审美和喜好的迎合上 , 年轻有活力的动画或视频元素绝对是吸引眼球的不二之选 。
当然不一定只有满屏大型动画 , 一般动画越复杂面积越大占用流量越多 , 客户打开延迟也影响观感 。 这时候我们可以根据功能不同 , 设计一些交互性的动画 , 去提升客户使用感受 , 尽量不影响网页打开速度 。
6. 移动端头部设计网页头部不可能只显示PC端的网页上 , 还应该正确显示在移动端的网页上 。 因此 , 在近年的设计中 , 网页必须具有响应性 , 并且能够很好地适应各种移动设备 , 这样才能带给用户完整的设计体验 。


推荐阅读