logo
**體驗(yàn)環(huán)境
**
版本信息：Pinterest 6.12
設(shè)備機(jī)型：Iphone 6s
操作系統(tǒng)：iOS10.0.2
產(chǎn)品信息
產(chǎn)品簡(jiǎn)介
寓意：把自己喜歡的圖片就像拿釘子釘在白板上一樣分享横腿。
主題色：紅色。
Logo：Pin过蹂，形狀類(lèi)似圖釘釘在版上茬腿。
Pin
產(chǎn)品服務(wù)：一家以興趣為基礎(chǔ)的圖片社交網(wǎng)絡(luò)歪赢，通過(guò)圖片墻Pinboard發(fā)布圖片化戳，圖片瀑布流展示圖片的新社交網(wǎng)絡(luò)。
使用方法：
Scan：你可以在這里瀏覽精美圖片埋凯，也可以尋找你所需要的精美圖片
Pin：把你喜歡的圖片 Pin 到一塊白板（Board）上点楼，類(lèi)似于做簡(jiǎn)報(bào)
Repin：看到你的好友 Pin 了一張好圖片，你可以把它 Repin 到自己的白板
Share：圖片可以來(lái)源于Facebook等社交網(wǎng)絡(luò)或B2C購(gòu)物網(wǎng)站白对，也可以被分享到各個(gè)平臺(tái)
Board：相當(dāng)于一本獨(dú)立的相冊(cè)掠廓，按照不同的主題和興趣來(lái)劃分
**登錄界面
**
登錄界面的背景為緩慢移動(dòng)的圖片流，凸顯了Pinterest的核心功能甩恼。
登錄界面
首頁(yè)
首頁(yè)
**用戶(hù)體驗(yàn)
**
1.視覺(jué)體驗(yàn)上沖擊蟀瞧，高質(zhì)量的照片，讓愛(ài)美的人沒(méi)有抵抗力条摸。
2.采用的是瀑布流的形式展現(xiàn)圖片內(nèi)容悦污，無(wú)需用戶(hù)翻頁(yè)，新的圖片不斷自動(dòng)加載在頁(yè)面底端钉蒲，讓用戶(hù)不斷的發(fā)現(xiàn)新的圖片切端。
3.圖片在加載過(guò)程中，顯示為圖片的的整體色彩顷啼，雖然沒(méi)有完全加載踏枣，用戶(hù)可以判斷知道圖片的模糊信息，隨著加載過(guò)程圖片逐漸清晰钙蒙，提高用戶(hù)體驗(yàn)茵瀑，減少等待焦慮。
首頁(yè)－圖片加載
**界面設(shè)計(jì)
**
首頁(yè)－界面設(shè)計(jì)
界面內(nèi)容：
1.主要內(nèi)容－圖片躬厌。
2.輔助信息：圖片相關(guān)信息瘾婿，顏色以灰色為主，根據(jù)內(nèi)容變換字體的線(xiàn)粗和顏色。
3.圖片的來(lái)源偏陪，畫(huà)板或者相關(guān)用戶(hù)抢呆，縮略圖以及相關(guān)信息。
界面設(shè)計(jì)特點(diǎn)：
1.突出主要內(nèi)容－圖片笛谦，占據(jù)界面大片面積抱虐。
2.弱化相關(guān)信息，文字信息以灰色為主（字體線(xiàn)粗饥脑，以及字體的灰色根據(jù)信息的層級(jí)變化）恳邀。
3.刪除無(wú)關(guān)UI界面元素，舊版本的卡片式設(shè)計(jì)的灰色背景灶轰，分割線(xiàn)谣沸，有顏色的圖標(biāo)。
微交互
1.長(zhǎng)按圖片笋颤，并隱藏界面其他內(nèi)容乳附，觸動(dòng)快健操作（save，like伴澄，send赋除，more）。
2.圖標(biāo)變化非凌，暗示操作軌跡举农，手指移動(dòng)向一個(gè)圖標(biāo)，圖標(biāo)大小和位置發(fā)生變化敞嗡，近一步操作颁糟，引發(fā)圖標(biāo)顏色變化；旁邊的粗體文字喉悴，近一步解釋用戶(hù)可以干什么滚停。
圖標(biāo)隨手指運(yùn)動(dòng)變化
3.不同圖標(biāo)的不同操作的用戶(hù)反饋。
圖標(biāo)變化
4.取消Like操作粥惧，圖標(biāo)的不同键畴，用戶(hù)可以明確Like和unLike的兩種不同操作，unlike心碎的圖標(biāo)突雪，添加了感情因素起惕，也許用戶(hù)不忍心執(zhí)行unlike操作。
Like&Unlike
5.保存成功咏删，對(duì)一張圖片保存在Board上惹想，返回首頁(yè)，消息提示督函，之后消失嘀粱。
成功的消息提示
6.重復(fù)保存提示激挪，對(duì)于已經(jīng)保存的圖片，提示已保存锋叨，不過(guò)這里的形式可以調(diào)整下顏色和樣式垄分。
重復(fù)操作提示
圖片詳情
**用戶(hù)體驗(yàn)
**
1.點(diǎn)擊一張自己感興趣的圖片，進(jìn)入詳情娃磺，下滑可以看到更多相關(guān)類(lèi)型的圖片薄湿。
More like this
2.有一點(diǎn)，感覺(jué)就是黑科技偷卧，點(diǎn)擊圖片右上角搜索的圖標(biāo)豺瘤，可以選擇圖片的局部，然后出現(xiàn)和此局部相似的照片听诸，并可以定位分類(lèi)坐求，并且選擇同一張圖片不相同的事物，呈現(xiàn)的圖片不同晌梨。
黑科技的查找體驗(yàn)
3.繼續(xù)點(diǎn)擊詳情中的圖片桥嗤，體驗(yàn)一致，都是瀑布流的圖片應(yīng)接不暇地呈現(xiàn)派任。
**界面設(shè)計(jì)
**
1.查看類(lèi)似的圖片和首頁(yè)的排版幾乎一致。
2.此部分頁(yè)面沒(méi)有完全延續(xù)首頁(yè)的排版風(fēng)格璧南，感覺(jué)可以?xún)?yōu)化：利用空白的間距代替區(qū)分不同模塊的分割線(xiàn)掌逛。
微交互
1.首頁(yè)圖片進(jìn)入詳情，圖片的運(yùn)動(dòng)軌跡司倚，圖片在屏幕的不同位置豆混，圖片的運(yùn)動(dòng)軌跡會(huì)適應(yīng)調(diào)整，指導(dǎo)用戶(hù)交互的下一步驟动知，聚焦到正確的位置皿伺，并且符合元素在屏幕的空間關(guān)系。同時(shí)圖片的運(yùn)動(dòng)軌跡符合現(xiàn)實(shí)生活中物體下落上升的運(yùn)動(dòng)軌跡（重力和摩擦里等）盒粮。
點(diǎn)擊圖片的動(dòng)效
2.滑動(dòng)上滑鸵鸥，模態(tài)的頁(yè)面會(huì)根據(jù)手指滑動(dòng)的速度，呈現(xiàn)不同的滑動(dòng)速度丹皱，讓人感覺(jué)它是隨著人的控制而控制的妒穴，大家可以體會(huì)下。
上滑動(dòng)效.png
3.分類(lèi)標(biāo)簽可左右滑動(dòng)查看,占據(jù)屏幕較小的面積摊崭，卻可以瀏覽更多的分類(lèi)讼油。
分類(lèi)標(biāo)簽瀏覽
搜索
**用戶(hù)體驗(yàn)
**
1.點(diǎn)開(kāi)搜索界面，出現(xiàn)了一些大的分類(lèi)呢簸，用戶(hù)可以選擇自己感興趣的類(lèi)型瀏覽矮台，這個(gè)適合沒(méi)有很明確目的的用戶(hù)使用乏屯。
2.點(diǎn)擊搜索框，以前的搜索歷史會(huì)保留瘦赫，適合重復(fù)使用搜索的用戶(hù)辰晕。
3.輸入關(guān)鍵詞，相關(guān)的類(lèi)別會(huì)出現(xiàn)耸彪，用戶(hù)可以直接選擇自己需要的伞芹，減少輸入。
4.輸入關(guān)鍵詞蝉娜，相關(guān)類(lèi)型的搜索結(jié)果唱较，用戶(hù)，以及畫(huà)板都會(huì)出現(xiàn)召川。
搜索界面
**界面設(shè)計(jì)
**
搜索－界面設(shè)計(jì)
1.界面簡(jiǎn)潔南缓，以灰色輸入框，和加粗的文字為主荧呐。
2.點(diǎn)擊開(kāi)始輸入文字愁拭，灰色輸入框消失，只顯示輸入的關(guān)鍵詞梯皿，突出用戶(hù)此刻關(guān)注的內(nèi)容暑诸，以及相關(guān)刪除輸入內(nèi)容和取消操作。
微交互
1.點(diǎn)擊搜索類(lèi)型峰搪，圖片隱現(xiàn)岔冀，類(lèi)型滑動(dòng)切入，給人突現(xiàn)的驚喜概耻，像尋找了一個(gè)東西使套，它“嗖”地做了個(gè)鬼臉出現(xiàn)了。這個(gè)因?yàn)槲业氖謾C(jī)沒(méi)辦法錄屏鞠柄，自己可以體驗(yàn)下侦高。
子界面切入動(dòng)效
消息
**用戶(hù)體驗(yàn)
**
1.左右滑動(dòng)可以切換。
消息
**界面設(shè)計(jì)
**
1.這里的界面設(shè)計(jì)延續(xù)了首頁(yè)界面設(shè)計(jì)的風(fēng)格厌杜，文字和圖片奉呛，沒(méi)有多余UI元素。
2.主要信息展示以圖片和文字為主夯尽，文字之間以文字粗細(xì)和顏色區(qū)分侧馅。
我的
**用戶(hù)體驗(yàn)
**
1.很直觀(guān)，個(gè)人用戶(hù)信息呐萌，你喜歡類(lèi)型的數(shù)量馁痴，你建立的Boards圖片的顯示。
我的.png
2.可以?xún)?yōu)化的：搜索框在下滑瀏覽自己的圖片時(shí)肺孤，可以隱藏罗晕，保證用戶(hù)的沉浸式的體驗(yàn)济欢。
3.排版一致，主頁(yè)面和自頁(yè)面均采用一致的排版風(fēng)格小渊。
我的以及個(gè)別子頁(yè)面
4.主頁(yè)面的不同之處在于法褥，用戶(hù)頭像的大小較大，用戶(hù)可以清晰判斷自己所處的位置酬屉。
5.瀏覽收藏的圖片半等，瀏覽體驗(yàn)和首頁(yè)一致。點(diǎn)擊每個(gè)Boards上的標(biāo)簽可以快速定位需要的類(lèi)別呐萨，適合用戶(hù)快速查找杀饵。此處建議選中的標(biāo)簽使用主題色，因?yàn)榇颂帢?biāo)簽的顏色有多種谬擦，用戶(hù)不能有效定位自己已選擇的標(biāo)簽切距。
標(biāo)簽可優(yōu)化
**界面設(shè)計(jì)
**
1.這里的界面設(shè)計(jì)也延續(xù)了首頁(yè)界面設(shè)計(jì)的風(fēng)格，圖片和文字說(shuō)明信息惨远，沒(méi)有多余UI元素谜悟。
2.主要信息展示以圖片和文字位置，文字之間以文字粗細(xì)和顏色區(qū)分北秽。而且主頁(yè)面的更是突出了以空白間隔區(qū)分不同內(nèi)容葡幸。
3.點(diǎn)擊每個(gè)選項(xiàng)，左上角的粗體文字贺氓，清晰地展示用戶(hù)所在位置蔚叨。
4.設(shè)置頁(yè)面，點(diǎn)擊導(dǎo)航欄的灰色設(shè)計(jì)圖標(biāo)進(jìn)入設(shè)置頁(yè)面掠归。頁(yè)面極簡(jiǎn)缅叠，真的是極簡(jiǎn)悄泥，只有文字（文字說(shuō)明此功能）虏冻，點(diǎn)擊文字可以進(jìn)入相關(guān)的設(shè)計(jì)子頁(yè)面。
5.可以?xún)?yōu)化的：設(shè)置的子頁(yè)面弹囚，可以延續(xù)設(shè)置頁(yè)面的極簡(jiǎn)風(fēng)格厨相，去掉分割線(xiàn)
設(shè)置
微交互
1.界面轉(zhuǎn)換動(dòng)畫(huà)一致，均為從右向左切入鸥鹉。
2.進(jìn)入圖片詳情的交互動(dòng)畫(huà)和首頁(yè)一樣蛮穿，均為根據(jù)位置不同對(duì)應(yīng)相應(yīng)的動(dòng)畫(huà)。
結(jié)語(yǔ)：Pinterest的整體的設(shè)計(jì)和產(chǎn)品定位一致毁渗，圖片社交践磅，突出主要的內(nèi)容圖片。在界面設(shè)計(jì)中灸异，簡(jiǎn)化除圖片意外的所有元素府适，突出主要內(nèi)容羔飞。用戶(hù)體驗(yàn)，也以滿(mǎn)足用戶(hù)查找自己所需要的圖片的沉浸式體驗(yàn)為主檐春。微交互設(shè)計(jì)逻淌，指導(dǎo)用戶(hù)快速定位下一步的內(nèi)容，自然發(fā)生疟暖，讓用戶(hù)感覺(jué)不到交互的存在卡儒。各個(gè)方面，在整體的設(shè)計(jì)中保持了一致性俐巴。
