写给交互设计初学者？来看看12个设计创作方向和10个Ui基本元素！
UI & UX
Article：2022/06/25
每名初级设计师都需要练习技能才能成为一名优秀的设计师，为此，最好的办法就是进行实践设计。在本文中，将分享12个初级设计师的实践创作方向，以及要成为一名优秀的设计师需要了解的10个Ui基础知识。一起来看看吧~
“通过个人设计实践能够帮助初级设计师们构建自己的作品集，尝试使这些设计尽可能具有吸引力，并带有一些可用性和有效性，会让面试官或客户看到你的潜力很重要。”
“
Creative direction
12个创作方向
01.金融应用
初级设计师可以考虑设计一个财务应用程序界面。通过从各种来源中获取灵感，并从多种设计中挑选出最好的东西，然后创建自己的东西，从财务应用程序开始会很棒。
（Rakib Kowshar的财务应用程序）
02.书店应用
设计书店应用程序界面很酷。将学习的半电子商务应用程序的基础知识运用于实践，对于初级设计师来说简单易行。
（电子书移动应用程序 — Nasim的UX/UI）
03.家具应用
家具应用程序也是一个很棒的应用程序界面，初级设计师都很喜欢它。可以从图片网站获取家具照片，然后对其进行编辑并将它们放入您的应用程序中，并尝试使其看起来不错。
（优雅的家具店移动应用程序设计Pradeep Kumar）
04.任务管理器应用
设计一个应用程序来管理任务和工作是一个很棒的应用程序，可以在互联网上找到很多灵感。设计这个应用程序非常简单，同时非常适合初级设计师。
（Task Andy—— Azie Melasari的移动应用探索）
05.在线课程应用
在线课程应用程序也是热门创作方向，需要在程序中列出一些用户可以购买观看的课程，该应用程序涉及多个屏幕，例如，观看课程，购买课程，观看统计数据等。
（Class In · Keanu Gaurava 的在线学习应用程序）
06.求职应用
求职应用程序是一个简单的应用程序，用户可以在其中搜索特定工作并尝试通过发送应用程序请求来获取它。设计开始之前，必须列出该工作所需的一些关键因素。
（Rakib Kowshar的Job Finder 应用程序）
07.健身应用
健身应用程序可能包括健身应用程序、锻炼应用程序、瑜伽应用程序等，我们可以尝试将它们全部制作并与它们一起练习。
（Fitness App — RD UX/UI的锻炼追踪器）
08.电影票预定应用程序
订票应用程序是方便练习的创作方向，只需拿起最新的电影海报并添加座位界面，并在其中选择可用的座位。可以在投射页面、评论页面、取消页面等上进行更多设计。
（Pourya Zamani的电影票应用程序）
09.旅游应用
旅行应用程序是许多设计师喜欢的应用程序类型，因为它看起来很棒，因为大部分 UI 都是旅行图片，其他部分则取决于个人的想象。
（Imran Hossen的旅行应用程序）
11.电子商务应用
电子商务应用程序在设计领域非常流行，即使是初级设计师也可能已经有了该方向的作品，如果没有，那么现在尝试构建一个。
（Rakib Kowshar的服装电子商务应用程序）
12.健康追踪应用
健身应用程序的兄弟，但更倾向于跟踪健康并帮助其用户建立更好的健康状况。
（Marina Budarina的健康跟踪应用程序）
“
Basic element
10个Ui基本元素
UI/UX设计师的工作是实现想法，分析客户需求，然后设计一个具有漂亮界面的产品。这份工作充满着乐趣，也有越来越多的人选择转行至此。
如果是从软件开发人员过渡，那很好，因为已经非常了解IT术语。但是当你从平面设计或其他领域转行时，很多事情一开始会让你感到惊讶。UI中元素的名称和用途是让您感到困惑的事情之一，即使每天都在应用程序和网站中遇到它们。
下面就为大家介绍是最常见的 UI 元素~
01.底部导航栏
底部导航栏在屏幕底部显示三到五个目的地。每个目的地都由一个图标和一个可选的文本标签表示。当点击底部导航图标时，用户将被带到与该图标关联的顶级导航目的地。
底栏的面积较小，所以这里的内容排列需要慎重考虑。这里的图标设计也需要精心设计，让用户可以轻松识别该选项卡的功能。使用颜色层次结构让用户知道哪些选项卡处于活动状态，哪些选项卡被禁用。在更深的屏幕上，您应该关闭底部栏，因为在这些屏幕上，它不再需要了。
此外，您可以在切换到其他选项卡时添加动画效果，以增加用户体验。
（脸书应用）
02.模态框
模态框显示在当前页面的所有其他内容之上，它目的是通知用户应用程序中的某些内容或等待用户输入信息。
模态框可以作为页面内容的一部分查看，但在不需要时隐藏，模态框的一些实际应用为注册表、全尺寸图像或网站所有者的联系信息等。
（引导模式）
模态框用于吸引注意力，需要用户输入信息，并在不丢失原始页面上下文的情况下向内容显示附加信息（显示更大的照片，播放视频）。
模态框不应该太大或太小，内容应该适合 ，如果 太长并且需要页面滚动，那么您应该考虑创建一个新页面而不是使用模态框。
（脸书个人资料模式）
03.滑块
滑块是一组相当大的图像，可以在图像之间来回滑动，它们通常放置在页面顶部以描述功能。
（光滑的滑块库）
04.分页
分页是将内容划分为一系列页面的过程。这是一种流行且广泛使用的网页分页技术，可将文章或产品列表拆分为易于理解的格式。通常，分页最常见于博客、论坛、新闻、电子商务等网站类型等。
（谷歌分页）
（分页）
05.面包屑
面包屑（Breadcrumb）是一组链接，可帮助用户在网站结构上定位其当前位置。在结构复杂或内容较多的网站中，面包屑导航是一种有效的定位方式，在用户在页面之间移动时更加方便。
·帮助用户浏览网站
·浏览网站级别时的点击路径更短
·将用户的兴趣吸引到站点层次结构中更高元素
·推动强大的用户交互
（Breadcrumbs UI 设计组件）
06.侧边栏
侧边栏被理解为在网站主要内容旁边显示信息的列。在具有大量信息管理功能的网站中，使用侧边栏将帮助用户快速访问他们最快速使用的类别。它并不总是侧面的垂直柱。它可以是内容区域下方或上方的水平矩形、页脚、页眉或主题中可以扩大或缩小的任何位置，以避免影响其他主要元素的显示空间。
（Sagor Shopon的左侧导航菜单设计）
07.加载器
加载器是现代网络中不可或缺的效果，目的是在网络和用户之间带来更好的交互。它可能会在您打开新页面、登录后、上传文件等时出现。使用加载器，为了增加用户体验，您应该应用一个进度条，以便用户更容易了解页面如何已加载。
（Asif Adnan Tuhin的霓虹灯加载器）
08.吐司
吐司（Toast）消息让用户知道他们刚刚执行的任务是成功的。这些消息在用户采取一些行动后会立即给予反馈。当需要频繁确认时使用，例如成功完成任务或事务，或者当用户阅读消息并不重要时。
（吐司消息）
09.单选按钮和复选框
复选框和单选按钮是进行选择的元素。复选框允许用户从固定数量的备选方案中选择项目，而单选按钮允许用户从几个预定义的备选方案列表中准确选择一项。
（单选按钮和复选框不能共存）
10.工具提示
工具提示，也称为信息提示或提示，是一种常见的图形用户界面 (GUI) 元素，当将鼠标悬停在屏幕元素或组件上时，文本框会显示有关该元素的信息，例如按钮功能的描述，缩写代表什么。
（pc和平板电脑中的工具提示）
对于初级设计师来说，积累知识与个人实践项目是现阶段最重要的。除了自己结合系统与碎片的学习之外，更需要实战来产出作品~美国交互设计资讯在7月-9月为设计师们推出了交互设计1.0实战营，一起来搞创作！
（部分图文来自网络，若有侵权，请联系删除。）
加入UI&UX交流社群~
设计资源/书籍资源/知识互动
还有更多神秘福利！
一起创作更好的设计~
往期推荐 | Read More
听说你还在研究产品设计与用户体验设计的区别？这篇文章帮你判断！
设计资讯：Figma vs Sketch！为什么10 家设计机构从 Sketch 转向 Figma？
案例研究：优秀的UI设计是如何诞生出来的？Colony-协作平台的登陆页面设计
文字丨Joy
编辑丨Joy
如果觉得我们做的还不错点个赞和在看吧！：）