UI设计不仅仅是创建精美的图像。

挑战

我给自己一个很好的机会来培养我的视觉设计技能，并通过创建一个移动应用程序用户界面库来学习设计过程。 UI库（也称为视觉样式或主题）是自定义图形界面元素包，应用于特定应用程序或代购源码网站以为用户创建优雅体验。

我的设计过程：

需要注意的一点是，该项目侧重于UI /视觉设计，而非用户体验设计;例如，用户研究，可比评论，用户旅行映射，信息架构等。

应用概念

问题定义

通过我的新应用程序，我可以解决他们在寻找课程和研讨会时遇到的困难。对于像我这样想要学习新知识的人来说，为他们找到合适的课程仍然非常困难。

价值主张

一般而言，价值主张以陈述的形式出现，通常是向公众呈现的第一句话。其主要目的是传达客户对产品的期望。

这类似于电梯销售情景——当您将应用程序概念细化为令人难忘，引人注目且可重复的短语时，您可以在“用户体验策略”一书中体验JamieLevy。价值主张公式。

这是一个为客户提供服务的平台。

介绍BetterMe的课程和研讨会——“ Yelp。 ”的

这是一款应用程序，可以帮助多伦多合作伙伴快速轻松地找到课程和研讨会。

用户角色

线框

在我更好地了解用户目标和行为后，我列出了应用程序的一些关键功能，以创建低保真线框。

课程列表（按人气，附近，即将推出，推荐给你）

搜索（按类别，类型，价格范围，位置，评级等）

即时通讯（查询）

用户个人资料（游戏化，学习列表）

以上是草图

部分完成的线框

视觉语言

该语言由不同类型的单词组成，但可以组合以创建消息。视觉语言与任何其他语言相同，可分为风格，距离，响应和趋势。

我采访了一些用户并了解他们的需求，并发现该应用程序提供了情感指导以进一步定义视觉语言。

面试问题：

你为什么要用这个应用程序？

什么样的情绪会使这些需求得到满足？

你如何通过视觉语言传达这种情感？

设计初始工作表

情绪板

作为设计师，我们的目标是优化和加速流程。 Atomic Design的想法是允许用户体验设计师，UI设计人员和前端开发人员并行工作，而不是以瀑布式方式工作。

我们如何设计一些在早期阶段呈现给用户的视觉效果？

情绪板是设计过程中的可视交付物之一。这是一个拼贴画，通常由图像，文本和对象组成。除了描述页面的实际布局外，还有我们通过产品获得的感觉。

我创建了两个独特的情绪板，为不同的用户群体呈现一种感觉。一个是安静，干净，简洁，适合学习和研究目的;然而，第二个是激动人心，年轻，快节奏，传达激情和积极情绪。

情感板（左– V1;右– V2）

然而，对于许多人来说，情绪板可能过于抽象，因为难以设计情绪板如何表现为有形的视觉设计元素。

瓷砖风格设计

图块样式是视觉设计元素的有形集合，例如调色板，字体或按钮样式，有助于通过特定的视觉语言与参与者进行交流。它填补了情绪板和线框之间的空白，并且在早期获得设计反馈非常有用。

瓷砖风格有助于人们想象如何将元素融合在一起。我采访了15位朋友并要求他们选择他们喜欢的风格。结果，2/3的人喜欢第一种视觉风格。以下是他们的答案：

“我喜欢第一个，因为它具有视觉吸引力，我将花更多的时间来发现和研究这个应用程序。 ”的

“第一种简洁，我喜欢的图标比图片更好。 ”的

“第二种风格更令人兴奋，但对于课程列表应用来说有点太多了。 ”的

用户界面和原型

“如果一张图片价值1000字，那么原型将值1000次会议。 ”的—— IDEO的专家说。

在决定使用视觉样式后，我将其应用于保真线框并进行了一些设计迭代。然后，我创建了一个具有以下高保真用户界面的交互式InVision原型：

UI——主页

风格指南

风格指南是建立和加强风格以改善沟通的一套标准。它统一了设计标准，对团队合作产生了重大影响。

深思熟虑

“风格来来去去。好的设计是一种语言，而不是一种风格。 ”的—— MassimoVignelli

该项目是由红色学院的UI设计基金会提供的兼职项目。我花了两个周末试验和探索各种UI设计方法来制作我的应用程序——从概念到实际原型更好。

作者：林黛蕾

地址：https://blog.prototypr.io/ui-design-more-than-just-creating-pretty-images-cc1f46a7c81b

本文由@Mockplus团队翻译为原始版本，未经许可不得复制。

该地图来自PEXELS，基于CC0协议

« 知道X X Lihua：原来的公益营销可以发挥如此有趣的 | 代购源码网站优化过程中如何保持代购源码网站的健康发展？ »