<em id="dtznp"><nobr id="dtznp"></nobr></em>

        
        

            移動互聯網之品牌設計

            行業分享 | 05.28.2018 | 瀏覽

            品牌設計,對移動互聯網時代的的產品質量提升帶來了更多的可能性。

            也對設計師本身的平面視覺技能帶來了更大的機會和挑戰。


            APP為什么需要品牌設計

            距離上一篇App系列文章已經過去兩個星期了,我除去教學生的時間,都在準備這篇文章的資料,因為這篇文章的內容除了大量的截圖還有視頻需要處理。上篇文章有人留言說文字太多,懶得看。我想說我的文章是寫給愛學習的同學看的,不是娛樂貼。所以這篇文章依然很長,干貨十足。


            現在打開各種設計網站,去尋找App界面設計參考。你會發現如果去掉圖標,僅僅去看界面設計,很多App的界面設計差異性非常小。App設計有一種同質化的傾向。


            在產品型公司,UI設計師的工作流程一般是這樣的,和產品經理或者交互設計師討論每個版本的規劃,在這個討論過程中用草圖的形式畫出大致的流程。之后將流程圖細化并分析使用上的便利性和技術上的可行性,然后設計師將界面設計好,經過評審沒有問題,直接輸出給程序員。這是一個標準化的流水作業流程,留給設計師發揮的時間和空間并不多,更多時候是以功能實現為第一需求。另外的有部分原因是設計師趨向于保守設計,遵循各種平臺規范,這樣的保守設計不容易出錯。因為個性的設計的App可能非常成功,也可能是大家眼中的異類。以上的原因導致很多商業的App設計的大同小異。

             

            經過這幾年的移動創業風潮,大量App設計已經存在,現在設計師遇到的不是從零起步,如何設計一款App的問題了。而是面臨各種改版設計的需求,如何設計一款和競品有差異化設計的界面,這是UI設計師越來越迫切的需求。面對現在App設計趨同的市場行情,如果誰可以做出不一樣的設計,那么你就可以鶴立雞群。差異化設計這對界面設計師也是一個巨大的挑戰和機會。


            APP品牌植入設計

            品牌設計是在企業自身正確定位的基礎之上,基于正確品牌定義下的視覺溝通。我們平常看到的logo設計只是品牌設計視覺延伸的一部分。因為移動界面設計的同質化嚴重,所以越來越多的公司重視對App的品牌塑造,希望通過品牌的塑造,使用戶快速的對產品形象進行有效深刻的記憶。 App中的 Logo圖標、界面的視覺風格,甚至App Store上的介紹和宣傳Banner等,都是品牌設計的組成部分。 App的品牌設計,對移動互聯網時代的的產品質量提升帶來了更多的可能性。也對設計師本身的平面視覺技能帶來了更大的機會和挑戰。



            移動端產品品牌視覺設計的點:

            圖標:APP圖標、底部導航欄、其他頁面的功能圖標

            字體:字體(APP可以內置字體包變換字體)、字號

            頁面設計:引導頁、啟動頁、刷新控件

            排版:元素的留白

            圖片:頁面的配圖、占位圖片、頁面的情感插畫

            線下物料:線下的各種物料及其衍生品。

             

            APP品牌設計的步驟

            1、 發掘產品的氣質

            2、 品牌圖形的提煉

            3、 品牌圖形的幾何化輪廓

            4、 品牌圖形在界面設計中的應用

            5、 視覺語言的一致性


            第一步:發掘產品的氣質

            當我們看一個人的時候,會根據他的外表+內涵,我們會對他有第一個印象的認知,這個就是氣質。APP也一樣。App的外表是我們產品的視覺設計呈現,也就是這個產品看起來讓人感覺如何。內涵就是App的內容和功能的呈現,就是能否進一步留住用戶駐足。所以產品就是這樣,呈現什么樣的氣質,就會吸引來什么樣子的用戶。

             

            常見的品牌氣質

            1、  高冷氣質

            2、  文藝氣質

            3、  時尚氣質

            4、  活力向上

            5、  個性張揚

             

            1、高冷氣質

            高冷的人自帶著一種生人勿近的冷淡氣質,喜歡穿著黑白灰。朋友不是很多,不需要融入小圈子。然后嚴格按照自己任性極致的標準篩選良莠,深交的少,淺交的保持距離懶得討好。所謂可親而難以靠近。所以高冷氣質的應用不需要討好所有人,只服務好這個App定位的群體就好。例如(圖1-1)的Gucci應用,整個界面只有黑白以及一些色彩豐富的配圖,非常的簡潔明快,沒有任何多余的修飾,隱隱透露出大牌的傲嬌。


            (圖1-1)Gucci應用

             

            2、文藝氣質

            這個說到文藝氣質,其實就是一個字“范兒”, 如何才能有范兒?首先要有文化底蘊,素質修養,如果沒有的話,裝不像的。具體什么樣,可以去看看一些詩人,搞民謠音樂的人的裝扮,尤其是上個世紀的。穿著寬松的毛衣,戴著圓圓的黑框眼鏡,搞一條素色的圍巾,拿個老式的手動旁軸相機,留著稀疏的胡渣,或是女生長發飄飄的感覺。所以應用從界面設計到頁面內容,都要有足夠的范兒,這樣才是文藝的徹底。例如(圖1-2)最美有物,從界面設計到內容標題的文字都散發出足夠的文藝氣質。這種范兒可能不是所有人都學的來的,比如讓做B2C綜合電商的應用學這樣的氣質就不倫不類,也許這就是產品基因吧。


            (圖1-2)最美有物的內容模塊


            3、時尚氣質

            所謂時尚,是時與尚的結合體。代表當前世界對社會某項事物崇尚的潮流。是一個時期的流行風氣與社會環境,時尚引領潮流,是流行文化的表現。對時尚最為敏感的就是家居、服飾行業。沒有人希望自己買來的衣服或者家具是一個落伍淘汰的風格。當前的在界面設計中最流行的就是使用各種幾何元素,通過點線面的搭配塑造頁面的時尚感。例如(圖1-3)男衣邦應用,從啟動界面到首頁都穿插了非常多的幾何線條,界面具有濃濃的幾何構成時尚感。



            (圖1-3)男衣邦啟動頁和廣告頁



            4、個性張揚

            個性意味和人家不一樣,不是隨大流的那種,張揚就是外向活潑,給人不見外的感覺,到任何地方都能引起別人的關注,張揚的壞處就是,過分的顯擺自己,容易招人嫉妒。所以你的應用設計的明顯和別人不一樣。兩種結果。好評如潮,說這個設計不一樣,有自己特點。還有一種結果就是,這個應用怎么能這樣設計,太不符合主流習慣了。例如(圖1-6)野獸派應用,這是綜合類的時尚類家居相關售賣平臺。做為一個電商類的應用,他的設計明顯是非常個性的,沒有傳統的底部標簽欄模塊設計,而是首頁就是一整張插畫,作為首頁各種子模塊店鋪的入口。這樣的設計非常有個性,讓人一下就記住了。


            (圖1-4)野獸派應用


            所以UI設計師需要做的是提煉出的產品氣質并轉化為具象化的視覺語言。讓用戶通過界面這層介質感知到你產品的氣質。


            第二步:品牌圖形的提煉

            這個過程與平面設計logo基本類似,其實某種程度上就是設計logo,現在的App圖標游戲圖標還會使用復雜的光影質感。其他主流的商業應用圖標都是極簡的扁平圖標。所以更需要一個獨特的品牌圖形。


            1、具象圖形

            通常情況下,具象圖形的LOGO設計會更受到移動設計的親睞。部分原因是這些LOGO圖形容易辨認,可以更清晰的表述出應用是做什么的。例如(圖1-7)里的應用只看圖形就能很清晰的明白這個應用的屬性或者應用的功能。只留給大家很少的開放性解釋空間。有些應用的圖形甚至很聰明地運用了雙關含義和隱藏圖形。例如OFO既使用品牌的名稱,又表達了自行車的圖形符合共享單車的屬性。是一個非常 成功的logo品牌圖形。

            (圖1-5)具象圖形的應用圖標


            2、抽象的幾何圖形

            抽象圖形,抽象圖形LOGO設計同樣很適用于多元化企業,因為它們傳達出的是情緒和基調,而非具體的公司類型。一個LOGO未必需要直接反映出公司是做什么的。想想Nike旋風,McDonald’s金色拱門,或是Apple的LOGO。所以有時候App的圖標也是如此,更多通過一些抽象的圖形傳達一些特別的含義。比如愛彼迎的圖形背后有四層含義(圖1-8)。首先,這是一個字母A,代表了Airbnb;第二,這像是一個人張開雙手,代表了人;第三,這像是一個標記地理位置的符號,代表地點;第四,這是一個倒過來的愛心,代表了愛。


            (圖1-6)Airbnb的圖形釋義


            3、吉祥物

            互聯網公司非常喜歡用動物做為公司的吉祥物。這些互聯網公司的logo有很多是采用讓人萌化的動物圖案,這成了一種風氣,感覺互聯網的圈子成了動物園一樣。比如京東的狗(圖1-9),Tmall的天貓、UC的松鼠,騰訊的企鵝等。當然吉祥物并非只有選擇使用動物圖形,比如站酷的小酷圖形。


            (圖1-7)吉祥物為品牌圖形


            第三步:品牌圖形的幾何化輪廓

            我經常和學生強調,繪畫和設計是兩回事情,也許你會畫但并不意味著設計可以做的好。現在主流App的LOGO圖形傾向于扁平化設計,可能就是一個簡單的剪影圖形。比如你要設計一個表現自然或者格調感的應用。設計師想使用“鹿”這個圖形。如果直接用鋼筆勾勒鹿的圖形(圖1-10),那么這個呈現的是一副剪影插畫。這個圖形又很多細節,線條充滿了不規則感,這些不規則線條對于一個LOGO設計來說是非常冗余的。


            (圖1-8)偏插畫的未經處理的剪影圖形


            1、設計輔助線

            好的品牌圖形是需要對基本圖形進行2次提煉,去除一些不必要線條細節,對原有的剪影圖形進行幾何抽象化。我們經常看到在畫LOGO時候出現的各種輔助線(圖1-11),這些輔助線以各種圓為參考形。輔助線的作用是幫助設計師用規整的幾何圖形去切分原有的剪影。讓線條更加規整幾何化。這樣幾何規整化的圖形已經和不規則的偏插畫的剪影圖形區分開來了。現在更像一個有設計感的圖標圖形了。當然現在這樣的設計輔助線,在一些設計師中有濫用的嫌疑。在一些不需要的加輔助線的地方,加了很多線條,營造一種專業的感覺。這種做法在有經驗的設計師眼中是非常可笑的。


            (圖1-9)用橢圓切割的鹿剪影形狀


            2、設計的圖形語言

            經過幾何規整化的圖形只能算是一個好的圖標,離好的品牌圖形還有一段距離。品牌圖形一定要有自己獨特的設計,講白圖形一定要有自己的特色,讓別人一下記住你。例如(圖1-12)的設計語言就是流暢柔和的線條,通過這個極簡的線條構造了鹿的品牌圖形。


            (圖1-10)極簡的線條構造鹿的圖形

             

            例如(圖1-13)的鹿圖形使用的是幾何圖形做為設計語言,用各種三角形和其他不規則圖形。類似七巧板一樣的設計拼接出鹿的輪廓。這個鹿的圖形具有獨特的設計感。


            (圖1-11)幾何塊面的鹿圖形


            3、提取典型的特征

            由于移動設計的LOGO需要在一個圓角矩形中展示,并沒有那么大面積供設計師發揮。所以需要選取最具有代表的形的局部圖形(圖1-14),比如鹿的頭部是最具有代表性的圖形部分。


            (圖1-12)提取典型特征的鹿頭部圖形



            第四步:品牌圖形在界面設計中的運用


            1、 引導頁

            抽象形式感的圖形,與廣告頁進行呼應。點擊App圖標,第一次打開應用的界面。會呈現一組引導頁。引導頁是用戶進入主界面之前,首先見到的頁面。這是產品給用戶的第一印象。由于第一印象的好壞會極大地影響到后續的產品使用體驗,因此我們需要花一些時間去精心設計引導頁。匠物APP的應用通過一個動畫,把LOGO的圖形放大(圖1-15),映射在引導頁的背景上。這樣品牌圖形前后有了一個呼應,加深了用戶的印象。




            (圖1-13)匠物的引導頁

             

            現在很多應用都放棄了四頁引導頁的傳統做法,而是偏向內置視頻的做法。視頻具有更好的視覺動態效果。比如最美有物引導頁使用了一段視頻(圖1-16),使用各種絢麗效果,最后一幀放出品牌logo圖形,這種手法是不是很像我們以前看的各種國外大牌廣告。比如耐克的廣告從來不會放什么XX產品就是好的廣告,而是喜歡放一段情懷畫面,最后一個大大的LOGO告訴消費者我這是耐克的廣告。

            (圖1-14)最美有物的引導頁視頻


            2、 啟動頁

            每次打開一個App,都會看到啟動頁,所以這是一個品牌露出非常高頻次的頁面,大多數應用都是品牌圖形+ Slogan的設計形式,比如Life的啟動頁(圖1-17),直接把品牌Slogan反復在啟動頁,和隨后的廣告頁反復呈現。


            (圖1-15)Life啟動頁


            如果覺得直接放品牌圖形+背景的做法,比較老套的話,也可以嘗試在品牌圖形上進行2次設計。比如良倉的啟動頁(圖1-18)運用logo圖標的典型輪廓進行2次創作。

            (圖1-16)良倉啟動視頻


            3、刷新控件

            刷新控件用于刷新當前頁面內容。在我的書中《術與道移動應用設計必修課》中有介紹。目前主流有下拉刷新和上拉刷新兩種方式,這兩種交互方式有很大區別。以網易新聞為例,我們在看當前頁面的時候,使用下拉動作,界面反饋當前頁面內容條數不變,而內容更新。而上拉刷新代表是加載。一個頁面固定加載一定條數的新聞,從上往下看,看完一定條數,往上一拉,后面的內容繼續載入。

             

            方法1使用幾何圖形

            Enjoy的品牌圖形有一個非常鮮明的圖形是那個波浪線,Enjooy下拉刷新的時候使用了這個波浪圖形(圖1-19),讓品牌圖形無處不在。

            (圖1-17)Enjoy的刷新圖形

             

            當然使用的圖形也可以是一種圖形的設計風格,比如造作的全局是較為硬朗的圖形,這點 在他的個人中心就可以看出來,他的個人中心(圖1-20)都是非常硬朗的直接圖標。所以他的刷新使用了一個矩形做為刷新圖形(圖1-21)。



            (圖1-20)造作的個人中心圖標

            (圖1-18)造作的矩形刷新圖形

             

            方法2使用吉祥物圖形

            在界面設計中嗎,必須有一個設計語言貫穿,這樣你的設計才會有特色,這個語言可以是一個圖形,也可以是一個吉祥物卡通形象。如果有這樣一個形象存在,你的界面設計會一下提升不少的特色。

            (圖1-19)大眾點評的刷新控件


            4、 占位圖片

            在界面設計中,很多圖片需要考慮數據為空的情況,也有可能由于網絡的情況圖片可能沒有加載出來,這些都需要設計一個默認的占位圖片。例如最美有物的品牌圖形是一個鹿(圖1-23),他的個人中心默認頭像就是一個鹿的占位圖

            (圖1-20)最美有物個人中心頁

             

            需要注意的是在社交或者內容社區,品牌圖形的個人頭像有時候是需要慎重使用的,因為那樣會讓人誤以為這是官方頭像。


            5、 界面其他小元素

            有時候界面中功能會配上一些圖標,讓設計更好的釋義。對于一些約定俗成的功能,如果把這個圖標去除也不會很明顯的影響含義。這個時候可以考慮使用特別的品牌圖形替代。比如life的卡片banner上的點贊功能圖標,使用了品牌圖形指紋替代來傳統的心形(圖1-24)。從體驗來說,這個數字很容易讓人聯想到這是評論數或者點贊數。所以替換為品牌圖形對于用戶體驗并沒有明顯的降低。

            (圖1-21)LIFE的卡片Banner


            、底部導航欄圖標

            典型的IOS應用的結構是把App的主要模塊放在底部導航進行切換,底部導航一般分為4到5個模塊。以圖標+文字的設計形式進行展示。那么這些圖標就可以與品牌圖形相結合,加深用戶的印象。

             

            方法1:品牌圖形應用在首頁圖標

            首頁最常見使用的圖標是一個房子的圖形,這個圖形來源于PC時代的面包屑結構,Home的圖形代表家,代表不管你在網站哪個層級,點擊Home圖標像回家一樣可以回到起始的位置。很多應用的圖標上的logo,都是一個讓人印象深刻的主圖形,那么我們可以直接把這個logo圖形做為應用的首頁模塊圖標使用。這樣的好處很明顯,每次用戶打開應用后,都會看到這個圖形,反復加強了用戶對App的logo的印象。例如大眾點評、餓了么、花瓣、貓途鷹、網易云音樂提取各自品牌圖形(圖1-25),應用在了App底部導航欄首頁模塊上。

            (圖1-22)大眾點評、餓了么、花瓣、貓途鷹、網易云音樂首頁圖標使用了品牌圖形


            方法2:品牌名稱應用在底部導航欄

            一些應用的名稱是字母構成,為了強化用戶對于應用名稱的認知,直接把名稱做為標簽欄的圖標。例如MONO(圖1-26)應用的標簽欄圖標,設計的非常大膽,提取logo上面的4個字母M、O、N、O后,直接將其作為圖標。但是這種設計策略的缺陷也很大,每個字母和功能模塊本身的含義并沒有直接聯系,對用戶幫助理解模塊有一定的困難。所以這種方法適合一些極客小眾App去使用。

            (圖1-23)MONO的底部標簽欄圖標


            第五步:視覺語言的一致性

            1、顏色的一致性

            在完成了產品的整體風格和功能構架后,我們可以著眼于一些細節層面的設計。比如統一你的產品中,色彩和圖形的意義。比如設計一套套標準的配色方案,:用品牌色代表可點擊的按鈕,用橙色代表與金錢有關的操作,用藍色代表鏈接,用戶對這些顏色的含義就進行了學習和習慣。讓用戶對這個App內的顏色形成記憶。例如好物(圖1-27)好物每個可點擊的按鈕都是品牌黃色。

            (圖1-24)好物界面設計



            2、元素的一致性

            界面的本質是信息傳遞的一種介質,界面中包含各種繁雜的信息。所以如果我們希望通過設計讓界面自己會說明,我們可能會加上一些樣式的區分,比如我把標題加粗加大,把輔助信息變淺色變小一些,但這只能區分主次,很難具體說明每一部分的意義;那我還可以給一些信息加上可識別的圖標。Life采用的是圖標+標題+欄目上下排版形式(圖1-29)。這樣的設計好處是每個模塊很清晰,且用戶可以很清晰的對應分類各種子頻道。所以設計樣式不是隨意的選擇,單純的看視覺美學樣式。而是需要有效的對產品運營的需求進行支撐。

            (圖1-25) Life首頁樓層banner與分類頁


            設計結語

            一個成功商業產品,首先需要所有團隊成員有一個共同的目標,并且大部分人具有品牌思維和設計思維,將其落實到和用戶的每一個觸點中去,也就是我們所說的服務設計,這樣品牌的影響力才能逐漸深入人心。今天我們說的視覺圖形設計只是品牌設計中的冰山一角,是最容易被普通用戶感知的一層。








            天天看片高清影视在线观看