<?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/"
	>

<channel>
	<title>JIWO STUDIO &#187; Articles</title>
	<atom:link href="http://jiwostudio.com/archives/category/articles/feed" rel="self" type="application/rss+xml" />
	<link>http://jiwostudio.com</link>
	<description>Dude, your UI sucks.</description>
	<pubDate>Mon, 08 Feb 2010 16:47:04 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.7.1</generator>
	<language>zh-TW</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Thoughts on iPad</title>
		<link>http://jiwostudio.com/archives/1942</link>
		<comments>http://jiwostudio.com/archives/1942#comments</comments>
		<pubDate>Thu, 28 Jan 2010 07:45:57 +0000</pubDate>
		<dc:creator>Leo</dc:creator>
		
		<category><![CDATA[Articles]]></category>

		<guid isPermaLink="false">http://jiwostudio.com/?p=1942</guid>
		<description><![CDATA[Apple 在最近十年內改變了世界好幾次；iPod, iPhone, 以及昨天發表的 iPad 都是非常重要的里程碑。

大家用了 iPhone 那麼久，對它早已習以為常，要是現在把 iPhone 從你生活中抽離，你會難以理解為何其他的手機這麼的陽春、這麼的&#8230;遜；未來的半年或一年後，當我們習慣了 iPad，應該也會有同樣的反應。

不只是「大 iPhone」

iPad 的外型像極了一台被放大的 iPhone（事實上我可以在繪圖軟體內輕鬆的把 iPhone 的圖片拉成 iPad）；解鎖畫面的方式和 iPhone 一樣，要用手指滑過拉桿；實體按鈕的配置上也相同：上方與側邊有開關、靜音、音量鈕，底下有 Home button。

在軟體方面，iPad 可以直接執行 iPhone 軟體、Home Screen 上的 icon 配置也和 iPhone 相同，就是下方的 dock 樣式不同而已。

然而，對於 Mac 開發者和 UI 設計師來說，iPad 並不只是一個「變大的 iPhone」或是「有觸控螢幕的 MacBook」而已，不，沒有這麼單純。

所謂介面設計1，不只是單純的設計某個按鈕的「外觀」，而是要設計按鈕按下去後「要發生什麼事」。而「要發生什麼事」，則取決於軟硬體所提供的互動方式。

構思 Mac 軟體時，你可以知道使用者有滑鼠、鍵盤可以用，而且他們一定是坐在電腦前專心的使用，所以你可以盡情揮灑，只要維持版面配置和固定操作邏輯，就不怕使用者不會用；設計 iPhone app 時又不同了，iPhone 的螢幕小、而且使用觸控介面，使用者多半在移動中，沒有空去研究你的軟體怎麼用，所以設計時要讓功能與流程單純化，注意不要把所有的功能都做進去，只做最重要那個就好了。

iPad 又是一個不同的領域。使用者擁有一個 1024 x 768-pixel / 132 ppi 高解析度多點觸控螢幕可以使用，再加上本來 iPhone 才具備的 [...]]]></description>
			<content:encoded><![CDATA[<p>Apple 在最近十年內改變了世界好幾次；iPod, iPhone, 以及昨天發表的 iPad 都是非常重要的里程碑。</p>

<p>大家用了 iPhone 那麼久，對它早已習以為常，要是現在把 iPhone 從你生活中抽離，你會難以理解為何其他的手機這麼的陽春、這麼的&#8230;遜；未來的半年或一年後，當我們習慣了 iPad，應該也會有同樣的反應。</p>

<h3>不只是「大 iPhone」</h3>

<p>iPad 的外型像極了一台被放大的 iPhone（事實上我可以在繪圖軟體內輕鬆的把 iPhone 的圖片拉成 iPad）；解鎖畫面的方式和 iPhone 一樣，要用手指滑過拉桿；實體按鈕的配置上也相同：上方與側邊有開關、靜音、音量鈕，底下有 Home button。</p>

<p>在軟體方面，iPad 可以直接執行 iPhone 軟體、Home Screen 上的 icon 配置也和 iPhone 相同，就是下方的 dock 樣式不同而已。</p>

<p>然而，對於 Mac 開發者和 UI 設計師來說，iPad 並不只是一個「變大的 iPhone」或是「有觸控螢幕的 MacBook」而已，不，沒有這麼單純。</p>

<p>所謂介面設計<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>，不只是單純的設計某個按鈕的「外觀」，而是要設計按鈕按下去後「要發生什麼事」。而「要發生什麼事」，則取決於軟硬體所提供的互動方式。</p>

<p>構思 Mac 軟體時，你可以知道使用者有滑鼠、鍵盤可以用，而且他們一定是坐在電腦前專心的使用，所以你可以盡情揮灑，只要維持版面配置和固定操作邏輯，就不怕使用者不會用；設計 iPhone app 時又不同了，iPhone 的螢幕小、而且使用觸控介面，使用者多半在移動中，沒有空去研究你的軟體怎麼用，所以設計時要讓功能與流程單純化，注意不要把所有的功能都做進去，只做最重要那個就好了。</p>

<p>iPad 又是一個不同的領域。使用者擁有一個 1024 x 768-pixel / 132 ppi 高解析度多點觸控螢幕可以使用，再加上本來 iPhone 才具備的 3G / WiFi 持續連線功能、GPS 定位、麥克風、內建喇叭、Accelerometer；而且你可以預計使用者會坐下來專心使用。</p>

<h3>介面會趨於簡化，但功能不見得會簡化</h3>

<p>iPad 給了我們一個截然不同的舞台。</p>

<p>Mac 適合跑功能強大，介面精密的軟體；iPhone 上適合跑功能單純、但互動方式多的軟體。</p>

<p>iPad 呢？</p>

<p>iPad 擁有大螢幕，有空間可以容納全功能的軟體，而操作方式又是使用多點觸控，是要用手指操作的，由於手指所需要的空間比滑鼠游標大的多，因此介面勢必要設計的夠大、介面元素間隔夠寬，在這樣的設計原則下，就會產生較為簡單的介面。</p>

<p><img src="http://emberapp.com/leolin/images/safari-5/sizes/m.png" title="Safari" /></p>

<p class="caption">請注意 iTunes 的大按鈕、大專及圖片和左邊 Source List 的字體與間距，整體構造比我家的電視遙控器還簡單，我媽肯定會用。</p>

<p>iPad 上的軟體，將會有不遜色於 Mac 軟體的功能，但介面反而會比 Mac 上的更加簡單<sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup>。我預計一大堆 Mac 軟體會陸續移植到 iPad 上，而且功能不減。</p>

<h3>2010 年流行的軟體材質是&#8230;真皮！</h3>

<p>iPad 上的軟體還會有一個特色：就是「擬真」。</p>

<p>由於 iPad 的特性，使用者必須要用手指直接操作，所以對使用者來說，iPad 不必然會被視為有鍵盤滑鼠的「電腦」，而可以成為一種更加親近的裝置。</p>

<p>看看 Apple 自己寫的軟體，除了無法具象化的 iPod, iTunes, App Store 外，其他只要是在現實生活中有形體的 app，都會看起來像真的。</p>

<p>你去看看 Calendar 長什麼樣子，他就長得跟 Calendar 一樣；Address Book 長什麼樣子？就是 Address Book 的樣子！我個人最愛那個<a href="http://www.apple.com/ipad/features/">真皮的 Notes</a>。</p>

<p>現實生活中可以用軟體取代，又有實體形象的東西，要是放在 iPad 上，可以非常輕易的讓大家接受，而且使用方式就會跟真的一樣，非常非常酷。</p>

<h3>結論</h3>

<p>由 iPad 的特性，介面元素會變大、會簡化，但功能未必要縮簡；實體化的介面，更增加了操作的簡易性。這個方向、這個未來、這個可能性、我喜歡。</p>

<p>新時代來臨了。</p>

<p>我一再重複這句話並不只是因為我是 Apple 崇拜者<sup id="fnref:3"><a href="#fn:3" rel="footnote">3</a></sup>，而是因為介面設計基本邏輯將從此改變：昨天，我們為「滑鼠 + 鍵盤」設計介面，明天，我們將為「手指」設計介面。</p>

<div class="footnotes">
<hr />
<ol>

<li id="fn:1">
<p>UI, UE, UX&#8230;隨便你說，我就統稱為介面設計了，這樣比較單純。&#160;<a href="#fnref:1" rev="footnote">&#8617;</a></p>
</li>

<li id="fn:2">
<p>Apple 自己甚至將辦公室套裝軟體 iWork 搬上去了。&#160;<a href="#fnref:2" rev="footnote">&#8617;</a></p>
</li>

<li id="fn:3">
<p>我只欣賞、不崇拜&#8230;崇拜就表示你無法超越。&#160;<a href="#fnref:3" rev="footnote">&#8617;</a></p>
</li>

</ol>
</div>
]]></content:encoded>
			<wfw:commentRss>http://jiwostudio.com/archives/1942/feed</wfw:commentRss>
		</item>
		<item>
		<title>2010 新設計</title>
		<link>http://jiwostudio.com/archives/1840</link>
		<comments>http://jiwostudio.com/archives/1840#comments</comments>
		<pubDate>Sat, 09 Jan 2010 15:54:49 +0000</pubDate>
		<dc:creator>Leo</dc:creator>
		
		<category><![CDATA[Articles]]></category>

		<guid isPermaLink="false">http://jiwostudio.com/?p=1840</guid>
		<description><![CDATA[過了一年幾乎沒有寫文章的日子，是時候再度開始了，那麼久沒寫文章的主因是照相太好玩、再加上接案忙。

經過了將近半年的接案生活，Portfolio 多了好幾個項目，對於 freelance 是怎麼一回事總算也有點了解，今年我會減少接案數量，花點時間做自己的事。

透過 Twitter 更新

這個 blog 的運作型態基本上是模仿 Daring Fireball 的，它是我所知第一個將 RSS 透過 Twitter 發佈的網站；所以這次在設計新版面時，就順便把這個方式直接拿來用，也因為有了 blog 專用的 twitter 帳號，我就順便把留言功能關掉了，因為會讀這個 blog 的朋友應該都有 twitter，有什麼問題在 twitter 留言就好了，又快又方便。

本 Blog 對 IE6 支援

&#8230;個屁！我管你看到的是怎樣，用的瀏覽器越好，看到的網站越漂亮，這是 2010 年的新規則。不只是這個 blog，我今年開始對於客戶要求的 IE6 支援也一律拒絕，不是做不到、也不是錢太少，而是我他媽的打從心底就不想做。

你如果也是做網頁開發的人，也請停止支援 IE6，一邊罵 IE6，一邊又在客戶的壓力下寫 IE6 hack 真是太可憐了。(把 IE6 使用者全部導到這裡吧。)
]]></description>
			<content:encoded><![CDATA[<p>過了一年幾乎沒有寫文章的日子，是時候再度開始了，那麼久沒寫文章的主因是照相太好玩、再加上接案忙。</p>

<p>經過了將近半年的接案生活，<a href="http://jiwostudio.com/portfolio">Portfolio</a> 多了好幾個項目，對於 freelance 是怎麼一回事總算也有點了解，今年我會減少接案數量，花點時間做自己的事。</p>

<h3>透過 Twitter 更新</h3>

<p>這個 blog 的運作型態基本上是模仿 <a href="http://daringfireball.net">Daring Fireball</a> 的，它是我所知第一個將 RSS 透過 Twitter 發佈的網站；所以這次在設計新版面時，就順便把這個方式直接拿來用，也因為有了 blog 專用的 twitter 帳號，我就順便把留言功能關掉了，因為會讀這個 blog 的朋友應該都有 twitter，有什麼問題在 twitter 留言就好了，又快又方便。</p>

<h3>本 Blog 對 IE6 支援</h3>

<p>&#8230;個屁！我管你看到的是怎樣，用的瀏覽器越好，看到的網站越漂亮，這是 2010 年的新規則。不只是這個 blog，我今年開始對於客戶要求的 IE6 支援也一律拒絕，不是做不到、也不是錢太少，而是我他媽的打從心底就不想做。</p>

<p>你如果也是做網頁開發的人，也請停止支援 IE6，一邊罵 IE6，一邊又在客戶的壓力下寫 IE6 hack 真是太可憐了。(把 IE6 使用者<a href="http://helloie6.heroku.com">全部導到這裡</a>吧。)</p>
]]></content:encoded>
			<wfw:commentRss>http://jiwostudio.com/archives/1840/feed</wfw:commentRss>
		</item>
		<item>
		<title>Notes on Snow Leopard (Update 4)</title>
		<link>http://jiwostudio.com/archives/1688</link>
		<comments>http://jiwostudio.com/archives/1688#comments</comments>
		<pubDate>Mon, 31 Aug 2009 10:47:23 +0000</pubDate>
		<dc:creator>Leo</dc:creator>
		
		<category><![CDATA[Articles]]></category>

		<guid isPermaLink="false">http://jiwostudio.com/?p=1688</guid>
		<description><![CDATA[剛剛升級到 Snow Leopard，注意到一些小變化，官方網站大概都有把改進的地方列出來，但自己發現的比較有趣。

Update 4:


重新命名桌面上的檔案時會看到動畫效果&#8230;.。
現在從應用程式選擇「開啟檔案」時出現的 Finder 視窗支援 Quick Look 了。


Update 3:


啟動 Expose，按下 tab，可以單獨顯示某個應用程式的鎖有視窗，這個以前就有了，但下方的 dock 會亮起來，更加的清楚明瞭。另外，按著 dock 上的某個 icon 不放，也可以進入這個模式，非常棒。
Expose 模式下，如果你有縮小到 dock 的視窗，會在下方用一條橫線隔開顯示，點一下可以直接放大該視窗。以前縮到 dock 的視窗是無法透過 Expose 使用的。
還有一個新功能，在 Dock 的設定裡可以勾選「Minimize windows into application icon」，啟動他之後，縮小視窗不會跑到最右邊，而是直接縮小到該程式的 icon 上。


Update 2:


螢幕小鍵盤的外觀看起來非常業餘，字都糊掉了。




Update 1:


連線到無線網路時，icon 會有動畫。
使用 Safari 播放 Quicktime 檔案時，會出現帥氣的播放按鈕。




原文：


升級後顯示的顏色有些微的變化，由本來的 Gamma 1.8 調整為 2.2。我的螢幕顏色有用 Huey 校色過，Snow Leopard 比 Huey 調整過的顏色稍亮一點點，但差別不大。
如果你的 iChat 連絡人有兩個帳號（如 iChat 與 Jabber），iChat [...]]]></description>
			<content:encoded><![CDATA[<p>剛剛升級到 Snow Leopard，注意到一些小變化，官方網站大概都有把改進的地方列出來，但自己發現的比較有趣。</p>

<h3>Update 4:</h3>

<ul>
<li>重新命名桌面上的檔案時會看到動畫效果&#8230;.。</li>
<li>現在從應用程式選擇「開啟檔案」時出現的 Finder 視窗支援 Quick Look 了。</li>
</ul>

<h3>Update 3:</h3>

<ul>
<li><p>啟動 Expose，按下 tab，可以單獨顯示某個應用程式的鎖有視窗，這個以前就有了，但下方的 dock 會亮起來，更加的清楚明瞭。另外，按著 dock 上的某個 icon 不放，也可以進入這個模式，非常棒。</p></li>
<li><p>Expose 模式下，如果你有縮小到 dock 的視窗，會在下方用一條橫線隔開顯示，點一下可以直接放大該視窗。以前縮到 dock 的視窗是無法透過 Expose 使用的。</p></li>
<li><p>還有一個新功能，在 Dock 的設定裡可以勾選「Minimize windows into application icon」，啟動他之後，縮小視窗不會跑到最右邊，而是直接縮小到該程式的 icon 上。</p></li>
</ul>

<h3>Update 2:</h3>

<ul>
<li><p>螢幕小鍵盤的外觀看起來非常業餘，字都糊掉了。</p>

<p><img src="http://emberapp.com/leolin/images/screen-shot-2009-08-31-at-6-08-02-pm/sizes/m.png" title="Screen shot 2009-08-31 at 6.08.02 PM" /></p></li>
</ul>

<h3>Update 1:</h3>

<ul>
<li><p>連線到無線網路時，icon 會有動畫。</p></li>
<li><p>使用 Safari 播放 Quicktime 檔案時，會出現帥氣的播放按鈕。</p>

<p><img src="http://emberapp.com/leolin/images/safari-3/sizes/m.png" title="Safari" /></p></li>
</ul>

<h3>原文：</h3>

<ul>
<li><p>升級後顯示的顏色有些微的變化，由本來的 Gamma 1.8 調整為 2.2。我的螢幕顏色有用 Huey 校色過，Snow Leopard 比 Huey 調整過的顏色稍亮一點點，但差別不大。</p></li>
<li><p>如果你的 iChat 連絡人有兩個帳號（如 iChat 與 Jabber），iChat 會讓你選擇要用哪個帳號傳送訊息。</p></li>
<li><p>使用 Cmd + Space 切換輸入法時，按著 Cmd 不放，會出現輸入法的切換指示，此時再按空白鍵可以不斷切換輸入法。</p></li>
<li><p>桌面檔案重新排序時有動畫效果。</p></li>
<li><p>似乎所有程式都變快了，但 Microsoft Word 還是一樣慢，不知是否為心理作用。</p></li>
<li><p>漢音輸入法更名為「注音」，有變的更聰明的趨勢，但還是沒有 Yahoo! KeyKey 好用；另外，打錯時「刪除整字」的選項似乎消失了。</p></li>
<li><p>Quicktime X（應該是念做 Ten？）不相容於超級外掛 Perian，幸好 Snow Leopard 還會保留原來的 Quicktime 7。</p></li>
<li><p>Quicktime X 現在可以錄製 Screencast 了。</p></li>
<li><p>Quick Look 更強大，可以在 icon 上直接點左右箭頭切換頁面（這點有看 Keynote 的就會知道）我注意到其實是按下空白鍵後，Quick Look 視窗會顯示縮圖裡的那個頁面，也就是說，你在小 icon 裡切換到第 10 頁，放大的視窗也會顯示第 10 頁。</p></li>
<li><p>Finder 的偏好設定視窗過場動畫似乎多了 Fade-in，也可能只是我的錯覺。</p></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://jiwostudio.com/archives/1688/feed</wfw:commentRss>
		</item>
		<item>
		<title>iPhone 的 Tab bar 與 Toolbar</title>
		<link>http://jiwostudio.com/archives/1617</link>
		<comments>http://jiwostudio.com/archives/1617#comments</comments>
		<pubDate>Sun, 12 Jul 2009 08:53:05 +0000</pubDate>
		<dc:creator>Leo</dc:creator>
		
		<category><![CDATA[Articles]]></category>

		<guid isPermaLink="false">http://jiwostudio.com/?p=1617</guid>
		<description><![CDATA[嗯哼&#8230;。1

通常在 iPhone 軟體下方，你會看到兩種不同的按鈕列，且兩者無法共存：


黑底白 icon：可以在 iPod.app 和 Phone.app 上看到。
藍底白 icon：可以在 Mail.app 和 Safari.app 上看到。


這兩種按鈕列上面的圖案都是單純的符號，但是代表的意義不同。黑底的是 tab bar，用來切換軟體的不同畫面；藍底的是 toolbar，用來當按鈕發出指令。

Justin Wiliams 在 Die You Damn, Dirty Tab Bar 這篇文章裡提到：


  Rather than taking the easy way and slapping a tab bar at the bottom of your UI, put the extra effort into the design process to see if it [...]]]></description>
			<content:encoded><![CDATA[<p>嗯哼&#8230;。<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup></p>

<p>通常在 iPhone 軟體下方，你會看到兩種不同的按鈕列，且兩者無法共存：</p>

<ul>
<li>黑底白 icon：可以在 iPod.app 和 Phone.app 上看到。</li>
<li>藍底白 icon：可以在 Mail.app 和 Safari.app 上看到。</li>
</ul>

<p>這兩種按鈕列上面的圖案都是單純的符號，但是代表的意義不同。黑底的是 tab bar，用來切換軟體的不同畫面；藍底的是 toolbar，用來當按鈕發出指令。</p>

<p>Justin Wiliams 在 <a href="http://carpeaqua.com/2009/07/08/die-you-damn-dirty-tab-bar/">Die You Damn, Dirty Tab Bar</a> 這篇文章裡提到：</p>

<blockquote>
  <p>Rather than taking the easy way and slapping a tab bar at the bottom of your UI, put the extra effort into the design process to see if it is possible to do the application using a single navigation stack. In most cases, I think the answer is yes. It may be a bit more work up front, but as your application matures (if it matures), you’ll find that the extra usable space along the bottom of your view will be much appreciated.</p>
</blockquote>

<p>由於（標準的） tab bar 會永遠佔掉螢幕下方的空間，所以他認為開發者如果能不用到 tab bar，就盡量不用，未來要新增功能時，可以輕易在軟體下方添加新按鈕。</p>

<p>他以 App Store 為例（iTunes Store 亦同）：</p>

<p>App Store 裡的各種 tab 如 Featured, Categories, Top 25 都是針對商店內容的不同瀏覽方式，也就是當做 filter 來使用。同樣的商店內容，也可以擠在一起，變成像 iPod 階層式的瀏覽方式，這樣的作法在使用上也不會有任何問題。</p>

<p>階層式的安排，雖然在切換到不同瀏覽方式時，需要多點一下，但會釋出下方螢幕空間供更多功能使用；使用 tab bar，雖可以在各個模式間快速切換，但螢幕下方永遠都不能再放別的東西。</p>

<p>對照一下兩個 Twitter client：Tweetie<sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup> 和 Birdfeed<sup id="fnref:3"><a href="#fn:3" rel="footnote">3</a></sup> 更可以理解這兩種設計邏輯的差異。</p>

<p>左為 Tweetie，右為 Birdfeed。</p>

<p><img src='http://www.quicksnapper.com/files/1322/18608947874A58ACFE04725_m.png' title='Hosted by QuickSnapper.com' /></p>

<p>Tweetie 有黑色 tab bar，可以在各種頁面間切換。但是基本上這些不同頁面只是相同資料以不同 filter 呈現的結果而已，所以同樣的內容呈現也可以設計成 Birdfeed 這種形式：完全的階層式設計。</p>

<p>接下來，我隨便點一則訊息進入詳細畫面。</p>

<p><img src='http://www.quicksnapper.com/files/1322/15814118844A58AD7DE5060_m.png' title='Hosted by QuickSnapper.com' /></p>

<p>嗯&#8230;，你注意到以上兩個畫面奇妙的違和感了嗎？</p>

<p>Tweetie 下方的黑色 tab bar，竟然直接變成藍色工具列。</p>

<p>照理採用了 tab bar，應該要在任何畫面都顯示 tab bar，他提供的「快速切換」功能才有意義，但 Tweetie 這裡卻讓 tab bar 消失，以普通工具列取代。</p>

<p>再來看右方的 Birdfeed，點進 tweet 訊息的詳細畫面後，竟然沒有 toolbar 按鈕可用，設計者反而將按鈕變成內文的一個「欄位」：看起來是可以點進去下一層的「Reply, Favorite, Forward, Delete」等字樣，事實上被當成按鈕來用。</p>

<p>合理的設計方式應該是將兩個軟體的畫面互換，也就是說：</p>

<ul>
<li>Tweetie 的訊息畫面應該是採用右圖的方式，將按鈕安排成普通欄位的樣式，並且保留下方的黑色 tab bar。</li>
<li>Birdfeed 則應該使用左圖的藍色工具列，把按鈕擺在 toolbar 上。</li>
</ul>

<p>這樣一換，操作的感覺就會自然許多。</p>

<h3>互換後才是對的？</h3>

<p>為什麼這兩個很棒的 Twitter client 各自採用不合理的設計方式？為何兩者會形成「互換畫面才正確」的現象？</p>

<p>以我自己的經驗，也許可以稍稍回答這個問題。</p>

<p>在設計 UI 時，最困難（同時也最有趣）的是，設計者如何將各種抽象的行為具體化：即是將「行為」化為實際的「操作流程」。</p>

<p>當軟體的 UI 完成時，代表所有操作流程形成一個系統，在這個系統裡，在哪一個畫面可以做哪些事，是固定而且合乎邏輯的，只要達到這個目標，這個 UI 就幾乎算完工了。</p>

<p>仔細觀察 Tweetie 和 Birdfeed 的畫面，你會發現兩者在該畫面可以使用的功能其實是一模一樣的，只不過呈現方式不同。</p>

<p>對使用者來說，他們在這個畫面可以做哪些事非常清楚，所以功能不管是安排在 toolbar 或是跟內文放在一起，對使用者不太會造成影響。</p>

<p>回到之前的問題，Tweetie 為何會將本該永遠存在 tab bar 換成 toolbar？</p>

<p>只是單純沒有想到按鈕還可以用「內文欄位」的樣子呈現吧。他們發現空間不夠用了，但是又非要這些按鈕不可，只好把佔空間的 tab bar 換掉。這算是 Tweetie 的一個小瑕疵。</p>

<p>至於 Birdfeed，為什麼不在下面的空間裡放一個 toolbar？除了「設計者的堅持」外，我找不出別的理由，也許跟設計者個人美感有關。</p>

<h3>結論</h3>

<p>Justin 在文章中建議的：「不使用 tab bar，將下方空間留給未來利用」，正是現在 Birdfeed 採用的方式。</p>

<p>假設明天 Twitter API 多了一個可利用的功能，Birdfeed 也許只要加一個按鈕就能辦到，但 Tweetie （在不偷換工具列的前提下）就要多花點功夫。</p>

<div class="footnotes">
<hr />
<ol>

<li id="fn:1">
<p>這麼久沒寫文章的理由是 <a href="http://leica100.tumblr.com">Leica</a>，以後有機會再聊。&#160;<a href="#fnref:1" rev="footnote">&#8617;</a></p>
</li>

<li id="fn:2">
<p>Apple Design Award 2009&#160;<a href="#fnref:2" rev="footnote">&#8617;</a></p>
</li>

<li id="fn:3">
<p>Leo&#8217;s Favorite Twitter Client Award 2009&#160;<a href="#fnref:3" rev="footnote">&#8617;</a></p>
</li>

</ol>
</div>
]]></content:encoded>
			<wfw:commentRss>http://jiwostudio.com/archives/1617/feed</wfw:commentRss>
		</item>
		<item>
		<title>UI 魂 T 到貨了</title>
		<link>http://jiwostudio.com/archives/1412</link>
		<comments>http://jiwostudio.com/archives/1412#comments</comments>
		<pubDate>Thu, 07 May 2009 04:23:21 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Articles]]></category>

		<guid isPermaLink="false">http://jiwostudio.com/?p=1412</guid>
		<description><![CDATA[

臭氧先生訂購的衣服已經到了，經檢查後確認沒問題，收到地址後會寄出，如果收到以後太小件（我訂的是 M）會換 L 的給你。



氣味

衣物在印製過程中，染色原料在烘乾時會產生些許酸味，洗滌過一次味道便會完全消失。

洗滌方式

將衣物反面置入洗衣袋洗滌，水溫勿超過 60 度並且請勿用烘衣機烘乾。T shirt 洗後纖維會變成不整齊狀態，圖案顏色會呈現出略微變淡的感覺，並非掉色現象。

Thanks!

感謝您支持 UI 魂，遇到壞客戶被逼著做出以後不敢承認是自己做的爛設計的時候可以這樣說：


  就算我原諒你，鬼也不會原諒你的！（指指自己的 T shirt）


感謝 hlb 提供這句 slogan。
]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.flickr.com/photos/earnestpooky/3508794759/" title="UI 魂 T by 六念慢一點, on Flickr"><img src="http://farm4.static.flickr.com/3357/3508794759_38d1768087_m.jpg" width="240" height="158" alt="UI 魂 T" /></a></p>

<p>臭氧先生訂購的衣服已經到了，經檢查後確認沒問題，收到地址後會寄出，如果收到以後太小件（我訂的是 M）會換 L 的給你。</p>

<p><a href="http://www.flickr.com/photos/earnestpooky/3508794705/" title="UI 魂 T by 六念慢一點, on Flickr"><img src="http://farm4.static.flickr.com/3563/3508794705_8b450f2388.jpg" width="409" height="500" alt="UI 魂 T" /></a></p>

<h3>氣味</h3>

<p>衣物在印製過程中，染色原料在烘乾時會產生些許酸味，洗滌過一次味道便會完全消失。</p>

<h3>洗滌方式</h3>

<p>將衣物<strong>反面</strong>置入<strong>洗衣袋</strong>洗滌，水溫勿超過 60 度並且<strong>請勿用烘衣機烘乾</strong>。T shirt 洗後纖維會變成不整齊狀態，圖案顏色會呈現出略微變淡的感覺，並非掉色現象。</p>

<h3>Thanks!</h3>

<p>感謝您支持 UI 魂，遇到壞客戶被逼著做出以後不敢承認是自己做的爛設計的時候可以這樣說：</p>

<blockquote>
  <p>就算我原諒你，鬼也不會原諒你的！（指指自己的 T shirt）</p>
</blockquote>

<p>感謝 <a href="http://iamhlb.com">hlb</a> 提供這句 slogan。</p>
]]></content:encoded>
			<wfw:commentRss>http://jiwostudio.com/archives/1412/feed</wfw:commentRss>
		</item>
		<item>
		<title>UI 魂特賣</title>
		<link>http://jiwostudio.com/archives/1299</link>
		<comments>http://jiwostudio.com/archives/1299#comments</comments>
		<pubDate>Tue, 21 Apr 2009 10:53:44 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Articles]]></category>

		<guid isPermaLink="false">http://jiwostudio.com/?p=1299</guid>
		<description><![CDATA[「設計師」與「客戶」間的相處一直是個重要的課題，一個優秀的設計師必定擁有和客戶溝通的一套獨特方式。

很多設計師沒有找到溝通的方式，他們的熱情在外行人意見的轟炸下逐漸消逝，一次次的妥協造就無趣的成品，最後失去自己的靈魂。

在某大公司不到半年，我的靈魂已經在生死關頭徘徊無數次，雖然說賽亞人瀕臨死亡後實力會提昇，但是不小心就死掉的案例也是有的&#8230;，既然隨時都有掛點的可能，不如趁我的 UI 魂還在的時候用他賺點小錢吧！



我的 UI 魂價值 700 萬1，把它切成一千分來賣的話，每一份價值 7000 元，但經濟不景氣打折，每份只要 70 塊就夠了。

要怎麼賣 UI 魂呢？把它印在 T-shirt 上就好了，每件定價是：


  $550（T-shirt 製作） + $70（UI 魂）+ $80（運費）= $700


沒錯，只要 $700 就可以獲得一件 UI 魂 T，而且還擁有自己的專屬編號！

001 號

已售出。

002 號



003 號



1 號 T 已經賣掉了，所以現在要賣的是 2 和 3 號，反應好的話2（賣掉兩件的意思），會 unlock 4 號「嘔吐 UI 魂」與 5 號「UI 鬼」。



該說的都說了，快買吧！直接留言說要買哪一號就好了！






可能會慢慢降價。&#160;&#8617;



發票會順手幫你捐出去。&#160;&#8617;




]]></description>
			<content:encoded><![CDATA[<p>「設計師」與「客戶」間的相處一直是個重要的課題，一個優秀的設計師必定擁有和客戶溝通的一套獨特方式。</p>

<p>很多設計師沒有找到溝通的方式，他們的熱情在外行人意見的轟炸下逐漸消逝，一次次的妥協造就無趣的成品，最後失去自己的靈魂。</p>

<p>在某大公司不到半年，我的靈魂已經在生死關頭徘徊無數次，雖然說賽亞人瀕臨死亡後實力會提昇，但是<a href="http://images.google.com/images?hl=en&amp;client=safari&amp;rls=en-us&amp;q=那霸%20賽亞人&amp;um=1&amp;ie=UTF-8&amp;sa=N&amp;tab=wi">不小心就死掉</a>的案例也是有的&#8230;，既然隨時都有掛點的可能，不如趁我的 UI 魂還在的時候用他賺點小錢吧！</p>

<p><img src="http://jiwostudio.com/wp-content/uploads/2009/04/forsaleex.png" alt="forsaleex.png" border="0" width="548" height="400" /></p>

<p>我的 UI 魂價值 700 萬<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>，把它切成一千分來賣的話，每一份價值 7000 元，但經濟不景氣打折，每份只要 70 塊就夠了。</p>

<p>要怎麼賣 UI 魂呢？把它印在 T-shirt 上就好了，每件定價是：</p>

<blockquote>
  <p>$550（T-shirt 製作） + $70（UI 魂）+ $80（運費）= $700</p>
</blockquote>

<p>沒錯，只要 $700 就可以獲得一件 UI 魂 T，而且還擁有自己的專屬編號！</p>

<h3>001 號</h3>

<p>已售出。</p>

<h3>002 號</h3>

<p><a href="http://www.flickr.com/photos/37981405@N00/3462540252" title="View 'UI 魂 T 002' on Flickr.com"><img src="http://farm4.static.flickr.com/3482/3462540252_3a8b711b71.jpg" alt="UI 魂 T 002" border="0" width="500" height="410" /></a></p>

<h3>003 號</h3>

<p><a href="http://www.flickr.com/photos/37981405@N00/3462540032" title="View 'UI 魂 T 003' on Flickr.com"><img src="http://farm4.static.flickr.com/3537/3462540032_ca37f22c53.jpg" alt="UI 魂 T 003" border="0" width="500" height="410" /></a></p>

<p>1 號 T 已經賣掉了，所以現在要賣的是 2 和 3 號，反應好的話<sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup>（賣掉兩件的意思），會 unlock 4 號「嘔吐 UI 魂」與 5 號「UI 鬼」。</p>

<p><img src="http://jiwostudio.com/wp-content/uploads/2009/04/tt.png" alt="tt.png" border="0" width="550" height="400" /></p>

<p>該說的都說了，快買吧！直接留言說要買哪一號就好了！</p>

<div class="footnotes">
<hr />
<ol>

<li id="fn:1">
<p>可能會慢慢降價。&#160;<a href="#fnref:1" rev="footnote">&#8617;</a></p>
</li>

<li id="fn:2">
<p>發票會順手幫你捐出去。&#160;<a href="#fnref:2" rev="footnote">&#8617;</a></p>
</li>

</ol>
</div>
]]></content:encoded>
			<wfw:commentRss>http://jiwostudio.com/archives/1299/feed</wfw:commentRss>
		</item>
		<item>
		<title>JIWO CALENDAR</title>
		<link>http://jiwostudio.com/archives/1255</link>
		<comments>http://jiwostudio.com/archives/1255#comments</comments>
		<pubDate>Fri, 17 Apr 2009 07:09:38 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Articles]]></category>

		<guid isPermaLink="false">http://jiwostudio.com/?p=1255</guid>
		<description><![CDATA[最近在做一個跟行事曆有關的專案，不知不覺就做出一個 icon，乾脆把他公布出來給大家用。



Icon 有三種 size：超巨大、中、小。要用在那裡都沒關係，有用的話說是我做的就好了。

使用方式

要更改 icon 必須要用繪圖軟體，如果你用 Fireworks，可以下載原始檔；如果用 Fireworks 以外的軟體，請直接下載 png 檔案。


下載 Fireworks 原始檔（修正）
下載 PNG 檔案


我把 icon 的各部位拆散了，你必須在繪圖軟體裡自己組合，每一個檔案夾裡都有附上 sample.png 供你參考。

Icon 裡用到的字型是 Aller，可以免費下載；當然你也可以用自己電腦裡原有的字型。

如果要改變顏色，請改變檔案夾裡 top.png 的 Hue/Saturation 數值，應該所有繪圖軟體都可以辦到。

Update: 修正了檔案內容，請重新下載 Fireworks 原始檔。
]]></description>
			<content:encoded><![CDATA[<p>最近在做一個跟行事曆有關的專案，不知不覺就做出一個 icon，乾脆把他公布出來給大家用。</p>

<p><img class="noborder" src="http://jiwostudio.com/wp-content/uploads/2009/04/make-calendars1.png" alt="make calendars.png" border="0" width="478" height="315" /></p>

<p>Icon 有三種 size：超巨大、中、小。要用在那裡都沒關係，有用的話說是我做的就好了。</p>

<h3>使用方式</h3>

<p>要更改 icon 必須要用繪圖軟體，如果你用 Fireworks，可以下載原始檔；如果用 Fireworks 以外的軟體，請直接下載 png 檔案。</p>

<ul>
<li><a href="http://jiwostudio.com/wp-content/uploads/2009/04/jiwo-calendarpng1.zip" title="jiwo-calendar.png.zip">下載 Fireworks 原始檔（修正）</a></li>
<li><a href="http://jiwostudio.com/wp-content/uploads/2009/04/calendar-icons.zip" title="calendar icons.zip">下載 PNG 檔案</a></li>
</ul>

<p>我把 icon 的各部位拆散了，你必須在繪圖軟體裡自己組合，每一個檔案夾裡都有附上 sample.png 供你參考。</p>

<p>Icon 裡用到的字型是 <a href="http://www.smashingmagazine.com/2008/11/24/15-beautiful-high-quality-free-fonts/">Aller</a>，可以免費下載；當然你也可以用自己電腦裡原有的字型。</p>

<p>如果要改變顏色，請改變檔案夾裡 top.png 的 Hue/Saturation 數值，應該所有繪圖軟體都可以辦到。</p>

<p>Update: 修正了檔案內容，請重新下載 Fireworks 原始檔。</p>
]]></content:encoded>
			<wfw:commentRss>http://jiwostudio.com/archives/1255/feed</wfw:commentRss>
		</item>
		<item>
		<title>The Hit List UI 觀察</title>
		<link>http://jiwostudio.com/archives/1139</link>
		<comments>http://jiwostudio.com/archives/1139#comments</comments>
		<pubDate>Sun, 05 Apr 2009 16:17:37 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Articles]]></category>

		<guid isPermaLink="false">http://jiwostudio.com/?p=1139</guid>
		<description><![CDATA[自從 Things 在 beta 階段時我就開始用它，到現在快一年了。它是一個非常棒的軟體，常被拿來和 OmniFocus 做比較；兩者的設計都是遵循 Getting Things Done 的原則。

雖然兩者都是為了幫助使用者執行 GTD 而設計的軟體，但並不是每個使用者都有時間去讀 David Allen 兩百多頁的書1；就算讀完書，也並不一定會照書本嚴格執行，而是會將書中的方式自行修調整為適合自己的方式，因此任務管理軟體如果能夠具備適應其他使用方式的彈性，可以接觸到更多的使用者。

OmniFocus 和 Things 都聲稱自己的軟體功能強大且具彈性，可以適用各種使用方式，然而對從未接觸過 GTD 的使用者來說，Things 的「彈性」比 OmniFocus 還大。因為它的介面較簡潔2，且 sidebar 功能較單純，和其他 Mac 軟體的邏輯符合，整體而言沒有 OmniFocus 那麼「硬派」；此外、兩者的定價也反映出市場定位的不同：Things $49 / 約台幣  $1600； OmniFocus $79 約台幣 $2700。

最近新推出的 The Hit List 也是遵循 GTD 邏輯的任務管理軟體，和 Things 一樣有著簡單乾淨的介面，連定價也一樣，但是在使用的友善程度上甚至超越了 Things。

53 x 26 px 造成的差異

這是兩個軟體的 sidebar 對照，左邊是 Things，右邊是 [...]]]></description>
			<content:encoded><![CDATA[<p>自從 <a href="http://culturedcode.com/things/">Things</a> 在 beta 階段時我就開始用它，到現在快一年了。它是一個非常棒的軟體，常被拿來和 <a href="http://www.omnigroup.com/applications/omnifocus/">OmniFocus</a> 做比較；兩者的設計都是遵循 <a href="http://en.wikipedia.org/wiki/Getting_Things_Done">Getting Things Done</a> 的原則。</p>

<p>雖然兩者都是為了幫助使用者執行 GTD 而設計的軟體，但並不是每個使用者都有時間去讀 <a href="http://www.books.com.tw/exep/prod/booksfile.php?item=0010205787">David Allen 兩百多頁的書</a><sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>；就算讀完書，也並不一定會照書本嚴格執行，而是會將書中的方式自行修調整為適合自己的方式，因此任務管理軟體如果能夠具備適應其他使用方式的彈性，可以接觸到更多的使用者。</p>

<p>OmniFocus 和 Things 都聲稱自己的軟體功能強大且具彈性，可以適用各種使用方式，然而對從未接觸過 GTD 的使用者來說，Things 的「彈性」比 OmniFocus 還大。因為它的介面較簡潔<sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup>，且 sidebar 功能較單純，和其他 Mac 軟體的邏輯符合，整體而言沒有 OmniFocus 那麼「硬派」；此外、兩者的定價也反映出市場定位的不同：Things $49 / 約台幣  $1600； OmniFocus $79 約台幣 $2700。</p>

<p>最近新推出的 <a href="http://www.potionfactory.com/thehitlist/">The Hit List</a> 也是遵循 GTD 邏輯的任務管理軟體，和 Things 一樣有著簡單乾淨的介面，連定價也一樣，但是在使用的友善程度上甚至超越了 Things。</p>

<h3>53 x 26 px 造成的差異</h3>

<p>這是兩個軟體的 sidebar 對照，左邊是 Things，右邊是 The Hit List。</p>

<p><img src="http://farm4.static.flickr.com/3458/3400731874_f38a1f6164.jpg" alt="" /></p>

<p>Thing 由上到下依序是：</p>

<ol>
<li>Inbox</li>
<li>Focus</li>
<li>Projects</li>
<li>Areas</li>
</ol>

<p>The Hit List 由上到下依序是：</p>

<ol>
<li>Inbox</li>
<li>Hit Lists</li>
<li>Folders</li>
</ol>

<p>前三個區塊功能雷同，但 Things 多了一個 Areas 區塊，。</p>

<p>GTD 的邏輯是要使用者把所有待辦事項記在 Inbox 裡，然後將這些項目依 Projects 和 Context（即 Things 的 Area）分類，再依照時間、地點、或是專案類別來選擇當下要進行的工作。</p>

<p>從 sidebar 內容的排列方式就可以看出 Things 的 Areas 區塊完全符合 GTD 的使用邏輯。</p>

<p>相較於 Things，The Hit List 的 sidebar 裡並沒有 Context / Areas 這個區塊。但沒有該區塊並不代表 The Hit List 少了這個功能，而是設計者 <a href="http://www.potionfactory.com/about/">Andy Kim</a> 用不同的介面來達到同樣的效果。</p>

<p>取代 Context / Areas 功能的是在藍色 sidebar 上方的這個區塊：</p>

<p><img src="http://farm4.static.flickr.com/3621/3400638781_e47b61d239_o.jpg" alt="53 x 26 px 的差異" border="0" width="75" height="40" /></p>

<p>寬 53px ，高 26px ，但它卻是 The Hit List 和 Things 兩個軟體設計理念的分界點。</p>

<p>按下右方的 tag 圖示之後，會看到 tag 列表。</p>

<p><img src="http://farm4.static.flickr.com/3313/3409297760_8017caf3a2_o.jpg" alt="" /></p>

<p>如果你不懂 GTD，看到的的只是三個 tag；但如果你是 GTD 使用者，馬上就會知道前面加 「<strong>@</strong>」 符號的 tag 在 GTD 裡代表的就是 Context / Area 區塊。</p>

<p>這樣設計是希望讓不懂 GTD 的人輕鬆的使用，畢竟一般的使用者不會去將待辦事項依照「地區」做分類，tag 功能就足以滿足大部分人的需求，因此 Context 這個區塊可以擺到裡面一點；但這樣的作法也沒有犧牲 GTD 使用者所需的功能，稍後會再提到。</p>

<p>從這個設計，就可以察覺 Andy Kim 是「以一般使用者為中心，但進階 GTD 使用者也可以用」的想法來設計。</p>

<p>相較之下，Things/OmniFocus 的理念則是「以進階使用者為中心，但一般使用者也可以用」。</p>

<h3>天才都在細節裡之一：Context + tag</h3>

<p>The Hit List 在整體設計上都以一般使用者為中心。</p>

<p>例如，The Hit List 將 GTD 裡 Context 和 tag 的概念融合在一起。</p>

<p>在 GTD 的邏輯中，每一個待辦事項都要有所屬的區域（如辦公室、家中、銀行&#8230;），這樣使用者就可以集中精神處理在該區域所能辦的事。</p>

<p>在增加一個事項時，使用者可以為該事項加上 tag 或 context tag。</p>

<p><img src="http://farm4.static.flickr.com/3648/3414810242_2eac486bfd_o.jpg" alt="Untitled" border="0" width="212" height="78" /></p>

<p>一般使用者不會明白 tag 和 context tag 有什麼不同，但是並不影響到他使用，因為 tag 是一個能夠彈性管理資料的方式，可以適用於任何情況；但是 GTD 使用者則可以併用 tag 與 context tag，又因為兩者都是在同一個介面裡出現，所以用起來非常的方便。</p>

<p>將 context 和 tag 融合的設計不但直覺，也同時適用於一般使用者與 GTD 使用者，但前面提到的三套軟體中，只有 The Hit List 是這樣設計；Things 的 tag 和 context 是分開的，而 OmniFocus 根本沒有 tag 功能。</p>

<h3>天才都在細節裡之二：命名方式</h3>

<p>考慮到沒接觸過 GTD 使用者，軟體功能的命名就要平易近人，不能拿 GTD 中的專有名詞來嚇人。</p>

<p>之前提過的 context，在 The Hit List 中叫做 tag 就是這個道理。</p>

<p>此外，一般使用者也不見得會有 「project」在進行，所以 project 在 The Hit List 中只是單純的「folders」。</p>

<p><img src="http://farm4.static.flickr.com/3370/3414882302_91e938b0ce_o.jpg" alt="Untitled" border="0" width="351" height="194" /></p>

<p>將 project 變成 folder 不只簡明，還增加了使用上的彈性，例如，每一個 list 都可以有自己的目錄，而目錄底下還可以有更多目錄。此外，進階使用者也可以直接將目錄拿來當 Context 來用，只要將他的名稱命名為 「@Office」 或是直接是「Office」即可。</p>

<p>命名的方式也顯示出設計者的思考方向，同樣的 Context，在 The Hit List 裡叫做 「tag」，非常的清楚；在 Things 裡叫 「Areas」，不懂 GTD 的人也能明白。</p>

<p>你猜猜在 OmniFocus 裡怎麼命名 context？</p>

<p><img src="http://farm4.static.flickr.com/3337/3414114237_b50de69497_m.jpg" alt="" /></p>

<h3>天才就在細節裡之三：以鍵盤為中心的操作方式</h3>

<p>如果你還沒試過一個以鍵盤為中心設計的任務管理軟體，那麼你不會了解 The Hit List 是多麼好用。</p>

<p>OmniFocus 和 Things 都為常用功能安排了快速鍵以增加使用的方便性，但 The Hit List 則是根本把鍵盤輸入當成主要的使用方式。</p>

<p>雖然使用快速鍵很方便，但為了不讓使用者去記憶這麼多排列組合，Andy Kim 將最常用的快速鍵放在下方，以 Hints 的方式呈現，會隨著目前介面的不同而顯示不同的提示。</p>

<p>The Hit List 的使用者可以用滑鼠去點這些「按鈕」，也可以直接按照軟體的提示使用鍵盤輸入。</p>

<p><img src="http://farm4.static.flickr.com/3578/3414154689_aff9c65ca7_o.jpg" alt="Untitled" border="0" width="392" height="79" /></p>

<p>Andy Kim 在純鍵盤輸入上下了很大的功夫，要輸入下圖這樣的待辦事項時，手根本不用離開鍵盤。</p>

<p>一般的日期輸入都會用到滑鼠，但在 The Hit List 裡只要打打字就好了，例如 tomorrow、next week、april 4 等<sup id="fnref:3"><a href="#fn:3" rel="footnote">3</a></sup>。</p>

<p><img src="http://farm4.static.flickr.com/3362/3414987436_4829f42f71_o.jpg" alt="Untitled" border="0" width="445" height="223" /></p>

<p>以鍵盤為主要輸入方式的另一個好處，就是輸入待辦事項的介面可以更加的精簡 — 精簡到根本沒有介面<sup id="fnref:4"><a href="#fn:4" rel="footnote">4</a></sup>。</p>

<p><img src="http://farm4.static.flickr.com/3344/3414235617_4259e0cb1a_o.jpg" alt="Untitled" border="0" width="251" height="52" /></p>

<h3>天才就在細節裡之四：第一次啟動的畫面</h3>

<p>這點你要親自去下載 The Hit List 才能理解，這邊就不提了。</p>

<h3>總結</h3>

<p>Less is more.</p>

<p>但這個 Less 不是指功能上的 less，而是透過功能性的 more 才有可能達到介面上的 less。如果 UI design 也有教科書，The Hit List 應該要列入標準教材。</p>

<p>喔對了，請務必在待辦事項裡輸入「玩 Super Mario Bros」和「打敗 Darth Vader」試試。</p>

<div class="footnotes">
<hr />
<ol>

<li id="fn:1">
<p>我也就只是在網路上念念相關文章而已。還有那個爛封面是誰設計的？看了就不想買。&#160;<a href="#fnref:1" rev="footnote">&#8617;</a></p>
</li>

<li id="fn:2">
<p><a href="http://en.wikipedia.org/wiki/Hick's_law">Hick&#8217;s Law</a>:當選項增加時，下決定的時間也增加；介面越複雜越難學會。&#160;<a href="#fnref:2" rev="footnote">&#8617;</a></p>
</li>

<li id="fn:3">
<p>請參照 Andy Kim 的文章：<a href="http://www.potionfactory.com/blog/2009/03/10/better-software-through-less-ui">Better Software Through Less UI</a>，與 CulturedCode 的 <a href="http://culturedcode.com/things/blog/2008/02/habemus-dialogum-we-have-a-dialog.html">Habemus Dialogum - We Have a Dialog</a>。不同的設計理念，同樣的追求極致。&#160;<a href="#fnref:3" rev="footnote">&#8617;</a></p>
</li>

<li id="fn:4">
<p>沒有 UI 的 UI 嗎&#8230;？Andy Kim，你贏了。&#160;<a href="#fnref:4" rev="footnote">&#8617;</a></p>
</li>

</ol>
</div>
]]></content:encoded>
			<wfw:commentRss>http://jiwostudio.com/archives/1139/feed</wfw:commentRss>
		</item>
		<item>
		<title>「H, HLB」 出貨了</title>
		<link>http://jiwostudio.com/archives/1118</link>
		<comments>http://jiwostudio.com/archives/1118#comments</comments>
		<pubDate>Fri, 27 Mar 2009 11:30:22 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Articles]]></category>

		<guid isPermaLink="false">http://jiwostudio.com/?p=1118</guid>
		<description><![CDATA[HLB 訂購的 icon 今天出貨了。不要害怕&#8230;這個只是 prototype。



這個才是真的，還贈送小丁。



「H，HLB」是新的 slogan，以後有人問他名字，他都要學 James Bond 這樣回答。

另一個 slogan 是「頭文字 H」，也不賴。

從此以後，再也不會有人抱怨跟你聊天時，「卻要看著那隻戴紅色帽子的怪方塊~」這種話了，恭喜您！

H, HLB 的製作過程非常艱辛，請看下圖左上角有一個原來的 icon，中間有一個真人照片，要把他們兩者的特色融合起來，但是又要看的出特徵真是很難。

最後做出的 icon 算是半人半布丁。

小丁頭上戴的是嬰兒帽，穿的是嬰兒服裝：HLB 穿的是襯衫，頭上戴的是 beanie 帽。


]]></description>
			<content:encoded><![CDATA[<p>HLB 訂購的 icon 今天出貨了。不要害怕&#8230;這個只是 prototype。</p>

<p><a href="http://www.flickr.com/photos/37981405@N00/3364950934" title="View 'H, HLB' on Flickr.com"><img src="http://farm4.static.flickr.com/3448/3364950934_91b81faf20_m.jpg" alt="H, HLB" border="0" width="240" height="230" /></a></p>

<p>這個才是真的，還贈送小丁。</p>

<p><a href="http://www.flickr.com/photos/37981405@N00/3389800388" title="View 'HLB WALL' on Flickr.com"><img src="http://static.flickr.com/3656/3389800388_0c543e100f.jpg" alt="HLB WALL" border="0" width="" height="" /></a></p>

<p>「H，HLB」是新的 slogan，以後有人問他名字，他都要學 James Bond 這樣回答。</p>

<p>另一個 slogan 是「頭文字 H」，也不賴。</p>

<p>從此以後，再也不會有人抱怨跟你聊天時，「卻要看著那隻戴紅色帽子的怪方塊~」這種話了，恭喜您！</p>

<p>H, HLB 的製作過程非常艱辛，請看下圖左上角有一個原來的 icon，中間有一個真人照片，要把他們兩者的特色融合起來，但是又要看的出特徵真是很難。</p>

<p>最後做出的 icon 算是半人半布丁。</p>

<p>小丁頭上戴的是嬰兒帽，穿的是嬰兒服裝：HLB 穿的是襯衫，頭上戴的是 <a href="http://en.wikipedia.org/wiki/Beanie">beanie 帽</a>。</p>

<p><a href="http://www.flickr.com/photos/37981405@N00/3389800386" title="View 'The Make of HLB' on Flickr.com"><img src="http://farm4.static.flickr.com/3610/3389800386_5c1bcb7025_b.jpg" alt="The Make of HLB" border="0" width="455" height="1024" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://jiwostudio.com/archives/1118/feed</wfw:commentRss>
		</item>
		<item>
		<title>設計 vs. 美工</title>
		<link>http://jiwostudio.com/archives/1091</link>
		<comments>http://jiwostudio.com/archives/1091#comments</comments>
		<pubDate>Wed, 25 Mar 2009 08:39:34 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Articles]]></category>

		<guid isPermaLink="false">http://jiwostudio.com/?p=1091</guid>
		<description><![CDATA[從 1 月 1 日開始上班的這段時間，每天都面臨不斷的衝突與掙扎。

我的同事在工作態度與溝通能力上無可挑剔，這些衝突完全來自於對「設計」的認知差異，而這個差異就是讓人痛苦的主因。



#1 人客，你想去哪兒？

理想中的設計師對客戶關係是這樣：設計師像計程車司機，客戶像乘客。乘客上車，只要告訴司機他想去那兒就行了，不必告訴司機「怎麼走」。

客戶給的每一個指示，都是在限制設計師的可能性。

有的時候司機可以拒載，有的時候乘客可以拒乘，但更多時候司機為了錢總會被逼著在尖峰時刻開上市民大道跟大家一起塞。

如果你不信任我，那就不要上車。

#2 大家的意見一樣重要，所以來投票吧

有時候討論會進行到無關緊要的細節上，例如開始討論起配色與 icon 樣式，或是爭論哪種流程對使用者比較好。

設計網站的介面或流程時，並沒有一個絕對最好的方式，只要該介面和流程有內在的邏輯，使用者就可以很輕鬆的「學會」操作。

每個人習慣的操作方式都不同，所以各自會有不同的操作邏輯，如果為了所有人加入了這些多餘的邏輯，設計出來的成品就會混亂。

照設計師的意思來做，可以滿足操作邏輯和該設計師相似的群眾；照大家的意思來做，不會滿足任何群眾。

#3 美工先生，請幫我設計網站（揪咪！）

Steve Jobs:


  Most people make the mistake of thinking design is what it looks like. People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what [...]]]></description>
			<content:encoded><![CDATA[<p>從 1 月 1 日開始上班的這段時間，每天都面臨不斷的衝突與掙扎。</p>

<p>我的同事在工作態度與溝通能力上無可挑剔，這些衝突完全來自於對「設計」的認知差異，而這個差異就是讓人痛苦的主因。</p>

<p><a href="http://www.flickr.com/photos/37981405@N00/3383946495" title="View 'Leo Lin: Art Slave' on Flickr.com"><img src="http://farm4.static.flickr.com/3576/3383946495_70101820a6_m.jpg" alt="Leo Lin: Art Slave" border="0" width="240" height="180" /></a></p>

<h3>#1 人客，你想去哪兒？</h3>

<p>理想中的設計師對客戶關係是這樣：設計師像計程車司機，客戶像乘客。乘客上車，只要告訴司機他想去那兒就行了，不必告訴司機「怎麼走」。</p>

<p>客戶給的每一個指示，都是在限制設計師的可能性。</p>

<p>有的時候司機可以拒載，有的時候乘客可以拒乘，但更多時候司機為了錢總會被逼著在尖峰時刻開上市民大道跟大家一起塞。</p>

<p>如果你不信任我，那就不要上車。</p>

<h3>#2 大家的意見一樣重要，所以來投票吧</h3>

<p>有時候討論會進行到無關緊要的細節上，例如開始討論起配色與 icon 樣式，或是爭論哪種流程對使用者比較好。</p>

<p>設計網站的介面或流程時，並沒有一個絕對最好的方式，只要該介面和流程有內在的邏輯，使用者就可以很輕鬆的「學會」操作。</p>

<p>每個人習慣的操作方式都不同，所以各自會有不同的操作邏輯，如果為了所有人加入了這些多餘的邏輯，設計出來的成品就會混亂。</p>

<p>照設計師的意思來做，可以滿足操作邏輯和該設計師相似的群眾；照大家的意思來做，不會滿足任何群眾。</p>

<h3>#3 美工先生，請幫我設計網站（揪咪！）</h3>

<p>Steve Jobs:</p>

<blockquote>
  <p>Most people make the mistake of thinking design is what it looks like. People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.</p>
</blockquote>

<p>對我來說，真正的設計是完全了解市場與客戶需求後做出的整體規劃，網站只是整體設計的一部分，但想做這種大設計，只有自己開公司才辦的到。</p>

<p>另一種常會跟設計搞混的叫做「美工」，美工就是沒有太多自主權，位置不要管，流程不要管，專注外觀就好了。</p>

<p>美工或設計沒有高低之分，只不過工作內容與定位不同而已；但麻煩的是有很多人會把設計誤會成美工，或是把美工誤會成設計。所以當有人請美工小哥<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>設計網站時，我都會很開心的接下，然後開完第一次會議後哭著回家<sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup>。</p>

<p>如果你只是想找美工，請不要叫我設計師。</p>

<div class="footnotes">
<hr />
<ol>

<li id="fn:1">
<p>本人職稱。&#160;<a href="#fnref:1" rev="footnote">&#8617;</a></p>
</li>

<li id="fn:2">
<p>誇飾法。&#160;<a href="#fnref:2" rev="footnote">&#8617;</a></p>
</li>

</ol>
</div>
]]></content:encoded>
			<wfw:commentRss>http://jiwostudio.com/archives/1091/feed</wfw:commentRss>
		</item>
	</channel>
</rss>
