标题栏怎么设计比较好看,标题栏设计技巧

标题栏是我们最常见的功能模块了,这一次来解读一下标题栏为什么是标题栏。
我知道产品经理很多时候会去思考一些有的没有的问题,比如微信为什么不做消息阅读状态,为什么不做离线状态。
又或者头像为什么是方的不是圆的。
这些问题往往会以对方产品经理的个人价值观为终结答案,毕竟不参与到其中的成员,无法知道真正的情况是什么样的。
也因为这个情况,许多产品经理会将此类问题定义到主观因素里,忽略了对问题的深入思考过程。
其实我觉得这些问题背后总有一些深意,如果明白做法的原因后,我们可以借鉴,但在不清楚原因的情况下,就只有抄袭了。
布局分析
为什么陌陌的筛选放在右上角?
为什么微信的搜索放在右上角?
为什么设置放在右上角?
这篇文字,我们就来回答这三个任性的“问题”。
首先,我们来看看视觉热点图。
这是在网络中找到的一张app的眼动热力图,可以看到标题栏几乎不会被注意到,对视觉热力图感兴趣的朋友,可以百度视觉热力图或者眼动热力图,类似这样的素材并不那么容易被找到,需要有多一点耐心。
配图
app的顶部局域是最容易被忽视地方,我们在看界面时,潜意识是看中间部分,这和我们生活中的视线有关联的。
如果你身边有一本书,或者一个键盘,不如试试你第一眼看的是哪个位置。
让我猜猜,你会看到书的中间,或者书的标题,不太会看到书的顶部,你也会看到键盘上fghj这四个按键,不太会看到f5,f6这一列。
人们的眼睛似乎遵守着某种生物本能,潜意识的会先看“中间部分” 。
我们在使用手机app 阅读一篇文章时,为什么会将文章标题做的和正文内容完全不一样,
也是因为这样的一个原因。
借助标题的视觉特殊性,将人们的视线从中间部分,提升到页面顶部,这样才能从头看内容,否则人们第一眼就会看到文章中间部分的内容,这样就会出现阅读障碍了,难以理解文章从哪里开始的。
图中,你看见的第一个字是什么?
用户使用的迫切欲望
当我们特别想得到什么时,会做出一些平时难以理解的行为,其中包括做一些成本非常高的动作。
如果将用户对一款app的使用理解成许多的行为动作,那用户的使用欲望变可以理解为对某个行为的专注程度。
专注度,越高,对行为成本的感知越弱,越不敏感。
被放置在标题栏的功能,具备很强的特性。
上图列举了一部分常见的标题栏功能,而这部分功能最典型的特征便在于用户使用的迫切欲望。
也就是当用户想要举报某条内容时,对“举报”这一行为的专注度,超过了行为成本。
我们试想一下,上述的功能,在什么时候会被用户使用?
比如:搜索功能。
人们不太可能去“随意搜索”,往往已经有了明确搜索对象了,我已经明确知道我要搜索的内容,此时,我想要立即知道搜索结果。
此时,我的注意力都放在搜索结果上,也就是行为之后的结果,并不太在意这个行为发生的过程。
同理推断,举报,添加,清空,删除,修改等等一系列行为,都是属于专注度较高,且专注对象都是行为之后的结果,而非行为本身的过程。
类似这样的需求,我们便可以利用人们对行为的专注度,将这部分功能设计在一些比较薄弱的角落里。
(前文已经提及到了顶部属于视觉薄弱区域)
反向思维,若用户对这个功能没有使用欲望,又会怎么样呢?
被设计在标题栏的功能,在用户没有产生需求的时候,会被很自然的遗忘,并且是完全遗忘。
我们在前文已经提及了用户对顶部内容的不关注,源自于人们作为生物的视觉本能,因此,在没有产生需求的时候,我们的视觉就会自动忽视这部分的内容。
这样一来,所谓的“高成本行为”就变成了“不存在的行为”自然就不会给用户产生复杂或者不方便的感知了。
简单的来讲,当用户需要时能够不计成本去使用,当用户不需要时,能够“自动消失”便是标题栏功能的特色。
微信之分享
微信是个能引起山寨效应的产品,比如在标题栏右侧设计分享以及上传功能。
因此我单独来说解读一下微信标题栏右侧的分享功能。
微信,为什么将分享放在标题栏右侧。
将分享功能放置在右上角的原因,除了前文所提及的两点之外,还有一个决定性因素是对h5的支撑。
h5在app内的使用往往是以内嵌浏览器的方式进行实现,而分享面板的功能则是native自身的能力。
我们在朋友圈所访问的h5页面实际上是这样的。
除了标题栏区域以外的地方,都是h5的区域。
我们可以尝试在底部参考标题栏的做法,也固定一个底部区域由native来开发,但这样一来就会减少h5的展示空间,同时也会局限h5本身的扩展玩法,这样的做法并没有被大面积的使用。
鉴于技术上的交互成本以及瓶颈,h5没有办法直接控制客户端的响应事件,这表示我们也没有办法点击h5上的分享按钮,直接唤起native的分享面板。
你还记得箭头指向右上角提示用户点此分享的引到页吗?
右上角放置分享按钮基本上是微信独家特色,只是因为技术限制以及更开放的对待其他人的h5接入。
有时,我看到某款产品使用native做的页面承载,也依然学习微信将分享按钮置于页面右上角时,觉得挺浪费的。
我相信大部分产品都希望用户将内容分享到微信朋友圈,以此产生扩散效应,不过盲目的抄袭,可不是一位好的产品应该做的事情。
这会让我们失去很多寻找真相和原因的机会。
上一个:建设网站之前需要准备什么资料?
下一个:受线框启发的网站设计展示
七台河网站建设,七台河做网站,七台河网站设计