用户 条件 平铺 引言筛选作为一个常用的功能，在产品设计中的应用面是非常广的。比如我们去购物，会选择销量高、价格实惠并且包邮的商品，筛选区的设计就便于用户进行数据的查询和定位，可以快速查询到满意的商品。本文就筛选这个话题展开了分析和探讨。更多B端干货：4000字干货！手把手带你掌握web中的表单设计前言表单是我们生活中常见的信息添加、录入的方式之一，如何进行表单的设计也是 B 端设计师的必修课。阅读文章 > 一、筛选简介筛选，也可以称作过滤器，它属于搜索框架的一部分主要用于内容提取，将一类数据展示，一类数据隐藏，同时可以整合很多的组件。在 B 端设计中筛选存在的对于整个表单来说是非常重要的，它可以帮助用户，在茫茫的表单数据当中进行快速的定位；可对表单进行快速划分，缩短用户对于数据的寻找时间；能够满足用户在工作中，实际业务场景的筛选。二、筛选的展示类型筛选区常见到的有搜索、条件筛选这两类控件。搜索和筛选虽然同在筛选区，但是二者还是有所差异的。搜索：需要通过查找搜寻获得的。在 B 端系统界面设计中，搜索是通过指定任意条件，系统对此条件进行检索后，展示相对应内容，功能偏主动性；条件筛选：好比一个个筛子将物料进行粗细料分离的一个过程。条件筛选是系统提供指定各种条件缩小范围，可以选择查找不同条件的内容，功能偏被动性。无论被动性还是主动性，搜索和条件筛选这两个功能都是让用户使用某个条件对内容进行区分，从而找到用户想要的内容。二者在功能上相辅相成，在 B 端系统的页面中仅靠搜索或者筛选作为内容筛选都是不够的，这就需要组合筛选区了。1. 搜索筛选精确搜索这种方式搜索准确率高，所要即所得。但需要用户自己输入，然后进行查询。需要记忆搜索详细信息。输入框需要有提示输入的内容，方便用户填写，以及确认输入的类别或格式。适用于用户有清晰的目标，同时需要有查询/搜索按钮，来执行筛选。搜索可配合筛选固有类一起使用。模糊搜索模糊搜索可以用于搜索关键字的同义词，提高搜索的精确性。字段匹配推荐搜索结果，减少记忆负担，适用于不明确的信息筛选。但是会筛选出很多类似相关的内容，需要查找鉴别所要内容，不便捷。适用于用户对目标模糊，模糊是指不用关心输入了什么格式，哪怕错了，系统也会推荐给用户相对正确的；用户需要浏览操作过滤器提供的信息来辅助筛选达到目标。同时也可配合筛选固有类一起使用。2. 条件筛选下拉筛选这个筛选的优势是页面的空间利用率高，同时下拉起到了很好的收纳作用，不占据页面空间。但由于下拉的局限性无法观看到所有的筛选字段，需要操作点击查看。固定选项类，适用于下拉的筛选字段选项有限，并有明确的总结分类。这种操作起来便捷，降低用户的操作难度。一般情况下需要“搜索/查询”按钮，但是也有的产品是勾选即执行的。需要结合具体的使用场景去判定。矩阵（平铺）筛选用户可以直接看到筛选内容，支持输入更多筛选条件，减少操作步骤提高了用户筛选的效率。但平铺的筛选类目占据页面空间较大，空间利用率低，信息量过多都是重点等于没有重点，增加用户的决策时间，不适合选项太多的情况。平铺筛选控件的普适性为最强，当没有其他更好想法时，用平铺总是一个好的选择。需要注意的是，筛选条件不要过多（遵循 72 法则）。表头筛选通过表头的点击，简洁、直观地筛选当前表格列。但只能筛选当前列的内容，筛选字段比较少，筛选形式比较单一。每个表头都会有筛选的 icon，影响用户对于表头的识别。表头筛选学习成本最高，且和表头排序容易冲突，筛选值展示也不够直观。表头筛选类似 Excel 表格的操作，是一种相对高级的交互，适合表格列比较单一内容的筛选。TAB 筛选筛选条件一目了然，交互步骤少，一个 Tab 标签代表一个纬度，平铺展示筛选内容方便识别，学习成本低。但 Tab 标签筛选字段数量有限制，不宜过多，分类需覆盖选项，并且保证每一项没有交集，空间占用多、不够灵活，对用户自定义项支持较差。适用于 Tab 标签切换一般用于和时间、状态的流转有关，且没有交集的数据内容（可以是同性质，也可以是不同性质）。权重高，选项值不超过 5 个。3. 组合筛选在 B 端系统表格类页面中，字段属性很多，简单的检索方式很难准确定位到目标数据，所以在实际使用当中，常会将大量非交叉关系的属性进行罗列，搜索、筛选、TAB 标签切换组合出现，形成多属性的组合检索。而筛选项互相组合，其展示方式有如下几种：平铺式优点：用户能直接看到选项内容，方便用户识别选项，且提高了用户筛选的效率（节省了筛选操作），大而全的筛选字段最大限度避免筛选条件遗漏的问题。缺点：筛选项多会占据大量页面空间，信息量过多都是重点等于没有重点，增加用户的决策时间，不利于表格数据的直观展示，此类型一般配合“勾选即执行”使用。适用从各个维度筛选的场景，多维度筛选对信息筛选的颗粒度需求不一致，同时希望备选项被选中。折叠式折叠式筛选是平铺式筛选的改进，一种简单直接的筛选形式，对平铺的筛选项进行收纳，如果多属性组合检索中的一部分检索条件不是高频率使用的，但又是必须存在的，可以通过折叠的方式将这部分筛选字段隐藏起来，高频筛选字段外露。适用于折叠低频筛选，显示高频筛选，能满足大多场景下不占用太多空间。针对有更多筛选需求的用户也有更好的引导性。三、筛选的反馈筛选区有两种不同的反馈模式：数据实时更新反馈和数据手动更新反馈。数据实时更新反馈界面将与所有设置的筛选相匹配并对结果进行实时更新。这种模式的优点是在执行筛选时为用户提供了一种方便简单的体验，可以在每次点击后立即看到结果。适用于较低风险的交互，一旦处理多选过滤器或更复杂的输入时可能会造成混乱。当然还需要考虑处理数据的多少，如果应用中数据量巨大，每次更新时间较长，反而会降低用户的使用效率。手动更新反馈在手动更新反馈模式下，过滤结果只有在用户点击查询时才会更新。如果用户想在每次更改后查看结果，必须单击查询按钮。这种模式适合多纬度复杂的筛选，所有筛选字段设置完毕之后，统一执行操作，和实时反馈结果相比降低筛选等待时间，尤其是在大量数据进行筛选中，优化了用户体验。四、筛选要注意的问题什么情况不适合用筛选？选用筛选组件的前提是信息能被清晰分类。如用户 ID/电话号码，姓名、邮箱这种无明显规则的就不适合用筛选组件去查找，用搜索会更好。筛选分类有哪些要求？分类需符合大众认知的条件。如：按照年月日的认知来选择，地理位置按照省市区街道…要求筛选类目的分类要合理、避免晦涩难懂的文案。这决定了用户使用筛选功能的时候是否清晰无困惑。五、总结关于筛选设计指南这里就结束啦，在具体项目中大家可以根据产品的特性和需求进行对应的调整。如果文章中不对的地方也欢迎指出。欢迎关注团队微信公众号：兆日 UCD本篇来源：优设网原文地址：https://www.uisdc.com/filter-function-design-2
纹理 平铺 图片 今天向大家推荐一个非常实用的在线图片处理网站 —— 无缝纹理生成器。无缝纹理生成器是一个在线工具网站，开发者是 Thomas Deliot，Eric Heitz 和 Fabrice Neyret。在大家进行图片处理的时候，它能够将一张图片的纹理平铺延伸，操作起来快捷简便，高效产生图片，让我们可以创造更多精美的图片！本网站来自于 @Simon_阿文 的推荐。原微博链接：https://weibo.com/1757693565/L9RxGbpsy无缝纹理生成器的功能网站链接：unity-grenoble.github.io它的操作原理是对图片边缘进行处理，将现有的不可平铺纹理转换为可平铺纹理，从而改变图片的像素大小，将图片的自然纹理延伸平铺，使图片整体结构生动自然。1. 将图片的自然纹理延伸当我们有一张纹理细致好看的图片需要处理，但图片像素不够时，我们就可以使用该生成器，将图片纹理进行平铺。原图:将图片进行无缝纹理平铺后:效果是显著的，可以看到将纹理进行平铺延伸之后的图片，过渡生动自然，画面不会有违和感或者有明显的处理痕迹。2. 通过平铺使图片中单一的纹理变得丰富如果一张图片中的纹理过于单一，那么它所呈现出来的画面就会缺乏构图美感。通过将图片中的纹理进行平铺，对原图进行优化。原图:将图片进行无缝纹理平铺后:处理之后的图片更加美观厚实，中心与边缘融合自然，画面结构更加丰富。3. 对 3D 图片进行无缝纹理平铺对于 3D 纹理图片，也同样可以将其进行无缝纹理平铺，使图片的元素更加饱满。原图：将图片进行无缝纹理平铺后:原图:将图片进行无缝纹理平铺后:纹理衔接自然且顺畅。4. 将图片纹理平铺后，通过多种随机方案的替换对图片进行加工当我们使用该工具进行生成，对纹理平铺后的图片结果不太满意时，还可以选择多种随机方案对图片进行再次处理，从而达到我们想要的效果。例如，我们对一张普通的水面图片进行平铺：这是平铺后的效果：可以看到生成的图片，相比原图，水面的波澜更多，更有画面感和真实感。我们选择不同的方案对其进行处理：水面上纹理的不同，图片所展现出来的氛围便不一样，由此我们可以根据不同的需求选择合适的随机方案对图片进行处理。我们对一张森林图片进行平铺：平铺后：原图的主色调是黄绿色，进行纹理平铺后的图片同样是黄绿色的色调，但带给我们的视觉冲击更大，图片视野更宽广了，从一幅“森林图”变成一幅“密林图”，而后者相对前者画面结构更为复杂，纹理通畅而自然。我们将处理后的图片，进行随机方案的替换：可以看到，通过随机方案替换后的图片，画面整体色调为绿色，黄色色彩部分减少了，图片所呈现出来的效果也就不一样了。如何使用该生成器进行纹理平铺使用无缝纹理生成器对图片进行操作的方式比较简单，根据以下步骤进行，就能生成我们想要的图片。1. 选择我们所需要的图片，调整适合的混合边框宽度，这决定了对图片边缘无缝混合后，纹理平铺展开的效果：注意:如果选择的图片太大的话，可能会导致网站崩溃！2. 选择随机种子（Random Seed），我们知道，随机数是通过一些复杂的数学算法得到的，而随机种子就是这些随机数的初始值。一般计算机里面产生的随机数都是伪随机数（伪随机数就是指一直不变的数）。改变随机种子，点击“计算”选项进行图片输出：3.进行计算之后，点击“显示 2×2 切片预览”，就能看到图片的无缝纹理平铺效果，点击“显示原创”，便可以看到边缘混合纹理平铺延伸前的效果，将处理前后的图片进行对比：4.如果我们对纹理平铺后的图片结果不太满意，可点击“更改种子和计算“，通过多种随机方案对图片纹理进行处理，实现不同的平铺纹理图案，选择我们需要的：5.另外，当我们对图片进行纹理平铺延伸后，对图片像素不满意时，还可以重复以上步骤再进行一次纹理平铺，从而生成像素更复杂的纹理图片。可以看到，通过无缝纹理生成工具，一张普通的图片将能延伸出更多可能！对于自然纹理图片，通常像森林、苔藓、水面、岩石、沙土、肌理等等，包括一些 3D 纹理图片，进行纹理平铺之后都可以看到明显的效果！好了，以上就是对在线工具网站——无缝纹理生成器的相关介绍了，它的功能不仅实用，而且快捷方便，易上手。网站链接：unity-grenoble.github.io大家可以进入网站去体验和探索，有什么想法或感受欢迎在评论区讨论！酷站两连发！专注无缝纹理素材站+多边形背景生成器编者按：来两个超赞的背景素材网站！阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/unity-grenoble
落霞与孤鹜
