浅析标题栏设计：搜索、筛选、设置等功能都该放在右上角吗？.doc

《浅析标题栏设计：搜索、筛选、设置等功能都该放在右上角吗？.doc》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、浅析标题栏设计：搜索、筛选、设置等功能都该放在右上角吗？　　标题栏是我们最常见的功能模块了，这一次来解读一下标题栏为什么是标题栏　　浅析标题栏设计：搜索、筛选、设置等功能都该放在右上角吗？　　标题栏是我们最常见的功能模块了，这一次来解读一下标题栏为什么是标题栏　　浅析标题栏设计：搜索、筛选、设置等功能都该放在右上角吗？　　标题栏是我们最常见的功能模块了，这一次来解读一下标题栏为什么是标题栏　　浅析标题栏设计：搜索、筛选、设置等功能都该放在右上角吗？　　标题栏是我们最常见的功能模块了，这一次来解读一下标题栏为什么是标题栏　　　　标题栏的功能

2、，在当下的产品环境里是有原因的，我们来看看这几个产品的标题栏。　　　　我知道产品经理很多时候会去思考一些有的没的问题，比如微信为什么不做消息阅读状态，为什么不做离线状态。又或者头像为什么是方的不是圆的。　　这些问题往往会以对方产品经理的个人价值观为终结答案，毕竟不参与到其中的成员，无法知道真正的情况是什么样的。　　也因为这个情况，许多产品经理会将此类问题定义到主观因素里，忽略了对问题的深入思考过程。　　其实我觉得这些问题背后总有一些深意，如果明白做法的原因后，我们可以借鉴，但在不清楚原因的情况下，就只有抄袭了。　　布局分析为什么陌陌的筛选

3、放在右上角？为什么微信的搜索放在右上角？为什么设置放在右上角？　　这篇文字，我们就来回答这三个任性的“问题”！　　首先，我们来看看视觉热点图　　这是在网络中找到的一张APP的眼动热力图，可以看到标题栏几乎不会被注意到，对视觉热力图感兴趣的朋友，可以百度视觉热力图或者眼动热力图，类似这样的素材并不那么容易被找到，需要有多一点耐心。　　配图　　App的顶部局域是最容易被忽视地方，我们在看界面时，潜意识是看中间部分，这和我们生活中的视线有关联的。　　如果你身边有一本书，或者一个键盘，不如试试你第一眼看的是哪个位置。　　让我猜猜，你会看到书的中间

4、，或者书的标题，不太会看到书的顶部，你也会看到键盘上FGHJ这四个按键，不太会看到F5，F6这一列。　　人们的眼睛似乎遵守着某种生物本能，潜意识的会先看“中间部分”。　　我们在使用手机app阅读一篇文章时，为什么会将文章标题做的和正文内容完全不一样，也是因为这样的一个原因。　　借助标题的视觉特殊性，将人们的视线从中间部分，提升到页面顶部，这样才能从头看内容，否则人们第一眼就会看到文章中间部分的内容，这样就会出现阅读障碍了，难以理解文章从哪里开始的。　　　　左图，你看见的第一个字是什么？　　用户使用的迫切欲望　　当我们特别想得到什么时，会做

5、出一些平时难以理解的行为，其中包括做一些成本非常高的动作。　　如果将用户对一款APP的使用理解成许多的行为动作，那用户的使用欲望变可以理解为对某个行为的专注程度。　　专注度，越高，对行为成本的感知越弱，越不敏感。　　被放置在标题栏的功能，具备很强的特性。　　　　上图列举了一部分常见的标题栏功能，而这部分功能最典型的特征便在于用户使用的迫切欲望。也就是当用户想要举报某条内容时，对“举报”这一行为的专注度，超过了行为成本。　　我们试想一下，上述的功能，在什么时候会被用户使用？　　比如：搜索功能　　人们不太可能去“随意搜索”，往往已经有了明确搜

6、索对象了，我已经明确知道我要搜索的内容，此时，我想要立即知道搜索结果。　　此时，我的注意力都放在搜索结果上，也就是行为之后的结果，并不太在意这个行为发生的过程。　　同理推断，举报，添加，清空，删除，修改等等一系列行为，都是属于专注度较高，且专注对象都是行为之后的结果，而非行为本身的过程。　　类似这样的需求，我们便可以利用人们对行为的专注度，将这部分功能设计在一些比较薄弱的角落里（前文已经提及到了顶部属于视觉薄弱区域）。　　反向思维，若用户对这个功能没有使用欲望，又会怎么样呢？　　被设计在标题栏的功能，在用户没有产生需求的时候，会被很自然的

7、遗忘，并且是完全遗忘。　　我们在前文已经提及了用户对顶部内容的不关注，源自于人们作为生物的视觉本能，因此，在没有产生需求的时候，我们的视觉就会自动忽视这部分的内容。　　这样一来，所谓的“高成本行为”就变成了“不存在的行为”自然就不会给用户产生复杂或者不方便的感知了。　　简单的来讲，当用户需要时能够不计成本去使用，当用户不需要时，能够“自动消失”便是标题栏功能的特色。　　微信之分享　　微信是个能引起山寨效应的产品，比如在标题栏右侧设计分享以及上传功能。　　因此我单独来说解读一下微信标题栏右侧的分享功能。　　微信，为什么将分享放在标题栏右侧？

8、　　将分享功能放置在右上角的原因，除了前文所提及的两点之外，还有一个决定性因素是对H5的支撑。　　H5在app内的使用往往是以内嵌浏览器的方式进行实现，而分享面板的功能则是native自身的能