![LOFTER轻博模板设计1](/Images/jiaocheng/2015-05-0713/818653460.jpg)
负责LOFTER模板设计工作已有一些时间,一直没机会写写总结,趁此机会写些文字供大家观赏!
或许大家听的比较多的一句话是:“若把传统博客比喻为一本书,微博就是一份街头小报,而轻博客就像是一本杂志。与传统博客相比,轻博客的方式更简洁”。
个人觉得LOFTER首先是个好用的工具,然后才有可能成为一个好的社区。LOFTER必须简单易用,有一个简洁的发布操作端口(电脑页面及移动客户端),和精美的展示空间(博客模版和Timeline页面);是的,精美的展示空间——博客模板。
一、模板的重要性
首先分享一下我和LOFTER产品策划章行的交流,他说的一句话:“打个比喻,如果一个产品是一个女人,怎样才能爱上这个女人呢?你首先看的是她的第一印象,这个姑娘很美,你蠢蠢欲动了,你有了和她交往的欲望,你有了包容她小缺点小毛病的耐心,相处了一下,发现她性格也不错又有内涵,于是你彻底的爱上她了”。这是感性认识,但是我觉得他说的很对,不是吗?
![LOFTER轻博模板设计2](/Images/jiaocheng/2015-05-0713/3843730907.png)
从使用者的角度,博客是为用户记录内容展示内容的,模板做的好会为博主的内容加分,就像一套满意的新衣,穿在身上心情格外开朗。反之糟糕无比!所以模板对于整个产品来说是很重要的。
![LOFTER轻博模板设计3](/Images/jiaocheng/2015-05-0713/1901335899.png)
它常常充当门面的作用,我想很多用户并不是先注册然后才登录的吧?嗯,是的!有一部份新用户直接到了个人主页,直接面对了博客的模板,这个时候面对第一次来的用户,个人模板就好比产品的门面招牌一样,会给用户留下第一印象,爱不爱她就看模板的魅力了!
![LOFTER轻博模板设计4](/Images/jiaocheng/2015-05-0713/4277416479.png)
关于模板的重要性,我暂且说到这里,我们接下来谈谈模板的特点。
二、LOFTER模板特点
它有四种类型的内容,即:图片、音乐、文字、视频四种。
1、展示图片的模板:a、通常是为了满足摄影用户,图片展示面积要够大,够爽B、模板首页一屏能看多图 c、背景要暗,突显当前图片 d、边框的设计让图片更突出,或让图片更精美e、
2、展示音乐的模板:a、做成唱片封面的感觉 b、有音乐符号或音乐专辑的外观 c、CD碟的外观 d、黑胶碟的质感 e、播放器的元素
3、展示文字模板:a、信纸质感 b、便签外观 c、排版便于阅读 d、做成一本杂志 e、有翻书特效 f、办公桌场影、悠闲的氛围、透着阳光、小资的感觉
4、展示视频模板:a、播放器外观 b、胶片质感的背景 c、背景要灰暗,突显内容 d、Hover动画效果 e、电影元素
备注:没有讲到的地方欢迎大家进行补充
三、LOFTER模板设计过程。
上面说到四种类型的模板,在这里我也不一一拿来举例了,挑选一个去年11月份做的一个横向又以展示图片为主的模板,跟大家说一下设计过程。
当时产品策划跟我说LOFTER目前有很多竖向排列的模板,即从上到下加载显示的模板。希望接下来能做一些横向加载显示阅读的模板,而且是以展示图片为主。
接到任务后,一般我都会给这个设计定一些基调:为了符合产品气质,我选择灰色,另外还有原因是,灰色当背景能适应多种复杂的色彩。就像 Photoshop的制作间的背景色是灰色,当然它的明度是有考究的,我想也是为了适应各种色彩而设计的。在此就不扩大此论点了。另外为了突显图片,明度不能太亮。而且内页显示要大图,为了满足摄友们的需求。要够爽!
视觉情感关键词:平稳、舒适、明显,关键词不宜定太多个,一般我觉得挑三到五个已经精挑细选过的关键词便可,这个观点非常的主观,不绝对。但是因为我觉得定多了以后,你很难把所有的关键词都安排到你的作品里去,另外多了以后,很容易出现同义词,也有时候定多了,还发现有反义词出现,好比“休闲”“严肃”,你又想在画面里表现休闲,又要表现严肃。做不好,就像搬石头砸自己的脚,那就做死人不赔钱啦!
在动手之前,突然想起在这之前LOFTER做过一个活动叫:“首页交给你”。过程稿有很多张是横版的,觉得可能对我设计横向模板有帮助!
(图一)这张图以横向平行的排版,使画面有了安静平稳的感觉,如果改成模板的话,登录框部份可以改成:个人信息和模板常用功能。但是安排在这个位置又太居中了,会抢了内容的眼球。另外它是单图,模板首页是多图显示的,这点也需要修改一下。
![LOFTER轻博模板设计5](/Images/jiaocheng/2015-05-0713/1015834219.png)
(图二)这张也是单图,看到这张,假想它是一排图片,从右往左滚动加载显示会不会很帅?另外,登录框的位置不能放在黄金分割线上,那样还会很抢内容的眼球。它应在黄金分割线再偏左一些的地方,更不能在黄金分割线偏右的地方,因为那样已经在屏幕的外面了。
![LOFTER轻博模板设计6](/Images/jiaocheng/2015-05-0713/3132130711.png)
(图三)这张也具备了横版,但是各方面没有图一和图二适合,就不做多考虑了。
![LOFTER轻博模板设计7](/Images/jiaocheng/2015-05-0713/55522645.png)
按着以上的思路,做出了以下博客模板。
此模板横向平行滚动让人有一种平稳的感觉,极少的色彩运用不会令读者分心,有舒适感, 大面积的留白让内容更加明显的展示在读者眼前了。
![LOFTER轻博模板设计8](/Images/jiaocheng/2015-05-0713/3304420710.png)
横向滚动的模版,内容显示不多,但十分精致,第一块内容无论是图片、音乐、视频、文字,都必须按一样大小的模块进行排版设计。
![LOFTER轻博模板设计9](/Images/jiaocheng/2015-05-0713/2666277563.png)
另外图片的排版,主要有横图和竖图,经过试验,最终我们选择了横图100%宽度适应,竖图使用100%高度适应的方案,这样大部分横图都能完整理显示出来,而竖图放在一个横向的模块里,两边会出现大量留白,但好处是能完整显示图片出来。
![LOFTER轻博模板设计10](/Images/jiaocheng/2015-05-0713/3067769394.png)
![LOFTER轻博模板设计11](/Images/jiaocheng/2015-05-0713/2534109076.png)
这里红色覆盖区1024x768PX为最小屏幕做考虑。
![LOFTER轻博模板设计11](/Images/jiaocheng/2015-05-0713/2534109076.png)
模板内页以展示大图为主,满足摄友的需求。
![LOFTER轻博模板设计12](/Images/jiaocheng/2015-05-0713/3618948761.png)
相对其它多栏显示的模板,这个模板的舞台中心感更强,视觉聚焦,浏览每一张图片都将成为一个焦点,不会被其它图干扰!
![LOFTER轻博模板设计13](/Images/jiaocheng/2015-05-0713/1274713128.jpg)
横向动态滚动浏览的模板,映射着时间轨迹的概念,向左滚动,回到过去,向右滚动,来到现在,并即将穿向未来。它以记录时效性的经历为优势。它的模块下方都有时间标示。喜欢记录生活的人,阅读起来就像是在追寻自已生活的过去,犹如成长的轨迹,温存着你的生活!
事实上在不同的艺术形式上,很多时候都崇尚简约,皆因众人皆知,创意之处是在于如何精辟取舍!
粗浅之谈,不足之处欢迎大家拍砖!
本文地址:http://uedc.163.com/9068.html