找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

[ 职业成长 ] 【解读】献给所有技术热爱者:Medium设计师Marcin Wichary谈下划线设计 ...

2014-03-30 17:49| 发布者: watchmen | 查看: 1581 | 收藏

摘要: 守望者:对于一个技术热爱者来说,如何将用户体验做到极致是其工作中追求的全部,让产品卓越,让用户感觉LGTM是我们最大的追求。如果你是一个技术人,安静的坐下,享受追求卓越的快感吧。 ... ... ... ...

看Medium如何精雕细琢下划线

对于计算机来说,在屏幕上画一条水平线似乎再容易不过了,但是,简单的事情却往往内藏玄机,排版工艺就是个精细活儿,原本只需花一晚上就能优化的Medium下划线外观最终足足用了一个月的时间。

回顾历史
为了强调某个词语,过去常采用斜体或粗体的形式,而下划线则显得有些土鳖,但它的易用性让其得以频繁使用。在 20 世纪的打字机时代,刻板的等宽字体与单色打字机色带让下划线成为了唯一理想的文字强调方式:先退格,再在同样的地方打出下划线。然后互联网来了,下划线搭配蓝色字体成为了可点击链接的标志,也许这种方式会慢慢消失——前不久Google就清除了所有超链接下的下划线——但我坚信至完全消失还需要一段时间。

不幸的是,在这几年的网页排版技术发展中——更好的 CSS 属性、对国际化更多的支持、自定义字体——下划线还是原来老样子,只有极小的可定制性。

开始工作
在某个周二的早晨,我醒来后发现 Chrome 下的 Medium 链接是这样的:

丑陋至极!无法忍受!再看看其它浏览器,虽然好一些,但都差强人意:

我在加入 Medium 后不久,便开始罗列出网页排版中可改进的地方,那天 Chrome 下划线问题立刻就被我列为首要事务。

无品牌锤子
我从计算机历史以及前人经验中获得了很多灵感。

上图拍摄于计算机历史博物馆中的 IBM 1401 维修实验室,其中的手提箱装满了 19 世纪 50 年代操作计算机所需的全部工具,除了锤子,其它大多数物品都印有官方商标。在那个时代,计算机仍然是电动机械式,它的外围设备包括打卡机、链式打印机、读带机,操作它们既要动脑,也要动手,即使你的最终目的就是捣鼓无形的代码。Web 设计常常也是如此:用十分有限的工具、复杂而邋遢的方法解决简单的问题,因为并没有一个简单方法让浏览器给你想要的下划线,但是我们可以采取迂回战术。

在找到答案之前,先来看看问题所在。

找到完美的下划线
完美的下划线应该既可见又不唐突——让用户意识到哪些文字是可点击的,同时又不需要对其投入太多注意力。它应该被放在离文字一段恰当距离的地方,当有下行字母占位时,下划线要紧贴其后:

技术上,开发者可以:

  • 改变下划线宽度(支持半像素/视网膜技术)
  • 改变下划线与文字的距离
  • 改变下划线颜色
  • 清除字母的下伸部分
  • 对已访问链接采取不同的样式

开启头脑风暴

下面是我与身边的前端工程师们想出来的办法:
1. 默认方式
默认的 text-decoration:underline 还不够好,我觉得读者应该得到更好的东西。
2. 高级 CSS 属性
比如,text-decoration-skip 与 text-underline-position,然而大多数浏览器并不支持它们,在短期内也不会支持。
3. 使用 border-bottom 与 box-shadow
用 border-bottom 修改下划线算是自上世纪 90 年代以来的 CSS 技巧之一了,它能让我们自定义颜色,但线与文字距离太远,下图中的 border-bottom 下划线感觉就像在两行文字之间:

也有可能突破该限制,只需设置 display: inline-block 再减小 height 或 line-height 即可,但有一个致命的弱点——链接文字不能换行。所以,它对常规页面文字根本行不通。(另外,border-bottom 不能显示两个以下的视网膜像素)使用 box-shadow 也有类似的限制。

4. 定制下划线字体
我们平时见到的斜体与粗体其实具有各自独立的字母形状以保持字体的视觉完整性:

既然如此,那为什么不能定制一个独立的下划线字体让下划线成为字形的一部分呢?
虽然看似很有戏,但在我们这里却有如下问题:

  • 应用一款独立字体能增大页面加载耗时
  • 无法改变下划线的位置、宽度与颜色
  • 字体授权问题
  • 定制字体不太容易

5. 使用
HTML canvas 标签能控制单个像素,所以我们可以自定义宽度、颜色,甚至在字母的下伸部分周围绘制,然而问题是无法知道链接文字什么时候换行,目前并没有精确测量换行文字的工具,用 JavaScript 实现开销太大。
(该方案的另一个版本是,定制一款只有下划线的字体,再将它绘制到文字上,最终因为与上文同样的原因而被否决)

6. 使用 background-image 及渐变
虽然看似与下划线无关,但 background-image 支持换行文字,灵活性强,还支持视网膜像素,也能在行内使用 data 协议,更能利用渐变进行合成。于是,我们的最终方案是:一个细小的 1px 或 2px 高渐变,水平拉伸,垂直放置。

7. 清除字母的下伸部分
我的同事想出来了一个虽机灵但不切实际的办法——应用白色 text-shadow 或 text-stroke 来模拟下划线与文字间的间隙。不幸的是,为了取得最佳效果,需要放置多层阴影,代价太大,而 text-stroke 则会遮盖下划线里面部分,所以最终我们决定暂时把这事放一放。

8. 事情变得复杂了。据我观察,

  • 作者会在5个地方用上链接:body,H1,H2,图片说明,文章引文
  • 大多数链接是白色背景上的黑字,有些会放在图片上
  • 视网膜与非视网膜像素显示
  • 我们给平板与手机调整了字体大小
  • 对于某些语言会采用默认系统字体
  • 有些用户会放大或缩小网页
  • 有些用户使用不常见的浏览器

在接下来几周,

  • 得到通用公式而不是特定数值——如果未来要改变字体或大小,调整下划线的位置就容易多了
  • 限定我们使用的浏览器,为不支持的浏览器提供默认样式
  • 简化代码,减小网页大小以及后期维护成本

然后,事儿就这么成了

没有烟花,没有香槟,在经过 31 天的讨论、尝试、错误与再尝试后,我的代码评审员们发来了四个字母:LGTM(Looks Good To Me)

在 Chrome 下最终的前后效果对比图:

本文由守望者watchmen收集整理,部分内容源于网络。本文仅代表作者个人观点,不代表守望者的本意。如有违法侵权内容,请提交到守望者管理员处,立即处理。

会员评论  

已有0参与评论

推荐阅读

[守望者 算法视频]01_数据存储(链表与数组)
[守望者 算法视频]01_数据存储(链表与
本章重点介绍数据的在计算机的存储方式 :连续存储(数组)与链式存储,同时
[守望者   java初中级视频]22_javaNIO,AIO编程
[守望者 java初中级视频]22_javaNIO,
内容简介:本课程介绍阻塞,非阻塞,同步和异步的基本概念,介绍javaNIO,AIO
[守望者   java初中级视频]00_java初中级课程学习导航
[守望者 java初中级视频]00_java初中
内容简介:全面贾少这套视频课程学习需要具备的理论基础,以及适合的学习人群
【守望者 linux项目】linux下的FTP服务器与客户端,作者 灯下野狐 ...
【守望者 linux项目】linux下的FTP服务
本项目是一个完整的FTP服务器及FTP客户端设计示例,对于需要学习网络编程项目
【守望者 游戏项目】基于cocos2d-x的跑酷游戏项目教程
【守望者 游戏项目】基于cocos2d-x的跑
Cocos2d-x跑酷游戏项目教程Cocos2d-x跑酷游戏项目教程cocos2d-x特性cocos2
【守望者 linux项目】mini WEB服务器设计
【守望者 linux项目】mini WEB服务器设
以下是曾经Watchmen一个朋友学习网络编程时设计的一个简单的MiniWEB服务器。
【守望者 观点】智能路由和Wi-Fi探针是一对好基友
【守望者 观点】智能路由和Wi-Fi探针是
智能路由与Wifi探针可以收集用户行为,同时可以收集用户MAC地址,还可以跟踪
[守望者 linux视频]01_开发工具与开发平台
[守望者 linux视频]01_开发工具与开发
本课主要介绍gcc,gdb等系列开发工具,开始编写程序之旅。要求理解Linux开发平
[守望者 算法视频]08_数据查找_hash算法
[守望者 算法视频]08_数据查找_hash算
守望者:普通逐个查找O(n),组织方式可以无序的数组或者普通链表。已经排序的
【解读】什么样性格的人会被夸性格好
【解读】什么样性格的人会被夸性格好
守望者:性格决定命令。好的性格意识着给别人面子,能接受别人装逼,而且以上
[守望者 linux视频]02 进程内存管理与valgrind的使用
[守望者 linux视频]02 进程内存管理与v
本课主要介绍Linux可执行文件与进程内存结构, Linux进程结构及内存申请与释放
[守望者 C和指针]11_高级指针_C_面向对象
[守望者 C和指针]11_高级指针_C_面向对
(1) 彻底解决指针、取地址后的类型问题。(2) 回调函数示例。
【观点】闲聊阿里“996",全集团ALL IN无线策略及加班之意义 ...
【观点】闲聊阿里“996",全集团ALL IN
守望者:几乎的所有的员工都不喜欢8小时之外的工作,而几乎所有的老板都期望
【守望者 观点】你是哪种人?一个能看穿你的人性和欲望的测试 ...
【守望者 观点】你是哪种人?一个能看
守望者:这个心理测验来自西方,是与人潜意识有关。我10多年前认识个朋友,从
【守望者 Linux项目】二阶段提交应用项目(Two-phase commit protocol )2PC 高并发 . ...
【守望者 Linux项目】二阶段提交应用项
背景:以下是watchmen曾经编写的一个二阶段提交银行系统的项目。这个项目源于

行业聚焦  面试交流  职位推荐  开发视频   技术交流  腾讯微博  新浪微博

友情链接:课课家教育  阿里云  鲜果  W3Cfuns前端网  中国企业家  环球企业家  投资界  传媒梦工场  MSN中文网  Android开发者社区  cnbeta  投资中国网  又拍云存储  美通说传播  IT茶馆  网商在线  商业评论网  TechOrange  IT时代周刊  3W创新传媒  开源中国社区  二维工坊  Iconfans  推酷  智能电视网  FreeBuf黑客与极客  财经网  DoNews  凤凰财经  新财富  eoe移动开发者社区  i黑马  网易科技  新浪科技  搜狐IT  创业家  创业邦  腾讯财经  福布斯中文网  天下网商  TechWeb  雷锋网  新浪创业  和讯科技  品途O2O  极客公园  艾瑞网  抽屉新热榜  卖家网  人民网通信频道  拉勾网  创新派  简单云主机  

手机版|黑名单|守望者在线 在线教育 linux 高级程序设计 C/C++ 大数据 ( 蜀ICP备14029946号

成都守望者科技有限公司 © 2013-2016 All Rights Reserved