拿到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，它包含:

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

     

    抽象主要包括几个部分：

    文章-页面标题

     

    这里不需要什么布局方法。一个简单的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关键字。这在卡片数量可以增加或减少的情况下很有用。

     

    内容部分

     

    图片

    高度

    内容最小高度是多少?

    内容长度

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

    元素之间的间距

    如何处理垂直间距?

    内容中心

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

    限制内容

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

    响应式设计

    我们需要根据视窗宽度改变字体大小吗?如果是，我们应该使用基于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.    
      8. 
    
  
  
  
    8.  
      9.

    css

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

     

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

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

    文章题目：拿到UI时，前端人该如何思考？
    浏览路径：http://www.gawzjz.com/qtweb2/news12/11562.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    自适应网站知识

    分类信息网

    小程序开发公司　　 　网站推广优化　　 　教育建设方案　　 　路面机械及配件　　 　域名注册　　 　成都酒店服定制　　 　成都网站推广　　 　网站建设　　 　网络营销　　 　成都网站建设　　 　华泰海航　　 　微信小程序开发　　 　全网营销　　 　公路钻孔机　　 　温江网站建设　　 　微信小程序　　 　百度推广公司　　 　企业网站设计　　 　响应式网站　　 　成都做网站