浆抱罗斯&飞鱼’s blog

iPhone GUI PSD Version 4

飞鱼 — Sun, 25 Jul 2010 08:40:24 +0800

小八论坛上看到的，就分享一下。坛子里的所谓的一些UI美化，都觉得好丑，丑得让人蛋疼。但是不知道为什么有人会喜欢，杯具，论UI的话，一直觉得小八官方的挺好用的，毕竟是eico 设计，走的是质感路线。
最近我也在折腾 am8 的GUI，也不知道小八的android什么时候出来，反正就当练手好了，现在设计进度60%左右，图就不放出来了，免得跟iphone的成对比嘎嘎~~~~

传送门: iPhone GUI PSD Version 4

PS:最近开始忙项目了。很多半成品的文章堆在后台米放出来，大伙久等了,所以放出个东东来，证明这里还没长野草~。^__^

您可能还对这些日志感兴趣 - 随意

一知半解 – 分析淘宝商城首页的 lazy load 功能

飞鱼 — Wed, 30 Jun 2010 12:35:09 +0800

最近趁部门搬至淘宝办公。
研究了一下之前就开始注意的：商城首页 的lazy load 实现(也可以说是：伪异步加载)。
首先解释一下商城的 lazy load 是怎么一回事。
我们打开商城后发现，当你拖动滚动条往下，第二屏以下的东西才慢慢加载出来。
这样做能在初次打开的时候http 请求将大幅度减少，并且页面加载速度也提高不少。

上面说的伪异步加载是咋一看的推测，感觉像是滚动到那里的时候整一个ajax请求，将下面内容加载进来。
后来在不经意之间看了下源代码发现的。
看下面是商城的源码截图。

从图中可以看出，源码中有很多 textarea 的标签，里面的值就是即将要加载的html，然后就恍然大悟，原来所谓异步加载也可以这样来实现。

分析实现流程

首先是将要加载的html代码丢进textarea 里，因为此时html 在 textarea 是一直val形式，不会被浏览器解析渲染，所以页面在刚加载的时候只显示第一屏。然后通过计算滚动条的相对偏移(数学问题)，将textarea的val 值添加到html 的dom里，因为浏览器是即时解析的，新添加的dom 会被重新渲染，这样新加的html 就显示出来了。这个就是所谓的lazy load ：伪异步加载。

为什么要用textarea ?

其实这个东西估计是因为html 标签的限制，这个方法的设计之初，设计师想将硕大的html数据缓存在一个不会被解析标签里，然后就发现textarea 刚好符合期望。

为什么不用ajax ?

因为数据不需要验证，不是时变性的数据，再者使用ajax 会增加http请求，并且维护性不好。
目前淘宝的 TMS 后台系统都是模版化引擎，使用ajax 会对模版化引擎产生冲突以及维护成本高等。

如何实现？

从实现流程来讲，这个功能实现起来没什么难度，唯一有难度的是，怎样把这个功能做成一个通用的模块，简易添加 class 以及配置就可以实现等来提高重用特性。

有合弊端

优点那么多，缺点又怎样呢·？
SEO：存在textarea 里的数据能不能被搜索引擎抓取呢？这个我最近在自己blog里研究一下。
web标准：这样的做符合web标准么？将html代码放在textarea来实现 飞鱼：只是一个标准而已。

好了打完收工~~~

您可能还对这些日志感兴趣

换个地方勃起 — 新浪微博

飞鱼 — Sun, 20 Jun 2010 22:55:40 +0800

我是个还算保守的人，不怎么用 tw-itt-er。
因为一个比较重要的原因：偶不会翻XXqiang，偶不会玩API。 ╮(╯3╰)╭

之前一直都用嘀咕：有兴趣可以跟随我
8过，嘀咕毕竟是嘀咕，平常就在上吆喝，聊聊家常，牢骚几句，发现聊技术木人鸟我 0_0 。于是呼，转移阵地。

选择新浪的唯一原因是 —– 它的主题皮肤真的很漂亮。

所以打算在新浪微博讨论点工作上的东西，比如交互，设计等前沿的东西。

就像我的blog一样，技术归技术，生活归生活。哈

想和我多接触学术方面的就去新浪 follow 我吧。点这里

贾广告：
发现最近访问自己的blog 的时候，经常会打不开，F5一下才能看到妞~
不知道，你访问这里的时候有么有这样的情况？
有的话请留言上报，因为发现我的邻居有好多(同IP几十个玉米绑着) 不知道是不是玉米太多的原因。

您可能还对这些日志感兴趣 - 随意

淘日本 – 仅仅从交互设计去看待

飞鱼 — Tue, 01 Jun 2010 23:06:13 +0800

折腾了半年的 “淘日本”终于在又惊又陷的状态下发布了。且不说这个产品是不是成功的，因为我还不知道这东西能不能赚钱，一切都是作为一个旁观者去看待。难得blog里聊工作的事情，只是因为付出了很多，需要去表达出来。

但是我还是比较纠结于，站上的一些交互，也算是做为一种总结，或者说是一种发泄也好。

总的来说，从交互设计去看待这个产品，我给自己打个不及格。
因为这个上面有太多东西需要去纠正，有太多交互需要去否定，但是因为某些客官的因素，我对此无能为力。

既然如此，我们就退一步用一种学习的眼光去分析这个页面：

这个版本的淘日本的原型是上一版的淘宝商城，所以出处都有淘宝的些许气息。但是在此之上增加了一些杂乱的风格，
如：
页面设计元素中的字体选择过多，页面参差不齐。

部分元素模糊太深，导致页面不精致，边界不清晰。

图片上的字体没有经过锐化处理，降低了可识别性，显得不精致。甚至有些12px 的字可以直接使用，code 就可以实现。

区块中元素过多，用色过多，眼花缭乱。

交互部分太隐秘。我想一般人是不知道这里有个tab 切换按钮，甚至这东西不是定时滑动，还有就是箭头太小，我想一般有钱人都点不到 – -

链接的下划线，是强调这个是一个链接，还是告诉用户，样式出问题了？
已经有不少开发同学询问我，这块是不是样式还没写好，咋觉得没有样式一样，我知道这是日本网站的链接风格（日本的网站，一般都在链接下增加下划线以告诉用户这个是一个链接，非常遥远的历史，也不知道是谁起头的，也不知道什么时候会改革），但是你要知道，连开发这样不懂设计的都以为是没加样式，意思是他们的潜意识里，中文链接下面不加下划线看着会舒服些。既然要做一个中文的网站，一个链接有没有下划线，不能突出什么，何不考虑其他样式来突出链接的重要性，以及层次性。

交互设计不同于视觉设计，交互是为了帮助用户实现某些功能的便捷设计，仅仅是为了好看，牺牲用户体验是不可取的。

另外，想说的是，一个面向用户群是中文用户的网站首页（首页完全可以人为控制），竟然用了如此多的日文设计，甚至影响到样式的字体设置（当前页面的默认字体，是优化日文显示的），牺牲了中文，以及数字英文的显示效果。非常不可取。

好了末了~
总结了这么多。祝愿：淘日本能走远点，不要停下来，要飞快的，想淘宝一样。

您可能还对这些日志感兴趣 - 随意

Coding 的那些银荡事 – Notpade++插件WebEdit使用心得

飞鱼 — Sun, 30 May 2010 22:57:36 +0800

最近有朋友说Dreamweaver cs5很银荡，我竟然无动于衷，因为我的电脑是上个世纪的，所以无福消受啦，
上周回学校工作室瞄了一下，发现咱们的新人都在普及notepad++，很是激动啊···
notepad++ 果然是个短小精干的东西啊，我目前工作75%的时间都是面对着这个。所以感情还是非常深的。
废话少说：
今天我就分享一下我用NP(notepad++)的一些插件吧。，可以提高coding 的一些细节。
WebEdit，是NP 上的一个代码辅助插件，里面包含了一些html常用的标签，来辅助html代码。你可以在它的插件库里找到 通过这个插件以及设置快捷键，可以有效的提高coding效率。
如下图打开插件配置文件。

那么我稍微解释一下，如下面的代码，第一个等号前是“宏”(类似word里的宏) 的名字，后面是代码，“|”是代码完成后的光标位置。

Div &Class=<div>|</div>

下面[Toolbar] 是在工具栏上显示的一些快捷按钮。(明显有很多是多余的，可以手动删除掉一些)

8=h4.bmp

可以看到，这里面有很多常用的标签自动完成，但是发现有一些是没有的(如：img br 等)，也有些是多余的，如h4，h5 因为用的比较少。那么我们尝试着去掉没用的快捷按钮，然后新建一些标签。
我新建了如下的宏：还是挺实用的。最后行是等号的自动完成，发现等号加引号输入比较麻烦^_^

Br=<br />|
Class= class="|"
Id= id="|"
Img=<img src="|" alt="" />
O=="|"

添加完后不要忘了保存，然后重新打开NP就生效了。

然后是设置快捷键。
点击设置 – 管理快捷键 – Plugin commands
下拉就可以看到 WebEdit 的快捷键设置区。
我设置的快捷键如下，用Alt 加快捷键比较银荡，按起来也比较顺。

A -------------- Alt+Q
Div Class ------- Alt+A
Strong --------- Alt+B
Br ------------- Alt+Enter
Class ---------- Alt+S
Id ------------- Alt+D
Img -----------  Alt+W
O(等号) ------------- Alt+=

好了，这个插件的分享就到此为止了，下次分享一下其他插件。····

PS：顺便分享个快捷键 Ctrl + D 复制当前行，这个快捷键某些时候非常实用

您可能还对这些日志感兴趣 - 随意

从淘宝透露出的那些设计细节

飞鱼 — Sat, 22 May 2010 22:33:28 +0800

一直都对淘宝的一系列改版非常之感兴趣，没有其他的想法，就是觉得淘宝的设计从某些角度来讲，带领着国内网站的一种设计风格。
最近商城改版将版面该的彻底，虽说第一版让人很蛋疼，因为的确变化很大，并且让人感觉有一种很山寨的相貌。但是淘宝的更新效率总是非常快，没过几天，华丽的商城慢慢的凸显出来了。原本单调的红色，变得非常有层次感，搜索框也凸显出来，搜索按钮的橘黄色在红色的背景中显得更加华丽。同样作为交互设计师的我看到这个作品，不禁自愧不如啊嘎嘎~~~ 还有好多路要走啊。

从这次的改版发现淘宝开始走视觉体验路线了，从原来满足用户功能，到后来满足用户需求，再到满足用户功能体验的，到现在开始走用户视觉体验的路线。
不过想想也是100多号的人难免会迸发出一些强大的灵感。

当然这么推荐是有理由的，当淘宝的产品以及用户群达到如此大的量的时候，一定会进化出一些高质量的产品，以及一些高质量的用户群，为了满足这些用户群，商城便诞生。

再放一张名鞋馆的截图，也相当有感觉的。

最后再唠叨一句：淘宝首页又将导航给放出来了，之前的那种太前卫的多平面设计拿下来，看来一是用户吃不消这样的表现形式啊，现在的表现形式好些了，但是似乎用色少了好多，应该是为了节省流量吧，毕竟淘宝首页是个流量大头。

您可能还对这些日志感兴趣

乱翻乱教 – M8开发环境(vs2008)配置 [菜鸟版]

飞鱼 — Sat, 08 May 2010 00:04:56 +0800

每天看着[魅族论坛]的开发者版块那寥寥一百左右的帖子，真是揪心啊，并且里面大好多问题都是平台搭建的问题，这个问题很严重，并且非常打击初学者的积极性呢。于是乎，折腾了几天把平台搭建及同步调试等常见的问题及细节都跑了一遍，希望有所帮助。

准备活动

都说我解说技术比较银荡，那就更银荡一些 ^_^ 要大干一场，那是需要一系列性情道具的····
M8的系统是基于wince 封装出来的，这个大家应该都知道。所以咱们需要的东西如下：

1. Visual Studio 2008 下载地址 点进去捡专业版 下载
2. M8SDK 下载地址 是魅族的开发社区的下载地址
3. M8SDK中文版文档 同楼上
4. M8 一只 （选填） 如果你真的想开发M8应用，去整一个，因为同步调试比模拟器调试要真实多了。
5. 同步驱动 下载地址官网有的下
6. 电脑一只 不要告诉我你想在M8上开发 =，= 我用的win7 64位，很销魂
7. .NET Framework 3.5 下载地址 win7 就不用装了。

前戏

前戏一定要有不然怎么OOXX，是安装软件，且顺序如下：
.NET Framework 3.5 (win7)可以忽略
Visual Studio 2008 选择自定义安装，除了C++意外的都不要勾选(除非你还要开发其他东西)，我就是这么干的，当然MSDN也不要装了，有问题google 吧，然后是耐心等待，看看X片吧。

然后装 M8SDK(SDK要在vs之后装，不然是装不上的)，这里要注意一下，论坛里有老多人卡在这里，多少也要先看看SDK文档再下手么，文档里写得还是蛮清楚的，虽然有些地方要误导人。如下图，装的时候，不要勾选文档部分。

接着是装驱动，叉p 跟win7 要装的东东不一样，去文档里看吧。这里就不说了。确保同步成功就ok。

前戏结束，应该湿了~~~~~ 哼哼~~~

剥橘子，带TT

论坛里好多初学者碰到了N多关于怎样开始这个hello M8 的项目。这个灰常蛋疼，虽然SDK文档里有步骤但是却很蛋疼的漏掉点什么，总是调试不成功，同步不成功。就像正要OOXX 的时候同事来电话一样，立马倒塌~~~~

那么开始我们的hello M8 的项目，
1. 新建项目，智能设备 – win32智能设备项目 见文档 – 创建基本MZFC程序
按照文档里说的复制 hello M8的程序到cpp里。

2. 项目建好后，选择项目 – XX属性配置(重要) ，这里文档虽然有步骤，但是似乎漏了点，
首先是 添加依赖项 选择[链接器]-[输入]-[附加依赖项] 写入： mzfcs.lib platformApi.lib (文档里有说明) 如下图：

3. 接下来是设置预处理器，[项目]-[属性]-[C/C++]-[预处理器]-[预处理定义]，添加 MZFC_STATIC，这里文档的图片容易误导人，因为文档中图片中只有一个MZFC_STATIC，很多人以为是吧其他都删掉，其实不是，是在前面追加一个。不然后面编译的时候会出现如下图的错误。

4. 然后是设置 不使用预编译头，这一步文档里没说，但是论坛里好多帖子都在问这个问题，不下十个，觉得官方有必要改改文档了，
[项目]-[属性]-[C/C++]-[预编译头] 设置成不使用预编译头，顺便贴一个没设置这一项编译不成功的截图。

5. 使用模拟器调试，如下图 M8SDK Emulator 代表模拟器模式(默认就是这个)。选择[生成] – [编译] Ctrl+F7，看到下方成功了之后，再按(F5)[调试] 应该就跳出个恶心的模拟器，为什么恶心呢？因为一开始是黑屏的以为模拟失败，等了10秒，丫才开机·· 囧rz 还要开机啊······，并且效果不好，感觉怪怪的速度也不很慢。有大虾知道如何优化，请留言告诉我下，我补上。

6. 同步调试。这一步留给有小八的童鞋们。连上小8后，(确保同步驱动装好，同步模式可以跑)，然后将 M8SDK Emulator 下拉选为 M8SDK ARMV4I Device，然后点击右侧的小手机按钮进行手机同步测试。看看是否同步，

7. 配置远程目录，这个文档里也有说明，选择 [项目]-[属性]-[部署] 设置远程目录，建议： 将目录设置成Disk目录下的某文件夹，如\Disk\MM ， 文档里的说明是Windows 生成之后找都找不到，

同样，设置远程调试文件 [项目]-[属性]-[调试] ，远程文件，如下：

8. 编译生成文件 这个是关键的一步，因为之前刚开始整的时候一直连接不到手机，都是直接弹出个调试器，或者提示找不到远程文件。

9. 屡试不爽，久久不放，然后按下F5 应该就能在你的小八上看到运行的软件了。

好吧，开始你的M8之旅吧。

有问题可以留言欢迎讨论。

您可能还对这些日志感兴趣

系统级应用项目中的函数命名冲突问题

飞鱼 — Mon, 03 May 2010 10:54:35 +0800

函数命名冲突问题，相信很多人碰到过。
作为一个刚做js 不久的小虾米来说，我也没有太多发言权。
但可喜的是最近做的一个系统级的应用项目中碰到了这个问题。
之前在老系统里看到很多程序员参与进来各种小需求，也带进来了好多大大小小的函数，导致某些页面的函数命名很是多样化。
对于如何避免命名冲突问题，自然很多开发都选择了加长函数名称这条无奈但是又死板又实用的方法，如getTranslateTargetIntro,看到这样的名称就是蛋疼。但是结果让其他中途进来的开发前端等蛋很疼~~~，并且到处都是全局变量，冲突得让人想死。 =，=

原因在哪里~~~~?

因为它历史悠久~~~，当初设计这个系统的时候，架构师没想到它以后会成为一个庞大的系统，也不曾想过以后还有那么多蛋疼的前端会加入进来，更没想过，页面上的交互会越变越多，只是单纯的想解决燃眉之急的一个小交互。
于是乎，很多规则，命名方式，功能架构都没有一个清晰的解释型的图表出来。

得扯远了··· 唠叨了一下，^_^

对于一个新的系统，命名冲突问题如何解决？

我就单单说说我最近做的这个系统中关于js 部分的函数命名的一个方法吧。
先看一下如下图：

智商高的童鞋相信看了这图就知道啥意思，这个东东可是我哥写了那么多js以及 OOP思想的一些结晶，我觉得很强大，至少我这么觉得，因为很好用。飞鱼端了端眼睛：看不懂的话，继续往下看^_^

首先是减少全局参量
全局这个东西应该是越少越好，就像jquery 用个美元$号一样（虽然经常被其他js 库抢），所以如果要让一个系统有一个简洁的js 系统架构，最好给它起个全局变量，这样的好处是，你的系统只占一个全局变量(当然jquery等$是必须的，因为你得依赖它)。这样从命名上就避开了全局变量冲突的问题。

让你的js 系统函数都分组升级成类
然后根据系统的功能的类型进行划分，比如web中系统应用，无外乎 layout 初始化，然后是Effect效果，然后是通用模块，等等。这样做的好处是当你有需求要添加什么功能的时候就可以对症下药，而不会出现要加什么功能就往系统里的js 部分最下方添加，导致页面上的js 代码像狗皮膏药一样，那样会让你的代码很没有深度以及层次(此句话，很有深度，借用我哥的话)
可能上面说的全局变量，功能分类说了懂了，但不知道咋实现。这一步开始将它实体化。
新建一个js文件my.js，写入如下面的代码:

var My = {}

然后给你的系统添加一个启动函数，就像机器的开关一样，我们将其命名为run()多么直观^_^

var My = {
    run: function() {
         //just do something....
         alert('你好，死猪！')
    }
};

上面的代码其实就是一个类，和它的一个方法，完全的OOP 思想。
那么怎么启动它呢，很简单在它的下面加个动作来开动它。就是标准的jquery 语法。

$(function() {
    My.run();
});

这样我们的系统就起来了。
然后我们给系统增加一些功能，先从layout模块来。
My 类下添加一个新的子类 My.Layout。

var My = {
    run: function() {
         //just do something....
         alert('你好，死猪！');
         My.Layout.run();
    }
};
My.Layout = {
    run: function() {
         alert('您又便秘啦？');
    }
};

这里有个小技巧就是子类命名方式是首字母大写，用2个英文单词构成，来提高识别度。
看起来，这样来访问My.Layout.run(); 这个方法还是挺长，但是它用点号分隔开，让其命名方式变成了三维。而不是MyLayoutrun()这样的一维命名方式。这样层次一目了然。让我们再增加一个子类，就会了解这其中的奥秘了。

var My = {
    run: function() {
         //just do something....
         alert('你好，死猪！');
         My.Layout.run();
         My.Panel.run();
    }
};
My.Layout = {
    run: function() {
         alert('您又便秘啦？');
    }
};
My.Panel = {
    run: function() {
         alert('死了算了=，=');
    }
};

这个感觉就像是一台机器一样，显示我打开的开关，机器开始启动，初始化了一些初始操作触发了显示模块，然后再做通用模块的操作。一切都是有秩序的在执行着。很有感觉吧？^_^ 继续

var My = {
    run: function() {
         this.root = {};
         this.root.head = $('#head');
         this.root.main = $('#main');
         var root= this.root;
         My.Layout.run(root);
         My.Panel.run(root);
    }
};
My.Layout = {
    run: function(root) {
         this.root = root;
         thit._init_resize()
    },
    _init_resize: function() {
         alert('您又便秘啦？' + this.root.main.text());
    }
};
My.Panel = {
    run: function() {
         alert('死了算了=，=');
    }
};

这一步是亮点，我将一些需要全局用到的对象打包成一个root之类，然后带入到每个其他子类中，这样就可以访问到这些对象，而不需要另外再申明，(我不知道这样子做能够节省内存开销，还是会浪费，但感觉应该是前者)
这样子的写法，让整个js 系统被一些关系连接在一起，但是又很容易切开，(比如：注释掉My.Panel.run(root) 就能关闭整个Panel 功能，就像一个一个小插件一样)。

扯得优点离题了，其实也不离题啦，这样子写本来就很难产生命名冲突，并且命名规则可以很有秩序，并且不会出现非常长的纠结的名称。

您可能还对这些日志感兴趣

伸缩自如 – 绝对定位的自适应能力

飞鱼 — Sat, 01 May 2010 22:30:21 +0800

掐指一算发现差不多一个月没写文章了，那个真是天理不荣啊。~~
4月份都在折腾。但总算折腾点好玩的东西出来。
8过还是个技术文章，惭愧惭愧，最近都没时间整图了。
前端时间，研究了一下google wave的一些小交互，发现的这么个好玩的东西，
之前写CSS 的时候很少这么写 absolute 属性，
平常我们写一个div 浮层的绝对定位的时候，一般都只写倆属性，top 和left ，因为这样已经足够。

.target{
    position:absolute; top:10px; left:10px;
}

然后我却发现wave 里的外层布局 div配了 4个

.target{
    position:absolute; top:10px; left:10px; bottom:10px; right:10px;
}

然后像发现新大陆一样去尝试了一下，果然如描述的一样，是一个自适应的div 绝对定位，效果杠杠的。
经过尝试就是IE6 这个万恶的版本不吃，其他都吃。
然后再给上面加点属性类似 min-height 就能实现类试软件界面一样的自适应效果。
当然同样IE6 也是不吃的。可以用js 来弥补。
有空我放个demo 上来。
^_^

就这样了，发篇文章通知一下飞鱼还活着。

您可能还对这些日志感兴趣

走马观花 – jQuery调试工具- jQuery pad

飞鱼 — Wed, 07 Apr 2010 20:21:07 +0800

如图，一个jQuery 调试工具，试用了个把星期，觉得非常犀利，不用为了偶尔想到的jquery效果，但又米心思搭个text来调试而放弃。这个工具犀利的地方在于，你想到啥效果，就能马上调试，非常方便，还可以保存下来。并且省了那些万恶 ctrl+tab 等ooxx过程，然后大喊，飞鱼万岁~~~~

闲话少说：
下载地址：传送门 – 这个是小众软件上的，感谢小众哥哥，感谢C-C-A-V。
工具配置要求：
该软件需要 .NET Framework 3.5 运行环境，就像一朵鲜花插在牛粪上，又臭又香。
win7就不用麻烦了，系统自带，叉p的童鞋就折腾去吧。

使用方法：
左边写dom，右边写jquery 代码(注意：没有意外，要包个$(document).ready()，因为导出来的代码js部分是在头部。 )

好吧~ 玩泥巴去吧~ 不要忘了喊，飞鱼万岁~~~ 小众哥哥万万岁~~~