引言
在我们的印象中,前端是写业务的,美工是做UI
的。前端对美工的设计稿进行实现,所以在很多公司,前端就是会两行AJAX
的切图仔。
新系统初始化,目前对市面上的绝大多数的Angular UI
框架都不满意(也有写得好的,几千$
),只得拿起最原始的武器:Bootstrap
。
设计
比不上腾讯,请不起设计师。只能前端自己设计UI
。
以一个外行人的角度看,腾讯CDC
设计团队的博客写得是最好的,设计规范浅显易懂。推荐大家去看看,里面有QQ
项目设计优化的实例。
主题色
主题色决定了系统带给用户的整体感受。
科技感,腾讯蓝:
安全感,微信绿:
奔放感,京东红:
腾讯这句话说得非常好!“设计做不好,因为看得少。”
多看,多借鉴优秀的设计。
保持科技感,试题录入平台采用腾讯蓝。保持安全感,计划以后的出题平台采用微信绿。
登录页
登录页决定了用户心中对系统的初次定位,一定不能太普通。
像这种的,页面对比度不高,看起来就是一个很普通的页面,很难让用户感觉到这个系统和以往使用的与众不同。
这个对比度就很高,因为是非商业系统,所以更主要的是宣传企业,而非吸引用户。这么大的logo
很容易让大家记住。
多家比较之下,京东这种风格符合本系统的需求,既有高对比度,同时背景不喧宾夺主,重点仍在登录中。同时底部的各种广告,各种链接也齐全,足够引流。
找到符合的了,开始“借鉴”!
页面比例
最开始怎么都觉得自己的导航条写得不好看,后来研究了下慕课网的导航条,原来是比例掌握得不好。
PC
端Web
应用,导航条合适高度72px
。
编写菜单时也面临着同样的问题,1/12
显得窄,2/12
又显得宽。
又去“借鉴”腾讯云的菜单比例。
菜单合适宽度为278px
,大概1.737/12
的样子。
颜色冲突问题
菜单与导航栏是相同的主题色,当首个菜单激活时,会出现如下问题:
菜单和导航栏看起来就像连在一起一样,不好看。
这个其实是绝大多数网站都有借鉴的例子,加阴影。加了阴影,给人的感觉就像有层次一样。
最终实现的页面效果如下所示。集众家之所长,不惊世却脱俗。
总结
借鉴,是一门学问。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。