美文网首页关闭
web端文章详情页-喜欢按钮视觉效果优化

web端文章详情页-喜欢按钮视觉效果优化

作者: 一只小虾 | 来源:发表于2017-06-12 12:06 被阅读76次

存在的问题

将鼠标hover到点赞按钮上,“喜欢”跟“喜欢人数”都会高亮,如下图所示。这样用户会以为这是一个按钮,而忽略了点击“喜欢人数”可以查看喜欢这篇文章的用户列表。

现有方案

改进方案

鼠标hover到“喜欢”或“喜欢人数”上时,做视觉区分。如下图所示:


hover到“喜欢” hover到“喜欢人数”

相关文章

  • web端文章详情页-喜欢按钮视觉效果优化

    存在的问题 将鼠标hover到点赞按钮上,“喜欢”跟“喜欢人数”都会高亮,如下图所示。这样用户会以为这是一个按钮,...

  • 文章详情页功能设计

    各平台特性及文章分类: APP端文章详情页,左上角都是返回按钮。 APP端文章详情页,右上角一般都是设置、分享、收...

  • 按钮位置

    一、文章应用范围 web端应用 二、按钮区的位置 按钮区位置的设计策略:应将按钮放置于用户浏览路径中,便于被用户发...

  • #简书精进计划#移动端网页打开 APP按钮链接优化

    用户在移动端网页阅读文章时,文章详情页作者时间栏和底部都有打开APP的按钮,用户手机里有下载简书APP产品时,点击...

  • 2018-03-22 更新记录

    web端: web端新增子任务功能 看板视图可以按照自定义属性来设置过滤 卡片详情页改版 app 1.3.4版本:...

  • #简书精进计划:移动网页端文章页添加专题标签

    现有简书移动网页端中的文章详情页,没有该文章所属专题标签。优化后增加专题标签,可以一定程度的提升体验和专题关注。

  • #003 HTML5缓存机制浅析

    时间:2017-03-27 18:02:47 该文章为 《HTML5缓存机制浅析:移动端Web加载性能优化》 ...

  • Web移动端优化

    1、使用 touchstart 代替 click 由于移动端屏幕的设计, touchstart 事件和 click...

  • 从Github创建项目

    1、点击搜索Github项目按钮 2、输入关键字搜索项目 3、点击项目进入详情页,点击详情页下载源码按钮 4、点击...

  • web项目性能优化(整理)

    Web性能优化分为服务器端和浏览器端两个方面。 一、浏览器端,关于浏览器端优化,分很多个方面1、压缩源码和图片Ja...

网友评论

    本文标题:web端文章详情页-喜欢按钮视觉效果优化

    本文链接:https://www.haomeiwen.com/subject/oyllqxtx.html