揾份工仲难过揾老公

今天(10.30)决定正式走网易的 Offer 流程,原因是不想呆在家里。毕业之后的秋招结束了

作为 2019 届往届毕业生,回来之后才发现国内「应届毕业生」资格应为入职前一年的大四生。落后了一年的 2020 届秋季校园招聘,如词云「揾份工仲难过揾老公」。

作品集给自己的定位是「跨领域交互设计师」,面试自我介绍也说「自己是掌握视觉设计、交互设计与开发的『全栈』设计师」,初入社会被用人单位筛选,简历改了五六次,除了被社会毒打之外也增进了自我认识与对业务能力的掌握,纸上得来终觉浅。

四个月下来收获两家「大厂」Offer,拿到了大一皮薪水(以 Offer 时间排序):

  • 网易互娱——用户体验中心 交互设计师(广州),游戏;
  • 金蝶——用户体验部 交互开发(深圳),to B XaaS 与云服务。

焦虑的投递与等待

找工作要有备而来,老老实实从 UI 到前端写了一个上线的作品集。参考了 Bestfolios 上藤校 HCI 学生们的写法,自认为应该比很多同龄人要强上一点。(后来发现并不是如此,笑。)

拉勾网上的中小企业、创业公司基本上只是把职位挂出来,不知道是不是要诚心招人。且拉勾作为互联网企业,为了流量制造求职者焦虑的原罪也很明显。九月份大型互联网公司开始申请,也七七八八投了很多简历,可能碍于毕业时间,收获无声卡居多。

今年设计岗位普遍缩招,大部分公司的岗位需求保持在 3—7 人区间,使得面试筛选难度更上一档。

面试总结

八九月基本没有消息,十月份才开始慢慢有动静。后来得知设计岗位基本都在技术岗位、行政岗位招聘完成后进行,以下面试顺序以收到面试的先后顺序排序。

原则性面试经验

学生思维未去除,尚显天真。认为只要硬实力达标应该不会不会有什么问题,面试后才发现:

作品集与笔试只是用人单位初筛的依据,交互设计师又是更为仰赖沟通交流等软实力的职位,重点还是面试时表达。之前很多人说我面试不是问题,但实际面对面和面试官聊的时候又是另一回事。

  • 交互设计师要时刻谨记「以用户为中心」的思维——面试之前聊业务聊得不错,后面面试官出随机考察题的时候信口开河,失败。
  • 放松了,把该聊的东西聊到了,感觉就八九不离十了——刚开始面试的时候不知道怎么把作品集里的思路方法用有逻辑的方式传达出来,也难免会紧张。
  • 自我介绍——停留在学生思维,没有好好阐述出思维能力,以及对专业业务的看法,仅仅停留在最终的结果上。
  • 自我剖析——我到底是一个怎样的设计师?能力在哪?能为岗位带来什么价值?

以下面试按面试时间排序:

某用户体验外包公司 A

交互设计师(社招)

投递渠道:拉勾网
面试方式:办公室现场面试
任职地点:深圳
面试时间:8月中

总公司位于北京的外包解决方案公司,深圳分公司全职负责某大型股份制银行 toB 投资业务。

所谓「越级打怪」,去了才知道他们要两到三年的熟练工。第一次面试加岗位要求,加上面试官一直不知道穷追猛打方法论(不知道是不是看我刚毕业所以想劝退?),按 UX 设计基本流程答了几分钟直接插话,当作积累经验了。

第一次面对这种穷追猛打的面试官,倒是知道以后如何应对。

百度

交互设计师(校招)

投递渠道:官方网站
面试方式:酒店客房现场面试
任职地点:深圳
面试时间:8月底

我第一家「大厂」面试。

个人比较喜欢直接用面试题进行初筛的公司:三道题任选其一,包含输入法、硬件交互、泛娱乐三种类型,我选择了硬件交互(为触控板电梯设计用户界面),做自己顺手的东西还是比较轻松,也觉得有很大把握。

通过面试题后约面,在酒店大堂 Check-in 后等候唱名,看到 PM 同学们被一批一批带到商务中心里群面,觉得交互岗位能够逃过此劫非常幸运。

面试官分男女两人,男为设计师,女为 HR。自我介绍后询问简历和作品集,介绍后针对项目进行发问与挑战,设计师挑战专业问题中如确实有疏漏大方承认并请教即可,非常顺利,也听到 HR 频频点头。比较有考点的题目为「你是如何完成实习项目中用户测试的?你的测试样本是否过少?」与「你比较想从事什么类型的交互,为什么?(选择 to B 后)是否无法接受泛娱乐交互?」。

当场题如下:

  • 如何估算周五下午广州大学城人数
  • 如何在衣柜中为衬衫分类

没有面试经验忘了把上文中原则性问题记在心里,加上前面太过顺利,有些信口开河,一面被淘汰。

网易互娱

游戏交互设计师(校招)

投递渠道:官方网站
面试方式:远程面试
任职地点:广州
面试时间:九月中

面完百度还没有回深圳面试题邮件就发过来了。不得不说网易的面试题「又臭又长」,非常考验设计师的综合能力——完成一整套游戏交互方案。百度大为轻松的题目限时七天,网易仅限时五天。做到最好心力憔悴,但还是入选面试了。

一面:两位男设计师。因为是游戏交互设计师所以没怎么问与游戏设计无关的经历,问了游戏经历和知道我是 RTS Hardcore 玩家后问了下如何处理 RTS 高度复杂、系统化的游戏场景内如何交互(当初是举例星际争霸 1 到星际争霸 2 的玩家最多框选单位数变化与游戏体验、玩家认知成本的目标与转变。)

二面:一面当晚反馈结果,过了一周后发起二面。男设计总监与女 HR。总监直接说你的作品集是我筛的,因此也有了不少把握(对自己的作品集有绝对的信心);后根据作品集的描述详细介绍了 AR 交互设计的难点与交互逻辑、视觉 Feedback 与 SLAM 开发的解决方案。HR 考察了设计师的综合知识面,问了一些前沿技术对游戏玩法的影响。最后 HR 问期望薪资和一些行政手续上的问题我就觉得应该有点靠谱了。

怕捞不到报了个比批发价还低的价钱,焦急的等待后收到 Offer Letter,打开是超乎期望的薪资。

某用户体验外包公司 B

交互设计师(社招)

投递渠道:师长推荐
面试方式:办公室现场面试
任职地点:深圳
面试时间:九月底

办公室氛围很好,和总监聊项目聊作品,还拍了一下他们企业文化/类型的马屁,最后直接说 Wireframe 画得不够好,头一次见到这种理由,感觉没空余岗位人可能是碍于面子走个过场。

金蝶

交互开发(社招)

投递渠道:师长推荐
面试方式:办公室现场面试
任职地点:深圳
面试时间:九月底

交互设计部总监看我有开发经验把我捞出来直接面试。金蝶深圳总部还是蛮气派的,前后两栋楼。

一面:设计师直接面,基本上还是在谈简历谈作品,老生常谈的话题外这位设计师比较轻松,会从一些比较生活的问题中考察对交互设计的认识和平时获取知识的渠道,回答了一些常看的 Medium 作者和播客他倒是挺满意。最后觉得我刚毕业直接上社招可能有点缺乏经验,直接打电话把前端工程师请来面前端,问了一些浅显的技术题基本都答上来了 。

二面:两天后 HR 打电话约二面。总监直接上马,可能有了一面的正面反馈,天南地北无所不聊,其中印象比较深刻的是总监对 AR 等 3D 交互方式运用在 to B 领域比较感兴趣,我反而委婉否决说「可能需要更多数据和需求支撑」,第一次在面试场合反驳面试官也算是比较有趣的体验。这么多场面试也有了经验,最后虽然在闲聊设计案例但也没有完全放松,还是谨记「以用户为中心」的设计原则,也算做到了「收放自如」。

HR 面:看到 HR 感觉又有希望(此时我已收到网易 Offer),已经懂得反套路 HR,回答出一套已经准备好的答案,最后依旧询问薪资。收到 Offer 后思考再三还是拒绝了这份家门口地铁直达的 Offer。

面试题在考察什么

做完了百度和网易的面试题,一个感受是除了考察交互设计师的基本功、方法论外,更多的是考察设计师的综合知识面与全局设计能力。百度得到肯定的是加入了在新的交互环境下的无障碍处理;网易得到肯定的部分是完成了部分游戏策划的交互内容(如世界观与游戏交互的结合等)、游戏交互稿如何与开发结合(我写了大量的交互内容在开发的可行性评估)以及音频交互。不只是面试题,面试过程中同样能感受到面试官对具备综合能力的设计师的渴求与考察。

最后,一份交互设计稿能否细致、有效校对、方法论正确,这些基本职业要求就不再赘述。

自我认识与双向选择

面试对交互设计的求职者而言不光是对专业能力的全面 Review,也是在非业务层面对自我认知的全面深化。你是什么样的人、你的为人处事态度、你适合什么样的公司、岗位空缺是否匹配——第一次走入社会被挑战挑选,自我认识越清晰,面对面试官也越有自信。最后金蝶感觉真的做到了「把面试官当朋友」,因为岗位高度匹配,面试官也释出不少善意。

现在在做运维的码农好友(特别感谢此君)说「放得开了,面试就没什么问题了」大概就是这点吧。

一月份入职,成为穿梭于三号线与五号线间珠江新城白领的一部分。希望成为《我想准时下班》里站在钢筋水泥中立派的设计 OT 社畜吧。(Blog 的 Tag Cloud 也加上了「工作」分类……)

在摩登帝都起舞

This is architectural porn. I have such a fetish with Tokyo, omg

东京影集:这里

有太多文艺作品描写东京。但在《你的名字。》带热中国人对东京城市建筑与市政美学的讨论前,我对「远东帝都」的憧憬甚至妄想主要来自它们——

这也正是本文标题来源。

毋庸置疑,东京对于喜爱 ACG 亚文化的中国人来说有着梦幻般的吸引力。近几年动画反而「束之高阁」,多的是关注日本交通运输、日本的设计趋势和优秀作品,尤其是日本同样作为汉字国家所产出的汉字相关设计。

银座车站入口与银座大街,人流如织,颇有日本泡沫经济时代风情。

去台北求学之后一些立场本土的台湾朋友会对面对台湾社会满目所及的「中华民国美学」对战前日本产生种种想象,又有老一辈台湾人因受到戒严时期党国教育而对日本嗤之以鼻,政治口水战时日本与台湾也是双方无法离开的话题。台湾社会的种种,感受到了日本作为前宗主国对台湾带来的巨大影响,开始了解日本政治社会动态与日本各种思潮与台湾的互动。

「东京感」

妄想して 東京はよいとこ

聊远了。东瀛南北横跨,而关东首都圈只是这盒便当上的最醒目的梅。舔一口梅子只觉得酸——一周浮光掠影,可能没有品尝到这颗梅的真味。

正巧在台风「云雀」肆虐关东时飞赴成田机场,平衡神经与强对流搏斗一晚后匆匆进城并安顿下来。日本给我的第一印象其实不是很好,成田机场散发着霉味的地毯、日本公务员的 Office 2003 艺术字宣导和(与香港机场、桃园机场相比)效率低下的 CIQ 检查。第二天依旧觉得只是个与深圳香港台北一般,普通的 Megacity.

有乐町车站、街道与 JR 列车,所谓的「东京感」。

入夜的东京,站在 JR 有乐町站银座口才有了实感(抑或刻板印象)。在银座与东京站间的写字楼与光怪陆离的高级百货、奢侈品街道之间,抬头是电车与新干线穿梭而过,东京人隐忍而秩序地走出车站穿过街道,铁道桥下生根的各种食肆中觥筹交错,飘散着食肆油烟气味的空气中混杂吹来的是站台的发车旋律和霓虹灯的的光影。「哦!这就是东京!」

这么想着的我,站在街头感受这一切,不由得头皮发麻;

终于站在了东京都心。

东京车站站房与东京车站特定区「Tokyo Station City」(丸之内口),此角度背后便是日本皇居。

温度与空气

盛夏的东京日间温度 36 度,赫赫炎炎。

有温度的社会,除了礼貌的日本人外,物理感受比较明显。日本能够享有世界级高品质生活一个原因就是适宜的时间提供相符的温度:马桶圈自动加热、时值盛夏餐厅提供冰水、饭店楼层放置制冰机、电热镜子消除洗澡雾气、便利店暖柜提供热饮……日本社会中把握温度的手段与地点族繁不及备载,硬件提供的生活体验可以说是一个「可冷可热」的舒适社会。

秋叶原平价面馆提供的自动生啤机,自取啤酒杯投入 300 円即可享用冰啤。

盛夏时节亦有提供热饮。全家的冷暖柜中上层保温与下层冷藏温度互不干扰。

电车上看到大金的广告 slogan 是「空気で答えを出す会社(向空气作答的公司、致力于空气的公司)」,与其生产空调的行业特征相衬,也让人遐想是否在挪揄或者调侃日本社会重要的群体法则「空気を読む(阅读空气)」。

作为外国游客并没有如何受到「不会读空气」的白眼,但能在细节中感受到一种群体压力。新干线调整座椅靠背,人因设计的原则决定了无论如何椅背调整都能够保障后座乘客拥有合适空间且不影响餐桌使用,但前排女士调整靠背时依旧望向后方和我声明「不好意思我要往后靠了,可以吗?」

不知道 How it works 也要在不必要的场合行礼如仪,阅读空气、不给人添麻烦在这种情况下则显得不安而怪异。

东京站新干线贩售的「駅弁(车站便当)」,只有冷食且并不便宜(1000 日元)。东京站 JR 东海闸内星巴克笑眯眯对我说「Sorry sir no Flat white」……

东京の公共视觉

标题的恶趣味,用华人世界公共视觉中最喜欢の介词开题。

上文提到了「日本感」,那么公共视觉中的日本气息是什么呢?先从汉字开始,来看看如何营造汉字排版的「日本感」——日本市政使用的几乎全是圆体,通过不同的诠释时庄重优雅,时简洁明快;尤其是日本市政标识全部使用海蓝色白底配色,配合圆体字,舒缓柔和、胖胖圆圆,倒是符合日本「卡哇伊」的国家文化形象。

高档消费购物街银座的铜铸路牌,通过雕花与手工组字而散发出高雅细节感的圆体,西文 St. 的点反而像是逗号。

筑地片区新大桥-晴海路口,也可见东京街道翻译原则(Harumi-dori Ave),交杂手割与数字圆体,筑地市场的图标非常有趣。

「东京国税局」路牌,有趣的是政府机关「填表办事」的图标:这到底是填写表格处理公务呢?还是在电子游乐场操控游戏摇杆呢?

而铁道标识系统则大同小异选用了「新ゴ(新黑体)」。日本的公共视觉中不常见「喇叭口黑体」,新ゴ的设计显得现代而稳重。有趣的是在东京地铁的 LCD 旅客信息系统中,简体中文报站信息采用了 Windows 自带的中易黑体,在两种汉字只有些许差别的站名「六本木」中做对比,喇叭口有无之间交叉对比非常有趣。

东京地铁「六本木」站名中日字体(新ゴ vs 中易黑体),可见中文部分汉字存在明显喇叭口且与日文字体相比字重较轻。

西文字体在公共视觉中运用风格,中、台为美式、香港为英式,日本则更倾向于西欧。小林章先生参与了 Neue Frutiger 的设计,猜想是日本的使用偏好催使他投入这项工作,还是因为他的设计所以 Frutiger 才在日本发扬光大?东京各大场合,公共视觉中只要稍微注重一点设计感的地方,基本都有 Frutiger 的踪影。前一段时间狂热于 Frutiger 与 Futura,东京地铁的标识设计正中下怀。

东京地铁日比谷线运行图,可见 Frutiger 与 Futura 车站编号所提供的清晰视觉。同时可见右侧直通运转图例。

东京羽田机场入闸后登机口标识。依旧是 Frutiger.

所谓「距离产生美」,被满目所及的、视觉倾向于 Univers 之硬朗感的  Frutiger 轰炸了一周后也有点审美疲劳,反而觉得与 Adobe 的后生 Myriad 相比少了那么一份亲和与圆润。当然 Helvetica 实在是老生常谈(虽然本站 CSS 也声明的是 Neue Helvetica),在 JR 东日本的车站中满目所及,这么多年也难免「规规矩矩,不上不下,味同嚼蜡」。

新宿站是全世界乘降人数第一的铁路车站。图系 JR 东日本新宿站闸外标识,标识系统由设计出经典「龟甲万」酱油瓶的日本 GK Design 设计公司出品,色彩引导区分明确。西文字体上 JR 线大多规规矩矩地采用 Helvetica.

公共视觉不仅包含了设计师的美术意象,也或多或少可以一窥政治与文化的端倪。

成田机场入关那句「区别对待」的欢迎辞「お帰りなさい(您回来了)/ Welcome to Japan」:如果以语言的地道与否区分里外的话,那么会说甚至精通日语的外国人是否被日本当成「自家人」呢?日本社会多年来回答的答案应该是「不」,但不由得还是会让人会心一笑。也许应该是我们多虑,海关在贴这块牌子的时候可能只是为了欢迎远游的邦人吧。

活字印刷的铅字,行距字距前后文缩进与空格全靠铅条物理解决。

活字印刷的书签,文案彰显了设计师的恶趣味。

参观东京印刷博物馆时还有幸体验了人生中第一次活字印刷,数字时代的设计师真切地了解了文字排印中部分名词的由来,收获了宝贵的经验。

东京的铁

1067 与 1435 编织而成的巨大都市。

东京车站整装待发的新干线列车。

东京首都圈集合了通勤铁路、高速铁路、地铁、APM(新交通)、路面电车等近乎所有轨道交通形态,南北坐东西坐,怎么坐都好坐。通勤铁路灵活区分不同客流需求,通过建设时修建三线、复复线乃至更多轨道的线路、增设站台,开行不同速度等级的列车,满足不同时间敏感度市民的通勤需求,近郊至都心的距离被有效拉近,自己在前往埼玉时,急行列车的旅行时间出乎意料。

东京都电荒川线,系东京仅存的一条有轨电车线路。作为与干线铁路的补强线路而存在行走与静谧的生活区,因沿途盛开樱花而有「Tokyo Sakura Tram」冠名美称。图为新老电车交汇进站。

品川站京急线站台,东京都交通局与京急的列车同框合影。「エアポート快特(机场特快 / Airport Limited Express)」由东京都交通局、京急电铁与京成电铁联合提供服务并互相直通运转,更提供「一车到底」连接羽田、成田两大机场与东京中心的服务。

以为会大量使用 JR 和私铁的通勤铁路,但出乎我意料的是在东京都心移动主要使用地铁,与其他城市无异。地铁移动到核心城区边缘则可感受到日本铁路运务组织的高效:各个铁路公司配合紧密,除了大量开行跨社、跨线直通运转列车外也提供跨社线路间跨站台转乘的车站;同时面对复杂但高效的运行组织,日本各大铁路公司除了有力确保列车准点运行之外,运行信息披露的公开透明则是东京铁路系统中最令人欣赏的一点。

中目黑站换乘标识。东京地铁日比谷线与东急东横线构成跨社同站台换乘,便利神奈川县、东京近郊市民换乘地铁前往东京都心。

雅虎日本推出的「换乘案内」App 整合了铁路公司向公众披露的所有运行数据,可以做到完全计划出行,除了极大地降低了市民出行的时间成本外,车站的工作人员基本是使用平板电脑安装这款 App 进行乘客服务。除了公布时刻表以利市民计划出行外,整个东京的铁路系统联动披露各线列车异动信息,既减少了乘客的不便,也确保的路线与车站的顺畅与安全,而不是「各家自扫门前雪」。

JR 东日本新款通勤列车 E235,服务于东京骨干线路山手线。除了增强了人因工程学设计外,此车利用三块大尺寸 LCD 屏幕大幅提高了车内旅客信息系统的服务质量。

习惯了华人城市车站的维护和翻新强度来到日本反而不怎么适应。为了迎接 2020 ,东京不少大站都在积极翻修、增加服务,但 JR 或地铁的车站普遍无障碍设施增设不勤,相对于严格执行《大众捷运法》第四章 28 条的台湾与积极增设无障碍设施的港铁来说实在是有待加强,不算合格的无障碍铁路交通,不知东京都厅如何迎接残奥会。

新干线真的好贵。

JR 东日本 E2 新干线列车,服务于东北新干线。中国国铁第六次大提速时邀请 JR 东日本 / 川崎重工引入并技术转让此车并号为 CRH2,活跃于上海、南昌、武汉局所开行线路。此车也成为中国国铁 CRH380A、CRH6 系列与「复兴号」CR400A 之滥觞。(画面后为 JR 东日本 E5 新干线列车。)

五轮

东京夺得 2020 年奥运 / 残奥主办权,里约奥运闭幕式的「日本八分钟」一如既往地展现了日本的文化力量。当时被那段《Warming up Tokyo 2020》短片迷得神魂颠倒,两年后东京积极准备奥运后又是另一番景象。

街头四处可见奥运元素。先不说各种特许品牌与奥委会本身的宣传海报,巴士车牌是奥运特制,车身上有吉祥物广告,游客聚集的景点与交通枢纽有奥运海报、贩卖着主题纪念品,晚间纪实节目赞颂着世界各地的运动员如何在日本活跃,20 京奥的氛围与 08 京奥无二。东京都厅也严阵以待,为了防止通勤客流与奥运客流夹杂而瘫痪交通,「坂本龙马」与东京都知事小池百合子的「时差Biz(错峰办公)」广告漫山遍野,占据了东京公共场所的各个角落。

东京人民热情洋溢迎接 2020 东京奥运。「啊,五轮,你比四轮多一轮……」

港台大量引进东南亚劳工从事建设业与家政服务业已不足为奇,但与我「日本社会保守排外」刻板印象相悖的是各种场合都可以看到东南亚、南亚劳工的存在。日本社会抛开文化面的「排外」不谈,起码在劳工政策上非常开放。大量外籍劳工投入各种各样的行业,从食肆点餐、便利店收银到机场入国审查协助、酒店前台。拜奥运所赐,各行各业都可以看到异国面孔。高龄化的日本劳工短缺,面对游客蜂拥而至的 2020 国家大考,引进外国劳工既可以缓解劳工荒,亦可增强日本对其母国的影响力。

第三者

东京太新了,新到难以置信。如果说老旧的平房是台北,油腻的街道是香港,那么东京并不是街道一尘不染而显得清新,而是整座城市都被填满了崭新的大楼。相对于其他喜欢盖单纯追求高度的塔式超高层大楼,东京因抗震法规要求全是玻璃幕墙「砖块」。又高又宽的「砖头海」望过去煞是壮观。

东京车站的高楼群。少见「塔式摩天大楼」。

日本公务员的效率:在日本国门发生的一点不愉快。成田机场入境时一位台湾长者与审查官沟通不畅,空耗其他等候旅客时间。长者沟通不畅而台风后乘客大量积压时,成田机场入国管理当局的做法不是将他请至执勤办公室做进一步核实问询,也没有加开窗口分流旅客或呼叫高级官员求援进行业务督导,而是任由旅客积压,直到问题处理完成后队列才恢复正常流动。在习惯了桃园与香港 CIQ 通关效率的我看来着实不可思议。

以管窥豹,很多台北的朋友羡慕东京,台湾舆论也会自觉或不自觉将时事尤其是市政建设、地方选举的政见对标日本。然而「老旧」的台北面对崭新的东京真的一无是处吗?大可不必妄自菲薄。上文中发现东京一些不尽如人意的地方台北却可以做到。社会规范与个人自由间的平衡、礼仪与效率之间的平衡我相信台北一定比东京更好,作为日台之间的第三者,台北才是一个更让我觉得舒适的城市。

旅行杂事

Lightroom CC for iPad + 索尼 RX100 V 确实是好旅伴。Lightroom 现在也开始支持 Apple Pencil,同时有多种方便的滤镜与曲线可供快速出图,购买了正版之后现在也能享有云同步(虽然在桌面环境中 Lightroom CC 没有 Lightroom Classic Desktop 好用),飞机上五个小时可以轻松吃吃饭修修图,是比原来带 G1X + Macbook 要轻松方便。

减轻负担的好旅伴。

路过台湾上空第一次在万米高空好好俯瞰台湾,在天上辨认自己熟悉的街道确实是有趣且令人怀念的体验。台北的城市脉络一览无遗。当然降落时维港的景色也令人安心。

台北上空易辨识建筑物,再用 Ps 加以整理和标记,城市脉络显现。

因航 773 洲际型的服务与设备没有 772 地区型好,组员服务前者也没有后者到位,不过来回的饭都还蛮令人满意的。来回一张餐单,去吃的是洋食海鲜意粉,回吃的是和食照烧鸡饭,羽田配餐更胜一筹。日人嗜酒如命,五粒钟麒麟生啤一罐接一罐。

TYO

回到香港,站在上水北上站台,看着日本制列车,却没有了 JR-SH2 的回荡,眼前是单人行双人行自由行,大包小包叉烧包。接着则是「大力……」「紧密……」「牢牢……」「坚持……」。南粤潮湿的空气用熟悉的触感和气味黏着身上。

崇知者得自由。早大主校区。

No,Non,いいえ;I really missed Tokyo.

新苹果散谈

今年年初又经历了一次苹果随身设备换血,拥有了两款「全新思路」的苹果设备:代表苹果加入全面屏大战(并同时开启了浏海浪潮)的 iPhone X、代表 Jony 自称「无线未来」(wireless future)的 AirPods 耳机。以下文字可能是我获取的评测、感想的旧调重弹或者总结,也夹杂大量包含主观意见的私货。

Wows or Worse

副标题也可以叫「万众瞩目」或「众矢之的」。事实上苹果在领导整个移动设备产业时其作出的决策不管是看起来创意枯竭、「不完美」或者让人眼前一亮总是背负了巨大的用户体验考量与商业策略决策。显然新耳机与新手机更在意功能而非狭义上的工业设计,AirPods 耳机本体「EarPods 剪掉线」的工业设计非常丑陋、被苹果称作「传感器空间」(Sensor Housing)的浏海破坏了四角顶边全面屏的完整美感,但经过三个月的使用感受我已经对这些被网络耻笑,引发大量 meme 的不完美买单。

我不用手机玩大型游戏(每周打开猫咪庭院、《兽娘动物园》手游与 Mini Metro 的时间总计为 ~ 1.5 小时),手机对我而言除了通讯以外的意义仅有摄影与音乐。我又喜欢精简通勤,能少带东西就少带东西。

手机方面虽然生活缺乏趣味基本没有使用 Animoji,但有助于浏海上一排传感器我能告别关键时刻不可靠、极度考验手指干爽程度的 Touch ID(无论是一代还是第二代),用手机刷卡消费比以往轻松二十倍;第一次踏入双镜头 iPhone 之时可以用 56 mm 拍出以往拍不出的构图;至于 AirPods,一切的一切,太方便舒适了。

于是身边的两个多出了两个使用频率大大降低更 Pro 的设备:索尼的 24—70 进阶卡片机 RX100V 主动降噪耳机 100ABN。虽然新手机和新耳机并不是入门级价格的设备,但它们确确实实满足了入门以至中档的使用需求,专职追求影像指标与音频指标的设备在日常生活中被取代,可以一窥如今苹果的产品定位。

矛盾的指意

谈老本行。其实 signifiers 中国惯用的「能指」实在是艰深难懂,我个人更喜欢台湾的翻译「指意」。

苹果作为能够强力控制软硬件的公司,其交互体验的软硬结合也是有目共睹。AirPods 传感器的种种便利功能、W1 芯片的快速连接与传输优化、通过 Face ID 简化的解锁操作用户友好地保护用户隐私等等都展现了软硬结合的功力。白条是我觉得相当以小见大的一点:

如果说 Home Indicator(aka 白条)成为抹杀传统 iPhone 工业设计符号最为「醒目的细节」,那个陪伴了 iPhone 十年的圆点从 iPhone 上消失,白条成为了新的指意符号,有两个方面:

  • 地点(在哪儿)——屏幕正下方的 UI 控件元素;
  • 用途(做什么)——退回桌面、管理多任务。

在使用中可以发现白条仅仅是一个视觉符号,整个手机下缘无论是否精确地定位并滑动白条都可以达成目的。整个圆角用户的决策则需要新的「评估——执行」两段式过程,那么白条目前不甚清晰的交互逻辑则体验出了一定程度上的指意矛盾——

Home 键时代无论是回到桌面、管理多任务还是进入 Apple Pay 都只需要快速按下不同次数的 Home 键,而 Home Indicator 向上滑动退回桌面,向上滑动并在宽容区内悬停管理多任务、左右滑动次序切换应用则采用了不同的操作逻辑,先不说「按下」与「上下拖曳」哪个更符合大拇指运动的人体工学,它并没有太多视觉暗示的各种拖曳逻辑使用者是否可发现和易于理解?

目前对 iPhone X 交互方式的杯葛不占少数,iOS 11 可能还没有做好拥抱全新硬件的准备,只能期待日复一日的迭代了。苹果在做交互设计时是否没有以前那么精益求精了?macOS 和 iOS 上层出不穷的 Bug 已经是老生常谈,在新特性与稳定性之间迷失了方向的苹果什么时候才能注意到一些最根本的问题?

拟物重生否

新的拟物是 iPhone OS 以来的样貌吗?未必。macOS 的扁平化实践可能是 iOS 在视觉上重回真实质感的另一种样貌,可能是一种克制的拟物,或者丰富的扁平,MIUI 初创时期的早期版本、Palm 时代的 WebOS 视觉设计在拟物与扁平之间取得的平衡早已走在前面。

「以图形界面的预设用途为主」和「以图形界面的信息本身为主」视觉与交互体验的此消彼长本就是螺旋上升的过程。命令行时代没有绚丽的显示技术则只能通过阅读指令进行评估即完全的「扁平化」,用户图形界面兴起时人类获得了彩色显示信息的能力则兴致勃勃想复原世界的质感,直到现在人类习惯了真实世界的质感与锐利的屏幕显示技术,开始理解信息本身。

AirPower 的充电激活动画、AirPods 的配对动画和 WWDC 2018 的宣传主视觉都在暗示着苹果又要让拟物重生?苹果又在极力让 iOS 向 AR 示好; 新硬件提供的人类与屏幕和人机界面交互的方式,AR、VR 本身就是让「拟物」的图形元素欺骗人类大脑感官让交互行为成为使用「物件」本身。增强图形界面的「预设用途」(affordance)在用户熟悉新硬件、新交互的过程中又重新回到了应有位置。

AirPods 的价值观

AirPods 实在是从 iPod nano 5th 开始接触苹果产品获得最多满意度的设备。当然不满意的点也是有的:

  • 不及格的外观
  • 耳机的本质:音质与隔音

就一副耳机的本源来说,使用耳机首先是为了双向隔绝声音,无论是避免声音影响外界或事防止外界声音影响收听并获得比扬声器更好的聆听体验,既然 AirPods 沿用 EarPods 的设计那么显然在本源上是不足够的。虽然无线连接方式的局限注定了市面上大部分的耳机都与真正的 Hi-Fi 高音质无缘。

那么 AirPods 的设计价值观是什么呢?与 iPad 的价值观相同:「不是让用户适应硬件,而是让硬件自动配合用户。」提供大量的功能与利处使得耳机本身配合用户的使用习惯,用户得到了使用上的舒畅与满足自然不会介意一副耳机音质上的损失(除非你是 10% 的 Hi-Fi 发烧友),这种功能大于本源,取悦 70% 消费者需求的价值观还是苹果音乐产品线一如既往的熟悉感。

A Day of Apple Boy

MKBHD 上次做了一个主旨为「为什么我们无法停止使用 iPhone?因为你已经陷入了苹果生态」的评论视频,坠入「围墙花园」的我每天使用 MacBook 完成设计作业并依赖 iCloud 同步行事历、笔记、设计工程文件、文本文件与学校行政资料,用 iPhone 记录生活、使用 Handoff 和 AirDrop 与电脑协同工作,把 AirPods 当成主要耳机随身携带,当需要让电脑插耳机观看内容时直接选择耳机进行连接,我一直不承认我是果粉,但现在看起来整篇文字都在为苹果说话,谁不是呢(笑)。

写完发现写的确实够散,颇有「侃大山」、「吹牛屁」的意味,不过脑中的不快和愉快都发泄出来了,苹果依旧是苹果,只是更务实了。在交互上做得更务实,倒不如好好把 bug 修一修。总而言之我是买单的,Everydays with Apple.

其实我也不知道该怎么结尾,上面的文字都是屁话吧(笑)。

从 Metro 到 Fluent

Fluent Design 发布

介绍

微软在昨(12)天的 MSBuild 2017 开发者大会上宣布了全新的统一设计语言 Fluent Design,经过了 Metro (Modern) 时代的前卫、Windows Phone 的全面溃败和 UWP / 传统 Windows 桌面的混沌后微软再一次试图打造一个整合的体验;这也是微软第一次系统性地将统一设计语言从幕后移到台前。「一鼓作气,再而衰,三而竭」,重新加入统一设计语言大混战的微软能否在产品中持续稳定地传达 Fluent Design,还需拭目以待。

这里可以看介绍视频。

草翻

Fluent Design 的五个价值取向

We speak, type, ink, touch, and gaze. We’re engaged and immersed. We’re surrounded by devices, interactions, and experiences. ——Fluent Design

Fluent adj. 「流畅、流利」;但按微软由 Metro UI 开始以内容为主的设计导向、微软的官方介绍视频和 Fluent Design 发布所处的「物联」、「数据」热点来看,Fluent 翻译成名词「流体」,设计语言本身翻译成「流体设计」或许比较妥当。

Fluent Design 提出的五点价值取向倒是可以翻译成「光线、层级、动态、质感、尺度」。翻译出来的感觉倒是令人觉得与 Google 的 Material Design 形成了某种默契。

Aero 与 Metro

Longhorn 与 Aero

Longhorn 时代 Aero 毛玻璃视窗栏开始出现,Project Longhorn 从拥有透明任务栏的 Luna(Windows XP 默认风格)进化为 Windows Vista,开启了微软当代桌面 OS 视觉第二次大改革。Aero 让微软的桌面 OS 视觉体验有了质的飞跃,显得富有设计感而现代。Vista 的 Aero 和界面图标更倾向于「透明水晶」的质感,直到 Windows 7 发布,Aero 成为了大家昵称的「毛玻璃」质感。

Aero 因其独特的透明质感得到了消费者的喜爱,然而 Windows 8 中的 Aero 效果保持到了开发者预览版的中后阶段,随后为了迎合 Windows 8 的 Metro 被移除,直到现在发布的 Fluent Design 再度全面回归。

然而 Aero 实际上是微软传统 PC 时代的桌面系统设计语言(与很多人认为的桌面主题样式有别),其中很多的交互要素与「毛玻璃」半透明质感密不可分,只是并不明显。时过境迁,首次大改风格的 iOS 7 也采用了「毛玻璃」效果作为 iOS 用户体验中「内容感知」的一部分,iOS、Longhorn—7 与 Fluent Design 的毛玻璃效果有何区别,下文将会详细分析。

Metro UI 与 Zune

所谓「扁平化」的曙光在微软的 Zune 播放器上显现。那还是 2006 年,乔布斯追求现实投射的「拟物」的 iPhone OS 1.0 和 Android 1.0 两年后才孕育出来、旗舰价位的智能手机还是诺基亚 N 系列的天下。使用简洁鲜明的色块控件、专辑封面和清楚圆滑的文字排版,前卫大胆的视觉传达实在是「潮到出水」,每个界面的信息排版都像铅板海报一样前卫。

Zune 播放器产品宣传图 © Microsoft

那时虽然没有 Metro UI 这个代号,但 Metro 的烙印已经深深刻在了 Zune 的界面基因中。成为后来 Windows Phone 图形界面大放异彩的前奏曲。

Metro UI 与交通标识

其实 Zune 播放器的界面是后来补课的时候才知道的。Metro 其实就是城市公共交通(更狭义就是轨道交通了)的意思,作为美工交通迷第一次被 Metro UI 吸引就是因为它将公共交通的标识排印搬到了用户界面上,那种明确、清晰、规律、规范立刻将我俘获。

纽约大都会交通局(MTA,纽约地铁运营)标识系统规范手册

众所周知,交通机关的标识系统和移动界面不同,作为公共服务部门,面对不同受教育程度和生活习惯的居民,需要安全、清晰、直观、简洁的标识系统来疏导人流,提高整个交通系统的运转效率。所谓「扁平化设计」(原谅我真的不爱用这个词)就是受到交通系统标识的启发,以删除视觉细节来提高文字与其他信息之间的对比度,清晰地传达信息本身。Metro UI 不光是设计背后的理论,更进一步模仿交通系统的视觉样式本身进行设计。Windows Phone 版的图形界面成为了第一版标准版 Metro,犹如寓言一般预测了「关注信息本身」的设计风潮。

驾驭排版与视觉设计

Metro UI 因其独特的视觉风格培养了一批设计师簇拥。但严格来说相较于同时代或刻画或堆砌视觉元素的界面系统来说 Metro 虽然简化了设计师的绘图操作,却需要设计师更多地考虑从排版、图标设计以至于信息呈现等更多问题。在「重视信息本身」的设计还未成为显学的年代,少有制作精良的 Windows Phone 应用程序。大部分设计师觉得只要堆砌「磁贴」就能成为 Metro,事实则不尽然。(反而和现在很多国内习惯了 HIG 的设计师做 Material Design 一样?)

FD101

陈词滥调与历史包袱

统一设计语言大战热火朝天,Fluent Design 落入陈词滥调。设计思路五维中的两维,Light 与 Motion,主要集中阐述了 Fluent Design 对于交互动画与设计用光上的理解,虽然有心理学模型的支撑,但依照宣传视频中展示的一些控件动画和用光细节,实在无法看到什么让人眼前一亮的要素,只看到了陈词滥调地炫技。目前还没看到它的完整版设计指导手册,但弥合 UWP 与传统桌面撕裂的交互才是微软面临的当务之急。

这里就不得不提微软的历史包袱。作为大部分地球人使用的桌面操作系统,微软的传统桌面已经体现了它的效率,甚至成为了某种标准。代表「历史继承」的传统桌面与代表「融合平台」的 Metro / UWP 之间的整合已经欠下了太多债,交互撕裂、标准不稳:OS X 与 iOS 经过了 Yosemite 的大融合现在视觉风格已趋向统一,Android 和 Chrome OS 凭借着后发优势已经被 Material Design 一步拥入怀中,然而 Windows 还在内部混乱与推倒重来中永无止境地「欠债还债」,实在让人担忧。

质感非「材料」,层级非「深度」

Depth 作为 Fluent Design 的一维我实在难以将其翻译为「深度」。通过增加视觉上 Y 轴的深度体现的是层次感,进一步回到原先 Metro UI 的设计宗旨上考察则是突出信息间的优先级关系。所以思索再三还是「层级」比较适合。Material 这个非常「尴尬」的称谓恰巧与 Google 的 Material Design 撞车,然而两者所阐述的东西却南辕北辙。将 Depth 和 Material 合在一章阐述的原因恰恰是 Depth 某种程度上代表的才是 Google Material Design 的精神。而包含全新 Aero 的 Material 反而与 iOS 7 有异曲同工之妙。微软这个在视觉上失落的巨人,自己的两门看家本领被 Apple 与 Google 瓜分殆尽,唏嘘。

虽然 Depth 主要突出了立体层级关系,但依旧能看出其在平面空间内继承了某些 Metro 的元素。比如滚动时相异的位移动画就曾在 Metro 的功能标题和 Banner 图片中出现。Google Material Design 主要通过模拟真实材质的叠加质感来反映信息优先级:例如最典型的 Floating Button,用极其粗暴醒目的方式提示了用户执行一个界面中最主要的功能;而 Depth 的层级区分则期望能在它能逻辑上改善 Metro 「突出信息」的平坦。

新 Aero,即 Material,逻辑基本与老 Aero 告别。老 Aero 的毛玻璃代表的是「聚焦」,即让用户通过毛玻璃的重叠加深对当前窗口的认知,而新 Aero 更像是 iOS 7 的毛玻璃效果,让用户感知当前窗口背后的其他内容,配合 Depth 建立一种层级上的心理暗示。本文标题的质感非质感,层级非深度即是此意。

新字体

相较于 Roboto 与 SF 两个 Helvetica 系且紧凑的现代视觉,源于 Frutiger 的 Segoe 现在看或许显得臃肿肥硕。Segoe 作为微软系统级字体,和 Office 的默认字体 Calibri 一起出现在各种粗劣的设计中,产生了一种本非其意的廉价感。微软雅黑亦同。作为大部分中国人接触到的第一款现代屏显黑体,它虽然为提升简体中文汉字品味做出了不可估量的贡献,但它的 Hinting 和种种已经无法满足现代显示技术的需求。

新的西文字体,Twitter @bdsams

可喜的是在 MSBulid 2017 的演示中发现了天气界面可能的新西文字体(依旧是瑞士系、紧凑、但细节也许过于丰富),不知中文能否在思源黑体与苹方间带来一些新气象。

新 PC、新硬件的尺度

Scale 作为微软新 PC 与新硬件诸多硬件交互方式的看点(Surface Pen、Surface Dial、触摸屏、HoloLens 等),本意应该是打造一个面向设计师和工程师的,可以高效生产的使用环境,使得他们的生产对象都可以被轻松的掌控和调整,也包括硬件本身适应使用者的调整(Surface Studio 的转轴、Surface 的键盘盖等),与 Jobs 当初所说的「不是用户适应 iPad,而是 iPad 适应用户」有异曲同工之处。不过微软身负的历史包袱能否「坐着玩,躺着玩,还是微软设备好玩」,则依然存疑。不过 Scale 作为 Windows 打破屏幕与现实互动的方式,倒是 Fluent Design 一个非常有潜力的维度所在。

多说一点

不用 UI Kit 真的排点什么都是刷流氓。希望 Fluent 这张大饼能够「画好画满」,不要重蹈 Metro 与 UWP 朝令夕改的覆辙,变成微软的又一个历史负债。本文 13 日开始磨洋工,期间还不务正业跑去看漫展,写到什么时候算什么时候。本篇小结基于 MSDN 宣传材料和宣传视频所写,可能在完整交互指南出来之前有很大变动或出入。

期待 Fluent 的设计规范。「微软,生产力叫你回家还债。」

Adobe Xd 完成视觉与评估交互

滥觞——「设计空间」

在 Photoshop CC 2014 与 2015 版中包含了一个完全使用现代 Web 技术重制的「设计空间」模式,可以算是 Xd 的滥觞。Adobe 对 Ps 传统界面的简化也算是 Adobe 正式承认了 Ps 这款图像处理软件在用户界面绘制中的重要地位。

然而作为一个内置于正式版 Photoshop 中的实验项目,它的「套壳」根本决定了简化功能并不能优化 Photoshop 在用户界面绘制中已经显得臃肿的体积与编辑效率,更看不出它完全使用现代 Web 技术的影子。

上帝说,要有图。于是便有了 Photoshop;上帝说,要有界面,于是便有了 Sketch。产品经理被上帝一道天谴劈死了,于是赐了美工 Experience Design,XD。(就差一个程序员了。)

& RIP Adobe Fireworks.

Adobe Xd 登场

Adobe Xd 还叫 Project Comet 的时候我就一直在关注这款 Adobe 为快速完成视觉设计并评估交互的工具。Project Comet 发布后,「设计空间」模式被正式版 Photoshop 剔除。当然,有了「设计空间」的前车之鉴,我也会担心 Project Comet 真的如同彗星一般转瞬即逝。好在它坚持了下来,并逐渐成长,可以作为毕业设计的主要设计软件进行敏捷设计。

使用 Adobe Xd 进行交互设计的链接线,意外地有美感

用起来如何?

Adobe Xd 最大的特点在于其能极大限度地创造工具上的便利,使得设计者能将更多的精力放在逻辑思考和视觉表达本身。当然作为一只还未达到 1.0 的「雏鸟」,其视觉设计上的表现力远远不如已经被广大设计师认可的 Sketch,甚至在使用 Xd 时会怀念 Photoshop 能够快速实现的一些经典效果。

创建 Repeat Grid

Repeat Grid

用户界面设计充满着大量可复用的元素(图标、排版规则等),有效利用这些元素进行敏捷设计就不得不提 Xd 的 Repeat Grid(「重复栅格」?)模式,下面的例子就是使用 Repeat Grid 快速复制并等距调整元素距离。当然,它还能绑定所有元素中的样式达到「牵一发而动全身」的效果,大大减少了视觉修改时的工作。

执行效率

Sketch 这种基本矢量实现的性能轻量级绘图软件给能为我这台三年前的「乞丐版」集成显卡 Macbook Pro 带来绘图压力。一份 30 页的 .xd 文件仅占 2.3 MB,就算没有良好的图层管理和曲线简化习惯画画草图也不会出现明显的卡顿。当然 Xd 的目前还显粗糙的视觉设计功能也一定程度上减轻了电脑的渲染负担。

交互评估

之前用 Ps 或者 Sketch 的时候必须要按照传统思维先在原形设计软件中画线框图做好功能链接,最后再通过绘图软件实现视觉效果——课程作业小组内很多同学都不参与(我承认我不能当 Team Leader),最后一个人又要兼顾 UX 又要兼顾 UI,一百来页的图,搞得人精力憔悴,最后的结果只能是「一个非常平庸的团队用了一些非常平庸的方法去做出来一个非常平庸的产品。」(张小龙语)

早年使用 Xd 完成的线框图

这次只做了二十多页的功能,作为侧重于视觉设计和规范排版的视觉设计师还是能感觉到在一个软件内完全控制视觉和交互的「整体性评估」便利,加上上文提到的非常高的执行效率,实在是非常痛快。

基于故事板思维的交互排列

在 Xd 的画板排列中按照功能故事板的逻辑顺序进行排列——毕业设计中发现确定了基本视觉元素开始排版整个 App 功能布局后,能完全以故事板思维排列功能层级并完成交互设计,发现交互逻辑不理想的功能或者入口能马上作出调整并且使修改后的交互能够适应先前定下的视觉规范。

不足与未来

很明显,视觉表达还是过于简单。交互动作(特别是滚动与切换)还是缺少功能。Easing 的加速度曲线不能自己编辑(如未来能提供符合 HIG 或者 Material 的预设加速度曲线则最佳?),还需要假以时日吧。

随着版本号递增、功能的愈发完善,可能会成为未来 Adobe 的杀手级应用吧。其实我很期待 CC 下移动 App Adobe Comp 和 Xd 的联动使用,或许生产力能再上一个台阶。

1. Inspiring — “What could it be?”
2. Evolving — “What should it be?”
3. Validating — “What will it be?”