如何解決UI設(shè)計中的同質(zhì)化

　　解決設(shè)計同質(zhì)化問題，是我們每個設(shè)計師必須要具備的能力，但是又不能為了不一樣而不一樣，所以以自身品牌出發(fā)來做差異化，才是正確的方式。今天AAA教育郭老師就給大家講講如何解決UI設(shè)計中的同質(zhì)化。
 

　　最近看了很多別人家的app，總結(jié)了一些視覺觸點，可以融入我們的品牌基因，大概分為以下幾類：
 

　　大綱如下：
 

　　1.控件類
 

　　2.頁面類
 

　　3.標(biāo)識類
 

　　4.動效類
 

　　1.控件類
 

　　不用解釋太多，這一類就是指一些常用控件，比如按鈕、搜索框、彈窗等等，我們可以依次來看下案例
 

　　1.1 按鈕
 

　　按鈕雖然不適合做全局差異化，但是對于一些特殊化的按鈕，是可以有一些特殊化處理的，比如一零零一彈窗上、登錄頁上的按鈕，都有融入一些特殊化的品牌基因：

 

　　1.2.彈窗
 

　　彈窗是很好融入品牌基因的觸點，例如叭噠的彈窗：

 

　　1.3 下劃線
 

　　大部分app產(chǎn)品中都會有下劃線，這是一個非常利于視覺發(fā)揮的觸點，比如一零零一中，他的下劃線，是一個橢圓：

 

　　這個橢圓來自他們家貓貓出來的洞口形狀：

 

　　1.4.搜索框
 

　　搜索框很容易被我們忽略，但其實它也可以融入一些品牌基因，比如波洞的機械基因，融入在搜索框的樣式：

 

　　就是對搜索框的差異化設(shè)計。
 

　　1.5.滑桿
 

　　如果你的產(chǎn)品有播放器體系，那播放器的滑桿，也是可以融合品牌形象的，比如b站和波洞的滑桿：

 

　　但切記形象不要搞得太復(fù)雜，不然就有點本末倒置了。
 

　　1.6.占位圖
 

　　在圖片未加載出來的時候，會有一個默認占位圖，這個占位圖可以使用品牌符號或者吉祥物，例如波洞的這個占位圖：

 

　　2.頁面類
 

　　這一類一般都是整個頁面，比如閃屏啊、活動頁面啊、空頁面等等。
 

　　我們看看實例：
 

　　2.1 閃屏
 

　　每次打開app都會看到一張閃屏，他的目的是緩解用戶等待時間，也是很好的植入品牌的觸點，比如嗶哩嗶哩漫畫就用了品牌吉祥物：

 

　　2.2.個人中心
 

　　還是叭噠，個人中心頭圖也融入了品牌形象：

 

　　當(dāng)然他這個形象不是為了加而加，它配合了養(yǎng)寵物的功能來進行設(shè)計的。
 

　　2.3活動入口及活動頁面
 

　　我們經(jīng)常會做一些活動放在產(chǎn)品里，有些活動除了頁面頭圖以外，還會有一個活動入口，這個入口漂浮在頁面之上。
 

　　不論是活動入口還是頁面頭圖，都可以與品牌吉祥物結(jié)合來進行設(shè)計，比如咚漫的：

 

　　2.4.登錄頁
 

　　登錄頁是每個產(chǎn)品都會有的，也是很好的植入品牌基因的觸點，或是logo、或是品牌形象。
 

　　比如一零零一的登錄頁面，就結(jié)合了品牌形象：

 

　　2.5.空頁面
 

　　空頁面就是在頁面沒有內(nèi)容時候的一種空狀態(tài)，很好的一個觸點，比如躺平的空頁面結(jié)合了自家形象，再配合差異化構(gòu)圖：

 

　　整挺好!
 

　　3.標(biāo)識類
 

　　以前寫過很多關(guān)于圖標(biāo)融入品牌基因的文章，圖標(biāo)就是標(biāo)識類的一種，除此之外還有一些標(biāo)簽、圖形之類的都屬于標(biāo)識類，看下案例：
 

　　3.1.圖標(biāo)
 

　　圖標(biāo)這個觸點，以前在品牌基因法里經(jīng)常提到，就不多說了，看下咚漫的這組分類圖標(biāo)，結(jié)合吉祥物的表情來設(shè)計的：

 

　　還是挺生動有趣的。
 

　　3.2排行榜序號圖形
 

　　排行榜都會有前三名，這前三名不整點特殊化處理，怎么顯得人家高貴呢，比如顏色方面經(jīng)常使用的手法就是金銀銅，而圖形其實就可以從品牌圖形來切入，比如閃現(xiàn)一下的前三名就用品牌圖形：

 

　　3.3等級標(biāo)識
 

　　很多產(chǎn)品都會區(qū)分用戶的等級，一旦區(qū)分就會涉及到很多等級相關(guān)的內(nèi)容，比如等級標(biāo)識、等級卡片等等。
 

　　這些內(nèi)容都可以基于自身的品牌形象來進行設(shè)計，比如我們看下閃現(xiàn)一下app，他的等級卡片、等級標(biāo)識，都有用到他們的品牌形象：

 

　　4.動效類
 

　　4.1.加載動畫
 

　　這個觸點就不多說了，太多產(chǎn)品都在用了，比如b站的這個小電視：

 

　　4.1.點擊動效
 

　　這除此之外，其實一些點擊動效也可以做一些品牌基因的融入，比如波洞進入首頁時有一個波紋的品牌動效：

 

　　這個動效不僅使用在這里，在icon的點擊動效也進行了植入：

 

　　從而形成了一個非常強烈的記憶點。
 

　　總結(jié)
 

　　其實除了這些上面的這些例子外，還有很多都應(yīng)該都可以于品牌基因相互結(jié)合，我這里只當(dāng)拋磚引玉。
 

　　大家仔細思考，你會發(fā)現(xiàn)他們并不是出自同一個app，因為并不是所有的觸點都適合我們的產(chǎn)品，切記不能為了差異而差異，產(chǎn)生過度設(shè)計的現(xiàn)象。
 

　　長點心，比啥都強!
 

　　因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。