前端大人,你懂设计吗?

前端大人,你懂设计吗?对不起,我不懂。
不懂咋办?学习、思考、实践。
前端工程师要会什么?大家校招或社招的经历,都心领神会了。但是想想,前端工程师该做什么?
想想,时代在发展,科学在进步,明天发生啥?谁也挡不住。
从WEB1.0 到 WEB2.0,到可能的 WEB N.0, 关于前端这一块的分工发生了许多的变化。想想大学还在学网页三剑客。前端工程师这一岗位的出现,主要为了提高网页端的用户体验。说到用户体验,其实也就是页面展示效果 + 用户交互行为。
大家都学过软件工程,都知道业务的起源来自于需求,在需求验证确定中,最后会输出一份需求说明文档,简称PRD。
皓眸大前端开发学习
准确的说,对于WEB开发,从PRD到产品交付上线都属于开发的过程,也属于前端工程师的工作范围。从工作职责上继续划分,于是:
皓眸大前端开发学习
对于一些非互联网行业的公司,甚至不区分前端和后端的。作为前端工程师,不仅需要关心做出来的页面效果,还要关心视觉(规范、样式、结构、还原度),关心交互(行为逻辑),关心后端(数据存储)。

前端开发

不管是做一套网页还是写一个用户界面软件,都有类似的思想:结构、样式、行为分离。各种软件框架的出现,也是遵循了这一套设计思想。当然作为前端开发,我们还有其他的基本准则:

  1. 结构、行为、样式分离。(结构和样式关系到视觉,行为关系到交互)
  2. 渐进增强 (Progressive Enhancement)与平稳退化(Graceful Degradation)

关于第二条原则,主要是为了增强用户体验,对不同的浏览器特征做差异化的处理。比如响应式页面布局设计,动画效果的兼容性处理等。当然这个也是需要结合统计的浏览器版本分布,浏览器用户量来做参考。
其实关于前端工程师,最基本的职责就是还原视觉稿、还原交互稿,关键是还原度的问题,这是一个挑战。
皓眸大前端开发学习
但我们需要考虑的远远不止这些,PRD是写死的,开发过程是活的。不论是交互、视觉,还是前端、后端,大家都应该精诚合作、互相了解、共同设计,因为我们都属于开发,都需要对产品交付负责。

前端设计

先看一下开发中常见的一些环节:(画得有点乱,凑活看一下)
皓眸大前端开发学习

实际上前端设计这一块目前并没有一套统一的规范和实践方式,但总体的思考有以下几点:
1.前端设计时间?
前端设计应该从交互评审前开始,一直到开发。

2.输入与输出?
输入部分应该包含交互稿,视觉设计稿。要根据前端的设计、规范这些角度给予交互反馈,当然交互原型设计也应当遵循现有的规范,充分考虑到组件的复用,逻辑的一致性。 视觉稿需要有视觉自身的规范,如果视觉稿本身质量很差,间距都不统一,那么开发也很难还原视觉的设计。
输出部分应该是什么?前端设计文档? Maybe.可能是前端设计实现的方式,是否是单页?划分几个模块?几个组件?写多少UI?包含哪些逻辑?哪些校验?

3.设计的粒度?
至少应该包含结构和行为部分,样式部分也要考虑到是否有动画或者特殊的视觉效果。
结构部分:模块、组件、页面。
行为部分:交互逻辑,校验逻辑。
样式部分:动画效果,视觉特效。

4.谁来做前端设计?
头头?头?no, 全民参与吧,共同讨论吧。

参考

1) https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement
2) 还原活的设计:http://kejun.github.io/share2013_11/?16

谢谢!

转载请注明出处:http://www.haomou.net/2016/11/25/2016_front_design/
欢迎关注皓眸学问公众号(扫描左侧二维码),每天好文、新技术!任何学习疑问或者工作问题都可以给我留言、互动。T_T 皓眸大前端开发学习 T_T