1.3.3 模仿好的產品

有時候設計師為了與競爭對手的App有所區別，會絞盡腦汁繪制出比較特別的導航條圖標，制作出一套精美的轉場動畫等。但是在制作這些精美的設計效果時，需要有個前提，即設計師是否充分了解自己的競爭對手的App，能否基于競爭對手的App現有的設計方案做改進和創新。跟競爭對手的App設計相比，用戶不太關心設計師精心設計出來的按鈕的位置，用戶更多的是關心產品所提供的服務是否滿足了他們的需求。

模仿競爭對手的設計一方面是為了少犯錯，但是無論是產品經理還是設計師，在做決策時一定要提醒自己跟競爭對手不是比誰做得更多，而是比誰犯的錯更少；從另一方面來說，不必再花時間重新教用戶使用新的設計和節省用戶進入頁面的時間。最重要的是讓產品先在市場上立足，再去慢慢追求產品差異化，而不是一開始就追求產品差異化。當一個產品以一個迥異的方式被呈現出來時，必須要考慮該產品被用戶接受的時間。所以在做設計的時候，要模仿優質的競爭對手。最終衡量一個產品成功與否的關鍵點是利益，而不是美觀。那么如何通過模仿好的產品做出符合自己產品商業訴求的App呢？下面將從設計出發點、設計邏輯、信息提煉和設計實現方式這4個環節進行講解。

◎設計出發點

設計師接到一個設計任務時，需要先明確設計這個方案的出發點是什么。首先，要清楚地知道設計的總體目標是什么，重點要向用戶傳遞的是什么信息，是想向用戶宣傳自己的品牌文化，還是想讓用戶更容易地閱讀信息。如果是為了提高商品的轉化率，那么設計師要在用戶從進入商品列表到支付的這個過程中，在視覺上去引導用戶，引導用戶完成支付這一決策。其次，要理解產品的受眾。如果是個人用戶（To Consumer，2C）類的產品，受眾即用戶，設計師要直接為這些受眾設計產品；如果是企業用戶（To Business，2B）類的產品，受眾可能并非用戶，例如內容管理系統（Content Management System，CMS）產品的功能是幫助企業管理用戶關系、訂單、資產和庫存等，受眾是負責采購軟件的人或者是老板，而用戶是使用此軟件的人。

設計師在考慮設計方案的出發點時，還需要關注用戶對設計的期許。如果要鼓勵用戶使用自己的產品，要通過合理的設計方案讓用戶感受到自己的產品能陪伴他們。例如，可以突出頁面上的用戶頭像，讓進入該頁面的用戶有一種有人陪伴的感覺。期許不一樣，設計方案也不一樣。下面分別分析一下大眾點評App和Instagram App的頁面。

如果用戶沒有將大眾點評App與微信綁定，那么用戶進入大眾點評App時首頁的底部會彈出一個浮層來引導用戶去綁定，浮層的內容從左到右分別放了兩個女生的頭像、引導文案和綁定按鈕。其中，兩個女生的頭像可以向用戶傳遞“我的好友也在這里”的信息，更好地提高了用戶綁定微信的意愿。Instagram App發現頁的頂部浮動著一行頭像，第一個是正在直播的用戶的頭像，這里的頭像會不停地更換，其他的是推薦用戶的頭像。這個設計方案有兩個比較好的點值得借鑒：第1點是變動的內容能更好地吸引用戶注意力，引導用戶去看當前的直播；第2點是使用和頭像一樣的UI樣式能夠保證頁面的協調性，又不會降低頁面的引導性。

設計師在做設計的時候，除了要明確設計的出發點外，還需要關注產品方對用戶行為的期望，以及關注用戶在使用產品的過程中產生的情感依賴。

◎設計邏輯

設計師在明確了設計的出發點后，還需要分析與自己產品相似的產品的設計方案。

設計師可以通過尼爾森數據或行業數據來分析用戶特征。設計師也可以和產品經理交流得到用戶的基本畫像。如果是海淘類產品的設計方案，目標用戶的用戶特征是喜歡品牌和正品，對質量的要求高，消費沒那么理性，知道產品的方式更多的是通過身邊的人或口碑互相傳播，更愿意跟隨名人的建議去做決策。針對這些用戶特征，設計師可以總結出：當向用戶傳達產品是正品并且質量很高的信息時，用戶首先會想到香奈兒和法拉利等大品牌的產品。

分析數據元素是指觀察競爭對手的產品的設計風格或元素的處理特點，如在電商類App中，設計師將商品圖片多余的元素去掉了，只留下了白色的背景。

分析框架布局是指分析具有承載功能的控件的擺放。例如，搜索輸入框一般是放在頭部導航條上面的，并且占了很大的面積。海狐海淘App和洋碼頭App主要是以商品圖片在左、信息在右的方式對商品信息進行展示，網易考拉App主要是以商品圖片在上、信息在下的方式對商品信息進行展示。

分析交互邏輯是指分析元素之間的關系。例如，網易考拉App中的商品都是通過一張封面引導用戶，每一個封面都是一個主題，這些主題里面都有相關的推薦商品。用戶可以通過左右滑動的方式來查看其他商品，當用戶滑到最后一個產品時，會有一個“查看更多”的引導按鈕，點擊該按鈕后就到了該主題的二級頁面，該主題里面的所有商品信息都會展示在這里。

◎信息提煉

設計師對設計邏輯進行分析后，可以把數據元素對應的排列方式、框架布局的規劃策略和交互邏輯的跳轉方式都提煉出來，并有針對性地截取圖片。筆者經常會將截取的圖片打印出來，然后做分析記錄，提煉出符合自己設計要求的要素。但設計師在這個過程中要注意一點，那就是考慮好自身產品所處的階段和在該階段公司對這個產品的運營能力。例如，設計師設計的海淘類產品處在剛起步的階段，公司對供應鏈、物流的把控能力沒那么強，所以所售商品品類不會很豐富。此時，設計方案就不能按照一個很成熟的海淘平臺的設計模式去設計。因為信息的豐富度不夠，對設計來說也是一個很大的挑戰。因此在這樣的產品階段，設計方案采用如海狐海淘App的部分頁面的排版方式會比較合適。

◎設計實現方式

設計師的最后輸出物是高保真的設計稿。設計的實現方式不僅是指設計師做出來的頁面是什么顏色和內容布局是怎樣的，更重要的是驗證自己的設計方案是否符合一開始的設計出發點。如筆者在做maxIN海淘App這個項目時，第一階段的設計出發點不是為了引導用戶趕緊下單，而是要向用戶傳遞這款產品是一家注重品質和情調的海淘App。產品的價值主張不僅是買家與賣家之間的交易關系，最主要的目的是讓買家提升生活的品質。

筆者在做maxIN海淘App的設計方案時，采用了本書1.3.3節中提到的設計的4個環節來做決策，但是在商品的布局上并沒有模仿小紅書或考拉等主流海淘App的設計方式。筆者團隊在仔細分析產品的風格與哪一款App比較像時，決定模仿國內幾款垂直類App的布局，如想去、良倉和片刻等App。考慮到maxIN海淘App是剛起步的產品，產品內信息量較少，可能最多有20條，采用這樣的首頁文字布局方式一方面能體現UI的大氣，另一方面也能彌補信息不豐富造成頁面空白的問題。

設計師在模仿與自己產品相似的產品的風格進行設計后，還需要進行方案自查，以檢驗設計方案的效果。方案的自查主要圍繞以下3點展開。

第1點：設計的出發點。檢驗設計方案是否符合本階段產品向用戶傳遞的價值主張。例如，maxIN海淘App給用戶傳遞的價值主張是maxIN海淘App是一個提升買家和賣家生活品質的平臺，所以視覺上主要突出內容和用戶，弱化了商品價格和履約訂單的按鈕設計。這些設計方案會在用戶查閱自己主頁和商品詳情時傳遞給用戶。

第2點：易用性。好的設計方案應該在符合用戶場景和用戶使用能力的前提下，用最簡潔的頁面和簡單的按鈕幫助用戶去完成操作目標。當設計師拿出設計方案后，需要多去推演設計方案是否符合用戶的使用場景。設想在某一具體的場景下，用戶是否能順利地完成他們期望的目標，如果用戶使用得不順暢，那設計方案就是不合理的。

第3點：符合公司的商業策略。不管是什么行業的公司，在公司的商業策略中一定會有成本優先這一條。設計師很難接觸到成本方面的東西，同時設計方面的成本也比較難量化。但有一個理念設計師要知道，不從長遠規劃考慮的設計方案都不是好的方案。例如，設計師在做一個方案時，如果不考慮未來一段時間內商品豐富度或業務增加后需要修改頁面的情況，到了真的需要修改頁面的時候，就會發現客戶端和服務端的方案都要重新修改，設計師很難預料這種情況所造成的結果。所以，設計師不是去做迭代方案，而是去做一個完美的解決方案。如果方案不合理，會導致老用戶流失和新用戶轉化率低等問題。雖然多數情況下沒法將問題產生的原因歸結為設計方案，但設計師要有這樣的意識。

下面舉兩個引導用戶主動關注他人的例子，分別是氧氣App（性感內衣生活社區）和大眾點評App引導用戶關注的設計方案。

用戶在未關注任何人的情況下，進入氧氣App的“推薦師”這一頁時，“推薦關注”會出現在“推薦師”的頁面，用戶需要用手指在頁面上滑動一下才能看見推薦關注的區域。而用戶第一次進入大眾點評App的“關注”這一頁面時，頁面會先彈出一個“推薦關注”的列表，可以在該列表上直接關注感興趣的用戶。從操作結果來看，大眾點評App的方案會讓用戶多進行一步操作，也會提高用戶對該頁面內容的注意力，引導效果更好，也比較符合該產品的業務訴求。