【PersimmonUI柿饼学习营】+ DaZhou+ 手把手教你做计算器

发布于 2018-08-31 12:12:12
这两天又被柿饼UI的强大惊到了,营里面发的第二篇教程,寥寥几字就教会我们最一款强大的计算器,而且不用写一丁点C代码,说的我都激动了。下面先上成果视频,还是放到GitHub上面了,有需要的请先移步GitHub,看完之后我再教您一步步做这样的计算器。
GitHub工程代码、视频仓

先讲一下大致的思路,做到胸中有丘壑,然后再按照思路一点点完善。
1. 屏幕不支持竖屏显示,所以要准备一张W x H 为800*480的计算器UI图片。为什么要这么准备呢?这里面是有学问的。横屏显示的计算器UI先不说做出来按键手感如何,界面处理不好,一定会非常丑。我们先算笔帐:H为480,去掉一个合理大小的结果显示框,大概还能有300左右的按键显示区,也就是按键显示区的高大概为300左右。您不能整个800的宽吧?做出来肯定巨丑。说到美,您想到了什么?是黄金分割比吗?聪明,没错,就是 0.618,宽长之比!这样算出来大概在485左右。好了,这两个关键数据出来一切都好做了!再细想下去,剩下的部分怎么处理?不能都留白吧,那做出来肯定也是巨丑!这就得加上背景渲染了,铺满整个剩下的空间,这样做出来才好看。

2. 漂亮的UI有了,第二部叫要考虑用户的使用体验了。有哪些体验?不能计算错是最基本的吧,手指触感反馈得令人舒服吧。其实作为一个项目,做好这两点需求基本就够了,说做奇技淫巧的请滚粗,这项目给多少钱我也不接!具体落实下来,代码无BUG,按键大小得照顾到大部分人的手指尖大小,键按下去,得有按压反馈吧,不考虑震动反馈,得有色变反馈吧!

3. 小结一下:以上两步,貌似给我一个嵌入式开发工程师没关系吧,我TM看错页面了?怎么讲的都是UI设计师的事情呢?对喽!您没看错!这就是柿饼UI强大的地方!您要是做过团队老大,您现在就能理解我飞一样的心情了!把这些工作交给团队内专业的UI设计,让他们出苦力,我们就写一点点JS代码,还能对外宣称UI开发得3天,代码得10天(其实1小时)。哈哈,钱跟捡的一样。。。 感谢柿饼的强大!

好了,项目大致规划好了,我们开始一步步做吧:

1. 计算器UI准备
我不是专业UI设计,我也就嘴上说的好,各位看到了不要笑我的调色
Calculator.png
一开始从小米手机自带的计算器UI抠图,结果屏幕不支持竖屏,做出来效果也不好,就从WIN10自带计算器扣的图,处理了一下。
这种色调,我觉得配下图的按键变色反馈会好一点。
2.png

2. 新建工程,新建一个page1,并把page1的背景图片设置为上面UI图片如下图所示:
1535687273(1).jpg

3. 为每一个按键铺设实体按键,大小正好能覆盖上面的每个键大小,如下图所示:
1535687530(1).png
然后更改按键的属性,其实这些软件都是这套路,老掉牙,没啥难的。这里说下要注意的点:在柿饼UI工具中,每个空间都有自己唯一的名字,这个不能重复!把这个button的名称设置为num1,然后再在调用属性里面填上C语言中所谓的handler,就是按键按下去的时候,会调用这个函数进行处理。
再处理按键反馈的效果实现,透明度设置为0,此时的按键就透明了,就能显现下面的UI图片了。删除按键的“显示图片”,同时删除按键的文本显示,此时效果如下:
1535687979(1).png
再把按键的“点击图片”换成我们上面准备的按压反馈图片,这样就能实现按下反馈了。效果如下:
1535688106(1).jpg由于人的视觉暂留效果,按下去,这个图片会一闪,色彩非常好,按下时,人的心理反馈也很好。

下面是按键属性的设置:
1535688250(1).jpg1535688298(1).jpg

差不多了,就这样把每个按键都处理一下,想想UI是不是很苦逼,没有我们用代码发现计算机的美那样高大上:lol。

4. 下面就是代码处理部分了,这里只用写JS代码就可以了。JS是面向对象的脚本语言,这就注定了他简单轻量,编程高效。具体代码实现请看GitHub中page1.js 此处不再赘述。

好了,看完之后,你要是能感觉到整篇文章是为UI设计写的,你就能感受到柿饼UI工具的强大!基本不需要什么编程工作,做出来的效果还这么骚!在不知道开发过程的情况下,你能知道我的计算器是我一个人花了3个小时做成的(2个半小时做UI)?如果我有个团队,时间是不是更充分?做的效果更好?
期待柿饼UI正式发布!

DaZhou















查看更多

关注者
0
被浏览
2.2k
2 个回答

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友