用Fireworks完成网页设计的全部流程[转]


banner.jpg




原文地址:




每位设计师都有自己习惯的工作流程,有时候没有固定的流程,但是长期工作也会养成一种固定的工作模式。经典的设计流程是,从创意到草图,从设计再到上线。其中有很多小环节,设计师往往会在PS、AI、Fw以及浏览器中频繁切换。未免让人感觉有些麻烦,那么是否有一款工具可以完成全部流程呢?

1.jpg



近几年来,我把Fw当成了我的主要工具,Fw为屏幕设计而生,是对象导向的设计工具。可以说,Fw是专门进行UI设计的工具。尽管PS相较前几版本,有着长足的长进,而且也能够支持矢量,但是论速度、效率、简洁性,它还是不如Fw。利用FW你可以完成整个项目的全部流程(草图->线框图->图形设计->导出),我还是觉得,设计师有想法就够了,工具只是工具,只是表达手段,如果有了一款简洁高效的工具,为何不使用呢?




一、草图阶段




个人认为,草图阶段是整个设计流程中最有价值的阶段。除了使用Fireworks,还有其他方法可以完成草图。创意流程的重中之重——草图绘制。



11.png 
图标绘制草图

111.jpg 
“Quest”



草图设计可以很简单,一张纸一根笔足以,也可以直接使用Fireworks,一般来说在草图设计阶段,我个人通常使用好几种方法,采用何种方法,主要取决于时间还有项目。




1.高保真草图




高保真草图是个好方法。它能够让设计突破数码工具的限制,用铅笔随心所欲的绘制草图。因为高保真草图一般是绘制在纸张上的,所以具有更好的细节,更强的表现力。而且在草图上完成协作非常方便,同事也可以很方便的给出



小Tips:



写下注释,而且一张不够时,可以打印出来,让创意流淌在充满匠气的绘图纸上!



1111.png 
移动端UI设计和交互设计的高保真草图




“那么何时开始草图绘制呢?”你可能想问,你可能非常想要快速的进入实际设计阶段,你可能觉得草图绘制有点浪费时间。但是你不知道,在草图上能够更快速的完成版本迭代,可以在草图纸上很方便的设计出多个备选版本。这就是老派方法的威力。



推荐使用一些草图模板,能够保证UI设计的一致性,也能提高草图绘制的效率。

11111.png 
尽量在草图阶段多提出概念,不断迭代。




2.低保真草图(记号笔+纸张)




使用简单的记号笔配合纸张,也能够快速的完成草图,不过是低保真草图(意味着不需要过多的细节)。相较高保真草图,这种草图绘制方法能够帮助你迅速捕捉创意,掌握概念。在商店中随处可以买到记号笔和纸,而且更加随心所欲,不像草图本,随便撕一张纸,即可立即创作。



看看这个:David Gray采访37signals的Jason Fried,在访谈中他们谈及到了低保真草图,非常有趣的一场访谈。



22.png 
Jason Fried与草图设计




小Tips:



草图可以帮助绘制站点地图,绘制用户流程。不妨多试试用草图表达理念,可以激发创意,提高设计效率。




3.白板与照相机




这招我常用,因为白板比纸张更容易修改,而且一旦不满意,可以全部擦掉,从而不被前面的创意所影响。当和同事在会议室中使用白板进行讨论时,头包风暴的结果可以立即呈现。大白板可能有点贵,可以买一个稍微小的。

222.png 
无需过多细节——只需捕捉理念




4.用Adobe Fireworks进行草图设计




Fireworks的美丽之处在于,你既可以用它来创造矢量对象,又可以用来进行位图编辑。Fireworks支持Wacom绘图板,支持压力传感设备。但是流量控制可能不如PS,也就是说,Fireworks可以用来绘制一些矢量笔画。虽然和纸笔想必,用Fireworks绘制草图可能不是那么的自由,但是呢,一款设计的设计流程,完全可以从Fireworks开始,从Fireworks结束,包括草图阶段。



小Tips:



当使用Wacom绘图板时,小Tips使用较大的画布尺寸,比如2500 x 2500px,因为绘图板比较敏感,在小画布上绘制草图可能比较吃力。在大画布上,你能更好的控制,能够得到更精确的细节。



个人的习惯是,一般在白板上完成创意阶段,然后用iPhone拍照,邮件给自己(或者存到Dropbx),然后根据草图,在Fireworks进行线框图设计。

33.png 
使用手机快速拍照草图,然后发给自己

333.png 
没有扫描仪,那么可以使用手机拍照



二、线框图阶段



1.思考设计模式




当在Fireworks开始进行草图设计时,最先要考虑的一点,便是设计模式。思考设计模式,不等于直接套用现有的设计模式,翻翻那几本《设计模式》书籍,从中寻找直接可用的模式,也不是直接按照现有的界面设计惯例进行设计,比如说文本框、搜索栏的惯用方法。思考设计模式,指的是,整体设计中的各个元素,都应该以怎样的形式存在,比如说整个界面/应用中的滑动栏应该是怎样的形式?整个应用中内容列表应该都遵循什么样的样式设计?整个应用中的用户资料都应该是怎样的视觉形式?Fireworks的优点在于,能够帮助你迅速的确定“模式”,提供了极为方便的文档库,你可以很方便的重新调用。也可以选择一组对象,转换为元件。如果元件中的一处细节发生了改动,那么整体设计中所有此类元件的细节都相应的发生改动。




小Tips:



960网格是一款流行的CSS框架。能够自动设置网格式参考线。FW 960网格插件

如果想要进行响应式设计,不妨看看Matt Stow的《Export Responsive Prototype》这篇文章,能够让Fw导出的切片实现响应式布局。




2.创造页面




网页设计,一般我会从header开始,这样就能顺便完成滑动栏、搜索栏的设计,以后也都用得到。在页面面板中,我会将此定义为“主页”。这样,其他页面就能够分享使用主页面中的元素。很方便,很能提高效率,这样就不用重新设计这些元素了。



在页面面板中右键单击页面,选择“设置为主页”即可。

QQ图片20140107154243.jpg 
设置为主页




这就是“模式化思考”的威力,一种元素只需一次设计,再次使用只需重新调用,而无需重设计,更准确的说,这是“模块化设计”。



页面有着自己的属性,比如画布宽度以及高度,分辨率和导出选项。这个我们稍后讨论,Webdesign Tuts+关于此有着不错的教程,标题是《Getting Started With Fireworks: Using Master Pages, Pages and Web Layers.》,推荐大家看看,页面有着自己的尺寸,这是Firewroks的有点,将header作为主页很好,因为用户打开浏览器窗口,首先看到的就是header,页面长度可以按情况来定。而footer可以不包含在主页中,但是作为元件库时,很有用。下面我们来看看元件。


新页面可以重复调用主页中的一些元素——headers,footers,sidebars(页眉、页底、滑动栏),这样升级也非常方便。




3.创建并使用元件




文档库的存在,提供了“重复使用”这一高效理念。而库中的元件可以是多个对象所结合成的编组,想要在多个页面中反复使用登陆填表吗?只需把登陆填表域的元素编组为库中的元件,那么便可以对该元件进行大小调整、样式编辑、重复调用。



创建元件的方法是,选择想要添加的对象,选择“修改->元件->转换为元件”即可。然后在文档库面板中即可找到该元件。对该元件进行修改,那么整体设计中所有该元件都会相应的改动。

2.jpg 
文档库面板,在其中可以找到你创建的元件



Noupe网站收集了一份Fireworks库素材,很值得一看,可以用于原型设计和实际设计。Hannah Milan提供的Fireworks Wireframing Kit也提供了很多有用的 UI组件。




三、视觉设计阶段




一旦客户通过了线框图,那么我们便完成了网站框架设计阶段。现在可以注重于视觉阶段——关于图像、字体、色彩的视觉设计。




1.矢量图和位图




现在已经完成了线框图,现在需要给页面添加字体和色彩。Fireworks结合了位图编辑和矢量对象创建功能,个人喜欢使用矢量格式,因为可缩放,能够随意调整。FW提供的矢量编辑工具非常容易使用,很多AI中的功能在Fw中同样具备。在工具栏中可以找到很多有用的图形编辑工具,在路径面板中,提供了很多实用的工具,用来编辑矢量图形。

3.jpg

Fireworks提供了矢量编辑和位图编辑工具。


Fireworks完成的矢量插画



2.图层,子图层,群组



在Fireworks中,图层更像是AI中的图层,而不是PS中的图层。每个图层都是独立的对象,可以任意命名,这样同事修改起来就很方便。我通常会把主要图层根据整体设计流程来命名,然后设置好子图层,让整体看起来井然有序。一般命名为“header(页首)”、“Twitter Block(新浪微博区,lol)”,这样其他同事就能很方便的理解整体布局。除了图层,Fireworks还支持编组对象为符号,这样调用、修改起来更方便。



3.属性面板




Fireworks还有一点非常棒!自动属性侦测面板,一般在屏幕底部呈现,,提供了填充、描边、渐变、图案、对象位置、缩放、动态滤镜、不透明度、混合模式、文本属性等等修改参数。更重要的是,非常智能,如果你选中的是文本,那么属性面板会切换到和文本相关的属性,如果选择的是矢量图像,那么属性面板会切换到矢量相关的参数。



小细节导致高效率,这就是体现。


万能的属性面板。




4.动态滤镜




还记的PS中的调整图层吗,我们可以在Fw中给对象添加动态滤镜,无破坏操作,而且滤镜效果也被考虑到了网格对齐中。这样整体的布局就无需重新调整。



还可以实现多个动态滤镜的堆叠,一个对象可以使用多种滤镜。例如你可以给一个对象添加非常凝重、但是较细的发光,然后再添加第二重其他颜色的发光。动态滤镜可以随意编辑,可以随意切换一个对象多个滤镜的顺序。


属性面板中的动态滤镜




但要记住一点:属性面板中的动态滤镜和Fw顶部菜单中的滤镜是不同的。动态滤镜可编辑,而常规滤镜不能。




Fw绘制的图标




四、导出




现在,我们将线框图转化为高保真全词啊设计,现在可以考虑将设计转换为HTML&CSS形式的网站了。利用Fw优秀的压缩和导出功能,能够将设计中的不同部分提取出来,以便用于标题、按钮和背景图像。




1.定义切片




完成视觉设计后,开始要考虑导出问题,将文件导出为浏览器可读取的文件。切片工作和PS有点类似,可以将选区导出为位图,或者导出为CSS适用形式。



Fw在文件格式上还有一个优点,那便是根据文件格式,在一个文件中实现不同方式的切片。Gif Jpg Png可以同时存在一个Fw文档中,无需切换软件,快速切,真是高效。



按下键盘上的2,可以快速的开关切片



使用切片工具,也可以手动画切片,因为Fw主要是面向对象的工具,你可以非常方便的选择对象或者组,选择“创建切片”(编辑->插入->矩形切片),切片会自动根据对象尺寸而生成,其中也包含了设置的动态滤镜。



小Tips:



使用切片工具可以快速切出对象尺寸,而且内含了滤镜,不会把滤镜“切出去”非常方便。

Fw的切片功能还有一个点很酷,我们可以给不同的切片命名,定义格式,提供了“点击导出选项”,能够把所有切片保存到一个位置。简单的选择对象,再选择编辑->插入->矩形切片,然后打开优化面板,可以选择Fw的预设,也可以自己设置。




Fw的另一秘密武器就是强大的切片功能,让你非常方便的导出元素。



要记住背景也是切片的一部分。可以将按钮和其他UI元素设置为全Alpha透明,然后调整背景尺寸。

小Tips:

小调整之后,便可以快速导出切片对象。简单右键点击切片,选择“导出所选切片”,这个方法同样适用于多个切片的选择。




2.默认导出




在优化面板中,可以设置导出格式,也可以使用默认导出格式。你可以将单个切片导出为JPG,然后将剩余切片导出为PNG。我一般经常会创建一个独立页面,命名为“导出页”,用来导出背景sprite,从而保持图像完整。然后选择相关UI元素,创建新页面,复制到新画布中,再导出这些元素为CSS sprite格式。这对于CSS开发的定位来说,也很方便。

小Tips:

Fw有着自己的原生PNG格式,可以在浏览器中进行预览。我利用这个功能,经常会把最新的进展展示给客户。但是要警惕:多页布局可能会非常大,下载略慢。而且在Fw PNG中,会默认展示首页。




3.导出选项




创建切片或者已经给客户展示后。可以打开Fw的导出窗口,每种格式都有针对的导出选项,非常方便。




五、自己动手试试




这就是在Fw帮助下完成的设计流程:非常简约,从草图,到线框图,再到视觉设计,再到导出,一个Fireworks即可快速完成。



矢量图+位图编辑、对象的重复调用、优异的动态滤镜、强大的导出功能,不得不说Fw是屏幕设计的绝佳工具。



梦幻般流畅的工作流程,只有Fw能够提供。




拓展阅读



(为何弃用PS,而使用Fw进行网页设计,10个原因)


· “7 Reasons Why I Choose Fireworks Over Photoshop,” Russell McGovern, Webdesigner Depot

(选择Fw,不用PS的7个理由)


· “Fireworks tips and tutorials,” Rogie King, Komodo Media

  ( Fw建议与教程)


· “Interaction Design and Rapid Prototyping With Fireworks,” David Hogue, Adobe Developer Connection

(用Fw实现交互设计和快速原型设计)

(用Fw设计线框图和原型图:资源与教程)


· “35 Excellent Wireframing Resources,” Cameron Chapman, Smashing Magazine

(35个优秀的线框图资源)


· “Refining Your Design In Adobe Fireworks,” Benjamin De Cock, Smashing Magazine

(用Fw重新定义设计)


· “Design Better And Faster With Rapid Prototyping,” Lyndon Cerejo, Smashing Magazine

(更好更快的原型图设计)

标签: 设计, Fireworks, ps, ai, 网页

此文章共有条评论, 人参与 |Powerd By Angboo