手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

以用戶體驗(yàn)為中心的商家后臺(tái)設(shè)計(jì)

2022-4-20    純純

本文是參考國(guó)內(nèi)交互設(shè)計(jì)標(biāo)準(zhǔn)網(wǎng)站及用戶行為研究實(shí)現(xiàn)的用戶體驗(yàn)設(shè)計(jì)規(guī)范,用于后臺(tái)設(shè)計(jì),網(wǎng)站設(shè)計(jì)等。


一、統(tǒng)一性

涉及到的產(chǎn)品越多,產(chǎn)品統(tǒng)一性越強(qiáng),實(shí)現(xiàn)信息同頻,開(kāi)發(fā)和設(shè)計(jì)快速了解信息

  • 字段統(tǒng)一:模塊之間的tab的字段位置保持統(tǒng)一,減少用戶記憶負(fù)擔(dān)


  • 按鈕位置統(tǒng)一:(頁(yè)面功能操作按鈕,添加按鈕,導(dǎo)出按鈕,批量操作按鈕的位置)

一個(gè)項(xiàng)目中會(huì)涉及到多種按鈕,甚至一個(gè)頁(yè)面中也會(huì)涉及到多種不同功能的按鈕,這個(gè)就需要把同一類型或同一功能的按鈕,它們的位置統(tǒng)一。減少用戶學(xué)習(xí)成本。


因?yàn)槿绻粯拥墓δ馨粹o在不同的變換位置的話會(huì)打亂用戶已經(jīng)形成的習(xí)慣,增加其學(xué)習(xí)成本。(盡量采取以下情況的一種)


  • 幫助說(shuō)明的統(tǒng)一性

幫助說(shuō)明的表現(xiàn)形式有很多種,但不管選那種整個(gè)項(xiàng)目要保持統(tǒng)一,一些特殊情況除外,固定一個(gè)位置,可以方便用戶在最短的時(shí)間內(nèi),快速完成此項(xiàng)操作和獲取內(nèi)容。



二、權(quán)重性

權(quán)重是為了突出有效信息,也能在不同元素建立一種有組織的層次結(jié)構(gòu),讓用戶快速識(shí)別關(guān)鍵信息。

  • 主次關(guān)系對(duì)比

為了讓用戶能在操作上(類似表單、彈出框等場(chǎng)景)快速做出判斷,來(lái)突出其中一項(xiàng)相對(duì)更重要或者更高頻的操作。

突出的方法,不局限于強(qiáng)化重點(diǎn)項(xiàng),也可以是弱化其他項(xiàng)。

按鈕主次

信息主次

但是在一些需要用戶慎重決策的場(chǎng)景中,系統(tǒng)應(yīng)該保持中立,不能替用戶或者誘導(dǎo)用戶做出判斷

數(shù)字主次


  • 操作難易順序

表單在遵守操作流程的情況下,讓用戶涉及到的操作從易到難,讓用戶有填下去的動(dòng)力。

排序規(guī)則

(1)有“有默認(rèn)項(xiàng)”的選項(xiàng);

(2)有“選項(xiàng)”的選項(xiàng);

(3)只輸入“數(shù)字”的選項(xiàng);

(4)“添加圖片”“修改”等涉及復(fù)雜操作的選項(xiàng);

(5)“備注”“商品賣點(diǎn)”等選擇。

左右排版的時(shí)候?qū)ⅰ爸匾靥铐?xiàng)”先在從左邊(縱向排列)開(kāi)始排版(排版時(shí)仍按照我們的從簡(jiǎn)到難的規(guī)則)

注:當(dāng)“必填項(xiàng)”比“非必填項(xiàng)”多時(shí),排版上要考慮,就按照次序,左邊排滿,再排右邊。

  • 可視區(qū)域不=可點(diǎn)擊區(qū)域

在使用Table 時(shí),文字鏈的點(diǎn)擊范圍受到文字長(zhǎng)短影響,可以設(shè)置整個(gè)單元格為熱區(qū),以便用戶觸發(fā)。

注:當(dāng)懸浮在“客戶”所在的文字鏈單元格時(shí),鼠標(biāo)

【指針】隨即變?yōu)椤臼中汀?,單擊即可跳轉(zhuǎn)。


當(dāng)需要增強(qiáng)按鈕的響應(yīng)性時(shí),可以通過(guò)增加用戶點(diǎn)擊熱區(qū)的范圍,而不是增大按鈕形狀,從而增強(qiáng)響應(yīng)性,又不缺失美感。

注:在移動(dòng)端尤其適用。

鼠標(biāo)移入按鈕附近,即可激活Hover 狀態(tài)



三、有效交互

  • 頁(yè)內(nèi)編輯:

單字段行內(nèi)編輯

當(dāng)『易讀性』遠(yuǎn)比『易編輯性』重要時(shí),可以使用『?jiǎn)螕艟庉嫛?


狀態(tài)一:普通的瀏覽模式,不區(qū)分可編輯行和不可編輯行;

狀態(tài)二:鼠標(biāo)懸停時(shí),『指針』變?yōu)椤菏中汀?,編輯區(qū)域底色變黃,出現(xiàn)『Tooltips』提示單擊編輯;

狀態(tài)三:鼠標(biāo)點(diǎn)擊后,出現(xiàn)『輸入框』、『確定』、『取消』表單元素,同時(shí)光標(biāo)定位在『輸入框』中。


單字段行內(nèi)編輯

當(dāng)『易讀性』為主,同時(shí)又要突出操作性的『易編輯性』時(shí),可使用『文字鏈/圖標(biāo)編輯』

狀態(tài)一:在可編輯行附近出現(xiàn)文字鏈/圖標(biāo);

狀態(tài)二:鼠標(biāo)點(diǎn)擊『編輯』后,出現(xiàn)『輸入框』、『確定』、『取消』表單元素,同時(shí)光標(biāo)定位在『輸入框』中。


多字段行內(nèi)編輯

當(dāng)『易讀性』遠(yuǎn)比『易編輯性』重要時(shí),可以使用『?jiǎn)螕艟庉嫛?

注:編輯模式在不破壞整體性的前提下,可擴(kuò)大空間,以便放下『輸入框』等表單元素;其中,在Table 中進(jìn)行編輯模式切換時(shí),需要保證每列的不跳動(dòng)。



  • 輕量化設(shè)計(jì)

減少負(fù)擔(dān),增加輕量化的操作

注:刪除的操作是謹(jǐn)慎的,系統(tǒng)在不打斷當(dāng)前操作的時(shí)候給出二次提醒確認(rèn)。


  • 輸入框?qū)崟r(shí)判斷

填寫表單的條件反饋。

注:不需要提交后才出現(xiàn)提示,輸入及時(shí)給用戶反饋



  • toast反饋提示

完成整個(gè)操作后的提示以及系統(tǒng)提示

注:重要的,文字多于15個(gè)字以上不適合放在toast里面提示。


  • 提供邀請(qǐng)

提供下一步操作的入口

不僅要提示他發(fā)生了什么,還能引導(dǎo)他怎么做,甚至能讓他一步到位直接跳轉(zhuǎn)到要進(jìn)行下一步操作的頁(yè)面去操作

當(dāng)頁(yè)面沒(méi)有按鈕時(shí),提供明確的入口。


最后,關(guān)于后臺(tái)的用戶體驗(yàn)設(shè)計(jì)規(guī)范就總結(jié)到這里啦。

文章來(lái)源:站酷    作者:chaih
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔