品牌設計的植入-APP設計5

品牌專業(yè)網(wǎng)站設計，對移動互聯(lián)網(wǎng)時代的的產(chǎn)品質(zhì)量提升帶來了更多的可能性。也對設計師本身的平面視覺技能帶來了更大的機會和挑戰(zhàn)。APP為什么需要品牌設計,距離上一篇App系列文章已經(jīng)過去兩個星期了，我除去教學生的時間，都在準備這篇文章的資料，因為這篇文章的內(nèi)容除了大量的截圖還有視頻需要處理。上篇文章有人留言說文字太多，懶得看。我想說我的文章是寫給愛學習的同學看的，不是娛樂貼。所以這篇文章依然很長，干貨十足。
現(xiàn)在打開各種設計網(wǎng)站，去尋找App界面設計參考。你會發(fā)現(xiàn)如果去掉圖標，僅僅去看界面設計，很多App的界面設計差異性非常小。App設計有一種同質(zhì)化的傾向。
在產(chǎn)品型公司，UI設計師的工作流程一般是這樣的，和產(chǎn)品經(jīng)理或者交互設計師討論每個版本的規(guī)劃，在這個討論過程中用草圖的形式畫出大致的流程。之后將流程圖細化并分析使用上的便利性和技術上的可行性，然后設計師將界面設計好，經(jīng)過評審沒有問題，直接輸出給程序員。這是一個標準化的流水作業(yè)流程，留給設計師發(fā)揮的時間和空間并不多，更多時候是以功能實現(xiàn)為第一需求。另外的有部分原因是設計師趨向于保守設計，遵循各種平臺規(guī)范，這樣的保守設計不容易出錯。因為個性的設計的App可能非常成功，也可能是大家眼中的異類。以上的原因?qū)е潞芏嗌虡I(yè)的App設計的大同小異。

經(jīng)過這幾年的移動創(chuàng)業(yè)風潮，大量App設計已經(jīng)存在，現(xiàn)在設計師遇到的不是從零起步，如何設計一款App的問題了。而是面臨各種改版設計的需求，如何設計一款和競品有差異化設計的界面，這是UI設計師越來越迫切的需求。面對現(xiàn)在App設計趨同的市場行情，如果誰可以做出不一樣的設計，那么你就可以鶴立雞群。差異化設計這對界面設計師也是一個巨大的挑戰(zhàn)和機會。
APP品牌植入設計
品牌設計是在企業(yè)自身正確定位的基礎之上，基于正確品牌定義下的視覺溝通。我們平?？吹降膌ogo設計只是品牌設計視覺延伸的一部分。因為移動界面設計的同質(zhì)化嚴重，所以越來越多的公司重視對App的品牌塑造，希望通過品牌的塑造，使用戶快速的對產(chǎn)品形象進行有效深刻的記憶。 App中的 Logo圖標、界面的視覺風格，甚至App Store上的介紹和宣傳Banner等，都是品牌設計的組成部分。 App的品牌設計，對移動互聯(lián)網(wǎng)時代的的產(chǎn)品質(zhì)量提升帶來了更多的可能性。也對設計師本身的平面視覺技能帶來了更大的機會和挑戰(zhàn)。
移動端產(chǎn)品品牌視覺設計的點：
圖標：APP圖標、底部導航欄、其他頁面的功能圖標
字體：字體（APP可以內(nèi)置字體包變換字體）、字號
頁面設計：引導頁、啟動頁、刷新控件
排版：元素的留白
圖片：頁面的配圖、占位圖片、頁面的情感插畫
線下物料：線下的各種物料及其衍生品。

APP品牌設計的步驟
1、 發(fā)掘產(chǎn)品的氣質(zhì)
2、 品牌圖形的提煉
3、 品牌圖形的幾何化輪廓
4、 品牌圖形在界面設計中的應用
5、 視覺語言的一致性

第一步：發(fā)掘產(chǎn)品的氣質(zhì)
當我們看一個人的時候，會根據(jù)他的外表+內(nèi)涵，我們會對他有第一個印象的認知，這個就是氣質(zhì)。APP也一樣。App的外表是我們產(chǎn)品的視覺設計呈現(xiàn)，也就是這個產(chǎn)品看起來讓人感覺如何。內(nèi)涵就是App的內(nèi)容和功能的呈現(xiàn)，就是能否進一步留住用戶駐足。所以產(chǎn)品就是這樣，呈現(xiàn)什么樣的氣質(zhì)，就會吸引來什么樣子的用戶。

常見的品牌氣質(zhì)
1、 高冷氣質(zhì)
2、 文藝氣質(zhì)
3、 時尚氣質(zhì)
4、 活力向上
5、 個性張揚

1、高冷氣質(zhì)
高冷的人自帶著一種生人勿近的冷淡氣質(zhì)，喜歡穿著黑白灰。朋友不是很多，不需要融入小圈子。然后嚴格按照自己任性極致的標準篩選良莠，深交的少，淺交的保持距離懶得討好。所謂可親而難以靠近。所以高冷氣質(zhì)的應用不需要討好所有人，只服務好這個App定位的群體就好。例如（圖1-1）的Gucci應用，整個界面只有黑白以及一些色彩豐富的配圖，非常的簡潔明快，沒有任何多余的修飾，隱隱透露出大牌的傲嬌。
2、文藝氣質(zhì)
這個說到文藝氣質(zhì)，其實就是一個字“范兒”， 如何才能有范兒？首先要有文化底蘊，素質(zhì)修養(yǎng)，如果沒有的話，裝不像的。具體什么樣，可以去看看一些詩人，搞民謠音樂的人的裝扮，尤其是上個世紀的。穿著寬松的毛衣，戴著圓圓的黑框眼鏡，搞一條素色的圍巾，拿個老式的手動旁軸相機，留著稀疏的胡渣，或是女生長發(fā)飄飄的感覺。所以應用從界面設計到頁面內(nèi)容，都要有足夠的范兒，這樣才是文藝的徹底。例如（圖1-2）最美有物，從界面設計到內(nèi)容標題的文字都散發(fā)出足夠的文藝氣質(zhì)。這種范兒可能不是所有人都學的來的，比如讓做B2C綜合電商的應用學這樣的氣質(zhì)就不倫不類，也許這就是產(chǎn)品基因吧。
3、時尚氣質(zhì)
所謂時尚，是時與尚的結(jié)合體。代表當前世界對社會某項事物崇尚的潮流。是一個時期的流行風氣與社會環(huán)境，時尚引領潮流，是流行文化的表現(xiàn)。對時尚最為敏感的就是家居、服飾行業(yè)。沒有人希望自己買來的衣服或者家具是一個落伍淘汰的風格。當前的在界面設計中最流行的就是使用各種幾何元素，通過點線面的搭配塑造頁面的時尚感。例如（圖1-3）男衣邦應用，從啟動界面到首頁都穿插了非常多的幾何線條，界面具有濃濃的幾何構(gòu)成時尚感。
4、活力向上
有活力的感覺，就是充滿了朝氣。 Same是一個非常有個性的社交應用。你安裝完App打開應用首先呈現(xiàn)的就是兩個陽光可愛的美少女。通過開場的短片秀（圖1-4），就給人信心滿滿，自信陽光的感覺。有些人，從頭到腳散發(fā)出一股吸引你的氣息，這就是所謂志趣相投。有些產(chǎn)品也一樣，你可以在上面找到和你一樣特質(zhì)的人群。Same定位的用戶是90后、00后的年輕人，他們內(nèi)心世界豐富，喜歡新鮮事物。所以界面內(nèi)的表情（圖1-4），是繼line表情之后，對當前年輕人群身份、氣質(zhì)、角色和代入感相當強的作品。
5、個性張揚
個性意味和人家不一樣，不是隨大流的那種，張揚就是外向活潑，給人不見外的感覺，到任何地方都能引起別人的關注，張揚的壞處就是，過分的顯擺自己，容易招人嫉妒。所以你的應用設計的明顯和別人不一樣。兩種結(jié)果。好評如潮，說這個設計不一樣，有自己特點。還有一種結(jié)果就是，這個應用怎么能這樣設計，太不符合主流習慣了。例如（圖1-6）野獸派應用，這是綜合類的時尚類家居相關售賣平臺。做為一個電商類的應用，他的設計明顯是非常個性的，沒有傳統(tǒng)的底部標簽欄模塊設計，而是首頁就是一整張插畫，作為首頁各種子模塊店鋪的入口。這樣的設計非常有個性，讓人一下就記住了。所以UI設計師需要做的是提煉出的產(chǎn)品氣質(zhì)并轉(zhuǎn)化為具象化的視覺語言。讓用戶通過界面這層介質(zhì)感知到你產(chǎn)品的氣質(zhì)。
第二步：品牌圖形的提煉
這個過程與平面設計logo基本類似，其實某種程度上就是設計logo，現(xiàn)在的App圖標游戲圖標還會使用復雜的光影質(zhì)感。其他主流的商業(yè)應用圖標都是極簡的扁平圖標。所以更需要一個獨特的品牌圖形。

1、具象圖形
通常情況下，具象圖形的LOGO設計會更受到移動設計的親睞。部分原因是這些LOGO圖形容易辨認，可以更清晰的表述出應用是做什么的。例如（圖1-7）里的應用只看圖形就能很清晰的明白這個應用的屬性或者應用的功能。只留給大家很少的開放性解釋空間。有些應用的圖形甚至很聰明地運用了雙關含義和隱藏圖形。例如OFO既使用品牌的名稱，又表達了自行車的圖形符合共享單車的屬性。是一個非常 成功的logo品牌圖形。
2、抽象的幾何圖形
抽象圖形，抽象圖形LOGO設計同樣很適用于多元化企業(yè)，因為它們傳達出的是情緒和基調(diào)，而非具體的公司類型。一個LOGO未必需要直接反映出公司是做什么的。想想Nike旋風，McDonald’s金色拱門，或是Apple的LOGO。所以有時候App的圖標也是如此，更多通過一些抽象的圖形傳達一些特別的含義。比如愛彼迎的圖形背后有四層含義（圖1-8）。首先，這是一個字母A，代表了Airbnb；第二，這像是一個人張開雙手，代表了人；第三，這像是一個標記地理位置的符號，代表地點；第四，這是一個倒過來的愛心，代表了愛。
3、吉祥物
互聯(lián)網(wǎng)公司非常喜歡用動物做為公司的吉祥物。這些互聯(lián)網(wǎng)公司的logo有很多是采用讓人萌化的動物圖案，這成了一種風氣，感覺互聯(lián)網(wǎng)的圈子成了動物園一樣。比如京東的狗（圖
第三步：品牌圖形的幾何化輪廓
我經(jīng)常和學生強調(diào)，繪畫和設計是兩回事情，也許你會畫但并不意味著設計可以做的好?，F(xiàn)在主流App的LOGO圖形傾向于扁平化設計，可能就是一個簡單的剪影圖形。比如你要設計一個表現(xiàn)自然或者格調(diào)感的應用。設計師想使用“鹿”這個圖形。如果直接用鋼筆勾勒鹿的圖形（圖1-10），那么這個呈現(xiàn)的是一副剪影插畫。這個圖形又很多細節(jié)，線條充滿了不規(guī)則感，這些不規(guī)則線條對于一個LOGO設計來說是非常冗余的。
1、設計輔助線
好的品牌圖形是需要對基本圖形進行2次提煉，去除一些不必要線條細節(jié)，對原有的剪影圖形進行幾何抽象化。我們經(jīng)?？吹皆诋婰OGO時候出現(xiàn)的各種輔助線（圖1-11），這些輔助線以各種圓為參考形。輔助線的作用是幫助設計師用規(guī)整的幾何圖形去切分原有的剪影。讓線條更加規(guī)整幾何化。這樣幾何規(guī)整化的圖形已經(jīng)和不規(guī)則的偏插畫的剪影圖形區(qū)分開來了。現(xiàn)在更像一個有設計感的圖標圖形了。當然現(xiàn)在這樣的設計輔助線，在一些設計師中有濫用的嫌疑。在一些不需要的加輔助線的地方，加了很多線條，營造一種專業(yè)的感覺。這種做法在有經(jīng)驗的設計師眼中是非常可笑的。
2、設計的圖形語言
經(jīng)過幾何規(guī)整化的圖形只能算是一個好的圖標，離好的品牌圖形還有一段距離。品牌圖形一定要有自己獨特的設計，講白圖形一定要有自己的特色，讓別人一下記住你。例如（圖1-12）的設計語言就是流暢柔和的線條，通過這個極簡的線條構(gòu)造了鹿的品牌圖形。
3、提取典型的特征
由于移動設計的LOGO需要在一個圓角矩形中展示，并沒有那么大面積供設計師發(fā)揮。所以需要選取最具有代表的形的局部圖形（圖1-14），比如鹿的頭部是最具有代表性的圖形部分。
第四步：品牌圖形在界面設計中的運用
1、 引導頁
抽象形式感的圖形，與廣告頁進行呼應。點擊App圖標，第一次打開應用的界面。會呈現(xiàn)一組引導頁。引導頁是用戶進入主界面之前，首先見到的頁面。這是產(chǎn)品給用戶的第一印象。由于第一印象的好壞會極大地影響到后續(xù)的產(chǎn)品使用體驗，因此我們需要花一些時間去精心設計引導頁。匠物APP的應用通過一個動畫，把LOGO的圖形放大（圖1-15），映射在引導頁的背景上。這樣品牌圖形前后有了一個呼應，加深了用戶的印象。
現(xiàn)在很多應用都放棄了四頁引導頁的傳統(tǒng)做法，而是偏向內(nèi)置視頻的做法。視頻具有更好的視覺動態(tài)效果。比如最美有物引導頁使用了一段視頻（圖1-16），使用各種絢麗效果，最后一幀放出品牌logo圖形，這種手法是不是很像我們以前看的各種國外大牌廣告。比如耐克的廣告從來不會放什么XX產(chǎn)品就是好的廣告，而是喜歡放一段情懷畫面，最后一個大大的LOGO告訴消費者我這是耐克的廣告。
2、 啟動頁
每次打開一個App，都會看到啟動頁，所以這是一個品牌露出非常高頻次的頁面，大多數(shù)應用都是品牌圖形+ Slogan的設計形式，比如Life的啟動頁（圖1-17），直接把品牌Slogan反復在啟動頁，和隨后的廣告頁反復呈現(xiàn)。如果覺得直接放品牌圖形+背景的做法，比較老套的話，也可以嘗試在品牌圖形上進行2次設計。比如良倉的啟動頁（圖1-18）運用logo圖標的典型輪廓進行2次創(chuàng)作。

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

方法1使用幾何圖形
Enjoy的品牌圖形有一個非常鮮明的圖形是那個波浪線，Enjooy下拉刷新的時候使用了這個波浪圖形（圖1-19），讓品牌圖形無處不在。當然使用的圖形也可以是一種圖形的設計風格，比如造作的全局是較為硬朗的圖形，這點 在他的個人中心就可以看出來，他的個人中心（圖1-20）都是非常硬朗的直接圖標。所以他的刷新使用了一個矩形做為刷新圖形
方法2使用吉祥物圖形
在界面設計中嗎，必須有一個設計語言貫穿，這樣你的設計才會有特色，這個語言可以是一個圖形，也可以是一個吉祥物卡通形象。如果有這樣一個形象存在，你的界面設計會一下提升不少的特色。
4、 占位圖片
在界面設計中，很多圖片需要考慮數(shù)據(jù)為空的情況，也有可能由于網(wǎng)絡的情況圖片可能沒有加載出來，這些都需要設計一個默認的占位圖片。例如最美有物的品牌圖形是一個鹿（圖1-23），他的個人中心默認頭像就是一個鹿的占位圖.需要注意的是在社交或者內(nèi)容社區(qū)，品牌圖形的個人頭像有時候是需要慎重使用的，因為那樣會讓人誤以為這是官方頭像。
5、 界面其他小元素
有時候界面中功能會配上一些圖標，讓設計更好的釋義。對于一些約定俗成的功能，如果把這個圖標去除也不會很明顯的影響含義。這個時候可以考慮使用特別的品牌圖形替代。比如life的卡片banner上的點贊功能圖標，使用了品牌圖形指紋替代來傳統(tǒng)的心形（圖1-24）。從體驗來說，這個數(shù)字很容易讓人聯(lián)想到這是評論數(shù)或者點贊數(shù)。所以替換為品牌圖形對于用戶體驗并沒有明顯的降低。
六、底部導航欄圖標
典型的IOS應用的結(jié)構(gòu)是把App的主要模塊放在底部導航進行切換，底部導航一般分為4到5個模塊。以圖標+文字的設計形式進行展示。那么這些圖標就可以與品牌圖形相結(jié)合，加深用戶的印象。

方法1：品牌圖形應用在首頁圖標
首頁最常見使用的圖標是一個房子的圖形，這個圖形來源于PC時代的面包屑結(jié)構(gòu)，Home的圖形代表家，代表不管你在網(wǎng)站哪個層級，點擊Home圖標像回家一樣可以回到起始的位置。很多應用的圖標上的logo，都是一個讓人印象深刻的主圖形，那么我們可以直接把這個logo圖形做為應用的首頁模塊圖標使用。這樣的好處很明顯，每次用戶打開應用后，都會看到這個圖形，反復加強了用戶對App的logo的印象。例如大眾點評、餓了么、花瓣、貓途鷹、網(wǎng)易云音樂提取各自品牌圖形（圖1-25），應用在了App底部導航欄首頁模塊上。
方法2：品牌名稱應用在底部導航欄
一些應用的名稱是字母構(gòu)成，為了強化用戶對于應用名稱的認知，直接把名稱做為標簽欄的圖標。例如MONO（圖1-26）應用的標簽欄圖標，設計的非常大膽，提取logo上面的4個字母M、O、N、O后，直接將其作為圖標。但是這種設計策略的缺陷也很大，每個字母和功能模塊本身的含義并沒有直接聯(lián)系，對用戶幫助理解模塊有一定的困難。所以這種方法適合一些極客小眾App去使用。

第五步：視覺語言的一致性
1、顏色的一致性
在完成了產(chǎn)品的整體風格和功能構(gòu)架后，我們可以著眼于一些細節(jié)層面的設計。比如統(tǒng)一你的產(chǎn)品中，色彩和圖形的意義。比如設計一套套標準的配色方案，：用品牌色代表可點擊的按鈕，用橙色代表與金錢有關的操作，用藍色代表鏈接，用戶對這些顏色的含義就進行了學習和習慣。讓用戶對這個App內(nèi)的顏色形成記憶。例如好物（圖1-27）好物每個可點擊的按鈕都是品牌黃色。
2、圖形設計的一致性
圖形設計包含各種插圖和圖標。對于插圖如果是一個人設計的，那么更容易形成統(tǒng)一的風格。
插圖的風格和圖標的風格也需要保持一致。一些應用的插圖設計師和界面設計師是2個人，插圖的風格偏卡通或者手繪，而界面的圖標設計偏規(guī)整。那么這個風格就顯得格格不入。比如Same（圖1-28）的插圖風格和圖標風格就協(xié)調(diào)的非常好。
3、元素的一致性
界面的本質(zhì)是信息傳遞的一種介質(zhì)，界面中包含各種繁雜的信息。所以如果我們希望通過設計讓界面自己會說明，我們可能會加上一些樣式的區(qū)分，比如我把標題加粗加大，把輔助信息變淺色變小一些，但這只能區(qū)分主次，很難具體說明每一部分的意義；那我還可以給一些信息加上可識別的圖標。Life采用的是圖標+標題+欄目上下排版形式（圖1-29）。這樣的設計好處是每個模塊很清晰，且用戶可以很清晰的對應分類各種子頻道。所以設計樣式不是隨意的選擇，單純的看視覺美學樣式。而是需要有效的對產(chǎn)品運營的需求進行支撐。
設計結(jié)語
一個成功商業(yè)產(chǎn)品，首先需要所有團隊成員有一個共同的目標，并且大部分人具有品牌思維和設計思維，將其落實到和用戶的每一個觸點中去，也就是我們所說的服務設計，這樣品牌的影響力才能逐漸深入人心。今天創(chuàng)新互聯(lián)說的視覺圖形設計只是品牌設計中的冰山一角，是最容易被普通用戶感知的一層。寫完這一篇《品牌設計在界面設計中的植入》，感覺還有很多沒有說完。所以下一篇繼續(xù)說品牌設計的內(nèi)容，題目是《品牌設計在圖標設計中的運用》。
本文來自成都品牌網(wǎng)站建設網(wǎng)站設計制作公司-創(chuàng)新互聯(lián)
標簽：成都網(wǎng)站設計,網(wǎng)站開發(fā),重慶網(wǎng)站建設公司,成都網(wǎng)頁設計公司

網(wǎng)站標題：品牌設計的植入-APP設計5
本文路徑：http://www.bm7419.com/news46/161046.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有App設計等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)