巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站资讯News

超周全的挪动端顶部栏设想阐发 - 网页设想 - taishanly.com

0
一佰互联网站扶植(www.taishanly.com) 宣布时候:2020-04-09 08:51:47 阅读数: 107

王M争:我比来在做改版设想,以是很长时候不更文了。时代碰到了良多题目,此中一个便是顶部栏配色,厥后我干脆就针对挪动端顶部栏设想做一个总结,在这里分享给大师。

顶部栏款式

下图是咱们最罕见的顶部栏款式。下面是状况栏status bar,中间是界面标题,摆布能够会有icon,代表着前往,动静提醒,设置等操纵。

可是我看了一动手机上的利用,并不是每款产物都接纳了这类款式。我遴选了几个「异类」,逐一停止阐发。

去标题化

一些产物中的一级界面删除顶部栏中的标题。要晓得为甚么被删除,起首要晓得为甚么而存在。很简略,标题的功效便是告知用户今后界面的称号。可是这个功效跟底部栏菜单有些堆叠,因为用户从底部栏的选中状况也能晓得自身今后在哪一个界面。那末我适才也夸大了,是一级界面,若是进入了二级界面,一旦不了底部栏菜单,标题仍是要拿返来的。

下面论述的是一级界面删标题的条件,接上去咱们来讲说删标题的念头。一个产物的一级界面普通最多只要5个,咱们必须在无限的空间中展现充足多的功效和内容,而删标题便是一个不错的体例。下图便是我对付出宝首页做的一个点窜,若是加了标题,咱们会发明首页展现的内容就会削减一些。

而一级界面也有优先级之分,「首页」的用户点击率最高,以是咱们能够看到良多产物的首页标题都删除,可是其余一级界面的标题照旧保留。就以下面提到的两款产物为例,b站「首页」和「我的」删除标题,而付出宝只要「首页」删除标题。

可点击

在咱们平常印象中,顶部栏除icon其余都是不可点击的。可是我比来碰到一些惯例,以登录/注册界面为多,这里的顶部栏咱们能够当作是登录/注册按钮。

One界面中顶部栏做成下拉框款式,用户能够点击遴选。

另外一个比拟罕见的例子便是iPhone点击状况栏会疾速前往界面顶部。

这类转变我感觉今后会愈来愈多的,因为一款产物跟着不时迭代,功效会愈来愈多,空间愈来愈严重。在这个条件下,装潢性元素转变胜利效性元素是一个必然的趋向。极简化设想一个主要理念便是删减与用户使命有关的非功效性元素或把装潢性元素转变胜利效性元素。

背风景

对于顶部栏的另外一个趋向是通明背景。通明背景的利用跟第一个去除标题的方针是一样的,都是为了节流界面空间。

既然提到背景,咱们来讲一下顶部栏的背景配色。罕见的顶部栏背风景有四种:企业色,红色,深灰色和通明。

企业色背景的一大益处便是对顶部栏停止了品牌化处置,用户一看到就晓得这是甚么产物。虎扑的顶部栏间接企业色背景加logo,我不能评判这类设想黑白与否,可是我一看到顶部栏就晓得这是虎扑,从品牌化处置这个角度来讲是很胜利的。

说到品牌化处置,前段时候有个伴侣问我,付出宝里的icon在配色上为甚么不同一利用蓝色,如很多协调同一啊。他还给我发了一张其余产物的例子,我感觉离开产物定位去谈设想都是耍地痞。付出宝是一个别量很是大的产物,每个模块单拎出来便是一个app,都有其独有的标记色,比方网商银行的青绿色。不能自觉停止品牌化处置,下图咱们发明icon配色换成蓝色以后,界面完整损失了条理感。

除节流界面空间和品牌化处置,影响背风景的另外一个身分是用户方针。并不是每个用户利用你的产物都带有明白的方针性,比方我翻开京东,能够我并不晓得自身要买甚么,只是纯真的出去看一下。或我翻开喜马拉雅fm或蜻蜓fm,我自身都不晓得自身想要听甚么节目。在这类用户方针不明白的环境下,咱们要让用户的注重力聚焦于内容自身,赞助用户尽快地遴选出自身感乐趣的内容。以是在设想上咱们要对顶部栏停止弱化,利用红色或间接通明背景,避免对用户形成搅扰。

顶部导航栏

我还发明了一些产物不利用底部导航栏,转而把顶部栏做成一级导航栏。罕见的产物有QQ音乐、酷狗音乐和酷我音乐。这三款产物的界面规划很是近似,都舍弃了底部栏菜单。

如许的益处在于用户能够一向看到播放条款式,能够间接停止停息、播放、切歌等操纵。而在网易云音乐中,用户若是想停止近似操纵则须要点击右上角的icon进入播放界面,就多了一个步骤。

并且QQ音乐其顶部栏设想包罗了搜刮框这个主要功效,一样用户能够随时随地去搜刮歌曲。而网易云音乐则须要点击回到「发明音乐」,也是多了一步。看到这里,能够会有人说,既然顶部栏导航有这么多益处,那末咱们干吗还用底部栏导航,网易设想师怎样那末傻。

网易大佬们没那末傻,从导航体系来阐发,网易云音乐的一级导航是经由过程底部栏菜单来完成的,其上风在于用户操纵便利。其余三款产物一级导航都是顶部栏,若是是大屏手机的话,用户拇指很难触摸取得,这是网易云音乐比其余三家做得更好的处所。

埋没

当我翻开one里的一篇文章时,发明顶部栏是埋没起来的,我持续往下阅读,一旦我往上滑动那末顶部栏就会呈现。

咱们没关系去阐发其面前的缘由,用户下拉代表了用户正在阅读,那末为了增添阅读地区,咱们遴选埋没顶部栏。并且用户上滑这个手势申明他中断了今后的阅读流程。呈现这类环境有两个缘由:

  • 写的太次了,不感乐趣,我要前往到上一级。
  • 写的太好了,我要晓得文章标题或作者信息。

这类「下拉埋没,上滑呈现」的设置我发明在简书和知乎都存在,不过简书里展现的是作者专栏,而知乎里展现的是文章标题。

另外一款同类产物「大师都是产物司理」就比拟挺拔独行了,全程都埋没了顶部栏,也能懂得,因为其前往按钮是放在底部栏的。

总结

以上便是我对挪动端顶部栏设想做的一个简略的阐发和总结,但愿能够帮到大师。

接待存眷作者的微信公家号:「王M争」

「UI设想师必看的常识总结」

  • 《进阶常识!超周全的标记体系设想总结》
  • 《想设想按钮?先来看这份超周全的按钮利用场景总结》
  • 《最罕见的Tab该怎样设想?来看这篇超全的总结》
  • 《若何做出用户不恶感的毛病提醒?来看这篇总结!》

================明星栏目保举================

优优教程网: taishanly.com 是巅云旗下优良中文教程网站,分享了大批PS、AE、AI、C4D等中文教程,为零根本设想喜好者也筹办了知心的常识树专栏。开启收费自学新篇章,根据咱们的专栏一步步进修,必然能够敏捷上手并建造出酷炫的视觉成果。

设想导航:国际人气最高的设想网址导航,设想师必备: http://www.taishanly.com/

巅云大讲堂

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

上一篇:掌握4个关头点,让Design Workshop真正晋升设想效力 - 网页设想 - taishanly.com
下一篇: 网页设想投稿规范 - 网页设想 - taishanly.com
[前往消息列表]

相干消息more

14
05月
【适用】若何进步外链文章的品质_巅云建站

导读:(1)几回再三率高不利于收录;(2)千篇一律可读性差;(3)网站权重难以保持;(4)网站收录不稳定。 此刻很多站长为了轻松费事,操纵收罗器... >>概况

01
05月
PHP与MySQL开辟中页面呈现乱码的一种解

普通来讲,乱码的呈现有2种缘由,起首是因为编码(charset)设置毛病,致使阅读器以毛病的编码来剖析,从而呈现了满屏参差不齐的“天书”,其... >>概况

04
05月
为甚么Google谢绝删除人们不喜好的网页

每过上几周,总有人找我,Matt,网上有个对于我的网页让我不爽,能不能从 Google 的索引中把它拿掉?或如许说,有人在网上对我歹意进犯... >>概况

26
03月
想让自身的网站排名靠前,若何能力取得搜刮引擎

简介:处理用户须要题目。用户须要一向是咱们存眷的核心,任何收集营销行动都环绕着这个主题来停止,这依然须要专业的网站数据阐发能力停止检索,出格... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站