底部标签式导航:最常见、最常用、最符合用户习惯的样式,导航中的首选样式。根据拇指热区图显示,拇指的最佳操作区域是只有页面的三分之一,所以标签导航常位于页面底部,一般作为全局导航使用;导航的内容最直观,不会被隐藏,并且被选中的标签会高亮显示,明确告诉用户当前所在位置,用户可以轻松点击标签进行页面切换;
舵式导航:也叫点聚式导航,其实我感觉可以归到底部标签式导航一类,因为在两者搭配使用时,它常作为核心功能入口放在中间位置,形成了对称,故而叫做舵式导航;设计上会和其他标签有明显区分并重点突出了自己,很容易吸引用户的注意力,也有鼓励用户使用该功能的意味,但是因为过于明显所以会弱化其他功能入口;比如带有社交属性的产品,会希望用户多发布一些UGC内容,常采用这种导航形式;这类导航里常放置用户最多使用的或是产品最重要的功能,拓展的功能数量不宜过多;
列表式导航:这种导航形式很常见,可能常见到我们平时都没察觉到这类竟然也是导航,在视觉上整齐美观,几乎所有产品都会用到,列表式导航和宫格式导航类似,只是在表现形式上的不同,列表式导航的表现形式有很多,比如纯文字/icon+文字/文字+图片等;数量上也可以很多,并没有局限性,因为用户是上下滑动查看的方式;常作为二级导航和其他导航搭配进行使用,因为不方便用户切换功能,并且太靠下的列表可能点击率不高;
悬浮式导航:这种导航形式也比较常见,现在的手机屏幕比较大,用这种导航方式也越来越多了,常作为二级辅助导航使用,在阅读类或工具类产品中比较常见,;点击导航常伴有动效并出现若干功能,这些功能聚合在悬浮导航内,节省了屏幕空间,但是会对用户的视觉形成干扰;
小结:导航形式对产品来说不是单一的存在,尤其在产品功能结构都日益趋于繁杂庞大的今天,导航间进行组合使用已是常态,也是一种大趋势,所以在进行产品设计的时候需要结合自身的需要具体分析,使用适合自身的导航形式,毕竟适合自己的才是最好的。
常见的banner设计比例有2:1和16:9,当然这不是固定的,高度可以根据产品需要来定,比如电商类产品首页空间比较宝贵,banner高度就会相对紧凑,以节省页面空间。我们在设计banner时最好使用屏幕最大的宽度尺寸进行设计,即:安卓(@4x)—宽度1440px(各个公司可能后台上传尺寸不一样,仅做参考),这样做虽然会多占资源,但是在适配下面的各个屏幕时可以避免可能出现模糊不清的状况。
自从iPhoneX问世之后,为了避免刘海对banner的干扰,越来越多的产品取消了之前状态栏和导航栏全透明的效果,将banner放到了导航栏下面;目前电商中京东还保留着原来的样式,这类样式需要注意的点有:
留出顶部危险区域:状态栏和导航栏底下为危险区域,危险区域内不要出现文字等重要内容;
顶部黑色透明遮罩:因为banner的颜色不可控,为了突出状态栏,开发会在顶部设置自上而下的黑色遮罩,数值为70%—0%;
上滑时显示状态栏和导航栏底色:开发会设置一个数值,比如通常是一个状态栏和导航栏的总高度,即128px(@2x),在页面整体上滑128px时,状态栏和导航栏会由全透明变成不透明显示出底色/渐变色;
3.分类模块入口
分类模块入口一般位于首页banner下面,在电商、团购类等产品中是十分常见的形式。很多用户可能不知道搜索什么关键词或是目的性比较强的来寻找某一商品,这种快捷的分类入口就会显得很方便。
分类模块一般有1-2页,数量4-20个不等;因为第一页的点击率普遍较高,所以请将最重要的分类放在第一页,要让用户触手可及,而第二页放相对次要的分类;也可以将第一页最后一个分类设置为”更多分类“,这样做可以减少一页,但是里面分类的点击率可能会不高;
icon的设计上普遍是面性图标或者面性图标+圆形/方形底色(渐变色),因为这样视觉上图标会显得比较饱满;面性图标的设计上不单单只是反白效果,还可以添加一些设计细节对比,会显得更有层次;这里不建议使用线性图标,因为会显得视觉冲击力太弱,不够突出;
4.“资讯/新闻/快报/头条”入口
5.底部标签栏
标签栏在上面的导航模式中已经提到过了,这里就来具体的说一下:
设计上:标签栏高度为98px(@2x),标签栏内的字体作为提示作用,字号为20px;标签的数量一般有3-5个,icon的设计上要保持简约并且能够精准传达释义,也可以进行品牌基因的融入来突出自己的调性和其他产品的差异化;常用的是线性和面性两种,一般进行结合使用以表明选中状态;iOS11之后面性icon开始流行,用品牌色进行区分;另外icon的设计要保持统一,比如线性icon的粗细、圆角角度大小、开口的大小等都要保持一致,这样用户看起来也会比较赏心悦目;
反馈方面:可以分为视觉和听觉两方面;视觉上当前选中状态要和其他icon有明显区分,比如线性和面性的区分、颜色的区分等,以表明当前所在的页面位置;另外,点击时icon伴有动态效果,可以增加趣味性,也是现在比较常见的反馈方式;听觉上的反馈是指在点击icon时会伴有点击音效,比如facebook;
隐藏功能:再次点击icon置顶页面功能。用户熟知的置顶页面功能是点击状态栏或是点击置顶button,可能很多用户没有发现或是很少用到——再次点击当前页面标签栏icon是可以进行页面置顶的,可能很多产品都有这一功能,但是没有对用户进行很好的引导,反观之,淘宝和MONO在上滑时会在标签栏进行置顶页面的引导,体验较好;另外淘票票采用的是双击标签栏icon进行置顶页面,应该是为了避免用户的误操作,导致用户正在浏览的内容上移,需要再次滑动很久才能找到,但这样的交互可能很多用户都不会知道;
为了获得沉浸式体验,标签栏在用户浏览时可以进行隐藏,比如上滑时收起、下滑时显示出来;
6.加载方式
分步加载:顾名思义,就是一步一步的加载,优先加载占用资源比较小的内容;分两种情况:第一种先加载文字再加载图片,图片的突然出现会打扰到用户,这种体验不佳,已经慢慢被舍弃了;第二种就是先加载出页面的框架再加载出页面的内容,比如先加载图片占位符,占位符可以是灰色或产品主色(+logo或icon)/彩色(后台设置颜色,随机出现),接着再加载页面文字,最后再加载占位符位置上的图片;这种加载方式的好处是可以让用户快速页面整体的大致结构,体验较好;
懒加载:指在用户使用到时才会加载,以免造成流量和资源的浪费,比如用户刷feed流时,上滑被看见时再加载出图片内容,再往底下看不见的位置可能只加载出文字和框架;
智能加载:指在不同网络环境的下,加载的内容也不一样。比如在4G网络下,为了给用户节省流量,页面中进行加载文字内容和普清图片,不对视频进行加载或只加载标清视频,但是考虑一部分用户的流量比较多,所以现在也会给用户提供自己选择的权利,比如弹窗提醒用户是否使用流量加载或切换高清模式;而在wifi条件下,则是可以自动加载高清图片或视频;