App 設計入門 第一課
description
Transcript of App 設計入門 第一課
![Page 1: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/1.jpg)
![Page 2: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/2.jpg)
![Page 3: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/3.jpg)
![Page 4: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/4.jpg)
![Page 5: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/5.jpg)
Parrish Tarot!派黎思塔羅牌
![Page 6: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/6.jpg)
iWish Moon Block
![Page 7: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/7.jpg)
XMS Media !Gallery Menu
![Page 8: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/8.jpg)
![Page 9: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/9.jpg)
![Page 10: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/10.jpg)
![Page 11: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/11.jpg)
APP 設計⼊入⾨門 第⼀一課http://digest.definite.name/lightmeter-app.html
![Page 12: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/12.jpg)
![Page 13: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/13.jpg)
![Page 14: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/14.jpg)
![Page 21: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/21.jpg)
![Page 22: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/22.jpg)
![Page 23: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/23.jpg)
![Page 24: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/24.jpg)
![Page 25: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/25.jpg)
1. 系統狀態的能⾒見度 Visibility of system status 軟體應該保持相同的模式,透過適當的反應,在合理的時間內通知使⽤用者,讓使⽤用者了解正在發⽣生的事情。 !2. 系統與真實世界的關聯性 Match between system and the real world 系統應該要運⽤用使⽤用者的語⾔言,使⽤用他們熟悉的詞句、短語、概念,⽽而不是專業術語。 !3. 使⽤用者的操控⾃自由 User control and freedom 使⽤用者時常以「嘗試錯誤」來選擇系統功能,他們需要⼀一個明顯的「離開」來結束使⽤用者不需要的狀態。並且⽀支援復原步驟與重複步驟。 !4. ⼀一致性和標準 Consistency and standards 使⽤用者不應該猜測同⼀一種動作是否使⽤用不同的字彙、狀態或動作。 !5. 預防錯誤 Error prevention ⽐比起提供使⽤用者明確易懂的錯誤訊息,更重要的是如何防⽌止使⽤用者發⽣生錯誤。 !6. 辨識⽽而⾮非記憶 Recognition rather than recall 盡量減少使⽤用者需要記憶的事情、⾏行動以及可⾒見的選項。 !7. 彈性與使⽤用效率 Flexibility and efficiency of use 功能與易⽤用性之間通常存在⼀一個平衡,對於軟體中的每個特性、功能、或能⼒力,都必須提供⼀一種途徑讓使⽤用者調⽤用或控制。如果使⽤用者的⺫⽬目標是可預測⽽而且常⽤用的,使⽤用者不應該為了實現這個⺫⽬目標⽽而必須做很多⼯工作。 !8. 美觀與簡化設計 Aesthetic and minimalist design 為了防⽌止使⽤用者出錯,可以在軟體設計上就盡量減少使⽤用者的記憶負擔。將功能、操作及選項設計得顯⽽而易⾒見。對於不相關或是很少需要的訊息或功能要隱藏起來,僅突出重點在軟體設計上⾮非常重要。 !9. 幫助使⽤用者認識、偵錯並從錯誤中恢復 Help users recognize, diagnose, and recover from errors 幫助使⽤用者識別、診斷、並從錯誤中恢復,將損失降到最低。如果無法⾃自動挽回,則提供詳盡的說明⽂文字和指導⽅方向,⽽而⾮非難以理解的代碼。最好能在告知使⽤用者發⽣生錯誤的同時⼀一併提供解決⽅方法。 !10. 幫助與說明⽂文件 Help and documentation ⼀一個軟體在完美的情形下不需要任何說明⽂文件使⽤用者就能夠操作,但就算是最好的軟體也需要提供幫助與說明⽂文件。
10 Usability Heuristics for User Interface Designby JAKOB NIELSEN
www.nngroup.com/articles/ten-usability-heuristics
![Page 26: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/26.jpg)
⼀一致性和標準 Consistency and standards使⽤用者不應該猜測不同的字彙、狀態、動作是不是代表同⼀一件事。
![Page 27: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/27.jpg)
預防錯誤 Error prevention⽐比起提供使⽤用者明確易懂的錯誤訊息,更重要的是如何防⽌止使⽤用者發⽣生錯誤。
![Page 28: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/28.jpg)
辨識⽽而⾮非記憶 Recognition rather than recall盡量減少使⽤用者需要記憶的事情、⾏行動以及可⾒見的選項。
![Page 30: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/30.jpg)
![Page 31: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/31.jpg)
![Page 32: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/32.jpg)
http://www.google.com/design/spec/material-design/introduction.html
![Page 33: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/33.jpg)
![Page 34: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/34.jpg)
http://webdesign.tutsplus.com/tutorials/sketch-for-beginners-design-a-login-form-interface--cms-21534
![Page 35: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/35.jpg)
http://webdesign.tutsplus.com/tutorials/sketch-for-beginners-design-a-login-form-interface--cms-21534
![Page 36: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/36.jpg)
![Page 37: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/37.jpg)
當你 要設計⼀一⽀支⼿手錶時
![Page 38: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/38.jpg)
不要預先設定⾃自⼰己是設計 ⼿手錶
![Page 39: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/39.jpg)
你做的是⼀一只 顯⽰示時間的裝置
![Page 40: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/40.jpg)
智慧型⼿手機
![Page 41: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/41.jpg)
![Page 42: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/42.jpg)
![Page 43: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/43.jpg)
![Page 44: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/44.jpg)
![Page 45: App 設計入門 第一課](https://reader033.fdocument.pub/reader033/viewer/2022061202/547c5bf65906b559798b46fe/html5/thumbnails/45.jpg)
APP 設計⼊入⾨門 第⼀一課
下課啦!我們下次⾒見