首页 > 优化 > 关键词 > UI设计最新资讯 > 正文

研究了100多个App后,发现了顶部栏UI设计的模式和规则!

2020-10-12 08:57 · 稿源:Clip设计夹公众号

声明:本文来自于微信公众号 Clip设计夹(ID:ClipppDesign),作者:Clippp,授权站长之家转载发布。

为了试图分析App顶部栏设计的某些模式和规则,Yuyan研究了 100 多个应用程序。通过本文带大家一起了解App顶部栏的组成、变化,以及如何设计顶部栏的交互。

01

顶部栏的常见样式

顶部栏是什么样子,它由什么组成?

 常规顶部栏 

通常,顶部栏提供有关此页面总体的信息,以及用户可能对该页面进行的潜在操作。常见的顶部栏如下所示:

顶部栏中常见的组件包括:标题、容器、操作项、导航图标等,接下来为大家逐一介绍各个组件的使用。

顶部标题通常与底部导航一起使用,共同解释页面的信息。

如果一个页面中底部导航只有图标没有文字解释,用户有可能不了解图标的意思,那么解释页面信息的重任就落在了顶部栏的标题上。

大多数情况下,标题位于顶部栏的中间,有时也会在左上角有一个很大的标题作为导航(IOS应用中)。除了解释页面的目的,大标题还可以用于品牌推广。

标题也可以解释用户在这个页面上执行的操作。例如,当用户想修改个人资料时,标题会显示“edit profile”,用来解释操作。

有时,在顶部栏主标题的下方会有补充文本,这样方便为用户提供更多的信息。

容器的趋势越来越不明显。容器通常是灰色或者不饱和的颜色,有时容器也会使用品牌主题色,起到宣传和推广品牌的作用。

操作项通常以图标和文本按钮的形式出现在顶栏上 ,当需要时可以在顶栏上显示0- 4 个图标或文本按钮。

在不同的页面中操作项可能代表不同的含义,但一些常见的图标/操作遵循着一定的规则:

1、返回:当用户进入第二/第三层级页面时,“返回”通常出现在左上角。单击“返回”图标可引导用户回到原始页面。

2、关闭或取消的位置不固定,可以在左侧也可以在右侧,具体取决于是否有其他操作。

这里讨论一个常见的问题,顶部栏中“返回”和“关闭”分别应该在什么情况下使用:

使用“返回”:当用户在一个漫长的探索过程中需要不止一步的操作,或者在该页面上没有一个简短而明确的目的时。

使用“关闭”:表示一个完整的单页操作,它有明确的起点和终点,在页面上执行特定的操作实现特定的目的。

3、个人资料或帐户有时会出现在顶部栏上,以方便用户编辑个人信息,设置或切换帐户。

4、添加或搜索可帮助用户浏览更多内容或者扩展他们感兴趣的区域,通常出现在右上角作为易触摸的目标。

有时会把用户最频繁使用的操作固定在顶部栏(其是右上角),以便随时成为易触摸的目标。一个常见的例子就是网易云音乐,当前歌曲的图标始终固定在右上角,无论在哪个页面中用户都可以随时进入。

需要注意的一点是,为了避免引起不必要的关注,顶部栏上的图标/文本按钮通常是线性图标而不是填充图标,并且是非饱和颜色。除非它们确实想吸引用户的注意,或者为了提示用户进行操作。

 搜索顶部栏 

使用App时我们会发现,有的页面顶部栏中没有标题,而是增加了一个搜索框(淘宝首页)。

根据特定的需要,可以将搜索用在不同页面的顶栏上,因为它在用户浏览内容时为用户提供了更多的价值。

 什么时候放弃使用顶部栏?

当顶部有很多内容时,一些App会让顶部栏变得非常简单甚至完全舍弃。

在Robinhood顶部显示最重要的用户信息——每日投资增长,右上角只有一个提示文本按钮,用来邀请好友。

放弃使用顶部栏的常见案例是个人资料页面。这样做的目的是自我暗示,这个页面自己可以掌控,个人信息在顶部占据了很大的空间。

02

顶部栏的交互模式

一个页面中可以有很多交互发生,有时顶部栏需要通过改变样式或内容来反映交互动作。

 反映滑动位置 

下滑出现顶部栏:当顶部栏有许多重要信息但又占用大量空间的情况下,顶栏的内容可能会根据滚动位置而变化。当用户下拉页面以获取更多内容时顶部栏会出现。

下滑隐藏上拉出现:另一种形式是在Google搜索中,用户向下滑动顶部搜索框会隐藏(Google猜测用户希望集中精力浏览内容),但是只要用户向上滑动,中止浏览过程,顶栏搜索框又会出现。

不管交互形式如何,这类顶部栏能在用户需要时快速显示:

  1. 用户可以进行搜索功能或常见操作;

  2. 标题/重要信息作为参考,提醒用户在哪个页面。

下滑隐藏顶部栏:对于那些不会影响用户需求和操作求的顶部栏,通常会随着页面的向下滑动而隐藏。

星巴克顶部有一个令人愉快的问候语,当用户向下滑动并尝试选择要喝哪种咖啡时,它会随着页面滑动而消失。

Airbnb会在顶部展示房屋图片,以便给用户留下深刻印象,但是当用户向下滑动时,顶部的图片也会跟着滑动。

 反映当前页面的变化 

有时,顶部栏的信息会根据内容的变化而实时发生改变。

最常见的案例是收到消息时的反馈:在微信中,顶部标题会显示用户收到信息数量的变化;Instagram通过顶部小红点的变化来展示收到的消息。

交互式顶部栏

作为页面中必不可少的一部分,交互式顶栏减轻了页面中其它元素的负担。除了常见的图标或文本按钮(添加、取消、后退)的变化,在顶部栏中还会发生哪些有趣的交互?

 互动标题 

有的产品服务非常依赖于用户的偏好、位置,例如常见的外卖或打车软件。

在这种情况下,App通常依靠用户的初始输入来决定显示的内容,用户也可以直接在顶栏标题上编辑信息。

 交互式图标/文本按钮 

交互式图标/文本按钮意味着用户可以在顶部栏上执行某些操作,而不必离开此页面。

在robinhood中用户可以在不用切换页面的情况下,直接选择购买股票要用的计算方法,或者把页面上的股票添加到自己的收藏中。

 顶部导航 

有的App希望一个页面中能显示多个平行的内容,所以会在顶部栏上设置多个选项,实现更方便的导航。

常见的顶部导航包括分段控件和标签导航:

分段控件导航选项一般不支持左右滑动,选项较少,;标签导航选项的设计更多样,支持左右滑动切换。

总结

这样的研究过程可能会花费很多的时间和精力,却能让我们真正受益:从一个更全面的角度来看待如何在不同的页面、案例和App中设计和解释一个简单的UI组件。

文章很长,感谢看到最后~希望文章能够让你有所收获❤️

—  The End  —

原文:uxdesign.cc/what-do-you-need-to-know-about-a-app-top-bar-748c575f6ae3

作者:Yuyan Duan

翻译:Clippp

注:文章翻译已获得作者的正式授权

  • 相关推荐
  • 大家在看
  • 体验好的电商APP长啥样?这里总结了7种绝佳的UI设计原则

    最近,国外设计师Jennifer Jhang对一些顶级的电子商务APP如耐克、苹果、三星、Ebay、Banggood以及Best Buy等产品进行了研究,并总结了 7 种主要的用户界面模式。

  • 抓住关键点,提升App搜索设计的体验!

    搜索过程中需要展示什么?如何帮助用户尽快找到他们想要的?搜索的体验如何与其他体验相联系?这是很多设计师思维模糊的地方。

  • 小米金融App正式更名为天星金融App

    今日,雷军宣布,小米金融业务“小米数科”品牌升级为“天星数科”,小米金融App 正式更名为天星金融App。

  • iOS14轻App在哪里 轻app使用方法介绍

    苹果iOS14系统加入了一个轻App功能(App Clips),这被不少用户认为是有点像小程序的功能,可以在不下载应用程序的同时,使用到该软件的核心功能,具体轻App要怎么使用呢,我们来一起看下轻App具体使用方法。

  • iOS14小组件app推荐 有哪些软件APP的小组件比较好用

    iOS14小组件成为了最受欢迎的一个功能,可以让很多应用的核心功能都直接呈现在桌面上,那么有哪些外观好看值得我们下载使用的APP软件呢,我们来一起看下吧。

  • iOS14App资源库可以编辑吗 app资源库怎么隐藏

    iOS14系统加入了很多个全新功能,比如小组件、画中画、双击背部截图等,都获得了不错的用户反馈,但是有一个app资源库功能却没有获得很多用户欢迎,不少用户想要删除app资源库或者隐藏,具体要怎么做呢,我们来看下app资源库能否被编辑隐藏。

  • iOS14小组件app推荐 实用好看的小组件app汇总

    iOS14新加入的小组件功能成为了新版本系统里最受欢迎的一个功能,这个功能可以让用户在iPhone桌面上自定义很多新的界面和功能,方便用户快速查看和启动一些功能,那么有哪些比较实用好看的小组件APP呢,我们来一起给大家推荐一些。

  • iOS14怎么取消app资源库页面 app资源库页面怎么关闭

    苹果iOS14加入了App资源库的新功能,这个功能就是将所有手机下载安装的app全部都显示在一个页面中,可以让用户找到想要的app软件,但很多用户表示不喜欢这个app资源库,那么如何将app资源库页面删除呢,我们来一起看下吧。

  • 首批18款App获颁安全认证 包括云闪付、苏宁易购等App

    【首批18款App获颁安全认证】据新华网消息, 9 月 20 日,云闪付、苏宁易购、中国移动、百度地图等 10 家企业的 18 款App(移动互联网应用程序)在京获颁安全认证证书,标志着我国App安全认证工作正式开展。

  • 蝉大师独家上线:一键知晓iOS14对我的App的优化影响

    iOS14 正式版上线后,许多用户都沉迷于各种屏幕小组件,但对于ASOer来说,更关注的iOS14 对于自身产品的影响。此前蝉大师结合数据分析发现:iOS14 在榜单和热搜数据与iOS13 相比没变化,主要变化集中在建议词与修正词。许多ASOer对此表示困惑,iOS14 新出现的推荐词对自家产品具体会有什么影响?后续该怎么调整优化关键词呢? 基于此,蝉大师在全面支持iOS14 系统关键词数据的基础上,重磅推出了三大贴心功能: 1 增iOS14 关键词诊?

  • iOS14app资源库怎么隐藏应用 App资源库怎么不显示

    iOS14正式版上线后,用户发现增加了一个App资源库的功能,就是将手机内所有的App集中在一起显示,这个功能不少人表示不太喜欢想要关闭,那么如何关闭App资源库不显示呢,我们来一起看下吧。

  • 网赚APP的“俄罗斯套娃”游戏

    活跃在中老年人手机当中的网赚APP,正悄悄地侵占大家的时间及隐私,它甚至可以洗脑一个人。你以为这些APP白给大家钱,它们就是傻子?

  • 百度APP上线“购物”频道

    百度APP日前上线了“购物”频道,设有达人直播、发现好货等板块。

  • 知乎App首页新增“视频”专区

    今日,知乎App首页新增“视频”专区。此前,知乎上线视频创作工具,可通过用户提供的文字材料,自动配以与内容相对应的图片和动图,形成视频。该软件将逐步对全部用户开放。

  • 美妆鉴别服务开创者——心心App

    9 月初,广州警方破获了一起仿冒品牌化妆品团伙案件。据悉,该团伙所生产的假冒品牌化妆品主要流向了一些小化妆品店以及一些直播带货个体。一时之间,有关网购买到假货的新闻在网上再一次成为热议话题。对此,美妆鉴别服务开创者心心App表示,消费者网购美妆商品务必要谨慎为之,挑选正规平台,注意鉴别,排除假货。近些年,网购日益盛行。小到一些厨房用品,大到一些家电商品,人们习惯性地拿着手机随时随地在网上浏览,挑选自己?

  • Soul app :灵魂难求,“暗战”不休

    不久前Soul的崩溃事件登上了微博热搜,但围绕这一事件的讨论很快就不再局限于崩溃事件本身,闻声赶来的新老用户纷纷在微博上分享自己的使用体验,其中不少人表示“Soul变了”。虽然在国内陌生人社交APP中独树一帜,但Soul与其他家别无二致的是,从投身这条赛道起,“灵魂”与“荷尔蒙”的较量便不曾停止,甚至愈演愈烈。 在“荷尔蒙”的怂恿、刺激下,陌生人社交领域“牌桌之下的较量”也逐渐公开在大众视野中。 2019 年,Soul当?

  • ​百度App上线购物频道

    ​近日,百度App上线“购物”频道。该频道需要用户在“频道管理”——“可添加频道”中自行添加。百度APP购物频道页面包括了“达人直播”“发现好物”等板块。在该板块下方还有猜你喜欢、直播、发现好物等智能推荐。

  • 3400余款手机APP存安全隐患 涉嫌诈骗违法App达233款

    日前,上海市公安局网安总队对 5000 款移动App开展安全检查,检测出具有安全隐患的App应用多达 3400 多款。据悉,用户让这些App获取权限后,其中一款社交类App打开后并未索取任何权限,然而测试人员利用软件却捕捉到其窃取了手机中通讯录的 24 个联系人,并且还将联系人信息进行了上传。

  • 微信推全新“微信听书”APP 已开启内测

    10月16日消息,微信将推出一款听书APP“微信听书”,切入长音频赛道,目前已开启内测。有爆料称,微信听书的团队正在招募相关的创作者和机构进行合作,微信听书致力于为用户推荐有声

  • 微粒贷目前没有独立APP,小心落入骗子的陷阱

    虽然现在互联网上的贷款产品越来越多,但是鱼龙混杂,让人难以辨别好坏,稍有不慎可能就会落入骗子的圈套。在选择时,还是要考虑其安全性和是否靠谱。微粒贷作为微众银行旗下的小额信贷产品,不仅安全有保障,而且操作简单便捷,因此备受广大用户的青睐。但是也有一些不法分子,打着微粒贷的名号招摇撞骗,甚至制造出假冒微粒贷的APP进行诈骗。小伙伴们,一定要记住,微粒贷是采用的官方邀请制,目前是没有APP的。微粒贷微粒贷目前没有独立的AP

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签