教你如何輸出有效的設計方案

@騰訊ecd 兔子：在方案設計時，會出現一種情況：似乎已經輸出了所有可能的方案，但討論定稿時還是覺得不夠滿意，認為應該有更優方案的輸出？什么原因導致了這種情況？如何輸出有效的設計方案？

● 什么是有效的設計方案？

"有效方案"，個人理解是"能夠實現預期目標的方案"，而不是"全部可能方案"的羅列。設計方案因方向不同、實現能力等不同，會得到不同階段的版本；但在這些前提一致時，方案應該是邏輯性唯一的，不應存在模棱兩可的輸出。

● 如何輸出有效的設計方案？

核心：有邏輯、有理由的輸出

Step1 確定產品目標
每一個產品都有其目標，這個環節極其重要，確定清楚后，在接下來的設計決策時，會起到方向判斷的作用。產品目標一定要和產品側討論確定，不要理所當然的給出判斷。以易迅購物車為例，其核心目標是讓用戶"快速下單"，其次才是"買更多"。

Step2 確定用戶群劃分
清晰產品目標后，我們需要對用戶在產品上的行為有個了解，才能知道他們需要什么。需要關注以下幾點：

① 用戶有哪些類型（比例、主要/輔助角色）
② 不同類型用戶會用你的產品來干什么
同樣以購物車為例，易迅以結算型用戶為主（主要角色——把購物車當做確定要買東西的籃子），其次是收藏型（輔助角色——把購物車作為可能買商品的聚合地，需要增刪商品） 。

Step3 用戶+策略→發散設計點
也就是去腦爆，哪些點能夠有效滿足用戶需求并實現產品目標，步驟如下：

①從用戶需求開始發散（注意標明主要/輔助角色）
②思考，在需求存在的前提下，如何更好實現目標
（如購物車分析中，會思考用戶在有湊單需求情況下，如何更好做到快速下單；而不是說因為產品想讓用戶快速下單，便弱化或不給出湊單的需求）
③ 檢查設計點，重點關注主要角色的需求，在不影響其體驗情況下，附帶滿足輔助角色需求
上三步都應該和產品經理討論確定，達成一致后，再進行設計

Step4 設計階段

這是大家每天都在做的事了~在此不做詳細說明，需要慢慢積累經驗

Step5 方案測試
用戶測試是檢驗設計結果最直接的方式，尤其是操作方面的設計。專業的用研同事會幫你搞定測試，但之前需要溝通清楚一些點：

① 改版的目的，關鍵設計點是什么；有多方案的要說明各方案特點 （用研同事必須先清楚這東西怎么用）
③ 你想了解用戶在操作過程中哪些心理（如是否會對某些文案不理解）
③ 用研計劃輸出后，再次確認測試點是否全面，能解決設計上的困惑
當然，你還需要給出一個測試demo，視覺稿+可點擊原型是最完美的，時間緊湊最好也還是輸出一個交互+可點擊原型吧。原型的內容盡量保證真實性（如購物車用真實商品、真實價格、真實活動） 。

Step6 定稿
根據用研結果，將稿件最終優化，提交。并附上各方案說明和用戶反饋。
在評審會上，當產品方對設計點提出質疑時，可回顧產品目標和用戶需求階段的結論，說明為什么會給出現在的設計。

● 一些原則

在購物車改版中，一些原則的總結分享如下

1） 不要輕易更改用戶操作的結果

不要讓用戶覺得你動了它的東西，如購物車商品列表應根據用戶添加順序倒序排列，而不要因刻意區分有貨無貨而打亂該循序。在此次購物車的設計中，因活動和套餐關系的共存，出現了一個矛盾——展示上以套餐包含商品還是以活動包含商品（如下圖），兩種方法對購物車頁面來說是各有利弊，當時還提出"用戶在此更關注什么的疑問"，但事實上，用戶都會關心，很難給出一個輕重權衡。其實跳出來想一想，套餐在被加入購物車時，用戶就是把其看成一個整體的，不應該去拆散。

2）用戶操作結果應在操作區附近給出及時反饋

操作反饋應在用戶操作關注區當前展現，涉及跨區域展示的，應給到鏈接定位到變化區。如點擊結算按鈕時，出現無貨情況，則再按鈕區反饋無貨情況，并給出鏈接定位到無貨商品行。

3）給出撤銷功能優于二次確認操作（在非關鍵流程下）

二次確認在一些情況下會因用戶慣性操作，起不到防止誤操作功效。而給出撤銷功能，換了一種形式，一能防止慣性操作，另一方面也可降低操作和思考成本。如購物車的刪除功能（如下圖）。

原文地址：ecd.tencent
作者：兔子

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：156982）分享實戰經驗。
設計微博：擁有粉絲量55萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：