复工后的一段工作

因为疫情，2020年是一个较为特殊的一年，特别是对于湖北武汉来说。4月份公司就复工了，因为种种原因，我选择骑车上下班，戴着口罩骑车虽然呼吸会有点儿困难，但还是可以适应的。4月工作总结，封面以单车元素为主吧！

大屏设计

大屏设计是首次接触到，以前实习做过车载HMI，后来PC端和移动端界面做得比较多。对于大屏设计不算陌生，平时设计交流群里面也有做这个的设计师，只是自己在工作中没有做过。刚接到任务时，让我犯难的问题是设计图尺寸我该做多大！百度上有一堆关于这个的资料，但具体用哪个？我不敢轻易下决定。因为这里可能存在单纯的大屏、拼接屏、定制大屏等等。

与产品经理沟通了实际使用场景后， 得知我们现在做的大屏数据展示界面是在电脑中投到大屏电视中展示所用的，那么可以排除拼接屏和定制大屏的可能性。如果是常规比例的电视大屏，一般是16:9的比例，这个比例正好与1920*1080的设计图尺寸比例相符。电视大屏分辨率一般是比较高的，可能是2K，可能是4K，那么按照1920*1080的尺寸作为设计图尺寸，在最终开发成形，投屏到大屏中就是一个等比放大的过程。经过在公司试验，投屏后的清晰度并没有影响到视觉效果和阅读效果。当然，如果投屏所用的显示器分辨率较高，建议设计图也使用高分辨率，做到1:1的效果当然是最好的。

需要注意的是，在电脑上大屏展示是什么样子的，那么在投屏后显示的也是什么样子的。听着像是废话，但这是真的得注意的。多与前端开发同事沟通，千万要保证电脑一屏可以显示整个界面，无需滚动。否则，在投屏后出现上下滚动的情况是非常糟糕的，至少作为数据展示，还需要上下甚至左右滚动来查看数据信息，是很不好的体验。

最后，需要确定，被投屏显示器需要与电脑显示比例保持一致，保持一致，保持一致。如果，比例不一致，界面中的内容在投屏后很有可能会变形，如圆形压扁这种情况。原则上来说，首先要确保投屏上的显示是正常的。

图片来源于网络，非实际项目图

表单

表单是平常使用频率很高数据录入工具组，今天主要记录一下工作中遇到的一个问题，就是输入框类的表单应该如何排版布局。

输入框类的表单主要由两个部分组成：标签(标题)、输入框。而输入框类的表单的差异性主要在于标签文字的位置，最为常见的是标签在输入框左边；在移动端中还会出现标签在输入框内部的情况(因为空间问题)；还有一种标签在输入框顶部的情况。哪种情况更好？答：没有好与坏，只有合理与不合理。这是我个人对设计的理解，没有好与坏，只有合理与不合理。

左标签、顶部标签、内部标签

实际工作中，可以发现标签在左边的情况用得比较多，或许这与人们认知中的表单是一样的吧。左标签的情况，我一直以来都在思考对齐这个问题。标签文字到底是左边对齐，还是右边对齐？左边对齐，右边会出现参差不齐的情况；右边对齐，左边会出现参差不齐的情况，从此，陷入无限的纠结中。在表单较多的情况下，我知道常用的做法是标签文字右对齐，输入框左对齐。还有一种优化方案是标签文字两端对齐，对于文字只有两个的标签，中间空出相应的距离即可。在4月份的工作中，我发现此方案并不是很好，因为标签文字较多的时候会出现6个字，这种情况并不多，但作为一种极限情况，我不得不考虑进去。

B端产品，表单使用频率很高、很高、很高，有时候在表单数量较多的时候，显得页面非常混乱。若标签文字在2~4个字的时候，我会使用左标签的形式，且标签文字两端对齐，但是我始终放心不下极限情况6个字的标签。我想到了移动端中，出现过顶部标签的情况，在移动端屏幕空间有限，左标签的表单一定会占用右边输入框的空间，但是顶部标签在移动端中不适合表单数量较多的情况，因为这样会拉长页面，用户在填写表单的时候还得上下滑动查看之前所填内容。但是在PC端中就不一样了，我们有足够的屏幕空间，如果表单使用顶部标签，那么每个标签之间是不是就有了一个统一的左对齐，无需考虑标签文字数量。

注：以上表单仅为示例效果，非实际设计图

表单中，标签文字数量能够控制在2~4个字，可以选择使用较为常见的左标签式的输入框表单，标签文字需两端对齐。如果，真的是因为需求问题，标签文字没法儿删减，就是出现6个字的情况，请考虑顶部标签形式的输入框表单，注意亲密性原则，把握好上下的距离关系。最后，在移动端中少用左标签形式的输入框表单。