首頁(yè)

動(dòng)效讓這些設(shè)計(jì)更驚艷

天宇

微動(dòng)效在產(chǎn)品設(shè)計(jì)中的運(yùn)用已經(jīng)非常普及了,無(wú)論是在圖標(biāo)還是界面場(chǎng)景中,都運(yùn)用得很普遍。通過(guò)動(dòng)效的輔助不僅可以提升設(shè)計(jì)情感化,也能解決更為復(fù)雜的交互場(chǎng)景,讓設(shè)計(jì)更驚艷。
 
最近在體驗(yàn)一些產(chǎn)品的過(guò)程中,黑馬哥也發(fā)現(xiàn)了幾個(gè)借助動(dòng)效表達(dá)的設(shè)計(jì)方案,效果十分的驚艷,分享出來(lái)和大家一起學(xué)習(xí)一下。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
目錄
一、3D 動(dòng)效呈現(xiàn)會(huì)員等級(jí)
二、情感化 IP 提升搜索關(guān)注度
三、結(jié)合場(chǎng)景的情感化動(dòng)效
四、3D 空間感的 Banner 設(shè)計(jì)
五、通過(guò)動(dòng)效引導(dǎo)用戶操作
六、微動(dòng)效引導(dǎo) VIP 續(xù)費(fèi)
七、動(dòng)態(tài)還原實(shí)時(shí)天氣
八、動(dòng)態(tài) IP 引導(dǎo)按鈕設(shè)計(jì)
九、微動(dòng)效賦予品牌活力
 
 
 
一、3D 動(dòng)效呈現(xiàn)會(huì)員等級(jí)
會(huì)員中心通常會(huì)通過(guò) 3D 圖標(biāo)來(lái)助力會(huì)員等級(jí)設(shè)計(jì),除了靜態(tài)的表達(dá)也會(huì)通過(guò)動(dòng)效和新穎的交互形式呈現(xiàn),以此提高會(huì)員中心的視覺(jué)表現(xiàn)力。
 
最近在體驗(yàn)騰訊視頻 APP 時(shí),會(huì)員專(zhuān)區(qū)在表現(xiàn)用戶會(huì)員等級(jí)的設(shè)計(jì)中,沒(méi)有使用傳統(tǒng)的徽章形式,而是以 3D 數(shù)字結(jié)合動(dòng)效的形式表達(dá)。3D 動(dòng)效的設(shè)計(jì)使得會(huì)員等級(jí)區(qū)別于常規(guī)形式,更有吸引力。 
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
二、情感化 IP 提升搜索關(guān)注度
IP 形象是成就品牌的關(guān)鍵因素之一,被廣泛運(yùn)用到產(chǎn)品感官體驗(yàn)的設(shè)計(jì)中,帶來(lái)的情感化共勉也是顯而易見(jiàn)的。
 
在使用悟空瀏覽器 APP 時(shí),啟動(dòng)產(chǎn)品進(jìn)入首頁(yè)后搜索框上方出現(xiàn)悟空的 IP 形象,悟空呈現(xiàn)出左右環(huán)顧、上下打量,最后看向搜索框的系列動(dòng)作等表現(xiàn)。不僅提高了搜索功能的關(guān)注度,也使得產(chǎn)品設(shè)計(jì)更具情感化。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
三、結(jié)合場(chǎng)景的情感化動(dòng)效
根據(jù)不同的業(yè)務(wù)場(chǎng)景進(jìn)行設(shè)計(jì)表達(dá),可以更好的服務(wù)目標(biāo)用戶,而情感化的設(shè)計(jì)提升,可以拉近產(chǎn)品與用戶之間的親和力。
 
為了降低用戶等餐過(guò)程中出現(xiàn)的負(fù)面情緒,餓了么 APP 下單之后在詳情頁(yè)中根據(jù)點(diǎn)餐的不同設(shè)計(jì)了情感化的動(dòng)效表達(dá)。無(wú)論是快餐還是冷飲等,都針對(duì)性地設(shè)計(jì)了微動(dòng)效的元素,以此來(lái)表現(xiàn)當(dāng)前狀態(tài)。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
四、3D 空間感的 Banner 設(shè)計(jì)
通過(guò)突出設(shè)計(jì)、交互、布局結(jié)構(gòu)等的創(chuàng)意性,可以使得 Banner 具備更強(qiáng)的差異化,以此來(lái)突出 Banner 的存在感。
 
騰訊視頻 APP 首頁(yè)的 Banner 布局也會(huì)經(jīng)常呈現(xiàn)出一些很有創(chuàng)意的方案,比如之前體驗(yàn)到一個(gè)結(jié)合 3D 空間感營(yíng)造的設(shè)計(jì)案例,就非常有吸引力。通過(guò)動(dòng)態(tài)過(guò)度到立體空間,再恢復(fù)到默認(rèn)形式,這個(gè)動(dòng)態(tài)的過(guò)程演變就能讓用戶過(guò)目不忘。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
五、通過(guò)動(dòng)效引導(dǎo)用戶操作
針對(duì)一些使用頻次不高或者過(guò)于隱藏的功能,為了提高用戶的操作概率,會(huì)通過(guò)一些特殊的設(shè)計(jì)表達(dá)來(lái)提升用戶的關(guān)注度,引導(dǎo)用戶進(jìn)行相關(guān)操作。
 
比如麥當(dāng)勞 APP 首頁(yè)中,為了吸引用戶下拉進(jìn)入二層樓,通過(guò)動(dòng)效的形式設(shè)計(jì)了一個(gè)搖擺的鈴鐺,以此來(lái)吸引用戶的注意力。用戶看到像是隨風(fēng)飄動(dòng)的鈴鐺,就會(huì)忍不住去拉動(dòng),這就達(dá)到了引導(dǎo)用戶操作的目的,提高了二層樓內(nèi)容的曝光度。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
六、微動(dòng)效引導(dǎo) VIP 續(xù)費(fèi)
針對(duì)一些無(wú)法通過(guò)占比面積進(jìn)行突出的元素,運(yùn)用微動(dòng)效的形式設(shè)計(jì)是常見(jiàn)的設(shè)計(jì)手法。
 
網(wǎng)易云音樂(lè) APP “我的”板塊中,為了突出 VIP 續(xù)費(fèi)按鈕,黑膠唱片以動(dòng)效的形式在按鈕中來(lái)回滾動(dòng),以此強(qiáng)化續(xù)費(fèi)按鈕的關(guān)注度。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
七、動(dòng)態(tài)還原實(shí)時(shí)天氣
天氣類(lèi)產(chǎn)品從簡(jiǎn)單的靜態(tài)預(yù)告升級(jí)為動(dòng)態(tài)實(shí)時(shí)還原,可以讓用戶更加直觀的判斷天氣變化,也能提高界面設(shè)計(jì)的感官體驗(yàn)。
 
比如 iPhone 自帶的天氣 APP,以動(dòng)態(tài)還原實(shí)時(shí)天氣作為界面背景,不僅便于用戶識(shí)別天氣,也使得產(chǎn)品設(shè)計(jì)更具情感化體驗(yàn)。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
八、動(dòng)態(tài) IP 引導(dǎo)按鈕設(shè)計(jì)
按鈕設(shè)計(jì)樣式可以發(fā)揮的空間很大,除了在造型、配色、空間感等方面突出設(shè)計(jì)以外,也能通過(guò)按鈕微動(dòng)效或者動(dòng)態(tài)引導(dǎo)等形式強(qiáng)化。
 
比如智行火車(chē)票 APP “搶票”板塊中,為了突出“添加搶票”按鈕的存在感,以動(dòng)效 IP 引導(dǎo)進(jìn)行設(shè)計(jì)。不僅使得按鈕更突出,設(shè)計(jì)感也顯得俏皮可愛(ài),凸顯親和力。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
九、微動(dòng)效賦予品牌活力
立足于品牌做設(shè)計(jì)是突出產(chǎn)品差異化的關(guān)鍵,這也是產(chǎn)品設(shè)計(jì)未來(lái)的演變趨勢(shì)之一,如何提高品牌的曝光度和記憶度,成為設(shè)計(jì)師不斷探索的方向。
 
最近在使用夸克 APP 時(shí),微動(dòng)效賦予品牌 LOGO 的活力感讓人印象深刻。在眾多特殊節(jié)慶等時(shí)間段,夸克也會(huì)以動(dòng)效的形式賦予品牌更多變化,不僅使得產(chǎn)品更具年輕化屬性,也能更好的傳遞品牌基因。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
小結(jié)
動(dòng)效使得產(chǎn)品具備更多的變化,也能輔助解決更多復(fù)雜功能的交互場(chǎng)景,探索動(dòng)效的場(chǎng)景運(yùn)用可以提升設(shè)計(jì)靈感,希望本期的分享可以帶給大家更多設(shè)計(jì)靈感。本文描述屬于個(gè)人體驗(yàn)總結(jié),不足之處我們努力改進(jìn)。
 
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTYzOTIyOA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

 

7大色彩技巧讓你界面更吸睛

天宇

色彩在我們?nèi)粘TO(shè)計(jì)中起著定生死的作用,它是設(shè)計(jì)的靈魂,舒適的色彩搭配可以讓設(shè)計(jì)師一遍定稿,感覺(jué)在自己的設(shè)計(jì)生涯中,大部分都是在與色彩的博弈中度過(guò)的,雖然客戶可能不懂色彩原理,可是客戶天生都是色彩的感受家,什么樣的色彩搭配美,通常他們瞄一眼就會(huì)有定論,不用你去辯解太多,不好的搭配,縱使有千萬(wàn)種理由,也說(shuō)服不了客戶,所以好好研究色彩以及每一種色彩傳遞的情感對(duì)我們做好設(shè)計(jì)至關(guān)重要。
 
7大色彩技巧讓你界面更吸睛
 
 
 
目錄
一、 色彩的定義
二、 色彩的三屬性
三、 色彩的三種常見(jiàn)模型
四、 色彩的語(yǔ)意及它的應(yīng)用
五、 不同場(chǎng)景下的色彩應(yīng)用
六、 色彩在B端設(shè)計(jì)中的作用
七、 B端色彩設(shè)計(jì)使用的原則
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
一、色彩的定義?
1、物理學(xué)角度
色彩是光的屬性,當(dāng)光波通過(guò)物體時(shí),物體會(huì)吸收某些波長(zhǎng)的光,而反射或透射其他波長(zhǎng)的光,這些被反射或透射的光波長(zhǎng)度決定了我們看到的顏色。
 
2、心理學(xué)角度
色彩是人腦對(duì)光波長(zhǎng)的視覺(jué)感知,不同的波長(zhǎng)刺激視網(wǎng)膜上不同類(lèi)型的感光細(xì)胞,進(jìn)而產(chǎn)生不同的色彩感覺(jué)。
 
3、 藝術(shù)學(xué)角度
色彩是藝術(shù)創(chuàng)作的重要元素,它不僅關(guān)乎視覺(jué)感受,還與情感、文化、象征意義相關(guān)聯(lián)。
 
4、 設(shè)計(jì)學(xué)角度
在設(shè)計(jì)領(lǐng)域,色彩是傳達(dá)信息、影響情緒和創(chuàng)造美感的關(guān)鍵工具。
 
5、 計(jì)算機(jī)科學(xué)角度
在數(shù)字圖像處理中,色彩通常通過(guò)顏色模型(如RGB、CMYK等)來(lái)定義,這些模型通過(guò)不同比例的原色或色料混合來(lái)表示各種顏色。
 
 
 
二、色彩的三屬性
1、色相
色相是指不同顏色之間的差別,即不同顏色的表象和名稱(chēng),每個(gè)顏色都有自己的專(zhuān)屬I(mǎi)D,如紅、橙、黃、綠、青、藍(lán)、紫等。不同的色別都可用光譜中的波長(zhǎng)來(lái)表示,人的眼睛可分辨出的色別有180種左右。
7大色彩技巧讓你界面更吸睛
 
 
 
2、明度
明度是指色彩的明暗程度。一般在反光率相同的情況下,不同色別的明暗程度不同。如黃色光比紅色光更明亮,而紅色光則比青色光要明亮。
同時(shí),同一色相在受光強(qiáng)弱或者物體對(duì)光的吸收、反射性能不同的情況下,會(huì)呈現(xiàn)不同的明暗變化和差異。
7大色彩技巧讓你界面更吸睛
 
 
  
 
3、飽和度(純度)
飽和度(純度)是指同一色別的純凈度和鮮明度的變化。從色光的角度而言,光的波長(zhǎng)單一程度越高,飽和度就會(huì)越高;不同色別所達(dá)到的飽和度不同,一般情況下,紅色的純度可達(dá)到最高,綠色的則相對(duì)較低;同一色相深淺不同的顏色有不同的飽和度;黑白色光的滲入會(huì)導(dǎo)致飽和度和明度發(fā)生變化;通常,照明光線的性質(zhì)、物體表面結(jié)構(gòu)對(duì)光線吸收與反射的性能等因素影響飽和度。
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
三、色彩的三種常見(jiàn)模型
1、HSB模型
HSB模型也叫HSV模型,其中H代表色相,即顏色的種類(lèi);S代表飽和度,即顏色的純度;B(V)代表亮度,即顏色的明亮程度。
 
這種色彩模型是我日常在的設(shè)計(jì)工作中用的最多的一種色彩模型,如果在同色系中如果只想讓他們有細(xì)微的變化,我通常會(huì)通過(guò)調(diào)節(jié)S和B的百分比數(shù)值來(lái)達(dá)到自己想要的目的。
7大色彩技巧讓你界面更吸睛
 
 
以上就是我在設(shè)計(jì)項(xiàng)目中,運(yùn)用該色彩模型做的一個(gè)實(shí)戰(zhàn),項(xiàng)目中用到了一個(gè)圖形,需要用同色系來(lái)表達(dá),我保持了H色值的不變,讓S值和B值都發(fā)生著微妙的不同,于是就產(chǎn)生了四五種同色系的綠色,該色彩模型特別的好使,也鼓勵(lì)大家多在實(shí)戰(zhàn)中運(yùn)用這樣的色彩模型,簡(jiǎn)單實(shí)用。
 
H色相:Hue,以角度(0°-360°)表示
S飽和度:Saturation,以百分比值(0%-100%)表示
B/V 亮度:Brightness 或 Value,以百分比值(0%-100%)表示
 
 
 
 
2、RGB模型
RGB是從顏色發(fā)光的原理來(lái)設(shè)計(jì)定的,通俗點(diǎn)說(shuō)它的顏色混合方式就好像有紅、綠、藍(lán)三盞燈,當(dāng)它們的光相互疊合的時(shí)候,色彩相混,而亮度卻等于三者亮度之總和,越混合亮度越高,即加法混合。
 
紅、綠、藍(lán)三個(gè)顏色通道每種色各分為256階亮度,在0時(shí)“燈”最弱——是關(guān)掉的,而在255時(shí)“燈”最亮。當(dāng)三色灰度數(shù)值相同時(shí),產(chǎn)生不同灰度值的灰色調(diào),即三色灰度都為0時(shí),是最暗的黑色調(diào);三色灰度都為255時(shí),是最亮的白色調(diào)。
7大色彩技巧讓你界面更吸睛
 
 
R紅:Red,以數(shù)值(0-255)表示
G綠:Green,以數(shù)值(0-255)表示
B藍(lán):Blue,以數(shù)值(0-255)表示
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、CMYK模型
雖然RGB模型色彩更加的豐富,但是很多顏色不能完全打印出來(lái),于是CMYK模型就成了打印、印刷的不二選擇。C是青、M是品紅、Y是黃、K是黑,通過(guò)顏料反射和吸收光線來(lái)顯色。
 
記得之前自己從事平面工作的時(shí)候,就經(jīng)常要用到CMYK模式,因?yàn)橛〕鰜?lái)的效果偏差是最小的,是最靠近設(shè)計(jì)效果圖的。
7大色彩技巧讓你界面更吸睛
 
 
通過(guò)對(duì)比,我們發(fā)現(xiàn)RGB色彩模型顏色顯示上確實(shí)更加的絢麗豐富些,而CMYK的色彩模型顏色顯示上就黯淡了不少,但是要印刷的話,就必須轉(zhuǎn)化為成CMYK的色彩模式。
 
R青:Cyan,以百分比值(0%-100%)表示
M品紅:Magenta,以百分比值(0%-100%)表示
Y黃:Yellow,以百分比值(0%-100%)表示
B黑:Black,以百分比值(0%-100%)表示
 
 
 
 
四、色彩的語(yǔ)意及應(yīng)用
1、紅色的語(yǔ)意及應(yīng)用
紅色代表熱情、活力、強(qiáng)烈的情感和愛(ài)。它可以象征著激情、勇氣和行動(dòng)力,也常與興奮、熱烈的情緒相關(guān)。
著名的快餐品牌肯德基,在自己的網(wǎng)頁(yè)及店鋪裝修中都運(yùn)用了紅色,因?yàn)榧t色是所有顏色中最容易引起人們注意的顏色,也是很容易刺激人們食欲和購(gòu)買(mǎi)的顏色。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、橙色的語(yǔ)意及應(yīng)用
橙色傳達(dá)溫暖、歡快和積極向上的情感;它常與樂(lè)觀、友好、創(chuàng)造力聯(lián)系在一起,給人以活力充沛和充滿希望的感覺(jué)。
百度網(wǎng)盤(pán)的這個(gè)登錄界面就運(yùn)用了橙色,給人陽(yáng)光、向上、熱情的感覺(jué),通過(guò)色彩的運(yùn)用一下讓界面有了溫度。
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、黃色的語(yǔ)意及應(yīng)用
黃色象征快樂(lè)、開(kāi)朗和樂(lè)觀;它能帶來(lái)明亮、愉悅的情緒,代表著陽(yáng)光、溫暖和智慧。
叫叫閱讀是一款非常著名的兒童閱讀軟件,整個(gè)色調(diào)采用的是非常有活力的黃色,這與兒童處于好奇與活力的階段相符合,這種高亮的黃色,飽和度和明度都非常的高,特別容易抓住兒童的目光,同時(shí)它是一種快樂(lè)的顏色,也是一種能激發(fā)孩子創(chuàng)造力和想象力的顏色,特別符合兒童成長(zhǎng)的需求。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、綠色的語(yǔ)意及應(yīng)用
綠色代表平靜、和諧與生機(jī)。綠色常與大自然相關(guān),給人帶來(lái)安寧、放松的感覺(jué),也象征著成長(zhǎng)、希望和新生。
青椒云的目標(biāo)用戶是吸引年輕用戶和創(chuàng)意工作者,綠色這種富有活力和創(chuàng)意的顏色更容易吸引他們的關(guān)注,同時(shí)綠色也代表著健康、可持續(xù)發(fā)展的企業(yè)形象。
7大色彩技巧讓你界面更吸睛
 
 
 
 
5、青色的語(yǔ)意及應(yīng)用
青色寓意清新、寧?kù)o和沉穩(wěn),它給人一種冷靜、理智的印象,同時(shí)也帶有一絲清新的活力。
青色是一種帶有藍(lán)色和綠色的顏色,因此青色既有藍(lán)色的專(zhuān)業(yè)感、信任感,也有綠色的生機(jī)感、希望感。
以下是日本某牙醫(yī)品牌的官網(wǎng)首頁(yè),病人希望在這里帶來(lái)健康與復(fù)蘇,也希望獲得專(zhuān)業(yè)、可靠的治療,而青色就成了很好傳遞這種情感的品牌色。 
7大色彩技巧讓你界面更吸睛
 
 
 
 
6、藍(lán)色的語(yǔ)意及應(yīng)用
藍(lán)色代表冷靜、忠誠(chéng)和信任;它常與沉穩(wěn)、深邃的情感相關(guān),能帶來(lái)寧?kù)o、平和的心境,也象征著智慧和理性。
123云盤(pán)使用了藍(lán)色,藍(lán)色符合社會(huì)的普遍審美認(rèn)知,接受度比較高;其次,藍(lán)色給人安全的感覺(jué),也符合云盤(pán)的初衷,給用戶安全的存儲(chǔ)服務(wù)。
7大色彩技巧讓你界面更吸睛
 
 
 
 
7、紫色的語(yǔ)意及應(yīng)用
紫色象征神秘、高貴和浪漫;它常給人一種優(yōu)雅、奢華的感覺(jué),同時(shí)也帶有神秘莫測(cè)的氛圍,與夢(mèng)幻、創(chuàng)造力等情感相關(guān)。
美柚的主要用戶是女性,紫色在色彩心理學(xué)中常被認(rèn)為具有優(yōu)雅、神秘、浪漫的特質(zhì),這些特質(zhì)與女性的審美和情感需求相契合,能夠吸引女性的關(guān)注。
7大色彩技巧讓你界面更吸睛
 
 
 
 
8、白色的語(yǔ)意及應(yīng)用
 
白色代表著純潔、神圣、信任、安靜、樸素和雅致,是一種充滿純潔的顏色,它可以跟任何顏色和諧的共生。
以下是熊掌ID的登錄界面,顏色用了大量的白與灰,簡(jiǎn)潔又不失大氣,傳遞出了一種質(zhì)樸、雅致的感覺(jué)。 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
五、不同場(chǎng)景下的色彩應(yīng)用
 
1、商場(chǎng)的色彩為什么總是多彩熱烈的?
 
? 吸引顧客注意力
在眾多商業(yè)場(chǎng)所中脫穎而出,色彩鮮艷的商場(chǎng)外觀和內(nèi)部裝飾更容易在人們的視線中凸顯出來(lái),吸引過(guò)往行人的目光,激發(fā)他們的好奇心和探索欲。
 
確實(shí)多彩的顏色更加容易引起我的關(guān)注,這不看到商場(chǎng)的美圖,都忍不住拍照留念了,成功的吸引了我的目光。
7大色彩技巧讓你界面更吸睛
 
 
 
? 增強(qiáng)可見(jiàn)性
即使在較遠(yuǎn)的距離或在繁忙的街道上,多彩熱烈的配色也能讓商場(chǎng)更容易被發(fā)現(xiàn),提高商場(chǎng)的知名度和曝光度。
多彩的配色,讓我遠(yuǎn)遠(yuǎn)的就被商場(chǎng)美輪美奐的插畫(huà)吸引,大大增加了商場(chǎng)的可見(jiàn)性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
營(yíng)造愉悅氛圍
色彩可以激發(fā)積極情緒,明亮、鮮艷的色彩往往與快樂(lè)、活力和興奮等積極情緒相關(guān)聯(lián)。當(dāng)顧客進(jìn)入一個(gè)色彩豐富的商場(chǎng)時(shí),會(huì)感受到一種愉悅和輕松的氛圍,從而更愿意在商場(chǎng)中停留和購(gòu)物。
星沙永旺城的美陳設(shè)計(jì)很好,墻面采用極具誘惑力的顏色與美食,把小小實(shí)物十倍放大,增加了視覺(jué)看點(diǎn),讓人忍不住過(guò)去拍照曬一下,大大增加了愉悅性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
緩解壓力
在現(xiàn)代生活中,人們常常面臨各種壓力。走進(jìn)一個(gè)多彩熱烈的商場(chǎng),可以暫時(shí)擺脫日常的煩惱和壓力,享受購(gòu)物的樂(lè)趣。
特別可愛(ài)夸張的插圖設(shè)計(jì),引發(fā)了絲絲童趣和歡樂(lè),讓人短暫忘記壓力,遠(yuǎn)離煩惱。
7大色彩技巧讓你界面更吸睛
 
 
 
?
引導(dǎo)消費(fèi)行為
商場(chǎng)通常會(huì)使用不同的顏色來(lái)區(qū)分不同的區(qū)域,如購(gòu)物區(qū)、餐飲區(qū)、娛樂(lè)區(qū)等。這樣可以幫助顧客更快速地找到自己感興趣的區(qū)域,提高購(gòu)物效率。
突出重點(diǎn)商品,對(duì)于一些重點(diǎn)推薦的商品或促銷(xiāo)活動(dòng),商場(chǎng)可以使用鮮艷的色彩來(lái)突出展示,吸引顧客的注意力,引導(dǎo)他們進(jìn)行購(gòu)買(mǎi)。
7大色彩技巧讓你界面更吸睛
 
 
 
?
塑造品牌形象
6.1 傳達(dá)個(gè)性和風(fēng)格
不同的商場(chǎng)可能有不同的品牌定位和目標(biāo)客戶群體。通過(guò)選擇特定的色彩組合,商場(chǎng)可以傳達(dá)出自己的個(gè)性和風(fēng)格,吸引與之相符的顧客。
 
6.2 增強(qiáng)品牌記憶度
獨(dú)特而鮮明的色彩搭配可以讓商場(chǎng)在顧客的心中留下深刻的印象,提高品牌的記憶度和辨識(shí)度。
 
芙蓉區(qū)的龍湖天街主要面向中等收入新興家庭,是一個(gè)區(qū)域型的購(gòu)物中心,集購(gòu)物、餐飲、休閑、娛樂(lè)等多業(yè)態(tài)于一體,為消費(fèi)者提供一站式商業(yè)綜合體,它在餐飲區(qū)采用了大量的吃喝玩樂(lè)的插畫(huà),來(lái)引導(dǎo)用戶消費(fèi)。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、為什么藍(lán)色在B端設(shè)計(jì)中廣泛應(yīng)用?
? 視覺(jué)特性方面
1.1 穩(wěn)定性
藍(lán)色給人一種沉穩(wěn)、可靠的感覺(jué)。在B端產(chǎn)品中,用戶往往需要處理重要的業(yè)務(wù)數(shù)據(jù)和進(jìn)行復(fù)雜的操作,藍(lán)色的穩(wěn)定性可以讓用戶感到安心,增強(qiáng)對(duì)產(chǎn)品的信任感。
7大色彩技巧讓你界面更吸睛
 
 
 
1.2 專(zhuān)業(yè)性
藍(lán)色通常與科技、專(zhuān)業(yè)領(lǐng)域相關(guān)聯(lián)。B端產(chǎn)品通常面向企業(yè)用戶,需要傳達(dá)出專(zhuān)業(yè)、高效的形象,藍(lán)色正好符合這一需求。
 
? 心理影響方面
2.1 減少焦慮
相比鮮艷、刺激的顏色,藍(lán)色較為柔和,不容易引起用戶焦慮和緊張的情緒;在B端使用場(chǎng)景中,用戶可能需要長(zhǎng)時(shí)間使用產(chǎn)品,藍(lán)色的舒緩效果有助于提高用戶的使用體驗(yàn)。
 
2.2 提高專(zhuān)注度
藍(lán)色具有一定的沉靜作用,能夠幫助用戶集中注意力,專(zhuān)注于工作任務(wù)。對(duì)于B端用戶來(lái)說(shuō),高效完成工作是首要目標(biāo),藍(lán)色的這一特性有助于提高工作效率。
 
B端產(chǎn)品在心理上追求的是類(lèi)似如下圖的這種寧?kù)o式的體驗(yàn),跟教育有著異曲同工之處,就像這個(gè)易貝樂(lè)少兒英語(yǔ)一樣,用大面積的藍(lán)色,希望孩子在這里能很快的安靜下來(lái)學(xué)習(xí)、專(zhuān)注自己的事情。
7大色彩技巧讓你界面更吸睛
 
 
 
? 行業(yè)習(xí)慣方面
3.1 科技行業(yè)引領(lǐng)
許多知名的科技企業(yè)和軟件產(chǎn)品在 B 端市場(chǎng)中廣泛使用藍(lán)色,逐漸形成了一種行業(yè)習(xí)慣。其他企業(yè)在設(shè)計(jì)B端產(chǎn)品時(shí),也會(huì)傾向于選擇藍(lán)色以符合用戶的認(rèn)知和期望。
 
3.2 傳統(tǒng)與延續(xù)
在過(guò)去的設(shè)計(jì)中,藍(lán)色在 B 端領(lǐng)域的成功應(yīng)用使得它成為了一種傳統(tǒng)選擇。設(shè)計(jì)師們?cè)谘永m(xù)這一傳統(tǒng)的同時(shí),也不斷優(yōu)化和創(chuàng)新藍(lán)色的運(yùn)用方式,使其更符合現(xiàn)代設(shè)計(jì)趨勢(shì)和用戶需求。
 
嘉為科技是一個(gè)有著20多年技術(shù)沉淀的科技公司,它的官網(wǎng)和產(chǎn)品風(fēng)格一直是沿用著科技藍(lán)的風(fēng)格,應(yīng)該也是基于傳統(tǒng)的沉淀吧。
7大色彩技巧讓你界面更吸睛
 
 
 
?藍(lán)色可以提高產(chǎn)品的復(fù)用率
很多用戶都能接受藍(lán)色的B端界面,當(dāng)面對(duì)有差不多需求客戶時(shí),同一套UI,可以多次復(fù)用,可以減少開(kāi)發(fā)成本和設(shè)計(jì)成本,這也是自己通過(guò)長(zhǎng)期實(shí)戰(zhàn)觀察發(fā)現(xiàn)的。
 
一個(gè)UI風(fēng)格,用在了兩個(gè)項(xiàng)目中,不同的用戶,趨向同樣的風(fēng)格,說(shuō)明藍(lán)色在大家心目中的接受度是非常的高,用藍(lán)色可以促進(jìn)設(shè)計(jì)的多次復(fù)用。
7大色彩技巧讓你界面更吸睛
 
 
在日常的項(xiàng)目中,我看到的B端UI界面是千篇一律的穩(wěn)重,不追求過(guò)于刺激的顏色搭配,通常都比較的干凈簡(jiǎn)潔,不像商場(chǎng)里面的美陳背景設(shè)計(jì),色彩對(duì)比非常的強(qiáng)烈,比較的吸引人眼球。
 
有一次我厭煩了常規(guī)的穩(wěn)重風(fēng),探索一種大膽的色彩風(fēng)格時(shí),雖然風(fēng)格比較新穎,可是發(fā)出去客戶的接受度不高,覺(jué)得太不穩(wěn)重了,然后重新按照以往習(xí)慣進(jìn)行設(shè)計(jì)時(shí),就很好,客戶一致認(rèn)同。
 
可見(jiàn)每個(gè)領(lǐng)域都有自己的色彩運(yùn)用習(xí)慣,商場(chǎng)需要吸引人眼球、刺激消費(fèi),越大膽越好,可是B端設(shè)計(jì)需要提供一個(gè)讓人平靜去處理工作事項(xiàng)的環(huán)境,它需要安靜,不需要過(guò)于刺激的顏色搭配。
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
六、色彩在B端設(shè)計(jì)中的作用?
1、通過(guò)色彩向用戶反饋操作結(jié)果及當(dāng)前狀況
比方在日常設(shè)計(jì)當(dāng)中,紅色代表流程失敗,綠色代表流程成功,橙色代表信息有告警,藍(lán)色代表著鏈接,同時(shí)不同的按鈕顏色也可以很好的區(qū)分按鈕狀態(tài),在反饋結(jié)果和狀況方面,色彩起著非常重要的作用。
 
下面這個(gè)IDC運(yùn)營(yíng)的監(jiān)測(cè)平臺(tái),它就是通過(guò)顏色來(lái)區(qū)分不同的告警級(jí)別的,可見(jiàn)顏色在B端產(chǎn)品中的重要性。(備注:圖中數(shù)據(jù)都不是真實(shí)數(shù)據(jù),僅做展示)
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、可以很好的進(jìn)行品牌傳達(dá)
B端設(shè)計(jì)中大面積使用品牌色,可以強(qiáng)化品牌形象,使用與品牌標(biāo)志風(fēng)格相近的色彩,可以幫助用戶快速識(shí)別和記住品牌,在不同的B端產(chǎn)品界面中使用統(tǒng)一的色彩方案,有助于建立品牌的連貫性和一致性,增強(qiáng)用戶對(duì)品牌的信任。
 
例如我給湖南高速設(shè)計(jì)的一套B端界面設(shè)計(jì),用戶強(qiáng)烈要求改變傳統(tǒng)的藍(lán)色風(fēng)格,要求整套界面設(shè)計(jì)要用湖南高速品牌色-綠色,說(shuō)明在追求大流和品牌色之間,客戶更加傾向品牌的傳達(dá)。(備注:圖中數(shù)據(jù)都不是真實(shí)數(shù)據(jù),僅做展示)
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、顏色可以很好的進(jìn)行信息區(qū)分
在B端界面設(shè)計(jì)中,顏色在幫助信息區(qū)分起著非常重要的作用,通??梢酝ㄟ^(guò)不同的色彩來(lái)區(qū)分功能區(qū)域,可以讓用戶更清晰地了解界面的結(jié)構(gòu)和布局,例如,導(dǎo)航欄使用一種特定的顏色,而內(nèi)容區(qū)域則使用另一種顏色。
 
我設(shè)計(jì)的天翼寫(xiě)作,就是這樣的設(shè)計(jì)思路,導(dǎo)航欄和內(nèi)容區(qū)的顏色完全不一樣,這里顏色起到了很好的區(qū)分作用。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、舒適的色彩搭配可以提升用戶體驗(yàn)
選擇合適的色彩對(duì)比度可以增強(qiáng)文本的可讀性,減少用戶的視覺(jué)疲勞。例如,黑色文字在白色背景上通常比較容易閱讀。
 
選擇適當(dāng)?shù)纳士梢誀I(yíng)造出專(zhuān)業(yè)、高效、舒適的工作氛圍,從而影響用戶的情緒和感受,提高用戶的使用體驗(yàn)。
 
我參與的這個(gè)后臺(tái)界面,就是通過(guò)合理的色彩搭配來(lái)引導(dǎo)用戶使用的,當(dāng)用戶已經(jīng)完成的環(huán)節(jié)都是用綠色表示,沒(méi)有走完的流程就會(huì)是灰色的,寓意指示非常的鮮明,很好的解決了用戶不知道清晰進(jìn)程的卡點(diǎn),提升了用戶體驗(yàn)。
7大色彩技巧讓你界面更吸睛
 
 
 
 
5、色彩可以傳遞性格
人的性格有活潑的、文靜的、沉穩(wěn)的、深邃的,其實(shí)色彩也是有性格的,不同的色彩也有不同的性格,當(dāng)我們對(duì)色彩的性格有足夠多的了解,在面對(duì)不同的客戶時(shí),我們對(duì)色彩的拿捏以及設(shè)計(jì)需求的把握時(shí),會(huì)更加的游刃有余。
7大色彩技巧讓你界面更吸睛
 
 
 
我們平常確實(shí)是在做設(shè)計(jì),但是我們更多的是在與人打交道,我們更好的聆聽(tīng),會(huì)幫助我們更快的抓取到客戶的喜好,快速做出滿足客戶需求的設(shè)計(jì),少受加班之苦。
比方說(shuō)我之前給云門(mén)戶設(shè)計(jì)的一套UI,客戶的決策層是男性,且年齡偏大,他們就偏愛(ài)深沉的UI風(fēng)格;而我負(fù)責(zé)的天翼云電腦專(zhuān)家,客戶的決策層是女性,且年齡偏年輕,她每次就喜歡輕盈、明快的UI色調(diào),不同的決策層客戶,就會(huì)帶來(lái)不同的設(shè)計(jì)結(jié)果。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
七、B端色彩設(shè)計(jì)使用的原則
1、B端設(shè)計(jì)中,色彩設(shè)計(jì)應(yīng)遵循6:3:1原則
在這個(gè)登錄頁(yè)面中,我就是運(yùn)用的6:3:1原則,60%的主色,30%的次要色,10%的點(diǎn)綴色;使用了大面積的藍(lán)色和藍(lán)灰色,最后使用一點(diǎn)點(diǎn)的橙色,這樣的配色會(huì)顯得高級(jí)。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、文字、卡片背景色和邊框都使用無(wú)彩色
為了保證畫(huà)面風(fēng)格的統(tǒng)一、干凈整潔,文字顏色、邊框顏色、以及邊框背景色都需要用到無(wú)彩色,通常通過(guò)顏色的深淺來(lái)區(qū)分信息的層級(jí)關(guān)系。
 
比方說(shuō)我參與的星辰大模型AI文檔生成能力的應(yīng)用,里面無(wú)論文字顏色還是底色都是運(yùn)用的無(wú)彩色,只是通過(guò)了色彩深淺變化來(lái)做了層級(jí)區(qū)分,因?yàn)闊o(wú)彩色可以起到很好的降噪作用,既傳達(dá)了信息,又不會(huì)顯得界面凌亂復(fù)雜。
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、需要凸顯的內(nèi)容,用明度和純度比較高的色彩
比方說(shuō),日常我們?cè)O(shè)計(jì)的卡片都是用的白色,而底色我們用的是灰色,因?yàn)榭ㄆ锩娴膬?nèi)容都是比較重要的信息,需要用一個(gè)亮度比較的高的顏色,讓內(nèi)容往前走,而灰色的背景通常就往后走的感覺(jué),這樣能跟卡片形成一個(gè)一前一后的對(duì)比,更好的幫助內(nèi)容進(jìn)行傳播。
 
比方說(shuō)我設(shè)計(jì)的這個(gè)IT運(yùn)維監(jiān)控平臺(tái)的首頁(yè),物理主機(jī)、網(wǎng)絡(luò)及安全設(shè)備、工單、在途工單這幾個(gè)指標(biāo)是非常關(guān)鍵的,所以他們的圖片底色用了純度比較高的有彩色來(lái)標(biāo)識(shí)。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、設(shè)計(jì)前一定要有定色調(diào)的意識(shí)
作為設(shè)計(jì)師,我們的設(shè)計(jì)工作其實(shí)就是在設(shè)計(jì)一種感覺(jué),一種情緒,設(shè)計(jì)前定調(diào)的意識(shí)真的太重要了,感覺(jué)對(duì)了,什么都就對(duì)了。
 
比方說(shuō)我前段時(shí)間接到了一個(gè)B端的大屏可視化需求設(shè)計(jì),客戶說(shuō)之前的大屏設(shè)計(jì)不喜歡,希望重新出一個(gè)新的設(shè)計(jì),然后公司的需求對(duì)接人員在給我下達(dá)需求時(shí),真的就只是給我下達(dá)了這幾個(gè)字,讓我重新出一個(gè)設(shè)計(jì)試試。
 
以我的職業(yè)直覺(jué),感覺(jué)這個(gè)需求是不夠細(xì)化的,于是我就多問(wèn)了幾句,我問(wèn)客戶是想要常規(guī)的藍(lán)色調(diào)的還是別的?果然一問(wèn),客戶說(shuō)不希望再用常規(guī)的藍(lán)色的,希望新的設(shè)計(jì)要用他們的品牌色綠色,剛聽(tīng)到這幾個(gè)字的時(shí)候,我以為這次我把握住需求了,在收集參考圖的時(shí)候,我發(fā)現(xiàn)常見(jiàn)的綠色大屏有深色的和淺色的,根據(jù)自己以往的作圖習(xí)慣,我覺(jué)得深色會(huì)更加的受歡迎一些,我自以為是的朝著深色的方向去出圖,出到了一半的時(shí)候,我內(nèi)心有些許的忐忑,我于是找了一深一淺的參考圖,讓同事跟客戶確認(rèn)一下,客戶是想要深色的感覺(jué),還是要淺色的感覺(jué),這次溝通又給了我深深的一擊,客戶不按常理出牌,說(shuō)希望按淺色的風(fēng)格來(lái)出圖。
 
在出稿之前,通過(guò)自己反復(fù)的溝通確認(rèn),發(fā)現(xiàn)設(shè)計(jì)前的定調(diào)意識(shí)真的太重要了,要不是有出圖前一波三折的反復(fù)確認(rèn)以及需求的細(xì)化,就不會(huì)有后來(lái)的一遍過(guò)稿。
7大色彩技巧讓你界面更吸睛
 
 
 
5.設(shè)計(jì)的灰色盡量使用帶有色彩偏向的灰
不管我們?cè)O(shè)計(jì)什么色系的界面,都避不開(kāi)用到灰色,在設(shè)計(jì)中用跟主視覺(jué)相符的灰,會(huì)使得界面更加的高級(jí)、協(xié)調(diào)與美觀,注意好了這個(gè)小細(xì)節(jié),會(huì)給我們的設(shè)計(jì)加分不少。
 
下面是我日常體驗(yàn)到的兩個(gè)界面,上面綜合管理平臺(tái)里面的灰色就沒(méi)有跟主色調(diào)藍(lán)色相呼應(yīng),灰色沒(méi)有向藍(lán)色傾斜,界面看起來(lái)就沒(méi)那么美觀;下面通義千問(wèn)的灰色設(shè)計(jì)就非常的注重細(xì)節(jié),灰色偏紫,整個(gè)界面看起來(lái)渾然天成,毫無(wú)違和,美感、檔次瞬間提升好幾個(gè)等級(jí)。
 
一個(gè)微小細(xì)節(jié)的在意,在無(wú)形中拉高了設(shè)計(jì)的高度,十個(gè)細(xì)節(jié)乃至更多細(xì)節(jié)的在意,就會(huì)帶來(lái)更多意想不到的結(jié)果。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
總結(jié):
以上就是我最近對(duì)色彩的一些頓悟、感受和學(xué)習(xí)收獲,在不斷的復(fù)盤(pán)總結(jié)中,我們總會(huì)收獲一些新的認(rèn)知,通過(guò)這次色彩的復(fù)盤(pán)之旅,發(fā)現(xiàn)色彩對(duì)設(shè)計(jì)師真的太重要了,希望我的分享對(duì)大家有啟發(fā),不足之處也歡迎大家留言交流。


作者:姝斐suphie
鏈接:https://www.zcool.com.cn/article/ZMTYzOTMwMA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

以用戶為中心的交互設(shè)計(jì)思維

天宇

 
聊聊關(guān)于設(shè)計(jì)思維的內(nèi)容,會(huì)從產(chǎn)品設(shè)計(jì)、體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)三個(gè)方面入手。
目前是第三篇,關(guān)于交互設(shè)計(jì)思維的內(nèi)容。到這里設(shè)計(jì)思維的內(nèi)容全部結(jié)束了。
感謝
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維


作者:DesignLink
鏈接:https://www.zcool.com.cn/article/ZMTY0OTg1Mg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

 

設(shè)計(jì)的意義

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

保羅·蘭德說(shuō):“設(shè)計(jì)是一種行為,是想象力馳騁的過(guò)程和產(chǎn)物。”

作為設(shè)計(jì)師,設(shè)計(jì)是我們的專(zhuān)業(yè),也是我們用來(lái)解決商業(yè)問(wèn)題的工具。

我們過(guò)去也許都曾思考過(guò)類(lèi)似設(shè)計(jì)的價(jià)值、意義或是本質(zhì)之類(lèi)的問(wèn)題。思考這類(lèi)問(wèn)題在某種意義上或許都是為了當(dāng)我們遇到困難、沖突、低谷或是不確定性的時(shí)候給自己找一些能夠堅(jiān)持下去的理由。

設(shè)計(jì)師在從業(yè)的不同階段,對(duì)設(shè)計(jì)的理解不同。從追求工具技能到表現(xiàn)力、方法論、風(fēng)格到影響行業(yè)甚至社會(huì)審美意識(shí)等等。不斷的錘煉之后,對(duì)設(shè)計(jì)意義也會(huì)有不同理解。

我們奉為的大師,都擅長(zhǎng)用自己的知識(shí)架構(gòu)定義對(duì)設(shè)計(jì)的理解。

保羅·蘭德就是一位我們公認(rèn)的設(shè)計(jì)大師、藝術(shù)家。他是當(dāng)今美國(guó)乃至世界上最杰出的圖形設(shè)計(jì)師、思想家及設(shè)計(jì)教育家之一。他最出名的企業(yè)標(biāo)志設(shè)計(jì),包括IBM,UPS,ABC標(biāo)志以及為史蒂夫·喬布斯設(shè)計(jì)NeXT.那段經(jīng)典橋段。

去研究這些前輩們?nèi)绾慰创O(shè)計(jì)、理解設(shè)計(jì)以及如何與設(shè)計(jì)相處一生,是另一種設(shè)計(jì)哲學(xué)的思辨。

保羅·蘭德說(shuō):

“設(shè)計(jì)是一種行為,是想象力馳騁的過(guò)程和產(chǎn)物。”

設(shè)計(jì)表現(xiàn)可能看似是簡(jiǎn)單的組裝、排序或是美化的過(guò)程,但設(shè)計(jì)的過(guò)程也是賦予信息意義的過(guò)程。不斷的簡(jiǎn)化、厘清、修飾甚至可能去說(shuō)服、去取悅過(guò)后,設(shè)計(jì)就是把散文變成詩(shī)歌的過(guò)程。

設(shè)計(jì)師是孤獨(dú)的,大部分時(shí)候他們是一個(gè)人在戰(zhàn)斗。

設(shè)計(jì)是個(gè)人行為,即便在設(shè)計(jì)成熟度較高的國(guó)家、企業(yè)或是大型團(tuán)隊(duì),設(shè)計(jì)師仍需在一線才能真正掌控在這場(chǎng)戰(zhàn)斗中可能遇到的極其細(xì)節(jié)的變化和給人傳達(dá)的感受。

設(shè)計(jì)需要沖突來(lái)加深傳達(dá)的“戲劇性”。但設(shè)計(jì)過(guò)程也面臨種種沖突。這是設(shè)計(jì)的商業(yè)價(jià)值與藝術(shù)價(jià)值平衡的過(guò)程。正是因?yàn)檫@種關(guān)心很難平衡,才會(huì)出現(xiàn)雇主與設(shè)計(jì)師之間的沖突。

企業(yè)的目標(biāo)是達(dá)到商業(yè)、經(jīng)濟(jì)、政治甚至社會(huì)性目的。對(duì)設(shè)計(jì)師而言,設(shè)計(jì)是一種創(chuàng)造和實(shí)驗(yàn)行為。通過(guò)這種行為來(lái)平衡之前的目標(biāo)。

設(shè)計(jì)品質(zhì)最終決定設(shè)計(jì)師與核心決策者之間的關(guān)系。關(guān)心越是緊密,設(shè)計(jì)的產(chǎn)出就越有可能出彩。這其實(shí)并不難理解,對(duì)設(shè)計(jì)完成度有高追求的企業(yè),CEO也大多都跟設(shè)計(jì)團(tuán)隊(duì)或是設(shè)計(jì)咨詢公司有較為緊密的往來(lái)。就比如蘋(píng)果的喬布斯與喬納森是我們都公認(rèn)的CEO與設(shè)計(jì)師高緊密度關(guān)系的典范。

當(dāng)今社會(huì),市面上依然存在太多糟糕的設(shè)計(jì)。

一來(lái),核心的決策者對(duì)設(shè)計(jì)專(zhuān)業(yè)的理解度不夠。

二來(lái),很多決策依賴于市場(chǎng)調(diào)研,既得利益的權(quán)重大于長(zhǎng)遠(yuǎn)利益。

再就是我們回避不開(kāi)的話題,設(shè)計(jì)師在某種意義上話語(yǔ)權(quán)不夠。

抉擇者很多時(shí)候不了解或是存在對(duì)某類(lèi)元素特定的喜好偏見(jiàn),他們有評(píng)價(jià)權(quán),但卻缺乏對(duì)設(shè)計(jì)專(zhuān)業(yè)知識(shí)的儲(chǔ)備。所以就會(huì)普遍出現(xiàn)外行指導(dǎo)內(nèi)行的情況。過(guò)往(現(xiàn)在好一些),他們將設(shè)計(jì)師看做一套繪圖工具,一個(gè)合作供應(yīng)商而不是一個(gè)業(yè)務(wù)團(tuán)隊(duì)里重要的組成部門(mén)。

體系完整的企業(yè)可能會(huì)引入市場(chǎng)調(diào)研團(tuán)隊(duì),調(diào)研團(tuán)隊(duì)為營(yíng)銷(xiāo)提供定位信息,設(shè)計(jì)師來(lái)解讀和演繹那些信息。如果調(diào)研團(tuán)隊(duì)能理解設(shè)計(jì)師的工作過(guò)程與其產(chǎn)生共鳴,就有可能促成正確決策甚至產(chǎn)生驚喜的創(chuàng)意作品。

但很多時(shí)候,我們聽(tīng)到了太多這樣的回復(fù):

 

我喜歡它;

我不喜歡它;

它太簡(jiǎn)單了;

它太復(fù)雜了;

它讓我想起某某...

常常一句“我不喜歡”就可以終結(jié)任何設(shè)計(jì)作品。就像當(dāng)初一位IBM的主管第一次看到這個(gè)條紋logo時(shí)嘲弄到說(shuō)“這東西讓我想起格魯吉亞的鎖鏈囚犯”。

每個(gè)人所能感知的信息都不盡相同。

有人既看不到logo的意義,也看不到它的功能。也正因?yàn)檫^(guò)于用喜好而不是專(zhuān)業(yè)去評(píng)判,才讓糟糕的設(shè)計(jì)一直留存于我們的世界。而大眾對(duì)糟糕的設(shè)計(jì)要比對(duì)好設(shè)計(jì)更加熟悉,于是大家習(xí)慣于選擇不好的設(shè)計(jì),因?yàn)楹退麄兂ο嗵帯?/p>

新事物讓人感受到威脅,而舊事物讓人安心。

要判斷一個(gè)設(shè)計(jì)的內(nèi)在價(jià)值,決定性因素不是使用期,而是它所設(shè)定的“品質(zhì)預(yù)期”。這是設(shè)計(jì)師的價(jià)值,也是設(shè)計(jì)師該練就的“知覺(jué)”。

何為知覺(jué)?

我們可以把知覺(jué)暫定為“瞬間的洞悉”。設(shè)計(jì)師在做設(shè)計(jì)決策的時(shí)候大部分都是依賴過(guò)往的知識(shí)儲(chǔ)備以及慣性技能。不斷的嘗試,都是通過(guò)瞬間對(duì)各方向的可能性判斷。

本能、預(yù)感、沖動(dòng)、洞悉之后的綜合“洞悉”,這就是知覺(jué)。

說(shuō)到logo,我們常把logo當(dāng)成品牌價(jià)值傳遞的重要符號(hào)。

它是一面旗幟、一個(gè)簽名、一個(gè)路標(biāo)。大部分時(shí)候,雇主期待logo能描述一個(gè)行業(yè),但歷史上最成功的logo都沒(méi)能做到。蘋(píng)果、勞斯萊斯、可口可樂(lè)、或是IBM等等...不可否認(rèn)的是它們都是歷史上最成功的logo,但它們卻無(wú)法做到能傳遞它們的行業(yè)屬性。因?yàn)?strong>logo遠(yuǎn)不如它所代表的產(chǎn)品重要,它所代表的比它看起來(lái)的樣子更重要。


因?yàn)橹挥衛(wèi)ogo與它所屬的公司、產(chǎn)品、服務(wù)聯(lián)系起來(lái)時(shí),它才具備真正的意義。一流的產(chǎn)品和公司的logo傳遞出一流的形象。反之一個(gè)公司如果是二流的,那么它的logo最終也會(huì)被歸為二流。

 

 

logo首先要告訴人們“是誰(shuí)”,而不是“是什么”。這才是它最基礎(chǔ)且最重要的功能。它所扮演的角色就是“指示”。“簡(jiǎn)潔”是達(dá)成指示的手段。所以設(shè)計(jì)過(guò)程中的特點(diǎn)、好記以及清楚都是需要設(shè)計(jì)師在打磨細(xì)節(jié)前首先要做好的決策。一個(gè)復(fù)雜、挑剔、模糊的設(shè)計(jì)潛藏著自我毀滅性的風(fēng)險(xiǎn)。

 

“好的設(shè)計(jì)帶來(lái)好的生意”。但不可否認(rèn),即使不好的設(shè)計(jì),也可能帶來(lái)好的生意(比如下圖)。如果這樣,還需要好的設(shè)計(jì)么?

好的設(shè)計(jì)可以增添額外的附加價(jià)值,很多時(shí)候,也許光看著它就能給人們帶來(lái)快樂(lè)。它們更尊重感官,并通過(guò)這種友好的感官體驗(yàn),給企業(yè)帶來(lái)回報(bào)。人們更容易記得精美而不是一團(tuán)糟的形象。它折射出一個(gè)考慮周全,目標(biāo)明確的企業(yè),反映了它的產(chǎn)品或者服務(wù)的品質(zhì)。所以,這個(gè)世界需要好的設(shè)計(jì),設(shè)計(jì)師要做的就是用設(shè)計(jì)向世界傳遞一些更有價(jià)值的觀點(diǎn)。這是設(shè)計(jì)師的工作,也是設(shè)計(jì)該有的意義。

「大寶推薦閱讀書(shū)單之《設(shè)計(jì)的意義》」



作者:大寶頻道
鏈接:https://www.zcool.com.cn/article/ZMTQ3ODQzMg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

 

優(yōu)秀的設(shè)計(jì)就是帶給用戶驚喜!

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

優(yōu)秀的產(chǎn)品設(shè)計(jì)是能帶給用戶驚喜的,在不經(jīng)意間讓用戶感受到溫度,也是提升用戶體驗(yàn)的關(guān)鍵。
 
隨著行業(yè)的進(jìn)步,產(chǎn)品設(shè)計(jì)師也在不斷優(yōu)化體驗(yàn),輸出一個(gè)一個(gè)優(yōu)秀的解決方案。近期黑馬哥也發(fā)現(xiàn)了一些比較驚喜的設(shè)計(jì),來(lái)和大家一起欣賞一下吧!
優(yōu)秀的設(shè)計(jì)就是帶給用戶驚喜!
 
 
 
 
體驗(yàn)?zāi)夸?/div>
一、降落傘帶來(lái)的營(yíng)銷(xiāo)廣告
二、動(dòng)效反饋商家備餐過(guò)程
三、這個(gè)廣告驚不驚喜意不意外
四、Banner 廣告的視覺(jué)沉浸感
五、待機(jī)狀態(tài)下的實(shí)時(shí)動(dòng)態(tài)
六、小圖標(biāo)里的細(xì)節(jié)反思
七、輪播式的懸浮設(shè)計(jì)
八、氛圍熱烈的底部標(biāo)簽欄
九、收縮式交互設(shè)計(jì)
十、形象化的進(jìn)度設(shè)計(jì)
 
 
一、降落傘帶來(lái)的營(yíng)銷(xiāo)廣告
在這個(gè)廣告滿天飛的年代,用戶已經(jīng)逐步開(kāi)啟廣告免疫模式,如何提高用戶對(duì)廣告的關(guān)注度至關(guān)重要。
 
近期在體驗(yàn)餓了么時(shí),等待送餐界面中空降一個(gè)降落傘,從左上角飄到右側(cè)懸浮,彈出紅包懸浮廣告。降落傘飄浮的動(dòng)態(tài)過(guò)程吸引了用戶的關(guān)注度,進(jìn)而提高了營(yíng)銷(xiāo)廣告的點(diǎn)擊率,雖然廣告大家都比較反感,但是一個(gè)伴隨著驚喜的廣告也會(huì)讓你放下戒備心理。
優(yōu)秀的設(shè)計(jì)就是帶給用戶驚喜!
 
 
 
 
二、動(dòng)效反饋商家備餐過(guò)程
提升等待過(guò)程對(duì)于用戶體驗(yàn)來(lái)說(shuō)尤為重要,降低用戶等待過(guò)程中的焦慮感,才能讓用戶愿意為此停留。
 
通過(guò)餓了么點(diǎn)餐之后,商家需要一定的時(shí)間完成餐飲的制作,必然需要用戶等待一些時(shí)間。在這個(gè)備餐過(guò)程中,當(dāng)前界面以一個(gè)翻炒動(dòng)效表達(dá),情感化的動(dòng)效不僅提示用戶當(dāng)前狀態(tài),也提升了設(shè)計(jì)表達(dá)的感官體驗(yàn)。
優(yōu)秀的設(shè)計(jì)就是帶給用戶驚喜!
 
 
 
 
三、這個(gè)廣告驚不驚喜意不意外
意料之外的廣告是帶給你驚喜還是反感呢?平臺(tái)為了提高變現(xiàn)能力,各種層出不窮的廣告玩法也讓你猝不及防。
 
之前在體驗(yàn)騰訊視頻 App 時(shí),從閃屏廣告過(guò)度到 Banner 圖的過(guò)程中,經(jīng)歷了多個(gè)廣告新花樣。首先從閃屏切換到自動(dòng)輪播的彈窗模式,再演變到放大版的多個(gè)廣告切片(占 Banner 位呈現(xiàn)),最后再恢復(fù)到 Banner 的正常布局中。這個(gè)過(guò)程無(wú)疑是把廣告的存在感拉滿了,讓你對(duì)廣告的記憶形成硬性要求。
 
無(wú)論這個(gè)廣告設(shè)計(jì)方案是否讓用戶反感,但是這個(gè)呈現(xiàn)的互動(dòng)方式還是比較新穎的,相信廣告的點(diǎn)擊率必然有所提升。
優(yōu)秀的設(shè)計(jì)就是帶給用戶驚喜!
 
 
 
 
四、Banner 廣告的視覺(jué)沉浸感
Banner 圖在產(chǎn)品中是非常普及的,各類(lèi)形式的演變也層出不窮,產(chǎn)品設(shè)計(jì)師都在探索更多可能性。
 
在騰訊視頻 App 動(dòng)漫欄目中,發(fā)現(xiàn)一例很有想法的 Banner 表現(xiàn)。Banner 上面新增了一個(gè)懸浮的火焰燃燒的動(dòng)效,提升了整體的氛圍感,動(dòng)效與 Banner 畫(huà)面完美貼合,視覺(jué)沉浸感十足。
優(yōu)秀的設(shè)計(jì)就是帶給用戶驚喜!
 
 
 
 
五、待機(jī)狀態(tài)下的實(shí)時(shí)動(dòng)態(tài)
隨時(shí)讓用戶感受到你的存在,才能讓人感到安心,服務(wù)過(guò)程中狀態(tài)實(shí)時(shí)可見(jiàn)至關(guān)重要。
 
通過(guò)餓了么點(diǎn)餐之后,就算處于待機(jī)狀態(tài)時(shí),只要點(diǎn)亮屏幕即可看到當(dāng)前出餐狀態(tài)??梢暬膱D形結(jié)合時(shí)間提醒,讓狀態(tài)一目了然,使得點(diǎn)餐到用餐之間的過(guò)程更有用戶可控性。
優(yōu)秀的設(shè)計(jì)就是帶給用戶驚喜!
 
 
 
 
六、小圖標(biāo)里的細(xì)節(jié)反思
產(chǎn)品中有很多輔助功能/信息等表達(dá)的圖標(biāo),既要能準(zhǔn)確表達(dá)主題,也要讓用戶易于理解。
 
在汽車(chē)之家 App 發(fā)現(xiàn)了一個(gè)值得反思的圖標(biāo)案例,在掃一掃的圖標(biāo)中結(jié)合了汽車(chē)外形輪廓,不僅不會(huì)影響掃描的功能表達(dá),也進(jìn)一步表達(dá)了該功能的差異。和別的產(chǎn)品掃描功能不同,這個(gè)是對(duì)準(zhǔn)汽車(chē)進(jìn)行掃描,體現(xiàn)出了業(yè)務(wù)的差異化。一枚小小的圖標(biāo)體現(xiàn)出了設(shè)計(jì)師的能力,用最簡(jiǎn)單的方式表現(xiàn)自身產(chǎn)品的差異,以此提升用戶的操作體驗(yàn)。
優(yōu)秀的設(shè)計(jì)就是帶給用戶驚喜!
 
 
 
 
七、輪播式的懸浮設(shè)計(jì)
懸浮設(shè)計(jì)非常普及,因?yàn)檎急刃『突瑒?dòng)頁(yè)面會(huì)隱藏,對(duì)用戶的干擾比較小。
 
最近在芒果 TV 首頁(yè)發(fā)現(xiàn)了懸浮窗口的輪播式表達(dá),芒果卡和活動(dòng)中心會(huì)自動(dòng)輪播顯示(也能手動(dòng)切換)。讓我們對(duì)懸浮窗口的設(shè)計(jì)又多了一種設(shè)計(jì)理解,可以呈現(xiàn)更多不同內(nèi)容的表達(dá),提升了窗口的利用率。
優(yōu)秀的設(shè)計(jì)就是帶給用戶驚喜!
 
 
 
 
八、氛圍熱烈的底部標(biāo)簽欄
底部標(biāo)簽欄的設(shè)計(jì)在圖標(biāo)創(chuàng)意層面發(fā)揮較多,各類(lèi)風(fēng)格的圖標(biāo)讓該欄目更加豐富多彩,除此之外也有在背景層渲染氛圍的案例。
 
近期恰逢芒果 TV 十周年之際,在底部標(biāo)簽欄背景層也加強(qiáng)了氛圍感。豐富多彩的元素和配色,結(jié)合主題化的圖標(biāo)設(shè)計(jì),使得整體氛圍感拉滿。
優(yōu)秀的設(shè)計(jì)就是帶給用戶驚喜!
 
 
 
 
九、收縮式交互設(shè)計(jì)
通過(guò)交互方式應(yīng)對(duì)用戶操作過(guò)程,特別是在滑動(dòng)界面時(shí),交互方式的優(yōu)化可以降低干擾,提高當(dāng)前界面的利用率。
 
在 Blurrr App 創(chuàng)作界面,默認(rèn)以 3D 動(dòng)態(tài)圖標(biāo)展示“開(kāi)始創(chuàng)作”按鈕,當(dāng)滑動(dòng)界面時(shí)按鈕會(huì)收縮展示。通過(guò)收縮式的交互設(shè)計(jì),讓界面可以展示更多內(nèi)容,也不會(huì)影響用戶點(diǎn)擊按鈕進(jìn)行創(chuàng)作。即通過(guò) 3D 動(dòng)效加強(qiáng)了功能的曝光度,又通過(guò)收縮式交互提高了內(nèi)容的展示空間,可謂是一舉多得的設(shè)計(jì)解決方案。
優(yōu)秀的設(shè)計(jì)就是帶給用戶驚喜!
 
 
 
 
十、形象化的進(jìn)度設(shè)計(jì)
進(jìn)度設(shè)計(jì)是反饋狀態(tài)變化的關(guān)鍵,通過(guò)可視化的表達(dá)讓用戶一目了然,提高用戶對(duì)服務(wù)過(guò)程的把控。
 
當(dāng)用戶通過(guò)攜程旅行 App 訂票后,在行程訂單界面可以看到列車(chē)行駛狀態(tài)的進(jìn)度提示。通過(guò)可視化的列車(chē)形象的表達(dá)了行駛狀態(tài),讓用戶清晰的看到行駛方向和抵達(dá)站點(diǎn)示意。不僅信息傳遞高效,形象的表達(dá)也使得感官體驗(yàn)更佳。
優(yōu)秀的設(shè)計(jì)就是帶給用戶驚喜!
 
 
 
 
小結(jié)
優(yōu)秀的產(chǎn)品總能在細(xì)微之處帶給你驚喜,讓你感受到產(chǎn)品服務(wù)的情感化和溫度。本文觀點(diǎn)僅代表個(gè)人體會(huì),希望可以和大家一起共勉。
 
作者:黑馬青年
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTYxODE4MA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析

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

 
 
 
面向企業(yè)用戶、注重效率與管理、解決企業(yè)痛點(diǎn)、技術(shù)與服務(wù)并重、決策過(guò)程復(fù)雜
B端關(guān)注的是如何通過(guò)技術(shù)手段賦能企業(yè),提升其業(yè)務(wù)處理能力和管理效能,是企業(yè)間或企業(yè)內(nèi)部運(yùn)作不可或缺的工具和服務(wù)。
彈窗-聚焦任務(wù)處理與即時(shí)提醒的高效交互工具;作為一種常見(jiàn)的交互設(shè)計(jì)元素,在提升用戶體驗(yàn)和效率方面扮演著重要角色。
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類(lèi)型及其實(shí)戰(zhàn)案例分析
 
 
 


作者:Miao_C
鏈接:https://www.zcool.com.cn/article/ZMTYyNDEwMA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

 

每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化

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

隨著同類(lèi)型產(chǎn)品越來(lái)越多,更有體驗(yàn)感和個(gè)性化的設(shè)計(jì)才能打動(dòng)用戶,成為被選擇的對(duì)象。作為產(chǎn)品設(shè)計(jì)師我們?cè)诓粩嗵剿骱蛣?chuàng)新,希望以更好的設(shè)計(jì)表達(dá)來(lái)解決業(yè)務(wù)場(chǎng)景,為提升用戶體驗(yàn)而助力。
 
本期以個(gè)性化設(shè)計(jì)為出發(fā)點(diǎn),給大家?guī)?lái)十個(gè)不錯(cuò)的設(shè)計(jì)方案,希望可以帶給大家更多設(shè)計(jì)靈感。
每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化
 
 
 
 
體驗(yàn)?zāi)夸?/div>
一、讓你感受溫暖的年度報(bào)告
二、趣味性的圖標(biāo)設(shè)計(jì)
三、通過(guò) AI 重新定義搜索體驗(yàn)
四、動(dòng)態(tài)化功能引導(dǎo)產(chǎn)品升級(jí)
五、動(dòng)態(tài)優(yōu)惠券更有吸引力
六、人性化的溫馨提示設(shè)計(jì)
七、自定義形象的年度報(bào)告
八、個(gè)性化的主界面設(shè)置
九、情感化的表情設(shè)置
十、空間感的 Banner 輪播體驗(yàn)
 
 
 
一、讓你感受溫暖的年度報(bào)告
這段時(shí)間相信大家經(jīng)常使用的產(chǎn)品都曬出了年度報(bào)告,設(shè)計(jì)風(fēng)格與互動(dòng)形式也層出不窮,哪一個(gè)產(chǎn)品的設(shè)計(jì)風(fēng)格最打動(dòng)你呢?
 
在我刷到的年度報(bào)告中,攜程旅行的年度旅行報(bào)告印象最深刻。毛茸茸的設(shè)計(jì)風(fēng)格在寒冷的冬季顯得格外溫暖,圖標(biāo)、字體、背景、按鈕等都以此風(fēng)格進(jìn)行設(shè)計(jì),整體效果非常細(xì)膩柔軟,你也去體驗(yàn)感受一下吧!
每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化
 
 
 
 
二、趣味性的圖標(biāo)設(shè)計(jì)
圖標(biāo)在產(chǎn)品中主要以各種設(shè)計(jì)風(fēng)格形成差異,打造出匹配品牌風(fēng)格的個(gè)性設(shè)計(jì),除此以外,我們也要多在圖形創(chuàng)意表達(dá)層面進(jìn)行探索。
 
最近在使用極兔速遞小程序時(shí),除了圖標(biāo)設(shè)計(jì)的風(fēng)格獨(dú)特以外,多個(gè)場(chǎng)景的圖形創(chuàng)意也很有意思。比如下單寄件、掃碼寄件和個(gè)人中心的圖標(biāo)等,趣味性的設(shè)計(jì)表達(dá)讓人印象深刻,以個(gè)性化的圖形創(chuàng)意吸引用戶的注意力。
每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化
 
 
 
 
三、通過(guò) AI 重新定義搜索體驗(yàn)
AI 化已經(jīng)成為眾多行業(yè)未來(lái)需要對(duì)接的方向,任何行業(yè)都可以通過(guò) AI 進(jìn)行重新定義,帶給用戶 AI 化的體驗(yàn)。
 
以前在騰訊視頻 App 搜索時(shí)都是以關(guān)鍵詞為主,現(xiàn)在可以通過(guò) AI 搜與騰訊元寶 AI 助手交流,以對(duì)話式的方式找到感興趣的影片。通過(guò) AI 重新定義了搜索方式,讓用戶感受到屬于 AI 化的體驗(yàn)感。
每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化
 
 
 
 
四、動(dòng)態(tài)化功能引導(dǎo)產(chǎn)品升級(jí)
引導(dǎo)用戶升級(jí)產(chǎn)品才能帶來(lái)新的功能和服務(wù)升級(jí),如何吸引用戶進(jìn)行升級(jí)變得至關(guān)重要。
 
高德地圖為了引導(dǎo)用戶點(diǎn)擊升級(jí),以升級(jí)后帶來(lái)的更優(yōu)功能和服務(wù)為吸引點(diǎn),通過(guò)動(dòng)態(tài)輪播的形式表現(xiàn)升級(jí)彈窗。動(dòng)態(tài)化的功能引導(dǎo)可以讓用戶提前了解新版本的信息,提高用戶升級(jí)的選擇性。
每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化
 
 
 
 
五、動(dòng)態(tài)優(yōu)惠券更有吸引力
各種優(yōu)惠券、打折券、新人紅包等讓用戶開(kāi)始有點(diǎn)麻木,也不一定會(huì)領(lǐng)取和使用,如何增加其吸引力就變得越來(lái)越重要了。
 
近期高德地圖打車(chē)欄目的營(yíng)銷(xiāo)活動(dòng)中,為了展示更多類(lèi)型的打車(chē)券、打車(chē)金等,通過(guò)動(dòng)態(tài)輪播的方式進(jìn)行設(shè)計(jì)表達(dá)。相較于靜態(tài)展示而言,不僅解決了內(nèi)容展示的數(shù)量問(wèn)題,動(dòng)態(tài)的方式也更有吸引力,增加用戶的參與概率。
每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化
 
 
 
 
六、人性化的溫馨提示設(shè)計(jì)
溫馨提示雖然不一定管用,但是依然可以讓用戶感受到人性化的服務(wù),增加用戶對(duì)產(chǎn)品的好感度。
 
在比較晚的時(shí)間段使用洪恩識(shí)字 App 時(shí),會(huì)出現(xiàn)溫馨提示的彈窗,勸導(dǎo)用戶注意休息時(shí)間。人性化的設(shè)計(jì)可以輔助家長(zhǎng)管理孩子的使用習(xí)慣,提醒注意時(shí)間管理和作息規(guī)律。
每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化
 
 
 
 
七、自定義形象的年度報(bào)告
年度報(bào)告的形式豐富多樣,都是以用戶個(gè)人數(shù)據(jù)生成,如何才能更加個(gè)性化,成為了設(shè)計(jì)表達(dá)的重點(diǎn)。
 
網(wǎng)易云音樂(lè)的年度聽(tīng)歌報(bào)告可以自定義形象,可以針對(duì)身體的上中下三個(gè)部分進(jìn)行定制,以個(gè)性化的形象開(kāi)啟專(zhuān)屬的聽(tīng)歌報(bào)告。整體表達(dá)很有設(shè)計(jì)感,圖形、排版與配色都很不錯(cuò),快去生成屬于你的聽(tīng)歌報(bào)告吧!
每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化
 
 
 
 
八、個(gè)性化的主界面設(shè)置
對(duì)于感官體驗(yàn)每個(gè)人的喜好各不相同,為了滿足各自的選擇需求,個(gè)性化的設(shè)置變得尤為重要。
 
體重小本 App 的主界面,可以通過(guò)主題皮膚設(shè)置背景、配色等,提供了煥彩粉和清爽藍(lán)的多款選擇,用戶也可以自定義圖片進(jìn)行設(shè)置。通過(guò)個(gè)性化的設(shè)置帶給用戶更多選擇性,滿足不同的感官體驗(yàn)需求。
每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化
 
 
 
 
九、情感化的表情設(shè)置
通過(guò)表情設(shè)計(jì)輔助可視化表達(dá),其中表情符號(hào)的運(yùn)用較為常見(jiàn),豐富多樣的表情選擇更能滿足用戶需求。
 
體重小本 App 體重?cái)?shù)據(jù)展示中,以不同表情來(lái)體現(xiàn)體重?cái)?shù)據(jù)的變化,情感化的表達(dá)讓變化的呈現(xiàn)更加貼切。產(chǎn)品提供了多款表情供用戶選擇,用戶也可以設(shè)置自定義表情,情感化的設(shè)置讓體驗(yàn)感變得更加豐富。
每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化
 
 
 
 
十、空間感的 Banner 輪播體驗(yàn)
輪播 Banner 圖在設(shè)計(jì)表達(dá)、布局結(jié)構(gòu)、輪播形式等層面都可以進(jìn)行創(chuàng)意發(fā)揮,有特點(diǎn)的形式更能吸引注意力,以此提高 Banner 的點(diǎn)擊率。
 
最近在體驗(yàn)芒果 TV 時(shí),發(fā)現(xiàn)首頁(yè) Banner 的表現(xiàn)形式以分層式表達(dá),輪播過(guò)程中更有空間感。將人物與背景進(jìn)行分層設(shè)計(jì),輪播時(shí)分前后入場(chǎng),伴隨著縮放等動(dòng)效表達(dá),營(yíng)造出更強(qiáng)的空間感。
每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化
 
 
 
 
小結(jié)
設(shè)計(jì)思維的轉(zhuǎn)變離不開(kāi)大量?jī)?yōu)秀案例的輔助,對(duì)于產(chǎn)品設(shè)計(jì)師來(lái)說(shuō),體驗(yàn)和總結(jié)的訓(xùn)練至關(guān)重要。希望本期的分享可以帶給大家一些啟發(fā),觀點(diǎn)屬于個(gè)人見(jiàn)解,不足之處歡迎大家留言補(bǔ)充。
 
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。
 


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTY1MDA0OA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)

天宇

最近看汪曾祺的《嘆息橋》中的一句話,我必須分享給你。緣起我在人群中看見(jiàn)你,緣散我看見(jiàn)你在人群中。是的我想你在人群中看到我。這就是最初我分享這系列設(shè)計(jì)文章的初衷。
 
慢慢發(fā)現(xiàn)其實(shí)分享也是一件快樂(lè)的事情、而且在分享的過(guò)程中我自己也收獲了很多。而且對(duì)設(shè)計(jì)的理解也更深了。更快樂(lè)的是收獲了一群一起同行的小伙伴、這個(gè)還挺開(kāi)心。和他們一起在群里吹水、一起吐槽。一起討論問(wèn)題、那真的是快樂(lè)無(wú)邊。哈哈哈
 
上面扯多了。我們開(kāi)始今天的內(nèi)容。今天內(nèi)容分三部分、第一部分內(nèi)容總結(jié)是對(duì)我寫(xiě)的這個(gè)系列文章每一篇文章內(nèi)容和核心的小總結(jié)。第二部分這個(gè)系列的文章頁(yè)算是告一段落了、下一階段我會(huì)做些什么。第三部分分享一些我寫(xiě)文章的感受、然后煽煽情。
 
1、內(nèi)容總結(jié)
因?yàn)樵趯?xiě)這個(gè)系列的文章時(shí)我加入了很多擴(kuò)展知識(shí)。希望告訴你更多。這里我會(huì)把主要的這個(gè)系列的知識(shí)總結(jié)一下讓你盡量一次看完。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
1.1、登陸頁(yè)面
 
最近就在做我們系統(tǒng)的登陸頁(yè)面優(yōu)化?;仡^我會(huì)寫(xiě)一個(gè)項(xiàng)目總結(jié)給你們看。這里介紹一下B端登陸頁(yè)面該怎么去做。其實(shí)還挺簡(jiǎn)單了。因?yàn)楝F(xiàn)在主流的布局就那幾個(gè)。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
登陸頁(yè)面:布局分為三種;居左、居右、居中
頁(yè)面元素:導(dǎo)航、登錄框、背景(裝飾元素)、互聯(lián)網(wǎng)信息。
導(dǎo)航高度:68px或48px、文字大?。?4(大部分)16(也可以)
登錄框大?。捍笮〕叽绮唤y(tǒng)一、沒(méi)有固定的尺寸。可以根據(jù)自己和領(lǐng)導(dǎo)的喜好決定。對(duì)還有要承載的內(nèi)容多少。
登錄方式:掃碼、手機(jī)號(hào)、賬號(hào)、第三方
標(biāo)題切換字號(hào):我喜歡用26px(也要其他的16、/18、/20)
輸入框高度:48px
按鈕文字和高度:16px、和輸入框高度一直就行。
背景可以是配的插畫(huà)(這種最簡(jiǎn)單)、一般都是科技風(fēng)
底部要不就是單純的互聯(lián)網(wǎng)信息。要不就是快捷入口、聯(lián)系方式什么。這個(gè)就不多說(shuō)了正常排版就行。
 
1.2、篩選
 
篩選相對(duì)是很簡(jiǎn)單的部分把、因?yàn)槟阒苯佑靡?guī)范里的組件。雖然不會(huì)很優(yōu)秀、但是剛重要的是不會(huì)出什么錯(cuò)誤。主要是就大廠規(guī)范能夠快速的幫你解決問(wèn)題。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
篩選的意義:定位數(shù)據(jù)、縮短查詢路徑、數(shù)據(jù)內(nèi)容分類(lèi)
 
篩選類(lèi)型:基礎(chǔ)篩選組件(就是我們常見(jiàn)的頁(yè)面頂部的篩選)、高級(jí)篩選(就是那些需要你定義想一想的篩選部分)
 
篩選布局:頂部和左側(cè)
 
篩選樣式:平鋪;折疊;Tab篩選;單側(cè)選擇;表頭;綜合
 
1.3、柵格
 
這里其實(shí)還簡(jiǎn)單的、首先你要明白柵格在我們的設(shè)計(jì)里面很重要。你不用當(dāng)然也可以呀。但是你想要做的更好那就用起來(lái)你會(huì)有意外的收獲。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
怎么用:直接看ant design、TDesign、阿科desing的規(guī)范就行、寫(xiě)的很清楚。
 
注意點(diǎn):不要硬套、我們要根據(jù)自己的系統(tǒng)去自己定制。比如我們系統(tǒng)、用的是ant design的框架、但是我們的網(wǎng)格系統(tǒng)是自己定制的。因而我們的邊距不是24px、我們是20px
 
1.4、顏色
 
這部分相對(duì)來(lái)說(shuō)是我自己的弱項(xiàng)、在寫(xiě)當(dāng)時(shí)的文章的時(shí)候也是收獲頗多的。明白了大廠規(guī)范是怎么確定自己色彩設(shè)計(jì)規(guī)范的。也清楚了自己應(yīng)該怎么去規(guī)定自己的設(shè)計(jì)規(guī)范。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
主色確定:常見(jiàn)的方法、1、用自己品牌logo的顏色;2、用行業(yè)色
 
配色確定:我一般是找競(jìng)品、或者優(yōu)秀的配色方案、來(lái)確定自己的。多參考大廠的配色方案。雖然不全是好的。但是好的還是站大多數(shù)的。
 
大廠色彩:這里我分享了大廠的色彩是怎么去確定的、如何去確定??梢匀タ纯础N以谧约旱墓ぷ髦猩实膽?yīng)用就參考了ant Design的色彩應(yīng)用方式定制的。
 
1.5、字體
 
字體部分我覺(jué)得最有意思是的是分享了、我們宋體、楷體、隸屬、甲骨的發(fā)展歷史和由來(lái)。還有就是如何去設(shè)計(jì)一款自己的字體。還有后臺(tái)字體規(guī)范的制定
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
中國(guó)文字:這里中國(guó)文字的發(fā)展歷史、所有字體的產(chǎn)生都是有自己發(fā)展的歷史原因的。很有意思。建議你看看、可以當(dāng)做你喝酒吹水的談資。
 
字體規(guī)范:我們大部分的字體會(huì)采用黑體、可讀性強(qiáng)、親和、現(xiàn)代、清晰。
 
字號(hào):最新的字體12px、正文、14px、通過(guò)+2, +4,+8,+12,+16 的步數(shù)增長(zhǎng)規(guī)律
 
行高:通過(guò)邏輯得到這樣一個(gè)公式:「 行高 = 字號(hào) + n 」,8 作為變量正好同時(shí)滿足與 1.5 倍的「 14px & 16px 」常用字號(hào)行高保持一致,總體文字間隙穩(wěn)定呼吸,行高空間較一致得出計(jì)算公式:「line-height = font size+8」
 
字重(就是字粗):建議使用兩種常規(guī)和加粗(在前端里一般就是400和500)
 
顏色:我是主張帶有色彩傾向的顏色應(yīng)用的。根據(jù)字體樣式的設(shè)計(jì)原則,制定了簡(jiǎn)易好記的透明度數(shù)值區(qū)間并且將該字色與界面系統(tǒng)的色彩系統(tǒng)結(jié)合,文字顯示色彩對(duì)比滿足至少1:4.5( AA級(jí)別)。且驗(yàn)證了其中的實(shí)用性,共分為亮暗兩種模式,4 個(gè)色階。
 
1.6、ICON(圖標(biāo))
 
你要統(tǒng)一風(fēng)格成套的去找參考和應(yīng)用。在我們的系統(tǒng)里我是自己畫(huà)icon的然后傳到阿里巴巴矢量圖庫(kù)讓開(kāi)發(fā)直接引用。這個(gè)是自己累點(diǎn)、但是可以保障實(shí)現(xiàn)效果。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
設(shè)計(jì)原則:準(zhǔn)確、簡(jiǎn)單、節(jié)奏、愉悅。
 
設(shè)計(jì)實(shí)戰(zhàn):采用柵格
我是用的阿里巴巴矢量圖庫(kù)的設(shè)計(jì)規(guī)范、因?yàn)槲乙獋鞯竭@個(gè)平臺(tái)應(yīng)用
 
ICON分類(lèi):交互性圖標(biāo)、裝飾性圖標(biāo)、說(shuō)明性圖標(biāo)
 
1.7、按鈕
 
按鈕我覺(jué)得這部分是相對(duì)簡(jiǎn)單的、也是要做到風(fēng)格的統(tǒng)一。直接用大廠組件然后根據(jù)自己平臺(tái)的風(fēng)格、不如圓角的大小其他的倒是沒(méi)什么了。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
常規(guī)按鈕:次要按鈕、主要按鈕、文字按鈕、圖標(biāo)按鈕
 
按鈕狀態(tài):可用、禁用、加載、懸浮
 
尺寸:把按鈕分成:迷你、小、中、大,四種尺寸。高度分別為:24px/28px/32px/36px。推薦及默認(rèn)為尺寸「中」。
 
樣式:各個(gè)規(guī)范對(duì)按鈕形狀的規(guī)范基本都一樣。提供長(zhǎng)方形、正方形、圓角長(zhǎng)方形、圓形四種形狀。
 
 
布局:這里分享了兩個(gè)概念、古登堡法則、費(fèi)茨定律、告訴你我們?yōu)槭裁催@么排版。對(duì)產(chǎn)品和甲方很有用、哈哈、這是我的秘訣。
 
1.8、彈窗
 
后臺(tái)彈窗是一個(gè)很復(fù)雜的內(nèi)容、但是也是一個(gè)相對(duì)很好處理的部分。只要你做好規(guī)范這部分、簡(jiǎn)直就是一點(diǎn)開(kāi)胃小菜。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
彈窗是一個(gè)我頭痛的問(wèn)題因?yàn)椴惶靡?guī)范。但是我還是把這個(gè)彈窗系統(tǒng)、在我們的體系中形成了一個(gè)小的規(guī)范。感謝領(lǐng)導(dǎo)、感謝前段端的龍哥。
 
我們把前段粗略的分為400px、600、800、1000、最大、廣告。業(yè)務(wù)里我們會(huì)采用4、/6、/8、/1、最大、推廣和通知我們就統(tǒng)一的尺寸。
 
1.9、表單
 
什么是表單:我理解表單就是系統(tǒng)為和用戶進(jìn)行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺(tái)產(chǎn)品中對(duì)我們數(shù)據(jù)做的增、刪、改、查、驗(yàn)都可以通過(guò)表單完成。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
我們?cè)诤笈_(tái)系統(tǒng)中、大部分的場(chǎng)景都會(huì)使用上表單。信息采集呀、編輯數(shù)據(jù)呀等。在表單設(shè)計(jì)時(shí)要遵循的原則、簡(jiǎn)潔明了、清晰高效、適應(yīng)業(yè)務(wù)、即時(shí)反饋。
 
表單的構(gòu)成結(jié)構(gòu)、基本都是由、標(biāo)簽、域、提示、操作按鈕這四個(gè)部分構(gòu)成的。
 
表單布局在表單中我們采用多種布局方式。信息分組、內(nèi)容列表、標(biāo)簽頁(yè)、分步驟。
 
1.10、表格
 
B端設(shè)計(jì)中,對(duì)數(shù)據(jù)瀏覽、操作、過(guò)濾、展示是最高效的。這你就不用質(zhì)疑了。因?yàn)榻Y(jié)構(gòu)簡(jiǎn)單、精準(zhǔn)高效、數(shù)據(jù)形式豐富。
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
表格是用來(lái)收集、整理、組織、分析數(shù)據(jù)的二維矩陣。它由內(nèi)、外兩部分組成。其中,內(nèi)部包含表頭、表體、底欄等。外部包含標(biāo)題、篩選區(qū)、操作按鈕區(qū)等。
 
表格的類(lèi)型:基礎(chǔ)表格、樹(shù)形、子表格、交叉表格、圖表表格、卡片表格
 
表格的樣式:網(wǎng)格型、水平線型、斑馬紋、自由形式
 
進(jìn)階的一些知識(shí)就是表格數(shù)據(jù)的優(yōu)化和表格的交互知識(shí)了。想了解去看更詳細(xì)的我的文章11表格設(shè)計(jì)和12表格優(yōu)化項(xiàng)目實(shí)戰(zhàn)。
 
1.11、大廠規(guī)范
 
如果你是一個(gè)小廠B端設(shè)計(jì)師、剛好沒(méi)有自己平臺(tái)的設(shè)計(jì)規(guī)范。那就去直接用的場(chǎng)的設(shè)計(jì)規(guī)范。去用沒(méi)問(wèn)題的。大廠那么多的牛逼設(shè)計(jì)給你做好了你不用。都塞到嘴巴上、不吃就不給面了。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
在使用大廠的設(shè)計(jì)規(guī)范時(shí)然后慢慢的積累自己平臺(tái)的設(shè)計(jì)規(guī)范。逐漸的你就會(huì)形成一個(gè)屬于你們自己平臺(tái)業(yè)務(wù)的高質(zhì)量設(shè)計(jì)規(guī)范了。
 
2、計(jì)劃
 
這個(gè)基礎(chǔ)系列的文章就這樣寫(xiě)結(jié)束掉吧、希望可以對(duì)你的B端設(shè)計(jì)有所幫助。之后我會(huì)寫(xiě)二個(gè)系列的文章、去分享我理解的B端設(shè)計(jì)。
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
第一個(gè)系列是B端基礎(chǔ)設(shè)計(jì)的加強(qiáng)版、B端高手。B端高手是會(huì)寫(xiě)我的實(shí)戰(zhàn)里是怎么去做的。其實(shí)就是我的設(shè)計(jì)項(xiàng)目復(fù)盤(pán)。
 
第二個(gè)系列就隨便的去分享一些設(shè)計(jì)知識(shí)。比如哪些什么什么原理呀、什么什么法則呀、在設(shè)計(jì)里的應(yīng)用。而且會(huì)提出和討論一些設(shè)計(jì)問(wèn)題。
 
3、寫(xiě)在最后
 
分別是為了更好的相見(jiàn)、我一直希望我的文章可以幫到你。慢慢來(lái)路還很長(zhǎng)、總是要一步一步的來(lái)。很快我們會(huì)再次相見(jiàn)。我是KING(國(guó)王)
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
新的開(kāi)始見(jiàn).......
 
注解:標(biāo)題的40000余字也好、50000字也好都是說(shuō)的我這個(gè)系列總計(jì)的字?jǐn)?shù)、因?yàn)橄胱屇銈兛吹健?/div>

作者:彪形大漢pro
鏈接:https://www.zcool.com.cn/article/ZMTYyMTEyNA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)

天宇

俗話說(shuō):“細(xì)節(jié)決定成敗”,細(xì)節(jié)的把控至關(guān)重要,這也是設(shè)計(jì)師能力的代表。隨著項(xiàng)目經(jīng)驗(yàn)的積累和專(zhuān)業(yè)能力的成熟,我們對(duì)于設(shè)計(jì)原則、設(shè)計(jì)細(xì)節(jié)和設(shè)計(jì)經(jīng)驗(yàn)的沉淀也會(huì)越來(lái)越多,設(shè)計(jì)輸出也會(huì)因?yàn)檫@些細(xì)節(jié)而顯得更優(yōu)秀。
 
黑馬哥結(jié)合職場(chǎng)經(jīng)驗(yàn)和教學(xué)經(jīng)驗(yàn),總結(jié)了 120+ 設(shè)計(jì)原則、設(shè)計(jì)細(xì)節(jié)和設(shè)計(jì)經(jīng)驗(yàn)的案例分析。案例內(nèi)容涉及布局、圖標(biāo)、按鈕、文本、配色、配圖、規(guī)范、交互和設(shè)計(jì)經(jīng)驗(yàn)等,目的是為了讓我們的設(shè)計(jì)更規(guī)范、更專(zhuān)業(yè)、有細(xì)節(jié)、有亮點(diǎn)、有思維。
 
今天先挑選其中的 10 個(gè)案例和大家一起交流一下。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
分享目錄
 
1. 圓角圖片對(duì)齊時(shí)不要完全左對(duì)齊
2. 同屬性版塊統(tǒng)一圖標(biāo)設(shè)計(jì)規(guī)范
3. 數(shù)據(jù)表達(dá)特殊化
4. 預(yù)估好信息呈現(xiàn)的最大值
5. 慎用高飽和度的顏色
6. 通過(guò)蒙版降低信息干擾度
7. 利用背景色突出小圖標(biāo)的空間占比
8. 漸變最好選擇近似色
9. 保持按鈕可讀性
10. 淺色背景不適合添加投影
 
 
 
1. 圓角圖片對(duì)齊時(shí)不要完全左對(duì)齊
 
設(shè)計(jì)中遇到圖片帶有圓角時(shí),文字排版不適合完全基于圖片左對(duì)齊,視覺(jué)上會(huì)顯得文字太靠左,失去視覺(jué)平衡度。適當(dāng)預(yù)留間距視覺(jué)上更平衡,版面結(jié)構(gòu)也會(huì)更穩(wěn)重。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
2. 同屬性版塊統(tǒng)一圖標(biāo)設(shè)計(jì)規(guī)范
 
同屬性版塊需要統(tǒng)一圖標(biāo)設(shè)計(jì)規(guī)范,不要出現(xiàn)風(fēng)格混搭,遵循圖標(biāo)設(shè)計(jì)的十大統(tǒng)一性:風(fēng)格、大小、粗細(xì)、圓角、比例、透視、角度、疏密、間距、正負(fù)形。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
3. 數(shù)據(jù)表達(dá)特殊化
 
在可視化的場(chǎng)景中,針對(duì)一些特殊數(shù)據(jù)展示的時(shí)候,可以選擇特殊字體增加設(shè)計(jì)感。再通過(guò)字體大小對(duì)比、字重對(duì)比、顏色深淺對(duì)比等來(lái)突出數(shù)據(jù)。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
4. 預(yù)估好信息呈現(xiàn)的最大值
 
在進(jìn)行 UI 設(shè)計(jì)時(shí),需要預(yù)估好當(dāng)前位置所能承載的最大值,不能只在理想化的狀態(tài)內(nèi)設(shè)計(jì)。雖然簡(jiǎn)化的內(nèi)容看起來(lái)更美觀,但是最大值下的設(shè)計(jì)思考才能避免上線后的誤差。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
5. 慎用高飽和度的顏色
 
界面設(shè)計(jì)配色需要考慮用戶長(zhǎng)時(shí)間的預(yù)覽體驗(yàn),高飽和度的配色不適合長(zhǎng)時(shí)間觀看,容易造成視覺(jué)疲勞。適當(dāng)降低飽和度使得配色更加舒適,有利于提升用戶預(yù)覽體驗(yàn)度。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
6. 通過(guò)蒙版降低信息干擾度
 
在圖片上面展示文案時(shí),需要考慮圖片對(duì)于文案信息的干擾度。為了防止復(fù)雜場(chǎng)景的圖片干擾信息傳遞,需要在信息區(qū)域添加漸變蒙版,以此來(lái)降低對(duì)于信息的干擾度。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
7. 利用背景色突出小圖標(biāo)的空間占比
 
需要突出圖標(biāo)的空間占比時(shí),放大圖標(biāo)會(huì)顯得視覺(jué)焦點(diǎn)太強(qiáng),也容易暴露圖標(biāo)繪制的缺點(diǎn)而顯得粗糙。添加統(tǒng)一的造型和背景色,可以突出小圖標(biāo)的空間占比,提升感官體驗(yàn)。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
8. 漸變最好選擇近似色
 
在主界面或者一些特殊場(chǎng)景中,需要對(duì)按鈕添加漸變色時(shí),最好選擇近似色等鄰近范圍的配色,會(huì)使得視覺(jué)效果更加和諧、舒適。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
9. 保持按鈕可讀性
 
按鈕設(shè)計(jì)需要考慮在不同環(huán)境下的適應(yīng)度,確保用戶可以一目了然的發(fā)現(xiàn)它。在白色背景、淺色背景、深色背景中都要形成配色對(duì)比,始終保持按鈕與背景的高對(duì)比度和可讀性。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
10. 淺色背景不適合添加投影
 
淺色背景的卡片、按鈕、標(biāo)簽、圖片或者其他元素等,在白色背景中都不適合添加投影。投影使得視覺(jué)效果對(duì)比模糊,畫(huà)面表現(xiàn)不夠干凈、通透,去掉投影反而更加清晰自然。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
小結(jié)
 
以上案例屬于 120+ 案例中隨機(jī)挑選的 10 個(gè)作為示意,該系列案例也會(huì)持續(xù)更新。希望大家可以從這些案例中獲得一些設(shè)計(jì)經(jīng)驗(yàn),助力設(shè)計(jì)輸出,能夠做出更好的設(shè)計(jì)作品。經(jīng)驗(yàn)屬于個(gè)人職場(chǎng)和教學(xué)中的沉淀,如有不足歡迎留言補(bǔ)充。


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTYyNjg0NA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

日歷

鏈接

個(gè)人資料

存檔