2022-8-9 ui設(shè)計分享達(dá)人
最近新的一批應(yīng)屆生開始步入職場,讓我想到自己剛?cè)朐O(shè)計這一行時,遇到的大大小小問題感到很是無助。今天這篇是結(jié)合自身經(jīng)驗寫給入行不久的設(shè)計,希望你們眼中有光心中有夢對設(shè)計仍不忘初心。
相信你在設(shè)計工作中一定遇到過這樣的場景,當(dāng)好不容易拿著設(shè)計稿推進(jìn)時,被各種角色提出意見:
“我覺得這個設(shè)計不高級”,“我覺得這里可以再大一點,顏色更亮一點”,“我覺得可以試試競品那樣”,“算了,還是用第一稿吧”等等,然后陷入無限改改改的循環(huán)中,往往做著做著就開始懷疑自己是不是不適合設(shè)計
我認(rèn)為有3個方面的問題
每個人的審美不一樣,天然會摻雜著主觀因素,導(dǎo)致每個人都能很容易的提出自己的意見。而我們對設(shè)計的關(guān)注往往是各種好看概念稿、當(dāng)前流行趨勢等等,導(dǎo)致我們過于追求視覺表現(xiàn),而忘記從需求層面出發(fā)
每個需求都是有具體的目標(biāo)用戶,用戶身份不同,同一個問題背后的需求也是不一樣的,當(dāng)與真實用戶脫節(jié),業(yè)務(wù)理解不到位,很可能就把整個需求理解錯誤,這樣修改的幾率就很大
沒有理解每個功能是什么,背后要解決的問題是什么,滿足了什么需求,能夠得到的價值是什么
產(chǎn)品或運營提出一個需求的背后,往往都有一個非常明確的結(jié)果預(yù)期,他們也需要層層審核。我們不應(yīng)該想“他是不是對我有意見”“他不懂設(shè)計的吧,就喜歡瞎BB”“每次都這樣針對我,設(shè)計做的真沒意思”等等,而是需要主動溝通,了解為什么?只有充分的理解需求,才能尋找更正確更好的解決方案。
我們做稿子時常存在問題是我們僅僅關(guān)注了設(shè)計視覺表達(dá)環(huán)節(jié),整個項目流程我們理解的過于狹隘,騰訊百度這些大廠設(shè)計流程往往從項目立項設(shè)計已經(jīng)開始介入了
想要提升設(shè)計方案的說服力,首先要從思想上改變對設(shè)計認(rèn)知,然后再從執(zhí)行層上落實每個小點
這里需要設(shè)計師站在更高的視角,把設(shè)計從表現(xiàn)和執(zhí)行抽離往前后延展,在整個過程中往前去挖掘需求和規(guī)劃產(chǎn)品結(jié)構(gòu),往后做到把控和沉淀,跳出視覺認(rèn)知層,才能宏觀看待整個業(yè)務(wù)改版
從不同的視角看待問題,學(xué)會拆解問題和解決問題,從產(chǎn)品、設(shè)計、開發(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é)對齊好目標(biāo),結(jié)合設(shè)計理念。
最后找到發(fā)力點在哪里,循序漸進(jìn),這樣很大程度上能避免項目的反復(fù),對設(shè)計流程的準(zhǔn)確把控也是輸出優(yōu)秀設(shè)計方案的基礎(chǔ)。
有些新設(shè)計師認(rèn)為創(chuàng)新就是把原項目進(jìn)行翻天覆地的改變,初入職場會覺得負(fù)責(zé)的業(yè)務(wù)和項目都很小,沒有什么意思,其實創(chuàng)新的維度有很多,包括設(shè)計工作流程的優(yōu)化,還有從小的問題點著手去深挖和思考,找到合適的解決方案并打磨細(xì)節(jié)給用戶創(chuàng)造驚喜。
陌陌情感化設(shè)計和貝殼旗下被窩家裝產(chǎn)品圖標(biāo)設(shè)計異曲同工之處,大方向上都是利用大色塊、細(xì)節(jié)處用線條勾勒,整體設(shè)計輕量化符合年輕人喜歡,但兩者又有不同之處。陌陌對表情和動作的處理線條更簡潔更抽象,而被窩家裝圖標(biāo)融入品牌IP趣味化表達(dá),傳達(dá)出詼諧、幽默的正面情感
設(shè)計師往往對信息的獲取比較片面,很多往往坐等原型,然后刷網(wǎng)站找圖接著打開軟件擼圖,這種不充分理解需求就開始做設(shè)計的行為,屬于思維懶惰,就被稱為常說的美工
我們在需求階段設(shè)計師應(yīng)該主動跟需求方深入溝通,搞清楚以下方向的問題:
明確目標(biāo)是為了最終設(shè)計方案可衡量,設(shè)計師工作不是提供一個天花亂墜的方案,而是盡可能走在一個正確道路上提供給需求最合適的方案,只有大方向不錯的情況下才有好壞之分
在業(yè)務(wù)探索初期,舊版滿足了業(yè)務(wù)方和用戶的基本訴求。但是隨著業(yè)務(wù)擴張與更新迭代,我們逐漸發(fā)現(xiàn)現(xiàn)有的租售模塊實價登錄信息不能提供用戶有效的參考價值,該頁面點擊到實價登錄頁面的用戶量極少
這個改版的背景是在租售業(yè)務(wù)上優(yōu)化實價登錄社區(qū)的需求,租售詳情頁的上內(nèi)容的呈現(xiàn)還是舊版,現(xiàn)有框架和內(nèi)容對社區(qū)價值點展示不足。
解決辦法:優(yōu)化信息框架,豐富該房屋社區(qū)信息,滿足用戶找房時了解社區(qū)資訊需求
比如整個社區(qū)在該市的排名、整個社區(qū)的配置圖、口碑評分等以及在實際找房場景過程中,用戶會找這個社區(qū)內(nèi)同格局同戶型的房屋等等
整個591APP是臺灣地區(qū)關(guān)注度最高房屋的產(chǎn)品,但是從二手房引流過來的用戶很少,埋點數(shù)據(jù)不理想
解決辦法:除了在視覺上也要與本身租售的業(yè)務(wù)分開,讓用戶理解注意到該模塊的價值外,另外在體驗層也需要優(yōu)化
為了更好的明確實價登錄的價值定位,以及確認(rèn)用戶期望什么的信息呈現(xiàn),我們在實際改版時對用戶做了多輪的摸底調(diào)研,挖掘用戶在使用關(guān)注功能時的真實場景訴求。
在調(diào)研過程中,我們發(fā)現(xiàn)使用實價登錄的用戶分兩類,分別是觀望期的用戶和決策期的用戶,這兩類用戶雖然都使用,但是對實價登錄功能的場景訴求是不一樣的。
觀望期用戶一般是有買房計劃,但是對于自己要買什么樣房或能賣什么樣的房子需求沒有那么明確。這類用戶大多數(shù)是了解為主,從慢慢對比中做到心中有數(shù)
決策期的用戶大多已經(jīng)線下看過房,有些甚至已經(jīng)到了和議價階段,他們對于自己的購房訴求已經(jīng)十分清晰。在這個階段的用戶,期望提供更多有關(guān)體現(xiàn)房源價值的信息,比如掛盤時間、成交表、周邊完善程度等等,這些信息一方面可以展示出目前房源再市場內(nèi)的定位,重新調(diào)整價格預(yù)期;另一方面也能了解到業(yè)主心里預(yù)期,提升線下斡旋的成功率
我們可以從這兩類用戶的使用訴求看到,大家都期待能提供更豐富有效的信息,幫助自己明確需求和輔助決策。
由上述信息得出我們的設(shè)計目標(biāo),提高租售模塊的實價登錄的點閱、降低跳出率,當(dāng)我們的設(shè)計方案每個細(xì)節(jié),都是以目標(biāo)為導(dǎo)向時,你輸出的方案將更有說服力
結(jié)合實價登錄歷史現(xiàn)狀和不同階段用戶場景使用預(yù)期。我們在本次關(guān)注改版上制定了對應(yīng)的設(shè)計策略。
舊版分析:僅滿足用戶基本使用,其中承諾的誤差率未達(dá)標(biāo),與內(nèi)政部信息同步也存在問題;同時,視覺上更像是內(nèi)容說明展示,點擊感不明顯
優(yōu)化策略:圍繞用戶買房租房場景,為用戶提供最新的實價登錄信息,同時添加點擊指向性箭頭,告知用戶可點
通過對首屏不斷的優(yōu)化和迭代,打磨體驗細(xì)節(jié)和設(shè)計細(xì)節(jié),首頁的點閱提升了43%
從框架層對功能和層級進(jìn)行梳理,原層級主要功能不突出,根據(jù)功能的重要層級以及用戶使用頻次進(jìn)行梳理,將入口進(jìn)行提煉,同時針對多樣化需要增加新的入口
舊版分析:用戶在不了解社區(qū)情況下缺少關(guān)注動機;折線圖不明所意;同社區(qū)是否有成交與當(dāng)前用戶缺乏聯(lián)系;查看更多實價登錄卻到社區(qū)詳情頁與預(yù)期不符
優(yōu)化策略:圍繞用戶買房租房場景,展示與用戶切身利益相關(guān)信息
關(guān)于顏色
整個產(chǎn)品主色是橙色,但是目前租售詳情頁上藍(lán)色橙色混用,當(dāng)然設(shè)計的改版也需要鍥機,所以我們這次改版沿用橙色,當(dāng)好區(qū)別之前的藍(lán)色,達(dá)到凸顯實價登錄模塊的目的
配色從樸素到亮眼跟從LOGO配色,“暗藍(lán)色”到“亮橙色”增強年輕感,加強了顏色的對比度,讓品牌感知更加直接,增加品牌視覺分量
關(guān)于圓角
圓角,代表友好、親和,具有更強的內(nèi)指向性。我們對于圓角的取值上也做了足夠的思考:結(jié)合房屋特性,卡片內(nèi)需承載的內(nèi)容信息眾多,圓角太大會影響邊角信息的呈現(xiàn),所以我們在圓角選取上將圓角數(shù)值整體縮小,采用了可根據(jù)場景精細(xì)程度選擇合適數(shù)值的圓角(4-6-8px),使卡片容器信息展示更聚焦。
設(shè)計師不僅要會設(shè)計,還要能夠有理有據(jù)的,跟需求方陳述自己的設(shè)計方案。尤其是在項目合作和設(shè)計推進(jìn)時,非常重要。方法可以分為以下幾點:a.有邏輯;b.能堅持;c.會妥協(xié)。
向別人推進(jìn)自己方案之前,先把自己要表達(dá)的內(nèi)容梳理清晰,進(jìn)行調(diào)整和簡化。試想你小時候全校上臺發(fā)表考試獲獎感言,是不是有個長長的稿子
多問自己一些為什么,比如下面稿子類似于廣告位的地方,當(dāng)前目標(biāo)是提高點擊率。但是整個模塊展示是在另外的業(yè)務(wù)上,也是存在突出的同時不能太突出的問題
初稿給出的時候也是出于2個方向考慮,方案一是出于頁面整體風(fēng)格一致性同時優(yōu)化視覺,稍作強調(diào);方案二考慮到方案一視覺引導(dǎo)弱了,用重色強引導(dǎo)達(dá)到產(chǎn)品目標(biāo)。2個設(shè)計方案都可達(dá)到產(chǎn)品目標(biāo),剩下的就是調(diào)優(yōu)了
在符合最終產(chǎn)品目標(biāo)的設(shè)計方案,必須堅持。但是,你要有證據(jù)證明為什么它值得或者能夠堅持。
這里再分享一個案例來,臺灣用戶往往特別注重個人隱私,基本不開通系統(tǒng)定位,但是買房租房位置選擇及交通地域選擇是第一步,否則后續(xù)搜索無法定位到用戶預(yù)期。所以此次產(chǎn)品目標(biāo)是加強導(dǎo)航的視覺層級,當(dāng)然這只是優(yōu)化需求里面一個小需求
經(jīng)過競品分析、加強品牌感知和用戶使用習(xí)慣等方面確定使用品牌橙。但是這個橙飽和度比較高,在測試階段非專業(yè)人士提出疑問導(dǎo)航這個太刺眼,讓整個頁面感覺不高級,讓產(chǎn)品和交互再次懷疑這個橙色是否需要調(diào)整
這個時候設(shè)計堅持是非常有必要的,因為大量結(jié)果驗證是可達(dá)到產(chǎn)品預(yù)期也符合用戶使用習(xí)慣,僅因為大陸同事質(zhì)疑就在測試環(huán)節(jié)隨意修改,這個是非常沒必要的。測試環(huán)節(jié)離上線時間是非常緊迫的,這個急促的時間推翻重來結(jié)果也可想而知
體驗設(shè)計會有很多不可控的因素,是在各種局限下做出最合適的選擇。要處理好問題的優(yōu)先級,分清楚哪些是核心目標(biāo),哪些是兼顧目標(biāo),這樣才能更有效的管理自己的時間以及項目的進(jìn)度。
清晰設(shè)計層面來說就是方案能做到方向明確,方案明了;有效字從設(shè)計層面來說就是輸出的方案可以解決存在的問題,能達(dá)到設(shè)定的目標(biāo)以及可以切實落地。
清晰和有效的維度是不一樣的:清晰更多是針對設(shè)計,在于不同方向/方案的差異度和側(cè)重點;
有效更多需要聯(lián)合設(shè)計上下游(用戶/產(chǎn)品/開發(fā)),對于優(yōu)秀的設(shè)計方案來說兩者相輔相成,缺一不可
數(shù)量并不代表一個設(shè)計師的專業(yè),最多只能說明設(shè)計師技法嫻熟。在評審的過程中,不建議將所有的設(shè)計方案直接平鋪。而是你要先經(jīng)過自己思考、衡量與推敲,挑選出最優(yōu)的 1~2 個方案進(jìn)行方案評審,并給出設(shè)計說明,陳述方案的思考邏輯。
在設(shè)計最初期先思考有哪些途徑達(dá)到目標(biāo),確保所有實現(xiàn)手段的方式都有考慮到,整合途徑一致、方向近似的方案。對差異性不大的方案進(jìn)行合并劃歸,才能在合理范圍內(nèi)整理出具有不同思考維度與目標(biāo)側(cè)重的提案方向。
之前的例子比如目標(biāo)答案是提高點擊率和閱讀量,我從3個方面闡述方案的可行性
方案一:沿用當(dāng)前頁面的比較扁平設(shè)計樣式,選用大間隔大標(biāo)題區(qū)分模塊,在頁面里加入品牌色裝飾強調(diào)我們的模塊,吸引用戶點擊;
方案二:可以采用卡片式設(shè)計突出點擊感,吸引用戶點擊;
方案三:因為頭部有用橙色裝飾強調(diào),所以整個頭部模塊不用卡片式呈現(xiàn),突出后面2個模塊
這樣3個方案給需求方,即滿足對方產(chǎn)品需求,又滿足設(shè)計需求,對方就不會全盤否認(rèn)設(shè)計方案,走入改改改模式了,就算對方有修改意見也能說出具體點去修改,而不是說我覺得不好,不夠突出這樣非常主觀的想法
強調(diào)一點:我們在方案都沒說服自己的情況下不要推出去,專業(yè)度是每次和對方碰撞中中慢慢建立起來的,如果說服不了自己的情況下,推出去對方很大可能性要你試無數(shù)稿對比;另外在闡述發(fā)需求方時候,也要注意語言的引導(dǎo),慢慢理解對方的意圖
初入行時認(rèn)為滿足了需求方便是好的設(shè)計,當(dāng)其他角色提出不同意見就會覺得他們不懂的設(shè)計。這些現(xiàn)象是因為設(shè)計師在項目前期沒有正確思考需求本身需要解決什么問題、方案能否達(dá)到團(tuán)隊共同設(shè)定的目標(biāo),以及方案是否能平穩(wěn)落地這三個維度
我們在實際輸出方案的時候,不能從產(chǎn)品經(jīng)理的需求文檔開始,而是要把考量維度更前置,從項目現(xiàn)有的問題出發(fā)。這個問題的搜集包括外部用戶的反饋,內(nèi)部團(tuán)隊的聲音,同時對問題進(jìn)行篩選和甄別。
比如下面同一個產(chǎn)品按鈕2種懸浮狀態(tài),左側(cè)案例按鈕hover狀態(tài)是由正常狀態(tài)面型變成線型;右側(cè)案例按鈕hover狀態(tài)是正常狀態(tài)下加投影。
如果我們僅從產(chǎn)品需求文檔開始,不去深究其背后的原因,很可能把右側(cè)hover狀態(tài)直接變色處理,沒有去思考hover的幾種樣式哪種是更適合當(dāng)前場景的的,這樣簡單粗暴的處理方式多了之后使得產(chǎn)品體驗大大折扣
問題還需要結(jié)合目標(biāo)一起考慮,解決問題的思路并不完全等同于目標(biāo),目標(biāo)是大家一起制定的未來產(chǎn)品的發(fā)展方向。比如之前導(dǎo)航的案例,未發(fā)版前部分工作人員認(rèn)為顏色偏重,但是從產(chǎn)品目標(biāo)和品牌調(diào)性及目標(biāo)用戶審美上是沒有問題的
在輸出設(shè)計方案的時候,需要考慮到開發(fā)實現(xiàn)的可行性,需要消耗多少資源去實現(xiàn)這個需求,最低成本達(dá)到目標(biāo)的路徑是什么。最常見的就是情感化設(shè)計,下圖案例2個空狀態(tài)下的場景,原本考慮到趣味性及品牌屬性加入動效,但是開發(fā)的業(yè)務(wù)需求已經(jīng)排到下月,最后只能以靜態(tài)圖展示,先滿足基本需求后續(xù)有時間再進(jìn)行優(yōu)化
再例如下面三組數(shù)據(jù)的排版方案一:文字最左邊間距30px,文字最右邊間距30px,中間一組數(shù)據(jù)中間對齊;
方案二:三組數(shù)據(jù)分別在360px寬的格子里距離左邊30px。方案一在視覺上可能更加合理,當(dāng)寬度是1200時右側(cè)不會空太多,但是按方案二的邏輯寫更加便捷,一組數(shù)據(jù)樣式可以解決3組數(shù)據(jù)的排版,大大提高開發(fā)效率,如果用方案二評審加入開發(fā)實現(xiàn)方式的思考,那么按過稿率大大提升了
以上是跟進(jìn)項目一整個具體過程,了解背景、分析問題、設(shè)定目標(biāo)、到方案推導(dǎo)及執(zhí)行輸出、再到方案的落地,整個過程與產(chǎn)品研發(fā)溝通非常順利,最后也獲得良好的用戶反饋,整個團(tuán)隊滿滿的成就感是非常開心的
進(jìn)入互聯(lián)網(wǎng)公司工作初期,大多數(shù)人對設(shè)計的理解更多停留在表現(xiàn)層,對設(shè)計的判斷標(biāo)準(zhǔn)更多是好不好看、喜不喜歡。但作為設(shè)計師我們不要盲目的去畫設(shè)計圖,只有在設(shè)計方案前,更好的理解和分析了需求,才能很好地服務(wù)用戶幫助用戶使用產(chǎn)品;同時,只有站在用戶的角度去分析理解產(chǎn)品,才可以幫助產(chǎn)品站在全局的視角提升用戶體驗和設(shè)計需求,從而打造優(yōu)秀的用戶體驗。這2點綜合起來才是設(shè)計師價值的體現(xiàn)。
原文地址:站酷
作者:貝賢設(shè)計筆記
轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》科幻機甲風(fēng)格海報怎么做?
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com