<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/main.xsl"?>
<b:blog xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://blog.othree.net"  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://blog.othree.net http://blog.othree.net/blooog.xsd">
	<b:blogTitle>O3noBLOG</b:blogTitle>
	<b:blogDescription></b:blogDescription>
	<b:entries>
		<b:entriesMeta>
			<b:listType>s</b:listType>
			<b:listData listID="000558" baseName="mockups">Mockups</b:listData>

			<b:previous>
				<b:mTitle>Barcamp Taipei</b:mTitle>
				<b:mDate>2008/12/10</b:mDate>
				<b:mBase>barcamp_taipei</b:mBase>
			</b:previous>


			<b:next>
				<b:mTitle>Everything You Know About CSS Is Wrong 書評</b:mTitle>
				<b:mDate>2008/12/18</b:mDate>
				<b:mBase>csswrong</b:mBase>
			</b:next>

		</b:entriesMeta>
		<b:entry entryID="000558" baseName="mockups">
			<b:author>
				<b:authorName>othree</b:authorName>
				<b:authorEmail>othree@gmail.com</b:authorEmail>
				<b:authorUrl></b:authorUrl>
			</b:author>
			<b:datetime>
				<b:date>2008-12-13</b:date>
				<b:time>20:19:17</b:time>
			</b:datetime>
			<b:category>software</b:category>

			<b:CommentsAccepted>1</b:CommentsAccepted>



			<b:PingsAccepted>1</b:PingsAccepted>


			<b:title>Mockups</b:title>
			<b:content>
				<b:summary>Balsamiq Mockups 是一款用 AIR 寫的設計使用者介面的 mockup 軟體，不知道 mockup 是什麼的可以參考前陣子 HappyDesigner Meetup 4 hlb 的投影片，也有影片在 vimeo 上，我蠻早就有知道有這款軟體，而且一直都很喜歡它的手繪風格，不過那時沒什麼需求，所以沒深入研究。 後來發現到它有免費提供的幾個方法（包括寫篇 blog 介紹），剛好當時準備 HDM4 時有需要畫個幾張常見網頁 layout 的圖示，本來還想像男子漢用 HTML + CSS 來寫，後來就決定申請一個授權來畫這幾張圖片，使用的心得還可以拿來發一篇 blog，實在是一舉兩得啊～～。...</b:summary>
				<b:mainContent><p><a href="http://www.balsamiq.com/products/mockups/desktop">Balsamiq Mockups</a> 是一款用 <span class="caps">AIR </span>寫的設計使用者介面的 mockup 軟體，不知道 mockup 是什麼的可以參考前陣子 <a href="http://sites.google.com/a/happydesigner.org/happydesigner-meetup/happydesigner-meetup-no-4">HappyDesigner Meetup 4</a> hlb 的<a href="http://www.slideshare.net/hlb/wireframe-mockup-prototype-presentation">投影片</a>，也有<a href="http://vimeo.com/2286637">影片</a>在 vimeo 上，我蠻早就有知道有這款軟體，而且一直都很喜歡它的手繪風格，不過那時沒什麼需求，所以沒深入研究。</p>

<p>後來發現到它有免費提供的幾個方法（包括寫篇 blog 介紹），剛好當時準備 <span class="caps">HDM4 </span>時有需要畫個幾張常見網頁 layout 的圖示，本來還想像男子漢用 <span class="caps">HTML </span>+ <span class="caps">CSS </span>來寫，後來就決定申請一個授權來畫這幾張圖片，使用的心得還可以拿來發一篇 blog，實在是一舉兩得啊～～。</p></b:mainContent>
				<b:extendContent><p><a href="http://www.flickr.com/photos/othree/3078255391/" title="Flickr 上 othree 的 手繪 Mockups"><img src="http://farm4.static.flickr.com/3015/3078255391_0fe51c3182.jpg" width="500" height="375" alt="手繪 Mockups" /></a></p>

<p>雖然還沒持續很久，不過現在我做網站的步驟大概是先用紙筆畫 mockup ，然後就進入實作階段，以前的話我是條硬漢，直接寫 <span class="caps">HTML </span>+ <span class="caps">CSS</span>，不過現在我已經沒辦法這樣做了，會不知道要寫什麼，基本上是大腦把設計和 coding 兩種行為分比較開了。用紙筆畫 mockup 的好處就是任何你想像的到的東西都可以畫的出來，你隨時可以加些不同的記號，像我的 mockup 通常都還會有些互動介面的變化示意，那為什麼還會需要 Balsamiq Mockups 這種軟體呢，我覺得用 Mockups 有幾個優點：首先是快速，Mockups 內建很多常用的UI元件，還可以簡單的拖拉改位置、修改大小、內容，如果是用紙筆畫的，要做修改就會比較辛苦了。</p>

<p><a href="http://blog.othree.net/log/2008/12/13/mockups/mockup_schedule.png"><img src="http://blog.othree.net/assets_c/2008/12/mockup_schedule-thumb-400x309.png" alt="Mockups 的基本介面、各種元件都放在上方工具列" height="309" width="400" /></a></p>

<p>另外一個好處是 Mockups 內建不少很有用的小圖示，還有一些畫起來比較麻煩的元素，可以讓成品更具說服力，但卻不會讓你設計的過程花太多時間在繪製這些東西上。</p>

<p><a href="http://blog.othree.net/log/2008/12/13/mockups/mockup_icon.png"><img src="http://blog.othree.net/assets_c/2008/12/mockup_icon-thumb-400x309.png" alt="Mockups內建很多的小圖示" height="309" width="400" /></a></p>

<p>最後我覺得最棒的是它的手繪風格了，整個就是很有感覺，不過在我使用的過程中還有發現一些問題，首先就是它不支援自定字形，只能選擇程式內建的字形或是系統字形，而程式內建的字形理所當然的不支援中文，要顯示中文的話要改成使用系統字形，但是這樣就不是手繪風了。另外一個問題是一些元件的邊緣常常會看到白邊，這些白邊其實就是所謂 half pixel 的部分，這些線條邊緣的 pixel 不是半透明，而是白底，所以要是有改動背景顏色的時候就會出現瑕疵了。</p>

<p>如果能夠忍受這兩個小問題的話，Balsamiq Mockups 是非常值得一用的，使用簡單（基本上只要拖拖拉拉就可以了），產出的成品也不錯，有在畫 mockup 的人可以試用看看。</p></b:extendContent>
			</b:content>
			<b:comments commentCount="1">

				<b:comment commentID="097930" entryID="000558">
					<b:author>
						<b:authorName>水鏡</b:authorName>
						<b:authorEmail>keroro99@gmail.com</b:authorEmail>
						<b:authorUrl>http://purebox.org</b:authorUrl>
					</b:author>
					<b:datetime>
						<b:date>2008-12-17</b:date>
						<b:time>15:11:48</b:time>
					</b:datetime>
					<b:content>
						<b:mainContent><p>有想過要寫一介紹文取得授權<br />
不過太懶了...</p></b:mainContent>
					</b:content>
				</b:comment>

			</b:comments>
			<b:trackbacks trackbackCount="0" trackbackURL="http://othree.net/cgi-bin/mt/mt-tb.cgi/556">

			</b:trackbacks>
		</b:entry>
	</b:entries>
</b:blog>