收藏本站 关于我们

UI设计师懂点前端知识是提高效率的开始(Banner篇)(原

发布时间:2017-02-20 11:23:14   来源:PS教程   人气:0

前言:UI:设计稿的banner图怎么没有全部显示啊?为什么左右两边不见了?1920px * 400px的图被你弄成1600px * 400px了

UI:设计稿的banner图怎么没有全部显示啊?为什么左右两边不见了?1920px * 400px的图被你弄成1600px * 400px了!

前端:你电脑屏幕不够宽显示不了啊大姐!

UI:给我全部显示啊,那是精华!

前端:......


5分钟后


前端:大姐,你要的全部显示。

UI:为什么图片变这么矮了啊,1920px * 400px的图被你弄成1600px * 300px了!不够大气!

前端:那个谁,java、php,我们去下午茶吧~

UI:¥#@&*%%@#¥

-----------------------------------------------


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


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


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


\


在前端的世界里,是可以根据不同分辨率作出不同的样式和排版,甚至新的元素在某个分辨率下出现或消失都可以实现,那么banner同样也可以根据不同分辨率以不同方式展现,例如:


PC主流的分辨率下,前端可将banner用居中的方式展现,设计师在做banner设计时只需要设定一个可视范围就够了,一般情况下还是推荐宽1200px作为可视范围。


移动端的分辨率下,前端可将banner用等比例缩放的方式展现,设计师在做banner设计时无需顾虑太多,图片怎么出就怎么展现。


当然,很多时候大家因为懒得处理这么细致,直接就是用居中的方式实现,省时省力。各位还是就实际情况跟前端讨论如何实现banner的展示吧。


除了banner,网页背景大图也是同样处理方式,不同的是背景大图可一直固定位置,也可随着页面的下拉而消失,但展示方式基本如上。


以上是我的一些见解,说得很浅,但容易理解,之后会一步一步引领大家多了解前端的世界。

本文来自PS教程网www.46PS.com,转载请注明!关键词:工作技巧工作技巧教程酷友观点经验


PS教程