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

2022-6-20    純純

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





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


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


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


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




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

——————————


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


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



 用案例來(lái)讓大家對(duì)清晰這個(gè)定義有更具象的認(rèn)知:


相冊(cè)小程序Logo這個(gè)需求的目標(biāo)是需要突出相冊(cè)元素,并強(qiáng)化品牌識(shí)別度。


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



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



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



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



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

——————————


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




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


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



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


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


用案例來(lái)讓大家對(duì)問(wèn)題和目標(biāo)有更具象的認(rèn)知:


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




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


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

2 強(qiáng)化QQ的品牌

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

4 低成本開(kāi)發(fā)


確定了優(yōu)化目標(biāo)以后我們沒(méi)有馬上急于嘗試風(fēng)格,而是先遍歷了所有為空異常頁(yè),整合了所有場(chǎng)景最后梳理出八種情況,這八種情況可以覆蓋所有的為空?qǐng)鼍埃崂碚蠄?chǎng)景是目標(biāo)1、3、4能實(shí)現(xiàn)的前提。



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



在輸出方案過(guò)程中,始終都要緊緊貼合問(wèn)題和目標(biāo),避免無(wú)效設(shè)計(jì)。



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


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


用案例來(lái)讓大家對(duì)清晰這個(gè)定義有更具象的認(rèn)知:


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


A 手勢(shì)交互但開(kāi)發(fā)難度大: 3D手勢(shì)交互動(dòng)畫

B 趣味動(dòng)圖且開(kāi)發(fā)成本適中:局部小動(dòng)畫

C 靜態(tài)但開(kāi)發(fā)成本低:全靜態(tài)視覺(jué),復(fù)用已有開(kāi)發(fā)流程



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



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


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




1 拓寬邊界

——————————

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




2 轉(zhuǎn)換視角

——————————

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


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


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



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

——————————

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


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




4 認(rèn)知?jiǎng)?chuàng)新

——————————

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



5 及時(shí)復(fù)盤

——————————

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



作者:騰訊ISUX     來(lái)源:站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


分享本文至:

日歷

鏈接

個(gè)人資料

存檔