摘要:本篇网站设计教程将为大家讲解网站设计的知识点,看完这篇文章会让你对网站设计的知识点有更加清晰的理解和运用。
本篇网站设计教程将为大家讲解网站设计的知识点,看完这篇文章会让你对网站设计的知识点有更加清晰的理解和运用。
传统的PS网页设计已经跟不上如今流式布局潮流的发展了,PS不可能把所有移动设备的尺寸都做一个版本出来。如果PS的页面过多,期间要修改一个通用的东西,也是牵一发而动全身。网页效果图设计新思路:使用html+css+less完成你的任务吧!
旧流程:P图
在网页设计的过程中,效果图一般总是通过Photoshop做出来的。多则几十过百的图层以及各种PS效果的确是把网页的样式效果做出来了,并且也容易分块切图或者直接在其中取到某些图片素材。
新思考:P的图太多,有好多小地方要修改怎么办?
如果要用在响应式网站的设计并且内容都要使用流式布局的时候,要对每种情况都对应着去做一张PS效果图,工程量巨大,并且显得不太现实。另外当你需要修改网页中某个元素的大小或背景的时候,手动对一张张PS效果图作修改简直是一个噩梦。
这引发了对设计流程以及使用工具的新思考:能否在贴近并尽量覆盖各种真实使用环境的情况下, 又易于修改?
答案:网页效果图设计新思路
答案是抛弃原有的在PS效果图制作方法,转而使用HTML以及CSS等构建真实的基础网页效果,最终以截图的形式获得效果图展示给客户。客户对某个地方提出修改意见时,你回去执行改动也会变得很轻松,只需修改CSS中的一两行代码;若是使用less的话,有时只需改一个变量值,就能达到想要的效果。
或许你会抨击这不就将样式设计与前端代码构建的职能混淆了吗? 其实HTML、CSS等只是制作效果图的工具,网站效果轮廓前后当然是差不多,但这并不是最终的前端代码,仅用作基本的效果展示。最终网站前端实现的代码结构,还会跟后台输出、适应组件化复用、还有浏览器兼容等有关,可以说它们完全是两码事。
不要害怕学习
要做到蜕变,这给网页设计者更高的要求,脱离Photoshop去学习基本的前端语言。新时代下, 网页设计不再可能像平面设计那样的专职于图形图像,还要结合Web技术来使设计更贴近浏览器的真实环境,同时也减少了不必要的重复劳动。
可能在固定布局的设计中,Photoshop依然是最好的工具,但流式布局响应式设计的浪潮涌来,能突破传统结合Web技术来做设计,才能走在前端,赢在未来。
收获的感动
我多年前已经开始尝试使用PS和前端技术混用,收到的效果很大。特别对于独立开发者来说,我们经常要同时做UI设计和前端开发,在UI这一端使用HTML和CSS的话,后面的开发流程更加轻松,在前端开发时能参考或者复用的地方你会发现有很多,节省了你重复狂敲Emmet的时光。
以上,关于网站设计的全部内容讲解完毕啦,欢迎大家继续关注!更多关于网站设计的干货请关注职坐标网站设计频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号