What Frog&Ikea’s design tell me?

catge Post in Design,Tags: ,
0

About a week ago, Our UED team attended Frog’s Design show in ShangHai. We also went to Ikea for Shopping after that. Here, I’d like to share my acquisition about this activity.

Our team leader had arranged a homework for us, that was think about the three questions below:

  • How to confirm product demand at the collection phase?
  • How to design around user experience at the concept design phase?
  • How to make a design users like at the detailed design phase, and realize it with zero distortion?

Here are my answers get from Frog&Ikea’s design:

HOW TO CONFIRM DEMAND?

  • Users are the real demander, the more they write down their demand, the further we can understand and design.
  • Add we designer’s idea.
  • Close your eyes, image if your works match demand or not.

CLOSE TO THE SILVER BULLET

  • Offer your design a scientific basis, ensure it makes user feel comfortable.
  • Make it looks attractive.
  • Add your smell&branding to let people know you.

REALIZE YOUR DESIGN

  • Draw a map and find out shortcuts about project procedures & design cycle.
  • Design as simple as possible, simple is power.
  • Think more for demander,such as attach related demand.
  • Design acceptable & high-quality design, teach user to use.

I have made a keynote file for this, Here you can download its PDF vesion. Welcome discussion.

原创JAVASCRIPT小游戏贪吃蛇详解

catge Post in Design,Tags: ,
2

在火车上,为了打发时间,我开始了写JS小游戏的计划。就先从贪吃蛇这种最简单的开始写起吧。

那位用JAVASCRIPT写出超级玛丽的牛人,值得学习。我这里用li标记来模拟红白机中画面的像素点的想法,就是源于此。

贪吃蛇的游戏规则:

  • 吃掉一个食物,蛇长自动+1;
  • 蛇头撞到边缘或蛇身则游戏结束;
  • 用方向键控制移动方向,需要有暂停游戏功能;

主要游戏元素:

  • 蛇;
  • 食物;
  • 舞台;

主要思路及算法:

  • 构造的舞台,很明显是一个固定大小的二维数组;
  • 蛇通过不断吃食物可以改变自身长度,所以应该是一个长度可变的二维数组;
  • 食物、蛇可以出现在整个舞台的任意地方,可以通过改变其坐标值来改变位置;

接下来看一部分代码:

snake.unshift([nextX,nextY])
if(aLi[nextX][nextY].className==_options.classFood){
    _createFood();
}else{
    aLi[snake[nSnakeLen][0]][snake[nSnakeLen][1]].className='';
    snake.pop();
}

这部分是整个游戏最核心的代码,snake数组在每次移动的时候,它的第一个节点都会占领这个像素点,所以这个数组就是unshift([蛇头像素点坐标])。如果这个点是食物那么,继续生成食物,蛇身则已经通过unshift自动+1;如果这个点不是食物,那么删除蛇尾的像素点,从而保持蛇身长度不变,实现了蛇的移动效果。

另外一部分比较重要的,通过方向键改变蛇身移动方向。考虑到蛇本身是包含一系列坐标值的二维数组,只需给它的值在横向或纵向上+1或-1,即可左右移动一个像素的位置。

    //移动方向、预载移动方向
    var direction = preDirection = [0,1];
    var nextX = snake[0][0]+direction[0];
    var nextY = snake[0][1]+direction[1];

主要函数方法,我都在源代码里写上了注释。虽然游戏用了组件封装的写法,不过其实都是原生写法,所以还是有改进之处。有BUG欢迎提出来。

点此查看游戏演示DEMO

猫哥网页设计视频教程01[网络基础]什么是上网

catge Post in Design,Tags: ,
1

第一次用ishow+imove做教程,下次需要改进的地方:

1、设置录制范围;

2、输入文字的地方,注意用放大镜,否则视频上传后被压缩文字都看不清;

3、导出成最高品质再上传;

4、找个没人的地方,录制声音大点比较有激情点。

话说imove导出影片的速度慢得吓人,不知有哪位高人知道如何提高导出速度。

第一集作为试讲,很多没有做好的地方,欢迎提批评意见。内容比较基础,主要关键字:互联网、IP地址、 DNS 、域名、路由器、网址、局域网。如果有不了解的,建议看下,因为这些也属于网页设计的基础内容。

视频观看:

 

PDF课件下载:01[网络基础]什么是上网