分类
设计 技术分析

思源系列字体:技术价值高于艺术价值

2014 年,谷歌联合奥多比发布思源黑体的时候,掀起了汉文字体届的一场波澜;三年后,两大巨头发布衬线思源宋体。平面设计师从来没有体会过如此强烈的幸福感:思源系列字体是迄今为止唯一一款可以免费用于任何场合的“泛中日韩”字体。

广告
分类
设计 How-to 技术分析

思源宋体,如何评价,以及如何正确使用

2017 年 4 月 3 日,Adobe 联合 Google 发布了思源宋体。思源宋体是思源黑体的兄弟字体,同样支持繁简中文、日文、韩文四种语言,同样包含七种字重,同样使用 OFL 自由授权,并在 GitHub 上开源。我国的常州华文字厂也参与了字体设计。思源宋体遵循 GB 18030 和通用规范汉字表,包含 8105 个规范字。

分类
设计 学习 开发 技术分析

脑残安卓:状态栏

这是一系列介绍 Android 脑残特性的文章。Android 是一个满载先进科技的系统,同时也是一个充满碎片化、设计缺陷和执行缺陷的缺陷系统。

本篇文章针对 Android 对于状态栏的处理。

分类
看法 设计

那些设计很美的应用(多平台)

最近被一些事情触动了,想告诉更多人什么是真正设计美观的应用。被什么事情触动了?简而言之,是一个难看的官方应用。这个应用不只难看,而且他们的员工似乎还引以为豪,这就很难令人接受了。为了避免不必要的纠纷,我不指出这个应用的名字,各位看官请自行猜测。

一个设计优秀的的App应该包含哪些方面?这篇文章暂且不讨论“如何打造设计优秀的应用”,我们只谈谈什么样的应用可以称为“设计优秀”。


 

Pocket  (OS X)

Pocket(Mac)

Pocket是一款Read Later(稍后读)类应用,用于离线保存暂时没时间读的网页,并自动提取其中的内容重新排版。曾经Mac版本的Pocket又卡又难看,但自从随着Yosemite更新了扁平化设计之后,流畅度大幅提升——优秀的设计,最重要的一条就是运行流畅高速,不然再怎么漂亮都没用。Pocket是我认为替代Safari阅读列表的最佳App,免费,且好用。

相比起其他的稍后读类应用,Pocket提供的排版选项很少。字体就只有衬线和非衬线两种选择,相比起Instapaper那一长串字体,更少的选择意味着更容易的选择。在UI布局和设计上,Pocket首先严格遵循了Yosemite的设计准则,在此之上对布局进行了十分考究的设计。非要较真的话,按钮的设计不太符合Yosemite风格,不过反正Yosemite的按钮也很难看,不用就不用吧,大体上,它还是一个美观的扁平化应用。

Pocket官方支持Mac、iOS、Android和WebApp,Windows Phone上有第三方应用可以使用Pocket账号(Owl Reader),关于稍后读类应用的更多内容,可以参考我的这篇文章

下载链接:Mac App Store


 

Zune (Windows Desktop)

Zune (Windows)

如果我说我因为一个软件挺好用就买了它的配套硬件,有多少人信?实际上,在用过Zune这个软件之后,我陆陆续续买了三个Zune播放器,而这东西甚至都没有在中国正式销售过。Zune播放器上的UI是Metro UI(现在已更名为Modern Design)的早期原型,其风格在Zune HD上已经趋于成熟,在Windows Phone 7上达到巅峰,从Windows Phone 8开始衰退。随着Windows Phone 7生命周期的停止和Zune Pass服务的停止,Zune软件也永久停止了更新,但这不妨碍Zune软件成为Windows平台迄今为止最具有设计感的软件。我用Windows时间不短,的确没见过比Zune更好看的软件。一个都没有。如今的Windows平台软件十分乱,根本谈不上什么“设计语言”,甚至Windows本身都还没有给自己设计好一套漂亮的UI。这是一个设计语言崩塌的时代,Zune的谢幕可能是十年来UI领域最大的悲哀之一。

Music Collection

从Windows 8开始,微软全面引入Modern Design作为其旗下软件产品的主要设计语言,涵盖Windows、Windows Phone、Xbox、网站设计等。但是Modern Design始终没有一个明晰的设计纲领,大多数开发者都无法理解Modern Design的精髓,而只是认为用拍平的图标和大量的色块就对了,这种想法是天真的——不对,是偷懒的、应付差事的。这不能只怪开发者,微软也有连带责任,培训工作实在是不到位。

Zune诞生于2006年,奠定Metro UI基调的Zune HD诞生于2009年,那时候苹果还处于iPhone 3Gs时代,Android比现在还要糟糕,Zune以一己之力铺开了扁平化Swiss Design的发展道路,直角和极简的设计语言甚至与当时Windows 7所采用的Windows Aero设计语言都是相悖的。但即使放到现在来看,Zune播放器和Zune HD的UI设计依然不显得过时,这十分不容易。非对称设计,考究的字体,Edge to Edge的图片,简化但活泼的色彩,清晰明确的按钮形状……这些设计在Zune出现之前没有任何软件用过,之后嘛,看看苹果现在的界面你就懂了——苹果甚至都没有真正把扁平化做好看做精致。

是的,我后来再也没发现有哪个音乐播放器像Zune一样漂亮。但是微软抛弃了他。

这个负心汉。

下载链接:Microsoft Download Center


 

Microsoft Office (iOS Universal)

Microsoft Word(iPad)

在Mac版本的Office 2015发布之前,iPad版的Microsoft Office可能会一直是全平台最好看的Office。全新的用户界面融合了iOS7的清新设计和Ribbon UI的高效简洁,相比iOS iWork那难看的按钮和摸不清头脑的菜单结构,Office for iPad算是为他们上了一堂生动的课:生产力软件,保证最大的生产效率同时又不失美观,Office for iPad可能是独一家。为了避免功能冗余和繁杂,iPad Office团队从最开始就决定要从头设计整个UI,在保证Office文档样式完美保真的同时,实现最实用的功能和最简练的设计。iOS版本Office包含完整的Office四套件:Word、Excel、PowerPoint和OneNote,每个独立应用都有自己的主题色,这个主题色贯穿整个UI界面,而不是像iWork一样只是把那几个难看的按钮染成难看的主题色。相比起iPad上的UI,Office在iPhone上的UI就要逊色很多。小屏幕本来就不适合强生产力应用,有就已经很不错了。

OneNote和PowerPoint

对比其他第三方Office应用(WPS、QuickOffice之类),Microsoft Office不只格式保真最出色,而且运行效率最高。为了保证流畅运行,iOS版本Office在UI部分使用iOS CoreAnimation API,在文档内部使用微软AirSpace API,后者是第三方应用无法企及的。WPS为例,无论是拖动Excel表格还是播放PPT动画都十分卡顿,且后者还不支持PowerPoint 2013新增的切换动画。

不仅如此,iOS版本(同时兼容iPhone和iPad)的Microsoft Office还是一套免费应用:查看和大部分编辑功能免费提供,少部分高级功能需要Office 365订阅,一举成为所有移动平台最好用的Office版本,甚至比自家Windows Phone版本还要好很多。

下载链接:iTunes App Store:WordExcelPowerPoint


 

多看阅读 (iOS Universal)

多看阅读(iPad)

多看阅读现在归小米所有。排除小米这个因素,多看阅读是个很不错的阅读软件,支持格式丰富,排版差强人意,整合在线书城(不像Kindle),用iAP Touch ID就能买书,很方便。同账号多设备之间还可以同步进度。

为什么说它设计漂亮?多看在UI设计上融合了iOS 7和MIUI V5的设计语言。采用了iOS 7的控件和磨砂透明效果,但却没有拍得特别扁,在封面下方仍然使用了阴影效果来增加层次感;采用了MIUI V5开始使用的上下分离结构和一些按钮图案,但却没有使用大量的高光让效果很臃肿。完美诠释了“在听话的同时有自己的特色”。其实把UI设计好看很简单,第一条是听话,第二条就是加入自己的特色。什么叫听话?就是使用当前平台所倡导的设计规范。什么叫特色?那就多了去了。但特色不能喧宾夺主,首先,你得听话。如果多看阅读把MIUI V5的设计语言照搬过来,那么一定是一个烂应用。无论MIUI在小米手机上多么好看,出现在iOS上一定是不伦不类的。

在被小米收购之前,多看一直干不过iReader。我不清楚Android平台的战况,但是现在在iOS平台上,多看是最棒的阅读软件。这个棒不只在于漂亮的UI和排版,还在于更完整的生态。多看书城的成品书拥有量并不亚于亚马逊Kindle,同时在购买便利度上还要比后者好很多(Kindle不允许应用内购买,也不允许使用iOS亚马逊客户端购买,只能在网页上购买)。如果你喜欢看网络小说,多看恐怕会让你失望,但是如果是成品书,多看一定会令你满意。

下载链接:iTunes App Store


 

IMDb (iPad)

IMDb是干什么的?原则上来说,你可以在IMDb上找到关于电影的一切信息,但是到了我手里,IMDb就变成了找某一部电影里地某个演员还演过其他电影的什么角色的完美数据库。

把IMDb iOS客户端扔到一大堆iOS应用中可能并不出色,但是相比起IMDb那个凄惨的网站,其iOS客户端简直是西施般美丽。IMDb客户端的美并没有体现在UI多么优秀多么创新,而是在于对于大屏幕空间的充分利用。如果像我一样只是想找某一部电影里地某个演员还演过其他电影的什么角色,这一套操作在iOS客户端上进行要远比在官网上进行快速高效。iPad屏幕那么大,不分区使用怎么说得过去呢,是吧。

回到UI本身,还是那句话,IMDb是一个听话的好孩子。大体上遵循了iOS 7的设计准则,但是在布局上有所创新,使其更适应内容的形式。就这样打造出了一款漂亮又好用的应用。难吗?不难。但是也绝非易事。


 

ProCreate (iPad、iPhone 6 Plus)

ProCreate

ProCreate是第一批支持64位计算的iOS应用。自从iOS设备进入64位纪元开始,图形图像类应用如雨后春笋般出现。ProCreate是经典老牌专业绘图应用,Autodesk这位图像领域大佬也推出了一系列(得有几十个)图形类应用,甚至泰斗Adobe都把Lightroom放到了iOS平台,更不要提最近随着iPad Air 2冒出来的后起之秀Pixelmator,大有超越前辈的意思。

对于小公司来说,最大的优势就是随机应变的能力。大公司的一个改变往往涉及到很多层的决策和审批,小公司嘛,一起吃一顿小火锅或许就把决定做了。所以ProCreate可以第一时间支持64位,可以第一时间更换全新的设计语言。

ProCreate就是这样的一个小公司开发的小应用,功能强大,想法新颖,UI设计十分独到但又不喧宾夺主,暗色调的主题可以让用户更加专注于内容本身而非UI。

ProCreate还支持iOS平台上几乎所有的触控笔,其画笔系统可谓创新十足。如果真的有美术天赋,喜欢随时随地创作,这40块钱花得绝对不亏。

下载地址:iTunes App Store


 

墨客 (iPhone)

墨客 (iPhone)

墨客是iPhone上最棒的第三方微博客户端,没有之一。

墨客有什么特色吗?没有。UI上有什么抓人眼球的设计吗?也没有。有什么别的客户端都没有的功能吗?也没有。那为什么墨客是最好的微博客户端呢?

听话。

墨客非常听话,UI上严格遵循iOS设计准则,运行高度流畅(从来没卡过),操作反馈清晰明确,字体美观优雅,排版精致简洁,操作直观易用……墨客很听话,所以很好用。VVebo是墨客一直以来的争论对象,因为VVebo的开发者从来不听话,想怎么开发就怎么开发,导致用户上手难度高,学习成本高,UI乱七八糟,调用一堆私有API今天封一个明天封一个,结果还奇卡。

有的时候,兢兢业业、踏踏实实做事,是挺不容易的。但是这样谨慎扎实地却最容易把事情做漂亮。虽说墨客有些小贵(18块),但是这些钱能让你一直舒舒服服地刷微博,绝对也值了。

下载链接:iTunes App Store


 

微信 (iOS Universal、Android)

微信 (iPhone)

比起QQ这个不争气的正房,微信在各平台的表现都像是个各方面都很优秀但却怎么也顶替不了原配的小三。

QQ iPhone版的UI随着iOS7的发布换了风格,按照iOS7的标准设计,这没什么问题。但是Android版本的QQ却长得和iPhone版一模一样,甚至连弹窗都是iPhone的样式,这就不对了。但是微信不一样,微信在每个平台都是个听话的好孩子:iPhone上就是iPhone的扁平风格,Android上就是Android的Holo风格,Windows Phone……算了不提也罢。总之对于微信用户来说,上手的难度是很低的,因为微信的设计和其他的大部分应用都一样,布局还是那个布局,按键还是那些按键,这其实是好事。微信这个东西其功能性极其强大,已经不需要一个惹人眼球的UI来标新立异了。就算它设计得并不出众也还是会有很多人下载使用——那还有什么必要弄得花里胡哨呢?简单易用就是最好的。

下载链接:iTunes App StoreGoogle Play


 

Google地图 (iOS Universal、Android)

Google Maps (iPad)

新版iOS Google地图采用了Material Design,彻底重新设计了UI和交互方式,美观度大幅提升。

从Android 5.0开始,Google引入了一套全新的设计语言,叫做Material Design,官方翻译为“质感设计”。在仔细研读了Material Design的设计指南之后,感触很深。

Material Design的发布可谓是补上了最后一块砖,至此,苹果、微软、Google三巨头都有了自己新潮且成熟的设计语言。但是三家各自的设计语言的大方向却出奇的一致:易用优先。无论是Modern Design还是我们况且称之为Apple Design的苹果新设计语言还是后起之秀Material Design,他们的目的都是“利用UI来帮助用户更好地完成任务”。其中Modern Design最激进,Material Design最保守。孰优孰劣?谈不上,但都是好设计。

Material Design最晚出现,可谓是融合了两位前辈的优点。它借鉴了Apple Design的显眼色彩,也借鉴了Modern Design的“世界级动画”。采用这套设计语言的应用无论是放到iOS上还是Android上运行都不显得突兀和另类,相反,美观度甚至还优于iOS一些内置应用(比如又丑又难用的音乐应用)。但是Material Design也有自己执着的地方:iOS和Windows Phone都删掉了高光和阴影,前者甚至还弱化了操作反馈(很不应该),Material Design却大谈阴影的重要性,Android 5.0中甚至还专门准备了一套动态阴影API来实现复杂阴影效果。

现如今Apple还没有摸清楚自己的设计语言发展方向,微软设计团队成员的离职也导致了Modern Design的大幅度衰落,或许Android就能凭借一己之力屌丝逆袭翻身上位?不好说,有可能。

具体到Google地图这个应用本身,除了运行不太流畅,其他地方还真是没什么可挑剔的了。

下载连接:iTunes App StoreGoogle Play


 

结语

Good artists copy, great artists steal.

乔老爷子的这句话被很多人熟知,但更多的人却误会了他的意思。比如魅族和小米,这两个好兄弟现在都在拼命地抄袭苹果,还反过来骂对方无耻,说自己注重设计。

这句话什么意思?当你拿出一个优秀的设计时,没有人会在乎你是从哪里借鉴了什么。但当你拿出一个赝品还美其名曰跟随潮流时,那就只有被骂一条出路。

这篇文章并没有把所有设计优秀的应用都列出来,毕竟精力有限,我只是选了几个典型的例子。接下来我还会写一篇文章,关于那些很出名但是很烂的应用,也顺便回答最开头的那个问题:究竟是哪个应用惹恼了我,让我写这样一篇四千余字的文章。

 

分类
设计 开发

思源黑体:开源无衬线中文字体

2014年7月15号,Adobe联合Google发布针对亚洲文字开发的新一代无衬线开源字体:思源黑体。该字体被Adobe归到Source Sans字体家族免费提供给所有Typekit用户,并在其官方博客上给出了GitHub源代码和独立下载源;Google将思源黑体归到Noto pan-Unicode字体家族中,取名为Noto Sans CJK,这一套字体也强有力地扩充了Noto的宽容度,让“No Tofu”的愿景向前迈了一大步。

思源黑体 这一字体家族有七种字体粗细,完全支持日文、韩文、繁体中文和简体中文,这些全部都包含在一种字体中。它还包括来自我们颇受欢迎的 Source Sans字体家族的拉丁文、希腊文和西里尔文字形。总的来说,字体家族里的每种字体粗细总共有 65,535个字形(OpenType 格式支持的最大上限),而整个字体家族的字形个数接近50万。这个字体家族是通过开源方式提供的,数量、开发规模和价值之大堪称史上之最,这使它成为需要支持多种语言的字体的设计人员、开发人员和普通用户的零成本解决方案。

该字体设计之初的原则便是兼容以中文为源的亚洲文字,兼顾印刷效果和点阵屏幕显示效果。该字体史无前例地为各国字体提供了7个级别的字重(参考标题图),不但让纸质印刷品有了更细腻的排版选择,也让网页设计有了更丰富的效果。因此我强烈推荐用户安装该字体,也希望该字体被纳入下一代主流操作系统作为候选。

字体测试

思源黑体包括四个语言:简体中文、繁体中文、日文和韩文。这四个语言的共同根源为繁体中文,拥有大量共通字符。但是随着时间的推进和文化的演进,同一字符在各国的书写方式中产生了不同的变体。思源黑体很好地解决了变体问题,在提供最大兼容的同时,显示各国文字时都能显得舒服。

如何获得思源黑体

Adobe

Adobe Typekit任何级别的订户(包括免费的“Trial”级别)都可以将思源黑体添加到自己的字体库中并与所有的PC/Mac进行同步。

Source Han Sans字体单独下载链接(via SourceForge):简体中文|繁体中文|日文|韩文|全语言OTC|全语言OTF

Google

Noto字体官方网站:Google Noto Fonts(墙外)

Noto Sans CJK字体单独下载链接(Google Project Hosting):全语言(墙外)

Noto完整字体家族下载链接(百度云):全语言

注:如果仅需要一种语言的思源黑体则建议单独下载;OTC包含四种独立字体,需要各自独立安装;OTF将所有字体集成在一个文件内,但是需要软件来声明具体所用到的语言,若未声明,则默认使用日文字形。个人并不推荐下载OTF格式字体,实测在Windows 8.1 Update 2和OS X 10.9上都出现了兼容性问题。

注2:Noto Sans CJK版本或Source Han Sans版本的两中思源黑体没有任何区别,包括其英文部分。二者在系统中显示的名称为各自的英文名称,而不是“思源黑体”,这会造成一定兼容性问题。例如一方在Word文件中定义字体为“Noto Sans CJK”的思源黑体,而在另一方的电脑里只安装了“Source Han Sans”的版本,那么程序依然会以找不到字体为由回滚对应内容到宋体。

如何评价这个字体?

思源黑体和苹果苹方极其相似,比微软雅黑字面更小,分辨率高时更好看。要说包容性,微软雅黑也支持中日韩三国文字,只是没有7种级别的粗细。在非Retina屏幕上,微软雅黑的观感最好;在Retina屏幕上,微软雅黑会过于厚重,苹果丽黑效果会更清秀美观。

不过既然免费了,也就不要要求太多了。