首頁

UI設計師基礎設計規(guī)范

藍藍設計的小編

UI設計的基本規(guī)范,包括網(wǎng)頁設計和APP設計的規(guī)范羅列

設計方法:用問題引出答案,群策群力繪制用戶體驗地圖

藍藍設計的小編

周五參加了港大space學院的工作坊,感謝Google張英惠老師的精彩授課,學到了通過發(fā)問找到解決問題的方法,群策群力繪制用戶體驗地圖。IMG_20170922_152217.jpg

這些小小的改變,能夠讓UI動效更上一層樓

藍藍設計的小編

UI動效現(xiàn)如今在 APP 和網(wǎng)頁中幾乎已經(jīng)成為了基本的組成部分,經(jīng)過仔細打磨的 UI動效對于整個界面的提升是顯著的。

Google設計語言:如何將品牌DNA融入產(chǎn)品

藍藍設計的小編

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里

本文轉自,頭條號的人人都是產(chǎn)品經(jīng)理,的一個大神。

Google設計語言:如何將品牌DNA融入產(chǎn)品

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

Google設計語言:如何將品牌DNA融入產(chǎn)品

OLD NEW

對!就是這個SHAPE的單詞,為什么我會如此看重,大家應該知道構成設計語言的四大基礎原子是:字體/顏色/網(wǎng)格系統(tǒng)/圖形。

這里的圖形包括圖標和一些輔助圖形,它有什么不同呢?

大家看之前以往的版本,材質設計語言里面沒有單獨去說形狀這一元素,當然也有做的比較好的產(chǎn)品,比如:韓國的 29cm 和 11街,國內天貓/網(wǎng)易蝸牛讀書等等。

圖形語言對我們產(chǎn)品影響極其大,之前網(wǎng)上也有這樣的文章,比如:提取logo上面視覺基因,然后運用到圖標里面。對,這個沒錯,但是我覺得不夠好,不全。

今天和大家一起來分析下Google是如何做的。

我對圖形的理解

圖形無處不在,人眼對圖形的識別能力遠遠高于字體,圖形便于記憶、傳播,這就是為何每次做LOGO時候都需要去考慮圖形延展呢?

目的為了傳播品牌,在用戶心中打造產(chǎn)品形象,比如:可口可樂弧線、阿迪達斯、蘋果logo這些國際性大牌子的logo都是易于記憶與傳播的。

那么在產(chǎn)品設計中如何體現(xiàn)呢?

我們常用在圖標里面去展現(xiàn)一些品牌元素,比如:天貓貓頭直接和圖標融合,這是一個很成功的例子。還有韓國的Genie音樂產(chǎn)品,也是直接logo和圖標集合。

那么僅僅只是這些嗎?

當然不夠,如果我們想傳達我們產(chǎn)品的品牌理念,深入到用戶心中,只在圖標里運用是不夠的。

比如:可口可樂每年做產(chǎn)品運營推廣,不斷大量的重復它logo弧線元素,這樣能長期在用戶心中形成記憶點。

Google是如何做的?

Google這次讓我們打開眼界,下面Google的原話:

形狀可以引導注意力,讓用戶易于識別組件,溝通狀態(tài)和品牌語言傳達。

對次有了一些更深刻的認識,形狀其實運用不止我們平常所理解的。我之前寫過一篇文章,就是形狀對布局的影響,里面就是講了形狀的一些基礎作用。

下圖是來自材質語言的截圖:

Google設計語言:如何將品牌DNA融入產(chǎn)品

圖片來自google

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

Google設計語言:如何將品牌DNA融入產(chǎn)品

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

Google設計語言:如何將品牌DNA融入產(chǎn)品

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

Google設計語言:如何將品牌DNA融入產(chǎn)品

圖形可以用于表達某一正在交互的狀態(tài),比如:選中狀態(tài),當然并不是單獨去使用。Google特定強調了:需要和其他視覺元素集合起來使用,比如:顏色

其實這一觀點以前就有啦!比如:咱們的check box控件,選中前后狀態(tài)不一樣。

不過Google這個是否略顯夸張些?

Google設計語言:如何將品牌DNA融入產(chǎn)品

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

如:上圖是一個Crane的應用,他們logo是中間一個圖形加外帶橢圓底,這里Google提取了橢圓作為視覺DNA,并沿用到產(chǎn)品的每一個控件。

Google設計語言:如何將品牌DNA融入產(chǎn)品

同一產(chǎn)品多終端統(tǒng)一符號語言。

Google設計語言:如何將品牌DNA融入產(chǎn)品

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

Google設計語言:如何將品牌DNA融入產(chǎn)品Google設計語言:如何將品牌DNA融入產(chǎn)品

下圖Shrine提取菱形棱角圖形運用到產(chǎn)品設計細節(jié)里面。

Google設計語言:如何將品牌DNA融入產(chǎn)品Google設計語言:如何將品牌DNA融入產(chǎn)品Google設計語言:如何將品牌DNA融入產(chǎn)品Google設計語言:如何將品牌DNA融入產(chǎn)品

看完你想說什么?我只想冷靜三分鐘?。?!

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

我當時理解是:首先要了解我們的品牌核心是什么?

我們的品牌理念是啥?品牌solgan,我們要給用戶傳達一種什么樣的情懷?然后如何去巧妙提取產(chǎn)品logo里面的視覺基因,比如:某一圖形元素;比如:線條/點/某一特殊圖形符號,這圖形一定是易于延展,拓展性強的。

然后運用到產(chǎn)品的每一個細節(jié)里面,比如:圖標、按鈕、異常狀態(tài)、啟動頁、運營banner、情感化設計等等,如今大佬Google 已經(jīng)去這樣做了,而且做得很系統(tǒng),包括動效都有引子。

當時也有一些產(chǎn)品已經(jīng)這樣做了,比如:韓國29cm,設計細節(jié)非常好,圖形運用非常到位。國內天貓貓頭運用也是滲透到產(chǎn)品里面去了。

Google這次又給我我們一些大膽的思考,能運用這么廣的范圍?

Google設計語言:如何將品牌DNA融入產(chǎn)品

需要注意點

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

Google設計語言:如何將品牌DNA融入產(chǎn)品

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

Google設計語言:如何將品牌DNA融入產(chǎn)品

同一含義的組建樣式必須一致。

Google設計語言:如何將品牌DNA融入產(chǎn)品

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

Google設計語言:如何將品牌DNA融入產(chǎn)品

總結思考

Google的本次材質設計語言的更新,我相信后續(xù)會有一些產(chǎn)品為了打造一些品牌調性,也會慢慢去融入更多的品牌符號語言進去。

當然我們一定要克制與統(tǒng)一,這是最難做的一部分,Google雖然此次系統(tǒng)性的解釋圖形的意義及延伸使用,但是某些地方稍微有些過了,所以我們在設計提取DNA時候需要克制與統(tǒng)一。

那么我們可以從中取學習了解如何才能讓我們產(chǎn)品更加差異化?在同質化的今天,你是如何打造個性化與具有調性的產(chǎn)品呢?

如今AI已來臨,機器人對設計影響極其大,從Google本次更新迭代中就大量提到了AI對產(chǎn)品的影響,以及如何去學習用戶的習慣,然后預測用戶的下一步需求。

我們以后產(chǎn)品會越來越智能,越來越了解人性,除了硬件的升級,研發(fā)能力加強,我們也要多去思考下:如何打造獨具匠心的產(chǎn)品?如何打造一個無縫體驗、多平臺、跨語言產(chǎn)品視覺統(tǒng)一體驗?

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

藍藍設計m.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務

PC端表單設計的研究:如何設計一個優(yōu)秀的表單頁面

藍藍設計的小編

最近身邊的一些小伙伴,總會遇見B端設計工作,對于這種偏后臺設計的B端設計,總會有大量的表單設計需要做,結合以前自己也有過不少表單設計的工作,在這里給大家分享一下自己對于PC端表單設計的研究,聊一聊表單在PC端中的運用。

一個月薪過萬的UI設計師,成功的背后究竟經(jīng)歷了什么?(上篇)

藍藍設計的小編

作為一名專業(yè)的UI設計,其實工作職責無外乎包括界面設計、圖標設計、動效設計、切片與標注等。

設計!

藍藍設計的小編

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里

版式設計中的簡約設計
設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!

設計!


藍藍設計m.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

零基礎學習UI設計到底需要學些什么?

藍藍設計的小編

在進入一個未知的范疇前,一定要先梳理這個范疇的架構,待有了對比全部認知后再深挖。學習UI規(guī)劃也是相同,假如有條件,能夠嘗試了解一個新的互聯(lián)網(wǎng)商品出爐的作業(yè)流程。

UI設計師如何提升自己?

藍藍設計的小編

UI設計師提升自己沒有捷徑,就是多練。聯(lián)系當然也要分階段和方法。且在練習前的審美也很重要。下面先說說練習的幾個階段。

UI設計、UE設計、交互設計分別是什么?

藍藍設計的小編

這些概念在傳統(tǒng)行業(yè)和傳統(tǒng)工業(yè)中其實已經(jīng)發(fā)展的很成熟,近幾年隨著互聯(lián)網(wǎng)的發(fā)展又重新流行起來。

日歷

鏈接

個人資料

藍藍設計的小編 http://m.bouu.cn

存檔