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