App的高级感来源于多个方面。不知道为什么,看国内的某些app总觉得有一股廉价感,仅仅是满足了基本功能就停滞不前,开发团队把所有精力都投入到如何更好转化用户,以及吸引用户付费。而反观国外一些哪怕是小型app,相对而言,都比国内很多App更有匠人精神,更精致,更简洁,更贴近用户使用习惯。在这里不对国内外环境做评价,我想说的是,作为一个老前端开发,如果脱离了UI设计美眉给你切图,你就做不出高级感的界面,那就有点对不住十多年的开发经验了。
所以,在这里开一个篇章,关于如何没有UI帮忙的情况下,也能做出精致简洁的UX(用户体验)。这些技巧对于老程序员,特别是 想自己做外快的那些人特别有用,
经过一段时间的调研,发现了如下几个能够很好提升App逼格的编码思路。 以下几点可能有一些重合的部分,但是基本上 标题就是主旋律。
渐变色
一个纯色的按钮,很快会引起视觉疲劳,而如果设计些许的渐变色,则可以很好的降低疲劳感。
动态组件
一个静态的按钮,比起一个会随着用户的操作进行丝滑线性变化的按钮,显然后者更显得有格调。
曲线变化
贝塞尔曲线大家应该都了解过。在UI开发上用途也很多,比如模拟水面波浪,我们定义基准点和参考点,再把这些点连成线,把线上面部分和下面部分填充不同的颜色,再加上动画来让点的坐标进行周期性变化,就是一个很简单的波浪。
组件的重力传感器效果
完全静态的按钮,与一个会随着手机的转动,始终头朝上的按钮,是不是后者比较吸引人。
局部动画
增加逼格,不需要动画搞得到处都是,局部的点睛之笔,往往效果更好。开发UI也要分的清主次。
3D触摸效果
就像谷歌地球,手指触摸,会改变当前视角的经纬度,如果把这种思路用在TabLayout上,用户切换Tab,是不是又是一种不同的体验。
高斯模糊
弹出一个窗口,窗口以下的部分通常就是一个半透明的遮盖层,如果我把这个遮盖层换成高斯模糊,感觉会怎么样?
页面切换过渡
页面与页面之间的跳转动画,也是UI高级感的重点,Flutter的hero动画,可以很好的解决页面之间跳转生硬的问题。然而,也可以自己定义跳转的过渡效果。
可能还有其他的方法。
今天仅列出提纲,接下来对每一项进行填坑,由于我目前用的是Flutter进行开发,而同时我是Android开发,所以每一项尽可能用Flutter和Android原生从0实现这么一个效果。 敬请期待。