如何从零到一设计产品?

2020-3-27    资深UI设计者

手把手教你 「如何 7 步从 0 ~ 1 设计一款产品经理一稿过,设计风格明确,用户粘性高的软件!」

据不完全了解,身边大部分的 UI 同事都从 0 到 1 参与过一款或多款软件的设计,设计过程中不知道你是否有过这样的疑惑:

  • 设计稿都做了 100 版了,但产品经理还是不满意,是我设计不行吗?
  • 产品目标、用户目标都标得清清楚楚了,但总是找不好设计关键词,来来去去只会用「年轻化、轻量化」?
  • 产品目标明确了,设计关键词也有了,但为什么做出来的稿子不是太概念,就是跟竞品太像呢?

在解决这些困惑之后,我总结了一套自用的,适合从 0 ~ 1 进行软件设计或项目改版的方法 ,并在其他项目上进行了二次验证。

以实践项目 —— 有道少儿词典为例,上线一年期间,用户次日留存峰值 36% 以上,也非常幸运,被 App Store Today 推荐 4 次,App Store 编辑推荐 8 次,被 App Store 纳入 2019 本土优秀 App 盘点中,同时被预装到苹果线下直营店,作为样机体验软件之一。所以,这个方法亲测有效!

这篇文章,通过分析如何解决类似「产品经理不满意、设计关键词不对、设计风格无区别」这些问题,整理出 7 个帮你从 0 ~ 1 设计一款软件的步骤。

文章较长,大概需要花费 15 分钟,建议大家先看大纲,优先阅读符合自身情况的部分。

产品经理为什么不满意?

从 0 ~ 1 进行软件设计,免不了要多出几个设计稿,但做了 100 稿,产品经理对页面设计还是不满意的话,很有可能有 2 点原因:

原因 1:目标不明确

一拿到需求就开始做,很容易忽略需求背后的目标,从 0 到 1 做一款新软件更是要了解业务目标和用户目标。

在提出解决办法前,我们需要先捋清楚以下 2 个问题:

为什么要了解目标?

公司开发软件是为了达到某些目标或是实现某个目的的,只有了解目标才能更好地为公司创造价值。

什么是业务需求、业务目标和用户目标?

平时产品经理跟我们说,要设计一个页面,设计 一个流程,这就是一个业务需求,而这个需求的背后,能够解释清楚这个需求是为了什么,要做到什么程度,这就是业务目标(通常包括用什么手段,给用户带来什么价值,达到什么目的)。而软件的目标用户,他们在一个具体的时间、地点、环境下做了什么操作,想达到什么程度,满足自己的什么要求,这可以理解为用户目标。

解决办法 :多使用 「为什么+动词」 的问法,向产品经理了解业务目标、用户目标。

从 0 ~1 做软件需要了解的业务目标和用户目标,我们都可以从产品经理那里得到。

少儿词典的产品经理很早就给出了业务目标和用户目标。但,当我们需要更多细节的时候,可以使用「为什么+动词」这样的问法。例如:

  • 「我们要做一个少儿查词软件,定位是一款拥有权威释义背书,在视、听、触方面打造良好体验,紧扣教材和教学大纲的适合少儿和家长使用的伴学词典。你来做吧!」「为什么做这个?」
  • 「现在儿童教育KOL越来越多,很多家长都很关心k12教育问题。市面上的很多产品都不太适合孩子使用」
  • 「为什么这样的定位可以满足用户需求呢?」「为什么是适合少儿和家长使用呢?」
  • 「为什么……」

在少儿词典项目中

  • 我们的业务目标是:一款拥有权威释义背书,在视、听、触方面打造良好体验,紧扣教材和教学大纲的适合少儿和家长使用的伴学词典。
  • 目标用户群体是:小学 1~6 年级的孩子和他们的家长。
  • 用户目标是:当小学低年级的孩子在家学习的时候,他们的家长需要一款软件,能缓解家长伴学的压力。高年级的孩子需要一款软件,为他们提供准确教学。
原因 2 :没有对产品关键词形成共识

我们既了解产品的业务目标,也知道用户目标的情况下,方案还是被 pass 的话,可能是因为你给出的方案和产品经理想要的不是同一个东西。为什么业务目标在这里不起作用了呢?怎么才能弄清楚产品经理想要的是什么?我们可以用产品关键词来回答这个问题。

为什么业务目标在这里不起作用了呢?

我们常见的业务目标的内容是很长的,用户目标的内容也是很长的,在这种所有已知内容都很长的情况下,如果没有准确理解内容,没有对重点内容达成一致,就很容易产生偏差。例如我要向你描述一位美女,她的头发很柔顺,脸蛋很漂亮,身材比例很好,衣品很好等…… 90% 的可能,我们脑海中想的不是同一个美女。但是,如果我跟你说,这是一个跟芭比娃娃很像的美女的时候,我们脑海中的形象会接近很多。

怎么才能弄清楚产品经理想要的是什么?

就像设计师在进行页面设计时,需要设计关键词一样,产品经理在描述自己的业务目标的时候,也需要能概括业务目标重点,突出卖点的产品关键词,这个产品关键词能帮助设计师弄清楚产品经理想要的东西。

部分产品经理为了方便大家达成共识,会早早亮出产品关键词,如果当你们的产品经理没有办法提供产品关键词的时候,我们要学会在讨论中找到。

解决办法 :从业务目标开始跟产品经理讨论项目信息,直到获得双方达成一致的产品关键词

从业务目标和用户目标开始跟产品经理讨论项目信息,在讨论的过程中,我们可以留意产品多次提到的几个形容词,写下来,然后跟产品反复核对确认,最后双方确认且保留下来的这 3~4 个形容词,就是这个项目的产品关键词。

少儿词典的产品关键词是:权威内容,寓教于乐,适合孩子使用。这些关键词被我贴在屏幕的显眼处,就怕自己哪天忘记了。

设计关键词为什么总是找不对

寻找设计关键词,是设计师非常熟悉的步骤,但常常也在这里翻车,甚至还会出现,不管做什么软件,反反复复就那几个关键词的情况,我们可以把原因归结为:

原因:对用户不够了解

为什么不了解用户会导致关键词找不对?

我们的用户在选择软件、使用软件的时候,了解到的是软件的设计、体验和功能。用户下载软件时,他们已有的认知会影响他们对软件的幻想。就像给小男孩的衣服是天蓝色,小女孩的衣服是嫩粉色一样,如果用户想要一件天蓝色的衣服,而我们给他展示的是深蓝色或是嫩粉色的衣服,这都会让用户产生疑惑甚至离开。因此,如果对用户了解不准确,会导致我们输出错误的设计关键词。

而了解目标用户是又一件复杂的事情。

首先,我们的目标用户可能是一类人,如有道词典,下载软件用户和使用用户大概率是同一个人。目标用户也有可能是两类人或是更多,如少儿词典,下载用户是家长,使用用户是家长和孩子,企业协作软件也类似。

从接触软件,下载软件,使用软件,到判断是否继续使用软件,不同的阶段的目标用户是不一样的,目标用户在不同阶段的需求也是不一样的。

其次,开发软件的周期是很长的,在开发软件的过程中,我们的用户在不断地接收新的知识和观点,用户的喜好,认知可能会发生很大的变化。

因此,为了更好地了解用户,我们需要找到用户跟软件之间的交互关系,以及影响用户喜好的因素。一共有 2 个步骤:

步骤 1. 分析不同用户跟软件之间的接触点,从未来趋势和用户当前认知角度收集用户资料

在这一步骤中,我们加入了 2 个概念,接触点和未来趋势。

什么是接触点?

接触点指的是用户与产品发生交互的关键点,用来捋清楚我们刚刚提到 「用户跟软件之间的交互关系」。以少儿词典为例,家长和软件之间的接触点,可以罗列为:家长听说少儿词典 – 到应用中心下载软件 – 打开软件 – 使用软件……可见要想打造一款用户好评度高的好产品,仅仅优化软件的体验是不够的。

为什么要从未来趋势和用户当前认知角度去收集用户资料?

刚刚有提到新软件的周期是较长的,前期定好的风格、关键词等,到了开发上线后却不适用了,既浪费人力,也浪费资源,因此要考虑未来趋势对用户的影响。同时,用户在选择软件的时候,已有的喜好/预期/经验等用户认知会影响用户对软件的判断。就像大家想到夏天的冷饮时,脑海中会浮现冰块、西瓜等元素,因此雪碧、西瓜等符合用户对夏天认知的食品在天气炎热时会热销,但是受到大部分买家越来越注重卡路里这一未来趋势的影响,低卡的西瓜冷饮也可能在未来一段时间大卖。

接触点和未来趋势、用户认知之间有什么关系?

了解用户接触点之后,我们就可以猜测用户在这一接触点的需求和心理,加入未来趋势和用户认知,能让我们做出来的东西更符合用户预期。

寻找接触点。我们了解到,少儿词典的目标用户群体是 1~6 年级的学生和他们的家长,即 6~12 岁孩子,和 30~44 岁家长。然后,我们粗略地将用户的接触点划分为,筛选软件 – 下载软件 – 使用软件 – 判断是否再次使用软件,孩子、家长跟接触点之间的关系就可以展示为:

孩子是软件查询、练习、核心功能体验者,家长是内容审核者、软件筛选者、伴学时软件使用者。

找到接触点之后,我们还需要把影响用户认知的内容具象化。

例如,我们想了解夏天做什么口味的饮品更好,我们可以从夏日饮品口味销量排行榜,夏日新品类型,夏日广告等角度来获得更清晰的用户认知。应用到少儿词典中就是,家长在筛选软件时,老师的要求,未来孩子考试的内容、日常辅导内容、大 V 推荐的内容等会影响家长对下载软件的判断。每个接触点都可以使用这样的方式,来联想更多影响用户认知的内容。然后我们将得到类似下面的表格:

根据表格,我收集了 近 10 页的用户信息

步骤 2. 提取收集到的信息,并放入四象限中,总结出2~4个视觉关键词、体验关键词

杂乱无序的信息只有经过归纳之后才能被大家使用。

怎么归纳总结杂乱的信息呢?

UI 设计师都清楚,在进行界面设计时,大标题、缩进、分层等排版方式能让我们的页面看起来更清晰易读。处理杂乱的信息也同理,要做的是找到信息的重点,然后把信息归类,最后再用一句对内容进行总结,方便大家理解。应用到我们提取关键词的环节中就是,挑选重要信息、放入四象限中、总结出能归纳这些信息的关键词。

挑选重要信息。以家长筛选软件为例,当我们将热门大 V 推荐的教学方法、内容,进行整理的时候,会发现美学、乐感、编程、外文图书、儿童心理教育、英文教学方法(自然拼读)等内容出现的频率很高,在一堆内容中挑选跟少儿词典相关的内容,如美学、外文图书、儿童心理教育等。

放入四象限中。在这一方法中,我们将四象限划分为设计和用户认知 2 个方向,其中设计划分为视觉风格和体验风格,用户认知划分为当前认知和未来趋势 。以刚刚挑选的儿童美学教育为例,这是一个属于未来家长会越来越关注的少儿视觉发展方向,所以我们放在视觉风格、未来趋势这一象限中。其他内容也类似,不断地提取出现频率高、用户热点高的内容,并根据内容类型放入四象限中

总结出能归纳这些信息的关键词。以视觉和未来趋势象限为例,我们收集到大 V 的美学教育,未来的课本发展趋势,小学建筑风格发展趋势,他们都有一个特点,颜色柔和无攻击,色彩丰富,因此,我们总结出一个视觉关键词是柔和多彩。

其他内容也采用相同的方法进行总结,少儿词典的视觉关键词是柔和多彩,轻质感,亲和陪伴,体验关键词是,探索多变,感官刺激和重复熟悉。

为什么做出来的设计稿不是太概念就是没风格?

视觉关键词出来了,产品的业务目标也出来了,从关键词到页面样式的逻辑也很严谨,但出来的风格却会觉得跟关键词不太搭,或是跟竞品差异不大,在多款 App 实践后,我们发现可能是这样的原因:

没有把关键词的作用发挥出来

引用一句说烂了的名言 「一千个人眼中就有一千个哈姆雷特」。大家在对关键词的理解是有差异的,以「年轻」为例子,一款针对活力的年轻人的衣服和一款针对潮流的年轻人的衣服,设计风格上可能是隔好几条街的。因此,仅仅得到几个视觉关键词和体验关键词还不足以让我们找准方向,我们还需要将关键词组合和具体化。一共有 2 个步骤:

步骤 1. 分别组合产品关键词和视觉关键词,产品关键词和体验关键词,找到同时满足 2 组关键词的规则

为什么将关键词结合能让关键词的作用发挥出来呢?

我们的目的是要做一款满足产品需求,符合用户认知的软件。

从问题 1 和问题 2 中,我们得到了符合产品需求的产品关键词,和符合用户认知的视觉关键词和体验关键词,想要同时满足产品需求和用户认知,我们需要找到他们的重合点。如下图所示,将产品关键词和视觉关键词、体验关键词分别结合,这样的出来的规则就能最大限度地符合我们的要求,既满足产品需求,又符合用户认知。

具体怎么做呢?下面将分别从视觉和体验角度举例子。

视觉角度,以权威内容和柔和多彩结合为例:

「权威内容」 要求我们输出的内容是符合教材,符合老师标准的,内容是准确无误的、来源是可靠的;「柔和多彩」 要求我们在进行页面设计的时候减少大面积颜色的使用,色彩柔和,且颜色多样。

将两者结合,我们得到的规则是:

  • 市面上的语文和英语教材以橙色封面为主,因此软件把橙色作为主色,仅在重点区域使用橙色;
  • 展示内容要准确,在牛津内容布局上参考《牛津小学生》字典,中文字体采用跟教材相似的文鼎新中楷,英文字体采用跟衡水体相似的 Averta Std;
  • 参考大 V 推荐的绘本、动画片常用的颜色,将颜色定为橙色、黄色、蓝色和绿色,降低颜色饱和度;
  • 参考绘本的图案,选择圆形作为主要的形状,加入柔和色彩,使用深色和浅色叠加的圆形;
  • ……

根据这些内容,我们将得到下面的 4 个颜色和圆形叠加的形式。(ps:通过这样的形式确定的是规则,如:以橙色为主结合另外 3 个颜色,圆形,使用深浅色搭配。具体颜色和叠加形式需要在具体页面中进行调整)

体验角度,以权威内容和探索多变为例:

体验上,「权威内容」要求我们的操作形式是跟老师的教学相似,学习方法需要参考成熟且有效的方法;「探索多变」要求我们在交互形式上可以采用多种形式,给孩子探索未知的机会,交互形式要符合儿童操作习惯,如涂抹、翻转、拖拉等

将两者结合,我们得到的规则是:

  • 中文字体跟写,手写涂抹交互形式,添加错误抖动反馈;
  • 单词记忆,参考如师通学习方法,采用卡片翻转形式,将单词和图片内容分离;
  • 英文跟读,采用表情代替评分机制;
  • ……

其他几个关键词的结合也是使用这样的形式,这里就不一一展开。下图是少儿词典的视觉关键词和产品关键词结合后的样式。

步骤 2. 选择复杂的核心页面,把具象化的体验规则、视觉规则融进页面中,确定设计风格

规则梳理出来后,我们就要挑选一些重要页面进行风格尝试,以结构复杂的中文查词单字结果页为例:

分析小学一年级到六年级的考试内容,我们了解到部首、笔顺笔画、跟写、发音等汉字的基础信息是低年级用户(小学三年级及以下)会使用到,他们要求信息完整且准确;像词组、造句这些信息则是针对高年级学生,要求快速准确定位到具体的内容板块。

分析完内容结构后,我们就需要根据内容布局,加入表格中总结的体验规则:

  • 重复熟悉,针对低年级用户的使用习惯,我们将顶部信息划分为展示区域和操作区域,方便用户操作,降低用户学习成本;
  • 重复熟悉,中文查词结果页中,使用田字格上下布局的形式,使用课本同款楷体字,满足学生的识别文字书写规范的需求,也符合用户认知;
  • 探索多变,在 tab 切换的时候,我们将 tab 选中的颜色变成软件的 4 个主色循环切换,激发孩子对软件的探索欲望;
  • 探索多变,按钮形式上采用出血的图案形式,打破常规;
  • ……

最后,梳理好页面的体验形式之后,我们开始给页面添加视觉规则:

  • 在推导中,我们选择多彩的颜色模式,常见的小学课本是以橙色为主,因此,软件也选择橙色作为主色,并加入黄色、绿色和蓝色作为辅助颜色;
  • 图标采用的是孩子熟悉的元素+轻质感这样的组合;
  • 结合绘本和孩子常见元素,使用两个圆形叠加的形式,作为软件的主要元素;
  • 为了让内容更符合孩子阅读和使用习惯,使用大字号和大间距的形式,常用字号是 32px,最小字号是 28px;
  • ……

对比产品原型和市面上的一些竞品,我们可以发现,查词软件在内容布局上相差无几。如果没有找到符合我们产品业务目标,同时符合用户认知的规则,我们将被淹没在一群查词软件中。

步骤 3. 建立一个画板,把用到的颜色、规则、字体、间距等内容罗列出来,并给他们限定使用范围,方便自己查阅和团队合作

最后一步,相信很多设计师都会在设计过程中建立一套方便好用的设计规范库,这里就不展开来说了。

总结

最后,再对上文的所有内容进行概括。从 0 到 1 进行软件设计我们需要用到下面这 7 步:

  1. 多使用「为什么+动词」的问法,向产品经理了解业务目标、用户目标。
  2. 从业务目标开始跟产品经理讨论项目信息,直到获得双方达成一致的产品关键词。
  3. 分析不同用户跟软件之间的接触点,从未来趋势和用户当前认知角度收集用户资料。
  4. 提取收集到的信息,并放入四象限中,总结出2~4个视觉关键词、体验关键词。
  5. 分别组合产品关键词和视觉关键词,产品关键词和体验关键词,找到同时满足 2 组关键词的规则。
  6. 选择复杂的核心页面,把具体化的体验规则、视觉规则融进页面中,确定设计风格。
  7. 建立一个画板,把用到的颜色、规则、字体、间距等内容罗列出来,并给他们限定使用范围,方便自己查阅和团队合作。

完成这 7 步,将可以让你从 0 ~ 1 设计一款产品经理一稿过,设计风格明确,用户粘性高的软件。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档