負(fù)責(zé)LOFTER模板設(shè)計(jì)工作已有一些時(shí)間，一直沒機(jī)會(huì)寫寫總結(jié)，趁此機(jī)會(huì)寫些文字供大家觀賞！

或許大家聽的比較多的一句話是：“若把傳統(tǒng)博客比喻為一本書，微博就是一份街頭小報(bào)，而輕博客就像是一本雜志。與傳統(tǒng)博客相比，輕博客的方式更簡(jiǎn)潔”。

個(gè)人覺得LOFTER首先是個(gè)好用的工具，然后才有可能成為一個(gè)好的社區(qū)。LOFTER必須簡(jiǎn)單易用，有一個(gè)簡(jiǎn)潔的發(fā)布操作端口（電腦頁(yè)面及移動(dòng)客戶端），和精美的展示空間（博客模版和Timeline頁(yè)面）；是的，精美的展示空間——博客模板。

一、模板的重要性

首先分享一下我和LOFTER產(chǎn)品策劃章行的交流，他說的一句話：“打個(gè)比喻，如果一個(gè)產(chǎn)品是一個(gè)女人，怎樣才能愛上這個(gè)女人呢？你首先看的是她的第一印象，這個(gè)姑娘很美，你蠢蠢欲動(dòng)了，你有了和她交往的欲望，你有了包容她小缺點(diǎn)小毛病的耐心，相處了一下，發(fā)現(xiàn)她性格也不錯(cuò)又有內(nèi)涵，于是你徹底的愛上她了”。這是感性認(rèn)識(shí)，但是我覺得他說的很對(duì)，不是嗎？

從使用者的角度，博客是為用戶記錄內(nèi)容展示內(nèi)容的，模板做的好會(huì)為博主的內(nèi)容加分，就像一套滿意的新衣，穿在身上心情格外開朗。反之糟糕無(wú)比！所以模板對(duì)于整個(gè)產(chǎn)品來(lái)說是很重要的。

它常常充當(dāng)門面的作用，我想很多用戶并不是先注冊(cè)然后才登錄的吧？嗯，是的！有一部份新用戶直接到了個(gè)人主頁(yè)，直接面對(duì)了博客的模板，這個(gè)時(shí)候面對(duì)第一次來(lái)的用戶，個(gè)人模板就好比產(chǎn)品的門面招牌一樣，會(huì)給用戶留下第一印象，愛不愛她就看模板的魅力了！

關(guān)于模板的重要性，我暫且說到這里，我們接下來(lái)談?wù)勀０宓奶攸c(diǎn)。

二、LOFTER模板特點(diǎn)

它有四種類型的內(nèi)容，即：圖片、音樂、文字、視頻四種。

1、展示圖片的模板：a、通常是為了滿足攝影用戶，圖片展示面積要夠大，夠爽B、模板首頁(yè)一屏能看多圖 c、背景要暗，突顯當(dāng)前圖片 d、邊框的設(shè)計(jì)讓圖片更突出，或讓圖片更精美e、

2、展示音樂的模板：a、做成唱片封面的感覺 b、有音樂符號(hào)或音樂專輯的外觀 c、CD碟的外觀 d、黑膠碟的質(zhì)感 e、播放器的元素

3、展示文字模板：a、信紙質(zhì)感 b、便簽外觀 c、排版便于閱讀 d、做成一本雜志 e、有翻書特效 f、辦公桌場(chǎng)影、悠閑的氛圍、透著陽(yáng)光、小資的感覺

4、展示視頻模板：a、播放器外觀 b、膠片質(zhì)感的背景 c、背景要灰暗，突顯內(nèi)容 d、Hover動(dòng)畫效果 e、電影元素

備注：沒有講到的地方歡迎大家進(jìn)行補(bǔ)充

三、LOFTER模板設(shè)計(jì)過程。

上面說到四種類型的模板，在這里我也不一一拿來(lái)舉例了，挑選一個(gè)去年11月份做的一個(gè)橫向又以展示圖片為主的模板，跟大家說一下設(shè)計(jì)過程。

當(dāng)時(shí)產(chǎn)品策劃跟我說LOFTER目前有很多豎向排列的模板，即從上到下加載顯示的模板。希望接下來(lái)能做一些橫向加載顯示閱讀的模板，而且是以展示圖片為主。

接到任務(wù)后，一般我都會(huì)給這個(gè)設(shè)計(jì)定一些基調(diào)：為了符合產(chǎn)品氣質(zhì)，我選擇灰色，另外還有原因是，灰色當(dāng)背景能適應(yīng)多種復(fù)雜的色彩。就像Photoshop的制作間的背景色是灰色，當(dāng)然它的明度是有考究的，我想也是為了適應(yīng)各種色彩而設(shè)計(jì)的。在此就不擴(kuò)大此論點(diǎn)了。另外為了突顯圖片，明度不能太亮。而且內(nèi)頁(yè)顯示要大圖，為了滿足攝友們的需求。要夠爽！

視覺情感關(guān)鍵詞：平穩(wěn)、舒適、明顯，關(guān)鍵詞不宜定太多個(gè)，一般我覺得挑三到五個(gè)已經(jīng)精挑細(xì)選過的關(guān)鍵詞便可，這個(gè)觀點(diǎn)非常的主觀，不絕對(duì)。但是因?yàn)槲矣X得定多了以后，你很難把所有的關(guān)鍵詞都安排到你的作品里去，另外多了以后，很容易出現(xiàn)同義詞，也有時(shí)候定多了，還發(fā)現(xiàn)有反義詞出現(xiàn)，好比“休閑”“嚴(yán)肅”，你又想在畫面里表現(xiàn)休閑，又要表現(xiàn)嚴(yán)肅。做不好，就像搬石頭砸自己的腳，那就做死人不賠錢啦！

在動(dòng)手之前，突然想起在這之前LOFTER做過一個(gè)活動(dòng)叫：“首頁(yè)交給你”。過程稿有很多張是橫版的，覺得可能對(duì)我設(shè)計(jì)橫向模板有幫助！

（圖一）這張圖以橫向平行的排版，使畫面有了安靜平穩(wěn)的感覺，如果改成模板的話，登錄框部份可以改成：個(gè)人信息和模板常用功能。但是安排在這個(gè)位置又太居中了，會(huì)搶了內(nèi)容的眼球。另外它是單圖，模板首頁(yè)是多圖顯示的，這點(diǎn)也需要修改一下。

（圖二）這張也是單圖，看到這張，假想它是一排圖片，從右往左滾動(dòng)加載顯示會(huì)不會(huì)很帥？另外，登錄框的位置不能放在黃金分割線上，那樣還會(huì)很搶內(nèi)容的眼球。它應(yīng)在黃金分割線再偏左一些的地方，更不能在黃金分割線偏右的地方，因?yàn)槟菢右呀?jīng)在屏幕的外面了。

（圖三）這張也具備了橫版，但是各方面沒有圖一和圖二適合，就不做多考慮了。

標(biāo)簽： 輕博模板設(shè)計(jì) LOFTER 網(wǎng)頁(yè)設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。