# Rokid Air / AR虚拟智能眼镜天猫详情页 - ID: 343 - URL: https://www.stoyard.com/works/343 - English URL: https://www.stoyard.com/en/works/343 - Year: 2022 - Cover: https://static.glabcms.stoyard.com/stoyard/project/cover/20261022/n1jsdkcvla.png - Categories: 行业领域：细分行业头部、先进制造、Web 3.0, 服务内容：视觉创意与传播（Visual & Creative Design）、展览展示（Exhibition & Spatial Design）, 技术解决方案：APP/小程序技术解决方案、线上虚拟展厅解决方案 - English Categories: Type of industry field：Leading companies in the industry、Advanced Manufacturing、Web 3.0, Service Content：Visual & Creative Design、Exhibition & Spatial Design, Technical Solutions：APP Programs Design Solution、Virtual Exhibition Hall Solution - Author: STOYARD - English Author: STOYARD - Publish: 2022-03-28 - Editor: STOYARD BEIJING - External Link: https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.1.640456b09Jfobi&id=661211918154&skuId=4764353756159&areaId=370200&user_id=2836768062&cat_id=2&is_b=1&rn=a48673186d546b54695eec675b20d561 ## 中文主体 ### 项目简介 STOYARD 为 Rokid 首款面向消费者的 AR 眼镜 Rokid Air 重构设计天猫/京东旗舰店详情页。我们放弃抽象的功能罗列，架空构思了一个 "赛博无限宇宙" 核心叙事逻辑，把每一次指尖下滑的浏览，变成一场脱离重力、遨游宇宙的沉浸漫游，让前沿科技第一次以可被普通人感知的方式被读懂。在平台局限的有限条件下突破，营造新颖的、强烈视觉冲突感的视觉用户浏览体验。感谢客户对我们的信任，这是一次里程碑式的天猫/京东详情页的设计实验。 项目背景 Rokid Air 是集轻巧时尚外观、人机工程设计、AI能力、自然交互和丰富内容于一体的产品，自发售起，便获得大批粉丝喜爱，在天猫旗舰店的平台上获得高度认可。 为了更好的展示产品的势能，Rokid团队希望我们对整体的视觉和内容进行优化升级。包括故事线大纲，详情页文案，内容设计，素材生产，拍摄策划，动态视频/GIF制作等整体服务工作。 [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220328/y01quhkprfj.mp4) 2.核心理念 我们提出的核心理念是"大开眼界"。用户向下滑动的动作，被设定为 "打开虚拟的超大平行世界的钥匙" 一点一划之间，坠入我们为用户虚构的 "Rokid Air 世界"。 在那里， 人们是轻盈自由的， 是可以扮演不同角色的， 是不被重力束缚的， 是在虚拟赛博宇宙中遨游的。 这一设定一举两得：既以故事性和趣味性撑起了页面的可读性，又精准呼应了 Rokid Air “轻巧、科技、人本”的产品内核。滑动不是翻页，而是 "进入" 打开详情页浏览行为本身，就成了产品体验的一次预演。 在内容表达上，我们从 "元宇宙" "平行世界" "科幻" 等概念中提取视觉元素，凸显产品的科技感与先锋理念；同时输出配套文案，让文字的细腻内涵与视觉的外在张力相互咬合，构成最终的沉浸效果。 [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220328/772jcm581e.mp4) “疫情改变了人们的观念和生活工作习惯，比如远程协作，它从不愿被人接受，变成了当前人们的当下常见的工作状态，乃至人们形成了一种习惯。前者或许是短期的；而后者却将深远地影响我们的未来。越来越多的人和企业发现一种新的交互设备和服务更能帮助大家适应新的生活和工作模式。”——Rokid CEO Misa   2.设计灵感 Rokid Air 的佩戴和使用者并不是专业的操作者，而是未受过培训的普通人，在天猫电商平台上，我们可以直接看到用户戴上产品后的各种反馈。 这些反馈也是我们最珍贵且最有效的灵感来源，所以，基于平台特性，我们的设计策略会做出相应调整以满足用户的需求和期待。  3.设计呼应产品 天猫平台的用户反馈快而真实，我们在反复商议沟通后，摈弃了抽象的设计理念，最终确定用一种叙事的逻辑来设计整体的视觉。 用户向下滑动的指尖就好比打开平行世界的钥匙，一点一划便开启了我们虚构的“Rokid Air 世界”，在这个世界里，人是轻盈自由的，脱离重力束缚在宇宙中遨游。这样一个设定，既可以增加内容的趣味性和可读性也呼应了Rokid Air 轻巧、科技、人性化的产品特点。  Rokid Air是定位于通勤、办公、影音等使用场景所推出的一款精简化的产品，但简又不简，“它在以往AR眼镜形态上做了减法，在用户体验上做了加法”。   4.提取关键词 我们从“元宇宙”、“平行世界”、“科幻”这些概念中提取了部分元素，用来凸显产品的科技感和先锋理念。 并且，为更完整地展示产品优势，我们也输出了部分文案内容，通过文字的细腻内涵和视觉的外在张力构成最终的震撼效果。    5.数字赋能 我们从产品的外观设计、使用体验、技术、产品工艺、应用资源等方面对产品进行细化，疏朗的页面布局加上恰到好处的文字，从一开篇就抓住用户视线，在深邃的宇宙背景中跟随我们的指引向下阅览，我们希望真正做到面面俱到，为产品赋能。 ## English Content ### Introduction STOYARD is Rokid's first consumer-oriented AR glasses Rokid Air reconstruction design Tmall/Jingdong flagship store details page. We gave up the list of abstract functions and conceived a core narrative logic of "Cyber Infinite Universe" overhead, turning every browsing with fingertips sliding down into an immersive roaming that breaks away from gravity and roams the universe, making cutting-edge technology read in a way that can be perceived by ordinary people for the first time. Break through the limited conditions of the platform limitations and create a novel visual user browsing experience with a strong sense of visual conflict. Thank you for your trust in us. This is a milestone design experiment of Tmall/Jingdong detail page. Project Background Rokid Air is a product that combines a lightweight and stylish appearance, ergonomic design, AI capabilities, natural interaction, and rich content. Since its launch, it has been loved by many fans and has received high recognition on the Tmall flagship store platform. To better showcase the product’s potential, the Rokid team has asked us to optimize and upgrade the overall visual design and content. Including story line outline, detailed page copy, content design, material production, shooting planning, dynamic video/GIF production and other overall services. [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220328/y01quhkprfj.mp4) Core concept: "eye-opening." The user's downward sliding action is set to "open the key to the virtual super-large parallel world" and 1.1 strokes, falling into the "Rokid Air world" we made up for the user ". There, People are light and free. It can play different roles. It is not bound by gravity, It is about roaming in the virtual cyber universe. This setting can kill two birds with one stone: it not only supports the readability of the page with story and interest, but also accurately echoes Rokid Air's product core of "lightness, technology and people-oriented. Sliding is not turning pages, but "entering" to open the detailed page browsing behavior itself, which becomes a preview of the product experience. In terms of content expression, we extract visual elements from concepts such as "meta-universe", "parallel world" and "science fiction" to highlight the sense of science and technology and avant-garde concept of the product. At the same time, we output matching copy, so that the delicate connotation of the text and the external tension of the vision bite each other to form the final immersion effect. [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220328/772jcm581e.mp4) "The epidemic has changed people's concepts and living and working habits, such as remote collaboration, which has never been accepted by others, and has become a common working state of the current people, and even people have formed a habit. The former may be short-term; The latter will have a profound impact on our future. More and more people and businesses are discovering a new interactive device and service that can help everyone adapt to the new way of living and working." - Rokid CEO Misa   2. Design inspiration The wearer and user of Rokid Air are not professional operators, but ordinary people who have not received training. On the Tmall e-commerce platform, we can directly see various feedbacks from users after wearing the product. This feedback is also our most precious and effective source of inspiration, so, based on platform characteristics, our design strategy will be adjusted accordingly to meet the needs and expectations of users.  3. Design responsive products The user feedback on the Tmall platform is fast and real. After repeated discussions and communication, we abandoned the abstract design concept and finally decided to use a narrative logic to design the overall vision. The user's fingertip swiping down is like a key to unlocking a parallel world, and a single swipe opens our fictional "Rokid Air world". In this world, people are light and free, free from the shackles of gravity and roaming in the universe. Such a setting can not only increase the interest and readability of the content, but also echo the lightweight, technological and user-friendly product features of Rokid Air. We use the elements of "metaverse", "parallel world" and "science fiction" to highlight the technological sense and pioneering concept of products.  Rokid Air is a simplified product that is positioned in commuting, office, audio-visual and other usage scenarios, but it is not simple.   4. Extract keywords We extracted some elements from the concepts of "metaverse", "parallel world" and "science fiction" to highlight the technological sense and pioneering concept of the product. In addition, in order to show the advantages of the product more completely, we also output part of the copy content, and the final shocking effect is formed through the delicate connotation of the text and the external tension of the vision.    5. Digital empowerment We refine the product from the aspects of product design, user experience, technology, product technology, application resources, etc. The sparse page layout and just-right text catch the user's attention from the very beginning, in the deep cosmic background Read on as we guide us, and we want to really cover it all，Empower the product.