首頁

高轉(zhuǎn)化寶貝詳情頁設(shè)計(jì)解析：什么才是沉浸式的設(shè)計(jì)？

天宇 設(shè)計(jì)思維

關(guān)鍵字：電商 詳情頁設(shè)計(jì) 視覺營銷

網(wǎng)絡(luò)時(shí)代，電商平臺(tái)作為主流消費(fèi)渠道，在消費(fèi)者心中已占有大部分比例，越來越多的消費(fèi)者更愿意選擇在線上購物消費(fèi)，如何讓消費(fèi)者能夠更快速了解商品，產(chǎn)生購買欲？電商詳情頁起到關(guān)鍵性作用，電商詳情頁作為產(chǎn)品說明書，不僅是成交轉(zhuǎn)化入口，更是品牌傳播的重要途徑。如何設(shè)計(jì)一款適合產(chǎn)品的詳情頁？主要從兩個(gè)方面入手：

電商詳情頁策劃
一
定位分析
1） 產(chǎn)品：屬性、功能、用途，如圖一（左）：產(chǎn)品使用場景配合文字說明能讓消費(fèi)者一目了然；
2） 價(jià)格：決定怎么去做，影響設(shè)計(jì)風(fēng)格；
3） 人群定位：消費(fèi)者路徑、在意點(diǎn)，如圖二（右）：對(duì)于母嬰產(chǎn)品主打自然、健康。
二
文案策劃
1）使用用戶化語言（消費(fèi)者語言）——不要用大白話，用使用互聯(lián)網(wǎng)思維，打造既視感文案，如圖三（左）：可視化場景搭配文案更直觀表現(xiàn)產(chǎn)品功能及作用。
2）理性傳達(dá)——賣點(diǎn)直接表達(dá)，如圖四（右）：“好空氣，看得見”，賣點(diǎn)簡潔明了。
3）文案使用規(guī)范，熟悉廣告法，禁止使用極限詞及違規(guī)詞。
三
拍攝腳本
1）草圖規(guī)劃，道具規(guī)范，角度光影規(guī)劃，模特規(guī)則（妝容、動(dòng)作、表情等），如圖五：前期的策劃為了更好的展現(xiàn)設(shè)計(jì)效果，需要先繪制草稿，通過草稿展現(xiàn)畫面的布局、角度透視、道具選擇、模特選擇、整體光影規(guī)劃等，直觀給到攝影師更好的拍攝方案，同時(shí)也可以后期設(shè)計(jì)執(zhí)行提供更好的設(shè)計(jì)依據(jù)。

詳情頁執(zhí)行策略
四
板式設(shè)計(jì)
1） 配色策略（色指定）：品牌VI色、情感色、主色、輔色、點(diǎn)綴色，如圖六（左）：主色調(diào)選擇與產(chǎn)品同類色，整體上統(tǒng)一協(xié)調(diào)，點(diǎn)綴色選擇產(chǎn)品輔色，突出對(duì)比強(qiáng)烈；
2） 裝飾性元素：元素風(fēng)格的一致性，圖形符號(hào)要與整體的畫面風(fēng)格保持一致性；
3） 字體選擇及組合：字號(hào)大小對(duì)比、疏密對(duì)比及組合規(guī)范符號(hào)，如圖七（右）。
五
形式感
形式感在生活中無處不在，設(shè)計(jì)中更要熟練應(yīng)用，詳情頁作為消費(fèi)者直觀視覺呈現(xiàn)，為了博取消費(fèi)者眼球，需要通過不同的形式營造視覺氛圍，設(shè)計(jì)具有沖擊力的畫面，避免畫面單調(diào)。
1） 對(duì)齊、疏密對(duì)比、破方，如圖八（左）：圖文排版，文字組合通過對(duì)齊、疏密對(duì)比，視覺上節(jié)奏感舒適；圖九（右）通過破方改變了原有視覺展現(xiàn)，以另外視覺呈現(xiàn)吸引消費(fèi)者眼球。
六
文案與圖標(biāo)組合
1） 文案形式需要2-3種變化，如圖十（左）：主文案與輔助文案通過不同的字體、大小、表現(xiàn)形式的對(duì)比，更加突出了“出水芙蓉”主題性文案，符合畫面的表現(xiàn)；
2） 符號(hào)與圖形，圖十一（右）：文案與圖形的結(jié)合，既突出主題文案，又通過簡單的符合表現(xiàn)產(chǎn)品的功能賣點(diǎn)，兩者的結(jié)合更好的展現(xiàn)了產(chǎn)品賣點(diǎn)，讓消費(fèi)者更直觀了解產(chǎn)品。
電商詳情頁決定了轉(zhuǎn)化率，好的詳情頁設(shè)計(jì)既可以給消費(fèi)者建立更多的信賴感，又可以成為促使消費(fèi)者購物下單的催化劑。做好一款詳情頁，前期的策劃及后期的執(zhí)行都是至關(guān)重要的，每一環(huán)節(jié)都需要考慮，缺一不可。

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

評(píng)論(0) 瀏覽(31)

馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則！

天宇 設(shè)計(jì)思維

前言
在我們的日常生活中，心理學(xué)的影響無處不在。它像一把神奇的鑰匙，能打開人們內(nèi)心深處的秘密。作為設(shè)計(jì)師，我們更應(yīng)該掌握并運(yùn)用心理學(xué)，將其融入我們的設(shè)計(jì)中，從而創(chuàng)造出更具有吸引力和影響力的作品。
設(shè)計(jì)并不僅僅是形狀、顏色和布局的組合，更是對(duì)人類心理的探索和解讀。我們的每一個(gè)設(shè)計(jì)決策，都與用戶的心理狀態(tài)和認(rèn)知過程息息相關(guān)。如何抓住用戶的眼球、引發(fā)他們的興趣、引導(dǎo)他們的行為，這些都是我們需要深入研究的課題。
在眾多的心理學(xué)原理中，馮·雷斯托夫效應(yīng)（Von Restorff Effect）是一個(gè)值得設(shè)計(jì)師們關(guān)注的設(shè)計(jì)法則。這個(gè)效應(yīng)揭示了一個(gè)有趣的現(xiàn)象：特殊的東西往往比普通的東西更容易被人記住。這就意味著，在設(shè)計(jì)中，我們要制造一些“特殊”的元素，使它們能夠從眾多的信息中脫穎而出，成為用戶關(guān)注的焦點(diǎn)。今天筆者就帶大家了解一下設(shè)計(jì)中常用的心理學(xué)之一馮·雷斯托夫效應(yīng)。
 
 
 
分享目錄
一、關(guān)于馮.雷斯托夫效應(yīng)
二、馮.雷斯托夫效應(yīng)對(duì)設(shè)計(jì)的影響
三、在設(shè)計(jì)中的應(yīng)用
四、常見問題及解決方式
五、結(jié)語
 
 
 
一、關(guān)于馮.雷斯托夫效應(yīng)
1.產(chǎn)生背景
在1933年的德國，一個(gè)名叫海德維希·馮·雷斯托夫的醫(yī)生開啟了一項(xiàng)改變我們對(duì)人類記憶理解的實(shí)驗(yàn)。她深入探索了當(dāng)人們面對(duì)一系列物品時(shí)，他們的記憶是如何運(yùn)作的。通過精心設(shè)計(jì)的對(duì)比實(shí)驗(yàn)，她發(fā)現(xiàn)了一個(gè)令人驚奇的現(xiàn)象：在一組物品中，那個(gè)最特別的物品總是更容易被人們記住。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則！
 
 
這一發(fā)現(xiàn)為我們揭示了一個(gè)核心事實(shí)：特別的事物更能吸引我們的注意力，并在我們的記憶中留下深刻的印記。想象一下，在一組物品中，如果有一個(gè)被聚光燈照亮，那么相比其他未被照亮的物品，它無疑會(huì)成為人們關(guān)注的焦點(diǎn)，從而在記憶中留下更深的痕跡。
這個(gè)人類行為和記憶的規(guī)律后來被命名為“馮·雷斯托夫效應(yīng)”。這一效應(yīng)不僅僅是一個(gè)簡單的觀察，它實(shí)際上是人類行為學(xué)和心理學(xué)領(lǐng)域的一項(xiàng)重要研究成果。隨著時(shí)間的推移，這一效應(yīng)逐漸被應(yīng)用于美學(xué)和設(shè)計(jì)領(lǐng)域，為設(shè)計(jì)師們提供了全新的視角和工具，以創(chuàng)造出更具吸引力和影響力的作品。
自馮·雷斯托夫效應(yīng)被正式確立命名以來，眾多科研學(xué)者在此基礎(chǔ)上進(jìn)行了更深入的研究，他們不僅剖析了這一效應(yīng)的內(nèi)在機(jī)制和影響因素，還探討了其在不同情境下的應(yīng)用。隨著研究的深入，對(duì)于這一效應(yīng)的理解也在不斷加深，并衍生出了許多其他的理論和學(xué)術(shù)觀點(diǎn)。
 
2.融入設(shè)計(jì)行業(yè)
馮·雷斯托夫效應(yīng)為我們提供了一個(gè)獨(dú)特的視角，幫助我們更好地理解人類記憶的運(yùn)作方式。通過運(yùn)用這一原理，我們可以在設(shè)計(jì)中有意識(shí)地創(chuàng)造出令人難忘的元素，從而與觀眾建立更深刻的聯(lián)系。無論是在廣告、品牌推廣還是產(chǎn)品設(shè)計(jì)中，突出特別的元素都是一種有效的策略，可以幫助我們更好地吸引觀眾的注意力并留下深刻的印象。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則！
 
 
馮·雷斯托夫效應(yīng)，又被稱為隔離效應(yīng)或新奇效應(yīng)，揭示了人們?cè)谟洃浿械钠?。?dāng)情境或經(jīng)歷中出現(xiàn)與眾不同的刺激時(shí)，這種效應(yīng)尤為明顯。
在當(dāng)今信息爆炸的時(shí)代，用戶往往沒有耐心去仔細(xì)查找信息，而是快速掃視。因此，設(shè)計(jì)師需要巧妙地運(yùn)用萊斯托夫效應(yīng)，使關(guān)鍵內(nèi)容從繁雜的信息中脫穎而出，吸引用戶的目光。
統(tǒng)一性是設(shè)計(jì)的基礎(chǔ)，但只有差異化的元素才能讓信息從頁面中脫穎而出。通過巧妙運(yùn)用顏色、形狀、布局等元素，我們可以創(chuàng)造出與眾不同的視覺效果，引導(dǎo)用戶的視線。通過巧妙地突出關(guān)鍵內(nèi)容，我們能夠更好地與用戶溝通，引領(lǐng)他們的注意力，為業(yè)務(wù)創(chuàng)造更大的價(jià)值。
 
 
 
二、馮.雷斯托夫效應(yīng)對(duì)設(shè)計(jì)的影響
1.背景不同 強(qiáng)化視覺
在界面設(shè)計(jì)中，我們常常會(huì)遇到這樣的情況：在同類型的元素中，某一元素與其他元素存在顯著差異，這種現(xiàn)象我們稱之為“背景不同”。為了使某個(gè)模塊或元素在用戶心中留下深刻印象，我們可以利用環(huán)境差異來提高其識(shí)別度和記憶度。這種手法在UI設(shè)計(jì)中被廣泛應(yīng)用，它利用了馮·雷斯托夫效應(yīng)，能有效吸引用戶點(diǎn)擊。
例如淘寶底部標(biāo)簽欄中的四個(gè)ICON，唯獨(dú)首頁的第一個(gè)ICON（品牌logo）風(fēng)格與眾不同。即使離開了該頁面，這個(gè)特殊的ICON依然讓人印象深刻，餓了么第二的圖標(biāo)也是如此。因此，我們?cè)谠O(shè)計(jì)界面時(shí)，若想吸引用戶的注意或提高點(diǎn)擊量，可以打破常規(guī)，讓特定元素在同背景下脫穎而出。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則！
 
 
再比如下圖的個(gè)人中心界面，功能入口模塊均采用ICON展示，而游樂場模塊卻采用了特殊的布局和設(shè)計(jì)。因此，當(dāng)用戶進(jìn)入個(gè)人中心時(shí)，最先映入眼簾的便是游樂場模塊。這也解釋了為什么我們?cè)谶M(jìn)行廣告和活動(dòng)投放時(shí)，需要特別設(shè)計(jì)的原因。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則！
 
 
 
2.經(jīng)驗(yàn)不同 強(qiáng)化記憶
當(dāng)遇到與過去經(jīng)驗(yàn)顯著不同的情況時(shí)，我們的大腦會(huì)產(chǎn)生一種特殊的效應(yīng)，這種效應(yīng)被稱為“經(jīng)驗(yàn)不同”的效應(yīng)。例如，在騎自行車的過程中，我們通常習(xí)慣于左手控制左把手，右手控制右把手。但是，如果我們嘗試用雙手交叉的方式來騎車，結(jié)果很可能會(huì)摔倒。從此以后，每當(dāng)我們聽到或描述有關(guān)騎車摔倒的事情時(shí)，我們都會(huì)立刻想起那次“經(jīng)驗(yàn)不同”的嘗試。
同樣地，淘寶和京東在618、雙十一等大型促銷活動(dòng)時(shí)，會(huì)選擇重新設(shè)計(jì)他們的首頁。與往常的設(shè)計(jì)相比，這些新的首頁設(shè)計(jì)通常會(huì)增加更多的促銷入口，甚至改變ICON的風(fēng)格。從馮·雷斯托夫效應(yīng)的角度來看，這種與以往不同的設(shè)計(jì)能夠更好地吸引用戶的注意力，加深用戶的記憶，并擴(kuò)大活動(dòng)對(duì)用戶的影響力。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則！
 
 
 
 
 
三、在設(shè)計(jì)中的應(yīng)用
1.功能隔離提高效率
在視覺層面難以實(shí)現(xiàn)強(qiáng)烈差異化時(shí)，我們可以通過功能來實(shí)現(xiàn)有效的隔離。以微信為例，其置頂功能允許用戶將好友或群聊消息置于頂部，從而與其他信息區(qū)分開來。這種設(shè)計(jì)確保了關(guān)鍵信息的優(yōu)先級(jí)，使用戶能夠更快速地找到和關(guān)注所需內(nèi)容。通過巧妙地運(yùn)用功能，我們可以輕松地解決視覺上的一致性與差異化之間的矛盾，為用戶提供更加流暢和個(gè)性化的體驗(yàn)。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則！
 
 
 
2.動(dòng)效加強(qiáng)引導(dǎo)
靜態(tài)頁面容易讓人視覺疲勞，動(dòng)效能夠更加生動(dòng)有趣地展示內(nèi)容，引導(dǎo)用戶更加關(guān)注頁面。相較于被動(dòng)接受信息，動(dòng)效能夠更加有效地吸引用戶注意。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則！
 
 
 
3.背景聯(lián)動(dòng)吸引目光
隨著Banner自動(dòng)輪播的普及，用戶對(duì)其的吸引力逐漸降低。面對(duì)不斷變化的廣告，用戶不再耐心地逐個(gè)瀏覽。當(dāng)無法獲取所需信息時(shí)，他們的視線會(huì)迅速轉(zhuǎn)向其他區(qū)域。
為了應(yīng)對(duì)這一挑戰(zhàn)，騰訊視頻首頁的Banner采用了背景聯(lián)動(dòng)的形式。這意味著頭部背景色會(huì)根據(jù)Banner圖片的色調(diào)進(jìn)行變化，從而擴(kuò)大了內(nèi)容的變化空間。這種設(shè)計(jì)不僅使廣告更加引人注目，還使用戶更容易被吸引并保持關(guān)注。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則！
 
 
 
4.icon強(qiáng)化加強(qiáng)視覺感知
頻道頁的入口方式多種多樣，金剛區(qū)icon無疑是最優(yōu)選擇。若要突出展示某些業(yè)務(wù)功能，單一的icon配合動(dòng)效可有效吸引用戶關(guān)注。此策略簡單高效，有助于用戶快速找到所需內(nèi)容。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則！
 
 
 
5.內(nèi)容強(qiáng)化凸顯價(jià)值感
在設(shè)計(jì)界面時(shí)，我們追求的是在有限的空間內(nèi)展示更多的有效信息，避免信息的無效重復(fù)。但在電商平臺(tái)中，尤其是涉及到利益點(diǎn)時(shí)，我們需要確保信息具有足夠的價(jià)值感和吸引力。
以智行APP開通會(huì)員為例，領(lǐng)神卡作為核心賣點(diǎn)被突出展示，采用了平鋪展開的方式，從而突顯其價(jià)值。相對(duì)其他權(quán)益則相應(yīng)地進(jìn)行了弱化處理，以保持整體信息的清晰度和重點(diǎn)。這樣的設(shè)計(jì)既充分利用了屏幕空間，又確保了用戶能夠快速了解到核心的利益點(diǎn)。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則！
 
 
 
6.分層隔離提高信息層級(jí)
頁面信息層次分明，信息層級(jí)越高，用戶感知越強(qiáng)烈，越能吸引注意。例如，模態(tài)彈窗處于最上層，與內(nèi)容層完全隔離，用戶無法忽視。其次是非模態(tài)懸浮層，與內(nèi)容層隔離，但不影響用戶操作。還有側(cè)邊懸浮按鈕、頂部或底部懸浮橫條等。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則！
 
 
 
 
 
四、常見問題及解決方式
1.本末倒置的危險(xiǎn)
受“危險(xiǎn)按鈕”的影響，過去設(shè)計(jì)師常常給予負(fù)向情緒操作很高的視覺層級(jí)，例如退出登錄。這樣的設(shè)計(jì)意圖是警示用戶操作危險(xiǎn)，但視覺上卻過于強(qiáng)調(diào)，甚至有些“喧賓奪主”。近年來，移動(dòng)端設(shè)計(jì)中這種矛盾逐漸減少，但仍然存在。與其強(qiáng)調(diào)操作的難度和危險(xiǎn)性，不如考慮如何讓用戶自然地忽視這些操作，減少不必要的干擾。從馮·雷斯托夫效應(yīng)來看，這種設(shè)計(jì)方式有本末倒置之嫌，應(yīng)盡量避免。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則！
 
 
 
2.什么都突出等于什么都不突出
新手設(shè)計(jì)師常常會(huì)遇到想要突出所有元素，但最終無法突出任何一項(xiàng)的問題。頁面中的特異點(diǎn)應(yīng)該屬于少數(shù)，如果所有元素都想做得不一樣，都會(huì)讓頁面整體視覺效果崩潰。因此，在設(shè)計(jì)中要學(xué)會(huì)取舍，選擇最重要的元素進(jìn)行突出，才能達(dá)到最佳的視覺效果。
 
 
 
五、結(jié)語
總的來說，將馮·雷斯托夫效應(yīng)運(yùn)用到設(shè)計(jì)中，能幫助我們創(chuàng)造出更具吸引力、更容易被記住的設(shè)計(jì)。但請(qǐng)記住，任何設(shè)計(jì)決策都應(yīng)以用戶為中心，了解他們的需求和心理是關(guān)鍵。只有這樣，我們才能真正創(chuàng)造出打動(dòng)人心的設(shè)計(jì)。
 


作者：大漠飛鷹CYSJ
鏈接：https://www.zcool.com.cn/article/ZMTYzMjYwNA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
評(píng)論(0) 瀏覽(37)

產(chǎn)品配色那些事——配色實(shí)踐

天宇 設(shè)計(jì)思維

本章會(huì)從實(shí)操出發(fā)，結(jié)合真實(shí)項(xiàng)目為大家?guī)砼渖珜?shí)踐。期間會(huì)介紹項(xiàng)目選色邏輯、配色過程、使用到的工具及如何建立色彩系統(tǒng)。

 

 

 

產(chǎn)品配色那些事3-我的配色實(shí)踐

 

本章會(huì)從實(shí)操出發(fā)，結(jié)合真實(shí)項(xiàng)目為大家?guī)砼渖珜?shí)踐。期間會(huì)介紹項(xiàng)目選色邏輯、配色過程、使用到的工具及如何建立色彩系統(tǒng)。


項(xiàng)目背景

 

21年我司進(jìn)行業(yè)務(wù)調(diào)整，原保險(xiǎn)業(yè)務(wù)從當(dāng)前產(chǎn)品中獨(dú)立出去，作為一家全新平臺(tái)為印尼用戶提供保險(xiǎn)選購及理賠服務(wù)，為此我們提供了新的產(chǎn)品設(shè)計(jì)和配色。

 

一、定義主色

 

1、選擇色相

 

根據(jù)上一章提到的選色邏輯，我們依次從產(chǎn)品情緒、行業(yè)屬性和目標(biāo)用戶幾個(gè)緯度去思考。作為一家全新的保險(xiǎn)平臺(tái)，我們希望產(chǎn)品給到用戶專業(yè)、安全、信任之感，那么藍(lán)色、綠色可以作為備選，藍(lán)色代表專業(yè)、權(quán)威，綠色代表安全、健康。后續(xù)我們做了相關(guān)行業(yè)調(diào)研，發(fā)現(xiàn)大部分本地產(chǎn)品也使用了這兩個(gè)顏色，可以確保備選顏色是符合行業(yè)喜好的，屬于安全的用色范圍。最后考慮到用戶的地域?qū)傩?，印尼大部分用戶都信奉伊斯蘭教，對(duì)綠色有著非同一般的熱愛。結(jié)合本次項(xiàng)目訴求，便選擇了綠色成為我們產(chǎn)品主色。

 

 

2、確定色調(diào)

 

明確了主色色相，但同一色相會(huì)有冷暖、深淺之別，給到用戶的心里感受也略有差異。具體到本次項(xiàng)目中，暖綠有溫暖、活潑、歡快的感覺，冷綠則帶給用戶冷靜、平和的情緒。對(duì)于本次項(xiàng)目，冷綠更加符合產(chǎn)品定位。

 

 

 


3、調(diào)整飽和度、明度

 

飽和度控制色彩的艷麗程度，明度控制色彩的明暗變化，這兩項(xiàng)參數(shù)直接影響色彩的最終效果，所以需要同步交替調(diào)整，直到選出最合適的?？紤]到主色常用于按鈕或重要文本，所以需要注意色彩的對(duì)比度，確保文本在界面中的可讀性。在本次項(xiàng)目中，“綠色”本身屬于對(duì)比度較小的顏色，為了獲得合適的對(duì)比度，需要調(diào)整更大的飽和度和更低的明度。經(jīng)調(diào)整之后，我們測試了色彩的對(duì)比度為3:1，滿足W3C中給到的色彩對(duì)比度建議。

 

 

 

 

二、推導(dǎo)輔助色

 

1、匹配色相

 

根據(jù)輔助色定義，我們匹配到了不同色相的輔助色，但并不是所有顏色都是我們需要的，需要根據(jù)經(jīng)驗(yàn)做出一定刪減。如同類色中的兩個(gè)綠色，色相上與主色過于接近，使用過程中會(huì)造成視覺混淆，所以我們剔除這組顏色。再如中差色與對(duì)比色中都有黃色，為了與橙色區(qū)分更加明顯，我們刪除對(duì)比色中的黃色。經(jīng)過一系列刪減后，留下來的便是我們需要的色彩。此時(shí)也可以對(duì)色相進(jìn)一步調(diào)整，如類似色中的藍(lán)色偏向湖藍(lán)，為了盡量和主色拉開差別，我們選擇色相向右偏移。

 

2、視覺感官校準(zhǔn)

 

以上色彩只確定了色相，沒有進(jìn)行飽和度、明度調(diào)整，視覺上并不屬于同一層級(jí)。為了獲取更加統(tǒng)一的配色，需要對(duì)其進(jìn)行調(diào)整，這一過程被稱為視覺感官校準(zhǔn)。如何校準(zhǔn)？有人通過給色彩疊加黑色，對(duì)比色彩亮度進(jìn)行校準(zhǔn)。但不同顏色本身亮度不同，強(qiáng)行調(diào)整一致會(huì)導(dǎo)致部分顏色失衡。所以此種方法可作為參考，但不具備太大可靠性，實(shí)際工作中還需依靠自身經(jīng)驗(yàn)進(jìn)行調(diào)整，確保視覺上和諧統(tǒng)一。以下為完成校準(zhǔn)后的配色。

 


三、推導(dǎo)中性色

 

第二章提到中性色可通過調(diào)整明度或透明度得到，本項(xiàng)目使用場景比較固定，所以決定調(diào)整明度來得到中性色?？紤]到主色為“冷綠”，與偏藍(lán)的中性色搭配可保證色彩調(diào)性一致，于是我們?nèi)∷{(lán)色色相值，調(diào)整飽合度獲得最終色彩。需要注意的是隨中性色明度依次降低，飽和度需要逐級(jí)增加。最后確保主要用色符合無障礙設(shè)計(jì)指南，我們對(duì)一級(jí)、二級(jí)、三級(jí)文字用色進(jìn)行了對(duì)比度測試，符合無障礙設(shè)計(jì)要求。

 

 

 

 

 

四、生成梯度色板

 

梯度色板可以提供更多配色，覆蓋更多使用場景，避免后續(xù)新增顏色的煩惱。早期為了獲得梯度色板需要設(shè)計(jì)師利用公式計(jì)算，現(xiàn)在可以直接使用在線工具生成。如Ant design的色板生成工具（https://ant.design/docs/spec/colors），Material design的色板生成工具（https://materialpalettes.com/），Eva Design System的色版生成工具（https://colors.eva.design/）。由于不同平臺(tái)算法不同，生成的色版效果也存在差異，這里首推Ant design，對(duì)比其他平臺(tái)色相變化更豐富、顏色更均勻、色階也更明確。

 

 

 

 


五、建立色彩系統(tǒng)

 

1、如何理解色彩系統(tǒng)？

 

色彩系統(tǒng)隸屬設(shè)計(jì)系統(tǒng)的一部分，是對(duì)色彩進(jìn)行科學(xué)管理的體系。不同于色彩規(guī)范主要針對(duì)設(shè)計(jì)側(cè)，而是需要打通開發(fā)聚焦產(chǎn)品代碼中。


2、色彩系統(tǒng)包含什么？

 

簡單來說色彩系統(tǒng)由design token、色彩庫和說明文檔構(gòu)成。design token是設(shè)計(jì)與開發(fā)約定一致的色彩名稱，作為色彩調(diào)用的唯一憑證。色彩庫是包含design token和顏色參數(shù)的樣式集合，供我們?cè)谠O(shè)計(jì)和開發(fā)中調(diào)用。說明文檔類似于設(shè)計(jì)規(guī)范，定義了色彩的使用方式，為我們的使用提供指導(dǎo)。


3、如何建立色彩系統(tǒng)

 

a、token命名

 

如何命名需要考慮token層級(jí)和token構(gòu)成。

 

關(guān)于token層級(jí)，設(shè)計(jì)師Lukas Oppermann在文章《Naming design tokens》(https://medium.com/user-experience-design-1/naming-design-tokens-9454818ed7cb)中有提到一般設(shè)計(jì)系統(tǒng)會(huì)將token分為三個(gè)層級(jí)，核心token（core token）、語義token（semantic tokens）和組件 token（component tokens）。核心token存儲(chǔ)的是原始值作為構(gòu)建設(shè)計(jì)系統(tǒng)的基礎(chǔ)，語義token引用核心token，它的名稱描述了token的預(yù)期用途。組件token引用語義token，并將token綁定到對(duì)應(yīng)的組件。較多的層級(jí)可以使token命名更加清晰，但層層嵌套的邏輯也增加了管理的難度，Lukas Oppermann在文中提到也可以使用一層或兩層。

 

 

 

 

 

 

關(guān)于token構(gòu)成，體驗(yàn)設(shè)計(jì)師Nathan Curtis在《Naming Tokens in Design Systems》(https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676)一文中指出為了更加充分的描述token，token可以由名稱空間（namespace）、目標(biāo)對(duì)象（object）、基礎(chǔ)樣式（ base）、修飾符（Modifier）構(gòu)成。名稱空間對(duì)應(yīng)系統(tǒng)、主題名稱，目標(biāo)對(duì)象對(duì)應(yīng)組件、組件元素和復(fù)合組件，基礎(chǔ)樣式是token的主干部份，包含樣式、屬性、語義，修飾符表明狀態(tài)、尺度、模式等。由于篇幅原因，此處只是簡單介紹，感興趣的同學(xué)可以點(diǎn)擊原文查看。

 

 

 

 

 

 

按照兩位作者的觀點(diǎn)，筆者對(duì)本次色彩系統(tǒng)進(jìn)行了design token命名，如下所示：

 

 

 

 

 

 

b、建立樣式庫

 

樣式庫是設(shè)計(jì)與開發(fā)調(diào)用的基礎(chǔ)，需要在設(shè)計(jì)工具中實(shí)現(xiàn)token的層級(jí)邏輯，同時(shí)方便開發(fā)同學(xué)查看。筆者主要使用的工具是figma，F(xiàn)igma為我們提供了豐富的功能和插件建立樣式庫，以下會(huì)介紹些主流方式及優(yōu)缺點(diǎn)，大家按照項(xiàng)目實(shí)際情況選擇使用即可。

local style：figma支持將色彩定義為全局樣式，并對(duì)樣式進(jìn)行命名。設(shè)計(jì)在調(diào)用樣式后，開發(fā)便可以在查看面板看到對(duì)應(yīng)token，基本實(shí)現(xiàn)了樣式庫的作用。但local style不支持token的層級(jí)嵌套，只能實(shí)現(xiàn)單層級(jí)token。如果你的項(xiàng)目剛好使用了單層級(jí)token，那么建議你使用此功能。

 

 

 

 

 

 

local variables：在今年6月份的config大會(huì)中，figma發(fā)布了變量功能，雖然CEO Dylan Field先生說不會(huì)推出design tokens，但變量功能卻完美實(shí)現(xiàn)了token的作用。它支持將色彩定義為變量，且可以實(shí)現(xiàn)層級(jí)嵌套，開發(fā)在查看面板也可以方便的看到變量名稱，算是解決了figma在design token方面的缺陷。

 

 

 

 

 

 

Figma token：一款定義design token的插件，且支持token的層級(jí)嵌套。開發(fā)查看token名稱目前有兩種方式：1.可在 Figma token的inspect面板進(jìn)行查看，但插件需要在編輯模式下使用，意味著你需要給到開發(fā)編輯權(quán)限，這無疑會(huì)增加團(tuán)隊(duì)成本。2.插件支持將token轉(zhuǎn)化為figma樣式和變量，并保持當(dāng)前的token名稱，此時(shí)開發(fā)可以在figma的inspect面板查看token，建議使用此種方式，經(jīng)濟(jì)實(shí)惠。

 

 

 

 

 

 

 

c、輸出說明文檔及團(tuán)隊(duì)推進(jìn)

 

一般文檔內(nèi)容包含使用規(guī)則、注意事項(xiàng)、場景描述、token名稱、色值參數(shù)等等，也可根據(jù)實(shí)際情況作以增減。輸出說明文檔后，整個(gè)色彩系統(tǒng)搭建完成，接下來需要推進(jìn)團(tuán)隊(duì)使用。為確保整個(gè)系統(tǒng)在項(xiàng)目中順利落地，最好組織相關(guān)人員進(jìn)行一次宣講，介紹清楚使用規(guī)范及注意事項(xiàng)，明確要求嚴(yán)格按照系統(tǒng)執(zhí)行。

 

 


作者：Ye_susu
鏈接：https://www.zcool.com.cn/article/ZMTYwMTE3Ng==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
評(píng)論(0) 瀏覽(36)

產(chǎn)品設(shè)計(jì)如何利用心理學(xué)

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

產(chǎn)品設(shè)計(jì)的成功除了依賴設(shè)計(jì)方案和技術(shù)實(shí)現(xiàn)，還與用戶的心理密切相關(guān)。用戶心里決定了我們用怎樣的設(shè)計(jì)策略解決問題。我們常認(rèn)為人們做決策時(shí)是理性的，但其實(shí)用戶行為經(jīng)常是非理性，會(huì)受到情緒、習(xí)慣和社交環(huán)境的影響。了解這些心理學(xué)規(guī)律能幫助我們更好地的預(yù)測和引導(dǎo)用戶行為，優(yōu)化產(chǎn)品體驗(yàn)，提高用戶的粘性、留存率和轉(zhuǎn)化率，從而產(chǎn)品商業(yè)價(jià)值最大化。
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)


作者：DesignLink
鏈接：https://www.zcool.com.cn/article/ZMTY1MDk0MA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
評(píng)論(0) 瀏覽(57)

Banner布局在用戶界面中的設(shè)計(jì)樣式研究

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

前言
    Banner，這一設(shè)計(jì)元素對(duì)于我們?cè)O(shè)計(jì)師而言早已經(jīng)是司空見慣，其核心往往聚焦于視覺表現(xiàn)的層面，也是成為UI設(shè)計(jì)師重要能力play中的一環(huán)。今天要寫的，并非Banner在視覺藝術(shù)上的探索，而是其在UI場景中布局樣式的深度剖析。
    Banner圖作為產(chǎn)品中的一項(xiàng)基礎(chǔ)功能，其存在已是常態(tài)。在視覺創(chuàng)意的追求之外，UI層面的樣式布局也在不斷尋求突破與創(chuàng)新。
 
目錄
一、Banner 視覺層表現(xiàn)
二、Banner 布局樣式
三、總結(jié)
 
一、Banner視覺層表現(xiàn)
    作為界面視覺焦點(diǎn)，Banner通常以可交互的輪播組件形式呈現(xiàn)，這種動(dòng)態(tài)展示方式已成為現(xiàn)在產(chǎn)品的重要導(dǎo)航模式之一。它不僅是信息傳遞的載體，也是平臺(tái)與用戶對(duì)話的窗口，承載著活動(dòng)推廣、品牌宣發(fā)等核心內(nèi)容的展示使命。 在提升用戶注意力的設(shè)計(jì)探索中，Banner的視覺表現(xiàn)手法持續(xù)演進(jìn)。從設(shè)計(jì)維度來看，我們不僅要在創(chuàng)意構(gòu)思、版式布局、色彩搭配等基礎(chǔ)層面下功夫，更需在表現(xiàn)形式上尋求突破。
    基于動(dòng)態(tài)復(fù)雜度，我將Banner的表現(xiàn)形式歸納為四個(gè)層級(jí)：從基礎(chǔ)的靜態(tài)圖像，到輕量級(jí)的GIF動(dòng)畫，再到沉浸式的視頻背景，直至最具空間感的分層效果，每種形式都對(duì)應(yīng)著不同的設(shè)計(jì)目標(biāo)和用戶體驗(yàn)。
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
1.1靜態(tài)
    在眾多Banner表現(xiàn)形式中，靜態(tài)輪播圖因其高效的設(shè)計(jì)實(shí)現(xiàn)和便捷的技術(shù)支持而成為多數(shù)產(chǎn)品最普遍的選擇。
    這類Banner采用靜態(tài)圖片作為視覺載體，根據(jù)產(chǎn)品需求可分為兩種基礎(chǔ)模式：單一畫面呈現(xiàn)的簡約風(fēng)格，以及多畫面輪播的交互形式。其中，多圖輪播既支持自動(dòng)播放的時(shí)間軸切換，也允許用戶通過手勢滑動(dòng)進(jìn)行自主瀏覽，在保持視覺簡潔性的同時(shí)增加了交互維度。這種設(shè)計(jì)平衡了視覺效果與功能實(shí)用性，所以會(huì)成為多數(shù)產(chǎn)品的首選方案。
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
1.2動(dòng)態(tài)
    動(dòng)態(tài)Banner以生動(dòng)的表現(xiàn)力，在吸引用戶注意力方面展現(xiàn)出顯著優(yōu)勢。通過關(guān)鍵元素的微妙動(dòng)畫和CTA按鈕的交互反饋，能夠有效引導(dǎo)用戶視線，強(qiáng)化信息層級(jí)。
  在動(dòng)態(tài)Banner的應(yīng)用中，單圖形式往往更受青睞。雖然動(dòng)態(tài)效果能提升視覺吸引力，但過度使用可能導(dǎo)致"視覺噪音"，反而分散用戶注意力，降低核心信息的傳達(dá)效率。
    面對(duì)信息過載的數(shù)字環(huán)境。微交互動(dòng)畫作為一種優(yōu)雅的解決方案，在功能引導(dǎo)和視覺敘事兩個(gè)維度都發(fā)揮著重要作用，也已經(jīng)成為界面設(shè)計(jì)中不可或缺的設(shè)計(jì)語言。
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
1.3視頻
    視頻廣告作為一種成熟的營銷媒介，在短視頻文化盛行的當(dāng)下，已逐步融入Banner輪播體系。這類視頻Banner通常占據(jù)首屏黃金位置，配合明確的倒計(jì)時(shí)提示和便捷的關(guān)閉選項(xiàng)，為用戶提供可控的觀看體驗(yàn)。為減少對(duì)用戶的干擾，視頻默認(rèn)采用靜音播放模式，這種貼心的設(shè)計(jì)選擇體現(xiàn)了以用戶為中心的設(shè)計(jì)理念。
    在特定垂直領(lǐng)域，如影視類平臺(tái)，我們也能觀察到多視頻輪播的創(chuàng)新應(yīng)用。這種相對(duì)小眾的呈現(xiàn)方式，往往與平臺(tái)的內(nèi)容屬性高度契合，為特定用戶群體提供沉浸式的瀏覽體驗(yàn)。這種差異化的設(shè)計(jì)策略，展現(xiàn)了產(chǎn)品設(shè)計(jì)中對(duì)場景化需求的深入思考。
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
1.4分層
    在追求差異化體驗(yàn)的設(shè)計(jì)浪潮中，輪播廣告正在突破傳統(tǒng)平面展示的局限。分層視覺設(shè)計(jì)以其獨(dú)特的空間感和動(dòng)態(tài)層次，為Banner設(shè)計(jì)注入了新的活力。這種創(chuàng)新表現(xiàn)形式包含多層次的視覺構(gòu)建：從基礎(chǔ)的內(nèi)容層疊加視覺，到更具空間感的3D翻轉(zhuǎn)效果，再到前景與背景的智能分離運(yùn)動(dòng)，每種方式都在重新定義用戶與廣告內(nèi)容的交互方式。
    基于視覺層次的運(yùn)動(dòng)差異，設(shè)計(jì)出引人入勝的視覺敘事，能夠有效的提升用戶參與度以及更具沉浸感和記憶點(diǎn)廣告體驗(yàn)。
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
小結(jié)
    Banner的視覺創(chuàng)新是提升內(nèi)容吸引力的關(guān)鍵驅(qū)動(dòng)力。
    每一種新的視覺語言都是我們與用戶對(duì)話的新方式，是提升信息傳達(dá)效率的重要途徑。在競爭激烈的市場環(huán)境中，差異化的表現(xiàn)形式往往能成為抓住用戶注意力的制勝法寶，這也是為什么我們要不斷突破常規(guī)，尋求更具感染力的視覺解決方案。
 
二、Banner布局樣式
    在確定Banner的視覺表現(xiàn)手法后，就得深入研究其在界面布局中的空間關(guān)系。布局樣式的多樣性源于多個(gè)設(shè)計(jì)維度的考量：從Banner的寬高比例、尺寸規(guī)格，到其與頁面結(jié)構(gòu)的整合方式（通欄或分欄），再到其與周圍元素的視覺關(guān)系（獨(dú)立呈現(xiàn)或背景融合）等。
    就通欄與分欄布局而言，這種結(jié)構(gòu)性選擇直接影響B(tài)anner的視覺占比。雖然直覺告訴我們更大的Banner更具吸引力，但優(yōu)秀的設(shè)計(jì)需要平衡信息層級(jí)與視覺舒適度。Banner的布局不應(yīng)是孤立的決策，而應(yīng)該與整體界面風(fēng)格和諧統(tǒng)一，既要突出又要融入，在視覺沖擊力和界面協(xié)調(diào)性之間找到最佳平衡點(diǎn)。這種全局性的設(shè)計(jì)思維，正是打造優(yōu)質(zhì)用戶體驗(yàn)的關(guān)鍵點(diǎn)所在。
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
    在處理深色系頭部界面時(shí)，我們常采用Banner與背景層疊的設(shè)計(jì)策略。這種手法通過建立視覺深度，創(chuàng)造出富有層次的空間感。背景色的處理有兩種方式：一是采用固定色值保持統(tǒng)一性，二是根據(jù)輪播圖主色調(diào)動(dòng)態(tài)調(diào)整，后者能實(shí)現(xiàn)更自然的視覺過渡，提升整體設(shè)計(jì)的融合度與空間縱深感。
    在Banner比例方面，選擇直接影響高度控制，需要根據(jù)界面內(nèi)容密度靈活調(diào)整。除了基于內(nèi)容需求的自定義方案，許多人會(huì)采用數(shù)學(xué)比例系統(tǒng)進(jìn)行規(guī)范化設(shè)計(jì)。其中，基于斐波那契數(shù)列推導(dǎo)出的8:5、8:3等比例關(guān)系，因其視覺舒適度而被廣泛采用。在實(shí)際應(yīng)用中，我更傾向于選擇能被4整除的數(shù)值，既符合開發(fā)規(guī)范，又能確保在不同設(shè)備上的適配性。
Banner布局在用戶界面中的設(shè)計(jì)樣式研究
 
 
以經(jīng)驗(yàn)作為基石，而不是限制，特殊情況特殊對(duì)待，就像配合前端工程師調(diào)整設(shè)計(jì)圖樣式一樣，靈活運(yùn)用。
 
三、總結(jié)
    Banner作為頁面中的常見元素，與其說是對(duì)布局樣式的探索，不如說是對(duì)用戶體驗(yàn)的深度挖掘。每一次布局創(chuàng)新都是對(duì)用戶與頁面互動(dòng)方式的重新思考。
    一個(gè)恰到好處的留白、一次精準(zhǔn)的視覺引導(dǎo)、一個(gè)流暢的交互過渡，這些細(xì)微之處都可能成為提升產(chǎn)品體驗(yàn)的關(guān)鍵。 當(dāng)我們能夠系統(tǒng)性地把控每個(gè)設(shè)計(jì)細(xì)節(jié)，將用戶需求轉(zhuǎn)化為優(yōu)雅的解決方案時(shí)，就能做出真正打動(dòng)人心的頁面設(shè)計(jì)。


作者：Syic
鏈接：https://www.zcool.com.cn/article/ZMTY1MTk1Mg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 
評(píng)論(0) 瀏覽(41)

為什么我沒有這樣的設(shè)計(jì)思維呢？

天宇 設(shè)計(jì)思維

設(shè)計(jì)能力的強(qiáng)弱取決于設(shè)計(jì)思維，技能操作層面的不足可以通過反復(fù)訓(xùn)練，在短時(shí)間內(nèi)即可彌補(bǔ)；而設(shè)計(jì)思維需要通過長時(shí)間的熏陶，還要找對(duì)學(xué)習(xí)的方法和途徑。很多設(shè)計(jì)師工作五年甚至十年，但是設(shè)計(jì)能力依然比較普通，很大程度上還是設(shè)計(jì)思維能力的缺失。
 
我們也可以通過體驗(yàn)和分析優(yōu)秀的案例來提升，學(xué)習(xí)優(yōu)秀設(shè)計(jì)師的設(shè)計(jì)思路和處理技巧，以此來強(qiáng)化自我專業(yè)思維。今天黑馬哥繼續(xù)給大家分享一些優(yōu)秀的設(shè)計(jì)案例，希望可以助力提高大家的設(shè)計(jì)思維。
為什么我沒有這樣的設(shè)計(jì)思維呢？
 
 
 
 
體驗(yàn)?zāi)夸?/div>
 
一、不一樣的返回設(shè)計(jì)
二、可以切換大小的設(shè)計(jì)布局
三、做減法的設(shè)計(jì)表達(dá)
四、品牌動(dòng)態(tài)渲染春節(jié)氛圍
五、品牌插畫表現(xiàn)界面置底
六、動(dòng)態(tài)刷新紅包設(shè)計(jì)
七、涂鴉風(fēng)格的流程設(shè)計(jì)
八、情感化閃屏設(shè)計(jì)
九、圖標(biāo)設(shè)計(jì)的翻轉(zhuǎn)動(dòng)效
十、蛇年主題圖標(biāo)設(shè)計(jì)
 
 
 
一、不一樣的返回設(shè)計(jì)
 
進(jìn)入層級(jí)界面可以通過返回回到上一級(jí)操作場景，通常都是以箭頭圖標(biāo)、返回文字組合設(shè)計(jì)或者獨(dú)立設(shè)計(jì)。
 
最近在體驗(yàn)喵喵記賬 App 時(shí)，其返回設(shè)計(jì)以“門”作為創(chuàng)意元素，進(jìn)入層級(jí)界面時(shí)門會(huì)打開，點(diǎn)擊返回時(shí)會(huì)有關(guān)門的動(dòng)作。以開關(guān)門的方式表達(dá)進(jìn)入和返回狀態(tài)，形象化的表達(dá)了不一樣的返回設(shè)計(jì)，呈現(xiàn)出不同的設(shè)計(jì)解決方案。
為什么我沒有這樣的設(shè)計(jì)思維呢？
 
 
 
 
二、可以切換大小的設(shè)計(jì)布局
 
為了滿足更多用戶的體驗(yàn)需求，設(shè)計(jì)布局的靈活性變得越來越重要，需要提供多種選擇便于操作。
 
在藏書館 App 中，針對(duì)書庫分類的展示設(shè)計(jì)，用戶可以通過點(diǎn)擊切換呈現(xiàn)不同大小的樣式。文字和書籍封面圖都會(huì)隨著切換而縮放，方便滿足不同用戶的瀏覽需求，提升用戶對(duì)產(chǎn)品的操作體驗(yàn)度。
為什么我沒有這樣的設(shè)計(jì)思維呢？
 
 
 
 
三、做減法的設(shè)計(jì)表達(dá)
 
隨著互聯(lián)網(wǎng)環(huán)境的發(fā)展，提供給大家的產(chǎn)品選擇越來越豐富，而產(chǎn)品設(shè)計(jì)也從最初的功能性服務(wù)擴(kuò)展到綜合性服務(wù)。功能變得越來越多，商業(yè)氛圍也十分濃厚，有種眼花繚亂的感覺。
 
最近在使用美團(tuán)外賣柜小程序時(shí)，其簡約的設(shè)計(jì)印象深刻。存取功能一目了然，沒有多余的設(shè)計(jì)干擾體驗(yàn)，操作指引也是簡單易懂。有時(shí)候減法的設(shè)計(jì)才是最好的用戶體驗(yàn)，與其布局一堆功能或者服務(wù)，反而增加了用戶的操作成本。
為什么我沒有這樣的設(shè)計(jì)思維呢？
 
 
 
 
四、品牌動(dòng)態(tài)渲染春節(jié)氛圍
 
春節(jié)氛圍感營造對(duì)于品牌來說至關(guān)重要，是渲染春節(jié)主題和增強(qiáng)用戶親和力的關(guān)鍵，營造方式也是豐富多樣。
 
其中夸克 App 通過品牌 LOGO 結(jié)合春節(jié)主題進(jìn)行動(dòng)態(tài)設(shè)計(jì)，不僅突出春節(jié)氛圍，動(dòng)效過渡也非常流暢。夸克經(jīng)常會(huì)以品牌動(dòng)態(tài)化的形式表現(xiàn)節(jié)日或者特殊活動(dòng)主題，設(shè)計(jì)融合性處理得十分細(xì)致。
為什么我沒有這樣的設(shè)計(jì)思維呢？
 
 
 
 
五、品牌插畫表現(xiàn)界面置底
 
界面設(shè)計(jì)過程中，對(duì)于到達(dá)底部的處理方式通常有品牌表達(dá)、公司名稱、版權(quán)信息、情感化內(nèi)容表達(dá)等。
 
最近在體驗(yàn)我要做計(jì)劃 App 時(shí)，界面設(shè)計(jì)底部以品牌 IP 形式的插畫進(jìn)行表達(dá)，不僅符合整體設(shè)計(jì)風(fēng)格，也使得界面設(shè)計(jì)更有趣味性。整個(gè)產(chǎn)品設(shè)計(jì)也以插畫風(fēng)格為主，是一個(gè)很有個(gè)性化的產(chǎn)品。
為什么我沒有這樣的設(shè)計(jì)思維呢？
 
 
 
 
六、動(dòng)態(tài)刷新紅包設(shè)計(jì)
 
結(jié)合刷新設(shè)計(jì)賦予更多功能或者服務(wù)，已經(jīng)成為二層樓設(shè)計(jì)的首選。
 
最近在體驗(yàn)美團(tuán)外賣時(shí)，首頁下拉刷新會(huì)出現(xiàn)紅包樣式的動(dòng)效表達(dá)，隨著下拉的程度不同，紅包金額會(huì)隨之增加或者減少。動(dòng)態(tài)刷新紅包設(shè)計(jì)更能吸引用戶繼續(xù)體驗(yàn)，進(jìn)而進(jìn)入二層樓參與活動(dòng)，趣味性的表達(dá)方式很有吸引力，也以此方式促進(jìn)了用戶參與感。
為什么我沒有這樣的設(shè)計(jì)思維呢？
 
 
為什么我沒有這樣的設(shè)計(jì)思維呢？
 
 
 
 
七、涂鴉風(fēng)格的流程設(shè)計(jì)
 
隨著同質(zhì)化設(shè)計(jì)的現(xiàn)象，產(chǎn)品設(shè)計(jì)也在不斷嘗試更具差異化的風(fēng)格。結(jié)合插畫風(fēng)格表達(dá)界面設(shè)計(jì)，變得越來越普及。
 
在我要做計(jì)劃 App 設(shè)計(jì)中，整體風(fēng)格以涂鴉插畫風(fēng)為主，完善做計(jì)劃流程設(shè)計(jì)也以涂鴉風(fēng)格進(jìn)行設(shè)計(jì)。不僅風(fēng)格特征更突出，也能吸引用戶的關(guān)注度，促進(jìn)完善計(jì)劃流程。
為什么我沒有這樣的設(shè)計(jì)思維呢？
 
 
 
 
八、情感化閃屏設(shè)計(jì)
 
閃屏設(shè)計(jì)分為品牌感方向和營銷廣告等方向，其中閃屏廣告較為常見，不過也有品牌啟動(dòng)頁和閃屏廣告相結(jié)合的方式。
 
閃屏設(shè)計(jì)的形式也非常多樣，其中情感化的方向以 IP 形象和情感故事性插畫為主。比如喜馬拉雅閃屏設(shè)計(jì)便以 IP 形象的各種動(dòng)態(tài)化形式呈現(xiàn)，畫面非固定表達(dá)形式，每次重新打開都會(huì)有所不同，IP 動(dòng)態(tài)也非常俏皮可愛。
為什么我沒有這樣的設(shè)計(jì)思維呢？
 
 
 
 
九、圖標(biāo)設(shè)計(jì)的翻轉(zhuǎn)動(dòng)效
 
圖標(biāo)動(dòng)效的運(yùn)用非常普及，以往見過的案例都是動(dòng)效的形式表達(dá)圖標(biāo)的不同形式感，但是圖標(biāo)的含義不會(huì)受到影響。
 
最近在體驗(yàn)盒馬 App 時(shí)，首頁金剛區(qū)圖標(biāo)以翻轉(zhuǎn)動(dòng)效進(jìn)行表達(dá)，既突出春節(jié)氛圍也賦予圖標(biāo)兩層含義。在保留圖標(biāo)本身功能含義的同時(shí)，通過翻轉(zhuǎn)另一面表達(dá)出不同的意思，也是一個(gè)新的圖標(biāo)動(dòng)效表達(dá)思維。
為什么我沒有這樣的設(shè)計(jì)思維呢？
 
 
 
 
十、蛇年主題圖標(biāo)設(shè)計(jì)
 
蛇年春節(jié)主題設(shè)計(jì)在產(chǎn)品中的運(yùn)用很豐富，其中在圖標(biāo)設(shè)計(jì)中的運(yùn)用是最普遍的，廣泛運(yùn)用于應(yīng)用圖標(biāo)、金剛區(qū)圖標(biāo)、底部標(biāo)簽欄圖標(biāo)和其他功能圖標(biāo)等。
 
圖標(biāo)設(shè)計(jì)的運(yùn)用形式很多，比如蛇年主題文案嵌入、生肖蛇相關(guān)元素設(shè)計(jì)、春節(jié)元素設(shè)計(jì)等。表現(xiàn)形式以立體質(zhì)感居多，配色以突出春節(jié)氛圍為主。
為什么我沒有這樣的設(shè)計(jì)思維呢？
 
 
 
小結(jié)
 
設(shè)計(jì)思維除了依靠自身專業(yè)基礎(chǔ)以外，通過不斷學(xué)習(xí)分析優(yōu)秀的案例也能不斷提升，希望本期的案例分享可以帶給大家更多靈感。
 


作者：黑馬青年
鏈接：https://www.zcool.com.cn/article/ZMTY1MDc0OA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
評(píng)論(0) 瀏覽(50)

這些提升用戶體驗(yàn)的小技巧，你知道嗎？

天宇 設(shè)計(jì)思維

為了幫助大家更輕松地提升設(shè)計(jì)水平，這里整理了一些簡單實(shí)用的小貼士。希望這些小技巧不僅能夠助力您優(yōu)化當(dāng)前的設(shè)計(jì)項(xiàng)目，還能在未來的設(shè)計(jì)之旅中為您提供參考價(jià)值。
 
 
 
21.將不相關(guān)的字段隱藏
在設(shè)計(jì)表單時(shí)，建議不要一次性展示所有信息和步驟，而是在用戶真正需要的時(shí)候再呈現(xiàn)，這樣可以更好地管理復(fù)雜性。如果用戶一打開表單就看到大量的內(nèi)容，可能會(huì)感到壓力很大，甚至?xí)艞壧顚憽?/div>
因此，我們可以隱藏那些不相關(guān)的信息，去掉不必要的字段。通過合理地簡化表單內(nèi)容，可以減輕用戶的心理負(fù)擔(dān)，確保只有在他們需要的時(shí)候才顯示必要的信息，從而減少他們?cè)谔顚懫渌韱雾?xiàng)時(shí)的干擾。
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
 
 
22.統(tǒng)一風(fēng)格的圖片更有高級(jí)感
在選擇圖片時(shí)，我們的目標(biāo)是實(shí)用性和一致性，而不是過分追求華麗的效果。如果只是一味地追求美觀，可能會(huì)導(dǎo)致圖片風(fēng)格各異，從而破壞整體的視覺統(tǒng)一性，影響用戶的體驗(yàn)。因此，設(shè)計(jì)師在挑選圖片時(shí)，需要對(duì)風(fēng)格進(jìn)行精確的把控，或者在后期進(jìn)行適當(dāng)?shù)奶幚?，以確保所有圖片都能呈現(xiàn)出一致的視覺效果。
圖片的風(fēng)格對(duì)整個(gè)App的整體感覺和用戶的情緒有著重要的影響。風(fēng)格一致的圖片不僅能帶來愉悅的視覺享受，還能激發(fā)美好的聯(lián)想。我們可以從以下幾個(gè)方面來控制圖片的風(fēng)格：
● 類型：如位圖、插畫或形狀；
● 視角：如平視、仰視或俯視；
● 背景：如簡約、復(fù)雜或純色；
● 呈現(xiàn)區(qū)域：如堆積、局部或特寫；
● 構(gòu)圖：如中心、水平線、對(duì)稱或?qū)蔷€。
此外，還有很多其他抽象的方式來調(diào)整圖片，雖然這些方法不是絕對(duì)的，但我們可以通過多角度的嘗試，力求讓每一張圖片都達(dá)到最佳的視覺效果。
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
 
 
23.在中性色中融入色相
在上一期的內(nèi)容中，我們探討了如何設(shè)置中性色。當(dāng)飽和度（S值）為0時(shí)，通過調(diào)整亮度（B值）4到5個(gè)等級(jí)，可以很好地表達(dá)信息的層次結(jié)構(gòu)。這種方法雖然有助于保證設(shè)計(jì)不出錯(cuò)，并能滿足最基本的需求，但在追求更高層次創(chuàng)意的設(shè)計(jì)項(xiàng)目中，可能會(huì)顯得有些單一。
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
在更為成熟和全面的產(chǎn)品中，設(shè)計(jì)師們往往不會(huì)僅僅依靠純灰色作為唯一的中性色調(diào)。通常會(huì)在基礎(chǔ)的灰色調(diào)中加入一些微妙的色相變化。這樣做不僅可以讓整體視覺效果更加豐富，而且還能有效避免畫面因過于依賴灰色而顯得僵硬或缺乏活力。
常用的方法是在中性色中融入少量藍(lán)色調(diào)。藍(lán)色能夠傳遞出一種平靜、穩(wěn)重的感覺，給界面帶來柔和而不突兀的變化，同時(shí)保持良好的清晰度。
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
需要注意的是，在加入新色相時(shí)，我們的目標(biāo)是創(chuàng)造顏色間的細(xì)微差別，幾乎達(dá)到難以察覺的程度，而不是讓這些差異成為用戶注意力的焦點(diǎn)，這樣才更有利于提升界面的整體質(zhì)感。因此，對(duì)于較淺的顏色來說，所添加的色相強(qiáng)度應(yīng)當(dāng)控制得很低，反之，顏色越深則添加的色相越多，類似下面的這種曲線：
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
 
 
24.第三方圖標(biāo)風(fēng)格應(yīng)保持一致
大多數(shù)應(yīng)用程序都支持通過第三方平臺(tái)登錄，這種方式可以顯著降低用戶在登錄注冊(cè)時(shí)所需花費(fèi)的時(shí)間成本。這種便捷的登錄方式一般在登錄頁面的底部提供多個(gè)（如微信、QQ、微博等）圖標(biāo)入口。然而，很多設(shè)計(jì)師會(huì)忽略一個(gè)細(xì)節(jié)，就是直接將第三方平臺(tái)提供的官方圖標(biāo)，簡單地調(diào)整大小使之統(tǒng)一，然后整齊排列在一起，并沒有進(jìn)一步針對(duì)整體視覺效果進(jìn)行專門的設(shè)計(jì)優(yōu)化。
對(duì)于追求高品質(zhì)用戶體驗(yàn)的產(chǎn)品來說，任何不起眼的小細(xì)節(jié)都不應(yīng)該被忽略。在處理第三方圖標(biāo)時(shí)，應(yīng)以自己產(chǎn)品的圖標(biāo)風(fēng)格為基礎(chǔ)，對(duì)所使用的第三方登錄圖標(biāo)進(jìn)行重新設(shè)計(jì)或適當(dāng)調(diào)整。這不僅能夠確保整個(gè)界面風(fēng)格的一致性，提升美觀度，還能增強(qiáng)品牌識(shí)別度，讓用戶在整個(gè)使用過程中感受到更加連貫且專業(yè)的體驗(yàn)。
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
 
 
25.可視化密碼比輸入兩次更直觀
為了提升您的使用體驗(yàn)，并確保密碼的安全性，可以讓用戶在輸入密碼時(shí)自由選擇顯示或隱藏密碼內(nèi)容。這種方式替代了傳統(tǒng)的雙次輸入驗(yàn)證方式，尤其有助于創(chuàng)建有效的密碼。用戶可以直接看到自己設(shè)置的密碼是否滿足安全標(biāo)準(zhǔn)，同時(shí)也減少了因重復(fù)輸入而造成的錯(cuò)誤。
另外，系統(tǒng)應(yīng)當(dāng)明確地展示密碼的具體要求，并為用戶提供即時(shí)反饋，幫助他們了解如何構(gòu)建更安全的密碼。例如，在用戶開始輸入密碼時(shí)，界面下方可以實(shí)時(shí)更新密碼強(qiáng)度（如弱、中等、強(qiáng)）及已滿足的安全條件（比如長度、包含數(shù)字/符號(hào)/大小寫字母等）。這樣做不僅能讓用戶更好地理解什么是好的密碼實(shí)踐，還能激勵(lì)他們遵循這些建議，從而提高賬號(hào)的整體安全性。
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
 
 
26.使用合適的表單錄入控件
在設(shè)計(jì)表單時(shí)，選擇合適的輸入控件可以幫助用戶更好地理解每個(gè)字段需要填寫的信息量。
  •  
    能通過選擇來完成的操作就不要讓用戶手動(dòng)輸入，這樣不僅方便了用戶操作，也減少了錯(cuò)誤的發(fā)生。
  •  
    對(duì)于那些內(nèi)容較短的輸入項(xiàng)，比如姓名或電話號(hào)碼，可使用單行輸入框，前提是確保讓所有輸入的內(nèi)容都能清晰可見。
  •  
    像評(píng)論、反饋或這種可能包含較多文字的地方，應(yīng)使用多行文本框。這樣用戶能更輕松地查看和編輯文本內(nèi)容。同時(shí)，我們還可以通過一些視覺提示，例如滾動(dòng)瀏覽、輸入框右下角的高度調(diào)整等，這樣更便于用戶操作。
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
 
 
27.提供解決方案助力轉(zhuǎn)化
在UI設(shè)計(jì)過程中，當(dāng)用戶嘗試進(jìn)行某項(xiàng)操作時(shí)，因未滿足特定條件或出現(xiàn)操作失誤而無法繼續(xù)，這可能會(huì)對(duì)轉(zhuǎn)化率產(chǎn)生負(fù)面影響。為了改善這種情況，在設(shè)計(jì)時(shí)可以采取更加貼心的做法：明確告知用戶為何無法進(jìn)入下一步，并提供具體的解決建議。這樣做對(duì)于提升轉(zhuǎn)化率非常有幫助。
比如，在用戶打算用賬戶余額購買服務(wù)的情況下，如果僅僅提示“余額不足”，用戶可能會(huì)感到困惑，甚至需要多次嘗試不同的路徑來完成充值和購買過程。一個(gè)更佳的解決方案是直接向用戶展示當(dāng)前賬戶余額，并提供快速充值鏈接。這樣一來，用戶可以直接通過這個(gè)鏈接輕松完成充值，隨后順利購買所需服務(wù)。這樣的設(shè)計(jì)不僅簡化了操作流程，也大大提升了用戶體驗(yàn)的流暢度。
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
 
 
28.標(biāo)簽欄的高級(jí)感
大多數(shù)標(biāo)簽欄設(shè)計(jì)都傾向于簡潔風(fēng)格，主要通過選中和未選中的狀態(tài)來區(qū)分不同的選項(xiàng)。狀態(tài)的變化依靠文字顏色的變換或在選中的標(biāo)簽下方添加一個(gè)小橫條來實(shí)現(xiàn)。盡管這樣的設(shè)計(jì)看起來簡單，但要想讓它脫穎而出卻并不容易。
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
很多產(chǎn)品從其品牌的獨(dú)特性中汲取靈感，利用品牌作為用戶熟悉且喜愛的形象作為設(shè)計(jì)的基礎(chǔ)，這樣做不僅能夠建立一種視覺上的連貫性，讓用戶感受到內(nèi)外一致的美好體驗(yàn)，同時(shí)也能加深他們對(duì)品牌形象的記憶。除此之外，加入一些有趣味性的圖案也是一個(gè)不錯(cuò)的選擇，它們能以獨(dú)特的方式吸引用戶的注意力，為用戶提供更加愉悅的視覺感受。
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
 
 
29.合理的規(guī)范輸入格式
在表單設(shè)計(jì)過程中，雖然大多數(shù)輸入項(xiàng)可以采用通用的處理方式，無需特別干預(yù)，但一些特殊類型的表單項(xiàng)，設(shè)定合理的格式約束顯得尤為重要。這樣做不僅有助于系統(tǒng)更準(zhǔn)確地收集數(shù)據(jù)，還能有效減少用戶填寫錯(cuò)誤的可能性，提升整體數(shù)據(jù)質(zhì)量。
對(duì)于某些特定信息如地址、手機(jī)號(hào)碼以及銀行卡號(hào)等，可通過技術(shù)手段自動(dòng)為這些長串文字自動(dòng)添加分隔符，如空格或短橫線，這樣做能夠使信息更加直觀易讀，便于用戶檢查自己所填內(nèi)容是否正確無誤；同時(shí)，也使得后續(xù)的數(shù)據(jù)處理工作變得更加簡單高效。
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
 
 
30.頁面加載中，提前展示布局
在眾多產(chǎn)品中，用戶界面的數(shù)據(jù)或內(nèi)容在完全加載之前通常僅顯示空白頁面。這種處理方式可能導(dǎo)致用戶困惑，因?yàn)樗麄儫o法確定當(dāng)前狀態(tài)是正在加載、已加載完畢但無內(nèi)容可展示，還是遇到了錯(cuò)誤。
實(shí)際上，用戶界面的布局往往是相對(duì)固定的。因此，在實(shí)際內(nèi)容加載完成前，提前向用戶展示界面的基本結(jié)構(gòu)是一種更為友好的設(shè)計(jì)策略。因?yàn)樵诘却龜?shù)據(jù)加載的過程中，用戶能夠預(yù)覽即將呈現(xiàn)的內(nèi)容框架，從而減少了不確定性帶來的焦慮感。
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
此外，這一做法符合人機(jī)交互設(shè)計(jì)中的一個(gè)重要原則——系統(tǒng)狀態(tài)可見性。根據(jù)該原則，產(chǎn)品應(yīng)當(dāng)清晰地告知用戶當(dāng)前發(fā)生了什么，并提供足夠的反饋信息以幫助其理解系統(tǒng)的現(xiàn)狀及后續(xù)步驟。通過預(yù)先展示UI布局，應(yīng)用程序不僅表明了正在處理請(qǐng)求的狀態(tài)，還為用戶構(gòu)建了一個(gè)對(duì)未來操作環(huán)境的心理預(yù)期模型，進(jìn)而提升了用戶體驗(yàn)的整體滿意度與效率。
 
 
31.表單頁內(nèi)容過長，適當(dāng)進(jìn)行分頁
在對(duì)表單內(nèi)容進(jìn)行了精簡處理后，依然顯得很長，應(yīng)該避免一次性向用戶展示所有信息。過長的表單不僅會(huì)增加用戶的填寫時(shí)間，還可能引發(fā)用戶的困惑與不滿情緒，最終導(dǎo)致放棄填寫。為此，建議根據(jù)邏輯關(guān)系及屬性將表單項(xiàng)合理地分配到多個(gè)頁面中，且清晰展示整個(gè)流程進(jìn)度情況。這樣可以使用戶感受到填寫過程更加簡便流暢，同時(shí)也能幫助他們更好地理解整個(gè)表單結(jié)構(gòu)，從而專注于當(dāng)前的任務(wù)。
值得注意的是，在采用分頁策略時(shí)，需謹(jǐn)慎平衡分頁的數(shù)量與步驟的復(fù)雜度。過度細(xì)分會(huì)無謂地增加操作環(huán)節(jié)，反而可能引起用戶的反感，進(jìn)而產(chǎn)生新的問題。因此，在規(guī)劃分頁方案時(shí)，應(yīng)當(dāng)綜合考慮簡潔性和易用性原則，確保最終方案既能有效簡化任務(wù)又能保持良好的用戶體驗(yàn)。
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
 
 
32.有時(shí)候，背景色比分割線更顯高級(jí)感
在過去，設(shè)計(jì)師們常常使用線條來清晰地劃分不同組件之間的界限。然而，在當(dāng)今流行的扁平化設(shè)計(jì)理念中，這樣的做法有時(shí)會(huì)讓頁面顯得有些擁擠，并且缺乏層次感。一個(gè)非常有效的替代方案是為相鄰元素選擇僅有細(xì)微差異的背景色來進(jìn)行區(qū)分。這種方式不僅能保持界面的整體美觀與簡潔，還能夠讓用戶更加自然流暢地識(shí)別出不同的信息區(qū)域。這樣在確保了內(nèi)容的可讀性和易用性的同時(shí)，也能為用戶提供更加舒適的視覺體驗(yàn)。
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
 
 
33.適當(dāng)加大觸控?zé)釁^(qū)
你是否有過這樣的體驗(yàn)：在使用某個(gè)應(yīng)用程序或網(wǎng)站時(shí)，對(duì)著界面上的按鈕一頓亂點(diǎn)，卻發(fā)現(xiàn)要么完全沒有反應(yīng)，要么系統(tǒng)反饋特別慢。你可能會(huì)懷疑是手機(jī)卡頓了或者網(wǎng)絡(luò)連接不穩(wěn)定，感覺非常糟糕。其實(shí)，很多時(shí)候這種情況并不是因?yàn)樵O(shè)備性能差或網(wǎng)絡(luò)問題，而是用戶界面設(shè)計(jì)上存在一些小缺陷。
設(shè)計(jì)師們都知道，在進(jìn)行UI設(shè)計(jì)時(shí)面臨著一個(gè)挑戰(zhàn)：如何在美觀性和實(shí)用性之間找到最佳平衡點(diǎn)？特別是對(duì)于像按鈕、超鏈接以及單選/復(fù)選框這樣的交互元素來說，它們的實(shí)際顯示大小往往很難達(dá)到人類手指接觸區(qū)域的理想尺寸。如果這些控件設(shè)計(jì)得太小，用戶就很難準(zhǔn)確點(diǎn)擊到目標(biāo)位置，導(dǎo)致操作效率降低甚至失敗。
從視覺效果考慮，當(dāng)某些功能性組件需要保持較小外觀時(shí)，我們可以確保可觸發(fā)區(qū)域足夠大。這樣即使用戶視線不那么集中，也能輕松完成任務(wù)，避免因誤觸或其他原因造成的不便。值得注意的是，無論該元素本身看起來有多小，它所關(guān)聯(lián)的觸控?zé)釁^(qū)都不應(yīng)低于標(biāo)準(zhǔn)值。例如，在iOS平臺(tái)上，推薦的最小可點(diǎn)擊區(qū)域大小為44x44 pt；而Android操作系統(tǒng)中，則建議至少保持48x48 pt。這樣保持了界面的美觀性，還能大大提升用戶的操作體驗(yàn)。
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
 
 
34.為圖片添加色彩層營造氛圍感
在圖片上添加色彩層或?qū)⑵滢D(zhuǎn)換為單一色調(diào)，可以創(chuàng)造出類似黑白照片的效果，這樣能顯著增強(qiáng)圖像中物體或人物的形態(tài)感。通過簡化色彩，觀眾的注意力更容易集中在圖像的核心內(nèi)容上，從而提升了視覺主體的表現(xiàn)力。
此外，選擇不同的單色調(diào)不僅能突出主題，還能有效營造特定的情感氛圍。比如，藍(lán)色調(diào)可能會(huì)給人帶來一種寧靜、平和的感覺；而暖色調(diào)如紅色或橙色，則可能激發(fā)溫暖、活力甚至是緊張的情緒。通過精心挑選和運(yùn)用色彩，我們可以極大地豐富視覺語言，提高圖像傳遞信息的能力。
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
 
 
35.使用前端驗(yàn)證，提升信息的有效性
前端驗(yàn)證是一種在用戶輸入信息時(shí)即時(shí)檢查數(shù)據(jù)有效性的方法，無需將數(shù)據(jù)發(fā)送到服務(wù)器。這項(xiàng)技術(shù)基于預(yù)先設(shè)定的規(guī)則，在用戶離開輸入框時(shí)自動(dòng)啟動(dòng)，能夠快速檢測諸如格式、長度或類型是否正確等問題。這樣做的好處在于，它能夠在用戶完成整個(gè)表單之前就發(fā)現(xiàn)并指出潛在錯(cuò)誤，從而提升了用戶體驗(yàn)和數(shù)據(jù)準(zhǔn)確性，避免了等到最后提交才發(fā)現(xiàn)問題所帶來的不便。
在設(shè)置前端驗(yàn)證時(shí)，請(qǐng)記得不要過早開始校驗(yàn)過程，以免造成持續(xù)不斷的錯(cuò)誤提示，給用戶帶來困擾。最佳實(shí)踐是在用戶完全填寫完當(dāng)前項(xiàng)之后再進(jìn)行驗(yàn)證。這樣做既能保證及時(shí)給出反饋，又能避免因頻繁出現(xiàn)提示而打斷用戶的操作流程，讓整個(gè)體驗(yàn)更加順暢愉快。
02期 | 這些提升用戶體驗(yàn)的小技巧，你知道嗎？
 
 
 
 
結(jié)語
創(chuàng)造既美觀又高效且易于使用的UI界面確實(shí)需要投入不少時(shí)間和精力，還可能要經(jīng)歷多次的迭代與改進(jìn)。不過，正是通過這一系列細(xì)致入微的調(diào)整過程，我們才能打磨出一款讓客戶、用戶以及我們自己都感到滿意的優(yōu)秀作品。



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

 

 

 

評(píng)論(0) 瀏覽(63)

用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格

天宇 設(shè)計(jì)思維

 
 
一、什么是視覺風(fēng)格？
在理解“視覺風(fēng)格”這個(gè)詞之前，我們先把它拆開來看，先嘗試?yán)斫庀率裁词?ldquo;風(fēng)格”。
"風(fēng)格" ，是一個(gè)相對(duì)抽象的概念，指的是一種在作品或創(chuàng)作中表現(xiàn)出來的獨(dú)特方式或特征。
相較與“視覺風(fēng)格“，它通常是一個(gè)更廣泛的概念，可以應(yīng)用于多個(gè)領(lǐng)域，包括藝術(shù)、設(shè)計(jì)、文學(xué)、音樂等，具體體現(xiàn)在內(nèi)容、形式、技巧、表現(xiàn)等方式上。
"視覺風(fēng)格" 是風(fēng)格的一個(gè)具體領(lǐng)域，通常用在藝術(shù)、設(shè)計(jì)和多媒體上，比如我們常說的插畫風(fēng)、攝影風(fēng)、平面風(fēng)、網(wǎng)頁風(fēng)、OS 系統(tǒng)風(fēng)格等。
視覺風(fēng)格強(qiáng)調(diào)了視覺元素和視覺方面的獨(dú)特性，如顏色、構(gòu)圖、圖案、排版、字體、動(dòng)畫等。通過這些視覺要素，創(chuàng)造出一種獨(dú)特的視覺外觀，帶給用戶情感上的感受。
一個(gè)成熟的視覺風(fēng)格，往往會(huì)給人帶來一種特定的感覺，并與特定的產(chǎn)品產(chǎn)生關(guān)聯(lián)，形成心理印記，從而因?yàn)轱L(fēng)格而記住它，所以視覺風(fēng)格在產(chǎn)品設(shè)計(jì)中重要性不言而喻。
我們把話題再聚焦一點(diǎn)，今天主要聊聊互聯(lián)網(wǎng)產(chǎn)品的視覺風(fēng)格。
 
二、如何拆解視覺風(fēng)格？
當(dāng)我們體驗(yàn)到一個(gè)產(chǎn)品或者看到一張圖后，從哪些角度去拆解出它的風(fēng)格特征呢？
一般可以從作品中的色彩、排版、質(zhì)感、字體、動(dòng)畫、圖案、構(gòu)圖等等設(shè)計(jì)要素進(jìn)行分析，看看這些視覺元素組合關(guān)系和比重。
講到這里，在我們視覺設(shè)計(jì)領(lǐng)域的最新趨勢下，通常用六個(gè)字 ”形、色、字、構(gòu)、質(zhì)、動(dòng)“ 來制定視覺風(fēng)格帶給人的感受。
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
其實(shí)我在看作品集的時(shí)候，一般也是從這些角度去分析作品的專業(yè)度，然后再結(jié)合業(yè)務(wù)場景，看做的視覺方案能否有效解決業(yè)務(wù)問題。
另外，平時(shí)提到的審美練習(xí)，講究一個(gè)多看多分析，去思考設(shè)計(jì)背后的原理，組合方式。多去研究美的東西的特點(diǎn)，看細(xì)一些，也可以嘗試從以上這些角度去拆解一套視覺設(shè)計(jì)。
對(duì)視覺風(fēng)格有了理解，平時(shí)也知道從哪些角度去看一張圖了，那么接下來就需要多去了解一些比較常見的視覺
設(shè)計(jì)風(fēng)格
，了解具體的表現(xiàn)手法。
 
三、常見的視覺風(fēng)格有哪些？
當(dāng)把視覺風(fēng)格聚焦到 APP 和網(wǎng)頁設(shè)計(jì)等互聯(lián)網(wǎng)產(chǎn)品時(shí)，風(fēng)格其實(shí)也有很多，說一些比較常見的。
1. 蘋果風(fēng)（Apple Design）
以毛玻璃材質(zhì)為特點(diǎn)，絲滑的動(dòng)態(tài)效果，輕擬物的質(zhì)感。蘋果的設(shè)計(jì)強(qiáng)調(diào)平滑的曲線和圓潤的邊緣，常常使用明亮的顏色，注重圖像和照片的質(zhì)量。
 
 
 
iOS 17 風(fēng)格
iOS 17 風(fēng)格
 
 
mac os
mac os
 
 
iPad os
iPad os
 
 
iwatch os
iwatch os
 
 
2. 扁平化設(shè)計(jì)（Flat Design）
扁平設(shè)計(jì)是一種簡化的設(shè)計(jì)風(fēng)格，通常會(huì)用明亮的顏色、清晰的圖標(biāo)和簡化的界面元素。我印象中有一小段時(shí)間，這個(gè)風(fēng)格很流行，微軟是最早將這種設(shè)計(jì)風(fēng)格應(yīng)用于其界面的公司之一。
 
win8風(fēng)格
win8風(fēng)格
 
 
在
平面設(shè)計(jì)
中，所有元素都應(yīng)該有它存在的價(jià)值，哪怕裝飾元素也是如此。如果某個(gè)方面沒有任何功能用途，就會(huì)分散用戶的注意力。這就是扁平化設(shè)計(jì)簡約本質(zhì)的原因。
然而，僅僅因?yàn)樗狈θ魏稳A麗的設(shè)計(jì)并不意味著這種風(fēng)格很無聊。明亮、對(duì)比鮮明的顏色能輕松吸引注意力并引導(dǎo)用戶的視線。
有些設(shè)計(jì)師可能會(huì)覺得這種風(fēng)格過于樸素，就給它增加了一些其他細(xì)節(jié)，比如長投影就是那個(gè)時(shí)期出來的。
 
來源：aiki007
來源：aiki007
 
 
當(dāng)然上面這套長投影，年代比較久遠(yuǎn)了一點(diǎn)，下面這套作品的扁平風(fēng)格上就更現(xiàn)代一些。
 
來源：Mike | Creative Mints
來源：Mike | Creative Mints
 
 
 
3. 材質(zhì)設(shè)計(jì)（Material Design）
材質(zhì)設(shè)計(jì)是由 Google 推出的一種設(shè)計(jì)風(fēng)格，強(qiáng)調(diào)實(shí)際材質(zhì)和動(dòng)畫效果。它為應(yīng)用帶來層次感和現(xiàn)實(shí)感，同時(shí)提供了良好的用戶體驗(yàn)。完整的設(shè)計(jì)組件，可以參考官方地址：
https://m3.material.io
在這套風(fēng)格中，能看出來也是趨向于扁平化的，顏色在使用上飽和度也沒有很高，質(zhì)感也很克制，讓用戶更聚焦在內(nèi)容上。
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
4. 抽象藝術(shù)風(fēng)格（Abstract and Artistic Styles）
這種風(fēng)格常用在海報(bào)設(shè)計(jì)中，以吸引特定用戶或傳達(dá)創(chuàng)新的形象。這些風(fēng)格可能包括不尋常的圖形、顏色和排版。
這個(gè)風(fēng)格我印象最深的就是 Behance 上的一個(gè)老哥做的 365 天挑戰(zhàn)，每天一張腦洞海報(bào)，幾乎每一張都是精品。如果沒看過的也可以去圍觀下，我把地址也放上，ins 上還在更新。
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
5. 極簡主義（Minimalism）
極簡主義設(shè)計(jì)注重簡潔和內(nèi)容集中，通常使用簡化的元素和無冗余的界面。它適用于需要用戶專注于核心任務(wù)的應(yīng)用。
這種設(shè)計(jì)通常會(huì)用到大面積的留白，以及黑白灰的顏色搭配，高質(zhì)量的大圖，使得整個(gè)設(shè)計(jì)具備很強(qiáng)的高級(jí)感。
這個(gè)風(fēng)格我以前也有專門寫過文章《Behance 首頁推薦的作品集為什么這么高級(jí)？我們能從中學(xué)到什么？》。
 
來源：Shaban Iddrisu™
來源：Shaban Iddrisu™
 
 
來源： https://www.awwwards.com/sites/brainbox-ai
來源： https://www.awwwards.com/sites/brainbox-ai
 
 
來源：Huy Phan
來源：Huy Phan
 
 
來源：Hannes Ahremark
來源：Hannes Ahremark
 
 
6. 新擬物主義（neumorphism）
這種設(shè)計(jì)風(fēng)格，通過使用逼真的陰影和光線效果來模擬物理世界中的物體，同時(shí)保持扁平化和簡約的設(shè)計(jì)。
這種風(fēng)格曾經(jīng)內(nèi)風(fēng)靡了一陣子，現(xiàn)在好像又見得比較少了。
我其實(shí)對(duì)這種風(fēng)格不是太感冒，原因是這種質(zhì)感似乎顯得有些多余，還會(huì)占用一部分內(nèi)容空間，信息利用率不高。它的設(shè)計(jì)樣式也做的比較搶內(nèi)容，美觀度上我個(gè)人也不是太喜歡。
關(guān)于這種風(fēng)格設(shè)計(jì)，之前也寫過文章《新擬物化會(huì)是 2020 年的 UI 設(shè)計(jì)趨勢嗎？》
 
來源：Devanta Ebison
來源：Devanta Ebison
 
 
來源：Ceptari Tyas
來源：Ceptari Tyas
 
 
來源：Sèrgi Mi
來源：Sèrgi Mi
 
 
來源：Filip Legierski
來源：Filip Legierski
 
 
來源:https://www.interaction-design.org
來源:https://www.interaction-design.org
 
 
之前 QQ 的小世界第一版出來的時(shí)候也用到了這個(gè)風(fēng)格趨勢，給人眼前一亮的感覺。
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
即使是新擬物風(fēng)格，其中也是可以做一些不同發(fā)揮的，這里也可以一起看下他們當(dāng)時(shí)做的方案對(duì)比，體會(huì)下不同風(fēng)格的側(cè)重點(diǎn)
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
7. 科技和未來主義（Tech and Futuristic Styles）
科技和未來主義設(shè)計(jì)風(fēng)格使用高科技元素、光效和動(dòng)態(tài)效果，以突出創(chuàng)新和前瞻性。這種風(fēng)格在科技、游戲和科幻類應(yīng)用中常見。
比如現(xiàn)在的 HMI，HUD，數(shù)據(jù)可視化設(shè)計(jì)，風(fēng)格都被設(shè)計(jì)的有很強(qiáng)的科技感，會(huì)用到很多偏科技感的光效，藍(lán)色，以深色居多。
 
來源：Logan Gan
來源：Logan Gan
 
 
來源：Romanov
來源：Romanov
 
 
來源：Stefan Grimm
來源：Stefan Grimm
 
 
來源：Stanislav Hristov
來源：Stanislav Hristov
 
 
來源：Breaking bad
來源：Breaking bad
 
 
8. 插畫風(fēng)格（Illustration style）
這種風(fēng)格通常會(huì)用到大面積的插畫設(shè)計(jì)，有比較強(qiáng)的親和力。
既然用到了插畫，在顏色的使用上相對(duì)會(huì)更大膽一些，顏色飽和度比較高。
這種風(fēng)格在網(wǎng)頁設(shè)計(jì)，天氣設(shè)計(jì)，手機(jī)壁紙，冥想類應(yīng)用中很常見，我自己也曾經(jīng)設(shè)計(jì)過這種插畫風(fēng)格的壁紙和天氣。
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
我之前畫的幾張壁紙
 
來源：Mike | Creative Mints
來源：Mike | Creative Mints
 
 
來源：Mike | Creative Mints
來源：Mike | Creative Mints
 
 
來源：Bogdan Falin
來源：Bogdan Falin
 
 
來源：Moatasem Abbas Kharraz
來源：Moatasem Abbas Kharraz
 
 
來源：Zak Steele-Eklund
來源：Zak Steele-Eklund
 
 
 
9. 2D+3D
這種風(fēng)格是一種 2D 結(jié)合 3D 的形式，現(xiàn)如今在做風(fēng)格化設(shè)計(jì)的時(shí)候特別搶眼。
核心設(shè)計(jì)方法就是把一些內(nèi)容用 2D 的形式去展現(xiàn)，把一些需要強(qiáng)調(diào)的圖片，例如商品，模型做成 3D 來表現(xiàn)。
在未來隨著 vision pro 的發(fā)布，空間計(jì)算的不斷成熟，相信這種設(shè)計(jì)風(fēng)格趨勢會(huì)越來越多。
 
來源：Cosmin Capitanu
來源：Cosmin Capitanu
 
 
 
 
來源：Cosmin Capitanu
來源：Cosmin Capitanu
 
 
來源：Mike | Creative Mints
來源：Mike | Creative Mints
 
 
來源：Mike | Creative Mints
來源：Mike | Creative Mints
 
 
來源：Lay
來源：Lay
 
 
10. 自然和有機(jī)風(fēng)格（Natural and Organic Styles）
自然和有機(jī)的設(shè)計(jì)風(fēng)格使用大自然的元素、有機(jī)形狀和自然紋理，以傳達(dá)溫暖和人性化的感覺。
這種風(fēng)格適用于健康、環(huán)保和戶外應(yīng)用。
 
來源：Oyolloo
來源：Oyolloo
 
大家在一些包裝樣機(jī)中，經(jīng)常會(huì)看到一些帶樹葉投影的風(fēng)格，這種投影給人一種現(xiàn)實(shí)生活的感覺，自然溫暖。
 
來源：beehouse studio
來源：beehouse studio
 
 
 
11. 草圖和手繪風(fēng)格（Sketch and Hand-Drawn Styles）
草圖和手繪的設(shè)計(jì)風(fēng)格比較強(qiáng)調(diào)創(chuàng)意、親近感和個(gè)性化。這種風(fēng)格在博客、藝術(shù)和小眾應(yīng)用中流行。
其風(fēng)格特點(diǎn)容易看出來，帶有卡通式的描邊和硬投影，顏色使用上飽和度比較高
 
來源：ZhaoWei
來源：ZhaoWei
 
 
來源：Joseph Ash Sakula
來源：Joseph Ash Sakula
 
 
來源：Sajon
來源：Sajon
 
來源：creativemarket
來源：creativemarket
 
 
在 dribbble 上有一位設(shè)計(jì)師叫：Sulton handaya，特別擅長這類風(fēng)格，在他的主頁有非常多這種風(fēng)格的作品，通過把一類風(fēng)格做到頂尖，給人留下深刻印象，建立了屬于自己的風(fēng)格標(biāo)簽。
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
12. 品牌自定義風(fēng)格（ Brand Custom Styles）
現(xiàn)在很多應(yīng)用選擇采用自由品牌的設(shè)計(jì)風(fēng)格，以突出其獨(dú)特性和品牌標(biāo)識(shí)。
這個(gè)風(fēng)格方向，其實(shí)也是現(xiàn)在主流的設(shè)計(jì)方式，依據(jù)公司產(chǎn)品調(diào)性和品牌特征，提取品牌超級(jí)符號(hào)，包括顏色、造型、動(dòng)效、排版等等進(jìn)行延展，保證其品牌風(fēng)格的獨(dú)特性，具備很強(qiáng)的識(shí)別度和記憶點(diǎn)。
這里也放 2 個(gè)比較經(jīng)典的例子。
一個(gè)是 kakao，我經(jīng)常講這個(gè)例子，這個(gè)案例就是從項(xiàng)目的目標(biāo)開始，以滿足用戶的個(gè)性化閱讀需求。
作為一個(gè)提供閱讀的平臺(tái)，他們找到了一個(gè)以“紙”為錨點(diǎn)的超級(jí)符號(hào)，并以此延展到圖標(biāo)、動(dòng)效、造型、色彩、插圖等等視覺細(xì)節(jié)上。
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
另一個(gè)案例是航空公司的風(fēng)格設(shè)計(jì)案例，作品巧妙的找到飛機(jī)窗戶的造型作為符號(hào)，像我這樣經(jīng)常坐飛機(jī)的人，看到這樣的橢圓形很自然的就和飛機(jī)聯(lián)系上了。這種鏈接關(guān)系很自然，可以給用戶留下深刻印象。
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
 
 
 
用一篇文章，帶你完整了解近年來流行的視覺風(fēng)格
 
結(jié)語
視覺風(fēng)格是一系列設(shè)計(jì)準(zhǔn)則和規(guī)范，用于確保用戶界面的各個(gè)方面都與品牌或項(xiàng)目的整體風(fēng)格和形象保持一致。
這有助于用戶識(shí)別和記憶界面，提高用戶體驗(yàn)，同時(shí)也增強(qiáng)了品牌的識(shí)別度和專業(yè)性。
設(shè)計(jì)風(fēng)格是一個(gè)輪回，所以設(shè)計(jì)趨勢我們需要去關(guān)注，但不可以盲目選用，還需要結(jié)合我們自身產(chǎn)品想要傳達(dá)的理念，滿足用戶的訴求。
 



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

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

評(píng)論(0) 瀏覽(87)

高級(jí)設(shè)計(jì)師才會(huì)的設(shè)計(jì)思維，31個(gè)細(xì)節(jié)幫你深入了解！

天宇 設(shè)計(jì)思維

1. 并不存在單一的設(shè)計(jì)過程

 

設(shè)計(jì)過程被描述為多個(gè)階段，每個(gè)階段都包含不同的活動(dòng)來完成該階段，它沒有統(tǒng)一的標(biāo)準(zhǔn)流程，每個(gè)公司和設(shè)計(jì)師都有自己的流程版本。

盡管存在多個(gè)流程，但一般流程和階段類似于以下內(nèi)容:

了解問題：初步了解問題。觀察、采訪和傾聽用戶。

定義問題：解釋和定義要解決的問題。

構(gòu)思：通過頭腦風(fēng)暴產(chǎn)生盡可能多的想法。

原型設(shè)計(jì)：構(gòu)建原型并與其他人分享（ 再次縮小解決方案空間，為實(shí)驗(yàn)階段 ）。

測試：測試可能的解決方案、實(shí)施、改進(jìn)或重新設(shè)計(jì)。

 

2. 設(shè)計(jì)思維是傳統(tǒng)解法和創(chuàng)造性設(shè)計(jì)過程的結(jié)合

 

傳統(tǒng)的問題解決采取有條不紊而又科學(xué)的形式。該過程從一個(gè)問題開始，定義要采取的步驟以及達(dá)到解決方案的工具或方法。

設(shè)計(jì)思維是一種創(chuàng)造性的策略，可以產(chǎn)生創(chuàng)造性的未來結(jié)果和/或創(chuàng)造性的問題解決方式，它應(yīng)該被認(rèn)為是一種以解決方案為中心的思維策略。

它通常被描述為一種創(chuàng)造性、主觀和感性的對(duì)許多大型組織的分析邏輯（ 布朗，2008 年 ），或作為分析和創(chuàng)造性推理模式的組合（ 鄧恩 & 馬丁，2006 年；利特卡，2015 年 ）。

 

3. 設(shè)計(jì)思維是問題解法的進(jìn)階

 

設(shè)計(jì)思維來源于常規(guī)問題解決方法，常規(guī)問題解法是設(shè)計(jì)思維的基礎(chǔ)。

 

從解決問題到設(shè)計(jì)思維，Liedtka (2013)

結(jié)果發(fā)現(xiàn)，設(shè)計(jì)思維實(shí)際上也是一個(gè)解決問題的過程，而不僅僅是一個(gè)創(chuàng)新過程（ 利特卡，2013）

一個(gè)例子是，豐田采用設(shè)計(jì)思維從頭開始分析其西海岸的一個(gè)客戶聯(lián)絡(luò)中心，在重新設(shè)計(jì)過程中，組建了一個(gè)由一線呼叫代表、軟件工程師、業(yè)務(wù)主管和變革代理組成的跨職能團(tuán)隊(duì)，這一舉動(dòng)最終改變了客戶和員工的服務(wù)中心體驗(yàn)。

 

4. 從起床到入睡，你都在解決問題

 

我們每天都會(huì)遇到問題，但是當(dāng)我們解決同樣的問題時(shí)，它們就成了例行公事（ 似乎已經(jīng)忘記它們是問題了 ），我們甚至都沒有意識(shí)到正在解決這些問題。例如，我的辦公室在 30 分鐘路程之外，該怎么到達(dá)那里？開車、坐火車或巴士到目的地；除非車子輪胎被刺破，否則你就需要弄清楚如何到達(dá)辦公室。

 

5. “設(shè)計(jì)思維”術(shù)語的產(chǎn)生

 

1990 年代，IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創(chuàng)造了特定術(shù)語：“設(shè)計(jì)思維”，并將多年來醞釀的方法和想法封裝成一個(gè)統(tǒng)一的概念。

 

6. 工程設(shè)計(jì)思維現(xiàn)在被稱為設(shè)計(jì)思維

 

設(shè)計(jì)思維是以人為中心、開放式、基于問題的方法論。這種方法最初是為了改變工程教育中的教學(xué)方式，而工程師處理和解決問題的方式有其設(shè)計(jì)思維的基礎(chǔ)。

 

7. 設(shè)計(jì)思維的歷史早已出現(xiàn)（2000 年）

 

設(shè)計(jì)思維一詞可以追溯到 1987 年 Peter Rowe 的著作：“設(shè)計(jì)思維。” 他描述工程師和建筑師處理問題的方法有很大不同。

90 年代初，認(rèn)知科學(xué)家 Don Norman 加入 Apple 團(tuán)隊(duì)，擔(dān)任他們的用戶體驗(yàn)架構(gòu)師，這使他成為第一個(gè)在職位中包含 UX 的人。他提出了“用戶體驗(yàn)設(shè)計(jì)”這個(gè)術(shù)語，因?yàn)樗?ldquo;涵蓋人們對(duì)系統(tǒng)體驗(yàn)的所有方面，包括工業(yè)設(shè)計(jì)、圖形、界面、物理交互和手冊(cè)。” 從那時(shí)起，這些領(lǐng)域中的每一個(gè)都將用戶體驗(yàn)，擴(kuò)展到了自己的專業(yè)領(lǐng)域。

 

8. “棘手的”設(shè)計(jì)思維

 

設(shè)計(jì)思維在解決“棘手問題”時(shí)特別有用。

 

棘手問題的特征

“棘手問題”一詞是由設(shè)計(jì)理論家 Horst Rittel 在 1972 年創(chuàng)造的，用來描述本質(zhì)上非常模糊 \ 特別棘手的問題。棘手問題，有很多未知因素，沒有確定的解決方案。問題或解決方案可能與另一個(gè)棘手的問題有關(guān)，因此這是一個(gè)需要設(shè)計(jì)思維的持續(xù)過程。貧困、饑餓和氣候變化是一些現(xiàn)代的棘手問題。

 

9. 設(shè)計(jì)思維不僅限于數(shù)字化設(shè)計(jì)的應(yīng)用

 

設(shè)計(jì)主題的范圍是普遍的，因?yàn)?設(shè)計(jì)思維可以應(yīng)用于人類經(jīng)驗(yàn)的任何領(lǐng)域。

 

它可以用于：

符號(hào)和視覺傳達(dá)：這包括平面設(shè)計(jì)的傳統(tǒng)工作，如排版和廣告、書籍和雜志制作、科學(xué)插圖、攝影、電影、電視和計(jì)算機(jī)顯示。

材料：這包括對(duì)日常用品的形式和視覺外觀的傳統(tǒng)關(guān)注 —— 服裝、家用物品、工具、儀器、機(jī)械和車輛。

人類活動(dòng)和組織性服務(wù)：包括對(duì)物流的傳統(tǒng)管理關(guān)注，結(jié)合物質(zhì)資源、工具和人類低效的序列和時(shí)間表，以達(dá)到特定的目標(biāo)。

復(fù)雜的系統(tǒng)或環(huán)境：生活、工作、娛樂和學(xué)習(xí)。這包括系統(tǒng)工程、建筑和城市規(guī)劃的傳統(tǒng)關(guān)注點(diǎn)，或復(fù)雜整體部分的功能分析及其隨后在層次結(jié)構(gòu)中的集成。

10. 設(shè)計(jì)思維不僅限于設(shè)計(jì)師的實(shí)踐

 

設(shè)計(jì)思維起源于設(shè)計(jì)師的培訓(xùn)和專業(yè)實(shí)踐，但這些原則可以被每個(gè)人實(shí)踐并擴(kuò)展到每個(gè)活動(dòng)領(lǐng)域。（布朗，2013 年）

在企業(yè)中，設(shè)計(jì)過程可以為企業(yè)環(huán)境中的問題解決帶來創(chuàng)新思維。它還可以用于醫(yī)療保健，通過向護(hù)士、醫(yī)生和管理人員教授設(shè)計(jì)思維技術(shù)，我們可以激勵(lì)相關(guān)從業(yè)者貢獻(xiàn)新的想法。

 

11. 了解問題是第一

 

不管是什么設(shè)計(jì)，理解和研究問題是必不可少的，因?yàn)槲覀兡軌驈钠涑霭l(fā)，從而進(jìn)行以用戶為中心的設(shè)計(jì)。

 

設(shè)計(jì)思維的最早階段是搞懂你能帶來的情感價(jià)值。設(shè)計(jì)思維方法迫使你停留在提問與質(zhì)疑階段，而不是準(zhǔn)確定義出問題后進(jìn)入下一階段。我們都有過快進(jìn)入解決方案模式的傾向，所以設(shè)計(jì)思維方法迫使你真實(shí)地存在于這個(gè)不清楚、有時(shí)還非?；靵y的時(shí)刻，從而使你對(duì)要解決的問題產(chǎn)生更好的理解。（利特克，2013）

 

12. 設(shè)計(jì)思維需要兩種不同的思維

 

傳統(tǒng)的問題解決涉及提出一個(gè)解決方案，但設(shè)計(jì)思維首先使我們發(fā)散，試圖為問題生成各種可能的替代解決方案。然后讓我們進(jìn)行收斂性思維，縮小多種可能性，找到單一的最佳解決方案。

 

13. 設(shè)計(jì)思維是可以傳授和學(xué)習(xí)的，它不是一種人格特質(zhì)

根據(jù)利特卡和奧美 (2011) 的說法，設(shè)計(jì)思維的全部意義在于學(xué)習(xí)一種新的、系統(tǒng)的解決問題的方法。正如我們思考創(chuàng)造力一樣，即使是設(shè)計(jì)思維也可以通過實(shí)踐來教授和改進(jìn)。

 

14. 設(shè)計(jì)過程不是線性的

 

設(shè)計(jì)過程從來都不是線性的，它由多次失敗和迭代組成（布朗，2018）。

首先，設(shè)計(jì)師試圖將問題與過去的類似案例聯(lián)系起來。如果這種方法不能提供任何解決方案，下一步就是使用知識(shí)和創(chuàng)造力作為一種實(shí)驗(yàn)思維形式來產(chǎn)生新的想法。使用決策矩陣對(duì)這些想法進(jìn)行評(píng)估，從而會(huì)產(chǎn)生被進(jìn)一步分析和測試的解決方案。如果成功，它將被實(shí)施。如果不成功，則需要重新表述問題，并重復(fù)該過程。這是一個(gè)迭代過程，即循環(huán)方法。

這一持續(xù)不斷的重新再設(shè)計(jì)過程，源于和客戶親密接觸的洞察。

 

15. 調(diào)研是設(shè)計(jì)思維非常重要的工具

 

學(xué)習(xí)設(shè)計(jì)思維不僅僅意味著學(xué)習(xí)一套新的工具。它還意味著：學(xué)習(xí)收集和分析大量數(shù)據(jù)；學(xué)習(xí)挖掘?qū)ο罂赡艿男螒B(tài)而不是自主認(rèn)為他是什么；學(xué)習(xí)管理不確定感，以及與許多新的伙伴合作（ 利特卡和奧美，2011）。你可以進(jìn)行的研究類型分為三類：生成性研究、評(píng)估性研究和驗(yàn)證性研究。

 

16. “要么很快失敗，要么經(jīng)常失敗”

 

一種常見的表述 —— 實(shí)際上是設(shè)計(jì)思維的另一種視角 —— 即設(shè)計(jì)師應(yīng)該預(yù)料到會(huì)“很快失敗或經(jīng)常失敗”（布朗，2009）。

當(dāng)過程早期發(fā)生故障時(shí)，例如被拒絕的原型，實(shí)質(zhì)上它可以為有效解決方案提供關(guān)鍵見解。這種觀點(diǎn)與傳統(tǒng)的先形成理論，再檢驗(yàn)正誤的方式相矛盾。

 

17. 公司正在將設(shè)計(jì)思維作為解決問題的核心方法

 

Airbnb、Braun 和百事可樂等多元化公司都在 采用設(shè)計(jì)思維并將其作為核心戰(zhàn)略。例如，IBM 為全球旗下的 44 個(gè)設(shè)計(jì)工作室聘請(qǐng)了 1600 名設(shè)計(jì)師，并且正在培訓(xùn)數(shù)以萬計(jì)的設(shè)計(jì)師員工建立深度創(chuàng)新能力 ( O'Keefe, 2017 )

 

18. 以人為本的思維

 

設(shè)計(jì)思維為我們解決問題添加了以人為本的元素。當(dāng)我們?cè)噲D通過牢記人們的想法來解決問題，并使用基于直接觀察乃至訪談的研究時(shí)，我們便會(huì)捕捉到與消費(fèi)者需求一致的意外見解和創(chuàng)新。

 

19. 可觀的商業(yè)價(jià)值

 

它有助于將成功的產(chǎn)品更快地推向市場，最終節(jié)省企業(yè)資金。
IBM 的健康和人類服務(wù)組織的設(shè)計(jì)思維實(shí)踐，通過有效使用設(shè)計(jì)和設(shè)計(jì)思維幫助企業(yè)將缺陷數(shù)量減少了 50% 以上。這種更高效的工作流程導(dǎo)致計(jì)算出的 ROI 超過 300%。

 

20. 對(duì)復(fù)雜問題的作用性

 

由于復(fù)雜的問題從來不能被所有人完全理解，因此在嘗試設(shè)計(jì)解決方案時(shí)，處理歧義和多個(gè)并發(fā)的思路方向的能力是至關(guān)重要的素質(zhì)。

設(shè)計(jì)思維通過綜合和歸納思維，幫助實(shí)現(xiàn)質(zhì)的飛躍。它允許通過解構(gòu)來測試約束，并允許通過多樣性思維和批評(píng)思維，來擁抱和探索歧義。

消費(fèi)者通常不知道他們有什么問題需要解決，或者他們無法用語言表達(dá)出來。只有經(jīng)過仔細(xì)觀察，設(shè)計(jì)者才能根據(jù)真實(shí)消費(fèi)者行為中看到的東西來識(shí)別問題，而不是簡單地根據(jù)對(duì)消費(fèi)者的想法來確定問題。這有助于定義模棱兩可的問題，并找到解決方案。

 

21. 別名：跳脫框架的思維

 

該方法鼓勵(lì)“跳出框架思考”（“瘋狂的想法”）；它蔑視顯而易見的事物并采用更具實(shí)驗(yàn)性的方法。
在早期的流程階段鼓勵(lì)大膽的想法，以產(chǎn)生創(chuàng)造性的解決方案。使用它是為了讓設(shè)計(jì)師可以嘗試開發(fā)新的不受約束的思維方式，或?qū)ΤＲ妴栴}的創(chuàng)新解覺方法。

 

22. 設(shè)計(jì)思想家的特征

 

根據(jù)大多數(shù)設(shè)計(jì)學(xué)院的說法，具備特定特質(zhì)的人能夠更好地發(fā)揮設(shè)計(jì)思維的作用。

同理心：從多個(gè)角度想象世界 —— 同事、甲方客戶、實(shí)際使用者和消費(fèi)者的角度。要成為更好的同理心，必須傾聽和觀察他人的行為，注意并獲得洞察力。

綜合思維：重要的是不僅要有分析能力，而且要能夠提出新穎的解決方案，還要憑直覺。

樂觀：除非你相信有解決方案，否則在遇到挑戰(zhàn)且解決方案遇到瓶頸時(shí)，你可能會(huì)放棄。

實(shí)驗(yàn)主義：重大創(chuàng)新并非來自漸進(jìn)式調(diào)整。設(shè)計(jì)思想家以創(chuàng)造性的方式提出問題并探索限制因素，并朝著全新的方向發(fā)展。

協(xié)作：產(chǎn)品、服務(wù)和體驗(yàn)日益復(fù)雜，因此必須擁有一支具有不同背景的團(tuán)隊(duì)，以幫助從多個(gè)角度看待問題。

23. 有助于對(duì)抗某些偏見

當(dāng)我們想到一個(gè)問題的多種解決方案時(shí)，對(duì)我們解決問題會(huì)非常有幫助，因此“功能固定性”阻止了我們以新穎的方式使用舊工具解決新問題。想要擺脫功能固定，首先是要讓人們可以使用“改造后的衣架進(jìn)入上鎖的汽車”。這也是盜賊第一次可以用信用卡撬開簡單的彈簧門鎖。

 

24. 實(shí)用

 

為了幫助設(shè)計(jì)師利用文科和技術(shù)理論，整合多個(gè)領(lǐng)域的知識(shí)以找到創(chuàng)新的解決方案，我們采用設(shè)計(jì)思維來獲得洞察力。該方法側(cè)重于可視化和操作，因而幫助我們更容易地了解實(shí)際解法，而不僅僅是理論模型。

 

25. 執(zhí)行

 

第一批美國公司在 2000 年代初期開始實(shí)施設(shè)計(jì)思維，這一概念引起了德國投資者 Hasso Plattner 的興趣，他于 2006 年資助創(chuàng)建了兩所設(shè)計(jì)學(xué)校（d.schools），其中一所位于波茨坦大學(xué)（德國），另一所位于美國斯坦福大學(xué)。由于兩所學(xué)校都成功地為大型組織提供了高管設(shè)計(jì)思維培訓(xùn)，因此該研究重點(diǎn)關(guān)注這些國家，以尋找早期實(shí)施者。

 

26. 團(tuán)隊(duì)思考

 

設(shè)計(jì)思維通常涉及希望參與整個(gè)設(shè)計(jì)和開發(fā)過程的龐大利益相關(guān)者團(tuán)隊(duì)。

觀點(diǎn)、才能和經(jīng)驗(yàn)的多樣性被認(rèn)為是注入新思維的部分重要來源。多樣性確保通過融合不同的觀點(diǎn)、技能和知識(shí)來產(chǎn)生創(chuàng)意（卡振思，2018 年；薩梅和德拉赫-扎哈維，2013 年）。設(shè)計(jì)思維的協(xié)作方法和工具可幫助團(tuán)隊(duì)以積極的方式利用他們的差異。

決策是平等的，因?yàn)槊總€(gè)成員的意見都被征求和使用（卡爾格倫等，2016）。

27. 不需要花哨的技術(shù)原型

當(dāng) IDEO 去 Apple 展示他們的鼠標(biāo)時(shí)，它不是什么花哨的設(shè)備，而是一個(gè)用膠帶粘起來的原型。

低保真原型制作起來既快速又便宜（ 想想幾分鐘和幾分錢 ），但可以從用戶和同事那里得到有用的反饋，這符合快速驗(yàn)證、廉價(jià)試錯(cuò)的原則。為每個(gè)想法投入盡可能少的資源意味著前期投入的時(shí)間和金錢更少。此外，將多個(gè)原型帶到現(xiàn)場進(jìn)行測試為用戶提供了比較的基礎(chǔ)參考，同時(shí)也有助于揭示某些需求。

 

28. 過程強(qiáng)調(diào)心態(tài)和行動(dòng)

 

為了創(chuàng)新，設(shè)計(jì)思維意識(shí)到認(rèn)知和行動(dòng)對(duì)創(chuàng)新過程很重要。認(rèn)知包括接受度、樂觀和創(chuàng)造性的信心（ 凱莉 & 凱莉，2013；鄭，2018），而行動(dòng)包括快速原型設(shè)計(jì)、旅程地圖和假設(shè)浮現(xiàn)（ 假設(shè)浮現(xiàn)：assumption surfacing，這是一種評(píng)估技術(shù)，涉及寫出潛在的假設(shè)和反假設(shè)。）（ 卡爾格倫等，2016；利特卡，2015）

 

29. 在組織中實(shí)施設(shè)計(jì)思維的挑戰(zhàn)

 

如果領(lǐng)導(dǎo)層不歡迎風(fēng)險(xiǎn)、模棱兩可和風(fēng)格的改變，實(shí)施起來就會(huì)變得更加困難。它會(huì)被管理者“質(zhì)疑”其具體指標(biāo)

沃爾特斯 ( 2011 ) 聲稱，由于設(shè)計(jì)思維的模糊性，它與組織文化相沖突。

據(jù)受訪者稱，在日常業(yè)務(wù)中使用設(shè)計(jì)思維之所以不會(huì)是最優(yōu)選項(xiàng)， 因?yàn)樗琴Y源密集型的，增加了工作量。（ 麗莎等，2016）

在醫(yī)療保健等規(guī)避風(fēng)險(xiǎn)的行業(yè)和公司中，“經(jīng)常和早點(diǎn)失敗”的方法被認(rèn)為是非常困難的。

 

30. 設(shè)計(jì)思維的問題

 

許多設(shè)計(jì)師反對(duì)設(shè)計(jì)思維這一觀點(diǎn)，設(shè)計(jì)思維不僅關(guān)乎一個(gè)過程，而且關(guān)乎改變思維過程并提高人們可能提出的解決方案的創(chuàng)造力。

“設(shè)計(jì)思維”的推廣已被大型全球公司用來增加業(yè)務(wù)。不過，在更廣泛的設(shè)計(jì)世界中，我甚至?xí)f“設(shè)計(jì)思維”的過度宣傳導(dǎo)致了所提供設(shè)計(jì)質(zhì)量的下降。—— Yasushi Kusume

弗吉尼亞理工大學(xué)科學(xué)、技術(shù)和社會(huì)助理教授 Lee Vinsel 在《設(shè)計(jì)思維運(yùn)動(dòng)是荒謬的》中寫道，“歸根結(jié)底，設(shè)計(jì)思維與設(shè)計(jì)無關(guān)。這與文科無關(guān)。這與任何有意義的創(chuàng)新無關(guān)。如果這意味著重大的社會(huì)變革，那肯定不是關(guān)于“社會(huì)創(chuàng)新”。這是關(guān)于商業(yè)化的。”

 

31. 為什么需要共情

 

觀察人們的行為以及他們?nèi)绾闻c環(huán)境互動(dòng)，可以為你提供有關(guān)人們想法和感受的線索。

你可能認(rèn)為你知道問題所在，但只有通過觀察才能了解消費(fèi)者真正需要什么。

宜家派設(shè)計(jì)師到人們家中，觀測他們的互動(dòng)行為來了解他們的需求。這將使設(shè)計(jì)者能夠推斷這些經(jīng)歷的無形含義，以發(fā)現(xiàn)洞察。這些洞察提供創(chuàng)新解決方案的構(gòu)思方向。而事實(shí)上，最好的解決方案來自于對(duì)人類行為的最佳洞察。

Good Kitchen 是一家為老年人和體弱者提供膳食的社會(huì)服務(wù)機(jī)構(gòu)。起初的問題似乎是設(shè)計(jì)不當(dāng)?shù)纳攀巢藛?。然后設(shè)計(jì)思維揭示了無數(shù)問題，所有問題都源于服務(wù)本身的性質(zhì)。因此，經(jīng)由對(duì)服務(wù)進(jìn)行了徹底改革的之后，最終提高了客戶和員工的滿意度（利特卡，2014）



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

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

評(píng)論(0) 瀏覽(86)

打開設(shè)計(jì)思維才能突破瓶頸

天宇 設(shè)計(jì)思維

對(duì)于設(shè)計(jì)師來說，遇到設(shè)計(jì)瓶頸期很正常，入行一段時(shí)間后所具備的能力就會(huì)達(dá)到峰值，無法突破峰值就會(huì)遇到瓶頸。主要在設(shè)計(jì)思維和設(shè)計(jì)技法層面受限，打開設(shè)計(jì)思維才能突破瓶頸期，通過積累優(yōu)秀的案例并進(jìn)行總結(jié)分析，可以更快的打破思維限制。

 

 

 

 

 

分享目錄

 

一、趣味性的登錄設(shè)計(jì)

二、瓷片區(qū)的趣味性手勢交互

三、營造懷舊感的溫馨體驗(yàn)

四、趣味性的進(jìn)度提示設(shè)計(jì)

五、場景感的點(diǎn)擊操作

六、動(dòng)效引導(dǎo)用戶發(fā)帖

七、卡通形象強(qiáng)化瓷片區(qū)視覺感

八、不改變布局的曝光強(qiáng)化

九、可以晃動(dòng)的 Banner 圖

十、場景感的底部標(biāo)簽欄設(shè)計(jì)

 

 

 

一、趣味性的登錄設(shè)計(jì)

 

登錄是進(jìn)入產(chǎn)品的第一道防線，也容易讓用戶產(chǎn)生排斥感，降低用戶的防備心理才能提高登錄的意愿度。

 

盯潮 App 在登錄界面中，以潮流元素和商品等內(nèi)容進(jìn)行設(shè)計(jì)，使得頁面視覺感豐富?；蝿?dòng)手機(jī)時(shí)元素也會(huì)移動(dòng)，在掉落或者碰撞手機(jī)邊緣時(shí)配合震動(dòng)感，讓體驗(yàn)變得非常有趣。趣味性的設(shè)計(jì)降低了用戶的排斥感，提升了登錄的意愿度和體驗(yàn)感。

 

 

 

 

 

 

二、瓷片區(qū)的趣味性手勢交互

 

瓷片區(qū)、Banner、金剛區(qū)是產(chǎn)品中的三大運(yùn)營模塊，起到提高曝光度達(dá)到引流的目的。瓷片區(qū)在頁面中的布局比較靈活，設(shè)計(jì)表現(xiàn)也非常豐富。

 

盯潮 App 在首頁瓷片區(qū)設(shè)計(jì)中，以柵格式布局進(jìn)行區(qū)塊劃分，占比較大的模塊類似于 Banner 式表現(xiàn)。通過手勢可以任意拖動(dòng)實(shí)現(xiàn)切換，趣味性和互動(dòng)性相結(jié)合，提高了用戶的使用樂趣。

 

 

 

 

 

 

三、營造懷舊感的溫馨體驗(yàn)

 

童年的記憶是我們逝去的青春，每每看到小時(shí)候的畫面，總能勾起我們童年的回憶。最近發(fā)現(xiàn)一款結(jié)合懷舊感營造設(shè)計(jì)風(fēng)格的產(chǎn)品，名字叫“軟眠眠”。

 

這是一款拯救失眠者的治愈系睡眠 App，以一幅小時(shí)候生活的環(huán)境插畫填充界面背景，圖標(biāo)設(shè)計(jì)也是提取小時(shí)候的玩物或者生活用品，視覺風(fēng)格營造極強(qiáng)的懷舊感。無論是畫風(fēng)還是配色、配樂等，都勾起了我們滿滿的回憶，帶給用戶溫馨的體驗(yàn)。

 

 

 

 

 

 

四、趣味性的進(jìn)度提示設(shè)計(jì)

 

在完成步驟化和消耗數(shù)據(jù)等內(nèi)容表達(dá)層面會(huì)選擇進(jìn)度條，通過可視化的表達(dá)提高用戶的理解，減輕信息認(rèn)知負(fù)擔(dān)。

 

軟眠眠 App 在定制睡眠計(jì)劃的過程中，完成選項(xiàng)時(shí)的進(jìn)度條設(shè)計(jì)非常有意思，是一個(gè)小孩通過拉動(dòng)繩子移動(dòng)。拉動(dòng)過程中結(jié)合動(dòng)態(tài)表達(dá)，配合手繪風(fēng)的表現(xiàn)讓人感覺輕松愉快，趣味性的設(shè)計(jì)也提高了完成選項(xiàng)任務(wù)的意愿度。

 

 

 

 

 

 

五、場景感的點(diǎn)擊操作

 

在保障底層操作體驗(yàn)的基礎(chǔ)上，設(shè)計(jì)會(huì)越來越講究細(xì)節(jié)的體驗(yàn)，逐步強(qiáng)化情感化的融入和場景感的體驗(yàn)。

 

最近在體驗(yàn)小雞上工 App 時(shí)，在找工作的列表設(shè)計(jì)中加入了“搶”按鈕，在點(diǎn)擊列表時(shí)按鈕會(huì)有按壓的動(dòng)效過程。模擬搶拍按鈕獲得機(jī)會(huì)的體驗(yàn)，營造場景氛圍感，提高了設(shè)計(jì)表達(dá)的趣味性。

 

 

 

 

 

 

六、動(dòng)效引導(dǎo)用戶發(fā)帖

 

微動(dòng)效可以提高功能的吸引力，也能讓互動(dòng)體驗(yàn)變得更有趣，可以通過動(dòng)效引導(dǎo)功能操作和提高關(guān)注度。

 

騰訊動(dòng)漫 App 在圈子欄目中，以 IP 形象結(jié)合動(dòng)效強(qiáng)化發(fā)帖按鈕，以此引導(dǎo)用戶參與發(fā)帖。動(dòng)效不僅突出了發(fā)帖的關(guān)注度，也讓發(fā)帖按鈕設(shè)計(jì)更有親和力，進(jìn)而提升用戶的點(diǎn)擊欲。

 

 

 

 

 

 

七、卡通形象強(qiáng)化瓷片區(qū)視覺感

 

瓷片區(qū)起到強(qiáng)化曝光達(dá)到流量引導(dǎo)的作用，提高該模塊的吸引力至關(guān)重要，視覺感的突出也尤為重要。

 

會(huì)玩 App 在首頁“一起玩”的瓷片區(qū)設(shè)計(jì)中，以卡通形象結(jié)合豐富的色彩進(jìn)行表現(xiàn)，各種裝扮的形象豐富視覺感?？ㄍㄐ蜗笤O(shè)計(jì)風(fēng)格統(tǒng)一，卡片色彩豐富且協(xié)調(diào)，整體瓷片區(qū)視覺沖擊力十足。

 

 

 

 

 

 

八、不改變布局的曝光強(qiáng)化

 

在當(dāng)前產(chǎn)品結(jié)構(gòu)不變的基礎(chǔ)上，如何提高局部內(nèi)容或者主推內(nèi)容的曝光度，是產(chǎn)品設(shè)計(jì)師不斷探索的方向。

 

愛奇藝 App 首頁推薦欄目 Banner 圖下方，默認(rèn)情況下以宮格布局推薦影片。前段時(shí)間在打開時(shí)發(fā)現(xiàn)了一個(gè)臨時(shí)設(shè)計(jì)表達(dá)，保持當(dāng)前結(jié)構(gòu)布局不變，放大了圖片填充和推薦影片，整張畫面填充宮格，視覺張力十足。該設(shè)計(jì)表達(dá)既不會(huì)干擾當(dāng)前布局，也能強(qiáng)化推薦影片的曝光度，解決方案值得探索。

 

 

 

 

 

 

九、可以晃動(dòng)的 Banner 圖

 

Banner 可以在創(chuàng)意、造型、互動(dòng)形式等方面進(jìn)行設(shè)計(jì)發(fā)揮，也呈現(xiàn)了許多優(yōu)秀的方案，產(chǎn)品設(shè)計(jì)師也在不斷嘗試更多的可能性。

 

最近在體驗(yàn)盯潮 App 時(shí)，發(fā)售欄目頂部 Banner 圖設(shè)計(jì)引人關(guān)注。當(dāng)用戶左右晃動(dòng)手機(jī)時(shí)，Banner 圖背景層不動(dòng)，而文案和產(chǎn)品等元素層會(huì)跟著晃動(dòng)的頻率左右移動(dòng)?？梢曰蝿?dòng)的 Banner 圖非常有意思，成功地吸引了用戶的關(guān)注度和點(diǎn)擊欲。

 

 

 

 

 

 

十、場景感的底部標(biāo)簽欄設(shè)計(jì)

 

底部標(biāo)簽欄設(shè)計(jì)可以在背景、造型、圖標(biāo)等元素中發(fā)揮，其中圖標(biāo)設(shè)計(jì)中的發(fā)揮相對(duì)更多一些，在背景和造型層面的案例較少，不過最近也發(fā)現(xiàn)了一個(gè)解決方案。

 

在體驗(yàn)云游萬里長城小程序時(shí)，進(jìn)入之后的小程序底部標(biāo)簽欄設(shè)計(jì)結(jié)合了長城墻面和結(jié)構(gòu)，非常有場景代入感。設(shè)計(jì)了深色版和淺色版，圖標(biāo)造型設(shè)計(jì)也融入了長城元素，不失為一種優(yōu)秀的差異化設(shè)計(jì)探索。

 

 

 

 

小結(jié)

 

希望本期的分享可以開啟大家更多設(shè)計(jì)思維，從優(yōu)秀的設(shè)計(jì)方案中發(fā)現(xiàn)設(shè)計(jì)的軌跡，復(fù)用到后期的項(xiàng)目設(shè)計(jì)中。本文描述屬于個(gè)人理解和總結(jié)，不足之處歡迎大家留言補(bǔ)充，我們互相進(jìn)步。



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

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

評(píng)論(0) 瀏覽(74)

日歷

鏈接

個(gè)人資料

存檔