web mobile app設計與企劃工作坊
TRANSCRIPT
![Page 1: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/1.jpg)
Web/Mobile App設計與企劃工作坊(5/2)
(JOSHUA) GAINSHIN HSIAO
![Page 2: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/2.jpg)
FOR網站專案溝通
FOR網站建置基本工
FOR應用程式規劃
FOR網站內容策略
參考用書
![Page 3: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/3.jpg)
社群:大家⼀一起學更有效率
![Page 4: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/4.jpg)
網站規格書(PRD)四大基本要素:網站地圖,框架圖,模組清單,互動程序
Site map
Wireframe
Pattern library
Use flow
![Page 5: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/5.jpg)
USER CENTERED DESIGN 使用者中心設計
![Page 6: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/6.jpg)
Hear Create Deliver
Time
Abst
ract
Conc
rete
Solutions
Prototypes
Implementation Plan
Stories
OpportunitiesThemes
Observation
DESIGN THINKING 同理心的建立
![Page 7: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/7.jpg)
–早⼀一點提供跟狀況有關的充分資訊、避免錯誤(能夠更有幫助、能夠預期錯誤的回應、搜尋不是唯⼀一的解決方法)–只要求或者提供有關的資訊,不要誤導
(用普通的語言來做說明)–珍惜使用者的點選次數
(完成同樣的任務,使用者需要點選多少次)
減法思考
![Page 8: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/8.jpg)
–記住使用者把東西放在哪裡(同樣的功能,不要讓使用者下回來時找不到)–記住使用者所告訴你的
(如果已經有我的住址或者帳號為什麼我還要輸入⼀一次!為什麼BACK 回去之後,資料都不見了?)–盡量避免在不同輸入模式中的切換
(輸入完帳號密碼或者搜尋字串我可以直接按ENTER嗎?還是得用滑鼠/手指去點按”輸入”或者”搜尋”?)
減法思考
![Page 9: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/9.jpg)
Design Goal Meeting Interface Demand Investigation Card sorting: Terminology / Icon
Paper Wireframe Client Feedback Prototyping Round
Experts Evaluation Client Feedback Usability Testing
Data Analysis Client Feedback Technology Transfer
>
>
>
>
>
>
>
>
30
Interview
Questionnaire
Task Evaluation
Collaboration
Discussion
Presentation
3 3
3 30
>
>
>
介面分析流程取出關鍵項目
![Page 10: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/10.jpg)
功能原型檢視遺漏的動作程序
![Page 11: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/11.jpg)
工具:Axure
![Page 12: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/12.jpg)
從支付寶客戶端談手機客戶端用戶體驗設計
![Page 13: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/13.jpg)
![Page 14: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/14.jpg)
![Page 15: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/15.jpg)
![Page 16: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/16.jpg)
![Page 17: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/17.jpg)
![Page 18: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/18.jpg)
![Page 19: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/19.jpg)
![Page 20: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/20.jpg)
![Page 21: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/21.jpg)
![Page 22: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/22.jpg)
![Page 23: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/23.jpg)
![Page 24: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/24.jpg)
![Page 25: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/25.jpg)
![Page 26: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/26.jpg)
![Page 27: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/27.jpg)
![Page 28: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/28.jpg)
![Page 29: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/29.jpg)
![Page 30: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/30.jpg)
![Page 31: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/31.jpg)
![Page 32: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/32.jpg)
![Page 33: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/33.jpg)
![Page 34: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/34.jpg)
![Page 35: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/35.jpg)
![Page 36: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/36.jpg)
![Page 37: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/37.jpg)
工具:Cacoo
![Page 38: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/38.jpg)
![Page 39: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/39.jpg)
![Page 40: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/40.jpg)
這看似很難,且好像需要一個龐大的
組織來執行。
但其實並不然,有時一個只有少數成
員組成的開發小組也會因彼此的互補
分工與對工作內容的瞭解而達到相同
於一個大型開發團隊的效益,甚至更
高的成效。
主要的重點在於彼此的分工。
![Page 41: Web mobile app設計與企劃工作坊](https://reader031.vdocuments.mx/reader031/viewer/2022020105/5562196ed8b42a7d028b5787/html5/thumbnails/41.jpg)
THANK YOU“Our role as designers, engineers, thinkers; our task is to read things that are not on the page.”
Steve JobsPage 567
(JOSHUA) GAINSHIN HSIAO