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