<?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://tina.reeze.cn/category/interactive-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://tina.reeze.cn</link>
	<description>爱生活爱设计，这里是一片自由的沃土，生活的美好由此开启……</description>
	<lastBuildDate>Thu, 12 Aug 2010 09:55:32 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>小设计，大想法—用心模仿的设计</title>
		<link>http://tina.reeze.cn/2010/08/12/thinkmore/</link>
		<comments>http://tina.reeze.cn/2010/08/12/thinkmore/#comments</comments>
		<pubDate>Thu, 12 Aug 2010 09:55:32 +0000</pubDate>
		<dc:creator>tina</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[学习]]></category>
		<category><![CDATA[界面设计]]></category>
		<category><![CDATA[PPT;备注;设计;电子白板;]]></category>

		<guid isPermaLink="false">http://tina.reeze.cn/?p=27800</guid>
		<description><![CDATA[[版权声明]:版权归作者“Tina-童童” 所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://tina.reeze.cn/
 
在每天的工作中也许只是在设计一个个小小的点，我们可能经过自己的一些想法，就将其绘制出来；也许是模仿某个被公认为很强大的产品的一些功能，其实要是不动脑子，不从根本上去琢磨，只是从表面的模仿，也许根本体会不到当时那些大牛们的设计思想。
大家应该都见过PPT中的备注吧，没有见过的也可以现在打开来看一眼:)，PPT的备注框在幻灯片页面的下方，无论是否有备注信息都是存在。
最近我在工作中，设计一款电子白板产品时需要增加一个类似的备注功能设计。由于所设计软件本身界面布局的一些特点，只能通过弹出框来控制备注。因此，我在菜单中设计了“添加备注”项，当打开备注框并添加了内容之后，“添加备注”的项换成“查看备注”。删除备注内容只需将备注弹出框里面的文字删掉并关闭弹出框。
自我感觉良好，但是老大却觉得我这样的设计很多余，建议我将“添加备注/查看备注”项直接换作“备注”，并给出了一个很好的例子。桌上有一叠便签纸，我撕下其中一张纸条，写了文字，后来我不需要这个了，我就把它撕掉了扔到垃圾桶。

这样的过程就相当于我这里设计的添加备注&#62;查看备注&#62;删除备注。而我目前的设计只是包含了添加和查看，但是删除的时候，只是相当于擦掉了纸上缩写的文字，并没有真正的扔掉纸条，因此也就是说这个备注的纸条一直都存在。

我们在设计时可以使用菜单中的“备注”按钮将其从后面拿出来，需要的时候写文字，不需要的时候就删掉文字。PPT中设计的备注不管是否有文字的输入都在，只不过与我要设计的界面不同的是，PPT的备注框一直都存在，而我设计的界面备注框需要通过页面菜单中的“备注”项调用，其实只是一个浮于前，一个隐于后的不同而已。
在设计的时候多思考，也许就能够体会前辈的用心，而不是简单的挪用了。虽说目前在设计这个行业上，模仿成了一种习惯，但是白痴的抄袭和用心的模仿，其实还是有很大一段距离的，各位设计的同仁们，未来的设计道路还很漫长，我们都尽量用心制作精良的产品吧。
]]></description>
			<content:encoded><![CDATA[<p>[版权声明]:版权归作者“<a href="http://tina.reeze.cn/../about/">Tina-童童</a>” 所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明:<a href="http://tina.reeze.cn/../">http://tina.reeze.cn/</a></p>
<p> <a href="http://tina.reeze.cn/"><img class="alignnone size-full wp-image-27801" title="小设计大想法2" src="http://tina.reeze.cn/wp-content/uploads/2010/08/小设计大想法2.png" alt="" width="600" height="150" /></a></p>
<p>在每天的工作中也许只是在设计一个个小小的点，我们可能经过自己的一些想法，就将其绘制出来；也许是模仿某个被公认为很强大的产品的一些功能，其实要是不动脑子，不从根本上去琢磨，只是从表面的模仿，也许根本体会不到当时那些大牛们的设计思想。</p>
<p>大家应该都见过PPT中的备注吧，没有见过的也可以现在打开来看一眼:)，PPT的备注框在幻灯片页面的下方，无论是否有备注信息都是存在。</p>
<p>最近我在工作中，设计一款电子白板产品时需要增加一个类似的备注功能设计。由于所设计软件本身界面布局的一些特点，只能通过弹出框来控制备注。因此，我在菜单中设计了“添加备注”项，当打开备注框并添加了内容之后，“添加备注”的项换成“查看备注”。删除备注内容只需将备注弹出框里面的文字删掉并关闭弹出框。</p>
<p>自我感觉良好，但是老大却觉得我这样的设计很多余，建议我将“添加备注/查看备注”项直接换作“备注”，并给出了一个很好的例子。桌上有一叠便签纸，我撕下其中一张纸条，写了文字，后来我不需要这个了，我就把它撕掉了扔到垃圾桶。</p>
<p><a href="http://tina.reeze.cn/"><img class="alignnone size-full wp-image-27803" title="便笺" src="http://tina.reeze.cn/wp-content/uploads/2010/08/便笺.jpg" alt="" width="583" height="94" /></a></p>
<p>这样的过程就相当于我这里设计的添加备注&gt;查看备注&gt;删除备注。而我目前的设计只是包含了添加和查看，但是删除的时候，只是相当于擦掉了纸上缩写的文字，并没有真正的扔掉纸条，因此也就是说这个备注的纸条一直都存在。</p>
<p><a href="http://tina.reeze.cn"><img class="alignnone size-full wp-image-27805" title="便笺2" src="http://tina.reeze.cn/wp-content/uploads/2010/08/便笺2.jpg" alt="" width="583" height="92" /></a></p>
<p>我们在设计时可以使用菜单中的“备注”按钮将其从后面拿出来，需要的时候写文字，不需要的时候就删掉文字。PPT中设计的备注不管是否有文字的输入都在，只不过与我要设计的界面不同的是，PPT的备注框一直都存在，而我设计的界面备注框需要通过页面菜单中的“备注”项调用，其实只是一个浮于前，一个隐于后的不同而已。</p>
<p>在设计的时候多思考，也许就能够体会前辈的用心，而不是简单的挪用了。虽说目前在设计这个行业上，模仿成了一种习惯，但是白痴的抄袭和用心的模仿，其实还是有很大一段距离的，各位设计的同仁们，未来的设计道路还很漫长，我们都尽量用心制作精良的产品吧。</p>
]]></content:encoded>
			<wfw:commentRss>http://tina.reeze.cn/2010/08/12/thinkmore/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>阅读——电纸书时代？</title>
		<link>http://tina.reeze.cn/2010/07/21/reading-e-ink/</link>
		<comments>http://tina.reeze.cn/2010/07/21/reading-e-ink/#comments</comments>
		<pubDate>Wed, 21 Jul 2010 14:45:51 +0000</pubDate>
		<dc:creator>tina</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[界面设计]]></category>
		<category><![CDATA[Eink;电纸书;阅读;Ipad;]]></category>

		<guid isPermaLink="false">http://tina.reeze.cn/?p=27789</guid>
		<description><![CDATA[[版权声明]:版权归作者“Tina-童童” 所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://tina.reeze.cn/

拥挤的地铁上，身体随着列车的摆动在自顾自的平衡着，目光却始终未曾离开自己手中的那个小小物件。无疑，这就是电子书的吸引力。无论是手机、PSP、IPAD还是真正的为阅读而设计的电纸书们，吸引了人们的眼光，让人们可以打发列车上无聊的时光。
手机、PSP、IPAD这些带有阅读电子书功能的产品，拥有绚丽的彩色屏幕界面，华丽的外观设计，个性化的阅读软件。种种显示这些产品已能够满足人们的阅读欲望，但目前市场上出现了各种各样的专为阅读设计的阅读器——电纸书，这些产品是为人们的阅读而生，拥有E-Ink电子墨水屏幕，模拟与纸面相似的阅读情景，不伤眼是个非常好的设计点。
专一的阅读器产品，在众多的带有阅读功能的其他产品间，是否能够占有一席之地呢？话说伟大的乔布斯放出狠话来：人们不再阅读！的确是如此，目前人们的娱乐生活丰富多样，网络世界色彩纷呈，信息过量的涌现在我们眼前，几乎没有时间来关注，如今人们是否还能够继续从书中阅读，汲取养分呢？
【电纸书】：
拥有几乎是唯一的阅读功能，附带着某些音乐功能以及号称可以上网的“残废功能”。
屏幕很特别，最近试用过几款电纸书，用来阅读小说是真的蛮好用，不会很累，屏幕不会扎眼，很赞！
不过电纸书在众多拥有丰富功能的产品中，还是显得功能过分单一，虽然尺寸小于一本书的尺寸，但是比起手机这样的小物件来还是显得身材庞大，携带不便。
另外有个非常不能忍受的就是刷新问题，电纸书产品的刷新比较慢，而且刷新过程中会出现短暂的黑屏幕现象，虽然不会过分的中断用户的阅读，但终归是习惯了其他产品快速的刷新，因此会有稍稍的不爽。
电纸书的进入书籍阅读方式一般是从书架上找书进入，或者从最近阅读界面进入。比较类似纸面书籍的阅读方式。
【手机、PSP等小屏幕产品阅读】
屏幕靓丽，色彩丰富，阅读的时候虽然多是黑白色的文字阅读界面，但是由于屏幕亮度及屏幕背光等因素，不宜长时间的阅读，极易引发疲劳。
这类产品功能较为丰富，且携带非常方便。尤其是手机产品，几乎成为了人们口袋中的必备品。
这类产品进入书籍阅读方式一般是先打开阅读软件，然后再从某入口中寻找要阅读的书籍，按照路径寻找，然后确认开始阅读。这样的方式与平时使用电脑打开某个文件的方式类似，虽然较容易操作，但却不是真正阅读时的习惯。
【IPAD平板电脑】
IPAD阅读是采用模拟真实阅读场景的拟物化设计方式，模拟用户从书架上取下书籍阅读的形式，并且利用无可挑剔的技术将翻阅的方式做到极致，书页的跟随，随着之间的翻动，跟随一起翻看，百分百的模拟翻书的形式，并且在翻阅过程中，可以逐步的看到下一页的文字，在翻开的书页上甚至可以看到上一页文字透过纸面的形式，绝对真实的模拟了阅读的情景。
IPAD进入书籍阅读方式是从Ibooks阅读软件进入，显示书架上的一本本带有封面的书，选择其中的某本书，就类似在图书馆寻找书的感觉，找到书，然后点击打开开始阅读。
IPAD的阅读界面目前看来是无可挑剔的阅读界面，真实的模拟翻阅的感觉，让用户能够身临其境的感受阅读的气氛。除了没有书墨香气及书的触感外，别的与真实的书籍别无二致。
不过IPAD作为一个阅读工具，分量还是略显沉重。尝试阅读过一部分书籍，实在无法长时间的手握，只好放于桌台上使用。另外，作为一个阅读用的产品，携带还是略显不便，尺寸较大，且后盖不防滑，放在包内容易划伤，需要加上额外的外套，这无疑又加重了产品的重量。
在这里我略微对目前大家常用的阅读产品进行简单的说明，借以引发对阅读的思考。到底什么才是最好的阅读方式呢？我们真的会完全抛弃纸面的阅读了吗？电子书的时代到来了，电纸书阅读器的时代是否真的也到来了呢？
]]></description>
			<content:encoded><![CDATA[<p>[版权声明]:版权归作者“<a id="link_18" href="../about/">Tina-童童</a>” 所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明:<a id="link_19" href="../">http://tina.reeze.cn/</a></p>
<p><a href="http://tina.reeze.cn/wp-content/uploads/2010/07/阅读器.jpg"><img class="alignnone size-full wp-image-27796" title="阅读器" src="http://tina.reeze.cn/wp-content/uploads/2010/07/阅读器.jpg" alt="" width="600" height="157" /></a></p>
<p>拥挤的地铁上，身体随着列车的摆动在自顾自的平衡着，目光却始终未曾离开自己手中的那个小小物件。无疑，这就是电子书的吸引力。无论是手机、PSP、IPAD还是真正的为阅读而设计的电纸书们，吸引了人们的眼光，让人们可以打发列车上无聊的时光。</p>
<p>手机、PSP、IPAD这些带有阅读电子书功能的产品，拥有绚丽的彩色屏幕界面，华丽的外观设计，个性化的阅读软件。种种显示这些产品已能够满足人们的阅读欲望，但目前市场上出现了各种各样的专为阅读设计的阅读器——电纸书，这些产品是为人们的阅读而生，拥有E-Ink电子墨水屏幕，模拟与纸面相似的阅读情景，不伤眼是个非常好的设计点。</p>
<p>专一的阅读器产品，在众多的带有阅读功能的其他产品间，是否能够占有一席之地呢？话说伟大的乔布斯放出狠话来：人们不再阅读！的确是如此，目前人们的娱乐生活丰富多样，网络世界色彩纷呈，信息过量的涌现在我们眼前，几乎没有时间来关注，如今人们是否还能够继续从书中阅读，汲取养分呢？</p>
<h2>【电纸书】：</h2>
<p>拥有几乎是<strong>唯一的阅读功能</strong>，附带着某些音乐功能以及号称可以上网的“残废功能”。</p>
<p><strong>屏幕很特别</strong>，最近试用过几款电纸书，用来阅读小说是真的蛮好用，不会很累，屏幕不会扎眼，很赞！</p>
<p>不过电纸书在众多拥有丰富功能的产品中，还是显得功能过分单一，虽然尺寸小于一本书的尺寸，但是比起手机这样的小物件来还是显得身材庞大，<strong>携带不便</strong>。<strong></strong></p>
<p>另外有个非常不能忍受的就是<strong>刷新问题</strong>，电纸书产品的刷新比较慢，而且刷新过程中会出现短暂的黑屏幕现象，虽然不会过分的中断用户的阅读，但终归是习惯了其他产品快速的刷新，因此会有稍稍的不爽。</p>
<p>电纸书的进入书籍阅读方式一般是从书架上找书进入，或者从最近阅读界面进入。比较类似纸面书籍的阅读方式。</p>
<h2>【手机、PSP等小屏幕产品阅读】</h2>
<p>屏幕靓丽，色彩丰富，阅读的时候虽然多是黑白色的文字阅读界面，但是由于屏幕亮度及屏幕背光等因素，不宜长时间的阅读，极易引发疲劳。</p>
<p>这类产品功能较为丰富，且携带非常方便。尤其是手机产品，几乎成为了人们口袋中的必备品。</p>
<p>这类产品进入书籍阅读方式一般是先打开阅读软件，然后再从某入口中寻找要阅读的书籍，按照路径寻找，然后确认开始阅读。这样的方式与平时使用电脑打开某个文件的方式类似，虽然较容易操作，但却不是真正阅读时的习惯。</p>
<h2>【IPAD平板电脑】</h2>
<p>IPAD阅读是采用模拟真实阅读场景的拟物化设计方式，模拟用户从书架上取下书籍阅读的形式，并且利用无可挑剔的技术将翻阅的方式做到极致，书页的跟随，随着之间的翻动，跟随一起翻看，百分百的模拟翻书的形式，并且在翻阅过程中，可以逐步的看到下一页的文字，在翻开的书页上甚至可以看到上一页文字透过纸面的形式，绝对真实的模拟了阅读的情景。</p>
<p>IPAD进入书籍阅读方式是从Ibooks阅读软件进入，显示书架上的一本本带有封面的书，选择其中的某本书，就类似在图书馆寻找书的感觉，找到书，然后点击打开开始阅读。</p>
<p>IPAD的阅读界面目前看来是无可挑剔的阅读界面，真实的模拟翻阅的感觉，让用户能够身临其境的感受阅读的气氛。除了没有书墨香气及书的触感外，别的与真实的书籍别无二致。</p>
<p>不过IPAD作为一个阅读工具，分量还是略显沉重。尝试阅读过一部分书籍，实在无法长时间的手握，只好放于桌台上使用。另外，作为一个阅读用的产品，携带还是略显不便，尺寸较大，且后盖不防滑，放在包内容易划伤，需要加上额外的外套，这无疑又加重了产品的重量。</p>
<p>在这里我略微对目前大家常用的阅读产品进行简单的说明，借以引发对阅读的思考。到底什么才是最好的阅读方式呢？我们真的会完全抛弃纸面的阅读了吗？电子书的时代到来了，电纸书阅读器的时代是否真的也到来了呢？</p>
]]></content:encoded>
			<wfw:commentRss>http://tina.reeze.cn/2010/07/21/reading-e-ink/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>让人又爱又恨的标签们</title>
		<link>http://tina.reeze.cn/2010/05/10/labels/</link>
		<comments>http://tina.reeze.cn/2010/05/10/labels/#comments</comments>
		<pubDate>Mon, 10 May 2010 03:01:32 +0000</pubDate>
		<dc:creator>tina</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[界面设计]]></category>
		<category><![CDATA[多个标签]]></category>
		<category><![CDATA[标签]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://tina.reeze.cn/?p=27770</guid>
		<description><![CDATA[[版权声明]:版权归作者“Tina-童童”所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://tina.reeze.cn/

        标签的出现解决了页面上导航难以排布的难题，让页面信息整理更加容易。标签的形式来源于人们的生活，在书中夹上一些做好标记的纸条并露出书边，下次再寻找书里的内容就非常方便了。
       网页中的标签是为了更加清晰的整理网页导航区域，对每个不同的页面进行信息整理并归类为一种最完整易懂的分类名，以此作为页面的标签。这样的形式在如今的网页设计中得到了广泛的应用。如果我们需要列出的标签只有几个时，可以用非常漂亮的样子做出来，而且会很容易看懂。
      可是当摆在我们面前的是一长串，比如二十几个标签的时候，我们该怎么办呢？以往的做法是将所有标签列出，并排列成多行，这样的方式虽然解决了标签的排布问题，但却给使用的用户带来了极大的困惑，并且这样的排布在形式上也不再像标签的形式了。另外，这样的排布想要类似标签的形式时免不了需要滚动显示标签，将当前项滚动至下方距离标签内容最近的位置。这样就会产生每个标签在使用时位置不固定的问题，用户会有一定的疑惑：上次明明在这里的啊？奇怪，难道我记忆力出问题了？
       
       这个是我一个朋友在设计页面时遇到的问题，在与之进行设计讨论的时候遇到了很多的问题。在这里我将讨论中的思路简单的说一说吧。
      由于显示器显示的页面宽度有限，目前虽然宽屏幕、大分辨率的显示器已经出现，但是还并不算非常普及。我们在设计网页时需要考虑更多的适应性，让更多的用户在使用时不会出现问题，还是需要考虑较小分辨率的显示器情况。鉴于这些限制性因素，那么我们究竟该如何来排布这么多的标签呢？
      1.   分好的标签之间一般是并列关系，内容最好是互相不交叉的，并且是互相平等的关系。如果我们罗列出的许多个标签之间有从属关系，我们需要考虑将其重新进行分类划分。将标签进行分组，把完全平铺的标签换为几组标签。
      2.   用任务标签直接显示分组情况。比如Windows系统中，浏览器在开启多个网页窗口时，在任务栏位置以同一个浏览器程序的形式显示，共同表示开启的多个窗口标签页。这样的显示就大量节省了任务栏宽度。
      3.   将标签从重要标签向次要标签进行排布，按照所设计的页面进行排列，将多余出来的标签归入“更多”标签中，这样虽然在界面上隐藏了一部分标签，但是却让界面显得更加清爽整齐。并且，根据这样的排列后的标签，会突出网页想要人们注意到的重点界面，集中来访用户的关注度。次要标签中的内容让那些愿意在网页中长时间浏览和寻找的用户进行探索，这些相对次要的内容不是网页设计的重点，因此相对而言也不会有非常多的用户使用起来不方便。
      4.   如果标签很难划分重要不重要，可以将所有的标签列出来，并加以滚动条或者左右箭头的形式，让用户可以在众多标签页中横向滚动浏览。为了让人们使用起来更加方便，需要又一个地方可以以下拉菜单或其他形式显示所有标签，方便用户快速选择。另外，在平铺标签的时候，不能无休止的缩短标签的长度，要以标签的辨识度为首要。不能够无休止的缩短标签，以至于用户无法知晓每个标签的内容。如图是有这个问题的典型&#8211;Google Chrome浏览器：
      5.   当横向位置不够放置多个标签时，可以改为向垂直方向设计。垂直方向用户可以较方便的滚动鼠标来浏览，即使标签有比较多个也能更容易的排列。此外，垂直方向上每个标签的高度都是容纳一个字的高度，因此较短的位置可以显示较多的标签。横向设计的标签由于每个标签都会有几个字的长度，从而会占据更多的横向空间。
      最后回到我和朋友讨论的话题上，本来如果只是单纯的是二十个标签我会建议他设计成垂直标签，但是根据项目的特殊性，他搭建的页面左侧还有一个不可或缺的树状结构，因此，经过再多的思考，考虑到这些标签在不同的用户面前会呈现不同的一些标签，但有部分是会常用到的，因此最终建议他考虑使用“3”，即权衡出几个相对常用和重要的标签，然后将排列不下的标签们放到更多标签里面，这样能够将过多的标签稍作缓和。
      在设计标签时可能会遇到各种各样的问题，根据不同的情境采用不同的设计方式，灵活的运用设计技巧就可以制作高可用性的网页。在每次的问题处理时多做不同的尝试，会容易产生很多优秀的设计模式，积累这些设计模式在今后的应用中就会更快捷。
]]></description>
			<content:encoded><![CDATA[<div>[版权声明]:版权归作者“<a href="http://tina.reeze.cn/about/">Tina-童童</a>”所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明:<a href="http://tina.reeze.cn/">http://tina.reeze.cn/</a></div>
<p><a href="http://tina.reeze.cn/"><img class="alignnone size-full wp-image-27783" title="标签2" src="http://tina.reeze.cn/wp-content/uploads/2010/05/标签2.jpg" alt="" width="600" height="150" /></a></p>
<p>        标签的出现解决了页面上导航难以排布的难题，让页面信息整理更加容易。标签的形式来源于人们的生活，在书中夹上一些做好标记的纸条并露出书边，下次再寻找书里的内容就非常方便了。</p>
<p>       网页中的标签是为了更加清晰的整理网页导航区域，对每个不同的页面进行信息整理并归类为一种最完整易懂的分类名，以此作为页面的标签。这样的形式在如今的网页设计中得到了广泛的应用。如果我们需要列出的标签只有几个时，可以用非常漂亮的样子做出来，而且会很容易看懂。</p>
<p>      可是当摆在我们面前的是一长串，比如二十几个标签的时候，我们该怎么办呢？以往的做法是将所有标签列出，并排列成多行，这样的方式虽然解决了标签的排布问题，但却给使用的用户带来了极大的困惑，并且这样的排布在形式上也不再像标签的形式了。另外，这样的排布想要类似标签的形式时免不了需要滚动显示标签，将当前项滚动至下方距离标签内容最近的位置。这样就会产生每个标签在使用时位置不固定的问题，用户会有一定的疑惑：上次明明在这里的啊？奇怪，难道我记忆力出问题了？</p>
<p><a href="http://tina.reeze.cn/wp-content/uploads/2010/05/设计地带.jpg"><img class="alignnone size-full wp-image-27772" title="设计地带" src="http://tina.reeze.cn/wp-content/uploads/2010/05/设计地带.jpg" alt="" width="600" height="287" /></a>       </p>
<p>       这个是我一个朋友在设计页面时遇到的问题，在与之进行设计讨论的时候遇到了很多的问题。在这里我将讨论中的思路简单的说一说吧。</p>
<p>      由于显示器显示的页面宽度有限，目前虽然宽屏幕、大分辨率的显示器已经出现，但是还并不算非常普及。我们在设计网页时需要考虑更多的适应性，让更多的用户在使用时不会出现问题，还是需要考虑较小分辨率的显示器情况。鉴于这些限制性因素，那么我们究竟该如何来排布这么多的标签呢？</p>
<p>      1.   分好的标签之间一般是并列关系，内容最好是互相不交叉的，并且是互相平等的关系。如果我们罗列出的许多个标签之间有从属关系，我们需要考虑将其重新进行分类划分。将标签进行分组，把完全平铺的标签换为几组标签。</p>
<p>      2.   用任务标签直接显示分组情况。比如Windows系统中，浏览器在开启多个网页窗口时，在任务栏位置以同一个浏览器程序的形式显示，共同表示开启的多个窗口标签页。这样的显示就大量节省了任务栏宽度。<a href="http://tina.reeze.cn/wp-content/uploads/2010/05/21.png"><img class="alignnone size-full wp-image-27777" title="2" src="http://tina.reeze.cn/wp-content/uploads/2010/05/21.png" alt="" width="476" height="212" /></a></p>
<p>      3.   将标签从重要标签向次要标签进行排布，按照所设计的页面进行排列，将多余出来的标签归入“更多”标签中，这样虽然在界面上隐藏了一部分标签，但是却让界面显得更加清爽整齐。并且，根据这样的排列后的标签，会突出网页想要人们注意到的重点界面，集中来访用户的关注度。次要标签中的内容让那些愿意在网页中长时间浏览和寻找的用户进行探索，这些相对次要的内容不是网页设计的重点，因此相对而言也不会有非常多的用户使用起来不方便。<a href="http://tina.reeze.cn/wp-content/uploads/2010/05/3.png"><img class="alignnone size-full wp-image-27778" title="3" src="http://tina.reeze.cn/wp-content/uploads/2010/05/3.png" alt="" width="446" height="77" /></a></p>
<p>      4.   如果标签很难划分重要不重要，可以将所有的标签列出来，并加以滚动条或者左右箭头的形式，让用户可以在众多标签页中横向滚动浏览。为了让人们使用起来更加方便，需要又一个地方可以以下拉菜单或其他形式显示所有标签，方便用户快速选择。另外，在平铺标签的时候，不能无休止的缩短标签的长度，要以标签的辨识度为首要。不能够无休止的缩短标签，以至于用户无法知晓每个标签的内容。如图是有这个问题的典型&#8211;Google Chrome浏览器：<a href="http://tina.reeze.cn/wp-content/uploads/2010/05/4.png"><img class="alignnone size-full wp-image-27779" title="4" src="http://tina.reeze.cn/wp-content/uploads/2010/05/4.png" alt="" width="607" height="72" /></a></p>
<p>      5.   当横向位置不够放置多个标签时，可以改为向垂直方向设计。垂直方向用户可以较方便的滚动鼠标来浏览，即使标签有比较多个也能更容易的排列。此外，垂直方向上每个标签的高度都是容纳一个字的高度，因此较短的位置可以显示较多的标签。横向设计的标签由于每个标签都会有几个字的长度，从而会占据更多的横向空间。</p>
<p>      最后回到我和朋友讨论的话题上，本来如果只是单纯的是二十个标签我会建议他设计成垂直标签，但是根据项目的特殊性，他搭建的页面左侧还有一个不可或缺的树状结构，因此，经过再多的思考，考虑到这些标签在不同的用户面前会呈现不同的一些标签，但有部分是会常用到的，因此最终建议他考虑使用“3”，即权衡出几个相对常用和重要的标签，然后将排列不下的标签们放到更多标签里面，这样能够将过多的标签稍作缓和。</p>
<p>      在设计标签时可能会遇到各种各样的问题，根据不同的情境采用不同的设计方式，灵活的运用设计技巧就可以制作高可用性的网页。在每次的问题处理时多做不同的尝试，会容易产生很多优秀的设计模式，积累这些设计模式在今后的应用中就会更快捷。</p>
]]></content:encoded>
			<wfw:commentRss>http://tina.reeze.cn/2010/05/10/labels/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>网站内容决定网站的前途</title>
		<link>http://tina.reeze.cn/2010/04/13/webcontent/</link>
		<comments>http://tina.reeze.cn/2010/04/13/webcontent/#comments</comments>
		<pubDate>Tue, 13 Apr 2010 02:06:48 +0000</pubDate>
		<dc:creator>tina</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[未分类]]></category>
		<category><![CDATA[界面设计]]></category>
		<category><![CDATA[网站内容，紧凑，留白]]></category>
		<category><![CDATA[网页设计]]></category>

		<guid isPermaLink="false">http://tina.reeze.cn/?p=27699</guid>
		<description><![CDATA[[版权声明]:版权归作者“Tina-童童”所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://tina.reeze.cn/
    
     网站设计除了架构设计、交互设计、视觉设计这些方面以外，还有一个非常重要的点，那就是——网站内容。我们在进行网站设计的时候要首先思考用户为什么会来到你的网站，你能为用户提供什么样的内容，什么样的功能（帮助），你如何展示你的内容？要站在用户的角度，去体会你的网站。在体会网站的同事要记得理解用户。用户非常忙，他们都是急性子，短时间找不到想要的东西，就会生气的走开，你就丢失了这样的一位用户了。                            
        用户使用网站，就好比是用户在与你对话，当一段对话变得驴唇不对马嘴时，用户就会抓狂，然后生气的走开，从此再也不理你。用户的性情会严重影响用户对网站的印象，为那些容易发怒的，焦躁的，有压力的用户提供的网站内容要特别的清晰简单。在记录用户想法时尽量记录用户的原话，理解用户在描述他们的需求时使用的语言，这样一来，在编写网站内容时就能够知道用户通常用什么样的词汇了。用户要在网站中有成功的体验，人们必须找到他们需要的内容，理解他们找到的内容，基于用户的理解进行适当的操作。
                        
       人们来到网站总是带着一定的目的或者为了完成某个任务而来，极少是有因为网站看起来好看而来的（部分设计师为了学习而来到一些优秀网站的设计，带着纯视觉的原因而参观网站。）用户在网站中搜寻，期望得到自己的答案，网站最好的方式就是做到跟用户对话，用户又什么疑问或需要，网页能够迅速的反馈，并给出用户解决方法。不过网站本身不会讲话，用户带着大量的疑问来到网站，网站就是为了解决用户的问题而生。
        用户上网很少是为了认真阅读的（除了关注博客这样的以内容为主的网站外），用户在网页上大多数是采用浏览信息的方式，相比较电脑上阅读，纸面的文字读起来比网页的文字有质感也更亲切，正因为如此，我们在设计网站的内容时需要考虑用户浏览信息的习惯，减少篇幅过长的文字堆砌。网站的文字大段大段的出现，用户看起来很伤神。网页的文字能简短就简短写，当写好了一段文字后，一定要仔细阅读是否能够有所删减，网页上给用户呈现的文字应尽量是重点文字，避免废话连篇的占用网页空间。
         在编辑网站内容时，大篇幅的内容写成几个部分并标上标题，这样用户在阅读时就能够先阅读标题了解内容，这样用户就不用费很多时间阅读自己不需要的章节了。当然，章节标题的意义是为了概述一段文字，因此标题需要仔细斟酌，切不可随意的安放一句话就当做标题。另外，标题与内容要比其他的信息接近，当标题和上下的文字间距相同时，标题就会“飘”在两段文字间，让用户茫然。标题和文字间应当使用紧凑原则来布局，这样用户就能准确的知道标题概述的是哪个部分的内容。如图：
               
        网页需要留有一些空白，分为无心留白和有意留白。因为内容多少的缘故出现的留白是无心留白，特意安排的空白空间是有意留白。虽然无心留白也能够让界面有呼吸的空间，在设计时也应当多使用有意留白，段落中的留白给网站内容留了一些呼吸的空间，让页面更通透，来访的用户不会被大量的密集文字压的喘不过气。
        网站内容可以恰当的使用一些图示，图片比文字更能够直接的传达信息，图片的出现让界面更加生动，也让用户可以更容易知晓网站的内容。但是图片的大小需要仔细考虑，根据网页设计的大小来安排图片的排布。图片的大小应尽量不要占满屏幕，来访的用户看到满屏的一个大图很可能不会记得往下滚动，这样下方的内容就被用户忽视了。

        上图中，右侧的滚动条说明该网站下方还有很多内容有待显示，但左侧的大图片占据了页面整个的空间，造成了页面已到底的假象。视线被图片所占据，这样的图片让用户对网站内容失去了把握的能力，图片已经大到了忽视内容的地步。
       我们在设计网站时很多时候都考虑布局合理性和界面美观性（当然毋庸置疑这些也是非常重要的），关注这些方面设计的同时，我们不能忽视了网站的根本&#8212;为来访的用户提供可用的信息，让他们在我们的网站上能够找到需要的内容，顺利的游走在我们的网页中。
]]></description>
			<content:encoded><![CDATA[<p>[版权声明]:版权归作者“<a href="http://tina.reeze.cn/about/">Tina-童童</a>”所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明:<a href="http://tina.reeze.cn/">http://tina.reeze.cn/</a></p>
<p><a href="http://tina.reeze.cn/2010/04/13/webcontent/"><img class="alignnone size-full wp-image-27754" title="Untitled-2" src="http://tina.reeze.cn/wp-content/uploads/2010/04/Untitled-2.jpg" alt="" width="600" height="100" /></a>    </p>
<p>     网站设计除了架构设计、交互设计、视觉设计这些方面以外，还有一个非常重要的点，那就是——<strong>网站内容</strong>。我们在进行网站设计的时候要首先思考用户为什么会来到你的网站，你能为用户提供什么样的内容，什么样的功能（帮助），你如何展示你的内容？要站在用户的角度，去体会你的网站。在体会网站的同事要记得理解用户。用户非常忙，他们都是急性子，短时间找不到想要的东西，就会生气的走开，你就丢失了这样的一位用户了。                            </p>
<p>        用户使用网站，就好比是用户在与你对话，当一段对话变得驴唇不对马嘴时，用户就会抓狂，然后生气的走开，从此再也不理你。用户的性情会严重影响用户对网站的印象，为那些容易发怒的，焦躁的，有压力的用户提供的网站内容要特别的清晰简单。在记录用户想法时尽量记录用户的原话，理解用户在描述他们的需求时使用的语言，这样一来，在编写网站内容时就能够知道用户通常用什么样的词汇了。用户要在网站中有成功的体验，人们必须找到他们需要的内容，理解他们找到的内容，基于用户的理解进行适当的操作。</p>
<p>                        <img class="alignnone size-medium wp-image-27762" title="ebdac7f589cb64f1f3d38573" src="http://tina.reeze.cn/wp-content/uploads/2010/04/ebdac7f589cb64f1f3d38573-300x218.jpg" alt="" width="170" height="110" /></p>
<p>       人们来到网站总是带着一定的目的或者为了完成某个任务而来，极少是有因为网站看起来好看而来的（部分设计师为了学习而来到一些优秀网站的设计，带着纯视觉的原因而参观网站。）用户在网站中搜寻，期望得到自己的答案，网站最好的方式就是做到跟用户对话，用户又什么疑问或需要，网页能够迅速的反馈，并给出用户解决方法。不过网站本身不会讲话，用户带着大量的疑问来到网站，网站就是为了解决用户的问题而生。</p>
<p>        用户上网很少是为了认真阅读的（除了关注博客这样的以内容为主的网站外），用户在网页上大多数是采用浏览信息的方式，相比较电脑上阅读，纸面的文字读起来比网页的文字有质感也更亲切，正因为如此，我们在设计网站的内容时需要考虑用户浏览信息的习惯，减少篇幅过长的文字堆砌。网站的文字大段大段的出现，用户看起来很伤神。网页的文字能简短就简短写，当写好了一段文字后，一定要仔细阅读是否能够有所删减，网页上给用户呈现的文字应尽量是重点文字，避免废话连篇的占用网页空间。</p>
<p>         在编辑网站内容时，大篇幅的内容<strong>写成几个部分并标上标题</strong>，这样用户在阅读时就能够先阅读标题了解内容，这样用户就不用费很多时间阅读自己不需要的章节了。当然，章节标题的意义是为了概述一段文字，因此标题需要仔细斟酌，切不可随意的安放一句话就当做标题。另外，标题与内容要比其他的信息接近，当标题和上下的文字间距相同时，标题就会“飘”在两段文字间，让用户茫然。标题和文字间应当使用<strong>紧凑原则</strong>来布局，这样用户就能准确的知道标题概述的是哪个部分的内容。如图：</p>
<p>               <a href="http://tina.reeze.cn/wp-content/uploads/2010/01/24.jpg"><img class="alignnone size-full wp-image-27712" title="2" src="http://tina.reeze.cn/wp-content/uploads/2010/01/24.jpg" alt="" width="600" height="421" /></a><a href="http://tina.reeze.cn/wp-content/uploads/2010/01/23.jpg"></a></p>
<p>        网页需要留有一些空白，分为<strong>无心留白和有意留白</strong>。因为内容多少的缘故出现的留白是无心留白，特意安排的空白空间是有意留白。虽然无心留白也能够让界面有呼吸的空间，在设计时也应当多使用有意留白，段落中的留白给网站内容留了一些呼吸的空间，让页面更通透，来访的用户不会被大量的密集文字压的喘不过气。</p>
<p>        网站内容可以恰当的使用一些图示，图片比文字更能够直接的传达信息，图片的出现让界面更加生动，也让用户可以更容易知晓网站的内容。但是图片的大小需要仔细考虑，根据网页设计的大小来安排图片的排布。图片的大小应尽量不要占满屏幕，来访的用户看到满屏的一个大图很可能不会记得往下滚动，这样下方的内容就被用户忽视了。</p>
<p><img class="alignnone size-full wp-image-27717" title="QQ截图未命名" src="http://tina.reeze.cn/wp-content/uploads/2010/01/QQ截图未命名.jpg" alt="" width="570" height="273" /></p>
<p>        上图中，右侧的滚动条说明该<a href="http://www.billingsapp.com/iphone/">网站</a>下方还有很多内容有待显示，但左侧的大图片占据了页面整个的空间，造成了页面已到底的假象。视线被图片所占据，这样的图片让用户对网站内容失去了把握的能力，图片已经大到了忽视内容的地步。</p>
<p>       我们在设计网站时很多时候都考虑布局合理性和界面美观性（当然毋庸置疑这些也是非常重要的），关注这些方面设计的同时，我们不能忽视了网站的根本&#8212;为来访的用户提供可用的信息，让他们在我们的网站上能够找到需要的内容，顺利的游走在我们的网页中。</p>
]]></content:encoded>
			<wfw:commentRss>http://tina.reeze.cn/2010/04/13/webcontent/feed/</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
		<item>
		<title>搜索引擎知多少</title>
		<link>http://tina.reeze.cn/2010/01/19/search/</link>
		<comments>http://tina.reeze.cn/2010/01/19/search/#comments</comments>
		<pubDate>Tue, 19 Jan 2010 05:46:40 +0000</pubDate>
		<dc:creator>tina</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[学习]]></category>
		<category><![CDATA[界面设计]]></category>
		<category><![CDATA[搜索引擎]]></category>

		<guid isPermaLink="false">http://tina.reeze.cn/?p=27665</guid>
		<description><![CDATA[         
现如今，搜索引擎在互联网生活中占很大份量，人们上网时几乎离不开搜索引擎的帮助。无论你想要得到什么信息，搜索引擎都可以帮你找到。由于习惯的不同，人们可能从朋友推荐得知搜索引擎，或者无意间点击进入，然后从此爱上这个家伙:)  目前在中国，百度搜索引擎占了相当大的市场份额，但是继Google和百度之后，微软推出了Bing搜索引擎，成为搜索引擎的一个后起之秀，赢得了很多人的好评，同样腾讯的搜搜也有大量的用户。接下来就据几大搜索引擎的特点稍作分析：
一、首页面：

Google的首页面干净清爽，有很多功能选项，但是视觉设计简洁清晰。个人非常喜欢玩下方的彩色区域，鼠标以上会出现好玩的泡泡图标。                                                                                                                                                                                                                                  与其他几个搜索引擎不同的是，Google的搜索按钮在输入框的下方，并且Google独一无二的设立了一个“手气不错”通道，让人们可以快速的进入到想去的页面，而无需转到搜索结果页面。搜索界面主要的还是那个搜索框，有人能研究说Google的搜索框没有考虑汉字比英文大的特点，而将搜索框做的比英文版的稍高一些，这是Google中国本地化没有做到很完善的一个代表吧。个人不太喜欢的就是Google的界面有很多分割线，虽然起到了分割的作用，但是我认为空间很大，没有必要分割界面如此仔细，这个线条运用得有点多余。另外，首页面顶端的文字很小，页面空间足够大，没有必要让顶端的那些功能文字显示得如此小。Google界面让我疑惑的地方还有就是在同一个界面出现了重复的功能选项，但是视觉上是不一致的（左上角的选项和搜索框下面的泡泡选项区都有音乐等搜索）。
百度的界面很干净，尽管如此，搜索引擎的功能倒是齐全的，用户通过首页面的这些选项就能很容易的进行搜索任务了。就界面视觉设计而言，百度不如Google做的精致，很粗糙的下划线链接虽然简单，但是缺少了一定的美感。仔细看界面的时候发现了一个语词上的问题，百度搜索右侧的设置高级，一般在界面上都是用的是高级设置，也许这只是一个习惯用法，但是作为一个如此多用户的大搜索而言，需要尽量考虑用户的习惯，即使在做创新的时候也是需要尊重用户习惯的，何况这个语词应该不算一个创新点。
Bing的搜索界面与众多搜索引擎都不相同，很大的一个改变就是，Bing的网站编辑们每天都收集很多非常棒的图片作为背景图片，并将这个图片作为当天的主题，让使用搜索的人们可以顺便了解很多地方的风土人情。Bing的界面视觉很漂亮，目前提供的搜索功能比较简单，相比其他的引擎，提供给用户一个主动删选搜索结果的选项“全部显示”和“仅限于简体中文”。搜索框右侧的橙色搜索图标很醒目，但是我认为，这里可以结合文字一起，这样可以更加清楚的表达搜索按钮的含义。                                                            
搜搜的界面风格与百度很相似，不过视觉上比百度似乎要精致一些,   比如搜索框的设计色彩选择，比百度的要舒服些。

二、输入搜索内容：
         当输入搜索关键字时，这几个大搜索引擎都使用了提示的技术，不同的是有些显示了不同关键字的搜索结果数量，这在我平时使用上来看是不必要的，这无非是表示搜索引擎强大的功能，而用户是不需要知道这些信息的，这在我看来是一种纯粹的炫耀。搜搜的下方用户自己输入的关键字使用了黑体显示，这是不必要的区分，在视觉上会显得有些突兀。

三、几大搜索引擎的相关搜索比较：
         微软Bing的相关搜索放在左侧，百度和Google的放在搜索结果的下方。百度和Google的相关搜索位置比较接近。但是个人认为还是百度是设计比较合理些，因为百度的相关搜索放在了搜索结果翻页的页码下方，这样比较符合逻辑，如果用户认为自己的关键字是正确的，那么在搜索结果中就存在往后翻页的可能性，逻辑上来讲是应该把页码放在相关搜索上方的。相关搜索是关键字不是很准确的时候搜索引擎提供的一种可能性，这个和当前的搜索结果列表是关系不大的，因此独立算作一个部分。
搜搜的设计与百度类似，不多作评价。
         Google就直接把相关搜索放到了页码的上方，搜索列表的下方，这样没有很多使用上的逻辑性，但是由于位置比较接近，使用上也可以接受。

         Bing的相关搜索特立独行的放到列表左侧，是为了和其他搜索引擎区分，但是我认为没有考虑到用户使用的过程，左侧的相关搜索与用户搜索关键字的搜索框相距很近，用户在输入关键字的时候不可能直接就知道自己输入的是不正确的，因此用户其实是需要有一个浏览搜索结果的过程的，这就导致，一旦用户拖动到页面的下方，就无法发现搜索引擎提供的相关搜索功能了。而如果用户经常使用，记得相关搜索是在上方的话，还是需要往页面上方走，然后再选择其他的搜索关键字，这样使用起来就比较繁琐。另外，在视觉上，Bing提供了一个橙色的所有结果条，而下方不远处是相关搜索，色彩的巨大差异容易让人们忽视相关搜索的存在，并可能理解为下方的是所有结果的分类。
 
四、搜索结果页码显示：
         关于搜索结果页码显示部分多说一句，根据费茨定律，目标放大，距离缩短，是较好的设计。Google页码部分只是单纯的给出了数字1234，并且距离很近，鼠标选择页码的时候容易出现错误的现象。百度，有所改进，在数字外加上了一个小框，但是这样的改进不够明显。而bing和搜搜注意到了搜索引擎的这个缺点，使用了较大的颜色方块来设置页码，使用起来比较舒服，也不容易出现选错页码的问题了。
补充: 看到一本写的很好的关于搜索界面的英文书《Search User Interface》
]]></description>
			<content:encoded><![CDATA[<p><a href="http://tina.reeze.cn/wp-content/uploads/2010/01/2.jpg"></a><a href="http://tina.reeze.cn/wp-content/uploads/2010/01/未标题-1.jpg"><img class="alignnone size-full wp-image-27691" title="未标题-1" src="http://tina.reeze.cn/wp-content/uploads/2010/01/未标题-1.jpg" alt="search-engine" width="600" height="100" /></a>         </p>
<p>现如今，搜索引擎在互联网生活中占很大份量，人们上网时几乎离不开搜索引擎的帮助。无论你想要得到什么信息，搜索引擎都可以帮你找到。由于习惯的不同，人们可能从朋友推荐得知搜索引擎，或者无意间点击进入，然后从此爱上这个家伙:)  目前在中国，百度搜索引擎占了相当大的市场份额，但是继Google和百度之后，微软推出了Bing搜索引擎，成为搜索引擎的一个后起之秀，赢得了很多人的好评，同样腾讯的搜搜也有大量的用户。接下来就据几大搜索引擎的特点稍作分析：</p>
<ul><strong>一、首页面：</strong></ul>
<ol>
<li>Google的首页面干净清爽，有很多功能选项，但是视觉设计简洁清晰。个人非常喜欢玩下方的彩色区域，鼠标以上会出现好玩的泡泡图标。                                                                                                   <a href="http://tina.reeze.cn/wp-content/uploads/2010/01/1.jpg"><img class="alignnone size-medium wp-image-27667" title="1" src="http://tina.reeze.cn/wp-content/uploads/2010/01/1-300x67.jpg" alt="" width="300" height="67" /></a>                                                                                                                               与其他几个搜索引擎不同的是，Google的搜索按钮在输入框的下方，并且Google独一无二的设立了一个“手气不错”通道，让人们可以快速的进入到想去的页面，而无需转到搜索结果页面。搜索界面主要的还是那个搜索框，有人能研究说Google的搜索框没有考虑汉字比英文大的特点，而将搜索框做的比英文版的稍高一些，这是Google中国本地化没有做到很完善的一个代表吧。个人不太喜欢的就是Google的界面有很多分割线，虽然起到了分割的作用，但是我认为空间很大，没有必要分割界面如此仔细，这个线条运用得有点多余。另外，首页面顶端的文字很小，页面空间足够大，没有必要让顶端的那些功能文字显示得如此小。Google界面让我疑惑的地方还有就是在同一个界面出现了重复的功能选项，但是视觉上是不一致的（左上角的选项和搜索框下面的泡泡选项区都有音乐等搜索）。<a href="http://tina.reeze.cn/wp-content/uploads/2010/01/21.jpg"><img title="2" src="http://tina.reeze.cn/wp-content/uploads/2010/01/21.jpg" alt="" width="578" height="224" /></a></li>
<li>百度的界面很干净，尽管如此，搜索引擎的功能倒是齐全的，用户通过首页面的这些选项就能很容易的进行搜索任务了。就界面视觉设计而言，百度不如Google做的精致，很粗糙的下划线链接虽然简单，但是缺少了一定的美感。仔细看界面的时候发现了一个语词上的问题，百度搜索右侧的设置高级，一般在界面上都是用的是高级设置，也许这只是一个习惯用法，但是作为一个如此多用户的大搜索而言，需要尽量考虑用户的习惯，即使在做创新的时候也是需要尊重用户习惯的，何况这个语词应该不算一个创新点。<a href="http://tina.reeze.cn/wp-content/uploads/2010/01/3.jpg"><img class="alignnone size-full wp-image-27670" title="3" src="http://tina.reeze.cn/wp-content/uploads/2010/01/3.jpg" alt="" width="571" height="252" /></a></li>
<li>Bing的搜索界面与众多搜索引擎都不相同，很大的一个改变就是，Bing的网站编辑们每天都收集很多非常棒的图片作为背景图片，并将这个图片作为当天的主题，让使用搜索的人们可以顺便了解很多地方的风土人情。Bing的界面视觉很漂亮，目前提供的搜索功能比较简单，相比其他的引擎，提供给用户一个主动删选搜索结果的选项“全部显示”和“仅限于简体中文”。搜索框右侧的橙色搜索图标很醒目，但是我认为，这里可以结合文字一起，这样可以更加清楚的表达搜索按钮的含义。                                                            <a href="http://tina.reeze.cn/wp-content/uploads/2010/01/4.jpg"><img class="alignnone size-full wp-image-27671" title="4" src="http://tina.reeze.cn/wp-content/uploads/2010/01/4.jpg" alt="" width="515" height="305" /></a></li>
<li>搜搜的界面风格与百度很相似，不过视觉上比百度似乎要精致一些,   比如搜索框的设计色彩选择，比百度的要舒服些。<a href="http://tina.reeze.cn/wp-content/uploads/2010/01/5.jpg"><img class="alignnone size-full wp-image-27673" title="5" src="http://tina.reeze.cn/wp-content/uploads/2010/01/5.jpg" alt="" width="347" height="242" /></a></li>
</ol>
<ul><strong>二、输入搜索内容：</strong></ul>
<p>         当输入搜索关键字时，这几个大搜索引擎都使用了提示的技术，不同的是有些显示了不同关键字的搜索结果数量，这在我平时使用上来看是不必要的，这无非是表示搜索引擎强大的功能，而用户是不需要知道这些信息的，这在我看来是一种纯粹的炫耀。搜搜的下方用户自己输入的关键字使用了黑体显示，这是不必要的区分，在视觉上会显得有些突兀。</p>
<p><a href="http://tina.reeze.cn/wp-content/uploads/2010/01/6.jpg"><img class="alignnone size-full wp-image-27674" title="6" src="http://tina.reeze.cn/wp-content/uploads/2010/01/6.jpg" alt="" width="615" height="433" /></a></p>
<ul><strong>三、几大搜索引擎的相关搜索比较：</strong></ul>
<p>         微软Bing的相关搜索放在左侧，百度和Google的放在搜索结果的下方。百度和Google的相关搜索位置比较接近。但是个人认为还是百度是设计比较合理些，因为百度的相关搜索放在了搜索结果翻页的页码下方，这样比较符合逻辑，如果用户认为自己的关键字是正确的，那么在搜索结果中就存在往后翻页的可能性，逻辑上来讲是应该把页码放在相关搜索上方的。相关搜索是关键字不是很准确的时候搜索引擎提供的一种可能性，这个和当前的搜索结果列表是关系不大的，因此独立算作一个部分。<a href="http://tina.reeze.cn/wp-content/uploads/2010/01/7.jpg"><img class="alignnone size-full wp-image-27676" title="7" src="http://tina.reeze.cn/wp-content/uploads/2010/01/7.jpg" alt="" width="457" height="90" /></a></p>
<p>搜搜的设计与百度类似，不多作评价。<a href="http://tina.reeze.cn/wp-content/uploads/2010/01/10.jpg"><img class="alignnone size-full wp-image-27678" title="10" src="http://tina.reeze.cn/wp-content/uploads/2010/01/10.jpg" alt="" width="527" height="145" /></a></p>
<p>         Google就直接把相关搜索放到了页码的上方，搜索列表的下方，这样没有很多使用上的逻辑性，但是由于位置比较接近，使用上也可以接受。</p>
<p><a href="http://tina.reeze.cn/wp-content/uploads/2010/01/8.jpg"><img class="alignnone size-full wp-image-27677" title="8" src="http://tina.reeze.cn/wp-content/uploads/2010/01/8.jpg" alt="" width="535" height="148" /></a></p>
<p>         Bing的相关搜索特立独行的放到列表左侧，是为了和其他搜索引擎区分，但是我认为没有考虑到用户使用的过程，左侧的相关搜索与用户搜索关键字的搜索框相距很近，用户在输入关键字的时候不可能直接就知道自己输入的是不正确的，因此用户其实是需要有一个浏览搜索结果的过程的，这就导致，一旦用户拖动到页面的下方，就无法发现搜索引擎提供的相关搜索功能了。而如果用户经常使用，记得相关搜索是在上方的话，还是需要往页面上方走，然后再选择其他的搜索关键字，这样使用起来就比较繁琐。另外，在视觉上，Bing提供了一个橙色的所有结果条，而下方不远处是相关搜索，色彩的巨大差异容易让人们忽视相关搜索的存在，并可能理解为下方的是所有结果的分类。</p>
<p> <a href="http://tina.reeze.cn/wp-content/uploads/2010/01/9.jpg"><img class="alignnone size-full wp-image-27679" title="9" src="http://tina.reeze.cn/wp-content/uploads/2010/01/9.jpg" alt="" width="618" height="200" /></a></p>
<ul><strong>四、搜索结果页码显示：</strong></ul>
<p>         关于搜索结果页码显示部分多说一句，根据费茨定律，目标放大，距离缩短，是较好的设计。Google页码部分只是单纯的给出了数字1234，并且距离很近，鼠标选择页码的时候容易出现错误的现象。百度，有所改进，在数字外加上了一个小框，但是这样的改进不够明显。而bing和搜搜注意到了搜索引擎的这个缺点，使用了较大的颜色方块来设置页码，使用起来比较舒服，也不容易出现选错页码的问题了。</p>
<p>补充: 看到一本写的很好的关于搜索界面的英文书<a href="http://searchuserinterfaces.com/book/sui_ch1_design.html"  style="color:blue">《Search User Interface》</a></p>
]]></content:encoded>
			<wfw:commentRss>http://tina.reeze.cn/2010/01/19/search/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>web界面设计&#8211;左上到右下的距离</title>
		<link>http://tina.reeze.cn/2009/11/28/ue/</link>
		<comments>http://tina.reeze.cn/2009/11/28/ue/#comments</comments>
		<pubDate>Sat, 28 Nov 2009 02:32:22 +0000</pubDate>
		<dc:creator>tina</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[未分类]]></category>
		<category><![CDATA[界面设计]]></category>
		<category><![CDATA[古藤堡图表]]></category>
		<category><![CDATA[瞬间之美]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://tina.reeze.cn/?p=27620</guid>
		<description><![CDATA[
         参加完今天的大型招聘会回来，继续给大脑补充养分:P
         喜欢一本好书《瞬间之美——Web界面设计如何让用户心动》，关注很久了，可惜囊中羞涩，图书馆来了这本书第一时间奔过去借来阅读 
         才只看到前面很少的一部分，喜欢本书开头的一句话“良好的用户体验，全在于那些完美的瞬间”。说得非常正确，用户体验其实就是用户在真正使用产品时候的一些感受。如果产品能够带给人们一个个感动的瞬间，用户会爱上这个产品，说不定偶尔在朋友间还会无意间提起，顺便帮产品做了推广。因此完美的瞬间提升用户体验，而用户体验提升用户的市场价值，比如Iphone刚出来的时候，人们一瞬间爱上这个产品，并相继介绍给身边的人，不断的有赞美之词出现，市场上卖到断货的现象时有出现。
         在以前的学校学习以及在伊飒尔实习的时候做过一些设计项目，在开始着手设计之前会整理一个类似于功能列表的东西，其实就是说我事先对我将要进行的设计会有一个规划，会自动在脑中有一个大概的概念。因为设计总是带着一定的目的去进行的，比如网站，总是有个主题的，大致具备什么样的功能，主要是宣传公司还是推广公司的产品，有大致的一个设计方向。收集好这些设计点后用一个很大的容器放起来，根据具体特点开始着手布局，导航位置，内容位置，等等信息架构在此时可以适当用线框图开始布局。没有细节，只是一些大体的界面轮廓逐渐开始布局。界面设计的拼图游戏就从这样的步骤开始。
        书中提到了一个概念翻译为古藤堡图表，汗颜自己从事这个行业居然没听过这样的一个理论，一直认为我们做的左上角到右下角的设计是根据大量的用户研究结论比如用户眼动研究等方法得出来的，平时设计工作中只是在使用这样的一个图表理论但是从没有仔细的研究过。仔细看看发现很多地方的设计都是这样的一个布局方式，从左上角到右下角的方向是用户的一个习惯方向，很多网页或应用软件都按照这样的方向来进行布局。
举例：

       淘宝网上的购买和加入购物车在一定程度上也是遵循这个左上到右下的设计准则，引导用户的视线。橙色和蓝色的按钮将用户从主要目标“图片”拉过来，吸引用户注意，让用户有点击购买的倾向，引导购物动作的发生。


        还有很多类似的设计，使用了这样的左上到右下的设计，安装软件，弹出框的设计等地方，仔细观察都会发现这样的理论应用:)  借鉴其他人的理论并运用在平时的学习和工作中，这对自己是一个很好的提升方法。
 
]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;"><img class="size-full wp-image-27622 aligncenter" title="未标题-1" src="http://tina.reeze.cn/wp-content/uploads/2009/11/未标题-12.png" alt="未标题-1" width="600" height="100" /><br />
         参加完今天的大型招聘会回来，继续给大脑补充养分:P<br />
         喜欢一本好书《瞬间之美——Web界面设计如何让用户心动》，关注很久了，可惜囊中羞涩，图书馆来了这本书第一时间奔过去借来阅读 <img src='http://tina.reeze.cn/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br />
         才只看到前面很少的一部分，喜欢本书开头的一句话“良好的用户体验，全在于那些完美的瞬间”。说得非常正确，用户体验其实就是用户在真正使用产品时候的一些感受。如果产品能够带给人们一个个感动的瞬间，用户会爱上这个产品，说不定偶尔在朋友间还会无意间提起，顺便帮产品做了推广。因此完美的瞬间提升用户体验，而用户体验提升用户的市场价值，比如Iphone刚出来的时候，人们一瞬间爱上这个产品，并相继介绍给身边的人，不断的有赞美之词出现，市场上卖到断货的现象时有出现。<br />
         在以前的学校学习以及在<a href="http://www.isaruid.com">伊飒尔</a>实习的时候做过一些设计项目，在开始着手设计之前会整理一个类似于功能列表的东西，其实就是说我事先对我将要进行的设计会有一个规划，会自动在脑中有一个大概的概念。因为设计总是带着一定的目的去进行的，比如网站，总是有个主题的，大致具备什么样的功能，主要是宣传公司还是推广公司的产品，有大致的一个设计方向。收集好这些设计点后用一个很大的容器放起来，根据具体特点开始着手布局，导航位置，内容位置，等等信息架构在此时可以适当用线框图开始布局。没有细节，只是一些大体的界面轮廓逐渐开始布局。界面设计的拼图游戏就从这样的步骤开始。<br />
        书中提到了一个概念翻译为古藤堡图表，汗颜自己从事这个行业居然没听过这样的一个理论，一直认为我们做的左上角到右下角的设计是根据大量的用户研究结论比如用户眼动研究等方法得出来的，平时设计工作中只是在使用这样的一个图表理论但是从没有仔细的研究过。仔细看看发现很多地方的设计都是这样的一个布局方式，从左上角到右下角的方向是用户的一个习惯方向，很多网页或应用软件都按照这样的方向来进行布局。<br />
举例：</p>
<p style="text-align: left;"><img class="alignnone size-full wp-image-27625" title="taobao" src="http://tina.reeze.cn/wp-content/uploads/2009/11/taobao.jpg" alt="taobao" width="607" height="321" /></p>
<p style="text-align: left;">       淘宝网上的购买和加入购物车在一定程度上也是遵循这个左上到右下的设计准则，引导用户的视线。橙色和蓝色的按钮将用户从主要目标“图片”拉过来，吸引用户注意，让用户有点击购买的倾向，引导购物动作的发生。</p>
<p><img class="alignnone size-full wp-image-27631" title="taobao" src="http://tina.reeze.cn/wp-content/uploads/2009/11/taobao1.jpg" alt="taobao" width="623" height="457" /></p>
<p><img style="width: 520px;" src="http://www.websbook.com/upimg/allimg/090429/08392110.jpg" alt="nerve" width="615" height="450" /></p>
<p>        还有很多类似的设计，使用了这样的左上到右下的设计，安装软件，弹出框的设计等地方，仔细观察都会发现这样的理论应用:)  借鉴其他人的理论并运用在平时的学习和工作中，这对自己是一个很好的提升方法。</p>
<h3> </h3>
]]></content:encoded>
			<wfw:commentRss>http://tina.reeze.cn/2009/11/28/ue/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>用户还是商业？</title>
		<link>http://tina.reeze.cn/2009/11/19/userorbussiness/</link>
		<comments>http://tina.reeze.cn/2009/11/19/userorbussiness/#comments</comments>
		<pubDate>Thu, 19 Nov 2009 09:30:34 +0000</pubDate>
		<dc:creator>tina</dc:creator>
				<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://tina.reeze.cn/?p=27608</guid>
		<description><![CDATA[ 
午睡的时候突然想到一个小问题，当用户需求和商业利益出现冲突的时候我们该怎么办？ 
         根据以前的工作经验，在现阶段的中国企业，商业利益还是大于用户需求的。虽然企业也在高调的宣布，我们是注重用户体验的，我们的产品都是经过了可用性测试检验的产品，是经过研究用户需求得到的产品，但是，在实际操作中，产品设计还是会特别考虑市场策略，商业利益。
         以前参与过一个项目，在其中负责交互设计工作，为了能够得到更好的设计，也参与了前期的用户研究阶段，深刻的理解了用户的困难。我们团队根据研究结论，规划出来一个理想化的真正符合用户使用习惯的产品。但是当我们满心欢喜的把设计作品拿到客户跟前讲解后，客户方很尴尬的告诉我们，虽然做了用户研究，有这么多的结论，但是考虑到市场的竞争，某公司的产品上有**的文字，如果我们的产品上没有这样的文字，用户在购买的时候会觉得我们这个不如人家的产品好，这样销售会有问题的。然后根据客户的要求，我们违心的把那些用户不需要的东西添加上去，，。
         在使用互联网的时候也偶然发现有些地方就是真正只为了用户的需要在考虑，有些网站就是有为用户考虑的心思，但是出于盈利的目的，添加了一些额外的操作，给用户使用上带来了一定的麻烦，提高了商业价值，降低了用户体验。
        前一段时间使用人人网（原校内网）的时候发现在分享图片或者日志的时候会出现一种模态弹出框（爱伦库柏提倡使用非模态形式的提示）提示用户分享成功，这个几秒钟自动消失的弹出框的下方附带了一个广告，虽然用户可以在弹出框自动消失前手动关掉这个弹出框，但是对于用户而言这一步的操作显然是比较多余的操作，不是出于完成这个分享动作必须的操作，因此在一定程度上会影响用户的体验感。
        今天查看的时候发现广告消失了，但是这个弹出框的形式还是继续存在，不知道是最近广告较少，还是人人网的设计师意识到了这个广告的问题，希望他们会以更好的方式来解决这个用户操作成功的提示问题。个人很喜欢Gmail的提示，在不影响用户使用的地方悄悄的给与提示，很体贴 

]]></description>
			<content:encoded><![CDATA[<p> <img class="alignnone size-full wp-image-27615" title="未标题-1" src="http://tina.reeze.cn/wp-content/uploads/2009/11/未标题-1.png" alt="title" width="600" height="100" /></p>
<p>午睡的时候突然想到一个小问题，当用户需求和商业利益出现冲突的时候我们该怎么办？ <br />
         根据以前的工作经验，在现阶段的中国企业，商业利益还是大于用户需求的。虽然企业也在高调的宣布，我们是注重用户体验的，我们的产品都是经过了可用性测试检验的产品，是经过研究用户需求得到的产品，但是，在实际操作中，产品设计还是会特别考虑市场策略，商业利益。<br />
         以前参与过一个项目，在其中负责交互设计工作，为了能够得到更好的设计，也参与了前期的用户研究阶段，深刻的理解了用户的困难。我们团队根据研究结论，规划出来一个理想化的真正符合用户使用习惯的产品。但是当我们满心欢喜的把设计作品拿到客户跟前讲解后，客户方很尴尬的告诉我们，虽然做了用户研究，有这么多的结论，但是考虑到市场的竞争，某公司的产品上有**的文字，如果我们的产品上没有这样的文字，用户在购买的时候会觉得我们这个不如人家的产品好，这样销售会有问题的。然后根据客户的要求，我们违心的把那些用户不需要的东西添加上去，，。<br />
         在使用互联网的时候也偶然发现有些地方就是真正只为了用户的需要在考虑，有些网站就是有为用户考虑的心思，但是出于盈利的目的，添加了一些额外的操作，给用户使用上带来了一定的麻烦，提高了商业价值，降低了用户体验。<br />
        前一段时间使用人人网（原校内网）的时候发现在分享图片或者日志的时候会出现一种模态弹出框（爱伦库柏提倡使用非模态形式的提示）提示用户分享成功，这个几秒钟自动消失的弹出框的下方附带了一个广告，虽然用户可以在弹出框自动消失前手动关掉这个弹出框，但是对于用户而言这一步的操作显然是比较多余的操作，不是出于完成这个分享动作必须的操作，因此在一定程度上会影响用户的体验感。<img class="alignnone size-full wp-image-27612" title="人人网的分享" src="http://tina.reeze.cn/wp-content/uploads/2009/11/人人网的分享.jpg" alt="人人网的分享" width="615" height="125" /><br />
        今天查看的时候发现广告消失了，但是这个弹出框的形式还是继续存在，不知道是最近广告较少，还是人人网的设计师意识到了这个广告的问题，希望他们会以更好的方式来解决这个用户操作成功的提示问题。个人很喜欢Gmail的提示，在不影响用户使用的地方悄悄的给与提示，很体贴 <img src='http://tina.reeze.cn/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br />
<img class="alignnone size-large wp-image-27613" title="Google2" src="http://tina.reeze.cn/wp-content/uploads/2009/11/Google2-1024x180.jpg" alt="Google2" width="614" height="111" /></p>
]]></content:encoded>
			<wfw:commentRss>http://tina.reeze.cn/2009/11/19/userorbussiness/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>如何提高网站的用户黏度？</title>
		<link>http://tina.reeze.cn/2009/11/16/how-to-increase/</link>
		<comments>http://tina.reeze.cn/2009/11/16/how-to-increase/#comments</comments>
		<pubDate>Mon, 16 Nov 2009 14:15:33 +0000</pubDate>
		<dc:creator>tina</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[用户研究]]></category>
		<category><![CDATA[用户访问]]></category>
		<category><![CDATA[用户黏度]]></category>
		<category><![CDATA[网站]]></category>

		<guid isPermaLink="false">http://tina.reeze.cn/?p=27598</guid>
		<description><![CDATA[         用户是网站活跃的主要力量，如果网站没有用户的访问，就如同浩瀚大海的一座孤岛，无法传达自己的讯息。网站的用户数量和同一用户访问的次数影响着网站的流量，用户黏度越高的网站才越有价值。那么，如何能提高用户黏度呢？网站要提高用户的访问度，需要从以下几方面来考虑：
网站内容，网站可用性，网站界面设计等，网站要试着了解用户的需求，想办法解决并尝试以最优化的方式去解决用户的需求，鼓励用户提供自己的信息，让用户主动宣传网站，形成用户圈子这样的网站才有可能有较高的用户黏度，才能在众多网站脱颖而出。
         网站内容        
         首先就是网站内容，用户访问网站是为了寻找自己需要的东西，用户在网站上寻找信息，资讯，图片，资料等等内容，他们带着一定的目的前来这个网站，有可能是无意间链接过来，有可能是搜索引擎跳转而来，有可能是以前访问过然后直接输入网站地址而来，等等方式。总之，用户带着对网站内容的某种期望前来访问。一个优秀的网站会提供给用户足够的符合网站的主题的内容，比如汽车网站，为了满足用户欣赏新型车，查找期望看到的车型，价格等信息，让用户能够方便的对不同的车进行比较等等。网站就是应该提供这样的符合网站主题并且是基于用户来访任务的内容。这样的网站才不是一个空洞的网站，能够提供给用户足够的内容，让用户可以从网站得到收获。
        网站的可用性
         网站提供了丰富的内容，但是良好的可用性会提高用户使用网站时的满意度，在寻找信息完成用户任务的过程中会对网站产生极好的印象，甚至会因此而喜爱网站。良好的网站可用性会让用户更有兴趣在网站中探索，他们对自己的每一步操作都有很好的把握，能够自主的控制自己的前进方向，带着明确的目的“逛”网站。比如豆瓣网的注册账号，就是非常友好的一个例子，用户很简单的输入自己的很少信息，然后就成功注册了豆瓣会员，而不需要像一些很奇怪的网站，要求填写很复杂的用户信息，或者其他无关紧要的信息。这样的账号注册方式不会影响用户使用上的体验，让用户感觉非常简单。

   网站界面设计
         界面设计优秀的网站，可以让用户愿意停留，可能不只是为了寻找网站的内容，设计舒适的网站，就好像是精美的咖啡屋，让人愿意花时间流连其中，处处细小的设计都可能带给用户惊喜，他们在视觉上有很好的放松，话说就是叫做“养眼”，网站的色彩搭配，内容布局等都可能在设计师的精心设计下变得很舒适，让用户愿意驻足，并在心里说：哇，真好看的网站！当然界面设计在各人对美的欣赏程度上有所不同，但是精心设计的网站总是会得到更多人的关注和好评，这点是毋庸置疑的。


         总之，满足用户需求，并且是竭尽全力去满足用户需求，从用户的角度出发，想用户所想，这样的网站设计才能够得到广大用户的认可，才能够被用户所青睐，这样的优秀的网站才能够在用户群中得到推广，才能得到更多的用户访问，才能在搜索引擎上有很好的排名，进而吸引更多的来访用户。抓紧时机，黏住你的用户吧！
]]></description>
			<content:encoded><![CDATA[<p>         用户是网站活跃的主要力量，如果网站没有用户的访问，就如同浩瀚大海的一座孤岛，无法传达自己的讯息。网站的用户数量和同一用户访问的次数影响着网站的流量，用户黏度越高的网站才越有价值。那么，如何能提高用户黏度呢？网站要提高用户的访问度，需要从以下几方面来考虑：<br />
<strong>网站内容，网站可用性，网站界面设计</strong>等，网站要试着了解用户的需求，想办法解决并尝试以最优化的方式去解决用户的需求，鼓励用户提供自己的信息，让用户主动宣传网站，形成用户圈子这样的网站才有可能有较高的用户黏度，才能在众多网站脱颖而出。<br />
         <strong>网站内容</strong>        </p>
<p>         首先就是网站内容，用户访问网站是为了寻找自己需要的东西，用户在网站上寻找信息，资讯，图片，资料等等内容，他们带着一定的目的前来这个网站，有可能是无意间链接过来，有可能是搜索引擎跳转而来，有可能是以前访问过然后直接输入网站地址而来，等等方式。总之，用户带着对网站内容的某种期望前来访问。一个优秀的网站会提供给用户足够的符合网站的主题的内容，比如汽车网站，为了满足用户欣赏新型车，查找期望看到的车型，价格等信息，让用户能够方便的对不同的车进行比较等等。网站就是应该提供这样的符合网站主题并且是基于用户来访任务的内容。这样的网站才不是一个空洞的网站，能够提供给用户足够的内容，让用户可以从网站得到收获。</p>
<p>        <strong>网站的可用性</strong></p>
<p>         网站提供了丰富的内容，但是良好的可用性会提高用户使用网站时的满意度，在寻找信息完成用户任务的过程中会对网站产生极好的印象，甚至会因此而喜爱网站。良好的网站可用性会让用户更有兴趣在网站中探索，他们对自己的每一步操作都有很好的把握，能够自主的控制自己的前进方向，带着明确的目的“逛”网站。比如<a href="http://www.douban.com">豆瓣</a>网的注册账号，就是非常友好的一个例子，用户很简单的输入自己的很少信息，然后就成功注册了豆瓣会员，而不需要像一些很奇怪的网站，要求填写很复杂的用户信息，或者其他无关紧要的信息。这样的账号注册方式不会影响用户使用上的体验，让用户感觉非常简单。</p>
<p><img class="alignnone size-full wp-image-27601" title="douban" src="http://tina.reeze.cn/wp-content/uploads/2009/11/douban.jpg" alt="douban" width="622" height="509" /></p>
<p>   <strong>网站界面设计</strong></p>
<p>         界面设计优秀的网站，可以让用户愿意停留，可能不只是为了寻找网站的内容，设计舒适的网站，就好像是精美的咖啡屋，让人愿意花时间流连其中，处处细小的设计都可能带给用户惊喜，他们在视觉上有很好的放松，话说就是叫做“养眼”，网站的色彩搭配，内容布局等都可能在设计师的精心设计下变得很舒适，让用户愿意驻足，并在心里说：哇，真好看的网站！当然界面设计在各人对美的欣赏程度上有所不同，但是精心设计的网站总是会得到更多人的关注和好评，这点是毋庸置疑的。</p>
<p><img class="alignnone size-large wp-image-27602" title="QQ截图未命名" src="http://tina.reeze.cn/wp-content/uploads/2009/11/QQ截图未命名-1024x495.jpg" alt="QQ截图未命名" width="626" height="235" /></p>
<p><img title="QQ截图未命名" src="http://tina.reeze.cn/wp-content/uploads/2009/11/QQ截图未命名1-1024x482.jpg" alt="QQ截图未命名" width="631" height="205" /></p>
<p>         总之，满足用户需求，并且是竭尽全力去满足用户需求，从用户的角度出发，想用户所想，这样的网站设计才能够得到广大用户的认可，才能够被用户所青睐，这样的优秀的网站才能够在用户群中得到推广，才能得到更多的用户访问，才能在搜索引擎上有很好的排名，进而吸引更多的来访用户。抓紧时机，黏住你的用户吧！</p>
]]></content:encoded>
			<wfw:commentRss>http://tina.reeze.cn/2009/11/16/how-to-increase/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>使用性测试-流程</title>
		<link>http://tina.reeze.cn/2009/09/14/usability-test/</link>
		<comments>http://tina.reeze.cn/2009/09/14/usability-test/#comments</comments>
		<pubDate>Mon, 14 Sep 2009 07:11:31 +0000</pubDate>
		<dc:creator>tina</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[学习]]></category>
		<category><![CDATA[用户研究]]></category>
		<category><![CDATA[使用性测试]]></category>

		<guid isPermaLink="false">http://tinatong.yo2.cn/?p=22012</guid>
		<description><![CDATA[
参与过也见到过很多次使用性测试的项目，不过过了几个月没有接触到了，根据自己的记忆，把测试的流程稍微整理一下，记录下来。可能比较凌乱，文字不够考究也许跟有些同行参与的不尽相同，但是基本骨架如此，放到这里，给以后的工作做个参考:)
使用性测试的流程如下：

进行测试的小组人员聚集起来研究并使用被测试的产品或者原型，熟悉产品的既定使用方式。在试用过程中记录产品可能发生问题的点。
试用结束后，收集产品的可能问题点，按照一定的逻辑关系将问题点组织记录成文档形式。
根据这些问题点，设置产品的具体使用情景，即进行场景设计，例如设定场景为朋友想来北京玩，想在西单找一家旅馆（一个查询服务的测试场景）。
有了具体的场景，根据产品自身的特点，设定一个具体任务，让用户使用产品或者产品原型来进行操作。如果用户顺利的完成了这个既定的任务，那么该项任务就没有难度。反之如果有很大的困难，那么在后期设计人员就需要重点对这些任务流程或者界面布局进行修改。
场景设计和任务设计是测试问卷的重点部分，场景和任务都设计好后，剩下的就是对问卷的完善了，包括用户打分情况，以及一些基本的评价点等具体信息。（关于问卷的设计，以后会再继续整理。）
前期准备工作完成后，剩下的就是等待测试支持部门同事根据测试要求招募参试者了。
用户到来，测试就正式开始了。向用户介绍测试实验室，为了减轻用户压力，可以介绍为体验活动室等委婉的名词。请用户在保密协议上签字，填写用户简单甄别信息问卷。
测试正式开始，主持人按照问卷上的流程向用户介绍测试目的，简单介绍产品让用户热身（warm-up）然后就是按照问卷进行测试。在测试进行的同时，有一个观察记录人员需要在不明显的位置记录用户的操作情况和问卷上选项的选择情况。这名观察记录人员在测试过程中也起到协助主持人的作用。例如在冰箱使用性测试项目中，用户需要往冰箱放食物，此时记录人员需要协助把食物放到用户方便的地方。类似这样的发生在实验室的小事情就由记录人员负责。主持人把注意力集中到用户身上即可。测试的过程需要在观察室中录像，保留详细数据，便于后期整理和查验。需要有一个或者更多设备管理员参与。
测试结束后切断录像设备，保存录像片段。主持人送参试者离开测试实验室至会客室休息，赠送参试者礼金并要求参试者签字，然后送参试者离开。
至此，一个完整的测试就结束了。

]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-27524" title="ut" src="http://tina.reeze.cn/wp-content/uploads/2009/07/ut.png" alt="ut" width="600" height="100" /></p>
<p>参与过也见到过很多次使用性测试的项目，不过过了几个月没有接触到了，根据自己的记忆，把测试的流程稍微整理一下，记录下来。可能比较凌乱，文字不够考究也许跟有些同行参与的不尽相同，但是基本骨架如此，放到这里，给以后的工作做个参考:)</p>
<p>使用性测试的流程如下：</p>
<ol>
<li>进行测试的小组人员聚集起来研究并使用被测试的产品或者原型，熟悉产品的既定使用方式。在试用过程中记录产品可能发生问题的点。</li>
<li>试用结束后，收集产品的可能问题点，按照一定的逻辑关系将问题点组织记录成文档形式。</li>
<li>根据这些问题点，设置产品的具体使用情景，即进行场景设计，例如设定场景为朋友想来北京玩，想在西单找一家旅馆（一个查询服务的测试场景）。</li>
<li>有了具体的场景，根据产品自身的特点，设定一个具体任务，让用户使用产品或者产品原型来进行操作。如果用户顺利的完成了这个既定的任务，那么该项任务就没有难度。反之如果有很大的困难，那么在后期设计人员就需要重点对这些任务流程或者界面布局进行修改。</li>
<li>场景设计和任务设计是测试问卷的重点部分，场景和任务都设计好后，剩下的就是对问卷的完善了，包括用户打分情况，以及一些基本的评价点等具体信息。（关于问卷的设计，以后会再继续整理。）</li>
<li>前期准备工作完成后，剩下的就是等待测试支持部门同事根据测试要求招募参试者了。</li>
<li>用户到来，测试就正式开始了。向用户介绍测试实验室，为了减轻用户压力，可以介绍为体验活动室等委婉的名词。请用户在保密协议上签字，填写用户简单甄别信息问卷。</li>
<li>测试正式开始，主持人按照问卷上的流程向用户介绍测试目的，简单介绍产品让用户热身（warm-up）然后就是按照问卷进行测试。在测试进行的同时，有一个观察记录人员需要在不明显的位置记录用户的操作情况和问卷上选项的选择情况。这名观察记录人员在测试过程中也起到协助主持人的作用。例如在冰箱使用性测试项目中，用户需要往冰箱放食物，此时记录人员需要协助把食物放到用户方便的地方。类似这样的发生在实验室的小事情就由记录人员负责。主持人把注意力集中到用户身上即可。测试的过程需要在观察室中录像，保留详细数据，便于后期整理和查验。需要有一个或者更多设备管理员参与。</li>
<li>测试结束后切断录像设备，保存录像片段。主持人送参试者离开测试实验室至会客室休息，赠送参试者礼金并要求参试者签字，然后送参试者离开。</li>
<li>至此，一个完整的测试就结束了。</li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://tina.reeze.cn/2009/09/14/usability-test/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>web表单设计研究</title>
		<link>http://tina.reeze.cn/2009/09/08/webform/</link>
		<comments>http://tina.reeze.cn/2009/09/08/webform/#comments</comments>
		<pubDate>Tue, 08 Sep 2009 07:42:52 +0000</pubDate>
		<dc:creator>tina</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[界面设计]]></category>
		<category><![CDATA[表单设计]]></category>

		<guid isPermaLink="false">http://tinatong.yo2.cn/?p=27426</guid>
		<description><![CDATA[
经常使用网络的人，都应该于填写过各种各样的表单。注册一个论坛账号，申请一个QQ号，购买一本书……等等事情，只要不是单纯的浏览信息，或多或少的都会填写一些表单，向计算机提供个人信息，真实的也好，虚拟的也罢。在填写这些数据的时候，计算机是否有好的对待你呢？你是否会一遍又一遍的填写相同的数据？不断的刷新，甚至恼怒？“到底想怎样？”“为什么又要再次填写？？”“气死我了，换个网站”……也许您在填写这些可恶的表单的时候，也有过这样的情绪反应。不要生气，这些，都是计算的不对，他们没有正常的与您对话。
那么怎么样设计的表单才是合适的表单呢？怎样的对话才是符合人们心智模型的表单设计呢？
接下来，我将根据平时的经验，来跟大家分享一下：
1.    只询问必要的问题，不是必填的不要让用户填，可以放在资料修改的地方，让用户以后再填写，这样可以让用户在很短时间内顺利的继续当前最期望的任务。
例如：用户的家庭住址，网站如果不需要邮寄物品给用户，就没必要询问用户该项，徒增用户的疑惑。反之，如果用户在淘宝购买了一件衣服，网站没有要求用户填写家庭住址，那么用户又该疑惑了，“你们会把东西给我寄到哪里呢？什么时候会问我的地址呢？”。因此表单的内容设计是需要仔细斟酌的，搞清楚什么是该询问的，什么是不该询问的。
2.    记住用户的信息，浏览器有时候会有些突发情况，用户可能会需要刷新自己的网页才可以再继续显示，此时，不要让用户再次面对一个空白的表单，保留尽可能多的内容给用户，减轻他们重新填写的压力吧。
3.    在每个用户出错的时候及时提醒，不要等到提交信息后再给用户打几个大红叉，这样是极不礼貌的行为，用户满心期待的等着成功的信息，结果是满页面的红色出错信息，会增加用户的沮丧感。当焦点离开了填写的区域，计算机应该立即判断用户填写内容的正确性。

4.    在信息量较大的情况下，可以采用让用户填空的方式来填写表单，把每个填写的位置流出来，形成一段话或者一句话的形式，这样比起一问一答的方式要亲切友好。
5.    问答的语言需要从用户的角度出发，不要使用难懂的计算机语言，让用户和计算机之间开始自然的对话。
6.    提交按钮应该设置在必填项都填完后再用彩色显示，未填写完时，变成灰色或者使用其他的文字。不要等用户点击后再刷新页面，然后告诉用户，还有很多项需要继续填写。
7.    设置项目的必填选项提示。不要在页面顶端告诉用户哪些是必须填写的，在每一个必填选项旁记得附上一个标记。不要等到用户满心欢喜的填完了他选择填写的内容，结果却得到一大堆的红色标记，就像小学生整篇试卷上都是红叉那样。
8.    一个国外的设计师这样说：表单的下方一般会有提交（确定）和取消两个常见选项，一般来说，选择提交（确定）的概率会大于选择取消的概率。于是有一个首要选项和次要选项的说法。因此他认为首要动作的按钮应该在视觉上比次要选项突出，可以把首要选项确定项进行加粗，或者把次要选项淡化，减少为一个带下划线的单词。


【更新】
（表单设计时的首选处理方式和第二处理方式：
在设计时应该有一个更希望用户使用的选择，比如注册和取消注册之间，设计师应该在设计上引导用户选择注册选项而不是取消选项。因此在设计这两个按钮时就应该会有不一样的设计，这样的设计对用户能够有一个选择倾向性的暗示。
这样设计注册的按钮变得更为突出也更容易点击了，大按钮牵引用户的视线，用户选择更容易。
注册按钮在左边让习惯使用tab键切换的用户预先到达按钮位置，这也再次验证了我们设计时将焦点集中在可能性更大的选项上。）
9.    早期的表单在设置时一般带有三个按钮，确定，重置和取消。现在的表单中重置按钮已经逐渐走出了我们的视线。用户在填写表单中要求的数据内容的时候，很少有需要把全部信息推翻重写一遍的需求。因此，在现在的表单中，设计师已经去掉了这项多余的按钮。
10.    按钮的名称应该采用有意义的语言来标记用户的动作。一般常见的就是填写完表单后点击确定，提交，取消这样的文字。虽然很简短，但是和用户刚才填写的表单内容没有联系，适用于任何的表单。在注册用户的时候可以使用“立即注册”“马上注册”；提交Blog评论的时候使用“点击立刻发言”，“提交评论”等文字。
简单的表单却让用户有很多的疑惑，设计有良好用户体验的表单来欢迎用户吧。在以后的设计道路上，如果有新的发现会不定期的更新，让我们继续探索吧。
]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-27431" title="e8a1a8e58d95e8aebee8aea1" src="http://tinatong.yo2.cn/wp-content/uploads/477/47706/2009/09/e8a1a8e58d95e8aebee8aea1.png" alt="e8a1a8e58d95e8aebee8aea1" width="600" height="100" /></p>
<p>经常使用网络的人，都应该于填写过各种各样的表单。注册一个论坛账号，申请一个QQ号，购买一本书……等等事情，只要不是单纯的浏览信息，或多或少的都会填写一些表单，向计算机提供个人信息，真实的也好，虚拟的也罢。在填写这些数据的时候，计算机是否有好的对待你呢？你是否会一遍又一遍的填写相同的数据？不断的刷新，甚至恼怒？“到底想怎样？”“为什么又要再次填写？？”“气死我了，换个网站”……也许您在填写这些可恶的表单的时候，也有过这样的情绪反应。不要生气，这些，都是计算的不对，他们没有正常的与您对话。<br />
那么怎么样设计的表单才是合适的表单呢？怎样的对话才是符合人们心智模型的表单设计呢？<br />
接下来，我将根据平时的经验，来跟大家分享一下：<br />
1.    只询问必要的问题，不是必填的不要让用户填，可以放在资料修改的地方，让用户以后再填写，这样可以让用户在很短时间内顺利的继续当前最期望的任务。<br />
例如：用户的家庭住址，网站如果不需要邮寄物品给用户，就没必要询问用户该项，徒增用户的疑惑。反之，如果用户在淘宝购买了一件衣服，网站没有要求用户填写家庭住址，那么用户又该疑惑了，“你们会把东西给我寄到哪里呢？什么时候会问我的地址呢？”。因此表单的内容设计是需要仔细斟酌的，搞清楚什么是该询问的，什么是不该询问的。</p>
<p>2.    记住用户的信息，浏览器有时候会有些突发情况，用户可能会需要刷新自己的网页才可以再继续显示，此时，不要让用户再次面对一个空白的表单，保留尽可能多的内容给用户，减轻他们重新填写的压力吧。</p>
<p>3.    在每个用户出错的时候及时提醒，不要等到提交信息后再给用户打几个大红叉，这样是极不礼貌的行为，用户满心期待的等着成功的信息，结果是满页面的红色出错信息，会增加用户的沮丧感。当焦点离开了填写的区域，计算机应该立即判断用户填写内容的正确性。</p>
<p><img class="alignnone size-full wp-image-27428" title="e69caae6a087e9a298-3" src="http://tinatong.yo2.cn/wp-content/uploads/477/47706/2009/09/e69caae6a087e9a298-3.jpg" alt="e69caae6a087e9a298-3" width="205" height="73" /></p>
<p>4.    在信息量较大的情况下，可以采用让用户填空的方式来填写表单，把每个填写的位置流出来，形成一段话或者一句话的形式，这样比起一问一答的方式要亲切友好。</p>
<p>5.    问答的语言需要从用户的角度出发，不要使用难懂的计算机语言，让用户和计算机之间开始自然的对话。</p>
<p>6.    提交按钮应该设置在必填项都填完后再用彩色显示，未填写完时，变成灰色或者使用其他的文字。不要等用户点击后再刷新页面，然后告诉用户，还有很多项需要继续填写。</p>
<p>7.    设置项目的必填选项提示。不要在页面顶端告诉用户哪些是必须填写的，在每一个必填选项旁记得附上一个标记。不要等到用户满心欢喜的填完了他选择填写的内容，结果却得到一大堆的红色标记，就像小学生整篇试卷上都是红叉那样。</p>
<p>8.    一个国外的设计师这样说：表单的下方一般会有提交（确定）和取消两个常见选项，一般来说，选择提交（确定）的概率会大于选择取消的概率。于是有一个首要选项和次要选项的说法。因此他认为首要动作的按钮应该在视觉上比次要选项突出，可以把首要选项确定项进行加粗，或者把次要选项淡化，减少为一个带下划线的单词。</p>
<p><img class="alignnone size-full wp-image-27429" title="e69caae6a087e9a298-4" src="http://tinatong.yo2.cn/wp-content/uploads/477/47706/2009/09/e69caae6a087e9a298-4.jpg" alt="e69caae6a087e9a298-4" width="333" height="44" /></p>
<p><a href="http://tina.reeze.cn/wp-content/uploads/2009/09/903-4126645a45b97531.png"><img class="alignnone size-full wp-image-27650" title="903-4126645a45b97531" src="http://tina.reeze.cn/wp-content/uploads/2009/09/903-4126645a45b97531.png" alt="903-4126645a45b97531" width="262" height="90" /></a></p>
<p><strong>【更新】</strong></p>
<p>（表单设计时的<strong>首选处理方式和第二处理方式</strong>：</p>
<div>在设计时应该有一个更希望用户使用的选择，比如注册和取消注册之间，设计师应该在设计上引导用户选择注册选项而不是取消选项。因此在设计这两个按钮时就应该会有不一样的设计，这样的设计对用户能够有一个选择倾向性的暗示。</div>
<div>这样设计注册的按钮变得更为突出也更容易点击了，大按钮牵引用户的视线，用户选择更容易。</div>
<div>注册按钮在左边让习惯使用tab键切换的用户预先到达按钮位置，这也再次验证了我们设计时将焦点集中在可能性更大的选项上。）</div>
<p>9.    早期的表单在设置时一般带有三个按钮，确定，重置和取消。现在的表单中重置按钮已经逐渐走出了我们的视线。用户在填写表单中要求的数据内容的时候，很少有需要把全部信息推翻重写一遍的需求。因此，在现在的表单中，设计师已经去掉了这项多余的按钮。</p>
<p>10.    按钮的名称应该采用有意义的语言来标记用户的动作。一般常见的就是填写完表单后点击确定，提交，取消这样的文字。虽然很简短，但是和用户刚才填写的表单内容没有联系，适用于任何的表单。在注册用户的时候可以使用“立即注册”“马上注册”；提交Blog评论的时候使用“点击立刻发言”，“提交评论”等文字。</p>
<p>简单的表单却让用户有很多的疑惑，设计有良好用户体验的表单来欢迎用户吧。在以后的设计道路上，如果有新的发现会不定期的更新，让我们继续探索吧。</p>
]]></content:encoded>
			<wfw:commentRss>http://tina.reeze.cn/2009/09/08/webform/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
