UI设计网页要求规范
UI设计有哪些规范(UI设计规范参考)
UI设计有哪些规范（UI规范参考）理念上的规范有•形式追随功能—路易斯·沙利文这里的功能不仅包括用户需求，还包括产品需求、业务需求。
•less is more—米斯·凡·德罗把主要精力放到最核心的需求上•存在即合理—黑格尔页面上的每一个元素的存在都可以解释，不要无缘无故增减元素可用性规范——尼尔森十大可用性原则一、状态可见原则用户在网页上的任何操作，不论是单击、滚动还是按下键盘，页面应即时给出反馈。
“即时”是指，页面响应时间小于用户能忍受的等待时间。
二、环境贴切原则网页的一切表现和表述，应该尽可能贴近用户所在的环境（年龄、学历、文化、时代背景），而不要使用第二世界的语言。
《iPhone人机交互指南》里提到的隐喻与拟物化是很好的实践。
此外，还应该使用易懂和约定俗成的表达。
三、撤销重做原则为了避免用户的误用和误击，网页应提供撤销和重做功能。
四、一致性原则同一用语、功能、操作保持一致。
五、防错原则通过网页的设计、重组或特别安排，防止用户出错。
六、易取原则好记性不如烂笔头。
尽可能减少用户回忆负担，把需要记忆的内容摆上台面。
七、灵活高效原则中级用户的数量远高于初级和高级用户数。
为大多数用户设计，不要低估，也不可轻视，保持灵活高效。
八、易扫原则互联网用户浏览网页的动作不是读，不是看，而是扫。
易扫，意味着突出重点，弱化和剔除无关信息。
九、容错原则帮助用户从错误中恢复，将损失降到最低。
如果无法自动挽回，则提供详尽的说明文字和指导方向，而非代码，比如404。
十、人性化帮助原则帮助性提示最好的方式是：1、无需提示；2、一次性提示；3、常驻提示；4；帮助文档。
界面排版规范——《格式塔原理》1.相似原则“有相似特征元素比没有相似特征的元素被认为更为紧密相关”2.接近原则“更接近一起的对象比进一步分开的对象被认为更相关。
”3.连续定律“在直线上或者曲线上的元素比不在直线或者曲线上的元素被认为更相关。
WEBUI设计规范
WEBU设计规范12020年4月19日- 2 -2020 年4 月19 日内蒙古万德系统集成有限公司WEB UI设计（流程/界面）规范目录一：UI 设计基本概念与流程............................................................... 错误!未定义书签。
1.1 目的.............................................................................. 错误!未定义书签。
1.2范围.............................................................................. 错误!未定义书签。
1.3概述.............................................................................. 错误!未定义书签。
二：UI 界面用户体验设计原则与规范....................................................... 错误!未定义书签。
1：应该遵循的基本原则................................................................. 错误!未定义书签。
2：页面外观规范....................................................................... 错误!未定义书签。
②宽带页面....................................................................... 错误!未定义书签。
③自适应......................................................................... 错误!未定义书签。
ui 规范
ui 规范UI规范是指在设计和开发用户界面时要遵循的一套规定和标准。
以下是一些常见的UI规范，总结成了1000字如下：1. 一致性在用户界面的设计中，一致性是非常重要的。
这包括界面元素的排列方式、颜色、按钮和图标的样式等。
保持一致性可以让用户更容易理解和使用界面，提高用户体验。
2. 响应式设计随着移动设备的普及，响应式设计已经成为了一个重要的UI规范。
界面要能够自适应不同分辨率的设备，并提供良好的触摸体验。
3. 使用简洁明了的语言界面上的文字应该尽量简洁明了，避免使用复杂和晦涩的词汇。
使用通俗易懂的语言可以提高用户的理解和使用效率。
4. 易用性界面的设计应该尽量简单明了，不应该让用户感到困惑。
重要的操作按钮和功能应该容易找到，并且要有明显的提示和指导。
5. 色彩搭配界面中的色彩搭配要符合用户的审美，同时要注意色彩的对比度，以确保文字和图标在不同背景下都能清晰可辨。
6. 图标和按钮的设计界面中的图标和按钮要简洁明了，能够清晰地表达其功能。
按钮要有明显的点击效果，让用户知道他们可以与之交互。
7. 字体的选择在界面设计中，字体的选择也非常重要。
要选择易读的字体，并且要注意字体的大小和行间距，以确保用户能够清晰地阅读内容。
8. 导航和布局界面的导航要简单明了，让用户能够快速找到所需的功能和信息。
布局要合理，避免过多的空白和混乱的排列。
9. 错误处理在用户界面的设计中，要考虑到可能出现的错误情况，并提供相应的错误处理机制。
当用户遇到错误时，要给予清晰的提示，并提供解决方案。
10. 用户反馈在用户界面中，要给用户提供及时的反馈。
当用户执行某个操作时，界面可以通过动画、声音或震动等方式给予反馈，让用户知道操作已经生效。
以上是一些常见的UI规范，设计和开发人员应该遵循这些规范来提供优秀的用户界面。
通过准确地理解用户的需求和习惯，设计出易用、美观、高效的界面，可以提高用户的满意度和使用体验。
UI设计基本规范
UI设计基本规范UI设计是用户界面设计的缩写，是一种以用户为中心的设计方法，旨在为用户提供更好的体验。
以下是UI设计的基本规范。
一、界面布局规范1. 界面要简洁明了，重要的内容要突出。
2. 工具栏、菜单、搜索框等常用的功能要放置在易于找到的位置。
3. 页面元素之间的间距要适当，不能太紧凑也不能太空旷。
4. 要保持页面风格一致，不要使用过多的颜色和字体。
5. 要遵循网格布局原则，使页面更加整洁。
6. 要考虑到不同分辨率的屏幕大小，对页面进行适当的自适应调整。
二、颜色规范1. 要遵循品牌、主题颜色，使整个网站或应用程序更具品牌特色。
2. 主色调要少用，辅色可适当增加。
3. 颜色要搭配得当，不能过于花哨或太单调。
4. 颜色要考虑到字体读取的易读性，尽量不使用亮度相同的颜色组合。
三、字体规范1. 要选择易读、合适的字体，不要选择太小或太大的字体。
2. 字体颜色要与页面的背景颜色相协调。
3. 字体要统一，避免使用过多的字体。
4. 要选择合适的字体组合，以确保页面整洁且易读。
四、交互规范1. 要使用易于理解的图标和按钮，使用户不需要花费太多时间就能理解功能。
2. 对于输入框，要提供明确的输入格式和错误提示。
3. 所有功能要易于找到，避免用户迷失。
4. 要将UI设计的元素设计成符合用户直觉的方式，使其更易于使用。
五、响应规范1. UI设计要优化响应时间，使用户界面反应迅速。
2. 对于复杂的操作，要向用户解释操作的目的和执行时间。
3. 对于需要大量操作的页面或应用程序，要在操作完成后提供反馈信息。
UI设计规范
_t!M+z_m_j"D01)：菜单通常采用“常用--主要--次要--工具--帮助”的位置排列，符合流行的Windows风格。51Testing软件测试网_V e_a_[8`6o;~#z
2):常用的有“文件”、“编辑”，“查看”等，几乎每个系统都有这些选项，当然要根据不同的系统有所取舍。
12)：主菜单数目不应太多，最好为单排布置。
14):通常父窗体支持缩放时，子窗体没有必要缩放。
(n_|8x__.O_O"P_C015)：如果能给用户提供自定义界面风格则更好，由用户自己选择颜色、字体等。
_X_[$n \)E4^ ?*?_\0
$Q m }0T;J_x"P06：菜单位置：
7l H)L_b_A&R_P1V O5p0菜单是界面上最重要的元素，菜单位置按照按功能来组织。51Testing软件测试网_^5d_K(B_C {_I0a_f
???? 10):提示、警告、或错误说明应该清楚、明了、恰当。
???? 5：美观与协调性：
????界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。
????美观与协调性细则：
???? 1):长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。
???? 2):布局要合理,不宜过于密集，也不能过于空旷，合理的利用空间。
???? 13):工具厢的默认总宽度不要超过屏幕宽度的1/5。
???? 14):状态条要能显示用户切实需要的信息，常用的有：
目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提示。
???? 15)：滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。
网页设计制作规范要求
网页设计制作规范要求由于互连网的日异普及，客户对网站设计、制作的要求有了很大的提高，因此，我们要把握好每一个细节，使网页设计制作的水平更上一层楼。
以下是网页制作的一些注意事项，希望大家能引起重视。
一、网页制作中<head></head>中必写信息：1、<title>******</title>******为关键字--公司名称，不要超20个汉字或100个字母，这一项一般问题不大，但英文公司标题切不可每个字母都大写，这一点一定要注意，中文网站写中文，英文网站写英文，每个页面均要写。
2、语言规范英文版<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">中文版<meta http-equiv="Content-Type" content="text/html; charset=gb2312">繁体中文<meta http-equiv="Content-Type" content="text/html; charset=big5">3、<META NAME="Keywords" CONTENT="******”>******为关键字项，其字数中文控制在25-30单词/字内, 英文控制在3、4百个字符。
（在中文搜索引擎中，一个标点，一个阿拉伯数字，一个英文字母均算一个；在英文搜索引擎中，一个标点，一个阿拉伯数字，一个英文单词均算一个，要求是将重点关键词放在最前面；不要带有排他性描述文字，如最大，最好，第一等；也不要全部由产品简单的罗列堆砌而成；不要与Title,Description有重复描述，否则不仅降低描述质量，而且还无端浪费有限的“介绍文字”资源；故这些最好由业务员在与客户签约时，请厂家来确定，以免不必要的修改，最重要的是以后修改效果可能不太好）"4、<META NAME="Description" CONTENT="******” >****** 为网站描述项，其字数中文控制在25-30单词/字内, 英文控制在3、4百个字符。
软件UI界面设计规范
软件UI界面设计规范
一、总体设计原则
1、用户友好。
设计良好的界面，简洁明了，让用户更容易理解，使
用成本最低。
2、安全便捷。
界面应尽量提供安全保障，而且操作步骤要简单实用，可以给用户最大便捷。
3、合理美观。
让用户在使用软件时得心应手，界面要美观大方，让
用户有良好的视觉感受。
二、样式设置
1、背景：界面背景采用淡雅的颜色，让整个界面更加清新，以给用
户一种舒适的使用感受；
2、色彩：除了背景以外，整个界面只采用相近的色彩，让整体界面
有质感，使用者可以很容易记住，让界面协调统一；
3、字体：首页的字体大小采用一致格式，一般采用黑色，让可读性
更强，让用户看起来不太累；
4、图片：软件界面设计采用无缝融合的形式，应尽量使用免费的图
片或自行制作，让整个界面更加美观。
三、功能分析
1、功能模块设计：界面设计尽量简洁有序，划分模块功能明显，让
用户便捷地完成操作，而不是看到一堆功能让他们迷失；
2、功能按钮：一些功能操作可以通过相应的按钮来实现，如完成任务、确认信息等，这些按钮要注意设计大小、形状、颜色，让用户参考使用；。
ui界面设计规范
ui界面设计规范ui界面设计规范导语：检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是终端用户的感受。
下面就由店铺为大家介绍一下ui界面设计规范，希望对大家有所帮助！一致性原则坚持以用户体验为中心设计原则，界面直观、简洁，操作方便快捷，用户接触软件后对界面上对应的功能一目了然、不需要太多培训就可以方便使用本应用系统。
字体-保持字体及颜色一致，避免一套主题出现多个字体；不可修改的字段，统一用灰色文字显示。
对齐-保持页面内元素对齐方式的一致，如无特殊情况应避免同一页面出现多种数据对齐方式。
表单录入-在包含必须与选填的页面中，必须在必填项旁边给出醒目标识（*）；各类型数据输入需限制文本类型，并做格式校验如电话号码输入只允许输入数字、邮箱地址需要包含“@”等，在用户输入有误时给出明确提示。
鼠标手势-可点击的按钮、链接需要切换鼠标手势至手型；保持功能及内容描述一致-避免同一功能描述使用多个词汇，如编辑和修改，新增和增加，删除和清除混用等。
建议在项目开发阶段建立一个产品词典，包括产品中常用术语及描述，设计或开发人员严格按照产品词典中的术语词汇来展示文字信息。
准确性原则使用一致的标记、标准缩写和颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源。
显示有意义的出错信息，而不是单纯的程序错误代码。
避免使用文本输入框来放置不可编辑的文字内容，不要将文本输入框当成标签使用。
使用缩进和文本来辅助理解。
使用用户语言词汇，而不是单纯的专业计算机术语。
高效地使用显示器的显示空间，但要避免空间过于拥挤。
保持语言的一致性，如“确定”对应“取消”,“是”对应“否”。
布局合理化原则在进行UI设计时需要充分考虑布局的合理化问题，遵循用户从上而下，自左向右浏览、操作习惯，避免常用业务功能按键排列过于分散，以造成用户鼠标移动距离过长的.弊端。
多做“减法”运算，将不常用的功能区块隐藏，以保持界面的简洁，使用户专注于主要业务操作流程，有利于提高软件的易用性及可用性。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1、页面命名
每个页面都要有与之模块对应的名称。
2、页面兼容性
（1）页面大小兼容
o自适应1366*768px及以上的分辨率
o默认窗口设置下，不应出现水平滚动条，避免出现垂直滚动条（当容过多时允许滚动条）
（2）弹窗、弹页要保证768高度的分辨率显示正常，同时能移动查看弹出框容。
弹出框高度为不超过450px，且显示在容页面相对水平、垂直相对居中位置。
（3）浏览器兼容
兼容Chrome、Firefox、Safari、IE8及以上主流浏览器。
o文字
文字用系统自带的常规字体，且分一级标题、二级标题、主容文字、次容文字、辅助文字（说明或引导性文字，提醒性文字），分别用不同的字号、颜色。
具体字号大小和颜色参考UI设计效果图。
o容图片
容图片均带1px描边；容图片未加载出来时显示系统默认图片。
1、数据操作
显示数据（表格）
（1）表头：字体加粗、且比单无格容字体大一号，且体字体大小参照UI效果图。
（2）单无格：文字图片容左对齐，数字、金额容右对齐。
（3）操作容原则上均用文字表达，如“编辑-删除”
（4）鼠标划过表格单行时，颜色高亮。
（5）原则上每页显示15-20条数据，实际显示条数据可按设计排列效果而定。
（6）表格中不定长的字段，固定显示宽度，超出容用“…”显示光标停留后，在浮动层显示详细容。
选中数据
（1）勾选全选则选中当页所有记录
（2）去掉当页某个记录的勾选，则全选也去掉勾选。
（3）翻页后，自动去掉已勾选的记录及全选的勾选。
（4）翻页后是否进行选择记录的保留应试具体业务而定。
（5）刷新页面后，自动去掉已勾选的记录及全选的勾选。
新增数据
（1）新增的记录必须排在新增页的首行；
（2）所有列表页面默认按数据新增时间倒序排列。
（3）提交失败后留在当前提交页，且保存用户已经输入的容以便再次提交。
（4）提交成功后自动回到数据列表页。
（5）提交时需对主要标识字段进行重复值、空值（空格）判断。
修改数据
（1）修改完成后必须回到原记录所在位置，且刷新显示修改后的值。
（2）提交失败后留在当前提交页，且保存用户已经输入的容以便再次提交。
（3）在查询条件下修改返回后，保留原有查询条件，且修改后的数据如果不满足查询条件则不显示。
（4）提交时需对主标识字段进行重复值、空值（空格）判断。
查询数据
（1）把所有查询条件全部显示出来，并放在查询列表上方位置。
（2）每个查询条件必须有预置文案。
（3）每次查询后保留当前输入的查询条件。
（4）当未查询到任何记录时，需给予未查找到相关记录的提示信息。
（5）除了用户明确要求不需要外，需提供模糊查询功能。
（6）必须要有条件“重置”功能，重置后恢复到初始状态。
删除数据
（1）必须有确认删除的提示信息。
（2）删除成功后刷新不显示删除的记录。
（3）删除成功后返回到原记录所在页面，而当原记录所在页不存在时，则返回上一页。
（4）当被删除的记录与其他记录存在关联时，请示需求界面给予不允许删除、更明细提示等信息。
提交/上传数据
（1）当提交所费的时间较长时，需给出等待的提示，如：沙漏、菊花、进度条等。
（2）提交时需对主标识字段进行重复值、空值（空格）判断。
（3）提交成功后不可重复提交，有列表展示提交容的直接返回到展示页面。
（4）必须要有“取消或返回”功能。
分页
（1）当对查询结果进行分页时，分页的同时需要能够执行查询功能；
（2）当页数较多时，允许输入具体页数进行查询；
取消
（1）取消必须给予提示。
（2）取消操作后须返到原记录所在状态。
返回
（1）当从一个页面点击按钮或进入子页面时，子页面必须提供返回按钮
2、
（1）文字或图片当鼠标划过时会变成点击手形。
（2）本窗口打开：查询结果、上下翻页、新增、修改等操作在本窗口打开。
（3）新窗口打开：各类详情、预览页面等采用新窗口打开。
3、提示信息
预先信息提示
（1）容提交类：每个输入项、条件选选项（包括时间选择）均需要给出提示信息。
该提示信息可放置在输入框或者控件尾部（如密码要多少多少位。
搜索框提示用户输入什么容等。
）
（2）谨慎类操作：针对不可修改、重要操作选择等操作属于谨慎类操作，均需给出提示信息。
如审核是否通过操作、退款申请操作、价格输入等。
操作信息提示
（1）确认提示：修改设置、删除数据等操作时需要弹出提示框，用户需要选择后方可执行。
（2）错误提示：当用户的操作不符合规则、输入数据不符合规则需要给出操作提示。
比如输入数值不符系统规定，则进行提示。
（3）错误提示分为：即时提示、提交后提示。
本系统这里统一用即时提示。
（4）读取提示：涉及到大量信息读取缓慢的时候应该进行提示。
比如进入后台查看商品列表时，由于网络、数据量大等原导致载入缓慢，应该显示读取提示信息，已避免用户过度重复点击操作。
结果信息提示
（1）保存结果提示：当进行商品添加/修改此类涉及到数据保存的操作，不管是否成功均需给出提示。
统一用Toast提示，容为“保存成功！”原则上保存之后直接显示结果页（也可视具体情况定）。
（2）查询结果提示：任何信息列表、查询结果，当对应信息结果的时候需要给出有无结果状态提示。
不得使用空白信息。
1、导航
菜单导航栏
（1）导航路径：原则上不超过三级就能到达用户想要的主要页面，且随时能返回。
（2）导航菜单：各级别的菜单宽高一致，样式一致。
鼠标划过或点击选中菜单模块时会有突出（比如高亮）状态显示。
（3）有子菜单的模块默认不显示子菜单，点击后显示子菜单，再次点击时可收起。
当前位置导航
（1）原则上每个页均有“当前位置导航”，但弹出页、预览页等特殊页面无需当前导航。
（2）若当前位置导航有多个层级，则当前层级的前面层级均可到相应页面。
（3）当前位置导航位置固定，具体位置参考UI设计效果图。
2、表单
（1）表单输入框由表单字段名称：+ 输入框组成，字段名称原则上2-4个汉字。
（2）预置文案：输入框均需有预置文案，且光标进入输入框获得焦点时文案自动消失，若输入框失去焦点且未输入任何文字时恢复预置文案。
（3）下拉选择框中容有多级时，只显示一级，其他级呈灰色不可用状态，选择一级后才会激活第二级，以此类推。
如：部门作为查询条件时，点击下拉框，默认只有一级部门可用，点击一级部门再激活开显示二级部门。
（4）界面的必填项以红色*号标识出来，且标识在“表单字段名称”前面。
存在必填项未填写时，输入框失去焦点即时提示，输入框红色描边，且输入框下方左有相应红色提示文案。
输入框未曾获得过焦点直接提交时，同样输入框红色描边+红色提示文案提醒。
（5）单行输入框：在未限制字数情况下，当输入文字比前输入框长时，最先输入的文字隐藏，光标和最后一个输入的文字显示在输入框尾部。
（6）多行输入框：需要有“当前已输入字数/最多可输入字数”（如：50/100）。
（7）与限制条件不符的费法输入应即时提醒。
（8）只允许输入日期、时间的输入框需要通过格式化方式约束输入，而不是输入非法值后给出提示；
3、按钮
（1）按钮种类：优先操作按钮，次要按钮，不可用按钮。
（2）按钮状态：默认显示状态，鼠标经过状态，点击状态。
（3）按钮位置：按windows交互习惯先优先后次要（左确定，右取消）。
（4）按钮样式：可直接写文字，或文字+图标（具体方案参照UI设计效果图），原则上按钮上文字为2-4个汉字。
4、加载
当数据获取较慢，或网络状况不佳时，要有统一的加载方案图示告诉用户“数据正在加载中……”如：漏斗、菊花、进度条等具体图文可参与UI 设计效果。
5、失败/空页面
当页面没有数据、加载失败或出错时，要有统一的提示文案图标告诉用户“页面加载失败/暂无数据/页面出错”，具体图文可参与UI设计效果。
6、鼠标
默认状态鼠标为“箭头形状”，经过可点击元素时变为“手指状”，在可输入框中为“竖线光标状”
7、键盘
（1）支持回车键提交
（2）支持回车键查询
（3）支持tab键移动光标焦点，移动遵循从左至右，从上至下的原则。