使用者經驗 - User Experiences 台灣微軟 吳典璋 Dann Wu

Slides:



Advertisements
Similar presentations
1 乌海职业技术学院机电工程系 王若东 副教授 乌海职业技术学院机电工程系 王若东 副教授 2007 年秋季乌海学院计算机类课程 (课程整体设计介绍)
Advertisements

雄獅旅遊集團 產學合作人才培育計畫 說明會.
Android App簡介及 App Inventor 2體驗 靜宜大學資管系 楊子青
初审及流程管理部数据处 咨询电话: 、 电子申请的应用 备注 初审及流程管理部数据处 咨询电话: 、
第21章 .NET报表设计 (时间:1.5次课,3学时).
对症下药 前端工程师如何学习Javascript.
计算机基础赛项(ICT) 使用说明 金芥子教育.
第二章 FrontPage2003概览.
慈方名医系统-标准版(中医版) 能真正帮助医生提高临床疗效的高级全科诊治咨询系统! 使用说明书 慈方中医网
新教材教法研讨 绥中县教师进修学校 邢 杨 2015年9月17日.
图形设计标准教程.
第一章 認識 Visual Basic 本章投影片僅供本書上課教師使用,非經同意請勿拷貝或轉載
第五章 網際爭霸戰 ~網站技術與經營模式大進化 靜宜大學資管系 楊子青
北京教育资源服务平台培训 2008年3月13日.
网站如何定制建设???.
5.6 制作具有动态特效的网页 1. 层和时间轴动画 2. Dreamweaver的Behaviors(行为)概述 华东师范大学计算中心.
Web程序设计基础 太原理工大学 计算机科学与技术学院 林福平 求实创新
新疆生产建设兵团 协同政务平台 主讲人:程志雄 各位领导,早上好,今天很高兴和大家一块学习协同办公系统。
一、国家“守重”网上评价流程(1) 企业 9、公示 工商 2、注册 3、登录 5 、申报 6、报送 8、推荐 1、预申报 4、审核 7、计算
管理系统使用注意事项 1.每个事业单位只有一张唯一的专用光盘。但为防止事业单位专用光盘损坏,可以自行刻录一张新的光盘作为备份。用于网上登记的计算机必须有光驱才行、计算机必须是xp或更好版本的的操作系统,浏览器必须是IE6.0版本以上。 2.事业单位专用光盘中“网下填表与上网提交”功能未开通,待开通后再告知大家。
FrontPage 2003 網頁設計初階 國立臺灣師範大學 資訊中心(ITC) 陳 明 芳 先生
第1章 程式語言與Visual Basic的基礎
TQC 雲端技術及網路服務.
第一章 認識Visual C 環境架構 1-1 認識Visual C Visual Studio 概觀
.NET Framework 3.0 Windows WorkFlow Foundation 工作流设计
第 3 章 網頁的基本設定與預覽.
網路點名系統 致遠管理學院網路通訊學系 張逸中 2007/6/22.
Microsoft® Office SharePoint® Server 2007 訓練
Microsoft PowerPoint Microsoft Producer 2003
Windows 2000 Server Certificate Authority架設
Microsoft Visio 2003 電機四 羅安然.
指導老師 : 張文智 組員: B 黃美華 B 林耕宇 B 蕭凱中 B 游振偉
.NET 簡介.
SOLUTIONACCELERATORS Windows Vista Hardware Assessment 1
【電子商務學程簡介】 網站技術與經營模式大進化
Microsoft Project 2003 Gibson New Microsoft Enterprise Project
第 2 章 FrontPage 2002 的基本操作.
.NET 簡介.
组长:吴蔚 项目组成员:吴蔚,邱丁兰,汪琳莺
myApps柔性定制平台 一个可根据企业个性化需求快速搭建应用系统的工具平台 一个跟企业共成长的平台 一个成本低廉应用广泛的平台
Microsoft® Office SharePoint® Server 2007 訓練課程
EVERY8D 簡訊2.0 MS-Excel 2007 簡訊應用服務 下載與安裝說明
第01章 Excel 2007概述 Excel 2007是目前市场上功能最强大的电子表格制作软件,它和Word、PowerPoint、Access等组件一起,构成了Office 2007办公软件的完整体系。Excel不仅具有强大的数据组织、计算、分析和统计功能,还可以通过图表、图形等多种形式形象地显示处理结果,更能够方便地与Office.
Ch01網際網路、HTML 、 Script 、 ASP.NET簡介
顧武雄 Jovi Ku Microsoft特約資深講師
数据智能同步系统 操作指南.
課程名稱:_____________ 指導教授:_____________
Empower for MircoSoft ISV
Microsoft SQL Server 2008 報表服務_設計
微软云计算 --Windows Azure platform
十 三.使用模板和库.
爱心志愿者服务系统 操作指引 设计:东莞市爱心志愿者协会 网络中心 胡连甲 技术支持电话与微信:
21世纪高职高专规划教材 C#语言程序设计 李继武 彭德林 主 编 张 珑 赵 松 周建辉 副主编
本章要点: 了解ASP.NET 4.5的基础.NET Framework。
瞻前顧後 Windows程式開發方式的重要演進
Ecological Engineering Methods Resource Website
阅读全文 Microsoft SharePoint 新闻
吉美超市网上供应链上线业务拓展 学习交流会
建立站点.
W3C标准网页制作 主讲教师:张 涛.
FrontPage 2000.
Migrate to HTML5.
(若使用IE瀏覽,請選擇功能表的「瀏覽」「全螢幕」
97學年度專題成果展 畢業生職業性向測驗系統之建立
安裝 Visual C Express Edition
Ron Jacobs 高级技术专员 Microsoft
游振昌 Gibson 資訊平方有限公司 執行總監 台灣微軟資深顧問
第1章 HTML基础 主讲人:刘泰然 经济管理学院.
高擴充高穩定高安全 企業級資料管理平台 Report Builder概論 錢曉明 資策會 資深講師 台灣微軟 資深講師.
Windows Workflow Foundation CON 230
Presentation transcript:

使用者經驗 - 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