思來(lái)想去,可以分成以下三個(gè)階段:
前期：設(shè)計(jì)執(zhí)行偏多
中期：能夠準(zhǔn)確定義產(chǎn)品的風(fēng)格走向,并把產(chǎn)品做出獨(dú)有的風(fēng)格調(diào)性
后期：有很好的設(shè)計(jì)影響力,可以從行業(yè)角度出發(fā),助力行業(yè)的發(fā)展
我個(gè)人還在前期到中期的過(guò)渡中掙扎，盡可能的保證自己的產(chǎn)出是優(yōu)質(zhì)的精準(zhǔn)的，并且努力構(gòu)建產(chǎn)品的調(diào)性。有了調(diào)性,就有了被記憶的資本了.
那么如何做到優(yōu)質(zhì)且能夠被記憶的產(chǎn)出呢？我整理一下思路，在下面會(huì)介紹一些關(guān)鍵點(diǎn)，有不正確之處，大家可以共同討論。如大家所知，產(chǎn)品按照發(fā)展階段可以分為三段：探索期、成長(zhǎng)期、成熟期，下面主要針對(duì)的是處于探索期的產(chǎn)品，成長(zhǎng)期和成熟期的產(chǎn)品在某些點(diǎn)和探索期的不太一樣，不在這篇討論范圍之內(nèi)。
能夠被記憶的設(shè)計(jì)，可以拆分為：精準(zhǔn)的設(shè)計(jì)+有亮點(diǎn)的設(shè)計(jì)。關(guān)鍵思路閉環(huán)：了解－分析－創(chuàng)作－亮點(diǎn)-驗(yàn)證－修整.下面我會(huì)用最近的海外項(xiàng)目舉例說(shuō)明，聽(tīng)我慢慢說(shuō)來(lái)。
一、了解
了解可以拆分為4項(xiàng)：了解項(xiàng)目背景、了解目標(biāo)用戶、了解產(chǎn)品目標(biāo)、了解核心競(jìng)爭(zhēng)力
［了解項(xiàng)目背景］
開(kāi)始設(shè)計(jì)之前，必須要知道為什么要做？
舉個(gè)栗子，小哥哥約心儀小姐姐看電影，電影看到一半，發(fā)現(xiàn)小姐姐哭了，這時(shí)小哥哥要說(shuō)啥？直接說(shuō)：“你別傷心啦！”。那我可以肯定的說(shuō)，小姐姐此時(shí)內(nèi)心是翻白眼的，她也許會(huì)想：”你怎么知道我是難過(guò)的？其實(shí)我是看到熱血沸騰，喜極而泣??！“
所以說(shuō)我們必須了解表象背后的背景，才能順著背景往下探尋真相。
回到項(xiàng)目中來(lái)說(shuō)，此次之所以有海外項(xiàng)目，是由于國(guó)內(nèi)版本處于緩慢成長(zhǎng)期，我們需要擴(kuò)大用戶總量，參考日本韓國(guó)的發(fā)展路線，我們出海的時(shí)候到了，暫且選定北美和泰國(guó)為第一站。
［了解假設(shè)用戶］
那句老話”對(duì)癥下藥“，知道我們要拉取的用戶是誰(shuí)，才能迎合他們的喜好，才有可能設(shè)計(jì)出她們喜歡的東西，在海外項(xiàng)目中，此項(xiàng)目是全新從0到1的過(guò)程，和產(chǎn)品聊過(guò)之后得知，她們是想要快速的搶占海外市場(chǎng)，目標(biāo)針對(duì)的是北美的女性年輕用戶，年齡在30歲以下。注意了：這里我用的是假設(shè)用戶，因?yàn)橐粋€(gè)新產(chǎn)品其實(shí)是沒(méi)有用戶的。
［了解產(chǎn)品目標(biāo)］
有木有人會(huì)有以下疑惑，明明自己設(shè)計(jì)的東西很好看，為什么產(chǎn)品就不通過(guò)呢？其實(shí)很大可能性就是你們的目標(biāo)不一致造成的。產(chǎn)品想突出a，你卻把b做的無(wú)比閃耀，產(chǎn)品肯定看了要翻白眼！所以我通常下手設(shè)計(jì)之前，會(huì)再三和產(chǎn)品大大們溝通清楚，他們此次的目的是什么？是為了推某項(xiàng)功能？還是為了解決哪項(xiàng)用戶體驗(yàn)？
海外項(xiàng)目這種探索期的產(chǎn)品，目標(biāo)肯定是活下去，聚攏核心用戶，快速上線，試探用戶接受度,我們?cè)谡{(diào)研過(guò)程中，發(fā)現(xiàn)我們的競(jìng)品也在積極準(zhǔn)備海外版本，更驗(yàn)證了我們出海的決策是正確的。
［了解核心競(jìng)爭(zhēng)力］
一定要了解自己產(chǎn)品的優(yōu)勢(shì)，并把它用最合適的方式展示在用戶面前，這絕對(duì)能為產(chǎn)品加分；
這點(diǎn)和平時(shí)穿衣服類似，會(huì)穿衣服的小姐姐，會(huì)非常了解自己的優(yōu)勢(shì)在哪里？腿長(zhǎng)，好，我露腿；腰細(xì)，好，我穿有腰線的衣服，只有穿對(duì)衣服了，才能放大自己的優(yōu)勢(shì)哦。
設(shè)計(jì)亦是如此。這次的海外版本，我們挑選了海外所缺失的女性向作品，主打戀愛(ài)、BL、爆笑劇情類作品，且每部作品都保證有精致的畫(huà)質(zhì)、引人入勝的故事線、并且保持每天更新！
歸納以上核心競(jìng)爭(zhēng)力關(guān)鍵詞：內(nèi)容品類、爆更、畫(huà)面。
二、分析
分析有三大類：分析同類竟品，分析橫向類似產(chǎn)品，分析時(shí)下設(shè)計(jì)趨勢(shì)。
［同類競(jìng)品］
北美排名靠前的漫畫(huà)閱讀類app，從兩方面進(jìn)行分析；
閱讀模式和信息布局——國(guó)內(nèi)外在移動(dòng)端的閱讀行為是相同的，上下/左右翻頁(yè)；多是Ip 聚合與框架式的信息布局形態(tài)；
設(shè)計(jì)風(fēng)格——國(guó)外的app風(fēng)格是極度扁平化的，信息布局緊湊，無(wú)品牌吉祥物，有品牌圖形，但也接受人物類的品牌吉祥物，如下圖:
［橫向品類大眾產(chǎn)品］
分析了美國(guó)排名靠前的娛樂(lè)社交類app，大多數(shù)的icon都使用了較高飽和度的色彩；UI界面的主色調(diào)也基本繼承了icon的顏色，設(shè)計(jì)風(fēng)格極度扁平, age to age；如下圖:
【北美流行趨勢(shì)】
從各大設(shè)計(jì)網(wǎng)站截圖可以很容易的看出，有以下幾個(gè)共性：多彩，高飽和度，卡片化的展示,細(xì)膩的微交互,如下圖:
三、創(chuàng)作
到這個(gè)環(huán)節(jié)之后，就需要把前面獲取到的信息揉在一起去考慮，我一般會(huì)列舉所有的關(guān)鍵詞，并且把他們重新組合，找出共性，提煉出來(lái)一個(gè)主旨，也就是屬于這個(gè)項(xiàng)目獨(dú)有的設(shè)計(jì)語(yǔ)言。我得出的設(shè)計(jì)語(yǔ)言是：呼吸。
下面簡(jiǎn)單為大家介紹一下，我是如何把“呼吸”貫穿到界面設(shè)計(jì)中的。我劃分為三大類：節(jié)奏，維度，活力。
【呼吸之節(jié)奏】通過(guò)卡片化、差異化、柵格化來(lái)體現(xiàn)
卡片化的展示方式
元素區(qū)分開(kāi)，形成韻律
卡片能把封面和作品名稱打包，更凸顯整本的概念
海外版本初期內(nèi)容較少，采用雙列卡片布局方式，更能體現(xiàn)精致封面的細(xì)節(jié)，符合海外用戶喜好大圖這一特征
2.更強(qiáng)調(diào)差異化
局部采用complexion reduction的設(shè)計(jì)語(yǔ)言，用更大更突出的標(biāo)題字體，更多的負(fù)空間，來(lái)拉開(kāi)頁(yè)面信息層級(jí)，突出頁(yè)面主要功能，這也是節(jié)奏的一種體現(xiàn)。
3.柵格化
本次版本采用H5的承載形式，降低使用門(mén)檻；在柵格化以后，不僅可以較好的適配多屏幕，還能讓界面形成有序的節(jié)奏感！
【呼吸之維度】通過(guò)單頁(yè)面&多頁(yè)面兩個(gè)層面來(lái)體現(xiàn)
1.單頁(yè)面的維度體現(xiàn)
把頁(yè)面延伸至z軸，打造頁(yè)面縱向的層級(jí)感
2.多頁(yè)面的維度體現(xiàn)
平滑且有繼承關(guān)系的轉(zhuǎn)場(chǎng)，能夠很好的幫助用戶理解產(chǎn)品架構(gòu)。
【呼吸之活力】通過(guò)色彩、微交互兩塊來(lái)體現(xiàn)
1.色彩
綜合了美國(guó)Ios和安卓常用社交娛樂(lè)app，以及美國(guó)女性經(jīng)常出現(xiàn)的場(chǎng)景圖片,分析了它們的顏色,并做了分類，發(fā)現(xiàn)較多的使用了較高飽和度的色彩，所以在此次海外版本上，把國(guó)內(nèi)版本的主色調(diào)進(jìn)行了細(xì)微的調(diào)整。增加飽和度，色相也更暖，看起來(lái)更有活力,如下圖是本次海外版本的用色。
2.細(xì)致的微交互
微交互雖然單指一個(gè)點(diǎn)，但不能想當(dāng)然的指哪打哪。我們得從架構(gòu)上，從全局到局部來(lái)思考；或者用用戶場(chǎng)景出發(fā)去思考。我的做法是會(huì)以用戶的視角，分場(chǎng)景的去思考,可能會(huì)碰到什么問(wèn)題,需要得到什么解決,一定要假象自己的小白用戶,并從中找出可以優(yōu)化的創(chuàng)意點(diǎn)。在找到創(chuàng)意點(diǎn)之后，還需要篩選這些創(chuàng)意點(diǎn)的必要性，以及是要重點(diǎn)處理和略微優(yōu)化就好。
下圖是從有目的和無(wú)目的兩方面去發(fā)散,去思考用戶會(huì)是什么場(chǎng)景,可能會(huì)遇到的問(wèn)題.
細(xì)膩的交互可以讓體驗(yàn)升級(jí)。從韓漫在美國(guó)的受歡迎度可以看出，當(dāng)?shù)剡€是能夠接受品牌吉祥物這一設(shè)定的。在海外版本里，我嘗試以品牌形象為切入點(diǎn),把吉祥物與界面結(jié)合起來(lái),希望用戶不再是與冰冷的界面溝通，通過(guò)逗趣的黑子形象，讓用戶感受到情感，感受到活力。
下面列舉微交互的一個(gè)案例。在搜索操作中，我嘗試把不同輸入狀態(tài)與不同的表情關(guān)聯(lián)起來(lái)，讓用戶在操作的同時(shí)。能夠得到及時(shí)有趣味性的視覺(jué)反饋；如下圖
從微交互角度來(lái)解析以上的交互。
觸發(fā)器:用戶點(diǎn)擊搜索進(jìn)入搜索頁(yè),點(diǎn)擊輸入框;
規(guī)則:開(kāi)始輸入文案;
反饋:(視覺(jué)反饋)黑子狀態(tài)由默認(rèn)狀態(tài)轉(zhuǎn)變?yōu)檎谳斎霠顟B(tài);
循環(huán):點(diǎn)擊鍵盤(pán)“搜索”,結(jié)束這段微交互;再次點(diǎn)擊點(diǎn)擊搜索框輸入文案,再次激活此微交互;如一直在激活輸入框狀態(tài)下,黑子的狀態(tài)一直保持在正在輸入態(tài);
以上闡述的是部分創(chuàng)作過(guò)程，闡述了如何推導(dǎo)設(shè)計(jì)語(yǔ)言：呼吸，并通過(guò)“節(jié)奏”“維度”“活力”三部分來(lái)解析如何用設(shè)計(jì)語(yǔ)言映射到界面中。
到這里為止，就是可以分水嶺了，如果止步于此，你的設(shè)計(jì)應(yīng)該能稱得上是精準(zhǔn)的設(shè)計(jì)，可以跳過(guò)以下第四大類,直接進(jìn)入驗(yàn)證和修整.
那么如何能更好呢？如果能往前再進(jìn)一步，挖掘一些亮點(diǎn)所在，是不是更容易被用戶記住呢？下面會(huì)簡(jiǎn)單談?wù)勔环N我常用的方式：奔馳法（一種由美國(guó)心理學(xué)家羅伯特.艾伯爾創(chuàng)作的思考方法）。
4.設(shè)計(jì)側(cè)切入挖掘亮點(diǎn)(常規(guī)設(shè)計(jì)可跳過(guò)四,直接進(jìn)入第五部分)
[亮點(diǎn)之如何思考] 創(chuàng)新思維:奔馳法之put to other uses
用作他用（put to other uses）
這是奔馳法有7個(gè)切入點(diǎn),我此處是用了第五點(diǎn):“put to other uses”;可以理解為設(shè)計(jì)時(shí)把別的領(lǐng)域的概念或處理方式拿來(lái)借鑒,我覺(jué)得可以理解為改變用途。其實(shí)擬物化就是用作他用的典型代表。它是在UI層面模擬實(shí)物的形態(tài)材質(zhì)，從交互層面模擬實(shí)物的物理特性，最終運(yùn)用在圖標(biāo)界面設(shè)計(jì)、動(dòng)效設(shè)計(jì)等方面。
C4D目前在設(shè)計(jì)的火爆程度就不用我介紹了，我思考著如果三維與ui結(jié)合會(huì)碰撞出什么呢?
c4d這類三維的表現(xiàn)手法一般用作商業(yè)化宣傳,為品牌印記的打造助力;那么基于品牌印記打造這一項(xiàng),是不是也可以通用在ui層面的品牌印記打造呢？于是有了亮點(diǎn)切入:加入三維的表現(xiàn)形式,去助力構(gòu)建品牌印記
[亮點(diǎn)之實(shí)踐落地]
內(nèi)容思考:
想要打造品牌印記,先要確立,品牌背景故事,雖然這兩項(xiàng)沒(méi)有實(shí)際應(yīng)用場(chǎng)景,但可以它可以為后續(xù)的設(shè)計(jì)延展提供方向.（此處就不展開(kāi)講品牌印記打造的其他環(huán)節(jié)）
品牌背景故事:黑子來(lái)自于遙遠(yuǎn)的漫星，由于漫星已經(jīng)瀕臨死亡，黑子急需找到漫力拯救漫星。黑子發(fā)現(xiàn)在地球上可以搜集漫力，便從外星到達(dá)地球。第一站是中國(guó)，第二站就是北美洲。
技術(shù)思考:
用三維的方式做品牌植入,強(qiáng)化產(chǎn)品的品牌感.但二者融合還是有需要注意的點(diǎn):三維的渲染有彪悍霸道的視覺(jué)沖擊力,ui界面與之相比,顯得內(nèi)斂很多,那么如何做平衡?
解決方案: 配圖在頁(yè)面中的占比很高,即為“重視覺(jué)”,反之,則為“輕視覺(jué)”
我首選與界面交互不強(qiáng)相關(guān)的默認(rèn)圖作嘗試,如下圖
而在個(gè)人中心頭部區(qū)域,我將日常打招呼的場(chǎng)景引入,希望用戶看到能莞爾一笑;此處黑子的形象是希望用戶優(yōu)先關(guān)注到的，所以采用了與背景差異化較大的配色。
整體視頻效果展示(貼圖)
四、 驗(yàn)證
此模塊分為兩大類：精確傳達(dá)，使用體驗(yàn)(此論證要點(diǎn)主要適用于探索期的產(chǎn)品，因?yàn)樘剿髌诘漠a(chǎn)品是重定型的，而非定量的。)
【精確傳達(dá)】
從需求方角度來(lái)看，是否能把需求方想表達(dá)的重點(diǎn)精確的表現(xiàn)出來(lái)；這塊要點(diǎn)是前期要與需求方目標(biāo)同步，站在他們的立場(chǎng)去考慮信息改如何去表達(dá)，去重組；
【使用體驗(yàn)】
從用戶角度出發(fā)，去看界面是否符合他們的預(yù)期，是否能接收到需求方想表達(dá)的核心要點(diǎn)等，以及他們使用完以后的推薦意愿、滿意度等等。另外還可以從新增用戶數(shù)去看，用戶是否愿意繼續(xù)使用你們的產(chǎn)品,下圖為調(diào)查問(wèn)卷截圖.
五、 修整
任何設(shè)計(jì)都是持續(xù)性的，并不是改版完上線了就可以了，而是要不斷持續(xù)的調(diào)整，優(yōu)化，每次設(shè)計(jì)上線之后，都要進(jìn)行設(shè)計(jì)復(fù)盤(pán).
主要結(jié)合前面的驗(yàn)證結(jié)果+技術(shù)實(shí)現(xiàn)+項(xiàng)目時(shí)間這三塊進(jìn)行修整.這塊我目前還做的不夠好，大家一起共勉。
(左舊右新)
總結(jié)一下本篇文章的要點(diǎn)
做設(shè)計(jì)的關(guān)鍵路徑：了解—分析—?jiǎng)?chuàng)作—驗(yàn)證 —修整（這是一個(gè)閉環(huán)，就像功能需要迭代一樣，設(shè)計(jì)也是需要不斷優(yōu)化迭代的。）
而在優(yōu)化迭代的同時(shí)，能主動(dòng)發(fā)現(xiàn)并在產(chǎn)品設(shè)計(jì)中加入創(chuàng)新點(diǎn)，那很有可能就能記憶點(diǎn)，閃光點(diǎn)。
以上是個(gè)人思考，如有意見(jiàn)。大家可以一起討論，文章也可以繼續(xù)優(yōu)化。
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
