2021-4-19 ui設(shè)計(jì)分享達(dá)人
在工作中常常被問(wèn)到如何表達(dá)講述自己的設(shè)計(jì)，為了讓自己的設(shè)計(jì)有理可依，對(duì)接上下游匯報(bào)工作的時(shí)候，總結(jié)以下一些方法和觀點(diǎn)，幫助不知從何講述自己設(shè)計(jì)的人一些語(yǔ)言技巧。
以下僅是個(gè)人觀點(diǎn)，用作探討交流，文中所有舉例均為本人工作設(shè)計(jì)輸出。
設(shè)計(jì)師能做出好的設(shè)計(jì)，卻缺乏系統(tǒng)化的語(yǔ)言包裝，“如何講設(shè)計(jì)”不該讓它成為難題，做一個(gè)有產(chǎn)品思維的設(shè)計(jì)師，讓你的設(shè)計(jì)以理服人，我們要不止停留在視覺(jué)表層，更要從多緯度看待產(chǎn)品設(shè)計(jì)，本文將從以下三點(diǎn)簡(jiǎn)述：01.產(chǎn)品設(shè)計(jì)的五個(gè)層面，02.講述設(shè)計(jì)的流程，03.關(guān)于本次總結(jié)
做好產(chǎn)品設(shè)計(jì)的第一步，是了解產(chǎn)品， 要對(duì)于產(chǎn)品的需求如何確定、產(chǎn)品定位如何決定有一個(gè)基本的認(rèn)識(shí)，在產(chǎn)品常識(shí)里面最重要也最常用的就是產(chǎn)品設(shè)計(jì)的五個(gè)層面，也簡(jiǎn)稱用戶體驗(yàn)五要素——
作為UI設(shè)計(jì)師，所處的視覺(jué)設(shè)計(jì)是表現(xiàn)層，是確定產(chǎn)品的最終形態(tài)，因此也處于產(chǎn)品設(shè)計(jì)的頂層（能被看到），是一個(gè)具象畫(huà)的呈現(xiàn)；其次，往里推框架層，是確定產(chǎn)品外觀，將界面信息和導(dǎo)航設(shè)計(jì)有序歸類，讓用戶使用或者理解；結(jié)構(gòu)層是為用戶設(shè)計(jì)一個(gè)結(jié)構(gòu)化的體驗(yàn)，將零散的元素轉(zhuǎn)化為有序立體的空間；范圍層確定產(chǎn)品的功能和需求；最后戰(zhàn)略層是確定產(chǎn)品目標(biāo)和用戶需求；底層邏輯結(jié)構(gòu)決定上層意識(shí)形態(tài)表現(xiàn)，因此在設(shè)計(jì)前我們要知道產(chǎn)品是屬于洞察階段，設(shè)計(jì)中是屬于產(chǎn)品設(shè)計(jì)解決方案階段，整體的產(chǎn)品設(shè)計(jì)是一個(gè)概念通過(guò)無(wú)數(shù)個(gè)層面的努力，經(jīng)過(guò)時(shí)間，轉(zhuǎn)化為具象表現(xiàn)的過(guò)程，所以我們?cè)谕瓿梢豁?xiàng)設(shè)計(jì)時(shí)，應(yīng)該講述一個(gè)完整的設(shè)計(jì)思路 ，不要讓自己的設(shè)計(jì)思路僅停留在表面。
整個(gè)產(chǎn)品的設(shè)計(jì)產(chǎn)出是一個(gè)抽象到具象化的過(guò)程，設(shè)計(jì)的前期屬于產(chǎn)品洞察階段，這個(gè)時(shí)候一般由團(tuán)隊(duì)的老板領(lǐng)導(dǎo)結(jié)合當(dāng)下市場(chǎng)需要，有用戶的需求就有商機(jī)，想出產(chǎn)品大致的方向（戰(zhàn)略層）然后通過(guò)產(chǎn)品經(jīng)理整合梳理高層的意見(jiàn)確定產(chǎn)品大致的功能和內(nèi)容輸出原型（范圍層），交給交互設(shè)計(jì)師優(yōu)化產(chǎn)品細(xì)節(jié)邏輯和信息具體框架，經(jīng)過(guò)研發(fā)評(píng)估能夠技術(shù)實(shí)現(xiàn)產(chǎn)出交互稿（結(jié)構(gòu)、框架層），這里已經(jīng)過(guò)渡到設(shè)計(jì)解決問(wèn)題執(zhí)行階段，最后是給到界面設(shè)計(jì)師美化視覺(jué)產(chǎn)出高保真（表現(xiàn)層）。
也就是到我們自己設(shè)計(jì)輸出之前要經(jīng)歷這么多，如果能在講述自己設(shè)計(jì)的時(shí)候，提前去了解這些，那么設(shè)計(jì)內(nèi)容就不愁沒(méi)法兒講，光是闡述自己的設(shè)計(jì)思路就可以講出一個(gè)故事，這也是為什么現(xiàn)在很多品牌賣貨都開(kāi)始營(yíng)銷產(chǎn)品背后的故事由來(lái)。我們?cè)O(shè)計(jì)能做好，也要會(huì)用語(yǔ)言推銷自己的設(shè)計(jì)成果。
設(shè)計(jì)是對(duì)于某件事精心準(zhǔn)備的過(guò)程。好的設(shè)計(jì)作品，應(yīng)該擁有完整的設(shè)計(jì)流程，因此我們?cè)谥v述自己設(shè)計(jì)作品的時(shí)候，有一套完整系統(tǒng)化的方式是非常有效的。完整的設(shè)計(jì)流程包含以下4個(gè)步驟：
第一是我們需要去了解設(shè)計(jì)的需求背景，知道大概的方向——
來(lái)源（簡(jiǎn)單理解就是誰(shuí)提出的問(wèn)題）需求有可能是你的老板、你的產(chǎn)品經(jīng)理、或者交互設(shè)計(jì)、或者視覺(jué)上的問(wèn)題···
背景（籠統(tǒng)一點(diǎn)，就是這個(gè)需求是新需求還是原來(lái)有然后進(jìn)行改版優(yōu)化）需求的基層性質(zhì)是什么，原本調(diào)性是什么，我們要做什么樣的產(chǎn)品···
目標(biāo)（目標(biāo)一般都是需要解決什么問(wèn)題）搞清楚為什么做這個(gè)需求，能解決什么痛點(diǎn)，不做無(wú)用功。
誰(shuí)提出的問(wèn)題，是新的需求還是舊的問(wèn)題，或者我們要解決什么？圍繞這幾個(gè)方向?qū)⒛愕脑O(shè)計(jì)概述出來(lái)，會(huì)讓非專業(yè)的人也能聽(tīng)懂你做了什么，舉個(gè)簡(jiǎn)單的例子，我們公司后臺(tái)一個(gè)很小的產(chǎn)品bug需求，往往這種需求就是產(chǎn)品經(jīng)理的一個(gè)截圖和他標(biāo)注的兩句話——
然后你完成了這個(gè)需求單，在傳達(dá)給非產(chǎn)品經(jīng)理以外的人的時(shí)候，你有可能是以下轉(zhuǎn)述方式——
毫無(wú)疑問(wèn)，你就是將需求者的意思一字不落的轉(zhuǎn)達(dá)了，但是對(duì)于其他的聽(tīng)者來(lái)說(shuō)，你的轉(zhuǎn)述平平無(wú)奇、毫無(wú)意義，甚至都沒(méi)有印象你做了什么，所以你應(yīng)該講清楚這個(gè)需求的背景——
設(shè)計(jì)需求來(lái)源是誰(shuí)，原本屬于產(chǎn)品哪個(gè)模塊（來(lái)源），他原來(lái)功能是怎么樣的，界面上展示的結(jié)構(gòu)哪里有問(wèn)題（背景），視覺(jué)用了什么樣的方式改成什么樣，解決了什么痛點(diǎn)（目標(biāo)）
講清楚誰(shuí)給的需求，需要解決什么問(wèn)題，是在原來(lái)的基礎(chǔ)上不變動(dòng)邏輯的情況下增加了什么達(dá)到了什么目的，才讓你的敘述更完整，聽(tīng)起來(lái)更有邏輯。如果是一項(xiàng)新的需求，沒(méi)有背景，那還得從設(shè)計(jì)分析說(shuō)起，設(shè)計(jì)分析就是讓你更專業(yè)的去做事，設(shè)計(jì)分析分為——用戶分析，設(shè)計(jì)目標(biāo)，和設(shè)計(jì)手段三個(gè)要點(diǎn)：
首先用戶分析就是，分析你做的東西給誰(shuí)看，而用戶又分為群體用戶和獨(dú)立用戶，在c端常見(jiàn)的就是獨(dú)立用戶，他們通常不定性，且有很多特征；在b端，目標(biāo)用戶一般是群體，他們大多數(shù)是有場(chǎng)景特性和行業(yè)特性，針對(duì)獨(dú)立用戶和群體用戶，我們得出的用戶特征、基本信息、需求結(jié)論也是不一致的，所以我們應(yīng)該結(jié)合產(chǎn)品的調(diào)性分析一下我們做出來(lái)的設(shè)計(jì)究竟給誰(shuí)看給誰(shuí)用。常見(jiàn)的用戶分析方法有：用戶畫(huà)像、用戶訪談、問(wèn)卷調(diào)查、焦點(diǎn)小組、眼動(dòng)測(cè)試、用戶反饋以及大數(shù)據(jù)分析，這些方法中最簡(jiǎn)單的是用戶畫(huà)像，就是舉實(shí)際的例子列出真實(shí)用戶的特征信息及使用場(chǎng)景。B端用戶分析方法常用大數(shù)據(jù)分析和用戶反饋，這兩種方式通過(guò)對(duì)接需求的上下游就可以得知。
通過(guò)用戶分析得出需求結(jié)論，滿足需求就能達(dá)成設(shè)計(jì)目標(biāo)——
設(shè)計(jì)目標(biāo)結(jié)合卡諾模型來(lái)分析，卡諾模型—反應(yīng)產(chǎn)品性能和解決用戶需求的滿意度的一種非線性關(guān)系，具體想了解的可以自行百度，站在巨人的肩膀上我們看得更遠(yuǎn)。 卡諾模型具備4種屬性 ：1.必備屬性：滿足這個(gè)需求，用戶滿意度不會(huì)上升，但不滿足這個(gè)需求，用戶不滿意會(huì)大幅度降低 ；2.期望屬性：提供個(gè)性化需求，用戶滿意度會(huì)上升，不提供此需求，用戶滿意度會(huì)降低； 3.魅力屬性：用戶意想不到的效果，提供此屬性，用戶滿意度大幅提升，不提供也不會(huì)降低 ；4.無(wú)差異：無(wú)論提不提供，用戶滿意度都不會(huì)改變，根本不在意；因此在做需求的時(shí)候我們應(yīng)該盡力滿足基本需求和期望需求，而可有可無(wú)的需求盡量不去做，降低效率。幸福需求是不容易達(dá)到的，如果能滿足是非常棒的～這里就像是滿足了設(shè)計(jì)心理學(xué)的三個(gè)層次——本能、行為、反思。
接下來(lái)是大家都熟知的設(shè)計(jì)手段，適當(dāng)?shù)闹v一些述專業(yè)的設(shè)計(jì)技法，用不同的手段去實(shí)現(xiàn)的主畫(huà)面，最后達(dá)到完成設(shè)計(jì)目標(biāo)這樣的結(jié)果，會(huì)讓你顯得更專業(yè)。設(shè)計(jì)的手段有很多種，這里主要講述常用的三種，構(gòu)圖排版（采用什么構(gòu)圖方式，為什么這樣構(gòu)圖是因?yàn)槭裁丛O(shè)計(jì)原則）、色彩運(yùn)用（為什么使用這個(gè)顏色，因?yàn)檫@個(gè)顏色給人的心里感知是什么樣的）、設(shè)計(jì)風(fēng)格（采用什么風(fēng)格最貼近產(chǎn)品調(diào)性，為什么用這個(gè)風(fēng)格），但是講設(shè)計(jì)時(shí)一定要記住產(chǎn)品的調(diào)性，不能偏離產(chǎn)品本身，不要盲目套用絢麗的技法，否則是不合適的。
很多時(shí)候面對(duì)非專業(yè)需求方收稿時(shí)，可能看到如下話語(yǔ)————
（心里是不是xxxx····“萬(wàn)馬奔騰”，用個(gè)文明點(diǎn)的詞）
非專業(yè)人士無(wú)法理解這二者的區(qū)別，他們認(rèn)為他們的設(shè)計(jì)手段能達(dá)成設(shè)計(jì)目標(biāo)，而作為專業(yè)設(shè)計(jì)師的我們就應(yīng)該引導(dǎo)對(duì)方說(shuō)出設(shè)計(jì)目標(biāo)，再用我們專業(yè)的手段去滿足對(duì)方的目標(biāo)，去實(shí)現(xiàn)減少改稿次數(shù)，而不是讓非專業(yè)人士去指導(dǎo)專業(yè)人士修改設(shè)計(jì)手段。分清這兩者的區(qū)別，我們就可以在設(shè)計(jì)引導(dǎo)中更加主動(dòng)。用設(shè)計(jì)分析的方法來(lái)講述設(shè)計(jì)，舉個(gè)例子——
會(huì)議管理——會(huì)議預(yù)約移動(dòng)端優(yōu)化，因?yàn)檫@是我們?cè)挟a(chǎn)品EKP里面的模塊，PC端和移動(dòng)端都有，因此用戶可能是群體也可能是個(gè)人。所以針對(duì)獨(dú)立用戶和群體用戶都做一個(gè)用戶畫(huà)像，得出他們的一些需求結(jié)論，然后目前幸福需求是沒(méi)有的，純屬個(gè)人建議，日后如果有此功能，想必用戶的滿意程度也會(huì)大大提升。
概括一下已完成的整體主要頁(yè)面，分析設(shè)計(jì)目標(biāo)：
頭部屬于流量量較高的區(qū)域，采用卡片式設(shè)計(jì)，將會(huì)議內(nèi)容置于此處，作為頁(yè)面信息關(guān)鍵層，采用左對(duì)齊方式排版，突出會(huì)議標(biāo)題和時(shí)間提醒用戶。
通過(guò)不同的顏色標(biāo)簽，區(qū)分參會(huì)人員狀態(tài)——
待進(jìn)行未有操作反饋，選用橙色，屬于可以持續(xù)進(jìn)行并有明顯提醒作用
已做反饋屬于成功操作，選用已有用戶認(rèn)知心理的綠色
已知信息拒絕參與，是不太重要的，屬于不再進(jìn)行的階段，選用灰色
接下來(lái)是設(shè)計(jì)作品的產(chǎn)出過(guò)程，一般情況下不可見(jiàn)的過(guò)程，為什么要去講， 因?yàn)橐粋€(gè)東西從無(wú)到有是很不容易的一件事，如果能講述過(guò)程，就可以引燃情緒共鳴，讓別人記住，讓自己的設(shè)計(jì)作品也能有始有終——
設(shè)計(jì)過(guò)程一般分為四個(gè)階段：初期階段、中期階段、最終定稿；具體的關(guān)鍵詞和描述可以通過(guò)以下方式提煉出來(lái)，這里就不做詳細(xì)說(shuō)明了。
拿運(yùn)營(yíng)宣傳來(lái)舉個(gè)例子，我們公司中秋節(jié)月餅禮盒包裝主視覺(jué)設(shè)計(jì)——
整個(gè)過(guò)程應(yīng)該是有一個(gè)系統(tǒng)化的說(shuō)明的，省略為寫(xiě)字的地方是我們可以插入的具體圖片和過(guò)程，步驟差不多就是上述這些，可以有最初階段的頭腦風(fēng)暴-提取關(guān)鍵詞-清晰定位到中期階段的團(tuán)隊(duì)合作—風(fēng)格擬定-精選方案-細(xì)節(jié)刻畫(huà)以及和物料方溝通對(duì)接的打樣確定工藝等等過(guò)程…再到最后定稿的體驗(yàn)還原-問(wèn)題優(yōu)化…主畫(huà)面的誕生是不容易的，強(qiáng)化這種過(guò)程參與，讓不被看見(jiàn)的事也能展現(xiàn)。如果實(shí)在不好記錄，你可以從一開(kāi)始就截圖你繪制的過(guò)程——
上圖是用PS截圖，再用時(shí)間軸將每一幀動(dòng)態(tài)循壞播放，導(dǎo)出GIF然后截一張不變的底圖合成就可以了。
最后是數(shù)據(jù)驗(yàn)證階段，這個(gè)是設(shè)計(jì)落地的直觀證實(shí)，包含主觀認(rèn)可和客觀數(shù)據(jù)，具體內(nèi)容就是通過(guò)用戶或者專業(yè)的人士反饋給你設(shè)計(jì)落地的好壞，來(lái)判定你做的是否優(yōu)秀成功。通常這一塊的數(shù)據(jù)決定你驗(yàn)證你前面所有的過(guò)程，只要按照該流程認(rèn)真做了，最后效果通常不會(huì)太差，如果出現(xiàn)很大的偏差也往往是意料之外的，因該尋求團(tuán)隊(duì)一起解決，不是某一個(gè)人的問(wèn)題。
根據(jù)以上最后我們總結(jié)，好的設(shè)計(jì)就是滿足以下4個(gè)方面：好看，好用，好記，能實(shí)現(xiàn)。設(shè)計(jì)師要考慮的維度不僅僅在視覺(jué)層面，什么是有產(chǎn)品思維的設(shè)計(jì)師，就是在執(zhí)行時(shí)候要考慮上下游不同職能的工作內(nèi)容，如果你的設(shè)計(jì)不能實(shí)現(xiàn)，再好看也是白費(fèi)功夫的～從產(chǎn)品交互視覺(jué)多層面談設(shè)計(jì)，會(huì)讓你的設(shè)計(jì)包裝顯得不那么單調(diào)，系統(tǒng)化的方法總結(jié)到此，不足之處多多包含～謝謝你的閱讀！
文章來(lái)源：站酷 作者：YiVi_eleven
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com