如何优化老项目的用户体验及前端UI（一）-一一网

一、分析设计稿

我们先拿到最新的设计稿，然后开始画图。是的，在纸上画（最好用铅笔，后面改动元素嵌套时比较方便）。

1、看一下设计给的组件库（如果设计师有做组件库的话）

这部分先大概浏览一下，有个记忆。组件库里的东西基本上都很相似，无非就是：一级标题、二级标题、正文、加粗文字、分割线、按钮、头像、下拉菜单、颜色梯度等等。

2、看整个项目中最重要的主页

这时就不能光看了，如果你是前端领域的一个专业的UI工程师，你需要拿出铅笔，开始对着设计稿画图。但最开始不是什么都画，首先要画的是大框架，里面的小元素、组件等可以先不画。由大到小，循序渐进。

对，就是这么简单，朴实无华，但是是优化过程中必不可少且有效的一步。

二、搭框架

（1）如何优雅嵌套DOM元素

然后我们就要去想，用哪种方式去实现这个布局。搭建外面最大的框架，这是前端做项目中的第一步也是极其重要的一步，但是大多数人不会静下心来去理解这个部分的原理，作为程序员这是一个很危险的现象。I mean, 建空中花园也要搭个稳固的地基不是吗。

否则就会出现如下情况：

现在每一类产品的竞品都有很多，用户都是非常挑剔且没有耐心的。做崩了一个小部分，用户就会觉得烦躁，有的甚至不会用第二次。所以这就需要我们在用户体验方面达到一个挑剔的标准，也是众多大厂追求极致的原因之一。随着社会的飞速发展，我们其实发现越来越多的用户反而会喜欢用比较简单、中规中矩的经典产品来缓解内心的浮躁。

这里还要拿出前端编程思维里的一个词运用到UI设计和用户体验上，那就是：按需加载。

我们想象自己现在正处在一个别墅的外面，我们看到的是一个大房子。然后我们推开大门走进别墅发现：诶？？别墅里还有若干个大厅，然后我们选择一个大厅走进去，诶？？发现大厅里还有很多的门，然后我们选择一扇门推开，最终进到了房间里。

同理，在用户最初打开这个项目时，我们需要让用户简简单单地看到一个或几个元素，这会比把所有元素暴露在外面的情况好很多，第一点是会提升产品的高级感，第二点是会让用户在精神上感到更舒适。但是元素这么少，我们是要砍掉自己的功能吗？

并不是。

我们不应该砍掉功能，而是，我们需要把一些二级功能隐藏起来，但是又有一个可以引导的东西让好奇的用户去发现，让精神疲惫的用户去忽略，“按需加载”就是这个道理。按照用户的需求去展示对应的功能，从而节省用户的精力和时间，提升用户的使用效率，还给好奇的用户们带来了很多惊喜。

具体实现就是：用户根据自己的喜好、需求去和相应的元素做了一个互动，发现：诶？？这个元素竟然还有别的本事，还能冒出来几个新的元素，或者不同的交互动作还能触发不同的功能、小动画等等。然后点击新冒出来的一个元素实现了跳转，让用户去到了自己想去的地方。

（2）采用哪种布局方式

回归正题。

我选择用flex来实现整个这个布局。当然根据 项目特点，你也可以选择其他布局方式。

html代码：

<body>    
    <div class="wrapper">        
        <div class="left"></div>        
        <div class="right"></div>    
    </div>
</body>
复制代码

css代码：

.wrapper {    
    width: 100%;    
    height: 100vh;    
    display: flex;
}

.left {    
    width: 300px;
    background: #8A2BE2;
}

.right {    
    flex: 1;    
    background: #DDA0DD;
}
复制代码

首先我们看下图，这个项目是个左右布局的图，所以，我们要分左右两个div。

css代码中有两个关键属性是display: flex和flex: 1; 我们在外面的容器里设置flex环境，然后左边固定宽度300px，右边加flex: 1自适应剩余的宽度，形成水平方向充满屏幕宽度的效果。

可参考：css-tricks.com/snippets/cs…

其次左边的部分还有一个footer，所以我们要在左侧分上下两块，但是鉴于footer应该是个固定高度，所以我们需要让左侧树的部分高度自适应，以便左侧内容可以充满屏幕高度：

html代码：

<div class="left">    
    <div class="tree"></div>    
    <div class="footer"></div>
</div>
复制代码

css代码：

.left {    
    width: 300px;    
    display: flex;    
    flex-direction: column;
}

.tree {    
    flex: 1;    
    width: 100%;    
    background: lightblue;
}

.footer {    
    height: 50px;    
    background: coral;
}
复制代码

我们知道横向自适应布局可以用display: flex和 flex: 1来实现，纵向也是同样的道理，只不过多了一步：在容器上改变flex排列的方向flex-direction: column，这个属性可以控制纵向布局。

好了，第一小步，我们算是完成了，现在有了个整体的大框架：

效果图：