首頁

數(shù)據(jù)驅(qū)動(dòng)的 B 端設(shè)計(jì):如何用 UI 提升企業(yè)級產(chǎn)品體驗(yàn)?

ui設(shè)計(jì)分享達(dá)人 B端ui設(shè)計(jì)文章及欣賞

在數(shù)字化轉(zhuǎn)型的浪潮中,企業(yè)級產(chǎn)品的用戶體驗(yàn)成為了決定產(chǎn)品競爭力的關(guān)鍵因素。對于 B 端產(chǎn)品而言,其使用場景復(fù)雜、用戶需求多元,如何通過 UI 設(shè)計(jì)提升產(chǎn)品體驗(yàn),成為了擺在設(shè)計(jì)者面前的重要課題。而數(shù)據(jù)驅(qū)動(dòng)的設(shè)計(jì)方法,為這一難題提供了有效的解決路徑。
?
數(shù)據(jù)收集與分析:奠定設(shè)計(jì)基礎(chǔ)?
要利用 UI 提升企業(yè)級產(chǎn)品體驗(yàn),首先需精準(zhǔn)把握用戶需求。數(shù)據(jù)收集在此發(fā)揮關(guān)鍵作用,通過對用戶行為數(shù)據(jù)、業(yè)務(wù)流程數(shù)據(jù)以及用戶反饋數(shù)據(jù)的收集,能深入洞察用戶使用產(chǎn)品時(shí)的痛點(diǎn)與期望。例如,分析用戶在界面特定區(qū)域的停留時(shí)間、操作路徑以及出錯(cuò)頻率等,可明確用戶在使用過程中遇到阻礙的環(huán)節(jié)。再結(jié)合用戶主動(dòng)反饋的意見,便能夠?yàn)楹罄m(xù)的 UI 設(shè)計(jì)優(yōu)化提供有力依據(jù),確保設(shè)計(jì)方向與用戶真實(shí)需求高度契合。?
遵循簡潔高效的 UI 設(shè)計(jì)原則?
企業(yè)級產(chǎn)品的用戶通常期望借助產(chǎn)品提升工作效率,因此 UI 設(shè)計(jì)應(yīng)秉持簡潔高效原則。在界面布局上,避免元素堆砌,采用清晰的層級結(jié)構(gòu),讓用戶能迅速定位所需功能。以常見的企業(yè)資源規(guī)劃(ERP)系統(tǒng)為例,將核心業(yè)務(wù)流程模塊如采購、銷售、庫存管理等置于顯眼且易于訪問的位置,減少用戶操作步驟。同時(shí),精簡操作流程,去除不必要的確認(rèn)環(huán)節(jié)和復(fù)雜的表單填寫項(xiàng),利用自動(dòng)化和智能化手段輔助用戶完成任務(wù),如自動(dòng)填充常用信息、根據(jù)用戶行為提供智能推薦等,以此提升用戶操作效率,減少時(shí)間成本。?
打造個(gè)性化與一致性并存的體驗(yàn)?
不同企業(yè)雖有共性業(yè)務(wù)需求,但在業(yè)務(wù)流程和操作習(xí)慣上也存在差異。這就要求 B 端產(chǎn)品的 UI 具備一定的個(gè)性化定制能力。例如,允許企業(yè)根據(jù)自身品牌形象定制界面主題顏色、字體樣式等視覺元素,增強(qiáng)品牌認(rèn)同感。同時(shí),在核心交互流程和功能布局上保持一致性,確保用戶在使用不同模塊或切換不同企業(yè)賬號時(shí),能迅速適應(yīng)操作方式,降低學(xué)習(xí)成本。這種個(gè)性化與一致性的平衡,既能滿足企業(yè)的獨(dú)特需求,又能保證用戶體驗(yàn)的連貫性和穩(wěn)定性。
2301a18928f1bf96685094b2bd9d79a3ffc0033e586d3-iN8gVd_fw1200.png?
強(qiáng)化數(shù)據(jù)可視化呈現(xiàn)?
在企業(yè)級產(chǎn)品中,數(shù)據(jù)是決策的重要依據(jù)。優(yōu)秀的 UI 設(shè)計(jì)應(yīng)能將復(fù)雜的數(shù)據(jù)以直觀、易懂的方式呈現(xiàn)給用戶。運(yùn)用柱狀圖、折線圖、餅圖等可視化圖表,展示業(yè)務(wù)數(shù)據(jù)的趨勢、占比和對比關(guān)系,讓用戶一眼看清關(guān)鍵信息。同時(shí),提供數(shù)據(jù)篩選、鉆取等交互功能,使用戶可根據(jù)自身需求深入分析數(shù)據(jù)。例如,銷售儀表盤通過可視化呈現(xiàn)各地區(qū)、各時(shí)間段的銷售數(shù)據(jù),管理者能快速發(fā)現(xiàn)銷售熱點(diǎn)和問題區(qū)域,并通過交互操作進(jìn)一步查看詳細(xì)數(shù)據(jù),為決策提供有力支持。
72d2b0d9ac11f8bd9ceb86436d498d396cf543c030531-tmUYnq_fw1200.jpg?
通過數(shù)據(jù)驅(qū)動(dòng)的設(shè)計(jì)方法,精準(zhǔn)把握用戶需求,遵循簡潔高效、個(gè)性化與一致性并存的設(shè)計(jì)原則,強(qiáng)化數(shù)據(jù)可視化呈現(xiàn),能夠有效提升企業(yè)級產(chǎn)品的 UI 體驗(yàn),助力企業(yè)在激烈的市場競爭中脫穎而出,為用戶創(chuàng)造更大價(jià)值。

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

極簡主義在 UI 設(shè)計(jì)中的應(yīng)用與實(shí)踐:打造簡潔高效界面

lanlanwork B端ui設(shè)計(jì)文章及欣賞

極簡主義理念:簡潔不簡單?
極簡主義起源于 20 世紀(jì)初的包豪斯運(yùn)動(dòng),它不僅是一種設(shè)計(jì)風(fēng)格,更代表著一種生活態(tài)度與價(jià)值觀。其核心理念 “少即是多”,并非簡單地削減元素,而是在精簡中追求極致,將設(shè)計(jì)簡化到最純粹、最本質(zhì)的狀態(tài),以最少的元素傳達(dá)最核心的信息。在 UI 設(shè)計(jì)語境下,極簡主義致力于去除一切不必要的繁雜,讓用戶能夠快速聚焦關(guān)鍵內(nèi)容,高效完成操作,達(dá)成美觀與實(shí)用的完美融合。?
極簡主義在 UI 設(shè)計(jì)中的關(guān)鍵應(yīng)用點(diǎn)?
 
10.png
  1. 界面元素簡化?
  • 色彩運(yùn)用:極簡主義配色強(qiáng)調(diào)簡潔性與必要性,避免使用過多色彩造成視覺混亂與疲勞。通常采用有限的色彩組合,其中單色配色方案較為常見,即將主色與輔色統(tǒng)一于同一色相,營造出和諧、一致的視覺感受。比如,一款專注閱讀的 APP 可能以柔和的米白色為背景主色,搭配同色系淺米色的文字與圖標(biāo),僅在關(guān)鍵操作按鈕上使用一抹鮮明的亮色,如橙色,用以引導(dǎo)用戶交互,既保持了界面整體的簡潔優(yōu)雅,又突出了重點(diǎn)功能。?
  • 文字精簡:文字作為信息傳遞的重要載體,在極簡主義 UI 設(shè)計(jì)中追求精準(zhǔn)與簡潔。設(shè)計(jì)師需精心挑選簡潔、易讀且裝飾性弱的字體,嚴(yán)格把控字重、行高和字間距,以提升閱讀舒適度。同時(shí),盡量減少冗長文字描述,運(yùn)用簡潔明了的小標(biāo)題、列表或短語來呈現(xiàn)關(guān)鍵信息。像一款任務(wù)管理 APP,在任務(wù)列表頁面,僅展示任務(wù)名稱、截止時(shí)間等核心信息,避免多余的解釋性文字,讓用戶能夠快速掃視并掌握任務(wù)概覽。?
  • 圖標(biāo)設(shè)計(jì):圖標(biāo)以直觀的圖形語言快速傳達(dá)信息,其簡化至關(guān)重要。極簡主義圖標(biāo)去除繁雜細(xì)節(jié),保留最具辨識度的特征,確保用戶一眼便能理解其含義。例如,社交 APP 中的 “添加好友” 圖標(biāo),可能僅用一個(gè)簡單的 “+” 號搭配人形輪廓來呈現(xiàn),簡潔又表意清晰,在提升設(shè)計(jì)美感的同時(shí),降低用戶理解成本。?
  • 導(dǎo)航優(yōu)化:導(dǎo)航是用戶在界面中順暢操作的指引,極簡主義風(fēng)格下并非摒棄導(dǎo)航,而是使其更加直觀、易用。設(shè)計(jì)師常采用鏈接、側(cè)邊欄或隱藏菜單欄等形式,在保證用戶能輕松找到所需信息的前提下,隱藏非關(guān)鍵部分,突出核心內(nèi)容。以電商 APP 為例,底部導(dǎo)航欄僅設(shè)置 “首頁”“商品分類”“購物車”“個(gè)人中心” 等核心功能入口,而將一些不常用的設(shè)置、幫助等功能收納至側(cè)邊欄,通過簡潔的圖標(biāo)或漢堡菜單觸發(fā),讓首頁界面簡潔有序,又不影響用戶獲取全部功能。?
  1. 布局與結(jié)構(gòu)優(yōu)化?
  • 合理運(yùn)用留白:留白,又稱負(fù)空間,在極簡主義 UI 設(shè)計(jì)中扮演著關(guān)鍵角色。它并非空白,而是精心設(shè)計(jì)的空間布局,通過巧妙安排元素間的空白區(qū)域,營造出開闊、清晰的視覺效果,幫助用戶聚焦重要內(nèi)容。留白可增強(qiáng)頁面層次感,元素周圍留白越大,不同模塊間的區(qū)分越明顯;同時(shí),它能有效引導(dǎo)用戶視線,將用戶注意力集中在關(guān)鍵元素上,如同在一幅畫作中,留白之處往往蘊(yùn)含著無盡的韻味與想象空間,讓界面更具魅力,呼吸感十足。例如,一款攝影作品展示 APP,在圖片展示頁面,圖片四周留出大量空白,讓作品成為絕對焦點(diǎn),同時(shí)也給予用戶視覺上的放松與緩沖。?
  • 清晰的信息層級:構(gòu)建清晰的信息層級是極簡主義 UI 設(shè)計(jì)的重要任務(wù)。依據(jù)用戶操作流程與信息重要程度,對界面元素進(jìn)行有序排列,讓用戶能自然、高效地接收信息。一般將最重要、最常用的信息置于頁面顯眼位置,使用較大字號、鮮明顏色或獨(dú)特的視覺樣式突出顯示;次要信息則以相對低調(diào)的方式呈現(xiàn)。在一款新聞資訊 APP 的首頁,頭條新聞以大幅圖片搭配醒目標(biāo)題占據(jù)屏幕頂部核心區(qū)域,下方按重要程度依次排列其他分類新聞標(biāo)題與摘要,用戶無需過多思考,便能快速捕捉到感興趣的內(nèi)容。?
  1. 功能設(shè)計(jì)聚焦核心?
  • 去除冗余功能:極簡主義 UI 設(shè)計(jì)強(qiáng)調(diào)每個(gè)功能都應(yīng)具有明確的存在價(jià)值,堅(jiān)決去除那些使用率低、重復(fù)或?qū)诵臉I(yè)務(wù)無實(shí)質(zhì)幫助的冗余功能。設(shè)計(jì)師需深入理解用戶需求與產(chǎn)品定位,對功能進(jìn)行精心篩選與整合。比如一款筆記類 APP,專注于核心的筆記記錄、編輯、分類和搜索功能,摒棄諸如復(fù)雜的特效編輯、過多的社交分享花樣等不常用功能,讓用戶能夠?qū)W⒂趦?nèi)容創(chuàng)作,避免因功能繁雜而產(chǎn)生操作困擾。?
  • 強(qiáng)化核心功能體驗(yàn):在精簡功能的基礎(chǔ)上,對核心功能進(jìn)行深度打磨,提升其易用性與交互性。通過優(yōu)化操作流程、提供即時(shí)反饋等方式,讓用戶在使用核心功能時(shí)感受到流暢與便捷。以在線支付功能為例,簡化支付步驟,從選擇支付方式到確認(rèn)支付,全程操作清晰、簡潔,在用戶點(diǎn)擊支付按鈕后,即時(shí)顯示加載動(dòng)畫,告知用戶操作狀態(tài),支付成功或失敗時(shí),以醒目的提示信息和色彩變化給予明確反饋,增強(qiáng)用戶對支付過程的掌控感與安全感。?
極簡主義 UI 設(shè)計(jì)的優(yōu)勢與價(jià)值?
  1. 提升用戶體驗(yàn):簡潔的界面設(shè)計(jì)降低了用戶的認(rèn)知負(fù)擔(dān),使用戶能夠快速理解界面功能與操作方式,輕松找到所需信息,高效完成任務(wù)。無論是初次使用的新用戶,還是高頻使用的老用戶,都能在極簡主義 UI 設(shè)計(jì)的產(chǎn)品中獲得流暢、舒適的體驗(yàn),從而提升用戶對產(chǎn)品的滿意度與忠誠度。?
  1. 增強(qiáng)品牌形象:極簡主義設(shè)計(jì)所展現(xiàn)出的簡潔、精致與專業(yè),能夠?yàn)槠放扑茉飒?dú)特的形象。當(dāng)用戶在使用產(chǎn)品過程中,體驗(yàn)到極簡主義 UI 帶來的便捷與美感時(shí),會(huì)不自覺地將這種好感與品牌聯(lián)系起來,認(rèn)為該品牌注重品質(zhì)、關(guān)注用戶需求,進(jìn)而提升品牌在用戶心中的美譽(yù)度與辨識度。?
  1. 適配多設(shè)備與未來發(fā)展:在移動(dòng)設(shè)備多樣化、屏幕尺寸與分辨率各不相同的當(dāng)下,極簡主義 UI 設(shè)計(jì)憑借其簡潔的布局與元素,能夠更輕松地實(shí)現(xiàn)跨設(shè)備適配,確保在手機(jī)、平板、電腦等各種終端上都能呈現(xiàn)出一致且優(yōu)質(zhì)的視覺效果與交互體驗(yàn)。同時(shí),極簡主義設(shè)計(jì)理念符合未來設(shè)計(jì)發(fā)展趨勢,隨著技術(shù)的不斷進(jìn)步,如人工智能、虛擬現(xiàn)實(shí)等新技術(shù)與 UI 設(shè)計(jì)的融合,簡潔高效的設(shè)計(jì)基礎(chǔ)更便于拓展與創(chuàng)新,能夠更好地適應(yīng)新的交互需求與應(yīng)用場景。

 

 

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

B端表單標(biāo)簽」要怎么對齊才好

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

B端表單標(biāo)簽的對齊方式對用戶體驗(yàn)和界面設(shè)計(jì)至關(guān)重要。本文深入探討了不同表單標(biāo)簽對齊方式的優(yōu)劣勢及適用場景,包括行內(nèi)標(biāo)簽、頂標(biāo)簽、左標(biāo)簽文字右對齊和左標(biāo)簽文字左對齊等,幫助設(shè)計(jì)師在實(shí)際工作中做出最佳選擇,提升表單填寫效率和用戶體驗(yàn)。

表單作為B端系統(tǒng)最常見的組件之一,一些常見的do、don’t想必大家已經(jīng)十分熟。今天我們嘮一嘮【表單標(biāo)簽】這個(gè)細(xì)節(jié)。

在一些成熟的組件庫中,大都提供了上下布局的頂標(biāo)簽、左右布局的左標(biāo)簽等樣式可供選擇。左標(biāo)簽樣式,在不同的產(chǎn)品中,又存在標(biāo)簽文字左對齊、右對齊的情況,那它們之間差異在哪呢?如何選擇呢?

最近工作中,正好在梳理相關(guān)的規(guī)范,于是把自己的一些思考及處理經(jīng)驗(yàn)整理了一下,分享出來~

先對齊一下語言:表單標(biāo)簽、表單域。

會(huì)從這幾個(gè)維度進(jìn)行比較,放一個(gè)簡易版表格,下文細(xì)說。

① 行內(nèi)標(biāo)簽

優(yōu)勢:

  • 瀏覽速度快:可用性測試結(jié)果顯示,行內(nèi)標(biāo)簽樣式下,人眼從標(biāo)簽移動(dòng)到域的時(shí)間僅為10ms,是幾種樣式中最快的。視覺路徑一路向下,很流暢。
  • 標(biāo)簽文字彈性寬度大,可與域等寬。
  • 節(jié)約空間:標(biāo)簽、域合二為一,不單獨(dú)占空間。

劣勢:

用戶操作阻塞:如輸入框聚焦,輸入內(nèi)容時(shí),行內(nèi)標(biāo)簽隱藏,用戶操作會(huì)受阻。

使用場景:

一般用于用戶心智已經(jīng)十分成熟的頁面,比如登錄頁、注冊頁等。

② 頂標(biāo)簽

優(yōu)勢:

  • 瀏覽查看、填寫均有優(yōu)勢:標(biāo)簽與域的距離接近,同時(shí)符合用戶從上到下的視覺動(dòng)線,操作會(huì)很連貫、流暢。
  • 標(biāo)簽文字彈性寬度大。
  • 頁面橫向空間節(jié)約。

劣勢:

Y軸屏效低:對頁面縱向空間的利用率會(huì)比較低。

使用場景:

  • 適合移動(dòng)端表單填寫場景。
  • 適用于英文等語言場景,相同意思下需要更多的字符表示,寬度更寬。
  • web端頁面兩側(cè)狹長工具欄。
  • 希望用戶快速填寫表單且錄入項(xiàng)數(shù)量不多時(shí),比如,將復(fù)雜的長難表單拆解分步驟填寫,每一步驟表單用頂標(biāo)簽表單。

③ 左標(biāo)簽-文字右對齊

優(yōu)勢:

  • 填寫優(yōu)勢:標(biāo)簽和域的距離比文字左對齊更近,視覺關(guān)聯(lián)較明確,便于用戶填寫。
  • 提升Y軸屏效:較于頂標(biāo)簽,節(jié)省頁面縱向空間。

劣勢:

  • 影響閱讀效率:文字右對齊導(dǎo)致左側(cè)參差不齊,不利于快速瀏覽表單。
  • 標(biāo)簽文字彈性寬度?。簶?biāo)簽文字需精簡,超過規(guī)定寬度出現(xiàn)換行,不適合狹長的空間場景。

使用場景:

  • 常用于web端表單填寫場景。
  • 頁面縱向空間緊張,但又需要保證填寫效率時(shí)使用。

④ 左標(biāo)簽-文字左對齊

優(yōu)勢:

  • 快速查看優(yōu)勢:標(biāo)簽文字左側(cè)對齊,方便用戶從上到下快速掃視表單整體情況。
  • 提升Y軸屏效:相較于頂標(biāo)簽,節(jié)省頁面縱向空間。
  • 相較于文字右對齊視覺上更規(guī)整。

劣勢:

  • 標(biāo)簽與域的距離最遠(yuǎn),人眼從標(biāo)簽移動(dòng)到域的時(shí)間為500ms,視覺動(dòng)線頻繁跳動(dòng)影響填寫表單的效率。
  • 標(biāo)簽文字彈性寬度小:標(biāo)簽文字需精簡,超過規(guī)定寬度出現(xiàn)換行,不適合狹長的空間場景。

使用場景:

  • 敏感數(shù)據(jù)表單填寫:希望用戶進(jìn)行仔細(xì)閱讀確認(rèn)、放慢填寫速度時(shí)使用,比如,準(zhǔn)入資格認(rèn)證等場景
  • 陌生數(shù)據(jù)表單填寫:表單中含有大量可選的表單域、大量需要高級設(shè)置的陌生數(shù)據(jù)時(shí),或問題無法被分成易處理的內(nèi)容組,左對齊標(biāo)簽更易于用戶多次瀏覽閱讀標(biāo)簽信息。
  • 表單詳情查看場景。
  • 表單域也分左、右對齊,常見于移動(dòng)端,兩種對齊方式也一起對比一下。

⑤ 域-右對齊

優(yōu)勢:

  • 標(biāo)簽文字彈性寬度大、更靈活。
  • 視覺上兩端對齊,填寫時(shí)不容易漏填。
  • 縱向空間利用率高。

劣勢:

  • 標(biāo)簽與域的距離遠(yuǎn),視覺跳動(dòng)影響填寫效率。
  • 使用場景:
  • 移動(dòng)端表單填寫。
  • web端兩側(cè)狹長工具欄,兩端對齊會(huì)更美觀。

⑥ 域-左對齊

優(yōu)勢:

  • 相較于域右對齊,標(biāo)簽、域距離更接近,視覺移動(dòng)速度更快,從上到下的視覺動(dòng)線更舒服。
  • 縱向空間利用率高。

劣勢:

  • 選擇器等類型的表單域,提示圖標(biāo)距離選項(xiàng)較遠(yuǎn)。
  • 標(biāo)簽文字彈性寬度小,需要寬度限制換行顯示。

使用場景:

  • 移動(dòng)端表單查看/填寫。

本文由人人都是產(chǎn)品經(jīng)理作者【Clippp】,微信公眾號:【Clip設(shè)計(jì)夾】

原文鏈接:https://www.woshipm.com/share/6208137.html

原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于 CC0 協(xié)議。

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))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。

image.png

關(guān)鍵詞:UI咨詢UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)

UI 設(shè)計(jì):數(shù)字世界的關(guān)鍵連接紐帶

lanlanwork B端ui設(shè)計(jì)文章及欣賞

在當(dāng)今數(shù)字化的時(shí)代浪潮中,用戶界面(UI)設(shè)計(jì)的身影無處不在,從我們?nèi)粘J褂玫氖謾C(jī)應(yīng)用、電腦軟件,到各類智能設(shè)備的交互界面,UI 設(shè)計(jì)以其獨(dú)特的魅力和強(qiáng)大的功能,深刻地影響著我們與數(shù)字產(chǎn)品互動(dòng)的體驗(yàn),成為數(shù)字世界中連接用戶與產(chǎn)品的關(guān)鍵紐帶。
95.png

提升用戶體驗(yàn),打造便捷交互流程

UI 設(shè)計(jì)的核心使命之一便是為用戶打造流暢、便捷且愉悅的交互體驗(yàn)。在設(shè)計(jì)過程中,設(shè)計(jì)師們精心規(guī)劃界面布局,依據(jù)用戶的使用習(xí)慣和操作邏輯,合理安排各個(gè)功能模塊的位置。例如,在一款音樂播放應(yīng)用中,播放、暫停、上一曲、下一曲等常用功能按鈕會(huì)被放置在界面底部,方便用戶單手操作;而歌曲列表、個(gè)人收藏、設(shè)置等相對不那么高頻使用的功能,則會(huì)被收納在側(cè)邊欄或二級頁面中,既保證了界面的簡潔,又不影響用戶在需要時(shí)快速找到。
 
同時(shí),UI 設(shè)計(jì)注重優(yōu)化交互流程,減少用戶完成操作所需的步驟。以在線購物為例,傳統(tǒng)的購物流程可能涉及多個(gè)頁面跳轉(zhuǎn)、多次信息填寫,容易讓用戶感到繁瑣和疲憊。而經(jīng)過精心設(shè)計(jì)的電商平臺 UI,通過采用智能聯(lián)想搜索、一鍵添加商品到購物車、自動(dòng)填充收貨地址等功能,極大地簡化了購物流程,讓用戶能夠在最短時(shí)間內(nèi)完成購買,提升了購物的便捷性和效率。這種便捷的交互體驗(yàn)不僅能夠增加用戶對產(chǎn)品的好感度,還能促使用戶更頻繁地使用產(chǎn)品,提高用戶的忠誠度。

增強(qiáng)視覺吸引力,塑造獨(dú)特品牌形象

視覺設(shè)計(jì)是 UI 設(shè)計(jì)的重要組成部分,它賦予了數(shù)字產(chǎn)品獨(dú)特的外觀和個(gè)性。通過巧妙運(yùn)用色彩、字體、圖標(biāo)和圖形等元素,UI 設(shè)計(jì)能夠打造出極具視覺吸引力的界面,吸引用戶的目光并留下深刻印象。不同的色彩搭配能夠傳達(dá)出不同的情感和氛圍,比如社交媒體應(yīng)用常使用溫暖、活潑的色彩,如 Facebook 的藍(lán)色和微信的綠色,營造出友好、輕松的社交氛圍;而金融類應(yīng)用則多采用簡潔、冷靜的色調(diào),如銀行 APP 常見的藍(lán)色或灰色,傳遞出專業(yè)、可靠的形象。
 
字體的選擇也至關(guān)重要,它不僅要保證可讀性,還要與產(chǎn)品的整體風(fēng)格相契合。例如,時(shí)尚類應(yīng)用可能會(huì)選用富有個(gè)性和藝術(shù)感的字體,以體現(xiàn)時(shí)尚潮流;而辦公軟件則更傾向于簡潔、規(guī)整的字體,便于用戶長時(shí)間閱讀。此外,獨(dú)特的圖標(biāo)和圖形設(shè)計(jì)能夠直觀地傳達(dá)功能信息,同時(shí)增強(qiáng)產(chǎn)品的辨識度。像支付寶的螞蟻森林,通過生動(dòng)有趣的樹木圖形和動(dòng)畫效果,吸引了大量用戶參與環(huán)保公益活動(dòng),成為支付寶極具特色的功能之一。這些精心設(shè)計(jì)的視覺元素共同構(gòu)成了產(chǎn)品獨(dú)特的品牌形象,使產(chǎn)品在眾多競爭對手中脫穎而出,讓用戶能夠輕松識別和記憶。

引導(dǎo)用戶行為,促進(jìn)業(yè)務(wù)目標(biāo)達(dá)成

優(yōu)秀的 UI 設(shè)計(jì)不僅僅是美觀和易用,還能夠巧妙地引導(dǎo)用戶行為,幫助企業(yè)實(shí)現(xiàn)業(yè)務(wù)目標(biāo)。設(shè)計(jì)師通過設(shè)計(jì)合理的界面元素和交互方式,吸引用戶關(guān)注重要信息,引導(dǎo)用戶完成特定的操作。例如,在電商平臺中,將熱門商品、促銷活動(dòng)等信息以醒目的方式展示在首頁,吸引用戶點(diǎn)擊瀏覽;同時(shí),通過設(shè)置 “立即購買”“加入購物車” 等明顯且易于點(diǎn)擊的按鈕,引導(dǎo)用戶產(chǎn)生購買行為。在內(nèi)容類應(yīng)用中,通過推薦算法將用戶可能感興趣的文章、視頻等內(nèi)容推送給用戶,并在界面上設(shè)置清晰的閱讀引導(dǎo),如 “繼續(xù)閱讀”“查看更多推薦” 等按鈕,鼓勵(lì)用戶花費(fèi)更多時(shí)間在應(yīng)用內(nèi),增加用戶的停留時(shí)長和活躍度。
 
此外,UI 設(shè)計(jì)還能夠通過設(shè)計(jì)反饋機(jī)制,讓用戶及時(shí)了解自己操作的結(jié)果,增強(qiáng)用戶對產(chǎn)品的掌控感。當(dāng)用戶完成注冊、提交訂單等操作時(shí),系統(tǒng)會(huì)及時(shí)彈出提示框告知用戶操作成功,并提供下一步的操作建議;而當(dāng)用戶操作失誤時(shí),也會(huì)給出清晰的錯(cuò)誤提示和解決方案,幫助用戶糾正錯(cuò)誤。這種及時(shí)、有效的反饋機(jī)制能夠讓用戶更加自信地使用產(chǎn)品,減少用戶因操作不明確而產(chǎn)生的困惑和流失,從而促進(jìn)業(yè)務(wù)目標(biāo)的順利達(dá)成。
 
UI 設(shè)計(jì)在數(shù)字產(chǎn)品的成功中扮演著舉足輕重的角色。它通過提升用戶體驗(yàn)、增強(qiáng)視覺吸引力和引導(dǎo)用戶行為,不僅為用戶帶來了便捷、愉悅的使用感受,還為企業(yè)創(chuàng)造了巨大的價(jià)值,成為推動(dòng)數(shù)字產(chǎn)品發(fā)展和創(chuàng)新的重要力量。在未來,隨著技術(shù)的不斷進(jìn)步和用戶需求的日益多樣化,UI 設(shè)計(jì)將繼續(xù)發(fā)揮其關(guān)鍵作用,為我們帶來更加精彩、智能的數(shù)字生活體驗(yàn)。

B端交互|如何制定B端項(xiàng)目全局框架

天宇 B端ui設(shè)計(jì)文章及欣賞

編輯導(dǎo)語:交互設(shè)計(jì)本質(zhì)上就是設(shè)計(jì)產(chǎn)品的使用方式的過程,“如何才能做出合理的B端交互決策”是很多人都在思考的問題。在這篇文章里,作者聚焦具體的實(shí)戰(zhàn)場景,分享了一些自己做B端交互設(shè)計(jì)的經(jīng)驗(yàn),一起看看吧。

這陣子想了想關(guān)于交互知識的分享,還是應(yīng)該要拓展成一整個(gè)系列的內(nèi)容,包含各類組件、控件和行為的解析。

基于我的分享習(xí)慣,我會(huì)盡量避免使用太過理論還是空泛的方式進(jìn)行講解,而是聚焦具體的實(shí)戰(zhàn)場景,幫助大家理解如何做出合理的交互決策。

一、交互的全局框架是什么

交互設(shè)計(jì)本質(zhì)上就是設(shè)計(jì)產(chǎn)品的使用方式的過程,賬號怎么填寫,表單怎么導(dǎo)出,數(shù)據(jù)怎么篩選,列表怎么排序等等……針對每個(gè)功能的使用方式,都可以花很長的時(shí)間去考慮其合理性。一個(gè)項(xiàng)目的交互,就是這個(gè)項(xiàng)目所有功能使用方式的總和。

那設(shè)計(jì)師如何開始項(xiàng)目的交互設(shè)計(jì)?直接進(jìn)入細(xì)節(jié),開始跟著原型制定輸入框的狀態(tài),下拉菜單的展開邏輯嗎?

這樣肯定是不行的,項(xiàng)目的交互內(nèi)容又多又雜,設(shè)計(jì)師會(huì)很快陷入這些細(xì)枝末節(jié)中疲于奔命。頭疼醫(yī)頭腳疼醫(yī)腳,容易造成項(xiàng)目細(xì)節(jié)缺乏統(tǒng)一性,前后矛盾,體驗(yàn)割裂。

所以,理解項(xiàng)目交互設(shè)計(jì)的正確思路,就要知道在項(xiàng)目中有哪些交互內(nèi)容,它們對應(yīng)的層級和設(shè)計(jì)對象是什么。

在這里,我把需要設(shè)計(jì)的交互對象拆分成4個(gè)種類,它們從大到小依次為:

  1. 全局框架:項(xiàng)目的主要模塊排版和布局,產(chǎn)品使用的主要依據(jù)和步驟
  2. 功能流程:需要較多操作步驟才可以完成的一個(gè)完整的用戶使用目標(biāo)
  3. 組件操作:一些復(fù)雜模塊、業(yè)務(wù)組件的完整操作方法和狀態(tài)
  4. 控件使用:基礎(chǔ)控件元素的操作方法和狀態(tài)

我們先圍繞在全局框架這個(gè)類型進(jìn)行解釋,什么是項(xiàng)目的主要模塊排版和布局,以及為什么全局框架可以決定產(chǎn)品的主要使用依據(jù)和步驟。

比如大家都用過 Adobe 的軟件,應(yīng)該會(huì)有個(gè)感覺,就是熟悉了其中一款后用下一個(gè),立馬就能上手,完成一些最基本的操作。而如果不是 Adobe 系列的軟件,用起來感覺就感覺非常別扭,往往要從頭開始學(xué)起,比如對標(biāo) PS 的 Affinity Photo、Pixelmator。

為什么會(huì)出現(xiàn)這樣的反差?就是因?yàn)?Adobe 盡可能統(tǒng)一了自己生態(tài)內(nèi)的軟件全局框架,操作方式,讓全家桶用戶可以用最快的方法適應(yīng)不同的軟件。

包括頂部的屬性欄,左側(cè)的工具欄,中間的標(biāo)簽欄、創(chuàng)作區(qū)域,右側(cè)的不同工作窗口排列形式。

除了主要界面的布局框架外,還包含一些二級窗口的框架結(jié)構(gòu)也是統(tǒng)一和固定的。比如打開 PS 內(nèi)的首選項(xiàng)設(shè)置和屬性設(shè)置窗口,和其它幾個(gè)軟件的屬性設(shè)置窗口幾乎一致。

而在 Affinity 中,軟件首選項(xiàng)設(shè)置就沒有使用左側(cè)導(dǎo)航,而是類似 Mac 通用設(shè)置的快速入口分層模式,用慣了 Adobe 再換這個(gè)就會(huì)有股說不出的別扭。

可能有同學(xué)有疑問,Photoshop 并不是只有這幾種窗口,其它窗口不就樣式和上面這類不一樣嘛?那是因?yàn)榇翱诘目蚣芸隙ㄊ且紤]功能和場景的,即使使用了多種窗口類型,那也是有規(guī)律的應(yīng)用在操作方式相近的場景中。

再回想一下 PhotoShop 的基本操作流程,就是在創(chuàng)建文件以后,通過左側(cè)工具添加圖層元素到中間畫布區(qū)域進(jìn)行排版,再在右側(cè)屬性欄中調(diào)節(jié)畫布對象的圖層順序、屬性。

PhotoShop 作為平面領(lǐng)域中的獨(dú)角獸,直接影響了絕大多數(shù)同類設(shè)計(jì)軟件的框架結(jié)構(gòu)和布局方法。因?yàn)榻^大多數(shù)設(shè)計(jì)師學(xué)習(xí)設(shè)計(jì)的入門軟件都是 PS,想要讓用戶更快上手自己的軟件,那就應(yīng)該順著他們已經(jīng)習(xí)慣的方式來。

所以,從 Sketch 開始,它的框架和操作流程都和 PhotoShop 高度相似,再之后的 Adobe XD、Figma、即時(shí)設(shè)計(jì)等,都應(yīng)用了幾乎相同的全局框架,所以你只要掌握其中一個(gè)就能立馬熟悉其它軟件的使用。

而當(dāng)實(shí)際功能和 UI 設(shè)計(jì)軟件高度相似的其它幾個(gè) “辦公應(yīng)用” 結(jié)構(gòu)框架不同時(shí),上手就變得異常的困難和別扭。比如 Axure、Keynote、PowerPoint,先學(xué)了設(shè)計(jì)軟件再去學(xué)這幾個(gè)軟件的同學(xué)一定深有感觸。

而其它行業(yè)的軟件,如果沒有一個(gè)具備絕對主導(dǎo)性的產(chǎn)品作為標(biāo)桿,那么每家公司的產(chǎn)品框架就各不相同。比如 3D 建模軟件中的 C4D、Blender、犀牛,視頻剪輯工具中的 Pr、Finalcut、達(dá)芬奇,你就是熟練掌握其中一款,對專業(yè)術(shù)語和必要功能邏輯了如指掌,也需要通過基本教學(xué)才能掌握其它同類軟件。

這就是框架帶來的作用,它是軟件使用方式和操作流程的主要依據(jù),其它細(xì)節(jié)的交互和操作都是附著于全局框架下的子集內(nèi)容。之所以交互設(shè)計(jì)要從全局框架開始,原因就是設(shè)計(jì)師要:

先確定產(chǎn)品整體操作的方式,再去考慮按鈕和表單那些細(xì)節(jié)的處理。

二、B端產(chǎn)品的全局框架拆解

雖然前面舉例的都是軟件案例,但只要仔細(xì)留意,你們就會(huì)發(fā)現(xiàn)網(wǎng)頁端管理系統(tǒng)的操作框架和一般軟件別無二致。只不過相比較五花八門的專業(yè)軟件來說,B 端管理系統(tǒng)的操作框架模式經(jīng)過了長期的演化形成了固定的幾種套路。所以網(wǎng)上找到的管理界面案例,看起來只是圍繞幾個(gè)固定的布局翻來覆去的改顏色和圖標(biāo)。

雖然它們看起來都很像,但依舊包含很多交互細(xì)節(jié)是需要設(shè)計(jì)師留意和制定的,不是簡單照搬就能設(shè)計(jì)出符合項(xiàng)目需要的全局框架。

所以,交互的全局框架到底怎么設(shè)計(jì)?

它不是一個(gè)個(gè)體,而是一個(gè)由多個(gè)組件、頁面類型、適配方式組成的合集概念。想要有效制定,就需要先了解合集中包含的要素有哪些,以及它們的基本特點(diǎn)。

1. 全局框架中的組件

在全局框架的范疇中,包含的組件模塊類型可以分成兩個(gè)大類,全局組件和浮層元素。

全局組件是指在項(xiàng)目多數(shù)頁面中都會(huì)存在并進(jìn)行交互的組件,功能往往和當(dāng)前頁面沒有直接聯(lián)系,比如路徑跳轉(zhuǎn)、色彩切換、快捷操作等。

而包含的浮層元素,本質(zhì)上也是全局組件,只是它們的共性是不會(huì)默認(rèn)展示,需要被特定條件觸發(fā)才能被感知。比如斷網(wǎng)提示、刪除確認(rèn)、側(cè)邊抽屜等都是全局化的浮層要素,也是需要在前期做好規(guī)劃的內(nèi)容。

下面就針對這個(gè)兩種類型的組件一一展開解釋。

(1)全局組件

a. 導(dǎo)航欄

導(dǎo)航欄不僅僅是 B 端管理系統(tǒng),也是網(wǎng)站設(shè)計(jì)中最重要的組件。優(yōu)秀的導(dǎo)航欄可以清晰的展示項(xiàng)目的頁面層級結(jié)構(gòu),幫助用戶高效的訪問目標(biāo)頁面。全局框架制定的一步,就是根據(jù)項(xiàng)目的具體情況,選擇合適的導(dǎo)航類型。

導(dǎo)航欄主要使用上方、左側(cè)、混合型三種布局形式:

  1. 上方導(dǎo)航:適合選項(xiàng)內(nèi)容較少,預(yù)留更多橫向空間內(nèi)容區(qū)域。
  2. 左側(cè)導(dǎo)航:適合選項(xiàng)、層級較多的情況,方便折疊和上下滾動(dòng)。
  3. 混合導(dǎo)航:適合需要有效區(qū)分不同功能區(qū)塊的場景。

確定導(dǎo)航欄的類型,還需要確定導(dǎo)航的操作邏輯,包含幾級菜單,默認(rèn)、展開、選中、關(guān)閉的交互。

b. 頂部欄

除了導(dǎo)航外,另一個(gè)基本必備的組件,就是頂部欄,除了放最基礎(chǔ)的用戶和設(shè)置選項(xiàng)外,它的角色定位要根據(jù)需求決定,最常見的包含下方幾種:

  • 標(biāo)題欄:主要用來展示頁面標(biāo)題、副標(biāo)題,或者面包屑控件。
  • 工具欄:包含比較多的操作要素,如搜索、新增、邀請、消息管理等。
  • 菜單欄:包含較多針對當(dāng)前頁面/模塊的菜單選項(xiàng)和內(nèi)容切換操作。

當(dāng)然,以上幾種情況并不是絕對的。設(shè)計(jì)師需要根據(jù)項(xiàng)目的實(shí)際需求出發(fā),去梳理項(xiàng)目包含哪些全局控件或操作,然后再?zèng)Q定如何分配到導(dǎo)航或者頂部菜單上,而不是先定義菜單的類型再往里面填內(nèi)容和字段。

c. 頁面標(biāo)簽欄

頁面標(biāo)簽欄是一個(gè)類似瀏覽器標(biāo)簽欄的組件,用來展示和關(guān)閉當(dāng)前項(xiàng)目內(nèi)打開的頁面。

標(biāo)簽欄的使用在遠(yuǎn)古時(shí)期的 B 端項(xiàng)目應(yīng)用非常普遍,因?yàn)橐呀?jīng)入土的 IE 瀏覽在那個(gè)年代是沒有頁面標(biāo)簽功能的,導(dǎo)致開啟多個(gè)頁面的切換非常麻煩。

隨著瀏覽器標(biāo)簽的普及,它已經(jīng)不適用于多數(shù) B 端項(xiàng)目,但依舊有一小部分項(xiàng)目是需要結(jié)合它的優(yōu)勢才可以更好的提升操作效率。

在一些需要持續(xù)打開和來回切換頁面的項(xiàng)目,如客服系統(tǒng)、財(cái)務(wù)審核、合同審批,因?yàn)榇蜷_新頁面僅僅需要加載內(nèi)容區(qū)域而不是全局,沒有新建窗口后的空白頁面加載過程,就能帶來更好的體驗(yàn)。

d. 內(nèi)容模塊

內(nèi)容模塊是用來容納和顯示頁面相關(guān)內(nèi)容的模塊,這是個(gè)被很多人忽略的組件類型,包含模塊標(biāo)題欄和操作區(qū)域。

一個(gè)成熟的 B 端項(xiàng)目會(huì)統(tǒng)一制定內(nèi)容模塊的組件結(jié)構(gòu),保證大量頁面和模塊之間樣式的統(tǒng)一性。比如下面的模塊案例。

如果只是簡單做個(gè)標(biāo)題再統(tǒng)一間距參數(shù),那么這個(gè)組件也就沒必要在這里提了,因?yàn)檫@僅僅是設(shè)計(jì)問題而不是交互問題。內(nèi)容模塊的制定是為了盡可能考慮各種內(nèi)容場景,并進(jìn)行統(tǒng)一處理。

例如要應(yīng)用一級分頁標(biāo)簽、多層級分頁標(biāo)簽、操作按鈕、內(nèi)容折疊等??紤]的越全,后面處理起來越工整,否則就像下方淘寶賣家端千牛的案例一樣,損害用戶的體驗(yàn)和操作效率。

內(nèi)容模塊是很難在初期一口氣全部定完,不僅需要產(chǎn)品經(jīng)理前期給出詳盡的需求和產(chǎn)品原型,還依賴設(shè)計(jì)師自身的經(jīng)驗(yàn)判斷。

所以,它的制定流程是在前期先根據(jù)掌握的信息制定出最初的版本,然后在完成后續(xù)的頁面中逐漸進(jìn)行補(bǔ)充、優(yōu)化并替換。

作者:酸梅干超人;

本文由 @超人的電話亭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash ,基于 CC0 協(xié)議。

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

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

天宇 B端ui設(shè)計(jì)文章及欣賞

B端設(shè)計(jì)規(guī)范如何正確搭建,好的設(shè)計(jì)規(guī)范對設(shè)計(jì)有什么幫助呢?設(shè)計(jì)夾老師在這篇文章中圍繞清晰、高效、友好、可控四個(gè)關(guān)鍵設(shè)計(jì)原則,帶你一步步建立起設(shè)計(jì)規(guī)范,推薦各位設(shè)計(jì)er和對交互產(chǎn)品、B端產(chǎn)品設(shè)計(jì)感興趣的童鞋閱讀。

Halo,這里是設(shè)計(jì)夾,今天為大家分享的是「B端設(shè)計(jì)。B端設(shè)計(jì)離不開設(shè)計(jì)規(guī)范這個(gè)話題,而做好設(shè)計(jì)規(guī)范是一個(gè)龐大復(fù)雜工程,很多人對這些處于一知半解狀態(tài)。在這個(gè)系列文章里通過結(jié)合平時(shí)的項(xiàng)目案例來談?wù)勛约簩端設(shè)計(jì)規(guī)范的一些理解,希望可以帶來一些啟發(fā)。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

本篇先談?wù)勗O(shè)計(jì)規(guī)范制作的指導(dǎo)思想–設(shè)計(jì)原則,后續(xù)文章再展開講一下常見各種組件的設(shè)計(jì)規(guī)范。

一、設(shè)計(jì)規(guī)范作用

設(shè)計(jì)規(guī)范作為B端設(shè)計(jì)中非常重要的一環(huán),它的作用主要體現(xiàn)在以下三個(gè)方面:

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

在日常工作中,當(dāng)項(xiàng)目組收到一個(gè)新的需求時(shí),如果已經(jīng)具備了成熟的設(shè)計(jì)規(guī)范體系,其工作效率往往會(huì)得到很好的提升。最后上線的頁面不用走查還原度。以下是具體工作流程:

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

二、設(shè)計(jì)原則

通過前面內(nèi)容我們知道了設(shè)計(jì)規(guī)范對于產(chǎn)品設(shè)計(jì)意義重大,那么制定設(shè)計(jì)規(guī)范制定依據(jù)又是什么呢?這里就要引出設(shè)計(jì)原則這個(gè)話題,設(shè)計(jì)原則是設(shè)計(jì)規(guī)范的總綱領(lǐng),所有的設(shè)計(jì)規(guī)范都應(yīng)當(dāng)以設(shè)計(jì)原則為基準(zhǔn)。設(shè)計(jì)原則主要包含以下內(nèi)容:

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

接下來就圍繞設(shè)計(jì)原則清晰、高效、友好、可控這四個(gè)方面展開講解。

(一) 清晰

清晰原則主要從視覺角度讓界面信息傳達(dá)合理,提高用戶信息獲取效率。主要包含對比,親密,對齊,重復(fù)四個(gè)方面。

1.對比

對比是指界面中為了區(qū)分信息層級,強(qiáng)化元素對比度,使用的很常見的一種手段。例如,下圖中利用大色塊按鈕與線框按鈕形成對比來凸顯關(guān)鍵按鈕;通過對文字字號加大,字體加粗,顏色加深來與弱文案形成對比,凸顯關(guān)鍵文字信息。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

2.親密

如果信息之間關(guān)聯(lián)性越高,它們之間的距離就應(yīng)該越接近,也越像一個(gè)視覺單元;反之,距離就應(yīng)該越遠(yuǎn),也越像多個(gè)視覺單元。親密性的根本目的是實(shí)現(xiàn)組織性,讓用戶對頁面結(jié)構(gòu)和信息層次一目了然。掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

3.對齊

在界面設(shè)計(jì)中,將元素進(jìn)行對齊,既符合了用戶的認(rèn)知特點(diǎn)(我們往往傾向使知覺對象的直線延續(xù)還是直線,曲線延續(xù)還是曲線),也能引導(dǎo)用戶視覺流,讓用戶更流暢地接收信息。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

4.重復(fù)

重復(fù)是指相同的元素在項(xiàng)目中重復(fù)引用,作用是可以有效降低用戶的學(xué)習(xí)成本,同時(shí)提高這些元素之間的關(guān)聯(lián)性。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

(二) 高效

高效原則體現(xiàn)在便捷、輕量、簡化、一致幾個(gè)方面,目的是通過合理的方式讓產(chǎn)品操作更加便捷;交互體驗(yàn)與內(nèi)容更加輕量和簡化;以及產(chǎn)品風(fēng)格保持一致。下面結(jié)合常見案例說明如何應(yīng)用這一原則。

1.合理利用拖拽–便捷、輕量

在涉及到諸如上傳文件,排序,滑動(dòng)輸入,搭建等需求時(shí),合理采用拖拽交互往往可以打造更加便捷用戶體驗(yàn)。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

2.盡量減少不必要的跳轉(zhuǎn)–便捷、輕量

用戶操作過程盡量減少跳轉(zhuǎn),以實(shí)現(xiàn)交互減步長,從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開收起;能用展開收起就不用氣泡…依次類推(優(yōu)先級從高到低:原位>展開收起>氣泡>彈窗>抽屜>新頁面)

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

3.放大點(diǎn)擊熱區(qū)–便捷

放大可點(diǎn)擊按鈕熱區(qū),相對于較小點(diǎn)擊熱區(qū),具備更絲滑操作體驗(yàn)。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

4.懸停即現(xiàn)–輕量

利用懸停即現(xiàn),避免信息過于重復(fù)啰嗦,簡化頁面提高閱讀體驗(yàn)。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

5.折疊次要功能–簡化

頁面功能按鈕過多時(shí),可將次要按鈕收納到一起,點(diǎn)擊時(shí)再展開,外面只展示高頻操作或重要按鈕,保證頁面內(nèi)容簡潔。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

6.統(tǒng)一樣式–一致

一致性是指在不同頁面中相同操作應(yīng)保持一致視覺與交互樣式,可有降低用戶學(xué)習(xí)成本與企業(yè)開發(fā)成本。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

(三) 友好

友好原則應(yīng)貫穿用戶操作前,操作中及操作后三個(gè)階段,給予用戶及時(shí)反饋與幫助。

1.操作前

在用戶操作前給到合適的引導(dǎo)與幫助,有效減少用戶迷茫感。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

2.操作中

通過交互效果及頁面樣式讓用戶可以清晰感知到自己當(dāng)前操作。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

3.操作后

利用界面中元素變化清晰直觀展示當(dāng)前的狀態(tài)。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

(四) 可控

可控主要體現(xiàn)在自由和導(dǎo)航兩個(gè)方面。

1.自由

自由即指用戶可以自由完成一些操作,例如回退,撤銷,終止等。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

2.導(dǎo)航

導(dǎo)航是指用戶隨時(shí)知曉當(dāng)前所在位置,而且可以利用導(dǎo)航隨意到達(dá)目標(biāo)頁面。

掌握這四個(gè)設(shè)計(jì)原則,正確建立B端設(shè)計(jì)規(guī)范

最后

通過本篇內(nèi)容我們大概知道了制作設(shè)計(jì)規(guī)范主要方向,那么具體到每個(gè)組件上,我們該如何去設(shè)計(jì)呢?后續(xù)篇章將細(xì)分聊聊如何去設(shè)計(jì)「B端常見組件」。

專欄作家

作者:Clippp,每周精選設(shè)計(jì)文章,專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計(jì)思考。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于CC0協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

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

15個(gè)關(guān)鍵點(diǎn),掌握B端表格設(shè)計(jì)規(guī)范+交互邏輯

天宇 B端ui設(shè)計(jì)文章及欣賞

毫無疑問,表格之于B端產(chǎn)品而言是及其重要的一部分,那么,如何系統(tǒng)掌握B端產(chǎn)品中的表格設(shè)計(jì)呢?本文作者從表格設(shè)計(jì)規(guī)范與交互邏輯兩個(gè)角度提出了15點(diǎn)建議,干貨滿滿,希望對你有幫助。

表格作為B端產(chǎn)品中重要的界面組成部分,承載著內(nèi)容展示、數(shù)據(jù)記錄等多重任務(wù)。每家產(chǎn)品的表格看起來構(gòu)成差不多,但在交互細(xì)節(jié)上仍然有很多好的地方值得我們仔細(xì)思考。

本次通過整理10條B端表格設(shè)計(jì)規(guī)范+5條B端表格交互邏輯,系統(tǒng)掌握B端產(chǎn)品中的表格設(shè)計(jì)~

一、B端表格規(guī)范整理

1. 對齊,高效的信息獲取方式

表格內(nèi)的信息通過對齊,會(huì)更加規(guī)范易理解,給用戶視覺上的統(tǒng)一感,且視線流動(dòng)順暢,能夠讓人快速捕捉到所要的內(nèi)容。

  • 文本信息左對齊,因?yàn)楝F(xiàn)代人的閱讀方式習(xí)慣從左到右,符合正常心智;
  • 數(shù)據(jù)信息右對齊,方便數(shù)字大小的直觀對比;
  • 內(nèi)容寬度固定居中對齊,更好的信息呈現(xiàn)及表格空間的節(jié)??;
  • 表頭與信息內(nèi)容對齊方式一致,一致性以達(dá)到簡化,降低視覺噪音。

15個(gè)關(guān)鍵點(diǎn),掌握B端表格設(shè)計(jì)規(guī)范+交互邏輯

2. 表格列數(shù)與固定列

默認(rèn)展示的列數(shù)為3-8列,如果需要展示更多列數(shù),則需要優(yōu)先固定展示重要列,其余的列的內(nèi)容會(huì)以滾動(dòng)條滑動(dòng)而展示出來。

有操作時(shí)需固定,操作項(xiàng)不固定時(shí)無法快速定位會(huì)降低操作效率;重要信息固定,有利于快速獲取重要的內(nèi)容。

15個(gè)關(guān)鍵點(diǎn),掌握B端表格設(shè)計(jì)規(guī)范+交互邏輯

3. 表格列表的寬度

寬度的尺寸大小自適應(yīng),但需要根據(jù)文字的重要性顯示,重要文字內(nèi)容優(yōu)先完整顯示。(如果由于屏幕小表格會(huì)出現(xiàn)省略,就要考慮多一個(gè)瀏覽器自帶的title提示。)

注:當(dāng)?shù)谝涣惺切蛱柣蚨噙x項(xiàng)時(shí),列寬不需要太寬,這樣視覺不會(huì)顯得空洞。

15個(gè)關(guān)鍵點(diǎn),掌握B端表格設(shè)計(jì)規(guī)范+交互邏輯

4. 表頭每列標(biāo)題文字字?jǐn)?shù)

字符不要多,如果文字太多,就需要做文字信息精簡化。同樣,對于專業(yè)術(shù)語或用戶不常見的名詞應(yīng)給予一定的幫助說明。

15個(gè)關(guān)鍵點(diǎn),掌握B端表格設(shè)計(jì)規(guī)范+交互邏輯

5. 長文本處理

表格內(nèi)容較多且有長文本時(shí),長文本縮略展示;表格內(nèi)容較少時(shí)有長文本,長文本換行展示。

15個(gè)關(guān)鍵點(diǎn),掌握B端表格設(shè)計(jì)規(guī)范+交互邏輯

6. 空白數(shù)據(jù)填充「-」,避免留白產(chǎn)生疑慮

表格中經(jīng)常會(huì)出現(xiàn)空數(shù)據(jù)或無數(shù)據(jù)的情況,留白處理會(huì)給用戶造成一定的困惑和誤解,是系統(tǒng)沒有加載出來嗎?明智的做法,使用「-」填充顯示。圖片為空時(shí)使用圖片占位符。

15個(gè)關(guān)鍵點(diǎn),掌握B端表格設(shè)計(jì)規(guī)范+交互邏輯

7. 操作列的統(tǒng)一

同一項(xiàng)目中的操作列命名應(yīng)該保持統(tǒng)一,例如:常規(guī)增、刪、改、查命名為新增、刪除、編輯、詳情。

操作項(xiàng)超過三個(gè)時(shí),將操作低頻折疊收起,可以幫助頁面突出更加重要的信息,減輕空間壓力,減少干擾。

15個(gè)關(guān)鍵點(diǎn),掌握B端表格設(shè)計(jì)規(guī)范+交互邏輯

8. 數(shù)據(jù)升降樣式

給數(shù)據(jù)做升降區(qū)分可以快速判斷數(shù)據(jù)的趨勢,國內(nèi)數(shù)據(jù)升圖標(biāo)默認(rèn)為紅色,降的為綠色。

15個(gè)關(guān)鍵點(diǎn),掌握B端表格設(shè)計(jì)規(guī)范+交互邏輯

9. 表格全局操作和批量操作

全局操作為無需選擇數(shù)據(jù)內(nèi)容即可進(jìn)行的操作,常見的有新增、導(dǎo)入、篩選。

批量操作就是對表格的多行數(shù)據(jù)同時(shí)操作,常見的有導(dǎo)出、刪除。

全局和批量都不屬于單個(gè)對象因此需要放在表格外,操作具體的位置排放根據(jù)操作的重要程度一次從左到右遞減。

15個(gè)關(guān)鍵點(diǎn),掌握B端表格設(shè)計(jì)規(guī)范+交互邏輯

10. 斑馬線

條紋顏色:標(biāo)題背景色透明度60%左右;(條紋顏色視覺上應(yīng)該比標(biāo)題欄弱一點(diǎn))鼠標(biāo)hover顏色:主題色透明度10%。

15個(gè)關(guān)鍵點(diǎn),掌握B端表格設(shè)計(jì)規(guī)范+交互邏輯

二、B端表格交互整理

1. 固定表頭,一目了然

當(dāng)閱讀豐富且繁多的表格時(shí),由于屏幕有限,用戶不得不拖動(dòng)橫向或縱向滾動(dòng)條來閱讀信息。

固定表頭,能夠讓用戶明白當(dāng)前單元格內(nèi)信息的屬性而不至于不知道該信息的意思。固定表頭也是一種界面友好性的體現(xiàn)。

15個(gè)關(guān)鍵點(diǎn),掌握B端表格設(shè)計(jì)規(guī)范+交互邏輯

2. 排序,讓信息有序起來

可以讓無序信息內(nèi)容進(jìn)行有序排列,排序分為升序和降序,一般用在數(shù)據(jù)、時(shí)間、數(shù)量上。

15個(gè)關(guān)鍵點(diǎn),掌握B端表格設(shè)計(jì)規(guī)范+交互邏輯

3. 調(diào)整列寬度,查看完整數(shù)據(jù)

允許調(diào)整列的寬度來查看更加完整的縮略數(shù)據(jù)。被截?cái)嗟臄?shù)據(jù),默認(rèn)支持鼠標(biāo)懸停時(shí)瀏覽器自帶title顯示完整數(shù)據(jù)。

15個(gè)關(guān)鍵點(diǎn),掌握B端表格設(shè)計(jì)規(guī)范+交互邏輯

4. 水平滾動(dòng),固定首尾列

呈現(xiàn)大型數(shù)據(jù)集時(shí),水平滾動(dòng)是不可避免的,通過橫向滾動(dòng)查看其它數(shù)據(jù)。將首列進(jìn)行固定(若包含勾選操作,則一起固定),以便用戶將數(shù)據(jù)與對象進(jìn)行對應(yīng)。

15個(gè)關(guān)鍵點(diǎn),掌握B端表格設(shè)計(jì)規(guī)范+交互邏輯

5. 分頁固定

若表格是分頁處理的,分頁會(huì)放在上部、下部或上下部均有,分頁固定省去了用戶需要翻到頂部或底部進(jìn)行操作的麻煩。

15個(gè)關(guān)鍵點(diǎn),掌握B端表格設(shè)計(jì)規(guī)范+交互邏輯

作者:譚檀檀

本文由 @Clippp 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載

題圖來自 Pixabay,基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

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

組件詳解|氣泡卡片Popover 和 文字氣泡Tooltips,用法有什么區(qū)別?

天宇 B端ui設(shè)計(jì)文章及欣賞

都是交互反饋和提示組件,大家可能會(huì)疑惑:文字氣泡 Tooltips 和氣泡卡片 Popover 的區(qū)別是什么,兩者之間的應(yīng)用場景如何?本文對兩者的差異進(jìn)行總結(jié),希望對你有所幫助。

同樣都是交互反饋及提示組件,你可能會(huì)疑惑:文字氣泡 Tooltips 和氣泡卡片 Popover 有什么區(qū)別?分別有哪些特定的使用場景?

本文就來詳細(xì)分析下這兩個(gè)組件的區(qū)別和聯(lián)系,幫助你做好應(yīng)用。

一、氣泡卡片  Popover

氣泡卡片(Popover)是當(dāng)用戶點(diǎn)擊 / 鼠標(biāo)移入元素時(shí),就會(huì)彈出氣泡式的卡片浮層。當(dāng)對于某個(gè)元素有更多的解釋性描述和相關(guān)操作時(shí),這些內(nèi)容可以收納到元素的氣泡卡片中,根據(jù)用戶的操作行為進(jìn)行展現(xiàn)。

其用法特征是:

1. 用戶可以在浮層卡片上進(jìn)行相關(guān)操作,也即氣泡卡片可以并需要承載更復(fù)雜的內(nèi)容和交互功能。

2. 卡片中可以包括的內(nèi)容有:文字說明,圖片內(nèi)容,操作按鈕,相關(guān)鏈接等等。

3. 組件功能側(cè)重于:承載信息和操作。即收納并在需要的時(shí)候展示與該元素內(nèi)容相關(guān)的信息和操作。這些信息的特征通常是:

  • 并不緊急但比較重要的解釋內(nèi)容;
  • 有一部分的用戶需要隨時(shí)閱讀的內(nèi)容;
  • 在點(diǎn)擊關(guān)鍵操作后給用戶確認(rèn)“是否繼續(xù)進(jìn)行”的提示(Ant Design 也單獨(dú)把這個(gè)功能拿出來做成做了一個(gè)組件:Popconfirm 氣泡確認(rèn)框,如下圖)。

二、文字氣泡  Tooltips

文字氣泡(Tooltips)是相對簡單的文字提示氣泡框。用戶使用鼠標(biāo)移入元素后顯示提示,移出后提示消失。

其用法特征是:

1. 文字氣泡通常不承載復(fù)雜的信息和操作,僅提供一段文案解釋,也即用戶在文字氣泡中不能做除閱讀外的其它操作。

2. 該組件功能側(cè)重于:解釋說明。即對局部內(nèi)容或元素進(jìn)行文字性的解釋說明。通常來說該氣泡是對其載體本身的解釋,比如:

  • 一個(gè)特殊的功能按鈕;
  • 專有名詞、難懂詞匯;
  • 看不出具體目的地的操作鏈接
  • 特殊的 icon 等。

三、使用建議

1. 關(guān)于使用場景

  • 氣泡卡片 Popover:常用于承載信息和操作。承載的內(nèi)容和形式更為多樣。
  • 文字氣泡 Tooltips:常用于解釋說明。僅承載簡單的文案信息。

2. 關(guān)于組件樣式

有同學(xué)看過 Ant Design 組件庫提供的組件樣例,會(huì)覺得氣泡卡片 Popover 是白色背景,而文字氣泡 Tooltips 是半透明黑色背景。

其實(shí)這兩個(gè)組件的背景顏色上的差異并不是重點(diǎn),因?yàn)檫@兩個(gè)組件都可以使用其他顏色(比如帶有透明度的品牌色)做背景底色。顏色并不具備唯一標(biāo)準(zhǔn)。AntD 就提供了多種顏色的文字氣泡樣式:

3. 關(guān)于理解規(guī)范

也許你已經(jīng)發(fā)現(xiàn),即使我們將一個(gè)組件的使用規(guī)范和應(yīng)用場景解釋得再全面,在使用時(shí)也總會(huì)出現(xiàn)一些特殊的業(yè)務(wù)需求和應(yīng)用場景無法嚴(yán)格按照規(guī)范來執(zhí)行。

面對復(fù)雜多樣的業(yè)務(wù)需求,我們更應(yīng)該學(xué)會(huì):在理解業(yè)務(wù)需求的基礎(chǔ)上,合理調(diào)整組件的使用方式和樣式。

組件的規(guī)范對設(shè)計(jì)師來說并不應(yīng)該是限制或約束,而是一種能夠幫助我們快速實(shí)現(xiàn)產(chǎn)品設(shè)計(jì)一致性,保證基礎(chǔ)體驗(yàn)的快速方式。

專欄作家

元堯,人人都是產(chǎn)品經(jīng)理專欄作家。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于 CC0 協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

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

B端交互 | 重新認(rèn)識頁面、浮層、彈窗和抽屜

天宇 B端ui設(shè)計(jì)文章及欣賞

編輯導(dǎo)語:B端產(chǎn)品的展現(xiàn)形式包含了很多類型,標(biāo)簽頁、彈窗、懸浮層等等。本篇文章中作者分享了如何正確的呈現(xiàn)B端產(chǎn)品,讓產(chǎn)品的交互體驗(yàn)更加絲滑。感興趣的小伙伴們快來一起看看吧,希望對你有所幫助。

在B端產(chǎn)品操作中,需要高頻率地打開各類鏈接和按鈕,如果點(diǎn)擊后需要展示新的內(nèi)容,那么展現(xiàn)形式就包含了很多種類型,標(biāo)簽頁、新頁面、懸浮層、彈窗、抽屜等等。

在面對數(shù)量龐大的B端頁面、組件、交互場景下,應(yīng)該選擇哪種展示形式就變成了一個(gè)棘手的問題。

本篇分享就將集中在解決如何選擇正確的呈現(xiàn)形式上,讓產(chǎn)品的交互體驗(yàn)更順滑。

一、內(nèi)容的載體形式

網(wǎng)頁是一種可視化的UI界面,也是一種內(nèi)容載體,它是瀏覽器訪問網(wǎng)站后顯示的主要對象,也是瀏覽器展示內(nèi)容中層級最高的單位。

在同一個(gè)網(wǎng)站中,如果我們想要訪問其它網(wǎng)頁,就需要點(diǎn)擊按鈕或鏈接觸發(fā),這時(shí)候,打開新網(wǎng)頁的方式就有兩種,在新窗口/標(biāo)簽中打開(_blank)或者在本窗口/標(biāo)簽中打開(_self)。

不管是哪種,本質(zhì)上都需要瀏覽器重新加載新的頁面。對于一般的企業(yè)官網(wǎng)、新聞網(wǎng)站來說,這種加載的模式?jīng)]有太大的問題,因?yàn)椴僮黝l次相對適中,用戶中間會(huì)有比較長的時(shí)間停頓下來查看頁面的內(nèi)容信息。

而B端項(xiàng)目則不同,雖然也有不少查看頁面信息的需求,但是包含了更多需要短平快完成操作目標(biāo)的使用場景,比如修改個(gè)標(biāo)題,更改商品價(jià)格,添加分類字段等。

如果所有高頻操作的場景,都要重新加載頁面,使用起來的 “頓挫感” 是非常強(qiáng)的,降低使用體驗(yàn)。

早期的網(wǎng)站加載內(nèi)容必須刷新頁面,所以頓挫感是難以解決的,只能想辦法減少跳轉(zhuǎn)流程來提升用戶體驗(yàn)。

隨著網(wǎng)頁技術(shù)的發(fā)展,異步處理(AJAX數(shù)據(jù)交換方式)技術(shù)的應(yīng)用,讓網(wǎng)頁的內(nèi)容可以通過不刷新或加載新網(wǎng)頁的形式加載和顯示。

簡單解釋,就是早期的網(wǎng)頁加載完成以后就是 “靜止” 的,里面所有內(nèi)容是固定的(不是HTML的靜態(tài))。而異步處理,就是讓頁面中的指定模塊處于 “運(yùn)動(dòng)” 的狀態(tài),客戶端可以在不重載網(wǎng)頁的情況下只加載和更新這個(gè)模塊的內(nèi)容。

比如下面的案例,設(shè)置不同的條件選項(xiàng),在過去的網(wǎng)頁中只能重載頁面更新,而使用異步處理就可以直接和服務(wù)器請求數(shù)據(jù)刷新這個(gè)圖表模塊,而不用重載整個(gè)頁面。

所以,在B端項(xiàng)目中,我們不再是只有重載網(wǎng)頁一個(gè)選項(xiàng),而有了其它的選擇,如下圖所示。

其中,網(wǎng)頁展示作為一個(gè)基礎(chǔ)展示對象,我就不多做介紹了。我會(huì)通過分別介紹其它幾個(gè)內(nèi)容的載體,幫助大家區(qū)分它們和重載頁面有何不同,以及如何正確選擇內(nèi)容加載形式。

二、浮層的使用解析

首先介紹浮層,它是我對通過懸浮在頁面基礎(chǔ)內(nèi)容之上的內(nèi)容層的統(tǒng)稱。例如各類氣泡、提示框、下拉菜單,都是浮層的表現(xiàn)形式。

浮層是比較底層的形式,其展示內(nèi)的容完全不需要使用一個(gè)新的頁面,且和觸發(fā)的元素有較強(qiáng)的視覺聯(lián)系(對比彈窗)。

浮層并不是由內(nèi)容的多和少?zèng)Q定的,復(fù)雜的浮層可以包含非常多的交互選項(xiàng)和內(nèi)容信息,導(dǎo)致我們很容易和下方解釋的彈窗搞混。

比如客戶端軟件常見的隱藏式側(cè)邊欄,搜索欄中展開的復(fù)雜面板,都是浮層的一種而不是彈窗。

浮層最大的特點(diǎn),源自它的位置定義邏輯,它會(huì)和觸發(fā)它的元素具有非常緊密的位置關(guān)系,而不是像彈窗一樣無差別顯示在界面或?yàn)g覽器視圖的固定區(qū)域。

如果我們想要顯示內(nèi)容,完全沒到用一個(gè)新頁面展示的地步(如搜索建議面板),且和觸發(fā)它的控件有較強(qiáng)的聯(lián)系,就可以考慮使用浮層來展示。

三、彈窗的使用解析

彈窗,也是一種懸浮在基礎(chǔ)內(nèi)容之上的內(nèi)容層,它和浮層的不同之處,就在于彈窗通常是居中固定的顯示區(qū)域,和觸發(fā)它的元素沒有什么位置聯(lián)系。并且,彈窗可以包含的內(nèi)容量級也是高于浮層的?;A(chǔ)的彈窗包含強(qiáng)提示彈窗,或類似注冊登錄這種表單彈窗。

而高級的彈窗,則類似下方案例,約等于打開一個(gè)獨(dú)立的網(wǎng)頁。

之所以使用這些高級彈窗作為頁面載體,原因就是對原觸發(fā)頁面的使用和關(guān)注并沒有結(jié)束,需要支持快速關(guān)閉當(dāng)前的窗口并返回原來的頁面中去。

比如在一個(gè)非常長的列表中,你下滑了幾十頁的高度,肯定不想放棄掉當(dāng)前的頁面位置,所以Behance或者花瓣等應(yīng)用,都采用窗口模式加載新頁面。

或者類似一個(gè)列表頁面中需要大量創(chuàng)建新的數(shù)據(jù),這些數(shù)據(jù)又不復(fù)雜。于是就通過彈窗表單的形式,快速完成創(chuàng)建并在原頁面中再次點(diǎn)擊 “新增” 按鈕。

高級的彈窗使用除了保持原頁面位置、高頻操作等防止加載的原因之外,還有個(gè)更重要的特征,就是強(qiáng)制吸引用戶的注意力到窗口上。

因?yàn)閺棿爸饕阅B(tài) (Modal,后方有黑色遮罩)居中顯示,通過深色蒙版進(jìn)行前后隔斷,凸顯彈窗區(qū)域,意味著我們強(qiáng)制讓用戶關(guān)注眼前的信息和任務(wù)。

如果我們想要顯示的內(nèi)容,需要保留原頁面狀態(tài),減少頁面跳轉(zhuǎn)數(shù)量,又需求用戶強(qiáng)行關(guān)注,就可以使用這種模式展示。

四、抽屜的使用解析

最后,就是最難選擇,也最容易和其它組件搞混的抽屜了。

抽屜本身的特征包含懸浮屬性,覆蓋在原頁面之上。而我們常見的側(cè)邊欄、側(cè)邊菜單并不能和抽屜畫上等號,因?yàn)樗麄儠?huì)占用畫布的實(shí)際顯示區(qū)域,和原有內(nèi)容同層。

比如下方案例中,Jira左側(cè)導(dǎo)航(不分左右)可以隱藏收入,頁面內(nèi)容變大,這是側(cè)邊欄。而點(diǎn)擊列表選項(xiàng),右側(cè)彈窗的窗口覆蓋原有頁面,才是抽屜。

和高級的彈窗類似,抽屜也可以當(dāng)成一個(gè)獨(dú)立的頁面展示信息。但它和彈窗不同的是,抽屜通常是從頁面的右側(cè)展開,沒有遮擋左側(cè)的空間。它的主要特征是還需要在原頁面進(jìn)行交互。

比如Teambition案例中的列表,我們每開一個(gè)抽屜都還可以直接點(diǎn)擊原列表的其它選項(xiàng)切換下一個(gè)抽屜,省掉關(guān)閉步驟或者原頁面被遮擋的情況。

它比較適合應(yīng)用在表格/列表環(huán)境中,作為表格/列表內(nèi)容的詳情頁形式展開,這樣用戶可以在一個(gè)頁面中快速查看不同列表的具體信息或編輯。并且,表格/列表本身的特征會(huì)將標(biāo)題放在最左側(cè),也方便抽屜的切換。

也因?yàn)檫@種特性,抽屜不太需要使用模態(tài)和遮罩將左側(cè)內(nèi)容遮擋掉。如果需要通過遮擋來吸引用戶注意力,那么這種情況往往更適合使用彈窗。

所以,如果不想通過新頁面打開的列表詳情內(nèi)容,且不是強(qiáng)制要求用戶聚焦的任務(wù),就可以使用抽屜的形式展現(xiàn)。

五、結(jié)尾

以上就是幾種基本的內(nèi)容展現(xiàn)形式說明,時(shí)間關(guān)系還有后半部分關(guān)于如何站在系統(tǒng)框架級的角度使用內(nèi)容載體的分享,我會(huì)留在下次分享。

如果有關(guān)于這部分的實(shí)際項(xiàng)目疑問,也可以在下方留言。

我們下篇再見~

 

作者:酸梅干超人;公眾號:超人的電話亭

本文由 @超人的電話亭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于CC0協(xié)議。

專欄作家

韓敘,微信公眾號:運(yùn)營狗工作日記,人人都是產(chǎn)品經(jīng)理專欄作家。原貓眼電影產(chǎn)品運(yùn)營專家,創(chuàng)業(yè)時(shí)經(jīng)歷了0到1的艱辛,在百度時(shí)規(guī)劃了海量用戶的玩法。從業(yè)10年,專注互聯(lián)網(wǎng)運(yùn)營領(lǐng)域,包括產(chǎn)品運(yùn)營、用戶運(yùn)營、社區(qū)運(yùn)營和UGC運(yùn)營。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,不得轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

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

B端彈窗設(shè)計(jì)|如何科學(xué)定義彈窗的尺寸規(guī)范?

天宇 B端ui設(shè)計(jì)文章及欣賞

本文深入分析了B端彈窗設(shè)計(jì)的尺寸規(guī)范問題,提供了科學(xué)定義彈窗尺寸的方法和思路,旨在幫助設(shè)計(jì)師提升操作效率并確保良好的用戶體驗(yàn),希望對您在彈窗設(shè)計(jì)上的決策有所啟發(fā)。

相信大多B端設(shè)計(jì)師對web彈窗設(shè)計(jì)的規(guī)范都不陌生:比如彈窗按交互形式可分為模態(tài)彈窗和非模態(tài)彈窗;

按承載內(nèi)容類型分為:提示類、操作類、展示類彈窗;按彈窗承載信息量的大小可以分為:小尺寸彈窗、中尺寸彈窗、大尺寸彈窗…等等但最近,在做一個(gè)操作提效的需求設(shè)計(jì)時(shí)遇到了需求方對彈窗尺寸的規(guī)范挑戰(zhàn)~

大致需求是這樣:為節(jié)省彈窗內(nèi)對選項(xiàng)選擇的時(shí)間,現(xiàn)將原本彈窗內(nèi)的級聯(lián)選擇下拉框改成平鋪按鈕的形式。(見下圖)ps:本平臺為人工審核平臺,使用用戶為審核員,平臺設(shè)計(jì)要為審核員的審核效率負(fù)責(zé),審核效率一般表示為:單人單天(8小時(shí))xxx條審核量。

問題點(diǎn):承載內(nèi)容信息量不固定原因:彈窗內(nèi)用戶選擇項(xiàng)為不通過原因,而此選擇項(xiàng)是用戶根據(jù)自身企業(yè)的風(fēng)險(xiǎn)標(biāo)簽來自定義配置,這就涉及到級聯(lián)選擇數(shù)量的問題,有的客戶風(fēng)險(xiǎn)標(biāo)簽體系細(xì),多則幾百個(gè),有的客戶只需要粗粒度標(biāo)簽,例如只有一級標(biāo)簽,總數(shù)可能不超過十個(gè)…

設(shè)計(jì)思路

1.與用戶溝通-明確信息量的承載量級范圍

需求方:我要一個(gè)這么大的彈窗!好讓信息呈現(xiàn)更全面!

但做設(shè)計(jì)從來不是憑空定義一個(gè)彈窗大小,要做到有理有據(jù);前期選擇先跟使用此平臺的審核負(fù)責(zé)人溝通,來確定目前已接入的客戶在此處自定義配置的原因數(shù)量量級并整理出溝通結(jié)論:

存在少量客戶10個(gè)以內(nèi)的原因個(gè)數(shù)、常規(guī)客戶在30個(gè)左右的原因個(gè)數(shù)、現(xiàn)存一家客戶使用最大量級100+原因個(gè)數(shù)。但由于控制權(quán)在客戶方,原因量級不可控,未來也可能出現(xiàn)幾百的數(shù)量。在以上結(jié)論中,可以確定出可能的備選 600px中彈窗、800px的大彈窗、或者需求方提出的將近1200px的超大彈窗,但到底哪個(gè)最為合適需要進(jìn)一步判斷。

2.確定彈窗彈窗尺寸

在有可能的600px、800px、1200px三種寬度中選取最合適的彈窗尺寸,分別從操作效率與適配性角度對其進(jìn)行判斷。操作效率層面:

當(dāng)原因個(gè)數(shù)在30個(gè)以下時(shí):

若不同寬度時(shí),都選擇第一個(gè)處置原因,根據(jù)交互方法論–菲茨定律,指點(diǎn)設(shè)備到達(dá)目標(biāo)的與兩個(gè)因素有關(guān):(1)設(shè)備當(dāng)前位置和目標(biāo)位置的距離(D)。距離越長,所用時(shí)間越長;(2)目標(biāo)的大小(S)。目標(biāo)越大,所用時(shí)間越短。

由此可見此操作的最終目標(biāo)按鈕為右下角的確定按鈕,目標(biāo)按鈕大小不變,但整體的選擇距離是相對兩個(gè)較小彈窗要遠(yuǎn)的。D3>D2>D1,所用時(shí)間 T3>T2>T1。由于對審核員任務(wù)操作時(shí)間和效率要考慮到秒或毫秒級別,此大小對用戶快速完成此操作起到負(fù)向作用。

另外,當(dāng)原因個(gè)數(shù)10個(gè)以內(nèi)時(shí),可見此時(shí)彈窗寬度過寬,導(dǎo)致空白區(qū)域過大。

當(dāng)原因個(gè)數(shù)在30個(gè)以下時(shí),操作效率評分:

1200px ????

800px ??????

600px ??????

當(dāng)超過100個(gè)原因個(gè)數(shù)時(shí):1200px 一屏內(nèi)展示完全,不需要滾屏滑動(dòng);800px 可在兩屏內(nèi)展示完全,需要滾屏滑動(dòng);600px 超出兩屏展示才可展示完全,需要滾屏滑動(dòng)。

當(dāng)原因個(gè)數(shù)超過100時(shí),操作效率評分:

1200px ??????

800px ??????

600px ????

適配性層面:

根據(jù)市面主流屏幕分辨率尺寸調(diào)研:

市面上存在部分 1024 分辨率的顯示屏,所以:600px能夠適配所有市面主流分辨率顯示器;800px能夠適配所有市面主流分辨率顯示器;1200px不能能夠適配市面主流1024*768的分辨率顯示器,彈窗不能在顯示器內(nèi)顯示完全,固適配性相對較弱。

綜合三種彈窗大小的操作效率和適配性:

800px的表現(xiàn)最優(yōu),固選取800px的彈窗大小。

3.確定彈窗基本規(guī)范

高度規(guī)范:由于信息量的不同可以根據(jù)內(nèi)容多少進(jìn)行自適應(yīng)高度,限定max high 700px。由于一般超出800px可能出現(xiàn)瀏覽器外滾動(dòng)條,所以選取高度為600-800px之間。

滾動(dòng)條規(guī)范:限高后,若信息超出max high支持出現(xiàn)內(nèi)滾動(dòng)條。瀏覽器適配規(guī)范:瀏覽器窗口>800px,彈窗寬度保持固定寬度800px。瀏覽器窗口600-800px之間彈窗同步在600-800之間自適應(yīng)。瀏覽器窗口<600px,彈窗寬度保持600px,出現(xiàn)瀏覽器外滾動(dòng)條。

本文由人人都是產(chǎn)品經(jīng)理作者【Clippp】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于 CC0 協(xié)議。

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

日歷

鏈接

個(gè)人資料

存檔