一卡通系统UI设计说明.ppt

一卡通系统UI设计说明 一、系统说明 一卡通系统是我公司设计的针对校园或企业级，对于学生在学校中的考勤、消费，企业职工考勤等需求，设计而成的一套系统。 二、页面设计需求 根据我们现有的展示页面和功能页面，设计出一套界面风格统一、美观大方布局合理的页面来，包括大图标和小图标（树节点上带的）。 如果整体风格不带导航树的话，那么对应树节点上的每个页面的导航也都要有图标。 下面列出我们现有的页面。 1. 系统主页面 三、页面说明 2. 每个子系统的导航页面 三、页面说明 2. 每个子系统的导航页面 三、页面说明 3. 列表页面1 说明：带查询条件的列表页面 三、页面说明 4. 列表页面2 说明：左右结构，一边是Tab页，页面上有复选框组 三、页面说明 5. 列表页面3 说明：左右结构，左右都是列表 三、页面说明 6. 列表页面4 说明：左右结构，左侧是树结构，且右侧又是上下结构 三、页面说明 7. 列表页面5 说明：上下结构，上侧是列表，下侧是日历控件。 三、页面说明 8. 弹出窗口1 说明：查询条件中弹出小窗口 三、页面说明 9. 弹出窗口2 说明：列表页面单击按钮出现提示小窗口。 三、页面说明 10. 弹出窗口3 说明：列表页面单击【增加】按钮弹出增加功能大窗口。包含文本框、密码文本框、邮件文本框和电话文本框、单选按钮、下拉框和日历控件（做年月日/年月日 时分秒两种）。 三、页面说明 11. 增加窗口 说明：页面包含照片、文件上传、复选框。 三、页面说明 12. 组织树 说明：做成两种，如下图1：节点不带复选框，图2：节点带复选框。 三、页面说明 图1 图2 13. 功能页面 说明：这个页面也需要做个模版。 三、页面说明 14. 部门组织管理和增加组织 三、页面说明 15. 需要的图标 说明：树节点上的图标和按钮上的图标。 三、页面说明 15. 需要的图标 说明：树节点上的图标和按钮上的图标。 三、页面说明 16. 需要的图标 说明：按钮上的图标，按钮如果可以做出可用和不可用状态最好。 三、页面说明 这是4个按钮 16. 需要的图标 说明：按钮上的图标，按钮如果可以做出可用和不可用状态最好。 三、页面说明 （签离）