<?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://ka-yue.com/blog/tag/%e4%bb%8b%e9%9d%a2/feed" rel="self" type="application/rss+xml" />
	<link>http://ka-yue.com/blog</link>
	<description>網頁設計、開發、SEO 優化</description>
	<lastBuildDate>Fri, 27 Aug 2010 06:22:10 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Moblin 2 Netbook Beta UI</title>
		<link>http://ka-yue.com/blog/moblin-beta-netbook-ui</link>
		<comments>http://ka-yue.com/blog/moblin-beta-netbook-ui#comments</comments>
		<pubDate>Thu, 21 May 2009 08:37:30 +0000</pubDate>
		<dc:creator>kayue</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[GUI]]></category>
		<category><![CDATA[intel]]></category>
		<category><![CDATA[moblin]]></category>
		<category><![CDATA[netbook]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[UI design]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[介面]]></category>
		<category><![CDATA[介面設計]]></category>
		<category><![CDATA[用戶介面]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=479</guid>
		<description><![CDATA[在 engadget 上看到這則關於 Moblin 2.0 beta 的消息。Moblin 是 Intel 旗下的一個 Linux-based netbook OS project，雖然目前只是 beta 版，但從 ui 上看已經非常成熟（金玉其外？）。我已經深深的被它的 ui 吸引，希望能取代 xp 成為主要的 netbook OS（當然絕大部份都會同時擁有兩個 os 啦）。就是風格方面有點像 sony 的 VAIO/PSP。 以下是官方提供的操作畫面： 流暢、簡單而華麗（？）的 UI，令人讚不絕口。我對 netbook 要求只有：email、calendar、RSS reader、browser、office、media player，目前 moblin 好像尚缺 open office &#8230; <a href="http://ka-yue.com/blog/moblin-beta-netbook-ui">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-480" title="m_zone" src="http://220.232.237.39/~kayuecom39/blog/wp-content/uploads/2009/05/m_zone.png" alt="m_zone" width="600" height="300" /></p>
<p>在 engadget 上<a href="http://chinese.engadget.com/2009/05/21/moblin-2-0-beta-impressively-demoed-on-video/">看到這則關於 Moblin 2.0 beta 的消息</a>。Moblin 是 Intel 旗下的一個 Linux-based netbook OS project，雖然目前只是 beta 版，但從 ui 上看已經非常成熟（金玉其外？）。我已經深深的被它的 ui 吸引，希望能取代 xp 成為主要的 netbook OS（當然絕大部份都會同時擁有兩個 os 啦）。就是風格方面有點像 sony 的 VAIO/PSP。</p>
<p>以下是官方提供的操作畫面：</p>
<p><span id="more-479"></span></p>
<p style="text-align: center;"><object width="560" height="340" data="http://www.youtube.com/v/vsCpIeLLoT8&amp;hl=en&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/vsCpIeLLoT8&amp;hl=en&amp;fs=1&amp;rel=0" /><param name="allowfullscreen" value="true" /></object></p>
<p>流暢、簡單而華麗（？）的 UI，令人讚不絕口。我對 netbook 要求只有：email、calendar、RSS reader、browser、office、media player，目前 moblin 好像尚缺 open office （email、calendar、rss reader都可靠browser來完成），但已經滿足了我大部份需求。</p>
<p><img class="aligncenter size-full wp-image-481" title="moblin-2-alpha" src="http://220.232.237.39/~kayuecom39/blog/wp-content/uploads/2009/05/moblin-2-alpha.png" alt="moblin-2-alpha" width="600" height="360" /></p>
<p>上圖是 moblin alpha 版的 ui。喜見 beta 版的改進不單單只是重繪 icon 這麼馬虎草率，而是從根本裡重新制作。</p>
<p>如欲嘗鮮請到 <a href="http://moblin.org/">http://moblin.org/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/moblin-beta-netbook-ui/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Designing Web Interfaces</title>
		<link>http://ka-yue.com/blog/designing-web-interfaces</link>
		<comments>http://ka-yue.com/blog/designing-web-interfaces#comments</comments>
		<pubDate>Sat, 14 Mar 2009 06:32:07 +0000</pubDate>
		<dc:creator>kayue</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[presentation]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[介面]]></category>
		<category><![CDATA[介面設計]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=435</guid>
		<description><![CDATA[Bill Scott 為其新書《Designing Web Interfaces》作了一場演講，內容主要圍繞著書中談及的 6 個網頁介面設計原則，並提供了大量例子和 patterns。該 6 個原則為： make it direct keep it lightweight stay on the page provide invitation use transition react immediately 作者很大方的把書中的大量圖片上載到 Flickr，大方得令人懷疑有再沒有購買的需要。就書的內容而言，雖然內容稍欠新意，但看在大量整理得井井有條的 patterns 份上，應該不失為一本優秀的參考書。而該演講已經可以在 Youtube 觀看，slides 亦可在 slideshare.net 下載。]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-436" title="designing-web-interfaces" src="http://220.232.237.39/~kayuecom39/blog/wp-content/uploads/2009/03/designing-web-interfaces.png" alt="designing-web-interfaces" width="600" height="200" /></p>
<p>Bill Scott 為其新書《<a href="http://www.amazon.com/gp/product/0596516258?ie=UTF8&amp;tag=looksgoodwork-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=0596516258" target="_blank">Designing Web Interfaces</a>》作了一場演講，內容主要圍繞著書中談及的 6 個網頁介面設計原則，並提供了大量例子和 patterns。該 6 個原則為：</p>
<ul>
<li>make it direct</li>
<li>keep it lightweight</li>
<li>stay on the page</li>
<li>provide invitation</li>
<li>use transition</li>
<li>react immediately</li>
</ul>
<p><span id="more-435"></span></p>
<p>作者很大方的把書中的大量圖片<a href="http://www.flickr.com/photos/designingwebinterfaces" target="_blank">上載到 Flickr</a>，大方得令人懷疑有再沒有購買的需要。就書的內容而言，雖然內容稍欠新意，但看在大量整理得井井有條的 patterns 份上，應該不失為一本優秀的參考書。而該演講已經可以在 <a href="http://www.youtube.com/watch?v=LW4MwvgW_ww&amp;fmt=18" target="_blank">Youtube 觀看</a>，slides 亦可在 <a href="http://www.slideshare.net/billwscott/designing-web-interfaces-book-oreilly-webcast?src=embed#" target="_blank">slideshare.net 下載</a>。</p>
]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/designing-web-interfaces/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Visual Communication for the Web</title>
		<link>http://ka-yue.com/blog/visual-communication-for-the-web</link>
		<comments>http://ka-yue.com/blog/visual-communication-for-the-web#comments</comments>
		<pubDate>Wed, 11 Mar 2009 22:55:53 +0000</pubDate>
		<dc:creator>kayue</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[LukeW]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[介面]]></category>
		<category><![CDATA[介面設計]]></category>
		<category><![CDATA[可用性]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=430</guid>
		<description><![CDATA[早前介紹過的 LukeW 在 VizThink 2009 中就網上視覺傳播作了一場演講，內容包括 介紹利用視覺組織來傳達重要訊息、實作技巧和案例。 雖然沒找到該演講的視頻，但 slides 已經可以公開下載，有興趣的讀者請按此處下載（5MB PDF）。 以下是一些重點： The end goal of visual communication Quicker communication Usefulness - what is it? Usability - How to use it? Desirability - Why should I care? What makes great &#8230; <a href="http://ka-yue.com/blog/visual-communication-for-the-web">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-429" title="visual-communication-for-web" src="http://220.232.237.39/~kayuecom39/blog/wp-content/uploads/2009/03/visual-communication-for-web.png" alt="visual-communication-for-web" width="600" height="300" /></p>
<p><a href="http://ka-yue.com/blog/ebook-from-lukew" target="_blank">早前介紹過的 LukeW</a> 在 VizThink 2009 中就網上視覺傳播作了一場演講，內容包括 介紹利用視覺組織來傳達重要訊息、實作技巧和案例。</p>
<p>雖然沒找到該演講的視頻，但 slides 已經可以公開下載，有興趣的讀者請<a href="http://www.lukew.com/resources/articles/VisualCommunicationForWeb_LukeW.pdf">按此處下載</a>（5MB PDF）。</p>
<p><span id="more-430"></span></p>
<p>以下是一些重點：</p>
<ul>
<li>The end goal of visual communication
<ul>
<li><strong>Quicker </strong>communication
<ul>
<li><strong>Usefulness </strong>- what is it?</li>
<li><strong>Usability </strong>- How to use it?</li>
<li><strong>Desirability </strong>- Why should I care?</li>
</ul>
</li>
</ul>
</li>
<li>What makes great presentation?
<ul>
<li>Visual Organization
<ul>
<li>Communicates the <strong>relationships </strong>between user interface elements</li>
</ul>
</li>
<li>Personality
<ul>
<li>Communicates the <strong>brand </strong>essence of a product</li>
</ul>
</li>
</ul>
</li>
<li>Terms
<ul>
<li><strong>Visual Communication</strong> is part</li>
<li><strong>Visual Organization</strong> and part personality.</li>
<li><strong>Visual Hierarchy</strong> is a deliberate prioritization of</li>
<li><strong>Visual Weight</strong> enabled by the manipulation of</li>
<li><strong>Visual Relationships</strong> to create</li>
<li><strong>Meaning</strong> for users.</li>
</ul>
</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/visual-communication-for-the-web/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Don&#039;t Click It</title>
		<link>http://ka-yue.com/blog/dont-click-it</link>
		<comments>http://ka-yue.com/blog/dont-click-it#comments</comments>
		<pubDate>Thu, 05 Mar 2009 04:07:39 +0000</pubDate>
		<dc:creator>kayue</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[DontClick.it]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[UI design]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[介面]]></category>
		<category><![CDATA[介面設計]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=425</guid>
		<description><![CDATA[Vista 其中一個為人垢病的地方，是其問長問短絮絮不休的介面，每一個多餘的點擊都令人不勝其煩。 想試一下「無點擊」的 UI 嗎？到 DontClick.it 體驗一下吧。這是一個建立於 2005 年的實驗性網站，這網站不允許訪客使用滑鼠點擊，否則會出現警告畫面。你會發現，人的習慣是很難改變的。 網站內包含了一些無點擊 UI 下可行方法的研究和實作。其實制作一個無點擊 UI 是有一定難度的，因為電腦上常用的 mouse events 在不允許點擊環境下只剩下 mouse over 一項。相反，一個 touch screen UI 卻沒有了 mouse over 這一 event ，因為每個 touch 都是一個 click。有甚麼情況是無法點擊呢？眼球控制的 UI 就是了，如果有的話。 另外，dontclick.it 會把訪客的一舉一動記錄在案，並公開讓大家在網上重播。]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-426" title="dontclickit" src="http://220.232.237.39/~kayuecom39/blog/wp-content/uploads/2009/03/dontclickit.png" alt="dontclickit" width="600" height="250" /></p>
<p>Vista 其中一個為人垢病的地方，是其問長問短絮絮不休的介面，每一個多餘的點擊都令人不勝其煩。</p>
<p>想試一下「無點擊」的 UI 嗎？到 <a href="http://www.dontclick.it/" target="_blank">DontClick.it</a> 體驗一下吧。這是一個建立於 2005 年的實驗性網站，這網站不允許訪客使用滑鼠點擊，否則會出現警告畫面。你會發現，人的習慣是很難改變的。</p>
<p><span id="more-425"></span></p>
<p>網站內包含了一些無點擊 UI 下可行方法的研究和實作。其實制作一個無點擊 UI 是有一定難度的，因為電腦上常用的 mouse events 在不允許點擊環境下只剩下 mouse over 一項。相反，一個 touch screen UI 卻沒有了 mouse over 這一 event ，因為每個 touch 都是一個 click。有甚麼情況是無法點擊呢？眼球控制的 UI 就是了，如果有的話。 <img src='http://ka-yue.com/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>另外，dontclick.it 會把訪客的一舉一動記錄在案，並公開讓大家在網上重播。</p>
]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/dont-click-it/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Microsoft 未來辦公室概念展示</title>
		<link>http://ka-yue.com/blog/microsoft-%e6%9c%aa%e4%be%86%e8%be%a6%e5%b7%a5%e5%ae%a4%e6%a6%82%e5%bf%b5%e5%b1%95%e7%a4%ba</link>
		<comments>http://ka-yue.com/blog/microsoft-%e6%9c%aa%e4%be%86%e8%be%a6%e5%b7%a5%e5%ae%a4%e6%a6%82%e5%bf%b5%e5%b1%95%e7%a4%ba#comments</comments>
		<pubDate>Mon, 02 Mar 2009 16:12:10 +0000</pubDate>
		<dc:creator>kayue</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Concept]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Office Labs]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[介面]]></category>
		<category><![CDATA[介面設計]]></category>
		<category><![CDATA[概念]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=412</guid>
		<description><![CDATA[Microsoft 的研發部門 Microsoft Office Labs 最近把其對「未來辦公室」的概念研究成果公開，並制作成一段長達 5 分鐘的影片。片中展示了大量新的高科技產品和概念，如無處不在的 multi-touch 投射式螢幕（surface）、比哈利波特魔法世界更炫的電子報紙，透明螢幕、即時翻譯、cross-device interaction 等等。 雖然片中所及大部份都是天馬行空，但當中不少 UI 的設計都很具參值，特別是與人交互方面，值得留意。按此觀看影片。 觀看後欲罷不能？此 Powerpoint 介紹了片中的每個概念，方便大家參詳參詳。 PS: 感謝網友 Kin 提醒，應為「辦公室」而非「辦工室」。再次感謝。]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-413" title="microsoft-office-labs" src="http://220.232.237.39/~kayuecom39/blog/wp-content/uploads/2009/03/microsoft-office-labs.png" alt="microsoft-office-labs" width="600" height="250" /></p>
<p>Microsoft 的研發部門 <a href="http://www.officelabs.com/" target="_blank">Microsoft Office Labs</a> 最近把其對「未來辦公室」的概念研究成果公開，並制作成一段長達 5 分鐘的影片。片中展示了大量新的高科技產品和概念，如無處不在的 multi-touch 投射式螢幕（surface）、比哈利波特魔法世界更炫的電子報紙，透明螢幕、即時翻譯、cross-device interaction 等等。</p>
<p><span id="more-412"></span></p>
<p>雖然片中所及大部份都是天馬行空，但當中不少 UI 的設計都很具參值，特別是與人交互方面，值得留意。<a href="http://www.istartedsomething.com/20090228/microsoft-office-labs-vision-2019-video/" target="_blank">按此觀看影片</a>。</p>
<p>觀看後欲罷不能？<a href="http://www.microsoft.com/presspass/download/exec/elop/2009/02-27ElopWhartonKEynote.ppt" target="_blank">此 Powerpoint</a> 介紹了片中的每個概念，方便大家參詳參詳。</p>
<p>PS: 感謝網友 Kin 提醒，應為「辦<strong>公</strong>室」而非「辦工室」。再次感謝。</p>
]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/microsoft-%e6%9c%aa%e4%be%86%e8%be%a6%e5%b7%a5%e5%ae%a4%e6%a6%82%e5%bf%b5%e5%b1%95%e7%a4%ba/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>TAT－創新手機UI設計</title>
		<link>http://ka-yue.com/blog/tat-mobile-user-interfaces</link>
		<comments>http://ka-yue.com/blog/tat-mobile-user-interfaces#comments</comments>
		<pubDate>Fri, 27 Feb 2009 23:59:17 +0000</pubDate>
		<dc:creator>kayue</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[mobile user interface]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[UI design]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[介面]]></category>
		<category><![CDATA[介面設計]]></category>
		<category><![CDATA[手機]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=408</guid>
		<description><![CDATA[瑞典 UI 團隊 TAT–The Astonishing Tribe 設計了很多創新手機 UI，有興趣的讀者不妨瀏覽一下他們的 showcase 或 youtube 的 channel。例如上方影片所演示的 3D eyetracking UI，令手機 UI 變得有層次、有深度。 上面是 TAT 另一個很有新意的 UI 概念性作品－Print UI。Print UI 捨棄了傳統手機 UI 的造法，給使用者一種耳目一新的感覺。 如果 Google Android 的 UI 也這麼有設計感，應該會大賣吧？]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><object width="480" height="385" data="http://www.youtube.com/v/7SImOIMcMlk&amp;hl=en&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/7SImOIMcMlk&amp;hl=en&amp;fs=1&amp;rel=0" /><param name="allowfullscreen" value="true" /></object></p>
<p>瑞典 UI 團隊 TAT–<a href="http://www.tat.se/">The Astonishing Tribe</a> 設計了很多創新手機 UI，有興趣的讀者不妨瀏覽一下他們的 <a href="http://www.tat.se/site/showroom/latest_design.html" target="_blank">showcase</a> 或 youtube 的 <a href="http://www.youtube.com/user/TATMobileUI">channel</a>。例如上方影片所演示的 3D eyetracking UI，令手機 UI 變得有層次、有深度。</p>
<p><span id="more-408"></span></p>
<p style="text-align: center;"><object width="480" height="385" data="http://www.youtube.com/v/u2EOk-8iuCk&amp;hl=en&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/u2EOk-8iuCk&amp;hl=en&amp;fs=1&amp;rel=0" /><param name="allowfullscreen" value="true" /></object></p>
<p>上面是 TAT 另一個很有新意的 UI 概念性作品－Print UI。Print UI 捨棄了傳統手機 UI 的造法，給使用者一種耳目一新的感覺。</p>
<p>如果 Google Android 的 UI 也這麼有設計感，應該會大賣吧？</p>
]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/tat-mobile-user-interfaces/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
