+ All Categories
Transcript
Page 1: iOS Design to Code - Design

iOS developerhttp://about.me/gliyao

design > code

Liyao Chen

Page 2: iOS Design to Code - Design

Objectiveminimum viable product > MVP

Page 3: iOS Design to Code - Design

DesignWork on Question 5 words Do not start from 0 Salt

Page 4: iOS Design to Code - Design

UI Design BasiciOS App Anatomy Adaptivity and LayoutTypography Navigation

Page 5: iOS Design to Code - Design

iOS App Anatomy

Page 6: iOS Design to Code - Design

iOS App Anatomy

Page 7: iOS Design to Code - Design

iOS App AnatomyUINavigationBar

UITableView

UIView

Page 8: iOS Design to Code - Design

iOS App AnatomyUIBarButtonItem

UITableViewCell

UIButton

UIButton

UILabel

UILabelUIImageView

Page 9: iOS Design to Code - Design

iOS App Anatomy LIVE

Page 10: iOS Design to Code - Design

Adaptivity and Layout

Page 11: iOS Design to Code - Design

Typography

Page 12: iOS Design to Code - Design

Typography

Page 13: iOS Design to Code - Design

Navigation

Page 14: iOS Design to Code - Design

Navigation

Page 15: iOS Design to Code - Design

Image assets

Page 16: iOS Design to Code - Design

Image assets

Page 18: iOS Design to Code - Design

Storyboard

Page 19: iOS Design to Code - Design

Frame

Page 20: iOS Design to Code - Design

BUT

Page 21: iOS Design to Code - Design

Frame

Page 22: iOS Design to Code - Design

Autolayout

Page 23: iOS Design to Code - Design

The fundamental building block in Auto Layout is the constraint.

Constraints express rules for the layout of elements in your interface;

Autolayout

Page 24: iOS Design to Code - Design

Autolayout

Page 25: iOS Design to Code - Design

Autolayout

Page 26: iOS Design to Code - Design

Autolayout

Page 27: iOS Design to Code - Design

Autolayout

Page 28: iOS Design to Code - Design

Autolayout tipsOutside to inside Left to right Top to down

Page 29: iOS Design to Code - Design

Autolayout LIVE

Page 30: iOS Design to Code - Design

– Batman

「It’s not who you are underneath, it’s what you do that defines you.」

Page 31: iOS Design to Code - Design

Reference• http://www.paintcodeapp.com/news/iphone-6-

screens-demystified

• https://developer.apple.com/library/IOs/documentation/UserExperience/Conceptual/AutolayoutPG/AutoLayoutConcepts/AutoLayoutConcepts.html#//apple_ref/doc/uid/TP40010853-CH14-SW1


Top Related