iOS Design to Code - Design
-
Upload
liyao-chen -
Category
Engineering
-
view
178 -
download
3
description
Transcript of iOS Design to Code - Design
![Page 2: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/2.jpg)
Objectiveminimum viable product > MVP
![Page 3: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/3.jpg)
DesignWork on Question 5 words Do not start from 0 Salt
![Page 4: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/4.jpg)
UI Design BasiciOS App Anatomy Adaptivity and LayoutTypography Navigation
![Page 5: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/5.jpg)
iOS App Anatomy
![Page 6: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/6.jpg)
iOS App Anatomy
![Page 7: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/7.jpg)
iOS App AnatomyUINavigationBar
UITableView
UIView
![Page 8: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/8.jpg)
iOS App AnatomyUIBarButtonItem
UITableViewCell
UIButton
UIButton
UILabel
UILabelUIImageView
![Page 9: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/9.jpg)
iOS App Anatomy LIVE
![Page 10: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/10.jpg)
Adaptivity and Layout
![Page 11: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/11.jpg)
Typography
![Page 12: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/12.jpg)
Typography
![Page 13: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/13.jpg)
Navigation
![Page 14: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/14.jpg)
Navigation
![Page 15: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/15.jpg)
Image assets
![Page 16: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/16.jpg)
Image assets
![Page 18: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/18.jpg)
Storyboard
![Page 19: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/19.jpg)
Frame
![Page 20: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/20.jpg)
BUT
![Page 21: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/21.jpg)
Frame
![Page 22: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/22.jpg)
Autolayout
![Page 23: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/23.jpg)
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](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/24.jpg)
Autolayout
![Page 25: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/25.jpg)
Autolayout
![Page 26: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/26.jpg)
Autolayout
![Page 27: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/27.jpg)
Autolayout
![Page 28: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/28.jpg)
Autolayout tipsOutside to inside Left to right Top to down
![Page 29: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/29.jpg)
Autolayout LIVE
![Page 30: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/30.jpg)
– Batman
「It’s not who you are underneath, it’s what you do that defines you.」
![Page 31: iOS Design to Code - Design](https://reader030.fdocuments.us/reader030/viewer/2022020723/547e5121b4af9fc9158b5666/html5/thumbnails/31.jpg)
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