Downloaded 25 times
Uploaded byGo Gomu
Styles of iOS UI app
Tài liệu giới thiệu các phong cách thiết kế giao diện ứng dụng iOS, bao gồm rich effect, skeuomorphs, typography, minimalism, hand drawn style và vintage/retro. Mỗi phong cách có đặc điểm riêng, từ việc làm nổi bật hiệu ứng 3D đến tối giản hóa nội dung, góp phần thu hút người dùng trong một thị trường ứng dụng cạnh tranh. Bài viết cũng nhấn mạnh rằng nhiều ứng dụng có thể kết hợp các yếu tố từ các thể loại khác nhau.
![[Ebook] UI Document - Tú Bùi](https://cdn.slidesharecdn.com/ss_thumbnails/uidocument-150824092212-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
Styles of iOS UI app
- 1. What are thestyles 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. ” 1
- 2. Phân loại 1. Richeffect 2. Skeuomorphs 3. Typography 4. Minimalism 5. Hand drawn style 6. Vintage and retro 2
- 3. 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 3
- 4.
- 5.
- 6.
- 7. 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. 7
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. 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 13
- 14.
- 15.
- 16. Ban Of TheDay http://itunes.apple.com/us/app/band- of-the-day/id459664402?mt=8 16
- 17. 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ó. 17
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 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 27
- 28.
- 29.
- 30. 5. Hand drawnstyle • Đâ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 ) 30
- 31. ABC Animals IllustratedHD http://itunes.apple.com/app/ab c-animals-illustrated- hd/id446634685?mt=8 31
- 32. 6. Vintage andRetro 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ổ 32
- 33.
- 34.