整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
页设计尺寸是多少?下面就来学习一下。
网页设计尺寸
制作网页时我们选用的分辨率是72像素/英寸，使用的画布尺寸1920px*1080px。但并不代表我们可以在整个画布上作图。
网页的布局主要有两种：左右型布局和居中型布局。布局的不一致，使可设计的空间也不相同。
左右结构型
1、左右布局，灵活性强，UI的限制小;
2、左边通栏为导航栏，宽度没有具体的限时，可以根据实际情况进行调整;
3、右侧为内容板块范围，是网站内容展示区域。
居中型
4、居中布局，中间的黄色部分为有效的显示区域，用于网站内容的展示。
5、换句话说，两边均为留白，没有实际用途，只是为了适配而存在。
6、内容限时区域在好控制在1000px-1200px。
网页常用字体
现在网页的布局我们已经了解了，那么接下来就是网页中常用到的字体。
字体设计的总原则是：可辨识性和易读性。
中文建议使用微软雅黑字体，英文则建议使用arial 字体。常用的字体大小号有以下几种：
1、12px是用于网页的最小字体，适用于突出性的日期，版权等注释性内容。
2、14px则适用于非突出性的普通正文内容。
3、16px或18px适用于突出性的标题内容。
4、网站的字体大小并没有硬性规定具体的字号，根据实际情况可以酌情考虑，但是要有限适用偶数字号。
5、字体规格也不需要太多，最好适用三种混搭。如果需要更多
6、层次的区别，可以改变字体颜色或加粗来体现。
网页设计WEB端设计规范总结
一.尺寸规范
在网页设计中首先要解决的是网页布局大小及尺寸的问题，在ps新建文档中可以见到当今常见web网页尺寸，最常见尺寸为1366*768像素。
二.网页的宽度尺寸
为了适应屏幕的显示，页面宽度设制要有一定的范围值，其实在设计及设计学中也没有相关硬性规定，但是为了兼容大多数浏览器一般是设置960px，随着现在浏览器分辨率的变化，已开始1000px,1200px宽度发展，例如淘宝(1000px)京东商城(1200px)。如果需要兼容不同浏览器尺寸，现在比较流行的做法是做成响应式的，即根据不同分辨率显示不同的尺寸，工作量也就随之增加了。
三.主流浏览器
国际通用的有
chrome，IE，firefox，safari，opera
国内的知名浏览器有
QQ浏览器，猎豹浏览器，2345浏览器，搜狗浏览器，360浏览器，UC浏览器等
知道了浏览器的设计特点才能更好的设计页面，比如浏览器的头部的操作高度和信息的展示都会有所不同，那么页面在每个浏览器上面的展现就会有所不同。
四.点击操作
主要通过鼠标点击、滑动、滚动、拖拽。
网页设计所需注意事项
没有内容层次用户的眼睛喜欢有秩序的设计，如头部包含导航和LOGO，特定内容使用lightbox，三列分栏，页脚。它有助于在内心组织重要的信息，并引导用户注意在你想让他注意的地方。在传统艺术中，新手们被教导色彩价值和线性透视三原则和其他艺术指导。在网页设计中，没有特别奉行的准则，但以直观的方式组织你的内容是一条很好的经验规则。也是多年培养的用户习惯。最终习惯就是最终用户。当然一成不变不是我们所鼓励的。
太多的色彩背景一种颜色，内容文本一种颜色，链接一种颜色，页头和lightbox一种颜色，图案和页脚各一种颜色。这很好，因为它帮助区分了有用的内容。但是，多重渐变几种鲜艳的色彩和大量有鲜明对比的色调及饱和度，会破坏你网站的层次和空白概念。尝试限制自己只用一种鲜艳的色调(如蓝色)，再搭配反相的单色(白灰黑)以获得一个漂亮的搭配。这里强调下豆瓣的配色。也是我喜欢的颜色搭配。
太多的字体一般一个简单的网页设计，一般字体不超过3种。多则乱没有足够的空白空白可以说是设计中最重要的一部分。它有助于防止用户在浏览网站时变得疲惫，它可以在内容中划出距离，而且它本身也看上去不错。空白不是必须用白色的，而是，它仅仅是为其他设计元素提供间隔和缓冲的空间不考虑用户的分辨率。
对比的问题你考虑过阅读黑底白字和白底黑字的不同吗?你有没有试过阅读一下白底灰字?有些方式之所以比其他的更好，其原因就是这是一种眼睛感知到对比的方式。如果你很难舒服的阅读文字，考虑一下改变字体大小或方式。
不一致，一致性是网页设计的关键。它是把网页设计组织在一起的方式，可以创造一种紧密结合的感觉。在网站页面互相链接的情况下，它可以帮助用户把所有页面都联系在一起。如果你在整个网站持续改变字体大小和色彩，用户很快会觉得不知所措。
没有足够的文字间距与空白有关，文字间距有两个部分，一个是字距，关系到字母之间的空白。一个是行距，关系到两行文字之间的距离。这些有助于区分行与段落，使用户更容易阅读文字。
了解更多网络营销请关注珠海网站建设-杰作科技：www.jiezuo.org www.jiezuo.net www.jzuo.cn 珠海网站建设.com
原文链接：http://www.jzuo.cn/yingxiaodongtai/747.html
设计创作中，如何高效的对信息进行整合、梳理？对此，本文分享了对Confluence 的产品体验设计拆解，从日常使用场景、体验亮点、体验槽点三个方面分析并总结了文档类产品的解题宝典，一起来看看吧。
Confluence 是一个由 Atlassian 公司所开发的专业的企业知识管理与协同软件，可以用于构建企业 Wiki。它能够帮助团队成员之间共享信息、文档协作、集体讨论，信息推送等。
如何高效地对信息进行整合、梳理， 是设计创作很重要的一环。基于此，这里给大家分享一下 Confluence 的产品体验设计拆解。通过对 Confluence 的体验设计拆解，为你提供一份文档类产品的解题宝典！
Ps：笔者之前写文章主要是使用语雀或 Notion，这次为了拆解「Confluence」，就专门用 Confluence 写文章来拆解 Confluence ～（套娃警告 ）
第一类，UI/UX设计师，可以跳出执行层，去思考 Confluence 的产品设计策略，提升产品分析能力；第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取产品设计参考；第三类，文档产品从业者，通过全面的产品设计策略推导、用户需求分析，获取竞品分析参考。
首先了解一下这几个 Confluence 中的基本概念，页面都是以树状结构放置与空间之中，页面之间也可以互相链接和访问。创建页面时除了采用空白文档，也可以选择模板。权限控制分了 3 个维度，分别是团队、个人和匿名用户，按照权限最小化原则，分空间和分页面管理。
点击「+」号新建页面后，这里并没有像飞书一样把推荐使用哪些模板作为一个弹窗打断用户，而是直接进入到新页面的编辑流程，光标聚焦到标题，整个过程更加自然。给用户的预期还是直接新建页面，当用户在右侧浏览到有很多丰富的模板时，如果有需求便会主动地去触发使用。
Confluence Cloud 附带了 100+个模板，覆盖了非常多的主题，如人力资源、软件开发、团队合作、项目规划等。这些模板帮助能够用户制作精美有效的页面内容。并且模板预览的交互也非常轻量，不需要再次跳转或者打开弹窗去中断用户的操作行为，而是直接鼠标悬停便能预览模板的详情。
关于读写分离，看起来是和语雀类似的，把读和写区分为两种场景。语雀考虑的更多的是希望对作者来说，他的写能够在一种平静又沉浸的一个创作环境中，他能够无所顾虑的写。而读者他能够放心的去阅读。然后在这两个体验之间，用一个“发布/更新”的动作来实现连接。这个发布让作者更加有仪式感，这个动作告诉作者，你的内容将交给读者，由读者来阅读。
而 Confluence 的考虑更多的应该是基于团队协同的办公场景。期望团队中被大家看到的的文档也应该是一个相对稳定或者是被审阅过后的版本，即通过「发布」这个行为来进行确认。
在编辑页面时，进行的更改会自动保存并同步，以便编辑这个页面的所有人都能看到。不过，只有在您发布后，查看页面的人才会看到这些更改。您每次发布更改时，Confluence 会启动页面的一个新版本，并将它存储在版本历史记录中。这样，用户可以跟踪不同时间的更改，并在需要时轻松恢复到以前的版本。
Confluence 支持非常可插入的区块，点击「+」或者输入「/」，通过下拉菜单可以展示一些常用的区块，在「查看更多」内，可以显示所有支持插入的区块，并且还有一个专门的应用市场可以去安装更多的应用，例如可以安装 Mind Maps ，在 Confluence 中就可以直接绘制思维导图。
基于读写分离的设计理念。Confluence 也区分草稿和已发布的页面。创建了新页面后，在未发布之前它会以草稿形式存在，直到发布为止。草稿不会出现在其他成员的页面树、动态订阅源或搜索结果中（一经发布，页面便会出现在所有这些位置，除非它带有加密的标识）。发布、关闭、更多组成了一个按钮组，在「更多」内也可以对进行其他的发布操作，例如发布但不通知关注者、安排发布的时间等。
每个页面都可以设置单独的页面权限，例如允许任何人都可以查看和编辑、只有某些人可以查看或编辑等。整体权限配置的交互操作也是比较符合由大到小的权限配置原则，先配置总的三大权限类型，再在小的权限类型中可以细化，例如邀请不同的人，给予不同的查看或编辑权限。
Confluence 的顶部工具栏和右侧的发布、查找、协同功能是放在同一行功能区域里，同时也可以看到并没有把太多的工具都平铺出来，而是把一些相对常用的工具平铺出来，不常用的工具则隐藏到「更多」里。相对腾讯文档、语雀、石墨这类型的产品，顶部能够节省一行空间，在保留工具栏常显的基础上，整体显得更加简洁。
图片的缩放不像常见的文档工具那样随意缩放，容易缩放出各种大小不一的图片，Confluence 的图片缩放会基于特定的栅格参考线，鼠标在参考线的附近释放会自动吸附，并缩放至相应的大小，这样就能够在一定程度上限制整篇文档的图片大小的种类，使图片的排版也更加精美。
左上角的面包屑层级不易默认显示全部出来，而是会默认将中间省略，优先显示第一个和最后一个层级节点。这个细节可以体现在产品设计的策略，并不会一股脑的把所有信息都展示给用户，而是优先展示相对重要的信息，隐藏会省略此药的信息，当用户想要关注的时候，也能够很方便的进行触发。
鼠标悬停至 Confluence 的标题出，会显示可以添加表情符号。通过适时隐藏的方式，当鼠标经过时才出现，避免常驻显示给用户带来的干扰。内置了很多表情，团队内部可以确认表情使用的规则，便可以帮助用户更快速地对文档的类型做出识别和判断。
Confluence 支持给页面添加自定义的状态，例如计划中、草稿、正在进行、随时可以查看等，同时状态的设置除了基本的文本外，还支持用户自定义状态的颜色，让其他成员在阅读文档的时候，可以很直观地了解到当前这篇文档的状态，便于团队协同和管理。
Confluence 的表格支持设置标题行，当页面滚动至表头不在正常可视范围时，会自动将表头进行固定悬浮，让用户能够看清楚下面的内容和标题的对应关系，体验非常自然顺畅。除了设置标题行，也支持设置编号列，同理也是可以在横向滚动表格的时候，能够便捷的浏览对应的编号。
在表格中框选单元格后，会在右上角出现对于单元格的更多操作设置，例如设置单元格背景色、合并/拆分单元格等。将这些对于单元格的设置直接外露出来，其他的一些文档工具有的是需要右键才触发，略显隐蔽，有的虽然也是浮动工具栏的形式，但是框选文本和框选单元格的触发区分不明确，操作体验上欠佳。Confluence 中这种表格交互的方式很好的解决了一些表格中的交互问题，使用体验上也非常流畅。
Confluence 中的分栏设置也是内置了几种固定的栏数和布局百分比，基本上能够兼容绝大部分场景，同时做出限制也能够让整体页面的分栏效果不会因为参差不齐而显得凌乱。调节的方式也非常便捷，所有关于区块的调整方式都是位于区块的下方调整。
目前市面上主流的在线文档工具绝大部份都是实时保存的，不过难免会有一些用户会有数据丢失的焦虑。为解决这种用户焦虑，Confluence 会在页面的顶部出现保存的状态提示，告知用户刚刚编辑的数据正在保存、已保存等，避免用户担心编辑的内容没有保存而引发的焦虑情况。
关于无障碍设计的一个小亮点，对于因视觉障碍而使用屏幕朗读起的用户，如果遇到图片，便无法被朗读器识别，这个时候就可以使用替代文本的功能，当朗读器朗读到某张图片时，可以将图片转化为编辑者所设置好的替代文本，这样就能够通过替代文本的方式帮助有视觉障碍的用户理解内容。
在点击页面归档时弹出来的弹窗，发现右上角的「关闭」错位到弹窗外部了，一个非常明显的线上 BUG 。
一部分区块在拖拽的时候，只会讲区块的名称带上，缺少即将移动到的目标位置的交互反馈。
创建空间的时候，可以发现创建空间的弹窗与外面的其他页面的视觉样式差异很多，明显看起来就不是一套设计样式。推测是因为有比较久远的历史设计债务问题，导致目前整体产品内存在一些页面的视觉样式格格不入。
在体验 Confluence 的过程中，不知道是不是因为笔者没有找到功能的原因，发现 Confluence 没有国内一些文档工具都有的目录锚点功能（如果大家有发现的话，可以告诉我 ），虽然可以通过插入目录索引来实现，但是这个目录只是实现一个跳转，并不能将目录固定在页面的左侧或右侧显示。并且这个目录只能在页面的查看态才能看到，在编辑态的时候无法预览目录，导致在整理这篇文章的时候，经常要上下滚动翻看，略显麻烦。
总体来讲，Confluence 是非常强大的团队知识管理工具，它覆盖了非常全面的团队协同场景，国内很多文档产品的设计都会借鉴 Confluence 中的一些设计策略和设计理念。本文只是依据日常使用场景测试出的一些小模块，功能体验也还有非常多的可取之处。
由于时间和篇幅有限，本文关于 Confluence 的设计拆解中存在的疏误之处还望大家给与指正，欢迎大家一起学习和讨论。
参考链接：
https://www.woshipm.com/pd/4836001.html
https://zhuanlan.zhihu.com/p/105877523
作者：波波 Bobby He ；深耕 B端体验设计，持续学习输出中。
本文由 @波波Bobby He 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
信在学校的你都有这样的体验，临近考试，必然要疯狂的“背诵”、“速记”，否则成绩单就要挂零，因为答题卡全部涂抹并不能得高分。
那么毕业多年的你，没有了考试，有没有一丝怀念涂答题卡的时候，有没有好奇这个答题卡到底如何制作，成绩表到底如何为每位同学定制动态生成的。
其实，这些都要归功于“报表”工具。
学校每年都会打印很多的学生成绩单，往往因为新增的课程和不同的教学体系，导致想要的结果复杂且多变。那么如何使用一个工具就可以灵活的制作各种各样报表，面对多变的场景，十分重要。
（答题卡）
上图就是我们制作出来的一个答题卡报表，而且它可以根据学生数量批量加载学生的信息数据，然后直接生成并且供我们打印。那它的优势也就显而易见了，自己设计的答题卡，题型和题量都可以自己来选择，灵活多变，且可以根据不同题型自己随意更新，也可以增加很多默认数据，毕竟自己设计打印的肯定也比购买的便宜。
有些人可能就想说，自己做是不是很麻烦，而且也不会用，学起来是不是还很吃力。小编就可以自信地说了，作为手残党的我也可以很快制作的，但是上限却很高，随着越发深入的使用，带来的经验肯定也是越多。当你熟练制作了后，还可以关注更多的功能，不仅仅是制作显示出来，更美观、更多的功能才是我们的追求。
就比如下面这个报表，只需要简单的几步就可以实现。而且效果还不错。
（最终效果展示）
首先我们要设计对应的报表，下面是报表设计的整体界面：
在左侧是我们需要使用的组件，也就是设计报表需要的元素，中间就是显示，最右侧可以控制一些属性设置和指定数据。这么一看就很清晰了，我们其实简单的拖拽就可以实现所需要的报表设计，简单方便，设计好之后可以导出下载都可以。光说这些肯定还是不够的，那么接下来就直接上实例：
当我们统计学校不同学院的毕业信息时，可能需要根据从系统中查到数据然后拿出来，之后在自己计算所需要的数据，然后在在Excel表中一点一点的去写，特别时数据多点，我们的工作人员可能就会因为一张表而制作一整天。毕竟制作Excel表的痛苦大家应该都知道吧，那用wyn产品怎么实现的，手残党福利来了：
只需要简单的绑定需要的数据，然后把要显示的直接拖到页面上，然后写几个表达式。完成，可能本来一天的工作量，现在几个小时就OK了，是不是很诱惑啊。可以看下面两个图，第一个是设计界面，第二个是预览成果。
（设计界面）
（表格展示）
没错，就是简单的绑定这么几列数据，然后他就会根据我们数据源有的数据进行自动计算，自动扩展行展示。是不是很简单。
那么答题卡的样子上面大家已经看到了，那有人问了，我们学生人很多啊，我不可能真的一个一个设计吧，就算只是一直复制粘贴，也很费时间。那在怎么解决呢，很简单这里只要绑定好数据的话，设置按人的分组，那他就会自动加载所有学生的了，而且对应的信息也对对应过来，这个时候我们打印就可以批量打印，并且不同学生显示不同信息。这种场景其实也可以应用在很多场景下，比如打印学生的准考证，学生的成绩单等等，其实都是需要批量打印的，那用这个产品就可以实现相同模板的批量打印。
除了教师使用的，当然也有学生使用的啦，就比如我们最常见的成绩单。
那么针对不同学生我们需要的是不同的成绩单，那这里就有个需求就是不同学生看不同的信息，自己查询自己的成绩单，自己打印自己的成绩单，那其实就像当于一个筛选。针对多变且不同的课程，往往很复杂，不同学生信息不同怎么办，那么使用wyn产品的就可以设计统一的样式，然后我们通过参数筛选，就可以筛选出来自己的信息。比如我们通过学号查询自己的成绩单，就可以实现如下图：
（学号筛选）
接下来给大家来点干货分享，如何使用前端报表控件ARJS通过拖拉拽实现大学成绩绩效表的设计。
1、 首先我们来解析下这张报表
该表主要分为三个部分:
表头：也是就是学生基础信息，包括学习：姓名、学院、专业、学号、班级、学历、毕业证号
（学生信息）
明细部分：显示大学四年的考试绩效成绩，包含学期、课程名称、学分、成绩
明细部分你自己看发现其实是三个相同的模块
（模块细分）
表尾部分：表尾部分主要是学分的统计、平均成绩、平均绩点
（表尾部分）
2、 拆分完这张表之后，那么就可以根据实际需求进行报表的设计
首先给报表添加页眉和页脚，页眉中通过文本框来设置表头需要显示的信息表头和页脚通过文本框来进行表尾的显示设计。
中间内容区域，首先使用表格控件，然后利用表格控件的分组，分组条件根据绑定数据的中的数据字段学年和学期进行分组。
（表设计）
明细内容是三个相同的模块，也就是在一个内容区域显三个相同区域，那么这可以使用报表字段的分栏属性来设置。
（分栏属性设置）
3、 最终设计好的报表设计样式
（最终效果展示）
4、 最终预览结果：
（预览展示）
5、 报表模板
相信能看到这里的小伙伴肯定也已经跃跃欲试了，这里我们为大家提供了多模板可以尝试，欢迎搜索并访问葡萄城官网，了解更多。
*请认真填写需求信息，我们会在24小时内与您取得联系。
