首頁

消息通知 | 提升消息推送轉(zhuǎn)化率的必備知識!

資深UI設(shè)計者

前言

通知是產(chǎn)品中極其重要的一部分,它能快速將內(nèi)容的狀態(tài)及變化通過不同的方式傳達給用戶,以便用戶在收到信息后根據(jù)所傳遞的內(nèi)容及時做出應(yīng)對策略。
在這里,有一個很現(xiàn)實的問題,很多產(chǎn)品喜歡一股腦的把有效的/無效的、重要的/不重要的、用戶想知道的/不想知道的等所有信息通通推送給用戶。那么,你的推送渠道真的用對了嗎?是否做了信息優(yōu)先級區(qū)分?推送時間段是否有效?站在用戶角度,下面這些場景你肯定碰到過:

◇ 手機屏幕總是頻繁彈出信息,接二連三的震動、提示音讓你一怒之下卸載了一些不太常用的APP;

◇ 桌面圖標99+、主頁的消息入口99+、進入消息分類還是99+,清理起來非常麻煩,還不如關(guān)閉幾個分類通知,少一個也能緩口氣;

◇ 一天少看了幾個小視頻,好不容易節(jié)省出來的流量被通知無情的消耗,還不如關(guān)閉系統(tǒng)通知權(quán)限來得快;

◇ 每隔一段時間,都要在手機短信中回復(fù)一大堆TD(退訂),想吐的感覺;

◇ ......


在頻繁地打擾下,用戶關(guān)閉了一個個通知權(quán)限、甚至一度卸載APP。不難看出,好的消息通知能巧妙的將用戶求留住(部分用戶利用通知就能保持對微信、QQ的控制欲),做的不好就會起到負面作用、失去了消息通知的初衷,這里面最需要把控就是推送的一個“度”。
用戶可能因為一條走心的推送而轉(zhuǎn)化、也可能因為被打擾而放棄使用,站在設(shè)計角度,需盡可能打造讓用戶更喜歡的通知系統(tǒng)。那么,對于不同的業(yè)務(wù)需求及使用場景,又該如何差異化的進行消息推送,筆者通過本文進行分析總結(jié),與大家一起了解。



分享目錄

一、消息推送的基本知識
二、消息通知渠道
三、讓用戶再次開啟通知權(quán)限
四、提高觸達率的小技巧
五、結(jié)語


一、消息通知的基本知識

1.什么是消息通知

消息通知是產(chǎn)品提供的一項服務(wù),能夠及時將產(chǎn)品的期待或內(nèi)容的變化、根據(jù)其等級權(quán)重合理的通過不同渠道及時同步給用戶,常見的如互動提醒、老用戶召回、活動拉新、產(chǎn)品更新或幫助提醒等,通過站內(nèi)紅點、彈窗、短信、郵件等方式與用戶進行信息交換。


2.消息推送的目的

用戶層面,方便及時獲取到想要知道的信息、以及對信息交換的控制權(quán)。例如:用戶發(fā)布一條新的短視頻想要對評論/點贊及時掌控、給心上人發(fā)了信息想在第一時間看到回復(fù)...等,產(chǎn)品也是借此用戶對內(nèi)容的控制欲,利用消息推送提升用戶的使用體驗。
產(chǎn)品層面,通過主動推送想讓用戶知道的信息,以達到新/老用戶轉(zhuǎn)化的目的。例如:通過手機短信形式發(fā)放優(yōu)惠券對老用戶召回、應(yīng)用內(nèi)通知或桌面推送對用戶拉新...等,以此提高產(chǎn)品收益,獲取更大的商業(yè)價值。

3.通知設(shè)計的基本原則

首先,一個好的消息系統(tǒng)首先需要將消息內(nèi)容設(shè)計的全面,以便用戶通過消息通知能準確無誤的了解到對應(yīng)內(nèi)容;
其次,消息的觸達方式需合理有效,必須提供便捷的操作入口以供用戶及時反饋;
另外,為了避免過于打擾用戶,需選擇合理的推送渠道,提高用戶觸達概率及反饋效率。


二、消息通知渠道

消息通知渠道分為應(yīng)用內(nèi)通知應(yīng)用外通知。應(yīng)用內(nèi)通知主要來源于消息中心或系統(tǒng)主動觸發(fā)的彈窗來體現(xiàn),而應(yīng)用外通知包括桌面圖標紅點、手機短信、電子郵件、push、公眾號信息(需綁定)等渠道推送。

1.應(yīng)用內(nèi)通知

1)消息功能入口
消息功能入口提示也稱為紅點提示,主要有底部Tad欄、首頁右上角、個人中心右上角三種形式。當有新的通知出現(xiàn)時,對應(yīng)圖標的右上角會出現(xiàn)小紅點提示,清晰明了,關(guān)于小紅點設(shè)計,之前《小紅點篇 | 用好這招,讓用戶的觸達率大幅度提升!》這篇文章有詳細說明。
紅點提示的用戶觸達率較高,但需要用戶在登錄狀態(tài)下才能查看,比如訂單狀態(tài)變化、用戶與用戶/產(chǎn)品之間的互動消息、產(chǎn)品活動通知等。

2)消息列表

當產(chǎn)品的消息類型較多時,點擊消息功能入口即可跳轉(zhuǎn)至二級分類列表。與上述相比,消息列表的內(nèi)容則更加清晰,通過第一次消息入口功能的引導(dǎo)觸發(fā),這里的用戶觸達率將成倍增加。

3)彈窗通知

以彈窗的形式覆蓋在頁面內(nèi)容頂層,阻礙用戶的當前操作并迫使用戶對彈窗做出決策,可以是系統(tǒng)主動彈出或用戶手動觸發(fā),對用戶的干擾極大。
彈窗通知最大的優(yōu)勢在于會100%被用戶看到,無法忽略,否則將不能進行其他操作,很適合產(chǎn)品的一些重要事件提醒,例如應(yīng)用升級、活動通知、優(yōu)惠券引流等。


4)Toast 通知

Toast通知是用戶在操作之后給出的即時反饋,與當前頁面內(nèi)容關(guān)聯(lián)性極強,但不會中斷用戶的操作,出現(xiàn)的時間很短,一般持續(xù)3秒后自動消失,對用戶的干擾也比較小。
需要注意的是,Toast容易在用戶不注意的情況下被遺漏,所以適合用于操作后不影響大局、且不可二次操作、不可逆轉(zhuǎn)的輕量提示,例如刪除成功、提交成功等。


2.應(yīng)用外推送

1)桌面小紅點

小紅點通常以圓點+數(shù)字的形式出現(xiàn)在圖標右上角,用來提示應(yīng)用內(nèi)的未讀消息數(shù)量,進入應(yīng)用查看或清除后小紅點則會消失。桌面小紅點有一個必備前提,需要同時開啟設(shè)備和應(yīng)用內(nèi)的通知權(quán)限方能接收提醒通知。
在部分應(yīng)用中,桌面小紅點具有較大的價值,能對用戶產(chǎn)生積極的影響,使用頻率得到進一定的提升。例如:社交類應(yīng)用中的私信、評論、點贊等;商家端的咨詢信息、下單提醒等,用戶在看到后都會有強烈的點擊欲望,對一些數(shù)據(jù)的提升起到推動作用。


2)PUSH推送

PUSH推送通知常見于設(shè)備頂部橫幅(幾秒后消失)、通知中心以及鎖屏后的中部區(qū)域,用戶可從卡片中的內(nèi)容獲取信息類型及重要程度,用以決策是否需要立即打開。
這種推送方式,用戶幾乎很難忽略,不處理的話會長時間浮于屏幕之上,非常適合價值及時效性較高的消息通知。除視覺提醒之外,還可通過聽覺觸達用戶,例如支付號、微信的收款信息等,不過依然要同時開啟設(shè)備和應(yīng)用內(nèi)的通知權(quán)限。


3)手機短信

短信推送是大家很熟悉的通知渠道了,畢竟現(xiàn)在都是用手機注冊賬號,手機號獲取難度幾乎為“0”,常見的有驗證碼短信(用戶請求)、營銷短信(產(chǎn)品推送)兩種:
驗證碼類似“一問一答”的互動,沒有什么特別的玩法;
營銷類短信對于拉取新用戶、老用戶召回、節(jié)日/活動促銷能起到不可替代作用,產(chǎn)品可通過短信發(fā)送圖片、文字以及超鏈接,內(nèi)容的時效性、用戶的觸達率都相對較高。
著重說明一點,因為短信通知的成本較高,在使用之前需要足夠的思考分析,細分用戶群體做到精準投放,避免所花費的成本與產(chǎn)生的價值不成正比。另外,如果需要放超鏈接,那么短信內(nèi)容一定要有足夠的說服力及吸引力,總是被用戶當做詐騙短信刪除、舉報的話還不如不放。
為了減少對用戶的打擾,讓產(chǎn)品更人性化,一般會在短信結(jié)尾提供TD(退訂)提示,用戶回復(fù)即可取消后續(xù)的推送,但是否真的取消成功,這就得看產(chǎn)品了(???)...

4)電子郵件

電子郵件推送方式使用的并不多,一方面需要產(chǎn)品有web端服務(wù),純粹的移動端APP郵件推送不會有什么效果;另一方面,絕大多數(shù)的用戶登錄電子郵箱并不頻繁,還容易被用戶一鍵清理或誤刪。
電子郵件唯一的好處就是用戶可通過超鏈接直達內(nèi)容出處,相比APP應(yīng)用,免去了下載等一系列操作,還可以長時間滯留,便于用戶隨時查看或添加星標,處理時間段選擇較為靈活,很適合web端服務(wù)。針對一些商業(yè)化的郵件推送,也需要花費一定的經(jīng)濟成本。


產(chǎn)品獲取用戶郵箱地址的難度較大(郵箱賬號除外),不難理解,使用手機號一鍵登錄、驗證碼登錄、第三方賬號登錄遠比郵箱地址登錄要方便的多。除此之外,還可以通過個人設(shè)置的添加郵箱、問卷調(diào)查的郵箱地址預(yù)留來獲取,不過這就要看用戶的主動意愿了。

5)公眾號消息

公眾號背靠社交應(yīng)用,普及程度及用戶觸達率是極高的,不過這需要產(chǎn)品利用部分業(yè)務(wù)、活動為導(dǎo)向,引導(dǎo)用戶關(guān)注公眾號后方能接收到消息通知。
目前公眾號只能向用戶發(fā)送符合部分場景要求的服務(wù)通知,例如刷卡通知、物流軌跡變化、商品購買等。如果預(yù)算足夠的話,還可以購買公眾號列表、內(nèi)容詳情頁、朋友圈等產(chǎn)品廣告位進行特定用戶群體推送,無需用戶關(guān)注也可以看到并進行轉(zhuǎn)化。


三、讓用戶再開啟通知權(quán)限

用戶一旦關(guān)閉通知權(quán)限,對產(chǎn)品來說無疑是一個損失,這意味著沒有消息通知的推動,用戶的使用頻率以及與產(chǎn)品之間的互動顯然會減少(就連夫妻之間都需要時?;优c溝通交流,何況對于有選擇余地的產(chǎn)品),時間長了,用戶轉(zhuǎn)投其他產(chǎn)品的“懷抱”也不是不可能。
有沒有想過,用戶只是關(guān)閉通知權(quán)限而已,并沒有卸載APP,真的就沒辦法了嗎?是不是該做點什么...


1.尋找關(guān)閉原因

用戶之所以還未卸載APP,說明還有價值,歸根結(jié)底,關(guān)閉通知權(quán)限的原因都是因為消息的“狂轟亂炸”帶來的無盡騷擾,幾乎沒有例外,而產(chǎn)品還會添上一把火,用戶再次打開APP時無底線的催促用戶再度開啟,耗盡用戶最后一點耐心后,或許再也沒有機會了。
這個時候,設(shè)計師考慮的不是頻繁提醒用戶開啟,而是用戶關(guān)閉通知的真正原因(“狂轟亂炸”只是概括),細化各種可能性,然后從中找出機會點,但凡有所改進都值得試一試,畢竟相比什么都不做不會更糟。這么解釋似乎毫無說服力,下面舉個例子:
當產(chǎn)品中的某項免費服務(wù)突然有一天開始收費了,但受到了大多數(shù)用戶的抵觸,這個時候你該怎么做,是無視用戶訴求繼續(xù)收費、還是恢復(fù)到之前的免費?這并不是一個選擇題,繼續(xù)收費會導(dǎo)致大量用戶流失、恢復(fù)免費可能連維持運營成本都難,所以不經(jīng)思索的選擇草草收場、連下下策都算不上。用戶抵觸的原因可能收費過高或是與實際價值不符,有沒有想過利用限時折扣、附加其他增值服務(wù)(成本較?。┗蛘呓M合捆綁銷售也不失為一種策略。
那么,到底該如何做既能愉快的發(fā)送消息通知、還能能挽回用戶的心呢?

2.引導(dǎo)二次開啟

用戶關(guān)閉通知權(quán)限,并非沒有需求,最典型的就是在某寶、某東加了滿滿一“車”商品等待降價,然后抱怨消息通知太吵關(guān)掉了通知權(quán)限,最后就是無法收到折扣通知、還把問題怪在了APP身上,著實太冤。用戶只要還有需求,通知權(quán)限就還有被重新開啟的機會。

1)損失厭惡/利益引誘

首先,我們需要找出對應(yīng)的價值點,利用優(yōu)秀的文案給予用戶思考的余地,用戶每多思考一會,結(jié)果都有可能發(fā)生改變。
人們都討厭失去,對于損失的不可控很難接受,在引導(dǎo)用戶開啟通知權(quán)限時,需要強調(diào)不開啟會失去什么,畢竟面對“得到”和“失去”時,損失更加讓人難以忍受,例如物流產(chǎn)品告訴用戶“未開啟通知,將錯過重要的快遞信息”。還可以通過激勵等進行利益引誘,如“開啟后能及時獲取紅包卡券、折扣通知”等,并提供快捷通道,促使用戶重新開啟通知權(quán)限。

2)消息分類/分別處理

每種類型的通知都不可能符合所有用戶的“胃口”,針對社交、電商類產(chǎn)品,可將通知類型分類處理,用戶希望接收哪種類型的消息單獨開啟即可。
例如支付寶將消息拆分為多個類型;京東還增加了午休免打擾設(shè)置,開啟后在12:30-13:30不會收到任何消息提醒;微信群過多、消息太吵時,開啟免打擾又擔心錯過重要人的信息,于是微信在去年上線了開啟群消息免打擾后、可設(shè)置群內(nèi)4個人的消息正常通知,算是比較人性化的設(shè)計了。

3)提供關(guān)閉/關(guān)不徹底

部分產(chǎn)品提供了關(guān)閉消息通知功能,但又關(guān)不徹底,這是產(chǎn)品基于妥協(xié)的基礎(chǔ)上,依然在低頻推送消息的“流氓”玩法,與用戶完全關(guān)閉相比,已經(jīng)算是不錯的結(jié)果了。
常見于PC客戶端,就像很多軟件的插件一樣,不管怎么關(guān),總是無法徹底關(guān)閉,甚至還將開啟操作偽裝成其他內(nèi)容引導(dǎo)用戶誤觸;手機短信推送也會有這種情況,用戶回復(fù)過“退訂”后依然會收到相關(guān)短信。


這種方式需謹慎使用,在用戶關(guān)閉通知后,需通過后續(xù)推送內(nèi)容的質(zhì)量、頻率試探用戶底線,然后逐漸提升,切不可無視用戶操作。


四、提高消息觸達率的小技巧

1.減少重復(fù)通知

反復(fù)推送相同的內(nèi)容只會讓用戶更加反感,回復(fù)退訂、卸載應(yīng)用都可能在這一刻發(fā)生。
很明顯,消息發(fā)出后,如果用戶的觸達率較高就沒必要再次推送。反之觸達率較低,重復(fù)推送會讓用戶有種被催促、脅迫的感覺,適得其反,觸達率低有沒有可能是文案不夠友好、表達不夠清晰或者吸引力不夠?即便同一件事情,也盡量使用不同的表達方式,如何想辦法重新引起用戶的關(guān)注才是關(guān)鍵點。


2.言語得當、避免誤會

中華文字博大精深,且有56個民族,其性格習慣各異,特別在利用當前社會熱點、媒介進行的營銷推送時,盡可能規(guī)避掉敏感信息,如地域/民族歧視、性暗示等。


3.細分受眾群體

很多時候,消息推送太少無法滿足產(chǎn)品目標、太多則會惹惱用戶導(dǎo)致通知權(quán)限被徹底關(guān)閉,所以不僅要考慮消息推送頻率,更重要的是對受眾群體進行分類、分別推送,不要每次都一股腦的將消息發(fā)給所有用戶,當然,能做到千人千面(成本大)則會更好。


4.內(nèi)容清晰簡潔

沒有用戶愿意在不明所以的情況下來看長篇大論的內(nèi)容,需確保消息內(nèi)容簡單直接、清晰易懂,并符合用戶認知習慣,還得保持友好的語氣以及富有創(chuàng)造力的品牌形象。
處于營銷目的時,可利用感興趣的事件/事物勾起用戶的點擊欲望,例如網(wǎng)絡(luò)熱詞、時下熱點等,筆者雖然并不提倡“標題黨”,但不得不說,很多標題黨都能起到不錯的效果。


5.提供“下一步”入口

消息通知需要一個有效操作入口,并且在消息內(nèi)容中有對應(yīng)的指向,點擊應(yīng)用內(nèi)通知切換APP界面、應(yīng)用外推送鏈接跳轉(zhuǎn)至web頁,從始至終都需要為用戶提供一個查看更多內(nèi)容或參與的有效途徑。


五、結(jié)語

消息通知設(shè)計的主要目的是在正確的時間、以正確的方式將內(nèi)容呈現(xiàn)給用戶,并提高產(chǎn)品的轉(zhuǎn)化率,不管用戶愿不愿意接受,這始終都是一個呈現(xiàn)信息的不錯途徑。
本文主要總結(jié)了消息的通知渠道、常見問題處理、提升用戶觸達率的方法,以幫助新手設(shè)計師快速掌握完整的消息系統(tǒng)?;蛟S最終的結(jié)果事與愿違,但不能否認其魔力,需要做好的是確保消息內(nèi)容質(zhì)量、對應(yīng)的受眾群體及合理的推送渠道,相信總有一種方式適合你產(chǎn)品。


藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。

文章來源:站酷       作者:大漠飛鷹CYSJ

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司


2022 PANTONE 最美色彩來啦!

seo達人

一、全新Post-It®Notes

Post-it 與彩通色彩研究所共同開發(fā),推出 11 種全新 Post-it Notes 系列,以令人耳目一新的色調(diào)展現(xiàn)色彩的力量。激發(fā)創(chuàng)意生產(chǎn)力!

圖片

 Post-it Notes 

Post-it 始終提供繽紛的畫布,為人們的想法增添些許鮮艷的色彩,而在七年沒有重大的視覺轉(zhuǎn)變之后,彩通色彩研究所獲選成為 3M 的合作伙伴,在全球推出重新打造的 Post-it Notes 和 Post-it Super Sticky 系列。

 

三種精選調(diào)色板包括:

1、花卉幻想

這個調(diào)色板充滿新鮮芬芳的春季花卉,陽光正面的氣息能帶來活力與好心情。

2、能量激發(fā)

圖片

這個系列中活力四射的色彩能點亮您的心情,讓訊息清晰透徹。

鮮艷色彩混搭成組,振奮人心的色調(diào)以充滿活力的配色之姿自然呈現(xiàn)。這些動感活潑的色調(diào)使人留下大膽鮮明的印象,傳達生氣蓬勃的歡樂訊息,以急迫感和力量激勵使用者采取實際行動。

3、單純靜謐

圖片

透過干凈現(xiàn)代的單純靜謐系列,為提醒事項便利貼注入一絲禪意。

和諧混搭干凈俐落的經(jīng)典顏色,呈現(xiàn)簡潔外觀和平靜狀態(tài),突顯人們對簡化、清理和整理的渴望。這幾種獨特色調(diào)穩(wěn)定可靠且歷久不衰,使用溫柔且老少咸宜的粉紅色來達到強調(diào)的目的,傳遞直接而單純的訊息,讓輕柔的氛圍靜靜地撫慰人心。

 

二、多彩的元宇宙

元宇宙中的色彩:探索色彩在虛擬與現(xiàn)實之間的關(guān)系。

圖片

1、視覺語言

許多人幾乎無法想像生活在眼睛所見只有黑白灰、沒有其他色彩的世界;我們已經(jīng)習慣被色彩包圍,色彩更是定義世界的視覺訊號,讓我們感知與周遭環(huán)境和所愛事物的連結(jié)。約有 80% 的人生體驗會經(jīng)過雙眼吸收,因此視覺訊號對于傳達訊息至關(guān)重要。

圖片

色彩在元宇宙的使用方式與實體世界大致無異,唯一的差別在于:

實體世界中的色彩有其局限。物體自然會是一種色彩,可以改變,不過需要資源、時間和精力。此外數(shù)碼光譜中的某些色彩無法在實體世界重現(xiàn)。在元宇宙中,色彩可以立即視需求調(diào)整。

圖片

元宇宙中的色彩沒有任何限制。從你在 Web 3.0 中的外貌到衣著,或者是你擁有的產(chǎn)品,這些色彩都可以隨你的心情以及你希望在數(shù)碼世界呈現(xiàn)的方式改變,不論它們在實體世界呈現(xiàn)的色彩為何。元宇宙將會帶來自由。

圖片

三、提契諾的色彩

Ticino Turismo 了解色彩會喚起我們對旅游地點的珍藏回憶,并激發(fā)未來的旅游計畫。因此他們與彩通色彩研究所 (Pantone Color Institute) 的全球色彩專家團隊合作,透過各種色彩描述造訪瑞士著名提契諾地區(qū)的體驗。

(點擊圖片前往原文查看視頻)

icino Turismo 與彩通色彩研究所合作精選出五種最能代表提契諾的色彩,用來傳達春夏兩季訪客在當?shù)厮娮R到的美景與快樂體驗。

圖片

彩通色彩研究所以這些色彩為基礎(chǔ)創(chuàng)造出 Ticino Camellia Pink (提契諾山茶花粉紅),用來代表點綴這片地區(qū)的艷粉色花朵;Bellinzona Fortress Grey (貝林佐納城堡灰),這種帶有灰色調(diào)的暖褐灰色正是當?shù)刂惺兰o城堡呈現(xiàn)的色彩;Brissago Blue (布利薩戈藍),這是布利薩戈島周圍澄澈湖水的色彩;Lugano Sunset Orange (盧加諾日落橘),呈現(xiàn)當?shù)厝章涞拿匀斯獠?;以?nbsp;Valle di Muggio Green (穆吉奧山谷綠),展現(xiàn)郁郁蔥蔥的山谷色彩。

 

四、周大福的色彩

彩通色彩研究所最近與周大福集團合作,透過提供包含三種新色調(diào)的時尚調(diào)色盤,結(jié)合中國傳統(tǒng)風格和現(xiàn)代審美,借以襯托周大福集團標志性的招牌紅色。

圖片

全新周大福調(diào)色盤體現(xiàn)了融合傳統(tǒng)色彩與現(xiàn)代風格的故事。呈現(xiàn)出精致感觸、完美品質(zhì)和現(xiàn)代雅趣,全新周大福調(diào)色盤既融合了傳統(tǒng)的優(yōu)雅,也繼承了現(xiàn)代風格的美感和精神。

圖片

全新調(diào)色板:融合中國傳統(tǒng)風格和現(xiàn)代審美

為強調(diào)大福紅 (Tai Fook Red) 濃郁而充滿活力的強大吸引力,我們透過暖金色突顯出一系列相容的色調(diào),打造和諧的色彩故事。

圖片

這個全新調(diào)色板展現(xiàn)了對傳承、幸福和信念的現(xiàn)代詮釋,襯托出大福紅 (Tai Fook Red) 優(yōu)雅、現(xiàn)代且具備寧靜力量的特點,透過現(xiàn)代化且積極的態(tài)度展現(xiàn)集團對品質(zhì)的承諾。

 

五、西派金銅  City Park Golden Brass

彩通色彩研究所最近與中國鐵建房地產(chǎn)集團有限公司 (CRCCRE) 合作,提供宏觀色彩趨勢指引并建立招牌色彩,做為該公司的主要品牌視覺形象,用于公司旗下不同的重慶西派城住宅。

圖片

這個全新色彩能夠向潛在買主傳達出重慶西派城的居住環(huán)境和生活風格,以及CRCCRE 的愿景:成為具價值的房產(chǎn)開發(fā)、工程設(shè)計及資產(chǎn)管理商,借此提升中國生活水準,同時解決人們?nèi)找嬖鲩L的需求,滿足他們追求自然景觀環(huán)繞,以及求取身心靈平衡的愿望。

圖片

在考量中國生活風格趨勢的美學(xué),以及中國居民未來的追求后,我們創(chuàng)造出「西派金銅 (City Park Golden Brass) 」來代表重慶西派城的品牌定位:拘謹、優(yōu)雅、穩(wěn)定發(fā)展、現(xiàn)代化、年輕且時尚,同時仍支持及推廣積極進取的哲學(xué)。


作者:劉濤

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》2022 PANTONE 最美色彩來啦!

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



這樣拆解1件作品比看100件都有用

seo達人

案例一:樂樂茶產(chǎn)品海報

圖片

 

01.案例名稱

品牌:樂樂茶     項目:產(chǎn)品促銷海報設(shè)計     

產(chǎn)品:草莓桃子超萌杯

 

02.案例目的

宣傳88品牌日活動期間,購買草莓桃子超萌杯只要8.8元,以此作為噱頭吸引消費者進店下單。

 

03.案例標簽

調(diào)性:年輕、時尚     色彩:熒光色、漸變色、對比色     設(shè)計風格:扁平風、幾何色塊

 

04.案例亮點

? 采用新穎的設(shè)計形式,高飽和度的對比色搭配,覺沖擊力很強,可以很快吸引人的注意,同時也把時尚、個性的品牌調(diào)性展現(xiàn)得淋漓盡致。

? 標題的字體設(shè)計很好看,與主題內(nèi)容以及品牌的調(diào)性也十分吻合。

 

05.執(zhí)行細節(jié)

? 標題的字體設(shè)計屬于手寫風格的等線體,這種字體設(shè)計通常是在等線體的基礎(chǔ)上,融合一些手寫風格的筆畫,效果時尚且現(xiàn)代,是近來比較流行的一種風格;

? 主要顏色為玫紅、藍色、綠色,其中玫紅面積最大,藍色次之,綠色作為點綴色;海報中的漸變色都會在兩個顏色之間加入白色來過渡,這樣會避免顏色出現(xiàn)太臟、太花的情況,另外白色還可以使畫面更加透氣和明亮,食品海報的顏色不能太過壓抑和沉悶。

圖片

? 除了包裹文字的大色塊,畫面中還有一些小色塊和幾何圖形,這些元素是從產(chǎn)品包裝中提取出來的,有了它們的輔助,版面更加平衡、細節(jié)更加豐富,增強了點與面的對比。

 

06.還可以優(yōu)化的地方

? 兩行中文標題之間的空白有點太大了,中間的英文可以往左邊再一點,英文的字間距可以大一點點。

圖片

? 左下角價格區(qū)域的排版不夠精致,矩形色塊與右邊傾斜的產(chǎn)品直線條在視覺上有點沖突,個人覺得8.8可以不放在色塊里,或者把色塊右邊的透明度降低,“元/杯”與“原價15元”調(diào)換一下位置更合適。

圖片

? 產(chǎn)品的食欲還差了一點點。

 

07.啟發(fā)與思考

? 一件海報作品的調(diào)性是由多方面的因素決定的,比如色彩、字體、版式、圖形等等,要綜合運用這些因素才能達到理想的效果。

? 如果品牌的目標消費群是年輕人,那么其設(shè)計可以用非常時尚、酷炫,甚至是個性的設(shè)計風格。

? 在食品海報中,產(chǎn)品本身的食欲永遠是重中之重。

 

 

案例二:認養(yǎng)一頭牛包裝設(shè)計

圖片

圖片

圖片

這款包裝由知名設(shè)計公司喜鵲包裝實驗室設(shè)計。

 

01.案例名稱

品牌:認養(yǎng)一頭牛      項目:產(chǎn)品包裝設(shè)計     產(chǎn)品:娟姍牛純牛奶

 

02.案例目的

? 通過包裝設(shè)計讓消費者感受到這是一款進口的、高端的純牛奶。

? 打造一個具有高識別性和銷售力的視覺形象,帶動銷售。

 

03.案例標簽

調(diào)性:高端、尊貴、健康       主色:歐洲皇室藍            設(shè)計風格:彩鉛插畫

 

04.案例亮點

? 通過打造一個擬人的貴族娟姍牛形象,把認養(yǎng)一頭牛IP化,比較直觀地展現(xiàn)了產(chǎn)品的高品質(zhì);同時也增加了產(chǎn)品的記憶點。

? 包裝的整體形象簡單、高端、且獨具特色。

? 包裝中的IP形象畫得很精致、很傳神。

 

05.執(zhí)行細節(jié)

? “純牛奶”的字體使用長宋、并弱化了筆畫的襯線部份,使字體更具高端、現(xiàn)代的調(diào)性,且識別性很高;

? 主色為歐洲皇室藍、既與市面上的高度牛奶產(chǎn)品進行了有效區(qū)隔,同時在調(diào)性上也滿足了高端、優(yōu)雅、健康的需求。

圖片

? 把牛的形象設(shè)計成擬人的貴族牛而不是普通牧場里的牛形象,視覺上更特別、也更容易被記住。

? 包裝正面的形象非常簡單,只突出品牌logo、餐品名、ip形象。

? 側(cè)面通過icon和文字的方式簡單展示產(chǎn)品的賣點,進一步促進人們購買。

圖片

? 燙金和燙銀工藝的恰當使用,進一步提升了包裝的品質(zhì)感。

 

06.還可以優(yōu)化的地方

? 側(cè)面icon的設(shè)計不夠精致和直觀;

? 純牛奶的字體設(shè)計仍有優(yōu)化的空間,比如純字的“纟”偏旁和豎彎勾筆畫稍微粗了一點。

圖片

 

07.啟發(fā)與思考

? 打造iP形象仍包裝設(shè)計中行之有效的一個方法,特別是對于快銷品,但也不是盲目為之,該款包裝這么做是因為“認養(yǎng)一頭?!边@個品牌名就自帶ip屬性。

? 減少干擾、讓你的包裝有且只有一個焦點。

經(jīng)蔥爺這么一分析,是不是對這些作品的理解加深了不少,像以上這種拆解案例的思路,蔥爺會很頻繁地分享在蔥爺知識星球里,以供大家參考和學(xué)習,并且蔥爺還會組織星球里的成員一起做案例拆解的打開,幫助大家學(xué)習如何正確拆解設(shè)計案例、養(yǎng)成拆解案例的習慣。


作者:蔥爺

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》這樣拆解1件作品比看100件都有用

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



在UX/UI設(shè)計中使用網(wǎng)格系統(tǒng)的5個技巧

seo達人

一、六種網(wǎng)格類型

每種類型的網(wǎng)格都有不同的用途,通過了解不同的網(wǎng)格類型幫助我們在設(shè)計的時候匹配最合適的網(wǎng)格。

 

1、 基線網(wǎng)格

圖片

基線網(wǎng)格是由等距水平線組成的密集網(wǎng)格,用于確定文本的位置?;€網(wǎng)格通常與分欄網(wǎng)格結(jié)合使用,以確保每列中的文本在界面上均勻?qū)R。

基線網(wǎng)格最簡單的示例是一張劃線紙,準確清晰地展示設(shè)計元素的位置。

圖片

 

2、單欄網(wǎng)格

圖片

單欄網(wǎng)格是最基礎(chǔ)的形式,用來確定文本在頁面中的位置,多用于書籍、雜志等以文字為主的版面設(shè)計中。 

 

3、分欄網(wǎng)格

圖片

圖片

這是日常設(shè)計中最常使用的網(wǎng)格類型,將一個頁面拆分成多個垂直區(qū)域,然后將對象與之對齊。

報紙和雜志的排版設(shè)計、網(wǎng)頁和APP的設(shè)計都會廣泛使用分欄網(wǎng)格。

圖片

 

4、模塊化網(wǎng)格

圖片

模塊化網(wǎng)格是柱狀網(wǎng)格的擴展,采用垂直方向的列并添加水平的行。相交的行和列創(chuàng)建“模塊”,可用于管理內(nèi)容較為復(fù)雜的界面或者海報設(shè)計。 

 

5、像素網(wǎng)格

圖片

在用Photoshop作圖時,不斷放大畫布,會看到畫布上有密集的像素網(wǎng)格出現(xiàn)。

數(shù)字屏幕是由數(shù)百萬像素的微觀網(wǎng)格組成的,為了設(shè)計的準確性,設(shè)計師需要逐個像素地編輯圖像,同時也練就了“像素眼”。小到一個icon,大到整個網(wǎng)頁,都可以借助像素網(wǎng)格來完成。

圖片

 

6、層級網(wǎng)格

圖片

層級網(wǎng)格是指按照內(nèi)容的重要性來組織界面元素,讓用戶能夠按照主次的層級順序瀏覽界面。層級網(wǎng)格主要用在網(wǎng)頁設(shè)計中,形式比較自由形式,大多數(shù)是結(jié)合網(wǎng)頁的內(nèi)容來確定。

將界面中的內(nèi)容進行優(yōu)先級排序,按照層級結(jié)構(gòu)清晰展示內(nèi)容的優(yōu)先級,為產(chǎn)品提效。

圖片

 

 

二、在UX/UI中使用網(wǎng)格的5個技巧

在工作中嘗試使用網(wǎng)格系統(tǒng)時,下面的關(guān)鍵要點能幫助我們實現(xiàn)有效、靈活的設(shè)計:

 

1、規(guī)劃網(wǎng)格與頁面的關(guān)系

圖片

在《平面設(shè)計網(wǎng)格系統(tǒng)》這本書中,作者強調(diào)網(wǎng)格在頁面中的位置以及頁邊距的設(shè)置對網(wǎng)格的功能和美感有很大影響。合適的頁間距和留白會讓頁面看起來更舒服。 

 

2、不要只使用網(wǎng)格設(shè)計

圖片

當接到一個全新的需求時,很多設(shè)計師習慣以常用的網(wǎng)格和欄寬作為標準開始設(shè)計。

雖然常用的網(wǎng)格系統(tǒng)設(shè)計起來更熟悉,但花時間弄清楚當前的項目實際需要什么樣的網(wǎng)格,以及是否有其他需要考慮的因素也同樣重要。這樣做能夠避免我們被困在一套網(wǎng)格標準中,限制設(shè)計的發(fā)揮。 
 
 

3、保持設(shè)計元素在網(wǎng)格內(nèi)

圖片

網(wǎng)格中每一欄之間都會有間距作為分隔,當頁面中的文本和圖形跨越多欄時,需要保持內(nèi)容在網(wǎng)格每一欄的邊緣,避免將元素放到間距的邊緣。

圖片

 

4、不要忘記基線對齊

圖片

確保基于列的設(shè)計中的所有文本遵循一致的基線,這樣可以大大改善頁面的和諧感和組織感。

在數(shù)字設(shè)計項目中,基線對齊很容易被忽視,但它可以很好地平衡設(shè)計,對齊后頁面會有更舒服的視覺效果。 

 

5、考慮使用8pt網(wǎng)格進行設(shè)計

圖片

我們的設(shè)計必須能保證在各種設(shè)備和屏幕分辨率下都能工作并且看起來很清晰。使用基數(shù)的倍數(shù)的尺寸和間距有助于使設(shè)計過渡清晰和系統(tǒng)化。

現(xiàn)在通常使用8pt網(wǎng)格,這樣無論是矢量設(shè)計還是基于像素的設(shè)計,都可以在視網(wǎng)膜屏幕上完美縮放。 
 
 
 

最后

以上是在UX/UI設(shè)計中常見的6種網(wǎng)格類型和5個技,希望通過這些內(nèi)容能讓你對網(wǎng)格系統(tǒng)的應(yīng)用有更深的認識。


作者:Clippp

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》在UX/UI設(shè)計中使用網(wǎng)格系統(tǒng)的5個技巧

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



如何通過設(shè)計語言手冊來傳遞品牌理念!

seo達人


圖片

本次以3.0時代加入以人文中心主義的設(shè)計,人文感官品牌情懷社區(qū)為方向發(fā)起升級!58到家作為一款為消費者提供家政服務(wù)的產(chǎn)品,致力于為消費者帶來品質(zhì)生活!設(shè)計語言的存在需要將用戶、產(chǎn)品、服務(wù)進行結(jié)合,并在不同服務(wù)中保持統(tǒng)一的展現(xiàn),從而對體驗和商業(yè)上帶來價值。

我們將產(chǎn)品劃分為三個階段:

1.0:滿足了以產(chǎn)品為中心的設(shè)計,達成生產(chǎn)售賣通順閉環(huán);

2.0:滿足了以消費者為中心的設(shè)計,考慮更多用戶體驗;

 3.0:加入以人文中心主義的設(shè)計,人文感官品牌情懷社區(qū)。

圖片

那么明確了我們本次升級的方向后,制定了整個產(chǎn)品的框架,底層加入了人文感官品牌情懷的相關(guān)因素,再應(yīng)用到我們現(xiàn)有的業(yè)務(wù)上,在協(xié)同上進行高效的鏈接,產(chǎn)品到設(shè)計,設(shè)計與設(shè)計,設(shè)計到開發(fā)。最終形成了我們的前臺展現(xiàn)頁面。

 

 

圖片

最適合用戶的設(shè)計語言手冊,才是合理的,那么在3.0階段的人文感官品牌情懷,核心即為人,也就是我們的用戶,首先我們要了解用戶的情感訴求。

圖片

根據(jù)我們的用戶畫像以及多輪訪談?wù){(diào)研, 得知用戶的相關(guān)正負情緒。生活當中家務(wù)工作的角色分配問題,一直是經(jīng)常出現(xiàn)的一個場景。用戶希望通過我們的產(chǎn)品服務(wù),來提升生活的幸福指數(shù)!

在以此為前提的背景下,用戶希望我們是專業(yè)標準化的省心高效的、溫暖溫馨的、舒適的、具有親和力的等等。最終都會期望以更有品質(zhì)的生活而結(jié)尾,那么“品質(zhì)生活”即為我們需要來傳遞給用戶的情感。

 那么品質(zhì)生活是什么呢?

圖片

其實用戶對我們的要求是一款提升生活品質(zhì)及愉悅感的產(chǎn)品,而非工具。

 

 

圖片

綜上所述,我們確定了以品質(zhì)生活成為我們的本次設(shè)計語言升級的slogan,再結(jié)合業(yè)務(wù)的自身特性,我們進行了詳細的拆分后提煉出了以下相關(guān)關(guān)鍵詞,來滿足用戶更多的情感訴求。

干凈明亮 

居住環(huán)境的潔凈會帶給人更多舒適愜意的感受。首先對品牌色進行了升級,使其更鮮明。也延展與其相匹配的輔助色來打造出完善的色彩體系。

圖片

 

陽光照射在屋子里,用戶愜意地躺在沙發(fā)上,光總是能給人溫馨溫暖的感覺。針對光束進行了深度剖析,過濾掉了光源生硬的進入以及具象光源的展示方案,最終確定使用相對適中的漸變色。

專業(yè) 

專業(yè)是線上線下綜合訴求的結(jié)合體,那么在線上加強品牌背書、有跡可循的一致性來達到滿足所的情感訴求。

高效 

用戶攜帶訴求而來,那么減少用戶感到麻煩的情緒,對產(chǎn)品的識別清晰、操作便捷提升是最直接影響的。

親和力 

服務(wù)行業(yè)需必備的能力,微笑服務(wù)也成為了我們的業(yè)務(wù)情感透傳標準。提煉出微笑符號結(jié)合我們的實際場景進行運用!

慢生活… 

在對用戶的相關(guān)情感訴求結(jié)合業(yè)務(wù)進行了落地后,對效率類設(shè)計原則也進行了相應(yīng)的升級。

 

 整體架構(gòu) 

應(yīng)用整體架構(gòu)也是一個應(yīng)用對外呈現(xiàn)的基礎(chǔ)結(jié)構(gòu),是系統(tǒng)風格的體現(xiàn)形式之一,除了特殊設(shè)計訴求,通常情況下,應(yīng)用需要使用通用的應(yīng)用架構(gòu)來保持系統(tǒng)的一致性和用戶操作的易用性。

圖片

 柵格系統(tǒng) 

布局不是靜態(tài)固定的,柵格系統(tǒng)在一個應(yīng)用內(nèi)的重要程度不言而喻。我們設(shè)定了以4dp / 4pt為基數(shù)的柵格系統(tǒng)。

圖片

 文本原則  

文本作為產(chǎn)品中用戶獲取信息的主要信息載體,字號大小和字重決定了信息的層級和主次關(guān)系。對字號、字重、行高以及組合字體進行了設(shè)定,為不同的場景創(chuàng)造了層級分明以及清晰的信息讀取體驗。

圖片

 間距參數(shù)  

針對頁面內(nèi)容區(qū)域的通用元素間距進行了分類。設(shè)計師結(jié)合具體場景的情況,來調(diào)用間距參數(shù)的適配邏輯。以此來結(jié)合柵格系統(tǒng)進行更好的適應(yīng)相關(guān)視覺元素符號的對應(yīng)變化。

圖片

 圓角參數(shù)  

結(jié)合業(yè)務(wù)屬性保證親和力的透傳,在產(chǎn)品盡量避免出現(xiàn)銳角圖形的設(shè)計表達手法。故此針對圓角的大小也進行了系統(tǒng)級別的定義,進行深度統(tǒng)一管理!

圖片

語意原則及動效等,并依據(jù)相關(guān)設(shè)計原則產(chǎn)出了組件庫。

 

 

圖片

在多元化的產(chǎn)品時代,時刻關(guān)注并滿足用戶的情緒,是產(chǎn)品能脫穎而出的關(guān)鍵!在建立設(shè)計語言手冊時從提升用戶體驗和滿足商業(yè)價值整體考慮,挖掘流程當中線上線下的觸點,多維度思考并總結(jié)落地,深度傳遞品牌理念。

設(shè)計語言手冊更多時候是一個相對寬泛的閾值,并非組件的固定值,在某些業(yè)務(wù)場景下能為用戶帶來增值體驗或較高商業(yè)價值時,可以被打破。最后,核心就是在搭建語言手冊時應(yīng)思考更多“為什么”這么做!


作者:58UXD

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》如何通過設(shè)計語言手冊來傳遞品牌理念!

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



中后臺產(chǎn)品的產(chǎn)研協(xié)同提效調(diào)研

seo達人

一、目前有哪些提升設(shè)計與前端生產(chǎn)力的方案

1、D2C(Design To Code)

D2C(Design to code)這個模式我們非常熟悉,其本質(zhì)是將設(shè)計師的設(shè)計資產(chǎn)轉(zhuǎn)化為代碼,讓前端工程師可以快速的復(fù)用,在這個成熟的領(lǐng)域主要分成兩大類:「設(shè)計資產(chǎn)類」和「設(shè)計對接類」

a. 設(shè)計資產(chǎn)類

設(shè)計資產(chǎn)類是完整系統(tǒng)的規(guī)范和代碼進行沉淀形成設(shè)計類的資產(chǎn),這一類的產(chǎn)品在市面上目前是屬于主流,產(chǎn)品有網(wǎng)易的Fish Design(網(wǎng)易自研)、Ant Design、Arco Design、Element 等,這些產(chǎn)品都是將組件化的設(shè)計資產(chǎn)轉(zhuǎn)化為代碼資產(chǎn),方便前端工程師在開發(fā) B 端產(chǎn)品頁面時可以快速引用,提升開發(fā)的效率。

圖片

b. 設(shè)計對接類

設(shè)計對接類又分成「設(shè)計稿查看類」「設(shè)計稿代碼生成類」兩種類型:

設(shè)計稿查看類:主要是 D-box(網(wǎng)易自研)、figma、藍湖等可以讓前端工程師在線查看設(shè)計師的設(shè)計稿并提供一定的轉(zhuǎn)化代碼方案,主要是為了保障產(chǎn)品的還原度。

圖片

設(shè)計稿代碼生成類:最近兩年為了徹底的解決還原度的問題,讓前端工程師專注的解決代碼問題「設(shè)計稿代碼生成類」也開始在市場嶄露頭角。

比如:Imgcook、Codefun,直接復(fù)制設(shè)計稿地址進入軟件內(nèi)部轉(zhuǎn)為代碼文件,直接導(dǎo)出完整的靜態(tài)頁面代碼,減少開發(fā)過程中的樣式調(diào)整問題。

直接導(dǎo)出整頁代碼模式的小缺陷是無法滿足開發(fā)中:代碼精簡(ai 智能生成的代碼對目前還達不到開發(fā)人員喜歡的程度,較為冗余)、控件交互、綁定數(shù)據(jù)等幾方面的需求,但是比如在一次性的靜態(tài)頁面的實現(xiàn)中還是能夠達到提效的目的。

圖片

結(jié)論:D2C模式的產(chǎn)品相對獨立,從定義還原度「設(shè)計資產(chǎn)類」、保障還原度「設(shè)計稿查看類」、解決還原度「設(shè)計稿代碼生成類」層層遞進,可以有效提升設(shè)計師和前端工程師的生產(chǎn)效率和協(xié)同效率。

但在目前競爭激烈的大環(huán)境中,優(yōu)秀團隊的效率提升已經(jīng)達到瓶頸,而提效的本質(zhì)是為了比競爭對手更快更好,當所有人都有了相同的東西時,提效的目標可能就需要從別的地方打開缺口。

 

2、C2D(Code To Design)

C2D(Code To Design)「前端代碼轉(zhuǎn)設(shè)計稿」這個模式對于設(shè)計師相對模糊,不過國外的企業(yè)已經(jīng)做出了探索。

比如:2017 年Airbnb 發(fā)布的前端開源模塊 React Sketch.app,其核心理念是用代碼做設(shè)計。第一次看到的時候感覺真的很酷,通過 React Sketch.app 直接在 Sketch 設(shè)計軟件中編譯出設(shè)計界面,代碼也可以直接在項目中使用。

圖片

還有另外一個產(chǎn)品叫 html-sketchapp,通過在輸入框中輸入網(wǎng)頁地址就可以直接在 Sketch 中生成可編輯的設(shè)計界面「網(wǎng)頁轉(zhuǎn)設(shè)計文件」,通過任何前端代碼都可以轉(zhuǎn)為設(shè)計資產(chǎn)的文件,甚至直白一些說就是參考成熟產(chǎn)品做設(shè)計,適度借鑒吧。

圖片

結(jié)論:目前的 C2D 的市場方案對于設(shè)計師而言不夠友好,無法讓設(shè)計師可以直接使用,都需要工程師來完成轉(zhuǎn)換,同樣也會遏制設(shè)計創(chuàng)新,陷入同質(zhì)化的泥潭中。

但這個模式,卻非常適合“有意”借鑒參考成熟或者競爭對手的項目團隊,可以快速達到同類型產(chǎn)品的基準水平。

 

 

二、針對目前現(xiàn)狀,什么樣的方式可以實現(xiàn)提效?

從我們當前的工作流程來看

圖片

在這個流程中設(shè)計最在乎的就是設(shè)計階段的表現(xiàn)需求和前端的設(shè)計還原,為了保障精準的表現(xiàn)需求,在設(shè)計階段需要大量的溝通和風格嘗試。

在前端還原階段需要和前端不斷的扣細節(jié),輸出幾百條信息的走查文檔,那應(yīng)該如何解決這些問題?

圖片

答案就是「 C2D2C」的模式

 

1、C2D2C(Code To Design To Code)

C2D2C(Design to code to design)的模式,將流程中的設(shè)計表現(xiàn)和前端還原階段的通過設(shè)計標準化和研發(fā)工業(yè)化的方式進行流程優(yōu)化,減少設(shè)計和前端開發(fā)的參與,實現(xiàn)中后臺研發(fā)流程的整體提效。

圖片

在十幾年的發(fā)展里互聯(lián)網(wǎng)行業(yè)積累了大量的設(shè)計資產(chǎn)。

這些設(shè)計資產(chǎn)的沉淀是設(shè)計標準化的基礎(chǔ),將設(shè)計資產(chǎn)轉(zhuǎn)為封裝好的代碼組件也就是 D2C 的過程。將封裝好的組件通過低代碼平臺進行屬性配置、搭建頁面、布局調(diào)整實現(xiàn)頁面的設(shè)計就是 C2D 的過程。

通過平臺設(shè)定交互行為和綁定后臺數(shù)據(jù),完成整個系統(tǒng),最后在進行站點發(fā)布,就實現(xiàn)了 C2D2C 的完整流程。

圖片

C2D2C 的模式是設(shè)計資產(chǎn)與線上智能化布局的代碼方案(低代碼平臺)以及后臺數(shù)據(jù)綁定的結(jié)合,將以前的人工分工通過智能化方案綜合一體去解決。

但這個過程不是僵化死板的模式,在C2D環(huán)節(jié)實現(xiàn)“設(shè)計->前端”的高還原度下快速落地,在D2C環(huán)節(jié)下實現(xiàn)“低代碼平臺->自有產(chǎn)品”的靈活調(diào)整下快速復(fù)制。

結(jié)論:隨著社會的發(fā)展,標準化和智能化的產(chǎn)品線都將會被人工智能取代,互聯(lián)網(wǎng)行業(yè)也正在向這個方向發(fā)展,所以設(shè)計的標準化和開發(fā)的工業(yè)化就像手工業(yè)向工業(yè)化的轉(zhuǎn)型,這是一個大的趨勢,未來可能一天的時間就可以生產(chǎn)數(shù)套后臺產(chǎn)品,這樣的生產(chǎn)效率才能跟上中國的數(shù)字化轉(zhuǎn)型浪潮。

 

2.、C2D2C 的市場化

低代碼平臺 是 C2D2C 模式得以實現(xiàn)的核心平臺,從2018 年開始海外投資開始關(guān)注低代碼平臺,OutSystem 平臺獲得 KKR 和高盛的 3.6 億美元的融資,成為了低代碼賽道的獨角獸,另一家低代碼創(chuàng)業(yè)公司 Mendix 被西門子以 7 億美元的價格收購,資本市場的關(guān)注讓低代碼賽道開始火熱起。

而國內(nèi)的低代碼平臺是從 2020 年疫情肆掠開始,疫情助推了在線辦公的發(fā)展,國家也在大力支持數(shù)字化經(jīng)濟,更多的企業(yè)開始數(shù)字化轉(zhuǎn)型,這也讓低代碼在國內(nèi)有了飛速發(fā)展的土壤。

目前海外比較成熟的平臺主要是 OutSystem和 Mendix,而國內(nèi)也有很多已經(jīng)商業(yè)化的低代碼產(chǎn)品,像網(wǎng)易輕舟等,已經(jīng)開始投入商業(yè)化的使用,可以從網(wǎng)易輕舟的低代碼產(chǎn)品架構(gòu),清晰完整的看到C2D2C模式的所需要具備的能力。

圖片

網(wǎng)易輕舟從業(yè)務(wù)角度出發(fā),具備持續(xù)迭代能力、組件具備可擴展性,并且可以為企業(yè)進行私有化部署,部署完成后可以和存量系統(tǒng)進行集成,交付后具備非常好的可運維性,是一個成熟的商業(yè)化平臺。

網(wǎng)易輕舟目前已經(jīng)服務(wù)了包括工商銀行、吉利汽車、申萬宏源證券、泰康人壽、臺州銀行等包括政府產(chǎn)業(yè)平臺30家,從服務(wù)的客戶我們也可以看的出來,低代碼產(chǎn)品在大型企業(yè)中落地更有優(yōu)勢。

結(jié)論:C2D2C 的模式已經(jīng)得到市場的驗證,研發(fā)工業(yè)化可以更加高效的提升中后臺產(chǎn)品的研發(fā)效率,設(shè)計標準化也可以減少中后臺設(shè)計師大量的重復(fù)性勞動,對于中后臺的業(yè)務(wù)產(chǎn)品,可以大膽地選擇一個富有實力低代碼產(chǎn)品。

 

 

最后

低代碼平臺的使用需要同時具備一定的代碼能力和設(shè)計能力,這不管是對開發(fā)還是設(shè)計師都具備一定的門檻。目前的低代碼平臺使用角色應(yīng)該是前端工程師,復(fù)雜的后臺交互平臺還是需要設(shè)計師的深度介入。

低代碼平臺的誕生減少了中后臺設(shè)計師大量的重復(fù)性工作,可以讓中后臺設(shè)計師將更多的精力投入到用戶研究和提升用戶體驗上。拖拽式的 UI 和智能化的布局以及良好的用戶體驗和以前的開發(fā)相比較,在中后臺的開發(fā)上更加的高效也更加的智能。

在最初調(diào)研到低代碼平臺的時候,行業(yè)的快速發(fā)展和成熟,讓我下意識的反應(yīng)是中后臺的設(shè)計師可能要失業(yè)了,但是在調(diào)研了平臺的使用和深入的思考后,我覺得這是中后臺設(shè)計師的機會。C2D2C 模式的最優(yōu)解應(yīng)該是 0 代碼方案,而使用 0 代碼平臺最好的角色就是設(shè)計師。設(shè)計師專業(yè)的審美和對于用戶體驗理解的深度都是其他職業(yè)所不具備的,未來的中后臺設(shè)計師更應(yīng)該將自己的精力投入到平臺流程的優(yōu)化和用戶體驗的研究中去,這也在未來 0 代碼平臺到來后,我們才能更快更好的投入到新的生產(chǎn)中。


作者:程鑫

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》中后臺產(chǎn)品的產(chǎn)研協(xié)同提效調(diào)研

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



5000字,作品集中的推理部分該怎么寫!

seo達人

圖片

現(xiàn)在很多公司面試UI都會面試交互能力,問你設(shè)計方案的推導(dǎo)、怎么量化、怎么分析、怎么做深度的設(shè)計思考等等,所以呢大部分設(shè)計師在本身視覺能力沒那么強的情況下,無奈在作品包裝中加入了推導(dǎo)分析的文字部分,結(jié)果,問題又來了,這些分析過程和推導(dǎo)其實是經(jīng)不起推敲的,因為往往在實際工作中,大部分設(shè)計師沒有真的運用過這些方法、數(shù)據(jù),靠的是參考市面上的作品集從而包裝出來,也就經(jīng)不起面試官的深問。最后作品集也成為了四不像的結(jié)果。

那么如果我們的設(shè)計基本功沒那么強,但又想展示自己的思維能力該怎么做呢?我在這里并不是教大家怎么去編和套設(shè)計流程的框架和理論,而是希望大家能明白,如果要放你的思維過程,應(yīng)該怎么正確的去放,如果真的沒做過,我建議不要去硬套,很容易漏洞百出。

 

設(shè)計師的定位和價值

一個項目的推導(dǎo)過程首先要明確,你在項目中扮演的是什么角色,你在整個項目中的價值是什么,是獨立負責?還是某一個環(huán)節(jié)的執(zhí)行者?我相信很多同學(xué)都想把自己包裝成一個獨立負責人,恨不得整個產(chǎn)品從立項到調(diào)研到分析到執(zhí)行都一個人包攬,但你越這樣去包裝,作品集內(nèi)容就越零散。

作品集主要展示的是你個人的能力,而不是讓你去描述和介紹你的產(chǎn)品。很多同學(xué)都變成了后者,比如先描述項目背景、產(chǎn)品的用戶群體是什么、每個功能模塊分別是什么功能…..這樣的方式去包裝作品真的味同嚼蠟,沒體現(xiàn)能力不說,還很枯燥。

圖片

 

 

一、講故事

其實我們可以用講故事的框架,來整理項目流程以及展示你在項目中的價值。在上學(xué)的時候老師會跟我們說,要講清楚一件事,需要分別理清楚三個階段,分別是:起因、經(jīng)過、結(jié)果。所以我們現(xiàn)在要講一件什么事呢?我們要講的是,你是如何通過設(shè)計手段幫助產(chǎn)品/用戶解決問題的。

那么我們就可以用起因、經(jīng)過、結(jié)果三個階段來闡述我們是怎么解決問題的,把這個邏輯給梳理出來。

 

1、起因

起因包含了

1.有哪些問題/機會

2.你是怎么發(fā)現(xiàn)問題的(為什么要做這個項目)

3.導(dǎo)致問題出現(xiàn)的原因是什么

圖片

比如我舉個例子,我發(fā)現(xiàn)我家?guī)鈮﹂_始掉粉脫落,甚至時不時的浴室柜下方會流出一些水,所以我懷疑是不是哪里漏水了,在這里我用的是觀察法,用觀察法很直觀的看到了問題。接下來我要去找到問題的原因,到底是什么原因?qū)е铝送鈮Φ舴勖撀湟约皾B水的問題。于是我先自己做了一個假設(shè),是不是埋在地下的水管破了?因為之前有用過腐蝕性很強的通下水道的藥劑,但是這個原因被我排除了,因為如果水管漏水那么就會一直漏,而不是間歇性的出水。那還有可能是什么原因呢?浴室柜中下水管堵塞導(dǎo)致水流到了沒做美縫的縫隙中嗎?還是樓上漏水滲下來了?

圖片

最后經(jīng)過多個原因的排除,問題找到了,是由于樓上確實漏水以及淋浴間下水不暢長期積水導(dǎo)致水從下水管口子邊上的縫隙流了過去,兩個原因。

 

所以我們再回過頭來看,作品包裝中起因應(yīng)該說明哪些事項:

1.1和2可以合并在一起寫,比如通過xx方法我們找到了目前產(chǎn)品中存在的問題,也可以寫我們找到了xxx問題,是由于我們用了xxx方法。

 

2、你是怎么發(fā)現(xiàn)你產(chǎn)品中存在的問題的?

是自我經(jīng)驗的觀察判斷?還是通過數(shù)據(jù)分析找到的某個現(xiàn)象(比如一個板塊的點擊率在逐月下降)還是通過對用戶訪談或者體驗地圖找到了某些體驗問題?你得采用一些方法,越客觀越好,比如很多同學(xué)在找問題的時候總會用一些比較寬泛的修辭來描述:首頁結(jié)構(gòu)不合理、層次不清晰、體驗較差,所以看到這樣的描述,我就想問,那么具體不合理、不清晰、體驗較差的點在哪里呢?為什么你覺得不合理、不清晰、體驗較差?是你的主觀感受?還是數(shù)據(jù)表現(xiàn)?還是客戶的體驗?你得證明出來。所以問題的來源是很多的,有的是你專業(yè)經(jīng)驗的判斷,有的是用戶的反饋,有的是數(shù)據(jù)的表現(xiàn),都不一樣。

圖片

 

3、導(dǎo)致問題出現(xiàn)的原因是什么?比如很多同學(xué)做改版,改版原因他們就寫:結(jié)構(gòu)不合理、層次不清晰、體驗較差…..這個是不對的,改版原因應(yīng)該是,由什么具體事件,導(dǎo)致的結(jié)構(gòu)不合理、層次不清晰、體驗較差,比如通過對用戶在支付任務(wù)流程中的數(shù)據(jù)表現(xiàn),我發(fā)現(xiàn)經(jīng)常有用戶在支付流程中跳失,導(dǎo)致轉(zhuǎn)化率下降,因此我們調(diào)研訪談了10個在支付流程中跳失的用戶,其中8個用戶在準備支付的時候找不到編輯收貨地址的功能,于是他們放棄了這次支付,這個問題凸顯的就是核心功能沒有滿足用戶預(yù)期,有效性差。至于樣本量的問題我就不展開了。

很多同學(xué)在第一階段會放很多產(chǎn)品的一些市場研究、定位,這些其實一點用也沒有,雷聲大雨點小,一開始切入點很大,結(jié)果這些點對描述你的設(shè)計能力沒有任何幫助,并且在后面的設(shè)計方案和策略中也完全不能體現(xiàn)出來有什么關(guān)聯(lián)。不如聚焦一點,針對問題直接進行展開。

 

小結(jié)一下,起因包含了3個問題,這三個問題可以通過幾種方法來解答:

1.你是怎么發(fā)現(xiàn)問題的(經(jīng)驗判斷法、渠道反饋法、用戶調(diào)研法、數(shù)據(jù)分析法、可用性測試…..)

2.有哪些問題(卡片分類法、kano模型、價值分析法……)

3.導(dǎo)致問題出現(xiàn)的原因是什么(經(jīng)驗判斷法、用戶訪談、觀察推測……)

 

 

二、經(jīng)過

這個階段就是用來體現(xiàn)你是怎么解決問題的,這里我們就要來講到解決問題的策略和邏輯了。諸葛亮草船借箭大家都聽說過吧,這個事件的問題在于缺箭,為什么會缺箭呢?原因是沒有足夠的時間和材料來制作那么多箭矢,要解決這個問題怎么辦呢?招募更多的士兵?收集更多的材料?采用緩和之計爭取時間?顯然這些策略是無效的,那怎么辦?內(nèi)部不行,只能靠外部來解決,于是就有了草船借箭。

再舉個例子,這兩天有點頭痛(問題),醫(yī)生說頭痛可能有多種因素造成的,例如睡眠不好、頸椎有問題、受涼、壓力大等等(原因),所以為了解決這個問題,我就可以有幾個不同的策略,如果是睡眠導(dǎo)致的,那么我就通過改善睡眠質(zhì)量來解決,如果是頸椎導(dǎo)致的,那么我可以去找中醫(yī)做一下推拿,這些都是解決問題的策略。

所以在經(jīng)過階段你必須講明白你是怎么選擇一種合適的策略的。舉個例子,比如有一個新的電商產(chǎn)品上線了,并合作了一些大品牌,但是我們發(fā)現(xiàn)這個品牌的銷量還不如一些不知名的品牌來的高(問題),于是我們通過第一步的研究起因,發(fā)現(xiàn)用戶之所以不買單,是因為他們覺得這些大品牌在你們平臺賣的是不是假貨(原因)。那么為了解決這個問題,我們就要研究一下具體的策略,怎么樣能夠讓用戶對該品牌產(chǎn)生信賴,而我們又如何才能讓用戶知道這個品牌是正品呢?

圖片

策略1:透出品牌資質(zhì)和曝光度:告知用戶我們有品牌授權(quán)的資質(zhì)

策略2:給予用戶更多保障:給用戶產(chǎn)品質(zhì)量的售后保障和檢測權(quán)利

策略3:讓用戶提前進行體驗:可以給部分用戶試用

經(jīng)過分析以及成本權(quán)衡,策略2和3實施起來較為困難,成本高,于是策略1是一個比較好的選擇。那么具體的方案就要到第三階段來呈現(xiàn)了。

 

再舉個例子,抖音大家都有用過吧,在之前的老本版中,有用戶想查看當前視頻的上下集,非常不方便(問題),因為需要點擊或者側(cè)滑進入作者首頁,然后經(jīng)過滑動才能找到當前視頻的位置(原因)。所以為了解決這個問題,如果你是抖音的設(shè)計師,你會有哪些策略呢?

策略1.提高用戶查看視頻的效率:直接給用戶定位到當前視頻

策略2.提高作者制作系列視頻的便捷性:可以讓用戶不用進入主頁也能看到上下集

 

所以,小結(jié)一下,“經(jīng)過”這個階段中找策略我們依然也可以用到一些方法:上癮模型、aarrr模型…..但是這些模型我是不建議大家在作品集里寫的,太形式化了,在大廠的設(shè)計流程中,設(shè)計策略基本上是通過產(chǎn)品和設(shè)計的經(jīng)驗判斷給出的,不會真的說是靠這個模型工具而產(chǎn)生輸出的策略,比如像我們說“給用戶一種溫暖的感覺”,這是一個設(shè)計目標也可以是一個策略,但它很難說是由哪個方法論或者工具提煉出來的。

 

 

三、結(jié)果

結(jié)果,也就是我們通過設(shè)計目標和策略,選擇具體的設(shè)計方案。在作品集中,設(shè)計方案給面試官展示,這其實沒那么重要。面試官想看的是什么呢?是你雖然最后給出了a方案,但是在設(shè)計過程中,有沒有b方案和c方案,最后讓你選擇a方案的理由是什么,你是怎么思考的,也就是方案的由來。

這個才是我們展示能力的最好表現(xiàn)。以上面的抖音為例,通過策略1,用戶點擊主頁可以直接定位到當前視頻的區(qū)域以便用戶查看上下集,如果直接根據(jù)這個策略設(shè)計方案是很簡單和直觀的,只要定好位,并給用戶一個當前正在播放哪個視頻的狀態(tài),做個標簽即可。

但是最終方案并不是這樣的,而是當用戶側(cè)滑或者點擊頭像后先定位到的是用戶主頁的頭部區(qū)域,而在右下方給了一個“剛剛看過”的按鈕,點擊按鈕才會定位到剛剛正在看的視頻。

 

圖片

 

這兩個方案顯然是有區(qū)別的,為什么不直接定位,而要多給出一個“按鈕”呢?原因就在于抖音更希望觀看者和作者能夠更多的產(chǎn)生互動和鏈接,提高作者的關(guān)注率,讓觀看者先看到作者的主頁,再去查看剛才的視頻,因為只有你關(guān)注了作者,作者才有更多動力去制作視頻,同時關(guān)注作者也會為你個人的偏好附上一個大的權(quán)重,以便于做更精準的推薦。 

這是對于兩種方案的解讀,所以方案a和方案b,為什么選b不選a,這就是理由。當你的方案呈現(xiàn)在作品集中,面試官就會這么問。

通常在做方案的時候,大家也總會用到競品分析,競品分析是一把雙刃劍,它可以讓你的方案至少不會出大錯,也可以讓你的方案沒有特點,所以這也很考驗設(shè)計師是怎么將產(chǎn)品業(yè)務(wù)的定位、用戶屬性、業(yè)務(wù)目標的差異化結(jié)合到方案中去的。競品分析大家也很喜歡單獨拿出一個板塊放在作品集里,咱先不論有沒有真實操作過,放在作品集里的內(nèi)容,一定要有目的性,大家仔細品一下這句話。你想要通過放這塊內(nèi)容告訴面試官什么?是你拿了一堆競品做了比較和描述,還是說你能夠結(jié)合自己業(yè)務(wù)和用戶的特性,找到和其他競品設(shè)計差異化的點,最后應(yīng)用或指導(dǎo)到你的設(shè)計方案中去?

 

結(jié)果階段除了方案的探索、權(quán)衡外,還需要進行驗證和復(fù)盤。雖然咱們花了很大的力氣,從發(fā)現(xiàn)問題到找到原因,再到定義目標和策略,最后選擇方案,但并不意味著最后的結(jié)果是好的,因為我們不知道我們的方案到底有沒有解決最一開始的問題,你原來頭痛,最后選擇了吃藥,結(jié)果吃了一個月,還是沒好,那就說明:1.問題原因不對 2.策略有問題 3.藥吃錯了。所以如果你要以結(jié)果為導(dǎo)向,那么最后的驗證和復(fù)盤不可缺少。那有同學(xué)說,我們公司沒有數(shù)據(jù),沒有用戶,那我要怎么驗證呢?那我勸你好好跟產(chǎn)品或者老板去談一談,雖然你想操這個心,但是老板都不在意那也沒有辦法,但是你在面試的時候需要表達出這樣的思維。

 

  

總結(jié)一下 

再說一下,分析推理部分,不是UI/UX作品集必備,你想做純視覺包裝作品集也可以,但我們要清楚,你應(yīng)聘的崗位要求是什么,而你的作品集和崗位要求是否能對應(yīng)起來?,F(xiàn)在的一些公司要求都很高,UI和UX都成為了標配要求,所以我們盡可能要把這兩塊都在作品集里展示出來。有人說,我實在沒做過這些東西,讓我編也編不出來怎么辦?那就從今天起試著開始主動找找產(chǎn)品存在什么問題,然后去解決它,試著走一遍:起因、經(jīng)過、結(jié)果三個階段,我相信你一定會有收獲。 


作者: 應(yīng)駿

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》5000字,作品集中的推理部分該怎么寫!

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



卡片式設(shè)計 | 掌握這些技法,快速提升界面效果!

seo達人

一、卡片式設(shè)計的定義

1、什么是卡片?

早在互聯(lián)網(wǎng)時代之前,卡片就出現(xiàn)在了我們生活中的方方面面,如名片、不干膠標簽、便利貼、會員卡…等,不管是何種類型的卡片,它都將代表著我們現(xiàn)實生活中的某個特定信息。

圖片

卡片指的是含有圖片或文本信息的容器,它將我們需要的信息歸納在一起、并形成獨立的個體,以至于后續(xù)被引用到線上界面中,同樣具有非常不錯的信息歸納效果。

 

2、互聯(lián)網(wǎng)中的卡片式設(shè)計

卡片本身就是一個完整的信息區(qū)塊、并同時承載豐富的互動方式。在UI設(shè)計中,個性化和美感兼?zhèn)涞目ㄆ皆O(shè)計具有很強的易用性,它是一個UI設(shè)計組件,將標題、文本內(nèi)容、圖形/圖片進行整合并模塊化,讓信息的表達更加直觀、操作也更便捷。

卡片式設(shè)計之所以能成為當今比較流行的趨勢,是因為它能讓界面信息更有層次感,從設(shè)計、交互、視覺以及用戶體驗等各方面來看,都有不錯的優(yōu)點。站在用戶角度,即便不太理解卡片的概念(也不需要理解),但能快速知道如何使用它,相對來說,學(xué)習成本也是極低的。

圖片

 

 

二、卡片式設(shè)計價值

1、結(jié)構(gòu)清晰

卡片在占用屏幕空間較少的情況下能夠?qū)⒉煌笮?、不同類型的信息?nèi)容按邏輯進行分組呈現(xiàn),使界面結(jié)構(gòu)更加清晰。相比純粹的留白或分割線,卡片不僅對信息作出了分割,其本身還是一個獨立的容器,讓歸納組合后的信息能快速突出重點,將復(fù)雜內(nèi)容簡單化處理。

卡片式布局整齊簡練,清晰的信息結(jié)構(gòu)有助于用戶瀏覽,方便快速找到自己感興趣的內(nèi)容,避免用戶產(chǎn)生一種費時或感覺內(nèi)容超長的恐懼感,還能節(jié)省更多的時間成本。最常見的就是信息列表、圖文混排等,不僅做到了視覺上的美觀,也達到了平衡文字及圖片強弱的效果。

圖片

 

2、場景拓展

卡片式設(shè)計有利于場景拓展,他能在信息不斷增/減的情況下、頁面依然能組成一個連貫的整體,在視覺上毫無違和感。例如支付寶在頭部插入的廣告引流入口、淘寶在節(jié)假日增加二層樓…等。

圖片

 

3、空間擴展

卡片式設(shè)計一度打破了移動端多為縱向操作、原有傳統(tǒng)的列表式布局,在空間有限的移動端設(shè)備中,還能很好的利用橫向空間。將橫向滑動區(qū)域的最后一個卡片漏出一小部分(若隱若現(xiàn)才是誘惑),不僅能給予用戶更多選擇與期待,其空間利用率也得到了很好的擴展,在展示更多內(nèi)容的情況下依然能保持模塊的整體性。

圖片

 

4、突出重點

卡片式設(shè)計能很好的通過邊界襯托出內(nèi)容的整體性,特別是在電商類產(chǎn)品中的首頁頭部、瓷片區(qū)、營銷引流區(qū)將其應(yīng)用到了極致,即便在卡片數(shù)量較多的情況下,用戶依然能清晰的感知到內(nèi)容的歸屬層級以及重要信息。

圖片

 

5、兼容多端

卡片作為一個容器,它可以自由無限的等比縮放,非常適合響應(yīng)式設(shè)計。在手機、iPad、電腦等屏幕尺寸復(fù)雜的情況下,通過放大縮小或增減縱向排列數(shù)量的方式配合響應(yīng)式的斷點設(shè)計,讓同一界面在不同設(shè)備之間輕易的創(chuàng)造出一致性的視覺體驗。

圖片

 

6、易于操作

卡片給人最直觀的感覺就是可以操作,它不用箭頭、按鈕或超鏈接等引導(dǎo)性的視覺元素提醒,節(jié)省了一定的頁面空間,還有著更大的操作熱區(qū),無需做到精準點擊??ㄆ皆O(shè)計很容易融入各種交出手勢,如單擊、雙擊、長按、拖動、滑動等,為用戶提供更多便捷的操作。

 

7、跳轉(zhuǎn)流暢

卡片可通過縮放的形式充分利用動畫進行頁面跳轉(zhuǎn),例如App Store“Today”頻道,點擊卡片后直接等比放大至全屏,給用戶一種還停留在當前頁面的錯覺,避免了傳統(tǒng)的跳轉(zhuǎn)頁面而造成的信息割裂感,流暢絲滑的過渡,給用戶更自然的交互體驗。

 

 

三、常見的卡片式設(shè)計樣式

1、四周留白

這種類型的卡片在UI設(shè)計中最為常見,柔和的圓角、邊緣陰影以及四周很自然的留白,讓內(nèi)容模塊的存在感更加強烈,整個頁面信息的層級也更加清晰。

圖片

 

2、懸浮內(nèi)容之上

懸浮型卡片并非模態(tài)彈窗,與其相比,懸浮卡片不需要主動操作觸發(fā),可作為臨時控件或長期固定顯示,并且比模態(tài)彈窗能承載更多信息內(nèi)容,可通過伸縮來定義卡片中的信息數(shù)量,或多、或少、或展示、或隱藏,在頁面中非常靈活。

例如高德地圖首頁,搜索框及右側(cè)的功能入口長期懸浮在地圖之上,而下方卡片中的內(nèi)容會隨著高度的伸縮自動調(diào)節(jié)可展示的數(shù)量,非常實用。

圖片

 

3、通欄類型

通欄類型的卡片具有更強的視覺阻斷,對區(qū)分不同的功能模塊有不錯的效果,不過這種類型只通過頁面背景色保留上下邊間、且不會過多,不然頁面會顯得零散、雜亂。

圖片

 

 

四、卡片適用場景介紹

1、瀑布流

瀑布流主要正針對圖片較多、或以圖片為主的內(nèi)容設(shè)計,它最大的優(yōu)點是無需過于在意圖片的高度,最大限度的還原原始圖片效果。

卡片式設(shè)計的瀑布流對信息的組合、包容性更強,不僅能在單屏區(qū)域內(nèi)顯示更多內(nèi)容,同時又將每組信息組合作出了明確的劃分,在不破壞頁面整體性的基礎(chǔ)上也做到了相對獨立,如花瓣、Pinterest就是最好的例子。

圖片

 

2、信息流

信息流的展現(xiàn)方式主要以文字、圖片或視頻內(nèi)容為主,是一種較長內(nèi)容的媒介,不管哪種展現(xiàn)方式,其都需要用戶耗費較長時間的滑動、瀏覽來篩查對自己有用的信息。

卡片式設(shè)計將信息進行分塊處理,通過阻隔的方式快速告知用戶每個卡片的核心內(nèi)容,便于用戶在長時間的滑動過程中也能快速識別重要信息。

圖片

 

3、左/右滑動

卡片式左右滑動組合在音樂、視頻類產(chǎn)品中用最為廣泛,因內(nèi)容本身就圖片居多,也更適合卡片式設(shè)計,相比平鋪具有更強的層次感,對用戶的吸引力較強,尤其最右側(cè)漏出的一小部分內(nèi)容營造出神秘的感覺,用戶會不由自主的想去滑動以求獲取更多信息。

圖片

 

4、優(yōu)惠卡/券

卡/券設(shè)計實際是把生活中的實物映射到了UI設(shè)計中,通過模擬實物造型設(shè)計成卡片樣式,有效降低用戶的理解成本,并對其有了更直觀的感知,真實感尤為強烈。

圖片

 

5、突發(fā)事件/臨時提醒

對于用戶主動觸發(fā)或系統(tǒng)臨時發(fā)起的非固定性內(nèi)容,利用卡片式設(shè)計會讓信息布局更靈活、視覺更突出,在不影響用戶使用的前提下,可出現(xiàn)在任何位置。

圖片

 

6、部分頁面頭圖

卡片式設(shè)計可以將個人中心、個人主頁、會員等頁面中的關(guān)鍵信息進行概括,并在頭部位置進行重點突出,不僅讓原本單個的內(nèi)容形成整體,還能營造出沉浸式的氛圍。

圖片

 

 

五、卡片式設(shè)計原則及小技巧

1、一致性原則

為了保持界面設(shè)計的一致性,需要將卡片樣式納入設(shè)計規(guī)范,例如卡片是否通欄、是否需要設(shè)定圓角半徑、不同場景中卡片大小的劃分界限以及圓角數(shù)值的確定等,大部分情況下都需要遵循設(shè)計規(guī)范。

圖片

 

2、功能定位決定卡片形式

在同一產(chǎn)品中,雖然要遵循設(shè)計規(guī)范以確保一致性的視覺效果,但并非所有頁面都適合卡片式設(shè)計。

那么,到底是否需要采用卡片形式、使用哪種卡片類型?這還得根據(jù)頁面內(nèi)容屬性及目標定位來決定。例如社交產(chǎn)品中的臨時會話列表、動態(tài)圈子使用卡片形式,很浪費縱向空間、甚至會顯得很“雞肋”,用分隔線或間距留白來區(qū)分信息組顯然更合適;但對于電商類型的產(chǎn)品,利用卡片將不同的商品分隔后又進行歸納,會更容易識別,信息的可讀性也會更強。

圖片

 

3、避免過多卡片嵌套

卡片式設(shè)計本身就包含了容器與背景的層級表現(xiàn),為了保持內(nèi)容的正常展示與用戶瀏覽體驗,避免在卡片中嵌套多層卡片,以免信息層級雜/亂而增加用戶的視覺負擔。

如果再同一卡片中需要再次區(qū)分多個信息組,可利用間距留白、分割線或淺色背景等元素屬性來區(qū)分,依然能達到想要的效果。

圖片

 

4、合理利用橫向空間

因為卡片內(nèi)、外的雙向間距留白,在空間有限的移動端設(shè)備中,橫向空間利用率較低,因此除了合理的減小左右間距外,還可以適當利用左右滑動來擴充橫向隱性空間。

例如淘票票首頁,在1.5屏的范圍內(nèi),幾乎每個模塊都能橫向滑動查看更多內(nèi)容,從用戶體驗角度出發(fā),這是縱向空間無法比擬的。

圖片

 

5、降低縱向空間的浪費

卡片式設(shè)計不是目的,其主要是用來更好的區(qū)分信息層級、提升用戶瀏覽體驗,因為卡片要作為獨立空間的存在,必定會增加上下間距而導(dǎo)致頁面拉長,因此,如無必要,不必盲目采用卡片式設(shè)計。

例如美團APP的「首頁、電商、購物車、我的」4大主功能頁面都使用了卡片形式,而「消息」頁則采用分割線進行信息分組,試想一下,如果為了統(tǒng)一規(guī)范而使用卡片,不僅造成很強的割裂感、還會極大的浪費縱向空間。

圖片

 

6、長文表達不適合卡片

這點不用多說,新聞資訊類產(chǎn)品的內(nèi)容詳情頁就是最好的證明,不管其他頁面是否采用卡片形式,但詳情頁并不會跟隨形式,一方面可以讓同屏展示更多內(nèi)容、增加空間利用率,另一方面可減少無關(guān)元素對用戶產(chǎn)生的干擾、給予沉浸式的瀏覽體驗。

圖片

 

7、突出一個核心內(nèi)容

很多時候,我們總會聽到PM說這個很重要、那個也很重要,都需要突出一點,殊不知當什么都突出了也說明什么都沒有突出。在單個卡片中,組始終牢記這個準則:一次只突出一個核心信息,以便于用戶快速、精準捕捉,切記不可貪多。

 

六、結(jié)語

卡片式設(shè)計之所有能快速流行起來且經(jīng)久不衰, 其主要得益于自身的靈活性,尤其是在跨設(shè)備、跨屏幕上有著純天然的優(yōu)勢,能忽略設(shè)備的差異給用戶提供更好的服務(wù)。卡片并不是簡單的樣式設(shè)計,它是一種自由布局的設(shè)計語言,通過多種方式的信息組合、結(jié)合豐富的交互操作,給用戶創(chuàng)造出極致的使用體驗。

信息的呈現(xiàn)方式雖有不同,但最終的目的都是為了服務(wù)于內(nèi)容,卡片式設(shè)計只是其中的一種形式而已,在設(shè)計過程中,我們需要根據(jù)內(nèi)容結(jié)合實際情況作出合理的判斷,切勿拘泥于形式而忽略內(nèi)容本身的重要性。

任何設(shè)計風格及展現(xiàn)形式都有可能成為歷史,卡片式設(shè)計也不會例外,但絕對不是這么快就結(jié)束,它依然值得我們?nèi)ド罹?,力求打造更好的信息布局、更舒適的用戶體驗。

 

原文地址:能量眼球

作者:大漠飛鷹CYSJ

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》卡片式設(shè)計 | 掌握這些技法,快速提升界面效果!

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



2023 年全新視覺設(shè)計趨勢來啦!趨勢7把我萌翻了!

seo達人


近日,2023年度視覺設(shè)計趨勢報告發(fā)出出來了,總共有11個大的趨勢,那么23年又流行哪些趨勢呢?下面跟著菲爾剛哥的一起逛這場視覺盛宴吧!記得收藏噢!

2023年平面設(shè)計趨勢概覽:

1、粘土風格

2、3D孟菲斯風格

3、簡潔風格

4、迷幻設(shè)計

5、霓虹燈和抽象卡通貼紙

6、70年代復(fù)古平面設(shè)計

7、簡化3D風格

8、抽象線條藝術(shù)人物

9、藝術(shù)襯線字體

10、彩虹色調(diào)色板

11、受自然啟發(fā)的設(shè)計

1、粘土風格(The Clay Look)

Example by Ramy Wafaa

2023年橡皮泥設(shè)計趨勢的關(guān)鍵要素

  • 介紹由數(shù)字技術(shù)或真正的橡皮泥制成的不完美的凹凸表面。
  • 提醒您在不完美中尋找完美。
  • 鼓勵不斷蛻變,塑造自己的未來。

2、3D孟菲斯風格(The 3D Memphis Style)

2023 年 3D 孟菲斯設(shè)計的關(guān)鍵要素

  • 通過 3D 現(xiàn)實的棱鏡重生的著名 80 年代風格。
  • 基于 3D 幾何圖形和鮮艷色彩的大膽組合。
  • 鼓勵在平凡中尋找不平凡。

3、簡潔風格(The Clean Style)

2023 年清潔風格設(shè)計的關(guān)鍵要素

  • 一個整潔的設(shè)計,將所有圖案、裝飾品和裝飾都排除在外。
  • 可以通過 3D 設(shè)計技術(shù)或平面簡約主義來呈現(xiàn)。
  • 調(diào)色板由流行的白色或白色色調(diào)組成。

4、迷幻設(shè)計(Trippy Design)

2023 年 Trippy 設(shè)計趨勢的關(guān)鍵要素

  • 在設(shè)計美學(xué)方面可能不符合邏輯的風格混雜。
  • 創(chuàng)造一種超現(xiàn)實的體驗,類似于產(chǎn)生幻覺的效果。
  • 挑戰(zhàn)設(shè)計師將他們的想象力超越所有既定的設(shè)計規(guī)則和限制。

5、霓虹燈和抽象卡通貼紙(Neon & Abstract)

2023年霓虹燈和抽象卡通貼紙趨勢的關(guān)鍵要素

  • 霓虹燈和抽象卡通貼紙風格流行。
  • 雖然有些類似于平面物理貼紙,但有些則呈現(xiàn)出運動和體積。
  • 抽象卡通貼紙風格傳達了藝術(shù)繪畫的感覺。

6、70年代復(fù)古平面設(shè)計(70s Retro Flat Designs)

2023 年 70 年代復(fù)古平面設(shè)計的關(guān)鍵要素

  • 大膽、華麗、飽和的顏色,看起來很美。
  • 所有設(shè)計元素都由黑色細邊框勾勒出來。
  • 具有 3D 效果或簡單黑色輪廓的大塊圓形字母類型。

7、簡化3D風格(Simplified 3D Style)

2023 年簡化 3D 設(shè)計的關(guān)鍵要素

  • 將細節(jié)減少到最低限度,同時在簡單中尋求完美。
  • 基于簡單、平滑的幾何形狀,如球體、立方體、圓柱體等。
  • 易于理解、熟悉和吸引人,因為它類似于幼兒簡單的玩具。

8、抽象線條藝術(shù)人物(Abstract Line Art )

2023年抽象線條藝術(shù)人物設(shè)計的關(guān)鍵要素

  • 扁平的線性風格,結(jié)合明亮的色彩,傳達復(fù)古的氛圍。
  • 扭曲的比例和動物、物體和人類特征的奇怪混合。
  • 與您所見過的任何東西都不相似的角色。

9、藝術(shù)襯線字體(Artistic Serif Fonts)

2023年藝術(shù)襯線字體趨勢的關(guān)鍵元素

  • 筆畫創(chuàng)意操控:不同字母的交織、扭曲、液化、延伸等。
  • 超大襯線字體可以是作品中唯一或主要的設(shè)計元素。
  • 襯線字體仍然傳達復(fù)雜性,但變得更加有趣和不可預(yù)測。

10、彩虹色調(diào)色板(Rainbow Palette Colors)

2023年彩虹調(diào)色板顏色設(shè)計的關(guān)鍵元素

  • 靈感來自彩虹的顏色。
  • 與其他流行的設(shè)計風格相結(jié)合。
  • 代表各種形式的多樣性。

11、受自然啟發(fā)的設(shè)計(Nature-Inspired Designs)

2023 年自然靈感設(shè)計趨勢的關(guān)鍵要素

  • 柔和的泥土色調(diào)、天然材料、紋理和形狀。
  • 平衡感官,因為它傳達寧靜、內(nèi)心的平靜和和諧。
  • 一些設(shè)計呈現(xiàn)出真實自然和虛構(gòu)現(xiàn)實之間的混合。

寫在最后的話

2023年度最新的視覺設(shè)計趨勢預(yù)測報告將設(shè)計師的想象力推向了全新的高度。這11個設(shè)計趨勢也為設(shè)計師們打造了一個超乎現(xiàn)實、夢幻般的場景,喚醒觀眾的好奇心,激發(fā)人們探索的自然欲望。

好了,2023年最新視覺設(shè)計確實介紹完畢,你有什么看法呢?

本文 由「菲爾.剛哥」編輯整理,僅供分享交流

圖源 Graphicmama網(wǎng)站| 版權(quán)歸原作者所有

-END-

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



UI 場景中常見的 3 個主題化區(qū)域

seo達人


圖片

 

 

一、底部標簽欄主題化設(shè)計

1、底部標簽欄圖標主題

在不改動結(jié)構(gòu)的情況下,替換底部標簽欄圖標是最方便的形式。通過主題化的圖標也非常容易傳遞氛圍,無論是在節(jié)日慶典、購物季、主題活動等場景中,這個形式都是最直觀的表達之一。

比如優(yōu)酷 APP 在中秋節(jié)的時候,就將底部標簽欄圖標替換為各式各樣的月餅造型,主題營造也是非常的明顯。將原本的圖標造型融入到月餅圖案中,鑲嵌圖案的設(shè)計非常巧妙,不僅保留原本的識別特征,也強化了主題氛圍感。

圖片

除了在圖標造型上面發(fā)揮以外,也可以將主題文案融入到設(shè)計中,這也是較為直接的表現(xiàn)形式。作為特定主題來說一目了然,需要把控主題文案數(shù)量。

圖片

 

2、底部標簽欄背景層

底部標簽欄的設(shè)計中,除了通過圖標設(shè)計附和主題之外,也可以在背景層進行主題氛圍營造。由于底部屬于操作頻繁區(qū),背景層的設(shè)計不能過于搶眼,容易干擾功能的識別與操作。比如前段時間抖音 APP 將底部標簽欄背景層進行主題營造的時候,在黑色層上面運用的色調(diào)比較深一些,與原本黑色的沉浸式體驗有差異,在白底上面呈現(xiàn)效果還可以。

圖片

沒過多久抖音設(shè)計團隊便進行了更新,壓暗了背景元素的色調(diào),弱化了視覺感。更符合原本的感官體驗習慣,也能強化主題感。

圖片

除了抖音以外,小紅書 APP 前段時間也在底部標簽欄背景層上面進行了營造。如果營造面積比較大的話,在無圖標形式(純文字版底部標簽欄)上面比較適合。如果帶有圖標的話,適合做局部強化。

圖片

 

 

二、頂部視覺區(qū)強化主題感

頂部視覺區(qū)包含狀態(tài)欄、導(dǎo)航欄和頂部內(nèi)容區(qū)域,通常是白底、灰底、品牌色底和運營主題背景等為主。也是強化視覺感的常見區(qū)域,作為營造主題氛圍來說也是非常好的選擇。

圖片

該區(qū)域不僅可以作為功能性活動入口,也能在特殊時間段作為氛圍營造。很多產(chǎn)品都會在頂部視覺區(qū)域做應(yīng)變處理,滿足多場景的需求發(fā)揮。

圖片

頂部視覺區(qū)的強化也是增強頁面感官體驗的方式之一,除了靜態(tài)背景的營造以外,也可以使用動態(tài)或者流體漸變等形式。

圖片

 

 

三、金剛區(qū)圖標設(shè)計主題化

金剛區(qū)也是作為主題化設(shè)計最常見的區(qū)域,由于該區(qū)域像百變金剛一樣,較強的靈活性方便元素替換和重組。

 

1、圖標主題化

在一些特定主題日活動中,可以將金剛區(qū)圖標替換為帶有主題元素的設(shè)計,以此增強活動氛圍。通常是階段性時間內(nèi)展示,可以是圖標造型層面主題化,也可以是主題文案鑲嵌在圖標造型中,靈活性相對比較高。

圖片

 

2、局部動效化表達

除了整體金剛區(qū)變動以外,也可以在局部圖標上進行設(shè)計發(fā)揮,這樣帶來的干擾性比較低。通常是以圖標微動效為主,以此來突出個別功能和活動主題等。不適合過度動效,容易互相干擾,適合局部動效化表達,突出局部內(nèi)容的關(guān)注度。

金剛區(qū)作為曝光度較高的區(qū)域,經(jīng)常作為流量分發(fā)的關(guān)鍵場景,主題化發(fā)揮也是非常具備靈活性的。

 

 

小結(jié)

產(chǎn)品設(shè)計除了常規(guī)性的視覺升級和功能優(yōu)化以外,主題化設(shè)計也是至關(guān)重要的,可以讓用戶時刻感受產(chǎn)品的變動。一成不變的體驗使用時間長了也會麻木,結(jié)合節(jié)日慶典和一些主題活動進行視覺呈現(xiàn),可以在感官體驗層面得到提升。

本文觀點屬于個人經(jīng)驗總結(jié),不足之處歡迎大家補充,我們互相進步。


作者:黑馬青年

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》UI 場景中常見的 3 個主題化區(qū)域

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍藍設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.yvirxh.cn

存檔