被数万人使用的产品设计模板怎么做成的?

金句频出的产品理念分享

本文共计:6000字左右,干货超多,建议收藏后慢慢看~

一晃眼,「墨刀产品素材设计大赛」已经过去快一个月了。所有优秀的作品均上传到素材广场中了。

看到它们陆陆续续被刀友们查看、使用、收藏,作者和我们皆倍感荣幸。

被数万人使用的产品设计模板怎么做成的?

前六个均是本次大赛的作品

我们先后采访了「最佳产品设计奖」(点击这里查看文章)、「最具潜力产品设计奖」(点击这里查看文章)。

从获奖人的表述中,我们了解到图片社交产品通过配色和一些小设计可以年轻又高级,后台产品要卡片化、层级化、情感化,以及一个旅行产品其实能涵盖多种业务。

被数万人使用的产品设计模板怎么做成的?被数万人使用的产品设计模板怎么做成的?

被数万人使用的产品设计模板怎么做成的?

今天要继续跟刀友们探讨产品设计相关的内容,这次邀请到的是「最受欢迎产品设计奖」的三位获奖者。

他们将与我们分享:医疗产品应该注重什么、儿童教育产品跟其他教育产品的区别是什么,还有怎么才能做出让老板爱的全网最完整AI客服系统。

被数万人使用的产品设计模板怎么做成的?

全网最强的AI客服系统

老板最爱的男人

作者简介:老板最爱的男人—胡小弟,耿直的北方人,没啥特别爱好,平时喜欢喝点小酒,带狗子珠江边溜达溜达,典型的老年生活。

被数万人使用的产品设计模板怎么做成的?

参赛纯属偶然,主要是为了分享经验。前前后后用了一周的时间,结合了过往经验,做了这样一个大部分场景下或多或少都会涉及到共计173页的完整客服后台,具有一定的实用性。

被数万人使用的产品设计模板怎么做成的?10个模块,总计173页

由于从业时间较久,经验比较丰富,我是直接上去从第一个功能开始设计原型,一边设计一边想功能。

建议不熟悉业务的不要这么做,会遗漏功能,返工几率也很大,最好是老老实实的先出产品架构、脑图、业务流程图、功能清单,想明白了再开始设计原型。

被数万人使用的产品设计模板怎么做成的?具体流程就是:

1.把主要功能罗列出在菜单中,再将其链接好跳转;

2.然后将一级页面逐个完善;3.倒回去从第一个功能展开到最后一层(这里要注意的是要一边设计界面一边链接好,如果全部页面做好再去链接的话非常非常耗时间且会链错,直接导致精神错乱)

被数万人使用的产品设计模板怎么做成的?

对于原型搭建,我觉得逻辑思维最重要,原型的初衷就是能快速有效且直观的表达出功能需求。
相比文档,高质量的原型交互可以更快速的让开发人员与老板理解,这一点墨刀给了我很大的帮助。
2013年前,我基本都是靠手稿,很吃力,一个白板上贴满了手稿和图钉,自从墨刀上线,我就彻底爱上了墨刀,为我节省了很多时间,真正为企业起到增效降本的作用,从那会起我也就成为了老板最爱的男人。

在这里,给刀友们分享一个我的墨刀使用小技巧吧,能够一定程度上提高速度和质量。

其实也简单,就是我做了一个中台模板,把常用的页面按照模块进行归类,例如后台管理通用框架、对应移动端的比如登录注册、金刚区、提示、列表、个人中心、设置等等,统一在中台模板,用到哪个直接复制黏贴到新项目中,非常便捷,各位刀友们不妨试试。

儿童教育产品原型—小学通

咔哒咔哒

作者简介:不是百万粉丝的大V,也不是业界大拿,无名校加持,亦无大牌傍身,更没有干爹护体,平平无奇追求美的撸图仔。横跨To C、To B、To G 领域,偶尔佛系,永远爱甲方(没错,此处不容置疑)。

被数万人使用的产品设计模板怎么做成的?

本次大赛参赛作品,灵感来源于生活,真的是生活。

简单但是详细来说就是这样:

因疫情影响,在家办公,偶然一日,房东敲门,说有事相求,原来是他家孩子要远程上课,不知道怎么操作那个上课系统,需要我帮忙操作一下(其实就是注册登录然后查看课程下载课程这么一个简单流程)。

又偶然一日,房东再次敲门,又是关于孩子上课的问题(其实就是用手机将孩子朗读英语单词的语音,录下来然后发送到微信群让老师点评)。

……

一日复一日,在房东数次的求助下,我意识到现在的教育类产品体验怎么才能满足房东这类互联网小白用户,同时又能切实地解决小学生学习的问题,解决老师和学生互动的问题。

有了想法,于是下载了应用商店教育类排名前25的APP,并且看了用户的评价,纵向对比分析,提炼每个APP的主功能,解决的主要诉求;然后横向对比儿童类产品,提炼交互、视觉元素通性。在把玩了大概3天后,最后手机卡了。终于确定了此次产品大赛的产品方向,即做一款面向6-12岁小学阶段的孩子的学习产品,提供语数外同步辅导课程、精品课,课外学习,线下活动四大功能。旨在让祖国的花朵们学得好,玩得爽。

整个制作周期大概花了30个小时左右,详细制作流程如下:

01
确定目标

(1)思考当前教育类产品的问题

  • 线下语数外课程知识记不牢,无法重复学习
  • 学习没兴趣,不爱做练习题
  • 线下补课费时费力费钱
  • 练习资料鱼龙混杂,不知道怎么选
  • 使用其他教育类产品不知道怎么学,学什么
  • 充满好奇心的孩子想要读更多课外故事,没有好的书单,又对纸质书感到枯燥,父母又担心荧光屏幕伤眼

(2)我为什么要做这个产品?能改善什么?

  • 提供课外知识学习,丰富学生知识体系
  • 提供线下专题活动,学得好,更要玩得好,丰富孩子童年生活
  • 提供“打怪升级”机制,提升学习兴趣,弥补线下补课得费时费力费钱
  • 根据年级智能推荐用户可能需要的内容
  • 有声搜索帮助识字不多的孩子找到自己想要的内容(课程,课外读物)

(3)最终要达到什么结果?

为小学生提供语数外同步辅导课程、精品课,课外学习,线下活动四大功能。既要让祖国的花朵们学得好,又要让花朵们玩得好。

(4)定义使用人群及心理

说实话,这块都是上网找的现成的结论,没花时间去做细致深入的研究。

(5)竞品横纵向对比分析

下载了应用商店教育类排名前25的APP,并且看了用户的评价,纵向对比分析,提炼每个APP的主功能,解决的主要诉求;然后横向对比儿童类产品,提炼交互、视觉元素通性。

02
信息框架

梳理产品功能划分,层级梳理。

被数万人使用的产品设计模板怎么做成的?

部分功能流程

03
输出原型

(1)纸上原型

粗略勾画产品主流程界面,确定功能及交互流程

(2)低保真原型

a.根据纸上原型先输出一级主界面的低保真原型;

b.快速输出剩余界面的低保真原型,大概40几个;

c.跑通产品逻辑流程,完善边缘场景,保证交互顺畅闭环(当然时间较紧,有些页面没有画,但确实在我的头脑中成型了);

d.搜集符合产品调性的文案,情感化元素,分类整合。

(3)高保真原型

a.根据设计目标、使用人群确定产品风格走向,视觉调性、输出主视觉;

b.根据主视觉定义视觉基础元素(文案、图片风格、版式、图标、色彩、字体层级);

c.定义视觉规则与表现(网格系统、设计规范);

d.抽离全局控件,方便复用,考虑扩展性,实用性;

e.输出二级界面5-8张,用墨刀在真机上预览整体视觉调性是否统一,检查,筛错,调优,反复优化;

f.输出剩余界面,采用不同真机预览检查;

g.完善视觉,优化体验,保证品牌一致性(品牌基因、视觉风格)。

被数万人使用的产品设计模板怎么做成的?

点击图片,体验原型

对于原型工具来说,常用组件、控件搜得到,能复用,无需重复造轮子很重要;其次,界面的可视性上能保证高效、简便,客户肯定不想预览个原型还要经历解压 html 压缩包,再安装个扩展程序繁琐的流程,很累的。

另外,熟悉所有的墨刀自带的快捷键是必须的。这个部分基本上原则就是:软件使用熟练度,和能不能找到合适的素材应用到需要的场景。

但是原型搭建的难点本质在于思考设计细节的深度,对业务逻辑的理解,以及对用户痛点的洞察,这些部分才是效率的瓶颈。

每个人都有对墨刀不同的使用技巧,我同样。

以这次作品来说,我会先简单梳理下主要界面的元素、组件有哪些,提炼出来可以复用的组件,这样可以在墨刀中快速复用,节省了大量的时间。

同时,素材广场的海量素材也能给我提供一个偷懒的机会。我认为设计师快速提高专业能力的核心是:在正确的方向上,用聪明的方式下笨功夫。墨刀恰巧给我偷懒创造了机会。

被数万人使用的产品设计模板怎么做成的?

很荣幸参加到本次本赛,因为这是对自己的一次专业能力和思考能力的检视,能够让自己从更高的维度思考产品,比如商业价值上,正如胡庆老师的点评中所说的那样:”是否考虑了商业价值,以及落地的可能性?”

我觉得这是以后职业生涯中需要不断提升的点,做设计并不是自嗨,视觉和交互再优秀,不能带来商业价值或用户价值,也是一个自嗨的产物

至于什么能称之为好产品?

我认为它可以是好的点子,好的想法,能切实解决用户痛点;或有流畅的交互,用起来不费力气,很自然,带来了体验上的舒适;也可以是有良好的视觉体验,引发一种独特的视觉感受。

比如这个德云社的作品,就满足了钢丝们的需求,我认为就是好作品。

被数万人使用的产品设计模板怎么做成的?

在此,我也想跟刀友们分享一下我的个人增值学习经验。

被数万人使用的产品设计模板怎么做成的?

如何让自己增值

想让自己增值,就要让自己有价值。于自我成长而言,你的每一次挑战,学习每一件新事物,都是自我增值的方式。于工作而言,想要增值就要向专业的人学习,加上自己的反思复盘,真正的能够解决问题,在一个团队中找到自己的地位,同时贡献自己的力量

学习方式

1.工作中提炼方法论

研究问题-洞察-发散创想-确定方向-收敛创想-形成方案-验证方案-持续优化。

2.训练设计逻辑

每个月研究一个小课题,比如:为分页加载和下拉刷新加载有什么区别?模拟你要给老板汇报这个事,然后把它写出来,讲出来,训练两年,你的设计逻辑应该会有很大提高。

3.读书

读书很有力量,读书可以解答我们的很多疑惑,但是从发现问题到解决问题的这个过程中,更多的还是需要我们自己去运用,仅仅掌握知识并不是目的,目的是运用它。

4、听楼下老头老太太唠嗑也是一种学习

被数万人使用的产品设计模板怎么做成的?

最后大胆预测一下,未来产品设计的流行趋势

1.新的技术的出现,会推动新的呈现方式的出现;如VR,可穿戴设备会愈发普及起来;

2.信息的发展会带来用户行为和喜好的多样化,一个APP的寿命可能不超过三天,在这 三天内如何留住用户,需要产品设计师们深入洞察用户背后的心理和行为;

3.产品需要不断探索新的玩法,可能会有除手机外的其他可交互设备,此时产品的设计肯定要满足新的设备形态。

医疗产品移动端高保真原型

老何

作者简介:一个学了一堆乱七八糟技能的产品经理兼交互设计师。

作为医疗相关的产品已有4年多了,在这个行业也有一些小心得了,于是就报名参赛了。

要知道做医疗产品的日常工作中很多时候要面对甲方(医院领导,事业单位领导),这时候高保真的原型和演示效果往往能起到更好的工作认同和意见收集效果,线框和纯图片设计稿一般都只会被象征性的扫几眼。

所以我想要做一套有通用性的医疗类型的模板,方便修改和演示。

被数万人使用的产品设计模板怎么做成的?

至于黑白模式完全是因为喜欢喜欢动效想做点不一样的东西出来,本来期望是通过“神奇运动”动效,华丽的一下渐变到另一个状态,最后效果还是有点卡。不然传统医疗页面可能会显得太普通。

纯为演示设计的功能,并不是真实产品功能。同时如果想要单用黑或白模式,删掉模板当中的“状态1”或“状态2”即可。

被数万人使用的产品设计模板怎么做成的?

制作大概画了一周半的时间,制作流程如下:

1)  审题

阅读比赛规则,了解比赛目的,确认自己的原型想要达到的目的

关键词:素材库,模板,复用性,高保真

2)  行业定位

其实就算移动端应用会有统一的规范,但是每个类型的应用,对于用户的年龄层,用户的刚需功能会有很大的区别。

关键词:医疗,全年龄用户,老年人,安心就医

3)  功能脑图

根据行业人群的需要,梳理原型基本需要具备的刚需功能并梳理页面结构。由于对医疗比较了解这里我梳理大部分常用的医疗功能,其实公司实际产品横向比模板还要多很多。原型梳理了重要的部分,也方便使用模板的人,把不需要的横向功能页面整个删掉即可,比如只做互联网医院。

关键词:预约挂号,专家品宣,在线咨询,互联网医院(作为热点,疫情鼓励远程就医)

被数万人使用的产品设计模板怎么做成的?4)  原型搭建

其实到这一步就只用考虑每个页面的用户体验和母版即可。但考虑到模板的复用性和实际使用价值,我设想了一些其他的东西用户搭建出原型的特殊。

关键词1:复用性

其实在大部分原型中图片广告要么是纯灰框,要么是纯图。导致使用起来比较尴尬换成灰色那么就不是高保真了,用图片,里面文案又和现在产品不一定匹配,所以制作中我把图片内容和图标都制作成了原生的,方便随时可以改动。

关键词2:黑白模式演示

行业原因,传统医疗的页面会相对传统,对于老年人,页面流程的调整学习成本都相当高。所以特色功能在脑洞下选取了用户纯演示的黑白切换进行制作。

个人认为原型搭建最重要的还是功能流程设计,因为流程基本确定了每个页面的功能,然后才是围绕功能做用户体验以及建立统一具有复用性的模块母版。因为平时工作中也有遇到过因为体验不好,去修改流程的,最终导致架构和功能全部重做,其实也是因为一开始的功能流程没有思考到位。

作为资深墨刀用户,有几个不错的小习惯可以分享:

1)  活用母版,可以结合每个页面的功能把公共部分提取出来,比如正常的列表和收藏中心的列表,一开始做的时候就定义成母版,这样遇到需要修改细节的时候,只要改一个母版就能一键应用到全部页面,提升效率。

2)  慎用12号以下的字体,血的教训,自己看和演示的时候是好的,结果上传参赛发现很多地方都换行了,也被评委批评了。其实也发现挺多作品和我有类似问题。也可以试想如果我实际工作中应用,自己看没问题,然后XX医院院长看演示版发现换行了的结果。

这次比赛中我觉得好的作品很多,这里就说下同行吧,因为我的作品可以和这套配套使用,毕竟自己公司中也做过一套很类似的自助机。

被数万人使用的产品设计模板怎么做成的?

线上挂号至线下取号(窗口取号或自助机取号),一整套医院流程里,挂号到线下取号一定是需要依赖自助机完成整个看病流程了。

医疗类的模板做的偏传统,也是因为医疗里大龄的用户其实占大多数,我所在的平台统计:年龄在55以上的用户,会占比30%以上,而自助机的使用率会更高。

这时候自助机对于用户体验的清晰引导就显得尤其关键。这套原型页面也把流程做的很清晰,我觉得不错。

其实也希望能再整理配合下之后形成一整套,适合医疗类使用的完成闭环模板,方便大家使用。

被数万人使用的产品设计模板怎么做成的?

产品和交互增值的话一般都依赖于自己工作中的经验,踩过的坑,做过成功的功能,都会被积累下来,然后形成在面对一样问题时的效率和解决

所以我认为提升价值的方法不光是阅读产品趋势文章,讨论之类的,也需要更多的实践去积累更多工作内容之外的经验,参加比赛或修改优化一些常用的但是自己觉得不好的产品,做起来总比看起来难。

产品的学习更多要通过实践,交互的话更多会看国外网站的一些成品规范学习和一些概念交互设计,虽然说概念设计没有实际应用价值只是好看,但是其实可以作为灵感来源,通过和实际场景的结合变换出新的交互。

以上就是本次的「刀友访谈」啦,有任何的问题,欢迎在评论区中提出。

对这些作品感兴趣的话,赶紧去素材广场体验吧~

特别申明:本站的主旨在于收集互联网运营相关的干货知识,给运营小伙伴提供便利。网站所收集到的公开内容均来自于互联网或用户投稿,并不代表本站认同其观点,也不对网站内容的真实性负责,如有侵权,请联系站长删除,转载请注明出处:被数万人使用的产品设计模板怎么做成的?:https://www.zcly.cn/47328.html。
(0)
墨刀黑板报的头像墨刀黑板报专栏作家
上一篇 2020年7月1日 12:50
下一篇 2020年7月2日 09:48

猜你喜欢

发表回复

登录后才能评论

QQ:1124602020
微信:vl54120
备注:周一至周五全天在线,周末可能不在线,另外联系时,请告知来意。

公众号
交流群
运营狗会员,开通可享海量资源与多项权益,点击了解详情