APP产品经理用的原型组件

共 3493字,需浏览 7分钟

 ·

2021-05-17 22:48




这是Kevin的第 845 
原创,
持续日更,做产品经理的创业斜杠青年。



前段时间过小程序的原型组件,不少朋友在公众号后台下载了。如果你还没有下载可以点击下面的文章查看


产品经理必用的小程序原型部件



移动端产品经理指的是,小程序、H5、app3个类型。用户在移动设备完成的软件操作,产品经理分布最多的就是app产品经理了。小程序、app都有一定的规范,一个是依据微信生态、另外一个是依据操作系统。


而H5则显的自然较多,产品经理可以对H5做任何大胆的设计都可,所以就没有什么规范可言。


app的产品设计工作也有必用的原型组件,我也梳理了在app产品设计背景下常用并且必用的原型组件,在文章末尾可以直接下载


客户端的产品工作在底层思考会区分IOS和安卓2系统的限制,再进行可以开发实现的产品设计方案。和小程序一样,中小企业在app的早期版本产品设计里实际上是用的一套标准。这样的结果是将原本需要2套的前端交互设计、UI设计减少为一套,快速验证。


同时也减少了用户的认知门槛、使用操作难度,在某种层度上也是提升用户体验的策略。


开发一个app和小程序有什么区别?


同一个需求站在后台接口的角度上,两者所需要的成本、和工作复杂程度是几乎一样的。但app的工作量成本仍然非常大的,具体的问题我在之前有写过


到底是选择开发小程序还是APP?



APP常用、必用的原型组件



下面我罗列了10个app必用、常用的组件。要值得说明的是下面的组件都可以通过axure自带组件进行绘制。所有的组件都可以通过基础组件绘画完成,所以就算不能下载,产品经理你也可以自己编辑组合,也当作提升自己的axure软件使用能力。

对于不使用axure的产品经理来说,第三方原型工具也有现成的,直接选用即可。

1.app底部tab



  app的tab导航栏 



每个app都有底部tab,其图标、文案、数量都要严格控制。比如图标的大小尺寸、文案长度、数量不要超过5个。用这个模版就可以快速通过更改文案即完成app的底部tab设计


2.用app组件一定不要用手机壳


我见过很多产品新人在绘制原型工具的时候,都会带上手机壳、iPad壳。就是想突出它是移动端app的页面


  原型下的手机壳 



实际上根本不需要

你只需要表达页面的需求、文案、结构布局即可,至于能不能放得下或者要几个页面才能放得下可以交给UI或交互设计师。当然了如果有部分功能入口需要刻意在哪一个页面上,需要单独标注。




3.信息流


  个人账户信息修改 



每个app都有个人中心,在个人中心里包含用户的虚拟ID,需要给用户提供基础信息修改入口,这类需求几乎是一致的,非常标准。


4.个人主页



  个人主页 


和个人基础信息修改一样,个人主页是最复杂的。包含了业务、通用功能。业务功能是企业自有的商业模式、通用功能包括消息通知、收藏、点赞等。使用这类原型组件,可以快速搭建出产品的1.0版本,不用担心个人中心少了必要功能。



5.登录注册


  app的登录注册 



登录注册是用户在互联网产品的入口,所包含的登录、注册、找回密码是一定存在的。只是每个企业因为安全性问题,可能会要求增加身份证、人脸识别等流程。通过此类组件快速完成app1.0的登录注册设计




6.弹窗/toast/警告



  弹窗组件 



这类组件是页面的操作反馈、条件判断必用的产品方案。使用这类模版,可以快速切换文案、图标,完成产品设计。



7.导航栏




app的导航栏是可以区分安卓、IOS的。但由于为了节省资源、和减少用户使用门槛。保持一致是常见的方案,同时页面下还会有子选项,上面的导航栏分别是一级导航和页面下的二级导航。


8.页面交互



交互提示是用户每个页面的操作说明。用这类组件可减少前端开发的需求认识成本。



9.支付


  微信支付 



用这类支付组件可以快速表达支付条件。当然了由于微信等第三方支付都是标准的UI设计,所以也可以选择截图。




其他功能性组件




还有部分组件是产品经理在app工作常用的,我就不单独解释了。大家记牢就可以了

1.输入框



2. 搜索




3.聊天



4.上传图片




5.加载刷新






如何下载




在公众号后台回复:app原型

即可获得下载地址



每天体验1款app知识星球




我创建了一个《每天体验1款app》知识星球,有超过20个行业嘉宾在圈子里。加入后365天,每天体验一款APP。提升产品设计能力,同时有1500份体验报告帮助你找到竞品。



平均1天1块钱,扫码购买即可加入


连续体验90款应用,通过后原路退回





浏览 124
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报