B3 bohemia’s 改版了

第10个年头,迎来了第5次改版,我把它命名为“B3 with Retina”。现在,不仅支持Retina,同时也更好的支持了Mobile访问,界面更简单有效。

不知不觉,B3已经走过了第一个10年。我还在坚持,你呢?

控制页面里GIF的播放和停止

网站里偶尔出现一个GIF,可以活跃气氛;但如果主要内容体都是GIF,那将是一场灾难,全动起来,不但不美,而且会拖垮你的浏览器,甚至让机器难以响应,因为它不但耗机器性能,而且由于单个GIF体积很大,页面加载也会变慢。如果你有需求,不得不展示满屏GIF,那么应当考虑到以下几点:

  • 每页只提供有限数量的GIF,而且尽可能让它体积小一点
  • 按需加载/异步加载,随着屏幕滚动,逐渐加载
  • 给GIF加个开关,手动控制它播放/停止

我认为最直接有效的方式就是给GIF加个开关,如果再能配合上前两点,效率会更高,展现效果会更完美。因为我是一名设计师,所以在没有外界开发资源的情况下,只能以有限的开发经验,解决最主要的问题。我的内容引擎是WordPress,如果你跟我一样用WP,我推荐使用插件 GIF Animation Preview 来控制GIF的播放和停止。

GIF Animation Preview

GIF Animation Preview

怎么安装不在这说了,非常简单。启用后,插件设置大多数情况下不用改。默认GIF的交互方式是鼠标hover后播放,再次滑入停止。如果想改成点击,只要在插件设置里,去掉“Start animation on mouse hover”前的选框即可。

插件会自动识别GIF,并且将它们改成第一帧静态图,这样页面加载速度就大大提升了,只有播放时才加载完整GIF。这正是我想要的。同时新版本的插件,还加入了对“post_thumbnail”标签,也就是“特色图像”的支持。

这里需要提一句:如果你发现“特色图像”里的GIF上没有出现开关,还跟往常一样自动播放,那也许是你正在使用的主题对“post_thumbnail”有过修改,可以在 “yourtheme/content.php” 里查看并修改。比如我的一个小站,采用了主题“Pronto”,但“特色图像”里的GIF还是照常播放,插件没起作用,检查后发现,原来“post_thumbnail”被重新定义过:

<?php if ( has_post_thumbnail() && get_theme_mod( 'wpex_blog_entry_thumb', '1' ) == '1' ) { ?>
 <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark" class="loop-entry-img-link">
 <img src="<?php echo aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ), wpex_img('blog_entry_width'), wpex_img('blog_entry_height'), wpex_img('blog_entry_crop') ) ?>" alt="<?php echo the_title(); ?>" />
 </a>
 <?php } ?>

我改了一下,发现用标准模板的标签,插件生效了,然后自己微调下样式就一切OK了:

<?php if ( has_post_thumbnail() ) {
 the_post_thumbnail();
 } ?>

Gifffer.js

这是我最开始采用的方法,研究了一天,后来遇到“GIF Animation Preview”后,就放弃它了。优点嘛,就是小巧轻便,适合任何页面,非WP插件。当然缺点就是让我放弃它的原因:

  • 假开关,GIF第一次需要完整下载且播放一遍后,才出现开关,页面首次加载巨慢
  • 需要手动改代码,把src改成data-gifffer(这对程序来说不是难事,所以就还好)
  • 我的站点是瀑布流,内容Card自适应高度,但取不到图片高度,所以Card会层叠在一起(这是它不可用的主要原因)

gifffer-demo

 

用Google Code Prettify美化WP的代码显示

Blog重新改版,顺便把一直懒得改样式的“代码高亮显示”也优化了一下。需求很简单,只要引用代码时,看起来漂亮点就行。但想达到简洁漂亮这个目标,我发现还挺难的,多数插件展示效果都是很丑的编辑器的即视感。好在有 Google Code Prettify,同时搭配一个以它为基础,并且操作简单的插件,齐活。

使用“WP Code Prettify”插件

可以在WP官网 找到它,当然最简单的方式是直接在WP后台安装插件中,搜索“WP Code Prettify”,安装。插件本身就很轻量化,不会在编辑器上生成额外按钮或者功能键,就是利用现有编辑器,针对<pre>和<code>进行格式化。

Google Code Prettify,除了基本样式外,还支持不同主题,以达到不同的高亮样式,可以在 Color themes for Google Code Prettify 上找到更多主题。“WP Code Prettify”这个插件呢,除了操作简单外,也继承了更换主题的特点,这也是我喜欢这个插件的原因。方法简单,把下载的 Color Themes 上传到 “plugins/wp-code-prettify/css/”里就可以了。现在回到你的后台设置里,选择你喜欢的主题:

让 CSS 显示漂亮,还要多做一步工作,需要引用一个 lang-css.js ,就在“plugins/wp-code-prettify/js/”里,它的作用是更好的辨识 CSS 代码段。这个调用放在 </body> 即可:

<script src="http://yoursite.com/wp-content/plugins/wp-code-prettify/js/lang-css.js"></script>

更多效果,参见这里

让你的网站支持Retina

这个话题跟我刚刚换了支持 Retina 的笔记本有关。其实早有意识到,只是没 Retina 之前,认为这个工作是别人的事,毕竟现在支持“视网膜屏”的网站还是少数,但作为从业者,应该可以预见,未来3-5年,Retina 将会越来越普及,因为人们浏览网页的媒介正在发生巨大的变化,更多移动终端的介入,无疑会推动这一进程的发展。所以,早做准备,从现在开始,让你的网站支持 Retina!

普通网站/网页

方法有很多,但我发现最有效,也最方便的做法,就是利用 Retinajs ,原理也超简单,页面内调用 retina.js,比如你的图片叫 sample.png ,脚本会寻找同目录下是否有 sample@2x.png ,当屏幕是 Retina 时,脚本会自动切换成 @2x 的图片。如何操作:

首先在页面底部</body>之前,调用脚本:

<script type="text/javascript" src="/scripts/retina.js"></script>

如果你有图片,形如:

<img src="/images/my_image.png" />

当是 Retina 屏时,图片会被脚本自动替换为以下,当然前提是你传了 @2x 的图片:

<img src="/images/my_image@2x.png" />

行了,搞定。如果你想了解更详细的配置方法,可以到 Retinajs 官网,里面有很详细的说明,操作也非常简单。

Retinajs 官网:http://retinajs.com
Retinajs Github:https://github.com/imulus/retinajs (这里有更详细的配置说明)


WordPress

这个就简单啦,推荐使用“WP Retina 2x”的WP插件,在“安装插件”中直接搜索“WP Retina 2x”

插件网站:https://wordpress.org/plugins/wp-retina-2x/


更新 2014-11-05

内容图片在CDN上,Retinajs和插件不生效

我也是后来才发现这个问题。在之前的 WordPress提速方案 说过,我的WP使用了七牛云,所以内容图片都会被同步到云上,通过CDN加速。可是这样的话,js就没法取到@2x图片,也就没法实现内容图片的retina效果。我折腾了两天,开始还以为是配置有问题,后来官网上看也有人提到类似问题,说还需要CDN服务商提供支持之类的……算了,我的更新量也不大,麻烦点能承受。

目前方案:“笨”方法 + Image-set

“笨”方法指的是,所有内容图片直接上传@2x大小的图片,然后写死宽(width)高(height)。缺点是编辑时麻烦点,需要手动;优点是门槛低,易上手,而且只需要加载一张图,好管理,流量上其实比retinajs还少加载一张1x的。

<img src="/images/IMG_2014.jpg" width="1000" height="667" />

用 Image-set 来定义logo样式,这种不用经常变动的布局元素,用这种方法最好。

.site-logo { 
 background: url(images/logo.png) no-repeat 0 0;
 background-image: -webkit-image-set(url(images/logo.png) 1x, url(images/logo@2x.png) 2x);
 background-image: -moz-image-set(url(images/logo.png) 1x, url(images/logo@2x.png) 2x);
 background-image: -ms-image-set(url(images/logo.png) 1x, url(images/logo@2x.png) 2x);
 background-image: -o-image-set(url(images/logo.png) 1x, url(images/logo@2x.png) 2x);
}

用户研究和采集信息的使用

这是近期为项目做的一次用研,因为从规划到执行,这一整套方法都很好用,所以单独拎出来总结一下,对今后的项目也有很好的借鉴价值。要点和步骤如下:

  1. 明确测试目的和问题(产品目标、要验证什么问题)
  2. 拟订测试题目和任务
  3. 拟订用户分类,开始寻找并联系被访用户
  4. 逐一进行访谈(根据测试题目和任务)
  5. 每天访谈后,设计小组内进行一次沟通(总结当天情况)
  6. 全部访谈结束后,设计小组在一起,逐一复述、记录用户反馈,并对信息进行简单组织。(人物信息、使用场景、认知、用例、设计问题等)——用不同颜色的便利贴(Stick note)记录。每片便利贴上记录一块独立的信息,便于之后对信息做重组。
  7. 把设计问题单独挑出来组织,划分group,以及排出优先级——单开一个表记录
  8. Group剩下的信息,并给一小堆共性信息抽离出一个“结论/观点/假设”
  9. 把这些group整理,贴在一张大白纸上,存档,作为沟通和回忆的原始资料
  10. 依据现有信息组,提炼出整体结论,把得出的假设也列出来(如某功能用户不常用/没需求,可以去掉,再配合点击数据加以验证,就可以得出结论)——通过这些信息,我们是可以做出一些推断的。
  11. 依据现在信息组,还可以做人物志(Persona)。(Persona需不需要做,能不能做,取决于用户特征是否够鲜明/是否极端。如果特征不够鲜明,甚至可以互换,就不适合做。当然,还可以按其他维度,比如年龄)

整理过程和一些产出物

IMG_6041

每张sticker上记录一条信息,便于之后拆分和再归类

IMG_6042

一些零星的信息块,用不同颜色代表不同信息类型(如:场景、用例、认知等)

IMG_6043

如果有一些有联系的用例过程,可以马上链接在一起,成为一个信息组

IMG_6053

初步重新归类

IMG_6056

最后放在一张打白纸上,粘结实

IMG_6058

喏,最终的样子。右下角做个图例,标识下每个色块的属性