Pinterest，一个脑残粉的几点使用体验

logo

**体验环境
**
版本信息：Pinterest 6.12
设备机型：Iphone 6s
操作系统：iOS10.0.2
产品信息
产品简介
寓意：把自己喜欢的图片就像拿钉子钉在白板上一样分享。
主题色：红色。
Logo：Pin，形状类似图钉钉在版上。

Pin

产品服务：一家以兴趣为基础的图片社交网络，通过图片墙Pinboard发布图片，图片瀑布流展示图片的新社交网络。
使用方法：
Scan：你可以在这里浏览精美图片，也可以寻找你所需要的精美图片
Pin：把你喜欢的图片 Pin 到一块白板（Board）上，类似于做简报
Repin：看到你的好友 Pin 了一张好图片，你可以把它 Repin 到自己的白板
Share：图片可以来源于Facebook等社交网络或B2C购物网站，也可以被分享到各个平台
Board：相当于一本独立的相册，按照不同的主题和兴趣来划分
**登录界面
**
登录界面的背景为缓慢移动的图片流，凸显了Pinterest的核心功能。

登录界面

首页

首页

**用户体验
**
1.视觉体验上冲击，高质量的照片，让爱美的人没有抵抗力。
2.采用的是瀑布流的形式展现图片内容，无需用户翻页，新的图片不断自动加载在页面底端，让用户不断的发现新的图片。
3.图片在加载过程中，显示为图片的的整体色彩，虽然没有完全加载，用户可以判断知道图片的模糊信息，随着加载过程图片逐渐清晰，提高用户体验，减少等待焦虑。

首页－图片加载

**界面设计
**

首页－界面设计

界面内容：
1.主要内容－图片。
2.辅助信息：图片相关信息，颜色以灰色为主，根据内容变换字体的线粗和颜色。
3.图片的来源，画板或者相关用户，缩略图以及相关信息。
界面设计特点：
1.突出主要内容－图片，占据界面大片面积。
2.弱化相关信息，文字信息以灰色为主（字体线粗，以及字体的灰色根据信息的层级变化）。
3.删除无关UI界面元素，旧版本的卡片式设计的灰色背景，分割线，有颜色的图标。
微交互
1.长按图片，并隐藏界面其他内容，触动快健操作（save，like，send，more）。
2.图标变化，暗示操作轨迹，手指移动向一个图标，图标大小和位置发生变化，近一步操作，引发图标颜色变化；旁边的粗体文字，近一步解释用户可以干什么。

图标随手指运动变化

3.不同图标的不同操作的用户反馈。

图标变化

4.取消Like操作，图标的不同，用户可以明确Like和unLike的两种不同操作，unlike心碎的图标，添加了感情因素，也许用户不忍心执行unlike操作。

Like&Unlike

5.保存成功，对一张图片保存在Board上，返回首页，消息提示，之后消失。

成功的消息提示

6.重复保存提示，对于已经保存的图片，提示已保存，不过这里的形式可以调整下颜色和样式。

重复操作提示

图片详情
**用户体验
**
1.点击一张自己感兴趣的图片，进入详情，下滑可以看到更多相关类型的图片。

More like this

2.有一点，感觉就是黑科技，点击图片右上角搜索的图标，可以选择图片的局部，然后出现和此局部相似的照片，并可以定位分类，并且选择同一张图片不相同的事物，呈现的图片不同。

黑科技的查找体验

3.继续点击详情中的图片，体验一致，都是瀑布流的图片应接不暇地呈现。
**界面设计
**
1.查看类似的图片和首页的排版几乎一致。
2.此部分页面没有完全延续首页的排版风格，感觉可以优化：利用空白的间距代替区分不同模块的分割线。
微交互
1.首页图片进入详情，图片的运动轨迹，图片在屏幕的不同位置，图片的运动轨迹会适应调整，指导用户交互的下一步骤，聚焦到正确的位置，并且符合元素在屏幕的空间关系。同时图片的运动轨迹符合现实生活中物体下落上升的运动轨迹（重力和摩擦里等）。

点击图片的动效

2.滑动上滑，模态的页面会根据手指滑动的速度，呈现不同的滑动速度，让人感觉它是随着人的控制而控制的，大家可以体会下。

上滑动效.png

3.分类标签可左右滑动查看,占据屏幕较小的面积，却可以浏览更多的分类。

分类标签浏览

搜索
**用户体验
**
1.点开搜索界面，出现了一些大的分类，用户可以选择自己感兴趣的类型浏览，这个适合没有很明确目的的用户使用。
2.点击搜索框，以前的搜索历史会保留，适合重复使用搜索的用户。
3.输入关键词，相关的类别会出现，用户可以直接选择自己需要的，减少输入。
4.输入关键词，相关类型的搜索结果，用户，以及画板都会出现。

搜索界面

**界面设计
**

搜索－界面设计

1.界面简洁，以灰色输入框，和加粗的文字为主。
2.点击开始输入文字，灰色输入框消失，只显示输入的关键词，突出用户此刻关注的内容，以及相关删除输入内容和取消操作。
微交互
1.点击搜索类型，图片隐现，类型滑动切入，给人突现的惊喜，像寻找了一个东西，它“嗖”地做了个鬼脸出现了。这个因为我的手机没办法录屏，自己可以体验下。

子界面切入动效

---

消息
**用户体验
**
1.左右滑动可以切换。

消息

**界面设计
**
1.这里的界面设计延续了首页界面设计的风格，文字和图片，没有多余UI元素。
2.主要信息展示以图片和文字为主，文字之间以文字粗细和颜色区分。

---

我的
**用户体验
**
1.很直观，个人用户信息，你喜欢类型的数量，你建立的Boards图片的显示。

我的.png

2.可以优化的：搜索框在下滑浏览自己的图片时，可以隐藏，保证用户的沉浸式的体验。
3.排版一致，主页面和自页面均采用一致的排版风格。

我的以及个别子页面

4.主页面的不同之处在于，用户头像的大小较大，用户可以清晰判断自己所处的位置。
5.浏览收藏的图片，浏览体验和首页一致。点击每个Boards上的标签可以快速定位需要的类别，适合用户快速查找。此处建议选中的标签使用主题色，因为此处标签的颜色有多种，用户不能有效定位自己已选择的标签。

标签可优化

**界面设计
**
1.这里的界面设计也延续了首页界面设计的风格，图片和文字说明信息，没有多余UI元素。
2.主要信息展示以图片和文字位置，文字之间以文字粗细和颜色区分。而且主页面的更是突出了以空白间隔区分不同内容。
3.点击每个选项，左上角的粗体文字，清晰地展示用户所在位置。
4.设置页面，点击导航栏的灰色设计图标进入设置页面。页面极简，真的是极简，只有文字（文字说明此功能），点击文字可以进入相关的设计子页面。
5.可以优化的：设置的子页面，可以延续设置页面的极简风格，去掉分割线

设置

微交互
1.界面转换动画一致，均为从右向左切入。
2.进入图片详情的交互动画和首页一样，均为根据位置不同对应相应的动画。

---

结语：Pinterest的整体的设计和产品定位一致，图片社交，突出主要的内容图片。在界面设计中，简化除图片意外的所有元素，突出主要内容。用户体验，也以满足用户查找自己所需要的图片的沉浸式体验为主。微交互设计，指导用户快速定位下一步的内容，自然发生，让用户感觉不到交互的存在。各个方面，在整体的设计中保持了一致性。