您还没有专辑

开始创建自己的专辑吧

创建
您可在个人中心-我的专辑处查看
当前位置:首页 > UI设计 > UI-K歌APP界面设计(中)

UI-K歌APP界面设计(中)

手机观看

扫一扫下载虎课app

支持离线缓存,随时随地学习

VIP优惠升级 19大分类,畅享43000+设计教程特权!

为自己充值升华学习
今日剩余学习次数:1

按住画面移动小窗

UI-K歌APP界面设计(中)

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

学习意犹未尽?成为VIP,继续提升

免费学习即将结束

关闭继续学习>

发表评论
收起宽屏
分享给朋友:
手机观看

扫一扫下载虎课app

支持离线缓存,随时随地学习

添加到专辑收藏已收藏收藏成功,可进入个人中心-课程收藏 查看!
目录信息笔记
图文教程学员评价 (4条评论)视频字幕查看优秀作品>

1、本课主要内容如图示。

2、[打开]Sketch软件,[打开]首页文档。具体效果如图示。

3、[新建]对应大小的画布,[重命名]发现。具体效果如图示。

4、使用[矩形工具]绘制画布大小的矩形,[填充]合适的颜色,[重命名]BG,[锁定]图层。具体效果如图示。

5、[复制]首页顶部的菜单栏至发现页面,[删除]多余的元素。根据设计思路,使用[矩形工具]绘制合适大小的搜索矩形框,[填充]合适的颜色。使用[文字工具]输入文字,调整大小,排列至合适的位置。具体效果如图示。

查看更多
您需要学习后才可以评价,立即学习
您需要学习后才可以评价,立即学习
评论列表
仅显示有内容的评论
仅显示带图评论
排序方式:

哈喽 大家好,欢迎来到虎课网 我是艾伦 ,这是K歌 APP的界面设计中的第二节课 ,上节课呢主要介绍了craft插件的使用和首页的设计 ,那本节课继续把其余的界面设计讲完 ,那本节课的内容呢 还和上节课内容基本一样 ,那在插件的配合下提升设计的效率 ,让你更多的专注于设计创作 对吧 ,内容大纲和上节课是一样的 本节课我们将要讲解这么几个界面 5个界面 ,别看特别多啊,其实就三个页面而已 ,只是做一些效果的展示而已啦 ,好 那开始今天的课程 选择画布是iPhoneX 加上背景 ,然后我们把头部的这个菜单栏复制过来 把多余的删掉 ,把搜索加上包括搜索提示的文字也加上 ,

嗯,然后把底部的这个标签栏和home纸张也复制过来 ,好 ,那我们找一个那个图片吧,作为这个banner,把他搞进来 ,嗯,这个大小我们设置一下 ,然后我们做一个小的分类菜单 也就是把375分为4份 ,嗯,375÷4就好了 ,第一个菜单是歌手 ,那我们画一个小人儿 文字的话 文字是歌手啦 好吧 ,

然后复制出另外三个来 ,分别改一下文字的颜色,这个复制的话之前也提过就是 ,直接复制就好了,然后或者是通过那个 ,拖放 拖动文件夹到另外一个文件夹他会给你自动排列出来 ,分类的图标却用四个小方块格来代替吧 ,那把其中的两个小方块 这个不透明度调一下 让这个整个小坐标有点层次感对吧 ,

合唱我们就用两个小麦克风 来做图标 ,那推荐的图标就更简单了,用一个星星来表示就好了 ,完了之后,最后给他们分别创建组件 ,那下面的这个列表啊,其实我们就做在选项卡的形式就好了 ,一个是猜你喜欢对吧,另一个是 就已点歌曲 ,

然后把那个当前状态 ,高亮 ,ok 已点歌曲将这个不透明度调个50% 或70就可以了 ,好,下边的这个列表 我们把它的高度设为88pt ,而歌星的头像是64×64 ,让他们居中 ,然后左边距是20,这个大家都知道 ,然后把歌曲名称 ,歌星名字 ,和多少人唱过的信息都列出来 ,然后右边是个K歌按钮,对吧 就是一个 一个按钮 ,

排好后给他们都改好你想要的文字 ,文字之间的层次感就使用不透明度来调节就好了 ,对K歌这个按钮我 ,做的是一个镂空的样子,所以说我们给他加一个渐变的效果 ,按中间的 中间的这个字号和颜色的话 ,那就取下用那个 ,Ctrl+C取一下就好了 ,好,最后把这些信息都创建成组 ,嗯,好,复制出来,然后去相应的去改一下歌曲名称,歌星的头像就好了 ,

好 复制出这么多啊,我们可以就是 ,把页面拉长点看一下 ,这边有个bug啊 ,就在你创建好的组件中去选择图片的时候发现选了这个图片之后没有变化是吧 ,这我估计是sketch的软件本身有问题 ,你可以通过外部拖放进来 好 是不是有问题的可以直接换掉 ,这个问题的话我们现在也解决不了,所以说我们就通过第二种方法就 ,从外部直接拖进来把图片替换掉就行了 ,把列表中的这个,歌星头像 ,名字和歌曲名称 都一一的给它填一下 ,好 当然不填也可以啦是吧 ,

好 最后呢,在标签栏上把发现变成高亮对不对 因为这是在当前的页面吧 ,还记得吗 因为我上节课已经做好了组件对不对 ,那直接在属性上 ,改为选择 选中的这个效果就行了 ,好 那么发现界面也就这样 然后已经完成了 ,好,接下来我们制作一下K歌的选择界面 ,这个页面有两个效果 ,那我们先把第一个效果页面先做出来 ,然后在菜单上就我们把之前的这个文字改成歌星和歌曲对吧 ,把歌星和歌曲 这个 这几个文字都打上 周杰伦啊什么的 他的那个 ,歌叫什么 新上的一个歌 ,

好 ,那再做两个按钮 一个是独唱 另一个是合唱 ,那需要做两个效果了 ,对吧 我们在这个APP当中设计的时候 ,

登录后查看更多
换一批

为你推荐

每周一练

立即参与

同学,小虎知道你非常努力的想学习!

老师录制课程真的也很辛苦

赞助一下吧

确定学习吗?

您每天可免费学习一个教程。

成为VIP可无限学习 !

成为VIP吧!

成为VIP吧!

您已经免费学习 1 个教程 !

我们录制教程很努力的,赞助下吧 !

升级VIP吧!

您已经学习 5 个教程啦!

我们录制教程很努力的,赞助升级下吧 !

您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个素材文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计观看5个图文教程


您在当前分类下不是VIP,赞助VIP享受无限观看


学习后才能评价哦!

学习后才能提问哦!

获得30虎课币

评论提交成功,将在审核通过后显示

×

下载素材/源文件:

收藏成功
取消成功
特惠
充值
客户端
虎课桌面客户端
置顶播放器,边看边学习
虎课移动APP
支持离线缓存,随时随地学习
我的排行
建议意见
官方客服

官方客服

您可以与在线客服进行沟通或者拨打客服热线获得帮助

客服热线:021-80344319工作日:9:30-18:30

在线咨询:联系客服工作日:9:00-22:00

节假日:9:00-18:00

虎课积分
登录注册
使用手机号码登录
使用手机号码登录
手机号码格式错误
换一个
图形验证码错误,请重新输入
验证码错误,请重新输入
登录
已连续签到0
第一天
5个虎课币
第二天
10个虎课币
第三天
15个虎课币
第四天
20个虎课币
第五天
40个虎课币
第六天
20个虎课币
第七天
20个虎课币
立即签到
已签到
每周一重置签到奖励
已连续签到0
本周斩获110个虎课币,下周也要来哦
我知道了
已连续签到0
哎呀,签到失败了!
再次签到
哎呀,系统出现错误,请稍后重试!
上上签 · 今日宜学习
恭喜!签到成功,获得 10 个虎课币
.
书山有路勤为径,学海无涯苦作舟
— 唐代文学家 韩愈
虎课网 · 每天进步一点点
分享到