界面设计模板-如何做界面UI设计的展示图

界面是人与信息沟通的渠道,界面设计的目的是使这个渠道简洁明了,使人能随意地进行操作,并在这个过程中得到有效的帮助。而网页界面设计的目的则是为了使网页中的内容得到更好的体现,更加突出界面设计的主题性。尽管网站的页面设计根据不同的系统功能要求,会体现出一定的个性化设计,但也要遵循一致性原则,即使网站整体保持色调、组件等元素的一致性(张帆等,2005;古大诒等,2000;刘永瞻,2002;吴瑜,2004)。由于系统涉及的页面众多,文中仅选取若干代表性的页面进行设计说明,主要包括总体界面设计、国家风险界面设计、运输风险界面设计与系统管理界面设计。

5.2.4.1总体界面设计

该原型系统总体界面设计参考了Web界面设计的一系列基本原则,采用Sharepoint对整个系统界面进行合理的部署。主体界面主要包括:A区域为系统主题LOGO;B区域为功能导航栏;C区域为功能细分区;D区域为功能展示区;E区域为版权信息说明(图5.20)。

图5.20系统总体界面

5.2.4.2国家风险界面设计

国家风险展示界面的设计宗旨是:①全面准确、清晰地在GIS地图上显示世界各个区域或者国家的风险;②清晰、明确地显示与我国在油气和固体矿产资源进出口方面有密切往来国家的地理、历史、民族宗教等基本信息,特别是油气输出敏感地区、国家的政治、经济、地缘等风险信息,为用户是否选择其作为石油进口来源提供科学依据。

国家风险界面由两部分组成。第一部分通过GIS调用世界地图,在世界地图上根据每个国家或者区域的风险大小,用不同的颜色来为每个国家或者区域着色,主要是采用了红色和黄色两种色系来表示风险。

第二部分为每个国家的信息展示,主要包括与我国在油气和固体矿产资源进出口方面有密切往来的20几个国家。第一部分页面设计与主界面保持一致,第二部分重点介绍国家信息展示页面,如图5.21所示。风险信息的国家风险界面色系选择了与整个系统相一致的蓝色系,色彩清爽、干净,给人以清新愉快的感觉。界面布局以块状分布为主,在有限的区域内井井有条地展示大量、丰富的信息。整个界面链接的逻辑思路清晰,用户可从任何页面方便地返回首页,或者在各功能模块间切换。

图5.21国家风险界面——国家信息页面

此页面设计,为用户提供了最重要的油气信息,将页面中心分为3个区域,区域C是地图展示区,在最醒目的区域E将以文字结合图标的形式展示该国家的地理位置、油气资源概况和数据来源说明;页面的左下部(区域D)被设计为列表菜单,用户可以根据自己不同需要选择、查看相关信息;页面最下方的区域F是版权信息展示位置。

国家风险界面在设计过程中严格贯彻了简洁、美观的设计思路和以用户为中心的设计理念,较好地实现了美观与实用的结合,达到设计初期制定的目标。

5.2.4.3运输风险界面设计

我国在进口油气过程中有80%是靠水路运输完成的。在海外油气运输过程中,必然涉及航线风险事故率、港口吞吐能力、海盗袭击等因素的影响,因此在本系统中重点对运输风险这一模块进行了详细的设计与开发。该界面设计,首先是以功能性为第一指导原则,以技术因素为主要考虑对象,以完成或实现必要的功能为目标。在整体界面风格上同主界面以及国家风险等其他几个子模块风险采取同一色系和界面框架设置。这样,一方面可以使得大家能够快速通过该系统界面挖掘有用信息;另一方面可以使得整体界面搭配合理、美观。

运输风险界面设计的思路主要是:首先,通过MapInfo软件并运用GIS技术将运输风险各底层指标数据进行可视化处理和展现,包括港口风险、航线风险、承运风险、海盗袭击4个主要模块。通过可视化处理后,针对具体港口等详细信息进行单独页面展示;最后运用Flash技术对港口、航线、承运、海盗袭击进行动画展示。

进入运输风险界面后,点击其中某一子菜单风险查询,即可得到如图5.22所示的GIS风险专题图界面。以航线风险为例,在右侧主框架下,利用MapInfo和MapXtreme软件对所有航线进行绘制,通过GIS技术实现航线的风险展示,主要分为以下4个版块:在C区域内,采用树形菜单,使得客户可以直接选择所需版块;在D区域内,参考部分专业地理信息系统软件,建立拖动条调整专题图界面的大小,对整个界面显示实现了有效补充;在E区域内,主要通过航线的颜色展示该航线的风险程度,航线的粗细表示该航线的承运能力,将后台数据可视化展示,客户可以根据图示直观地看出各个航线的相关风险信息,方便决策者依据信息作出决策;在F区域内,利用频谱技术将航线的风险值由高到低通过图例显示,以方便客户一目了然地看出每个航线的风险值高低;在右下方的G区域内,为了对GIS专题图进行详细了解,运用GIS软件设置了相关辅助按钮,包括放大、缩小、拖移等,以求实现更智能化操作。另外,在选择国家底层风险值以及航线的风险值时,考虑整体界面风格的搭配,选取合适的色系,使得界面显得柔和、美观。

图5.22运输风险中的航线风险GIS图

5.2.4.4系统管理界面设计

系统管理模块在进行页面设计时很好地体现了总体设计原则,系统管理在保持整体蓝色调、系统默认字体,以及分栏框架结构设计,系统管理内部的各个子页面之间也体现了系统风格以及交互行为的一致性。

国外油气与固体矿产资源开发管理系统的系统管理模块,主要面向后台的系统管理员用户,所以对于用户的系统知识有着一定要求,比如后期的网站操作维护、数据库更新等,都要求系统管理员能够进行良好的网站维护操作(吴坤,2005)。因此,界面在设计过程中更具有专业面向性。针对系统管理模块的典型页面(国家数据管理页面)进行具体介绍,如图5.23所示。

图5.23国家数据-资源概况

国家数据页面中,系统管理的基础数据管理页面设计,主要采用了基于模板技术的动态网页设计,即利用模板页技术以及AJAX技术,使得子页面能够继承模板页的主体界面。采用这一关键技术的优点是:当要对网页的主体界面进行修改时,只要对模板页进行变动即可,大大地简化了网页的维护工作。

主体页面分3大功能区域:A区域是功能选择区,包括两处链接入口;B区域是事件触发区,控制C区域内容展示;C区域是对象信息展示区。其他区域如系统LOGO、导航栏、版权信息等,与主界面设计保持一致。这样的布局,以最适合操作、浏览的方式将文字放在页面的不同位置,也体现了页面触发的逻辑流程。