MarsLau's Blog » 设计历程 http://marslau.com Mars博客，记录路上的点滴（个人日记 设计 css wordpress seo） Sat, 21 Apr 2012 01:17:50 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 在设计师的角度讲系统开发 http://marslau.com/archives/581.html http://marslau.com/archives/581.html#comments Wed, 25 Nov 2009 00:54:24 +0000 Mars Lau http://marslau.com/?p=581 公司开发某系统已经有一段时间了，功能已经得到一些客户的肯定，但界面不好看一直是个大问题，所以前两三周专门做这方面的改善。面对着N个界面的设计，N++个杂、碎、乱的页面整理，着实是件头疼的事情。还好这一切已经完成，为那两三周的忙碌总结几点吧。

先简单概述一下系统界面美化的工作流程

1、准备阶段：熟悉，看系统相关的文档，对系统有个大概把握，不至于设计时钻牛角尖；估量，大概总结需要改善细化的页面问题；估时，计划工作时间；定人，明确参与修改的人员，设计师和程序开发人员。

2、设施阶段：设计，设计系统需要美化重点界面；规范，制定页面布局展示结构，规范CSS；修改，参与和指导程序开发人员严格按照制定好的结构、规范修改页面，这个过程相当繁琐。

3、复查阶段：细查，如图标的透明背景、弹出框大小等等；补救，手动对每个界面简单操作一下，总结补救遗留问题；提交。

其实，很多程序员注重产品功能开发却忽略了界面易用性和美观，导致开发的产品糙，难看。他们忘记了系统开发是给人用的，操作的不便、难看，同样不会让用户中意。但如果每次开发都是让界面设计师去弥补，对设计师、对程序员都挺累的。与其这样还不如将展现层早日纳入开发日程。

站在设计师的角度为系统开发提供几点建议

一、设计师须参与系统设计。

《用户体验的要素》之五个层面

设计师的作用不应该只是对单一界面的美化，反过来说，如果他对开发的系统不理解，他的视角会很低，无法站在系统的高度有整体设计思路，一个界面炫只能解决表面问题，是解决不了较深问题的。Mars想这大概也是美工与设计师的区别所在吧。

最近在看Jesse James Garrett的《用户体验的要素》，其中讲了用户体验的五个层面（如图）：战略层、范围层、结构层、框架层、表现层。Mars看来，在前两个层面设计师必须充分理解，Mars在上这个系统开发时就忽略这两点，所以导致后期的弥补工作，后三个层面设计师必须直接参与，出界面、定规范等。这样的话系统设计、开发将按”一”道路顺利进行，不至于走”Z”形道路。

二、设计系统重点页面的效果图

Mars觉得出效果图必须是在充分理解系统的前提下，这样设计出来的界面才能在页面上诠释系统，而不单单讲究某个按钮的水晶效果什么的。在这个环节设计师就需要与系统开发相关负责人、测试人员（这里扮演”用户”角色）充分交流沟通，从日后扩展、易用、美观等各个角度思考设计。相比较程序开发来讲，出图还是小成本的事情，为了不走”Z”形道路，这些界面一定要好好斟酌。

三、设计师协助程序开发负责人设计开发规范。

其中设计师协助的可能包括，系统目录架构，方便日后样式更换；展示页面，页面布局的程序结构；名称规范，布局结构标签、CSS样式、图片相关名称规范等。

以上工作及相关规范的提出，给日后程序开发提供了方便，样式这一块，只需套用通用的结构就行了。

四、系统开发的人员组织

要求系统开发人员严格按着设计图和规范来走，不要只关注自己开发的那点功能，代码结构不清晰，样式在页面头、标签上到处定义的都是，考虑一下日后改版怎么办，不能将上千个页面再重写吧。系统开发不太可能一两个人搞定，多人协作没有一个规范作参考，各自在自己的思路写程序最终出来的系统可能糙、乱。

以上四点是Mars在设计师的角度对系统开发提出的部分建议，如果您想要把系统做得精细，建议参考一下。

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags: , , ,

Feed enhanced by Better Feed from Ozh

]]> http://marslau.com/archives/581.html/feed 12 美工自我培养的几点经验总结 http://marslau.com/archives/551.html http://marslau.com/archives/551.html#comments Thu, 22 Oct 2009 14:33:41 +0000 Mars Lau http://marslau.com/archives/551.html 随着公司影响力的壮大和产品的不断提升，相关的形象设计要逐步跟得上，需要逐渐提升，所以就招一个应届生美工，算是一块成长。应届生有拼劲、肯学，但也好高骛远，起点都差不多，如何培养美工就变得至关重要了。总结自己接触和学习设计的一点经验与大家分享，希望得到大家更多的建议。

一、配色

其实对色彩的感觉是设计师应具备的最基本素质，其作品不管是对网页界面、系统界面、还是产品包装等等都有广泛应用。基本的一些理论，什么冷暖色、对比色/补色、色彩心理、搭配原则等等，满大街都是，有意者随便搜一两篇看看就行。色彩对于美工设计师来说，更重要的是一种感觉，就像打篮球投篮的手感一样，多看，多练，这种感觉是可以后天练出来的。Mars刚接触设计时，连坐公交车时也会注意路边某公司、饭店的招牌是如何配色，处处留意生活中色彩搭配的美，关于色彩截图就更记不清有多少张了。

Mars觉得，设计师对颜色的运用一般有这么几个阶段：

  1. 初级阶段：用自己首映感觉最好的1~2种颜色，不考虑其他因素、他人感觉；
  2. 过度阶段：开始感觉一两种颜色单调，尽量多尝试不同色彩，该阶段极容易出现没目的的乱搭现象；
  3. 成熟阶段：该阶段了解了大众对色彩的审美，开始理性的用1~2种色系搭配，能体会到同种颜色不同色值的细微差别，大多设计师都在这个阶段；
  4. 终极阶段：把一种色彩用至极致，甚至只用黑白灰，完全沉浸某种颜色，甚至有点变态，但其创作效果让处于第三阶段的设计师一看就是大师所为。

其实这也是个不断练习积累的过程，这样色彩的感觉才会提升。

二、布局

美工设计师除了对色彩要有好的感觉外，对布局也要有很好的把握，组合的好坏直接影响作品的效果。其实做好布局设计也不是很难，无非就以下几步：

  1. 布局准备：明确你表达内容的主体部分需要哪些必要的文字和图片。不要考虑太多细节。
  2. 布局版式：关于布局的版式多种多样，在将重点内容放在最显眼的前提下，可自由选择版式。对于网页来讲，根据大多数人从上到下、从左到右的浏览顺序来考虑，应该将最主要的内容、图片等放在页面的左边和上边。
  3. 精细布局：整体配色、字体、各模块的间距、插图、增减内容等各个方面的推敲。这一步是细活。

Mars觉得最锻炼布局的方法是制作PPT。想把PPT制作美观、精简并不是件容易的事。对于软件行业的售前来说，如何制作漂亮的PPT应该是他们自我内修的一门必修课。PPT的布局做好了，其他网页、宣传册等平面布局应该都信手捏来。

三、细节

至理名言”细节决定成败”，在设计领域了这句话更显得重要。很多细节可能会被浏览者忽略，但对设计师来说绝不可放过，比如背景色、色彩渐变、各组件间间距、标题样式、高亮样式、字体/大小/颜色、行/段间距、插图位置/边缘处理、输入框宽高/边框色/背景色、按钮的位置等等太多了。还是之前的话，只有你看得多了，比较得多了，才能看得出这些细节。有人觉得这些细节没有什么大碍，但多个细节组合在一起就和让人觉得不舒服。

举例说一下，以下是某系统里一篇文章下面的添加批注表单。上半部分是没有经过美化、由程序员直接写的程序（上图），下半部分是有设计师协助设计美化完成的表单界面（下图）。

界面细节

一般正常审美的人肯定觉得下面的好看，但却不知好在哪？听Mars从各个角度详解一下：

  1. 配色：字体颜色像是直接从32色板上取的，没经过考究；表单边框色太重；表单背景与页面背景相同，没突出层次。
  2. 布局版式：此组件又没有多行操作，无需使用列表形式；上图保存按钮在该组件标题之上俨然不合理；组件的标题的位置大小不够醒目。
  3. 用户体验：明确这是一个系统里的界面组件，所以这个人既然都登进来了，还用填记录人吗？时间也肯定就是提交时间啊；提交人主要是提交自己的批注，所以给他提供大片的提交内容的输入框即可，简单明了；提交按钮，上图需要再填完批注内容后折回到左上角”保存”显然不合理，下图的界面大大方方右手边一个按钮，看起来明显，操作起来舒服。

以上几方面都是关于个人审美观方面的提升，如果你不是打算进行美学研究，我觉得过多的纯理论学习不会对你的审美观有太多提高。所以我的建议就是：多看，多模仿，多做，多比。切忌自己没有什么审美观就盲目创作，其实模仿没什么可耻的，是学习的毕竟阶段。好比有人模仿MJ跳舞，尽管不是很像，但最少会得到一小部分人的喜爱和追捧，比如在某校/班的圣诞晚会上；而如果不了解大众审美，就很可能像芙蓉姐姐跳舞，只会是笑料罢了。养成良好的审美观可以运用到生活的方方面面，而生活的方方面面也锻炼你的审美观，像摄影、布置自己的房间办公桌、服装的搭配等，能提高你的生活品味。

四、心态

在累计阶段，心态平和、踏实耐心，切忌急躁，美工本身就是细活，着急是没用的。有了基本的审美观，需要创作时心情放松，做些想做的事，吃点想吃的东西，随心所欲，给提供自己创作灵感环境。不要意味的坐在电脑前去想，事倍功半，会把自己郁闷死。

五、技能

有了良好的审美基础和创意，接下来就是制作了。相比较审美观的培养和创意的来临，Mars觉得一些工具技能是很好学得，无非就是我用铅笔、还是毛笔画的问题。大概介绍下Mars接触到的工具：

  1. 制图技能：Photoshop（平面处理等）、Illustrator/CorelDraw（矢量图）、Flash（动画）、Premiere Pro （影视后期）等等这些只是应用的工具；
  2. 页面编程技能：html、css、JavaScript等；
  3. 优化技能：压缩图片、网页优化等。

以上工具网上的教程一抓一大把，推荐网易教程。可以找些基础的看一下，一回生二回熟，平时多用即可掌握，更深的技巧可以日后用到再研究完善，要边用边学，这样记忆深刻。

六、用户体验

用户体验一般出现在网页设计和系统界面设计里，是用户和人机界面的交互过程，界面操作的易用性，直接影响了用户对该款产品的印象。用户体验是对美工更高的一个要求，甚至有点儿超越美工的范畴，但只有美工了解这些才能更合理地设计界面布局，整体搭配等等。

Mars知道用户体验的重要性，但深入学习的还不多，但Mars会在看别人网页、系统的同时记录那点有着方便，很在下次自己的设计中体现出来，算是一个模仿阶段吧。这也是Mars一向的学习方法。

最后声称一下，Mars不是设计科班出身，没有什么理论基础，以上总结都是实打实的经验之谈，希望得到更多好的建议。

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags: , , , , , ,

Feed enhanced by Better Feed from Ozh

]]> http://marslau.com/archives/551.html/feed 52 报表统计图Flash宣传片展示 http://marslau.com/archives/432.html http://marslau.com/archives/432.html#comments Tue, 07 Jul 2009 07:01:44 +0000 Mars Lau http://marslau.com/?p=432 前段时间一直在忙公司企业Flash宣传片的设计和制作。Flash应该算是我不太擅长的一块，接触的也不多，但为了满足需求，就硬着头皮和同事做了一套，这里晒一下自己设计制作的报表产品里统计图部分的Flash，请大家点评。

报表统计图Flash宣传片。观看前请确保你安装了FlashPlayer10。

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags: , , , ,

Feed enhanced by Better Feed from Ozh

]]> http://marslau.com/archives/432.html/feed 8 培训邀请函 http://marslau.com/archives/53.html http://marslau.com/archives/53.html#comments Wed, 16 Apr 2008 09:06:21 +0000 Mars Lau http://marslau.com/index.php/archives/53 培训邀请函效果

培训邀请函

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags:

Feed enhanced by Better Feed from Ozh

]]> http://marslau.com/archives/53.html/feed 0 调度系统界面 http://marslau.com/archives/48.html http://marslau.com/archives/48.html#comments Wed, 16 Apr 2008 05:14:19 +0000 Mars Lau http://marslau.com/index.php/archives/48 （一）调度系统界面首页–欢迎界面

scheduler-home

（二）调度系统界面内页效果图一

scheduler-in

（三）调度系统界面内页效果图二

scheduler+in

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags:

Feed enhanced by Better Feed from Ozh

]]> http://marslau.com/archives/48.html/feed 0 demo界面 http://marslau.com/archives/44.html http://marslau.com/archives/44.html#comments Tue, 15 Apr 2008 09:44:28 +0000 Mars Lau http://marslau.com/index.php/archives/44 demo界面效果图（一）

demo界面

demo界面效果图（二）
demo界面（二）

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags: , ,

Feed enhanced by Better Feed from Ozh

]]> http://marslau.com/archives/44.html/feed 1 某系统界面 http://marslau.com/archives/40.html http://marslau.com/archives/40.html#comments Tue, 15 Apr 2008 08:56:55 +0000 Mars Lau http://marslau.com/index.php/archives/40 （一）系统登陆界面（login）

equipment-login

（二）系统内页界面效果一

equipment-1

（三）系统内页界面效果二

equipment-2

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags: ,

Feed enhanced by Better Feed from Ozh

]]> http://marslau.com/archives/40.html/feed 1 光盘 http://marslau.com/archives/38.html http://marslau.com/archives/38.html#comments Tue, 15 Apr 2008 07:49:47 +0000 Mars Lau http://marslau.com/index.php/archives/38 光盘效果

CD

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags:

Feed enhanced by Better Feed from Ozh

]]> http://marslau.com/archives/38.html/feed 0 产品包装 http://marslau.com/archives/36.html http://marslau.com/archives/36.html#comments Tue, 15 Apr 2008 07:34:14 +0000 Mars Lau http://marslau.com/index.php/archives/36 做了几款产品包装玩玩

产品包装

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags:

Feed enhanced by Better Feed from Ozh

]]> http://marslau.com/archives/36.html/feed 0 宣传手册 http://marslau.com/archives/35.html http://marslau.com/archives/35.html#comments Tue, 15 Apr 2008 07:23:03 +0000 Mars Lau http://marslau.com/index.php/archives/35 产品宣传手册

propagandize

摘自：MarsLau's Blog | 原文链接：Permalink |
Tags:

Feed enhanced by Better Feed from Ozh

]]> http://marslau.com/archives/35.html/feed 0