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

引言

在咱们的印象中，前端是写业务的，美工是作UI的。前端对美工的设计稿进行实现，因此在不少公司，前端就是会两行AJAX的切图仔。

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

设计

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

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

主题色

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

科技感，腾讯蓝：

安全感，微信绿：

奔放感，京东红：

腾讯这句话说得很是好！“设计作很差，由于看得少。”

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

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

登陆页

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

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

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

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

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

页面比例

最开始怎么都以为本身的导航条写得很差看，后来研究了下慕课网的导航条，原来是比例掌握得很差。

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

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

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

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

颜色冲突问题

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

菜单和导航栏看起来就像连在一块儿同样，很差看。

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

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

总结

借鉴，是一门学问。