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设计规范

一.APP设计规范(ios)————设计稿一般不使用Android的尺寸（因为Android的五花八门）1. iphone界面的设计尺寸（设计稿默认iphone6）（1）iphone6 plus设计版[iPhone7 plus]（@3x）分辨率1242x2208px ppi:401 状态栏：60px 导航栏：132px 标签栏：146px（2）iphone6 plus放大版（@3x）分辨率1125x2001px ppi:401 状态栏：54px 导航栏：132px 标签栏：146px（3）iphone6 plus物理版（@3x）分辨率1080x1920px ppi:401 状态栏：54px 导航栏：132px 标签栏：146px（4）iphone6 [iPhone7]（设计稿默认）（@2x）分辨率750x1334px ppi:326 状态栏：40px 导航栏：88px 标签栏：98px（5）iphone5 - 5c -5s（@2x）分辨率640x1136px ppi326 状态栏：40px 导航栏：88px 标签栏：98px（6）iphone4 – 4s（@2x）分辨率640x960px ppi:326 状态栏：40px 导航栏：88px 标签栏：98px（1）iphone & ipod Touch第一、二、三代（@1x）分辨率320x480px ppi:163 状态栏：20px 导航栏：44px 标签栏：49px2. iphone图标设计尺寸（1）iphone6 plus （@3x）App store：1024x1024px 程序应用：180x180 主屏幕：152x152 Spotlight搜索：87x87px 标签栏：75x75px 工具栏和导航栏：66x66px（2）iphone6（@2x）App store：1024x1024px 程序应用：120x120 主屏幕：152x152 Spotlight搜索：58x58px 标签栏：75x75px 工具栏和导航栏：44x44px（3）iphone5-5c-5s（@2x）App store：1024x1024px 程序应用：120x120 主屏幕：152x152 Spotlight搜索：58x58px 标签栏：75x75px 工具栏和导航栏：44x44px（4）iphone4-4s（@2x）App store：1024x1024px 程序应用：120x120 主屏幕：114x114 Spotlight搜索：58x58px 标签栏：75x75px 工具栏和导航栏：44x44px（5）iphone & ipod Touch第一、二、三代（@1x）App store：1024x1024px 程序应用：120x120 主屏幕：57x57 Spotlight搜索：29x29px 标签栏：38x38px 工具栏和导航栏：30x30px3. ipad界面设计尺寸（1）ipad3 – 4 - 5 – 6 – Air – Air2 – mini2分辨率2048x1536px ppi:264 状态栏：40px 导航栏：88px 标签栏：98px（2）ipad1 – 2分辨率1024x768px ppi:132 状态栏：20px 导航栏：44px 标签栏：49px（2）ipad Mini分辨率1024x768px ppi:163 状态栏：20px 导航栏：44px 标签栏：49px4. ipad图标设计尺寸（1）ipad3 – 4 - 5 – 6 – Air – Air2 – mini2App store：1024x1024px 程序应用：180x180 主屏幕：144x144 Spotlight搜索：100x100px 标签栏：50x50px 工具栏和导航栏：44x44px（2）ipad1 – 2App store：1024x1024px 程序应用：90x90 主屏幕：72x72 Spotlight搜索：50x50px 标签栏：25x25px 工具栏和导航栏：22x22px（3）ipad MiniApp store：1024x1024px 程序应用：90x90 主屏幕：72x72 Spotlight搜索：50x50px 标签栏：25x25px 工具栏和导航栏：22x22px5. ios字体大小规范iPhone 上的字体英文为：HelveticaNeue 至于中文，Mac下用的是黑体-简，Win下则为华文黑体，所有字体要用双数字号。

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设计规范说明书三篇

UI设计规范说明书三篇篇一：UI设计规范说明书目录概要 (3)登录页面 (4)1. 启动 (4)2. 登录页面元素 (4)导航菜单 (5)1. 弹出框比例 (8)2. 弹出框风格 (8)3. 弹出框边界 (8)4. 弹出元素对齐 (8)整页面 (10)字体规范 (11)页面元素 (15)页面色调 (18)用户界面行为 (19)概要界面设计中保持界面的一致性。

一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。

界面力求简洁明了，保证系统功能设计的合理与明确，布局明确、交互操作合理、协调统一。

功能要表现清楚，分类清晰有条理，避免过多的控件嵌套导致的视觉混乱；单一功能的操作目的明确，符合易用性原则，避免不必要的信息显示而对用户造成视觉干扰；力求操作简单，简单的功能一步完成，比较复杂的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。

1.启动目前我们的pride、EMRS系统首页登录都是以（图1）的展现方式，有2个页面，此法太过累赘，同时跳出框也把产品的logo信息给遮住，可以以一个页面的方式来显示不需要2个页面，类似（图2）。

（图1）2.（图2）3.登录页面元素登录页面的基本元素包括：输入框、按钮、进度条。

这样的好处就是以一个页面代替2个页面，简洁明了，登录页面都需要加入进度条，便于客户等待页面进度规范1）菜单深度一般不要超过三层2）菜单层次太多时应给出返回主窗口、主分支的快捷链接。

（图3）导航如不是客户特俗要求的定制，均制成类似以上的导航（图3），采用windows 标准的定制导航界面，导航必需兼容1024*768、1280*800、1440*900三个主流分辨率，其中默认分辨率为1024*768。

（图4）（图5）【1】标题区：显示当前用户姓名、所属科室。

字体：15像素，黑色，加粗【2】工具栏区：可显示二级菜单相应栏目。

字体9pt，不加粗，黑色，每个栏目必须有快捷键，栏目间的间距为20像素【3】二级菜单区：二级菜单字体为9pt，宋体，不加黑，行距10像素；所有的二级菜单栏目都应该有相应的图标设计。

ui 规范

ui 规范UI规范是一种约定俗成的设计规范，旨在统一用户界面设计，提高用户体验。

以下是关于UI规范的1000字介绍：UI（User Interface，用户界面）规范是指在软件开发过程中，为了满足特定的用户界面设计标准而制定的设计指南和规范。

它可以帮助设计师和开发人员有针对性地进行设计和开发任务。

UI规范主要包括样式、布局、色彩、字体、图标等方面的要求，以确保设计的一致性、易用性和可扩展性。

首先，UI规范在样式方面要求设计师使用一致的设计样式，包括按钮、文本框、下拉框等元素的外观和交互效果。

例如，按钮的形状、颜色、阴影效果应保持一致，以增加用户的可识别度和操作便利性。

其次，UI规范在布局方面要求设计师使用统一的布局结构，以提高用户界面的一致性和易用性。

例如，页面的导航结构应该清晰明确，按钮的排列顺序应符合用户的习惯，并且页面的内容应该合理地分组和排列，以提供一致的信息结构和用户导航路径。

在色彩方面，UI规范要求设计师使用统一的色彩方案，以保持整体界面的视觉一致性和美观性。

例如，主色调、辅助色和背景色的选择应该符合品牌形象和用户情感需求，并且在不同的界面元素之间应该有明显的对比度，以提高用户的可辨识度和可用性。

另外，UI规范还要求设计师使用统一的字体样式，以确保用户界面的可读性和可理解性。

例如，标题、正文和按钮的字体大小、行距和字重要保持一致，以便于用户对信息的阅读和理解。

最后，UI规范还包括图标方面的要求。

设计师应该使用统一的图标库，并确保图标的风格、尺寸和颜色符合设计规范。

图标的使用应该简洁明了，有助于用户快速理解图标所代表的含义，并且在不同的界面元素之间有一致的图标风格，以提升用户的界面导航和交互体验。

总之，UI规范是一种重要的设计工具，它可以帮助设计师和开发人员创建一致、易用和美观的用户界面。

遵循UI规范可以提高产品的用户体验，并减少用户因界面设计差异而产生的困惑和操作错误。

随着UI规范的完善，用户可以更加顺利地使用软件，提高工作效率，提升用户满意度和产品竞争力。

网页设计制作规范要求

网页设计制作规范要求由于互连网的日异普及，客户对网站设计、制作的要求有了很大的提高，因此，我们要把握好每一个细节，使网页设计制作的水平更上一层楼。

以下是网页制作的一些注意事项，希望大家能引起重视。

一、网页制作中<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.对齐：保持页面内元素对齐方式的一致，如无特殊情况应避免同一页面出
现多种数据对齐方式。

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

5.保持功能及内容描述一致：避免同一功能描述使用多个词汇，如编辑和修
改，新增和增加，删除和清除混用等。

UI设计规范文档-BS版

目录：一、适用环境和对象二、必要性三、技术原则四、代码编写规范五、页面模版使用规范一、适用环境和对象本规范适用基于浏览器的B/S版软件项目开发工作。

开发流程中的模版页面编写和模版文件套用工作必须遵照此规范执行。

适用对象为开发编码人员、UI设计人员、模版编写人员、界面测试人员等。

基于客户端的C/S版软件开发工作不适用本技术规范。

二、必要性本规范旨在制订开发编码人员和UI模版编写人员之间在工作交叉部分的技术标准，使他们遵循同一操作规范，利于交叉工作的平缓顺利交接。

以标准化方式，提高沟通和技术协作的水平，提高工作效率。

减少和改变责任不明，任务不清，和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。

三、技术原则代码规范化书写代码规范化书写实现了脚本整体风格的一致，保证了同一个人不同时期写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致。

因为开发不可能在孤立中进行，所以代码规范化书写是项目组人员合作沟通的前提。

数据层、结构层、表现层分离数据内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。

这里强调的“真正”，是指纯粹的数据信息本身。

把信息内容以一种合适的方式格式化，简言之就是页面排版，例如：分成标题、作者、章、节、段落和列表等，使内容更加具有逻辑性，条理清晰易读易懂，叫做“结构(Structure)”虽然定义了结构，但是内容还是相同的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。

所有这些用来改变内容外观的东西，称之为“表现(Presentation)”“表现”的作用使内容看上去漂亮、赏心悦目、打动人心！所有HTML和XHTML页面就是由“结构、表现和行为”这三方面组成的。

抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，人对页面内容的交互及操作效果叫做“行为（Behavior）”,对于数据、结构与表现相分离，最早是在软件开发架构理论中提出来的。

UI设计UI设计规范完整版精选全文

高效性与准确性
3.1.2
UI设计规范包括的内容
3
1.图标设计规范
图标是具有高度概括性的、用于传达视觉信息的小尺寸图像，常与文本搭配使用。图标不仅能传达出丰富的信息，还能提升整个界面美感和信息可识别性。同时，有的图标还具有交互性和功能性，用户点击这些图标会执行特定的操作，触发相应的功能。
3.1.2
15
1. Windows系统的界面尺寸规范
由于Windows系统也在不断的升级改版，其界面尺寸有很多，常见的界面尺寸主要包括如图所示的8种主要尺寸。
3.2.3 Windows系统的UI设计规范
16
2.控件规范
与Android系统和iOS系统一样，Windows系统中的控件也需要制定相应的设计规范。
图片的比例
在UI设计中，对于图片的比例没有严格的规定，设计人员可根据需要进行调整。
图片的尺寸规范
• App个人中心界面的用户头像大小多为144px×144px和120px×120px 个人资料界面的用户头像大小多为
• 96px×96px 消息列表界面的用户头像大小多为 80px×80px
• 帖子详情页界面的用户头像大小多为 44px×44px和60px×60px。
了解UI设计规范
3.1.1 UI设计规范的原则
2
一致性
UI设计规范的一致性原则表现在产品界面的各个方面，如在设计布局界面时，需要使标题字体、内容字体、链接字体等保持一致；在进行交互设计时，界面中的交互组件、交互流程、用户行为、交用的设计细节规范必不可少，这不仅能够降低设计人员的沟通成本，提高设计的准确性，还遵循了UI设计规范的高效性和准确性原则。
导航栏
Logo图标

网页ui设计规范

网页ui设计规范网页UI设计规范是指在设计网页时需要遵循的一些原则和规范。

以下是一些常见的网页UI设计规范：1. 界面布局规范：网页的布局应该简洁明了，遵循常见的阅读习惯。

例如，主要内容放在页面的中间，导航栏放在页面的顶部或左侧，页面底部放置版权信息等。

2. 色彩规范：选择适合主题和目标受众的色彩搭配。

保持色彩的统一性，避免过多的颜色和花纹，以保持页面的整洁。

3. 字体规范：选择适合屏幕阅读的字体，字体大小不宜过小或过大。

使用合适的行距和字距，以提高阅读的舒适度。

4. 导航规范：导航栏应该清晰明了，方便用户找到需要的信息。

导航的位置一般放在页面的顶部或左侧，使用有意义的标签或图标，避免使用过多的下拉菜单。

5. 图片和图标规范：选择高质量的图片和图标，避免失真和模糊。

图片和图标应与页面主题相符，不应过多且应合理放置。

6. 表单规范：设计简单明了的表单，减少填写的步骤和信息的要求。

为表单字段添加合适的标签和描述，以便用户正确填写。

7. 响应式设计规范：确保网页能够在不同设备（电脑、手机、平板等）上正常显示并有良好的用户体验。

适应不同设备大小和分辨率，确保页面元素正确排布和可点击。

8. 交互规范：用户与网页的交互应该简单直观，遵循用户的习惯和预期。

例如，鼠标悬停时显示提示信息，按钮点击后有明显的反馈，链接和按钮的样式表明可以点击等。

9. 可访问性规范：确保网页对于视力或听力有障碍的用户也能够正常访问和使用。

使用有意义的标题和ALT标签，提供清晰的描述和指导。

10. 页面加载和性能规范：确保网页加载速度较快，避免过多的动态效果和插件。

优化图片和脚本的大小，缓存静态资源，减少HTTP请求等。

以上是一些常见的网页UI设计规范，设计师在进行网页设计时可根据实际情况结合这些规范进行设计，以提高用户体验和页面的可用性。

ui设计规范文档

ui设计规范文档UI设计规范文档是对于用户界面设计的标准化要求的详细描述和说明，目的是保证设计风格的一致性，提高用户体验。

以下是一个700字的UI设计规范文档示例：1. 颜色规范- 主题色：#4285f4；- 辅助色：#ff6c00；- 警示色：#d50000；- 成功色：#00c853；- 背景色：#ffffff；- 文字色：#333333；- 辅助文字色：#666666。

2. 字体规范- 标题字体：Roboto，加粗，24px；- 正文字体：Roboto，常规，16px；- 链接字体：Roboto，加粗，16px，蓝色。

3. 图标规范- 使用Material Design风格的图标；- 大小：24px；- 颜色：主题色。

4. 布局规范- 使用栅格系统进行布局，总共12列；- 页面头部：高度100px，显示Logo和标题；- 侧边栏：宽度200px，显示导航菜单；- 主要内容区域：与侧边栏对齐，占据剩余宽度； - 页面底部：高度100px，显示版权信息。

5. 按钮规范- 使用圆角矩形按钮；- 高度：40px；- 内边距：左右各20px；- 文字颜色：白色；- 背景色：主题色；- 悬停时背景色：辅助色。

6. 输入框规范- 高度：40px；- 边框：1px灰色边框，圆角5px；- 内边距：左右各10px；- 文字颜色：黑色；- 聚焦时边框颜色：主题色。

7. 图片规范- 使用无损压缩的图片格式，如PNG；- 图片尺寸根据具体需求确定；- 图片优化，保证大小合适，加载速度快。

8. 交互规范- 链接：使用下划线和蓝色字体表示；- 按钮：悬停时显示辅助色背景；- 输入框：聚焦时边框颜色变化；- 图片：悬停时显示阴影效果。

9. 响应式设计规范- 适配移动设备，采用自适应布局；- 根据不同屏幕尺寸，调整布局和字体大小；- 确保内容能够自动适应屏幕大小。

通过以上的UI设计规范文档，设计师在进行界面设计时可以参照这些规范，从而保证界面的一致性和用户体验的提升。

UI界面设计规范方案

UI界面设计规范方案UI界面设计规范方案是指在进行UI界面设计时，为了保证设计的一致性和统一性，制定出的一系列规范和标准。

本文将从界面组织结构、色彩规范、字体规范、按钮与交互规范、图标规范、布局规范和响应式设计规范等方面，提出一套详细的UI界面设计规范方案。

一、界面组织结构1.每个页面应具有明确的主要功能和目标，页面元素应根据重要性和使用频率进行布局。

2.页面应具有清晰的导航结构，用户可以清楚地知道自己所处的位置。

3.页面元素之间应具备明确的关系，相关的元素应放置在一起，形成视觉上的整体。

二、色彩规范1.使用合适的色彩搭配，避免色彩过于鲜艳或过于杂乱。

2.根据不同的功能和意图，使用不同的色彩表达，达到视觉上的吸引和引导。

3.突出页面中的重要元素，使用醒目的颜色进行标识。

三、字体规范1.使用清晰易读的字体，尽量避免使用过于花哨或装饰性的字体。

2.根据不同的文本内容和重要性，选择合适的字体大小和样式，以便用户更容易阅读。

3.具备良好的排版和间距，避免字符之间过于拥挤或留白过大。

四、按钮与交互规范1.按钮的样式应统一且易于辨识，确保用户可以很明确地知道哪些元素可以进行点击操作。

2.按钮的大小和位置应一致，避免用户进行误操作。

3.提供明确的提示和反馈，确保用户知道他们的操作是否成功。

五、图标规范1.使用简洁、直观的图标，避免过于复杂或具有多义性的图标。

2.图标的样式应统一，遵循同一设计语言和风格。

3.图标的大小和填充应符合UI设计的整体风格，与页面其他元素相互匹配。

六、布局规范1.使用网格系统进行布局，以确保页面元素的对称和平衡。

2.保持页面元素之间的间距一致，避免视觉上的不协调感。

3.使用白色或浅色背景，增加页面的整洁感和可读性。

七、响应式设计规范1.根据不同的设备和屏幕尺寸，设计不同的布局和适配方案。

2.确保页面元素在不同设备上显示一致，不出现错位或溢出的情况。

3.优化页面加载速度，提高用户体验。

总结：上述是一套UI界面设计规范方案的主要内容，通过严格遵循这些规范和标准，可以提高UI界面的一致性和统一性，增加用户的使用便捷性和舒适性。

UI设计规范(流程、界面)

UI设计规范（流程、界面）UI设计(流程/界面)规范一：UI设计基本概念与流程1.1目的规范公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。

1.2范围l界面设计l此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。

1.3概述UI设计包括交互设计，用户研究，与界面设计三个部分。

基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。

UI 设计师应全面负责产品以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。

本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。

1.4基本介绍A、需求阶段软件产品依然属于工业产品的范畴。

依然离不开3W的考虑（Who,where,why.）也就是使用者，使用环境，使用方式的需求分析。

所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄，性别，爱好，收入，教育程度等)。

什么地方用（在办公室/家庭/厂房车间/公共场所）。

如何用（鼠标键盘/遥控器/触摸屏）。

上面的任何一个元素改变结果都会有相应的改变。

除此之外在需求阶段同类竞争产品也是我们必须了解的。

同类产品比我们提前问世，我们要比他作的更好才有存在的价值。

那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。

我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。

B、分析设计阶段通过分析上面的需求，我们进入设计阶段。

也就是方案形成阶段。

我们设计出几套不同风格的界面用于被选。

C、调研验证阶段几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。

测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。

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键移动光标焦点，移动遵循从左至右，从上至下的原则。