EduSoho UI 设计规范(Web版)

原创作品 分类: 网页设计 版权:
78618 1430 844 36
2016-05-20
336.3
首页推荐

因为我们的项目用到了Bootstrap前端框架,所以设计规范的一些元素是按照Bootstrap来的,另外我们也在一定程度上参考了Material Design以及Ant Design的一些东西,最后结合我们自身产品的特色和涉及到的UI元素总结出了下面这套设计规范。


在这套规范中需要注意几个问题,尤其是在Web Design中会遇到:


1、字体高度

字体是设计中非常重要的元素之一,很多设计师追求所谓的Perfect Pixel,如果要追求这个,你就必须要对字体有基本的了解,其中就包括字体高度,在Web Design中字体高度称为行高(line-height)。例如14px大小的字体,其实在行高设置为1.5的Web中高度为21px。


2、栅格布局

栅格布局是Bootstrap里面的重要概念,而且因为牵涉到响应式,所以设计师必须要对栅格的计算方式了如指掌,我们将Bootstrap的1170px container改成了1160px,所以栅格大小也做了相应调整,尤其需要了解1160px和1140px之间的关系。


3、场景色使用

因为我们产品的特殊性(需要考虑到大量定制和主题),所以色板还是沿用了Bootstrap的场景色方式,不同场景采用不同场景色,一些主题性的地方可以采用主色调。

请登录并验证邮箱后查看原图

benz

杭州拱墅招 UE,作品发邮箱 benzlee@yeah.net

3398粉丝/0关注

原创小生分享帝
Material Design 2018,更新内容总结Wedding website practice :)
2
酸菜面汤

看了下网站 有兼容性问题,应该是修改了原生态的样式!我基本不会改他的样式 ,我会自己写一套样式覆盖他的样式,控制页面大小~~

精彩!

benz

benz

杭州拱墅招 UE,作品发邮箱 benzlee@yeah.net

原创小生分享帝

扫描二维码
去手机端查看海报

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN