网站珍藏按钮设计的沉点 ，不只是画出一个书签、星标或爱心图形 ，而是让用户在看到按钮时马上领略“能够保留” ，点击后也能确认内容已经被保留。一个可用的珍藏按钮 ，必要同时处置图标鉴别、文字注明、未珍藏与已珍藏状态、页面地位、点击反馈 ，以及分歧设备上的显示清澈度。具体选取哪种形状 ，取决于内容出现方式、操作频率和珍藏后的治理需要。
先确定珍藏按钮要解决的具体问题
珍藏按钮通常呈此刻文章、商品、图片、视频、课程或内容卡片中。用户点击它 ，往往不是为了当即实现某项工作 ，而是但愿稍后再次找到当前内容。因而 ，设计时要让三个信息陆续产生：这里能够珍藏、点击已经生效、之后可能再次找到。
若是按钮只有一个没有文字的图形 ，熟悉网站规定的用户可能可能理解 ，但初次接见者不定能分辨珍藏、点赞、关注和参与购物车。尤其是爱心图标 ，既可能暗示喜欢 ，也可能暗示珍藏。对职能分辨要求较高的网站 ，推荐使用书签形图标 ，或者在图标旁直接保留“珍藏”文字。
- 珍藏前：使用线性书签、星标或其他低填充图标 ，搭配“珍藏”标签。
- 珍藏后：通过填充、色彩变动和“已珍藏”文字形成明确的状态切换。
- 操作反�。�点击后当即出近况态变动 ，必要时用短暂提醒注明“已珍藏”。
- 再次点击：应能取缔珍藏 ，且取缔作为的寓意不能被暗藏在吞吐图标中。
在内容卡片和列表中使用：优先保障紧凑与可扫读
当珍藏按钮放在资讯列表、商品卡片、图片瀑布流或搜索了局中 ，页面通常同使毓示好多内容。此时按钮不能抢过标题、封面和主题信息 ，设计沉点是让用户急剧浏览时依然找到它。
卡片数量多时 ，选取图标加短文字
列表中的按钮能够放在卡片右上角、题眼前方或底部操作区。若卡片空间足够 ，建议使用“书签图标＋珍藏”大局；若是页面极度紧凑 ，能够仅显示图标 ，但要提供悬停提醒、可识此外焦点形状和明显的已珍藏状态。按钮与标题、价值或重要操作之间应留出间距 ，预防用户误点。
多张卡片同时出现时 ，未珍藏状态能够使用灰色线框 ，已珍藏状态使用品牌色或深色填充。不要只依附色彩分辨 ，由于低对比度屏幕、色觉差距和移动端强光环境都可能减弱色彩提醒。图形概括、填充方式或文字变动应至少保留一种独立的状态信号。
高频珍藏时 ，预防每次都弹出复杂窗口
若是用户会陆续珍藏多篇文章或多个商品 ，点击按钮后直接实现珍藏更顺畅。若网站支持“珍藏加妆“稍后阅读”或多个分类 ，能够先实现默认珍藏 ，再提供“移动到分类”“治理珍藏”等后续入口。每次点击都强造打开分类窗口 ，会打断陆续浏览 ，也会让珍藏作为显得过沉。
在文章详情和内容页面中使用：优先诠释职能与反馈
文章详情页、课程页和视频页的内容更齐全 ，用户通常已经投入了肯定把稳力。此时按钮不用极端暗藏 ，放在标题区域、作者信息左近或内容操作栏中更容易被发现。按钮旁保留“珍藏”文字 ，通常比单独搁置一个幼图标更稳妥。
若是珍藏是“稍后阅读”的重要入口 ，能够使用“珍藏”“保留到珍藏加妆等明确表白；若是珍藏后会参与阅读清单 ，也能够使用“参与清单”。不要让统一个图标在分歧页面代表分歧职能 ，不然用户很难形成不变的操作预期。
详情页的反馈能够比卡片场景更齐全。点击后 ，按钮从“珍藏”造成“已珍藏” ，同时出现简短提醒；提醒不应遮挡正文 ，也不宜停顿过久。若用户必要登录能力保留 ，应先保留当前页面和用户正本的珍藏意图 ，再注明登录后能够跨设备查看。登录提醒应萦绕职能自身 ，不要用夸大案牍造作紧迫感。
按设备选择尺寸、间距和图标清澈度
网站珍藏按钮设计中的“高清” ，不只是导出一张像素更大的图片。真正影响识此外 ，是图标在现实显示尺寸下是否维持概括明显、边缘滑润、线条粗细一致 ，以及图标与文字之间是否有足够对比。
移动端：优先思考触摸区域
手机上的珍藏按钮必要适合手领导击 ，不能只把一个很幼的书签概括当作齐全按钮�？傻慊髑蛴ο灾笥谕夹巫陨� ，按钮之间也要留出间距 ，出格是珍藏、分享、更多操作陆续分列时。图标即便缩幼 ，也应保留书签缺口、星形概括等关键特点。
移动端不适合把未珍藏和已珍藏状态做成险些一样的浅灰色。珍藏后能够扭转填充方式 ，并同步更新文字或辅助提醒。若页面布景复杂 ，建议为图标提供清澈的按钮底色或天堑 ，而不是直接叠在图片上。
桌面端：补充悬停、键盘和焦点状态
桌面网站能够利用悬停状态援手用户确认按钮用处 ，例如显示“珍藏”提醒或轻微扭转边框色彩。但悬停提醒不能代替按钮自身的名称 ，由于触摸设备没有悬停作为。使用键盘浏览页面时 ，按钮也应有显著的焦点概括 ，不能由于设计钻营简洁而齐全移除。
若是按钮使用图片素材 ，优先选择可缩放的矢量图标；使用通明布景的 PNG 时 ，应查抄分歧布景上的边缘成效。图标导出前要在现实页面尺寸、淡色模式和深色模式中测试 ，预防出现细线隐没、填充发糊或通明边缘显著的问题。
凭据珍藏数量决定是否展示数字
珍藏数量并非所有网站都必要展示。对于幼我内容库、文章稍后阅读等场景 ，用户更关切“我是否珍藏过” ，数字可能会分散把稳力。此时保留图标和状态文字即可。
若是珍藏人数自身能援手用户判断内容热度 ，能够在图标旁展示数量。但数字必须与现实寓意一致：它是累计珍藏人数、当前珍藏总数 ，还是用户自己的珍藏数量 ，页面应预防抽象。数量从零变为一、从一变为零时 ，也要与按钮状态同步更新 ，不能出现图标已经珍藏而数字仍未变动的情况。
让按钮视觉统一 ，而不是只单独画一个图标
珍藏按钮必要放进整套网站界面中判断。图标线宽应与分享、评论、点赞等操作维持靠近；按钮圆角、内边距、字体大幼和品牌色也应遵循统一套组件规定。单独看很精彩的珍藏图标 ，若是放进其他操作后显得过大、过亮或过于装璜 ，依然会粉碎页面层级。
可以为珍藏按钮筹备一组状态素材 ，蕴含默认、悬停、按下、已珍藏、禁用和加载状态。若网站有深色主题 ，还应查抄已珍藏色彩在深色布景上的对比度。图标的变动应克造 ，短暂的缩放或填充动画能够援手用户确认操作 ，但不宜参与过长、过强的弹跳成效。
颁布前查抄这几个现实场景
- 第一次看到按钮的用户 ，能否在不猜测的情况下理解它是“珍藏”而不是“点赞”？
- 点击后 ，用户能否在一秒内确认珍藏已经成功？
- 再次进入统一内容时 ，已珍藏状态是否依然保留？
- 列表中陆续点击多个按钮时 ，页面是否会频仍弹窗或跳转？
- 移动端单手操作时 ，按钮是否容易点击且不误触相邻职能？
- 图标缩幼、放大、切换淡色和深色布景后 ，概括与文字是否依然明显？
- 取缔珍藏时 ，按钮案牍和数量是否同步变动？
因而 ，网站珍藏按钮设计不应只从“使用哪个图标”起头 ，而应先判断按钮地点的页面场景和珍藏后的使用蹊径�？ㄆ斜砀闯两舸铡⒙叫僮饔爰本缂�；详情页面更看沉职能注明、状态反馈和后续治理。确定场景后 ，再选择高清图标素材、色彩、文字和交互状态 ，能力让珍藏按钮既容易被找到 ，也真正援手用户保留和找回有价值的内容。
slwol68gnm0xckrjomb073ekigmdpr1
Android版
iPhone版