多功能输入法（4）

3.2 设计皮肤

 

3.2.1. 设计布局

  输入法的布局形式都是不拘一格，在设计当中可以根据功能的需求有针对性对输入法进行用户界面的设计。根据我们毕业设计所研究的输入法功能，我们针对我们组所开发的输入法功能主要设计的设定有中和英切换、半角和全角切换、中文和英文标点切换、软键盘，还有后台设置。

状态窗口的大小：宽为160像素，高为20像素。下面为初始化的简化图

图 3-2 为状态窗口的布局图

 

经过程序贴图显示出来的效果，如下图

图 3-2 为状态窗口的效果图

 

然而在Photoshop设计皮肤中，我们需要对窗口皮肤的设计进行一定的布局，规定好尺寸，颜色搭配，主题的选定等的事情如下图：

 

­­­­­­­­

图 3-1 状态窗口设计图

图 3-1 输入法横条设计图

图 3-1 输入法横条效果图

  

 

3.2.2 颜色搭配和主题

颜色的搭配是设计中一个重要环节，搭配的好不好将影响到用户的体现。设计者需要根据选取的主题进行颜色的搭配。因此，在设计之前我们需要了解  色彩分类，色彩三大基本要素，色彩的冷暖特性，以及色彩在主题上表现含义。在这些的基础上，有规划地指导我们去完成这项设计工作。                 

色彩分类：无彩色和有彩色系

色彩的三要素：包括明度，色相，纯度

色彩对比：明度对比，色相对比（包括临近色的对比，对比色对比，互补色），纯度对比

    在这次设计中，根据主题我们选取蓝色作为主要的色调。因为蓝色是色彩中比较沉静的颜色，象征着永恒与深邃、高远与博大、壮阔与浩渺，是令人心境畅快的颜色。蓝色色彩很容易让我们联想到海洋，有一句话是这样说，“海洋之所以宽广,是因为它容纳百川,吸取天地间点点滴滴”正因为这一点，更好体现出多功能输入法的优点所在。

 

下面为设计的图:

图 3-2 为状态窗口和输入窗口

 

  

3.2.3 位图导出和转换

    经过使用Photoshop设计的输入法皮肤后，我们需要从Photoshop中导出一种位图格式来为我们的窗口添加皮肤外观。也许第一次导出的时候，我们习惯的想法是导出一种24位的位图格式，然后尝试导入到程序当中。但不幸的是，C++并不支持24位位图资源导入，每次尝试导入去都会出现警告的事情。也许你会感觉到相当的郁闷，然后你尝试使用Windows自带的画图程序，将24位位图转换256色的位图，很快图片转换成功了。顺利的导入软件当中，同时软件再没有出现不能导入的警告，但不幸运的告诉你，你在Photoshop设计的皮肤外观颜色损失了，从24位的位图格式转换256色的位图格式，质量上严重损失。也许你再次感觉到郁闷，郁闷的事情仍要继续吗？我们的答案是“不”。解决的办法如下：

    当我们设计好输入法的外观后，我们存储为web的格式，导出256色的GIF格式，然后通过Windows自带的画画程序将其GIF的格式转换成256色的位图。这样就可以达到最少的色彩损失。这里可以归纳为一个简单的过程：

 

导出256色的GIF格式―-(转换)――>256色的bmp位图格式

图 3-2  格式转换图

3.3 设计菜单

3.3.1 设置菜单

    菜单是Windows程序用户界面的重要组成部分。在Windows程序中，菜单作为一种资源，能够方便用户调用系统上的功能。因为是系统资源的一部分，我们只要在Visual c++里面菜单里面选择插入（Insert）à资源（ resource）在弹出的对话框里面，选择Menu资源，这样就可以创建一个菜单(Menu)资源。

    根据这毕业设计所需要，设置菜单主要方便用户快速选择其功能。下图为菜单的大概设计图。

     

图 3-3 菜单设计图

 

主要菜单项有基本设置，更换皮肤选择，软键盘，帮助，关于输入法等。

基本设置：这个菜单项用于弹出后台设置的对话框。

更换皮肤：这个菜单项目用于提供用户喜好选择提供的皮肤变换。

软键盘：这个菜单项用于弹出软键盘设置。

帮助：这个菜单项用于提供用户一份帮助文档，让用户了解这个输入法相关的功能 ，安装，卸载，后台设置等等。

关于输入法法：这个菜单项目主要用于弹出一个对话框用于说明版本的用途。

 

 

3.4 设计配置对话框窗口

 

3.4.1 布局分析与设计

 现在流行的输入法都会有后台设置的支持，这些后台的支持大大增强的输入法程序整体上的功能，加快其使用效率，从而为每一个用户提供方便快捷的使用方式。在设计开始之前有必要对其进行一定的布局分析，那么我们需要做的第一件事情就是对输入法功能的进行需求分析。首先，我们不知道我们要为后台设置那些，漫无目的随便根据自己想到的就去做。其次，不了解这样的需求功能就不能更好提高输入法的功能，有的人问：我们需要更换皮肤，这算不算是输入法功能的一部分呢？答案是肯定的。因此，我们需要把这些功能记录下来，作为我们后台布局的一个指标，一种可以引导我们去实现用户功能的动力。在这次毕业设计中，布局的分析，根据下面的步骤进行。

1. 分析输入法用户需求
2. 进行用户需求分类
3. 针对需求选取合适的控件进行布局

完成完后，我们可以对其进行布局，主要分为常规的设置，热键的设置，外观的设置，词库的设置这四个主要的属性页。下面为其中的两个图。

 

图 3-4 后台设置图

这些布局都是根据输入法所需要的功能进行分类与设计。

根据模块的划分。下面表格主要是控件布局在不同的对话框中所使用的控件类型和控件变量。

3-4 常规设置

名称

选用控件              

控件变量

所在模块

中文

Radio Button

IDC_Chinese

IDD_SETUSUAL

英语

Radio Button

IDC_English

IDD_SETUSUAL

全角

Radio Button

IDC_Quanjiao

IDD_SETUSUAL

半角

Radio Button

IDC_Banjiao

IDD_SETUSUAL

中文标点

Radio Button

IDC_Chiesedot

IDD_SETUSUAL

英文标点

Radio Button

IDC_Englishdot

IDD_SETUSUAL

侯选字

Combo Box

IDC_CMB_PAGENUM

IDD_SETUSUAL

开启鼠标跟随

Check Box

IDC_IsMouseFollow

IDD_SETUSUAL

 

3-4 热键设置

名称

选用控件              

控件变量

所在模块

左SHIFT

Radio Button

IDC_LSHIFT

IDD_SETKEY

右SHIFT

Radio Button

IDC_RSHIFT

IDD_SETKEY

左Ctrl

Radio Button

IDC_LCTRL

IDD_SETKEY

右Ctrl

Radio Button

IDC_RCTRL

IDD_SETKEY

方向左右建

Check Box

IDC_LeftAndRight

IDD_SETKEY

左右中括号([])

Check Box

IDC_Zkuohao

IDD_SETKEY

逗号句号(,.)

Check Box

IDC_dot

IDD_SETKEY

减号等号(-,=)

Check Box

IDC_add

IDD_SETKEY

 

 

3-4 外观设置

名称

选用控件              

控件变量

所在模块

设置字体

Button

IDC_BTN_SETFONT

IDD_Setview

选择字体颜色

Button

IDC_BTN_CHOSECOLOR

IDD_Setview

选择颜色

Button

IDC_BTN_SETBGCOLOR

IDD_Setview

选择透明度

Slider

IDC_SLI_OPT

IDD_Setview

显示透明率

Static Text

IDC_EDT_OPT

IDD_Setview

使用皮肤

Check Box

IDC_CHK_SKIN

IDD_Setview

选择皮肤

Combo Box

IDC_COMBO4

IDD_Setview

显示图片

picture

IDC_STATIC

IDD_Setview

 

3-4 词库设置

名称

选用控件              

控件变量

所在模块

导入文本词库

Button

IDC_BUTTON1

IDD_SETCIKU

导出文本词库

Button

IDC_BUTTON2

IDD_SETCIKU

删除文本词库

Button

IDC_BUTTON3

IDD_SETCIKU