火星网校
一个项目从灵感风格稿到实际UI设计案例过程分享
发布时间：2023-12-28 14:36:19 浏览量：175次
今天为大家介绍两个设计项目的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以平易近人和志趣相投的感觉。这个图片还配上俏皮的风格图标，进一步营造出一种能量和乐趣。
设计风格方案二
这种风格在排版和布局方面跟方案一类似，但更多的是“以技术和科学为动力”的氛围。为此，我们结合了明亮的渐变，以及原子符号的图示。
设计风格方案三
第三种设计方案直接被用户采纳。它结合了客户喜爱的第二种选择的“科学背景”的感觉。它不是使用冷色调，而是采用了更友好的黄色和橙色。客户喜欢这种设计。
一旦移动端的主页设计最终被确定，我们为网站设计并构建了几个额外的响应页面，并为该程序设计了一个额外的桌面端网页。
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
2. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
9. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
10. Photoshop操作教程：自制电子印章 | PS技巧详解
想要学会制作电子公章吗？跟随本教程，详细介绍Photoshop操作步骤，让您轻松掌握PS技巧，制作精美电子印章。
最新文章
