項(xiàng)目背景：

根據(jù)咪咕文化戰(zhàn)略需求，各子公司業(yè)務(wù)有拓展到國(guó)外市場(chǎng)的規(guī)劃，一級(jí)用戶(hù)中心和統(tǒng)一認(rèn)證SDK界面需要針對(duì)海外用戶(hù)的需求和使用習(xí)慣，進(jìn)行全新的UI設(shè)計(jì)，以SDK的形式方便各子公司APP產(chǎn)品集成。

現(xiàn)有國(guó)內(nèi)版本的視覺(jué)問(wèn)題：

1.     咪咕的品牌定位是樂(lè)玩世界，現(xiàn)有基線產(chǎn)品形象不符合公司氣質(zhì)，讓用戶(hù)在使用產(chǎn)品時(shí)留下深刻的品牌印象是個(gè)問(wèn)題

2.    對(duì)于信息層級(jí)的關(guān)系處理，頁(yè)面的元素比例分布不夠合理

3.    視覺(jué)樣式老舊，跟不上設(shè)計(jì)趨勢(shì)

產(chǎn)品認(rèn)知和定位:

國(guó)際版主要針對(duì)海外市場(chǎng)的華人和華裔，可能是留學(xué)海外的年輕學(xué)生，也可能是商界的白領(lǐng)精英，這些人群往往對(duì)生活品質(zhì)有獨(dú)特的追求，個(gè)性化要求強(qiáng)烈。通過(guò)對(duì)咪咕用戶(hù)數(shù)據(jù)分析，咪咕用戶(hù)群主要分布在城市，快節(jié)奏的生活方式，使得人們對(duì)注冊(cè)登錄的使用痛點(diǎn)主要集中在快速，操作便捷，輕量、效率對(duì)于用戶(hù)來(lái)說(shuō)是第一位的。此次設(shè)計(jì)不僅需要展示產(chǎn)品的個(gè)性化一面，也要保證用戶(hù)使用產(chǎn)品的高效率。

海外產(chǎn)品分析:

一級(jí)用戶(hù)中心統(tǒng)一認(rèn)證sdk產(chǎn)品覆蓋的咪咕業(yè)務(wù)較廣，包括閱讀、視頻、游戲、漫畫(huà)、音樂(lè)，業(yè)務(wù)方向偏娛樂(lè)化。所以在競(jìng)品對(duì)象在選擇上，挑選了國(guó)外使用率較高的幾款偏娛樂(lè)化的APP。競(jìng)品對(duì)象：Instagram（圖片），facebook（社交），snapchat（社交），shazam（音樂(lè)），skype（社交），twitter（社交），musical.ly（音樂(lè)）pocket（閱讀）Youtube（視頻），ouora(閱讀)

西方地區(qū)和東方地區(qū)人們對(duì)產(chǎn)品喜好的視覺(jué)差異不同，由上圖分析，發(fā)現(xiàn)國(guó)外產(chǎn)品對(duì)登錄注冊(cè)頁(yè)的設(shè)計(jì)偏好：

1.     Instagram、facebook等主流app，都喜歡采用主色調(diào)大色塊背景設(shè)計(jì)，考慮的sdk產(chǎn)品需要接入到各業(yè)務(wù)產(chǎn)品中，主色調(diào)大色塊背景設(shè)計(jì)適配成本高，不適用sdk產(chǎn)品。

2.   Instagram、  musical.ly等都采用動(dòng)態(tài)背景設(shè)計(jì)，增加頁(yè)面生命感。

3.    列舉的海外產(chǎn)品整體視覺(jué)風(fēng)格偏向簡(jiǎn)潔,sdk產(chǎn)品設(shè)計(jì)風(fēng)格方向可以往此方面考慮。

2017年互聯(lián)網(wǎng)設(shè)計(jì)趨勢(shì):

1.     半扁平化設(shè)計(jì)，簡(jiǎn)潔輕量的設(shè)計(jì)語(yǔ)言

輕柔的陰影增加了深度和復(fù)雜性，卻不會(huì)破壞扁平化設(shè)計(jì)的感覺(jué)，是扁平化趨勢(shì)新增的一個(gè)特征。

2.    幾何圖形運(yùn)用（圖案，線條和圓等）

基本圖形的運(yùn)用，創(chuàng)造不同的信息韻律

3.    大膽用色 

使用大膽的顏色來(lái)強(qiáng)調(diào)，和扁平化設(shè)計(jì)相襯

4.    動(dòng)效運(yùn)用

動(dòng)效越來(lái)越多運(yùn)用到，賦予頁(yè)面生命，帶來(lái)驚喜。

設(shè)計(jì)方案:

基于現(xiàn)有的視覺(jué)問(wèn)題，產(chǎn)品認(rèn)知和定位、海外產(chǎn)品分析和設(shè)計(jì)趨勢(shì)分析，基本確定視覺(jué)設(shè)計(jì)的基調(diào)方向：高端、品質(zhì)、輕量、快捷。針對(duì)不同人群的喜好，從登錄頁(yè)面著手設(shè)計(jì)，提出以下風(fēng)格設(shè)計(jì)方案。

通過(guò)確定設(shè)計(jì)方向基調(diào)，提取簡(jiǎn)約、品質(zhì)、輕盈三個(gè)關(guān)鍵詞發(fā)散，提取設(shè)計(jì)元素

視覺(jué)展示：

設(shè)計(jì)分析：

1.半扁平化設(shè)計(jì)

迎合設(shè)計(jì)的潮流趨勢(shì)，高飽和度的顏色，輕柔的陰影增加了深度和復(fù)雜性，讓頁(yè)面更有活力和呼吸感。體現(xiàn)簡(jiǎn)約、品質(zhì)和輕盈的主題。

2.幾何圓形元素運(yùn)用，呼應(yīng)咪咕logo的圓形設(shè)計(jì)

咪咕的品牌logo里面運(yùn)用了大量的圓形設(shè)計(jì)，此次把圓形作為主題的載體，不僅呼應(yīng)簡(jiǎn)約、品質(zhì)和輕盈的主題，也是在傳達(dá)品牌的基調(diào)。

                                                                                                               謝謝觀看   BY汀煙輕冉冉