北京上石轩文化传播有限公司，一个专业做美工的团队，帮您解决淘宝装修问题。价格美丽，欢迎骚扰，淘宝下单有保障。
图片来源花瓣网
在网页设计中，将logo元素添加到整个网页中，使之两相呼应的方法有：颜色呼应、logo与控件结合、logo变形。
一、颜色呼应
用一句话概括，就是页面元素与logo的颜色相呼应。这也是一种非常常见的呼应办法。通常网站的logo会有一个固定的颜色，将该颜色通过文字、控件、icon设计表现出来，是一种很好的呼应网页元素与logo相呼应的办法。
案例一：爱奇艺
绿色可谓是爱奇艺的标志性颜色。打开爱奇艺，可以清晰看见爱奇艺将它logo中的绿色元素融入界面UI中，需要高亮的字体也会运用绿色来表达。打开网页时，可以发现绿色非常的突出，但并不让人觉得不适应。
并且爱奇艺也将绿色元素大量运用在icon设计中，与自身的logo相呼应。爱奇艺的绿色单看可能过于亮眼，但是从网页的整体看，很好的做到了强调的功能。
案例二：芒果tv
芒果tv也是用颜色呼应logo的经典案例。打开芒果tv，映入眼帘的也是随处可见的橙黄颜色，首页热门节目的标题字体颜色也尽量用橙黄表示。
同时重要的标题、按钮、控件也用橙黄突出。不同的橙色渐变，也显示出不同的优先级，是一种常见的设计方式。
小结：
logo的颜色一般是网站的主题色，所以主题色与网页元素的icon或者字体颜色相呼应是一种非常好的解决方案。
在设计中，我们可以将一些强调的标题文字、icon的颜色、控件的颜色换成主题色。用户打开网页时会很容易被这些颜色所吸引，却也不会感到突兀。所以合理地运用logo的颜色，可以让网页整体的视觉统一，并且重点突出，也可以更加有效地传达信息。
二、Logo与控件结合
第二种方法是Logo与控件结合。这种方法大多适用于外形可爱的logo，他们可以添加到首页的一些控件中，这样也可以增加整个网页的活力。
案例：百度
百度的logo是一个可爱的熊掌。在百度的网页设计中，设计师选择用蓝色来对网页搜索中的重点进行突出。分段控件的切换，以及一级标题和二级标题的，以及带链接的文字，均是用蓝色体现。并且，在页尾处，百度将logo与页码控相结合，做到logo与控件元素的呼应。
在页码切换的时候，当前选中页的上面就是logo的图案，未选中页是logo旋转90度，并把透明度调低。页码的设计让整个页面活泼了起来，不会让整个显得严肃、沉闷。
小结：
如上文中所述，此类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的中的部分结构或着造型转变为含此元素的动画、icon，也可以在控件上加上logo图案的动画。虽然这类方案实现的成本很高，但是logo在网页中的融入感是非常可观的。
logo的图案在网页中随处可见，使得网页非常具有设计感和个性化，而这样的个性化是一个网页非常好的标签。
总结
虽然接到这个修改建议的时候，我也是有点迷茫的，但是在参考了各大互联网的门户网站，也算有了一些思路。我也是通过这次的调查，才发现logo元素在网页设计中的体现也是大有文章。不要小看任何一个网页中的标题颜色、icon或者是控件的设计，这些都是设计师们的思考与表达。
今天就先说到这里，上石艺术有天马行空的想象可打破常识的束缚，唤醒大众的审美角度，专业做淘宝美工外包，对于设计有自己的独特风格以及态度。美工外包找我们，更可靠！
网友评论