首頁

中國老齡文教娛樂行業(yè)市場(chǎng)分析

資深UI設(shè)計(jì)者

伴隨國內(nèi)日益加深的老齡化人口結(jié)構(gòu),老齡產(chǎn)業(yè)也迎來了產(chǎn)業(yè)蓬勃發(fā)展期。本文通過分析在老齡文教娛樂領(lǐng)域布局的典型創(chuàng)業(yè)公司,深入其產(chǎn)品服務(wù)、運(yùn)營(yíng)體系,剖析商業(yè)模式與生態(tài)環(huán)境,從而明晰該領(lǐng)域行業(yè)動(dòng)向,為資本投資及商業(yè)運(yùn)營(yíng)提供結(jié)構(gòu)化的思維框架和研究體系。推薦相關(guān)行業(yè)的伙伴們閱讀交流。

在老齡產(chǎn)業(yè)的市場(chǎng)結(jié)構(gòu)中,已深耕多年的養(yǎng)老、護(hù)理、醫(yī)療企業(yè)通過重資產(chǎn)、重運(yùn)營(yíng)、重技術(shù)的模式逐步建立起自身的護(hù)城河。老年實(shí)體消費(fèi)領(lǐng)域,對(duì)于細(xì)分領(lǐng)域的適老化改造、升級(jí)以及針對(duì)老齡人口研制開發(fā)新品類都成為市場(chǎng)可見的切入途徑。對(duì)于一線流量平臺(tái)和入口,中老年網(wǎng)民被文字、圖片、音頻、短視頻及視頻內(nèi)容吸引成為其流量版圖中逐步深挖和精細(xì)運(yùn)營(yíng)的對(duì)象。被數(shù)字化洗禮的老齡人口也在悄然地塑造著為其服務(wù)的商業(yè)模式。

根據(jù)國家衛(wèi)健委公布的數(shù)據(jù),我國老齡人口的平均健康壽命在68歲,我國女性職工退休年齡在50歲,男性職工在60歲。當(dāng)人們退休之后,尚未到被疾病纏身而對(duì)自身生活能力及質(zhì)量產(chǎn)生明顯影響的情形下,對(duì)于其自身文化娛樂乃至精神生活的追求,是這部分活力老人生活的重要構(gòu)成。正是基于這個(gè)人口結(jié)構(gòu)及市場(chǎng)需求基礎(chǔ),眾多新興創(chuàng)業(yè)公司選擇文教娛樂方向試圖快速切入老齡產(chǎn)業(yè),提供相應(yīng)的產(chǎn)品和服務(wù),并逐步探索可持續(xù)盈利的商業(yè)化方向。

一、老齡文教娛樂賽道的輕商業(yè)模式

老齡文教娛樂行業(yè)吸引了眾多創(chuàng)業(yè)公司進(jìn)入,從線上的老年教育/老年大學(xué)、提供相冊(cè)制作、音樂、(短)視頻的線上工具及衍生的網(wǎng)絡(luò)社區(qū)、線下旅游/旅居/旅拍、廣場(chǎng)舞等各類老年興趣的線上化平臺(tái),在文教娛樂行業(yè)各類創(chuàng)業(yè)公司正逐步滲透老年生活場(chǎng)景,企圖通過相對(duì)較輕的商業(yè)模式實(shí)現(xiàn)可持續(xù)盈利。

而傳統(tǒng)或狹義層面理解的養(yǎng)老產(chǎn)業(yè),離不開護(hù)理的介入和依托地產(chǎn)資源形成的床位供給,這是養(yǎng)老產(chǎn)業(yè)的剛需場(chǎng)景。而護(hù)理的介入程度輕類似于家政生活服務(wù),重則可延伸至準(zhǔn)醫(yī)療級(jí)別。床位的供給在社區(qū)或機(jī)構(gòu)養(yǎng)老的場(chǎng)景中,均需要政府端資源和自身投入資金支持。

從而與醫(yī)、護(hù)、養(yǎng)結(jié)合的各類養(yǎng)老機(jī)構(gòu)選擇重資產(chǎn)重運(yùn)營(yíng)的商業(yè)路徑,通過擴(kuò)大自身規(guī)模以求迅速占領(lǐng)市場(chǎng)份額及攤薄固定成本,以期獲得穩(wěn)定收益率水平。保險(xiǎn)及地產(chǎn)企業(yè)的養(yǎng)老布局就很好的說明了此模式更加青睞的資源類型。

同時(shí)老齡實(shí)體消費(fèi)產(chǎn)業(yè),針對(duì)老年人衣食住行的生活需求及健康管理的養(yǎng)護(hù)需求研發(fā)具有針對(duì)性和適應(yīng)性的適老產(chǎn)品,其本身的產(chǎn)品設(shè)計(jì)與生產(chǎn)需要符合制造業(yè)的一般性規(guī)律,對(duì)于生產(chǎn)供應(yīng)鏈的掌控程度直接影響產(chǎn)品本身的成本結(jié)構(gòu)。

并且需要在銷售渠道上更有效率的觸達(dá)老年目標(biāo)客戶,以支撐其特定品類產(chǎn)品具備足夠的市場(chǎng)需求空間。本身在消費(fèi)品制造業(yè)有優(yōu)勢(shì)的企業(yè)通過對(duì)老齡化市場(chǎng)的細(xì)分布局,或是更加順理成章的選擇。

因而眾多創(chuàng)業(yè)企業(yè)面對(duì)此般市場(chǎng)結(jié)構(gòu),不得不考慮自身的資源稟賦優(yōu)勢(shì)來選擇適宜的創(chuàng)業(yè)方向。而文教娛樂行業(yè)因其豐富的業(yè)態(tài)為創(chuàng)業(yè)企業(yè)提供了充足的選擇空間,互聯(lián)網(wǎng)基因較強(qiáng)的企業(yè)也更加適宜將老年文教娛樂產(chǎn)業(yè)在線上再造或與線下融合。

在沒有大資金進(jìn)入的背景下,文教娛樂行業(yè)完全可以通過自身提供內(nèi)容的稀缺性在市場(chǎng)站穩(wěn)腳跟,與輕資產(chǎn)的商業(yè)模式契合程度更高。

二、市場(chǎng)結(jié)構(gòu)與公司布局

在老齡文教娛樂市場(chǎng),無論提供什么產(chǎn)品及服務(wù),實(shí)質(zhì)上都可以切分為“工具”、“內(nèi)容”、“社交”這樣幾個(gè)屬性緯度去分析,由此不同公司布局構(gòu)成了基本的市場(chǎng)結(jié)構(gòu)。而內(nèi)容是連接工具和社交的中心與基礎(chǔ),也是正式產(chǎn)生交易前的蓄水池。這個(gè)蓄水池里承載的是用戶信任感、品牌影響力、場(chǎng)景塑造及商業(yè)變現(xiàn)的出口。

1. 工具

老年人生活的線下現(xiàn)實(shí)場(chǎng)景中,更多的是由實(shí)際的產(chǎn)品來滿足。喜歡釣魚有垂釣的工具,喜歡音樂有種類繁多的樂器選擇,而老年人生活的線上場(chǎng)景中,如何為其線上生活提供適宜的工具就成為撬動(dòng)老年人市場(chǎng)的一個(gè)支點(diǎn)。

從市場(chǎng)中創(chuàng)業(yè)公司發(fā)展歷程來看,通過為老年群體提供線上生活工具的創(chuàng)業(yè)公司不出所料的嘗到了甜頭。照片分享編輯工具的提供者美篇,因發(fā)現(xiàn)老年群體在社交平臺(tái)無法分享超出九張照片的功能限制,針對(duì)這一需求開發(fā)了一次性多照片分享工具,從而擊中老年群體需求,迅速積累了中老年線上客戶與流量,在其2.3億注冊(cè)用戶量中,老年群體占比達(dá)45%以上。

在此基礎(chǔ)上,從工具應(yīng)用向以攝影為基礎(chǔ)的UGC內(nèi)容社區(qū)演變,實(shí)現(xiàn)了工具到內(nèi)容社區(qū)的躍遷,為商業(yè)變現(xiàn)提供了更多切實(shí)可行的場(chǎng)景。除了美篇,通過工具到內(nèi)容這一商業(yè)運(yùn)作路徑的創(chuàng)業(yè)公司屢見不鮮,小年糕基于微信生態(tài)的音樂相冊(cè)制作工具,高峰時(shí)實(shí)現(xiàn)了近1億的月活客戶,并開始通過課程付費(fèi)及為B端提供“老年人回憶錄”及“家庭紀(jì)錄片”的內(nèi)容產(chǎn)品設(shè)計(jì)摸索商業(yè)變現(xiàn)方式。彩視也是通過短視頻的制作剪輯工具向基于視頻、直播關(guān)聯(lián)的興趣內(nèi)容社群發(fā)展,進(jìn)而實(shí)現(xiàn)了盈利。

2. 內(nèi)容

為老年人提供具有價(jià)值性和稀缺性的內(nèi)容本身就是文教娛樂行業(yè)的立身之本。如上分析的美篇、小年糕、彩視在發(fā)展早期提供的相冊(cè)、短視頻工具背后實(shí)質(zhì)是中老年群體對(duì)攝影、視頻作品的熱愛和分享需求,因而向內(nèi)容方向(無論是UGC還是PGC)轉(zhuǎn)變也是順理成章。

從此分析視角出發(fā),可以看到,基于廣場(chǎng)舞內(nèi)容的糖豆,基于舞臺(tái)走秀內(nèi)容的花樣百姓,基于中老年聚會(huì)的晶彩人生,基于戲劇戲曲內(nèi)容的梨園行,基于聲樂內(nèi)容的人人講、樂唱族、樂齡圈,都是意圖通過為中老年群體提供具有差異化的內(nèi)容產(chǎn)品來構(gòu)建自身商業(yè)版圖的基礎(chǔ)。

3. 社交

基于內(nèi)容的沉淀和發(fā)展,社群化和社區(qū)化,甚至從線上走向線下都是理所當(dāng)然的發(fā)展方向,主要原因是社交場(chǎng)景是逐步切入老年群體真實(shí)生活場(chǎng)景的核心環(huán)節(jié)和突破口,從而提供更多可能的消費(fèi)支付場(chǎng)景。基于內(nèi)容及社交產(chǎn)品積累的信任感也將會(huì)助推衍生產(chǎn)品和服務(wù)消費(fèi)的可能性。

從老年群體特性出發(fā),消解生活孤獨(dú)感的內(nèi)在訴求都會(huì)將各種內(nèi)容的消費(fèi)作為參與社交的一種方式。由于這種供給方與需求方的雙重契合,各創(chuàng)業(yè)公司都將社交場(chǎng)景的構(gòu)建作為其不可忽視的一部分,但由于各公司不同生命周期的發(fā)展側(cè)重點(diǎn)不一樣,對(duì)于社交場(chǎng)景打造的重視程度也不盡然相同。

根據(jù)工具、內(nèi)容、社交的成分和構(gòu)成比例不同,各創(chuàng)業(yè)公司呈現(xiàn)出了不同的商業(yè)發(fā)展策略和戰(zhàn)略布局。有偏向?qū)I(yè)工具而社交屬性較弱的,如自樂班,也有社交屬性重而工具屬性弱,如各類老年大學(xué)(美好盛年、快樂50、紅松學(xué)堂),但無論如何內(nèi)容的稀缺性是連接工具和社交的中心,也是商業(yè)模式得以持續(xù)的基礎(chǔ)。

三、產(chǎn)品體系設(shè)計(jì)與運(yùn)營(yíng)策略

對(duì)于市場(chǎng)現(xiàn)有的創(chuàng)業(yè)公司提供的產(chǎn)品體系設(shè)計(jì)的考察,可一窺其商業(yè)運(yùn)作思路及支撐其體系的運(yùn)營(yíng)策略的偏好。

1. 運(yùn)營(yíng)平臺(tái)

在運(yùn)營(yíng)平臺(tái)的選擇上,有些公司如美篇、人人講、彩視、紅松學(xué)堂都將獨(dú)立開發(fā)的APP作為主要的運(yùn)營(yíng)平臺(tái),而有些公司如小年糕、樂齡圈、樂唱族、花樣百姓、美好盛年都基于微信生態(tài)的小程序建立運(yùn)營(yíng)生態(tài)。這與主要流量的獲取入口、用戶數(shù)量、公司發(fā)展階段、產(chǎn)品的社交屬性程度、商業(yè)模式、是否獲得投資方資金支持都有一定關(guān)系。

以美篇和小年糕為例,兩家公司提供的產(chǎn)品內(nèi)容具有很高的相似性。起初都作為圖片相冊(cè)/視頻的制作編輯工具,通過用戶的分享裂變積累了早期流量,后期均轉(zhuǎn)向UGC內(nèi)容社區(qū)的搭建。

但兩家公司的選擇卻不盡相同,美篇選擇以獨(dú)立開發(fā)的APP為運(yùn)營(yíng)重心,而小年糕雖也開發(fā)了自身的APP,但其運(yùn)營(yíng)效果和活躍程度不如在微信端的應(yīng)用,主要的運(yùn)營(yíng)重心放在微信小程序及相關(guān)微信生態(tài)上。造成這種差異的原因,筆者認(rèn)為一是由于在流量積累階段對(duì)于微信生態(tài)的依賴程度不同;二是由于美篇目前的產(chǎn)品發(fā)展方向和運(yùn)營(yíng)策略更加側(cè)重于社交平臺(tái)的打造,這就決定了其必需開發(fā)獨(dú)立的APP才能實(shí)現(xiàn)更加豐富多元的功能設(shè)計(jì)。

而小年糕用戶的社群構(gòu)建相對(duì)偏弱,側(cè)重于內(nèi)容傳播分享,所以重播分享的路徑越短效益越佳,基于微信生態(tài)的流量獲取必然導(dǎo)致運(yùn)營(yíng)重心偏好于此;三是在商業(yè)變現(xiàn)模式上,美篇設(shè)計(jì)了會(huì)員支付體系,而小年糕還沒有會(huì)員體系正在逐步試探課程付費(fèi)模式,而支持會(huì)員體系的運(yùn)營(yíng)發(fā)展顯然APP可以提供更加穩(wěn)定感和信賴感的線上商業(yè)環(huán)境。

再看百姓網(wǎng)旗下的中老年時(shí)尚生活方式平臺(tái)花樣百姓,布局了APP和微信小程序端,但在APP端活躍程度和運(yùn)營(yíng)效果同樣不理想,邏輯上來看,其提供的舞臺(tái)走秀培訓(xùn)、美妝時(shí)尚內(nèi)容都屬于高客單價(jià)產(chǎn)品,切入的是老年群體中支付能力和教育程度都相對(duì)較高的高端客戶群體,并且重線下的旅拍社交場(chǎng)景的運(yùn)營(yíng)打都會(huì)指向APP端的運(yùn)營(yíng)選擇。

局限于目前花樣百姓只針對(duì)高端老年客戶人群的切入,其用戶體量的壯大相對(duì)需要一個(gè)較長(zhǎng)的市場(chǎng)培育周期,在用戶體量達(dá)到一定規(guī)模后,可關(guān)注其在APP端的運(yùn)營(yíng)體系建設(shè)。

所以通過判斷各類創(chuàng)業(yè)公司的運(yùn)營(yíng)平臺(tái)的側(cè)重點(diǎn)完全可以梳理其業(yè)務(wù)爆發(fā)的歷史起點(diǎn)、內(nèi)容體系的差異性以及公司未來的戰(zhàn)略走向。

2. 內(nèi)容選擇

上文已經(jīng)分析了內(nèi)容的稀缺性將會(huì)直接影響公司商業(yè)意圖的實(shí)現(xiàn)。關(guān)于內(nèi)容體系打造的差異性可以從如下幾個(gè)緯度去理解。如果是老年大學(xué)定位的公司,將會(huì)傾向選擇全內(nèi)容布局的業(yè)務(wù)模式,畢竟內(nèi)容布局的越多,可以覆蓋和吸引到的不同興趣群體的老年人數(shù)量也就越多。

而從工具端切入的公司,在內(nèi)容體系的打造上優(yōu)先與工具相關(guān)的內(nèi)容,在客戶量積累到一定程度,并且隨著多樣性的需求顯現(xiàn)之后逐步拓展到其他類型的內(nèi)容上。而垂直興趣社群的公司則專注于其垂直類型的內(nèi)容體系的豐富和完善上。

但這類模式需要保證的是其垂直內(nèi)容足以支持其業(yè)務(wù)發(fā)展和商業(yè)利潤(rùn),如不能提供足夠支撐,則后期迫于經(jīng)營(yíng)壓力也有較大可能性會(huì)去拓展其他內(nèi)容體系的建設(shè)。

3. 業(yè)態(tài)組合

在同一內(nèi)容體系下,依據(jù)產(chǎn)品的形態(tài)可以劃分為文字、圖片、音頻、短視頻、視頻、直播等不同的業(yè)態(tài)。該領(lǐng)域的創(chuàng)業(yè)公司也會(huì)根據(jù)自身的資源稟賦及商業(yè)布局選擇合適的業(yè)態(tài)組合。

文字非常適合在流量入口端作為吸引老年群體的導(dǎo)流誘餌,但作為主要的內(nèi)容體系,文字顯然對(duì)于老年群體的參與負(fù)擔(dān)過重并且互動(dòng)參與性不強(qiáng),類似于年輕人使用的知乎豆瓣的文字內(nèi)容社區(qū)在老年群體身上產(chǎn)生的效果就會(huì)大打折扣。

圖片及短視頻業(yè)態(tài)更加適合于UGC內(nèi)容社區(qū)的建設(shè),一是來源于這代老年群體對(duì)于攝影拍攝的熱愛,二是圖片及短視頻非常適合在各類微信群及其他社群的分享,三是智能手機(jī)在老年群體的普及率的提升使內(nèi)容產(chǎn)生的效率更高。視頻及直播業(yè)態(tài)非常適合UGC土壤中孕育KOL及完全的PGC內(nèi)容輸出。

例如,彩視同樣與小年糕有著音樂相冊(cè)及短視頻的內(nèi)容體系,但彩視的產(chǎn)品結(jié)構(gòu)中直播占據(jù)了很重要的業(yè)務(wù)板塊,這是與小年糕的重要差異,也是彩視自身獨(dú)特的市場(chǎng)定位,從而在同質(zhì)化的內(nèi)容供給中篩選出對(duì)于視頻直播感興趣的老年群體,從而獲得增量流量。

4. 工具內(nèi)容社交結(jié)構(gòu)比例

從這一角度切入分析,可見不同類型的公司的商業(yè)戰(zhàn)略布局和盈利構(gòu)想。內(nèi)容體系的精雕細(xì)琢最終指向的是基于免費(fèi)內(nèi)容的引流和優(yōu)質(zhì)內(nèi)容的付費(fèi)。社群體系和社交場(chǎng)景的構(gòu)建最終指向的是各類支付場(chǎng)景的聚合再造、信任體系沉淀后所獲得的用戶黏性以及支付意愿提升

。在內(nèi)容體系逐步完善并且內(nèi)容付費(fèi)增長(zhǎng)達(dá)到天花板之后,尋求社交突破的需求就會(huì)自然而然產(chǎn)生。如據(jù)相關(guān)媒體報(bào)道,美篇正在實(shí)驗(yàn)開發(fā)其老年交友社交類產(chǎn)品。

內(nèi)容和社交環(huán)節(jié)均可產(chǎn)生付費(fèi)的場(chǎng)景,但這并不意味著工具只能作為引流的通道。足夠?qū)I(yè)性的垂直類工具,仍可讓老年群體產(chǎn)生付費(fèi)的意愿。

例如成立于2015年的創(chuàng)業(yè)公司自樂班,提供電子音樂創(chuàng)作工具,可提供將用戶的電子樂器與app連接,從而拓展音色,包含100余種樂器樂色,打造虛擬樂器,其獲得了超過15萬的注冊(cè)用戶使用,其中老年群體的用戶比例近70%。未來基于專業(yè)的深度使用客戶,產(chǎn)生工具的收費(fèi)模式也是可以期待和選擇的方向之一。

5. 商業(yè)變現(xiàn)路徑

現(xiàn)有老年群體的文教娛樂行業(yè)的商業(yè)變現(xiàn)和盈利模式,主要基于:內(nèi)容付費(fèi)、廣告、電商、會(huì)員制費(fèi)用、線下活動(dòng)衍生、直播提成、加盟費(fèi)等,如下?lián)袢∫恍┐硇怨镜挠肋M(jìn)行對(duì)比分析。

6. 運(yùn)營(yíng)策略差異

排除產(chǎn)品差異所產(chǎn)生的運(yùn)營(yíng)的差異,不同類型公司對(duì)于如何提高線上存量的留存率和活躍度也會(huì)產(chǎn)生細(xì)微的差異,這是需要深入到具體的產(chǎn)品設(shè)計(jì)中才能發(fā)現(xiàn)的細(xì)節(jié)。

舉例來說,一個(gè)是內(nèi)容的分享路徑設(shè)計(jì),有的公司在其短視頻內(nèi)容中會(huì)嵌入明顯的微信端的分享按鈕,這無疑會(huì)引導(dǎo)用戶進(jìn)行主動(dòng)的傳播分享,提高裂變發(fā)生的概率。一個(gè)是用戶活躍度的運(yùn)營(yíng),基于APP的產(chǎn)品可以主動(dòng)向目標(biāo)用戶推送Push,而沒有APP端的公司可能在觸達(dá)用戶的路徑設(shè)計(jì)上需要考慮更多的方案。而有的公司會(huì)在APP中主動(dòng)為新注冊(cè)用戶設(shè)計(jì)虛擬的粉絲和贊賞,通過類似方式提高用戶的活躍程度,減少流失率。因而更加精細(xì)化的運(yùn)營(yíng)體系實(shí)際也成為各家公司提高運(yùn)營(yíng)效率和用戶滿意度的必然選擇。

四、線上與線下的流量與場(chǎng)景

老年流量的獲取是兵家必爭(zhēng)之地,線上與線下流量又會(huì)依據(jù)不同的商業(yè)設(shè)計(jì)形成互相轉(zhuǎn)化。線下流量的獲取依托各類真實(shí)生活場(chǎng)景,如菜市場(chǎng)、老年大學(xué)、KTV聚會(huì)場(chǎng)所、廣場(chǎng)舞等場(chǎng)景,這部分流量可以直接在線下產(chǎn)生支付,但如果創(chuàng)業(yè)公司的商業(yè)設(shè)計(jì)希望將在線下獲取的分散的流量匯攏至線上,并在線上產(chǎn)生流量池的新的聚合反應(yīng),那么從線下流量到線上流量的轉(zhuǎn)化路徑上需要更多的精細(xì)運(yùn)營(yíng),以減少在增加的轉(zhuǎn)化路徑上丟失流量的可能性。

同時(shí),老年流量也可直接在線上生成。根據(jù)數(shù)據(jù)顯示,截至2020年12月,我國網(wǎng)民規(guī)模達(dá)到9.89億,60歲以上老年網(wǎng)民占10.3%,智能手機(jī)的使用在老年群體逐步滲透。在資訊端如微信、今日頭條、騰訊新聞,視頻端如抖音快手西瓜視頻,購物端如拼多多,都積聚了可觀數(shù)量的中老年流量,成為各類創(chuàng)業(yè)公司企圖轉(zhuǎn)化為私域流量的基礎(chǔ)。與線下流量向線上流量的轉(zhuǎn)化類似,獲取的線上流量也會(huì)因?yàn)樵噲D在線下搭建更多支付的場(chǎng)景而向線下流量轉(zhuǎn)化并落地。

因而中老年的流量入口并不局限于線上或線下,并且在流量的轉(zhuǎn)化路徑上將不可避免的產(chǎn)生融合。線下流量往線上流量的轉(zhuǎn)化需要在運(yùn)營(yíng)層面提供更多的便利性和吸引性,線上流量往線下流量的轉(zhuǎn)化需要在運(yùn)營(yíng)層面提供更多的信任感和場(chǎng)景化。而針對(duì)老年流量的運(yùn)營(yíng)其最終目標(biāo)便是要在各個(gè)可能的環(huán)節(jié)和觸點(diǎn)產(chǎn)生更多的有效數(shù)據(jù)反饋和交易支付,數(shù)據(jù)反饋?zhàn)鳛樯虡I(yè)分析的中間變量,最終也是為了產(chǎn)生更多的交易支付。

關(guān)于老年人的支付能力和支付意愿向來是整個(gè)老齡產(chǎn)業(yè)的核心關(guān)注點(diǎn),因?yàn)檎麄€(gè)產(chǎn)業(yè)鏈的利潤(rùn)產(chǎn)生均最終來源于老年群體支付的體量。因而對(duì)于流量的運(yùn)營(yíng),最后的落腳點(diǎn)便是要提高老年流量的支付意愿,整個(gè)產(chǎn)品體系的設(shè)計(jì)和運(yùn)營(yíng)策略都應(yīng)時(shí)刻關(guān)注能否最大限度的調(diào)動(dòng)老年人的支付情緒和意愿。

除上文提到的線上和線下作為流量入口和相互轉(zhuǎn)化的路徑。在實(shí)際的商業(yè)服務(wù)中,線上和線下在為老年群體服務(wù)的過程中還是存在諸多的場(chǎng)景差別需要不同的解決方案,拿熱門的老年大學(xué)和廣場(chǎng)舞作為案例分析。

1. 老年大學(xué)

線下的老年大學(xué)實(shí)際是一個(gè)相對(duì)比較成熟的業(yè)務(wù)形態(tài),在線下老年大學(xué)中存在兩種運(yùn)營(yíng)主體,一個(gè)是作為政府公共服務(wù)職能提供的老年大學(xué);一個(gè)是市場(chǎng)主體參與的可以提供更豐富及優(yōu)質(zhì)課程內(nèi)容的老年大學(xué)。線上老年大學(xué),實(shí)際也存在著三種基本的業(yè)務(wù)形態(tài):一是線下老年大學(xué)在線上的數(shù)字化重構(gòu);二是純粹的線上老年大學(xué);三是線上老年大學(xué)伴隨結(jié)合向線下拓展。

需要注意的是,這三種形態(tài)并不是非此即彼的業(yè)務(wù)選擇,而是根據(jù)不同公司的生命發(fā)展周期和商業(yè)路徑的選擇。

線上老年大學(xué)和線下老年大學(xué)的首要差別在于場(chǎng)景的深度和關(guān)聯(lián)度,這是線下老年大學(xué)較于線上老年大學(xué)的優(yōu)勢(shì)。而線上老年大學(xué)的優(yōu)勢(shì)在于低邊際成本和覆蓋面的廣度。因而線下老年大學(xué)深耕的是每個(gè)用戶學(xué)員的付費(fèi)可能性的深度挖掘,線上老年大學(xué)的優(yōu)先選項(xiàng)是低成本的用戶普及度。

快樂50是一家深耕于北京市場(chǎng)的以線下老年大學(xué)為重心的公司,目前在北京有10余個(gè)校區(qū)。由于線下的真實(shí)場(chǎng)景,受益于接觸的頻次、接觸的深度、對(duì)于用戶需求挖掘的更加直接的溝通、面對(duì)面的信任感,老年群體也會(huì)更加易于接受其提供的老年游學(xué)服務(wù)作為老年大學(xué)課程服務(wù)的延伸,這正是由于線下場(chǎng)景的深度和實(shí)際生活的關(guān)聯(lián)度提供了更加有效率的轉(zhuǎn)化路徑。

而線上老年大學(xué)在開展同等業(yè)務(wù)中,就會(huì)存在著轉(zhuǎn)化路徑延長(zhǎng)的問題,首先需要將線上流量引流到線下,而在線下沒有穩(wěn)定場(chǎng)景提供的情形下,如果沒法在較短的時(shí)間周期內(nèi)將轉(zhuǎn)化至線下的用戶實(shí)現(xiàn)付費(fèi)轉(zhuǎn)化,那么未來轉(zhuǎn)化的成本或?qū)⒏?,轉(zhuǎn)化率更低。而線上老年大學(xué)在向線下轉(zhuǎn)化遇阻的情況下,更加理性的選擇就是通過提供更加豐富的課程體系,以更低的邊際成本,完成線上付費(fèi)用戶的轉(zhuǎn)化,從而突破地理位置的局限性。

對(duì)于有資金支持的創(chuàng)業(yè)公司當(dāng)然可以選擇魚和熊掌兼得,融合線上與線下老年大學(xué)。而對(duì)于沒有足夠資本去鋪設(shè)校區(qū)和獲取當(dāng)?shù)赝诵堇先速Y源的公司來說,選擇線上的切入口將會(huì)是更加適宜的選擇。這本身也是一家公司資源稟賦和基因的問題。線下老年大學(xué)試圖迅速擴(kuò)大自身市場(chǎng)份額的方式也會(huì)去選擇加盟經(jīng)營(yíng)的模式,其商業(yè)的實(shí)質(zhì)在于通過輸出課程管理體系和營(yíng)銷運(yùn)營(yíng)體系的方式來轉(zhuǎn)嫁擴(kuò)張的校區(qū)成本。

值得一提的是,老齡教育產(chǎn)業(yè)的實(shí)質(zhì)屬性還是在于“娛樂+社交”。雖然很多提供老年教育的產(chǎn)品,涵蓋了聲樂、舞蹈、書法、棋牌、攝影、繪畫、運(yùn)動(dòng)等諸多門類的教育內(nèi)容,但老齡教育與K12教育的顯著區(qū)別在于其沒有內(nèi)在的選拔性和競(jìng)爭(zhēng)性,因而老齡教育的娛樂和社交屬性提供會(huì)顯得更加重要,寓教于樂才是其產(chǎn)業(yè)本質(zhì)。

2. 廣場(chǎng)舞

糖豆發(fā)展初期通過線下的廣場(chǎng)舞團(tuán)隊(duì)領(lǐng)隊(duì)資源的獲取,成為了鏈接廣場(chǎng)舞人群的擁有最大用戶量的公司,同時(shí)其逐步構(gòu)建了廣場(chǎng)舞教學(xué)為基本內(nèi)容的整合線上與線下的O2O綜合平臺(tái),其注冊(cè)用戶2億余,月活達(dá)2000萬。

糖豆的市場(chǎng)優(yōu)勢(shì)地位建立在其線上和線下完全融合的基礎(chǔ)之上。這種融合表現(xiàn)在其線下的舞蹈團(tuán)隊(duì)在線上完成了同質(zhì)社交關(guān)系的數(shù)字化,線下的場(chǎng)景通過其工具屬性的鏈接在線上實(shí)現(xiàn)了同等復(fù)制,同時(shí)線上的社交場(chǎng)景又促使了自身更大范圍的鏈接,從而幾乎實(shí)現(xiàn)了廣場(chǎng)舞人群的高度覆蓋。因而在糖豆身上很難看出其他老年教育平臺(tái)類似的轉(zhuǎn)化路徑,如將線上的課程付費(fèi)用戶轉(zhuǎn)化為線下的游學(xué)客戶,糖豆本身對(duì)用戶在線上與線下都是可以同時(shí)觸達(dá)的。

正因?yàn)榉e累了如此巨大的優(yōu)勢(shì),糖豆本身發(fā)展的天花板已經(jīng)不在于廣場(chǎng)舞人群的滲透了,而在于依托老年舞蹈提供的用戶流量和場(chǎng)景能否建立起老年娛樂生活的綜合平臺(tái)。其本身線下具備的巨大優(yōu)勢(shì),將能更加低成本的承接各種場(chǎng)景的創(chuàng)造,而在線上糖豆除了APP運(yùn)營(yíng)的精心打磨,在微信小程序也建立起服務(wù)矩陣:糖豆視頻+糖豆愛生活+糖豆每日一笑+糖豆健康+糖豆優(yōu)品,意圖更加廣泛的觸達(dá)老年用戶群體。值得注意的是,“糖豆廣場(chǎng)舞”更名為“糖豆”,也可見其未來發(fā)展的市場(chǎng)地位和戰(zhàn)略路徑。

五、商業(yè)模式梳理

老齡文教娛樂行業(yè)的產(chǎn)業(yè)鏈相對(duì)較短。相對(duì)于重資產(chǎn)構(gòu)建的醫(yī)護(hù)養(yǎng)機(jī)構(gòu),特別是保險(xiǎn)系參與的,其中紛亂的資金鏈能夠梳理清楚就實(shí)屬不易。而各類生產(chǎn)制造消費(fèi)品的類的養(yǎng)老產(chǎn)品,需要對(duì)行業(yè)的供應(yīng)鏈體系了如指掌,對(duì)于一些高端制造的智能養(yǎng)老設(shè)備其供應(yīng)鏈體系就更加復(fù)雜,存在集成商和分級(jí)的供應(yīng)商。

其中老年教育類主要是基于教學(xué)內(nèi)容生產(chǎn),教學(xué)內(nèi)容生產(chǎn)這背后涉及的更多的是師資資源,核心在于更加有效的組織內(nèi)容的優(yōu)質(zhì)輸出。在PGC領(lǐng)域需要有能夠在老年群體產(chǎn)生影響力的師資,而在UGC領(lǐng)域需要能夠創(chuàng)建出培育KOL的運(yùn)營(yíng)土壤,形成良性的各層級(jí)互動(dòng)的內(nèi)容平臺(tái)。其產(chǎn)業(yè)鏈可以簡(jiǎn)單歸納為:內(nèi)容生產(chǎn)者—內(nèi)容管理者—老年消費(fèi)者。

對(duì)于旅游游學(xué)聚會(huì)類,產(chǎn)業(yè)鏈中主要是增加了第三方B端供應(yīng)商和專業(yè)服務(wù)機(jī)構(gòu)的介入,這樣對(duì)于盈利的分配就產(chǎn)生了更多的方式和可能性。

從商業(yè)模式的大方向來說,一個(gè)是將老年群體流量作為自身商業(yè)運(yùn)營(yíng)變現(xiàn)的基礎(chǔ);一個(gè)是將流量作為對(duì)外輸出的流量池,嫁接B端成為其流量供應(yīng)商。

選擇何種商業(yè)模式的方向,取決于公司為老齡人口流量提供的產(chǎn)品與服務(wù)其背后的支付場(chǎng)景能否實(shí)現(xiàn)有效的轉(zhuǎn)化,如果可以有效轉(zhuǎn)化,則從自身實(shí)現(xiàn)商業(yè)運(yùn)營(yíng)變現(xiàn)為其優(yōu)先選擇。如果這種支付轉(zhuǎn)化不能有效實(shí)現(xiàn)或者轉(zhuǎn)化成本較高,則持續(xù)的流量運(yùn)營(yíng)成本將會(huì)對(duì)公司產(chǎn)生較大的財(cái)務(wù)經(jīng)營(yíng)壓力,選擇成為流量供應(yīng)商便是一個(gè)適宜的選擇。公司在準(zhǔn)確評(píng)價(jià)自身市場(chǎng)地位及發(fā)展階段的基礎(chǔ)上,將會(huì)靈活選擇其商業(yè)模式方向。

六、行業(yè)未來發(fā)展變量

行業(yè)未來發(fā)展方向是一個(gè)由政府導(dǎo)向、市場(chǎng)供給方、市場(chǎng)需求方共同參與塑造的結(jié)果,即使參考國外成熟的老齡產(chǎn)業(yè)體系也并不一定能在本土的商業(yè)環(huán)境中形成完全確定的答案,但筆者認(rèn)為有這樣幾個(gè)變量會(huì)產(chǎn)生影響:

1. 現(xiàn)有市場(chǎng)解決方案的空隙

市場(chǎng)向老年群體提供的精神文化產(chǎn)品會(huì)向多層次更加細(xì)分的方向邁進(jìn)。這是由我國老年群體的復(fù)雜的結(jié)構(gòu)基本面決定的,由于區(qū)域的差異、收入的差異、受教育程度的差異、不同年齡階段的需求差異、城鄉(xiāng)的差異等,都會(huì)造成老年群體需求的多層次性,隨著現(xiàn)有市場(chǎng)參與者對(duì)用戶畫像越加精確的勾勒,會(huì)逐步將成熟的產(chǎn)品服務(wù)及運(yùn)營(yíng)體系拓展到尚未被服務(wù)到的人群。

無論是向高支付能力人群提供更加定制化的產(chǎn)品服務(wù),還是向下沉市場(chǎng)提供更加普惠的產(chǎn)品服務(wù),無疑都會(huì)是現(xiàn)有公司在遇到增長(zhǎng)瓶頸后會(huì)采取的發(fā)展策略。

2. 未來老年群體的興趣變遷

實(shí)際上人們往往會(huì)產(chǎn)生一種誤區(qū),就是認(rèn)為進(jìn)入老年之后都會(huì)產(chǎn)生特定的興趣需求,比如廣場(chǎng)舞、攝影,但是其實(shí)這可能是特定年代人群的特定興趣愛好,只是恰好他們進(jìn)入了老年。

如果認(rèn)為這是一個(gè)確定不變的市場(chǎng),可能在老年群體發(fā)生結(jié)構(gòu)改變的時(shí)候發(fā)生戰(zhàn)略誤判。實(shí)際上,這是未來老文教娛樂市場(chǎng)的一個(gè)較大變量,需要提前對(duì)各個(gè)年齡階段特別是5-10年后進(jìn)入老年階段人群進(jìn)行深入的研究分析,這是一個(gè)中長(zhǎng)期的市場(chǎng)變量。

3. 技術(shù)環(huán)境的變化

現(xiàn)有諸多建立在智能手機(jī)端的商業(yè)平臺(tái)也是依托了移動(dòng)端技術(shù)的成熟,未來應(yīng)時(shí)刻關(guān)注科技技術(shù)領(lǐng)域的發(fā)展,技術(shù)的迭代完全可以重新塑造用戶的鏈接方式和商業(yè)場(chǎng)景,而鏈接方式和商業(yè)場(chǎng)景的變更將會(huì)引發(fā)用戶流量的重構(gòu),現(xiàn)在也會(huì)聽到老年人線上流量獲取的難度越來越大,頭部公司沉淀了大部分的流量,新進(jìn)入公司獲取流量的難度和成本也愈發(fā)高昂,在某種意義上確實(shí)如此,但是如果技術(shù)所支撐的商業(yè)場(chǎng)景發(fā)生實(shí)質(zhì)性改變的情況下,這會(huì)是流量發(fā)生變遷和重構(gòu)的一個(gè)根本性變量。

文章來源:人人都是產(chǎn)品經(jīng)理   作者:AgeLink

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)



按鈕設(shè)計(jì)的知識(shí)點(diǎn)分析

資深UI設(shè)計(jì)者

雖然直覺認(rèn)為按鈕是一種很簡(jiǎn)單的控件,但在梳理按鈕相關(guān)知識(shí)點(diǎn)的過程中,發(fā)現(xiàn)小小控件其中包含了很多容易被忽略的細(xì)節(jié)。

按鈕幾乎是每一個(gè)頁面不可或缺的元素,對(duì)于按鈕的認(rèn)識(shí)基本停留在視覺層面,一個(gè)圓角矩形搭配一句文案就能拼湊成一個(gè)最基礎(chǔ)的按鈕。視覺是一個(gè)觀察的切入點(diǎn),但僅停留在視覺層面還是不夠的,比設(shè)計(jì)表現(xiàn)更重要的往往是背后支持設(shè)計(jì)的理由。本文中的所有案例均來自線上產(chǎn)品,觀點(diǎn)僅是個(gè)人粗淺的理解,有疑問的地方歡迎大家討論指正。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

按鈕的定義

1. 按鈕的來源

數(shù)字世界是現(xiàn)實(shí)世界的一種映射,許多數(shù)字概念,都可以在現(xiàn)實(shí)世界中找到原型。按鈕就是很生動(dòng)的一個(gè)案例。在視覺表現(xiàn)上貼近現(xiàn)實(shí)生活中真實(shí)物體的外觀,擬合用戶心智模型,降低用戶的認(rèn)知和理解成本。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

2. 按鈕的定義

如果從視覺形式上看,按鈕的組成很簡(jiǎn)單,一個(gè)矩形容器加上文字或圖標(biāo)即可組合成一個(gè)常見的按鈕,但是僅僅從視覺層面定義按鈕是不嚴(yán)謹(jǐn)?shù)?。按鈕是一種重要的控件類型,而控件是圖形用戶界面(GUI)的主要構(gòu)成模塊。想要深入理解按鈕,就必須要求我們首先理解什么是控件以及控件的分類。

3. 控件分類和介紹

定義:控件是用戶和產(chǎn)品間進(jìn)行交流的屏幕對(duì)象,是圖形用戶界面(GUI)的主要構(gòu)成模塊。

分類:根據(jù)用戶目標(biāo),可將控件分為 4 大類。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

每一類控件下又有更多具體細(xì)分。所有界面中常見的具體控件都可以根據(jù)其功能找到所屬的類別。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

4. 按鈕的分類

在以上各個(gè)細(xì)分控件中,我將部分控件歸入按鈕類別:

命令控件下的:傳統(tǒng)按鈕、圖標(biāo)按鈕、文字按鈕

選擇控件下的:開關(guān)按鈕、單選按鈕、組合圖標(biāo)按鈕、狀態(tài)切換按鈕(開關(guān)和復(fù)選框樣式比較固定,為了方便討論,姑且不算在按鈕范疇之內(nèi))

因此如果以按鈕為主體,以功能屬性為分類條件,可將按鈕分為:命令型按鈕和選擇型按鈕

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

命令型按鈕與選擇型按鈕的區(qū)別

不論從功能維度、交互維度、視覺維度上看,這兩類按鈕各自都有不同的特點(diǎn)。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

選擇型按鈕非瞬時(shí)狀態(tài)有:“選中”和“未選中”兩種互斥狀態(tài)??梢园堰x擇型按鈕理解為某種狀態(tài)的確認(rèn)和展示。

命令型按鈕的非瞬時(shí)狀態(tài)只有一種:正常狀態(tài),當(dāng)用戶點(diǎn)擊命令型按鈕后,命令即可下達(dá)??梢园衙钚桶粹o理解為一個(gè)動(dòng)作,點(diǎn)擊按鈕代表著立即執(zhí)行這個(gè)動(dòng)作。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

常見按鈕的拆解

介紹完了命令型按鈕和選擇型按鈕在功能、交互、視覺層面的區(qū)別點(diǎn)后,我們?cè)賮砜纯磳?shí)際工作中常見和常用的按鈕類型。

1. 傳統(tǒng)按鈕(有容器兜底的按鈕)的來源:

GUI 中“按鈕”的概念來源于真實(shí)世界中的按鈕。真實(shí)的按鈕具有一個(gè)非常顯而易見的特點(diǎn):擁有一個(gè)適合點(diǎn)擊按壓的受力面,這個(gè)受力面就是可點(diǎn)擊感的來源。試想一下,假設(shè)一個(gè)按鈕只有針尖般大小,且不說你是否能認(rèn)出這是按鈕,即便你知道這是按鈕,你會(huì)有按下的欲望嗎?真實(shí)情況下,擺在人們面前的按鈕面積越大,想按壓的欲望就越強(qiáng)。因此傳統(tǒng)按鈕的最顯著特點(diǎn)就是擁有一個(gè)承載內(nèi)容的“受力面”,也就是承載文字或者圖標(biāo)的“容器”。受限于早期的顯像技術(shù),以及與真實(shí)世界的對(duì)照,這種“容器”通常一般都是矩形,后期漸漸衍生出更加柔和的圓角。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

風(fēng)格發(fā)展:

在相當(dāng)長(zhǎng)的一段時(shí)間里按鈕都有三維凸起的特征,進(jìn)一步鞏固了按鈕的可點(diǎn)擊感。不過進(jìn)入移動(dòng)時(shí)代后,這種流行趨勢(shì)發(fā)生了改變,按鈕的三維印記被不斷移除。用戶已經(jīng)建立起了成熟的心智模型,即便按鈕在視覺上越來越“平”,也不妨礙點(diǎn)擊行為的發(fā)生。結(jié)合多年的使用經(jīng)驗(yàn),用戶已經(jīng)將矩形形狀這一特征和按鈕牢固地聯(lián)系了起來。即便現(xiàn)在的按鈕大多都是扁平化,用戶也能一眼就辨認(rèn)出按鈕屬性。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

2. 傳統(tǒng)按鈕的拆解:

常見按鈕一般是由容器和內(nèi)容組成。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

容器層面

  • 容器形狀:

移動(dòng)端比較主流的按鈕形狀有:矩形、圓角矩形、膠囊形和圓形 4 種。一般,在人們的認(rèn)知里,圓角越大傳遞的感覺越圓潤(rùn)親切。其實(shí)形狀本身并沒有好壞區(qū)別,與單純視覺偏好相比,元素的統(tǒng)一性更加重要。一旦選定了某一種按鈕形狀,就需要保證所有場(chǎng)景中出現(xiàn)的按鈕都盡量看上去整體統(tǒng)一。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

  • 容器尺寸:

視覺上,按鈕越大,越吸引用戶注意,決定按鈕大小的主要依據(jù)是按鈕在頁面中的優(yōu)先級(jí)。而一個(gè)產(chǎn)品涉及到頁面眾多,如果不同的頁面元素之間缺乏統(tǒng)一的調(diào)度規(guī)則,就會(huì)出現(xiàn)按鈕尺寸過多,沒有規(guī)律,細(xì)節(jié)混亂,效率低下的情況。為了既能適應(yīng)不同的場(chǎng)景,又能保持產(chǎn)品級(jí)的控件統(tǒng)一,一般要給按鈕尺寸設(shè)定幾個(gè)檔位以適配不同頁面需求。排除個(gè)別特殊頁面,一般把按鈕設(shè)置為 5 個(gè)優(yōu)先級(jí)梯度檔位就足以滿足設(shè)計(jì)需求。

我們可以從優(yōu)先級(jí)從高到低的順序,將按鈕分為:特大、大、正常、小、特小 5 個(gè)尺寸檔位。

下面展示最常使用的三個(gè)檔位,大、正常、小檔位。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

  • 容器顏色:

按鈕的大小、形狀、顏色三個(gè)維度中,人眼是對(duì)顏色信息最為敏感的。在一個(gè)頁面中,突出一個(gè)元素的方式有多種,其中最簡(jiǎn)潔有效的方式就是用顏色進(jìn)行突出。顏色包含了色相、飽和度和明度三種屬性,改變顏色的不同屬性,都會(huì)對(duì)按鈕的表意產(chǎn)生影響。同時(shí),不同的顏色代表著不同的含義,配色時(shí)需要加以注意。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

  • 容器樣式:

容器除了基本的尺寸、形狀、顏色之外,還有多種樣式。

上文介紹的容器是強(qiáng)面性的,此外,容器還有弱面性、線性等樣式。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

  • 容器細(xì)節(jié):

雖然現(xiàn)階段的按鈕越來越扁平,但在扁平的趨勢(shì)下,依舊有發(fā)揮設(shè)計(jì)創(chuàng)意的空間。

顏色漸變、投影、動(dòng)效都是常用的設(shè)計(jì)手法。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

內(nèi)容層面

聊完了“容器”部分,再來看看容器承載的“內(nèi)容”又有哪些細(xì)節(jié)點(diǎn)。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

3. 圖標(biāo)按鈕的介紹

并非所有按鈕都需要容器,尤其當(dāng)按鈕密度較大時(shí),去掉容器只保留內(nèi)容,可以更好地提高空間利用率,簡(jiǎn)約視覺。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

4. 文字按鈕的介紹

比圖標(biāo)按鈕更輕量的按鈕類型是文字按鈕,以文字的形式展示,和界面融合度更高,當(dāng)用戶有需要時(shí)才會(huì)注意到文字按鈕的可點(diǎn)擊性。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

5. 傳統(tǒng)按鈕與圖標(biāo)按鈕的組合

這種組合形式相當(dāng)常見,將多個(gè)功能整合在一個(gè)區(qū)域內(nèi),如底部工具欄(ToolBar)或者頂部導(dǎo)航欄(Navigation Bar)。不同按鈕承載著不同功能,側(cè)重越明顯,越利于用戶快速識(shí)別并決策。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

特殊按鈕類型

上面介紹的是常見的按鈕形式,除了以上按鈕,有一些按鈕形式專門適用于某些特殊場(chǎng)景。

如懸浮按鈕、膠囊按鈕等。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

按鈕的優(yōu)先級(jí)

一個(gè)頁面往往有多個(gè)按鈕,不同按鈕承載不同功能,功能之間有相同或者不同的優(yōu)先級(jí),因此按鈕之間也存在這相同或者不同的視覺優(yōu)先級(jí)。

我們分兩類情況來討論:相同優(yōu)先級(jí)的按鈕和不同優(yōu)先級(jí)的按鈕組合。

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

按鈕樣式小結(jié)

上文羅列了實(shí)際工作中常用到的一些按鈕樣式,最重要的步驟是分清按鈕主次,使用不同的樣式進(jìn)行搭配。

優(yōu)先級(jí)強(qiáng)到弱:

強(qiáng)面性按鈕、弱面性按鈕/線性按鈕、圖標(biāo)按鈕、文字按鈕

從6個(gè)層面,系統(tǒng)分析按鈕設(shè)計(jì)的知識(shí)點(diǎn)

碎碎念:

本文中出現(xiàn)的部分名詞,比如“弱面性”、“容器”等,只是為了便于交流和統(tǒng)一指向,并沒有具體權(quán)威出處。文中提及的按鈕類型均來源于線上產(chǎn)品,樣本有限,適用場(chǎng)景相對(duì)固定,還有很多樣式?jīng)]有一一遍歷。但掌握了如何選擇樣式的原理,就可以根據(jù)日后具體需求做出合理方案。文中出現(xiàn)的數(shù)據(jù)都是經(jīng)驗(yàn)型數(shù)據(jù),如按鈕按下狀態(tài)是在正常狀態(tài)下添加 10%純黑的遮罩,文字字號(hào)大小等,這些都是建議型數(shù)據(jù),可以根據(jù)具體情況靈活調(diào)整。

文章來源:站酷   作者:設(shè)計(jì)師doo


分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)



時(shí)間顯示的設(shè)計(jì)細(xì)節(jié)

ui設(shè)計(jì)分享達(dá)人

背景

“時(shí)間”作為人機(jī)交互界面中經(jīng)常出現(xiàn)的元素,本質(zhì)上都是為了去傳遞時(shí)間維度的信息。但是我們平時(shí)在使用一些互聯(lián)網(wǎng)產(chǎn)品時(shí)會(huì)發(fā)現(xiàn),關(guān)于“時(shí)間”的顯示狀態(tài)或形式在不同場(chǎng)景、不同頁面里往往是不太一樣的,這是出于怎樣的考慮呢?今天我們就來聊一聊,如何在產(chǎn)品設(shè)計(jì)中把握“時(shí)間”顯示的訣竅,讓其在頁面中發(fā)揮最大的作用。

“時(shí)間”元素的分類

按照“時(shí)間”元素在頁面中的出現(xiàn)場(chǎng)景和所起到的作用,可以大致歸為以下幾類:

A. 事件的關(guān)鍵構(gòu)成要素

時(shí)間作為描述整個(gè)事件的重要組成部分,缺失后會(huì)對(duì)原本所要傳達(dá)的內(nèi)容產(chǎn)生嚴(yán)重的影響,進(jìn)而影響用戶的使用預(yù)期和結(jié)果,比方說用戶可能不能以一個(gè)較低的價(jià)格完成商品購買,或錯(cuò)過了產(chǎn)品發(fā)布會(huì)的時(shí)間。

從3個(gè)方面,幫你掌握時(shí)間顯示的設(shè)計(jì)細(xì)節(jié)

B. 行為的時(shí)間標(biāo)記

指用戶本人作為行為主體或行為的接收對(duì)象,在某一動(dòng)作發(fā)生后為其所打上的時(shí)間標(biāo)記,比方說“我”購買商品下單的時(shí)間或收到一封郵件的時(shí)間。

從3個(gè)方面,幫你掌握時(shí)間顯示的設(shè)計(jì)細(xì)節(jié)

C. 內(nèi)容的附屬信息

用戶在使用產(chǎn)品進(jìn)行內(nèi)容消費(fèi)時(shí),時(shí)間作為該條內(nèi)容的附屬信息,起到補(bǔ)充說明的作用,比方說一條短視頻或新聞的發(fā)布時(shí)間。

從3個(gè)方面,幫你掌握時(shí)間顯示的設(shè)計(jì)細(xì)節(jié)

在上面的案例中,我們會(huì)發(fā)現(xiàn)“時(shí)間”在對(duì)應(yīng)場(chǎng)景里所發(fā)揮的作用不同,用戶在使用產(chǎn)品時(shí)往往對(duì)時(shí)間存在不一樣的關(guān)注程度。因此我們?cè)谧鲰撁嬖O(shè)計(jì)時(shí),要根據(jù)具體場(chǎng)景和用戶訴求判斷“時(shí)間”元素的重要性和優(yōu)先級(jí),通常情況下:時(shí)間作為事件的關(guān)鍵構(gòu)成要素>行為的時(shí)間標(biāo)記>內(nèi)容的附屬信息,之后再思考用什么樣的設(shè)計(jì)形式去展示來達(dá)到我們的目標(biāo)。

“時(shí)間”的呈現(xiàn)方式和運(yùn)用技巧

在討論“時(shí)間”元素的設(shè)計(jì)之前,我們先共識(shí)一些有關(guān)時(shí)間的理解和概念。時(shí)間可以劃分為“時(shí)間點(diǎn)”和“時(shí)間段”兩個(gè)維度,類似我們高中物理時(shí)學(xué)過的“時(shí)刻”和”時(shí)間間隔“的概念。

拿開會(huì)舉例子:“下午 4:30 會(huì)議開始”、“下午 6:00 會(huì)議結(jié)束”描述的是事件開始、結(jié)束的時(shí)間點(diǎn),而“整個(gè)會(huì)議持續(xù) 1.5 小時(shí)”、“會(huì)議時(shí)間為下午 4:30-6:00”描述的是事件過程的時(shí)間段;但是,我們?cè)跁?huì)議開始時(shí)也可以這樣講“會(huì)議將在 1.5 小時(shí)后結(jié)束”。

通過上面的例子我們可以發(fā)下,同樣是描述一件事情,運(yùn)用不同的時(shí)間點(diǎn)、時(shí)間段的方式去表達(dá),意思一樣但卻傳遞出不一樣的情感,并且兩者存在如下的“換算”關(guān)系:

1)時(shí)間段加上定語會(huì)變成時(shí)間點(diǎn)(但同樣是時(shí)間點(diǎn),“下午 6:00”是絕對(duì)時(shí)間,而“1.5 小時(shí)后”是相對(duì)時(shí)間,剛好對(duì)應(yīng)到我們?cè)O(shè)計(jì)時(shí)兩種時(shí)間戳類型);

2)兩個(gè)時(shí)間點(diǎn)之間則表示時(shí)間段。

所以,我們?cè)谄綍r(shí)表達(dá)或設(shè)計(jì)時(shí),要先想清楚用“時(shí)間”是想側(cè)重表達(dá)某一事件、動(dòng)作發(fā)生的即刻時(shí)間節(jié)點(diǎn)?還是想描述其所持續(xù)的時(shí)間過程?之后我們?cè)籴槍?duì)不同語境去選取合適的文案和呈現(xiàn)方式。

從3個(gè)方面,幫你掌握時(shí)間顯示的設(shè)計(jì)細(xì)節(jié)

時(shí)間的呈現(xiàn)方式離不開:時(shí)間戳類型、時(shí)間顯示格式、時(shí)間顆粒度。其中,時(shí)間顆粒度指的是描述時(shí)間的最小單位,往往顆粒度越細(xì),給用戶傳達(dá)的確定感越強(qiáng)(如轉(zhuǎn)賬時(shí)間是 12 日 15:15:20),對(duì)用戶的激勵(lì)作用越明顯(如距搶購結(jié)束僅剩 00 時(shí) 01 分 23.6 秒)。

1. 絕對(duì)時(shí)間戳

絕對(duì)時(shí)間可理解為事物發(fā)生時(shí)的確切時(shí)間,由具體日期(年、月、日)和時(shí)間(時(shí)、分、秒)組成。使用絕對(duì)時(shí)間戳的優(yōu)勢(shì)是信息傳達(dá)精準(zhǔn),顯得正式,給人確定感和安全感,同時(shí)排布規(guī)整,便于形成認(rèn)知習(xí)慣;但缺點(diǎn)是內(nèi)容顯示過長(zhǎng)不利于閱讀,并且占用空間較大。

從3個(gè)方面,幫你掌握時(shí)間顯示的設(shè)計(jì)細(xì)節(jié)

在時(shí)間顯示格式的選擇上,為了避免混淆,推薦使用文字格式或“-”分隔符來分隔日期,而“/”分隔符在不同國家有不同的展示順序習(xí)慣,容易造成誤解,盡量少用。

從3個(gè)方面,幫你掌握時(shí)間顯示的設(shè)計(jì)細(xì)節(jié)

時(shí)間顆粒度的選擇依情況而定,一般場(chǎng)景總結(jié)如下:

從3個(gè)方面,幫你掌握時(shí)間顯示的設(shè)計(jì)細(xì)節(jié)

2. 相對(duì)時(shí)間戳

相對(duì)時(shí)間在產(chǎn)品設(shè)計(jì)領(lǐng)域通常是指內(nèi)容生產(chǎn)、到達(dá)、或狀態(tài)發(fā)生改變時(shí),距當(dāng)前時(shí)間點(diǎn)的時(shí)間差值,多用于 push 通知、信息流產(chǎn)品,側(cè)重強(qiáng)調(diào)內(nèi)容的時(shí)效性;而“倒計(jì)時(shí)”也算相對(duì)時(shí)間的一種,側(cè)重營(yíng)造時(shí)間的緊迫感。使用相對(duì)時(shí)間戳的優(yōu)勢(shì)是用戶辨識(shí)、理解成本低,不用通過計(jì)算來判斷時(shí)間過去或還剩下多久;缺點(diǎn)是不夠精確、正式,并很難衡量?jī)蓚€(gè)時(shí)間點(diǎn)的臨近性。

從3個(gè)方面,幫你掌握時(shí)間顯示的設(shè)計(jì)細(xì)節(jié)

在使用相對(duì)時(shí)間時(shí),要注意格式友好。時(shí)間單位可隨著時(shí)間的推移自動(dòng)改變;數(shù)字不要過多,盡量取整;并且可設(shè)置其與絕對(duì)時(shí)間轉(zhuǎn)換的臨界點(diǎn)。

從3個(gè)方面,幫你掌握時(shí)間顯示的設(shè)計(jì)細(xì)節(jié)

總結(jié)

在設(shè)計(jì)界面中的“時(shí)間”元素時(shí),要遵循場(chǎng)景貼合、便于閱讀理解的總體原則;之后根據(jù)場(chǎng)景和目標(biāo),再選取合適的“時(shí)間”呈現(xiàn)方式(包括時(shí)間戳類型、時(shí)間顯示格式、時(shí)間顆粒度)。

當(dāng)時(shí)間作為“A.事件的關(guān)鍵構(gòu)成要素”時(shí)

一般情況下使用絕對(duì)時(shí)間,并且要看是為了強(qiáng)調(diào)某一關(guān)鍵時(shí)間節(jié)點(diǎn),還是側(cè)重表達(dá)整個(gè)持續(xù)過程。此外,選用關(guān)聯(lián)場(chǎng)景的文案或者運(yùn)用倒計(jì)時(shí)(相對(duì)時(shí)間)的形式,可一定程度上促進(jìn)用戶更加集中注意力,提升對(duì)信息的關(guān)注度,并達(dá)到特殊的激勵(lì)作用和轉(zhuǎn)化效果。

當(dāng)時(shí)間作為“B.行為的時(shí)間標(biāo)記”時(shí)

該場(chǎng)景通常是為了追求確定感,通過提供精準(zhǔn)的時(shí)間和日期便于用戶定位到過去或?qū)淼哪硞€(gè)時(shí)間點(diǎn)(段)去查找、回顧相應(yīng)內(nèi)容,因此大多數(shù)采用絕對(duì)時(shí)間,時(shí)間顆粒度依具體情況而定。

當(dāng)時(shí)間作為“C.內(nèi)容的附屬信息”時(shí)

如果所設(shè)計(jì)的產(chǎn)品供給內(nèi)容的更新速度快,用戶活躍度高,并且此時(shí)內(nèi)容的時(shí)間信息準(zhǔn)確性不那么重要反而更側(cè)重于內(nèi)容的時(shí)效性,那么通常會(huì)使用相對(duì)時(shí)間。部分信息流產(chǎn)品(比如新聞資訊類、社區(qū)類)會(huì)在列表頁使用相對(duì)時(shí)間,在詳情頁使用絕對(duì)時(shí)間,時(shí)間顆粒度也是依情況而定;并且會(huì)隨著時(shí)間推移,在某一時(shí)間節(jié)點(diǎn)前把相對(duì)時(shí)間轉(zhuǎn)換為絕對(duì)時(shí)間。

文章來源:優(yōu)設(shè)   作者:VMIC UED



分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)



設(shè)計(jì)思考和生活

資深UI設(shè)計(jì)者

APP載入記憶,從哪里退出,就從哪里載入,減輕對(duì)特殊群體的打擾


不知道大家有沒有這種苦惱,不管啥app,一打開就是彈出各種活動(dòng)彈窗和廣告,卡到想摔手機(jī)(以下分析,高端機(jī)大佬請(qǐng)忽略)。







分析思考


雖然產(chǎn)品為了促銷和增加用戶粘性,經(jīng)常性的開展各種活動(dòng),來誘使用戶參與,但是,還是有很大一部分用戶不會(huì)參與,甚至看都不想看一下就點(diǎn)擊關(guān)閉,下面用部分用戶舉例說明。


(1)將軟件當(dāng)作純工具的用戶:這部分用戶使用你的軟件,完完全全是因?yàn)槟愕能浖軡M足他的純需求

他不想?yún)⑴c任何活動(dòng),你只要給他解決問題就可以了。比如“酷狗”,A用戶可能在一個(gè)悠閑的下午,心情到位了,一如往常的想聽聽他之前收藏的歌曲迎合一下自己的小情緒,而他一打開酷狗,開屏頁是5S廣告,首頁又彈出活動(dòng)廣告,如果誤點(diǎn)了,說不定還要跳到哪位小姐姐的直播間去(酷狗的流氓引流手段,本人誤點(diǎn)了很多次,次奧,人家用戶壓根就不喜歡看直播,你的后臺(tái)不清楚?),而這個(gè)直播的加載過程非??D和費(fèi)時(shí)間,而你也不想看直播,再使用手勢(shì)返回操作,結(jié)果多劃了一次,又退出產(chǎn)品了,需要重新進(jìn),這個(gè)時(shí)候你是不是要裂開了?好心情都變壞了,甚至一邊臥槽一邊想當(dāng)場(chǎng)摔了舊雞換新雞或者卸載軟件?。ㄌ貏e是用了1年以上的安卓雞)



(2)特殊群體用戶:包含非適齡用戶(年齡過大或者過?。峭日Z言的用戶(溝通有代溝,三觀不同步)。

例如“全民K歌”,現(xiàn)在推出一個(gè)活動(dòng),要為祖國慶生pk,那么在推送的時(shí)候,是不是要考慮推送的人群,像那種只聽唱搖滾嘻哈的,你認(rèn)為他們會(huì)參加?就算他們參加,作品會(huì)不會(huì)跑題?會(huì)不會(huì)因?yàn)橐粋€(gè)作品不符合節(jié)日氣氛而讓不明真相的網(wǎng)友噴的狗血淋頭?既然這樣,那你推送給他的意義就不再了,說不定適得其反。(有的朋友可能就要開杠了:全員推送,可以最大程度的喚起用戶參與,就算不參與,也可以形成告知的效應(yīng),但我上面那條說了,部分用戶手機(jī)卡頓,用戶只想簡(jiǎn)簡(jiǎn)單單的用你的軟件解決需求,你如果不考慮他們這部分人群的使用感受,就要天天挨噴)


問題總結(jié):


遇到以上的問題,用戶要么忍讓,要么就是換軟件,如果因?yàn)檫@些原因流失了用戶,非常不值得(可能你會(huì)說,天下烏鴉一樣黑,換了軟件也逃不出這個(gè)套路,是的,市場(chǎng)的軟件運(yùn)營(yíng)起來都是這個(gè)套路,搞錢!搞錢!搞好多錢!但是我相信,一款為用戶著想的產(chǎn)品,最后不一定能賺大錢,但用戶一定會(huì)感激產(chǎn)品的細(xì)節(jié),為他流暢的解決了生活所需!比如微信干凈的的聊天界面)。還有值得注意的一點(diǎn),這部分用戶如果能照顧好,將會(huì)成為你最忠實(shí)的用戶,就拿將軟件當(dāng)純工具的用戶舉例吧,ta很懶,你的軟件是他的工具,只要你功能還在并且好用,他基本不會(huì)去換軟件,即使別的軟件擺在眼前,他都不會(huì)去下載(除非給他錢,相信我,錢到手了,他發(fā)現(xiàn)軟件不好用或者用不慣,他會(huì)麻溜卸載),因?yàn)閷?duì)他來說,用哪個(gè)軟件,都只是工具而已,他用慣了你的,又覺得你的軟件用起來很流暢,所以會(huì)一直用,只要留著他,他就可能隨時(shí)在你軟件上面消費(fèi)。



細(xì)節(jié)思考,解決問題


上面的問題,其實(shí)就是同一個(gè)軟件,需要以不同的方式去對(duì)待不同的用戶的問題。


現(xiàn)在互聯(lián)網(wǎng)各種ai技術(shù)均已成熟,且大體量的產(chǎn)品基本都有自己的后臺(tái)去分析用戶的操作習(xí)慣和路徑,形成用戶畫像或用戶的心智模型數(shù)據(jù),我們掌握著這種數(shù)據(jù),可以去使用以下方式對(duì)待小眾的特殊群體。(拒絕殺熟)


(1)精準(zhǔn)投送,減輕對(duì)特殊用戶群的打擾:比如那個(gè)在“全面K歌”里面只聽唱嘻哈搖滾的用戶,通過后臺(tái)分析,構(gòu)建屬于他的用戶畫像,然后下次推送“為祖國慶生“的活動(dòng)時(shí),則可以不必為他強(qiáng)制彈窗推送,留一個(gè)icon入口足夠了,減少他的操作,給他足夠流暢的體驗(yàn)。


(2)載入記憶,從哪里退出就從哪里進(jìn)入:用戶都很懶,特別是設(shè)備不好的用戶,每次打開應(yīng)用,載入時(shí)很卡頓,甚至在打開的過程中會(huì)放棄,那么我們可以基于用戶畫像,讓那些特殊群體上次從哪里退出,就從哪里進(jìn)入,(這里我解釋一下為什么是對(duì)特殊群體才這樣,因?yàn)槿绻歼@樣,首頁不是沒人看了嘛,活動(dòng)還要不要做?產(chǎn)品還要不要吸金?打工人還要不要發(fā)工資?)而特殊群體,,,真的,他不想消費(fèi),你把刀架到他脖子上,他都不會(huì)消費(fèi)。




結(jié)尾


我們做產(chǎn)品,要服務(wù)大眾,也要為公司產(chǎn)生收益,但這不是我們放棄特殊用戶的理由,微信之所以成功,是因?yàn)樗嬲龅搅巳窠钥捎茫奶旖缑婧?jiǎn)潔,純粹的為人民服務(wù)的好工具。甚至每一次小功能的更新都能上熱搜,我們的產(chǎn)品比不得微信,但是我們服務(wù)用戶的態(tài)度可以像它看齊。愿在坐的各位都能做出屬于自己的“微信“


文章來源:站酷   作者:一劍生死 


分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)


響應(yīng)式設(shè)計(jì)應(yīng)該怎樣做?

資深UI設(shè)計(jì)者

響應(yīng)式設(shè)計(jì)是一種頁面設(shè)計(jì)布局,可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進(jìn)行相對(duì)應(yīng)的布局。

什么是響應(yīng)式設(shè)計(jì)?

響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)的理念是:頁面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成,包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad,我們的頁面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等,以適應(yīng)不同設(shè)備;換句話說,頁面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。響應(yīng)式網(wǎng)頁設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這樣,我們就可以不必為不斷到來的新設(shè)備做專門的版本設(shè)計(jì)和開發(fā)了。

簡(jiǎn)單來說就是:響應(yīng)式設(shè)計(jì)是一種頁面設(shè)計(jì)布局,可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進(jìn)行相對(duì)應(yīng)的布局。


(來自百度百科)


自適應(yīng)與響應(yīng)式布局的區(qū)別?

實(shí)現(xiàn)頁面設(shè)計(jì)布局的響應(yīng)效果,除了響應(yīng)式布局,自適應(yīng)也是常用的一種技術(shù)。兩者時(shí)常被混淆。


我們來概括一下它們之間的區(qū)別:



自適應(yīng)

為不同的設(shè)備提供不同的網(wǎng)頁,比如專門提供一個(gè)mobile版本,或者iPhone / iPad版本。這樣做固然保證了效果,但是比較麻煩,同時(shí)要維護(hù)好幾個(gè)版本,而且如果一個(gè)網(wǎng)站有多個(gè)portal(入口),會(huì)大大增加架構(gòu)設(shè)計(jì)的復(fù)雜度。


響應(yīng)式

響應(yīng)式網(wǎng)頁設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。不必為不斷到來的新設(shè)備做專門的版本設(shè)計(jì)和開發(fā)了。



響應(yīng)式布局的優(yōu)勢(shì)?

提高用戶體驗(yàn)

通過合理的設(shè)計(jì)方案配合規(guī)范的技術(shù)實(shí)現(xiàn),使同一個(gè)頁面在不同設(shè)備,提高屏幕利用率,最大化操作效率,在不同分辨率屏幕上都能有最佳的用戶體驗(yàn)。


降低開發(fā)成本

響應(yīng)式的設(shè)計(jì)只需開發(fā)一套代碼,同時(shí)兼容多種尺寸的設(shè)備。不用同時(shí)維護(hù)好幾個(gè)版本內(nèi)容,只需維護(hù)一套代碼即可。


降低設(shè)計(jì)成本

設(shè)計(jì)師需和前端程序員緊密溝通,確定響應(yīng)幾個(gè)寬度區(qū)間,以及對(duì)應(yīng)的數(shù)值區(qū)間。根據(jù)響應(yīng)式制定了一套能在多終端適配的設(shè)計(jì)方案,橫向拉通頁面以及容器布局的適配規(guī)則,一套設(shè)計(jì)規(guī)則能夠高效適配多終端。


提高業(yè)務(wù)迭代效率

業(yè)務(wù)方在迭代過程中,會(huì)考慮多終端不同的使用場(chǎng)景、業(yè)務(wù)特性,響應(yīng)式能夠基于同一個(gè)客戶端、后臺(tái)和運(yùn)營(yíng)系統(tǒng),一次運(yùn)營(yíng)多端同步生效,保障業(yè)務(wù)發(fā)展效率最大化。



響應(yīng)式布局的設(shè)計(jì)要點(diǎn)?

設(shè)計(jì)師在做響應(yīng)式設(shè)計(jì)時(shí),不僅僅是單純的縮放頁面容器大小就可以了,需要有規(guī)律的進(jìn)行設(shè)計(jì),這樣能夠降低開發(fā)人員的開發(fā)成本,提高效率。并且需要在設(shè)計(jì)時(shí),關(guān)注設(shè)計(jì)的界面,是否符合用戶的操作體驗(yàn),交互是否流暢,能不能在各個(gè)不同的終端給予用戶最佳的使用體驗(yàn)。


響應(yīng)式與柵格系統(tǒng)搭配使用

響應(yīng)式設(shè)計(jì)的前提有兩點(diǎn):頁面布局具有規(guī)律性;元素寬高可用百分比代替固定數(shù)值,而這兩點(diǎn)正是柵格系統(tǒng)本身就具有的典型特點(diǎn),所以利用柵格系統(tǒng)進(jìn)行響應(yīng)式的設(shè)計(jì)高效快捷,搭配使用能夠提高設(shè)計(jì)與開發(fā)效率。


Ant Design為例:采用 24 柵格體系。以上下布局的結(jié)構(gòu)為例,對(duì)內(nèi)容區(qū)域進(jìn)行 24 柵格的劃分設(shè)置,如下圖所示。為頁面中柵格的 Gutter 設(shè)定了定值,即瀏覽器在一定范圍擴(kuò)大或縮小,柵格的 Column 寬度會(huì)隨之?dāng)U大或縮小,但 Gutter 的寬度值固定不變。



什么是斷點(diǎn)?

響應(yīng)式頁面中的容器大小是動(dòng)態(tài)的,我們可以提供給開發(fā)在不同的頁面寬度區(qū)間,對(duì)應(yīng)的布局應(yīng)該是怎么樣的。而這些區(qū)間的臨界點(diǎn),就是“斷點(diǎn)”。


如何確定斷點(diǎn)?

進(jìn)行響應(yīng)式設(shè)計(jì)之前,與產(chǎn)品、前端開發(fā)人員共同商討出自身產(chǎn)品的常用設(shè)備類型及尺寸,敲定產(chǎn)品所需要覆蓋的設(shè)備類型,制定出幾個(gè)適合自身產(chǎn)品的斷點(diǎn)。


以Ant Design 為例:https://ant.design/components/layout-cn/  感興趣的可以了解一下



為什么頁面寬度區(qū)間以最小的寬度設(shè)計(jì)?

設(shè)計(jì)師在進(jìn)行設(shè)計(jì)的時(shí)候,考慮極限值,以最小的寬度來進(jìn)行設(shè)計(jì),能夠避免內(nèi)容展示不下的尷尬場(chǎng)景。


響應(yīng)式布局的響應(yīng)策略方案?

Ant Design 兩種較為典型的適配方案:


一、左右布局

常被用于左右布局的設(shè)計(jì)方案中,常見的做法是將左邊的導(dǎo)航欄固定,對(duì)右邊的工作區(qū)域進(jìn)行動(dòng)態(tài)縮放。



二、上下布局

常被用于上下布局的設(shè)計(jì)方案中,做法是對(duì)兩邊留白區(qū)域進(jìn)行最小值的定義,當(dāng)留白區(qū)域到達(dá)限定值之后再對(duì)中間的主內(nèi)容區(qū)域進(jìn)行動(dòng)態(tài)縮放。



這兩種非常簡(jiǎn)單的適配的思路,一套完美的適配方案需要設(shè)計(jì)師根據(jù)交互、體驗(yàn)、以及判斷頁面內(nèi)容的層級(jí)等來進(jìn)行設(shè)計(jì)。


三、內(nèi)容增減

內(nèi)容增減:部分模塊在不同的內(nèi)容會(huì)有顯示和隱藏的狀態(tài),網(wǎng)頁端的內(nèi)容在大屏幕上展示的內(nèi)容,在小屏幕場(chǎng)景中部分會(huì)被隱藏掉。


如下圖:大屏幕中banner區(qū)域展示的推薦列表,在小屏幕中被隱藏。



四、布局調(diào)整

布局調(diào)整。主要是模塊的排列和順序發(fā)生變化,常見的就是內(nèi)容的布局發(fā)生改變、模塊一行的列數(shù)發(fā)生改變。


如下圖:大屏與小屏幕中的banner的排列布局方式不同。



響應(yīng)式設(shè)計(jì)如何交付?

設(shè)計(jì)界面需要符合前端開發(fā)人員編程的方法和需求,所以在設(shè)計(jì)過程中,需要與開發(fā)人員緊密溝通,并且輸出對(duì)應(yīng)的設(shè)計(jì)頁面,作出標(biāo)注,并且與開發(fā)人員溝通確定響應(yīng)策略,而不是依靠口頭傳達(dá)。



在一些特殊的情況下,響應(yīng)式的背景切圖會(huì)和普通頁面的背景切法不一樣,盡可能與前端開發(fā)人員溝通清楚需要導(dǎo)出的文件。


總結(jié)

響應(yīng)式設(shè)計(jì)是一種源自技術(shù)的概念,需要設(shè)計(jì)師與開發(fā)人員緊密溝通,共同配合完成。


在寫本文之前,參考借鑒了很多文章,更加深入了解了響應(yīng)式設(shè)計(jì)的設(shè)計(jì)原理,以上內(nèi)容,是對(duì)于響應(yīng)式設(shè)計(jì)學(xué)習(xí)的一些復(fù)盤及心得,希望對(duì)大家有所幫助,如有不同意見,歡迎指正!




文章來源:站酷   作者:船長(zhǎng)的成長(zhǎng)日記

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)


運(yùn)營(yíng)設(shè)計(jì)中的視覺動(dòng)線

資深UI設(shè)計(jì)者

我們的作品信息的傳遞效率高嗎?
什么樣的設(shè)計(jì)是清晰有效的?
想要搞清楚這些問題,首先你得了解視覺動(dòng)線這個(gè)概念。


本文3200字,主要分為三個(gè)部分,閱讀時(shí)間約15分鐘。



—————   

      動(dòng)線


動(dòng)線一詞最早是源自建筑與室內(nèi)設(shè)計(jì)領(lǐng)域。指的是人在某個(gè)空間內(nèi)的移動(dòng)軌跡。例如住宅空間的動(dòng)線設(shè)計(jì),我們會(huì)經(jīng)常聽到動(dòng)靜分離的概念,講的就是動(dòng)線的設(shè)計(jì)。住宅動(dòng)線的設(shè)計(jì)目的是提高居住體驗(yàn),減少在室內(nèi)的重復(fù)行走軌跡。


例如家務(wù)動(dòng)線的設(shè)計(jì),從進(jìn)門到廚房再到生活陽臺(tái),是家務(wù)勞動(dòng)中最經(jīng)常行走的路線。通過設(shè)計(jì)動(dòng)線,減少家務(wù)勞動(dòng)的行走,就能提高家務(wù)勞動(dòng)的效率。在這里動(dòng)線越短,效率越高。





在商業(yè)建筑領(lǐng)域,動(dòng)線的設(shè)計(jì)也被頻繁的運(yùn)用。例如店鋪的顧客動(dòng)線設(shè)計(jì),通過興趣區(qū)吸引顧客,引導(dǎo)顧客盡量多的瀏覽店鋪的商品,從而提高銷售額。商業(yè)空間的動(dòng)線設(shè)計(jì)講究的是坪效(每平米的銷售額),動(dòng)線的設(shè)計(jì)更側(cè)重迂回。




還有比如動(dòng)物園、游樂場(chǎng)的路線設(shè)計(jì),就涉及到游玩順序的體驗(yàn),以及緩解擁堵等問題。因此動(dòng)線設(shè)計(jì)的目的在于提高效率,在家居和商業(yè)空間領(lǐng)域已廣泛應(yīng)用。而在視覺設(shè)計(jì)領(lǐng)域,也存在動(dòng)線的概念。



————————

      視覺動(dòng)線


大家在生活中有沒有遇到這樣的情況,你要找的東西就在眼前,但是找了好久仍然沒有找到。


人眼之所以能看清物體,是因?yàn)橐暰W(wǎng)膜中央有個(gè)很小的區(qū)域叫做中央凹,這個(gè)區(qū)域集中了大多數(shù)的視錐細(xì)胞,專門負(fù)責(zé)視力的高清成像。


但是中央凹的面積極小,高清區(qū)域有限。人眼只有在10度視角范圍內(nèi)才最為敏感,30度范圍內(nèi)可以分辨出顏色。這就導(dǎo)致人眼可視范圍有限,一次只能產(chǎn)生一個(gè)視覺焦點(diǎn)。因此人眼在觀察物體時(shí),沒辦法一下子看到所有信息,需要逐個(gè)地移動(dòng)搜尋,這種視線的移動(dòng)過程,就構(gòu)成了視覺動(dòng)線。


例如我們?cè)陂喿x文章時(shí),一般是從左到右逐行地閱讀,這個(gè)閱讀順序就構(gòu)成了視覺動(dòng)線。如果文字的排版過于跳躍,沒有規(guī)律,就會(huì)造成視覺焦點(diǎn)過多動(dòng)線混亂的情況,容易出現(xiàn)閱讀障礙,大大影響了閱讀體驗(yàn)。





在視覺設(shè)計(jì)中動(dòng)線的設(shè)計(jì)尤為重要,例如下圖的banner,左圖動(dòng)線混亂主次不清。右圖則能清晰地引導(dǎo)觀眾從左到右閱讀信息,降低無效的閱讀成本。
因此構(gòu)建合理有效的視覺動(dòng)線,將有助于打造良好的閱讀體驗(yàn),能更高效地讓用戶獲取到信息,避免用戶的流失。








我們以運(yùn)營(yíng)設(shè)計(jì)為例,來討論一下常見的動(dòng)線類型。在運(yùn)營(yíng)設(shè)計(jì)中,banner和活動(dòng)專題是最為常見的,這類型的設(shè)計(jì),畫面往往很有感染力,內(nèi)容豐富。這里介紹的動(dòng)線,是指某張banner或者活動(dòng)頭部同屏類的動(dòng)線軌跡。一般我們可以將常見的動(dòng)線分為這幾個(gè)類型:直線型、匯聚型、發(fā)散型、扇型、以及Z型。


———————

      直線型


直線型動(dòng)線顧名思義,就是在一條路徑上依次展示信息元素。我們以banner為例來看看如何應(yīng)用。



在分析動(dòng)線軌跡的時(shí)候,我們應(yīng)該逐一地尋找視覺焦點(diǎn)。這個(gè)案例中我們第一眼看到的是左側(cè)的標(biāo)題,我們稱第一眼看到的焦點(diǎn)為視覺入口點(diǎn);緊接著視線轉(zhuǎn)移到了右側(cè)的龍身上。這就構(gòu)成了一條清晰的從左到右的視線軌跡。


banner中只在標(biāo)題和火焰上使用了色彩,其他背景使用較灰的色系,這使得視覺焦點(diǎn)突出,動(dòng)線清晰。



2.1.1動(dòng)線角度  

直線型動(dòng)線在運(yùn)用的時(shí)候,不一定都是從左到右的橫向角度。常見的有對(duì)角線以及豎線的形式。


例如左圖這張banner就是對(duì)角線式的動(dòng)線軌跡。對(duì)角線具有傾斜的角度,容易塑造出速度感。因此這樣的動(dòng)線軌跡往往畫面更加的有動(dòng)感。而豎向的動(dòng)線一般用在窄長(zhǎng)比例的畫面中,例如手機(jī)端的運(yùn)營(yíng)活動(dòng)。右圖的活動(dòng)頁面就構(gòu)成了從上到下,從標(biāo)題到主體人物的動(dòng)線瀏覽軌跡。



2.1.2視覺焦點(diǎn)個(gè)數(shù)  

直線型動(dòng)線中,人們的瀏覽軌跡是根據(jù)視覺焦點(diǎn)的位置進(jìn)行的。在直線上依次排列視覺焦點(diǎn),但并不是焦點(diǎn)越多越好,一般2-3個(gè)視覺焦點(diǎn)較為合理。較多的視覺焦點(diǎn)反而影響閱讀效率。 



———————

      匯聚


匯聚型動(dòng)線是將用戶的視線聚焦到中心的一種動(dòng)線軌跡。一般有多個(gè)視覺入口點(diǎn)來引導(dǎo)用戶的視線。




例如下面這張banner,我們的視線會(huì)先被左右兩側(cè)英雄所吸引,延著他們沖刺的方向視線轉(zhuǎn)移到了中間的標(biāo)題,這就構(gòu)成了匯聚型的視覺動(dòng)線。匯聚型動(dòng)線在元素?cái)[放上一般具有引導(dǎo)性,最終目的是讓觀眾的視線聚焦到中心,以突出中心的標(biāo)題或者主體信息。



匯聚型動(dòng)線的視覺入口點(diǎn)一般在2個(gè)以上,例如下面這張活動(dòng)頭部,通過兩側(cè)的煙霧塑造視覺入口點(diǎn),引導(dǎo)觀眾視線匯聚到中心。是一種側(cè)重突出中心內(nèi)容的動(dòng)線類型。




———————

      發(fā)散


匯聚型動(dòng)線是由四周向中心聚集的動(dòng)線軌跡,而發(fā)散型動(dòng)線則相反,它是由中心向四周轉(zhuǎn)移的動(dòng)線軌跡。視覺入口點(diǎn)在中心,并逐步向四周擴(kuò)散的動(dòng)線類型。



例如下面這個(gè)暑假活動(dòng)頁面,就是視線由中心往四周轉(zhuǎn)移的發(fā)散型動(dòng)線。我們第一眼會(huì)被醒目的標(biāo)題所吸引,這就是視覺入口點(diǎn)。之后視線逐步地往兩側(cè)移動(dòng),依次看到人物、書本、臺(tái)燈以及兩側(cè)的云朵。構(gòu)成了漸進(jìn)式的視覺瀏覽軌跡。



而下面這個(gè)四周年的活動(dòng),最醒目的也是標(biāo)題,它將觀眾的視線聚焦到了中心,之后逐步向四周發(fā)散。按照放射的方向,依次瀏覽了人物、按鈕、獎(jiǎng)勵(lì)、圓球等信息。


可以看到發(fā)散型動(dòng)線一般運(yùn)用在有較多信息元素的畫面中,瀏覽順序?qū)訉舆f進(jìn),比較適合對(duì)信息元素進(jìn)行歸類閱讀。


4.1入口點(diǎn)位置 

發(fā)散型動(dòng)線一般是由中心往四周發(fā)散,視覺入口點(diǎn)一般在中心線位置。不過入口點(diǎn)也有位于邊緣的情況。例如下面這張banner,作為視覺入口點(diǎn)的人物位于右下角,通過手勢(shì)逐步引導(dǎo)觀眾閱讀標(biāo)題和玩具。是一種單邊發(fā)散的動(dòng)線類型。



——————

      


扇型動(dòng)線一般會(huì)在中心線上塑造一個(gè)視覺入口點(diǎn),之后保持著至上而下、從左到右的視線軌跡,這種軌跡就好比一把扇子。



例如下面這個(gè)手機(jī)端活動(dòng),我們第一眼會(huì)被可愛的小狗頭部所吸引,之后視線往下,看到主標(biāo)題和副標(biāo)題,并按從左到右的視線軌跡閱讀了標(biāo)題。這就構(gòu)成了扇型的動(dòng)線軌跡。


可以看到扇型的動(dòng)線軌跡保持了從上到下的結(jié)構(gòu)關(guān)系,一般用在畫面較長(zhǎng)的版式中。容易塑造至上而下、內(nèi)容由少及多的閱讀關(guān)系。



—————

      Z


Z型動(dòng)線是最為常見的類型,它遵循了人們從左到右的閱讀順序習(xí)慣。并且在長(zhǎng)頁面中可以一直做反復(fù)的延續(xù)。




例如下圖的活動(dòng)頁面,我們的閱讀順序就是從左到右逐行地掃視關(guān)系。先是主標(biāo)題,再是副標(biāo)題,最后是木牌上的信息。這構(gòu)成了循環(huán)的Z型動(dòng)線軌跡。此類動(dòng)線比較適合應(yīng)用于文字類信息較多的畫面中。







在動(dòng)線的設(shè)計(jì)過程中,比較難的是如何去引導(dǎo)信息之間的先后關(guān)系。這里介紹幾種便捷的技巧,如何更有效的來設(shè)計(jì)動(dòng)線。


————————

      閱讀順序


第一種就是根據(jù)人們的閱讀習(xí)慣來設(shè)計(jì),也就是從左到右,至上而下的順序。因?yàn)槿说难劬?,左右轉(zhuǎn)動(dòng)所看到的角度和區(qū)域,要比上下轉(zhuǎn)動(dòng)所看到的要廣闊的多。從左到右也是人們通用的閱讀習(xí)慣和標(biāo)準(zhǔn),橫向閱讀也更為舒適。在設(shè)計(jì)中我們只需要按照從左至右自上而下的規(guī)律來擺放信息元素,就能保證有良好的閱讀體驗(yàn)。



——————————

      元素指向性


第二種是利用元素本身的指向性來進(jìn)行引導(dǎo),特別是主體人物的肢體動(dòng)作、手勢(shì)等。例如下圖中的banner就分別通過人物的眼神和手勢(shì)進(jìn)行引導(dǎo),讓觀眾的視線轉(zhuǎn)移到標(biāo)題上,構(gòu)成了很強(qiáng)的關(guān)聯(lián)性。讓動(dòng)線的引導(dǎo)更為自然緊密。




———————————

      引導(dǎo)線的設(shè)計(jì)


第三種是引導(dǎo)線的設(shè)計(jì),我們可以通過設(shè)計(jì)一些引導(dǎo)性的線條來引導(dǎo)觀眾的視線。常見的有放射線,或者虛擬的線條。

例如下圖1的banner,就是通過左右兩側(cè)放射性的線條來增強(qiáng)引導(dǎo),讓觀眾的視線匯聚到中心,構(gòu)成了匯聚型的動(dòng)線。圖2除了蜘蛛的視線引導(dǎo)外,標(biāo)題文字的透視處理也構(gòu)建出一條無形的引導(dǎo)線,讓整個(gè)視線的引導(dǎo)更加緊密自然。在元素本身指向性不強(qiáng)的時(shí)候,引導(dǎo)線的設(shè)計(jì)能讓視線的引導(dǎo)更加緊密,有規(guī)律。



—————————

      層級(jí)的設(shè)計(jì)


第四種是通過層級(jí)關(guān)系的設(shè)計(jì)來構(gòu)建動(dòng)線,也是經(jīng)常要用到的方法,構(gòu)建層級(jí)關(guān)系的方式有很多,這里只做簡(jiǎn)單介紹,有機(jī)會(huì)再跟大家交流。


例如下面這個(gè)活動(dòng)頭部,我們的閱讀軌跡是從左到右的關(guān)系,先看到左邊的人物然后是標(biāo)題,最后是右邊的人物,構(gòu)成了直線型的動(dòng)線軌跡。如果我們拉開人物之間的空間關(guān)系,我們首先會(huì)注意到離我們近的物體,依據(jù)遠(yuǎn)近關(guān)系,形成了一條視覺引導(dǎo)軌跡。這就是層級(jí)對(duì)于視線引導(dǎo)的作用。


通過層級(jí)的塑造,可以更有效的來制造動(dòng)線,引導(dǎo)觀眾的閱讀。



[ 小結(jié) ]


綜上,只要我們能夠理解動(dòng)線的概念和目的,在排列元素時(shí)就能有更清晰的目的性,設(shè)計(jì)更有方向感。信息的傳遞是我們構(gòu)建作品和觀眾之間交流的橋梁,也是設(shè)計(jì)中首要考慮的因素。有效的信息傳遞才能發(fā)揮設(shè)計(jì)最大的價(jià)值。以上僅是個(gè)人的觀感與體會(huì),希望對(duì)大家有幫助。

文章來源:站酷   作者:Tony老司機(jī)
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)



B端設(shè)計(jì)師·如何從0到1建立3D規(guī)范及組件庫

資深UI設(shè)計(jì)者

大家好,新年了,先祝大家新年快樂。這次分享一下自己學(xué)習(xí)道路上的小總結(jié),僅此而已,以做紀(jì)念。希望能和大家多多交流。感謝。瑞思拜~


本次給大家?guī)硪黄P(guān)于如何從0到1的建立一個(gè)符合自己產(chǎn)品調(diào)性的3D組件庫,以及如何運(yùn)用到日常的工作中去,并可以大幅度提升設(shè)計(jì)師產(chǎn)出的效率,起到降本增效的作用,還可以賦能給你的業(yè)務(wù)(盡量體現(xiàn)在匯報(bào)PPT中),讓你在寫年中年度總結(jié)的時(shí)候不會(huì)被問到,“你的價(jià)值又在哪里呢?”這種不得不回答的問題。雖然自己感覺還是做的不成熟,但是還是想分享給大家,自己也做一個(gè)沉淀,繼續(xù)努力。我想在你看完這篇文章并且可以做出嘗試以后,你和你的老板一定會(huì)喜歡。



一.首次升級(jí)改版

我們現(xiàn)在看到的無論是阿里云,華為云,騰訊云,金山云等等這些優(yōu)秀的云產(chǎn)品設(shè)計(jì)當(dāng)中,都在大量的使用3D建模渲染與2.5D風(fēng)格互相搭配的運(yùn)用。京東云官網(wǎng)也分別在4月和10月份各做了一次大的改版升級(jí),很有幸都有參與到當(dāng)中,那么就先說4月份的品牌站改版,以下的效果,用C4D的默認(rèn)渲染器完全可以做到。


1.早期2.5D的積累

這次的改版是第一次從2.5D風(fēng)格轉(zhuǎn)向3D風(fēng)格的探索性嘗試。再此之前,設(shè)計(jì)師們有著3年多的2.5D風(fēng)格組件庫的大量積累。面向新用戶以全新的面貌向用戶傳遞科技引領(lǐng),助力全球產(chǎn)業(yè)數(shù)字化升級(jí),推動(dòng)實(shí)體經(jīng)濟(jì)高質(zhì)量發(fā)展的使命。

早期同學(xué)們積累的2.5D組件庫。


第一次升級(jí)后的組件庫。


第二次升級(jí)后的組件庫。


2.組件庫及規(guī)范的建立

在3D規(guī)范的產(chǎn)出過程中,我們嚴(yán)格圍繞著新的設(shè)計(jì)策略「通用」和「差異」兩個(gè)點(diǎn)相互融合,以提煉設(shè)計(jì)通用的元素,差異以規(guī)范為基礎(chǔ)。根據(jù)不同的場(chǎng)景化的突出特點(diǎn),3D及留白節(jié)奏的合理使用,突出3D的干脆,嚴(yán)謹(jǐn),從而約束好網(wǎng)站的整體調(diào)性,讓用戶無論是在視覺感官體驗(yàn)上還是使用體驗(yàn)上都十分舒適。所以我們最后得到的四個(gè)關(guān)鍵詞即為:探索、開放不封閉、共生攻堅(jiān)和用戶信賴。


3.建立組件庫的四個(gè)維度

為了利用三維與二位的沖突感凸顯視覺表現(xiàn)的主體信息,強(qiáng)化是覺得一致性。表達(dá)出通透和呼吸的開放組合。因而我們映射到了色彩,質(zhì)感,字體,構(gòu)成四個(gè)維度上。


/1.色彩:

在色彩上以京東紅為底色,黑色代表著科技專業(yè)以及智慧未來。在規(guī)范出主色調(diào)的同時(shí)為了保持京東科技品牌調(diào)性的一致性規(guī)定了品牌的業(yè)務(wù)色及輔助色,同時(shí)也規(guī)范了使用顏色建議的搭配以及占比關(guān)系,作為設(shè)計(jì)師使用時(shí)的有效參考。


/2.字體:

在字體上,規(guī)定京東朗正體為品牌名稱級(jí)產(chǎn)品名稱字體,在樓層中的字體為方正蘭亭黑系列,英文字體為思源黑體。字體行高的1.5倍行距,段落間的上下間距為字號(hào)的1倍。



/3.構(gòu)成:

在構(gòu)成上,用高度概括簡(jiǎn)單干脆的幾何形式展現(xiàn),既可以突出文字的信息層級(jí),又渲染了整體的氣氛進(jìn)而增強(qiáng)了頁面層級(jí)更加清晰的效果,強(qiáng)化了嚴(yán)謹(jǐn)?shù)膸缀涡误w,讓用戶感受到秩序化。


/4.質(zhì)感:

在質(zhì)感上,三種不同的材質(zhì)——金屬材質(zhì)、發(fā)光材質(zhì)以及磨砂玻璃材質(zhì)。


4.渲染及模型參數(shù)

在規(guī)范好了基礎(chǔ)的四個(gè)關(guān)鍵點(diǎn)后,進(jìn)行了渲染的嘗試,最后投票確定了一套大家都認(rèn)可的效果。并且產(chǎn)出了預(yù)設(shè)工程文件,方便設(shè)計(jì)師建立白模且通過設(shè)計(jì)評(píng)審后直接導(dǎo)入進(jìn)行渲染。


5.動(dòng)畫的渲染及精靈圖的制作

為了滿足頁面中部分鼠標(biāo)移入移出的交互效果,我們渲染了動(dòng)效以及精靈圖的制作。關(guān)于精靈圖的制作,在之前的文章當(dāng)中我們有詳細(xì)的說明和制作方法,這里就不再贅述。

以上就是我們的第一次3D視覺升級(jí),這一次升級(jí)做的還是比較系統(tǒng)且完善的。從構(gòu)建組件的價(jià)值開始到設(shè)計(jì)策略——競(jìng)品分析——實(shí)現(xiàn)策略——規(guī)范要求——模型——顏色——質(zhì)感——構(gòu)成——渲染——?jiǎng)赢嫛獞?yīng)用場(chǎng)景和最后的開發(fā)上線。



第二次升級(jí)改版

那么到了10月份,為了更加貼合業(yè)務(wù)和升級(jí)產(chǎn)品調(diào)性。進(jìn)行了第二次的改版,這一次的改版我使用了新的OC渲染器以及在原有的基礎(chǔ)上做了完善和調(diào)整。


1.通用底座的新增

幸運(yùn)的是這一次改版我就順手了很多,還是老生常談規(guī)定了規(guī)范說明、模型、品牌顏色、質(zhì)感、構(gòu)成方式等等。新增了對(duì)通用底座的規(guī)范。更加規(guī)范了使用。


2.HDR環(huán)境貼圖

由于使用了OC渲染器,對(duì)環(huán)境的設(shè)定以及HDR貼圖的使用變的十分重要,嘗試了很多效果。


3.燈光參數(shù)

至于打光,沒有做過度的布置。在環(huán)境亮度滿足的情況下,只用了2盞補(bǔ)光,并且做了參數(shù)的說明。


4.組件配色占比

規(guī)定了每種顏色的占比參考。


5.組件渲染實(shí)例

下面看一些我們渲染出來的實(shí)例。以及我們優(yōu)秀的小伙伴建模并渲染的Banner。

那么以上就是本文的全部?jī)?nèi)容,希望能對(duì)大家的日常工作有一些幫助。很多地方還不成熟,會(huì)繼續(xù)沉淀把更好的東西分享給大家。瑞思拜。

文章來源:站酷   作者:能補(bǔ)拙
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)



讓數(shù)據(jù)更美!5個(gè)實(shí)用的數(shù)據(jù)圖表設(shè)計(jì)技巧

seo達(dá)人


1) 顏色的運(yùn)用

顏色的巧妙運(yùn)用能為數(shù)據(jù)提供更加豐富的內(nèi)涵。以最常見的紅、黃、綠三種顏色為例,分別代表了不好、中性、好的意思。

圖片

現(xiàn)在越來越多的產(chǎn)品愿意使用品牌色作為圖表的主色調(diào),通過調(diào)整品牌色的深淺程度,做成一組同色系的色板供圖表使用,其中顏色越深代表數(shù)值越大,顏色越淺代表數(shù)值越小。

圖片

如果覺得紅黃綠這些顏色太普通,還可以考慮使用藍(lán)色和橙色這類互補(bǔ)色作為調(diào)色板。

藍(lán)橙色的搭配相較于紅綠色更具有活力,用藍(lán)色表示正值,橙色表示負(fù)值,對(duì)用戶來說也容易理解。

圖片

對(duì)于顏色的運(yùn)用,最重要的是考慮可訪問性,不僅是圖表本身顏色的對(duì)比,還要考慮圖表與背景色之間也要具有足夠高的對(duì)比度。

 

2) 線條和紋理

除了使用不同的顏色,還可以在圖表中添加線條或者紋理效果來構(gòu)建多種多樣的圖表樣式。

圖片

選擇一個(gè)基礎(chǔ)色,在基礎(chǔ)色的基礎(chǔ)上添加點(diǎn)、橫線、豎線、斜線、網(wǎng)格等多種填充樣式,構(gòu)成一套顏色統(tǒng)一但內(nèi)容差異化的柱狀圖系統(tǒng)。

圖片

線條也可以添加不同的紋理效果。由多種不同顏色的實(shí)線組成的折線圖往往很難讓用戶快速理解其中的意思,我們可以為折線添加各種樣式的虛線,來提高圖表的可用性。

 

3) 響應(yīng)性設(shè)計(jì)

如果要在手機(jī)上展示圖表信息,需要考慮手機(jī)屏幕的尺寸對(duì)于圖表的適配性。例如PC屏幕寬度更大,更適合展示多個(gè)豎向的柱狀圖。

圖片

同樣一組圖表如果放到手機(jī)端展示,采用橫向的條形圖會(huì)更合適且合理。

手機(jī)屏幕寬度小,如果PC端的圖表直接照搬過來,在一屏上只能顯示幾個(gè)圖表,而且還需要用戶左右滑動(dòng)來查看更多圖表。

這樣的照搬不僅無法一下展示所有圖表,缺少直觀性和對(duì)比性,還會(huì)增加用戶操作負(fù)擔(dān),顯然是不可取的。

圖片

▲如果覺得在手機(jī)上使用橫向的條形圖成本太高,又想讓用戶一下看到圖表的所有內(nèi)容,可以考慮使用“屏幕旋轉(zhuǎn)”提示,告知用戶把手機(jī)橫過來看圖表效果會(huì)更好。

 

4) 標(biāo)簽

標(biāo)簽是圖表重要的組成部分,標(biāo)簽的長(zhǎng)度、大小都會(huì)影響圖表整體的效果。

比如有的圖表尺寸很小,空間有限,但是標(biāo)簽卻很長(zhǎng),如果盡可能在有限的空間中將標(biāo)簽展示清楚,值得我們?nèi)ニ伎肌?/span>

圖片

在圖表中并非所有內(nèi)容都要始終可見,圖表中的數(shù)據(jù)圖就可以傳達(dá)大部分的信息。如果覺得圖表中展示的標(biāo)簽過多,可以隱藏次要的信息,通過鼠標(biāo)懸浮或點(diǎn)擊來觸發(fā)這些內(nèi)容。

圖片

懸停狀態(tài)是隱藏次要數(shù)據(jù)同時(shí)避免圖表在視覺上看著太復(fù)雜的解決方法。在懸停時(shí)透露更多信息是漸進(jìn)式披露的重要用途,用戶可以在需要時(shí)進(jìn)行交互,并且默認(rèn)情況下不會(huì)造成頁面混亂。

另外設(shè)計(jì)圖表的時(shí)候,要做到提前規(guī)劃標(biāo)簽導(dǎo)航,確定長(zhǎng)標(biāo)簽的展示方式,考慮怎么放置不會(huì)讓圖表顯得太臃腫。

 

5) 排版和層級(jí)結(jié)構(gòu)

現(xiàn)在有很多儀表盤設(shè)計(jì)得很簡(jiǎn)約、很現(xiàn)代,這類儀表盤使用超大字號(hào)的加粗字體展示幾項(xiàng)最重要的信息,既突出重點(diǎn),又讓整個(gè)頁面有層次和對(duì)比。

圖片

類似的排版能夠吸引用戶的注意力,通過前期研究確定幾個(gè)用戶最關(guān)心的內(nèi)容,然后將這些內(nèi)容重點(diǎn)展示,起到強(qiáng)調(diào)作用。

 

最后

最后設(shè)計(jì)夾整理了深淺兩套數(shù)據(jù)圖表源文件, 文件已打包好, 大家后臺(tái)回復(fù)關(guān)鍵詞即可領(lǐng)取。

領(lǐng)取方式:關(guān)注公眾號(hào),后臺(tái)回復(fù)【數(shù)據(jù)圖表】獲取源文件

圖片

 

慢慢來比較快,希望對(duì)你有幫助!

 

原文地址:CLip設(shè)計(jì)夾(公眾號(hào))

作者:Clippp

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》讓數(shù)據(jù)更美!5個(gè)實(shí)用的數(shù)據(jù)圖表設(shè)計(jì)技巧

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

截屏2021-05-13 上午11.41.03.png

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)



工作經(jīng)驗(yàn)| B 端產(chǎn)品組件設(shè)計(jì)細(xì)節(jié)及經(jīng)驗(yàn)分享(六)

seo達(dá)人


1、樹形選框和穿梭框的區(qū)別?

有同學(xué)問我:樹形選框和穿梭框有什么區(qū)別?

其實(shí)這兩種組件方案都可以解決 “處理多種選項(xiàng)” 的問題,兩者的不同點(diǎn)如下:

 

樹形選框

單一列表的樹形選框,其特點(diǎn)為:

1. 通常適用于選項(xiàng)少的場(chǎng)景,不需要頻繁上下滾動(dòng)鼠標(biāo)查看,選擇后的選項(xiàng)結(jié)果一目了然。

2. 在頁面中占的空間小,也可以放置在下拉菜單中使用。

3. 一般更強(qiáng)調(diào)關(guān)聯(lián)性層級(jí)性。比如權(quán)限與角色之間的關(guān)聯(lián);角色與角色之間的上下級(jí)關(guān)系和權(quán)限包含關(guān)系。

 

穿梭框

雙列列表的穿梭框,其特點(diǎn)為:

1. 用直觀的方式在兩欄中移動(dòng)元素,完成選擇行為。一列為源列表,一列最終被構(gòu)建的項(xiàng)目列表,用戶可以看到兩個(gè)列表中的項(xiàng)目并進(jìn)行操作,“數(shù)據(jù)源” 和 “結(jié)果” 清晰可見。

2. 占用更多空間,可以展示選項(xiàng)的更多信息,也可以包含更多結(jié)構(gòu),但左右兩列的選項(xiàng)結(jié)構(gòu)須保持一致。

3. 一般強(qiáng)調(diào)權(quán)限是用于 “給予” 而不是 “復(fù)制” ,比如可以用于描述:一個(gè)權(quán)限從 A 手中轉(zhuǎn)到 B 手中,B 擁有權(quán)限的同時(shí),A 不再具備權(quán)限。

 

大家可以對(duì)應(yīng)業(yè)務(wù)場(chǎng)景,選擇更適合的組件。

 

2、按鈕的狀態(tài)設(shè)計(jì)

有同學(xué)對(duì)我說,他看到有的平臺(tái)按鈕的狀態(tài)分為鼠標(biāo) “懸?!薄ⅰ包c(diǎn)擊” 和 “按下” 三個(gè)樣式;有的平臺(tái)的按鈕 “點(diǎn)擊” 和 “按下” 的狀態(tài)一致。所以按鈕的狀態(tài)是根據(jù)什么來做定義的呢?是不是越全面越好呢?

 

1. 按鈕狀態(tài)的設(shè)計(jì)理念

其實(shí)關(guān)于按鈕的狀態(tài)分類,在能夠給用戶基本操作反饋的前提下,并沒有絕對(duì)的好壞之分。平臺(tái)之間出現(xiàn)這些差別的原因是由設(shè)計(jì)系統(tǒng)的設(shè)計(jì)理念風(fēng)格來決定。

舉個(gè)例子,下圖是一個(gè)比較夸張的案例:某個(gè)組件系統(tǒng)的設(shè)計(jì)理念是【盡可能模仿真實(shí)世界中的交互狀態(tài)】,圖中按鈕模仿的就是真實(shí)世界中的物理按鈕反饋狀態(tài),但由于頁面上的二維世界不具備三維世界中的“海拔/高度”的概念,所以更多是通過改變或增加顏色、動(dòng)效、投影等,對(duì)按鈕進(jìn)行“高度”的體現(xiàn)。

圖片

對(duì)于真實(shí)世界的按鈕,有一些關(guān)鍵的大按鈕,在按下去之后會(huì)有一種 “咔嗒” 的碰觸感,意在告訴用戶你已經(jīng)成功按下了按鈕,這對(duì)應(yīng)到二維世界,就是圖中按鈕的“點(diǎn)擊“的效果。

而物理世界的按鈕在按完之后雖然會(huì)彈回到原位,但很有可能是慢慢恢復(fù)到原位,也很有可能是不會(huì)回到 100% 的原位,比原位稍微矮一些,所以圖中點(diǎn)擊后的狀態(tài)相比于默認(rèn)狀態(tài)就缺少了按鈕下邊緣的厚度感,或者是顏色變得更淺 / 更深,以此來體現(xiàn)差異。

以上所說的組件設(shè)計(jì)風(fēng)格,是一種擬真的設(shè)計(jì)風(fēng)格。也有一些公司的設(shè)計(jì)語言,可能是扁平化,追求極簡(jiǎn)主義,所以會(huì)省略這當(dāng)中的過程,只傳達(dá)給用戶最干脆、直接的反饋。

因此組件的狀態(tài)效果,在能夠給用戶明確基本操作反饋的前提下,并不是 “對(duì)錯(cuò)” 或 “好壞” 的問題,而是由根據(jù)產(chǎn)品定位、功能特性和產(chǎn)品用戶的行為偏好等因素來定的設(shè)計(jì)理念所決定的。

 

2. 組件狀態(tài)是不是越全面越好?

這個(gè)問題最重要的判斷標(biāo)準(zhǔn)是:業(yè)務(wù) / 產(chǎn)品是否需要。在業(yè)務(wù)組件庫搭建的初期,一定是以業(yè)務(wù)為主,“從業(yè)務(wù)中來,到業(yè)務(wù)中去” 。當(dāng)你的業(yè)務(wù)中對(duì)于同一個(gè)組件有大、中、小的尺寸需求時(shí),你再做規(guī)定也并不晚。這樣的好處是:

  • 做好的尺寸規(guī)定直接運(yùn)用到業(yè)務(wù)中,有現(xiàn)成的檢驗(yàn)場(chǎng)景;
  • 不至于白費(fèi)功夫,做了一大堆的尺寸分類和說明但無處應(yīng)用;
  • 盡可能減少設(shè)計(jì)師在查找和使用組件時(shí)的多種選項(xiàng)干擾

另外要注意,如果做了多種尺寸,你需要詳細(xì)的規(guī)范每一種尺寸可以使用的場(chǎng)景和注意事項(xiàng),避免誤用和混用

很多時(shí)候并不是內(nèi)容越全越好。“全” 但不好用,也會(huì)帶來新的問題。

 

原文鏈接:長(zhǎng)弓小子(公眾號(hào))

作者:元堯

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》工作經(jīng)驗(yàn)| B 端產(chǎn)品組件設(shè)計(jì)細(xì)節(jié)及經(jīng)驗(yàn)分享(六)

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

截屏2021-05-13 上午11.41.03.png

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)




畫面很空怎么辦?最徹底的一次改稿案例

seo達(dá)人

圖片圖片

 

 

最徹底改稿開始了!

 

圖片

 

 

 

圖片

 

看到這張圖時(shí),最吸引眼球的恐怕并不是產(chǎn)品而是鮮艷的色彩。

圖片

 

吸取顏色后發(fā)現(xiàn)三者色系都非常飽和,影響到了視覺對(duì)于主次的著重點(diǎn)。

圖片

 

配色上的占比弱化了產(chǎn)品無法被直觀的表達(dá),甚至體現(xiàn)不出產(chǎn)品本身的品質(zhì)。

圖片

 

 

 

圖片

產(chǎn)品在一張畫面中,除了解決信息內(nèi)容的編排外,還需要幫助這個(gè)產(chǎn)品烘托出整體的氛圍感,就像如今都需要美化包裝的時(shí)代中,酒香不怕巷子深恐怕已經(jīng)很難再去吸引住客戶的目光。

圖片

 

 

 

圖片

我們分別以藝術(shù)、商業(yè)、極簡(jiǎn)三種需求方向來對(duì)這次的設(shè)計(jì)進(jìn)行三次改稿,記得收藏關(guān)注起來。

圖片

 

 

 

 

圖片

偏抽象化的圓形表現(xiàn)出燈在聚焦光源的過程,符合具有藝術(shù)造型的燈飾所傳達(dá)的美學(xué)。

圖片

 

 

常規(guī)的文字編排貌似影響了所要傳達(dá)的藝術(shù)魅力

換!

圖片

 

 

用畫面四周塑造一個(gè)外邊框,沿著邊框放置文字編排,可最大化的提升內(nèi)部視覺空間,將著重點(diǎn)鎖定在產(chǎn)品上。

圖片

嫌背景太簡(jiǎn)單?那填個(gè)色吧,看起來刺眼怎么辦?

那就弱化背景的色彩,減少對(duì)視覺與產(chǎn)品的影響。

圖片

 

[優(yōu)化輸出圖像]

 

 

 

 

圖片

 

最常用的編排構(gòu)建原理,可以有序建立出視覺和信息的層級(jí)。

圖片

 

放大文字占滿上下的版面,產(chǎn)品放置在中心點(diǎn),利用色塊分割出主次關(guān)系。

圖片

圖片

作為商業(yè)性案例,增加光感是必不可少的,把燈打開以提升畫面的質(zhì)感氛圍。

[優(yōu)化輸出圖像]

放置文字信息時(shí),想必大多數(shù)甲方對(duì)金色的執(zhí)念已經(jīng)深入骨髓,那就換成金色,以滿足客戶的同時(shí),也解決了文字主題的醒目。

[優(yōu)化輸出圖像]

再來對(duì)比下畫面氛圍對(duì)商業(yè)性設(shè)計(jì)的重要性。

[優(yōu)化輸出圖像]

 

 

圖片

一個(gè)純底,一次簡(jiǎn)單的圖文編排,沿著視線引導(dǎo)下的信息切入產(chǎn)品,點(diǎn)亮了簡(jiǎn)單卻有品質(zhì)的生活。

 

圖片

想到粉絲說老板喜歡有撞色的設(shè)計(jì),于是在上方增加一個(gè)互補(bǔ)的綠色。

圖片

利用冷暖與色彩的強(qiáng)弱關(guān)系制造出引導(dǎo)視線的作用。

 

圖片

 

 

回到原圖,同樣也是冷暖的撞色,但產(chǎn)品是在中心,而不是在左右兩側(cè),缺少明顯的強(qiáng)弱關(guān)系會(huì)容易干擾視線引導(dǎo)的方向。

[優(yōu)化輸出圖像]

 

最后來自粉絲的反饋!

圖片

源圖像

 

原文地址:修先森撩設(shè)計(jì)(公眾號(hào))

作者:修先森

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》畫面很空怎么辦?最徹底的一次改稿案例

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

截屏2021-05-13 上午11.41.03.png

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(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ù)



日歷

鏈接

個(gè)人資料

存檔