第5节 检视功能-元件命名
千语：楼叔，我才问一个问题，你就给我讲了这么多！好感动哦！
小楼：嘿嘿，因为这个群里你最大嘛！
千语：切！反正你也有空，顺便把元件的设置也给我讲讲吧！我看不管是元件的样式还是属性，都很复杂呢。
小楼：您好！因为网络原因，您发送的消息是乱码。
千语：还想等你给我讲完，发张我昨天泡温泉的照片给你呢！
小楼：你看，其实这个元件设置也非常简单，你看在点中一个元件后，检视面板中就会呈现与该元件相关的设置……
从上至下，首先看到的是元件的名称设置。
元件的命名非常重要，特别是当我们在软件的一些元件列表中选择元件时，已命名的元件才能够很快被找到。
不过元件的命名我建议要有一定的规范，我认为最好的方式就是使用英文命名，并且采用“功能名称+元件类型+序号”的组合形式。其中，元件类型与序号部分，主要用于区别同类功能的元件，可视情况添加或省略。例如，一个页面中同时出现背景图像和背景形状，可以分别命名为“BackgroundImage”和“BackgroundShape”；而一个页面同时出现2个背景形状时，可以分别命名为“BackgroundShape01”和“BackgroundShape02”。书写格式上，因为命名时会包含多个单词，所以每个单词首字母大写，以方便阅读。（图6-13）
（图6-13）
特别说明：不建议用中文或拼音进行元件命名。使用中文命名容易导致生成的HTML文件出现问题，而拼音除了不方便阅读，信息量不足，还容易出现不同文字拼音相同的情况。
第6节 检视功能-元件样式
元件命名的下方和页面设置一样，是属性、说明与样式。我们还是先来看样式。
大部分元件的样式都大同小异，一般都是可用与不可用的区别，比如矩形元件样式与热区元件样式的对比。（图6-14）
（图6-14）
我们能够明显看到，右侧热区元件不但{位置•尺寸}的设置中比左侧矩形少了一些内容，而且，样式设置中大部分设置都是灰色不可用的状态。
千语：楼叔，那个被你弄得好长啊！
小楼：弄长了方便啊！你不觉得这样很舒服吗？
千语：还行。你快说说里面这么多设置都是做什么用的？
小楼：我就不一个一个说了，我画一张图给你。你看一遍，有个印象就可以啦！（图6-15）
（图6-15）
这是形状元件包含的样式，图片元件与此略有不同，可以看另外一张图。（图6-16）
（图6-16）
以上两张图包含了所有单一元件样式的设置内容。
千语：楼叔，你的图标注的很明白，但是我也只是知道功能用途，并不知道怎么去使用！
小楼：这个需要很多的练习，最简单的途径就是模仿一些真实的网站或应用的界面。我简单的给你举个例子！
案例02：虾米音乐导航菜单样式
先看一下要实现的效果。（图6-17）
（图6-17）
我们先把这个截图，放到我们的画布上。然后，开始模仿成原型。
在实际操作之前，我们需要先进行仔细的观察。
矩形背景颜色有渐变的效果。
矩形背景底部有阴影的效果。
所有的文字为白色，同时带有文字阴影效果。
菜单中的按钮边框为深棕色。
菜单中的按钮填充颜色同样为渐变效果。
菜单中最左侧的按钮填充颜色与其它按钮不同，但同样为渐变效果。
菜单中的按钮共有4个，中间两个为矩形，两侧的按钮都有2个角部为圆角。
观察完毕，就可以逐步动手制作了。
先在画布上放入一个无边框矩形元件（例如矩形2），在样式中设置相应的宽高。（图6-18）
（图6-18）
在快捷功能或者样式面板中打开填充颜色设置面板，选择颜色类型为渐变色，点击调色条中间位置，添加一个颜色滑块。（图6-19中橙色线段部分）然后为三个颜色滑块设置不同的颜色，这里可以点中滑块后，通过吸管工具在原图上相应的位置汲取颜色。（图6-19中蓝色线段部分）
（图6-19）
在快捷功能或样式面板中，点击【外部阴影】选项，为矩形背景添加下方的阴影。在阴影的设置界面中，勾选【阴影】的复选框才能进行阴影的设置。（图6-20）
（图6-20）
{偏移}是指阴影的位置，向左侧偏移{x}中输入负数，反之输入正数，无偏移则填写“0”。向上方偏移{y}中输入负数，反之输入正数，无偏移同样填写“0”。本案例中阴影只在矩形下方出现，所以{x}偏移为“0”，{y}偏移为“4”。
{模糊}是指阴影的浓度，数值越大阴影越淡，反之用浓。
{颜色}是用来设置阴影的颜色，点击之后即可打开选色界面，选取适合的颜色。
在矩形背景上放置两个文本标签，双击元件输入相应的文字，设置字体尺寸为“16”px，然后，设置元件文字为白色，并在样式面板中为元件文字添加【文字阴影】。（图6-21）
（图6-21）
放入一个带边框的矩形（例如矩形1），参考操作步骤1、2、4，设置好宽高、渐变颜色和文字阴影。然后，点击快捷功能或样式面板中的边框颜色按钮，为边框设置颜色。在颜色列表中没有需要的边框颜色，可以点击颜色设置面板中的【更多】，在自定义颜色界面中设置自定义颜色。（图6-22）
（图6-22）
按住<Ctrl>键拖动矩形元件（或者<Ctrl+D>键），将其复制为四个，并双击矩形元件更改文字。然后，参照操作步骤2更改第一个矩形元件的颜色。如果发现四个矩形元件之间的边框比较粗，可以在导航菜单【项目】的选项列表中，选择【项目设置】，在弹出的窗口中，将{边框对齐方式}选择为【边框重合】。（图6-23）
（图6-23）
两侧的两个矩形元件需要设置圆角。按住<Ctrl>键点中两个元件，在样式面板中设置{圆角半径}为“3”，然后，进行保留部分圆角的设置，左侧的矩形元件取消右上与右下的圆角，右侧的矩形元件取消左上与左下的圆角。（图6-24）
（图6-24）
最后，将设置完毕的四个矩形元件，并排放置在背景矩形合适的位置上。（图6-25）
（图6-25）
千语：虽然还不是很明白，但是好厉害的样子！
小楼：所以说你要多练习嘛！
千语：不过，我刚才发现一点点问题！Axure不能给文字添加删除线的吗？要是做一些商品价格折扣中删除线的效果怎么弄呀！
小楼：可以呀！删除线虽然没有在文字的样式设置中，但是可以通过水平线来实现。
案例03：带删除线的文字效果
具体步骤如下：（图6-26）
（图6-26）
在画布中放入一个水平线元件。
双击水平线，给元件添加文字。
在样式设置中，选择元件自动适合文本宽度。
千语：哇！楼叔，你好厉害哦！我先去学习了，谢谢你！
小楼：好！再见。哎！哎！不对，说好的温泉照呢？
第7节 检视功能-元件说明
熙仔：楼爷吉祥！
小楼：跪安吧！
熙仔：我有问题……
小楼：你又不是女的……
熙仔：我……，我有*********！
小楼：哈哈哈哈哈哈！我小楼是那样的人吗？快说你有什么问题？
熙仔：我想做一个身份证号码的验证，能给点儿思路吗？
小楼：洗洗睡吧！
熙仔：啊？做不了吗？
小楼：不是做不了。而是，在我们原型制作的过程中，有时并不是所有的功能都要通过给元件添加交互来进行展现。像你所说的这种身份证号码的验证，在Axure中实现会非常复杂，而对于开发来说，这种验证也往往是很通用的，甚至都有可重用的代码。所以，我们完全没必在原型中实现真正的验证，把精力耗费在这个上面非常不值得，这种情况我们只需要给这个文本框加相应的文字说明就好了。
添加元件说明
在检视面板中提供了给元件添加注释说明的功能。像身份证号码验证的交互，在原型上实现一些复杂的验证不是很方便，也会很耗费时间。所以像这种情况时，我们可以直接给元件添加说明，在说明中写出验证要求。（图6-27）
（图6-27）
当我们给元件添加了说明，在浏览器中查看原型时，可以在工具栏的说明面板中查看说明，或者点击元件右上角的说明图标查看说明。（图6-28）
（图6-28）
熙仔：能添加多个说明吗？我还有***********。
小楼：能！能！
自定义说明字段
在原型制作过程中往往一个元件需要多个说明，比如一个添加商品信息的按钮，它需要包含业务描述、需求描述、行为人、前置条件、后置条件等等。这个时候，我们就需要添加多个说明。
点击说明面板中的【自定义字段】打开说明编辑界面，在【添加】的列表中选择一种类型就可以添加一个说明字段，新添加的字段就会出现在【说明】的功能模块中，我们再写入对应的说明文字就可以了。添加的说明字段一个有四种：文本、列表选项、数字和日期。一般比较常用的就是文本和列表选项，像商品信息相关的行为人是几个固定的部门，我们就可以将说明字段设置为列表选项，把这些部门预置进去，供我们选择使用，免去每次输入的繁琐。（图6-29）
（图6-29）
原创文章，作者：交互精选，如若转载，请注明出处：https://www.iamue.com/36625/
