标梵互动UE实验室

互联营销与技术互动整合平台

view more

说句心里话,这5种常见的设计模式还是挺闹心的

123

针对常见的需求或者问题,设计师常常会使用现有的、成型的解决方案,这也就是我们常说的用户体验设计模式。这些模式化的设计套路之所以为广大设计师所喜爱,很大程度上是因为它们具备有良好的可用性和可访问性,在转化率和用户留存率上有着不错的数据表现。但是,这些通过数据来体现的设计模式,在用户的视角里,可能并不那么理想,甚至是非常恼人的存在。

作为用户体验设计师,有意识地获取用户反馈,并重新审视已有和已用的设计模式,进行合理的修改、调整,才能够让自己的产品和用户都从中受益。 Read more

下个阶段的设计师,为什么光做界面肯定是不行的?

69b7d63agy1fhfn1d9viuj20rs0fmwnp​​​

王镇雷:刚做设计的时候,师傅教我们设计师不要过多的影响业务,把专业的事交给专业的人(产品经理/运营)去考虑。举个简单的例子,当设计界面时,我们只确定框架,如这里是一个可以填写文案的区块。但具体里面写什么,表达什么意思,都交给业务去判断,最多参谋参谋用户是否能理解。

就像装修房子一样,房间结构是基础,哪里可以挂画、哪里可以放桌子,这都是很早就确定的。但挂什么风格的画、用什么颜色的墙纸、放什么样的家具,却都由房间真正的主人来决定。

没错,我们并不是真正房子的主人。除了改变内饰,主人甚至还会要求把房子推翻重盖,结构也不是绝对稳固的。

这样只追求表面的设计,我做过很多。那时我认为用户体验设计(UE)需要的是“专业性”——不能拍脑袋做设计、不能想当然,而是要用数据说话、要在规范和框架内设计、要做好用户调研和访谈。我们几乎已经把自己放在了公司这个巨大机器中的一环,真正卖力地去扮演“螺丝钉”的角色。

不过慢慢地,我能嗅到整个环境和公司对设计师的要求在变,当然也可能,是随着工作经验增长,确实在逐渐进入下一个阶段。 Read more

世界上最受欢迎的色彩出炉了,她的名字叫马尔斯绿!

69b7d63agy1fh8ondvcvqj20rs0fm78d

如果说有一种色彩是世界上最受欢迎的色彩,那么它会是什么颜色呢?今天,这个问题的答案出炉了:马尔斯绿(Marrs Green)。

目前这款票选出来的绿色(名字里面带了个Green嘛)介于蓝绿之间,实际上谁也说不清它到底更偏绿还是更偏蓝。不过这并不影响它的历史地位(笑)。

当然,这款绿色并不是随随便便挑出来的。今年在英国Hull所举办的2017年英国城市文化节上,历史悠久的企业 GF Smith 开始邀请人们在网上票选自己最喜欢的色彩,只需要让鼠标悬停在自己喜欢的颜色上就可以投票了。 Read more

前端代码优化,让百度高效识别移动页面

开篇先摘一段新闻《中国智能手机市场6年首现负增长》。

文中指出:“IDC报告显示,2015年第一季度中国手机市场出货量为1.1亿部左右,同比下滑3.7%。其中智能手机市场出货量为1亿部左右,同比下降2.5%。这是过去6年以来,中国智能手机市场第一次出现季度同比下滑的情况。”

这意味这什么呢?

简单说,我国智能机不但普及,且已趋饱和,移动红利即将消耗贻尽。

那对于网站优化人员又意味着什么?

结果上讲,重大网站没有完成移动化需亡羊补牢,中小网站去完成移动化迫在眉睫。

制作出用户体验良好的手机页面只是万事俱备,最为关键的临门一脚是获得搜索引擎的青睐,这样才能得到精准的用户,很多网站拥有PC和移动两套页面,从经验上看,精准、高效地被搜索引擎识别不但促进移动页面的排名和流量获取,对PC页面也有额外的效果加成。

在经历了一轮轮移动H5项目,看过很多移动页面识别和优化的国外文章,更重要的是多次和百度相关人对话和解决问题后,我将一些常见的HTML识别细节总结了两部分,用于促进移动页面被搜索引擎识别、收录,让更多优质流量更早、更多地分发到自己页面。
Read more

网站HTML标签SEO优化标准

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前端知识体系精简

Web前端技术由html、css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍。目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉。

标梵互动

JAVASCRIPT 篇

Read more

MUURI – 响应式、可排序、可拖拽的布局插件

流布局是目前觉的用于图像类布局的展示方式之一,大家所熟悉的就是花瓣、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>
position: absolute, 让margin有效的
设置left:0, right:0 margin: 0 auto; 就可以。原因是2边都是0不存在边距,element就可以得出距离,并居中。

div {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

Read more

如何在限宽的容器中实现全屏效果

在Web布局中,特别是在PC端中,常常可以看到这样的设计风格:内容居中,然后Banner区全屏。这也就是标题所说的效果,限宽的容器中实现全屏效果。那么问题来了,在实际中如何实现在限宽的容器中实现全屏效果。比如下面的设计风格:

作为一名前端开发人员,上图的效果并不陌生。假设我们内容区域是960px,然后水平居中。而其中Banner区域是全屏效果。如下所示:

那么实际开发中以什么方式来做更为方便灵活呢?这就是这篇文章需要介绍的内容。 Read more

移动端拖动 ajax请求数据

// 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.需到此后台看文章源码. 前台被解析了

    Creative design from the South

    Get in touch with us!