关于伟创 伟创新闻 伟创案例 网站套餐 联系方式
只做吸引客户的精品站!

UI设计师懂点前端知识是提高效率的开始

洛阳网络公司 / 2017/7/22 16:16:32
[核心提示] UI:设计稿的banner图怎么没有全部显示啊?为什么左右两边不见了?1920px * 400px的图被你弄成1600px * 400px了! 前端:你电脑屏幕不够宽显示不了啊大姐! UI:给我全部显示啊,那是精华! 前端:......
UI设计师懂点前端知识是提高效率的开始

UI:设计稿的banner图怎么没有全部显示啊?为什么左右两边不见了?1920px * 400px的图被你弄成1600px * 400px了!
前端:你电脑屏幕不够宽显示不了啊大姐!
UI:给我全部显示啊,那是精华!
前端:......

5分钟后

前端:大姐,你要的全部显示。
UI:为什么图片变这么矮了啊,1920px * 400px的图被你弄成1600px * 300px了!不够大气!
前端:那个谁,java、php,我们去下午茶吧~
UI:¥#@&*%%@#¥
-----------------------------------------------

类似上面的案例就不多说了,还是说一句吧,banner图在设计时本来就要考虑网页的可视范围毕竟浏览器有很多种分辨率你要考虑最小和最大分辨率的情况不然就是你的错!

呐,说好了说一句就是一句吧,马上进入正题!

我们以往在做网页设计时都会定一个可视范围,例如宽1600px的画布,我们定可视范围为宽1200px,那么在排版时左右两边多出来400px一般情况下我们都不会塞内容进去,那是留给特殊模块使用的。

类似这样的功能也有很多,例如很多电商网站都会有一组悬浮按钮在左边,1F-服装,2F-家电,3F-手机……功能都很实用,但都不会是主要内容,主要内容当然显示在可视范围内。

那么开篇举出的banner例子,我这里也详细说明一下,首先普及一个主流浏览器分辨率的知识。

 

 


先忽略移动端,大家可以看到,主流的分辨率是1920,其次是1366,说明大多数人不是在用宽屏的台式机,就是在用手提电脑,那么banner该怎么设计?别急~

大家把目光移动到我刚刚随手一截的站酷的那个图片的上面那段话的第一句话:

“我们以往在做网页设计时都会定一个可视范围”

这里重点强调的是“以往”,因为以往没有响应式设计,什么是响应式设计?就是当分辨率在不同情况下页面会跟随发生不同变化。以往大家都是一个分辨率一稿过,不过现在的网站没有哪几个不做响应式了,因此,版面也要跟着做多个分辨率的版本。大家先有这个概念,我们继续刚刚的“以往”的banner设计,就是一个分辨率一稿过的banner。

假如我们定的banner宽是1600px,那么这时就会有2种基本情况,拿一张我2年前做的图来示范哈:

1、当分辨率是1920时,怎么显示banner?

左右两边因为图片不够宽,所以空出来了。假如前端没有设置好,直接将图片重复读取。

2、当分辨率是1366时,怎么显示banner?

因为屏幕太小的原因,无法显示全部图像,两边被裁剪掉了,这样也达不到宣传效果。

因此,在设计banner时,尽量按1920来设计,再定一个可视范围,这里建议1200,也就是说,左右两边空出来位置是可有可无的设计,如纯色、渐变色、装饰性的花纹等。

这里顺便给大家科普一下前端实现这个banner的方法哈。

前提:banner设计宽为1920px,高为400px。

首先前端会定一个高度,这个高度根据banner的高而定,所以定400px,而宽度是不用理会的,因为在前端的世界里background是可以多种设置的。

一般来说,居中展示使用情况是最多,而且也最能适配任何分辨率的(不好意思,上面打错字了,但我懒得改了哈哈哈哈哈)。

有人问,不能把图片在任何分辨率都撑满屏幕吗?

在任何分辨率下都显示全图,这种情况属于移动端会多一点,还有一种特殊情况就是客户要求。。。

我在做外单的时候还真遇过这样的客户,当时是做企业官网,要求以他(老板)的手提电脑(分辨率1366*768)为主,他说现在很多老板都在用手提电脑,所以我们要以手提电脑的视觉效果为主,并且在banner(banner设计初稿大概1920*600)下面要露出一点点企业介绍的内容又不能太多,很微妙的感觉。。。

我的天,每个浏览器的地址栏标签栏收藏夹栏都不一样高度,系统的任务栏也是不一样的高度,这些高度加起来大概在100px上下浮动20px,当时我身边没有手提电脑,做不了实际测试,就那banner(最终设计稿大概在1920*460左右)的高度调了差不多1天时间才让对方满意,但重点是,你不知道老板都是让员工去找解决方案的吗,员工用的电脑难道都是手提电脑吗。。。

好吧,题外话就不说了,我们的职责是让客户满意!

尊重作者原创 除非特别声明,伟创科技所有均为伟创原创报道,转载请注明原文链接。
原文地址:http://www.lywhy.com/Design/View.asp?id=1062  所属类别:整合设计
相关内容
伟创网络技术设计部分享原创干货设计之九步曲 2018/8/3
UI设计师懂点前端知识是提高效率的开始 2017/7/22
前端开发人员要如何做好自身定位 2015/12/7
资深网络设计师心态如何平静、稳定. 2015/11/30
洛阳网络公司的官网设计要求该如何设定 2015/10/15
猜你喜欢
过于宽泛和过于主观的网站关键词并不好 2013/3/25
刚毕业的网页设计师如何面对应聘难题? 2014/3/24
网站建设的灵丹妙药,让你轻松搞定网站建设 2016/5/2
病毒营销方案设计 2013/1/7
哪里的服务器托管比较好? 2013/10/10
影响网页设计效果的因素有哪些? 2015/6/18
少即是多原则在网站设计上的应用 2012/11/8
找家本地网络公司做网站 2013/5/1
什么是扁平化的伟创网站设计 2014/8/4
做网页设计时要知道的10个重要常规小技巧 2017/12/4
伟创热点
关于我们
公司简介
我们的优势
企业文化
公司愿景
加入伟创
伟创官方博客
金牌项目
网站建设
网站优化
软件开发
整合设计
网站运营
网站套餐
基础型网站
展示型网站
商务型网站
购物、商店型网站
FLASH动画型网站
行业、门户型网站
帮助中心
客户中心
公司SEO培训
seo顾问服务
支付方式
联系我们
我们的位置
关注我们
新浪微博
腾讯微博
人人小站
QQ空间推荐
花瓣网
建站百科全书
Copyright 2007-2012 LYWHY.Inc Sitemap 豫ICP备12012069号-1
Links
洛阳百科
建站百科