恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Pinterest,一个脑残粉的几点使用体验
0.0°
2016-11-02 原创文章 经验/观点 举报 7004 8 12 0

Pinterest,一个脑残粉的几点使用体验,用户体验,界面设计,微交互

Image title

体验环境 

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

Image title


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

Image title

首页

Image title


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

Image title


界面设计

Image title


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

图标随手指运动变化


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


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


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


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


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


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


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


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


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


搜索
用户体验 

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


界面设计 


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


消息
用户体验 

1.左右滑动可以切换。


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

我的
用户体验 

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


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


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


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

微交互

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

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

更新:2016-11-02

收藏

8人已收藏

  • 14

    作品

  • 95

    粉丝

  • 40

    关注

  • 免费的插画素材网站,大概都在这里
  • 想吃什么画什么
  • 网页无障碍设计:色彩对比度
  • B端/后台设计之输入框&选择器

    猜你喜欢

      2016-11-02 原创文章 经验/观点 举报 7004 8 12 0

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

      0.0°

      你确定要举报Pinterest,一个脑残粉的几点使用体验

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年11月02日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      12
      8
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录