提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  移动开发

当前栏目

《慕客网：IOS动画案例之会跳动的登入界面（上）》学习笔记 －Sketch的使用

ios案例动画笔记学习 界面 跳动 登入
2023-09-11 14:21:34 时间

选中需要放进文件夹里的文件，然后按command+G，就会自动生成文件夹并把需要放进的文件包含进去了。（组 Group）

 选中需要锁住的图层，然后按command+shift+L就可以将图层锁住。（锁：Lock）

 按快捷键T就可以自动弹出文本输入，然后编辑就可以了。

 
 假如你找不到合适的字体做设计，可以选择mac系统都会自带的字体：
 
 右键字体图层，转为路径图层，就可以做手工的修改：
 
 
 按shift＋o可以画圆
然后把圆放进前面path文件夹内，它也会变成可编辑的path。
 
选中需要编辑的对象，然后按住option或者alt键，就会出现相对边距的距离，然后就可以按照实际情况调整居中：
 如果画一些组件，想偷懒可以通过自带的模板
 
 
 当你直接复制一个组件图层的时候会自动被设定为symble（可能不是这个单词），这个作用就是你修改一个组件，其它组件就会跟着一起做同样的改变，这个用途在设计需要统一重复修改大量的相同的组件可以大大节省时间，但是这里用户名输入和密码输入我们需要解除这个symble的绑定功能：
 解除symble：
 
但是：由于文字元素还是共享一个元素，所以选中一个text文本，然后修改style或者添加一个自定义名字的style：
 
 然后是使用图标，可以FQ访问国外的网站：（http://fortawesome.github.io/Font-Awesome/icons/）免费下载的图标，然后导入即可；或者在https://github.com/JakeLin/Font-Awesome-Symbols-for-Sketch直接下载sketch文件，然后打开，点击按钮：
 
就可以使用很多图标模板。
 如果找需要的图标，可以去那个国外的图标提供网站找相关的图标。比如网站上用户相关的图标英文是User，那么这个sketch相关的就是fa-User图标。
然后拷贝到设计文件中就可以用了：
 
 按control＋L就可以带开方便调整布局的布条：
 如果按control＋G就会出现方格线网也可以方便布局：
 
 然后呢，我们需要改一个细节：
 
 我们可以将图标改成空心，然后有边框：
最后的效果是：
 
 然后选中所有的图层所在的父级文件夹，并把文件名改为Login，按conmmand+D就会生成另一个文件夹以及所有图层，文件名(Login Copy),然后把文件名改为typing：
 
 然后要单独操作，就需要修改symble，然后单独操作：
这个是第二个UI视图，可以在输入有问题的情况下，呈现出来。
 继续选中整个图层，然后按command＋D拷贝一整个视图，然后继续添加模板里的spinner图标：
 
 然后添加警示按钮的模板后，然后需要修改按钮的圆角，选中后再radius上设置就可以了：
 
 
 
 
 

相关文章