UX Design 用户体验设计最佳实践、UI界面交互、Web Fetch进度

综述

App

通用：
  “关于”信息使用率较低，故首选放置在“设置”的“帮助”中。

Web

通用：
  “关于”信息习惯性上放置在网页底部，相比App而言页面空间大一些。

  
fetch API 进度、置灰：
    每分钟检测一次是否提交完毕；编解码用 encodeURIComponent("query string value")。
      <textarea id="inputText" style="box-sizing: border-box;width: 100%;" placeholder="输入..." ></textarea>
      <button onclick="api(this)" style="height: 3em;margin: 8px 0px;">执行</button><hr />
      <div id="contentArea"></div>

            function api(el) {
                var text = document.getElementById("inputText").value;
                if (text.trim().length > 0) {
                    el.setAttribute("disabled", null);
                    setTimeout(() => {
                        el.removeAttribute("disabled");
                    }, 60 * 1000); // nginx超时默认值为60秒。

                    var fd = new FormData();
                    fd.append("text", text);
                    fetch(backendBaseURI + "/main/apis/cp/x?urlencode="+encodeURIComponent(document.title),
                            {method: "POST", body: fd}).then(r => {

                        el.removeAttribute("disabled");

                        if (r.status === 204 || r.status === 404) {
                            alert("status - " + r.status);
                            return null; // 204(No Content)不能调json(),优先处理。
                        } else if (r.ok) { // r.ok = 2xx开头状态码
                            return r.json();
                        } else {
                            return Promise.reject('fetch error!');
                        }
                    }).then(data => {
                        console.log(data); // candidates[0].content.parts[0].text
                        //alert(data.filePath);
                        var rText = data !== null ? data?.candidates?.[0]?.content?.parts?.[0]?.text : null;
                        if (rText !== null) {
                            rText = marked.parse(rText);
                            ca.innerHTML = rText + "<hr />(" + new Date().toLocaleString() + ")";
                        } else {
                            //  href值跨域则不会下载而是新开窗口
                            ca.innerHTML = JSON.stringify(data) + "<br />(" + new Date().toLocaleString() + ")";
                        }
                    }).catch(e => {
                        el.removeAttribute("disabled");
                        ca.innerHTML = "<h2 style='color:red;'>" + e + "</h2>";
                    });
                } else {
                    el.removeAttribute("disabled");
                    ca.innerHTML = "<h2 style='color:red;'>👆请先输入问话内容！</h2>";
                }
            }

  CSS实现饼状图 - https://ithelp.ithome.com.tw/articles/10365072
    var data="""
      <style>
        #pie { // 饼状图
          width: 200px;
          height: 200px;
          border-radius: 50%;
          background: conic-gradient(from 0turn at center, rgb(115 164 223) 0.25turn, rgb(238 238 238) 0);
        }
        body { // 居中
          display: flex;
          justify-content: center;
          align-items: center;
        }
      </style>
      <div id="pie"></div>
      """;
    // 注意 - 若想用 Data URI scheme 的 loadData 则必须将 #123abc 换为 rgb(238 238 238) 写法，否则必须转义 # 井号。
    webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE); // 使用 loadDataWithBaseURL 时应禁止缓存，否则清缓存后变空白页。
    webview.loadDataWithBaseURL(null, data, "text/html", "UTF-8", null);

其他