<?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; usaibilty</title>
	<atom:link href="http://ka-yue.com/blog/tag/usaibilty/feed" rel="self" type="application/rss+xml" />
	<link>http://ka-yue.com/blog</link>
	<description>網頁設計、開發、SEO 優化</description>
	<lastBuildDate>Tue, 27 Jul 2010 17:29:35 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>目錄設計問題</title>
		<link>http://ka-yue.com/blog/web-navigation-design</link>
		<comments>http://ka-yue.com/blog/web-navigation-design#comments</comments>
		<pubDate>Sat, 23 Aug 2008 07:44:42 +0000</pubDate>
		<dc:creator>kayue</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[navigation]]></category>
		<category><![CDATA[usaibilty]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=283</guid>
		<description><![CDATA[對於那些架構龐大、層次很深的網站，目錄的設計十分之重要。一旦設計得不好，很容易讓用戶有 lost 的感覺。要如何解決這個問題，小弟至今仍然沒有一個完美的解決方法。因此小弟比較幾個網站的目錄設計手法，並在此跟大家分享一下所得。 設計師常常會以顏色、字體、位置大小來突出當前被選中的選項。但對於多層次的網站，可能會有多過一個選項被選中的情況。雖然設計師可以同時突出多個項目，但當被突出項目太多的時候，反而會造成用戶認知的困難。正如 Digg 網站的頂部目錄（左方），分為上、中、下三列；三列中又包含五種不同功能的連結，分別為 Join Digg / About / Login Article category Popular / Upcoming Type of digg (News / Videos / Images) Customize (因大小關係，不在截圖中) 這數目我覺得已經很誇張了，當中更可同時有三個項目被選中（Word &#38; Business, Videos, Popular），並運用了 7 種顏色（2種藍、4種不同深淺的綠、紅式的 icon），如此複雜的設計應該很難為人一下子理解吧。Digg.com 的其他細節都做得很到位，唯獨是目錄太過瘋狂了一點。再看看 funP 的目錄又如何: 相較之下，我覺得 funP &#8230; <a href="http://ka-yue.com/blog/web-navigation-design">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>對於那些架構龐大、層次很深的網站，目錄的設計十分之重要。一旦設計得不好，很容易讓用戶有 lost 的感覺。要如何解決這個問題，小弟至今仍然沒有一個完美的解決方法。因此小弟比較幾個網站的目錄設計手法，並在此跟大家分享一下所得。</p>
<p style="text-align: center;"><img class="aligncenter" title="Digg's deep tab navigation" src="http://220.232.237.39/~kayuecom39/blog/wp-content/uploads/2008/08/tab-nav-1.png" alt="Digg's deep tab navigation" width="600" height="200" /></p>
<p><span id="more-283"></span></p>
<p>設計師常常會以顏色、字體、位置大小來突出當前被選中的選項。但對於多層次的網站，可能會有多過一個選項被選中的情況。雖然設計師可以同時突出多個項目，但當被突出項目太多的時候，反而會造成用戶認知的困難。正如 Digg 網站的頂部目錄（左方），分為上、中、下三列；三列中又包含五種不同功能的連結，分別為</p>
<ol>
<li>Join Digg / About / Login</li>
<li>Article category</li>
<li>Popular / Upcoming</li>
<li>Type of digg (News / Videos / Images)</li>
<li>Customize (因大小關係，不在截圖中)</li>
</ol>
<p>這數目我覺得已經很誇張了，當中更可同時有三個項目被選中（Word &amp; Business, Videos, Popular），並運用了 7 種顏色（2種藍、4種不同深淺的綠、紅式的 icon），如此複雜的設計應該很難為人一下子理解吧。Digg.com 的其他細節都做得很到位，唯獨是目錄太過瘋狂了一點。再看看 funP 的目錄又如何:</p>
<p style="text-align: center;"><img class="size-full wp-image-284 aligncenter" title="FunP Tab Nav" src="http://220.232.237.39/~kayuecom39/blog/wp-content/uploads/2008/08/tab-nav-3.png" alt="" width="600" height="259" /></p>
<p>相較之下，我覺得 funP 的目錄清晰得多了。不是因為 funP 的功能比較簡單，實際上， funP 網站的層次比 Digg 更加深、功能更加多。funP 的目錄看上去更清晰，全因它把不相關的功能/連結都分別放在不同地方，而不像 Digg 般都堆在一起。看看下方兩張圖就會明白:</p>
<p style="text-align: center;"><img class="size-full wp-image-286 aligncenter" title="tab-nav-funp" src="http://220.232.237.39/~kayuecom39/blog/wp-content/uploads/2008/08/tab-nav-funp.png" alt="" width="600" height="336" /></p>
<p style="text-align: center;">這個是 Digg.com 的，所有色塊都在上方。</p>
<p style="text-align: center;"><img class="size-full wp-image-287 aligncenter" title="tab-nav-digg" src="http://220.232.237.39/~kayuecom39/blog/wp-content/uploads/2008/08/tab-nav-digg.png" alt="" width="600" height="347" /></p>
<p style="text-align: left;">當然，說到架構龐大，應該沒人及得上 Yahoo! 了。下面是 Yahoo 的做法</p>
<p style="text-align: center;"><img class="size-full wp-image-289 aligncenter" title="tab-nav-yahoo" src="http://220.232.237.39/~kayuecom39/blog/wp-content/uploads/2008/08/tab-nav-yahoo.png" alt="" width="600" height="166" /></p>
<p style="text-align: center;">[Before] Home page</p>
<p style="text-align: center;"><img class="size-full wp-image-290 aligncenter" title="tab-nav-yahoo2" src="http://220.232.237.39/~kayuecom39/blog/wp-content/uploads/2008/08/tab-nav-yahoo2.png" alt="" width="600" height="166" /></p>
<p style="text-align: center;">[After] Content pgae</p>
<p style="text-align: left;">Yahoo 向來都會為不同服務設計一個獨立的頁面，而不是一種風格套用到整個網站中。所以如果用戶想轉換服務，必須點左上角的連結。你不會在一個子網站的目錄中找到其他服務的身影。雖然比較麻煩，比每個子網站的架構都會因此簡明得多，funP 亦是用此方法。另外 Yahoo! TV 的目錄設計新穎，結合了 tab、breadcrumbs 於一身，雖然尚未被廣泛接受，但仍然很值得參考。</p>
<p style="text-align: left;">無論如何，有些問題是難光靠設計便能解決的。如果網站的架構混亂，再好的設計也是難以起死回生，反之亦然。君不見 Apple.com 的網站只有 6 個 button 嗎？</p>
]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/web-navigation-design/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
