移动UI设计:基本类型屏幕

原文:Mobile UI Design: Basic Types of Screens.

https://uxplanet.org/mobile-ui-design-basic-types-of-screens-aa1857e31339?source=userActivityShare-3b1b3ee937bb-1500686251&from=groupmessage&isappinstalled=0


这里写图片描述

智能手机已经入侵我们生活的每项活动。不同的应用协助我们,让生活更容易。一个设计者的工作是创造满足用户需求并且产生良好体验的界面。为了创建有效的UI,设计者需要去深入了解移动应用的特性,了解他们的构成和功能。现在,由于移动行业和应用程序的迅速发展,很难分辨应用所需的屏幕设置标准。 这篇文章我们介绍最常见和流行的移动屏幕类型,并展示他们需要设计的功能。

这里写图片描述



常用屏幕

  • 闪屏(Splash screen)

    第一印象是用户对移动应用程序的意见的关键影响因素之一。当用户体验从与应用程序开始互动就很愉快的时候,应用有很高机会在用户中流行。这就是闪屏需要被给予比其他移动应用屏幕更多关注的原因。

    闪屏是用户启动一个移动应用看到的第一张图像,他们通常简约,呈现一个名字、logo、或者产品的标语。为了确保闪屏在不同的设备上都看起来不错,设计者通常把元素聚焦在屏幕中间。闪屏被推荐展示不超过4-8秒,否则用户可能气恼。此外,显示加载进度可能会好些,以便没有耐心的用户可以知道应用程序何时启动。

    这里写图片描述

    Jewellery E-Commerce App

  • 入门教程页面

    入门教程是用来展示移动应用、他的导航系统、特点和应用给可能用户带来的好处。他们展示给启动应用的用户,为了第一时间帮助他们在不熟悉的功能和控件中找到方向,以及了解应用程序是否对他们有用。

    程序教程的结构和内容对于每个特定项目是高度个性化的。然而,入门界面设计有一些共同趋势。首先,许多教程使用自定义插图,以富有吸引力、轻松的方式呈现特定的功能或优点。此外,设计师经常应用吉祥物,这是一个模仿与用户的真实沟通流程并设置情感纽带的角色。强大的复制性对于入门也是重要的。它应该是简短,有用和可读性。

    这里写图片描述

    derwater World Encyclopedia—section tutorial

  • 主页和菜单页面

    主页是所有应用必不可少的一部分。在一个移动应用中,用户和主页的大部分选项进行交互,主页是主要页面。主页的设计取决于产品的类型和目的。但对于不同种类产品仍然有些关键通用元素。首先,主页通常包括搜索区域或搜索按钮,以便用户能很容易搜索到他们想要的内容。此外,由于主页是用户旅程开始的起点,它通常包括提供去不同内容区块的导航元素。

    这里写图片描述

    Homey App

    为了让用户更容易交互, 一个移动应用程序配备一个菜单,其中包含用户可以在一次点击之内移动的可能路线列表。在移动应用上菜单呈现有俩种变形:他可能是主页的一部分或是单独一屏。建议保持菜单中选项的数量在7以下,仅仅展示重要的部分。如果APP需要更多,创建子菜单可能是个好主意。

    这里写图片描述

    Slide Menu Concept

  • 登录和配置文件页面

    现在许多应用允许用户创建自己的私人账户,因此每个设计者需要知道登录和文件配置页面怎样工作。登录页面应当简约清晰,以便用户可以轻松访问。通常有俩个区域,用户能够输入他们的名字和密码,以及确认按钮。对于第一次使用程序的人,一定要有登录的选项。

    文件配置使用户和移动应用的交互更加私人化,并允许有效的操作数据。此外,私人账户是社交网络应用的重要一部分。这使用户进入网络的虚拟社区,并且能够与其他人共享个人信息。对于设计者的主要任务是通过良好的UX增加便利。根据交互设计基础,设计师应该考虑的第一点是页面应该在使用中明确。必须限制信息的数量,否则文件页面可能看起来太复杂。而且,确保导航系统直观是至关重要的。这样用户不必花费太多努力苦苦思索。最后,文件页面设计应当以应用的目标用户为导向。如果你希望你的应用满足用户的需求,用户搜索是必备的。

    这里写图片描述

    Dating App

  • 统计页面(Stats screen)

    各种应用程序包含用户活动的统计信息。它提供的数据越多,创建统计页面的移动设计就越困难。设计者需要确保能够看见所有的关键信息的同时页面清晰、可用。图形曲线,比例尺和原始图标可以使统计信息屏幕在流动应用程序上看起来光滑清洁。 此外,统计屏幕需要不同的排版,以便用户可以轻松地读取数据。

    这里写图片描述

    NGIN App

  • 日历

    记事应用,TO-DO清单应用和许多其他应用提供给用户私人日历。视应用的风格,日历完成像提醒、制定日程这样的某些特定功能。视觉风格应当适合移动应用的情绪和目标。

    【图】

    Bright Vibe Calendar



电子商务页面

  • 目录页面

    电子商务主要目标就是售卖产品。可视化表现对用户的决定有很大影响。目录是公司提供打折产品的清单。设计师的工作是要吸引用户的注意力,鼓励他们购买产品。产品清单在移动应用上可能和很多电子商务网站相似,产品被按照系列摆放并且能通过垂直滚动查看。根据页面的宽度,产品在一排上的数量是固定的。

    这里写图片描述

    Resto App

    移动目录中另一种产品组织方法是使用具有水平滚动的行。要使导航直观,水平行中的最后一个项目不应显示在完整视图中,以便用户看到这是滚动的方向。而且,产品的照片或者矢量图应该是高清的,以便用户能清楚他们要买的东西。目录页面应当包括一个召唤行为按钮,由此用户能把产品放到购物车。这样用户能够从目录页面挑选产品而不必去转到特定的位置。

    这里写图片描述

    Cafe Coupon App

  • 产品界面

    这个屏幕适用于喜欢知道他们购买什么的人们。产品卡显示产品的关键信息,帮助用户决定他们是否需要产品。设计者关注放在屏幕中心的产品照片。描述数据通常放在下面。设计师能把数据分组,例如尺寸、材料或其他的,以便用户能很容易找到他们需要的信息。

    这里写图片描述

    Jewellery E-Commerce App

  • 付款页面

    现在许多购买是通过智能手机进行的,因此公司尝试变让移动购物得前所未有的的方便。付款页面是用户购买产品前的一个重要步骤。设计师的任务是让用户在这一环节感觉舒服。首先付款页面必不可少的部分是购买者填写具体数据的表格,例如名字和信用卡号码。要求的信息类型取决于用户购买的物品。除此之外,人们知道他们的数据安全是很重要的。因此设计师必须一再通过视觉元素向用户保证他们的信息是安全的。它可以是一个副本中的标注以及一些知名品牌的图标给予他们支持,或者如果有的话也可以是一些认证标志。

    这里写图片描述

    Cinema App



社交页面

  • Feed

    人们经常使用不同的社交网络用来交流并且查看周围更新的消息。feed是一个不断变化的新闻和用户关注的其他数据的列表。实践表明移动用户倾向于通过feed快速浏览,因此他们需要简单明了的不会被视觉信息迷惑的设计。消息能够通过滚动一一呈现。为了让导航更加清晰,下一条消息应该部分展示。

    这里写图片描述

    Timeline App

  • 联系界面

    联系列表已经发展很长一段时间。从纸质笔记到不同的数字变体,它在视觉上一直在改变只有一个目的:储存朋友和其他亲近的人的关键数据。移动联系界面展示用户一个以首字母顺序储存联系数据的列表。每个联系人都应该可点击,并提供详细的数据,其中包括电话号码,电子邮件,有时Skype,Messenger等上的联系人。此外,联系信息还应附有一张小型照片,使搜索过程更容易。

    这里写图片描述

    Contact List Concept



音乐页面

  • 音乐列表

    音乐爱好者喜欢为每个场合创建他们自己的音乐列表。显然,每个音乐应 用都有义务向用户提供这样的功能。音乐列表页面在不同的应用上看起来相似:是一个显示歌曲名字、歌手或乐队、以及音轨长度的列表。此外,设计师可以增加一个小图片在这个所属的相册上。如果一首歌曲没有图像,那么仍然有图标,例如,一个音乐符号。

    这里写图片描述

    music player

  • 播放器

    人们能通过播放器控制他们听什么和怎样听。通过容易识别的标准按钮,可以实现转换、停止和开始的功能。 这个设置通常放在屏幕地步的中间。屏幕的主要部分是被图片占据。当然,有时不是一个图片,很多设计师让音乐可视化在屏幕的中心。可视化是一个激发想象力和创造力的好机会,总是让设计师欢欣鼓舞。

    这里写图片描述

    ECHO app

现在,出现许多移动应用的下载,因此他们为用户的新需求带来新类型屏幕。设计师应当准备迎接挑战,迎接创新!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值