当前位置: 首页 > news >正文

Web设计流程优化:网页效果图设计新思路

传统的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的时光。

相关文章:

  • Android稳定性测试工具Monkey的使用
  • 基于C#的MongoDB数据库开发应用(4)--Redis的安装及使用
  • jz2440上内核和文件系统移植
  • 得到一个数组中任意X个元素的所有组合 即C(n,m)
  • 事务隔离(二):基于加锁方式的事务隔离原理
  • mybatis随笔一之SqlSessionFactoryBuilder
  • 公司招聘
  • 在linux服务器上装svn版本管理,自动同步代码到项目根目录
  • web服务器配置及nginx和mysql部署
  • 2017.02.15
  • linux中的awk用法入门详解(二)
  • javascript事件失效l
  • 【Spark Summit East 2017】Spark,类型函数式编程的引诱者
  • linux命令大全之watch命令详解(监测命令运行结果)
  • Elasticsearch之更新(全部更新和局部更新)
  • [译]Python中的类属性与实例属性的区别
  • 【跃迁之路】【669天】程序员高效学习方法论探索系列(实验阶段426-2018.12.13)...
  • Docker入门(二) - Dockerfile
  • ES6 学习笔记(一)let,const和解构赋值
  • Idea+maven+scala构建包并在spark on yarn 运行
  • jquery ajax学习笔记
  • js
  • k8s 面向应用开发者的基础命令
  • LeetCode29.两数相除 JavaScript
  • mac修复ab及siege安装
  • Mysql优化
  • Octave 入门
  • vue从创建到完整的饿了么(11)组件的使用(svg图标及watch的简单使用)
  • WinRAR存在严重的安全漏洞影响5亿用户
  • 搭建gitbook 和 访问权限认证
  • 聊聊flink的TableFactory
  • 面试题:给你个id,去拿到name,多叉树遍历
  • 浅谈JavaScript的面向对象和它的封装、继承、多态
  • ​ 无限可能性的探索:Amazon Lightsail轻量应用服务器引领数字化时代创新发展
  • ​LeetCode解法汇总2808. 使循环数组所有元素相等的最少秒数
  • $NOIp2018$劝退记
  • (2)STM32单片机上位机
  • (42)STM32——LCD显示屏实验笔记
  • (Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例
  • (第二周)效能测试
  • (每日持续更新)jdk api之FileFilter基础、应用、实战
  • (转)Linq学习笔记
  • (转)利用PHP的debug_backtrace函数,实现PHP文件权限管理、动态加载 【反射】...
  • ./mysql.server: 没有那个文件或目录_Linux下安装MySQL出现“ls: /var/lib/mysql/*.pid: 没有那个文件或目录”...
  • .describe() python_Python-Win32com-Excel
  • .NET Core 将实体类转换为 SQL(ORM 映射)
  • .NET Core中的去虚
  • .Net MVC4 上传大文件,并保存表单
  • @javax.ws.rs Webservice注解
  • @RequestParam @RequestBody @PathVariable 等参数绑定注解详解
  • @TableLogic注解说明,以及对增删改查的影响
  • []FET-430SIM508 研究日志 11.3.31
  • [100天算法】-二叉树剪枝(day 48)
  • [C#基础知识系列]专题十七:深入理解动态类型
  • [CareerCup] 13.1 Print Last K Lines 打印最后K行