不做切图仔，初窥设计之门

引言

在我们的印象中，前端是写业务的，美工是做UI的。前端对美工的设计稿进行实现，所以在很多公司，前端就是会两行AJAX的切图仔。

新系统初始化，目前对市面上的绝大多数的Angular UI框架都不满意(也有写得好的，几千$)，只得拿起最原始的武器：Bootstrap。

设计

比不上腾讯，请不起设计师。只能前端自己设计UI。

以一个外行人的角度看，腾讯CDC设计团队的博客写得是最好的，设计规范浅显易懂。推荐大家去看看，里面有QQ项目设计优化的实例。

主题色

主题色决定了系统带给用户的整体感受。

科技感，腾讯蓝：

安全感，微信绿：

奔放感，京东红：

腾讯这句话说得非常好！“设计做不好，因为看得少。”

多看，多借鉴优秀的设计。

保持科技感，试题录入平台采用腾讯蓝。保持安全感，计划以后的出题平台采用微信绿。

登录页

登录页决定了用户心中对系统的初次定位，一定不能太普通。

像这种的，页面对比度不高，看起来就是一个很普通的页面，很难让用户感觉到这个系统和以往使用的与众不同。

这个对比度就很高，因为是非商业系统，所以更主要的是宣传企业，而非吸引用户。这么大的logo很容易让大家记住。

多家比较之下，京东这种风格符合本系统的需求，既有高对比度，同时背景不喧宾夺主，重点仍在登录中。同时底部的各种广告，各种链接也齐全，足够引流。

找到符合的了，开始“借鉴”！

页面比例

最开始怎么都觉得自己的导航条写得不好看，后来研究了下慕课网的导航条，原来是比例掌握得不好。

PC端Web应用，导航条合适高度72px。

编写菜单时也面临着同样的问题，1/12显得窄，2/12又显得宽。

又去“借鉴”腾讯云的菜单比例。

菜单合适宽度为278px，大概1.737/12的样子。

颜色冲突问题

菜单与导航栏是相同的主题色，当首个菜单激活时，会出现如下问题：

菜单和导航栏看起来就像连在一起一样，不好看。

这个其实是绝大多数网站都有借鉴的例子，加阴影。加了阴影，给人的感觉就像有层次一样。

最终实现的页面效果如下所示。集众家之所长，不惊世却脱俗。

总结

借鉴，是一门学问。