﻿<?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>阿石的日志 &#187; 读书笔记</title>
	<atom:link href="http://www.ashnotes.com/category/booknotes/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ashnotes.com</link>
	<description>关注 iPhone App、产品策划、信息架构、网站分析、网站优化</description>
	<lastBuildDate>Wed, 14 Dec 2011 12:21:30 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>读《配色设计原理》</title>
		<link>http://www.ashnotes.com/read-colormatched-design/</link>
		<comments>http://www.ashnotes.com/read-colormatched-design/#comments</comments>
		<pubDate>Mon, 12 Sep 2011 09:55:21 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[杂谈其他]]></category>
		<category><![CDATA[读书笔记]]></category>
		<category><![CDATA[产品经理]]></category>
		<category><![CDATA[配色设计]]></category>
		<category><![CDATA[配色设计原理]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=944</guid>
		<description><![CDATA[在读这本书之前，有一个普遍性假设，现在的产品经理对色彩的忽视，甚至不重视，基本上原型做出来，然后就丢给UI设计师了。这里面产品经理有很多解释：业务繁忙，产品线过多，还要和用户打交道，涉及到产品颜色的可以放心的交给设计师来处理，因为对方比自己更专业。然而等产品设计稿出来，甚至等产品测试上线，产品经理是否会有这样的疑问：这个产品风格为何总是跟当初自己设想不同？总感觉怪怪的而说不出来。 对，就是这怪怪的，说不出来的理由，让我们徘徊止步于产品风格设计这堵墙。产品经理需要一部字典，一个指南，需要和设计师对话的指南。而《配色设计原理》就是这样一部好书，读完之后，不求和设计师PK专业性，而是找出设计师理解的产品和自己设想的产品做个吻合度对比，找出差异性，并将其差异性告知设计师，与其形成正向良性互动，推动产品更真实的面向用户群。 《配色设计原理》的主要素材，书上叫写真，虽然取材于平面设计领域，但其涉及到的整体配色、基本色、多色配色及双色选择理论等同样适用于互联网领域。其中日本一些顶尖设计师对色彩的领悟，也是十分出彩。例如冈本一宣的“色彩是没有责任的，以红、黄、蓝三原色为配色基础，扩展色相范围，体现丰满效果”，弘中克典的“围绕某个主题确定基本色，将色彩的视觉冲击效果作为视觉表现重点”；古平正义的“综合考虑素材或背景故事的内涵和外延，为自己作出选择某种色彩的理由，不要随便运用色彩，要整体考虑视觉效果”；久住欣也的“根据媒体和读者层来考虑配色”；Yuki Seki的“了解大自然的复杂色调，双色设计应体现适度的紧张感”。 我们都知道用户对产品的第一接触点是产品的UI界面，第一印象也是产品的外观和色彩。产品经理在产品策划时，其实应并不找急于画产品原型，而是想像一下产品的功能概貌，模拟一下用户接触使用产品的过程，并将其“翻译”成文字描述，象同事，尤其是设计师描述你的产品，这样在内部首先获取初步的产品认知，而不失产品迭代开发的走样。<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="102" 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.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fproduct-design-like-premier-wen%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-colormatched-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027564.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">向温总理学习产品设计</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="读《设计中的设计》——这样就好" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-of-design-this-is-enough%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-colormatched-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/02/20502205.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《设计中的设计》——这样就好</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="读《Web 表单设计》" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fread-web-form-design%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-colormatched-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/02/27/2970320.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《Web 表单设计》</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="读《设计中的设计》——信息传达" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-colormatched-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/02/20502205.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《设计中的设计》——信息传达</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="i-dong游戏中心原型优化" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fi-dong-game-center-prototype-optimize%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-colormatched-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027623.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">i-dong游戏中心原型优化</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" 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><a href="http://www.ashnotes.com/read-colormatched-design/peise/" rel="attachment wp-att-955"><img class="alignleft size-medium wp-image-955" title="配色设计原理封面图" src="http://www.ashnotes.com/wp-content/uploads/2011/09/peise-300x300.jpg" alt="" width="180" height="180" /></a><br />
在读这本书之前，有一个普遍性假设，现在的产品经理对色彩的忽视，甚至不重视，基本上原型做出来，然后就丢给UI设计师了。这里面产品经理有很多解释：业务繁忙，产品线过多，还要和用户打交道，涉及到产品颜色的可以放心的交给设计师来处理，因为对方比自己更专业。然而等产品设计稿出来，甚至等产品测试上线，产品经理是否会有这样的疑问：这个产品风格为何总是跟当初自己设想不同？总感觉怪怪的而说不出来。</p>
<p>对，就是这怪怪的，说不出来的理由，让我们徘徊止步于产品风格设计这堵墙。产品经理需要一部字典，一个指南，需要和设计师对话的指南。而<a title="配色设计原理在豆瓣上" href="http://book.douban.com/subject/4165856/" target="_blank">《配色设计原理》</a>就是这样一部好书，读完之后，不求和设计师PK专业性，而是找出设计师理解的产品和自己设想的产品做个吻合度对比，找出差异性，并将其差异性告知设计师，与其形成正向良性互动，推动产品更真实的面向用户群。</p>
<p>《配色设计原理》的主要素材，书上叫写真，虽然取材于平面设计领域，但其涉及到的整体配色、基本色、多色配色及双色选择理论等同样适用于互联网领域。其中日本一些顶尖设计师对色彩的领悟，也是十分出彩。例如冈本一宣的“色彩是没有责任的，以红、黄、蓝三原色为配色基础，扩展色相范围，体现丰满效果”，弘中克典的“围绕某个主题确定基本色，将色彩的视觉冲击效果作为视觉表现重点”；古平正义的“综合考虑素材或背景故事的内涵和外延，为自己作出选择某种色彩的理由，不要随便运用色彩，要整体考虑视觉效果”；久住欣也的“根据媒体和读者层来考虑配色”；Yuki Seki的“了解大自然的复杂色调，双色设计应体现适度的紧张感”。</p>
<p>我们都知道用户对产品的第一接触点是产品的UI界面，第一印象也是产品的外观和色彩。产品经理在产品策划时，其实应并不找急于画产品原型，而是想像一下产品的功能概貌，模拟一下用户接触使用产品的过程，并将其“翻译”成文字描述，象同事，尤其是设计师描述你的产品，这样在内部首先获取初步的产品认知，而不失产品迭代开发的走样。</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="102" 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.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fproduct-design-like-premier-wen%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-colormatched-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027564.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">向温总理学习产品设计</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="读《设计中的设计》——这样就好" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-of-design-this-is-enough%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-colormatched-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/02/20502205.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《设计中的设计》——这样就好</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="读《Web 表单设计》" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fread-web-form-design%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-colormatched-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/02/27/2970320.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《Web 表单设计》</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="读《设计中的设计》——信息传达" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-colormatched-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/02/20502205.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《设计中的设计》——信息传达</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="i-dong游戏中心原型优化" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fi-dong-game-center-prototype-optimize%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-colormatched-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027623.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">i-dong游戏中心原型优化</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" 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>]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/read-colormatched-design/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>读《Web 表单设计》</title>
		<link>http://www.ashnotes.com/read-web-form-design/</link>
		<comments>http://www.ashnotes.com/read-web-form-design/#comments</comments>
		<pubDate>Sat, 26 Feb 2011 16:01:59 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[读书笔记]]></category>
		<category><![CDATA[标签]]></category>
		<category><![CDATA[表单设计]]></category>
		<category><![CDATA[输入框]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=673</guid>
		<description><![CDATA[我们每天都会上网，无论是电子商务网站，还是各种 SNS 网站，都会碰到五花八门的表格要填写。表单是横亘在网站商业目标与用户需求的一睹门墙，前者需要高额的订单金额和转化率，后者则是真的不愿多填写一个表单，我只想得到我真正需要的。而产品经理或者设计师处理表单时，这要精心雕琢这门墙的情境。 《Web 表单设计》就是这样处理这样情境的一本书，在总结以往表单设计失败案例基础上，将表单设计的指向”谁需要填写表单“、“用户为什么要填写表单”这样的问题本质上来？是由前Yahoo设计师 Luke Wroblewski ，他的官网是：http://www.lukew.com/ 这本书有以下三个部分： 表单结构 表单元素 表单交互 1 表单结构 表单设计原则 尽量减少痛苦——“不要让我思考”，“不要让我烦”，清晰流畅的浏览线，将注意力分散降到最低 说明填写完成路径——让用户清楚如何实现目标，任务完成的进度提示 考虑情境——表单填写的目标用户群，新注册用户，老用户？玩家？客户？还是智障用户？ 确保一致沟通——名词定义一致，如Tab键跳转等交互动作一致 表单的内容及组织方式（标签、输入框、内容组）是表单的核心要素，而不是视觉和交互设计。表单设计的开始工作是“先考虑人”，考虑用户的真正关切，然后“再考虑像素”，考虑如何设计。设计表单可以遵循以下四个策略： 保留——表单问题与用户期望给出大答案要一致。 删减——不需要立即获取的用户答案信息可以去掉这个表单问题 延迟——有些表单问题不需要马上就问，可以放到后续再问 解释——比较棘手的表单问题可以向用户解释为神马，要让用户知道问的结果是给其带来好处 2 表单元素 表单不只是表格，它是由标签、输入框、交互动作等元素构成。 1 ）标签 一般讨论最多是标签该如何对齐，由顶对齐标签、左对齐标签和右对齐标签三种对齐方式，她们都有其存在的必要，具体则依赖于设计的目标。 顶对齐标签，标签和输入框自上而下的布局，是填写表单的最快捷实现方式，充分利用横向空间的各种组合，但其缺点是稍占用垂直空间。其中需要注意的是相邻输入框间距最好为其50%~70%输入框的高度 左对齐标签，标签一致左对齐，和输入框拉开间距，便于用户自上而下看标签，而不用急于填充输入框，比较适合高级设置的陌生或较难理解的数据。 右对齐标签，标签一致右对齐，标签和输入框横向间距最近，可以尽量减少垂直空间，用户填充速度居三者之中。 2 ）输入框 输入框出现的目地是让用户可操作的组件，如文本框、单选按钮、下拉菜单等，如何使用各种不同的输入框，要看标签内容的问题，是什么（What）问题，是是否有无（Whether）问题，还是多选单选（How）问题。 3 ）动作 动作有主动作和次动作，如提交、保存、继续等为主动做，还有如取消、返回、充值等为次动作。主动作和次动作往往是同时出现的，如“提交和取消”这对组合，在设计上如果这两个按钮大小一致，颜色突出主动作是最佳的动作组合设计，用户完成时间最少。交互动作还有进行中的动作，一般出现于动作需要一定时间处理（如Gmail登录）或者动作的导向情况（如fanli.qq.com导向到其他电子商务网站）。 3 表单交互 1）尽量让用户少录入 复杂的表单填写任务总是让用户烦恼不已，这一点尤其是新用户碰上了新产品上，而输入框中默认值（如邮箱后缀、日期时间等）是往往是最好的导师，尽量让用户较少录入，只需动鼠标就完成表单填写任务。另外额外多余的问题标签可以后移，可以隐藏，也可以以后再加。 2）即时验证 表单往往是多个元素混合组成的，用户在填写表单需要即时告知用户录入信息是否正确、完整，省却用户时间并给用户带来循循善诱累积的成就感。一旦出错或不完整，可以即时告知用户错在哪里并重新录入。 4 读书小结 Luke 在本书在扉页上写着“ 谨以此书献给每一位不得不填表的人”，不知是否翻译有误，感觉此书应该是奉献给“每一位不得不设计表的人”，是写给产品经理、UI和交互设计师等行业工作者。表单是网页的重要组成部分，表单设计的重要性毋庸置疑。表单也是产品和用户中间的一条槛，让产品有品质上档次，让用户又能轻松跨域，则是我们日常工作要不断尝试、不断反思、不断优化的。 &#160; &#160; &#160;<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="102" 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.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-of-design-this-is-enough%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-web-form-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/02/20502205.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《设计中的设计》——这样就好</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="向温总理学习产品设计" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fproduct-design-like-premier-wen%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-web-form-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027564.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">向温总理学习产品设计</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="读《设计中的设计》——信息传达" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-web-form-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/02/20502205.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《设计中的设计》——信息传达</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="读《配色设计原理》" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fread-colormatched-design%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-web-form-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《配色设计原理》</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="i-dong游戏中心原型优化" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fi-dong-game-center-prototype-optimize%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-web-form-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027623.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">i-dong游戏中心原型优化</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" 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><a rel="attachment wp-att-681" href="http://www.ashnotes.com/read-web-form-design/web-%e8%a1%a8%e5%8d%95%e8%ae%be%e8%ae%a1/"><img class="size-medium wp-image-681 alignleft" title="Web 表单设计" src="http://www.ashnotes.com/wp-content/uploads/2011/02/Web-表单设计-194x300.jpg" alt="" width="136" height="210" /></a> 我们每天都会上网，无论是电子商务网站，还是各种 SNS 网站，都会碰到五花八门的表格要填写。表单是横亘在网站商业目标与用户需求的一睹门墙，前者需要高额的订单金额和转化率，后者则是真的不愿多填写一个表单，我只想得到我真正需要的。而产品经理或者设计师处理表单时，这要精心雕琢这门墙的情境。</p>
<p><a title="Web表单设计" href="http://book.douban.com/subject/4886100/" target="_blank">《Web 表单设计》</a>就是这样处理这样情境的一本书，在总结以往表单设计失败案例基础上，将表单设计的指向”谁需要填写表单“、“用户为什么要填写表单”这样的问题本质上来？是由前Yahoo设计师 Luke Wroblewski ，他的官网是：<a href="http://www.lukew.com/">http://www.lukew.com/</a></p>
<p>这本书有以下三个部分：</p>
<ol>
<li>表单结构</li>
<li>表单元素</li>
<li>表单交互<br />
<span id="more-673"></span></li>
</ol>
<p><strong>1 表单结构</strong></p>
<p>表单设计原则</p>
<ul>
<li>尽量减少痛苦——“不要让我思考”，“不要让我烦”，清晰流畅的浏览线，将注意力分散降到最低</li>
<li>说明填写完成路径——让用户清楚如何实现目标，任务完成的进度提示</li>
<li>考虑情境——表单填写的目标用户群，新注册用户，老用户？玩家？客户？还是智障用户？</li>
<li>确保一致沟通——名词定义一致，如Tab键跳转等交互动作一致</li>
</ul>
<p>表单的内容及组织方式（标签、输入框、内容组）是表单的核心要素，而不是视觉和交互设计。表单设计的开始工作是“先考虑人”，考虑用户的真正关切，然后“再考虑像素”，考虑如何设计。设计表单可以遵循以下四个策略：</p>
<ul>
<li>保留——表单问题与用户期望给出大答案要一致。</li>
<li>删减——不需要立即获取的用户答案信息可以去掉这个表单问题</li>
<li>延迟——有些表单问题不需要马上就问，可以放到后续再问</li>
<li>解释——比较棘手的表单问题可以向用户解释为神马，要让用户知道问的结果是给其带来好处</li>
</ul>
<p><strong>2 表单元素</strong></p>
<p>表单不只是表格，它是由标签、输入框、交互动作等元素构成。</p>
<p>1 ）标签</p>
<p>一般讨论最多是标签该如何对齐，由顶对齐标签、左对齐标签和右对齐标签三种对齐方式，她们都有其存在的必要，具体则依赖于设计的目标。</p>
<p>顶对齐标签，标签和输入框自上而下的布局，是填写表单的最快捷实现方式，充分利用横向空间的各种组合，但其缺点是稍占用垂直空间。其中需要注意的是相邻输入框间距最好为其50%~70%输入框的高度</p>
<p>左对齐标签，标签一致左对齐，和输入框拉开间距，便于用户自上而下看标签，而不用急于填充输入框，比较适合高级设置的陌生或较难理解的数据。</p>
<p>右对齐标签，标签一致右对齐，标签和输入框横向间距最近，可以尽量减少垂直空间，用户填充速度居三者之中。</p>
<p>2 ）输入框</p>
<p>输入框出现的目地是让用户可操作的组件，如文本框、单选按钮、下拉菜单等，如何使用各种不同的输入框，要看标签内容的问题，是什么（What）问题，是是否有无（Whether）问题，还是多选单选（How）问题。</p>
<p>3 ）动作</p>
<p>动作有主动作和次动作，如提交、保存、继续等为主动做，还有如取消、返回、充值等为次动作。主动作和次动作往往是同时出现的，如“提交和取消”这对组合，在设计上如果这两个按钮大小一致，颜色突出主动作是最佳的动作组合设计，用户完成时间最少。交互动作还有进行中的动作，一般出现于动作需要一定时间处理（如Gmail登录）或者动作的导向情况（如fanli.qq.com导向到其他电子商务网站）。</p>
<p><strong>3 表单交互</strong></p>
<p>1）尽量让用户少录入</p>
<p>复杂的表单填写任务总是让用户烦恼不已，这一点尤其是新用户碰上了新产品上，而输入框中默认值（如邮箱后缀、日期时间等）是往往是最好的导师，尽量让用户较少录入，只需动鼠标就完成表单填写任务。另外额外多余的问题标签可以后移，可以隐藏，也可以以后再加。</p>
<p>2）即时验证</p>
<p>表单往往是多个元素混合组成的，用户在填写表单需要即时告知用户录入信息是否正确、完整，省却用户时间并给用户带来循循善诱累积的成就感。一旦出错或不完整，可以即时告知用户错在哪里并重新录入。</p>
<p><strong>4 读书小结<br />
</strong><br />
Luke 在本书在扉页上写着“ 谨以此书献给每一位不得不填表的人”，不知是否翻译有误，感觉此书应该是奉献给“每一位不得不设计表的人”，是写给产品经理、UI和交互设计师等行业工作者。表单是网页的重要组成部分，表单设计的重要性毋庸置疑。表单也是产品和用户中间的一条槛，让产品有品质上档次，让用户又能轻松跨域，则是我们日常工作要不断尝试、不断反思、不断优化的。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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="102" 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.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-of-design-this-is-enough%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-web-form-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/02/20502205.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《设计中的设计》——这样就好</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="向温总理学习产品设计" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fproduct-design-like-premier-wen%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-web-form-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027564.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">向温总理学习产品设计</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="读《设计中的设计》——信息传达" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-web-form-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/02/20502205.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《设计中的设计》——信息传达</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="读《配色设计原理》" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fread-colormatched-design%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-web-form-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《配色设计原理》</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="i-dong游戏中心原型优化" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fi-dong-game-center-prototype-optimize%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fread-web-form-design%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027623.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">i-dong游戏中心原型优化</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" 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>]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/read-web-form-design/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>读《设计中的设计》——这样就好</title>
		<link>http://www.ashnotes.com/design-of-design-this-is-enough/</link>
		<comments>http://www.ashnotes.com/design-of-design-this-is-enough/#comments</comments>
		<pubDate>Wed, 25 Aug 2010 11:41:41 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[读书笔记]]></category>
		<category><![CDATA[产品设计]]></category>
		<category><![CDATA[原研哉]]></category>
		<category><![CDATA[设计中的设计]]></category>
		<category><![CDATA[这样就好]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=580</guid>
		<description><![CDATA[继续写《设计中的设计》读后感，这次主题是原研哉在提及无印良品时反复提到的设计哲理——这样就好！ 或许我们习惯了这样的一句话 “ 没有最好，只有更好 ” 来表明我们追求卓越的精神，这句话的真实意思或许被我们忽略了，世上没有最好的东西，只有更好的东西，但什么东西才是更好的？为什么这样的设计才是更好的？因为最好是更好的极限，更好更是最好的某个界限，即阈值。而 这样就好 就是原研哉及其代言的无印良品团队 对 更好 的一个求解。 那什么是这样就好？原研哉是这样解释的，这样就好 是消费者对产品品质满意的评价，是客户体验的一种满足感。相对于 这个最好、非他不可 诱发消费者对产品产生强烈的自我喜好，这样就好 是让消费者与产品和谐相处。这个最好 的目标用户是心甘情愿接受高价的小众，以限量生产标榜产品的稀缺；而 这样就好 的目标用户相对大众，是承认资源短缺情况下相信产品的品质，也能使用的上高品质的产品。正如原研哉所说，“这样，蕴含着抑制、让步、退一步海空天空的理智态度”，这个 和个性自由走得太近反而变得不自由，这样 的宽容放达或许更接近真正的自由。 在如今互联网的产品设计环境中，“闷在屋子里面设计出这世界上最好的产品”的想法已经不切实际。不管什么产品，是骡子是马得拉出来溜溜让用户去体验、让用户去评价。问题是现在大家都有这样的想法，都知道产品设计开发要快速迭代、要小步快跑，产品设计的咋样才能放出来？啥时放出来才是目前大家要关心的。 “ 这样就好 ”的理念或许能就帮忙解决上述两个问题。在产品设计开发中，控制关键需求周期，简化相关接口人，降低沟通成本，保证产品放出来的速度；寻找合适的人和团队，把握产品品质，保证在这样有限的人力和资源下，这个产品这个时候是平实、好用的。这时如果大家或关键人相信产品这样就好，这样就好就放出来吧！]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft" title="设计中的设计" src="http://img2.douban.com/lpic/s2165932.jpg" alt="" width="200" height="299" />继续写<a title="读《设计中的设计》——信息传达" href="http://www.ashnotes.com/design-in-design-information-show/" target="_blank">《设计中的设计》读后感</a>，这次主题是原研哉在提及无印良品时反复提到的设计哲理——<strong>这样就好</strong>！</p>
<p>或许我们习惯了这样的一句话 “ <strong>没有最好，只有更好 </strong>” 来表明我们追求卓越的精神，这句话的真实意思或许被我们忽略了，世上没有最好的东西，只有更好的东西，但什么东西才是更好的？为什么这样的设计才是更好的？因为最好是更好的极限，更好更是最好的某个界限，即阈值。而 <strong>这样就好</strong> 就是<strong><span style="font-weight: normal;">原研哉及其代言的无印良品团队 对 </span>更好<span style="font-weight: normal;"> 的一个求解</span>。</strong></p>
<p>那什么是这样就好？原研哉是这样解释的，<strong>这样就好</strong> 是消费者对产品品质满意的评价，是客户体验的一种满足感。相对于 <strong>这个最好、非他不可 </strong>诱发消费者对产品产生强烈的自我喜好，<strong>这样就好</strong> 是让消费者与产品和谐相处。<strong>这个最好</strong> 的目标用户是心甘情愿接受高价的小众，以限量生产标榜产品的稀缺；而 <strong>这样就好</strong> 的目标用户相对大众，是承认资源短缺情况下相信产品的品质，也能使用的上高品质的产品。正如原研哉所说，“<strong>这样</strong>，蕴含着抑制、让步、退一步海空天空的理智态度”，<strong>这个 </strong>和个性自由走得太近反而变得不自由，<strong>这样</strong> 的宽容放达或许更接近真正的自由。</p>
<p>在如今互联网的产品设计环境中，“闷在屋子里面设计出这世界上最好的产品”的想法已经不切实际。不管什么产品，是骡子是马得拉出来溜溜让用户去体验、让用户去评价。问题是现在大家都有这样的想法，都知道产品设计开发要快速迭代、要小步快跑，产品设计的咋样才能放出来？啥时放出来才是目前大家要关心的。</p>
<p>“ <strong>这样就好 </strong>”的理念或许能就帮忙解决上述两个问题。在产品设计开发中，控制关键需求周期，简化相关接口人，降低沟通成本，保证产品放出来的速度；寻找合适的人和团队，把握产品品质，保证在这样有限的人力和资源下，这个产品这个时候是平实、好用的。这时如果大家或关键人相信产品这样就好，这样就好就放出来吧！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/design-of-design-this-is-enough/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>读《设计中的设计》——信息传达</title>
		<link>http://www.ashnotes.com/design-in-design-information-show/</link>
		<comments>http://www.ashnotes.com/design-in-design-information-show/#comments</comments>
		<pubDate>Mon, 16 Aug 2010 13:40:25 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[读书笔记]]></category>
		<category><![CDATA[UE]]></category>
		<category><![CDATA[产品设计]]></category>
		<category><![CDATA[信息传达]]></category>
		<category><![CDATA[原研哉]]></category>
		<category><![CDATA[设计]]></category>
		<category><![CDATA[设计中的设计]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=559</guid>
		<description><![CDATA[最近在读原研哉的《设计中的设计》，下面会陆续将此书心得记录在此。 在第一章结尾处，原研哉提到：“信息传达的目的不是通过视觉冲击力来吸引人们的注意，而是慢慢渗透到五官当中去。在人们还没有注意到他的存在时成熟、隐秘、精密、有力的信息传达已经完成。” 读到这时，我联想到的关键词是 web 中的  UI、UE、和迭代优化。 UI 设计，无论如何是重要的，对老板来说，这一块是保持话语权的领地；对用户来说，UI即产品。设计师在做 UI ，夹杂或权衡了太多的因素，而容易忘记设计的本意是什么，设计出来的信息是要表达什么。而往往中，大部分的设计作品突出了视觉冲击力，而弱化了设计的感染力。这一点在 Web 首页、电子营销邮件中非常常见。视觉冲击力无疑是令人震撼的，但 Web 再震憾也赶超不过电视，Web 中的 UI 设计应到有自己的内涵，而且这种内涵是有共通性的。 这种共通性就是设计的感染力。用户在产品体验过程中，会对产品作出反应：打开继续、关闭走人、心情 愉悦、困惑不爽等等。这种体验会感染到用户，这种感染力会润物细无声般渗入用户的五脏六腑。其中，UE 就是设计感染力的催化剂，信息架构、文案、交互等都是 UE 的组成部分。相对于视觉而言，这些都是较为精密细致的、很给力的（尤其是在 iPhone 那样的触觉领域）。 那如何保证设计的感染力呢？设计师首先是需要基于现有设计的产品不满意，细分出设计的差异性，对过去和现成的设计有审慎的批判性。其次要将这种批判性转化为对产品的精雕细琢般的迭代优化。是迭代优化而为什么不革命？革命的成本太高、性价比低，若非 Jobs 这等人妄谈革命。迭代优化或许是笨办法，但能让用户不知不觉中感受产品的成长、成熟。]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft" title="设计中的设计@douban" src="http://img2.douban.com/lpic/s2165932.jpg" alt="" width="200" height="299" /></p>
<p>最近在读原研哉的《<a href="http://book.douban.com/subject/1941558/" target="_blank">设计中的设计</a>》，下面会陆续将此书心得记录在此。</p>
<p>在第一章结尾处，原研哉提到：“信息传达的目的不是通过视觉冲击力来吸引人们的注意，而是慢慢渗透到五官当中去。在人们还没有注意到他的存在时成熟、隐秘、精密、有力的信息传达已经完成。” 读到这时，我联想到的关键词是 web 中的  UI、UE、和迭代优化。</p>
<p><strong>UI 设计</strong>，无论如何是重要的，对老板来说，这一块是保持话语权的领地；对用户来说，UI即产品。设计师在做 UI ，夹杂或权衡了太多的因素，而容易忘记设计的本意是什么，设计出来的信息是要表达什么。而往往中，大部分的设计作品突出了视觉冲击力，而弱化了设计的感染力。这一点在 Web 首页、电子营销邮件中非常常见。视觉冲击力无疑是令人震撼的，但 Web 再震憾也赶超不过电视，Web 中的 UI 设计应到有自己的内涵，而且这种内涵是有共通性的。</p>
<p>这种共通性就是<strong>设计的感染力。</strong>用户在产品体验过程中，会对产品作出反应：打开继续、关闭走人、心情 愉悦、困惑不爽等等。这种体验会感染到用户，这种感染力会润物细无声般渗入用户的五脏六腑。其中，<strong>UE </strong> 就是设计感染力的催化剂，信息架构、文案、交互等都是 UE 的组成部分。相对于视觉而言，这些都是较为精密细致的、很给力的（尤其是在 iPhone 那样的触觉领域）。</p>
<p>那如何保证设计的感染力呢？设计师首先是需要基于现有设计的产品不满意，细分出<strong>设计的差异性</strong>，对过去和现成的设计有审慎的批判性。其次要将这种批判性转化为对产品的精雕细琢般的迭代优化。是迭代优化而为什么不革命？革命的成本太高、性价比低，若非 Jobs 这等人妄谈革命。迭代优化或许是笨办法，但能让用户不知不觉中感受产品的成长、成熟。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/design-in-design-information-show/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>读《人人都是产品经理》</title>
		<link>http://www.ashnotes.com/read-renrenispm/</link>
		<comments>http://www.ashnotes.com/read-renrenispm/#comments</comments>
		<pubDate>Mon, 14 Jun 2010 08:46:35 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[互联网]]></category>
		<category><![CDATA[读书笔记]]></category>
		<category><![CDATA[产品经理]]></category>
		<category><![CDATA[人人都是产品经理]]></category>
		<category><![CDATA[苏杰]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=474</guid>
		<description><![CDATA[《人人都是产品经理》这本书很难啃，很难想像其他人能像《 结网 》那样两三个小时就可以快速读完。之所以很难啃，就是里面讲的很细，又是平时工作中想总结而又没有总结得到的东西。抛开令人争议的人人是否都可成为产品经理，《人人都是产品经理》给阿石印象最深的关键词是”需求、文档、产品”。 一、需求 用户是需求之源。因为产品经理满足了用户各式各样的需求，才可以说产品经理改变了世界。那怎样满足需求呢，苏杰总结了三种方式 改变现状 降低理想 转移需求 改变现状是优化现有产品或推出更好用、富有竞争力的产品，降低理想是我们这个产品还不够完善，beta版希望用户体验时多反馈反馈意见，转移需求是产品目前做不到的换种方式间接实现。当然在一些公司中，”创造需求”成了公司内部流行词，“业内没有就创造一个”的需求不是长江后浪推前浪，就是能够活下来了没几个。创造需求是”产品设计的最高境界”,然而为什么会有“创造需求”的需求？除了公司领导的好大喜功，或许创造力才是人类生存下来的内核动力。不管哪种需求，在真实世界、在互联网业内都能找到他最初的原型，这个原型起初也是一个产品的“概念”，这也是王坚同学开篇中没有用”需求”而用”概念“的缘由。 二、文档 “真的需要文档”，真的,确实如此。对公司领导，需要 PPT 文档去展示产品的潜力；对开发设计，需要产品原型、需求书保证产品按照规划去实现。日常工作沟通”面谈+电话+QQ”只能解决一时事后即忘，而邮件的以通报、存档的文档形式告知到家起到定期推动产品或项目进度的作用。所谓 MRD、 BRD 、PRD 等各式文档存在的意义是就是做产品的人需要面向文档的不同用户作出解释、说明产品的意义和产品的功能模块。 三、产品 有人说产品是产品经理生的孩子，我觉得有失偏颇，因为不全面。产品是团队集体的结晶，还有其他团队成员的幸苦栽培，有策划赋予的头脑骨骼、有设计展示的外衣形象、有开发加载的动作设定，甚至需要法律等服务部门拿到产品”准生证”。不排除产品经理有将”产品视为儿子”这样的感情，因为产品从概念到原型、从原型到实现、从实现再到下一轮迭代优化，产品经理全程产品从无到有、从有到优的过程，甚至还会体味产品因为各种原因被砍掉、中途夭折的痛苦.阿石的好友李天雷 就有一番新论”别整天产品经理产品经理，你就是个破画图的！设计你做不过 UI ；开发你做不过程序员；活动方案你做不过运营；收入盈利你做不过销售；谈战略你谈不过高层；比权力你比不上老板；你还整天要这些人全能听你的接受你的按照你的想法去做，产品做赔了赔多少让你拿工资赔，你敢吗？你敢吗？你敢你才是！“一时风靡各大微博。 四、人人都是产品经理 可能全书最具争议的一句话就是此句了。虽然苏杰强调”人人都是产品经理”是种理念，希冀人们在日常生活中都可以成为产品经理，只要发起一个需求，团结一帮人，促进这个需求实现并迭代优化。但现实情况确实是一般人（用户）都很懒，不会去做产品经理这等苦差事；其次如果人人都是产品经理，真正的有价值的产品经理就会贬值，这就是经济学意义上的”劣币驱逐良币”,这就像人人都是乔布斯的话，那乔布斯就不是乔布斯的道理一样。所以在可预见的将来，产品经理也不是人人都可以做的，需要一种敏感天份、一种勤勉关注的人接着做，作出好产品、伟大的产品！]]></description>
			<content:encoded><![CDATA[<p>《<a href="http://book.douban.com/subject/4723970/" target="_blank">人人都是产品经理</a>》这本书很难啃，很难想像其他人能像<a title="阿石的《结网》的读书笔记" href="http://www.ashnotes.com/read-jiewang/" target="_self">《 结网 》</a>那样两三个小时就可以快速读完。之所以很难啃，就是里面讲的很细，又是平时工作中想总结而又没有总结得到的东西。抛开令人争议的人人是否都可成为产品经理，《人人都是产品经理》给阿石印象最深的关键词是”<strong>需求、文档、产品”。</strong></p>
<p><strong>一、需求</strong></p>
<p>用户是需求之源。因为产品经理满足了用户各式各样的需求，才可以说产品经理改变了世界。那怎样满足需求呢，苏杰总结了三种方式</p>
<ul>
<li>改变现状</li>
<li>降低理想</li>
<li>转移需求</li>
</ul>
<p>改变现状是优化现有产品或推出更好用、富有竞争力的产品，降低理想是我们这个产品还不够完善，beta版希望用户体验时多反馈反馈意见，转移需求是产品目前做不到的换种方式间接实现。当然在一些公司中，”创造需求”成了公司内部流行词，“业内没有就创造一个”的需求不是长江后浪推前浪，就是能够活下来了没几个。创造需求是”产品设计的最高境界”,然而为什么会有“创造需求”的需求？除了公司领导的好大喜功，或许创造力才是人类生存下来的内核动力。不管哪种需求，在真实世界、在互联网业内都能找到他最初的原型，这个原型起初也是一个产品的“概念”，这也是王坚同学开篇中没有用”需求”而用”概念“的缘由。</p>
<p><strong>二、文档</strong></p>
<p>“真的需要文档”，真的,确实如此。对公司领导，需要 PPT 文档去展示产品的潜力；对开发设计，需要产品原型、需求书保证产品按照规划去实现。日常工作沟通”面谈+电话+QQ”只能解决一时事后即忘，而邮件的以通报、存档的文档形式告知到家起到定期推动产品或项目进度的作用。所谓 MRD、 BRD 、PRD 等各式文档存在的意义是就是做产品的人需要面向文档的不同用户作出解释、说明产品的意义和产品的功能模块。</p>
<p><strong>三、产品</strong></p>
<p>有人说产品是产品经理生的孩子，我觉得有失偏颇，因为不全面。产品是团队集体的结晶，还有其他团队成员的幸苦栽培，有策划赋予的头脑骨骼、有设计展示的外衣形象、有开发加载的动作设定，甚至需要法律等服务部门拿到产品”准生证”。不排除产品经理有将”产品视为儿子”这样的感情，因为产品从概念到原型、从原型到实现、从实现再到下一轮迭代优化，产品经理全程产品从无到有、从有到优的过程，甚至还会体味产品因为各种原因被砍掉、中途夭折的痛苦.阿石的好友<a href="http://www.rayiswaiting.com/" target="_blank">李天雷</a> 就有一番新论”<em>别整天产品经理产品经理，你就是个破画图的！设计你做不过 UI ；开发你做不过程序员；活动方案你做不过运营；收入盈利你做不过销售；谈战略你谈不过高层；比权力你比不上老板；你还整天要这些人全能听你的接受你的按照你的想法去做，产品做赔了赔多少让你拿工资赔，你敢吗？你敢吗？你敢你才是！</em>“一时风靡各大微博。</p>
<p><strong>四、人人都是产品经理</strong></p>
<p>可能全书最具争议的一句话就是此句了。虽然苏杰强调”人人都是产品经理”是种理念，希冀人们在日常生活中都可以成为产品经理，只要发起一个需求，团结一帮人，促进这个需求实现并迭代优化。但现实情况确实是一般人（用户）都很懒，不会去做产品经理这等苦差事；其次如果人人都是产品经理，真正的有价值的产品经理就会贬值，这就是经济学意义上的”劣币驱逐良币”,这就像人人都是乔布斯的话，那乔布斯就不是乔布斯的道理一样。所以在可预见的将来，产品经理也不是人人都可以做的，需要一种敏感天份、一种勤勉关注的人接着做，作出好产品、伟大的产品！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/read-renrenispm/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>读《结网》</title>
		<link>http://www.ashnotes.com/read-jiewang/</link>
		<comments>http://www.ashnotes.com/read-jiewang/#comments</comments>
		<pubDate>Tue, 01 Jun 2010 01:51:02 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[杂谈其他]]></category>
		<category><![CDATA[读书笔记]]></category>
		<category><![CDATA[产品经理]]></category>
		<category><![CDATA[王坚]]></category>
		<category><![CDATA[结网]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=461</guid>
		<description><![CDATA[《结网》 老早都读完了，现在才准备写读书笔记，有点晚。当时（5月3号）读完后随手在腾讯微博上丢下读书小结： #王坚#实战经验之作，案例丰富，让人信服 作者阅历很广引用读料、图片素材恰到好处，平时知识累积很重要 章节之间衔接做的不够好，读进去容易迷失方向，有个”面包屑“指引或小结最好 190页以后大段引用Pixar有灌水之嫌 写得很粗糙，对作者的辛劳成果也不负责任，现在重新理一理思绪，写一下读《结网》的心得。 一、互联网产品经理也可以改变世界 本书的副标题是“互联网产品经理改变世界”，并开篇第一句话就是“广义上来看，人人都是产品经理”来照应苏杰同学的那本同名、同期出版的书。但不同的是王坚并没有象苏杰那样宣传普及在现实世界里面人人都可以是产品经理，而是进一步把范围缩小——互联网产品经理也可以改变世界，虽然不能象超人那样拯救世界，但我们可以通过发布新产品、优化旧产品一点一滴使得世界变得更美好，无论这个世界是带给我们多样丰富信息、各种在线体验的虚拟世界，还是便利日常生活、提高生活质量的真实世界。那谁才是互联网产品经理呢？王坚的定义是“负责对现有互联网产品进行管理及营销的人员，他也负责开发新产品”，这个定义不是很严格，因为按照这样的定义，网站策划、产品策划、项目经理等互联网企业中常见职位也算是互联网产品经理。而马化腾在本书序中也有提及产品经理： 做最挑剔的用户，要天天用产品，发现产品的不足 将产品的核心能力（对用户有帮助、解决用户需求等）做到极致，通过技术实现差异化 这是马化腾们成功心得，也是对产品经理的要求。 二、互联网产品经理凭什么改变世界 互联网产品经理凭什么改变世界？答案是互联网产品，如QQ、Google、Amazon等，因为QQ们帮助我们解决了在线即时沟通的需求，Google们帮助我们在信息大爆炸时代快速检索信息，Amazon们帮助我们足不出户就可以买想要东西。一个产品的发布者无论是公司团队，还是个人站长，都是要经历“概念探讨——把概念编程图纸——关注用户体验——网站分析——持续更新”这些环节，《结网》把产品的从无到有、从有到优这个过程中所遇到的关键环节配以各种互联网产品素材一一点拨，而不是象《人人都是产品经理》按照需求分析、开发流程那样详细说明。一个在意，一个在力，这也是《结网》读起来酣畅淋漓快速读完，《人人》则读起来就要慢得多的原因。 很奇怪王坚没有用“需求”来启动一个产品从无到有的开始，而是用“概念”这个词。或许是在各种产品大行其道的今天，从同类网站产品的概念切入或许更能快速了解用户的需求。概念不能停留在口头上，更要反映到图纸上，就这样就有了原型设计、线框图、各类需求书等推动概念落地、开发实现。当然，概念是源头，设计概念时有以下注意事项： 不要重新发明轮子，将概念山寨到中国（Copy to China）并不可耻 把自己作为用户，从自己需求出发，原创概念 从已有产品概念中寻求差异化，挖掘蓝海 这让我想起了团购这个概念，首先得承认普通用户在线下一直有团购的需求，因为大家一起买可以降低各自的购买成本。篱笆网、招商银行等03年左右就已经将团购这个概念搬到互联网上（不重新发明轮子），都是集中价值高的部分商品。后来美团们（抄袭Groupon，山寨到中国）发现价值低的商品也有团购的需求（蓝海），利用社会化媒体的做的当下一时风生水起。或许团购这个概念未来还有值得挖的蓝海。由此可以推出墨菲定律概念版，凡是概念，都可以新瓶换旧酒，都可以玩出新花样。 而当一个产品从有到优的演化，就需要产品经理关注用户体验、网站分析和持续更新，将产品核心功能做到极致，以此形成迭代、小步快跑。王坚总结的用户体验三要素也很简单： 别让我等 别让我想 别让我烦 “别让我等”是访问浏览速度要快、“别让我想”借用了Steve krug 写的那本著名的《 Don’t make me think 》，是信息设计要简单、“别让我烦”是交互流程要清晰。而网站分析是要分析流量、网站内容、用户三大块，通过细分、对比等方法形成针对性报告促成产品设计改进和产品运营的提高。 三、互联网产品经理的修身 从古至今，“修身齐家治国平天下 ”是中国文人士子的人生格言，以修身为始、以平天下为终，以终为始，平天下最后还要修身。一个产品经理的修身会映射到他所策划设计的产品上，并通过产品影响到世界，例如马化腾的沉稳老练（ QQ 的十年演化），周鸿伟的狠du老辣（ 360 与金山）。在互联网日益发展的今天，团队合作抱团作战已是提高成功机率的必备，就连站长之王蔡文胜也要同人家合作。学会和团队其他各角色的人沟通协作，已然是产品经理的必备技能。哪怕身处逆境，也要与团队成员同舟共济，“胜则举杯相庆，败则拼死相救”。]]></description>
			<content:encoded><![CDATA[<p><strong> <a title="结网" href="http://book.douban.com/subject/4736118/" target="_blank"><span style="color: #0000ff;">《结网》</span></a> </strong>老早都读完了，现在才准备写读书笔记，有点晚。当时（5月3号）读完后随手在<a title="阿石的腾讯微博" href="http://t.qq.com/ashnotes" target="_blank">腾讯微博</a>上丢下读书小结：</p>
<ol>
<li> <a href="http://t.qq.com/k/%25E7%258E%258B%25E5%259D%259A">#王坚#</a>实战经验之作，案例丰富，让人信服</li>
<li> 作者阅历很广引用读料、图片素材恰到好处，平时知识累积很重要</li>
<li>章节之间衔接做的不够好，读进去容易迷失方向，有个”面包屑“指引或小结最好</li>
<li>190页以后大段引用Pixar有灌水之嫌</li>
</ol>
<p>写得很粗糙，对作者的辛劳成果也不负责任，现在重新理一理思绪，写一下读《结网》的心得。</p>
<p><strong>一、互联网产品经理也可以改变世界</strong></p>
<p>本书的副标题是“互联网产品经理改变世界”，并开篇第一句话就是“<span style="text-decoration: underline;">广义上来看，人人都是产品经理</span>”来照应苏杰同学的那本同名、同期出版的书。但不同的是王坚并没有象苏杰那样宣传普及在现实世界里面人人都可以是产品经理，而是进一步把范围缩小——互联网产品经理也可以改变世界，虽然不能象超人那样拯救世界，但我们可以通过发布新产品、优化旧产品一点一滴使得世界变得更美好，无论这个世界是带给我们多样丰富信息、各种在线体验的虚拟世界，还是便利日常生活、提高生活质量的真实世界。那谁才是互联网产品经理呢？王坚的定义是“<span style="text-decoration: underline;">负责对现有互联网产品进行管理及营销的人员，他也负责开发新产品</span>”，这个定义不是很严格，因为按照这样的定义，网站策划、产品策划、项目经理等互联网企业中常见职位也算是互联网产品经理。而马化腾在本书序中也有提及产品经理：</p>
<ul>
<li> 做最挑剔的用户，要天天用产品，发现产品的不足</li>
<li> 将产品的核心能力（对用户有帮助、解决用户需求等）做到极致，通过技术实现差异化</li>
</ul>
<p>这是马化腾们成功心得，也是对产品经理的要求。</p>
<p><strong>二、互联网产品经理凭什么改变世界</strong></p>
<p>互联网产品经理凭什么改变世界？答案是互联网产品，如QQ、Google、Amazon等，因为QQ们帮助我们解决了在线即时沟通的需求，Google们帮助我们在信息大爆炸时代快速检索信息，Amazon们帮助我们足不出户就可以买想要东西。一个产品的发布者无论是公司团队，还是个人站长，都是要经历“<span style="text-decoration: underline;">概念探讨——把概念编程图纸——关注用户体验——网站分析——持续更新</span>”这些环节，《结网》把产品的从无到有、从有到优这个过程中所遇到的关键环节配以各种互联网产品素材一一点拨，而不是象《人人都是产品经理》按照需求分析、开发流程那样详细说明。一个在意，一个在力，这也是《结网》读起来酣畅淋漓快速读完，《人人》则读起来就要慢得多的原因。</p>
<p>很奇怪王坚没有用“需求”来启动一个产品从无到有的开始，而是用“概念”这个词。或许是在各种产品大行其道的今天，从同类网站产品的概念切入或许更能快速了解用户的需求。概念不能停留在口头上，更要反映到图纸上，就这样就有了原型设计、线框图、各类需求书等推动概念落地、开发实现。当然，概念是源头，设计概念时有以下注意事项：</p>
<ul>
<li> 不要重新发明轮子，将概念山寨到中国（Copy to China）并不可耻</li>
<li> 把自己作为用户，从自己需求出发，原创概念</li>
<li>从已有产品概念中寻求差异化，挖掘蓝海</li>
</ul>
<p>这让我想起了<strong>团购</strong>这个概念，首先得承认普通用户在线下一直有团购的需求，因为大家一起买可以降低各自的购买成本。篱笆网、招商银行等03年左右就已经将团购这个概念搬到互联网上（不重新发明轮子），都是集中价值高的部分商品。后来<a title="美团式社会化媒体营销" href="http://www.ashnotes.com/meituan-social-media-marketing/" target="_blank">美团们</a>（抄袭Groupon，山寨到中国）发现价值低的商品也有团购的需求（蓝海），利用社会化媒体的做的当下一时风生水起。或许团购这个概念未来还有值得挖的蓝海。由此可以推出墨菲定律概念版，<strong>凡是概念，都可以新瓶换旧酒，都可以玩出新花样。</strong></p>
<p>而当一个产品从有到优的演化，就需要产品经理关注用户体验、网站分析和持续更新，将产品核心功能做到极致，以此形成迭代、小步快跑。王坚总结的用户体验三要素也很简单：</p>
<ul>
<li>别让我等</li>
<li>别让我想</li>
<li>别让我烦</li>
</ul>
<p>“别让我等”是访问浏览速度要快、“别让我想”借用了Steve krug 写的那本著名的<span style="font-family: Consolas, Monaco, 'Courier New', Courier, monospace; line-height: 18px; font-size: 12px; white-space: pre;"><strong><span style="color: #0000ff;"><a title="请看阿石写的读书笔记《简获我心》" href="http://www.douban.com/note/19270607/" target="_blank">《 Don’t make me think 》</a>，</span></strong></span>是信息设计要简单、“别让我烦”是交互流程要清晰。而网站分析是要分析流量、网站内容、用户三大块，通过细分、对比等方法形成针对性报告促成产品设计改进和产品运营的提高。</p>
<p><strong>三、互联网产品经理的修身</strong></p>
<p>从古至今，“修身齐家治国平天下 ”是中国文人士子的人生格言，以修身为始、以平天下为终，以终为始，平天下最后还要修身。一个产品经理的修身会映射到他所策划设计的产品上，并通过产品影响到世界，例如马化腾的沉稳老练（ QQ 的十年演化），周鸿伟的狠du老辣（ 360 与金山）。在互联网日益发展的今天，团队合作抱团作战已是提高成功机率的必备，就连站长之王蔡文胜也要同人家合作。学会和团队其他各角色的人沟通协作，已然是产品经理的必备技能。哪怕身处逆境，也要与团队成员同舟共济，“胜则举杯相庆，败则拼死相救”。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/read-jiewang/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>读《每天懂一点色彩心理学》</title>
		<link>http://www.ashnotes.com/color-psychology/</link>
		<comments>http://www.ashnotes.com/color-psychology/#comments</comments>
		<pubDate>Sun, 28 Mar 2010 02:24:35 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[读书笔记]]></category>
		<category><![CDATA[心理学]]></category>
		<category><![CDATA[用户心理]]></category>
		<category><![CDATA[色彩]]></category>
		<category><![CDATA[色彩心理学]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=382</guid>
		<description><![CDATA[在互联网项目实施过程中，作为担任项目负责人角色的如策划、产品经理、项目经理等都需要将需求建立原型，将原型转化文档，作为UI和开发的交付物。其中最容易而引起口舌之争的则是界面元素的风格、色调、用色等统称UI设计上，引起这类纷争一方面各项目相关人在产品出炉之前都会在大脑中各有不同的理想定型，千人千界面；而另一方面则是由于项目负责人向UI设计师风格表述不清晰而引起的。因此项目负责人多了解点颜色，学会向项目各相关人正确表达传播颜色，以此减少多方磨合提高迭代效率是大有裨益的。带着这个目的阿石读了日本原田玲仁写的《每天懂一点色彩心理学》 ，并将其列入“产品策划与设计”的豆列当中作为项目负责人的参考读物。下面是我对这本书的梳理和心得体会，给大家做个分享。 从中学的物理知识我们知道了三原色或三基色（红、绿、蓝），这只是千千万万之三的颜色基本品种，大多数人包括自己对色彩的究竟是什么、色彩有哪些要素组成的这些问题若是刨根问底来也会是解释的不清不楚。从亚里士多德的“非白光则不纯净”的哲学观到牛顿的“三棱镜实验”了解光的七色光谱组成、再到芒塞尔对色彩建立体系兵对色彩赋以数值定义，人类对色彩的认识与运用也是从朴素的哲学思想走向现代大规模工业化的进程。 1、色彩的三要素 色相：通常所说的“红色、蓝色、黄色、绿色”，说的其实是色彩的色相，一种颜色区别于另一种颜色的表象特征 明度：色彩的明亮的程度，明度最高的是白色（亮）、最低的是黑色（暗）。 彩度：色彩的鲜艳程度，彩度最高的是纯色，最低是灰色 著名的芒塞尔值（ munsell value )就是用上面的色彩三要素加以数值表达的，即 芒塞尔值=  色相 明度/彩度  Hue Value / Chrome（ H V / C ） 在项目碰头会、头脑风暴会上，色调是出现机率最高的词汇。色调其实是色彩明度和彩度的综合用语。例如某某需求人说“色调太艳了，调暗些”，其实他所表达的完整意思是“把色彩的彩度降低、把色彩的明度调暗些”，我们不能强求需求人完美表达色彩的具体，但作为项目负责人则有责任将需求人的意思细化并记录下来。 2、色彩的衍生属性 由于人类接收信息源最大的通道是眼睛视觉，人类通过视觉观察外界物体、自然现象，至少有80％以上的外界信息经视觉获得，而色觉是视觉的重要组成 ，人们对一个物件颜色的感知甚至会对扭曲物件的其他固有属性。 1）   色彩使时间变得更快或变慢 爱因斯坦在解释他的相对论时曾举例美女使时间变快，我们在页面设计时也可以将其应用到色彩当中来，如果希望页面吸引用户浏览、希望用户多在页面停留哪怕一秒钟，可以用让人冷静清爽的蓝色调作为主背景，这一般见于电子商务网站的首页，因为首页是网站页面最大的导航和信息架构图，我们希望用户冷静的通过一个页面就可以了解我们网站的业务和服务；如果希望用户快进快走、希望用户跳转到目的页面，建议实用让人热血沸腾的红色调作为主背景，这一般见于电子商务网站的营销广告页，因为我们希望用户看到广告页后点击进入产品详情页迅速下单； 2）色彩使物体变得更重或更轻 色彩本身是没有重量的，只是不同的颜色会扭曲人们对物件重量的预期，如同等大小的箱子，在未搬动之前，黑色的箱子预期就是比白色的箱子重些。网页是总会有头重脚轻的感觉，因为网站的设计者总是考虑第一印象是很重要的，所以会在网页首屏对色彩的色相、明度、彩度用的强一些以此来吸引用户，而对页面最底部页脚部分色彩就会低一些，甚至只是一些文字链。 3）色彩使得空间变得更大或更小 同一块物件的面积、体积也会不同的因为颜色的不同而表现各异。色彩的明度影响面积大小的感知，色彩的彩度影响体积胖瘦的感知。这一点表现在网站组件交互设计中。QQ会员“开通会员按钮”鼠标划过前是暗红色背景，鼠标停留时将明度提高，暗红色变为鲜红色，按钮变亮面积变大的同时，突兀的按钮因为鼠标停留待点击变得更加矮小，这种感觉暗合了平时用户生活习惯（例如电脑开机电源开关）。而豆瓣对文字链的交互处理更为细腻，鼠标划过前是无底蓝色，鼠标停留时是蓝底白字、点击时是橙底白字，点击后是渐变为无底黑字。 3 、色彩心理学与用户偏好 由于世界各地的纬度不同而阳光照射不一样、各自文化历史宗教发展各异以及空气散射程度不同，影响了每个民族、地区乃至国家代表颜色的偏好。细化到个人、企业，每个人都会有自己喜好的颜色，而且随着年龄增长、环境变迁还换更换自己的偏好色；每个企业都会注重企业形象的视觉表达，而且随着业务拓展、战略定位重新规定自己的品牌色（例如苹果这样的工业化设计产品）。色彩的选择与用户的性格总是有种某种对应关系，因此通过调查色彩偏好我们就会了解用户偏好、需求取舍，乃至企业文化。 1）喜欢那些暖色调的用户性格 红色:外向型、热情而正义，红色因为其在中国历史、政治的特殊地位更更具有象征意义，如喜庆、革命,例如京东、红孩子 橙色：有竞争力、活动力强，从不认输，淘宝倒立者赢 黄色：幽默、工作能力强，黄帝老子的专享色，QQ黄钻尊贵特权 2 ）中意那些冷色调的用户性格 绿色：自然、和平、有社会责任感，环保意识强，到安居客找房、大家应该见识豆瓣豆油愤青、拍砖的厉害吧 蓝色：礼貌、谦虚、协调能力强，给人以稳重、可靠的感觉，例如财付通 灰色：有教养、知识丰富，苹果官网所要塑造的气氛 4、色彩学习小结 以上是结合《每天懂一点色彩心理学》知识与平时网站策划工作经验所作的一个整理，作为项目的推动角色或产品设计的灵魂人物，对产品不能光有骨架式的产品原型设计，还应有赋予产品血与肉的设想、乃至规定。其实色彩心理学的应用范围远远不止与网站，例如着装打扮、会议交际、甚至减肥都有色彩心理学应用的实践案例，如有兴趣就请进入这本书的讲解吧，每天哪怕懂一点。]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft" title="色彩心理学" src="http://t.douban.com/lpic/s3835435.jpg" alt="" width="182" height="263" /></p>
<p>在互联网项目实施过程中，作为担任项目负责人角色的如策划、产品经理、项目经理等都需要将需求建立原型，将原型转化文档，作为UI和开发的交付物。其中最容易而引起口舌之争的则是界面元素的风格、色调、用色等统称UI设计上，引起这类纷争一方面各项目相关人在产品出炉之前都会在大脑中各有不同的理想定型，千人千界面；而另一方面则是由于项目负责人向UI设计师风格表述不清晰而引起的。因此项目负责人多了解点颜色，学会向项目各相关人正确表达传播颜色，以此减少多方磨合提高迭代效率是大有裨益的。带着这个目的阿石读了日本原田玲仁写的<a href="http://book.douban.com/subject/3786755/" target="_blank">《每天懂一点色彩心理学》</a> ，并将其列入“<a href="http://book.douban.com/doulist/485346 " target="_blank">产品策划与设计</a>”的豆列当中作为项目负责人的参考读物。下面是我对这本书的梳理和心得体会，给大家做个分享。</p>
<p>从中学的物理知识我们知道了三原色或三基色（红、绿、蓝），这只是千千万万之三的颜色基本品种，大多数人包括自己对色彩的究竟是什么、色彩有哪些要素组成的这些问题若是刨根问底来也会是解释的不清不楚。从亚里士多德的“非白光则不纯净”的哲学观到牛顿的“三棱镜实验”了解光的七色光谱组成、再到芒塞尔对色彩建立体系兵对色彩赋以数值定义，人类对色彩的认识与运用也是从朴素的哲学思想走向现代大规模工业化的进程。</p>
<p><strong>1、色彩的三要素</strong></p>
<p>色相：通常所说的“红色、蓝色、黄色、绿色”，说的其实是色彩的色相，一种颜色区别于另一种颜色的表象特征</p>
<p>明度：色彩的明亮的程度，明度最高的是白色（亮）、最低的是黑色（暗）。</p>
<p>彩度：色彩的鲜艳程度，彩度最高的是纯色，最低是灰色</p>
<p>著名的芒塞尔值（ munsell value )就是用上面的色彩三要素加以数值表达的，即</p>
<p><span style="color: #ff0000;">芒塞尔值=  色相 明度/彩度  Hue Value / Chrome（ H V / C ）</span></p>
<p>在项目碰头会、头脑风暴会上，色调是出现机率最高的词汇。色调其实是色彩明度和彩度的综合用语。例如某某需求人说“色调太艳了，调暗些”，其实他所表达的完整意思是“把色彩的彩度降低、把色彩的明度调暗些”，我们不能强求需求人完美表达色彩的具体，但作为项目负责人则有责任将需求人的意思细化并记录下来。</p>
<p><strong>2、色彩的衍生属性</strong></p>
<p>由于人类接收信息源最大的通道是眼睛视觉，人类通过视觉观察外界物体、自然现象，至少有80％以上的外界信息经视觉获得，而色觉是视觉的重要组成 ，人们对一个物件颜色的感知甚至会对扭曲物件的其他固有属性。</p>
<p>1）   色彩使时间变得更快或变慢</p>
<p>爱因斯坦在解释他的相对论时曾举例美女使时间变快，我们在页面设计时也可以将其应用到色彩当中来，如果希望页面吸引用户浏览、希望用户多在页面停留哪怕一秒钟，可以用让人冷静清爽的蓝色调作为主背景，这一般见于电子商务网站的首页，因为首页是网站页面最大的导航和信息架构图，我们希望用户冷静的通过一个页面就可以了解我们网站的业务和服务；如果希望用户快进快走、希望用户跳转到目的页面，建议实用让人热血沸腾的红色调作为主背景，这一般见于电子商务网站的营销广告页，因为我们希望用户看到广告页后点击进入产品详情页迅速下单；</p>
<p>2）色彩使物体变得更重或更轻</p>
<p>色彩本身是没有重量的，只是不同的颜色会扭曲人们对物件重量的预期，如同等大小的箱子，在未搬动之前，黑色的箱子预期就是比白色的箱子重些。网页是总会有头重脚轻的感觉，因为网站的设计者总是考虑第一印象是很重要的，所以会在网页首屏对色彩的色相、明度、彩度用的强一些以此来吸引用户，而对页面最底部页脚部分色彩就会低一些，甚至只是一些文字链。</p>
<p lang="en-US">
<p>3）色彩使得空间变得更大或更小</p>
<p>同一块物件的面积、体积也会不同的因为颜色的不同而表现各异。色彩的明度影响面积大小的感知，色彩的彩度影响体积胖瘦的感知。这一点表现在网站组件交互设计中。<a href="http://vip.qq.com" target="_blank">QQ会员</a>“开通会员按钮”鼠标划过前是暗红色背景，鼠标停留时将明度提高，暗红色变为鲜红色，按钮变亮面积变大的同时，突兀的按钮因为鼠标停留待点击变得更加矮小，这种感觉暗合了平时用户生活习惯（例如电脑开机电源开关）。而<a href="http://book.douban.com/mine?status=wish" target="_blank">豆瓣对文字链</a>的交互处理更为细腻，鼠标划过前是无底蓝色，鼠标停留时是蓝底白字、点击时是橙底白字，点击后是渐变为无底黑字。</p>
<p><strong>3 、色彩心理学与用户偏好</strong></p>
<p>由于世界各地的纬度不同而阳光照射不一样、各自文化历史宗教发展各异以及空气散射程度不同，影响了每个民族、地区乃至国家代表颜色的偏好。细化到个人、企业，每个人都会有自己喜好的颜色，而且随着年龄增长、环境变迁还换更换自己的偏好色；每个企业都会注重企业形象的视觉表达，而且随着业务拓展、战略定位重新规定自己的品牌色（例如苹果这样的工业化设计产品）。色彩的选择与用户的性格总是有种某种对应关系，因此通过调查色彩偏好我们就会了解用户偏好、需求取舍，乃至企业文化。</p>
<p>1）喜欢那些暖色调的用户性格</p>
<p>红色:外向型、热情而正义，红色因为其在中国历史、政治的特殊地位更更具有象征意义，如喜庆、革命,例如京东、红孩子</p>
<p>橙色：有竞争力、活动力强，从不认输，淘宝倒立者赢</p>
<p>黄色：幽默、工作能力强，黄帝老子的专享色，QQ黄钻尊贵特权</p>
<p>2 ）中意那些冷色调的用户性格</p>
<p>绿色：自然、和平、有社会责任感，环保意识强，到安居客找房、大家应该见识豆瓣豆油愤青、拍砖的厉害吧</p>
<p>蓝色：礼貌、谦虚、协调能力强，给人以稳重、可靠的感觉，例如财付通</p>
<p>灰色：有教养、知识丰富，苹果官网所要塑造的气氛</p>
<p><strong>4、色彩学习小结</strong></p>
<p>以上是结合《每天懂一点色彩心理学》知识与平时网站策划工作经验所作的一个整理，作为项目的推动角色或产品设计的灵魂人物，对产品不能光有骨架式的产品原型设计，还应有赋予产品血与肉的设想、乃至规定。其实色彩心理学的应用范围远远不止与网站，例如着装打扮、会议交际、甚至减肥都有色彩心理学应用的实践案例，如有兴趣就请进入<a href="http://www.douban.com/subject/3786755/" target="_blank">这本书</a>的讲解吧，每天哪怕懂一点。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/color-psychology/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

