UI设计规范说明书三篇.docx
《UI设计规范说明书三篇.docx》由会员分享，可在线阅读，更多相关《UI设计规范说明书三篇.docx（41页珍藏版）》请在冰豆网上搜索。
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像素；所有的二级菜单栏目都应该有相应的图标设计。
（图5）
【4】自定义栏目区：
自定义医生所需要显示的快捷方式
【5】最大、最小、关闭区：
按钮必须醒目（操作习惯和风格和PCwindows系统一致）、操作性强
窗口风格
1）所有窗口最大化、最小化风格要一致
2）报错页面的风格一致，最好有统一的报错页面
3）类似功能的窗口打开的风格要一致
4）相同功能在不同模块的名称要一致
5）子窗体应尽量在显示在主窗体的左上或居中放置
6）弹出式窗口尽量在不借助滚动条的情况下显示所有内容
7）窗体最小化/最大化时，控件也要随着窗体而缩放
1.详细：
（图5）
（图6）
，右上角的关闭按钮最大最小化按钮，都统一改成
系统弹出框的长、宽比例为3:
1
2.弹出框比例
系统弹出框的长、宽比例为3:
1，功能页面弹出框长和宽的比例为5:
4
3.弹出框风格
所有的弹出框右上角的关闭按钮最大最小化按钮，都统一改成
，
弹出框四周的边距为13像素,（图5）风格上和windows操作习惯尽可能一致。
弹出框边界
病人基本信息显示：
床号、姓名、病人ID、住院号、性别、年龄、身份、费别、出生地、证件号、入院日期、入院方式、入院诊断、预交金、过敏史、检查检验结果总览。
（图6）
弹出框边界要与背景有区分，边界要清楚（图6）
4.所有弹出框最大化不要遮住windows任务栏（图6）
5.弹出元素对齐
弹出框的文字要有对齐
（图7）
如（图7）弹出框的文字输入框都没有对齐，给人感觉比较混乱，不规范。
当不同长度文字的排版出现对对齐不一致的时候，上下文字必须统一右对齐，输入框统一左对齐。
如（图8）
（图8）
如（图10）弹出框的文字元素弹出框元素比较混乱，界面上没有对其，如果文字对其空间不够，可考虑换行
（图10）
整页面
检验结果窗口中，点“导出excel”按钮，可将结果数据导出来，保存为excel文件存放到本地。
检验结果窗口中，选择某个报告项目后，点击“趋势力”按钮，检验结果会以图例的方式显示某个时间段内的变化情况。
整页区分于弹出页面，包含导航主页不是以弹出的形式来显示页面，整页必须兼容1024*7681280*8001440*900等三个主流的分辨率其中默认分辨率应该为1024*768。
字体规范
规范：
UI字体、色彩要一致整体色彩搭配要融为一体，起提示作用的部分要清楚醒目不可修改的字段，统一使用灰色文字显示
页面标题:
（图11）14号加粗宋体，黑色，字体间距默认
（图11）
主菜单：
（图12）12号字体，宋体，字体间距默认，菜单之间的间距为20像素，每个菜单项目都必须有快捷键
（图12）
下拉菜单：
（图12）下拉菜单采用9pt、宋体、黑色、文字行距10像素。
（图12）
页面tab切换按钮：
Tab切换按钮采用10.5pt、宋体、黑色
（图13）
Tab页面的选项卡偏小，对用户体验感觉不好，推荐大小：
116*32像素
标题菜单：
（图14）菜单标题文字一般采用10.5pt，间距默认。
（图14）
表格文字：
表格文字标题部分统一采用10.5pt黑色宋体字，表格内容采用9pt字体。
其中标题文字都采用居中对齐的方式，表格内的文字采用左对齐或者右对齐的方法（视情况而定）。
一个表格文字不能有大有小。
如（图14）那样就不合理，文字大小太混乱
如（图15）标题栏目的文字有大有小，应该统一为10.5pt；tab选项卡的文字偏小，文字应该为10.5pt，便于客户体验操作
如（图16）表格内的文字当出现3个或者2个的时候2个文字的字体必须中间有空格，与三个文字的两边都对齐，
（14）不合理
（15）不合理
（图16）
页面元素
按钮：
按钮风格相同，大小相似，字体一致无效按钮要屏蔽。
如（图17）高：
24像素，宽：
根据文字长度定；按钮的文字居中，字体统一大小10.5pt，上、右、下、左的边距分别为：
13px,11px,13px,11px按钮之间的间距统一为8px
（图17）
2、表格：
（图18）表格整体色调采用灰调，便于医生、护士长时间操作部视觉疲劳，表格分为标题部分，主体内容部分，标题部分应该用相应的颜色加以区别，表格隔行应用不同的颜色加以区别。
表格选中行应用色调区分，表格的行高为25像素。
表格四周的文字要有空隙padding属性2px。
不同表格之间必须有对齐。
如（图19）三个表格之间表格的顶部、底部都应该有对齐，表格之间应有空隙，空隙。
8像素
（图18）
（图19）
3输入框：
必输项
1）必输项中不可为空，不可输入空格
2）必输项给出必输项标识（*）
字段长度
超过数据库规定长度时不允许输入
格式校验
1）身份证号、E-MAIL、邮箱等特定字段的格式要符合需求的规定
日期格式
1）日期显示格式一致，如：
yyyy-mm-dd
2）使用日期控件，尽量不是手工录入
特殊字符
1）输入区域输入特殊字符，插入数据库时不出错或提示不允许输入特殊字符。
特殊字符包括：
'"=~$%^%￥&#@等
英文输入
英文输入不区分大小写，不可输入汉字、数字及特殊字符
数值字段
只能输入+-0~9及功能键（BackSpace光标）
字符字段
1）如果支持日韩文字，则要判断全角假名/半角假名
单行文本框/多行文本框
1）长度合适，可以容纳相应文字，但不能超过数据库该字段长度，最好将可以输入的最大字符数标在旁边。
建议单行文本框中当输入的字符超过一定长度时再输入无效；对于多行文本框给出最大字符数标识
附件
1）可正常添加符合格式的附件
2）附件可正常打开和保存，附件名较长时可正常操作
3）直接输入错误的附件地址，保存时应给出提示信息
4）附件打开/保存到本地时，文件名要显示原文件文件名
密码输入
1）需在需求中定义密码是否允许为空或空格；密码是否允许特殊字符；是否区分大小写，密码的可输入长度
2）程序中应给出文字说明密码的可输入长度入无效；对于多行文本框给出最大字符数标
页面色调
页面色调以现有的银灰调为准，避免客户视觉疲劳，避免出现大面积纯度高亮的颜色
选项卡背景颜色（图20）：
R：
222G：
227B：
227
（图20）
通用表格色调（图21）
表格标题色调：
R：
200G：
203B：
210
表格主体色调：
R：
238G：
238B：
238
表格选中条颜色：
R：
116G：
132B：
155
（图21）
用户界面行为
鼠标
1）鼠标为不可点击状态时显示箭头，可点击状态显示手型；系统忙时显示沙漏形状
系统响应时间
系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧，而响应时间过快也会影响到用户的操作节奏，并可能导致错误。
因此在系统响应时间上坚持如下原则：
响应时间长度界面设计：
1）0-5秒鼠标显示成为沙漏；
2）5秒以上显示处理窗口，或显示进度条；
3）一个长时间的处理完成时应给予完成警告信息。
光标定位
1）打开新增（修改）页面时，光标初始定位在第一个待输入的文本区
2）因输入不正确提示用户重新输入时，光标默认focus在出错的输入区，并高亮全选该错误输入
3）若必输项未填写完毕就提交，应给出说明信息并能自动获得焦点
4）可写控件检测到非法输入后应给出说明并能自动获得焦点
TAB键
1）界面支持键盘自动浏览按钮功能。
即TAB自动切换功能
2）Tab键的顺序与控件排列顺序要一致，一般情况下总体从上到下，同时行间从左到右的方式
布局
1）窗体控件布局和间距尽量与Windows标准保持一致
2）尽量采用Dock和锚点来让布局合理
3）尽量让窗体中显示大部分常用功能
篇二：
UI设计规范说明书
第一章平面设计
1常用纸张规格及主要性能
1.1铜版纸．铜版纸又称为涂料纸，这种纸是在原纸上涂布一层白色浆料，经过压光而制成的。
铜版纸有单、双面两类。
1.1.1纸张表面光滑，白度较高，纸质纤维分布均匀，厚薄一致，伸缩性小，表面
光滑，有较好的弹性，较强的抗水性能和抗张性能，
1.1.2对油墨的吸收性与接收状态十分良好。
铜版纸印刷时压力不宜过大，要选用胶印树脂型油墨以及亮光油墨。
1.1.3规格：
70，80，100，105，115，120，128，150，157，180，200，210，
240，250（g/m2）。
其中：
105，115，128，157（g/m2）进口纸较多。
1.1.4铜版纸主要用于印刷画册、封面、明信片、精美的产品样本以及彩色商标等。
1.2胶版纸．胶版纸主要供平版（胶印）印刷机或其他印刷机印刷较高级彩色印刷品时使用。
有单面和双面之分，还有超级压光与普通压光两个等级。
1.2.1纸张表面光滑，白度较高，纸质纤维分布均匀，厚薄一致，伸缩性小，表面光滑，有较好的弹性，较强的抗水性能和抗张性能，
1.2.2胶版纸伸缩性小，对油墨的吸收性均匀、平滑度好，质地紧密不透明，白度好，抗水性能强，应选用结膜型胶印油墨和质量较好的铅印油墨。
1.2.3规格：
50，60，70，80，90，100，120，150，180克／米2。
1.2.4胶版纸主要用于彩色画报、画册、宣传画、彩印商标及一些高级书籍封面、插图等。
1.3书写纸．书写纸是供墨水书写的纸张，纸张要求书写时不渗墨。
1.2.1书写纸分为特号、1号、2号、3号和4号。
纸张的号数代表纸质的好坏程度，号数越大纸质越差。
1.2.2规格：
45、50、60、70、80、100克／米2。
1.2.3书写纸主要用于低档印刷品，如练习本、日记本、表格和帐簿等。
1.4牛皮纸．通常呈黄褐色。
半漂或全漂的牛皮纸浆呈淡褐色、奶油色或白色。
1.4.1规格：
60-200g克／米2
1.4.2有单光、双光、条纹、无纹等。
1.4.3牛皮纸具有很高的拉力，抗撕裂强度、破裂高和动态强度很高。
能承受较大拉力和压力不破裂
1.4.4主要用于可用作水泥袋纸、信封纸、胶封纸装、沥青纸、电缆防护纸、绝缘纸等
1.5瓦楞纸．瓦楞纸在生产过程中被压制成瓦楞形状，制成瓦楞纸板以后具有纸板弹性、平压强度，并且影响垂直压缩强度等性能。
1.5.1瓦楞纸板是由面纸、里纸、芯纸和加工成波形瓦楞的瓦楞纸通过粘合而成。
1.5.2瓦楞纸板可以加工成单面瓦楞纸板、三层瓦楞纸板、五层、七层、十一层等瓦楞纸板。
单面瓦楞纸板一般用作商品包装的贴衬保护层或制作轻便的卡格、垫板。
三层或五层瓦楞纸板制作的瓦楞纸箱或瓦楞纸盒已堂而皇之的直接上了销售柜台，成了销售包装。
七层或十一层瓦楞纸板主要为机电、烤烟、家具、摩托车、大型家电等制作包装箱。
1.5.3瓦楞纸板的波形分为V形、U形和UV形。
V形瓦楞波形的特征是：
平面抗压力值高。
但这种波形的瓦楞做成的瓦楞纸板缓冲性差，瓦楞在受压或受冲击变形后不容易恢复。
U形瓦楞波形的特征是：
粘结牢固，富有一定弹性。
当受到外力冲击时，不像V形楞那样脆弱，但平面扩压力强度不如V形楞。
UV形瓦楞辊。
加工出来的波形瓦楞纸，既保持了V形楞的高抗压力能力，又具备U形楞的粘合强度高，富有一定弹性的特点。
目前，国内外的瓦楞纸板生产线的瓦楞辊均采用这种UV形状的波形瓦楞辊。
1.5.4国际上通用的瓦楞的楞形分为四种，分别是A型楞、C型楞、B型楞和E型楞。
A型楞制成的瓦楞纸板具有较好的缓冲性，富有一定的弹性。
C型楞较A型楞次之。
但挺度和抗冲击性优于A型楞。
B型楞排列密度大，制成的瓦楞纸板表面平整，承压力高，适于印刷。
E型楞由于薄而密，更呈现了它的刚强度。
1.5.5单面瓦楞纸板的质量是由原纸的质量、瓦楞楞型、瓦楞机的工作温度、粘合剂质量、机器运行速度，操作者技术水平决定的。
1.6常用印刷尺寸。
1.6.1开本尺寸
大度全开：
850 x 1168mm 正度全开：
787 x 1092mm
大度对开：
570 x 840mm正度对开：
736 x 520mm
大度4开：
420 x 570mm 正度4开：
520 x 368mm
大度8开：
285 x 420mm 正度8开：
368 x 260mm
大度16开：
210 x 285mm 正度16开：
260 x 184mm
大度32开：
203 x 140mm正度32开：
184 x 130mm
1.6.2纸张尺寸
大度全开：
889×1194mm正度全开：
787×1092mm
大度对开：
590×880mm正度对开：
780×540mm
大度四开：
590×440mm正度四开：
390×540mm
大度八开：
420×290mm正度八开：
390×270mm
大度十六开：
210×285mm正度十六开：
185×260mm
大度三十二开：
210×140mm正度三十二开：
185×130mm
1.6.3国际尺寸：
A4=210×297mm，全开＝965×630mm＝16张A4纸张，1P=16开。
2不干胶纸标签
不干胶标签也叫自粘标签，及时贴，即时贴，压敏纸等，是以纸张，薄膜或特种材料为面料，背面涂有粘合剂，以涂硅保护纸为底纸的一种复合材料，并经印刷，模切等加工后成为成品标签。
应用时只需从底纸上剥离，轻轻一按，即可贴到各种基材的表面，也可使用贴标机在生产线上自动贴标。
2.1不干胶常用材料。
2.1.1使用面材类
模造纸woodfreepaper、铜版纸artpaper（遮光/镜面）、透明PVC、静电PVC、聚酯PET、镭射纸、耐温纸、PP、PC、牛皮纸、荧光纸、感热纸、铜丝龙、银丝龙、镀金纸、镀银纸、合成纸（CPC/PP/HYL/优韧纸/珠光纸）、铝箔纸、易碎（防伪）纸、美纹纸、布标（泰维克/尼龙）、珍珠龙、夹心铜版、热敏纸。
2.1.2使用膜类：
透明PET半透明PET透明OPP半透明OPP透明PVC有光白PVC无光白PVC合成纸有光金（银）聚脂无光金（银）聚脂。
2.1.3使用胶型：
通用超粘型、通用强粘型、冷藏食品强粘型、通用揭开型、纤维再揭开型。
2.1.4使用底纸：
白、蓝、黄格拉辛纸glassine（或蒜皮纸onion）、牛皮纸、聚酯PET铜版纸、聚乙烯polyethylene。
2.2不干胶常用黏合剂。
不干胶材料中常用的黏合剂有4种类型：
丙烯酸类水性乳胶、橡胶类热熔胶和溶剂型橡胶或丙烯酸类黏合剂，其中使用最广泛的是乳胶和热熔胶。
2.3不干胶常用印刷工艺，现在国内主要采用轮转机印刷、圆压平机印刷，商标机印刷，另有印丝带标的小轮转机，以及自动丝印机等印刷方式。
2.4不干胶材料的模切，不干胶材料的模切质量同多种因素有关，如模切方式、模切装置精度、模切版的精度、模切刀片同材料的匹配情况，此外，模切质量还与不干胶材料的特性有关，如面纸、黏合剂和底纸性能不同，各种不干胶材料的模切特性也不一样。
2.4.1面材对模切的影响，
1）模切纸张类材料是刀具切削和纸张受力断裂的综合结果，即刀刃向下切削的同时也将纸张向两侧挤压，所以，相对而言，纸张类材料的模切精度不是很高。
在分析样品时经常会看到一些标签有毛边，这就是由于材料纤维较粗，自然断裂形成的现象。
2）薄膜类材料的模切，是完全切穿的过程。
因为薄膜类材料大多具有韧性，不会自然断裂，必须完全切穿或者切穿五分之四的厚度，否则排废时会连同标签一同剥离。
因此，模切薄膜材料的刀刃要锋利，硬度要高，要采用小角度模切刀，刀刃角度通常为30°～42°。
如果使用大角度的模切刀，不仅模切困难，而且如果刀刃不锋利还会出现面材切不穿，底纸断裂的情况，或者使成品标签的边缘出现翻边现象，造成渗胶。
总之，模切薄膜的精度要高于纸张类材料，所以模切薄膜材料对设备精度、模切版的精度和底纸都有一定的要求
2.4.1面材的强度对模切的影响，面材的强度同面材的厚度、纤维（高分子）结构和自身的湿度有关。
在不干胶材料的模切过程中，与面材关联最大的因素是排废速度。
环境湿度越大，材料受潮后自身的强度就越弱，从而容易拉断。
2.4.2面材对模切的影响，材料的厚度直接影响模切的深度，材料越厚，越容易模切。
因为材料越厚，模切的公差越大，切穿底纸的几率就越小。
相对而言，材料薄，容易出现切穿底纸的故障。
2.4.3黏合剂对模切的影响。
水乳胶容易分离，热熔胶的胶膜之间很难分离。
所以在模切时，如果是水乳胶材料,在黏合剂层未被切断或完全没有切断的情况下，标签照样排废，因为排废时的拉力很容易拉断胶层。
而在模切热熔胶型不干胶材料时，如果模切不到位，不是标签连同废纸边一齐剥下，就是底纸切穿。
因为热熔胶层只有完全切断（或大部分切断）才能正常排废，否则未被切穿的胶膜会连同标签一同剥下，提高了模切难度。
3瓦楞纸箱和彩盒
3.1瓦楞纸箱，瓦楞纸箱是由瓦楞纸板制作而成，是目前使用最为广泛的纸包装容器。
3.1.1按国际瓦楞纸箱协会推荐的标准来分，有标准型瓦楞纸箱和非标准型瓦楞纸箱两大类。
按加工工艺或箱型结构来分，有普通型瓦楞纸箱，异型瓦楞纸箱和瓦楞纸板结构件三大类。
按结构形式来分主要有开槽型纸箱、套合型纸箱、折叠型纸箱三种。
按组成瓦楞纸箱纸板种类分，有单瓦瓦楞纸箱）、双瓦瓦楞纸箱或七层纸板瓦楞纸箱。
3.1.2具有缓冲性能好、轻便、牢固、外形尺寸小、原料充足、成本低、便于自动化生产、包装作业成本低、能包装多种物品、印刷性能好，易于回收等优点。
3.1.3瓦楞纸箱抗压强度是指在压力试验机均匀施加动态压力下至箱体破损的最大负荷及变形量。
3.1.4纸板线生产纸箱是通过涂胶、加热瞬间粘合、烘干后成型的。
3.2瓦楞彩盒．
3.2.1大部分包装企业生产彩盒采用的是以下两种工艺：
:
（1）先印刷彩色面纸后覆膜或上光，之后再手工裱胶或机械自动贴合瓦楞成型。
（2）将彩色图文印在塑料膜上，再覆膜到白卡纸上，然后裱贴成型。
3.2.2彩盒其承压力和抗压强度均大大低于同材质的普通水印纸箱（纸板线生产），遇到阴雨天就难以保证质量，主要是因为裱贴的彩盒纸板是不加热烘干的，胶液中的水分渗透到纸张里面，加之彩面上光油和塑料薄膜的阻隔，箱坯内的水分长时间得不到散发，自然就回软降低了强度。
3.2.3增强彩箱的承压力、抗压强度必须增强芯纸的承压能力，只要面纸裱胶后不显瓦楞痕迹就应尽量采用低克重纸张。
芯纸、瓦纸最好使用挺力好、环压强度高的草浆或木浆纸。
不要使用中强、或普强瓦纸，因其多为生浆和再生浆的混合物，吸水快、环压强度低、韧性虽好但挺度低。
3.3瓦楞纸箱和彩盒成型工艺
3.3.1目前使用的瓦楞纸箱和彩盒成型工艺，其平面展开结构由轮廓裁切线和压痕线组成，模切和压痕是其主要的工艺特点。
对于非直线的异形轮廓和功能性结构，只有采用模压方法，才便于成型。
模压工艺流程主要有分模，切版，设计制图，切割木版，安装刀、线、粘贴海绵，打样，起鼓线，模切等步骤。
3.3.2印刷开槽．在印刷开槽机组中，模压部分主要由上、下滚线轮，上、下开槽刀，上、下切角刀和分切刀等组成。
3.3.3开槽工艺常见问题有开槽尺寸不准确，深度不一致，刀口不洁，压线深度不够，折痕不一致、压痕处断裂，压线破裂等问题。
3.3.4纸箱生产使用的粘合剂大都是自制或购买的玉米淀粉胶。
优质的玉米胶不但粘合强度好，而且还能增强纸板的承压力，挺力等，且箱体不易变形。
3.3.5涂胶量，无论是手工还是自动机械裱贴彩面，涂胶量不宜过大，实际生产中有些员工为了避免脱胶人为增加涂胶量，这是不足取的。
4版式设计
4.1字符．文字是用来记录和传达语言的书写符号。
印刷上用的字符可以分为字种、字体、
字号等。
字种主要有汉字、外文字、民族字等。
汉字包括如宋体、楷体、黑体等。
外文字又可以依字的粗细分为白体和黑体，或依外形分为正体、斜体、花体等等。
民族字是指一些少数民族所使用的文字，如蒙古文、藏文、维吾尔文、朝鲜文等。
4.1.1字体
（1）宋体宋体字是印刷行业应用得最为广泛的一种字体，根据字的外形的不同，又分为XX和报宋。
宋体字的字形方正，笔画横平竖直，横细竖粗，棱角分明，结构严谨，整齐均匀，有极强的笔画规律性，从而使人在阅读时有一种舒适醒目的感觉。
在现代印刷中主要用于书刊或报纸的正文部分。
（2）楷体楷体又称活体，是一种模仿手写习惯的一种字体，笔画挺秀均匀，字形端正，广泛地用于学生课本、通俗
升级会员 