每人每天仅限5票,快给你心仪的作品鼓励的一票。
投票因为我们的项目用到了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的场景色方式,不同场景采用不同场景色,一些主题性的地方可以采用主色调。
Hi,我是猎头Rachel,看到你的作品非常欣赏。有一个互联网智能硬件公司的设计职位想给你推荐一下,他们成立于美国硅谷,智能硬件由德国团队设计,软件APP由上海的设计团队负责。他们的产品针对海外中高端市场,在国外有很好的销量。设计工作会涉及到和美国的同事协作。不知道是否感兴趣,可以私信留手机号码沟通一下吗?
想必阁下是没写过Bootstrap吧,Bootstrap.min.css里body的定义 { font-size: 14px; line-height: 1.42857143; } 算起来正好20,所谓追求完美布局更恰当的说是 “基于20px的网页垂直格栅基准”http://www.zhangxinxu.com/wordpress/2016/03/css-layout-base-20px/。14*1.5=21,那么请问您奇数字号在不同浏览器显示不一致的呢,有些会向下取整的呢? 还有修改栅格系统的大屏幕显示器 (≥1200px)的有效内容1170为1160势必要重新编译Bootstrap.css文件,就得重新设计一套新的数值,而作者所说1140-1160px是基于何种根据的呢?要知道网页栅格化的意义在于精准到每一像素,使得网页跟设计稿一致! 这是基于Bootstrap的么?有看过Bootstrap源码么?宽度都是基于百分比的,几乎很少设置定值,请问你所给的图片和面板定值在移动端显示如何?用Bootstrap的情景色居然不知道有渐变色的! 别误导新人了好吧!
每人每天仅限5票,快给你心仪的作品鼓励的一票。
投票
发表评论