你的右爱界面是这样的吗?还是这样的 还是怎么样的呢? 此时要不要点个赞? 我们再继续往下看, 现在我们又回到这个界面,你觉得这个 ui 可以吗? 我们再切回酷酷的那个界面,继续欣赏心动吗? 要不要来跟我一起学习一下呢?那就让我们继续学, 啥也不说了。
粉丝405获赞4539
![[996引擎纯lua教程]第04期 界面文件UI编辑 #三端传奇引擎教程](https://p3-pc-sign.douyinpic.com/image-cut-tos-priv/2f1488e0942ba4309177ce47c6524757~tplv-dy-resize-origshort-autoq-75:330.jpeg?lk3s=138a59ce&x-expires=2102882400&x-signature=9vUOdE83H0Ll%2BjVcntsIEhHY3lw%3D&from=327834062&s=PackSourceEnum_AWEME_DETAIL&se=false&sc=cover&biz_tag=pcweb_cover&l=20260824064336A7E1D0197A89FF7706F3)
首先我们看一下他这个主界面啊,我们从这个, 首先我们还是先打开他的这个客户端文件啊,首先先打开这个 vsco 的啊,点这个文件下面的这个打开文件夹,我们找到他的一个客户端文件目录啊, 这里我直接先进到我们这个我自己的这个盘幅下面的这个这个口令的这个口令就是个抠断,直接把这个整个这个文件夹打开就好了啊。我们首先看他的这个 设定啊,他这个第一个这个 gyle, 他这是个文,呃客户端文件的一个目录啊,然后是这个 vs code, vs code 下面有一个 cleancode 的这个他的一个用户代码片段啊,这个应该是他官方给予到的,但是你需要 下载一个就是这个插件啊,这个 visco 的这个撸啊的一个插件,如果你没有下过的话,你就直接在这个呃插件库里面直接直接呃下载这个,因为我已经是下载了这个他这个 clean 的这个扣的的这个插件,他都会生效啊,这个其实是一个提示功能啊, 他这个应该是自带了的话,如果你如果你不带的话,你需要去那个官方去下载啊。首先我们看一下他这个就要料子下面里面他官方这个用户界面自带的一些界面文件啊,像他的这个这个呃,我随便拿的一个文件啊,就是说他 里面的这个代码提示是一个怎么样子的,你看就是说如果我们安装了那个插件的话,跟他官方那个用户代码片段的话,当我们对这个客户端接口啊,就是鼠标移动上面的时候,他会 有一个啊,他会有个显示的啊,然后我们先从这个,先从这个顶顶部来啊,就是说他界面的一个分布啊,的一个一个详情啊。首先我们看这个黑黑色的这个背景条啊,头顶的这个背景条, 我们应该怎么去找这个文件所对应的这个这个这个文件名呢?我们先找这个界面文件啊,我们去到这个 api 文档里面的这个客户端开发里面,我们找到这个呃界面文件这个页面啊,他会有对每一个文件的一个 一个解释啊,就是说我这个文件对应的是哪个界面啊?我们可以去这里去查找啊。我,呃目测呢应该他是一个 made top, 这个是 made left top 的话,他后面都有说明的对应哪个文件,我估计他应该是一个最上方啊,主界面最上 上方的这样一个文件,它决定了这个文件是用哪个文件去写的啊?看一下 g r l 的下面,我们找到这个,呃, mental 啊,应该是对 mentop 它就有标注啊,你看它就在这个界面下面创建了一个背景图,一个箭头,对吧?这就对对上了。当然你如果说你不太确定的话,你可以先去把它注视掉啊, 我们就可以先看一下他就是创建了两个燕麦,对吧?如果你不清楚他这两个接口对应的是什么的话,我先把这里放大一下, 你不太清楚他这两个,呃接口是干嘛的话,你可以先把这个鼠标放上去,他会有一个显示的啊,就是说我这个接口主要是一个怎么样的一个说明啊?甚至包括就是说我们后面会有一些提示啊,我们先把它注视量看他是不是这样,我看他这里有一个呃, 有个屏幕扩大以后的一个呃大小的一个变更啊,先把看到他有引用的话,我们先还是把他注视好一点,不然到时候他又爆空了啊, 把它注视掉,然后我们再哎小退一下,因为这个主界面它是在这个 呃主界面加载的过程中就采取重新加载的,他这个不同于我们那个 g s 呃 utl 的那个加载方式啊,你看现在他这个黑框就没有了,就证明我们找找对了这个地方就是我们进行嗯增加删除啊,修改的时候我们能 嗯去找到对应文件下夹下面的一些这样的一个空键去操作它啊,然后就是我们看到的就是这个右上图标,对吧?啊?我目测它应该是放到了这个呃 mini map 下面啊,就是这个卖 mini map, 就是这个 主界面的这个小地图里面啊,我们看到他有很多很多的操作在这里面啊,因为他不仅仅只包括这个呃右上图标这个按钮啊,他这个内函数下面有很多很多的这个呃这个这个操作在里边啊, 我们继续往下看啊,就是说这个这个这个 mini map。 我们先讲先讲这个右上图标吧, 先讲这个右上图标的一个创建跟跟修改啊,我们看到他在这个呃内函数里面添加了一个一个容器,对吧?然后我们在这个容器里面创建了很多的这个按钮,对吧?像什么免费会员啊,首领挑战这种,对吧?六个啊,我们点击以后会有一个界面的弹 出,那么这些按钮怎么去修改呢?我们看到他就是创建的一个按钮,对吧?然后点击按钮以后的一个触发事件,是直接去调这个服务端的一个一个一个一个脚本,对吧?然后我们这里我们看一下这个首充界面啊,我们怎么去修改它? 我们先看一下啊,看一下怎么去注视,我们先注视一下他吧,看他是不是在我们这个呃界面文件下下面啊,我们先看一下,我们先把它注视掉, 因为这个主界面的文件呢,现在他没办法通过像之前那种方式去加载啊,只能说小退小退再进来 啊,我们在发现这里已经消失了,对吧?他看不到这个文件了,然后我们再复制一个出来,我们加一个新的啊,这样的话我们就达到一个创建的目的,比如说我们需要一个 个新的按钮去达到一个新的功能啊,我们就直接这样加就好了。这里我们记得改他的这个 id 啊,那个 id 是必须是唯一的啊,不唯一的话后面就会呃盖掉前面的啊。 然后我们尽量发现创建这个,但是细心的朋友发现啊,并没有去设置他的位置,但是他的位置是很等距的去增加的,那这个东西就涉及到哪里呢?我们看到他上下这个吧台的命名啊,都是有规律的,对吧?一二三是因为他在下面呢,有对这个呃结尾的这个数字进行一个 一个编排啊。这个东西大家可以自己去看一下啊,包括他的这个呃红点啊,就是按钮上面那个红点,他都是一个动态啊,动态的一个变更的啊啊,这个大家都可以自己去看一下,我这里的就不做演示了,因为这个文件啊,大家都能拿到,都能看得到,对吧?包括这些什么 技能呢?呃,包括各种各样的一个文件,我们都在这个界面文件里面都能看得到,就是说我们的这个,呃界面文件里面,对吧?他对应的是哪些界面,我们都可以去像刚刚一样,对吧?我先去添加,或者说再删除,我们去看一下,对吧?嗯, 在这个客户端目录下啊,客户端的这个说明书的目录下啊,可以去瞅一眼啊。 呃,如果说你这个客户端文件不对的话,大家可以去这个,呃,他的一个客户端的这个这个这个更新里面啊,就是客户端资源里面找到这个 gilt 这个最新版本,然后放到这个 gilt 里面来啊, 啊,不然的话你有可能就是说你看到的一个官方的一个地板的这个文件,他可能是加密的,对吧?嗯,如果你引用进来的话,你他就会读你这个引用 on the, 我们看到他有很多很多的这样的文件啊,大概大家可以一一去对应啊。再看一下他这个 g o late 里面的另外一个加载方式啊,就是这个 note explot 啊,就是说加载了一个这样的一个文件,就说界面文件,你并不一定要 自己全部去手打,他这里 ctrl 加 f 十一可以调出一个编辑界面啊。我们进到这个 man 的这个 minimap 里面,大家可以看到他就是说在这个, 呃,在这个其他的文件可以引用进来,你在其他地方创建空间,我可以通过这个接口给他引用进来,然后包括就是说我在游戏里面我自己去创建的这样一个容器下面的界面,我可以直接引用进, 对吧?我想把这个位置左右调好,对吧?通过这个,呃,键盘的左右键啊,或者说我直接就在这右键用鼠标直接拖着走,对吧?然后保存,看到他直接存放到这个 mode 里面去了,对吧?我看一下他存到的一个位置啊, 是在这个啊?这个不是啊,这个是我本地的,对吧?这个是一个,然后是这个,这个叫 mode fq 里面有一个魅,对吧?魅海下面他有创建到了这个 men minimap, 就是给到了一个新的 minimap, 就是我们刚刚保存出来的,对吧?虽然说我们没有什么修改,但是我们保存出来他一样会把这些空间给我们重新创建出来, 就说创建到这个另外一个文件夹下面,到时候我们启动加载的时候就加载这个最新的了,对吧?我们会看到他会 按照我们在这个编辑器 ui 编辑器里面创建的这个创建的这个空间,帮我们把这些空间再生成一遍,对吧?啊?然后我们通过那个接口去引用 啊,当然我们也可以自己创建一个新的啊,因为它这个是固定的,对吧?我们这就创建一个 test 啊,这个 test 我之前创建过,创建个 test 一, 他这个空间的创建呢?就是说我不再跟官方的一样了,官方的他是固定的写法名字,对吧?我们自己创建一个空间,然后我们去创建个容器试试看啊?然后容器,嗯,再创建一个文本, 对吧?然后我们再创我这个文本的名字也可以改啊,就是这个空间的 id 啊,这个名称应该是 id 啊, 下面这个文本才是文本啊。 然后我们再创建一个按钮,你看这个左边他有明显的一个递进关系啊,就是说他有个主副空间的一个关系啊。啊?我们保存一下,他保存在了这个 export 里面啊,看一下 啊,因为我刚刚我创建的时候并没有去,并没有点我们那个 test 一啊,是直接直接创建的话,他就并没有根据我们那个 test 那个命名来啊,我们创建那个 test, 但是并没有打开那个 test 啊 啊,这里面进到这个新建文件夹也是一样的,这个他自动帮我们改了个名,当然你可以把这个文件的名改了,然后再去做引用啊,这个 他主要的一个作用就是什么样的?就是我们创建一些基础控件会,他会给我们一些接口,这样的话我们能够呃很清晰的去看他这些接口所呃对应的一些内容啊,就是说去学习他的控件的呃设置方式。


乱原基础第六节课 table 表 table 表类似于一个大的数据储物柜,它可以存放不同的数据。在乱原中呢,我们用一段监括号啊来创建 table 表, 那么在这个表中呢,我们第一个格子里边可以存放一个数字三,第二格子里边存放一个布尔值类型处,第三个格子里边咱们存放一个我的名字自带。 好,那么由此可见, table 表呢,它可以存放不同类型的数据。那么怎么去获取 table 表表中的数据呢啊,咱们只需要写一个表的名字,然后呢加一个方括号,获取第二个格子的数据呢,咱们就写二,哎,那么接下来咱们去打印 print, 看看结果是出没有问题,那么获取第三个格子,咱们就写三二,那么是自 没有问题,那么有没有可能通过这种方括号表加方括号,哎,比如说我写第四个格子,给他负一个值,就等于张三呢?啊,也是可以的啊, 好,那么接下来咱们获取第四个格子的是,大家会发现是张三啊, 呃,这个呢,就是胎爆表的简单的存储和读取的一种形式啊。接下来呢,胎爆表咱们在学他的另一个属性,就是可以给胎爆表中的每一个格子起个别名,哎,比如说呢,我这有个胎爆表 y, 好,那么我给这个 y 的第一个格子起个名字叫 a a 的第 a 格子,哎,我里边给它存放一个数据叫做 三啊,那么第二个格子呢,就名字叫做 b b, 格子里边我给它存放一个数据呢,叫做自在。 好,那这个也是 table 表中的一种形式啊,只不过这种呢,它是不带名字的,这种是带名字的,通过名字呢,咱们就可以访问 table 表中的数据了啊,比如说呢,怎么去写哎, we inter 一下 y table 表中的什么 a 格子啊,它的数据是什么呢?咱们打印一下,嘿, 带货牌显示三啊,那么我外胎报表中的 b 格子,它是什么呢?是自在啊,没有问题,那么这个呢是方括号取值啊,通过方括号取值呢,咱们一定要带这个双引号或者单引号呢,来 拿到他的名称啊,这样呢,我才能把数据获取出来,或者不用丰富号啊,咱们直接呢去点外点 b 就是外表中的 b 格子,他的数据是什么呢?哎,咱们打印他会发现还是自在没有问题,对吧? 好,那么这个呢,就是给胎报表呢起别名通通过,那么同样的咱们也可以给在外部啊,通过胎报表,比如说 c 给他起个名字, c 格子呢,咱们让他等于一个张三, 那么咱们同同样的在下边呢,咱们 y 点 c 看看这个值呢,有没有复读进去发现张三呢,先进去。好呢,这个呢就是胎报表他的存储数据和读取数据的两种形式啊,一种是呢不带 代名称的啊,一种是代名称的好,那么同学们把这个 type 表呢,一定要玩熟,后期呢,咱们会着大量的使用到这个 type 表。好,关于 type 报表,咱们就讲到这,这节课咱们录到这,感谢大家的收看。

今天继续修改小伙伴的界面,这是一张医疗软件的首页,没什么太大的问题,只是现在页面看起来不够精致。 老规矩,还是先分析下页面。这个页面可以分为五个区域,分别是操作区、班纳、金刚区、胶囊、班纳、文章区。 首先操作区,操作区没什么问题,点击距离满足最小可点击区域间距符合山格标准。 班纳区,这个区域平占比很大,还是之前的老问题,与整个页面山格不符。这两个区域可以同时修改,顶部操作区背景可以加长,并且使用渐变来处理,也可以使用品牌元素填充,多一些设计细节,过度也更顺滑。班纳尔 可以修改下样式,在两边放上另外两张板凳,并且加上圆角,这样作为一款医疗 app, 给人感觉更安全。至于颜色可以不进行修改,蓝色比较符合安全可靠的定位,这也是为什么很多金融医疗产品选择蓝色。 接下来金刚区排版没什么问题,图标倒是可以增加一些质感,胶囊般呢?既然不是购买商品偏向于通知栏属性,那么可以不用这么抢眼的样式,修改为普通的通知卡片,避免视觉上干扰金刚区功能。 文章区,文章区的标题需要加强,可以移动到卡片外内容上,文字加图片的样式过于单一,可以加入一些设计细节,增加设计感。现在这个页面就修改完成,我们可以看一下对比,关注我,了解更多。

大家好,这边是小青翼,然后没有关注过公众号的可以关注一下小青翼的公众号,搜索小青翼就可以了。 然后今天我们还我们讲 ot 点 gs, 然后我们现在打开 oto 点 gs 啊,我们这节课讲的是 我们这节课讲欧都 gs 的那个布局,还有他那个简单的 ua。 然后首先我们创建一个文件, gs 文件我现在用的是 pro 版本,然后我们创造一个写个名字简单 u a 女布局 啊,这里我们就创建成功了。然后 ui 的开头 一定要也是 ua, 一定要打上双引号啊,写上 ua, 因为为什么要打双引号呢?而且这个双引号是美式的双引号,不可以是我们中文的那种双引号,他是会爆错的。然后 ua, 嗯, 他刷完以后你为什么要写 ua? 我也不知道,因为他是要求就必须这样写,第一步就是 ua, 然后我们就是,呃,现在点一下运行给你看看,运行, 那他会出来一个纯白色的界面,这个就是证明我们 ui 创建成功了,就是一个纯白界面,就在这个界面内我们书写东西,知道吧?书写东西,然后 我们这里啊返回一下书写东西,哦,直接书写的话,他是会包错的,我们要,呃,首先要有一个布局撩他啊,然后直接写是不可以的, 六台,这个就是这个是布局的意思,然后我们直接点运行的话,他是过错的,他是过错的,就是不可以这样写,因为他是六台就是,呃, 嗯,布布局的开始,也就是说是整个 ui 的开始,然后我们就要点上 ua, 点撩他啊,这样我们现在点 他还是报错,呃,不是报错了,他现在点就是空白了,就可以开始写了,他是一个开始,然后我们写的话需要在六奥特后面打上括号,因为在括号内部写啊,是首次的。 咱们在括号内部写什么呢?我们写一个文本啊,然后要打上 果然 t e xt 是文本,是要呃 tax 的文本的意思。 然后首先就是这个前面这一节就是定义这个属性,这个这一步是文本,然后后面再写定义文本的属性,这个词等于来引号, 双引号等于什么?什么?什么等于?我们写个你好有文本的内容,小心翼翼 啊,这个文本就是这么创立的。那打双引号是什么意思呢?在整个整个代码环节当中啊,首次出现的内容定义的属性一定要打双引号,首次二次可以不用,好吧?然后我们结束,他结束,他斜杠就是结束,然后封上 啊,前面两个这个这种小的括号就是风起步和风尚的意思啊。然后我们现在是不是在 ui 里面开头写了一个文本,但这样运行他还是会爆错,那他还是会爆错。然后我们要怎么解决?因为我们没有给他布局, 布局分为,呃,垂直布局,呃,还有卡片布局,还有呃水平布局,我们给他写一个 垂垂直布局吧,我们首先不管写什么布局,他一定要有布局,没有布局是不可以的。然后布局我们写个发齿口,然后就是垂直布局,就是他是垂直向下的布局 啊,他就是垂直向下布局,这样是不可以的,这样我们用心,他还是还是错误?为什么错误呢?因为就是说了,呃,书写代码当中有头就要有尾, 他这个只是一个开头,比如说我们要封装上尾巴那样一样打上斜杠,这个就是结束的意思,然后然后把呃发齿口再输入一遍啊,然后这样我们再看一下效果啊,这样就出来了。这个文本, 小青叶的文本啊,你好,小青叶,我们刚才定义的文本,然后我们我再给你们看一下什么叫垂直不绝,我在里面再再次在这个布局里面不好说,没有电脑好说,点点没反应,然后我们再打一个文本, 再弹一个 啊,这次我们定一点 x 的,等于 好封上结尾结束,让我们看一下效果啊, 这样的,这个叫垂直布局,就是在这个垂直布局里写的任何东西都是从上往下一直垂直,垂直往下的,这个叫垂直布局。然后我们还有一个什么布局呢?呃,我给你们演示一下, 把这个给他去掉,哎哎,写一个何瑞三个出。啊,是水平布局啊,这个是水平布局的意思。 这个手机点老点没反应,然后有头就要有尾,有头就要有结尾, 刚才有事,然后我们继续啊,然后是抢到海瑞什么处,这个一,这个是啊水平布局的意思,给你们看一下效果啊, 这个就是水平布局的意思,他就是,呃,就是横向布局,不管你在水平布局当中写多少类人,他都是横向一直一直横向布局,刚才是垂直布局 好了,然后这个我们继续讲啊,这个是,呃水平布局啊,一般进到水平布局啊。 嗯,呃,垂直布局和水平布局比较多,然后还有一个框架叫 frem, 然后还有卡片布局, car 的叫卡片布局,然后我们现在,呃,布局,我们就讲这么多, ui 和 布局,简单的 uf 布局我们就讲这么多,然后因为每个视频我只能讲十分钟,一晚上上传就超超过了,要分两段讲就比较麻烦。然后啊,看一下现在多少人八分钟,然后还有一点时间,我们再讲一点,再讲一个词吧,啊?还是发出口, 我还是用垂直布局来讲,因为好看一些。啊, 我还是用垂直布局来讲,因为相对于水平布局,垂直布局用到的皮卡稍微广泛一点,其实都广泛了。 好,我们再说一个流,说说一个,接着下面说说一个按键按钮,吧台。啊,这是一个按钮的意思啊,吧台 好,八成,然后我们看八成等于 等于什么呢?马腾等于按钮,这个就是就是给他取个名字按键吧, 然后其实一般都要 有一个 id 的,就像点击是什么,呃,就以这个 id 为主, ad 的一一二三。然后呢?斜杠结束哈,再看一下效果, 哦,不是这个,这个我搞错了,不是八点的,这个是 tx, 是文本,他要是这个文本名称,他才会显示名字按键, 这个就是一个按键,看到没有?我没有设置那个,这个点击没有效果。好,我们这一个就讲到这,好,就这样就。

如何让你的 ui 界面更高级?这是一张需求列表页面整体层级没什么问题,但内容却过于陇杂,有 pc 端的特点。我们可以去掉不必要的标题信息,将内容进行重新排列,突出自己层级,最后可以通过非得留的形式去呈现,提高页面平效与信息获取效率。 这是一张电商列表页面,如果你是某宝的设计师,你会怎么优化呢?你应该会去掉卡片投影,将商品信息走对齐,统一阅读视线, 然后修改标签与价格颜色,突出信息,最后再加上一些促销装饰,一张有活动氛围的页面就做好了。当你是某奢侈品牌的设计师时,你会将商品抠图,统一商品大小,再添加一个灰色背景,最后再换个字体,一张你买不起的页面就做好了。


十万的 app 你就设计成这样,这是你做的?是我做的呀,怎么了?一共多少个页面?一共四十来个页面吧,用了多长时间?二十多天?二十多天你就设计成这样啊?啊?我给你看看阿杜, 就这个,这是几号的?这个价格这么大?这这直角就,就这个颜色搭配啊,你怎么能看出这样活呢?二十天就这么干的?这我做的时候七天我就做完了一个,我给你看我原来做的那个, 这是我做过的那个,然后客户改了,改了十五天,就包括这个点,这个地方原来都是圆圆圆形的,后来改成这种方形的,客户说了,我们一定要直来直去,不要拐弯抹角的,包括后面都在 价格,客户说了我们第一眼让别人看到就是价格,客户关心的就是价格,所以说价格一定要放大,放到最大,你看这个首页, 你感没感觉到一股浓浓的香土气息?对啊,客户他就是卖树苗的,他就要的就是这种感觉,扑面而来,没有 扑面而来的相同机械。对对对,就是要的这种感觉,这个项目客户特别满意啊,都已经验收了呀。啊?那行行行,客户之上听听听,他说了算。

来说说零基础如何快速搭建 ui 界面?总共会有六个视频来讲解。第一个视频搜索框,我们先以二倍图为例,首先定好三十二像素的三格间距,高度定八十像素。第二步,我们需要调整圆角度,圆角弧度可以根据产品不同调性做修改。 第三步,图标与文字图标大小有三十二像素乘三十二像素,描边粗细一点。五像素,文字大小根据图标大小自适应,自重有迷点编剧上图标三格三十二像素与文字间距十六像素。 第四步,我们可以根据产品风格去选择不同样式,如果需要增加按钮,我们同样可以根据产品的风格去定义。 ok, 学会了吗?下一个视频我们会讲讲班子的经验形象术。


通过几分钟教大家 z b 自定义 u i 以及界面如何调整好,今天我们来讲一下我们这个软件的自定义 u i 啊,自定义 u i, 那我们现在啊 可以看到的这些东西呢,它其实都是一个 ui 界面啊,都是一个 ui 界面,那我们点开这个首选项的位置啊,这里有个配置,对不对?点开配置有个恢复自定义 ui, 我现在呢就是一个自定 ui 啊,它现在有些东西呢是没有显示的啊,是因为我们,哎,你 有这个球啊,你在这个桌面当中,你就需要拉出来个东西,然后把它生成多边形网格物体,你看我的所有的自定义 ui, 他都出来了,对不对?都出来了,那我们标准 ui 的话,这里点击恢复标准 ui, 就可以回到高 刚开始下载软件的样子了啊,就这个样子的,那如果我还继续想打开的话,那么我们可以去加载 ui, 加载啊,就是从外面导入进来啊,外面导入进来, 有的时候我们,呃自己不想设置 ui 的话,可以用其他同学或者是其他老师的 ui 啊,我们可以把他们的 ui 拿来,然后保存,点击打开好,这又出来了,对不对? 然后这个位置它有个保存 ui, 这是什么意思呢?就是我们自己呢可以去设置 ui, 设置完了过后保存出去啊,保存出去, 比如说我们这里有个启动自定义,先启动自定义,这个时候呢,我们就可以去把那个你需要的 ui 有些界面哈,我们把它放到这边来,放到这边来,比如这里的话,咱放一个这个, 哎,这个东西放到这来,再放一个存储相机啊,这个位置啊,那如何去放呢啊?我们按住 ctrl 键加 alt 键,然后拖住这个键,不松啊,不松就可以直接拖到这上面来了啊,就可以拖到上面来了。 那我们现在把这个 ui 保存出去啊,保存出去就点击这里保存 ui, 保存 u i, 比如说我们这个直接覆盖吧,好吧,然后保存已存在,是否是否替换?是啊,点击是 完了过后呢啊,完了过后呢?我们就可以,哎,存储配置记得一定一定要点这个存储配置,这样子你下次打开的时候看,每次启动 zebras 的时候非恢复此文件啊,说明你后面的话再启动 zebras 这个软件的时候 呢,他这个 ui 也是自动的,就会给你打开了,你不需要每次去打开啊,这样会比较麻烦。那我们为什么会用到 ui 呢?那像有一些命令的话,我们, 哎常用的命令的话,我们是不是每次去翻找他的话就有点麻烦,对吧?有点麻烦,所以呢,我们需要去把这个 ui 哎界面 改一下,对不对?把它放到这上面来啊,这样子的话,我们每次去用的时候呢,就会比较方便。那还有一个情况就是我们有些同学是笔记本电脑,对不对?笔记本电脑打开界面过后,他又他的这个画面呢,会比较大啊,这个图标呢,都会比较大, 比如说像这些东西啊,这里叫这什么幽灵透明等等等等,他可能是看不到的,看不到的,我这边给大家演示一下啊,比如说这里装 面啊,我们显示设置显示这这里,哎,老师有两个屏啊,稍等一下,这里啊,他有个缩放与布局啊,笔记本的话一般是百分之一百五,百分之一百五,然后这个时候呢,我们再打开 zbox 看一下 哦,这个没有什么变化啊,因为我们这个界面是够大的,界面是够大的,有的同学就记住了啊,如果是笔记本的话,我们就将这个啊缩放与布局啊,改成百分之百,改成百分之百。同样呢,如果把改成百分之百过后,还是看不太到啊,还是看不太到,那么我们就在这个, 我们把先把这个启动自己定义给关掉啊,在这个界面当中, u i 啊 u i 按钮大小,就比如说这些图标大小,我们可以去放大或者是缩小它啊,放大或缩小它,那放大了过后呢,它这个图标 标呢也会跟着放大。有的同学如果底下的图标啊是看不到的啊,看不到的,那么我们呢就把这个 ui 按钮大小啊,把它调小调小,比如说现在调到三十八啊,这是最小了, 它会显示下次启动 zebras 时将调整 ui。 说明呢,你要把它给关闭一下啊,关闭一下,关闭完了过后呢,我们再去打开啊,再去打开这个界面就可以了,这里双击好,稍等一下, 嗯,打开的话有点慢哈,稍等一下 好出来了,那现在它这个 u i 界面大小是不 就变得很小,你可以看一下。哎,变得很小对不对?变得很小,那如果你觉得你的界面这个有点小了,那同样我们可以在继续这里界面这个位置 ui, 然后把这个按钮大小调大一点点啊,调大一点点, 我用四十三吧,四十三,然后继续关掉,再打开他就是恢复这个界面就会变大啊。好,今天的这节课就到这里了。


你知道在你的手机 app 里实际有一个特别好玩的设计小秘密,就是这么多 app 是如何做到在这么多大小不同的手机里长得完全一样的吗?难道每个手机型号都得做一个设计稿吗? 如果想知道答案,就看完七夕视频。哈喽,欢迎来到免费的一百节 ui 实操课的第三节,我是教你 ui 的托尼老师,这节课我们来讲讲 ui 设计师必须要知道的界面设计规范。 首先,为了高效的设计,我们需要在安卓和苹果这两大手机阵营里选择一个设计规范当做标准,你猜猜会是哪一个?三二 一实际是苹果手机。为什么是苹果手机呢?你看完我下面的内容你就知道了。那么今天我们就来讲讲在苹果规范的基础下,我们做 a p p 界面的单位选择常见的尺寸以及 a p p 界 面都是怎么组成的。想做好 a p p, 你首先要知道物理像素和逻辑像素的区别。这个估计很多小伙伴是第一次听说,物理像素就是你做设计稿的尺寸单位是 p x, 而逻辑像素相当于你手机屏幕的尺寸单位是 p t, 一个是设计产物,一个是实体物。如果你用像及时设计、飞个马或者 sketch 这样的适量软件去设计界面,你就可以用 p t 作为单位。而如果你用的是 p s, 那你就只能用像素去当成单位了。在正常情况下, p t 和 p x 应该是一比一的,但是随着现在屏幕的像素密度越来越高, 你可以理解为就是手机虽然没有变化太多,但是手机的显示效果是越来越好了,所以同样大小的手机,因为有了像素密度的存在,那么 p t 和 p x 就会有了一个比例,我们称之为像素比, 而这个时候也产生了 ui 专属的资源。背图这一块大家可以先记住,我们后期再讲。那么手机的像素比如何换算呢?我给你看一张图,比如 iphone x x max 这个手机逻辑像素是四百一十四乘以八百九十六,如果你用这三个软件,现在这个尺寸就是你设计稿的尺寸了。 但是如果你用 ps, 你就需要用这些数值乘以后面的像素比,得到最终在 px 里面的物理像素。到底用哪个单位,实际还得看你用啥工具。 不过上期视频我们也提到了 ui 的工具,所以说我建议大家现在用逻辑像素会更加方便一些。现在大家已经知道了设计的单位,那么我们来看看苹果里面那么多手机,真的需要所有手机都单独做设计稿吗?实际不用,我们可以选择适配度最大的,同时记住 app 的尺寸规范,只考虑宽度, 不考虑高度。我给大家整理了一个苹果历年手机的尺寸参考图,有了这个图,你就可以轻松判断手机的像素笔了。通过这张图可以看到,在 iphone 十二之前,苹果手机就三个尺寸,从小到大,那选哪个更好适配呢?当然选中间的大小都好适配, 所以在很长一段时间里面,三百七十五 pt 就是 app 设计的通用尺寸。这也解释了为什么一般用苹果设计规范当做标准,因为相比安卓的百花齐放,苹果可以说是非常精简了, 可是界面尺寸从十二之后就发生了变化,苹果手机全面变大,各个版本都大了一圈,那这个时候我们依然可以按照选择中间的你,所以你就会发现现在有很多的设计师都开始从三百七十五变到了三百九,不过说实话,这一点差距真的影响不大,所以大家现在用三百七十五也行, 用三百九也行,我现在用的就是三百九的宽度。那么最后一个 app 的界面到底是怎么组成的呢?最上面实际上就是状态栏,就是电池信号这一块,不能变自带的。下面呢是导航栏,里面一般放 app 的标题啊,搜索啊或者返回这样的功能区域, 在下面就是内容区,可以按照功能开始设计界面了,未来的课程核心就在这一块。那么最下面就是我们的菜单栏,可以放 app 的核心导航,而最下面就是指示器,一般是为了放返回和桌面用的。 我把今天视频里所有的资源和尺寸足都放在及时设计的资源广场里了,大家直接搜我名字就有了。在下一期我会讲一下一个优秀的 app 是由哪三个核心元素构成的,想学习的可以约一下哦,我是教大家优爱的托尼老师,我们下期再见!

今天来修改小伙伴的界面,欢迎大家投稿。我们先分析一下这张页面的问题,这个页面可以分为三个区域, 分别是操作区、班那区、作品区。首先操作区左上角发布按钮高量显示,代表该按钮的功能比较重要,放在首饰操作的盲区明显对用户不太友好。右侧两个功能按钮距离太近容易误触。顶部导航栏其实没太大问题, 间距可以进行优化,而如果导航栏可以滑动,最好给用户明确的信息。班那群班 区域左侧山格没有和页面进行对齐,视觉语言不够统一。作品区物流区域问题最大,首先是卡片内信息层级不够明确,整体看上去杂乱无章。其次是每个卡片的样式都一, 用户长时间浏览会造成审美疲劳。然后我们进行修改,如果发布功能优先级很高,我们可以直接加入底部导航栏,操作更方便。并且修改导航栏图标区分,选中与未选中的状态 分类和提示可以优化下位置并调整间距分类放在左侧更符合操作习惯。 导航栏调整下间距,选中状态,可以增加一些趣味性。最右侧的超出屏幕区域,给用户清晰的滑动提示, 搬到区域修改大小并加入圆角,拉近与用户的距离,也更符合产品调性。作品区域卡片的层级需要重新优化,并加入设计细节,修改一部分卡片的高度,做出错开的效果,防止用户长时间浏览造成视觉疲劳, 这样一张首页就完成了。最后我们来看一下前后的对比,关注我,了解更多。

如何让一张普通的个人主页更高级?首先,头部大面积的品牌色填充会让整张页面头重脚轻,我们可以换成较浅的弥散渐变。 昵称和关注粉丝数的文字对比不够强烈,上下排列的布局也占用了太多头部空间。我们可以使用左右排布,同时加强文字间的对比。中间的图标部分样式非常单一,排列权重也出现了问题。 电影票、演出票、订单优惠券和会员中心的优先级应该高于其他功能。我们可以用带有不同颜色的面性组合图标和会员卡片来强调展示 最下方的观影时光模块。文字布局很普通,没有设计感,我们可以调整文字布局,并将它移动到功能区图标的上方,让整张页面的布局更加合理。