文章1:UI/UX作品集包装技巧

案例1:

这个主题的文章打算做一个系列，然后这次文章的侧重点还是在版式包装，所以大家不用在意用了什么内容做版式，不要在意不要在意不要在意。

如果你的作品集中需要设计这样的版式，你会怎么做？

你可能会做成这样

很明显，这样的排版方式很死板，体现不出高级，头像和信息展示的非常零碎，那么我们可以用哪些小手段来优化一下，让他变的更高级呢？

首先，我们可以把页面内的内容区分为两块，一块为人物介绍，另一块为标题和修饰文案，那么我们就可以把这两块内容先做一个大小对比，突出人物介绍的版面，放大人物图片。

然后，找到好看的图片进行填充，这里要注意的是为了美观，图片的选择和配色的选择非常重要，图片的背景一定要干净，并且能够突出人物的主体，就像给一个特写。接下来添加文字的修饰，这里要记住，文字尽量不干扰图片的优先级，可以设置的小一点。

最后将其他标题和说明文案以平衡关系填充到整个画板即可。

除了这种方法，我们还可以这样，让人物内容与标题说明划分为左右两大块，人物部分在右侧以块的形式拼接，形成整体，左侧也是标题和说明为一个整体，这样可以有更多的空间去留白。

最后要说明一下，如果你是做偏视觉效果的作品集，那么文字最好是作为修饰作用来辅助呈现，不需要大篇幅去编辑。

案例2

我们先来分析一下这个图文版式的问题：

首先，文字部分对比不够，带蓝色的小元素和背景处理比较零碎，标题的中英文处理的太简单了，没有设计感。右侧的图片风格类似，看起来比较臃肿。

好了，接下去我们就来做一个简单的小手术。如果我现在不想动右侧的图片，只想通过调整文字和布局，怎么样让版面更高级呢？

我们先抛开固定的画板比例，由原来的横向布局切换成纵向布局。

填充更多页面上下空间。然后给页面做个解剖，做一个网格框架，一会可以用来摆放内容。

接下来，对标题进行一个美化，换成英文大标题或者中文大标题，这里要注意的是标题字体的选择务必要搭配整个包装风格，记住3不要，不要衬线、不要粗细不一、不要夸张，简约的粗笔画的字体就可以，中英文同理。

然后保持右侧图片不动，根据网格来摆放文字内容，根据平衡原理，文字可以放置在空白处进行对称。最后将网格背景弱化形成半透明渐变，大工告成！

看到这里，我们还有没有别的排版方式呢？除了左右对称我们还可以用居中对称来试一下，是不是也会有一种新的感觉。

我们在做作品集包装的时候不要用汇报工作的思维去呈现内容，往往你的设计思路都框在一个固定的画板里而无法自拔，设计形式多种多样，多尝试更多的版式你会有新的发现！

案例3

依然是这个老演员，你的作品集在做展示的时候，是不是都是像这样的，在一个横向或者纵向的画板上去堆放内容？除了普通就是普通，为什么会让我们感觉普通呢，因为信息被切割的太碎了，浏览就会无序，低效。

那么一句口诀大家可以记一下，那就是化碎为整，化整为零。我们依然用之前的一个版面为例，这个版面中的几个元素分的很开，很碎，那么我们就对齐进行化碎为整，这里的设计我们就不按照他原来的信息来了，做一些优化调整，

先让这个画板切分成为4个大板块，但不要均分，可以有一些面积上的递进比如1224，这样就有整体性和对比都有了，然后再去填充上图片以及文案，这样整个版面的一体性就更好了，你学会了吗。

案例4

这次是帮一个同学重新调整了作品集的版面，先看一下原来的版面存在的问题：

修改前，版面比较单调，用色单一，版式没有规律。点线面的用的也不是很合理，可以处理一下标题以及文本。文本也很重要，提炼文本能够让你的语句更通顺，并且在多行内容的情况下保持字数一致，让版面更整齐。其次细节处理也很重要，为什么别人的版式看起来就很高级，其实是和很多因素有关，比如两个卡片的比例，字体、标题是否做过一些处理，以及文字之间的大小对比是否明显，左对齐还是居中对齐的选择，一些线条的方向和内容排版的平衡处理都会有密切的关联。

然后我对文字做了进一步处理，字体、文本行间距、大小以及颜色做了一些对比，用网格打基础之后，留白处理也会更容易。回形视觉动线来处理信息传达也更合理。

文章2:关于交互设计中的穿梭框用法

最近有小伙伴问，这两种穿梭框有什么区别？

看到这几个控件不禁觉得设计组件库的命名可能都要不够用了。不知道是谁命名的穿梭框反正和“金刚区”有点“像”，顾名思义就是“闪转腾挪”，但其实穿梭框（transfer：转移）逻辑是把一侧列表的某一项或多项内容转移到另一侧，所以如果叫做列表选择器select picklist也不合理，第二种反而更像列表选择，而穿梭框更像是重新构建一个新的列表。那么严格意义上来说第二种选择器不应该是穿梭框，本体没有进行转移，而是复制到了另一个框里。就像你把商品放进了购物车，原来的商品还在，你选你要的去结账就行。

到这里有的小伙伴就会疑问，如果是第二种场景，那我要筛选什么列表内容，我就只在左边的框里选择不就行了吗，放到右边岂不是多此一举？非也，虽然第二种选择器，没有对一侧的内容转移到另一侧，但是第二种框存在的意义就是在多项目列表中，方便用户查看选中的项目，固定3、5个项目用单个列表框没问题，但是100个项目列表怎么办？而且选中的项目也会进行统一的编辑和管理，在一个框里总不是那么方便，就像是住集体宿舍，每个人都有那么不方便的几天。

所以其实这里在antd上面，设计师应该考虑到形式比较相似所以做了整合，因为毕竟后者真的不是穿梭，要么是多元宇宙在另一个时间线上又出现了一个自己？

另外，大家也要注意，数据录入时候的级联选择、树形选择这两种控件

本质上，这三种控件都属于信息的筛选和录入，有时候根据业务需求，需求对控件做调整和合并，比如在穿梭框里加树形选择或级联选择（树和级联就是同构异型），但要注意可能会出现问题，因为比如左侧是树形列表，而要把一个子项目转移到右侧列表，如果左侧父集收起，那么我们就无法知道右侧选择的子项目属于哪个父集。

这里一般有两种做法，第一种就是将父集做上子项目被选中的标记，这样右侧和左侧的关联就有了，但是如果项目选择的多了就无法对应起来，所以要结合第二种，将右侧的子项目链路标注出来

感谢收看，欢迎赏个赞哦！