如何將品牌與UI完美結合?Google新規范告訴你答案

      作者:
      分類: 觀點/經驗
      2018-05-15
      5546

      2018年5月9日凌晨1點,Google 開發者大會上對 Material Design 做了更新的講解,其中令我印象深刻的是 Google 對圖形語言單獨拿出

      2018年5月9日凌晨1點,Google 開發者大會上對 Material Design 做了更新的講解,其中令我印象深刻的是 Google 對圖形語言單獨拿出來做一個模塊來解釋,如下圖我標紅的地方。

      對!就是這個 SHAPE 的單詞,為什么我會如此看重,大家應該知道構成設計語言的四大基礎原子是:字體/顏色/網格系統/圖形,這里的圖形包括圖標和一些輔助圖形。它有什么不同呢?大家看之前以往的版本,材質設計語言里面沒有單獨去說形狀這一元素,當然也有做的比較好的產品,比如韓國的29cm和11街,國內天貓、網易蝸牛讀書等等。

      圖形語言對我們產品影響極其大,之前網上也有這樣的文章,比如提取 logo 上面視覺基因,然后運用到圖標里面。對,這個沒錯,但是我覺得不夠好,不全。今天和大家一起來分析下 Google 是如何做的。

      一、我對圖形的了解

      圖形無處不在,人眼對圖形的識別能力遠遠高于字體,圖形便于記憶,傳播,這就是為何每次做 LOGO 時候都需要去考慮圖形延展。目的為了傳播品牌,在用戶心中打造產品形象,比如可口可樂弧線,阿迪達斯,蘋果 logo 這些國際性大牌子的 logo 都是易于記憶與傳播的。

      那么在產品設計中如何體現呢?比如我們常用在圖標里面去展現一些品牌元素,比如天貓貓頭直接和圖標融合,這是一個很成功的例子。還有韓國的 Genie 音樂產品也是直接 logo 和圖標集合。

      那么僅僅只是這些嗎?當然不夠,如果我們想傳達我們產品的品牌理念,深入到用戶心中,只在圖標里運用是不夠的。比如可口可樂每年做產品運營推廣,不斷大量的重復它 logo 弧線元素,這樣能長期在用戶心中形成記憶點。

      二、Google是如何做的?

      Google 這次讓我們打開眼界,下面是 Google 的原話:形狀可以引導注意力,讓用戶易于識別組件,溝通狀態和品牌語言傳達。

      對此有了一些更深刻的認識,其實形狀運用不止我們平常所理解的,下圖是來自材質語言的截圖。

      △ 圖片來自 Google

      Google 的想法非常大膽,一個方形的變化,延伸出不同的形狀,當然并不是單獨一個產品設計里面放這么多形狀,而是不同產品,運用不同的圖形,傳達其特殊品牌調性,大局統一,局部戰略調整。

      比如上圖中凹槽圖形用在主 TAB 上,形成視覺焦點,容易吸引用戶去關注它,一般核心功能會如此設計。

      Google 已提到了可以用于區分不同組件,這觀點我很贊同,之前我對愛奇藝做了視覺分析,發現它們一級導航和二級導航樣式一樣,那么用戶該如何區分?

      圖形可以用于表達某一正在交互的狀態,比如選中狀態,當然并不是單獨去使用,Google 特定強調了,需要和其他視覺元素集合起來使用,比如顏色。比如我們的 check box 控件,選中前后狀態不一樣。不過 Google 這個是否略顯夸張些?

      最后,比如還可以用于表達品牌語言,那么圖形來自哪里?用在哪里?

      如上圖是一個 Crane 的應用,他們 logo 是中間一個圖形加外帶橢圓底。

      這里 Google 提取了橢圓作為視覺 DNA,并沿用到產品的每一個控件。

      同一產品多終端統一符號語言。

      如下圖提取 LOGO 關鍵特殊符號。

      下圖 Shrine 提取菱形棱角圖形運用到產品設計細節里面。

      其實說實話,對于品牌 DNA 的延續早在年初的時候就思考過,如何去把品牌語言在產品設計里面體現?

      我當時理解是,首先要了解我們的品牌核心是什么?我們的品牌理念、品牌solgan,我們要給用戶傳達一種什么樣的情懷,然后如何去巧妙提取產品 logo 里面的視覺基因,比如某一圖形元素,比如線條/點/某一特殊圖形符號,這圖形一定是易于延展,拓展性強的。

      然后運用到產品的每一個細節里面,比如圖標,按鈕,異常狀態,啟動頁,運營banner,情感化設計等等,如今 Google 已經去這樣做了,而且做得很系統,包括動效都有規范。

      當時也有一些產品已經這樣做了,比如韓國29cm,設計細節非常好,圖形運用非常到位。國內天貓貓頭運用也是滲透到產品里面去了,Google 這次又給我們一些大膽的思考,能運用這么廣的范圍。

      三、需要注意的點

      Google 舉了幾個反面例子,我們在提取圖形或者使用時需要注意的幾點,如下:

      注意圖形的指向性和觸摸大小,千萬別影響用戶正常使用

      同一含義的組件樣式必須一致,

      別使用形狀來暗示其他含義。 這個對話框的形狀表明它與它背后的卡片相關。

      總結思考

      Google 的本次材質設計語言的更新,我相信后續會有一些產品為了打造一些品牌調性,也會慢慢去融入更多的品牌符號語言,當然我們一定要克制與統一,這是最難做的一部分。雖然 Google 此次系統性的解釋圖形的意義及延伸使用,但是某些地方稍微有些過了,所以我們在設計提取 DNA 時候需要克制與統一,那么我們可以從中吸取學習到如何才能讓我們的產品更加差異化。在同質化的今天,你是如何打造個性化與具有調性的產品呢?

      如今 AI 已來臨,機器人對設計影響極其大,從 Google 本次更新迭代中就大量提到了 AI 對產品的影響,以及如何去學習用戶的習慣,然后預測用戶的下一步需求,以后產品會越來越智能,越來越了解人性,除了硬件的升級,研發能力加強,我們也要多去思考,如何打造獨具匠心的產品。如何打造一個無縫體驗,多平臺,跨語言產品視覺統一體驗。

      這方面跨平臺多終端體驗,蘋果已經做得很不錯了,當然還有 soptiy 音樂產品無縫跨平臺,聽歌/切歌/選歌體驗。相信這只是一個開始,后續會有更多精彩。


      0
      0
      分享到:

      0

      喜歡他,就推薦他上首頁吧^_^

      推薦閱讀

      ×

      賽事服務聯系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國家大學科技園東區9號樓2層

      版權信息

        移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

      主站蜘蛛池模板: 伦精品一区二区三区视频| 国产无线乱码一区二三区| 伊人久久大香线蕉AV一区二区 | 无码视频一区二区三区在线观看| 亚洲一区电影在线观看| 香蕉久久ac一区二区三区| 国产精品亚洲专区一区| 亚洲国产AV一区二区三区四区| 国产av成人一区二区三区| 天天爽夜夜爽人人爽一区二区| 精品国产高清自在线一区二区三区| 精品乱码一区二区三区四区| 任你躁国语自产一区在| 99精品一区二区免费视频| 亚洲国产一区二区三区青草影视| 国产午夜福利精品一区二区三区| 亚洲色欲一区二区三区在线观看| 在线观看国产一区| 日韩电影一区二区三区| 香蕉免费一区二区三区| 亚洲高清美女一区二区三区| 亚洲国产精品综合一区在线| 蜜桃无码AV一区二区| 亚洲一区二区三区高清不卡| 亚洲一区二区三区91| 韩国精品一区二区三区无码视频| 精品日韩一区二区| 国产精品视频一区二区三区不卡| 红杏亚洲影院一区二区三区| 亚洲一区二区三区偷拍女厕| 久久久久无码国产精品一区| 亚洲一区二区三区精品视频| 久久蜜桃精品一区二区三区| 国产一区二区三区无码免费| 久久99久久无码毛片一区二区| 中文字幕一区二区人妻| 精品欧洲av无码一区二区三区| 精品人妻无码一区二区色欲产成人| 日本一区中文字幕日本一二三区视频 | 亚洲欧美国产国产综合一区| 秋霞日韩一区二区三区在线观看|