app 設計入門 第一課

45

Upload: dryden

Post on 30-Nov-2014

164 views

Category:

Design


0 download

DESCRIPTION

從互動裝置 到手機APP 該怎麼入門 APP Design? APP 設計入門 第一課,上課囉!

TRANSCRIPT

Page 1: App 設計入門 第一課
Page 2: App 設計入門 第一課
Page 3: App 設計入門 第一課
Page 4: App 設計入門 第一課
Page 5: App 設計入門 第一課

Parrish Tarot!派黎思塔羅牌

Page 6: App 設計入門 第一課

iWish Moon Block

Page 7: App 設計入門 第一課

XMS Media !Gallery Menu

Page 8: App 設計入門 第一課
Page 9: App 設計入門 第一課
Page 10: App 設計入門 第一課
Page 11: App 設計入門 第一課

APP 設計⼊入⾨門 第⼀一課http://digest.definite.name/lightmeter-app.html

Page 12: App 設計入門 第一課
Page 13: App 設計入門 第一課
Page 14: App 設計入門 第一課
Page 15: App 設計入門 第一課

www.dribbble.com

Page 16: App 設計入門 第一課

www.pttrns.com

Page 17: App 設計入門 第一課

www.mobile-patterns.com/recently-added

Page 18: App 設計入門 第一課

www.lovelyui.com

Page 19: App 設計入門 第一課

capptivate.co

Page 20: App 設計入門 第一課

www.android-app-patterns.com

Page 21: App 設計入門 第一課
Page 22: App 設計入門 第一課
Page 23: App 設計入門 第一課
Page 24: App 設計入門 第一課
Page 25: App 設計入門 第一課

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 設計入門 第一課

⼀一致性和標準 Consistency and standards使⽤用者不應該猜測不同的字彙、狀態、動作是不是代表同⼀一件事。

Page 27: App 設計入門 第一課

預防錯誤 Error prevention⽐比起提供使⽤用者明確易懂的錯誤訊息,更重要的是如何防⽌止使⽤用者發⽣生錯誤。

Page 28: App 設計入門 第一課

辨識⽽而⾮非記憶 Recognition rather than recall盡量減少使⽤用者需要記憶的事情、⾏行動以及可⾒見的選項。

Page 29: App 設計入門 第一課

https://developer.apple.com/library/ios/design/index.html

Page 30: App 設計入門 第一課
Page 31: App 設計入門 第一課
Page 32: App 設計入門 第一課

http://www.google.com/design/spec/material-design/introduction.html

Page 33: App 設計入門 第一課
Page 34: App 設計入門 第一課

http://webdesign.tutsplus.com/tutorials/sketch-for-beginners-design-a-login-form-interface--cms-21534

Page 35: App 設計入門 第一課

http://webdesign.tutsplus.com/tutorials/sketch-for-beginners-design-a-login-form-interface--cms-21534

Page 36: App 設計入門 第一課
Page 37: App 設計入門 第一課

當你 要設計⼀一⽀支⼿手錶時

Page 38: App 設計入門 第一課

不要預先設定⾃自⼰己是設計 ⼿手錶

Page 39: App 設計入門 第一課

你做的是⼀一只 顯⽰示時間的裝置

Page 40: App 設計入門 第一課

智慧型⼿手機

Page 41: App 設計入門 第一課
Page 42: App 設計入門 第一課
Page 43: App 設計入門 第一課
Page 44: App 設計入門 第一課
Page 45: App 設計入門 第一課

APP 設計⼊入⾨門 第⼀一課

下課啦!我們下次⾒見