数极客首页

结构、表现、行为分离(搜索)

三层分别

道理很简单,但是要用例子来说分明
也不易。今天优化“搜索”功用
时忽然
想到,这便是个很典型的示范。从头开端
,我普通
会选择如下代码作为搜索录入框原型,以前做的HTML原型都用这个:<input size=15 type=”text” name=”search_key” style=”color:#bbb;” value=”志号、称号
” onfocus=”if(this.value==’志号、称号
’){this.value=”;this.style.color=’#333333′;}” onblur=”if(this.value==”){this.value=’志号、称号
’;this.style.color=’#bbbbbb’;}” />用文字来描画

交互:默许
淡色#bbbbbb文字提示录入字段,用户点击录入时颜色会加深#333333正常,但当退格删掉所录内容input内值为空时,会恢复淡色默许
提示。如下图:

结构、表现、行为分别(搜索)

产品运用
过程中,常常
经过
定义外层搜索模块.search来传送
控制这个录入框和按钮的展示

效果,如上我还定义了个.text用于统一控制表单的文本录入框如如此从三层分别

的角度看,目前只做到了却

、表现分别

,而结构

、行为是绑到一同
的,并不契合
Web Standard设计思想。改造思绪
是把行为剥离,由于
本站在运用
jQuery类库,因而
思索
用jQuery语句来完成
。经过
name的值search_key做绑定,代码如下:<script type=”text/javascript”/>jQuery(function($){$(‘.search input[name=search_key]‘).focus(function(){if($.trim(this.value)===’志号、称号
’){this.value=”;$(this).addClass(‘focus’);}}).blur(function(){if($.trim(this.value)===”){this.value=’志号、称号
’;$(this).removeClass(‘focus’);}});});</script/>剩下的HTML结构

如下,无style也无script很洁净
:<input size=”15″ type=”text” name=”search_key” value=”志号、称号
” />最终
绑定表现,美化是我们的目地,但别忘了还有个基础

请求
是兼容性要好。加分题,思索
在激活录入框时提示,好像
safari阅读
器录入表单的shadow效果,可惜IE不支持。效果和交互如图:到此其实还没完,还有优化余地。比如

阅读
器假如
不支持脚本,触发录入框不能自动清空,固然
不至于功用
失效,但也会给用户构成

困惑。另外,假如
思索
进一步简化,能够
整合或躲藏
按钮回车提交,我思索
“集邮册”用户群没有这么高端。基本

优化准绳
,是一切
功用
表往常

同一水准线,模块化迭代式行进
。来源:源地址:http://blog.jiyouce.com/?p=156给大家引荐
我国新一代大数据用户行为剖析
与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析
用户行为数据和业务数据,能够
自动监测网站、APP、小程序等多种渠道推行
效果剖析
,是增长黑客们必备的互联网数据剖析
软件。数极客支持实时多维剖析
、漏斗剖析
、留存剖析
、途径
剖析
等十大数据剖析
办法
以及APP数据剖析
网站统计网站剖析
小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析
模型,是用户行为剖析
范畴
首款应用定量剖析
与定性剖析
办法
数据剖析
产品

发表评论

评论已关闭。

相关文章