对于实现长微博功能,互联网上一搜有一堆,但这都需要用户自己再重复输入一次内容很麻烦,比如这里这里,和这里;

不过呢,博主在36kr看到了他们网站自己的长微博,觉得,这个长微博应该没有什么技术含量,于是也就自己琢磨着实现~
效果大家看这里~
http://weibo.com/3905332908/AqpDHANoM
(PS:博主使用的是PHP,至于大内阿萨皮和爪哇,原理应该和PHP一样,但代码肯定就不同啦~)

长微博嘛,肯定是文字+图片的排列形式;
所以,这里想到了2个关键的PHP函数
imagettfbbox (点击查看使用方法)
imagecopymerge (点击查看使用方法)

接下来,就是读取内容并生成长微博了;
但是在实际Coding过程中遇到2个难点;

1.文字排版问题
这里博主选择了微软雅黑字体,比较雅呗~
长微肯定是固定宽度的,高度随着文字和图片的内容增加而增加,所以,我们必须给长微博定一个固定宽度;
宽度定好了,就是文字排版问题了,要根据文章内容,判断换行,还要考虑到文字排版达到固定宽度后,还需要自动换行;
于是,我用了一个比较SB的办法先处理文字:

阅读全文 …

2014 年 1 月 5 日 吴技术

先来看几个网站实例:

1.bakkenbaeck.no

2.greatcoffeeapp.com

3.lanu.fm

模糊背景的优势: 
1.简单又不失美观
2.突出和衬托主题内容
3.不夺取用户的目光焦点

模糊背景的图的尺寸:
考虑到现在主流浏览器的分辨率最高为2880×1800(Mac的Retina屏);
但本博主不建议使用如此高清的图片作为网页背景,因为一张2880×1800分辨率的图片,大小在1Mb以上;
大多数用户的显示器分辨率不会超过1920×1200,所以这个1900×1200分辨率的图片作为模糊背景图,完全合适;
如果仅仅考虑到中国用户的显示器分辨率,今天1680×1050的图片也足矣;
阅读全文 …

2012 年 11 月 15 日 吴成果, 吴技术

瀑布流该怎么用?

瀑布流这也好,那也好,于是乎各大网站的产品经理一夜间都好似着了魔似得,全部给上瀑布流;
那么瀑布流到底该不该用,该怎么用呢?

首先就要从用户的浏览行为开始说起;
当用户到达一个Web页面的时候,用户的浏览行为有两种最基本的可能,有目的性的检索和无目的性的浏览;

对于缺乏明确目的性的浏览行为,更适合使用瀑布流作为Web展现形式;
相反的,对于有明确目的性的浏览行为,就比较适合使用垂直线性的浏览模式了;

Pinterest“瀑布流”背后的心理学】这篇文章中提到:
人阅读文字是一种串行模式,必须一个词一个词按确定的顺序线性地读下来;
而人观赏图片是并行模式,他可以在众多图片中快速地扫视,然后选择其中自己感兴趣的部分,这种方式比线性模式找到感兴趣内容的效率要高得多。
因此瀑布流更适合使用在图片的展示网站中,而不适合用于文本信息的展示。
以上内容,肯定很多人会觉得我白说了,其实啦,是有点白说,用瀑布流的布局模式展现图片,已经被当下很多产品经理们视为一种默认的展现方式了,那么请稍安勿躁,继续往下看;

当用户把图片作为主要的浏览对象,文字在瀑布流的布局中就自然成为了辅助浏览的信息
少量的文字能非常好的起到辅助用户检索信息的作用,但是,过多的文字将会给用户检索信息造成负担(同样的,大用户头像和过多的操作按钮也会造成这种负面效果);
除了图片信息的展示,很多产品经理会考虑把基于图片而产生的评论等信息,也放置在瀑布流的布局中,
甚至还要在瀑布流页面内,提供更多的交互功能和按钮(诸如评论/喜欢/加好友/收藏/关注/转发….),这-_-! 我只能说,慎重,再慎重;

这里要赞一下“” ,以文字主题作为仅有的辅助阅读信息,交互按钮也只有一个,那就是“喜欢+1”,图:

但是我认为“逛”有一个浏览缺陷,那就是对于大屏幕的用户来说,没有做到自适应屏幕宽度;

两边的空白,会使用户发生多余的下拉滚动操作,同时,同屏幕展现的图片信息量也少了,不知这是考虑到客户端带宽问题还是为了减少用户检索复杂度而故意设置的,这是为什么呢?
瀑布流布局浅析 这篇文章中指出了三种瀑布流的实现方式,自适应宽度的瀑布流布局形式在技术层面上应该是没有难度 :-D

大多数瀑布流网站也都使用了自适应宽度的排列方式,总结了下开启自适应宽度和未开启自适应宽度的瀑布流网站如下:
启用自适应宽度的网站有:花瓣美丽说拼范迷尚网发现啦蛋花儿
未启用自适应宽度的网站有:堆糖蘑菇街贝壳网

未完待续……

2012 年 5 月 1 日 吴技术, 吴观点, 吴评论