Upload
don
View
157
Download
0
Embed Size (px)
DESCRIPTION
使用者經驗 - User Experiences. 台灣微軟 吳典璋 Dann Wu 產品行銷經理 ( [email protected] , 02-37253129). 使用者 經驗設計重要性. 創新 Innovation 解決問題 直覺 Intuitive 變得簡單 情感聯繫 Emotional Connection 得到認同. 軟體設計的使用者經驗 – 體貼使用者. 變身 前 – Windows XP. 變 身後 – Windows 7. 軟體設計的使用者經驗 – 體貼使用者. 變身 前 – Windows XP. - PowerPoint PPT Presentation
Citation preview
使用者經驗- User Experiences
台灣微軟 吳典璋 Dann Wu 產品行銷經理 ([email protected], 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 : [email protected] 、 [email protected] : 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 製作基本動畫為主