层级 平面设计 文章 画面太单一亦或是太杂乱，是做平面版式设计时绕不开的话题。而这个难题归根到底是画面层级处理的问题，今天就来简单探讨一下~类似的平面设计干货：如何处理好文案和图片之间的层级关系，看这篇文章就够啦！今天继续为大家带来新一期的《拍一张照片，就是一幅海报》系列文章，重点跟大家讲一下如何处理好文案和图片之间的层级关系。阅读文章 > 超吸睛的动态平面设计，五个章节帮你掌握！好奇心总在驱使着人类进步，从二维到五维空间，从登陆月球到地球以外 930 亿光年的宇宙空间探索，人类的进步永不止步。阅读文章 > 平面设计课堂！超多案例总结的Banner设计指南：标题篇关于小黑盒的 Banner 设计，我们对非设计专业的同学有 4 点基本的视觉要求：安全区、图片清晰、Logo 规范、同一活动下各资源位视觉的统一。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/visual-single-messy
用户 条件 平铺 引言筛选作为一个常用的功能，在产品设计中的应用面是非常广的。比如我们去购物，会选择销量高、价格实惠并且包邮的商品，筛选区的设计就便于用户进行数据的查询和定位，可以快速查询到满意的商品。本文就筛选这个话题展开了分析和探讨。更多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
工作 优先级 紧急 大概是临近年末都会比较忙的缘故，总有同学来问我有关工作项目管理、优先级排期的问题，比如：“当面对多个设计需求以及其他工作任务并行的时候，我总是会手忙脚乱。怎么去合理安排自己手上各种事情的优先级，保证按时产出和质量呢？”在实际工作中，设计师承接的需求和工作内容大多是五花八门、繁简不一。本文会从两个方面来做经验分享：工作事件排序的优先级工作执行方式的优先级更多效率神器：这5款工具，让设计师工作效率提升 200%！（十二）大家好，这里是和你们聊设计的花生~今天为大家带来设计师效率工具第 12 期，本期推荐的 5 个神器分别是： 免费好用！阅读文章 > 一、工作事件的优先级关于工作排序，我最常用方法的是「四象限法」。即把工作按照 “紧急、不紧急、重要、不重要” 的组合分类分成四个象限，分别采取不同对策：1. 紧急且重要这类工作优先做，也值得你花时间做。那什么样的工作是紧急且重要的呢？你的判断依据可以来源于「工作性质」和「合作关系」两个方面，比如这项工作：是否是你 KPI 中要完成的重点内容；是否是重点项目的重点环节和主要问题；是否是老板布置给你且对你有高期待；是否是重点项目且需要他人配合；是否不完成就会阻碍他人工作的正常进行。以上工作都需要你重点且认真地对待。这类工作同样也可以按照「四象限法」 来做划分，横轴是工作与 KPI 的相关性，纵轴是协作人角色的重要性，按照一定顺序来完成工作：紧急且重要的工作，也可以分出优先级2. 紧急不重要这一象限的工作通常具有欺骗性，即往往因为紧急而让你感觉很重要，但实际上不应在此花费太多精力。在时间上，你也可以按照半小时为限：如果工作时间为半小时以内，就立即完成；如果工作时间为半小时以上，跟相关方做沟通，确定一个双方都认为可行的截止时间，按计划完成。你也同样可以将这类工作按照「四象限法」 来做划分，横轴是工作耗时长短，纵轴是协作人角色的重要性，按照一定顺序来完成工作：紧急不重要的工作，也可以分出优先级3. 重要不紧急对于这类工作你需要做的是制定好工作计划，比如你可以将工作拆分成以天、周、月为单位的几个阶段，规定自己每天、每周、每月要有哪些产出，按照计划去做即可。重要不紧急的工作，按照计划有序进行4. 不重要不紧急一些琐碎的工作杂事，对于这些事情要学会拒绝。比如一些不重要的会议，没必要参加时，可以让参会人同步关键信息即可。不重要不紧急的工作，找方法你可以在白板上、本子上、数据表格或看板上画出这四个象限，接到一个工作就将它放到某个象限中，做完了就划掉（会很有成就感），以此来管理工作排期：所有工作都能各就各位另有一个建议，如果自己判断不出来某一项工作是否紧急和重要，可以询问你的上级，他会比你有更清楚的认知，给你更多输入。二、执行方式 的优先级所有工作在执行的过程中，都可以遵循以下三个原则：1. 先沟通，后执行沟通永远是第一优先级。先了解工作目标、规划和预期再做执行可以少走很多弯路。2. 先他人，后自己如果有跟他人协调的工作，先解决他人的问题或给他人安排工作，在做自己应该做的工作，这样可以保证尽早交换信息，也可以让双方同时进行工作。3. 先汇报，后推进完成一个阶段或者取得了关键进展，先跟上级汇报后，再做下一步动作，小步迭代，不憋大招。以上，希望对你有帮助。欢迎关注作者微信公众号：「长弓小子」本篇来源：优设网原文地址：https://www.uisdc.com/scheduled-management
印象派 网站 美术 大家好，这里是和你们聊设计的花生~又是新的一年，大家有给自己设定新的年度计划吗？我的新年目标中有一项是系统地了解一下西方美术的发展历史，以此提高审美，扩宽自己艺术知识面。为此我开始看之前@Simon_阿文 推荐过的孙乃树老师的《西方美术欣赏》，讲得真的很棒，系统地介绍了西方美术史的发展脉络、演变过程、风格特征及代表人物，内容详略得当，孙老师的授课风格也非常生动有趣。B站有全套60讲课程视频，孙乃树老师本人也入驻了B站并上传了2021年新版课程视频，非常推荐想提升艺术审美的小伙伴都看看。《西方美术欣赏》（旧版）：https://www.bilibili.com/video/BV1A4411j7g1孙乃树老师B站主页（新版）：https://space.bilibili.com/1348664019/videoB站孙乃树老师的《西方美术欣赏》2021年新版视频《西方美术欣赏》的课程内容的确好，但对我来说比较遗憾的一点就是课程展示图片的方式比较受限。一是摄影录屏的方式让PPT内的图片展示效果很差，有时根本看不清，二是通过视频只能看到作品画了的内容，看不清笔触和色彩细节，所以在学习时我经常会自己搜索艺术家作品的高清图片，而在这个过程中我发现了一个关于学习西方艺术发展史的宝藏网站——世界艺术历史 All-art.org。All-art网站直达：http://all-art.org/contents.html（搭梯子使用图片加载速度更快）All-art是一个记录世界艺术发展史的百科书式的网站，以时间为顺序展示绘画、音乐、建筑、摄影、文学的发展过程，其中有关绘画史的介绍最为详实细致。网站首页以首页按时间顺序陈列了主要艺术风格以及流派，从史前、古希腊罗马、中世纪到文艺复兴、巴洛克、洛可可再到浪漫主义、现实主义、印象派、当代艺术和20世纪的艺术，非常全面完整。在此时间轴的基础上，网站将每个流派的主要信息列成了分级目录，方便人们查找。以印象派和后印象派这部分为例，目录首先给出的是「19世纪艺术风格地图」，然后是3个主要风格「现实主义」、「印象派」、「后印象派」，每个风格下方又列举了代表画派或代表人物。使用网页翻译后会出现层级错位，大家可以根据字号大小判断内容层级。点击进入「艺术风格地图」后，我们首先可以了解一个风格具体处于哪个的时间阶段。如下图所示，我们可以看出19世纪主要流行5个艺术风格，而印象派和后印象派处于初期。往下浏览可以看到19世纪各个画派的所有代表画家，网站以卡片的方式将他们一一罗列，点击卡片下方的名字，可以跳转了解该画家的生平简介和主要艺术作品。如果我们点击的是该风格的主标题，就能看到关于该风格的相关介绍，包括兴起原因、发展过程、主要代表人物和风格特征等。使用All-art这个网站我们可以非常直观的了解西方美术史的发展中脉络和主要风格流派，搜索相关的艺术家及作品也非常方便，不用一个个去搜索引擎里面查找，省时省力，搭配孙乃树老师的《西方美术欣赏》食用效果更佳，学习效率翻倍猛涨。首页末尾还有关于文学、音乐、建筑发展史的介绍，也是按时间顺序展示相关信息，大家也可以抽空看看。All-art.org网站“古典音乐”版块的内容在了解不同画家及其作品的过程中，我一个非常深刻的感受就是一定要找高清大图看，看到的作品细节越多，就越能深刻地感受到一位画家风格的独特。所以建议大家在画家作品的时候使用谷歌图片，它能提供更全面的艺术家作品图片，而且大部分都是来自各大博物馆或艺术公益组织资料库的高清大图。以上就是今天为大家推荐的设计宝藏网站 All-art.org，无论是学设计还是学插画都需要我们有良好的审美，而多了解西方美术史就是非常有效的提升方式，大家记得用起来~网站直达：http://all-art.org/contents.html（搭梯子使用图片加载速度更快）喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：横跨140年！了解平面设计发展历史的宝藏网站Design Reviewed大家好，这里是和你们聊设计的花生~今天给大家推荐一个收录了自 1880 年至今 140 年间平面设计海报的宝藏网站「Design Reviewed」 ，通过它既可以了解平面设计发展历史，也能从不同时期的作品中获得创作灵感，一起来看看吧~往期回顾：Design Reviewe阅读文章 > 国风参考必备！6500份高清素材的「数字敦煌开放素材库」大家好，这里是和你们聊设计的花生~近日，敦煌研究院和腾讯联合打造的“数字敦煌开放素材库”上线了，号称是内容最权威、最官方的敦煌学研究开发素材库，也是首个基于区块链的数字文化遗产开发共创平台。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/all-art
视觉 带你 物料 潮流是个圈。那些曾经流行过的设计风格，视觉元素，总会以各种各样的方式重新回来，只是视觉风格的每一次回归，都多少会带有属于当下的设计基因。这种情况在设计领域，尤其是视觉和平面设计领域，特别明显。全世界在疫情反复中煎熬了 3 年，怀旧情绪也在设计领域中开始蔓延也就不足为奇了。有氛围直接拉满、抓人眼球的的 70 和 80 年代风情：还有 90 年代风情的界面和物品：千禧年 Y2K 式的趣味和怪诞：装饰性十足的复古小贴纸里藏着的诗和远方，恰恰是对抗隔离和疫情的倔强：而带有一丝迷幻色彩、又特色十足的角色和视觉元素，又是当下让平面设计作品脱颖而出的不二法宝：那么，这类潮流平面设计作品，都是怎么设计出来，又需要掌握哪些技法呢？从元素的搭配，布局的选择，色彩的勾兑到内容元素的梳理，甚至物料的输出，内容的包装，这里有一站式的解决方案：课程原价 499 元，新课特惠价仅需 399 元，直减100元！移动端扫码报名，PC端右戳报名：https://pro.uisdc.com超全内容 + 潮流复古 + 插画加持这是一套带你重新夯实平面设计基础的课程，从高频使用的字体、构成、配色、排版入手，带你打牢平面和视觉设计的基础。结合讲师 AC 炒碗面 的大量实战经验，带你解决日常设计中最常见的问题，增加视觉表现力，提升视觉张力，强化排版丰富度和自由度。同时，这也是一套结合经验带你重塑视觉设计的课程，老师会教你从装饰性小贴纸入手，带你熟悉使用矢量设计软件绘制小元素、贴纸，到绘制贴合主题的角色和灵活机变的小场景，带你彻底提升平面设计的视觉表现力。最后，这还是一个带你自由应对各种类型设计物料的课程，从 Banner 到海报、H5 等常见的设计物料都涵盖在其中，灵活的物料拓展技巧还能帮你丰富作品集。下面的大纲，最能说明问题：课程原价 499 元，新课特惠价仅需 399 元，直减100元！移动端扫码报名，PC端右戳报名：https://pro.uisdc.com大厂人气潮流设计师：AC 炒碗面Ac 炒碗面一直都服务于充满活力的企业和平台，无论是在知乎、快手还是在陌陌，她都能让平凡的主题焕发出丰富的色彩，在日常的选题中搭建出有趣的脑洞，用灵动的色彩和灵活的排版来承载内容，借助潮酷插画来呈现丰沛的情感，靠形体和视觉抓住用户和甲方的眼球：活在潮流前线的 Ac 炒碗面 ，不仅有着她自己摸索出来的一套平面设计和插画设计方法论，而且在实战中还总结出一整套应对不同情况、不同设计物料的完整技巧和解决方案，而这也正是这套课程的底气！下面是 Ac 炒碗面 的设计作品：以下为往期学员的作业：如果你也打算将平面设计技能全方位升级一下，顺便掌握一些强化视觉的插画技能，同时强化设计运营能力、提升应聘求职时的竞争力，就不要错过今晚的秒杀：课程原价 499 元，新课特惠价仅需 399 元，直减100元！移动端扫码报名，PC端右戳报名：https://pro.uisdc.com本篇来源：优设网原文地址：https://www.uisdc.com/graphic-design-course
组件 结构 需求 什么是设计中的解构思维，解构思维怎么产生价值？本章结合 B 端场景进行了应用解读，通过对组件深入的解构理解以及对业务需求的解构设计，示意解构思维如何来解决 B 端业务需求和组件运用的问题，反映了解构思维的运作模型与价值体现。往期干货：遇到设计瓶颈无法脱身？五大章节帮你正确应对！前言：每个设计师都会遇到瓶颈，至于瓶颈期挣扎了多久各有不同。阅读文章 > 一、设计中的解构思维（解释解构）1. 广义的解构思维是什么“解构”一词富有哲学色彩，早期的出现是哲学家雅克·德里达不满西方几千年来的传统哲学思想，而提出的一种批判方法，是指对一切存在事物或现象的原因及本源研究，得出的稳定结构及其中心进行消解，每一次解构都表现为结构的中断、分裂或解体，但是每一次解构的结果又都是产生新的结构。解构具有消除二元对立、打破固有传统、去中心化、多元开放、包容差异等特点，对当下世界的多元化包容性都带来不小影响。而其思想内涵也在不同行业中生根发芽，在服装、建筑、平面、影视行业中处处可见解构，以此为根源，20 世纪 80 年代“解构主义”作为一种设计风格的探索开始兴起，解构主义用分解的观念，强调打碎，叠加，重组，重视个体，不见本身，反对中心化或总体统一而带来的支离破碎和不确定性（例如肤色阶级的种族歧视、早期重男轻女封建思想等）。如何理解呢？“解”有分解、拆解、理解的意思，而“构”具有结构、构造的意思，字面意思就是对事物的内容结构进行剖析。通常解构被认为是对传统认知里的结构进行质疑和破碎重组，并建立具有新意义的结构。例如你一天放了 7 个不同声音的屁，通过解构，我听到的不再是屁，而是音符，经过谱曲，我成就了一首。好的翻译也可以视为解构，这个过程就是译者对本质含义进行理解并使用新的语言结构释义，其表达的本质没有变，却拥有了更为生动明了的译文。2. 体验设计中的解构思维一般结构形成表象，表象反应本质，但需求的构成是由其他本质推动的，这些本质既能形成 A 结构，就必定能造就 B 结构，所以解构主义不认为结构与表象能代表本质，设计中解构思维可以帮助我们跳出传统的条条框框，就好像在说时代变了，你那套不行了。体验设计的范畴中，我将解构思维简单概括为：不停留于结构表象，敢于质疑、深入本质，再创结构，是一种打破设计相关秩序然后再创造更为合理秩序的思维主义，是对本质的深入与多元化的理解，而体验设计中的本质常常是以需求作为出发点，以用户和场景作为合理性的准则，以解构出具有体验或商业价值的方案。一把舒适的椅子如何设计，从人体工学椅子到懒人沙发，依旧是一个不错的解构案例，原来舒适的椅子可以这样。3. 解构与拆解、原子理论的区别拆解是对某个事物按照一定逻辑或结构进行分解拆除，目的是获取更全面或更深入的信息与理解，从而加深对本质的理解，拆解并不影响事物本身的结构或中心，而解构主义则是出于对结构或中心的质疑展开的，并试图找到新的侧重点或视角来理解本质，目的就是建立具有意义的新结构，同时在建构的过程中，还会用到更替、融入、结合、间离等手法，而并非是线性的拆解组合，在体验设计的应用中，我认为解构有益于深入研究，以及跳脱竞品或传统结构设计的思维局限。原子理论在 B 端组件系统中有深入的应用，像搭积木一样，重心是找到可以复用的最小单元，然后利用这些单元组装出更复杂更庞大的结构体，并且对这些单元的资源进行重复性利用，以减少生产过程中带来的资产冗余、不一致、低效率等核心问题。侧重点是交互层与功能逻辑，是一种工具化、模块化的思维，主要是业务解构后进行 B 端交互页面搭建的工具。但是在传统 B 端业务设计的背景下，解构思维可以配合业务情况对组件传统的“组织”及以上的结构进行破坏重组，以诞生新的结构并更好契合业务。二、再说说 B 端组件系统（解构对象）1. 组件系统的诞生背景B 端向来是以业务操作为主，而在繁琐的操作过程中，尽管界面或场景不同，但是有很多操作行为或操作内容具备较高的一致性，为了减少对应资源的反复设计与开发带来的时间浪费与资源冗余，这些对应常见的交互组件被系统化了，同时在不断探索更基础或高频率通用的组件单元，以便后续的研发设计中可以随时调用，于是组件系统诞生了。2. 组件系统的核心价值从内部研发视角来看，已经提到的减少资源冗余与效率问题便是核心价值了，从界面设计与品牌调性来看，使得产品样貌与操作更为统一规范，便于资源管控。而从外部视角来看，一套开源的设计系统还能赋予生态上的改变，一套基础完善的 B 端组件系统可以支撑内部庞大的业务的同时，也可以赋予友商或帮助其他小微企业研发中后台，对于业务生态、研发生态都有好处，收获口碑的同时，是一种文化价值传递，也是影响力的渗透。3. 什么时候搭 B 端组件系统从技术难度工作量以及研发周期来看，显然不能短期获取回报，往往只能在业务生态需求量大、涉猎业务复杂或是发展迅速才有较好的价值体现，当然了不差钱为行业生态做贡献也可以啊，尽管如此但也不是说不建议设计组件系统，具体也要看研发背景与组件系统搭建程度；① 研发背景参考要素大部分中小型企业，业务不是特别复杂，研发资源很有限，那就直接考虑开源组件系统好了，用现成的真的便捷太多，并且也不会涉及到到数据安全的问题。如果要搭建组件系统，那就需要考虑自身研发资源(时间、人力、成本)硬不硬，然后就是业务复杂程度是否大多开源的不能轻易满足，这两点很重要。② 组件搭建程度情况第一层实现设计产出加工件：借助 Sketch、Figma 等主流 UI 设计软件搭建界面常用的组件库，用于内部设计资源流通，快速搭建 UI 界面，保证界面组件统一性和效率保障，搭建起步不要考虑全面，先从最基础最常用的开始搭建。第二层沉淀对应代码库：设计师有了可复用的设计组件还是比较初步的，重要的是研发工程师对可复用的组件开始沉淀，并建立资源库，研发过程中可能会伴随业务需求一起完善，对于已研发的组件可以同步记载完善交互，然后规划版本逐步完善。第三层设计代码一体化：设计与研发的组件完成版本一致，实现组件从视觉效果到交互效果反馈完整，状态齐全，引入即用，实现真正意义上的组件系统。③ 进行系统二开维护基于业务情况与开源组件系统进行二次开发，来建立沉淀自家的组件系统，如果这么做首先考虑的还是研发背景情况，进行二开可以节省不少时间，并且可以有更多差异化定制化的空间，需要注意的是目标二开系统的灵活性、扩展性等核心问题。三、用解构思维深度理解组件（开始表演）1. 从表象到数据背后我们通过 B 端中后台的表象开始解构，映入眼帘的往往是各种功能的导航、操作入口、信息反馈，很清晰很明了，各种操作都被组件结构所包揽并示意。似乎已经看到了组件的作用，但又好像看见的还不够，我们再次深入，组件的背后是便于操作，而操作的背后是什么，似乎很接近了，我们结合界面交互的构成结构换个视角看问题，如果没有这些组件，任务还能进行吗？显然具备代码能力是可以的（毕竟有些开发天天就是对数据 CRUD，不理解就问研发 [手动狗头]），那么现在看来组件的作用就清晰明了呢，“组件是提供间接的代码操作工具，便于我们通过界面交互来控制代码数据的交互，帮助减少操作的门槛与理解成本”，我把这理解为组件的底层价值。2. 解构组件的功能逻辑组件本身注重的是行为逻辑，即交互逻辑，非业务逻辑，是业务逻辑构件的工具。从交互视角切入，基本的交互原则是组件本身必备的，要易于理解、易于操作、及时反馈，而组件运作的本质逻辑我理解为对数据的约束、反馈与数据交互，什么意思呢？你听我说人话：① 约束作用看看以下图片中的举例，直观感受一下组件约束能力的价值。第一组是没有注重组件约束功能的，而第二组是采用了合适的组件约束能力后的效果；通过以上对比，不难看出输入输出的信息都得以约束和规范化，从数据、从业务、从浏览都产生了极佳的效果。而在不同场景下这些约束会有差异，为的是更好满足业务需求，因此就诞生了具有不同约束能力的各种组件，这里再枚举一些例子；② 反馈作用反馈即通过数据加工产生更容易理解的表象，以及在操作后的提示反馈。反馈可以告诉我们有什么是什么、帮助理解这些信息有多少类目、理解这些信息有什么特征、理解这些信息量情况、理解此处有何操作等，尽管相同作用的反馈可能有不一样的样式，但这并不影响统一性，差异化只是满足不同场景或不同容器特征而已，例如会话窗口通知与文本 tips 同样是信息反馈，那么显然会话窗口更加重视信息接收程度，出现场景更加正式醒目；而这整个过程的反馈基本上围绕“映射”原理进行，从代码层获取信息框架再通过界面释义，就像是一段巧妙而精准的翻译一般，业务是否吃透、组件用的是否得当、体验是否良好，都要看这“映射”的功夫下足了没有；③ 数据交互具备数据交互能力，即可以通过组件对界面上的数据发生变化以达成任务操作的目的，说人话就是可以直接帮助我们控制界面元素和数据增删改查，例如搜索就是利用组件输入查询的关键词，并通过按钮或键盘发起数据索引，最终获取反馈信息帮助我们完成任务。B 端数据交互的类型相对是比较简单的，主要包含了富文本、图片、动图、音频、视频为主，复杂的地方在于特殊格式的兼容和深入编辑的需要，因为要有指定的解码器支持文件的显示以及操作存储，这也就意味着可能需要制作新的配套组件，或是引入其他的组件进行二开，例如代码编辑器大多 B 端公开系统是没有提供的，这就需要新开发或新引入。3. B 端组件的同质化现象在第一台携带操作界面的计算机诞生时组件就有了，时过境迁，计算机界面的交互组件也配套设备输入输出的特征逐步定型，对比当下主流的开源 B 端组件库，不难发现基础的组件只存在细微交互动画与视觉差异，功能逻辑基本一致，这是源于多年来计算机的快速发展沉淀下来的人机交互认知与共识，一切看似有标准但又没有绝对的标准，约定成俗一般。尽管 B 端组件还有一定个性化或差异化的空间，但大多也只是视觉表现层的一些调整，并且面对市场大众化的组件认知与趋势，很难做出别致的差异化了；也许在 B 端组件发展的道路上，只会同质化越来越严重吧，没有新型业务需求驱动，可能现有的基本组件就定型了，而市场上的组件系统也会被广泛的应用与习惯，当广大用户养成了认知与操作习惯后，就更没办法对组件做出差异化了，这会违背大多用户的认知与操作习惯，所以对组件本身进行解构创新的价值不大，解构的重点是功能用途的深入理解与应用。4. 组件对设计师的价值B 端重业务、重效率、少个性，而 B 端组件同质化正在加剧，那么设计师也就没有必要去过分考虑组件的差异化或个性化，聚焦新型业务的交互组件或是业务需求设计才应该是众望所归，而组件系统的概念与组件的理解应用也应该成为设计师的标配能力，“组件”一定是 B 端设计师的重要价值，却一定不能是核心价值，所以了也不要老是说 B 端的设计师们就是在搬组件了，这墙砌的不好吗？四、解构思维让组件得心应手1. 用好组件，先从需求解构开始不同组件的功能用途首先要理解，至于使用什么组件取决于需求的数据交互以及约束条件和反馈需要，而这些条件均来源于需求，这个过程中，要发挥好解构思维的精髓，那么第一件事就是说“这是个伪需求”，一定不是思考如何执行需求，而是从质疑需求开始，接着就会开始对需求拆解厘清，当需求的结构被你摸清时，你就能感知到需求是否合理，是否有更优方案。然后就可以跟需求方说说你的观点，我早些时候也是得益于这种思维模式，能够加深对需求的理解，同时跟产品有来有往，对方也更愿意主动来探讨，当然呢，需求方是不是傻*心里也就更有数了。要开始需求解构呢，就要先清晰需求的结构，一般来讲即构成需求的背景、场景、人群、流程、目标、模式等问题，然后拆解分析找到关键因素攻破。当我们完成需求解构后，就需要进一步通过对需求的流程、信息、关键词进行提炼，以匹配需求实现所需要的组件，匹配的本质是依据信息特征和功能要求，即信息的图文视频音频类型、格式兼容属性、数量单位、映射反馈、逻辑含义、约束条件等关键词，整个解构过程可以用以下这个模型来概括；案例一：组件区块解构案例中，在这套传统数据表格里，我们需要添加部分微型数据图表信息，提供给部分角色查看和比较前后行的数据差异，那么是你会如何进行解决呢？传统选手使用添加“查看图表”操作，通过点击后利用抽屉或弹窗承载图表数据；并在图表显示面板上补充了切换上下条数据用作比较；解构选手把传统表格给改了，采用了可扩展表格，并将数据图表以卡片的形式嵌入了表格，通过点击展开查询图表数据，可以随时展开和收起数据的图表信息。两者间有何差异：传统往往是做加法，解构则是对现有结构做改变。这个过程中解构的是表格扩展数据的各种可能性，以及需求本身的目的是什么，而结合起来找到一种新的表格方式来实现需求。尽管后者方案表格代码需要做更多调整，但是优势显而易见的，在保障能够实现的情况下，约束了表格横向的宽度延伸、展开数据支持二次加载减少了请求并发、支持多行数据展开图表对比，尽可能减少了操作步骤。案例二：解构树状列表需求需求简述；要做一个树状结构的表格，用于呈现控制节点的基本信息和关系示意，主要是提供给节点管理角色使用，构成的主要信息框架如下：传统设计中，提供设计的关键信息与关键词基本已取得，我们可以根据需求开始构建页面了，第一步搭建支持展开收起的表格，用于反馈节点的层级关系，表格 Title 主要由节点名称、描述、Owner 名称、工号、部门抬头、分布域、节点开关构成即可，开关进行操作时进行二次确认弹窗确认即可，大致原型图如下：解构思维怎么设计呢？第一步质疑结构：为什么是树状，为什么是表格，这个结构主要包含了什么，重点是什么？表象反映出了什么样的本质？这样带来了什么问题？第二步破碎拆解：带着问题对结构拆解，对构成的各方面深入理解，找出新的发力点以及更全面的信息。——需求结构特征：树状结构、信息显示、开关操作——需求本身的问题：信息优先级、节点数量规模、默认显示节点、是否支持过滤、关联数据或功能情况——需求结构化：需求对应的场景、参与和使用的角色、服务的作用影响、底层逻辑与流程、交互的信息框架当然了，需求结构化的方法并不是固定的，可以如上将构成的因素厘清，也可以通过服务蓝图或运作模式来将不同阶段进行拆分和理解。——拆解结构深入理解：对结构构成的多方面进行思考，找到关键因素或核心价值，并重新审视结构，来帮助构思新的需求方案。以上需求通过对需求服务对象和需求方进一步沟通，了解到节点管理者更关注树状结构的关系、节点的名称、描述、分布域信息，然后才是负责人跟开关操作，并且节点分为三大类型，有时候会先注意是什么类型，然后办公时会根据名称路径去找想要指定操作的节点，其实节点数量一般在10-30个之间，并且一般都是从第二级开始操作，后续数量上也不会怎么变化，节点与节点之间的互通则由开关直接影响...第三步重塑结构：经过解构我们将构成聚焦放在节点管理员身上，并获取了更为全面和有价值的信息，接着我们进入建构阶段，思考如何更好的满足节点的层级与流通性，当前现有的数据支撑和遗漏可用数据有哪些，数据的显示并不是难点，我们开始思考哪些组件区块具备层级关系与流通状态示意能力，在呈现时，如何更好服务节点管理者的使用场景，带着这些问题我们开始重新对需求进行设计，以及匹配合适的组件搭建原型。第四步匹配资源：放弃了树状表格，但是延续了树状结构特征，对于节点的类型重新补充了进来，而信息也重新调整了优先级，使得整个需求结构更加完善合理，原型阶段，我们通过拓扑结构来取代了表格，支持子集展开收起，并且以卡片来承载节点信息与操作，节点之间的卡片也用不同颜色的线条示意流通性，在有限节点中，也更好的突出了个体，默认也直接显示完所有二级节点，大致原型图如下：案例小结对于解构思维应当施加一定的灵活性，要识别是否具有深入和颠覆的解构价值，没必要过度的解构，解构以后的建构也很具有挑战性，你要思考优化结构赋予价值。另外有时候经过解构思考后，结论与原本的需求结构差异不大，甚至你也认同原本的方案，这并不冲突，这说明原本的设计者也是严谨或靠谱的，并且深入理解的过程是宝贵的，在体验设计的范畴，解构思维应该是为我们提供别样的视角，帮助我们深入本质解决问题，并不是为了生成新的结构而解构。五、解构思维对 B 端的价值1. 突破对传统结构的思维局限产品设计中，常常开玩笑说就是互相抄来抄去，要是竞品毙光了，都不知道接下去怎么设计了，很多时候我们看问题常常凭借经验或直觉看表象，未能深入或大胆的批判人家的不好，对权威提出质疑，而解构思维正好反其道行之，以使得我们对竞品分析或用户研究后不会拿出一个显而易见的结果，却没有深入的结论做业务抓手。解构思维可以去中心化去权威化，帮助我们深入并注意到构成个体的价值，以为业务带来更多的可能性。2. 业务优化或改版的得力助手看起来没什么问题，或是对方案没有底气，那就试着解构一下，先把页面里的业务拆出来，在把业务之间的关系和逻辑才拆出来，当你解的足够清晰明了时，面对不同场景或角色特征，需求优化的方向就开始清晰了，解构思维能让你变得游刃有余，是业务分析和理解的一把好手。3. 深度理解组件原理与应用以前总是问这个组件怎么用，其实应用解构思维后，才发现原来是自己太懒了，没有进一步的对组件进行思考和理解，其实运用解构思维想想人家组件为什么这么做、还能怎么做、什么场景下用，马上就通透了，并且对于组件的模块化改造也是有着相当的作用。六、结语早些时候，我以为的解构，就是对某个结构进行拆解加深理解，而之后又意识到还要用一些颠倒、反转、重组、叠加等一些列手段进行建构，目的是形成一个不同于以往的结构，再后来才发现解构也没那么简单，解构主义更注重的是对传统观念中的结构发起的质疑，从而引发新的深思，将本质不再停留在结构与表象本身，并试图找到新的或其他合理的点进行重新建构，最终带来不一样的结构或价值体现，这种例子也在当今多元化的世界处处可见，稍加灵活的应用，解构也会是不错的工具。当然了解构已经在各行各业开出了不一样的花，怎么理解怎么运用会有所不同，这里主要也是分享了在体验设计领域中我对解构思维的理解与运用，算是抛砖引玉吧，你有看见什么好例子吗？评论里告诉我，我们一起解构解构本篇来源：优设网原文地址：https://www.uisdc.com/deconstruct
用户 你可以 产品 作为交互设计师，与产品、开发等同事的沟通环节必不可少。你是否也经常会遇到这样的问题：开发问我主色为什么选择这个颜色？为啥不直接用大厂组件库的主色？我们作为设计师觉得方案很好，但是运营同事觉得这种设计改动意义不大，该怎么才能说服他？我该怎么用专业的方法来说服其他非专业的同事，某些功能的交互方式是更合理的？本文会从「自我论证」和「换位思考」两个方面，帮助你建立说服他人的思维方式。一、自我论证想要说服别人，先要说服自己。在他人质疑你之前，你可以先学会「质疑自己」，这意味着你的产出设计内容需要有理有据，而并非一时兴起的主观臆断。有条理的陈述你最初的设计动机和设计依据，可以分为两个部分：1. 整理设计动机结合产品的需求、用户群体特征和公司的发展需要，总结为什么要做设计优化。我们曾经为大家介绍过几个小而美的用户数据分析方法，以此作为你分析产品的方法和依据。设计师如何低成本获取用户数据？我总结了3个方法！在这个信息数据化时代，作为交互体验设计师的你一定遇到过这样的问题： 在复杂的 B 端产品中，由于企业级用户的特殊性，很难获取产品落地后的数据，难以完成设计验证； 可用性测试、用户访谈等测试工具成本过高，开展实施比较困难； 刚刚完成上线的新产品，如何更快更好地收集用户数据和反阅读文章 > 案例：比如对于「为什么选择颜色 A 而不选择颜色 B」这类问题，你可以：结合行业/产品背景：了解行业大背景、整体风格，比如美妆行业和科技行业的色彩调性就大不相同。结合品牌特性：与企业 / 产品的品牌特性相呼应，沿用 logo 的配色方案，可以在一定程度上保持品牌对于用户心智的一致性。分析用户群体：通过对企业 / 产品的用户群进行分析，找出群体特点、喜好和性格偏好，也会影响你的色彩选择。2. 寻找理论背书提供有足够分量的理论支撑。你可以使用经典的、被行业广泛认可的设计理论或设计标准为你的设计方案做背书。他人能够持续提出质疑，有时也是因为你提供的依据不充足或不够有分量。案例：继续上文「为什么选择颜色 A 而不选择颜色 B」这类问题，你可以：参考 WCAG 的无障碍设计标准：在对比度合适的范围中，颜色在搭配场景中得分越高，清晰度越高，越有助于视障人士的阅读；应用色彩学的具体理论：通过邻近色、对比色、互补色、衍生色、明度、饱和度等概念，比较和分析两种颜色的差别和应用上带来的不同感受；二、换位思考这里说的换位思考，是要思考两个方面的问题：一是他人的目的，即对方为什么会问这个问题？为什么会对你的方案提出质疑？二是对他人的影响，即你的设计结论会对他人的工作带来什么影响？是否会为他人带来超过预期的工作量负担？基于这两点出发，下面几个方法可以帮助我们更有效地提升说服力：1. 有针对性地寻找设计依据你可以尝试判断出他人的问题类型，有的是单纯的想要了解更多的专业知识；有的则是基于自己的行业经验作出的判断。在你做解释之前，充分了解他人产生疑问的原因，可以帮助你更有针对性地寻找理论和依据。2. 站在多方视角，分析设计优势通常来说，一场交互评审涉及到产品、前端、后端等多方人员参与，除了你的设计内容自身合理之外，你也可以尝试站在其他相关方的角度，进行方案的优势陈述。这样做可以让他人更容易和你统一战线。案例：比如对于「为什么选择组件 A 而不选择组件 B」这类问题，你可以：站在前端开发的立场，你的理由可能是：组件 A 是在已有组件的基础上做的优化方案，开发起来更高效；或者因为组件 A 以后还会有应用场景，这次设计和开发之后，可以就此沉淀出新的组件，可以高频复用等等。站在业务方的立场，你的理由可能是：组件 A 这样的交互方式可以激发起用户兴趣，提升点击率和下单率；或者这样的组件很常见，符合用户对于产品的预期，用户就可以把更多的精力放在产品内容上等等。3. 权衡成本，提供备选方案评审时，你有可能发现设计改动会带来他人工作成本的增加，这时他人对你的质疑，更多是一种表达反对的自我保护的方式。这个时候，适当做出让步，如果能够提供与现有设计相近的、工作量低的备选方案，通过的概率也会增加。三、实用建议还有几个接地气的注意事项，帮助你更有效地与他人协作和沟通：1. 你觉得你自己专业，和别人觉得你专业，是两回事。很多同学认为自己是设计师，出设计方案当然是自己更专业。但是说服他人，重要的不是你觉得自己专业，而是别人是否觉得你足够专业。在语言表达和设计原理的阐述上，你要想想如何让他人觉得你很专业和可靠。2. 适当的让步和妥协，并不意味着没有原则。其实评审中「谁说服谁」并不重要，重要的是「方案最终能否在预期的时间点完成上线」或者「问题是否能得到解决」。其实大多数情况下，设计方案本身没有绝对的优劣之分，更多的还是要平衡多方的因素，包括时间成本、人力成本和资源等等。因此从单一的设计视角，无法 100% 确定我们的方案就是最优解。多听听他人的意见，这个时候适当的折中和妥协，并不意味着没有原则。有时他人的意见和问题也会给你带来新的设计思路。3. 实时沟通，征求他人意见，而非通知结论。在设计过程中，多注意信息的实时同步和进展上的沟通。很多工作都需要各方通力协作，大家是一个团队，需要尽可能消除信息差。更多情况下，你抛出来与大家讨论的设计内容，应该是方案，而不是结论。在过程中随时征求他人的意见，也是一种对他人的尊重。以上，希望对你有启发。7个接地气的实战经验，帮你学会做用户问卷！用户问卷是交互设计师工作中常用的设计工具。阅读文章 > 设计师如何低成本获取用户数据？我总结了3个方法！在这个信息数据化时代，作为交互体验设计师的你一定遇到过这样的问题： 在复杂的 B 端产品中，由于企业级用户的特殊性，很难获取产品落地后的数据，难以完成设计验证； 可用性测试、用户访谈等测试工具成本过高，开展实施比较困难； 刚刚完成上线的新产品，如何更快更好地收集用户数据和反阅读文章 > 欢迎关注作者微信公众号：「长弓小子」本篇来源：优设网原文地址：https://www.uisdc.com/design-solution-communication-skills
插图 官方 软件 大家好，这里是和你们聊设计的花生~今天为大家推荐 2 款利用 AI 技术为线稿快速上色，生成高质量二次元风格插图的工具 Style2Paints V5 模型和 V4.5 软件，一起来看看吧~一、AI 模型：Style2Paints V5Style2Paints V5 是一个最近才推出的草稿到插图扩散模型，可以根据上传的线稿或草稿生成高质量的二次元风格插图。据官方介绍其模型参数数量是 Stable Diffusion V2 的 1.42 倍，包含 Dorothy 和 Alice 两种模式，适用于不同的线稿类型。Dorothy 则会严格按照给出的线稿进行上色，适合线稿精度较高、想迅速预览多种上色效果的作品。下图是给定 AI 提示词后 Dorothy 生成结果：图片来源：Style2Paints V5 官方 GitHub 主页。提示词：1 girl, masterpiece, best quality, ultra-detailed, illustration, disheveled hair（1 个女孩，杰作，最好的质量，超详细，插图，凌乱的头发）其他 Dorothy 的生成图：图片来源：Style2Paints V5 官方 GitHub 主页。另一个模式 Alice 的上色自由度比较高，她不会严格按你的线稿来上色，会有比较大的 AI 加工成分。也就是说即使给你给出的是儿童简笔画般的线稿，她也能她它变成质量相当高的二次元风格插图。下面是给定与前面一样的 AI 提示词后，Alice 根据左上角的线稿生成结果，可以看到由于线稿比较潦草，生成的人物的动作会有不同角度的差别，而且草稿没有画完整也不会影响最终的生成质量。图片来源：Style2Paints V5 官方 GitHub 主页。提示词：1 girl, masterpiece, best quality, ultra-detailed, illustration, disheveled hair（1 个女孩，杰作，最好的质量，超详细，插图，凌乱的头发）在 Alice 模式下可以使用提示词对画面的具体内容进行规定，比如指定背景，或指定对人物的服装发型细节。据官方介绍，他们现在还在研发一种彩色涂鸦技术，即使用画笔在图片中的任意部分抹上一点颜色，AI 就能自动识别并在该区域生成同一种色调。不过想精准控制上色区域并非易事，研发人员还在对该技术进行调试。虽然 Style2paints V5 模型目前还没有开放，但就官方发布的预览信息来看，它无疑将会成为二次元画师的有力助手。特别是 Dorothy 模式，可以快速为画师的高精度线稿提供多种上色版本，让画师可以提前预览作品的最终完成效果，在此基础上确定自己的上色方向。用嘴上色！一键让黑白图像转彩色的AI神器「Palette.fm」大家好，这里是和你们聊设计的花生~之前为大家介绍了很多 AI 图像生成工具，如 Midjourney 和 Dream studio，它们可以通过文本描述生成对应的图像内容，且生成的图像质量很高。阅读文章 > 二、AI 驱动的免费上色软件：Style2Paints V4.5Style2paints V4.5 是一款免费的线稿上色工具。二次元风格插画的一般上色流程为素描 填色/平涂 渐变/细节添加 阴影，每一步完成后生成的图层文件分别为线条图层、平涂颜色层、渐变色层和阴影层。V4.5软件正是可以模拟这种上色流程，生成对应的分层结果，并输出PSD文件。V4.5 官网： https://github.com/lllyasviel/style2paintsV4.5 软件使用教程： https://style2paints.github.io/V4.5 软件百度网盘下载： https://pan.baidu.com/s/15xCm1jRVeHipHkiB3n1vzA使用 V4.5 生成的上色图层，图片来源 V4.5 官网将线稿上传至软件后，经过简单的操作就能生成完整的上色效果。用户还可以在画面上放置提示点用来指导 AI 在对应的区域再次上色，调整好后输出分层文件，就可以再导入绘画软件内进行加工。V4.5 软件界面截图，图片来源 V4.5 教程官网以上就是为大家推荐的二次元插图线稿上色神器 Style2paints，其中 V5 为还在开发的免费 AI 模型，官方目前放出了预览版本，估计不久就可以看的成品，感兴趣的小伙伴可以关注官方推特；V4.5 是 AI 驱动的免费上色软件，能模拟人类的上色流程并输出分层 PSD 文件，有需要的小伙伴可以自行下载。Style2paints 官方 Twitter： https://twitter.com/lvminzhang/with_replie （需搭梯子）V5 模型官方 Github 主页： https://github.com/lllyasviel/style2paints/tree/master/V5_preview （预览版本，模型尚未开放，需搭梯子访问）V4.5 软件百度网盘下载： https://pan.baidu.com/s/15xCm1jRVeHipHkiB3n1vzAV4.5 软件使用教程： https://style2paints.github.io/如果你喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：2023年，让这20款AI工具帮你更高效地完成工作~2023年，让这20款AI工具帮你更高效的完成工作~大家好，这里是和你们聊设计的花生~2022年是AI技术大发展的一年，我都快记不清为大家推荐多少种AI工具了。阅读文章 > 这5款工具，让设计师工作效率提升 200%！（十二）大家好，这里是和你们聊设计的花生~今天为大家带来设计师效率工具第 12 期，本期推荐的 5 个神器分别是： 免费好用！阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/style2paints
设计师 我觉得 能力 全栈设计师已然不是一个新的概念，然而全栈设计师到底是怎么样的？如何进行他们的工作？我们是否可以简单地认为一名全栈设计师是一名多才多艺的设计师？可能大多数从业者仍不甚了解。UXD 团队内对全栈设计师的培养正如火如荼地进行着，我们本次采访了 4 位不同资历的设计师，从不同角度为你解答如何做一名全栈设计师。更多职场干货：如何面对职业未来？腾讯资深设计师的6个职场思考！最近我学到了一些经验，也想清楚了一些事情。阅读文章 > 一、采访对象：大晟 视觉设计师Q：你觉得什么是全栈设计师？A：全栈设计师往大了说，是拥有完成一个项目的所有能力的角色。是从机会点的挖掘，到对策略概念的制定，到设计的产出，到最后的开发执行的一个全能角色。我们刚开始培养全栈设计师，对“全栈”的认知可能暂时局限在设计或开发这些我们熟悉的互联网领域里。打开了说，我觉得很多艺术家也可以说是“全栈”，比如说大地艺术家克里斯托夫妇，他们在做“包裹德国国会大厦”项目时，花费二十四年去游说政府，同时花费大量的时间解决复杂的技术，资金，人力，工程等事项上。这些在外人看来，可能都不是艺术家要做的事，但是他们其实要花大量的时间在这些方面上，要去做很多艺术之外的事情。Q：你现在的主要工作是什么？A：我的工作内容是比较丰富的，有品牌方面的设计，有运营视觉的设计，有 IP 运营的探索，再到通过视频完成不同项目的包装推广等。有很多项目都需要从概念设定开始做，然后设计执行，再到推广等环节。一开始做设计其实也只专注于“画图”这一件事儿上，少有关心为什么要做，设计稿如何落地。其实我觉得只要是有追求的设计师后来一定会关注到整个流程、整个项目的方方面面，会做很多“画图”以外的工作，才有机会去包裹国会大厦。不想包裹国会大厦的设计师，不是好的设计师。哈哈哈哈。Q：经过这么久的沉淀，你想继续丰富自己的设计深度还是设计广度？A: 作为一个设计师，肯定有你最擅长的地方，有的人可能特别擅长于沟通，特别擅长于去协调；有的人他可能非常他的天赋可能在于整个概念的构建，有能力讲好整个故事；有的人可能在视觉语言的表达能力上特别强。我觉得首先应该抓住自己最为擅长的部分，会继续去挖掘自己擅长的地方。在这个基础上，再去对整个流程进行了解和拓展。Q：对于年轻的设计师你有什么建议？A：需要先去发现自己擅长的是什么，建议从兴趣出发，当你想包裹国会大厦的时候，你其实自然而然就会去了解整个流程上的所有东西。二、采访对象：迪迪 交互设计师Q：你觉得什么是全栈设计师？A: 我觉得全栈设计师不光要在职能上覆盖各个流程环节，在能力上也能胜任每个环节的工作，甚至可以在某 1~2 个环节上特别擅长，在整个链路上发挥自己的能力。Q：为什么会选择转型全栈设计师？A：其实我不是为了提升能力而去转型，而是为了更好的了解我的合作方的工作的内容，更多的站在对方的角度去考虑我的设计。比如说我之前做交互的时候会画低保真的稿子，因为我最后只要截出一张图来就可以。包括画布尺寸之类的我都没有特别关注，布局、比例等很多细节也没有考虑。所以经常出现稿子做出来以后，UI 同学的产出会跟设计的界面不太一样的情况。之后我就在思考为什么我不能在这个环节就把它做好，在做交互图时就解决这些问题，减少 UI 同学的工作量或者交互的二次调整和设计。然后再比如说可以多了解一下 UI 方面的工作，还能提升一些视觉上的能力，换一下视角对我来说还挺好的。我本身视觉能力不是非常强，我觉得也可以跳出舒适区，去感受一下相对来说不太擅长的东西，我觉得也挺好的。Q：你现在的主要工作是什么？A：我现在的主要工作就是挑选一些比较适合做全栈设计的项目，从跟产品沟通、交互设计、UI 设计，最后跟进产品和技术同学去做 UI 界面细节的调整。Q：经过这么久的沉淀，你想继续丰富自己的设计深度还是设计广度？A: 我觉得在我现在这个阶段可能深度比较重要，因为我觉得能力很平均的人有很多，大家每一个方面都可以去尝试，但是如果想要让自己有突出的表现，还是要靠自己对某一个维度有深入的了解或者有特别强的一项能力。想要专精我认为是特别难的一件事，因为你要很坚持，你要一直努力的去围绕这个维度找各种不同的方向持续深入。我觉得其实对我来说其实还是挺难的，所以我觉得对我来说深度可能还比较重要一点。Q：对于设计和工作你未来目标是什么？A：我的未来目标就是先成为有广度的设计师，然后再成为有深度的设计师。也希望能够体验非交互设计师的一些岗位，比如体验设计师，会跟现在的工作内容有一些不一样，也能逼着自己去弥补一些短板。三、采访对象：李洋 UI 设计师Q：你觉得什么是全栈设计师？A：全栈设计师不能把它单纯的理解为全能的设计师，比如对 UI 设计师来说单单解决了一个交互的问题、解决一个设计问题、解决一个运营问题，就是全栈设计师了。全栈最早是阿里提出来的，定义全栈是跨界的，脱离了设计本身去做事情，比如产品研发，甚至说这种 PMO 的项目管理了。全栈设计师，其实是跨界能力的体现，你可以把它定义为用更广的视角来看待同一件事情，然后通过你不同的能力去解决和输出不同的问题，提供不同的解决方案和思路。Q：你现在的主要工作是什么？A：目前负责斑马的项目，以及二手车的基础体验。Q：经过这么久的沉淀，你想继续丰富自己的设计深度还是设计广度？A：如果是面向咱们整个团队的设计师来说，我主张的是先有深度再有广度。举个简单的例子，我们现在正在做某项设计需求，需求的本身你都做不好，那如何向上或向下的评断我的这个产品整体是怎么样的，我的业务是怎么样的，我的底层的架构是什么样子的呢？看不到，当你不了解这个业务的时候，你横向更看不到我业务的发展是什么，后续的迭代方向是什么。这时候你说我去培养一个全栈，理解我的研发能力，理解我的测试能力，理解我的产品能力等，是不太现实的。等于是一个很瘦弱的躯体外面包裹一个很大的空壳，它支撑不了你整个概念，所以说我主张是先有深度再有广度。Q：对于设计和工作你未来目标是什么？A：我的感觉是目标可以分两个：一个是业务支持方面，如何让业务变得更好；二是依托这部分的能力，怎么样能覆盖到更多的人，影响到更多的人。咱们现在团队都是在互联网平台的设计师，可能大家都会站在现有的角度去想我要做成一件什么事。但是就像第一个问题所说的，大家对全栈设计师的理解，可能是认为就是全能的，但其实全栈的底层还是综合解决问题的能力。所以说我想说以我的一些思路和方法能够覆盖到更多的同学，然后让他们真正的意识到说我怎么样去做这个事情。Q：对于年轻的设计师你有什么建议？A：不要浮躁，也不要摆烂。首先浮躁会让你在选择方向的时候选择不定。也不要盲目跟风，之前有一段时间 C4D 和 Blender 火了，大家都开始学。学习本身是没问题的，但是你首先要明白你自己为什么学，不要让浮躁和盲目影响到你的一些判断。选择自己需要的，这个是最重要的。四、采访对象：大哥 视觉设计师Q：你觉得什么是全栈设计师？A：其实刚刚知道全栈设计师这个话题的时候，发现它可能是设计师在设计的本职工作以外向前向后的延伸，比如设计前期的产品策略以及活动策略能力和设计流程后的前端代码能力。我理解其实在各个设计领域都可以把全栈称为全链路，我觉得全链路在全栈基础上的一种表达，全链路它可能指的不光是解决设计本身的问题，而是用一种全局思维去思考和解决在产品设计流程中所有点，用之前的一个观点来说是：“设计一件事情，而不只是设计一个画面。”Q：你现在的主要工作是什么？A：主要在做运营设计和偏品牌向的视觉设计。Q：经过这么久的沉淀，你想继续丰富自己的设计深度还是设计广度？A:可能更多的是想丰富广度，在视觉表现的维度有了一些沉淀了以后，想在此基础上继续做一些边界的外延。去更多的了解一些跨界的领域，比如说像广告和营销的领域。能对互联网设计产生一些影响或者开阔设计思路的一些方向进行探索。Q：对于年轻的设计师你有什么建议？A：说不上是什么建议，不过有一个小点。一个是我感觉可能是在视觉上面可以保持专注，往深里去挖掘，让视觉呈现更加的讲究和精致。另外一个就是横向的，可能除了设计以外要看更多的东西和跨界的领域。这些可能会对设计有一些积极的帮助和正向的影响。欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/full-stack-designer
淘宝 京东 网页 最近突然想起要买一个东西，刚好手就放在键盘上，刚好手机又有点远，我就用浏览器打开了淘宝。当我在搜索结果页点击商品时，突然被告知要登录：着急想要了解商品的我……没有登录而是新开标签页进入了京东。找到想要的商品后，我登录下单了。事后我仔细对比了一下，发现淘宝的网页处处显得「敷衍」。反衬之下，京东显得专业多了。这就让我有点惊奇了。2021 年阿里巴巴旗下以淘宝为代表的淘系零售电商占据过半市场份额（52%），是京东（20%）的两倍不止。在使用手机端网购时，我也是向来更喜欢淘宝而不是京东的。而且在互联网从业人员眼中，阿里属于一线大厂，京东一般认为是二线大厂，前者更能吸引顶尖人才。为啥淘宝的网页端还明显不如京东呢？如果只是稍逊一点也就算了，关键淘宝网页端有很多迷惑的设计点。更多网页设计干货：只会黑白灰？7大要点帮你做好悼念缅怀的网页设计！如何设计悼念缅怀相关的网页？阅读文章 > 我们就以首页为例分析一下：一、大片无效模块首先，现在应该没那么多人有耐心愿意先登录再使用吧，登录模块占用那么大的位置挺没必要的。而且还没登录，就展示那么大的宝贝收藏、买过的店、收藏的店……感觉没啥意义。然后 banner 下的第一个模块居然是猜你喜欢（个性推荐）？我还没登录，显然猜不准，这个模块基本也废了。然后那个 banner，我翻了一下，都是什么贵就卖什么……切中普通用户需求的几率也是相当之低也就是说，这整个首页，大半的空间都是无效的。作为业内人士，我猜，设计成这样，可能是因为设计师压根没想到大部分访客可能没登录？对比一下，京东的登录模块小很多，banner 内容更有吸引力，而且第一个模块是秒杀活动（虽然露出不多）。二、双重悬停态Banner 左侧的这个分类导航很奇怪，鼠标移上去是整行高亮，而且每行一个图标。刚开始，我还以为每行的 3 个链接点过去都往一个地方跳转，结果发现不是。仔细一看，每个链接有单独的下划线悬停样式！不但如此，商品卡片也有 2 个悬停态！鼠标放在卡片上时，背景色和边框变一下；然后鼠标放到商品名称上时，商品名称单独高亮了。点击这两块区域跳转到不同的地方吗？不，没有差别。对比一下，京东就正常很多：三、粗糙的细节首先，很明显的是淘宝这个 banner 的箭头不但上下没对齐，而且里面的图标也没居中，强迫症看着闹心。然后淘宝大量使用灰色卡片，却不把间距统一一下。虽然一般用户看不出来，但这应该是基本的设计规范吧？对比一下，京东的边距就整齐多了：四、梦回上个世纪的消息通知淘宝首页这个消息通知我很想吐槽，等了好几条，几乎没有一条能引起普通消费者的兴趣。京东也做了消息通知，虽然字显示不全也不滚动，但好歹内容稍微有用了一点：五、不登录看不了商品前面也说过了，虽然淘宝能够直接搜索，但是即便搜到了，也必须登录后才能查看。刚有点兴趣，还没确认要买就把人拦下，这显然不明智：对比一下，京东会等到用户决定要买的事后，再提醒登录：六、内容太少往下一翻，淘宝 banner 下面只有一个模块，还都是猜不准的猜你喜欢：京东的模块就丰富多了：七、为啥淘宝在网页端摆烂？以我自己在大厂工作过的经验来说，造成这个现象的原因，十有八九是网页端数据占比太低，团队不重视。就算以目前这个状态，淘宝网页端的访问量都未必比京东网页端低。淘宝如果愿意把网页端稍微捯饬一下，数据量肯定能明显超过京东网页端。但淘宝手机端太赚钱了，所有资源都倾斜过去，其它端的资源还不如二线厂商。大厂的资源分配的马太效应比很多人以为的更加严重。凡有的，还要加倍给他，叫他多余；没有的，连他所有的也要夺过来圣经《新约·马太福音》可让网页端这样摆烂多少也是个隐患不是？这么看还是拼多多聪明，既然懒得管网页端，就干脆不做了：欢迎关注作者的微信公众号：「体验进阶」本篇来源：优设网原文地址：https://www.uisdc.com/taobao-vs-jd
人工智能 设计师 将会 编者按：人工智能的时代已经来临，设计的方式正在发生改变，而曾经让设计师取得成功的要素也悄然变化。这篇文章将会探讨人工智能当前的状况，所产生的影响，未来可能发生的变化，以及设计师所需要应对的问题，和需要做好的准备。本文由设计师 Irina Nik 在 ChatGPT 和 Grammarly 的 AI 辅助下完成撰写。Irina 在完成文章之后，要求 ChatGPT 重写了部分段落让它们看起来更好。客观现实，而非炒作人工智能革命并非未来，它是当下正在发生的客观事实。根据 Morning Consult 做过一个全球人工智能调查，美国、欧洲和中国 34%的企业都已经用上了人工智能。包括世界经济论坛和 IBM 在内的许多组织都将人工智能视作为第四次工业革命的主要技术，它将从根本上改变我们的生活、工作和两者之间的关系。当然，人工智能可能有偏见，存在道德风险，生成错误的结果，传递误导性信息。但即便如此，它依然以惊人的速度发展，这些问题可能会随着时间的推移逐步得到解决。生成式人工智能如何改变世界2022 年，生成式 AI 所输出的结果是颠覆性的：AI 可以生成新事物，而不是分析已经存在的东西。Sequoia 梳理的 AI 应用前景能够给出类似人类的答案随着来自 OpenAI 的 ChatGPT 逐渐流行，Google 也拉响了「红色警报」。用户开始青睐向 AI 提问，而不是在 Google 搜索结果。目前，人工智能给的答案并不可靠。但是在未来，它们或许可以和专业的咨询顾问竞争。 根据麦肯锡的说法，人工智能有可能被用于保险和法律行业，回答复杂的问题，审核法律文件，起草年度报告。比如摩根士丹利已经在研究人工智能，这项AI服务可以给客户提供财富管理的建议。客户服务也将从人工智能当中受益，目前的聊天机器人还无法满足用户的期望，但是它在未来可以取代更多的人工客服。Midjourney 基于语言生成的图片概念设计内容生成能力如今这种生成式人工智能已经被用于营销和搜索引擎优化，它加快了内容创建，并且提供必要的插图内容。比如，Jasper 就是一个以营销为卖点的 GPT-3 的分支版本，可以用来撰写博客文章，社交媒体帖子，网络文案，营销电子邮件，甚至广告等面向客户的内容。图像生成能力Microsoft Designer、Runway、DALL-E和Midjourney 等工具让设计更方便，并且更容易为大众用户所接受，加速可视化内容的生成。这类服务在营销和设计当中已经广泛运用了。雀巢在营销活动当中使用了 Vermeer 的人工智能加钱版，Stitch Fix 使用 DALL-E2 进行实验，根据客户对于配色、面料、款式的偏好来可视化地呈现服装设计。Nutella 使用一种算法来结合人工智能创建了 700万种独特的包装，广告公司 BBDO 则正在测试使用 Stable Difffusion 来创建设计物料。这也意味着可以在没有设计师的情况下，普通用户可以创建出好看的演示文稿和社交媒体帖子。下面是红杉资本所制作的图表，其中包含了根据当前的状态，对未来人工智能在不同领域当中，生成式人工智能的前景和可能性。UI 界面设计人工智能已经可以创建出 Dribbble 级别的 UI了，以下界面是 Midjourney 所创建的：同一个 AI 在不同的图片内容训练之下的结果，能够生成的作品是截然不同的。如果我们专门针对 UI 设计来创建训练集会怎样？比如，我们在未经作者同意的前提之下，将整个 Artstation 的图片拿来训练，那么可能会有人拿 Dribbble、Mobbin、PageFlow 或者 Pttrns 上被完美标记的作品来训练自己的模型。那么有了这样的训练出来的模型，是不是可以在 Figma 上直接生成 UI ？现在第一个实验已经开始了：Airbnb 现在就在拿这些优秀的作品来训练，从基本的线框图一路到可用的代码。那么有没有 AI 可以根据描述生成整个程序？ Builder.ai 已经在探索这个领域了，创建了人工智能直接生成 APP 的基础版本。紧随其后，我们处理设计系统的方法也可能发生变化。随着 Figma 对无头设计系统的引入，训练 AI 生成标准的组件已经可行了，咱们现在每天头疼不已的工作可能很快就要外包给 AI 了。想法探索生成式 AI 是强大的绘图工具，它可以加快探索的过程。设计师和非设计师都可以在很短的时间内，快速探索大量的替代方案。用户研究如今，生成式 AI 在用研领域也有一些进展。比如我们想象人工智能能够协助创建调研的准备材料和各种相关报告。但是其实其他的人工智能磨ixng，可以通过分析研究数据，将用研提升到一个更高的层次。比如 UserTesting 已经在借助机器学习，来识别用户在调研视频中的情绪。我们目前还不确定，未来越来越成熟的大型语言识别模型，能够从这些测试视频当中挖掘出多少信息，可以生成多少报告。UserTesting 识别视频中的用户情绪人工智能还能帮助分析不同来源的大量客户数据，比如对讲机、社交媒体、APP 评论、电子邮件等等，因此，用户体验设计师能够用更少的时间来获取更加可靠的用户行为分析。随着这些领域中机器学习的引入，增长模式也可能发生变化。Facebook 正在广告模型当中使用人工智能，他们会在众多广告变体当中，挑选出最好的一个，并且了解什么时候向什么类型的用户推送，会有最好的结果。未来，设计师可能会有类似的工具，来进行自动化测试，并且加速增长。设计师要做哪些准备在设计过程中引入 AI 的尝试已经开始了。室内设计师征才测试 InteriorAI 来创建模型。服务设计师开始使用 AI 作为草图绘制工具，而产品设计师也在头脑风暴当中使用 DALL-E2。设计师 Isabella Orsi 使用 InteriorAI 制作的室内设计模型生产力人工智能确实是会显著提高设计师的生产力。它将加快分析用户数据，并提升制作原型的过程。如今设计师可以使用这些 AI 生成图标、文案和图像，并且使用 AI 进行视觉探索。如果你需要了解相关的服务，你可以看看这些：Phraser、Dallelist、Midjourney Prompt Generator、PromptHero、 dallery.gallery 手册。更高层次的设计生产力的提升，意味着 AI 将会承担更多的重复工作和体力活儿，而设计师可以拥有更多的时间和资源，来关注更高层级的设计问题，比如设计研究，产品策略和增长实验。Midjourney 生成的设计思维主题图片以人为本的设计随着人工智能承担越来越多的硬技能向的工作，设计师将会有更多的精力深入到社会认知相关的活动，比如什么样的设计能够带来社会价值，能够给人带来愉悦感，人和社会体系之间的交互逻辑，这些深层的研究和洞察很难外包给 AI 。AI 则可能会 给以人为本的设计和无障碍的工作提供更多关注、资源和机会。设计师的新挑战随着 AI 技术的发展，设计师将会面对新的挑战。当我们开始广泛的应用和使用面向客户的 AI 的时候，设计师需要确保 AI 生成的结果是不带偏见、合乎道德规范并且有价值的。另外，元宇宙将会带来前所未有的交互挑战，和 UI 设计不同，虚拟现实目前还没有既定的交互模式，有许多问题尚未解决。Midjourney 生成的元宇宙的概念设计人工智能将会改变设计师的哦概念工作方式，而市场对于设计师技能组合的要求会随之发生变化。显而易见的趋势是，大部分常规的设计工作将会彻底的自动化和 AI 化，只是目前这个变化周期不确定，接下来会被 AI 取代的工作内容还不确定。但是设计师需要适应使用 AI 来进行设计。如今仅仅只是 AI 化的第一步，但是如今 AI 所引领的技术突破在过去历史当中，速度也是史无前例的，甚至可以替代人类执行人物的「通用智能」，可能也不会太过遥远。如果对于人工智能设计感兴趣，可以关注「夏花生」，你可以在她的文章中看到各种热门流行的最新的 AI 设计工具。本篇来源：优设网原文地址：https://www.uisdc.com/ai-revolution
视觉 轨迹 视线 我们的作品信息的传递效率高吗？什么样的设计是清晰有效的？想要搞清楚这些问题，首先你得了解视觉动线这个概念。往期回顾：平面设计构图法！6招快速提升版式水平！任何类型的设计都离不开版式构图，但产物的不同构图方式也会有所差异，本文将探讨运营活动设计中的构图方式和技巧~往期干货：阅读文章 > 一、什么是视觉动线1. 动线动线一词最早是源自建筑与室内设计领域。指的是人在某个空间内的移动轨迹。例如住宅空间的动线设计，我们会经常听到动静分离的概念，讲的就是动线的设计。住宅动线的设计目的是提高居住体验，减少在室内的重复行走轨迹。例如家务动线的设计，从进门到厨房再到生活阳台，是家务劳动中最经常行走的路线。通过设计动线，减少家务劳动的行走，就能提高家务劳动的效率。在这里动线越短，效率越高。在商业建筑领域，动线的设计也被频繁的运用。例如店铺的顾客动线设计，通过兴趣区吸引顾客，引导顾客尽量多的浏览店铺的商品，从而提高销售额。商业空间的动线设计讲究的是坪效（每平米的销售额）,动线的设计更侧重迂回。还有比如动物园、游乐场的路线设计，就涉及到游玩顺序的体验，以及缓解拥堵等问题。因此动线设计的目的在于提高效率，在家居和商业空间领域已广泛应用。而在视觉设计领域，也存在动线的概念。2. 视觉动线大家在生活中有没有遇到这样的情况，你要找的东西就在眼前，但是找了好久仍然没有找到。人眼之所以能看清物体，是因为视网膜中央有个很小的区域叫做中央凹，这个区域集中了大多数的视锥细胞，专门负责视力的高清成像。但是中央凹的面积极小，高清区域有限。人眼只有在 10 度视角范围内才最为敏感，30 度范围内可以分辨出颜色。这就导致人眼可视范围有限，一次只能产生一个视觉焦点。因此人眼在观察物体时，没办法一下子看到所有信息，需要逐个地移动搜寻，这种视线的移动过程，就构成了视觉动线。例如我们在阅读文章时，一般是从左到右逐行地阅读，这个阅读顺序就构成了视觉动线。如果文字的排版过于跳跃，没有规律，就会造成视觉焦点过多动线混乱的情况，容易出现阅读障碍，大大影响了阅读体验。在视觉设计中动线的设计尤为重要，例如下图的 banner，左图动线混乱主次不清。右图则能清晰地引导观众从左到右阅读信息，降低无效的阅读成本。因此构建合理有效的视觉动线，将有助于打造良好的阅读体验，能更高效地让用户获取到信息，避免用户的流失。二、有哪些动线类型我们以运营设计为例，来讨论一下常见的动线类型。在运营设计中，banner 和活动专题是最为常见的，这类型的设计，画面往往很有感染力，内容丰富。这里介绍的动线，是指某张 banner 或者活动头部同屏类的动线轨迹。一般我们可以将常见的动线分为这几个类型：直线型、汇聚型、发散型、扇型、以及 Z 型。1. 直线型直线型动线顾名思义，就是在一条路径上依次展示信息元素。我们以 banner 为例来看看如何应用。在分析动线轨迹的时候，我们应该逐一地寻找视觉焦点。这个案例中我们第一眼看到的是左侧的标题，我们称第一眼看到的焦点为视觉入口点；紧接着视线转移到了右侧的龙身上。这就构成了一条清晰的从左到右的视线轨迹。banner 中只在标题和火焰上使用了色彩，其他背景使用较灰的色系，这使得视觉焦点突出，动线清晰。① 动线角度直线型动线在运用的时候，不一定都是从左到右的横向角度。常见的有对角线以及竖线的形式。例如左图这张 banner 就是对角线式的动线轨迹。对角线具有倾斜的角度，容易塑造出速度感。因此这样的动线轨迹往往画面更加的有动感。而竖向的动线一般用在窄长比例的画面中，例如手机端的运营活动。右图的活动页面就构成了从上到下，从标题到主体人物的动线浏览轨迹。② 视觉焦点个数直线型动线中，人们的浏览轨迹是根据视觉焦点的位置进行的。在直线上依次排列视觉焦点，但并不是焦点越多越好，一般 2-3 个视觉焦点较为合理。较多的视觉焦点反而影响阅读效率。2. 汇聚型汇聚型动线是将用户的视线聚焦到中心的一种动线轨迹。一般有多个视觉入口点来引导用户的视线。例如下面这张 banner，我们的视线会先被左右两侧英雄所吸引，延着他们冲刺的方向视线转移到了中间的标题，这就构成了汇聚型的视觉动线。汇聚型动线在元素摆放上一般具有引导性，最终目的是让观众的视线聚焦到中心，以突出中心的标题或者主体信息。汇聚型动线的视觉入口点一般在 2 个以上，例如下面这张活动头部，通过两侧的烟雾塑造视觉入口点，引导观众视线汇聚到中心。是一种侧重突出中心内容的动线类型。3. 发散型汇聚型动线是由四周向中心聚集的动线轨迹，而发散型动线则相反，它是由中心向四周转移的动线轨迹。视觉入口点在中心，并逐步向四周扩散的动线类型。例如下面这个暑假活动页面，就是视线由中心往四周转移的发散型动线。我们第一眼会被醒目的标题所吸引，这就是视觉入口点。之后视线逐步地往两侧移动，依次看到人物、书本、台灯以及两侧的云朵。构成了渐进式的视觉浏览轨迹。而下面这个四周年的活动，最醒目的也是标题，它将观众的视线聚焦到了中心，之后逐步向四周发散。按照放射的方向，依次浏览了人物、按钮、奖励、圆球等信息。可以看到发散型动线一般运用在有较多信息元素的画面中，浏览顺序层层递进，比较适合对信息元素进行归类阅读。入口点位置发散型动线一般是由中心往四周发散，视觉入口点一般在中心线位置。不过入口点也有位于边缘的情况。例如下面这张 banner，作为视觉入口点的人物位于右下角，通过手势逐步引导观众阅读标题和玩具。是一种单边发散的动线类型。4. 扇型扇型动线一般会在中心线上塑造一个视觉入口点，之后保持着至上而下、从左到右的视线轨迹，这种轨迹就好比一把扇子。例如下面这个手机端活动，我们第一眼会被可爱的小狗头部所吸引，之后视线往下，看到主标题和副标题，并按从左到右的视线轨迹阅读了标题。这就构成了扇型的动线轨迹。可以看到扇型的动线轨迹保持了从上到下的结构关系，一般用在画面较长的版式中。容易塑造至上而下、内容由少及多的阅读关系。5. Z 型Z 型动线是最为常见的类型，它遵循了人们从左到右的阅读顺序习惯。并且在长页面中可以一直做反复的延续。例如下图的活动页面，我们的阅读顺序就是从左到右逐行地扫视关系。先是主标题，再是副标题，最后是木牌上的信息。这构成了循环的 Z 型动线轨迹。此类动线比较适合应用于文字类信息较多的画面中。三、如何制造动线在动线的设计过程中，比较难的是如何去引导信息之间的先后关系。这里介绍几种便捷的技巧，如何更有效的来设计动线。1. 阅读顺序第一种就是根据人们的阅读习惯来设计，也就是从左到右，至上而下的顺序。因为人的眼睛，左右转动所看到的角度和区域，要比上下转动所看到的要广阔的多。从左到右也是人们通用的阅读习惯和标准，横向阅读也更为舒适。在设计中我们只需要按照从左至右自上而下的规律来摆放信息元素，就能保证有良好的阅读体验。2. 元素指向性第二种是利用元素本身的指向性来进行引导，特别是主体人物的肢体动作、手势等。例如下图中的 banner 就分别通过人物的眼神和手势进行引导，让观众的视线转移到标题上，构成了很强的关联性。让动线的引导更为自然紧密。3. 引导线的设计第三种是引导线的设计，我们可以通过设计一些引导性的线条来引导观众的视线。常见的有放射线，或者虚拟的线条。例如下图 1 的 banner，就是通过左右两侧放射性的线条来增强引导，让观众的视线汇聚到中心，构成了汇聚型的动线。图 2 除了蜘蛛的视线引导外，标题文字的透视处理也构建出一条无形的引导线，让整个视线的引导更加紧密自然。在元素本身指向性不强的时候，引导线的设计能让视线的引导更加紧密，有规律。4. 层级的设计第四种是通过层级关系的设计来构建动线，也是经常要用到的方法，构建层级关系的方式有很多，这里只做简单介绍，有机会再跟大家交流。例如下面这个活动头部，我们的阅读轨迹是从左到右的关系，先看到左边的人物然后是标题，最后是右边的人物，构成了直线型的动线轨迹。如果我们拉开人物之间的空间关系，我们首先会注意到离我们近的物体，依据远近关系，形成了一条视觉引导轨迹。这就是层级对于视线引导的作用。通过层级的塑造，可以更有效的来制造动线，引导观众的阅读。 小结 综上，只要我们能够理解动线的概念和目的，在排列元素时就能有更清晰的目的性，设计更有方向感。信息的传递是我们构建作品和观众之间交流的桥梁，也是设计中首要考虑的因素。有效的信息传递才能发挥设计最大的价值。以上仅是个人的观感与体会，希望对大家有帮助。本篇来源：优设网原文地址：https://www.uisdc.com/visual-line
旗舰店 年货 来了 年货节来了！年货节的到来，意味着电商设计师一年的工作将要画上圆满的句号，终于可以把工作节奏放慢，上班期间感受下摸鱼的快乐了~作为一年压轴的大促活动，各大店铺也都非常重视，在视觉上的比拼自然也是针尖对麦芒，谁也不服谁。今天就跟着老张的步伐，一起来看看各大店铺的年货节创意吧：电商设计到底有多卷？看今年双11开门红就知道了！电商设计圈内卷究竟有多严重？阅读文章 > 华美食品旗舰店 | 视觉冲击力很强啊！李子柒旗舰店 | 好家伙，还是这么秀~珀莱雅官方旗舰店 | 动效的天下极米科技旗舰店 | 摄像头视角柴火大院旗舰店 | 对比做的不错，主体很明确邹三和旗舰店 | 漂亮~好欢螺旗舰店 | 螺蛳粉不错五粮浓香官方旗舰店 | 春节都不要贪杯哈~馋匪旗舰店 | 食欲来了亿家达旗舰店 | 开盲盒的感觉三只松鼠旗舰店 | 可爱的三小只，太喜欢了甘福园旗舰店 | 喜气洋洋~久年旗舰店 | 质感很强啊！云南白药旗舰店 | 数一数有多少只兔子图片贡牌茶叶旗舰店 | 品茶品茶~黄老五食品旗舰店 | 氛围感十足翠宏旗舰店 | 龙的传人欧诗漫旗舰店 | 灯光秀来了臭宝旗舰店所 | 好有食欲图片十月稻田旗舰店 | 人物和建筑之间的空间感再拉开一些会更好，整体来说还是不错的！认养一头牛旗舰店 | 文案有意思rio 锐澳旗舰店 | 有点喜感袋鼠比比旗舰店 | 简单大方卢正浩旗舰店 | 有钱没钱，回家过年~食族人旗舰店 | 他家酸辣粉不错欧莱雅官方旗舰店 | 看，飞机OGP 旗舰店 | 光效用的不错皇上皇旗舰店 | 有拼单的吗？我买第三件罗技官方旗舰店 | 好一个兔发奇想蔓斯菲尔旗舰店 | 创意还不错monge 旗舰 | 看烟花了轩妈食品旗舰店 | 温馨的画面尔沫旗舰店 | 中间部分稍有点空花西子旗舰店 | 颜色即氛围连咖啡旗舰店 | 哎呦，这个可以~南国食品旗舰店 | 还有个动画没保存图片卫龙食品旗舰店 | 喜庆~暂且就放这么多吧，看完之后你最喜欢哪家店铺的设计？2022 年注定也是不平凡的一年，从全国疫情再次爆发到全国解控，我们经历太多，大家都辛苦了！接下来的几天可以在思想上给自己放个假，不要再死盯着工作不放了，忙碌了一整年也该休息休息了。不如约几个朋友吃吃饭，谈天说地一番，回顾 2022，展望 2023，一切都会越来越好。收拾收拾心情，准备回家过年，让所有的烦恼都烟消云散。加油！欢迎关注作者的微信公众号：「美工美邦」本篇来源：优设网原文地址：https://www.uisdc.com/new-years-eve-creative-design
按钮 操作 让人 不论做什么产品，界面上几乎都少不了「确定」按钮。例如：操作提示时、进行选择时、填写表单时……完成、保存、下单……各种代表“确定某一步骤”的按钮，都可以统称为确定按钮。以前的产品设计，大量以来确定按钮，但是现在的产品设计，确定按钮用得越来越少了。倒不是因为不需要确定操作了，而是除了「确定按钮」之外，设计师们发现了更好的方式。往期细节分析回顾：淘宝网页设计摆烂？淘宝京东网页细节体验分析最近突然想起要买一个东西，刚好手就放在键盘上，刚好手机又有点远，我就用浏览器打开了淘宝。阅读文章 > 一、能自动「确定」，就不需要按钮有一句话说：最好的交互就是没有交互同样，最好的「确定」按钮，其实是没有按钮。例如，手机锁屏时，输入密码后不需要确定按钮就可以直接验证进入。能这么做是因为手机锁屏密码固定六位数，而电脑的锁屏密码通常不确定，所以还是需要一个「确定」按钮。这说明，如果能够预料到用户的操作数量，且操作很简单的话，是完全可以考虑去掉「确定」按钮的。二、不是什么时候，都适合写「确定」通常「确定」字面上可以表示：“我知道了/就这样”。如果是提示或者是简单的操作，则比较适合使用「确定」文案。三、把确定了什么写出来如果是发送、登录、购买、支付……这类目的性很强的操作，与其写「确定」还不如直接把操作目的写出来。不然，如果只写「确定」，让人容易犯迷糊。四、进行了输入/修改，得用「保存」输入操作后，用户最怕丢失信息没有保存，回头得重新写。如果只是简单的表单，例如设置用户名什么的，重来一次倒也无所谓。但如果是填写项达到三、四条甚至更多，看不到「保存」两个字难免担心数据丢失。如果按钮上写清楚「保存」两个字，也让人安心一些。如果是自动保存，也需要把相应反馈展示出来。五、只是结束流程而非操作，可以用「完成」其实「完成」按钮大多可以用「确定」替代。但是「完成」的特别之处，是表达了“结束流程”的概念。所以，如果想让用户感觉按下按钮之后不会进行任何其它操作，而仅仅只是结束流程而已，则很时候使用「完成」。六、工具类产品，可以用「XX 并 XX」很多工具类产品，为了操作效率会把两个操作并列起来。例如我现在打在所用的公众号编辑器，就有一个「保存并群发」的按钮：这样做挺好的，工具类产品效率最重要美观是其次。两个经常要连贯执行的操作，合为一个按钮能够减少没必要的点击。而一旦把操作合并了，肯定要写清楚比较好。否则如果没说明白，既让人难以理解，而且点起来又不放心，导致学习成本大大增加。有一个问题是，如果文字太长了，可以考虑简化按钮文案并在旁边加点提示。工具类产品效率最重要美观是其次，因为如果不写清楚很难让人理解。以上是我自己做 B/C 端各类产品过程中，对「确定」按钮的思考总结。如果大家有其它的见解或者补充，欢迎评论。欢迎关注作者的微信公众号：「体验进阶」本篇来源：优设网原文地址：https://www.uisdc.com/disappearing-ok-button
用户 情感 产品 情感化设计，由唐纳德·诺曼在 《情感化设计》 一书中完整提出，书中其由浅入深的将情感化设计分成了三个层次：本能层、行为层、反思层。相关的概念你可以看这篇：关于情感化设计，这篇干货带你快速入门这个知识点！小溜Epik：情感化设计是完善产品，提升用户体验的关键，在当今移动应用泛滥的时代，只有存在情感化设计的产品才能脱颖而出。阅读文章 > 接下来，我们就从案例中分析，作为设计师该如何在这三个层次中做好情感化设计。一、本能层 —— 感官刺激对于本能层，设计师可以在符合功能需求的前提下，尽力给用户带来听觉、视觉、触觉的感官刺激，促成用户与产品的 “一见钟情”。作为一款国民级应用，支付宝出行功能下的每个 icon 都做得很用心，小动画让交互更有趣：Airbnb 在北美登录界面的长按钮，按钮的颜色会随着鼠标移动而产生变化，让交互感受更加深刻：语雀 App 在生成长图进行分享和转发时，有不同的卡片样式可以选择，图案随机像开盲盒一样，促成用户尝试分享：在淘宝搜索商品，可以看到页面右下角的“花瓣图标”，点开后是拼接图效果来展示商品。每个小图可以是视频，也可以左右滑动翻页，视觉展示效果明显，挑选商品也更加方便：在互联网时代，表达哀悼也有了新的方式，很多产品都使用首屏去色黑白化，来缅怀领导人的离去：二、行为层 —— 细节引导对于行为层，设计师需要对用户的行为进行预判和引导，利用细节处理打动用户，让用户对产品产生信任感和依赖感。使用 “微信读书” 在读到一本书的 50% 的时候，页面顶部会显示剩余阅读量，并会根据你之前的阅读速度估算剩余时间，鼓励你继续读：高德地图利用树木和楼高的数据，配合天气太阳角度的计算，在夏天时为选择骑行的用户提供有林荫和楼阴的“清凉导航路线”：在一些车辆限行的城市，高德地图增加了“添加限行日提醒”功能，根据不同城市有定制化的规定。在添加车牌号时，键盘默认开启大写字母和数字组合，方便用户输入：微信的搜索推荐，会用一些小脚标来吸引用户点击，比如“互联网精英都在看”，应该是根据文章阅读的用户画像来做的精准推荐：美团外卖在用户给订单打差评时，会自动开启匿名开关，保护用户的隐私：钉钉会在你长时间（约 3-4 小时）未读某人发的单聊消息时，再次发出通知提示，避免你错过重要消息：微信群聊天，大家通常都会设置“消息免打扰”，但也很可能会错过很多重要信息。微信可以在群聊设置中选择关注的群成员，这样这几个被你关注的群成员在说话时候，你就可以接到通知提醒：三、反思层 —— 认知共鸣对于反思层，设计师要调动用户最深层的记忆和感知，将视觉效果、产品功能和用户认知紧密结合，形成用户对于产品和品牌的深刻认知。英雄联盟的微信广告植入别具一格，将游戏用语、社群平台和用户很好的连接到一起，你只要发送 “亚索，听我口令…” 这段口令，就会唤起动画效果和小程序：饿了么的搜索推荐，使用滚动条状态，并配有古灵精怪的形容词，还会有 IP 形象不断的加词加戏：网易云音乐的播客功能，在切换主题内容时使用的是模仿老式收音机调频的方式，有趣的是，你能感觉到手机随着滑动调频而产生明显的震动感：花小猪 App 为了缓解用户等待平台派单时的焦虑感，将等待进程设计成红包进度条样式的样式，等的时间越长红包越大，让用户舍不得离开：Google 浏览器首页的 Logo 涂鸦变体经常会和实际事件相呼应，比如在某年的月食日时曾使用过的涂鸦小动画，点击后则会跳转到与月食知识相关的百科页面：欢迎关注作者微信公众号：「长弓小子」本篇来源：优设网原文地址：https://www.uisdc.com/emotional-design-2
课程 作业 老师 年货节正在如火如荼进行中，这两年只要打开电商网站，细心的设计师应该都会发现，3D场景已经成为当下势不可挡的潮流了。优设老师小毅作品作为 3D 设计的老牌工具，C4D 曾经是很多人的学习首选。但正版近 2 万的售价和苛刻的硬件要求，也让越来越多的人开始选用免费且硬件要求更低的 3D 设计新秀神器：Blender。对普通的 UI 和视觉设计师而言，Blender 无疑更适合作为 3D 设计的工具：多平台通用：Mac/Windows 双平台，Mac 用户无需额外购买主机轻量化免费：对硬件要求低，安装包仅 230M，创作的作品可自由商用3D 创作功能强大：绝大部分 3D 设计需求，都能通过 Blender 实现渲染速度更快：Blender 自带渲染器速度很快，适合快速出图当然，相比 C4D，Blender 的缺点是教程较少，遇到一个难题，有可能耗费一下午才能找到答案。现在这个问题的系统解决方案来了！优设联合京东高级视觉设计师小毅，耗费大半年的时间精力，打磨出这一套可能是目前性价比最高的 Blender 零基础直播课程！课程原价 699 元，最后2天特惠价 649 元！手机扫码即可领取50元优惠券：一、循序渐进，零基础也能轻松上手！3D 设计看似复杂，但只要掌握了正确完整的学习流程，也可以在短时间内快速上手。而一个拥有多年 3D 创作经验的设计师，无疑是你学习路上的绝佳帮手。在课程设置上，Blender 系统直播课会从软件基础开始，帮你快速熟悉界面后，从一个小元素入手，用简单轻松的方式，创作出你的第一套 3D 作品，相信我，那一刻的成就感会让你有百倍信心跟完这门课！之后课程逐步进阶，从中型场景到大型场景，每一步都增加了难度，但又控制在可接受的范围内，帮你实现 从零基础到 Blender 3D 创作达人的平滑过渡。学员熊猫反馈学员 C 反馈为了让你的基础更牢固，老师还额外录制了价值百元的 Blender 基础课，报名即送！更详细的课程安排，可以看这份大纲： 课程原价 699 元，最后2天特惠价 649 元！手机扫码即可领取50元优惠券：二、有问必答，保姆级课程服务无需再担心问题一直找不到答案了。参加课程后，遇到任何问题，老师和助教都会在群里解答。而且你的每一份作业，只要按时完成，都会在课程周期内得到老师的点评建议，甚至直接上手帮你修改源文件。不用担心自己在原地踏步，在这套课里，你的进步，我们帮你看见。学员萌该皮不皮反馈三、第二期重磅升级！课程采用全新的直播上课+录播课点评的形式，直播形式让大家上课时有问必答，录播点评作业形式能让老师抽出更多时间为大家仔细讲解，同时会收取同学们的作业源文件，老师直接上手修改，为你展示更合理的优化方法！在课程排期上，由于上期有同学反馈作业时间不够，这期整个课程周期拉长，大作业的时间都留有 5 天时间，再也不用熬夜赶了。学员嘎嘣嘣反馈四、首屈一指的小毅老师与别的 3D 课老师不同，小毅老师作为现任的京东高级视觉设计师，承接过多次大型电商大促级别的视觉项目设计，成功落地多款上亿流量的设计项目，拥有一线实战和电商 3D 设计经验。聪明的人知道这意味着什么：他教给你的东西，是真正能落地成为作品集，去面试大厂的。老师作品：当然，看学员作品更能感受到这门课的强大。学员作业： 想跟着他一起学习 Blender，掌握 3D 创作的方法，最后2天就别错过啦课程原价 699 元，最后2天特惠价 649 元！手机扫码即可领取50元优惠券：本篇来源：优设网原文地址：https://www.uisdc.com/blender-course-2
案例 用户 操作 时间对于我们每个人来说都极为重要和珍贵。随着生活节奏的加速，很多产品也都开始注重和考虑对于用户时间的节省和分配。本文重点分享三种在交互设计中帮助用户「同时做几件事」的设计方法，以及其对应的优秀案例：分割屏幕的布局更容易再续操作忽略非重要操作希望会为你带来更多的设计灵感。往期回顾：17个优秀设计案例，帮你快速了解情感化设计情感化设计，由唐纳德·诺曼在 《情感化设计》 一书中完整提出，书中其由浅入深的将情感化设计分成了三个层次：本能层、行为层、反思层。阅读文章 > 一、分割屏幕的布局通过将屏幕的布局进行分割处理，可同时呈现多项内容，让用户自由选择任务主次，同时处理多项任务。分屏设计很常见，但其中的体验细节却依旧值得研究和优化。案例 1 微信在 Pad 端的分屏布局考虑得很周到，看微信视频时支持分屏功能，还能够调整屏幕分割的尺寸比例。最小的分屏尺寸做成了手机尺寸，体验顺畅，看视频、接微信两不误：案例 2 bilibili 在移动端的视频通过小窗模式可以不间断播放，不仅可以在 App 内或外呈现小窗模式，正在播的视频，在被临时打断退出视频后，还可以用音频的方式继续播放：案例 3 微信的新功能，在你阅读文章时依旧能看到朋友发来的微信消息，可以直接在当前页面回复消息，避免你在看文章时阅读不了微信消息。你还可以将信息“标记未读”，一会儿再做处理：案例 4 微信视频号改版后，点击视频号下方的博主名称和头像，下方弹窗会弹出该博主的主页和其他视频，而当前正在播放的视频会渐渐呈现小屏播放，视频内容不会被遮挡，既不影响观看，也不影响用户探索该博主的其他视频内容：案例 5 在微信订阅号中展示的视频内容可以通过划到右下角变成小窗播放音频，既可以听内容，也不影响你继续浏览订阅号的其他内容：二、更容易再续操作产品可以让操作更容易被用户管理和掌控，在被打断后很容易被用户重新再续，给用户足够的掌控感。在一些特殊情况下，几件事可以交替、穿插地处理，同时进行。案例 1 钉钉的移动端浮窗功能，向右滑动退出正在操作的页面时，就会出现添加浮窗区域，用于收录未做完的操作。同时显示出已添加浮窗的内容数量，最多添加 5 个：案例 2 微信的浮窗功能也可以帮助用户更快捷地收录未及时阅读的内容，在打开时还可以定位到上次中断阅读的位置。用户不再需要整块的大量的时间来阅读长篇文章，可以更合理地掌控阅读节奏：案例 3 微信读书 App 会在你跳读到其他章节时，在页面下方显示“返回原进度”的按钮，方便你在跳读后回来继续阅读：案例 4 网易 163 邮箱侧重于为你呈现工作的多线程。每点开一封邮件，页面上方会增加一个类似浏览器标签页的 Tab，你可以通过它们查看自己的工作和阅读轨迹。当你在写邮件时，同时又收到了其他的新邮件，去查看新邮件之后，可以通过 Tab 直接回到邮件编辑页面，继续编写刚才的邮件：案例 5 使用钉钉发起会议邀请，如果中途退出，系统帮助你自动保存。再发起会议邀请时也会给出上次操作的提示，帮你续写内容：三、忽略非重要操作用户可以选择忽略或隐藏并不重要的、正在进程中的任务，将更多的时间用在其他事情而非无法控制的等待上。案例 1 iOS 系统中，当你在不同 App 之间传递文件时，如果文件过大，弹窗的“取消”按钮会在几秒钟之后变成“隐藏”，用户点击后可以继续做其他操作，并不妨碍后台的文件传输。案例 2 微信在接收超大文件时，增加了“发送给朋友”的选项，你不必等待文件在自己这边下载完成后再发送，可以直接发送源文件给对方，同时下载：案例 3 微信拨打语音的界面，在等待好友接听的过程中，你可以看到对方朋友圈的动态，缓解无聊的等待，也为即将进行的语音聊天提供了话题：欢迎关注作者微信公众号：「长弓小子」本篇来源：优设网原文地址：https://www.uisdc.com/13-product-design-details-2
标点符号 句号 标点 一、前言标点符号，是辅助文字记录语言的符号，是书面语的有机组成部分，在产品设计中使用合适的标点可以表达语句的停顿、语气及词语的特定性质，帮助使用者有效表达思想感情和理解语境。然而，在日常的产品设计中，笔者经常会被问到这样的问题：Toast 里需要加句号吗？中文与英文混排时要不要加空格？产品文案中可以加感叹号吗？作为一名爱“咬文嚼字”的设计师，笔者结合平时工作中的实际经验，总结了产品设计中常用的标点符号用法，希望能够抛砖引玉，与之共勉。更多干货：4000字干货！9个方法帮你掌握UX文案写作相比美观的视觉设计，清晰的文案在界面呈现中同为重要，好的文案不止赋予产品更好的体验，也能够拉近用户与产品的距离，优化文案也常作为可用性测试后改良产品用户体验的落脚点。阅读文章 > 二、常用标点类型常用的标点符号共 16 种，分为点号和标号两大类。点号主要用于说话时的停顿和语气，包含句内点号和句末点号，句内点号用于语句内部，包含逗号、顿号、分号、冒号四种。句末点号用于语句末尾，包含句号、问号、叹号 3 种。标号用于表达书面语言里词语的性质或作用，包含引号、括号、破折号、省略号、着重号、连接号、间隔号、书名号和专名号。需要特别指出的是，数学符号、货币符号、校勘符号、辞书符号、注音符号等特殊领域的专门符号不属于标点符号的范畴。三、产品设计中常用标点用法1. 问号问号是句末点号的一种，主要表示句子的疑问语气，表达形式为“？”。用法：问号可以在所有问句（疑问句、设问句、反问句等）中使用，适用于所有类型的文本。如对话框、popover 中的询问类语句，句尾需添加问号。2. 句号句号是句末点号的一种，是使用频率较高的一种标点，主要表示句子的陈述语气，在中文中的形式为“。”，在英文中形式为“.”。用法：① 对于文本信息量较大的段落型文本（如协议条款、使用需知、免责声明等），句末需添加句号。② 当句末为文字链接时，需在文字链前添加句号，句末无需添加句号。③ 为高效帮助用户阅读文本内容，增加易读性，以下场景句末无需使用句号。输入框下的报错提示输入框内暗提示表格中的文本轻提示按钮标签标题/副标题3. 叹号叹号属于句末点号的一种，主要表示句子的感叹语气，表现形式为“！”。在日常生活的聊天中，你可能习惯在句末添加多个叹号表达强烈语气，但实际上，叹号的数量是有明确使用规范的，国家制定的《标点符号用法》里指出：“表示声音巨大或声音不断加大时，可叠用叹号；表达强烈语气时，也可叠用叹号，最多叠用三个叹号。在没有异常强烈的情感表达需要时不宜叠用叹号。”以 B 端产品为例，系统应保持平等友善的语气，而叹号具有强烈的感情色彩，易给用户造成紧张恐慌的情绪，因此需谨慎使用。4. 连接号连接号是标号的一种，标示某些相关联成分之间的连接，表示连接、起止、流程、指向的符号，有短横线“-”（占半个字的长度）、一字线“—”（占一个字的长度）、波浪线“～”（占一个字的长度）三种形式，这三种也是经常会被混淆的标点。用法：① 短横线“-”：常用于连接号码，包括门牌号码、电话号码，以及用阿拉伯数字表示年月日等。示例：2011-02-15② 一字线“—”：常用于标示相关项目（如时间、地域等）的起止。示例 1：沈括（1031—1095），宋朝人。示例 2：2011 年 2 月 3 日—10日示例 3：北京—上海特别快车③ 波浪线“～”：标示数值范围（由阿拉伯数字或汉字数字构成）的起止。示例：400～500 件、5%～10%除此之外，在 B 端产品设计中，应避免在句末使用波浪线“～”，防止给用户带来随意、口语化的感觉。5. 括号括号属于标号的一种，标示语段中的注释内容、补充说明或其他特定意义的语句。主要形式有圆括号“（ ）”、方括号“[ ]”、六角括号“〔 〕”和方头括号“【 】”等。用法：除科技书刊中的数学、逻辑公式外，括号（特别是同一形式的括号）应尽量避免套用。必须套用括号时，宜采用不同的括号形式配合使用。四、「看不见」的符号-空格1. 中文与数字之间需要加空格2. 中文与英文之间需要加空格3. 英文与阿拉伯数字之间需要加空格4. 数字与单位之间无需添加空格5. 其他对于专有名词中如不含空格，需遵守官方使用格式，无需使用空格。五、标点符号的「避头尾」原则做过平面设计的同学都应该听说过标点符号的「避头尾」原则，即点号不能出现在一行的开头，标号的前半部分不能出现在行尾，而后半部分不能出现在行首，连接号、间隔号也不能出现在行首，分隔号无论首尾都不能出现。其实避头尾的核心解决思路总结起来就是两点「推入」和「推出」，你可以将处于错误位置的标点挤在上一行的尾部，这就是我们经常说的「推入」，还可以将文字放到下一行的头部，也就是「推出」。六、写在最后以上总结的是几类常用的标点用法，但实际工作中用到的标点类型还有很多，如果你对它们的用法感兴趣，建议阅读我们国家制定的《标点符号用法》（ http://www.moe.gov.cn/ewebeditor/uploadfile）。也许，你会产生疑问，规范是必须遵守的吗？笔者的观点是，如果是日常生活中，你大可根据自己的喜好使用标点（如私人的聊天场景），但是从产品设计的角度来说，合理使用标点是为了让使用者对于内容能更具有可读性，也能更容易理解产品的语境。明确了这个目标才能让我们更好地为使用者服务。参考标点符号用法http://www.moe.gov.cn/ewebeditor/uploadfile/2015/01/13/20150113091548267.pdf设计师与标点符号https://www.bilibili.com/video/BV1AX4y1u7Ag/中文文案排版指南https://github.com/mzlogin/chinese-copywriting-guidelines本篇来源：优设网原文地址：https://www.uisdc.com/punish-point-design
表哥
落霞与孤鹜
张大湿
飞翔的企鹅
在路上
