按钮 形式 需求 签到的存在不仅可以增加用户的黏性，也是激活用户参与度的关键因素之一。签到按钮在 UI 设计场景中，算是较为常见的一个类型，一个好的签到按钮不仅可以提高用户的关注度，也能激发用户的点击欲。这就是给你的一个关于签到设计的小需求：这个小需求看起来很常见，交互设计也许给你的是签到两个字，也有可能帮你画了一个外框。总归它是显得很普通的，是不是没有一点设计感呢？那我们如何去增加设计感，还要有自己的特色，做出一个差异化的签到按钮呢？让我们带着这个问题，和黑马哥一起卷起袖子开干吧！签到功能交互设计分析：签到功能该怎么设计？从12个方面详细解析！本文是关于签到功能的视觉汇总分析。阅读文章 > 一、签到设计的类型在开始案例实战之前得先梳理一下关于签到设计的类型，方便我们挑选出最适合当前产品的风格。1. 纯文字形式纯文字形式属于最为简单的样式，有直接文字展示、文字带下滑线、文字加箭头等，这个形式不是很建议，缺少设计感和用户关注度。2. 按钮形式为了提高签到的点击属性，通常以按钮的形式设计较为稳妥，也就是我们说的签到按钮。按钮通常是带圆角的和全圆角形式，也分为线性外框、面性外框、质感外框等。想要设计得比较突出，通常会在按钮的质感上面进行视觉表现，增加光影质感和纹理图形等装饰。比如：极光风（弥散光）、流体渐变、图形纹理等都是不错的方向。3. 文字加图标形式在签到按钮的基础上，进行进一步强化就会配合图标或者图形进行视觉感增强。图标设计的角度出发发挥性也比较大，便于设计师做出更多方案。图形的角度可以是 IP 形象的结合，不仅可以提高情感化设计，也能做出差异化的设计方案。4. 微动效的形式微动效相较于静态表达来说，自然是要更为突出一些，签到按钮动态形式也是较为常见的存在。如果想要突出签到设计，微动效的表达是不会让你失望的。5. 特殊造型形式常规的形式依然离不开按钮的表达，为了打破常规形成差异化的设计，在签到按钮造型上面也是可以进一步深思的。在能够体现出点击属性的前提下，我们可以结合产品属性和业务特征，探索出符合属性范围的造型，也能使得签到设计更有特色。小结当我们梳理了一些常见的签到设计类型之后，就可以结合需求选择比较贴合的形式。当然，也可以创造出不一样的设计，下面就和黑马哥一起来演示一下吧！二、签到按钮设计实战需求：为一个充电桩产品设计签到按钮，需要体现出产品的服务属性，也要能变得更有特色。UI 设计师拿到这个需求都会觉得：这个也太简单了。于是就会快速的做出几个样式，虽然毫无设计感可言，但是老板喜欢就可以啦！不过，如果老板不喜欢呢，有没有思考过如何留有后手。1. 分析总结无论需求的大小，个人都会先进行一些简单的分析和总结。要知道别人做出来都是啥样式，然后再总结这些设计都有什么方法论。也就是本文开篇总结的一样，虽然很简短，但是总结有助于让自己更有把握。2. 梳理关键词关键词梳理可以打开我们的思路，虽然只是一个按钮，但是我们也可以通过关键词发散出更有意思的设计表达。比如充电桩这个产品我们可以梳理出哪些关键词呢？3. 绘制草图如果根据关键词都去进行电脑绘制比较耗费时间，先进行一些初步的草图有助于灵感的快速表现。4. 确定思路通过草图我们可以发散思维，选择出几个具有代表性的方案进行电脑绘制。这里黑马哥选择了电池这个表达作为示意，不仅可以体现充电的概念，也能体现出设计差异。5. 绘制初步造型只要思路确定了，绘制起来就比较快啦！快速把电池的造型绘制出来，然后再结合按钮的特征进行微调，以满足“签到”文案在造型轮廓中的布局。6. 初步配色确定造型后进行了初步的配色，利用大色块把整体的配色关系体现出来，这里也要思考动态表达的色彩关系。7. 质感深入很多设计师都只是进行简单的层级表达，缺少质感深入的技巧。我们要通过色彩变化体现出造型的结构特征，也要通过光影处理把电池的质感强化出来。8. 字体处理大部分情况下对于 UI 设计师来说都会选择一些常规的系统级字体，不过这里作为一个按钮来说我们在字体的选择上面可以突破。这里我选择了阿里妈妈数黑体作为签到的字体，然后也进行了一些质感处理，贴合电池按钮的设计表达。9. 最终效果通过对字体和电池造型的绘制，完成了这个不一样的签到按钮。我们再将按钮放到界面场景中看一下，最后结合界面的背景做一下投影等处理，这个关于签到按钮的小需求就搞定啦！小作业以上的静态方案算是完成了，这里也给大家布置一些发散的小作业。如果要做动态表达，你会如何做？如果这里要体现签到送礼，不改变当前设计基础的前提下，你会从哪些方面入手？欢迎大家进行思考，尝试去完成这个小作业，大家有什么新的想法也可以微信黑马哥进行交流。三、小结通过一个关于签到按钮的小需求和大家进行了一些设计交流，设计的思考带有一定的主观性，我们在自己的需求中还需结合实际的情况做出调整。需求不分大小，每一个从自己手中出去的设计方案，我们都要尽力做到最完美，体现出自己的职业态度和设计能力。本文观点仅作为个人经验表达，如果觉得不错我们互相进步，如有不足欢迎大家留言补充。欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/sign-in-function-design
用户 互动 形式 前言评论区是一个神奇的地方，它可以拉近用户间的关系，也能增强用户与产品的联系。那么好的评论区该如何设计？本篇文章将通过三个维度、九个考量点对评论区的设计进行拆解，希望能对大家有所帮助:-)评论区设计的三个维度&十个考量点从产品维度定义评论区类别当拿到构建评论区的需求时，别着急出方案，先看看自己的产品是什么类型、适合什么样的评论区；公众号的评论是被作者选择性地“晒”出，生鲜超市类 app 的评论区是只能看不能回——产品类型不同、其评论区类别也不一样，这里有三种评论区类型供大家选择：从产品维度看评论类别1. 单向评论区单向评论偏向于让用户发表自己的观点，重点在评论内容本身的浏览上，用户与用户之间不可互动。如应用商店、外卖 app 的内容详情页中，评论内容是用户后续行为——下载应用、下单外卖的影响因子之一；2. 双向评论区双向评论多应用于作者与用户之间的留言互动中。如公众号的文章留言区，用户发表观点、作者可选择性地进行回复。双向评论更强调作者、读者之间的关系，整个评论区（留言区）的互动性不强；3. 多向评论区多向评论区顾名思义，用户可以在评论区发表自己的看法、也可与他人进行交流互动，这在社交 app 上、新闻资讯 app 等较为常见；设计师需要根据自己的产品特性，在设计之前，先来选取最适合的评论区类型。“看评论”时的五个设计考量点在确定了评论区类别之后，就可以去设计用户“看评论”的体验了；这里可以通过以下五个考量点来分析： “用户看到了什么” ——关系着评论区内容元素、展示形式、排序方式的呈现； “用户怎么看到的”——同正文与评论区间跳转方式、以及一级二级评论的跳转方式有关。“看评论”时的五个设计考量点1. “看评论”之内容元素评论区内容元素主要分为两部分，评论区入口+信息展示：评论区入口——通常是评论icon、评论量数字、“评论“二字说明，设计师按照产品的调性直接设计即可；评论区信息展示——分为说明类信息（e.g.评论内容）和互动类信息（e.g.点赞、回复)；设计时需注意各类信息展示的位置，以确保信息看起来动线流畅、用户操作起来移动距离最小。“看评论”·评论区内容元素之信息展示2. “看评论”之评论展示形式app 评论区常用的大致有四类展示形式——主题式、平铺式、盖楼式、引用式，这些“XX式”是什么意思，又适合在什么场景下用呢？主题式：如下图，用户对正文内容发表的一级评论在上，他人的回复则折叠在下方；因为一级评论通常以热度的形式排列，所以“主题式”可使优质评论获得更多的曝光，更容易吸引其他用户查看、并参与讨论中去；平铺式：对于“平铺式”的展示形式来说，评论和评论回复都处于同一个层级上，视觉上没有明显的层级区分；以朋友圈为例，在熟人社交圈子中，大家评论回复的层级是相同的，朋友圈的用户可以通过时间的先后顺序直接浏览；旧版某乎的精选评论页也为“平铺式结构”，当用户对某条精选评论感兴趣、进去详情页浏览时，只要从上往上依次阅读即可；盖楼式：如同字面意思，评论区用户之前的互动内容像在盖楼一样，一层一层向下堆砌。应用盖楼式展示形式的典型例子就是某易新闻——用户可以按照楼层依次向下浏览，虽然看得时候比较清晰，但因“盖楼式”的结构比较复杂、所占面积较大，在移动端上屏效会相对较低，可能影响用户的阅读效率；引用式：从名称上大家可以理解，用户 B 回复用户 A 时，B 的回复内容下方会显示 A 的评论内容。“引用式”的好处时便于读者理解，但劣势同“盖楼式”一样，移动端使用该样式会影响用户的浏览效率，在 PC 端上会更为适用；主题式、平铺式、盖楼式、引用式..展示形式虽然多样，大家可以根据自己产品的需要来选取合适的展示形式。3. “看评论”之评论排序方式不仅评论区的展示形式有四种，评论内容的展示顺序也有四种排序方式：评论按时间正序排列：按时间正序排列意为内容按照发布的时间由旧至新排列，其排列方式符合用户阅读时的逻辑顺序，用户可以通过时间线将大家的讨论内容串联起来，方便阅读、减轻了认知负担；评论按时间倒序排列：与评论正序排列相反，倒序排列会将新评论在上、旧评论在下，更适用于强调内容时效性的场景中；评论按热门程度排列：大家常看到的“精选评论”便是按照热门程度排列的——后台会计算出各条评论的“热度值”，衡量维度通常有评论的点赞数、回复数、或负反馈数等等。为了避免马太效应，热门程度的排列公式中通常也引入“时间衰退因子”，这对强调时效性的资讯app来说比较重要；评论按混合式排列：混合式排列方式简单理解可为上方评论“按热度”——展示精选评论，下方评论“按时间”——展示最新评论；这样排序使得用户既可以感受到热评的趣味性、专业性，也更有意愿来参与大家的讨论。看完了这些，你的产品评论区适合什么样的排序方式呢？4. “看评论”之正文、评论区的查看方式分析讲完了用户“在评论区看到了什么”，那我们就再来讲讲用户“怎么看去看评论”。首先是正文与评论区间的跳转，通常会用以下四种方式来实现：“看评论”·正文、评论区的跳转方式锚点定位、跳转至评论区：这种是比较常见的交互形式——点击评论icon后，通过页面的锚点定位直接跳转至评论区；待用户浏览完评论区内容之后，用户可再次点击评论icon返回至正文位置；上滑页面，评论区跟随在正文后：很多资讯 app 的评论区都跟随在正文尾部，在浏览完正文后，用户通过上滑页面便可以看到评论。对于用户的行为路径来说，这种方式是符合用户先阅读、后查看讨论、参与讨论的逻辑，但为了营收与数据，正文、评论区之间会夹杂了相关推荐与广告，会对用户的正常浏览造成一定的干扰；手势滑动、进入下一级页面查看评论：以某讯新闻为例，用户可以左滑直接进入评论页浏览；手势交互的好处是便于用户操作，但也具有一些的小“缺点”，如滑动进入下一级页面的操作是否符合用户认知、滑动手势是否在所有场景下都会适用等；评论内容以弹层形式呈现：在用户点击评论 icon 后，评论区以弹层的形式弹出——这是大多数视频类app常选用的，也是本次vivo浏览器评论区优化所采取的跳转形式。从手机屏幕的空间利用上，“正文内容”处于二维的x、y轴上，评论区以弹层的形式在z轴空间里交互，提高了手机屏效；从用户操作上来说，弹层的使用提高了操作效率，同时因弹层交互的普适性，用户的学习成本也较低；从内容的底层逻辑上来讲，评论属于资讯详情的一部分，用户通过弹层来进行资讯的延伸阅读，这种分层交互也符合详情页浏览的逻辑结构。“看评论”·评论区以弹层形式呈现5. “看评论”之评论、回复间的跳转方式分析对于“用户怎么看评论”，除了“怎么查看评论区”，也还有“怎么查看评论与回复”；后者的查看方式整理后大概有下图三种：1）在原位置直接展开更多“回复”：以美版某乎为例，其优势是操作成本、浏览成本都很小，弊端则是会影响到用户阅读下一条评论（屏幕滑动距离更长）；2）在下一级页面里再展示完整的“回复”；3）以弹层的形式来进行“回复”的完整呈现。“看评论”·评论区展示形式之评论、回复间的跳转方式根据以上五小考量点，大家可以根据自家的评论区特点及现状，选取合适的方式方法去做用户看评论的设计体验。“评论互动”时的三个设计考量点当完成了“看评论”的设计分析，那下一步就需要进行评论区互动时的设计分析啦。大家可以通过以下三点来考量：功能支持、手势操作、评论输入。“功能支持”以大家各自的支持产品功能为准，本文就不再赘述；这里就为大家简单讲解一下后两点的分析。1. “评论互动”之手势操作分析下面是对在不同类型的产品中，用户进行单击、双击、长按、滑动等手势操作反馈的整理：单击评论区内容：不同类型的产品，单击评论区内容的操作反馈会有所不同。如社交类 app，除了“评论”，也有“转发”等其他与之同等重要的功能，所以点击该类型产品的评论区内容时，会弹出“更多功能”弹层以让用户选择功能的使用；对于新闻资讯类 app，评论区是用户交流想法的地方，所以当用户点击评论内容，弹出输入框和键盘会更符合当下的用户预期，便于用户的操作使用；双击评论区内容：在社交 appIG 中，双击点赞的交互手势在产品的各个模块是通用的，用户自然而然就会有评论区“双击可赞“的认知。然而其他产品中，“双击赞”可能并不具有通用性。如果大家要在自己产品中选用双击手势的交互，可能要注意引导用户学习噢~长按评论区内容：通常情况下，长按是去使用评论区的更多功能。如下图，用户长按评论区，可以进行复制、分享、负反馈、翻译等操作，以满足用户在评论区的期望型功能的使用；2. “评论互动”之评论输入分析发评论路径分为了输入的“前、中、后“三阶段，大家设计时需注意以下三点：“评论互动”·评论输入之三阶段输入前告知：评论框里的默认文案可以起到引导用户评论、提示评论用语等的作用。如“说点什么吧”，可以促使用户去发表看法；如“有爱评论，说点儿好听的~”，可以侧面提示用户要文明评论等。大家可以结合自身的产品调性、设计目标，选择适合自己的文案风格；输入时协同：评论输入时，设计师需要考虑到不同场景下用户的评论诉求，提供合适的功能以提升用户的操作效率、使用体验。如团购 app 发评论时，输入框会提供“环境”、“服务”、“菜品”等标签，既降低了用户评论过程中的难度，也使得评论多维度、更丰富。同时，评论输入时大家也要注意异常场景下的防错设计，比方说误操作、键盘收起时，用户的编辑记录要帮他留下来喔；输入后反馈：发送评论后，产品需要给予用户明确的反馈结果，常见的有 Toast 反馈、评论区跳转定位等。大家注意啦，做评论区跳转定位时要给文本背景一个颜色变化的提示噢，避免用户在茫茫字海中迷失～总结以上内容就是评论区设计时需要掌握的对产品类别、看评论、评论互动三大维度、总计九个设计考量点的阐述。设计师们可以酌情参考文章内容，通过在各个考量点的打磨、创新、组合，打造适合自家产品的“最佳评论区设计”。轻松3招搞定评论区设计风筝KK：评论区在 APP 中有着不可或缺的地位，评论区又主要分评论入口、评论展示、评论排序三个方面，不同属性的 APP 评论区侧重点又都不一样。阅读文章 > 欢迎关注作者微信公众号：「VMIC UED」本篇来源：优设网原文地址：https://www.uisdc.com/comment-section-design
用户 形式 内容 搜索设计看似简单，展现形式上只有一个输入框和搜索按钮就可以了，但是里面隐藏了很多交互细节。最近工作中刚好有搜索相关的设计需求，今天就来总结下搜索中的交互细节设计。本文的主要内容包括：搜索的作用搜索栏的形式搜索设计的原则搜索的作用用户是懒惰的，不愿意花太多精力去记忆信息，“无脑刷”的抖音玩法让亿万用户乐在其中。因此产品设计时需要尽可能的降低用户的行为门槛，“千人千面”推荐机制越来越重要。但是搜索查询是用户主动行为，相对更有掌控感，始终都是产品设计中非常重要的方式。搜索主要是帮助用户从海量数据中快速找到想要浏览的内容，例如百度、谷歌等搜索引擎能够成为单独的产品，可以看出搜索在互联网时代具有极其重要的作用。主要包含以下两个方面：1. 降低用户的行为门槛搜索实现了简单的输入，快速输出，只要几个关键字就可以获得符合用户需求的内容，将原有的用户行为成本转移给系统，从而让购物消费更加快捷、轻松。而语音输入和拍照搜索进一步降低了用户行为门槛。2. 减少用户操作，缩短行为路径搜索功能可以帮助用户快速定位信息，从而提高了用户对内容的触达效率。例如当用户有明确的购物需求时，不需要一步步点击商品分类，选择商品类型、品牌等信息，就可以快速直达自己所需的商品。搜索的形式搜索栏是搜索功能的起点，内容不复杂，但是也有多种形式。我简单的将其分为完全形式、简化形式以及类搜索形式 3 种类型。1. 完全形式我们大多见到的搜索栏是由输入框和搜索按钮组成的，用户输入相关内容后，点击按钮或者回车就可以执行搜索了。在完全形式下，根据搜索范围的设定，又可以分为全量搜索和定向搜索两种形式。全量搜索就是直接对全平台内容执行搜索，在搜索结果中分类展示。例如腾讯云 Web 端搜索功能，用户只需要输入关键字进行模糊搜索就可以了。定向搜索则是用户可以预先设定搜索范围，可以减少后续用户的筛选操作。例如淘宝 Web 端搜索栏可以设定“宝贝、天猫、店铺”3 个搜索类别。微信搜索栏兼具了两者的功能，既可以直接输入关键词完成全平台内容搜索，也可以设定范围定向搜索。完全搜索栏包含了分类项、输入框、搜索按钮等形式，因此占据的页面空间也相对较大，更适合重搜索场景的产品。例如在电商移动端产品中，虽然页面寸土寸金，但是搜索栏仍然采用完全搜索栏形式，辅助关键词引导，可以更好的抓住用户视线。2. 简化形式简化形式主要用于弱搜索的场景中，通常只是用图标来告知用户存在搜索功能，更有利于页面空间布局。当然形式也是随着页面的不同而改变的。今日头条的首页都是采用了完全搜索栏的形式，进入到资讯详情页面时，用户的核心任务是查看页面信息，用户的搜索需求则变成了弱需求，只是提供了图标入口，能够满足用户的快捷操作即可。3. 类搜索形式如果用户没有直接的搜索需求，而是在浏览商品过程中，对某类型商品产生了兴趣，希望查看更多相似商品。电商平台专门增加了“查看相似”的功能，用户不需要输入任何内容，只需要点击按钮就可以查找相似商品，从而提高了用户的搜索效率。搜索的交互设计原则完整的搜索流程包含了各种细节。例如搜索栏的形式、光标停留、输入状态、异常数据、搜索结果、二次筛选等等。整个过程没有非常艰深的业务内容，主要是交互的细节设计，可以总结以下 3 个设计原则。1. 信息引导移动端产品中页面空间有限，搜索栏更多的是作为入口，通常会增加关键词引导用户点击。用户点击操作后会进入到专门的落地页面，里面平铺了各种搜索信息，例如搜索历史、推荐内容，甚至各类营销榜单等，方便用户快速操作的同时，增强的内容的曝光和引导性。而在 PC 端产品具有页面空间优势，用户的搜索过程完全是通过搜索栏完成的。为了做好用户引导，搜索栏中会增加历史搜索记录，下方增加推荐关键词，帮助用户快速完成搜索。同时也可以唤醒用户对某些商品的兴趣和记忆，从而挖掘用户潜在的搜索需求。2. 用户效率搜索是效率型操作，如何快速帮助用户完成输入、结果查询是最主要的设计目标。例如当光标停留时，搜索栏就会呈现各种已有信息，方便用户选择输入。用户输入过程中，搜索栏通常会展示关键词联想信息，方便用户快速选择相关内容。淘宝甚至给出了二级的商品标签，引导用户更准确的定义商品，从而提高搜索的准确率，最终更好的提升用户的购物效率。当关键词与内容不匹配时，反馈结果前置可以减少用户的后续操作。腾讯云搜索栏输入的关键词不符合内容时，并没有跳转到结果页面再给出信息反馈，而是直接在搜索栏中做出反馈，从而减少了用户的跳转次数。由于 PC 页面的展示空间更大，用户的行为成本相对更高，为了帮助用户实时搜索，首页内容滚动时还会增加吸顶搜索浮层，方便用户快速操作。3. 隐私保护搜索历史有利有弊，不经意间可能会泄露自己的隐私。为了打消用户的顾虑，搜索通常都会增加清除记录功能。而在今日头条中细化了隐私保护项，搜索历史不是简单的全部清空，而是可以单独删除，便于用户保留所需的内容。另外还增加了无痕搜索模式，避免用户搜索之后会忘记删除关键词的场景。写在最后设计就是细节不断打磨提升的过程。搜索中还有很多细节设计，例如关键词的视觉引导性、常搜选项置顶、搜索结果的二次筛选等等，今天就不一一讨论了，欢迎大家留言交流。如何做好浏览器搜索设计？我总结了这9个建议对于搜索，百度百科给出的基本解释是: 给予一定的条件后再寻求,搜查。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/3-search-design-principle
表哥
在路上
