公司理財APP最近完成了一次首頁拉新頁的改版，我通過對這次改版的復(fù)盤，總結(jié)了在設(shè)計流程不夠完善的公司可能遇到的一些坑，以及應(yīng)對方式，希望能夠幫助到屏幕前的你~

目錄

1. 中小型公司設(shè)計流程存在的不足
2. 項目復(fù)盤——遇到了哪些坑
3. 如何應(yīng)對這些坑
4. 設(shè)計思路
5. 最終效果

前言

經(jīng)常能看到各個論壇或者設(shè)計交流群，有UI設(shè)計師詢問自己沒有人帶該如何提升，或者是項目配置不完善、產(chǎn)品的審美很不好、一直返工修改、公司的產(chǎn)品很難看+難用就是不改版、設(shè)計師推動力不足等等抱怨。

手上正好有一個比較典型的例子，從中遇到的種種坑大家也許也遇到過、或者正在苦惱著，希望能幫助到你。

一、中小型公司的不足主要體現(xiàn)在哪？

1. 人員配置較少，經(jīng)常沒有明確的崗位劃分。公司不會固定一個固定的崗位給你。這導(dǎo)致的結(jié)果是，你必須要全能，但無法專精。就拿很多公司還沒有設(shè)立的交互崗位來舉例，交互這個事，可能是產(chǎn)品做、設(shè)計做、還有可能是運營做，所以還有職責分工不明確的問題在。
2. 研發(fā)流程不確定因素太多，很多時候根本不按正常流程來，這也是受工作較為密集的原因影響。需求往往不確定，沒有一個正常的評審流程。
3. 設(shè)計師作為產(chǎn)品設(shè)計流程上最末尾的一環(huán)，經(jīng)常還背負著背鍋的職責。

這其中也有視覺設(shè)計師自己不去思考的責任在，設(shè)計師不應(yīng)該完全按照頁面原型做一個上色設(shè)計。你要記?。耗阋苍趯徍诉@份需求，你要審核它的結(jié)構(gòu)是否正確、交互是否易用好懂，符合用戶操作習慣……如果不清楚原型或者結(jié)構(gòu)圖這么設(shè)計的意圖，大膽的去做溝通確認，去尋求一個更好的解決辦法。

二、項目復(fù)盤

下面，我就以這次首頁拉新頁的改版設(shè)計為例，跟大家說說我遇到的一些坑以及如何改進吧。

做了這些常規(guī)流程之外的努力之后，我順利的達到了自己的目的（首頁結(jié)構(gòu)的設(shè)計按照我的想法走，愉快的通過了整個交互評審會，自己關(guān)于業(yè)務(wù)的理解也得到了肯定，整個設(shè)計的流程也很順暢），也希望能幫助到屏幕前被我的標題吸引點擊進來的你~

1. 需求坑

這次首頁拉新頁的需求是由市場部提出，在今年下半年的p2p暴雷潮之后，需要增加針對新手的關(guān)于平臺安全性、穩(wěn)定性的展示，避免新手因為信息未及時觸達以及頁面設(shè)計太陳舊而流失。

收到了市場部關(guān)于需求的原型，從設(shè)計的清晰度以及排版上來說，是一份設(shè)計師看到會很開心的原型。

看起來，也就做一個入口圖，上上顏色，畫幾個icon就行了嘛。

然而站在需求層以及對比原先的首頁結(jié)構(gòu)去思考，你就會發(fā)現(xiàn)：幾乎每一塊的結(jié)構(gòu)都存在問題。

如果不認真思考把關(guān)原型的嚴謹性和合理性，設(shè)計師必然會淪為生產(chǎn)末期的上色工具，然后面對的是無限的返工和更改需求。

讓我們從頭開始分析這份原型：

我們這次改版目的是增加新手注冊轉(zhuǎn)化率，所以我們要做出的方向當然是跟新手需要看到的有關(guān)的。

新手想看到什么？

必然是平臺的安全性，以及自己能夠通過這個平臺獲得什么好處。

而現(xiàn)在用戶登錄之后的banner并不是未注冊用戶關(guān)心的和能參與的，比如【邀請好友】的banner，用戶自己都還沒注冊投錢，會去邀請好友嗎？

問題1-2：注冊立享888元紅包使用電商常見的入口圖形式

站在需求角度，這個設(shè)計是很合理的，可以吸引用戶注意，提高注冊開戶購買新手標的意向。但是從交互和視覺角度，這個結(jié)構(gòu)就有待商榷了。

首先從交互上去考慮，設(shè)計這個入口的目的是什么？

是吸引用戶點擊進入新手禮的專題頁，那么，第一個banner設(shè)計的目的又是什么？

想不出來。

為什么不把入口圖直接轉(zhuǎn)化為拉新banner，而要另行卡一個入口圖在這里呢？

其次從視覺上去考慮：banner一般使用的是飽和度較高的顏色，入口圖的設(shè)計也大致如此，確實有banner跟入口圖放置在一起的成熟APP設(shè)計，但是在雙重視覺壓迫之下，用戶還能注意到下方的新手標內(nèi)容嗎？

方形的banner跟橢圓形的入口圖堆在一起，下方還有一個長方形帶圓角的引導(dǎo)注冊主按鈕，整個頁面色彩和形狀都變得很豐富。

問題3：新手標版塊

排版很好看，幫設(shè)計師分攤了一部分工作，但是，我們還是要分析一下結(jié)構(gòu)設(shè)計的合理性。

首先：我們業(yè)務(wù)上其實是有兩個新手產(chǎn)品的，服務(wù)期長的會比短的收益高一些。所以我們需要考慮到如果平臺兩個新手標都能購買時的展示形式。

如果我們在這個階段沒有注意到這個問題，可能面臨著設(shè)計之后，發(fā)現(xiàn)其實是有兩個產(chǎn)品需要展示，那么單純在原型上添加一個輪播指示器恐怕會讓產(chǎn)品的展示效率會變低。

其次：大按鈕上面的文字跟這個版塊的關(guān)聯(lián)性不大，雖然目的是引導(dǎo)用戶注冊，但是在標的版塊，還是放“立即投標”這類關(guān)聯(lián)性強的文字好一些。

問題4-6：版塊信息層次不夠清晰

接下來是平臺信息觸達這一塊了。所有的關(guān)于公司的信息都是用戶通過點擊一個入口，然后自己去尋覓得知的，重要的平臺數(shù)據(jù)和用戶數(shù)是通過一個副標題較弱的文字表現(xiàn)，信息層級顯得較弱。用戶并不能直接感受到平臺的穩(wěn)定性以及用戶體量。

所以這一塊需要做的研究會很多，過程中經(jīng)歷的爭執(zhí)也會很多，因為每個人有自己的主觀看法，我們無法用大公司的辦法通過數(shù)據(jù)、通過用戶調(diào)研、通過灰度測試去得知我們究竟是否正確。

原型設(shè)計者也有自己的意圖和道理，我們企圖用自己的想法說服他，是否其實是自己過于主觀？

這一塊是我的感受最深的，我需要尋找一個方式，來讓大家的想法得到一個統(tǒng)一。

問題7：版塊意義不明

頁面最底部設(shè)計了聯(lián)系客服的功能版塊，設(shè)計者的意圖是，用戶瀏覽頁面到最后，如果有什么不懂的疑問的，可以去尋求客服的幫助。

我的想法首先是覺得奇怪，因為我使用過市面常規(guī)的APP，并沒有見過這種將客服放置在首頁并且占一個版塊的設(shè)計，所以提出了質(zhì)疑，對方也很有道理，竟讓我一時之間無言以對。

這就引出我們題目中的第二個坑——流程坑：

2. 流程坑

所謂流程坑，具體指什么呢？

明顯的就是這樣一份有修改余地的交互稿，沒有經(jīng)過評審，沒有進行相關(guān)的數(shù)據(jù)、用戶調(diào)研，就這么包裝成了灰度稿的模樣，試圖讓設(shè)計填個色就上線了。

那么正確的產(chǎn)品設(shè)計流程是什么呢？

正確的產(chǎn)品設(shè)計流程是：

環(huán)節(jié)缺少其中一步，必然帶來其它各個環(huán)節(jié)上的混亂，最后項目上線，反響不如預(yù)期，然后再回頭修改，互相丟鍋。

所以我試圖用自己的努力，多做一些安排之外的事情，讓整個流程回到正軌。

三、如何應(yīng)對這些坑

首先：我做了一份簡略的競品分析，分析了十幾家頭部平臺的首頁拉新頁的板塊結(jié)構(gòu)以及信息安排。

其實在做競品分析之前，我對拉新頁的結(jié)構(gòu)設(shè)計已經(jīng)有自己的想法，我需要一些論據(jù)用來一下子就說服對方，而不是通過觀點、道理說了半天也達不到想要的效果，畢竟一沒數(shù)據(jù)，二沒用戶調(diào)研，競品分析是最直接的論證方式。

正確的競品分析是你帶著自己的想法，帶著自己產(chǎn)品的需求去做，而不是競品做什么，我們也做吧，不去想這個設(shè)計是否真的達到了需求的目的。

競品分析只是個工具。

因為時間急迫，沒有辦法做的特別細致，我只能用最直接的方式去打動評審方。

我把自己想要放置在拉新頁面上的版塊（去掉必須放置的）和我選擇不放置但是其他平臺有此設(shè)計的版塊都統(tǒng)計在了一張表格上，然后一項一項的打鉤。

評審必過的我也不會去做，浪費工作精力，還可能分散對方注意力，使我的表格變成一張空乏沒有重點的分析。

因為前期調(diào)研的比較充分，我把我對于現(xiàn)在的原型的看法和改動意見結(jié)合競品分析以及設(shè)計想法表達了出來，也分析了很多APP拉新頁的亮點設(shè)計以及這么做的原因，大家都覺得很有道理，評審會進行的很順利，相信能減少中后期的返工和修改。

那么，我們會議上具體確定了什么？

1. 跟上文問題1和2對應(yīng)的，取消同步線上banner，改為主展示新手紅包banner（入口圖去掉），可能會增加展示熱門活動，先保留入口；
2. 跟上文的問題3對應(yīng)，同時展示兩個新手標供用戶選擇 ；
3. 跟上文的問題4、5、6形式對應(yīng)，平臺數(shù)據(jù)通過更直觀的形式表達，同時增加【一分鐘了解石投金融】文字鏈以及對應(yīng)專題頁設(shè)計，更明顯更直觀，之前的原型稿更像一個活動頁或者是PC頁設(shè)計 ；
4. 去除客服版塊設(shè)計，移入到專題頁中。

四、設(shè)計思路

接下來的工作就比較順暢了，主要面臨的是兩塊問題：

1. 對于一個上線四年的APP來說，它的視覺改版尺度把握

由于平臺設(shè)計偏老，而我們暫時只能改動這一個頁面，那么設(shè)計的風格變化肯定不能跟其他頁面的設(shè)計太過出入，然而平臺的風格又太過時，不改不行，如何既讓用戶接受，又兼顧時尚和美觀，是我接下來研究的方向。

2. 視覺改版方向

我們給這次視覺改版定了三個主要方向：

• 清晰： 用戶進入頁面，能夠直觀獲取所有信息 ；
• 簡潔： 沒有多余設(shè)計，符合金融產(chǎn)品干凈果斷的感覺 ；
• 特別： 不能做的跟別家同質(zhì)化嚴重，這里需要增加關(guān)于品牌感的露出，要讓用戶加深對品牌的印象，只看一個頁面，也能說出這是哪家的APP。

五、最終頁面展示

（1）頁面向下瀏覽效果：

（2）設(shè)計思路：

本文由 @xll 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。