使用者經驗 - User Experiences 台灣微軟 吳典璋 Dann Wu 產品行銷經理 (dannwu@microsoft.com, 02-37253129)

情感聯繫 Emotional Connection 使用者經驗設計重要性 創新 Innovation 解決問題 直覺 Intuitive 變得簡單 情感聯繫 Emotional Connection 得到認同

軟體設計的使用者經驗 – 體貼使用者 變身前 – Windows XP 變身後 – Windows 7

軟體設計的使用者經驗 – 體貼使用者 變身前 – Windows XP 變身後 – Windows 7

還在使用 HTML 設計網頁嗎? 你使用的多媒體互動設計工具容易上手嗎? 你設計的網站吸引人嗎?

體驗 Microsoft Silverlight 網站的感動! 支援各家瀏覽器、只需安裝一次 多媒體、高互動 就是 Cool! It brings me great pleasure to announce today that Silverlight 3 is available NOW Additionally…. Silverlight is now being pushed through Microsoft Update to an audience of up to XXXX users

Before … 單調無特色的網路商店

After…高互動真實的購物經驗

Before … 單調的企業報表

After… 直覺且高互動 3D 高階主管戰情室 – 支援 Windows 7 多點觸控

After… 一目了然的圖示

新奇及趣味性十足… Michael Jackson 紀念相簿 – 蒙太奇效果 + DeepZoom 相簿 - http://www.msn.michaeljackson.shoothill.com/

找一找 “誰殺了甘迺迪” 歷屆美國總統紀念相簿 – http://www.silverlightbuzz.com/2009/08/03/obama-to-jfk-deep-zoom/

Silverlight 在多媒體及影音視訊應用 http://memorabilia.hardrock.com/ Hard Rock 紀念相簿 MSN 明星相簿 Wimbledon – 線上直播 Ralph Photo Gallary – DeepZoom相簿 Michael Jackson 紀念相簿 - Mosaic + DeepZoom效果

Silverlight 在電子商務應用案例 故宮線上商城 – https://www.npmeshop.com/slnpm/ 長榮航空 – 線上行程查詢 http://eservice2.evaair.com/EABcsPage.aspx 新光證券 – 線上下單系統 http://ww2.sk88.com.tw/sl/

故宮線上精品 改版後 https://www.npmeshop.com/slnpm

Touch-less in XBOX 體感遊戲 Exciting Demo - http://www.xbox.com/en-US/live/projectnatal/

使用者經驗 不僅僅是漂亮的操作介面而已 … 滿足且黏住你的客戶 帶給你競爭優勢 新商機及$$$

微軟多媒體互動設計及開發平台 程式開發人員 - 完整的 .NET 程式開發工具 使用者 - 豊富的多媒體互動經驗 網頁設計、多媒體互動設計師 – 多媒體互動及網頁設計工具 Silverlight 應用設計 從草圖描繪、原型設計到產品發表 程式開發人員 - 完整的 .NET 程式開發工具 End with a note about how MS is the market leader because we’re providing a comprehensive platform for real software development. Which is why customers are betting on MS… Let us show you… 使用者 - 豊富的多媒體互動經驗

微軟多媒體互動設計工具 – Expression Studio 創意眼資訊 & WEBSPACE 台灣微軟特約顧問 蘇東偉 Web： http://www.eyeshop.com.tw E-Mail：eyeshop.jerry@gmail.com 、 jerry@webspace.com.tw Blog：http://webok.tw

選擇適合的網站設計及多媒體互動設計工具 - 仍有些單位還在用 FrontPage 你只開發 SharePoint 網站嗎? SharePoint Designer Yes Expression Web Expression Studio No 設計多媒體互動/ Silverlight, 動畫設計 一般標準型網站 SharePoint Designer 讓資訊工作者在 SharePoint Server上開發應用程式和解決方案 Expression Web - 專業網頁設計工具，可以輕鬆建立新一代之互動式多媒體網站，或是一般標準型網站。 Expression Studio - 專業設計師設計工具，並可運用 Silverlight 或 WPF 技術設計使用者互動經驗極佳之新一代網站及Windows應用程式 FrontPage 2003 – 上一代網頁設計工具，已下架不再銷售。並且停止技術支援

微軟多媒體互動設計工具 多媒體網頁設計 Silverlight 及動畫設計 - Expression 系列 包括 Expression Web 功能 + Expression Blend Silverlight 及 WPF 介面及動畫設計 SketchFlow – 草圖描繪及互動式雛型設計 多媒體網頁設計 HTML/CSS 網站設計 Silverlight Deep Zoom 相簿網站 Banner 圖像設計 – Expression Design Silverlight 線上影音 – Expression Encoder

特色 1 會 Office 就會網頁設計 輕鬆製作多媒體效果 SuperPreview – 即時預覽網頁 網頁設計 快速上手

與 Office 相同的設計介面- 上手容易 Expression Web 的功能選單

網頁多媒體效果- 支援各種多媒體檔案 插入各種多媒體效果

有Expression Web，人生是彩色的… 類似Office的簡易操作介面，視覺化輕鬆產生HTML、XHTML、CSS等符合最新標準的網頁，不用再那麼麻煩要去記憶很多網頁標籤語法。 如果您以前用過FrontPage，絕對應該試試Expression Web，缺點不見了，優點變更多。FrontPage雖然使用上方便，但是有時候容易被使用者抱怨說產生了一些不必要的Code，或是產生出來的Code只能在IE瀏覽器上顯示，自行插入的語法也比較容易在美編排版時被影響或誤刪….，這些問題在Expression Web裡都獲得良好的解決。 由使用者觀點看 Expression Web 3 的十大獨特優勢：http://www.microsoft.com/taiwan/expression/resources/LearnExpressionWeb003.aspx 27

Expression Web裡的圖片功能 Expression Web裡的圖片工具列功能，能夠做自動影像目錄標籤、旋轉翻轉、對比、亮度、裁剪、設定透明色、灰階、刷淡、重新取樣等功能，讓您可以很快速簡易的對圖檔編修，還可以有矩形、圓形、多角形作用區，可以在圖檔上做不同區域連結到不同超連結的影像地圖功能。 另外還可以直接將目前網頁上的圖檔轉換成其他格式。 28

Expression Web裡的圖片功能 支援可直接匯入Photoshop的.psd圖檔格式，在匯入時能選擇只匯入哪些圖層，同時可以挑選匯入後要轉換成哪種圖檔格式(.png、.jpg、.gif)，可增進工作效率，非常的方便！ 29

Expression Web設計CSS網頁 不同顏色的圓點與灰圈等圖示所代表的意義，請您參閱右表說明，這些是CSS的選取器的基本觀念，也是CSS語法標準的運用方法，但Expression Web幫您以視覺化的畫面做呈現，以輔助您降低輸入CSS參數時的門檻。 Expression Web可以使用.dwt 動態網站範本 (Dynamic Web Template) 的格式，動態網站範本是網頁的 HTML 主版，能夠允許您自建範本來存放網頁上可修改的設定、格式與網頁元素，例如文字、圖形、版面配置、樣式與區域，將 DWT 附加到網站上的網頁後，即會以該範本定義這些網頁的版面配置。 您可以上網搜尋其他的範本，如此您的 Expression Web 就能具備擴充彈性了。您也可以借此觀摩別人是如何設計建構網頁的訣竅，以增強自己的網頁設計相關觀念與功力。 Expression Web 網站套件範本的下載、封裝與修改運用： 30 http://www.microsoft.com/taiwan/expression/resources/LearnExpressionWeb004.aspx

Expression Web協助工具與相容性報告、網站摘要 相容性檢查可列出程式碼錯誤及不相容的程式碼。可以協助您了解網站中哪些有檔案尚未被連結，並可以使用「慢速網頁」 的功能檢查網站內是否有檔案過大的網頁等情況，而「超連結」的選項則可以提供您了解哪些網頁連結有被中斷的清單。 31

使用Expression Web設計資料庫網頁 Expression Web 擁有完整 ASP.NET 3.5 控制項與 ASP.NET AJAX，提供最正宗強悍的 ASP.NET 程式語法與搭配開發能力，並擁有原廠完整支援，相較他牌網頁設計軟體即使有支援 ASP.NET 開發，通常也會較為有限與不足。 開啟選單列的「面板」/「工具箱」的選項，並展開在此介面裡的「ASP.NET 控制項」項目，您將會發現 Expression Web 對於 ASP.NET 所能支援相關功能，實在是琳瑯滿目一應俱全。 32

使用Super Preview功能做網頁視覺診斷 33 http://www.microsoft.com/taiwan/expression/resources/LearnExpressionWeb001.aspx

特色 2 無段放大 趣味無限 快速製作 互動式相簿 Silverlight DeepZoom

Silverlight DeepZoom 相簿 Hard Rock 紀念相簿 - http://memorabilia.hardrock.com/

Silverlight Deep Zoom效果製作 選擇要加入的相片，可以按住Ctrl鍵不放做不連續的選取，選取好之後就可以點選「開啟」按鈕。 點選上方『Compose』的頁面標籤，將下方的圖片拖曳到上方深灰色的編輯區中，可以利用拖曳法改變相片的位置和大小，左方的對齊工具如果有需要也可以運用。 36

特色 3 線上影音視訊體驗 HD 全螢幕高畫質 (1080p) 播放流暢 - 自動偵測頻寬 直接發佈上網 順暢串流 – Smooth Steaming

NBC Sports 線上直播 – 2009 溫布敦網球賽 高畫質 HD 線上串流 – 使用 Expression Encoder NBC Sports 線上直播 – 2009 溫布敦網球賽

Expression Encoder製作Silverlight Streaming影音串流 http://msdn.microsoft.com/zh-tw/windowsmobile/ee441165.aspx http://msdn.microsoft.com/zh-tw/windowsmobile/ee441163.aspx 瀏覽器需要安裝Silverlight ： http://go.microsoft.com/fwlink/?LinkId=107362 Silverlight 高畫質HD串流服務： http://www.iis.net/media/experiencesmoothstreaming Silverlight3支援： Full HD(1080p)，1920x1080高畫質影片。 開放的編碼格式H.264、VC-1 IIS Media Services 3.0的Smooth Streaming(流暢的視訊串流服務，需在IIS7以上版本環境)，帶來不停頓的影音體驗。 自動偵測使用者網路頻寬、CPU運算能力、並可利用GPU加速功能，以決定最佳瀏覽畫質。 39

特色 4 直接套用動作無需寫程式 匯入製作好 Photoshop 或 Illustrator 圖形 動畫製作超容易

動畫製作超容易- 使用 Expression Blend 套用動畫元件

Expression 學習資源http://www. microsoft 完整的中文學習資源 技術文章 教學影片 範例及Lab 教學課程 – 包括 pptx, docx, video & Lab 適合學校老師教學或自學用 適合多媒體設計師 線上教學影片 以 Expression Blend 製作基本動畫為主 http://silverlight.heyshow.com.tw/

更多 Silverlight 的展示 Silverlight案例展示區(國外)： 人腦大戰電腦遊戲：http://www.caesarsvault.com/CaesarsArcade/S0001HiStakesMatrix.aspx 歷屆美國總統紀念相簿：http://www.silverlightbuzz.com/2009/08/03/obama-to-jfk-deep-zoom/ 亞馬遜行事曆：http://www.arugoworks.net/amacal/amacal.aspx Touch-less in XBOX360體感遊戲展示影片：http://www.xbox.com/en-US/live/projectnatal/ Silverlight案例展示區(台灣)： 藝人時計：http://ent.msn.com.tw/clock/artist/ 2010 台北車展3D 虛擬實境體驗 ：http://auto.msn.com.tw/2010autoshow/mitsubishi_lancer.htm 2010 台北車展show girl：http://auto.msn.com.tw/2010autoshow/deepzoom.htm 2009 bing 風雲人物排行榜：http://promotion.msn.com.tw/event/top2009/event.htm http://ent.msn.com.tw/hd/watch.aspx?sn=0912240004 (魔境夢遊 - 銀光HD - MSN 娛樂) http://ent.msn.com.tw/hd/watch.aspx?sn=1003100001 (玩具總動員3 - 銀光HD - MSN 娛樂) http://ent.msn.com.tw/hd/watch.aspx?sn=1003020002 (波斯王子：時之刃 - 銀光HD - MSN 娛樂) 43

微軟多媒體互動設計工具 多媒體網頁設計 Silverlight 及動畫設計 - Expression 系列 包括 Expression Web 功能 + Expression Blend Silverlight 及 WPF 介面及動畫設計 SketchFlow – 草圖描繪及互動式雛型設計 多媒體網頁設計 HTML/CSS 網站設計 Silverlight Deep Zoom 相簿網站 Banner 圖像設計 – Expression Design Silverlight 線上影音 – Expression Encoder

Silverlight Deep Zoom效果製作 http://www.silverlightbuzz.com/2009/08/03/obama-to-jfk-deep-zoom/ http://memorabilia.hardrock.com http://www.msn.michaeljackson.shoothill.com 要製作這樣的效果，可開啟「Deep Zoom Composer 」這套免費軟體，點選「 New Project 」建立一個新專案。 選擇專案儲存的路徑及專案名稱，確認後直接點選「 OK 」按鈕。 在「 Import」步驟中，將要匯入相片點選「 Add image」按鈕即可置入。 45

Silverlight Deep Zoom效果製作 點選上方「Export 」的頁面標籤： 在「 Output type 」我們要選擇「 Silverlight Deep Zoom 」的項目，這樣才會有相片展示的特效。 在「 Name 」的文字欄位中輸入檔案名稱。 在『Location 」項目中點選「 Browse 」按鈕，可以指定儲存的位置。 而下方的輸出格式我們選擇「 Export as a compostition(single image) 」。 Templates選擇「 Deep Zoom Navigation(default) 」項目。 完成後就可以點選「 Export 」按鈕。 當輸出完成後會詢問要觀看何種輸出的結果，若打算觀看網頁呈現的結果，可以點選「 Preview in Browser」，即完成此效果瀏覽。 Deep Zoom免費程式下載體驗：http://www.microsoft.com/taiwan/Expression/try-it/Default.aspx 46

Expression Design Microsoft Expression Design 3 可建立圖形以用於您設計專案中。 Microsoft Expression Design 3 可與 Expression Blend 或 Expression Web 完美的結合。運用現有的作品，或使用直覺式繪圖工具，迅速建置複雜的向量資產。無瑕疵地將它們傳送至您的 Expression Blend 或 Expression Web 專案，確知它們在整個設計人員-開發人員工作流程中將保有相同的精確度。 拓展您的價值 Expression Design可與 Expression Blend 或 Expression Web 完美的結合。迅速建置複雜的向量資產，然後透過 XAML 毫無障礙地將它們傳送到您的 Expression Blend 專案，或為您的 Expression Web 網站量身切割。 發揮創意 透過創新的向量繪圖工具，以及可套用至向量或匯入點陣圖式影像的非破壞性效果，發揮您的創意。無論是套用粗糙的邊緣和流暢的筆觸，皆可同時保有向量路徑的彈性。Expression Design 是由設計人員專為設計人員從頭開始建置的。 完全呈現您的願景 建立資產，並確知它們在整個設計人員與開發人員之間的工作流程將保有相同的精確度。從 Expression Design 到 Expression Blend 或從 Expression Web 到 Visual Studio，各種圖形、使用者介面元素和設計資產都會將您最初的概念完美呈現在成品中。完整實現您的原始願景。 http://www.microsoft.com/taiwan/Expression/products/Design_Overview.aspx 使用Expression Design製作網站的Icon： http://www.microsoft.com/taiwan/expression/resources/LearnExpressionWeb002.aspx 47

Expression Blend 在開啟Expression Blend時，專案類型有分成Silverlight與WPF兩者的差異性，WPF(Windows Presentation Foundation)是基於XML、.NET Framework、向量繪圖等元素形成的Microsoft新技術，被廣泛用於下一代的Windows平台的介面開發。而WPF/E 是WPF的子集合(全名是：Windows Presentation Foundation Everywhere)，在基於XAML與JavaScript之下，可跨越各種平台，目前 WPF/E 已演化轉稱為 Microsoft Silverlight，是微軟在RIA(Rich Interactive Application, Rich Internet Application)策略的主要應用程式開發平台之一，以瀏覽器的外掛元件方式，提供 Web 應用程式中影音串流多媒體與高度互動性前端應用程式的解決方案。 在上一段文字的介紹裡，您可以知道在Expression Blend裡選擇Silverlight或WPF，會導致後續在Blend的介面裡某些功能選項上會有所差異，一般來說Silverlight因受限於瀏覽器外掛元件的網頁模式限制，選項功能上一般來說會比WPF要來的少一些(但以網路程式與動畫的角度來看已經比傳統的網頁技術強悍非常多了)，由於Silverlight動畫是在瀏覽器內執行，所以需要安裝外掛元件。 http://www.microsoft.com/taiwan/Expression/products/Blend_Overview.aspx 48

SketchFlow 透過 SketchFlow.Sketching 迅速建立使用者介面的原型，建立原型是讓您成功地快速探索多種構想和概念，而不用過度投入時間或資源的有效方法。 SketchFlow 徹底改革了您呈現應用程式願景的速度與效率。SketchFlow 提供一種方便又快速的方法，讓您探索、反覆修改和建立使用者介面案例的原型，讓您將概念從一連串粗略的構想發展成栩栩如生且可針對特定客戶或專案要求建立的原型。這種迅速、可反覆修改且經濟實惠的建立原型的方法，可讓您專注在最重要的事物上，發揮創意，並且在預算內準時為您的客戶建置最佳的方案。 SketchFlow 是什麼？ SketchFlow 可讓您迅速且有效的對應和試驗應用程式 UI 的流程、個別畫面的版面配置，以及應用程式如何從應用程式的其中一種狀態轉換成另一種狀態。 http://www.microsoft.com/taiwan/Expression/products/Sketchflow_Overview.aspx 49