Chrome重设计 P1

原文刊载于Medium ,by Sebastien Gabriel 

概要:当我写下这篇文章,�我可能会事无巨细啥都往里放,结果内容会比较冗杂,因为我觉得重要的东西都舍不得删掉,故决定分成两部分

第一部分,在Chrome交互与视觉的角度,��适配Material Design�风格下重设计及其原因;后一部分多是关于视觉,如icon、配色。

介绍

2014年14月新安卓版本发布:Lollipop。L与前代有着诸多改进,且Material Design(下文简称MD)也重新塑造了设计风格。MD不仅仅是一份安卓设计标准,它更是Google的立足之本,用设计和技术向人们传达自己的价值观。

MD以及不仅仅是Google的财产,它属于任何人,以及任何愿意适配MD并让自己的产品更好的人。

部分出于赶上新的视觉语言,Lollipop搭载重设计的Chrome是在其第40次的更新时。我们更愿意叫他:Chrome Material Design。

内容为先,而非Chrome

回首这数年,从视觉和产品方向说,Chrome与其他Google产品逐渐区别开来,这主要还是因为Chrome定位于做一个承载所有内容的平台(其实就是Chrome做 web os的野心)。比如说,Chrome的品牌在与Google品牌慢慢平衡或混合。这就会引出一个问题,我们重设计的立足点在哪?

关于UX和UI的问题都可以归于Chrome的三个原则:速度,简介,安全。


Chrome三原则:速度、简洁、安全

浏览器永远应当以隐形、高效地支撑内容为第一要义。

那么问题来了:UI元素要怎么尽可能设计地隐形而又在不打扰内容的前提下彰显视觉特性?

好吧,其实我并不知道答案,但现阶段有几个选择。此文就是为此而生,尽力去解释Chrome安卓版这样选择的原因。

平台

Chrome安卓放出以及8个月了,尘埃已落定,这个时候说说设计思路还是很合适的。此外,紧随到来的2015年I/O大会,会看到MD逐渐成熟,好设计需要时间丰富,我也希望新版Chrome在放出一年后会变得更加优秀。

在此之前,先来谈谈安卓平台

大家都知道,安卓用户横跨多个版本,每个版本都是以甜品命名的,现在的版本L代表Lollipop,之前的版本,K就代表Kit Kat,J代表Jelly bean。


上文所说三个版本是最广泛使用的,我谈论这个的原因就是我们开发了两个版本的Chrome,一个用在在L之前,一个用在L之后。

Chrome这些版本尽管看起来很相似,可用性的角度却是截然不同的。

1.将web放到第一位

Chrome的任务只有一样:提供最好的网页浏览体验,与那些支持新技术或者帮助开发者提高app体验的工具不同,他的任务只有web体验。

重设计Chrome中一个最重要的部分并不是给老黄瓜刷嫩漆,而是用户与web交互方式的深层改良。是关于如何把web体验放到第一位。

首要就是将Chrome从程序的「盒子」中放出,区分版本并在各种安卓平台上提供无缝体验。

TabApp合并

为了将此次更新从初始版本中区分出来,L系统下的Chrome叫做「Merged tabs and app」。名字直观简洁。

「Merged tabs and apps」简单来说就是依赖于平台而非UI。

step1,拆分

Chrome移动端UI元素有这么几个:tab page,Toolbar和URL bar,the switcher和the menu。

总的来说,这些元素构成了Chrome,然而一个独立于系统平台的应用或多或少像是活在真空里。

step2.移除最大的阻力

The switcher

「app运行在真空中」说的显然是其与平台其他产品如何交互,简而言之,假设你现在在某个app上,当你需要访问某个网站、拿点信息时,把app关了,然后打开Chrome或者打开多任务,点开Chrome,再点开Chrome的tab switcher仔细找啊找,然后才能开始你的任务。

Chrome内的Switcher

无论从可用性还是设计哲学来说,这种情景都不那么优雅。无论信息位于何处,它都应当是易于获取的。

解决方案便是将安卓系统的多任务和Chrome的tab switcher合并,即将Chrome的核心功能拆分出来。

Lollipop�中Chrome的tab与多任务tab融合为「recent switcher」

地址栏

现在Switcher整合进安卓系统级多任务中心了,Chrome的地址栏和谷歌搜索栏合并就势在必行且容易执行多了。

之前,谷歌搜索栏搜索个东西会打开Chrome的tab。现在,�点击顶部搜索栏,会打开Android「Recent stack」


Android系统级搜索栏


搜索
Chrome中呈现结果

尽管只是表观上非常简单地变化,但这一特性却构筑了MD的设计核心,比之前的优化都要吊。这一次我们在减弱Chrome增强内容上走的比任何一次都要远。

回头看看UI,两个不同的Chrome版本。Merged tab and app版本,支持Lollipop及之后版本。Chrome默认switcher,支持Lollipop之前版本。


(译者注:P1完结!撒花~撒花~)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容