工具 在线 标签 大家好，这里是和你们聊设计的花生~今天为大家带来设计师 效率工具 第 13 期，本期推荐的 5 个神器分别是：用嘴改图！轻松换背景、改颜色的在线 AI 修图工具 ImageEditor免费下载！拥有 2000+知名品牌 VI 手册的档案库 The Branding Style Guides打开即用！在线图片、GIF 及视频编辑工具 ImagesTools情人节设计必备！WannaThis 分享的免费高质量的 3D 素材包省力便捷！可定时自动关闭标签页的浏览器插件 Tab Wrangler往期回顾：这5款工具，让设计师工作效率提升 200%！（十二）大家好，这里是和你们聊设计的花生~今天为大家带来设计师效率工具第 12 期，本期推荐的 5 个神器分别是： 免费好用！阅读文章 > 一、ImageEditor网站直达： https://imageeditor.ai/ImageEditor 是一款免费便捷的在线图像编辑工具，借用 AI 生成技术生成智修改图像，如修改物体颜色、替换背景，修改画面精细度或色调，处理速度也很快。使用方法：上传图片后，在下面的文本框内输入需要修改的描述词，还可以指定图片内需要替换的对象以及无需修改的部分。修改词设置好后，可以根据图片内容规定智能修改方向，勾选“修复面部”可以防止修改过程中出现人脸扭曲；勾选“周围环境”可以智能生成新的背景或环境；勾选“扩大维度”可以提升图片清晰度。描述词需要是英文，不熟悉的小伙伴可以借助翻译软件。二、The Branding Style Guides网站直达： https://brandingstyleguides.com/ （搭梯子速度更快）The Branding Guidelines Archive 意为“品牌风格指南”，网站收录了 2474 份世界各大知名品牌及项目的品牌 VI 手册，包含的科技、互联网、餐饮、农业、金融、美妆、房地产、艺术等多个行业，我们熟悉的微信、抖音、麦当劳、星巴克、Discord 等品牌的 VI 手册在里面都可以找到。在站内可以通过品牌名和行业分类标签进行文件搜索，登录注册后可以下载完整高清的 PDF 文件 ，而且都是官方出品的标准文件，形式完整内容详细，非常具有参考价值。三、ImagesTools网站直达： https://imagestool.com/zh_CN/index.htmlImagesTools 是一个在线的图片、动图及视频处理工具，功能包括图片压缩、裁剪、拼接、添加水印及格式转换；Gif 的压缩、裁剪、合并、及视频裁剪与转换为 Gif，无需注册打开即用。四、情人节 3D 素材包网站直达： https://wannathis.one/freebies/valentines-day-3d-illustrations2 月 14 号就是情人节了， 国外知名 3D 素材网站 WannaThis 公开分享了一个免费可商用的情人节主题 3D 素材包，包含爱心、字母、钻戒、表情包、巧克力等 36 个素材，建模精致，可以下载 Figma 和 PNG 两种格式，用来作为海报 Banner 的主视觉或装饰元素都可。下载方式：进入网站后点击下载按钮，按指示输入邮箱，等待一会素材包的下载链接就会发送到邮箱，进入链接下载即可。五、Tab WranglerChrome 浏览器插件页： https://chrome.google.com/webstore/detail/tab-wranglerTab Wrangler 是一款 Chrome 和 Firefox 浏览器插件，可以帮助用户定时自动关闭不使用的标签页。找资料时我习惯一连点开几十新标签页然后慢慢看，但是看完后并没有随手关的习惯，结果就是网页挤得名称都看不全，一个个点击关闭不仅麻烦费事，浏览器还经常半途卡死。安装 Tab Wrangler 后，我按照自己的阅读习惯，设置了一个 10 分钟的期限，当标签页超过 15 个且 10 分钟内没有再看过这个标签页，它就会自动关闭。此外还可以设定锁定网址，其标签页就不会被关闭；被关闭的网址也都有记录，可以轻松找回，非常方便。好啦以上就是第 13 期设计师效率工具推荐，喜欢本期推荐的话请大家多多点赞收藏进行支持，我会更有动力为大家推荐设计干货知识 ~ 有关于本文或者设计的问题可以在评论区提出 ，我会第一时间回复。推荐阅读：AlternativeTo！超好用的相似软件推荐网站大家好，这里是和你们聊设计的花生~做设计或者日常学习娱乐我们都离不开各种软件，如果这款软件是免费的就更棒了。阅读文章 > 2023年，让这20款AI工具帮你更高效地完成工作~2023年，让这20款AI工具帮你更高效的完成工作~大家好，这里是和你们聊设计的花生~2022年是AI技术大发展的一年，我都快记不清为大家推荐多少种AI工具了。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/5-practical-software-13
图标 用户 标签 今天和大伙分享一个非常不错的产品，那就是爱彼迎。爱彼迎（Airbnb）是一个出租住宿民宿的网站，提供短期出租房屋或房间，让旅行者通过网站或手机发掘和预订世界各地的独特房源，为近年来共享经济发展的代表之一。我第一次用爱彼迎产品的时候，发现爱彼迎用户体验、设计都非常的不错，给人感受专业、舒适、信任带有设计追求的产品。虽然爱彼迎今年已经退出中国市场，聚焦出境游业务，但是爱彼迎的产品体验有很多点值得学习，今天我将从 12 个维度进行分析。往期产品拆解：文档类产品解题宝典！24个细节全面拆解Notion一、前言Notion 是一款融合笔记（Notes）、任务（Tasks）、知识库（Wiki ）以及数据库（Database）的 all-in-one 生产力工具，产品主要服务于互联网群体。阅读文章 > 一、品牌理念从这张图我们清楚看出爱彼迎符号融入了人、地点和爱的品牌愿景。爱彼迎说任何人都可以画出的心形，超越了语言和文化，颂扬了爱彼迎的热情好客精神，而热情好客的新调色板则反映了人们的开放心态。爱彼迎的品牌色红色更好的传达了爱、热情好客品牌理念。二、品牌符号我从 App Store 找到最新的爱彼迎的 logo，发现爱彼迎的颜色有所变化，偏向粉一些的红色，更具有活力的颜色。爱彼迎的 logo 好看是有原因的，我发现图标是由三角形区域中设计的，导致图标给人的感觉很稳，同时利用简洁的线条进行图形绘制，非常不错的符号。例如日本三菱的 logo，也类似这种设计形式，虽然是三个菱形组成，但是都是在一个三角形下进行设计，显得非常的稳。同时我发现跟名字也有关联，菱字和菱形的关联。非常的经典、克制、耐看，从小就很喜欢这个 logo。三、启动页每一个 app 都有启动页，而爱彼迎用浅灰色的 logo 作为启动页。感受最深就是这个 App 没有广告，保持最纯粹的页面。四、首页设计爱彼迎首页目标非常的明确，顶部卡片利用大投影使得视觉层级是最高的，同时配上红色大按钮“搜索房源”的描述来提高用户的点击效率。五、卡片设计爱彼迎卡片设计非常有细节，banner 的比例是 3:2，用户的头像在图的右方，做了一个破形处理，让户主和图片关联起来，非常有创新的布局，让平庸的界面更加设计感，同时大部分用户都是右手操作，头像在右下角，在操作的热区，体验会更佳。六、标签细节爱彼迎标签一样很有细节，重要的标签颜色和普通不一样，重要标签是棕色色值而普通标签只是浅灰色，有个层级的对比。标签的左右安全距离保持一致，当字数有变化的时候，标签感受和规范是一致的。七、透明细节爱彼迎评分标签背景是带一点透明度的，如果用纯色会突兀，而有透明度显得界面通透、清新。右上角爱心图标白色描边+黑色透明+微投影，为了更好兼容白色图片和黑色图片。八、布局细节爱彼迎首页下滑有一个探索全球奇屋，全屏都是美丽的民宿，采用瀑布流的设计布局，图片之间错开展示，自适应的高度设计，头部大 banner，下面配上小图，具有节奏感。左上角按钮大小高宽的点击区域大于 88px(基于 2 倍图）体验非常的好。九、沉浸式体验点击进入民宿，主图铺满 3/4 的手机界面，用户可以进行左右滑动查看民宿图片细节，用户还可以上下切换名宿，整体给用户沉浸的感受。当用户点击喜欢的按钮，界面的背景色黑色变成彩色背景，给用户明显的感知。我发现这些介绍页面可以翻译成中文，也可以显示原文（葡萄牙语）对应各国国家爱彼迎又做了对应的翻译处理，作为用户是非常的友好，能完全看的懂，满足国际化设计。十、弥散色彩爱彼迎有几处用了弥散的色彩，例如选择感兴趣的民宿，背景会加入一些弥散色彩做一些设计区分。个人中心也会在背景上用品牌色作为弥散色彩进行设计，让页面更加丰富。弥散光设计！网易阿里大厂都在用的刷屏级新设计风这阵子不是有一种设计流行风悄悄刮了起来嘛！阅读文章 > 十一、图标设计发现爱彼迎的图标都是灰色线性图标，同时每一个风格的民宿会专门赋予一种图标，保证了图标的一致性。线性图标的优点是简洁、高效，减少对内容的视觉干扰，能给用户带来极致的感受。想绘制线性图标，这里有 6 个前辈为你踩过的坑我们作为 UI 设计师，一开始入门接触最多的就是图标，而现在很多设计师都钟爱线性图标，导致很多新手设计师也跟随主流的脚步选择线性图标去设计，但是线性图标是不是真的像我们看起来那么简单呢？阅读文章 > 十二、字体设计仔细的人会发现，爱彼迎专门为自己的 APP 设计了数字字体和英文字体 airbnb-cereal-font，字体比较时尚、粗壮，特别应用在标题、评分、价格重要信息上具有很好的识别性。字体也可以给产品提高品牌性，形成差异化。总结品牌符号可融入企业的愿景和理念。品牌色的选择好的话，可以达成差异化。为 APP 打造一款数字字体和英文字体可以提高产品的品牌性。破形的设计还可以运用在 APP 的布局中，会有创新性的效果。整个 APP 的图标风格需要保持一致，这样用户的感受是一致的。图片的清晰、美观、高雅可以给整个 APP 提高美感，这个需要根据 APP 的定位来确定。感谢大家阅读～～ 关注黄小伟设计，分享好的设计。本篇来源：优设网原文地址：https://www.uisdc.com/airbnb-design-2
表单 用户 标签 前言表单是我们生活中常见的信息添加、录入的方式之一，如何进行表单的设计也是 B 端设计师的必修课。身边别的部门的同事常常会说：表单不就是几个输入框，几个组件组成的东西么，挺简单的，有什么好设计的。但通常情况下，越是简单的东西，要思考的点却越多，想要把一个表单做好也是一件不容易的事情。生活中，大多数人都不喜欢表单，比如前段时间有一些许久没有联系过的朋友让我帮忙填写一下调查问卷，作为一个热心市民的我，自然是选择点开链接帮忙填写；一鼓作气填了一段时间后，看着剩下的问题，我不耐烦的放弃了填写这个调查问卷。所以作为设计师，我们应该“由内而外”而不是“由外而内”的去设计表单，如何让表单变得更容易让人接受也是设计师应该考虑的问题。更多兆日UCD的干货：6000字干货！3个优秀交互设计师应该具备的边界感引言售卖软件服务的公司，最理想的状态就是开发一套通用的解决方案或产品，而几乎不用接收任何定制化需求（定制化需求大多会被内化成通用产品的新功能）。阅读文章 > 一、什么是表单表单是一种用于信息添加、录入的页面类型。是连接用户与数据库的桥梁，通过引导用户进行信息的填写，从而提交数据给后台。在用户填写提交时，还需要对用户输入内容进行校验与反馈，保证用户信息填写的完整度。填写表单是一件麻烦事，当我们想做的是投票、网上购物或者添加好友之前，总是会有表单防碍着我们。正因为多数人不喜欢填写表单，所以在做表单设计时，我们的首要目标是让人们迅速轻松的完成填写，同时获得系统和用户想要的东西。二、如何进行表单设计1. 表单拆分基础表单中会有以下六个元素：1. 标签：标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解；还有一部分是告知用户哪些是必填项。2. 占位提示：直接展示在输入项中，采用弱提示文本对所需信息描述，当用户输入信息时即消失。3. 校验：对输入项进行验证，并给出反馈提示，如：用户未填写，格式错误、内容错误等4. 基础组件：可交互输入的区域，是构成表单的核心内容，主要有：输入框、单（复）选框、上传、时间选择器、开关……5. 提示：描述该输入项需要的输入类型，如：上传的文件类型6. 按钮：用户完成输入后，点击按钮进行提交、进入下一步等，按钮一般是跟随的最后一个输入项后面，若输入项超出一屏显示，建议将按钮悬浮固定在底部。当我们开始制作某一表单的时候，我们需要强迫自己思考一下每个元素的 UI 问题：这个元素是什么类型的？如何处理其他这类东西？元素之间有什么关系？通过合并相同类别元素或者扩展该元素和其他元素之间的关系，能否简化设计？2. 表单录入模式表单根据录入模式可以分为：单步表单、分步表单和高级表单① 单步表单：单步录入指的是在一个页面即可完成内容输入。使用于内容较少，结构简单的场景，我们常见的登录页就是典型的单步表单。② 分步表单：内容较多、录入内容的方式差异较大的情况且业务本身具有流程化特性，一般通过添加分步导航展示内容。常见的例如银行转账，修改密码等等。③ 高级表单（分组表单）：高级表单（分组表单）：主要用于需要一次性录入大批量数据的场景。高级表单与分步表单有点类似，都是为了减轻用户填写压力，将填写内容进行分块。不同的点在于，分步表单的流程化明显，后一步填写的内容都是基于前一步来填写、是前一步反馈。3. 表单的页面框架表单的页面框架指的是承载着整个表单页的页面框架，即：整页式（新页面）、弹窗式、侧边栏式。因为其页面面积大小不一样，所以使用情境有所不同。整页式（新页面）：最常用方式，适用于绝大部分的表单，可以支持构建复杂的表单。弹窗式：通过小面积的弹窗进行轻量化的编辑，方便快速进行增、删、改、查；输入项较少，一般不会有滚动条。侧边栏式：与弹窗式相似，通过小面积的侧边栏进行编辑；可承载比弹窗更复杂一些的表单内容，可以有滚动条。我们在选择页面框架时通常需要综合以下三个因素去考虑：内容数量 ：内容如果较多不适合使用弹窗式与原页面关联程度 ：需与原页面关联强建议使用弹窗式、侧边栏式表单的复杂程度： 一般高级表单、分组表单、分步骤表单、有表格聚合的表单、联动表单等都建议采用整页式的框架来展现。4. 表单的排列方式① 布局方式在制作表单的时候分成两种排列方式：单列布局和多列布局。我们可以通过以下几个因素去考虑使用什么布局：1. 在输入项不多的情况下，建议采用单列布局，因为单列布局，用户填写的路径就是从上至下的一条直线，十分符合用户的视觉动线，能够提高用户浏览与填写的效率。2. 多列布局的表单会导致用户的视觉路径变长，用户需以 “Z” 字形的视觉动线扫描表单，会提高浏览与填写的效率，并且多列表单容易造成用户填写时的混乱，易填错，体验差。但是有时部分业务诉求和某些特性的场景要求，会需要在有限的空间上放入更多的控件来收集用户的信息，这时就不得不使用多列布局的样式，因为多列能够省纵向空间。单列布局优势：视觉路径清晰，填写效率高，体验好；劣势：垂直空间占用率高。建议使用场景：表单内容较少的情况下使用单列布局多列布局优势：省空间，能够放置更多的控件；劣势：视觉路径模糊，填写成本高，填写易出错。建议使用场景：关联性强的填写项横向排放，且将该列中最重要填写项的放于最左侧。② 标签对齐方式标签的对齐方式有：左对齐、右对齐和顶对齐，除了需要考虑单列式布局还是多列式布局，还有我们也需要考虑标签的对齐方式。马泰奥·彭佐在 2006 年 7 月对表单的每种对齐方式做过眼动测试研究，根据研究结论做出以下分析：顶对齐标签：研究中，从标签移动到输入框只需 50 毫秒。比左对齐标签快了 10 倍，后者需要 500 毫秒；比右对齐标签方式快 2 倍，后者高达 240 秒。能迅速填完顶对齐标签表单的原因之一，是因为眼球只需要在标签和输入框之间进行上下单向运动。优势：眼动测试中移动速度最快，最有利于提高用户填写表单的效率。标签字数相比于左右对齐标签可容纳更多字数。劣势：纵向空间占用率高，对于小屏用户不太友好（设计前需要考虑用户使用场景以及使用设备）建议使用场景：希望用户快速完成表单；对标签的扩展性高，有国际化需求（中文转英文，英文会比较长）；更适用于弹窗式、侧边栏式布局。右对齐标签：如果要尽量减少表单占用垂直屏幕空间，右对齐能提供快速完成时间。研究中，专家用户和新手用户扫视（眼睛运动）右对齐标签表单的标签和输入框的平均时间分别在 170 毫秒和 240 毫秒，而填写完成时间比左对齐快 2 倍。优势：标签和输入框位置紧密，更方便填写劣势：右对齐的布局会造成标签的左侧不齐，影响快速阅读表单的效率问题；如果增加填写项标题字数过多，整体的表单页都需要修改，右对齐灵活性低。建议使用场景：适用于需要填写效率但受到屏幕垂直面积限制的页面。更适用于整页式布局。左对齐标签：在顶、右、左三种方案中，左对齐表单填写速度最慢。因为左对齐表单解析问题时眼球定位次数最多，用户一般情况下都能将左对齐布局中的标签和输入框联系起来，只是花费时间较长。在研究中，典型扫视时间为 500 毫秒，很长说明用户经历了沉重的认知压力。优势：易浏览标签；占用纵向空间较少劣势：标签和输入框距离较大，表单填写效率低建议使用场景：需要让用户认真思考后填写的页面；更适用于整页式布局输入字段上方的粗体标签在顶对齐的情况下，设计师可能会想：如果我们将标签进行加重，这增加了它们的视觉重量，并将它们带到了布局的最前面，这样说是不是可以让用户更好的去完成表单的填写呢？但事实却和设想相反：粗体标签反而增加了用户填写的负担。粗体标签导致从标签移动到输入字段的扫视时间增加了近 60% ，从没有粗体标签的 50 毫秒到有粗体标签的 80 毫秒，更突出的标签没有明显优势。粗体标签更难让用户阅读和感知——可能是因为粗体文本和输入字段的相邻粗边框之间存在更多的视觉混淆。小结标签位置：单从效率角度看，顶对齐>右对齐>左对齐，但是根据应用场景，效率快并不是我们选择标签对齐方式的唯一的指标。在大多数情况下，将标签放在输入字段上方效果更好，顶对齐的情况下标签的扩展性更高，且用户不会被迫分开查看标签和输入字段。需要注意在视觉上将下一个输入字段的标签与前一个输入字段分开。粗体标签：阅读粗体标签对用户来说有点困难，因此最好使用纯文本标签。但是，当使用粗体标签时，可能希望将输入字段设置为没有粗边框。三、表单校验形式1. 什么是表单的校验为了让用户准确的填写表单，在用户填写表单中/填写表单后，常常会增加我们常说的“反馈提示“，针对反馈信息的准确性，我们会采用两种校验形式：前端校验和后端校验。① 前端校验：主要负责校验输入的内容格式是否正确；例如常见的手机号格式是否正确、密码格式是否符合要求。② 后端校验：与数据库相关，主要负责校验输入内容是否正确；例如常见的手机号是否存在，密码是否正确。③ 校验触发条件：用户输入时进行校验（例如：注册输入密码时，实时显示密码强度）用户输入完成失去焦点时进行校验（例如：注册重复输入密码时，密码与前一次输入的是否一致）用户输入完成点击操作按钮时进行校验（例如：注册点击提交时进行校验，手机号已被注册所以未通过注册）④ 报错方式：即时报错输入完成后点击 提交/下一步/保存 等操作后报错2. 校验形式根据不同的校验触发条件和报错方式，我们可以组合成以下几种校验形式：① 输入时即时验证，即时报错用户在输入的过程中进行实时验证，输入框处于聚焦时开始提示，随着输入的过程，符合要求后已与用户通过验证的反馈。例如在注册阿里云账号时，设置密码需要满足三个条件，这里采取了即时验证。优点：可以实时告知用户表单的填写时候符合规范缺点：实时验证会使用户分散注意力，也有可能会引起用户的反感使用场景：注册时需要设置密码，通过密码不同的组成，时判断密码的强度，比如纯数字密码符合最低安全要求密码，但增加大些字母和小写字母后就形成了更安全的密码② 失去焦点后即时报错用户在输入完成后进行验证，输入框失去聚焦后（即用户点击输入框以外的位置后）与用户进行反馈。例如在注册网易邮箱时，填写完毕后即时报错。优点：为用户修改错误节省时间、避免出现很多错误需要改正的情况。缺点：如果输入有误，用户需要多一步操作，点击会有错误的输入框进行修改。使用场景：注册用户名时，取消聚焦后会反馈用户名是否可用，不可用的情况下是被注册还是格式有问题。③ 操作后（保存/提交/下一步）后全部报错用户完成表单填写后，点击操作按钮（保存/提交/下一步），系统将表单统一上传到后端数据库中进行对比后集中与用户进行反馈。优点：减少对用户的打扰，减少后端服务器压力，提高效率缺点：用户只能点击按钮后才可以得到反馈，不能及时修改；若表单过长，用户返回修改的路径也将增加。使用场景：登录账号是判断密码是否正确最后说说表单是后台最常见的场景之一，所以表单设计是 B 端产品最重要的部分之一。表单的设计是需要产品经理和设计师共同解决的难题。表单需要注意的点还有很多，我们在设计表单的同时，不仅要考虑上述的这些问题，还得“由内而外”的考虑表单为什么这么做，在用户录入信息时能降本提效才是我们应该做的。更多表单设计干货：想把表单的用户体验做到极致？我总结了这5个细节！Hi，我是彩云。阅读文章 > 把表单体验做到极致！11个表单设计的高效技巧大家好，这里是设计夹，今天为大家分享的是「表单设计」。阅读文章 > 欢迎关注团队微信公众号：兆日 UCD本篇来源：优设网原文地址：https://www.uisdc.com/web-form-design-2
标签 用户 图标 前言标签栏是用户进入 APP 的第一触点，绝大多数以固定在设备底部的形式、让用户在应用中的不同模块之间快速切换。它作为移动应用中最常见的元素之一，是 UI 设计师们绕不开的课题。一个好的底部标签栏可传达出产品的核心功能、品牌形象及设计理念，还能用作判断应用是否精致的标准，用户可通过第一触点来感受这个 APP 是粗糙的还是精致的。所以看似简单，但要想设计出视觉美观、反馈清晰的底部标签栏，有很多值得我们深究的地方。那么标签栏为何存在？背后满足的需求和场景到底有哪些？能给产品、用户带来什么价值？本文将从很多优秀产品中，挖掘出值得学习和借鉴的设计亮点，对标签栏作出思考及分析，希望能帮到大家。本期大纲了解标签栏标签栏常见设计规范标签栏组合方式图标切换样式标签栏功能样式延展总结了解标签栏1. 为什么要设计标签栏？虽然我们看到如淘宝、京东、美团等主流产品都使用了底部标签栏，但并不是所有的产品都需要，部分工具、打车类型的 APP 就没有使用标签栏，所以在设计一个产品之前应该思考，为什么需要、有没有更好的其他方式代替。在这里，我们先了解其作用，然后结合需求思考与产品的的契合度，最后再决定是否使用它。传达核心功能底部标签栏一般由 3~5 个功能（入口）组成一个完整的产品架构，这些功能基本都属产品的核心，可以帮助用户避开产品中其他信息的干扰、精准快速的找到这些功能并使用它。突出重要功能即便有些不是产品的核心功能，但用户的操作频率极高、可能是核心功能的前置条件或索引，也会将入口置于底部标签栏，常见的有扫一扫、搜索、发布作品等。需要注意的是，这种功能在操作之后大部分都会进行二级页面跳转，与其他标签的等级权重并非平行。多种展示方式因产品定位不同、受众用户不同，接收信息的方式也有区别。标签栏能灵活的承载多种视觉展现方式，以传达出不同的产品气质。例如：受众群体范围非常广泛且存在一定的互联网文化差异的产品，使用纯文字标签；而对于长期活跃在互联网环境下年轻化的专业用户，且产品较为轻量，标签栏使用纯图标会显得更加简洁、更有气质。定位用户坐标用户可通过被激活的标签（高亮、颜色变化）清楚自己当前所处位置，减少用户思考或通过其他信息解读而花费不必要的时间。2. 为什么放在底部?首先，将标签栏置于底部非常方便用户拇指与设备进行交互，基于单手操作的便利性，无论左、右手，其大拇指都处在设备底部的自然覆盖区域；其次，因用户是通过从上到下、从左到右的“F”型浏览顺序，设备底部对用户产生的视觉注意力相对较低，置底导航不会分散其注意力，同时又方便用户随时切换至其他感兴趣的功能模块。根据史蒂文·霍伯（Steven Hoober）在对移动设备使用情况的研究结论中表明：抱着手机的人占 36%、两只手使用手机的人占 15%，而 49％的人依靠一只手在手机上完成事情，也就是说，仅用大拇指操作手机的用户可能高达 75%，这足以说明将 Tab 栏置于底部体验会更好，很大程度上提高用户的操作效率及频次。绿色代表可以轻松到达的区域；黄色代表需要延伸的区域；红色表示难以到达，需用户改变手持方式。3. 标签栏结构底部标签栏结构布局相对来说比较简单，主要有以下几种元素组成：1 – 用于承载标签栏所有元素的容器；2 – 激活状态下的图标，高亮提示，明确用户当前所在位置，点击不会跳转到其他功能模块（舵式导航除外）；3 – 激活状态下的标签文本，作用与上述相同；4 – 未激活状态下的图标，相比激活状态，视觉层级较弱，点击会跳转至对应的功能模块；5 – 未激活状态下的标签文本，作用与上述相同。标签栏常见的设计规范1. 标签数量为确保底部标签栏表现清晰、反馈及时，iOS、Android 两大平台在设计规范中都对标签数量给了相同的建议，将底部标签数量控制在 3~5 个之间，低于 3 个会过于占用页面底部空间，浪费资源，超过 5 个会让结构变的复杂，且用户在操作中容易发生误触。针对超出 5 个之外的标签，Google 建议将以汉堡菜单的形式隐藏、iOS 也将多出的标签隐藏并强制替换成“更多”入口，虽然可以将其视为一种解决方案，但体验极差，一方面用户无法提前感知隐藏的功能入口，极易忽略，另一方面，产品将重要功能隐藏可能会存在不可预知的风险。具体的标签数量如何决定，这还得根据产品的框架来确定，功能结构的划分会告诉你标签数量到底是 3 个还是 5 个。比如：功能比较单一的产品，3 个入口足以满足需求，对于结构复杂且超出 5 个的，需根据产品的核心功能、主推业务进行筛选，最终控制在 5 个以内即可。2. 标签间隔屏幕均分：这是在设计中使用最多的一种方式，不管标签有几个，都可以利用整个标签栏的宽度进行平均分布。例如：以 iOS 二倍图设计稿 750px 的宽度为基准，如果存在 5 个标签，那么每个标签就应该在 150px 宽度的区域内左右居中、并依次均匀排布在整个底部标签栏中。同等间距：比较少见，一般只有 3 个标签时才会选择使用这种方式，在标签较少的情况下，相比均分，视觉上看起来更为紧凑。3. 视觉分割缺少视觉分割的标签栏很容易出现错觉，让用户误以为这是页面底部的内容，对信息的区分非常不友好，我们可以通过投影、分割线、背景色、毛玻璃效果对标签栏作出明确的信息版块区分。标签栏组合方式1. 图标加文字组合这是最为常见的组合方式，当某种样式的图标被广大用户熟知、或频繁使用某个应用时，引人注目的图标能让用户快速理解，且不受文化、地域的影响快速触达目标，即便存在某种歧义，配合文字说明使其更加标准化，这种图文组合最为稳妥，不容易出错。2. 纯文字两大短视频平台「抖音/快手」底部标签栏就是当代纯文字标签的代表作，另外如小红书、百度翻译、高德地图…等也采用的这种方式。纯文字标签遵循简单易用的原则，方便直观的进行操作，对用户的影响力较小，让用户更专注于信息本身，例如需用户高度聚焦界面内容的高德地图，去图标化降低标签栏注意力是一种不错的表现方式。不过这种标签样式单一，对于信息延展会受到一定局限，如品牌传播、节日宣传促销等，所以纯文字标签不能乱用、滥用，比较适合用户群体跨度较大的产品。3. 纯图标一般适用于较为小众的产品，例如花瓣，所面向的用户群体是跨度非常小的年轻化互联网专业人员。纯图标样式较为简洁，能在一定程度上提升产品气质，虽然在识别度有所降低，但对于这类用户心智模型的建立已相对完善，所以用户并不完全依赖通过阅读文字才能理解标签含义，更可能是利用位置记忆、图形化等知识唤醒固有认知来快速定位。图标切换样式标签栏的图标设计这里就不做阐述了，如果不太清楚，请看这篇文章：6大章节！图标设计基础知识全方位入门指南前言做好图标设计是一个入门级 UI 设计师的必备技能之一，图标是界面中非常重要的组成部分，在实际的工作中，即便是一些工作多年且有一定经验的设计师，也很难保证自己设计的图标有多么完美。阅读文章 > 1. 图标切换风格众所周知，底部标签栏图标都有选中与未选中状态，其「线性
标签 用户 内容 Tabs 标签页又称选项卡（以下简称标签页），它是一种高效的屏幕空间利用手段，映射非常接近卡片的目录索引，用户可以基于索引标签，快速定位到目标中内容中去，这也是大多数用户来自现实世界的经验。在 Web 页面中，它的使用场景也较为简单，当页面的内容信息量较多，用标签页可以对其分类，一方面可以提升查找信息的效率，另一方面可以精简用户单次获取到的信息量，用户更能够专注于当前已显示的内容。本文从标签页的「基本原则」和「使用避免」两个维度，总结 10 个我们所要注意的一些规则和方法，如果遵循这些原则，它不仅能够快速、高效帮助用户完成任务，也会让我们设计的体验更好。由于 Tabs 标签页涉及到的端设备及内容较多，本文只讨论 Web 端内标签页的使用情况，不讨论浏览器级别的标签和导航标签设计等。基本原则1. 标签的文案应当是简短且高效的标签的文案应当简短，做到让用户快速识别标签的文案需要尽可能使用简短的、概括性强的关键词，如果使用较长的文案，那么对于用户阅读和区分这些信息都是一个不小的挑战。标签文案需要有明显的区分，避免用户产生歧义；在词语上优先使用名词而不是动词，因为动词让用户误以为这是可以行动的按钮。标签的文案应当做到高效展示标签的信息展示传达应当高效，比如不要让标签文案分开展示，如下图的标签页的状态和数量两组信息较为割裂，用户会做短暂思考关联下方内容的是状态还是数量。如果设计的样式与常规标准差异较大，用户就会产生疑惑，所以对于用户已形成的行为习惯，尽可能避免改变。2. 已选中的标签应当是唯一的且足够突出已选中的标签应当是唯一的标签页之间是相互独立且互斥的，一次只显示一个标签的内容信息，不会出现点击一个标签页，出现两个甚至更多标签的详细信息。一般默认选项为第一个标签页，而如果没有给到用户预选择的情况，也会让用户感觉困惑。同时关联的详细内容区域宽度应该是等同的，切换不同的标签，不要改变其内容宽度的大小。已选中的标签应当是足够突出确保已选中的标签页足够突出，让用户一眼就知道了当前选中了哪个选项卡，特别是当只有两个标签页的时候。可以通过字体大小、颜色、粗体等在增加已选中的视觉权重。3. 标签页版面延伸到内容区域，可加强标签与内容的关联性如果将选中卡片式标签页背景颜色和内容面板背景保持一致，就能够做到增强选项卡与内容之间的联系感。4. 标签页的位置和排序，应当基于人的阅读习惯位置：强调或需要引起用户的注意，请把它放至顶部因为人的阅读习惯是从左至右、从上到下的顺序浏览，所以相较于底部或左侧的标签页，顶部的标签页具有更强的视觉引导并引起用户的注意。相反如果用户不太关心，甚至很少切换这些标签页，可以考虑将它们放至底部。排序：重要的、使用频率高的标签应当放至前面如上所说，人的阅读视线从左到右，所以应当将重要的、使用频率高的或者按照逻辑顺序往前排，通常默认选项（一般为左侧第一个）是用户进入页面看到的第一个标签页，因此它的信息应当是最重要的、或者应当是用户使用频率最高的。以下是以京东关于商品详情的一个排序，用户看到的第一个标签页是关于商品的介绍，第二个标签页是商品的规格包装，第三个是该商品提供了哪些售后保障等等。使用避免1. 避免使用图标作为标签页文案在一些场景下，图标有时反而会让用户误解标签的信息，如果要用请全部添加，不要只针对部分标签选择使用图标。使用时仍需注意，将图标放至 tab 标签的左侧。2. 避免截断标签文案，并且让它们有足够的点击面积避免截断标签左侧的文案，减少的文本会阻碍用户对于信息的识别和理解完整的标签信息，可以帮助用户快速识别当前的位置。如图左侧标签内容的减少，会妨碍用户对于信息的理解，反而会降低标签的可识别度和操作切换的决策成本。标签页应当有足够的面积，避免让它们进入紧凑模式每个标签页都有层级引导的作用，需有一定面积来展示标签信息。比如像浏览器的标签页特别多时，会给用户使用带来两个问题，一是可点击区域非常小，精准点击较为困难；二是标签获取到的可用信息非常少，甚至有时只是一个图标，当然对于浏览器，我们完全可以重新打开一个新窗口，来解决这个问题。3. 避免数据为空，就不显示这个标签页一般情况下，如果将标签页作为数据信息分类展示时，即使该标签下没有数据，该标签也是需要显示的，否则用户就永远不会知道有这个标签页的存在。4. 避免标签页，在内容较少或者作为比较时使用避免将标签页用于很少的内容分类，因为会降低信息的展示效率标签页本就是为过多内容信息而采用的一种分类方式，如果一个 tab 下只有几段文字或者几组录入数据信息，可以考虑在一个页面内展示这些内容，不仅可以提高屏效，还可以减少操作上的切换成本。如下图，简单的三组数据信息，我们就可以将它们放在一个页面中，通过卡片来区分它们。避免将标签页用于比较不同类别的信息，因为它会增加用户的记忆负担因为用户通过切换标签页去比较这些信息时，短暂记住这些内容是一件非常困难的事情。所以对比不同类别之间的内容，可以考虑在一个页面展示，如下图就是苹果官网在一个页面显示的 Mac 机型比较，可以同时对比三款机型的信息。5. 避免嵌套标签页，如果使用请加大他们的层级关系避免在 web 页面中嵌套标签页，因为嵌套后层级较为复杂，可能会造成信息的混乱，用户记不住已访问过哪些标签页。如果有嵌套 tab，请在视觉上加大他们的层级关系，并且尽可能减少一级 tab 的数量。6. 避免复杂内容标签页，用户直接删除在表单中，如果删除该标签页后，会给用户造成工作负担，甚至会丢失一些数据，这时的删除操作需要给用户反馈提醒，给到用户二次确认是否删除；如果删除该页签后，对于用户几乎没有任何负担，或者再次输入的成本较小时，不建议使用二次确认，因为这时给用户带来的操作干扰远大于误操作成本。比如下图 Microsoft Excel，当标签页签有内容输入时，删除会需要用户二次确认，而当页面内容为空时删除不会给用户任何提醒。在具体的业务场景中，我们需要结合用户的删除频率、误操作成本以及删除组件的干扰三者之间找到一个相对平衡点。总结以上就是标签页在设计中我们所注意的一些事项，如果遵循这些用法，不但解决信息的堆积问题，也能够大幅提升页面的清晰和可用性。而如果我们发现用户很少去点击这些标签页、或者使用经常出错，就需要考虑这些标签页是否使用得当，或者违反了上述所说的一些基本用法。以上举例覆盖的场景不一定全面，不过我们最终的目的还是通过标签页这个组件，去引导用户将视觉聚焦于页面内容。参考文献：张亮《细节决定交互设计的成败》尼尔森诺曼，《Nielsen Norman Group》从3个方面，分析总结标签设计的体验细节！在移动端产品中，标签不是核心内容，甚至有点不起眼，但是谁都无法忽略它的存在。阅读文章 > 欢迎关注作者微信公众号：「小高杂谈」本篇来源：优设网原文地址：https://www.uisdc.com/how-to-use-tabs
标签 用户 信息 在 B 端产品线特别是在决策类产品中，针对在较长时间段内任务中断回溯的场景的设计方法在 B 端产品线中，特别是在决策类产品中，经常会出现因为需要决策的信息量多、任务处理周期长而造成任务（主动 or 被动）中断，用户反复多次进入任务处理流程的情况。针对在较长时间段内任务中断回溯的情景场景，从用户心理和业务场景出发设计快速定位任务进度的「状态标签」，在任务列表查询区提供「标签类别筛选」以及在任务处理详情页面「同步状态标签及关键信息」以保持视觉连贯和逻辑映射，从而增强用户定位能力，消灭负担及提高决策效率。B 端决策类产品流程图在这里，简单概括一下决策类产品的整体流程，用户通过逐条或批量处理待决策的任务最终完成所有任务的决策。在此过程中或主动或被动的会出现任务中断的情况，那么用户想要返回任务清单查找未完成或者处理中的任务就需要耗费时间和精力费力查找，这必然导致工作效率的降低。通过任务中断回溯这一设计手段，用户能够快速定位、精确查找，提高工作效率的同时带来更为平滑的用户体验。以 B 端-营销标签洞察产品为例项目背景：整合其他来源渠道的标签，并提供标签挂站内商品的服务。用户可通过各维度查询符合条件的营销标签，并可以针对标签进行修改后审核采纳。用户痛点：业务侧需在一周左右的时间中审核几十条甚至上百条营销标签，任务处理周期长，会出现主动或被动中断任务的情况，在重新开启任务处理流程时，需要从成百上千条任务中找出未审核或未采纳的任务后进行决策。设计目标：解决较长时间段内的审核中断回溯问题，使用户在每次进入该模块时，可以快速定位到未审核的标签。A「状态标签」：在标签表格中增设标签类别字段。标签类别分别为“已收藏”、“未收藏”、“已采纳”、“未采纳”、“新标签”。同时，设计三种颜色的标签来分别承载三种标签类别，使用“icon+字段”的视觉手段按状态差异化呈现，且该标签位于表格前列，依据用户浏览轨迹来辅助业务侧第一时间即可识别表格中不同类别的标签信息。B「标签类别筛选」：在页面查询区提供标签类别的筛选功能。中断后通过筛选“未采纳”、“未收藏”，即可快速查询到待审核的营销标签。C「同步状态标签及关键信息至其他场景」：将每条营销标签的“状态标签”及“关键信息”同步至详情页面。当用户点击表格中的“标签解读”按钮后，新页面打开标签详情页面，即用户能够同时打开多个详情页面。可在一定程度上无限拓展在某一时间内处理的标签个数。同时，在详情页面的页头展示该标签的“状态标签”与表格中该条的关键字段信息；在详情页面的页尾吸底展示“收藏”与“采纳”两个决策按钮，提升用户的审核效率。最后以上就是「任务回溯设计」的全部内容啦～～后续会为大家分享录入流程设计、关键信息密度提升、场景化设计等一系列的设计方法，希望能给正在从事或准备入局 B 端的的小伙伴带来启发，也希望大家一起探讨更多的 B 端设计方法。8000+干货！B端设计师要懂的信息架构一篇关于信息架构的深度解读，希望对大家有所帮助。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/task-interrupt-backtracking-design
标签 用户 信息 在移动端产品中，标签不是核心内容，甚至有点不起眼，但是谁都无法忽略它的存在。特别是在电商平台中，标签已经成为了不可或缺的设计形式。今天我们就来总结下标签设计的细节。文章主要分为 3 部分：标签是什么？标签需要表达什么？标签设计的要点标签是什么？1. 功能标签百度百科给出的解释是”Tag（标签）是一种更为灵活、有趣的日志分类方式，可以为每篇日志添加一个或多个 Tag（标签）“。例如在网络平台发布文章时，作者可以定义多个标签，方便读者更好的理解文章内容。同时平台也可以根据标签聚合同类文章，建立目录索引，引导读者快速查看标签文章。还有一种就是「话题标签」更加灵活，通常采用“#+任意文字”的形式，作为超链接可以跳转到专题或者信息聚合页。例如微信、微博、今日头条的话题标签。以上 2 种形式更多的是从功能角度出发，侧重分类和索引功能。2. 标签组件在设计侧更讲求标签的信息传递及表现形式。AntDesign、TDesign 等 Web 端规范都有专门的 Tag 组件，可以看出主要有 3 个作用——标记、分类和选择。标签需要表达什么？在移动端产品中，标签通常出现在“发现”、“推荐”页面，或者搜索结果页面中。通过简单精炼的表达方式，在有限的空间辅助信息表达，让用户可以更多维度地了解内容，引起用户注意并激发用户兴趣。所以标签所表达的内容至关重要，主要包括以下 3 个信息方向。1. 商品或服务特点对电商平台而言，商品、价格，服务、物流等服务环节都会影响到用户决策，因此需要尽可能地将商品及服务的价值点传递给用户。而移动端产品屏幕空间有限，需要将各类信息分层有序的展现出来。标签既可以突出商品折扣、优惠信息、服务特色吸引用户，又不会占用太多的空间，所以成为了商品展示重要的辅助信息。2. 用户行为最近我在使用支付宝在付款时，发现对方账户信息增加了”经常光顾“的辅助标签，让我可以更放心地完成付款。简单的标签可以缓解用户误操作的焦虑，增强安全感。而在腾讯云手机端登录时，增加了“上次登录”的标签，降低了多账号用户的记忆成本，带给用户更好的用户体验。同样在电商平台中，用户行为也成为了重要的标签符号，买过，订阅过、浏览过等标签可以唤醒用户的记忆，拉进商品与用户间的距离，有助于带来更好的点击量。3. 从众心理引导当用户无法决策时，从众心理会成为影响用户决策的重要因素。所以在电商平台，销量作为非常重要的排序条件单独展示，方便用户快捷操作。同样其他用户的收藏量、下单量、播放量数据也会对用户行为产生影响。因此这类信息广泛应用在标签设计中，积极引导用户点击和转化。标签设计的要点1. 精炼标签通常面积比较小，主要作为辅助或者补充信息，帮助用户更好的理解主体信息。因此需要精炼易懂，不适合展示大段内容。但是过于简单的标签，无法给用户足够的信息，容易让用户看不懂、产生疑惑。例如美团美食中的标签。“订”是什么含义呢？提前预订？订座？“买”又是什么含义呢？买单？买券？当然可能是因为我不经常使用美团，对标签有些不太理解。所以这些标签信息对我来说，也起不到传递信息的作用。2. 视觉突出由于面积比较小，标签通常会增加背景色，或者采用鲜亮的色彩、图形吸引用户的注意。但是在不同的产品中，视觉突出的方式也是不同的。我们可以通过以下 3 款产品的封面标签了解其中的微妙差异。腾讯视频采用的是固定背景色标签，标签本身成为了一种信息符号，重在表达产品视频的特性，强调突出醒目。在美团中，标签采用透明底色，信息以销量和好评率为主，作为菜品的辅助信息，更多考虑的是减少对图片造成干扰，辅助标签文本信息的传递。而在网易云音乐中，标签采用的是封面主色调作为底色，尽量与封面融为一体，减少对封面干扰，保证标签文本信息的有效传递。3. 一致性与差异化标签是需要遵循一致性还是差异性呢？不同的平台给出了截然不同的答案。在淘宝中，标签基本是固定在同一色系中，采用相近的视觉形式。当然首单优惠、次日达等重点服务特性则采用了明显的差异化表现形式。另外电商平台中的广告标签，更多是满足政策法规的要求，不得已而为之，因此相比价格优惠等利益点标签，明显被弱化了。而在京东中，不同类型的标签具有明显的差异化，整体形式、颜色都不一样，力求通过差异化辅助标签信息的传递。大家是如何看待标签的一致性和差异化的呢？欢迎大家评论区留言讨论~以上就是我对标签的一点思考，今天的分享到此结束。超多案例！10 个底部标签栏的设计技巧本期黑马哥将会给大家分享 10 个关于底部标签栏设计的优秀案例，开启你对底部标签栏设计的不同认知。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/tag-design
标签 代码 C++ css 中 nth-child、first-child、last-child 的使用（选中第一个，第几个，第几个到第几个，最后一个等）可以配合 li 标签使用，选择一列中的哪些标签。 1.first-child 选择列表中的第一个标签 2. last-child 选择列表中的最后一个标签li:first-child{color:red}li:last-child{color:pink} 3.nth-child(n)这里的n为数字，表示选择列表中的第n个标签例如选择第三个标签li:nth-child(3){color:pink}4.nth-child(2n) 选择列表中的偶数，选中 2、4、6…… 个标签。li:nth-child(2n){color:pink}li:nth-child(2n-1){color:pink}5.同理.nth-child(2n-1)就表示选中了奇数位标签6.选择从第4个到最后一个标签，这个4可以提换成你需要的数字li:nth-child(n+4){color:pink}7. 选择从第一个到第四个 这里的数字4也是可以根据你的需要替换的。li:nth-child(-n+4){color:pink}8.nth-last-child(3) 表示最后三个标签li:nth-last-child(3){color:pink}9.nth-last-child(3n) 表示3的倍数3.6.9……li:nth-last-child(3n){color:pink}10.nth-last-child(3n-1) 表示2.5.8…… 可以用这个设置等差数列的样式li:nth-last-child(3n-1){color:pink}希望有帮到你。
在路上
表哥
张大湿
飞翔的企鹅
落霞与孤鹜
小编
