• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 用Instagram 的案例,帮你学会专业科学的重设计过程

用Instagram 的案例,帮你学会专业科学的重设计过程

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含Instagram,经验分享,设计流程等相关知识,希望在学习及工作中可以帮助到您

编者按:什么样的重设计作品才能给你的简历加分?今天译者Lisa 这篇重设计Instagram 的思路流程专业科学,非常适合学习。

挑战

找一份自己喜欢的应用,并且每天使用,通过彻底的重构它,看看自己作为一个设计师能有多大的创造力。

我选择 Instagram是因为我从2011年——在它发行后的一年便成为它的忠实用户了。

起初,我开始使用它是因为它的滤镜。但是在过去的6年中,我已经看到了它伴随着App出现的各种各式的改变和创新。我现在仍然忠实使用Instagram是为了表达自己的思想并且和当今潮流保持联系。

你可以说我是一个资深Ins用户。

补充说明:我不为Instagram工作,并且这个案例中所有的观点都是完全代表我自己的。 跟那些在Instagram工作的设计师不一样,我手头并没有影响它们当前设计的充足用户数据。所以,这个案例研究是不全面的,我这么做当然也不是在建议Instagram放弃它们当前的设计并采用我的设计。

△ ?一些我的重设计中的截图

我在着手做这件事中的个人目标

我对于重设计的目标:

  • 当探索和在线时促进一个更加沉浸和流畅的体验
  • 设计一个平易近人和直观的用户界面
  • 通过用户同理心来设计(HCD以用户为中心的设计)

我对于自身发展的目标

  • 学习如何执行和分析用户研究,制造流程图和线框图,用Sketch做设计图,用Principle制作动画,用Invision做原型
  • 从始至终基于我的设计原则完成我的第一个设计项目

在构建这个重设计过程中我承担的角色

  • 用户研究员
  • 数据分析员
  • UI/UX 设计师
  • 产品设计师

为了简洁我在这篇文章之外留下了我的草图和线框图,但是还是欢迎你访问这里(Instagram iOS Redesign)。

了解Instagram这个公司

Instagram是一个通过视觉讲故事的应用,它为用户提供了一个组织和分享生活中美和有创意时刻的平台。自它第一次出现在2010,Instagram的用户基数已经增长到200,000,000。它让来自全世界的人们保持联系并且分享他们各自的生活。

为了保持它的成长速度,Instagram不断的创新来推动它们的使命“分享世界的时刻”。

我的用户研究和数据

在我开展我的重设计项目之前,为了更深的理解我设计的对象,我和40个Instagram用户开展了访谈:

  • 一个典型的Instagram的用户是怎样的?
  • 它们使用Instagram的原因是什么?
  • 是什么让他们一直坚持访问的?

我通过电话或者视频亲自开展与他们的交谈。

以读者统计为目标

在我交谈过的40个Instagram用户中,有10个男性和30个女性。男性用户的年龄分布在22到27岁,女性用户年龄分布在19-25岁。65%的调查者都是大学生或者是计划追求更高教育的高中毕业生。

我感觉这是一个很符合当前Instagram用户基数的有代表性的样本。因为90%的Instagram用户都是在35岁以下的。还有,在美国55%的18-29岁的人群都是Instagram用户。

让这个调查更有趣的是,我交谈过的67.5%的用户都把Instagram排在他们最常使用的应用的前三名。另外,72.5%的人群样本每天都会使用Instagram。

有趣的事仍在继续

我要求我交谈的40个Instagram用户使用3个形容词描述Instagram。你对Instagram有什么建议?它让你感觉怎么样?

我总共收集到64个形容词。

前三名形容词分别是:创新,有趣和简单

我也问了他们喜欢Instagram的什么特点。下面是他们前三个理由:

  1. 它是基于图片的
  2. 它很容易使用
  3. 它帮助他们保持联系

一个典型Instagram用户的性格

△ 我交谈过的40个人的平均分析集

谁和你更相似一点?你是不是像Alex一样,用Instagram来分享他的生活并且总是用搜索功能来找一些很酷的事情?或者你是否像Sam一样,用Instagram来和朋友和她的兴趣保持联系?或者你都像?

不管是哪个方面,我都会在脑海里为像你,Sam和Alex的用户设计。

现在你对你为谁设计有一个更深的理解了,我们可以着手做一个很棒的事情啦!

体验 1:主页

△ Instagram当前主页的分析

除了主页的重复功能外,这有我注意到的三个主要问题。

问题#1:内容超载(Instastoriesvs feed)

在打开这个应用之后,Instagram用户有两个主要竞争的功能在吸引他们注意——他们应该在stories中滚动还是应该在feed中浏览呢?

两个选择都无止境的滚动着巨量的内容。根据选择的悖论的研究,过多的选择最终会导致选择疲劳,幸福感减少,或者害怕错过事情的愧疚感。特别是考虑到大约一半的用户在他们刚醒来或者睡前浏览Instagram。

补充说明:我决定在2016年用最小改动来重设计Instagram,因为我看到了它背后天才的推理和逻辑。你可以在这里读到它(https://medium.com/@ianspalter/designing-a-new-look-for-instagram-inspired-by-the-community) – 搭梯子访问。

为了解决这个问题,我选择直接将Stories整合进Feed里,理由如下:

  • Feed和Story将能够一起工作,来为用户促进一个更有结合力的体验。
  • 将Stories和Newsfeed结合起来可以防止它成为一个Julie Zhuo(Facebook的产品设计副总裁)曾经提到过的“屋顶甲板”。在当前的Instagram设计中,一旦用户开始在反馈中滑动时,Instastories 就很容易被遗忘。眼不见,心不烦。

把Stories 和Feed 结合在一起后,它会在一个固定的时间轴上进行操作。对于任何目标行为来说这是能产生最高响应的最强有力的操作条件。

补充说明:不要担心,我不会去掉Instastories这个功能。我只是将它们移到了消息收件箱里,这样你通过直接点击主页顶部右上角便能获得它。我将会在下面更深入的讨论它。

问题#2: 顶部导航和滑动手势的分离

通过我的用户研究我发现了一个主要的问题:Instagram主页上滑动手势是否直接,这是一个主要问题。

简单来说,Instagram用户是否意识到了左右滑动与顶部的导航有关?

为了回答这个问题,我在访谈过程中进行了一个简单的实验。

方法(n=40)

在我开始这个实验之前,我提醒用户不能查看Instagram是实验的一部分。然后我要求用户向我从头到脚描述Instagram经典简介页面的布局,然后就是主页。我问了他们4个简单的问题。

对于滑动:

  1. 主页上,进入哪个地方你需要从左向右滑动?答案:相机到照片到Instastories
  2. 在主页上,进入哪个地方你需要从右向左滑动?答案:消息收件箱

对于顶部导航:

  1. 你是如何点击屏幕发送你的story?答案:顶部左边相机icon
  2. 你是怎么到达你的消息盒子?答案:顶部右边箭头icon

笔记:如果用户回答“左右滑动”这部分问题,我将会提示他们给一个可选择的答案。(你知道其他的交互方式来____?)

这里是我收集到的数据(https://docs.google.com)

基于我的调查,Instagram里的关于滑动的知识都不是很好:

  • 只有20%的人对所有滑动响应反应正确
  • 20%的人至少有一个正确,50%的人一个都不对
  • 50%的人知道从左往右滑能够引导他们去相机功能
  • 20%的人知道从右往左滑能够引导他们去消息盒子

顶部导航:

  • 72.5%的人知道通过点击顶部右侧箭头按钮来引导他们去消息盒子
  • 55%的人知道通过点击顶部左侧相机按钮来引导他们去发布他们的story

另外有趣的事实和数据:

  • 在访谈中40个人中只有

您可能想查找下面的文章:

  • 用Instagram 的案例,帮你学会专业科学的重设计过程

相关文章

  • 2018-08-23印象深刻!日本有哪些让人称赞的设计细节?
  • 2017-08-06去掉点击链接时出现的虚线框的几个方法
  • 2018-08-23背后的故事!手机QQ的一键消除红点功能是怎么诞生的?
  • 2017-08-06对于大流量网站的解决方案
  • 2017-08-06Bootstrap3.0学习笔记之表格相关
  • 2017-08-06提高网站可用性的10个小技巧
  • 2018-08-23美团打车推出之际,来聊聊分时租赁的共享汽车
  • 2018-08-23想让作品从80分到100分?你需要这些包装作品的小技巧!(升级篇)
  • 2017-08-06HTML中的input type="reset"标签失效(不起作用)的可能原因。
  • 2018-08-23想设计按钮?先来看这份超全面的按钮使用场景总结

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 网页表单提交方式详细汇总
    • 为什么我们都应该学会组件化设计思维?
    • 设置网页图片热点链接以及坐标值示例代码
    • 五帽架设计原则:历史证明最高效的信息组织方式
    • 如何让一个网站前端有气质可以吸引住用户
    • AI教程!手把手教你搭建高大上的3D电视台
    • 设计中不可忽略的产品状态之交互设计的分析
    • 让网站图片生成灰色效果的三种方法
    • 高手帮你学规范!iOS和Android规范解析之提示框+警告框
    • 写给新手的交互规范入门科普

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有