旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國(guó)統(tǒng)一咨詢熱線:010-5367 2995
首頁(yè) > 熱門文章 > UI設(shè)計(jì) > 如何解決UI設(shè)計(jì)中的同質(zhì)化

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

時(shí)間:2020-09-10來(lái)源:m.5wd995.cn點(diǎn)擊量:作者:Gella
時(shí)間:2020-09-10點(diǎn)擊量:作者:Gella

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

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

  大綱如下:
 

  1.控件類
 

  2.頁(yè)面類
 

  3.標(biāo)識(shí)類
 

  4.動(dòng)效類
 

  1.控件類
 

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

  1.1 按鈕
 

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

 



 

  1.2.彈窗
 

  彈窗是很好融入品牌基因的觸點(diǎn),例如叭噠的彈窗:

 



 

  1.3 下劃線
 

  大部分app產(chǎn)品中都會(huì)有下劃線,這是一個(gè)非常利于視覺(jué)發(fā)揮的觸點(diǎn),比如一零零一中,他的下劃線,是一個(gè)橢圓:

 



 

  這個(gè)橢圓來(lái)自他們家貓貓出來(lái)的洞口形狀:

 



 

  1.4.搜索框
 

  搜索框很容易被我們忽略,但其實(shí)它也可以融入一些品牌基因,比如波洞的機(jī)械基因,融入在搜索框的樣式:

 



 

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

  1.5.滑桿
 

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

 



 

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

  1.6.占位圖
 

  在圖片未加載出來(lái)的時(shí)候,會(huì)有一個(gè)默認(rèn)占位圖,這個(gè)占位圖可以使用品牌符號(hào)或者吉祥物,例如波洞的這個(gè)占位圖:

 



 

  2.頁(yè)面類
 

  這一類一般都是整個(gè)頁(yè)面,比如閃屏啊、活動(dòng)頁(yè)面啊、空頁(yè)面等等。
 

  我們看看實(shí)例:
 

  2.1 閃屏
 

  每次打開(kāi)app都會(huì)看到一張閃屏,他的目的是緩解用戶等待時(shí)間,也是很好的植入品牌的觸點(diǎn),比如嗶哩嗶哩漫畫就用了品牌吉祥物:

 



 

  2.2.個(gè)人中心
 

  還是叭噠,個(gè)人中心頭圖也融入了品牌形象:

 



 

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

  2.3活動(dòng)入口及活動(dòng)頁(yè)面
 

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

  不論是活動(dòng)入口還是頁(yè)面頭圖,都可以與品牌吉祥物結(jié)合來(lái)進(jìn)行設(shè)計(jì),比如咚漫的:

 



 

  2.4.登錄頁(yè)
 

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

  比如一零零一的登錄頁(yè)面,就結(jié)合了品牌形象:

 



 

  2.5.空頁(yè)面
 

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

 



 

  整挺好!
 

  3.標(biāo)識(shí)類
 

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

  3.1.圖標(biāo)
 

  圖標(biāo)這個(gè)觸點(diǎn),以前在品牌基因法里經(jīng)常提到,就不多說(shuō)了,看下咚漫的這組分類圖標(biāo),結(jié)合吉祥物的表情來(lái)設(shè)計(jì)的:

 



 

  還是挺生動(dòng)有趣的。
 

  3.2排行榜序號(hào)圖形
 

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

 



 

  3.3等級(jí)標(biāo)識(shí)
 

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

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

 



 

  4.動(dòng)效類
 

  4.1.加載動(dòng)畫
 

  這個(gè)觸點(diǎn)就不多說(shuō)了,太多產(chǎn)品都在用了,比如b站的這個(gè)小電視:

 



 

  4.1.點(diǎn)擊動(dòng)效
 

  這除此之外,其實(shí)一些點(diǎn)擊動(dòng)效也可以做一些品牌基因的融入,比如波洞進(jìn)入首頁(yè)時(shí)有一個(gè)波紋的品牌動(dòng)效:

 



 

  這個(gè)動(dòng)效不僅使用在這里,在icon的點(diǎn)擊動(dòng)效也進(jìn)行了植入:

 



 

  從而形成了一個(gè)非常強(qiáng)烈的記憶點(diǎn)。
 

  總結(jié)
 

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

  大家仔細(xì)思考,你會(huì)發(fā)現(xiàn)他們并不是出自同一個(gè)app,因?yàn)椴⒉皇撬械挠|點(diǎn)都適合我們的產(chǎn)品,切記不能為了差異而差異,產(chǎn)生過(guò)度設(shè)計(jì)的現(xiàn)象。
 

  長(zhǎng)點(diǎn)心,比啥都強(qiáng)!
 

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



 

預(yù)約申請(qǐng)免費(fèi)試聽(tīng)課

填寫下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖