<?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>lock.gotoBlog(2010) &#187; 網頁設計</title>
	<atom:link href="http://www.lockchou.idv.tw/blog/category/webdesign/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.lockchou.idv.tw/blog</link>
	<description></description>
	<lastBuildDate>Wed, 12 May 2010 06:35:57 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>試玩Google chrome小感</title>
		<link>http://www.lockchou.idv.tw/blog/2008/09/google_chrome_test/</link>
		<comments>http://www.lockchou.idv.tw/blog/2008/09/google_chrome_test/#comments</comments>
		<pubDate>Wed, 03 Sep 2008 17:34:12 +0000</pubDate>
		<dc:creator>lock</dc:creator>
				<category><![CDATA[網頁設計]]></category>
		<category><![CDATA[chrome]]></category>
		<category><![CDATA[google]]></category>

		<guid isPermaLink="false">http://www.lockchou.idv.tw/blog/?p=428</guid>
		<description><![CDATA[今天瞥見Google把Chrome連結放到了首頁提供下載，基於一個Web developer的立場，不管手癢不癢、工作忙不忙，點去下載試玩都是很合理的事情。

安裝完畢後，一般剛接觸新介面的不適應感很小，幾點UI的設計可見Google借鏡其他瀏覽器前輩之處。

一些圖示，像是我的最愛(IE的星號)、重新整理(迴轉箭頭)都是過去瀏覽器慣用的符號。
點選(onfocus)輸入框(text input) 時，強調邊緣的部分，這是Apple OS(或說是Safari)的設計。

還有很多其他熟悉的瀏覽器介面，不過Chrome企圖精簡的設計，是跟其他前輩較不同的地方，除了保留最多的瀏覽空間給網頁內容，Google一貫的目的性純粹跟簡潔，也是使用上沒有適應困難的主因。
當然我最關心的還是Javascript的支援及Debug工具，內建開發者工具的Chrome有著相當用心的設計。從開發工具漂亮的UI到DOM tree, CSS 即看的部分都很完整，支援的資訊幾乎媲美Firebug，但是不足甚至有bug的地方仍然不少(Debug tool還有bug XD)：


無法從console 的bug report直接連到bug發生的那一行(這是Firebug很方便的地方)。
無法從網頁直接點選某個區塊，並直接跳至該處的code。

 
如果說開發環境跟工具的內建是Chrome開發團隊的用心，那Gears的內建應該是Google想掌握的優勢。當然這個優勢得等到佔有率提高時才會發生，如果越來越多的application仰賴Gears等相關技術，那些過去只在桌面才能出現的應用就會往網上移動。當我們慢慢習慣這些線上應用後，用誰家的瀏覽器也不再重要，只要可以打開我的線上繪圖軟體或線上投影片，那就是好的瀏覽器。
網路上很多人擔心Google的野心，網頁開發者憂慮瀏覽器大戰後更分散的天下。我雖然常常也苦於瀏覽器的相容問題，但還是很樂見這些競爭產生的創意與方便，只要恪遵標準的路子不偏，我想走長遠了之後，對開發者與使用者絕對都是雙贏的局面。
延伸閱讀無相關文章]]></description>
			<content:encoded><![CDATA[<p>今天瞥見Google把Chrome連結放到了首頁提供下載，基於一個Web developer的立場，不管手癢不癢、工作忙不忙，<a href="http://www.google.com/chrome" target="blank">點去下載</a>試玩都是很合理的事情。</p>
<p><span id="more-428"></span></p>
<p>安裝完畢後，一般剛接觸新介面的不適應感很小，幾點UI的設計可見Google借鏡其他瀏覽器前輩之處。</p>
<ol>
<li>一些圖示，像是我的最愛(IE的星號)、重新整理(迴轉箭頭)都是過去瀏覽器慣用的符號。</li>
<li>點選(onfocus)輸入框(text input) 時，強調邊緣的部分，這是Apple OS(或說是Safari)的設計。</li>
</ol>
<p>還有很多其他熟悉的瀏覽器介面，不過Chrome企圖精簡的設計，是跟其他前輩較不同的地方，除了保留最多的瀏覽空間給網頁內容，Google一貫的目的性純粹跟簡潔，也是使用上沒有適應困難的主因。</p>
<p>當然我最關心的還是Javascript的支援及Debug工具，內建開發者工具的Chrome有著相當用心的設計。從開發工具漂亮的UI到DOM tree, CSS 即看的部分都很完整，支援的資訊幾乎媲美Firebug，但是不足甚至有bug的地方仍然不少(Debug tool還有bug XD)：<br />
<a href="http://picasaweb.google.com.tw/lh/photo/p-nGOKaGntXREU782lVdEg"><img src="http://lh5.ggpht.com/lockchou/SL7I7D5eOyI/AAAAAAAABBk/2kNlWV4pXh8/s400/chrome_test_2.png" alt="" /></a></p>
<ol>
<li>無法從console 的bug report直接連到bug發生的那一行(這是Firebug很方便的地方)。</li>
<li>無法從網頁直接點選某個區塊，並直接跳至該處的code。</li>
</ol>
<p> <a href="http://picasaweb.google.com.tw/lh/photo/-ndqFUeF7pYapByM-ppCrA"><img src="http://lh6.ggpht.com/lockchou/SL7I63UwHzI/AAAAAAAABBc/hy5yHGiToh4/s400/chrome_test_1.png" alt="" /></a></p>
<p>如果說開發環境跟工具的內建是Chrome開發團隊的用心，那Gears的內建應該是Google想掌握的優勢。當然這個優勢得等到佔有率提高時才會發生，如果越來越多的application仰賴Gears等相關技術，那些過去只在桌面才能出現的應用就會往網上移動。當我們慢慢習慣這些線上應用後，用誰家的瀏覽器也不再重要，只要可以打開我的線上繪圖軟體或線上投影片，那就是好的瀏覽器。</p>
<p>網路上很多人擔心Google的野心，網頁開發者憂慮瀏覽器大戰後更分散的天下。我雖然常常也苦於瀏覽器的相容問題，但還是很樂見這些競爭產生的創意與方便，只要恪遵標準的路子不偏，我想走長遠了之後，對開發者與使用者絕對都是雙贏的局面。</p>
<h3  class="related_post_title">延伸閱讀</h3><ul class="related_post"><li>無相關文章</li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.lockchou.idv.tw/blog/2008/09/google_chrome_test/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[AJAX筆記] 介面設計與程式的鴻溝</title>
		<link>http://www.lockchou.idv.tw/blog/2007/09/ajax%e7%ad%86%e8%a8%98-%e4%bb%8b%e9%9d%a2%e8%a8%ad%e8%a8%88%e8%88%87%e7%a8%8b%e5%bc%8f%e7%9a%84%e9%b4%bb%e6%ba%9d/</link>
		<comments>http://www.lockchou.idv.tw/blog/2007/09/ajax%e7%ad%86%e8%a8%98-%e4%bb%8b%e9%9d%a2%e8%a8%ad%e8%a8%88%e8%88%87%e7%a8%8b%e5%bc%8f%e7%9a%84%e9%b4%bb%e6%ba%9d/#comments</comments>
		<pubDate>Tue, 11 Sep 2007 01:55:01 +0000</pubDate>
		<dc:creator>lock</dc:creator>
				<category><![CDATA[網頁設計]]></category>

		<guid isPermaLink="false">http://www.lockchou.idv.tw/blog/2007/09/ajax%e7%ad%86%e8%a8%98-%e4%bb%8b%e9%9d%a2%e8%a8%ad%e8%a8%88%e8%88%87%e7%a8%8b%e5%bc%8f%e7%9a%84%e9%b4%bb%e6%ba%9d/</guid>
		<description><![CDATA[摘自  IThome 整合配套才能發揮Ajax最佳效用
更深一層的開發思維影響是互動設計的專業化。目前多數Ajax網站的開發原因，對介面物件操控與互動效果的設計，多數仍由程式開發人員主導。不是因為開發人員擅長互動設計，而是設計人員害怕寫程式。臺灣最大設計網站黑秀網下任站長（網路代號：火星人）表示：「設計人員連一行程式都不願意碰，這是難以跨越的鴻溝。」
設計人員多採逐頁畫面設計的思維，將頁面變化的截圖，交給程式人員處理成動態效果。但畢竟程式開發人員不見得能比設計人員更熟悉設計或美感呈現的考量，這樣截然二分的流程其實限制了動態效果的呈現方式，或者是局限在小地方互動的機制，從而缺乏整體性的設計。

物件化的設計思維其實是CSS的設計精神，但過去網頁開發人員或美工設計人員習慣採用表格對版面直接進行鋪排，直接視覺化的角度，安排網頁內容的架構。表格式的設計思維，造成內容的呈現方式和意義架構的混合，一旦要調整不同的呈現方式，或修改意義架構時，就必須重新設計網頁，造成許多重複工作。即使可以透過網頁範本套用，仍須為不同的呈現，設計不同的網頁範本，這仍是許多網頁開發人員拋不開的痛苦。
CSS採用物件化的設計精神，可以將內容和呈現分離，使得同樣的內容可以一再套用到不同的呈現樣式。局部樣式修改，也可以馬上反映到所有套用的內容上，不需逐一修改網頁，應用彈性和可用性可大幅提高。但CSS之所以過去難以普及的原因，在於內容與呈現分離的物件化設計概念，過於抽象，無法直接從視覺上看到效果。開發前置作業期程將會因此耗時更久，開發人員必須先分離出網頁內容的整體結構，考量未來可能呈現的樣式，進行規畫，不易像過去那樣邊做邊改。這是完全不同的設計思維與開發習慣的躍遷。
對設計人員而言，需要進行心態的轉換與相當時間的習慣調整。Ajax技術會迫使網站開發人員需重新檢視設計思維，調整過去直覺式的設計習慣，採取更嚴謹的開發規畫。最近也開始出現一些網頁物件化設計的框架，例如臺灣Yahoo！奇摩使用的LSM（Layered Semantic Markup）框架，採取資料內容、呈現樣式與操作行為分開的設計，達到網頁結構化，以及開發與設計協同分工的目的。
延伸閱讀無相關文章]]></description>
			<content:encoded><![CDATA[<p>摘自  IThome <a href="http://www.ithome.com.tw/itadm/article.php?c=44009&#038;s=3">整合配套才能發揮Ajax最佳效用</a></p>
<p>更深一層的開發思維影響是互動設計的專業化。目前多數Ajax網站的開發原因，對介面物件操控與互動效果的設計，多數仍由程式開發人員主導。不是因為開發人員擅長互動設計，而是設計人員害怕寫程式。臺灣最大設計網站黑秀網下任站長（網路代號：火星人）表示：「<strong>設計人員連一行程式都不願意碰，這是難以跨越的鴻溝</strong>。」</p>
<p>設計人員多採逐頁畫面設計的思維，將頁面變化的截圖，交給程式人員處理成動態效果。但畢竟<strong>程式開發人員不見得能比設計人員更熟悉設計或美感呈現的考量，這樣截然二分的流程其實限制了動態效果的呈現方式，或者是局限在小地方互動的機制，從而缺乏整體性的設計。</strong></p>
<p><span id="more-344"></span><br />
物件化的設計思維其實是CSS的設計精神，但過去網頁開發人員或美工設計人員習慣採用表格對版面直接進行鋪排，直接視覺化的角度，安排網頁內容的架構。<strong>表格式的設計思維，造成內容的呈現方式和意義架構的混合，一旦要調整不同的呈現方式，或修改意義架構時，就必須重新設計網頁，造成許多重複工作。</strong>即使可以透過網頁範本套用，仍須為不同的呈現，設計不同的網頁範本，這仍是許多網頁開發人員拋不開的痛苦。</p>
<p>CSS採用物件化的設計精神，可以將內容和呈現分離，使得同樣的內容可以一再套用到不同的呈現樣式。局部樣式修改，也可以馬上反映到所有套用的內容上，不需逐一修改網頁，應用彈性和可用性可大幅提高。但CSS之所以過去難以普及的原因，在於內容與呈現分離的物件化設計概念，過於抽象，無法直接從視覺上看到效果。開發前置作業期程將會因此耗時更久，開發人員必須先分離出網頁內容的整體結構，考量未來可能呈現的樣式，進行規畫，不易像過去那樣邊做邊改。這是完全不同的設計思維與開發習慣的躍遷。</p>
<p>對設計人員而言，需要進行心態的轉換與相當時間的習慣調整。Ajax技術會迫使網站開發人員需重新檢視設計思維，調整過去直覺式的設計習慣，採取更嚴謹的開發規畫。<strong>最近也開始出現一些網頁物件化設計的框架，例如臺灣Yahoo！奇摩使用的LSM</strong>（Layered Semantic Markup）框架，採取資料內容、呈現樣式與操作行為分開的設計，達到網頁結構化，以及開發與設計協同分工的目的。</p>
<h3  class="related_post_title">延伸閱讀</h3><ul class="related_post"><li>無相關文章</li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.lockchou.idv.tw/blog/2007/09/ajax%e7%ad%86%e8%a8%98-%e4%bb%8b%e9%9d%a2%e8%a8%ad%e8%a8%88%e8%88%87%e7%a8%8b%e5%bc%8f%e7%9a%84%e9%b4%bb%e6%ba%9d/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
