首頁

2018網(wǎng)頁UI設計:輕松搞定視覺層次感

藍藍設計的小編

眾所周知,相較于平淡無奇,毫無重點的網(wǎng)頁UI設計,具有良好視覺層次結構的網(wǎng)頁UI設計更受用戶青睞。為什么呢?答案其實很簡單。極賦視覺層次感的頁面設計不僅極具設計美感,取悅用戶身心。而且還建立了清晰直觀的視覺層級, 方便用戶簡單快速的識別和讀取需要的頁面內(nèi)容,從而提升用戶體驗,降低跳出率。

如何看懂UI效果圖

藍藍設計的小編

客戶(老板/領導)拿到軟件的第一個意見,幾乎都是關于UI的。有時得到的評價也挺簡潔明了的,一個字“矬”。

于是惶惶不安的開發(fā)小弟經(jīng)常想到的第一個解決方案:去問設計大神(美眉)要一幅詳細的標注圖。結果他得到這么一幅標注圖:

卡片式UI設計欣賞

藍藍設計的小編

在設計中,卡片上設計是屢見不鮮的,比如:用在UI產(chǎn)品的包裝排版、APP/web的列表排版、banner輪播的設計、導航的切換等。在這些上做出很多別出心裁的卡片視覺設計及炫酷的動畫效果,都能帶給用戶很好的體驗。

MIUI 10月底發(fā)布,界面UI搶先看,網(wǎng)友:千萬別太臃腫

藍藍設計的小編

今天上午小米MIUI正式宣布,在5月31日的年度旗艦發(fā)布會上同時發(fā)布MIUI 10,相信不少的小伙伴已經(jīng)饑渴難耐了吧。

優(yōu)秀UI界面設計評析

藍藍設計的小編

男生運動鞋商店支付界面,顏色搭配非常舒服,鞋子攝影也很漂亮,字體字號運用非常到位。

UI設計 如何讓你的配色更加舒服

藍藍設計的小編

色彩作為視覺感知的先覺條件,在很大程度上決定了作品的好壞以及給觀者留下什么樣的印象,人們感知到的即是通過色彩所傳遞出的情感,色彩作為一門獨立的學科,在基于其理論體系之上衍生出了眾多的搭配方法和技巧,在遵循色彩構成的原理之上可以更好的幫助我們對色彩有深入的認知和使用,對于色彩而言,除了要了解基本的構成之外,在使用的過程中更重要的是要對色相,明度,飽和度有敏銳的觀察里和視覺感知力,通過三者不斷的變化和調(diào)整把控使色彩更加具有情感,讓視覺感知更加的舒適并滿足我們的實際的需求;

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)品

藍藍設計的小編

如果您想訂閱本博客內(nèi)容,每天自動發(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)/圖形。

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

大家看之前以往的版本,材質(zhì)設計語言里面沒有單獨去說形狀這一元素,當然也有做的比較好的產(chǎn)品,比如:韓國的 29cm 和 11街,國內(nèi)天貓/網(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)和品牌語言傳達。

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

下圖是來自材質(zhì)語言的截圖:

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

圖片來自google

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

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特定強調(diào)了:需要和其他視覺元素集合起來使用,比如:顏色。

其實這一觀點以前就有啦!比如:咱們的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é)非常好,圖形運用非常到位。國內(nèi)天貓貓頭運用也是滲透到產(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的本次材質(zhì)設計語言的更新,我相信后續(xù)會有一些產(chǎn)品為了打造一些品牌調(diào)性,也會慢慢去融入更多的品牌符號語言進去。

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

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

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

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

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

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

日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔