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

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

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

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

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

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

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

图片卡片和图集页面

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

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

文章、商品和详情页面

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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