Tag Archives: Thiết kế ứng dụng

Phong cách thiết kế Skeuomorphic

Skeuomorphic [skyoo-uh-mawrf] có nghĩa là có đối tượng mới phát sinh nhưng vẫn giữ những đặc điểm thiết kế cho tới cấu trúc cần thiết của bản gốc, ngay cả đối với những chức năng không cần thiết. Xét về giao diện người dùng, điều này có nghĩa là các ứng dụng được thiết kế sao cho các yếu tố của nó trông như hoặc hành động như trong thế giới thực. Ví dụ, cách chuyển một trang kỹ thuật số (digital page) sẽ trông giống như chúng ta lật một trang sách thật vậy.

Đây là chính là phong cách mà Apple đã sử dụng trong suốt một thời gian dài, nhưng gần đây việc này đang ngày càng đẩy các thiết kế vào sự hỗn loạn. Đặc biệt trên iPad, các ứng dụng giống như một nồi lẩu thập cẩm “A veritable smorgasbord” của skeuomorphism.

Bài viết này sẽ nhìn vào một số ví dụ đáng chú nhất của phong cách, những ưu điểm, khuyết điểm. Và liệu Skeuomorphic đóng vai trò gì trong tương lai của thiết kế giao diện?

Thiết kế mang phong cách Skeuomorphic

Đây là một vài ví dụ mà chúng tôi nghĩ là tốt nhất, thú vị nhất hoặc gây tranh cãi nhất về những Skeuomorphic UI đang hoạt động. Chúng có nguồn gốc từ một loạt các nền tảng, bao gồm cả máy tính để bàn và các ứng dụng iOS.

Apple iCal

020113_0942_Phongcchthi2.png
Không còn nghi ngờ gì nữa, đây chính chủ đề được tranh luận và bàn thảo về skeuomorphic đang rất HOT tại thời điểm này. Với việc phát hành OS X Lion, Apple quyết định mang tới cái nhìn và cảm nhận của Calendar trên iPad vào iCal trên máy tính để bàn.

Một số người thích, một số thì ghét nó. Nhưng điều thú vị về ví dụ này là nó được coi là sự khác biệt. Không như hầu hết các thiết kế khác, chúng ta thực sự có một ứng dụng đơn giản, sáng sủa để so sánh.

Propellerhead Reason

020113_0942_Phongcchthi3.jpg

Reason 1.0 được phát hành năm 2000, và không như hầu hết các DAW (Digital Audio Workstations) đang có tại thời điểm đó, giao diện mới hoàn toàn theo theo phong cách Skeuomorphic. Không chỉ quay số và thanh trượt như các công cụ, mà toàn bộ giao diện mô phỏng một hệ thống phần cứng và thậm chí có thể được đảo lộn để chơi với các hệ thống cáp ảo.

76 Synthesizer

020113_0942_Phongcchthi4.jpg

76 Synthesizer không phải là ứng dụng đầu tiên xuất hiện trên iPad như một công cụ synthesizer (công cụ điện tử hỗ trợ nhạc) cổ điển và các công cụ xử lý âm thanh khác. Garageband từ Apple cũng là ví dụ, nhưng chúng tôi chọn 76 Synthesizer vì nó là ứng dụng đẹp nhất và rất tiện dụng.

Sử dụng 76 Synthesizer tạo nên sự thích thú, nó rất giống thật bởi chất liệu sử dụng trong thiết kế, và cách tương tác. Điều này được cho là do nó là một ứng dụng về sản phẩm, nên sự hấp dẫn của nó được tạo ra bởi những người dùng có kinh nghiệm với công việc này.

iBooks

020113_0942_Phongcchthi5.jpg

iBooks cho iOS mô phỏng rất nhiều các yếu tố của việc đọc sách trong thực tế, từ chỗ các kệ sách bằng gỗ, cho tới cách các cuốn sách xuất hiện, rồi hành động lật trang, và có thể xem những gì trên trang tiếp theo dần dần xuất hiện, giống
như những cuốn sách thực sự.

Apple rất cẩn thẩn trong việc tạo cách sử dụng trong iBooks, bằng cách bạn chỉ cần chạm nhẹ vào cạnh của sách để lật, chứ không đòi hỏi hành động vẩy tay mỗi khi lật sách như ngoài đời thực, nó thực sự mang lại một trải nghiệm dễ chịu hơn so với việc lật trang thực sự. Điều này rất quan trọng, đặc biệt là trên các phiên bản iPhone khi việc lật trang có khả năng có thể xảy ra 100 hoặc 1000 lần cho mỗi lần đọc.

Caculator

020113_0942_Phongcchthi6.jpg
Các ứng dụng tính toán cho Mac và các ứng dụng máy tính khác, đều quyết định bố trí giao diện giống một chiếc máy tính cầm tay nhất có thể.

Đứng từ quan điểm khả năng sử dụng, không có bất cứ lý do nào để giả lập một màn hình nhỏ kỹ thuật số, hoặc các nút số lượng lớn trên một ứng dụng máy tính để bàn. Tất cả máy tính để bàn, laptop đều có bàn phím để nhập số. Và khi nhập số trên bàn phím dễ dàng hơn là dùng chuột để bấm vào số. Lý do để thiết kế vậy chỉ là tạo sự quen thuộc cho người dùng.

Dashboard (bảng điều khiển)

020113_0942_Phongcchthi7.jpg

OS X dashboard với các widget thêm vào, đều cung cấp thông tin một cách nhanh chóng và dễ dàng, giống như việc liếc nhìn xuống bảng điều khiển chiếc xe của bạn trong khi đang lái xe. Vì vậy, dễ thấy rằng OS X dashboard đã đạt đến độ chín muồi với phong cách thiết kế Skeuomorphic.

Các Widgets tương tự như các đối tượng trong thế giới thực cho phép chúng ta ngay lập tức nhận ra mục đích của chúng, và phân biệt chúng với thứ khác. Chúng ta có thể nhanh chóng kết hợp các hình vuông màu vàng như là một sticky cho đoạn ghi nhanh, và tương tự với đồng hồ cho việc xem giờ.

Các điểm tốt

Chúng tôi cho rằng đây là những điểm hay nhất của phong cách Skeuomorphic. Danh sách bao gồm những lợi ích của việc sử dụng phong cách, và những cải tiến nó có thể mang đến những trải nghiệm mới cho người dùng.

Skeuomorphic mang lại cảm giác thân thuộc cho người dùng

Người dùng cảm thấy thân thuộc ngay từ cái nhìn đầu tiên. Hãy tưởng tượng, đây là lần đầu tiên bạn ngồi trong buồng lái của máy bay, và cố gắng để lái. Có thể bạn sẽ không có nhiều may mắn, nhưng với những phi công được đào tạo thì có thể lái các loại máy bay khác nhau vì họ đã quen thuộc với các điều khiển.

Trực quan, phong phú và hấp dẫn

Khi so sách về kiểu thiết kế Tối giản, rõ ràng các thiết kế Skeuomorphic đem lại sự thích thú cho mắt, và sự thú vị khi sử dụng.

Chú ý đến từng chi tiết

Một thiết kế theo phong cách Skeuomorphic thường rất mất thời gian và nỗ lực. Chỉ có thể hoàn hảo khi làm tới từng chi tiết nhỏ nhất của ứng dụng để khiến nó thật nhất có thể.

Nhà thiết kế yêu thích bất cứ lý do để sử dụng chất liệu

Không hề có sự e dè, hầu hết các nhà thiết kế sẽ thừa nhận rằng họ yêu thích bất kỳ cơ hội nào để sử dụng chất liệu! Tất nhiên ngoại trừ phong cách tối giản hoặc một kiểu thiết kế “sạch”. Sẽ tuyệt hơn khi sử dụng chất liệu da, hay thêm 1-2% tiếng ồn vào nền ứng dụng.

Điểm không tốt

Để công bằng tất cả, đây là một số mặt trái của phong cách Skeuomorphic. Những vấn đề phát sinh khi sử dụng sai hoặc không phù hợp, và những tác động tiêu cực tới kinh nghiệm của người dùng (user experience).

Giao diện Skeuomorphic đôi khi làm phức tạp vấn đề

Đôi khi, thiết kế kiểu này không phải cách tốt nhất, giả dụ như một ứng dụng cần tới 3-4 ngón tương tác trong khi chỉ đơn giản 1 lần.

Chỉ ra việc không sẵn sàng để thay đổi

Nếu cứ theo một cách sử dụng cũ thì không khuyến khích sự đổi mới, giảm sáng tạo. Nhớ rằng khẩu hiệu của Apple là “Nghĩ khác”

Là kết quả dẫn tới bó buộc về không gian

Kiểu thiết kế Skeuomorphic thường có những thiết kế trang trí giống như thật, vì thế tốn không gian để bố trí, trong khi môi trường điện thoại cần sự gọn gàng, tối giản.

Chuẩn bị lui vào quá khứ

Giống như thời trang, giao diện người dụng cũng có sự quay vòng, một khi các thiết kế Skueomorphic quá quen thuộc, người dùng lại chuyển sang những thiết kế “lạ” hơn như là kiểu tối giản chẳng hạn.

Thay thế

Rõ ràng có nhiều cách để thay thế kiểu Skeuomorphic. Trong suy nghĩ về các thiết kế phong cách hiện đại, ngay lập tức tôi nghĩ tới cách thiết kế Metro của Microsoft.

Nguyên tắc thiết kế Metro

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ỹ và Minimalism). Về cơ bả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ó.

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 để người dùng đọc dễ dàng. Một thứ mà Metro bỏ qua chính là Skeuomorphic.

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” –

Windows 8

020113_0942_Phongcchthi8.png
Tôi vốn là fan của Mac Os nhưng với giao diện Windows 8 thì tôi hoàn toàn bị thuyết phục. Win 8 được thiết kế cho cả cảm ứng trên máy tính bảng và điện thoại thông minh, hay tương tác chuột của pc, laptop. Windows 8 thực sự là sự đột phá về thiết kế của Microsoft.

Cám ơn các bạn đã đọc bài viết này, bạn có quan điểm gì về kiểu Skeuomorphic, về Metro? Vui lòng để lại bình luận cùng tác giả.

Đặng Kim Thi

Phỏng dịch từ medialoot.