<?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://edblog.net/archives/tag/%e8%89%b2%e7%b3%bb/feed" rel="self" type="application/rss+xml" />
	<link>http://edblog.net</link>
	<description>亂寫、亂拍、亂來。 --- 持續亂改更新中 ---</description>
	<lastBuildDate>Mon, 05 Dec 2011 08:03:03 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>網頁設計 Part 1 &#8211; 分析訪客</title>
		<link>http://edblog.net/archives/1997</link>
		<comments>http://edblog.net/archives/1997#comments</comments>
		<pubDate>Thu, 04 Jun 2009 06:40:03 +0000</pubDate>
		<dc:creator>Eduardo</dc:creator>
				<category><![CDATA[Web 2.0]]></category>
		<category><![CDATA[排版]]></category>
		<category><![CDATA[瀏覽器]]></category>
		<category><![CDATA[網頁設計]]></category>
		<category><![CDATA[色系]]></category>
		<category><![CDATA[訪客]]></category>

		<guid isPermaLink="false">http://edblog.net/?p=1997</guid>
		<description><![CDATA[提供幾個小Tips，主要是針對網頁設計的部分。 一、調查訪客所使用瀏覽器 目前最市佔率最高的依舊還是IE瀏覽器，緊追在後的是Firefox，再來則是Sarafi。 第一張圖是 Market Share for Browser 的資料；第二張圖則是本部落格的訪客資料，前兩名流覽器佔比都差不多。所以製作出來的網頁要能夠在IE6 7 8、Firefox、Safari及Chrome可以正常流覽。當然IE6是很多網頁設計師心中永遠的痛，so &#8230;..IE6何時會進墳墓呢XD PIC1 PIC2 二、調查訪客所使用的螢幕解析度 可以使用 Google Analytics 得到訪客所使用的解析度，以本格來看，大多是1024 x 768的使用者為居多。再來是1280 x 800以及1280 x 1024，至於以前較為普遍的800 x 600解析度已經剩下1%左右的用戶。所以前三多的訪客流覽解析度為主，較能符合需求。 三、調查訪客偏好的色系 每位訪客都有自己偏好的顏色，網頁設計的方向必須將網頁色系考量進去，特別是網站的主題與顏色搭配，若能掌握的很好，那麼訪客在閱讀文章或者進行社群功能，將會使用得很順利，停留時間也會越來越久，留住訪客是非常重要的。所以在色系部分，除了先確定網站主題之後，可以針對訪客進行調查，瞭解大部分的訪客偏好哪種顏色，譬如都是白底色系的網站，閱讀起來非常舒服。 四、調查訪客的閱讀習慣 瞭解網站訪客的來源，是否台灣訪客居多？還是有其他國家的訪客，以中文來說，一般閱讀的習慣是左到右，所以第一眼看到都是在左邊，並依照網站所要強調的功能來配置頁面，以一進入網站來看，主要的東西要放在明顯的位置，次要或者不那麼重要的則放在下方(網頁捲軸需下拉)。置於是三欄或者兩欄排版，則可依照網站資料多寡及網站主題來做變化。 幾個小小的心得，分享一下。<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="4"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="無言的網頁程式設計" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fedblog.net%2Farchives%2F869&from=http%3A%2F%2Fedblog.net%2Farchives%2F1997">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">無言的網頁程式設計</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="用 Firefox 瀏覽無名小站真是痛苦" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fedblog.net%2Farchives%2F1312&from=http%3A%2F%2Fedblog.net%2Farchives%2F1997">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/09/26/8084262.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">用 Firefox 瀏覽無名小站真是痛苦</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="Browsershots.org – 秀出網站在所有瀏覽器的畫面" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fedblog.net%2Farchives%2F530&from=http%3A%2F%2Fedblog.net%2Farchives%2F1997">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Browsershots.org – 秀出網站在所有瀏覽器的畫面</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="WebSlug 網頁載入大車拼" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fedblog.net%2Farchives%2F1307&from=http%3A%2F%2Fedblog.net%2Farchives%2F1997">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/09/26/8085590.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">WebSlug 網頁載入大車拼</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="4" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p>提供幾個小Tips，主要是針對網頁設計的部分。</p>
<p>一、調查訪客所使用瀏覽器</p>
<p>目前最市佔率最高的依舊還是IE瀏覽器，緊追在後的是Firefox，再來則是Sarafi。</p>
<p>第一張圖是 Market Share for Browser 的資料；第二張圖則是本部落格的訪客資料，前兩名流覽器佔比都差不多。所以製作出來的網頁要能夠在IE6 7 8、Firefox、Safari及Chrome可以正常流覽。當然IE6是很多網頁設計師心中永遠的痛，so &#8230;..IE6何時會進墳墓呢XD</p>
<p>PIC1</p>
<p><img class="alignnone size-full wp-image-2003" title="browser2" src="http://edblog.net/wp-content/uploads/2009/06/browser2.jpg" alt="browser2" width="440" height="161" /></p>
<p>PIC2</p>
<p><img class="alignnone size-full wp-image-2002" title="browser1" src="http://edblog.net/wp-content/uploads/2009/06/browser1.jpg" alt="browser1" width="442" height="319" /></p>
<p>二、調查訪客所使用的螢幕解析度</p>
<p>可以使用 Google Analytics 得到訪客所使用的解析度，以本格來看，大多是1024 x 768的使用者為居多。再來是1280 x 800以及1280 x 1024，至於以前較為普遍的800 x 600解析度已經剩下1%左右的用戶。所以前三多的訪客流覽解析度為主，較能符合需求。</p>
<p><img class="alignnone size-full wp-image-1999" title="googleanalytics" src="http://edblog.net/wp-content/uploads/2009/06/googleanalytics.jpg" alt="googleanalytics" width="442" height="593" /></p>
<p>三、調查訪客偏好的色系</p>
<p>每位訪客都有自己偏好的顏色，網頁設計的方向必須將網頁色系考量進去，特別是網站的主題與顏色搭配，若能掌握的很好，那麼訪客在閱讀文章或者進行社群功能，將會使用得很順利，停留時間也會越來越久，留住訪客是非常重要的。所以在色系部分，除了先確定網站主題之後，可以針對訪客進行調查，瞭解大部分的訪客偏好哪種顏色，譬如都是白底色系的網站，閱讀起來非常舒服。<br />
四、調查訪客的閱讀習慣</p>
<p>瞭解網站訪客的來源，是否台灣訪客居多？還是有其他國家的訪客，以中文來說，一般閱讀的習慣是左到右，所以第一眼看到都是在左邊，並依照網站所要強調的功能來配置頁面，以一進入網站來看，主要的東西要放在明顯的位置，次要或者不那麼重要的則放在下方(網頁捲軸需下拉)。置於是三欄或者兩欄排版，則可依照網站資料多寡及網站主題來做變化。</p>
<p>幾個小小的心得，分享一下。</p>
<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="4"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="無言的網頁程式設計" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fedblog.net%2Farchives%2F869&from=http%3A%2F%2Fedblog.net%2Farchives%2F1997">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">無言的網頁程式設計</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="用 Firefox 瀏覽無名小站真是痛苦" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fedblog.net%2Farchives%2F1312&from=http%3A%2F%2Fedblog.net%2Farchives%2F1997">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/09/26/8084262.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">用 Firefox 瀏覽無名小站真是痛苦</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="Browsershots.org – 秀出網站在所有瀏覽器的畫面" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fedblog.net%2Farchives%2F530&from=http%3A%2F%2Fedblog.net%2Farchives%2F1997">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Browsershots.org – 秀出網站在所有瀏覽器的畫面</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="WebSlug 網頁載入大車拼" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fedblog.net%2Farchives%2F1307&from=http%3A%2F%2Fedblog.net%2Farchives%2F1997">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/09/26/8085590.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">WebSlug 網頁載入大車拼</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="4" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table><p><script type="text/javascript"><!--
google_ad_client = "pub-0799927170161891";
/* 336x280, ??? 2009/4/8 */
google_ad_slot = "0733953819";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p> ]]></content:encoded>
			<wfw:commentRss>http://edblog.net/archives/1997/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

