# Interface_Design **Repository Path**: meichun_chen/Interface_Design ## Basic Information - **Project Name**: Interface_Design - **Description**: MOO音乐竞品分析（架构图、交互路径分析、亮点、字体规范）、浅音APP第一版设计 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-04-24 - **Last Updated**: 2021-04-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 一、竞品分析_MOO音乐 - MOO音乐是一款满足小众口味、专注听歌的音乐APP，面对的是喜欢小众，乐于探索好音乐的年轻人；MOO音乐的品牌理念和调性：经典、创新、前卫、独立。 ### 1.1架构层 ![](https://images.gitee.com/uploads/images/2020/0513/173924_012ac871_2230991.png) - Moo音乐的主要页面布局简洁，结构简单，只有四个主要页面：登录页，DISCOVER，PLAY和我的音乐。Moo音乐之间相互连接，功能有相似点且齐全。在进行音乐播放动作时，还会有一个沉浸式的播放界面，画面简约，对喜欢极简主义的用户而言是个良好的体验。 ### 1.2交互路径分析 - MOO音乐整体界面简洁，风格独特，结构简单；但页面操作与大多数的音乐APP默认操作方式矛盾，用户容易误操作，不符合用户的使用习惯。因过于追求简洁效果，内容过多堆积于discover页，容易让用户产生疲劳感。交互功能相比较于现比较成熟的音乐APP，还不够齐全，例如歌曲不能按歌词来快进退；没有定时关闭功能等；有一交互亮点为“添加歌曲故事”功能，是由用户创作的，用户也可以通过歌曲故事了解歌曲的创作故事、主题等，且歌曲故事上传后需要经过审核才能发布，确保了内容的质量。 #### 点击此处可以放大图片观看→[MOO音乐交互路径](https://docs.qq.com/doc/DRm9DTUZzS093R1d5) ![](https://gitee.com/Tanmingqi/Interface_Design/raw/master/images/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE_%E7%AB%9E%E5%93%81%E5%88%86%E6%9E%90/moo/MOO%E4%BA%A4%E4%BA%92%E8%B7%AF%E5%BE%84%E5%88%86%E6%9E%90.jpg) ### 交互亮点提取 ![](https://images.gitee.com/uploads/images/2020/0513/110655_78cd2406_2230991.png) #### 总结： ##### 1.在PLAY音乐播放界面，随意点击界面即可暂停/开始播放 ##### 优点：操作简易便捷，为整体页面节省空间；界面简洁美观，整体视觉感受直观舒适； ##### 缺点：操作被隐藏，需有点击才能发现；操作过于便捷容易导致用户误操作（可改进为在用户初次使用时，弹出提示告知用户点击界面会暂停）； ##### 2.在PLAY音乐播放界面，点击黄色标签处，添加歌曲故事/进入标签页 ##### 优点：操作简易直观，用户可直接找到标签类型相关艺人和歌曲；添加歌曲故事可使用户产生共鸣且促进用户的分享欲望，增加用户粘性； ##### 缺点：暂无 ##### 3.向右滑动胶片图标播放下一首歌曲 ##### 优点：操作简易，功能独特；增加趣味性，提升用户体验 ##### 缺点：操作被隐藏，在正常状态下难以发现此交互功能（可改进为在用户初次使用时，弹出提示告知用户向右滑动即可播放下一首歌曲）；交互简单，只能操作播放下一首歌曲，不能操作上一首，或者调节歌曲进度； ##### 4.滑动PLAY音乐播放界面下方声波区域调节歌曲时间进度 ##### 优点：有沉浸感，用户进一步体验音乐； ##### 缺点：操作被隐藏，在正常状态下难以发现此交互功能（可改进为弹出提示告知用户操作说明，滑动此处调节歌曲时间进度）；只能进行歌曲时间进度的调节，不能根据其歌词调节；在调节过程中界面过于简单且色彩灰暗； --- ![](https://images.gitee.com/uploads/images/2020/0513/112827_7fd072dd_2230991.png) #### 总结： ##### 1. 在音乐播放界面，点击封面图，界面上方变为滚动歌词，下方缩略框面始终不变 ##### 优点：充分利用占比较大的封面空间，为整体页面节省空间；且界面淡化，简洁大方；缩略框始终如一满足用户使用习惯； ##### 缺点：操作被隐藏，需有点击才能发现； ##### 2. 在音乐播放界面，点击右上“相似歌曲”，开启播放相似歌曲模式 ##### 优点：操作简易，一键点击即可运用，点击此图标后显示交互功能，下一首立刻播放相似歌曲；点击图标后图标由浅色变红，便于用户识别； ##### 缺点：未点击时图标颜色过浅，不利于用户发现；点击即运用功能下一首立刻播放相似歌曲，用户没有选择余地（可改进为用户可以挑选下一首立即播放，或者相似歌曲添加为歌单显示）； ##### 3. 右滑播放界面，变为评论区 ##### 优点：在播放界面中间最上方三点图标有一定引导作用，操作便捷； ##### 缺点：右滑功能与播放界面点击评论图标功能一致； --- ![](https://images.gitee.com/uploads/images/2020/0513/113300_e50a8b8e_2230991.png) #### 总结： ##### 1. 播放界面模仿唱片机的效果，播放时转动，暂停时停止 ##### 优点：界面展示专辑封面，音乐播放时唱片会随音乐匀速旋转，暂停时停止，整体视觉感受简洁高端大气，提升用户体验； ##### 缺点：暂无 ##### 2. 播放界面右上角点击直播处，出现正在直播播放歌曲的内容，或者是根据用户推荐的内容 ##### 优点：操作简易便捷；有引导性，在点击处下方有直播内容告知用户；增添内容丰富度，使歌曲多元化； ##### 缺点：直播内容质量参差不齐，难以把控，会直接影响用户体验；直播图标一直在闪，容易抢占用户眼球，需调整图标闪示的频率； ##### 3. 播放界面左滑为上一首歌曲，右滑为下一首歌曲 ##### 优点：操作性强且简易，方便用户操作； ##### 缺点：操作被隐藏，需向左/右滑动时才能发现；缺少指示性，用户容易误操作，需提示用户该操作说明； --- ### 1.3 视觉层面分析 #### 1.3.1 颜色规范 ![](https://images.gitee.com/uploads/images/2020/0513/163638_e8850569_2230991.png) - 总结：MOO音乐采用logo颜色作为主色调，凸出了这个APP的特性，配色是简单的黑黄配色。 主色很明确，胶片黑贯穿整个产品的页面，使界面清晰统一，凸出了胶片概念的复古质感。操作引导上则使用了鲜亮的黄色点缀，与黑色形成鲜明强烈的对比，让用户能毫不费力地识别内容，准确地引导用户，吸引用户阅读，同时也让整体界面增加活力。 #### 1.3.2 图标规范 ![](https://images.gitee.com/uploads/images/2020/0513/164546_6a0bcdd9_2230991.png) - 基础图标设计简洁，大多为面性图标，能强调重心，抓住用户眼球。 引导操作图标，登录图标和探索标签图标都为黑黄搭配，外围的黄色与底色黑色形成鲜明对比，能引起用户注意，易于阅读。同时与基础配色一致，在页面上具有一致性，也能在页面上作为点缀。 歌曲播放图标与logo相呼应，凸出产品特征和设计，是以黑胶唱片复古风为主的风格。 歌曲操作图标设计不太合理，这个页面的重点应该在文字上，图标并不起主要指示引导作用，但图标设计确是面性图标，占得比重过重，会给用户体验造成累赘感，此处应改成线性图标更好。 #### 1.3.3 字体规范 ![](https://images.gitee.com/uploads/images/2020/0513/173923_b83a330f_2230991.png) #### 1.3.4 内容版式规范 ![](https://images.gitee.com/uploads/images/2020/0513/164603_fd57215f_2230991.png) #### 1.3.5 图片规范 ![](https://images.gitee.com/uploads/images/2020/0513/170055_39f2f1d7_2230991.png) - 总结：除banner的图片比例为16:9，能给用户一种电影场景般的开阔效果，因为大多是用于展示歌曲mv片段或新歌首发的海报。该APP上其他的图片展示全都1：1的比例，使页面排版简洁，规整，在无形中有对齐效果，同时也能对图片中的内容进行强调，凸显主体存在感。 #### 1.3.6 其他 ![](https://images.gitee.com/uploads/images/2020/0513/170055_a605b8ab_2230991.png) --- ## 二、小组作品_浅音 ### 2.1 图标 ![](https://gitee.com/Tanmingqi/Interface_Design/raw/master/images/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE_%E7%AB%9E%E5%93%81%E5%88%86%E6%9E%90/%E6%B5%85%E9%9F%B3/%E6%B5%85%E9%9F%B3%E5%9B%BE%E6%A0%87.jpg) ### 2.2 作品界面 ![](https://images.gitee.com/uploads/images/2020/0513/140420_eddbd892_2230991.png) ### 2.3 架构层 - 主导航由四部分组成：论坛、发现、我的、随心。 - 论坛：顶部是搜索框，3个主要模块为推荐歌手模块、文章模块和写故事模块，其中写故事模块最具特色，用户可以在此发表自己对某一首歌的心情或感悟，写成这首歌的音乐文章，并发表于论坛的文章部分，其他用户可以欣赏文章并评论互动。 - 发现：顶部是搜索框和听音识曲控件，4个主要的模块为每日推荐banner轮播图、榜单(歌手榜、文章榜、排行榜)、按用户所设置推荐歌曲、音乐频道。发现页按照不同的分类形式满足不同用户的搜歌习惯，让用户更快捷地找到他们想找的歌曲。 - 我的：此页集合了9个模块：个人中心、下载管理、我的收藏、我的关注、最近播放、本地音乐、我的文章、我的歌单和设置。其中本地音乐模块中的“我的音乐创作”是主要特色，用户可以剪辑自己喜欢的歌曲设置为铃声或者录制自己的歌曲。 - 随心：根据用户实时状态（所处的时间地点、天气状况、温度等等）和用户手动设置此刻心情状态，APP推荐相应的歌单，用户还可以按热门程度或时间顺序对歌单进行排序。 - 音乐播放界面：音乐播放界面是音乐APP最主要的界面，由歌曲信息、相关控件、互动和写故事组成。用户可以在音乐播放界面直接点击“写故事”按钮，APP自动将当前歌曲默认为用户添加的音乐，页面跳转至写故事的编辑页面，用户创作的音乐文章发表于论坛。 ![](https://gitee.com/Tanmingqi/Interface_Design/raw/master/images/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE_%E7%AB%9E%E5%93%81%E5%88%86%E6%9E%90/%E6%B5%85%E9%9F%B3/%E6%B5%85%E9%9F%B3%E6%9E%B6%E6%9E%84.png) ### 2.4 交互路径分析 #### 点击此处可以放大图片观看→[浅音交互路径](https://docs.qq.com/doc/DRm12RkV2WlBtV29F) ![](https://gitee.com/Tanmingqi/Interface_Design/raw/master/images/%E6%9C%9F%E4%B8%AD%E9%A1%B9%E7%9B%AE_%E7%AB%9E%E5%93%81%E5%88%86%E6%9E%90/%E6%B5%85%E9%9F%B3/%E6%B5%85%E9%9F%B3%E4%BA%A4%E4%BA%92%E8%B7%AF%E5%BE%84.png) ### 总结： ![](https://images.gitee.com/uploads/images/2020/0513/160215_45d472ea_2230991.png) ### 2.5 视觉规范 #### 2.5.1 颜色规范 ![](https://images.gitee.com/uploads/images/2020/0513/143030_525b9555_2230991.png) - 总结：我们设计的音乐APP主打文艺风，针对的用户群体是走文艺风路线的学生，采用浅蓝紫色和蓝灰色做主色调，浅蓝紫色为底板背景色，暗绿色为模块色，辅助色为淡绿色和淡蓝色作为图标设计配色（在底板背景的图标为淡绿色，在模块上的图标为淡蓝色，当未选择图标时为线性图标，点击图标后变为面性图标），字体颜色为黑色，产品界面清新淡雅，选择亮度和饱和度偏低，偏向自然色（蓝，绿）的配色给用户既和谐又低调小众，品味高的视觉享受 ### 2.5.2 图标规范 #### 已放置图标 ![](https://images.gitee.com/uploads/images/2020/0513/143545_77e4f5f9_2230991.png) #### 待放置图标（在细化后想加入的图标，暂定） ##### 点击此处可以放大图片观看→[待放置图标](https://i.loli.net/2020/05/13/ZH6k5nzLtvWmwda.png) ![](https://images.gitee.com/uploads/images/2020/0513/152449_33d20ca8_2230991.png) - 总结：我们预想设计的图标在没点击前为线性图标，鼠标点击后变为面性图标，用户能清楚了解当前使用APP的状态，提醒用户下一步的操作。图标样式设想为做成同一系列，符合APP总体的和谐度，且设置的图标多为常用图标，配上介绍文字能让用户快速领悟功能模块。 ### 2.5.3 字体规范 ![](https://images.gitee.com/uploads/images/2020/0513/173640_e37a3d8d_2230991.png) ### 2.5.4 内容版式规范 ![](https://images.gitee.com/uploads/images/2020/0513/163012_d8ac2086_2230991.png)