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