<?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>Tin&#039;s Blog &#187; UI</title>
	<atom:link href="http://www.diamondtin.com/tag/ui/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.diamondtin.com</link>
	<description>you are coming a long way...</description>
	<lastBuildDate>Wed, 11 Aug 2010 09:43:26 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>iPod touch 2入手</title>
		<link>http://www.diamondtin.com/2008/ipod-touch-2-is-comming/</link>
		<comments>http://www.diamondtin.com/2008/ipod-touch-2-is-comming/#comments</comments>
		<pubDate>Tue, 21 Oct 2008 13:58:07 +0000</pubDate>
		<dc:creator>tin</dc:creator>
				<category><![CDATA[NoneTech.非技术]]></category>
		<category><![CDATA[Tech.技术]]></category>
		<category><![CDATA[Life]]></category>
		<category><![CDATA[Mac]]></category>
		<category><![CDATA[mac ipod touch apple]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[爱好]]></category>

		<guid isPermaLink="false">http://tin.zztin.com/?p=302</guid>
		<description><![CDATA[托同事从香港给带了iPod touch 2，好兴奋的拿到了这个iPhone的替代品。因为我一直以来很像有一个像样的掌上设备可以有空做做开发，而iPhone/touch可以说是不二之选，因为从艺术的眼光上看他们... ]]></description>
			<content:encoded><![CDATA[<p>托同事从香港给带了iPod touch 2，好兴奋的拿到了这个iPhone的替代品。因为我一直以来很像有一个像样的掌上设备可以有空做做开发，而iPhone/touch可以说是不二之选，因为从艺术的眼光上看他们很完美（起码我这么看）。而且多点触摸带来的交互革命激发了我作为UE边缘认识的兴趣。</p>
<p>iPod touch 2多了录音功能，所以也可以配合fring实现skype通话，不过前提是你需要购买带mic的耳机，目前似乎只有Apple原装的，要220港元，好贵，所以暂时还没有出手买这个。但是机身先下手了。是从国美（香港）买的，因为很多retail的地方都售空了。</p>
<p>现在的iPod包装实在是简单，连说明书都没有，只有一个简单的开箱指南，还有一个基本的连接iTunes的说明，仅此而已，不过倒是这样就够了，因为可以把你的眼球固定在touch上，让你自己好奇的去探索。我觉得激发用户的探索意识是很好的一种让用户产生沉浸感的营销方式，而且从苹果一向的交互设计理念上来说，他们非常注重启发式探索，并且尽量让你本能的达到自己所期待的结果，这个正是交互设计的重点所在。</p>
<p>那么不废话这么多，上图。图是上周一晚上照的，最近生活节奏太快，现在才抽空出来显摆^____^</p>

<a href='http://www.diamondtin.com/2008/ipod-touch-2-is-comming/dsc_0155/' title='dsc_0155'><img width="150" height="150" src="http://www.diamondtin.com/wp-content/uploads/2008/10/dsc_0155-150x150.jpg" class="attachment-thumbnail" alt="dsc_0155" title="dsc_0155" /></a>
<a href='http://www.diamondtin.com/2008/ipod-touch-2-is-comming/dsc_0158/' title='dsc_0158'><img width="150" height="150" src="http://www.diamondtin.com/wp-content/uploads/2008/10/dsc_0158-150x150.jpg" class="attachment-thumbnail" alt="dsc_0158" title="dsc_0158" /></a>
<a href='http://www.diamondtin.com/2008/ipod-touch-2-is-comming/dsc_0162/' title='dsc_0162'><img width="150" height="150" src="http://www.diamondtin.com/wp-content/uploads/2008/10/dsc_0162-150x150.jpg" class="attachment-thumbnail" alt="dsc_0162" title="dsc_0162" /></a>
<a href='http://www.diamondtin.com/2008/ipod-touch-2-is-comming/dsc_0166/' title='dsc_0166'><img width="150" height="150" src="http://www.diamondtin.com/wp-content/uploads/2008/10/dsc_0166-150x150.jpg" class="attachment-thumbnail" alt="dsc_0166" title="dsc_0166" /></a>
<a href='http://www.diamondtin.com/2008/ipod-touch-2-is-comming/dsc_0172/' title='dsc_0172'><img width="150" height="150" src="http://www.diamondtin.com/wp-content/uploads/2008/10/dsc_0172-150x150.jpg" class="attachment-thumbnail" alt="dsc_0172" title="dsc_0172" /></a>
<a href='http://www.diamondtin.com/2008/ipod-touch-2-is-comming/dsc_0174/' title='dsc_0174'><img width="150" height="150" src="http://www.diamondtin.com/wp-content/uploads/2008/10/dsc_0174-150x150.jpg" class="attachment-thumbnail" alt="dsc_0174" title="dsc_0174" /></a>
<a href='http://www.diamondtin.com/2008/ipod-touch-2-is-comming/dsc_0178/' title='dsc_0178'><img width="150" height="150" src="http://www.diamondtin.com/wp-content/uploads/2008/10/dsc_0178-150x150.jpg" class="attachment-thumbnail" alt="dsc_0178" title="dsc_0178" /></a>
<a href='http://www.diamondtin.com/2008/ipod-touch-2-is-comming/dsc_0181/' title='dsc_0181'><img width="150" height="150" src="http://www.diamondtin.com/wp-content/uploads/2008/10/dsc_0181-150x150.jpg" class="attachment-thumbnail" alt="dsc_0181" title="dsc_0181" /></a>
<a href='http://www.diamondtin.com/2008/ipod-touch-2-is-comming/dsc_0182/' title='dsc_0182'><img width="150" height="150" src="http://www.diamondtin.com/wp-content/uploads/2008/10/dsc_0182-150x150.jpg" class="attachment-thumbnail" alt="dsc_0182" title="dsc_0182" /></a>
<a href='http://www.diamondtin.com/2008/ipod-touch-2-is-comming/dsc_0187/' title='dsc_0187'><img width="150" height="150" src="http://www.diamondtin.com/wp-content/uploads/2008/10/dsc_0187-150x150.jpg" class="attachment-thumbnail" alt="dsc_0187" title="dsc_0187" /></a>
<a href='http://www.diamondtin.com/2008/ipod-touch-2-is-comming/dsc_0189/' title='dsc_0189'><img width="150" height="150" src="http://www.diamondtin.com/wp-content/uploads/2008/10/dsc_0189-150x150.jpg" class="attachment-thumbnail" alt="dsc_0189" title="dsc_0189" /></a>
<a href='http://www.diamondtin.com/2008/ipod-touch-2-is-comming/dsc_0192/' title='dsc_0192'><img width="150" height="150" src="http://www.diamondtin.com/wp-content/uploads/2008/10/dsc_0192-150x150.jpg" class="attachment-thumbnail" alt="dsc_0192" title="dsc_0192" /></a>
]]></content:encoded>
			<wfw:commentRss>http://www.diamondtin.com/2008/ipod-touch-2-is-comming/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>说说我以为的RIA与Rich client</title>
		<link>http://www.diamondtin.com/2008/about_rich_client_and_ria/</link>
		<comments>http://www.diamondtin.com/2008/about_rich_client_and_ria/#comments</comments>
		<pubDate>Tue, 19 Aug 2008 14:29:35 +0000</pubDate>
		<dc:creator>tin</dc:creator>
				<category><![CDATA[Tech.技术]]></category>
		<category><![CDATA[Philosophy]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[thinking]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[计算机与 Internet]]></category>

		<guid isPermaLink="false">http://tin.zztin.com/?p=255</guid>
		<description><![CDATA[中午徐X和米高讲了一下Rich client的架构。其中徐X讲的是如何从单机分层系统到Rich client。 实际上最早的单机分层系统的UI部分激发了OO作为界面的编程模型。然后分层模型为了C/S结构发生了一些... ]]></description>
			<content:encoded><![CDATA[<p>中午徐X和米高讲了一下Rich client的架构。其中徐X讲的是如何从单机分层系统到Rich client。</p>
<p>实际上最早的单机分层系统的UI部分激发了OO作为界面的编程模型。然后分层模型为了C/S结构发生了一些变化，目的是共享数据和通信，但是由于OO在远程调用上面的失败应用（Corba，EJB，Dcom），所以让人对OO产生了怀疑（实际上只是用错了地方）。而后又发生了B/S的变化，是一种完全的中心共享方式，原因是HTTP的无状态性造成客户端很难保存state，所以就有了完全中心共享状态的架构。而后通过通讯的增强（Ajax），客户端的状态保持逻辑通过异步通信来增强，所以产生了更好的用户体验。但是对状态同步的进一步要求和对会话状态保持的进一步要求让Ajaxian了的应用还是有点难以承受，所以Rich client又回归了。当然回归的时候同时带来的还有新的编程模型，如基于标记的声明式编程模型，还有更方便View-Model同步（通知）的数据binding机制，布局管理器，绘图支持能力，多线程能力，内嵌的视频编解码能力。其实WPF作为Windows上的新型UI编程模型他的确从Mozzila的XUL还有Adobe的mxml吸取了一些经验。上面这些是徐X阐述的主要内容，很精彩（最后的编程模型是我加的注释）。</p>
<p>而后米高做了一些技术层面的对比，主要是对比了Web和rich client的区别，不过我比较失望^___^，因为对比有失偏颇，原因是米高只用了5分钟准备ppt。</p>
<p>最后是我的意见。我现在已经不想割裂的分开Rich client和Web上的RIA，实际上目前他们已经有走向统一模型的趋势。</p>
<p>去年在InfoQ写文章的时候我就表达过这个意见。今天徐X也强调了，经典的MVC实际上很重要的是解决了数据共享（同步通知问题）与状态（会话）保持的问题，所有的架构问题其实都围绕了这个问题。首先RIA里面已经开始了layout数据分离的加强过程，比较明显的就是声名式的组件组合配置，还有数据绑定模型，这个在Flash和Silverlight还有JavaFx都有着重的解决，而且方向都很类似。其中Silverlight其实是一个减缩版的WPF。然后我们从架构方面来思考，解决状态共享和传递是通过增强的双向通信能力来完成的，很多RIA框架在开始提供web socket模型，这样让通讯超过无状态的且单向的HTTP，包括HTML5（目的是扩展Web上常用的一些Object，增强Web的编程能力，且让很多元素得到正确的语义，这个与XHTML2的关注点不同）的草案里面也有Web socket（类似socket的编程对象，可以实现二进制协议的面向连接的通讯）的提案。当然些努力就是让实现消息传递的开销更小，时效性更高，配合线程概念的支持，就可以实现复杂的基于消息的异步界面逻辑（这会极大的扩展RIA应用的能力）。因为通讯其实是解决状态共享的一个方向，通过高效的消息通知达到多个消费端的状态共享。另外一种解决Browser端状态同步（这里主要指客户端与服务器的数据库同步）的方法就是离线存储能力，这样削弱客户端对服务器的依赖。这种解决方案的代表就是各种Gears，Google gears，dojo offline等等，他们在浏览器里面嵌入sql lite一类的数据库，让客户端有自己的结构化存储能力，对于没有多客户端数据同步要求的应用来说离线方式可以让客户端形成完整的编程模型，通过sync机制在连线的时候进行数据同步是一种非常帮的RIA发展方向，从这个角度它已经是Rich client了。</p>
<p>那么可以扩展一下。我们知道Lotus Notes有服务器端replication的模式，离线会存在本地，连线的时候再同步。而对于另一些应用，极端地如Skype，他对实时的同步要求很高（当然它属于通讯类应用，也就是3C中的Communicate，而不是Content system），Skype的解决方案就是p2p。如果RIA有了socket（当然还有跨域支持），有了多线程，那么p2p是不是也不算难事了呢？状态同步通过p2p来实现，虽然不是可靠的通讯方式，但是却符合Internet的最大努力原则，所以我觉得这两种技术的结合的确很容易让RIA和Rich client不在有明显的界限，未来的目的就是融合。所以，要注意的是为什么微软拼了命在推Silverlight，而且拼了命的公布了Mac和Linux版本的Silverlight，其重要原因就是让WPF的模型渗透到RIA，用Rich client围攻RIA，来解决Adobe用超级NB的Air这个RIA衍生来围攻Rich client的困难。</p>
<p>这样，我们知道2年前开始声音渐强的Offline storage和越来越强的绘图，data binding的意图了吧，融合已经开始了，目标当然就是吃下这个大平台，然后成为最大的赢家！</p>]]></content:encoded>
			<wfw:commentRss>http://www.diamondtin.com/2008/about_rich_client_and_ria/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>给友人的好看簿的UI重构建议</title>
		<link>http://www.diamondtin.com/2008/some_ui_refactory_advice_to_haokanbucom/</link>
		<comments>http://www.diamondtin.com/2008/some_ui_refactory_advice_to_haokanbucom/#comments</comments>
		<pubDate>Wed, 30 Apr 2008 04:05:50 +0000</pubDate>
		<dc:creator>tin</dc:creator>
				<category><![CDATA[Tech.技术]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://tin.zztin.com/?p=46</guid>
		<description><![CDATA[首先，技术角度： 1、使用XHTML和基于语义化结构标签和CSS的布局，使用CSS Sprites。减少页面体积，同时得到SEO的好处。 2、信息结构设计。从信息结构入手来产生排版的设计，要符合人的阅读习... ]]></description>
			<content:encoded><![CDATA[<p>首先，技术角度：<br />
1、使用XHTML和基于语义化结构标签和CSS的布局，使用CSS Sprites。减少页面体积，同时得到SEO的好处。<br />
2、信息结构设计。从信息结构入手来产生排版的设计，要符合人的阅读习惯。<br />
3、合理安排字体（减少字体大小的跳跃），使用相对字体em（并结合使用yui-css框架）。合理安排所有padding和margin，让页面的元素间距高度一致，也就是同一层次的信息结构应该使用同样的字体和元素间距。可以参考写Word文档时候的章－段－节那样的结构去思考结构。</p>
<p>可用性角度考虑：<br />
1、使用弹性的页面布局？虽然有点难度，但是对于使用大显示器的用户十分友好。<br />
2、增加inline的帮助，遇到问题最好用户在最近的路径就找到帮助。<br />
3、如果要区分大家的和自己的地盘，那么一定要使用几乎完全不同的颜色甚至是排版，而且要增加足够清晰的Bread Crumb来告诉用户位置。我觉得JavaEye的首页和博客区分的就比较清楚。</p>]]></content:encoded>
			<wfw:commentRss>http://www.diamondtin.com/2008/some_ui_refactory_advice_to_haokanbucom/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Yahoo的“前端优化突破” slide共享</title>
		<link>http://www.diamondtin.com/2008/yahoo%e7%9a%84%e2%80%9c%e5%89%8d%e7%ab%af%e4%bc%98%e5%8c%96%e7%aa%81%e7%a0%b4%e2%80%9d-slide%e5%85%b1%e4%ba%ab/</link>
		<comments>http://www.diamondtin.com/2008/yahoo%e7%9a%84%e2%80%9c%e5%89%8d%e7%ab%af%e4%bc%98%e5%8c%96%e7%aa%81%e7%a0%b4%e2%80%9d-slide%e5%85%b1%e4%ba%ab/#comments</comments>
		<pubDate>Tue, 08 Apr 2008 09:27:14 +0000</pubDate>
		<dc:creator>tin</dc:creator>
				<category><![CDATA[Tech.技术]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://blog.agileito.com/tin/?p=41</guid>
		<description><![CDATA[这是一篇很好的讲前端页面优化的slide，当然有不少内容我们都看过很多遍了，我以前做过的： Performance and Scalability of Ajax Part 1 Performance and Scalability of Ajax Part 2 里面的内容也有一些重复。不过... ]]></description>
			<content:encoded><![CDATA[<p style="width:425px;text-align:left">这是一篇很好的讲前端页面优化的slide，当然有不少内容我们都看过很多遍了，我以前做过的：
<ul>
<li><a href="http://www.haokanbu.com/story/5889/">Performance and Scalability of Ajax Part 1</a></li>
<li><a href="http://www.haokanbu.com/story/5892/">Performance and Scalability of Ajax Part 2</a></li>
</ul>
<p>里面的内容也有一些重复。不过这次我还是很有收获，比如IBM的<a href="http://www.alphaworks.ibm.com/tech/pagedetailer" target="_blank">Page detailer</a>就是个不错的profiler工具。还有使用document.getElementsByTagName(&#8216;*&#8217;).length简单判断dom复杂度的方法也是不错的。结果是：
<ul>
<li>新浪首页是3109</li>
<li>财经首页是4260 </li>
<li>新浪邮箱是169</li>
<li>纸条箱251</li>
<li>sohu是2k4</li>
<li>netease是1k4</li>
</ul>
<p>很有意思。
</p>
<p>结绳记事。</p>
<div style="width:425px;text-align:left"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="355" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="src" value="http://static.slideshare.net/swf/ssplayer2.swf?doc=high-performance-web-pages-20-new-best-practices-1206389190195598-3" /><embed type="application/x-shockwave-flash" width="425" height="355" src="http://static.slideshare.net/swf/ssplayer2.swf?doc=high-performance-web-pages-20-new-best-practices-1206389190195598-3" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<div style="font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px;"><a href="http://www.slideshare.net/?src=embed"><img style="border:0px none;margin-bottom:-5px" src="http://static.slideshare.net/swf/logo_embd.png" alt="SlideShare" /></a> | <a title="View this slideshow on SlideShare" href="http://blog.agileito.com/tin/wp-admin/undefined">View</a> | <a href="http://www.slideshare.net/upload">Upload your own</a></div>
</div>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="0" height="0" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://counters.gigya.com/wildfire/CIMP/Jmx*PTEyMDc2NDE*Njk5MDkmcHQ9MTIwNzY*NjQ2Nzg1MSZwPTEwMTkxJmQ9Jm49.swf" /><embed type="application/x-shockwave-flash" width="0" height="0" src="http://counters.gigya.com/wildfire/CIMP/Jmx*PTEyMDc2NDE*Njk5MDkmcHQ9MTIwNzY*NjQ2Nzg1MSZwPTEwMTkxJmQ9Jm49.swf"></embed></object></p>]]></content:encoded>
			<wfw:commentRss>http://www.diamondtin.com/2008/yahoo%e7%9a%84%e2%80%9c%e5%89%8d%e7%ab%af%e4%bc%98%e5%8c%96%e7%aa%81%e7%a0%b4%e2%80%9d-slide%e5%85%b1%e4%ba%ab/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
