Styles of iOS UI app
description
Transcript of Styles of iOS UI app
What are the styles of iOs UI app ?
Có rất nhiều app iphone được phát hành trên app store mỗi ngày. Thêm ứng dụng
đồng nghĩa với việc thêm đối thủ cạnh tranh. Để hấp dẫn người dùng thì các app
càng ngày càng phải nhanh hơn, đẹp hơn, đáng tin cậy và dễ dùng hơn.
Bài thuyết trình này sẽ show 1 số mẫu thiết kế cho app iphone và phân loại chúng.
Tuy nhiên sự phân loại chỉ mang tính chất tương đối. Đôi khi nó là sự kêt hợp của
nhiều loại với nhau hay là thuộc thể loại khác mà chưa liệt kê hết.
“
”
Phân loại
1. Rich effect
2. Skeuomorphs
3. Typography
4. Minimalism
5. Hand drawn style
6. Vintage and retro
1.Rich effect
• Yếu tố effect được đặt lên hàng đầu
• Tạo cảm giác mượt mà, sống động, 3D cho người dùng
Clearhttp://itunes.apple.com/us/app/clear/id493136154?mt=8
Taskhttp://itunes.apple.com/gb/app/task/id505799171?mt=8
3dohttp://itunes.apple.com/gb/app/3do-the-next-generation-reminder/id429677024?mt=8
2.Skeuomorphs
• Skeuomorphs nghĩa là 1 đối tượng được tạo mới nhưng giữ những cấu trúc, đặc
điểm thiết kế của bản gốc.
• Bản thiết kế có yếu tố Skeuomorphs là bản thiết kế có các yếu tố nhìn trông như
đời thật hay hoạt động y như đời thật
• Ví dụ như cách chuyển trang giống như lật trang sách ngoài đời thật
• Đây là một phong cách mà Apple đã sử dụng trong một thời gian dài, nhưng gần
đây việc này đang càng ngày đẩy các thiết kế vào sự hỗn loạn. Đặc biệt trên
iPad, rất nhiều ứng dụng sử dụng style này các ứng dụng giống như một nồi lẩu
thập cẩm của skeuomorphis.
8
Flashlight∞http://itunes.apple.com/us/app/flashlight/id503210489?mt=8
9
Tap & Callhttp://itunes.apple.com/us/app/tap-call/id466420119?mt=8
http://itunes.apple.com/us/app/ibooks/id364709193?mt=8
iBooks
http://itunes.apple.com/gb/app/opuss/id473948939?mt=8
Opuss
http://itunes.apple.com/us/app/paypal/id283646709?mt=8
Paypal
3.Typography
• Yếu tố typo được đặt vị trí tốt nhất, các text được dùng với kích thước lớn và
được làm nổi bật
• Yếu tố font chữ rất được coi trọng
• Yếu tố hình họa đơn giản , không cầu kỳ phức tạp
STAMPEDhttp://itunes.apple.com/us/app/stamped/id467924760?mt=8
matchbookhttp://itunes.apple.com/us/app/matchbook/id427740544?mt=8
Ban Of The Day http://itunes.apple.com/us/app/band-of-the-day/id459664402?mt=8
4.minimalism
• Là phong cách thiết kế nhấn mạnh sự đơn giản
• Nội dung cần được coi là ngôi sao của màn trình diễn, không có gì được phép
gây ảnh hưởng tới nó.
KLIKhttp://itunes.apple.com/us/app/klik-by-face.com/id484990787?mt=8
Simplehttp://itunes.apple.com/us/app/simple/id479317486?mt=8
Grouponhttp://itunes.apple.com/us/app/groupon/id352683833?mt=8
21
Pockethttp://itunes.apple.com/us/app/pocket-formerly-read-it-later/id309601447?mt=8
22
JackThreadshttp://itunes.apple.com/us/app/jackthreads/id472078451?mt=8
23
Foursquarehttp://itunes.apple.com/us/app/foursquare/id306934924?mt=8
24
National Parkshttp://itunes.apple.com/us/app/national-parks-by-national/id518426085
25
Fotoyakihttp://itunes.apple.com/gb/app/fotoyaki/id469337768?mt=8
26
Moviefonehttp://itunes.apple.com/us/app/moviefone-movies-movie-theaters/id307840047?mt=8
27
Metro (minimalism)
• Nguyên tắc cơ bản của Metro lấy tư tưởng chính của Swiss Design (phong cách
thiết kế Thụy Sỹ (typography) và Minimalism).
• Kiểu thiết kế Metro còn đem lại sự tiết kiệm về không gian, nhưng đem tới các
tương tác dễ dàng, không phải là bấm vào một nút nhỏ đâu đó.
• Chữ chiếm vai trò quan trọng trong Metro. Nó đơn giản, sáng sủa và có kích
thước lớn và phân cấp bậc để người dùng đọc dễ dàng
• Metro là ngôn ngữ thiết kế của chúng tôi. Chúng tôi gọi là Metro vì nó hiện đại
(modern) và sáng sủa (Clean). Nó mượt mà khi chuyển động. Tất cả quan tâm
tới nội dung và Typo. Nó cực kỳ thực tế.
• - "Microsoft" –
• Kiểu thiết kế này chưa đc dùng nhiều cho app trên iphone
28
miCall+http://itunes.apple.com/us/app/icall+/id503154044?mt=8
29
Fotoyakihttp://itunes.apple.com/us/app/flipboard/id358801284?mt=8
5. Hand drawn style
• Đây là style kết hợp các yếu tố được vẽ tay vào thiết kế (hoặc giả vẽ tay ví dụ
như font viết tay )
• Nó mang đến cho bản thiết kế tính hữu cơ, gần với thực tế (không bao gồm app
game )
31
ABC Animals Illustrated HDhttp://itunes.apple.com/app/abc-animals-illustrated-hd/id446634685?mt=8
6. Vintage and Retro style
• Vintage bắt nguồn từ thuật ngữ trong sản xuất rượu vang và được coi là cũ 1
cách riêng hay chất lượng cao 1 cách riêng biệt
• Từ "retro" có nguồn gốc từ retro tiền tố Latin, có nghĩa là "ngược" hoặc "trong
thời gian qua" - đặc biệt như đã thấy trong những lời ngược, ngụ ý một phong
trào hướng về quá khứ thay vì một tiến bộ hướng tới tương lai, và hồi cứu, đề
cập đến hoài cổ (quan trọng) mắt hướng về quá khứ.
Đây là phong cách kiểu cũ và cổ điển (bao gồm màu sắc, font chữ , decorate...)
• Việc đan xen giữa phong cách vintage và retro vào bản thiết kế hiện đại mang
lại cho bản thiết kế giá trị hoài cổ
33
Kinotopichttp://itunes.apple.com/us/app/kinotopic/id493214555?mt=8
34
Everplaceshttp://itunes.apple.com/us/app/everplaces/id472735836?mt=8