CN110162291A - 一种网页设计装置 - Google Patents

Abstract

本发明涉及设计技术领域，具体公开了一种网页设计装置，包括第一用户端，第一用户端包括第一显示屏；还包括：第一处理模块，用于获取第一用户的网页设计稿，基于网页设计稿生成若干不同的网页预设稿；遮光模块，包括安装框、顶板和两侧板；灯光模块，固定连接在顶板上，灯光模块与第一处理模块信号连接；其中，网页预设稿之间颜色的色度不同；当第一显示屏显示网页预设稿时，第一处理模块还用于根据显示的不同网页预设稿调节灯光模块的光照亮度和第一显示屏的屏幕亮度；第一处理模块还用于获取第一用户调整后的网页预设稿，将调整后的网页预设稿标记为网页输出稿。采用本发明的技术方案能提高网页的展示效果。

Description

一种网页设计装置

技术领域

本发明涉及设计技术领域，特别涉及一种网页设计装置。

背景技术

网页设计是根据企业要求向浏览者传递信息(包括产品、服务、理念和文化等)，进行网站功能策划，然后进行页面设计美化的工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。网页设计一般分为三种大类:功能型网页设计(服务网站设计技术B/S软件用户端)、形象型网页设计(品牌形象站)、信息型网页设计(门户站)。设计网页的目的不同，应选择不同的网页策划与设计方案。网页设计的工作目标，是通过使用更合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的试听感受。

现有的用于网页设计的显示屏，例如电脑显示屏，会定期做色彩校正，以显示准确的亮度和色温等。设计人员使用色彩准确的显示屏设计出网页设计稿后，需要呈现给用户。但是用户用于浏览网页的显示屏千差万别，例如各种品牌的电脑显示屏、各种品牌的手机屏幕或者各种品牌的平板电脑屏幕，它们的显示效果千差万别；即使同一款显示屏，在不同亮度下的显示效果也不尽相同。设计人员精心制作了一个网页，在色彩准确的显示屏上显示效果很惊艳，到了用户的显示屏上，显示效果就可能大打折扣，这很影响用户的浏览体验。

为此，需要一种能提高网页展示效果的网页设计装置。

发明内容

本发明的目的在于提供一种网页设计装置，以提高网页的展示效果。

为解决上述技术问题，本发明技术方案如下：

一种网页设计装置，包括第一用户端，第一用户端包括第一显示屏；还包括：

第一处理模块，用于获取第一用户的网页设计稿，基于网页设计稿生成若干不同的网页预设稿；

遮光模块，包括安装框、顶板和两侧板，安装框与第一显示屏固定连接，顶板与安装框的顶部固定连接，两侧板对称固定连接在安装框的两侧；

灯光模块，固定连接在顶板上，灯光模块与第一处理模块信号连接；

其中，网页预设稿之间颜色的色度不同；当第一显示屏显示网页预设稿时，第一处理模块还用于根据显示的不同网页预设稿调节灯光模块的光照亮度和第一显示屏的屏幕亮度；第一处理模块还用于获取第一用户调整后的网页预设稿，将调整后的网页预设稿标记为网页输出稿。

基础方案原理及有益效果如下：

设计人员在使用第一显示屏时，由于环境光和杂散光直接射到第一显示屏的表面，会影响到设计人员对显示屏色彩的正确感知，为此需要对环境光进行屏蔽，使用顶板和两侧板对外部光线进行屏蔽，可以防止外部光线的影响。

当第一用户，也就是设计人员设计出了网页设计稿后，第一处理模块基于网页设计稿生成若干色度不同的网页预设稿；相比与一版网页设计稿，第一处理模块生成的若干版网页预设稿可以用于适应更多的显示环境，以在不同的显示环境中，达到良好的显示效果。但是网页预设稿是自动生成，可能色度上会有较大的偏差，此时，第一显示屏在显示网页预设稿时，第一处理模块根据显示的不同网页预设稿调节灯光模块的光照亮度和第一显示屏的屏幕亮度，以模拟实际的显示环境，让设计人员可以根据模拟的实际显示环境对色度进行调整，得到网页输出稿。通过自动和人工两步的调整，生成的多个网页输出稿与原始的网页设计稿相比，能提高网页的显示效果。

进一步，还包括第二用户端，第二用户端包括第二处理模块和第二显示屏，当第二处理模块接收到加载网页输出稿的指令时，第二处理模块获取第二显示屏的屏幕亮度，基于第二显示屏的屏幕亮度加载对应的网页输出稿。

当第二用户，也就是使用者通过第二用户端浏览网页时，第二处理模块会接收到加载网页输出稿的指令，第二处理模块获取第二显示屏的屏幕亮度，基于屏幕亮度加载对应的网页输出稿，使使用者浏览的网页输出稿能契合当前的屏幕亮度，达到更好的显示效果。

进一步，色度包括饱和度和对比度。

通过饱和度和对比度进行调整，能更好的呈现色彩，达到良好的显示效果。

进一步，第一处理模块生成的网页预设稿的数量为4-6个，相邻网页预设稿之间的饱和度和对比度差值均为1％-5％。

将差值定为1％-5％能避免过大的差值导致的偏色或色彩失真。

进一步，第一处理模块将第一显示屏的屏幕亮度分为若干个与网页预设稿数量相同的档位，每一档位之间的屏幕亮度差为5-20Nit；

当第一显示屏从饱和度和对比度最低的网页预设稿开始，按饱和度和对比度升序切换不同的网页预设稿时，第一处理模块从第一显示屏屏幕亮度最高的档位开始，降序切换屏幕亮度。

即，较低饱和度和对比度的网页预设稿对应较高的屏幕亮度；当屏幕亮度较高时，对眼睛的刺激性大，配合较低的饱和度和对比度，能避免颜色对眼睛造成过大的刺激，让颜色更为温和，让使用者感觉舒适。较高饱和度和对比度的网页预设稿对应较低的屏幕亮度；在屏幕亮度较低时，色彩容易显得暗淡，提高饱和度和对比度能避免这一情况发生，提高网页预设稿在低屏幕亮度情况下的显示效果。

进一步，第一处理模块将灯光模块的光照亮度分为若干个档位，光照亮度档位的数量是屏幕亮度档位数量的1/2；当第一显示屏从饱和度和对比度最低的网页预设稿开始，按饱和度和对比度升序切换不同的网页预设稿时，第一处理模块从灯光模块光照亮度最高的档位开始，降序切换光照亮度。

即，较高的光照亮度对应较高的屏幕亮度，较低的饱和度和对比度的网页预设稿。在日常使用中，调高屏幕亮度主要是因为环境光太亮，在较低的屏幕亮度下无法看清屏幕中显示的内容；此时较高的光照亮度可以模拟环境光太亮的情况。当屏幕亮度较低，这样的情况常出现在夜晚，没有环境光的时候；本方案中，光照亮度档位的数量是屏幕亮度档位数量的1/2，即，当屏幕亮度较低时，没有光照亮度档位来对应，也就是通过不打开灯光模块来模拟不开灯的情况。本方案能有效模拟实际使用场景的光照，帮助设计人员更好的对网页预设稿进行调整。

进一步，安装框包括一体成型的横框和分别位于横框两端的两竖框；横框底部沿长度方向开设有横槽；两竖框正对的一侧开设有竖槽；顶板与横框固定连接，两侧板分别与两竖框固定连接；第一显示屏的顶边嵌入横槽内，第一显示屏的侧边嵌入竖槽内。

设置横槽和竖槽，能方便将遮光模块安装到第一显示屏上。

进一步，灯光模块包括LED灯。

与普通灯泡相比，LED灯的色温可以准确控制，能避免色温不准对设计产生干扰。

进一步，第一显示屏为电脑屏幕。

虽然IPAD也能做网页设计，但是目前主流的还是用电脑屏幕作网页设计，第一显示屏采用电脑屏幕符合实际情况。

进一步，第二显示屏为手机屏幕。

手机作为移动设备，使用场景不固定，在不同使用场景下，外部的光线在不断变化，屏幕亮度也在不断变化，本方案在手机屏幕上使用频率高，效果突出。

附图说明

图1为一种网页设计装置实施例中遮光模块的立体图。

具体实施方式

下面通过具体实施方式进一步详细说明：

说明书附图中的附图标记包括：安装框1、顶板2、侧板3。

实施例

一种网页设计装置，包括第一用户端和第二用户端。第一用户端包括第一显示屏、第一处理模块、遮光模块和灯光模块。

第一处理模块用于获取第一用户的网页设计稿，基于网页设计稿生成若干网页预设稿；网页预设稿的数量为4-6个，本实施例中为6个。6个网页预设稿之间色彩的饱和度和对比度依次增加，增加的幅度为1％-5％，本实施例中增加的幅度为3％。具体的，6个网页预设稿按照饱和度和对比度的值升序分别标记为第一网页预设稿、第二网页预设稿、第三网页预设稿、第四网页预设稿、第五网页预设稿和第六网页预设稿。其中网页设计稿的饱和度和对比度位于第三网页预设稿、第四网页预设稿的饱和度和对比度之间。本实施例中，第一处理模块采用英特尔酷睿i9-9900K处理器。

如图1所示，遮光模块包括安装框1、顶板2和两侧板3。安装框1包括一体成型的横框和分别位于横框两端的两竖框；横框底部沿长度方向开设有横槽；两竖框正对的一侧开设有竖槽。当安装框1竖直安装到第一显示屏上时，第一显示屏的顶边嵌入横槽内，第一显示屏的侧边嵌入竖槽内。顶板2水平设置，顶板2一端与横框焊接，两侧板3竖直设置，两侧板3的一端分别与两竖框焊接。本实施例中，第一屏幕采用电脑屏幕，具体为戴尔U2718Q显示器，其能做到99％的sRGB覆盖率。

灯光模块包括LED灯，LED灯螺钉连接在顶板2的下表面，灯光模块与第一处理模块信号连接。本实施例中，第一处理模块安装在主板上，灯光模块通过USB连接线与主板连接。

第一处理模块将第一显示屏的亮度分为与网页预设稿数量相同的档位，本实施例中为6档，每一档位之间的亮度差为5-20Nit，本实施例中采用20Nit。6个档位按照亮度的升序分别标记为第一档、第二档、第三档、第四档、第五档和第六档；其中第一显示屏的标准亮度位于第三档和第四档之间。

第一处理模块将LED灯的亮度分3个档位，3个档位按照亮度升序分别标记为第一亮度、第二亮度和第三亮度；本实施例中第一亮度为15％的最大亮度，第二亮度为50％的最大亮度，第三亮度为100％的最大亮度。

网页预设稿与显示屏亮度和LED灯亮度的对应关系如下表所示：

也就是说，当第一显示屏从第一网页预设稿开始升序切换不同饱和度和对比度的网页预设稿时，第一处理模块从第一显示屏亮度的第六档开始，降序切换第一显示屏的亮度档位；同时，第一处理模块还从LED灯的第三亮度开始，降序切换LED灯的亮度档位。实际应用中，第一用户可以随意切换网页预设稿，第一处理模块均按照上表的对应关系切换第一显示屏和LED灯的亮度。

第一用户在调整网页预设稿之后，第一处理模块还用于获取第一用户调整后的网页预设稿，将调整后的网页预设稿标记为网页输出稿。具体的，第一用户调整第一网页预设稿之后，第一处理模块将调整后的第一网页预设稿标记为第一网页输出稿；其他的网页预设稿标记方式以此类推，这里不再赘述。

第二用户端包括第二处理模块和第二显示屏，当第二用户通过第二显示屏浏览网页时，第二处理模块用于获取第二显示屏的屏幕亮度，基于第二显示屏的屏幕亮度加载对应的网页输出稿。具体的，第二处理模块将第二显示屏的屏幕亮度由高到低，平均分为与网页预设稿的数量相同的若干个亮度区间，本实施例中，具体为6个亮度区间，分别标记为第一亮度区间、第二亮度区间、第三亮度区间、第四亮度区间、第五亮度区间和第六亮度区间。本实施例中，第二屏幕为手机屏幕，第二处理模块采用麒麟980处理器。

网页输出稿与亮度区间的对应关系如下表所示：

基于网页设计装置，本实施例还提供一种网页设计方法，包括如下步骤：

S1，获取网页设计稿

S2，基于网页设计稿生成若干适应不同屏幕亮度的网页预设稿；

S3，当第一显示屏显示网页预设稿时，基于网页预设稿切换第一显示屏的屏幕亮度和灯光模块的光照亮度；

S4，获取调整后和网页预设稿，将网页预设稿标记为网页输出稿；

S5，获取第二显示屏的屏幕亮度；

S6，根据第二显示屏的屏幕亮度输出对应的网页输出稿。

以上所述的仅是本发明的实施例，方案中公知的具体结构及特性等常识在此未作过多描述。应当指出，对于本领域的技术人员来说，在不脱离本发明结构的前提下，还可以作出若干变形和改进，这些也应该视为本发明的保护范围，这些都不会影响本发明实施的效果和专利的实用性。本申请要求的保护范围应当以其权利要求的内容为准，说明书中的具体实施方式等记载可以用于解释权利要求的内容。

Claims (10)

1.一种网页设计装置，其特征在于，包括第一用户端，第一用户端包括第一显示屏；还包括：

第一处理模块，用于获取第一用户的网页设计稿，基于网页设计稿生成若干不同的网页预设稿；

遮光模块，包括安装框、顶板和两侧板，安装框与第一显示屏固定连接，顶板与安装框的顶部固定连接，两侧板对称固定连接在安装框的两侧；

灯光模块，固定连接在顶板上，灯光模块与第一处理模块信号连接；

其中，网页预设稿之间颜色的色度不同；当第一显示屏显示网页预设稿时，第一处理模块还用于根据显示的不同网页预设稿调节灯光模块的光照亮度和第一显示屏的屏幕亮度；第一处理模块还用于获取第一用户调整后的网页预设稿，将调整后的网页预设稿标记为网页输出稿。

2.根据权利要求1所述的一种网页设计装置，其特征在于：还包括第二用户端，第二用户端包括第二处理模块和第二显示屏，当第二处理模块接收到加载网页输出稿的指令时，第二处理模块获取第二显示屏的屏幕亮度，基于第二显示屏的屏幕亮度加载对应的网页输出稿。

3.根据权利要求1所述的一种网页设计装置，其特征在于：色度包括饱和度和对比度。

4.根据权利要求3所述的一种网页设计装置，其特征在于：第一处理模块生成的网页预设稿的数量为4-6个，相邻网页预设稿之间的饱和度和对比度差值均为1％-5％。

5.根据权利要求4所述的一种网页设计装置，其特征在于：第一处理模块将第一显示屏的屏幕亮度分为若干个与网页预设稿数量相同的档位，每一档位之间的屏幕亮度差为5-20Nit；

当第一显示屏从饱和度和对比度最低的网页预设稿开始，按饱和度和对比度升序切换不同的网页预设稿时，第一处理模块从第一显示屏屏幕亮度最高的档位开始，降序切换屏幕亮度。

6.根据权利要求5所述的一种网页设计装置，其特征在于：第一处理模块将灯光模块的光照亮度分为若干个档位，光照亮度档位的数量是屏幕亮度档位数量的1/2；当第一显示屏从饱和度和对比度最低的网页预设稿开始，按饱和度和对比度升序切换不同的网页预设稿时，第一处理模块从灯光模块光照亮度最高的档位开始，降序切换光照亮度。

7.根据权利要求1所述的一种网页设计装置，其特征在于：安装框包括一体成型的横框和分别位于横框两端的两竖框；横框底部沿长度方向开设有横槽；两竖框正对的一侧开设有竖槽；顶板与横框固定连接，两侧板分别与两竖框固定连接；第一显示屏的顶边嵌入横槽内，第一显示屏的侧边嵌入竖槽内。

8.根据权利要求1所述的一种网页设计装置，其特征在于：灯光模块包括LED灯。

9.根据权利要求1所述的一种网页设计装置，其特征在于：第一显示屏为电脑屏幕。

10.根据权利要求2所述的一种网页设计装置，其特征在于：第二显示屏为手机屏幕。