N9之前写过这篇教学文章,以前博客被和谐了,现在的又遇到工作需要,不得不再重新提一下;
当然,我把文章标题换了,《图片保存的艺术》改成了《Web图片保存的艺术》;
图片是如何拍摄,如何设计的,不在本文的讨论范围,这里我只说一下基于对Web浏览的需要的JPG图片压缩;

话不多,原图地址在这里

大家可以看到,原图的属性(来源500px,摄影师:Daniel Bosma);

这么一张这么漂亮的图片,我很像通过网站分享给大家,我也想通过手机App分享给大家;
388kb的文件大小,电信的3G信号,用了2秒+,如果用户是移动的GPRS信号,那我只能说抱歉了,下载的等待时间将会超过8秒;

阅读全文 …

2013 年 4 月 8 日 吴成果, 吴技术

最近用手机浏览了下自己的Blog,突然觉得那个才叫一个2B啊;
作为一名有市场意式,有设计理念的码农,于是决定用2个星期时间,来小学习下移动终端Web开发;

首先,我先找出了下目前主流的显示终端的分辨率如下:

设备 分辨率
iPad 1024×768
iPhone 4 640×960
iPhone 3GS 320×480
HTC G7 480×800

最小的分辨率宽度是320;

本人的手机是HTC G7,用默认浏览器打开3G版新浪首页,是这样的:

阅读全文 …

2012 年 7 月 12 日 吴技术

瀑布流该怎么用?

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

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

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

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

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

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

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

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

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

未完待续……

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