入口 卡片 功能 一、功能入口概述不论是在设计中还是生活中，入口对于我们来说都很重要。比如当你需要进入到一个空间时，你需要知道门的位置并清楚如何打开它。比如下图中左侧的门就非常明显，而右侧的门则需要仔细辨认了。还有的入口即使你知道它存在，但也根本弄不懂它的含义，如下图你能分辨出男女厕所吗：由此可见，在入口设计中保持其清晰与直观是非常重要的。在 B 端页面的设计过程中，我们同样会面临很多入口的设计，比如需要从当前页面下钻或者跳转至其他功能的时候，而这类入口我统称为功能入口。那么我们在面对这类问题时，到底有多少种形式且如何选择呢，本人根据实践以及资料整理出了这篇文章，对 B 端中常见的功能入口都进行了对应的总结和归纳，希望对大家有所帮助。作者往期文章：B端对齐如何设计？我总结了这3种常用场景！B端设计中如何做好对齐设计？阅读文章 > 二、功能入口形式在这里我根据样式和场景将我们常见的各类入口分为以下几类：文字入口、图标入口、卡片入口、自定义入口。那么这些入口的使用场景都有哪些区别呢，我们接着往下看。1. 文字入口文字入口应该是最常用的，也是我们最常见到的。其大量分布于我们的页面之中，对于文字按钮，通常会用以下几种方式：文字变蓝。这是为了和普通的文本形成区分，从表达上直接告知用户当前可点击；文字+图标，比如箭头或者图标。这种形式在很多界面中也会被用到；文字+底色或者描边，这其实就是我们常用的填充按钮或者描边按钮。那么纯文字是否可以作为入口呢，答案是肯定的。纯文字的形式一般存在于固定的组件入口，比如弹窗的取消，以及网站常见的底部导航：在这里我们注意到目前有很多 B 端产品会有这样的细节，对于在当前页面下钻的入口，可以用纯文字表示，对于需要下钻或者跳转页面的入口，会在后面加一个符号的提示按钮，达到提前告知用户页面跳转的目的，表意更明确。这里还请大家思考一个问题，如果你的当前列表承载了多个入口，那么此时你应该如何放置这些功能让用户更好理解呢。这里有两种方式：A.将功能入口以文字的形式直接放出来，列表本身不承载任何入口；B.将列表整体作为一个入口，其余功能以文字的形式作为另一个入口；那么这两种功能到底该如何取舍呢。个人认为，这取决于当前功能的主次级关系，如果当前功能都为平级，那么直接都放出来即可。如果某个功能为主要操作，那么列表本身点击则为进入该功能，其余功能都为辅助。2. 图标入口图标入口的使用频率也很高，比如我们常见的编辑、删除或者设置等，都用了图标按钮来进行传达。但图标按钮在使用时需要注意 2 点：1. 一般对于用户认知度很高的按钮，比如电话、喜欢、关闭等，可以直接用图形表达，用户也能够充分理解其含义。2. 对于用户认知度不高的按钮，我们最好图标配合文字按钮进行说明。最直观的方式是直接图标+文字，比较隐蔽的方式是 hover 图标再进行文字含义的解释。这两种都可以进行使用。举个实际的例子，你可以通过上下两个图片的图标按钮，看你在默认情况下能够识别几个图标的含义：是不是 coding 的图标如果不进行 hover 查看说明基本都不认识，而微博的图标则基本都能够辨识。3. 卡片入口卡片入口则区别于常规的入口形式，卡片入口可以让我们对其内容区域有更加灵活的发挥方式。卡片一共可以分为三种形式：纯卡片、卡片+常驻入口、卡片+隐藏入口。「纯卡片入口」这种形式我们很常见，就是在卡片里面可以简单介绍下该功能的信息，我们可以通过 hover 卡片样式上进行对应变化，用户直接通过点击卡片就可以进入到对应入口。这种卡片形式不用刻意表达点击样式，因为一般卡片在用户视角下都是可以点击的。我们更多的关于则是卡片的表现形式。如果大家对表现形式感兴趣，后续有时间可以整理一波，这里就不再赘述。「卡片+常驻入口」这种形式适合其余入口也比较重要的时候，可以将多入口进行外露。这样便于用户能够一眼发现，缺点是可能整体视觉呈现上不够美观。而卡片本身是否提供入口呢，这其实跟之前文字的思考一样，如果我们本身对某个功能的点击权重较大，你就可以赋予点击整体卡片的功能，否则你可以去掉点击卡片本身的功能。「卡片+隐藏入口」这种设计形式在 B 端中也用得非常多。其既可以达到多入口的功能，也避免整体影响页面的美观性。缺点就是在用户的第一眼呈现上会隐蔽一些，需要用户主动发现。我们可以根据当前产品的业务场景需求，来选择不同的卡片入口形式。4. 自定义入口自定义入口更多是设计师自定义的某类入口，他不限于样式，比如可以是某类异性形状。但此类入口一定要让用户明确其是可以进行点击的。比如你可以通过卡片形式或者加指向性的图标来让用户知道。三、入口的出现场景我们在进行入口设计的过程中，基本会有三种出现场景：常驻类、隐藏类以及场景类。1. 常驻类入口常驻类入口通常是比较重要的，需要用户高频操作的。根据业务的需求场景我们可以选择最重要的功能作为常驻入口外露，比如语雀文档的新建文档、知识库和模板中心则作为高频入口放了出来。2. 隐藏类入口对于很多操作，他的重要程度并不高，且操作较多的情况下，我们会考虑将其功能入口在默认情况下隐藏，用户需要 hover 才能看到功能入口，或者隐藏在...里面：3. 场景类入口这种入口的用法则更为高级，一般当用户需要该功能入口的时候，它就可以主动出现。比如飞书文档当你使用 ctrl+z 撤回操作规定次数后，其会在顶部出现历史记录的入口，并提示你可以直接进入历史文档查看。这种还体现在当你在长文档区域滑动操作指定距离后，其右下角就会出现返回顶部的按钮，来让用户更快地回到顶部。但这种入口场景的建立的前提，一定要在熟知用户操作的前提下进行，才能给用户更好的体验，否则只会带来尴尬的体验。这不由得让我想起了之前微博上线的时间预约功能，其用在新闻大事件的时间预约时就会非常尴尬，比如「你预约明上午 10 点半袭击 FBI 办公室」。好了，本次的入口分享就到这里了，希望对大家有帮助。也是今年的最后一篇了，希望大家新年快乐，明年过得更好～欢迎关注作者微信公众号：「阿东的设计体验馆」本篇来源：优设网原文地址：https://www.uisdc.com/function-entry-design
图标 入口 快速 编者按：本文从组件介绍、使用场景、设计要点、样式拓展4个方面，帮你快速熟悉UI组件中的金刚区设计。上期回顾：新手科普！4个方面帮你快速熟悉UI组件中的瀑布流编者按：本文从组件介绍、使用场景、设计要点、样式拓展4个方面，帮你快速熟悉UI组件中的瀑布流设计。阅读文章 > 一、组件介绍快速入口 (Quick Links / Quick Access)，国内也会用颇具东方特色的「金刚区」来称呼。在一个结构比较复杂的 APP 首页或者主页面中，快速入口往往扮演着功能导航、曝光和引流的运营角色，通常表现为一组有序排列的图形入口。快速入口不管是位置还是权重都处于页面的中心地带，所以设计时需要格外注意基础和细节。这里我会介绍一些快速入口通用且基础的设计方法，但因为这个组件变化非常多样，所以可能无法面面俱到。诸如更符合页面需要的布局方式，以及图标如何绘制等，这些将是大家需要长期打磨练习的地方。二、使用场景当一个页面内除开本身需要承载的内容之外，还需置入超过四个功能模块的入口时，我们就可以考虑使用快速入口这个占用空间小，信息密度大且美观的入口展示形式，故而在多数 App 中快速入口集中出现在主页和个人页；而在诸如美团、大众点评等综合性更强的 App 中，下级分类页面也会使用快速入口。所以总结下来，快速入口大多出现在：首页、下级主页、个人页这三个地方。快速入口在页面中的地位应该无需赘述，各位用多了 APP 也能总结出它常常出现在主要页面中中间靠上的核心区域。如果有 Banner，则通常会出现在 Banner 下方，如果没有 Banner，则会直接置于标题栏下方。三、设计要点1. 布局方法① 页面内等分等分的快速入口可以表现为一个 (1~3)行 (4~5)列的矩阵，6 列的也有（起点精选页），但是比较不常见。设计时我们优先确定每个背景视图的尺寸，如何确定呢？首先是宽度，单个视图的宽度具体是多少其实并不重要，重要的是总宽度，即 390 减去页面两侧边距的大小（边距不固定，根据实际情况设置），再用这个数值除以列数，这就是背景视图的宽度。高度则需要根据图标和文字区域的总高来确定，例如图标 (包含安全区域或几何背景) 为 4444pt，文字段 12pt 苹方默认高 17pt，图标和文字之间给 4pt 间距，上下边距 8pt，那么视图的总高就是 44+17+4+82=81pt。当然高度这一项中，上下间距的自主性比较大，你也可以选择留更小或更大的间距来调节矩阵在视觉上的松紧程度，尤其是多行矩阵，更需要注意上下行之间的远近，这会影响观感。总之一切都以设计师预期的视觉效果为准。② 超范围滚动尽管大多数等分的入口矩阵同样可以采用多分页滚动的形式 (淘宝、京东)，不过我们这里说的超范围滚动则更接近于滚动卡片那种非等分的，会在最右侧边界被裁断的形式，例如网易云、Keep。在这种布局下，我们需要优先确定图标与图标之间的间距，将它们调整到第一屏有 4 至 5 个，且默认露出下一个图标的一部分。最左侧的图标与其余页面元素左对齐即可。③ 主副型布局有些 APP 需要更加明确地区分入口的权重，则会采用强弱对比的主副型入口，主副型入口属于等分的一种，两类入口的背景视图可以不同高且不同宽 (支付宝)，也可以同高也高宽 (马蜂窝)。在实际设计过程中，按照等分的规则各自确定两类入口的背景视图区域即可。2. 视觉形式① 图标 / 文字我们日常使用的绝大多数 APP 都采用了上图标下文字的视觉形式，这种形式具有更普遍的适用性。② 卡片形式之前在瓷片区的文章中有提到过，一些快速入口会像瓷片区一样做成卡片拼贴的样式，指的就是如下图所示的这种视觉形式。卡片形式的入口对图形设计能力要求颇高，尤其是几个权重最高的入口，由于快速入口只能使用图形来修饰内容，为了匹配这几个入口的权重，设计师往往需要绘制精细度比一般图标更高的插画，所以我并不推荐新手尝试这种样式。③ 主副形式与主副型布局相对应的视觉形式，通常会采用不同类型的图标来表达不同的权重，权重高者往往使用更精细的插画图标，权重低者则使用基础的线性、面性或线面混合图标。而像支付宝、美团这样的 App，反而使用最简单的线性图标来表达功能之核心，之基础；权重则使用不同的背景色来物理区分。3. 图标类型① 基础渐变在基础图形上加入了同色相不同明度的渐变，就可以做出一套简单、够用的快速入口图标，尽管不适合风格化强烈的 App 页面，但胜在通用性强，首页、个人页都能采用。② 几何背景指的是图标拥有一个圆角矩形或者圆形的纯几何背景，实际图标则一般使用纯色或渐变。这种类型的图标好处是更容易做到视觉大小的统一，并且由于实际图标方面不需要太多的修饰，设计起来也更加简单。不过几何背景的图标也有进阶的变体，背景上可以做成不规则形状，图标上也能加入更多细节 (甚至 3D)，总之能做得非常花哨，例如美团外卖的入口图标：③ 色彩交叠因图标中存在重叠的两部分而使得这部分色彩更深。这个类型的图标本质上与渐变没有区别，都是色彩运用的一种手段，只不过交叠类图标使用得比较少见，所以会相对更具辨识度。④ 扁平插画在图标中直接使用插画，自由度更高的同时，风格化也更明显，非常有利于品牌风格的塑造，唯一的缺点是对设计师的要求相对偏高。对插画来说，纯扁平或是微渐变都是可以的，前者更易表达场景，后者则往往会有更加立体的观感。⑤ 玻璃拟态近年来大火的风格化设计之一，做起来简单却很有视觉效果。特征是图标中的会出现两个上下关系的层级，下层往往采用渐变或纯色的色块，上层图形则会模拟亚克力、云母、磨砂玻璃的质感。具体做法为背景模糊，以及为自身边缘添加高光描边。近年来越来越多的在主流 App 中出现，例如飞猪、站酷。实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。阅读文章 > ⑥ 实物图片实物图片一般多用于电商类 APP，在进行商品分类时会直接采用特征典型的商品，优点是比图标更直观、易辨认，缺点是对图片的要求较高，对视觉大小统一的调整也需要更加细致。当然，人像也算是实物图片的一种，多用于影视类 App。除了上述 6 个比较常见的分类，快速入口这个区域的图标还有很多奇特的类型，例如 2.5D 轴测图、文字类、3D 类，甚至多种类型图标混合使用等等。因组件本身的设计开放性极大，几乎没法全部涵盖到。所以图标类型方面的知识，还需要大家自己在工作和学习中慢慢积累。四、样式拓展1. 自如自如 APP 的快速入口设计向来别出心裁，值得大家一直放在手机里观察它的设计改版。自如在这一版本中，将 12 个格子其中的两个格子合并成了一个宽格，既强调了这个格子的内容，又让这三行图标发生了一定变化，不至于枯燥。2. 起点在快速入口中加入动效听起来是个很多余的做法，因为对这些图标的交互几乎没有观察后续反馈的必要(都直接跳到另一个页面了)。不过起点在这里做了一个动效的示例——在某个你想强调的图标中加入循环动效，可以起到吸引用户注意力的作用。3. 其他样式结尾快速入口的组件就介绍到这，后续所有有关组件的介绍都会同步更新！本篇来源：优设网原文地址：https://www.uisdc.com/quick-links
用户 页面 入口 本文是关于签到功能的视觉汇总分析。签到体系分析1. 定义：吸引用户定时访问产品，通过点击某个按钮或访问某个页面表明自己使用了该产品或功能。当用户完成签到，会被给予奖励以强化用户行为，从而提高用户粘性。常见名称为“签到”、“打卡”，或者根据具体场景，命名为“喂养小鸡”、“收取能量”等。2. 目标：用户目标：获得实际利益。实际获益=签到奖励-签到成本，奖励可分为物质奖励和精神奖励两类；产品目标：实现“签到-奖励-连接活动-分享-拉新-强化行为”的正向循环；商业目标：通过签到来增加用户访问，提升产品活跃度，进而提高产品的商业价值（广告投放、服务付费等）。3. 体验核心：给用户提供足够高的价值感知；尽可能降低用户需要付出的时间和操作成本，实现用户利益感知最大化。4. 签到方式：手动签到：用户主动点击具体控件，完成签到操作。是最常见的签到方式。自动签到：用户登录产品，即累计一次签到。是最简易的签到方式，存在感较低。互动签到：用户在若干个连续的步骤引导下，完成签到操作。复杂性高，对应趣味性也要高，否则无法支撑用户的操作成本。5. 签到周期：每日签到：每日完成签到任务，获得奖励。连续签到：确定固定周期（一周、双周、一月等），用户在固定周期内，不可断签，完成签到，获得奖励。累计签到：确定时间段（双周、一月等），用户在该时间段内签到，可以断签，只要累计次数满足要求，即可获得奖励。混合签到：用户以每日签到的形式获得奖励，同时在周期内，奖励有阶梯型提高。6. 签到适用范围：适用于：以内容为驱动的产品类型，如社区、电商、资讯类产品，签到的存在提升了用户打开产品的频率，对于养成用户使用习惯有积极作用。不适用于：以效率、功能为驱动的产品类型，如天气、翻译、笔记类产品。这些产品对应用户的刚性需求，一旦用户没有需求，签到行为和产品属性无法形成关联。此时用户得到的奖励不足以抵消用户的操作成本。7. 涉及到的设计元素：签到入口：通向签到页面的入口，一般有固定的安置位置，贴合用户认知，减少操作成本。签到引导弹窗：可直接在弹窗上完成签到，或者点击弹窗跳转签到页。签到页面签到周期：7 天为一个周期，不允许断签。奖励梯度递增，增加吸引；沉没成本，损失厌恶。更常见，规则简单，目的性强，路径短。日历签到：以日历形式记录签到，允许断签，累计到一定签到数量后，获得额外收益。成就感。签到成功弹窗无需用户点击某一具体按钮，直接进入签到页后直接弹出，降低用户操作成本。需要用户点击签到按钮，跳出弹窗，示意签到成功。签到成功弹窗的意义：给用户正反馈。告知用户当前收益，提示用户未来收益预期。签到设计1. 签到入口签到入口是将用户引导至签到页面的控件，一般有固定的位置。常见的入口位置有以下几种：首页左上角首页导航栏右侧首页频道入口搜索框个人中心页面独立模块签到入口除了位置不同，示意方式也有不同，常见的示意方式分为 5 类：签到图标签到图标+文字红包图标动效IP 情感化需要注意的一点：部分签到入口有两种状态，未签到和已签到。最好可以明确区分两者。2. 签到引导弹窗根据签到的触发方式，自动签到一般使用弹窗的形式承载内容，信息较为简单。手动签到常需要用完整页面承载内容。自动签到弹窗和引导签到弹窗的区别在于：前者在弹窗主动跳出之后，无需操作，即算为当日完成签到，而后者意将用户引导至签到页面，如用户直接关闭弹窗，不计为签到成功。虽然此类弹窗都是主动跳出，前者重点在于引导用户参与活动，而不是签到本身。最常见的签到流程：从签到入口进入签到页面签到（点击按钮）签到反馈（成功弹窗）已签到状态3. 签到页面以上两种方式均可设置不同奖励梯度，进度条式更加着重于“连续”的感觉，而卡片式更加强调第七天的奖励特别丰厚。两者本质相同，卡片式可以更充分展示每天具体的激励内容。月历式签到，显然周期更长。若设定为连续签到，用户需要花费大量时间，此时奖励必须具有强烈吸引力，往往是物质型奖励。通过“采摘”的形式，进行签到。签到奖励为“盒花”，即虚拟货币，可以在商城抵扣现金。除了签到之外，还可以通过做任务等方式获得盒花。此类签到往往趣味性很强。将签到和任务融合到游戏生态中，通过精彩的视觉表现，强化了激励。点击引导用户点击按钮，方可完成签到，点击引导是有必要的。「第一次」进入签到页时，需要提供新手引导，提示点击何处。「固定引导」则出现在每次进入签到页面时，按钮动效或者手势提示，都是不错的方案。3. 成功反馈弹窗当用户点击签到按钮后，产品给出反馈。反馈的形式有以下几种：toast弹窗不清楚什么是 Toast ？看这篇就懂了：本篇来源：优设网原文地址：https://www.uisdc.com/check-in-function-design
张大湿
飞翔的企鹅
