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

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

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

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

一、活動頁分析

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

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

1. 關注首屏

「首屏線」這個概念雖然不曾出現(xiàn)在交互書籍里，卻是實際工作中需要格外關注的設計點?！甘灼痢故侵赣脩魺o需滾動就可看到的屏幕范圍，每個公司對首屏線的劃定各不相同（取決于軟件的用戶實際使用的手機型號分布），但現(xiàn)在基本都以 390x844 或其倍數(shù)劃分首屏?？梢钥吹皆摶顒禹搶κ灼羶?nèi)容的把控，將付費套餐的購買行動放在了首屏外。上面說到，活動的目標猜測是通過購買通勤禮包提升打車留存，把這樣重要的操作放在了首屏外對目標來說實在不是一件好事。

2. 交互一致性

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

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

3. 特殊設計增加吸引力

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

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

4. 根據(jù)實際使用情況設計主操作

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

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

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

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

5. 建立準確的預期

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

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

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

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

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

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

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

二、設計組件與設計方案

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

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

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

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

作者：白話說交互