拿到 UI 时,前端人该如何思考?

开发 前端
经常有人私信我,小智这个设计图用 CSS 要怎么布局呀,这个按钮要怎么画的。所以今天,在这篇文章我们来介绍一些新的布局的方法,希望对智米们有些用处。

[[359416]]

经常有人私信我,小智这个设计图用 CSS 要怎么布局呀,这个按钮要怎么画的。所以今天,在这篇文章我们来介绍一些新的布局的方法,希望对智米们有些用处。

把设计细节放在一边

我通常做的第一件事就是把设计细节放在一边。我想先知道这次设计主要包括哪些部分,然后在关注每个部分的细节。考虑以下UI:

 

在上面UI中,有以下特点:

  • Header/Navigation
  • 中间内容 部分
  • 底部的 How it works 部分

接着,我们先把这三个主要部分抽象出来:

 

抽象后,我们可以看到主要的部分,主宋就可以帮助我们考虑如何布局组件,而不用考虑每个组件的细节。

我是这样想的:

  • Full-width header:头部的导航栏
  • Centered Content:中间内容水平居中,注意,这个一般需要设置最大宽度 max-width。
  • How it works:这是一个4列的布局,整个部分都被限制在一个包装器中。

接着,把上面三个部分用代码表示出来:

<header></header> 
 
<section class="hero"
  <!-- A div to constraint the content --> 
  <div class="hero__content"></div> 
</section
 
<div class="wrapper"
  <!-- 4-columns layout --> 
  <section class="grid-4"></section
</div> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

 

 

 

因为我们有一个4列的部分,这里我使用 CSS网格:

.wrapper { 
  margin-left: auto; 
  margin-right: auto; 
  padding-left: 1rem; 
  padding-right: 1rem; 
  max-width: 1140px; 

 
.hero__content { 
  max-width: 700px; 
  margin-left: auto; 
  margin-right: auto; 

 
.grid-4 { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.

拿到 UI 时,我们不是马上就开始行动,而是要观察整体的构成,先实现每块的构成,然后再去深入构成的实现。

文章页面

在本例中,我们有一个文章页面布局。这是UI,它包含:

  • 头部
  • 图片
  • 文章标题
  • 文章内容
  • 侧边栏(旁边)

我们再一次把它抽象成主要的几个部分:

 

抽象主要包括几个部分:

  • 网站的头部宽度是 100%
  • 标题:包含文章标题和说明,其内容左对齐,要设置最大宽度
  • 两列布局,包含main和sidebar元素。
  • 文章内容,水平居中并有最大宽度。

文章-页面标题

 

这里不需要什么布局方法。一个简单的max-width就可以了,当然还需要加些 padding,增加一些舒适距离。

.page-header { 
  max-width: 50rem; 
  padding: 2rem 1rem; 

  • 1.
  • 2.
  • 3.
  • 4.

文章- Main 和 Sidebar

 

main 元素是视口的整个宽度减去侧边栏的宽度。通常,侧边栏应具有固定的宽度。为此,使用CSS网格是完美的。

.page-wrapper { 
  display: grid; 
  grid-template-columns: 1fr; 

 
@media (min-width: 800px) { 
  grid-template-columns: 1fr 250px; 

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

对于文章的内部内容,应该将其限制在一个包装器中。

.inner-content { 
  max-width: 50rem; 
  margin-left: auto; 
  margin-right: auto; 
  padding-left: 1rem; 
  padding-right: 1rem; 

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

有些整体的布局后,我们来看具体的细节。

深入细节

How It Works 部分

在本文的第一个示例中,我们来看一下 How It Works 部分 的细节实现。

 

  • 这里的步骤一,二,三,有没有可能会增加或者减少的情况,如果有,我们应该如何处理?
  • 我们是否需要列的高度相等,特别是当一个卡片有一个很长的文本?

标题

我们是否需要该部分标题留在一边?还是在某些情况下应采用全宽?

响应式设计

当网页宽度缩小时,我们需要做响应式吗?如果有, 那触发的条件是什么?

这些是我们开发可能会遇到的问题,你觉得怎么样?作为一名前端开发人员,我们应该考虑这样的边缘情况,而不仅仅按 UI 照猫画虎这样简单。

 

由于本文着重于思考过程,所以无法详细介绍一个个有可能出现的情况。

在上面的模型的第一个和第三个版本中,步骤数分别是3和2。我们可以使CSS动态化来处理吗?可以。

HTML

<div class="wrapper"
  <section class="steps"
    <div> 
      <h2>How it works</h2> 
      <p>Easy and simple steps</p> 
    </div> 
    <div class="layout"
      <div class="layout__item"
        <article class="card"></article> 
      </div> 
      <div class="layout__item"
        <article class="card"></article> 
      </div> 
      <div class="layout__item"
        <article class="card"></article> 
      </div> 
    </div> 
  </section
</div> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

 

CSS

.steps { 
  display: grid; 
  grid-template-columns: 1fr; 
  grid-gap: 1rem; 

 
@media (min-width: 700px) { 
  .steps { 
    grid-template-columns: 250px 1fr; 
  } 

 
.layout { 
  display: grid; 
  grid-template-columns: 1fr; 
  grid-gap: 1rem; 

 
@media (min-width: 200px) { 
  .layout { 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  } 

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.

我使用了CSS grid minmax()和auto-fit关键字。这在卡片数量可以增加或减少的情况下很有用。

 

内容部分

 

图片

  • 图片应如何呈现?它是每天变化的还是应该从CMS更新?
  • 是使用HTML 还是CSS background?
  • 图片的预期长宽比是多少?
  • 我们是否需要根据视口大小使用多个图像大小?
  • 图片的部分是否可能会换成视频?

高度

内容最小高度是多少?

内容长度

我们需要设置标题和描述的最大长度吗?如果是,设计期望处理的最小值和最大值是多少?

元素之间的间距

如何处理垂直间距?

内容中心

如何水平和垂直居中内容?已知我们只知道宽度,而高度是未知的。

限制内容

为了提高可读性,最好限制内容。理想的宽度是多少?

响应式设计

我们需要根据视窗宽度改变字体大小吗?如果是,我们应该使用基于px的单位,视口单位,或CSS clamp()函数?

根据我们所做的项目的性质,我们应该找到这些问题的答案,这将帮助我们确定组件的构建方式。

有时,很难回答每个问题,但是问得越多,获得良好的无错误结果的可能性就越大。

在本部分中,我将解决子元素之间的间距。我喜欢使用flow-space实用程序。我是从Andy Bell的Piccalil博客中学到的。目的是在直接同级元素之间提供间距。

 

html

<section class="hero"
  <!-- A div to constraint the content --> 
  <div class="hero__content flow"
    <h2>Food is amazing</h2> 
    <p>Learn how to cook amazing meals with easy and simple to follow steps</p> 
    <a href="/learn">Learn now</a> 
  </div> 
</section
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

 

css

.flow > * + * { 
  margin-top: var(--flow-space, 1em); 

  • 1.
  • 2.
  • 3.

 

最后的想法如前面所见,实现组件的过程不仅要使其与 UI 完全匹配,还要考虑边缘情况。希望智米从本文中学到至少一件事。

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2015-11-09 10:29:05

设计师前端

2022-12-23 10:36:04

前端React

2010-06-04 10:46:18

同事上司

2014-02-11 17:46:31

创业

2017-11-23 15:06:14

前端数据库开发

2015-10-29 11:35:53

零基础前端设计

2021-09-26 11:32:39

模型数据分析

2015-04-27 09:41:35

前端质量质量保障

2020-12-30 09:00:00

安全工具攻击

2022-07-21 09:00:00

容器云原生安全

2015-10-26 10:32:01

前端优化工程化

2009-09-16 13:29:30

BSM

2019-04-08 09:01:20

程序员技能开发者

2015-06-17 15:21:28

2010-12-29 09:51:29

前端基础框架

2025-02-28 09:34:11

前端参数方式

2023-03-15 08:42:06

form表单设计接口

2019-07-12 09:03:19

软件虚拟机IBM

2021-09-28 07:12:08

数仓开发工具

2017-08-11 14:21:33

软件开发前端框架
点赞
收藏

51CTO技术栈公众号