APP界面设计有哪些基本的类型?_第2页回答

2021-04-08 16:58发布

27条回答
JJN
2楼 · 2021-04-09 10:17

 1、列表


    APP界面布局中,很多时候需要在相关的内容中展示更多的信息,可以选择列表布局到内容中或者导航中。但是列表并不适合用来大量的布局内容,太多的内容就会让用户产生疲倦感,不利用用户阅读,同时也会延长用户在这里的停留时间。

  2、导航标签


    导航标签是用户使用APP最直观了解APP功能入口的区域,常见的就是位于APP底部的导航栏,距离用户手指最近的地方,便于用户快速进行点击操作,因此,在这个区域布局的标签数量不会超过5个,所以这个区域的设计就要放置最重要的一些功能作为用户入口,并且用户切换底部导航都可以显示。

3、网格


    APP界面设计中,网格的形式风格非常受设计师的喜爱,常见的都是从四宫格数量开始,以2X2(3或4)的布局、3X2(3、4)的布局等网格数量。每个网格基本上都是有图标或者文字进行组合,不能填充过长的文字,尽量简短,并集合纯色或图片为背景色的设计风格。这样的网格设计,可以给用户直观的感受,清楚每一个标签所代表的功能是什么。

  4、滑动切换


    APP中滑动切换的设计主要应用于图片、少量Icon等组合而成,针对相同系列的功能或信息切成不同的面板,让用户通过左右滑动屏幕实现浏览的布局方式。这样的方式为用户提供更直观的内容了解,并且不会被其他的页面元素进行干扰。目前常见的就是左右滑动的设计风格。

 5、瀑布流


    APP界面设计中瀑布流可以说是信息展示类APP中最主要的设计风格了,这种的好处是可以为用户无限提供信息内容,用户通过下滑屏幕,可以浏览更多的信息内容。这样的方式对于提升用户阅读时长的帮助很大。在设计的时候,需要严格设置每条信息的高度,并且内容和文字的布局必须要充分的考虑,避免发生布局混乱的情况。


梦到内河_
3楼 · 2021-04-09 11:07

启动页

导航页

登录和个人信息界面

统计界面

目录界面等


一个Ai
4楼 · 2021-04-09 11:17

1、闪屏页


每次打开App时第一眼看到的就是闪屏页(又称启动页),该页面承载了用户对这款App的第一印象,因此对设计的要求是很考究的。闪屏页给用户观看的时间很短,通常只有一秒的时间,因此,如何在这么短的时间内表达出产品的定位就是设计师需要重点考虑的问题。


只有设计出定位明确且吸引人的闪屏页,才能加深用户对产品的认知度。闪屏页分为品牌宣传型、节假关怀型和活动推广型3种类型,不同类型的闪屏页承载的内容信息和表达方式也不一样。


品牌宣传型


App的闪屏页是为了体现产品的品牌而设定的,主要组成部分是“产品名称+产品形象+产品广告语”,如图所示。品牌宣传型的闪屏页是最为直白的闪屏页,设计较为精简,力求凸显品牌特点。

2、引导页


一个好的App引导页能够迅速抓住使用者的眼球,让他们快速了解App的价值和功能,起到很好的引导作用。有一句话是这么说的:“优秀的UI可以造就App的点击率”。


在做引导页之前,我们首先要学会定位,了解App的目标用户群。简单来说,引导页分为功能介绍型、情感带入型和搞笑型3种类型。


功能介绍型(基础型)


功能介绍型引导页是最基础的一种引导页。这种引导页要保证信息展示一针见血,切忌啰唆、表达不清。在这样一个网络化、碎片化的时代,用户停留在引导页上的时间越来越短,浏览时间通常不会超过3秒。


在这宝贵的3秒钟内,设计师需要把简洁明了、通俗易懂的文案和界面呈现给用户,如图所示。请记住这句话:“用户需求就是你的文案,功能介绍型的例子比比皆是。

3、浮层引导页

浮层引导页一般出现在功能操作提示中,是为了能够让用户在使用过程中更好地解决问题而提前设计的用户教育。

这种引导页的浮层通常以手绘表现方式为主,会使用箭头和圆圈来进行设计,并用高亮的颜色来突出信息,同时采用蒙版方式来加强突出功能

4、空白页


空白页分为首次进入型和错误提示型两种。简单来说,空白页就是由于网络问题造成的页面或者是没有内容的页面,例如页面中显示“没有信息”“列表为空”“错误”和“无网络”等内容的页面就属于空白页。


在一般情况下,这种页面都会通过文字信息给用户提示。好的空白页面会花费不少设计时间,因为这种页面不仅是用于提示,还会引导用户进行实质性的操作,从而加强用户对产品的黏性。要注意,空白页的设计一定要简洁明了。


首次进入型


在用户第一次打开应用的时候,App会利用空白页的提示引导用户进行操作,指引用户找到需要的内容,

5、首页


不同功能的App有着不一样的首页模块,选择一种适合产品本身的首页展示方式非常重要。现在,App首页同质化现象越来越严重,页面基本都朝着一个方向去设计。


作为设计师,一定要做到多看多用才能够找到更适合产品本身的展示方式。下面介绍一下首页最常见的4种表现形式,分别是列表型首页、图标型首页、卡片型首页和综合型首页,不同类型的首页布局承载着不同的内涵。


我想吃肉
5楼 · 2021-04-09 11:46

在App中,个人中心页又称为“我的”页面,通常设计在底部菜单栏的最右侧。社交应用中,个人中心有两种角色的划分,一个是自己的主页面,还有一个是他人的中心页面。

自己的个人页面可以自己进行编辑,而他人的页面是供用户关注或进行私信交流的。所以,个人中心页与其他页面在功能上需要有场景区分。

个人中心页主要由头像、个人信息和内容模块组成,通常会采用头像居中对齐的方式进行设计,目的是为了体现当前页面的信息都与本人有关。头像一般会采用圆形,因为这样看起来更为协调,同时画面也会显得更为饱满,如图所示。

还有一种设计是以头像居左对齐为主,通常在信息比较多的情况下会采用这种设计,不仅能节省空间,同时也能让内容在一屏上展示完整,如图所示。

在社交应用中,更多的是要凸显人与人的关系,所以个人中心“关注”和“粉丝”的数量是两个非常重要的信息。设计时应该着重凸显数字,体现个人在群体中的价值,如图所示。

07列表页

在使用软件搜索或点击分类查找后会出现结果页面。结果页面通常会以列表的形式来体现,包括单行列表双行列表两种,展示的内容为“图片+名称+介绍”。另外,还可以用时间轴图库的形式来设计列表页。列表页的设计虽然简单,但却困扰着不少设计师。

总体而言,设计列表页时,需要遵循这些原则:留白空间要张弛有度,且要有亲疏之分;对齐的方式要规整;粗细元素的组合要有节奏感;需要重点突出的元素的颜色要明亮;列表的层次感要分明;在用虚实方式进行结合设计时,要保证实的对象在前,虚的对象在后。

大多数消费类产品的结果页面都会以单行列表的形式进行展示,左边为图,右边为文字信息、评分和价格等,这样的展示方式易于用户阅读,如图所示。图片能够诱导用户进行点击,文字则用来解释商品。


双行列表

双行列表页的表现形式更加节省空间,每个卡片的排布方式为上面是图片下面是文字,可以让页面显得更为饱满,如图所示。


时间轴

为了加强内容的前后时间关系,通常会使用时间轴的方式来设计列表页,这样的表现形式能够更好地凸显每条信息之间的关系,让用户阅读起来更有条理性,如图 所示。时间轴列表页的展示方式为左边是时间轴上各节点,右边是与时间节点对应的内容。


图库列表

图库列表页主要出现在相册或图片编辑类App中,其中相册的图库列表页有文档和图片平铺两种显示方式。为了让分布更为均匀规整,图片通常会采用正方形的形式进行排列,如图所示。

图库列表页


播放页面

播放页面包括音乐播放页视频播放页音频播放页。在音乐类App中,通常会将歌手或CD的大图居中对齐放在中上方,下方摆放可操作性的按钮,如图所示。


在视频播放页中,为了增强用户的易用性,通常会采用两种播放方式:一种是在信息流或详情页面中直接预览;另外一种是全屏预览视频,如图所示。

前者在内容页面中进行播放是为了加强界面的可操作性,例如选集、点评和分享等功能,而全屏播放视频的目的是让用户体验更舒服、更沉浸。


09详情页

详情页是整个App中产生消费的页面,页面中的内容比较丰富。在阅读类App中,详情页主要以图文信息为主,相对来说更加注重文字的可读性,所以会选择比较大的字号来突出标题和内容,如图所示。

在电商类应用中,详情页的主要目的是引导用户去购买产品,所以购买的按钮会一直呈现在界面的顶部,方便用户购买商品,如图所示。


10可输入页面

在社交软件中,注册登录页面是必不可少的,这类页面的设计务必要做到易用简便。注册登录页要考虑唤起键盘的时候文字信息会不会被遮挡,输入框的宽度是否易于操作,文字提示是不是达到最精简程度等。

例如有些输入框显示的提示文字是“请您输入邮箱”,其实只需要提示“邮箱”两个字就足够了,所以注册登录页的设计在注重可操作性的同时一定要注意文字的表达是否言简意赅,如图所示。

在发布信息内容的时候会出现相关的内容填写页面,这种页面很注重类别的分组,例如将图片分为一组,货号和批发价分为一组,将内容有条理地进行分组等。

可以减少用户的填写压力,如图所示。在分类比较多的情况下,选用的背景和分割线的颜色不宜太重,否则会让页面显得琐碎不堪。


aijingda
6楼 · 2021-04-09 11:48

    1、列表

    APP界面布局中,很多时候需要在相关的内容中展示更多的信息,可以选择列表布局到内容中或者导航中。但是列表并不适合用来大量的布局内容,太多的内容就会让用户产生疲倦感,不利用用户阅读,同时也会延长用户在这里的停留时间。

    2、导航标签

    导航标签是用户使用APP最直观了解APP功能入口的区域,常见的就是位于APP底部的导航栏,距离用户手指最近的地方,便于用户快速进行点击操作,因此,在这个区域布局的标签数量不会超过5个,所以这个区域的设计就要放置最重要的一些功能作为用户入口,并且用户切换底部导航都可以显示。

    3、网格

    APP界面设计中,网格的形式风格非常受设计师的喜爱,常见的都是从四宫格数量开始,以2X2(3或4)的布局、3X2(3、4)的布局等网格数量。每个网格基本上都是有图标或者文字进行组合,不能填充过长的文字,尽量简短,并集合纯色或图片为背景色的设计风格。这样的网格设计,可以给用户直观的感受,清楚每一个标签所代表的功能是什么。

    4、滑动切换

    APP中滑动切换的设计主要应用于图片、少量Icon等组合而成,针对相同系列的功能或信息切成不同的面板,让用户通过左右滑动屏幕实现浏览的布局方式。这样的方式为用户提供更直观的内容了解,并且不会被其他的页面元素进行干扰。目前常见的就是左右滑动的设计风格。

    5、瀑布流

    APP界面设计中瀑布流可以说是信息展示类APP中最主要的设计风格了,这种的好处是可以为用户无限提供信息内容,用户通过下滑屏幕,可以浏览更多的信息内容。这样的方式对于提升用户阅读时长的帮助很大。在设计的时候,需要严格设置每条信息的高度,并且内容和文字的布局必须要充分的考虑,避免发生布局混乱的情况。


三岁奶猫
7楼 · 2021-04-09 13:27

1.单色调

2.多色彩

3.信息数据可视化

4.卡片化设计

5.feed流设计

6.圆形与多边形妙用

7.大视野、立体、透视等效果背景图运用


芝加哥
8楼 · 2021-04-09 14:43

类型还是很多的,常见的有几大类,引导、启动、主页、列表页、详情页、搜索页、弹窗页、空页面等

啦啦啦
9楼 · 2021-04-09 15:16

一、聚合类

聚合类多见于APP的首页,用于功能入口的聚合展示。例如京东和得到APP将很多功能聚合在首页,用户可以在首页找到想要功能入口,点击就能进入该功能模块。聚合类相当于分流的作用,用户打开APP,进入首页,再通过首页的各个功能入口进入到其他的页面。

在设计聚合类页面的时候,根据用户的需求和产品功能的优先级进行排列,将优先级高的功能入口放在靠前的位置。 

二、列表类

列表类是APP常见的页面类型,目的是展示同类别的信息,供用户筛选。虽然我们将这类页面命名为列表页,但是其展示形式是多样的,可以是列表的形式、也可以是网格的形式、还可以是卡片的形式。它们的本质都是展示多条信息,供用户选择。 

当设计列表页时,应根据展现信息的不同特点选择恰当的展示形式(列表型、网格型、卡片型),或者干脆提供多种浏览方式来供用户选择,淘宝京东的商品列表页既提供了列表和网格两种展示方式。同时要将用户关心的维度放在列表中展示出来(如标题、图片、销量、价格等),用户会根据这些维度的信息来进行选择,从而决定要不要点击进入下级页面。

三、内容类

打开APP进入京东首页(聚合页),搜索电脑进入搜索结果页(列表页),在列表页看中了苹果,点击进入商品详情页,即内容页。内容页是用来展示具体信息的页面,设计内容页的时候,应注重用户的阅读体验,尽量提供沉浸式的环境,将不必要的信息暂时隐藏。如果涉及到工具栏,可以考虑将工具栏放在页面下方而不是上方。 

四、功能类

第四类可以称为功能类,即为了完成某个功能而存在的页面,常见的有搜索页面;发布状态页面;收货信息的填写页面等等,为了完成某种特定的功能。 


相关问题推荐

  • 回答 195

    你好:关于需要学习几个月能找工作,我的理解和建议如下:1. 首先要确认自身是否有相关的专业积累?因为UI只是设计者手中的工具,它是内在设计思想有效的表达途径。学习软件很容易,但只是掌握工具的运用是远远不够的。2. 如果有相关专业的知识积累,那么工具...

  • 回答 166

    哈哈哈哈  看你是想成多少资产的富婆喽能担起富婆这个称号起码要过百吧UI设计的平均工资是挺高的月入过万不是梦但是在现在这个高消费的社会环境下光靠这个还不够毕竟你一年不吃不喝才12万你可以做UI多赞些钱,然后再做副业...

  • UE和UI是一样的吗2020-11-23 15:33
    回答 98

    UI是英文User Interface的缩写。翻译成中文就是:用户界面,也称人机界面。是指用户和某些系统进行交互方法的集合,这些系统不单单指电脑程序,还包括某种特定的机器,设备,复杂的工具等。UE是英文User Experience的缩写,翻译成中文就是用户体验。是指用户...

  • 回答 8

    不麻烦 首先把这个部分解组 快捷键是 CTRL+SHIFT+G 然后点这个区域 如果点到不需要的元素 就CTRL+3 锁定隐藏,然后再继续点 点到只剩下需要的元素, 把元素弄出来 然后 CTRL+SHIFT+3 显示锁定隐藏,把没用元素删除就可以了。 如果直接点到了需要的元素 同样CT...

  • UI要学多久2020-08-10 19:00
    回答 95
    已采纳

    学会到就业的程度 一般时间为4个月左右,120天时间。 这里说的4个月时间,并不是所有人都是4个月可以学会的, 和学习方法,学习用心程度,学习时间都有关。 如果用错误的学习方法,学4个月是不可能学会的。...

  • 回答 86
    已采纳

    对于UI设计来说,更加看重的是个人的设计能力和理念,以及操作能力,和男女的性别没有太大的关系。

  • 回答 76
    已采纳

    靠谱肯定都靠谱的,就看你自己的兴趣爱好,发展前景都很好,大前端是一种网站搭建,小程序开发等用户端口开发的技术,UI设计就是纯纯的设计师岗位,将设计思维和理念融入到产品运营的每一个交互环节中...

  • 什么叫交互性?2020-04-23 11:40
    回答 6

    其实生活中也有交互性,比如两个人之间的聊天沟通,带有双方的互动都叫做交互。互联网中的交互更多体现在任何互联网设备之间的使用和反馈。

  • 回答 2

    1、初步调查  前期调研对于LOGO设计非常重要。具体周期看项目规模和预算。免费提供logo设计建议和各行业logo设计参考案例。一般情况下,这个时间大约是3天,我们会详细了解企业,对竞争对手的企业logo进行调查分析,这样可以更准确的控制方向,避免logo设计...

  • 回答 1

       永远不要忘记调研  好的设计总是从调研开始。品牌创建需要你预先考虑到所有的细节。  创建品牌、设计LOGO之前需要进行广泛的调研。考虑到在这个过程中你需要对环境和背景中所有的细节都有所掌控,在预算上就一定要留下足够的余地。  此外,你的解...

  • 回答 1

     一、具象表现形式:  具象表现是忠实于客观物象的自然形态,对客观物象采用经过高度概括与提炼的具象图形进行设计的一种表现形式。它具有鲜明的形象特征,是对现实对象的浓缩与精炼、概括与简化,突出和夸张其本质因素。标志设计的形态不可能像绘画的形式...

  • 回答 1

    1.设计应在详尽明了设计对象的使用目的、适用范畴及有关法规等有关情况和深刻领会其功能性要求的前提下进行。2.设计须充分考虑其实现的可行性,针对其应用形式、材料和制作条件采取相应的设计手段。同时还要顾及应用于其它视觉传播方式(如印刷、广告、映像...

  • 回答 1

    Looka Smashinglogo Freelogodesign Hatchful 

  • 回答 1

    1、沟通收集信息  在标志设计开始之前,充分与委托方沟通交流,了解委托方对于标志设计的要求。通过与委托方的沟通,尽可能收集诸如企业文化、企业面向的用户群体、企业类型等;在与委托方的沟通交流中,我们可以得知需要通过设计解决委托方的那些需求。为...

  • 回答 1

      Naldzgraphics这个网站据说是个人创办的网站,上面所有的内容都是站主本人在日常中通过手机整理上传的。不过就算如此,网站还是收集了大量的平面设计素材。  Brandsof theWorld是世界知名LOGO资源库网站。上面收录了海量的世界知名Logo图标,而且还提供EP...

  • 回答 1

    1、沟通收集信息  在标志设计开始之前,充分与委托方沟通交流,了解委托方对于标志设计的要求。通过与委托方的沟通,尽可能收集诸如企业文化、企业面向的用户群体、企业类型等;在与委托方的沟通交流中,我们可以得知需要通过设计解决委托方的那些需求。为...

没有解决我的问题,去提问