本文將深入探討B(tài)端產(chǎn)品經(jīng)理如何通過精細化的管理方法和實戰(zhàn)策略,實現(xiàn)功能從無到有、從有到優(yōu)的全過程把控,助力企業(yè)在復雜的業(yè)務環(huán)境中脫穎而出。
蘭亭妙微(www.soiayq.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
蘭亭妙微(www.soiayq.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
B端表單標簽的對齊方式對用戶體驗和界面設(shè)計至關(guān)重要。本文深入探討了不同表單標簽對齊方式的優(yōu)劣勢及適用場景,包括行內(nèi)標簽、頂標簽、左標簽文字右對齊和左標簽文字左對齊等,幫助設(shè)計師在實際工作中做出最佳選擇,提升表單填寫效率和用戶體驗。
表單作為B端系統(tǒng)最常見的組件之一,一些常見的do、don’t想必大家已經(jīng)十分熟。今天我們嘮一嘮【表單標簽】這個細節(jié)。
在一些成熟的組件庫中,大都提供了上下布局的頂標簽、左右布局的左標簽等樣式可供選擇。左標簽樣式,在不同的產(chǎn)品中,又存在標簽文字左對齊、右對齊的情況,那它們之間差異在哪呢?如何選擇呢?
最近工作中,正好在梳理相關(guān)的規(guī)范,于是把自己的一些思考及處理經(jīng)驗整理了一下,分享出來~
先對齊一下語言:表單標簽、表單域。
會從這幾個維度進行比較,放一個簡易版表格,下文細說。
優(yōu)勢:
劣勢:
用戶操作阻塞:如輸入框聚焦,輸入內(nèi)容時,行內(nèi)標簽隱藏,用戶操作會受阻。
使用場景:
一般用于用戶心智已經(jīng)十分成熟的頁面,比如登錄頁、注冊頁等。
優(yōu)勢:
劣勢:
Y軸屏效低:對頁面縱向空間的利用率會比較低。
使用場景:
優(yōu)勢:
劣勢:
使用場景:
優(yōu)勢:
劣勢:
使用場景:
優(yōu)勢:
劣勢:
優(yōu)勢:
劣勢:
使用場景:
本文由人人都是產(chǎn)品經(jīng)理作者【Clippp】,微信公眾號:【Clip設(shè)計夾】
原文鏈接:https://www.woshipm.com/share/6208137.html
原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于 CC0 協(xié)議。
蘭亭妙微(藍藍設(shè)計)www.soiayq.cn 是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。
關(guān)鍵詞:UI咨詢、UI設(shè)計服務公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司、銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
編輯導語:交互設(shè)計本質(zhì)上就是設(shè)計產(chǎn)品的使用方式的過程,“如何才能做出合理的B端交互決策”是很多人都在思考的問題。在這篇文章里,作者聚焦具體的實戰(zhàn)場景,分享了一些自己做B端交互設(shè)計的經(jīng)驗,一起看看吧。
這陣子想了想關(guān)于交互知識的分享,還是應該要拓展成一整個系列的內(nèi)容,包含各類組件、控件和行為的解析。
基于我的分享習慣,我會盡量避免使用太過理論還是空泛的方式進行講解,而是聚焦具體的實戰(zhàn)場景,幫助大家理解如何做出合理的交互決策。
交互設(shè)計本質(zhì)上就是設(shè)計產(chǎn)品的使用方式的過程,賬號怎么填寫,表單怎么導出,數(shù)據(jù)怎么篩選,列表怎么排序等等……針對每個功能的使用方式,都可以花很長的時間去考慮其合理性。一個項目的交互,就是這個項目所有功能使用方式的總和。
那設(shè)計師如何開始項目的交互設(shè)計?直接進入細節(jié),開始跟著原型制定輸入框的狀態(tài),下拉菜單的展開邏輯嗎?
這樣肯定是不行的,項目的交互內(nèi)容又多又雜,設(shè)計師會很快陷入這些細枝末節(jié)中疲于奔命。頭疼醫(yī)頭腳疼醫(yī)腳,容易造成項目細節(jié)缺乏統(tǒng)一性,前后矛盾,體驗割裂。
所以,理解項目交互設(shè)計的正確思路,就要知道在項目中有哪些交互內(nèi)容,它們對應的層級和設(shè)計對象是什么。
在這里,我把需要設(shè)計的交互對象拆分成4個種類,它們從大到小依次為:
我們先圍繞在全局框架這個類型進行解釋,什么是項目的主要模塊排版和布局,以及為什么全局框架可以決定產(chǎn)品的主要使用依據(jù)和步驟。
比如大家都用過 Adobe 的軟件,應該會有個感覺,就是熟悉了其中一款后用下一個,立馬就能上手,完成一些最基本的操作。而如果不是 Adobe 系列的軟件,用起來感覺就感覺非常別扭,往往要從頭開始學起,比如對標 PS 的 Affinity Photo、Pixelmator。
為什么會出現(xiàn)這樣的反差?就是因為 Adobe 盡可能統(tǒng)一了自己生態(tài)內(nèi)的軟件全局框架,操作方式,讓全家桶用戶可以用最快的方法適應不同的軟件。
包括頂部的屬性欄,左側(cè)的工具欄,中間的標簽欄、創(chuàng)作區(qū)域,右側(cè)的不同工作窗口排列形式。
除了主要界面的布局框架外,還包含一些二級窗口的框架結(jié)構(gòu)也是統(tǒng)一和固定的。比如打開 PS 內(nèi)的首選項設(shè)置和屬性設(shè)置窗口,和其它幾個軟件的屬性設(shè)置窗口幾乎一致。
而在 Affinity 中,軟件首選項設(shè)置就沒有使用左側(cè)導航,而是類似 Mac 通用設(shè)置的快速入口分層模式,用慣了 Adobe 再換這個就會有股說不出的別扭。
可能有同學有疑問,Photoshop 并不是只有這幾種窗口,其它窗口不就樣式和上面這類不一樣嘛?那是因為窗口的框架肯定是要考慮功能和場景的,即使使用了多種窗口類型,那也是有規(guī)律的應用在操作方式相近的場景中。
再回想一下 PhotoShop 的基本操作流程,就是在創(chuàng)建文件以后,通過左側(cè)工具添加圖層元素到中間畫布區(qū)域進行排版,再在右側(cè)屬性欄中調(diào)節(jié)畫布對象的圖層順序、屬性。
PhotoShop 作為平面領(lǐng)域中的獨角獸,直接影響了絕大多數(shù)同類設(shè)計軟件的框架結(jié)構(gòu)和布局方法。因為絕大多數(shù)設(shè)計師學習設(shè)計的入門軟件都是 PS,想要讓用戶更快上手自己的軟件,那就應該順著他們已經(jīng)習慣的方式來。
所以,從 Sketch 開始,它的框架和操作流程都和 PhotoShop 高度相似,再之后的 Adobe XD、Figma、即時設(shè)計等,都應用了幾乎相同的全局框架,所以你只要掌握其中一個就能立馬熟悉其它軟件的使用。
而當實際功能和 UI 設(shè)計軟件高度相似的其它幾個 “辦公應用” 結(jié)構(gòu)框架不同時,上手就變得異常的困難和別扭。比如 Axure、Keynote、PowerPoint,先學了設(shè)計軟件再去學這幾個軟件的同學一定深有感觸。
而其它行業(yè)的軟件,如果沒有一個具備絕對主導性的產(chǎn)品作為標桿,那么每家公司的產(chǎn)品框架就各不相同。比如 3D 建模軟件中的 C4D、Blender、犀牛,視頻剪輯工具中的 Pr、Finalcut、達芬奇,你就是熟練掌握其中一款,對專業(yè)術(shù)語和必要功能邏輯了如指掌,也需要通過基本教學才能掌握其它同類軟件。
這就是框架帶來的作用,它是軟件使用方式和操作流程的主要依據(jù),其它細節(jié)的交互和操作都是附著于全局框架下的子集內(nèi)容。之所以交互設(shè)計要從全局框架開始,原因就是設(shè)計師要:
先確定產(chǎn)品整體操作的方式,再去考慮按鈕和表單那些細節(jié)的處理。
雖然前面舉例的都是軟件案例,但只要仔細留意,你們就會發(fā)現(xiàn)網(wǎng)頁端管理系統(tǒng)的操作框架和一般軟件別無二致。只不過相比較五花八門的專業(yè)軟件來說,B 端管理系統(tǒng)的操作框架模式經(jīng)過了長期的演化形成了固定的幾種套路。所以網(wǎng)上找到的管理界面案例,看起來只是圍繞幾個固定的布局翻來覆去的改顏色和圖標。
雖然它們看起來都很像,但依舊包含很多交互細節(jié)是需要設(shè)計師留意和制定的,不是簡單照搬就能設(shè)計出符合項目需要的全局框架。
所以,交互的全局框架到底怎么設(shè)計?
它不是一個個體,而是一個由多個組件、頁面類型、適配方式組成的合集概念。想要有效制定,就需要先了解合集中包含的要素有哪些,以及它們的基本特點。
在全局框架的范疇中,包含的組件模塊類型可以分成兩個大類,全局組件和浮層元素。
全局組件是指在項目多數(shù)頁面中都會存在并進行交互的組件,功能往往和當前頁面沒有直接聯(lián)系,比如路徑跳轉(zhuǎn)、色彩切換、快捷操作等。
而包含的浮層元素,本質(zhì)上也是全局組件,只是它們的共性是不會默認展示,需要被特定條件觸發(fā)才能被感知。比如斷網(wǎng)提示、刪除確認、側(cè)邊抽屜等都是全局化的浮層要素,也是需要在前期做好規(guī)劃的內(nèi)容。
下面就針對這個兩種類型的組件一一展開解釋。
(1)全局組件
a. 導航欄
導航欄不僅僅是 B 端管理系統(tǒng),也是網(wǎng)站設(shè)計中最重要的組件。優(yōu)秀的導航欄可以清晰的展示項目的頁面層級結(jié)構(gòu),幫助用戶高效的訪問目標頁面。全局框架制定的一步,就是根據(jù)項目的具體情況,選擇合適的導航類型。
導航欄主要使用上方、左側(cè)、混合型三種布局形式:
確定導航欄的類型,還需要確定導航的操作邏輯,包含幾級菜單,默認、展開、選中、關(guān)閉的交互。
b. 頂部欄
除了導航外,另一個基本必備的組件,就是頂部欄,除了放最基礎(chǔ)的用戶和設(shè)置選項外,它的角色定位要根據(jù)需求決定,最常見的包含下方幾種:
當然,以上幾種情況并不是絕對的。設(shè)計師需要根據(jù)項目的實際需求出發(fā),去梳理項目包含哪些全局控件或操作,然后再決定如何分配到導航或者頂部菜單上,而不是先定義菜單的類型再往里面填內(nèi)容和字段。
c. 頁面標簽欄
頁面標簽欄是一個類似瀏覽器標簽欄的組件,用來展示和關(guān)閉當前項目內(nèi)打開的頁面。
標簽欄的使用在遠古時期的 B 端項目應用非常普遍,因為已經(jīng)入土的 IE 瀏覽在那個年代是沒有頁面標簽功能的,導致開啟多個頁面的切換非常麻煩。
隨著瀏覽器標簽的普及,它已經(jīng)不適用于多數(shù) B 端項目,但依舊有一小部分項目是需要結(jié)合它的優(yōu)勢才可以更好的提升操作效率。
在一些需要持續(xù)打開和來回切換頁面的項目,如客服系統(tǒng)、財務審核、合同審批,因為打開新頁面僅僅需要加載內(nèi)容區(qū)域而不是全局,沒有新建窗口后的空白頁面加載過程,就能帶來更好的體驗。
d. 內(nèi)容模塊
內(nèi)容模塊是用來容納和顯示頁面相關(guān)內(nèi)容的模塊,這是個被很多人忽略的組件類型,包含模塊標題欄和操作區(qū)域。
一個成熟的 B 端項目會統(tǒng)一制定內(nèi)容模塊的組件結(jié)構(gòu),保證大量頁面和模塊之間樣式的統(tǒng)一性。比如下面的模塊案例。
如果只是簡單做個標題再統(tǒng)一間距參數(shù),那么這個組件也就沒必要在這里提了,因為這僅僅是設(shè)計問題而不是交互問題。內(nèi)容模塊的制定是為了盡可能考慮各種內(nèi)容場景,并進行統(tǒng)一處理。
例如要應用一級分頁標簽、多層級分頁標簽、操作按鈕、內(nèi)容折疊等??紤]的越全,后面處理起來越工整,否則就像下方淘寶賣家端千牛的案例一樣,損害用戶的體驗和操作效率。
內(nèi)容模塊是很難在初期一口氣全部定完,不僅需要產(chǎn)品經(jīng)理前期給出詳盡的需求和產(chǎn)品原型,還依賴設(shè)計師自身的經(jīng)驗判斷。
所以,它的制定流程是在前期先根據(jù)掌握的信息制定出最初的版本,然后在完成后續(xù)的頁面中逐漸進行補充、優(yōu)化并替換。
作者:酸梅干超人;
本文由 @超人的電話亭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash ,基于 CC0 協(xié)議。
蘭亭妙微(www.soiayq.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
B端設(shè)計規(guī)范如何正確搭建,好的設(shè)計規(guī)范對設(shè)計有什么幫助呢?設(shè)計夾老師在這篇文章中圍繞清晰、高效、友好、可控四個關(guān)鍵設(shè)計原則,帶你一步步建立起設(shè)計規(guī)范,推薦各位設(shè)計er和對交互產(chǎn)品、B端產(chǎn)品設(shè)計感興趣的童鞋閱讀。
Halo,這里是設(shè)計夾,今天為大家分享的是「B端設(shè)計」。B端設(shè)計離不開設(shè)計規(guī)范這個話題,而做好設(shè)計規(guī)范是一個龐大復雜工程,很多人對這些處于一知半解狀態(tài)。在這個系列文章里通過結(jié)合平時的項目案例來談談自己對B端設(shè)計規(guī)范的一些理解,希望可以帶來一些啟發(fā)。
本篇先談談設(shè)計規(guī)范制作的指導思想–設(shè)計原則,后續(xù)文章再展開講一下常見各種組件的設(shè)計規(guī)范。
設(shè)計規(guī)范作為B端設(shè)計中非常重要的一環(huán),它的作用主要體現(xiàn)在以下三個方面:
在日常工作中,當項目組收到一個新的需求時,如果已經(jīng)具備了成熟的設(shè)計規(guī)范體系,其工作效率往往會得到很好的提升。最后上線的頁面不用走查還原度。以下是具體工作流程:
通過前面內(nèi)容我們知道了設(shè)計規(guī)范對于產(chǎn)品設(shè)計意義重大,那么制定設(shè)計規(guī)范制定依據(jù)又是什么呢?這里就要引出設(shè)計原則這個話題,設(shè)計原則是設(shè)計規(guī)范的總綱領(lǐng),所有的設(shè)計規(guī)范都應當以設(shè)計原則為基準。設(shè)計原則主要包含以下內(nèi)容:
接下來就圍繞設(shè)計原則清晰、高效、友好、可控這四個方面展開講解。
清晰原則主要從視覺角度讓界面信息傳達合理,提高用戶信息獲取效率。主要包含對比,親密,對齊,重復四個方面。
1.對比
對比是指界面中為了區(qū)分信息層級,強化元素對比度,使用的很常見的一種手段。例如,下圖中利用大色塊按鈕與線框按鈕形成對比來凸顯關(guān)鍵按鈕;通過對文字字號加大,字體加粗,顏色加深來與弱文案形成對比,凸顯關(guān)鍵文字信息。
2.親密
如果信息之間關(guān)聯(lián)性越高,它們之間的距離就應該越接近,也越像一個視覺單元;反之,距離就應該越遠,也越像多個視覺單元。親密性的根本目的是實現(xiàn)組織性,讓用戶對頁面結(jié)構(gòu)和信息層次一目了然。
3.對齊
在界面設(shè)計中,將元素進行對齊,既符合了用戶的認知特點(我們往往傾向使知覺對象的直線延續(xù)還是直線,曲線延續(xù)還是曲線),也能引導用戶視覺流,讓用戶更流暢地接收信息。
4.重復
重復是指相同的元素在項目中重復引用,作用是可以有效降低用戶的學習成本,同時提高這些元素之間的關(guān)聯(lián)性。
高效原則體現(xiàn)在便捷、輕量、簡化、一致幾個方面,目的是通過合理的方式讓產(chǎn)品操作更加便捷;交互體驗與內(nèi)容更加輕量和簡化;以及產(chǎn)品風格保持一致。下面結(jié)合常見案例說明如何應用這一原則。
1.合理利用拖拽–便捷、輕量
在涉及到諸如上傳文件,排序,滑動輸入,搭建等需求時,合理采用拖拽交互往往可以打造更加便捷用戶體驗。
2.盡量減少不必要的跳轉(zhuǎn)–便捷、輕量
用戶操作過程盡量減少跳轉(zhuǎn),以實現(xiàn)交互減步長,從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開收起;能用展開收起就不用氣泡…依次類推(優(yōu)先級從高到低:原位>展開收起>氣泡>彈窗>抽屜>新頁面)
3.放大點擊熱區(qū)–便捷
放大可點擊按鈕熱區(qū),相對于較小點擊熱區(qū),具備更絲滑操作體驗。
4.懸停即現(xiàn)–輕量
利用懸停即現(xiàn),避免信息過于重復啰嗦,簡化頁面提高閱讀體驗。
5.折疊次要功能–簡化
頁面功能按鈕過多時,可將次要按鈕收納到一起,點擊時再展開,外面只展示高頻操作或重要按鈕,保證頁面內(nèi)容簡潔。
6.統(tǒng)一樣式–一致
一致性是指在不同頁面中相同操作應保持一致視覺與交互樣式,可有降低用戶學習成本與企業(yè)開發(fā)成本。
友好原則應貫穿用戶操作前,操作中及操作后三個階段,給予用戶及時反饋與幫助。
1.操作前
在用戶操作前給到合適的引導與幫助,有效減少用戶迷茫感。
2.操作中
通過交互效果及頁面樣式讓用戶可以清晰感知到自己當前操作。
3.操作后
利用界面中元素變化清晰直觀展示當前的狀態(tài)。
可控主要體現(xiàn)在自由和導航兩個方面。
1.自由
自由即指用戶可以自由完成一些操作,例如回退,撤銷,終止等。
2.導航
導航是指用戶隨時知曉當前所在位置,而且可以利用導航隨意到達目標頁面。
通過本篇內(nèi)容我們大概知道了制作設(shè)計規(guī)范主要方向,那么具體到每個組件上,我們該如何去設(shè)計呢?后續(xù)篇章將細分聊聊如何去設(shè)計「B端常見組件」。
專欄作家
作者:Clippp,每周精選設(shè)計文章,專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計思考。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于CC0協(xié)議。
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.soiayq.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
毫無疑問,表格之于B端產(chǎn)品而言是及其重要的一部分,那么,如何系統(tǒng)掌握B端產(chǎn)品中的表格設(shè)計呢?本文作者從表格設(shè)計規(guī)范與交互邏輯兩個角度提出了15點建議,干貨滿滿,希望對你有幫助。
表格作為B端產(chǎn)品中重要的界面組成部分,承載著內(nèi)容展示、數(shù)據(jù)記錄等多重任務。每家產(chǎn)品的表格看起來構(gòu)成差不多,但在交互細節(jié)上仍然有很多好的地方值得我們仔細思考。
本次通過整理10條B端表格設(shè)計規(guī)范+5條B端表格交互邏輯,系統(tǒng)掌握B端產(chǎn)品中的表格設(shè)計~
表格內(nèi)的信息通過對齊,會更加規(guī)范易理解,給用戶視覺上的統(tǒng)一感,且視線流動順暢,能夠讓人快速捕捉到所要的內(nèi)容。
默認展示的列數(shù)為3-8列,如果需要展示更多列數(shù),則需要優(yōu)先固定展示重要列,其余的列的內(nèi)容會以滾動條滑動而展示出來。
有操作時需固定,操作項不固定時無法快速定位會降低操作效率;重要信息固定,有利于快速獲取重要的內(nèi)容。
寬度的尺寸大小自適應,但需要根據(jù)文字的重要性顯示,重要文字內(nèi)容優(yōu)先完整顯示。(如果由于屏幕小表格會出現(xiàn)省略,就要考慮多一個瀏覽器自帶的title提示。)
注:當?shù)谝涣惺切蛱柣蚨噙x項時,列寬不需要太寬,這樣視覺不會顯得空洞。
字符不要多,如果文字太多,就需要做文字信息精簡化。同樣,對于專業(yè)術(shù)語或用戶不常見的名詞應給予一定的幫助說明。
表格內(nèi)容較多且有長文本時,長文本縮略展示;表格內(nèi)容較少時有長文本,長文本換行展示。
表格中經(jīng)常會出現(xiàn)空數(shù)據(jù)或無數(shù)據(jù)的情況,留白處理會給用戶造成一定的困惑和誤解,是系統(tǒng)沒有加載出來嗎?明智的做法,使用「-」填充顯示。圖片為空時使用圖片占位符。
同一項目中的操作列命名應該保持統(tǒng)一,例如:常規(guī)增、刪、改、查命名為新增、刪除、編輯、詳情。
操作項超過三個時,將操作低頻折疊收起,可以幫助頁面突出更加重要的信息,減輕空間壓力,減少干擾。
給數(shù)據(jù)做升降區(qū)分可以快速判斷數(shù)據(jù)的趨勢,國內(nèi)數(shù)據(jù)升圖標默認為紅色,降的為綠色。
全局操作為無需選擇數(shù)據(jù)內(nèi)容即可進行的操作,常見的有新增、導入、篩選。
批量操作就是對表格的多行數(shù)據(jù)同時操作,常見的有導出、刪除。
全局和批量都不屬于單個對象因此需要放在表格外,操作具體的位置排放根據(jù)操作的重要程度一次從左到右遞減。
條紋顏色:標題背景色透明度60%左右;(條紋顏色視覺上應該比標題欄弱一點)鼠標hover顏色:主題色透明度10%。
當閱讀豐富且繁多的表格時,由于屏幕有限,用戶不得不拖動橫向或縱向滾動條來閱讀信息。
固定表頭,能夠讓用戶明白當前單元格內(nèi)信息的屬性而不至于不知道該信息的意思。固定表頭也是一種界面友好性的體現(xiàn)。
可以讓無序信息內(nèi)容進行有序排列,排序分為升序和降序,一般用在數(shù)據(jù)、時間、數(shù)量上。
允許調(diào)整列的寬度來查看更加完整的縮略數(shù)據(jù)。被截斷的數(shù)據(jù),默認支持鼠標懸停時瀏覽器自帶title顯示完整數(shù)據(jù)。
呈現(xiàn)大型數(shù)據(jù)集時,水平滾動是不可避免的,通過橫向滾動查看其它數(shù)據(jù)。將首列進行固定(若包含勾選操作,則一起固定),以便用戶將數(shù)據(jù)與對象進行對應。
若表格是分頁處理的,分頁會放在上部、下部或上下部均有,分頁固定省去了用戶需要翻到頂部或底部進行操作的麻煩。
作者:譚檀檀
本文由 @Clippp 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載
題圖來自 Pixabay,基于 CC0 協(xié)議
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.soiayq.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
都是交互反饋和提示組件,大家可能會疑惑:文字氣泡 Tooltips 和氣泡卡片 Popover 的區(qū)別是什么,兩者之間的應用場景如何?本文對兩者的差異進行總結(jié),希望對你有所幫助。
同樣都是交互反饋及提示組件,你可能會疑惑:文字氣泡 Tooltips 和氣泡卡片 Popover 有什么區(qū)別?分別有哪些特定的使用場景?
本文就來詳細分析下這兩個組件的區(qū)別和聯(lián)系,幫助你做好應用。
氣泡卡片(Popover)是當用戶點擊 / 鼠標移入元素時,就會彈出氣泡式的卡片浮層。當對于某個元素有更多的解釋性描述和相關(guān)操作時,這些內(nèi)容可以收納到元素的氣泡卡片中,根據(jù)用戶的操作行為進行展現(xiàn)。
其用法特征是:
1. 用戶可以在浮層卡片上進行相關(guān)操作,也即氣泡卡片可以并需要承載更復雜的內(nèi)容和交互功能。
2. 卡片中可以包括的內(nèi)容有:文字說明,圖片內(nèi)容,操作按鈕,相關(guān)鏈接等等。
3. 組件功能側(cè)重于:承載信息和操作。即收納并在需要的時候展示與該元素內(nèi)容相關(guān)的信息和操作。這些信息的特征通常是:
文字氣泡(Tooltips)是相對簡單的文字提示氣泡框。用戶使用鼠標移入元素后顯示提示,移出后提示消失。
其用法特征是:
1. 文字氣泡通常不承載復雜的信息和操作,僅提供一段文案解釋,也即用戶在文字氣泡中不能做除閱讀外的其它操作。
2. 該組件功能側(cè)重于:解釋說明。即對局部內(nèi)容或元素進行文字性的解釋說明。通常來說該氣泡是對其載體本身的解釋,比如:
有同學看過 Ant Design 組件庫提供的組件樣例,會覺得氣泡卡片 Popover 是白色背景,而文字氣泡 Tooltips 是半透明黑色背景。
其實這兩個組件的背景顏色上的差異并不是重點,因為這兩個組件都可以使用其他顏色(比如帶有透明度的品牌色)做背景底色。顏色并不具備唯一標準。AntD 就提供了多種顏色的文字氣泡樣式:
也許你已經(jīng)發(fā)現(xiàn),即使我們將一個組件的使用規(guī)范和應用場景解釋得再全面,在使用時也總會出現(xiàn)一些特殊的業(yè)務需求和應用場景無法嚴格按照規(guī)范來執(zhí)行。
面對復雜多樣的業(yè)務需求,我們更應該學會:在理解業(yè)務需求的基礎(chǔ)上,合理調(diào)整組件的使用方式和樣式。
組件的規(guī)范對設(shè)計師來說并不應該是限制或約束,而是一種能夠幫助我們快速實現(xiàn)產(chǎn)品設(shè)計一致性,保證基礎(chǔ)體驗的快速方式。
專欄作家
元堯,人人都是產(chǎn)品經(jīng)理專欄作家。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于 CC0 協(xié)議。
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.soiayq.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
藍藍設(shè)計的小編 http://www.soiayq.cn