精品少妇无码视频,99久久国产免费福利,久久97久久97精品免视看

首頁

152024-5

為極端情況而設(shè)計(jì)

前言

當(dāng)我們?cè)谶M(jìn)行產(chǎn)品設(shè)計(jì)的時(shí)候，設(shè)計(jì)師會(huì)優(yōu)先考慮理想狀況下的各種場(chǎng)景，而理想的用戶流程是沒有任何問題和障礙的。但是人們很少按照我們期望的方式使用我們的產(chǎn)品。超出預(yù)期之外的情況，就是我們通常所說的「邊緣情況」，或者說「極端情況」。

事實(shí)上，針對(duì)不太理想的情況進(jìn)行設(shè)計(jì)同樣重要。如果沒有計(jì)劃界面如何處理異常情況，整個(gè)體驗(yàn)可能很快就會(huì)令人崩潰。

作為一名職場(chǎng)中合格的用戶體驗(yàn)設(shè)計(jì)師，避免在工作中遺漏各種邊緣情況的考慮，與規(guī)避在方案評(píng)審的時(shí)候會(huì)遭到評(píng)審會(huì)中其他同學(xué)的各種diss的尷尬，有時(shí)候業(yè)內(nèi)也會(huì)將“解決邊緣情況問題”的能力作為一個(gè)產(chǎn)品經(jīng)理或交互設(shè)計(jì)師是否有經(jīng)驗(yàn)是否資深的一個(gè)評(píng)判標(biāo)準(zhǔn)。。

所以，

設(shè)計(jì)方案的完整程度需要看是否有對(duì)邊緣情況的對(duì)應(yīng)處理方案。

產(chǎn)品設(shè)計(jì)其實(shí)是“向好避壞”并行的設(shè)計(jì)過程

，向好設(shè)計(jì)是要追求絕對(duì)的好，結(jié)合實(shí)際情況盡可能保證產(chǎn)品體驗(yàn)的舒適和驚喜，這是產(chǎn)品設(shè)計(jì)一定要為用戶的極致體驗(yàn)需要負(fù)責(zé)的；避壞設(shè)計(jì)是相對(duì)的壞，結(jié)合實(shí)際情況盡可能為一些低頻場(chǎng)景的極端情況做好容錯(cuò)方案和機(jī)制，這就是產(chǎn)品設(shè)計(jì)中常常提到的邊緣情況處理設(shè)計(jì)。

為什么要重視極端情況？

針對(duì)用戶體驗(yàn)中的邊緣情況進(jìn)行設(shè)計(jì)至關(guān)重要，

因?yàn)檫@些特殊場(chǎng)景雖然不太常見，但可能會(huì)對(duì)用戶體驗(yàn)產(chǎn)生重大影響。

通過解決邊緣情況，可以確保產(chǎn)品設(shè)計(jì)能夠滿足更廣泛的用戶需求和情況，從而提高可用性、可訪問性和用戶滿意度。主要有以下幾個(gè)方面的好處：

提高產(chǎn)品質(zhì)量和可靠性

：考慮邊界情況可以幫助發(fā)現(xiàn)并解決潛在的問題和漏洞，從而提高產(chǎn)品的質(zhì)量和可靠性。通過深入挖掘極端情況，可以發(fā)現(xiàn)在正常使用中可能不會(huì)遇到的問題。
增強(qiáng)用戶體驗(yàn)

：處理邊界情況可以確保產(chǎn)品在各種情況下都能提供良好的用戶體驗(yàn)。當(dāng)用戶遇到邊界情況時(shí)，如果產(chǎn)品能夠正確處理并給予合適的反饋，用戶將感到滿意，并且對(duì)產(chǎn)品的信任感會(huì)增強(qiáng)。
降低風(fēng)險(xiǎn)

：不考慮邊界情況可能會(huì)導(dǎo)致嚴(yán)重的問題，甚至是安全漏洞。通過在設(shè)計(jì)和開發(fā)過程中考慮邊界情況，可以降低產(chǎn)品出現(xiàn)故障或安全漏洞的風(fēng)險(xiǎn)，從而減少潛在的損失和責(zé)任。
滿足法律和標(biāo)準(zhǔn)要求

：在某些行業(yè)中，產(chǎn)品必須符合特定的法律法規(guī)或行業(yè)標(biāo)準(zhǔn)?？紤]到邊界情況是滿足這些要求的一部分，因?yàn)樗鼈兺ǔＲ螽a(chǎn)品能夠在各種情況下都能夠安全可靠地運(yùn)行。
增強(qiáng)產(chǎn)品競(jìng)爭(zhēng)力

：在當(dāng)今競(jìng)爭(zhēng)激烈的市場(chǎng)環(huán)境中，提供穩(wěn)健、可靠的產(chǎn)品可以幫助企業(yè)贏得用戶信任并提升競(jìng)爭(zhēng)力?？紤]到邊界情況可以幫助企業(yè)開發(fā)出更具有吸引力和競(jìng)爭(zhēng)力的產(chǎn)品。

所以考慮邊界情況對(duì)于確保產(chǎn)品的質(zhì)量、用戶體驗(yàn)和安全性至關(guān)重要，并且有助于降低風(fēng)險(xiǎn)并提高產(chǎn)品競(jìng)爭(zhēng)力

常見的極端情況有哪些

一、文本極限值

處理文本極限值在 UI 設(shè)計(jì)中是一個(gè)重要的考慮因素，特別是當(dāng)設(shè)計(jì)涉及到文本輸入框、文本區(qū)域或文本標(biāo)簽等元素時(shí)。以下是一些處理文本極限值的常見方法：

1、限制輸入長(zhǎng)度。

對(duì)于文本輸入框，可以設(shè)置最大字符數(shù)限制，以確保用戶輸入的文本不會(huì)超過預(yù)期的長(zhǎng)度。這可以通過前端或后端驗(yàn)證來實(shí)現(xiàn)，避免用戶輸入過長(zhǎng)的文本。

2、提供字符計(jì)數(shù)器。

在文本輸入框旁邊或下方顯示一個(gè)字符計(jì)數(shù)器，實(shí)時(shí)顯示用戶已輸入的字符數(shù)和允許的最大字符數(shù)。這可以幫助用戶了解他們輸入的文本長(zhǎng)度，并且知道何時(shí)達(dá)到了極限值。

3、友好的錯(cuò)誤提示。

當(dāng)用戶輸入超過最大字符數(shù)限制時(shí)，及時(shí)向用戶提供友好的錯(cuò)誤提示，說明他們已經(jīng)超出了文本長(zhǎng)度限制，并且指導(dǎo)他們?nèi)绾芜M(jìn)行修正。

4、自動(dòng)修剪或截?cái)辔谋尽?/div>

對(duì)于一些 UI 元素，可以自動(dòng)修剪或截?cái)喑鱿拗频奈谋?。例如，可以在顯示文本的區(qū)域中截?cái)喑鱿拗频淖址?，并在末尾添加省略?hào)。

5、動(dòng)態(tài)調(diào)整輸入框大小。

對(duì)于可調(diào)整大小的文本輸入框，可以根據(jù)用戶輸入的文本長(zhǎng)度動(dòng)態(tài)調(diào)整輸入框的大小，以確保用戶能夠看到他們輸入的所有內(nèi)容。

6、提供預(yù)覽功能。

在用戶輸入長(zhǎng)文本時(shí)，提供一個(gè)預(yù)覽功能，讓用戶可以在輸入之前查看他們輸入的文本在 UI 中的最終顯示效果，從而避免超過極限值。

7、

多行文本框。

如果用戶需要輸入大段文本，可以提供一個(gè)多行文本輸入框，允許用戶自由輸入任意長(zhǎng)度的文本，但也需要在適當(dāng)?shù)臅r(shí)候提醒用戶輸入的文本長(zhǎng)度限制。

綜上所述，處理文本極限值需要綜合考慮用戶體驗(yàn)和界面美觀性，通過設(shè)置限制、提供實(shí)時(shí)反饋、自動(dòng)修剪或截?cái)辔谋镜确绞?，以確保用戶能夠方便地輸入和管理文本內(nèi)容。

二、空狀態(tài)

處理空狀態(tài)是指在應(yīng)用程序或網(wǎng)站中，當(dāng)沒有數(shù)據(jù)或內(nèi)容可顯示時(shí)所呈現(xiàn)的界面狀態(tài)。這種情況下，用戶可能會(huì)感到困惑或失望，因此設(shè)計(jì)空狀態(tài)界面非常重要，以提供清晰的信息和引導(dǎo)。

以下是常見的空狀態(tài)使用場(chǎng)景以及處理建議：

1、

用戶主動(dòng)觸發(fā)

主要分為「內(nèi)容被清空/已完成」和「搜索結(jié)果為空」兩種情況。

1.1、內(nèi)容被清空/已完成

這種空狀態(tài)是用戶自主刪除所有數(shù)據(jù)或完成了所有任務(wù)的情況。一般此類場(chǎng)景不需要進(jìn)行操作引導(dǎo)，只需要用「插圖+正文」或「僅正文」的形式說明情況即可

1.2、搜索結(jié)果為空

當(dāng)用戶搜索關(guān)鍵字后沒有對(duì)應(yīng)的結(jié)果顯示時(shí)出現(xiàn)的空狀態(tài)。此場(chǎng)景需要用「插圖+正文」的形式說明情況，并視情況增加行動(dòng)連接引導(dǎo)用戶進(jìn)行下一步操作，例如：添加、查看等

友好的提示信息：當(dāng)搜索結(jié)果為空時(shí)，向用戶顯示友好的提示信息，說明搜索未返回任何結(jié)果，并且可能提供一些建議或建議用戶修改搜索條件。

相關(guān)建議或推薦：在搜索結(jié)果為空時(shí)，向用戶提供一些相關(guān)的建議或推薦，以幫助他們找到他們感興趣的內(nèi)容。這可以是熱門搜索、相關(guān)主題、或類似內(nèi)容的推薦。

2、

用戶被動(dòng)接受

主要分為「暫無消息/內(nèi)容/權(quán)限」、「初始狀態(tài)（新手指引）」兩種情況。

2.1、

暫無內(nèi)容/消息/權(quán)限

這種情況表示頁面暫時(shí)無數(shù)據(jù)的狀態(tài)，一般情況下使用「插圖+正文」的形式，必要時(shí)可增加行動(dòng)連接來引導(dǎo)用戶進(jìn)行下一步操作

2.2、

初始狀態(tài)（新手指引）

對(duì)于首次使用復(fù)雜流程功能的用戶來說，一個(gè)新手指引可以幫助用戶快速上手，也可以填充原本為空的界面。

除了空狀態(tài)之外，向用戶提供有關(guān)如何開始的說明非常有幫助。

教程是讓人們輕松了解應(yīng)用程序功能的好方法。在普通用戶界面中使用微妙的動(dòng)畫或提示可以讓用戶開始執(zhí)行一些關(guān)鍵任務(wù)。

最好的教程是不引人注目的。與其展示超長(zhǎng)的視頻或幻燈片說明，不如將提示置于體驗(yàn)本身的背景中，這可能非常有效。這有助于用戶邊做邊學(xué)，而不是被動(dòng)地接受大量信息。

僅在必要時(shí)才應(yīng)使用教程。如果您的界面是不言自明的，則可能不需要它。是否包含教程是您需要考慮的設(shè)計(jì)因素。另一種方法是引導(dǎo)用戶直接進(jìn)入他們的第一個(gè)任務(wù)，讓他們“邊做邊學(xué)”。

多鄰國的這個(gè)很棒的示例展示了如何將教程構(gòu)建到應(yīng)用程序體驗(yàn)中。它有助于指導(dǎo)用戶設(shè)置應(yīng)用程序，并直接進(jìn)入使用過程。

三、

用戶和系統(tǒng)的錯(cuò)誤

1、用戶操作錯(cuò)誤

每當(dāng)發(fā)生某種用戶輸入時(shí)，通常都有可能出現(xiàn)錯(cuò)誤?？紤]一下輸入長(zhǎng)表單的時(shí)候。這些是潛在用戶錯(cuò)誤的雷區(qū)。

即使我們盡力讓事情變得直觀，也很難完全消除發(fā)生錯(cuò)誤的可能性，這些都需要在設(shè)計(jì)階段進(jìn)行規(guī)劃。

有許多不同類型的錯(cuò)誤值得我們思考。

驗(yàn)證。

用戶沒有按照系統(tǒng)期望的方式輸入信息。

提交。

出現(xiàn)的問題不是用戶的錯(cuò)，但我們需要讓他們知道。

內(nèi)容。

用戶請(qǐng)求了我們無法提供的東西。

在設(shè)計(jì)產(chǎn)品時(shí)，您需要考慮可能發(fā)生錯(cuò)誤的每種情況。然后，您應(yīng)該為其設(shè)計(jì)一個(gè)狀態(tài)，以確保系統(tǒng)正常處理該錯(cuò)誤。

這可能很耗時(shí)，但正是對(duì)細(xì)節(jié)的關(guān)注才造就了設(shè)計(jì)精良的產(chǎn)品。

這里有一些不同的事情需要考慮......

錯(cuò)誤是如何出現(xiàn)的。

我們應(yīng)該使用動(dòng)畫或?qū)Ρ榷葋砦脩舻淖⒁饬Α?/div>

樣式和位置。

錯(cuò)誤通知應(yīng)直觀地鏈接到問題發(fā)生的位置。

語言。

錯(cuò)誤應(yīng)該以清晰、用戶友好且品牌化的方式編寫。不惜一切代價(jià)避免“技術(shù)演講”。

明確的解決方案。

在通知用戶錯(cuò)誤之后，我們還應(yīng)該提及解決方案。這可能是一條說明，或者是其他可能對(duì)他們有幫助的內(nèi)容的鏈接。

輸入錯(cuò)誤的密碼后，該字段會(huì)左右輕微晃動(dòng)（就像有人搖頭一樣）。這會(huì)引起用戶對(duì)問題的注意，但不會(huì)顯得突兀

2、系統(tǒng)錯(cuò)誤

服務(wù)器異常、無訪問權(quán)限、網(wǎng)絡(luò)異常（斷網(wǎng)、網(wǎng)速過慢、加載失敗、網(wǎng)絡(luò)連接失?。g覽器異常、數(shù)據(jù)出錯(cuò)；

異常狀態(tài)用來提醒用戶發(fā)生了未指定的系統(tǒng)錯(cuò)誤，需要用戶了解此情況，并且提供下一步引導(dǎo)或解決建議，為用戶解釋異常狀態(tài)的原因，解決困惑，提供解決辦法，引導(dǎo)用戶繼續(xù)產(chǎn)品流程而不是關(guān)閉窗口離開

四、

頁面內(nèi)容過多時(shí)的加載方式

還有一種情況就是頁面內(nèi)容過多的情況，這里我們不考慮頁面展示只考慮進(jìn)入頁面的加載，大家平時(shí)估計(jì)遇到過點(diǎn)開一個(gè)列表頁面，就一直在觀看“菊花轉(zhuǎn)”（頁面內(nèi)容加載狀態(tài)），等的時(shí)間如果超過5秒可能就會(huì)產(chǎn)生焦慮了，再多點(diǎn)時(shí)間直接就和產(chǎn)品說拜拜了，那么這種極端情況一般怎么處理呢?

1、

骨架屏

骨架屏是一個(gè)可選方案，也就是說不一定要有，有了會(huì)更好。

骨架屏適合頁面布局固定的頁面，目前很多APP都會(huì)使用骨架屏，常用的頁面有列表頁、詳情頁等。

一般骨架屏由開發(fā)寫，如果我們要做骨架屏，需要定義好骨架屏的樣式，讓開發(fā)照著寫，骨架屏實(shí)現(xiàn)難度我也跟開發(fā)同學(xué)咨詢過，很簡(jiǎn)單，所以可以放心大膽用。

2、

占位圖

占位圖應(yīng)該是許多新人容易忽視的地方，提及占位圖就不得不提到加載，為了減少用戶感知加載時(shí)間，應(yīng)用加載一般會(huì)先加載文字后加載圖片，可以緩解用戶等待的焦慮情緒。

如果這么做就涉及到一個(gè)問題：原本放圖片的位置拿什么來占位？

所以就出現(xiàn)了占位圖這個(gè)東西，當(dāng)圖片還沒有加載出來的時(shí)候，使用一個(gè)占位圖進(jìn)行占位，讓用戶知道這里是有東西的

占位圖一般有帶logo的圖片和純色圖，如果是加載視頻，一般還會(huì)在圖片上做一個(gè)視頻的圖標(biāo)，讓用戶知道這里是視頻。

五、頁面上滑處理

當(dāng)一個(gè)頁面向上滾動(dòng)時(shí)，頁面的元素會(huì)發(fā)生什么變化，場(chǎng)景的變化有導(dǎo)航欄置頂、標(biāo)簽欄置頂?shù)龋@些都是我們需要提前定義好的。

處理頁面上滑的交互是指當(dāng)用戶向上滑動(dòng)頁面時(shí)所觸發(fā)的交互效果或行為。這種交互可以增強(qiáng)用戶體驗(yàn)，并使用戶更輕松地瀏覽頁面內(nèi)容。以下是一些處理頁面上滑交互的方法：

1、導(dǎo)航欄

1.1、固定導(dǎo)航欄

即將導(dǎo)航欄固定在頂部，其余內(nèi)容上滑，我個(gè)人比較傾向于這種方式，當(dāng)頁面比較長(zhǎng)的時(shí)候可以讓用戶隨時(shí)可以看到導(dǎo)航欄，不僅僅是給習(xí)慣了導(dǎo)航欄的用戶增添一份安全感，更是因?yàn)楫?dāng)導(dǎo)航欄有功能入口（比如設(shè)置）的時(shí)候，用戶可以隨時(shí)看到并隨時(shí)點(diǎn)擊

1.2、內(nèi)容遷移

這就是一種內(nèi)容遷移到導(dǎo)航欄區(qū)域的情況，這種交互方式不僅能提升用戶的操作體驗(yàn)，也能提升產(chǎn)品的數(shù)據(jù)，比如當(dāng)關(guān)注入口曝光更多，點(diǎn)擊關(guān)注的概率就會(huì)有一定上升。

2、篩選欄

篩選欄的固定方式也極為常見，很多地方為了用戶可以方便做切換，都會(huì)把篩選欄固定在頂部，那么這時(shí)候就需要我們對(duì)交互進(jìn)行詳細(xì)的定義。

2.1、第一種是篩選欄本身就在頂部

當(dāng)篩選欄在頁面頂部時(shí)：

如果此時(shí)我們需要讓篩選欄固定在頂部，那么可以這么說明：

頁面上滑時(shí)，導(dǎo)航欄和篩選欄固定在頂部，其余內(nèi)容向上滑動(dòng)。

2.2、第二種是篩選欄在頁面中間

這時(shí)候有兩種情況，一種是篩選欄隨頁面一起上滑不做固定，另一種是篩選欄需要做固定。具體使用哪種需要視具體場(chǎng)景來定，下面說一下當(dāng)篩選欄需要固定時(shí)我們?cè)撊绾蚊枋鼋换ァ?/div>

我們可以以篩選欄為基準(zhǔn)

① 當(dāng)篩選欄位置未到達(dá)頂部時(shí)

頁面整體上滑（一般情況下導(dǎo)航欄當(dāng)然始終固定在頂部）

② 當(dāng)篩選欄的位置到達(dá)導(dǎo)航欄下方時(shí)

篩選欄固定，篩選欄下方內(nèi)容繼續(xù)向上滑動(dòng)

如何找到極端情況

有些設(shè)計(jì)師認(rèn)為，極端情況往往是意料之外的情況，但是實(shí)際上，絕大多數(shù)的極端情況是可以提前預(yù)測(cè)的。有兩種方法可以幫你找到極端情況：

1、

設(shè)計(jì)評(píng)審。

為了創(chuàng)造出色的設(shè)計(jì)，你應(yīng)當(dāng)主動(dòng)尋找極端情況。設(shè)計(jì)評(píng)審是一個(gè)非常有用的環(huán)節(jié)，它可以幫助產(chǎn)品團(tuán)隊(duì)找到許多潛在的優(yōu)勢(shì)案例。在產(chǎn)品設(shè)計(jì)的早期，就應(yīng)該進(jìn)行設(shè)計(jì)評(píng)審。為了獲得更好的結(jié)果，最好邀請(qǐng)開發(fā)人員和其他的團(tuán)隊(duì)成員參與此類會(huì)議。

2、

使用真實(shí)用戶測(cè)試。

盡早在其他的團(tuán)隊(duì)成員的幫助下尋找極端情況是一種很好的辦法，但是它不能保證你會(huì)發(fā)現(xiàn)所有的問題來源。只有在真正的用戶進(jìn)行測(cè)試的時(shí)候，才能幫你了解用戶使用你的產(chǎn)品的時(shí)候所面臨的問題。同時(shí)，值得一提的是，嚴(yán)格且有節(jié)制的可用性測(cè)試，用戶可能會(huì)因?yàn)榻?jīng)常被指示要做什么而很難暴露極端情況的存在。所以，最好創(chuàng)建一個(gè)讓用戶可以嘗試和探索的體系，在靈活的測(cè)試和充足的時(shí)間下，更容易找到問題。

結(jié)語

為各種可能發(fā)生的情況進(jìn)行設(shè)計(jì)

好的設(shè)計(jì)就是注重細(xì)節(jié)。

正是這種針對(duì)每種場(chǎng)景進(jìn)行設(shè)計(jì)的承諾，才使出色的體驗(yàn)與普通體驗(yàn)區(qū)分開來。作為設(shè)計(jì)師，你有責(zé)任針對(duì)這些邊緣情況進(jìn)行規(guī)劃。無論您是否為它們進(jìn)行設(shè)計(jì)，它們都會(huì)發(fā)生，所以最好做好準(zhǔn)備！

以上僅僅舉了幾個(gè)極端情況的例子，實(shí)際上還會(huì)有很多，若想盡量覆蓋全極端情況，在設(shè)計(jì)時(shí)可以多多思考，將自己切換成“找茬兒模式”，也可以尋求QA同學(xué)的幫助，因?yàn)樗麄冊(cè)趯懹美龝r(shí)會(huì)考慮的更多。即使努力去想可能發(fā)生的極端情況，但是有些極端情況還是可能會(huì)遺漏，到真正遇到了才知道，不過其實(shí)也說明了那些想不到的極端情況可能發(fā)生的概率更小。

總之，有些極端情況一定要處理，盡量做到給用戶一個(gè)好的體驗(yàn)，但是有些情況其實(shí)并不需要投入過多精力去思考該如何提升體驗(yàn)，因?yàn)楸旧砭筒皇钦５漠a(chǎn)品使用場(chǎng)景，只要在發(fā)生的時(shí)候保證產(chǎn)品可用性即可，因?yàn)檫€有更重要的產(chǎn)品主線體驗(yàn)需要不斷去迭代提升。

作者：王不二君
鏈接：https://www.zcool.com.cn/article/ZMTYxOTY5Ng==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

藍(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。

關(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ì)公司

評(píng)論(0) 瀏覽(502)

152024-5

UI設(shè)計(jì)公司打造的B端后臺(tái)管理界面欣賞與優(yōu)化

前端達(dá)人

在現(xiàn)代商業(yè)環(huán)境中，B端后臺(tái)管理界面的設(shè)計(jì)質(zhì)量直接影響到企業(yè)的運(yùn)營效率和員工的使用體驗(yàn)。本文將帶您欣賞和解析由專業(yè)UI設(shè)計(jì)公司打造的幾個(gè)優(yōu)秀的B端后臺(tái)管理界面設(shè)計(jì)案例，并分享一些優(yōu)化建議，以提升后臺(tái)系統(tǒng)的用戶體驗(yàn)和功能性。

藍(lán)藍(lán)UI設(shè)計(jì)公司的杰出案例

在眾多UI設(shè)計(jì)公司中，藍(lán)藍(lán)UI設(shè)計(jì)公司憑借其卓越的設(shè)計(jì)能力和豐富的項(xiàng)目經(jīng)驗(yàn)，打造了多個(gè)備受贊譽(yù)的B端后臺(tái)管理界面。其設(shè)計(jì)案例不僅美觀實(shí)用，還充分考慮了用戶的操作習(xí)慣和實(shí)際需求。

例如，在一個(gè)大型零售企業(yè)的后臺(tái)管理系統(tǒng)中，藍(lán)藍(lán)UI設(shè)計(jì)公司采用了簡(jiǎn)潔清晰的布局，結(jié)合現(xiàn)代化的設(shè)計(jì)元素，使得界面不僅美觀，還極大地提升了用戶的操作效率。通過直觀的導(dǎo)航欄和精心設(shè)計(jì)的圖表，用戶可以快速獲取所需信息，簡(jiǎn)化了復(fù)雜的數(shù)據(jù)管理流程。

優(yōu)化B端后臺(tái)管理界面的關(guān)鍵要素

在欣賞這些優(yōu)秀設(shè)計(jì)的同時(shí)，我們也可以總結(jié)出一些優(yōu)化B端后臺(tái)管理界面的關(guān)鍵要素：

簡(jiǎn)潔明了的布局

：后臺(tái)管理界面通常需要展示大量信息，簡(jiǎn)潔明了的布局可以幫助用戶快速找到所需內(nèi)容，減少操作時(shí)間。

直觀的導(dǎo)航

：清晰的導(dǎo)航結(jié)構(gòu)是提升用戶體驗(yàn)的關(guān)鍵。使用固定導(dǎo)航欄或側(cè)邊欄可以幫助用戶在不同模塊之間快速切換。

數(shù)據(jù)可視化

：通過圖表和圖形展示數(shù)據(jù)，比純文本更直觀、更易理解。適當(dāng)?shù)臄?shù)據(jù)可視化設(shè)計(jì)可以幫助用戶快速分析和決策。

響應(yīng)式設(shè)計(jì)

：確保后臺(tái)管理界面在不同設(shè)備上都能良好顯示，尤其是在移動(dòng)設(shè)備上的表現(xiàn)，這對(duì)于需要隨時(shí)隨地訪問后臺(tái)的用戶尤為重要。

用戶反饋機(jī)制

：在用戶進(jìn)行重要操作（如數(shù)據(jù)刪除或修改）時(shí)，提供及時(shí)的反饋或確認(rèn)提示，可以避免誤操作，提高系統(tǒng)的安全性和可靠性。

結(jié)語

總之，優(yōu)質(zhì)的B端后臺(tái)管理界面設(shè)計(jì)不僅需要美觀的視覺效果，還需兼顧功能性和用戶體驗(yàn)。通過參考藍(lán)藍(lán)UI設(shè)計(jì)公司等專業(yè)設(shè)計(jì)公司的成功案例，并結(jié)合以上優(yōu)化建議，相信企業(yè)可以打造出更加高效、便捷的后臺(tái)管理系統(tǒng)，提升整體運(yùn)營效率和用戶滿意度。

無論是新系統(tǒng)的設(shè)計(jì)還是現(xiàn)有系統(tǒng)的優(yōu)化，選擇一家經(jīng)驗(yàn)豐富、口碑良好的UI設(shè)計(jì)公司都是至關(guān)重要的。希望本文提供的案例欣賞與優(yōu)化建議能為您的B端后臺(tái)管理界面設(shè)計(jì)提供一些啟發(fā)和幫助。

評(píng)論(0) 瀏覽(723)

092024-5

PC端的頁面設(shè)計(jì)，如何優(yōu)雅呈現(xiàn)在移動(dòng)端？

前端達(dá)人

電商boss系統(tǒng)采購訂單頁面在移動(dòng)端呈現(xiàn)，我做了哪些思考？

PC端的頁面設(shè)計(jì)，如何優(yōu)雅呈現(xiàn)在移動(dòng)端？

在B端UI/UX設(shè)計(jì)領(lǐng)域，我們常常會(huì)遇到類似的需求：隨著業(yè)務(wù)的發(fā)展，需要將復(fù)雜系統(tǒng)中的核心功能摘出來，并在小程序或移動(dòng)應(yīng)用上呈現(xiàn)，以便客戶能夠便捷地使用和操作，從而提升工作效率。然而，實(shí)際操作中我們會(huì)發(fā)現(xiàn)，盡管對(duì)這些功能很熟悉，但是落地過程中卻會(huì)遇到一系列問題。

本文中，將分享我在將復(fù)雜電商BOSS系統(tǒng)的訂單頁面呈現(xiàn)在移動(dòng)端的設(shè)計(jì)過程，希望對(duì)大家有所幫助。通過本文，您將了解到以下內(nèi)容：

1、如何在設(shè)計(jì)過程中充分考慮電腦端和移動(dòng)端用戶的需求和使用習(xí)慣；

2、如何將復(fù)雜的訂單頁面優(yōu)化為簡(jiǎn)潔、易用的移動(dòng)端界面；

3、針對(duì)移動(dòng)端的限制和挑戰(zhàn)，如何進(jìn)行設(shè)計(jì)決策和權(quán)衡；

4、使用哪些有效的UX技巧來提升用戶體驗(yàn)和工作效率。

一、深入分析業(yè)務(wù)背景和使用場(chǎng)景

1、業(yè)務(wù)背景關(guān)系梳理

選款的零售商客戶通過衫海精選款下單后，訂單信息和訂單狀態(tài)會(huì)傳到BOSS后臺(tái)，相關(guān)負(fù)責(zé)人可隨時(shí)查看并處理。

2、為什么需要在移動(dòng)端呈現(xiàn)？

為了確保平臺(tái)高效履約，需要市場(chǎng)部同事隨時(shí)掌握訂單狀態(tài)，特別是

發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)和攬收已超時(shí)

的訂單，以便及時(shí)通知上下游。但是由于工作性質(zhì)，他們無法隨時(shí)坐在電腦面前，所以需要在小程序上呈現(xiàn)訂單信息，可以讓市場(chǎng)部同事隨時(shí)查看并處理訂單，避免出現(xiàn)訂單超時(shí)，客戶投訴的情況。

二、功能拆解

1、將電腦端訂單內(nèi)容拆分重組，信息歸類

2、訂單功能拆分后，主要分為以下四個(gè)部分

1）訂單狀態(tài)

訂單狀態(tài)包括：全部、待付款、備貨中、待收貨、已完成、已關(guān)閉。全部狀態(tài)下

新訂單、售后中、發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)、攬收已超時(shí)

的訂單類型需要重點(diǎn)露出，方便快速查詢。

設(shè)計(jì)差異：

1、訂單狀態(tài)：電腦端大屏橫向可以全部平鋪展示；移動(dòng)端則是橫向滑動(dòng)。

2、售后中、發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)、攬收已超時(shí)的訂單快捷入口，電腦端大屏可以全部平鋪展示；移動(dòng)端則需要換行，這里不做橫向滑動(dòng)是因?yàn)闀?huì)影響用戶的操作效率

2）訂單查詢條件

訂單查詢條件包括：訂單編號(hào)、時(shí)間排序、商品名稱、供應(yīng)商名稱、下單時(shí)間、訂單狀態(tài)、履約方、SKU編碼、商品ID、是否缺貨、所屬云倉等等。

設(shè)計(jì)思考：

分析用戶日常的使用習(xí)慣，對(duì)高頻操作的篩選項(xiàng)進(jìn)行提煉在移動(dòng)端展示，提升使用效率。低頻操作則不在移動(dòng)端展示。

經(jīng)過與業(yè)務(wù)方溝通，訂單編號(hào)、時(shí)間排序、商品名稱、供應(yīng)商名稱、下單時(shí)間、訂單狀態(tài)、履約方的使用頻次相對(duì)較多，

訂單編號(hào)、時(shí)間排序

使用頻次最高。

a、訂單編號(hào)/排序時(shí)間

設(shè)計(jì)差異：

1、訂單編號(hào)查詢：電腦端和移動(dòng)端都是直接輸入，但是電腦端支持批量查詢，單次查詢內(nèi)容會(huì)更多。

2、下單時(shí)間排序：電腦端采用input框的樣式，下拉篩選；移動(dòng)端是通過點(diǎn)擊切換排序方式，操作會(huì)更便捷。

b、商品/供應(yīng)商查詢

設(shè)計(jì)思考：

1、商品查詢：電腦端、移動(dòng)端都是直接輸入；

2、供應(yīng)商查詢：電腦端采用input框的樣式，下拉篩選；移動(dòng)端則是進(jìn)入新的頁面進(jìn)行選擇；兩者都支持關(guān)鍵字搜索；

移動(dòng)端不直接展開的原因是：供應(yīng)商數(shù)量多，在當(dāng)前頁面展示篇幅較長(zhǎng)，還涉及到分頁，會(huì)影響用戶的操作體驗(yàn)。

c、時(shí)間查詢

設(shè)計(jì)差異：

電腦端點(diǎn)擊出現(xiàn)時(shí)間選擇器，支持快捷查詢；移動(dòng)端點(diǎn)擊選擇跳轉(zhuǎn)到新頁面，時(shí)間全部鋪開展示；兩者都支持滑動(dòng)鼠標(biāo)(手指)連續(xù)選擇時(shí)間段。

d、訂單狀態(tài)查詢

設(shè)計(jì)差異：

電腦端采用input框，下拉選中；移動(dòng)端則是全部展示出來，采用勾選的方式進(jìn)行選擇。

3）批量操作

小程序不做批量操作功能。

4）訂單內(nèi)容

訂單內(nèi)容包括訂單編號(hào)、下單時(shí)間、零售商、商品信息、數(shù)量、發(fā)貨方式、買家信息、訂單狀態(tài)、實(shí)收款、訂單詳情、查看物流。這些內(nèi)容可以歸納為3類：

a、訂單信息 b、商品信息 c、操作。

a、訂單信息

訂單信息包括：訂單編號(hào)、下單時(shí)間、零售商、、發(fā)貨方式、買家信息、訂單狀態(tài)、實(shí)收款

設(shè)計(jì)差異：

電腦端面積大，內(nèi)容需要散開排列；移動(dòng)端面積小，內(nèi)容需要集中排列。

b、商品信息

商品信息包括：商品名稱、圖片、價(jià)格、貨號(hào)、規(guī)格、SKU編碼、供應(yīng)商、下單數(shù)量、拿貨數(shù)量、倉內(nèi)現(xiàn)貨、缺貨原因

設(shè)計(jì)差異：

同樣的內(nèi)容，移動(dòng)端更加聚焦，但是商品數(shù)量展示也偏少。

c、操作

操作包括：訂單詳情、查看物流

設(shè)計(jì)差異：

交互方式相同，都是跳轉(zhuǎn)到新頁面。

三、總結(jié)

由于屏幕大小和分辨率的不同，電腦端和移動(dòng)端頁面在功能的布局和信息展示上也會(huì)有所不同。

電腦端使用鼠標(biāo)操作，包含滑動(dòng)、左擊、右擊、雙擊等，相對(duì)來說單一，交互效果較少。而對(duì)于手機(jī)端來說，由于屏幕大小的限制，操作方式需要更加的豐富，通過這些豐富的操作來實(shí)現(xiàn)頁面和功能之間的交互。所以電腦端和移動(dòng)端相同功能的操作方式也會(huì)不同，組件也有所差異。在做設(shè)計(jì)時(shí)，盡量使用成熟的組件，給用戶良好的使用體驗(yàn)。

遇到復(fù)雜的設(shè)計(jì)需求，不要慌張，

核心都是看透事物的本質(zhì)，拆解為基礎(chǔ)的組件，再從根本上解決問題。

謝謝！

作者：西城門設(shè)計(jì)
鏈接：https://www.zcool.com.cn/article/ZMTYxOTQxMg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

評(píng)論(0) 瀏覽(631)

092024-5

探索 VR 和 AR 界面設(shè)計(jì)的美學(xué)：欣賞與思考

前端達(dá)人

虛擬現(xiàn)實(shí)（VR）和增強(qiáng)現(xiàn)實(shí)（AR）技術(shù)的發(fā)展為界面設(shè)計(jì)帶來了全新的挑戰(zhàn)和機(jī)遇。在這個(gè)充滿創(chuàng)新的領(lǐng)域中，設(shè)計(jì)師們不斷探索新的美學(xué)原則和用戶體驗(yàn)，為用戶提供更加沉浸式和豐富的體驗(yàn)。本文將通過一些精選的案例，分享一些令人贊嘆的 VR 和 AR 界面設(shè)計(jì)，以及對(duì)這些設(shè)計(jì)背后的思考和啟示。

1. 空間感的呈現(xiàn)：

在虛擬現(xiàn)實(shí)中，空間感是一個(gè)重要的設(shè)計(jì)元素。通過精細(xì)的場(chǎng)景設(shè)計(jì)、逼真的光影效果和流暢的動(dòng)畫，設(shè)計(jì)師可以打造出令人身臨其境的虛擬環(huán)境。例如，某 UI 設(shè)計(jì)公司最近推出的虛擬展覽應(yīng)用，通過高度還原的展覽場(chǎng)景和交互設(shè)計(jì)，為用戶帶來了仿佛置身于現(xiàn)場(chǎng)的體驗(yàn)。

2. 交互體驗(yàn)的創(chuàng)新：

增強(qiáng)現(xiàn)實(shí)技術(shù)為用戶帶來了全新的交互方式。例如，一款 AR 應(yīng)用可以利用手機(jī)攝像頭和虛擬元素的結(jié)合，將現(xiàn)實(shí)環(huán)境轉(zhuǎn)化為交互式的游戲場(chǎng)景。藍(lán)藍(lán)設(shè)計(jì)公司的一項(xiàng) AR 游戲項(xiàng)目就采用了這種創(chuàng)新的交互方式，用戶可以在現(xiàn)實(shí)場(chǎng)景中進(jìn)行虛擬物品的收集和互動(dòng)，增強(qiáng)了游戲的樂趣和參與感。

3. 用戶體驗(yàn)的關(guān)注：

無論是 VR 還是 AR，用戶體驗(yàn)始終是設(shè)計(jì)的核心。設(shè)計(jì)師們不斷優(yōu)化界面布局、操作流程和反饋機(jī)制，以提升用戶的使用感受和參與度。在虛擬現(xiàn)實(shí)眼鏡的顯示器上，合理的信息展示和交互設(shè)計(jì)尤為關(guān)鍵，以確保用戶能夠輕松地理解和操作。在一些 VR 應(yīng)用中，藍(lán)藍(lán)設(shè)計(jì)公司采用了簡(jiǎn)潔直觀的界面設(shè)計(jì)和自然流暢的交互方式，獲得了用戶的一致好評(píng)。

結(jié)語：

虛擬現(xiàn)實(shí)和增強(qiáng)現(xiàn)實(shí)技術(shù)的蓬勃發(fā)展，為界面設(shè)計(jì)帶來了前所未有的挑戰(zhàn)和機(jī)遇。通過不斷的探索和創(chuàng)新，設(shè)計(jì)師們正在打造出更加沉浸式、交互式和人性化的 VR 和 AR 界面，為用戶帶來全新的體驗(yàn)和感受。期待未來，我們將繼續(xù)關(guān)注這個(gè)領(lǐng)域的發(fā)展，并為之貢獻(xiàn)我們的智慧和創(chuàng)意。

評(píng)論(0) 瀏覽(637)

082024-5

模態(tài)是一個(gè)很多設(shè)計(jì)師沒有完全理解的UX概念

資深UI設(shè)計(jì)者

熟悉一個(gè)原則才能打破它

評(píng)論(0) 瀏覽(486)

082024-5

呼應(yīng) App UI/UX 設(shè)計(jì)

資深UI設(shè)計(jì)者

“呼應(yīng)”是一款聚焦于進(jìn)出口物流服務(wù)的UGC平臺(tái)，為用戶提供內(nèi)容分享、商品發(fā)布、商品咨詢等服務(wù)。

評(píng)論(0) 瀏覽(499)

082024-5

創(chuàng)新醫(yī)療電子病歷界面設(shè)計(jì)：提升用戶體驗(yàn)與醫(yī)療效率

前端達(dá)人

隨著科技的不斷進(jìn)步，醫(yī)療信息技術(shù)已成為現(xiàn)代醫(yī)療系統(tǒng)中不可或缺的一部分。在這一領(lǐng)域中，電子病歷系統(tǒng)作為醫(yī)療信息化的核心組成部分之一，對(duì)提高醫(yī)療服務(wù)的質(zhì)量和效率起著至關(guān)重要的作用。本文將介紹一種創(chuàng)新的醫(yī)療電子病歷界面設(shè)計(jì)，旨在提升用戶體驗(yàn)、簡(jiǎn)化操作流程，并進(jìn)一步促進(jìn)醫(yī)療衛(wèi)生領(lǐng)域的數(shù)字化轉(zhuǎn)型。

1. 用戶體驗(yàn)的重要性：

在醫(yī)療電子病歷系統(tǒng)中，良好的用戶體驗(yàn)是確保醫(yī)務(wù)人員能夠高效準(zhǔn)確地記錄和檢索患者信息的關(guān)鍵。傳統(tǒng)的電子病歷系統(tǒng)往往存在界面復(fù)雜、操作繁瑣等問題，導(dǎo)致醫(yī)務(wù)人員工作效率低下，甚至可能影響醫(yī)療服務(wù)質(zhì)量。因此，設(shè)計(jì)一種用戶友好的界面至關(guān)重要。

2. 創(chuàng)新設(shè)計(jì)理念：

基于此，我們提出了一種創(chuàng)新的醫(yī)療電子病歷界面設(shè)計(jì)理念，主要包括以下幾個(gè)方面：

簡(jiǎn)潔直觀的布局：
界面布局簡(jiǎn)潔明了，重點(diǎn)突出患者關(guān)鍵信息，避免了信息過載的問題，使醫(yī)務(wù)人員能夠快速定位所需信息。
智能化的操作流程：
引入智能化技術(shù)，例如自動(dòng)填充、智能搜索等功能，簡(jiǎn)化了醫(yī)務(wù)人員的操作流程，減少了重復(fù)性工作，提高了工作效率。
個(gè)性化定制選項(xiàng)：
提供個(gè)性化定制選項(xiàng)，使醫(yī)務(wù)人員可以根據(jù)自己的工作習(xí)慣和需求，調(diào)整界面顯示方式和內(nèi)容，進(jìn)一步提升了用戶體驗(yàn)。

3. 實(shí)踐與效果：

我們?cè)趯?shí)際醫(yī)療機(jī)構(gòu)中對(duì)這種創(chuàng)新設(shè)計(jì)理念進(jìn)行了應(yīng)用與實(shí)踐，并取得了一定的成效。通過對(duì)比實(shí)驗(yàn)和用戶反饋，我們發(fā)現(xiàn)新設(shè)計(jì)的界面大大提高了醫(yī)務(wù)人員的工作效率，減少了錯(cuò)誤發(fā)生的可能性，同時(shí)也增強(qiáng)了醫(yī)務(wù)人員對(duì)電子病歷系統(tǒng)的接受度和使用意愿。

4. 展望與挑戰(zhàn)：

盡管創(chuàng)新設(shè)計(jì)理念在實(shí)踐中取得了一定的成果，但我們也面臨著一些挑戰(zhàn)。例如，技術(shù)的局限性、用戶習(xí)慣的改變等都可能影響創(chuàng)新設(shè)計(jì)的推廣和應(yīng)用。因此，我們需要進(jìn)一步研究和探索，不斷優(yōu)化界面設(shè)計(jì)，提高系統(tǒng)的穩(wěn)定性和安全性，以更好地滿足醫(yī)療信息化的需求。

結(jié)論：

綜上所述，創(chuàng)新的醫(yī)療電子病歷界面設(shè)計(jì)旨在提升用戶體驗(yàn)與醫(yī)療效率，是醫(yī)療信息技術(shù)發(fā)展的重要方向之一。通過不斷的創(chuàng)新與實(shí)踐，我們相信在未來的發(fā)展中，醫(yī)療電子病歷系統(tǒng)將會(huì)更加智能化、便捷化，為醫(yī)療衛(wèi)生事業(yè)的發(fā)展做出更大的貢獻(xiàn)。

評(píng)論(0) 瀏覽(684)

072024-5

UI設(shè)計(jì)中常用設(shè)計(jì)模型方法論

資深UI設(shè)計(jì)者

做設(shè)計(jì)的時(shí)候如果只是依賴設(shè)計(jì)感覺，在輸出設(shè)計(jì)觀點(diǎn)的時(shí)候，就會(huì)缺乏理論支撐從而無法說服別人，所以，了解一定的設(shè)計(jì)模型方法論，可以讓你的設(shè)計(jì)更加有理有據(jù)，同時(shí)設(shè)計(jì)師在思考設(shè)計(jì)的過程中，也可以通過一些設(shè)計(jì)模型幫助我們開拓思維，突破瓶頸。

評(píng)論(0) 瀏覽(852)

072024-5

B端的10個(gè)設(shè)計(jì)方法

資深UI設(shè)計(jì)者

最近看了一些B端的書籍，重溫了一些耳熟能詳?shù)脑O(shè)計(jì)方法論，在人機(jī)交互理論中，最著名和經(jīng)典的理論當(dāng)屬人機(jī)交互大師雅各布.尼爾森博士在1995年提出的尼爾森十大可用性原則，該理論是針對(duì)PC端交互設(shè)計(jì)提出的。這個(gè)理論在我們?nèi)粘５漠a(chǎn)品設(shè)計(jì)中提供了很好的指導(dǎo)意義，下面來聊聊他們分別運(yùn)用在了日常產(chǎn)品的哪些地方。

評(píng)論(0) 瀏覽(467)

072024-5