經常看到讀者私信說想看組件相關的文章，誠然，認識和了解組件很重要，但只是了解組件、會用組件是否就能做出好的設計？我想以某知名打車軟件活動頁為例，展開聊聊。

更多組件干貨：

這是一個在打車過程中投放的運營活動。

點開這個頁面的第一感受是，沒有明確的吸引點，結構和文案都略顯混亂。通過在 App 內尋找到了一些相似結構的 H5，我猜測這應該是運營或設計師拿現成的活動設計組件拼接的 H5。

組件明明是為了更好地完成方案而設計的，為什么通過組件搭建的設計方案卻遠“不及格”？我們先來聊聊這個頁面的待優化點和改進建議，再談談組件與設計方案之間的關系。

一、活動頁分析

老生常談，先從設計前必聊的用戶、場景、產品目標聊起。以使用活動頁時的體驗判斷，這個活動的目標用戶是上下班打車族，場景是上下班打車過程中尤其是等待司機接駕的時間空檔，產品目標很可能是通過首個免費無門檻的 2 元優惠券吸引用戶，引導用戶看到并購買通勤優惠套餐，通過套餐提升留存，讓用戶養成上下班在此 app 上打車的習慣。在這個背景下，我們重新審視這個活動頁，會發現幾個問題：

上圖所示的問題可以通過以下的設計思想解決：

1. 關注首屏

「首屏線」這個概念雖然不曾出現在交互書籍里，卻是實際工作中需要格外關注的設計點。「首屏」是指用戶無需滾動就可看到的屏幕范圍，每個公司對首屏線的劃定各不相同（取決于軟件的用戶實際使用的手機型號分布），但現在基本都以 390x844 或其倍數劃分首屏。可以看到該活動頁對首屏內容的把控，將付費套餐的購買行動放在了首屏外。上面說到，活動的目標猜測是通過購買通勤禮包提升打車留存，把這樣重要的操作放在了首屏外對目標來說實在不是一件好事。

2. 交互一致性

雖說首屏線很重要，但用戶也不是一定不會往下滑，前提是首屏的內容要讓用戶產生往下滑的動力。但是很遺憾，這個頁面因為兩種優惠券的領取交互不一致，讓用戶喪失了這個動力。在首屏能完整看到的優惠券中，優惠券的領取方式是在優惠券的右側，所以用戶下意識地會認為第二個優惠券的領取也是在右側，既然如此首屏以下也就沒有值得用戶往下滑動的重要信息了。

其實只要做好一致性，就可以讓用戶產生往下滑的動力，達到活動目標。

3. 特殊設計增加吸引力

前面提到頁面中第一張免費無門檻優惠券是活動的吸引點，直接影響了用戶參與度，作為活動中至關重要的第一步，加上它確實與另外兩個付費套餐有所不同，因此，在設計的時候，我們可以通過一些特殊化設計來吸引用戶的注意力。

特殊化的設計有許多種表現形式，上圖與活動圖結合的方式僅作為其中一種表現形式供參考，非唯一確定性答案，但總體的設計思路是一致的，即通過設計特殊樣式來增加吸引力。

4. 根據實際使用情況設計主操作

先說一個視覺問題，活動頁的底色、優惠券和領取按鈕都用的相同或相近的顏色，導致在頁面滑動過程中，「去打車」這個懸浮操作經常和活動頁內容融為一體，辨識度低，雖說是視覺問題，但若視覺影響到了交互體驗，交互設計師有責任給出意見。

這里還有另一個討論，「去打車」是否需要作為頁面主操作固定懸浮在頁面底部。上文提到活動頁是在打車過程中投放的，那么用戶在“已打車”的情況下，打車訴求不強烈，無需固定懸浮來強引導。

退一步說，如果我們投放的場景不可控，無法提前判斷用戶的狀態是在打車中或未打車，那么僅考慮當前頁面的話，優惠券的行動分為了「領取」和「使用/打車」，無論對用戶還是平臺來說，「領優惠券」這個行為最終導向的都是「打車」，而多一步操作會帶來多一層的用戶流失，更簡單有效的做法可以是把領券和打車的行為結合起來，一些電商平臺的優惠券就有運用到這一思想。

當然，將領券與用券的操作結合并不適合所有的活動目標。打車屬于門檻較高的付費行為，如果活動不追求打車轉化率，允許用戶先領券，后打車，那么將「領券」和「打車」分開也是可行的。但「領券」與「打車」依然在因果和先后上存在強聯系，因此，我們可以通過狀態變化或動畫效果來建立這個行動聯系。

5. 建立準確的預期

我在剛開始看到這個付費套餐的時候，不理解「￥30」是什么意思，于是點開了「...」。

點開后發現 30 塊錢只有 4 張 4 元優惠券，開始疑惑這個活動是要用戶花 30 塊錢買 4 張 4 塊錢的優惠券嗎？這似乎吸引不到用戶啊。后來經朋友提醒才發現這個優惠券詳情的面板是可滑動的。這些困惑暴露了這個套餐設計的幾個問題：付費價格和優惠價格模糊、沒有明確優惠券數量和具體數額、詳情面板沒有給到可滑動的預期。

首先說說前兩個問題，歸結下來就是沒有給用戶建立這是一個「套餐」的預期：

套餐與單張券采用了一樣的設計形式，使得用戶沒辦法通過視覺直觀地接收到「多張優惠券」的信息，我們可以對比一下其他「套餐」感設計得比較好的例子：

對比可以發現，上圖中的套餐都明確了券面額、券數量與購買價格，有的套餐還會標識優惠額度。當設計方案中明確了上述關鍵信息，「套餐」的設計感就會建立起來，有時候甚至根本不需要套餐詳情面板來做進一步的解釋。

如果有什么不可抗力需要設計套餐詳情面板，在高度合適的情況下，建議將所有的優惠券直接展示完整，或者通過露出半張券的方式告訴用戶下面還有內容，可以繼續往下滑動。

上述內容是該活動頁比較明顯的幾個問題及解決思路，除了這些問題外，還有許多小問題，比如頭圖想表達的是通勤路段，用中文表達了我的公寓，卻用英文表達了“Office”；全頁面充斥著許多無效且重復的信息，無效信息例如“加量神券”，重復信息例如家庭地址與公司地址，若是作為這 1 張券+2 個套餐的通用限定條件，可以考慮放在頭部僅出現一次作為說明，無需在每個套餐中重復提及（活動規則同理）...作為頭部打車軟件，方案中出現這么多問題實在令人匪夷所思，但這是組件的設計師的錯嗎？

二、設計組件與設計方案

組件庫的搭建通常是分時段、分人、在各自具體的需求背景下添加和補充，或者是同一個人在完全脫離具體需求背景的情況下搭建的。

這樣設計出來的組件單獨出現的時候都是合格的，然而交互是在具體需求背景下，服務特定的目標人群，解決具體的問題，滿足當下的產品目標，這幾個變量決定了我們很難找到兩個完全一樣的需求，因此也很難通過同一套組件拼接出完美的設計方案。拿單個組件應用時為例，在具體使用時，使用者有時甚至會為了滿足組件“完整度”需要造詞填充一些沒有價值的信息。

這樣的組件單獨出現時，雖然沒有達到“完美”但也能接受，但是頁面如果全都由這樣不合格的設計拼接而成，后果自然就是產出不專業的方案。

講到這里應該也能看出來，單純地做好組件并不能做好設計方案。組件拼接思路是由小到大，交互思考過程是由大到小，我們反復地說做設計前要做好調研，要做好分析，要先確認好框架...交互的價值除了抽象方法外也體現在具體問題的深度思考和設計原則的因地制宜上。而出現這樣子用專業的方式產出不專業的方案的原因，除了可能是 H5 生產者缺少具體需求具體分析的思考能力外，更有可能是設計環境所致。不知從何時開始，設計開始陷入一個怪圈，產出抽象模型比解決具體問題“厲害”，做出一個系統比做好一個需求“厲害”，所以具體問題需要為抽象模型讓步，實際的需求需要為理想的系統讓步。再加上被急促的需求周期、懸浮的產品目標和組件至上的原則所禁錮，為了“符合規范”不敢做組件之外的創新嘗試，為了“趕周期”只能用現有的開發能力，為了“雖然沒有根據但可以先試”的目標閹割思考。或許，多一些細節，多一些自由，多一些時間，多一些表達空間，設計更能迸發價值。

歡迎關注作者微信公眾號：「白話說交互」