首頁

消息通知 | 提升消息推送轉化率的必備知識!

資深UI設計者

前言

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

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

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

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

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

◇ ......


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



分享目錄

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


一、消息通知的基本知識

1.什么是消息通知

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


2.消息推送的目的

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

3.通知設計的基本原則

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


二、消息通知渠道

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

1.應用內通知

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

2)消息列表

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

3)彈窗通知

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


4)Toast 通知

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


2.應用外推送

1)桌面小紅點

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


2)PUSH推送

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


3)手機短信

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

4)電子郵件

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


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

5)公眾號消息

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


三、讓用戶再開啟通知權限

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


1.尋找關閉原因

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

2.引導二次開啟

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

1)損失厭惡/利益引誘

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

2)消息分類/分別處理

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

3)提供關閉/關不徹底

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


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


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

1.減少重復通知

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


2.言語得當、避免誤會

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


3.細分受眾群體

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


4.內容清晰簡潔

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


5.提供“下一步”入口

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


五、結語

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


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

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

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

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


2022 PANTONE 最美色彩來啦!

seo達人

一、全新Post-It®Notes

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

圖片

 Post-it Notes 

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

 

三種精選調色板包括:

1、花卉幻想

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

2、能量激發(fā)

圖片

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

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

3、單純靜謐

圖片

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

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

 

二、多彩的元宇宙

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

圖片

1、視覺語言

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

圖片

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

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

圖片

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

圖片

三、提契諾的色彩

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

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

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

圖片

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

 

四、周大福的色彩

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

圖片

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

圖片

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

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

圖片

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

 

五、西派金銅  City Park Golden Brass

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

圖片

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

圖片

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


作者:劉濤

轉載請注明:學UI網》2022 PANTONE 最美色彩來啦!

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


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


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



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

seo達人

案例一:樂樂茶產品海報

圖片

 

01.案例名稱

品牌:樂樂茶     項目:產品促銷海報設計     

產品:草莓桃子超萌杯

 

02.案例目的

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

 

03.案例標簽

調性:年輕、時尚     色彩:熒光色、漸變色、對比色     設計風格:扁平風、幾何色塊

 

04.案例亮點

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

? 標題的字體設計很好看,與主題內容以及品牌的調性也十分吻合。

 

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

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

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

圖片

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

 

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

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

圖片

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

圖片

? 產品的食欲還差了一點點。

 

07.啟發(fā)與思考

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

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

? 在食品海報中,產品本身的食欲永遠是重中之重。

 

 

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

圖片

圖片

圖片

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

 

01.案例名稱

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

 

02.案例目的

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

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

 

03.案例標簽

調性:高端、尊貴、健康       主色:歐洲皇室藍            設計風格:彩鉛插畫

 

04.案例亮點

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

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

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

 

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

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

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

圖片

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

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

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

圖片

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

 

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

? 側面icon的設計不夠精致和直觀;

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

圖片

 

07.啟發(fā)與思考

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

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

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


作者:蔥爺

轉載請注明:學UI網》這樣拆解1件作品比看100件都有用

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


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


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



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

seo達人

一、六種網格類型

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

 

1、 基線網格

圖片

基線網格是由等距水平線組成的密集網格,用于確定文本的位置?;€網格通常與分欄網格結合使用,以確保每列中的文本在界面上均勻對齊。

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

圖片

 

2、單欄網格

圖片

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

 

3、分欄網格

圖片

圖片

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

報紙和雜志的排版設計、網頁和APP的設計都會廣泛使用分欄網格。

圖片

 

4、模塊化網格

圖片

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

 

5、像素網格

圖片

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

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

圖片

 

6、層級網格

圖片

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

將界面中的內容進行優(yōu)先級排序,按照層級結構清晰展示內容的優(yōu)先級,為產品提效。

圖片

 

 

二、在UX/UI中使用網格的5個技巧

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

 

1、規(guī)劃網格與頁面的關系

圖片

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

 

2、不要只使用網格設計

圖片

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

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

3、保持設計元素在網格內

圖片

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

圖片

 

4、不要忘記基線對齊

圖片

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

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

 

5、考慮使用8pt網格進行設計

圖片

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

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

最后

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


作者:Clippp

轉載請注明:學UI網》在UX/UI設計中使用網格系統(tǒng)的5個技巧

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


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


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



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

seo達人


圖片

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

我們將產品劃分為三個階段:

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

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

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

圖片

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

 

 

圖片

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

圖片

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

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

 那么品質生活是什么呢?

圖片

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

 

 

圖片

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

干凈明亮 

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

圖片

 

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

專業(yè) 

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

高效 

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

親和力 

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

慢生活… 

在對用戶的相關情感訴求結合業(yè)務進行了落地后,對效率類設計原則也進行了相應的升級。

 

 整體架構 

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

圖片

 柵格系統(tǒng) 

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

圖片

 文本原則  

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

圖片

 間距參數(shù)  

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

圖片

 圓角參數(shù)  

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

圖片

語意原則及動效等,并依據(jù)相關設計原則產出了組件庫。

 

 

圖片

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

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


作者:58UXD

轉載請注明:學UI網》如何通過設計語言手冊來傳遞品牌理念!

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


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


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



中后臺產品的產研協(xié)同提效調研

seo達人

一、目前有哪些提升設計與前端生產力的方案

1、D2C(Design To Code)

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

a. 設計資產類

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

圖片

b. 設計對接類

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

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

圖片

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

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

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

圖片

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

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

 

2、C2D(Code To Design)

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

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

圖片

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

圖片

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

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

 

 

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

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

圖片

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

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

圖片

答案就是「 C2D2C」的模式

 

1、C2D2C(Code To Design To Code)

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

圖片

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

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

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

圖片

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

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

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

 

2.、C2D2C 的市場化

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

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

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

圖片

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

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

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

 

 

最后

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

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

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


作者:程鑫

轉載請注明:學UI網》中后臺產品的產研協(xié)同提效調研

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


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


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



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

seo達人

圖片

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

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

 

設計師的定位和價值

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

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

圖片

 

 

一、講故事

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

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

 

1、起因

起因包含了

1.有哪些問題/機會

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

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

圖片

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

圖片

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

 

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

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

 

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

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

圖片

 

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

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

 

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

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

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

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

 

 

二、經過

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

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

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

圖片

策略1:透出品牌資質和曝光度:告知用戶我們有品牌授權的資質

策略2:給予用戶更多保障:給用戶產品質量的售后保障和檢測權利

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

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

 

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

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

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

 

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

 

 

三、結果

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

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

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

 

圖片

 

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

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

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

 

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

 

  

總結一下 

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


作者: 應駿

轉載請注明:學UI網》5000字,作品集中的推理部分該怎么寫!

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


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


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



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

seo達人

一、卡片式設計的定義

1、什么是卡片?

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

圖片

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

 

2、互聯(lián)網中的卡片式設計

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

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

圖片

 

 

二、卡片式設計價值

1、結構清晰

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

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

圖片

 

2、場景拓展

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

圖片

 

3、空間擴展

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

圖片

 

4、突出重點

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

圖片

 

5、兼容多端

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

圖片

 

6、易于操作

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

 

7、跳轉流暢

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

 

 

三、常見的卡片式設計樣式

1、四周留白

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

圖片

 

2、懸浮內容之上

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

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

圖片

 

3、通欄類型

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

圖片

 

 

四、卡片適用場景介紹

1、瀑布流

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

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

圖片

 

2、信息流

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

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

圖片

 

3、左/右滑動

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

圖片

 

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

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

圖片

 

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

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

圖片

 

6、部分頁面頭圖

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

圖片

 

 

五、卡片式設計原則及小技巧

1、一致性原則

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

圖片

 

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

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

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

圖片

 

3、避免過多卡片嵌套

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

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

圖片

 

4、合理利用橫向空間

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

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

圖片

 

5、降低縱向空間的浪費

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

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

圖片

 

6、長文表達不適合卡片

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

圖片

 

7、突出一個核心內容

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

 

六、結語

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

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

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

 

原文地址:能量眼球

作者:大漠飛鷹CYSJ

轉載請注明:學UI網》卡片式設計 | 掌握這些技法,快速提升界面效果!

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


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


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



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

seo達人


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

2023年平面設計趨勢概覽:

1、粘土風格

2、3D孟菲斯風格

3、簡潔風格

4、迷幻設計

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

6、70年代復古平面設計

7、簡化3D風格

8、抽象線條藝術人物

9、藝術襯線字體

10、彩虹色調色板

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

1、粘土風格(The Clay Look)

Example by Ramy Wafaa

2023年橡皮泥設計趨勢的關鍵要素

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

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

2023 年 3D 孟菲斯設計的關鍵要素

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

3、簡潔風格(The Clean Style)

2023 年清潔風格設計的關鍵要素

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

4、迷幻設計(Trippy Design)

2023 年 Trippy 設計趨勢的關鍵要素

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

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

2023年霓虹燈和抽象卡通貼紙趨勢的關鍵要素

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

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

2023 年 70 年代復古平面設計的關鍵要素

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

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

2023 年簡化 3D 設計的關鍵要素

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

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

2023年抽象線條藝術人物設計的關鍵要素

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

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

2023年藝術襯線字體趨勢的關鍵元素

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

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

2023年彩虹調色板顏色設計的關鍵元素

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

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

2023 年自然靈感設計趨勢的關鍵要素

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

寫在最后的話

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

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

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

圖源 Graphicmama網站| 版權歸原作者所有

-END-

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


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


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



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

seo達人


圖片

 

 

一、底部標簽欄主題化設計

1、底部標簽欄圖標主題

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

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

圖片

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

圖片

 

2、底部標簽欄背景層

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

圖片

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

圖片

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

圖片

 

 

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

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

圖片

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

圖片

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

圖片

 

 

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

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

 

1、圖標主題化

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

圖片

 

2、局部動效化表達

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

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

 

 

小結

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

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


作者:黑馬青年

轉載請注明:學UI網》UI 場景中常見的 3 個主題化區(qū)域

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


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


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



日歷

鏈接

個人資料

藍藍設計的小編 http://www.yvirxh.cn

存檔