Study Room Visual Design

Introduction

项目简介

Application Scenarios in the ClassIn App: Broadening the user learning experience within ClassIn, enhancing the pre-class, in-class, and post-class learning journey, providing students with personalized learning spaces, aligning with the product's consumer-oriented direction

ClassIn APP中的应用场景:拓宽用户在ClassIn的学习场景, 完善课前-上课-课后的体验闭环, 为学生提供个人学习空间, 符合产品C端化方向

The goal is to evolve from individual learning spaces to organizational learning spaces.

目的在于从个人学习空间发展到组织学习空间

Visit multiple offline study spaces for firsthand insights, discovering design points to incorporate into the product.

到线下多个自习室实体店体验洞察,发现设计点融入产品

The overall design aims to convey a quiet, focused, and warm feeling to users, enhancing the immersive experience of the study spaces.

整体设计旨在为用户传递安静、专注、有温度的感觉,增加自习室的沉浸感

Design

设计方案

Divide the interface into functional areas, consider how to guide visually and display hierarchy based on priorities.

将界面划分功能区域, 根据优先级思考如何进行视觉引导与层级关系展示

Use the imagery of doors and subtle light as loading and opening animations to convey a sense of traversing space.

使用门与微光的意象作为加载与开场动画,为用户传递穿越空间的神秘感

The interface employs a semi-transparent frosted glass effect to better express the sense of transparency in space,

ensuring usability while downplaying distinctions between layers.

界面采用半透明毛玻璃效果更好的体现出空间中的通透感,保证易用可用性的前提下弱化层级之间的区分

Background dynamic effects and audio-visual design: Generate scene images using Midjourney, combine with After Effects animations for scene creation, emphasizing spatial depth, low saturation, and warm colors. The background music adopts a calm and soothing style, complementing the scene appearance

使用Midjourney生成场景图片,结合AE动效效果生成场景图片,注重空间感、低饱和、暖色为主背景音乐采用安静舒缓的风格,搭配场景出现

Include background music

Demo 含背景音效

End :)

——

NEXT

QIFU Mindfulnes APP Design |起伏APP产品设计

Tencent Wealth Management App - Portfolio Diagnosis|腾讯理财通APP 持仓诊断产品设计

ClassIn Icons Guidelines & Update Design | ClassIn 全局图标升级设计

XiaoMi News Product Design|小米必看资讯设计

ClassIn Visual Design Upgrade| ClassIn 视觉升级