91成人精品,神马影院东京干,国产一级做a爰片久久 亚洲日韩欧美一区二区三区_国产AV无码专区亚洲AV

首頁(yè)

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

天宇 B端ui設(shè)計(jì)文章及欣賞

色彩在我們?nèi)粘TO(shè)計(jì)中起著定生死的作用,它是設(shè)計(jì)的靈魂,舒適的色彩搭配可以讓設(shè)計(jì)師一遍定稿,感覺(jué)在自己的設(shè)計(jì)生涯中,大部分都是在與色彩的博弈中度過(guò)的,雖然客戶(hù)可能不懂色彩原理,可是客戶(hù)天生都是色彩的感受家,什么樣的色彩搭配美,通常他們瞄一眼就會(huì)有定論,不用你去辯解太多,不好的搭配,縱使有千萬(wàn)種理由,也說(shuō)服不了客戶(hù),所以好好研究色彩以及每一種色彩傳遞的情感對(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的色彩模型顏色顯示上就黯淡了不少,但是要印刷的話(huà),就必須轉(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)系在一起,給人以活力充沛和充滿(mǎ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)用戶(hù)是吸引年輕用戶(hù)和創(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)的初衷,給用戶(hù)安全的存儲(chǔ)服務(wù)。
7大色彩技巧讓你界面更吸睛
 
 
 
 
7、紫色的語(yǔ)意及應(yīng)用
紫色象征神秘、高貴和浪漫;它常給人一種優(yōu)雅、奢華的感覺(jué),同時(shí)也帶有神秘莫測(cè)的氛圍,與夢(mèng)幻、創(chuàng)造力等情感相關(guān)。
美柚的主要用戶(hù)是女性,紫色在色彩心理學(xué)中常被認(rèn)為具有優(yōu)雅、神秘、浪漫的特質(zhì),這些特質(zhì)與女性的審美和情感需求相契合,能夠吸引女性的關(guān)注。
7大色彩技巧讓你界面更吸睛
 
 
 
 
8、白色的語(yǔ)意及應(yīng)用
 
白色代表著純潔、神圣、信任、安靜、樸素和雅致,是一種充滿(mǎn)純潔的顏色,它可以跟任何顏色和諧的共生。
以下是熊掌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)的美圖,都忍不住拍照留念了,成功的吸引了我的目光。
 
 
? 增強(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)客戶(hù)群體。通過(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)用戶(hù)消費(fèi)。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、為什么藍(lán)色在B端設(shè)計(jì)中廣泛應(yīng)用?
? 視覺(jué)特性方面
1.1 穩(wěn)定性
藍(lán)色給人一種沉穩(wěn)、可靠的感覺(jué)。在B端產(chǎn)品中,用戶(hù)往往需要處理重要的業(yè)務(wù)數(shù)據(jù)和進(jìn)行復(fù)雜的操作,藍(lán)色的穩(wěn)定性可以讓用戶(hù)感到安心,增強(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è)用戶(hù),需要傳達(dá)出專(zhuān)業(yè)、高效的形象,藍(lán)色正好符合這一需求。
 
? 心理影響方面
2.1 減少焦慮
相比鮮艷、刺激的顏色,藍(lán)色較為柔和,不容易引起用戶(hù)焦慮和緊張的情緒;在B端使用場(chǎng)景中,用戶(hù)可能需要長(zhǎng)時(shí)間使用產(chǎn)品,藍(lán)色的舒緩效果有助于提高用戶(hù)的使用體驗(yàn)。
 
2.2 提高專(zhuān)注度
藍(lán)色具有一定的沉靜作用,能夠幫助用戶(hù)集中注意力,專(zhuān)注于工作任務(wù)。對(duì)于B端用戶(hù)來(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)色以符合用戶(hù)的認(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ì)和用戶(hù)需求。
 
嘉為科技是一個(gè)有著20多年技術(shù)沉淀的科技公司,它的官網(wǎng)和產(chǎn)品風(fēng)格一直是沿用著科技藍(lán)的風(fēng)格,應(yīng)該也是基于傳統(tǒng)的沉淀吧。
7大色彩技巧讓你界面更吸睛
 
 
 
?藍(lán)色可以提高產(chǎn)品的復(fù)用率
很多用戶(hù)都能接受藍(lán)色的B端界面,當(dāng)面對(duì)有差不多需求客戶(hù)時(shí),同一套UI,可以多次復(fù)用,可以減少開(kāi)發(fā)成本和設(shè)計(jì)成本,這也是自己通過(guò)長(zhǎng)期實(shí)戰(zhàn)觀察發(fā)現(xiàn)的。
 
一個(gè)UI風(fēng)格,用在了兩個(gè)項(xiàng)目中,不同的用戶(hù),趨向同樣的風(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ā)出去客戶(hù)的接受度不高,覺(jué)得太不穩(wěn)重了,然后重新按照以往習(xí)慣進(jìn)行設(shè)計(jì)時(shí),就很好,客戶(hù)一致認(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ò)色彩向用戶(hù)反饋操作結(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)格相近的色彩,可以幫助用戶(hù)快速識(shí)別和記住品牌,在不同的B端產(chǎn)品界面中使用統(tǒng)一的色彩方案,有助于建立品牌的連貫性和一致性,增強(qiáng)用戶(hù)對(duì)品牌的信任。
 
例如我給湖南高速設(shè)計(jì)的一套B端界面設(shè)計(jì),用戶(hù)強(qiáng)烈要求改變傳統(tǒng)的藍(lán)色風(fēng)格,要求整套界面設(shè)計(jì)要用湖南高速品牌色-綠色,說(shuō)明在追求大流和品牌色之間,客戶(hù)更加傾向品牌的傳達(dá)。(備注:圖中數(shù)據(jù)都不是真實(shí)數(shù)據(jù),僅做展示)
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、顏色可以很好的進(jìn)行信息區(qū)分
在B端界面設(shè)計(jì)中,顏色在幫助信息區(qū)分起著非常重要的作用,通常可以通過(guò)不同的色彩來(lái)區(qū)分功能區(qū)域,可以讓用戶(hù)更清晰地了解界面的結(jié)構(gòu)和布局,例如,導(dǎo)航欄使用一種特定的顏色,而內(nèi)容區(qū)域則使用另一種顏色。
 
我設(shè)計(jì)的天翼寫(xiě)作,就是這樣的設(shè)計(jì)思路,導(dǎo)航欄和內(nèi)容區(qū)的顏色完全不一樣,這里顏色起到了很好的區(qū)分作用。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、舒適的色彩搭配可以提升用戶(hù)體驗(yàn)
選擇合適的色彩對(duì)比度可以增強(qiáng)文本的可讀性,減少用戶(hù)的視覺(jué)疲勞。例如,黑色文字在白色背景上通常比較容易閱讀。
 
選擇適當(dāng)?shù)纳士梢誀I(yíng)造出專(zhuān)業(yè)、高效、舒適的工作氛圍,從而影響用戶(hù)的情緒和感受,提高用戶(hù)的使用體驗(yàn)。
 
我參與的這個(gè)后臺(tái)界面,就是通過(guò)合理的色彩搭配來(lái)引導(dǎo)用戶(hù)使用的,當(dāng)用戶(hù)已經(jīng)完成的環(huán)節(jié)都是用綠色表示,沒(méi)有走完的流程就會(huì)是灰色的,寓意指示非常的鮮明,很好的解決了用戶(hù)不知道清晰進(jìn)程的卡點(diǎn),提升了用戶(hù)體驗(yàn)。
7大色彩技巧讓你界面更吸睛
 
 
 
 
5、色彩可以傳遞性格
人的性格有活潑的、文靜的、沉穩(wěn)的、深邃的,其實(shí)色彩也是有性格的,不同的色彩也有不同的性格,當(dāng)我們對(duì)色彩的性格有足夠多的了解,在面對(duì)不同的客戶(hù)時(shí),我們對(duì)色彩的拿捏以及設(shè)計(jì)需求的把握時(shí),會(huì)更加的游刃有余。
7大色彩技巧讓你界面更吸睛
 
 
 
我們平常確實(shí)是在做設(shè)計(jì),但是我們更多的是在與人打交道,我們更好的聆聽(tīng),會(huì)幫助我們更快的抓取到客戶(hù)的喜好,快速做出滿(mǎn)足客戶(hù)需求的設(shè)計(jì),少受加班之苦。
比方說(shuō)我之前給云門(mén)戶(hù)設(shè)計(jì)的一套UI,客戶(hù)的決策層是男性,且年齡偏大,他們就偏愛(ài)深沉的UI風(fēng)格;而我負(fù)責(zé)的天翼云電腦專(zhuān)家,客戶(hù)的決策層是女性,且年齡偏年輕,她每次就喜歡輕盈、明快的UI色調(diào),不同的決策層客戶(hù),就會(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ì),客戶(hù)說(shuō)之前的大屏設(shè)計(jì)不喜歡,希望重新出一個(gè)新的設(shè)計(jì),然后公司的需求對(duì)接人員在給我下達(dá)需求時(shí),真的就只是給我下達(dá)了這幾個(gè)字,讓我重新出一個(gè)設(shè)計(jì)試試。
 
以我的職業(yè)直覺(jué),感覺(jué)這個(gè)需求是不夠細(xì)化的,于是我就多問(wèn)了幾句,我問(wèn)客戶(hù)是想要常規(guī)的藍(lán)色調(diào)的還是別的?果然一問(wèn),客戶(hù)說(shuō)不希望再用常規(guī)的藍(lán)色的,希望新的設(shè)計(jì)要用他們的品牌色綠色,剛聽(tīng)到這幾個(gè)字的時(shí)候,我以為這次我把握住需求了,在收集參考圖的時(shí)候,我發(fā)現(xiàn)常見(jiàn)的綠色大屏有深色的和淺色的,根據(jù)自己以往的作圖習(xí)慣,我覺(jué)得深色會(huì)更加的受歡迎一些,我自以為是的朝著深色的方向去出圖,出到了一半的時(shí)候,我內(nèi)心有些許的忐忑,我于是找了一深一淺的參考圖,讓同事跟客戶(hù)確認(rèn)一下,客戶(hù)是想要深色的感覺(jué),還是要淺色的感覺(jué),這次溝通又給了我深深的一擊,客戶(hù)不按常理出牌,說(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.b186.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

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

天宇 交互設(shè)計(jì)及用戶(hù)體驗(yàn)

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

 

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

藍(lán)藍(lán)設(shè)計(jì)的小編 設(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ì)咨詢(xún)公司有較為緊密的往來(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),很多決策依賴(lài)于市場(chǎng)調(diào)研,既得利益的權(quán)重大于長(zhǎng)遠(yuǎn)利益。

再就是我們回避不開(kāi)的話(huà)題,設(shè)計(jì)師在某種意義上話(huà)語(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í)候大部分都是依賴(lài)過(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.b186.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

 

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

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

優(yōu)秀的產(chǎn)品設(shè)計(jì)是能帶給用戶(hù)驚喜的,在不經(jīng)意間讓用戶(hù)感受到溫度,也是提升用戶(hù)體驗(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ì)就是帶給用戶(hù)驚喜!
 
 
 
 
體驗(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è)廣告滿(mǎn)天飛的年代,用戶(hù)已經(jīng)逐步開(kāi)啟廣告免疫模式,如何提高用戶(hù)對(duì)廣告的關(guān)注度至關(guān)重要。
 
近期在體驗(yàn)餓了么時(shí),等待送餐界面中空降一個(gè)降落傘,從左上角飄到右側(cè)懸浮,彈出紅包懸浮廣告。降落傘飄浮的動(dòng)態(tài)過(guò)程吸引了用戶(hù)的關(guān)注度,進(jìn)而提高了營(yíng)銷(xiāo)廣告的點(diǎn)擊率,雖然廣告大家都比較反感,但是一個(gè)伴隨著驚喜的廣告也會(huì)讓你放下戒備心理。
優(yōu)秀的設(shè)計(jì)就是帶給用戶(hù)驚喜!
 
 
 
 
二、動(dòng)效反饋商家備餐過(guò)程
提升等待過(guò)程對(duì)于用戶(hù)體驗(yàn)來(lái)說(shuō)尤為重要,降低用戶(hù)等待過(guò)程中的焦慮感,才能讓用戶(hù)愿意為此停留。
 
通過(guò)餓了么點(diǎn)餐之后,商家需要一定的時(shí)間完成餐飲的制作,必然需要用戶(hù)等待一些時(shí)間。在這個(gè)備餐過(guò)程中,當(dāng)前界面以一個(gè)翻炒動(dòng)效表達(dá),情感化的動(dòng)效不僅提示用戶(hù)當(dāng)前狀態(tài),也提升了設(shè)計(jì)表達(dá)的感官體驗(yàn)。
優(yōu)秀的設(shè)計(jì)就是帶給用戶(hù)驚喜!
 
 
 
 
三、這個(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ú)疑是把廣告的存在感拉滿(mǎn)了,讓你對(duì)廣告的記憶形成硬性要求。
 
無(wú)論這個(gè)廣告設(shè)計(jì)方案是否讓用戶(hù)反感,但是這個(gè)呈現(xiàn)的互動(dòng)方式還是比較新穎的,相信廣告的點(diǎn)擊率必然有所提升。
優(yōu)秀的設(shè)計(jì)就是帶給用戶(hù)驚喜!
 
 
 
 
四、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ì)就是帶給用戶(hù)驚喜!
 
 
 
 
五、待機(jī)狀態(tài)下的實(shí)時(shí)動(dòng)態(tài)
隨時(shí)讓用戶(hù)感受到你的存在,才能讓人感到安心,服務(wù)過(guò)程中狀態(tài)實(shí)時(shí)可見(jiàn)至關(guān)重要。
 
通過(guò)餓了么點(diǎn)餐之后,就算處于待機(jī)狀態(tài)時(shí),只要點(diǎn)亮屏幕即可看到當(dāng)前出餐狀態(tài)。可視化的圖形結(jié)合時(shí)間提醒,讓狀態(tài)一目了然,使得點(diǎn)餐到用餐之間的過(guò)程更有用戶(hù)可控性。
優(yōu)秀的設(shè)計(jì)就是帶給用戶(hù)驚喜!
 
 
 
 
六、小圖標(biāo)里的細(xì)節(jié)反思
產(chǎn)品中有很多輔助功能/信息等表達(dá)的圖標(biāo),既要能準(zhǔn)確表達(dá)主題,也要讓用戶(hù)易于理解。
 
在汽車(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)品的差異,以此提升用戶(hù)的操作體驗(yàn)。
優(yōu)秀的設(shè)計(jì)就是帶給用戶(hù)驚喜!
 
 
 
 
七、輪播式的懸浮設(shè)計(jì)
懸浮設(shè)計(jì)非常普及,因?yàn)檎急刃『突瑒?dòng)頁(yè)面會(huì)隱藏,對(duì)用戶(hù)的干擾比較小。
 
最近在芒果 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ì)就是帶給用戶(hù)驚喜!
 
 
 
 
八、氛圍熱烈的底部標(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ì),使得整體氛圍感拉滿(mǎn)。
優(yōu)秀的設(shè)計(jì)就是帶給用戶(hù)驚喜!
 
 
 
 
九、收縮式交互設(shè)計(jì)
通過(guò)交互方式應(yīng)對(duì)用戶(hù)操作過(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ì)影響用戶(hù)點(diǎn)擊按鈕進(jìn)行創(chuàng)作。即通過(guò) 3D 動(dòng)效加強(qiáng)了功能的曝光度,又通過(guò)收縮式交互提高了內(nèi)容的展示空間,可謂是一舉多得的設(shè)計(jì)解決方案。
優(yōu)秀的設(shè)計(jì)就是帶給用戶(hù)驚喜!
 
 
 
 
十、形象化的進(jìn)度設(shè)計(jì)
進(jìn)度設(shè)計(jì)是反饋狀態(tài)變化的關(guān)鍵,通過(guò)可視化的表達(dá)讓用戶(hù)一目了然,提高用戶(hù)對(duì)服務(wù)過(guò)程的把控。
 
當(dāng)用戶(hù)通過(guò)攜程旅行 App 訂票后,在行程訂單界面可以看到列車(chē)行駛狀態(tài)的進(jìn)度提示。通過(guò)可視化的列車(chē)形象的表達(dá)了行駛狀態(tài),讓用戶(hù)清晰的看到行駛方向和抵達(dá)站點(diǎn)示意。不僅信息傳遞高效,形象的表達(dá)也使得感官體驗(yàn)更佳。
優(yōu)秀的設(shè)計(jì)就是帶給用戶(hù)驚喜!
 
 
 
 
小結(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.b186.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

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

藍(lán)藍(lán)設(shè)計(jì)的小編 B端ui設(shè)計(jì)文章及欣賞

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

 

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

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

隨著同類(lèi)型產(chǎn)品越來(lái)越多,更有體驗(yàn)感和個(gè)性化的設(shè)計(jì)才能打動(dòng)用戶(hù),成為被選擇的對(duì)象。作為產(chǎn)品設(shè)計(jì)師我們?cè)诓粩嗵剿骱蛣?chuàng)新,希望以更好的設(shè)計(jì)表達(dá)來(lái)解決業(yè)務(wù)場(chǎng)景,為提升用戶(hù)體驗(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)意吸引用戶(hù)的注意力。
每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化
 
 
 
 
三、通過(guò) AI 重新定義搜索體驗(yàn)
AI 化已經(jīng)成為眾多行業(yè)未來(lái)需要對(duì)接的方向,任何行業(yè)都可以通過(guò) AI 進(jìn)行重新定義,帶給用戶(hù) AI 化的體驗(yàn)。
 
以前在騰訊視頻 App 搜索時(shí)都是以關(guān)鍵詞為主,現(xiàn)在可以通過(guò) AI 搜與騰訊元寶 AI 助手交流,以對(duì)話(huà)式的方式找到感興趣的影片。通過(guò) AI 重新定義了搜索方式,讓用戶(hù)感受到屬于 AI 化的體驗(yàn)感。
每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化
 
 
 
 
四、動(dòng)態(tài)化功能引導(dǎo)產(chǎn)品升級(jí)
引導(dǎo)用戶(hù)升級(jí)產(chǎn)品才能帶來(lái)新的功能和服務(wù)升級(jí),如何吸引用戶(hù)進(jìn)行升級(jí)變得至關(guān)重要。
 
高德地圖為了引導(dǎo)用戶(hù)點(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)可以讓用戶(hù)提前了解新版本的信息,提高用戶(hù)升級(jí)的選擇性。
每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化
 
 
 
 
五、動(dòng)態(tài)優(yōu)惠券更有吸引力
各種優(yōu)惠券、打折券、新人紅包等讓用戶(hù)開(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)的方式也更有吸引力,增加用戶(hù)的參與概率。
每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化
 
 
 
 
六、人性化的溫馨提示設(shè)計(jì)
溫馨提示雖然不一定管用,但是依然可以讓用戶(hù)感受到人性化的服務(wù),增加用戶(hù)對(duì)產(chǎn)品的好感度。
 
在比較晚的時(shí)間段使用洪恩識(shí)字 App 時(shí),會(huì)出現(xiàn)溫馨提示的彈窗,勸導(dǎo)用戶(hù)注意休息時(shí)間。人性化的設(shè)計(jì)可以輔助家長(zhǎng)管理孩子的使用習(xí)慣,提醒注意時(shí)間管理和作息規(guī)律。
每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化
 
 
 
 
七、自定義形象的年度報(bào)告
年度報(bào)告的形式豐富多樣,都是以用戶(hù)個(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è)人的喜好各不相同,為了滿(mǎn)足各自的選擇需求,個(gè)性化的設(shè)置變得尤為重要。
 
體重小本 App 的主界面,可以通過(guò)主題皮膚設(shè)置背景、配色等,提供了煥彩粉和清爽藍(lán)的多款選擇,用戶(hù)也可以自定義圖片進(jìn)行設(shè)置。通過(guò)個(gè)性化的設(shè)置帶給用戶(hù)更多選擇性,滿(mǎn)足不同的感官體驗(yàn)需求。
每個(gè)設(shè)計(jì)都讓你感受到個(gè)性化
 
 
 
 
九、情感化的表情設(shè)置
通過(guò)表情設(shè)計(jì)輔助可視化表達(dá),其中表情符號(hào)的運(yùn)用較為常見(jiàn),豐富多樣的表情選擇更能滿(mǎn)足用戶(hù)需求。
 
體重小本 App 體重?cái)?shù)據(jù)展示中,以不同表情來(lái)體現(xiàn)體重?cái)?shù)據(jù)的變化,情感化的表達(dá)讓變化的呈現(xiàn)更加貼切。產(chǎn)品提供了多款表情供用戶(hù)選擇,用戶(hù)也可以設(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.b186.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

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

天宇 B端ui設(shè)計(jì)文章及欣賞

最近看汪曾祺的《嘆息橋》中的一句話(huà),我必須分享給你。緣起我在人群中看見(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ù)、縮短查詢(xún)路徑、數(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ù)的。
 
大廠色彩:這里我分享了大廠的色彩是怎么去確定的、如何去確定。可以去看看。我在自己的工作中色彩的應(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í)滿(mǎn)足與 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ì)比滿(mǎn)足至少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)為和用戶(hù)進(jìn)行交互、所要收集用戶(hù)信息的或獲得用戶(hù)反饋的一種方式的載體。在后臺(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.b186.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

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

天宇 移動(dòng)端UI設(shè)計(jì)文章及欣賞

俗話(huà)說(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ì)配色需要考慮用戶(hù)長(zhǎng)時(shí)間的預(yù)覽體驗(yàn),高飽和度的配色不適合長(zhǎng)時(shí)間觀看,容易造成視覺(jué)疲勞。適當(dāng)降低飽和度使得配色更加舒適,有利于提升用戶(hù)預(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)度,確保用戶(hù)可以一目了然的發(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.b186.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

如何從產(chǎn)品角度發(fā)起交互設(shè)計(jì)?

天宇 交互設(shè)計(jì)及用戶(hù)體驗(yàn)

本文從產(chǎn)品角度出發(fā),深入探討了如何發(fā)起交互設(shè)計(jì)。通過(guò)明確產(chǎn)品目標(biāo)與用戶(hù)需求、進(jìn)行用戶(hù)研究、構(gòu)建信息架構(gòu)、設(shè)計(jì)流程與界面、進(jìn)行原型測(cè)試以及持續(xù)優(yōu)化等關(guān)鍵步驟,闡述了如何打造出滿(mǎn)足用戶(hù)期望、提升用戶(hù)體驗(yàn)并實(shí)現(xiàn)產(chǎn)品目標(biāo)的交互設(shè)計(jì)。
 
一、引言
 
在當(dāng)今數(shù)字化的時(shí)代,產(chǎn)品的成功不僅僅取決于其功能的強(qiáng)大,更在于能否為用戶(hù)提供流暢、愉悅且富有價(jià)值的交互體驗(yàn)。從產(chǎn)品角度發(fā)起交互設(shè)計(jì),意味著將用戶(hù)置于核心,以實(shí)現(xiàn)產(chǎn)品的商業(yè)目標(biāo)和用戶(hù)需求的完美融合。
如何從產(chǎn)品角度發(fā)起交互設(shè)計(jì)?
 
 
二、明確產(chǎn)品目標(biāo)與用戶(hù)需求
 
(一)定義產(chǎn)品目標(biāo)
產(chǎn)品目標(biāo)是交互設(shè)計(jì)的起點(diǎn),它決定了設(shè)計(jì)的方向和重點(diǎn)。產(chǎn)品經(jīng)理需要與團(tuán)隊(duì)共同明確產(chǎn)品的定位、市場(chǎng)需求以及預(yù)期的商業(yè)成果。例如,是旨在提高用戶(hù)活躍度,還是增加用戶(hù)轉(zhuǎn)化率,或者是提升品牌形象。
如何從產(chǎn)品角度發(fā)起交互設(shè)計(jì)?
 
 
 
(二)挖掘用戶(hù)需求
通過(guò)市場(chǎng)調(diào)研、用戶(hù)反饋、競(jìng)品分析等手段,深入了解目標(biāo)用戶(hù)的行為習(xí)慣、痛點(diǎn)和期望。這不僅包括對(duì)用戶(hù)顯性需求的捕捉,還包括對(duì)潛在需求的挖掘。
如何從產(chǎn)品角度發(fā)起交互設(shè)計(jì)?
 
 
 
三、進(jìn)行用戶(hù)研究
 
(一)用戶(hù)畫(huà)像創(chuàng)建
基于收集到的數(shù)據(jù),構(gòu)建詳細(xì)的用戶(hù)畫(huà)像,包括用戶(hù)的年齡、性別、職業(yè)、教育背景、使用場(chǎng)景等特征,以便更精準(zhǔn)地理解用戶(hù)的行為和需求。
如何從產(chǎn)品角度發(fā)起交互設(shè)計(jì)?
 
 
 
(二)用戶(hù)場(chǎng)景分析
模擬用戶(hù)在不同場(chǎng)景下與產(chǎn)品的交互過(guò)程,發(fā)現(xiàn)可能存在的問(wèn)題和優(yōu)化點(diǎn)。
舉例說(shuō)明:
我們要知道,地鐵周邊美食,這是一個(gè)解決方案。真正的需求是什么?一個(gè)字一個(gè)字地找需求,地鐵=快速方便出行,美食=和朋友一起吃飯/自己一人吃飯。這是一個(gè)和線下場(chǎng)景很相關(guān)的項(xiàng)目,我們要把不同目的核心用戶(hù)的主要使用場(chǎng)景寫(xiě)出來(lái)。經(jīng)過(guò)分析,我們得出了用戶(hù)會(huì)選擇我們產(chǎn)品,且產(chǎn)品未來(lái)可能存在的各種場(chǎng)景A、B、C、D、E。如下圖所示:
如何從產(chǎn)品角度發(fā)起交互設(shè)計(jì)?
 
 
如果按照目標(biāo)人群所在場(chǎng)景分類(lèi),進(jìn)行細(xì)分,則為下圖:
如何從產(chǎn)品角度發(fā)起交互設(shè)計(jì)?
 
 
乘地鐵去地鐵站和附近地鐵站區(qū)別:前為用戶(hù)會(huì)乘坐地鐵去目的地尋找美食;后為用戶(hù)不用地鐵/吃完后使用地鐵,地鐵邊美食沒(méi)有其他美食團(tuán)購(gòu)產(chǎn)品有競(jìng)爭(zhēng)力。
上班族和普通大眾區(qū)別:上班族工作日使用固定地鐵站上下班,時(shí)間可能緊急,快速獲取食物;普通找美食吃的大眾不使用固定地鐵站,目的是通過(guò)地鐵快速到達(dá)某目的地,就近享受目的地美食。
朋友們和個(gè)人區(qū)別:朋友們一起吃飯,容易出現(xiàn)喝多、吃過(guò)點(diǎn)等異常行為,并且在選擇地鐵旁吃飯地點(diǎn)時(shí)需要考慮朋友們家的位置就近選目的地。個(gè)人均不需要考慮以上,較為自由。
 
市場(chǎng)定位
經(jīng)過(guò)領(lǐng)域場(chǎng)景的分析,我們知道了真場(chǎng)景都是用戶(hù)有目的乘坐地鐵去到某地鐵站出站口尋找美食的。那么我們對(duì)這么一群大眾進(jìn)行用戶(hù)人口統(tǒng)計(jì)學(xué)類(lèi)的細(xì)分:
如何從產(chǎn)品角度發(fā)起交互設(shè)計(jì)?
 
 
  • 上圖為前期定位的目標(biāo)大眾用戶(hù)群,依靠地鐵的工具屬性,我們得出了具體的兩個(gè)影響因素:時(shí)間+美食熱愛(ài)程度。同時(shí)我們把直接競(jìng)品和間接競(jìng)品一同進(jìn)行用戶(hù)群比較??梢钥吹胶痛竺缊F(tuán)有相同和不同維度,這就是產(chǎn)品最初冷啟動(dòng)時(shí)期的差異化!也就是我們的前、中期場(chǎng)景的主要目標(biāo)用戶(hù)類(lèi)型。
  • 紅色部分即種子用戶(hù)群,以這些群體為冷啟動(dòng)階段,可以更快的向四周擴(kuò)張。因?yàn)樗麄冇惺褂玫罔F的時(shí)間屬性,同時(shí)有較高的美食熱愛(ài)程度,有利于帶動(dòng)其他時(shí)間+熱愛(ài)程度的用戶(hù)加入產(chǎn)品,實(shí)現(xiàn)快速并有質(zhì)量的拉新、活躍的目標(biāo)。
  • 低端直接競(jìng)品即用戶(hù)群工具屬性明顯,只是搜地鐵站,選擇美食的用戶(hù),無(wú)明顯其他行為;高端競(jìng)品即注重社交、ugc為起點(diǎn),逼格高的搜尋美食工具。這部分開(kāi)始很難,工作量巨大,且較脫離大眾主流群體。
 
結(jié)合上圖和要做的場(chǎng)景,我們得出了產(chǎn)品具體目標(biāo)用戶(hù):乘坐地鐵快速到達(dá)并尋找目的地美食的大眾用戶(hù)(上班族休息日,大學(xué)生,個(gè)人或一起),要求在地鐵站附近便能方便享受目的地美食。且對(duì)美食有一定熱愛(ài)程度。
 
(三)用戶(hù)測(cè)試
邀請(qǐng)真實(shí)用戶(hù)進(jìn)行產(chǎn)品試用,觀察他們的操作行為,收集反饋意見(jiàn),為后續(xù)的設(shè)計(jì)提供依據(jù)。
1、需求接受
需求很有可能是在線上接到的,并不是面對(duì)面交流傳遞的,并且還會(huì)遇到很多坑,例如需求本身不具體,或者自己理解有偏差,因此在接到需求后,最好和交互、產(chǎn)品等同事進(jìn)行面對(duì)面的交流和溝通。
詳細(xì)了解測(cè)試目的和關(guān)鍵點(diǎn),確定用戶(hù)配比。
最好是讓交互帶著跑一下整個(gè)程序(半成品demo也好,交互稿也行),這樣能在頭腦中快速形成操作流程的認(rèn)知,并把相應(yīng)關(guān)鍵點(diǎn)對(duì)應(yīng)上去。同時(shí)把大致的用戶(hù)配比情況敲定一下,后續(xù)就可以直接招募用戶(hù)了。
了解demo的完成進(jìn)度,相應(yīng)確定具體測(cè)試時(shí)間。
交互、視覺(jué)等完成demo的時(shí)間具有太多不確定因素,因此我們需要及時(shí)了解整個(gè)demo的完成進(jìn)度,在盡可能快的情況下保險(xiǎn)安排測(cè)試時(shí)間,如果邀請(qǐng)的是外部用戶(hù),結(jié)果用戶(hù)到了而demo還沒(méi)出來(lái),那也是夠了。
2、方案撰寫(xiě)和確定
讓交互稿幫助自己。在完成測(cè)試方案撰寫(xiě)的過(guò)程中demo還未誕生,具體程序細(xì)節(jié)記憶又很模糊,不好寫(xiě)測(cè)試方案,怎么辦?不要慌,去看交互稿吧。
及時(shí)溝通。在方案撰寫(xiě)過(guò)程中,如果有一些疑問(wèn),例如在看交互稿的時(shí)候還不是很理解某個(gè)具體操作過(guò)程,或者自己對(duì)產(chǎn)品有疑問(wèn)的也可以跟交互等溝通,因?yàn)樽约簳?huì)遇到的問(wèn)題,很有可能在測(cè)試用用戶(hù)也會(huì)遇到,這樣子用戶(hù)如果問(wèn)到了,就可以相應(yīng)作出解釋。
核實(shí)確定方案。完成方案后,可以在公司溝通交流工具上和交互及產(chǎn)品等同事再確認(rèn)一下,是否有什么地方遺漏或有不妥之處。
3、用戶(hù)招募
這是一個(gè)大多數(shù)人都頭疼的一個(gè)過(guò)程,希望看完了以下幾點(diǎn),可以稍微緩解一下大家的癥狀。再次確定測(cè)試時(shí)間。
方案定下來(lái)后,再跟交互確認(rèn)測(cè)試時(shí)間,了解是否有變動(dòng)和調(diào)整,盡量避免用戶(hù)來(lái)了demo或者測(cè)試環(huán)境還不ok的情況。
 
撰寫(xiě)招募文案。需要把用戶(hù)要求、測(cè)試日期和地點(diǎn)、報(bào)酬、大致的測(cè)試時(shí)長(zhǎng)、用戶(hù)需要在測(cè)試中做什么,以及報(bào)名方式等表達(dá)清楚。有以下幾點(diǎn)可以注意一下,方便我們自己招募:
  • 詳細(xì)列出測(cè)試安排的時(shí)間段。例如10:30-11:15、13:30-14:15,讓用戶(hù)自己挑選合適的時(shí)間段,這樣就不用事后再協(xié)調(diào)不同用戶(hù)測(cè)試時(shí)間了;
  • 優(yōu)先人力、信息管理、行政等崗位同事。盡量避免相關(guān)產(chǎn)品人員、設(shè)計(jì)崗等同事。
  • 制作簡(jiǎn)單的招募海報(bào),并檢查??梢允孪葘?ldquo;海報(bào)”用word或者ppt做好,然后保存成圖片格式,記得檢查核實(shí)一下是否有錯(cuò)。因?yàn)樵诠綢M群上直接黏貼確實(shí)方便,但是其排版往往不利于閱讀,導(dǎo)致用戶(hù)會(huì)遺漏重要信息。而制作成圖片格式,可以更好地去避免這個(gè)問(wèn)題,同時(shí)還可以顯得整個(gè)招募過(guò)程比較正式,突出了對(duì)用戶(hù)的尊重,也能在一定程度上體現(xiàn)我們用研工作的規(guī)范性。
 
多渠道投放招募海報(bào)。內(nèi)部用戶(hù)可以嘗試先在公司IM群組上招募,之前招募樣本量比較小,因此很快可以招到,其他途徑暫時(shí)未嘗試,公司論壇應(yīng)該也可以,不過(guò)隱約感覺(jué)效率會(huì)比較低。外部用戶(hù)可以在朋友圈試試,效果還不錯(cuò),大家都很熱情幫忙轉(zhuǎn)發(fā),群眾的力量大無(wú)窮。也可以相應(yīng)去搜索一些QQ群,加入并發(fā)布招募信息。另外還有一些社交論壇什么的,都可以嘗試一下。方法很多,針對(duì)具體招募情況,大家就盡情發(fā)揮吧~
 
用戶(hù)多了留到下次用。海報(bào)發(fā)出去后,有時(shí)也會(huì)出乎意料用戶(hù)數(shù)量超過(guò)預(yù)期了,這是好事,不要擔(dān)心,也不要急著拒絕,平和的跟對(duì)方說(shuō)明情況,強(qiáng)調(diào)下次還會(huì)有測(cè)試,把用戶(hù)相應(yīng)信息了解一下做個(gè)記錄,下次招募的時(shí)候可以直接先聯(lián)系這幾名用戶(hù)。當(dāng)然前提是你真的有下次測(cè)試需求,如果沒(méi)有那還是老老實(shí)實(shí)說(shuō)明情況。
 
確保自己和用戶(hù)能彼此聯(lián)系上。跟用戶(hù)強(qiáng)調(diào)測(cè)試時(shí)間和地點(diǎn),尤其是外部用戶(hù),如果招募和正式測(cè)試隔了幾天,最好在測(cè)試前一天再通知一下。給出自己的聯(lián)系電話(huà),同時(shí)詢(xún)問(wèn)用戶(hù)的聯(lián)系電話(huà)。
 
第一個(gè)用戶(hù)盡量安排公司內(nèi)部同事。很多時(shí)候demo的完成情況會(huì)出現(xiàn)意外,到了測(cè)試時(shí)間demo還不能用,內(nèi)部用戶(hù)可以方便取消或者更換。另外,在第一次測(cè)試前誰(shuí)都不確定用戶(hù)會(huì)有什么反應(yīng),第一個(gè)測(cè)試是可以起到試水效果,而外部用戶(hù)成本高,用來(lái)試水太奢侈。
4、測(cè)試準(zhǔn)備
 
材料準(zhǔn)備。需要準(zhǔn)備的內(nèi)容有:量表、報(bào)酬簽收表、記錄筆記本、錄音筆、會(huì)議室借用,以及記錄表格,如果是外部用戶(hù)過(guò)來(lái),相應(yīng)準(zhǔn)備一杯水,人家大老遠(yuǎn)過(guò)來(lái)也不容易。
 
測(cè)試內(nèi)容準(zhǔn)備。其實(shí)每次訪談?dòng)脩?hù)自己都會(huì)挺緊張的,不知道用戶(hù)是不是也很緊張(PS:好想當(dāng)一回用戶(hù),體驗(yàn)一下被訪的感覺(jué))。為了消除這種緊張,同時(shí)也是為了更好的完成訪談,可以有嘗試以下幾點(diǎn):
  • 盡可能多的去了解所需測(cè)試的產(chǎn)品。有時(shí)候demo出來(lái)的晚,下午要測(cè)試,demo中午才出來(lái),自己都沒(méi)玩過(guò),測(cè)試還怎么搞?之前也說(shuō)了,那就使勁去看交互稿吧,雖然比不上實(shí)際操作來(lái)的真實(shí),但是也能有不小幫助,但也要給自己留足熟悉demo的時(shí)間。
  • 按照模塊來(lái)列提綱。其實(shí)相當(dāng)于組塊策略,把同一個(gè)模塊的問(wèn)題放到一起更方便記憶,并且也在訪談中也方便自己和其他同事發(fā)現(xiàn)遺漏點(diǎn)。但模塊不要太大,如果太大了就相應(yīng)拆分一下。例如,在考拉新版測(cè)試的時(shí)候,有“首頁(yè)”、“活動(dòng)”、“購(gòu)物車(chē)”等測(cè)試,但是光是首頁(yè)內(nèi)容也很多,作為一個(gè)模塊還是太大了,可以拆分成“首頁(yè)整體感知”、“商品詳情”等幾個(gè)方面來(lái)整理提綱。
  • 根據(jù)任務(wù)演練提綱。有了提綱后,按照任務(wù)大致過(guò)一下所有列出來(lái)的問(wèn)題,這個(gè)過(guò)程會(huì)打亂按照模塊列好的提綱,有一次這樣的排練,在測(cè)試的時(shí)候更不容易漏掉題目,而且也相當(dāng)于模擬了一下測(cè)試,自己心里會(huì)更踏實(shí)一點(diǎn),在實(shí)際測(cè)試過(guò)程中也能有更好的應(yīng)對(duì)。
 
相關(guān)人員通知。通知交互和產(chǎn)品的同事具體測(cè)試時(shí)間和地點(diǎn),邀請(qǐng)他們一起參與。不建議交互和產(chǎn)品只是后期測(cè)試查閱報(bào)告,如果他們參與到測(cè)試中,能更近距離和用戶(hù)接觸,并能更加深刻感受到產(chǎn)品存在的問(wèn)題,也能更好的推動(dòng)產(chǎn)品的改進(jìn)。
5、正式測(cè)試
主持人需要注意的點(diǎn):
  • 劃分我們和產(chǎn)品的關(guān)系。在測(cè)試之前跟用戶(hù)說(shuō)明清楚,我們并不是產(chǎn)品的設(shè)計(jì)者和開(kāi)發(fā)者,我們只是受產(chǎn)品方委托來(lái)進(jìn)行測(cè)試,以免用戶(hù)不好意思當(dāng)面如實(shí)評(píng)價(jià)產(chǎn)品。
  • 強(qiáng)調(diào)測(cè)試的是產(chǎn)品,而不是用戶(hù)。要跟用戶(hù)說(shuō)明產(chǎn)品尚處于不完善階段,因此邀請(qǐng)用戶(hù)過(guò)來(lái)進(jìn)行測(cè)試,幫助發(fā)現(xiàn)問(wèn)題和改進(jìn)產(chǎn)品設(shè)計(jì),但請(qǐng)注意不是為了評(píng)價(jià)產(chǎn)品。
  • 注意訪談技巧。這個(gè)就不用多說(shuō)了。
  • 盡可能深入的去挖掘用戶(hù)的需求。不要停留在用戶(hù)話(huà)述表面,更進(jìn)一步去追問(wèn),用戶(hù)為什么會(huì)這么說(shuō)或這么問(wèn),例如,很多時(shí)候在測(cè)試中會(huì)碰到用戶(hù)說(shuō)“哦,原來(lái)這個(gè)按鈕是xx功能,我還以為是xx功能“,這個(gè)時(shí)候可以再推進(jìn)一步,了解用戶(hù)為什么會(huì)這么認(rèn)為。
  • 給其他在場(chǎng)的同時(shí)發(fā)言的機(jī)會(huì)。主持人如果覺(jué)得自己訪談的差不多了,可以詢(xún)問(wèn)一下記錄者以及交互、產(chǎn)品等同事,了解他們是否還有問(wèn)題需要補(bǔ)充。
  • 記得量表評(píng)分和報(bào)酬簽收。長(zhǎng)時(shí)間的測(cè)試和訪談后容易忘記量表評(píng)分和報(bào)酬簽收,可以把這兩份東西放在顯眼的地方,另外可以讓記錄的同事打個(gè)招呼,幫忙提醒自己。
 
記錄人員需要注意的點(diǎn):
  • 仔細(xì)觀察用戶(hù)行為并記錄。記錄不僅僅是用戶(hù)的觀點(diǎn)、想法等,更重要的是記錄用戶(hù)的實(shí)際行為。
  • 按照模塊記錄。記錄者可以按照測(cè)試方案中的模塊來(lái)相應(yīng)記錄用戶(hù)的行為和言語(yǔ)表述。
  • 查漏補(bǔ)缺。主持人可能會(huì)遺漏一些點(diǎn),記錄者作為旁觀者需要提醒主持人遺漏了什么,或者自己有什么新的內(nèi)容需要補(bǔ)充。
 
6、測(cè)試結(jié)束歡送用戶(hù)。對(duì)用戶(hù)表示感謝,并開(kāi)門(mén)送一下用戶(hù),對(duì)于外部用戶(hù),最好能送到大樓外面可以看見(jiàn)出口的地方。
測(cè)試后及時(shí)討論。這個(gè)是重點(diǎn)!
在每一名用戶(hù)測(cè)試后及時(shí)和交互、產(chǎn)品等同事快速過(guò)一下主要發(fā)現(xiàn)的問(wèn)題點(diǎn),這樣做有以下優(yōu)點(diǎn):
  • 有效達(dá)成共識(shí),確定解決方案。剛訪談結(jié)束印象最深刻,因此能快速有效達(dá)成對(duì)主要問(wèn)題的共識(shí),并討論確定相應(yīng)的解決方案。
  • 體現(xiàn)敏捷優(yōu)勢(shì)。確定了一些比較嚴(yán)重的問(wèn)題后,交互和產(chǎn)品的同事就可以相應(yīng)去改進(jìn)產(chǎn)品設(shè)計(jì),做到了邊測(cè)邊改,加快迭代速度。
  • 幫助優(yōu)化訪談提綱,和測(cè)試用戶(hù)安排。有些問(wèn)題在事先撰寫(xiě)方案的時(shí)候可能沒(méi)涉及到,在討論后可以補(bǔ)充進(jìn)去,而有些問(wèn)題確定后則不需要再測(cè)。另外,也可以通過(guò)討論對(duì)事先安排的測(cè)試用戶(hù)進(jìn)行相應(yīng)調(diào)整,例如增刪用戶(hù),或者調(diào)整新老用戶(hù)測(cè)試順序等。
  •  
    事后幫助我們自己快速撰寫(xiě)方案。通過(guò)討論確定了關(guān)鍵問(wèn)題,并且,交互和產(chǎn)品的同事也相應(yīng)清楚了,因此在最后可以快速形成報(bào)告。
再次感謝用戶(hù)。所有用戶(hù)測(cè)試結(jié)束后,可以花幾分鐘時(shí)間簡(jiǎn)單感謝一下用戶(hù)。
 
7、報(bào)告撰寫(xiě)
針對(duì)不同大小項(xiàng)目的用戶(hù)測(cè)試,在完成報(bào)告撰寫(xiě)過(guò)程中有兩種具體方式:
  • 小測(cè)試項(xiàng)目簡(jiǎn)單快速撰寫(xiě)報(bào)告。對(duì)于那些1-2天的小測(cè)試項(xiàng)目,由于在每次測(cè)試后都有討論,已對(duì)主要問(wèn)題達(dá)成共識(shí),因此在報(bào)告撰寫(xiě)的時(shí)候就可以快速地將主要的問(wèn)題和風(fēng)險(xiǎn)點(diǎn)呈現(xiàn)出來(lái)。
  • 大測(cè)試項(xiàng)目每天總結(jié)并反饋主要問(wèn)題。大的測(cè)試項(xiàng)目持續(xù)時(shí)間比較久,針對(duì)每天的測(cè)試及討論,簡(jiǎn)單總結(jié)一下主要發(fā)現(xiàn)的問(wèn)題,并反饋給相關(guān)人員,如果到了最后再總結(jié),容易遺忘掉一些內(nèi)容,并且這樣子也方便自己最后撰寫(xiě)報(bào)告。
 
四、構(gòu)建信息架構(gòu)
思考信息架構(gòu)有三個(gè)核心關(guān)鍵詞:用戶(hù)角色、產(chǎn)品價(jià)值、使用場(chǎng)景。
1、明確用戶(hù)角色
用戶(hù)角色清晰揭示用戶(hù)目標(biāo),幫助我們把握關(guān)鍵需求、關(guān)鍵任務(wù)、關(guān)鍵流程,看到產(chǎn)品哪些是主要的事,哪些是次要的事。我們應(yīng)該盡可能豐富、形象化我們的用戶(hù)角色,讓它在設(shè)計(jì)決策過(guò)程中發(fā)揮作用,設(shè)計(jì)出更符合用戶(hù)場(chǎng)景的產(chǎn)品。
2、了解產(chǎn)品的目標(biāo)價(jià)值
作為產(chǎn)品的設(shè)計(jì)師一定要理解產(chǎn)品的價(jià)值,知道用戶(hù)想要什么,把最重要的優(yōu)先級(jí)提到最高,盡量移除無(wú)關(guān)緊要的信息,或降低其他優(yōu)先級(jí)的權(quán)重,以免對(duì)用戶(hù)造成干擾。
3、提煉產(chǎn)品的使用場(chǎng)景
要了解產(chǎn)品的業(yè)務(wù)流程,比如目標(biāo)用戶(hù)是誰(shuí)、什么場(chǎng)景、如何使用,要把產(chǎn)品業(yè)務(wù)流程上的節(jié)點(diǎn)一個(gè)一個(gè)梳理出來(lái),還要考慮這個(gè)產(chǎn)品對(duì)用戶(hù)的價(jià)值是什么,不要僅僅考慮界面的元素規(guī)范、設(shè)計(jì)細(xì)節(jié)等等,要知道產(chǎn)品的目標(biāo)價(jià)值體系。
4、信息架構(gòu)優(yōu)先級(jí)
基于三個(gè)核心點(diǎn)(用戶(hù)角色、產(chǎn)品價(jià)值、使用場(chǎng)景)分析,把目標(biāo)用戶(hù)人群核心價(jià)值的功能點(diǎn)業(yè)務(wù)流程梳理出來(lái),分清主次關(guān)系,切忌功能堆砌,具體方法可以把所有功能業(yè)務(wù)邏輯的主線列出來(lái),然后根據(jù)業(yè)務(wù)的優(yōu)先級(jí)做評(píng)級(jí),分清楚這些功能哪些是主要的,哪些是次要的,然后通過(guò)數(shù)字做排序,這樣我們就知道哪些功能設(shè)計(jì)需要明顯,哪些功能設(shè)計(jì)需要低調(diào)。
5、信息歸類(lèi)及整合
從整體上思考信息類(lèi)產(chǎn)品的分類(lèi)及整合,比如用戶(hù)資料相關(guān)的產(chǎn)品會(huì)有用戶(hù)信息、資料、等邏輯,這樣就要把所有跟用戶(hù)相關(guān)的信息都?xì)w在同一個(gè)分類(lèi)菜單下,不要讓他們分散在各個(gè)頁(yè)面中。也就是所謂的一級(jí)菜單、二級(jí)產(chǎn)品的處理邏輯。
6、要定期審視與迭代
隨著產(chǎn)品規(guī)模與復(fù)雜度的提升,要隨時(shí)關(guān)注信息架構(gòu)是否滿(mǎn)足當(dāng)前的產(chǎn)品框架,不要等需要時(shí)候再去孤注一擲的全盤(pán)優(yōu)化,這樣會(huì)讓項(xiàng)目陷入被動(dòng)的局面,可以逐漸增強(qiáng),循序漸進(jìn)的優(yōu)化,從小的細(xì)節(jié)對(duì)信息架構(gòu)進(jìn)行調(diào)整,提升產(chǎn)品的易用性。
 
六、進(jìn)行原型測(cè)試
1、制作原型
使用快速原型工具制作可交互的原型,以便更直觀地展示設(shè)計(jì)方案。
 
(二)內(nèi)部測(cè)試
團(tuán)隊(duì)內(nèi)部進(jìn)行初步測(cè)試,檢查功能的完整性和流程的合理性。
 
(三)用戶(hù)測(cè)試
邀請(qǐng)外部用戶(hù)進(jìn)行測(cè)試,收集他們的意見(jiàn)和建議,發(fā)現(xiàn)潛在的問(wèn)題和改進(jìn)空間。
 
七、持續(xù)優(yōu)化
 
(一)數(shù)據(jù)分析
通過(guò)收集和分析用戶(hù)的使用數(shù)據(jù),了解用戶(hù)的行為路徑和偏好,為優(yōu)化提供數(shù)據(jù)支持。
 
(二)用戶(hù)反饋處理
及時(shí)響應(yīng)用戶(hù)的反饋,將有價(jià)值的建議融入到后續(xù)的優(yōu)化工作中。
 
(三)迭代更新
根據(jù)數(shù)據(jù)分析和用戶(hù)反饋,不斷對(duì)交互設(shè)計(jì)進(jìn)行迭代更新,以適應(yīng)市場(chǎng)和用戶(hù)需求的變化。
 
八、結(jié)論
 
從產(chǎn)品角度發(fā)起交互設(shè)計(jì)是一個(gè)綜合性的過(guò)程,需要充分考慮產(chǎn)品目標(biāo)、用戶(hù)需求、信息架構(gòu)、流程界面、測(cè)試優(yōu)化等多個(gè)方面。只有以用戶(hù)為中心,不斷追求卓越的用戶(hù)體驗(yàn),才能打造出具有競(jìng)爭(zhēng)力的產(chǎn)品,在激烈的市場(chǎng)競(jìng)爭(zhēng)中脫穎而出。
 
在未來(lái)的產(chǎn)品開(kāi)發(fā)中,隨著技術(shù)的不斷進(jìn)步和用戶(hù)需求的不斷變化,交互設(shè)計(jì)也將面臨新的挑戰(zhàn)和機(jī)遇。產(chǎn)品團(tuán)隊(duì)?wèi)?yīng)保持敏銳的洞察力和創(chuàng)新精神,持續(xù)探索和優(yōu)化交互設(shè)計(jì),為用戶(hù)創(chuàng)造更多的價(jià)值。
 


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

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

日歷

鏈接

個(gè)人資料

存檔