当前位置: 首页 > news >正文

UI设计开发原则

一、一致性原则

坚持以用户体验为中心设计原则,界面直观、简洁,操作方便快捷,用户接触软件后对界面上对应的功能一目了然、不需要太多培训就可以方便使用本应用系统。

1、字体

保持字体及颜色一致,避免一套主题出现多个字体;不可修改的字段,统一用灰色文字显示。

2、对齐

保持页面内元素对齐方式的一致,如无特殊情况应避免同一页面出现多种数据对齐方式。

3、表单录入

在包含必须与选填的页面中,必须在必填项旁边给出醒目标识(*);各类型数据输入需限制文本类型,并做格式校验如电话号码输入只允许输入数字、邮箱地址需要包含“@”等,在用户输入有误时给出明确提示。

4、鼠标手势

可点击的按钮、链接需要切换鼠标手势至手型;

5、保持功能及内容描述一致

避免同一功能描述使用多个词汇,如编辑和修改,新增和增加,删除和清除混用等。

建议在项目开发阶段建立一个产品词典,包括产品中常用术语及描述,设计或开发人员严格按照产品词典中的术语词汇来展示文字信息。

二、准确性原则

使用一致的标记、标准缩写和颜色,显示信息的含义应该非常明确,用户不必再参考其它信息源。

显示有意义的出错信息,而不是单纯的程序错误代码。

避免使用文本输入框来放置不可编辑的文字内容,不要将文本输入框当成标签使用。

使用缩进和文本来辅助理解。

使用用户语言词汇,而不是单纯的专业计算机术语。

高效地使用显示器的显示空间,但要避免空间过于拥挤。

保特语言的一致性,如“确定”对应“取消”,“是”对应“否”。

三、布局合理化原则

在进行UI设计时需要充分考虑布局的合理化问题,遵循用户从上而下,自左向右浏览、操作习惯,避免常用业务功能按键排列过于分散,以免造成用户鼠标移动距离过长的弊端。多做”减法”运算,将不常用的功能区块隐藏,以保持界面的简洁,使用户专注于主要业务操作流程,有利于提高软件的易用性及可用性。

1、菜单

保特菜单简洁性及分类的准确性,避免菜单深度超过3层。

菜单中功能是需要打开一个新页面来完成的,需要在菜单名字后面加上“…”。【只适用于C/S架构,B/S请无视】。

2、按钮

确认操作按钮放置左边,取消或关闭按钮放置于右边。

3、功能

未完成功能必须隐藏处理,不要置于页面内容中,以免引起误会。

4、排版

所有文字内容排版避免贴边显示(页面边缘),尽量保持10-20像素的间距并在垂直方向上居中对齐;各控件元素间也保持至少10像素以上的间距,并确保控件元素不紧贴于页面边沿。

5、表格数据列表

字符型数据保持左对齐,数值型右对齐方便阅读对比,并根据字段要求,统一显示小数位位数。

6、滚动条

页面布局设计时,应避免出现横向滚动条。

7、页面导航

在页面显眼位置应该出现页面导航,让用户知道当前所在页面的位置,并明确导

航结构,如:首页>新闻中心>欧科智能,其中带下划线部分为可点击链接。

8、信息提示窗口

信息提示窗口应位于当前页面的居中位置,并适当弱化背景层以减少信息干扰,让用户把注意力集中在当前的信息提示窗口。一般做法是在信息提示窗口的背面加一个半透明颜色填充的遮罩层。

四、系统操作合理性原则

尽量确保用户在不使用鼠标(只使用键盘)的情况下也可以流畅地完成一些常用的业务操作,各控件间可以通过Tb键进行切换,并将可编辑的文本全选处理。

查询检索类页面,在查询条件输入框内按回车应该自动触发查询操作。

在进行一些不可逆或者删除操作时应该有信息提示用户,并让用户确认是否继续操作,必要时应该把操作造成的后果也告诉用户。

信息提示窗口的“确认”及“取消”按钮需要分别映射键盘按键"Enter”和

Esc”

避免使用鼠标双击动作,不仅会增加用户操作难度,还可能会引过用户误会,认为功能点击无效。

表单录入页面,需要把输入焦点定位到第一个输入项。用户通过Tb键可以在输入框或操作按钮间切换,并注意Tb的操作应该道循从左向右、从上而下的顺序。

五、系统响应时间原则

系统响应时间应该适中,响应时间过长,用户就会感到不安和诅丧,而响应时间过快也会影响到用户的操作节奏,并可能导致错误。因此在系统响应时间上坚持如下原则:

1、2-5秒窗口显示处理信息提示,避免用户误认为没响应而重复操作:

2、5秒以上显示处理窗口,或显示进度条:

3、一个长时间的处理完成时应给予完成警告信息。

相关文章:

UI设计开发原则

一、一致性原则 坚持以用户体验为中心设计原则,界面直观、简洁,操作方便快捷,用户接触软件后对界面上对应的功能一目了然、不需要太多培训就可以方便使用本应用系统。 1、字体 保持字体及颜色一致,避免一套主题出现多个字体&am…...

Mac 如何判断下载Mac with Intel Chip 还是 Mac with Apple Chip

如下图,当我们在 Mac系统 下载客户端时,有两种选择:Mac with Intel Chip 、 Mac with Apple Chip 如何判断要下载哪一种? 需要判断本机Mac是在Inter芯片还是Apple芯片上运行的。方法如下: 点击屏幕左上角Apple标志&a…...

windows笔记本远程连接如何打开任务管理器?

参考素材: https://jingyan.baidu.com/article/8275fc86a97f5207a03cf6cd.html https://www.anyviewer.cn/how-to/ctrl-alt-delete-remote-desktop-6540.html 网上查了很多方法,都说ctrlaltend可以解决这个问题。 但是笔记本键盘上没有end键。 继续查了一…...

GitHub打不开解决方法——授人以渔

打不开GitHub的原因之一,DNS地址解析到了无法访问的ip。(为什么无法访问?) 1、打开GitHub看是哪个域名无法访问,F12一下 2、DNS解析看对应的域名目前哪个IP可以访问 DNS解析的网址: (1&#x…...

gRPC之数据压缩Snappy、zstd

文章目录 gRPC之数据压缩Snappy一、背景二、什么是snappy1. Snappy适合场景 三、demo: Go代码实现了一个snappy压缩格式的压缩器for grpc1. 这段代码怎么保证并发安全的? 四、什么是zstd五、 zstd和snappy有什么区别,如何选择?六、demo: Go代码实现了一个zstd压缩格…...

k8s之存储篇---存储类StorageClass

介绍 StorageClass 为管理员提供了描述存储"类"的方法。 不同的类型可能会映射到不同的服务质量等级或备份策略,或是由集群管理员制定的任意策略。 Kubernetes 本身并不清楚各种类代表的什么。这个类的概念在其他存储系统中有时被称为"配置文件&quo…...

WordPress(4)关于网站的背景图片更换

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、更改的位置1. 红色区域是要更换的随机的图片二、替换图片位置三.开启随机数量四.结束前言 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也…...

2 | Window 搭建单机 Hadoop 和Spark

搭建单机 Hadoop 和 Spark 环境可以学习和测试大数据处理的基础知识。在 Windows 操作系统上搭建这两个工具需要一些配置和设置,下面是一个详细的教程: 注意: 在开始之前,请确保你已经安装了 Java 开发工具包(JDK),并且已经下载了 Hadoop 和 Spark 的最新版本。你可以从…...

接口测试与功能测试的区别~

今天为大家分享的是我们在日常测试工作中, 一定会接触并且目前在企业中是主要测试内容的 功能测试与接口测试 一.功能测试与接口测试的基本概念。 1.1 什么是功能测试呢? 功能测试: 是黑盒测试的一方面, 检查实际软件的功能是否符合用户的需求 功能测试测试的内容包括以下…...

LeetCode 23 合并 K 个升序链表

LeetCode 23 合并 K 个升序链表 来源:力扣(LeetCode) 链接:https://leetcode.cn/problems/merge-k-sorted-lists/description/ 博主Github:https://github.com/GDUT-Rp/LeetCode 题目: 给你一个链表数组…...

[国产MCU]-W801开发实例-TCP客户端

TCP客户端 文章目录 TCP客户端1、TCP协议简单介绍2、W801创建TCP客户流程本文将详细介绍如何在W801中使用TCP客户端。 1、TCP协议简单介绍 传输控制协议 (TCP) 是一种标准,它定义了如何建立和维护应用程序可以用来交换数据的网络对话。 TCP 与 Internet 协议 (IP) 一起工作,…...

《爵士乐史》乔德.泰亚 笔记

第一章 【美国音乐的非洲化】 【乡村布鲁斯和经典布鲁斯】 布鲁斯:不止包括忧愁、哀痛 十二小节布鲁斯特征: 1.乐型(A:主、B:属、C/D:下属):A→A→B→A→C→D→A→A 2.旋律:大三、小三、降七、降五 盲人…...

工程制造领域:企业IT架构

一、IT组织规划架构图 1.1 IT服务保证梯队与指导思想 二、整体业务规划架构图 三、数据化项目规划架构图 四、应用系统集成架构图...

PY32F003F18点灯

延时函数学习完之后,可以学习PY32F003F18的GPIO输出功能。 1、Debug引脚默认被置于复用功能上拉或下拉模式:PA14默认为SWCLK: 置于下拉模式PA13默认为SWDIO: 置于上拉模式PF4默认为Boot:Boot引脚默认置于输入下拉模式 2、GPIO输出状态&#…...

Mac不想用iTerm2了怎么办

这东西真是让人又爱又恨,爱的是它的UI还真不错,恨的是它把我的环境给破坏啦!让我每次启动终端之后都要重新source激活我的python环境,而且虚拟环境前面没有括号啦!这怎么能忍!在UI和实用性面前我断然选择实…...

x86_64 ansible 源码编译安装

源码 GitHub - ansible/ansible: Ansible is a radically simple IT automation platform that makes your applications and systems easier to deploy and maintain. Automate everything from code deployment to network configuration to cloud management, in a languag…...

数据结构学习系列之顺序表的两种插入方式

方式1:在顺序表末端插入数据元素,代码如下:示例代码: int insert_seq_list_1(list_t *seq_list,int data){if(NULL seq_list){printf("入参为NULL\n");return -1;}if(N seq_list->count){printf("顺序表已满…...

Matlab/Python教程系列 | 根据目录下的已有图片制作视频(动画)

MATLAB和Python的编程教程: 根据目录下的已有图片制作视频(动画) 注1:本文系“MATLAB/Python编程教程”系列之一,致力于使用Python和Matlab实现特定的功能。本次要实现的功能是:根据目录下的已有图片制作视频(动画)。 在这个教程中,我们将一起学习如何使用MATLAB和Python编…...

Pyecharts数据可视化(一)

目录 1.Pyecharts简介 2.Pyecharts的常用方法 3.Pyecharts绘制柱状图 3.1 绘制并列柱状图 3.2 绘制水平直方图 1.Pyecharts简介 Pyecharts是一个用于创建交互式图表的Python库。它基于Echarts,一个强大的JavaScript图表库,Pyecharts允许Python开发者…...

stable diffusion实践操作-提示词-图片结构

系列文章目录 stable diffusion实践操作-提示词 文章目录 系列文章目录前言一、提示词汇总1.1 图片结构11.2 图片结构21.3 图片结构3 二、总结 前言 本文主要收纳总结了提示词-图片结构。 一、提示词汇总 1.1 图片结构1 StylesArtistshudson river school哈得逊河学派alpho…...

RWKV7-1.5B-g1a开源模型实战:轻量级AI助手在中小企业的落地

RWKV7-1.5B-g1a开源模型实战:轻量级AI助手在中小企业的落地 1. 模型简介 rwkv7-1.5B-g1a 是一个基于 RWKV-7 架构的多语言文本生成模型,专为中小企业设计的轻量级AI助手解决方案。这个1.5B参数的模型在保持较小体积的同时,提供了足够强大的…...

为什么92%的Spring Cloud Function项目仍在忍受秒级冷启动?这4个被忽视的Classloader陷阱必须立即修复

第一章:冷启动问题的云原生本质与量化归因冷启动并非单纯的应用延迟现象,而是云原生架构中资源按需供给、隔离边界强化与运行时环境动态构建三者耦合引发的系统性效应。其本质在于容器编排层(如 Kubernetes)与函数计算平台&#x…...

【SpringAI篇04】:从内存到MySQL,构建可重启的智能对话系统

1. 为什么需要从内存存储升级到数据库持久化 刚开始接触SpringAI开发时,很多开发者都会选择默认的内存存储方案。这种方案简单直接,不需要额外配置数据库,特别适合快速原型开发。但当你真正要把应用部署到生产环境时,就会发现内存…...

CodeSys自定义HTML5控件:从零构建到工程实践

1. 为什么需要自定义HTML5控件? 在工业自动化领域,可视化监控是设备管理的重要环节。CodeSys作为主流的工业控制开发平台,其WebVisu功能虽然提供了基础控件库,但在实际项目中经常会遇到这样的尴尬:标准控件无法满足特定…...

在PC上畅玩Switch游戏:Ryujinx模拟器完全指南

在PC上畅玩Switch游戏:Ryujinx模拟器完全指南 【免费下载链接】Ryujinx 用 C# 编写的实验性 Nintendo Switch 模拟器 项目地址: https://gitcode.com/GitHub_Trending/ry/Ryujinx 想在电脑上体验《塞尔达传说:旷野之息》的震撼冒险,或…...

【花雕学AI】打破AI轻量化极限!MimiClaw:5美元芯片上跑的纯 C 轻量 AI 智能体

提到AI智能体,很多人的第一印象是“需要高性能服务器支撑”“离不开复杂操作系统”“功耗高到不敢长时间运行”——但MimiClaw的出现,彻底打破了这种固有认知。作为全球首个能在仅售5美元的ESP32-S3芯片上流畅运行的纯C编写轻量AI智能体,Mimi…...

三驾马车驱动:OpenRGB如何重塑跨平台RGB灯光统一控制体验

三驾马车驱动:OpenRGB如何重塑跨平台RGB灯光统一控制体验 【免费下载链接】OpenRGB Open source RGB lighting control that doesnt depend on manufacturer software. Supports Windows, Linux, MacOS. Mirror of https://gitlab.com/CalcProgrammer1/OpenRGB. Rel…...

TurboWarp Packager:让Scratch作品突破平台限制的跨平台打包工具

TurboWarp Packager:让Scratch作品突破平台限制的跨平台打包工具 【免费下载链接】packager Converts Scratch projects into HTML files, zip archives, or executable programs for Windows, macOS, and Linux. 项目地址: https://gitcode.com/gh_mirrors/pack/…...

nli-distilroberta-base轻量化效果实测:在嵌入式设备上的推理性能与精度

nli-distilroberta-base轻量化效果实测:在嵌入式设备上的推理性能与精度 1. 开篇:当大模型遇上小设备 在树莓派上跑BERT?半年前这还是个笑话。但当我第一次在Jetson Nano上成功运行量化后的nli-distilroberta-base模型时,这个4核…...

Typora风格技术文档创作:集成SenseVoice-Small实现语音速记

Typora风格技术文档创作:集成SenseVoice-Small实现语音速记 每次在Typora里敲代码、写文档,是不是都有过这样的瞬间?脑子里灵光一闪,一段绝妙的思路或者一个关键的描述,手速却跟不上。等你好不容易敲完几个字&#xf…...