1 min read

博客改版

​我是长期从事前端开发一块的,用户体验以及设计两块,基本属于”人云亦云“的水平。但那句话说,没见过猪跑,还没吃过猪肉吗?所以这一次的博客改版,​​想特地写一篇。

颜色

我不是色盲,但很难说我用得好色彩 – 因为基础全无 – 一个非常糟糕的理由。好在 Google Material Design 有色彩一块说明,所以这次基本是基于它的指导:选三种主色,然后加一个强调色。

链接颜色基本使用蓝色,主要出于用户可用性上的考量。内容区域的链接有加轻薄的下划线 – 值也是参照 Material Design,rgba(0, 0, 0, .12)。因为我不再支持 IE10 以下的 IE 浏览器,所以对于 IE8 不支持 rgba 的情况也没做备选方案。

顶部面包屑导航区,会根据所处页面类型更换背景色 – 本意是出于区分,比如分类页、内容页,但其实用户记不住这些,所以只是为了好玩。

导航菜单

此前的菜单是基于 Bootstrap 做的,中规中矩,移动设备上会收起来,然后点击一个菜单键下拉出来。这次换成抽屉式的,目下也是成风了。不过因为用到 CSS3 的 transition,所以不支持 IE10 以下,好在我已经宣称过不支持 IE10 以下了 – Google 的准则是,仅支持各大浏览器最新两个版本,比如 IE 出到 11,它的网站就支持到 IE10。

翻页

翻页的设计,基本抄自 Google Trends,当然,CSS 是自己写的,CSS 类的命名则遵循 BEM

翻页上有一个小小细节。一开始,我是用上一页下一页这样的字眼,后来想想,这样对突然闯入的阅读者来说没有任何意义 – 她根本不知道上是哪里、下又是什么。于是换成了[旧一页]、[新一页],揉合了时间概念。

列表的分类

在首页上,原先每一条标题下并没有加入文章所属的分类,后来加入了,是觉得一个标题、时间以及有时有有时没有的摘选不足以帮助用户定位一条信息是否是她想点进去的。希望分类能增加一点信息量,帮助用户下决心点下去还是不点。

移动端的几个问题

[resp_image id=’15800′ caption=” ]

上面的截图里有两个问题:

  1. 顶部面包屑被截断 – 因为标题太长了,目前没有什么好的解决办法,只能粗暴截断
  2. 底部的上、下文章链接高度不一,这个目前也没什么好的解决办法

还有一个问题,也是移动端上有的,就是左侧抽屉拉出来后,会导致已经滚动了某些距离的页面重新滚回顶部。这个是因为抽屉出来后,动态设置了 htmlbody 的高度导致的,Google Trends 页面同样有这个问题。

报告问题 修订

如果你有自建 https 代理的需求,欢迎尝试 Phantom,一键搭建,方便快捷。查看 demo