您还没有专辑

开始创建自己的专辑吧

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

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

手机观看

扫一扫下载虎课app

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

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

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

按住画面移动小窗

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

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

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

免费学习即将结束

关闭继续学习>

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

扫一扫下载虎课app

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

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

关注人数:173

目录信息笔记
图文教程学员评价 (15条评论)视频字幕查看优秀作品>

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

2、关于插件Craf的解说,具体按钮功能如图示。

3、[打开]Sketch软件,[新建]画布。具体效果如图示。

4、单击[插件]-[图书馆工具],[新建]图书馆文档并命名。使用[矩形工具]绘制矩形,[填充]合适的颜色。具体效果如图示。

5、[选择]矩形对象,单击[创建组件],[重命名]颜色。使用相同的方法依次定义需要的主题组件。具体效果如图示。

6、[选择]输入框组件,按Alt键[拖动复制]至合适的位置,单击[属性面板]-[文字框],修改文字内容。具体效果如图示。

7、单击[Craf插件]-[图书馆工具],依次将组件拖入对应的库中。具体效果如图示。

8、使用[矩形工具]绘制合适大小的画布,单击[插件]-[文字组件],拖入至画板,调整大小,排列至合适的位置。具体效果如图示。

9、[选择]排列的文字对象,按Alt[拖动复制]排列至画在合适的位置,调整文字属性。[选择]关联的文字对象,依次单击[图书工具库]对应的组件内容。具体效果如图示。

10、使用[矩形工具]绘制多个矩形框,排列至画面合适的位置。具体效果如图示。

11、[选择]所有的矩形框,单击[Photos]-[打开文件夹]本地准备好的图片文件夹,单击[Place Photos]。具体效果如图示。

查看更多
课程综合评分:9.5
课程难易程度:太简单(0)简单(4)适中(5)有点难(4)太难了(0)
您需要学习后才可以评价,立即学习
课程综合评分:9.5
课程难易程度:太简单(0)简单(4)适中(5)有点难(4)太难了(0)
您需要学习后才可以评价,立即学习
评论列表
仅显示有内容的评论
仅显示带图评论
排序方式:

哈喽 大家好,欢迎来到虎课网,我是艾伦 ,本次课程是设计制作一款K歌类的APP ,课程内容是把实际项目中具有代表性的几个页面拿出来讲解 ,因为涉及的因素比较多了,所以本课程分为上中下三集 ,前两集的内容是 Sketch的界面设计,那最后一集呢,我会通过弗林特这个 ,交互软件做简单的交互动画 首先 ,我们来看一下课程大纲 ,目的呢就是通过合理运用,Sketch强大的插件 ,能够帮助你提升设计效率 让你更专注于设计创作 ,还有一点是说为什么现在大部分从事UI设计的人啊,都在使用Sketch这个软件 ,除了软件本身很优秀以外 ,还有就是它的插件非常非常的好用,比如说Craft这个插件 ,好 课程重点 一 ,Craft这个插件的使用 ,这插件非常有名啊 他是国外一家公司叫做invision公司出的 ,在Photoshop和Sketch都涉及到 ,在这个圈子里面口碑也比较好 ,嗯,他们公司在研发自己的设计软件 ,好像叫做invision studio,好像是 应该是今年2018年发布 ,看来他们是要脱离Photoshop和Sketch这个阵营了 ,做自己的设计软件 ,二 sybmol的组件和第三个 share styles就是共享样式的 ,这个组件,这两个组件呢是Sketch那个集成的 ,那这两个插件是在 ,工作当中会 就经常会用得到 而且也是提升效率提升速率的这么一个工具 ,课程难点 ,熟练掌握craft插件 ,和symbol的组件的熟练运用 这样会提升你的工作效率 设计效率 ,

好,接下来我们着重讲一下craft的这个插件的安装和使用 ,如果已经熟悉掌握这个插件的同学啊 ,就可以略过了,直接跳到后面的界面设计部分 ,这个插件的下载地址我已经放在屏幕的右上角 ,如果找不到的同学可以在那个我的素材源文件里面去找 ,这个插件刚刚推出的时候是需要输入 ,什么邮箱之类的,应该现在不需要了,直接下载就好了 ,那直接下载就安装了 ,那安装以后 ,那我们Sketch上的那个菜单栏就变成了就多加了一个对吧 ,就插件在后面加了一个craft这样的一个插件 那 ,这个Sketch界面当中的右侧就多了一条 ,这个工具栏就是我标红的,这个地方就是一条工具栏 ,那他的大概的中文意思呢 我这边也做一点翻译,可能翻译的不太正确 ,嗯,就是,大概意思就是这些内容吧 ,好 第一个 我们从工具栏这边开始 第一个是 ,sync和 ,prototype就是同步和原型 这个地方呢是需要登录的 ,就是你需要登录invision的网站 ,可以将你的设计稿或者原型稿同步到他们的服务器上 ,第二个是library 是字面意思是图书馆 那我们可以 ,创建一些就是库,就是所谓的 ,嗯,你的一些比如说是框架呀 ,菜单啊,颜色啊,文字啊,这些库你可以自己创建 然后 ,可以传给别人,或者是作为以后备份用的 这一个库 库的工具 ,好 第三个是数据data 那这个里面呢其实包含的挺多的了 有些 有标题啊 ,

有 就是 文章啊 或者是头像啊 ,日期呀,就年月日啊,金额啊这些都可以,就是直接一键生成 ,也不用一个一个的去打了 ,好 第四个是一个 ,duplicate是个重复使用工具,重复工具就是你做的 ,比如说你设计的一个一个那个列表 EXACL列表 ,那我们就不用说重复的去一个一个的复制下来对吧,而且内容的话 ,通过这个工具的话,他是给你自动加载或者自动的改了 ,改了头像啊 改了文字啊 标题啊这样子的 ,这么一个工具 ,好 第五个是Freehand 他是个交互工具啦 就是 ,交互工具又是流程工具 当然了 他可以通过这个 ,工具 那可以做一些流程化的东西,流程性的东西,在你讲解这个设计稿的时候 ,更好的让别人去理解你的设计 最后一个是stock ,他应该是第三方库,然后我看了一下,那个插件里面包含的是 ,比如说两家三家网站的那个图片库,图片网站 ,然后我们可以通过这个工具 可以把 ,他们网站的那些素材下载下来 ,嗯,就在你做一个 比如说做一个矩形工具的时候可以 ,直接给你覆盖在上面那他有个问题就是说可能需要付费 就是我没登录过了 ,然后 他下载的那些 ,图片都有水印的 ,那可能说是通过付费之后应该会去掉水印吧,我也不太清楚 ,那就是在五六个工具的解释说明 然后我们 接下来在实际的 ,

这个界面上我们去 ,真正去讲解就去操作,怎么使用这些工具 ,好了 这是 ,我们的craft界面 你看装了之后他右侧啊 ,就多了一条这个工具条对不对 ,而第一个就是sync ,就是这个,可以把你的这个 ,设计稿同步上去那当然之前也说了需要登录 那第二个呢就是它这个library这个 ,工具啊 这个库 ,我们可以创建一个文件,比如说我们现在先打开一个文件 ,然后呢名字呢,就随便输了 ,好这样创建完了之后,那我们就可以建一个矩形了 ,那矩形的话我们可以加个颜色什么的 ,这个工具呢可以结合我们这个软件本身的那个 ,创建symbols来使用,那你创建一个symbols ,在上面的话,你就可以把它 ,以后比如说有的同事 ,也在用sketch,那你作为标准化的时候,你可以把这套库直接给他 ,标准化的东西比如说icon啊,颜色啊,文字啊,这些都可以就 ,一遍的就传过去了 ,不用说你拷个文件对吧,可能文件可能会大 ,这种库的话 他应该是他写成design 所以说 ,这个应该是比较方便 你只要载入进来就好了 ,

登录后查看更多
换一批

为你推荐

每周一练

立即参与
虎课网为您推荐UI-K歌APP界面设计(上)视频教程、图文教程、素材源文件下载,学员课后练习、作品以及评价等内容。UI-K歌APP界面设计(上)教程讲师:艾伦,使用软件:Sketch,难度等级:中级拔高,视频时长:39分11秒 查看全部
入门教程:
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位学员免费领取~点我领取