页面规划和设计的经验分享，如何把自己的作品收拾的更加整洁、漂亮

继上贴外联数据库的经验分享后，再来一贴，和外联数据库一样，本贴会持续更新（建议收藏，常来常新货，错误的也会有更正），也希望能成为页面规划和设计的一个小指南，有遗漏的，大家可以留言补充，
传送门，外联数据库经验分享：https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=78284&extra=page%3D1


一、先说隐藏区的规划。因为活字格没有其它类似平台的表间提数公式/填表公式，所以相当多的计算工作都需要先将数据刷到前段页面来处理，而这些中间数据都会放到隐藏区里，所以隐藏区的规划非常重要：
（1）隐藏区统一放在显示区的右侧，底色加灰，左右留空一列，全选统一设置字体和大小，先留足列数，设计完后再来删列
（2）字段标题加“@”符号，默认对齐方式，字段紧跟在后面，占4列，底色加浅蓝，如非需要，不需要去变动默认的单元格格式（如用到值变化命令等，再设置相应的单元格格式）
（3）每个隐藏都要加注释说明作用，注释加“//”符号，单独一行，已完成的功能用绿色文字，未完成的功能用红色文字。（注：官方有提供注释标签，但我觉得在隐藏区不好用，不够直观，注释标签只在显示区用比较好）
（4）隐藏区和显示区的关联字段放置在同一行区。其中对于明细表，如果是行数对等的明细表，则保持行数一致，否则整个表区只占4行。
（5）明细表的每个字段都占4列
（6）同一个功能组，如果用到多个明细表，会超出功能区时，向右延伸，不要向下延伸
（7）无论是显示区，还是隐藏区，所有表都要命名，养成好习惯
（8）显示区，有字段的行高设置为30-35（包括明细），间隔行保持默认的20（改动费时间）。这样兼顾了美观和效率，同时也照顾到了隐藏区的显示，我这前会到间隔行弄成10，这样隐藏区的使用会比较不方便。
（9）经常会用到的传值功能，如果在隐藏区，命名为“@***传值单元格”









（题外话：前年开始玩活字格，但玩了一段时间后，出现设计屏障，其中之一是提数公司，这个改变一下习惯和思路，利用好隐藏区还是可以接受；其二是回写数据表的各种不方便以及SQL的封闭，这点没办法改变，所以中间放弃过活字格，但6.0出了服务端命令，这才开始重新玩活字格，服务端命令使活字格在数据库系统设计的方向上真正迈开两条腿，希望服务端命令能越来越强、越来越规范）

• 隐藏区规划-1楼
• 字体、大小、行距选择-2楼
• 填报助手页面的规划（设计一次，多页面调用）-3楼
• 从表到页的结构（留位）（会谈到nxcells的映射，如果没有接触过其它类EXCEL平台，直接进入活字格的，看完这个才会知道活字格的页面有多香）
• 数据字典表的设计规划（留位）（究竟哪些应该放到数据字典里，哪些应该单独开表）
• 组织结构树形图构造
• 用好“支持预览的附件”插件（留位）（设计图片和附件的填报助手，再来看看能不能解决腾讯云图片和附件的清理问题）
• 图标使用、引入ICONFONT、以及怎么用Jquery去拿节点（留位）（BS架构设计出来的页面，颜值一定要高，要不然怎么去和CS架构PK）
• 显示区总表的分布规划，分页和树形使用（留位）（编辑、查看、删除等功能应该怎么规划好）
• 显示区详情表的分布规划（留位）（包括单一数据项和明细数据项）
• 橫向菜单、纵向菜单、标签页的综合应用（留位）（多模块的大系统就这么搞）
  

三、填报助手页面的规划
活字格没有列表选择框，需要通过弹出框的值回传来实现多选等填报，带来非常大灵活性的同时，也需要考虑效率问题。所以一定要找到提升效率的方法。使用多以后发现，弹出页面都是通过值回传来实现，所以绝大多数填报是可以复用的。我们开始的时候，会建多个填报页面，从命名就可以看出来，如“员工名册-入职登记-完整添加-填报开户行城市“，这个填报是选择城市/区县用的，所以我们就可以做一个“填报省市”和一个“填报省市区”页面，并放到一个叫“填报助手”的文件夹里。这个就有点其它类EXCEL平台的列表规划或数据接口的意思了，效率能大大提升哦。再比如组织树形图、身份证AI、编辑附件图片、查看附件图片等，都是可以复用的。

再进一步，请划重点，大招来了。活字格的页面设计用一个非常大的特点，可以复制粘贴，所以无论是组合框、还是填报助手，你都应该充分利用这个特点。在填报助手页里，再建立一个填报助手模板，把所有组合框和用到填报助手的字段，全部复制过去。使用的时候，直接COPY过去。注意点：填报助手父页面的传值单元格需要重新设置，子页面的填报助手自然是不用动的

填报助手文件夹






这是一个组织架构树形图，用于填报部门的地方都可以用





填报页面使用填报助理的入口，我构造了两个按钮，一个按钮是在输入框内的，这个用于填报内容。一个是在输入框外的，这个用于管理字段
出个题：你知道输入框内的按钮怎么设计出来吗？

二、字体、大小、行距选择
1、PC端：
（1）单一字段文字：标题用雅黑，大小10-12；正文用宋体（不选雅黑的原因是雅黑在PC端会显得太粗），大小10-11，注释类的大小为9；
（2）表格字段文字：表头用雅黑，大小10，正文用宋体，大小10
（3）单一字段排列：一般一行放两个字段，字段标题右对齐并加两到三个空格，间隔一行。字段行高度30-35，间隔行高度保持默认的20。填报页面，用圆角框，文字居中对齐；查看页面不用框，文字左对齐
（4）表格字排列：行距30-35，一般居中，不要用自动换行和自动调整行距，字数不够显示的在查看页面看，操作列，我一般用文字链接，表头标题就写操作，根据实际的操作列数来排列“操作”两个字，让操作两个字能居中对齐
（5）按钮：高度30，总表的按钮，雅黑，大小9，加图标，一般用四字，占4格。填报查看表按钮，雅黑，大小10，不加图标，一般要两个字，占3格

2、手机端：
（1）文字：全部统一使用雅黑，大标题12，小标题10，正文11，注释类9-10
（2）留空：左右一般留空10-15
（3）单一字段排列：一行一个字段，一般有两种方式：A、标题和字段在同一行，行距设为50，用下框线来间隔（下划线，左边从标题单元格开始，右边则一直延伸到最右边，包括留空列），标题和内容都左对齐。B、标题和字段在不同的两行，一般用于字段内容较多的，标题行20，字段行30-**，视情况而定。
（4）表格字段排列：填报页面，使用图文列表，一定要结合流式布局，然后一个区块限制在5行以内，最好3行。如果字段太多，可以结合弹出框来填报。查看页面可以直接用表格，控制显示字段在5个以内，多的通过弹出框来显示
（5）按钮高度40-50，如果只有一个按钮，则一行占满。雅黑，大小11。两个以上的，不占左右留空列，按钮之间空一列，尽量占满行

留位

留位

留位

留位

留位

留位

留位