Pinterest App 體驗報告,pinterest 官網

Pinterest App 體驗報告

產品背景

Slogan：

The worlds catalog of ideas（世界創意目錄）

相關描述：

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

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

體驗環境

產品分析

戰略層：

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

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

3.用戶畫像：

根據產品特性和目標用戶，提取特征制造場景繪制畫像。

4.關鍵詞提取：

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

范圍層：

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

2.特色功能：

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

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

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

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

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

結構層：

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

框架層：

1.首頁面：

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

2.搜索頁

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

3.消息

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

4.我的

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

5.畫板

在“我的”頁面可以進入畫板頁面，在畫板頁面中，用戶擁有很高的自由編輯權限。可以在本頁面中邀請合作用戶；排列/刪除/移動畫板內的內容；快捷添加更多的圖片；或者使用試圖模板；調動到其他畫板，分享到其他社區等等。

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

表現層：

1.圓角

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

2.柵格

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

3.間隔

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

4.色彩視覺

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

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

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

色彩的高度統一性

5.微動效

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

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

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

優缺點分析

優點：

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

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

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

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

缺點：

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

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

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

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

特別聲明：以上文章內容僅代表作者本人觀點，不代表ESG跨境電商觀點或立場。如有關于作品內容、版權或其它問題請于作品發表后的30日內與ESG跨境電商聯系。