网页设计后PSD时代(Post-PSD Era)
我们已经进入了网页设计的后PSD时代了吗?
在我的整个职业生涯,我常常看到非常有才华的设计师浪费了大量的时间来创造一个拥有网站全部细节的PS设计稿,像素被注明,细节效果被费力的展示,页面打印出来,挂在墙上,呈现给客户,
客户据此指手画脚给出反馈,然后设计师进行修改。如此反复直到所有人满意为止(或者没人再在乎No one gives a shit,出现这种情况比你想象的要频繁)。只有这个时候这些设计稿才会被提交给(更像是推给More like a push)开发人员来进行构建。
可惜在多设备(multi-device)时代,这个笨拙的流程正显得越来越没有意义。我并不是说要整个的扔掉Photoshop然后完全在浏览器上进行设计(Chrome开发工具又哪里有混合模式呢?),而是说在新型网页设计趋势下如何更好的理解Photoshop的使用方式和场景。
Photoshop适用于(Photoshop is great for):
创建和编辑图像,正确的废话,编辑图形元素这个是PS的驾驶室。
建立设计基调(design atmosphere,如同Andy Clarke所言): 颜色,结构(textures) 以及整体设计感觉。这个在我看来是Photoshop和浏览器开发工具以及纸质设计相比较的最大优势。
草图(Sketching) – 毫无疑问Photoshop, 纸张原型会比用代码构造原型更快。不过,我得说一些工具比如像Codepen,正在变得让使用代码构造原型越来越他妈容易。
开发Style Tiles, mood boards, 等等。这些或多或少都和设计风格有关。
Photoshop不适用于(Photoshop is not great for):
创造完整的填满的设计对象 – 实际上基本不可能在PS里描述清楚网站所有的环境、分比率、用户偏好和细节,停止尝试。停止描述“iPhone view” “iPad view”以及“Cinema display” view。有多得多的情况要处理。
描述状态、动效(Articulating states) – 对于悬浮(Hovers), 点击(clicks), 以及其他交互元素,直接构造原型比在Photoshop里的设计低质量图层对象要好。整个网站工作还有更多方面需要处理(性能、响应性、人类工程学、总体感觉),而不仅仅是视觉差异。使用PS勾勒出一个想法是一件事情,不过依照我的经验,设计师通常会越过这类事情的边界。
使用让你感到舒服的工具,清楚的辨别出什么时间点什么程度下会失去意义。充分而合理的使用你工具箱里面的各类工具,各擅其事,想出办法和客户沟通你的设计想法,而不是促使客户认为会有一个完整的拥有所有细节描述,毕其功于一役的PSD设计图。
或许类似于软件开发,这算是产品设计的去瀑布流,把敏捷模式引入到全流程。
最新评论
- 相关文章
ARCore基本概念和工作原理简介
谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。基本上ARCore做了两件事,首先跟踪手机...
如何使用BabylonJS加载OBJ或STL模型
BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
本文说明和演示如何使用babylon.js来加载一个标准3d模型文...常见面试题JS语言中四种函数调用方式实例讲解
JS的语言世界中函数(function)是一等公民,函数的调用有多种方法。普通调用这个是最常见和直接的方式:function
常见面试题JavaScript闭包(ES5语法)
JavaScript闭包(Closure)是常见的JS面试题,是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包,有意或无意间。比如编写一个jQuery鼠标点击处理函数:$(function()
HTML5动画背后的数学2 - 仿生智能算法综述
Blender2.7 快捷键一览表
通用操作
停止当前操作:ESC
快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
单选:鼠标右键(RMB)全选:A
框选:B
刷选:...Three.js入门教程4 - 创建粒子系统动画
嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。
CSS3图片混合(Blend)效果及其参考计算公式一览表
在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边...
Processing.js和P5.js的功能简介和区别
什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
什么是Processing.js为了能让Proce...div 、section 、article的区别和使用场景
div 、section 、article的区别和使用场景
主要区别,以及适用场合如下:
1、div在html早期版本就支持了,section和article是html5提出的两个雨衣话标... 更多...