网页设计后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设计图。
或许类似于软件开发,这算是产品设计的去瀑布流,把敏捷模式引入到全流程。
最新评论
- 相关文章
增强现实引擎ARToolKit工作原理简介
ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;
html5跨平台实战-第一周-水平测验-新闻列表页面
这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图
JavaScript事件模型图解
在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
event是用户操作网页时发生的交互动作,比如clic...使用CSS3 box-decoration-break特性实现多行文本样式
当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
按照规范...Web界面编程状态变化和JS开发框架(React/Angular/Ember)
UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,...
HTTP1.1协议现状、问题和解决方案
HTTP的现状最早的HTTP协议非常简单,只能用来传送文本,方法也只有GET,后来逐步发展到1.1,能够支持多种MIME格式数据(如文本、文件),支持GET,POST,HEAD,OPTI...
Three.js入门教程6 - 创建全景图和纹理
全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...
WebGL入门教程3 - Canvas、Context、API和绘制一个矩形
使用Canvas绘制完美的不完美圆形
真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...
使用top/left/margin和CSS3 translate两种方法实现标题居中的性能差异详解
要实现标题全屏居中(同时在垂直和水平方向居中),有若干种方法,包括使用弹性布局、表格单元、绝对定位、自动外边距和CSS3平移变换等。你可能已经使用了这些方...
jQuery Ribbles - 基于WebGL的水面涟漪动效插件
使用jQuery
Three.js 3D打印数据模型文件(.STL)加载
3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...
如何使用CSS3实现书页(书本)卷角效果
我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...
使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...