亚游国际集团,亚游国际游戏官网,亚游国际下载

亚游国际集团,亚游国际游戏官网,亚游国际下载 > 产品展示 >

从0设计App(6):根据流程图4步解决原型稿、交

2020-05-28 11:47

  至此,我们完成了app的宏观定位、系统架构、产品结构图以及最为重要的2大流程图(业务、页面流程图)。接下来本文将围绕页面的原型设计、交互设计展开。

  在xxxx目前我们手头上已经绘制了「职得App」所有业务流程图,还有一张页面流程地图。可以说在心里基本知道产品的功能,以及每个页面的功能元素,接下来就是参与需求评审的原型稿和交付给技术同学的设计稿了。

  无论是大公司还是从0设计App,由业务流程图还不能直接交付给程序员开发,还需要做出原型需求稿、交互UE稿、UI稿。而三者正好对应是黄金圈法则:Why-How-What。

  理想情况,在大公司里分别由3个人负责,或UED部门负责交互和视觉。但很多中小公司里产品经理同时身兼交互设计师的身份,更有甚者兼任视觉设计师。作为从0设计App的唯一负责人,我当然是同时身兼原型和交互哈!

  另外,原型有人还会分为线框图、低保真和高保真原型,我用下厘清一下。其实名称不重要,重要的是不同公司分工不同,按照实际情况应对就好了。

  关于原型,有些产品经理坚持「逼真」、「动态」,尤其是一些乙方公司,如软件外包公司。我可以很明确的说,即使你花时间把Axure练得很熟,把原型做得很逼真,在甲方公司里都是性价比极低的做法。

  产品经理通过对需求挖掘,然后解决用户的需求,原型作为辅助工具形象地描绘出来,以便其他人可直观理解、快速达成共识,解决用户的需求;

  需要在进入UI设计阶段之前将原型稿确认,不能让UI通过你的口述来天马行空设计;

  对于外包服务型乙方公司,在听了甲方的需求后,一般会直接设计动态、可交互的原型,目的是更好地解释给甲方听,也是为了更快交付签合同。

  你所做的原型,其实更多就是讲清楚,页面有什么功能,如何解决需求。前面做了这么多调研,绘制了流程图,其实都是在解决用户的需求,通过功能/服务来解决需求,因此在原型环节也是如此,讲清楚大概怎么解决需求即可。

  如上图,如果公司有交互设计师,最终做成这个样子就可以了。已经能够说清楚功能是解决什么需求,剩下的细节交给UE和UI设计就好了。

  答:其实Axure、Sketch、磨刀、甚至PPT都能做原型,我推荐Axure。

  答:我反正没学过,至今95%的工作里只用到方框、文本框、按钮、占位符、直线这么几种够了。

  做出上面途中那样子的线框稿,基本上已经可以在甲方公司应用了。产品经理不是来画图的,否则和设计师有什么差别?设计师确实要系统学一下Sketch或Axure。

  在各大厂中用过很多方法,用来用去,让我写经验,我还是推荐闵伟老师(携程高级PM)的4步方法,比较简单易用:

  第一,绘制业务流程图和页面流程图,这在之前的xxxxx文章中我们已经操作过了。

  根据上图,可以看到这个流程涉是「2.职圈-我的职圈tab」——「2.3职圈-职点课程」——「2.3.1视频播放」这3个页面。同时,这3个页面每个页面里的核心元素也能看到。现在将这些功能元素转化为页面上的信息即可。

  比如:我的职圈卡片(包括图片、题目、简介等)、职圈的介绍(包括圈主姓名、简介、头像、背景图等)、课程章节分层(章节名、课程名、分级操作等)、视频播放器、作业展示区等。

  比如:点击卡片会跳转到下个页面,点击具体课程章节会跳转到下个页面,但是点击圈主头像并不会进行跳转。

  在业务流程图里提及了,看课程视频前会进行两次判定,完成作业和是否付费即菱形控件。因此,在功能上可以对已经完成作业的课程勾选icon标记,对未付费课程进行加锁icon提示。

  同理,我们根据业务流程图和页面流程图,可以将每个页面的原型全部绘制出来。如下图,大概会得到非常多的原型图:

  看到这里,我想你一定会有很多问好。工作量是否太大了。没错,很多产品新人每天被原型图所折磨,还要改来改去,特别麻烦。

  鉴于是独立负责「职得App」,因此最终目的是拿出交互稿。然后交付由UI设计师进行设计,所以我还自己独立作为不专业的交互设计师进行UE交互设计。

  就个人从业经验而言,互联网UE交互设计:基于人类心理和用户需求的人机交互设计,而交互设计原则或者说心理学知识多如牛毛,需要针对不同场景、不同用户、不同功能目标来敲定。

  关于交互,这里推荐《设计心理学》套装,唐纳德·A·诺曼,豆瓣8.6分。同时再推荐一个系列文章:交互设计师应具备的技能树(9) 设计流程的三个阶段交互理论 深度解析尼尔森十大交互设计原则在设计中的用法。

  关于方法,作为产品人我不专业,直接引用起点学院特训营主讲人黄向阳(前网易资深交互专家)的4个关键点:

  针对页面上所有可以交互的点,按照功能的实际情况来判定要交代清楚哪些事情给开发同学看。具体的交互应当比我图中展示的更为详细,这里只是取其示意,且并不一定是最好的交互方式。

  简而言之,根据用户心理,设计出更舒服的功能使用方式。并且在交互稿中事无巨细、没有遗漏地写出来。毕竟是写给技术开发同学的,对于他们来说,只有是非0和1,没有0.5这种模糊的东西。

  同样地,交互稿的工作量也是巨大的。这里我就不一一贴图了,关注公众号领取。

  OK,至此,作为产品经理的我们基本已经大功告成。接下来将交互稿交付给UI设计师,最后制作PRD给技术开发同学就可以了!所以,下一篇内容:从0设计App(7):视觉设计。

  由于我也不懂视觉设计,因此请来了阿里巴巴认证设计师来讲(有设计需求可找——站酷&微博:杨锦Vincent),先剧透张图:

  从0设计App(2):竞品分析-吃透3款产品看职场在线):如何用问卷看透人心 (上)

  作者:朱鲁斌,公众号:字字朱心。每周深度思考一个问题,不稳定的世界里找到一份笃定。

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。