使用者經驗- User Experiences

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

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

變身前 – Windows XP 變身後 – Windows

7

軟體設計的使用者經驗 – 體貼使用者

變身前 – Windows XP

變身後 – Windows 7

軟體設計的使用者經驗 – 體貼使用者

還在使用 HTML 設計網頁嗎 ?

你設計的網站吸引人嗎 ?

你使用的多媒體互動設計工具容易上手嗎 ?

• 支援各家瀏覽器、只需安裝一次• 多媒體、高互動• 就是 Cool!

體驗 Microsoft Silverlight 網站的感動 !

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

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

Before … 單調的企業報表

3D 高階主管戰情室 – 支援 Windows 7 多點觸控

After… 直覺且高互動

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/

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

微軟多媒體互動設計及開發平台

• 使用者 - 豊富的多媒體互動經驗

• 程式開發人員 - 完整的 .NET 程式開發工具

• 網頁設計、多媒體互動設計師 – • 多媒體互動及網頁設計工具• Silverlight 應用設計• 從草圖描繪、原型設計到產品發表

微軟多媒體互動設計工具 – Expression Studio

創意眼資訊 & WEBSPACE 台灣微軟特約顧問 蘇東偉Web ： http://www.eyeshop.com.twE-Mail ： eyeshop.jerry@gmail.com 、 jerry@webspace.com.twBlog ： http://webok.tw

選擇適合的網站設計及多媒體互動設計工具 - 仍有些單位還在用 FrontPage

SharePoint Designer 讓資訊工作者在 SharePoint Server 上開發應用程式和解決方案

Expression Studio - 專業設計師設計工具，並可運用 Silverlight 或 WPF 技術設計使用者互動經驗極佳之新一代網站及Windows 應用程式

Expression Web - 專業網頁設計工具，可以輕鬆建立新一代之互動式多媒體網站，或是一般標準型網站。

你只開發 SharePoint 網站嗎 ?

SharePoint Designer

Yes

Expression Web

Expression Studio

No設計多媒體互動 / Silverlight, 動畫設計 一般標準型網站

FrontPage 2003 – 上一代網頁設計工具，已下架不再銷售。並且停止技術支援

微軟多媒體互動設計工具 - Expression 系列

Silverlight 及動畫設計• 包括 Expression Web 功能 +

Expression Blend• Silverlight 及 WPF 介面及動畫設計• SketchFlow – 草圖描繪及互動式雛型設計多媒體網頁設計• HTML/CSS 網站設計• Silverlight Deep Zoom 相簿網站• Banner 圖像設計 – Expression Design• Silverlight 線上影音 – Expression Encoder

• 會 Office 就會網頁設計• 輕鬆製作多媒體效果• SuperPreview – 即時預覽網頁

網頁設計 快速上手

特色 1

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

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

插入各種多媒體效果

Expression Web 裡的圖片功能

28

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

另外還可以直接將目前網頁上的圖檔轉換成其他格式。

Expression Web 裡的圖片功能

29

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

使用 Expression Web 設計資料庫網頁Expression Web 擁有完整 ASP.NET 3.5 控制項與 ASP.NET AJAX ，提供最正宗強悍的 ASP.NET 程式語法與搭配開發能力，並擁有原廠完整支援，相較他牌網頁設計軟體即使有支援 ASP.NET 開發，通常也會較為有限與不足。

開啟選單列的「面板」 /「工具箱」的選項，並展開在此介面裡的「 ASP.NET 控制項」項目，您將會發現 Expression Web 對於 ASP.NET 所能支援相關功能，實在是琳瑯滿目一應俱全。 3

2

使用 Super Preview 功能做網頁視覺診斷

33http://www.microsoft.com/taiwan/expression/resources/LearnExpressionWeb001.aspx

互動式相簿 無段放大 趣味無限 快速製作

Silverlight DeepZoom

特色 2

Silverlight Deep Zoom 效果製作

36

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

• HD 全螢幕高畫質 (1080p)• 播放流暢 - 自動偵測頻寬• 直接發佈上網

線上影音視訊體驗

順暢串流 – Smooth Steaming

特色 3

高畫質 HD 線上串流 – 使用 Expression Encoder

NBC Sports 線上直播 – 2009 溫布敦網球賽

• 直接套用動作無需寫程式• 匯入製作好 Photoshop 或 Illustrator 圖形

動畫製作超容易

特色 4

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

套用動畫元件

Expression 學習資源 http://www.microsoft.com/taiwan/expression/resources/Learn.aspx • 完整的中文學習資源

• 技術文章• 教學影片• 範例及 Lab• 教學課程 – 包括 pptx,

docx, video & Lab• 適合學校老師教學或自學用

http://silverlight.heyshow.com.tw/

• 適合多媒體設計師• 線上教學影片• 以 Expression Blend 製作基本動畫為主