Giải pháp thiết kế giao diện Fluent design

Khám phá triết lý ngôn ngữ thiết kế Fluent Design Microsoft Các triết lý Fluent Design giúp giao diện Windows đoạn tuyệt với mặt phẳng hình chữ nhật buồn tẻ Bản cập nhật Fall Creators Update cho Windows 10 Microsoft thức giới thiệu tràn ngập khả nghệ thuật tính hữu ích Nó mang đến cho người dùng tính Timeline để quản lý phiên làm việc phức tạp, API liên kết với tất dịch vụ Microsoft với nhau, quan trọng mơ hình thiết kế nhằm mục đích thay đổi giao diện người dùng hình chữ nhật phẳng thường thấy với tên gọi: Fluent Design Hệ thống thiết kế tập trung vào năm triết lý để giúp nhà phát triển xây dựng nên giao diện người dùng sáng tạo hấp dẫn hơn, là: Chiều sâu, Chất liệu, Ánh sáng, Khả mở rộng Chuyển động Những triết lý nhằm mục đích đoạn tuyệt hẳn với thiết kế cứng cáp, cũ kỹ Microsoft mở tương lai cho trải nghiệm người dùng tương tác “Giờ thời điểm để vượt xa khỏi hình chữ nhật giới hạn mặt phẳng.” Joe Belfiore tuyên bố ông giới thiệu ngôn ngữ thiết kế Build 2017 “Nó khơng hình ảnh thị giác, mà mơ hình khơng gian tương tác, cách tất điều kết hợp với nhau.” Dưới nhìn sâu vào triết lý làm thay đổi cách thiết kế ứng dụng Windows Ánh sáng (Light) Hãy hỏi nhà làm phim điều quan trọng với họ, họ khơng ngần ngại nói với bạn ánh sáng tác động đến cảnh phim Với ngành thiết kế, điều tương tự Độ sáng tối giao diện thay đổi cách người dùng cảm nhận Theo ơng Belfiore, giúp tạo khơng khí, cảm giác nơi chốn cho ứng dụng Nhưng xuất thiết kế menu hay giao diện ứng dụng, cơng cụ quan trọng để thu hút ý người dùng Một nút bấm phát sáng hướng dẫn người dùng cách sử dụng ứng dụng, nhấn mạnh tính chương trình mà họ chưa để ý đến Chiều sâu (Depth) Ở vào kỷ nguyên menu màu ghi tăm tối ngôn ngữ thiết kế Metro phẳng, ngắn ngủi, Microsoft dựa vào khung hình vng vức buồn tẻ, để cung cấp cho người dùng thơng tin cơng cụ Còn với Fluent Design, Microsoft thử thách nhà phát triển loại bỏ mơ hình thay cách đưa thơng tin đối tượng khỏi khung hình 2D truyền thống Ví dụ, thay trình diễn ứng dụng xem lịch phẳng theo truyền thống, thuyết trình Microsoft Hội nghị Build hình dung giao diện phóng to làm bật vào kiện quan trọng với người dùng cách nhanh chóng – chương trình tạo ảo giác chiều sâu cách phân lớp xếp để kiện quan trọng xuất lớn Hy vọng với việc sử dụng chiều sâu để đưa ảo giác môi trường vật lý vào giao diện, ứng dụng Windows trì tương tác với người dùng lâu Chuyển động (Motion) Một giao diện hình ảnh động đẹp yếu tố hấp dẫn, hiệu ứng Chuyển động thứ giúp thu hút ý người dùng, cách cho họ thứ hoạt động để nhìn vào tương tác với Belfiore so sánh việc sử dụng chuyển động Fluent Design giống việc đạo diễn sử dụng cử động để dẫn dắt người dùng vào câu chuyện mà họ muốn kể “Thiết kế Chuyển động có quyền lực đặc biệt để đưa toàn trải nghiệm tới sống thực.” Ông cho biết “Và dẫn dắt người từ nhiệm vụ sang nhiệm vụ khác với góc nhìn điện ảnh.” Microsoft minh họa cho ý tưởng với menu sống động Xbox One, hình ảnh hóa âm nhạc chương trình phát media việc chuyển đổi đồ họa từ biểu đồ đơn giản sang mảng hình khối đại diện, sáng sủa hơn, động Tất ví dụ nhanh chóng thu hút ý người dùng tác vụ người thường làm, điều khiển âm nhạc, quản lý thiết lập game, hay đơn giản giữ ý người xem tới bảng liệu Chất liệu (Material) Giống ý tưởng cốt lõi Fluent Design, Chất liệu dường thay đổi đột phá cho phong cách đồ họa Windows khứ Các hình vng chức giao diện truyền thống Microsoft hoạt động được, thiếu tính kết nối với giới thực Belfiore gợi ý điều quan trọng làm người dùng yêu thích thiết kế ứng dụng Windows mô cảm giác “nhạy cảm đầy sinh lực” chất liệu làm nên giới thực “Chúng tơi muốn mang đến cho thiết kế nhiều đặc điểm theo cách đắn, với chất lượng thực tế.” Ông cho biết “Để chào mời người chạm vào tương tác với nó.” Dù yếu tố khơng mang lại cấu trúc thú vị cho ứng dụng, với Windows 10, ý tưởng giao diện chạm cho PC đem lại số ưu điểm Kết hợp với cập nhật Fall Creators Update mắt, cho phép kiểm sốt giọng nói tốt hơn, tương tác cảm ứng tốt cảm giác nhập liệu bút tự nhiên hơn, giúp người dùng quên bàn phím chuột truyền thống Khả mở rộng (Scale) Phần lớn ngôn ngữ thiết kế Microsoft dường ưu tiên cho việc cải thiện mơi trường điện tốn truyền thống – đối tượng hình điều khiển thiết bị ngoại vi phụ kiện Trong đó, Khả mở rộng lại có chút khác biệt Với yếu tố này, Microsoft muốn hướng đến tương lai Cụ thể hơn, khả mở rộng cho đối tượng kỹ thuật số giao diện 3D thực tế ảo/ thực tế tăng cường Kích thước tương đối vật thể kỹ thuật số điều mà nhà phát triển VR nỗ lực làm việc vài năm – vật thể có kích thước hình cực lớn cực nhỏ nhìn qua kính VR AR Vì vậy, tạo kích thước cho đối tượng ảo điều tối quan trọng để có giao diện người dùng thứ tốt Bằng cách thử thách nhà phát triển để nghĩ kích thước giao diện họ môi trường 3D, Microsoft yêu cầu họ tưởng tượng xem sản phẩm trơng qua kính Hololens cơng ty Về lý thuyết, triết lý thiết kế cốt lõi có khả giúp nhà phát triển Windows tạo trải nghiệm người dùng mạnh mẽ tương tác – thực Fluent Design làm Windows trông nào? Microsoft không tiết lộ nhiều điều buổi Keynote Hội nghị Build, hình ảnh thống qua mơ hình giả lập ứng dụng lịch hình Windows phần cho thấy điều Những hình ảnh rõ ràng concept thời điểm này, thể rõ ràng nguyên lý cốt lõi Fluent Design Ví dụ hình desktop mới, với hiệu ứng ánh sáng bóng đổ, giúp xác định rõ ràng vị trí cửa sổ khơng gian vật lý Mỗi đối tượng khung cảnh lại có cảm giác khác khoảng cách, chất liệu, để làm chúng hữu hình so với cửa sổ vng truyền thống Vẫn sớm để chắn cách Fluent Design hoạt động, Microsoft rõ ràng nghĩ giao diện người dùng họ theo cách hoàn tồn khác biệt Nó trơng kỳ cục giúp ta kỳ vọng phiên Windows ngồi hồn tồn Tham khảo Engadget Hình ảnh giao diện Windows 10 thay đổi hồn tồn với ngơn ngữ thiết kế Fluent Design Tuy hành trình thay đổi thay đại tu tồn diện Đúng người kỳ vọng, Hội nghị nhà phát triển Build 2017 Seattle, Microsoft thức tiết lộ Project Neon – dự án đồn đại từ lâu nhằm làm tổng thể giao diện UI cho Windows 10 Tuy nhiên, thức mắt với tên mới: Microsoft Fluent Design System (hệ thống thiết kế trôi chảy) Dưới hình ảnh chi tiết: QUẢN LÝ EMAIL: QUẢN LÝ FILE: THỜI TIẾT/THỜI GIAN: TRÌNH DUYỆT EDGE VỚI BÚT TIMELINE HOLOGRAPHIC DESKTOP ẢNH CÁC THỨ KHÁC Nếu bạn kỳ vọng chứng kiến đại tu toàn diện vẻ ngồi Windows 10, có lẽ bạn phải thất vọng chút Thay vậy, Fluent Design System giống bước chuyển ngôn ngữ thiết kế Microsoft Nhưng điều khơng có nghĩa khơng có thú vị Fluent Design System - Ngôn ngữ thiết kế Microsoft Trên sân khấu hội nghị Build diễn ra, ông Joe Belfiore Microsoft trình diễn số thay đổi ngơn ngữ thiết kế Theo đó, Fluent Design System bổ sung thêm hàng loạt đặc tính vào UI cho ứng dụng Windows: - Light (ánh sáng): kiểm soát việc UI tương tác với ánh sáng chiếu vào – điều đặc biệt hữu dụng môi trường thực tế hỗn hợp (Mixed Reality) - Depth (chiều sâu): bổ sung thêm thông tin độ sâu vào UI cho thứ hiệu ứng thị sai số trạng thái chuyển động phụ thực tế hỗn hợp - Motion (chuyển động): sửa chữa lại hiệu ứng hình ảnh động Windows - Material (chất liệu): Kiểm soát kết cấu yếu tố UI (ví dụ như, hiệu ứng làm mờ số ứng dụng), yếu tố “bẻ cong, co dãn nảy lên” bạn tương tác với chúng - Scale (khả mở rộng): khả thay đổi ứng dụng thiết bị khác Những thay đổi Fluent Design System so với Metro Theo hướng này, Fluent kế thừa cho ngôn ngữ thiết kế Metro, tập trung nhiều vào tính suốt thực tế hỗn hợp – có nghĩa cuối ứng dụng làm việc Hololens Fluent Design System mang đến hàng loạt cách thức cho việc tương tác với máy tính, cho dù cảm ứng, bút, âm thanh, ánh mắt hay cử Công ty cho biết, họ trao đổi với hàng loạt nhà phát triển khác việc làm để tạo ứng dụng chuyển đổi hình thức thiết bị như, điện thoại, tablet, máy tính desktop thực tế hỗn hợp Microsoft dự kiến triển khai thay đổi thiết kế cách từ từ Một số thay đổi xuất cập nhật cho ứng dụng Windows 10, phần nhiều bắt đầu xuất Windows Microsoft phát hành cập nhật Fall Creators Update cập nhật tương lai Aaron Woodman, giám đốc Microsoft, nhấn mạnh thay đổi thiết kế xuất theo thời gian Windows sản phẩm khác “Đó hành trình dài.” Tham khảo TheVerge, TheNextWeb Windows 10 s ẽ thông minh h ơn v ới Fluent DesWindows 10 s ẽ thông minh h ơn v ới Fluent Design trình ệt Edge c ải ti ến ign trình ệt Edge c ải ti ến Bản thử nghiệm Windows 10 build 17711 cho thấy Microsoft bổ sung hiệu ứng ánh sáng nhấp nháy, số chỉnh sửa giao diện hệ điều hành thiết kế Fluent Design trình duyệt Edge Như biết, Fluent Design Microsoft chia sẻ kiện BUILD 2018 Đây c ũng ngôn ng ữ thi ết k ế m ới giúp h ệ ều hành tr nên s ống động, b m h ơn Microsoft cho biết Windows 10 đượ c gia tăng hiệu ứng đổ bóng, mang l ại cảm nhận độ sâu cửa sổ ứng dụng, trình đơn thật Cụ thể build 17711, hiệu ứng đổ bóng đượ c áp dụng cho m ột số trình đơn ng ữ c ảnh, ch ẳng h ạn trình đơn nh ấn ph ải chu ột Tuy nhiên hi ệu ứng thử nghiệm giới hạn mong đợi thấy nhi ều build sau Hi ện t ại, v ẫn s ớm để nh ận xét v ề s ự đổi m ới giao di ện ng ười dùng Microsoft cảnh báo người dùng gặp vài trục trặc v ới hiệu ứng đổ bóng Còn thay đổi trình duyệt Edge ? Trong build 17711, người dùng tùy chọn mã màu cho Learning Tools Tính bổ sung Line Focus giúp vi ết d ễ đọc h ơn b ằng cách kh ả n ăng làm n ổi b ật 1, 3, ho ặc th ậm chí c ả dòng lúc Bên cạnh đó, Microsoft chỉnh s ửa n ội dung m ẫu thông tin ch ấp thu ận (consent box), yêu c ầu ng ười dùng cho phép l ưu gi ữ d ữ li ệu ền t ự động bi ểu m ẫu tr ực ến Một thay đổi lớn khác Windows 10 build 17711 Windows HD Color Display Settings M ục cho phép ng ười dùng thi ết đặt kh ả n ăng hi ển thị màu s ắc c hình, bao gồm HDR cho game, ứng dụng phát video trực tuyến trường h ợp hình hỗ tr ợ HDR Ngồi ra, Registry Editor s ẽ có thêm thơng tin g ợi ý b ạn nh ập đườ ng d ẫn tr ường địa (regedit address) để tránh sai sót bạn nhớ khơng xác Microsoft lưu ý tính Windows Sets bị gỡ khỏi build cần định hình lại sau nhận phản hồi từ người dùng Điều có nghĩa cập nhật lớn vào cuối năm khơng có tính Có lẽ Microsoft cần thêm th ời gian để hồn thiện tính để tránh làm người dùng thất vọng Đừng quên Tinhte có khu vực tinhte.vn/windows, nơi bạn thoải mái trao đổi, hỏi đáp chia sẻ kinh nghiệm máy tính Windows  ... ngành thiết kế, điều tương tự Độ sáng tối giao diện thay đổi cách người dùng cảm nhận Theo ơng Belfiore, giúp tạo khơng khí, cảm giác nơi chốn cho ứng dụng Nhưng xuất thiết kế menu hay giao diện. .. Fluent Design System so với Metro Theo hướng này, Fluent kế thừa cho ngôn ngữ thiết kế Metro, tập trung nhiều vào tính suốt thực tế hỗn hợp – có nghĩa cuối ứng dụng làm việc Hololens Fluent Design. .. toàn diện vẻ ngồi Windows 10, có lẽ bạn phải thất vọng chút Thay vậy, Fluent Design System giống bước chuyển ngôn ngữ thiết kế Microsoft Nhưng điều khơng có nghĩa khơng có thú vị Fluent Design