读书人

app下的一个小小的“顶部标题栏”

发布时间: 2013-03-06 16:20:31 作者: rapoo

app上的一个小小的“顶部标题栏”

工作中开发了一个“顶层标题栏”(为了方便书写,以下简称为标题栏)的小功能。完工之后仔细端详着自己的“作品”,觉得这个标题栏怪怪的,不那么顺眼,感觉差了些什么,但是又说不太清楚。晚上回来查看了几个著名的app的标题栏,一对比,发现自己做的标题栏在细节上还存在着很大的不足。下面简单的列举下(本人的一点小小的总结,如有疏漏错误的地方请各位大虾不吝指教)

一、自己做的标题栏的色值为纯色,且不透明。
对比:instagram的标题栏的样式为透明度90%左右的纯色(目测为白色,没有具体工具吸色)。如下图:注意可以透过标题栏看见美女的头发。

app下的一个小小的“顶部标题栏”


二、自己做的标题栏的底部无边框,产生的后果是标题栏和后面的内容区分不明显。

对比:网易新闻客户端新闻的标题栏为纯色且半透明,底部有条分隔线(目测为淡灰色),且该分隔线会有两种样式,
1.刚进入该新闻页面时,标题栏为纯色,分隔线为一条2像素左右的凹下去的线。如下图:

app下的一个小小的“顶部标题栏”


2.当用户向上滑动页面时,标题栏不变,分隔线变为一条1像素纯色(目测为黑色)的线,且该线下面有一条中间高两头窄的梭行阴影。入下图:app下的一个小小的“顶部标题栏”


3.啪啪的标题栏没有网易的那么复杂,无论什么状态都只为2像素左右凹下去的线。入下图:

app下的一个小小的“顶部标题栏”


看来一个成熟的产品的每个小细节都是经过精雕细琢的。一部伟大的作品中的每个小区域都是perfect的。
注:本文所说的颜色都为本人的目测,没有用具体工具吸色。

读书人网 >移动开发

热点推荐