今晚在 Apple 全新的办公场地,新一代(好吧,应该是两代)的 iPhone 就要发布了,但请允许我们在此良辰之际调转时间的箭头,回顾一下从上世纪末期开始的搞「机」历史,作为数码产品把玩达人,Leon 将展开为期若干辑的回顾,感慨科学技术发展迅速的同时也能发现很多「轮回」一般的变化。

哦,对了,今晚「极」有可能是我台第一次进行「完整」的直播,9 月 12 日晚上 12 点,我们在陌陌和你不见不散~ 陌陌号是 8214769
前一阵收到很多朋友的询问,Sketch 打开包含了 Apple 默认中文字体「苹方」的文档的时候,会有 bug。比如提示「找不到系统字体」或者在操作的时候字体选择框直接置灰无法选择,比如这样:

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

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

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

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

AW #46: 杜老板 @ Dine

9 月 11 日 • 2017Anyway.FM
Dine 是一个合伙人制的专注品牌和产品设计的……我写不下去了……嘉宾给的稿子太严肃了,在主播眼里 Dine 是一家挺特别的(超)小型设计工作室,他们的客户量不多也未必名气多响但作品都带给人小而美的精致感、在执行落地上也算拿的出手,同时在沟通、协作、产出、展示等一整套工作流里,他们对工具的选用几乎有点儿洁癖。

趁着人都在北京,JJ 和 Leon 与杜潇一起进行了一场「有的没的」的闲谈,从移动时代开端时的那些 App 聊到远程协作和设计工具,最后又回到了生活……不知道他的经历和体验是不是会让你对「开一个工作室」有了全新的认识?
陆陆续续做做停停修修补补改改弄弄了好久终于写出了第一个(其实简单得像个 Hello World 样板一样)Chrome 插件 Anyway.Tab。顾名思义,这个插件非常简单,就是在 Chrome 浏览器的新建标签页中显示我台过往节目和 shownotes 中推荐的内容以及推送新番提示。

图片载入中...

Anyway.Meetup 深圳站

8 月 3 日 • 2017网摘分享
经过漫长的筹备(因为我和 Leon 懒)Anyway.FM 线下聚会深圳站终于登场啦~ 我台的这第三次线下活动定在 8 月 19 日,在深圳南山区和大家一起聚一聚~ 细节如下:


1. 活动内容
  • 主题分享《Anyway,我们快两岁了》
  • 现场特别节目录制
  • 嘉宾主题沙龙

AW #44: 各种图片格式们

7 月 20 日 • 2017Anyway.FM
咳咳,这是被拖更了一周的一期节目,这也是我们使用全新录音设备完整录制的一期节目,姗姗来迟,骚瑞。

---------文风一转的分割线---------
(其实就是换了主播来写)


PNG、GIF、JPG、这些格式和名词大家几乎每天都要接触,但是里面的细节并不一定每个人都了解,有时候也会给工作带来不少麻烦,进入新时代之后,icon font、SVG、PDF 等等更多的新面孔也增加了我们的学习成本,这里面的坑,也是值得聊上一期的……
这是前一阵来自知乎的一个问题「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
Page 1 of 158       下一页 »