手机移动端界面设计

第二部分、手机（包括PDA等）移动端用户界面设计（含部分美工）

手机等设备的移动端设计的思路与电脑端一样，业务逻辑也完全一致，不同的是界面设计中有很多因小屏显示需注意的事项

• 界面设计内容：

  • 打开首页时三个显示块一排显示，分别为“员工申请”、“主管审批”、“采购管理”
  • 功能上，我们开发申请及审批两部分，采购管理只做申请信息查看的功能

    首页显示块开发

• 开发内容：首页默认设计的修改、着页中以九宫格方式放置功能块用于点击进入功能页面

  新建项目时默认生成的移动端显示块

• 双击进入项目中移动端显示块“<Mobile View>”，注意这个显示元件不可改名（<>符号的名称不能改，是底层代码的一部分），其中有默认的一个Page1页面，改名为“申请审批管理”（快捷键“F2”），一个footer元件，不用处理但可改名（主要功能是在多个主页面时，生成底部导航按钮），另有一个“Selected Page”数据类型元件，用于多页面时显示管理逻辑，无需处理

默认移动页调整

• 双击进入“申请审批管理”页面，默认的一些元件不建议删除新建处理（如下图中右侧六个元件），因为直接调就可使用，其他可放置不理不影响新项目开发，但可以做为后续学习复杂开发的示例。双击进入头部（Header），左右有两个按钮元件，我们用不到，所以可以删除这两个按钮（选中直接按Delete键）；双击头部外部退出头部，再双击进入内容元件（<>Content元件）中，有个默认的List元件，这个元件我们也可不用，删除它（选中直接按Delete键）

添加九宫格式显示块元件

• 添加行显示元件（右侧元件栏->Display->Row）,双击进入并在行中放置三个显示块元件（右侧元件栏->Display->Pane）；选中每个块进行样式属性定义（在开发区下部属性栏位点属性栏右上角第二个图标（Add Property），在弹窗内输入本地样式的属性名称“html.style”），样式值设定为“display:inline-block;width:33.333%;min-height:130px;text-align:center;background-color:#aaa;”，注意三个块是独立元件需各个单独定义同样的样式属性,最后一个“#aaa”是网页中定义的颜色号,中间的块中颜色号改为#a2a2a2。

添加文本显示元件并设置CSS大小参数

• 在以上一个块中点选放入文本显示元件（右侧元件栏->Display->Text Display），用右键复制（Copy）这个文本显示元件并在第二、三个块中复用（右键选Paste(reuse)）。选中文本显示元件，同上添加属性名称，样式值为“line-height:130px”,意思文字在高度为130像素的区域的中间位置显示。

为文本显示对象传递显示值

• 在行中第三个块后面放置一个普通行为处理元件（右侧元件栏->Basic->Action；也可在英文输入法及非大写输入时按快捷键“a”，然后点击要放入的位置快捷生成元件）可命名为“显示标题”，在其中用右键添加一个父层行元件引用对象（右击鼠标->Add Ansestor Reference->Row），添加三个字符串常量（右侧元件栏->Constants->Text）分别命名为“申请”、“审批”、“查看”，点选实线箭头将三个常量分别传值给行父层引用中三个块内文本显示元件的值（Value）中。这样子首页面完成界面设计。

小屏的浏览器中显示如下：

刷新浏览器显示移动端首页

二级页面设计

• 开发内容：功能子页面添加、页面显示内容和按钮设计

  行为框中添加子页面

• 进入行显示元件中“申请”显示块，添加一个普通行为处理元件（快捷键“a”），改名为“<On Click>”，双击进入后，从元件栏点选放入一个移动页面元件（右侧元件栏->Display->Page Dialog）,改名为“申请页”；同样方式在行显示元件中“审批”块下放入一个“审批页”，在“查看”下放一个“查看页”。此时在浏览器中可看到各块并点每一块可进入下属页面。后续的开发主要在这三个页面中进行

申请页设计

• 进入“申请页”，进入头部，将右边不用的一个默认放置的“Button”按钮删除，将左侧“Close”按钮改名（快捷键“F2”）为“返回”
• 退出头部，进入内容元件（Display->Button）命名为“提交申请”，进入按钮中的元件，在其中点选放入一个Model Dialog弹窗元件，改名为“提交申请”并参考电脑端提交申请窗口一样进行其中的设计或复用电脑端的弹窗（需注意如果复用则每个地方显示属性是一样的，建议电脑端与移动端显示的窗口分开设计，实际开发的案例文件中我们也是单独开发了一个“提交申请”弹窗）
• 另在内容元件中“提交申请”按钮外，放入一个复杂表格元件（右侧元件栏->Display->Table）；参考电脑端采购管理中订单表格中的设置，将表格内<>Body Row中显示元件分别改名为“序号”、“品名”、“数量”（复用“序号”后改名）、“日期”

审批页内容设计

• 进入“审批页”，同样在头部中，将右边不用的一个默认放置的“Button”按钮删除，将左侧“Close”按钮改名为“返回”
• 退出头部进入内容元件，放入两个按钮，分别改名“批准”“不批准”。添加一个行元件（右侧元件栏->Display->Row），为行元件添加样式属性（html.style），值为“text-align:center;”，双击进入行元件放一个文本显示元件（右侧元件栏->Display->Text Display）,双击进入后添加一个字符符串常量并命名为“待审批项目”，同时用实线箭头将字符常量与显示的相连，这样会有一个居中显示的文字在页面中：

• 下方复用“申请页”中的表格

查看页面设计

• 进入“查看页”，同样在头部中，将右边不用的一个默认放置的“Button”按钮删除，将左侧“Close”按钮改名为“返回”。
• 退出头部进入内容元件，放入一个行元件（右侧元件栏->Display->Row），为行元件添加样式属性（html.style），值为“text-align:center;”，双击进入行元件放一个文本显示元件（右侧元件栏->Display->Text Display）,双击进入后添加一个字符串常量并命名为“待采购项目”，同时用实线箭头将字符常量与显示的相连；下方复用“申请页”中的表格。

以上基本完成了移动端的界面设计。可以在浏览器进行操作测试一下各个页面及弹窗