本文從What和How兩個部分闡述如何輸出清晰有效的設(shè)計方案，為大家建立系統(tǒng)的設(shè)計思路提供幫助。

很多初入職場的設(shè)計師在審美和平面圖形基礎(chǔ)上都比較扎實，對軟件的操作也出神入化，單個方案的界面視覺表現(xiàn)完成度和細(xì)致度也沒有太大問題。但卻往往在實際輸出項目方案的時候碰到瓶頸，方案反復(fù)地修改還不盡人意，設(shè)計能力無法得到質(zhì)的提升，晉升的腳步也從而停滯。

本文從What/How兩個部分循序漸進地闡述如何輸出清晰有效的設(shè)計方案，希望給大家一些建立系統(tǒng)性設(shè)計思路的啟發(fā)，幫助大家更好地輸出設(shè)計方案，為決策設(shè)計方案提供更有力的參考。

 WHAT: 什么是清晰有效的設(shè)計方案

首先我們需要對清晰有效有一個整體的認(rèn)知。所謂清晰，從字面上理解是指看得很清楚、明朗，設(shè)計層面來說就是方案能做到方向明確，方案明了。而有效字面上指的是有效果，有效力，從設(shè)計層面來說就是輸出的方案可以解決存在的問題，能達(dá)到設(shè)定的目標(biāo)以及可以切實落地。

清晰和有效的考量維度是不一樣的：清晰更多是針對設(shè)計這一環(huán)節(jié)，在于不同方向/方案的差異度和側(cè)重點；而有效則更多需要聯(lián)合設(shè)計上下游（用戶/產(chǎn)品/開發(fā)）。對于優(yōu)秀的設(shè)計方案來說兩者相輔相成，缺一不可。

接下來我們來詳細(xì)拆解什么是清晰和有效。

1.清晰 - 方向明確，方案明了

——————————

很多設(shè)計師對方案輸出的數(shù)量有個認(rèn)知誤區(qū)，認(rèn)為設(shè)計方案越多越好，可以給老板、合作方更多選擇，往往不假思索地用大量的時間輸出所有可能的方案，并拿出來讓別人評審，認(rèn)為把所有的可能性列出來就不會錯，這正是對方案清晰性缺乏認(rèn)知的表現(xiàn)。

在設(shè)計最初期，不要著急動手輸出界面，先結(jié)合目標(biāo)（近期目標(biāo)和遠(yuǎn)期目標(biāo)）綜合考量，系統(tǒng)性地思考有哪些途徑達(dá)到目標(biāo)，確保所有實現(xiàn)手段的方式都有考慮到，并且可以整合途徑一致、方向近似的方案。對差異性不大的方案進行合并劃歸，才能在合理范圍內(nèi)整理出具有不同思考維度與目標(biāo)側(cè)重的提案方向。前期規(guī)劃思考的深度決定了方案的廣度，只有清晰的思考方案才會創(chuàng)造無限的可能。

 用案例來讓大家對清晰這個定義有更具象的認(rèn)知：

相冊小程序Logo這個需求的目標(biāo)是需要突出相冊元素，并強化品牌識別度。

這是設(shè)計師輸出的Logo提案初稿，雖然輸出了28個方案之多，但沒有設(shè)計思路的規(guī)劃，想到哪就畫到哪，很多方案是重復(fù)的，還有一些方案在設(shè)計初期就應(yīng)該Pass，設(shè)計的整個細(xì)致度也不夠充分。

于是設(shè)計師對設(shè)計方向重新進行規(guī)劃整合，按照輸出形式重新規(guī)劃了分類。

按照分類篩選出四個可以繼續(xù)優(yōu)化的方案。并且拿著四個不同方向的方案去匯報。最終確定D方案。

我們重新回顧一下這個需求，28個方案 VS 4個方案，設(shè)計師需要的不是盡可能輸出多方案的能力，方案越多可能表示你在錯誤的道路上越走越遠(yuǎn)，需要的是通過前期系統(tǒng)的思考能一次把方案做對的能力。

2. 有效 - 解決存在的問題、能達(dá)到設(shè)定的目標(biāo)、可以落地的方案

——————————

很多設(shè)計師拿到產(chǎn)品需求會立即動手，認(rèn)為滿足了產(chǎn)品這個角色提的需求便是好的設(shè)計輸出，或者把方案出的天花亂墜，當(dāng)產(chǎn)品或者其他角色提出不同意見就會覺得他們不懂什么是好的設(shè)計。這些現(xiàn)象大多是因為設(shè)計師在項目前期沒有正確思考和評估這個需求本身需要解決什么問題、方案能否達(dá)到團隊共同設(shè)定的目標(biāo)，以及方案是否能平穩(wěn)落地這三個維度。

解決存在的問題—從問題出發(fā)

我們在實際輸出方案的時候，不能從產(chǎn)品經(jīng)理的需求文檔開始，而是要把考量維度更前置，從項目現(xiàn)有的問題出發(fā)。這個問題的搜集包括外部用戶的反饋，內(nèi)部團隊的聲音，但需要注意的是用戶的反饋不一定是真正的問題，需要做到篩選和甄別。比如新發(fā)布一個版本可能會碰到的一個情況是很多用戶打一星反饋說界面太難看太丑，這種屬于用戶感受，我們可以再深挖一下用戶覺得丑的原因，是不是改變了太多用戶習(xí)慣，但又沒有給用戶真的帶來更好的體驗和更多的收益。

能達(dá)到設(shè)定的目標(biāo)—從目標(biāo)啟動

問題還需要結(jié)合目標(biāo)一起考慮，解決問題的思路并不完全等同于目標(biāo)，目標(biāo)是大家一起制定的未來產(chǎn)品的發(fā)展方向。比如我們新發(fā)布的版本里面新加了一個Tab改變了用戶習(xí)慣，大批用戶投訴，但如果這個新Tab是符合我們目標(biāo)的，我們不能為了短期解決用戶投訴把這個Tab下掉，應(yīng)該繼續(xù)觀察用戶在這個使用過程中碰到了什么問題，解決實際操作中碰到的問題。

用案例來讓大家對問題和目標(biāo)有更具象的認(rèn)知：

我們需要優(yōu)化QQ空間的為空界面，首先我們梳理下現(xiàn)網(wǎng)存在的問題，風(fēng)格整體比較老舊，很多圖形表意不明確，新出模塊就會有新風(fēng)格，所以存在很多不統(tǒng)一的地方，空間整個業(yè)務(wù)有一百多個為空界面，導(dǎo)致開發(fā)也不清楚到底應(yīng)該怎么用，用什么，所以很長一段時間是處于亂用的狀態(tài)。

接著我們梳理了這次優(yōu)化的目標(biāo)：

1 界面統(tǒng)一，用戶能對表意感知明確（解決現(xiàn)網(wǎng)問題）

2 強化QQ的品牌

3 做成基礎(chǔ)組件，保證復(fù)用性

4 低成本開發(fā)

確定了優(yōu)化目標(biāo)以后我們沒有馬上急于嘗試風(fēng)格，而是先遍歷了所有為空異常頁，整合了所有場景最后梳理出八種情況，這八種情況可以覆蓋所有的為空場景，梳理整合場景是目標(biāo)1、3、4能實現(xiàn)的前提。

然后我們基于這八個場景來輸出設(shè)計風(fēng)格，要低成本開發(fā)，所以這里沒有考慮加動畫，用企鵝剪影結(jié)合具體的場景來表意，不僅強化了品牌，也能做到表意清晰明確。圖形定好以后我們馬上也輸出了規(guī)范，Push給對接的開發(fā)同學(xué)方便調(diào)用。

在輸出方案過程中，始終都要緊緊貼合問題和目標(biāo)，避免無效設(shè)計。

能落地的方案—技術(shù)可以實現(xiàn)

在輸出設(shè)計方案的時候，設(shè)計師需要考慮到開發(fā)成本是什么，需要消耗多少資源去實現(xiàn)這個需求，最低成本達(dá)到目標(biāo)的路徑是什么。如果有些方案開發(fā)成本很大卻收益價值卻很小，我們就需要斟酌它是否仍有執(zhí)行的必要。避免一味的追求設(shè)計效果不去對齊成本、人力，最后也只會是設(shè)計的自嗨。

用案例來讓大家對清晰這個定義有更具象的認(rèn)知：

產(chǎn)品提了好友生日推送禮物的需求，目標(biāo)是想用生日這一比較溫情的場景去設(shè)計專門的祝福頁，用來提升寫操作和大盤活躍。我們需要設(shè)計送給用戶的禮物卡片，從實現(xiàn)手段的難易規(guī)劃了三個方向：

A 手勢交互但開發(fā)難度大: 3D手勢交互動畫

B 趣味動圖且開發(fā)成本適中：局部小動畫

C 靜態(tài)但開發(fā)成本低：全靜態(tài)視覺，復(fù)用已有開發(fā)流程

最后團隊對齊了人力成本，決定采用方案C，把設(shè)計精力放在本身卡片的表現(xiàn)上。

HOW: 如何輸出清晰有效的設(shè)計方案

那如何才能輸出清晰有效的設(shè)計方案呢？設(shè)計方案歸根結(jié)底是思維方式的具體體現(xiàn)，輸出清晰有效的設(shè)計方案最核心的點在于體系化的思考方式，我總結(jié)了一下幾點：

1 拓寬邊界

——————————

拓寬邊界需要設(shè)計師站在更高的視角和有更廣的視野，把設(shè)計從表現(xiàn)和執(zhí)行抽離往前后延展，在整個設(shè)計過程中往前去挖掘需求和規(guī)劃產(chǎn)品結(jié)構(gòu)，往后做到把控和沉淀，能站在上下游各維度去Review整個項目，只有站在更全局的視角審視，才能跳出片面設(shè)計的維度。

2 轉(zhuǎn)換視角

——————————

從不同的視角看待問題，學(xué)會拆解問題和解決問題，從產(chǎn)品/開發(fā)不同的角度來全盤看整個產(chǎn)品，分析這個需求的投入產(chǎn)出比是不是足夠，是不是能達(dá)到目標(biāo)（包括設(shè)計目標(biāo)和產(chǎn)品目標(biāo)）。設(shè)計、產(chǎn)品、開發(fā)從來都不是對立的，都是不同角色為了整個產(chǎn)品發(fā)力。

舉個例子，產(chǎn)品同學(xué)覺得輸出的方案不好看，是在用感性表達(dá)，我們可以嘗試?yán)^續(xù)拆解不好看背后的原因，比如是不是核心內(nèi)容不夠突出、擔(dān)心按鈕轉(zhuǎn)化率等，一開始就抱著產(chǎn)品不懂設(shè)計這種想法是沒有辦法解決問題的。

還有一個就是用戶同理心，很多時候我們不能只站在設(shè)計師和產(chǎn)品的角度看待用戶反饋的問題，比如新功能內(nèi)部團隊覺得很厲害，但實際門檻太高，用戶根本不知道怎么操作，而我們長期體驗這個產(chǎn)品反而忽略了產(chǎn)品的易用性。

3 結(jié)構(gòu)思維

——————————

我們在啟動項目的時候，不要單點去看要在某個頁面要做什么改動，而是從問題入手，和產(chǎn)品同學(xué)對齊好目標(biāo)，結(jié)合設(shè)計理念，最后找到發(fā)力點在哪里，循序漸進，這樣很大程度上能避免項目的反復(fù)，對設(shè)計流程的準(zhǔn)確把控也是輸出優(yōu)秀設(shè)計方案的基礎(chǔ)。

舉一個日常生活的例子幫助大家理解，比如我的問題是長得丑，我的目標(biāo)是要變得更年輕漂亮，我的理念就是改善體型和優(yōu)化五官，最后找到具體的發(fā)力點比如晚上不吃晚飯，去美容院打美容針、學(xué)會怎么化妝等。

4 認(rèn)知創(chuàng)新

——————————

有些新設(shè)計師對設(shè)計創(chuàng)新的認(rèn)知還停留在是去做一些創(chuàng)造世界、改變世界的事情，認(rèn)為創(chuàng)新就是把原項目進行翻天覆地的改變，初入職場會覺得負(fù)責(zé)的業(yè)務(wù)和項目都很小，沒有什么意思，其實創(chuàng)新的維度有很多，包括設(shè)計工作流程的優(yōu)化、還有從小的問題點著手去深挖和思考，找到合適的解決方案并打磨細(xì)節(jié)給用戶創(chuàng)造驚喜。擺正心態(tài)才能做對事做好事。

5 及時復(fù)盤

——————————

完成項目以后需要不斷的總結(jié)方法，遇到的問題，除了技法層面的提升，更重要的還包括思考層面的提升。學(xué)會去總結(jié)之前踩過的坑，避免重復(fù)性的問題，比如你的輸出一直存在層級不清晰的問題，那么你需要關(guān)注后續(xù)輸出的界面里大模塊之間以及元素之間的層次是否還存在這個問題。可以犯錯誤，但是盡量避免總是犯同樣的錯誤，這樣才能加速成長的腳步。

寫在最后

進入互聯(lián)網(wǎng)公司工作之前，我們對設(shè)計的理解更多停留在表現(xiàn)層面，所以對好設(shè)計的判斷標(biāo)準(zhǔn)更多是好不好看、喜不喜歡。當(dāng)進入互聯(lián)網(wǎng)公司后，隨著工作經(jīng)驗的積累，我們會發(fā)現(xiàn)設(shè)計不只是狹義地使用軟件繪制圖形，背后需要很強的邏輯和系統(tǒng)思考的能力、結(jié)構(gòu)化的思維、溝通能力等，需要我們不斷的學(xué)習(xí)補齊自己的短板，及時轉(zhuǎn)換職場心態(tài)。

文章來源：站酷   作者：騰訊ISUX

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)