Transcript Silverlight Deep Zoom效果製作

使用者經驗
- User Experiences
台灣微軟 吳典璋 Dann Wu
產品行銷經理 ([email protected], 02-37253129)
使用者經驗設計重要性
創新 Innovation
解決問題
直覺 Intuitive
變得簡單
情感聯繫 Emotional Connection
得到認同
還在使用 HTML 設計網頁嗎?
你使用的多媒體互動設計工具容易上手
嗎?
你設計的網站吸引人嗎?
體驗 Microsoft Silverlight 網站的感動!
• 支援各家瀏覽
器、只需安裝一次
• 多媒體、高互動
• 就是 Cool!
Before … 單調無特色的網路商店
After…高互動真實的購物經驗
Before … 單調的企業報表
After… 直覺且高互動
3D 高階主管戰情室 – 支援 Windows 7 多點觸控
After… 一目了然的圖示
新奇及趣味性十足…
Michael Jackson 紀念相簿 – 蒙太奇效果 + DeepZoom
找一找 “誰殺了甘迺迪”
歷屆美國總統紀念相簿 –
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. 新商機及$$$
微軟多媒體互動設計及開發平台
•
•
•
•
網頁設計、多媒體互動設計師 –
多媒體互動及網頁設計工具
Silverlight 應用設計
從草圖描繪、原型設計到產品發表
• 程式開發人員 - 完整的 .NET
程式開發工具
• 使用者 - 豊富的多媒體互動經
驗
微軟多媒體互動設計工具 –
Expression Studio
創意眼資訊 & WEBSPACE 台灣微軟特約顧問 蘇東偉
Web： http://www.eyeshop.com.tw
E-Mail：[email protected] 、 [email protected]
Blog：http://webok.tw
選擇適合的網站設計及多媒體互動設計工具
- 仍有些單位還在用 FrontPage
你只開發
SharePoint 網站
嗎?
Yes
SharePoint
Designer
SharePoint Designer 讓資訊
工作者在 SharePoint Server
上開發應用程式和解決方案
FrontPage 2003 – 上一代網
頁設計工具，已下架不再銷
售。並且停止技術支援
設計多媒體互動/
No 一般標準型網站
Silverlight, 動畫設計
Expression
Studio
Expression Studio 專業設計師設計工具，
並可運用 Silverlight 或
WPF 技術設計使用者互
動經驗極佳之新一代網
站及Windows應用程式
Expression
Web
Expression
Web - 專業網
頁設計工具，
可以輕鬆建立
新一代之互動
式多媒體網站，
或是一般標準
型網站。
微軟多媒體互動設計工具
- 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
• 適合學校老師教學或自學用
http://silverlight.heyshow.com.tw/
• 適合多媒體設計師
• 線上教學影片
• 以 Expression Blend 製作
基本動畫為主