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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
产品经理入门: 从原型临摹开始
0.0°
2016-11-24 原创文章 经验/观点 举报 2375 1 2 0

边临摹边思考产品的设计亮点和设计模式,对产品的交互和流程打散重构,思考产品是否还有改进的空间,然后融会贯通开始创作有自己风格的产品。


临摹是最好的自学方式之一,非常适合没有工作经验、项目经验的新手产品经理。边临摹边思考产品的设计亮点和设计模式,对产品的交互和流程打散重构,思考产品是否还有改进的空间,然后融会贯通开始创作有自己风格的产品。有了拿得出手的作品之后,才为自己的作品集增加砝码,获得职业上的认可,最后才有正式成为产品经理的机会。


临摹优秀 App 原型有几大好处:

其一:在临摹的过程中,锻炼自己熟练使用工具。

Image title

图:Sparringmind

工欲善其事,必先利其器。临摹一款手机 App 之前,首先你得找到一款好用的原型设计工具,你可以选择成熟而功能强大的原型设计工具 axure,然而它的学习成本实在是有点高。也可以选择快速原型工具——墨刀,简单轻巧,易于学习,10 分钟就可以完成一款手机 App 的原型制作,大大提升软件界面原型搭建的效率。

Image title

使用墨刀制作手机原型就如同画画,通过手动拖拽元件到相应的位置、制作好基础页面、组织好交互链接,设置手势和转场动效,让你 10 分钟完成一款 App 的简单原型交互。


其二:解构和理解产品设计和交互,培养自己的设计思维和产品经理思维。

Image title

图:lifehacker


临摹是一个解构的过程。在临摹的过程中,对产品进行打散重构,通过亲手拖动一个个组件元素(图标、图片、按钮)组成整个页面,在「边动手边体会」的过程中,自然而然地理解和认知产品中的每一个设计元素、页面构成关系、体验流程和交互逻辑,从整体视角思考产品流程中的每一步,思考产品的整体理念是什么,这样做能够让我们意识到设计是如何从想法落实到实践的。


其三:多思考,找出产品的亮点,为己所用。

所有原型工具都只是工具,而不是设计本身。临摹之外,思考产品的亮点才是重点。边临摹边思考,你选择这款产品设计有哪些特别之处?这款 App 哪个地方打动了你?这款 App 哪个地方打动了你?列出你觉得它们好在哪里,是功能赞,UI 布局和设计炫酷,交互有特色、文案,色彩搭配还是其他的什么亮点。

Image title

图:UserTesting


作为产品经理,重点思考交互上有什么亮点?是否可以挖掘出更多的可能性和改进空间?把这些亮点积累沉淀下来,通过再设计、借鉴移植到自己的实践项目当中。


其四:临摹并不是抄袭,而是一种事半功倍的学习方法。

所谓站在巨人的肩膀上学习,事半功倍嘛。也许你脑海里曾经浮现过几千个产品创意,但对于没有经验的产品新手来说,在一张白纸上开始实在是有点难。而通过临摹别人的优秀作品原型,培养自己的设计思维,在实操中自然而然地体会别人为什么要这么设计,能够更快地帮我们熟练掌握设计技巧,从中学到很多东西。

Image title



其五:通过临摹不只学到了新的产品思路和新技巧,还能为你的作品集增加砝码。

作品集对一个产品经理来说有多重要就不用说了。

Image title



实践篇:手把手教你如何用原型设计工具「墨刀」临摹一款手机 App

下面我们就以墨刀产品经理兔老师临摹原型的工作流程,以 Instagram 为案例,手把手教你如何用原型设计工具「墨刀」临摹一款手机 App 。


第一步:选择合适的 App 

  • 兴趣是最好的老师,建议挑选自己感兴趣的 App
  • 最好是选择已经正式上线的 App 界面进行临摹
  • 新手临摹建议选择小而美的产品,不建议临摹层级结构过于复杂的产品。
  • 平时多积累,多逛逛 Product Hunt、36kr Next,订阅产品相关新闻,多玩新出来的热门产品,发现喜欢的界面设计截图,甚至是录屏保存到自己的原型界面素材库当中。



Image title

录屏留存产品交互


第二步: 选择好 App 后,对照 App 的页面结构进行梳理,梳理出页面结构图。

以下是梳理出来的 Instagram 一级页面层级图,分别为首页、发现页、拍照页、消息通知页、个人主页。

Image title



第三步:打开墨刀进入工作区,根据 App 页面结构创建墨刀的页面层级列表。


Image title


第四步:将产品截图拖入墨刀工作区,进行实时比对,临摹截图对象的尺寸及布局、颜色配置、字号设计规范。Image title



第五步:临摹产品交互,尽可能将对方的交互效果临摹出来。

Image title

Image title


墨刀的交互设置非常直观,只需链接对象元素到对应的目标跳转页,选择好触发动作和手势,即可完成页面之间的转场跳转。


以下是用墨刀制作的 Instagram 原型页面展示:

首页-评论-私信页面-图片转发页面

Image title


发现-用户个人页面

Image title




拍照页


Image title


消息通知——正在关注——你

Image title



个人页面:


Image title


最终的原型效果图展示

更新:2016-11-24

收藏

1人已收藏

  • 10

    作品

  • 10

    粉丝

  • 0

    关注

  • 盘点10款逆天级效率工具,能帮创业公司节省50%时间成本
  • PM 可以从谷歌 Sprint 学到的设计工作法
  • 2016 产品经理必读书目——墨刀推荐
  • 动效设计原理: 从科幻电影到 UI 动效设计
相关标签
产品设计

    猜你喜欢

      2016-11-24 原创文章 经验/观点 举报 2375 1 2 0

      产品经理入门: 从原型临摹开始

      0.0°

      你确定要举报产品经理入门: 从原型临摹开始

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

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

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      1
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录