前端最佳实践:字体

字体单位

px 依旧是最全面的选择,尤其是重交互的网站:

  1. 能够做到设计稿的像素级还原。
  2. 用户体验统一,变量少,可控。
  3. 方便配合 JS 动态计算布局,JS 接口通常只能获取像素为单位的尺寸和位置。
  4. icon,图片和 border 通常都是使用像素尺寸,字体采用像素单位更容易配合。

rem 在文字内容型网站上更加灵活,适合新闻,博客等:

  1. 自适应不同设备,不同用户偏好,获得最佳阅读体验。
  2. 无需手写繁复的 media query。

有些创意内容网站使用 vw 尺寸系统,字体和图片总是同窗口比例缩放,以实现类似海报布局的整体感,但也仅限于这一类型的网站。

em 和 % 会用在局部使用,但存在嵌套后尺寸不容易控制的问题,极少在项目中大范围使用。

pt 是印刷常用单位,不适合现如今的 Web 环境,且和 px 对应关系复杂,应该避免。

正文字体大小

12px 是 Chrome 浏览器默认支持显示的最小字体。即使 CSS 设置了 9px,最终用户看到的仍然是 12px 字体。因此在设计中使用小于 12px 的字体是一个严重的错误。12px 的英文字体可读性尚可,但是中文可读性比较差。建议作为次要文本字体的尺寸。

13px 是信息密度较高,中文可读性尚可的选择。比如 Facebook 和百度用的就是 13px。

14px 是信息密度和中文可读性的一个比较好的平衡点,适合界面复杂且空间比较紧张的网站的正文字体大小。比如

16px 是大部分浏览器的默认字体大小,可读性好,但是信息密度不高,适合一般网站。

18px 以上通常只有在创意营销网站上才会作为正文字体大小使用。

一个比较通用的策略是:

  • 12px:次要文字,页脚链接,标签分类,面包屑,输入框提示,小按钮,小输入框
  • 14px:普通文字,正文,输入框,按钮
  • 16px:突出文字,卡片标题,大按钮,搜索栏

标题层级字体大小

HTML 支持 H1 到 H6 共六级标题。但实际应用中,我们应当控制标题的层级数量,层级越多,使用体验会越差。

功能为主的网站对标题依赖比较小,更多是靠 Card 和 Tab 等容器进行界面层级管理。

内容型网站对标题层级的需求会更高一些,但也尽量不超过三级。

H1 字体大小取决于网站类型对信息密度的要求。以功能为主的系统通常 H1 会比较小,不会超过 40px。

H1, H2, H3 之间应当有 30% 左右的递减,视觉上差异才够显著。比如:

  • H1, 36px:页面标题
  • H2, 24px:章节标题
  • H3, 16px:子章节标题,卡片标题,弹窗标题

字重

最早字体只支持两种字重,正常(normal, 400)和粗体(bold, 700)。现代 Web 字体的字重支持 100 到 900 等 9 种字重,100 最细,900 最粗。但是系统字体支持的字重数量通常较少。

Windows 默认中文字体“雅黑”支持 300, 400 和 700 三种字重。macOS 和 iOS 默认中文字体“苹方”支持 100/200/300/400/500/600 六种字重(苹果更喜欢使用较细的字体设计)。也就是说“苹方”的粗体,会比“雅黑”要细一些。Android 系统默认字体 Noto Sans CJK 支持 200/300/400/500/700/900 六种字重,最为全面。部分 Android 系统,比如魅族 Flyme 和小米 MIUI,甚至搞出了字重的无极调节。

由于中文字体体量巨大,通常网站不会加载远端中文字体,而是使用系统字体。因此,在使用字重的时候,就需要考虑系统字体的字重支持。综合主流操作系统,得出兼容性最好的字重集合:细体 300,正常 400,粗体 700/600

一周的进展

本周做了 Santakani 网站首页的改版。

对比旧版,新版将首页/设计/设计师三个列表页面合并为全新的首页。导航栏因此得到简化,只有 Design,Map 和 Story 三个选项。首页顶部采用了一种浅色有机纹理,取代了滚动的图片。文字也大大简化,更注重表达简介明了的含义,无需深度阅读。列表我最终还是决定用设计师作为主体,一行照片,一行产品。希望每个设计师的设计风格得以表达,而不是被散落在随机的产品列表中。图片采用了类似 500px 的等高填充布局,让横版和竖版的照片都能完美呈现,只做微小裁剪。

本周做的另一个项目是 openSUSE 的新网站主题。

试用了 Bootstrap 4 Alpha 6 版。虽然还有很多小缺陷,但整体上非常棒。使用 Bootstrap 自身的 Utility 类就能调节各种布局,大大减少了自己写 CSS 的工作量。

在 Google+ 上分享这个 Demo 之后得到了很多好评,感觉动力满满。

另外参考 KDE 的翻译项目,给 openSUSE 的文档项目添加了 XML ↔ PO 转换功能,这样就可以利用 Weblate 网站翻译文档。

毕业设计艰难进行!做了一次范围更大的问卷调查,参与调查的女性 100%,好像很不科学的样子。或许就像老师曾说的,女性更热衷于参与和奉献。

Couple

最近读了很多芬兰独立设计师的故事。有些人因为设计而一起工作,相恋,结为伴侣。夫妻经营设计作坊真是令人羡慕。有时间的自由,可以在一起工作,又不会乏味,志趣相投,互相理解欣赏。在平实的生活里发现点点滴滴的趣味。

或许这只是局外人的想象吧。

遇见几个人

中午在学校食堂吃饭,遇到了土耳其同学 Orcum 。他原来是和我一个班,现在转去 Product Design 了。和身边那些标准 Service Designer 不一样,他总是很一针见血地批判 Service,Experience 和 Strategy 什么的。

产品设计,创造力和原材料来源于设计师自身。设计师对自己的设计负责,没有既定流程和方案,每一步都能直接看到设计的结果。好就是好,不好也藏不住。每时每刻都在修正,再试。他们遇到的 Negative 可能比 Positive 更多。对结果不满意,就是自己的失败。因为那设计,都是从你的灵魂里诞生出来的。

服务设计,有好多方法。数据从用户那里来,从企业那里来,从环境那里来,你是采集者。靠数据做设计,那更像是计算。大家歌颂创造,粉饰前景。一直相信自己在做绝佳设计,因为看不到它。严肃的艺术家,与空气雕塑。当设计完成,它被交给其他人,其他部分。它已经不是你的孩子了。

遇上不认识的学妹,问我的名字。她说认识我,从网上读到了我的博客。

在汉堡王吃大份汉堡。有个老婆婆背着很多垃圾袋,颤颤地走过去了。我们学的设计,对他们来说,什么用也没有。设计不能改变世界,它只能让幸福的人更加幸福一点,然后对不幸的人,一声抱歉。

十月四日,赫尔辛基动物园免费开放。

发热,洗脑,设计,论文

我真是太爱 Kebab 了。下午,晒着明媚的阳光,吃着 Kebab ,喝着可乐,看着火车。好像是有点奇怪,不过很享受。

IMG_20160530_141239

忽然之间,整个世界都充满了《禁忌的边界线》。被洗脑的我茫然无措。

接着开始了发热的症状,没有头疼咽痛,也没有拉肚子,就是迷迷糊糊的。坐立不安,无法集中注意力。

在发热的这两天,我把这个博客重新设计了一下。用了些小心思,比如主色用了天依蓝

screenshot

评论框平时会隐藏多余的项目,当点击文本框开始输入的时候,才会展开全部。

2016-06-01 23.02.24
点击文本框之前

2016-06-01 23.03.00
点击文本框之后

看在这用心的份儿上,请读者们多多评论!

终于要开始我的硕士论文了。今天看了看往届学生的毕业论文,有不少都是选了一个很大的题目,得出了一个很小的成果。不想麻烦的我,要如何选择呢。

人类之科学技术,人力物力,皆为有限,当善用之。

色情界的一颗新星(伪)

周一完成了我的 Porn Button 。最开始的设计是比较隐晦的,但老师说不够直接不够大胆,于是最后的设计就比较淫秽了……题目要求是只能依靠触觉反馈,而不能有视觉和听觉传达。充分体现了以往看过的小黄漫中的精髓,简而言之就是还原性行为。

通过压力传感器采集手指按压的动作,电机拉动皮筋和半个气球使之收缩。本来想用一只避孕套的,然而其强度太差,玩不了几次就坏了。最基本的反射是按压的力气越大,收缩越剧烈。松开手指,收缩也会复位。然而这样一点也不智能也不色情乎。微控制器还会计算按压频率,频率升高也会使收缩更剧烈。有点类似生物的反应了。最后还有,如果玩过头就会触发崩坏——整个机器停止工作,需要二十秒冷却时间。(心领神会即可)

IMG_20160124_151045

最开始想做成这样的盒子。

IMG_20160124_162344

然而最后必须要用一个木头盒子把内容完全封闭起来,让人看不到里面,以隔绝触觉之外的感官。

IMG_20160125_144811

盒子上不会标记这个 Button 的主题,因此体验者需要自己体会联想其中含义。但每个盒子有个字母标签方便评分,老师说必须要把“H”留给我……

IMG_20160126_104712

周一的时候已经给我的一些同学玩过了,都觉得确实是那个意思……嗯。周二展示的时候也获得了强烈反响,相比其他主题这个真是太特殊了。男生比较喜欢,女生的态度则褒贬不一。很多人告诉我她们对我有了新的认识……But, I don't care!

IMG_20160126_110343

志愿者模式和激励设计

我的硕士毕业设计题目是免费的互助共享社群,群体范围限定在阿尔托大学 Otaniemi 的学生村里。租借,共享,共享消费之类点子很多人已经做过了。这个项目的特别之处在于没有资金流动:借得东西,获取帮助的人不需要付费;借出东西,给予帮助的人也不会得到物质回报。当然,也没有押金。

不需要付费会更加方便,也更经济。但是会带来两个严峻问题:

  1. 在没有租金和押金的情况下,陌生人之间如何信任?物品的价值如何影响人们的选择要不要信任他人?信任建立的过程中,有哪些有趣的互动?
  2. 人们不仅要贡献自己的所有物,还要贡献宝贵的时间。在没有物质回报的情况下,如何激励人们持续贡献,如何给予他们精神回报和满足感?

第一个问题似乎比较容易用实验的方法得到结论,因为我们已经知道在一些案例中,陌生人是可以建立信任的,这就是 Airbnb 的核心理念之一。

第二个问题就难了。 继续阅读 →

中国当代设计展(赫尔辛基)

来本次展览就是好奇在这样一个小博物馆的小展厅里会选哪些东西代表中国当代设计。其实我对中国设计也不了解,正好同班同学在此作解说,我就来补习一下。

此次展出只有五十件/套展品,大物件少,小物件多。名为「造·化—中国设计」(Artifact Beyond – Design in China Now)。

来的时候有点晚,第一部分和第二部分的讲解都错过了。转过头来手机就没电了,照片没拍成。参考此处

进门的时候就有一个很长的桌子,人们席地而坐,欣赏茶具和茶艺。这一部分确实很中国,又能看出融合了现代工艺和古法的构思。

这一堆椅子,错落的结构很有意思。但单个椅子就禁不起推敲了,好像太过简洁了,没什么趣味。

2015-09-29 18.17.41

这扇子画得还是蛮用心的。

2015-09-29 18.18.03

这扇子我家也有,好像从古到今没啥变化。

2015-09-29 18.18.32

这两把扇子的每一片木条分别是北京或上海的一座高层建筑物。不过这放淘宝也就五块钱一把。

2015-09-29 18.18.48

这块竹子很厉害,单片竹子热处理展平,不用胶水拼接。工艺自然形成的类似流水一样起伏的表面也很有意思。大巧不工,赞。

2015-09-29 18.19.32

这一盘让我想起老妈做的烧卖。学姐做的包子也是开口的,嗯。

2015-09-29 18.20.00

海报上的就是这个,画得很粗糙,有点杀马特了。

2015-09-29 18.20.52

这个凳子工艺很高超,每一片竹子都要弯不同形状。

2015-09-29 18.21.17

这把椅子看见很多次了,确实不错。坐在上面,无聊了还可以撕纸玩。

2015-09-29 18.21.31

到此处手机没电了,后面就没有照片了。

吐槽一下大疆无人机,在这个展览里唯一一个完全不能体现中国设计的东西。或许应该放到中国科技展,中国制造展上吧。

专访高桥智隆

机器人设计师高桥智隆和他的机器人。
机器人设计师高桥智隆和他的机器人。

日本的工业机器人科技可谓全球称冠。但是高桥智隆–这位在机器人开发领域正受到世界瞩目的创作者–却预言道今后诞生的机器人将不再只用于军事或工业等的技术型机器人,而是会出现不断创造“新文化”的机器人。对,就像大家熟悉的“铁臂阿童木”一样,这些机器人将成为我们的朋友,时刻陪伴在我们的日常生活中。

请问您当初为什么会选择创作机器人这份工作?

我自小就非常喜爱制作。小的时候是搞各种手工制作,上了大学后便自己制作了钓鱼卷线盘。当时甚至以此找一家开发钓鱼器材的公司工作。但塞翁失马焉知祸 福,第一志愿的厂家没录用我,我便决定重新考大学。入学后开始集中创作机器人。当时创作机器人被看作是创作的顶峰。那时的机器人因为都是供研究使用的,所 以都硬生生的,没有什么人味儿,在普通人眼里就像是一堆废铜烂铁而已。于是我便开始考虑按照自己的喜好,制作帅气可爱的机器人。

听说您的代表作品“Chroino”在美国也受到了高度评价。

以往的双足步行机器人都只能弯着膝盖往前走。这种走路方式总让人觉得别扭,好像“扭伤了腰的人”一样。而“Chroino”采用了名为“SHIN-Walk”的技术,走路时可以伸直双膝。
这种走路方式以及具有亲和力的造型获得了美国《时代周刊》和《科技新时代》的高度评价。这两点也是我本人非常坚持的地方,因为我觉得机器人的制作需要有某种恰到好处的平衡感。虽然是机器但是又有人味儿;虽然造型很酷但是又让人觉得可爱……就像这种感觉吧。我在制作过程中始终很在意这种平衡感觉。

据说在各地的演讲会上,您制作的机器人都大受好评。

我认为在不久的将来就会迎来机器人普及的时代,大概每家一台或者一人一台这个样子吧。那时候主要的购买层可能会是现在的孩子或学生。我现在向他们展示机器人的造型或概念,就有可能是在为将来培养更多的消费者。
在日本或美国开演讲会,常常会变成一种技术评论会,而到印度或巴西等国去进行演讲,会场气氛则会异常活泼热烈。从这种意思上讲,越是没有成见,越是容易接受机器人的娱乐性质。

您是说将机器人和娱乐联系在一起……

对,就是那种让生活轻松愉快的娱乐。在日本开发机器人,总是免不了落入“家电产品”的思考范畴,比如说“消费者能接受的价位是多少?”,“消费者希望机器人能帮着做什么家务?”
我希望我开发的机器人就好像家庭影院或者高档音响那样,成为拥有大量梦想和憧憬等要素的娱乐工具。销售场所也不是家电批发店,而是向LEXUS轿车经销店那样让人充满期待的高档场所。
拿 电脑和手机来说,它们的价格或者功能等要素都是开发以后才附加上去的,真正推动它们得到普及的应该还是众多消费者的期待,大家都认为“如果有了电脑或手 机,我就能做很多有趣的事情”。而电脑和手机一旦得到普及,电子邮件、网聊和网购等新的文化也应运而生。同样,如果无法创造崭新的生活方式,机器人也不会 得到普及,不会给人们带来新的梦想。正因为如此,我在制作机器人时格外注重流行造型。

看来不光是技术和功能,造型也是机器人非常重要的一个要素。

造型不好的工业产品其大多数性能也不好。如果在设计上下足了功夫,自然就不会忽略造型。造型不好的产品大多都是因为设计马虎的缘故。我非常在意自己产品的造型,而且对作品的展示方式也非常注重。
世界各地有很多科学馆邀请我去展示机器人,对此我当然非常高兴,但其实我很想展示的场所是像现代美术馆之类的地方。
现在在演示机器人时经常会一边解说一边演示,比如“是这个计算机操纵着每一个发动系统……”之类的,我希望能换种方式,比如说配合舞蹈表演,搞一些吸引人的演示方式。

最后请问现在的工作让您觉得很有意义的地方是哪里?

应该说是能够获取各种信息吧。不仅在机器人方面总有新的策划进来,还经常能遇见企业家或音乐人等不同领域各具风格的人物。各种信息汇聚碰撞便能诞生出许多新鲜有趣的点子,预示出一个又一个新的可能性。

左 / Chroino 右 / FT (Female Type)
左 / Chroino 右 / FT (Female Type)

“Chroino”入选美国《时代周刊》评选的“100件最酷的发明”。对以往机器人的大胆革新让“SHIN-Walk”获得了更接近人类的 行动方式。在其基础上进一步开发出四肢活动更为柔软的“FT(Female Type)”。她不仅会走猫步,声色也富有变化,富有更多女性魅力。

新风格

P30101-174900