当前位置: 首页 > 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…...

造相-Z-Image-Turbo 在嵌入式设备上的探索:基于NVIDIA Jetson的轻量化部署

造相-Z-Image-Turbo 在嵌入式设备上的探索:基于NVIDIA Jetson的轻量化部署 最近在折腾一个挺有意思的项目,想把一个叫“造相-Z-Image-Turbo”的图片生成模型,塞进像NVIDIA Jetson这样的嵌入式小盒子里。你可能知道,这类模型通常都…...

7大维度测评:2023年开源付费墙绕过工具终极选择指南

7大维度测评:2023年开源付费墙绕过工具终极选择指南 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在数字内容访问需求日益增长的今天,选择一款高效可靠的开源…...

JS脚本实现IE11自动跳转Chrome的完整配置指南(含ActiveX控件启用详解)

1. 为什么需要IE11自动跳转Chrome? 很多企业还在使用老旧系统,这些系统往往只兼容IE11浏览器。但IE11性能差、安全性低,用起来特别卡顿。我去年给一家制造企业做系统升级时就遇到过这种情况——他们的ERP系统只能在IE11运行,但财…...

告别AI对话失忆症:深入LangChain4j的ChatMemoryProvider与InMemoryChatMemoryStore

深入LangChain4j记忆管理:构建高性能会话隔离系统的实践指南 在构建企业级AI对话系统时,会话记忆管理往往成为决定用户体验的关键因素。想象这样一个场景:当用户询问"我上周提到的项目进展如何?"时,系统能否…...

GyverTimers:ATmega硬件定时器寄存器级精准控制

1. GyverTimers 库深度技术解析:面向 ATmega328P 与 ATmega2560 的硬件定时器全功能控制 GyverTimers 是一款专为 AVR 微控制器设计的轻量级、高精度硬件定时器控制库,其核心价值在于 绕过 Arduino 框架的抽象层,直接操作 ATmega 系列 MCU 的…...

7个高效步骤:Meshroom开源三维重建工具从入门到精通

7个高效步骤:Meshroom开源三维重建工具从入门到精通 【免费下载链接】Meshroom 3D Reconstruction Software 项目地址: https://gitcode.com/gh_mirrors/me/Meshroom 技术原理:三维重建的底层逻辑与技术选型 摄影测量技术的数学基础 三维重建技…...

单片机入门指南:硬件工程师成长路径与实战技巧

1. 单片机入门:从零开始的硬件工程师成长之路作为一名在嵌入式领域摸爬滚打多年的工程师,我见过太多初学者在单片机学习路上走弯路。单片机确实是个神奇的东西——它体积小、价格低,却能控制各种电子设备,从智能家居到工业自动化无…...

C++程序崩溃别慌!手把手教你用backward-cpp+glog捕获并记录堆栈信息(附完整CMake配置)

C程序崩溃别慌!手把手教你用backward-cppglog捕获并记录堆栈信息(附完整CMake配置) 深夜两点,服务器告警突然响起。你揉着惺忪的睡眼查看日志,只看到一行冰冷的"Segmentation fault"——没有调用栈&#xf…...

Raspberry Pi Imager:树莓派系统安装的终极解决方案

Raspberry Pi Imager:树莓派系统安装的终极解决方案 【免费下载链接】rpi-imager The home of Raspberry Pi Imager, a user-friendly tool for creating bootable media for Raspberry Pi devices. 项目地址: https://gitcode.com/gh_mirrors/rp/rpi-imager …...

springboot+vue基于web的高校网上订餐平台设计系统

目录同行可拿货,招校园代理 ,本人源头供货商系统功能模块分析技术实现要点特色功能扩展项目技术支持源码获取详细视频演示 :文章底部获取博主联系方式!同行可合作同行可拿货,招校园代理 ,本人源头供货商 系统功能模块分析 后台管理模块 管理员登录与权…...