网站珍藏按钮设计的沉点，，，，，不只是放一个心形或书签图标，，，，，而是让用户可能急剧判断“这个内容能否保留”“我是否已经珍藏”以及“之后去哪里找回”。。。。。。。对于图片图集、文章、商品、课程或工具页面，，，，，相宜的按钮地位、图标素材、状态反馈和珍藏页面入口，，，，，城市影响用户是否愿意使用。。。。。。。通常来说，，，，，内容必要被反复查看或比力时，，，，，珍藏职能才有明确价值；；；；；若是只是一次性操作，，，，，则不用为了增长按钮而增长复杂交互。。。。。。。

网站珍藏按钮设计，，，，，先要确定用户到底要保留什么吗？？？？？

必要。。。。。。。珍藏按钮的形状和地位，，，，，应先遵从保留对象，，，，，而不是先决定使用“爱心”还是“书签”。。。。。。。分歧内容的珍藏主张并不一样，，，，，按钮承担的信息也会有所区别。。。。。。。

• 图片、灵感和设计素材：用户通常但愿稍后集中浏览，，，，，因而按钮应强调急剧保留、批量查看和再次进入。。。。。。。
• 文章、教程和课程：用户可能临时没有功夫阅读，，，，，按钮案牍能够更明确，，，，，例如“珍藏文章”或“稍后阅读”。。。。。。。
• 商品、服务或规划：用户通；；；；；峤斜攘Γ，，，，珍藏后最好保留名称、价值、缩略图或关键属性，，，，，方便回访。。。。。。。
• 工具、模板和职能页面：珍藏行为可能靠近快捷入口，，，，，按钮必要尽量靠近页面标题或重要操作区域。。。。。。。

若是网站只是想表白“喜欢”，，，，，能够思考点赞或推荐，，，，，不愿定使用珍藏按钮。。。。。。。珍藏往往意味着用户但愿以来再次找到该内容，，，，，因而它必要和幼我列表、珍藏夹或汗青纪录成立联系。。。。。。。将“点赞”和“珍藏”都设计成一样的心形图标，，，，，容易让用户误会操作了局。。。。。。。

确定保留对象后，，，，，按钮应该放在图片上、标题旁还是操作栏？？？？？

地位的选择取决于页面密度、内容尺寸和用户的重要浏览方式。。。。。。。图片图集通常适合在卡片上提供快捷珍藏，，，，，但文章和商品详情页更必要明确的操作区域。。。。。。。

图片卡片和图集页面

在图片卡片中，，，，，珍藏按钮常放在封面右上角、右下角，，，，，或卡片底部的操作区。。。。。。。封面面积较大、图片对比度稳按时，，，，，能够使用叠加式图标按钮，，，，，削减卡片高度；；；；；若是图片色彩复杂、文字较多，，，，，图标容易被布景滋扰，，，，，此时更适合放在题眼前方或卡片底部。。。。。。。

图集页面还要思考陆续浏览。。。。。。。用户可能急剧翻阅多张图片，，，，，若是每张图片的按钮地位不休变动，，，，，会增长操作成本。。。。。。。固定在画面统一侧，，，，，或让按钮追随统一的操作栏，，，，，通常比随内容自由摆放更容易理解。。。。。。。对于缩略图网格，，，，，按钮不能过。。。。。。。，，，，不然用户很难正确点击，，，，，也容易误触打开图片。。。。。。。

文章、商品和详情页面

详情页中的珍藏按钮能够靠近标题、分享按钮或重要操作区。。。。。。。若页面已经存在“采办”“报名”“下载”等高优先级操作，，，，，珍藏按钮不宜使用同样能干的色彩和尺寸，，，，，以免减弱重要转化作为。。。。。。。对于阅读类页面，，，，，标题旁或顶部工具栏比力相宜；；；；；对于商品页面，，，，，珍藏按钮能够放在商品信息区，，，，，同时保留价值、规格等关键信息。。。。。。。

移动端必要出格把稳触控区域。。。。。。。图标自身能够维持简洁，，，，，但按钮的可点击领域应足够大，，，，，按钮之间也要留出距离。。。。。。。把一个很幼的心形图案直接当作全数点击区域，，，，，往往不适合手指操作。。。。。。。

地位确定了，，，，，若何让珍藏状态一眼可见？？？？？

一个齐全的网站珍藏按钮设计至少应试虑未珍藏、已珍藏和操作反馈三类状态。。。。。。。用户点击之后，，，，，若是只有色彩轻微变动，，，，，或者页面没有任何提醒，，，，，就无法确认操作是否成功。。。。。。。

• 未珍藏：使用空心书签、空心心形或“珍藏”文字，，，，，阐发为可执行状态。。。。。。。
• 已珍藏：使用实心图标、填充色或“已珍藏”案牍，，，，，确保与默认状态存在显著区别。。。。。。。
• 点击反。。。。。。。能够通过短暂动效、提醒文字或计数变动通知用户操作已实现，，，，，但不宜使用过长的动画。。。。。。。
• 取缔珍藏：点击已珍藏状态后，，，，，应明确是立即取缔，，，，，还是先弹出确认。。。。。。。频仍操作的图片列表通常适合直接取缔，，，，，并提供短暂撤销入口。。。。。。。
• 异常状态：若是必要登录、网络中断或保留失败，，，，，应注明原因，，，，，并给出下一步，，，，，而不是只让图标恢复原状。。。。。。。

状态不能只依附色彩分辨。。。。。。。红色和灰色对部门用户并不容易鉴别，，，，，最好同时扭转图标填充方式、文字或辅助注明。。。。。。。键盘操作时，，，，，也应有清澈的焦点形状；；；；；使用辅助技术的用户必要知路按钮名称和当前状态，，，，，例如“珍藏文章，，，，，当前未珍藏”或“取缔珍藏，，，，，当前已珍藏”。。。。。。。

状态明显后，，，，，图标按钮、文字按钮和组合按钮怎么。。。。。。。？？？？

三种大局各有合用场景，，，，，没有一种形状适合所有网站。。。。。。。选择时能够从页面空间、用户熟悉水平和操作沉要性三个方面判断。。。。。。。

若是网站面对的是设计师、内容珍藏者等熟悉图标操作的用户，，，，，图片卡片上使用书签图标通常足够；；；；；若是用户群体跨度较大，，，，，或者珍藏职能直接影清脆续流程，，，，，使用“珍藏”文字或图标加文字会更稳妥。。。。。。。不要为了钻营简洁，，，，，把按钮设计成难以辨认的抽象符号。。。。。。。

心形图标更容易被理解为喜欢、点赞或关注，，，，，书签图标通常更靠近“保留”和“稍后查看”。。。。。。。但图标自身不是固定规定，，，，，最终仍要结合网站已有的图标语言。。。。。。。若是其他页面都使用心形暗示珍藏，，，，，忽然改成书签，，，，，反而可能粉碎一致性。。。。。。。

网站珍藏按钮要不要和珍藏页面一路设计？？？？？

若是用户只是一时保留一两项，，，，，按钮反馈和单一列表入口可能已经足够；；；；；若是珍藏内容会持续堆集，，，，，就必要同时思考珍藏页面。。。。。。。按钮承诺的是“以来能够找回来”，，，，，珍藏页面则掌管兑现这个承诺。。。。。。。

珍藏页面至少应保留内容缩略图、标题、起源或分类等鉴别信息。。。。。。。对于图片图集，，，，，能够增长筛选、排序或分组；；；；；对于文章和课程，，，，，能够显示阅读进度或更新功夫；；；；；对于商品，，，，，则能够显示当前价值、库存或状态变动。。。。。。。内容数量较少时，，，，，单一列表更易使用；；；；；数量较多时，，，，，再思考分类、搜索和批量治理，，，，，预防一路头就参与过多职能。。。。。。。

按钮与珍藏页面的定名也要维持一致。。。。。。。若是按钮写“保留”，，，，，页面却接装我的喜欢”，，，，，用户可能不确定两者是否属于统一职能。。。。。。。珍藏成功后，，，，，能够提供“查看珍藏”的入口，，，，，但不要强造用户脱离当前页面，，，，，尤其是在图片陆续浏览或文章阅读场景中。。。。。。。

若何判断一套网站珍藏按钮设计是否相宜？？？？？

能够用几个具体问题查抄设计，，，，，而不是只看按钮是否美丽：

1. 用户能否在不点击的情况下判断按钮的作用？？？？？
2. 点击后能否立刻看出内容已经珍藏？？？？？
3. 珍藏和取缔珍藏是否都容易操作，，，，，且不会造成误会？？？？？
4. 在图片、文章或商品列表中，，，，，按钮地位是否维持不变？？？？？
5. 用户之后能否在珍藏页面急剧找到刚保留的内容？？？？？
6. 未登录、网络失败或内容已下架时，，，，，页面是否给出了明确反。。。。。。。？？？？

因而，，，，，网站珍藏按钮设计不应只当作一个图标素材问题。。。。。。。对于图片图集，，，，，沉点是急剧鉴别和陆续操作；；；；；对于文章与课程，，，，，沉点是“稍后回来”的明确反。。。。。。；；；；；对于商品和规划，，，，，沉点是珍藏后的比力与治理。。。。。。。先确定保留对象和使用场景，，，，，再决定图标、案牍、地位与珍藏页面，，，，，通常比直接套用某种盛行形状更容易形成清澈、不变的用户履历。。。。。。。