# 乐趣音乐-设计稿（界面设计期末项目） **Repository Path**: fang_se_bin/interface-design-draft ## Basic Information - **Project Name**: 乐趣音乐-设计稿（界面设计期末项目） - **Description**: 本仓库用来存放用户界面设计的期末项目-设计稿 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 1 - **Created**: 2020-12-24 - **Last Updated**: 2023-08-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 界面设计设计稿 #### 介绍 本仓库用来存放用户界面设计的期末项目-设计稿 # 产品介绍 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/104812_08919eb8_5329186.png "产品介绍3.png") # 产品交互链接 [产品交互链接](https://modao.cc/app/5fa212d954269cc7ef918beeb1ae317268758649?simulator_type=device&sticky) #### 链接：https://modao.cc/app/5fa212d954269cc7ef918beeb1ae317268758649?simulator_type=device&sticky # 一、品牌 ## 1.1品牌核心价值 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0111/134123_85cbf843_5329186.png "品牌核心价值1.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0111/133604_fa8a50bd_5329186.png "品牌核心价值.png") ## 1.2品牌元素 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/134957_f0b60298_5329186.png "品牌元素2.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/134818_bd7aadc3_5329186.png "品牌元素.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/140309_3cfdcef3_5329186.png "品牌元素3.png") # 二、logo系统 ## 2.1logo组成 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/223658_94a4cb15_5329186.png "logo1.png") ## 2.2logo应用场景 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/141148_df99a70f_5329186.png "logo.png") # 三、颜色系统 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/223721_57990d93_5329186.png "颜色系统.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/223733_373de653_5329186.png "颜色系统2.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/223745_fc6b7c30_5329186.png "颜色系统3.png") # 四、Icon视觉系统 ## 4.1产品图标库 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/133244_350f56f9_5329186.png "图标库.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/133258_594388d3_5329186.png "图标库2.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/133312_73086933_5329186.png "图标库3.png") ## 4.2产品功能性图标+非功能性图标 ### 4.2.1产品功能性图标 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/154349_356bbe25_5329186.png "功能性图标.png") ### 4.2.2产品非功能性图标 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/154442_cc77316e_5329186.png "非功能性图标.png") # 五、字体系统 ## 5.1字号、字体 ### 文字选用苹方（PingFang SC Light），标题选用“苹方 粗体” ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/154541_04e512d3_5329186.png "字号、字体1.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/154600_8be3e485_5329186.png "字号、字体2.png") ### 5.1.1尺寸大小规范表 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/155023_20311b36_5329186.png "尺寸规范大小表.png") ## 5.2行间距 ### 行间距设定：行间距与字号比例为1.5倍 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/154644_be800043_5329186.png "行间距.png") ## 5.3标题文字与内容文字间距 ### 标题文字与内容文字间距为8的倍数，本产品选用24px ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/154746_b4de2a9f_5329186.png "间距为8.png") ## 5.4文字搭配 ### 文字本产品的文字搭配选用4和6的梯度搭配，本产品选用22px的标题搭配18px的内容，18px的带头列表标题搭配14px的辅助信息 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/154907_82e0b433_5329186.png "文字搭配.png") ## 5.5字体对齐 ### 本产品的段落文字采用“两端对齐左对齐，避头尾”的原则 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/155116_3ce8589f_5329186.png "字体对齐.png") # 六、图片系统 ## 6.1、1：1比例 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/230810_22369566_5329186.png "图片1.png") ## 6.2、16：9比例 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/010837_12017356_5329186.png "16比9（3）.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/011542_fc261e34_5329186.png "16比9（6）.png") ## 6.3瀑布流设计 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0111/130857_08e00be7_5329186.png "瀑布流设计.png") ## 6.4图片列表布局 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/012538_f77cf116_5329186.png "图片系统1.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/012601_16bb5e94_5329186.png "图片系统2.png") ## 6.5头像 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/012635_f8950433_5329186.png "图片系统3.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/012718_7b297a42_5329186.png "图片系统4.png") ## 6.6歌单图片布局 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/012736_c374dfef_5329186.png "图片系统5.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/012814_0994fe9a_5329186.png "图片系统6.png") # 七、版式、栏高、边距+栅格系统 ## 7.1版式 ### 7.1.1对齐 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/114953_da4c29a1_5329186.png "版式2.png") ### 7.1.2亲密性原则 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/125437_e1ba0b31_5329186.png "设置3.png") ## 7.2栏高 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/001843_4d7a0b30_5329186.png "版式1.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0111/141933_e3aaf049_5329186.png "栏高.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/020043_9f05fe62_5329186.png "导航栏.png") ## 7.3边距 ### 边距是指页面内容到屏幕边缘的距离，整个应用的界面都应该以此来进行规范，以达到页面整体视觉效果的统一。全局边距的设置可以更好的引导用户竖向向下阅读。通常左右边距最小为20px，这样的距离可以展示更多的内容，不建议比20还小，否则就会使界面内容过于拥挤。给用户的浏览带来视觉负担。30px是非常舒服的距离，是绝大多数应用的首选边距，也是我的产品用的最多的边距 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0111/135238_e2aa9979_5329186.jpeg "边距.jpg") ## 7.4栅格系统 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/005544_a117f66d_5329186.png "栅格系统1.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0104/005626_d0ecf5fd_5329186.png "栅格系统2.png") # 八、APP高保真原型图 ## 8.1产品主页面原型图 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/193635_90835b9e_5329186.png "主页面.png") ## 8.2音乐播放流程原型图 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/201624_2f785028_5329186.png "音乐播放界面.png") ## 8.3娱乐四大模块原型图 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/203659_fb8c1c70_5329186.png "娱乐2.png") ## 8.4音乐游戏高保真原型图 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0111/120706_c6e4984a_5329186.jpeg "游戏高保真原型图.jpg") ## 8.5视频模块推荐+直播+搜索原型图 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0111/121715_13be77bc_5329186.jpeg "视频.jpg") ## 8.6登录流程高保真原型图 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/211847_810fd7a4_5329186.png "登录5.png") ## 8.7音乐游戏卡片式与列表式相互切换 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0103/214313_f60a4e9e_5329186.png "音乐游戏.png") #### 参与贡献 1. Fork 本仓库 2. 新建 Feat_xxx 分支 3. 提交代码 4. 新建 Pull Request #### 特技 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com) 3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目 4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目 5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) 6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)