element ui 菜单右侧展开_老板：把这张1920分辨率的UI图也在1024分辨率上适配??

最新推荐文章于 2024-08-25 19:56:43 发布

痕量Brant

最新推荐文章于 2024-08-25 19:56:43 发布

阅读量667

点赞数

文章标签： element ui 菜单右侧展开

本文链接：https://blog.csdn.net/weixin_33582801/article/details/112107061

版权

普通UI：对不起，我只能重做。打扰了。

中级UI：我做几个关键分辨率，1024，1366，1440，1920。

看到没，UI虽说就是画画图当个美工狗，但是如何偷懒一套系统少做几份不同分辨率的图，还是很有必要的。

毕竟...头发是自己的。

适配、响应式设计的必要性。

移动端设备我就不说了现在基本上也就一套可以全适配。

浏览器设备嘛天差地别，主流分辨率还是在1366-1920之间的，高级一点的2k/3k/4k也越来越多了，工业制造车间、传统行业很多还是用1024分辨率设备的（这次的客户是个超有钱的大银行居然扣扣搜搜用的带屁股的超级小的电脑。。。），甚至有的还要适配Pad，所以适配肯定要做。

设计之前就得张嘴问清楚：这次适配分辨率是多少（超级超级重要！！一定要问清楚！到时候临时改又麻烦还背锅！）

到底什么样的需求，需要UI做响应式或者适配不同分辨率？

一般我接触的网页分成三种：官网门户、后台系统、大数据展示。

官网门户类：

例如谷歌、百度，搜索进去之后就是列表，这个列表占满整个页面，为了响应不同设备，这类网站都有一个“版心”，

在浏览器宽度随意拖拽的时候，这个“版心”是固定宽度的，通常版心宽度定在900-1000px，这样1024分辨率下嘻嘻嘻完美解但是这样布局规则虽然简单，也有问题：页面右侧会很空（百度这个机灵鬼在右侧放了一些搜索优化和排行榜，凸显了AI和数据优势），而且布局会很老套（谷歌和百度十几年前就基本长这样了）。

这种布局还是适合内容简单、主要是文字信息的页面。在设计这种界面的时候，可以考虑把内容限定在“版心”内。图片很丰富的时候就明显不适用了。

后台系统：

甚至直接扔给开发就可以。开发GG为了省事也会参考组件，比如element/Antdesign/Bootstrap，这些组件在布局的原理上换汤不换药，都是通过栅格化实现。

以ElementUI为例：

组件定义了一个24分栏（col）的基础布局，通过设置span创建栅格布局。比如这里，span=12，分栏数为24/12，以此类推。分栏如果需要加间隔，就加点gutter的属性。

反正这些说来说去就一句话：跟开发GG搞好关系，然后把锅扔给他。

复杂需求：

如果以上布局方式不能满足复杂的需求，就需要UI小弟们费点脑子想想适配响应式设计的问题了。

1.工具。

想要处理好响应式设计的事首先你得选一个灵活的工具。PS就别想了。都什么年代了UI界面这么工程化化这么接近开发的图片还在用PS？？PS的才华被你浪费了好吗！在这里我还是推荐AdobeXD和Sketch，普及率高而且五分钟上手。

2.响应式设计规则。

前端要求在不同分辨率下图文正常显示，分成两种情况。一是内容组件通过横向拉伸不改变布局可以承载功能操作且尽量保持优雅美观，二是组件不够放了需要改变布局。

第一种情况复杂点，牵扯到组件和Group的相对定位和间距。这种变化是相当常见且重要的。

现在以Adobe XD和Sketch为例，来看一下怎样实现响应式设计。

在这个案例中我们需要做一个文字卡片。左侧信息左对齐，右侧信息右对齐。当宽度改变时，对齐规则和跟卡片box的内边距固定，改变的仅仅是box的宽度，box内部的相对布局不动。

还有一个很常见的例子就是文字型按钮的宽度。我们可以指定一个按钮的宽度，也可以采用按钮宽度适应文字。比如，我规定，按钮文字字号为14px，按钮两边距离文字的边距是12px，那么系统中无论按钮文字为n(n就是字数，int形式)，这个按钮的宽度width已经定了：w=14*n+12*2。

在这个案例中，我们需要一个宽度不定的表格，表格宽度跟随窗口宽度流动。

产品名称明显是会很宽的，而银行、产品类别、风险等级、时间这几列宽度固定且适中，预期收益率、期限这两列列名占很宽但实际信息很短。

当然一般表格组件有四种排布方式：1️⃣不管列宽，只平分；2️⃣指定列宽（比如我们指定产品名称这一列永远占300px）；3️⃣表格自适应；4️⃣为每一列分配一个百分比，当表格宽度变化时使得每一列的相对宽度比例不变。

这个表格我们来看一下应该用哪一种适应方式：

方案一：平分每一列。每一列长度相差太大，放弃。

方案二：指定列宽。本项目要从1024就开始向上适配分辨率跨度太大，放弃。

方案三：根据列宽自适应。可以是可以，最终会因为预期收益率、期限这两列名字占太长导致视觉上很空，备选。

方案四：分配百分比。效果如图，非常完美地解决了这次自适应的问题。

从这两个案例中总结，自适应或者响应式是有一定规范的。可以按照相对定位指定固定宽度，也可以指定百分比。Sketch中的Resizing功能强烈建议好好学习，并且在一上手做界面的时候养成好习惯，制定resizing的规范，使得组件复用率高提高效率。另外有兴趣的可以看下Anima的插件中Layout功能，也很丰富。基本可以无缝对接开发了。