RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
拿到UI时，前端人该如何思考？

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

创新互联公司是创新、创意、研发型一体的综合型网站建设公司，自成立以来公司不断探索创新，始终坚持为客户提供满意周到的服务，在本地打下了良好的口碑，在过去的十载时间我们累计服务了上千家以及全国政企客户，如成都花箱等企业单位，完善的项目管理流程，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致夸奖。

把设计细节放在一边

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

 

在上面UI中，有以下特点：

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

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

 

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

我是这样想的：

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

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

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

     

     

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

     
 
 
 
      
  
  
  
  
    1. .wrapper { 
      2. 
  
  
  
  
    2.   margin-left: auto; 
      3. 
  
  
  
  
    3.   margin-right: auto; 
      4. 
  
  
  
  
    4.   padding-left: 1rem; 
      5. 
  
  
  
  
    5.   padding-right: 1rem; 
      6. 
  
  
  
  
    6.   max-width: 1140px; 
      7. 
  
  
  
  
    7. } 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9. .hero__content { 
      10. 
  
  
  
  
    10.   max-width: 700px; 
      11. 
  
  
  
  
    11.   margin-left: auto; 
      12. 
  
  
  
  
    12.   margin-right: auto; 
      13. 
  
  
  
  
    13. } 
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15. .grid-4 { 
      16. 
  
  
  
  
    16.   display: grid; 
      17. 
  
  
  
  
    17.   grid-template-columns: repeat(4, 1fr); 
      18. 
  
  
  
  
    18. } 
      19.

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

    文章页面

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

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

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

     

    抽象主要包括几个部分：

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

    文章-页面标题

     

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

     
 
 
 
      
  
  
  
  
    1. .page-header { 
      2. 
  
  
  
  
    2.   max-width: 50rem; 
      3. 
  
  
  
  
    3.   padding: 2rem 1rem; 
      4. 
  
  
  
  
    4. } 
      5.

    文章- Main 和 Sidebar

     

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

     
 
 
 
      
  
  
  
  
    1. .page-wrapper { 
      2. 
  
  
  
  
    2.   display: grid; 
      3. 
  
  
  
  
    3.   grid-template-columns: 1fr; 
      4. 
  
  
  
  
    4. } 
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6. @media (min-width: 800px) { 
      7. 
  
  
  
  
    7.   grid-template-columns: 1fr 250px; 
      8. 
  
  
  
  
    8. } 
      9.

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

     
 
 
 
      
  
  
  
  
    1. .inner-content { 
      2. 
  
  
  
  
    2.   max-width: 50rem; 
      3. 
  
  
  
  
    3.   margin-left: auto; 
      4. 
  
  
  
  
    4.   margin-right: auto; 
      5. 
  
  
  
  
    5.   padding-left: 1rem; 
      6. 
  
  
  
  
    6.   padding-right: 1rem; 
      7. 
  
  
  
  
    7. } 
      8.

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

    深入细节

    How It Works 部分

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

     

    列

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

    标题

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

    响应式设计

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

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

     

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

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

    HTML

        
 
 
 
      
     
  
  
  
    1.  
      2. 
     
  
  
  
    2.    
      3. 
     
  
  
  
    3.     
       
      4. 
     
  
  
  
    4.       
      How it works
       
      5. 
     
  
  
  
    5.       
      Easy and simple steps
       
      6. 
     
  
  
  
    6.     
     
  •      
  •        
  •          
  •       
    •  
  •        
  •          
  •       
    •  
  •        
  •          
  •       
    •  
  •     
    •  
  •    
  •  

     

    CSS

     
 
 
 
      
  
  
  
  
    1. .steps { 
      2. 
  
  
  
  
    2.   display: grid; 
      3. 
  
  
  
  
    3.   grid-template-columns: 1fr; 
      4. 
  
  
  
  
    4.   grid-gap: 1rem; 
      5. 
  
  
  
  
    5. } 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7. @media (min-width: 700px) { 
      8. 
  
  
  
  
    8.   .steps { 
      9. 
  
  
  
  
    9.     grid-template-columns: 250px 1fr; 
      10. 
  
  
  
  
    10.   } 
      11. 
  
  
  
  
    11. } 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13. .layout { 
      14. 
  
  
  
  
    14.   display: grid; 
      15. 
  
  
  
  
    15.   grid-template-columns: 1fr; 
      16. 
  
  
  
  
    16.   grid-gap: 1rem; 
      17. 
  
  
  
  
    17. } 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19. @media (min-width: 200px) { 
      20. 
  
  
  
  
    20.   .layout { 
      21. 
  
  
  
  
    21.     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
      22. 
  
  
  
  
    22.   } 
      23. 
  
  
  
  
    23. } 
      24.

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

     

    内容部分

     

    图片

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

    高度

    内容最小高度是多少?

    内容长度

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

    元素之间的间距

    如何处理垂直间距?

    内容中心

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

    限制内容

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

    响应式设计

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

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

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

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

     

    html

       
 
 
 
      
    
  
  
  
    1.  
      2. 
    
  
  
  
    2.    
      3. 
    
  
  
  
    3.    
      4. 
    
  
  
  
    4.     
      Food is amazing
       
      5. 
    
  
  
  
    5.     
      Learn how to cook amazing meals with easy and simple to follow steps
       
      6. 
    
  
  
  
    6.     Learn now 
      7. 
    
  
  
  
    7.   
     
  •  

    • css

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

     

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

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


    新闻标题：拿到UI时，前端人该如何思考？
    本文URL：http://www.jxjierui.cn/article/dpeiddi.html

    其他资讯

    快速导航
    友情链接
    网站建设
    联系方式
    • 企业：青羊区浩晨众云设计工作室（个体工商户）
    • 地址：成都市青羊区太升南路288号
    • 电话：18980820575
    • 网址：www.jxjierui.cn

    公司名称：青羊区浩晨众云设计工作室（个体工商户） 联系电话：18980820575

    网站备案号：蜀ICP备2025119795号-2

    内江浩晨众云建站 内江网站建设 内江网站设计 内江网站制作 成都做网站