设计原型前,请避免这4个错误,再拿起你的2B铅笔

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

动手画原型时你都在想想什么,面对需求,你是不是全部的堆积到原型上还是无从下手,亦或是现找网站截图,然后copy。Oh.no!来本盟主告诉你打开原型设计的正确姿势。

shejiyuanxignqian

那些年,不,时间也不久;做产品刚满一年,恰好0岁。刚开始什么也不懂,就学习了几天Axure就出来闯江湖了(大三一直到毕业),到现在懂得了许多,也能够发表自己的高见了(泪奔啊),产品路上遇到过许多坑,一个一个爬上来吧。以下是个人设计原型路上遇到的坑,希望能帮助正在入门的产品们。

原型的四个错误根源

6月底接到一个项目,设计一个跟交易平台,至今,原型还是需要改,接近200多个页面,改的好痛苦。盟主总结错误来源在于:

错误根源一:

需求没整明白就开始设计。需求是另外一个同事梳理的,稀里糊涂看了2天,大概明白做一件什么事,就开始设计。2周内原型设计完毕,将近200页啊。交付老大一看,大家都懵逼了。老大硬着头皮一点一点看,觉得不合理一个字“改”,流程不对,一个字“改”。于是默默的改了快2周。

So,不要认为懂了需求,就开始设计。请事先想想3w问题:

  • what’s the aim?明确产品主要是做什么。一句话概括产品是个什么样的产品,例如:人人都是产品经理网站,是一个产品爱好者学习、交流的平台。
  • Who’s the users?产品的使用者?即用户是谁?考虑这个产品的使用者是哪些用户?是否有群体特征。这是为下步做铺垫。
  • what’s the function?产品的核心功能是什么。在了解用户后,考虑用户会有哪些操作,这些操作的流程是什么?明确产品的主要核心功能操作有哪些。列举所有功能点,找出核心。

错误根源二:

创造新设计。说实在我常常喜欢创造。这给设计和开发带来很大痛苦。(请开发看到不要骂死我)一般开始设计原型时,我们都是找竞品开始研究分析。即便这样,还是有许多不同之处。在这个将近200页的原型中,自我创造许多东西,竞品太复杂,干脆不看了。UI设计时很痛苦问我,这里,那里到底要放些什么,到底要不要?这样设计不符合用户常规操作啊。

So,不要自找麻烦。在设计时问问自己3h问题:

  • How to divide?将产品照模块划,考虑每一个模块包含的主要内容。
  • How to design?模块划分好后,考虑该如何设计。
  • How to combine?每一个模块设计是否能够组合到一起,如果能如何更好的展示呢。

错误根源三:

自我设限。业务流程绘制后,开始设计原型了。按照流程,哦可能他需要这个操作,哦他可能不需要这个操作。于是这里多添加了一个选择按钮,那里少了一个开关按钮,更有甚者,算了交付给用户自己选择吧。

So,不要自我设限(挖坑)。牵一发而动全身,不要觉得一个按钮不重要,一个词不重要。优先的产品定的原型是绝对不允许被改动被改来改去。

要记住用户都是懒的,不要把太多工作交给用户。设计时尽量做减法,减去不必要的功能。好好想一想,这个功能去掉会不会有影响,这个词这样说,会不会给用户带来疑惑。

错误根源四:

业务逻辑没梳理清楚。

设计过程中设计师不断的跟你沟通,此处指的是什么,这个逻辑有点不对吧,于是你说想一下(其实内心是崩溃的,一万个草泥马从内心奔过,骂自己怎么这个笨,心里承认设计师说的很对,却不愿承认自己很low)。好吧,设计师看的很头大,勉为其难的将它设计完毕(优秀的设计师会调整布局和取舍元素,而不是原型设计成什么样,设计成什么样)。到了开发阶段,开发看不懂,于是又会问你。如果你没想明白整个业务流程,接下来你又会陷入沉默…于是设计、开发都会在心里默默的骂你,整个项目都在不断的沟通中进行,预期的开发时间又要延期了…

So,业务逻辑没搞明白是最让人头疼的事。到开发期间发现错误,技术要改跟多,因此将业务梳理清楚至关重要。多设想几个用户使用场景,在不同的场景下,用户会有怎么样的操作,根据这些优化整个业务逻辑。

因此我们在设计原型时,以上错误根源够吗?No!不够。

动手画之前请拿起你的2b铅笔

Happy work在于思考,思考到位,思考方向正确,这样会减少后面与设计、开发的不断沟通、不断的开会确认。那么动手前该思考些什么呢?

从0到1产品设计第一步:CEO定好产品的方向和模式。

方向决定产品的战略。方向定位不准,会造成又一层的理解,那么做出来的产品容易跑偏。模式决定产品的生命力。对于模式,在一个昝新的领域,行业首创,要考虑用户会不会买单,接受度有多高,对于有市场的该如何吸引用户。对于已经有行业的,该如何建立自己的模式而不同于其他产品,获取用户的关注。

产品设计第二步:框架和业务逻辑。

产品负责人整理出需求的整个框架和业务逻辑。

框架帮助梳理产品包含哪些模块,每个模块里会有哪些功能。

业务逻辑:上面也讲述到要从多方面考虑业务逻辑。如果一个产品有多个用户群体,要考虑每个用户群体的特征和功能操作。

产品第三步:请拿起你的2b铅笔。

不管你是产品助理,亦或是产品经理,如果你想变得优秀,一定要学会独立思考。以上思考点也是每个产品经理必做的,因此,在设计前先思考以上,做下设计方案。

动用你的2b铅笔,画下你的思考框架和页面、业务流程图。整体的框架可以帮你和团队建立起对产品的认识。页面可以帮助你取舍网页元素布局、说明。业务流程图帮你和开发梳理产品的核心流程。Ok。在你最好方案后,大家无异议的情况下,就可以着手设计原型了。不要以为方案就是万全的,接下来设计时你也需要去思考:

图片2

页面设计流程3步骤:

第一步:分析每个页面包含的内容,将其整理成模块。

模块划分这个没有一个标准,至今也在不断的思考中。个人是认为按照展示信息来划分,然后根据展示信息的优先级来进行排版,凸出核心,隐藏有关但不紧要的内容。

分析信息结构:核心信息、信息模块、信息类型。如何分析:分析页面包含哪些模块,每个模块内的信息元素有哪些?例如:人人都是产品经理的首页。模块分为:导航、推荐文章、搜索、注册登录、专栏作家、推广模块、推荐书栏、底部的合作伙伴、底部导航等。

对于推荐文章:元素包括图片、文章标题、文章内容推荐。站在用户的角度去考虑,重要点在于:文章标题,文章推荐语。因此这个模块的设计应该凸出文章标题、简介字体要比标题小,提取文章的图片、吸引用户。

对每一个模块,我们要分析其包含的信息类型。例如:推荐文章模块包含信息类型:图片、标题、文章推荐语。数据类型是动态的,时时更新,后台管理员审核推荐,写推荐语。级别非常重要,让用户看到优秀的文章。

用户操作。分析完模块的信息内容后,就该思考用户会有哪些操作。哪些功能是明显操作的,哪些应该被隐藏起来。这些功能的前置条件是什么?后置条件是什么?这些功能目前很重要吗?

接着上面推荐文章分析。这个模块用户操作是点击,查看文章详情。那么如何告诉用户这个可以点击呢?鼠标移入、移出文章、图片有效果显示。跳转到文章详情,在文章详情页面可进行的操作是:用户可以评论、收藏、查看作者名片、查看、回复其他人的评论。首先要思考,是否所有人都可以进行这些操作,如果可以,以什么样的方式合适。因此设置条件,评论、收藏、查看、回复其他人的评论的前置条件是:登录之后方可评价、收藏、回复。

布局样式:

重要模块及元素都具备了最后就要考虑一下布局样式。这样做的原型也会很美观,不至于被喷太low。思考点:考虑核心信息的位置、核心信息与操作的位置。布局样式要考虑包含哪些信息元素。

例如:文章详情页面。包括:标签、文章标题、发布时间、阅读量、评论量、收藏量、详情、作者名片、评论、文章标签、点赞、分享。

那么我们从用户角度开始考虑,这篇文章主要是哪一类呢?文章质量怎么样呢?看到很爽时,作者是谁,来出来给我看一下。实在是爽爆了,快,大爷给你赞一个。若太不符合胃口,评论过来,一个差评。

因此主要信息布局是这样子的,文章标签,文章标题、评论量、收藏量、详情、作者名片、评论、文章标签、点赞。讲到这里了自己去设想几种布局吧。

总结:

在一年的学习中,做过4个产品,现在回头看看简直是大写的丑,无比的丑。丑且不说,整个过程的沟通成本很大,且80%会出现返工。不断的总结,不断的思考,才能走的更稳。

 

作者:路漫漫,有点拖延症的逗比范产品。

本文由 @路漫漫 原创发布于人人都是产品经理。未经许可,禁止转载。

您的赞赏,是对我创作的最大鼓励。

评论( 19

登录后参与评论
  1. 很好 很真实 谢谢分享 十分适合我这样的小白 希望可以多多和您交流

    回复
    1. 回复

      同样为小白,多多交流

    2. 回复

      其实现在国内有款原型图工具叫摩客用起来很简单,上手也快,画出来后打印出来贴上,看起来非常美观

    3. 回复

      小白和偶一样,建议你去用用mockplus吧,适合我们这样的小白

    4. 回复

      工具不是唯一的出路,有想法,用啥都不怕

  2. 看到高见我也是懵比了。

    回复
    1. 回复

      :smile: 你找6楼诉说

  3. 高见……你悟性也是够差

    回复
    1. 回复

      :arrow: 嘿嘿嘿,是有点笨

  4. 写得很好。交互设计师通过什么体现自己的能力?不仅仅是交互设计稿件,很多时候交互设计稿件是会骗人的。我觉得好的交互设计师具备的一个素质是设计体系,并且是能总结、归纳、看得见的体系。

    回复
    1. 回复

      :neutral: 关于交互设计还有得探讨,可以留言告诉我交互设计有关看法

  5. 是干货,羡慕能跟踪大的产品,我做了半年大多数小打小闹的需求。

    回复
    1. 回复

      小而美,大而全,各有各的好,关键在于总结。加油

  6. 作为被老板需求牵着走的产品, :cry: :cry: 伤不起啊

    回复
    1. 回复

      那是你方法没用对,没有什么好方法,自己去突破吧。

  7. 值得学习的一篇文章,我现在这段也在思考页面设计,作者这篇文章有很大的帮助。交互新手还是要多思考,多总结呀

    回复
    1. 回复

      O(∩_∩)O哈哈哈~,多谢夸奖,我会继续努力。

  8. 太棒了 我马上也要开始画自己的第一个原型了

    回复
    1. 回复

      祝贺,多动脑,少动手。

加载中