首頁

用戶體驗(yàn)一致性思考

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

前言
在團(tuán)隊(duì)內(nèi)部，我們已確立了一套設(shè)計(jì)規(guī)范，在日常項(xiàng)目中使用設(shè)計(jì)規(guī)范輸出變的高效、統(tǒng)一。然而，在實(shí)際操作中，不可避免地會(huì)遇到一些特殊情況：某些客戶提出的個(gè)性化需求并不完全契合既定的設(shè)計(jì)規(guī)范,這些促使我們不得不在保持設(shè)計(jì)一致性的基礎(chǔ)上進(jìn)行靈活調(diào)整。因此，深入反思并優(yōu)化一致性原則的應(yīng)用策略顯得尤為重要。我們需要探索如何在堅(jiān)守設(shè)計(jì)規(guī)范核心精神的同時(shí)，靈活應(yīng)對多變的需求，確保設(shè)計(jì)既保持統(tǒng)一和諧，又能滿足特定場景下的獨(dú)特需求，從而實(shí)現(xiàn)用戶體驗(yàn)與品牌價(jià)值的雙重提升。
 
用戶體驗(yàn)一致性思考
 
 
用戶體驗(yàn)一致性思考
 
 
在UI/UX設(shè)計(jì)中，雅各布·尼爾森的十條可用性原則中，一致性（Consistency and standards）位列第四。這一原則強(qiáng)調(diào)在界面和交互設(shè)計(jì)上需要遵循既定的規(guī)則，無論是在應(yīng)用內(nèi)部還是跨平臺(tái)之間。
背后的心理學(xué)原理——重復(fù)定律，強(qiáng)調(diào)了信息重復(fù)對于鞏固記憶的重要性。正如赫爾曼·艾賓浩斯通過“遺忘曲線”所揭示的，信息的有效保留離不開重復(fù)接觸。一致性的應(yīng)用正是這一原理的生動(dòng)實(shí)踐，通過不斷重復(fù)統(tǒng)一的設(shè)計(jì)元素與模式，強(qiáng)化用戶對產(chǎn)品的認(rèn)知與記憶，從而提升整體的用戶滿意度與忠誠度。
艾賓浩斯遺忘曲線
艾賓浩斯遺忘曲線
 
用戶體驗(yàn)一致性思考
 
 
用戶側(cè)
1、用戶學(xué)習(xí)曲線：
一致的UI/UX設(shè)計(jì)可以降低用戶的學(xué)習(xí)曲線。當(dāng)用戶在應(yīng)用程序或網(wǎng)站中遇到一致的元素、布局和交互方式時(shí)，他們可以快速理解并準(zhǔn)確預(yù)測如何與界面進(jìn)行交互。這減少了用戶的混淆和困惑，提高了他們的效率和滿意度。
2、提升可用性：
一致性使用戶界面更加易于使用。當(dāng)用戶在不同的頁面或功能之間找到相似的設(shè)計(jì)元素和交互模式時(shí)，他們可以輕松地將已有的知識(shí)和經(jīng)驗(yàn)應(yīng)用于新的情境中。這種一致性幫助用戶快速完成任務(wù)，減少錯(cuò)誤和迷失，提供更好的導(dǎo)航和流暢的體驗(yàn)。
3、品牌認(rèn)可度：
一致的UI/UX設(shè)計(jì)有助于樹立品牌形象和增強(qiáng)品牌認(rèn)可度。通過在不同的渠道和平臺(tái)上保持一致的設(shè)計(jì)元素、標(biāo)識(shí)和視覺風(fēng)格，品牌可以建立起獨(dú)特而可識(shí)別的形象。用戶在不同的觸點(diǎn)上都能感受到品牌的一致性，從而增加品牌的信任和忠誠度。
4、用戶滿意度：
一致性直接影響用戶的滿意度。當(dāng)用戶在使用應(yīng)用程序或網(wǎng)站時(shí)感受到一致的設(shè)計(jì)和交互方式時(shí)，他們會(huì)感到更加舒適和自信。一致性傳遞了專業(yè)和質(zhì)量的信號(hào)，讓用戶感到被關(guān)注和重視。這種積極的用戶體驗(yàn)有助于提升用戶滿意度，并促使他們持續(xù)使用和推薦你的產(chǎn)品或服務(wù)。
 
用戶體驗(yàn)一致性思考
 
 
產(chǎn)研側(cè)
1. 降低設(shè)計(jì)成本，提高開發(fā)效率
無論是設(shè)計(jì)還是開發(fā)，復(fù)用已有的組件資源，保持界面的一致性可以有效地減少設(shè)計(jì)的投入，避免不必要的設(shè)計(jì)分歧點(diǎn)。
而在開發(fā)階段，可以避免重復(fù)造輪子，提高開發(fā)的效率，保證落地效果，也可以減少上線前設(shè)計(jì)走查、測試的工作量。
2. 形成一致的設(shè)計(jì)風(fēng)格
根據(jù)原子設(shè)計(jì)理論，通過原子組件的一致性，可以構(gòu)建出統(tǒng)一的界面框架、布局，形成統(tǒng)一風(fēng)格和用戶交互認(rèn)知，從而更好地保證用戶體驗(yàn)質(zhì)量。
 
用戶體驗(yàn)一致性思考
 
 
色彩
色彩作為一種兼具物理屬性與感官享受的復(fù)雜現(xiàn)象，其本質(zhì)在于光波在人體視網(wǎng)膜上的特定波長被反射或吸收后，所引發(fā)的視覺感知結(jié)果。在設(shè)計(jì)領(lǐng)域，色彩的選擇與運(yùn)用不僅是視覺藝術(shù)的展現(xiàn)，更是品牌身份與個(gè)性的直接體現(xiàn)。諸如餓了么標(biāo)志性的藍(lán)色、美團(tuán)鮮明的黃色、以及京東熱情的紅色等，這些品牌專屬色彩不僅構(gòu)成了品牌識(shí)別系統(tǒng)的重要組成部分，還通過其高度的一致性，在視覺層面上構(gòu)建起強(qiáng)烈的品牌認(rèn)知，營造出統(tǒng)一和諧的視覺體驗(yàn)。
色彩的一致性策略在品牌塑造中發(fā)揮著不可估量的作用，它能夠有效增強(qiáng)品牌的記憶度與辨識(shí)度，深化品牌形象在消費(fèi)者心中的烙印，進(jìn)而提升產(chǎn)品的市場吸引力和用戶忠誠度。同時(shí)，這種策略還促進(jìn)了設(shè)計(jì)元素間的和諧共存，包括按鈕、圖標(biāo)、字體、標(biāo)簽、背景、以及關(guān)鍵視覺元素如Banner等，均能在統(tǒng)一的色彩體系下實(shí)現(xiàn)視覺上的連貫與流暢，極大地提升了產(chǎn)品的可用性、無障礙性，以及用戶在使用過程中的整體滿意度與交互體驗(yàn)。
 
用戶體驗(yàn)一致性思考
 
 
字體
字體作為設(shè)計(jì)中不可或缺的核心要素，其獨(dú)特性在于能夠精準(zhǔn)地塑造文字的視覺形象，涵蓋形狀、尺寸、粗細(xì)、字間距等多維度特征。這些特征共同構(gòu)建了一種獨(dú)特的文字風(fēng)格，不僅承載著信息的傳遞功能，更在無形中引導(dǎo)著用戶的視覺流程，影響著信息的接收與理解深度。因此，在設(shè)計(jì)過程中，合理選擇與應(yīng)用字體顯得尤為關(guān)鍵。
 
字體類型的多樣性，如有襯線字體與無襯線字體的對比，不僅體現(xiàn)了風(fēng)格上的差異，還隱含了不同的閱讀體驗(yàn)與情感表達(dá)。字體的粗細(xì)變化（如細(xì)體、常規(guī)、粗體等）更是能夠強(qiáng)調(diào)文本的重要性層級，增強(qiáng)信息的層次感與可讀性。此外，字重的調(diào)整也是塑造視覺焦點(diǎn)、引導(dǎo)視線流動(dòng)的有效手段，對于提升設(shè)計(jì)的整體美觀度和信息傳達(dá)效率具有不可小覷的作用。
 
然而，在實(shí)際的開發(fā)與實(shí)現(xiàn)過程中，若不加節(jié)制地使用多種字體，不僅會(huì)顯著增加頁面的加載時(shí)間，影響用戶體驗(yàn)的流暢性，還可能因風(fēng)格不統(tǒng)一而導(dǎo)致頁面顯得雜亂無章，破壞整體設(shè)計(jì)的和諧感。因此，制定一套統(tǒng)一、規(guī)范的字體使用策略顯得尤為重要。這不僅有助于提升開發(fā)效率，減少后期更新迭代的復(fù)雜度，還能有效避免資源浪費(fèi)，確保設(shè)計(jì)作品在視覺上的一致性與專業(yè)性。
 
用戶體驗(yàn)一致性思考
 
 
圖標(biāo)
 
圖標(biāo)作為用戶界面設(shè)計(jì)中至關(guān)重要的元素，風(fēng)格直接影響到用戶的使用體驗(yàn)與對產(chǎn)品的整體印象。圖標(biāo)以其簡潔、直觀且富有表現(xiàn)力的特點(diǎn)，在快速傳達(dá)信息、引導(dǎo)用戶操作方面發(fā)揮著不可替代的作用。在設(shè)計(jì)中，圖標(biāo)的設(shè)計(jì)與應(yīng)用更是需要精心考量，以確保其既能夠準(zhǔn)確傳達(dá)信息，又能夠與整體設(shè)計(jì)風(fēng)格保持一致，從而營造出專業(yè)、和諧且易于使用的界面環(huán)境。
 
設(shè)計(jì)中視覺上保持統(tǒng)一包括圖標(biāo)的大小、形狀、色彩以及設(shè)計(jì)風(fēng)格等多個(gè)方面，能夠增強(qiáng)用戶的認(rèn)知連貫性，降低學(xué)習(xí)成本，提升使用效率。相反，如果圖標(biāo)風(fēng)格混雜，不僅會(huì)讓界面顯得雜亂無章，還會(huì)給用戶帶來困惑和不安，進(jìn)而影響其對產(chǎn)品專業(yè)性和安全性的信任。
用戶體驗(yàn)一致性思考
 
 
按鈕
按鈕設(shè)計(jì)應(yīng)統(tǒng)一于項(xiàng)目風(fēng)格，無論是圓形、矩形、圓角矩形還是特定形狀，保持一致性是關(guān)鍵。統(tǒng)一的按鈕樣式不僅彰顯專業(yè)性，還能增強(qiáng)用戶信任，確保體驗(yàn)連貫。過多變化的按鈕樣式會(huì)擾亂用戶界面，降低操作直觀性，甚至讓用戶誤以為自己已離開應(yīng)用環(huán)境。因此，精心設(shè)計(jì)的統(tǒng)一按鈕樣式對提升用戶體驗(yàn)至關(guān)重要。
 
排版
設(shè)計(jì)中的排版一致性對于構(gòu)建高效、用戶友好的界面至關(guān)重要。一致的排版不僅能夠讓用戶快速適應(yīng)和理解界面的整體結(jié)構(gòu)，大幅降低學(xué)習(xí)成本，還能在用戶心中激發(fā)強(qiáng)烈的歸屬感和安全感。這種熟悉感使得內(nèi)容更加易讀，用戶能夠自然地依照既定的視覺動(dòng)線流暢地瀏覽頁面，迅速定位并獲取所需信息，從而顯著提升信息獲取的效率。因此，在設(shè)計(jì)過程中，注重并維護(hù)排版的一致性，是提升用戶體驗(yàn)和界面有效性的重要策略之一。
 
 
用戶體驗(yàn)一致性思考
 
 
 
操作流程的一致性
標(biāo)準(zhǔn)化流程：確保用戶在執(zhí)行相似任務(wù)時(shí)，如購買商品、搜索信息或提交表單等，能夠遵循相同的操作流程。這有助于用戶快速適應(yīng)并高效完成任務(wù)。
邏輯清晰：操作流程的每一步都應(yīng)符合用戶的認(rèn)知習(xí)慣和行為邏輯，避免讓用戶感到困惑或不知所措。
用戶體驗(yàn)一致性思考
 
 
交互元素的一致性
按鈕和控件：確保按鈕、輸入框、下拉菜單等交互元素的樣式、位置和操作方式在整個(gè)應(yīng)用或網(wǎng)站中保持一致。例如，所有按鈕都應(yīng)具有相同的視覺風(fēng)格和觸發(fā)機(jī)制。
導(dǎo)航和菜單：導(dǎo)航欄和菜單的設(shè)計(jì)也應(yīng)保持一致，使用戶能夠輕松地在不同頁面或功能之間切換。
 
用戶體驗(yàn)一致性思考
 
 
反饋機(jī)制的一致性
操作反饋：當(dāng)用戶執(zhí)行某個(gè)操作時(shí)，應(yīng)用或網(wǎng)站應(yīng)提供一致且及時(shí)的反饋，如加載動(dòng)畫、成功提示或錯(cuò)誤消息等。這有助于用戶了解操作結(jié)果并采取相應(yīng)的行動(dòng)。
狀態(tài)提示：對于長時(shí)間運(yùn)行的操作或需要用戶等待的場景，應(yīng)提供明確的狀態(tài)提示（如進(jìn)度條），以減輕用戶的不確定感和焦慮感。
 
 
 
 
 
 
在任何維度上，一致性不應(yīng)成為設(shè)計(jì)的唯一導(dǎo)向。設(shè)計(jì)，這一融合了藝術(shù)與科學(xué)的復(fù)雜領(lǐng)域，要求我們在用戶體驗(yàn)的細(xì)膩雕琢、功能需求的精準(zhǔn)滿足、美學(xué)價(jià)值的深刻體現(xiàn)及技術(shù)可行性的嚴(yán)格考量間游走。
 
“一致性”作為設(shè)計(jì)策略，其核心使命在于優(yōu)化用戶路徑，降低認(rèn)知門檻，確保用戶在多元界面中穿梭時(shí)仍能感受到連貫與和諧。當(dāng)我們在與設(shè)計(jì)團(tuán)隊(duì)（包括工程師、產(chǎn)品經(jīng)理等）溝通時(shí)，僅僅提及“一致性”可能并不足以說明其必要性和價(jià)值。我們需要更深入地闡述為什么需要保持一致性，以及它如何具體幫助減少用戶困惑、提高用戶滿意度和忠誠度。
 
同時(shí)，我們應(yīng)清醒認(rèn)識(shí)到，“一致性”并不是萬能的。在某些情況下，為了追求極致的用戶體驗(yàn)或解決特定的設(shè)計(jì)問題，可能需要打破傳統(tǒng)的一致性規(guī)則。因此，設(shè)計(jì)師需要在保持一致性和創(chuàng)新之間找到平衡點(diǎn)，根據(jù)具體情況靈活調(diào)整設(shè)計(jì)方案。
 
實(shí)際落地執(zhí)行時(shí)，要根據(jù)產(chǎn)品定位、用戶場景，結(jié)合業(yè)務(wù)功能來確定設(shè)計(jì)方案，不能為了一致而一致。
當(dāng)我們遇到一致性問題時(shí)，還是需要從以下3個(gè)方面深入思考，做出準(zhǔn)確合理的設(shè)計(jì)決策。
用戶體驗(yàn)一致性思考
 
 
真實(shí)項(xiàng)目
真實(shí)項(xiàng)目
 
在SaaS產(chǎn)品設(shè)計(jì)中，特別是面向B/G端（企業(yè)用戶）時(shí)，滿足不同用戶角色（如普通用戶與高權(quán)限領(lǐng)導(dǎo)）的需求是至關(guān)重要的。
管理端布局設(shè)計(jì)
普通簡潔明了：為普通用戶設(shè)計(jì)的管理界面應(yīng)簡潔直觀，聚焦于日常操作，如數(shù)據(jù)查看、統(tǒng)計(jì)和下載。
功能分區(qū)：通過清晰的導(dǎo)航欄或側(cè)邊欄將功能區(qū)域劃分開，如“數(shù)據(jù)概覽”、“報(bào)表下載”、“任務(wù)管理”等，便于用戶快速定位所需功能。
操作便捷：確保常用操作（如搜索、篩選、排序）易于觸達(dá)，減少用戶點(diǎn)擊次數(shù)和頁面跳轉(zhuǎn)。
 
首頁版心定寬設(shè)計(jì)
固定寬度：為首頁設(shè)定一個(gè)合適的固定寬度（如1200px、1440px等），以保證內(nèi)容在大多數(shù)屏幕上都能保持一致的閱讀體驗(yàn)。
信息模塊化：將首頁內(nèi)容劃分為多個(gè)卡片，每個(gè)卡片承載一個(gè)獨(dú)立的信息單元（如數(shù)據(jù)報(bào)表、通知公告、項(xiàng)目進(jìn)展等）。
視覺層次：通過顏色、大小、陰影等設(shè)計(jì)元素區(qū)分卡片的重要性，引導(dǎo)用戶視線，提高信息獲取效率。
交互性：為卡片添加交互元素，如點(diǎn)擊展開、滑動(dòng)查看更多等，增加用戶參與度和頁面活躍度。
 
用戶體驗(yàn)一致性思考
 
 
位置差異性分析
根據(jù)「認(rèn)知負(fù)荷>視覺負(fù)荷>動(dòng)作負(fù)荷」理論，在頁面中我們首先要讓用戶能夠找到按鈕，然后完成操作。
相對于彈窗，頁面的空間更大，邊界感偏弱，用戶的視覺重心更容易停留在左側(cè)表單內(nèi)容區(qū)域。所以按鈕應(yīng)該緊隨搜索條件，便于用戶快速發(fā)現(xiàn)按鈕。
區(qū)域用戶已經(jīng)形成下意識(shí)操作習(xí)慣,雖然區(qū)別于規(guī)范,只能打破,遵循客戶需求
用戶體驗(yàn)一致性思考
 
 
一致性是規(guī)則
“一致性”作為規(guī)則或手段，服務(wù)于提升用戶體驗(yàn)的原則。規(guī)則與原則一致時(shí)，促進(jìn)業(yè)務(wù)共識(shí)與用戶價(jià)值；沖突時(shí)，原則優(yōu)先。用戶體驗(yàn)原則指導(dǎo)下的一致性，要超越表面控件統(tǒng)一，更在于產(chǎn)品決策與價(jià)值取向的一致。必要時(shí)，為更好的用戶體驗(yàn)，可在規(guī)則上讓步以實(shí)現(xiàn)原則統(tǒng)一。打破規(guī)則需慎重權(quán)衡，確保用戶便利足以彌補(bǔ)理解成本，需長期全局考量。規(guī)則非僵化教條，而是引導(dǎo)我們謹(jǐn)慎創(chuàng)新的框架。
 
一致性的底線
無論從哪個(gè)角度，一致性存在的必要性都是毋庸置疑的。
對于關(guān)鍵的設(shè)計(jì)元素，如專有名詞和顏色體系，保持一致性至關(guān)重要。這不僅有助于維護(hù)品牌形象，還能減少用戶的困惑。
特定設(shè)計(jì)語言在特定場景下的變體應(yīng)用，雖然可能帶來一定的視覺新鮮感或針對性優(yōu)化，但往往需要謹(jǐn)慎評估其潛在風(fēng)險(xiǎn)。一旦變體打破了整體設(shè)計(jì)的一致性，可能會(huì)破壞用戶對品牌的熟悉感和信任感，甚至引發(fā)誤解。因此，在追求設(shè)計(jì)創(chuàng)新的同時(shí)，必須確保這種創(chuàng)新是基于一致性的原則之上，以維持品牌的整體性和用戶的良好體驗(yàn)。
 
擁抱復(fù)雜性
一致性確實(shí)不應(yīng)成為設(shè)計(jì)師的避風(fēng)港或限制創(chuàng)新的枷鎖，而應(yīng)是基于對業(yè)務(wù)深刻理解和多樣化設(shè)計(jì)能力之上的價(jià)值選擇。設(shè)計(jì)師的核心任務(wù)始終是滿足用戶的多樣化需求和偏好，這需要他們細(xì)致入微地觀察、理解并解決每個(gè)用戶的獨(dú)特問題。
 
在追求一致性的同時(shí)，設(shè)計(jì)師應(yīng)保持“第一性思考”的能力，即回歸問題的本質(zhì)，從用戶需求出發(fā)進(jìn)行創(chuàng)新設(shè)計(jì)。多樣性頁面的產(chǎn)出，不僅體現(xiàn)了設(shè)計(jì)師的創(chuàng)造力和靈活性，也是提升用戶體驗(yàn)、增強(qiáng)產(chǎn)品吸引力的關(guān)鍵。
 
一致性與創(chuàng)新設(shè)計(jì)并非相互排斥，而是相輔相成的關(guān)系。真正的一致性不應(yīng)導(dǎo)致單調(diào)或拒絕創(chuàng)新，而應(yīng)是在遵循品牌或產(chǎn)品核心價(jià)值的前提下，鼓勵(lì)設(shè)計(jì)師在細(xì)節(jié)和體驗(yàn)上不斷探索和突破。當(dāng)設(shè)計(jì)師感到被既定規(guī)則束縛時(shí)，應(yīng)勇于質(zhì)疑并重新評估當(dāng)前的規(guī)范，確保所謂的“一致性”不是刻板的偽命題，而是真正符合用戶需求和品牌發(fā)展的價(jià)值導(dǎo)向。
 
因此，設(shè)計(jì)師應(yīng)時(shí)刻保持開放的心態(tài)和敏銳的洞察力，不斷探索和嘗試新的設(shè)計(jì)方法和理念，以更加靈活和創(chuàng)新的方式實(shí)現(xiàn)一致性與用戶需求的完美融合。
 
用戶體驗(yàn)一致性思考
 
 
重要的設(shè)計(jì)原則
「一致性」作為設(shè)計(jì)領(lǐng)域中的一項(xiàng)基礎(chǔ)性原則，其重要性不言而喻。它不僅為設(shè)計(jì)過程提供了穩(wěn)固的基石，還顯著促進(jìn)了開發(fā)效率與產(chǎn)品體驗(yàn)的全面升級。在設(shè)計(jì)實(shí)踐中，一致性確保了界面元素的統(tǒng)一性和連貫性，使得用戶能夠迅速熟悉并掌握產(chǎn)品的使用方式，降低了學(xué)習(xí)成本，增強(qiáng)了操作的直觀性和便捷性。
靈活變通使用
一致性原則并非一成不變的強(qiáng)制規(guī)定，而是需要根據(jù)產(chǎn)品的具體定位和市場環(huán)境進(jìn)行靈活變通的應(yīng)用。不同的產(chǎn)品可能面向不同的用戶群體，擁有獨(dú)特的品牌調(diào)性和功能需求，因此在追求一致性的同時(shí)，也需充分考慮這些因素，確保設(shè)計(jì)既符合品牌特色，又能滿足用戶的實(shí)際需求。
 
提升用戶體驗(yàn)是價(jià)值所在
一致性的真正價(jià)值在于其能夠顯著提升用戶體驗(yàn)。通過遵循用戶的認(rèn)知和習(xí)慣，設(shè)計(jì)師能夠創(chuàng)造出更加自然、流暢的操作流程，使用戶在享受產(chǎn)品功能的同時(shí)，也能感受到品牌所傳遞的舒適與和諧。因此，在追求設(shè)計(jì)一致性的過程中，我們始終應(yīng)以人為本，將用戶的體驗(yàn)和感受放在首位。建設(shè)有兼容性和長期價(jià)值的的一致性框架，在一致性中做到有用戶價(jià)值的設(shè)計(jì)，是設(shè)計(jì)師應(yīng)該不斷探索的命題。

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

設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南

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

 
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
當(dāng)你打開一個(gè)頁面，首先映入眼簾的是豐富多樣的內(nèi)容和信息。如何在有限的空間內(nèi)，既保證內(nèi)容的完整性，又讓用戶能夠輕松理解和瀏覽，這背后的奧秘就在于頁面分割。今天，我們就來一起
探討頁面分割的藝術(shù)與技巧，看看它是如何為你的設(shè)計(jì)增添魅力，提升用戶體驗(yàn)的。
 
在設(shè)計(jì)中，頁面分割不僅僅是一種技術(shù)手段，更是一種藝術(shù)表現(xiàn)。它如同一位細(xì)心的畫師，巧妙地運(yùn)用線條、色彩、空白等元素，將頁面內(nèi)容劃分為一個(gè)個(gè)清晰、有序的區(qū)域。
通過這些分割，用戶能夠更快速地找到所需信息，更輕松地理解頁面內(nèi)容，從而享受到更加愉悅的閱讀體驗(yàn)。
頁面分割的魅力在于其多樣性和靈活性。不同的頁面可以采用不同的分割方式，如線條分割、卡片分割、留白分割等，以滿足不同的設(shè)計(jì)需求和用戶習(xí)慣。同時(shí)，頁面分割也需要根據(jù)內(nèi)容的實(shí)際情況進(jìn)行合理調(diào)整，既要保證信息的完整性，又要避免過度分割帶來的混亂感。
 
在本文中，我們將一起探討頁面分割的原則、技巧和應(yīng)用實(shí)例。我們將學(xué)習(xí)如何運(yùn)用不同的分割方式來優(yōu)化頁面布局，提升用戶體驗(yàn)。同時(shí)，我們還將分享一些成功的頁面分割案例，以激發(fā)你的設(shè)計(jì)靈感，為你的界面設(shè)計(jì)注入新的活力。
 
分享目錄：
一、分割的常見樣式
二、線性分割
三、卡片分割
四、留白分割
五、總結(jié)
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
線性分割：通過使用線條來劃分頁面的不同區(qū)域，以達(dá)到組織內(nèi)容、引導(dǎo)用戶視線和提升整體美觀度的目的。這種分割方式簡單明了，能夠清晰地展現(xiàn)出頁面內(nèi)容的層次和結(jié)構(gòu)。
 
卡片分割：卡片式設(shè)計(jì)是一種流行的界面分割方法，通過將內(nèi)容劃分為獨(dú)立的卡片或區(qū)塊，使用戶能夠更清晰地理解信息。每個(gè)卡片通常包含相關(guān)的內(nèi)容，如文本、圖片或按鈕，以便用戶快速瀏覽和交互。
 
留白分割：主要通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會(huì)傾向于把彼此靠近的元素視為一組），自然地將信息進(jìn)行分組。這種留白的方式能夠?yàn)轫撁嬖黾雍粑校档鸵曈X噪音，使設(shè)計(jì)看起來更簡潔。
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
近年來，設(shè)計(jì)趨勢從“卡片式設(shè)計(jì)”轉(zhuǎn)向了“去線化設(shè)計(jì)”，即傾向于使用留白分割而非過多的線條分割，以實(shí)現(xiàn)更為簡潔清晰的界面效果。設(shè)計(jì)師在選擇分割方式時(shí)，應(yīng)優(yōu)先考慮留白分割，其次是線性分割，最后是卡片分割。這個(gè)選擇順序反映了設(shè)計(jì)界的一般原則，即在不影響信息傳達(dá)的前提下，盡可能保持設(shè)計(jì)的簡潔性。
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
線性分割的定義：
線性分割設(shè)計(jì)是一種在視覺設(shè)計(jì)中使用的技巧，它使用線條、邊框或細(xì)線等元素來劃分、區(qū)分或連接頁面上的不同內(nèi)容區(qū)域。這種設(shè)計(jì)手法主要用于提高頁面內(nèi)容的可讀性和組織性，幫助用戶更好地理解和瀏覽頁面信息。
 
線性分割設(shè)計(jì)具有以下優(yōu)勢：
 
1.劃分區(qū)域：線性分割可以將頁面劃分為不同的區(qū)域或模塊，使得每個(gè)區(qū)域的內(nèi)容更加清晰、有序。這有助于用戶快速定位和瀏覽所需的信息，提高閱讀效率。
 
2.區(qū)分內(nèi)容：線性分割可以用來區(qū)分不同類型的內(nèi)容，如文本、圖片、圖表等。通過線性分割，可以將這些內(nèi)容進(jìn)行分組或歸類，使得頁面更加整潔、有序。
 
3.引導(dǎo)視線：線性分割可以引導(dǎo)用戶的視線，幫助他們更好地理解頁面內(nèi)容。通過合理的線性分割設(shè)計(jì)，可以突出顯示重要的信息或元素，引導(dǎo)用戶關(guān)注到關(guān)鍵內(nèi)容。
 
4.增強(qiáng)層次感：線性分割可以增強(qiáng)頁面的層次感，使得頁面內(nèi)容更加豐富、有深度。通過不同樣式的線性分割，可以區(qū)分不同的信息層級，幫助用戶更好地理解頁面結(jié)構(gòu)和內(nèi)容關(guān)系。
 
使用原則：在使用分割線時(shí)，我們應(yīng)遵循一些原則，以確保其有效地幫助用戶理解頁面的組成，同時(shí)避免過度使用帶來的視覺干擾。
 
1.分割線應(yīng)當(dāng)微妙而不過于顯眼。
它們在布局中應(yīng)該容易被用戶注意到，但又不應(yīng)成為焦點(diǎn)，以免分散用戶的注意力。
 
2.分割線應(yīng)被視為次要的元素。
只有在留白等其他設(shè)計(jì)手法無法有效起到分割作用時(shí)，才考慮使用分割線。它們應(yīng)當(dāng)是布局中的輔助工具，而不是主導(dǎo)元素。
 
3.謹(jǐn)慎使用分割線。
過度使用分割線可能會(huì)導(dǎo)致頁面顯得混亂和復(fù)雜。相反，我們應(yīng)該用分割線來創(chuàng)建信息分組，而不是簡單地分割每一個(gè)條目。通過審慎而恰當(dāng)?shù)厥褂梅指罹€，我們可以有效地提升頁面的可讀性和用戶體驗(yàn)。
圖片來源于參考文章
圖片來源于參考文章
 
線性分割三種類型：
通欄分割線、內(nèi)嵌分割線和中間分割線。
 
1.通欄分割線（Full-bleed Dividers）：通欄分割線通常橫跨整個(gè)頁面寬度，用于分隔彼此完全獨(dú)立的內(nèi)容區(qū)域。這種分割線在視覺上非常顯著，能夠清晰地劃分出不同的內(nèi)容區(qū)塊，使用戶能夠迅速區(qū)分不同部分的信息。通欄分割線通常用于區(qū)分文章、產(chǎn)品列表、服務(wù)介紹等獨(dú)立的內(nèi)容區(qū)域。
 
2.內(nèi)嵌分割線（Inset Dividers）：內(nèi)嵌分割線通常位于內(nèi)容區(qū)域內(nèi)部，用于分隔有錨點(diǎn)（如頭像、圖標(biāo)等）的相關(guān)內(nèi)容。這些錨點(diǎn)可以是圖片、符號(hào)或小的圖形元素，它們與分割線一起，幫助用戶更好地理解和區(qū)分內(nèi)容。內(nèi)嵌分割線常用于列表、卡片式布局、時(shí)間線等場景中，用于展示有關(guān)聯(lián)但不同類別的信息。
 
3.中間分割線（Middle Dividers）：中間分割線位于兩個(gè)內(nèi)容區(qū)域之間，用于分隔無錨點(diǎn)的相關(guān)內(nèi)容。這種分割線通常比通欄分割線更細(xì)，更注重于在視覺上劃分空間，而不是強(qiáng)調(diào)內(nèi)容的獨(dú)立性。中間分割線常用于文本段落之間、列表項(xiàng)之間或不同功能區(qū)域之間，以提供清晰的結(jié)構(gòu)和層次。
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
在大多數(shù)情況下，當(dāng)信息層級較為簡單（即信息層級≤2）時(shí)，使用分割線進(jìn)行信息分割是一種有效的方法。然而，實(shí)際上，如果留白間距足夠大，我們也可以使用留白來達(dá)到類似的效果。通過增大留白間距，我們可以創(chuàng)造出清晰的視覺區(qū)域劃分，使得信息之間的界限更加明確。
 
與分割線相比，足夠大的留白間距可以避免多余的線性元素干擾，讓整體視覺效果更加清爽。這樣的設(shè)計(jì)選擇有助于提升用戶的閱讀體驗(yàn)，使用戶更加輕松地理解和消化信息。
 
因此，在信息層級較簡單的情況下，我們可以靈活地選擇使用分割線或留白來進(jìn)行信息分割。通過調(diào)整留白間距，我們可以達(dá)到與分割線相似的效果，同時(shí)保持整體設(shè)計(jì)的簡潔和清晰。
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
為了提升屏效，我們希望在一屏內(nèi)展示盡可能多的信息。在這種情況下，分割線的設(shè)計(jì)顯得尤為重要，因?yàn)樗鼈兡軌蛴行У貏澐中畔^(qū)域，使內(nèi)容更加清晰、易于理解。
 
通過使用分割線，我們可以將較多的信息條理化，使得用戶能夠更快速地找到所需的內(nèi)容。與沒有分割線的布局相比，使用分割線能夠顯著提高信息的可讀性和可理解性。
 
在相同的信息布局下，分割線能夠?qū)⑿畔^(qū)域明確地劃分開來，防止信息之間產(chǎn)生混淆或交叉。這種劃分不僅使得每個(gè)信息塊更加獨(dú)立，而且提高了信息之間的對比度，使用戶能夠更輕松地識(shí)別和區(qū)分不同的信息。
 
因此，當(dāng)我們的目標(biāo)是提高屏效并展示大量信息時(shí)，分割線的設(shè)計(jì)是一個(gè)關(guān)鍵要素。通過合理地使用分割線，我們可以確保信息布局更加清晰、有序，從而提高用戶的閱讀效率和滿意度。（如下圖）
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
線性分割在移動(dòng)端頁面設(shè)計(jì)中的應(yīng)用場景廣泛，尤其是在需要清晰劃分信息模塊時(shí)。如微信的聊天列表中，線性分割被用來區(qū)分不同的消息條目。每條消息之間通過一條細(xì)線進(jìn)行分隔，使得每條消息清晰可辨，方便用戶快速瀏覽和定位到特定的消息。
 
線性分割還常用在各類App的信息提示中，如果有多條消息需要展示，線性分割可以用來
區(qū)分不同的消息組。例如招商銀行APP中，當(dāng)用戶收到多條未讀消息時(shí)，每條消息之間可以通過線性分割進(jìn)行區(qū)分，使得每條消息清晰可辨，方便用戶逐一查看和處理。
 
在APP需要用戶填寫信息和設(shè)置的表單頁面中，線性分割可以用來區(qū)分不同的輸入字段或信息區(qū)域。這有助于用戶更清晰地了解需要填寫的信息，提高表單的填寫效率和準(zhǔn)確性，比如站酷的設(shè)置頁面（如下圖）
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
卡片分割的定義：卡片分割設(shè)計(jì)主要通過將內(nèi)容或功能區(qū)域劃分成獨(dú)立的“卡片”來進(jìn)行信息展示和組織。每個(gè)卡片通常包含相關(guān)的內(nèi)容或功能，并且與其他卡片通過一定的間距或線性分隔進(jìn)行區(qū)分。
 
卡片分割設(shè)計(jì)具有以下優(yōu)勢：
 
1.內(nèi)容封裝：卡片分割設(shè)計(jì)將相關(guān)內(nèi)容或功能封裝在一個(gè)獨(dú)立的卡片內(nèi)，使得每個(gè)卡片成為一個(gè)獨(dú)立的信息單元。這有助于保持頁面內(nèi)容的清晰和整潔，方便用戶瀏覽和理解。
 
2.明確邊界：每個(gè)卡片通常具有明確的邊界，通過邊框、陰影或間距等元素來區(qū)分不同的卡片。這種邊界的存在使得每個(gè)卡片在視覺上相對獨(dú)立，方便用戶進(jìn)行區(qū)分和識(shí)別。
 
3.靈活布局：卡片分割設(shè)計(jì)具有很高的靈活性，可以根據(jù)需要自由調(diào)整卡片的大小、位置和排列方式。這使得設(shè)計(jì)師可以根據(jù)不同的設(shè)計(jì)需求和用戶習(xí)慣來靈活調(diào)整卡片的布局，以達(dá)到最佳的視覺效果。
 
4.強(qiáng)調(diào)重點(diǎn)：通過不同的視覺處理手法，如改變卡片的顏色、大小或樣式等，可以突出顯示重要的卡片或內(nèi)容。這有助于吸引用戶的注意力，引導(dǎo)他們關(guān)注到關(guān)鍵信息。
 
卡片的基本構(gòu)成：卡片是一個(gè)獨(dú)立的主題性容器，旨在將內(nèi)容和操作組合在一起。它可以包含多種元素，如容器、縮略圖、標(biāo)題、副標(biāo)題、富媒體、輔助文字、按鈕和圖標(biāo)按鈕等。這些元素并非必須全部存在，而是根據(jù)具體需求進(jìn)行選擇和配置。無論選擇哪些元素，它們都會(huì)以易于掃描和操作的形式整齊地放置在卡片上。這種設(shè)計(jì)使得卡片成為一個(gè)靈活且高效的信息展示工具，適用于各種場景和應(yīng)用。
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
卡片分割常見的類型：卡片分割可分為、通欄卡片和非通欄卡片
 
1、通欄卡片：其特點(diǎn)是卡片占據(jù)整個(gè)頁面寬度，沒有左右邊距。通欄卡片的設(shè)計(jì)可以提高布局的靈活性，使得頁面內(nèi)容更加寬敞和大氣。同時(shí)，通欄卡片也可以更好地突出展示單條內(nèi)容，引導(dǎo)用戶的視線，提高閱讀效率。
 
2.非通欄卡片：與通欄卡片相比，它會(huì)在卡片的左右兩側(cè)留有邊距，不完全占據(jù)整個(gè)頁面寬度。這種設(shè)計(jì)方式可以使得頁面內(nèi)容更加有層次感和組織性，同時(shí)也有利于突出顯示某些關(guān)鍵信息。
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
通欄卡片
通欄卡片相較于非通欄卡片，其設(shè)計(jì)特點(diǎn)在于去除了左右兩端的留白，僅保留上下邊距，從而提供了更大的展示空間。這種設(shè)計(jì)使得卡片內(nèi)的內(nèi)容能夠占據(jù)整個(gè)頁面寬度，進(jìn)一步增強(qiáng)了內(nèi)容的視覺沖擊力。在通欄卡片中，卡片與背景的關(guān)系通常通過一條背景色塊來抽象表現(xiàn)，這種簡潔的處理方式避免了過多的視覺元素干擾，使得頁面整體看起來更加整潔和統(tǒng)一。
 
通欄卡片可以被視為在極簡列表式和傳統(tǒng)卡片式設(shè)計(jì)之間的一種折中選擇。它繼承了卡片式的分層方式和強(qiáng)交互性，使得用戶能夠輕松地瀏覽和交互頁面內(nèi)容。如下圖微博“關(guān)注”、微信“發(fā)現(xiàn)”頁面。
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
非通欄卡片
非通欄卡片通常采用帶圓角的設(shè)計(jì)形式，這種設(shè)計(jì)不僅賦予卡片一種柔和、圓潤的視覺效果，還增強(qiáng)了用戶的視覺舒適度。結(jié)合陰影效果以及四周的邊距，非通欄卡片巧妙地形成頁面留白，使得整體設(shè)計(jì)層次感更加豐富。
 
通過巧妙的投影設(shè)計(jì)以及前后顏色的精準(zhǔn)設(shè)定，非通欄卡片成功地讓內(nèi)容與背景之間產(chǎn)生視覺空間感，進(jìn)一步強(qiáng)化了內(nèi)容的立體感和層次感。這種設(shè)計(jì)技巧不僅提升了卡片的視覺吸引力，還使得用戶在瀏覽頁面時(shí)能夠更加輕松地區(qū)分和聚焦關(guān)鍵信息。
 
在頁面設(shè)計(jì)中，非通欄卡片的應(yīng)用范圍十分廣泛。無論是用于展示文章、產(chǎn)品、圖片還是其他類型的內(nèi)容，非通欄卡片都能夠通過其獨(dú)特的視覺效果和設(shè)計(jì)元素，為用戶帶來更加舒適、美觀的視覺體驗(yàn)。同時(shí)，非通欄卡片還具有良好的適應(yīng)性和靈活性，可以根據(jù)不同的設(shè)計(jì)需求和用戶習(xí)慣進(jìn)行定制和調(diào)整，滿足不同場景下的應(yīng)用需求。如下圖夸克“夸克日報(bào)”、APP Store“首頁”
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
選擇使用通欄分割線還是卡片分割，主要取決于你的設(shè)計(jì)目標(biāo)和內(nèi)容需求。以下是三個(gè)參考建議，幫助你做出更好的選擇：
 
1.當(dāng)內(nèi)容已有自然分割線時(shí)：如果你的主題內(nèi)容本身就已經(jīng)有明確的分割線，比如列表項(xiàng)、段落分隔等，那么采用非通欄分割會(huì)是一個(gè)好選擇。卡片可以清晰地界定每個(gè)內(nèi)容塊，使主題信息層次更加分明，提高用戶的閱讀效率。
 
2.當(dāng)內(nèi)容類型多樣且占據(jù)較大空間時(shí)：如果單個(gè)主題內(nèi)部包含了多種類型的內(nèi)容，如文字、圖片、視頻等，且這些內(nèi)容在垂直方向上占據(jù)了較大的空間（例如，內(nèi)容長度超過屏幕高度的一半），使用非通欄分割會(huì)更加合適?？ㄆ軌蛴行У厝Χ▋?nèi)容范圍，為用戶提供一個(gè)明確的視覺邊界，幫助他們更好地理解和消化信息。
 
3.當(dāng)需要增強(qiáng)橫向空間感時(shí)：如果你希望擴(kuò)展頁面的橫向空間，或者暗示用戶可以橫向滑動(dòng)頁面查看更多內(nèi)容，那么非通欄卡片會(huì)是更好的選擇。非通欄卡片的設(shè)計(jì)能夠利用橫向內(nèi)容連續(xù)性原則，幫助用戶建立頁面可以橫向滑動(dòng)的意識(shí)，從而提升頁面的互動(dòng)性和用戶體驗(yàn)。如下圖知乎“發(fā)現(xiàn)”、站酷“推薦”。
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
卡片分割更適合圖文混排
卡片分割設(shè)計(jì)以其獨(dú)特的布局方式，成為圖文混排中的理想選擇。它能夠巧妙地將不同大小、媒介的內(nèi)容統(tǒng)一呈現(xiàn)在一個(gè)界面中，實(shí)現(xiàn)了內(nèi)容的多樣性與統(tǒng)一性的結(jié)合。這種設(shè)計(jì)不僅讓單屏區(qū)域能夠顯示更多內(nèi)容，還通過合理的空間劃分，確保了文字和圖片之間的和諧共存，既維持了視覺的一致性，又巧妙地平衡了文字和圖片的視覺強(qiáng)度。因此，在需要同時(shí)呈現(xiàn)多種內(nèi)容和媒介的場景中，卡片分割無疑是一種高效且美觀的解決方案。如下圖知乎“想法”、站酷“首頁”
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
留白分割的定義：留白分割是目前設(shè)計(jì)的主流趨勢，越來越多的產(chǎn)品在使用留白分割設(shè)計(jì)。留白分割主要通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會(huì)傾向于把彼此靠近的元素視為一組），將信息進(jìn)行自然的視覺分組。
 
留白分割具有以下優(yōu)勢：
 
1.突出重點(diǎn)信息：通過增加間距，可以將關(guān)鍵信息與其他內(nèi)容區(qū)分開來，使用戶更容易注意到。
 
2.提高可讀性：適當(dāng)?shù)牧舭卓梢允刮淖只驁D形元素之間的界限更清晰，減少視覺干擾，從而提高用戶的閱讀效率。
 
3.增強(qiáng)設(shè)計(jì)感：留白可以為設(shè)計(jì)增加呼吸感，避免元素過于擁擠，使整體布局更加和諧、美觀。
 
當(dāng)元素之間的間距保持均勻時(shí)，整個(gè)視覺呈現(xiàn)會(huì)顯得平衡且協(xié)調(diào)，大腦默認(rèn)為一個(gè)整體。然而，一旦元素的橫向和縱向間距發(fā)生變化，我們的大腦會(huì)基于接近性法則，本能地將距離較近的元素視為一個(gè)整體或群組，這就是留白分割。（如下圖）
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
留白分割在
有規(guī)律且卡片樣式較多的頁面中表現(xiàn)尤為突出，在有大量卡片樣式的頁面中，每個(gè)卡片通常都包含一定的信息。通過留白分割，可以清晰地劃分每個(gè)卡片的信息區(qū)域，使用戶更容易區(qū)分和閱讀每個(gè)卡片的內(nèi)容，增加呼吸感，避免元素過于擁擠，從而提高整體的可讀性。例如下圖中主流的音樂類App
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
相反，如果在沒有規(guī)律且頁面內(nèi)容較多的情況使用留白分割，則會(huì)使頁面雜亂無章。比如下圖咸魚的“廣場”界面feed流中，圖片從1～9張都有的情況下，使用留白分割，頁面就會(huì)變得雜亂，影響視覺效果。而脈脈則采用了卡片式分割樣式，頁面模塊則相對清晰很多。
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南
 
 
在我們界面設(shè)計(jì)中，我們應(yīng)充分考慮信息條目的復(fù)雜度。當(dāng)信息較為簡單時(shí)，利用留白分割，能夠創(chuàng)造出清爽且不受干擾的視覺體驗(yàn)。但隨著信息復(fù)雜度的增加，留白分割可能不足以清晰地展現(xiàn)信息層次，此時(shí)，引入線性分割是一個(gè)有效策略，它能提升屏幕的利用效率，使信息條理更加清晰。
 
當(dāng)信息復(fù)雜度進(jìn)一步升級，例如已經(jīng)運(yùn)用了線性分割或涉及更多操作時(shí)，我們需要進(jìn)一步強(qiáng)化信息條目之間的邊界感。這時(shí)，卡片分割是一個(gè)理想的選擇，它不僅能增強(qiáng)信息的視覺層次，還能提升條目的可操作性。
 
重要的是，選擇信息分割方式時(shí)，我們要明確：分割本身不是目的，而是為了構(gòu)建清晰的版面邏輯
，通過悅目的信息秩序來更好地突出內(nèi)容，實(shí)現(xiàn)最佳的信息傳達(dá)效果。因此，在決策時(shí)，除了考慮上述細(xì)節(jié)因素，還需全面評估整體版面效果和信息傳達(dá)效率。感謝閱讀，希望對您有用。
設(shè)計(jì)方法論 I 超全面的頁面分割設(shè)計(jì)指南

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

蘭亭妙微(m.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ì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

評論(0) 瀏覽(50)

從碎片到系統(tǒng)：設(shè)計(jì)師必備的知識(shí)庫搭建指南

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

瓷片區(qū)是我們設(shè)計(jì)師在平時(shí)的APP設(shè)計(jì)中經(jīng)常遇到的設(shè)計(jì)需求，雖然只是界面中一塊較小的區(qū)域，設(shè)計(jì)看似簡單，但它涵蓋了用戶研究、設(shè)計(jì)心理、UI設(shè)計(jì)等多個(gè)設(shè)計(jì)知識(shí)點(diǎn)。瓷片區(qū)對于產(chǎn)品的推廣、品牌的傳播等也具有著重要的作用。我通過工作中的一些設(shè)計(jì)心得進(jìn)行總結(jié)沉淀形成此篇設(shè)計(jì)指南，從多個(gè)維度探討剖析瓷片區(qū)的設(shè)計(jì)方法，希望能夠協(xié)助設(shè)計(jì)師更好的規(guī)劃設(shè)計(jì)產(chǎn)品，增強(qiáng)用戶的滿意度和粘性，為用戶帶來更為舒適流暢的實(shí)用體驗(yàn)。文章若有不妥之處，還望共同交流指正。
 
前言
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
此篇文章通過講解關(guān)于瓷片區(qū)的一些認(rèn)知以及設(shè)計(jì)手法的設(shè)計(jì)指南，來幫助大家更好的理解瓷片區(qū)設(shè)計(jì)的重要性和應(yīng)用方法。作為產(chǎn)品設(shè)計(jì)過程中的考慮因素和規(guī)則不是一成不變的，希望在未來的設(shè)計(jì)中能夠有更多的方法和技巧指引設(shè)計(jì)師們完成更好更優(yōu)秀的設(shè)計(jì)作品。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
瓷片區(qū)是APP應(yīng)用設(shè)計(jì)中經(jīng)常出現(xiàn)的一款引導(dǎo)型組件模塊，主要在首頁主推內(nèi)容區(qū)進(jìn)行展示，和Banner區(qū)、金剛區(qū)并行三大運(yùn)營板塊，其權(quán)重較Banner區(qū)和金剛區(qū)略低，一般放在兩者之下。瓷片區(qū)從外觀上看就像是一塊塊瓷片一樣組合“貼”在頁面中，構(gòu)成一組排列在一起的運(yùn)營廣告位，故統(tǒng)稱為“瓷片區(qū)”。例如京東商城、美團(tuán)、攜程服務(wù)、個(gè)人中心等產(chǎn)品都含有瓷片區(qū)。
瓷片區(qū)可以在一個(gè)頁面區(qū)域內(nèi)劃分出不同的組合，且每個(gè)區(qū)域內(nèi)會(huì)包含產(chǎn)品主體視覺元素（圖片）、標(biāo)題、介紹文案、標(biāo)簽和背景等信息。瓷片區(qū)和banner作用較相似，但相較Banner區(qū)和金剛區(qū)使用更加靈活，應(yīng)用場景較多。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
瓷片區(qū)本質(zhì)上就是運(yùn)營內(nèi)容區(qū)，它更接近于一個(gè)功能模塊的外部固定廣告位。它的展示內(nèi)容雖然會(huì)隨著時(shí)間場景變化，但是代表的功能模塊是保持不變的，每個(gè)瓷片就是這個(gè)功能模塊的窗口，引導(dǎo)用戶進(jìn)入對應(yīng)功能模塊中。
瓷片區(qū)不僅較多在電商場景應(yīng)用中，還可能出現(xiàn)在其他所有應(yīng)用類型中。例如旅游、金融、娛樂生活等多類產(chǎn)品，但在工具類產(chǎn)品中卻不太適用。
1.金融類
金融產(chǎn)品如銀行應(yīng)用、投資平臺(tái)等，往往包含復(fù)雜的服務(wù)和功能。此類APP中的瓷片區(qū)可用于展示金融產(chǎn)品、投資理財(cái)建議等。通過專業(yè)的圖表、數(shù)據(jù)和解析，運(yùn)用圖形化的方式簡潔明了地傳達(dá)信息，幫助用戶幫助用戶快速理解產(chǎn)品特點(diǎn)，更好地了解市場動(dòng)態(tài)，從而做出更明智的投資決策。
2.
生活服務(wù)類
在生活服務(wù)類APP中，瓷片區(qū)可以展示各類服務(wù)入口，如美食、旅游、休閑娛樂等。通過直觀的布局、明確的分類以及醒目的圖片，吸引用戶進(jìn)行探索和預(yù)訂，幫助用戶快速找到所需服務(wù)，提升用戶體驗(yàn)。同時(shí)根據(jù)用戶的瀏覽記錄和購買歷史，推薦相關(guān)的商品或服務(wù)?；蛘吒鶕?jù)用戶的地理位置和時(shí)間信息，推薦附近的餐廳、景點(diǎn)等，通過個(gè)性化的推薦方式能夠提升用戶的滿意度和粘性。
3.新聞資訊類
新聞資訊類APP中的瓷片區(qū)可用于展示熱門新聞、重要事件或?qū)ｎ}報(bào)道。通過及時(shí)更新內(nèi)容，瓷片區(qū)可以幫助用戶快速獲取最新信息，同時(shí)提高用戶對APP的依賴度和使用頻率。
4.虛擬類
對于軟件、游戲或數(shù)字內(nèi)容等虛擬產(chǎn)品，瓷片區(qū)能夠通過創(chuàng)意插畫或圖形，增加產(chǎn)品的調(diào)性和趣味性，提升用戶體驗(yàn)。
5.設(shè)計(jì)類
設(shè)計(jì)相關(guān)的應(yīng)用或平臺(tái)使用瓷片區(qū)也可以展示設(shè)計(jì)作品、設(shè)計(jì)理念或者設(shè)計(jì)工具等，通過視覺藝術(shù)吸引目標(biāo)用戶群體。
6.電商或商城類
在電商類APP中，瓷片區(qū)常被用于展示熱門商品、促銷活動(dòng)等，通過精美的高質(zhì)量產(chǎn)品圖片展示和吸引人的文案，直接影響用戶的點(diǎn)擊率和購買意愿，從而促成交易。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
瓷片區(qū)類似于
一種產(chǎn)品服務(wù)展示，是主要負(fù)責(zé)流量導(dǎo)流功能，吸引用戶注意力，幫助業(yè)務(wù)推廣產(chǎn)品。瓷片區(qū)一般都位于用戶最容易點(diǎn)擊的區(qū)域，方便引導(dǎo)用戶點(diǎn)擊進(jìn)入，使用戶更容易尋找自己所需產(chǎn)品。在現(xiàn)如今的產(chǎn)品設(shè)計(jì)中，瓷片區(qū)具有著十分重要的作用和意義。
1.流量引導(dǎo)與轉(zhuǎn)化
瓷片區(qū)是APP設(shè)計(jì)中不可或缺的組件，它是流量的入口和轉(zhuǎn)化點(diǎn)。通過精心設(shè)計(jì)的瓷片區(qū)，可以有效地吸引用戶的注意力，引導(dǎo)他們點(diǎn)擊并深入了解相關(guān)的內(nèi)容或功能。這有助于提升用戶的參與度，同時(shí)增加APP內(nèi)特定內(nèi)容或服務(wù)的曝光率，從而促進(jìn)流量的轉(zhuǎn)化。
2.引導(dǎo)用戶注意力
瓷片區(qū)通過展示商品圖、代言人等視覺元素，有效吸引用戶的注意力，起到引導(dǎo)用戶點(diǎn)擊和進(jìn)一步探索的作用。
3.個(gè)性化推薦與用戶體驗(yàn)
瓷片區(qū)通常也具備個(gè)性化推薦的功能，可以根據(jù)用戶的興趣和行為習(xí)慣，展示符合他們需求的內(nèi)容。這種個(gè)性化的推薦方式不僅可以提高用戶的滿意度，還能增強(qiáng)用戶對APP應(yīng)用的黏性。同時(shí)，通過優(yōu)化瓷片區(qū)的交互設(shè)計(jì)和視覺呈現(xiàn)，可以提升用戶的使用體驗(yàn)，使其更加便捷、舒適地瀏覽和選擇內(nèi)容。
4.提升轉(zhuǎn)化率
由于瓷片區(qū)能夠集中展示多個(gè)促銷信息或功能模塊，它通常具有較高的轉(zhuǎn)化率，這對于提升用戶的購買行為或參與度是非常有利的。
5.增加產(chǎn)品留存率
良好的瓷片區(qū)設(shè)計(jì)能夠提升用戶的使用體驗(yàn)，從而提高整個(gè)產(chǎn)品的留存率。
6.業(yè)務(wù)推廣與品牌展示
瓷片區(qū)是進(jìn)行業(yè)務(wù)推廣和品牌展示的重要場所。設(shè)計(jì)瓷片區(qū)往往會(huì)考慮到美觀性和藝術(shù)性，這有助于提升產(chǎn)品的整體視覺效果，增強(qiáng)用戶對品牌的良好印象。通過出色的視覺展示核心產(chǎn)品或服務(wù)，幫助企業(yè)有效地傳達(dá)品牌形象和價(jià)值，吸引潛在用戶的關(guān)注。同時(shí)，結(jié)合特定的營銷活動(dòng)或促銷策略，瓷片區(qū)還可以提升用戶的購買意愿，促進(jìn)業(yè)務(wù)的發(fā)展。
7.數(shù)據(jù)收集與優(yōu)化
瓷片區(qū)的設(shè)計(jì)和實(shí)施還涉及到大量的數(shù)據(jù)收集和分析工作。通過對用戶點(diǎn)擊、瀏覽等行為的追蹤和分析，可以了解用戶的偏好和需求，為后續(xù)的優(yōu)化工作提供數(shù)據(jù)支持。這有助于APP不斷改進(jìn)和完善瓷片區(qū)的功能和表現(xiàn)，提升整體的用戶體驗(yàn)和效果。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
在眾多產(chǎn)品中，通過瓷片區(qū)的設(shè)計(jì)能增加對商品、功能的曝光，使用戶群更愿意去購買或了解感興趣的商品、功能。設(shè)計(jì)師根據(jù)瓷片區(qū)導(dǎo)流入口-落地頁-轉(zhuǎn)化率設(shè)計(jì)，通過整個(gè)流程中收集數(shù)據(jù)，提升優(yōu)化設(shè)計(jì)體驗(yàn)，實(shí)現(xiàn)設(shè)計(jì)價(jià)值。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
瓷片區(qū)是在一個(gè)APP中將一塊矩形區(qū)域內(nèi)劃分出不同的矩形組合，每個(gè)二級矩形內(nèi)一般會(huì)包含標(biāo)題、介紹文字、主體視覺元素、標(biāo)簽等信息，通過擺放推廣相關(guān)的內(nèi)容吸引用戶點(diǎn)擊進(jìn)入。
1.瓷片區(qū)是具有營銷性的功能區(qū)域
瓷片區(qū)在設(shè)計(jì)層面上是具體的運(yùn)營模塊，而不是一種單純的設(shè)計(jì)形式。瓷片區(qū)是對于存在的產(chǎn)品進(jìn)行流量擴(kuò)充，是提高產(chǎn)品點(diǎn)擊率，是產(chǎn)品存在后方便調(diào)整流量使用。下圖中遮照區(qū)域是產(chǎn)品的核心功能區(qū)，不是簡單的營銷入口，不能被刪除，否則會(huì)影響用戶使用。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
2.瓷片區(qū)是靜態(tài)固定的區(qū)域模塊
APP軟件中常出現(xiàn)功能列表頁，它是后臺(tái)獲取數(shù)據(jù)的入口，是一種整齊排列，一層層疊加的片區(qū)，可以以一個(gè)單獨(dú)模塊的形式出現(xiàn)，不是像瓷片區(qū)類似貼瓷磚組合呈現(xiàn)。在沒有產(chǎn)品展示的情況下瓷片區(qū)可以顯示空狀態(tài)，區(qū)域整體拼接結(jié)構(gòu)不變，以靜態(tài)固定狀態(tài)顯示。下圖中頁面本身為功能列表，模塊性質(zhì)本身不屬于營銷性質(zhì)。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
3.瓷片區(qū)不是金剛區(qū)
瓷片區(qū)不是設(shè)計(jì)形式，它的拼接表現(xiàn)形式不是只限定于瓷片區(qū)可以用，在任何其他位置和模塊都可以采用這種樣式進(jìn)行設(shè)計(jì)。瓷片區(qū)的功能權(quán)重較金剛區(qū)略低，金剛區(qū)較多的為產(chǎn)品核心功能入口，而瓷片區(qū)多為運(yùn)營活動(dòng)的營銷導(dǎo)流入口。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
4.瓷片區(qū)不是快速入口
我們經(jīng)常會(huì)看到一些快速入口會(huì)像瓷片區(qū)一樣做成卡片拼貼的樣式，但不管樣式如何改變，瓷片區(qū)和快速入口在內(nèi)容承載上有著本質(zhì)的區(qū)別。
瓷片區(qū)有較強(qiáng)的誘導(dǎo)性，通過展示的信息元素、圖片，如商品圖片、產(chǎn)品代言人，來
誘發(fā)用戶關(guān)注并點(diǎn)擊，在刪除后不會(huì)影響產(chǎn)品的正常使用?？焖偃肟谒饕獞?yīng)對的是
用戶的主動(dòng)行為，通過把功能入口密集的羅列出來方便用戶進(jìn)行查找和點(diǎn)擊。它主要以展示主題入口相關(guān)圖形為主，可以是圖標(biāo)也可以是圖片、圖形 ，如果刪除會(huì)影響產(chǎn)品使用。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
在瓷片區(qū)設(shè)計(jì)中，一般常見的類型分為3種：實(shí)物照片類、插畫類、淘寶電商類
1.實(shí)物照片類
優(yōu)點(diǎn)：識(shí)別度高，不需要明確的文案標(biāo)注，圖片代入感強(qiáng)，帶有圖片本身屬性的名稱和樣貌、可復(fù)用性強(qiáng)，設(shè)計(jì)效率較高。
缺點(diǎn)：對圖片素材要求高，圖片顯示有細(xì)節(jié)。
場景：對實(shí)物圖需求較大的應(yīng)用產(chǎn)品類型，如外賣、家居、服裝、旅游等產(chǎn)品使用較多。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
2.插畫類
優(yōu)點(diǎn)：可高度描述瓷片區(qū)的運(yùn)營意義，精美的插畫有助于提升細(xì)膩性，產(chǎn)品的細(xì)節(jié)品質(zhì)和趣味，插畫本身色彩明度低飽和度高，圖形表現(xiàn)活躍，風(fēng)格可控。
缺點(diǎn)：偏抽象的產(chǎn)品，沒有合適的實(shí)圖可替代，此類產(chǎn)品多以插畫的形式去表現(xiàn)。矢量插畫類頁面對周圍環(huán)境，所表現(xiàn)的內(nèi)容需要進(jìn)行一對一繪制，需要高度的概括主題的圖形。由于針對屬性比較強(qiáng)，所以難以復(fù)用。同時(shí)圖形構(gòu)圖繪制時(shí)間較長，時(shí)間成本較高，繪制時(shí)需要特別注意對關(guān)鍵信息的提煉以及識(shí)別度。
場景：對設(shè)計(jì)風(fēng)格有明顯要求，如金融、理財(cái)、教育、生活等產(chǎn)品。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
3.淘寶電商類
優(yōu)點(diǎn)：根據(jù)用戶反饋數(shù)據(jù)提供高頻輸送內(nèi)容，與瀏覽數(shù)據(jù)時(shí)時(shí)對應(yīng)，符合用戶心智，轉(zhuǎn)化率更高。
缺點(diǎn)：通過大數(shù)據(jù)真實(shí)反饋內(nèi)容推動(dòng)產(chǎn)品營銷，每個(gè)產(chǎn)品單獨(dú)以個(gè)性化形式展示，其他商家產(chǎn)品難以復(fù)制，具有技術(shù)實(shí)現(xiàn)難度。
場景：對設(shè)計(jì)千變?nèi)f化，定制多樣，常用產(chǎn)品為電商類等。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
在進(jìn)行瓷片區(qū)設(shè)計(jì)時(shí)，我們往往需要投入更多的精力進(jìn)行細(xì)致化設(shè)計(jì)。而瓷片區(qū)究竟是由哪些元素組成呢？
背景、圖片、文字是瓷片區(qū)主要構(gòu)成元素，其中也可以運(yùn)用插畫、圖標(biāo)、標(biāo)簽、裝飾等進(jìn)行搭配使用，作為設(shè)計(jì)延展元素。背景、圖片、文字在瓷片區(qū)一般必須出現(xiàn)，他們是對產(chǎn)品展現(xiàn)、描述或?qū)I銷目標(biāo)表達(dá)的關(guān)鍵因素，插畫、圖標(biāo)、標(biāo)簽、裝飾等可根據(jù)設(shè)計(jì)風(fēng)格、飽滿度、產(chǎn)品需求上加以使用，豐富視覺，突出特殊標(biāo)識(shí)。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
瓷片區(qū)是一個(gè)需要視覺比較突出的組件，擁有較強(qiáng)的視覺感才能起到引導(dǎo)用戶點(diǎn)擊的效果。如何設(shè)計(jì)好瓷片區(qū)，從了解瓷片區(qū)各個(gè)元素設(shè)計(jì)開始。
1.框架布局
要了解瓷片區(qū)的設(shè)計(jì)方法，要先了解瓷片區(qū)的布局。在整個(gè)產(chǎn)品組件區(qū)域內(nèi)，需要有
效分配空間給不同的瓷片。首先在前期設(shè)計(jì)中，要優(yōu)先確定瓷片區(qū)框架的四周內(nèi)邊距，然后再根據(jù)要放置的瓷片數(shù)量和重要性進(jìn)行合理分配，一般可將模塊拆分出 2*2、3*2、4*2、4*1的基本網(wǎng)格系統(tǒng)。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
如果各個(gè)模塊的重要性不同，可以將多個(gè)小瓷片按照縱向或橫向排列合并為一個(gè)大瓷片，或?qū)⒋蟠善鸱殖啥鄠€(gè)小瓷片，以瓷片區(qū)域的大小來形成視覺權(quán)重的區(qū)分。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
布局的結(jié)構(gòu)的劃分是整個(gè)瓷片區(qū)設(shè)計(jì)的主體，除了以上常用的最基本構(gòu)圖方法外，還有很多不同的瓷片分布方式，要通過不斷的積累實(shí)驗(yàn)發(fā)揮自身創(chuàng)新能力，設(shè)計(jì)出更豐富的瓷片區(qū)展示形式。
2.元素排版
單個(gè)瓷片區(qū)內(nèi)的元素一般由背景、文字、圖片/圖標(biāo)/標(biāo)簽/裝飾構(gòu)成。常見的排版方式一般有左右排版、上下排版、對角線排版、Z字型排版這四種通用的排版形式。
（1）左右排版
一般在配圖為圖片、圖標(biāo)時(shí)適用，一般一行顯示一塊或兩塊瓷片。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
（2）上下排版
采用上文下圖的形式，一般在界面的功能入口較多時(shí)適用，一般一行顯示不少于3塊瓷片。這種元素排版，在營銷型展示上一般為上圖下文，偏功能型的展示則為上文下圖。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
（3）對角線排版
文字和圖片呈對角線布局，一般一行顯示兩到三塊瓷片，此種布局可顯示較多文字信息。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
（4）Z字型排版
文字、圖片和標(biāo)簽成Z字型排布，文字可跨度到圖片區(qū)域，一般一行顯示兩到三片瓷片，此布局也可顯示較多文字。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
根據(jù)業(yè)務(wù)需求，在不同場合可以選擇一種以上布局排版組合使用，使得版面更加豐富，排版上也能夠有所變化，突出優(yōu)先級，增加設(shè)計(jì)美感，做出更符合產(chǎn)品需求的設(shè)計(jì)效果。
3.文字使用
文字部分是瓷片區(qū)重要的組成內(nèi)容，應(yīng)該簡明清楚，準(zhǔn)確傳達(dá)核心信息。文字與圖片的合理擺放能夠使得信息層次清晰易讀。
（1）文字的大小
文字是瓷片區(qū)重要的組成部分，一般從文字尺寸上可分為標(biāo)題、副文本兩種大小，副標(biāo)題、標(biāo)簽、價(jià)格可統(tǒng)稱為副文本，他們的尺寸基本一致的。由于受瓷片區(qū)內(nèi)文本量尺寸限制，可選擇的文字大小范圍較小，所以一般會(huì)定義兩三種規(guī)格的字段使用。在APP端主標(biāo)題文字字號(hào)建議在30-34px，副文本文字建議在24-26px，而其他說明性副文本文字不能小于20px。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
（2）文字的位置
在瓷片區(qū)內(nèi)，文字放置的位置在左側(cè)、上側(cè)和左上側(cè)，如果根據(jù)視覺排版需要也可以把文字放在右側(cè)、下側(cè)等，排版上沒有固定要求。同時(shí)，文字排版還需要保證跨瓷片對齊。雖然在不同瓷片區(qū)中不同的對齊方式可以增加視覺變化，如果一個(gè)瓷片一個(gè)樣子，容易造成雜亂不統(tǒng)一，在設(shè)計(jì)中還需盡量保證跨瓷片文字對齊。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
（3）文字的層級
瓷片區(qū)主標(biāo)題和其他副文本文字設(shè)計(jì)要做好層級區(qū)分，可以通過文字大小、粗細(xì)、顏色等體現(xiàn)主次關(guān)系，尤其要注意文字顏色的使用問題，主標(biāo)題相較于其他副文本文字顏色要更清晰更突出。副文本作為主標(biāo)題的輔助和延續(xù)，不能喧賓奪主，主次關(guān)系混亂。而標(biāo)簽的文字也要符合層級劃分，根據(jù)產(chǎn)品屬性和調(diào)性，按需求設(shè)計(jì)符合的標(biāo)簽文字樣式。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
（4）文字的分類
瓷片區(qū)文字一般可分為非標(biāo)簽類文字和標(biāo)簽類文字。非標(biāo)簽類文字是主標(biāo)題加基礎(chǔ)副文本構(gòu)成。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
標(biāo)簽類文字可分為主副文字兩個(gè)板塊，標(biāo)簽為彩色標(biāo)簽或透明色標(biāo)簽，結(jié)合業(yè)務(wù)產(chǎn)品屬性和需要突出的文案，分別對應(yīng)不同的標(biāo)簽。主要文案一般位于瓷片區(qū)域的左上角和上部垂直居中的位置，副文案一般位于左下角、右側(cè)或下部視覺較弱的位置。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
4.圖片應(yīng)用
圖片是瓷片區(qū)的核心元素，需要選擇高質(zhì)量的實(shí)物實(shí)景圖或者創(chuàng)意插圖，確保圖片清晰、美觀且能夠真實(shí)反映產(chǎn)品特點(diǎn)。
（1）實(shí)物、實(shí)景圖片
瓷片區(qū)中的產(chǎn)品圖片大多為商品實(shí)物圖或?qū)嵕皥D，是用戶購買的真實(shí)實(shí)物產(chǎn)品或地區(qū)實(shí)景，具有較強(qiáng)的代入感，圖片要有高質(zhì)量的標(biāo)準(zhǔn)，整體品質(zhì)精美，畫面清晰美觀，摳圖干凈舒適，在多張圖片使用的情況下，還需要保證圖片視覺感受風(fēng)格大小一致，這樣才能吸引用戶的點(diǎn)擊。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
（2）插畫圖
瓷片的圖片如果偏抽象、沒有合適的實(shí)物圖或者設(shè)計(jì)要求的原因，圖片也可以矢量的插畫或圖標(biāo)形式替代，例如部分瓷片運(yùn)營位需要賦予更多的視覺展示性功能，就可以為其單獨(dú)進(jìn)行插畫或圖標(biāo)設(shè)計(jì)，用表意的圖形增添產(chǎn)品調(diào)性和趣味性。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
5.背景
瓷片的背景主要為了
充實(shí)模塊，營造氛圍，一般在背景色彩形式上常使用高明度低飽和的純色或者選用漸變色為主。
（1）純色背景
可選取跟圖片或插圖主色調(diào)鄰近色彩進(jìn)行設(shè)計(jì)，保證模塊主體突出，減少背景視覺影響。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
（2）漸變色背景
可同色系漸變，選取同種顏色，飽和度發(fā)生變化。相鄰色系漸變選取相鄰色相和飽和度變化，也可選定淺色或向白色過渡，不論采用何種背景都不應(yīng)干擾主體元素的突出。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
（3）淺灰色背景
一種近似乳白色，和底板顏色有細(xì)微差別即可，期望用戶能夠看到模塊化的層級處理而起到襯托作用。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
（4）白色背景
視覺上展現(xiàn)沒有顏色或者只存在部分線框，畫面整潔干凈屬于百搭背景，在產(chǎn)品中使用較為普及。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
（5）全景配圖背景
配圖覆蓋整個(gè)瓷片區(qū)域，較多的適用于外賣類、旅游類、家裝類產(chǎn)品，使用戶快速記憶了解產(chǎn)品，點(diǎn)擊進(jìn)入形成流量轉(zhuǎn)化，提高用戶轉(zhuǎn)化率，核心成交率。
全景配圖圖片素材要求高質(zhì)量，圖片一般要選取1000*1000px以上分辨率圖片，滿足多個(gè)終端顯示效果。圖片要求色調(diào)明亮，飽和度高，圖片色彩視覺感受和諧。畫面主體約占面積1/2，要保留留白區(qū)域，背景簡潔呼吸感強(qiáng)，有空間感。全景配圖因?yàn)閳D片整體色彩元素呈現(xiàn)豐富，背景復(fù)雜，一般可以添加蒙層提高文案閱讀和標(biāo)識(shí)性。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
（6）局部配圖背景
這時(shí)瓷片區(qū)會(huì)一分為三，三分之二的位置放置文案，配圖約占據(jù)三分之一區(qū)域位置，這種排布適用于大多數(shù)產(chǎn)品，使得產(chǎn)品左右和諧平衡。而這類圖片素材和插圖要求高質(zhì)量，色調(diào)明亮，飽和度高。插圖圖標(biāo)既要滿足品牌色及延展，插圖圖標(biāo)樣式風(fēng)格也要保持一致，繪制注意提煉文案信息，圖文表意一致，概括性強(qiáng)，統(tǒng)一圖片或插圖的高度和視覺面積。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
6.裝飾點(diǎn)綴
在設(shè)計(jì)瓷片區(qū)時(shí)還可以加入裝飾點(diǎn)綴，這是為了烘托模塊氛圍，讓畫面更豐富飽滿，給用戶帶來不一樣的視覺感受。
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析｜瓷片區(qū)設(shè)計(jì)指南
 
 
寫在最后
當(dāng)我們在開始設(shè)計(jì)瓷片區(qū)時(shí)，首先需要明確瓷片區(qū)的目標(biāo)和功能，一定要考慮當(dāng)前產(chǎn)品與展示的內(nèi)容是否匹配，包括用戶目標(biāo)的受重點(diǎn)是否需要瓷片區(qū)，這有助于確保設(shè)計(jì)方案與業(yè)務(wù)需求一致。
其次要注重細(xì)節(jié)，在設(shè)計(jì)時(shí)需要注意配圖的質(zhì)量、尺寸和視覺面積的統(tǒng)一性，圖片之間的差異性以及關(guān)鍵文案信息的提煉。
在瓷片區(qū)的設(shè)計(jì)時(shí)還應(yīng)與產(chǎn)品應(yīng)用的整體風(fēng)格和品牌形象保持一致，以增強(qiáng)用戶對品牌的認(rèn)知。瓷片區(qū)的設(shè)計(jì)不僅要考慮美觀，還要考慮如何有效地傳達(dá)信息和提升用戶體驗(yàn)，考慮用戶的操作習(xí)慣和視覺習(xí)慣，確保界面的直觀性和易用性。
最后完成設(shè)計(jì)后要進(jìn)行用戶測試和收集反饋，根據(jù)用戶的實(shí)際使用情況進(jìn)行優(yōu)化。
瓷片區(qū)設(shè)計(jì)是一個(gè)既考驗(yàn)創(chuàng)意又注重細(xì)節(jié)的過程，在廣泛的應(yīng)用場景中，我們需要根據(jù)不同的產(chǎn)品類型、用戶需求和業(yè)務(wù)目標(biāo)進(jìn)行靈活應(yīng)用，創(chuàng)建出既美觀又實(shí)用的瓷片區(qū)。通過合理規(guī)劃和設(shè)計(jì)瓷片區(qū)，可以有效提升產(chǎn)品的用戶體驗(yàn)和商業(yè)價(jià)值。
感謝閱讀，希望這篇文章能對大家有所啟發(fā)，創(chuàng)作更有價(jià)值和影響力的設(shè)計(jì)作品。


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

交互設(shè)計(jì)的核心：用戶體驗(yàn)與創(chuàng)新思維的融合

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

在數(shù)字化時(shí)代，交互設(shè)計(jì)（Interaction Design）已成為產(chǎn)品成功的關(guān)鍵因素之一。無論是移動(dòng)應(yīng)用、網(wǎng)站還是智能設(shè)備，優(yōu)秀的交互設(shè)計(jì)都能為用戶帶來流暢、直觀的體驗(yàn)。今天，我想和大家探討交互設(shè)計(jì)的核心要素，以及如何通過創(chuàng)新思維提升用戶體驗(yàn)。

1. 以用戶為中心的設(shè)計(jì)理念

交互設(shè)計(jì)的核心是“以用戶為中心”。設(shè)計(jì)師需要深入理解用戶的需求、行為和痛點(diǎn)，通過用戶研究、原型測試等方法，確保設(shè)計(jì)能夠真正解決用戶問題。例如，簡潔的導(dǎo)航、清晰的反饋和一致的操作邏輯，都是提升用戶體驗(yàn)的基礎(chǔ)。

2. 創(chuàng)新與功能的平衡

在追求創(chuàng)新的同時(shí)，設(shè)計(jì)師需要確保功能的實(shí)用性和易用性。過度復(fù)雜的設(shè)計(jì)可能會(huì)讓用戶感到困惑，而過于保守的設(shè)計(jì)則可能缺乏吸引力。如何在創(chuàng)新與功能之間找到平衡，是每個(gè)交互設(shè)計(jì)師面臨的挑戰(zhàn)。

3. 情感化設(shè)計(jì)的力量

交互設(shè)計(jì)不僅僅是功能的實(shí)現(xiàn)，更是情感的傳遞。通過色彩、動(dòng)畫、音效等元素，設(shè)計(jì)師可以創(chuàng)造更具吸引力和情感共鳴的體驗(yàn)。例如，微交互（Micro-interactions）的巧妙運(yùn)用，能夠增強(qiáng)用戶的參與感和滿意度。

4. 跨平臺(tái)與多設(shè)備的一致性

隨著用戶使用設(shè)備的多樣化，跨平臺(tái)設(shè)計(jì)變得越來越重要。設(shè)計(jì)師需要確保在不同設(shè)備和平臺(tái)上，用戶都能獲得一致且無縫的體驗(yàn)。這不僅需要技術(shù)上的支持，更需要設(shè)計(jì)思維的全局觀。

5. 數(shù)據(jù)驅(qū)動(dòng)的設(shè)計(jì)優(yōu)化

通過數(shù)據(jù)分析，設(shè)計(jì)師可以了解用戶行為，發(fā)現(xiàn)設(shè)計(jì)中的不足，并持續(xù)優(yōu)化產(chǎn)品。A/B測試、熱圖分析等工具，能夠幫助設(shè)計(jì)師做出更科學(xué)的決策，提升產(chǎn)品的整體表現(xiàn)。

31.png

結(jié)語

交互設(shè)計(jì)是一門融合藝術(shù)與科學(xué)的學(xué)科，它需要設(shè)計(jì)師不斷學(xué)習(xí)、實(shí)踐和創(chuàng)新。無論是新手還是資深設(shè)計(jì)師，我們都應(yīng)保持對用戶需求的敏感，以及對技術(shù)趨勢的關(guān)注。期待大家在評論區(qū)分享自己的見解和經(jīng)驗(yàn)，一起探討交互設(shè)計(jì)的未來！

希望能激發(fā)大家的討論和思考！如果你有更多想法或案例，歡迎留言交流

 

 

評論(0) 瀏覽(86)

設(shè)計(jì)師如何做產(chǎn)品需求分析：先聊聊兩個(gè)“價(jià)值”

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

近兩年出現(xiàn)了不少“解放設(shè)計(jì)師雙手”的設(shè)計(jì)工具、AI工具，我們似乎能很快輸出N種流程方案、N種布局方案、N種UI風(fēng)格等等。問題是：這樣窮舉設(shè)計(jì)方案的工作方式當(dāng)真有效嗎？
 
請警惕“莫得感情”的出圖機(jī)器！具備競爭力的設(shè)計(jì)師必須有自主意識(shí)，包括清晰的思維邏輯、果敢的決策力。而體現(xiàn)這一意識(shí)和能力的重要環(huán)節(jié)之一，就是產(chǎn)品生產(chǎn)鏈路中的首個(gè)環(huán)節(jié)“需求分析”。
 
需求分析并不僅僅是產(chǎn)品經(jīng)理的事兒。從共同目標(biāo)的角度來看，互聯(lián)網(wǎng)企業(yè)在崗位劃分上區(qū)分了產(chǎn)品經(jīng)理、設(shè)計(jì)師、開發(fā)工程師等，是順應(yīng)人的精力時(shí)間有限、術(shù)業(yè)有專攻的自然規(guī)律，但是從業(yè)務(wù)目標(biāo)來說，每一個(gè)崗位都應(yīng)該對“最佳用戶體驗(yàn)和最大化商業(yè)利益的平衡”負(fù)責(zé)，確保這艘船在正確的航道上。所以，如果每個(gè)“船員”都具備主人翁意識(shí)和需求分析的能力，航程必然更健康穩(wěn)健。
設(shè)計(jì)師如何做產(chǎn)品需求分析：先聊聊兩個(gè)“價(jià)值”
 
對設(shè)計(jì)師來說，需求分析不僅僅是“這個(gè)功能要不要做”的問題，也會(huì)影響后續(xù)的設(shè)計(jì)方案決策。每一次的功能增刪或調(diào)整，都是在改變用戶接收產(chǎn)品界面信息的整體效用，那么每一個(gè)產(chǎn)品需求的分析都要評估這個(gè)功能在整個(gè)信息架構(gòu)、用戶體驗(yàn)鏈路的位置孰輕孰重，也就必然會(huì)影響你的設(shè)計(jì)方案決策。
 
產(chǎn)品需求從哪里來？
 
“有用戶反饋說……"
“國慶節(jié)快到了，我們策劃了一個(gè)活動(dòng)……”
“這個(gè)付費(fèi)轉(zhuǎn)化率很低，達(dá)不到預(yù)期。我們想……”
……
產(chǎn)品需求的來源多種多樣，可能來自產(chǎn)品經(jīng)理、用戶反饋、產(chǎn)品數(shù)據(jù)、市場風(fēng)向、技術(shù)革新等等。當(dāng)然，還有來自作為設(shè)計(jì)師的”我自己“。當(dāng)我靈光一閃想到一個(gè)很炫酷的小創(chuàng)意，情感上免不了自以為是地想”咱們產(chǎn)品這么不做這個(gè)“——這個(gè)時(shí)候我也會(huì)用需求分析的框架來質(zhì)問自己：
“值不值得做（價(jià)值評估）”、“應(yīng)當(dāng)先做什么（優(yōu)先級）”、“用戶需求要滿足到什么程度（核心體驗(yàn)鏈路）”這三個(gè)問題。
 
做需求分析，要想什么？
我們常說產(chǎn)品需求要“洞察用戶真正的需求”，要明確“用戶價(jià)值”。剛?cè)胄械臅r(shí)候，我們都會(huì)點(diǎn)點(diǎn)頭，心想“對哦”?？墒鞘裁词?ldquo;真正的”、什么是“假的”、什么是“價(jià)值”？說實(shí)話，這些概念都挺虛的。只有當(dāng)理論落到某個(gè)用戶場景去分析，我們才能理解其深意。
 
先說點(diǎn)虛的，什么是“價(jià)值”？
 
價(jià)值是多維度的概念，在不同的學(xué)科中都會(huì)在“價(jià)值”前加一個(gè)表范圍的定語，比如“勞動(dòng)價(jià)值”、“經(jīng)濟(jì)價(jià)值”、”社會(huì)價(jià)值”。隨著互聯(lián)網(wǎng)的發(fā)展，我們出現(xiàn)了兩個(gè)重要的新詞“用戶價(jià)值”和“產(chǎn)品價(jià)值”。
 
對于用戶而言，他們購買或使用產(chǎn)品或服務(wù)是為了滿足特定的需求，比如提升效率、獲得愉悅、獲取經(jīng)濟(jì)收益等。那么我們說這個(gè)產(chǎn)品具有“用戶價(jià)值”。
 
所以需求分析首先是“評估價(jià)值”，而價(jià)值評估則拆分為“用戶價(jià)值”和“商業(yè)價(jià)值”兩部分。即使當(dāng)下的需求目標(biāo)是提升用戶規(guī)模（拉新、促活、挽留等），并不需要用戶掏錢，也是為了實(shí)現(xiàn)長遠(yuǎn)的商業(yè)價(jià)值。當(dāng)然，這僅適用于以盈利為目標(biāo)的企業(yè)，非盈利組織還有“社會(huì)影響力”的目標(biāo)，不在本文討論范圍內(nèi)。
 
下面我們進(jìn)一步拆解價(jià)值評估：“用戶價(jià)值評估”和“商業(yè)價(jià)值評估”。
設(shè)計(jì)師如何做產(chǎn)品需求分析：先聊聊兩個(gè)“價(jià)值”
 
 
1、用戶價(jià)值評估
解決哪些用戶在什么場景下的什么問題？
 
這個(gè)問題越具體到“人”，就越容易分析。如果需求來自于用戶反饋，我們溯源到具體的用戶。
 
有一個(gè)朋友出去創(chuàng)業(yè)，想做一個(gè)“找飯搭子”的同城陌生人交友軟件。他說，偶爾看到微信朋友圈有人召喚“有沒有人一起探店”的動(dòng)態(tài)，去網(wǎng)絡(luò)社區(qū)搜索“飯搭子”、“同城探店”等詞匯也能看到不少帖子。而且探店吃飯這件事直接關(guān)聯(lián)消費(fèi)，商業(yè)模式很清晰。他想通過他的產(chǎn)品解決“用戶｜在探店場景中｜無法及時(shí)找到飯友”的問題。——“找飯友”是一個(gè)行為動(dòng)作，沒有切入到用戶的內(nèi)在需求。
 
定義用戶價(jià)值不能只停留在“行為上”，可以嘗試找到目標(biāo)用戶做定性訪談，進(jìn)一步深挖問題。比如，我們想進(jìn)一步把問題下鉆，可能會(huì)問到這些問題：
 
● 用戶為什么要找飯友？不能一個(gè)人探店？
● 用戶為什么找不到“飯友”？
● ……
 
我們進(jìn)一步細(xì)化“用戶-場景-問題”的價(jià)值定義：
解決 一線城市年輕用戶（尤其是剛遷移新城市的年輕人）｜通過約伴探店｜解決 同好交友（社群需求）、 “量大”餐館均攤成本（省錢需求）、獲得更愉悅的吃飯氛圍 （情緒需求）的問題。
設(shè)計(jì)師如何做產(chǎn)品需求分析：先聊聊兩個(gè)“價(jià)值”
 
 
那有了這個(gè)用戶價(jià)值定義是不是就可以順利立項(xiàng)呢？——看這個(gè)文章的篇幅，你只讀了不到一半，當(dāng)然還有更多需要推敲的問題，請繼續(xù)閱讀。
 
這個(gè)需求接觸不到真實(shí)用戶怎么辦？
 
有時(shí)候我們的需求來源可能是市場風(fēng)向、技術(shù)革新帶來的未知變化。我們無法直觀地獲知“具體的用戶是誰”、“TA在什么場景遇到什么問題”。
——這種情況，我們則需要反向思考：這個(gè)需求如果做了，獲益的用戶是誰？滿足了他們在什么場景下的需求？如果不做，用戶會(huì)不會(huì)因此棄用我們的產(chǎn)品？可能流失的用戶，大盤占比可能是多少？是不是高價(jià)值用戶？
設(shè)計(jì)師如何做產(chǎn)品需求分析：先聊聊兩個(gè)“價(jià)值”
 
 
用上面的思路去層層推敲，可能會(huì)否定原來的產(chǎn)品策劃，可能會(huì)挖掘出新的需求，可能會(huì)改變需求的優(yōu)先級。
 
值得一提的是，有時(shí)候經(jīng)過層層推敲，最終得到的決策可能會(huì)與市面上的競品有所雷同。也就是我們經(jīng)常會(huì)問的一個(gè)問題：為什么A產(chǎn)品已經(jīng)做了這件事，B產(chǎn)品還要做同樣的事情？
 
有的功能或服務(wù)是順應(yīng)用戶需求而產(chǎn)生的，如果有所缺失，就無法達(dá)成用戶目標(biāo)。比如短視頻產(chǎn)品都會(huì)做點(diǎn)贊和評論，因?yàn)橐曨l創(chuàng)作者和消費(fèi)者分別有“獲得認(rèn)可”的被尊重訴求、”表達(dá)意見“的掌控欲等心理需要。而產(chǎn)品則需要這些點(diǎn)贊和評論數(shù)據(jù)去評判內(nèi)容熱度和豐富個(gè)性化標(biāo)簽，以優(yōu)化內(nèi)容的推送機(jī)制。很多同一賽道的產(chǎn)品會(huì)有雷同的功能，雖然常常被調(diào)侃為”相互抄“，但是真正做需求分析才能看清“什么是無腦抄”、“什么是必然如此”。
 
2、商業(yè)價(jià)值評估
用戶會(huì)為你這個(gè)新產(chǎn)品/新功能買單嗎？
 
我們找到一個(gè)有用的需求點(diǎn)是簡單的，因?yàn)樾枨蟮膩碓凑娴奶嗵啵钱?dāng)我們發(fā)現(xiàn)，用戶不一定會(huì)為我們的新產(chǎn)品或新功能買單。
請注意，這里的“買單”不限于用戶掏錢，還包括用戶決定使用哪個(gè)產(chǎn)品的決策成本、用戶愿意花費(fèi)在某個(gè)產(chǎn)品的時(shí)間和學(xué)習(xí)成本等。
 
那我們怎么預(yù)判用戶會(huì)不會(huì)買單呢？或者，如何提升用戶的買單意愿呢？
 
如前面所言，“用戶價(jià)值”就是通過你的產(chǎn)品獲得了預(yù)期的效用。效用可以是省了時(shí)間、省了錢、省了學(xué)習(xí)成本、獲得情緒價(jià)值、獲得安全感等。而用戶對效用的感知，往往是對比過去經(jīng)驗(yàn)的解決方案得到的。所以，我們首先要看用戶之前是怎么解決這個(gè)問題的，然后是用戶遷移到新的解決方案（使用新產(chǎn)品或新功能）要付出多少成本。
 
繼續(xù)用上面“飯搭子”的案例：
設(shè)計(jì)師如何做產(chǎn)品需求分析：先聊聊兩個(gè)“價(jià)值”
 
 
——我們從這個(gè)案例可以看到，當(dāng)我們做成本對比，不能簡單地說新舊方案哪個(gè)成本更高。用戶付出的“成本”是多維度，包括“時(shí)間成本”、“經(jīng)濟(jì)成本”、“安全風(fēng)險(xiǎn)”等維度。
“飯搭子”這個(gè)新方案，對比舊方案，并沒有沒有壓倒性的成本優(yōu)勢。我們雖然可以通過產(chǎn)品設(shè)計(jì)和運(yùn)營降低當(dāng)中的用戶成本，比如通過用戶歷史參與數(shù)據(jù)（參與飯局次數(shù)、飯友評價(jià)、真實(shí)職業(yè)信息等）提供用戶靠譜度評分，以降低安全成本。但消除用戶成本，需要花費(fèi)較大的資源投入，我們可以預(yù)判這不是一個(gè)高ROI的產(chǎn)品項(xiàng)目。
有趣的是，人不是完全理性的。有的場景，只要其中一項(xiàng)成本感知強(qiáng)烈，人就可能選擇棄用這個(gè)產(chǎn)品。比如“飯搭子”這個(gè)案例中，女性用戶對安全風(fēng)險(xiǎn)更為敏感，女性用戶更不愿意嘗試陌生社區(qū)。
設(shè)計(jì)師如何做產(chǎn)品需求分析：先聊聊兩個(gè)“價(jià)值”
 
 
如果我做的是一個(gè)非常創(chuàng)新的項(xiàng)目，真的沒辦法找到“舊方案”做對比呢？或者我無法獲知舊方案的用戶成本呢？——我們依然建議盡可能地接近用戶、收集足夠多的信息，以輔助判斷。如果依然非常不明朗，可以通過MVP的方案去預(yù)估。關(guān)于MVP實(shí)踐的書籍和網(wǎng)絡(luò)資料很多，大家可以自行搜索。
 
多少用戶會(huì)買單呢？
? 確認(rèn)了這個(gè)需求有用戶價(jià)值
? 確認(rèn)了有XX需求的用戶很可能會(huì)買單
——接下來可以開干了嗎？
 
不夠，還需要預(yù)判收入規(guī)模。因?yàn)椋菏杖?客單價(jià)x支付用戶數(shù)=客單價(jià)x訪問用戶數(shù)x支付轉(zhuǎn)化率。
這個(gè)等式適用于一般的to C產(chǎn)品，不同的產(chǎn)品可能有差異，比如視頻用戶的使用時(shí)長可能與產(chǎn)品收入掛鉤，那么用戶時(shí)長也需要作為一個(gè)變量放入到你的產(chǎn)品收入公式中。
當(dāng)我們要開發(fā)一個(gè)新的付費(fèi)互動(dòng)功能，我們需要做數(shù)據(jù)預(yù)估：這個(gè)互動(dòng)功能放在這個(gè)位置，每天的曝光可能是多少？按照此頁面同樣位置的點(diǎn)擊轉(zhuǎn)化和其他功能的付費(fèi)轉(zhuǎn)化，能否預(yù)估這個(gè)新功能的收入？這個(gè)收入規(guī)模值得投入X天的開發(fā)人力嗎？
如果這個(gè)需求的直接目標(biāo)不是收入，而是獲取更大用戶規(guī)模。我們也同樣用“等式”這個(gè)思考方式來去做數(shù)據(jù)估算，只是把“收入”理解為用戶量或其他目標(biāo)數(shù)值、而非金錢收入。
當(dāng)然，通過歷史數(shù)據(jù)估算收入是比較理想的情況。如果身處一個(gè)數(shù)據(jù)體系建設(shè)落后的企業(yè)中，我無法獲取足夠的數(shù)據(jù)支持，怎么辦呢？或者，這是一個(gè)絕對的革新體驗(yàn)（比如AI輔助內(nèi)容創(chuàng)作），我無法用過往的數(shù)據(jù)或經(jīng)驗(yàn)評估收入規(guī)模，怎么辦呢？
那么，至少解答“解決哪些用戶在什么場景下的什么問題”，來看看這個(gè)需求的用戶場景覆蓋是否足夠廣；再權(quán)衡為了獲得這個(gè)新產(chǎn)品/新功能帶來的新體驗(yàn)，用戶要投入哪些成本，以此做需求的排除法——跟創(chuàng)業(yè)一樣，做產(chǎn)品本身就存在了諸多不確定性，并非所有的決策都能通過公式去論證。
我們只能在有限條件下盡量選擇做正確的事，排除那些大概率不能成功的事。然后嘗試MVP，或直接交給市場和時(shí)間驗(yàn)證。
此外，如果設(shè)計(jì)師想作為初創(chuàng)成員加入新產(chǎn)品，還要跑通可持續(xù)的盈利模式。這里又是一大塊學(xué)問，比如了解這個(gè)企業(yè)做這件事的資源優(yōu)勢等等，本文作者的知識(shí)域和本文篇幅都有限，建議感興趣的朋友翻看商業(yè)分析相關(guān)書籍。但是新舊方案的用戶成本對比、收入公式的拆解，依然是重要且可行的商業(yè)價(jià)值視角。
 
3、優(yōu)先級
“優(yōu)先級”可以分為兩層理解，一層是產(chǎn)品需求之間的優(yōu)先級排序，另一層則是功能范圍層的優(yōu)先級，也就是我們聊需求經(jīng)常會(huì)問的問題：我們明確了這個(gè)產(chǎn)品需求當(dāng)下就要啟動(dòng)，但是當(dāng)前要做到什么程度呢？
前者，對比不同需求的產(chǎn)品價(jià)值大小，再結(jié)合開發(fā)實(shí)現(xiàn)成本和耗時(shí)、是否需要追趕某個(gè)時(shí)間節(jié)點(diǎn)等，產(chǎn)品需求之間優(yōu)先級不難得出。而設(shè)計(jì)師更多要思考的是后者。
舉個(gè)例子：開學(xué)季馬上要到了，產(chǎn)品經(jīng)理了解到學(xué)校有類似“語文朗誦作業(yè)打卡”的作業(yè)打卡訴求。我們希望搶時(shí)間窗去滿足這個(gè)大規(guī)模的家校場景，即“如何最快地滿足每日/周重復(fù)的信息收集需求”？作業(yè)打卡場景可否延伸到其他打卡場景，不同的打卡有何共性或差異？
其中“最快”暗含的意思是“這個(gè)功能至少要做到什么程度才能滿足最核心的用戶需求”。這個(gè)時(shí)候，我們拉了一個(gè)表格，快速梳理不同用戶角色（比如區(qū)分“打卡創(chuàng)建者”和“參與打卡者”）的體驗(yàn)鏈路，再?zèng)Q策各個(gè)體驗(yàn)環(huán)節(jié)的功能復(fù)雜度要到哪里。
從全盤中抽取出體驗(yàn)閉環(huán)的最小集
從全盤中抽取出體驗(yàn)閉環(huán)的最小集
 
不要忽視商業(yè)競爭中的時(shí)間差，因?yàn)閾屜日碱I(lǐng)市場的產(chǎn)品實(shí)際上是提升用戶遷移到競爭對手的成本。過去我們提倡匠人精神，不放過每一個(gè)細(xì)節(jié)。而當(dāng)前激烈的市場競爭環(huán)境下，“有的放矢”比“摳細(xì)節(jié)”更加重要。
 
小結(jié)
我們歸納一下需求分析的思路，多問問這些問題：
設(shè)計(jì)師如何做產(chǎn)品需求分析：先聊聊兩個(gè)“價(jià)值”
 
 
需求分析是比較考驗(yàn)全局觀、邏輯性、數(shù)理分析和共情能力的。工作中可以通過拉表格、思維導(dǎo)圖、白板等工具梳理思路。如果你喜歡寫文字，那就用寫的方式。總之，切忌接到產(chǎn)品需求就動(dòng)手出界面方案。
最后，小作者想留一個(gè)開放性問題：“AI能替代人類做產(chǎn)品需求分析嗎？”期待大家的評論區(qū)留言～
 

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

小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)

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

 

我們UI設(shè)計(jì)師在界面設(shè)計(jì)的時(shí)候經(jīng)常會(huì)使用到單選按鈕、復(fù)選框、開關(guān)這些選擇控件，它們是設(shè)計(jì)中經(jīng)常會(huì)使用到的讓用戶進(jìn)行選擇的控件。盡管它們在用戶界面中是常用的組件，但設(shè)計(jì)師、產(chǎn)品經(jīng)理在為他們的任務(wù)選擇合適的組件時(shí)，仍然會(huì)有很多現(xiàn)實(shí)的麻煩，而我們則需要更認(rèn)真地探究其中的細(xì)節(jié)。
良好的掌握每個(gè)組件的使用場景，可以更加積極的幫助用戶體驗(yàn)產(chǎn)品。本文通過結(jié)合實(shí)際案例與思考，與各位分享這類選擇控件在web端的使用邏輯與細(xì)節(jié)差異，希望能對設(shè)計(jì)工作帶來一定的指導(dǎo)意義。
 
你是否有這種困惑？
當(dāng)我們需要用戶在兩個(gè)選項(xiàng)中選擇一個(gè)選項(xiàng)時(shí)，在這種情況下可以使用三種控件：單個(gè)復(fù)選框、兩個(gè)單選按鈕或者開關(guān)，那么我們應(yīng)該如何做出抉擇呢？
感覺似乎使用Radio單選按鈕、Checkbox復(fù)選框和Switch切換開關(guān)這三個(gè)組件好像都是可以的。下面文中會(huì)對于這三個(gè)組件的基本特點(diǎn)、使用準(zhǔn)則，以及常見場景等的探討來告知設(shè)計(jì)師們該如何去做出正確的選擇。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
要搞清楚這些組件的使用問題，我們需要來了解一下這些組件的由來與用法場景。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
選擇控件（Selection Control）：是一種供用戶選擇不同選項(xiàng)的，常用于表單、設(shè)置頁等。它一般分為三類：單選按鈕（Radio）、復(fù)選框（Checkbox） 和開關(guān)（Switch）。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
一、選擇控件的由來與用法
不論是單選按鈕、復(fù)選框還是開關(guān)，他們都能在現(xiàn)實(shí)世界中找到事例。這些組件是將現(xiàn)實(shí)生活中的事物映射反應(yīng)到界面設(shè)計(jì)中，使得用戶可以更加簡單高效地理解他們本身所代表的交互含義，通過官方定義的“建議”用來指導(dǎo)標(biāo)準(zhǔn)化使用。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
二、選擇控件的差異
單選按鈕、復(fù)選框、開關(guān)組件它們都具有不同的時(shí)效性。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
單選按鈕/復(fù)選框本質(zhì)上只是變輸入為選擇的快捷方式，當(dāng)需要用戶輸入的內(nèi)容只有幾種固定的格式時(shí)，可以通過變輸入為選擇，這樣不僅節(jié)約時(shí)間，也能避免輸入出錯(cuò)，但這需要提托頁面中的其他觸發(fā)組件來保存和執(zhí)行這樣的操作。開關(guān)這類組件被點(diǎn)擊后會(huì)立刻執(zhí)行，并觸發(fā)界面或系統(tǒng)中可明顯被用戶感知到的某些變化。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
如何才能正確的選擇合適的控件，這就需要從了解每一個(gè)組件開始。
 
一、 Radio 單選按鈕
1. 了解單選按鈕按鈕的由來
單選按鈕（Radio）最早的設(shè)計(jì)模型來源于老式收音機(jī)上用于頻率和預(yù)設(shè)電臺(tái)之間切換的物理按鍵。當(dāng)其中一個(gè)按鍵被按下時(shí)，所有其他的按鍵都會(huì)被彈出，被按下的那個(gè)按鍵就成為了唯一一個(gè)處于“按下”狀態(tài)的選中按鈕。
單選按鈕將這一物理特征進(jìn)行了隱喻設(shè)計(jì)，是一種涇渭分明的表現(xiàn)。
但是感覺這樣的說法可能有些不嚴(yán)謹(jǐn)。從物理世界演化到UI后，這個(gè)組件有了交互上的變化，UI設(shè)計(jì)中的單選按鈕功能只是錄入內(nèi)容，并不立即執(zhí)行，而收音機(jī)的物理按鍵卻能立即觸發(fā)（換臺(tái)）操作，所以單選按鈕的使用是在不斷的演變中發(fā)展變化著，未來也許還有新的改變。
UI概念是由Xerox PARC的研究首次引入的，它是一家研發(fā)公司，應(yīng)用業(yè)務(wù)涉及到常用的計(jì)算機(jī)技術(shù)，包括：以太網(wǎng)、圖形用戶界面、編程、鼠標(biāo)等。Xerox Star 8010工作站是第一款在圖形用戶界面中帶有單選按鈕的設(shè)備。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
2. 單選按鈕的特點(diǎn)
單選按鈕是將所有信息條件暴露給用戶，它不像開關(guān)在使用上帶有猜測、探索的必要。
1）
標(biāo)識(shí)性：單選按鈕通常以圓形圖標(biāo)的形式呈現(xiàn)，旁邊附有文字說明，用于表示選項(xiàng)的內(nèi)容。這種設(shè)計(jì)使得單選按鈕易于用戶識(shí)別和操作。
2）
互斥性：僅允許用戶在一組選項(xiàng)中選擇其中一項(xiàng)。
3）
直觀性：每個(gè)單項(xiàng)選擇都非常直觀，它會(huì)公開所有可用選項(xiàng)，用戶能夠一眼看到所有可用的選項(xiàng)并做出選擇。如果希望用戶明確閱讀完所有選項(xiàng)，則最好使用單選按鈕。
4）
拓展性：單選按鈕的拓展性更強(qiáng)，相對于復(fù)選框、開關(guān)的布爾值，單選按鈕能承載兩個(gè)或兩個(gè)以上的選項(xiàng)。
5）
默認(rèn)值：單選會(huì)提供默認(rèn)值選項(xiàng)，且默認(rèn)值可以承載具體內(nèi)容。
 
3.
單選組件的用法準(zhǔn)則
單選按鈕是主要用于兩個(gè)或更多選項(xiàng)列表的選擇器，列表中的所有選項(xiàng)是相互排斥的，用戶必須清楚準(zhǔn)確地選擇一個(gè)選項(xiàng)。
1）當(dāng)用戶點(diǎn)擊一個(gè)未選擇的單選選項(xiàng)時(shí)，它將取消選擇先前選擇的任何其他選項(xiàng)。
2）要為用戶提供默認(rèn)選項(xiàng)，確保它對于用戶來講是最安全或者最可能的選項(xiàng)。
3）選擇較少的情況下使用單選按鈕組件更好，但選項(xiàng)一旦較多，例如七八個(gè)的時(shí)候就不太適合一一展開，這會(huì)占用很多空間，因此將選項(xiàng)收起來放在下拉選單里會(huì)比較合適。
4）清楚表明單選按鈕各個(gè)狀態(tài)，才能使用戶更明確使用，達(dá)到設(shè)計(jì)目的。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
4. 案例場景分析
1）讓用戶明確知道單選、復(fù)選的區(qū)別，強(qiáng)調(diào)各個(gè)選項(xiàng)的不同
不同的選項(xiàng)內(nèi)容，如果采用復(fù)選框，用戶需要在兩個(gè)差距較大的選項(xiàng)中去思考，延長考慮時(shí)間，使得用戶更為焦躁。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
2）開啟/關(guān)閉的單選狀態(tài)，建議使用復(fù)選框
復(fù)選框?qū)τ诮^大多數(shù)用戶都是非常清楚，復(fù)選框?qū)τ谠诳臻g、視覺焦點(diǎn)上使用更為集中，如果只針對開啟/關(guān)閉的單選狀態(tài)，則不建議選擇單選按鈕，推薦使用復(fù)選框。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
3）每個(gè)選項(xiàng)都關(guān)聯(lián)內(nèi)容時(shí)，使用單選按鈕
如果默認(rèn)選項(xiàng)內(nèi)容設(shè)計(jì)的好，會(huì)讓更多人保持選擇默認(rèn)選項(xiàng)。
在表單設(shè)計(jì)中一個(gè)不錯(cuò)的默認(rèn)選項(xiàng)，會(huì)讓很多人保持選擇默認(rèn)選項(xiàng)，提升表單操作效率。下圖案例如果采用復(fù)選框或者開關(guān)控件，用戶就不得不去思考開啟后是什么，還要擔(dān)心理解開啟/關(guān)閉后帶來的影響，但對于絕大多數(shù)用戶來說，系統(tǒng)默認(rèn)內(nèi)容無需改動(dòng)，給用戶提供的默認(rèn)選擇，一般是安全、方便的選項(xiàng)。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
4）較長需隱藏拆分的內(nèi)容情況，使用單選按鈕
在界面設(shè)計(jì)中，如果遇到的內(nèi)容需要重新組織或者拆分時(shí)，選擇使用單選按鈕組件。不僅能夠做到信息簡潔，也能夠提高用戶的瀏覽效率。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
5）垂直排列單選，信息閱讀更佳
如果選項(xiàng)文字名稱較長，需要添加說明，這時(shí)單選組件承載的信息較多，同時(shí)使用垂直排列的方式能讓用戶有一致的閱讀瀏覽方向，眼球動(dòng)線移動(dòng)幅度較小，信息獲取體驗(yàn)更佳。如果選項(xiàng)文字較少，也可橫排不占用太多的垂直空間。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
6）提供默認(rèn)選項(xiàng)，保持視覺分量相同
單選按鈕總是默認(rèn)選中一個(gè)選項(xiàng)，不應(yīng)該展示沒有默認(rèn)選擇的單選組件。這個(gè)規(guī)則的唯一例外情況是在使用單選按鈕進(jìn)行用戶問卷選擇時(shí)，使用單選按鈕在所有選項(xiàng)列表中要有相同的視覺分量，使用戶從列表中選擇任何選項(xiàng)的可能性是相等的。默認(rèn)被選中的單選框設(shè)計(jì)可以為用戶提供明確的建議。默認(rèn)的選項(xiàng)可以引導(dǎo)用戶做出最佳選擇，并增強(qiáng)他們繼續(xù)完成任務(wù)的信心。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
7）明確的可交互區(qū)域，讓用戶易于操作
單選按鈕、復(fù)選框是UI設(shè)計(jì)中最小的交互式元素之一，因此它們需要有一個(gè)易于訪問的點(diǎn)擊區(qū)域。單選組件交互操作時(shí)需要讓用戶不僅通過單擊或點(diǎn)擊該小控件，還可以單擊標(biāo)簽相關(guān)聯(lián)的文本來選擇一個(gè)選項(xiàng)，確保用戶可以單擊單選控件或標(biāo)簽文本上的任意一個(gè)選項(xiàng)時(shí)都易于操作。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
8）所有的選項(xiàng)要對齊
單選按鈕不應(yīng)該有什么子選項(xiàng)，單選按鈕的設(shè)計(jì)初衷是讓用戶在多個(gè)選項(xiàng)中選擇一個(gè)，而不是在一個(gè)選項(xiàng)內(nèi)部進(jìn)行進(jìn)一步的選擇。單選按鈕通常與RadioGroup一起使用，用于將多個(gè)單選按鈕組合為一組，確保同一組內(nèi)的單選按鈕只能有一個(gè)被選中。錯(cuò)誤的排列會(huì)讓用戶感到困擾，所有的選項(xiàng)要對齊放置在同一層級。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
9）選項(xiàng)小于等于5個(gè)，可使用單選按鈕
當(dāng)選項(xiàng)小于5個(gè)，應(yīng)考慮使用單選按鈕，
用戶可以不需要任何點(diǎn)擊或輸入操作即可馬上瀏覽所有選項(xiàng)并直接點(diǎn)擊選擇出來。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
10）選項(xiàng)只有且必須一個(gè)時(shí)，使用單選按鈕
當(dāng)選項(xiàng)只能選擇一個(gè)，且必須選擇1個(gè)時(shí)，應(yīng)使用單選按鈕。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
11）單選項(xiàng)確保選項(xiàng)既全面又互斥
如果無法保證全面，需提供“其他”選項(xiàng)，比如在婚姻狀態(tài)里，除已婚、未婚外，如果你不知道還有別的什么狀態(tài)，最好提供“其他”選項(xiàng)作為補(bǔ)充，否則諸如離異、喪偶等情況會(huì)無法使用該系統(tǒng)。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
二、 Checkbox 復(fù)選框
1. 了解復(fù)選框組件
復(fù)選框的物理原型來自于紙張上的多選題，例如餐廳的菜單，選多選少互不影響，并且用戶傾向于用?這個(gè)符號(hào)來勾選，這個(gè)符號(hào)從古代商號(hào)記流水賬核查到現(xiàn)在教師批閱作業(yè)的“對勾”，無一不表示著“正確、認(rèn)可”。它代表的是一種選擇，而現(xiàn)實(shí)中的多選題，往往是非時(shí)效性的，勾選之后不會(huì)立即生效。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
復(fù)選框既可以是單個(gè)選項(xiàng)，也可以是可供選擇的一組選項(xiàng)。當(dāng)用戶可以選擇任意數(shù)量的選項(xiàng)，包括零個(gè)、一個(gè)或幾個(gè)時(shí)可使用復(fù)選框組件。集合中的每個(gè)復(fù)選框都獨(dú)立于其他所有復(fù)選框，因此選中一個(gè)復(fù)選框不會(huì)對其他復(fù)選框產(chǎn)生任何影響。而復(fù)選框讓用戶在兩個(gè)選項(xiàng)之間進(jìn)行選擇，勾選后和未勾選表示則可表示“是/否、要/不要、開啟/關(guān)閉…” 等結(jié)果，準(zhǔn)確的使用復(fù)選框也需要認(rèn)清復(fù)選框的各種狀態(tài)，才能更好的表示選項(xiàng)意義。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
2. 復(fù)選框的特點(diǎn)
1）直觀性：每個(gè)復(fù)選框通常由一個(gè)方框和一個(gè)標(biāo)簽組成，標(biāo)簽用于描述選項(xiàng)內(nèi)容，用戶可以通過點(diǎn)擊方框來切換其選中狀態(tài)。
2）非互斥性：復(fù)選框通常用戶表示一組非互斥的選項(xiàng)，即選擇一個(gè)不會(huì)影響其他選項(xiàng)狀態(tài)。
3）多選性：復(fù)選框允許用戶從一組選項(xiàng)中選擇一個(gè)或多個(gè)，與單選按鈕不同，復(fù)選框的選中狀態(tài)是獨(dú)立的，選項(xiàng)之間相互獨(dú)立且相關(guān)，用戶可以同時(shí)選中多個(gè)復(fù)選框。
4）公開性：復(fù)選框可公開所有可用選項(xiàng)，用戶一眼能夠看到所有可用的選項(xiàng)并做出選擇。
5）靈活性：復(fù)選框可以用于多種場景，如在線調(diào)研、注冊表單等，能夠提高用戶體驗(yàn)和效率。
3. 復(fù)選框的用法準(zhǔn)則
1）為了方便用戶快速理解，復(fù)選框的選項(xiàng)內(nèi)容一般是一句話，不用逗號(hào)隔開。
2）父級復(fù)選框允許快速便捷選擇或取消選擇所有項(xiàng)目。
3）復(fù)選框表示狀態(tài)，用戶可以延遲提交的交互操作。
4）復(fù)選框作為單選狀態(tài)時(shí)，操作對象和選項(xiàng)主體內(nèi)容視覺焦點(diǎn)是不分開的，選擇后就知道被選中了（比如登錄頁面中的用戶需知）。
5）復(fù)選框也可直接表示選項(xiàng)內(nèi)容的開啟、關(guān)閉。
 
4. 案例分析
1) 使用復(fù)選框代表用戶清楚會(huì)發(fā)生什么
如果使用單選或開關(guān)，會(huì)發(fā)現(xiàn)視覺干擾特別嚴(yán)重，一般表單內(nèi)容不需要特別去強(qiáng)調(diào)每一個(gè)選項(xiàng)的開啟關(guān)閉狀態(tài)。如果排版受限制，可以將復(fù)選框放到標(biāo)簽的右側(cè)對齊。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
2）復(fù)選框的標(biāo)簽文本要措辭主動(dòng)
使用復(fù)選框，要保證選項(xiàng)后標(biāo)簽文本的措辭積極主動(dòng)，而不是否定的。這將幫助用戶理解如果打開復(fù)選框會(huì)發(fā)生什么。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
3) 提前告知用戶，提示消息可減少復(fù)選框錯(cuò)誤選擇概率
如果用戶必須從列表中選擇一些選項(xiàng)，您應(yīng)該在用戶開始執(zhí)行之前告知用戶，通過顯示提示類似“您應(yīng)該至少選擇X個(gè)選項(xiàng)”的消息，來減少用戶復(fù)選框錯(cuò)誤選擇的機(jī)率。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
4）復(fù)選框生效需配合提交按鈕
一般情況下，復(fù)選框不會(huì)像開關(guān)一樣點(diǎn)擊后立即生效，它需要配合提交按鈕生效。所以用戶在提交前可查看選擇的內(nèi)容是否正確，更有助于信息防錯(cuò)。如果在設(shè)置頁面，復(fù)選框也可單獨(dú)作為設(shè)置且立即生效。
復(fù)選組件的選項(xiàng)信息和復(fù)選框在一起，特別是對于批量填寫或設(shè)置多個(gè)字段，使用復(fù)選框效率更高。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
5）用復(fù)選框控制表單局部細(xì)節(jié)
如果控制對象的功能是表單頁面的一個(gè)局部或信息內(nèi)容不多，用戶也清楚了解選擇后是什么，這種時(shí)候復(fù)選框更適合。我們不需要過重的給用戶強(qiáng)調(diào)是什么，用復(fù)選框比使用開關(guān)能使得表單結(jié)構(gòu)內(nèi)容更清晰。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
6）多選項(xiàng)使用復(fù)選框
在表單中，同個(gè)問題中提供多個(gè)選項(xiàng)時(shí)，使用復(fù)選框。勾選能直接表明“要”或“不要”。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
7）有且只有一個(gè)明顯選項(xiàng)時(shí)，用復(fù)選框
只有“選擇”或”取消選擇”一個(gè)顯而易見的選項(xiàng)時(shí)，更適合使用復(fù)選框。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
8）存在父子嵌套關(guān)系的分組，多選項(xiàng)能清晰表達(dá)中間選擇狀態(tài)。
未全選中中間狀態(tài)表示在列表中選擇了多個(gè)子選項(xiàng)（但不是全部），這時(shí)，開關(guān)按鈕不能表示部分選項(xiàng)被選中的狀態(tài)，單選按鈕亦不能表示嵌套關(guān)系。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
三、 Switch 開關(guān)
1. 了解開關(guān)組件
開關(guān)組件是現(xiàn)實(shí)生活中仿照物理開關(guān)按鈕在界面設(shè)計(jì)中的映射，提供了兩種最簡單、直接的對立選項(xiàng)，比如開/關(guān)、啟動(dòng)/禁用等。它就像生活中控制燈泡的開關(guān)，當(dāng)我們?nèi)ゲ僮鏖_關(guān)時(shí)，燈泡會(huì)點(diǎn)亮或者熄滅，會(huì)對事物立即產(chǎn)生影響。它的意符必須明確，不然用戶不知道即將要啟動(dòng)或者關(guān)閉什么
。
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
在界面設(shè)計(jì)中，開關(guān)也同樣具備即時(shí)觸發(fā)的特性，如打開Wi-Fi、開啟暗黑模式等，
由于開關(guān)具備很明顯的在用戶心中扎根的隱喻心智，相較于復(fù)選組件而言，操作前后的狀態(tài)更明顯，感知更強(qiáng)烈。
開關(guān)組件提示用戶在兩個(gè)互斥選項(xiàng)中進(jìn)行選擇，并且總是有一個(gè)默認(rèn)值。當(dāng)用戶必須回答是或否問題和二進(jìn)制操作，如啟用或禁用特定設(shè)置時(shí)，它是最合適的組件。開關(guān)組件也屬于雙態(tài)按鈕，是指有開和關(guān)兩個(gè)兩種狀態(tài)，是在兩個(gè)狀態(tài)之間切換。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
在使用開關(guān)組件時(shí)要注意需要提供足夠的視覺反饋，告知用戶什么狀態(tài)下是開著的。
 
2. 開關(guān)組件的特點(diǎn)
1）直觀性：開關(guān)切換組件的設(shè)計(jì)通常很直觀，開關(guān)主體選項(xiàng)信息和開關(guān)組件是分離的，兩個(gè)視覺焦點(diǎn)，用戶可以通過滑動(dòng)滑塊來改變狀態(tài)，而不需要閱讀額外的說明和標(biāo)簽。
2）二元性：開關(guān)切換組件表示兩種相反且互斥的狀態(tài)，通常多用在表示“開啟/關(guān)閉”，主要在選項(xiàng)中來回切換，這種二元性使得它非常適合于需要明確狀態(tài)切換的場景。
3）及時(shí)性：當(dāng)用戶操作開關(guān)時(shí)，相關(guān)的功能和設(shè)置會(huì)立即給予用戶反饋，無需額外的確認(rèn)步驟。
4）易用性：開關(guān)組件簡單易懂，即使技術(shù)不太熟悉的用戶也能快速學(xué)會(huì)如何使用。
5）可訪問性：現(xiàn)在的開關(guān)設(shè)計(jì)考慮到可訪問性，確保所有用戶，包括有視覺或運(yùn)動(dòng)障礙的人，都能方便地使用。
3. 開關(guān)組件的用法準(zhǔn)則
1）當(dāng)用戶點(diǎn)擊一個(gè)開關(guān)時(shí)，其對應(yīng)的動(dòng)作立即生效。
2）由于開關(guān)顯示實(shí)際狀態(tài)，所以有時(shí)狀態(tài)變化會(huì)有延遲。在這種情況下，可使用"處理中"的狀態(tài)動(dòng)畫，減少用戶焦慮。
3）開關(guān)組件沒有hover效果，有動(dòng)作效果，用手指的切換更容易，這個(gè)組件非常適合應(yīng)用于移動(dòng)設(shè)備。
4)避免使用開關(guān)控制局部細(xì)節(jié)或者次要的設(shè)置，開關(guān)的視覺權(quán)重比較高，所以用它控制內(nèi)容較多更為合適，比如可以將它作為總開關(guān)打開或關(guān)閉一組設(shè)置。
5) 通常不要用開關(guān)替代復(fù)選框，如果在規(guī)范中定義了復(fù)選框，則盡可能保持一致的使用規(guī)范。
6）對象名稱要傳達(dá)清晰，讓用戶能夠明確感知操作后的動(dòng)作開啟或關(guān)閉什么。
7）撥動(dòng)開關(guān)的滑塊后如果狀態(tài)切換失敗，要馬上彈回來。
8）開關(guān)的規(guī)范做法是滑塊在左為“關(guān)”狀態(tài)，在右邊為“開”。
9）由于開關(guān)會(huì)立即執(zhí)行，所以若是危險(xiǎn)的操作需要用戶再次確認(rèn)。
4. 案例場景分析
1）開關(guān)的文本內(nèi)容意思需傳達(dá)清晰開關(guān)主體的信息和按鈕是分離的，和單選、復(fù)選框不一樣。
用戶在點(diǎn)擊開關(guān)按鈕前，必須清晰告知用戶點(diǎn)擊后會(huì)發(fā)生什么，有時(shí)需要通過增加副標(biāo)題文字內(nèi)容來加以說明。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
2）立即生效的場景一般使用開關(guān)組件
在表單填寫時(shí)，往往最終會(huì)有「提交」按鈕作為結(jié)束態(tài)，開關(guān)作為表單字段的填寫，用戶點(diǎn)擊后并不能夠立即生效，而是需要再次點(diǎn)擊「提交」按鈕，這樣處理會(huì)讓開關(guān)的特點(diǎn)所滯后。所以開關(guān)組件應(yīng)該提供即時(shí)生效的結(jié)果，它們不應(yīng)該要求用戶單擊保存或者提交按鈕來應(yīng)用新狀態(tài)。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
3）著重提醒用戶有風(fēng)險(xiǎn)
開關(guān)的視覺權(quán)重較高，在復(fù)雜的表單信息中，它能夠快速吸引用戶注意力，給用戶以視覺提醒。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
4）避免大面積使用開關(guān)，可使用它控制局部細(xì)節(jié)或者次要設(shè)置
開關(guān)在視覺感知上和按鈕有些接近，所以盡可能避免在表單中大量使用開關(guān)來控制局部層級內(nèi)容，推薦使用復(fù)選框來替代開關(guān)作為局部內(nèi)容控制。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
5）作為高層級內(nèi)容控制或信息設(shè)置
開關(guān)作為總控制來顯示更高層級內(nèi)容，避免web表單中過多使用開關(guān)按鈕，會(huì)和其他的基本組件造成視覺干擾。少量使用既凸顯其重要性，又能提升用戶瀏覽表單的效率。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
6）避免寫“開啟/關(guān)閉”帶動(dòng)詞含義的字在組件上
如果要將說明文本放在按鈕里面，它們會(huì)讓人搞不懂是表示當(dāng)前狀態(tài)還是表示切換后的狀態(tài)，此時(shí)如果圖形本身狀態(tài)辨認(rèn)度較低，就會(huì)使這個(gè)問題尤為嚴(yán)重。所以，在設(shè)計(jì)開關(guān)時(shí)，一定要分別用艷麗和暗淡的顏色來表示開和關(guān)狀態(tài)。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
7）語序和狀態(tài)要一致
用戶有可能不知道當(dāng)前點(diǎn)擊狀態(tài)到底是開啟還是關(guān)閉。我們可以使用文案輔助來清晰地傳達(dá)意圖和反饋。如以下場景，在文案中添加【開啟】二字結(jié)合開關(guān)按鈕使用，能有效減少用戶對于按鈕與文案之間關(guān)系的思考。請勿使用文案是“關(guān)閉”作為開啟的語序，增加理解成本。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
 
1. 單選按鈕、復(fù)選框、開關(guān)組件在正確使用時(shí)需特別注意哪些？
1）選擇控件的已選狀態(tài)應(yīng)該要比未選狀態(tài)更加醒目。
2）我們把選擇控件所代表的內(nèi)容稱為標(biāo)簽，標(biāo)簽文本都應(yīng)該簡潔易懂，
避免使用否定詞匯，否則用戶還需要繞彎理解。開關(guān)標(biāo)簽被誤解尤為常見，如“請勿打開”、“補(bǔ)光燈關(guān)閉“、“延時(shí)關(guān)閉”這些都是不好的，它們都有否定詞。
3）把控件圖標(biāo)+文字一起作為可點(diǎn)擊區(qū)域，會(huì)使用戶操作更方便。
2. 明確清楚單選按鈕、復(fù)選框、開關(guān)各組件的使用方法，才能設(shè)計(jì)出更加好用易用的產(chǎn)品。
1）單選組件承載的信息量較多，如果希望用戶對比感知到兩者信息的明顯不同，那么推薦使用單選組件。
2） 復(fù)選框組件適用和拓展性極強(qiáng)，即可以單獨(dú)作為設(shè)置使用，也不用配合其他提交按鈕作為表單填寫的一部分。
3）開關(guān)在表單結(jié)構(gòu)、各種控件內(nèi)容較多時(shí)，需要頁面清晰、避免過多的視覺突出，所以盡量避免讓無數(shù)個(gè)開關(guān)組件在表單中使用。
理論只是指導(dǎo)實(shí)踐的一部分，上述內(nèi)容方法可能只在用戶認(rèn)知和易用性之間，找到一個(gè)相對平衡點(diǎn)，在未來的設(shè)計(jì)中具體的使用場景情況，還是要具體問題具體分析。
 
小功能大細(xì)節(jié)｜掌握選擇控件設(shè)計(jì)
 
 
文中主要概括總結(jié)了單選按鈕、復(fù)選框、開關(guān)的使用規(guī)范及案例。設(shè)計(jì)規(guī)范只是基于產(chǎn)品本身建立的一個(gè)標(biāo)準(zhǔn)，為了保持后續(xù)視覺統(tǒng)一而提供規(guī)范化的參考。
在實(shí)際的工作設(shè)計(jì)中，設(shè)計(jì)規(guī)范主要起到指導(dǎo)作用，每個(gè)產(chǎn)品需要根據(jù)各自的屬性特點(diǎn)和使用場景進(jìn)行靈活調(diào)整，讓組件規(guī)范個(gè)性化匹配自身產(chǎn)品的特點(diǎn)。
設(shè)計(jì)規(guī)范只是設(shè)計(jì)執(zhí)行中一個(gè)基本準(zhǔn)則和使用標(biāo)準(zhǔn)，遵循的同時(shí)既要根據(jù)各產(chǎn)品中不同的設(shè)計(jì)細(xì)節(jié)，查缺補(bǔ)漏、迭代優(yōu)化，將產(chǎn)品亮點(diǎn)與規(guī)范達(dá)到一種平衡，在標(biāo)準(zhǔn)的基礎(chǔ)上突出自身產(chǎn)品特點(diǎn)，讓其更具有優(yōu)秀的代表性。以上總結(jié)如果不妥之處，望大家交流指正，一起探討學(xué)習(xí)。
 


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

大屏數(shù)據(jù)界面設(shè)計(jì)：解鎖數(shù)據(jù)可視化的新境界

藍(lán)藍(lán)設(shè)計(jì)的小編 大數(shù)據(jù)可視化設(shè)計(jì)文章及欣賞

在數(shù)字化轉(zhuǎn)型的浪潮中，大屏數(shù)據(jù)展示已成為企業(yè)決策支持、運(yùn)營監(jiān)控及信息展示的重要窗口。一個(gè)精心設(shè)計(jì)的大屏數(shù)據(jù)界面，不僅能夠?qū)崟r(shí)匯聚海量數(shù)據(jù)，以直觀、生動(dòng)的方式呈現(xiàn)關(guān)鍵信息，還能有效提升團(tuán)隊(duì)協(xié)作效率，助力管理層快速做出精準(zhǔn)決策。以下，我們將深入探討大屏數(shù)據(jù)界面設(shè)計(jì)的核心要素與實(shí)踐策略，為您解鎖數(shù)據(jù)可視化的新境界。

一、明確設(shè)計(jì)目標(biāo)：以用戶為中心

(一)用戶需求分析

設(shè)計(jì)之初，首要任務(wù)是深入理解目標(biāo)用戶群體的需求與偏好。這包括但不限于他們的信息獲取習(xí)慣、決策關(guān)注點(diǎn)以及對于視覺效果的接受度。通過問卷調(diào)查、訪談或工作坊等形式，收集用戶反饋，確保設(shè)計(jì)貼合實(shí)際需求。

(一) 業(yè)務(wù)場景定位

大屏的應(yīng)用場景多樣，如控制中心、會(huì)議室展示、銷售業(yè)績分析等。明確應(yīng)用場景，有助于確定信息的優(yōu)先級展示、布局風(fēng)格及交互邏輯，使界面更加貼合業(yè)務(wù)場景，提升信息傳達(dá)效率。

二、數(shù)據(jù)可視化策略：直觀與深度并重

(一) 選擇合適的圖表類型

根據(jù)數(shù)據(jù)類型及展示目的，合理選擇圖表類型（如柱狀圖、折線圖、餅圖、熱力圖等）。優(yōu)秀的圖表設(shè)計(jì)應(yīng)能在第一眼吸引注意力，同時(shí)準(zhǔn)確傳達(dá)數(shù)據(jù)背后的故事。

(二)數(shù)據(jù)層次清晰展現(xiàn)

利用顏色、大小、位置等視覺元素區(qū)分?jǐn)?shù)據(jù)的重要性，構(gòu)建清晰的信息層次。重要數(shù)據(jù)應(yīng)突出顯示，輔助信息則以更柔和的方式呈現(xiàn)，避免信息過載。

(三)動(dòng)態(tài)交互增強(qiáng)體驗(yàn)

加入動(dòng)態(tài)效果（如數(shù)據(jù)滾動(dòng)、實(shí)時(shí)更新、交互篩選等），使大屏界面更加生動(dòng)，增強(qiáng)用戶體驗(yàn)。同時(shí)，確保交互設(shè)計(jì)直觀易懂，降低學(xué)習(xí)成本。

三、美學(xué)與實(shí)用性并重：打造視覺盛宴

(一) 色彩與布局的藝術(shù)

色彩搭配需考慮品牌調(diào)性、情感表達(dá)及視覺舒適度。布局上，遵循“F型”或“Z型”閱讀模式，引導(dǎo)用戶視線流動(dòng)，確保重要信息一目了然。

(二)字體與圖標(biāo)的選用

選用清晰易讀的字體，大小適中，確保在各種觀看距離下都能輕松閱讀。圖標(biāo)應(yīng)簡潔明了，符合國際通用標(biāo)準(zhǔn)，輔助信息傳遞。

(三)響應(yīng)式設(shè)計(jì)

考慮到不同屏幕尺寸和分辨率的適配性，采用響應(yīng)式設(shè)計(jì)原則，確保大屏內(nèi)容在各種展示環(huán)境下都能保持最佳視覺效果。

四、持續(xù)優(yōu)化與迭代

(一) 數(shù)據(jù)反饋機(jī)制

建立數(shù)據(jù)反饋機(jī)制，收集用戶對界面布局、信息準(zhǔn)確性及交互體驗(yàn)等方面的反饋，作為后續(xù)優(yōu)化的依據(jù)。

(二)技術(shù)與內(nèi)容的同步更新

隨著業(yè)務(wù)發(fā)展和技術(shù)進(jìn)步，定期評估并更新大屏界面，引入新技術(shù)（如AR/VR、AI分析）和數(shù)據(jù)可視化工具，保持界面的先進(jìn)性和實(shí)用性。

58.png

評論(0) 瀏覽(80)

B端用戶中心設(shè)計(jì)剖析：構(gòu)建高效、定制化的企業(yè)服務(wù)平臺(tái)

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

一、引言 在數(shù)字化轉(zhuǎn)型的大潮中，B端（Business-to-Business）服務(wù)市場日益繁榮，企業(yè)對高效、智能化、定制化的業(yè)務(wù)管理系統(tǒng)需求迫切。B端用戶中心作為連接企業(yè)與服務(wù)商的關(guān)鍵橋梁，其設(shè)計(jì)不僅關(guān)乎用戶體驗(yàn)，更直接影響到企業(yè)的運(yùn)營效率與市場競爭力。本文將從設(shè)計(jì)原則、功能模塊、用戶體驗(yàn)及數(shù)據(jù)安全四個(gè)維度，深入剖析B端用戶中心的設(shè)計(jì)要點(diǎn)。 二、設(shè)計(jì)原則 ...

評論(0) 瀏覽(74)

UI 設(shè)計(jì)公司蘭亭妙微分享：人工智能大模型管理平臺(tái)UI設(shè)計(jì)

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

一、項(xiàng)目背景

(一)在當(dāng)下數(shù)字化浪潮中，各類大模型如語言、圖像生成模型不斷涌現(xiàn)，企業(yè)與機(jī)構(gòu)對其應(yīng)用需求激增。然而，模型開發(fā)流程繁瑣、部署成本高昂，不同模型間數(shù)據(jù)交互與共享困難重重。同時(shí)，模型性能優(yōu)化、安全管理等問題亟待解決。在此背景下，大模型管理平臺(tái)應(yīng)運(yùn)而生，它旨在整合資源，簡化模型開發(fā)與部署流程，提升模型性能與安全性，為各行業(yè)高效利用大模型提供有力支持，助力人工智能技術(shù)深度融入業(yè)務(wù)。

(二)該系統(tǒng)的原首頁中信息量比較少，在設(shè)計(jì)時(shí)除了對頁面美觀的優(yōu)化，從內(nèi)容、布局、用戶使用場景、使用習(xí)慣、交互方式等方 面也進(jìn)行考慮，增加了一些統(tǒng)計(jì)的圖表， 「歷史訪問信息」采用卡片式列表，突出模塊和內(nèi)容。同時(shí)增加「個(gè)人上傳記錄」信息和「歷史訪問信息」可以進(jìn)行 切換查看。

二、項(xiàng)目概述

(一)產(chǎn)品定位

大模型管理平臺(tái)定位為人工智能領(lǐng)域的核心樞紐。它是模型全生命周期的智慧管家，從研發(fā)時(shí)整合數(shù)據(jù)與算法資源，到部署時(shí)適配多元硬件環(huán)境，再到運(yùn)營中實(shí)時(shí)監(jiān)測性能，全方位守護(hù)。同時(shí)，它也是跨行業(yè)的賦能引擎，為金融、醫(yī)療、制造等行業(yè)提供定制化模型服務(wù)，加速業(yè)務(wù)智能化轉(zhuǎn)型。

(二)目標(biāo)用戶

大模型管理平臺(tái)的目標(biāo)用戶廣泛且多元?？萍计髽I(yè)研發(fā)團(tuán)隊(duì)、金融機(jī)構(gòu)從業(yè)者、醫(yī)療行業(yè)的研究人員和臨床醫(yī)生、教育領(lǐng)域的課程開發(fā)者與教育科技企業(yè)。此外，政府部門進(jìn)行城市規(guī)劃、交通管理等決策時(shí)，也能從平臺(tái)獲取支持。這些用戶都期望通過大模型管理平臺(tái)，挖掘數(shù)據(jù)價(jià)值，實(shí)現(xiàn)業(yè)務(wù)的智能化升級 。

(三)設(shè)計(jì)風(fēng)格

系統(tǒng)首頁重構(gòu)信息組織架構(gòu)，豐富信息 和數(shù)據(jù)，同時(shí)頁面采用精美的圖標(biāo)和小 插圖提高頁面的精細(xì)美觀度。 設(shè)計(jì)風(fēng)格采用簡約的設(shè)計(jì)語言，清晰、 簡潔和直觀的表達(dá)方式，模塊化布局， 強(qiáng)調(diào)的是界面強(qiáng)調(diào)可復(fù)用性和通用性， 配色采用經(jīng)典藍(lán)色，藍(lán)色具有很好的兼 容性，可以與多種顏色搭配使用，形成 和諧的視覺效果。

level2_img.jpg.png

三、設(shè)計(jì)亮點(diǎn)

(一)流程圖設(shè)計(jì)前后對比

「模型仿真評估流程」是首頁的主要功能區(qū)，在模塊布局上加中 比例成為頁面的聚焦區(qū)域，每個(gè)節(jié)點(diǎn)采用小插圖，插圖方便復(fù)制 及拓展、修改，提升設(shè)計(jì)開發(fā)效率，技術(shù)實(shí)現(xiàn)便捷，落地相對成 本低。增加了背景圖案，使該模塊更加有空間感，同時(shí)增加了整 個(gè)頁面的靈動(dòng)性。

level3_img1.png

(二)增加統(tǒng)計(jì)圖表

圖表能夠直觀地展示關(guān)鍵數(shù)據(jù)，使用戶一目了然地了解整體情況， 快速把握數(shù)據(jù)的變化趨勢和規(guī)律。其次，統(tǒng)計(jì)圖表有助于提升用 戶對數(shù)據(jù)的理解和分析能力，通過視覺化的方式展現(xiàn)數(shù)據(jù)間的關(guān) 聯(lián)和差異，降低理解難度，提高決策效率。同時(shí)，美觀的統(tǒng)計(jì)圖 表也能提升系統(tǒng)首頁的整體視覺效果，吸引用戶的注意力，增加 用戶的粘性。該區(qū)域后期也可以根據(jù)實(shí)際需求換成其它內(nèi)容。

level3_img2.png

四、首頁其他方案欣賞

level4_img.jpg.png

蘭亭妙微(m.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ì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。

評論(0) 瀏覽(68)

平面設(shè)計(jì)：創(chuàng)意與視覺的交響

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

一、平面設(shè)計(jì)的定義與意義 平面設(shè)計(jì)，簡而言之，是通過文字、圖形、色彩等視覺元素，在二維空間內(nèi)進(jìn)行創(chuàng)意性的組合與排列，旨在達(dá)到特定的信息傳遞和審美目的。它超越了簡單的排版和美化，是一種藝術(shù)創(chuàng)造，體現(xiàn)了設(shè)計(jì)師對世界的獨(dú)特理解和表達(dá)。 二、創(chuàng)意：平面設(shè)計(jì)的靈魂 在平面設(shè)計(jì)中，創(chuàng)意是不可或缺的靈魂。一個(gè)好的設(shè)計(jì)作品往往憑借其獨(dú)特的創(chuàng)意，讓人眼前一亮，留下深刻印象。設(shè)...

評論(0) 瀏覽(74)

日歷

鏈接

個(gè)人資料

存檔