如何快速制作漂亮的UI界面并应用到实际前端代码中？

Question

一直很好奇一个问题,作为一个后端程序员如何才能制作出拥有良好用户体验的UI界面

写后端PHP以及Java方面的代码已近10年，换了2家公司，但是都有自己的UI设计人员和前端开发人员。然后到现在的公司做了没几个月5个主力UI和前端自己创业去了，本身这家公司就不大是个创业公司，导致我必须要开发整个项目(因为个人带的是后端团队),对于前端,因为本身就一直在接触,采用的技术是webpack+vue的方法,后端使用symfony+restbundle,然而UI这一块就麻烦了。

后台管理界面非常方便直接使用element-ui，移动方面也采用了vue的一个组件库,但是PC网站界面方面不好做。本来可以直接用semantic-ui或者bootstrap随便搞一下就可以，但是公司要求新产品的界面要有良好的用户体验,给我看了几种样式的网站，感觉以我的水平直接写css根本达不到这种要求，而且我并不清楚UI设计方面的流程。

现阶段还在学习Sketch,然后一直在画啊画，但是画出来怎么套用到界面上并不是很了解。为了维护方便，我的样式需要使用sass/scss来写，但是sketch画好后只能生成基本的CSS，然后就没然后了。。。

所以请问一下各位高手，具体从UI的制作到整个前端的写成是怎样操作的

以前的做法:

bootstrap+jquery和css的一些类库+less/sass语言+webpack，然后改一行CSS代码热重载自动看到新页面，然后一点一点改,但是这样效率低下而且并不能设计的很好看

现在的假想:

做原型设计比如sketch+material->画好界面->根据界面写SASS/less->写前端的一些动画等。。。

不过怎么感觉这样效率更低，而且还是做不出好看的界面

这里的一些好看的界面我指的是一些比如一个网页中有类似macos的窗口然后里面放一些代码,图片什么的,统一的透明度，图标放的位置等等一系列的东西

最终有三个问题

1. 从UI设计到前端完成的具体细节(sketch设计到HTML+sass/less完成的具体流程),提高效率而不是降低效率

2. 怎么样才能设计更漂亮的界面,是否需要一定的美感，还是其它漂亮的网站抄袭一下

3. 那些漂亮的有用的矢量图片素材，CSS类库或者网站模板或者JS库等一般去哪些网站找

希望大家能给点意见，十分感谢

Answer 1

最近我也在愁这个，效果图可以自己做，后端可以做，就是前端，这个简单可以完成，但真心不适合，我是觉得作为一个公司的话，前端是必须要有的，真心不要自己都做了。没有回答问题，就说一下自己的感慨

Answer 2

你这问题我真不好说，作为一个前端，我也写过自己的UI，虽然都是dialog的东西。设计我不会，我觉得UI更多的是在功能上的实现，界面和交互的效果根据设计师的要求来改就行了，但如果想省事，功能这里是需要考虑得最多的。因为换样式比换功能的需求往往来得更多，特别做外包的时候，都是只改样式的。我觉得还是弄个完整的team好，不然做起来太吃亏了

Answer 3

UI很重要，有能力找一个全职的，没能力找一个兼职的，这个方面的投入很值得

Answer 4

制作漂亮的 UI 那只能招牛 X 的 UI 设计师，应用的话就切图，加上简单的 CSS 了。术业有专攻，没钱没人就不要要求太多。

Answer 5

外包。做好预算、找好渠道，控制好成本。一万多还是能做出很不错的单套UI，相对而言也比自己招聘来的更实际、更有效率。说实话，真正能做出好图的UI设计师工资也不下一万，自己还是别费功夫了。等你自己达到这个水平了，你还得去想想，是你工资能涨这么多，还是你能做这么多事。