前沿
目前因各大 UI 框架的推出,前端画页面就如搭积木一样简略,然而一些我的项目比拟小或是其余起因,并不需要加载大体积的 UI 框架,所以还是有须要从 0 开始画页面的需要,接下来分享一下我是如何画页面的
理解设计
咱们画页面其实是实现设计师想法的过程,设计师是对整个页面 UI 逻辑最分明的人,所以咱们须要有设计师的思维能力更好的实现页面。
什么是 Atomic Design 原子设计
原子设计是一种基于网络设计零碎思维形式的规范性准则。咱们就称它为设计零碎的根底领导实践。分为 5 个档次
原子是咱们设计中最为根底元素,能够是一种字体,一个色板,一组图标或者一个矩形。
把几个原子组合形成一个分子,比方黑体字、矩形、16 号字、蓝色、红色、形成一个按钮。
几个分子形成一个组织,咱们也能够称为组件。组件形成页面框架,最初生成页面。
当扭转原子时,整个体系都会产生变动,同时咱们也能够逐级调整,总之你的每次扭转都会影响到这个零碎,然而它又是放弃一致性的。
设计师是如何遵循原子设计的
设计师首先会定义一个这个的原子面板,定义我的项目应用的色彩,字号,间距,暗影,圆角等
而后再依据这个原子去定义组件,再用组件定义模块,模块再组成一个个的页面。
开发应如何遵循原子设计
首先是开发为什么也要遵循原子设计呢?试想一下当某一天领导说感觉整个页面的间距太大了,那设计师能够通过批改原子里的间距,一键就把所有页面相应的间距给批改了。如果咱们没有遵循原子设计去写代码,那咱们得一个个找到相应的间距的中央去批改。
那开发怎么遵循原子设计呢?话不多说,间接上代码
定义原子变量一一对应设计稿里的原子
// variable.css
--brand-primary: #147BD1;
--brand-danger: #D11429;
--brand-success: #6DC41F;
原子化 css
// common.css
.text-primay {color: var(--brand-primary)
}
.text-danger {color: var(--brand-danger)
}
.text-success {color: var(--brand-success)
}
如果是用的 scss 或者 less 等动静 css 语言,还能够应用循环生存
// backgrounds
@each $key, $value in $color-status {.bg-#{$key} {background-color: nth($value, 1);
}
}
在其余 css 类里应用
.title {color: var(--brand-primary)
}
在页面上应用
<p class="text-primary"> 主色文字 </p>
剖析设计稿
兼容的浏览器、适配要求
不同的兼容要求,跟适配要求会对你抉择的相干技术有影响,比方 flex 布局 如果在 ie9 下就不兼容
设计稿的一致性
剖析设计稿是否遵循了原子设计及一致性
开发
布局
分为 3 种布局
固定布局: 实用于网页内容不受屏幕大小影响
.container {width: 1200px;}
流体布局:实用于网页内容需依据屏幕大小等比缩放
.container {
width: 100%;
// width: 100vw;
}
响应式布局: 实用于不同屏幕下,网页内容排版不一样
.container {width: 1200px;}
@media screen and (min-width: 768px) {width: 100%}
适配
- 排版须要适配可采纳响应式布局
- 内容须要等比缩放适配的采纳流体布局
响应式布局 + 流体布局 = 栅格零碎
html 标签
- 标签语义化
a. 在没有 CSS 的状况下,页面也能呈现出很好地内容构造
b. 有利于 SEO
c. 更具可读性 -
html 元素周期表
css
蕴含公共款式(重置款式、原子类、可复用模块款式)、页面款式
css 命名
BEM 命名法
不举荐的命名:
通用 class 类名(如:.title,.expand,.tips) 如果肯定要用须要限定作用域,防止款式净化