Tạo giao diện ứng dụng theo dõi tâm trạng phong cách iOS Nhật Bản đầy thanh bình với hiệu ứng glassmorphism, các thẻ nổi và hiệu ứng nền sáng dịu nhẹ.
Mục tiêu: Tạo bản thiết kế ứng dụng chăm sóc sức khỏe phong cách iOS tinh tế cho Lumen, một ứng dụng theo dõi tâm trạng và hơi thở với tông màu sáng, sử dụng hiệu ứng glassmorphism lấy cảm hứng từ Apple cùng văn bản giao diện tiếng Nhật.
Khung hình: Ảnh chụp màn hình điện thoại dọc, tỷ lệ khung hình 9:16, kích thước khoảng 563 × 1008 px. Sử dụng nền màu kem trắng thoáng đãng với phong cảnh màu nước mờ ảo ở phía dưới và các cạnh, điểm xuyết các ngọn núi tinh tế, lau sậy và một vệt sáng uốn lượn chạy dọc qua trung tâm, chuyển từ màu đào ấm ở gần đỉnh sang màu xanh nhạt ở gần đáy.
Bố cục: Đặt tiêu đề ứng dụng ở góc trên bên trái bằng phông chữ có chân tinh tế, văn bản màu đen lớn ghi “Lumen”, với phụ đề “今日の光” bên dưới bằng văn bản tiếng Nhật màu xám đậm nhỏ hơn. Đặt một nút menu hamburger hình tròn ở góc trên bên phải với ba đường kẻ ngang màu tối và đổ bóng nhẹ.
Các thành phần giao diện chính: Sử dụng chính xác 5 thẻ/nút kính bo tròn nổi xếp chồng theo chiều dọc ở giữa:
1. Thẻ nhỏ phía trên: biểu tượng mặt trời màu đào ấm ở bên trái, nhãn “集中”, thời gian “10:20” và một chấm trạng thái màu cam nhỏ ở bên phải.
2. Thẻ giữa được chọn: thẻ hình viên thuốc trắng mờ lớn hơn với viền phát sáng màu xanh mòng két, biểu tượng sóng/hơi thở hình tròn màu xanh mòng két ở bên trái, nhãn “穏やか”, thời gian “15:40” và một chấm trạng thái màu xanh mòng két nhỏ ở bên phải. Thêm một vết khía nhỏ hướng xuống ở giữa đáy thẻ này để kết nối trực quan với thẻ mở rộng bên dưới.
3. Thẻ nhập tâm trạng mở rộng: bảng điều khiển mờ màu trắng bo tròn lớn. Góc trên bên trái có cùng biểu tượng sóng màu xanh mòng két, tiêu đề “穏やか” và nút đóng hình tròn với dấu “×” ở góc trên bên phải. Hiển thị thời gian “15:40” bằng văn bản lớn. Bao gồm một thanh trượt tâm trạng ngang với chính xác 3 phần hiển thị: biểu tượng mặt buồn ở bên trái, thanh trượt màu xanh mòng két chuyển sang xám với núm xoay hơi lệch về bên phải so với trung tâm và biểu tượng mặt cười ở bên phải. Bên dưới, bao gồm một ô nhập văn bản bo tròn chứa nội dung “深呼吸のあと、少し軽くなった” với biểu tượng bút chì nhỏ ở bên phải. Ở dưới cùng, bao gồm một nút bo tròn lớn có hiệu ứng chuyển màu xanh mòng két với nhãn “記録する”.
4. Thẻ nhỏ phía dưới: biểu tượng mặt trăng và ngôi sao màu xanh dương ở bên trái, nhãn “回復”, thời gian “20:45” và một chấm trạng thái màu xanh dương nhỏ ở bên phải.
5. Thanh điều hướng / hành động phía dưới: một viên nang bo tròn mờ rộng gần đáy. Nó chứa chính xác 3 nút điều khiển hình tròn: nút tròn nhỏ bên trái có biểu tượng biểu đồ cột, nút tròn vàng phát sáng lớn hơn ở giữa và nút tròn nhỏ bên phải có biểu tượng trái tim. Bên dưới nút phát sáng ở giữa, hiển thị nhãn “気分を追加”.
Phong cách hình ảnh: Thiết kế ứng dụng iOS cao cấp tối giản, bề mặt kính mờ, các góc bo tròn, đổ bóng nhẹ, hiệu ứng phát sáng tinh tế, độ sâu vừa phải, khoảng cách thoáng đãng, không gian chăm sóc sức khỏe bình yên. Sử dụng các tông màu đào ấm, xanh mòng két, xanh nhạt, kem trắng và kiểu chữ màu than chì. Các biểu tượng nên là dạng đường nét đơn giản và mang cảm giác tự nhiên như trên iOS.
Các ràng buộc: Giữ nguyên tất cả văn bản tiếng Nhật hiển thị như đã chỉ định. Không thêm thẻ thừa, văn bản thừa, logo, hình mờ, khung thiết bị hoặc thanh trạng thái. Bản thiết kế nên trông giống như một ý tưởng giao diện ứng dụng được tạo ra thay vì ảnh chụp màn hình của một ứng dụng thực tế đã cài đặt.