使用者經驗 - User Experiences

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

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

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

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

體驗Microsoft Silverlight 網站的感動! 支援各家瀏覽器、只需安裝一次多媒體、高互動就是 Cool!

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/

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

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

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

微軟多媒體互動設計及開發平台 • 網頁設計、多媒體互動設計師 – • 多媒體互動及網頁設計工具 • Silverlight 應用設計 • 從草圖描繪、原型設計到產品發表 • 程式開發人員 - 完整的 .NET 程式開發工具 • 使用者- 豊富的多媒體互動經驗

微軟多媒體互動設計工具 – 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 網站嗎? 設計多媒體互動/Silverlight, 動畫設計 No 一般標準型網站 Expression Studio Expression Web Yes SharePoint Designer • Expression Web - 專業網頁設計工具，可以輕鬆建立新一代之互動式多媒體網站，或是一般標準型網站。 • SharePoint Designer 讓資訊工作者在 SharePointServer上開發應用程式和解決方案 • Expression Studio -專業設計師設計工具，並可運用 Silverlight 或 WPF 技術設計使用者互動經驗極佳之新一代網站及Windows應用程式 • FrontPage 2003 – 上一代網頁設計工具，已下架不再銷售。並且停止技術支援

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

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

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

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

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

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

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

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

使用者經驗 - User Experiences