手把手教你玩儿转UI—站酷App界面优化（一）
手把手教你玩儿转UI—站酷App界面优化（一）
又一次夜猫子来袭，现在是凌晨4:17，睡不着的后果很严重很严重，给了我无所事事浪费时间的好机会，灵感嗖嗖嗖一下子来了！咔咔咔写段子，唰唰唰做页面，嘎嘎嘎玩软件，哗哗哗找重点，感谢窗外永远无法安睡的小狗狗以及永远有吵不完的架的小卖部老板，还有一个月过去了，还没修好路的施工队，他们的努力让我克服了消极懈怠的情绪，让我在深夜依旧奋斗在自己的道路上，努力争取搬离接地气的烟火区～
一般来说，一个App的首页是整个平台内容总览一个承载的地方，或者就是要有一个地方放放各式各样五颜六色的banner，总的来说是一个来承载所有的入口，是信息汇集的地方，是资源，所以必须要有一个“首页”。
|站酷App首页优化前后对比图|
为了避免所有信息都往首页上面放，造成信息负荷，简化首页展示的信息是很有必要的，这一点之前的界面就已经做得很好了，但是我还是想要在已经很好的基础上继续优化，试着追求以下完美哈哈哈哈，以下为具体优化界面的要点：
一 优化成无边框设计，我一直比较推荐的就是无边框设计，这次来实战试一试效果咋样
掌控了用户的注意力
|优化前|白色卡片和白色色背景，第一眼看上去一定会注意到的是边框外面的留白而不是内容，对比明显，而且边框之间的尺寸很大，内容很分散，边框之间的空白处反而非常吸引注意力，造成了很不舒服的感觉；
|优化后| 没有边框，只有内容，页面对于用户最重要的莫过于吸引注意力了，一个产品想要提供的内容很多，就可以通过对边框的淡化来将用户的注意力集中到内容上；
减少设计束缚
一旦页面上有一个设计元素有边框，相应的元素也需要增加边框效果，也就是说制作者对于可掌控的变化并不多，想象一下你要是被关在只能容纳你自己的小屋子里，能想到的活动或者能做到的事情也并不是很多吧；
增加页面的利用率
要是有边框的话，需要设置内边距和外边距的距离，这就多了很多并不能利用的空间，本来一个手机的界面就够小，要是你还无端端用边框浪费掉空间的话，可就太傻了，而相反的，用距离分割内容区块，在有效空间里摆放更多内容，提升空间利用率，才是真正为用户体验做贡献啊；
二 状态栏以及导航栏边框均有一个灰度为百分之四十的线条，虽然很小的细节，但是还是会影响观感，优化之后去掉了两条细线，界面会显得干净许多。
接着我们来研究一下App下拉刷新功能，一般用来显示在上次浏览内容的基础上，更新后台新的内容，下拉刷新已经是一种很习以为常的行为模式了，我自己也不知道从什么时候开始，学会这种下拉刷新的行为指令，不知不觉就作为自己潜意识认知的一部分。只想说好强大的产品经理啊，用一种心理学上类似正诱导以及诱导效应的东西，来引导人们对App进行各种操作，然后针对用户相应的操作行为再进行正反馈和负反馈，慢慢引导用户形成比较固定行为模式……要是想深入了解的话还需要一些心理学基础，建议一般了解即可，总觉得，心理学知识掌握得多了，人会变得比较“深邃”，个人观点，并没有黑的意思……以下是关于站酷App下拉刷新的优化想法……
不是很成熟，参考即可。
|站酷App首页下拉刷新|
站酷App下拉刷新显示的是最近刷新时间，不是每一个App都会有这种操作效果，非要说这种显示有啥优点的话，那大概就是为了让用户安心，少刷吧。个人不是很喜欢这种方式，有一丢丢寡淡，没啥意思，但就是仅仅作为一个提示的话还是可以的，但是你要是想让你的App追求极致的视觉体验的话，还是再优化一下比较好。后来我就想找找有没有更好的，然后发现下面的落网App，它的下拉刷新是一种很奇妙的感觉，整个下拉刷新的效果是会随着你手动操作来变化的，而且曲线的最低点恰好是在你手指按压的垂直方向上，很神奇有没有！
|落网App下拉刷新|
依照惯例，我还是请教了一下程序员小哥哥，这是什么原理，然后听到了又一个高大上的名词，贝塞尔曲线，科普文章在此：http://www.html-js.com/article/1628 ，这个曲线的应用范围大到超乎我的想象，工业设计、计算机图形学以及web 开发领域，原谅我自己的无知，感觉自己发现了新大陆，可以用到这种动态的曲线的地方真的很多，虽然我对它的原理还是搞不太懂，但是我可以用啊，以下动态绘制贝塞尔曲线的在线演示：http://myst729.github.io/bezier-curve/ ，可以比较直观比较准确的演示出来需要的效果。感觉自己了解得差不多以后，兴冲冲找程序员小哥哥想在站酷首页也加上这个效果……但是，小哥哥拒绝了，还一本正经的跟我说，你以后不要随意提出各种花哨炫酷的效果然后提需求，会被打的……觉得怕怕的……
看来我还是修炼不够啊，革命尚未成功，同志仍需努力……
附件是站酷App首页优化界面的源文件，有需要的可以下载。
