数极客首页

在设计中,如何做到网页元素与logo相呼应?

在网页设计中,将logo元素添加到整个网页中,使之两相呼应的方法有:颜色呼应、logo与控件结合、logo变形。

在设计中,如何做到网页元素与logo相呼应?

网页设计中,如何将logo元素添加到整个网页中?这个问题呢,其实是我的“甲方”提出来的。在她看过我们组设计的网页视觉稿的时候,给我们提出了一个建议,希望我们可以在网页中添加少量logo元素,不要只体现在导航栏中。于是,我开始调研各大门户网站是如何处理logo与网页元素相呼应的问题,找到了三种比较通用的方法。

一、颜色呼应

用一句话概括,就是页面元素与logo的颜色相呼应。这也是一种非常常见的呼应办法。通常网站的logo会有一个固定的颜色,将该颜色通过文字、控件、icon设计表现出来,是一种很好的呼应网页元素与logo相呼应的办法。

案例一:爱奇艺

绿色可谓是爱奇艺的标志性颜色。打开爱奇艺,可以清晰看见爱奇艺将它logo中的绿色元素融入界面UI中,需要高亮的字体也会运用绿色来表达。打开网页时,可以发现绿色非常的突出,但并不让人觉得不适应。

在设计中,如何做到网页元素与logo相呼应?

并且爱奇艺也将绿色元素大量运用在icon设计中,与自身的logo相呼应。爱奇艺的绿色单看可能过于亮眼,但是从网页的整体看,很好的做到了强调的功能。

在设计中,如何做到网页元素与logo相呼应?

案例二:芒果tv

芒果tv也是用颜色呼应logo的经典案例。打开芒果tv,映入眼帘的也是随处可见的橙黄颜色,首页热门节目的标题字体颜色也尽量用橙黄表示。

在设计中,如何做到网页元素与logo相呼应?

同时重要的标题、按钮、控件也用橙黄突出。不同的橙色渐变,也显示出不同的优先级,是一种常见的设计方式。

在设计中,如何做到网页元素与logo相呼应?

小结:

logo的颜色一般是网站的主题色,所以主题色与网页元素的icon或者字体颜色相呼应是一种非常好的解决方案。

在设计中,我们可以将一些强调的标题文字icon的颜色控件的颜色换成主题色。用户打开网页时会很容易被这些颜色所吸引,却也不会感到突兀。所以合理地运用logo的颜色,可以让网页整体的视觉统一,并且重点突出,也可以更加有效地传达信息。

二、Logo与控件结合

第二种方法是Logo与控件结合。这种方法大多适用于外形可爱的logo,他们可以添加到首页的一些控件中,这样也可以增加整个网页的活力。

案例一:百度

百度的logo是一个可爱的熊掌。在百度的网页设计中,设计师选择用蓝色来对网页搜索中的重点进行突出。分段控件的切换,以及一级标题和二级标题的,以及带链接的文字,均是用蓝色体现。并且,在页尾处,百度将logo与页码控相结合,做到logo与控件元素的呼应。

在页码切换的时候,当前选中页的上面就是logo的图案,未选中页是logo旋转90度,并把透明度调低。页码的设计让整个页面活泼了起来,不会让整个显得严肃、沉闷。

在设计中,如何做到网页元素与logo相呼应?

案例二:天猫

天猫是一个很好的Logo与控件结合的例子。在右方的侧边栏添加logo,使整个网页看起来更有活力(标1处)。同时将天猫超市、天猫国际两个天猫的热门入驻商铺的入口,也添加了logo标识(标2处)。

不仅如此,在二维码登录处,也加上了3D的logo图案(标3处)。右侧工具栏的会员登录也同样是用天猫的logo。

在设计中,如何做到网页元素与logo相呼应?

小结:

如上文中所述,此类logo的变形适用于外形可爱的logo。网页可以添加的地方,像用于分类侧边栏、分段控件、公告栏,这是很好的可以添加logo的地方,logo可以出现在控件的顶部、侧部或者是对角上,这也可以同时起到一个标识的作用。

其次,每个文字标题前,也是可以添加logo的地方,起到入口的提示。不仅如此,logo的图像也可以用到用户头像上,用户未登录的状态以及默认头像的状态都可以是logo图案。

三、Logo变形

第三种方法,可以将logo进行变形,提取logo的外形结构做成相应的icon或者是加载动画、提示动画等等,也是一种很好的与logo呼应的方式。其实刚刚上文中所说的天猫超市和天猫国际的入口,也是一种logo的变形。将logo的形状与按钮相结合,也是一种logo元素的体现。

案例:哔哩哔哩

体现logo元素怎么能不提可爱的b站呢!在一些标题栏前,可以看见b站标志性的小电视机。b站的设计师们将logo与b站经典的Q版人物结合在了一起,做为标题的分区提示,是整个网页看起来活泼又年轻。

在b站网页中国中手机app端下载通知,也是由他的logo变形而来的,鼠标悬停还有电视机变形为手机的动画,动画整体与手机app下载入口的设计十分贴合。当然,一定要提的还有加载视频时可爱的电视,b站的这个设计使得枯燥的加载过程也变得可爱了起来。

在设计中,如何做到网页元素与logo相呼应?
在设计中,如何做到网页元素与logo相呼应?

小结:

此类logo变形的难度较大,这种方法需要设计者可以很好地提取logo的中的部分结构或着造型转变为含此元素的动画icon,也可以在控件上加上logo图案的动画。虽然这类方案实现的成本很高,但是logo在网页中的融入感是非常可观的。

logo的图案在网页中随处可见,使得网页非常具有设计感和个性化,而这样的个性化是一个网页非常好的标签。

总结

虽然接到这个修改建议的时候,我也是有点迷茫的,但是在参考了各大互联网的门户网站,也算有了一些思路。我也是通过这次的调查,才发现logo元素在网页设计中的体现也是大有文章。不要小看任何一个网页中的标题颜色、icon或者是控件的设计,这些都是设计师们的思考与表达。

 

本文由 @天空的鱼 原创发布。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

新一代大数据用户行为分析与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合分析用户行为数据和业务数据,可以自动监测网站、APP、小程序等多种渠道推广效果分析,是增长黑客们必备的互联网数据分析软件。数极客支持实时多维分析、漏斗分析、留存分析、路径分析等十大数据分析方法以及APP数据分析网站统计网站分析小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据分析模型,是数据分析软件领域首款应用定量分析与定性分析方法的数据分析产品

发表评论

评论已关闭。

相关文章