<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • B端彈窗設計-彈窗承載信息量不固定?該如何定義彈窗尺寸規范?

    2023-11-13    鶴鶴

     
     
    大致需求是這樣:為節省彈窗內對選項選擇的時間,現將原本彈窗內的級聯選擇下拉框改成平鋪按鈕的形式。(見下圖)
    ps:本平臺為人工審核平臺,使用用戶為審核員,平臺設計要為審核員的審核效率負責,審核效率一般表示為:單人單天(8小時)xxx條審核量。
     
     
    B端彈窗設計-彈窗承載信息量不固定?該如何定義彈窗尺寸規范?
     
     
     
     
     
    B端彈窗設計-彈窗承載信息量不固定?該如何定義彈窗尺寸規范?
     
     
     
     
     
     
    B端彈窗設計-彈窗承載信息量不固定?該如何定義彈窗尺寸規范?
     
     
     
     
     
    問題點:
    承載內容信息量不固定
    原因:彈窗內用戶選擇項為不通過原因,而此選擇項是用戶根據自身企業的風險標簽來自定義配置,這就涉及到級聯選擇數量的問題,有的客戶風險標簽體系細,多則幾百個,有的客戶只需要粗粒度標簽,例如只有一級標簽,總數可能不超過十個...
     
    設計思路
     
    1.與用戶溝通-明確信息量的承載量級范圍
     
    需求方:我要一個這么大的彈窗!好讓信息呈現更全面!
    但做設計從來不是憑空定義一個彈窗大小,要做到有理有據;前期選擇先跟使用此平臺的審核負責人溝通,來確定目前已接入的客戶在此處自定義配置的原因數量量級并
    整理出溝通結論
    存在少量客戶 10個以內的原因個數、 常規客戶在30個左右的原因個數、現存一家客戶使用最大量級 100+原因個數。但由于控制權在客戶方,原因量級不可控,未來也可能出現幾百的數量。
    在以上結論中,可以確定出可能的備選 600px中彈窗、800px的大彈窗、或者需求方提出的將近1200px的超大彈窗,但到底哪個最為合適需要進一步判斷。
     
     
    2.確定彈窗彈窗尺寸
     
    在有可能的600、800、1200px三種寬度中選取最合適的彈窗尺寸,分別從操作效率與適配性角度對其進行判斷。
     
    操作效率層面:
     
    當原因個數在30個以下時:
    若不同寬度時,都選擇第一個處置原因,根據交互方法論--
    菲茨定律
    ,指點設備到達目標的與兩個因素有關:(1)設備當前位置和目標位置的距離(D)。距離越長,所用時間越長;(2)目標的大小(S)。目標越大,所用時間越短。
     
     
    B端彈窗設計-彈窗承載信息量不固定?該如何定義彈窗尺寸規范?
     
     
     
    由此可見此操作的最終目標按鈕為右下角的確定按鈕,目標按鈕大小不變,但整體的選擇距離是相對兩個較小彈窗要遠的。D3>D2>D1,所用時間 T3>T2>T1。由于對審核員任務操作時間和效率要考慮到秒或毫秒級別,此大小對用戶快速完成此操作起到負向作用。
    另外,當原因個數10個以內時,可見此時彈窗寬度過寬,導致空白區域過大。
     
    當原因個數在30個以下時,
    操作效率評分
    1200px ????
    800px ??????
    600px ??????
     
     
    當超過100個原因個數時:
    1200px 一屏內展示完全,不需要滾屏滑動;
    800px 可在兩屏內展示完全,需要滾屏滑動;
    600px 超出兩屏展示才可展示完全,需要滾屏滑動。
    當原因個數超過100時,
    操作效率評分
    1200px ??????
    800px ??????
    600px ????
     
    適配性層面:
     
    根據市面主流屏幕分辨率尺寸調研:
     
    B端彈窗設計-彈窗承載信息量不固定?該如何定義彈窗尺寸規范?
     
     
     
    市面上存在部分 1024 分辨率的顯示屏,所以:
    600px 能夠適配所有市面主流分辨率顯示器
    800px 能夠適配所有市面主流分辨率顯示器
    1200px 不能能夠適配市面主流1024*768的分辨率顯示器,彈窗不能在顯示器內顯示完全,固適配性相對較弱。
     
    綜合三種彈窗大小的操作效率和適配性:
     
     
    B端彈窗設計-彈窗承載信息量不固定?該如何定義彈窗尺寸規范?
     
     
     
    800px 的表現最優,固選取
    800px
    的彈窗大小。
     
    3.確定彈窗基本規范
     
     
    高度規范:
    由于信息量的不同可以根據內容多少進行自適應高度,限定 max high 700px 。由于一般超出800px可能出現瀏覽器外滾動條,所以選取高度為
    600-800px
    之間
    滾動條規范:
    限高后,若信息超出 max high 支持出現內滾動條。
    瀏覽器適配規范:
    瀏覽器窗口>800px,彈窗寬度保持固定寬度800px。瀏覽器窗口600-800px之間彈窗同步在600-800之間自適應。瀏覽器窗口<600px,彈窗寬度保持600px,出現瀏覽器外滾動條。


    作者:Squirrel_young
    鏈接:https://www.zcool.com.cn/article/ZMTU5NDQzMg==.html
    來源:站酷
    著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
     

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 国产成人久久精品区一区二区| 国自产精品手机在线观看视频 | 中文无码久久精品| 久久精品九九亚洲精品天堂| 亚洲中文字幕久久精品无码喷水 | 四虎成人欧美精品在永久在线| 亚洲国产精品SSS在线观看AV| 国产高清在线精品一区小说| 国产精品18久久久久久vr| 欧美精品v欧洲精品| 香蕉国产精品麻豆亚洲欧美日韩精品自拍欧美v国 | 国产精品熟女高潮视频| 亚洲AV永久无码精品| 午夜福利麻豆国产精品| 国语自产精品视频| 国产AV国片精品一区二区| 69久久夜色精品国产69| 少妇人妻偷人精品无码视频新浪| 欧美日韩精品系列一区二区三区 | 国产亚洲福利精品一区| 国产精品视频一区二区三区四| 欧美精品VIDEOSSEX少妇| 亚洲精品一品区二品区三品区| 人妻精品久久久久中文字幕| 精品91自产拍在线观看二区| 国产精品1024在线永久免费| 日本精品久久久中文字幕| 国产精品高清一区二区人妖| 国产精品国产亚洲精品看不卡| 久久夜色精品国产噜噜噜亚洲AV| 伊人久久精品影院| 亚洲国产精品一区第二页| 在线精品视频一区二区| 亚洲精品乱码久久久久久久久久久久| 亚洲精品动漫免费二区| 最新精品露脸国产在线 | 国产精品久久精品| 国产成人精品视频在放| 国内精品免费在线观看| 一本大道久久a久久精品综合| 国产成人毛片亚洲精品|