做交互設(shè)計(jì)10年，我為何轉(zhuǎn)崗到產(chǎn)品經(jīng)理？
從擬物風(fēng)格到扁平化，再到如今的多變色彩與微妙質(zhì)感，設(shè)計(jì)風(fēng)格的演變不僅反映了技術(shù)的進(jìn)步，也折射出用戶需求的轉(zhuǎn)變。本文結(jié)合釘釘近10年的B端設(shè)計(jì)經(jīng)驗(yàn)，深入探討2025年B端設(shè)計(jì)的三大趨勢：多變豐富的色彩、微妙克制的質(zhì)感以及清晰明了的圖形。揭示了如何在滿足企業(yè)高效、專業(yè)需求的同時(shí)，為用戶帶來更具情感價(jià)值和科技感的視覺體驗(yàn)。
回溯互聯(lián)網(wǎng)的發(fā)展進(jìn)程，從桌面端的撥號(hào)上網(wǎng)，到5G移動(dòng)互聯(lián)網(wǎng)，再至人工智能的助力，科技領(lǐng)域正在經(jīng)歷著翻天覆地的變革。未來的數(shù)字世界，在沉浸感、參與度、個(gè)性化等維度對(duì)體驗(yàn)會(huì)提出更進(jìn)階的要求；與此同時(shí)，B端企業(yè)對(duì)于高效、簡便、用戶友好的界面需求與日俱增。在2025年的當(dāng)下，B端設(shè)計(jì)師唯有持續(xù)學(xué)習(xí)，適應(yīng)新技術(shù)與新趨勢，緊密圍繞客戶的業(yè)務(wù)價(jià)值展開設(shè)計(jì)，進(jìn)一步注重實(shí)用性、包容性以及可定制化，方可為企業(yè)客戶塑造出卓越的產(chǎn)品與服務(wù)。
因此，我們結(jié)合釘釘近10年的B端產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)，鑒于未來B端設(shè)計(jì)趨勢將展現(xiàn)出多元化、智能化和人性化的特質(zhì)，從B端產(chǎn)品個(gè)性化、風(fēng)格與質(zhì)感、界面版式、圖標(biāo)、動(dòng)態(tài)交互等多維度設(shè)計(jì)展開深度研究，與大家一道探討B(tài)端設(shè)計(jì)的本質(zhì)和趨勢，期望在真正駕馭B端產(chǎn)品設(shè)計(jì)的這條道路上，帶來些許有益的啟迪。
上篇文章我們講述了B端產(chǎn)品的個(gè)性化趨勢，如何利用個(gè)性化幫助個(gè)體提升用戶價(jià)值，打造個(gè)體形象、滿足個(gè)體情緒以及增強(qiáng)個(gè)體自信。
今天，我們要給大家分享的是B端產(chǎn)品風(fēng)格&質(zhì)感，為企業(yè)塑造品牌形象、為個(gè)人用戶提供情感價(jià)值。
設(shè)計(jì)作為科技和藝術(shù)的結(jié)合，UI設(shè)計(jì)風(fēng)格的演變不僅與技術(shù)的發(fā)展密不可分，而且與藝術(shù)創(chuàng)作風(fēng)格的發(fā)展有著異曲同工之妙，都經(jīng)歷了抽象—具象—抽象的過程。
20世紀(jì)70-80年代是計(jì)算機(jī)圖形界面的萌芽階段，就像繪畫藝術(shù)起源之時(shí)的那個(gè)茹毛飲血的年代，當(dāng)時(shí)的原始人所能利用的工具只有火堆熄滅后留下的木炭，圖像呈現(xiàn)的載體也只有山洞內(nèi)的墻壁和巖石。就像剛剛進(jìn)入計(jì)算機(jī)時(shí)代的設(shè)計(jì)師們，不僅缺少專業(yè)的繪圖軟件，而且當(dāng)時(shí)計(jì)算機(jī)本身的顯示能力也尚且不足。這個(gè)階段的UI設(shè)計(jì)，能夠在顯示器上清晰地顯示并傳達(dá)明確的含義，比畫出風(fēng)格更加重要。觀察當(dāng)時(shí)的操作界面，不難猜測當(dāng)時(shí)的設(shè)計(jì)師，努力以具象的表現(xiàn)風(fēng)格來減少人們對(duì)計(jì)算機(jī)界面的陌生感，但由于工具和載體的限制無法完美實(shí)現(xiàn)，雖然這種風(fēng)格無法被稱為擬物風(fēng)格，但為后來真正的擬物風(fēng)格的出現(xiàn)和發(fā)展奠定了基礎(chǔ)。
1995年，家用計(jì)算機(jī)的顯示能力迎來了質(zhì)的飛躍，Windows95發(fā)布、對(duì)真色彩的支持、PhotoShop5.0的發(fā)布……技術(shù)進(jìn)步和專業(yè)軟件的加持讓設(shè)計(jì)師突破了過去創(chuàng)作工具和呈現(xiàn)載體的限制，就好像在山洞里用木炭繪畫的原始人，擁有了畫筆、顏料和畫布。設(shè)計(jì)師的創(chuàng)作空間和寫實(shí)能力得到極大提升。
與此同時(shí)，個(gè)人計(jì)算機(jī)和手機(jī)開始普及，圖形化的操作界面不再是科研人員和專業(yè)人士的專屬，而是普通人工作學(xué)習(xí)中的一部分。為了讓沒有接觸過圖形化操作界面的用戶快速識(shí)別圖標(biāo)代表的功能，最好的方式就是在界面中對(duì)現(xiàn)實(shí)世界中的物體進(jìn)行還原，這便推動(dòng)了擬物風(fēng)格的發(fā)展。
擬物風(fēng)格的設(shè)計(jì)作品，通過模擬現(xiàn)實(shí)物品的造型和質(zhì)感，通過疊加、高光、紋理、材質(zhì)、陰影等效果對(duì)實(shí)物進(jìn)行再現(xiàn)，讓用戶以極低的學(xué)習(xí)成本快速熟悉圖形化的操作界面和產(chǎn)品功能，并以符合日常習(xí)慣和直覺的方式引導(dǎo)用戶進(jìn)行交互。
例如在ios6中的相機(jī)icon，對(duì)鏡頭部分細(xì)節(jié)刻畫非常細(xì)致，用戶很容易聯(lián)想到使用真實(shí)相機(jī)時(shí)能夠做到的事情，這對(duì)用戶理解和熟悉某一個(gè)產(chǎn)品功能的幫助無疑是巨大的；再比如同樣在ios6中的書架icon設(shè)計(jì)也十分精彩，不僅對(duì)真實(shí)報(bào)刊架的結(jié)構(gòu)和質(zhì)感極度還原，而且對(duì)書架內(nèi)的雜志也進(jìn)行了展示，用戶甚至能像真的面對(duì)一個(gè)書架一樣看到書架中的內(nèi)容，小小的icon中信息含量極高。
到2013年左右，智能手機(jī)在全球主要國家和地區(qū)的普及率大幅提高。根據(jù)統(tǒng)計(jì)數(shù)據(jù)，許多發(fā)達(dá)國家的智能手機(jī)普及率超過了50%，發(fā)展中國家的智能手機(jī)普及率也在快速上升。大部分用戶已經(jīng)對(duì)圖形化的操作界面非常熟悉，無需那些極致寫實(shí)的風(fēng)格也能快速理解圖形背后的含義和功能。同時(shí)，越來越多的信息和應(yīng)用涌入智能設(shè)備，擬物風(fēng)格所推崇的肌理、質(zhì)感、光影……帶來精致效果的同時(shí)，也讓細(xì)節(jié)變得冗余，如何處理爆炸的信息成為UI設(shè)計(jì)的首要問題。就像19世紀(jì)攝影技術(shù)對(duì)傳統(tǒng)寫實(shí)繪畫藝術(shù)的沖擊，讓藝術(shù)家們重新思考繪畫藝術(shù)的發(fā)展方向一樣，擬物風(fēng)格的極致具象化在達(dá)到巔峰之時(shí)也漸漸到達(dá)了轉(zhuǎn)折點(diǎn)。
2013年9月ios7發(fā)布，并且首次在UI設(shè)計(jì)中采用了扁平化的設(shè)計(jì)風(fēng)格。這種風(fēng)格摒棄了擬物設(shè)計(jì)風(fēng)格中的寫實(shí)光影、肌理、冗余的細(xì)節(jié)、甚至放棄了體積的塑造以及一切可能會(huì)對(duì)識(shí)別產(chǎn)生干擾的元素，只保留對(duì)用戶最關(guān)鍵的信息，呈現(xiàn)出十分干凈整潔的視覺效果。
然而物極必反，扁平化設(shè)計(jì)的極致簡潔，容易讓長期使用的用戶感到冷淡和無趣，于是新擬物風(fēng)格應(yīng)運(yùn)而生。
新擬物融合了擬物和扁平兩種風(fēng)格的特點(diǎn)，在光影和立體效果方面較為寫實(shí)，元素通常是凸起或凹陷于界面之上，視覺上錯(cuò)落有致，但是在色彩和造型方面則更偏向于扁平化風(fēng)格，圖形往往經(jīng)過一定的簡化和抽象，并搭配少量簡潔的主觀顏色。但是新擬物風(fēng)格過于依賴投影和立體效果對(duì)界面元素的區(qū)分，很難呈現(xiàn)復(fù)雜的信息層級(jí)，而且微妙的對(duì)比度也不利于無障礙識(shí)別，所以這種風(fēng)格并未真正大面積流行和使用。
2022年，ChatGPT發(fā)布，AI在自然語言處理方面達(dá)到了前所未有的高度，同年Midjourney和stablediffusion的出圈讓每個(gè)人看到了AI生圖的魅力。不僅各種AI應(yīng)用和網(wǎng)站如同雨后春筍般出現(xiàn)，而且各行各業(yè)的APP都在爭前恐后的升級(jí)自己的AI能力。這樣的時(shí)代背景，為UI設(shè)計(jì)提出了一個(gè)新的命題：如何用設(shè)計(jì)展現(xiàn)應(yīng)用的AI能力以及企業(yè)的智能化心智。
色彩在B端設(shè)計(jì)風(fēng)格中占據(jù)著至關(guān)重要的地位，能夠帶給用戶非常強(qiáng)烈的直觀感受，是用戶對(duì)產(chǎn)品和品牌的第一印象。例如藍(lán)色就是過去對(duì)To B或科技產(chǎn)品的色彩印象，諸如英特爾、微軟、聯(lián)想、戴爾、IBM…這些品牌通過藍(lán)色來傳達(dá)簡潔、未來感和高科技等視覺感受。但是這個(gè)標(biāo)準(zhǔn)并非是一成不變的，越來越多的B端設(shè)計(jì)，選擇使用豐富的色彩來表達(dá)智能化千變?nèi)f化的特點(diǎn)，科技感的表達(dá)不再是千篇一律的冷色，而有了更多的變化。
彌散漸變
彌散漸變是一種借助模糊效果將多種顏色進(jìn)行混合的特殊漸變形式，多種顏色的混合以及不規(guī)律的漸變走勢，讓彌散漸變具有很強(qiáng)的氛圍烘托效果和表現(xiàn)力。暈開的色彩仿佛在一片虛空之中慢慢彌散開來，細(xì)膩、柔和又夢幻，很適合用來提升界面的局部氛圍。
優(yōu)秀的場景適用性
在B端設(shè)計(jì)中，屏效和識(shí)別尤為重要，利用圖形或插畫的形式烘托氛圍，往往需要占用更多的空間，并且在網(wǎng)頁端的適配過程中，容易產(chǎn)生圖文重疊帶來的識(shí)別的問題。而彌散漸變由于其模糊和明度均勻的特點(diǎn)，可以在為畫面貢獻(xiàn)豐富度的同時(shí)，不產(chǎn)生視覺上的焦點(diǎn)，所以在適配過程中也不會(huì)產(chǎn)生圖文重疊的問題，具有很普遍的應(yīng)用場景。
高效的場景拓展
在調(diào)整漸變時(shí)，通過保留一些相對(duì)清晰的輪廓，彌散漸變還能呈現(xiàn)出虛實(shí)結(jié)合的視覺體驗(yàn)，讓畫面更具動(dòng)感和層次變化，就像一面磨砂玻璃后飄浮著一些真實(shí)的物體一樣，十分具有空間感。虛實(shí)的變化讓色彩有了具體的造型，可能是一段波浪、一個(gè)球體、或是一座山丘……這樣的背景配合一些簡單的排版，便可以是一張海報(bào)、一張banner、一個(gè)推送封面……這無疑為高速迭代的B端設(shè)計(jì)提供了一個(gè)高效的解決方案。
動(dòng)態(tài)變化
根據(jù)資料顯示，手機(jī)軟件的AI生圖時(shí)長一般在10秒至120秒之間，AI搜索平均時(shí)長大致在2秒到15秒之間，專業(yè)的寫作AI成文時(shí)間大致在3秒到30秒……
AI應(yīng)用伴隨著大量的等待時(shí)間。使用動(dòng)態(tài)變化的顏色能夠降低用戶在等待期間的焦慮感，并且不斷變化流動(dòng)的色彩也能暗示用戶，當(dāng)前仍處在“生成中”的狀態(tài)下。例如用戶在等待釘釘AI助理回答的過程中，聊天氣泡會(huì)呈現(xiàn)出多彩的流光效果；用戶在與AI助理進(jìn)行語音交互時(shí)，整個(gè)屏幕邊緣會(huì)呈現(xiàn)動(dòng)態(tài)的彩色光效，以表示當(dāng)前的AI激活狀態(tài)。
除此之外，全屏動(dòng)態(tài)的漸變背景還很適合用在信息不多的功能或應(yīng)用首頁，例如在釘釘?shù)牡卿涰撁?，屏幕近三分之二的空間中只有簡單的文字動(dòng)畫，搭配全氛圍的動(dòng)態(tài)漸變背景，不僅清晰地傳達(dá)品牌的智能化心智，而且為“登錄”這一操作增添了滿滿的儀式感。類似的還有釘釘AI搜索的功能首頁，大面積涌動(dòng)的動(dòng)態(tài)漸變，充分在視覺層面展現(xiàn)了智能化的心智，而且大面積的留白也讓釘釘AI企業(yè)搜索的功能價(jià)值描述顯得格外突出。
雖然新擬態(tài)風(fēng)格并未大規(guī)模的使用和流行，但其衍生和沉寂的背后反映了設(shè)計(jì)的本質(zhì)就是一場功能和審美之間的角逐。B端設(shè)計(jì)更是如此，用戶側(cè)需要美的設(shè)計(jì)來愉悅工作中的心情，但又不想被花哨的色彩和裝飾干擾工作效率，企業(yè)側(cè)需要擺脫沉悶古板的刻板印象，但同時(shí)也需要呈現(xiàn)專業(yè)、科技的高大形象保持可信度。微妙克制的質(zhì)感表達(dá)為這種“平衡”的實(shí)現(xiàn)提供了解決思路。
玻璃擬態(tài)
玻璃擬態(tài)是2020年末開始流行的設(shè)計(jì)風(fēng)格，顧名思義就是對(duì)玻璃這種材質(zhì)的一種擬物化設(shè)計(jì)，玻璃擬態(tài)風(fēng)格相較于新擬物風(fēng)格最明顯的進(jìn)步在于，它巧妙地利用玻璃這種材質(zhì)解決了新擬物風(fēng)格中元素邊界不清晰、難以體現(xiàn)復(fù)雜層級(jí)等問題。其風(fēng)格特點(diǎn)可以總結(jié)為以下特點(diǎn)：
通透：
由于磨砂玻璃的通透性，在界面中存在多個(gè)層級(jí)時(shí)，會(huì)呈現(xiàn)出一種虛實(shí)結(jié)合的美感。并且其透明的屬性，能夠很好的暗示用戶目前所處的位置，利用此特性，不僅能更沉浸的展現(xiàn)用戶當(dāng)前關(guān)注的信息，而且“疊加”而非“跳轉(zhuǎn)”的交互邏輯也極大減輕了用戶操作時(shí)的心理負(fù)擔(dān)。
懸?。?/p>
傳統(tǒng)的擬物風(fēng)格往往會(huì)塑造一個(gè)地面，再將圖標(biāo)“放置”在上面。而玻璃擬態(tài)風(fēng)格則更像是構(gòu)建了一個(gè)“無重力”的虛擬空間，界面中的元素有明顯的懸浮感，顯得十分輕盈，同時(shí)也非常適用于B端場景下對(duì)于科技感的體現(xiàn)。配合投影、虛實(shí)對(duì)比，用戶能夠清晰地感受到元素在空間上的高度差異，不僅保障了信息的可讀性，而且讓可交互元素更具點(diǎn)擊感。
微妙：
由于磨砂玻璃的物理特性，頁面背景在經(jīng)過“玻璃層”的模糊處理后會(huì)變得十分柔和，類似上文所述的“彌散漸變”，呈現(xiàn)出一種明度均勻，沒有視覺焦點(diǎn)的狀態(tài)，無論是動(dòng)態(tài)還是靜態(tài)都能很好的保障前景文字、UI控件等元素的可識(shí)別性。并且在玻璃擬態(tài)風(fēng)格中，常常使用輕薄微妙的邊框來強(qiáng)化物理質(zhì)感，這種既作為描邊，又作為“玻璃”的厚度的處理方式，讓卡片能夠以一個(gè)恰到好處的對(duì)比度呈現(xiàn)在界面中。
綜上所述，玻璃擬態(tài)風(fēng)格在擬物程度上找到了一個(gè)很好的平衡點(diǎn)，既為枯燥的B端設(shè)計(jì)提供了真實(shí)感和趣味性，又保障了復(fù)雜信息情況下的識(shí)別度。并且由于玻璃光滑、透明等物理特性，也為“科技感”的視覺呈現(xiàn)提供了新的方向。
柔和光影+微質(zhì)感材質(zhì)
與C端設(shè)計(jì)中常用強(qiáng)烈的光影效果吸引用戶不同，b端設(shè)計(jì)相對(duì)更加沉穩(wěn)。對(duì)比阿里云、WPS、釘釘、騰訊云的官網(wǎng)首頁，都不約而同地使用了非常柔和的環(huán)境光，這種光影設(shè)計(jì)，在保障整體亮度的基礎(chǔ)上，不會(huì)產(chǎn)生明確的光照方向和陰影效果，并且在材質(zhì)選擇上，也都使用了高光、反光均不明顯的漫反射材質(zhì)或微質(zhì)感的毛玻璃材質(zhì)，整體視覺感受十分沉靜和整潔。
圖形在設(shè)計(jì)中扮演著兩部分角色，一方面圖形作為頁面的裝飾需要保證審美的愉悅性，另一方面圖形也作為文字信息的補(bǔ)充，需要傳達(dá)某些特定的含義。好的圖形設(shè)計(jì)不僅能為整個(gè)頁面的氛圍添光加彩，而且能幫助用戶更好的理解文字信息。
規(guī)律感的幾何圖形
在b端場景下，常常需要借助圖形表達(dá)一些抽象的概念，例如PaaS、服務(wù)器、AI、用量、科技、流量……這類含義并不直接對(duì)應(yīng)一個(gè)特定的造型，使用有規(guī)律的幾何圖形，似乎是一個(gè)不錯(cuò)的選擇。這些技術(shù)概念的背后來自于二進(jìn)制中0和1的組合，而將幾何元素有機(jī)地排列，甚至衍生出不同的形態(tài)的過程，不是正如代碼的編寫嗎？
簡潔高效的手繪元素
在當(dāng)下的B端設(shè)計(jì)領(lǐng)域，越來越重視情感關(guān)懷和個(gè)人用戶的體驗(yàn)。在頁面中使用具有手繪感的元素或使用直接使用手繪圖案作為配圖，不僅能夠快速拉近品牌和用戶之間的距離，塑造年輕化、有親和力的品牌形象，也能提升用戶在使用產(chǎn)品工作時(shí)的愉悅感。這類充滿輕松感的圖形比起傳統(tǒng)的插畫或3d建模更加簡潔，色彩鮮明，具有很強(qiáng)的表現(xiàn)力，并且設(shè)計(jì)成本也更低，十分適合作為一些小而美的產(chǎn)品配圖。
例如Google推出的Material design的設(shè)計(jì)語言就大量使用了抽象且配色艷麗的手繪元素作為配圖，這類圖案更加強(qiáng)調(diào)色彩并不過多細(xì)化造型，穿插在文字之間，讓深色背景的頁面一下活躍了起來。與此類似的還有figma的官網(wǎng)，設(shè)計(jì)師將軟件內(nèi)的部分工具比如線條、線框、錨點(diǎn)、指針等元素抽象出來作為插圖，不僅簡潔耐看，而且十分具有自身的品牌特色。
除此之外，利用手繪線條來表現(xiàn)hover的交互狀態(tài)，圈畫重要的文字信息，或是進(jìn)行操作引導(dǎo)，也具有極高的效率。簡單的箭頭或者波浪線，能夠非常直接地將用戶的注意力指引到重要信息處，就像學(xué)生時(shí)期在書本上圈畫重點(diǎn)一樣，感受上十分自然而親切。仿佛應(yīng)用的設(shè)計(jì)者悄悄在用戶耳邊說了一句小tips，而不是粗暴地把信息丟到用戶眼前。
無論是擬物風(fēng)格時(shí)期的極致寫實(shí)，還是扁平化風(fēng)格時(shí)期的極簡，又或是AI時(shí)代的多彩絢麗，設(shè)計(jì)風(fēng)格的發(fā)展始終圍繞著技術(shù)發(fā)展的主線，其發(fā)展的目標(biāo)，始終圍繞著如何讓當(dāng)前時(shí)代的用戶更好更便捷地享受到技術(shù)應(yīng)用帶來的便利。一個(gè)好的b端設(shè)計(jì)風(fēng)格，不僅能夠幫助企業(yè)展現(xiàn)品牌心智和技術(shù)上的先進(jìn)性；而且能夠讓個(gè)人用戶更高效且愉悅地完成工作任務(wù)。在未來的B端產(chǎn)品設(shè)計(jì)中，我們應(yīng)該始終堅(jiān)持形式服務(wù)于功能和以人為本的原則，探索更適合業(yè)務(wù)場景的設(shè)計(jì)風(fēng)格，為用戶帶來更加舒適自然的視覺體驗(yàn)。
以上是本期帶來的B端設(shè)計(jì)趨勢之個(gè)風(fēng)格篇。
本文由人人都是產(chǎn)品經(jīng)理作者【釘釘用戶體驗(yàn)】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于 CC0 協(xié)議。
蘭亭妙微(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
多數(shù)產(chǎn)品經(jīng)理總是認(rèn)為很專業(yè)，總會(huì)有一些異想天開的想法；殊不知我們不少自以為是的“優(yōu)秀”設(shè)計(jì)，并不符合用戶使用場景，還可能摧毀用戶價(jià)值。就像本文列舉的這幾個(gè)案例，你有注意到嗎？
產(chǎn)品經(jīng)理的專業(yè)視角與用戶視角，如同孿生兄弟，外表相似但內(nèi)在迥異。
有時(shí)我們說誰的產(chǎn)品專業(yè)能力過硬，可能是一句褒獎(jiǎng)的話。但專業(yè)能力若不能融合專家視角與用戶視角，便可能被視為局限而非優(yōu)點(diǎn)。
張小龍說自己可以很快變小白，而馬化騰卻可以“一秒變小白”。
所謂“一秒變小白”是指快速從專業(yè)視角切換到用戶視角，確保在設(shè)計(jì)產(chǎn)品和評(píng)估用戶價(jià)值時(shí)，避免陷入專家思維，無意中損害用戶價(jià)值。
兩年前，我?guī)е鴰讉€(gè)“朋友”坐飛機(jī)回云南老家，到達(dá)長水機(jī)場后，準(zhǔn)備去上廁所。其中一位女性朋友，徑直走進(jìn)男廁所，直至上完廁所出來后，我們提醒她才“恍然大悟”——進(jìn)錯(cuò)了廁所。
究其原因就在于一個(gè)“設(shè)計(jì)”：女廁所圖標(biāo)設(shè)計(jì)不明確，導(dǎo)致誤解。
目前在機(jī)場、商場（尤其是高級(jí)商場）、寫字樓等場所，設(shè)計(jì)者都采取一種精簡設(shè)計(jì)方案，他們追求簡潔的設(shè)計(jì)感。即只有一個(gè)非常簡潔的圖標(biāo)，有的是男和女的人物圖標(biāo)，有的是煙斗和高跟鞋等。總之，不會(huì)有任何一個(gè)漢字（或英文）描述。
好像一旦圖標(biāo)旁寫上“男廁”、“女廁”后，它們就變成了一種“土”、“low”的設(shè)計(jì)方案。
同一個(gè)空間內(nèi)，不僅僅是廁所圖標(biāo)，還有扶梯、直梯、貨梯、嬰幼兒室、母嬰室等各類圖標(biāo)，甚至有時(shí)它們會(huì)同時(shí)出現(xiàn)在一個(gè)引導(dǎo)牌，讓你真正玩一把“猜猜猜”的圖像游戲。
結(jié)果是：你無法快速找到圖標(biāo)；找到后，你需要仔細(xì)辨認(rèn)以及“揣摩”圖標(biāo)的含義，避免走錯(cuò)；直至你走錯(cuò)后，才能“吃一塹，長一智”。
同時(shí)，某些商場或?qū)懽謽堑南词峙_(tái)，為了追求設(shè)計(jì)感以及合理利用空間，把洗手液跟紙抽“融入”到鏡面里，表面看確實(shí)簡潔，是一種優(yōu)秀設(shè)計(jì)方案。
但當(dāng)你伸手接洗手液洗手時(shí)，卻無法精準(zhǔn)對(duì)接，需要反復(fù)嘗試2-3次。沒接到的洗手液，自然流就流落到洗手臺(tái)之上。
結(jié)果是：用戶體驗(yàn)差，浪費(fèi)洗手液，增加清潔成本。
保潔阿姨發(fā)現(xiàn)這個(gè)問題后，最后的解決方案就是：在洗手臺(tái)旁邊，直接放了一個(gè)自助式的洗手液。至此，那個(gè)“優(yōu)秀”的設(shè)計(jì)方案，從此成為了擺設(shè)。
你自以為的優(yōu)秀設(shè)計(jì)，往往卻摧毀了用戶的價(jià)值。它肯定不是你的初心，而是你的專業(yè)視角所致，卻忽略了用戶視角（尤其是小白用戶視角）。
如下圖所示，用戶對(duì)發(fā)放工資條時(shí)，選擇方案的設(shè)計(jì)進(jìn)行了“吐槽”。一般默認(rèn)勾選時(shí)，顯示一個(gè)多選框，勾選即選中，反之不選，而設(shè)計(jì)升級(jí)后，期望讓選中效果更明顯，去掉勾選框，點(diǎn)擊列表選中，再次點(diǎn)擊取消。
結(jié)果是：用戶不知道如何勾選，“優(yōu)秀”設(shè)計(jì)摧毀了用戶體驗(yàn)。
我們?cè)倏匆粋€(gè)例子。
如下圖所示，它們都是新建班次的設(shè)置頁面，核心是約定員工的上下班時(shí)間跟打卡范圍，但它們代表兩種不同的設(shè)計(jì)風(fēng)格。
方案1采用平鋪直敘的用戶語言風(fēng)格，以對(duì)話感設(shè)計(jì)頁面元素，旨在增強(qiáng)用戶互動(dòng)體驗(yàn)，但可能導(dǎo)致信息顯示冗余。比如最早可提前x分鐘打卡，晚于x分鐘打卡記為遲到；
方案2采用簡潔設(shè)計(jì)，避免冗余文字，以簡潔頁面提升視覺效果，但可能增加用戶理解和使用難度（就像廁所圖標(biāo)的設(shè)計(jì)一樣）。比如上班卡當(dāng)天5:00-當(dāng)天12:00，用戶自行設(shè)置取卡范圍。
第一，認(rèn)知層面。產(chǎn)品經(jīng)理的專業(yè)能力體現(xiàn)在創(chuàng)造用戶價(jià)值和商業(yè)價(jià)值，而非局限于單一專業(yè)領(lǐng)域。這種能力需同時(shí)滿足專業(yè)人士和小白用戶的需求，否則不能稱之為真正的專業(yè)能力。
第二，設(shè)計(jì)語言。采用用戶語言/自然語言作為設(shè)計(jì)語言，而不是設(shè)計(jì)師或產(chǎn)品經(jīng)理的“專業(yè)”語言。比如晚于30分鐘打卡記為遲到，就好于“豁免30分鐘”；最早可提前120分鐘打卡，最晚可延后120分鐘打卡，就好于“上班卡范圍：當(dāng)天6:00-10:00”。
第三，設(shè)計(jì)“潛規(guī)則”。遵循行業(yè)“潛規(guī)則”設(shè)計(jì)，避免過度自我創(chuàng)造（或創(chuàng)新），導(dǎo)致傷害了用戶價(jià)值。比如單選、多選、開關(guān)等設(shè)計(jì)要素，遵循成熟的設(shè)計(jì)方式，而不是非要“獨(dú)樹一幟”。
我們?cè)谏虉?、機(jī)場等，比較常見的解決方案是：提供一個(gè)間親子衛(wèi)生間。
哈爾濱江北商場提供了一種創(chuàng)新的解決方案。即：在正常男女廁所旁邊，新建了一個(gè)開放式的兒童廁所，配備了男孩和女孩專用的小便池及兒童洗手臺(tái)。
既解決了家長帶異性子女上廁所的難題，也方便了兒童獨(dú)立使用，體現(xiàn)了對(duì)兒童和家長需求的細(xì)致考慮，這是真正用戶視角下的產(chǎn)品設(shè)計(jì)。
專欄作家
邢小作，微信公眾號(hào)：產(chǎn)品方法論集散地，人人都是產(chǎn)品經(jīng)理專欄作家。一枚在線教育的產(chǎn)品，關(guān)注互聯(lián)網(wǎng)教育，喜歡研究用戶心理。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(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
在當(dāng)今數(shù)字化時(shí)代，交互設(shè)計(jì)不僅是產(chǎn)品成功的關(guān)鍵因素之一，更是連接用戶與產(chǎn)品之間的橋梁。交互設(shè)計(jì)的原則和方法雖然眾多，但本文將聚焦于產(chǎn)品交互設(shè)計(jì)的內(nèi)在邏輯和基本原理，探討什么樣的設(shè)計(jì)才是優(yōu)秀的，如何衡量其效果。
首先，我們需要明確“產(chǎn)品交互設(shè)計(jì)”的定義。產(chǎn)品交互設(shè)計(jì)是為了達(dá)成特定產(chǎn)品目標(biāo)而進(jìn)行的用戶與產(chǎn)品之間的交互流程設(shè)計(jì)和反饋設(shè)計(jì)。換句話說，它不僅關(guān)注用戶如何使用產(chǎn)品，還關(guān)注產(chǎn)品如何有效地反饋給用戶。值得注意的是，產(chǎn)品交互設(shè)計(jì)是圍繞產(chǎn)品目標(biāo)展開的，而非單純圍繞用戶展開，用戶在這一過程中只是間接的服務(wù)對(duì)象。
這種思維方式可能與許多人的初始認(rèn)知有所不同。以宜家家居為例，作為一家大型購物中心，宜家并不希望用戶能迅速找到想要的產(chǎn)品，而是希望用戶能在其店內(nèi)多做體驗(yàn)。盡管這種迂回而漫長的購物路徑可能讓人感到煩惱，但用戶卻很少對(duì)此抱怨。這正是成功的產(chǎn)品交互設(shè)計(jì)的體現(xiàn)：雖然交互流程可能令人困擾，但良好的交互反饋（如各類家具的試用體驗(yàn)）卻能讓用戶感到滿意。
產(chǎn)品交互設(shè)計(jì)的核心在于用戶體驗(yàn)流程的設(shè)計(jì)。這一理念強(qiáng)調(diào)，交互設(shè)計(jì)并非簡單的按鈕、彈窗或功能的堆砌，而是為了實(shí)現(xiàn)產(chǎn)品目標(biāo)而有意設(shè)計(jì)的用戶與產(chǎn)品的互動(dòng)流程。在這個(gè)過程中，每一個(gè)交互環(huán)節(jié)都旨在滿足用戶需求，同時(shí)實(shí)現(xiàn)產(chǎn)品的獲益目標(biāo)。這種獲益不一定是金錢上的，可能還包括用戶的關(guān)注度和忠誠度。
尼爾森可用性原則專業(yè)描述：
尼爾森可用性原則由人機(jī)交互學(xué)博士Jakob Nielsen提出，包括狀態(tài)可見性原則、貼近用戶真實(shí)環(huán)境原則、自由控制原則、一致性和標(biāo)準(zhǔn)化原則、防錯(cuò)原則等。這些原則提供了一套評(píng)估用戶體驗(yàn)好壞的標(biāo)準(zhǔn)，幫助設(shè)計(jì)師和產(chǎn)品經(jīng)理進(jìn)行自查和優(yōu)化
理論支撐：
用戶體驗(yàn)地圖是一種以用戶為中心的可視化工具，用于描述和展示用戶在使用產(chǎn)品、服務(wù)或系統(tǒng)的過程中的整體體驗(yàn)和情感變化。它通過講故事的方式，描述用戶參與服務(wù)過程中的體驗(yàn)變化，并通過可視化的方式將信息予以呈現(xiàn)。用戶體驗(yàn)地圖關(guān)注用戶的行為接觸點(diǎn)、情緒曲線、痛點(diǎn)和機(jī)會(huì)點(diǎn)，幫助團(tuán)隊(duì)更好地理解用戶需求，從而優(yōu)化產(chǎn)品設(shè)計(jì)
案例分析：
Netflix：Netflix通過用戶體驗(yàn)地圖分析用戶觀看習(xí)慣，發(fā)現(xiàn)用戶在選擇觀看內(nèi)容時(shí)往往會(huì)感到選擇困難。為此，Netflix優(yōu)化了推薦算法，提供個(gè)性化的內(nèi)容推薦，顯著提升了用戶的觀看體驗(yàn)和滿意度。
交互設(shè)計(jì)的成功在于與用戶的有效溝通。正如俞軍所說，“產(chǎn)品經(jīng)理就是以產(chǎn)品當(dāng)筆，與世界對(duì)話”。在設(shè)計(jì)過程中，理解用戶的需求和情感是至關(guān)重要的。
理解用戶的方法：
KANO模型：由東京理工大學(xué)教授狩野紀(jì)昭（Noriaki Kano）發(fā)明，是一種對(duì)用戶需求進(jìn)行分類和優(yōu)先排序的方法論。它將用戶需求分為基本型需求、期望型需求和興奮型需求，幫助企業(yè)識(shí)別不同層次的用戶需求，從而優(yōu)化產(chǎn)品功能。
馬斯洛需求層次理論專業(yè)描述： 馬斯洛需求層次理論由心理學(xué)家亞伯拉罕·馬斯洛提出，將人類的需求劃分為五個(gè)主要層次，從最基本的生理需求到最高層次的自我實(shí)現(xiàn)需求逐級(jí)遞增。理解這些層次的需求有助于揭示人們行為的驅(qū)動(dòng)力及其生活的主要?jiǎng)訖C(jī)。
案例分析：
Dropbox：在早期，Dropbox通過用戶訪談和數(shù)據(jù)分析了解用戶對(duì)文件共享的需求，發(fā)現(xiàn)用戶希望能夠輕松分享文件而不必?fù)?dān)心復(fù)雜的設(shè)置?；谶@些反饋，Dropbox簡化了分享流程，使得用戶可以一鍵分享文件，極大提升了用戶體驗(yàn)。
設(shè)計(jì)的最終目標(biāo)是讓用戶理解我們的意圖。如果用戶無法理解設(shè)計(jì)表達(dá)，那么所有的努力都將付諸東流。為了實(shí)現(xiàn)這一目標(biāo)，我們需要遵循以下原則：
1. 按照用戶的思維習(xí)慣設(shè)計(jì)：設(shè)計(jì)應(yīng)符合用戶的思維邏輯。例如，用戶在使用某些功能時(shí)，往往會(huì)根據(jù)自己的經(jīng)驗(yàn)進(jìn)行操作，設(shè)計(jì)應(yīng)當(dāng)順應(yīng)這種習(xí)慣。
2. 使用用戶的習(xí)慣性語言：設(shè)計(jì)中使用用戶熟悉的術(shù)語和表達(dá)方式，以降低理解成本。例如，針對(duì)不同文化背景的用戶，設(shè)計(jì)語言和符號(hào)應(yīng)有所不同。
3. **提供足夠的提示**：在設(shè)計(jì)中加入必要的提示和指導(dǎo)，幫助用戶理解如何使用產(chǎn)品。例如，在注冊(cè)界面中，確保用戶能夠清晰地看到同意《用戶協(xié)議》的選項(xiàng)。
案例分析：
Slack：Slack在設(shè)計(jì)其用戶界面時(shí)，充分考慮了用戶的習(xí)慣性語言和操作邏輯，使用了直觀的圖標(biāo)和清晰的提示，幫助用戶快速上手。用戶在使用Slack時(shí)，能夠輕松找到所需功能，極大提升了用戶的滿意度。
簡潔性是交互設(shè)計(jì)的重要原則，但這并不意味著界面內(nèi)容越少越好，而是要讓用戶在使用過程中感到輕松和自然。簡潔的設(shè)計(jì)應(yīng)當(dāng)幫助用戶快速實(shí)現(xiàn)目標(biāo)，而不是讓他們感到困惑。
實(shí)現(xiàn)簡潔性的策略：
理論支撐：
諾曼的交互設(shè)計(jì)基本原則：諾曼提出的示能、意符、映射、反饋和概念模型等原則，為設(shè)計(jì)師提供了清晰的指導(dǎo)，幫助他們創(chuàng)造出用戶友好的設(shè)計(jì)。
案例分析：
蘋果公司：蘋果在其產(chǎn)品設(shè)計(jì)中始終堅(jiān)持簡潔性原則，通過直觀的界面和簡單的操作流程，使用戶能夠輕松上手。無論是iPhone的操作系統(tǒng)，還是Mac的桌面環(huán)境，用戶都能快速找到所需功能，享受流暢的使用體驗(yàn)。
用戶體驗(yàn)的“峰-終”值原理表明，用戶的整體滿意度并不取決于每個(gè)環(huán)節(jié)的完美，而是關(guān)鍵時(shí)刻的滿意度。因此，設(shè)計(jì)師應(yīng)關(guān)注用戶在使用過程中的高峰體驗(yàn)和結(jié)束體驗(yàn)。
實(shí)現(xiàn)用戶滿意度的策略：
案例分析：
Zappos：Zappos以其卓越的客戶服務(wù)而聞名，尤其是在處理退貨和客戶投訴時(shí)。他們確保用戶在購買后無論遇到什么問題，都能得到及時(shí)和滿意的解決，從而提升了用戶的整體滿意度。
綜上所述，產(chǎn)品交互設(shè)計(jì)的基本原則在于將設(shè)計(jì)視為一個(gè)整體流程，深入理解用戶，確保設(shè)計(jì)能夠被用戶理解，并讓用戶感到簡單和愉悅。最終，設(shè)計(jì)的成功與否應(yīng)通過是否幫助實(shí)現(xiàn)產(chǎn)品目標(biāo)來衡量。通過不斷迭代和優(yōu)化，我們可以創(chuàng)造出既滿足用戶需求又推動(dòng)產(chǎn)品發(fā)展的優(yōu)秀交互設(shè)計(jì)。設(shè)計(jì)師在這一過程中，應(yīng)始終保持對(duì)用戶的敏感度，關(guān)注用戶的反饋，以確保設(shè)計(jì)始終圍繞用戶的真實(shí)需求展開。
作者：海鮮不設(shè)計(jì)，微信公眾號(hào)：海鮮不設(shè)計(jì)
本文由 @海鮮不設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(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
在B端產(chǎn)品設(shè)計(jì)中，退訂是用戶對(duì)產(chǎn)品不滿的直接表現(xiàn)，也是我們優(yōu)化產(chǎn)品的重要信號(hào)。作為UI設(shè)計(jì)師，如何通過交互設(shè)計(jì)降低退訂率，提升用戶留存，是一個(gè)值得深入探討的話題。本文將結(jié)合 DeepSeek（深度探索） 的設(shè)計(jì)理念，從用戶心理和交互設(shè)計(jì)的角度，分享B端產(chǎn)品退訂心理學(xué)的設(shè)計(jì)策略與實(shí)踐。
強(qiáng)調(diào)通過深度探索用戶行為和心理，找到問題的本質(zhì)。在退訂場景中，用戶的行為背后往往隱藏著以下心理動(dòng)因：
1）設(shè)計(jì)目標(biāo)：通過數(shù)據(jù)分析，找到用戶退訂的高頻節(jié)點(diǎn)，優(yōu)化交互路徑。
2）設(shè)計(jì)策略：
1）設(shè)計(jì)目標(biāo)：通過設(shè)計(jì)手段，讓用戶直觀感受到產(chǎn)品的價(jià)值。
2）設(shè)計(jì)策略：
1）設(shè)計(jì)目標(biāo)：降低用戶的操作成本，減少因體驗(yàn)不佳導(dǎo)致的退訂。
2）設(shè)計(jì)策略：
1）設(shè)計(jì)目標(biāo)：通過設(shè)計(jì)讓用戶感受到被重視，增強(qiáng)對(duì)產(chǎn)品的情感依賴。
2）設(shè)計(jì)策略：
以某B端 SaaS 產(chǎn)品為例，通過 DeepSeek+交互設(shè)計(jì)策略，退訂率降低了20%。
具體優(yōu)化包括：
退訂是用戶對(duì)產(chǎn)品的“最后反饋”，也是我們優(yōu)化產(chǎn)品的重要機(jī)會(huì)。通過 DeepSeek+交互設(shè)計(jì)，我們可以深度探索用戶心理，優(yōu)化交互路徑，強(qiáng)化價(jià)值感知，簡化操作流程，并建立情感連接，從而有效降低退訂率。希望本文的設(shè)計(jì)策略與實(shí)踐能為B端產(chǎn)品的優(yōu)化提供啟發(fā)，讓我們的產(chǎn)品更好地服務(wù)于用戶，提升用戶留存與滿意度。
本文由 @劉萍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
蘭亭妙微(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
在當(dāng)今設(shè)計(jì)行業(yè)，設(shè)計(jì)師不僅需要具備專業(yè)技能，更要與業(yè)務(wù)目標(biāo)緊密結(jié)合，以提升設(shè)計(jì)的實(shí)際效用。本文探討了如何通過設(shè)計(jì)洞見來識(shí)別客戶需求，進(jìn)而優(yōu)化設(shè)計(jì)過程。
好的設(shè)計(jì)師不僅僅要有專業(yè)能力，更重要的是與產(chǎn)品達(dá)到同頻，最終更好賦能業(yè)務(wù)指標(biāo)達(dá)成。
目前設(shè)計(jì)行業(yè)的現(xiàn)狀，大部分設(shè)計(jì)師還停留在設(shè)計(jì)思維的角度，存在一些和業(yè)務(wù)格格不入的情況，只關(guān)注好不好看，做一個(gè)交互原型的美化者…
自己做了很多，但是與實(shí)際脫節(jié)。出了很多個(gè)方案，產(chǎn)品（或運(yùn)營/商務(wù)伙伴）覺得沒什么變化；打磨了很多細(xì)節(jié)和創(chuàng)新點(diǎn)，產(chǎn)品卻只想快速上線……
設(shè)計(jì)師自己的工作被各種“非專業(yè)”的指導(dǎo)意見干擾；而其他職崗伙伴眼里，我們的付出，卻變成了一種“設(shè)計(jì)師的自High”。
究其原因，還是把以用戶思維去進(jìn)行設(shè)計(jì)。
想要改變這樣的狀態(tài)，最核心的是思維轉(zhuǎn)變，從技能導(dǎo)向的思考方式變?yōu)閮r(jià)值導(dǎo)向的思考方式。
本文主要從講述，如何通過方法，在項(xiàng)目進(jìn)入期獲得有效設(shè)計(jì)洞見，提高設(shè)計(jì)效用，帶來客戶價(jià)值（用戶價(jià)值）。
先舉一個(gè)例子：如何做一個(gè)新款剃須刀產(chǎn)品？
飛利浦這些大公司，給出的答案是 更好的刀頭，更貼合面部，更安全和更容易清洗，一個(gè)黑灰塑料材質(zhì)、工業(yè)風(fēng)格的“更好用”的剃須刀確實(shí)誕生了。
但是有一個(gè)很有意思的公司，給出了另一份答案：極簡造型、合金材質(zhì)、超 mini 尺寸和豐富配色，最重要的是：
于是 2019 年，這個(gè)疫情開始的時(shí)間，這家剃須刀橫空出世。
這款產(chǎn)品獲得成功的原因，本質(zhì)上就是產(chǎn)品的設(shè)計(jì)者帶著更高、更廣的視角，洞見了“剃須刀不僅是一個(gè)工具，它更可以成為一種禮物”這個(gè)更深層次的客戶需求，打破現(xiàn)有市場概念，獲得成功。
——如果說，設(shè)計(jì)洞察是發(fā)現(xiàn)和理解問題的能力，是設(shè)計(jì)師在研究和解決問題時(shí)所產(chǎn)生的觀察力和創(chuàng)造力。那么設(shè)計(jì)洞見可以幫助設(shè)計(jì)師更好地識(shí)別問題、提出創(chuàng)新解決方案，并為設(shè)計(jì)師提供思考問題和做出決策的指導(dǎo)。
Brown.Tim在《設(shè)計(jì)思考改造世界》中說：”未來的設(shè)計(jì)師將扮演科技的詮釋者（洞見能力）,人性的引領(lǐng)者（觀察能力）,感性的創(chuàng)造者與品位的營造者（同理心）的角色”。
通過設(shè)計(jì)洞見，可以讓我們看更高、想更全， 與業(yè)務(wù)貼合更緊密，讓設(shè)計(jì)得到認(rèn)可，產(chǎn)生業(yè)務(wù)共鳴，賦予用戶/客戶價(jià)值，才能讓設(shè)計(jì)變的更有價(jià)值。
接下來我們將通過一一探索獲得洞見的三個(gè)階段。
洞察階段的核心，是獲得現(xiàn)象背后的動(dòng)因。是一個(gè)獲得信息與問題的階段
產(chǎn)品的設(shè)計(jì)產(chǎn)出是一個(gè)抽象到具象化的過程，在設(shè)計(jì)和迭代的過程中，會(huì)經(jīng)歷非常多的流程。而大多數(shù)的設(shè)計(jì)洞見有效過去在更前置的節(jié)點(diǎn)，才能產(chǎn)生更有效的價(jià)值。
所以我們首先做的是：“提升設(shè)計(jì)的主動(dòng)性”，在項(xiàng)目的進(jìn)入期最大化實(shí)現(xiàn)設(shè)計(jì)洞見的價(jià)值。
項(xiàng)目進(jìn)入期通常會(huì)有一個(gè)通病，即問題泛化，無法具象。在一個(gè)比較“泛”的問題下，挖掘目的/目標(biāo)，找到問題最簡單的辦法就是“調(diào)查分析”：了解行業(yè)生態(tài)與業(yè)務(wù)背景，確定或推測自身產(chǎn)品的發(fā)展方向，分析定位與關(guān)注指向-Pointer（即當(dāng)下會(huì)產(chǎn)生哪些具有指向性的任務(wù)方向）。
這個(gè)階段，我們的主要目的是通過最初始的源頭數(shù)據(jù)，正確的了解業(yè)務(wù)或者項(xiàng)目的背景，避免因信息傳遞所產(chǎn)生的認(rèn)知誤差，以免發(fā)生“指向”偏差。而要做到這一點(diǎn)，洞察就不能僅僅停留在表面的觀察，詢問，記錄和數(shù)據(jù)分析，而要隨時(shí)通過聯(lián)想和反思來回歸本質(zhì)——客戶（用戶）和場景。調(diào)查中獲得的數(shù)據(jù)只有放在合適的情境中才能獲得準(zhǔn)確的解讀。
1）知識(shí)準(zhǔn)備
了解各種市場調(diào)研的方法與過程，對(duì)調(diào)研方法進(jìn)行分類。
如下圖所示，（戴力農(nóng)《設(shè)計(jì)調(diào)研》）橫軸區(qū)分了該方法得到的數(shù)據(jù)是客觀的（人們的行為）還是主觀的（人們的目標(biāo)和觀點(diǎn)），縱軸區(qū)分了該方法的類型是定性的還是定量的。
2）選擇正確的調(diào)研辦法
不同的產(chǎn)品生命周期，對(duì)應(yīng)不同的調(diào)研方法，根據(jù)產(chǎn)品的不同時(shí)期選擇合適屬性的調(diào)研辦法。
互聯(lián)網(wǎng)設(shè)計(jì)師的常規(guī)調(diào)研手法，受困于資源，多是在桌面進(jìn)行。我們通過二手資料研究、競品和線上走查獲得問題，進(jìn)行虛擬對(duì)象的研究，極易發(fā)生偏差。
拓新場景和成長初期，通常資源緊張且缺乏具象客戶，很難進(jìn)行大樣本調(diào)研數(shù)據(jù)挖掘。對(duì)于設(shè)計(jì)師來說，在了解業(yè)務(wù)信息，對(duì)稱業(yè)務(wù)方向時(shí)可以依賴其他職崗提供的資料進(jìn)行研究；但是對(duì)于設(shè)計(jì)息息相關(guān)的關(guān)鍵點(diǎn)，建議還是通過自己實(shí)地考察、焦點(diǎn)實(shí)驗(yàn)去獲取真實(shí)的體驗(yàn)信息。
成長后期與成熟期，關(guān)鍵在于保證和提高產(chǎn)品質(zhì)量，縮短與頭部產(chǎn)品之間的差距，實(shí)現(xiàn)產(chǎn)品的高增長 。大樣本的用戶與競品調(diào)研可以幫助我們更可觀的看到真實(shí)的客戶需求。再輸入到我們的日常桌面研究中去。
3）掌握信息收集、數(shù)據(jù)統(tǒng)計(jì)分析方面的知識(shí)
4）了解調(diào)研的流程
確定調(diào)研目標(biāo) → 制定調(diào)研計(jì)劃 → 準(zhǔn)備調(diào)研材料&環(huán)境 → 邀請(qǐng)調(diào)研對(duì)象&執(zhí)行調(diào)研過程 → 分析整理信息與數(shù)據(jù) → 輸出調(diào)研結(jié)果。
調(diào)研的實(shí)際操作流程在數(shù)據(jù)采集和調(diào)研分析方法中已經(jīng)涉及的比較多了，也有很多好的執(zhí)行案例可供我們學(xué)習(xí)與參考。
得到大量信息，進(jìn)行吸收、理解和處理后，我們將收獲大量的問題。接下來就是如何解決問題。
定位價(jià)值是洞見的關(guān)鍵階段，是能給業(yè)務(wù)帶來價(jià)值的核心，是可以改變客戶（用戶）習(xí)慣和行為的關(guān)鍵博弈。
那么如何定位價(jià)值呢？
1）問題整合，提煉與確認(rèn)指向
將調(diào)研獲得的問題進(jìn)行歸納與整理，如簡單的 Card Sorting ，確認(rèn)所有問題的核心指向（Pointer）。
接下來就需要不停的切換指向，并深入每個(gè)關(guān)鍵 key 下進(jìn)一步拆解，確定你收獲的是否是一個(gè)真正且重要的 Pointer。
EG海底撈▽
餐廳高峰期經(jīng)常人滿為患，排隊(duì)體驗(yàn)差。常規(guī)餐廳的做法：約束更快的出餐、收臺(tái)，拆分更多的餐位，引導(dǎo)拼桌服務(wù)等等等等..短期可能會(huì)帶來改變，但是達(dá)到一個(gè)極限點(diǎn)以后，就很難再提升了。
類似的場景還有曾經(jīng)的外賣小哥：30 分鐘以內(nèi)還能更快嗎？答案是：很難。
那怎么讓客人愿意多等待一點(diǎn)，或者不覺得“等待完全是無價(jià)值無意義的”？
海底撈選擇在你排隊(duì)等待的時(shí)候，提供免費(fèi)美甲、護(hù)手、零食等等各種周到服務(wù)，讓客人等待的過程中不至于無事可做。獲得了認(rèn)可，贏得了口碑。
如果你留心觀察，你會(huì)發(fā)現(xiàn)海底撈的標(biāo)志也是用了一個(gè)打招呼的氣泡Hi，來強(qiáng)調(diào)服務(wù)為先的品牌定位，解決的是情感需求中的「過程體驗(yàn)」。
2）PDS（問題-檢測-研究）調(diào)查分析
PSD 調(diào)查分析的核心思想，是調(diào)查客戶（用戶）與預(yù)期（行為/認(rèn)知）的偏差，或不滿與問題來發(fā)現(xiàn)洞見。
EG BBDO反煙推廣 ▽
BBDO 的英國公司層接到過這樣一個(gè)推廣任務(wù)：是讓年輕人，特別是十幾歲的小女孩兒戒煙。
其實(shí)這個(gè)問題特別棘手。一方面，吸煙是一個(gè)生理上癮的事情，要戒掉很困難；另一方面，吸煙最大的問題是有害健康，但是對(duì)于年輕人來說在這個(gè)角度的感觸不深，很難起到效果。用常態(tài)的思考模式似乎很難找到正確的解決方案，但是借助洞見以后就不一樣了。
通過了解更多事實(shí)，看目標(biāo)群體關(guān)注什么，哪些問題對(duì)我們要實(shí)現(xiàn)的目標(biāo)有影響。在這個(gè)案例里，BBDO的做法是派了一個(gè)年輕的女助理在購物區(qū)找了一家咖啡館，連著5天坐在那里聽那里的女孩兒在聊些什么。
結(jié)果這5天內(nèi)她就發(fā)現(xiàn)，這些十幾歲的女生大部分聊的是買衣服、做頭發(fā)、選什么樣的指甲油和減肥藥，怎么整容等等。當(dāng)女助理把這些內(nèi)容列在自己的本子上的時(shí)候，洞見就自己呼之欲出了：原來對(duì)于這些無所事事，十幾歲的年輕女孩而言，沒有什么比她們看起來漂亮更重要了。
因此，你不需要告訴她吸煙可能縮短壽命，你只要告訴她一件事情：“吸煙會(huì)讓你變得難看”，就足夠讓她戒煙了。
所以，想要獲得洞見，就去調(diào)研目標(biāo)群體真正關(guān)注的事情。當(dāng)你通過調(diào)研發(fā)現(xiàn)真正的問題時(shí)，洞見往往就會(huì)產(chǎn)生。
3）規(guī)避技能導(dǎo)向
設(shè)計(jì)的職崗角色是單薄的。我們一定要帶著指針與方案，多職崗評(píng)估價(jià)值與可執(zhí)行度，這是一個(gè)設(shè)計(jì)前期任務(wù)的過程。它的輸出可能為設(shè)計(jì)Demo、簡單的筆記、方案的列表，或者是一個(gè)說明效果的故事版……不一定具備完整的落地性，但是可以讓伙伴更好的理解你的觀點(diǎn)。
設(shè)計(jì)的解決方案要從起心動(dòng)念、貫穿至產(chǎn)、研、運(yùn)營甚至上市宣傳的全路徑方案。
在分析階段我們通過“3步走”的視角思維，明確了任務(wù)重點(diǎn)同時(shí)幫助我們明確不同指針的優(yōu)先級(jí)。
設(shè)計(jì)師要考慮的維度不僅僅在用戶體驗(yàn)層面，更應(yīng)在執(zhí)行時(shí)候要考慮業(yè)務(wù)的實(shí)際需求，考慮上下游不同職能的工作內(nèi)容，始終保持全局與系統(tǒng)的思維，要從客戶價(jià)值出發(fā)，回落到企業(yè)成本中去。
通過設(shè)計(jì)洞見，從更本質(zhì)的層面去洞悉問題，重新定義和設(shè)計(jì)任務(wù)。
與業(yè)務(wù)產(chǎn)生共鳴才是好的設(shè)計(jì)。
讓你的設(shè)計(jì)方案保持在更高、更廣、更全局的維度。真正融入和助力業(yè)務(wù)，提升設(shè)計(jì)的效用。讓“提升體驗(yàn)”這件事真正落地。
改變我們看世界的方式，亦改變世界看待我們的方式。
作者：張一
本文由 @群核科技用戶體驗(yàn)設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖由作者提供
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(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
我之前說過要寫一系列專門針對(duì)電商的三大構(gòu)成的文章的，而在上篇文章中我已經(jīng)給大家梳理了一篇關(guān)于色彩的文章：六個(gè)步驟細(xì)說電商banner圖設(shè)計(jì)之色彩的奧秘，那么今天呢，我就接著要給大家講一篇關(guān)于平面構(gòu)成的文章好了。
在講之前，我先給大家列一個(gè)內(nèi)容大綱：
一、平面構(gòu)成的含義是什么？
二、電商Banner圖是由什么組成的？
三、我們?cè)撊绾卧贐anner圖設(shè)計(jì)中運(yùn)用平面構(gòu)成呢？
四、平面構(gòu)成之于電商Banner圖的意義是什么？
五、總結(jié)
注：前半部分是給大家講解的基礎(chǔ)知識(shí)，后半部分是運(yùn)用這些基礎(chǔ)知識(shí)結(jié)合實(shí)例講解，所以建議從頭到位耐心看完哦，需要些時(shí)間消化（經(jīng)濟(jì)基礎(chǔ)決定上層建筑嘛，前面不看后面也就看不懂了），接下來我們一個(gè)個(gè)問題來解剖：
百度百科的解釋是：平面構(gòu)成是視覺元素在二次元的平面上，按照美的視覺效果，力學(xué)的原理，進(jìn)行編排和組合，它是以理性和邏輯推理來創(chuàng)造形象、研究形象與形象之間的排列的方法，是理性與感性相結(jié)合的產(chǎn)物。
而我的理解是：平面構(gòu)成主要是在二維空間運(yùn)用點(diǎn)、線、面結(jié)合一定的規(guī)律所形成的一種視覺語言，他可以是抽象的，也可以是具象的，可以是感性的，也可以是理性的，同時(shí)它也不是獨(dú)立存在的，而是伴隨著色彩／肌理／光影等而存在的?；旧鲜篱g萬物，所有我們接觸到的或無法接觸到的，看得見的或看不見的事物里都有平面構(gòu)成的運(yùn)用和身影。
Banner組成要素包含4個(gè)方面：文案 、商品／模特、背景、點(diǎn)綴物（可有可無）。
而我在之前反復(fù)強(qiáng)調(diào)過的，Banner的作用是：宣傳／展示／廣而告之／準(zhǔn)確傳達(dá)信息。
在前面我們提到，平面構(gòu)成主要是在二維空間運(yùn)用點(diǎn)、線、面結(jié)合一定的規(guī)律所形成的一種視覺語言，而Banner中的所有元素（文案／商品或模特／背景／點(diǎn)綴物）其實(shí)都可以看作是平面構(gòu)成里的點(diǎn)線面這些構(gòu)成元素。
那么，接下來我們就需要了解3個(gè)有關(guān)平面構(gòu)成的概念了：
接下來，我們分別了解下這幾個(gè)概念：
它們之間的排列有下面這么幾種：分離／相切／重疊／透疊／結(jié)合／減缺／差疊／重疊。
舉幾個(gè)例子：
從所有元素（點(diǎn)線面）整體看，其構(gòu)成形式主要有重復(fù)、近似、漸變、變異、對(duì)比、集結(jié)、發(fā)射、特異、空間與矛盾空間、分割、肌理及錯(cuò)視等等。
下面我們分別來舉例說明：
（1）重復(fù)
指在同一設(shè)計(jì)中，相同的形象出現(xiàn)過兩次以上，重復(fù)是設(shè)計(jì)中比較常用的手法，以加強(qiáng)給人的印象，造成有規(guī)律的節(jié)奏感，使畫面統(tǒng)一。所謂相同，在重復(fù)的構(gòu)成中主要是指形狀、顏色、大小等方面的相同。比如：
重復(fù)舉例：電影《滿城盡帶黃金甲》劇照
Banner舉例： 模特重復(fù)排列疊加到背景里，既是一種紋理也是一種模特展示的方式。
（2）近似
近似指的是在形狀、大小、色彩、肌理等方面有著共同特征，它表現(xiàn)了在統(tǒng)一中呈現(xiàn)生動(dòng)變化的效果。近似的程度可大可小，如果近似的程度大就產(chǎn)生了重復(fù)感。近似程度小就會(huì)破壞統(tǒng)一。比如：
近視舉例：臺(tái)灣的一對(duì)雙胞胎姐妹
小時(shí)候
長大后
Banner舉例： 相同款式不同顏色的鞋子，大小不一的波點(diǎn)。
（3）漸變
是我常常聽說的一種效果，在自然界中能親身體驗(yàn)到，在行駛的道路上我們會(huì)感到樹木由近到遠(yuǎn)、由大到小的漸變。比如：
大小漸變舉例：故宮淘寶前段時(shí)間的表情包
（重復(fù)＋大小漸變）
舉個(gè)例子：
鞋子的排列方式。
背景的紋理形狀。
（4）對(duì)比
有時(shí)候是形態(tài)上的對(duì)比，有時(shí)是色彩和質(zhì)感的對(duì)比。對(duì)比可產(chǎn)生明朗、肯定、強(qiáng)烈的視覺效果，給人深刻的印象。比如：
對(duì)比舉例：買家秀和買家秀。。。
開玩笑了，我們舉個(gè)正經(jīng)的例子吧：照片ps前后
Banner舉例：
（5）密集：
密集在設(shè)計(jì)中是一種常用的組織圖面的手法，基本形在整個(gè)構(gòu)圖中可自由散布，有疏有密。最疏或最密的地方常常成為整個(gè)設(shè)計(jì)的視覺焦點(diǎn)，他其實(shí)也是對(duì)比的一種情況，越密集的地方給人感覺距離越遠(yuǎn)，反之越近。
密集舉例：
日本波點(diǎn)女王草間彌生的作品
草間彌生
Banner舉例：
（6）發(fā)射
是一種常見的自然現(xiàn)象，太陽四射的光芒就是發(fā)射的。發(fā)射具有方向的規(guī)律性，發(fā)射中心為最重要的視覺焦點(diǎn)，所有的形象均向中心集中，或由中心散開，有時(shí)可造成光學(xué)動(dòng)感，會(huì)產(chǎn)生爆炸的感覺，有強(qiáng)烈的視覺效果。
發(fā)射舉例：星軌／水波／觀世音菩薩背后自帶的光環(huán)
水波
星軌（攝影）
每次觀世音菩薩出場總是會(huì)自帶光環(huán)（大家小時(shí)候應(yīng)該都比較熟悉這些畫風(fēng)了吧，有點(diǎn)俗氣。。）
Banner舉例：放射線，使得畫面聚焦到中間部分內(nèi)容。
（7）特異
是指構(gòu)成要素在有次序的關(guān)系里，有意違反次序，使少數(shù)個(gè)別的要素顯得突出，以打破規(guī)律性。
特異舉例：其實(shí)各種類似于連連看的游戲，就是這么個(gè)原理
Banner舉例： 一家人站成一排，個(gè)頭比較小的那一個(gè)就給人一種特異和俏皮的感覺，使畫面不那么單調(diào)。
（8）空間
矛盾空間舉例：前段時(shí)間非常流行的一款游戲《紀(jì)念碑谷》。
空間感Banner舉例：畫面中的元素可以假想為一些有大有小的點(diǎn)，然后按一定透視空間規(guī)律擺放（近大遠(yuǎn)?。?/p>
由陰影營造的空間感
（9）分割
把整體分成小的部分。比如：
分割舉例：來自大自然的梯田
分割Banner舉例： 不同比例大小的色塊組成Banner的背景。
商品的排列也可以起到分割畫面的作用。
（10）肌理
又稱質(zhì)感，由于物體的材料不同，表面的排列、組織、構(gòu)造等不同，因而產(chǎn)生粗糙感、光滑、軟硬感。比如：
肌理舉例：木材等
肌理Banner舉例： 背景采用噴墨＋涂色的方式形成了一種很時(shí)尚的紋理。
（11）錯(cuò)視
因空間距離或周圍環(huán)境所造成的視覺差。主要有下面幾種：
1.繆勒—萊依爾錯(cuò)視
圖中兩條線是等長的，由于上下線段兩端的箭頭方向相反，上線段的箭頭占據(jù)的空間大，所以上面的線顯的較長。
2.垂直線與水平線的錯(cuò)視
大多數(shù)人往往把垂直線看的比水平線要長，這是高估的錯(cuò)覺。在水平線長度為8-10mm時(shí)，這種錯(cuò)覺最大。
3.透視錯(cuò)視
圖中的兩條線是相等的。看起來下面的要短，是因?yàn)橥敢暤腻e(cuò)覺。
4.正方形的錯(cuò)視
標(biāo)準(zhǔn)的正方形左右的邊看上去大于上下的邊。
5.黑白錯(cuò)視
圖中黑白線段，由于白線段明度大，具有膨脹的現(xiàn)象，所以看以來比黑線段長。
6.由于圖形結(jié)構(gòu)的影響而產(chǎn)生的錯(cuò)視
圖中組成三、四、五邊形的邊長都相等，但由于周長和面積的不同，產(chǎn)生邊長的不同。
7.對(duì)比錯(cuò)視
高個(gè)子和矮個(gè)子在一起，高的會(huì)顯的越高，矮的會(huì)顯的越矮。
錯(cuò)視舉例：比如虛實(shí)手繪拼接，比如有些攝影作品
這里要說明的是，錯(cuò)視在一些視差動(dòng)畫的網(wǎng)頁頁面里運(yùn)用的會(huì)比較多一些，還有一些app的引導(dǎo)頁，這里Banner舉例的話可能也不太合適，不過也可以給大家看一下：
比如這個(gè)畫面里的黃色圓點(diǎn)，同樣的黃色圓點(diǎn)，在暗色背景上是很突出的，但在同樣是黃色的背景上就幾乎看不見了，但其實(shí)原點(diǎn)是沒變的，只是背景的顏色變了，就導(dǎo)致我們看到了不一樣的結(jié)果。
如下：
和諧統(tǒng)一／對(duì)比突出／對(duì)稱／畫面平衡／視覺重心／節(jié)奏韻律
和諧統(tǒng)一：
元素與元素之間，或所有元素構(gòu)成的整體是一種協(xié)調(diào)的關(guān) 系，比如大?。伾L(fēng)格等的協(xié)調(diào)。
Banner舉例：整體的明亮色彩，搭配的雨滴小元素，以及雨傘產(chǎn)品和模特裝扮，左中右排版方式都看起來很協(xié)調(diào)統(tǒng)一。
對(duì)比突出：
即把2個(gè)質(zhì)或者量反差很大的元素放在一起，使人感覺主體鮮明突出，整體又活躍而統(tǒng)一，比如大小／數(shù)量／色彩／形狀的對(duì)比。
Banner舉例：紅色模特部分面積比較大，無論是色彩還是面積優(yōu)勢，都使得它在檸檬黃背景上特別突出。
對(duì)稱：
假設(shè)在一個(gè)圖形中間畫一條垂直或水平線后，畫面的左右或上下2邊是可以完全重合的，則我們稱之為對(duì)稱。
Banner舉例：典型的對(duì)稱構(gòu)圖咯，Bra就是一個(gè)對(duì)稱的形狀。
畫面平衡：
即元素與元素之間，元素與整體之間的大?。螤睿瘮?shù)量／色彩／材質(zhì)等的分布與視覺上的平衡。
Banner舉例：左右兩邊色彩面積上是平衡的，但是數(shù)量和形狀上的略微差異，使得畫面不那么單調(diào)。
視覺重心：
通過對(duì)畫面中元素的數(shù)量／顏色／位置／大?。馁|(zhì)等進(jìn)行處理，畫面中所出現(xiàn)的視覺焦點(diǎn)。
Banner舉例：模擬撕紙效果形成的破洞，有一種視覺聚焦的效果。
節(jié)奏韻律：畫面中的一種或多種元素按一定的規(guī)律排列，會(huì)產(chǎn)生音樂一般的旋律感。
Banner舉例： 鞋子擺放姿勢不一樣，產(chǎn)生了一種動(dòng)律感，使畫面不單調(diào)不呆板。
重點(diǎn)（高潮部分）來了?。。。?！
以上講了這么多知識(shí)點(diǎn)，那么結(jié)合這些知識(shí)點(diǎn)，我總結(jié)繪制了一些比較實(shí)用的Banner排版
樣式，如下圖所示：
以上呢，我就先總結(jié)這么多，其實(shí)所有的Banner版式都是大同小異的，因?yàn)槲覀兦懊嫣岬剑珺anner是由文案／模特或商品／背景／點(diǎn)綴物組成的，而所有這些元素就相當(dāng)于我們平面構(gòu)成里的點(diǎn)線面，當(dāng)我們改變這些元素的角度／距離／大?。瘮?shù)量／樣式／顏色等，新的版式也就產(chǎn)生了，所以，大家不妨也試試看哦。
Banner中的所有元素其實(shí)都相當(dāng)于平面構(gòu)成里的點(diǎn)或線或面，而所有元素所組成的Banner畫面其實(shí)又是一種情緒和信息的表達(dá)，所以我們可以從下面4個(gè)方面去理解這個(gè)問題：
當(dāng)我們拿到一個(gè)設(shè)計(jì)需求的時(shí)候，都會(huì)需要確定他的設(shè)計(jì)風(fēng)格，而這個(gè)風(fēng)格怎么來確定呢？就是要明白他的定位以及服務(wù)的人群是誰，了解他們的興趣愛好，同時(shí)我們腦袋里會(huì)出現(xiàn)下面這幾個(gè)關(guān)鍵詞：熱鬧促銷／年輕活力／高冷大牌／時(shí)尚個(gè)性／規(guī)矩保守等
我們先看幾個(gè)Banner實(shí)例：
低價(jià)熱鬧促銷：畫面中會(huì)有有比較多的點(diǎn)綴物，也喜歡用大面積的暖色，其目的就是為了營造熱鬧的氛圍，給人熱情有親和力的感覺，板式以上下或者居中排版的方式多點(diǎn)，這種方式的視覺也更聚焦一些。
所以熱鬧促銷的頁面可以考慮下面這些排版樣式：
年輕活力：這種主題的Banner設(shè)計(jì)其實(shí)跟熱鬧促銷的方法類似，只是說，這種畫面里的點(diǎn)綴元素或者模特樣式需要表現(xiàn)得顯得更加俏皮活力一些，色彩上也會(huì)比較艷麗或明亮，營造一種青春活力的感覺，排版方式其實(shí)沒有什么特別的限制，發(fā)揮空間非常大。
所以年輕活力的頁面可以考慮下面這些排版樣式：
高冷大牌：這種主題的Banner設(shè)計(jì)重在體現(xiàn)一種一般人買不起，買了之后會(huì)顯得自己特別有優(yōu)越感的印象，那么畫面中就需要多留白，善用一些簡潔的或有棱角的圖形設(shè)計(jì)，切忌用一些比較卡哇伊或太柔美復(fù)雜的線條，同時(shí)，商品或模特的品質(zhì)要高，總而言之就是給人一種很貴很高端的感覺（窮人買不起，有錢人買了有面子），這個(gè)跟低價(jià)熱鬧促銷是相反的。
所以高冷大牌的頁面可以考慮下面這些排版樣式：
當(dāng)我們?cè)谧鲆粋€(gè)banner的時(shí)候，如果沒有特別的要求，其實(shí)我們是有很多個(gè)方向選擇的，首先問下自己你是想要突出什么信息呢？是突出商品呢？還是突出文字呢？還是突出整體的氛圍呢？還是強(qiáng)調(diào)整體的協(xié)調(diào)感呢？還是說強(qiáng)調(diào)品牌呢？
一般來說，一個(gè)好的Banner首先是要保證信息傳達(dá)準(zhǔn)確，然后再需要保證畫面的協(xié)調(diào)感和氛圍的。
那么我先給大家看幾個(gè)案例舉例：
強(qiáng)調(diào)品牌（模特也屬于品牌的一部分）
強(qiáng)調(diào)商品以及SALE
強(qiáng)調(diào)整體的氛圍（商品融入在氛圍當(dāng)中了）
強(qiáng)調(diào)SALE
比如大家可以看到我之前給大家總結(jié)的版式，基本上文案信息都是比較突出的，其次商品突出或者強(qiáng)調(diào)整體氛圍：
關(guān)于品牌這塊，可能是很多小商家目前不太重視，也覺得自己用不上的，但是各大電商平臺(tái)還有一些比較大的電商品牌都已經(jīng)有這種品牌意識(shí)了，所以不管你是在哪種團(tuán)隊(duì)里，不防也都了解一下。
我們可以從這幾個(gè)方面去看待品牌這個(gè)問題：風(fēng)格延續(xù)／品牌統(tǒng)一／風(fēng)格突破
品牌統(tǒng)一：天貓的貓頭形象，運(yùn)用于各個(gè)品類的廣告當(dāng)中，這一創(chuàng)意既統(tǒng)一了品牌形象，又非常巧妙。
再比如初語：
一直以來，初語的所有模特，在眼睛那里都有一條白線，雖然不明白什么意思，但是給人印象特別深刻，形成那個(gè)了統(tǒng)一的品牌視覺形象，最后大家也看到了初語的新 logo，就是提取了眼睛那里的形象，新logo像下面這樣：
而它原來的logo是這樣的：
對(duì)比發(fā)現(xiàn)，品牌形象更加統(tǒng)一了，也更有特色了（雖然會(huì)讓一些沒聽過這個(gè)品牌的人以為它是賣面膜的，不過對(duì)于接觸過這個(gè)服裝品牌的人來說還是很好理解的）。
風(fēng)格延續(xù)：這個(gè)在平臺(tái)的比較大型的活動(dòng)里里運(yùn)用較多，比如各個(gè)分會(huì)場的風(fēng)格延續(xù)（排版樣式保持一致，只是改變了顏色和品類商品和文案等）
風(fēng)格突破：關(guān)于品牌的風(fēng)格突破，可能是因?yàn)樯婕暗狡放粕?jí)或者品牌定位的改變，所以需要在設(shè)計(jì)上配合這一策略，比如說原先你面對(duì)的可能是青少年群體，但隨著時(shí)代的發(fā)展，你是繼續(xù)服務(wù)這些青少年群體跟著他們一起成長轉(zhuǎn)型為服務(wù)于大齡青年呢？還是繼續(xù)服務(wù)新一代的青少年群體呢？這時(shí)候你的用戶群體改變了，當(dāng)然也就意味著風(fēng)格可能需要作出改變咯。
比如QQlogo形象的升級(jí)：
對(duì)于這個(gè)話題，我們后面再抽出一篇文章單獨(dú)來講好了，大家感興趣嗎？
當(dāng)一個(gè)Banner在滿足了前面幾個(gè)要求的情況下，如果有能力的話，我們當(dāng)然還是要做到達(dá)到視覺美感的要求的，那么從這個(gè)角度看，平面構(gòu)成之于Banner設(shè)計(jì)的意義是什么呢？
我們可以看下下面幾個(gè)關(guān)鍵詞：平衡畫面／視覺沖擊力／畫面不單調(diào)／富有創(chuàng)意等。
平衡畫面：左中右排版
視覺沖擊力：放射線，中心聚焦
畫面不單調(diào)：將產(chǎn)品的方向或顏色做一些不規(guī)則的排列，避免乏味
富有創(chuàng)意：擬人化處理畫面，營造一種身臨其境的場景感
以上，我分別給大家講了這幾個(gè)知識(shí)點(diǎn)：
一、平面構(gòu)成的含義是什么？
二、電商Banner圖是由什么組成的？
三、我們?cè)撊绾卧贐anner圖設(shè)計(jì)中運(yùn)用平面構(gòu)成呢？
四、平面構(gòu)成之于電商Banner圖的意義是什么？
到此，平面構(gòu)成之于Banner設(shè)計(jì)的奧秘我就講完了，這次的內(nèi)容量非常大，估計(jì)夠你們消化不止一周了，而我也沒有分為上下篇來寫，原因有二：一方面是跟我自己的性格有關(guān)，我不太習(xí)慣分篇來講一個(gè)知識(shí)點(diǎn)，一個(gè)完整的知識(shí)點(diǎn)不管從哪里切斷我都會(huì)感覺不舒服，就像你吃一個(gè)東西吃得正爽，卻被別人告知說：“另一半要留著下次再吃哦”，雖然這樣子可以增加大家對(duì)下一篇文章的期待，但也會(huì)感覺不爽吧（不過為了大家不要吃撐了最好是收藏起來或轉(zhuǎn)發(fā)出去，以便后面再細(xì)細(xì)看）。
本文由 @做設(shè)計(jì)的面條 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(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
在 ToB 系統(tǒng)中，跳轉(zhuǎn)場景的合理分類和設(shè)計(jì)對(duì)用戶體驗(yàn)至關(guān)重要。不同的跳轉(zhuǎn)方式（如當(dāng)前頁刷新或新開標(biāo)簽頁）直接到影響用戶的操作效率和系統(tǒng)性能。本文將從分類、設(shè)計(jì)建議以及用戶體驗(yàn)的角度，深入探討如何優(yōu)化 B 端系統(tǒng)中的跳轉(zhuǎn)場景。
金蝶云·星辰聚焦小型企業(yè)在線經(jīng)營和數(shù)字化管理，，提供財(cái)務(wù)云、稅務(wù)云、進(jìn)銷存云、訂貨商城、費(fèi)用報(bào)銷等SaaS服務(wù)，支持小型企業(yè)拓客開源、智能管理、實(shí)時(shí)決策，是一款適合小微型企業(yè)的云端財(cái)務(wù)進(jìn)銷存管理軟件
1.1.1. 工作臺(tái)
1.1.2. 目錄頁
1.1.3. 列表頁
1.1.4. 新建頁
1.1.5. 詳情頁
1.1.6. 待辦待閱
1.1.7. 幫助系統(tǒng)
1.1.8. 系統(tǒng)后臺(tái)配置
金蝶云星空是金蝶面向事業(yè)部制、多地點(diǎn)、多工廠等運(yùn)營協(xié)同與管控型企業(yè)及集團(tuán)公司，提供的一個(gè)通用ERP服務(wù)平臺(tái)
1.2.1. 工作臺(tái)
1.2.2. 列表頁
1.2.3. 新建頁
1.2.4. 詳情頁
1.2.5. 待辦帶閱
致遠(yuǎn)的智能表單管理系統(tǒng)，因權(quán)限不夠，只有部分頁面；但依然可以看到其結(jié)構(gòu)，也是系統(tǒng)內(nèi) Tab 頁簽跳轉(zhuǎn)
4.1.1. 列表頁
4.1.2. 新建頁
4.1.3. 詳情頁
4.1.4. 待辦待閱
4.1.5. 幫助系統(tǒng)
4.1.6. 系統(tǒng)后臺(tái)配置
直接菜單切換，無跳轉(zhuǎn)（前臺(tái)應(yīng)用配置，不需要跳轉(zhuǎn)頁面）
從用戶端進(jìn)入后臺(tái)配置，新開頁簽
4.2.1. 列表頁
4.2.2. 新建頁
4.2.3. 詳情頁
騰訊的企業(yè)設(shè)計(jì)體系中，也包含了這一層設(shè)計(jì)規(guī)則（功能）
在 ToB 系統(tǒng)中，在不同場景下頁面的跳轉(zhuǎn)對(duì)于用戶體驗(yàn)至關(guān)重要。不同的跳轉(zhuǎn)方式，直接影響到用戶的操作效率和系統(tǒng)性能。
從用戶操作角度，可以將頁面的跳轉(zhuǎn)分為三類「操作流程類」「信息查詢」「系統(tǒng)配置類」（端到端如 PC 端到移動(dòng)端，不在此次討論范圍）
1.1 操作流程跳轉(zhuǎn)
用戶在系統(tǒng)中進(jìn)行的具體操作，用戶執(zhí)行某個(gè)任務(wù)或業(yè)務(wù)流程，如數(shù)據(jù)的創(chuàng)建、編輯、審批等。通常目標(biāo)是推進(jìn)某個(gè)操作流程的完成。
場景：如新建或編輯某數(shù)據(jù)，收到待辦審批某流程等
1.2 信息查詢與查看類跳轉(zhuǎn)
當(dāng)用戶需要查詢、查看或分析系統(tǒng)內(nèi)的數(shù)據(jù)和信息時(shí)，需要從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面，以獲取更多的詳細(xì)信息或進(jìn)行更深入的分析。
場景：如打開某數(shù)據(jù)查看詳情，從工作臺(tái)查看詳細(xì)報(bào)表進(jìn)行數(shù)據(jù)分析，查看操作歷史或日志記錄等
1.3 系統(tǒng)配置與管理跳轉(zhuǎn)
涉及系統(tǒng)設(shè)置、用戶權(quán)限管理、插件配置等功能的跳轉(zhuǎn)，通常由管理員或有權(quán)限的用戶執(zhí)行，用于配置和管理系統(tǒng)的運(yùn)行環(huán)境和用戶權(quán)限。如管理員需要從用戶管理頁面跳轉(zhuǎn)到權(quán)限設(shè)置頁面
場景：如打開后臺(tái)系統(tǒng)，配置系統(tǒng)參數(shù)或用戶權(quán)限
注：第三方系統(tǒng)跳轉(zhuǎn)、子域名跳轉(zhuǎn)屬于功能類特殊場景，已涵蓋在下方業(yè)務(wù)場景中
以上三種分類涵蓋了基本的頁面跳轉(zhuǎn)場景，但不夠具體，現(xiàn)按照以下具體場景，對(duì)競品的跳轉(zhuǎn)方式展開對(duì)比分析（注：彈窗屬于模態(tài)，不在此次范圍之內(nèi)）
跳轉(zhuǎn)方式名稱太長，簡稱為：
致遠(yuǎn)的系統(tǒng)沒有體驗(yàn)到完整的，只體驗(yàn)到部分「智能表單管理系統(tǒng)」
1）在同一個(gè)平臺(tái)或系統(tǒng)內(nèi)的信息，沒有其他特殊情況時(shí)，最好不要新開瀏覽器 Tab 頁簽，這點(diǎn)泛微和金蝶保持了統(tǒng)一，都沒有新開瀏覽器 Tab 頁簽；
2）跳轉(zhuǎn)后臺(tái)系統(tǒng)、或其他子系統(tǒng)、子域名或第三方平臺(tái)時(shí)，這時(shí)可以新開「瀏覽器 Tab 頁簽」，展示其獨(dú)立完整信息結(jié)構(gòu)
如幫助系統(tǒng)，有些幫助以文檔、視頻或論壇的形式存在，使用獨(dú)立頁簽可以很好的呈現(xiàn)其完整性；這點(diǎn)「MK」「金蝶」「泛微」都做到了統(tǒng)一；
4.1 適合系統(tǒng)外跳轉(zhuǎn)的場景
4.1.1. 跨系統(tǒng)跳轉(zhuǎn)
4.1.2. 二級(jí)域名跳轉(zhuǎn)
4.1.3. 第三方集成跳轉(zhuǎn)
4.2 適合系統(tǒng)內(nèi)跳轉(zhuǎn)的場景
4.2.1. 頁面內(nèi)跳轉(zhuǎn)
4.2.2. 模塊間跳轉(zhuǎn)
4.2.3. 流程間跳轉(zhuǎn)
1.2.4. 系統(tǒng)設(shè)置與管理跳轉(zhuǎn)
5.1 新開Tab頁簽
傳統(tǒng)的網(wǎng)頁瀏覽都是新開瀏覽器標(biāo)簽頁的形式，實(shí)現(xiàn)內(nèi)容的并行獨(dú)立展示，從而避免跳轉(zhuǎn)和返回的問題
優(yōu)點(diǎn)：實(shí)現(xiàn)內(nèi)容的并行、且獨(dú)立展示，從而避免跳轉(zhuǎn)和返回的問題；可以保證用戶并行操作，方便信息間的對(duì)比、參考；適合獨(dú)立子系統(tǒng)，完整呈現(xiàn)系統(tǒng)內(nèi)容
缺點(diǎn)：打開頁簽太多時(shí)會(huì)很耗性能，造成卡頓；也會(huì)造成用戶迷路，找不到之前的內(nèi)容
5.2 系統(tǒng)內(nèi) Tab 頁簽
在當(dāng)前頁內(nèi)，新增一行 tab，來承載內(nèi)容
優(yōu)點(diǎn)：系統(tǒng)內(nèi) Tab 頁，頁面是相互獨(dú)立的、互不干涉的，多窗口自由切換，并且信息保留在系統(tǒng)內(nèi)部，用戶的視覺動(dòng)線相對(duì)集中，交互操作成本更低
缺點(diǎn)：標(biāo)簽頁欄屬于框架層級(jí)，會(huì)影響原有的頁面結(jié)構(gòu)；且始終都會(huì)占據(jù)頁面位置，會(huì)進(jìn)一步壓縮屏幕縱向有效空間；在整體的統(tǒng)一性上，也需要綜合考慮使用
5.3. 抽屜
一般從右側(cè)劃出抽屜浮層，來承載內(nèi)容
優(yōu)點(diǎn)：在當(dāng)前頁面出現(xiàn)的抽屜浮層，可以避免頁面頻繁跳轉(zhuǎn)、以及頻繁返回帶來的頁面刷新導(dǎo)致用戶效率下降的問題
缺點(diǎn)：會(huì)遮擋一部分上文內(nèi)容，無法會(huì)看；且抽屜寬度有限，無法承載更多內(nèi)容信息（不過有些抽屜支持放大/縮小 可以避免這個(gè)問題）
ToB 的頁面跳轉(zhuǎn)方式，應(yīng)遵循完善的業(yè)務(wù)規(guī)則和使用邏輯，不能一刀切選擇一種方式（如一直新開瀏覽器 Tab 頁簽）。最好允許用戶自定義跳轉(zhuǎn)方式，如在系統(tǒng)設(shè)置中提供選項(xiàng)，讓用戶選擇某些操作是當(dāng)前頁刷新還是新開標(biāo)簽頁。這有助于滿足不同用戶的偏好，提高系統(tǒng)的靈活性和用戶滿意度。
在需要新開多個(gè)標(biāo)簽頁的場景中，需要考慮瀏覽器的性能表現(xiàn)和用戶設(shè)備的資源消耗?？梢酝ㄟ^優(yōu)化加載速度、減少頁面資源占用等方式來提升用戶體驗(yàn)。
清晰的跳轉(zhuǎn)反饋、完善的路徑和返回機(jī)制
而無論是當(dāng)前頁刷新還是新開Tab頁簽、系統(tǒng)內(nèi) Tab 頁簽，系統(tǒng)都應(yīng)在跳轉(zhuǎn)后給予用戶明確的反饋。比如加載進(jìn)度條、操作成功提示等，讓用戶始終知道自己的操作狀態(tài)。在復(fù)雜的跳轉(zhuǎn)路徑中，設(shè)計(jì)面包屑導(dǎo)航、返回按鈕或快捷鍵，有助于用戶快速找到跳轉(zhuǎn)路徑并返回到之前的操作頁面，避免跳轉(zhuǎn)迷失。
通過完善的業(yè)務(wù)規(guī)則和使用邏輯，靈活地結(jié)合用戶行為分析和個(gè)性化設(shè)置，有助于提升系統(tǒng)的整體用戶體驗(yàn)。在實(shí)際應(yīng)用中，還需時(shí)刻關(guān)注系統(tǒng)性能，確保在多標(biāo)簽頁和多終端跳轉(zhuǎn)的情況下，依然能保持流暢的用戶體驗(yàn)。
本文由 @宇相 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
蘭亭妙微(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
大部分APP都會(huì)有引導(dǎo)設(shè)計(jì)，以幫助新人快速上手。那你知道這些引導(dǎo)設(shè)計(jì)有哪些要求和方法嗎？這篇文章，我們看看作者整理的五種類型，你們用的是哪一種呢？
1）定義
蒙層引導(dǎo)的特點(diǎn)是讓用戶將注意力聚焦到被圈定的某個(gè)特定功能上，不被其他內(nèi)容干擾；
通常出現(xiàn)在用戶首次操作時(shí)做全局引導(dǎo)，也會(huì)在產(chǎn)品的各個(gè)功能點(diǎn)等待用戶的觸發(fā)；根據(jù)內(nèi)容一次顯示一個(gè)或多個(gè)提示；
2）組成結(jié)構(gòu)
黑色蒙層+高亮內(nèi)容+內(nèi)容介紹（圖文/視頻）+操作引導(dǎo)；
3）使用規(guī)則
分為單頁面功能引導(dǎo)和多頁面多功能引導(dǎo)，單頁面引導(dǎo)全局信息量不能過多；多頁面引導(dǎo)控制在5步以內(nèi)，提示契機(jī)保證用戶需要的時(shí)候出現(xiàn)，不做過多干擾；
4）使用場景
分類場景：展示新產(chǎn)品/功能特色介紹（新功能上新的告知、特色重點(diǎn)功能宣傳）、產(chǎn)品/功能更新迭代（說明界面中功能位置的改動(dòng)、服務(wù)內(nèi)容的變動(dòng)等）、操作行為引導(dǎo)（講解操作方式、體現(xiàn)特定的手勢交互劃分說明界面的整體結(jié)構(gòu)）；
1）定義
引導(dǎo)頁出現(xiàn)在用戶首次打開APP的時(shí)，在用戶使用產(chǎn)品前先給用戶營造好產(chǎn)品的基調(diào)和氛圍，宣傳產(chǎn)品功能和亮點(diǎn)或告知用戶最核心的操作方式；
基本上由3-5個(gè)頁面組成，保證能帶給用戶新鮮感和吸引他們的注意力，否則對(duì)用戶來說反而是干擾，只會(huì)直接選擇快速劃過；
2）組成結(jié)構(gòu)
文字介紹+圖片介紹+操作引導(dǎo)；
3）使用規(guī)則
引導(dǎo)頁最多不超過5頁；圖片介紹表達(dá)簡單且符合真實(shí)的使用場景；盡量明確的操作引導(dǎo)查看下一步的操作，
4）使用場景
用戶首次啟動(dòng)APP，全局展示APP的整體功能架構(gòu)和大的功能模塊分類
1）定義
用戶進(jìn)入使用某功能或某交互方式變化時(shí)，彈出彈窗予以解釋并介紹相應(yīng)的操作，屬于即時(shí)的強(qiáng)提醒方式；
彈窗引導(dǎo)更重，阻斷行更強(qiáng)，需考慮使用的場景和傳達(dá)內(nèi)容的重要程度；
2）組成結(jié)構(gòu)
彈窗+圖/文信息+操作按鈕；
3）使用規(guī)則
更多使用于單項(xiàng)服務(wù)的介紹；彈窗內(nèi)盡可能以圖文方式介紹，避免大片文字，內(nèi)容清晰明確，操作按鈕指代清晰；
4）使用場景
告知用戶有新功能上線（如何找到新功能、新功能如何使用，并提供直接鏈接跳轉(zhuǎn)去對(duì)應(yīng)服務(wù)）、變更功能提醒（功能變更后提示去哪找到）、告知用戶一些隱藏菜單的內(nèi)容（引導(dǎo)用戶使用）、以及查看/點(diǎn)擊等交互操作變更等；
1）定義
同樣是作為即使提醒的方式，作為引導(dǎo)提示、提醒提示、解釋提示，讓用戶快速了解此服務(wù)/功能的內(nèi)容
氣泡屬于輕量級(jí)的提示方式，打斷感弱，內(nèi)容傳遞量不大但聚焦；
2）組成結(jié)構(gòu)
彈窗+圖文信息+操作按鈕；
3）使用規(guī)則
彈窗內(nèi)盡可能以圖文方式介紹，避免大篇文字，內(nèi)容明確，操作按鈕指代清晰；
4）使用場景
聚焦在單一功能場景，更貼近某個(gè)服務(wù)的引導(dǎo)和告知，告知用戶有新功能上線、引導(dǎo)用戶使用、或告知用戶一些隱藏菜單的內(nèi)容，當(dāng)前提示內(nèi)容較為重要，且內(nèi)容較多，建議使用彈窗。
1）定義
操作式引導(dǎo)會(huì)結(jié)合產(chǎn)品實(shí)際使用場景，一步一步地引導(dǎo)你進(jìn)行操作，鼓勵(lì)用戶參與其中
這種方式很容易讓用戶沉浸其中、快速學(xué)習(xí)，并且因?yàn)橛屑皶r(shí)的操作反饋，所以用戶很容易獲得強(qiáng)烈的成就感；
2）組成結(jié)構(gòu)
內(nèi)容介紹+引導(dǎo)內(nèi)容+操作引導(dǎo)
3）使用規(guī)則
操作引導(dǎo)突出且明確指示出操作的方式，否則用戶很容易因?yàn)椴僮魇〉拇鞌「卸艞?；保持?nèi)容與操作的親密性；操作成功后及時(shí)給予反饋。
4）使用場景
多應(yīng)用在工具類產(chǎn)品和游戲：比如養(yǎng)雞活動(dòng)、拼多多的種農(nóng)作物、螞蟻森林種樹等最開始使用此功能時(shí)，或者很久未進(jìn)入的用戶下次進(jìn)入；
本文由 @宮宮宮宮 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(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
蘭亭妙微(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
如何讓您的產(chǎn)品詳情頁脫穎而出，并顯著提高轉(zhuǎn)化率，是每位產(chǎn)品經(jīng)理和設(shè)計(jì)師都必須面對(duì)的重要挑戰(zhàn)。本文深入探討了詳情頁提升轉(zhuǎn)化率的多種技巧和策略，希望可以幫到大家。
最近半年有策劃不少詳情頁，然后就想總結(jié)一些詳情頁相關(guān)的內(nèi)容。
其實(shí)產(chǎn)品詳情頁的設(shè)計(jì)原則只有一個(gè)，那就是迎合目標(biāo)消費(fèi)者的需求。那么一個(gè)好的產(chǎn)品詳情頁都應(yīng)該包含什么內(nèi)容呢？
核心目標(biāo)：用視覺+文案快速傳遞產(chǎn)品核心價(jià)值。3秒內(nèi)讓消費(fèi)者“一見鐘情”。
是的，請(qǐng)務(wù)必在5秒內(nèi)讓消費(fèi)者“一見鐘情”，若無法在5秒內(nèi)抓住眼球，客戶可能會(huì)關(guān)閉這個(gè)頁面。
內(nèi)容方向：
1.產(chǎn)品核心賣點(diǎn)（加上產(chǎn)品外觀，科技感）
2.使用場景化展示（如模特穿戴、產(chǎn)品使用動(dòng)態(tài)）
3.品牌 LOGO / 標(biāo)語（弱化但可識(shí)別）
設(shè)計(jì)公式：
1.主標(biāo)題=1. 一句話展示出產(chǎn)品的核心賣點(diǎn)/核心宣傳點(diǎn)；2.或者產(chǎn)品名稱，3.或者情緒價(jià)值（如減壓、陪伴）+功能關(guān)鍵詞（如“AI監(jiān)測”）；
2.副標(biāo)題=1. 產(chǎn)品名稱+使用場景；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左右，以圖吸睛，輔以少量文字說明，版面適當(dāng)留白，保證畫面簡潔明了。
優(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ì)非常簡潔和科技感，沒有多余的元素，使得產(chǎn)品成為視覺焦點(diǎn)。
圖片來源：dreametech 僅供學(xué)習(xí)用
Anker品牌產(chǎn)品名字+產(chǎn)品核心賣點(diǎn)+應(yīng)用場景。
圖片來源：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)：
通過圖文結(jié)合的方式，描述消費(fèi)者的痛點(diǎn)，如展示消費(fèi)者在生活中遇到的各種問題。
三類痛點(diǎn)挖掘法：
優(yōu)秀案例參考：
Petlibro品牌在Smart Fountain(給貓智能喂水相關(guān)的產(chǎn)品)產(chǎn)品詳情頁的痛點(diǎn)描述海報(bào)中，突出了貓咪因缺水而面臨的健康風(fēng)險(xiǎn)，通過具體數(shù)據(jù)強(qiáng)調(diào)了脫水對(duì)貓咪的危害。
如“9百萬+貓患有貓下泌尿道疾病”和“1百萬+貓患有慢性腎病”，這些龐大的數(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)頁試圖尋找解決方案。
圖片來源：furbo 僅供學(xué)習(xí)用
核心目標(biāo)：突出差異化，用“人無我有”建立競爭壁壘，讓消費(fèi)者覺得“非你不可”。(這個(gè)部分可以用1-3 張圖）
上面的一張海報(bào)提到核心痛點(diǎn)，當(dāng)一個(gè)人意識(shí)到了問題的存在，產(chǎn)生了共鳴情緒，那么他最需要的是什么？迫不及待需要解決方案。
因此從第三張海報(bào)開始接下來的幾張海報(bào)都可以呈現(xiàn)如何幫助他們解決問題或?qū)崿F(xiàn)需求。
并且關(guān)于如何解決問題，實(shí)現(xiàn)起來還無比容易，再加上眾多保障，讓你可以0風(fēng)險(xiǎn)購買使用。
這樣用戶就會(huì)想要躍躍一試，成交的意愿就會(huì)很強(qiáng)。
因此大家有沒有注意到，截至目前，沒有一張海報(bào)是多余的，每一張都有它的用處，并且前后是有邏輯性的。
那么在這個(gè)板塊的海報(bào)中，用什么打動(dòng)客戶？
前面提到我們需突出“突出產(chǎn)品差異化”優(yōu)勢，也就是在同類目產(chǎn)品中的優(yōu)勢，“人無我有，人有我優(yōu)，同時(shí)能解決用戶問題”的點(diǎn)。
比如用戶關(guān)注續(xù)航，競品續(xù)航3天，而你的產(chǎn)品可以續(xù)航7天甚至使用了太陽能可以無限續(xù)航。比如全球第一款XXXX產(chǎn)品等。
優(yōu)秀案例參考：
Reolink攝像頭搭載Wi-Fi 6技術(shù)，實(shí)現(xiàn)超快傳輸、低延遲和高穩(wěn)定性。將家庭安全提升到一個(gè)新的水平。
圖片來源：reolink 僅供學(xué)習(xí)用
dreametech品牌20,000Pa優(yōu)勢并告訴用戶這款掃地機(jī)器人能夠產(chǎn)生強(qiáng)大的吸力，幾乎可以吸入任何類型的污垢和灰塵，無論是隱藏在地毯深處的灰塵，還是卡在瓷磚縫隙中的污垢。
圖片來源：dreametech 僅供學(xué)習(xí)用
核心目標(biāo)：回答用戶“這對(duì)我有什么好處？”從“功能”到“利益”的轉(zhuǎn)化。（建議 3-5 個(gè)核心功能）
也就是因?yàn)槟惝a(chǎn)品的優(yōu)點(diǎn)給消費(fèi)者帶來的好處或者利益。可以是產(chǎn)品成分的優(yōu)勢或者功效的優(yōu)勢。
消費(fèi)者更愿為“解決問題”買單，而非單純的功能。我們可以將功能轉(zhuǎn)換成用戶能夠理解并幫助消費(fèi)者解決需求的點(diǎn)，幫助用戶更好地理解產(chǎn)品，并產(chǎn)生購買的可能。
內(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í)間長達(dá) 220 分鐘”，讓用戶明白確實(shí)續(xù)航更長、清潔范圍更大，減少頻繁充電。
“吸力高達(dá) 2000Pa” 轉(zhuǎn)化為清潔力強(qiáng)，能深度清潔；“充電快 30%” 則體現(xiàn)節(jié)省時(shí)間。用簡潔語言和數(shù)據(jù)，直觀呈現(xiàn)產(chǎn)品給用戶帶來的便利。
圖片來源：dreametech 僅供學(xué)習(xí)用
也可以用其中一張圖整合所有想傳達(dá)的核心功能，比如下面dreametech和Anker的海報(bào)。
圖片來源：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í)還原清掃場景。讓消費(fèi)者能直觀感受到產(chǎn)品的強(qiáng)大清潔力。
還可以用跟競品對(duì)比的細(xì)節(jié)展示圖，以及產(chǎn)品使用前VS使用后的細(xì)節(jié)展示。有對(duì)比才更突出優(yōu)勢和產(chǎn)品效果。
圖片來源：dreametech 僅供學(xué)習(xí)用
核心目標(biāo)：用權(quán)威和真實(shí)擊破最后一道防線，消除懷疑，讓消費(fèi)者覺得“選擇你零風(fēng)險(xiǎn)”從而激發(fā)購買欲望。
內(nèi)容方向:
圖片來源：dreametech 僅供學(xué)習(xí)用
圖片來源：luffy-wear 僅供學(xué)習(xí)用
核心目標(biāo)：越瑣碎，越真實(shí)，預(yù)判所有可能的疑問，減少客服壓力。
尤其是美國消費(fèi)者習(xí)慣自助購物，詳盡的信息能降低退貨率。因此此部分的設(shè)計(jì)需清晰的展示產(chǎn)品的基本信息。
內(nèi)容方向：
圖片來源：furbo 僅供學(xué)習(xí)用
圖片來源：dreametech 僅供學(xué)習(xí)用
核心目標(biāo)：給產(chǎn)品一個(gè)“靈魂溢價(jià)”，從“賣貨”到“賣價(jià)值觀”，綁定長期用戶。
我們可以將品牌理念傳達(dá)給消費(fèi)者，使產(chǎn)品更有厚度，賦予產(chǎn)品更多情緒價(jià)值，帶動(dòng)消費(fèi)者購買。
Sprout Social數(shù)據(jù)調(diào)研顯示：美國Z世代用戶中，62%的消費(fèi)者愿意為具有社會(huì)責(zé)任的品牌支付溢價(jià)。那么為什么不展示這個(gè)板塊讓你的消費(fèi)者看到企業(yè)有愛心的一面？
內(nèi)容方向：
優(yōu)秀案例參考：
furbo品牌產(chǎn)品詳情頁最后一張海報(bào)提到“One Furbo = $1 to Help Rescued Pets”。展現(xiàn)了Furbo關(guān)心動(dòng)物福利，強(qiáng)調(diào)品牌的社會(huì)責(zé)任感。
每購買一臺(tái)Furbo，消費(fèi)者不僅能享受高品質(zhì)產(chǎn)品，還能幫助救助動(dòng)物，激勵(lì)更多人做出購買決策。這種情感連接讓顧客感受到參與有意義事業(yè)的價(jià)值，提升品牌忠誠度。
同時(shí)，F(xiàn)urbo展示透明度和責(zé)任感，增強(qiáng)消費(fèi)者的信任。通過這樣的方式，F(xiàn)urbo有效促進(jìn)品牌與消費(fèi)者之間的聯(lián)系，推動(dòng)銷售增長。
圖片來源：furbo 僅供學(xué)習(xí)用
作者：外貿(mào)小巨熊 公眾號(hào)：外貿(mào)小巨熊
題圖來自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
蘭亭妙微(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
UI設(shè)計(jì)是隨著智能設(shè)備的飛速發(fā)展、互聯(lián)網(wǎng)行業(yè)的發(fā)展以及農(nóng)林牧漁傳統(tǒng)行業(yè)的急于轉(zhuǎn)向而興起。主要是企業(yè)對(duì)移動(dòng)設(shè)備交互界面的重視。在企業(yè)越來越重視界面設(shè)計(jì)的今天。傳統(tǒng)的平面設(shè)計(jì)能為現(xiàn)在我們的UI設(shè)計(jì)提供哪些參考呢，我們能從中借鑒的技巧有哪些？今天就從版式設(shè)計(jì)說起。
在UI設(shè)計(jì)中版式設(shè)計(jì)不言而喻是非常重要的。版式設(shè)計(jì)就如同蓋房子先要搭好框架一樣。一款A(yù)PP視覺呈現(xiàn)是不是符合商業(yè)性并兼具審美。其中的版式設(shè)計(jì)是其核心。而在平面設(shè)計(jì)中版式設(shè)計(jì)也是一個(gè)作品的核心。平面設(shè)計(jì)長時(shí)間的發(fā)展積淀了相當(dāng)多實(shí)用的技巧和方法。
版式設(shè)計(jì)中形勢方法指的是、畫面的表現(xiàn)方法和原理。說白了就是畫面要出什么效果就用什么表現(xiàn)手法而已。平面設(shè)計(jì)中形勢方法可以分為。虛空留白、比例適度、對(duì)比調(diào)和、變化統(tǒng)一、變異秩序、節(jié)奏韻律、重復(fù)交錯(cuò)、對(duì)稱均衡等。今天我們舉例分析一下前四個(gè)。
1、虛空留白（適合現(xiàn)在極簡設(shè)計(jì)風(fēng)格）
這種版式設(shè)計(jì)主要是突出主題，給人以輕松愉悅的感覺。適合文藝范的和有逼格的app界面使用，能夠營造出高品質(zhì)的界面風(fēng)格。但是如果一旦運(yùn)用不得當(dāng)容易出現(xiàn)界面空或單調(diào)的感覺。
2、比例適度（協(xié)調(diào)UI中各部分內(nèi)容）
平面設(shè)計(jì)中所說的比例適度主要是整體和部分的協(xié)調(diào)，采用合理的比例方法，如：黃金比例、等差等比。去協(xié)調(diào)各部分的關(guān)系使各部分要素產(chǎn)生聯(lián)系。在UI版面布局中正是需要調(diào)節(jié)和有機(jī)的組合各要素在有限的界面里的合理性。
3、對(duì)比調(diào)和（UI中信息層級(jí)的表現(xiàn)）
對(duì)比調(diào)和在平面設(shè)計(jì)中是經(jīng)常用到的，整體版面要調(diào)和，局部版面要對(duì)比。對(duì)比是強(qiáng)調(diào)主次關(guān)系。對(duì)比調(diào)和用到UI設(shè)計(jì)中可以做到設(shè)計(jì)內(nèi)容在主次關(guān)系的層級(jí)化。在統(tǒng)一調(diào)和的界面里又充滿了對(duì)比的小情調(diào)。這正是平面不平之所在，也是一個(gè)優(yōu)秀的界面所必備的。
4、變化與統(tǒng)一（是UI突破同質(zhì)化的一種方法）
變化與統(tǒng)一是形式美法則的總則。是其他方法方式的一個(gè)總結(jié)。變化所說的就是在設(shè)計(jì)中要有所創(chuàng)新不能總墨守成規(guī)，統(tǒng)一是設(shè)計(jì)要做到視覺上的愉悅而不是雖然有局部吸引人的眼球但是整體一看卻是辣眼睛。變化和統(tǒng)一也許是突破現(xiàn)在APP同質(zhì)化的一種方法。在現(xiàn)在APP同質(zhì)化嚴(yán)重的情況下我們能做到APP的風(fēng)格統(tǒng)一又不墨守成規(guī)尋求變化才是營造自己風(fēng)格的一種方法。
這些平面設(shè)計(jì)里的形式美法則在UI設(shè)計(jì)中同樣受用。這些表面形式在做banner圖構(gòu)圖和創(chuàng)意上也特別有用。
版式設(shè)計(jì)的基本類型有特別多。我們這里著重分析其中對(duì)UI設(shè)計(jì)最有幫助的骨骼型、左右分割、曲線型、滿版型這幾個(gè)基本類型。
1、骨骼型（類似網(wǎng)格構(gòu)圖）
這里說的骨骼型就是在版式構(gòu)圖中，進(jìn)行橫豎向的分欄。能容嚴(yán)格按照分欄排列。版面效果沉穩(wěn)厚重，井然有序，如果橫豎分欄交叉排列還可制造靈動(dòng)活潑的版面氣氛。非常類似網(wǎng)格構(gòu)圖的方法。在UI設(shè)計(jì)中也很受用，可以很好的規(guī)范個(gè)元素的位置。（如果你對(duì)目前的界面設(shè)計(jì)一籌莫展，不妨可以試試這種方法）
2、左右分割型（瀑布流）
左右分割不外乎就是把版面左右分開在配之以圖文。在UI中的應(yīng)用是隨著扁平化卡片化的興起，在移動(dòng)端界面尺寸的限制下，開始進(jìn)行了信息的分割處理。橫向的卡片式布局使得一屏內(nèi)所看到的信息受到了極大的限制（不利于用戶體驗(yàn)，卡片式并非萬能）。所以就應(yīng)用的左右分割的布局。左右分割有利于信息的呈現(xiàn)，可以與瀑布流結(jié)合。
3、曲線型（UI方向1）
曲線型主要表現(xiàn)的是韻律和節(jié)奏，可能符合一部分小眾APP設(shè)計(jì)界面設(shè)計(jì)，充滿了特色和戲劇性。我覺得有特色的界面設(shè)計(jì)是這些小眾APP的設(shè)計(jì)核心?？梢岳昧眍惖男”姷脑O(shè)計(jì)做吸引。
4、滿版型（UI方向2）
滿版設(shè)計(jì)在平面設(shè)計(jì)中主要表達(dá)大方、舒展的設(shè)計(jì)風(fēng)格。在UI移動(dòng)端界面設(shè)計(jì)中寸土寸金。現(xiàn)在的扁平化，極簡設(shè)計(jì)風(fēng)格都在留白提升逼格。但是未來極簡設(shè)計(jì)終將過去，我們面對(duì)的還是海量信息。
版式設(shè)計(jì)是平面設(shè)計(jì)的一部分，也應(yīng)該是UI設(shè)計(jì)的一部分。這里僅僅是說出了版式設(shè)計(jì)的一點(diǎn)點(diǎn)內(nèi)容，部分的形式美法則和版式設(shè)計(jì)的基本類型。還有很多很多對(duì)UI設(shè)計(jì)有利的點(diǎn)沒有發(fā)掘。站在巨人的肩上可以看的更遠(yuǎn)，平面設(shè)計(jì)就是我們前進(jìn)的加速劑。
本文由 @彪形大漢 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(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
藍(lán)藍(lán)設(shè)計(jì)的小編 http://bouu.cn
