- Tính năng bản đồ của Pedometer++ trên watchOS đã được tinh chỉnh suốt hơn 6 năm với mục tiêu mang lại trải nghiệm bản đồ tốt nhất có thể trên Apple Watch, và đã đạt một cột mốc quan trọng với sự ra mắt của Pedometer++ 8
- Nỗ lực ban đầu dùng cách tạo bản đồ trên máy chủ rồi hiển thị lên Apple Watch, nhưng vì phải truyền qua lại dữ liệu vận động mỗi lần nên không thực tế cho điều hướng và sử dụng hằng ngày, đồng thời cũng không thể hoạt động ngoại tuyến
- Để có được mức kiểm soát cần thiết trên watchOS, họ đã tự xây dựng engine render bản đồ native bằng SwiftUI, và đến năm 2021 đã có thể render ổn định bản đồ dạng tile và chồng thông tin vị trí lên trên
- Để phù hợp với watchOS 26 và Liquid Glass, họ đã cùng Andy Allen tạo ra bản đồ mặc định mới, giảm độ phức tạp thị giác và tăng độ tương phản cùng độ bão hòa để dễ đọc hơn ngay cả dưới các thành phần kiểu kính
- Hợp tác với Rafa Conde, họ tạo ra bố cục mới đặt các chỉ số xếp lớp ở góc trên bên trái và để bản đồ ở trang trên cùng của ngăn xếp dọc; sau khi được kiểm chứng thực địa qua hàng trăm dặm, thiết kế này đã được đưa vào phiên bản cuối của Pedometer++ 8
Hành trình bản đồ trên watchOS của Pedometer++
- Thói quen cốt lõi để không bị lạc khi đi núi hay hoạt động ngoài trời là kiểm tra vị trí hiện tại thật thường xuyên trong lúc di chuyển, và bản đồ trên cổ tay là cách tốt nhất để làm điều đó
- Ngay từ những ngày đầu Apple Watch ra mắt, họ đã muốn có một bản đồ tốt trên cổ tay, nhưng trên thực tế chỉ đến khi watchOS 6 giới thiệu SwiftUI và cho phép tạo ra ứng dụng “thật sự” thì điều đó mới bắt đầu khả thi
- Apple Watch đời đầu có màn hình nhỏ và bộ xử lý chậm, khiến rất khó đạt tới mức họ mong muốn, và nỗ lực bản đồ đầu tiên của Pedometer++ là cách tạo bản đồ trên máy chủ
- Cách dựng bản đồ trên máy chủ này đòi hỏi phải truyền qua lại dữ liệu vận động liên quan mỗi lần làm mới màn hình, nên tuy hữu ích để kiểm chứng ý tưởng nhưng không thực tế cho điều hướng hay sử dụng thường nhật, và cũng không thể hoạt động ngoại tuyến
Engine bản đồ tùy biến dựa trên SwiftUI
- Để tiến xa hơn trên watchOS, họ cần mức kiểm soát thấp hơn, nên đã tự xây dựng một engine render bản đồ hoàn chỉnh native bằng SwiftUI
- Khi đó SwiftUI là lựa chọn mà watchOS hỗ trợ, và cũng giúp đưa bản đồ vào widget vốn chỉ hỗ trợ SwiftUI
- Đến năm 2021, họ đã đạt tới mức có thể render bản đồ trên watchOS một cách ổn định và hiệu năng tốt
- Engine này có thể render bản đồ dạng tile và chồng thông tin vị trí lên trên đó
Những ràng buộc trong thiết kế màn hình watchOS
- Thiết kế ứng dụng watchOS là một bài toán vừa thú vị vừa gây bức bối vì những ràng buộc của màn hình nhỏ và thao tác bằng một tay
- Mục tiêu là giúp người dùng vừa đọc bản đồ, dùng để điều hướng, vừa có thể truy cập thông tin liên quan đến bài tập
- Sau nhiều lần thử nghiệm thiết kế, trong một thời gian họ đã chọn cách tiếp cận dạng modal dùng nút ở góc trên bên trái để chuyển giữa màn hình bản đồ và màn hình chỉ số
- Cách này cho phép ở một màn hình thì có thể tự do di chuyển, phóng to, thu nhỏ bản đồ; còn ở màn hình kia thì cung cấp chỉ số và điều khiển bằng giao diện trang tab thông thường của watchOS
- Nhưng thiết kế này vẫn có cảm giác như một sự thỏa hiệp, và nếu muốn làm bản đồ có tính tương tác thì rất khó đặt nó vào trong một cấu trúc UI cần thao tác vuốt
- Khi màn hình Apple Watch ngày càng lớn hơn, có vẻ nhu cầu phải tách riêng một không gian độc lập để làm bản đồ trở nên hữu ích cũng giảm đi
- Sau đó họ cũng cân nhắc phương án đặt các chỉ số ở phía dưới màn hình, nhưng với những chuyến đi dài hoặc các bài tập không lấy điều hướng làm trung tâm thì lại nảy sinh giới hạn khác
- Điểm chung của nhiều phương án thiết kế là ứng dụng chỉ có thể hiển thị một tập trường cố định tại một thời điểm
- Họ cũng có thể làm cho giao diện cho phép người dùng tự cấu hình, nhưng trong thiết kế watchOS cần tránh những tương tác kéo dài quá vài giây, còn phần thiết lập của người dùng thì về bản chất khá phiền, nên không phù hợp
Tạo bản đồ mới phù hợp với Liquid Glass
- Trong lúc vẫn còn trăn trở về cấu trúc ứng dụng, Apple đã công bố watchOS 26 và Liquid Glass
- Yếu tố thiết kế cốt lõi của Liquid Glass là layering các thành phần chồng lớp lên nhau, và kiểu màu sắc phối hợp tốt với nhau cũng rất quan trọng
- Trước đó, họ dùng Thunderforest Outdoors làm bản đồ mặc định cho ứng dụng; nội dung đi kèm rất tốt nhưng không thực sự phù hợp với Liquid Glass khi đặt các thành phần kiểu kính lên trên
- Cùng với nhà làm bản đồ Andy Allen, họ đã tạo ra một bản đồ mặc định hoàn toàn mới để hiển thị tốt trong Liquid Glass
- Ở bản đồ mới, họ giảm độ phức tạp thị giác, tăng độ tương phản của các thành phần, đồng thời tăng độ bão hòa của các yếu tố bản đồ để chúng không bị xám đục và nhòe đi dưới lớp kính
- Công việc này cũng giúp họ có thể tạo ra biến thể dark mode cho các tile bản đồ
- Dark mode cũng hữu ích trên iOS, nhưng đặc biệt hiệu quả trên watchOS, và họ đã tinh chỉnh với mục tiêu tạo ra bản đồ rất dễ đọc ngay cả khi nhìn ở khoảng cách một cánh tay
- Kết quả là họ có được một bản đồ phù hợp với watchOS, nhưng thiết kế ứng dụng để tương xứng với nó thì vẫn còn chưa đủ tốt
Rafa Conde và bố cục mới
- Để thoát khỏi bế tắc trong thiết kế, họ đã hợp tác với nhà thiết kế Rafa Conde
- Trong nhiều phương án bố cục thay thế, thiết kế đặt các chỉ số xếp lớp ở góc trên bên trái và để bản đồ ở trang trên cùng của ngăn xếp dọc đã trở thành hướng đi cuối cùng
- Thiết kế này xử lý vấn đề của bản đồ tương tác bằng cách buộc người dùng phải chạm vào bản đồ trước để vào chế độ khám phá
- Sau khi định hình được toàn bộ concept, họ tiếp tục xây dựng ứng dụng thực tế và tinh chỉnh các chi tiết
- Concept của Rafa nhanh chóng được hiện thực hóa thành một nguyên mẫu chạy tốt, rồi được kiểm chứng ngoài thực địa qua hàng trăm dặm đi bộ
- Sau đó họ tiếp tục tinh chỉnh phông chữ và những lựa chọn thiết kế tinh tế hơn để đi tới thiết kế cuối cùng được đưa vào Pedometer++ 8
- Màn hình cuối cùng được hoàn thiện theo hướng dễ đọc, hữu ích, phù hợp tự nhiên với nền tảng watchOS nhưng vẫn mới mẻ và khác biệt
Vì sao không dùng MapKit
- Việc làm bản đồ tùy biến đã bắt đầu từ trước khi Apple MapKit cho watchOS xuất hiện, và lý do họ tự triển khai thay vì dùng MapKit là vì MapKit thiếu mức độ tùy biến và tính hữu dụng mà Pedometer++ cần
- MapKit phù hợp cho các nhu cầu cơ bản, nhưng không cung cấp mức kiểm soát mà Pedometer++ muốn mang lại
- MapKit trên watchOS luôn hiển thị ở dark mode; đây có thể là lựa chọn mặc định tốt, nhưng tạo ra giới hạn về khả năng tiếp cận và quyền lựa chọn của người dùng, nên người dùng cần có quyền chọn
- MapKit trên watchOS theo thời gian đã làm được nhiều hơn, nhưng vẫn còn hạn chế về animation và overlay
- Phạm vi hiển thị đường đồng mức địa hình và đường mòn của MapKit đang được cải thiện, nhưng ở nhiều nơi vẫn cần thông tin chi tiết phong phú hơn ngay cả khi bản đồ MapKit gần như trống rỗng
- Bài viết đưa ra ví dụ so sánh sự khác biệt giữa bản đồ tùy biến và MapKit tại lối vào một cung đi bộ đường dài yêu thích ở Scotland
2 bình luận
Tôi không leo núi nhưng đúng là họ đã đổ rất nhiều công sức vào ứng dụng này. Thậm chí còn thuê cả người làm bản đồ nữa cơ..
Ý kiến trên Hacker News
Việc Apple Watch không có bản đồ leo núi/địa hình do chính Apple làm trông như một thiếu sót lớn. Ngay cả Watch Ultra “dành cho nhà thám hiểm” đắt nhất cũng không có, và các tính năng như nhập GPX gần như chỉ là mơ ước
Dù cuối cùng đây vẫn là một thiết bị phong cách sống, nhưng vẫn thấy đáng tiếc
Quá trình tiến hóa này thật tuyệt vời, và cũng cho thấy có thể tạo ra những gì khi thoát khỏi các quy ước thiết kế như căn giữa hay UI đối xứng. Đủ khiến tôi muốn sở hữu một chiếc Apple Watch
Trong ảnh chụp màn hình của bài viết có Hidden Valley ở Glen Coe, một trong những tuyến đi bộ ngắn tôi thích ở Scotland
Chỉ là tôi có ký ức kém vui hơn về ngôi nhà dưới thung lũng đó. Trước đây khi lái xe ngang qua, tôi luôn mơ màng nhìn ngôi nhà ấy, lúc nào cũng đóng kín ở một góc hẻo lánh giữa núi non, và nghĩ sống ở nơi như vậy hẳn phải đặc biệt lắm. Bãi đỗ xe cho đường mòn chỉ cách đó vài trăm mét theo con đường phía trên
Vài năm sau tôi nhận ra ngôi nhà đó trong một phim tài liệu của Louis Theroux, có cảnh ông tới thăm nơi ấy cùng chủ nhân là nhân vật truyền hình Jimmy Saville. Sau đó tôi trở về Australia, rồi sự thật lộ ra rằng Saville sau khi chết đã bị phát hiện là một trong những kẻ ấu dâm và tội phạm tình dục khét tiếng nhất nước Anh, thật sự kinh khủng. Ở phần trên của bản đồ trong ảnh chụp màn hình còn có thể thấy đúng tên và đường viền của căn nhà đó
Tò mò tìm hiểu thì có vẻ họ đã thuê một nhà làm bản đồ và tạo ra những hình ảnh bản đồ tùy chỉnh lớn, đẹp mắt để đưa vào các chi tiết không có trong Apple Maps, như đường mòn đi bộ
Vì vậy khác với Apple Maps được render động, cách này về cơ bản là hiển thị image tile. Có thể tạo ra bản đồ đẹp hơn và chi tiết hơn, nhưng sẽ ảnh hưởng đến các phần như tải riêng theo từng mức zoom, xoay, hay khả năng cập nhật
Nhà cung cấp bản đồ gốc vốn đã cung cấp cả dịch vụ vector tile lẫn raster tile: https://www.thunderforest.com/maps/outdoors/
Cách làm phổ biến là dùng trực tiếp dịch vụ vector tile và định nghĩa style, hoặc nếu cần thì sinh ra raster tile
Là người dùng Pedometer++, tôi rất ngạc nhiên trước sự ám ảnh với chi tiết mà David đã duy trì suốt nhiều năm. Sự tiến hóa của ứng dụng thực sự đáng nể
Trước đó nhờ dồn nhiều công sức vào Watchsmith, anh ấy gần như trở thành chuyên gia hàng đầu thế giới về widget, nên việc thành công lớn với Widgetsmith cũng rất đáng ngưỡng mộ. Đây đúng là trường hợp thành công đến với đúng người xứng đáng hơn cả
Trên đồng hồ thì tile tĩnh là lựa chọn đúng. Tôi từng thử render động trên một thiết bị bị ràng buộc nặng, và thao tác pan/phóng to thu nhỏ đều bị các lần tạm dừng garbage collection nuốt mất ở gần như mọi frame
Apple Maps trên WatchOS khá tốt, nhưng thường khi tôi lên xe đạp, đặt lộ trình và đi được khoảng 3 phút thì màn hình “Bạn đang tập luyện à?” sẽ đè lên, khiến tôi không thể xem bản đồ cho đến khi dừng lại và tắt nó đi
Tôi nghĩ màn hình đó không nên chiếm toàn màn hình mà nên thành thông báo, hoặc sau một thời gian thì cứ lặng lẽ bắt đầu ghi lại thôi
Thật ngạc nhiên vì nếu có người ở Apple phát triển tính năng này thì chắc chắn họ cũng phải gặp vấn đề đó
Nếu bản đồ của ứng dụng này có thể giữ quyền hiển thị trên màn hình thì với tôi đó sẽ là tính năng sát thủ. Tuy nhiên khi lướt trang App Store, tôi không thấy rõ tính năng nào bị khóa sau gói đăng ký và tính năng nào không; tôi ghét những ứng dụng không nói rõ cho tới khi bạn thiết lập xong hết, nên chắc tôi sẽ chỉ cố nhớ tự bắt đầu buổi tập thủ công để tham chiếu