<tt id="1uzb4"></tt>
  • <track id="1uzb4"><menu id="1uzb4"><big id="1uzb4"></big></menu></track>

    <rt id="1uzb4"></rt>
    
    
  • <b id="1uzb4"><address id="1uzb4"><label id="1uzb4"></label></address></b>

      <wbr id="1uzb4"><menuitem id="1uzb4"><div id="1uzb4"></div></menuitem></wbr>
      <rp id="1uzb4"><menu id="1uzb4"><em id="1uzb4"></em></menu></rp>

        關于如何設計搜索框的提示和原則

        2019.07.25 mf_web

        68

        當用戶訪問復雜的網站時,他們會立即找到搜索框以達到他/她的最終目標。本文分享了一些設計搜索框的技巧。

        當您訪問頁面以查找所需內容時,但找不到搜索框來執行操作,是不是令人沮喪?搜索框通常是網站中最常用的設計元素,一個好的搜索框會使網站用戶友好,當用戶訪問相對復雜的網站時,他們會立即找到搜索框以幫助他們聯系到他/她最終目標。本文分享了一些有用的提示和原則來設計一個用戶會喜歡的搜索框,希望這篇文章對您有用和有用。

        什么是搜索框?

        搜索框是常用的交互式組件,尤其是在網站和APP上。搜索框的核心是準確地從海量信息中提取精確內容,如音樂庫,電子商務網站等。

        兩種類型的搜索

        1.即時搜索:

        結果立即顯示在用戶界面上,不需要任何按鈕,放大鏡僅顯示為圖標,當用戶輸入關鍵字時,它可以立即搜索。

        2.定期搜索:

        用戶需要單擊搜索按鈕才能執行搜索

        何時使用搜索

        1.目標對象很難找到

        A)有許多物體; 就像我們需要在Mockplus圖標庫中找到3000個圖標中的特定圖標一樣。

        B)目標對象不在同一位置; 這就像你需要在磁盤上找到一種文件。

        C)搜索數據很難找到; 就像你想在長文本中搜索特定字符一樣。

        2.需要找到具體內容; 例如,我們在亞馬遜中搜索商品的某些特征。

        3.在5秒內找不到所需的結果。

        谷歌搜索框

        設計理念

        1.搜索框是界面的一部分,因此它必須放在顯眼的位置,并且很容易找到

        2.在同一個應用程序或網站中,它們應該具有統一的外觀

        3.該功能應有效,結果應準確,搜索速度應盡可能快。

        好的搜索框

        外觀特征

        1.標簽是不必要的,您可以使用可選的提示

        2.提示可以是指令(例如搜索類型)或范圍

        3.提示語應簡短明了

        4.執行即時搜索時,將第一個字母大寫; 在執行常規搜索時,小寫第一個字母。

        在設計搜索框之前有8個提示

        1.使用放大鏡圖標

         放大鏡圖標

        2.將搜索框放在用戶可以輕松找到的位置

        3.為搜索框提供搜索按鈕

        4.將搜索框放在每個頁面上

        5.使搜索框看起來像搜索框

        6.自適應字段大小

        7.使用自動建議機制

        谷歌自動建議機制

        結論

        我們可以發現設計搜索框需要遵循設計規則和交互原則,改進的每一個細節都可以提供更好的用戶體驗。一個好的用戶體驗網站不僅可以取悅用戶,還可以從中受益。

        關鍵詞

        最新案例

        聯系電話 400-6065-301

        留言

        欧洲亚洲国产香蕉网,亚洲AV永久无码精品澳门,欧美13—14周岁a完整版
        <tt id="1uzb4"></tt>
      1. <track id="1uzb4"><menu id="1uzb4"><big id="1uzb4"></big></menu></track>

        <rt id="1uzb4"></rt>
        
        
      2. <b id="1uzb4"><address id="1uzb4"><label id="1uzb4"></label></address></b>

          <wbr id="1uzb4"><menuitem id="1uzb4"><div id="1uzb4"></div></menuitem></wbr>
          <rp id="1uzb4"><menu id="1uzb4"><em id="1uzb4"></em></menu></rp>