Pinterest App 體驗報告

產(chǎn)品背景

Slogan：

The world's catalog of ideas（世界創(chuàng)意目錄）

相關描述：

Pinterest作為圖片社交的巨人，把社交屬性聚焦到圖片分享上，在13年14年期間成為最具希望沖擊FB Ins君主地位的選手。同期的類似產(chǎn)品還有Snapchat，Instagram，F(xiàn)lickr，Pixiv，但Pinterest善于集百家之長，在眾多圖片分享社交產(chǎn)品中脫穎而出。

其移動端產(chǎn)品注重微動效，流暢的操作，簡單的邏輯，精細的設計，為用戶提供十分優(yōu)秀的閱覽體驗。Pinterest采用的是瀑布流的形式展現(xiàn)圖片內(nèi)容，無需用戶翻頁，新的圖片不斷自動加載在頁面底端，讓用戶不斷的發(fā)現(xiàn)新的圖片。Pinterest堪稱圖片版的Twitter，網(wǎng)民可以將感興趣的圖片在Pinterest保存，其他網(wǎng)友可以關注，也可以轉(zhuǎn)發(fā)圖片。索尼等許多公司也在Pinterest建立了主頁，用圖片營銷旗下的產(chǎn)品和服務。

體驗環(huán)境

產(chǎn)品分析

戰(zhàn)略層：

1.產(chǎn)品定位：Pinterest屬于社交類的圖片分享軟件，用戶可以在上面收藏和分享圖片。功能特性主要強調(diào)：個性化，定制化，探索體驗，以及收藏。

2.用戶需求分析：產(chǎn)品的目標用戶是設計相關從業(yè)人士、設計攝影愛好者、繪畫愛好者、社交用戶。用戶特征是追求個性，充滿藝術氣息，喜愛美好事物。Pinterest能夠根據(jù)不同用戶的不同愛好，為之推送呈現(xiàn)符合口味的圖片，或者為他們提供創(chuàng)作的靈感，使得用戶從【探索自己需要的喜歡的圖片】這個行為中獲得樂趣。

3.用戶畫像：

根據(jù)產(chǎn)品特性和目標用戶，提取特征制造場景繪制畫像。

4.關鍵詞提取：

根據(jù)三種用戶畫像，歸納了不同的使用場景，以及在不同使用場景下的不同角色的用戶需求，提取他們的關鍵詞找準Pinterest的定位。

范圍層：

1.基礎功能：收藏、分享圖片、搜索、熱門圖片、收件箱、畫板

2.特色功能：

畫板機制：在“我的‘頁面里，可以進入畫板。在畫板里，可以邀請合作用戶。合作用戶可以收藏以及進行評論（也可以限制用戶的權限），邀請用戶的方式有復制鏈接、信息、Twitter、更多應用?；蛘咭部梢酝ㄟ^好友添加，也可以搜索好友。加強了用戶的社交鏈接屬性，增加了畫板功能的二次打開率。

強大的推算算法：Pinterest擁有很強大的推算算法，不僅可以推送類似tag圖片、相同作者，還可以分析圖素，推送更加符合喜好的圖片。

高自由度定制頁面：在首頁和搜索可以屏蔽掉自己不想看的內(nèi)容，或者類似圖片的推送，在畫板的頁面里可以直接添加類似圖片，或者進入編輯模式更改畫板的圖片順序。

Gif高清實時加載：在瀏覽時直接播放高幀率的視頻或者高清動態(tài)圖片。

引人入勝的破冰環(huán)節(jié)：在初次打開軟件的時候或者初次使用某功能的時候，有恰到好處的引導流程，和簡單的氣泡提醒。有溫度的設計和細節(jié)的微動效，貫穿到了整個設計，提供給用戶非常良好的體驗。

結(jié)構層：

從上方的Pinterest的結(jié)構圖可以看出，主要功能分為四個部分，首頁、搜索、消息、用戶。

框架層：

1.首頁面：

首頁的功能非常簡單，可以添加收藏。頁面設計非常簡單，懸浮的小尺寸TabBar設計讓內(nèi)容突出，整個首頁聚焦兩個屬性——“探索”和“關注”。點擊為你推薦可以切換feed流，點擊關注中可以顯示關注用戶的分享內(nèi)容。點擊圖片則是查看圖片的詳情，里面包括了標題、描述、作者、圖片本身等主要信息（第一屏幕）向下拉是評論（0.8-1.5屏），然后是更多此類Pin圖（1.5屏幕-5屏），最后是為你推薦更多Pin圖（5屏以后……）。按照功能和重要層級劃分，板塊與板塊之間非常明確，層級的排布也十分合理。

2.搜索頁

在搜索界面用戶可以進行關鍵詞搜索，以及推薦關鍵詞搜索。只不過Pinterest的圖片搜索不同于Google引擎之類的搜索，他更加強調(diào)模糊搜索的概念，再加上搜索欄下方的相關Tag，鼓勵用戶去探索更多的可能性。

3.消息

消息板塊強調(diào)即時性，在跟新板塊中，會顯示當前關注主題的跟新內(nèi)容，類似于關鍵詞條熱門內(nèi)容的跟新。熱門搜索板塊提供更多可能感興趣的熱門詞條。所有的這些主題和詞條可能與用戶的喜好有關，或者與用戶平時瀏覽的內(nèi)容有關。點擊收件箱則進入信息頁面，該頁面則是好友消息呈現(xiàn)。

4.我的

進入“我的”頁面，在“我的”頁面中，可以進入全部Pin圖和自己創(chuàng)建的畫板之中。

5.畫板

在“我的”頁面可以進入畫板頁面，在畫板頁面中，用戶擁有很高的自由編輯權限?？梢栽诒卷撁嬷醒埡献饔脩?；排列/刪除/移動畫板內(nèi)的內(nèi)容；快捷添加更多的圖片；或者使用試圖模板；調(diào)動到其他畫板，分享到其他社區(qū)等等。

創(chuàng)建區(qū)塊可以把一個畫板里的某些圖片合并為一個區(qū)塊，方便查看和管理。下圖為創(chuàng)建區(qū)塊流程。

表現(xiàn)層：

1.圓角

全頁面組建采用圓角設計，視覺上趨于統(tǒng)一。

2.柵格

在不同的頁面應用場景上，采用了不同的柵格。在首頁上采用了瀑布流的方式，突出探索感，頁面分為兩列固定寬度；在畫板編輯里采用了三列，展現(xiàn)更多的內(nèi)容，方便用戶進行排列選擇等操作，突出沉浸感；而在搜索頁面和畫板采用了豎向和橫向的柵格約束，使得頁面更加整齊，突出秩序感。

3.間隔

使用不同寬度的間隔，塑造塊的概念，層級分明。

4.色彩視覺

Pinterest的圖片會有一個加載過程，Pinterest是如何處理圖片加載的這一段等待時間的頁面顯示？以及圖片在排列的時候，如何避免因色彩色系不同對比太大等問題，避免給用戶造成雜亂的感覺。通過對頁面色彩的提取和比對，找到了部分規(guī)律。

圖片加載的時候，會有一個占位模塊，這模塊會擁有一些基本屬性，包括他的高度寬度，以及是否帶有名稱。最重要的，他會有一個色彩屬性，體現(xiàn)在他的背景色，色彩是提取的當前圖片的顏色。

其次，當前頁面的圖片，提取顏色的值盡量在飽和度和明度上趨近。這樣圖片的色彩就會在某種程度上展現(xiàn)出和諧而不突兀。

色彩的高度統(tǒng)一性

5.微動效

Pinterest的微動效十分出色，幾乎所有頁面的加載，組件的操控和加載，甚至是用戶引導，都有微動效反饋。

畫板的縮放動效，強化了用戶的“層級”的理念

用動效很好的展示了交互邏輯

優(yōu)缺點分析

優(yōu)點：

1.在首頁面進入圖片，再退出的時候。有三種退出方式：

從頁面的最左邊滑入，iOS的返回邏輯；從頁面中心往下滑，類似YouTube返回邏輯；點擊返回按鈕，常規(guī)返回方式。照顧了不同操作習慣的用戶，體驗更加流暢。

2.在首頁中，搜索頁中，都有模塊的概念：這樣的設計可以把圖片錯開，比較自然的呈現(xiàn)Feed流的設計。

3.在畫板的頁面中，點擊“整理”，可以在整理頁面對頁面內(nèi)容進行整理排布調(diào)動等操作；長按“三”按鈕可以直接對視圖中的圖片進行排列。這樣做的好處是，自定義的內(nèi)容增加了，可視的內(nèi)容增加了。

缺點：

1.視覺上，微動效的圓角處理得不太好。比如要把Pin圖加入畫板時，展開與收起的動效，圓角處理反了。

2.搜索結(jié)果中，【推薦用戶】和【內(nèi)容展示區(qū)域】沒有分隔開來，有兩種理解方式。Ps：在搜索“壁紙”等【同比率尺寸】圖片之時，十分明顯

3.“消息”中的點子/詞條和“搜索”中的點子/詞條的樣子不一樣。這樣的缺點是會對用戶的理解造成困擾。

4.在“整理”頁面中，相較于之前的畫板頁面，排布方式改變了，與畫板的頁面相去甚遠。對于用戶來說，增加了理解成本。