顶部导航交互方式的灵活应用（以iOS系统为例）

honghu2

顶部导航交互方法的机动利用（以iOS体系为例）

今朝很多App跟着功效迭代和产物需求的调解，在单个页面显现的功效点与内容都在增多。这象征着统一页面若是想给用户显现更多内容和操作，就必需按照用户利用场景，操纵交互方法的变革，分首要性层级展现。下文将经由过程现实案例阐明挪动端界面设计中顶部导航交互设置的变革。

一. 淘宝店肆详情页的顶部交互设置1. 退出店肆详情页按钮的位置和样式变革
改版前退出店肆详情页的跳转方法：点击左上角返回按钮，页面从左至右滑出回到上一级页面。改版后：点击右上角封闭按钮，页面从左至右滑出回到上一级页面（雷同微麻豆信小步伐的封闭样式）


2. 页面上下滑动交互方法的扭转
用户在当前页面上下滑动阅读内容时，传统交互方法：以下图1选中部门固定位置不动，只是滑动时视觉显现结果变革。改版后交互方法：上滑页面，下图2暗藏了除搜刮和顶部Tab以外的区域，而且搜刮按钮的显现样式产生了变革，在页面的任何位置下滑时暗藏部门呈现。

（1）传统交互方法



（2）新版交互方法


3. 调解暗地里的场景阐发
（1）返回上一级由左边的箭头调解为右边的封闭按钮

从内容显现层面阐发，起首展现给用户的是首要性层级最高的内容。用户进入店肆详情页，起首看到的是店肆名称、粉丝数目和存眷按钮。这合适交互原则，必要让用户明白从哪里来，如今在哪，怎样归去。

（2）上滑操作后店肆相干信息暗藏，下滑再次呈现

用户上滑操作时，表白用户已起头阅读信息流，那末店肆的相干信息没有需要一向固定存在，同时可觉得内容留出更多的展现空间。当用户下滑操作时，再次呈现默许头部，此时用户可能想退出或存眷该店肆。

（3）上滑后搜刮由icon+文字调解为只有icon

首屏搜刮的首要性层级较高，用户进入该页面可能有明白目标，即搜刮该店肆的商品，这时候必要将搜刮显现的较着。当用户上滑象征着没有明白目标，只是纯真的阅读举荐内容，此时搜刮便可以弱化处置。
二. 知乎用户详情页和问题详情页顶部的交互设置1. 用户详情页上下滑动，顶部交互方法的变革
以下图，进入用户详情页，知乎选择了首屏安排超大的小我头像和布景图，和昵称和小我简介信息。当上滑页面后小我头像渐变消散，顶部呈现搜刮和功效聚合键。

这里的斟酌身分起首凸起用户小我信息，跟着用户起头阅读内容，小我信息寻花弱化，同时呈现对应的搜刮功效。这恰是基于用户分歧利用场景下，想要告竣分歧方针，寄托交互的变革对页面结构举行的调解。


2. 问题详情页上下滑动顶部交互方法的变革
（1）知乎的问题详情页默许顶部安排了返回按钮、搜刮框和功效聚合键。当用户上滑页面时，文章题目、检察更多答复进口、写答复按钮，全数聚集在顶部导航的位置。

这是知乎出于对用户在当前页面阅读有哪些需求的认知设定的：知乎问答一向提倡每小我颁发本身的见解概念，以是一个问题可能包括多位用户的复兴，用户阅读完当前答复，最有可能的需求包含：“检察其他答复”、“本身写答复”，和“存眷这条答复的作者”。



（2）上面咱们提到用户在该页面有可能感觉本条答复很赞，想要存眷本条答复的作者，或检察作者更多动态。那末问题来了：在哪里安排存眷按钮和作者小我信息呢？

这里咱们必要斟酌：一方面包管用户在问答详情页有尽量多的空间阅读内容；另外一方面又要在用户必要存眷作者或检察作者动态时，给用户供给响应的进口。

是以直接在页面某个位置固定安排该进口会影响用户阅读体验，以是利用了机动的交互方法：在该页面当用户上滑阅读文字内容时，不显现存眷按钮和作者小我信息进口；而当用户下滑页面时显现。（以下图比拟）


三. 网易考拉种草社区首页顶部交互设置
正如APP Store iOS 11体系的全新改版，凸起夸大题目敏捷抢占用户心智。这也促使不少利用iOS版本的迭代采纳了这类方法。下图顶用户进入种草社区，凸起的大题目+动静按钮+搜刮框位于顶部，当上滑后题目消散，左上角安排了“我的主页”进口，搜刮框变小但依然凸起夸大，右上角动静按钮稳定。


文末总交友互设计师必要思虑如安在界面中机动利用交互设置，知足用户分歧场景的需求，进一步晋升产物的易用性与亲和力。跟着用户体验和需求的不竭进级，产物上下流分歧职强人员必需深刻思虑，深挖用户需求，做好细节的把控。本文以iOS体系挪动端界面设计中顶部导航交互设置为附近约爱引，大师可以进一步思虑好比底部导航栏、视频列表页及播放页等页面相干的交互方法，但愿能带给你一些开导。若是有更好的概念接待交换，互相进修。

作者：Viksea，微信公家号：陌秀Viksea（ID：viksea-ux）

本文由 @Viksea 原创公布于人人都是产物司理。未经允许，制止转载。

题图来自 Unsplash