在线
客服

在线客服
尊敬的客户,我们24小时竭诚为您服务 公司总机: 0755-83312037 (32条线)

客服
热线

0755-83312037 (32条线)
7*24小时客服服务热线

?

关注
微信

关注官方微信

返回
顶部

17

2018-05
HTML标签语义和HTML标签语义化的设计

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">一个网页就好像是一栋房子,HTML结构就是一面面的墙,而标签则是一块块的砖,砖要摆放有序,整整齐齐,墙才会牢固。最后css则是装饰材料,美不美就靠她了。因此,我们要有一个优秀的网页,既要提供一个干净而又有清晰结构的HTML,更加离不开css的极致美化。</font> </td> </tr></tbody></table> <p sizset="false" sizcache06854236741271188="19 19 519">前段时间,在网上浏览时,发现国内几家互联网巨头公司的前端开发招聘题目,依然都提到一个<strong>标签语义化</strong>的问题,这个话题在已经是老生常谈了,但依旧问题多多,归结于一个习惯吧,有时间我也太懒,没有多加考虑就直接写代码,我知道我错了!童鞋们,我们得让标签语义化成为一种习惯!今天就再普及一下标签语义化,也鞭策下自己,别整天迷迷糊糊的!</p> <p>在网页设计中,我们时常都会听到标签语义化这个名词,HTML标签语义化的设计思维其实就是给某块内容用上一个最恰当最合适的标签,这样一来,不管是谁都能看懂这块内容是什么。</p> <p sizset="false" sizcache06854236741271188="19 19 520">一个网页就好像是一栋房子,HTML结构就是一面面的墙,而标签则是一块块的砖,砖要摆放有序,整整齐齐,墙才会牢固。最后css则是装饰材料,美不美就靠她了。因此,我们要有一个优秀的网页,既要提供一个干净而又有清晰结构的HTML,更加离不开css的极致美化。</p> <p>从上面也说明标签语义化极其重要,HTML每个标签都有自己的语义,都有自己适用的范围。但往往会被我们忽略或者被我们滥用,举个例子:在一个页面中&lt;div&gt;用了几十个甚至上百个,这是个无意义的标签,只是表示一个层而已,非常不利于后期的维护;而&lt;table&gt;标签则是一个数据标签,该用的时候,我们就要大胆使用。</p> <h4>标签语义化的好处</h4> <p>让你使用标签语义化的理由可以有无数条:</p> <ol> <li>去掉样式或者样式丢失时页面结构依然清晰分明 </li> <li>移动设备能够更加完美的展示你的网页(移动设备对css的支持较弱) </li> <li>阅读器会根据标签的语义自动解析,呈现更容易阅读的内容形式(无障碍阅读) </li> <li>搜索引擎会根据标签的语义确定上下文和权重问题 </li> <li>便于后期的开发以及维护,团队合作效率提高 </li> <li>…… </li> </ol> <h4>HTML标签语义汇总</h4> <p>为了更快更好的运用标签语义化,下面的表单列出了所有的HTML标签以及标签的描述。以下列表按字母顺序排列,其中 <span style="color: blue;">new</span>&#160;:为 HTML5 中的新标签。</p> <table border="1" cellspacing="0"><tbody> <tr> <th width="30%" height="26">标签</th> <th height="26">描述</th> </tr> <tr> <td height="26">&lt;!&#8211;…&#8211;&gt;</td> <td height="26">定义注释。</td> </tr> <tr> <td height="26">&lt;!DOCTYPE&gt;</td> <td height="26">定义文档类型。</td> </tr> <tr> <td height="26">&lt;a&gt;</td> <td height="26">定义超链接。</td> </tr> <tr> <td height="26">&lt;abbr&gt;</td> <td height="26">定义缩写。</td> </tr> <tr> <td height="26">&lt;acronym&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义首字母缩写。</td> </tr> <tr> <td height="26">&lt;address&gt;</td> <td height="26">定义地址元素。</td> </tr> <tr> <td height="26">&lt;applet&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义 applet。</td> </tr> <tr> <td height="26">&lt;area&gt;</td> <td height="26">定义图像映射中的区域。</td> </tr> <tr> <td height="26" class="html5_new">&lt;article&gt;</td> <td height="26">定义 article。</td> </tr> <tr> <td height="26" class="html5_new">&lt;aside&gt;</td> <td height="26">定义页面内容之外的内容。</td> </tr> <tr> <td height="26" class="html5_new">&lt;audio&gt;</td> <td height="26">定义声音内容。</td> </tr> <tr> <td height="26">&lt;b&gt;</td> <td height="26">定义粗体文本。</td> </tr> <tr> <td height="26">&lt;base&gt;</td> <td height="26">定义页面中所有链接的基准 URL。</td> </tr> <tr> <td height="26">&lt;basefont&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>请使用 CSS 代替。</td> </tr> <tr> <td height="26" class="html5_new">&lt;bdi&gt;</td> <td height="26">定义文本的文本方向,使其脱离其周围文本的方向设置。</td> </tr> <tr> <td height="26">&lt;bdo&gt;</td> <td height="26">定义文本显示的方向。</td> </tr> <tr> <td height="26">&lt;big&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义大号文本。</td> </tr> <tr> <td height="26">&lt;blockquote&gt;</td> <td height="26">定义长的引用。</td> </tr> <tr> <td height="26">&lt;body&gt;</td> <td height="26">定义 body 元素。</td> </tr> <tr> <td height="26">&lt;br&gt;</td> <td height="26">插入换行符。</td> </tr> <tr> <td height="26">&lt;button&gt;</td> <td height="26">定义按钮。</td> </tr> <tr> <td height="26" class="html5_new">&lt;canvas&gt;</td> <td height="26">定义图形。</td> </tr> <tr> <td height="26">&lt;caption&gt;</td> <td height="26">定义表格标题。</td> </tr> <tr> <td height="26">&lt;center&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义居中的文本。</td> </tr> <tr> <td height="26">&lt;cite&gt;</td> <td height="26">定义引用。</td> </tr> <tr> <td height="26">&lt;code&gt;</td> <td height="26">定义计算机代码文本。</td> </tr> <tr> <td height="26">&lt;col&gt;</td> <td height="26">定义表格列的属性。</td> </tr> <tr> <td height="26">&lt;colgroup&gt;</td> <td height="26">定义表格列的分组。</td> </tr> <tr> <td height="26" class="html5_new">&lt;command&gt;</td> <td height="26">定义命令按钮。</td> </tr> <tr> <td height="26" class="html5_new">&lt;datalist&gt;</td> <td height="26">定义下拉列表。</td> </tr> <tr> <td height="26">&lt;dd&gt;</td> <td height="26">定义定义的描述。</td> </tr> <tr> <td height="26">&lt;del&gt;</td> <td height="26">定义删除文本。</td> </tr> <tr> <td height="26" class="html5_new">&lt;details&gt;</td> <td height="26">定义元素的细节。</td> </tr> <tr> <td height="26">&lt;dfn&gt;</td> <td height="26">定义定义项目。</td> </tr> <tr> <td height="26">&lt;dir&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义目录列表。</td> </tr> <tr> <td height="26">&lt;div&gt;</td> <td height="26">定义文档中的一个部分。</td> </tr> <tr> <td height="26">&lt;dl&gt;</td> <td height="26">定义定义列表。</td> </tr> <tr> <td height="26">&lt;dt&gt;</td> <td height="26">定义定义的项目。</td> </tr> <tr> <td height="26">&lt;em&gt;</td> <td height="26">定义强调文本。</td> </tr> <tr> <td height="26" class="html5_new">&lt;embed&gt;</td> <td height="26">定义外部交互内容或插件。</td> </tr> <tr> <td height="26">&lt;fieldset&gt;</td> <td height="26">定义 fieldset。</td> </tr> <tr> <td height="26" class="html5_new">&lt;figcaption&gt;</td> <td height="26">定义 figure 元素的标题。</td> </tr> <tr> <td height="26" class="html5_new">&lt;figure&gt;</td> <td height="26">定义媒介内容的分组,以及它们的标题。</td> </tr> <tr> <td height="26">&lt;font&gt;</td> <td height="26"><span class="deprecated">HTML 5 中不支持。</span></td> </tr> <tr> <td height="26" class="html5_new">&lt;footer&gt;</td> <td height="26">定义 section 或 page 的页脚。</td> </tr> <tr> <td height="26">&lt;form&gt;</td> <td height="26">定义表单。</td> </tr> <tr> <td height="26">&lt;frame&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义子窗口(框架)。</td> </tr> <tr> <td height="26">&lt;frameset&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义框架的集。</td> </tr> <tr> <td height="26">&lt;h1&gt; to &lt;h6&gt;</td> <td height="26">定义标题 1 到标题 6。</td> </tr> <tr> <td height="26">&lt;head&gt;</td> <td height="26">定义关于文档的信息。</td> </tr> <tr> <td height="26" class="html5_new">&lt;header&gt;</td> <td height="26">定义 section 或 page 的页眉。</td> </tr> <tr> <td height="26" class="html5_new">&lt;hgroup&gt;</td> <td height="26">定义有关文档中的 section 的信息。</td> </tr> <tr> <td height="26">&lt;hr&gt;</td> <td height="26">定义水平线。</td> </tr> <tr> <td height="26">&lt;html&gt;</td> <td height="26">定义 html 文档。</td> </tr> <tr> <td height="26">&lt;i&gt;</td> <td height="26">定义斜体文本。</td> </tr> <tr> <td height="26">&lt;iframe&gt;</td> <td height="26">定义行内的子窗口(框架)。</td> </tr> <tr> <td height="26">&lt;img&gt;</td> <td height="26">定义图像。</td> </tr> <tr> <td height="26">&lt;input&gt;</td> <td height="26">定义输入域。</td> </tr> <tr> <td height="26">&lt;ins&gt;</td> <td height="26">定义插入文本。</td> </tr> <tr> <td height="26" class="html5_new">&lt;keygen&gt;</td> <td height="26">定义生成密钥。</td> </tr> <tr> <td height="26">&lt;isindex&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义单行的输入域。</td> </tr> <tr> <td height="26">&lt;kbd&gt;</td> <td height="26">定义键盘文本。</td> </tr> <tr> <td height="26">&lt;label&gt;</td> <td height="26">定义表单控件的标注。</td> </tr> <tr> <td height="26">&lt;legend&gt;</td> <td height="26">定义 fieldset 中的标题。</td> </tr> <tr> <td height="26">&lt;li&gt;</td> <td height="26">定义列表的项目。</td> </tr> <tr> <td height="26">&lt;link&gt;</td> <td height="26">定义资源引用。</td> </tr> <tr> <td height="26">&lt;map&gt;</td> <td height="26">定义图像映射。</td> </tr> <tr> <td height="26" class="html5_new">&lt;mark&gt;</td> <td height="26">定义有记号的文本。</td> </tr> <tr> <td height="26">&lt;menu&gt;</td> <td height="26">定义菜单列表。</td> </tr> <tr> <td height="26">&lt;meta&gt;</td> <td height="26">定义元信息。</td> </tr> <tr> <td height="26" class="html5_new">&lt;meter&gt;</td> <td height="26">定义预定义范围内的度量。</td> </tr> <tr> <td height="26" class="html5_new">&lt;nav&gt;</td> <td height="26">定义导航链接。</td> </tr> <tr> <td height="26">&lt;noframes&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义 noframe 部分。</td> </tr> <tr> <td height="26">&lt;noscript&gt;</td> <td height="26">定义 noscript 部分。</td> </tr> <tr> <td height="26">&lt;object&gt;</td> <td height="26">定义嵌入对象。</td> </tr> <tr> <td height="26">&lt;ol&gt;</td> <td height="26">定义有序列表。</td> </tr> <tr> <td height="26">&lt;optgroup&gt;</td> <td height="26">定义选项组。</td> </tr> <tr> <td height="26">&lt;option&gt;</td> <td height="26">定义下拉列表中的选项。</td> </tr> <tr> <td height="26" class="html5_new">&lt;output&gt;</td> <td height="26">定义输出的一些类型。</td> </tr> <tr> <td height="26">&lt;p&gt;</td> <td height="26">定义段落。</td> </tr> <tr> <td height="26">&lt;param&gt;</td> <td height="26">为对象定义参数。</td> </tr> <tr> <td height="26">&lt;pre&gt;</td> <td height="26">定义预格式化文本。</td> </tr> <tr> <td height="26" class="html5_new">&lt;progress&gt;</td> <td height="26">定义任何类型的任务的进度。</td> </tr> <tr> <td height="26">&lt;q&gt;</td> <td height="26">定义短的引用。</td> </tr> <tr> <td height="26" class="html5_new">&lt;rp&gt;</td> <td height="26">定义若浏览器不支持 ruby 元素显示的内容。</td> </tr> <tr> <td height="26" class="html5_new">&lt;rt&gt;</td> <td height="26">定义 ruby 注释的解释。</td> </tr> <tr> <td height="26" class="html5_new">&lt;ruby&gt;</td> <td height="26">定义 ruby 注释。</td> </tr> <tr> <td height="26">&lt;s&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义加删除线的文本。</td> </tr> <tr> <td height="26">&lt;samp&gt;</td> <td height="26">定义样本计算机代码。</td> </tr> <tr> <td height="26">&lt;script&gt;</td> <td height="26">定义脚本。</td> </tr> <tr> <td height="26" class="html5_new">&lt;section&gt;</td> <td height="26">定义 section。</td> </tr> <tr> <td height="26">&lt;select&gt;</td> <td height="26">定义可选列表。</td> </tr> <tr> <td height="26">&lt;small&gt;</td> <td height="26">将旁注 (side comments) 呈现为小型文本。</td> </tr> <tr> <td height="26" class="html5_new">&lt;source&gt;</td> <td height="26">定义媒介源。</td> </tr> <tr> <td height="26">&lt;span&gt;</td> <td height="26">定义文档中的 section。</td> </tr> <tr> <td height="26">&lt;strike&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义加删除线的文本。</td> </tr> <tr> <td height="26">&lt;strong&gt;</td> <td height="26">定义强调文本。</td> </tr> <tr> <td height="26">&lt;style&gt;</td> <td height="26">定义样式定义。</td> </tr> <tr> <td height="26">&lt;sub&gt;</td> <td height="26">定义下标文本。</td> </tr> <tr> <td height="26" class="html5_new">&lt;summary&gt;</td> <td height="26">定义 details 元素的标题。</td> </tr> <tr> <td height="26">&lt;sup&gt;</td> <td height="26">定义上标文本。</td> </tr> <tr> <td height="26">&lt;table&gt;</td> <td height="26">定义表格。</td> </tr> <tr> <td height="26">&lt;tbody&gt;</td> <td height="26">定义表格的主体。</td> </tr> <tr> <td height="26">&lt;td&gt;</td> <td height="26">定义表格单元。</td> </tr> <tr> <td height="26">&lt;textarea&gt;</td> <td height="26">定义 textarea。</td> </tr> <tr> <td height="26">&lt;tfoot&gt;</td> <td height="26">定义表格的脚注。</td> </tr> <tr> <td height="26">&lt;th&gt;</td> <td height="26">定义表头。</td> </tr> <tr> <td height="26">&lt;thead&gt;</td> <td height="26">定义表头。</td> </tr> <tr> <td height="26" class="html5_new">&lt;time&gt;</td> <td height="26">定义日期/时间。</td> </tr> <tr> <td height="26">&lt;title&gt;</td> <td height="26">定义文档的标题。</td> </tr> <tr> <td height="26">&lt;tr&gt;</td> <td height="26">定义表格行。</td> </tr> <tr> <td height="26" class="html5_new">&lt;track&gt;</td> <td height="26">定义用在媒体播放器中的文本轨道。</td> </tr> <tr> <td height="26">&lt;tt&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义打字机文本。</td> </tr> <tr> <td height="26">&lt;u&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义下划线文本。</td> </tr> <tr> <td height="26">&lt;ul&gt;</td> <td height="26">定义无序列表。</td> </tr> <tr> <td height="26">&lt;var&gt;</td> <td height="26">定义变量。</td> </tr> <tr> <td height="26" class="html5_new">&lt;video&gt;</td> <td height="26">定义视频。</td> </tr> <tr> <td height="26">&lt;xmp&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义预格式文本。</td> </tr> </tbody></table>

Read more+

17

2018-05
网页表单设计:提高表单可用性的10个技巧

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">填写互联网表单几乎是每个用户每天的经历,如用户进行网站注册和登录、购物等,都需要填写各种表单。用户为了获得想要的东西,表单成了用户完成需求和网站系统需要数据之间的互动形式。那么表单设计的首要目标也更清晰:让用户迅速高效快捷并且轻松地完成填写。</font> </td> </tr></tbody></table> <p sizset="0" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501430.gif"></p> <p>  填写互联网表单几乎是每个用户每天的经历,如用户进行网站注册和登录、购物等,都需要填写各种表单。用户为了获得想要的东西,表单成了用户完成需求和网站系统需要数据之间的互动形式。那么表单设计的首要目标也更清晰:让用户迅速高效快捷并且轻松地完成填写。</p> <p>  设计目标已清晰,那么如何设计表单呢,以下从表单的内容、组织方式、流程、表单元素控件及交互等方面详细阐述。</p> <p><strong>表单的元素</strong></p> <p>  研究如何提高表格可用性之前,我们先简要了解下一般表单的元素,这里我们暂且这么总结:<br>  标签:告诉用户表单问题是什么?<br>  输入框:供给用户填写答案信息;<br>  动作:用户提交表单,即用户点击一个按钮或链接,执行一个操作;<br>  帮助文字:为如何填写表单提供帮助;<br>  输入反馈:针对用户输入给出反馈,输入正确还是错误;</p> <p sizset="1" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501431.gif"></p> <p><strong>提高表单可用性的一些技巧</strong></p> <p><strong>一 信息内容的合理组织</strong></p> <p>  考虑用户填写表单的目的,哪些表单需要填写,去掉没必要的表单项,确定完表单内容。如何组织起来呢?表单项并不是一个个从上到下无序罗列,而是根据表单内容,按照一定的逻辑,经过组织,分成不同的内容组,不同的主题。同时各个逻辑组和同一个主题的表单项,也是按照逻辑顺序或者用户熟悉的模式顺序,使用户浏览和填写自如。如果表单过长时,也可拆解成不同网页,类似于任务拆解,让用户一步步填写。</p> <p>  品牌1.0系统,新建订单时,将表单内容,进行逻辑划分为两个内容组:基本信息(重要/必填)和附加信息 (次要/选填),通过分割线区分内容组,结构清晰,易于浏览。考虑区分内容组时,应当考虑采用较少的视觉信息,过多的视觉信息可能会导致注意力分散,给表单带来大量视觉噪音。</p> <p sizset="2" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501432.gif"></p> <p>  新建百度Union账户,表单内容较长,同时有若干主题,一个网页信息量太大,所以采用多个网页来组织表单,分步骤给用户,提供清晰的路径步骤,即清晰又简单。用户在填写时,提供进程指示,避免紧张和疑惑。</p> <p sizset="3" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501433.gif"></p> <p><strong>二 简化表单 突出重点</strong></p> <p>  根据用户使用数据,适当将使用频次不高、或者提供给专业用户的高级表单项隐藏起来。比如品牌1.0的新建创意表单,90%的人不进行曝光监控链接的填写,那么默认收起,保持表单的简洁,让绝大多数用户快速完成,避免大量的表单给用户的焦虑,而又满足了小众用户的需求。</p> <p sizset="4" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501434.gif"></p> <p><strong>三 清晰的浏览线</strong></p> <p>  思考如何设计表单结构和路径时,需要有个基本原则:由始至终提供清晰的浏览线。采用眼动仪实验即可检验用户的浏览线。如标签的对齐方式、输入框的布局等都影响着用户的浏览线。当提供了垂直单一路径,使用户减少注意力分散,可以迅速对问题作出回答,完成任务所花时间最少。</p> <p>  如下面Etre(www.etre.com)提供的眼动跟踪数据图,表单各个元素构成垂直轴,提供了单一路径,用户有清晰的浏览线,可以迅速对问题做出答复。而另一张图,完成过程变成了弯曲的眼球运动,采用单一路径更容易处理表单问题。</p> <p sizset="5" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501435.gif"></p> <p><strong>四 考虑用户场景 保证主流程顺畅</strong></p> <p>  我们在设计表单时,定义了清晰的线性步骤,但很少真正实现。考虑用户场景,保证主流程不要中断,将导致人们放弃填写的元素解决。例如,招商银行卡号密码的付款流程,分为三项表单步骤:填写银行卡号、填写其他验证信息、支付成功。但在用户填完卡号和其他验证信息后,经常会发现付款额超出每日限额,以前的流程是,用户中断付款流程,不得不新打开一个网页,招行主页 → 网上个人银行登录 → 选择一卡通(输一卡通卡号、查询密码、附加码)登录后→ 网上支付 → 网上支付额度管理调整额度,然后再次重新支付,使用户在两个操作流程中切换,让用户各种折腾。而改版后的设计,可谓十分贴心,给予信息提示的同时,用户可在当前流程设置限额,避免了付款流程的中断,同时大大节省了用户的操作成本。</p> <p sizset="6" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501436.gif"></p> <p>  还有新建广告位时,选择所属频道,如果没有想要的频道,就需要新建频道,增加额外的页面来添加新频道,而在设计时,考虑到用户的此场景,在下拉选择框旁边,增加“新建频道”按钮,为用户提供便捷,减少了新建广告位流程的打断。</p> <p sizset="7" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501437.gif"></p> <p><strong>五 选择合适的标签对齐方式</strong></p> <p>  “输入框标签应该是顶对齐、右对齐、左对齐还是输入框内标签?”是我们在设计表单时最常见的问题。其实业界有很多针对此问题的实验和研究(Matteo Penzo的眼动实验、Luke Wroblewski的Luke Wroblewski’s findings、Vitaly Friedman的web表单设计之注册表单),都表明每种方式有不同的优缺点,根据具体目标等因素具体考虑。</p> <p>  Matteo Penzo的眼动实验发现,顶部标签方式,标签移动到输入框需50毫秒,比左对齐标签方式(500毫秒)快了10倍,比右对齐标签方式(240毫秒)快了5倍左右。</p> <p sizset="8" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501438.gif"></p> <p>  总之,顶部标签方式,填表时间最短。但如果尽量减少垂直面积,可以考虑右对齐方式。如果希望用户填表时认真浏览标签,了解仔细考虑表单的每个输入框时,可以采用左对齐方式。</p> <p sizset="9" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501439.gif"></p> <p><strong>六 提供帮助</strong></p> <p>  为了用户快地填写表单,一般在难以理解的表单项增加帮助信息,引导用户成功填表。帮助信息,提示用户应该如何填写,常见的帮助,一般在标签或者输入框旁提供帮助文字,交互方式也有一直展现(即一直出现在输入框右侧、下方或输入框内)、即时帮助(即激活输入框时,帮助文字自动出现)、用户激活的即时帮助(即帮助信息默认不显示、用户鼠标悬浮触发帮助图标来显示帮助)、用户激活的区域帮助(将表单所有的帮助信息统一放在一个位置)等多种方式。其实可以考虑更多的方式来更好地帮助用户,例如经常见到的信用卡有效期填写,当用户激活输入框时,右侧出现可视化的帮助信息,更简洁直观,更好理解。</p> <p sizset="10" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/15014310.gif"></p> <p><strong>七 智能默认</strong></p> <p>  网络表单中有很多地方能利用智能默认减少必要的选择和输入次数,加速表单完成过程。一般通过恰当设置满足大多数人需要的默认选择和数值,推送默认每个人都相同。还有个性化默认方式,它与表单对象相关。如京东购买的订单信息,智能默认与个人相关,不需要表单输入,默认之前的收货地址信息、支付配送方式、发票信息等,符合用户的需求习惯,同时避免了重复输入的成本。品牌1.0的新建广告设置,96%的用户折扣率为所属订单的折扣率,但又要满足KA用户修改广告折扣率的需求,所以输入框预置默认为订单折扣率,加速绝大多数用户的表单填写。</p> <p sizset="11" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/15014311.gif"></p> <p><strong>八 即时反馈验证</strong></p> <p>  虽然设计表单时,保证表单的内容结构清晰,提供有意义的输入帮助,但总有些答案不止一个。此时,直接反馈有助于再次确保人们的回答有效,提供即时校验。即时验证分为多类反馈:确认输入合适、建议有效回答、核对输入信息,通过实时更新设计以帮助用户控制在必要的限制范围内。这类反馈通常发生在用户在输入框开始、继续输入或者停止输入的时候。</p> <p>  如在设置密码时,要求用户输入字符数有限制、字符类型有限制的密码,利用即时验证,不仅告诉用户输入的密码是否有效,是否合格,而不是填完所有表单,提交之后,才告我密码需要修改,同时还能说明密码的安全程度,采用高度可视化方式让用户衡量密码质量。</p> <p>  直接反馈不仅限于确认所提供的答案,还能提供输入建议。用户在搜索时,搜索框能够在输入过程中自动补全、提供相关联的搜索建议,既可以避免用户输入出错,又可以节约用户的拼写时间(这一点在手机端更加需要)。</p> <p><strong>九 额外输入</strong></p> <p>  额外输入可以提供更多选项或者高级选项,满足有需要的用户,同时不妨碍许需要的用户。如图不到10%的用户会填写一个以上的曝光监控链接,这类用户可以选择点击“添加”按钮来进行更多的输入,即时增加并不阻碍完成任务。</p> <p sizset="12" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/15014312.gif"></p> <p><strong>十 其它方法</strong></p> <p>  如果用户填写的表单与已有表单的表单项大多数相同,为避免用户重复的输入,提供复制导入表单数据功能,用户只需修改少量数据即可。</p> <p>  将重点信息或者难以理解的信息可视化,清晰有效地传达与沟通信息,形成高效的功能、使用映射,使用户高效完成任务目标。如将广告管家1.0选择创意模版,表格列表形式清晰,但用户理解成本和选择判断成本较大;新方案默认缩略图形式,强调对创意的直观,一图胜千言,用户选择较高效。</p> <p sizset="13" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/15014313.gif"></p> <p>  除以上方法,还有一些主动作和次动作的差异、采用垂直或水平选项卡、采用叠层等方法。当用户在填写表单时,他们希望尽可能快的完成任务。因此十分有必要将表单设计得清晰和整齐。</p> <p><strong>后续</strong></p> <p>  随着科技的发展,语音智能、拍照及传感器等新技术的出现,这些必定会对表单设计打开新的思路。也可能以后人们不通过表单形式,直接通过声音、眼神等完成与系统互动,表单或许更加弱化或消失。</p> <p>参考资料</p> <p>http://www.etre.com</p> <p>http://www.lukew.com/ff/entry.asp?1502</p> <p>http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/Luke Wroblewski 《Web Form Design: Filling in the Blanks》</p>

Read more+

17

2018-05
javascript网页轮播图优化增强用户体验

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">利用前端技术驱动用户体验的文章较少,希望通过这篇文章给大家带来新的视角与思考,最终目的是希望用户能有更好的体验。</font> </td> </tr></tbody></table> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'><img style="padding: 4px; border-radius: 4px; border: 1px solid rgb(221, 221, 221); max-width: 800px; box-shadow: 0px 0px 4px rgb(238,238,238);" alt="null" src="http://www.webjx.com/files/allimg/130806/1631420.jpg"></p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>Hua:最近对网站轮播图做了一些优化,虽然它看似简单,但从用户角度去思考,却能得到有趣的体验。<br>轮播图对于很多网站必不可少,它在有限空间展示更多内容,并且可以利用炫目的切换效果吸引用户,以下是一些知名网站截图:</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'><img style="padding: 4px; border-radius: 4px; border: 1px solid rgb(221, 221, 221); max-width: 800px; box-shadow: 0px 0px 4px rgb(238,238,238);" alt="null" src="http://www.webjx.com/files/allimg/130806/1631421.jpg"><br><img style="padding: 4px; border-radius: 4px; border: 1px solid rgb(221, 221, 221); max-width: 800px; box-shadow: 0px 0px 4px rgb(238,238,238);" alt="null" src="http://www.webjx.com/files/allimg/130806/1631422.jpg"></p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>利用前端技术javascript制作轮播图并不难,首先要实现3个基本功能:</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>1、图片按照一定时间间隔循环播放;<br>2、数字导航随图片一起循环;<br>3、数字导航控制图片展示;</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>体验后是不是觉得不爽,比如鼠标移进图片刚想看清楚细节时却跳到下张,是的,这非常伤害用户感情。如何解决,原理很简单,鼠标移进图片暂停轮播,鼠标移出恢复轮播。<br>虽然很多网站早已实现该功能,但是无一例外存在一个问题&#8212;&#8212;鼠标移出图片时,仍然需要等待几秒钟才会跳到下一张,这种体验合理吗?从用户角度,当用户看完后,鼠标移出图片,合理的逻辑应该是立即跳到下张;从产品或者运营角度,他们也希望用户能够看到更多的广告图。</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>有些网站的轮播图尺寸往往比较大,特别是电商网站,为了吸引用户眼球,制造欢乐气氛,这些都是合理的。但是轮播图变大,其占据首屏的空间就会变大,当用户在页面进行操作时,可能会不小心滑过图片,然后又滑出图片,这个过程极为短暂,如果这时立即响应对应方法导致页面发生或者不发生变化,会给用户带来困惑甚至不便。比如用户在一段时间内误滑进滑出轮播图多次,导致轮播图响应暂停,一直停留在固定图片上,这会让用户感觉轮播失效。</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>所以需要对这种情况给出容错机制,也就是延迟响应,如果发现用户只是瞬间移过,则不响应,就像鼠标从来没有经过图片;当鼠标在图片停留到一定时间,则认为用户的确是要看图片,对应方法才会响应,这个延迟时间一般认为不要低于200ms。</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>综上所诉,要实现的增强体验功能有两点:</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>4、鼠标移上图片暂停,移出图片后立即跳到下张图片并继续轮播;<br>5、鼠标经过延迟响应;</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>吐槽了那么多,来看看代码,非前端同学可能会以为实现上述两个功能要许多代码,实际只有短短几行:</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'><img style="padding: 4px; border-radius: 4px; border: 1px solid rgb(221, 221, 221); max-width: 800px; box-shadow: 0px 0px 4px rgb(238,238,238);" alt="null" src="http://www.webjx.com/files/allimg/130806/1631423.jpg"></p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>虽然代码不多,但还是有一些基本技巧,比如红框处布尔值控制是延时功能关键。<br>写到这里,用户体验貌似还算可以,那还有没有优化空间呢?!<br>中国的网速在世界上排名较后,甚至很多地方网速还在1M左右,提高低网速用户体验同样重要。按需加载轮播图便是方法之一,当跳到对应图片,才下载所需图片,这是加快图片显示和节省流量的不二法则。但是任何事物都有两面性,有利便有弊,看图:</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'><img style="padding: 4px; border-radius: 4px; border: 1px solid rgb(221, 221, 221); max-width: 800px; box-shadow: 0px 0px 4px rgb(238,238,238);" alt="null" src="http://www.webjx.com/files/allimg/130806/1631424.jpg"></p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>这应该是经常看到的画面,图片加载过程暴露在用户面前,这在低网速下尤为明显。弥补这一缺陷的方法也很简单&#8212;&#8212;图片预加载并且在加载时给出等待图标提示,继续看图:</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'><img style="padding: 4px; border-radius: 4px; border: 1px solid rgb(221, 221, 221); max-width: 800px; box-shadow: 0px 0px 4px rgb(238,238,238);" alt="null" src="http://www.webjx.com/files/allimg/130806/1631425.jpg"></p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>预加载可以使图片一次性完整展示,而不会暴露加载过程,从而给用户合理预期。<br>最后实现的两个增强体验如下:</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>6、图片按需加载;<br>7、图片预加载并且在加载过程给出等待图标提示。<br>同学可以点击这里体验增强版轮播图效果。</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>利用前端技术驱动用户体验的文章较少,希望通过这篇文章给大家带来新的视角与思考,最终目的是希望用户能有更好的体验。</p>

Read more+

17

2018-05
HTML5 MAKER:在线制作banner生成工具

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">这里我们介绍一个可以在线制作HTML5动画banner生成工具,内置多个常用用的动画效果,像FLASH的渐变、滑动、模糊这些效果都非常流畅。</font> </td> </tr></tbody></table> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>HTML5动画已经流行一段时间,但是作为设计师,很难懂这些代码,不过没关系,这里我们介绍一个可以在线制作HTML5动画banner生成工具,内置多个常用用的动画效果,像FLASH的渐变、滑动、模糊这些效果都非常流畅。</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'><img style="padding: 4px; border-radius: 4px; border: 1px solid rgb(221, 221, 221); max-width: 800px; box-shadow: 0px 0px 4px rgb(238,238,238);" alt="null" src="http://www.webjx.com/files/allimg/130902/2014510.png"></p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'><strong style="color: rgb(220, 37, 35); font-size: 16px;">右戳体验神器→<span class="Apple-converted-space">&#160;</span></strong><a style="color: rgb(40, 71, 144); text-decoration: underline;" href="http://html5maker.com/" target="_blank">html5maker</a></p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>使用这个HTML5 MAKER来设计banner比用FLASH还要简单,一般的效果我们已经够用,不过也是有据点的,就是语言支持问题,还未支持中文啊。<br>对于HTML5,国内还未成熟,但是如果用于做英文站的朋友可以尝试使用,因为国外的CSS3、HTML5已经普及。</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'><img style="padding: 4px; border-radius: 4px; border: 1px solid rgb(221, 221, 221); max-width: 800px; box-shadow: 0px 0px 4px rgb(238,238,238);" alt="null" src="http://www.webjx.com/files/allimg/130902/2014511.jpg"></p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>网站上内置了一些banner模板,大家可以使用它来修改你的banner。</p>

Read more+

17

2018-05
HTML5这盘棋:HTML5到底将给企业带来什么?

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介:</font><font color="#000000">HTML5将给企业带来什么?</font> </td> </tr></tbody></table> <p style='font: 14px/26px Arial, sans-serif, "Microsoft YaHei", 微软雅黑; margin: 12px 0px 10px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>HTML5 是近年来互联网行业的热门词汇,火的很。微软 IE 产品总经理发文: 未来的网络属于 HTML5。乔布斯生前也在公开信《Flash 之我见》中预言:像 HTML5 这样在移动时代中创立的新标准,将会在移动设备上获得胜利。更有人高调宣称“APP 将在几年内灭亡,HTML5 取而代之”。怪吓人的。</p> <p style='font: 14px/26px Arial, sans-serif, "Microsoft YaHei", 微软雅黑; margin: 12px 0px 10px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>这么革命性的东西,不能只是技术宅们的那杯茶,在商业应用上也该有所作为。更具体些:HTML5 到底将给企业带来什么?本文中我们做了如下探讨:</p> <h3 style='margin: 0px; padding: 15px 0px 0px; text-align: left; color: rgb(51, 51, 51); text-transform: none; line-height: normal; text-indent: 0px; letter-spacing: normal; font-family: "Microsoft YaHei", "SimHei "; font-size: 14px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>一、改变企业网络广告的模式与分布</h3> <p style='font: 14px/26px Arial, sans-serif, "Microsoft YaHei", 微软雅黑; margin: 12px 0px 10px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>广告是企业网络营销的主要方式之一。十几年来,无论是展示还是互动,基本被 Adobe Flash 所主宰。然而,HTML5 网页的多媒体特性、三维、图形及特效,超炫的浏览体验,使得 HTML5 不仅在电脑浏览器上可以呈现令人惊叹的效果,在移动设备上更加表现不凡。而苹果将 Flash 拒之门外,起了推波助澜的作用。</p> <p style='font: 14px/26px Arial, sans-serif, "Microsoft YaHei", 微软雅黑; margin: 12px 0px 10px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>敏锐的网站所有者已经意识到 HTML5 将成为网络广告的新宠,因为 Flash 能做的事情,HTML5 也可以做到,而且做得更好。未来,企业网络广告的模式和分布将因 HTML5 而改变, Flash 广告将逐步被 HTML5 所替代。而更多更丰富的互联网广告也会在移动端涌现。</p> <h3 style='margin: 0px; padding: 15px 0px 0px; text-align: left; color: rgb(51, 51, 51); text-transform: none; line-height: normal; text-indent: 0px; letter-spacing: normal; font-family: "Microsoft YaHei", "SimHei "; font-size: 14px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>二、传统企业IT应用移动化</h3> <p style='font: 14px/26px Arial, sans-serif, "Microsoft YaHei", 微软雅黑; margin: 12px 0px 10px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>如今,办公室里充斥着大量移动智能终端, BYOD(员工自带设备办公)将是个趋势。毕竟谁都愿意拿最称手的工具干活。但国内大多数的企业级 IT 应用仍然部署在电脑上,而且仅限于 Windows。将这些传统应用重构代码,以原生应用的形式移植到<span class="wp_keywordlink_affiliate">移动平台</span>上绝不是一件容易的事情。HTML5 标准相对规范,部署简单,势必将引发传统企业 IT 应用移动化的趋势。在国外,有以色列的Gizmox公司做这个事,帮企业把传统 IT 应用转为 HTML5 应用,获得了 Atlas Venture 领投的 750 万美元融资。</p> <h3 style='margin: 0px; padding: 15px 0px 0px; text-align: left; color: rgb(51, 51, 51); text-transform: none; line-height: normal; text-indent: 0px; letter-spacing: normal; font-family: "Microsoft YaHei", "SimHei "; font-size: 14px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>三、帮助企业构建应用平台</h3> <p style='font: 14px/26px Arial, sans-serif, "Microsoft YaHei", 微软雅黑; margin: 12px 0px 10px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>HTML5 与移动互联网现在如胶如漆。HTML5 具有的本地存储功能、设备兼容性、地理位置信息等特性,非常适用于移动开发。“自适应网页设计”,可使每个网页自动适应不同的屏幕,根据屏幕大小自动调整布局。因此,移动开发者们如获至宝,HTML5 被广泛使用于手机网站中。</p> <p style='font: 14px/26px Arial, sans-serif, "Microsoft YaHei", 微软雅黑; margin: 12px 0px 10px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>但企业能得到的绝不仅仅是个手机网站。借助 HTML5,企业可以构建 Web APP 应用平台。除了展示品牌形象,还可以集成微信、微博、短信、在线客服、CRM 系统等多平台接口,将数据汇聚,形成移动端的统一入口。进一步扩展出互动营销、会员管理乃至移动商城等复杂应用。再与内部系统打通……嗯,齐活了。</p> <p style='font: 14px/26px Arial, sans-serif, "Microsoft YaHei", 微软雅黑; margin: 12px 0px 10px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>总之,HTML5 这盘棋海了去了,商业应用刚开个了头。这里有不少细分市场,足够滋养一大堆 to B 公司。尤其是上面讲的第三点,如果能解决标准化问题,涌现一两家企业级移动服务的巨头,也算不上让小伙伴们惊呆的事。</p>

Read more+