
3.7 如何浏览及使用界面素材资源
“界面中心”提供了应用类及网页类程序的上万张界面设计素材,从图标、按钮到主界面、登录界面等各种程序界面,从实例到项目,几乎囊括了程序开发所需要的各种界面,以及色彩知识、配色要点及技巧的运用。效果如图3.48所示。

图3.48 “界面中心”界面运行效果
“界面中心”提供了界面设计方案库、界面设计项目库、按钮参考例库、图标参考例库和颜色参考例库5部分内容。其中包括2982张界面设计方案、313张图标和按钮、283套项目界面套餐,以及852种颜色参考样例等主要开发素材。界面中心结构如图3.49所示。

图3.49 “界面中心”内容结构
3.7.1 “界面中心”素材预览效果
“界面中心”部分素材的预览效果如图3.50~图3.60所示。

图3.50 程序主界面预览图

图3.51 查询界面预览图

图3.52 启动、登录界面预览

图3.53 管理界面预览图

图3.54 系统管理与维护界面预览图

图3.55 报表统计界面预览图

图3.56 数据录入界面预览图

图3.57 数据浏览界面预览图

图3.58 网页界面预览图

图3.59 财政局触摸屏查询系统程序预览图

图3.60 图标与按钮预览图
3.7.2 了解“界面中心”素材内容
● 界面设计方案库
“界面设计方案”主要包括主界面、启动登录界面、数据录入界面、数据浏览界面等8大类别,提供了2982张独特风格的界面素材,通过参考“界面设计方案库”可以使用户掌握基本界面设计方案、培养更专业的界面设计理念。“界面设计方案”基本结构如图3.61所示。

图3.61 “界面设计方案”内容结构
● 界面设计项目库
“界面设计项目库”主要分为Web项目整站界面和应用程序所有窗体界面两大部分。为开发者提供了283多套桌面应用程序及Web项目的完整界面套餐,为设计和开发人员提供了完备的界面设计解决方案。
“界面设计项目库”内容结构如图3.62所示。

图3.62 “界面设计项目库”内容结构
● 图标与按钮库
“图标与按钮库”主要分程序员按钮和程序员图标两部分,为开发者提供313种图标和按钮素材,覆盖面广、内容丰富,为设计和开发提供了最为优秀的参考方案。
“图标与按钮库”的基本内容如图3.63所示。

图3.63 “图标与按钮库”的内容结构
● 颜色参考例库
“颜色参考例库”主要分界面设计颜色例库和界面设计颜色整合图两部分,提供了852种颜色值及颜色代码简集。为设计和开发者提供了最优良的配色参考,基本内容如图3.64所示。

图3.64 “颜色参考例库”的内容结构
3.7.3 通过目录导航浏览图片
浏览“界面中心”的图片时,可单张浏览不同类别的图片,还可以通过缩略图的方式进行浏览图片。
操作流程如图3.65所示。

图3.65 浏览图片操作流程
例如:通过目录导航浏览“启动登录界面”中的图片。
首先展开左侧导航栏中的“界面设计方案库”节点,单击“启动登录界面”展开按钮,即可浏览“启动登录界面”中的目录导航内容。单击左侧导航列表中的界面名称,即可在右侧主窗口中显示该界面的图片信息,如图3.66所示。

图3.66 大图方式显示图片素材
提示
单击目录显示区中的“自动执行”按钮,程序将自动逐张显示该界面类别中的所有图片。
如果选择界面类别名称“主界面”,然后单击导航区上方的“缩略图显示”按钮,右侧主窗体中将会以缩略图的形式显示“主界面”的所有的界面,如图3.67所示。

图3.67 缩略图方式浏览图片素材
如果用户想要使用“界面中心”中的图片素材,可以在图片上单击鼠标右键,在弹出的快捷菜单中选择“图片另存为”命令,将图片保存到本地计算机上进行使用,如图3.68所示。

图3.68 保存图片素材
注意
单击缩略图中的某一图片,图片将最大化显示。