如何讓您的產(chǎn)品詳情頁(yè)脫穎而出，并顯著提高轉(zhuǎn)化率，是每位產(chǎn)品經(jīng)理和設(shè)計(jì)師都必須面對(duì)的重要挑戰(zhàn)。本文深入探討了詳情頁(yè)提升轉(zhuǎn)化率的多種技巧和策略，希望可以幫到大家。
最近半年有策劃不少詳情頁(yè)，然后就想總結(jié)一些詳情頁(yè)相關(guān)的內(nèi)容。
其實(shí)產(chǎn)品詳情頁(yè)的設(shè)計(jì)原則只有一個(gè)，那就是迎合目標(biāo)消費(fèi)者的需求。那么一個(gè)好的產(chǎn)品詳情頁(yè)都應(yīng)該包含什么內(nèi)容呢？
核心目標(biāo)：用視覺+文案快速傳遞產(chǎn)品核心價(jià)值。3秒內(nèi)讓消費(fèi)者“一見鐘情”。
是的，請(qǐng)務(wù)必在5秒內(nèi)讓消費(fèi)者“一見鐘情”，若無(wú)法在5秒內(nèi)抓住眼球，客戶可能會(huì)關(guān)閉這個(gè)頁(yè)面。
內(nèi)容方向：
1.產(chǎn)品核心賣點(diǎn)（加上產(chǎn)品外觀，科技感）
2.使用場(chǎng)景化展示（如模特穿戴、產(chǎn)品使用動(dòng)態(tài)）
3.品牌 LOGO / 標(biāo)語(yǔ)（弱化但可識(shí)別）
設(shè)計(jì)公式：
1.主標(biāo)題=1. 一句話展示出產(chǎn)品的核心賣點(diǎn)/核心宣傳點(diǎn)；2.或者產(chǎn)品名稱，3.或者情緒價(jià)值（如減壓、陪伴）+功能關(guān)鍵詞（如“AI監(jiān)測(cè)”）；
2.副標(biāo)題=1. 產(chǎn)品名稱+使用場(chǎng)景；2. 或者核心賣點(diǎn)/核心宣傳點(diǎn)
3.ICON(非必選，有則添加)=信任背書（如“FDA認(rèn)證”）；或產(chǎn)品特色；或核心成分（總之就是消費(fèi)最關(guān)心的點(diǎn)）。
布局要點(diǎn)：
產(chǎn)品圖占據(jù)版面1/2以上，文字占據(jù)版面1/8左右，以圖吸睛，輔以少量文字說(shuō)明，版面適當(dāng)留白，保證畫面簡(jiǎn)潔明了。
優(yōu)秀案例參考：
Dreametech 品牌新品發(fā)布的產(chǎn)品第一張Banner：
產(chǎn)品名字+產(chǎn)品核心宣傳點(diǎn)“Rise up, clean beneath” +多個(gè)獎(jiǎng)項(xiàng)背書效果的Icon。
整個(gè)設(shè)計(jì)非常簡(jiǎn)潔和科技感，沒有多余的元素，使得產(chǎn)品成為視覺焦點(diǎn)。
圖片來(lái)源：dreametech 僅供學(xué)習(xí)用
Anker品牌產(chǎn)品名字+產(chǎn)品核心賣點(diǎn)+應(yīng)用場(chǎng)景。
圖片來(lái)源：Anker 僅供學(xué)習(xí)用
核心目標(biāo)：制造“痛感共鳴”，讓消費(fèi)者驚呼“這就是我！并激發(fā)“我需要解決它”的欲望。
人性本懶惰，大多數(shù)人不愿改變，除非感到足夠“痛”。
想讓顧客為你付費(fèi)，關(guān)鍵在于讓潛在客戶真切感受到他們面臨的問題有多嚴(yán)重，若不解決，后果將不堪設(shè)想。
一旦激發(fā)他們的情感反應(yīng)，改變的念頭便油然而生。
因此，第二張Banner要精準(zhǔn)擊中用戶痛點(diǎn)，羅列消費(fèi)者常遇的問題及根源，呈現(xiàn)能引發(fā)共鳴的畫面。
布局要點(diǎn)：
通過(guò)圖文結(jié)合的方式，描述消費(fèi)者的痛點(diǎn)，如展示消費(fèi)者在生活中遇到的各種問題。
三類痛點(diǎn)挖掘法：
優(yōu)秀案例參考：
Petlibro品牌在Smart Fountain(給貓智能喂水相關(guān)的產(chǎn)品)產(chǎn)品詳情頁(yè)的痛點(diǎn)描述海報(bào)中，突出了貓咪因缺水而面臨的健康風(fēng)險(xiǎn)，通過(guò)具體數(shù)據(jù)強(qiáng)調(diào)了脫水對(duì)貓咪的危害。
如“9百萬(wàn)+貓患有貓下泌尿道疾病”和“1百萬(wàn)+貓患有慢性腎病”，這些龐大的數(shù)字能夠直觀地展示問題的嚴(yán)重性，讓養(yǎng)貓人士意識(shí)到這些健康問題并不是個(gè)別現(xiàn)象，而是普遍存在的問題。
輔助貓?jiān)谕纯嘀械恼掌?，能夠激發(fā)養(yǎng)貓人士的情感共鳴。養(yǎng)貓人士可能會(huì)更加注意自己寵物的水分?jǐn)z入，從而想要主動(dòng)采取預(yù)防措施。就會(huì)繼續(xù)網(wǎng)下瀏覽網(wǎng)頁(yè)試圖尋找解決方案。
圖片來(lái)源：furbo 僅供學(xué)習(xí)用
核心目標(biāo)：突出差異化，用“人無(wú)我有”建立競(jìng)爭(zhēng)壁壘，讓消費(fèi)者覺得“非你不可”。(這個(gè)部分可以用1-3 張圖）
上面的一張海報(bào)提到核心痛點(diǎn)，當(dāng)一個(gè)人意識(shí)到了問題的存在，產(chǎn)生了共鳴情緒，那么他最需要的是什么？迫不及待需要解決方案。
因此從第三張海報(bào)開始接下來(lái)的幾張海報(bào)都可以呈現(xiàn)如何幫助他們解決問題或?qū)崿F(xiàn)需求。
并且關(guān)于如何解決問題，實(shí)現(xiàn)起來(lái)還無(wú)比容易，再加上眾多保障，讓你可以0風(fēng)險(xiǎn)購(gòu)買使用。
這樣用戶就會(huì)想要躍躍一試，成交的意愿就會(huì)很強(qiáng)。
因此大家有沒有注意到，截至目前，沒有一張海報(bào)是多余的，每一張都有它的用處，并且前后是有邏輯性的。
那么在這個(gè)板塊的海報(bào)中，用什么打動(dòng)客戶？
前面提到我們需突出“突出產(chǎn)品差異化”優(yōu)勢(shì)，也就是在同類目產(chǎn)品中的優(yōu)勢(shì)，“人無(wú)我有，人有我優(yōu)，同時(shí)能解決用戶問題”的點(diǎn)。
比如用戶關(guān)注續(xù)航，競(jìng)品續(xù)航3天，而你的產(chǎn)品可以續(xù)航7天甚至使用了太陽(yáng)能可以無(wú)限續(xù)航。比如全球第一款XXXX產(chǎn)品等。
優(yōu)秀案例參考：
Reolink攝像頭搭載Wi-Fi 6技術(shù)，實(shí)現(xiàn)超快傳輸、低延遲和高穩(wěn)定性。將家庭安全提升到一個(gè)新的水平。
圖片來(lái)源：reolink 僅供學(xué)習(xí)用
dreametech品牌20,000Pa優(yōu)勢(shì)并告訴用戶這款掃地機(jī)器人能夠產(chǎn)生強(qiáng)大的吸力，幾乎可以吸入任何類型的污垢和灰塵，無(wú)論是隱藏在地毯深處的灰塵，還是卡在瓷磚縫隙中的污垢。
圖片來(lái)源：dreametech 僅供學(xué)習(xí)用
核心目標(biāo)：回答用戶“這對(duì)我有什么好處？”從“功能”到“利益”的轉(zhuǎn)化。（建議 3-5 個(gè)核心功能）
也就是因?yàn)槟惝a(chǎn)品的優(yōu)點(diǎn)給消費(fèi)者帶來(lái)的好處或者利益。可以是產(chǎn)品成分的優(yōu)勢(shì)或者功效的優(yōu)勢(shì)。
消費(fèi)者更愿為“解決問題”買單，而非單純的功能。我們可以將功能轉(zhuǎn)換成用戶能夠理解并幫助消費(fèi)者解決需求的點(diǎn)，幫助用戶更好地理解產(chǎn)品，并產(chǎn)生購(gòu)買的可能。
內(nèi)容方向：
技術(shù)參數(shù)（如材質(zhì)、尺寸、續(xù)航）
創(chuàng)新設(shè)計(jì)（如隱藏式按鍵、防水結(jié)構(gòu)）
用戶利益點(diǎn)（如 “輕便易攜帶”“安全防摔”）
優(yōu)秀案例參考：
Dreametech 將功能清晰轉(zhuǎn)化為利益點(diǎn)”Charge Faster, Clean Longer”。
“5500mAh 大電池” 對(duì)應(yīng) “單次清潔時(shí)間長(zhǎng)達(dá) 220 分鐘”，讓用戶明白確實(shí)續(xù)航更長(zhǎng)、清潔范圍更大，減少頻繁充電。
“吸力高達(dá) 2000Pa” 轉(zhuǎn)化為清潔力強(qiáng)，能深度清潔；“充電快 30%” 則體現(xiàn)節(jié)省時(shí)間。用簡(jiǎn)潔語(yǔ)言和數(shù)據(jù)，直觀呈現(xiàn)產(chǎn)品給用戶帶來(lái)的便利。
圖片來(lái)源：dreametech 僅供學(xué)習(xí)用
也可以用其中一張圖整合所有想傳達(dá)的核心功能，比如下面dreametech和Anker的海報(bào)。
圖片來(lái)源：dreametech和anker 僅供學(xué)習(xí)用
核心目標(biāo)：細(xì)節(jié)決定轉(zhuǎn)化率，用細(xì)節(jié)增強(qiáng)真實(shí)感，降低決策成本。
這個(gè)板塊可以放大產(chǎn)品細(xì)節(jié)，展示產(chǎn)品的材質(zhì)、做工等屬性信息，用視覺+文案雙重沖擊的方式，有效傳遞產(chǎn)品賣點(diǎn)。
優(yōu)秀案例參考：
依舊是dreametech 品牌的掃地機(jī)。文案 “Double the Brushes, Double the Results” 采用押韻的手法，朗朗上口，不僅點(diǎn)明雙刷設(shè)計(jì)，還暗示清潔效果加倍，極具吸引力。
畫面選取掃地機(jī)工作時(shí)的特寫鏡頭，著重展示雙刷旋轉(zhuǎn)卷起灰塵垃圾的細(xì)節(jié)，真實(shí)還原清掃場(chǎng)景。讓消費(fèi)者能直觀感受到產(chǎn)品的強(qiáng)大清潔力。
還可以用跟競(jìng)品對(duì)比的細(xì)節(jié)展示圖，以及產(chǎn)品使用前VS使用后的細(xì)節(jié)展示。有對(duì)比才更突出優(yōu)勢(shì)和產(chǎn)品效果。
圖片來(lái)源：dreametech 僅供學(xué)習(xí)用
核心目標(biāo)：用權(quán)威和真實(shí)擊破最后一道防線，消除懷疑，讓消費(fèi)者覺得“選擇你零風(fēng)險(xiǎn)”從而激發(fā)購(gòu)買欲望。
內(nèi)容方向:
圖片來(lái)源：dreametech 僅供學(xué)習(xí)用
圖片來(lái)源：luffy-wear 僅供學(xué)習(xí)用
核心目標(biāo)：越瑣碎，越真實(shí)，預(yù)判所有可能的疑問，減少客服壓力。
尤其是美國(guó)消費(fèi)者習(xí)慣自助購(gòu)物，詳盡的信息能降低退貨率。因此此部分的設(shè)計(jì)需清晰的展示產(chǎn)品的基本信息。
內(nèi)容方向：
圖片來(lái)源：furbo 僅供學(xué)習(xí)用
圖片來(lái)源：dreametech 僅供學(xué)習(xí)用
核心目標(biāo)：給產(chǎn)品一個(gè)“靈魂溢價(jià)”，從“賣貨”到“賣價(jià)值觀”，綁定長(zhǎng)期用戶。
我們可以將品牌理念傳達(dá)給消費(fèi)者，使產(chǎn)品更有厚度，賦予產(chǎn)品更多情緒價(jià)值，帶動(dòng)消費(fèi)者購(gòu)買。
Sprout Social數(shù)據(jù)調(diào)研顯示：美國(guó)Z世代用戶中，62%的消費(fèi)者愿意為具有社會(huì)責(zé)任的品牌支付溢價(jià)。那么為什么不展示這個(gè)板塊讓你的消費(fèi)者看到企業(yè)有愛心的一面？
內(nèi)容方向：
優(yōu)秀案例參考：
furbo品牌產(chǎn)品詳情頁(yè)最后一張海報(bào)提到“One Furbo = $1 to Help Rescued Pets”。展現(xiàn)了Furbo關(guān)心動(dòng)物福利，強(qiáng)調(diào)品牌的社會(huì)責(zé)任感。
每購(gòu)買一臺(tái)Furbo，消費(fèi)者不僅能享受高品質(zhì)產(chǎn)品，還能幫助救助動(dòng)物，激勵(lì)更多人做出購(gòu)買決策。這種情感連接讓顧客感受到參與有意義事業(yè)的價(jià)值，提升品牌忠誠(chéng)度。
同時(shí)，F(xiàn)urbo展示透明度和責(zé)任感，增強(qiáng)消費(fèi)者的信任。通過(guò)這樣的方式，F(xiàn)urbo有效促進(jìn)品牌與消費(fèi)者之間的聯(lián)系，推動(dòng)銷售增長(zhǎng)。
圖片來(lái)源：furbo 僅供學(xué)習(xí)用
作者：外貿(mào)小巨熊 公眾號(hào)：外貿(mào)小巨熊
題圖來(lái)自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
蘭亭妙微(www.73404.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在 UI 界面當(dāng)中使用動(dòng)效已經(jīng)成為這幾年一直被討論的熱門話題了。動(dòng)效要怎么用，什么樣的動(dòng)效更優(yōu)秀等等，這樣的探討層出不窮。在 UI 所涉及到的各種動(dòng)畫和動(dòng)效當(dāng)中，概念動(dòng)效是被討論的最多的話題。充滿實(shí)驗(yàn)性的概念動(dòng)效是動(dòng)效設(shè)計(jì)最前沿的領(lǐng)域，是開發(fā)和實(shí)現(xiàn)上最具有挑戰(zhàn)性的部分，也是新產(chǎn)品上線之后，用戶最容易注意到，也討論得最多的東西。
在 Tubik Studio 的博客上，我們已經(jīng)分享過(guò)很多關(guān)于 UI 動(dòng)效的文章和內(nèi)容了。關(guān)于概念動(dòng)效/動(dòng)畫對(duì)于 UI 設(shè)計(jì)與開發(fā)的影響，我想 Tubik 的動(dòng)畫設(shè)計(jì)師 Kirill Yerokhin 是最有發(fā)言權(quán)的。
概念動(dòng)效應(yīng)該算是概念設(shè)計(jì)領(lǐng)域的一個(gè)分支。總的來(lái)說(shuō)，概念動(dòng)效還是在做動(dòng)效和動(dòng)畫的設(shè)計(jì)，不過(guò)它是為了在真實(shí)的產(chǎn)品上線之前，基于特定的想法、構(gòu)思而進(jìn)行創(chuàng)建的東西。在進(jìn)行用戶界面設(shè)計(jì)的時(shí)候，動(dòng)效可以存在于交互、轉(zhuǎn)場(chǎng)和具體的控件操作上，動(dòng)效作為一種狀態(tài)轉(zhuǎn)變、交互反饋和視覺引導(dǎo)的工具而存在。動(dòng)效設(shè)計(jì)師會(huì)使用各種各樣的工具來(lái)進(jìn)行動(dòng)效的設(shè)計(jì)，我們常常提到的工具包括 Adobe After Effects，Principle，F(xiàn)igma 和 InVision。
這其實(shí)是目前最富有爭(zhēng)議的話題。很多概念動(dòng)效和現(xiàn)有的、成型的動(dòng)效/動(dòng)畫解決方案，在步驟、效果、執(zhí)行和開發(fā)上都不盡相同，超出了通常的限制和常見的規(guī)則。這種動(dòng)效技術(shù)在剛剛開始接觸的時(shí)候，會(huì)覺得不夠真實(shí)，沒有必要，甚至有人會(huì)認(rèn)為無(wú)法實(shí)現(xiàn)。
重點(diǎn)在于，UI 動(dòng)效其實(shí)和我們常見的靜態(tài)元素（字體、圖標(biāo)、控件、色彩和形狀）同樣能夠讓產(chǎn)品從激烈的競(jìng)爭(zhēng)當(dāng)中脫穎而出。
所有開發(fā)者討厭概念動(dòng)效且不想去實(shí)現(xiàn)的說(shuō)法其實(shí)是不夠準(zhǔn)確的。實(shí)際上，這樣的事情要依情況來(lái)看。在很多創(chuàng)意設(shè)計(jì)領(lǐng)域當(dāng)中，經(jīng)常有人說(shuō)某種創(chuàng)新或者創(chuàng)意是不可能實(shí)現(xiàn)的，然而實(shí)際上，總會(huì)有人竭盡所能發(fā)現(xiàn)新的解決方案，找到新的方法。
需求決定供應(yīng)。如果「市場(chǎng)」看到了一個(gè)全新的設(shè)計(jì)理念，尤其是在動(dòng)畫和動(dòng)效領(lǐng)域，就會(huì)有人想辦法在實(shí)際的產(chǎn)品當(dāng)中將它實(shí)現(xiàn)出來(lái)。而這個(gè)時(shí)候，設(shè)計(jì)師的構(gòu)思就不再停留在概念上。在 Tubik Studio，我們?cè)诤芏鄷r(shí)候會(huì)提出新的概念動(dòng)效，這些概念動(dòng)效甚至可能會(huì)極其復(fù)雜，但是需求一旦確定，總會(huì)有第三方的開發(fā)接手并且將他們實(shí)現(xiàn)出來(lái)。
實(shí)踐表明，在技術(shù)上，概念動(dòng)效的實(shí)現(xiàn)幾乎僅僅就是時(shí)間和花銷上的問題，解決和實(shí)現(xiàn)的可能性其實(shí)非常之高。
第一個(gè)案例展示了和列表交互的動(dòng)畫，左邊的列表只是單純的滾動(dòng)，而右邊的則明顯的加入了漸進(jìn)的動(dòng)效，模擬現(xiàn)實(shí)中拉動(dòng)卡片的微妙動(dòng)作。右邊的變體看起來(lái)更加生動(dòng)活潑，為滾動(dòng)交互體驗(yàn)增加了樂趣。更有趣的地方在于，右邊的變體在運(yùn)動(dòng)的過(guò)程中產(chǎn)生了卡片之間有更多空間的視覺幻象，這讓整個(gè)界面充滿了呼吸感和動(dòng)感。
上面的案例當(dāng)中，左邊只是簡(jiǎn)單的左右切換過(guò)渡，而右邊則帶有放大和轉(zhuǎn)變的過(guò)渡，不僅讓動(dòng)效的指向性更為明顯，而且更加富有動(dòng)態(tài)。
概念動(dòng)效往往會(huì)力圖讓最常規(guī)的交互效果更加生動(dòng)，比如側(cè)邊欄展開這樣常見的操作。
概念動(dòng)效是 UI 設(shè)計(jì)階段最具有創(chuàng)造性的階段之一，動(dòng)效設(shè)計(jì)師會(huì)提供不同的方案和選項(xiàng)來(lái)同開發(fā)者和客戶進(jìn)行討論。下面的案例都是 Kinill 和 UI 設(shè)計(jì)師一同實(shí)現(xiàn)的一些實(shí)例。
這是一個(gè)財(cái)務(wù)管理類應(yīng)用動(dòng)效，采用不同色彩來(lái)實(shí)現(xiàn)餅狀圖來(lái)進(jìn)行數(shù)據(jù)展示，整個(gè)效果時(shí)髦值很高。
這是音樂新聞應(yīng)用中的過(guò)渡動(dòng)效。
這是為家庭預(yù)算 APP 設(shè)計(jì)的菜單打開概念動(dòng)效。
這是商務(wù)名片 APP 的 UI 概念動(dòng)效。
這個(gè)日歷 APP 的概念動(dòng)效想必大家都見過(guò)很多次了，多彩的設(shè)計(jì)和流暢的動(dòng)效至今令人難忘。
這個(gè)充滿流動(dòng)性側(cè)邊欄動(dòng)效非常有意思。
事實(shí)上，從最基本的構(gòu)思和概念開始創(chuàng)新和創(chuàng)造幾乎是每個(gè)行業(yè)都遵循的流程。包括汽車行業(yè)和建筑設(shè)計(jì)，大多都是從基本的概念設(shè)計(jì)著手，才有之后的實(shí)現(xiàn)和發(fā)展。概念設(shè)計(jì)最初常常以「這只是和現(xiàn)實(shí)無(wú)關(guān)的幻想」的樣子出現(xiàn)，但是最終實(shí)現(xiàn)出來(lái)并且走入日常生活的案例，比比皆是。不管怎樣，無(wú)論好壞，它們都在推動(dòng)我們的生活逐步前進(jìn)。
在 UI 設(shè)計(jì)領(lǐng)域，概念動(dòng)效的優(yōu)勢(shì)和意義也是一樣的。前不久有不少人認(rèn)為我們所設(shè)計(jì)的動(dòng)效是不真實(shí)的、過(guò)于花俏的，但是實(shí)現(xiàn)出來(lái)，上手之后，往往和預(yù)期不盡相同。在平面設(shè)計(jì)的年代，靜態(tài)的設(shè)計(jì)追求的是持久的價(jià)值，簡(jiǎn)約和清爽讓這種價(jià)值得以維系。但是在這個(gè)用戶注意力資源極其有限的今天，多樣的需求和緊張的競(jìng)爭(zhēng)使得動(dòng)效設(shè)計(jì)師需要竭盡全力抓住用戶的每一點(diǎn)注意力，至少，越來(lái)越腦洞大開的動(dòng)效正在證明它們?cè)谶@件事上無(wú)可替代的價(jià)值。
原文作者 : Tubik Studio
譯者／編輯 : 陳子木
譯文地址：https://www.uisdc.com/conceptual-animation-making-ui
本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖由作者提供
編輯導(dǎo)語(yǔ)：產(chǎn)品的設(shè)計(jì)應(yīng)當(dāng)讓用戶始終清楚事項(xiàng)的發(fā)生，重要的元素也應(yīng)當(dāng)置于用戶一目了然的位置，直觀且清晰的設(shè)計(jì)往往能提升用戶的使用體驗(yàn)。本篇文章里，作者繼續(xù)總結(jié)了提升產(chǎn)品設(shè)計(jì)效果的幾個(gè)小技巧，一起來(lái)看一下。
重要的位置，要留給重要的元素。
編者按：用戶對(duì)產(chǎn)品的體驗(yàn)來(lái)自直觀感受。所以UI/UX往往對(duì)產(chǎn)品的成敗有著直接的影響，糟糕的UI/UX體驗(yàn)會(huì)讓強(qiáng)大的功能失去效力。
但怎么才能提高UI/UX設(shè)計(jì)的效果呢？不一定需要你掌握豐富全面的設(shè)計(jì)知識(shí)，有時(shí)候一點(diǎn)點(diǎn)的小改變就能令設(shè)計(jì)大為改觀。
Marc Andrew總結(jié)了36個(gè)改進(jìn)UI/UX設(shè)計(jì)的小技巧，分成6篇系列文章刊出，此為第五篇，希望能夠幫助到你。原文發(fā)表在Medium上，標(biāo)題是：UI & UX micro-tips: Volume five。
2個(gè)卡片設(shè)計(jì)樣例。左邊的標(biāo)題行高很高，右邊的標(biāo)題行高就要小很多。
在創(chuàng)作實(shí)用、易于理解且華麗的 UI 時(shí)，只需要做一點(diǎn)點(diǎn)的調(diào)整馬上就可以改進(jìn)設(shè)計(jì)。
在這篇系列文章的第5篇中，我會(huì)給大家再帶來(lái)6個(gè)容易實(shí)踐的 UI 和 UX 小技巧。
相關(guān)閱讀：
我們開始吧……
2個(gè)卡片設(shè)計(jì)樣例。左邊的標(biāo)題行高很高，右邊的標(biāo)題行高就要小很多。
設(shè)計(jì)要講規(guī)矩，我是遵守規(guī)則的忠實(shí)粉絲，比方說(shuō)Type Scale或者一直都很出色的8pt Grid系統(tǒng)我是遵守的。
但有時(shí)候最好不要太過(guò)教條主義，不要Scale 或 Grid告訴你該怎么做就怎么做，重要的是看怎么做更好看。
請(qǐng)記住，規(guī)則是可以變通的，有時(shí)候偶爾也是可以打破的。
做一個(gè)打破規(guī)則的叛逆者。
2 個(gè)表單字段樣例。一個(gè)顯示的是帶有基本錯(cuò)誤消息的字段，另一個(gè)顯示了更詳細(xì)的錯(cuò)誤消息。
使用表單的時(shí)候，要盡量確保錯(cuò)誤消息說(shuō)清楚出了什么問題，以及如何補(bǔ)救。
始終要讓用戶了解到具體情況。
要讓這些錯(cuò)誤消息對(duì)用戶有幫助，不要讓用戶蒙在鼓里。
APP的 2 個(gè)加載屏幕樣例。一個(gè)空空如也，沒有加載提示，另一個(gè)展示了更詳細(xì)的加載指示器。
展示APP元素的框架可以幫助你快速地向用戶溝通應(yīng)用的布局，并讓用戶放寬心，知道有什么事情正在發(fā)生，而不是死機(jī)。
系統(tǒng)狀態(tài)可見性是需要遵循的重要原則，這讓用戶能夠了解正在發(fā)生的事情。
不要讓用戶玩猜謎游戲。要從一開始就讓他們了解情況。
APP的 2 個(gè)通知樣例。一個(gè)提供的信息非?；?，另一個(gè)在模態(tài)內(nèi)部提供了更詳細(xì)的描述。
在進(jìn)行應(yīng)用可能會(huì)產(chǎn)生后果的特定操作之前，始終都要先詳細(xì)告知用戶。
這尤其適用于某些會(huì)產(chǎn)生不可逆轉(zhuǎn)后果的操作，比方說(shuō)永久性刪除某些內(nèi)容。
讓用戶知道將會(huì)發(fā)生什么，并要求他們?cè)诎聪履莻€(gè)寫著“刪除互聯(lián)網(wǎng)”的紅色大按鈕之前再三確認(rèn)自己要這么做。
2 個(gè)標(biāo)簽欄樣例。上面這個(gè)展示的是不太重要的圖標(biāo)，下面這個(gè)展示的是更重要的圖標(biāo)。
APP的標(biāo)簽欄可是屏幕這塊房地產(chǎn)的黃金地段，所以請(qǐng)明智使用。
要把你的標(biāo)簽欄保留給最常用的屏幕，并把次要的屏幕隱藏在“更多”圖標(biāo)里面。
小小的標(biāo)簽欄只能留給重要的東西。
2個(gè)桌面導(dǎo)航的樣例。一個(gè)是注冊(cè)和登錄按鈕隱藏在下拉菜單里面，另一個(gè)在菜單以外放置了 2 個(gè)按鈕，而且就放在頂部導(dǎo)航欄旁邊。
是的，我時(shí)不時(shí)還會(huì)在桌面視圖里面看到這種情況發(fā)生。
用戶需要采取的基本操作（也就是注冊(cè)或登錄）完全隱藏在他們甚至可能都瀏覽不到的下拉菜單里面。
把這些重要操作放在訪問便利的位置，并應(yīng)該放在用戶預(yù)期最應(yīng)該出現(xiàn)的地方。
作者：Marc Andrew，譯者：boxi
來(lái)源：https://www.36kr.com/p/1302313074821767
本文由 @神譯局 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于CC0協(xié)議。
關(guān)鍵字：電商 詳情頁(yè)設(shè)計(jì) 視覺營(yíng)銷
網(wǎng)絡(luò)時(shí)代，電商平臺(tái)作為主流消費(fèi)渠道，在消費(fèi)者心中已占有大部分比例，越來(lái)越多的消費(fèi)者更愿意選擇在線上購(gòu)物消費(fèi)，如何讓消費(fèi)者能夠更快速了解商品，產(chǎn)生購(gòu)買欲？電商詳情頁(yè)起到關(guān)鍵性作用，電商詳情頁(yè)作為產(chǎn)品說(shuō)明書，不僅是成交轉(zhuǎn)化入口，更是品牌傳播的重要途徑。如何設(shè)計(jì)一款適合產(chǎn)品的詳情頁(yè)？主要從兩個(gè)方面入手：
蘭亭妙微(www.73404.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
本章會(huì)從實(shí)操出發(fā)，結(jié)合真實(shí)項(xiàng)目為大家?guī)?lái)配色實(shí)踐。期間會(huì)介紹項(xiàng)目選色邏輯、配色過(guò)程、使用到的工具及如何建立色彩系統(tǒng)。
本章會(huì)從實(shí)操出發(fā)，結(jié)合真實(shí)項(xiàng)目為大家?guī)?lái)配色實(shí)踐。期間會(huì)介紹項(xiàng)目選色邏輯、配色過(guò)程、使用到的工具及如何建立色彩系統(tǒng)。
21年我司進(jìn)行業(yè)務(wù)調(diào)整，原保險(xiǎn)業(yè)務(wù)從當(dāng)前產(chǎn)品中獨(dú)立出去，作為一家全新平臺(tái)為印尼用戶提供保險(xiǎn)選購(gòu)及理賠服務(wù)，為此我們提供了新的產(chǎn)品設(shè)計(jì)和配色。
根據(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)品主色。
明確了主色色相，但同一色相會(huì)有冷暖、深淺之別，給到用戶的心里感受也略有差異。具體到本次項(xiàng)目中，暖綠有溫暖、活潑、歡快的感覺，冷綠則帶給用戶冷靜、平和的情緒。對(duì)于本次項(xiàng)目，冷綠更加符合產(chǎn)品定位。
飽和度控制色彩的艷麗程度，明度控制色彩的明暗變化，這兩項(xiàng)參數(shù)直接影響色彩的最終效果，所以需要同步交替調(diào)整，直到選出最合適的?？紤]到主色常用于按鈕或重要文本，所以需要注意色彩的對(duì)比度，確保文本在界面中的可讀性。在本次項(xiàng)目中，“綠色”本身屬于對(duì)比度較小的顏色，為了獲得合適的對(duì)比度，需要調(diào)整更大的飽和度和更低的明度。經(jīng)調(diào)整之后，我們測(cè)試了色彩的對(duì)比度為3:1，滿足W3C中給到的色彩對(duì)比度建議。
根據(jù)輔助色定義，我們匹配到了不同色相的輔助色，但并不是所有顏色都是我們需要的，需要根據(jù)經(jīng)驗(yàn)做出一定刪減。如同類色中的兩個(gè)綠色，色相上與主色過(guò)于接近，使用過(guò)程中會(huì)造成視覺混淆，所以我們剔除這組顏色。再如中差色與對(duì)比色中都有黃色，為了與橙色區(qū)分更加明顯，我們刪除對(duì)比色中的黃色。經(jīng)過(guò)一系列刪減后，留下來(lái)的便是我們需要的色彩。此時(shí)也可以對(duì)色相進(jìn)一步調(diào)整，如類似色中的藍(lán)色偏向湖藍(lán)，為了盡量和主色拉開差別，我們選擇色相向右偏移。
以上色彩只確定了色相，沒有進(jìn)行飽和度、明度調(diào)整，視覺上并不屬于同一層級(jí)。為了獲取更加統(tǒng)一的配色，需要對(duì)其進(jìn)行調(diào)整，這一過(guò)程被稱為視覺感官校準(zhǔn)。如何校準(zhǔn)？有人通過(guò)給色彩疊加黑色，對(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)后的配色。
第二章提到中性色可通過(guò)調(diào)整明度或透明度得到，本項(xiàng)目使用場(chǎng)景比較固定，所以決定調(diào)整明度來(lái)得到中性色?？紤]到主色為“冷綠”，與偏藍(lán)的中性色搭配可保證色彩調(diào)性一致，于是我們?nèi)∷{(lán)色色相值，調(diào)整飽合度獲得最終色彩。需要注意的是隨中性色明度依次降低，飽和度需要逐級(jí)增加。最后確保主要用色符合無(wú)障礙設(shè)計(jì)指南，我們對(duì)一級(jí)、二級(jí)、三級(jí)文字用色進(jìn)行了對(duì)比度測(cè)試，符合無(wú)障礙設(shè)計(jì)要求。
梯度色板可以提供更多配色，覆蓋更多使用場(chǎng)景，避免后續(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)隸屬設(shè)計(jì)系統(tǒng)的一部分，是對(duì)色彩進(jìn)行科學(xué)管理的體系。不同于色彩規(guī)范主要針對(duì)設(shè)計(jì)側(cè)，而是需要打通開發(fā)聚焦產(chǎn)品代碼中。
簡(jiǎn)單來(lái)說(shuō)色彩系統(tǒng)由design token、色彩庫(kù)和說(shuō)明文檔構(gòu)成。design token是設(shè)計(jì)與開發(fā)約定一致的色彩名稱，作為色彩調(diào)用的唯一憑證。色彩庫(kù)是包含design token和顏色參數(shù)的樣式集合，供我們?cè)谠O(shè)計(jì)和開發(fā)中調(diào)用。說(shuō)明文檔類似于設(shè)計(jì)規(guī)范，定義了色彩的使用方式，為我們的使用提供指導(dǎo)。
如何命名需要考慮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）、語(yǔ)義token（semantic tokens）和組件 token（component tokens）。核心token存儲(chǔ)的是原始值作為構(gòu)建設(shè)計(jì)系統(tǒng)的基礎(chǔ)，語(yǔ)義token引用核心token，它的名稱描述了token的預(yù)期用途。組件token引用語(yǔ)義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的主干部份，包含樣式、屬性、語(yǔ)義，修飾符表明狀態(tài)、尺度、模式等。由于篇幅原因，此處只是簡(jiǎn)單介紹，感興趣的同學(xué)可以點(diǎn)擊原文查看。
按照兩位作者的觀點(diǎn)，筆者對(duì)本次色彩系統(tǒng)進(jìn)行了design token命名，如下所示：
樣式庫(kù)是設(shè)計(jì)與開發(fā)調(diào)用的基礎(chǔ)，需要在設(shè)計(jì)工具中實(shí)現(xiàn)token的層級(jí)邏輯，同時(shí)方便開發(fā)同學(xué)查看。筆者主要使用的工具是figma，F(xiàn)igma為我們提供了豐富的功能和插件建立樣式庫(kù)，以下會(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)了樣式庫(kù)的作用。但local style不支持token的層級(jí)嵌套，只能實(shí)現(xiàn)單層級(jí)token。如果你的項(xiàng)目剛好使用了單層級(jí)token，那么建議你使用此功能。
local variables：在今年6月份的config大會(huì)中，figma發(fā)布了變量功能，雖然CEO Dylan Field先生說(shuō)不會(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)限，這無(wú)疑會(huì)增加團(tuán)隊(duì)成本。2.插件支持將token轉(zhuǎn)化為figma樣式和變量，并保持當(dāng)前的token名稱，此時(shí)開發(fā)可以在figma的inspect面板查看token，建議使用此種方式，經(jīng)濟(jì)實(shí)惠。
一般文檔內(nèi)容包含使用規(guī)則、注意事項(xiàng)、場(chǎng)景描述、token名稱、色值參數(shù)等等，也可根據(jù)實(shí)際情況作以增減。輸出說(shuō)明文檔后，整個(gè)色彩系統(tǒng)搭建完成，接下來(lái)需要推進(jìn)團(tuán)隊(duì)使用。為確保整個(gè)系統(tǒng)在項(xiàng)目中順利落地，最好組織相關(guān)人員進(jìn)行一次宣講，介紹清楚使用規(guī)范及注意事項(xiàng)，明確要求嚴(yán)格按照系統(tǒng)執(zhí)行。
ui設(shè)計(jì)分享達(dá)人 設(shè)計(jì)思維
ui設(shè)計(jì)分享達(dá)人 設(shè)計(jì)思維
作者：大漠飛鷹CYSJ
鏈接：https://www.zcool.com.cn/article/ZMTY1MTk0NA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.73404.com.cn