阿里手机版List页图文排版案例
基础背景介绍
1）据”深圳移动”调研，目前阿里客户的主流手机屏幕分辨率通常是176×220和240×320，考虑到目前手机发展的实际趋势，建议以240×320为主要设计平台；
2）176×220屏幕，通常是我们一般意义上的FeaturePhone，字体尺寸一般为16px，少部分为12px和14px；
3）240×320屏幕，通常为我们所说的中端手机，主流字体尺寸为20px（FeaturePhone）和12px（SmartPhone），少部分为14px和16px；
·设计目的：
1） 在不影响现有用户使用习惯的前提下，提升搜索输入流程的便利性；
2） 在有限的空间内，增强首页搜索操作的历史回溯能力，减少老用户的搜索操作成本，提高搜索效率；
3） 对新用户的搜索引导更丰富，增加搜索的趣味性；
·设计方案草稿：
·主要流程
1） 进入页面，光标默认放置在输入框内，支持用户直接输入操作。同时，光标后跟随当前搜索维度下的输入提示信息；（如图1.1）
图1.1
上期回顾:交互设计模式(二)-Pagination(分页,标记页数)
[版权声明]:版权归作者Alite所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://alite.aliued.cn
Tagging(标签)
问题摘要
用户往往想通过流行或最详尽的主题来浏览内容。
实例
上期整理http://alite.aliued.cn/archives/545
[版权声明]:版权归作者Alite所有，转载文章请注明作者与文章出处:http://alite.aliued.cn
整理嘀咕
前期介绍了三本书给交互设计爱好者,UED朋友的在上期留言中,希望我尽快推出第2部分的整理,今天我把整理的后续内容一起与大家分享.希望这两篇博文能真正帮助UED从业者和爱好者,找到自己需要的书籍.接着推荐.
Designing Interactions
作者: Bill Moggridge
出版社: The MIT Press
出版年: 2007-10-01
[版权声明]:版权归作者Alite所有，转载文章请注明作者与文章出处:http://alite.aliued.cn
整理前言:
什么书籍能帮助交互设计师更好学习交互设计,提升实战能力呢?曾经也读过很多关于交互设计与用户体验的国外书籍,但想针对实战的书籍确实比较少.交互设计是设计学科的一个分支,设计的最高境界为禅意最高境界,通俗点说就是设计的精髓有时候真是只可意会不可言传.”对设计的感觉是经过多年经验积累出来.”-腾讯视觉晋兄如是说.即使这样,我想前人走过的路,总结的经验,总会给后人予以启示吧.因此我以一种科学的态度,去探索交互设计中的奥秘,总结每次经历过的经典案例,享受读书的乐趣.最后发现其实交互设计还是有很多规律可寻的,下面是我整理的交互设计的专业推荐书籍,希望能帮助更多的设计师认识交互设计,理解交互设计,最后很好的掌握它.
Web导航设计又名: Designing Web Navigation
[版权声明]:版权归作者Alite所有，转载文章请注明作者与文章出处: http://alite.aliued.cn
我看”必应”
最近两天总是能看到关于bing的新报道涌现,先是老大发的一篇Bing谷歌雅虎三家搜索性能大比拼的文章.对BING有了个初步的了解,然后是腾讯的西贝同学关注微软Bing的文章.慢慢地我也对微软的”live二代”有了浓厚的兴趣.一开始感觉它的名字很怪,官方给的解释好象是”有求必应”的意思.不过也有些不同的意见,今天同事之间调侃:”名字多难听啊?谁没事找”病”啊?虽然是句玩笑话,也并非空穴来风,大部分评论都直指名字难听.不管外界评论好坏,我想用一种全新的视角,客观的看待微软的新搜索引擎.
背景
微软新搜索Bing上线前，微软已经开始了网上品牌推广攻略。微软专门建设的两个宣传网站已经投入使用。这两个网站分别是“决策引擎”
以及“发现Bing”.
“发现Bing”网站主要介绍新搜索的功能特色，设计理念等。微软甚至提供了专门的桌面客户端工具，以帮助了解Bing的最新技术和动态。该网站还有若干个视频，主要是微软的开发人员和品牌专家介绍一些幕后故事，比如为何要选择新设立一个“Bing品牌”等。
在另外一个“决策引擎”网站中，微软试图通过视频等方式传递“决策引擎”的搜索设计理念。微软称，传统的搜索引擎返回海量的搜索结果，需要用户花费大量时间去排除无用信息以及细化搜索。而微软希望通过对这些信息进行分门别类的“组织工作”，为用户决策提供最直接的帮助。
在旅行、本地、购物和医疗信息三个门类的搜索中，微软提高了搜索结果的有效性。Bing首先返回的是经过分类和组织的信息，更接近用户的搜索需求。
中国B2B研究中心作为生意宝下属负责该搜索榜的B2B研究机构在试用体验后发现，在很多方面，Bing确实胜过了雅虎搜索。在搜索展示中，它采用了微软之前收购的Powerset语义搜索的相关技术，在搜索结果页会给出许多相关的搜索建议来优化搜索过程。另外，当鼠标经过某个搜索结果时，Bing会弹出一段文本提示，不需要逐个点击搜索结果就能知道，这是否自己需要的内容，节约了大量的时间。
新功能
1、Bing的搜索结果：与原来不同的是，Bing的搜索结果页面有三栏，而非两栏。中间一栏与原来的搜索结果没什么不同，右边的一栏是广告。
左边的一栏是新增的，它将包含搜索相关和一个搜索历史。左边栏上的一个有意思的功能是分类搜索，它与你的搜索相关。例如搜索一首歌，分类栏里会出现歌词和演唱会门票，而搜索苹果的“iPhone”时，分类搜索栏将显示相关的应用程序，可以直接导航至下载。
2、显示广告:凭借Bing这个搜索引擎，微软很可能重振显示广告的业务。因为Kumo将可以提供更精准的搜索。
3、内容预览：这是Bing的另一项新功能，有了内容预览这个功能，用户就可以不用点击链接直接看到页面，火狐的一个插件也提供类似功能，而Bing会将其进行集成。
交互与体验
首先打开BING的主界面,带背景图的搜索框,背景图片是随机的,有点花哨区别于GOOGLE的简单.给我印象最深的首先是搜索图片的体验:图片预览与滚轮式图片浏览机制.
图片预览:当用户的鼠标移到图片上会看到放大图,伴随有相关文字信息提示.
滚轮式图片浏览机制:用户可以一直上下滚动浏览图片,因为BING没有翻页机制.
最后是视频搜索:用户把鼠标放在视频上会自动播放预览.这个体验到是瞒有意思的.不过更有趣的是BING搜索到的结果,让用户特别意外,比如输入用户体验设计师查询视频竟然出现”AV”.
除了以上几点我发现还有一个问题当我输入关键词的时候,下拉框推荐的是我曾经输入过的词汇,并不像百度与GOOGLE那样推荐词汇.
其实,BING的问题还很多,从6月2日正式发布,只是短暂的停留了10几个小时就已经被屏蔽了.有人说是微软整和产品,有人说是被”和谐”了.不管怎么样我希望BING可以把交互与用户体验做的更好,最重要的是结果准确更加贴近用户.在中国这样的大市场里,不去研究用户与当时的国情是很难和GOOGLE与百度抗衡的.
业界大牛 Thibault Imbert (bytearray.org) 近日将很常用的JPEGEncoder类用vector类改写了一下，做了一个vector版本的JPG编码类，效率大幅提升。正好，前不久我也已经做了一个vector版本的JPEG编码类，在项目中使用，最近正在整理代码准备分享出来。当然啦，我所做的没有Thibault那么深入，仅仅是把Array换成Vector，所以现在就拿他的版本重新修改了一下，加上了异步功能。
所谓的异步编码，是延时处理代替循环处理。比如写入1000行文字到一个文件内，可以用for/while循环1000次，一次性写入，这就是同步处理；也可以写1行，隔0.5秒再写下一行，再隔0.5秒继续写下一行，这就是异步处理。同步处理的好处是快速，但是对计算机的压力也比较大，在浏览器中使用时，会造成假死，可能会引发稳定性问题。
Vector的效率比Array高了大约4～10倍，但还是不够高，Alchemy或者haxe的效率会更高一些，因为它们使用了Flash10未公开的opcodes接口，可以直接操作一段内存数据。Mateusz Malczak（http://segfaultlabs.com）做了一个异步Alchemy版的JPEGEncoder，效果很赞，速度比我vector异步版的要快很多，但是缺少了一些自定义参数设置（在压缩小图片的时候，看上去效率反而不如Vector，其实不然，实际上，这是因为程序中写死了大小2800×2800）。Alchemy的C源码修改起来也比较麻烦，要用Alchemy重新编译。而且因为编译了整个libjpeg，所以文件体积也比较大，用C重新写一遍所有相关的类可以解决大小问题，但问题也会更加麻烦。看起来，haxe生成的swc应当是最佳选择，正在考虑有空的时候改写一个。 
我将这个几个放在一起，来看一下例子吧！（需要安装Flash Player10）
下载 源文件
下载 带有异步压缩功能的vector版JPEGEncoder
关于 Alchemy 和 Haxe：
Alchemy 是Adobe实验室的一个项目，它的前身是Scott Petersen的“FlaCC (Flash C Compiler)”，目标是让C语言写的类能够被Flash重用。在MAX 2007大会上，Scott凭借Flash中畅玩Doom一鸣惊人。Alchemy可以将C语言代码变成Flash可用的swc文件。这种方式类似于在C语言里面直接执行汇编语言，效率自然提高很多。目前Alchemy还只是测试项目，但是已经开放了SDK下载，可以编译许多常用的C类库。
Haxe 是传奇的 Nicolas Cannasse 创造的语言。Nicolas 发明了大名鼎鼎的MTASC (Motion-Tween Actionscript Compiler)，在AS2.0的时代，改变了AS开发的方式，Flash也进入开源时代。进入AS3.0时代后，Nicolas选择了自己创造一种语言，这种语言吸取了Flash的优点，并且在语言和编译器上做了很多优化，使得效率上大幅度提升，这就是Haxe。时至今日，Haxe已经发展为一个丰富、高效的高级语言，也对Actionscript的发展产生了影响，例如Flash10的Vector，就和Haxe的概念和语法非常相似。
Alchemy公开之后，Nicolas 找到了 Flash播放器中留给Alchemy的未公开的接口，通过这些接口，AS可以直接操作一段内存中的数据。Haxe也使用了这些接口，并称之为Flash Memory，借助Alchemy的接口，Haxe的效率也大为提升。
