产品经理一定要学会的原型交互规范设计

一、主级按钮
序号1、序号2:主级按钮
一个按钮区最多一个主级按钮,也可以没有
在这里插入图片描述

二、线框按钮
序号3:如果不是非常为了突出“完成”、“推荐”的操作,可以多采用线框按钮

三、红色按钮
序号4:红色按钮不需要选中颜色这么深的

四、按钮大小规范
在这里插入图片描述
五、操作性
关于序号1、序号2是不同的操作按钮,不能放在同一行。可以改进为如下图:
在这里插入图片描述

按钮的对齐方式取决于用户的浏览方式,对于用户浏览方式的研究常见的方法为眼动测试,基本结论有:

对于大量同质信息平衡分布的情况(表单即属于这种情况),视觉都趋向于从上到下,从左到右的眼动规律;
左上角是视觉的第一落点区,而右下角是视觉最终落点区; 设计的元素的会影响视线的变动,比如颜色、图片。

Header区域:左上角作为第一视觉落点,一般用来放置标题,其次是按钮。
Body区域:做主任务流程,整体布局需要指明一条清晰的路径。将输入和操作强制垂直对齐,可以清楚地传达如何完成表单填写。
Footer区域:右下角作为视觉最终落点,主按钮采用右对齐。

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/112181.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

音视频rtsp rtmp gb28181在浏览器上的按需拉流

按需拉流是从客户视角来看待音视频的产品功能,直观,好用,为啥hls flv大行其道也是这个原因,不过上述存在的问题是延迟没法降到实时毫秒级延迟,也不能随心所欲的控制。通过一段时间的努力,结合自己闭环技术栈…

没搞错吧?阿里云99元一年服务器老用户可以买!

阿里云老用户优惠服务器99元/年,谁再说阿里云不好我给谁急,云服务器ECS配置为经济型e实例,2核CPU、2G内存、3M固定带宽、40G ESSD entry 系统盘,老用户优惠价99元一年,老用户可以买,当然新用户也可以买&…

[推荐]SpringBoot,邮件发送附件含Excel文件(含源码)。

在阅读本文前,可以先阅读我的上一篇文章: SpringBoot,使用JavaMailSender发送邮件(含源码)。 ,本文使用的代码案例涉及到的 jar包、application.properties配置与它相同。 先看一下效果。 图一 图二 在下方代码案例中,…

【电路笔记】-正弦波形

正弦波 文章目录 正弦波1、概述2、波形产生3、总结 在 19 世纪末的 10 年间,许多技术成就使得交流电的使用得以扩展,并克服了直流电向公众供电的局限性。 1882 年,法国发明了变压器,它简化了交流电的分配,正如我们将在…

数字人小灿:始于火山语音,发于 B 端百业

火爆的数字人市场又有新消息来袭:火山语音的数字人小灿来了! 数字人小灿首曝视频 今年以来,在生成式AI浪潮的助推下,大量企业争相布局数字人赛道。市场之所以如此火热,是因为AI数字人已被视为人工智能时代智能交互的入…

gcc/g++使用格式+各种选项,预处理/编译(分析树,编译优化,生成目标代码)/汇编/链接过程(函数库,动态链接)

目录 gcc/g--编译器 介绍 使用格式 通用选项 编译选项 链接选项 程序编译过程 预处理(宏替换) 编译 (生成汇编) 分析树(parse tree) 编译优化 删除死代码 寄存器分配和调度 强度削弱 内联函数 生成目标代码 汇编 (生成二进制代码) 链接(生成可执行文件) 函…

相册里的视频怎么提取音频?帮你整理了几个必备的!

有的时候视频中的音频包含重要信息,如对话、旁白、音乐等。提取音频不仅可以节省存储空间,还方便对这些信息进行单独处理和利用。那么如何提取音频呢?下面介绍了3种方法~ 方法一:直接使用手机相册自带功能 1、打开手机相册&#…

用二维码搭建设备巡检系统,轻松实现扫码巡检和数字化台账

针对设备状态不透明、纸质记录效率低、故障报修不及时等设备点巡检的常见问题,可以在草料二维码上自主搭建涵盖点检、巡检、报修、维修、保养等功能的管理系统,无需安装APP,微信扫码就能查看设备档案、用表单替代纸质检查表。 譬如“台州沿海…

【Javascript】Javascript高级程序设计:js 事件 随手笔记

目录 一、事件概述1.1 html 与 js1.2 事件流1.3 DOM 事件流 二、事件处理程序2.1 html 事件处理程序2.2 dom0 级事件处理程序2.3 dom2 级事件处理程序2.4 IE 事件处理程序 三、事件对象四、事件类型4.1 概述4.2 UI 事件4.3 焦点事件4.4 鼠标与滚轮事件4.5 键盘与文本事件4.6 额…

食堂系统登录报错

因为数据库没有任何用户数据,所以会报错,需要添加admin用户 D:\env\jdk1.8.0_341\bin\java.exe -XX:TieredStopAtLevel1 -noverify -Dspring.output.ansi.enabledalways -Dcom.sun.management.jmxremote -Dspring.jmx.enabledtrue -Dspring.liveBeansVie…

照片如何打包?三个方法轻松搞定!

照片打包是一种有效的管理方式,可以提高工作效率、保护照片安全、节省存储空间等。那么如何简单快速地打包照片呢?下面介绍了三种方法~ 方法一:使用嗨格式压缩大师 1、在电脑上打开【嗨格式压缩大师】,点击软件首界面的【图片压缩…

我的ChatGPT的几个使用场景

示例一,工作辅助、写函数代码: 这里展示了一个完整的代码,修正,然后最终输出的过程。GPT具备足够丰富的相关的小型代码生成能力,语法能力也足够好。这类应用场景,在我的GPT使用中,能占到65%以上…

docker 存储目录迁移

参考:【Docker专题】WSL镜像包盘符迁移详细笔记 - 掘金 docker迁移 一 默认目录 Windows版本(Windows 10 wsl 2)docker 默认程序安装到c盘,数据存放于 C:\Users\当前用户名\AppData\Local\Docker\wsl\data\ext4.vhdx 这样会导致…

从开发者的角度看K8S中的复合容器模式

就应用设计最佳实践和原则而言,构建复杂的基于容器的架构与编程没有太大区别。本文的目标是使用众所周知的编程原理从开发人员的角度展示三种流行的可扩展性架构模式。 让我们从单一职责原则开始。根据 R. Martin 的说法,“一个类应该只有一个改变的理由…

软考高级之系统架构师系列之操作系统基础

概念 接口 操作系统为用户提供两类接口:操作一级的接口和程序控制一级的接口。操作一级的接口包括操作控制命令、菜单命令等;程序控制一级的接口包括系统调用。 UMA和NUMA UMA,统一内存访问,Uniform Memory Access&#xff0c…

大型企业如何通过低代码平台提高开发效率和降低成本?

云计算、大数据、人工智能、物联网风口之下,企业数字化转型如同被按下了快进键。为快速攻破转型路上的技术关,企业纷纷把目光投向了低代码开发平台,希望可以用最短的时间,开发出最适合企业发展的应用。 集团企业需要什么样的数字化…

NeRF-SLAM部署运行(3060Ti)

记录在部署运行期间遇到的一些问题,分享给大家~ 一、环境 RTX 3060 Ti、8G显存(其实是不够用,只能简单跑跑demo)、Ubuntu18.04 二、部署 1. 下载代码 git clone https://github.com/jrpowers/NeRF-SLAM.git --recurse-submod…

解决恶意IP地址攻击:保卫网络安全的有效方法

随着互联网的发展,网络安全威胁变得日益复杂,其中包括恶意IP地址攻击。这些攻击通常是网络犯罪分子的手段之一,用于入侵系统、窃取数据或进行其他恶意活动。本文将探讨如何解决恶意IP地址攻击,以保护网络安全。 恶意IP地址攻击是…

与云栖的浪漫邂逅:记一段寻找云端之美的旅程

云端之旅 2023 年的云栖大会如约而至,这次云栖大会也是阿里新任掌门蔡老板当任阿里巴巴董事局主席以来的第一次。大会与以往有很多不一样的地方,其中 AIGC 更是本届大会的重点议题!你会感叹,阿里还是猛啊! 我逛了下展…

Web Woeker和Shared Worker的使用以及案例

文章目录 1、前言2、介绍 Web Worker3、使用须知及兼容性3.1、使用须知3.2、兼容性 4、使用 Web Worker4.1、创建 Web Worker4.2、与主线程通信4.3、终止 Web Worker4.4、监听错误信息 5、使用 Shared Worker4.5、调试 Shared Worker 6、使用中的一些坑6.1、Web Woeker 中引入了…