IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

LOFTER轻博模板设计

网易用户体验设计中心博客 2012-03-04 17:52:23 累计浏览 2,106 次
本机暂存

    原图已失效

    负责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为最小屏幕做考虑。

    原图已失效

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

    原图已失效

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

    原图已失效

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

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

    粗浅之谈,不足之处欢迎大家拍砖!

同分类推荐文章

  1. 如何写好设计文档? (2026-06-23 08:00:00)
  2. Designing With Uncertainty: How AI Supercharges Probabilistic Thinking (2026-06-16 23:00:00)
  3. The Benefits Of Cognitive Inclusion In UX Research (2026-06-10 18:00:00)

查看更多 设计 文章 →

建议继续学习

  1. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  2. 我的 Sublime Text 2 笔记 (累计阅读 16,729)
  3. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)
  4. 30套最好的网站开发与设计中使用的小型图标 (累计阅读 12,529)
  5. 各公司对前端开发的职位描述 (累计阅读 10,405)
  6. iframe大小自适应 (累计阅读 10,057)
  7. sns视觉设计分享 (累计阅读 9,523)
  8. 网站导航设计的6大分类 (累计阅读 9,298)
  9. 浏览器的渲染原理简介 (累计阅读 8,377)
  10. 解决IE6从Nginx服务器下载图片不Cache的Bug (累计阅读 8,357)