分析Banner设计中为什么要用图形设计的原因

Banner设计中为什么要使用图形设计呢？小编分享的这篇文章为大家详细剖析了banner中的图形设计。

在Banner设计中，经常会使用一些图形，将文字或一些图片框选起来。为什么这样做，其实是无可奈何的。如果我们看一下除Banner之外的图片，几乎很少用图形的，当然有些Banner也不用图形的，都是有原因的，我们可以具体分析一下。

一：艺术图片为什么一般不用图形。

图形的目的就是引起注意，起到一个提示的作用。但是艺术片有它自己的方法。它们一般会使用色彩的明暗或大小等或一些特效来突出他们的主题。因为图形有分隔的作用，会破坏整体效果。再者艺术图片图是第一位的，文字非常少，可以做的很大，况且也不是主题，也就不需要图形框选了。

上面的几幅图，通过颜色的差异，主题的大小，特效的制作，就足以将作者的意图表现出来了，还用图形做什么。比如第一副图的色彩第二副的大手和纯黑背景第三幅的特写第四幅的排列都可以体现主题，其它的就不重要了。这里图形是主题，文字是次要的。

二：Banner为什么喜欢用图形

Banner是一般都是用于产品的宣传，所以不允许使用明暗度来表现，大部分都是比较亮的颜色(也不绝对，一些比如手机相机一类的会使用黑色)，这样就要使用其它方法来表现图片。其二Banner文字较多，文字相对较小，(至少里面经常会出现小字)，所以表现的难度进一步加大。只能使用图形(如三角形.矩形或圆形)来突出主题。这是一种无可奈何的选择。第三Banner人们关心的产品，对整体的艺术效果看得不重，所以可以容忍使用图形。最最重要的是，banner需要文字来解释，文字的重要性远远超过艺术图片。

上图使用方形的原因是框中的四个字太散，不整齐。离开方框会使整个画面乱。

这幅图也是，离开方框，图就是一张烂图。

文字有波浪，不用图形仍然会不整齐。况且文字太小，重视度也不够。

这幅最有意思，利用小旗子本身的框，太有创意了。

这幅一般吧，没什么说的

也是为了是文字的完整性。

圆形是最经典的。

上面几幅图，用什么图形，没有绝对的规律，最重要的是协调。整体协调了，就行。

三：什么时候Banner可以不用图形

如果文字较少，就可以放大，这是可以选用使用也可以选择不使用，第二，如果文字较长，一般不使用图形。因为较长的文字本身就可以提高吸引力。

文字稍大，其实也用了一点框，就是下面的红色。

文字较长，可以不用图形。

也是文字长

文字较大，又是较容易识别的。

文字颜色明亮，背后是黑色，容易识别。

下面这几幅，为什么不使用图形，文字比较长，根本就没有办法使用图形，而且长文字本身就有吸引力，有何必多此一举。

现在的设计师最忌雷同，都会有自己的创意在里面，这样就会出现各种各样的图，不会拘泥与任何的一种格式。

Dreamweaver是一款非常不错的软件设计工具了，如果你碰到在使用 Dreamweaver时 查找和替换窗口不见了我们可以来看看下面的办法。

 

 

 

 

 

 

兼容性通常是指css或js在不同浏览器中是否兼容了，这里我们一起来看看关于怎么进行Web端的兼容性测试吧，具体的步骤细节如下文介绍。

一、兼容性测试的环境
1、兼容性测试：是指测试项目在特定的软件平台上，使用不同的应用软件、不同操作系统在不同的网络环境中正常运行。
2、Web兼容测试的主要类型：常见的操作系统有Windows7、WindowsXP等。用户使用操作系统的类型，决定了我们操作系统平台兼容性测试的操作系统数量，进行操作系统的兼容性测试的主要目的就是保证我们测试的项目在该操作系统下能正常使用。
二、兼容性测试方法：
1、功能点测试：看软件是否满足所需要的功能
2、字符串长度检查：输入超出需求字符串长度内容，看页面是否报错（如：登录密码要求6-20位数字、字母和下划线组成，可设置小于6位或大于20位数字、字母和下划线来验证）
3、字符类型检查:输入制定字符类型以外的类型，看页面是否会报错
4、标点符号检查：输入特殊字符，如：空格、各种引号、回车键，查看系统是否做正确处理
5、中文字符处理：在需要输入中文的地方输入英文字符，看是否会出现乱码或故障
6、信息重复：唯一性检查。输入重复的名字、ID、身份证号等（区分大小写）
7、界面检查：正确性、友好型、一致性和易用性。
我们进行兼容性虽然没办法做到完全的质量保证，但对一个项目来讲兼容性测试却是软件测试中不可缺少的部分。

下面我们来看一篇关于html中表单form的深入分析，希望这篇文章能够让各位深入理解到html中表单form的用法哦。

起因

最近经常在群里看到诸如以下这些问题：

怎么按键盘的Enter键提交表单呢？
移动端怎么聚焦时让键盘变成数字键呢？
移动端如何绑定键盘右下角【提交按钮】事件？
移动端键盘右下角【提交】如果换成【搜索】呢？
针对这些问题分享下我对使用表单的一些建议。

优化前

<ul>
    <li>
        <span>用户名:</span>
        <input type="text" name="username">
    </li>
    <li>
        <span>密码:</span>
        <input type="password" name="password">   
    </li>
    <li>
        <span>搜索词:</span>
        <input type="text" name="key">
    </li>
    <li>
        <span>手机号:</span>
        <input type="text" name="tel">
    </li>
    <li>
        <span>年龄:</span>
        <input type="text" name="age">
    </li>
    <li>
        <span>自我介绍:</span>
        <textarea name="content"></textarea>
    </li>
    <li style="padding-left: 70px">
        <input type="button" value="保存" id="J-save">
    </li>
</ul>

<script>
    $("#J-save").on("click", function () {
        // 验证信息

        // 异步 or 同步提交
        alert("保存中");
    });
</script>

以上代码是常见的表单元素的结构，一般是绑定提交按钮的click事件，然后处理验证用户输入的信息，符合条件后用ajax异步或者某种方式跳转。

也有些fe会套一层form标签，但还是绑定的click事件。

优化点
针对以上的表单元素优化点如下：

始终使用form标签
只要是表单元素始终在元素外层包裹form标签，说好的我们一起手拉手语义化呢？

始终绑定submit事件
不单独的对【提交】按钮绑定click事件，对整个表单绑定submit提交事件，这样可以让整个表单内的文本框获得Enter提交的VIP待遇，并且在移动端中可以让文本框聚焦时键盘的右下角是【前往】。

再加上对表单里元素值的验证+聚焦，可以达到【输入->回车->错误->输入->回车->提交】一气呵成的体验。

这个可以解决上面的问题1、问题3

 

placeholder占位

合理的使用placeholder占位，但要考虑兼容性。兼容方案：

使用value模拟需要注意提交时判断value是否是默认占位的值，比较坑
使用span标签定位显示，需要考虑到直接设置元素值时的触发情况
maxlength
如果已知元素理想的输入长度，不妨设置下元素的最大长度属性，并且兼容性很好哦。从一定程度上避免了用户的误输入，从而提升用户体验。

label
表单元素的描述文字应该使用label标签包裹，并且使用for属性指向表单元素，从而达到点击描述文字可以聚焦文本框的效果，如：

<li>
    <label for="J-username">用户名:</label>
    <input type="text" name="username" id="J-username">
</li>
聚焦时的状态
在文本框聚焦时理论来说应该让用户感知出来，而不是纹丝不动。

聚焦时页面的位置
聚焦时考虑页面滚动到焦点元素的最佳可视范围。

你还需要考虑在移动端中聚焦时页面老跑偏...

表单的异步提交状态
当表单异步提交过程中需要向后端发送数据，可能会经历 提交中、提交出错、提交成功 的状态，还要考虑到提交中再次提交（重复提交）的问题。

比如在提交时设置提交按钮的disabled = true，并且使其变灰，显示【提交中...】是不是更友好些呢？手拉手的问题我就不再说了...

再延伸
考虑到用户网络慢，在用户没有加载完成js时提交了表单
后端原生支持 - 后端即使纯form提交也可以正常的接收
默认阻止 - 在form标签默认阻止onsubmit="return false"，js初始化时处理掉
autocomplete - 根据业务场景判断是否使用自助补全功能，可以在整个表单form添加，也可以在input元素添加
移动端文本聚焦时fixed失效
表单中重置按钮