美文网首页产品经理与用户体验设计今日看点
Pinterest,一个脑残粉的几点使用体验

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

作者: Sherry被注册了 | 来源:发表于2016-11-01 19:32 被阅读1200次
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的整体的设计和产品定位一致,图片社交,突出主要的内容图片。在界面设计中,简化除图片意外的所有元素,突出主要内容。用户体验,也以满足用户查找自己所需要的图片的沉浸式体验为主。微交互设计,指导用户快速定位下一步的内容,自然发生,让用户感觉不到交互的存在。各个方面,在整体的设计中保持了一致性。

相关文章

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

    **体验环境**版本信息:Pinterest 6.12设备机型:Iphone 6s操作系统:iOS10.0.2产品...

  • 混脑残粉多的饭圈到底是一种什么样的体验?

    在饭圈,最可怕的不是脑残粉,不是黑子,而是相信黑子的脑残粉和专骗脑残粉的黑子。 在整个故事或者说是体验中,本尊只是...

  • 脑残最完美

    前次谈及我们这一代的脑残粉,基本角度是脑残粉如何被诱捕。关于脑残粉自身的特质,还值得更多玩味。 脑残粉是追星者群体...

  • 【Day4-杜伟东】我是脑残粉

    我是脑残粉 脑残粉,往往形容娱乐明星的狂热粉丝,给人一种失去理智的感觉,眼里一切都是好的。 脑残粉还有一个角度解读...

  • 脑残粉

    “脑残粉”的生活很无语有一个很形象的词儿,叫做脑残粉。 或许脑残二字有些不那么文雅,很容易被误解为侮辱人的话,所以...

  • 脑残粉

    这几天没吃药啊!婚姻当中切记不能找虽然爱你,虽然有钱,但是没有上进心,没有大脑的人。因为除了夫妻生活,没有什么共同语言。

  • 脑残粉

    我以为我不会成为谁的脑残粉,一个因为自身条件有限,不适合追星,一个是因为我对很多事是持怀疑态度的,有时候有色眼...

  • 脑残粉

    愿你活成脑残粉,生活无忧乐哈哈。

  • 1168-原则戒掉抱怨

    我们大家心中多少有个领域的脑残粉,我是笑来的脑残粉。在思考践行方面笑来老师的脑残粉是Ray Dalio 是个神人,...

  • 致脑残粉∞喷子:你们不能在一起!

    1、脑残粉and喷子 首先深入剖析:脑残粉和喷子在性质上是有差别的,我们不可把他们划分为一类。 脑残粉是对粉丝爱明...

网友评论

  • 泡面pm:还有dribbble,behance。。啥都好,就是加载速度快点就好了。。别的没要求。。
    Sherry被注册了:@泡面pm 我的工作是UI设计师,建筑设计师科班。
    泡面pm:@Sherry被注册了 你不是射击师吧?
    Sherry被注册了:我去体验下你说的那两个,哈哈哈
  • 死神一护:Pin有的地方设计感特别重,厚重的图标,有点不适应。还是喜欢airbnb 那种性冷淡风格的
    Sherry被注册了:@死神一护 深圳的一个创业公司,革命尚未成功,我还需努力
    死神一护:@Sherry被注册了 期待大作,冒昧问下楼主在哪就职,感觉好厉害
    Sherry被注册了:@死神一护 下一次分析Airbnb:hushed:
  • fieldss:这个app真不错
    Sherry被注册了:@一把黄粱梦 这个,我又发现了它的新功能:smirk:
    fieldss: @Sherry被注册了 还能学英语,☝
    Sherry被注册了:@一把黄粱梦 相当不错,从设计还有体验,到功能
  • 30b5070ac6ca:写的不错,喜欢,互相关注呦

本文标题:Pinterest,一个脑残粉的几点使用体验

本文链接:https://www.haomeiwen.com/subject/rpgmuttx.html