LOFTER轻博模板设计

负责LOFTER模板设计工作已有一些时间，一直没机会写写总结，趁此机会写些文字供大家观赏！

或许大家听的比较多的一句话是：“若把传统博客比喻为一本书，微博就是一份街头小报，而轻博客就像是一本杂志。与传统博客相比，轻博客的方式更简洁”。

个人觉得LOFTER首先是个好用的工具，然后才有可能成为一个好的社区。LOFTER必须简单易用，有一个简洁的发布操作端口（电脑页面及移动客户端），和精美的展示空间（博客模版和Timeline页面）；是的，精美的展示空间——博客模板。
一、模板的重要性

首先分享一下我和LOFTER产品策划章行的交流，他说的一句话：“打个比喻，如果一个产品是一个女人，怎样才能爱上这个女人呢？你首先看的是她的第一印象，这个姑娘很美，你蠢蠢欲动了，你有了和她交往的欲望，你有了包容她小缺点小毛病的耐心，相处了一下，发现她性格也不错又有内涵，于是你彻底的爱上她了”。这是感性认识，但是我觉得他说的很对，不是吗？

从使用者的角度，博客是为用户记录内容展示内容的，模板做的好会为博主的内容加分，就像一套满意的新衣，穿在身上心情格外开朗。反之糟糕无比！所以模板对于整个产品来说是很重要的。

它常常充当门面的作用，我想很多用户并不是先注册然后才登录的吧？嗯，是的！有一部份新用户直接到了个人主页，直接面对了博客的模板，这个时候面对第一次来的用户，个人模板就好比产品的门面招牌一样，会给用户留下第一印象，爱不爱她就看模板的魅力了！

关于模板的重要性，我暂且说到这里，我们接下来谈谈模板的特点。

二、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做过一个活动叫：“首页交给你”。过程稿有很多张是横版的，觉得可能对我设计横向模板有帮助！

（图一）这张图以横向平行的排版，使画面有了安静平稳的感觉，如果改成模板的话，登录框部份可以改成：个人信息和模板常用功能。但是安排在这个位置又太居中了，会抢了内容的眼球。另外它是单图，模板首页是多图显示的，这点也需要修改一下。

（图二）这张也是单图，看到这张，假想它是一排图片，从右往左滚动加载显示会不会很帅？另外，登录框的位置不能放在黄金分割线上，那样还会很抢内容的眼球。它应在黄金分割线再偏左一些的地方，更不能在黄金分割线偏右的地方，因为那样已经在屏幕的外面了。

（图三）这张也具备了横版，但是各方面没有图一和图二适合，就不做多考虑了。

按着以上的思路，做出了以下博客模板。

此模板横向平行滚动让人有一种平稳的感觉，极少的色彩运用不会令读者分心，有舒适感，大面积的留白让内容更加明显的展示在读者眼前了。

横向滚动的模版，内容显示不多，但十分精致，第一块内容无论是图片、音乐、视频、文字，都必须按一样大小的模块进行排版设计。

另外图片的排版，主要有横图和竖图，经过试验，最终我们选择了横图100%宽度适应，竖图使用100%高度适应的方案，这样大部分横图都能完整理显示出来，而竖图放在一个横向的模块里，两边会出现大量留白，但好处是能完整显示图片出来。

这里红色覆盖区1024x768PX为最小屏幕做考虑。

模板内页以展示大图为主，满足摄友的需求。

相对其它多栏显示的模板，这个模板的舞台中心感更强，视觉聚焦，浏览每一张图片都将成为一个焦点，不会被其它图干扰！

横向动态滚动浏览的模板，映射着时间轨迹的概念，向左滚动，回到过去，向右滚动，来到现在，并即将穿向未来。它以记录时效性的经历为优势。它的模块下方都有时间标示。喜欢记录生活的人，阅读起来就像是在追寻自已生活的过去，犹如成长的轨迹，温存着你的生活！

事实上在不同的艺术形式上，很多时候都崇尚简约，皆因众人皆知，创意之处是在于如何精辟取舍！

粗浅之谈，不足之处欢迎大家拍砖！

欢迎注册登录www.lofter.com 到个人主页右上角>> >> 选择《夜太黑》即可体验这个横向滚动式模板！

LOFTER轻博模板设计相关推荐

html自动适应wap,html5响应式/多彩小清新个人轻博客模板(自适应手机wap)
html5响应式自适应多彩轻博客模板,适合个人博客,美文网,图文网站,设计十分简单.兼容所有主流浏览器.自适应手机wap,多变颜色,会自动根据栏目自动变色. 程序修改和使用极其简单,除一张背景图,根据 ...
用 Flask 来写个轻博客 (14) — M(V)C_实现项目首页的模板
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录目录前文列表实现所需要的视图函数实现 home.html 模板代码分析实现效 ...
用 Flask 来写个轻博客 (12) — M(V)C_编写和继承 Jinja 模板
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录目录前文列表扩展阅读使用 Bootstrap 编写 Jinja 模板文件继承一 ...
个人博客前端模板_博客设计——概述
在目前已有的许多社交软件及平台中,博客始终保持着自己的地位,始终有一大批学生和各行各业职业人员喜欢通过博客的方式记录和分享自己在生活中或者学术上等各方面的经验,这不仅方便发表者个人今后解决类似的问题, ...
网易微博将正式关闭用户迁至轻博客LOFTER
新浪科技讯 11月4日中午消息,继腾讯撤销微博事业部之后,网易微博宣布将正式关闭.今日网易微博页面提醒用户将迁移到轻博客LOFTER以保存原内容,但也意味着原网易微博用户关系链的断裂,网易微博将不复存 ...
网易微博宣布将用户迁移至轻博客Lofter
再见微博的黄金时代!网易微博宣布将用户迁移至轻博客Lofter http://www.nbd.com.cn 2014-11-05 17:24 来源: 36氪今天,网易微博在页面顶端发出公告,宣布网易 ...
看网易的lofter，预测轻博客的未来
近日,作为四大门户,唯一没有涉足微博的网易,终于推出了自己的轻博客lofter,首先我们先看看网易的lofter的界面由于本人没有邀请码,因此无法探知其具体功能,但是我们可以把这个界面与国外的Tum ...
HTML5+CSS大作业——简洁的个人博客设计(7页) 学生HTML个人网页作业作品下载个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作
HTML5+CSS大作业--简洁的个人博客设计(7页) 学生HTML个人网页作业作品下载个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作常见网页设计作业题材有个人. 美食. 公 ...
Div+CSS、鼠标滑过特效、导航栏效果——简洁的个人博客设计(7页) 学生HTML个人网页作业作品下载个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作
HTML5+CSS大作业--简洁的个人博客设计(7页) 学生HTML个人网页作业作品下载个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作常见网页设计作业题材有个人. 美食. 公 ...
用 Flask 来写个轻博客 (33) — 使用 Flask-RESTful 来构建 RESTful API 之二
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录目录前文列表扩展阅读构建 RESTful Flask API 定义资源路由格式 ...

LOFTER轻博模板设计

LOFTER轻博模板设计相关推荐

最新文章

热门文章