由简书的首页联想前端攻城狮与界面设计的配合

这是今天早晨的简书的封面,(其实以前都没注意过),等等,然后发现了哪里不对


首页

左边图片配的文字,怎么看上去辣么别扭。

给白色文本加了投影,那因为背景图片不是那种纯色或者模糊的效果,会导致文本看上去不清晰。

改改试试。

因为家里PC配置比较低,ps也只有基本的字体,所以只能用微软雅黑暂时代替了

改进方法1,给图片加上半透明的黑,然后去掉投影效果,效果如下:


加蒙版背景,去掉文本的投影


改进方法2,不增加代码的基础上,改文本的text-shadow属性,来实现文本的黑色的外发光效果。因为“简书”和“交流故事,沟通想法”用了相同的text-shadow设置,-1px,0,0,rgba(0,0,0,0.75),外发光效果很好实现,把X轴和Y轴偏移值都设定为0,同时设定模糊半径值,考虑到“交流故事,沟通想法”的字号,把半径定义到6px,感觉还比较合适,同时,为了让白色文本更突出,也去掉了外发光的透明度,0,0,6px,rgba(0,0,0,1),效果如下:


改text-shadow属性(改了css属性后直接截图)


这里说一下前端攻城狮和界面设计的配合,有时候UI最大的感慨就是设计稿看上去很美好,但最后实现的效果有偏差甚至偏差很大,所以这时候需要的一个重要的工作就是“视觉联调”。

比如,我猜测一下故事场景,当简书的UI给首页找来一张图片,然后定义好字号、颜色、排版等等,交给前端开发人员后,前端按照界面标注做好之后,发现,文本似乎不是那么清楚,那后就加了投影的属性。然后UI看了最终实现的效果,感慨一下,好吧,差不多算实现了吧,然后,然后……

所以

-------------

前端懂一点点审美和UI懂一点点代码,最终才能成为完美组合。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 因为近期项目没有压力,主要工作就是一些涉及功能增删相关的界面的小工作,修修补补,搞个图标之类,设计师小伙伴们都懂的...
    泱泱悲秋阅读 5,317评论 1 27
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,885评论 25 709
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,215评论 0 11
  • 思念如马,自别离,未停蹄。 嘟......嘟...... "喂,宝宝..."电话那头传来熟悉的声音,我竟一下子慌了...
    陆筱筱阅读 832评论 0 1
  • 王尔德说过:“大多数人只是活着,而不是生活。” 有人眼里,生活是身居豪宅,家财万贯,富足优越;也有人眼里,生活是阖...
    一刀封晓阅读 145评论 0 0