SlideShare uma empresa Scribd logo
1 de 44
Baixar para ler offline
UI Document
prepared by Tú Bùi
Mục lục
1. Số liệu kỹ thuật
2. Những điều lưu ý
3. Input để design
4. Output cho dev
5. Quy trình làm việc
6. Resources
Số liệu kỹ thuật
1
• Kích thước màn hình
• Font size
• Padding
• Kích thước các elements
Số liệu kỹ thuật
Kích thước màn hình
Số liệu kỹ thuật
iOS: 640 x 1136 px
( màn hình iPhone 5 retina )
Lưu ý: tất cả size đã được x2 để design cho
đúng với màn hình retina
128px
40px
88px
Những số liệu luôn có
• Chiều cao status bar: 40px
• Chiều cao navigation bar: 88px
Android: 720 x 1280 px
( màn hình xịn nhất hiện tại )
Lưu ý: đơn vị đo của Android là dp ( 1dp=2px )
Những số liệu luôn có
• Chiều cao status bar: 48px
• Chiều cao action bar: 112px
• Chiều cao navigation bar: 96px
160px
48px
112px
96px
Font size
Số liệu kỹ thuật
• Font size tiêu đề ở Navigation bar: 32px
• Font size body bình thường: 24px
• Font size body nhỏ nhất: 20px
Hệ điều hành iOS
• Font size tiêu đề ở Navigation bar: 40px
• Font size body bình thường: 28px
• Font size body nhỏ nhất: 24px
Hệ điều hành Android
Padding
Số liệu kỹ thuật
• Của cả 2 hệ điều hành là 40px
Khoảng cách lý tưởng thụt lề
40px
• Trung bình là 20px
Khoảng cách giữa các đối tượng khác loại
vd: chữ cách button 20px
Kích thước các elements
Số liệu kỹ thuật
BELL 100%4:21PM
App gì đó VND
• Lý tưởng nhất là cao 80px
Button
30px• Lý tưởng nhất là cao 30px
Icon trên Navigation
80px Button gì đó
• 1 file kích thước 1024x1024px
App icon
Những điều lưu ý
2
• Số liệu
• Đặt tên
• Screenshots
Những điều lưu ý
Số liệu
Những điều lưu ý
Tất cả các size của 2 hệ điều hành
đều phải là số chẵn
• Màn hình Retina là x2, khi scale xuống màn hình
thường phải chia hết 2
• Dễ tính, dễ nhớ
• Đều, Đẹp
Lý do
Bo góc radius số chẵn
Lý tưởng nhất là radius = 6
9-patches trong android
Là file dùng cho những element khi phóng to
phải giữ 4 góc của element ( ít nhất 1 góc là shape lạ )
9-patches
Đặt tên
Những điều lưu ý
• Group rõ ràng các cụm lại
• Nhớ đặt tên theo đúng chức năng
Về Layer
Đặt tên artboard theo tên của screen
Về Artboard
Cách đặt số:
‣ Số đầu tiên là thứ tự trong flow chính
của wireframe
‣ Số thứ hai trở đi là số thứ tự trong nhánh
của screen chính
ví dụ: 2.3 nghĩa là screen con thứ 3 trong
screen chính thứ 2
• Làm tất cả các UI trong 1 file Sketch
• Lưu 1 bản backup khác trong máy
( làm hết 1 ngày thì replace trên dropbox)
Về file Sketch
Screenshot
Những điều lưu ý
Làm được UI nào thì export ra
thành screenshot liền
• Để mọi người dễ theo dõi
• Lỡ app crash còn hình mẫu để đồ lại
Mục đích
Input để design
3
1. Userflow của app
2. Wireframe của toàn bộ app
3. Brand của app ( nếu có )
4. Mục đích chính của app
5. User là ai ( miêu tả càng rõ càng tốt )
6. iOS hay Android, cái nào ưu tiên hơn?
Output cho Dev
4
1. file UI.sketch ( nhớ sao lưu 1 file ở
chỗ khác để làm backup )
2. folder chứa asset của app
3. folder chứa app icon
4. folder chứa font dùng trong app
5. folder chứa screenshot UI
6. file prototype của Marvelapp
7. folder chứa stock hình ( nếu có )
Quy trình làm việc
5
1. Tham gia buổi họp kickstart project
2. Khi UX đang làm userflow…..thì mình bắt đầu research UI ( tham khảo trên
mạng, xài các app đối thủ )
3. Trao đổi và góp ý về wireframe với UX
4. Bắt đầu làm UI
5. Trao đổi trực tiếp với UX ( để biết về mong muốn, idea này nọ )
6. Làm keyvisual 2, 3 trang UI chính ( thấy gì ko ổn thì trao đổi liền với UX )
7. Review với team về keyvisual
8. Gởi cho PM để confirm với client
9. Chốt xong keyvisual thì chiến cho hết ( song song với việc làm prototype )
10. Bàn giao cho bên Dev
Resources
6
• Thiết kế UI: Sketch 3
• Tạo prototype: Marvel App
Tool sử dụng chính
• http://pttrns.com/
• https://www.pinterest.com/robklaiss/uiux/
• https://instagram.com/gifux/
Tham khảo UI
• https://github.com/zmalltalker/sketch-android-assets
Plugin cắt asset cho android
• http://romannurik.github.io/AndroidAssetStudio/nine-patches.html
Cắt 9-patches cho android
• http://makeappicon.com/
Xuất icon app
• http://www.sketchappsources.com/
Free stock - icon cho UI
• https://marvelapp.com/
Làm prototype
Tất cả thông tin trong slide này
được tổng hợp từ kinh nghiệm cá
nhân của Tú Bùi. Nếu bạn có bất kì
góp ý hay câu hỏi nào hãy liên hệ
với mình qua email
tubui@siliconstraits.vn.
Hết giồi!

Mais conteúdo relacionado

Destaque

Mobile First
Mobile FirstMobile First
Mobile Firstkhaivq
 
One Step Closer To UX - Vo Hoang Chu Kiet
One Step Closer To UX - Vo Hoang Chu KietOne Step Closer To UX - Vo Hoang Chu Kiet
One Step Closer To UX - Vo Hoang Chu KietSilicon Straits
 
Trai nghiem nguoi dung ux
Trai nghiem nguoi dung uxTrai nghiem nguoi dung ux
Trai nghiem nguoi dung uxĐặng Jiang
 
Android UI Design Tips
Android UI Design TipsAndroid UI Design Tips
Android UI Design TipsLuis Abreu
 
Niche Market - Small Is Beautiful
Niche Market - Small Is BeautifulNiche Market - Small Is Beautiful
Niche Market - Small Is BeautifulHieu Nguyen
 
App Studio - Session 2: Build your first App with App Studio
App Studio - Session 2: Build your first App with App StudioApp Studio - Session 2: Build your first App with App Studio
App Studio - Session 2: Build your first App with App StudioTruong Ân. Vo Thieu Le
 
Mobile App Design for Behavior Change
Mobile App Design for Behavior ChangeMobile App Design for Behavior Change
Mobile App Design for Behavior ChangeEva Kaniasty
 
50 lời khuyên bổ ích cho Designer #The 50 Things Every Creative Should Know
50 lời khuyên bổ ích cho Designer #The 50 Things Every Creative Should Know50 lời khuyên bổ ích cho Designer #The 50 Things Every Creative Should Know
50 lời khuyên bổ ích cho Designer #The 50 Things Every Creative Should KnowDuc Tran
 
Mobile App Design Best Practices - Usable Interfaces for Tiny Places
Mobile App Design Best Practices - Usable Interfaces for Tiny PlacesMobile App Design Best Practices - Usable Interfaces for Tiny Places
Mobile App Design Best Practices - Usable Interfaces for Tiny PlacesApigee | Google Cloud
 
[iOS] Basic UI Elements
[iOS] Basic UI Elements[iOS] Basic UI Elements
[iOS] Basic UI ElementsNikmesoft Ltd
 
Android User Interface Design
Android User Interface Design Android User Interface Design
Android User Interface Design Ahmad Firoz
 
Icon & App Design Secrets for Mobile
Icon & App Design Secrets for MobileIcon & App Design Secrets for Mobile
Icon & App Design Secrets for MobileBess Ho
 
Mobile App Design Proposal
Mobile App Design ProposalMobile App Design Proposal
Mobile App Design ProposalEze Ikedi
 
Styles of iOS UI app
Styles of iOS UI appStyles of iOS UI app
Styles of iOS UI appGo Gomu
 
What Makes Great Infographics
What Makes Great InfographicsWhat Makes Great Infographics
What Makes Great InfographicsSlideShare
 
Masters of SlideShare
Masters of SlideShareMasters of SlideShare
Masters of SlideShareKapost
 

Destaque (20)

Options of logo
Options of logoOptions of logo
Options of logo
 
Mobile First
Mobile FirstMobile First
Mobile First
 
Silicon Straits Origin
Silicon Straits OriginSilicon Straits Origin
Silicon Straits Origin
 
Name of squad
Name of squadName of squad
Name of squad
 
One Step Closer To UX - Vo Hoang Chu Kiet
One Step Closer To UX - Vo Hoang Chu KietOne Step Closer To UX - Vo Hoang Chu Kiet
One Step Closer To UX - Vo Hoang Chu Kiet
 
Trai nghiem nguoi dung ux
Trai nghiem nguoi dung uxTrai nghiem nguoi dung ux
Trai nghiem nguoi dung ux
 
Android UI Design Tips
Android UI Design TipsAndroid UI Design Tips
Android UI Design Tips
 
Niche Market - Small Is Beautiful
Niche Market - Small Is BeautifulNiche Market - Small Is Beautiful
Niche Market - Small Is Beautiful
 
App Studio - Session 2: Build your first App with App Studio
App Studio - Session 2: Build your first App with App StudioApp Studio - Session 2: Build your first App with App Studio
App Studio - Session 2: Build your first App with App Studio
 
Mobile App Design for Behavior Change
Mobile App Design for Behavior ChangeMobile App Design for Behavior Change
Mobile App Design for Behavior Change
 
50 lời khuyên bổ ích cho Designer #The 50 Things Every Creative Should Know
50 lời khuyên bổ ích cho Designer #The 50 Things Every Creative Should Know50 lời khuyên bổ ích cho Designer #The 50 Things Every Creative Should Know
50 lời khuyên bổ ích cho Designer #The 50 Things Every Creative Should Know
 
Mobile App Design Best Practices - Usable Interfaces for Tiny Places
Mobile App Design Best Practices - Usable Interfaces for Tiny PlacesMobile App Design Best Practices - Usable Interfaces for Tiny Places
Mobile App Design Best Practices - Usable Interfaces for Tiny Places
 
[iOS] Basic UI Elements
[iOS] Basic UI Elements[iOS] Basic UI Elements
[iOS] Basic UI Elements
 
Android User Interface Design
Android User Interface Design Android User Interface Design
Android User Interface Design
 
Icon & App Design Secrets for Mobile
Icon & App Design Secrets for MobileIcon & App Design Secrets for Mobile
Icon & App Design Secrets for Mobile
 
Mobile App Design Proposal
Mobile App Design ProposalMobile App Design Proposal
Mobile App Design Proposal
 
Styles of iOS UI app
Styles of iOS UI appStyles of iOS UI app
Styles of iOS UI app
 
Kent nguyen-ly-thiet-ke
Kent nguyen-ly-thiet-keKent nguyen-ly-thiet-ke
Kent nguyen-ly-thiet-ke
 
What Makes Great Infographics
What Makes Great InfographicsWhat Makes Great Infographics
What Makes Great Infographics
 
Masters of SlideShare
Masters of SlideShareMasters of SlideShare
Masters of SlideShare
 

Semelhante a [Ebook] UI Document - Tú Bùi

Huong dan-su-dung-orcad
Huong dan-su-dung-orcadHuong dan-su-dung-orcad
Huong dan-su-dung-orcadSy Nam Nguyen
 
Biginginventor2008 120719205845-phpapp01
Biginginventor2008 120719205845-phpapp01Biginginventor2008 120719205845-phpapp01
Biginginventor2008 120719205845-phpapp01Hội Trần
 
Programming android game using and engine
Programming android game using and engineProgramming android game using and engine
Programming android game using and engineNGUYEN VAN LUONG
 
Bài giảng inventor 2008 document transcript
Bài giảng inventor 2008 document transcriptBài giảng inventor 2008 document transcript
Bài giảng inventor 2008 document transcript1100493
 
giới thiệu phần mềm thiết kế cơ khí miễn phí mã nguồn mở FreeCAD
giới thiệu phần mềm thiết kế cơ khí miễn phí mã nguồn mở FreeCADgiới thiệu phần mềm thiết kế cơ khí miễn phí mã nguồn mở FreeCAD
giới thiệu phần mềm thiết kế cơ khí miễn phí mã nguồn mở FreeCADĐạt Minh
 
BÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPT
BÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPTBÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPT
BÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPTMasterCode.vn
 
Bài 4 PHẦN MỀM ỨNG DỤNG CHUYÊN DỤNG
Bài 4 PHẦN MỀM ỨNG DỤNG CHUYÊN DỤNGBài 4 PHẦN MỀM ỨNG DỤNG CHUYÊN DỤNG
Bài 4 PHẦN MỀM ỨNG DỤNG CHUYÊN DỤNGMasterCode.vn
 
Chuong 1 tongquan
Chuong 1 tongquanChuong 1 tongquan
Chuong 1 tongquanVNG
 
Vài Lời nói đầu - Sách VHNghĩa
Vài Lời nói đầu - Sách VHNghĩaVài Lời nói đầu - Sách VHNghĩa
Vài Lời nói đầu - Sách VHNghĩaVo Hieu Nghia
 
Nhập môn lập trình - Vương Bá Thịnh
Nhập môn lập trình - Vương Bá ThịnhNhập môn lập trình - Vương Bá Thịnh
Nhập môn lập trình - Vương Bá Thịnhsilverclaw
 
Tin hoc va hoc duong lan 1/2011/ www.BinhSon.net
Tin hoc va hoc duong lan 1/2011/ www.BinhSon.netTin hoc va hoc duong lan 1/2011/ www.BinhSon.net
Tin hoc va hoc duong lan 1/2011/ www.BinhSon.netPham Vuong
 
Hướng Dẫn Lập Trình Android: 2. Bắt đầu với Hello World.ppt
Hướng Dẫn Lập Trình Android: 2. Bắt đầu với Hello World.pptHướng Dẫn Lập Trình Android: 2. Bắt đầu với Hello World.ppt
Hướng Dẫn Lập Trình Android: 2. Bắt đầu với Hello World.pptWendy587439
 
Design Pattern qua ví dụ thực tế
Design Pattern qua ví dụ thực tếDesign Pattern qua ví dụ thực tế
Design Pattern qua ví dụ thực tếVKhang Yang
 

Semelhante a [Ebook] UI Document - Tú Bùi (20)

Huong dan-su-dung-orcad
Huong dan-su-dung-orcadHuong dan-su-dung-orcad
Huong dan-su-dung-orcad
 
Chuong 1
Chuong 1Chuong 1
Chuong 1
 
Mau slide
Mau slideMau slide
Mau slide
 
Biginginventor2008 120719205845-phpapp01
Biginginventor2008 120719205845-phpapp01Biginginventor2008 120719205845-phpapp01
Biginginventor2008 120719205845-phpapp01
 
Programming android game using and engine
Programming android game using and engineProgramming android game using and engine
Programming android game using and engine
 
Bài giảng inventor 2008 document transcript
Bài giảng inventor 2008 document transcriptBài giảng inventor 2008 document transcript
Bài giảng inventor 2008 document transcript
 
giới thiệu phần mềm thiết kế cơ khí miễn phí mã nguồn mở FreeCAD
giới thiệu phần mềm thiết kế cơ khí miễn phí mã nguồn mở FreeCADgiới thiệu phần mềm thiết kế cơ khí miễn phí mã nguồn mở FreeCAD
giới thiệu phần mềm thiết kế cơ khí miễn phí mã nguồn mở FreeCAD
 
BÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPT
BÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPTBÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPT
BÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPT
 
Bài 4 PHẦN MỀM ỨNG DỤNG CHUYÊN DỤNG
Bài 4 PHẦN MỀM ỨNG DỤNG CHUYÊN DỤNGBài 4 PHẦN MỀM ỨNG DỤNG CHUYÊN DỤNG
Bài 4 PHẦN MỀM ỨNG DỤNG CHUYÊN DỤNG
 
Chuong 1 tongquan
Chuong 1 tongquanChuong 1 tongquan
Chuong 1 tongquan
 
Chuong 1 tongquan
Chuong 1 tongquanChuong 1 tongquan
Chuong 1 tongquan
 
Vài Lời nói đầu - Sách VHNghĩa
Vài Lời nói đầu - Sách VHNghĩaVài Lời nói đầu - Sách VHNghĩa
Vài Lời nói đầu - Sách VHNghĩa
 
Nhập môn lập trình - Vương Bá Thịnh
Nhập môn lập trình - Vương Bá ThịnhNhập môn lập trình - Vương Bá Thịnh
Nhập môn lập trình - Vương Bá Thịnh
 
1 tongquan C#
1 tongquan C#1 tongquan C#
1 tongquan C#
 
1 tongquan
1 tongquan1 tongquan
1 tongquan
 
Tin hoc va hoc duong lan 1/2011/ www.BinhSon.net
Tin hoc va hoc duong lan 1/2011/ www.BinhSon.netTin hoc va hoc duong lan 1/2011/ www.BinhSon.net
Tin hoc va hoc duong lan 1/2011/ www.BinhSon.net
 
Hướng Dẫn Lập Trình Android: 2. Bắt đầu với Hello World.ppt
Hướng Dẫn Lập Trình Android: 2. Bắt đầu với Hello World.pptHướng Dẫn Lập Trình Android: 2. Bắt đầu với Hello World.ppt
Hướng Dẫn Lập Trình Android: 2. Bắt đầu với Hello World.ppt
 
Bài giảng inventor 2008
Bài giảng inventor 2008Bài giảng inventor 2008
Bài giảng inventor 2008
 
Bai giangvb.net
Bai giangvb.netBai giangvb.net
Bai giangvb.net
 
Design Pattern qua ví dụ thực tế
Design Pattern qua ví dụ thực tếDesign Pattern qua ví dụ thực tế
Design Pattern qua ví dụ thực tế
 

Mais de Silicon Straits

[THE PIRATES’ 3-year anniversary] Jonas' story
[THE PIRATES’ 3-year anniversary] Jonas' story[THE PIRATES’ 3-year anniversary] Jonas' story
[THE PIRATES’ 3-year anniversary] Jonas' storySilicon Straits
 
“One man” development process model
“One man” development process model“One man” development process model
“One man” development process modelSilicon Straits
 
What we use to build Android apps at Silicon Straits
What we use to build Android apps at Silicon StraitsWhat we use to build Android apps at Silicon Straits
What we use to build Android apps at Silicon StraitsSilicon Straits
 
Silicon Straits Internship Program Review - Season 1
Silicon Straits Internship Program Review - Season 1Silicon Straits Internship Program Review - Season 1
Silicon Straits Internship Program Review - Season 1Silicon Straits
 
[SIP 2015] Hardware Proposal: Ads view counter for AdsBox
[SIP 2015] Hardware Proposal: Ads view counter for AdsBox[SIP 2015] Hardware Proposal: Ads view counter for AdsBox
[SIP 2015] Hardware Proposal: Ads view counter for AdsBoxSilicon Straits
 
[SIP 2015] Design Proposal: Design and animated prototype
[SIP 2015] Design Proposal: Design and animated prototype[SIP 2015] Design Proposal: Design and animated prototype
[SIP 2015] Design Proposal: Design and animated prototypeSilicon Straits
 
[SIP 2015] iOS Proposal: VIPER
[SIP 2015] iOS Proposal: VIPER[SIP 2015] iOS Proposal: VIPER
[SIP 2015] iOS Proposal: VIPERSilicon Straits
 
[SIP 2015] QA Intern: Test Automation
[SIP 2015] QA Intern: Test Automation[SIP 2015] QA Intern: Test Automation
[SIP 2015] QA Intern: Test AutomationSilicon Straits
 
[SIP 2015] Back-end Proposal: Chat System using Socket.io
[SIP 2015] Back-end Proposal: Chat System using Socket.io[SIP 2015] Back-end Proposal: Chat System using Socket.io
[SIP 2015] Back-end Proposal: Chat System using Socket.ioSilicon Straits
 
[SIP 2015] Marketing Proposal: Making edit flow more informative and simpler
[SIP 2015] Marketing Proposal: Making edit flow more informative and simpler[SIP 2015] Marketing Proposal: Making edit flow more informative and simpler
[SIP 2015] Marketing Proposal: Making edit flow more informative and simplerSilicon Straits
 
[Sharing T3] Tình hình chiến sự Siêu anh hùng - Tú Bùi
[Sharing T3] Tình hình chiến sự Siêu anh hùng - Tú Bùi[Sharing T3] Tình hình chiến sự Siêu anh hùng - Tú Bùi
[Sharing T3] Tình hình chiến sự Siêu anh hùng - Tú BùiSilicon Straits
 
[Sharing T1] How to take good photos - Anh Minh
[Sharing T1] How to take good photos - Anh Minh[Sharing T1] How to take good photos - Anh Minh
[Sharing T1] How to take good photos - Anh MinhSilicon Straits
 
[Sharing T12] Tín dụng - Bí quyết tay trắng làm nên nợ nần - Minh Hòa
[Sharing T12] Tín dụng - Bí quyết tay trắng làm nên nợ nần - Minh Hòa[Sharing T12] Tín dụng - Bí quyết tay trắng làm nên nợ nần - Minh Hòa
[Sharing T12] Tín dụng - Bí quyết tay trắng làm nên nợ nần - Minh HòaSilicon Straits
 
[Sharing T12] Một số câu chuyện về Âm lịch và Dương lịch - Xuân Quang
[Sharing T12] Một số câu chuyện về Âm lịch và Dương lịch - Xuân Quang[Sharing T12] Một số câu chuyện về Âm lịch và Dương lịch - Xuân Quang
[Sharing T12] Một số câu chuyện về Âm lịch và Dương lịch - Xuân QuangSilicon Straits
 
[2014 SSS Infographic] 2014, SSS có gì đặc biệt?
[2014 SSS Infographic] 2014, SSS có gì đặc biệt?[2014 SSS Infographic] 2014, SSS có gì đặc biệt?
[2014 SSS Infographic] 2014, SSS có gì đặc biệt?Silicon Straits
 
[Sharing T11] Hussar - The winged cavalry - Cường Đoàn
[Sharing T11] Hussar - The winged cavalry - Cường Đoàn[Sharing T11] Hussar - The winged cavalry - Cường Đoàn
[Sharing T11] Hussar - The winged cavalry - Cường ĐoànSilicon Straits
 
[Sharing T10] How I improved english commumication in literally 2 months
[Sharing T10] How I improved english commumication in literally 2 months[Sharing T10] How I improved english commumication in literally 2 months
[Sharing T10] How I improved english commumication in literally 2 monthsSilicon Straits
 
[Sharing T9] Pixel Art - Quang Hải
[Sharing T9] Pixel Art - Quang Hải[Sharing T9] Pixel Art - Quang Hải
[Sharing T9] Pixel Art - Quang HảiSilicon Straits
 

Mais de Silicon Straits (20)

[THE PIRATES’ 3-year anniversary] Jonas' story
[THE PIRATES’ 3-year anniversary] Jonas' story[THE PIRATES’ 3-year anniversary] Jonas' story
[THE PIRATES’ 3-year anniversary] Jonas' story
 
Focus - Quang Trung
Focus - Quang TrungFocus - Quang Trung
Focus - Quang Trung
 
“One man” development process model
“One man” development process model“One man” development process model
“One man” development process model
 
Kotlin Overview
Kotlin OverviewKotlin Overview
Kotlin Overview
 
What we use to build Android apps at Silicon Straits
What we use to build Android apps at Silicon StraitsWhat we use to build Android apps at Silicon Straits
What we use to build Android apps at Silicon Straits
 
Silicon Straits Internship Program Review - Season 1
Silicon Straits Internship Program Review - Season 1Silicon Straits Internship Program Review - Season 1
Silicon Straits Internship Program Review - Season 1
 
[SIP 2015] Hardware Proposal: Ads view counter for AdsBox
[SIP 2015] Hardware Proposal: Ads view counter for AdsBox[SIP 2015] Hardware Proposal: Ads view counter for AdsBox
[SIP 2015] Hardware Proposal: Ads view counter for AdsBox
 
[SIP 2015] Design Proposal: Design and animated prototype
[SIP 2015] Design Proposal: Design and animated prototype[SIP 2015] Design Proposal: Design and animated prototype
[SIP 2015] Design Proposal: Design and animated prototype
 
[SIP 2015] iOS Proposal: VIPER
[SIP 2015] iOS Proposal: VIPER[SIP 2015] iOS Proposal: VIPER
[SIP 2015] iOS Proposal: VIPER
 
[SIP 2015] QA Intern: Test Automation
[SIP 2015] QA Intern: Test Automation[SIP 2015] QA Intern: Test Automation
[SIP 2015] QA Intern: Test Automation
 
[SIP 2015] Back-end Proposal: Chat System using Socket.io
[SIP 2015] Back-end Proposal: Chat System using Socket.io[SIP 2015] Back-end Proposal: Chat System using Socket.io
[SIP 2015] Back-end Proposal: Chat System using Socket.io
 
[SIP 2015] Marketing Proposal: Making edit flow more informative and simpler
[SIP 2015] Marketing Proposal: Making edit flow more informative and simpler[SIP 2015] Marketing Proposal: Making edit flow more informative and simpler
[SIP 2015] Marketing Proposal: Making edit flow more informative and simpler
 
[Sharing T3] Tình hình chiến sự Siêu anh hùng - Tú Bùi
[Sharing T3] Tình hình chiến sự Siêu anh hùng - Tú Bùi[Sharing T3] Tình hình chiến sự Siêu anh hùng - Tú Bùi
[Sharing T3] Tình hình chiến sự Siêu anh hùng - Tú Bùi
 
[Sharing T1] How to take good photos - Anh Minh
[Sharing T1] How to take good photos - Anh Minh[Sharing T1] How to take good photos - Anh Minh
[Sharing T1] How to take good photos - Anh Minh
 
[Sharing T12] Tín dụng - Bí quyết tay trắng làm nên nợ nần - Minh Hòa
[Sharing T12] Tín dụng - Bí quyết tay trắng làm nên nợ nần - Minh Hòa[Sharing T12] Tín dụng - Bí quyết tay trắng làm nên nợ nần - Minh Hòa
[Sharing T12] Tín dụng - Bí quyết tay trắng làm nên nợ nần - Minh Hòa
 
[Sharing T12] Một số câu chuyện về Âm lịch và Dương lịch - Xuân Quang
[Sharing T12] Một số câu chuyện về Âm lịch và Dương lịch - Xuân Quang[Sharing T12] Một số câu chuyện về Âm lịch và Dương lịch - Xuân Quang
[Sharing T12] Một số câu chuyện về Âm lịch và Dương lịch - Xuân Quang
 
[2014 SSS Infographic] 2014, SSS có gì đặc biệt?
[2014 SSS Infographic] 2014, SSS có gì đặc biệt?[2014 SSS Infographic] 2014, SSS có gì đặc biệt?
[2014 SSS Infographic] 2014, SSS có gì đặc biệt?
 
[Sharing T11] Hussar - The winged cavalry - Cường Đoàn
[Sharing T11] Hussar - The winged cavalry - Cường Đoàn[Sharing T11] Hussar - The winged cavalry - Cường Đoàn
[Sharing T11] Hussar - The winged cavalry - Cường Đoàn
 
[Sharing T10] How I improved english commumication in literally 2 months
[Sharing T10] How I improved english commumication in literally 2 months[Sharing T10] How I improved english commumication in literally 2 months
[Sharing T10] How I improved english commumication in literally 2 months
 
[Sharing T9] Pixel Art - Quang Hải
[Sharing T9] Pixel Art - Quang Hải[Sharing T9] Pixel Art - Quang Hải
[Sharing T9] Pixel Art - Quang Hải
 

[Ebook] UI Document - Tú Bùi

  • 2. Mục lục 1. Số liệu kỹ thuật 2. Những điều lưu ý 3. Input để design 4. Output cho dev 5. Quy trình làm việc 6. Resources
  • 3. Số liệu kỹ thuật 1
  • 4. • Kích thước màn hình • Font size • Padding • Kích thước các elements Số liệu kỹ thuật
  • 5. Kích thước màn hình Số liệu kỹ thuật
  • 6. iOS: 640 x 1136 px ( màn hình iPhone 5 retina ) Lưu ý: tất cả size đã được x2 để design cho đúng với màn hình retina
  • 7. 128px 40px 88px Những số liệu luôn có • Chiều cao status bar: 40px • Chiều cao navigation bar: 88px
  • 8. Android: 720 x 1280 px ( màn hình xịn nhất hiện tại ) Lưu ý: đơn vị đo của Android là dp ( 1dp=2px )
  • 9. Những số liệu luôn có • Chiều cao status bar: 48px • Chiều cao action bar: 112px • Chiều cao navigation bar: 96px 160px 48px 112px 96px
  • 10. Font size Số liệu kỹ thuật
  • 11. • Font size tiêu đề ở Navigation bar: 32px • Font size body bình thường: 24px • Font size body nhỏ nhất: 20px Hệ điều hành iOS
  • 12. • Font size tiêu đề ở Navigation bar: 40px • Font size body bình thường: 28px • Font size body nhỏ nhất: 24px Hệ điều hành Android
  • 14. • Của cả 2 hệ điều hành là 40px Khoảng cách lý tưởng thụt lề 40px • Trung bình là 20px Khoảng cách giữa các đối tượng khác loại vd: chữ cách button 20px
  • 15. Kích thước các elements Số liệu kỹ thuật
  • 16. BELL 100%4:21PM App gì đó VND • Lý tưởng nhất là cao 80px Button 30px• Lý tưởng nhất là cao 30px Icon trên Navigation 80px Button gì đó
  • 17. • 1 file kích thước 1024x1024px App icon
  • 19. • Số liệu • Đặt tên • Screenshots Những điều lưu ý
  • 21. Tất cả các size của 2 hệ điều hành đều phải là số chẵn • Màn hình Retina là x2, khi scale xuống màn hình thường phải chia hết 2 • Dễ tính, dễ nhớ • Đều, Đẹp Lý do
  • 22. Bo góc radius số chẵn Lý tưởng nhất là radius = 6
  • 23. 9-patches trong android Là file dùng cho những element khi phóng to phải giữ 4 góc của element ( ít nhất 1 góc là shape lạ ) 9-patches
  • 25. • Group rõ ràng các cụm lại • Nhớ đặt tên theo đúng chức năng Về Layer
  • 26. Đặt tên artboard theo tên của screen Về Artboard Cách đặt số: ‣ Số đầu tiên là thứ tự trong flow chính của wireframe ‣ Số thứ hai trở đi là số thứ tự trong nhánh của screen chính ví dụ: 2.3 nghĩa là screen con thứ 3 trong screen chính thứ 2
  • 27. • Làm tất cả các UI trong 1 file Sketch • Lưu 1 bản backup khác trong máy ( làm hết 1 ngày thì replace trên dropbox) Về file Sketch
  • 29. Làm được UI nào thì export ra thành screenshot liền • Để mọi người dễ theo dõi • Lỡ app crash còn hình mẫu để đồ lại Mục đích
  • 31. 1. Userflow của app 2. Wireframe của toàn bộ app 3. Brand của app ( nếu có ) 4. Mục đích chính của app 5. User là ai ( miêu tả càng rõ càng tốt ) 6. iOS hay Android, cái nào ưu tiên hơn?
  • 33. 1. file UI.sketch ( nhớ sao lưu 1 file ở chỗ khác để làm backup ) 2. folder chứa asset của app 3. folder chứa app icon 4. folder chứa font dùng trong app 5. folder chứa screenshot UI 6. file prototype của Marvelapp 7. folder chứa stock hình ( nếu có )
  • 34. Quy trình làm việc 5
  • 35. 1. Tham gia buổi họp kickstart project 2. Khi UX đang làm userflow…..thì mình bắt đầu research UI ( tham khảo trên mạng, xài các app đối thủ ) 3. Trao đổi và góp ý về wireframe với UX 4. Bắt đầu làm UI 5. Trao đổi trực tiếp với UX ( để biết về mong muốn, idea này nọ ) 6. Làm keyvisual 2, 3 trang UI chính ( thấy gì ko ổn thì trao đổi liền với UX ) 7. Review với team về keyvisual 8. Gởi cho PM để confirm với client 9. Chốt xong keyvisual thì chiến cho hết ( song song với việc làm prototype ) 10. Bàn giao cho bên Dev
  • 37. • Thiết kế UI: Sketch 3 • Tạo prototype: Marvel App Tool sử dụng chính
  • 39. • https://github.com/zmalltalker/sketch-android-assets Plugin cắt asset cho android • http://romannurik.github.io/AndroidAssetStudio/nine-patches.html Cắt 9-patches cho android
  • 43. Tất cả thông tin trong slide này được tổng hợp từ kinh nghiệm cá nhân của Tú Bùi. Nếu bạn có bất kì góp ý hay câu hỏi nào hãy liên hệ với mình qua email tubui@siliconstraits.vn.