首頁

配色基礎(chǔ)03-配色的實(shí)踐

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







兼顧“突出”與“融合”兩方面


進(jìn)行配色時(shí),要從兩方面考慮,既突出提升的方面又融合平穩(wěn)方面。


例如,以自己最喜歡的顏色為中心完成了初稿,然后應(yīng)該檢查一下,是否過于沉重模糊,或者是否過于喧鬧令人不安。如果過于沉靜,則下點(diǎn)功夫突出一下即可;如果過于喧鬧,則向著沉靜、融合的方向調(diào)整即可。






1.1 突出型配色1


使主角更鮮明

畫面整體顯得模糊時(shí),要放棄幾個(gè)要點(diǎn),明確主題。大力強(qiáng)調(diào)作為主角的部分,并刪去曖昧模糊的地方。主題明確后,不僅氣氛被提升,畫面也會(huì)顯得清爽踏實(shí)。


減少黑色的分量,提高純度

感覺配色過于沉重壓抑時(shí),應(yīng)該減少黑色,增加鮮艷的顏色,配色將瞬間明朗起來。色調(diào)沉重是由于混入過多黑色,減少黑色后自然會(huì)呈現(xiàn)出鮮艷的色彩。這是最有代表性的突出配色的方法,也是效果最顯著的方法。




烘托畫面的中心


明確畫面主角

當(dāng)畫面的中心部分被提升后,才會(huì)使配色給人深刻印象。我們還可以強(qiáng)化明度對(duì)比,加強(qiáng)畫面中心部分明度,這樣的畫面會(huì)格外令人印象深刻。

A海報(bào)帶點(diǎn)夢(mèng)幻的感覺,但是主角不夠清晰。而B海報(bào)提升了背景亮度,擴(kuò)大與中心人物的明度對(duì)比度,從而能強(qiáng)調(diào)了主角。



加強(qiáng)中心部分的方法


提高顏色純度


強(qiáng)化明度對(duì)比


強(qiáng)化色相對(duì)比




給畫面添加亮點(diǎn)


我們很多小伙伴喜歡沉穩(wěn)踏實(shí)的配色,這種配色方法雖然是好的,但是畫面的配色過于均一則平淡無奇。那怎么解決這個(gè)問題呢?其實(shí)我們可以在畫面中心設(shè)置小面積的亮點(diǎn),給畫面增添品味和活力。


抑制背景色,凸顯亮點(diǎn)

要記住,亮點(diǎn)的面積越小給人的印象就越深刻。如果你想更加凸顯亮點(diǎn),那就要抑制周邊的背景色。只有這樣,即使在平穩(wěn)不顯眼的配色中,這個(gè)亮點(diǎn)一樣很顯眼。

A圖中整體色調(diào)沉穩(wěn),但是總覺得少了點(diǎn)什么。而B圖中鮮艷的紅色成為寧靜配色的亮點(diǎn),給原本平淡的畫面注入了活力。



制造亮點(diǎn)的方法


弱化背景色,突出亮點(diǎn)


控制好背景色,即使純度不高的亮點(diǎn)也有很好的效果




給畫面加入鮮艷色彩


鮮艷的色彩盡顯活力

如果你想增加配色的歡快感,就應(yīng)該加入純度高的顏色。

A產(chǎn)品整體是暗色調(diào),高雅莊重,但是似乎有些欠缺。而B產(chǎn)品加上了小面積的鮮艷色彩,高雅不變,華麗有余。


加入鮮艷色,變得活力




增加畫面色彩面


添加色彩,畫面變得生動(dòng)

當(dāng)人們看到無彩色畫面時(shí),總會(huì)感到有所欠缺。如果在無彩色畫面當(dāng)中加入一些色彩,畫面頓時(shí)變得歡快活躍。

A海報(bào)是無彩色的,畫面過于單調(diào);而B海報(bào)只是在A海報(bào)的基礎(chǔ)上增加了色彩面,畫面頓時(shí)變得歡快活躍,生動(dòng)了許多。


增加色彩面,變得明快




減少黑色


調(diào)整畫面部分明亮度

很多小伙伴喜歡把畫面背景色設(shè)為暗色調(diào),因?yàn)檫@樣有踏實(shí)感。這樣做畫面雖然高雅卻有失歡快,我們不妨試試將背景色調(diào)亮一個(gè)等級(jí),最后你會(huì)發(fā)現(xiàn)畫面變得明朗愉悅了許多。

因?yàn)锳畫面沉穩(wěn)有余,但過于灰暗,缺乏歡快氣氛;將A背景色中的黑色調(diào)到零就得到如圖B背景色,調(diào)整之后的畫面能給人明快的印象。


減少黑色使畫面明亮


如何創(chuàng)造有踏實(shí)感的明亮?

如果你希望畫面變得明亮,又不想破壞原有的踏實(shí)感時(shí),則可以保留10%的黑色。




分離配色


什么是分離配色?

大家都知道按照色相、明度次序配色稱為“漸進(jìn)配色”;那與之相對(duì)的配色方式就是“分離配色”,獨(dú)立配置每個(gè)顏色。

A圖采用的是漸進(jìn)式配色,按色相順序排列,給人安靜平穩(wěn)之感,但有失緊湊,略顯無趣。而B圖采用的是分離式配色,使用與A圖中相同的色彩,只是簡(jiǎn)單變換順序,突出各色的獨(dú)立性,沖破秩序感,給人以活潑的感覺。


打破顏色順序,隨機(jī)分離,使之獨(dú)立,釋放出動(dòng)感






1.2 突出型配色2


用對(duì)比色達(dá)到突出效果

在色相圖在相對(duì)的為對(duì)比色,相鄰的為鄰近色。單用鄰近色配色,則畫面感覺平穩(wěn);加入對(duì)比色,則頗具緊湊感。


在色相環(huán)中的相對(duì)位置創(chuàng)造出各樣的色彩表情

挑選色相環(huán)中的相對(duì)兩色,則帶來歡快的節(jié)日型配色。若組合在色相環(huán)圖中呈正三角形的紅、黃、藍(lán),則得到理性安定的畫面。通過顏色在色相環(huán)中的形狀,能創(chuàng)造出各式各樣的色彩表情。


黑白制造緊湊感

不難想像加入黑色會(huì)起提升效果,其實(shí)白色同樣能在輕松氛圍中制造緊湊感。




給畫面加入對(duì)比色


對(duì)比色是主色的必要補(bǔ)充

色相環(huán)中相對(duì)的色相成為對(duì)比色,也叫補(bǔ)色,甚至可以說,配色的基本就在于補(bǔ)色,配色完成于補(bǔ)充顏色的過程之中。加入補(bǔ)色使人心情舒暢,缺乏補(bǔ)色的畫面容易令人覺得不自然。

A圖是以同色系為中心的平穩(wěn)配色;圖B加入對(duì)比色藍(lán)色后,畫面效果加強(qiáng)了些許。


加入對(duì)比色,使畫面生動(dòng)突出




終極純粹三角型


平衡的三角型

紅、黃、藍(lán)在色相環(huán)上組成一個(gè)正三角形,被稱為三原色,是特殊的顏色。綠色、紫色等顏色都可以通過混合這3種顏色得來,但是無論怎樣混合其他顏色都無法得到三原色。隨著畢加索、蒙德里安等現(xiàn)代派畫家們追求終極的純粹色,三原色的組合得到了重視。


蒙德里安《紅、黃、藍(lán)的構(gòu)成》

這幅作于1930年的《紅、黃、藍(lán)的構(gòu)成》是蒙德里安幾何抽象風(fēng)格的代表作。蒙德里安將色彩、形狀純粹化的結(jié)果,是否定紅、黃、藍(lán)三色以外的一切色彩。線條的方向也限定于水平或垂直,排斥斜線。


三角型的效果,掌握好平衡即可




十字型配色


強(qiáng)烈的緊湊感

將兩組對(duì)比配色交叉組合后,便得到十字型配色。醒目安定的同時(shí),又具有緊湊感。在一組對(duì)比色產(chǎn)生的緊湊感上加一組,自然成為最強(qiáng)配色型。


梵高《軍人》

A畫面只用了一組紅綠對(duì)比色,看上去很有緊湊感,但是過于硬朗。在A的基礎(chǔ)上增加了一組藍(lán)橙對(duì)比色,帶來有力的安定感及緊湊感,畫面豐富了許多。


由于把兩組補(bǔ)色組成十字型,達(dá)到了完全的平衡。




黑色起突出作用


無色彩的黑色是最有力的搭配色

黑色是“無色”的特殊色,純度、色相、明度都為零。但是,加入黑色會(huì)突出原有的顏色,使畫面有力度。黑色與其他色彩組合時(shí),是最有力的配角色。

海報(bào)A藍(lán)綠色均為冷色,綠色背景下,表現(xiàn)出輕快自然、明亮卻趨于平淡。海報(bào)B背景變?yōu)楹谏?,綠色變得深邃而閃爍。這時(shí),黑色本身難掩的光輝甚至?xí)谷苏`將其當(dāng)成主角,但是不會(huì)喧賓奪主掩蓋主角色。


黑色無論與任何色彩搭配,都起強(qiáng)調(diào)提升作用。使強(qiáng)色更加強(qiáng)烈,使淺色更加突出,產(chǎn)生生動(dòng)醒目的效果。

 



白色起強(qiáng)調(diào)作用


作為中立色的白色,不會(huì)破壞其他顏色

白色是所有色彩中最中立、最無個(gè)性的顏色,但是可以通過特定的使用方法,使畫面整體更突出。在不破壞其他色彩感覺的基礎(chǔ)上提升整體。

白色與任何顏色的反差都很大。人眼對(duì)最明亮的白色頗為敏感。即使是相當(dāng)?shù)偷拿鞫认?,白色的效果也顯而易見。海報(bào)B加入白色,瞬間被突出。


白色有著意想不到的效果。配上過于強(qiáng)硬的顏色則使之緩和,配上淺色則使之被強(qiáng)調(diào)。保持淺色原本的感覺,突出整體效果。






1.3 融合型配色


使用三屬性達(dá)到融合效果

與突出型配色一樣,我們采用三屬性(色相、純度、明度)來緩和過于喧鬧、醒目的顏色。突出時(shí)要增強(qiáng)三屬性的對(duì)比,融合時(shí)則要減弱對(duì)比色的對(duì)立。



靠近色相


使用同系色,畫面統(tǒng)一和諧

色相差越大越活潑,反之,色相越靠近越穩(wěn)定。色彩給人感覺過于突出喧鬧時(shí),可以靠近色相,協(xié)調(diào)各種色彩,使畫面穩(wěn)定下來。

B圖使用近似色配色,表現(xiàn)出平穩(wěn)安詳?shù)母杏X。而A圖紅綠色相之間變化幅度過大,流于散漫,給人一種不安定的感覺。


色相被靠近后稱為鄰近色,進(jìn)一步靠近則稱為同系色,越偏離對(duì)比色、接近同系色,就越有平穩(wěn)踏實(shí)感。




統(tǒng)一明度


明度差破壞安定感

即使色相差很大,只要明度統(tǒng)一,畫面整體就會(huì)給人以安定的感覺。這是在不破壞色相平衡、維持原有氣氛的同時(shí),得到安定感的巧妙方法。

A圖明度差較大,產(chǎn)生活潑感。而B圖縮減明度差至零后,畫面整體變得和諧,給人一種安定的感覺。


無論多么松散的配色,統(tǒng)一明度后都會(huì)呈現(xiàn)出整齊穩(wěn)定的效果。零明度差營(yíng)造出踏實(shí)穩(wěn)定的感覺,因此最好盡量擴(kuò)大色相差,力求維持色彩之間的跳躍感。




色調(diào)靠近


氣氛的統(tǒng)一

色調(diào)也稱“調(diào)子”,表示色彩的感覺、品位。因此,可以把同一色調(diào)的色群歸為具有同一類色彩感覺。組合同一色調(diào)的顏色,則相當(dāng)于統(tǒng)一了畫面氣氛。


A畫面組合有所偏高的色調(diào),會(huì)破壞畫面的統(tǒng)一,而B畫面將鮮艷的色調(diào)換為明灰色調(diào),畫面感覺統(tǒng)一和諧了許多。


如果畫面松散,缺乏統(tǒng)一感,則需要統(tǒng)一色調(diào)。統(tǒng)一至相同或相近色調(diào)后,原本混亂的配色將變得緩和穩(wěn)定。




群化方法


通過群化法收斂混亂,將三屬性共通化

將混亂的配色群化會(huì)得到踏實(shí)的效果。所謂群化,就是賦予色相、色調(diào)、明度等以共通性,制造出整齊劃一的組合。畫面松散時(shí),將三屬性的一部分共通化,會(huì)得到統(tǒng)一感。

A圖的配色過于混亂,色彩紛繁的效果使畫面整體顯得混亂。B圖的配色明度、色相以及色調(diào)都比較相近,畫面整體顯得統(tǒng)一和諧。


所謂群化,指的就是分組、共通化。將前面講述的明度、色相、色調(diào)等綜合地共通化后,產(chǎn)生群化效果,畫面收斂、緩和。




雙色調(diào)配色


同一色相的明暗兩色

所謂“雙色調(diào)”,指從相同或相近色相中抽出兩種色調(diào)的組合。最有代表性的雙色調(diào)是同一色相的單色與明色的組合。制造色差,或是組合進(jìn)濁色,都能創(chuàng)造出豐富的色彩表情。

B圖的配色采用的是同一色相的淡色與暗色的組合雙色調(diào);而A圖中的綠色與淡紅色的色相差過大,無法組合成相同或相近色相的雙色調(diào)。


雙色調(diào)組合類型




濃淡法


節(jié)奏感產(chǎn)生舒適感

濃淡法指按照色相或明度順序的配色。由于順序被明示出來,因此產(chǎn)生節(jié)奏感,給人以舒適的感覺。對(duì)畫面的一部分使用濃淡法配色,則該部分周報(bào)有著踏實(shí)的效果。

A圖中彩虹的配色排列松散,但頗為活潑;B圖中彩虹按色相順序排列后產(chǎn)生穩(wěn)定感、節(jié)奏感,就會(huì)顯得既張揚(yáng)又踏實(shí)。


色相的漸進(jìn)


明度的漸進(jìn)




莫里斯派·對(duì)比雙色調(diào)


莫里斯偏愛的配色

使兩組雙色調(diào)對(duì)比后,同時(shí)呈現(xiàn)出平穩(wěn)與緊湊的畫面感,將雙色調(diào)具有的舒適感與色相對(duì)比具有的緊湊感調(diào)和至平衡,是活躍在19世紀(jì)的英國(guó)裝飾藝術(shù)大師威廉·莫里斯鐘愛的配色形式。

A圖由綠色的明、中、暗三階段構(gòu)成的配色。由于是同一色相,所以畫面踏實(shí),不過似乎太過單調(diào)而顯無趣。鑒于出現(xiàn)3個(gè)階段的顏色,應(yīng)成為三色調(diào),不過與雙色調(diào)效果大致相同。而B圖中加入對(duì)比色紅色系的雙色調(diào)。對(duì)比色效果強(qiáng)調(diào)了整體,雙色調(diào)的平穩(wěn)感與色相對(duì)比的緊湊感共存。


組合身為對(duì)比色的雙色調(diào),產(chǎn)生緊湊感,給人以自然的印象。




微差·品位浮雕裝飾


近似色相與小明度差

使用幾乎令人察覺不到的微笑色彩差別配色,會(huì)傳達(dá)出高雅寂靜的感覺。一般情況下,微差因其曖昧模糊感并不討好,不過一旦被有意圖地巧妙使用,會(huì)有意想不到的效果。想運(yùn)用好微差,周邊色尤為關(guān)鍵。若不小心搭配進(jìn)強(qiáng)色,則會(huì)瞬間破壞來之不易的靜感,稱為庸俗失敗的模糊配色。

A圖鮮艷的黃色破壞了整體的寧靜氣氛;而B圖去掉了鮮艷的色彩,包的色調(diào)具有微差的特點(diǎn),微差配色表現(xiàn)靜謐。


微差配色可以營(yíng)造出幽靜氣氛




重復(fù)法


通過重復(fù)融合整體,制造共同之處

在稍稍偏離的位置上放置統(tǒng)一色彩,會(huì)達(dá)到共鳴融合的效果。這就是重復(fù)法。一致的色彩不僅互相呼應(yīng),整個(gè)畫面也融為一體。

A圖頂部與下面的顏色沒有呼應(yīng),使得上下分離,破壞了畫面的整體效果;而B圖下面汽車的青藍(lán)色與頂部天空的青藍(lán)色呼應(yīng),形成一致的色相,上下便產(chǎn)生一體感,使得整體緊湊嚴(yán)密。


在偏離的位置上放置與主要色彩同色系的顏色,使得整體融合,產(chǎn)生統(tǒng)一感




利用白色間隔使畫面更柔和


在過于濃艷的配色在使用白色背景

白色的色彩度為零,可以說是完全中立的顏色,但是由于搭配方法不同,可以產(chǎn)生十分鮮艷的效果。白色可以令平淡的配色鮮明,也可以令濃艷的配色柔和。

A畫面全部是過于強(qiáng)烈的顏色,濃艷而令人膩煩;而B畫面換成白色背景去除了濃艷的感覺,畫面表現(xiàn)得柔和起來了。


如果強(qiáng)烈的帶有刺激性的色彩讓人感覺很浮躁的話,可以嘗試在中間插入白色間隔,這樣不僅減弱了壓迫感,也使這種顏色的特征更加鮮明生動(dòng)









2.1 營(yíng)造畫面氛圍


畫面的安排決定配色的成功與否

如果商品與畫面不一致的話,即使有了漂亮的配色也沒有任何價(jià)值。已完成配色的畫面能否與目光鎖定的方向一致是成功與否的關(guān)鍵。想要隨意表現(xiàn)一個(gè)快樂的畫面,如果用上等的格調(diào)和高雅的配色,就會(huì)令畫面混亂,無法傳達(dá)正確的意思。


大部分畫面由色調(diào)決定

決定畫面的三要素是色調(diào)、色相和對(duì)比強(qiáng)度。其中最重要的就是色調(diào)。色調(diào)換言之是“格調(diào)”,是和“心情、品位、興趣”具有相同語感的詞匯。選擇哪種色調(diào)進(jìn)行畫面的配色,決定性因素就是心情。




色調(diào)


大部分畫面由色調(diào)決定

即使是相同的材料、相同風(fēng)格的形狀,當(dāng)色彩的色調(diào)發(fā)生變化時(shí),畫面也會(huì)完全不同。色調(diào)在營(yíng)造畫面氛圍的要素之中起決定性作用,如果錯(cuò)誤地選擇了色調(diào),無論在色相和明度上下多少工夫都無法修正畫面。

選擇的色調(diào)就決定了配色的畫面。如設(shè)計(jì)嬰兒產(chǎn)品,就不適合用鮮艷或嚴(yán)肅的色調(diào)。




色相


暖色與冷色

色相大致可以分為暖色和冷色。由紅色至橙色、黃色被稱為暖色,正如字面上的意義一樣,這些顏色給人溫暖的感覺。相反,由藍(lán)色至青紫色被稱為冷色,表現(xiàn)出清涼、冷靜的感覺。一方面,各自的顏色都與各自特有的氛圍相聯(lián)系。綠色、褐色是用來表現(xiàn)大自然的色彩,字色無論濃淡都散發(fā)著女性的氣息。


色相帶來不同的畫面效果

色相大致可以分為冷色與暖色,一級(jí)位于其中間的色相共4部分。以暖色為主體進(jìn)行配色給人以溫暖健康的印象,以冷色為中心則給人寒冷的印象。




對(duì)比強(qiáng)度


加強(qiáng)對(duì)比凸顯活力

組合色彩之間的色相之差、明度之差和純度之差稱為對(duì)比強(qiáng)度。增加對(duì)比強(qiáng)度可以增添活力,減少對(duì)比強(qiáng)度則顯得沉穩(wěn)。想要?jiǎng)?chuàng)造富予活力、精神飽滿的畫面就要增加對(duì)比強(qiáng)度,想要表現(xiàn)靜謐高雅的畫面,就要限制對(duì)比強(qiáng)度。

A圖中的運(yùn)動(dòng)鞋色相對(duì)比較小,給人穩(wěn)重的印象;反觀B圖的配色色相對(duì)比強(qiáng)烈,表現(xiàn)年輕人的朝氣蓬勃。




面積比


利用大面積比使畫面鮮明銳利

即使使用相同顏色的搭配,當(dāng)面積比例改變時(shí)印象也會(huì)隨之改變。增大面積比(大小差)可以產(chǎn)生輕快的動(dòng)感,相反,減小面積就會(huì)帶給人輕松愉快的印象。

A圖中的橙色地面在畫面中占據(jù)了相當(dāng)大的面積,給人以輕松舒適的印象。較少地面橙色的面積,畫面變得銳利鮮明起來。






2.2 色彩印象指南


檢查畫面的差別

如果想要傳達(dá)的內(nèi)容與畫面的配色產(chǎn)生分歧,那么無論怎樣美麗的配色都不會(huì)有任何效果。觀看者的印象與配色所表達(dá)的畫面無法產(chǎn)生共鳴,那么無論怎樣美麗的配色都沒有任何意義了。


男性——冷靜且有力的形象

令人感覺到男性特征的色彩,必須具有強(qiáng)大的力量。表現(xiàn)強(qiáng)大力量的純色,接近純色的暗色都是符合男性形象的色彩。


女性——冷溫柔親切的形象

和藹、親切、溫柔的色調(diào)與保守色調(diào)的對(duì)比是關(guān)鍵因素。以紅色為中心的暖色十分有效。另外,紫色是可以表現(xiàn)女性溫柔的特殊色相。


寒冷

如果只用藍(lán)色為主的冷色進(jìn)行配色,就可以營(yíng)造出冰天雪地的寒冷感覺。增大明度差能夠進(jìn)一步強(qiáng)調(diào)寒冷的感覺。


涼爽

以冷色為主的大部分色相,減小其對(duì)比強(qiáng)度即可減弱寒冷的程度,使畫面表現(xiàn)出涼爽的感覺。由于亮度是主要因素所以要避免使用強(qiáng)色調(diào)。


溫暖

橙色、紅色、茶色等以暖色為中心的色相用來表現(xiàn)溫暖。減小對(duì)比強(qiáng)度就可以營(yíng)造出溫暖的感覺。使用任何色調(diào)均可。


炎熱

加入對(duì)比色相更能夠強(qiáng)調(diào)暖色。純色色調(diào)是基本要素,素雅的色調(diào)與明亮的色調(diào)都無法表現(xiàn)出炎熱的感覺。


活力

朝氣、活力、休閑


可愛·浪漫


都市氣息·優(yōu)雅

略顯素雅的明亮色調(diào)帶給人平靜和安詳?shù)母杏X。表現(xiàn)出橙色生活的優(yōu)雅氛圍。


豪華感·高級(jí)感

將暗色色調(diào)放置在純色的旁邊,表現(xiàn)出豪華氣質(zhì)。即使是同樣的暗色,由于被放置在離純色較遠(yuǎn)的位置上而失去了鮮艷色澤,豪華的氛圍也一下子消失不見了。


自然之美

樹木的綠色、大地的褐色使人直接聯(lián)想到大自然,心情也變得安定祥和。


力量·速度

充滿力量的畫面不可缺少重量感,但并不一定適合于表現(xiàn)速度感。速度感是以鮮艷的純色色調(diào)為基調(diào),而力量感則與鮮艷的厚重色調(diào)相吻合。


幻想·神秘

同色系色彩帶來幻想世界的縹緲感。


藍(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)掃碼ben_lanlan,報(bào)下信會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

文章來源:站酷  作者:隨風(fēng)落葉ZK
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


如何從業(yè)務(wù)出發(fā),發(fā)掘更多的設(shè)計(jì)價(jià)值

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

“價(jià)值”在百度百科的解釋是————“價(jià)值屬于關(guān)系范疇,從認(rèn)識(shí)論上來說,是指客體能夠滿足主體需要的效益關(guān)系,是表示客體的屬性和功能與主體需要間的一種效用、效益或效應(yīng)關(guān)系的哲學(xué)范疇?!?br style="outline:0px;margin:0px;padding:0px;" /> 因?yàn)橐恍┩獠吭?,讓我最近一段時(shí)間都在思考一個(gè)問題,作為一名設(shè)計(jì)師,我的價(jià)值是什么???我的設(shè)計(jì)能力。那我設(shè)計(jì)能力的價(jià)值是什么???完成產(chǎn)品視覺的呈現(xiàn),幫助項(xiàng)目上線和產(chǎn)品落地?
當(dāng)這個(gè)回答擺到我面前的時(shí)候,我竟然有了一絲的不安。
因?yàn)樵谖铱磥硪曈X呈現(xiàn)這只是能力,并不是真正的價(jià)值。如果作為設(shè)計(jì)師只是這樣的能力,你會(huì)發(fā)現(xiàn)在團(tuán)隊(duì)的位置是很容易就會(huì)被頂替的。
那作為設(shè)計(jì)師的我,那如何才能讓自己不容易被頂替,體現(xiàn)自身價(jià)值到底是什么就成了重中之重的事情。
那體現(xiàn)自身價(jià)值之前,我需要去知道設(shè)計(jì)價(jià)值是什么。設(shè)計(jì)價(jià)值說到底就是解決問題,從而帶來了想要的效益。


那我需要思考的方向(我工作主要方向B端產(chǎn)品)

一、設(shè)計(jì)師解決了什么問題
1、發(fā)現(xiàn)問題
2、定義問題
3、分析問題
二、設(shè)計(jì)師如何解決的問題
1、明確設(shè)計(jì)目標(biāo)
2、制定設(shè)計(jì)策略
三、設(shè)計(jì)師如何驗(yàn)證問題是否解決
1、收集用戶反饋
2、跟蹤數(shù)據(jù)指標(biāo)
四、舉個(gè)例子
五、總結(jié)一下

 

第一步:「設(shè)計(jì)師解決了什么問題」

發(fā)現(xiàn)問題、定義問題、分析問題
一開始工作的時(shí)候很長(zhǎng)一段時(shí)間都是被動(dòng)接需求、找參考、輸出設(shè)計(jì)稿,這樣一個(gè)流程下來,解決的問題無非就是如何用設(shè)計(jì)呈現(xiàn)需求的過程,設(shè)計(jì)師的價(jià)值發(fā)揮就會(huì)非常有限。所以如果想發(fā)掘更多設(shè)計(jì)價(jià)值,就需要轉(zhuǎn)被動(dòng)為主動(dòng),將設(shè)計(jì)前置,從業(yè)務(wù)出發(fā)去發(fā)現(xiàn)問題(通過分析項(xiàng)目背景/目標(biāo)、用戶調(diào)研、行業(yè)/競(jìng)品分析等)、定義問題(問題出現(xiàn)的原因是什么?用戶的原因?還是產(chǎn)品本身的原因)并且分析問題(細(xì)化出現(xiàn)問題的原因,給出解決問題的方案)


第二步:「設(shè)計(jì)師如何解決的問題」

明確設(shè)計(jì)目標(biāo)、制定設(shè)計(jì)策略
雖然如何解決問題每個(gè)人的側(cè)重點(diǎn)都不一樣的,但是設(shè)計(jì)目標(biāo)作為體驗(yàn)提升的開始,正確的設(shè)計(jì)目標(biāo)決定了提升的方向,而設(shè)計(jì)目標(biāo)可以由產(chǎn)品目標(biāo)(提升某個(gè)具體的指標(biāo)、提高用戶的操作效率)和用戶目標(biāo)(用戶的想要得到什么、用戶使用產(chǎn)品的痛點(diǎn)是什么)的推導(dǎo)出來。目標(biāo)有了就要落地去實(shí)現(xiàn),作為設(shè)計(jì)師,設(shè)計(jì)策略是落地的重要一步:統(tǒng)一規(guī)范、縮短操作路徑、提升用戶滿意度等等


第三步:「設(shè)計(jì)師如何驗(yàn)證問題解決與否」

收集用戶反饋、跟蹤數(shù)據(jù)指標(biāo)
我們總是在主觀的評(píng)價(jià)這個(gè)設(shè)計(jì)好不好看、好不好用,導(dǎo)致設(shè)計(jì)的價(jià)值很難去真正的衡量。其實(shí)衡量?jī)r(jià)值最基本的方法無非就是你這樣做帶來了什么,結(jié)果導(dǎo)向是衡量設(shè)計(jì)最為標(biāo)準(zhǔn)的,也是流程閉環(huán)的最后一步,如果沒有結(jié)果,流程無法閉環(huán),那設(shè)計(jì)價(jià)值也無法衡量。而產(chǎn)品上線后得到結(jié)果又是什么?無非就是用戶反饋是否滿意和數(shù)據(jù)指標(biāo)是否達(dá)標(biāo)。 


舉個(gè)例子

項(xiàng)目背景是在公司業(yè)務(wù)快速增長(zhǎng)和用戶對(duì)于服務(wù)品質(zhì)的訴求提升,加上客服團(tuán)隊(duì)一直處于被動(dòng)依靠人力處理用戶問題的服務(wù)模式的情況下,排除大幅度疊加人員的方案,希望通過數(shù)據(jù)驅(qū)動(dòng)+服務(wù)產(chǎn)品智能化的方式來對(duì)客服體系的升級(jí)。從而提高客服人員的工作效率,減少公司的招聘成本的同時(shí)提升用戶的體驗(yàn),最終實(shí)現(xiàn)公司業(yè)務(wù)的快速增長(zhǎng)。

第一步:「設(shè)計(jì)師解決了什么問題」

1、發(fā)現(xiàn)問題

通過項(xiàng)目背景不難發(fā)現(xiàn)其中問題所在:在不增加人員的情況下,當(dāng)前客服團(tuán)隊(duì)的服務(wù)模式,已經(jīng)滿足不了現(xiàn)有的業(yè)務(wù)增長(zhǎng)趨勢(shì)和客戶的品質(zhì)訴求。

那我們需要做的就是解決服務(wù)模式的問題。

服務(wù)模式有什么問題呢?一直處于被動(dòng)依靠人力處理用戶問題。

2、定義問題

為什么一直處于被動(dòng)依靠人力處理用戶問題呢?

· 用戶一遇到問題就去找客服,用戶做不到遇到問題可以通過自我查詢或者其他不依賴客服的方式來解決。

· 客服人員能力有限,每天的用戶承接量大,重復(fù)性問題多,問題處理流程繁瑣,導(dǎo)致單個(gè)問題處理時(shí)間較長(zhǎng)。

3、分析問題

排除人力堆加的方法以外,如何才能解決服務(wù)模式的問題呢?

方法就是

增強(qiáng)用戶自主解決能力:自主渠道的升級(jí),實(shí)現(xiàn)渠道擴(kuò)增和業(yè)務(wù)分流,通過內(nèi)容分層,簡(jiǎn)化用戶查找問題的流程,培養(yǎng)用戶自主解決能力的心智模型;引入智能機(jī)器人能力,實(shí)現(xiàn)簡(jiǎn)單性、高頻率問題由機(jī)器人代理解決。

提升客服解決問題能力:調(diào)整問題的優(yōu)先級(jí)排序,優(yōu)先解決重要客戶的問題,減少重要客戶的投訴和流失;尋找問題處理流程的機(jī)會(huì)點(diǎn),減少客服單個(gè)處理時(shí)長(zhǎng);分析不同程度客服同時(shí)處理問題量的數(shù)據(jù),限制客服最大承接量。

既然問題已經(jīng)確定了,那就要去解決問題。根據(jù)對(duì)問題的分析結(jié)果,該如何轉(zhuǎn)換為設(shè)計(jì)呢?


第二步:「設(shè)計(jì)師如何解決的問題」

1、確定設(shè)計(jì)目標(biāo)

結(jié)合產(chǎn)品目標(biāo)(自助渠道升級(jí)、產(chǎn)品智能化/數(shù)據(jù)化)+用戶目標(biāo)=設(shè)計(jì)目標(biāo)的推導(dǎo)公式

產(chǎn)品目標(biāo)是產(chǎn)品經(jīng)理/需求方給到你的,但是用戶目標(biāo)則是設(shè)計(jì)師自己調(diào)研分析得來的

----用戶想做什么?

用戶想快速解決遇到的問題

----客服想做什么?

客服想輕松快速的幫助用戶解決遇到的問題,完成工作中的KPI指標(biāo)

----用戶的痛點(diǎn)?

用戶在自助渠道找不到答案,于是遇到問題就找客服去解決問題,智能機(jī)器人的回答也解決不了問題,所以需要找人工客服,但是需要等待很長(zhǎng)的時(shí)間

----客服的痛點(diǎn)?

每天高負(fù)壓的的工作環(huán)境,枯燥重復(fù)的工作流程,敏感繁多的考核指標(biāo)。

2、制定設(shè)計(jì)策略

那在確定好設(shè)計(jì)目標(biāo)之后,就需要通過制定設(shè)計(jì)策略,以達(dá)到設(shè)計(jì)目標(biāo)。

注意:我們?cè)谧鲈O(shè)計(jì)之前,必須要確定設(shè)計(jì)目標(biāo)。因?yàn)槟繕?biāo)是方向,不然做到最后發(fā)現(xiàn)自己做的設(shè)計(jì)沒有解決產(chǎn)品目標(biāo)和用戶目標(biāo),那就是白白的浪費(fèi)時(shí)間,也說明自己做的設(shè)計(jì)是又問題的。

第三步:「設(shè)計(jì)師如何驗(yàn)證問題解決與否」

項(xiàng)目上線后,我們需要去收集用戶反饋,關(guān)注我們?cè)O(shè)定好的指標(biāo)去衡量、驗(yàn)證構(gòu)建的設(shè)計(jì)方案是否解決用了用戶問題以及是否達(dá)成了產(chǎn)品目標(biāo),因?yàn)檫@樣設(shè)計(jì)工作才能實(shí)現(xiàn)一個(gè)閉環(huán)。

1、收集用戶反饋

可通過在產(chǎn)品上線初期以及上線一段時(shí)間后進(jìn)行調(diào)查問卷的發(fā)放,通過調(diào)查問卷得到用戶在使用新的產(chǎn)品的感受,直觀感受產(chǎn)品迭代后的反響,同時(shí)也可以為下次的迭代提供方向和依據(jù)

2、跟蹤數(shù)據(jù)指標(biāo)

從產(chǎn)品目標(biāo)我們可以看出,我們的數(shù)據(jù)指標(biāo)就是提高用戶對(duì)自主渠道的使用率,那我們只需要在自主渠道的頁面增加一定的數(shù)據(jù)埋點(diǎn):頁面點(diǎn)擊率、頁面瀏覽時(shí)長(zhǎng)等等


總結(jié)一下

寫了這么多,才發(fā)現(xiàn)自己現(xiàn)在欠缺的,還有環(huán)境欠缺的。所以冷靜的理一理自己的工作的流程,多關(guān)注業(yè)界的動(dòng)態(tài)。主動(dòng)的將設(shè)計(jì)前置,提升自己的價(jià)值,提高自己在團(tuán)隊(duì)/項(xiàng)目中的話語權(quán)。不然如果只是簡(jiǎn)簡(jiǎn)單單的設(shè)計(jì)呈現(xiàn),自己永遠(yuǎn)處于被動(dòng)挨打的狀態(tài),沒有話語權(quán),沒有價(jià)值體現(xiàn),隨時(shí)都有可能被替代。

藍(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)掃碼ben_lanlan,報(bào)下信會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

文章來源:站酷  作者:一曲問靈
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


如何選擇確定B端后臺(tái)設(shè)計(jì)風(fēng)格及細(xì)節(jié)優(yōu)化

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

如何選擇合適的B端設(shè)計(jì)風(fēng)格?


1.B端后臺(tái)分類:

根據(jù)服務(wù)對(duì)象劃分:

一類支持有C端前臺(tái),支持前臺(tái)產(chǎn)品管理各種資源。第二類服務(wù)企業(yè),提高企業(yè)工作效率和營(yíng)收。


根據(jù)后臺(tái)功能:

1.監(jiān)控運(yùn)營(yíng):時(shí)效性強(qiáng),旨在實(shí)時(shí)反饋異常情況,快速判斷下達(dá)命令,回復(fù)信息、多用于數(shù)據(jù)控制中心。

2.數(shù)據(jù)分析:數(shù)據(jù)結(jié)果的對(duì)比和分析趨勢(shì),時(shí)效性要求并不高,了解整體和各部分?jǐn)?shù)據(jù)水平,助力決策。

3.記錄管理類:主要用于人員、設(shè)備、資產(chǎn)等增刪改查,文本信息容量大,頻繁便捷的操作。

4.系統(tǒng)配置:權(quán)限配置、設(shè)備功能配置,操作為主。


2.后臺(tái)深淺兩大風(fēng)格分類:

淺色:

適合文本信息多密集的表單列表類后臺(tái),淺色更符合人眼白底黑字的閱讀習(xí)慣,瀏覽速度更快,信息獲取效率更高。


深色:

圖像信息密集的后臺(tái)適合圖片、數(shù)據(jù)可視化圖表等;深色對(duì)彩色的圖像信息襯托更強(qiáng)。信息獲取速度較慢,長(zhǎng)時(shí)間可能視疲勞。




3.作者常向產(chǎn)品方提供的風(fēng)格參考

較常見


1.經(jīng)典商務(wù)風(fēng)(導(dǎo)航深、內(nèi)容淺)——專業(yè)、高效、成熟、可信賴(對(duì)照深色西裝人物形象)

      優(yōu)點(diǎn):市面最常見的風(fēng)格,普世性高,大多數(shù)用戶可快速接受,層次分明

      缺點(diǎn):視覺缺乏記憶點(diǎn)


 2.輕量科技感(導(dǎo)航淺、內(nèi)容淺)——簡(jiǎn)潔、明快、輕量、年輕(對(duì)照白襯衫打領(lǐng)帶男性)

      優(yōu)點(diǎn):視覺清新明快更年輕化更輕量,對(duì)其他文本及圖形展示包容性高,就像A4白紙一樣容器存在感弱

      缺點(diǎn):純白色導(dǎo)航+頁面層次略曖昧。


 3.藍(lán)色科技風(fēng)(導(dǎo)航中、內(nèi)容中)

      適合:適合科技屬性強(qiáng)的產(chǎn)品界面,圖像圖形展示

      缺點(diǎn):對(duì)其他色彩信息有干擾,持續(xù)性長(zhǎng)時(shí)間觀看易視覺疲勞


 4.暗黑科技風(fēng)(導(dǎo)航深、內(nèi)容深)

      優(yōu)點(diǎn):對(duì)色彩表現(xiàn)力強(qiáng)

      缺點(diǎn):密集文本信息獲取速度會(huì)下降,持續(xù)性長(zhǎng)時(shí)間觀看易視覺疲勞




4.精準(zhǔn)選擇風(fēng)格時(shí)可以進(jìn)一步的考慮:

1.整體行業(yè)風(fēng)格

比如美妝和科技行業(yè)的整體設(shè)計(jì)基調(diào)就不太相同。


2.產(chǎn)品想要傳達(dá)的氣質(zhì):

理性可靠 or  簡(jiǎn)潔輕松輕量 or 關(guān)懷普世 or 酷炫吸睛….這個(gè)可以和相關(guān)產(chǎn)品經(jīng)理、銷售共同商討


3.目標(biāo)用戶的群體特點(diǎn)及喜好。

根據(jù)目標(biāo)用戶的性別、年齡層、受教育水平,審美水平考量(可能包含多種角色,選取1.2個(gè)核心角色為參考)帶入目標(biāo)用戶工作場(chǎng)景及愛用物常用物品味,去判斷基調(diào)。

如主要用戶群:40+男性用戶,本科以上受教育水平,使用windows電腦進(jìn)行專業(yè)管理操作,審美傾向明確內(nèi)斂。

如主要用戶群:20-40歲,男女比例約6:4;大專;操作水平參差


4.使用場(chǎng)景及高頻的操作。

例如:最常使用數(shù)據(jù)分析管理,需要快速閱覽多條數(shù)據(jù),對(duì)數(shù)據(jù)進(jìn)行比對(duì),更適合淺色風(fēng)格展示表單數(shù)據(jù)。


5.判斷獨(dú)立的平臺(tái)是否為獨(dú)立開發(fā)

獨(dú)立開發(fā)的,可以采取更獨(dú)特設(shè)計(jì)。若平臺(tái)很大需要不同外包公司的合作屬于整合類平臺(tái)則更注重設(shè)計(jì)的包容性。



5.如何讓后臺(tái)設(shè)計(jì)更具特色:

1.重點(diǎn)色的使用

“731配色比例”70%的面板色,30%的導(dǎo)航面板色,10%的強(qiáng)調(diào)色。(這里的用色比例可以根據(jù)內(nèi)容具體再去調(diào)節(jié)只是大概比例)品牌色或重點(diǎn)色:強(qiáng)調(diào)行動(dòng)關(guān)鍵點(diǎn)、重要信息高亮、圖形化說明等。強(qiáng)調(diào)色用就要用的像蛋糕上的櫻桃。起到畫龍點(diǎn)睛作用即可。

2.圖標(biāo)的優(yōu)化

后臺(tái)高頻出現(xiàn)的圖標(biāo),值得我們花時(shí)間去統(tǒng)一設(shè)計(jì)打磨,調(diào)整圓角粗細(xì)疏密,符合整體界面氣質(zhì)。從圖標(biāo)庫里拖出的圖標(biāo)很多在線條粗細(xì)上是不統(tǒng)一的,好的設(shè)計(jì)在細(xì)節(jié)處也要?jiǎng)尤恕?

B端工具類圖標(biāo)識(shí)別性第一,美觀性第二。B端導(dǎo)航圖標(biāo)更多是在基礎(chǔ)造型上打磨,不需要加花里胡哨的漸變、投影,導(dǎo)航圖標(biāo)一般在24px-16px大小,太復(fù)雜反而看不清。在區(qū)分狀態(tài)的時(shí)候可以考慮加點(diǎn)品牌色


3.空狀態(tài)小插畫

空狀態(tài)插畫是B端設(shè)計(jì)師少有能發(fā)揮自己繪畫天賦小巧思的地方。

圖形化狀態(tài)語言,輔助用戶理解內(nèi)容。可以將產(chǎn)品機(jī)械蒼白的文案設(shè)計(jì)表現(xiàn)的更加具有溫度,具有引導(dǎo)性。讓乏味的工作出現(xiàn)一些共情小彩蛋,有趣的插圖動(dòng)畫可以緩解等待的焦慮。



4.登錄注冊(cè)頁

純色背景卡片式:簡(jiǎn)單大方更聚焦登錄操作

插畫背景:場(chǎng)景化展示產(chǎn)品的功能及亮點(diǎn),讓用戶更有心理預(yù)期

幾何圖形背景:最后和品牌圖形相關(guān),加深用戶對(duì)產(chǎn)品的品牌印象。

照片背景:相關(guān)場(chǎng)景或產(chǎn)品類型,具象圖片信息更直觀


5.圓角的大小

不同大小的圓角傳達(dá)產(chǎn)品不同的氣質(zhì),大圓角親和、小圓角精致、中等圓角大眾中庸。



6.優(yōu)化信息層級(jí)

優(yōu)化信息層級(jí),區(qū)分信息主次可以使閱讀更快,操作更快,界面更有節(jié)奏感。

這時(shí)候你就是那個(gè)考前畫重點(diǎn)的老師

判斷一個(gè)頁面里最重要的是那些信息或操作,強(qiáng)化它!并弱化輔助信息;

判斷一個(gè)模塊里那些是重要信息,強(qiáng)化它!



6.新人需要避免的雷點(diǎn):


1.追求炫酷的視覺效果舍棄操作效率。比如追波風(fēng)滿屏花里胡哨的卡片及面板,滿屏大投影及高飽和色彩。對(duì)于B端界面來說信息噪音太多,反而干擾信息獲取效率。


2.反常規(guī)用戶習(xí)慣的操作。尊重用戶習(xí)慣,不要為了個(gè)性化去嘗試改變,不要妄圖改變用戶的操作和認(rèn)知的慣性。慣性思維大于設(shè)計(jì)思維,曾經(jīng)遇到過產(chǎn)品因?yàn)橛沂植僮魉砸褜?dǎo)航放在右邊的離譜例子。


3.數(shù)量多,動(dòng)靜大的夸張的動(dòng)效。B端與C端不同的地方在于希望操作者沉浸式工作,遵循非必要不打擾。之前看過一個(gè)反面例子后臺(tái),在每一步操作后都出現(xiàn)大的場(chǎng)景動(dòng)效鼓勵(lì)完成,如果作為一個(gè)長(zhǎng)期使用的工作者,我會(huì)覺得每次完成任務(wù)都需要等待動(dòng)畫完成可能只需要2-3s也很浪費(fèi)我的時(shí)間。


4.新人建議多看Antdesign和Element等成熟的組件,創(chuàng)新類組件樣式,最好和和開發(fā)商量是否能夠?qū)崿F(xiàn)。


5.在確定主要風(fēng)格及2-5張主要頁面后,就應(yīng)該著手基礎(chǔ)規(guī)范(色彩字體等,不然后面越做越亂)。


6.一段時(shí)間一個(gè)審美,同一界面中的元素風(fēng)格不統(tǒng)一。


7.避免大面積使用高飽和高明度的色彩,及曖昧含糊的臨近色彩。長(zhǎng)時(shí)間使用眼睛會(huì)累,產(chǎn)生不耐煩焦躁的負(fù)面情緒。


藍(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)掃碼ben_lanlan,報(bào)下信會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

文章來源:站酷  作者:唐小蔥
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



必讀!用戶體驗(yàn)設(shè)計(jì)指南 - KIT組件庫一站式體驗(yàn)搭建

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

本文將從理論到實(shí)踐,從軟件到插件,再到不同應(yīng)用場(chǎng)景拆解和團(tuán)隊(duì)協(xié)同的重構(gòu),一步步教你如何搭建產(chǎn)品KIT組件庫。也給大家?guī)砟嫣斓腁nima插件教程,組件化設(shè)計(jì)的必備插件,目前國(guó)內(nèi)還比較少有文章講到。手把手!嘴對(duì)嘴!堪稱全網(wǎng)最細(xì)保姆級(jí)教程!




01. 什么是KIT組件庫?


一個(gè)成熟的設(shè)計(jì)團(tuán)隊(duì),都會(huì)為產(chǎn)品制定設(shè)計(jì)規(guī)范,搭建產(chǎn)品KIT組件庫,組件化思維也是設(shè)計(jì)師的必備思維之一。組件庫會(huì)讓團(tuán)隊(duì)協(xié)作變得高效且一致,讓團(tuán)隊(duì)成員專注于深耕體驗(yàn)和細(xì)節(jié),實(shí)現(xiàn)設(shè)計(jì)向產(chǎn)品賦能。極大的節(jié)省設(shè)計(jì)和開發(fā)成本,優(yōu)化用戶在界面流轉(zhuǎn)間的感知差異體驗(yàn)。


KIT組件庫本質(zhì)上是一個(gè)集合的Sketch文件,由原子、分子、組織、模板、頁面組成。原子理論支撐可復(fù)用、可修改、易于協(xié)同和維護(hù)。


由Google推出的當(dāng)時(shí)媲美蘋果全新設(shè)計(jì)語言的Material Design,Material Design也是最為經(jīng)典組件庫設(shè)計(jì)。現(xiàn)如今阿里的Ant Design和Element給我們提供了一套完整可復(fù)用的組件庫。



02. 原子設(shè)計(jì)理論


原子設(shè)計(jì)是將界面設(shè)計(jì)中最小元素——原子,組合嵌套為分子、組織、模板、頁面的系統(tǒng)規(guī)范化設(shè)計(jì)過程。




1.  原子 Atoms

原子Atoms,我們知道是指化學(xué)反應(yīng)不可再分的基本微粒。原子在化學(xué)反應(yīng)中不可分割,但在物理狀態(tài)中可以分割的。原子由原子核和繞核運(yùn)動(dòng)的電子組成,所以原子是構(gòu)成物質(zhì)的最小粒子這就不對(duì)了。


但在界面設(shè)計(jì)中我們所說的原子是構(gòu)成界面的最小顆粒度元素,在設(shè)計(jì)中無法再被拆分或者拆分下去已無意義的最小單位。比如不同顏色樣式、文字樣式、輸入框、icon圖標(biāo)、分割線等。

2. 分子 Molecules

由原子按照一定的規(guī)律和目的組成的部分為分子,在界面設(shè)計(jì)中比如Button按鈕、swittch開關(guān)、非模態(tài)彈窗Toast等,可以理解為比較簡(jiǎn)單的小組件。

3. 組織 Organisms

將不同的分子與原子組合就組成了組織。比如頭像與信息組成的聯(lián)系人容器卡片、Table列表、Nav-bar、Tab-bar等等。


4. 模板 Templates

將組織與分子、原子進(jìn)行特定的組合就形成了模板。這一步已經(jīng)能展示界面的主要功能和交互了。一般這一步得到的結(jié)果就是我們?nèi)粘9ぷ髦械脑蛨D,產(chǎn)品的大致形態(tài)也慢慢清晰。所以模板可以理解成未上色的界面。


5. 頁面 Pages

最終輸出的高保真設(shè)計(jì)圖即為我們說的表現(xiàn)層的頁面Pages。將模板填充信息和圖片內(nèi)容,就得到了高保真設(shè)計(jì)界面。


03. KIT組件庫搭建過程詳解


以最近做的一個(gè)NFT項(xiàng)目為例子,展示具體搭建細(xì)節(jié)的全過程。




1.  命名規(guī)范


命名按照:一級(jí)分類 / 二級(jí)分類 / 三級(jí)分類 。例如:一級(jí)標(biāo)題樣式/蘋方/常規(guī)/灰階0


其中 “/” 為層級(jí)結(jié)構(gòu)分隔符,Sketch會(huì)自動(dòng)識(shí)別。組件庫的搭建需要按照層級(jí)規(guī)范命名,從最外層到最內(nèi)層,就像一個(gè)抽屜,每一層都對(duì)應(yīng)放著東西。規(guī)范的命名會(huì)使后期調(diào)用維護(hù)、團(tuán)隊(duì)協(xié)同變得清晰高效。




2. 樣式


(1)顏色樣式

我們?cè)O(shè)計(jì)一般都需要定義顏色樣式,一般有主色調(diào)(Main tone)、輔助色(Minor)、漸變色(Gradient)、字體的灰階度(Gray scale)等。選中你需要?jiǎng)?chuàng)建樣式的顏色,點(diǎn)擊「外觀 - 創(chuàng)建」,在輸入框內(nèi)輸入層級(jí)規(guī)范命名。



(2)文字樣式

定義文字樣式,文字具有字體、大小、字重、灰階等屬性,選中文字,點(diǎn)擊【外觀-新建】,在輸入框內(nèi)輸入層級(jí)規(guī)范命名。




(3)樣式切換

當(dāng)我們需要切換一個(gè)定義好的文字樣式時(shí),比如從“閱讀文本樣式”更換為“一級(jí)標(biāo)題樣式”,只需要選中文字 - 點(diǎn)擊「當(dāng)前文檔」下定義的文字樣式 - 點(diǎn)擊需要更改的文字樣式即可。




(4)樣式修改 - 解綁與更新

當(dāng)我們需要對(duì)定義好的文字樣式進(jìn)行修改時(shí),比如在設(shè)計(jì)的過程中突然感覺"閱讀文本樣式"字體小了點(diǎn),為了優(yōu)化閱讀體驗(yàn)需要增大字號(hào)。


1. 單個(gè)修改 - 解綁

將文字調(diào)整更改為你需要的大小或字重,此時(shí)只對(duì)單個(gè)文本修改,不對(duì)其他文本產(chǎn)生影響,點(diǎn)擊解綁,便可與定義好的樣式分離。


2. 整體同步 - 更新

將文字調(diào)整更改為你需要的大小或字重,樣式名稱后會(huì)出現(xiàn) "*" 星號(hào),此時(shí)代表未保存,且更新按鈕激活,點(diǎn)擊更新按鈕則所有使用該樣式的字段都會(huì)更改,整體同步更新。




3. 組件

組件是將元素定義為標(biāo)準(zhǔn)化可復(fù)用的集合體,對(duì)組件進(jìn)行規(guī)范的命名,形成高效設(shè)計(jì)的KIT組件庫。


(1)文本組件

選中我們需要定義的文本字段,注意!根據(jù)實(shí)際應(yīng)用場(chǎng)景選擇合適的文本對(duì)齊方式,否則修改字段信息是會(huì)出錯(cuò)。這里文本選擇左對(duì)齊,點(diǎn)擊 「創(chuàng)建控件」- 按照層級(jí)規(guī)范命名,選擇從左往右布局 - 點(diǎn)擊 「覆蓋層」即可對(duì)文本字段內(nèi)容進(jìn)行修改。




(2)標(biāo)簽組件


1. 單個(gè)標(biāo)簽

當(dāng)設(shè)計(jì)完標(biāo)簽后,對(duì)標(biāo)簽創(chuàng)建組件。依次選中便簽中的文字“LIMIT”、“2000份”,依次將文本選擇左對(duì)齊,步驟同上。將整個(gè)標(biāo)簽打組,點(diǎn)擊 「創(chuàng)建控件」- 按照層級(jí)規(guī)范命名,選擇從左往右布局(這里注意!從左往右布局表示標(biāo)簽在更改字段信息后,便簽左邊固定不動(dòng),從左往右自適應(yīng)) - 在覆蓋層修改文本字段信息,庫存標(biāo)簽組件自適應(yīng)。




2. 標(biāo)簽修改           
         

如果我們覺得這個(gè)庫存標(biāo)簽設(shè)計(jì)的不滿意,或者還需新增倒計(jì)時(shí)標(biāo)簽、已售標(biāo)簽,那怎樣又該怎么做的?


第一步:這時(shí)我們新建一個(gè)Sketch文件,命名為「 *** KIT 組件庫」。選中標(biāo)簽圖標(biāo)復(fù)制,將圖標(biāo)粘貼到新建文件內(nèi),注意!此時(shí)需要給圖標(biāo)添加合適的畫板,并按規(guī)范命名。

第二步:將Sketch文件保存到桌面,拖動(dòng)到「首選項(xiàng)-組件庫」內(nèi)。

第三步:選中組件,回車可進(jìn)入控件(組件)頁面,可直接調(diào)用定義好的控件,進(jìn)行修改。





Tips:這里畫板的作用是

(1)畫板是用來規(guī)范固定組件位置和大小的,成套系的KIT Library需要建立畫板。

(2)畫板組件在創(chuàng)建后,調(diào)用時(shí)只固定大小和邊界。

(2)如果只是做較少的界面,較少的復(fù)用的樣式,就可以不用做畫板。




3. 多個(gè)標(biāo)簽

當(dāng)頁面需要不止一個(gè)標(biāo)簽時(shí),就需要新增標(biāo)簽,通常為左右或上下布局。若直接增加一個(gè)標(biāo)簽修改字段,文本標(biāo)簽不會(huì)自適應(yīng)。 和之前操作一致,將新建的標(biāo)簽新建組件后,可實(shí)現(xiàn)標(biāo)簽文本自適應(yīng)。




4. Sketch素材調(diào)用

繼續(xù)添加商品作者組件、價(jià)格組件。點(diǎn)擊右邊覆蓋層可修改文本字段。點(diǎn)擊文字右邊小icon可調(diào)用Sketch自帶的數(shù)據(jù)。




(3)容器組件整合

將前面定義好的所有組件整合到容器中,形成可直接復(fù)用的商品信息容器組件。


第一步:調(diào)用定義好的閱讀文本樣式,注意!直接拖過來即可,文本框的長(zhǎng)度左右拉到合適的左右間距,這里不需要?jiǎng)游谋究虻母叨?,否則會(huì)出錯(cuò)。將底部容器(卡片)的收起到合適的高度


第二步:選中整體打組,創(chuàng)建組件。注意! 此時(shí)選擇從上向下布局。


第三步:選中整體,在右側(cè)覆蓋層可對(duì)文本進(jìn)行編輯,輸入文本字段,此時(shí)容器高度實(shí)現(xiàn)自適應(yīng)。




(4)組件的拆解與重構(gòu)


頁面可一步步拆解為模板、組織、分子到原子。原子和分子可組合嵌套重構(gòu)為組織、模板和頁面。




(5)Anima插件


如果上下同時(shí)有卡片的情況該怎么呢? 當(dāng)然,我們完全可以將它們一起定義組件,但有沒有其他更便捷,更靈活的方法呢?這里跟大家介紹Anima插件的使用,會(huì)使得大家在搭建組件庫時(shí)變得更加靈活高效。


Anima插件為一款在線自動(dòng)響應(yīng)式的插件,其中的STACK與PADDING功能簡(jiǎn)直是Sketch設(shè)計(jì)必備,簡(jiǎn)直逆天。




1. PADDING功能

新建一個(gè)文本,當(dāng)點(diǎn)擊PADDING后,會(huì)自動(dòng)生成一個(gè)底板,選中底板可對(duì)其進(jìn)行編輯,更改顏色、原角度等。在PADDING輸入框內(nèi)可輸入距離上下左右的邊距。此時(shí)注意文本的對(duì)其方式,左對(duì)齊一般適合標(biāo)簽使用較多,而居中對(duì)齊適合一般的居中按鈕,如立即支付、立即報(bào)名等。




2. STACK功能

將三個(gè)標(biāo)簽分別打組,再全選整體打一個(gè)組,點(diǎn)擊STACK,選擇左右排版和居中對(duì)齊,輸入你需要的間距。此時(shí)Anima插件最牛的STACK功能就是可以雙擊選中任一個(gè)標(biāo)簽,拖拽可改變排列順序,松手后還可以自適應(yīng)。




04. 為什么要搭建組件庫?


(1)統(tǒng)一(Unified)


1. 團(tuán)隊(duì)不同成員或新來設(shè)計(jì)師之間協(xié)同配合,保證輸出的一致性和穩(wěn)定性。


2. 統(tǒng)一的組件庫樣式,會(huì)減輕用戶在頁面流轉(zhuǎn)間的疑惑感和理解成本,使用戶體驗(yàn)得到了提高。



(2)效率(Efficientcy)


1. 減少相同模塊的重復(fù)設(shè)計(jì)。一個(gè)產(chǎn)品功能流轉(zhuǎn)、頁面交互必定會(huì)涉及到大量的重復(fù)設(shè)計(jì)的樣式與組件。試想一下,如果每一個(gè)都重新設(shè)計(jì)將是一個(gè)巨大的時(shí)間成本浪費(fèi)。


2. 如果從產(chǎn)品的全生命周期來看,搭建好設(shè)計(jì)中臺(tái)KIT組件庫,并與開發(fā)進(jìn)行溝通,能減少前端開發(fā)樣式,將時(shí)間更多的放在功能交互體驗(yàn)和項(xiàng)目推動(dòng)上,極大提高了效率。



(3)協(xié)同(Together)


1. 建立完善的設(shè)計(jì)規(guī)范和KIT組件庫,提高組件庫優(yōu)化迭代效率。組件庫團(tuán)隊(duì)協(xié)同自動(dòng)更新。


2. KIT組件庫一鍵修改,也可通過組件分離功能(解綁)單獨(dú)對(duì)樣式進(jìn)行修改,工作中需要對(duì)設(shè)計(jì)反復(fù)調(diào)整打磨,可進(jìn)行批量一鍵更改,單個(gè)模塊的單獨(dú)修改。




05. 什么時(shí)候搭建組件庫?


什么時(shí)候時(shí)候搭建組件庫?先定義規(guī)范都是扯淡!所謂實(shí)踐才是檢驗(yàn)真理的唯一標(biāo)準(zhǔn),“在設(shè)計(jì)開始之前就制定設(shè)計(jì)規(guī)范,是不切實(shí)際的做法,你會(huì)發(fā)現(xiàn)做好的規(guī)范在實(shí)際操作中是無用且白費(fèi)精力的”摘自《破繭成蝶 用戶體驗(yàn)設(shè)計(jì)師的成長(zhǎng)之路》。所以組件庫中的組件必定是經(jīng)過反復(fù)修改后適合產(chǎn)品以及可后期可復(fù)用的。


















并不是所有的設(shè)計(jì)都需要做設(shè)計(jì)規(guī)范或者KIT組件庫。組件庫的搭建本身就是一個(gè)耗費(fèi)時(shí)間人力的事情,如果是一次性項(xiàng)目那根本就沒有必要做組件庫了。是否需要?jiǎng)?chuàng)建樣式或組件取決于該樣式或組件在后續(xù)的工作中是否會(huì)被復(fù)用或復(fù)用的頻次。也會(huì)減少前端工程師重復(fù)開發(fā)CSS樣式以及后臺(tái)數(shù)據(jù)的封裝成本。



06. 團(tuán)隊(duì)協(xié)同


將組件都定義在新建的Sketch文件中,將文件發(fā)給你的團(tuán)隊(duì)其他成員。步驟同上。


第一步:新建一個(gè)Sketch文件,命名為「 *** KIT組件庫」,將組件都創(chuàng)建在新建文件內(nèi)。

第二步:將Sketch文件發(fā)送給團(tuán)隊(duì)其他成員,拖動(dòng)到Sketch「首選項(xiàng)-組件庫」內(nèi)。

第三步:直接調(diào)用定義好的組件。


共享組件庫個(gè)人使用 Sketch Cloud,但組件庫有更新Sketch右上角會(huì)有提示,及時(shí)溝通更新即可。



藍(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)掃碼ben_lanlan,報(bào)下信會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

文章來源:站酷  作者:JI_Design
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


淺談公共藝術(shù)在地性觀念與UI設(shè)計(jì) ——以沖突關(guān)聯(lián)性為例

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

如果將【UI設(shè)計(jì)】比喻成一位新型時(shí)髦的青年,那么【公共藝術(shù)】則是一位已在歷史長(zhǎng)河中摸爬滾打數(shù)十載的老者,一位偉人曾說過:人類的發(fā)展從歷史中獲得啟迪,故筆者旨在從探討公共藝術(shù)在地性觀念的角度,來淺談如何在UI設(shè)計(jì)中凸顯情感關(guān)懷。


1 公共藝術(shù)在地性觀念


“藝術(shù)是什么”

undefined

當(dāng)代藝術(shù)作品(圖片來源:網(wǎng)絡(luò))


學(xué)者王瑞蕓認(rèn)為當(dāng)代藝術(shù)邊界模糊且藝術(shù)家創(chuàng)作手段任意, 不僅沒有一個(gè)能夠稱得上固定的風(fēng)格,也不存在相應(yīng)的美術(shù)主張,因此無法用語言對(duì)其進(jìn)行概述。 而二十世紀(jì)實(shí)驗(yàn)藝術(shù)的先鋒馬塞爾·杜尚 (Marcel Duchamp) 曾用種種藝術(shù)實(shí)踐行為向公眾宣告:經(jīng)由藝術(shù)家之手創(chuàng)造的就是藝術(shù)。



“什么是公共藝術(shù)”

undefined

公共藝術(shù)作品(圖片來源:網(wǎng)絡(luò))


學(xué)者金江波在其專著《地方重塑—公共藝術(shù)的挑戰(zhàn)與機(jī)遇》中指出:公共藝術(shù)體現(xiàn)的藝術(shù)主張依托于關(guān)注人文的公共理想。 復(fù)旦大學(xué)的湯筠冰教授曾在其公開課《城市公共藝術(shù)》中講述到,公共藝術(shù)與純藝術(shù)的不同之處體現(xiàn)在,公共藝術(shù)中包含了一種地域文化。


相較于說不清、道不明的“藝術(shù)”,公共藝術(shù)有別于純藝術(shù)“為我性”的情感抒發(fā),更加強(qiáng)調(diào)藝術(shù)作品與空間、人之間有意識(shí)產(chǎn)生的情感聯(lián)系,用語言來概況其特性可以總結(jié)為:公共性、藝術(shù)性、在地性。




“什么是公共藝術(shù)在地性”

undefined

公共藝術(shù)作品《爬墻的熊貓》(圖片來源:網(wǎng)絡(luò))


相較于“公共性”與“藝術(shù)性”的“基本性質(zhì)”,筆者認(rèn)為受“他人”影響而產(chǎn)生的“在地性”更能明顯地體現(xiàn)公共藝術(shù)中的文化關(guān)懷,什么是公共藝術(shù)在地性觀念,用一句話來概括:公共藝術(shù)與空間的關(guān)聯(lián)性。

縱觀藝術(shù)史,公共藝術(shù)的在地性范式可以總結(jié)為以下三類:



(一) 與空間的融合關(guān)聯(lián)性

undefined

古希臘帕特農(nóng)神廟(圖片來源:網(wǎng)絡(luò))


最常見的一種在地性范式,起源于人民的基本需求已得到滿足,開始追求更高層次的精神追求——對(duì)美的追求。例如古希臘帕特農(nóng)神廟的建造依托于古希臘人民對(duì)細(xì)節(jié)美與民主性的崇尚與追求,以及中世紀(jì)的“城市美化運(yùn)動(dòng)”,“依附于建筑的藝術(shù)”,均是以在依托于周圍環(huán)境、融入當(dāng)前環(huán)境的方式來體現(xiàn)公共藝術(shù)的藝術(shù)性價(jià)值。



(二) 與空間的沖突關(guān)聯(lián)性

undefined

藝術(shù)家佩爾施克策劃的公共藝術(shù)活動(dòng)《紅球計(jì)劃》 (圖片來源:網(wǎng)絡(luò))


主要集中在后現(xiàn)代主義時(shí)期,后現(xiàn)代主義藝術(shù)批判以往藝術(shù)的精英化,追求藝術(shù)“生活化”。這一時(shí)期許多藝術(shù)家將與需求空間格格不入的通俗化形象放大植入公共空間中,產(chǎn)生與當(dāng)下空間沖突的視覺感官體驗(yàn),以“介入”空間的“逆向之美”的方式來體現(xiàn)出了公共藝術(shù)的藝術(shù)評(píng)判性價(jià)值。


undefined

藝術(shù)家奧登伯格創(chuàng)作的《世俗豐碑系列》(圖片來源:網(wǎng)絡(luò))



(三) 與空間的無關(guān)聯(lián)性

undefined

《瑞秋豬》與《乳牛大游行》(圖片來源:網(wǎng)絡(luò))


出現(xiàn)在后現(xiàn)代主義時(shí)期,此時(shí)藝術(shù)家致力于使藝術(shù)擺脫架上束縛,追求藝術(shù)的開放性,諸如《柏林熊》、《乳牛大游行》以及《瑞秋豬》等社區(qū)參與類公共藝術(shù)作品,以藝術(shù)家主導(dǎo)的活動(dòng)形式讓大眾參與到藝術(shù)創(chuàng)作過程中,打破以往以藝術(shù)家為中心開展的藝術(shù)創(chuàng)作行為,去中心化,此類公共藝術(shù)擺脫空間的束縛,其在地性含義由參與者構(gòu)成,其開放性藝術(shù)價(jià)值仿佛實(shí)現(xiàn)了大同之美。

     

2 在地性藝術(shù)語言與UI設(shè)計(jì)-以沖突關(guān)聯(lián)性為例

(一)關(guān)聯(lián)性的意義

undefined

例子1


上圖中左邊是由英國(guó)藝術(shù)家安尼什.卡普爾(Anish Kapoor)創(chuàng)作的公共藝術(shù)作品《云門》,將芝加哥市民引以為傲的摩天大樓與天際線的形象利用鏡像反射的原理映射在光滑的雕塑表面,凸顯城市文化與自信。右邊為新疆克拉瑪依油田新地標(biāo),似乎與芝加哥的《云門》沒有太大的區(qū)別,拋開是否購買版權(quán)這一點(diǎn)涉及到法律層面的考量,從藝術(shù)價(jià)值層面來考量這件“作品”,周遭土黃色的大樓并非是需要凸顯的城市文化與特質(zhì),強(qiáng)硬的植入只會(huì)削弱了作品的藝術(shù)價(jià)值。

undefined例子2


再舉一個(gè)例子,以美的美居APP的缺省頁為例,在最新的版本中,美的美居設(shè)計(jì)團(tuán)隊(duì)將缺省頁的視覺元素替換成了自身IP形象“小藍(lán)”,運(yùn)用與產(chǎn)品相關(guān)聯(lián)的視覺元素,不僅在美化的基礎(chǔ)上增強(qiáng)了頁面與產(chǎn)品的關(guān)聯(lián)性,更是彰顯了品牌自信。


以上兩個(gè)例子也是為了說明,在UI設(shè)計(jì)中視覺元素的運(yùn)用需站在“有理有據(jù)”的立場(chǎng)上,貫徹“取之有道 用之有理”的思想。以公共藝術(shù)中“與空間的沖突關(guān)聯(lián)性”藝術(shù)語言為例,來探討下此藝術(shù)語言在UI設(shè)計(jì)中的運(yùn)用。而選擇沖突性藝術(shù)語言來探討的原因,主要在于該藝術(shù)語言包含的批判性、先鋒性與幽默性特質(zhì),能夠滿足當(dāng)今人們對(duì)情感化產(chǎn)品的需求。


(二)公共藝術(shù)中的沖突性

undefined


聊到公共藝術(shù),不得不提到的一位藝術(shù)家:致力于把生活用品變成藝術(shù)品——克萊斯.奧登伯格(Claes Oldenburg),其世俗豐碑系列作品運(yùn)用幽默風(fēng)趣的藝術(shù)手法,提取與日常生活中通俗的現(xiàn)成物的形象介入公共空間,是對(duì)藝術(shù)精英化以及國(guó)際主義千篇一律設(shè)計(jì)風(fēng)格的不滿與批判,以及藝術(shù)生活化精神的體現(xiàn)。該藝術(shù)形式可以引起大眾對(duì)其的新鮮感以及體現(xiàn)出一種趣味性,但當(dāng)好奇與新鮮感退卻之后,對(duì)其剩余價(jià)值的質(zhì)疑也是各學(xué)者對(duì)這種藝術(shù)形式爭(zhēng)議不斷的原因,持有質(zhì)疑態(tài)度的學(xué)者認(rèn)為“沖突式”公共藝術(shù)具有時(shí)效限制性,只能在時(shí)代特定階段發(fā)揮其藝術(shù)作用。


筆者認(rèn)為站在城市形象塑造的角度來看:

a、"沖突式”公共藝術(shù)能夠體現(xiàn)一個(gè)城市的包容性與開放性,萬千藝術(shù)姿態(tài)都能被接受與容納。

b、藝術(shù)家選取的藝術(shù)形象均來源于人們的日常生活形態(tài),其藝術(shù)元素并不因地域等物質(zhì)外在條件的不同,而對(duì)不同城市地區(qū)的人們產(chǎn)生不同意義,其體現(xiàn)的是一種全球共通性文化,其藝術(shù)性是針對(duì)城市公共空間而言。 


undefined

undefined


綜上所述,筆者認(rèn)為在沖突式在地性語言中,運(yùn)用的藝術(shù)元素具有以下幾點(diǎn)特征:


通俗性:大眾對(duì)其有相似的認(rèn)知與理解

原生性:夸張、未修飾的規(guī)模與形態(tài)來展示

戲謔性:不按常理出牌,以“格格不入”的形式存在


(三)沖突關(guān)聯(lián)性語言在UI設(shè)計(jì)中的運(yùn)用

undefined

例子1


針對(duì)上述三種特征,在一些APP的UI設(shè)計(jì)中,也可以找到相應(yīng)的案例。例如B站番劇《總之就是非??蓯邸返倪M(jìn)度條的圖標(biāo)設(shè)計(jì)案例之一,該案例的運(yùn)用起因在于該番劇的劇情甜份過高,網(wǎng)友們紛紛用彈幕類似于表達(dá)“我酸了”的通俗網(wǎng)絡(luò)語言來刷屏,引起了B站的關(guān)注,于是就有了檸檬代替進(jìn)度條的操作。



undefined

例子2


而Instagram推出的視頻產(chǎn)品「IGTV」,其加載頁借用了8090年代人們對(duì)老式電視信息收視不良的記憶——雪花屏元素,該元素與當(dāng)前高科技信息技術(shù)時(shí)代的沖突性不僅營(yíng)造出了炫酷的視覺效果,同時(shí)也使得產(chǎn)品飽含了懷舊的情感關(guān)懷,代表了一個(gè)時(shí)代的通俗回憶,得以與用戶產(chǎn)生共情。



undefined

例子3


嗶哩嗶哩閱讀的停更通知用更加通俗易懂的【請(qǐng)假】來代替,以及克拉克拉APP用【拔掉電線】的口語化用語來描述退出直播間的行為,不僅拉近了產(chǎn)品與生活的距離,也凸顯了幽默的情感化設(shè)計(jì)。


雖然藝術(shù)與設(shè)計(jì)的邊界日益模糊,但是二者之間仍然具有本質(zhì)上的區(qū)別,那么我們?cè)谔接懰囆g(shù)語言在設(shè)計(jì)中的運(yùn)用時(shí),應(yīng)把用戶體驗(yàn)的良好與普適性也考慮其中,將藝術(shù)語言進(jìn)行設(shè)計(jì)化的處理,結(jié)合上述藝術(shù)案例與設(shè)計(jì)案例來看,沖突式在地性藝術(shù)語言在UI設(shè)計(jì)中的運(yùn)用時(shí),其運(yùn)用元素的特性可以歸納為:


  • 基礎(chǔ)條件-通俗性:能夠引起大眾的共識(shí)與話題,大多數(shù)的靈感來源于生活;

  • 必要條件-適應(yīng)性:將原元素的特性進(jìn)行特質(zhì)提煉與設(shè)計(jì)化,與公共藝術(shù)不同,在UI設(shè)計(jì)中是將原元素的特征運(yùn)用在設(shè)計(jì)中,同時(shí)注重例如提煉的雪花屏幕的閃爍特質(zhì),而不是直接將整個(gè)雪花屏幕運(yùn)用在界面上;

  • 增味條件-創(chuàng)新性:跨領(lǐng)域找參考元素。(舉個(gè)例子,從B領(lǐng)域提取一個(gè)元素運(yùn)用在A領(lǐng)域上,但B領(lǐng)域和A領(lǐng)域的在大家通俗認(rèn)知中的兼容性并不強(qiáng),其創(chuàng)新性是由疏離性凸顯)


簡(jiǎn)而言之:

1、保證元素的通俗性,結(jié)合當(dāng)代語境,亦可以理解為#話題性#;

2、可跨領(lǐng)域找參考元素;

3、需要對(duì)元素的特質(zhì)進(jìn)行加工提?。?/strong>


藍(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)掃碼ben_lanlan,報(bào)下信會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

文章來源:站酷  作者:M idea_loT_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ì)m.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ù)



關(guān)于無障礙設(shè)計(jì)的研究分享

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

大綱

1、研究背景

2、案例分析

3、無障礙設(shè)計(jì)工具推薦



在特殊的場(chǎng)景下所有人都存在殘疾

一聽無障礙設(shè)計(jì)就覺得可能和殘障人士有關(guān),其實(shí)不然;除了先天或后天出現(xiàn)的眼盲;耳聾的這種:永久性的障礙。在正常人身上也存在著情境式障礙;暫時(shí)性障礙;例如:


提著大包小包的你,想使用手機(jī)—情境式的肢體障礙

在喝熱粥時(shí),霧氣遮擋住的眼鏡—情境式的視覺障礙

骨折的腿無法正常行走—暫時(shí)性的肢體障礙

剛睡醒迷糊的你—暫時(shí)性的認(rèn)知障礙

 ……


所以即使你是正常人,在日常使用產(chǎn)品時(shí)也會(huì)受到和殘障人士一樣的局限性。而大家說的用戶體驗(yàn)設(shè)計(jì)其實(shí)就在特定場(chǎng)景下解決給特定的人群產(chǎn)生的局限性。



城市無障礙坡道


先普及一個(gè)概念(curb cut effect)直譯過來就是“遏制分割效應(yīng)”,其實(shí)意思就是機(jī)會(huì)共同體的概念、弱勢(shì)群體受益的法律和計(jì)劃往往最終使整個(gè)社會(huì)受益;最普適的就像是路緣處會(huì)做臨時(shí)的斜坡處理,目的是為了幫助坐輪椅和推薦不便的人出行順利通過,但是實(shí)際上,對(duì)于推著嬰兒車,和行李箱的人同樣受益。


傻傻分不清楚的洗發(fā)水和沐浴液

為了統(tǒng)一品牌設(shè)計(jì)語言,往往會(huì)將洗發(fā)水和沐浴液的瓶體設(shè)計(jì)成一樣,不僅是視障人士,任何人在閉上眼睛洗頭時(shí)都分辨不出來?;ㄍ踉?991年在瓶身做鋸齒狀處理用來區(qū)分兩個(gè)產(chǎn)品,通過觸感也可以輕松辨認(rèn)。

原文傳送門:シャンプーのきざみに込められた思い


接下來就是軟件端的案例,軟件產(chǎn)品在無障礙設(shè)計(jì)的例子上也很多。


哈啰出行-司機(jī)端

哈啰出行的司機(jī)端,在司機(jī)開始行程后,在司機(jī)端進(jìn)行操作,APP會(huì)進(jìn)行類似于IOS VoiceOver的語音播報(bào),就是對(duì)你點(diǎn)擊的位置做中文的播報(bào),規(guī)避對(duì)情景式障礙的分神的危險(xiǎn)。


滴滴-老年版

滴滴打車首頁的“老人打車”,除了對(duì)布局的簡(jiǎn)介化,對(duì)字體的放大化,還可以設(shè)置常用地址然后一鍵打車,或者通過電話聯(lián)系客服叫車,還是比較方便的。、對(duì)于60歲以上并通過實(shí)名認(rèn)證的用戶,如果終點(diǎn)是醫(yī)院等特定目的地的話,后臺(tái)還會(huì)優(yōu)先派單,為老年人提供救急服務(wù)。


無障礙設(shè)計(jì)工具推薦


檢查色彩對(duì)比度

色彩對(duì)比度意為:【識(shí)別對(duì)象】和【其背景顏色】之間的對(duì)比度,對(duì)比度越高,越清晰,對(duì)比度越低。越模糊。如把重要的文字信息的對(duì)比度設(shè)計(jì)到AAA.次級(jí)的文字信息的對(duì)比度設(shè)計(jì)到AA。 把色彩對(duì)比度量化的話,可以計(jì)算出比例值,最低1:1(黑底黑字)、最高21:1(白底黑字)。

最權(quán)威的互聯(lián)網(wǎng)無障礙規(guī)范 —— WCAG2.1(Web Content Accessibility Guideline,Web內(nèi)容無障礙指南

對(duì)比度量化工具:點(diǎn)擊這里

對(duì)比度cheome插件:點(diǎn)擊這里


Funkify - 殘疾模擬器


通過極端用戶的視角來體驗(yàn)網(wǎng)絡(luò)和界面,包括視線模糊、對(duì)比度下降(所有人的視覺對(duì)比度都會(huì)隨著年齡而下降)、雜色、白內(nèi)障、糖尿病視網(wǎng)膜病變等。

殘疾模擬器cheome插件:點(diǎn)擊這里


屏幕閱讀器

用于在 Chrome 瀏覽器中朗讀內(nèi)容

屏幕閱讀器cheome插件:點(diǎn)擊這里


Color Oracle-色弱;色盲模擬器

支持Mac / Win / Linux。大約8%的男人和0.5%的女人有色盲或色弱、是相當(dāng)大的族群。當(dāng)然,UI中不應(yīng)該只通過顏色來區(qū)分信息,但有時(shí)無論如何會(huì)用到色彩區(qū)分(比如數(shù)據(jù)可視化),那么就一定要使用色盲友善的配色方案。一般來講,藍(lán)/黃、藍(lán)/橙是比較萬用的搭配。

色盲模擬器工具:點(diǎn)擊這里


總結(jié):


雖然在現(xiàn)實(shí)的資本市場(chǎng)不太會(huì)在邊緣人群身上花那么大的資源,但是體驗(yàn)設(shè)計(jì)存在的意義不就是為了解決各種因素給人產(chǎ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)掃碼ben_lanlan,報(bào)下信息,會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

文章來源:站酷  作者:你聽得到____

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

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

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


走進(jìn)用戶,開啟家政服務(wù)新模式

lanlanwork


01.背景

目前,眾多的平臺(tái)商家都是以微信群的方式維護(hù)家政從業(yè)人員信息,通過微信甩單,讓家政從業(yè)人員自薦或其與他商家合單的方式,完成訂單對(duì)接。
 

不過,此類供給方式也存在一些不可避免的問題:

· 家政從業(yè)人員信息變更很迅速,匹配雇主的時(shí)間窗口較短;

· 商家訂單在匹配家政從業(yè)人員時(shí),匹配成本很高;

· 商家必須手動(dòng)實(shí)時(shí)維護(hù)大量微信群,以保證獲取新鮮資源對(duì)接;

· 被動(dòng)且不受控制,好單有可能被爆單,且無法控制傳播路徑和時(shí)間;

圖片

基于這些問題,58家庭服務(wù)通過平臺(tái)策略,力求將線下甩單、合單的合作模式移植線上,以初期實(shí)現(xiàn)”家政從業(yè)人員 – 商家訂單需求”雙方供需智能匹配的形式,為以后在線上高效率完成“銷售線索-家政員匹配-服務(wù)簽單-營(yíng)收分配”的流程打下基礎(chǔ)。

借此契機(jī),我們?cè)趯?duì)齊業(yè)務(wù)訴求的同時(shí),更加深入的走進(jìn)用戶,從不同的角度出發(fā),為家政從業(yè)人員提供優(yōu)質(zhì)的接單環(huán)境,為商家(經(jīng)紀(jì)人)搭建靈活的建單形式。讓設(shè)計(jì)策略與業(yè)務(wù)策略深度融合,實(shí)現(xiàn)“人-單”的精準(zhǔn)匹配。

 

02.用戶研究與設(shè)計(jì)策略設(shè)定

通常,我們稱呼家政從業(yè)人員為阿姨,阿姨是58家庭服務(wù)平臺(tái)十分重要的勞動(dòng)者資源。所以我們也十分看重阿姨們?cè)谑褂卯a(chǎn)品時(shí)的體驗(yàn),致力于提高產(chǎn)品的易用性與實(shí)用性。

對(duì)此我們通過多種途徑相結(jié)合方式,對(duì)58阿姨使用產(chǎn)品的狀態(tài)進(jìn)行調(diào)研,并得出了一份適用于58阿姨的無障礙設(shè)計(jì)方案,輔助我們跟緊用戶訴求,讓設(shè)計(jì)策略為用戶服務(wù)。

圖片

 

03.阿姨端,圍繞無障礙原則展開的設(shè)計(jì)

為58阿姨提供優(yōu)質(zhì)的接單環(huán)境

主要秉承三個(gè)原則:清晰準(zhǔn)確、感知清晰、操作簡(jiǎn)單

圖片

阿姨通過界面中的文字快速獲取訂單信息,那么對(duì)文字字號(hào)和間距的合理設(shè)定,可以保障阿姨的基礎(chǔ)瀏覽與操作性能。從調(diào)研結(jié)果中我們了解到,以16px為設(shè)計(jì)因子的設(shè)計(jì)方案最為阿姨認(rèn)可。所以我們以此為基數(shù)設(shè)定了界面字號(hào)和間距的使用規(guī)范。
不過規(guī)范的使用也要具有靈活性,我們既要滿足阿姨的視覺需要,又要保證頁面信息的承載率。例如:
 

· 瀏覽型頁面

與簡(jiǎn)歷創(chuàng)建流程不同,阿姨在接單大廳尋求工作機(jī)會(huì)時(shí),其接單的目的屬性更強(qiáng),信息讀取的需求更甚于操作,通用規(guī)范會(huì)讓頁面拉的很長(zhǎng),所以設(shè)計(jì)上,在保持同等字號(hào)的同時(shí),可以將需求單內(nèi)各項(xiàng)信息之間的間距按基數(shù)縮減,保證頁面信息的承載率。

圖片

然后針對(duì)重點(diǎn)信息增加放大功能,同時(shí)強(qiáng)調(diào)字重和色彩的對(duì)比,讓讀取更加人性化。

圖片

 

· 操作型頁面

操作型頁面,信息的讀取并重于功能的操作,就不僅是字號(hào)和間距問題,設(shè)計(jì)同時(shí)要考慮減少輸入性的交互,盡量去采用選擇類型交互。

并在此基礎(chǔ)上放大點(diǎn)觸目標(biāo),以提升阿姨的點(diǎn)擊準(zhǔn)確率,避免誤觸。

圖片

同時(shí),在調(diào)研的時(shí)候我們發(fā)現(xiàn),我們平臺(tái)的阿姨其實(shí)在視覺障礙方面的影響并沒有我們想象的那么強(qiáng)烈,只是對(duì)信息獲取的反饋要求更高。所以在設(shè)計(jì)時(shí),要降低阿姨對(duì)信息理解的障礙,及時(shí)就近給出阿姨對(duì)操作的明確反饋和提醒

圖片

這個(gè)功能點(diǎn)其實(shí)很小,談不上是核心的使用場(chǎng)景,但是這個(gè)對(duì)勾的反饋就很關(guān)鍵,讓阿姨能夠清楚的明白選擇的結(jié)果。

當(dāng)然反饋也可以結(jié)合場(chǎng)景,將功能引導(dǎo)或者信息提示與相關(guān)場(chǎng)景相融合,阿姨的感知也更直觀,更強(qiáng)烈。

圖片

還有在話術(shù)語義等方面的一些細(xì)節(jié),依舊秉持同樣的原則,就不一一展示了。

 

04.商家端,開啟人-單智能匹配

基于用戶使用場(chǎng)景,將C端需求進(jìn)行精準(zhǔn)細(xì)分

將需求單中,C端客戶的每一個(gè)要求,都定義成一個(gè)模塊,從視覺表現(xiàn)和層級(jí)關(guān)系上進(jìn)行信息的細(xì)分分類,豐富每一個(gè)內(nèi)容點(diǎn)。

圖片

例如創(chuàng)建需求單時(shí),單純的單選或者多選的形式,已經(jīng)不能完全涵蓋所以客戶的需求。

滾動(dòng)形式的單選,范圍太過籠統(tǒng)且不能跨域,多選雖然能滿足大多數(shù)情況,但客戶的要求千人千面,這種形式依舊不夠靈活。

所以設(shè)計(jì)上增加了附有兩個(gè)連續(xù)滑塊的選擇器,允許商家根據(jù)客戶需求設(shè)定某個(gè)特定的值或者一個(gè)范圍值。例如身高、體重、年齡、薪資范圍等,實(shí)現(xiàn)對(duì)需求的定義更加自由精準(zhǔn)。

圖片

從而更精準(zhǔn)地匹配我們的家政從業(yè)人員,解決交易雙方信息不對(duì)等的問題,讓供需關(guān)系更加智能。

 

05.結(jié)語

換一個(gè)角度看“商家訂單需求-家政從業(yè)人員”雙方供需智能匹配的形式,其實(shí)都是對(duì)用戶真實(shí)需求的挖掘?;诩榷ǖ脑O(shè)計(jì)策略,不斷完善在線服務(wù)體系,同時(shí)將信息的傳與達(dá)進(jìn)行提煉與外顯,以體驗(yàn)助力產(chǎn)品,實(shí)現(xiàn)B端阿姨和商家的體驗(yàn)協(xié)同優(yōu)化和C端客戶的需求滿足。


 

原文地址:58UXD(公眾號(hào))

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

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》走進(jìn)用戶,開啟家政服務(wù)新模式

藍(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)小助,報(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ì)m.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ù)





作品集這樣排版,不進(jìn)大廠都難!

lanlanwork


 

01.關(guān)鍵詞排版

關(guān)鍵詞排版是很常用的一種排版方式,可以讓面試官一下就抓到重點(diǎn)。但是大部分人都是圓圈加文字的表達(dá)方式,會(huì)顯得有些簡(jiǎn)單、乏味。如果能配上圖形或者圖標(biāo)搭配就會(huì)豐富、精致很多。

圖片

圖片

圖片

圖片

圖片

圖片

圖片

 

02.模塊分離

將頁面中部分的內(nèi)容模塊分離出來展示,可以是圖形或是卡片等等。不僅可以強(qiáng)調(diào)頁面的層級(jí)展示,還可以讓作品集排版更加出彩。

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

a

03.細(xì)節(jié)特寫

作品集排版頁面中可以穿插一些放大的特寫,可以展現(xiàn)一些精心制作的小細(xì)節(jié),或者項(xiàng)目當(dāng)中需要強(qiáng)調(diào)的內(nèi)容。不僅可以豐富頁面的排版形式,還能一目了然地展示出項(xiàng)目的側(cè)重點(diǎn)。

圖片

圖片

圖片

圖片

圖片

a

04.圖文搭配

這個(gè)看起來好像是“廢話方法”,一個(gè)主體圖形和文字進(jìn)行搭配,但是精髓在于文字部分最好是兩種粗細(xì)或者字體或者大小寫的不同對(duì)比,讓文字內(nèi)容更有層次。

圖片

圖片

圖片

圖片

圖片

圖片

圖片

 

05.平分畫面

將畫面一分為二,填充不同的顏色背景。有鮮明的層次感和形式感,可以很好地表達(dá)一些需要對(duì)比的內(nèi)容,或者需要進(jìn)行多維度展示的內(nèi)容。

圖片

圖片

圖片

圖片

 

原文地址:設(shè)計(jì)師深海(公眾號(hào))

作者:設(shè)計(jì)師深海


轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》作品集這樣排版,不進(jì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)小助,報(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ì)m.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ù)



好的單選框設(shè)計(jì)具備哪些特質(zhì)?把握住這些知識(shí)點(diǎn)!

lanlanwork


一、什么是單選框?

顧名思義,單選框表示只能選擇一個(gè)選項(xiàng),再具體一點(diǎn),可以理解為只能從一組相互排斥的選項(xiàng)中選擇其中一個(gè)選項(xiàng)。

單選框有選中和未選中兩種狀態(tài),樣式上用填充的圓表示選中,描邊的圓表示未選中,通過改變狀態(tài)來給用戶反饋。

圖片

▲ 常見的樣式是按鈕在左標(biāo)簽在右,在結(jié)合特定的場(chǎng)景使用時(shí),兩者的位置可以視情況靈活調(diào)換。

 

二、何時(shí)使用單選框?

除了單選框,選擇類組件還有很多其他形式,比如下拉列表、復(fù)選框等,我們首先來對(duì)比區(qū)分一下這幾個(gè)易混淆的組件。

 

單選框VS下拉列表

當(dāng)用戶需要從大量選項(xiàng)中進(jìn)行選擇時(shí),為了節(jié)省空間,可以使用下拉列表代替單選按鈕。但是下拉列表將內(nèi)容都隱藏在下一層級(jí)中,需要用戶多做一次選擇,操作成本和認(rèn)知成本都會(huì)變高。

圖片

▲ 當(dāng)選擇不多于3項(xiàng),建議使用單選框,這樣選項(xiàng)可以直接展示出來,用戶只需要點(diǎn)擊選擇即可;當(dāng)選擇超過5項(xiàng)時(shí),可以考慮使用下拉列表,確保選項(xiàng)不會(huì)占用大量空間。

 

單選框VS復(fù)選框

復(fù)選框允許用戶一次選擇多個(gè)選項(xiàng),選中其中一個(gè)選項(xiàng),不會(huì)對(duì)其他選項(xiàng)產(chǎn)生影響。對(duì)于何時(shí)使用單選框還是復(fù)選框沒有明確的界定,需要具體問題具體分析。

圖片

▲ 這里提一個(gè)使用復(fù)選框時(shí)需要注意的小問題,比如在只有兩個(gè)選項(xiàng)時(shí)使用復(fù)選框,用戶可能會(huì)以為只需要從這兩個(gè)選項(xiàng)里面選擇一個(gè),反而造成誤導(dǎo)。

 

三、單選框設(shè)計(jì)指南

始終確保良好的可用性

對(duì)于這樣一個(gè)簡(jiǎn)單的組件,想要做好用好,在設(shè)計(jì)上有一些不可忽視的細(xì)節(jié)。

首先要避免在單選框列表中嵌套下一層級(jí)的選項(xiàng),因?yàn)槭褂脝芜x框的目的之一就是為了讓所有選項(xiàng)清晰呈現(xiàn)給用戶,嵌套過多層級(jí)會(huì)導(dǎo)致整個(gè)結(jié)構(gòu)的混亂。

圖片

▲ 另外要明確的是,單選按鈕不應(yīng)該是唯一可點(diǎn)擊的熱區(qū),而是要將按鈕和標(biāo)簽一起作為熱區(qū),便于用戶準(zhǔn)確點(diǎn)擊操作。

圖片

▲ 這個(gè)選擇模塊由單選按鈕、文字標(biāo)簽和圖標(biāo)共同組成,可操作的范圍很大,視覺層次也很清晰,設(shè)計(jì)得既整潔又實(shí)用。

 

保證可讀性

單選框列表的布局要有邏輯性,盡量減輕用戶的認(rèn)知負(fù)荷。

圖片

▲ 用戶習(xí)慣于上下瀏覽選項(xiàng)和列表,如果將這些選項(xiàng)水平排布,可能會(huì)造成兩點(diǎn)問題:一個(gè)是瀏覽時(shí)視線移動(dòng)的不習(xí)慣,另一個(gè)就是如果選項(xiàng)位置過于緊湊,用戶可能不知道每個(gè)標(biāo)簽到底對(duì)應(yīng)哪個(gè)按鈕。

除了列表要垂直布局,標(biāo)簽也需要很簡(jiǎn)潔。標(biāo)簽越長(zhǎng),用戶需要花費(fèi)更多的時(shí)間和精力才能了解整個(gè)列表。

 

提供認(rèn)選擇

想象這樣一個(gè)使用場(chǎng)景,我們下載了一個(gè)新的設(shè)計(jì)軟件,第一次打開時(shí)跳出一個(gè)彈窗,提示我們是選擇經(jīng)典布局,還是個(gè)性化布局,但是我們對(duì)這個(gè)軟件不是很了解,可能并不清楚這兩個(gè)布局到底是什么樣子。

圖片

▲ 在這種情況下,最好默認(rèn)選中其中一個(gè)選項(xiàng),這樣做一方面可以減輕用戶對(duì)于選項(xiàng)的糾結(jié),另一方面還能有目的地引導(dǎo)用戶使用。

 

最后

最后為大家精選了單選框設(shè)計(jì)樣式資源,學(xué)習(xí)好的單選框設(shè)計(jì)風(fēng)格和樣式,獲取最新的設(shè)計(jì)靈感!

圖片

關(guān)注公眾號(hào)后臺(tái)回復(fù)【單選框】獲取設(shè)計(jì)文件。

 

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

作者:Clippp

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》好的單選框設(shè)計(jì)具備哪些特質(zhì)?把握住這些知識(shí)點(diǎ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)小助,報(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ì)m.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ù)



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

lanlanwork


1、中性色色值為什么要使用透明度? 

有細(xì)心的用戶發(fā)現(xiàn),在 Ant Design 的設(shè)計(jì)規(guī)范里,中性色色值可以按照透明度來設(shè)置,見下圖中性色色值表(百分?jǐn)?shù)代表不透明度):

圖片

平時(shí)大家似乎更喜歡使用 #333333、#666666 這種色值,那使用透明色有什么優(yōu)勢(shì)呢?

我們知道,中性色主要被大量的應(yīng)用在界面的文字部分,此外背景、邊框、分割線等場(chǎng)景中也非常常見。產(chǎn)品中性色的定義需要考慮背景以及有色背景的差異,同時(shí)結(jié)合 WCAG 2.0 標(biāo)準(zhǔn)

現(xiàn)在  Ant Design 的色板中,透明色模式和實(shí)色模式都是有的。透明度模式可以做到背景色兼容。

如下圖示例,我們以顏色 gray-6 為例,這個(gè)顏色在實(shí)色模式的色值是 #BFBFBF,透明色模式的色值是 000000-25%。兩者在白色背景上的顏色完全相同,但是在灰色或其他顏色的背景上,卻有明顯差別:

圖片

因此在透明色模式下,以中性色為主的前景色,會(huì)與背景色有一個(gè)更明顯的色彩對(duì)比,對(duì)背景的兼容性也會(huì)更好,保證內(nèi)容的可讀性。

Ant Design 提供了透明色和實(shí)色兩種顏色模式供用戶選擇,也會(huì)使組件更具通用性。

 

2、組件和設(shè)計(jì)師之間的關(guān)系是? 

當(dāng)下很多常見的、優(yōu)秀的組件庫,都為設(shè)計(jì)和開發(fā)的工作提供了便利。

圖片

那么使用組件庫可以替代設(shè)計(jì)師么?組件和設(shè)計(jì)師之間的關(guān)系又是什么呢?我個(gè)人觀點(diǎn)如下:

 

1 . 組件是「效率」工具

組件是工具,用來為設(shè)計(jì)師和開發(fā)提升工作效率。所有組件庫的初衷都不是要替代設(shè)計(jì)師,而是要提高整個(gè)團(tuán)隊(duì)的工作效率。使用組件可以從兩個(gè)方面提效:

(1)工作內(nèi)容上:可以將不必要的、重復(fù)性勞動(dòng)的時(shí)間節(jié)省出來

(2)工作流程上:便于設(shè)計(jì)師與前端開發(fā)做交接和協(xié)作,節(jié)省溝通成本

 

2 . 組件是「質(zhì)量」保障

使用組件做設(shè)計(jì)稿,可以在一定程度上保證工作質(zhì)量。組件規(guī)范了前端和設(shè)計(jì)師的工作方法,建立相對(duì)底層的系統(tǒng),設(shè)定了設(shè)計(jì)和開發(fā)的質(zhì)量底線。

圖片

基于組件規(guī)范設(shè)計(jì)和開發(fā)的產(chǎn)品更容易具備:

(1)一致性:具備相對(duì)一致的表現(xiàn)樣式,設(shè)計(jì)風(fēng)格和交互體驗(yàn)上均可保持統(tǒng)一

(2)可用性:對(duì)于用戶操作,可以保證最基本的可理解性和可操作性

(3)審美性:符合基本審美標(biāo)準(zhǔn),雖不會(huì)很亮眼,但也不會(huì)很難看

 

3 . 設(shè)計(jì)師要「沉淀」業(yè)務(wù)組件

設(shè)計(jì)師可以嘗試沉淀有針對(duì)性的業(yè)務(wù)組件。很多業(yè)務(wù)領(lǐng)域有其獨(dú)特性,比如金融類組件和政務(wù)類的產(chǎn)品頁面列表內(nèi)容就有很大區(qū)別。單一的元素組件在應(yīng)用的過程中可以被再次組合和沉淀

舉個(gè)例子,我之前在做業(yè)務(wù)需求設(shè)計(jì)時(shí),相比于 AntD,其實(shí)更常用的是 TechUI —— 它是建立在 AntD 基礎(chǔ)上的、由我們螞蟻的設(shè)計(jì)師通過對(duì)業(yè)務(wù)需求的提煉、組合和封裝,做成的一套于螞蟻?zhàn)约旱摹緲I(yè)務(wù)組件】。

圖片

再總結(jié)下二者的區(qū)別:

– Ant Design:是所有人的,是通用的,是單一的原子級(jí)別的(比如一個(gè)輸入框)組件。

– TechUI:是螞蟻?zhàn)约旱模撬接械?,是組合的區(qū)塊級(jí)別的(比如一整個(gè)表單)組件,更具備螞蟻集團(tuán)自己的業(yè)務(wù)屬性。

圖片

針對(duì)你公司不同業(yè)務(wù)類型,沉淀出不同種類的區(qū)塊級(jí)別的組件,這類組件使用起來也會(huì)更加得心應(yīng)手、加倍提效。這也是 B 端設(shè)計(jì)師可以去學(xué)習(xí)和精進(jìn)的一點(diǎn)。

 

4 . 設(shè)計(jì)師要「洞察」業(yè)務(wù)訴求

使用組件可以讓設(shè)計(jì)師把節(jié)約出來的時(shí)間和精力放到更多有價(jià)值的工作上去。作為 Ant Design 的設(shè)計(jì)師之一,坦白的說,即使你的設(shè)計(jì)稿全部使用了 Ant Design 的組件搭建,最終的頁面效果也仍不完善,在用戶體驗(yàn)上始終可以更進(jìn)一步。

設(shè)計(jì)師應(yīng)該更多去關(guān)注對(duì)用戶需求和業(yè)務(wù)邏輯的深入挖掘,不僅僅是在界面細(xì)節(jié)的表現(xiàn)手法上下功夫,還要學(xué)會(huì)站在全局,用系統(tǒng)性思維看待每一個(gè)項(xiàng)目,為整個(gè)產(chǎn)品的系統(tǒng)流程做優(yōu)化,做更全面的產(chǎn)品體驗(yàn)升級(jí)。

 

原文鏈接:長(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ì)分享國(guó)內(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ì)m.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ù)


日歷

鏈接

個(gè)人資料

存檔