<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>MarsLau&#039;s Blog &#187; 配色</title>
	<atom:link href="http://marslau.com/archives/tag/%e9%85%8d%e8%89%b2/feed" rel="self" type="application/rss+xml" />
	<link>http://marslau.com</link>
	<description>Mars博客，记录路上的点滴（个人日记 设计 css wordpress seo）</description>
	<lastBuildDate>Sat, 21 Apr 2012 01:17:50 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>美工自我培养的几点经验总结</title>
		<link>http://marslau.com/archives/551.html</link>
		<comments>http://marslau.com/archives/551.html#comments</comments>
		<pubDate>Thu, 22 Oct 2009 14:33:41 +0000</pubDate>
		<dc:creator>Mars Lau</dc:creator>
				<category><![CDATA[设计历程]]></category>
		<category><![CDATA[培养]]></category>
		<category><![CDATA[布局]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[细节]]></category>
		<category><![CDATA[美工]]></category>
		<category><![CDATA[设计师]]></category>
		<category><![CDATA[配色]]></category>

		<guid isPermaLink="false">http://marslau.com/archives/551.html</guid>
		<description><![CDATA[Mars本文总结其接触和学习设计经验，从配色,布局,细节,心态,技能,用户体验等几部分讲述如何培养美工设计师。通过多看、多做、多比的方法提升设计师的审美观和相关技巧... <table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="112" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="在设计师的角度讲系统开发" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fmarslau.com%2Farchives%2F581.html&from=http%3A%2F%2Fmarslau.com%2Farchives%2F551.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 106px !important; height: 106px !important;" src="http://static.wumii.com/site_images/2011/11/01/10106877.jpg" width="106px" height="106px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 112px !important; font: 12px/15px arial !important; height: 30px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">在设计师的角度讲系统开发</font>
                    </a>
                </td>
                <td width="112" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="5个css布局的常见问题及解决方法" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fmarslau.com%2Farchives%2F514.html&from=http%3A%2F%2Fmarslau.com%2Farchives%2F551.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 106px !important; height: 106px !important;" src="http://static.wumii.com/site_images/2011/11/01/10106904.png" width="106px" height="106px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 112px !important; font: 12px/15px arial !important; height: 30px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">5个css布局的常见问题及解决方法</font>
                    </a>
                </td>
                <td width="112" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="WebQQ 2.0初体验" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fmarslau.com%2Farchives%2F667.html&from=http%3A%2F%2Fmarslau.com%2Farchives%2F551.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 106px !important; height: 106px !important;" src="http://static.wumii.com/site_images/2011/11/01/10106924.png" width="106px" height="106px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 112px !important; font: 12px/15px arial !important; height: 30px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">WebQQ 2.0初体验</font>
                    </a>
                </td>
                <td width="112" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="53种网页设计师必备的高级CSS技巧" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fmarslau.com%2Farchives%2F66.html&from=http%3A%2F%2Fmarslau.com%2Farchives%2F551.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 106px !important; height: 106px !important;" src="http://static.wumii.com/site_images/2011/11/01/10107008.gif" width="106px" height="106px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 112px !important; font: 12px/15px arial !important; height: 30px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">53种网页设计师必备的高级CSS技巧</font>
                    </a>
                </td>
                <td width="112" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="写在2011年末，祝大家2012好运" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fmarslau.com%2Farchives%2F823.html&from=http%3A%2F%2Fmarslau.com%2Farchives%2F551.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 106px !important; height: 106px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="106px" height="106px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 112px !important; font: 12px/15px arial !important; height: 30px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">写在2011年末，祝大家2012好运</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p>随着公司影响力的壮大和产品的不断提升，相关的形象设计要逐步跟得上，需要逐渐提升，所以就招一个应届生美工，算是一块成长。应届生有拼劲、肯学，但也好高骛远，起点都差不多，如何<strong>培养美工</strong>就变得至关重要了。总结自己接触和学习设计的一点经验与大家分享，希望得到大家更多的建议。</p>
<h3>一、配色</h3>
<p>其实对<strong>色彩</strong>的感觉是设计师应具备的最基本素质，其作品不管是对网页界面、系统界面、还是产品包装等等都有广泛应用。基本的一些理论，什么冷暖色、对比色/补色、色彩心理、搭配原则等等，满大街都是，有意者随便搜一两篇看看就行。色彩对于美工设计师来说，更重要的是一种感觉，就像打篮球投篮的手感一样，多看，多练，这种感觉是可以后天练出来的。Mars刚接触设计时，连坐公交车时也会注意路边某公司、饭店的招牌是如何配色，处处留意生活中色彩搭配的美，关于色彩截图就更记不清有多少张了。</p>
<p>Mars觉得，设计师对颜色的运用一般有这么几个阶段：</p>
<ol>
<li>初级阶段：用自己<strong>首映感觉最好的1~2种颜色</strong>，不考虑其他因素、他人感觉；</li>
<li>过度阶段：开始感觉一两种颜色单调，<strong>尽量多尝试不同色彩</strong>，该阶段极容易出现没目的的乱搭现象；</li>
<li>成熟阶段：该阶段了解了大众对色彩的审美，开始<strong>理性的用1~2种色系搭配</strong>，能体会到同种颜色不同色值的细微差别，大多设计师都在这个阶段；</li>
<li>终极阶段：把<strong>一种色彩用至极致</strong>，甚至只用黑白灰，完全沉浸某种颜色，甚至有点变态，但其创作效果让处于第三阶段的设计师一看就是大师所为。</li>
</ol>
<p>其实这也是个不断练习积累的过程，这样色彩的感觉才会提升。</p>
<h3>二、布局</h3>
<p>美工设计师除了对色彩要有好的感觉外，对布局也要有很好的把握，组合的好坏直接影响作品的效果。其实做好布局设计也不是很难，无非就以下几步：</p>
<div>
<ol>
<li><strong>布局准备</strong>：明确你表达内容的主体部分需要哪些必要的文字和图片。不要考虑太多细节。</li>
<li><strong>布局版式</strong>：关于布局的版式多种多样，在将重点内容放在最显眼的前提下，可自由选择版式。对于网页来讲，根据大多数人从上到下、从左到右的浏览顺序来考虑，应该将最主要的内容、图片等放在页面的左边和上边。</li>
<li><strong>精细布局</strong>：整体配色、字体、各模块的间距、插图、增减内容等各个方面的推敲。这一步是细活。</li>
</ol>
</div>
<p>Mars觉得最锻炼布局的方法是制作PPT。想把PPT制作美观、精简并不是件容易的事。对于软件行业的售前来说，如何制作漂亮的PPT应该是他们自我内修的一门必修课。PPT的布局做好了，其他网页、宣传册等平面布局应该都信手捏来。</p>
<h3>三、细节</h3>
<p>至理名言&#8221;细节决定成败&#8221;，在设计领域了这句话更显得重要。很多细节可能会被浏览者忽略，但对设计师来说绝不可放过，比如背景色、色彩渐变、各组件间间距、标题样式、高亮样式、字体/大小/颜色、行/段间距、插图位置/边缘处理、输入框宽高/边框色/背景色、按钮的位置等等太多了。还是之前的话，只有你看得多了，比较得多了，才能看得出这些细节。有人觉得这些细节没有什么大碍，但多个细节组合在一起就和让人觉得不舒服。</p>
<p>举例说一下，以下是某系统里一篇文章下面的添加批注表单。上半部分是没有经过美化、由程序员直接写的程序（上图），下半部分是有设计师协助设计美化完成的表单界面（下图）。</p>
<p><img src="http://marslau.com/wp-content/uploads/2009/10/zxwz.png" alt="界面细节" width="589" height="344" /></p>
<p>一般正常审美的人肯定觉得下面的好看，但却不知好在哪？听Mars从各个角度详解一下：</p>
<ol>
<li>配色：字体颜色像是直接从32色板上取的，没经过考究；表单边框色太重；表单背景与页面背景相同，没突出层次。</li>
<li>布局版式：此组件又没有多行操作，无需使用列表形式；上图保存按钮在该组件标题之上俨然不合理；组件的标题的位置大小不够醒目。</li>
<li>用户体验：明确这是一个系统里的界面组件，所以这个人既然都登进来了，还用填记录人吗？时间也肯定就是提交时间啊；提交人主要是提交自己的批注，所以给他提供大片的提交内容的输入框即可，简单明了；提交按钮，上图需要再填完批注内容后折回到左上角&#8221;保存&#8221;显然不合理，下图的界面大大方方右手边一个按钮，看起来明显，操作起来舒服。</li>
</ol>
<p>以上几方面都是关于个人<strong>审美观</strong>方面的提升，如果你不是打算进行美学研究，我觉得过多的纯理论学习不会对你的审美观有太多提高。所以我的建议就是：多看，多模仿，多做，多比。切忌自己没有什么审美观就盲目创作，其实模仿没什么可耻的，是学习的毕竟阶段。好比有人模仿MJ跳舞，尽管不是很像，但最少会得到一小部分人的喜爱和追捧，比如在某校/班的圣诞晚会上；而如果不了解大众审美，就很可能像芙蓉姐姐跳舞，只会是笑料罢了。养成良好的审美观可以运用到生活的方方面面，而生活的方方面面也锻炼你的审美观，像摄影、布置自己的房间办公桌、服装的搭配等，能提高你的生活品味。</p>
<h3>四、心态</h3>
<p>在累计阶段，心态平和、<strong>踏实耐心</strong>，切忌急躁，美工本身就是细活，着急是没用的。有了基本的审美观，需要创作时心情放松，做些想做的事，吃点想吃的东西，随心所欲，给提供自己创作灵感环境。不要意味的坐在电脑前去想，事倍功半，会把自己郁闷死。</p>
<h3>五、技能</h3>
<p>有了良好的审美基础和创意，接下来就是制作了。相比较审美观的培养和创意的来临，Mars觉得一些工具技能是很好学得，无非就是我用铅笔、还是毛笔画的问题。大概介绍下Mars接触到的工具：</p>
<ol>
<li>制图技能：Photoshop（平面处理等）、Illustrator/CorelDraw（矢量图）、Flash（动画）、Premiere Pro （影视后期）等等这些只是应用的工具；</li>
<li>页面编程技能：html、css、JavaScript等；</li>
<li>优化技能：压缩图片、网页优化等。</li>
</ol>
<p>以上工具网上的教程一抓一大把，推荐网易教程。可以找些基础的看一下，一回生二回熟，平时多用即可掌握，更深的技巧可以日后用到再研究完善，要边用边学，这样记忆深刻。</p>
<h3>六、用户体验</h3>
<p>用户体验一般出现在网页设计和系统界面设计里，是用户和人机界面的交互过程，界面操作的易用性，直接影响了用户对该款产品的印象。用户体验是对美工更高的一个要求，甚至有点儿超越美工的范畴，但只有美工了解这些才能更合理地设计界面布局，整体搭配等等。</p>
<p>Mars知道用户体验的重要性，但深入学习的还不多，但Mars会在看别人网页、系统的同时记录那点有着方便，很在下次自己的设计中体现出来，算是一个模仿阶段吧。这也是Mars一向的学习方法。</p>
<p>最后声称一下，Mars不是设计科班出身，没有什么理论基础，以上总结都是实打实的经验之谈，希望得到更多好的建议。</p>
<ul class="related_post"><li>2009-11-25 -- <a href="http://marslau.com/archives/581.html" title="在设计师的角度讲系统开发">在设计师的角度讲系统开发</a> (12)</li></ul><hr />
<p><small>摘自：<a href="http://marslau.com">MarsLau&#039;s Blog</a> |
原文链接：<a href="http://marslau.com/archives/551.html">Permalink</a> |
<br/>
Tags: <a href="http://marslau.com/archives/tag/%e5%9f%b9%e5%85%bb" rel="tag">培养</a>, <a href="http://marslau.com/archives/tag/%e5%b8%83%e5%b1%80" rel="tag">布局</a>, <a href="http://marslau.com/archives/tag/%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c" rel="tag">用户体验</a>, <a href="http://marslau.com/archives/tag/%e7%bb%86%e8%8a%82" rel="tag">细节</a>, <a href="http://marslau.com/archives/tag/%e7%be%8e%e5%b7%a5" rel="tag">美工</a>, <a href="http://marslau.com/archives/tag/%e8%ae%be%e8%ae%a1%e5%b8%88" rel="tag">设计师</a>, <a href="http://marslau.com/archives/tag/%e9%85%8d%e8%89%b2" rel="tag">配色</a><br/>
</small></p><table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="112" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="在设计师的角度讲系统开发" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fmarslau.com%2Farchives%2F581.html&from=http%3A%2F%2Fmarslau.com%2Farchives%2F551.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 106px !important; height: 106px !important;" src="http://static.wumii.com/site_images/2011/11/01/10106877.jpg" width="106px" height="106px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 112px !important; font: 12px/15px arial !important; height: 30px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">在设计师的角度讲系统开发</font>
                    </a>
                </td>
                <td width="112" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="5个css布局的常见问题及解决方法" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fmarslau.com%2Farchives%2F514.html&from=http%3A%2F%2Fmarslau.com%2Farchives%2F551.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 106px !important; height: 106px !important;" src="http://static.wumii.com/site_images/2011/11/01/10106904.png" width="106px" height="106px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 112px !important; font: 12px/15px arial !important; height: 30px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">5个css布局的常见问题及解决方法</font>
                    </a>
                </td>
                <td width="112" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="WebQQ 2.0初体验" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fmarslau.com%2Farchives%2F667.html&from=http%3A%2F%2Fmarslau.com%2Farchives%2F551.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 106px !important; height: 106px !important;" src="http://static.wumii.com/site_images/2011/11/01/10106924.png" width="106px" height="106px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 112px !important; font: 12px/15px arial !important; height: 30px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">WebQQ 2.0初体验</font>
                    </a>
                </td>
                <td width="112" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="53种网页设计师必备的高级CSS技巧" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fmarslau.com%2Farchives%2F66.html&from=http%3A%2F%2Fmarslau.com%2Farchives%2F551.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 106px !important; height: 106px !important;" src="http://static.wumii.com/site_images/2011/11/01/10107008.gif" width="106px" height="106px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 112px !important; font: 12px/15px arial !important; height: 30px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">53种网页设计师必备的高级CSS技巧</font>
                    </a>
                </td>
                <td width="112" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="写在2011年末，祝大家2012好运" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fmarslau.com%2Farchives%2F823.html&from=http%3A%2F%2Fmarslau.com%2Farchives%2F551.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 106px !important; height: 106px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="106px" height="106px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 112px !important; font: 12px/15px arial !important; height: 30px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">写在2011年末，祝大家2012好运</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>
<p><small>Feed enhanced by <a href='http://planetozh.com/blog/my-projects/wordpress-plugin-better-feed-rss/'>Better Feed</a> from  <a href='http://planetozh.com/blog/'>Ozh</a></small></p>
]]></content:encoded>
			<wfw:commentRss>http://marslau.com/archives/551.html/feed</wfw:commentRss>
		<slash:comments>52</slash:comments>
		</item>
	</channel>
</rss>

