产品设计——按钮(四宝)

简介: 产品设计——按钮(四宝)

一、自适应按钮

前端在设计按钮的时候,我们很多的时候都是设置的静态的按钮,不管你是不是需要使用它,它都在那里。这样的按钮时最普通的按钮,但是就是这种普通的按钮也可以做一些产品设计的优化,例如,我们对表格数据添加筛选条件的时候,我们可以设置一个清除筛选的按钮,但是这个按钮不是常驻的,是只有在我们设置了筛选条件之后才会自动的显示出来,如果没有设置则可以不让其显示。


二、按钮二合一

我们在做页面数据展示的时候,很多时候会设计到排序按钮,这种排序按钮我们一般会这么设计,例如:对于评论进行排序,一个是按照时间排序的按钮,一个是按照点赞数排序的按钮。但是,这样的设计还是有些冗余。对于这种按钮的前端设计,我们完全可以使用一个按钮来进行,通过点击来切换他的样式展示,切换他的效果。这种二合一的操作,也是大大减少了页面上的冗余按钮。


三、按钮时隐时现

接着上面第二个例子说明,如果数据本来就不够一页的话,就不用展示这个按钮来选择展示的方式了,例如:如果没有人评论呢,我们是不是就可以不显示以上提到的两个按钮了。


这个设计的想法也是出于设计模式原则中的第六原则——迪米特法则(最小知道原则)。也可以用这句话来解释——如无必要勿增实体


四、发现用户习惯、作为用户的默认选择

这种就是利用了大数据的优势来进行对用户行为的抓取,通过分析用户行为数据来选择最适合与这个用户的按钮位置和形态大小。

我们也可以具体分以下的情况:


1.根据用户最后一次选择的情况,保留用户的习惯,下次进来就是这样的选择

2.用户经常性的选择习惯(次数),来确定用户的选择

3.发到所有用户里面进行统计,看用户更喜欢选择1还是2,从而把大数据统计出来的策略(使用习惯)推荐给新用户,从而提升新用户的粘度。

这种设计想法也符合了这样的设计规范——让软件的使用者称为软件的设计者


目录
相关文章
|
机器学习/深度学习 TensorFlow 数据处理
使用GRU(Gated Recurrent Unit)模型来预测股票未来20天的行情
使用GRU(Gated Recurrent Unit)模型来预测股票未来20天的行情,使用了200天的历史行情作为输入数据。请注意,这只是一个简单的示例,您可以根据需要进行更多的模型调整和数据处理。
|
12月前
|
人工智能
从零开始学写歌词:关键技巧和方法一网打尽,妙笔生词AI智能写歌词软件
从零开始学写歌词,掌握关键技巧和方法,探索歌词创作的奇妙世界。借助“妙笔生词智能写歌词软件”,利用AI智能生成、优化和解读歌词等功能,轻松找到灵感,提升创作水平,创作出动人的歌词。
|
存储 网络协议 安全
C语言 网络编程(五)Socket和端口
Socket 是 TCP/IP 五层网络模型中应用层的编程接口,用于实现不同主机间应用程序的双向通信。它作为网络通信的端点,连接应用层与网络协议栈,提供可靠的流式或非流式数据传输服务。Socket 包括流式(SOCKET_STREAM)、数据报(SOCK_DGRAM)和原始套接字(SOCK_RAW)三种类型,分别适用于不同场景。通过 IP 地址和端口号,Socket 能准确识别并转发数据包至指定进程。端口号分为知名端口(1-1023)、注册端口(1024-49151)和动态端口(49152-65535),确保数据准确交付。
|
10月前
|
前端开发 开发者
React 单选按钮 Radio Button 详解
本文介绍 React 中单选按钮的基础概念、基本用法、常见问题及进阶技巧,包括如何正确设置 `checked` 属性、确保 `name` 属性一致、处理 `onChange` 事件,以及动态生成单选按钮和使用受控组件等,通过代码示例详细解析,帮助开发者有效管理状态和优化用户交互。
286 32
|
JavaScript
成功解决:Failed to resolve directive: mode
这篇文章介绍了如何解决Vue中遇到的"Failed to resolve directive: mode"错误的两个常见原因及其解决办法:确保指令的单词拼写正确,以及在创建Vue实例之前注册全局指令。
成功解决:Failed to resolve directive: mode
|
存储 网络协议 容灾
降低存储网络55% 延迟!阿里云存储论文入选计算机顶会
凭借在规模化部署和应用模型上的创新,阿里云存储团队发表的技术论文《Deploying User-space TCP at Cloud Scale with LUNA》被 USENIX ATC'23 收录。
1547 4
降低存储网络55% 延迟!阿里云存储论文入选计算机顶会
|
12月前
|
前端开发 JavaScript UED
探索现代Web开发中的响应式设计原则与实践
【10月更文挑战第9天】在移动互联网的浪潮中,响应式设计已成为Web开发的必备技能。本文旨在深入解析响应式设计的核心原则,并结合实战案例,展示如何运用这些原则构建灵活、高效的Web应用界面。文章不仅涵盖理论探讨,更提供具体代码示例,帮助读者从概念到实现全面掌握响应式设计。
137 0
|
12月前
|
资源调度 监控 搜索推荐
万界星空科技低代码云MES中的四大现场执行管理模式
万界星空科技云MES系统凭借其独特的优势和广泛的应用场景,在多个制造业领域中都具有重要的应用价值。随着技术的不断发展和创新,云MES系统将在未来发挥更加重要的作用,推动制造业向数字化、智能化和可持续化方向发展。
152 0
|
Linux 开发工具 git
pip的常用命令和常见问题的解决
当使用pip命令安装Python包时,有时候可以通过使用镜像地址来加速下载速度或解决访问限制的问题。以下是一些常用的pip命令和常见的镜像地址:
1376 3
|
移动开发 前端开发 JavaScript
前端代码规范
前端开发工具组件的广泛应用提升了开发效率,但也带来了代码管理和维护的挑战。为解决这一问题,各团队制定了相应的代码规范。良好的代码规范不仅提升个人代码质量,还便于团队协作。本文从命名、HTML、CSS、JavaScript等方面详细介绍了前端代码规范,强调简洁、有条理、易读的重要性。遵循这些规范,有助于提高开发效率和代码质量。
832 0