一个Web系统的界面设计和开发.2

原创 2004年06月01日 10:30:00
[注:本文文字及图片均为作者原创,保留一切权力,转载请注明作者姓名和出处,谢谢。] 

4.主界面设计

设计主界面,确定系统基本风格,是概要设计中的工作之一。首页主界面的主要实现功能是导航,它要达到的目的,是尽可能使用户仅通过首页面板就可以完成所有常规任务。

CSDN_Dev_Image_2004-5-312155181.gif


该主界面包含以下部分


用户信息区域 显示当前用户信息

CSDN_Dev_Image_2004-5-312155183.gif


用户导航区域 用户页面导航,收藏功能可以将当前功能页面收藏到快捷功能面板

CSDN_Dev_Image_2004-5-312155185.gif


用户导航功能树 用户页面导航,收藏功能可以将当前功能页面收藏到快捷功能面板

CSDN_Dev_Image_2004-5-312155187.gif


功能树隐藏 可水平扩展页面空间

CSDN_Dev_Image_2004-5-312155189.gif   CSDN_Dev_Image_2004-5-3121551811.gif


桌面面板用户帮助导航 用户登录时可根据用户类型,自动加载相关使用帮助或导航。

CSDN_Dev_Image_2004-5-3121551813.gif


主任务通知区域 通知用户系统业务流程中的待办事宜;通知用户办公系统相关信息。

CSDN_Dev_Image_2004-5-3121551815.gif


用户快捷面板 为了能方便快捷的访问系统功能,避免每次访问树形菜单较深级次的繁琐操作,用户可将通过导航栏中的收藏按钮,将当前页面收藏到该面板中;该面板出现在所有业务页面,用户可以随时访问自己定义的功能页面。该导航在首页以面板形式出现,在其他页面以下拉菜单形式出现。

CSDN_Dev_Image_2004-5-3121551817.gif


用户自定义功能区域 用户可将相关查询搜索等功能定义到首页面板,例如:最新完成报告察看、报告搜索、检验流程察看等等

CSDN_Dev_Image_2004-5-3121551819.gif


5.典型界面

以下是系统中几个比较典型的界面模型。

CSDN_Dev_Image_2004-5-3121551821.gif

CSDN_Dev_Image_2004-5-3121551823.gif

CSDN_Dev_Image_2004-5-3121551825.gif

CSDN_Dev_Image_2004-5-3121551827.gif

在整个系统界面的设计过程中,需要注意整个系统的统一,设计风格要一致,界面中的交互元素,从色彩、样式到排版方式、具体位置都要具备延续性,这样才能使没Ь】煜肮哒鱿低巢僮鳌?lt;BR>

6.典型交互模式

界面交互中,根据功能不同,有不同的交互方式。应该尽量提取抽象,尽可能减少交互模式的种类,或者把交互方式尽可能设计的类似,以方便用户快速熟悉系统。

下面列举3个系统中比较典型的交互模式,供大家参考。


单项选择

CSDN_Dev_Image_2004-5-3121551829.gif


多项选择

CSDN_Dev_Image_2004-5-3121551831.gif


项目纸猓℅IF动画 4桢)

CSDN_Dev_Image_2004-5-3121551833.gif


7.Demo开发

Demo是详细设计阶段的重要成果之一,在对系统进行详细的分析设计之后,开发出界面Demo原型,主要作用是提供给合作客户,在基本功能、系统组成和易用性上进行测试。

本系统的Demo主要包括界面的设计制作,和部分客户端表现层脚本的开发。为了在后面的实际业务开发中尽可能获得重用,Demo的制作在页面规范、CSS样式定义和JS脚本编写方面都严格遵循了系统开发规范,并在以后的代码编写工作中严格执行。

本系统整个Demo包括大约50个页面,耗时月3周。

在后续的开发过程中,仍然要严格控制整个开发过程,保证整个系统界面的统一,并随时维护更新系统界面的设计。


8.结语

文章太长了……需要对以前很多东西进行回顾,实在很困难。很多细节,包括很多设计、技术上的东西,都已经记忆不清了,文章也显得有些紊乱。

因此,如果大家有什么疑问,或有意见、指正,请提出或来信与我交流。

 

干货!我开发 Android 是如何界面设计的

随着 Android 5.0 的面世,Google 也带来了全新的设计规范 Material Design 。第一次看到 Material Design 的应用,简直是太好看了,有没有!下面呢,我将主...
  • JerryWu145
  • JerryWu145
  • 2016年10月23日 12:09
  • 1142

基于Web的通用BBS系统的建立与维护

目  录     一、前言... 2 二、系统定义... 3 2.1 系统分析... 3 2.1.1 Internet以及Web技术的发展... 3 2.1.2 基于Web的通用...
  • u014316433
  • u014316433
  • 2014年05月23日 13:44
  • 2560

自己第一次做手机web页面的一些总结

开发的第一个手机web应用的一些经验
  • ylg01
  • ylg01
  • 2017年05月22日 17:50
  • 984

19个免费的UI界面设计工具及资源

列表如下: DHTMLX DHTMLX 是一个JavaScript库,可跨浏览器、基于Ajax的用户界面。通过一组UI Widgets(小工具)可以快速开发令人印象深刻的web应用。 Liv...
  • zang141588761
  • zang141588761
  • 2016年02月26日 09:47
  • 3637

luci界面实现web端和移动端的不同风格

luci的web端和移动端识别
  • linux_crazyman
  • linux_crazyman
  • 2015年03月31日 09:09
  • 375

大型web系统中缓存的使用

对于一个规模很大的web系统,如PV在一亿以上,缓存就是一个不可或缺的重要组成部分,它可以挡掉大部分的用户访问的冲击,如果没有它,系统很可能将迅速不可用直至崩溃。 但是缓存带来了另外一些棘手的问...
  • sd4015700
  • sd4015700
  • 2015年08月13日 14:28
  • 859

B/S系统界面设计与开发详解

早在中国IT业方兴未艾之时,计算机应用系统主要以功能实现为主,几乎没有界面设计这个概念。时至今日,随着计算机和网络的不断普及,社会信息化程度日益加深,用户和市场的不断成熟,人们已经不仅仅满足于“够用”...
  • Eleven204
  • Eleven204
  • 2013年08月24日 12:53
  • 3934

web界面设计的原则和总结

web设计原则和推理:意符(Signifiers) :一种额外的提示,告诉用户可以采取什么行为,以及应该怎么操作;必须是可感知(eg:视觉、听觉、触觉等)。——摘自《设计心理学 1 》 可供性(Aff...
  • yanchuan1990
  • yanchuan1990
  • 2017年02月22日 15:56
  • 551

Web开发过程流程图

最近公司在进行一系列新模块的开发,在痛苦开发的过程中,大家不时在一起进行总结等思维体操活动。上周六中午加班,几位同事一起聊了聊最近协同开发的感受,我从中受益匪浅。 首先提到过于民主化的开发模式导致了...
  • hello_simon
  • hello_simon
  • 2014年02月26日 18:18
  • 2110

c# 登录界面设计与框架基础搭建雏形--(学生管理系统)

基础框架搭建 (俩层开发)创建Windows桌面应用程序—’学生管理系统’添加实体类库Models 右键添加-新建项目-类库添加数据访问类DAL基础框架目录:要习惯性修改主窗体的命名,一般用FrmM...
  • qq_36482772
  • qq_36482772
  • 2017年05月24日 03:32
  • 1914
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一个Web系统的界面设计和开发.2
举报原因:
原因补充:

(最多只允许输入30个字)