本文转载自我的个人博客 阅读原文

很荣幸能在今年的“第六届“发现杯”全国大学生互联网软件设计大奖赛“中获得“艺术设计”项目全国第一名。赛后很多人好奇，非设计专业的我们到底是怎么做到的。于是决定写下这篇文章，分享我们的作品创作过程。

概要介绍

“艺术设计”赛项要求如下：

艺术设计比赛规则

我们组里包括我在内一共三名队员，两个软件开发专业一个商务专业，除了我之前因为做过海报设计，自学过一点PS。除此之外，没有任何优势。但即使这样，还能在3个月准备出作品并获得一等奖的原因，我觉得如下：

在短时间内获得一等奖的关键点

• 选题：紧绕时下热门，有市场需求和发展潜力
• 定位：制作定位用户画像及梳理APP结构
• 资料收集：妙用抖音，精准搜索
• 设计：页面设计遵循设计规范，不标新立异
• 答辩：提供真机演示，加深评委印象
• 工具：选对工具，事半功倍

在具体介绍上面几个点之前，先介绍一下我们的整个准备流程：
定主题→用户画像→基调选择→案例搜集→原型和效果图制作→交互制作→展示策略
其中在 “原型制作”和“交互制作”上花费的时间最久。“原型制作”涉及到对页面的布局构思，以及整体风格的掌握，各个页面不能风格差异过大。所以需要花费很多的时间去构思和准备。对于“交互制作”，因为我们使用的是之前没接触过的软件，所以磨合时间会比较长。因此，建议为这两个阶段留出丰富的准备时间。
下面给大家展示一下我们在创作过程中的几张中间产物。

手绘草稿图

原型图

效果图

交互动图

下面就给大家具体介绍一下之前提到的几个关键点，文末还有我自己整理的资料哦

选题：紧绕时下热门，有市场需求和发展潜力

我当时在选题的时候，花了近1天的时间，考虑点围绕当下流行的热门技术，如人工智能、机器学习、5G等。但是，选好一个方向后必须有一个自己熟悉的应用场景，同时要去了解这个应用场景的市场价值，尽量是那种没被完全开发的，有很大发展空间的，没有行业巨头的。

最后，几番权衡下，我选择了5G应用场景下的物联网设备，而这个物联网设备不是针对人的，是针对宠物的。因为我所了解到，根据《2018年中国宠物行业白皮书》数据显示，猫狗市场的经济规模接近1708亿，而其中的宠物智能用品大约只占到10%，还有很大的发展空间。因此，最后敲定，做一款宠物智能设备管理的APP界面设计。

定位：制作定位用户画像及梳理APP结构

这是确定选题之后首先面临的问题，我们该如何去构思这个页面和APP整体结构？作为一名非UI设计师，又没有任何UI设计项目经验的我来说是个很头疼的问题。著名的物理学家牛顿说过：“我之所以能成功，是因为我站在巨人的肩上”。因此，解决问题的第一步就是去找市场上存在的竞品APP，它能给你在自己的APP结构设计和页面构思上带来灵感。

1. 用户画像：根据《2018年中国宠物行业白皮书》统计，猫狗消费市场的消费人群画像以高学历、女性、白领为主。这也是我们这款APP的用户画像。
2. 主题风格：在对UI风格的选取上，我们采用清新、简约、扁平化、卡片化的设计，默认主题色选取以粉色渐变为主，以迎合用户画像。
3. 用户划分：同时我把我们这款APP的用户群体划分为两种：小白用户和发烧级用户。
   • 小白用户：尽可能直观的展现宠物各个阶段数据可视化结果，因此页面设计的要更加简约。
   • 发烧级用户：更加细致呈现各个时间段数据报表，来体现我们的结果数据是真实产生的，不是随机生成。引导发烧级用户更加精准确定宠物健康状态。
4. 商业考量：此外考虑到APP需要盈利的因素，必须要加入商城页面，达到厂商合作盈利的目的。 考虑了以上几点，我们确定了APP的两大特色：阶段性评分系统和数据可视化系统。并确定了APP的整体结构，如下图所示
   
   APP导航栏结构

资料收集：妙用抖音，精准搜索

这里不得不提到一个工具——抖音。也许很多人都很疑惑，抖音不就是个看网红的小视频软件吗？也能有素材？

用这种想法去看抖音是很片面的，在我理解上，抖音的最最核心的东西，是它的那套基于机器学习的智能推荐算法。如果你在抖音上经常搜索或观看和移动UI设计有关的东西，那么它就会给你推送这类的视频。久而久之，你的抖音就被你训练成UI设计师素材库。并且在它的推荐池里，会根据热度加权推荐。所以你获取到的其它设计师发的小视频相对来说质量还是比较高的。而且抖音还有一个特点，大部分人发的一个视频都是15秒，所以很多设计师发视频会把自己最最精华的介绍或工具推荐在15秒内呈现，避免拖泥带水，这也给我们在找素材和构思上省了很多时间。

抖音

用这方法，我找到了很多国内的设计素材网站像千图网、花瓣、站酷、UI中国等，国外的Pinterest、Dribble、Behance等（需要梯子）。如果是设计专业的同学，对这几个网站应该并不陌生。

具体的素材网站分享，我会整理并在文章的结尾给出。这里推荐几个我在创作过程中关注的几个抖音号：AbleSlide、活力占、才华侧漏的孔老湿。

搜索国外素材网站的时候，就不能用中文了，必须用英文关键字去搜，而且不能直译。比如需要找引导页，则搜“onboarding”而不是拿百度翻译等翻译工具直译的“Boot page”。这些英文关键字得自己去积累或百度、知乎、谷歌等上去搜。

设计：页面设计遵循设计规范，不标新立异

安卓端和苹果的设计还是很不一样，时间原因我们把目标集中在了安卓端。而设计规范也是参考安卓上的。首先想到的是看的是谷歌的Material Design设计规范，之后又参考了微信小程序的设计规范。这里给出了一部分安卓设计规范参考，如图所示。

安卓UI设计规范

答辩：提供真机演示，加深评委印象

比赛一共有三轮，区域赛和省赛时第三，而全国决赛却取得了第一。这要归功于我们对答辩策略的大调整。

决赛的评委更加注重作品本身的市场价值，而不是单单侧重UI。于是在老师的建议下，决赛演讲8分钟的时间里，接近一半的时间用于介绍市场背景和竞品分析，突出产品的市场应用前景和怎么去创造营收。但随之而来的一个问题：剩下的4分钟时间，又要讲UI又要讲交互，时间根本不够。那么我们是怎么解决的呢？

给出真机演示

答辩一开始就要递给评委真机（和答辩材料一起），这样评委就能有充足时间去了解这个作品。而且真机演示比起播放视频，更加促进了评委对整个APP的理解。

选择这样的策略，有一个很大的前提，就是要对自己的作品UI部分足够自信，并且交互逻辑要完整，更加接近一个真实的APP。谁也不知道评委会点哪里进入到下一页，而不同的进入方法，需要对应不同的页面状态。把交互逻辑做成闭环，才能避免弄巧成拙，给评委留下好印象。

顺便提一句，在对答辩材料的制作上，建议选用彩色提案的形式，摒弃软件工程文档那种大篇幅陈述的思维，页数控制在10页以内。
可以参考我推荐的这个站酷上设计的比较好的提案——提案样式推荐

给评委展示的原型

工具：选对工具，事半功倍

因为队员所有的电脑都是Windows端，并且在确定完选题后离海选作品提交仅剩1个半月。因此，我们选取工具的原则就是：
1. 支持windows端
2. 学习成本低
3. 保真度高（高到什么程度？可以制作页面跳转就行）
4. 效率高
百度之后，结合自身情况，我们把每个领域的工具做了一个对比。
最后确定的工具是：
原型工具：墨刀（学习成本低）
效果图工具：PS（之前已学过部分工具的使用，上手快，高保真）
交互工具：ProtoPie（支持XD文件导入，学习成本低，高保真）

各个阶段工具的选取

因为我们是首次接触APP原型设计，在摸着石头过河的过程中肯定会遇到许多问题，这里列举几个我遇到的针对性问题。

遇到的问题

• PS文件导入XD的问题
  虽然PS和XD都是一个公司旗下的软件，但是他们有着各自的应用场景。把PSD文件导入到XD时，部分效果会不一致。针对此问题官方也给了一个表格（https://helpx.adobe.com/xd/kb/open-photoshop-files-in-xd.html）。
  所以在PS里制作的时候，如要用PS特有的功能，用完之后记得把图片栅格化或其他操作，以保持文件样式在XD中的兼容性。
• 原型分辨率的选取问题
  由于一开始在原型分辨率上没有太多的考量，直接就选用了360*640这种分辨率。而目前市场上安卓设备大多是刘海屏或水滴屏为主，屏幕比例约为18:9。在后期套模板制作AE宣传视频和展示图的时候，新的样机模板都是以18:9的屏幕比例来制作。这也就导致我在替换图片的时候就非常麻烦，比例不协调。
  在原型分辨率的选取上，应尽量迎合主流市场的用户或根据项目需求。
• 配色问题
  毕竟我们不是专业的设计师，对色彩的感觉不是非常敏感。在配色的处理上，我们只能尽量借助工具和自己的感觉。配色工具我们使用了Color Scheme Designer(网页版)、WebGradients（渐变色）以及千图网提供的配色工具。
• 素材导入问题
  我们找素材的时候，可能会遇到各种格式的图，比如常见的eps、ai、psd、cdr等。这就需要知道每个格式分别对应哪些软件去打开，自己的电脑里得装上这些软件。你可以不会用所有的这些软件作图，但是你得知道怎么把这些格式的图取出来为自己所用。并且如果原图是矢量的，就尽量拿出矢量的图，保证放大后不会失真。比如，把矢量图从ai转入ps中，从ai复制后，到ps粘贴时应选择为“智能对象”。

总结

3个月时间，让我学会的并不只是APP原型的制作本身，而是每当我遇到一个问题，应该用怎样的思路解决。俗话说，授人以鱼不如授人以渔。我是希望各位读者在看这篇文章的时候能去学习那种分析并解决问题的方法。先确定目标，大化小，分而治之。
面对陌生的问题，每个人第一眼都是无从下手的状态。当你冷静下来第二眼再看这个问题的时候，你就要马上想到我手上有什么资源，哪些资源能尝试解决这个问题，哪怕解决一部分或理出这个问题的线头。
善用搜索引擎进行精准搜索。这不仅是在这次比赛中频繁用到，包括在我们之后的学习和工作过程中，会遇到各种问题。要学会去精准搜索，尝试解决问题。
希望这篇文章可以帮助大家在之后的设计比赛中能绕过我所踩过的坑或完善我所走过的路。

答谢

感谢在APP创作过程中各个队员夜以继日的努力，
感谢张文胜和王艳君老师在制作和答辩技巧上给出的指导意见，
最后还要感谢在交互上提供软件及技术支持的ProtoPie的韩学颖老师。

附件

参赛作品：https://share.protopie.io/ZTeK6N6Snrz

设计类网站分享