在NGNc开发者网络的支持下,NGNc运行环境下的第1个准商业版的应用软件今日发布。
该软件暂定名“算算算”,是一个多算式计算器,最多可以同时计算9个算式。用法简单,易上手。用户UI设计瞄准“无帮助UI”,用户可以在无任何提示的情况下即可自如使用大部分该软件的功能。在简单提示即可快速掌握全部应用功能。
本软件细心为用户着想,实现“完成一个算式的操作,按键次数最少”承诺!
这里是截图:
同时发布:
1、UI设计手册:http://www.ngnc.net/NGNcalc2x/Calc2s_4win_v1.00.zip
2、体验版:http://www.ngnc.net/NGNcalc2x/Calc2s_4S60_v1.00.zip
下面是UI设计手册全文:
————————————————————
.-----------------------------------------.
| 建议使用: Notepad记事本工具浏览编辑本文件 |
| 建议字体: Lucida Console, 规则, 五号字 |
| 建议设置: 自动换行 |
*-----------------------------------------*
.~~~~~~~~~~~~~~~~~~~~~~~~~~~.
! “算算算”用户界面设计手册 !
!----------------------------!
! Calc2s UI design Guide !
`~~~~~~~~~~~~~~~~~~~~~~~~~~~`
一、使用Windows模拟版
(本Zip包下载自: http://www.ngnc.net/NGNcalc2x/Calc2s_4win_v1.00.zip)
(本软件的手机版/S60版本: http://www.ngnc.net/NGNcalc2x/Calc2s_4S60_v1.00.zip)
1、运行环境:Window9x/2k/XP等MicroSoft桌面视窗操作系统
2、双击Demo.bat运行:
a, 屏幕左上角出现主界面,
b, 屏幕中间的对话框选择“确认”则终止运行
c, Dos窗口显示 "已经完成..." 不用理会,关闭之
3、使用方法:参看《使用手册》
本软件的UI设计目标是:无手册软件,希望达到没有任何指导,用户既可轻松上手。
当然,特殊功能,还是需要Help提示,引导用户挖掘/体会本软件的“用心良苦”。
二、编译脚本:本软件采用引擎和脚本分离的方式开发,脚本是纯C语言。
1、双击NGNc.exe执行编译:
a, 首次运行会产生下面2个临时文件,可以手工删除之。
log.log
NGNdebug.log
b, 编译结果:
./scripts/Calc2.obj
c, 检查编译错误:
检查此文件的修改时间为当前时间,则说明编译完成
打开log.log文件,并搜索文件内容无"error"字符串,说明!!!编译成功!!!
2、修改脚本:(全部脚本位置:./scripts/*.c/.h/.cls)
本软件以开源方式发布,如果您拥有c语言编程能力,可以通过阅读脚本,并修改/增加软件功能
如果您只是为了设计UI界面,只需要修改与UI有关的数据即可。
三、与UI有关的脚本部分:
1、所有图片都保存为Windows 256色 Bitmap,Alpha信息单独保存在灰度Bmp
a, bk256.bmp: 主背景(无Alpha信息), 176*208为标准Nokia的S60手机的屏幕尺寸
b, fnt256.bmp: 所有按扭/字体/算式标签都保存其中,有游戏美工经验的朋友一看便知如何修改
fnt256_a.bmp: fnt256.bmp的Alpha信息,用于通透显示,或半透明融合的控制
c, hlp256.bmp: 滚动显示的本软件的帮助信息,分左右两半,是将1张长图截断并列安排
hlp256_a.bmp: Alpha信息。
[*]:这就是UI设计的主要内容,
如果只是为了换换图和颜色,只要按照原图的元素位置替换,不需要修改脚本。
修改脚本,可以让UI变的更Cool,按扭位置/尺寸,字体风格都任您的想象发挥。
2、与UI元素位置/尺寸有关的脚本内容:(主要是Fnt256.bmp的介绍)
a, 按扭的位置信息:
./scripts/KeyBTool.c, ln142~ln185,描述了位置
(建议使用Ultra-Edit32编辑器,红色的数字就是位置信息)
分别是:主界面bk256.bmp的位置(x,y,w,h),
fnt256.bmp上的位置(x,y,w,h),
位图帖到主界面的偏移(offx,offy),
四个方向的关联按扭(左,上,右,下)
说明:bk256.bmp上的位置是为了检测鼠标移动和点击的区域信息
offx,offy是在源位图和目的区域不同的情况下的位置补偿
方向关联按扭是描述,输入焦点随方向键移动的逻辑。在按扭位置变化时需要调整
b, 算式标签:
本软件支持多算式,标签有两个类型:当前标签(大),其他标签(小)
这两个标签都采用50%的通透处理,标签上的数字1~9是本软件最多同时支持9个算式的计算
./scripts/CalcGfx.c, ln232~ln267
分别描述了标签小字体9个,和2个标签的位图位置:(x,y,w,h)
c,字体:
标签字体为小字体
算式字体为大字体,算式的分割线也是用字符堆砌的
./scripts/CalcGfx.c, ln131~ln173
描述了字符的位置信息:(字符,x,y,w,h)
其中:bw是指:位图的宽度,与w不同的是,w指字符的行间距
bw就是拿'_'字符来表示算式分割线的。
./scripts/CalcGfx.c, ln424
字符串"________________"中字符数和算式分割线长度有关
3、与UI显示逻辑有关的脚本内容:(此部分限有c语言编程经验的朋友阅读)
a, 显示函数:
void CalcPaint( void ) ./scripts/CalcGfx.c, ln117
显示循环:任何界面的变化都需要执行该函数,目前没有优化显示逻辑。
void CopyBmp2PaintBuffer( ./scripts/CalcGfx.c, ln77
位图拷贝:重要的3个绘图函数之1,不使用Alpha,直接矩形区域的源到的拷贝。
void AlphaBmp2PaintBuffer( ./scripts/CalcGfx.c, ln96
Alpha位图拷贝:重要的3个绘图函数之1,矩形区域的源到的拷贝(带Alpha信息)。
目前使用Fnt256.bmp的信息
void HelpBmp2PaintBuffer( ./scripts/CalcGfx.c, ln105
使用hlp256.bmp的Alpha位图拷贝。
b, 静态位图变量:本软件的脚本不支持动态内存分配,所有位图保存在全局静态数组内
3张位图的静态数组声明: ./scripts/CalcGfx.h, ln56~ln73
3张位图载入内存: ./scripts/Calc2.c, ln60~ln90
2个重要的载入函数: ./scripts/CalcGfx.h,
bitmapfilesize, (ln20), 检测位图尺寸(只支持256色),并读入
alphabmpfsize, (ln28), 检测位图尺寸包括Alpha位图一起(只支持256色),并读入
Alpha信息保存在位图信息后,参考位图静态数组声明
c, Help信息显示逻辑:
本软件在Windows/S60平台都提供统一的TickCount功能,时钟周期准确,以毫秒计算。
int TimerHook( uint tick ) ./scripts/Timer.c, ln114
Timer的处理函数,如果想要屏蔽,只需要在该函数开头增加"return 0;"即可
d, 更多想法,请与我们联系。
.-----------------------------------.
| Author: Dejun Yuan |
| Mail: yuandj@ngnc.net |
| MSN: yuandj1972@hotmail.com |
| Blog: http://blog.csdn.net/yuandj |
| Websit: http://www.ngnc.net |
| -- 2005/1/18 |
*-----------------------------------*