首頁

用戶體驗一致性思考

天宇 交互設(shè)計及用戶體驗

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

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

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

天宇 設(shè)計思維

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

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

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

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

天宇 移動端UI設(shè)計文章及欣賞

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


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

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

天宇 交互設(shè)計及用戶體驗

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

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

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

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

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

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

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

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

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

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

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

31.png

結(jié)語

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


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

 

 

設(shè)計師如何做產(chǎn)品需求分析:先聊聊兩個“價值”

天宇 設(shè)計思維

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

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

天宇 交互設(shè)計及用戶體驗

 

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

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

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

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

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

(一)用戶需求分析

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

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

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

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

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

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

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

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

(三)動態(tài)交互增強體驗

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

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

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

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

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

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

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

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

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

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

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

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

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

58.png

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

藍藍設(shè)計的小編 B端ui設(shè)計文章及欣賞

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

UI 設(shè)計公司蘭亭妙微分享:人工智能大模型管理平臺UI設(shè)計

藍藍設(shè)計的小編 B端ui設(shè)計文章及欣賞

一、項目背景

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

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

二、項目概述

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

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

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

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

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

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

level2_img.jpg.png

三、設(shè)計亮點

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

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

level3_img1.png

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

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

level3_img2.png

四、首頁其他方案欣賞

level4_img.jpg.png

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

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

藍藍設(shè)計的小編 平面設(shè)計

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

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.yvirxh.cn

存檔