前一阵收到很多朋友的询问,Sketch 打开包含了 Apple 默认中文字体「苹方」的文档的时候,会有 bug。比如提示「找不到系统字体」或者在操作的时候字体选择框直接置灰无法选择,比如这样:

图片载入中...
我自己电脑上也有类似的问题,当时猜测是 PingFang 字体文件里包含了不同的版本文件导致 Sketch 没法正常读取(因为打开 PingFang.TTC 文件问发现里面包含了 6 个字重以及两个不同的实体文件),而在 macOS 的非系统字体文件夹里还有另外的我自己装的 PingFang 字体的文件,可能产生了某种冲突。一开始我并没有意识到问题所在,只知道在我自己的 Sketch 的字体菜单里有整整 9 个粗细,但其中有一部分会导致上述的问题。

图片载入中...
后来问了一下 Luxu 童鞋咨询了问题所在,他研究了一下很快找出其实原因,上图中虽然显示了 9 个磅重,但其实里面有三组是同一种粗细,只是名字不一样,这个 bug 产生的原因就是我自己安装的 PingFang 字体其实是个「散装货」,跟系统自带的字体产生了一定的冲突,而事实上只有「/System/Library/Fonts/PingFang.ttc」文件才是正宗的系统自带字体。所以其实解决的方法也就非常简单了:

直接删除自行安装的苹方字体,也就是「/Library/Fonts/」和「/Users/你的用户名/Library/Fonts/」目录下的 PingFang 命名的各种粗细和版本的字体文件

或者,更偷懒地,可以直接搜索「PingFang」,后缀是 TTC 的打包字体文件才是系统提供的正牌,其他所有 TTF 等版本的都是「散装」的,可以直接删除。

同时,Luxu 也提了一个很好的建议,因为 PingFang 字体所附的西文部分,其实和系统默认的 SF 还是不一样的,所以如果想要在 Sketch 里完美模拟中西混排的文字的时候,直接选择 SF 字体,然后调整一下粗细,Sketch 会自己去做匹配和 fallback。

提取图片颜色的实现方法

日期:2017 年 7 月 18 日理论 & 教程
这是前一阵来自知乎的一个问题「Dribbble 客户端 ZEEEN 是怎么做到详情页颜色是适配的?」,我虽然没有在产品里做过落地的完整方案,但是因为以前想搞个好玩的 side project 第一步就是要提取图片的颜色,所以曾经在 GitHub 上搜索过一阵。有朋友评论说其实在安卓段系统就提供类似的支持,但当时找的这些主要针对其他平台,如果大家有相关功能和需求,希望能提供帮助吧~


1. ColorArt
因为很早就有关注 Panic 这个 macOS 软件开发商,所以这个库以前也有见过,是在 iTunes 某一版更新了「根据唱片封面提取条目背景色和标题、正文文字颜色」的功能之后,Panic 的工程师自己写来模仿的,在他们的博客上也有简单介绍背景:iTunes 11 and Colors

这个其实效果挺好的,但因为是用 Objective-C 写的,我不会,所以当时放在了一边。


2. 然后我尝试了一下 zeke/get-image-colorsthephpleague/color-extractor
因为种种原因(好吧,其实就是因为我的代码能力太弱了)都用不大起来,这两个是 JS 和 PHP 的,网页项目里应用起来应该方便些。


3. 最后我自己使用的是 arcanis/colibrijs
其实算法也是源自在 Stack Overflow 上某个用户去模拟 iTunes 11 的封面颜色提取功能,帖子里有详细介绍实现原理:How does the algorithm to color the song list in iTunes 11 work?

简单来说就是程序把所有像素的颜色都提取出来,然后设定一个阈值,所有像素里颜色区别小于这个值的都归到一坨,数量最多的那几坨就是提取出来的主要颜色。而在 iTunes 唱片封面这个场景下,为了能提取一个背景色出来保证对象图片放上去非常和谐,背景色是对图片边缘单独做一次取色的。而「颜色区别」的实现方式是把 RGB 三个值变成一个三维坐标再进行一个空间变换(作者说是为了符合人类的认知习惯,会有些类似我们做数码设计的时候经常是在 HSB 而不是 RGB 里挑颜色)然后计算两点之间的距离。Again,因为我自己对于这些代码完全是一知半解,所以这部分原理我吃不透,欢迎大家说得更详细一些。

因为这里的主要原理是看哪些颜色占的面积更大,所以其实对风景、人像等照片处理的效果会比较好,但对于很多 UI 作品来说效果一般,我猜测是因为在界面里很多有点睛作用的「细细」的图标和文字虽然颜色和背景差别特别大,但如果单纯用里面的实际像素来算面积的话就微乎其微了。总之,如果把 colibrijs 用来提取 UI 作品颜色的时候效果一般,大家可以看这个 Demo 感受一下:

图片载入中...


这个效果我觉得比 Zeeen 里的差不少,刚刚看到这个问题的时候我厚着脸皮私信问了一下 @Nobtaka,Zeeen 的设计师。他问了他的开发者合伙人表示他们用的就是 Panic 最早时候公开过的 ColorArt

做客 UX Coffee

日期:2017 年 6 月 30 日理论 & 教程
和 Leon 搭档了快两年了,这次头一回抛下他和友台做节目,基友不在,一个人略紧张,不过好在 UX Coffee 的主播们事先准备得非常详细,提纲内容很清晰,让我不至于像自己节目里那样说着说着就跑偏了 ?

很荣幸成了友台第一个越洋录音的嘉宾,从小学聊到了两份工作,那天录了整整录了三个多小时,指数级地增加了他们剪辑的难度,导致最后只能分上下两期,而且发布时间都推迟了,嗯,我的锅。
图片载入中...
Anyway,有兴趣的朋友可以关注 UX Coffee 最近的两期(标题真的不是我起的):

#30:这个公司端午节发粽子吗?
#31:工程文化主导下,设计师如何推动自己想法?

这是啥字体?

日期:2017 年 3 月 20 日理论 & 教程
只要是个视觉设计师,那你肯定问过或者被问过这个问题吧~ 反正我是碰到过很多,但无奈,对于庞杂的西文字体世界,我只是个门外汉,大部分问上来的字体,我都没法一眼看出来然后回答,所以帮朋友/自己找某个地方用到的字体到底是哪一款成了一件经常需要做的事情。

其实这种问题放到知乎之类的地方问是很容易被人说无脑的,那我就简单说一下碰到这种问题我有点啥思路自己去找字体,大家如果有所启发,也许以后就不用一直求人了。当然,凡事也不用那么功利,即使最后没找到,也是可以享受一下这个过程的。



1. 网页 / 软件里出现的程序绘制的字体

这种往往比较简单,因为凡是系统程序渲染出来的字体,那最后必然会落到一个字体文件上,只不过形式不一样。我们的目标就是找到这个字体文件,或者更寻常的,就是找到这个字体名字就行了。

1.1 网页上的 Web Font
有很多浏览器插件(比如 WhatFont)装上去之后就能点哪里看哪里,一下子就知道用的是啥字体了。当然因为所采用 web font 的提供商的技术不同,以及开发者自己的习惯,这里的名字其实是可以在 CSS 里随意写的,所以也有可能不一定准确(比如你可以看到在 Anyway.FM 的官网上,所用字体的第一个顺位是「Anyway Type」然而事实上这是我瞎写的),那还有个办法,就是利用浏览器的控制台,查看实际下载的那个字体文件的名字(一般是 WOFF、TTF 等格式)

第一次办知乎 Live

日期:2017 年 2 月 28 日理论 & 教程
言简意赅一点:我和 Leon 要第一次办知乎 Live 啦~

本期主题:转行做 UI 设计真适合你吗?
举办目的:为了赚钱,oh 不对,为了分享经验
适合人群:考虑想要转行过来做 UI 或者还没正式踏入设计师岗位的「年轻朋友们」
不适合人群 1:心理承受能力不强的朋友,因为我们不想光说鸡汤,我们也会泼冷水
不适合人群 2:已经成为设计师的你不是很推荐收听,我们理解你想赞助我台的心情,但我们讨论的更多的将是「转行过来做 UI」

活动时间:2017 年 3 月 14 日 晚上 9:00 到 11:00(对的,白色情人节)
详情 & 参与方式:前往知乎 Live

「后扁平化时代」的 i18n 和 L10n

日期:2016 年 7 月 29 日理论 & 教程
先解释一下 i18n 和 L10n,他们是 Internationalization 和 localization 两个词的缩写,中间的数字代表了省掉的英文字母数量,简单而粗俗地翻译过来,就是「国际化」和「本地化」,详细定义可以移步维基百科。这个话题源自昨晚我司的工作群里,视觉设计师 @钱腾童鞋发了下面这个 Airbnb 手机 App 的搜索界面截图:

图片载入中...


他坦言说这套设计实在是太素了,连性冷淡这个词都已经无法描述这个界面的惨白,简直「比交互稿还交互稿」。而且 Airbnb 新 App 的整套设计他都不太喜欢,跟 Apple Music 神似的大粗标题和「白兮兮」的视觉风格实在不是他的菜。事实上 Airbnb 这套新的设计应该在今年四月份就已经上线了,但是我之前都没有完整体验过,哪怕中间还订过一次房似乎也没注意到,所以一边跟大家讨论我一边试用了一下。抛开之后群里讨论这套设计到底是否好看不谈,我在对比了其中的一些界面之后突然意识到一件事儿:如今视觉风格越来越趋向于「突出内容而弱化 UI」,在需要做国际化和本地化 的时候,UI 设计师遇到的挑战非常严峻。
在第 10001 次收到私信来询问「应该选择哪个设计培训机构比较好?」之后,我决定写下这篇博文,表明一下我的立场。总结起来一句话:我真的不知道选哪个。因为我自己一家都没上过,也从来没深入其中担任过导师,所以究竟哪家质量好,哪家很坑我完全说不出个所以然来。

如果真要我推荐,厚道点我就问一圈朋友的意见然后告诉你答案,不厚道点我还是问一圈朋友看看有谁在做类似机构的,然后把你介绍给他/她(最后再拿个回扣)。不管是哪个结果其实对你都不是特别负责任,所以一般只好选择沉默。我给不出结果,只能给大家择校以外的其他一些意见:

1. UI 设计适合你吗?
首先,用知乎体来说就是「考虑上哪个之前先想好是不是要上」,就像 Leon 和我在 Anyway.FM  第三期里提到的,如今 UI 行业火爆,上个培训班就能从零基础开始加入这个看似「门槛低、收入不低」的行业,可现实真的是这样吗?门槛低意味着竞争也激烈,而且光鲜的背后有许许多多努力和辛酸是你看不到,当热潮和泡沫过去之后真的还有竞争力吗「人傻钱多速来」是可能在局部环境发生的,但永远不是社会的主流。

2. 比培养技能更重要的是培养兴趣
粗俗点说,所谓兴趣就是当你看了大量优秀 UI 作品之后觉得那些设计师都好屌,我特码也想做这样的东西,还要做得比他好,然后手开始痒了。手痒之后有没有能力、有没有努力实现目标是另外一回事儿,这就看每个人的道行了,但我始终相信只要你有兴趣,就能克服很多困难。所以在思考 UI 培训班的同时,大家可以多多熟悉这个行业,关注一下圈子里的牛人、优秀作品,同时也要全面了解以后的工作性质,要跟什么样的人打交道,从设计到产出的每个阶段所面临的困难。总之,如果入,请深入;如果爱,请深爱。

3. 真的要花这笔钱吗?
行业里的一些黑幕我也不想贴了,贴出来拉低行业水平,影响也不好,但现实情况是 UI 培训机构的确良莠不齐,所以我最后建议大家在花这个钱之前先在家自学一段时间,然后再寻找适合的机会去挑个学校,毕竟现在互联网上免费的资源获取已经极其极其极其容易了,如果你不知道怎么开始自学,那以后你很可能也很难进阶,还是早点放弃为好;如果你学了之后觉得没劲、无聊,那也早点放弃为好;如果你学了一段发觉自己颇适合做设计,完全能无师自通那也不必花冤枉钱了。我个人觉得只有当你自己真的对 UI 产生了兴趣,但因为种种原因始终学习不得法的时候可以去上个 UI 培训班。
Page 1 of 11       下一页 »
微博 知乎 Twitter Dribbble Behance Instagram LinkedIn Unsplash