首頁(yè)

折頁(yè)設(shè)計(jì):中國(guó)風(fēng)折頁(yè)設(shè)計(jì)!

藍(lán)藍(lán)設(shè)計(jì)的小編

小編休假回來(lái)了,今天第一篇推送的是中國(guó)風(fēng)的折頁(yè)設(shè)計(jì),內(nèi)容不重要,看板式!往下走!

什么是設(shè)計(jì)?怎么設(shè)計(jì)?設(shè)計(jì)是什么?

藍(lán)藍(lán)設(shè)計(jì)的小編

有人問(wèn)我什么是設(shè)計(jì)?什么是創(chuàng)意?之前我覺得創(chuàng)意是天馬行空,設(shè)計(jì)是胡思亂想,想象力是造出一些不靠譜的東西,直到五年前,有一天晚上,突然覺得創(chuàng)意,設(shè)計(jì)像水,因?yàn)樗疅o(wú)形,無(wú)色,無(wú)味,到杯子里就是杯子的形態(tài),遇到咖啡就是咖啡的顏色,遇到糖就是糖的味道。水是最具想象力的東西,可以變成雨,變成冰。設(shè)計(jì)是科技與藝術(shù)的產(chǎn)物,是商業(yè)社會(huì)的產(chǎn)物,在商業(yè)社會(huì)中需要藝術(shù)設(shè)計(jì)與創(chuàng)作理想的平衡,需要客觀與克制,需要借作者之口替委托人說(shuō)話。設(shè)計(jì)即要符合審美性又要具有實(shí)用性、替人設(shè)想、以人為本,服務(wù)人類。平面設(shè)計(jì)則包含很多領(lǐng)域的創(chuàng)造性視覺藝術(shù)學(xué)科,即用視覺語(yǔ)言進(jìn)行傳遞信息和理念。 

設(shè)計(jì)圖集:創(chuàng)意廣告設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

作為一名設(shè)計(jì)師,腦洞是很重要的,雖有一些不切實(shí)際,不過(guò)是你對(duì)這個(gè)世界看到的經(jīng)過(guò)反思之后的一種再加工,每個(gè)人不可能閉門造車“生”原創(chuàng)的。你必須經(jīng)歷這個(gè)過(guò)程。


UI設(shè)計(jì)中的字體字形設(shè)計(jì)

博博

UI設(shè)計(jì)中的字體字形設(shè)計(jì)

斌斌UI 2017-02-22 09:46:47

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

年后是找工作的高峰期,特開此頭條號(hào)給各位準(zhǔn)UI從業(yè)者一些我在工作中遇見的問(wèn)題,希望對(duì)大家有所幫助。


平面設(shè)計(jì)中,字體的地位越來(lái)越重要,不管是海報(bào)、畫冊(cè)、折頁(yè)、網(wǎng)頁(yè)、UI設(shè)計(jì)什么,Banner,只要是需要視覺傳達(dá)的設(shè)計(jì)中,都需要文字作為主要突出傳播角度。

字體拆分再造。是字體設(shè)計(jì)中非常重要的一個(gè)設(shè)計(jì)點(diǎn)。也是我們?cè)O(shè)計(jì)師常用的一種方法。

下面,我給大家舉個(gè)例子,看看字體再設(shè)計(jì)應(yīng)該如何去改造!

UI設(shè)計(jì)中的字體字形設(shè)計(jì)

UI設(shè)計(jì)中的字體字形設(shè)計(jì)

UI設(shè)計(jì)中的字體字形設(shè)計(jì)

UI設(shè)計(jì)中的字體字形設(shè)計(jì)

UI設(shè)計(jì)中的字體字形設(shè)計(jì)

UI設(shè)計(jì)中的字體字形設(shè)計(jì)

UI設(shè)計(jì)中的字體字形設(shè)計(jì)

UI設(shè)計(jì)中的字體字形設(shè)計(jì)

UI設(shè)計(jì)中的字體字形設(shè)計(jì)

UI設(shè)計(jì)中的字體字形設(shè)計(jì)

UI設(shè)計(jì)中的字體字形設(shè)計(jì)


好了,這就是本期的字形設(shè)計(jì)例子,在大家日常字體設(shè)計(jì)中,多注意字體的偏旁部首,想下如何拆分重組。多去試。


如果我的文章對(duì)大家有所幫助,希望您點(diǎn)擊+關(guān)注,對(duì)我及我的文章有什么建議或者意見,歡迎您在下方評(píng)論區(qū)評(píng)論,您的關(guān)注是我最大的動(dòng)力

藍(lán)藍(lán)設(shè)計(jì)bouu.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ù)

年中購(gòu)物節(jié)618,帶你看線上活動(dòng)的套路

博博

年中購(gòu)物節(jié)618,帶你看線上活動(dòng)的套路

人人都是產(chǎn)品經(jīng)理 2018-06-18 08:28:20

眼下只要打開手機(jī)的各種購(gòu)物app,映入眼簾的全都是各種618購(gòu)物節(jié)的打折促銷活動(dòng),從首頁(yè),活動(dòng)頁(yè),到商品列表頁(yè)都充斥著歡天喜地購(gòu)物狂歡的喜紅色主題。各種領(lǐng)券,立減,秒殺,互動(dòng)等都和去年有哪些區(qū)別呢,在我看來(lái)好像并沒有。線上的一套活動(dòng)流水線已經(jīng)很成熟了,翻出花來(lái)也還是那幾個(gè)活動(dòng)樣式與把式,各家都使盡渾身解數(shù),爭(zhēng)取年中大賣,緩解下半年的銷售指標(biāo)壓力。廢話不多說(shuō),本篇就帶大家看看線上活動(dòng)是如何“新瓶裝舊酒”的。

年中購(gòu)物節(jié)618,帶你看線上活動(dòng)的套路

活動(dòng)時(shí)間

本次618活動(dòng)兩家都是提前了將近大半個(gè)進(jìn)行預(yù)熱,準(zhǔn)確的說(shuō)進(jìn)行預(yù)熱其實(shí)就是活動(dòng)開始了,在活動(dòng)時(shí)間軸上基本上都是大半個(gè)月將近21天,也就是在5月底就陸陸續(xù)續(xù)看見各種活動(dòng)廣告的投放和預(yù)熱了。這是個(gè)很有趣的現(xiàn)象??v觀之前的相應(yīng)的大促,除去國(guó)民活動(dòng)雙十一以外,基本上定性為s級(jí)大促的活動(dòng)很少有持續(xù)這么長(zhǎng)時(shí)間的。

從去年的雙十一活動(dòng)我們可以了看出大促活動(dòng)時(shí)間拉長(zhǎng)的端倪,就是采用了預(yù)售+時(shí)間軸的活動(dòng)模式。一般而言的線上活動(dòng)時(shí)間段可以份幾個(gè)階段:導(dǎo)流期,流量蓄水期,爆發(fā)期,衰退期。(嚴(yán)格意義上講,活動(dòng)是從爆發(fā)和衰退兩者組成)這四個(gè)階段各有著不同的作用與結(jié)果。以下圖(銷售指數(shù)與活動(dòng)四個(gè)階段的趨勢(shì))為例(并不一定絕對(duì)準(zhǔn)確)。

年中購(gòu)物節(jié)618,帶你看線上活動(dòng)的套路
  • 在活動(dòng)流量的導(dǎo)入階段,銷售并不會(huì)有多少提升,而此時(shí)的流量可能會(huì)出現(xiàn)一個(gè)增長(zhǎng)小高峰,客人大多會(huì)被各種線上線下的廣告吸引而來(lái),但是由于活動(dòng)的承載頁(yè)并沒有大量的活動(dòng)力度體現(xiàn),整站的流量轉(zhuǎn)化率會(huì)被拉低;
  • 在流量蓄水階段,由于消費(fèi)者大多關(guān)注爆發(fā)期間的活動(dòng)力度,在爆發(fā)期之前往往會(huì)對(duì)現(xiàn)有的力度持官網(wǎng)態(tài)度并坐等大促活動(dòng)力度的到來(lái),此時(shí)的銷售額可能會(huì)呈現(xiàn)出一個(gè)低谷;
  • 隨著爆發(fā)期的到來(lái),大量流量導(dǎo)入,成交轉(zhuǎn)化暴增,銷售額暴增。流量,銷售額再此會(huì)出現(xiàn)最高峰;
  • 衰退期,隨著活動(dòng)時(shí)間臨近結(jié)束,消費(fèi)者大部分已經(jīng)買到了自己心儀的商品,此時(shí)活動(dòng)進(jìn)入返場(chǎng)階段,銷量較之于爆發(fā)期迅速下滑。

以上四個(gè)階段其實(shí)并非絕對(duì),但是基本上都是現(xiàn)在電商活動(dòng)的一個(gè)模板。

但是,這里就存在一個(gè)投入產(chǎn)出比的問(wèn)題。在前期投入了大量的廣告以及引流費(fèi)用,帶來(lái)的銷售產(chǎn)出和用戶活躍度是否與投入成正比呢?如今的流量紅利已不再如當(dāng)年,引流所需的資金投入已經(jīng)遠(yuǎn)遠(yuǎn)超過(guò)了之前的流量紅利時(shí)代。電商活動(dòng)除了帶動(dòng)銷售外,更多的還要注重是否盈利上來(lái)。

那么從這四個(gè)階段的的銷售趨勢(shì)來(lái)看(并不是絕對(duì)準(zhǔn)確),在固定的時(shí)間段內(nèi),提升導(dǎo)入期和蓄水期的銷售額則是提升整體活動(dòng)持續(xù)效果的重要目標(biāo)。那么從廣告投放開始計(jì)起到活動(dòng)返場(chǎng)的結(jié)束,就是現(xiàn)階段618年中大促的主戰(zhàn)場(chǎng)。將導(dǎo)入期和蓄水期兩個(gè)階段合二為一,我把這個(gè)時(shí)間段命名為“時(shí)間軸導(dǎo)入銷售期”。

嚴(yán)格意義上講,618僅僅只是6月18日這一天,但是作為傳統(tǒng)的電商思維,618的活動(dòng)時(shí)間應(yīng)該是在6月12-18日左右為期一周,但是現(xiàn)階段的新型活動(dòng)時(shí)間計(jì)算應(yīng)該是:

  • 6月1-15日為時(shí)間軸導(dǎo)入銷售期
  • 16-18日為爆發(fā)期
  • 19-20日為衰退期(返場(chǎng))

以下為京東以及天貓的品牌旗艦店的促銷時(shí)間軸促銷圖,可見在導(dǎo)入銷售期也做了相應(yīng)的促銷手段,京東是以超級(jí)品類日和品牌日作為其中的促銷手段,天貓以跨店鋪的購(gòu)物津貼,品類滿減為主要手段,旗下各個(gè)品牌店鋪也遵循著天貓整體的營(yíng)銷活動(dòng)節(jié)奏進(jìn)行自身店鋪的促銷規(guī)劃。

這樣拉長(zhǎng)活動(dòng)時(shí)間的目標(biāo)只有幾個(gè):

  • 提升活動(dòng)的投入產(chǎn)出比和銷售額;
  • 提高活動(dòng)前期的銷售額同時(shí)也能制造活躍的活動(dòng)氛圍。

這樣做的壞處就是:

  • 活動(dòng)的人力投入;
  • 策劃的時(shí)間成本;
  • 廣告引流投入等也是巨大。

活動(dòng)的形式

本次雙方的活動(dòng)形式其實(shí)也大同小異,不過(guò)兩者還是有著些許的區(qū)別如活動(dòng)的主體:

  • 京東主要是自營(yíng)+商戶;
  • 天貓則主要是商戶;
  • 以及少部分自營(yíng)產(chǎn)品。

京東通過(guò)時(shí)間軸活動(dòng)模式在不同的日期進(jìn)行不同的超級(jí)品類日和品牌日,同時(shí)也通過(guò)圖書/生鮮等品類的大額滿減(滿100-50;199-100等)來(lái)進(jìn)行促銷引流等;天貓主要以跨店鋪購(gòu)物津貼和時(shí)間軸主題日,兩者都在主會(huì)場(chǎng)進(jìn)行了大概相同的布局:由上而下大致是:領(lǐng)券,分時(shí)段秒殺,競(jìng)拍商戶廣告位,品類/店鋪會(huì)場(chǎng)集合樓層,千人千面單品展示樓層,各個(gè)分會(huì)場(chǎng)的互鏈。

年中購(gòu)物節(jié)618,帶你看線上活動(dòng)的套路

當(dāng)然在獲取優(yōu)惠方式上,京東,天貓兩者有著不同的側(cè)重,發(fā)券,立減,秒殺,拼團(tuán),紅包裂變,砍價(jià),預(yù)售等優(yōu)惠獲取方式都大差不差,這里沒什么可細(xì)說(shuō)的,也就是在優(yōu)惠獲取的渠道上能夠做文章。天貓和京東的第三方商戶針對(duì)活動(dòng)形式有著更多的自主權(quán)。從店鋪的促銷裝修和力度的設(shè)置,活動(dòng)的形式都可以自行決定。這個(gè)也是考驗(yàn)看各個(gè)乙方店鋪運(yùn)營(yíng)實(shí)力的好時(shí)機(jī)。也是平臺(tái)的商戶運(yùn)營(yíng)尋求KA商戶,商戶培育和發(fā)現(xiàn)優(yōu)質(zhì)爆款的好時(shí)機(jī)。

電商促銷本質(zhì)上也是零售促銷,任何促銷手段僅僅是為了達(dá)成銷售的掩護(hù),通過(guò)不同的渠道不同的方式來(lái)吸引消費(fèi)者掏腰包才是正解。無(wú)論是通過(guò),游戲,互動(dòng),直播,廣告等形式營(yíng)造出來(lái)的促銷化場(chǎng)景,還是立減,秒殺,發(fā)券/紅包等來(lái)帶的優(yōu)惠力度等都是為了讓消費(fèi)者掏腰包服務(wù)的。通過(guò)讓更多的優(yōu)質(zhì)的流量進(jìn)入你的會(huì)場(chǎng),通過(guò)足夠吸引人的優(yōu)惠來(lái)促成消費(fèi)者買單才是活動(dòng)形式的最終使命。

年中購(gòu)物節(jié)618,帶你看線上活動(dòng)的套路

活動(dòng)渠道

銷售渠道:這次618活動(dòng)兩者都有涉及線上和線下兩方面,依托各自戰(zhàn)略投資或者收購(gòu)的零售載體,比如銀泰,永輝,盒馬,沃爾瑪?shù)冗M(jìn)行線下聯(lián)動(dòng)促銷。同時(shí)也能和線上活動(dòng)遙相呼應(yīng),充當(dāng)為線上引流的廣告位角色,所以在活動(dòng)策劃期間,將能調(diào)用的銷售渠道最好都用上,以求活動(dòng)效果的最大化。

引流渠道:依舊包含如下:硬廣,新&自媒體,搜索,信息流,自有工具推送,線下宣傳等(包含事件營(yíng)銷,線下活動(dòng)等)。這里就各個(gè)引流渠道的轉(zhuǎn)化效果不做細(xì)分描述,可以參考先前的相關(guān)電商活動(dòng)文章。

分銷渠道:就推廣銷售聯(lián)盟進(jìn)行宣傳,提升返點(diǎn)額&優(yōu)惠促單形式,鼓勵(lì)銷售聯(lián)盟/淘寶客積極推廣。

總結(jié)

1. 本次618活動(dòng)效果這里不得而知,就其形式而言并沒有太多的創(chuàng)新點(diǎn)。 不過(guò)可以肯定的是活動(dòng)動(dòng)靜鬧的越大,平臺(tái)商戶所花的競(jìng)拍廣告費(fèi)就越多,平臺(tái)運(yùn)營(yíng)方的純利潤(rùn)就越多。所以就B2C電商的活動(dòng)促銷策劃上要考慮到兩個(gè)主體的參與度,一個(gè)是消費(fèi)者,一個(gè)是平臺(tái)商戶和供應(yīng)商。消費(fèi)者造就了成交額,商戶和供應(yīng)商造就了利潤(rùn)。

2. 大促的活動(dòng)時(shí)間拉長(zhǎng),是對(duì)活動(dòng)整體投入產(chǎn)出比的考量,從追求銷售規(guī)模轉(zhuǎn)而追求利潤(rùn)與銷售額并行。

3. 本次618活動(dòng)的分時(shí)段時(shí)間軸的促銷方案是去年雙十一活動(dòng)形式的延續(xù)與拓展。并沒有實(shí)質(zhì)上的變化。

4. 優(yōu)惠獲取的渠道和流量獲取渠道與方式一直都是歷屆促銷的關(guān)注點(diǎn)

UI中國(guó)10周年海報(bào)

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

祝賀UI中國(guó)十周年快樂,感謝UI中國(guó)對(duì)我一直的支持,最近也很忙,抽空做了個(gè)海報(bào)表示祝賀吧,比較菜,做得不是很好請(qǐng)擔(dān)待,謝謝大家!

請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

博博

在PS中

進(jìn)行摳圖的方法有很多

而對(duì)于不同的圖片

使用不同的摳圖方法

才能達(dá)到快速摳圖的目的

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

所以今天小編

就給大家?guī)?lái)幾種

不同的摳圖方法

讓大家在不同的圖片中

找到最合適的

快速的摳圖方法

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

方法一:多邊形套索工具(快捷鍵L)

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

從名字上看就知道是摳多邊形的好幫手

適用于被摳物體直線較多的情況

比如下圖這個(gè)魔方

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

過(guò)程如下

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

方法二:磁性套索工具(快捷鍵L)

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

這個(gè)工具在多邊形套索工具下面

適用于邊界較為清楚的被摳物體

它可以被清楚的邊緣所吸引

從而達(dá)到快速圈出物體的作用

比如下圖這些杯子

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

過(guò)程如下

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

方法三:魔棒工具(快捷鍵W)

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

這是非常好用的一個(gè)工具

主要用于對(duì)背景色單

主體與背景有明顯差別的圖片的摳圖

是摳圖比較迅速的方法之一

比如下面的蘋果和梨

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

過(guò)程如下

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

方法四:快速選擇工具(快捷鍵W)

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

快速選擇工具主要

使用在一些圖片之間的色差

較大的情況下

這有利于我們快速把圖片給摳出來(lái)

比如這只鴿子

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

過(guò)程如下

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

方法五:鋼筆工具(快捷鍵P)

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

這是最常用的工具

基本上什么圖都可以摳

只要你分辨的出來(lái)的圖片

(頭發(fā)就不要用這個(gè)了)

比如這個(gè)碟子

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

過(guò)程如下

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

方法六:選擇并遮住(快捷鍵Alt+Ctrl+R)

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

我認(rèn)為這個(gè)工具其實(shí)是

快速選擇工具的升級(jí)版

可以用來(lái)?yè)割^發(fā)

效果比較好

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

使用方法:

先用快速選擇工具將人物主體部分圈出來(lái)

然后用邊緣調(diào)整工具調(diào)整頭發(fā)邊緣

最后輸出到帶有圖層蒙版的圖層即可

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

方法七:通道摳圖

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

可以用來(lái)?yè)割^發(fā)

摳各種各樣的物體

就算物體和背景顏色區(qū)分不是很大也可以

我們可以用來(lái)?yè)赶聢D這只鳥

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

先找到鳥和背景差距比較大的藍(lán)通道并復(fù)制下來(lái)

然后按快捷鍵【Ctrl+L】調(diào)整色階

接著按快捷鍵【Ctrl+I】將藍(lán)拷貝通道反相

按住Ctrl鍵單擊藍(lán)拷貝通道

然后回到圖層1并單擊(即有鳥的那個(gè)圖層)

最后按快捷鍵【Ctrl+J】復(fù)制所選部分

圖就摳好了

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

方法八:色彩范圍摳圖

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

色彩范圍一般用于

處理顏色差距較大的圖片

所以我們遇到顏色差距大的圖片

直接就可以使用色彩范圍的功能

比如上圖那只鳥我們也可以用色彩范圍來(lái)?yè)笀D

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

以上

就是在PS中

快速摳圖的八種方法

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

但是摳圖的方法

即使多種多樣

根據(jù)不同的圖片的特點(diǎn)

來(lái)選擇最合適的摳圖方法

才是最正確的

才能快速摳出最完整的圖片

強(qiáng)大!史上最全的PS摳圖秘訣都在這了

所以

這八種摳圖方法

希望大家都能掌握哦

強(qiáng)大!史上最全的PS摳圖秘訣都在這了


想要用好留白?這篇文章幫你從頭開始梳理

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

留白對(duì)于設(shè)計(jì)的價(jià)值,已經(jīng)得到相當(dāng)廣泛的認(rèn)可了。留白的存在讓其中的元素得到更好的凸顯,有了留白才有強(qiáng)調(diào),它們從來(lái)都是一體兩面,焦不離孟。今天的文章,我們來(lái)聊一下留白的使用技巧和最佳實(shí)踐。

設(shè)計(jì)中的留白

留白本身通常還被稱為負(fù)空間,它們可以在網(wǎng)頁(yè)布局中各個(gè)元素之間,還可以在特定 UI元素的內(nèi)部。留白賦予了頁(yè)面呼吸感,而它本身并不一定非得是白色的空白區(qū)域。留白界定了 UI元素本身的空間邊界,而借助格式塔原理,它還可以創(chuàng)造視覺上的聯(lián)系。

因此,留白是一種重要的、功能強(qiáng)大的設(shè)計(jì)元素,它對(duì)于創(chuàng)造積極的用戶體驗(yàn)有著重大的影響。 交互設(shè)計(jì)基金會(huì)的 Mads Soegaard 是這么說(shuō)的:“留白就像一塊畫布,它是將不同設(shè)計(jì)元素融合到一起的背景,又讓這些元素通過(guò)對(duì)比襯托脫穎而出。”

在諸多的平面設(shè)計(jì)領(lǐng)域當(dāng)中,負(fù)空間都發(fā)揮著無(wú)法替代的作用。無(wú)論是設(shè)計(jì)LOGO、平面插畫還是字體的時(shí)候,留白的使用關(guān)系著整個(gè)設(shè)計(jì)的表現(xiàn)力。就像下面的博客插圖,負(fù)空間的運(yùn)用讓整個(gè)畫面顯得更加生動(dòng)。

無(wú)論是在網(wǎng)站設(shè)計(jì)還是 UI設(shè)計(jì)當(dāng)中,設(shè)計(jì)師都需要借助留白來(lái)提升界面和導(dǎo)航的可用性。布局元素周圍的留白或者負(fù)空間通常被稱為宏空間,而它們之間的留白和內(nèi)部的負(fù)空間,則被稱為微空間。

理清概念

留白和負(fù)空間雖然是兩個(gè)不同的說(shuō)法,但是兩者表述的是同一個(gè)東西。之所以有兩個(gè)不同的說(shuō)法,是因?yàn)閮蓚€(gè)名稱是來(lái)源于不同的兩個(gè)領(lǐng)域。

留白是來(lái)自排版印刷設(shè)計(jì)領(lǐng)域,因?yàn)轫?yè)面的背景通常是白色的,而文本和圖片周圍的區(qū)域也多是白色的空白,因此有留白之說(shuō)。而負(fù)空間這個(gè)說(shuō)法是源自于攝影,吸引人注意的視覺主體被稱為正空間,而相應(yīng)的留白就成了負(fù)空間。

需要注意的是,留白并不一定非得是白色的,可以是其他的顏色,甚至是其他的圖案。

留白為何如此重要

當(dāng)你進(jìn)入一個(gè)擠滿各種物品和人的房間,到處都是東西和人,找到特定的東西肯定是一個(gè)非常艱難的事情。相應(yīng)的,在干凈的地面上,擺放的唯一的物品肯定是非常醒目的,你不需要花費(fèi)任何力氣就能注意到它。這也是留白發(fā)揮作用的原理所在。

雖然客戶可能會(huì)要求設(shè)計(jì)師在頁(yè)面上盡可能多地塞滿各種元素和功能,這樣可以節(jié)省空間。但是,實(shí)際上這是一個(gè)最常見的錯(cuò)誤的做法:用戶并不需要在網(wǎng)頁(yè)上一次完成全部的工作。更重要的是,太多的元素會(huì)分散用戶的注意力,用戶會(huì)難以找到真正想要的信息。正如同 Aarron Walter 所說(shuō):“你想讓用戶注意到所有事情的時(shí)候,他們會(huì)感知不到任何東西的。”

對(duì)于設(shè)計(jì)而言,負(fù)空間的價(jià)值是非常高的,我們隨便總結(jié)一下,都有很多:

  • 它讓頁(yè)面的可閱讀性得到了提升;
  • 它增強(qiáng)了視覺層次;
  • 它使得元素和元素之間的關(guān)系更加清晰,更容易被感知,而不需要借助表格、框架這樣的附加手段;
  • 它為頁(yè)面增加了呼吸感,而不至于導(dǎo)致混亂;
  • 它讓用戶更容易將注意力集中到核心元素上,減少分心;
  • 它提升了頁(yè)面的風(fēng)格,讓設(shè)計(jì)更加優(yōu)雅。

看看這個(gè)城市指南的著陸頁(yè)吧,負(fù)空間在背景中扮演了非常重要的角色,更重要的是,圖片中的元素和前景的文本標(biāo)題之間有所互動(dòng),這也同樣是借助負(fù)空間的方式來(lái)呈現(xiàn),呈現(xiàn)出一種和諧而有趣的設(shè)計(jì)效果。

影響留白的核心因素

合理的使用留白能夠讓界面的用戶體驗(yàn)提升不少。

可讀性和清晰度:如果和元素之間沒有足夠的留白,會(huì)變得難以閱讀,用戶需要花費(fèi)額外的精力來(lái)進(jìn)行分辨。不合理的留白設(shè)計(jì)會(huì)讓用戶感到緊張,想要讓用戶感到自然,需要讓留白恰到好處,令布局顯得足夠自然。如同音樂中的韻律感一樣,設(shè)計(jì)中的韻律感是通過(guò)留白的變化來(lái)呈現(xiàn)的。

品牌化:如果你熟悉LOGO的設(shè)計(jì),你會(huì)發(fā)現(xiàn)設(shè)計(jì)師借助元素周圍的留白來(lái)營(yíng)造氛圍提升感覺,留白的功能性在品牌設(shè)計(jì)上有著非常顯著的體現(xiàn)。打破留白的設(shè)計(jì)規(guī)則,對(duì)于整體是有害的。

強(qiáng)化屬性:留白的運(yùn)用能夠強(qiáng)化屬性,比如新聞博客平臺(tái)會(huì)更加密集地呈現(xiàn)信息,甚至?xí)柚鷦?dòng)態(tài)的數(shù)據(jù)呈現(xiàn)和較為致密的布局來(lái)營(yíng)造一種資訊的密集感和平臺(tái)的調(diào)性。

視覺層次:富有層次感的留白設(shè)計(jì)能夠創(chuàng)造出視覺層次,并且讓用戶注意到特定的元素和信息。

留白對(duì)于視覺的影響主要體現(xiàn)在以下的幾個(gè)方面:

  • 文案和內(nèi)容
  • 圖形元素
  • 導(dǎo)航
  • 視覺識(shí)別

接下來(lái)看看幾個(gè)案例。這是 The Big Landscape 的首頁(yè),沒有表單,沒有視覺框架,僅僅借助留白來(lái)平衡所有的設(shè)計(jì)元素。設(shè)計(jì)師構(gòu)建出了清晰的層次結(jié)構(gòu),并且允許用戶一瞥即可看清所有的內(nèi)容塊,這樣的設(shè)計(jì)看起來(lái)是清晰而有條不紊的,而且充滿呼吸感。白色的背景和簡(jiǎn)約的布局讓整個(gè)界面充滿了實(shí)體雜志的質(zhì)感, 而這也相對(duì)視覺化地告知用戶這是一個(gè)在線的數(shù)字雜志。

另外一個(gè)是移動(dòng)端的APP Upper。整個(gè)應(yīng)用的留白都是使用黑色來(lái)進(jìn)行填充的,在視覺上,黑色的留白和核心的視覺元素構(gòu)成了鮮明的對(duì)比,從而起到了凸顯的作用。整個(gè)設(shè)計(jì)留白充足,用戶不會(huì)錯(cuò)過(guò)關(guān)鍵的部分,也不會(huì)分心,布局的組織性極強(qiáng),可讀性也都毫無(wú)問(wèn)題。設(shè)計(jì)師確保了整體的優(yōu)雅性,也讓布局更加具有美學(xué)特征。

需要考慮的問(wèn)題和隱患

1. 術(shù)語(yǔ)紊淆

和不熟悉設(shè)計(jì)術(shù)語(yǔ)的客戶進(jìn)行溝通的時(shí)候,應(yīng)該盡量讓他們明白負(fù)空間/留白的含義和功能。對(duì)于非設(shè)計(jì)從業(yè)者而言,很多時(shí)候確實(shí)不能很快接受「屏幕中需要留下更多的留白」這樣的概念。對(duì)于黑色或者深色的背景,這類客戶可能會(huì)有不好的聯(lián)想,事實(shí)上并非如此。在進(jìn)行足夠深入的溝通之后,盡量將這些關(guān)鍵點(diǎn)灌輸給客戶,避免術(shù)語(yǔ)和概念上的誤讀。

2. 希望減少留白,增加頁(yè)面和內(nèi)容

其實(shí)這個(gè)是幾乎所有的設(shè)計(jì)領(lǐng)域都會(huì)面臨的問(wèn)題??蛻魰?huì)希望室內(nèi)設(shè)計(jì)師在一面墻擺滿柜子而不是給兩個(gè)剩余的地方留白,而建筑設(shè)計(jì)師也常常需要建筑周圍有足夠的留白,確保呼吸感,提供更好的服務(wù)。設(shè)計(jì)師需要和客戶溝通,了解哪些部分更重要,哪些部分次重要,而哪些內(nèi)容是可有可無(wú)的,分清層級(jí),進(jìn)行篩選。留白有助于營(yíng)造更加協(xié)調(diào)的布局,讓信息和功能的可用性更強(qiáng)。

3. 優(yōu)先級(jí)不夠高

如果深思熟慮的信息架構(gòu)和界面并不匹配,留白并不是萬(wàn)能的解決方案。你需要在考慮界面設(shè)計(jì)之前,就確定用戶獲取信息的方式,然后再進(jìn)行設(shè)計(jì)。在確定風(fēng)格之前,先要梳理清楚用戶流程,否則,再好的負(fù)空間設(shè)計(jì)也不足以發(fā)揮出它應(yīng)有的功能。

MIUI10上手體驗(yàn):“蘋果味”十足,操作更加順滑

博博


天極網(wǎng) 2018-06-04 18:18:17

5月31日,小米在發(fā)布會(huì)上推出一代操作系統(tǒng)——MIUI10。近日,小編順利通過(guò)了MIUI10的內(nèi)測(cè)申請(qǐng),于是將手里的小米5第一時(shí)間更新,一起來(lái)看看官方給新系統(tǒng)定義的幾大更新亮點(diǎn)吧。

MIUI10上手體驗(yàn):“蘋果味”十足,操作更加順滑

首先,在更新MIUI10內(nèi)測(cè)版之后,老旗艦手機(jī)小米5煥然一新,變得流暢許多。此次新系統(tǒng)主要是針對(duì)全面屏做的設(shè)計(jì),具體表現(xiàn)在狀態(tài)欄和多任務(wù)的排版上,UI設(shè)計(jì)結(jié)合了Andrid P和iOS風(fēng)格,整體比較清新。在點(diǎn)按之后,圖標(biāo)會(huì)變成藍(lán)色,開關(guān)按鈕采用了翻頁(yè)的形式,而且可以容納的數(shù)量也比以前多了。雖然在風(fēng)格上進(jìn)行了大量的修改與整合,不過(guò)最終還是沒能逃脫“蘋果味”。

MIUI10上手體驗(yàn):“蘋果味”十足,操作更加順滑

小編覺得MIUI10最大的變化就是多任務(wù)面板,之前的MIUI9、MIUI8等版本均為橫向布局,而此次MIUI10變?yōu)榱丝v向布局,交互方式上有些變化。官方宣稱這是可以在一塊屏幕上看到更多的多任務(wù)。其實(shí)就是迎合了全面屏的理念,而又不想太過(guò)抄襲蘋果的多任務(wù),最終就出現(xiàn)了這樣的產(chǎn)物。說(shuō)實(shí)話,小米5上的MIUI10多任務(wù)面板不是很好看,但是使用效果還不錯(cuò),多任務(wù)左右滑動(dòng)是關(guān)閉,長(zhǎng)按就有分屏,鎖定和設(shè)置三個(gè)按鈕。

MIUI10上手體驗(yàn):“蘋果味”十足,操作更加順滑

接下來(lái)是本次新增的駕車模式和小愛同學(xué)。之前MIUI9也有語(yǔ)音助手,不過(guò)稍顯“智障”,并沒有太多實(shí)用性。MIUI10上,小愛同學(xué)增加了訓(xùn)練計(jì)劃,可也設(shè)定提問(wèn)他要回答的答案,實(shí)用性大大增強(qiáng)。駕車模式應(yīng)該是廣大司機(jī)朋友最關(guān)注的功能,全新的駕車模式在小愛同學(xué)的幫助下,可以做到邊開車邊回復(fù)消息,同時(shí)還能保證開車的安全性,非常實(shí)用。

MIUI10上手體驗(yàn):“蘋果味”十足,操作更加順滑

再來(lái)說(shuō)說(shuō)小編遇到的問(wèn)題吧,因?yàn)槭荕IUI10內(nèi)測(cè)第一批版本,BUG多也是可以理解的。剛小米5升級(jí)MIUI10后,雖然操作確實(shí)很順滑,不過(guò)頭疼的BUG使得系統(tǒng)整體性沒那么強(qiáng)。有幾個(gè)BUG甚至把傳統(tǒng)的16:9手機(jī)當(dāng)成18:9的手機(jī)來(lái)顯示。需要提升的地方還有很多,比如消息通知會(huì)跑到下面來(lái),就像有虛擬的劉海,還有充電的時(shí)候電量小圓圈也只能顯示四分之一,還有改不了熱點(diǎn)的名字和密碼。

MIUI10上手體驗(yàn):“蘋果味”十足,操作更加順滑

最后總結(jié)一下這幾天的使用體驗(yàn),MIUI10系統(tǒng)的外觀設(shè)計(jì)與流暢性自然不必多說(shuō),提升蠻大的。最讓小編印象深刻的還是殺后臺(tái)情況,3G內(nèi)存的小米5在MIUI9系統(tǒng)下殺后臺(tái)現(xiàn)象非常嚴(yán)重。在MIUI10下,這種情況改善了許多,使用時(shí)沒有以前那么“虛”,強(qiáng)烈推薦老旗艦手機(jī)升級(jí)。另外,小編發(fā)現(xiàn)“小愛同學(xué)”貫穿在了MIUI10中,許多地方都能見到AI智能的身影,相比MIUI9“聰明”了許多??偟膩?lái)說(shuō),內(nèi)測(cè)版MIUI10的升級(jí)非常到位,煥然一新的UI設(shè)計(jì)以及交互方式,提升顏值的同時(shí)也提高了檔次。

Dribbble 界面設(shè)計(jì)靈感 33

博博


UI設(shè)計(jì)愛好者 2018-05-03 16:58:07

作者:設(shè)計(jì)達(dá)人(ID:shejidaren888)

這次 Dribbble UI 靈感主要精選網(wǎng)頁(yè)、APP 以及一些后臺(tái)管理界面,每個(gè)精選出來(lái)的界面設(shè)計(jì)的贊數(shù)都是幾百+或者幾 K ~

PS:當(dāng)你看中某作品時(shí),你可以點(diǎn)擊作者名稱來(lái)查看該設(shè)計(jì)師更多作品。(微信公眾號(hào)不支持外鏈,只能點(diǎn)「閱讀原文」來(lái)查看所有鏈接)

Dribbble 界面設(shè)計(jì)靈感 #33

Dribbble 界面設(shè)計(jì)靈感 33

個(gè)人主頁(yè)設(shè)計(jì) by Mike

Dribbble 界面設(shè)計(jì)靈感 33

CRM 管理系統(tǒng)界面設(shè)計(jì) by Divan Raj

Dribbble 界面設(shè)計(jì)靈感 33

EverDo 應(yīng)用界面 by Jakub Reis

Dribbble 界面設(shè)計(jì)靈感 33

接上,EverDo 界面的一些表單元素 by Balkan Brothers

Dribbble 界面設(shè)計(jì)靈感 33

隨機(jī)實(shí)驗(yàn) by Nick Franchi

Dribbble 界面設(shè)計(jì)靈感 33

Coindesk by uixNinja

Dribbble 界面設(shè)計(jì)靈感 33

一套 UI 素材:Planguru by Patryk Pustol

Dribbble 界面設(shè)計(jì)靈感 33

酒店 APP 后臺(tái)(iPhoneX) by Divan Raj

Dribbble 界面設(shè)計(jì)靈感 33

B3Sound 網(wǎng)站著陸頁(yè)設(shè)計(jì) by Outcrowd

Dribbble 界面設(shè)計(jì)靈感 33

Smart Security Camera App by Ionut Zamfir

Dribbble 界面設(shè)計(jì)靈感 33

Iterable 插畫草圖 by Ramotion

Dribbble 界面設(shè)計(jì)靈感 33

后臺(tái)界面 by uixNinja

Dribbble 界面設(shè)計(jì)靈感 33

Dating 應(yīng)用項(xiàng)目 by Divan Raj

Dribbble 界面設(shè)計(jì)靈感 33

Benti by Jakub Dziedzic ??

Dribbble 界面設(shè)計(jì)靈感 33

Surf Guide Mobile Swipe Distort by Nathan Riley

Dribbble 界面設(shè)計(jì)靈感 33

C / Sen Design Lab by Mike | Creative Mints

Dribbble 界面設(shè)計(jì)靈感 33

Chripcase 后臺(tái)界面 by Goutham

Dribbble 界面設(shè)計(jì)靈感 33

Raika Plant by Nicola Baldo

Dribbble 界面設(shè)計(jì)靈感 33

網(wǎng)頁(yè)聊天應(yīng)用界面 by Michal Parulski

Dribbble 界面設(shè)計(jì)靈感 33

網(wǎng)頁(yè)版的音樂 UI by Giga Tamarashvili

Dribbble 界面設(shè)計(jì)靈感 33

Music UI by Giga Tamarashvili

Dribbble 界面設(shè)計(jì)靈感 33

Blockсhain revolution by Dmitrii Kharchenko

Dribbble 界面設(shè)計(jì)靈感 33

USB Types by Gal Shir

Dribbble 界面設(shè)計(jì)靈感 33


日歷

鏈接

個(gè)人資料

存檔