2/28/2007

情感設計

http://www.books.com.tw/exep/prod/booksfile.php?item=0010316433#shipping


這本書的封面是名為「外星人」的柳丁榨汁器, 第一次看見這台榨汁器是在2002年英國西南方Bath 這個城市一家商店的櫥窗, 當時不像書的封面ㄧ樣擺上柳丁和杯子, 所以佇足在櫥窗邊和同學討論這個造型奇特的東西是什麼?

從頂端的長相不難明白是榨柳丁或檸檬用的, 但是那三支像ET的腳為什麼要做這麼高?...... 因為在這些腳中間放一個500CC玻璃杯承接順著上面凹槽流下來的果汁剛剛好. 三支腳的高度有功能上的考量, 不純粹因為奇特或好看. 我們的討論也如同這台榨汁器的設計者史塔克(Starck)所說, 他的榨汁器是用來打開話匣子, 引起一個話題的.

任何事務的設計不ㄧ定要遵循既定的規則, 可以著重於功能的, 也可以是情感的, 不管是屬於哪一種, 在設計者心中需要明白的是為何而設計? 進而掌握使用者的認知與反應.

圖說: 用 Mindjet 的 Mind Manager 軟體 (試用版) 繪製的流程圖

(試著用"圖像式思考"方式解說, 但是對讀書心得這單元來說是挺無聊的舉動)


作者將設計分成三種層次: 本能層次(外觀上), 行為層次(功能上), 反思層次(情感上), 是這本書的精華之處. 作者舉很多例子解釋各種層次扮演的角色. 例如:

只關注於外觀的設計容易淪為沒有營養價值的糖果一般膚淺空洞,但是只講求外觀設計的需求還是存在的, 購買沒用但是擺著好看的手工藝品的人比比皆是, ㄧ般人對設計的反應會先停留在外觀上;

在功能層次上, 擁有過多功能但是仍然無法滿足使用者需求的產品經常可以看見, 主要原因是沒有仔細探討使用者的需求和產品如何被使用的緣故. 通常觀察使用者的行為會比詢問有用, 因為大多數人對事物的理解與認知是有差距的, 在言語表達上也是ㄧ樣;

反思的設計則超越外觀與功能層次, 著重在文化, 感受和所代表的意義上面. 同樣一件設計, 會因為個人學習成長經驗不同而產生不ㄧ樣的認知, 有些事物(例如追求時尚名牌)對某人很有意義, 對另一個人來說很可能微不足道.

本書也談到一個有趣的議題: 由團體成員設計 v.s. 由單一個人設計.

作者認為行為層次的設計可以透過團體設計達成目標, 但是本能和反思層次的偉大設計通常是由個人設計的. 以需要多人參與、過程複雜的電影製作為例: 透過團體成員的妥協與共識設計出來的作品是安全有效的, 不過也總是無趣的. 最好的設計是能與主題緊密結合並具有明確的視覺重點, 通常這樣的設計是由個人的想像力驅動的. 如果你想要一個偉大的、可以改變世界的產品, 那就讓擁有清晰洞察力的某人驅動.

這個例子讓我產生一個聯想: 假設集合多位曾經得過奧斯卡金像獎的導演合作一部電影能不能產生一部空前的創作出來? 除非他們的想法完全ㄧ致, 不然就表示有人需要妥協. 但這是不太可能的假設, 任何一位優異的導演都不會讓別人左右他的思路或更改他的精心創作. 除非他放棄製做偉大作品的目標了. 設計師也是, 但前提是要夠優秀, 而且是讓人可以信任的.

Yahoo YUI 介紹

在2006年12/30日一場「超越Web 2.0在企業之應用」研討會上, "小正正"介紹了Yahoo UI Library (簡稱YUI) 函數庫的應用, 網址為 http://developer.yahoo.com/yui/ , 可選擇"Download YUI" button下載完整的範例. 想做各瀏覽器都正常顯示的css網頁設計可以參考其作法.

函數庫相當於網頁設計的模組(含html/css/javascript), 這些模組分成三大部分:

1. Utilities --> DTML + AJAX 的web應用模組
2. Controls --> 互動式元件模組, 如月曆, 選單, 標籤頁, 樹狀圖等
3. CSS Resources --> 符合各瀏覽器的css 模組設定

第1. 2項比較適合企劃或程式人員在不需製作無障礙網頁的網站或後端操作平台參考

第3項CSS模組值得網頁設計人員研究參考, 這部份再細分成三項:
1. Grid --> 版型設定
2. Font --> 字型/字級/字距設定
3. Reset --> 修改Broswer預設值為0, 使各瀏覽器畫面呈現一致

CSS模組應用有以下幾個步驟: --> 參考網址: http://developer.yahoo.com/yui/grids/

1. Html/Xhtml宣告改為strict, 目的是使所有瀏覽器都用"標準模式"顯示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2. 連結3個css, 目的是重設各瀏覽器預設設定
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="fonts.css">
<link rel="stylesheet" type="text/css" href="grids.css">

或改用3者合併式的css
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">


3. HTML區塊(CSS)設定

doc為版面寬度設定, 有750px, 950px, 100%三種
hd為Header(頁首), bd為Body(主要內容), ft為Footer(頁尾)
最外層主結構寫法如下:

<body>
<div id="doc">
<div id="hd"><!-- header --></div>
<div id="bd"><!-- body --></div>
<div id="ft"><!-- footer --></div>
</div>
</body>


bd內容區塊則視資料結構有所不同(bd裡面的body內容), 以下範例是上中下/二欄式的寫法

<div id="bd">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>


欄位寬度/左右設定寫在doc這一行, 比較完整寫法如下

<div id="doc" class="yui-t4"&gt; <!-- 改變 class 就能改變欄位呈現方式 -->
<div id="hd"></div>
<div id="bd">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
<div id="ft"></div>
</div>

主要變化在 bd 區塊, 可以從 參考網址 http://developer.yahoo.com/yui/examples/grids/
選擇需要的layout 改變bd內容寫法

本範例demo 請參考 http://developer.yahoo.com/yui/examples/grids/example_g.html

Yahoo YUI 函數庫提供企劃, 設計和程式人員直接應用的模組參考, 網站開發流程是從上到下, 從前端到後端, 需要採用那些模組從最初的網站企劃就需要思考了

id 和 class 的差異

原文刊載於Sitepoint : http://www.sitepoint.com/article/html-37-steps-perfect-markup/2
第 34. 項 id 和 class 有何差異?

id 是HTML 文件中某個特定元素的單一識別。好比社會安全號碼一樣為這個特定元素提供唯一可辨識的方式。如同二個人不可能擁有同一個社會安全號碼,任二個元素在文件也不可能擁有同樣的id. Ids在頁面中一定是獨特的。

class認定為某個元素有些特性可以與其他元素共享。 一個元素可能同時屬於一個或多個以上class。 用比較貼切的比喻: 一個人可能同時是木匠和護士,而社會上有許多的木匠和許多的護士。 (他們全都有獨特的社會安全號碼)

id和class主要被使用於CSS和JavaScript。 在CSS, id 比class有更高的獨特性,使它容易為一個特定元素訂定特殊的規則。 以JavaScript來說,我們可以用id查找元素

我們指定 id在頁面中至多只能出現一次,例如導覽menu、footer、sidebar等。 我們也可以指定 id在整個網站只出現一次,例如我們想要一個特定圖像擁有特定的CSS規則,或者想以JavaScript操作。

我們指定class到具有共同特徵的元素中,通常透過CSS規則顯示其屬性。

id和class名稱應該儘可能符合「語義」。它應該描述本身是什麼而不是描述外觀像什麼。 因此用 id= "menu" 會比 id=”left” 好,因為萬一menu移動到右邊的話,left就不合適了。id和class名稱容易因為不同專案而變動,html也是。即便如此,我們也不應讓它隨著不同專案變動。

框格模型技法

這技法起源於IE5/5.5與IE6對css區塊寬度的解譯不同, 目前的IE6, Netscape和Firefox對區塊寬度有相同的解譯模式稱為"標準模式"(standard model).

如果不考慮IE5/5.5的話, 是可以不必理會這種差異, 但是拜Microsoft之賜, 當IE6在Doctype上方加上任何宣告或字眼時, IE6對區塊寬度解譯就會變成IE5/5.5的"相容模式"(quirks model).

這就是為什麼網頁套上程式後, 區塊寬度經常會跑掉的原因, 因為工程師在Doctype上方加上
<?xml version="1.0" encoding="big5" ?>

IE5/5.5與IE6對區塊寬度的解譯到底有什麼不同?

舉一個200px寬度加上10px間距和1px框線的區塊為例:
width="200px", padding="10px", border="1px"

IE6, Netscape和Firefox會對這區塊顯示出 200+10*2(左右間距)+1*2(左右框線)共222px的區塊寬度 --> 間距與框線寬度外加
IE5/5.5則會對這區塊顯示出padding+border共200px的區塊寬度 --> 間距與框線寬度內含

所以當IE6在Doctype上方加上xml宣告或任何字眼的區塊寬度會比原設定少(從"標準模式"變成"相容模式")

如果不在Dectype上方加宣告, 程式仍然可以正常運作, xml宣告也可以寫在<head>裡面.

"框格模型技法"是顧全新舊版IE, Netscape和Firefox的技巧, 雖然在css寬度設定時會比較麻煩, 但是如果要製作各版broswer都相同的網頁就要熟悉這項技法 .

#box { padding: 20px; border: 5px solid #666666; background-color: #cccccc;}
#box { width: 250px; voice-family: "\"}\""; voice-family: inherit; width: 200px;}
html > body #box { width: 200px;}


#box將寬度寫進另一個同名id,
第一行寬度250px是寫給IE5/5.5看的(所以寬度較大).
第二行寬度200px是寫給IE6看的, 因為IE5/5.5讀到 voice-family: voice-family: "\"}\""; voice-family: inherit; 後就不再往下看, 而IE6會以第二個寬度為準

html > body #box 是寫給Netscape和Firefox看的, 因為IE5/5.5/6不支援這種css寫法
(但是IE7已經支援這種寫法, 如果要再專寫一組給IE7看的可以用*+html > body #box)

在Doctype上面加上xml宣告的網站做法還可以再簡化, 所以在設計網頁時就先加好這行宣告, 讓broswer直接以IE5/5.5模式反應寬度.

#box { padding: 20px; border: 5px solid #666666; background-color: #cccccc; width: 250px;}
html > body #box { width: 200px;}


以上是不以IE6的版本做考慮, 因為IE6已經不存在, 就算user的broswer是IE6也會變成以相容模式呈現, 但是html > body #box還是要加上, 用來解決Netscape和Firefox的寬度問題.

瀏覽器的顯示模式

DDOCTYPE 有很多種, 除了識別html / xhtml版本, 也告訴瀏覽器該以哪一種模式顯示網頁
W3C (http://www.w3.org/TR/html401/struct/global.html#version-info) 公佈HTML 4.01的三種寫法如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


DTD 就是「文件類型定義」(document type definition)的縮寫。Strict對html採嚴格定義, 禁止使用過時語法; Transitional採比較寬容定義, 允許使用部份即將過時語法; Frameset是frame網頁使用

瀏覽器顯示可以簡單歸結成二種: 標準模式(standard mode)和相容模式(quirks mode)

加網址的顯示為"標準模式", 不加網址的顯示為"相容模式", 不加宣告的則反應為 "相容模式"

目前常用的html宣告為 (標準模式) --> 有加網址
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

還有一種html宣告為 (相容模式) --> 沒加網址
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

老舊版本的瀏覽器多半是相容模式, 新的標準的瀏覽器則是標準模式
有支援切換宣告模式的瀏覽器為IE6以上, Netscape6以上, Firefox1以上版本

二種模式的差異為: 標準模式 CSS padding寬度外加, 相容模式 CSS padding寬度內含 (所以造成寬度顯示不同)

舉例: IE5, IE5.5, IE6 + 第一行xml宣告 --> 會顯示為相容模式
IE6, IE7, Firefox1.0, Netscape6.0 --> 會顯示為標準模式

(但是IE6 + 第一行xml宣告 顯示為相容模式 (IE6 bug 之一), 在IE7和firefox不管有沒有 + 第一行xml宣告 都會顯示為標準模式)

為了畫面正常而拿掉宣告不是很好的解決方式, 採用不加網址的宣告則不確定是否符合無障礙規範, 設計時仔細檢查調整css各區塊padding的設定應該都能解決

IE7 的bug

positioniseverything.net 中所提到IE5/6的bug, 在IE7都已經修正, 唯一還延續著的是 "Escaping Float Bug"
(原文刊載於 IEblog: http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx )

範例: 一個設定黑色外框及邊界的div內, 包覆幾個float left的小正方形div,
正常流覽器顯示的畫面如下:


但是IE的畫面中, 框線會內縮, 無法正常撐開


提供的修正方法是在設定外框這組div加上以下一段css (或者避免做這種外框或底色的設定)

/* Hides from IE-mac \*/
* html .floatholder {height: 1%;}
/* End hide from IE-mac */


這個範例完整的css寫法如下

(外框設定)
.floatholder {
border: 2px solid #000;
margin: 0 40% 20px 10%;
}


(小正方形設定)
.floatbox {
float: left;
width: 50px;
height: 50px;
margin: 2px;
background: #bb7;
color: #ffd;
text-align: center;
}


(修正的css)
/* hide from IE-mac \*/
* html .hollyhack {height: 1%;}
/* end hide */
(第一行讓IE-mac版隱藏, 第二行設定* html . hollyhack 高度為1%, 第三行為純註解)


範例的html寫法如下:
(參考網址: http://www.positioniseverything.net/explorer/escape-floats.html )

- - > 請注意 ”floatholder” 和 “hollyhack”為二組並存的class, 中間要空一格

<div class="floatholder hollyhack">

<div class="floatbox"><br />Float</div>
<div class="floatbox"><br />Float</div>
……………………………………..
<div class="floatbox"><br />Float</div>
<div class="floatbox"><br />Float</div>
<div class="floatbox"><br />Float</div>

<div style="clear: both;">
</div>


p.s. IE7修正 positioniseverything.net 上所說的bug如下, 可以點進去看範例, 唯一沒修正的就是上面說的"escaping floats", 計畫將來會修正

支援各種平台的網站製作方式

W3C已經將手持裝置(Handheld, PDA和Mobile等行動裝置), TV(數位電視), projection(投影機)列入css的支援項目. 相信不久之後, 就可以在同一個頁面設計不同平台需要呈現的樣式, 不用一一開發PDA版, 手機版, 或iTV版的網頁, 只要在<head>連結不同版本的css就可以了. 但是支援的目標只是讓使用者都能存取網站內容資訊, 如文字, 影像, 多媒體物件等, 不代表所有平台都呈現相同畫面.

連結不同平台css只要在media指定支援的媒體形式即可, 寫法如下:
全部: <link rel="stylesheet" type="text/css" href="css/link_all.css" media="all" />
電腦螢幕: <link rel="stylesheet" type="text/css" href="css/link_screen.css" media="screen" />
印表機: <link rel="stylesheet" type="text/css" href="css/link_print.css" media="print" />
手持裝置: <link rel="stylesheet" type="text/css" href="css/link_handheld.css" media="handheld" />
投影機: <link rel="stylesheet" type="text/css" href="css/link_projection.css" media="projection" />
數位電視: <link rel="stylesheet" type="text/css" href="css/link_tv.css" media="tv" />

各平台瀏覽器的css支援情況如以下網址: (目前大多已經支援all, screen和print項目)
http://w3development.de/css/assigning_external_css/link.html

為了製作支援各種平台的網站, 是有必要開始改變一下製作網站的方式, 這是可預見未來2~3年的事, 提早準備應該可以免除很多將來改版時的困擾, 而且小修改就可以做到

1. 使用xhtml標記語言取代html

xhtml已經取代html4.01為目前網頁標記語言的標準, 主要原因是html標記不夠嚴謹, 允許標記沒有開始或結束的寫法(p,br,li等), 造成其他平台可能無法顯示的狀況. 再者是為了和xml銜接. 目前建議使用的標準版本為XHTML 1.0 Transitional.

2. 建立結構化的格式

文字資料的格式由結構化的標記建立, 標記語言結構化是指"根據文意建立文件結構". 有利於上述平台broswer解譯文件內容, 所以使用標記時必須考量標記所代表的意義. 例如標題為<H>, 段落為<P>, 項目條例為<li>或<dt><dd>等. 如果以<br>斷行取代項目條例或是使用<div>取代標記將會導致內容無法結構化, 在不支援css的平台上容易造成閱讀困難, 例如文字閱讀器. 結構化文件範例如下:

<h1>建立結構化標記</h1>

<h2>結構</h2>
<dl>
<dt>Html項目</dt>
<dd>Html 說明文字, html標記應用缺點</dd>
<dt>Xhtml項目</dt>
<dd>Xhtml 說明文字, xhtml標記應用優點</dd>
<dl>

<h2>格式</h2>
<p>以css取代老式的html表格配置, ....... </p>

沒有css情況下, 以結構化標記製作的網頁螢幕顯示為:


建立結構化標記

結構

Html項目
  Html 說明文字, html標記應用缺點
Xhtml項目
  Xhtml 說明文字, xhtml標記應用優點

格式

以css取代老式的html表格配置, .......


上述方式可以很容易讀出那一句是標題, 那一句是項目條列, 那一句是段落. 相對的, 沒有css情況下, 不結構化的網頁就無法讀出文件格式, 螢幕顯示可能為

建立結構化標記

結構

Html項目Html
說明文字, html標記應用缺點

Xhtml項目Xhtml
說明文字, xhtml標記應用優點

格式
以css取代老式的html表格配置, .......

3. 建立結構與格式各自獨立的css

以css取代html的表格配置, 開發人員可以隨意變更xhtml而不用擔心破壞版面配置, 在建立不同平台的css時也會比較容易轉換. 比較簡潔的寫法是儘量避免為標記加上class, 例如 <h1 class="head">, <h2 class="sub_head">, <dt class="data">, <p class="text1">...... 尤其要避免將slye寫在標記裡面, 例如 <h1 style=" background:background-......">, 這種方式比較浪費客戶端的頻寬

參考範例如下:

<div id="content">

<h1>建立結構化標記</h1>

<div class="news1">
<h2>結構</h2>
<dl>
<dt>Html項目</dt>
<dd>Html 說明文字, html標記應用缺點</dd>
<dt>Xhtml項目</dt>
<dd>Xhtml 說明文字, xhtml標記應用優點</dd>
<dl>
</div>

<div class="news2">
<h2>格式</h2>
<p>以css取代老式的html表格配置, ....... </p>
</div>

</div>


css寫法為:
#content {........}

h1 {........}
h2 {........}

.news1 {........}
.news1 dl {........}
.news1 dt {........}
.news1 dd {........}
.news1 dd a {........}
.news1 dd a hover {........}

.news2 {........}
.news2 p {........}
.news2 p a {........}
.news2 p a:hover {........}

運用上述方式編寫網頁, 將來需開始支援其他平台時, 應該可以避免很多資料轉換這種疲累的狀況了

YouGov報告: 網頁設計不良損害健康

以下是國外ㄧ篇很有趣的調查報告, 做網頁的人要有良心啊!


原文刊載於: Poor website design may have negative effects on users' nervous system
http://www.publictechnology.net/modules.php?op=modload&name=News&file=article&sid=7223

以前有消息說,如果你擁有一個大螢幕顯示器,卻使用較低的解析度(800*600或更低),可能會讓你患上腦瘤。現在最近的一份報告表明,長期流覽設計不良的網頁也會損害你的健康。

這份報告綜合了YouGov對2500位使用者的調查,這些人被要求在不同的網站尋找需要的資訊,然後檢測他們的物理和生理反應,例如腦波、心率、肌肉緊張程度和皮膚傳導現象。檢測結果表明,設計不良的網頁會導致壓力和精神暴躁等,並可能導致“滑鼠狂躁綜合症”。

最讓人鬱悶的原因前五名分別是“慢”、“導航混亂”、“彈出窗口過多”、“不必要的廣告”和“打不開”。大家的期望是希望所有的網頁都能高速、功能全面和準確,就像Google那樣。

“滑鼠狂躁綜合症”的初期症狀包括心率加快、出汗、亂點滑鼠、詛咒系統、摔打滑鼠等。各位想一下,平時是不是會有這樣的情況呢?如果經常發生,那你就要注意平和一下自己的心態了。

在頁面上更換css style

原文刊載於 http://www.alistapart.com/stories/alternate/

做法如下:

步驟1. -->
自上述網址下載 styleswitcher.js 檔案放入目錄資料夾, 並在<head>加上
<script type="text/javascript" src="styleswitcher.js"></script>

步驟2. -->
將欲加入的css style 依次列進<head>
第一行stylesheet 為預設的style, 其他alternate stylesheet 為選項style, 然後自定title 名稱(如以下藍字)

<link rel="stylesheet" type="text/css" href="css/index01.css" title="green"><link rel="alternate stylesheet" type="text/css" href="css/index02.css" title="yellow"><link rel="alternate stylesheet" type="text/css" href="css/index03.css" title="purple">

步驟3. -->
內容html選項的寫法如下, 以下的紅字部分需逐一對應步驟2的藍字才能趨動所命名的style

<p> 更換頁面風格 : 【 <a href="css/index01.css" onclick="setActiveStyleSheet('green'); return false;">綠色</a> 】
【 <a href="css/index02.css" onclick="setActiveStyleSheet('yellow'); return false;">褐色</a> 】
【 <a href="css/index03.css" onclick="setActiveStyleSheet('purple'); return false;">紫色</a> 】 </p>

雖然有預設的style, 但因為js檔中有 Cookie 寫法, 下次再開啟時會以上次最後設定的style為style

各瀏覽器最新版本下載網址

Firefox 2
http://www.mozilla.com/en-US/firefox/

Opera 9
http://www.opera.com/

Netscape 8
http://browser.netscape.com/ns8/

IE 7 (for XP)
http://www.microsoft.com/taiwan/windows/ie/default.mspx

使用者介面設計權威 - Jakob Nielsen

Jakob Nielsen 是網站使用者介面設計的權威, useit com中有很多他的文章和書籍介紹
useit.com: Jakob Nielsen's Website:
http://www.useit.com/alertbox/
Taiwan.CNET:
http://taiwan.cnet.com/builder/authoring/story/0,2000020511,20009862-5,00.htm

Jakob的研究採用所謂 "使用者測試(Usibility Testing)"
就是找幾個目標使用者(通常是6~7個就夠了)做些任務型測試.
例如到網站中找一筆資料, 然後仔細觀察紀錄這些人花多少時間完成任務?
中間曾遇到哪些問題? 需要提供什麼提示? 如果找不到又是為什麼?
最後再歸結出問題點做改善.

他根據多次測試歸納出所謂"好用的網站"應該遵循的設計原則(和無障礙設計有些區別),
當然也指出了一些誤導的或不好用的設計, 他說使用者平均只花1分49秒逛一個站, 雖然有點驚訝, 但是想想自己, 似乎就是這麼回事.

網頁設計不是只有漂亮而已, 客戶花一筆錢做網頁更重要的是可以達到的功能和目的為何? 或說希望向他們的目標使用者傳遞什麼訊息或留下什麼印象, Jakob的文章和書籍絕對值得網頁設計人員研讀

Adobe Max 2006 課程範例 -- 如何以Spry與Dreamweaver開發AJAX

Adobe Max 2006 有一堂課 "如何以Spry與Dreamweaver開發AJAX" 的範例介紹, 可到以下網址直接看範例效果或下載完整範例

Spry Demos:
http://labs.adobe.com/technologies/spry/demos/

下載完整範例後解壓縮, 可以在demo/index.htm看到範例首頁, sample/index.htm 是關於資料排序的範例檔案, Articles/ 是這所有套件的英文說明文件(用IE7的人如果無法看到正常畫面的話可以改用其他瀏覽器), 雖說是專為設計人員寫的, 但是要懂這些script也不是那麼容易

Spry是Adobe為設計人員開發的JavaScript library(open source), 以html為主再結合 css 和JavaScript的Ajax, 這個套件還在開發當中.

這樣的效果在關閉JavaScript時無法顯示, 並不適用於必須符合無障礙規範的網站但是其他不用考慮無障礙規範的網站能運用這種效果應該可以為網站設計加好幾顆星!