广州天河客运站的天象网络公司简介

优漫教育 优漫动游

道词典ui设计师如何7步搞定一款软件设计

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

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