Lofter redesign

從14年底開始使用Lofter,一直把它用來存放和展示自己的作品集,憑借這份在線作品集在14年底拿到了實(shí)習(xí)offer,所以之后一直把Lofter鏈接放在簡歷里,作為自己pdf版作品集的補(bǔ)充,補(bǔ)充展示我的寫作和思考,以及動(dòng)效制作能力。

雖然Lofter一直不溫不火,但我依然用著它,主要出自以下原因:

1. 個(gè)性化定制主頁。多種版本的主頁模板加上可修改的配色,可以定制出無數(shù)種主頁。個(gè)性化的個(gè)人主頁對設(shè)計(jì)師的作品集來說太重要了。

2. 逼格較高。與簡書大眾化的感覺不同,Lofter給人的感覺是小眾的、藝術(shù)的、精神的,在Lofter放作品集逼格較高。

3. 圖片模式。Lofter除了可發(fā)文字為主的文章外,還可分別發(fā)圖片、音樂、視頻為主的內(nèi)容,在個(gè)人主頁上預(yù)覽的效果也是分別以圖片、音樂、視頻為主。其中圖片為主的發(fā)布模式非常適合設(shè)計(jì)師放圖。

就是這三個(gè)重要的優(yōu)勢讓我一直用著lofter。在使用Lofter的過程中,也遇到許多不爽的地方,在此提出并給出解決方案。

1. 定位不清晰?

首先是lofter定位不清晰。在web端,lofter傾向于作為輕博客而存在,而在移動(dòng)端則傾向于作為圖片社交應(yīng)用而存在。

其web界面像極了國外的輕博客Tumblr,如下圖,左邊是lofter界面,右邊是tumblr界面:

web 端對比

而移動(dòng)端的界面則像極了國外的社交軟件instagram,如下圖,看底欄tab的布局是一模一樣的,圖標(biāo)的風(fēng)格都是一致的。就連雙擊文章或圖片即為喜歡,并冒出一個(gè)愛心桃來的操作動(dòng)作都是一樣的。

移動(dòng)端首頁對比

移動(dòng)端個(gè)人資料頁對比

移動(dòng)端個(gè)人主頁對比

上圖是lofter和instagram個(gè)人主頁的對比,紅色圈出來的部分是一樣的,兩者都有九宮格模式和列表模式。

以上對比基本可以看出,lofter web端模(chao)仿(xi)了tumblr,而移動(dòng)端模(chao)仿(xi)了instagram,這就導(dǎo)致lofter這個(gè)產(chǎn)品本身既像輕博客又像圖片社交,但兩者都沒做好。

作為web端的輕博客,lofter用“文字”發(fā)布的博文對圖片支持不友好,體現(xiàn)在 a.無法看大圖 b. 直接粘貼到圖片不能顯示,c.首頁的閱讀區(qū)域太窄

a. 在文字中插入的圖片無法看大圖。這個(gè)是最不能忍的。我寫字的地方:簡書、Lofter、微信公眾號、知乎專欄,唯獨(dú)Lofter文字中的圖片無法看大圖。所以有些需要看大圖的文章我都建議大家不要看Lofter,因此Lofter的流量就這樣流失了啊。知乎上有人說,lofter博文不支持大圖是故意的,如下,是因?yàn)長ofter希望用戶輕文字而重圖片,引導(dǎo)用戶多上傳圖片,也就是向圖片社交傾斜。

網(wǎng)站技術(shù)不足可以通過逐漸修正來改善,但Lofter的這些技術(shù)問題是故意的:Lofter是一個(gè)既不鼓勵(lì)你以文字方式發(fā)表、也不鼓勵(lì)你一次發(fā)好幾張圖片的強(qiáng)迫癥專制者,它只想讓你把它當(dāng)成像Instrgram那樣的發(fā)圖機(jī)使,只想指導(dǎo)你適應(yīng)以圖片方式每次只發(fā)一張圖片的方式,如果你不適應(yīng)它就用殘破的文字編輯功能和只顯示你第一張圖來迫使你適應(yīng)。他們不歡迎寫文字的人。開發(fā)者有自己的喜好和方向沒錯(cuò),但它引導(dǎo)你的方式不是向你展示它的方式如何好,而是極力損害你以自己習(xí)慣的方式生產(chǎn)內(nèi)容的體驗(yàn)。

而我認(rèn)為,如果lofter重圖片而輕文字,就不應(yīng)該讓文字入口和圖片入口并排同級地出現(xiàn)在主頁頂部。作為一個(gè)經(jīng)常在lofter上寫文字并經(jīng)常在文中插圖的用戶,我希望lofter的文字中插入的圖片可以看大圖

b. 從其他地方直接復(fù)制粘貼過來圖片不能顯示。這里的不能顯示是對除博主之外的其他人來說的,博主自己能看到粘貼后的圖片,而其他人都看不到。這就導(dǎo)致博主以為文章編輯好了,但還是收到別人反饋看不到圖的情況。解決辦法是:讓博主和其他人看到統(tǒng)一的內(nèi)容,要么像知乎那樣粘貼的圖在保存后消失不見讓博主重新用編輯器插入圖片,要么就像簡書這樣粘貼的圖就是插入的圖,省去很多麻煩。

c. 首頁的閱讀區(qū)域太窄。首頁閱讀區(qū)域太窄也許是在展示圖片和展示文字之間做的妥協(xié)。如果僅展示博文,閱讀區(qū)域可以任意寬度。但如果用來展示圖片,就需要限定寬度,否則容易瀏覽到模糊的圖片。所有圖片,無論大小,在首頁瀏覽時(shí)都會(huì)被拉伸為同樣的寬度,如下圖所示。如果閱讀區(qū)域太寬,任何寬度小于閱讀區(qū)域的圖片都會(huì)變得模糊,所以閱讀區(qū)域不能太寬。正因?yàn)樵诓┪暮蛨D片中妥協(xié),導(dǎo)致首頁閱讀寬度用來閱讀博文顯得太窄。博文的展開閱讀全文時(shí)寬度和瀏覽時(shí)的寬度相同,導(dǎo)致閱讀體驗(yàn)不夠友好。我的改進(jìn)方法是閱讀全文時(shí)另起一頁,寬度比瀏覽時(shí)更寬。為了不浪費(fèi)瀏覽時(shí)的寬度,不妨將內(nèi)容并排放兩列放在首頁

上傳的圖片
主頁預(yù)覽圖

2. 其他設(shè)計(jì)細(xì)節(jié)

a. 標(biāo)簽訂閱不夠明顯。Lofter以標(biāo)簽來對文章進(jìn)行分類,標(biāo)簽靠用戶手動(dòng)添加,每個(gè)標(biāo)簽下有相應(yīng)的文章,用戶可以通過訂閱標(biāo)簽來訂閱某個(gè)主題的文章。Lofter的訂閱入口在搜索框上,當(dāng)用戶點(diǎn)擊搜索框時(shí),下方會(huì)彈出用戶訂閱的標(biāo)簽,如下圖:

訂閱標(biāo)簽入口

這個(gè)入口隱藏有點(diǎn)深,希望把訂閱標(biāo)簽作為導(dǎo)航固定在主頁上

b. 首頁文章不能按單獨(dú)類別的內(nèi)容。比如單獨(dú)看文字、單獨(dú)看圖片、或者音樂、視頻。改進(jìn)的設(shè)計(jì)在左側(cè)二級導(dǎo)航加入這四個(gè)類別,供首頁瀏覽內(nèi)容篩選。

最終設(shè)計(jì)如下圖所示,設(shè)計(jì)點(diǎn)有:

1.首頁瀏覽以兩列并排方式,充分利用寬屏優(yōu)勢。

2. 閱讀文字內(nèi)容時(shí)另起一個(gè)頁面如下下圖所示,以較大寬度閱讀。

3. 左側(cè)二級導(dǎo)航加上文字、圖片、音樂、視頻這四類供篩選。

4. 左側(cè)二級導(dǎo)航加上訂閱標(biāo)簽,方便用戶快速進(jìn)入標(biāo)簽內(nèi)容瀏覽。

======我的公眾號:BaolingUX========

歡迎關(guān)注我的微信公眾號“BaolingUX”,產(chǎn)品設(shè)計(jì)文章持續(xù)更新.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容