# 自主学习APP界面设计 **Repository Path**: xuehuanmei/interim_test_interface_design ## Basic Information - **Project Name**: 自主学习APP界面设计 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-05-13 - **Last Updated**: 2022-01-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 自主学习APP界面设计 ### 一、竞品分析 #### 1.1 竞品架构层 采用番茄ToDo作为竞品分析架构层，从成熟的时间管理学习类app中找到适合学习的功能点、设计点等。分析到番茄todo该app主要页面为代办、代办集、锁机、统计数据、我的页面。 #### 番茄todo主导航架构层： ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/020745_e0ca7ada_2228907.png "image1.png") #### 细分番茄ToDo的页面结构： ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/020856_13daec6e_2228907.png "image2.png") #### 1.2交互路径分析 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/020944_211693d0_2228907.png "image3.png") #### 对比产品亮点提取： ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/021025_6232fca8_2228907.png "image4.png") #### 交互路径——锁机功能亮点总结： 在此功能，用户可以通过自己的设置进行规划锁机的白名单应用，在使用时避免因为软件使用需求而减小该功能的使用。但对比forest的使用时会强制到完成的时候才能进行其他软件的使用，在这个功能的设计上，番茄ToDo的设计会更人性化，减少用户的使用障碍。同时，在该功能的使用还有分规定时间段进行，有助用户养成良好的学习规律。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/021525_a7567246_2228907.jpeg "交互分析1.jpg") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/021540_54babe37_2228907.jpeg "交互分析1.2.jpg") #### （社交）对比产品亮点提取： ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/021209_bfbba70d_2228907.jpeg "交互分析2.jpg") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/021225_6ca37778_2228907.jpeg "交互分析3.jpg") #### 1.3视觉 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/021851_9964969f_2228907.jpeg "image5.jpeg") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/021906_4cd00009_2228907.jpeg "image.jpeg") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/021923_1e6cd41b_2228907.jpeg "image6.jpeg") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/021954_ce7baf18_2228907.jpeg "image7.jpeg") ### 二、自己设计的产品分析 #### 2.1士多啤梨Gogo的架构层 #### 士多啤梨Gogo的主导航架构层： ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/022118_870aa97d_2228907.png "image8.png") #### 士多啤梨Gogo的细分页面架构层： ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/022127_bd0b50ca_2228907.png "image9.png") #### 2.2 士多啤梨Gogo的交互路径分析（代办、社区） ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/022253_1aae8a2f_2228907.png "image10.png") #### 代办功能交互总结：在本app设计上，代办功能作为核心功能之一。其次，将其的功能在设计上选用了主导航进行分层引导用户使用，在设计面板上将日程表图标作为该页唯一引导图标，增强用户对时间计划表的利用以便形成稳定的使用模式。在功能上将任务进行归纳整合，大于等于两个任务需要依次进行时用户可通过“事项X”进行整合，避免用户在使用该功能完成任务时无法在任务栏内寻找的尴尬。计时界面使用简单三个功能图标，在任务进行时用户可以通过自定义或者系统推荐进行bgm的播放，在需要中断学习时可以快速退出界面。在背景图上设计为随机标记激励话语，强化了时间的板块去除了繁杂的功能。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/022325_1164ff32_2228907.png "自己的作品——交互分析(1).png") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/035512_3c035e5c_2228907.jpeg "自己的作品——交互分析(2).jpg") #### 社交功能交互总结 相比于番茄的社交“自习室”，士多啤梨GOgo的社交功能更加的有趣味性，用户可以通过这个平台“组员”之间相互交流，相互监督学习，在同一个平台内学习提高效率。更能通过自行分析，判断“自习室”的效率高不高，是不是自己兴趣的自习室，可以通过申请加入。在同个"自习室"更能互相PK，并且互相督促学习，通过数字让用户有攀比之心，更加激励他们学习。增加“Face to face”两两之间可以互相开视频，同时进行学习，这样也可以做到互相督促。 #### 社交功能交互亮点的总结 - 现在的许多人追求快速浏览，与快速操作。我们增加了“长按”头像这个功能看到用户的基本档案阅览，同时快速进行拨打电话、视频。 - 在排行榜，增加了浅色绿色底，快速标记自己，让用户快速找到自己的位置。 - 选择小卡片弹幕的形式，是为了节省不必要的页面，虚化背景，突出弹窗的内容 #### 2.3士多啤梨Gogo的视觉规范 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/022541_478df3c1_2228907.png "image12.png") 总结，颜色选择比较护眼的环保的颜色，同时让用户使用时感到轻松。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/022550_5a2bea56_2228907.jpeg "image11.jpeg") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/042750_d8be4464_2228907.jpeg "tupiao.jpg") 总结：图标的颜色选择离不开整体APP的主色调和辅助色，相互之间配合，让APP看起来更加整洁，舒适。图标的功能选择也是比较常态化的，让用户容易上手操作，简单易懂的流程。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0513/042829_498ef462_2228907.jpeg "neirong.jpg") 内容都是卡片式分布的多，整体看上去更加的整洁明了。