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為最小屏幕做考慮。

　　模板內頁以展示大圖為主，滿足攝友的需求。

　　相對其它多欄顯示的模板，這個模板的舞台中心感更強，視覺聚焦，浏覽每一張圖片都將成為一個焦點，不會被其它圖干擾!

　　橫向動態滾動浏覽的模板，映射著時間軌跡的概念，向左滾動，回到過去，向右滾動，來到現在，並即將穿向未來。它以記錄時效性的經歷為優勢。它的模塊下方都有時間標示。喜歡記錄生活的人，閱讀起來就像是在追尋自已生活的過去，猶如成長的軌跡，溫存著你的生活!

　　事實上在不同的藝術形式上，很多時候都崇尚簡約，皆因眾人皆知，創意之處是在於如何精辟取捨!

　　粗淺之談，不足之處歡迎大家拍磚!

　　本文地址：http://uedc.163.com/9068.html