當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  建站經(jīng)驗(yàn) >  正文

APP設(shè)計(jì)經(jīng)典:Pinterest的交互細(xì)節(jié)

 2014-09-07 13:47  來(lái)源:   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)

導(dǎo)語(yǔ):Pinterest有著極棒的交互設(shè)計(jì)細(xì)節(jié),同時(shí),它構(gòu)建的交流平臺(tái)有十分豐富的設(shè)計(jì)作品。要知道,絕佳的設(shè)計(jì)能吸引新用戶去更好的體驗(yàn)產(chǎn)品。

Pinterest是我經(jīng)常使用的一個(gè)App,在我同時(shí)關(guān)注的好幾個(gè)有關(guān)于UI和UX設(shè)計(jì)平臺(tái)的同時(shí),Pinterest幾乎是最棒的。無(wú)論我自己有多么的缺乏社交,在Pinterest仍有成百上千的用戶在不停的啟發(fā)靈感,交流合作,不斷創(chuàng)作。雖然沒(méi)有給用戶的作品帶來(lái)直接的經(jīng)濟(jì)效益,但Pinterest構(gòu)建的交流平臺(tái)也帶來(lái)了很多用處。

另外,Pinterest上豐富的設(shè)計(jì)作品,對(duì)很多人來(lái)說(shuō)是非常實(shí)用的。在那兒實(shí)在有太多不同尋常的網(wǎng)頁(yè)設(shè)計(jì)和iOS設(shè)計(jì)作品,讓人們更多的關(guān)注自己的需求。在本文中我會(huì)更多的介紹Pinterest極棒的交互設(shè)計(jì)細(xì)節(jié)。

1.啟動(dòng)畫(huà)面

我十分熱愛(ài)體驗(yàn)不同App的啟動(dòng)畫(huà)面,要知道啟動(dòng)過(guò)程中給用戶帶來(lái)的激活體驗(yàn)是十足微妙的,由此,這對(duì)設(shè)計(jì)師來(lái)說(shuō)也是一個(gè)考驗(yàn)。這一直在改進(jìn),絕佳的設(shè)計(jì)能吸引新用戶去更好的體驗(yàn)產(chǎn)品。我非常慶幸,Pinterest不論是網(wǎng)站還是App在這方面都做得很好。

Pinterest所關(guān)注的不是功能,而是用戶的需求。在此,他們并不談?wù)搱D片,分享,社交媒體等等,僅僅單純的陳述人們?cè)撊绾问褂盟?,如何利用它?lái)更好的生活。不停移動(dòng)的鏡像畫(huà)面,也展示了他們的有趣和圖片特色。

2.搜索過(guò)濾

實(shí)質(zhì)上,我對(duì)于這種毫不猶豫脫離iOS模式的設(shè)計(jì)是有偏見(jiàn)的,但我仍然認(rèn)同它的實(shí)用性。Pinterest的搜索過(guò)濾有著很好的體驗(yàn)反饋,也讓他們從千篇一律的iOS搜索設(shè)計(jì)顯得獨(dú)特。

3.瀏覽

在比較體驗(yàn)各種app之后,你可能會(huì)像我一樣開(kāi)始注意一些微妙的設(shè)計(jì)細(xì)節(jié)。精巧的切換,進(jìn)入,并且利用一些減淡的元素打造了絕妙的流暢體驗(yàn)。沒(méi)有太多突然的切換,有的只是靜態(tài)狀態(tài)的逐步轉(zhuǎn)換。

4.滑動(dòng)刷新

很多人都嘗試在iOS7的在載入指示符中做些改變,Pinterest在此只是用了很簡(jiǎn)明的設(shè)計(jì)。沒(méi)有什么特別的,但仍有這很好的體驗(yàn),充分顯示了產(chǎn)品的卓越。

5.關(guān)注提示

我很抱歉的說(shuō)類(lèi)似于點(diǎn)頭的動(dòng)態(tài)提醒有點(diǎn)神經(jīng)質(zhì),不過(guò)這也強(qiáng)調(diào)顯示了Pinterest的極簡(jiǎn)設(shè)計(jì)風(fēng)格,引導(dǎo)著來(lái)自不同地區(qū)的用戶。

我想說(shuō)的第二個(gè)設(shè)計(jì)細(xì)節(jié)特別容易被忽視,當(dāng)我關(guān)注一個(gè)用戶時(shí),他的關(guān)注者人數(shù)會(huì)彈跳一下,取消關(guān)注也是如此。

6.滾動(dòng)

滾動(dòng)和模糊背景圖片的設(shè)計(jì)已經(jīng)并不新鮮,在此我想要突出的是,當(dāng)你返回到頂部,注意這個(gè)標(biāo)題欄的文本“Plants”會(huì)輕微的彈動(dòng)消失,這個(gè)流動(dòng)的設(shè)計(jì)簡(jiǎn)直神了。很容易發(fā)現(xiàn)他就是彈開(kāi)然后彈回消失不見(jiàn),特別的生動(dòng)。

7.閱圖

當(dāng)用戶在瀏覽圖片時(shí),Pinterest的每一次切換都是精心設(shè)計(jì)的。我非常喜歡閱覽時(shí),新窗口按比例彈出,主圖作為背景模糊的樣式。

8.點(diǎn)贊

你可以為你喜歡的圖片點(diǎn)個(gè)贊。

在設(shè)計(jì)中的諸多細(xì)節(jié)很容易被忽視,但對(duì)我而言,也正是這些細(xì)節(jié)讓app更生動(dòng)有個(gè)性。了解此點(diǎn)的設(shè)計(jì)師和開(kāi)發(fā)者為此而不斷的改進(jìn),想出新點(diǎn)子。

9.操控

減淡而慢慢移出視線的圖片切換,如此細(xì)微,如此之快。底部增加的深度以及圖片的有形性都是設(shè)計(jì)師用心之處。

10.返回

通過(guò)下拉你能從單個(gè)圖片回轉(zhuǎn)到主要版面,一切都非常的流暢自然。

11.即時(shí)互動(dòng)

在主要版面輕擊圖片即可跳出扁平的,活動(dòng)的圖標(biāo),讓你即時(shí)點(diǎn)贊或者分享圖片給朋友。這個(gè)操作是具有標(biāo)記意義的,如果你還沒(méi)有試過(guò),強(qiáng)烈推薦你。

12.即時(shí)pin

無(wú)論何時(shí)你啟動(dòng)pin,將滑出在頁(yè)面顯示,此時(shí)背景會(huì)根據(jù)比例模糊。非常的簡(jiǎn)介。

13.即時(shí)點(diǎn)贊

當(dāng)你喜歡一張照片,即可點(diǎn)擊圖片方的心形,它將輕微的彈動(dòng)以示操作成功。

14.不喜歡

不喜歡這一考量是眾所期待的,表情選用了心碎的圖標(biāo)?;谝恍┰?,不喜歡這一情感因素增加到了評(píng)論中,我有預(yù)感有些用戶可能會(huì)因?yàn)閾?dān)心“不喜歡”而減少發(fā)布照片,但這只是一種猜測(cè)。

15.發(fā)送pin

在發(fā)送pin的操作中同樣采取了模糊和靈活切換。值得注意的是,一旦信息被成功發(fā)送,會(huì)有一個(gè)小的黑色氣泡信息提示顯示在屏幕下方。

16.添加信息

如果你想要以短消息的方式分享pin,信息編輯欄將放大以方便你進(jìn)行文字編輯。它將推送標(biāo)題欄在頂部,移出不必要的部件以空出空間。

17.標(biāo)簽欄

在主頁(yè)增加標(biāo)簽欄也挺有趣的,添加的圖標(biāo)通過(guò)旋轉(zhuǎn),給了用戶更便捷的方式取消。我不確定這個(gè)設(shè)計(jì)的實(shí)用性,但看起來(lái)似乎還不錯(cuò)。總的來(lái)說(shuō),我很喜歡圖標(biāo)切換的模式,運(yùn)用模糊和色彩十足突出了app的主要操作。

18.Pinterest登錄頁(yè)

作為最后一個(gè)說(shuō)明的設(shè)計(jì)細(xì)節(jié),我想重點(diǎn)說(shuō)Pinterest的官方主頁(yè)。背景由緩慢滾動(dòng)的圖片墻構(gòu)成,我分別獲取了幾個(gè)不同的背景內(nèi)容:計(jì)劃旅行,打造花園,準(zhǔn)備跑步。設(shè)計(jì)師用了太多的圖片數(shù)據(jù)來(lái)通過(guò)登錄頁(yè)也展示了Pinterest的特點(diǎn)。

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)文章

熱門(mén)排行

信息推薦