起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)5Tips–助力管理平臺(tái)的信息設(shè)計(jì)
首先我們來看下面這幅圖：左邊是Dribbble聯(lián)合創(chuàng)始人設(shè)計(jì)師Dan Cederholm的辦公桌，非常干凈整潔。右邊是天才工程師?Jim Williams的辦公桌，大家第一眼感覺如何？是不是很凌亂。我們常說設(shè)計(jì)要謹(jǐn)記“Less is More”，簡潔干凈是人人都追求的，但有時(shí)有些復(fù)雜是不可避免的，比如下圖中工程師的桌面。仔細(xì)觀察其桌面，你會(huì)發(fā)現(xiàn)雖然這些物件看起來雜亂無章，但其 擺放還是有規(guī)律可尋的。 我進(jìn)入公司的兩年時(shí)間里，一直在做管理平臺(tái)的設(shè)計(jì)工作，而目標(biāo)用戶就是工程師。這些管理平臺(tái)都有共同的特點(diǎn)：業(yè)務(wù)邏輯復(fù)雜，信息數(shù)據(jù)海量，而且還要考慮用戶特定的使用場景和操作習(xí)慣。所以在設(shè)計(jì)中首要的兩個(gè)目標(biāo)就是： 1、保證功能完整流暢，同時(shí)兼顧易用性。 2、保證信息組織合理，同時(shí)兼顧可讀性。 在實(shí)現(xiàn)這些目標(biāo)的過程中，我總結(jié)了5條設(shè)計(jì)小技巧。下面，我將用一些產(chǎn)品實(shí)踐和案例來詳解設(shè)計(jì)過程中小技巧的應(yīng)用。 管理平臺(tái)的功能大部分需要通過填寫表單來實(shí)現(xiàn)，但由于其業(yè)務(wù)特點(diǎn)，它的表單填寫內(nèi)容繁多，邏輯復(fù)雜。若直接羅列所有表單內(nèi)容，一定會(huì)讓用戶望而生 畏，且容易出錯(cuò)。這時(shí)可以根據(jù)內(nèi)容類型，關(guān)聯(lián)邏輯等維度將表單分成多個(gè)主題，再根據(jù)前后邏輯關(guān)聯(lián)性，將這些主題分到多個(gè)網(wǎng)頁或單個(gè)網(wǎng)頁的不同部分，如果是 多個(gè)網(wǎng)頁，最好配以進(jìn)程提示，告知用戶需要的填寫步驟以及當(dāng)前所處進(jìn)度。有研究表明，比起完成一項(xiàng)大任務(wù)，人們更愿意去完成10個(gè)小任務(wù)，因?yàn)槊客瓿梢粋€(gè) 小任務(wù)就能給人帶來一定成就感。 云計(jì)算-云主機(jī)服務(wù)中，創(chuàng)建云主機(jī)的過程需要填寫15項(xiàng)內(nèi)容，根據(jù)信息類型和業(yè)務(wù)邏輯將內(nèi)容分為了三類，再加上一個(gè)確認(rèn)步驟，將整個(gè)表單填寫分到了四個(gè)網(wǎng)頁，雖然步驟變多，但卻可以讓信息更加有序，減少錯(cuò)誤的發(fā)生。 運(yùn)維平臺(tái)中添加監(jiān)控項(xiàng)需完成9項(xiàng)內(nèi)容，但前后主題之間沒有很強(qiáng)的邏輯關(guān)聯(lián)，因此在一個(gè)網(wǎng)頁中分成3個(gè)主題，即可添加成功。 最貴的不一定是最適合自己的，標(biāo)簽的對(duì)齊方式也是如此。根據(jù)不同的使用場景也要選擇不同的對(duì)齊方式。業(yè)界比較認(rèn)可的標(biāo)簽對(duì)齊方式有頂對(duì)齊、左對(duì)齊和 右對(duì)齊三種，Matteo Penzo的眼動(dòng)實(shí)驗(yàn)比較了三種方式的完成速度，頂部對(duì)齊標(biāo)簽方式，標(biāo)簽移動(dòng)到輸入框需50毫秒，比左對(duì)齊標(biāo)簽方式(500毫秒)快了10倍，比右對(duì)齊標(biāo) 簽方式(240毫秒)快了5倍左右。通過下表，可以看出三種對(duì)齊方式各有其優(yōu)缺點(diǎn)。但有時(shí)，完成時(shí)間并不是表單設(shè)計(jì)的唯一考慮因素。 （引用自Justin Mifsud的《An Extensive Guide To Web Form Usability》） 對(duì)于簡易表單可以使用頂對(duì)齊；對(duì)于較復(fù)雜表單，更傾向于選擇右對(duì)齊，而對(duì)于布局復(fù)雜的表單則可以用左對(duì)齊的方式。 云計(jì)算-關(guān)系型數(shù)據(jù)庫的創(chuàng)建實(shí)例中標(biāo)簽都較長，且要填寫的表單項(xiàng)數(shù)較多，綜合考慮后，為了讓用戶在一屏環(huán)境下填完，我選擇了更適合的標(biāo)簽右對(duì)齊方式。 雖然標(biāo)簽右對(duì)齊比左對(duì)齊的完成效率高些，但若在布局復(fù)雜的情況下標(biāo)簽右對(duì)齊會(huì)讓界面顯得非?；靵y，從而影響整體的信息瀏覽閱讀。所以在布局復(fù)雜的表單中一般會(huì)選擇左對(duì)齊。 當(dāng)然，對(duì)于一些空間受限，內(nèi)容又繁多的表單，還有一些創(chuàng)意的處理方法，如Matt?D.?Smith的設(shè)計(jì)。 漸進(jìn)展開額外內(nèi)容也是應(yīng)對(duì)復(fù)雜信息的一種手段。根據(jù)用戶的使用場景和習(xí)慣，將部分內(nèi)容預(yù)先隱藏，在用戶需要時(shí)，通過點(diǎn)擊適合的控件，再出現(xiàn)更多額外內(nèi)容，這樣可使界面保持簡潔，操作邏輯清晰。 云計(jì)算中創(chuàng)建安全組的表單，大部分用戶創(chuàng)建一條安全組規(guī)則即可滿足需求。對(duì)于有額外需求的用戶可通過點(diǎn)擊添加按鈕來補(bǔ)充。這樣在大多數(shù)情況下，頁面簡潔，而有需要時(shí)，也可以快速添加，不打斷用戶的操作流。 Airbnb個(gè)人資料表單的緊急聯(lián)系人選項(xiàng)，默認(rèn)情況只有一個(gè)說明，若需添加時(shí)，點(diǎn)擊編輯才會(huì)展開更多內(nèi)容。 云計(jì)算的時(shí)間選擇控件，對(duì)多數(shù)用戶來說，這些快捷選項(xiàng)基本滿足查看不同時(shí)間范圍內(nèi)的數(shù)據(jù)變化，所以自定義時(shí)間范圍就作為高級(jí)功能隱藏起來，如有需要通過鼠標(biāo)點(diǎn)擊自定義即可觸發(fā)。 雖然管理平臺(tái)的用戶多半都是經(jīng)驗(yàn)型用戶，但復(fù)雜的表單和特定的規(guī)則難免會(huì)讓他們有困惑的時(shí)候。在輸入框旁邊適時(shí)地顯示幫助信息，及時(shí)地告訴用戶該如 何填寫，以此減輕用戶的記憶負(fù)荷。同時(shí)，管理平臺(tái)的表單內(nèi)容通常會(huì)很多，如果在最后提交時(shí)才告知用戶有錯(cuò)誤，無法提交，想必此時(shí)用戶肯定會(huì)怨聲載道索性放 棄填寫。即時(shí)驗(yàn)證讓長表單的填寫成為一種實(shí)時(shí)溝通，它可以及時(shí)確認(rèn)用戶填寫的內(nèi)容是否合適，或者實(shí)時(shí)更新數(shù)據(jù)給用戶填寫參考。 填寫集群的名稱有其特殊的復(fù)雜規(guī)則，如果沒有即時(shí)幫助，讓用戶每次創(chuàng)建都記住規(guī)則再來填寫，顯然不可能，而每一步的實(shí)時(shí)驗(yàn)證，可以補(bǔ)救用戶在規(guī)則查看之余還會(huì)犯的錯(cuò)誤，順利完成任務(wù)。 每個(gè)用戶的數(shù)據(jù)庫服務(wù)器數(shù)量都有一個(gè)初始值，隨著創(chuàng)建會(huì)逐漸減少，限制提示可以提醒用戶填寫一個(gè)合理的數(shù)值。 對(duì)于一些較復(fù)雜的表單項(xiàng)，也可以嘗試在標(biāo)簽上添加提示。 而難以解釋的表單項(xiàng)，除了文字提示之外，還可以嘗試使用圖片來表達(dá)。例如信用卡的CVC碼，一般人都不清楚是什么，但用圖片來表達(dá)就一目了然了。 通常來說，文字可以準(zhǔn)確地表達(dá)信息，但是過多的文字卻會(huì)給界面帶來閱讀負(fù)擔(dān)，若將部分文字信息通過圖形化表達(dá)，則可以把信息更加直觀、準(zhǔn)確、清晰地傳達(dá)給用戶，以獲得理解和共鳴，甚至快速地被記住。在表格中適當(dāng)借助圖標(biāo)來代替文字還可以減少占用空間，讓表格主次分明。 在云主機(jī)名稱旁邊放上云硬盤的圖標(biāo)，用戶一目了然就可看出哪些云主機(jī)掛載了云硬盤，而無需再專門加一列數(shù)據(jù)，表明云硬盤的掛載情況。 性能監(jiān)控平臺(tái)的場景管理中，對(duì)每一個(gè)輪次都會(huì)有一系列使用頻繁的操作，為了讓用戶可以快速找到，且不迷失在文字理解中，用圖標(biāo)來表示這些操作既美觀又便捷。 sbb.ch的火車班次查詢列表，很多信息會(huì)通過圖標(biāo)來表達(dá)，很大程度地縮減了占用面積。雖然有一些圖標(biāo)的認(rèn)知需要一定的學(xué)習(xí)成本，但在熟悉之后，會(huì)讓信息傳達(dá)變得直觀高效。 以上就是我對(duì)管理平臺(tái)信息設(shè)計(jì)的一點(diǎn)心得。雖然管理平臺(tái)的用戶受眾面遠(yuǎn)不及內(nèi)容型產(chǎn)品，但這些用戶都是專業(yè)用戶，對(duì)數(shù)據(jù)的操作和瀏覽有更嚴(yán)格的要求，如何在實(shí)現(xiàn)所有功能的基礎(chǔ)上讓用戶覺得這類產(chǎn)品的使用是靈活且便捷，還有許多研究的點(diǎn)值得深入挖掘。 原文來自：網(wǎng)易UEDTip1：合理組織表單內(nèi)容
Tip2：選擇合適的標(biāo)簽對(duì)齊方式
Tip3：漸進(jìn)展開額外內(nèi)容
Tip4：即時(shí)幫助和即時(shí)驗(yàn)證
Tip5:?借助圖形化表達(dá)
結(jié)語
- 目前還沒評(píng)論，等你發(fā)揮！
