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