江西IT人才实训基地

SNS项目

系统界面设计报告

文档作者： SNS小组

项目组长： 黄世磊

批 准 人： XX

批准日期：XXXX年XX月XX日

江西IT人才实训基地

版本状态

审阅者 分发

江西IT人才实训基地

目 录

1 引言 .......................................................................................................................... 2

1.1

1.2 编写目的........................................................................................................ 2 编写约定........................................................................................................ 2

1.2.1 目录规则 ................................................................................................ 2

1.2.2 正文内容 ................................................................................................ 2

1.2.3 模板标注 ................................................................................................ 3

1.3

1.4

1.5

2

3

4 读者对象........................................................................................................ 3 术语解释........................................................................................................ 3 参考资料........................................................................................................ 3 应遵循的设计规范 .................................................................................................. 4 界面关系图或工作流图 .......................................................................................... 5 界面设计 .................................................................................................................. 5

4.1

4.2 主界面设计.................................................................................................... 6 子界面设计.................................................................................................... 6 5

6 美学设计 ............................................................................... 错误！未定义书签。 界面资源设计 ....................................................................... 错误！未定义书签。

6.1

6.2

6.3 图标资源..................................................................... 错误！未定义书签。 图像资源..................................................................... 错误！未定义书签。 界面组件..................................................................... 错误！未定义书签。 7

其他 .......................................................................................................................... 6

1

江西IT人才实训基地

1 引言

1.1 编写目的

确定用户界面的整体风格，初步设计软件的框架结构，为项目的详细设计、实现、维护提供依据。

1.2 编写约定

界面设计的原则：定位于小学生的交友平台，遵循人机界面设计规范，最求软件界面的人性化，重点强调界面的个性化。让用户可以轻松地使用软件的各项功能。

1.2.1 目录规则

一级标题字体为小三+黑体+加粗，编号从1开始

二级标题字体为四号+黑体+加粗，编号如1.1开始,1为上级编号

三级标题字体为小四+黑体+加粗，编号如1.1.1开始1.1为上两级编码组合；

四级标题字体为五号+黑体+加粗，编号如1.1.1.1开始,1.1.1为上级编号

五级标题字体为五号+黑体+加粗，编号如1），重新开始编号；

六级标题字体为五号+黑体+加粗，编号如（1），重新开始编号；

七级标题字体为五号+黑体+加粗，编号如a.，重新开始编号；

标题的字体依次类推，最小字体不得小于五号，都为黑体+加粗；

1.2.2 正文内容

正文内容都为五号+宋体（首行缩进两个字符），段间距为1.5倍行距；项目符号可以自行定义。 图片下方应出现图例“图 *-*-*”，图片需要调整大小，以适合某章节中图片不跳页而使得上一页有大量空白。并且每章最后插入一个分页符，使得各章节之间互不干扰。

表的标注在表上方居中显示“表*-*-*”;表格内的字体统一为小五号+宋体。

表格内的字体统一为五号+宋体。

江西IT人才实训基地

1.2.3 模板标注

? 采用斜体标注的是提示部分，供填写时参考，此部分内容需要删除。

? 采用兰色字体标注的是示例部分，供填写时参考，此部分内容需要删除。

1.3 读者对象

用户、项目设计人员、项目开发人员、项目测试人员、项目测评人员。

1.4 术语解释

提示：本小节应提供正确理解此软件构架文档所需的全部术语的定义、首字母缩写词和缩略语。 这些信息可以通过引用项目词汇表来提供

1.5 参考资料

《用户界面的设计、实现和评价》徐锡山等，国防科技大学

2 系统需求

采用分层思想对前台三大子模块做形象化的设计。

3 界面需求

根据客户提出的需求知道：因为对象是小学生，应此采用一些比较清新的颜色为底色，整个界面易

江西IT人才实训基地

于操作等。

4 总体设计思路

4.1 设计原则

提示：描述界面总体设计遵循的原则是什么？为什么？

4.2 布局设计

提示：

（1）确定网站的整体风格：由于我们设计的是小学生的交友平台，所以采用新颖的视觉风格。 （2）网页色彩的搭配：蓝色为主调、白色，蓝标题。

4.3 界面视觉设计

提示：

（1）本网站采用头部、底部中间有左中右布局风格，按钮橙色、图标可爱、图像类卡通、界面组件和谐。

（2）小孩子都希望看到的是灵动的画面，就好比喜欢看卡通片，比较吸引他们这个群体。

4.4 交互设计

4.4.1 设计思路

本网站还是考虑针对小学生的平台易操作性，吸引眼球来达到一个清新的界面设计思想。

4.4.2 实现思路

用Flash进行美工设计，网页配色，制作CI、LOGO.Banner等网页制作。

5 应遵循的设计规范

（1）采用模板规范设计，采用相同部分的模板，再在这个基础上拓展网页的设计。 （2）这个好错就是统一设计界面、易于小学生的理解和操作。

江西IT人才实训基地

5.1 布局规范

全局考虑，把能填上的都填上，占位置。然后定基调，分模块设计。最后调整不满意的几个布局细节。

5.2 色彩规范

蓝色为主基调白色为衬托，配以褐色按钮蓝色标题等布局。

5.3 字体使用规范

白纸黑字是永远的主题但考虑到是对小学生群体，字就要有时大、有时可爱。

5.4 交互方式一致性规范

统一采用连接到外部链接界面，按钮显现在本页面。

5.5 按钮操作规范？？

按钮采用褐色为底色，点击跳到外部界面。

5.6 其他规范

同一类型的大按钮采用显示在同一个页面动态面板。

6 界面关系图或工作流图

提示：

（1）给所有界面视图分配唯一的标识符。

（2）绘制各个界面之间的关系图和工作流程图。

7 界面设计成果

提示：可以总体概括性说明文字;

江西IT人才实训基地

7.1 主界面

提示：

（1）绘制主界面的视图；

（2）说明主界面中所有对象的功能和操作方式；

7.2 子界面

提示：

（1）绘制子界面的视图；

（2）说明子界面中所有对象的功能和操作方式；

8 其他

提示：描述其他需申明事项。

9 界面设计总结

9.1 设计经验分享

提示： 你认为本次界面设计做得比较好的方面有哪些？比如交互方面、执行协调方面等等

9.2 设计缺陷、产生原因

提示： 你认为本次界面设计还存在哪些方面的缺陷、产生原因是什么？

9.3 改进建议

提示：请阐述针对以上提出的设计缺陷可以从哪些方面进行改进？

第二篇：实验报告3 用户界面设计

《 C# 数据库技术应用与开发 》 实验报告（3）

实验名称：________________ 指导教师：___________ 完成日期：________________

专    业：________________ 班    级：___________ 姓    名：________________