针对常见的需求或者问题,设计师常常会使用现有的、成型的解决方案,这也就是我们常说的用户体验设计模式。这些模式化的设计套路之所以为广大设计师所喜爱,很大程度上是因为它们具备有良好的可用性和可访问性,在转化率和用户留存率上有着不错的数据表现。但是,这些通过数据来体现的设计模式,在用户的视角里,可能并不那么理想,甚至是非常恼人的存在。
作为用户体验设计师,有意识地获取用户反馈,并重新审视已有和已用的设计模式,进行合理的修改、调整,才能够让自己的产品和用户都从中受益。 Read more
针对常见的需求或者问题,设计师常常会使用现有的、成型的解决方案,这也就是我们常说的用户体验设计模式。这些模式化的设计套路之所以为广大设计师所喜爱,很大程度上是因为它们具备有良好的可用性和可访问性,在转化率和用户留存率上有着不错的数据表现。但是,这些通过数据来体现的设计模式,在用户的视角里,可能并不那么理想,甚至是非常恼人的存在。
作为用户体验设计师,有意识地获取用户反馈,并重新审视已有和已用的设计模式,进行合理的修改、调整,才能够让自己的产品和用户都从中受益。 Read more
王镇雷:刚做设计的时候,师傅教我们设计师不要过多的影响业务,把专业的事交给专业的人(产品经理/运营)去考虑。举个简单的例子,当设计界面时,我们只确定框架,如这里是一个可以填写文案的区块。但具体里面写什么,表达什么意思,都交给业务去判断,最多参谋参谋用户是否能理解。
就像装修房子一样,房间结构是基础,哪里可以挂画、哪里可以放桌子,这都是很早就确定的。但挂什么风格的画、用什么颜色的墙纸、放什么样的家具,却都由房间真正的主人来决定。
没错,我们并不是真正房子的主人。除了改变内饰,主人甚至还会要求把房子推翻重盖,结构也不是绝对稳固的。
这样只追求表面的设计,我做过很多。那时我认为用户体验设计(UE)需要的是“专业性”——不能拍脑袋做设计、不能想当然,而是要用数据说话、要在规范和框架内设计、要做好用户调研和访谈。我们几乎已经把自己放在了公司这个巨大机器中的一环,真正卖力地去扮演“螺丝钉”的角色。
不过慢慢地,我能嗅到整个环境和公司对设计师的要求在变,当然也可能,是随着工作经验增长,确实在逐渐进入下一个阶段。 Read more
文中指出:“IDC报告显示,2015年第一季度中国手机市场出货量为1.1亿部左右,同比下滑3.7%。其中智能手机市场出货量为1亿部左右,同比下降2.5%。这是过去6年以来,中国智能手机市场第一次出现季度同比下滑的情况。”
这意味这什么呢?
简单说,我国智能机不但普及,且已趋饱和,移动红利即将消耗贻尽。
那对于网站优化人员又意味着什么?
结果上讲,重大网站没有完成移动化需亡羊补牢,中小网站去完成移动化迫在眉睫。
制作出用户体验良好的手机页面只是万事俱备,最为关键的临门一脚是获得搜索引擎的青睐,这样才能得到精准的用户,很多网站拥有PC和移动两套页面,从经验上看,精准、高效地被搜索引擎识别不但促进移动页面的排名和流量获取,对PC页面也有额外的效果加成。
在经历了一轮轮移动H5项目,看过很多移动页面识别和优化的国外文章,更重要的是多次和百度相关人对话和解决问题后,我将一些常见的HTML识别细节总结了两部分,用于促进移动页面被搜索引擎识别、收录,让更多优质流量更早、更多地分发到自己页面。
Read more
H标签:权重依次为h1>H2>H3….类推
—— 在做H标签的时候一定要注意切勿把H标签用在LOGO上面,还有就是注重在页面当中出现的次数,不易过多。
— Strong标签,Em标签,U标签:对于网站而言这三种标签的作用非常类似,它们都是对网页内容当中的重要关键词来进行加强突出,让搜索引擎更为重视。
在常用标签上使用关键词
一个网页的标签很多种,通常会列入排名而且被经常使用的有以下标签:
<title>页面标题</title>
<meta name=”keywords” content=”关键词“ />
<meta name=”description” content=”网站描述“ />
<h1>页面主题主题</h1>
<h2>页面相关性标题</h2>
<h3>页面相关性标题</h3>
…… Read more
Web前端技术由html、css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍。目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉。
流布局是目前觉的用于图像类布局的展示方式之一,大家所熟悉的就是花瓣、Pinterest,而这类布局也有很多,今天主要向大家介绍MUURI,它的特色是支持响应式、排序、筛选以及拖拽布局元素。
下面来看看介绍:
插件名称:MUURI
网站地址:https://haltu.github.io/muuri/ Read more
outline
移除当选中input元素的时候会出现状态线An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
包裹elements 的一个线,一般设置成none 。
div {
outline: none; //一般情况下移除它
// outline: 5px dotted red; 也可以设置样式
}
contenteditable
设置element是否可编辑<p contenteditable="true">可编辑</p>
可以通过input, blur事件来监听element的输入和输入完后鼠标离开。
webkit-playsinline
手机video 都可以在页面中播放,而不是全屏播放了。
<video src="test.mp4" webkit-playsinline="true"></video>
设置left:0, right:0 margin: 0 auto; 就可以。原因是2边都是0不存在边距,element就可以得出距离,并居中。
div {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
在Web布局中,特别是在PC端中,常常可以看到这样的设计风格:内容居中,然后Banner区全屏。这也就是标题所说的效果,限宽的容器中实现全屏效果。那么问题来了,在实际中如何实现在限宽的容器中实现全屏效果。比如下面的设计风格:
作为一名前端开发人员,上图的效果并不陌生。假设我们内容区域是960px
,然后水平居中。而其中Banner区域是全屏效果。如下所示:
那么实际开发中以什么方式来做更为方便灵活呢?这就是这篇文章需要介绍的内容。 Read more
// action 部分
public function send(){ $p=isset($_POST['k'])?intval(trim($_POST['k'])):0; $db=M('news'); $total=$db->count();//数据记录总数 $num=10;//每页记录数 $totalpage=ceil($total/$num);//总计页数 $limitpage=($p-1)*$num;//每次查询取记录 $data=$db->limit($limitpage,$num)->order('id asc')->select(); foreach($data as $k=>$v){ $data[$k]['createtime']=date('Y-m-d',$v['createtime']); } if(count($data)>0){ $this->ajaxReturn($data,'ok',$totalpage); }else{ if($p>$totalpage){ $this->ajaxReturn($data,'fail',0); } } }
// js 部分
$(function(){ var p=2; $('.view').dropload({ scrollArea : window, loadDownFn : function(me){ $.ajax({ type: 'post', url: "{:U('News/send')}", data:{k:p}, dataType: 'json', success: function(data){ var result =''; if(data.info == "ok"){ for(var i = 0; i < data.data.length; i++){ result +='' +'
“‘+data.data[i].title+'”
‘
+’
'; } $('.list').append(result); me.resetload(); }else if (data.info == "fail"){ $('.list').append("
"); setTimeout(function(){ me.resetload(); $('.no-data').html(''); },2000); } }, error: function(xhr, type){ alert('ajax data error!') } }); p++; } }); });
// html 部分
<div class=”view”>
<ul class=”list normal-list clearfix”>
<volist name=”list” id=”vo”>
<li class=”fl”>
<?php if($vo[‘litpic’]!=”) { ?>
<img src=”<?php echo $vo[‘litpic’];?>” alt=”{$vo.title}”/>
<?php
}else{
?>
<img src=”/Public/App/images/img.jpg” />
<?php }
?>
<p>{$vo.title}</p>
</li>
</volist>
</ul>
</div>
1.需要jQ库
2.需要dropload插件.下载地址:dropload
3.需到此后台看文章源码. 前台被解析了