首頁(yè)

UI/UX設(shè)計(jì)作品集中的推理分析該怎么寫

seo達(dá)人



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

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

設(shè)計(jì)師的定位和價(jià)值

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

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




講故事

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

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

1.起因

起因包含了

1.有哪些問(wèn)題/機(jī)會(huì)

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

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



比如我舉個(gè)例子,我發(fā)現(xiàn)我家?guī)鈮﹂_始掉粉脫落,甚至?xí)r不時(shí)的浴室柜下方會(huì)流出一些水,所以我懷疑是不是哪里漏水了,在這里我用的是觀察法,用觀察法很直觀的看到了問(wèn)題。接下來(lái)我要去找到問(wèn)題的原因,到底是什么原因?qū)е铝送鈮Φ舴勖撀湟约皾B水的問(wèn)題。于是我先自己做了一個(gè)假設(shè),是不是埋在地下的水管破了?因?yàn)橹坝杏眠^(guò)腐蝕性很強(qiáng)的通下水道的藥劑,但是這個(gè)原因被我排除了,因?yàn)槿绻苈┧敲淳蜁?huì)一直漏,而不是間歇性的出水。那還有可能是什么原因呢?浴室柜中下水管堵塞導(dǎo)致水流到了沒(méi)做美縫的縫隙中嗎?還是樓上漏水滲下來(lái)了?



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

所以我們?cè)倩剡^(guò)頭來(lái)看,作品包裝中起因應(yīng)該說(shuō)明哪些事項(xiàng):

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

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



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

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

小結(jié)一下,起因包含了3個(gè)問(wèn)題,這三個(gè)問(wèn)題可以通過(guò)幾種方法來(lái)解答:

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

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

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

2.經(jīng)過(guò)

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

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

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




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

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

策略3:讓用戶提前進(jìn)行體驗(yàn):可以給部分用戶試用

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

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

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

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

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

3.結(jié)果

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

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

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



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

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

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

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

總結(jié)一下

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

原文地址:站酷

作者:應(yīng)駿

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


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


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



AE簡(jiǎn)單幾步制作毛玻璃卡片動(dòng)效

seo達(dá)人

大家平??隙ㄓ杏龅接闷渌脑O(shè)計(jì)軟件繪制毛玻璃效果,不是無(wú)法導(dǎo)入AE,就是導(dǎo)入AE之后毛玻璃效果丟失,變的很詭異。

如果需要做動(dòng)畫,那不妨使用AE來(lái)制作毛玻璃咯。

本次除了圖文教程之外,還有視頻教程哦

1080P高清帶字幕版視頻教程觀看地址:

https://www.bilibili.com/video/BV1Ke4y1v76P/?spm_id_from=333.999.0.0

首先繪制好基本圖形,如下圖:

這里的模糊度沒(méi)有說(shuō)一定要設(shè)置多少哈,大家根據(jù)實(shí)際情況來(lái)調(diào)整,教程里調(diào)的是 100,感覺(jué)效果是我想要的了。

繼續(xù)給調(diào)整圖層添加分形雜色,增加畫面顆粒感,變換里的縮放屬性調(diào)到 1 ,不透明度調(diào)到10%(這里大家可以酌情調(diào)節(jié)哈,數(shù)值越大,效果越明顯),混合模式為 疊加。

使用卡片給調(diào)整圖層進(jìn)行軌道遮罩,這樣模糊的背景就只顯示在卡片的范圍內(nèi)了。

為了增加卡片的立體感,給卡片圖層復(fù)制一層,去掉填充屬性,添加漸變描邊,描邊顏色根據(jù)背景色來(lái)調(diào)節(jié),因?yàn)槊柽吺艿江h(huán)境顏色的影響。

漸變色的不透明度大概在20%-40%左右比較合適。

新建攝像機(jī),給卡片以及卡片上的元素開啟3D圖層,把這些元素都綁定父子級(jí)到空對(duì)象,方便整體控制做動(dòng)畫。

然后給空對(duì)象做XYZ三個(gè)軸向的旋轉(zhuǎn),以及Y軸的位移動(dòng)畫。

因?yàn)槭且鲅h(huán)動(dòng)畫,所有最后一組關(guān)鍵幀可以直接復(fù)制粘貼開始的關(guān)鍵幀,即可形成循環(huán)。

最終效果如下圖:

好了,這個(gè)簡(jiǎn)單的毛玻璃動(dòng)效教程就到這里咯,如果對(duì)你有幫助,請(qǐng)點(diǎn)贊支持一波,咱們下次再見(jiàn)~~~



原文地址:站酷

作者:墨染ART

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


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


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



提升UI細(xì)節(jié)的34個(gè)技巧

seo達(dá)人



原文地址:站酷

作者:卡洛設(shè)計(jì)鋪

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


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


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


神秘的印度,每幅作品都是設(shè)計(jì)配色的模板?!

seo達(dá)人





五彩斑斕的印度設(shè)計(jì)

每幅都是配色模板


眾所周知,印度是一個(gè)五彩斑斕的國(guó)家,在印度無(wú)論是哪一個(gè)角落都隨處可見(jiàn)各種色彩,人們身上的服裝、不同的廟宇、裝飾物,甚至是運(yùn)貨的大卡車也是五顏六色相互交織。雖然人們每每是將眾多顏色組合在一起,可是看起來(lái)卻不會(huì)讓人覺(jué)得雜亂,這就是印度色彩的奇妙之處。


Diwali Playing Cards Gift Box




印度色彩為何強(qiáng)烈?

不全是宗教因素!


色彩與人類的生活息息相關(guān),不同的色彩選擇主要取決于地理環(huán)境和宗教文化的影響,而最初色彩的選擇似乎受到自然地理環(huán)境的影響更大。20世紀(jì)70年代,法國(guó)色彩學(xué)家讓·菲利浦·郎科羅(J.P.Lenclos)認(rèn)為不同的地理環(huán)境直接影響到人類、習(xí)俗、文化等方面的形成和發(fā)展,這些因素又共同導(dǎo)致了不同的色彩表現(xiàn)。



一般認(rèn)為,地理位置位于低緯度的熱帶地區(qū)的民族,喜好顏色鮮艷、偏亮且純度高的顏色。因?yàn)闊釒У貐^(qū)紫外線強(qiáng)烈,亮色衣服則能起到一定的防曬作用。而印度大部分位于熱帶地區(qū),氣候環(huán)境比較炎熱干旱。因此,印度的多彩也可以理解了。


印度紗麗裝置藝術(shù)展


不僅是服飾,連建筑也五彩斑斕。比如拉賈斯坦幾乎是印度旅游的名片,這個(gè)國(guó)王之地?fù)碛胸S富的歷史文化遺產(chǎn)和人文景觀,而四座色彩之城——杰伊瑟爾梅爾、焦代布爾、烏代布爾、齋普爾——?jiǎng)t是拉賈斯坦最有特色、最富魅力、最容易讓人流連忘返的城池。


黃金之城——杰伊瑟爾梅爾


藍(lán)色之城——焦特布爾


白色之城——烏代布爾


粉色之城——齋普爾





五種印度色彩的含義

如何在設(shè)計(jì)中呈現(xiàn)


對(duì)印度人來(lái)說(shuō),在宗教和文化中,顏色承擔(dān)著很重要的角色,蘊(yùn)含著非常深刻的寓意,有著超越裝飾價(jià)值的意義。印度的藝術(shù)家以神袛及其著裝的顏色來(lái)表征其品性。顏色的合理使用可以營(yíng)造一種氛圍,置人于一種歡愉的心境。印度的五種代表顏色有什么寓意,又如何在設(shè)計(jì)中體現(xiàn)呢?往下看你就知道!


藍(lán)色:勇敢、剛毅、堅(jiān)定



印度人認(rèn)為,造物主創(chuàng)造自然的時(shí)候用得最多的就是藍(lán)色,天空、大海、河流湖泊,因此藍(lán)色代表著勇敢,剛毅,堅(jiān)定。藍(lán)色也是能應(yīng)對(duì)復(fù)雜事件、冷靜的神袛象征顏色,羅摩神(Lord Rama)和克利須那神(Krishna)畢生致力于保護(hù)人類和打擊邪惡,正因他們的勇敢精神令人們欽佩不已,因此藍(lán)色也成為象征他們的代表顏色,也代表著人們對(duì)兩位神明的尊敬之意。


Lord Ram Wallpaper

01

印度卡車藝術(shù)日歷 2023

Yukta Gupta(印度)


印度的卡車是集有趣的標(biāo)語(yǔ)、五彩斑斕的顏色和無(wú)數(shù)令人眼花繚亂的裝飾品于一身的迷幻展示。在印度,卡車融合了藝術(shù)和商業(yè),卡車司機(jī)在車上花費(fèi)的時(shí)間和精力,是他們把卡車當(dāng)作自己的家和禮拜場(chǎng)所的原因,他們把卡車裝飾得像個(gè)新婚的印度新娘。


因此,設(shè)計(jì)師Yukta Gupta決定將印度傳統(tǒng)圖騰與卡車結(jié)合成一個(gè)年日歷,主色調(diào)為藍(lán)色,也是表達(dá)了對(duì)卡車司機(jī)和印度傳統(tǒng)習(xí)俗的敬仰,寄托了印度人民美好祝愿。









02

Spotify Mural Design

Mechi Co. Design(印度)


壁畫是為辦公室的安靜空間或者重點(diǎn)區(qū)域定制設(shè)計(jì)的作品——工作人員如果需要一些“獨(dú)處空間”,他們可以專注在這個(gè)區(qū)域。這個(gè)項(xiàng)目是印度設(shè)計(jì)工作室Mechi Co. Design與Spotify合作,為印度孟買的Spotify辦公室繪制壁畫。


壁畫設(shè)計(jì)概念是“包裹在音樂(lè)中”,工作室認(rèn)為通過(guò)音樂(lè)進(jìn)入思想,即是進(jìn)入我們自己的焦點(diǎn)空間。 壁畫主要視覺(jué)元素是一個(gè)人進(jìn)入音樂(lè)世界的剪影。










綠色:

和平和歡愉


綠色代表著和平和歡愉,它可以使人內(nèi)心平靜。這種顏色乍一看起來(lái)可能是冷色調(diào),但卻又讓人感覺(jué)舒服,同時(shí)它也是自然的象征。對(duì)于印度人來(lái)說(shuō),首飾是日常生活中不可或缺的裝飾品,印度婦女們特別喜歡用綠色,紅色,珊瑚色這些艷麗的色彩做飾品。


abstract art tri color of India flag


個(gè)人3D作品

Khyati Trehan(印度)

網(wǎng)站:https://khyatitrehan.com/



BranD NO.62《畢業(yè)之后:設(shè)計(jì)師成長(zhǎng)計(jì)劃》中,我們很榮幸采訪到這位來(lái)自印度的女性設(shè)計(jì)師兼3D視覺(jué)藝術(shù)家,Khyati Trehan認(rèn)為印度的獨(dú)特在于其多樣性,因?yàn)槊刻於紩?huì)遇到與她有著完全不同人生的人,才會(huì)進(jìn)而促使她在設(shè)計(jì)中終生踐行同理心。她也會(huì)經(jīng)常在ins上把生活中的思考創(chuàng)作出來(lái)。


Khyati的作品力圖使無(wú)形的概念變得具體,注重質(zhì)感的呈現(xiàn),富有感情又不失俏皮,經(jīng)常在事物的邊緣探索視覺(jué)的可能性。



PAPER FLOWERS

PALMWOOD: CO-CREATE & CONNECT

TRASH






3D視覺(jué)藝術(shù)作品:Ecotherapy


02

Forestscaping Identity

Pratyush Gupta(印度)

網(wǎng)站:https://swarpeti.com/


植樹造林有助于將貧瘠的土地開發(fā)成美麗的自然景觀,有助于實(shí)現(xiàn)生態(tài)保護(hù)目標(biāo)。土地被恢復(fù)到自然狀態(tài),便可以作為一個(gè)原始森林,一個(gè)鳥類棲息地,一個(gè)開花的奇跡,一個(gè)冥想的荒野或一個(gè)私人自然保護(hù)區(qū)。


Forestscaping視覺(jué)識(shí)別的核心是一個(gè)自信和優(yōu)雅的葉子標(biāo)識(shí)。一片小小的葉子從logo的G中發(fā)芽——微妙地提到了森林和葉子的最初的聯(lián)系。靈感來(lái)自印度部落藝術(shù),一個(gè)動(dòng)態(tài)的插圖語(yǔ)言融合了森林,動(dòng)物和人,創(chuàng)造出各種各樣的森林景觀。










黃色:

知識(shí)、冥想、秩序


黃色是知識(shí)和學(xué)習(xí)的標(biāo)志。它象征著冥想、能力和心智的發(fā)展。印度有不少人信奉毗濕奴,他是天的“維護(hù)”之神。依照印度教說(shuō)法,毗濕奴(Vi??u)以迷惑羅剎等惡鬼神,維護(hù)世界的秩序。而毗濕奴身穿的則是黃衣,象征著他為知識(shí)的化身。


art vi??u via.Marina Diulina


01

Fresty

Rhea Jain(印度)


印度平面設(shè)計(jì)師Rhea Jain為飲料品牌Fresty創(chuàng)造了概念性包裝設(shè)計(jì),這是一種將傳統(tǒng)飲品變?yōu)樗谔嵘窨谖镀姆椒?,旨在抵御炎熱的夏季。從?jīng)典生姜到濃郁芒果的口味,這五款蘇打汽水飲料所帶來(lái)的驚喜是無(wú)與倫比的。然而,雖然飲料本身的口味呈現(xiàn)出相當(dāng)奇妙的感覺(jué),但包裝風(fēng)格卻是偏傳統(tǒng)和懷舊。包裝正面的幾何元素設(shè)計(jì)簡(jiǎn)約而醒目,這樣盡管整體使用了柔和色調(diào),并不會(huì)因此而削弱產(chǎn)品口味的興奮感。








02

Alikemom Brochure Design

Parth Gupta(印度)

網(wǎng)站:https://builtbydezine.github.io/portfolio/


Alikemom是印度班加羅爾的一家創(chuàng)新食品公司,專注于向遠(yuǎn)離家鄉(xiāng)的年輕人提供有媽媽味道的食物。Alikemom需要一本宣傳冊(cè)來(lái)宣傳他們品牌和提供的服務(wù),同時(shí)強(qiáng)調(diào)其背后的價(jià)值。設(shè)計(jì)保持簡(jiǎn)單而有吸引力,注重品牌價(jià)值,使用亮眼的色彩和醒目的字體。







白色:

純粹、睿智


作為七色的混合——白色,它不同程度地象征了每一種顏色的品性。白色則是純粹、整潔、睿智的象征,印度亦隨處可見(jiàn)粉刷白色外墻的廟宇。



01

Pune Design Festival Rebrand

Atharv Kotkar(印度)


來(lái)自印度的設(shè)計(jì)師Atharv Kotkar將匯集了一群塑造全球設(shè)計(jì)生態(tài)系統(tǒng)的優(yōu)秀設(shè)計(jì)師的普納設(shè)計(jì)節(jié)作為案例研究分析。這是每個(gè)人都不可錯(cuò)過(guò)的設(shè)計(jì)盛典。設(shè)計(jì)師用黑白色調(diào)作為主視覺(jué),混合了不同領(lǐng)域和專業(yè)的邊界,在此尋找超越自己的機(jī)會(huì)。








02

二次創(chuàng)作知名品牌

Kunel Gaur(印度)



Kunel Gaur是一位來(lái)自印度的藝術(shù)家,同時(shí)他也是Animal advertising agency的創(chuàng)始人,他決定將一些知名的全球品牌,轉(zhuǎn)變?yōu)橐环N看起來(lái)原始且未經(jīng)修飾的樣子。Kunel Gaur試圖通過(guò)這樣的嘗試,來(lái)傳達(dá)這種極簡(jiǎn)主義的品牌傳播方式。


當(dāng)中包括的都是我們熟悉的品牌:可樂(lè)和KFC的包裝設(shè)計(jì)由鮮艷的紅色換成黑白設(shè)計(jì),薯片、巧克力和雪糕等令人垂涎的零食也由原本吸引人的顏色轉(zhuǎn)為黑白設(shè)計(jì)。跟我們?nèi)粘R?jiàn)到的大相徑庭,同時(shí)色調(diào)也調(diào)配得十分好,宛然一件藝術(shù)品。









紅色:

生命、活力、熱情


藏紅色代表著生命、活力、朝氣和熱情,它是火的象征,由于不純潔之物一般以火焚燒,所以這種顏色同樣亦是純潔的標(biāo)志,也象征著宗教上的節(jié)制。它是圣者和退隱的苦行者的顏色,紅色表達(dá)了對(duì)光明的祈求。


REALITY BEHIND INCREDIBILITY


01

KICKIN

Yash Tambe(印度)

INS@tambe.psd



Yash Tambe是一名來(lái)自印度的建筑系學(xué)生,但他對(duì)平面設(shè)計(jì)也十分有興趣,KICKIN是他的個(gè)人項(xiàng)目,兩年前深受希臘雕像和雕塑的影響,他設(shè)計(jì)了這組海報(bào)。Yash Tambe故意破壞畫面平衡感,制造出緊張感,還融合文字與視覺(jué)圖像進(jìn)行版式設(shè)計(jì),通過(guò)撞色和文字排版,展現(xiàn)平面的動(dòng)感。







02

Gift Box of Indian Spices

Meno Melo Studio(印度)


盒子的印花圖案來(lái)自古印度藝術(shù),如Gond、Pichwai和微型印刷藝術(shù)。這些藝術(shù)形式在平面的設(shè)計(jì)中具有平衡感和對(duì)稱感。它還以裝飾形式描繪了自然元素,紅色等亮眼色彩的印度藝術(shù)圖案總是有節(jié)日的氛圍。






印度人愛(ài)好和平、熱情善良,他們喜歡將所有美好的東西都與人分享,他們用豐富的色彩贈(zèng)予對(duì)方祝福,希望每個(gè)人在印度設(shè)計(jì)師的作品里能看到不一樣的印度。



編輯 | 馬君琳   

圖片 | 源自設(shè)計(jì)師網(wǎng)站及網(wǎng)絡(luò)

原文地址:站酷

作者:BranD雜志

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


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


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



交互設(shè)計(jì):如何做到驚喜?

seo達(dá)人

01
交互設(shè)計(jì)的驚喜,是什么?

之前的文章,有簡(jiǎn)單定義過(guò)交互設(shè)計(jì)的“驚喜”,即為:超出用戶預(yù)期,并讓用戶開心。

具體而言有兩類,分別是:小驚喜、大驚喜。

1 小驚喜

所謂小驚喜,是指一些頗具趣味性或人文屬性的交互設(shè)計(jì)小細(xì)節(jié)。


先說(shuō)趣味性。常見(jiàn)的有兩類,第一類是比較好玩的動(dòng)效,第二類是一些小功能。第二類有時(shí)也會(huì)包含第一類。

動(dòng)效這塊,大家比較熟悉的,有 iPhone 上刪除應(yīng)用前圖標(biāo)的抖動(dòng),仿佛是嚇的發(fā)抖,也可能是在搖頭求饒;還有移動(dòng)端登錄 B 站、輸入密碼時(shí),動(dòng)畫人物的捂眼捂臉動(dòng)作。

(B 站登錄頁(yè)面)

小功能這塊,也可以分成兩類。一類是隱藏的小功能,一類是有趣的小功能。


很多隱藏功能,頭幾次用的時(shí)候,多少會(huì)有一些驚喜之感。

比如在訂閱號(hào)消息列表頁(yè),某個(gè)公眾號(hào)你已經(jīng)幾個(gè)月沒(méi)看過(guò),對(duì)它失去了興趣和信任。這時(shí),嘗試長(zhǎng)按這個(gè)公眾號(hào)的頭像或名稱,會(huì)呼出一個(gè)包含“刪除消息”和“取關(guān)”功能的彈窗。

(訂閱號(hào)消息列表)

還有些隱藏功能,既能讓用戶覺(jué)得驚喜和方便,又能引發(fā)用戶思考。這種思考,可能會(huì)讓用戶感嘆設(shè)計(jì)之妙,也可能也會(huì)給用戶一種猜對(duì)謎語(yǔ)的欣喜之感。

比如用墨刀的時(shí)候,嘗試按數(shù)字鍵 1,會(huì)呼出“內(nèi)置組件”這個(gè)使用頻率非常高的功能,會(huì)讓人覺(jué)得墨刀很聰明。

如果再仔細(xì)看一下,會(huì)發(fā)現(xiàn),“內(nèi)置組件”的縮略圖標(biāo),和其他 4 個(gè)諸如“我的組件”、“圖標(biāo)”等功能的縮略圖標(biāo),并成一列。這 5 個(gè)縮略圖標(biāo)的排列順序(上到下),和它們快捷鍵("、"鍵和數(shù)字鍵1、2、3、4)的排列順序(左到右),是完全一致的。不得不說(shuō),這是一個(gè)簡(jiǎn)單又巧妙的設(shè)計(jì)。


再比如朋友圈里,某個(gè)不熟的好友每天都發(fā)集贊的小廣告,搞的我們不勝其煩。長(zhǎng)按其頭像,會(huì)呼出設(shè)置權(quán)限(屏蔽等)的功能。

有意思的是,長(zhǎng)按好友名字,則不會(huì)呼出這個(gè)功能。要知道點(diǎn)擊頭像或名字是都能進(jìn)入好友主頁(yè)的;另外剛才那個(gè)例子,長(zhǎng)按公眾號(hào)頭像或名字,也都能呼出取關(guān)的彈窗。

個(gè)人的理解,生活中,我們用力長(zhǎng)按一個(gè)人,通常是表達(dá)強(qiáng)烈不滿,比如打架時(shí)。比起長(zhǎng)按名字,長(zhǎng)按頭像更像是長(zhǎng)按真人,所以也更能表達(dá)我們的不滿。


說(shuō)完隱藏的小功能,再說(shuō)下有趣的小功能。比如微信聊天里的扔骰子、石頭剪刀布,微信給朋友發(fā)生日快樂(lè)后漫天飄落的蛋糕,拍照軟件里的貼紙,等等。

最后說(shuō)下帶有人文屬性的交互設(shè)計(jì)小細(xì)節(jié)。常見(jiàn)的有如下類型:幫助弱勢(shì)、關(guān)照情緒、表達(dá)情感、保護(hù)隱私。


幫助弱勢(shì)這塊,比如 iPhone 的輔助功能,里面有針對(duì)視力障礙的放大鏡功能、有針對(duì)不識(shí)字群體的旁白功能。

關(guān)照情緒這塊,很重要的一點(diǎn),就是避免引起用戶的負(fù)面情緒。比如微信的刪好友是單方面刪除,被刪時(shí)我們很難察覺(jué)到,而且微信也不會(huì)通知我們。個(gè)人覺(jué)得,微信之所以不通知我們,其中一點(diǎn),就是不給我們添堵。類似的還有,微信消息沒(méi)有“已讀”功能,這就大大減輕了接收者的回復(fù)壓力。

表達(dá)情感這塊,比較為人所知的例子,5 月 20 號(hào)這天,微信紅包的限額,從 200 元升到了 520 元。還有一個(gè)例子,在微信聊天里發(fā)一個(gè)“ohh”,長(zhǎng)按并點(diǎn)翻譯,結(jié)果也是一個(gè)驚喜。

保護(hù)隱私這塊,比如借助 iPhone 的“引導(dǎo)式訪問(wèn)”功能,可以讓小朋友只能訪問(wèn)你的某個(gè)視頻應(yīng)用來(lái)看動(dòng)畫片。再比如別人用你電腦的時(shí)候,如果你不想讓對(duì)方看到你的微信,就可以通過(guò)手機(jī)微信來(lái)鎖定或退出電腦版微信。

2 大驚喜

所謂大驚喜,是指那些系統(tǒng)性大創(chuàng)新,并且能夠引領(lǐng)潮流、代表未來(lái)的交互設(shè)計(jì)。通常而言,這些大驚喜,最開始給用戶的感覺(jué),就是酷。

iPhone 就是典型例子之一 。

2007 年的初代 iPhone,帶來(lái)了當(dāng)時(shí)的大屏幕:3.5 寸屏幕,以及純觸摸屏,和極為靈敏的觸控體驗(yàn)。

2011 年,Siri 同 iPhone 4S 一起問(wèn)世,為我們帶來(lái)了語(yǔ)音交互。如今,在 100 元就能買到品牌類智能音響的情況下,依靠語(yǔ)音交互的智能音響也在慢慢走入尋常百姓家。

也許后喬布斯時(shí)代的 iPhone 創(chuàng)新不如以前,但不可否認(rèn)的是,時(shí)至今日,iPhone 依然在引領(lǐng)潮流,在給我們大驚喜。比如這幾年流行的手機(jī)無(wú)線充電和以 AirPods 為代表的極簡(jiǎn)的無(wú)線耳機(jī)。

以上是比較廣為人知的交互設(shè)計(jì),還有一些不太為人所知的設(shè)計(jì)。比如在家里網(wǎng)購(gòu)一條床單,但是不知道床的尺寸,家里又沒(méi)有尺子。這時(shí),打開 iPhone 里的測(cè)距儀這款 App,就可以量出床的尺寸,會(huì)不會(huì)覺(jué)得有點(diǎn)酷。

(測(cè)距儀 App)

微信在引領(lǐng)潮流方面也有一些建樹,比如極大的普及了二維碼和掃一掃。小程序作為一種體驗(yàn)接近原生 App、同時(shí)又不用下載的產(chǎn)品,也正在引領(lǐng)新一輪的潮流。

還有一個(gè)比較酷的功能,就是以圖搜圖。筆者最早用過(guò)百度和谷歌的相關(guān)功能,主要是在電腦上搜索相似的圖片,使用頻率極低。

假設(shè)一個(gè)場(chǎng)景,比如在路上看到一個(gè)陌生人的外套很好看,但又不好意思上前問(wèn),就可以拿起手機(jī),利用淘寶的拍立淘功能,拍張照就能馬上看到相同或相似的商品。

如果淘寶上沒(méi)有搜到類似商品,還可以用微信的掃一掃識(shí)物。和拍立淘相比,區(qū)別之處有兩點(diǎn)。第一,不用拍,直接能識(shí)別,不過(guò)通常得等 1-3 秒;第二,識(shí)物結(jié)果里面,除了商品,可能還會(huì)有百科詞條和資訊。


02
交互設(shè)計(jì):如何做到驚喜?

個(gè)人覺(jué)得,有 4 個(gè)要點(diǎn):既要有好奇心,又要有卓越心;既要天馬行空,又要保持自然。

聽(tīng)起來(lái)可能有點(diǎn)亂,且聽(tīng)筆者一一道來(lái)。


1 保持好奇心

筆者觀察身邊讀小學(xué)的小孩,發(fā)現(xiàn),當(dāng)大人聊天時(shí),特別是談?wù)聲r(shí),小孩特別喜歡坐在旁邊聽(tīng),而且聽(tīng)的很認(rèn)真。小孩有時(shí)也會(huì)說(shuō)兩句,或是問(wèn)問(wèn)題,或是發(fā)表自己的看法。

看得出來(lái),小孩對(duì)成年人的世界,懷有極大的好奇心。實(shí)際上,不止于成年人的世界,小孩對(duì)周遭世界都有比較強(qiáng)烈的好奇心。

整體而言,成年人對(duì)周遭世界的好奇心,遠(yuǎn)不如小孩。我們互聯(lián)網(wǎng)從業(yè)者也不例外。

好奇心和交互設(shè)計(jì),有什么關(guān)系?

交互設(shè)計(jì),某種程度上,也是一種創(chuàng)作。好的創(chuàng)作,一定來(lái)自生活。這就需要我們?nèi)ビ^察生活。

觀察生活,非常重要的一點(diǎn),就是好奇心,對(duì)周遭人、事、物要有足夠的好奇心。

比如上文提到的例子,在 iPhone 上刪除應(yīng)用前,應(yīng)用圖標(biāo)會(huì)抖。這種抖是一種趣味隱喻,既可以理解成嚇的發(fā)抖,也可以理解成搖頭求生。如果對(duì)生活沒(méi)有足夠的好奇心,是很難留意到這種生活細(xì)節(jié),并把它們作為一種隱喻運(yùn)用到交互設(shè)計(jì)中的。

以上是關(guān)于好奇心,還有一種特質(zhì),也是在小孩身上表現(xiàn)突出,同時(shí)也和本文主題有關(guān),那就是:童趣。

還是上文的例子,在 B 站 App 上輸入登錄密碼時(shí),動(dòng)畫人物會(huì)捂眼睛。這個(gè)設(shè)計(jì),可能不會(huì)打動(dòng)所有用戶,但至少一部分用戶會(huì)覺(jué)得比較有趣。如果我們內(nèi)心沒(méi)有一點(diǎn)童趣,可能也會(huì)覺(jué)得,這個(gè)設(shè)計(jì),沒(méi)啥意思。

玩是人的天性。對(duì)于比較好玩的交互設(shè)計(jì),大部分人是比較容易產(chǎn)生共鳴的。實(shí)際上,據(jù)筆者觀察,我們大部分從業(yè)者是有童趣的。我們比較缺的,是好奇心。

那么,怎樣判斷自己是否擁有足夠的好奇心,其標(biāo)志是什么?

個(gè)人觀點(diǎn),有兩個(gè)標(biāo)志。第一,是對(duì)與個(gè)人利益無(wú)關(guān)的生活小事的關(guān)注,遠(yuǎn)多于對(duì)個(gè)人利益本身的關(guān)注。第二,觀察和思考,遠(yuǎn)多于評(píng)價(jià)和自大;追本和溯源,遠(yuǎn)多于偏見(jiàn)和傲慢。

為什么會(huì)提到個(gè)人利益?

因?yàn)?,通常而言,個(gè)人利益,尤其是短期利益(比如少花時(shí)間設(shè)計(jì)和修改原型),往往會(huì)和用戶體驗(yàn)存在一個(gè)此消彼長(zhǎng)的關(guān)系。

如果過(guò)于關(guān)注個(gè)人利益,不僅很難照顧到用戶體驗(yàn),甚至?xí)τ脩趔w驗(yàn)。至于給用戶帶來(lái)驚喜,就更無(wú)從談起了。

回到現(xiàn)實(shí)當(dāng)中。在時(shí)代洪流面前,好奇心的兩個(gè)標(biāo)志,顯得很難,該如何實(shí)現(xiàn)?

關(guān)鍵在于找到背后的源動(dòng)力。這個(gè)源動(dòng)力,在筆者看來(lái),有兩點(diǎn),分別是:求知若渴、淡泊寧?kù)o。


求知若渴,可以源源不斷的驅(qū)動(dòng)我們?nèi)ビ^察、去思考萬(wàn)事萬(wàn)物的規(guī)律和聯(lián)系。

淡泊寧?kù)o,正如諸葛亮在《誡子書》中所說(shuō),“非淡泊無(wú)以明志,非寧?kù)o無(wú)以致遠(yuǎn)”。人的心力和精力終歸是有限的,如果我們沉迷名利、物欲、享樂(lè),就難有興趣和精力去琢磨萬(wàn)事萬(wàn)物了。

所以,只要找回自己童年的那種求知若渴,同時(shí)修身養(yǎng)性到淡泊寧?kù)o,這份好奇心,就會(huì)回來(lái)。

2 巧妙融合

某種程度上,很多帶給我們驚喜的交互設(shè)計(jì),都是一種巧妙融合。

筆者把這種巧妙融合,初步分成了三類,分別是:簡(jiǎn)單融合、直接融合、委婉融合


簡(jiǎn)單融合,最常見(jiàn)的就是隱藏功能。把一個(gè)較為簡(jiǎn)單的操作動(dòng)作,比如長(zhǎng)按、雙擊、下拉、左滑等,和一個(gè)合適的功能,融合在一起。用電腦時(shí)我們常說(shuō)的快捷鍵,也屬于這一類。

通常而言,操作對(duì)應(yīng)什么功能,講究的是合適,并無(wú)固定章法束縛。比如在微信朋友圈,發(fā)表文字的功能可以靠長(zhǎng)按(相機(jī)圖標(biāo))喚起,設(shè)置權(quán)限的功能也可以靠長(zhǎng)按(好友頭像)喚起。所以,簡(jiǎn)單融合這塊,可供我們發(fā)揮的空間很大。

另外,簡(jiǎn)單融合最常見(jiàn)的形式——隱藏功能,既實(shí)現(xiàn)了界面的簡(jiǎn)潔,又帶來(lái)了一定驚喜。

簡(jiǎn)單融合,既簡(jiǎn)單,又實(shí)用。建議大家充分開發(fā)這一塊。

直接融合,是指將生活中的趣味性,直接搬到軟件中,搬到交互設(shè)計(jì)中。比如微信聊天中的扔骰子、石頭剪刀布,以及漂流瓶、抽獎(jiǎng)等。

這一類融合,有點(diǎn)像商場(chǎng)里的電玩城,雖然我們不會(huì)經(jīng)常去玩,但確實(shí)比較好玩。

委婉融合,是指用明喻或隱喻的手法,將生活中微不足道的一些細(xì)節(jié),移植到交互設(shè)計(jì)中。

這種移植,有時(shí)是直白的。比如 Mac 上打開應(yīng)用時(shí),其圖標(biāo)會(huì)在 dock 欄里有規(guī)律的彈跳,這會(huì)讓我們聯(lián)想到皮球的彈跳。

這種移植,有時(shí)是隱晦的。比如 iPhone 上刪除應(yīng)用前,其圖標(biāo)會(huì)抖。這種抖,是害怕還是求饒,任憑我們想象。

這種移植,有時(shí)是無(wú)聲的。比如在朋友圈,要想呼出隱藏的設(shè)置權(quán)限功能,只能長(zhǎng)按頭像,長(zhǎng)按名字則不行。這個(gè)設(shè)計(jì),不乏想象空間。如果不嘗試長(zhǎng)按名字,則不會(huì)發(fā)現(xiàn)這個(gè)細(xì)節(jié)。

委婉融合,有時(shí)會(huì)帶一些趣味性。更為重要的是,它能夠引發(fā)我們的思考和想象,所以是一種很出彩的融合。這種融合,也會(huì)賦予交互設(shè)計(jì),一種禪的味道。

整體而言,筆者非常推薦委婉融合。

3 追求卓越

如果目標(biāo)是小驚喜,則保持好奇心、并做到巧妙融合,基本足矣。

如果目標(biāo)是大驚喜,則需要雄心壯志,需要舍我其誰(shuí),需要追求卓越。

日常工作中,可能會(huì)有這樣的對(duì)話。“這個(gè)動(dòng)效/功能,實(shí)現(xiàn)不了”。

大驚喜里的幾個(gè)例子,比如初代 iPhone 的觸控體驗(yàn),iPhone 里的測(cè)距儀,微信的掃一掃識(shí)物。這種設(shè)計(jì),意味著要修一條最好的長(zhǎng)城,背后往往有很多技術(shù)難題要攻克,有很多臟活累活要做。

如果團(tuán)隊(duì)文化就是做出最優(yōu)秀的交互設(shè)計(jì),那么,“實(shí)現(xiàn)不了”這句話,估計(jì)就聽(tīng)不到了。取而代之的,可能是:“還在研究中”,“下個(gè)大版本能上”。

4 自然而然

提到驚喜,還有一款值得研究和學(xué)習(xí)的產(chǎn)品,那就是錘子手機(jī)的 Smartisan OS。

個(gè)人觀點(diǎn),在小驚喜方面,Smartisan OS 頗有建樹。在大驚喜方面,Smartisan OS 也進(jìn)行了一些值得學(xué)習(xí)的探索。

先說(shuō)小驚喜,比如華麗而細(xì)膩的桌面翻頁(yè)動(dòng)畫,比如四指橫劃桌面可以切換桌面背景。還有一些貼心的小功能,比如靜音可以設(shè)置時(shí)間,比如方便的長(zhǎng)截屏。

(靜音可設(shè)置時(shí)間)

(長(zhǎng)截屏)

再說(shuō)大驚喜。2016 年 10 月發(fā)布的一步和大爆炸,是比較大比較系統(tǒng)的功能,在當(dāng)時(shí)也很新。錘子公司也一直有宣傳這兩個(gè)功能。所以相對(duì)而言,這兩個(gè)功能是 Smartisan OS 的大驚喜。

筆者的備用機(jī)是錘子手機(jī),身邊也有朋友在用錘子手機(jī)。以一步為例,這個(gè)功能,筆者體驗(yàn)過(guò)很多次。但平常很少用,身邊朋友的情況也類似。

(一步)

根據(jù)使用情況和主觀感受,個(gè)人覺(jué)得,一步這個(gè)大驚喜,還存在進(jìn)步空間,主要有兩個(gè)方面。

第一,宏觀層面。一步作為新生事物,好比一顆新種子。種子破土而出時(shí),是一顆嫩芽,而不是一棵大樹。新生的一步功能繁多,猶如一棵破土而出的大樹,一方面有違自然規(guī)律,另一面因?yàn)楣δ芊倍?,很多用戶無(wú)法一下子看懂,看不懂可能就不想用了。

第二,微觀層面。一步這棵新大樹,結(jié)了很多不同的果子,比如拖拽圖片到其他應(yīng)用、切換后臺(tái)應(yīng)用、展示最近圖片/文件等。這些果子,是用戶真正需要的嗎?這個(gè)是要存疑的。

比如拖拽圖片到朋友圈就能發(fā)朋友圈這個(gè)設(shè)計(jì)。通常而言,我們發(fā)到朋友圈的圖片都是精挑細(xì)選的,會(huì)占用一定量的時(shí)間,比如旅游或聚會(huì)結(jié)束后發(fā)的照片。一步解決的是效率問(wèn)題。發(fā)朋友圈的時(shí)候,少點(diǎn)幾下這種效率問(wèn)題,優(yōu)先級(jí)是比較靠后的,我們沒(méi)那么在乎。

還有拖拽圖片/文件這個(gè)交互動(dòng)作,大家通常在電腦上用的比較多,在手機(jī)上是沒(méi)有這個(gè)習(xí)慣的,實(shí)際上應(yīng)用場(chǎng)景也少。在手機(jī)上,大家一般只習(xí)慣拖拽應(yīng)用圖標(biāo)。

還有切換后臺(tái)應(yīng)用這塊,大家第一個(gè)想到的,一定是系統(tǒng)自帶的,已經(jīng)用慣了。而且喚起速度比一步快,點(diǎn)擊面積也比一步大。

總的來(lái)說(shuō),微觀層面上,比較缺讓大家能馬上想到一步的功能點(diǎn)。

最后,總結(jié)一下。對(duì)于領(lǐng)先時(shí)代、引領(lǐng)潮流的交互設(shè)計(jì),需要做到自然。

具體而言,就是,大驚喜是一種系統(tǒng)性的大功能,好比一棵大樹。這棵大樹,最好有一個(gè)從種子到果子的生長(zhǎng)過(guò)程,這樣最自然,生命力也會(huì)最旺盛。

因?yàn)?,從破土而出的嫩芽階段,就可以通過(guò)用戶反饋和數(shù)據(jù)來(lái)檢驗(yàn),這種嫩芽,是不是真的對(duì)用戶有價(jià)值。如果價(jià)值不大或沒(méi)有價(jià)值,還可以再調(diào)整。如果長(zhǎng)成大樹結(jié)滿果子,再去調(diào)整,就很難了。


結(jié)語(yǔ)

交互設(shè)計(jì)小細(xì)節(jié),如果有一定的趣味性或人文屬性,則是小驚喜。

系統(tǒng)性工程的交互設(shè)計(jì),如果最初感覺(jué)很酷,而且能引領(lǐng)潮流、代表未來(lái),則是大驚喜。

始終保持孩童身上那種非功利的好奇心,用心觀察并思考生活中的小事;

將生活小事和交互設(shè)計(jì)巧妙融合起來(lái);

以上兩點(diǎn),可以幫我們做出小驚喜類的交互設(shè)計(jì)。

追求卓越,獨(dú)立思考,做最酷最好的交互設(shè)計(jì);

酷是結(jié)果也好,是目標(biāo)也好,都不是最重要的。最重要的是,避免刻意和心切。醞釀大驚喜,猶如培養(yǎng)一個(gè)新生的孩子,需要投入極大耐心和精力,需要讓孩子自然成長(zhǎng)。沒(méi)有家長(zhǎng)會(huì)教半歲的孩子唱歌、把 3 歲的孩子送到高中念書。

再加上以上兩點(diǎn),可以幫我們做出大驚喜類的交互設(shè)計(jì)。

最后,用愛(ài)因斯坦的一句話來(lái)共勉。

想象力比知識(shí)更重要。

原文地址:站酷

作者:snowdesign

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


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


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



盛夏的元宇宙之旅-玩轉(zhuǎn)電子沙盤

seo達(dá)人


圖片

經(jīng)過(guò)前期的調(diào)研和分析,以及結(jié)合相關(guān)的業(yè)務(wù)訴求,確定了我們的項(xiàng)目目標(biāo),那就是要做出一款為新房營(yíng)銷賦能的設(shè)計(jì)工具,同時(shí)也總結(jié)出好的電子沙盤要同時(shí)具有這四個(gè)方面的特性:

圖片

圖片

 

1、效果真實(shí)自然

電子沙盤要傳達(dá)的是真實(shí)的地形地貌等信息,使用戶在觀看時(shí)要有身臨其境之感,因此在最終效果上要力求最真實(shí)自然的視覺(jué)體驗(yàn),為用戶呈現(xiàn)最好的效果。

圖片

圖片

 

2、覆蓋類型廣泛

在模型的品類方面力求多樣化,這樣整個(gè)場(chǎng)景才會(huì)更接近真實(shí)的效果,在項(xiàng)目中我們使用模塊化的方式,創(chuàng)建了項(xiàng)目資源庫(kù),達(dá)到了建筑、植被、健身器材、公共設(shè)施等全品類覆蓋、共產(chǎn)出植物模型17種,建筑模型36種,器材設(shè)施類模型22種、UE4引擎材質(zhì)260多種,為最終效果的實(shí)現(xiàn)起到了決定性的作用。

圖片

圖片

 

3、模型細(xì)節(jié)精細(xì)

除了周邊環(huán)境要真實(shí)自然,小區(qū)內(nèi)每棟樓的建筑細(xì)節(jié)也非常的豐富,以真實(shí)的建筑結(jié)構(gòu)信息來(lái)進(jìn)行模型制作,用戶在使用時(shí)能夠查看到樓盤內(nèi)每一棟建筑的外觀和結(jié)構(gòu)細(xì)節(jié)。

圖片

圖片

 

4、生成策略豐富

區(qū)別于傳統(tǒng)的手動(dòng)建模方式,我們?cè)趯?shí)施階段采用了模塊化資源+智能化生成的方式,首先在數(shù)據(jù)層級(jí)對(duì)整個(gè)項(xiàng)目區(qū)域根據(jù)功能進(jìn)行劃分,針對(duì)每一類區(qū)塊都進(jìn)行了相應(yīng)的生成策略的設(shè)計(jì)。共產(chǎn)出擺放規(guī)則36種,精細(xì)到每一處細(xì)節(jié)都有相應(yīng)的生成規(guī)則。

接下來(lái)的部分我們就選取幾種比較典型的區(qū)域擺放規(guī)則看一下。

圖片

圖片

 

圖片

根據(jù)當(dāng)前項(xiàng)目特點(diǎn),在具體實(shí)施階段我們采用了數(shù)據(jù)輸入和智能化生成的整體策略。

 

1、本案小區(qū)樓棟:

樓棟的建模使用了模塊化的方式,使用預(yù)制的窗戶,外墻等模型部件按照規(guī)則將不同的組合部件結(jié)合在一起生成整體的樓棟。

圖片

2、小區(qū)入口:

入口處大門的生成,首先需要在初始數(shù)據(jù)中輸入入口的信息,然后根據(jù)設(shè)計(jì)規(guī)則使用模型庫(kù)中預(yù)制的模塊生成入口大門。

圖片

 

3、道路生成:

根據(jù)道路結(jié)構(gòu)進(jìn)行數(shù)據(jù)的分層拆分,然后再將各部分模型組合起來(lái)形成道路,這樣就方便了后期添加沿路的樹木,以及根據(jù)車道信息添加車輛等等。

圖片

 

4、配電房,設(shè)備用房:

小區(qū)內(nèi)的配電房,設(shè)備房等首先劃定區(qū)域數(shù)據(jù),然后選擇合適尺寸的模型進(jìn)行擺放,最后做頂點(diǎn)拉伸處理。

圖片

 

5、底商商鋪:

底商的生成與設(shè)備房等類似,但是也有一些區(qū)別,由于每個(gè)樓盤的底商區(qū)域尺度不同,所以要對(duì)模型進(jìn)行相應(yīng)的拉伸去適應(yīng)相應(yīng)的區(qū)域大小,底商部分我們采用了整體拉伸的方式,這樣不會(huì)破壞模型上的一些結(jié)構(gòu)細(xì)節(jié)。

圖片

 

6、小區(qū)廣場(chǎng):

小區(qū)廣場(chǎng)的效果相對(duì)來(lái)說(shuō)比較豐富,模型種類比較多,不適合使用拉伸的方式去生成,這部分采用了對(duì)不同功能的設(shè)備進(jìn)行分塊的方式,比如兒童游樂(lè)設(shè)施,成人健身器材等,通過(guò)不同的組合可以生成多種方案。

圖片

 

7、地形生成:

地形的創(chuàng)建要依據(jù)真實(shí)的地理信息數(shù)據(jù)來(lái)制作,以保證電子沙盤真實(shí)的參考性,這部分我們使用了當(dāng)下比較先進(jìn)的智能化解決方案,根據(jù)數(shù)據(jù)將地面,道路,水系,植被,建筑等分層創(chuàng)建,最終在虛幻引擎中進(jìn)行整合渲染。

 

圖片

這部分看下電子沙盤現(xiàn)階段的最終效果:(點(diǎn)擊圖片前往原文觀看視頻)

 

圖片

經(jīng)過(guò)大家的努力,最終我們的電子沙盤獲得了各方的認(rèn)可,在制作過(guò)程中也收獲了不少寶貴的經(jīng)驗(yàn),總結(jié)如下:

重視排期和做好階段性任務(wù)的拆分:由于項(xiàng)目周期比較長(zhǎng),所以整個(gè)項(xiàng)目必須有統(tǒng)一的階段性規(guī)劃和排期,按照統(tǒng)籌好的計(jì)劃來(lái)一步一步實(shí)現(xiàn)目標(biāo)。

項(xiàng)目參與人員之間的溝通很重要:每個(gè)成員之間對(duì)于進(jìn)度和過(guò)程中遇到的問(wèn)題必須及時(shí)同步和提出,尤其對(duì)于跨部門合作的項(xiàng)目來(lái)說(shuō),這一點(diǎn)尤為重要。

項(xiàng)目的完成離不開大家的共同努力,在此對(duì)所有人表示感謝。


作者:環(huán)鐵藝術(shù)家

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》盛夏的元宇宙之旅-玩轉(zhuǎn)電子沙盤

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


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


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


2022 PANTONE 最美色彩來(lái)啦!

seo達(dá)人

一、全新Post-It®Notes

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

圖片

 Post-it Notes 

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

 

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

1、花卉幻想

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

2、能量激發(fā)

圖片

這個(gè)系列中活力四射的色彩能點(diǎn)亮您的心情,讓訊息清晰透徹。

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

3、單純靜謐

圖片

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

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

 

二、多彩的元宇宙

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

圖片

1、視覺(jué)語(yǔ)言

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

圖片

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

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

圖片

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

圖片

三、提契諾的色彩

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

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

icino Turismo 與彩通色彩研究所合作精選出五種最能代表提契諾的色彩,用來(lái)傳達(dá)春夏兩季訪客在當(dāng)?shù)厮?jiàn)識(shí)到的美景與快樂(lè)體驗(yàn)。

圖片

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

 

四、周大福的色彩

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

圖片

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

圖片

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

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

圖片

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

 

五、西派金銅  City Park Golden Brass

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

圖片

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

圖片

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


作者:劉濤

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

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


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


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



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

seo達(dá)人

案例一:樂(lè)樂(lè)茶產(chǎn)品海報(bào)

圖片

 

01.案例名稱

品牌:樂(lè)樂(lè)茶     項(xiàng)目:產(chǎn)品促銷海報(bào)設(shè)計(jì)     

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

 

02.案例目的

宣傳88品牌日活動(dòng)期間,購(gòu)買草莓桃子超萌杯只要8.8元,以此作為噱頭吸引消費(fèi)者進(jìn)店下單。

 

03.案例標(biāo)簽

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

 

04.案例亮點(diǎn)

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

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

 

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

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

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

圖片

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

 

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

? 兩行中文標(biāo)題之間的空白有點(diǎn)太大了,中間的英文可以往左邊再一點(diǎn),英文的字間距可以大一點(diǎn)點(diǎn)。

圖片

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

圖片

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

 

07.啟發(fā)與思考

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

? 如果品牌的目標(biāo)消費(fèi)群是年輕人,那么其設(shè)計(jì)可以用非常時(shí)尚、酷炫,甚至是個(gè)性的設(shè)計(jì)風(fēng)格。

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

 

 

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

圖片

圖片

圖片

這款包裝由知名設(shè)計(jì)公司喜鵲包裝實(shí)驗(yàn)室設(shè)計(jì)。

 

01.案例名稱

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

 

02.案例目的

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

? 打造一個(gè)具有高識(shí)別性和銷售力的視覺(jué)形象,帶動(dòng)銷售。

 

03.案例標(biāo)簽

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

 

04.案例亮點(diǎn)

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

? 包裝的整體形象簡(jiǎn)單、高端、且獨(dú)具特色。

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

 

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

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

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

圖片

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

? 包裝正面的形象非常簡(jiǎn)單只突出品牌logo、餐品名、ip形象。

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

圖片

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

 

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

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

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

圖片

 

07.啟發(fā)與思考

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

? 減少干擾、讓你的包裝有且只有一個(gè)焦點(diǎn)。

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


作者:蔥爺

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

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


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


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



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

seo達(dá)人

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

每種類型的網(wǎng)格都有不同的用途,通過(guò)了解不同的網(wǎng)格類型幫助我們?cè)谠O(shè)計(jì)的時(shí)候匹配最合適的網(wǎng)格。

 

1、 基線網(wǎng)格

圖片

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

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

圖片

 

2、單欄網(wǎng)格

圖片

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

 

3、分欄網(wǎng)格

圖片

圖片

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

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

圖片

 

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

圖片

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

 

5、像素網(wǎng)格

圖片

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

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

圖片

 

6、層級(jí)網(wǎng)格

圖片

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

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

圖片

 

 

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

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

 

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

圖片

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

 

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

圖片

當(dāng)接到一個(gè)全新的需求時(shí),很多設(shè)計(jì)師習(xí)慣以常用的網(wǎng)格和欄寬作為標(biāo)準(zhǔn)開始設(shè)計(jì)。

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

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

圖片

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

圖片

 

4、不要忘記基線對(duì)齊

圖片

確?;诹械脑O(shè)計(jì)中的所有文本遵循一致的基線,這樣可以大大改善頁(yè)面的和諧感和組織感。

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

 

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

圖片

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

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

最后

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


作者:Clippp

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

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


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


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



如何通過(guò)設(shè)計(jì)語(yǔ)言手冊(cè)來(lái)傳遞品牌理念!

seo達(dá)人


圖片

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

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

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

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

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

圖片

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

 

 

圖片

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

圖片

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

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

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

圖片

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

 

 

圖片

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

干凈明亮 

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

圖片

 

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

專業(yè) 

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

高效 

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

親和力 

服務(wù)行業(yè)需必備的能力,微笑服務(wù)也成為了我們的業(yè)務(wù)情感透?jìng)鳂?biāo)準(zhǔn)。提煉出微笑符號(hào)結(jié)合我們的實(shí)際場(chǎng)景進(jìn)行運(yùn)用!

慢生活… 

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

 

 整體架構(gòu) 

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

圖片

 柵格系統(tǒng) 

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

圖片

 文本原則  

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

圖片

 間距參數(shù)  

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

圖片

 圓角參數(shù)  

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

圖片

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

 

 

圖片

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

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


作者:58UXD

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》如何通過(guò)設(shè)計(jì)語(yǔ)言手冊(cè)來(lái)傳遞品牌理念!

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


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


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



日歷

鏈接

個(gè)人資料

存檔