2

引言

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

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

设计

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

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

image.png

主题色

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

科技感,腾讯蓝:

image.png

安全感,微信绿:

image.png

奔放感,京东红:

image.png

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

image.png

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

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

image.png

登录页

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

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

image.png

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

image.png

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

image.png

找到符合的了,开始“借鉴”!

image.png

页面比例

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

image.png

PCWeb应用,导航条合适高度72px

image.png

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

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

image.png

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

image.png

颜色冲突问题

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

image.png

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

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

image.png

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

image.png

总结

借鉴,是一门学问。

image.png


张喜硕
2.1k 声望423 粉丝

浅梦辄止,书墨未浓。