先说下背景，来公司之前，我也和大多数后端开发者一样开发的后端逻辑比较多，一碰到前端页面，也只能开发简单的功能，复杂点儿的功能根本不会。但随着开发时间的增长，越来越感觉一名优秀的开发者不仅仅要懂得服务端逻辑接口层的开发，还应该站在产品的角度，UI的角度去看待他的作品。借助ant design的相关内容，开发一个又一个稳定而又实用的功能，非常欣慰。抽空聊下我在前端开发上的感触吧，希望对大家有所帮助。
先来说我在知乎的一篇文章上读到的两个概念，人机交互和无意识设计：
人机交互
谈到前端开发，先说下人机交互。人机交互是指人和计算机之间通过行为动作，互相影响互相作用的一个过程。主要涉及：人、计算机或系统、动作行为，互相的影响结果这四个方面。
交互的过程经过这几个阶段：
由动作发起者确定【目标】。
根据目标制定【计划】。
【确认】计划可行性。
可行，就进行实际【执行】触发按钮，开关等进行作用于系统。
系统作出反馈，进行改变，动作发起者【感知】这种改变。
通过一定的方法【诠释】这些改变。
【对比】目标，如果一致，则代表目标达成。
无意识设计
意识
我们想做一件事情时候，仔细去想，会产生很多关于这件事情的观念、意象、情感。比方说，想喝咖啡的时候，想到星巴卡，想到它的环境、氛围、以及放松的感觉。这种自己能清晰意识到的心里活动就是意识。(摘自网上)
无意识
潜藏在我们的意识中，不需要去想，比如困了自然睡觉。下意识的行为，即习惯性，顺其自然的反应。
由上面的冰山图可以看出无意识占据意识的很大部分，从生下来到成人，我们经过无数次训练，逐步把一些有意识的行为变成无意识的行为。这里面蕴含着很大的空间。正基于此，日本当代著名的产品设计师深泽直人主张“无意识设计”：顺其自然根据人潜藏的需求，客观的需要去思考设计产品。
以上，理论介绍完了，下面介绍以下具体的产品感受：
上面是我买的两款台灯，明显感觉左边那个台灯的开关的位置不太好，实际操作过程中感觉特别别扭，总有种下意识的要去摸灯泡触电。而右侧的设计，也是普通台灯的大多数设计，明显体验好的多，关灯开灯的体验也好的多。
前端的UI交互理念和要求是朝着右侧发展。
ant design
为了给用户更好的体验， 蚂蚁集团体验技术部经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系：Ant Design。我这几年的开发也都使用的是ant design。从我自身的感受出发：
简单，相比之前的原生js开发，降低了门槛，整体UI逻辑和数据流思维更适合一个后端开发者的逻辑思维。
快捷，避免了大量的样式修改，对于一个不善于UI的后端来说，调整样式，作出特炫的效果是件很麻烦的事。之前同事为了实现一个复杂的交互而写的大量js，我看着都费劲，用业界水平衡量了下，极难维护。
样式统一，这也是我比较推荐的地方，对于一个网站或者一个系统，不需要百花齐放，但是需要整齐划一。简单而扩展的样式满足大部分后台系统的需要。
设计的价值观
自然
确定
意义感
生长性
自然和确定是最先提出的价值观，我感觉是结合无意识设计的理念提出的。自然保证流畅，确定更多的是降低用户认知和判断成本，侧重的帮助用户选择的一种理念吧。意义感和生长性是后来提出的，前者更多的是存在是为了承载某个工作使命，而生长性更多的是一个可扩展性的里面。更详细的内容，可参考官网的解释。
设计原则
ant design的一些设计原则，还是需要我们遵循的：如亲密性，对齐，重复，直接了当，足不出户，简化交互，提供邀请，巧用过渡，即时反应等。
直接概念的详细介绍，我这里不做解释。
只介绍根据上述概念，我做的一些功能:
下面是之前一个对齐的一个案例对比：
下面是我用ant design重构另一个功能的页面，是不是好看多了。
再如简化交互和足不出户的一个功能：
对于简单属性的添加修改页面，我更建议用modal弹框，这样，不用进入新的页面即可完成。
而对于属性特别多的页面，我推荐单独起一个页面去实现这个功能。
设计模式-组件化
引自两张经典图来说前端组件的开发，如上两幅图，都是表达一个意思，把一个复杂的界面进行分解，分解成不同的区块，而不同的区块再去分解，分解成最基本的内容，我们称之为Component（组件）。
组件不关心谁调用它，提供给调用者对应的方法和属性，当调用者传入不同的数据内容时，内容根据一定的逻辑展示即可。
至此，简单介绍了人机交互，无意识设计和ant design的一些概念，大家如果有兴趣可以对上面的内容自行到网上搜索，后面我将介绍写前端的一些开发经验和环境相关的内容。敬请期待～
注：以上部分内容来自网络，如有异议，请联系作者。
来源：oschina
链接：https://my.oschina.net/u/4381796/blog/4928531