全亚通信产品部界面设计规范

文档编码保密级别

编写人员董永华文档版本1.0.

全亚通信产品部

界面设计规范

北京全亚通信技术有限企业

2023年12月05日

目录

1界面设计的规范目的...........................................

2界面布局.....................................................

2.1登录页面...............................................

2.2主界面.................................................

2.3左侧菜单...............................................

2.4表单...................................................

2.5目前位置...............................................

2.6列表...................................................

2.7弹出窗口...............................................

2.8可视化控件.............................................

3常见问题规范...................................................

4尺寸规范.......................................................

5导航规范.......................................................

6链接规范.......................................................

7字体规范.......................................................

8终端开发图片格式规范..........................................

9顾客体验设计规范...............................................

10在顾客体验设计时需要注意如下儿点

1界面设计的规范目的

界面是软件与顾客交互的最直接口勺层，界面H勺好坏戾定顾客对软件H勺第一印象。设计良好

的界面可以引导顾客自己完毕对应操作，起到向导作用。

界面设计重要是为了抵达如下目的：

1、以顾客为中心:设计由顾客控制H勺界面，而不是界面控制顾客。

2、清晰一致的设计:所有界面的风格保持一致，所有具有相似含义H勺术语保持一致，且易

于理解和使用。

3、拥有良好的直觉特性:以顾客所熟悉的现实世界事务的抽象来给顾客暗示和隐喻，来协

助顾客能迅速学会软件日勺使用。

4、较快日勺响应速度。

5、简洁、美观。

2界面布局

2.1登录页面

1、登录界面上要有系统口勺和系统名称版权等信息。

2、登录界面最佳有顾客名和ID的记忆，焦点直接定位到密码输入框。

3、假如顾客输入顾客名或密码错误时，要出现错误提醒，提醒顾客详细是哪项填写错误。

4、登录页面要突出操作区域，防止顾客眼球左右晃动，操作区保持在任何辨别率下保持

居中（如图1）0

如图1

5、登录页面提醒信息应当放置在发生错误区域附近，输入框高度24px,输入框与输入框

上下间距保持1.2倍，鼠标通过输入框要有明显的触碰效果。（如图2）

用户登录

农户特约服务店

0记住用户名O下次自动登录

忘记密码

如图2

2.2主界面

1、界面上均有标志和系统名称（假如系统名过长可以用简称），要有顾客名、目前H勺日期

和有关H勺快捷命令按钮。

万庄农资喻系统员…的M索T*1

1系饶菜中

在4跋B杀濯苟B枪处理订・已克的♦订♦状冬查・东配1订・已交多订・tSiWU站内消息

＞入库W理修改供应音

►出库*理

♦位信口"目雷理wfrttS联廉人道理

»跳在盘域

博加

＞创卮隹慢

»货9状%工商笠记号：工日餐记号：

»索运管理企1H1时：RV£il:~企ik^ltMt企ii<

►更次吊窗理经重品0：先整由：

统计方去

»注册烫金：万元左■费金：万元

»或目

汪诂想叟：H年,18更：吨

•系钱通费

•菜♦才航保汴取淞

•修目遢盘

•索・后航

•栏目设置侬・与YD20120S2812345e4生♦号：098?554521

►X破资2梗货♦英2J：白育川♦人：王五

叨♦日期：2012fs29车牌号码：誉日

aj虱：衫三及秘谑/p>

2012年4月门日“期二102030*京金亚垛僮技术者用公司ISWMW

如图3

2、下拉菜单要根据菜单项选择项的含义进行分组，并应当按重要程序先后次序排列，重

要日勺放在开头，次要日勺放在后边；没有次序规定日勺菜单项按使用频率和重要性排列，常用日勺放

在开头，不常用的靠后放置。（如图4）

上级分类：顶级分类F'

商品类型：|_迪用用两两葩笆金考型卜卜

标识：吉堂记晶本-

台式机

数码影像

排序：手机通讯

电视机

页面关键闻庄平整板电脑

冰箱

MP4/MP3

打Efl机

显示器

页面掘迹:

如图4

3、不同样内容之间距离保持一致，这样让界面看起来更清晰。（如图5）

单位信息帐号管理奥质管理

熠加

工商登记号：一

企吐性质：民营企丑▼

经营品牌：

注册资金：万元

年徜售里：吨

图5

4、辨别率适应页面布局，以保证在辨别率1024*768下口勺对的显示为前提，适应高辨别率

状况使用表格宽度或层的宽度等参数使用比例方式自动适应。

5、目前浏览器有诸多版本，页面设计和CSS编写要兼容目前主流日勺几种浏览器(IE6——

IE10/FIREF0X)o

2.3左侧菜单

1、主菜单的宽度要靠近，树型菜单深度最佳控制在三层以内，字数控制在6个字以内，每

个菜单的字数能相似最佳；主菜单数目不应太多，最佳为单排布置。菜单构造要清晰明了，子

菜单对比上级菜单要缩进2个字符。(如图6红色区域)

►残次品管理

＞统计报表

＞＞项目备案

•系统设置

•菜单导航

•栏目设置

•菜单导航

•栏目设贵

►基础资料

图6

2.4表单

1、显示内容构造要清晰行间距与列宽要均匀，表单字数不同样样靠左对齐，输入框左对

齐，一行两列，输入框标题要明显区别于输入框自身，瑜入框宽度尽量保持一致。（如图7）

修改依府育

*位信息侏号备存说无管理联系人菅理

工丽登记号：工嵇登记号：♦

企出1JS：民客企业,企吐住艮・企吐▼

线■艮a：

注册奥金：万元注明宙金：万元

年消罐量：吨年消SE・：吨

保存取消

图7

2、常用日勺表单应当同步支持键盘操作和鼠标操作。复选框和选项框最佳有默认选项，并

支持Tab选择，Tab键的次序与控件排列次序要一致，目前流行总体从上到下，同步行间从左

到右欧I方式。

3、表单内在特定的字段域附近给出必填信息提醒，并用标注。

4、按钮大小基本相近，忌用太长的名称，省得占用过多日勺界面位置；按钮的大小要与界

面H勺大小和空间要协调；防止空旷日勺界面上放置很大的按钮；Enter缺省按钮/确认操作输入

设计。（如图8

流加QQ添加MSN漆加旺旺赤加Skype

Skype:在线客服7标题:在线客服7

BIBI：1在线存脆6标题：在线客服6

如图8

5、与正在进行的操作无关的按钮应当加以屏蔽或灰色显示。（如图9所示）

|H更丽:k页显示:2。e

缺货商品名称

如图9

6、高效率的输入方式，特定的字段内容日勺输入方式选用使用效率最高，不轻易发生错误

口勺方式。如录入日期使顾客点选弹出的日历控件，并不必干预口勺自动返回对的日勺格式。（如

图10所示）

如图10

7、表单格式尽量保持业务原始票据日勺格式或字段排列次序，以便顾客的集中录入过程。

表单字段左对齐。（如图11所示）

*出发地：简码收字*目的地：简码收字*出发曰期：2012-12-26出发时回：00:00-24:00▼

出发车次：*返回日期：,012-12-26返回时间：00:00-24:00▼

画全部画动车画Z字头画T字头囱存头画其他°）全部©始发©过路

如图11

8、输入框的宽度基本符合数据库可以容纳的宽度，喑示系统可以接受的字符容量。（如

图12所示）

详细地址：

联系电话：

邮政编码:

身份证号码:

电子由B件：

自有土地:

承包土地:

家庭人口：

如图12

2.5目前位置

1、要能精确显示目前内容日勺位置，字与“>>”之间要有至少一•种空格时间隙。（如图13）

集装箱量»用户管理

图13

2.6列表

1、每页所显示的条数及列数，以保持目前恰好一屏显示无需滚动为原则。（如图14所示）

▲

商品列表总记录数:40（共2页）

添加商品查找：商品名称，〔搜索每页显示：|20日

B商品名称商品编号分类消售价上架精品新品热弹

摩托罗拉MZ606SN_.43494C6487AF平板电脑¥5180.00元✓X✓X

nLGGD5803评机SN_.5A8505785A5C手机通讯¥960.00^XX

诺基亚(Nokia)N97mini3年机…SN_.615F9189F145手机通讯¥2100.00元✓XX.

□尼康COOLPIXS3100SN_.CBFA4321159A数码影像¥1249.00元✓X✓X

□索尼DSC-HX7SN_.2C063EEC520C数码影像¥2459.00元✓X✓X

O苹果iPhone416G版3寻机SN_7CFD5C75D7CB手机通讯¥5000.00元✓XX✓

O苹果ipad维SN_42E1EEAFF745平板电脑¥4500.00元✓X✓X

S索尼爱立信E15I3G手机SN_.1F299FE91E8C手机通讯¥1600.00元✓XX✓

三星P1000GALAXYSN_.E00BFC083B5F平板电脑¥3980.00元✓XX

s苹果iPoddassic3代160GMP3...SN_.C02158FFF33EMP3/MP4¥1899.00元✓XX

▼

・LIII卜

如图14

2、列表记录之间要有不同样口勺底色相间隔；假如没有底色间隔，当鼠标通过某条记录时

此记录底色要有所变叱与其他记录有所区别，当选中某条记录时，此记录口勺底色也要

有变化，以便顾客查看编辑。（如图15所示）

口编号1姓名性别号码备用号码职务

B00001管理员更1528680862115286808621经理

B00002曷志展女1352689382215286808621

000003朱世芳/p>

B00004葛忠高理

图15

3、表格中字体使用统一口勺字体和字号（一般都用宋体和12号字）；表头字体加粗，内容

字体不加粗，带小数点的数字没有特殊规定的状况下保留到小数点背面两位。（如图

16所示）

商品编号分类消售价上架精品

SN_43494C6487AF平板电脑¥5180.00元✓X

SN_5A8505785A5C手机通讯¥960.00^✓X

SN_615F9189F145手机通讯¥2100.00元✓X

SN_CBFA4321159A数码死像¥1249.00元✓X

SN_2C063EEC520C数码影像¥2459.00元✓X

SN_7CFD5C75D7CB手机通讯¥5000.00元✓X

SN_42E1EEAFF745平板电脑¥4500.00元✓X

如图16

4、列表带竖线的）状况下，表头标题居中对齐，内容字符宽度一直日勺状况下固定列宽，居

中对齐，字符宽度不一致的I状况下居左对齐，数值居右对齐。列表不带竖线日勺状况下,

表头及内容所有左对齐，列表内数据要与边缘有5Px间距。（如图17所示）

序号单价赖里

10.2351200你听,风笑的声音.是我一个人的寂意.在你的耳边步

21250013838183155备注

359888713838183155你听,风笑的声音;是我一个人的莪舞:在你的耳边界

428000013838183155备注

5450.58450055备注

如图17

5、单元格中口勺内容，至少离表格线5个像素的距离。（如图18所示）

序号单价戴里

10.2351200尔听.闻笑的声音.是我一个人的正真.在你的耳边方

21250013838183155皆注

359888713833183155尔听,风笑的声音.是我一个人的寂舞.在你的耳边郭

428000013838183155§■注

5450.58450055

如图18

6、列表中尽量支持排序功能。（如图19所示）

B编号1姓名性别号码备用号码职务

[□/[_00001^_管理员里经理

r一-1528680862115286808621

;排序功能曷志晓女1352689382215286808621

000003朱世芳/p>

D00004葛忠募理

图19

2.7弹出窗口

1、屏幕对角线相交口勺位置是顾客直视的地方，正上方四分之一处为易吸引顾客注意力的

位置，在放置窗体时要注意运用这两个位置，窗体口勺中心位置应当在对角线焦点附近。（如图

20所示）

图20

3、要显示窗口主题，窗口主题显示标志顾客目前所在模块或子系统名称，子任务窗体主

题使用“名词+动词”的语法陶造指明顾客目前的任务。（如图21所示）

图21

4、必填项要用红色星号标注。

5、内容对齐方式要一致，采用左对齐。

6、弹出窗体H勺页面主题、栏目的题等资料与关联的父窗体保持上下文一致，以便顾客理

解并做出处理方略。

2.8可视化控件

1、页面上计量单位必须跟在输入框后，计量单位与输入框间保留一种空格，如遇必输项

需显示计量单位的，计量单位在“*”号之前显示。（如图22所示）

客户类别।类别一出作容牖西一

——iI

图22

2、表单中提醒信息可以放在表单最上面，逐条提醒，提醒出错地方要明确标示出来。（如

图23所示）

单位信息帐号管里资质管理联系人管理

以下信息嗔写有误，清重新填写

E-mai格式不正确

图23

2、页面元素与元素之间间距要绝对相等。（如图24所示）

修改供应商

单位信息||帐号管理||资质管理||联系人管理

增加

图24

3常见问题规范

1、页面中同样的区域同样的位置字体大小保持一致

2、页面中常用字体颜色属性保持一致（如红色：#ri'0000,蓝色：#004888,黑色：#333333,

白色：#000000,灰色#666666）

3、页面块与块之间上下间距保持一致，左右间距也要保持一致

4、页面中模块内上下左右间距保持一致

5、页面中各组件形式保持统一

6、表单中文字左对齐数值右对齐，标题居中对齐，不要让单列表单显得空旷（序号、号

码属于文字类型，金额、数量属于数值类型）

7、页面内出现小写金额时，数字前统一加货币符号“¥”，对的规范日勺体现方式（如：

¥200.00）,不在使用¥200元或¥200.0等形式体现

8、页面内所有文字数据与项目主题不有关的不要出现（如：万庄化肥项目因此的文字信

息应当与栏目呼应）

9、短日期显示格式必须为YYYY-MM-DD,长日期显示格式必须为YYYY-MM-DDhh:mm,时间

采用24小时制。

示例：

1972年10月01日显示为：1972-10-01

1972年10月01日上午8点05分显示为：1972-10-0108:05

1972年10月01日下々4点05分显示为：1972-10-0116:05

4尺寸规范

1、页面原则按1024*768尺寸制作，推荐尺寸带滚动条日勺为1002*610px,不带滚动条的

为1024*610px

2、页面长度原则上不超过3屏，宽度不超过1屏

3^banner