Tag Archives: UE

关于移动 Web 设计的闲言碎语

前几天 3G 牌照下来，一时间 Buzz 信息很多，不过关于 3G 对 Web 技术影响的分析倒是并不多见。今天再次读了一遍这篇 2009 移动 Web设计趋势 (Mobile Web Design Trends For 2009)，加上这几天在分析使用 iPhone 上的某些 App 设计，还是记录一点笔记吧。

这篇文章提到了如下五点：

简单的可选项(Simple options) 如无必要，勿增实体。基本的、核心功能就行了。
留白(White space) 我觉得 UCWeb 针对 iPhone 的设计就很一般，完全是把 iPhone 当成小屏幕显示器设计的。堆砌的网址站看起来不方便，点击起来并不方便，倒是应该弄个 LOGO 或许更好。
少用图片(Lack of images) 这倒是和上一条矛盾。能少用就少用，而不是不用。而用了图片，如果方式不合适，还不如不用。
用子域名而不是用 .mobi 域名(Sub-domains instead of .mobi or separate domains) 精简域名长度，精简！用 “i.” 就很好，别用 “mobile. “。
内容优先(Prioritized content)

只有设计是没有用的。

我的额外建议：

可点击的目标锚点一定要大。因为你的手指肚更大 :) 如果一个手指尖范围内还有其它可点击目标，很容易误点。最简单的方式就是看看 iPhone 自己桌面菜单设计。而我之所以说 Taobao 商城 iPhone 版设计的不错，也是因为这一点考虑得很地道。Gmail for iPhone 的设计上，用户浏览邮件内容的时候，那个 “Inbox” 的按钮就设计的非常不好。很容易误点击到 “Archive” 按钮上。
分页设计 对于分页的链接，一定要隔开一些，如果”上一页”、”下一页”挨在一起，用户会很困扰。毕竟，手持设备没有鼠标，用户不可能具备”精确点击”的能力。
登录框设计 在 iPhone 上登录某些站点是非常痛苦的一件事情。可考虑的事情：如果用户 ID 是邮件地址的话，是否考虑无需用户输入”@” 字符? [iPhone 2.2 固件已经改进了许多]

另外，2009 移动 Web设计趋势 (Mobile Web Design Trends For 2009) 还提到了设计中的常见挑战以及需要慎重考虑的地方，这篇文章信息量还是挺大的。

–EOF–

唠叨完了，发现基本上是针对 iPhone 说事儿的，我还不是标准的移动互联网用户。

D2 前端技术论坛(上海)

友情帮推广一下这个 D2 技术论坛会议。会议也是以技术会友，门票是免费的，感兴趣的话就去参加一下吧，和前端技术高手面对面交流。前端技术我不懂，所以不去参加了，不过支付宝会有不少同事去参加。

关于D2

D2 前端技术论坛(Designer & Developer Frontend Technology Forum)，简称 D2 ，为国内前端开发者和网站设计师提供一个交流的机会，一起分享技术的乐趣，探讨行业的发展，以技术会友。它是中国所有前端开发者的节日，包括前端设计师，前端开发工程师，和所有对前端技术感兴趣的人。D2 将努力营造一种轻松自由的交流氛围，没有任何商业色彩，以纯粹的技术交流为根本，共同推动国内前端技术的发展，促进国内行业标准跟国际的融合，发掘前端技术可以创造的更大价值。
D2 是由淘宝网发起，每届由不同公司轮流承办。

详细介绍:http://www.d2forum.org/about/

本届主题：”前沿技术和前端协作”
举办时间：2008年11月29日
举办地点：上海
举办单位：土豆网
协办单位：淘宝网、微软、Adobe、蓝色理想、ActionScript 3天地会

日程安排

时间：2008年11月29日（星期六）
地点：上海市徐家汇美罗大厦

上午：嘉宾演讲 9:30 – 12:00

09:30 – 10:40 《Flash Player 10》马鉴(Adobe)
10:50 – 12:00 《Flash 协作开发之路》史珉(Tudou)

下午：自由论坛 13:30 – 18:00

13:30 – 14:40 《IE8 as future platform》待定(Mirosoft)
14:50 – 15:50 《前端敏捷开发-质量与效率的战争》许湛(Alibaba)
16:00 – 17:00 《土豆网与淘宝网的前端团队组织结构剖析》李戎(Tudou) & 怿飞(Taobao)
17:00 – 18:00 《自主议题讨论》

注意：以上安排可能会根据具体情况进行一些补充与修改。

关于嘉宾

马鉴 (Zerlot Ma, 七月)
Platform Technology Evangelist / Adobe
Blog: www.7yue.com

史珉 (Aspirin)
高级Flash工程师 / 土豆网

许湛 (Justin)
前端开发主管 / 阿里巴巴(国际站)
Blog: www.alldone.cn

李戎 (小麦)
资深前端开发工程师 / 土豆网
Blog: www.mikkolee.com

郑叶飞 (怿飞,圆心)
资深前端开发工程师 / 淘宝网
Blog:www.planabc.net

报名地址：http://www.d2forum.org/d2/3/sign_up.html
–EOF–

说说大量列表项的排序展示问题

广而告之： 7月26日QClub杭州站-- 支付宝首席架构师程立与您分享"当SOA遭遇现实"的心得

上周五去了一趟淘宝，在淘宝二楼实时展示交易信息的大屏幕前看了一会儿。发现关于商品显示的排序列表是两排，左右排列的。

1 商品名一 2 商品名二
3 商品名三 4 商品名四
5 商品名五 6 商品名六
......
N-1 商品名N-1  N 商品名 N
......

尽管符合从左到右的阅读习惯，看起来感觉怪怪的。前一段时间有不少关于电梯楼层按钮排列问题的帖子(一，二），针对电梯的按钮应该说已经讨论的很好了，但我感觉如果针对 Web 页面上大量列表项的排列显示来说，很有值得商榷的地方。

我再抛一个另外的反面例子，关于百度 Mp3 歌曲 Top 500 的列表展示：

(点击图片看大图或者到 Baidu 站点上体验)

假设 M 行 x N 列的展示，如果 M 很大，而 N 很小，在前面几行过去之后(一般是 N行*N列后)，会发现非常难以定位你要找的歌曲。尤其是越到后面效果越差。如果 M 和 N 都很小，那么相差是不大的(不知道这是什么心智模型? 尤其是对该项的描述也符合 M：N 值很小，比如 Flickr 的图片展示）。

这个其实和电梯楼层按钮排列的问题不太一样：电梯上面只有一个按钮(楼层号)，而 MP3 列表排列项后面还有该项的名字或描述(MP3 名字, 艺术家名字)。需要展示的内容性质和信息量已经变化了。

这只是 UE 门外汉的个人看法。供参考。

–EOF–

BTW, 注意到火车站和机场的公示牌显示倒是挺符合阅读习惯的。

Jiffy — 端到端的 Web 性能评测框架

前面几天介绍的 Web 前端优化最佳实践 系列离不开一个关键词：YSlow。简单的说，YSlow 是以最佳实践得到的规则为基础，进行 Web 页面的性能评估，并给出指导建议。

而 Velocity 2008 上发布的 Jiffy ，我断言是一个比 YSlow 更有前途的工具，只是当前还没引起足够的关注度。之所以说 Jiffy 更有前途，是因为 Jiffy 设计初衷是面向端到端的，不只是个工具（Jiffy 有基于 FireBug 的插件 Jiffy Firebug Extension for Firefox ），而变成了框架，对于 Web 上的每个组件，都能进行性能度量。如果说 YSlow 是类似”望闻问切”的诊断方式，那么 Jiffy 就是 CT 检查了。

下图揭示了 Jiffy 的工作机制：

通过页面中植入 Jiffy.js ，针对 Apache 做特定的设置，当用户调用页面的时候，拦截并记录 Jiffy 的相关请求，接着把所有的性能信息注入数据库中，然后从数据库中抽取数据进行展现。这正是当前绝大多数 Web 公司都缺少的性能衡量策略(尤其是 JavaScript 的精细度量)。唯一美中不足的是使用 Oracle XE 做性能信息存储的数据库，相信不久就会完美支持 MySQL 。

关心 UE 的朋友可以在自己的环境里面搭一套 Jiffy 啦，有好处没坏处。

–EOF–

更新：有得朋友说，安装了，点击了，没反应。这是因为页面中没有嵌入 jiffy.js 脚本。可以到我的 egosurf 页面测试一下。