4個(gè)方法幫你一稿過(guò)設(shè)計(jì)!

2019-03-27 1663 0

大多數(shù)設(shè)計(jì)師在實(shí)際工作中,經(jīng)常會(huì)碰到設(shè)計(jì)稿改來(lái)改去,改得焦頭爛額,甚至懷疑自己的設(shè)計(jì)水平,這是為什么呢?又有什么解決的方法?這篇文章為你答疑解惑。

「設(shè)計(jì)」這一門工種,似乎是永遠(yuǎn)避免不了「改稿」這一環(huán)節(jié)的,即便是非常頂尖的設(shè)計(jì)師,不為甲方不為外部原因所妥協(xié),也會(huì)在自我實(shí)踐中尋求改變。但是,「改設(shè)計(jì)」也未必是越改越好,如果溝通不當(dāng),也會(huì)存在越改越糟的結(jié)果。所以,作為設(shè)計(jì)師,一方面我們要吸取不同的意見(jiàn),另一方面也要全面提升自己的知識(shí)架構(gòu)、堅(jiān)守自己的原則。

接下來(lái)以「UI設(shè)計(jì)」為例,剖析我們?nèi)粘9ぷ髦小父牧擞指摹沟膯?wèn)題。在實(shí)際工作中,UI設(shè)計(jì)師通常會(huì)面臨來(lái)自老板、產(chǎn)品、運(yùn)營(yíng)、開發(fā)等各方人員的意見(jiàn),也常常會(huì)因?yàn)樽煮w的粗細(xì)、間距的大小、顏色的選擇等等問(wèn)題各執(zhí)一詞、爭(zhēng)論不休,就像下圖一樣:

1.jpg

為什么會(huì)這樣呢?其實(shí),在UI設(shè)計(jì)中,頻繁改稿主要存在三種情況:

第一種:在與產(chǎn)品經(jīng)理需求對(duì)接的時(shí)候溝通不到位導(dǎo)致理解有偏差,產(chǎn)生方向性錯(cuò)誤,這是信息傳遞的問(wèn)題;

第二種:設(shè)計(jì)師經(jīng)驗(yàn)不足、設(shè)計(jì)能力有限導(dǎo)致產(chǎn)品經(jīng)理的需求得不到最佳程度的實(shí)現(xiàn),這是UI設(shè)計(jì)師本身的問(wèn)題;

第三種:UI都已經(jīng)做到一半或者已經(jīng)輸出了,產(chǎn)品需求又變動(dòng)了,這是產(chǎn)品經(jīng)理或老板的需求不確定的問(wèn)題。

2.jpg

針對(duì)以上問(wèn)題,在實(shí)際項(xiàng)目中怎樣避免陷入頻繁改稿的死循環(huán),從而提高工作效率、推動(dòng)項(xiàng)目進(jìn)展,提升自己作為設(shè)計(jì)師的成就感呢?

認(rèn)清工作流,保持全方位的溝通

首先我們來(lái)了解一下UI設(shè)計(jì)的工作流,只有清楚自己崗位的流程,才能更好地拿捏設(shè)計(jì)。每個(gè)公司的類型和規(guī)??赡芏疾惶粯?,但基本一致,無(wú)非就是5個(gè)階段:需求 – 設(shè)計(jì) – 開發(fā) – 測(cè)試 – 上線。如果按職位劃分就是:產(chǎn)品經(jīng)理 – 交互設(shè)計(jì)師 – UI設(shè)計(jì)師 – 前后端開發(fā)工程師 – 測(cè)試人員 – 產(chǎn)品上線。

3.jpg

所以我們UI設(shè)計(jì)師是處于流水線中游的狀態(tài),向上對(duì)接產(chǎn)品,向下對(duì)接開發(fā)。在這個(gè)流程中,要做到減少設(shè)計(jì)修改的頻率:

向上要明確產(chǎn)品經(jīng)理的需求,將原型需求準(zhǔn)確恰當(dāng)?shù)囊曈X(jué)化;

向下要考慮開發(fā)實(shí)現(xiàn)以及時(shí)間成本,因?yàn)槿绻粋€(gè)設(shè)計(jì)做的非常絢麗,但是開發(fā)實(shí)現(xiàn)不出來(lái)或者很難實(shí)現(xiàn)或者實(shí)現(xiàn)的時(shí)間成本很大,那么肯定需要對(duì)設(shè)計(jì)方案做出調(diào)整,采納折中方案。

所以,不想讓自己的設(shè)計(jì)改了又改,那么一定要全方位的多溝通,一定不要「閉門造車」。

確定需求,吃透交互原型

UI設(shè)計(jì)師接到產(chǎn)品原型后,一定要弄清這幾點(diǎn),再開始設(shè)計(jì):

4.jpg

1. 原型是否確定,會(huì)不會(huì)存在變動(dòng)?

我們?cè)诮邮盏疆a(chǎn)品經(jīng)理遞交過(guò)來(lái)的交互原型稿之后,先和對(duì)方確定收到的需求是否完整,是否是最終稿件以及是否會(huì)存在變動(dòng)。一般來(lái)講,在大型企業(yè)里面流程都比較規(guī)范,產(chǎn)品經(jīng)理輸出最終原型之后,后期變動(dòng)的可能性較低。但在中小型企業(yè),通常因?yàn)轫?xiàng)目時(shí)間緊張,流程不夠完善,反復(fù)的可能性較多。一些大型需求,產(chǎn)品經(jīng)理有可能會(huì)分模塊、一部分一小點(diǎn)的流轉(zhuǎn)到UI設(shè)計(jì),這樣存在的問(wèn)題隱患比較多,因?yàn)榻?jīng)驗(yàn)較少的產(chǎn)品經(jīng)理全局概念較差,雖然口頭上說(shuō)這一部分的需求已經(jīng)完善了,實(shí)際上當(dāng)所有需求匯總之后極有可能需要再次調(diào)整。所以作為UI設(shè)計(jì)師,我們盡可能不要去接局部輸出的原型,需要再次確認(rèn)無(wú)誤后,我們?cè)僦衷O(shè)計(jì),這樣就避免了原型需求的變動(dòng)造成設(shè)計(jì)的變動(dòng)。

5.jpg

還有一點(diǎn),在產(chǎn)品經(jīng)理給到交互原型時(shí),我們是被動(dòng)的接受,還是在需求溝通之中也能及時(shí)參與呢?最好在產(chǎn)品需求的評(píng)審階段,對(duì)應(yīng)的UI設(shè)計(jì)師可以積極參與討論,一起溝通。一來(lái)可以熟悉產(chǎn)品思考的整個(gè)過(guò)程,二來(lái)可以在原型的溝通中站在設(shè)計(jì)的角度及時(shí)發(fā)現(xiàn)問(wèn)題,提出建議,避免在原型定稿后再去修改的尷尬。

  2. 項(xiàng)目的時(shí)間周期

在接到產(chǎn)品的原型后,一定要及時(shí)確認(rèn)項(xiàng)目的時(shí)間周期,通常產(chǎn)品經(jīng)理會(huì)主動(dòng)告知項(xiàng)目的周期,詢問(wèn)UI設(shè)計(jì)完成時(shí)間,我們根據(jù)需求的復(fù)雜程度給出UI輸出的預(yù)計(jì)時(shí)間,再根據(jù)這個(gè)時(shí)間節(jié)點(diǎn)來(lái)劃分每一天完成的工作量。如果產(chǎn)品經(jīng)理給的時(shí)間周期比較短,那么盡可能的闡述原因申請(qǐng)?jiān)O(shè)計(jì)時(shí)間。如果時(shí)間過(guò)于倉(cāng)促的話,設(shè)計(jì)思考的時(shí)間就少,考慮的問(wèn)題很難全面,不利于界面效果的最佳呈現(xiàn),導(dǎo)致后續(xù)改稿的可能性也很大。

6.jpg

3. 理清設(shè)計(jì)意圖,處理好信息層級(jí)

接到產(chǎn)品原型,一定要理清設(shè)計(jì)意圖,處理好信息層級(jí)。

當(dāng)產(chǎn)品經(jīng)理遞交給我們確定的需求原型之后,切莫盲目開始設(shè)計(jì),UI設(shè)計(jì)并不是把原型框架進(jìn)行簡(jiǎn)單的排列,我們需要理清設(shè)計(jì)意圖,熟悉功能架構(gòu)、掌握交互邏輯,明白產(chǎn)品經(jīng)理想要解決什么問(wèn)題,達(dá)到什么程度以及具體的設(shè)計(jì)方向。

信息層級(jí)這個(gè)問(wèn)題,好像我們?cè)趯?shí)際工作中經(jīng)常會(huì)提起,但是要做到恰如其分的標(biāo)準(zhǔn)還是有點(diǎn)難度的。準(zhǔn)確把握界面的信息層級(jí)還需要跟產(chǎn)品經(jīng)理多方面的溝通,因?yàn)橛行r(shí)候我們以為的,并不是產(chǎn)品想要的,所以一定要多次確認(rèn),才能精準(zhǔn)把握。

7.jpg

△ 上圖左側(cè)是lofter首頁(yè)列表,右側(cè)是我統(tǒng)一梳理層級(jí)關(guān)系之后的效果

改動(dòng)的重點(diǎn):

將配圖采用四周留白的卡片式布局,讓界面更通透,增強(qiáng)呼吸感,視覺(jué)焦點(diǎn)更為集中;

優(yōu)化標(biāo)題與標(biāo)簽話題的展現(xiàn)形式,通過(guò)文字大小及字色深淺拉開主題文字與話題標(biāo)簽的層級(jí)關(guān)系;

將熱度與喜歡、評(píng)論、轉(zhuǎn)發(fā)的實(shí)時(shí)數(shù)量跟隨圖標(biāo)后面,增加用戶參與的積極性。

多個(gè)設(shè)計(jì)稿比較,讓每一處設(shè)計(jì)有理有據(jù)

在實(shí)際設(shè)計(jì)過(guò)程中,當(dāng)碰到一個(gè)設(shè)計(jì)模塊拿捏不準(zhǔn)的時(shí)候,可以在 sketch 或者 ps 中建立多個(gè)畫板,將幾種不同的設(shè)計(jì)方案平鋪展開,進(jìn)行視覺(jué)對(duì)比分析。如果自己拿不準(zhǔn),可以叫組員或者其他部門的「小白」來(lái)進(jìn)行選擇投票或者提出改善性建議。不要小看「小白」,不要覺(jué)得他們不懂設(shè)計(jì),提的建議對(duì)設(shè)計(jì)無(wú)用。其實(shí)不然,我們的設(shè)計(jì)最終目的是給人用的,而且要好用,所以一定要多結(jié)合小白用戶的多方面意見(jiàn),才能讓自己的設(shè)計(jì)更經(jīng)得起推敲。

8.jpg

上圖為筆者在處理個(gè)人中心界面效果拿捏不準(zhǔn)的時(shí)候,布局了多個(gè)效果進(jìn)行對(duì)比,通過(guò)對(duì)比的呈現(xiàn)后,就可以清晰判斷每一個(gè)界面存在的問(wèn)題。

另外,UI設(shè)計(jì)中,不要停留于表面,不要用「好看或不好看」去做簡(jiǎn)單評(píng)斷,在設(shè)計(jì)過(guò)程中我們的界面布局、顏色把控、字符間距、icon設(shè)置等多方面都要經(jīng)得起推敲:為什么這樣設(shè)計(jì)?換一種設(shè)計(jì)合不合適?

只有讓每一處設(shè)計(jì)都有理論的支撐,深思熟慮后,才會(huì)讓設(shè)計(jì)更切實(shí)際,才能讓人信服,才能實(shí)現(xiàn)產(chǎn)品指數(shù)的增長(zhǎng),也更能體現(xiàn)設(shè)計(jì)師的價(jià)值。

以產(chǎn)品為核心,尊重各方立場(chǎng)

當(dāng)設(shè)計(jì)稿出來(lái)之后,一般會(huì)組織 UI評(píng)審,UI設(shè)計(jì)師一定要將自己的設(shè)計(jì)理念表達(dá)清楚,將設(shè)計(jì)中考究的觀點(diǎn)輸送給參與評(píng)審的各方人員,這樣會(huì)讓你的設(shè)計(jì)更有信服力。如果在評(píng)審過(guò)程中,產(chǎn)品、運(yùn)營(yíng)或開發(fā)對(duì)設(shè)計(jì)稿提出不同的意見(jiàn),我們首先不要急于否定,要確定立場(chǎng):大家都是以產(chǎn)品為核心去思考問(wèn)題,也不要人云亦云,要清楚他們?yōu)槭裁磿?huì)提出這個(gè)意見(jiàn),是不是自己的設(shè)計(jì)哪里沒(méi)有展現(xiàn)好?即便對(duì)方的建議本身沒(méi)有可取性,那么你也要站在你的視角用你的觀點(diǎn)解釋給對(duì)方聽(tīng)。這決定于每個(gè)設(shè)計(jì)師的自身知識(shí)架構(gòu)和理論支撐,所以一定要讓自己不停地吸收,才能讓自己的設(shè)計(jì)更經(jīng)得起推敲。

9.jpg

以上是我在實(shí)際工作中的一些比較淺薄的總結(jié),如有闡述不周的地方大家可以相互探討。


0
評(píng)論區(qū)(0)
正在加載評(píng)論...