【UI开发大观】始于布局——项目布局

上一篇说了页面布局,是从执行角度,也是技术角度考量,但是,只有执行是不够的,那就跟机器没有分别。

编程,应该是一件有乐趣、有意义、有挑战的事,会写和写得好之间存在着距离。

你肯定听别人说过:拿着项目,不要上来就做,要先做好规划。

听来不明觉厉,规划什么?怎么规划?

怎样能最大限度地降低成本,怎样能更高效,简言之,就是又快又爽,虽然有些不是技术范畴,但也需要做好,这需要练习和积累,只有踩过坑才知道。

本文就跟大家分享一下这些“可有可无”的重要环节。

需要做什么+应该怎样做=最终的产出

项目规划,即怎样做。UI开发只是网页开发中的一环,很多公司都没有这一环,而是由前端开发包揽,我们暂且把这一环拿出来,既然只是一环,就会有上下游,即设计师和JS,甚至包括产品经理,所以,要知道需要怎样做,就必须把上下都打通。

产品经理

接到一个项目,我们首先要知道它应该被放在哪里,也就是业务类型或者项目归属。

然后要了解项目的目标或者目的,虽然这看起来和UI开发没有直接关系。

两个极端情况:

其一:产品说,这个页面很简单,只是一个入口引导页,或是一个临时公告,你要用一天甚至半天时间来完成它。

那么,你要做的就是“简单、粗暴、直接”,相应地,它可能十分死板。作为一个有追求的开发者,如果只是切几张图,随便弄两行文字,就结束一个项目,你会觉得体现不出你的功力——你的经验,你的技术,你的技巧。不过,你也可能会庆幸,没什么困难就能轻松完成一个项目,因为不管你是轻松还是困难,得到的报酬都一样(其实很不一样~后续文章详谈)。

实际上,你几乎必定会遇到这种情况,也不必纠结到底值不值得,那就是你在那个项目里需要做到的程度。

其二:产品会跟你说,这个项目稍微有点复杂。

注意,在产品经理眼里,很少有“复杂”和“难”的概念,因为如果连他都认为复杂,你就可以任性的花时间去做,而这就和他希望你“快点,再快点”的意图相背离。

快是可以,忙中出错怎么办?

“能不能快点修复下?”

……

除非真的有很多页面和比较炫酷的动画,他能够通过直接的感官判断“这个应该不简单”,才会说复杂。

你拿来一看,My god,这么多?这么炫?各种圆弧透明,各种不规则形状,还有不同状态,提示文字,弹窗,别说页面,就连一根头发都可能需要单独分出来做个动画。

你就会绞尽脑汁地搜罗自己的技术图谱,想怎么做,实在没有好主意,开始向同事、网友求助,最后通过层层筛选,选择了一个看起来还行的可行方案,开始了漫长的历练之路。

这是两种极端情况,其他大部分情况都是介于这两者之间,不是很简单,但也不是太复杂。

现实充满不确定性,你觉得混乱也好,跟期望有差距也好,这就是理论和实践的距离,知识是固定的,而需求是多样化的,技术最终要为需求服务,它需要你简单就简单,需要复杂才复杂。

设计师

从某种程度上说,设计师也是产品经理意图的执行者,但是,问题在于,产品不懂开发,设计也不懂开发(部分例外),所以,有些时候,设计师的输出并不一定利于我们,反而会造成阻碍。

简单的说,他可能漏给了页面或者元素,可能对视觉稿做过多次改动,发给你的却不是最新版,可能由于时间匆忙或个人习惯,图层命名很随意,分组很乱。

如果你把页面做到8成的时候才发现这些问题,就只能望图兴叹。

看到这里,可能会有设计师想打我,我不是故意要黑谁,确实是我全都遇到过,所以,可能的问题无处不在,我们和设计师是两个领域,又要紧密合作,这就需要进行充分的沟通和反馈,彼此监督和配合。

再者,我们应该认真审视或听从产品和设计师给我们的输出和意见,这是职业素养,但是,我们也是一线的专业开发,同时又是用户,不论是项目层面,还是代码层面,甚至是视觉、交互层面,我们都要有自己的考量。

一旦发现问题,现有方式需要改进,比如,有些视觉元素需要统一化和规范化——标题、段落文字、图标等等,却被设计师比较随意地处理,有些元素的位置过于突兀,有些动画会喧宾夺主,适得其反,就需要及时提出和矫正,而不是拿过来就完全照做,如果你是这么做了,后来再被别人发现问题,回过头还是要我们改。根据经验判断可能有问题的,几乎都会被证明有问题,切莫抱有侥幸心理。

前端开发

HTML、CSS和JS三者本是一体的,如果把UI和交互以及数据分离开来,它们就成了两个步骤,但终究无法分开。

哪些地方是需要配合JS的呢?

  • 处在一行字当中,但要动态取值
  • 需要根据身份或时间不同切换样式
  • 需要根据不同场景进行显示、隐藏
  • 要根据不同情况换肤
  • 复杂交互动画
    ……

以上几点,就是和前端同事合作中会高频出现的问题,不能想当然的按照自己的想法来,而是需要两人达成一致,否则,你做完之后可能会给对方造成麻烦,还要进行二次修改调整。

小结

在我最开始工作的时候,是考虑不到这么多的,拿到项目就想用最快的速度去完成它,看着自己的劳动成果一点点成型,很有成就感。

但是这种成就感是有隐患的,没有充分沟通,就无法了解需求的全貌,只按照看到的东西去做,做出来的东西就经不起折腾。当页面中的静态数据被替换成动态数据,当返回数据失败,当状态提示缺失,等等问题,都会使得我们看起来已经完成的页面出各种状况,怎么也做不完,修补不完。

所以,虽然项目规划它不在需求的内容里,却是你我都必须去做好的事情,否则后患无穷。

好了,这一篇先唠叨这么多,前两篇文章都稍微偏理论,也罗列了一些我曾碰到的问题,希望对你能有启发,能帮你避免一些问题,我们下篇再见!~

灵感_idea wechat
欢迎关注我的公众号“灵感周末”,每个周末推送优质好文!
给加个蛋呗