一看就会，超有用活字格技能：一百三十四、活字格开发规范——PC页面篇

野猪佩奇

PC页面设计

普通页面：

登录页面：

登录页面是一个系统的“门面”，系统的登录页面设计的美观简介，对于用来而言，也是一种好的初体验。一般来说，目前主流的显示屏分辨率是1920*1080的分辨率，该分辨率目前投入使用的也占办公电脑屏幕的绝大部分。所以，我们的网页在设计大小之初，首先要确定的就是使用人群的机器屏幕大小，从而可以初步提升用户的使用体验。

其次针对登录页面，页面布局也同样重要，登录界面内容根据企业的品牌形象，软件需求而议，主要有logo、软件名称、企业宣传语、广告区、登录区、提示信息版权信息、客服条款、隐私声明、帮助反馈等等。登录界面的布局根据自然匹配原则，视觉流线总是从上到下，从左到右。根据这一原则，结合需要展示的内容，把登录界面的布局左右布局，上下布局，中心布局3种。

活字格登录页面支持自定义样式，我们可以根据用户的使用习惯，调整登录表单的位置，如可放置在页面靠左侧（如上图），靠右侧或居中（默认）。如果从美观度上来看，靠左或靠右的布局方式更为舒适、协调。

主页页面
image.png103960570.png

进入系统的后的欢迎主页页面，主区域可以放置排布的常用功能按钮，方便用户使用常用功能按钮。侧边栏可以放置菜单按钮，以细分选择其他系统功能。整体的布局方正、简洁，用户接受度会更高。

列表页面

列表页面推荐配合图文列表的形式进行展示，形成卡片式的展示效果，如图文列表中的模板可以设置白色背景及背景图的圆角，和主背景灰色形成一种立体的效果。列表中的修改、编辑、删除按钮可以选择使用图片单元格设置小图标，美观度更佳。

详情页面

详情页面如果有主子表的关系，子表的展现方式推荐使用选项卡、标签页或页面容器的形式进行实现。其中，选项卡会一次性加载所有子选项卡中的所有表格及数据，如果子选项卡不是很多，子表数据不大的情况下推荐使用；标签页和页面容器会在打开对应的子页面后加载子页面上的数据，如果子页面上有数据量较大的表格推荐使用。如果有各个子页面单元格数据传递的需求，那么只能选择使用选项卡。

数据展示页面
image.png800779418.png