Material Design：谷歌拿出媲美苹果的设计

Warning (2): Undefined array key "nsort" [ROOT/plugins/Kuhuang/templates/Websites/view.php, line 430]

          <div class="info"> 
            <span><a href="<?php echo $website_info[0]["nsort"]["nsort_url"];?>"><i class="fa fa-columns"></i><?php echo $website_info[0]["nsort"]["nsort_name"];?></a></span> 
            <span><i class="fa fa-clock-o"></i><?php echo $website_info[0]["submission_date"];?></span>

include - ROOT/plugins/Kuhuang/templates/Websites/view.php, line 430
Cake\View\View::_evaluate() - CORE/src/View/View.php, line 1184
Cake\View\View::_render() - CORE/src/View/View.php, line 1138
Cake\View\View::render() - CORE/src/View/View.php, line 769
Cake\Controller\Controller::render() - CORE/src/Controller/Controller.php, line 762
App\Controller\NewsController::view() - APP/Controller/NewsController.php, line 3938
Cake\Controller\Controller::invokeAction() - CORE/src/Controller/Controller.php, line 539
Cake\Controller\ControllerFactory::handle() - CORE/src/Controller/ControllerFactory.php, line 140
Cake\Controller\ControllerFactory::invoke() - CORE/src/Controller/ControllerFactory.php, line 115
Cake\Http\BaseApplication::handle() - CORE/src/Http/BaseApplication.php, line 317
Cake\Http\Runner::handle() - CORE/src/Http/Runner.php, line 77
Cake\Http\Middleware\CsrfProtectionMiddleware::process() - CORE/src/Http/Middleware/CsrfProtectionMiddleware.php, line 174
Cake\Http\Runner::handle() - CORE/src/Http/Runner.php, line 73
Cake\I18n\Middleware\LocaleSelectorMiddleware::process() - CORE/src/I18n/Middleware/LocaleSelectorMiddleware.php, line 61
Cake\Http\Runner::handle() - CORE/src/Http/Runner.php, line 73
Cake\Http\Middleware\BodyParserMiddleware::process() - CORE/src/Http/Middleware/BodyParserMiddleware.php, line 157
Cake\Http\Runner::handle() - CORE/src/Http/Runner.php, line 73

Notice: file_put_contents() [function.file-put-contents]: Write of 2422 bytes failed with errno=28 No space left on device in /www/wwwroot/www.adminso.com/vendor/cakephp/cakephp/src/Log/Engine/FileLog.php on line 140

Warning (2): Trying to access array offset on value of type null [ROOT/plugins/Kuhuang/templates/Websites/view.php, line 430]Code Context          <div class="info"> 
            <span><a href="<?php echo $website_info[0]["nsort"]["nsort_url"];?>"><i class="fa fa-columns"></i><?php echo $website_info[0]["nsort"]["nsort_name"];?></a></span> 
            <span><i class="fa fa-clock-o"></i><?php echo $website_info[0]["submission_date"];?></span> 
include - ROOT/plugins/Kuhuang/templates/Websites/view.php, line 430
Cake\View\View::_evaluate() - CORE/src/View/View.php, line 1184
Cake\View\View::_render() - CORE/src/View/View.php, line 1138
Cake\View\View::render() - CORE/src/View/View.php, line 769
Cake\Controller\Controller::render() - CORE/src/Controller/Controller.php, line 762
App\Controller\NewsController::view() - APP/Controller/NewsController.php, line 3938
Cake\Controller\Controller::invokeAction() - CORE/src/Controller/Controller.php, line 539
Cake\Controller\ControllerFactory::handle() - CORE/src/Controller/ControllerFactory.php, line 140
Cake\Controller\ControllerFactory::invoke() - CORE/src/Controller/ControllerFactory.php, line 115
Cake\Http\BaseApplication::handle() - CORE/src/Http/BaseApplication.php, line 317
Cake\Http\Runner::handle() - CORE/src/Http/Runner.php, line 77
Cake\Http\Middleware\CsrfProtectionMiddleware::process() - CORE/src/Http/Middleware/CsrfProtectionMiddleware.php, line 174
Cake\Http\Runner::handle() - CORE/src/Http/Runner.php, line 73
Cake\I18n\Middleware\LocaleSelectorMiddleware::process() - CORE/src/I18n/Middleware/LocaleSelectorMiddleware.php, line 61
Cake\Http\Runner::handle() - CORE/src/Http/Runner.php, line 73
Cake\Http\Middleware\BodyParserMiddleware::process() - CORE/src/Http/Middleware/BodyParserMiddleware.php, line 157
Cake\Http\Runner::handle() - CORE/src/Http/Runner.php, line 73

Notice: file_put_contents() [function.file-put-contents]: Write of 2446 bytes failed with errno=28 No space left on device in /www/wwwroot/www.adminso.com/vendor/cakephp/cakephp/src/Log/Engine/FileLog.php on line 140
">

Warning (2): Undefined array key "nsort" [ROOT/plugins/Kuhuang/templates/Websites/view.php, line 430]Code Context          <div class="info"> 
            <span><a href="<?php echo $website_info[0]["nsort"]["nsort_url"];?>"><i class="fa fa-columns"></i><?php echo $website_info[0]["nsort"]["nsort_name"];?></a></span> 
            <span><i class="fa fa-clock-o"></i><?php echo $website_info[0]["submission_date"];?></span> 
include - ROOT/plugins/Kuhuang/templates/Websites/view.php, line 430
Cake\View\View::_evaluate() - CORE/src/View/View.php, line 1184
Cake\View\View::_render() - CORE/src/View/View.php, line 1138
Cake\View\View::render() - CORE/src/View/View.php, line 769
Cake\Controller\Controller::render() - CORE/src/Controller/Controller.php, line 762
App\Controller\NewsController::view() - APP/Controller/NewsController.php, line 3938
Cake\Controller\Controller::invokeAction() - CORE/src/Controller/Controller.php, line 539
Cake\Controller\ControllerFactory::handle() - CORE/src/Controller/ControllerFactory.php, line 140
Cake\Controller\ControllerFactory::invoke() - CORE/src/Controller/ControllerFactory.php, line 115
Cake\Http\BaseApplication::handle() - CORE/src/Http/BaseApplication.php, line 317
Cake\Http\Runner::handle() - CORE/src/Http/Runner.php, line 77
Cake\Http\Middleware\CsrfProtectionMiddleware::process() - CORE/src/Http/Middleware/CsrfProtectionMiddleware.php, line 174
Cake\Http\Runner::handle() - CORE/src/Http/Runner.php, line 73
Cake\I18n\Middleware\LocaleSelectorMiddleware::process() - CORE/src/I18n/Middleware/LocaleSelectorMiddleware.php, line 61
Cake\Http\Runner::handle() - CORE/src/Http/Runner.php, line 73
Cake\Http\Middleware\BodyParserMiddleware::process() - CORE/src/Http/Middleware/BodyParserMiddleware.php, line 157
Cake\Http\Runner::handle() - CORE/src/Http/Runner.php, line 73

Warning (2): Trying to access array offset on value of type null [ROOT/plugins/Kuhuang/templates/Websites/view.php, line 430]Code Context          <div class="info"> 
            <span><a href="<?php echo $website_info[0]["nsort"]["nsort_url"];?>"><i class="fa fa-columns"></i><?php echo $website_info[0]["nsort"]["nsort_name"];?></a></span> 
            <span><i class="fa fa-clock-o"></i><?php echo $website_info[0]["submission_date"];?></span> 
include - ROOT/plugins/Kuhuang/templates/Websites/view.php, line 430
Cake\View\View::_evaluate() - CORE/src/View/View.php, line 1184
Cake\View\View::_render() - CORE/src/View/View.php, line 1138
Cake\View\View::render() - CORE/src/View/View.php, line 769
Cake\Controller\Controller::render() - CORE/src/Controller/Controller.php, line 762
App\Controller\NewsController::view() - APP/Controller/NewsController.php, line 3938
Cake\Controller\Controller::invokeAction() - CORE/src/Controller/Controller.php, line 539
Cake\Controller\ControllerFactory::handle() - CORE/src/Controller/ControllerFactory.php, line 140
Cake\Controller\ControllerFactory::invoke() - CORE/src/Controller/ControllerFactory.php, line 115
Cake\Http\BaseApplication::handle() - CORE/src/Http/BaseApplication.php, line 317
Cake\Http\Runner::handle() - CORE/src/Http/Runner.php, line 77
Cake\Http\Middleware\CsrfProtectionMiddleware::process() - CORE/src/Http/Middleware/CsrfProtectionMiddleware.php, line 174
Cake\Http\Runner::handle() - CORE/src/Http/Runner.php, line 73
Cake\I18n\Middleware\LocaleSelectorMiddleware::process() - CORE/src/I18n/Middleware/LocaleSelectorMiddleware.php, line 61
Cake\Http\Runner::handle() - CORE/src/Http/Runner.php, line 73
Cake\Http\Middleware\BodyParserMiddleware::process() - CORE/src/Http/Middleware/BodyParserMiddleware.php, line 157
Cake\Http\Runner::handle() - CORE/src/Http/Runner.php, line 73

AS网站目录（www.adminso.com）：Material Design：谷歌拿出媲美苹果的设计过去Google的产品线，每一个都相当的独立，在产品的设计上反映得尤为明显，甚至不必看产品设计，只要看一下Google每款产品的LOGO都能发现许多不同风格的设计。这种混乱难以体现出Google的风格，如果Google的风格就是混乱和无序的话

AS网站目录（www.adminso.com）：Material Design：谷歌拿出媲美苹果的设计

过去Google的产品线，每一个都相当的独立，在产品的设计上反映得尤为明显，甚至不必看产品设计，只要看一下Google每款产品的LOGO都能发现许多不同风格的设计。这种混乱难以体现出Google的风格，如果Google的风格就是混乱和无序的话。

2011年，拉里・佩奇成为Google CEO之后，他管理公司的政策从过去的自由、放任，变为紧密、整合。根据我们此前的报道，在Google发展的早期，因为鼓励观点的碰撞，结果发展成一种不留情面的争论分为，高管之间冲突不断，甚至会拒绝合作。佩奇决心要改变公司的氛围，2013年2月，在纳帕山谷的卡内罗斯客栈酒店里，他对所有Google高管说，Google要实现10倍的发展速度，要用全新的方法来解决问题，因此高管之间要学会合作。从现在开始，Google要对争斗零容忍。

除了Google不同产品线相互之间变得更加开放、合作外，佩奇还大胆改变Google“以工程师为主导”的文化。2011年，公司启动代号为“肯尼迪”的项目，召集公司里所有重要的设计师，重新设计Google里的每一项产品，寻找一种共同的设计语言。最终他们找到跨产品的设计是“卡片式设计”。不仅如此，2012年，佩奇大胆地作出一项决定，让设计师参与到早期产品的设计开发中，这项产品是现在我们看到的Google Now――一项典型采用卡片式设计的跨设备产品，从Android到Chrome，它的表现都几乎一致。

可以这么说，从Google Now上，Google的设计师们通过整合Google现有的技术和能力，再加上对跨设备界面与交互思考，结合卡片式设计，终于设计出在不同设备上界面和体验都相对统一的产品。而现在这种跨界的设计经验，经过两年的努力，复用在一致饱受割裂、碎片化困扰的Android平台上。

Android一开始充满着旧Google时代的风格：自由、放任。开发者可以任意上传自己的应用，而不必通过审核；开发者可以随意按照自己的想法设计应用，Google方面不予任何限制。可以说，Android一开始就是一片Google开辟的荒地，他允许每个人都可以随意使用，结果是所有人都各行其是，让这块荒地乱糟糟的。直到Android 4.0，从Palm跳槽到Google担任Android用户体验副总裁的马蒂亚斯・杜瓦迪（Matias Duarte）上任后，才真正提出设计指导。

而Google I/O 2014上着重展示的Material Design，以非常高调的方式，宣布了Google Design的存在：不欣赏设计，对设计毫无感觉的Google已是昨日。在发布会当时，Google还上线名为Google Design的网站。从Android到衍生的Android Wear、Auto和TV，Material Design贯穿其中，成为沟通不同平台、设备的灵魂，让用户在不同平台上也有连贯的体验。为了维护这种一致性，Google甚至不允许第三方修改Android Wear、Auto和TV的界面以及交互，十分强势。

Material Design不能简单地归纳为平面化设计（Flat Design）。实际上，Android 4.0的设计风格，也不是纯粹的平面化设计，在经过仔细观察之下，我们可以看到Android 4.0在细节上并没有反对高光、阴影、纹理，换言之它并不反对立体感。不过，它也不能归类为拟物化设计，毕竟它所是用的图案、形状并非是对现实实体的模拟，而是按照自己对数字世界的理解，以色彩、图案、形状进行视觉信息上的划分。

根据Hi-iD之前在《花样,形式,风格,氛围,主义……设计》中总结设计当中不同的层次，以Google过去各个产品而言，都充满了不同的花样和形式，但无法统一为一种风格。而现在，Material Design则结合卡片式设计，又结合现实世界里纸张的隐喻，统一了Google在设计上的表达，从而展示出一种强烈的风格。这种风格不会因为我们使用Android Wear或Android TV等不同的设备，而感到不同。Hi-iD说得好，“风格既是自我表达也是一种记名和品牌”。

Material Design在设计上并没有完全抛弃Google过去在设计上取得的成果。Material Design和Google的标志一样，崇尚多彩，但它并不使用那种很艳丽的颜色，反而似乎是为了让图案变得沉稳，而有意令原本很晃眼的色彩混入一点点的灰色，让图案变得活泼之余，又不会因为过于艳丽而让人感觉到俗套和嬉皮。它也没有抛弃阴影，仔细观察Android 4.0的下拉菜单，我们可以看到底部和右侧有着淡淡的阴影。

不过，比起过去的Andorid Design来说，Material Design更有自己的目标，它不仅仅为了好看而已，它要让不同设备的屏幕上表现出一致、美观的视觉体验以及交互。根据InfoQ报道，2014年4月Accel Design大会期间，杜瓦迪接受InfoQ采访时提出，“作为一个概念，移动已死，它完蛋了。”他的意思是说，“将用于移动设备的应用程序作为单独的应用程序自行设计是一个错误的做法。”

杜瓦迪说，“不应该为不同的屏幕规格创建不同的产品，而是使用一种统一的设计方法开发一款可以跨多种屏幕的产品：桌面、智能手机、车载解决方案、智能手表。当人们整天都在所有这些不同的屏幕之间切换时，他们应该能够继续使用一个特定的程序。这点不仅适用于产品的视觉外观，也适用于其功能集。如果一个人开发了一个打车应用程序，而它能在7英寸的屏幕上运行，但不能在2英寸的屏幕上运行，这是不行的。”

为了统一跨设备间的界面和交互，让用户得到连贯的体验。Material Design不再让像素处于同一个平面，而是让它们按照规则处于空间当中，具备不同的维度。按照Wired的话来说，那就是让像素具备海拔高度，这样子的话，系统的不同层面的元素，都是有原则、可预测的，不让用户感到无所适从，也避免开发者担心因为不同的视觉风格而产生冲突。

Material Design还规范了Android的运动元素，让按钮的弹入弹出，卡片的滑入滑出以及从一个界面变化成另一个界面的方法（比如从介绍一首歌的界面到控制播放的界面），都是秩序的、深思熟虑过的。Wired总结，Material Design中只有在高亮动作以及改变交互状态时，才会使用运动元素来表示。

对于现实世界中的隐喻，Material Design更加倾向于用色彩来提示。现在我们按下屏幕当中的按钮时，可以看到按钮颜色迅速发生变化，向石头投入湖面一样，产生了一波涟漪。杜瓦迪这样设计是因为Material Design中的按钮都处于一个平面，不再突起，因此它必须采用和以往不同的表示方法，以表明自己已经被按下。

Material Design所展示的模板当中，最显眼的是它的小圆点。它的作用好像iPhone上的Home键，是快捷功能入口，又是视觉上有趣的点缀。

然而，正如Material Design名字所暗示的，为了适应多尺寸的屏幕，杜瓦迪以及他的团队，寻求一种更加抽象的表达，一种存在屏幕里的显示“材料”。根据The Verge报道，杜瓦迪团队在面对Google产品里大量采用的卡片式设计时，灵感火花一闪：何不如这些“卡片”，想像成现实当中存在的，四处滑动的物体。

如果这些卡片遵循物理世界里的法则，那么它就有自己的规矩，不见得每个人都能够任意使用，对于设计师来说“限制”是有必要的。在Google设计师的想象中，这种抽象的“材料”特性很像纸张，但它又做到现实当中纸张做不到的事情，比如变大变小。这赋予这种“材料”极大的灵活性，让它足以适应不同尺寸的屏幕。然而，对于Google来说，Material Design还将扩展到Google其它产品当中去，让所有产品都烙印上浓浓的Google风格。

对于杜瓦迪来说，从Android 4.0到Material Design，体现了他身为设计师的素质和能力，而在这不同的经历当中，他的感受是，“打造Ice Cream时，我好似军舰上的一名上校，被叫去轮机舱，而这艘船即将在30分钟后转弯。创造Material Design就像指挥太平洋舰队的海军上将。我们要在一无所知的情况下作出决定，而船在48小时后启航。”

至于Material Design本身，它是一个足以媲美苹果设计的一套设计框架。

标签: Material Design 谷歌拿出媲美苹果设计