新手如何做UI？这些常见界面套路你需要了解！

用户界面设计是一个复杂的过程。为了构建一个有效的移动UI，设计师必须考虑到定义用户和他们的思维方式等方面，了解UI设计模式，能够使用各种设计工具，并提出符合项目要求的独特美学。那么新手如何做UI？这些常见界面套路你需要了解！

功能和用户体验不是万能的。第一印象94%与设计有关。一个人在一个APP中首先看到的是什么？是界面。所以，设计师需要在不同类型的用户界面中选择一个能确保用户坚持并喜欢浏览应用的界面。

也就是说，当场想出一个好的app设计是很难的。我收集了12种最基本的移动界面类型和一些实用的移动UI建议，可以作为设计App UI的灵感，让它看起来完美无瑕。

EventlyLife应用动画

一、闪屏

闪屏是你启动App时看到的第一个界面。基本上，它们被发明出来是为了隐藏软件在完全准备好之前执行的加载过程，就像电脑游戏的介绍一样。

一个完美的闪屏设计通过令人印象深刻的插画、引人入胜的标题和应用UI的附加组件来吸引用户的兴趣，就像应用在这个场景后面默默地做好准备一样。其他流行的闪屏功能都是为了营销：在推广品牌的同时，为应用内用户体验打招呼，建立氛围。

设计师要考虑到几个细节，才能给人留下深刻的印象：

1、追求简单--一个好的闪屏由应用程序的名称、logo和一些背景图片组成，仅此而已。

2、显示时间不超过3秒。如果需要更多的时间来加载，那么就添加一个进度条。

另外，你也可以跳过闪屏，尤其是当用户应该经常使用你的应用时。专家表示，移动技术的进步使得现代应用可以在一瞬间加载，使得闪屏没有必要。如果你的移动应用不需要强化其品牌形象，你可以展示其框架来代替。

JELL初始屏幕

二、新手引导页

新手引导页是一个界面的集合，目的是展示一个移动应用的主要功能和好处，并引导用户了解其界面。就像闪屏一样，一些设计师质疑新手引导页的必要性，不过，在现实中，这可能会证明新用户直接正确地猜测如何通过一个新的应用程序找到他们的方式，特别是如果他们不熟悉的界面，这很棘手。

虽然应用引导的形式和文字取决于其目的，但所有的新手引导页都有一些基本的做法。Andrew Gazdecki在他的文章中指出了新手引导页的3个主要目的。

1、让用户熟悉应用的主要功能，以及这些功能的用途。

2、给予注册机会。

3、收集这些信息，以提高个性化程度。

使用自定义图形，使应用易于识别，并密切关注文案：使其清晰、简洁、易读。

而且，不言而喻，要向首次使用的用户展示，而不是向回头客展示。

三、主界面

主界面是移动应用呈现其菜单和关键功能的主要组成部分。一个可访问的、功能性强的移动菜单是让我首先想保留一个应用的原因之一。对于设计师来说，必须努力为用户呈现出易懂且实用的主界面设计。

主界面的构成很大程度上取决于应用的目的，可能会有很多不同，因为一个主界面应该呈现最常用的功能。然而，有一些共同的功能。

由于主界面包含了主要的移动应用的选项，它通常会呈现一个应用的关键导航元素，如搜索栏。如果界面具有基本的颜色，有时，甚至是涂鸦，这很好，这取决于应用程序的类型。图标应该很容易看到，并且具有明显的意义。

再次，在某些情况下，你甚至可以抛弃主界面，直接进入正题，也就是一个应用的功能。

四、登录和个人资料界面

大多数现代移动应用都需要注册。人们在注册的时候通常只遇到一次登录界面，或者至少在相当少的情况下，如果你的应用出于安全考虑涉及到重新登录。同样的，正如我们在之前的一篇文章中所讨论的那样，填写表单并不是一个大多数用户通常认为非常吸引人的活动。因此，设计师要通过简洁的登录和个人资料界面设计，让这种体验变得快速流畅，让用户的交互变得更容易，降低应用放弃率。

可以考虑以下建议：

1、去掉所有不必要的干扰因素。

2、将表格字段的数量限制在几个或更好的一键登录。

3、提供清晰的错误信息。

至于资料屏设计，主要是提供强大的用户体验和最大限度的个性化和定制化。这意味着什么？

在创建个人资料UI设计之前，重要的是要进行一些研究和调查，以更好地了解你的受众，并给你的用户提供他们所需要的东西。例如，对一些用户来说，可能重要的是显示与他们最近的活动，显示书签等。

尽量避免不必要的复杂性，让一切都尽可能的清晰。

五、统计界面

许多移动应用根据应用的目的，包含了各种用户活动的统计信息。

做出好的统计界面设计可能是一个比看起来更难的任务，只是由于信息过载问题的存在，根植于数字技术的主导地位，当人们每天都被大量的数据所淹没。

因此，设计师的任务是以最清晰、最可用的方式呈现移动应用统计信息，而不需要任何多余的数据。

通过清晰的布局让统计界面看起来很吸引人，所有的图表和图形都用明显的图标和容易解读的排版整齐排列。

六、日历界面

日历简化了我们的生活，帮助人们管理众多的约定。一个制作精良的日历能让用户记住，并保护他们免受麻烦。这就是为什么日历在许多类型的移动应用程序中如此受欢迎的原因，不仅是事件或待办事项应用程序，而且是健康和健身、教育或社交应用程序。

日历应该有一个方便的界面，视觉风格与移动应用的整体设计相匹配。把重点放在UX和UI上，依靠简单而不复杂的移动应用设计，让用户专注于你应用的主要功能。预计他们会希望与他们在谷歌、iCloud等账户同步。

七、电子商务界面

目录

视觉展示在电商应用中扮演着特别重要的角色。其中最好的展示商品的方式能让人眼前一亮，提高转化率，所以高分辨率的照片是必须的。目录界面作为商店窗口（你甚至可以借鉴一些最好的线下创意在你的应用中使用）。

产品列表展示得越好，用户就会越倾向于购买产品。我说的不仅是令人惊艳的移动UI设计（这是必须的），还包括一个应用的UX。例如，很多成功的电商应用都提供了一个非常赚钱的功能，即根据用户的活动和喜好，以特定的顺序呈现产品。

事实上，由于电商移动应用的不断普及，越来越多的企业主将自己的电商网站转为应用，或者保留两者。

一排产品的数量取决于界面的宽度。重要的是，你的目录界面适合任何界面尺寸。当涉及到......的业务时，没有地方可以容许这类疏忽。

在大多数情况下，目录界面上的产品是以列的形式组织起来的，以便滚动浏览。另外，你也可以将商品水平展示，供用户滑动。设计师的职责是决定选择哪种变体来排列一些作品的优先级，并为用户提供一种方便的方式来操作多个产品。

产品介绍

用户在浏览完目录后，选择某件自己喜欢的商品，然后进入产品页面。这一步，他们对自己想要购买的商品有了一定的心理印象，所以他们对精确清晰的产品信息很感兴趣，以帮助他们做出最后的决定。所以设计师最好记住，这时需要对产品进行详细的说明，并为其提供足够的空间。

产品介绍的中心部分最常见的是产品图片。下面是关于产品规格的附加数据，最好以尺寸、款式或原产国等组别呈现。

八、结账支付界面

结账界面通常包含一个表格，用户在其中填写所有必要的数据，如姓名和信用卡号码。设计师有必要知道如何创建一个坚实的结账界面设计，以便用户在进行移动购物体验的最后一步时感到轻松。根据Baymard的数据，大约有四分之一的美国公民在结账过程中中途放弃了订单，因为他们觉得结账过程太长或令人困惑。

为了防止弃单，使结账过程顺利进行，设计师应该反思以下几个建议：

1、所有可能的支付方式都应该借助图标或其他视觉元素清晰地呈现出来。用户不应该猜测他们是否可以使用某种方法。

2、确保用户意识到他们向你提供的个人数据是安全的。

九、社交界面

社交网络应用是为有共同兴趣的人提供有用的交流服务。根据研究，智能手机用户平均在其设备上主动使用9个应用程序，每天启动这些应用程序的次数高达300次。排名靠前的是即时通讯工具、游戏和在线卡。

在社交应用中，feed是不断更新的新闻和你所关注的用户的活动列表。人们经常在短暂的休息时间快速滚动feed，所以最好的选择是创建一个没有太多过载视觉细节的设计。

这些的一些准则：

1、去除任何多余的内容

2、改善feed的排版。可读性在feeds中是非常重要的

3、不要用太多的UI控件（比如，保存，跟随等）来累赘每个条目。

十、联系人界面

沟通涉及到用户希望在应用内跟踪他们的朋友和熟人，同时让他们的关键联系人数据近在咫尺。优秀的联系人界面设计可以让用户花更少的时间去寻找他们的联系人，而花更多的时间与他们实际联系。

通常情况下，移动应用中的列表是按字母顺序排列的。每一个独立的联系人都配有一张小照片，点击后会引导到详细的信息，包括电子邮件、电话号码等。

十一、播放列表界面

任何一款音乐应用不可或缺的功能当然是创建自定义播放列表的能力。播放列表界面的UI在不同的应用上通常是相似的，这也是理所当然的。用户期望某些功能以某种方式工作。所以最好不要重新发明轮子，而是遵循其他设计师已经制定的准则。

音乐应用的播放列表是一个显示曲目详细数据的列表。每个曲目都可以添加一个代表专辑的小图片。

十二、播放器界面

一个音乐应用需要一个播放器功能，它有一套标准的、容易识别的播放、停止、切换按钮，这些按钮通常呈现在界面的底部。中央部分通常会被专辑图片或某种音乐可视化功能占据。

根据我作为用户的经验，如果播放器界面的设计轻盈透明，图标对比鲜明且大，那就很好。有时设计师会在一些按钮和小部分增加颜色渐变。它让人们关注这些特殊的部分，并给人一种层次感。

什么是好的移动UI设计？除了鲜明的视觉效果外，在我看来，最好的移动应用设计能让用户在应用中立即定位，了解界面，而不会遇到任何困难。用户友好的界面是移动应用受欢迎的基础，是移动应用相关性和回报率的保证。

Statista声称，每天有1434个移动应用通过苹果应用商店发布。因此，移动UI的变化数量是惊人的，设计师很容易迷失在这些繁华之中。

幸运的是，大多数移动应用所使用的移动界面基本类型只有那么几种，每个设计师都可以首先探索如何处理最常见的移动界面，以节省时间和金钱，从而从中获益。

译文地址：追波范儿（公众号）