組件是設(shè)計(jì)師常用且基礎(chǔ)的知識(shí)點(diǎn)，隨著軟件設(shè)計(jì)和開發(fā)越來(lái)越成熟，已經(jīng)延伸出很多的類型，能否正確合理的使用也是衡量交互設(shè)計(jì)水平的一個(gè)標(biāo)準(zhǔn)。文章里理論知識(shí)比較少，我想說(shuō)點(diǎn)比較實(shí)用的東西，給大家解惑。所以關(guān)于基本的控件/組件類型的基礎(chǔ)知識(shí)不做過(guò)多說(shuō)明，理論和實(shí)踐相輔相成，理論知識(shí)大家可以去優(yōu)秀平臺(tái)學(xué)習(xí)并吸收，但實(shí)踐需要帶入更多的思考。
控件可以理解為平臺(tái)系統(tǒng)定義的某種形式，嚴(yán)格意義上來(lái)說(shuō)，控件的專業(yè)叫法為“原生控件”，不過(guò)大家都習(xí)慣性的順口說(shuō)“控件”，這樣會(huì)更簡(jiǎn)單點(diǎn)。
組件從字面理解就是組裝而成，在技術(shù)層面，代碼是需要封裝的，那被封裝在一起，就可以形成組件，能自定義內(nèi)容，名稱等。
原生控件相比較組件，顆粒感更細(xì)，一個(gè)組件可以包含多個(gè)控件，單個(gè)控件也可以作為組件。可以使用一個(gè)簡(jiǎn)單的例子來(lái)闡述他們的關(guān)系，控件就好比是藥材，那么藥方就可以理解成是一個(gè)組件。如果還不能理解，那可以用更具體的案例來(lái)說(shuō)明下；
如下圖是用戶登陸流程中的一個(gè)交互組件，該組件由兩種原生控件來(lái)組成，輸入框和按鈕，這樣結(jié)合就構(gòu)成“賬號(hào)輸入”的組件；
再如下圖，單獨(dú)的輸入框控件也可以成為一個(gè)獨(dú)立的“賬號(hào)輸入”組件；
以上兩個(gè)例子，說(shuō)明了組件可以由單一或多個(gè)的控件類型進(jìn)行組成，如何去定義組件的構(gòu)成，其實(shí)還需要結(jié)合具體的設(shè)計(jì)需求，上面第一個(gè)組件給賬號(hào)修改增加一個(gè)按鈕的控件，讓用戶可以通過(guò)按鈕清除所有的字段，讓用戶直接重新輸入，通過(guò)手動(dòng)和按鈕操作的兩種方式去進(jìn)行賬號(hào)修改，第二個(gè)組件僅支持手動(dòng)鍵入進(jìn)行修改。通過(guò)增加了清除的交互方式，組件的構(gòu)成就會(huì)有不一樣的設(shè)計(jì)方式。
各平臺(tái)基本都有自己獨(dú)立的設(shè)計(jì)體系，有自己定義的組件和組件庫(kù)，學(xué)習(xí)組件要了解它分為基礎(chǔ)組件和業(yè)務(wù)/高級(jí)組件兩種類型?；A(chǔ)組件是一種底層組件，例如輸入框、按鈕、單選框；其特點(diǎn)是比較獨(dú)立單一，通用性很強(qiáng)，適應(yīng)各種業(yè)務(wù)場(chǎng)景；業(yè)務(wù)組件是一個(gè)基礎(chǔ)組件集合而成的大組件，也可以叫高級(jí)組件，是復(fù)合型的區(qū)塊組件，主要是針對(duì)解決業(yè)務(wù)問(wèn)題；如下截圖是flomo筆記用用的網(wǎng)頁(yè)版本，以它的首頁(yè)為例；頁(yè)面按照左右結(jié)構(gòu)類型區(qū)分，可以定義為兩個(gè)大的業(yè)務(wù)組件，由淺入深，可以再細(xì)分，得到再定義更多的業(yè)務(wù)組件，這里，我以“發(fā)布筆記”的組件具體說(shuō)明下，它是怎么組成來(lái)解決業(yè)務(wù)問(wèn)題的；首先我們拆解下組成部分：文本內(nèi)容，工具按鈕（添加標(biāo)簽和圖片、文本編輯、快速引用等三種類型），發(fā)布按鈕。用戶發(fā)布筆記的行為主要為文字輸入-內(nèi)容編輯-發(fā)布完成；結(jié)合用戶行為和組件設(shè)計(jì)，解決了用戶輸入文本內(nèi)容，給筆記歸納，增加圖片，修改文本樣式，快速引用，最終進(jìn)行發(fā)布的問(wèn)題。產(chǎn)品在迭代過(guò)程中，我們會(huì)發(fā)現(xiàn)更多的需求，業(yè)務(wù)組件就要通過(guò)再優(yōu)化幫用戶解決實(shí)際問(wèn)題。
結(jié)合自己的學(xué)習(xí)和設(shè)計(jì)經(jīng)驗(yàn)，我把組件相關(guān)的內(nèi)容和知識(shí)整理定義為組件管理，包括組件的樣式定義，組件和組件庫(kù)設(shè)計(jì)，搭建，沉淀優(yōu)化應(yīng)該都算是它的組成部分。組件和組件庫(kù)作用，和基本概念我就不做過(guò)多描述了，畢竟市面上關(guān)于這些內(nèi)容已經(jīng)有很多了，我想從小的點(diǎn)去做深度思考，講點(diǎn)有用的東西，呈現(xiàn)給大家；組件和組件庫(kù)首先一定是遵循和圍繞著設(shè)計(jì)的原則、理念、目標(biāo)去構(gòu)思，如蘋果的《人機(jī)交互指南》里面提到的系統(tǒng)設(shè)計(jì)三大主旨（清晰、遵從、層次）和六大原則（完整性、一致性、直接性，反饋感、隱喻性、控制感），安卓系統(tǒng)《材料設(shè)計(jì)1，2》中提到的三大原則（材料就是隱喻、大膽，生動(dòng)，有意、運(yùn)動(dòng)提供意義）。還有國(guó)內(nèi)b端最權(quán)威的螞蟻設(shè)計(jì)體系A(chǔ)nt design，從設(shè)計(jì)價(jià)值觀延伸設(shè)計(jì)原則，從而思考設(shè)計(jì)模式。
這里可以總結(jié)，平臺(tái)在創(chuàng)造設(shè)計(jì)標(biāo)準(zhǔn)時(shí)，思考的方向都會(huì)不一樣，所以系統(tǒng)遵循什么，沒(méi)有統(tǒng)一的模式，況且這些名詞本身就很抽象，這需要設(shè)計(jì)師們?nèi)ニ伎紤?yīng)該把平臺(tái)系統(tǒng)設(shè)計(jì)成什么樣。這確實(shí)很依賴和考驗(yàn)設(shè)計(jì)師各方面的綜合能力。所以組件設(shè)計(jì)和搭建，它并不是某一個(gè)人的事，而是整個(gè)團(tuán)隊(duì)的任務(wù)。
組件和組件庫(kù)的設(shè)計(jì)和搭建過(guò)程中，需要了解系統(tǒng)平臺(tái)，是蘋果端還是安卓，web端，不同的系統(tǒng)設(shè)計(jì)的差異性很大，對(duì)應(yīng)系統(tǒng)的控件類型我們也要很熟練的掌握。例如安卓一直保留的原生的底部導(dǎo)航欄的操作控件（返回、主頁(yè)、菜單），反觀蘋果最早出現(xiàn)在底部的HOME鍵，隨著硬件設(shè)計(jì)的升級(jí)，物理按鈕的作用已經(jīng)完全被交互手勢(shì)操作替代，根據(jù)設(shè)計(jì)準(zhǔn)則，可以先設(shè)計(jì)出確定的初版組件樣式，然后設(shè)計(jì)師們要熟悉項(xiàng)目業(yè)務(wù)，深挖每個(gè)功能中的不同業(yè)務(wù)場(chǎng)景，并設(shè)計(jì)出對(duì)應(yīng)的業(yè)務(wù)組件；這樣設(shè)計(jì)師最終對(duì)于當(dāng)前組件進(jìn)行整合分類，做出版本的組件庫(kù)；組件和組件庫(kù)是設(shè)計(jì)和開發(fā)相結(jié)合的，設(shè)計(jì)師呈現(xiàn)頁(yè)面上的模塊是直觀的，但都是技術(shù)人員進(jìn)行底層代碼拼接的再封裝而成的，有規(guī)模的公司一般都會(huì)做成開源的組件庫(kù)。去提升項(xiàng)目人員之間的協(xié)作效率，復(fù)用率高，節(jié)省成本。如下圖是Ant design里面的部分按鈕組件的樣式和代碼演示，作為國(guó)內(nèi)獨(dú)一檔的免費(fèi)學(xué)習(xí)的設(shè)計(jì)體系網(wǎng)站。如果大家能夠從頭到尾研究一遍，相信對(duì)你構(gòu)建組件和組件庫(kù)有十分大的幫助。
最后組件和組件庫(kù)的優(yōu)化迭代是貫穿整個(gè)產(chǎn)品設(shè)計(jì)的生命周期的，從搜集組件需求、思考組件優(yōu)化、設(shè)計(jì)組件優(yōu)化方案、驗(yàn)收更新組件和組件庫(kù)；
搜集組件需求
項(xiàng)目角度：設(shè)計(jì)師開發(fā)過(guò)程中遺漏的、新的業(yè)務(wù)場(chǎng)景中發(fā)現(xiàn)的組件問(wèn)題，設(shè)計(jì)和開發(fā)者評(píng)審討論出來(lái)的包括影響協(xié)作效率的，不合理的問(wèn)題；用戶體驗(yàn)：產(chǎn)品中的用戶反饋的功能體驗(yàn)不好，使用時(shí)體驗(yàn)差的模塊；外部借鑒：團(tuán)隊(duì)人員從優(yōu)秀的組建案例中發(fā)現(xiàn)的可借鑒的需求；
思考組件優(yōu)化
思考方向1：設(shè)計(jì)師可以查閱資料，研究?jī)?yōu)秀的組件平臺(tái)，從成熟的產(chǎn)品中查看同類的組件設(shè)計(jì)案例；或者和開發(fā)者、設(shè)計(jì)師進(jìn)行深度交流，得到有用的建議；
思考方向2：結(jié)合業(yè)務(wù)場(chǎng)景，最好能夠?qū)?yīng)用場(chǎng)景窮舉梳理出來(lái)，具體到某個(gè)的功能，考慮該功能里存在的每一個(gè)場(chǎng)景中，組件需要有什么樣的狀態(tài)和變化；
設(shè)計(jì)組件優(yōu)化方案
設(shè)計(jì)師根據(jù)以上步驟完成組件優(yōu)化的分析之后，可以相對(duì)應(yīng)的設(shè)計(jì)組件優(yōu)化方案，組織開發(fā)人員一起多次的評(píng)審，大家一起去討論完善，最終技術(shù)人員再進(jìn)行組件代碼的開發(fā)和封裝；組件設(shè)計(jì)優(yōu)化，設(shè)計(jì)師要注意在既定的設(shè)計(jì)原則下合理優(yōu)化，要保留分析材料和思考過(guò)程，進(jìn)行有理有據(jù)的評(píng)審論證；
驗(yàn)收更新組件和組件庫(kù)
當(dāng)開發(fā)人員將組件樣式通過(guò)代碼落地之后，優(yōu)化中的組件方案需要帶入到實(shí)際功能場(chǎng)景中進(jìn)行測(cè)試檢查，驗(yàn)證組建優(yōu)化的是否符合預(yù)期，在優(yōu)化過(guò)程中，可以用一張《組建優(yōu)化表》進(jìn)行記錄，可以方便項(xiàng)目人員追蹤和查看。
組件的設(shè)計(jì)本質(zhì)上也是為了解決某種特定場(chǎng)景的問(wèn)題。例如提示彈窗，為了讓用戶在操作過(guò)程中有反饋提示，提示中又可以通過(guò)解決某種場(chǎng)景問(wèn)題，選擇讓用戶進(jìn)行操作或者不操作，所以平臺(tái)設(shè)計(jì)出這種彈窗組件，即模態(tài)和非模態(tài)彈窗類型。下面通過(guò)兩個(gè)例子，結(jié)合功能和場(chǎng)景具體分析產(chǎn)品應(yīng)該如何做組件設(shè)計(jì)；
我們?nèi)ド痰曩?gòu)買東西使用支付寶支付的過(guò)程中，可以通過(guò)掃描商家二維碼，進(jìn)行轉(zhuǎn)賬交易，轉(zhuǎn)賬支付的流程主要包括輸入數(shù)額，選擇支付方式，確認(rèn)支付；因?yàn)槊總€(gè)流程中的組件都十分復(fù)雜，我們僅拿其中一個(gè)流程，對(duì)用戶操作過(guò)程中涉及的組件進(jìn)行拆解說(shuō)明；輸入金額和添加備注流程：頁(yè)面的組件主要是用戶信息文本，輸入框、備注組件、鍵盤控件，彈框組件；這個(gè)流程包括2個(gè)行為事件，4個(gè)大的業(yè)務(wù)場(chǎng)景；
行為事件一：用戶在商店通過(guò)掃碼商家二維碼，分別兩次給商家轉(zhuǎn)賬20000和100000元的金額，
業(yè)務(wù)場(chǎng)景1：用戶沒(méi)有輸入任何金額
業(yè)務(wù)場(chǎng)景2：用戶轉(zhuǎn)賬輸入的金額沒(méi)有超過(guò)限制
業(yè)務(wù)場(chǎng)景3：用戶轉(zhuǎn)賬輸入的金額超過(guò)最大限制
業(yè)務(wù)場(chǎng)景123主要應(yīng)用金額輸入框組件，輸入框組件根據(jù)用戶操作行為，會(huì)有不一樣的設(shè)計(jì)，用戶沒(méi)有任何操作，輸入框內(nèi)有默認(rèn)文案提示“輸入付款金額”，用戶輸入金額后，計(jì)算單位超過(guò)‘百’，數(shù)字金額上方會(huì)有單位提示，同時(shí)顯示刪除按鈕，支持刪除，重新輸入，業(yè)務(wù)場(chǎng)景2中根據(jù)金額輸入范圍定義了產(chǎn)品業(yè)務(wù)規(guī)則，再細(xì)分出三種場(chǎng)景，不同范圍內(nèi)的金額，可以對(duì)應(yīng)的組件設(shè)計(jì)方案解決確認(rèn)轉(zhuǎn)賬確認(rèn)問(wèn)題；
（1）當(dāng)輸入金額范圍在1-50000，進(jìn)入新頁(yè)面，通過(guò)點(diǎn)擊按鈕組件，進(jìn)行轉(zhuǎn)賬確認(rèn)
（2）當(dāng)輸入金額范圍在50000-99999，在當(dāng)前頁(yè)面使用模態(tài)彈框組件，進(jìn)行轉(zhuǎn)賬確認(rèn)
（3）當(dāng)輸入金額范圍在100000-999999，進(jìn)入新頁(yè)面，重新輸入框內(nèi)輸入轉(zhuǎn)賬金額，進(jìn)行確認(rèn)，若兩次金額不一致，出現(xiàn)彈窗提示用戶操作。
當(dāng)輸入的金額超過(guò)限制后，彈框組件配合進(jìn)行超限的toast提示。
通過(guò)拆解行為事件1，我們細(xì)分出了3個(gè)業(yè)務(wù)場(chǎng)景，通過(guò)運(yùn)用輸入框、鍵盤、和toast彈窗，它們相互關(guān)聯(lián)解決了輸入金額產(chǎn)生的各種問(wèn)題；
無(wú)金額輸入時(shí)，輸入框能給予用戶提示，這是比較常見的輸入框組件設(shè)計(jì)，預(yù)置提示文本；
輸入金額未超出限制，輸入框中會(huì)帶入計(jì)量單位，這就是組件設(shè)計(jì)的細(xì)微之處，轉(zhuǎn)賬金額是一個(gè)關(guān)聯(lián)自己財(cái)產(chǎn)的行為操作，應(yīng)當(dāng)是需要謹(jǐn)慎的，所以計(jì)量單位也是在用戶輸入過(guò)程中出現(xiàn)，給用戶一個(gè)提示，沒(méi)有任何打斷操作的意思，出現(xiàn)的時(shí)機(jī)很適合，再加上輸入的文本數(shù)字已經(jīng)足夠醒目，能夠提示用戶輸入有足夠的準(zhǔn)確度，如果沒(méi)有加入這個(gè)字段，確實(shí)也不影響用戶操作，但這種雙重衡量的方式，潛意識(shí)里會(huì)讓自己輸入的更放心，不怕自己有誤差；這就是組件設(shè)計(jì)給用戶帶來(lái)的驚喜感。
金額超出限制后，通過(guò)組件toast提示“付款金額超限”，第一提示框組件很好的限制鍵盤的數(shù)字輸入，避免用戶無(wú)效輸入，第二toast提示框的觸發(fā)時(shí)機(jī)設(shè)計(jì)，這里的方案是當(dāng)輸入金額超百萬(wàn)，按數(shù)字鍵盤的時(shí)候就會(huì)給予提示，而不是等用戶輸入完之后，再去按確認(rèn)鍵的時(shí)候，彈出來(lái)提示金額超限。
行為事件二：用戶點(diǎn)擊備注按鈕，添加轉(zhuǎn)賬信息。
業(yè)務(wù)場(chǎng)景4：確認(rèn)完成輸入金額后，給商戶添加備注信息，20個(gè)字以內(nèi)；
輸入轉(zhuǎn)賬金額后，文字鍵盤上方出現(xiàn)備注按鈕，點(diǎn)擊彈出備注信息彈窗，在彈窗的輸入框中寫備注信息，其實(shí)添加備注，可以在頁(yè)面中使用文本框，可為何去使用彈窗中增加輸入框，確認(rèn)之后再展示到頁(yè)面中呢？輸入金額和添加備注的行為的優(yōu)先級(jí)來(lái)看，備注信息應(yīng)該是比較低的，信息的展示的重要性也比較低。首先如果使用文本框，和輸入框的組件層級(jí)在同一級(jí)，用戶的關(guān)注點(diǎn)會(huì)被干擾，所以使用不突出的文字按鈕組件進(jìn)行區(qū)別，另外備注文字按鈕出現(xiàn)的觸發(fā)條件也是因?yàn)橛休斎虢痤~這個(gè)動(dòng)作，所以備注的信息展示在產(chǎn)品設(shè)計(jì)中就是很弱。另外在彈窗輸入框中也提示了備注信息20個(gè)字以內(nèi)，有這樣的信息規(guī)則，彈窗組件比文本框更適合短文本的信息錄入，這樣和金額輸入框組件能夠被區(qū)分。
轉(zhuǎn)賬是涉及財(cái)產(chǎn)安全的業(yè)務(wù)，所以組件的設(shè)計(jì)除了解決不同場(chǎng)景下用戶體驗(yàn)問(wèn)題（及時(shí)反饋、合理提示、增加驚喜、操作方便），還要處理核心的業(yè)務(wù)問(wèn)題（保證用戶的財(cái)產(chǎn)問(wèn)題）
最近在做智慧電視項(xiàng)目時(shí)，產(chǎn)品經(jīng)理提出在播放器頁(yè)面，做一個(gè)“非會(huì)員用戶可以體驗(yàn)視頻高清晰度“的需求，主要目的是為了引導(dǎo)用戶體驗(yàn)高清晰，提升用戶的會(huì)員充值率。這里就通過(guò)解析如何通過(guò)組件設(shè)計(jì)解決這個(gè)問(wèn)題；
首先我們結(jié)合業(yè)務(wù)規(guī)則有以下兩點(diǎn)
（1）：該視頻內(nèi)容資源是付費(fèi)試看還是免費(fèi)
（2）：高清晰度體驗(yàn)時(shí)間，單次內(nèi)容高清晰度體驗(yàn)時(shí)間，累計(jì)高清晰度體驗(yàn)總時(shí)間
考慮到用戶在全屏播放器，需要盡量少的對(duì)用戶觀影降低干擾，所以在設(shè)計(jì)時(shí)，利用提示框的組件，針對(duì)不同場(chǎng)景狀態(tài)，對(duì)組件進(jìn)行設(shè)計(jì)優(yōu)化。
用戶觀看付費(fèi)影片，因?yàn)樵嚳刺崾?，通過(guò)操作按鈕鍵，所以高清晰度體驗(yàn)的提示，通過(guò)提示文案來(lái)引導(dǎo)，避免按鍵操作沖突，組件設(shè)計(jì)如下圖；
在體驗(yàn)過(guò)程中，播放器單次高清晰度體驗(yàn)時(shí)間會(huì)有狀態(tài)變化，即正在體驗(yàn)-將要結(jié)束-已結(jié)束，組件設(shè)計(jì)如下圖：
累計(jì)體驗(yàn)總時(shí)間結(jié)束后，再次進(jìn)入到播放器，組件設(shè)計(jì)變?yōu)樘崾居脩粼撈懈咔逦?，組件設(shè)計(jì)如下圖：
用戶觀看免費(fèi)影片，因?yàn)槠疵赓M(fèi)，沒(méi)有其他場(chǎng)景下的按鍵沖突，所以高清晰度體驗(yàn)的提示，通過(guò)提示“文案+按鈕”來(lái)引導(dǎo)，組件設(shè)計(jì)如下圖；
體驗(yàn)過(guò)程中，播放器單次高清晰度體驗(yàn)時(shí)間也有狀態(tài)變化，即正在體驗(yàn)-已結(jié)束，組件設(shè)計(jì)如下圖：
累計(jì)體驗(yàn)總時(shí)間結(jié)束后，再次進(jìn)入到播放器，組件設(shè)計(jì)變?yōu)樘崾居脩粼撈懈咔逦?，并可以點(diǎn)擊操作，組件設(shè)計(jì)如下圖：
在提示組件設(shè)計(jì)整個(gè)過(guò)程中，考慮了用戶會(huì)員身份、視頻資源付費(fèi)類型、高清晰度體驗(yàn)時(shí)間等等因素，要持續(xù)保持用戶能夠觸達(dá)會(huì)員充值的頁(yè)面，所以在不同的情況下，始終保留遙控器按鍵可以操作，引導(dǎo)他們付費(fèi)，雖然頻繁的提示可能讓用戶反感，但最終功能上線后，也確實(shí)拿到了一定的成果，提示組件設(shè)計(jì)讓用戶付費(fèi)充值率有很大的提升。
組件設(shè)計(jì)的解析到這里就告一段落了。帶大家回顧下文章的內(nèi)容，主要有四點(diǎn)，第一點(diǎn)通過(guò)例子解釋了控件和組件的區(qū)別，第二點(diǎn)介紹了基礎(chǔ)和業(yè)務(wù)組件，第三點(diǎn)講解了如何進(jìn)行組件管理的內(nèi)容，第四點(diǎn)通過(guò)兩個(gè)具體的案例講解了組件設(shè)計(jì)在實(shí)際產(chǎn)品中的應(yīng)用和我的一些思考；總結(jié)以上幾點(diǎn)，組件設(shè)計(jì)一定不能脫離用戶場(chǎng)景和產(chǎn)品業(yè)務(wù)。在這個(gè)基準(zhǔn)下思考組件設(shè)計(jì)才會(huì)有最優(yōu)解。
藍(lán)藍(lán)設(shè)計(jì)(tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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。
關(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ā)
B端交互設(shè)計(jì)之內(nèi)容太多怎么辦
ZZiUP
北京
/
設(shè)計(jì)愛(ài)好者
/
3年前
/
10353瀏覽
版權(quán)
私信
關(guān)注
B端交互設(shè)計(jì)之內(nèi)容太多怎么辦
ZZiUP
關(guān)注
做設(shè)計(jì)的時(shí)候，尤其是B端頁(yè)面，我們一般按常用的場(chǎng)景去設(shè)計(jì)，但是內(nèi)容過(guò)多的時(shí)候如何在頁(yè)面中更好的顯示呢？
我們知道B端產(chǎn)品設(shè)計(jì)場(chǎng)景更復(fù)雜，內(nèi)容更加不可控，再加上電腦屏幕大小適配，頁(yè)面寬度可自由拉伸，種種因素都要我們更加仔細(xì)的考慮頁(yè)面的各種極限值情況，如何寫全面設(shè)計(jì)規(guī)約是難點(diǎn)。相信在設(shè)計(jì)評(píng)審會(huì)上開發(fā)和測(cè)試最常問(wèn)到的一個(gè)問(wèn)題也是：這里內(nèi)容過(guò)多怎么展示？雖然我們?cè)谠O(shè)計(jì)的時(shí)候是按照80%的場(chǎng)景去考慮，但是剩下20%的極限場(chǎng)景也需要我們給出設(shè)計(jì)規(guī)則。我根據(jù)工作中遇到的內(nèi)容過(guò)多的情況整理了以下這么多，當(dāng)然解決辦法也可能有更好的方式，都?xì)g迎大家補(bǔ)充～～
【目錄】
一、文字過(guò)多
1、標(biāo)題文字過(guò)多
標(biāo)題因?yàn)轫?yè)面、模塊等寬度限制，標(biāo)題文字超長(zhǎng)的極限情況如何顯示必然是需要考慮的。
具體設(shè)計(jì)和寫設(shè)計(jì)規(guī)則時(shí)要考慮場(chǎng)景、功能、頁(yè)面布局等等情況再選擇處理方式。1)只有標(biāo)題
a打點(diǎn):
注意要根據(jù)頁(yè)面布局結(jié)構(gòu)，給出標(biāo)題最大寬度，然后標(biāo)題文字過(guò)長(zhǎng)打點(diǎn)，hover出tips；優(yōu)點(diǎn)是保持頁(yè)面簡(jiǎn)潔、方便對(duì)齊；缺點(diǎn)是無(wú)法直觀看到全部?jī)?nèi)容;
b折行:
給出標(biāo)題最大寬度，然后標(biāo)題文字過(guò)長(zhǎng)則折行顯示；優(yōu)點(diǎn)是能夠直觀顯示出全部?jī)?nèi)容，缺點(diǎn)是內(nèi)容太多的話視覺(jué)不友好：
c先折行再打點(diǎn):
給出標(biāo)題最大寬度，然后標(biāo)題文字過(guò)長(zhǎng)則折行顯示，折超過(guò)(比如2行)再打點(diǎn)。適用于大部分場(chǎng)景下最多2行就能顯示全，而且文字內(nèi)容對(duì)用戶非常重要
2）有標(biāo)題還有其他說(shuō)明文字時(shí)
當(dāng)分組標(biāo)題和說(shuō)明文字結(jié)合時(shí)，一般要優(yōu)先顯示標(biāo)題區(qū)域；當(dāng)?shù)竭_(dá)說(shuō)明文字最小間距（比如40px）時(shí)，標(biāo)題打點(diǎn)，說(shuō)明文字顯示不下也打點(diǎn)；hover時(shí)出tips3）表單的標(biāo)題
標(biāo)題文字較多時(shí)一般換行顯示，最多顯示（比如2）行，更多打點(diǎn)顯示，鼠標(biāo)經(jīng)過(guò)顯示tips；換行后算整體高度，距離下面的表單間距保持一致；4）打點(diǎn)的規(guī)則
也就是從哪里開始打點(diǎn)，也是需要根據(jù)場(chǎng)景考慮的：a.尾部打點(diǎn)，也是最常用的
b.中間打點(diǎn)，比如sketch畫板的標(biāo)題展示不全時(shí)是從中間開始打點(diǎn)的；
c.特定位置打點(diǎn)，比如標(biāo)題里人名字過(guò)多時(shí)，沒(méi)辦法展示全，但是后邊的【等120人打標(biāo)簽】又是極其重要的信息，這時(shí)候就需要給定人名稱一個(gè)最大展示的寬度，超過(guò)最大寬度就在最后一個(gè)人名處打點(diǎn)顯示；
2.文本框內(nèi)文字過(guò)多
文本框需要考慮單行文本/多行文本、激活態(tài)/展示態(tài)下文字過(guò)多如何顯示
1）單行文本
a有字?jǐn)?shù)限制
很多場(chǎng)景下，輸入框都不是無(wú)限輸入的，需要產(chǎn)品給出最大范圍，這時(shí)主要考慮校驗(yàn)報(bào)錯(cuò)問(wèn)題:
在搜索框，往往會(huì)設(shè)置最大字?jǐn)?shù)，超過(guò)則會(huì)截?cái)?
b無(wú)字?jǐn)?shù)限制
輸入狀態(tài)時(shí)，文字過(guò)多，光標(biāo)定位在輸入框末尾，可無(wú)限輸入，輸入框頭部?jī)?nèi)容向前隱藏/截?cái)啵?/p>
展示態(tài)時(shí)，內(nèi)容從頭部開始顯示，輸入框末尾打點(diǎn)，或者漸隱，hover時(shí)可以選擇出不出tips：
輸入完成后的一些交互：
還有一種處理方式就是，超過(guò)字?jǐn)?shù)限制后直接截?cái)啵蛔屳斎搿?/p>
2）多行文本
a有字?jǐn)?shù)限制
b無(wú)字?jǐn)?shù)限制
3.介紹/說(shuō)明文字過(guò)多
用按鈕，展開收起內(nèi)容，展開收起可以常駐，也可以設(shè)置在鼠標(biāo)hover時(shí)在顯示出來(lái)。
二、彈層內(nèi)容過(guò)多
1、確認(rèn)對(duì)話框
寬度自適應(yīng)，文字自動(dòng)換行，設(shè)置最大寬度；設(shè)置最大高度，內(nèi)容過(guò)多則出滾動(dòng)條；還要給出滾動(dòng)區(qū)域，比如標(biāo)題+內(nèi)容的區(qū)域高度；
2、tips提示
tips寬高根據(jù)文字內(nèi)容自適應(yīng)，設(shè)置最大寬度；文字過(guò)長(zhǎng)時(shí)自動(dòng)換行，設(shè)置最大高度，超過(guò)最大高一般多于的數(shù)據(jù)不展示，因?yàn)閠ips都是比較輕的提示；
3、警告提示
寬度自適應(yīng)，文字自動(dòng)換行。設(shè)置容器最大高度，標(biāo)題+內(nèi)容數(shù)據(jù)過(guò)多，則產(chǎn)生滾動(dòng)條
4、全局提示
容器寬高自適應(yīng)，給出最大寬高，大于最高高度時(shí)出現(xiàn)滾動(dòng)條，反饋信息建議精簡(jiǎn)到一至兩行，icon位置固定不變。
5、模式彈層
彈層寬/高度可以給出定值，也可設(shè)置占視窗的百分比，設(shè)置占視窗的百分比，為了避免在窗口放大和縮小時(shí)彈層無(wú)限大或者無(wú)限小，一般就要同時(shí)設(shè)置最大最小寬度定值。比如設(shè)置彈層最大高度為頁(yè)面高度90% ，也可以設(shè)置100%，即高度全屏的彈層；高度超過(guò)頁(yè)面高度 90%時(shí),則顯示滾動(dòng)條，最小高300px;寬度在600px到1000px之間自適應(yīng)。
不管是什么彈層，其實(shí)都是承載內(nèi)容的容器，內(nèi)容很多時(shí)，容器不能隨內(nèi)容無(wú)限大就需要設(shè)置最大最小值或者百分比。
三、選項(xiàng)過(guò)多
1、選項(xiàng)較少
當(dāng)選項(xiàng)較少，空間足夠時(shí)，可以把選項(xiàng)平鋪展示，一方面能讓用戶直觀看到所有選項(xiàng)，另一方面也能減少用戶操作步驟；可以設(shè)置單選、復(fù)選
2、選項(xiàng)較多
當(dāng)選項(xiàng)很多，空間不夠時(shí)，需要用彈層把選項(xiàng)收起以節(jié)省頁(yè)面空間；
1）單選下拉選擇器
當(dāng)下拉內(nèi)容還很多，而且需要分類，那么就需要：分組下拉選擇器
2）復(fù)選下拉選擇器
a.個(gè)數(shù)過(guò)多
復(fù)選下拉框內(nèi)選中項(xiàng)【個(gè)數(shù)】過(guò)多時(shí)，需要給出下拉框的最大高度，超過(guò)最大高度則折行，出滾動(dòng)條：
b.字?jǐn)?shù)過(guò)多
選中項(xiàng)【內(nèi)容】過(guò)多，需要給出選中項(xiàng)文字一個(gè)最大寬度，超過(guò)打點(diǎn)hover時(shí)顯示tipsc.彈層規(guī)則
【下拉彈層內(nèi)】根據(jù)下拉選項(xiàng)內(nèi)容自適應(yīng)撐開，還需要給出彈層的最大高度為（比如290px），內(nèi)容過(guò)多產(chǎn)生滾動(dòng)條；
d.加入搜索功能
如果下拉彈層內(nèi)，選項(xiàng)非常多，那么用戶應(yīng)用起來(lái)比較費(fèi)勁，雖然有滾動(dòng)條能展示全部選項(xiàng)，但是從這么多選項(xiàng)中選出某個(gè)選項(xiàng)就比較難了。這時(shí)就可以在彈層上加【搜索框】解決，方便用戶搜索；也可以在下拉選擇框上直接設(shè)置檢索功能；四、按鈕/標(biāo)簽過(guò)多
1、用按鈕收起
最常用的解決方法就是用【更多按鈕】收起更多不常用的按鈕或標(biāo)簽；
比如：
2、箭頭切換，輪播
還可以用【左右箭頭】的方式進(jìn)行切換：
3、漸進(jìn)式設(shè)計(jì)
預(yù)先判斷用戶的操作，在用戶進(jìn)行特定操作后再出現(xiàn)按鈕；漸進(jìn)式設(shè)計(jì)是目前比較流行的，也是用戶體驗(yàn)比較好的。
1）hover時(shí)再出現(xiàn)要操作的按鈕：
2）勾選復(fù)選框后出現(xiàn)按鈕：
如下圖，選中選項(xiàng)后，篩選自動(dòng)收起為一行同時(shí)操作區(qū)域出現(xiàn)覆蓋篩選區(qū)，表格隨著篩選移動(dòng)；
取消所有勾選項(xiàng)或是點(diǎn)擊關(guān)閉按鈕，操作區(qū)收起恢復(fù)成篩選區(qū)，篩選恢復(fù)成勾選前的狀態(tài)；
還有teambition的文件庫(kù)，復(fù)選框勾選前：
復(fù)選框 勾選后出現(xiàn)行操作按鈕，按鈕覆蓋標(biāo)題的位置：
3）根據(jù)編輯態(tài)和展示態(tài)進(jìn)行區(qū)分：
展示態(tài)下頁(yè)面比較整潔，不顯示多余的按鈕：
編輯內(nèi)容后，出現(xiàn)操作按鈕：
輸入完成后的展示依然比較整潔：
五、表格內(nèi)容過(guò)多
B端產(chǎn)品的頁(yè)面常常會(huì)用到表格來(lái)承載一條條數(shù)據(jù)/記錄，那最好的情況就是表格列數(shù)較少，在最常見尺寸的屏幕下就能夠全部展示：
但是，往往表格字段比較多，列數(shù)多會(huì)出滾動(dòng)條，行數(shù)多出分頁(yè)；
出現(xiàn)滾動(dòng)條時(shí)為了關(guān)鍵的信息能夠一直顯示，常常會(huì)鎖定首列或者操作列：
1、左側(cè)列鎖定:
鎖定后，滾動(dòng)數(shù)據(jù)列表內(nèi)的滾動(dòng)條左側(cè)列首位置不動(dòng)，只滾動(dòng)右側(cè)的數(shù)據(jù)，向左滾動(dòng)的數(shù)據(jù)會(huì)被列首區(qū)域遮擋；
2、右側(cè)列鎖定:
滾動(dòng)數(shù)據(jù)列表內(nèi)的滾動(dòng)條右側(cè)列尾位置不動(dòng)，只滾動(dòng)左的數(shù)據(jù)，向右滾動(dòng)的數(shù)據(jù)會(huì)被列尾區(qū)域遮擋；
3、橫向滾動(dòng)條
數(shù)據(jù)寬度超過(guò)屏幕寬度，則顯示橫向滾動(dòng)條
4、縱向滾動(dòng)條
數(shù)據(jù)高度超過(guò)屏幕高度，則顯示縱向滾動(dòng)條；滾動(dòng)范圍為表頭與分頁(yè)之間的內(nèi)容區(qū)域；
六、功能過(guò)多
1、用導(dǎo)航劃分
頁(yè)面結(jié)構(gòu)層面上信息過(guò)多一般會(huì)用一級(jí)導(dǎo)航，二級(jí)導(dǎo)航的形式劃分內(nèi)容
2、切換頁(yè)簽收納
頁(yè)面內(nèi)容過(guò)多還常常用頁(yè)簽來(lái)收納；
3、加入面包屑
當(dāng)頁(yè)面層級(jí)較多時(shí)需要加面包屑引導(dǎo)用戶如何返回，告知用戶的位置；面包屑不僅能讓用戶不迷路，還可以用來(lái)快速定位內(nèi)容，便于用戶快捷的選擇；
4、抽屜收納
抽屜可以收納很多內(nèi)容和操作同時(shí)保持頁(yè)面整潔。
做設(shè)計(jì)的時(shí)候，尤其是B端頁(yè)面，我們一般按常用的場(chǎng)景去設(shè)計(jì)，但是內(nèi)容過(guò)多的時(shí)候如何在頁(yè)面中更好的顯示呢？
任務(wù)，到底是怎么來(lái)的？是原本就存在的？還是人為設(shè)計(jì)而來(lái)的？
在之前文章的基礎(chǔ)上加入了一些圖示，可視化自己的理解
寫文章來(lái)整理自己的思路，再談?wù)勛约簩?duì)蘋果產(chǎn)品的感受，歡迎一起討論啊
本篇旨在簡(jiǎn)明扼要地向大家介紹交互設(shè)計(jì)中的一些原則，幫助大家理解和真正在工作中應(yīng)用
例如，Windows和Mac操作系統(tǒng)的用戶在面對(duì)不同的軟件關(guān)閉方式時(shí)，會(huì)因?yàn)榱?xí)慣的差異而感到不適應(yīng)。這種不適應(yīng)性揭示了改變用戶習(xí)慣需要付出學(xué)習(xí)成本，而這種成本的高低也直接影響用戶對(duì)產(chǎn)品的接受程度。
用戶體驗(yàn)（UX）開始進(jìn)入一個(gè)全新的時(shí)代， 3D 世界。虛擬世界正在不斷與現(xiàn)實(shí)世界融合。改變永不停止。
今天，我們一起體驗(yàn)來(lái)自蘋果的新產(chǎn)品 Vision Pro，感受一下以虛實(shí)融合的 3D 空間，全新的空間體驗(yàn)概念，是如何整合到消費(fèi)者使用場(chǎng)景之中？我們?cè)谖磥?lái)設(shè)計(jì)中，需要注意哪些的重要事項(xiàng)？帶著無(wú)限的好奇，戴著 Vision Pro…
隨著科技的不斷進(jìn)步，用戶對(duì)于在線體驗(yàn)的需求也日益增長(zhǎng)在這個(gè)數(shù)字化時(shí)代，我們生活的每一個(gè)角落都充滿了屏幕一從智能手機(jī)到平板電腦，再到大型顯示器和電視，這些屏幕的尺寸和分辨率各異，要求我們的設(shè)計(jì)必須能夠靈活適應(yīng)各種設(shè)備和環(huán)境。這就是響應(yīng)式設(shè)計(jì)的魅力所在，它為我們提供了一個(gè)全新的視角，讓我們能夠創(chuàng)造出更加流暢、統(tǒng)一且個(gè)性化的用戶體驗(yàn)
1988年美國(guó)認(rèn)知心理學(xué)家唐納德·諾曼 (Donald Arthur Norman) 在他出版的The Psychology of EverydaThings (1990年再版時(shí)書名為The Design of Everyday Things，中文版譯為《設(shè)計(jì)心理學(xué)》) 一書中已經(jīng)提出了設(shè)計(jì)的概念模式應(yīng)由“設(shè)計(jì)模式”轉(zhuǎn)變?yōu)?ldquo;用戶模式”，設(shè)計(jì)要站在用戶體驗(yàn)的角度思考問(wèn)題，用戶體驗(yàn)這個(gè)概念被正式提出和獲得廣泛認(rèn)同。
1995年(唐·諾曼)創(chuàng)造了“用戶體驗(yàn)”了這個(gè)術(shù)語(yǔ)，用來(lái)描述他在蘋果公司時(shí)他的團(tuán)隊(duì)從事的廣泛活動(dòng)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com