今天为大家介绍两个设计项目的ui风格稿的设计，两个项目同为宾夕法尼亚大学沃顿商学院新推出的项目，两个项目分别命名为：LevelUp和StepUp。LevelUp的目标是帮助科学家研究如何帮助学生取得更好的成绩。而StepUp的目标是帮助科学家研究如何帮助人们养成持久运动的好习惯。

第一个项目：LevelUp

项目开始后，我们遵循这样的设计流程：为了了解用户和产品的目标，采访了团队关于学生的人口统计数据，回顾了团队的早期原型，使用他们的测试版产品熟悉平台。前期调查完后，开始设计。

设计风格方案一

方案一的品牌和设计灵感示例

在第一种风格设计中，我希望用户将品牌定位为：聪明，精通技术和酷炫。我想向学生传达这个产品不是他们必须使用的蹩脚工具，而是一个很酷，有趣的程序。这个风格的灵感来自Playstation和Spotify等品牌。设计主题是渐变，冷色调和重叠形状的混合。

为了更好的展示每种风格，我从思想情绪板和风格原型开始。然后设计一个欢迎界面，让团队能够直观的感受到这种风格。此初始设计使用随机形状，冷色渐变和高对比度文本。

风格一的欢迎界面设计

设计风格方案二

方案二的品牌和设计灵感示例

第二种风格的定位是：热情，乐观和友好。我希望它清楚地表明该平台易于使用，有用且有认同感。灵感来自迪士尼和海滩等体验，设计元素包括热带色彩和俏皮插图。

上图展示了灵感情绪板和样式图块元素，然后上图的元素转化为下图的欢迎界面。

设计风格方案三

方案三的品牌和设计灵感示例

对于第三种风格的定位，则是专注于干净，俏皮和古怪。这个风格传达了 “LevelUp对于学生来说是新的东西，它很有趣且易于使用。” 品牌灵感包括任天堂和Aeropostale（美国校园流行的服饰品牌）。使用的设计元素是衬线字体，鲜艳的颜色和俏皮的图案。

您可以在下面的示例欢迎屏幕中看到这些样式元素。

最后选中的方案

很多设计师都有这样的经验，认真设计了几种方案，提案后领导从每个方案里挑出了几个优点，然后希望您把几个优点综合一下变成新的最终方案。

这个方案大体也是如此，在与客户进一步讨论后，确定了LevelUp应该看起来很酷，但仍然需要让学生感觉像是一种学术工具。它不应该太友好或愚蠢，应该有一些有趣的元素混合在一起。

对于最终的风格，我们选择了蓝色，灰色和绿色的配色方案。排版结合了衬线字体和非衬线字体。重叠的圆圈和充满活力的插图为设计增添了活力和趣味性。

一旦设计方向达成一致，后续就是在代码中实现我们的新风格。下图是LevelUp的其他页面设计。

Tatiana Bischak为该项目创作了一系列可爱的插图和图标。

第二个项目：StepUp

与LevelUp一样，StepUp也是行为科学家研究帮助人们的平台。项目背景：BCFG与24 Hour Fitness合作创建了StepUp，24 Hour Fitness是美国最大的健身房之一。StepUp的目标是了解什么将有助于人们改善他们的运动习惯。

StepUp比LevelUp更早发布，在风格研究上探索时间更好。所以，我们采用了移动优先的方法，创建了三个不同版本的网站的移动主页。

设计风格方案一

第一个风格方案的目标是传达信心，高能量和可信赖性。主要的配色方案是海军蓝，灰色和白色，给人一种权威的感觉，以明亮的蓝绿色和海泡绿色为重点，增添能量。它结合了衬线字体和非衬线字体，以强调专业性和友好性。身穿运动装备的一名微笑女性的图片给人1以平易近人和志趣相投的感觉。这个图片还配上俏皮的风格图标，进一步营造出一种能量和乐趣。

设计风格方案二

这种风格在排版和布局方面跟方案一类似，但更多的是“以技术和科学为动力”的氛围。为此，我们结合了明亮的渐变，以及原子符号的图示。

设计风格方案三

第三种设计方案直接被用户采纳。它结合了客户喜爱的第二种选择的“科学背景”的感觉。它不是使用冷色调，而是采用了更友好的黄色和橙色。客户喜欢这种设计。

一旦移动端的主页设计最终被确定，我们为网站设计并构建了几个额外的响应页面，并为该程序设计了一个额外的桌面端网页。