您还没有专辑

开始创建自己的专辑吧

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

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

手机观看

扫一扫下载虎课app

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

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

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

按住画面移动小窗

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

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

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

免费学习即将结束

关闭继续学习>

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

扫一扫下载虎课app

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

添加到专辑收藏已收藏收藏成功,可进入个人中心-课程收藏 查看!
艾伦
艾伦

关注人数:173

目录信息笔记
图文教程学员评价 (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当中设计的时候 ,

登录后查看更多
换一批

为你推荐

每周一练

立即参与
虎课网为您推荐UI-K歌APP界面设计(中)视频教程、图文教程、素材源文件下载,学员课后练习、作品以及评价等内容。UI-K歌APP界面设计(中)教程讲师:艾伦,使用软件:Sketch,难度等级:中级拔高,视频时长:36分56秒 查看全部
入门教程:
PS (CC2017)教程Illustrator教程After Effects教程CorelDRAW 教程SAI教程Sketch教程Indesign教程Lightroom教程Dreamweaver教程AutoCAD(室内)教程Maya(玛雅)教程SketchUp教程C4D教程Premiere教程3DS MAX教程Axure教程ZBrush教程DaVinci(达芬奇)教程Animate(Flash)教程Lumion教程Keyshot教程Excel教程虚幻4引擎教程AutoCAD(机械)教程PPT教程Word教程Principle教程SolidWorks教程Audition教程C#游戏开发基础教程Hype 3教程Unity3D引擎教程Rhino(犀牛)教程Substance Painter教程Mockplus教程Nuke教程Pro/Engineer教程Vegas Pro 14教程墨刀教程Final Cut ProX教程Unigraphics NX教程Xmind 8教程EDIUS Pro 9教程PAINTER教程酷家乐室内设计教程蓝湖教程xiaopiu教程Keynote教程Houdini教程MUSE教程PPT教程PS (CC2018)教程Adobe XD教程Twinmotion教程Realflow教程图怪兽教程SPSS教程Python教程Acrobat Pro DC教程VBA教程Mastercam教程Numbers教程Pages教程会声会影教程WPS(2019)教程Axure(9.0)教程Visio教程R语言教程JDBC教程Maven教程Servlet教程AJAX教程Rhino(6.0)教程Revit教程Amos教程PHP教程Creo(5.0)教程C4D(R20)教程CSS教程HTML教程Dimesion教程Java教程JavaScript教程Maya(2019)教程Blender教程Oracle教程SQL Server教程OBS Studio教程AE(CC2019)教程PR(CC2019)教程Camtasia studio教程CATIA教程FL Studio教程Cubase教程Redis教程AutoCAD(建筑)教程SQL教程Vue.js教程JQuery教程VideoScribe教程C++教程PowerMill教程Alias教程

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

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

赞助一下吧
限时新手任务
额外获得 4 次学习教程次数

确定学习吗?

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

成为VIP可无限学习 !

成为VIP吧!

成为VIP吧!

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

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

升级VIP吧!

您已经学习 5 个教程啦!

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

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


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


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


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


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


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


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


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


学习后才能评价哦!

学习后才能提问哦!

获得30虎课币

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

×

下载素材/源文件:

收藏成功
取消成功
特惠
充值
客户端
虎课桌面客户端
置顶播放器,边看边学习
虎课移动APP
支持离线缓存,随时随地学习
领福利
微信扫码关注领5G 2019年全新素材包
建议意见
官方客服

官方客服

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

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

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

节假日:9:00-18:00

虎课积分
免费学习50000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了171,973
并提交了2,021份作业!
登录后立即学习!
loading
微信扫码关注即可登录
登录后立即学习!
手机号
验证码
立即登录
您需要同意协议才可以进行登录
已连续签到0
第一天
5个虎课币
第二天
10个虎课币
第三天
15个虎课币
第四天
20个虎课币
第五天
40个虎课币
第六天
20个虎课币
第七天
20个虎课币
立即签到
已签到
每周一重置签到奖励
已连续签到0
本周斩获110个虎课币,下周也要来哦
我知道了
已连续签到0
哎呀,签到失败了!
再次签到
哎呀,系统出现错误,请稍后重试!
上上签 · 今日宜学习
恭喜!签到成功,获得 10 个虎课币
.
书山有路勤为径,学海无涯苦作舟
— 唐代文学家 韩愈
虎课网 · 每天进步一点点
分享到
全站50000+课程免费学!昨日已有41614位学员免费领取~点我领取