首先和大家介紹一下項(xiàng)目背景幻捏，它是一個(gè)地產(chǎn)客戶資源管理的APP，目標(biāo)人群就是我們公司的銷售人員約3000人，以前他們?cè)诳蛻糍Y源管理上主要使用的后臺(tái)管理系統(tǒng)冗懦，但是常常會(huì)出現(xiàn)資料跟進(jìn)不及時(shí)，或者資料錄入不完善的情況仇祭，這次在APP中得到了改善并增加了一些新的功能披蕉。
我主要負(fù)責(zé)這次界面的設(shè)計(jì)工作，整個(gè)界面設(shè)計(jì)完成還算比較順利乌奇，只是登錄界面遲遲不過(guò)稿没讲，因?yàn)橄氲皆蹅兊漠a(chǎn)品是工具類、需要登錄之后才能進(jìn)入界面進(jìn)行操作礁苗，因此登錄界面就是大家進(jìn)入APP看到的第一個(gè)界面爬凑，在設(shè)計(jì)上我采用的是全屏大圖的商務(wù)風(fēng)格，使用了一個(gè)和房產(chǎn)有關(guān)和商務(wù)類的圖片试伙。
不過(guò)后來(lái)老板反饋登錄界面的背景圖像有一層霧嘁信，他建議圖片最好是藍(lán)天白云看上去活躍點(diǎn)，不要?dú)馑莱脸恋摹?/p>
大家看到藍(lán)天白云可能會(huì)笑疏叨，這設(shè)計(jì)出來(lái)會(huì)不會(huì)太low潘靖，我開始也是這樣想的但是轉(zhuǎn)念一想。老板只是覺得這個(gè)界面沒(méi)有生氣不活潑蚤蔓，我們的目標(biāo)人群本來(lái)就是自己公司的銷售員工卦溢，在設(shè)計(jì)上一定要是充滿朝氣。
后來(lái)我嘗試了多種圖片類型：商務(wù)辦公秀又、海景房单寂、純意向類圖片等，覺得都不能很好的表達(dá)涮坐。這時(shí)候同事看到我有點(diǎn)糾結(jié)凄贩，于是就提醒我我換個(gè)思路不一定要設(shè)計(jì)成這種全屏大圖風(fēng)格，現(xiàn)在很多APP登錄界面設(shè)計(jì)都較為簡(jiǎn)潔袱讹，不用拘泥于一種樣式疲扎。那還有什么樣式較為適合呢？于是晚上回家我對(duì)登錄界面的設(shè)計(jì)樣式進(jìn)行了梳理捷雕，我主要從三個(gè)方面入手：
1椒丧、如何進(jìn)行參考收集？
2救巷、參考收集完后怎么辦壶熏？
3、如何選擇符合產(chǎn)品的設(shè)計(jì)樣式浦译？
如何進(jìn)行參考收集
參考收集大家也可以理解為尋找參考棒假，不管是樣式參考還是版式參考溯职，在設(shè)計(jì)前期一定是會(huì)經(jīng)歷收集的過(guò)程。收集可以分為網(wǎng)上資源和項(xiàng)目資源帽哑，網(wǎng)上資源也就是大家熟知的花瓣谜酒、追波、Behance妻枕、站酷僻族、UI中國(guó)這些設(shè)計(jì)平臺(tái)，大家可以通過(guò)這些平臺(tái)了解當(dāng)前流行趨勢(shì)屡谐、樣式風(fēng)格述么、界面分析等內(nèi)容獲取幫助。
除此之外愕掏，我們還可以收集各行業(yè)優(yōu)秀的APP度秘、競(jìng)品對(duì)他們進(jìn)行分析，因此收集這一步是必不可少的亭珍。下圖是我手機(jī)上常備的覺得還不錯(cuò)的APP：
由于這次做登陸界面敷钾，因此我首先將這些APP的登陸界面大體過(guò)了一遍，了解每個(gè)行業(yè)的特點(diǎn)肄梨。然后我在搜集了一些資源管理和工具類的APP（競(jìng)品分析是必不可少的）。
收集完成后挠锥，我們可在每個(gè)行業(yè)挑選兩到三款A(yù)PP進(jìn)行截圖众羡，到這里收集工作也就完成了。（收集工作雖然簡(jiǎn)單蓖租，但是通過(guò)長(zhǎng)期積累你會(huì)熟知每個(gè)行業(yè)的設(shè)計(jì)特點(diǎn)粱侣、你知道某個(gè)APP更新了，它為什么要更新蓖宦，更新之后有什么好處等）
參考收集完后怎么辦
參考收集完后就需要將上面收集到的截圖進(jìn)行相關(guān)的分類（風(fēng)格樣式分類齐婴、展示內(nèi)容分類等），在設(shè)計(jì)時(shí)由于我們的內(nèi)容已經(jīng)確定稠茂，因此只需要進(jìn)行風(fēng)格樣式分類即可柠偶。這里我將登錄界面的樣式分為：白色簡(jiǎn)潔、輕裝飾睬关、純色背景诱担、全屏大圖、半屏圖片电爹、插畫背景六大分類蔫仙。通過(guò)分類我們可以了解到不同行業(yè)他們采用的設(shè)計(jì)方式。
1丐箩、白色簡(jiǎn)潔
白色簡(jiǎn)潔風(fēng)格是目前較為常見的樣式摇邦，其目的以信息錄入為目的恤煞，多用于體量比較大的APP中，在設(shè)計(jì)時(shí)沒(méi)有采用較為復(fù)雜的裝飾元素施籍，整個(gè)界面以簡(jiǎn)潔設(shè)計(jì)為主阱州，在設(shè)計(jì)上主要是信息展示的排版設(shè)計(jì)。如下圖所示：
以得到法梯、土豆苔货、拉勾為例，在展示上出入不大立哑，主要設(shè)計(jì)是信息的排版夜惭，得到和拉勾類似采用線條輸入框，居左排版樣式铛绰。土豆采用橢圓矩形輸入框诈茧，居中排版，同時(shí)還加入Logo體現(xiàn)品牌感捂掰。
2敢会、輕裝飾背景
輕裝飾背景也就是在簡(jiǎn)潔風(fēng)格的基礎(chǔ)上添加一些品牌裝飾元素，相較于簡(jiǎn)潔風(fēng)格該設(shè)計(jì)更能體現(xiàn)界面細(xì)節(jié)这嚣，增加界面品牌感鸥昏，同時(shí)也不影響信息的錄入。如下圖所示：
輕裝飾在設(shè)計(jì)上可以有四種展現(xiàn)效果：第一類似網(wǎng)易云音樂(lè)和網(wǎng)易美學(xué)姐帚，取產(chǎn)品相關(guān)元素進(jìn)行裝飾吏垮；第二類似好奇心日?qǐng)?bào)做模糊處理增加界面層次感；第三類似網(wǎng)易云課堂加入意向類的圖片罐旗；第四類似優(yōu)酷膳汪、36Kr添加幾何元素進(jìn)行裝飾。
3九秀、純色背景
純色背景在使用時(shí)往往采用品牌色遗嗽，同時(shí)搭配Logo進(jìn)行設(shè)計(jì)，體現(xiàn)品牌感鼓蜒。需要注意的是痹换，該方式多用在登陸信息簡(jiǎn)單，或者以第三方登陸為主的界面中友酱。如下圖所示：
Keep晴音、問(wèn)卷網(wǎng)、騰訊課堂均采用品牌色進(jìn)行設(shè)計(jì)缔杉，同時(shí)可以看出他們的登陸信息都較少锤躁，在視覺設(shè)計(jì)上也較為簡(jiǎn)潔。
4或详、全屏大圖
全屏大圖也就是在登陸信息下方采用圖片的形式填充系羞，其優(yōu)勢(shì)是圖片更容易吸引人的注意力郭计，更容易傳遞情感引起用戶共鳴，如果采用產(chǎn)品相關(guān)的圖還能夠提前給用戶有個(gè)預(yù)期椒振。其缺點(diǎn)是信息和背景融合度較高昭伸，對(duì)于一些體量較大的產(chǎn)品不太適合，多用在垂直類的APP中澎迎。如下圖所示：
全屏大圖其圖片是整個(gè)界面的核心庐杨，因此想要找到一個(gè)符合產(chǎn)品的圖片是不易的事情，在進(jìn)行圖片查找時(shí)我們也需要有目的性的尋找夹供，比如咕咚灵份、釘釘選擇的和產(chǎn)品相關(guān)的圖片；每日開眼哮洽、隨辦填渠、企業(yè)查用了較為意向的圖片；馬蜂窩采用全屏動(dòng)圖讓整個(gè)登陸界面更加生動(dòng)（使用動(dòng)圖要慎重鸟辅，因?yàn)橛脩敉鶗?huì)使用過(guò)長(zhǎng)的時(shí)間查看氛什，拉長(zhǎng)登陸時(shí)間）。
5匪凉、半屏圖片
半屏圖片和全屏圖片類似都可以通過(guò)圖片傳遞產(chǎn)品核心功能枪眉、或者通過(guò)意向圖傳遞產(chǎn)品品牌感，只是半屏圖片其重點(diǎn)是以登陸信息為主洒缀。其缺點(diǎn)是在設(shè)計(jì)上不容易出彩瑰谜，目前僅有少部分的APP采用該樣式，如下圖所示：
小豬短租树绩、NOTHING、螞蟻短租均使用的是半屏圖片的形式隐轩，可以看出其登陸操作模塊在界面的黃金位置上饺饭，整個(gè)界面設(shè)計(jì)會(huì)有一定的分割感。
6职车、插畫背景
相比于圖片設(shè)計(jì)瘫俊，插畫背景有個(gè)優(yōu)勢(shì)就是通過(guò)自己手繪不需要到處找圖片，也不用擔(dān)心圖片的版權(quán)問(wèn)題悴灵，可以完全根據(jù)自身產(chǎn)品進(jìn)行插畫制作扛芽。需要注意的是插畫設(shè)計(jì)最好加入品牌識(shí)別元素，或者和品牌相關(guān)元素积瞒，這樣才會(huì)顯得有意義川尖。如下圖所示：
印象筆記采用鬧鐘、文檔的方式也讓人一目了然知道他的記事功能茫孔，in的Slogan就是有趣的人都在in叮喳，這幅插畫剛好也表現(xiàn)出了這個(gè)意思被芳，最右采用品牌章魚卡通形象，讓界面具有可識(shí)別性馍悟。
如何選擇符合產(chǎn)品的設(shè)計(jì)樣式
上面我們已經(jīng)進(jìn)行了參考的收集畔濒、截圖分類并做了簡(jiǎn)單的樣式分析。現(xiàn)在我們就需要將這些樣式結(jié)合我們實(shí)際的產(chǎn)品進(jìn)行梳理锣咒，選出適合我們當(dāng)前的設(shè)計(jì)方式侵状。
任何界面的設(shè)計(jì)都是有理有據(jù)的，也就是我們的設(shè)計(jì)需要根據(jù)我們的設(shè)計(jì)目的毅整、老板預(yù)期趣兄、競(jìng)品分析多方面進(jìn)行篩選。
1毛嫉、設(shè)計(jì)目的
首先我們來(lái)看登陸界面的目的主要有哪些诽俯？這里我主要?dú)w納了4個(gè)方面：個(gè)人信息錄入、品牌展現(xiàn)承粤、傳遞信息（商業(yè)信息暴区、產(chǎn)品核心作用）、故事或產(chǎn)品的人文情懷辛臊。這些目的分別對(duì)應(yīng)著不同的設(shè)計(jì)樣式仙粱。
個(gè)人信息錄入：主要使用在體量較大的項(xiàng)目中，其主要涉及目的就是高速高效的幫助用戶登錄彻舰，結(jié)合上面的樣式分析我們可以推出白色簡(jiǎn)潔樣式伐割、半屏圖片展示樣式、輕裝飾風(fēng)格是以個(gè)人信息錄入為主要目的的刃唤。
品牌展現(xiàn)：如果你覺得千篇一律的白色簡(jiǎn)潔風(fēng)格沒(méi)有特點(diǎn)隔心，你也可以根據(jù)需要加入品牌識(shí)別，比如在界面中添加Logo尚胞、添加和產(chǎn)品相關(guān)的圖片硬霍、插畫元素等。結(jié)合上面的樣式分析笼裳，主要有輕裝飾風(fēng)格唯卖、純色背景、插畫背景躬柬、全屏大圖能夠更好的提現(xiàn)品牌化拜轨。
傳遞信息：當(dāng)你的登陸信息較為簡(jiǎn)單時(shí)，比如僅有第三方或者簡(jiǎn)單的登陸信息允青，這時(shí)候登陸界面不單單是以個(gè)人錄入為主橄碾，還會(huì)起著傳遞商業(yè)信息、產(chǎn)品信息等作用。結(jié)合上面的樣式分析堪嫂，主要有輕裝飾風(fēng)格偎箫、全屏大圖、半屏圖片能夠更好的傳遞產(chǎn)品信息皆串。
故事或產(chǎn)品的人文情懷：這個(gè)比較適合小眾的產(chǎn)品丧诺，我們知道圖片是最好的傳遞情感的方式刃宵，因此全屏圖片是不錯(cuò)的選擇，當(dāng)然如果產(chǎn)品預(yù)算較高，我們也可制作成視頻亲茅，更能夠引起用戶的共鳴酱酬。
分析完后就需要結(jié)合我們產(chǎn)品的設(shè)計(jì)目的進(jìn)行選擇了实柠，根據(jù)前期的需求溝通我們的登陸界面信息簡(jiǎn)單丙曙，同時(shí)用戶需要登錄之后才能進(jìn)入界面，因此在展現(xiàn)上以品牌展現(xiàn)和傳遞信息為主翅萤，因此我們可以推出我們的產(chǎn)品較為適合輕裝飾風(fēng)格恐疲、純色背景、插畫背景套么、全屏大圖培己。
2、老板預(yù)期
有時(shí)候你分析的不一定是正確的胚泌，你可以將你的分析和經(jīng)理說(shuō)省咨，經(jīng)理會(huì)比你更清楚和老板想要哪種。在前言部分我也提到過(guò)玷室，老板想要登陸界面較為活躍零蓉，體現(xiàn)銷售行業(yè)的朝氣。因此在設(shè)計(jì)時(shí)我們需要考慮這一因素穷缤。
3敌蜂、競(jìng)品分析
競(jìng)品分析往往能夠解決我們采用何種樣式，我們的項(xiàng)目定位很明顯津肛，就是客戶資源管理紊册，目標(biāo)人群也只是本公司銷售人員使用，因此可以將其歸納為工具類的APP快耿，在工具類的APP中常見的設(shè)計(jì)方式主要有：白色簡(jiǎn)潔、純色背景芳绩、全屏大圖掀亥。
客戶資源管理類的優(yōu)秀APP幾乎很少，因此這里我找了以工具使用為主的APP妥色，貝殼找房面向人群更廣搪花，主要為大家提供找房信息，他的用戶群體主要是用戶，當(dāng)然他希望用戶快速登錄為主撮竿，因此采用了能夠高效操作的白色簡(jiǎn)潔風(fēng)格吮便，這個(gè)樣式我從側(cè)面問(wèn)過(guò)經(jīng)理，覺得不太適合幢踏。最后我們決定做兩個(gè)風(fēng)格髓需，純色扁平風(fēng)格和商務(wù)背景能夠很好的提現(xiàn)品牌化。
最后房蝉，為了提高過(guò)稿率僚匆，我將最后得出的純色背景和全屏大圖樣式各設(shè)計(jì)了一稿，提交給老板進(jìn)行反饋搭幻。他們選擇的是純色背景的風(fēng)格樣式咧擂，到這里我們就成功過(guò)稿了。
這個(gè)分析過(guò)程大家可能會(huì)覺得很繁瑣檀蹋，其實(shí)當(dāng)你將收集之后的圖片分類對(duì)比分析時(shí)松申，基本就能夠確定采用何種風(fēng)格了，這里提醒大家俯逾，你的分析可能和老板預(yù)期會(huì)有出入贸桶，因此最好能夠設(shè)計(jì)兩個(gè)版本給老板選擇，同時(shí)分別闡述使用他的原因纱昧，這樣就能大大提高過(guò)稿率刨啸。
總結(jié)
今天主要以登陸就界面為例，和大家分享設(shè)計(jì)沒(méi)想法時(shí)可以通過(guò)收集识脆、分類设联、分析對(duì)比三個(gè)方面進(jìn)行梳理，幫助我們有理有據(jù)的找到適合產(chǎn)品的設(shè)計(jì)方案灼捂，提高過(guò)稿率离例。
1、收集：平時(shí)多收集優(yōu)秀APP悉稠，在你不知道怎么做的時(shí)候我們可以結(jié)合競(jìng)品宫蛆，將這些APP大致過(guò)一遍，了解每個(gè)行業(yè)的設(shè)計(jì)特點(diǎn)的猛，為后面的分類做準(zhǔn)備耀盗。
2、分類：通過(guò)分類可以就可以知道有哪些風(fēng)格樣式卦尊，了解他們的設(shè)計(jì)優(yōu)缺點(diǎn)叛拷，可以幫助我們做到心中有數(shù)。
3岂却、分析：根據(jù)產(chǎn)品設(shè)計(jì)目的忿薇，結(jié)合上面的樣式分析裙椭，選出適合我們產(chǎn)品的設(shè)計(jì)方式。
以上就是我在項(xiàng)目中遇到問(wèn)題的總結(jié)署浩，希望對(duì)大家有幫助揉燃，看完你可以找個(gè)界面來(lái)分析試試，看看是不是這樣筋栋。
