移动UI设计:15种基本类型的界面

移动应用程序随着用户的需求而发展,也提供了很多新的功能,然而,许多应用程序都有一些常见界面,本文将重点介绍这些界面。   智能手机几乎侵入了我们生活中 […]

2018年10月15日

移动应用程序随着用户的需求而发展,也提供了很多新的功能,然而,许多应用程序都有一些常见界面,本文将重点介绍这些界面。

 

智能手机几乎侵入了我们生活中的每一项活动。不同的应用程序可以帮助我们让生活变得更轻松。而设计师的工作是设计出满足用户需求的界面,使人用起来愉快,令人满意。为了设计出有益的用户界面,设计人员需要深入了解移动应用程序的特性,了解它们的组成部分和功能。如今,对于任何应用来说,很难有一套标准适用于任何应用必有的界面。因为移动行业正在快速发展,应用也是如此。我们的文章介绍了最常见和最受欢迎的应用界面类型,并展示了它们所需的设计功能。

常见界面

启动画面

第一印象是影响用户对移动应用程序看法的关键点之一。当用户体验与应用程序的交互一开始就很愉快时,它就会有可能在用户中更受欢迎。这就是为什么启动画面需要像任何程序的其他界面一样受到关注。

启动画面是用户看到启动移动应用程序后的第一个图像。它们通常是简约的,而且展示出产品的名称,logo或产品的标语。为了确保启动画面在不同设备上看起来很好,设计人员通常会将元素集中在屏幕中间。建议启动画面的显示不超过4-8秒,否则用户可能会不开心。此外,显示加载进度可能会很好,这样不耐烦的用户就可以知道应用程序何时启动。

Jewellery E-Commerce App

引导页

引导页(Onboarding tutorial)是一组界面,展示了应用程序可能为用户带来的导航系统,功能和优势。对于首次启动应用程序的用户来说,似乎可以帮助他们在不熟悉的功能和控件中进行定位,并了解应用程序是否对他们有用。

应用引导页的结构和内容对于每个特定程序都是高度个性化的。但是,引导页的设计存在一些共同倾向。首先,许多教程使用自定义插图,以有吸引力且易于理解的方式呈现特定功能或优点。此外,设计师经常使用吉祥物,这是一个模仿与用户进行真实交流并带有情感纽带的角色。强大的副本对于引导页也很重要。 它应该简短,有用且易读。

Underwater World Encyclopedia — section tutorial

主页和菜单界面

主屏幕是任何应用程序的重要组成部分。在很多移动应用程序中,它是大多数用户与应用程序交互的主要界面。主屏幕的设计取决于产品的类型,目的是一些不同类型的关键元素。首先,主屏幕通常包括搜索字段或按钮,以便用户可以轻松搜索他们需要的内容。此外,由于主屏幕是用户使用的起点,因此它通常包含提供对各种内容部分的访问的导航元素。

Homey App

为了使用户交互更容易,移动应用包含一个菜单,其中有用户可以在单击时移动到特定方向的列表。在移动应用程序中呈现菜单有两种变化方式:它可以是主界面的一部分也可以是单独的一个界面。建议将菜单中的选项数保持在七个以下,仅显示重要部分。如果应用程序需要更多,则创建子类别可能是个好主意。

Slide Menu Concept

登录和个人信息界面

今天,许多应用程序为用户创建个人帐户,因此每个设计师都需要知道如何使用登录和个人信息界面。登录界面应该简洁明了,以便用户可以轻松访问应用程序。通常有两个地方,用户可以在其中输入名称和密码以及确认按钮。对于第一次使用该应用程序的用户,需要始终有注册选项。

个人信息使移动应用程序内的交互更加个性化,并可以有效地操作数据。此外,个人帐户是任何社交网络应用程序的关键部分,其涉及用户进入网络的虚拟社区并且能够与其他人共享个人信息。设计师的主要任务是通过智能UX最大限度地提高便利性。根据Interaction Design Foundation的说法,设计者应该考虑的是,个人资料页应该清晰可见。必须限制信息量,否则个人资料页可能看起来太复杂。更重要的是,确保导航系统清晰是至关重要的。这样,用户就不必花费太多精力来打开应用程序。最后,个人资料页的设计应面向使用该应用的目标群体。如果您希望您的应用满足用户需求,则必须进行用户调查。

Dating App

统计界面

各种应用程序都包含用户活动的统计信息。它提供的数据越多,创建统计界面的设计就越困难。设计人员需要确保能够看到的界面必须清晰并且包括所有可用的关键信息。图形曲线,比例和原始图标可以使统计界面在移动应用程序上看起来流畅和干净。此外,统计界面需要不同的排版,以便用户可以轻松读取数据。

NGIN App

日历

活动应用,待办事项列表应用以及许多其他应用都需要为用户提供日历。根据应用程序的类型,日历可以完成某些功能,例如提醒或计划。视觉风格应该适合移动应用程序的主题和目的。

Bright Vibe Calendar

电商界面

目录界面

任何电子商务项目的主要目标是销售产品。视觉上的展示对用户的决策有很大影响。而目录则是公司出售商品的清单。设计师的工作是设计目录,吸引用户注意并鼓励他们购买产品。移动应用程序中的产品列表可以类似于许多电子商务网站,其中项目放置在这些列表中,可以通过垂直滚动条来查看。一行中的产品数量根据屏幕宽度确定。

在滚动的目录中,商品的另一种组成方法是水平滚动。为了使导航更直观,水平行中的最后一项不应显示在完整视图中,以便让用户看到这是滚动的方向。此外,产品的照片或插图质量应该很高,以便用户可以清楚地看到他们将要购买的东西。 目录界面应包括一个号召性用语按钮,用户可以通过该按钮将商品添加到购物车。这样,用户就可以直接从目录屏幕上获取产品信息,而无需转到此特定位置的页面。

Cafe Coupon App

商品信息界面

此界面适用于想知道他们究竟购买什么的人。 商品信息界面显示有关商品的关键信息,帮助用户决定是否需要产品。设计师专注于屏幕中心的照片。描述数据通常放在下面。设计人员可以将数据划分为大小,材料或其他的分类,以便用户可以轻松找到所需的信息。

Jewellery E-Commerce App

结算界面

现在,很多购买都是通过智能手机完成的,所以公司试图让移动购物流程变得前所未有的方便。结帐流程是用户在购买产品之前的最后一步。设计师的任务是让人们在采取这一步骤时感到舒适。 结算界面的第一个和其中一个项基本部分是买家填写特定个人信息(如信用卡的名称和编号)的表格。而所需信息的类型取决于用户进行购买的资源。此外,对于用户来说,让用户了解他们的个人信息安全很重要,因此设计师必须通过视觉元素向用户保证他们的信息是安全的。它可以特别标注,也可以是知名品牌的一些图标,如果有的话,可以给予他们的批准,甚至可能是一些证书标志。

Cinema App

社交界面

即时资讯

人们经常使用各种社交网络应用程序进行通信,并关注它们周围的新闻和更新。Feed是一个有新闻和用户关注的。实践表明,移动用户更喜欢通过Feed快速扫描,因此他们需要一个简单明了的设计,不会因视觉上的细节而看的太多。新闻可以通过滚动的方式逐一呈现。 为了使导航更直观,应该显示下一个新闻的一部分。

Timeline App

联系人

通讯录已经发展了很长时间。 从纸质笔记到不同的数字变体,它在视觉上一直在变化,但但是目的只有一个:保存关于朋友和其他亲密人物的信息。通讯录界面向用户显示名称按字母顺序排序的联系人数据列表。每个联系人都可以点击进去,有详细的数据,其中包括电话号码,电子邮件,有时还包括Skype,Messenger等联系人。此外,联系信息有一张小照片,使搜索过程更容易。

Contact List Concept

音乐界面

播放列表

音乐爱好者喜欢为每个场合创建自己的播放列表。 显然,每个音乐应用程序都有义务为其用户提供此类功能。播放列表屏幕在不同的应用程序上看起来类似:他是一个显示歌曲,歌手或乐队的名称,以及音轨的长度的列表。此外,设计师可以添加此曲目所属的专辑的小图像。 如果歌曲没有图像,那么仍然应该有一个图标,例如音符。

Music App

播放器

人们可以控制他们听的内容,通过怎样的方式收听。 这个功能可以使用易于看到的按钮切换,停止和开始播放。播放器通常位于屏幕底部的中央。 屏幕的主要部分通常由图像连接。此外,有时候,许多设计师将音乐可视化应用作为屏幕的中心部分,而不是图片。Visualizer是一个展示想象力和创造力的好机会,这对设计师来说总是很有启发性。

ECHO app

如今,出现了大量的移动应用程序,因此它们为用户带来的新要求带来了新型界面。 设计师应该准备好接受这一挑战并始终遵循创新,得到启发!


文章来自:https://tubikstudio.com/mobile-ui-design-15-basic-types-of-screens/
作者:Alina Arhipova
编辑:闫麒麟
翻译:孙仪敏

发表评论

电子邮件地址不会被公开。 必填项已用*标注