音乐APP界面设计步骤详解

伴随着互联网的迅速发展,许多与因特网相关的职位应运而生,UI界面设计师是因特网的核心职位之一。UI界面设计已经渗透到我们生活的方方面面,包括网站、应用程序或其它数字平台上的按钮、菜单布局、配色方案和排版。很多人认为 UI界面设计只是关于字体、颜色和导航栏,但远不止于此。本文就为大家带来详细的音乐来APP界面设计教程,咱们一起来看看吧!

设计教程源文件icon-default.png?t=N7T8https://js.design/f/TRZTkk?source=csdn&plan=btt6141

背景

·创建画板 375*812 的画板,填充 FCFEFF 。

全局操作区

·绘制 24*24 的图标作为全局性操作区功能图标。

个人信息区

·绘制 100*100 的画板,调整圆角值,作为头像区。·姓名「MiSans、Bold、字号 24、填充 212121 」。·个性签名「MiSans、Light、字号 14、填充 212121 」。

常用功能区

·数字「MiSans、Semibold、字号 18、填充 212121 」。·文本「MiSans、Light、字号 14、填充 212121 」。

功能标签

·绘制 343*48 的 矩形,圆角值为 12,填充 F5F6FD 。·再绘制 172*48 的 矩形,圆角值为 12,填充 212121 。·文本「MiSans、Medium、字号 16」。

列表项

·绘制 56*56 的画板,圆角值为 12,作为专辑头像 。·歌曲文本「MiSans、Medium、字号 16」。·次级文本「MiSans、Regular、字号 10、填充 FF3838」·歌手信息「MiSans、Regular、字号 13、填充 757575」

歌曲列表

·复制多条列表项,替换图片和更换文本信息。

底部导航栏

·绘制 375*52 的画板,填充白色。·绘制四个icon,作为导航图标,调整颜色和间距。

这样一个简单的音乐类APP界面设计就做好啦,大家也可以根据自己的想法来尽情创作,快去试试吧!h设计教程源文件icon-default.png?t=N7T8https://js.design/f/TRZTkk?source=csdn&plan=btt6141

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/707967.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

计算机图形学入门12:纹理映射

1.问题 如上图所示,前面的内容已经知道怎么对物体进行着色,在球和地板上出现了不同的颜色,也就是定义了不同的kd颜色系数,那么如何在物体不同位置定义不同属性呢? 2.纹理映射 2.1什么是纹理映射 如上图球的表面贴上一…

探索Jetpack Compose中的高效导航库:Voyager项目

探索Jetpack Compose中的高效导航库:Voyager项目 在Jetpack Compose中实现高效、可扩展的导航是每个开发者的追求。Voyager作为一个多平台导航库,不仅与Jetpack Compose无缝集成,还提供了一套务实的API,帮助开发者创建单活动应用…

tvm实战踩坑

今天玩了一下tvm的安装 我要安装v0.14.0的版本 所以按照官网的方法 https://tvm.apache.org/docs/install/from_source.html#python-package-installation git clone --recursive https://github.com/apache/tvm tvmgit checkout v0.14.0recursive是很重要的 这一步可以替换成…

显卡GPU、CUDA、Pytorch版本对应即下载安装

显存大于4G的建议使用GPU版本的pytorch,低于4G建议使用CPU版本pytorch,直接使用命令安装对应版本即可 GPU版本的pytorch的使用需要显卡支持,需要先安装CUDA,即需要完成以下安装 1.查看显卡GPU支持的CUDA版本(最高&…

Flutter系列:关于ensureInitialized()

Flutter系列 关于ensureInitialized() - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28…

vue3 proxy对象转为原始对象

https://cn.vuejs.org/api/reactivity-advanced.html#toraw import { toRaw } from "vue";const foo {} const reactiveFoo reactive(foo)console.log(toRaw(reactiveFoo) foo) // true 人工智能学习网站 https://chat.xutongbao.top

18.9k star!一个高性能的嵌入式分析型数据库,主要用于数据分析和数据处理任务

大家好,今天给大家分享的是一个开源的面向列的关系数据库管理系统(RDBMS)。 DuckDB是一个嵌入式的分析型数据库,它提供了高性能的数据分析和数据处理能力。DuckDB的设计目标是为数据科学家、分析师和数据工程师提供一个快速、灵活且易于使用的数据分析工…

『SD』场景变换魔法:InstructP2P控制类型助你一键换天气

本文简介 InstructP2P 控制类型是 ControlNet 插件中的一个强大功能,InstructP2P 的主要能力是实现场景转换,风格迁移。 我将绫波丽的形象从她原本身着机甲、在夜空下站着的场景,转换到春意盎然的环境中,四周环绕着绽放的花朵和嫩绿的新叶。…

如何基于Excel文件图形化从零建表并导入数据(以MySQL和SQLynx为例)

目录 1. 准备Excel数据 2. 导入Excel数据 a. 登录SQLynx b. 导入Excel文件 3. 验证数据 4. 使用和管理表 5. 总结 在实际的业务过程中,我们经常会有很多数据存储在Excel中,但在Excel中的数据分析不如使用SQL和数据库方便,数据量大些的…

蒂姆·库克解释Apple Intelligence和与ChatGPT合作的区别|TodayAI

在2024年全球开发者大会(WWDC 2024)上,苹果公司首席执行官蒂姆库克(Tim Cook)隆重介绍了公司的最新人工智能(AI)计划——Apple Intelligence,并宣布了与OpenAI的ChatGPT的合作。虽然…

大型语言模型(LLMs)是如何工作的?

大型语言模型(LLMs)如ChatGPT、Bing的“Sydney”模式和Google的Bard正在占据新闻头条。与其讨论它们将使哪些工作变得过时,本文将探讨这些模型的工作原理,包括它们从哪里获取数据以及使它们能够生成令人信服的真实文本的基本数学方…

【课程总结】Day8(上):深度学习基本流程

前言 在上一篇课程《【课程总结】Day7:深度学习概述》中,我们了解到: 模型训练过程→本质上是固定w和b参数的过程;让模型更好→本质上就是让模型的损失值loss变小;让loss变小→本质上就是求loss函数的最小值&#xf…

Postman接口测试工具详解(高清图例)

一、引言 1. 介绍接口测试的重要性 在当今软件开发领域,接口(API)已成为不同系统、服务或组件之间交互的桥梁。随着微服务架构的普及,接口的重要性日益凸显。然而,接口的复杂性和多样性也带来了诸多挑战,其…

【中间件】Pulsar集群安装

目录 一、Pulsar介绍 1.1 Pulsar基本介绍 1.2 Pulsar架构 Producer & Consumer Apache Zookeeper Pulsar Brokers Apache Bookkeeper 二、Zookeeper集群安装 三、Pulsar集群安装 3.1 bookie与broker配置 3.1.1 修改bookie配置文件 3.1.2 修改broker配置文件 3…

轮到国产游戏统治Steam榜单

6月10日晚8点,《黑神话:悟空》实体版正式开启全款预售,预售开启不到5分钟,所有产品即宣告售罄。 Steam上,《黑神话:悟空》持续占据着热销榜榜首的位置。 但在《黑神话:悟空》傲人的光环下,还有一款国产游戏取得出色的成绩。 6月10日&#…

32T存储删除视频的恢复方法

由于存储技术的发展和普及目前很多行业都开始使用小型存储,NAS可以通过网络进行数据上传和读取,使用极为方便。但是由于NAS设备容量较大且碎片较多,所以此类设备删除或者格式后恢复难度是比较大的,下边我们来分享下32T存储的恢复方…

Android面试题之ActivityManagerService的启动流程

本文首发于公众号“AntDream”,欢迎微信搜索“AntDream”或扫描文章底部二维码关注,和我一起每天进步一点点 SystemServer启动 创建SystemContex 用于加载系统相关的资源,比如theme,android命名空间下的资源等创建引导服务&#…

关于Ubuntu24.04嘉立创EDA无法启动的问题

关于Ubuntu24.04嘉立创EDA无法启动的问题 查看无法启动原因解决办法1解决办法2 查看无法启动原因 在终端使用启动文件命令报错 解决办法1 输入如下命令可以正常启动 ./lceda-pro --no-sandbox 解决办法2 找到desktop文件进行修改 cd /usr/share/applications sudo vim lce…

基于顺序表与链表的顺序查找(顺序表的折半查找)

内容 基于任意一个顺序表、链表&#xff0c;实现顺序查找算法&#xff1b;实现折半查找算法&#xff0c;并思考折半查找算法的适用场景&#xff1b; #代码实现 #include<iostream> #include <stdlib.h> using namespace std; #define MAX 20 #define datatype int…

JS手写题解析

手写Promise class MyPromise {constructor(executor) { // executor执行器this.status pending // 等待状态this.value null // 成功或失败的参数this.fulfilledCallbacks [] // 成功的函数队列this.rejectedCallbacks [] // 失败的函数队列const that thisfunction reso…