如何设计ui菜单(解读ui菜单设计的攻略)

懵懂先生 投稿文章如何设计ui菜单(解读ui菜单设计的攻略)已关闭评论66阅读模式

文章源自略懂百科-http://wswcn.cn/82515.html

小伙伴们欢迎关注本专栏,上一节我们用文具店老板小明介绍了什么是进销存系统以及制作一个进销存需要有哪些最基本的功能。文章源自略懂百科-http://wswcn.cn/82515.html

复习阶段

我们先简单复习下:文章源自略懂百科-http://wswcn.cn/82515.html

进销存:

又称为购销链,是指企业管理过程中采购(进)—>入库(存)—>销售(销)的动态管理过程。文章源自略懂百科-http://wswcn.cn/82515.html

功能列表:

一、 返回首页

二、 出入库

2.1 入库单管理文章源自略懂百科-http://wswcn.cn/82515.html

2.1.1 新增文章源自略懂百科-http://wswcn.cn/82515.html

2.1.2 修改文章源自略懂百科-http://wswcn.cn/82515.html

2.1.3 删除文章源自略懂百科-http://wswcn.cn/82515.html

2.2 出库单管理文章源自略懂百科-http://wswcn.cn/82515.html

2.2.1 新增文章源自略懂百科-http://wswcn.cn/82515.html

2.2.2 修改文章源自略懂百科-http://wswcn.cn/82515.html

2.2.3 删除文章源自略懂百科-http://wswcn.cn/82515.html

2.3 库存管理文章源自略懂百科-http://wswcn.cn/82515.html

三、统计分析

3.1 入库明细文章源自略懂百科-http://wswcn.cn/82515.html

3.2 出库明细文章源自略懂百科-http://wswcn.cn/82515.html

3.3 出入明细文章源自略懂百科-http://wswcn.cn/82515.html

四、资料维护

4.1 我的店铺文章源自略懂百科-http://wswcn.cn/82515.html

4.2 店铺商品文章源自略懂百科-http://wswcn.cn/82515.html

4.3 供应商文章源自略懂百科-http://wswcn.cn/82515.html

4.4 客户文章源自略懂百科-http://wswcn.cn/82515.html

4.5 入库渠道文章源自略懂百科-http://wswcn.cn/82515.html

4.6 支付方式文章源自略懂百科-http://wswcn.cn/82515.html

那我们今天的课程学习什么呢?

今天给大家介绍制作进销存系统中非常重要的一个环节:功能菜单定制。上面的功能列表你记住了几个呢?以下动态图,就是我们需要定制的菜单界面。文章源自略懂百科-http://wswcn.cn/82515.html

菜单定制效果文章源自略懂百科-http://wswcn.cn/82515.html

准备阶段

准备阶段一:菜单图标

如果会P图的同学可以画自己喜欢的图标,不想P图的也可以到iconfont.cn上去下载。建议大家使用PNG格式的图片,尺寸16×16或32×32。文章源自略懂百科-http://wswcn.cn/82515.html

图标下载网站文章源自略懂百科-http://wswcn.cn/82515.html

本次的案例图标文章源自略懂百科-http://wswcn.cn/82515.html

准备阶段二:安装Office CustomUI Editor

古人云:工欲善其事、必先利其器。Office CustomUI Editor就是我们定制Excel功能菜单必不可少的工具。安装完成后是长这个样子的。文章源自略懂百科-http://wswcn.cn/82515.html

菜单定制工具文章源自略懂百科-http://wswcn.cn/82515.html

打开它是长这个样子的,工具的下载地址会在文章结尾处提供,官方出品的,请放行安装。文章源自略懂百科-http://wswcn.cn/82515.html

定制工具使用界面文章源自略懂百科-http://wswcn.cn/82515.html

准备阶段三:新建一个启用宏的工作簿。

首先新建一个空白的Excel文件,然后另存为启用宏的工作簿,名字命名成<小明的店铺进销存系统> ,当然你也可以按自己喜欢的名称命名,保存并关闭(一定要先关闭哦)。文章源自略懂百科-http://wswcn.cn/82515.html

Ps:您的电脑需要安装OFFICE 2007及以上版本才能配合完成本篇教程案例实践。文章源自略懂百科-http://wswcn.cn/82515.html

另存为启用宏的工作簿文章源自略懂百科-http://wswcn.cn/82515.html

准备好的文件文章源自略懂百科-http://wswcn.cn/82515.html

如果小伙伴们顺利完成这三个准备工作,那么,恭喜你,你离成功已经很近了,接下来咱们即将进入本节最核心部分:功能菜单定制。文章源自略懂百科-http://wswcn.cn/82515.html

制作阶段

本次咱们做的功能菜单定制也叫Custom UI定制。文章源自略懂百科-http://wswcn.cn/82515.html

请记住三个名词:功能区选项卡功能菜单文章源自略懂百科-http://wswcn.cn/82515.html

Excel常规界面文章源自略懂百科-http://wswcn.cn/82515.html

还有他们之间的包含关系:功能区里面有多个选项卡、选项卡里面有多个功能菜单。文章源自略懂百科-http://wswcn.cn/82515.html

接下来咱们用Custom UI Editor For Microsoft Office来定制一个新的选项卡和功能菜单来熟悉下它的使用方法。文章源自略懂百科-http://wswcn.cn/82515.html

第一步:按图123打开我们前面准备好的工作簿。文章源自略懂百科-http://wswcn.cn/82515.html

用工具打开我们准备的Excel文件文章源自略懂百科-http://wswcn.cn/82515.html

工具界面区域区分文章源自略懂百科-http://wswcn.cn/82515.html

第二步:点击Insert 插入一个Office 2007 Custom UI Part文章源自略懂百科-http://wswcn.cn/82515.html

为啥不选第一个2010的?因为Office有很多迭代版本2003~2017版本等,高版本一般都会兼容低版本,比如2007版本的Office可以打开2003版本的,但是2003版本的打不开2007版本的Office文件。同样的道理,如果我们选择插入第一个2010的话,就会导致在安装2007版本的电脑上无法生效。文章源自略懂百科-http://wswcn.cn/82515.html

插入一个UI Part文章源自略懂百科-http://wswcn.cn/82515.html

第三步:按图1234插入一个Custom Tab(选项卡)文章源自略懂百科-http://wswcn.cn/82515.html

插入一个选项卡文章源自略懂百科-http://wswcn.cn/82515.html

第四步:点击如下图标进行格式规范校验。文章源自略懂百科-http://wswcn.cn/82515.html

如果出现如下提示请按提示修改对应的内容,如下修改2006/01文章源自略懂百科-http://wswcn.cn/82515.html

错误提示文章源自略懂百科-http://wswcn.cn/82515.html

如果出现的是如下提示,代表没任何问题,点确定然后,点保存即可。文章源自略懂百科-http://wswcn.cn/82515.html

正常提示文章源自略懂百科-http://wswcn.cn/82515.html

第五步:打开我们的Excel文件《小明的店铺进销存系统.xlsm》文章源自略懂百科-http://wswcn.cn/82515.html

咚咚咚…文章源自略懂百科-http://wswcn.cn/82515.html

见证奇迹的时候到了。文章源自略懂百科-http://wswcn.cn/82515.html

发现了吗? 功能区域多出了一个选项卡[Custom Tab]和一个功能菜单[Custom Button]。文章源自略懂百科-http://wswcn.cn/82515.html

小伙伴们,请亲自去点下这个笑脸的按钮看下会出现什么。文章源自略懂百科-http://wswcn.cn/82515.html

定制选项卡和菜单文章源自略懂百科-http://wswcn.cn/82515.html

通过这个热身练手的例子,我们已经能通过Custom UI Editor For Microsoft Office为Excel生成出菜单了。文章源自略懂百科-http://wswcn.cn/82515.html

但是离我们想最终实现的还有一点距离。因为我们需要生成的是多个菜单、图标需要显示我们自己的图标、需要自己定义按钮文字、功能区只显示我们的选项卡,其他选项卡都通通隐藏掉。文章源自略懂百科-http://wswcn.cn/82515.html

最早菜单定制效果文章源自略懂百科-http://wswcn.cn/82515.html

小伙伴们,请保持好队形和节奏,继续往下看,小编将为您一一解答。文章源自略懂百科-http://wswcn.cn/82515.html

Custom ui定制关键在于以下代码,我们只有将它读懂了才能定制出我们想要的功能菜单。文章源自略懂百科-http://wswcn.cn/82515.html

UI 定制的XML文章源自略懂百科-http://wswcn.cn/82515.html

这个代码叫什么?文章源自略懂百科-http://wswcn.cn/82515.html

XML也叫可扩展标记语言,是一种用于标记电子文件使其具有结构性的标记语言。这里我们只要记住和理解一个关键字:标记,从哪里开始,到什么地方结束,如下图CustomUI开始到CustomUI、ribbon开始到ribbon、tabs开始到tabs结束,我们很容易看出来这些标记与标记是包含与被包含的关系。文章源自略懂百科-http://wswcn.cn/82515.html

前面让大家记住了功能区、选项卡、功能菜单之间是也包含与被包含的关系,请再看看上面的代码,如果需要生成出两个笑脸的按钮怎么处理?文章源自略懂百科-http://wswcn.cn/82515.html

相信小伙伴们都已经猜到了,只要复制Button这一段就可以,请看以下动图演示。文章源自略懂百科-http://wswcn.cn/82515.html

我们对着Excel来理解下这段XML的含义。文章源自略懂百科-http://wswcn.cn/82515.html

翻译成中文就是,在功能区ribbon里面,有个Tabs可以存放多个选项卡Tab,在选项卡Tab文章源自略懂百科-http://wswcn.cn/82515.html

里面有个按钮组Group,里面存放了两个按钮。文章源自略懂百科-http://wswcn.cn/82515.html

XML 与 Excel对照文章源自略懂百科-http://wswcn.cn/82515.html

上面我们说了Tabs里面可以有多个Tab,Tab里面可以有多个Group, Group里面可以有多个Button那么系统是怎么区分他们的?比如有多个Button的时候,怎么区分你就是你,它就是它,这个Button就是我们点击的Button?文章源自略懂百科-http://wswcn.cn/82515.html

我们每个人都有身份证号码而且身份证号码全国是唯一不重复的。 对于这些标签而言它们也有标识身份唯一的属性叫id,请再观察下上面的代码,这些有可能重复的标签里面是否都存在一个属性叫id的,而且它也是唯一的。文章源自略懂百科-http://wswcn.cn/82515.html

以下是我们需要用到的标签属性:文章源自略懂百科-http://wswcn.cn/82515.html

常用的标签属性文章源自略懂百科-http://wswcn.cn/82515.html

再举一个例子用来帮助大家理解这些标签和属性的作用。文章源自略懂百科-http://wswcn.cn/82515.html

小明在农村有1块宅基地,他在上面盖了1栋房子,有很多个房间[Tabs],为了区分不同的房间[Tab],他给每个房间分别编了001到0XX的房间编号[Id],并在每个门上挂了一幅不同的画[imageMso],而且给每个房间都取了一个雅名[label],有一个房间[Tab]的某一面墙[group],墙上安装了很多开关[Button],当他按[onAction]这个些不同的开关时分别可以打开不同的灯。文章源自略懂百科-http://wswcn.cn/82515.html

至此对于这个XML的作用不知道小伙伴们是否已经理解了呢?文章源自略懂百科-http://wswcn.cn/82515.html

接下来,我们解决另一个问题:如何把笑脸图标改成我们自己的图标?文章源自略懂百科-http://wswcn.cn/82515.html

上面我们有列了两个标签属性imageMso这个只能引用系统图标,image可以引用自定义图标,所以我们需要用到image的标签属性。文章源自略懂百科-http://wswcn.cn/82515.html

第一步:按下图123导入我们自定义的图标。文章源自略懂百科-http://wswcn.cn/82515.html

导入自定义图标文章源自略懂百科-http://wswcn.cn/82515.html

第二步:修改imageMso为image,将图片名字HappyFace改成我们自定义的图片名字。文章源自略懂百科-http://wswcn.cn/82515.html

图标修改文章源自略懂百科-http://wswcn.cn/82515.html

第三步:我们来看一个动态图,看小编是如何操作的。文章源自略懂百科-http://wswcn.cn/82515.html

连贯操作文章源自略懂百科-http://wswcn.cn/82515.html

最后一个问题:如何隐藏Excel默认的选项卡,只显示我们定制的选项卡?文章源自略懂百科-http://wswcn.cn/82515.html

这个问题是最简单的,所以我们留到最好来解决,看到图片中标记的false吗?文章源自略懂百科-http://wswcn.cn/82515.html

你改成true就可以了。文章源自略懂百科-http://wswcn.cn/82515.html

强制隐藏系统默认选项卡文章源自略懂百科-http://wswcn.cn/82515.html

小伙伴们,理论再丰满,都赶不上现实的骨感! 写的再多都比上亲自的实践,我希望的是为大家授之以渔而不是授之以鱼。所以剩下的就交给大家去完成了,请实现下图的菜单布局。文章源自略懂百科-http://wswcn.cn/82515.html

请思考:下拉菜单是怎么实现,在下一节课中我将为大家做解答。文章源自略懂百科-http://wswcn.cn/82515.html

作业效果图文章源自略懂百科-http://wswcn.cn/82515.html

本节是专栏的第二节课程,相信大家一定会有很多疑问或问题,请在评论区留言或给我发私信,都会为大家一一解答。文章源自略懂百科-http://wswcn.cn/82515.html

从下节课开始将对未购买专栏的伙伴们做部分的阅读内容限制。所以还没有购买本专栏的小伙伴们,请抓紧时间购买哦,优惠期间花一个早餐的钱即可获取到提升工作效率VBA神技巧,后续章节将会更精彩,还有什么好犹豫的呢?文章源自略懂百科-http://wswcn.cn/82515.html

本次课程用到的工具和资料,请关注后私信回复【菜单定制】系统会自动回复下载链接。文章源自略懂百科-http://wswcn.cn/82515.html

文章源自略懂百科-http://wswcn.cn/82515.html

文章源自略懂百科-http://wswcn.cn/82515.html

懵懂先生
  • 本文由 发表于 2023年1月1日 16:24:05
  • 转载请注明:http://wswcn.cn/82515.html
投稿文章

结婚证丢了怎么补办 结婚证撕了补办一本

在生活中夫妻之间可能会有些争吵,在争吵过程中可能很生气,然后把结婚证给撕了,争吵过后后悔也来不及了。那么结婚证撕了怎么补办呢?下面小编为大家一一解答。 一、结婚证撕了怎么补办 1、结婚证撕了怎么补办?...
投稿文章

武汉yamkor韩餐人均多少

秋天凉风渐起, 此时最想念的就需要热乎乎的美食 其中乐活菌内心首当其冲的选择就是 吃!肉! 说起肉来,怎么能少得了韩国料理?! 各种美滋滋的烤肉、芝士排骨、参鸡汤、辣炒年糕.... 简直数不胜数! 乐...
投稿文章

好文:瑰丽神奇是什么意思(瑰丽神奇的意思是什么)

五本女主在宫里当官的古代言情小说推荐,献给喜欢阅读的书友们! 在宫里当差,最重要的是什么? 最重要的就是:少说话多做事,找好靠山慢慢熬! 另外,请一定要记住!不睡皇帝,保平安! 以下几位女主,她们牢记...
投稿文章

鱼子酱价格(鱼子酱营养价值)

1:一盒23308美元 都说民以食为天,自古以来,就不乏各种知名的诗人作出了关于吃的一些诗词,可见得吃在人们的心中还是有着很大的地位的,有些高级点的吃货甚至还将吃做成了一门艺术,比如西方国家的的一些法...