感覺設計不舒服但又不知道原因？可能是這8個常見的交互細節問題

　　

<option id="uausy"></option>

<li id="uausy"></li>

array(23) {
  ["id"] => string(2) "96"
  ["siteid"] => string(1) "1"
  ["type"] => string(1) "1"
  ["m_id"] => string(1) "0"
  ["p_id"] => string(1) "0"
  ["name"] => string(6) "服務"
  ["thumb"] => string(63) "/modules/cms/uploads/recommend/2018/05/15/05797102164099283.png"
  ["image"] => string(0) ""
  ["desc"] => string(0) ""
  ["pdir"] => string(0) ""
  ["dir"] => string(7) "service"
  ["url"] => string(0) ""
  ["setting"] => array(15) {
    ["is_html"] => int(1)
    ["content_is_html"] => int(0)
    ["urlrule"] => int(1)
    ["contenturlrule"] => int(0)
    ["meta_title"] => string(88) "定制開發-APP定制開發,微信定制開發,小程序定制開發,網站定制開發"
    ["meta_keywords"] => string(75) "APP定制開發,微信定制開發,小程序定制開發,網站定制開發"
    ["meta_description"] => string(0) ""
    ["category_template"] => string(0) ""
    ["list_template"] => string(0) ""
    ["show_template"] => string(21) "show_page_dingzhi.tpl"
    ["formid"] => string(0) ""
    ["url"] => string(0) ""
    ["target"] => string(0) ""
    ["pri_grade_visit"] => array(0) {
    }
    ["pri_grade_add"] => array(0) {
    }
  }
  ["order"] => string(1) "1"
  ["sethtml"] => string(1) "0"
  ["stat"] => string(1) "2"
  ["flowid"] => string(1) "0"
  ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2018/05/25/05805654599261264.jpg"
  ["page_num"] => string(1) "0"
  ["wxstat"] => string(1) "0"
  ["scope"] => string(0) ""
  ["modelname"] => NULL
  ["son"] => array(9) {
    [0] => array(22) {
      ["id"] => string(3) "187"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(15) "小程序開發"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(112) "專業微信小程序解決方案|各種場景核心功能，提前布局微信新生態，搶占第一波紅利"
      ["pdir"] => string(0) ""
      ["dir"] => string(6) "wechat"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(107) "小程序_商城小程序_門店小程序_微圈小程序_餐飲小程序開發-藝源科技小程序開發"
        ["meta_keywords"] => string(103) "小程序開發,商城小程序開發,門店小程序開發,微圈小程序開發,餐飲小程序開發"
        ["meta_description"] => string(269) "專注提供專注提供小程序、商城小程序、門店小程序、微圈小程序、餐飲小程序開發，專業團隊,一對一服務,助企業快速生成自己的移動端微商城平臺. 藝源科技小程序采用高性能數據架構,系統穩定安全。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(17) "show_page_xcx.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "0"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "1"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [1] => array(22) {
      ["id"] => string(3) "199"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(9) "APP開發"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(3) "APP"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(65) "app開發_app定制開發_app制作開發公司【藝源科技】"
        ["meta_keywords"] => string(53) "app開發,app定制開發公司,app制作開發公司"
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(17) "show_page_app.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "1"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [2] => array(22) {
      ["id"] => string(3) "244"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "快抖霸屏"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(7) "kuaidou"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(71) "快抖霸屏_抖音快手霸屏_短視頻營銷獲客技術提供商！"
        ["meta_keywords"] => string(69) "快抖霸屏,抖音快手霸屏,快抖短視頻搜索,同城爆店碼"
        ["meta_description"] => string(161) "藝源智能云推廣系統13325455411專注快抖霸屏,抖音快手霸屏,同城爆店碼,一款線下與線上流量緊密結合的營銷爆客解決方案。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(20) "show_page_douyin.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "2"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(27) "需要短視頻推廣排名"
      ["modelname"] => NULL
    }
    [3] => array(22) {
      ["id"] => string(3) "207"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(14) "AI智能名片"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2019/07/04/06155550417466502.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(2) "ai"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(68) "藝源AI智能名片_名片小程序_智能名片_讓銷售更簡單"
        ["meta_keywords"] => string(97) "藝源AI智能名片,名片小程序,智能名片_讓銷售更簡單,電子名片,二維碼名片"
        ["meta_description"] => string(184) "藝源AI智能名片-讓銷售更簡單。藝源AI智能名片為企業提供名片小程序,智能名片,企業名片,小程序名片,電子名片,二維碼名片等相關的服務。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(16) "show_page_ai.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "3"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [4] => array(22) {
      ["id"] => string(3) "201"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "版權登記"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814062280145708.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(9) "copyright"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(0) ""
        ["meta_keywords"] => string(0) ""
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(23) "show_page_copyright.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "4"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814063838873717.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [5] => array(22) {
      ["id"] => string(3) "203"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "商標注冊"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813359170749750.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(9) "trademark"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(131) "商標注冊_商標注冊流程_商標注冊流程及費用_西安商標注冊_西安商標注冊代理-「源知果」藝源科技"
        ["meta_keywords"] => string(103) "商標注冊,商標注冊流程,商標注冊流程及費用,西安商標注冊,西安商標注冊代理"
        ["meta_description"] => string(182) "「源知果」西安提供代理版權登記，代理商標注冊，代理專利申請，代理企業貫標，代理高新技術企業認定的服務；咨詢電話：13325455411。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(23) "show_page_trademark.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "5"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/11/06135617157272716.png"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [6] => array(22) {
      ["id"] => string(3) "205"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "網站建設"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2019/06/21/06144566585327511.jpg"
      ["desc"] => string(149) "節約IT成本/降低運維成本/網站安全穩定/不滿意全額退款|節約IT成本/降低運維成本/網站安全穩定/不滿意全額退款"
      ["pdir"] => string(0) ""
      ["dir"] => string(7) "website"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(80) "西安商城網站建設_政府網站建設_學校網站建設就選藝源科技"
        ["meta_keywords"] => string(113) "西安網站建設,西安網絡公司,西安網頁設計,商城網站建設,政府網站建設,學校網站建設"
        ["meta_description"] => string(248) "「藝源科技」是西安一家專業的西安商城網站建設,政府網站建設,學校網站建設的網絡公司，咨詢電話:029-88810146/150 9401 9029。公司擁有10年實踐經驗,為您提供一條龍的互聯網應用解決方案。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(21) "show_page_website.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "6"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/24/06146855992801864.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [7] => array(22) {
      ["id"] => string(3) "208"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "2"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(15) "云服務平臺"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(0) ""
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(0)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(0)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(0) ""
        ["meta_keywords"] => string(0) ""
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(0) ""
        ["formid"] => string(0) ""
        ["url"] => string(21) "http://www.qulvkj.com"
        ["target"] => string(6) "_blank"
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "7"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [8] => array(22) {
      ["id"] => string(3) "202"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(9) "SEO優化"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813061683398516.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(3) "seo"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(90) "【西安SEO優化_西安網站優化_關鍵詞排名優化】-SEO優化公司藝源科技"
        ["meta_keywords"] => string(81) "西安SEO優化,西安SEO優化公司,西安網站優化,西安網站優化公司"
        ["meta_description"] => string(244) "藝源科技（yysweb.com）,專注為企業提供百度等搜索引擎整站SEO優化服務,針對不同行業、網站情況給出不同策略、報價和SEO建議;是您值得信賴的seo診斷、顧問咨詢等云SEO技術服務外包商。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(17) "show_page_seo.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "8"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813062712033401.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
  }
}

當前位置：首頁 > 售后 > 藝源智庫

感覺設計不舒服但又不知道原因？可能是這8個常見的交互細節問題

時間：2019-11-07 09:36:06

文章發布：李陽

原創作者：未知

來源：互聯網

平時的工作中，經常會遇到一些不舒服但是又說不上理由的交互問題。本文作者從爭論的點出發，有理有據的說明這些問題，并給出了修改建議，當然作者也說了他的觀點并非就一定正確，只是希望能夠提供一些思路。但我相信大家應該還是能夠從作者的觀察中學到不少干貨的。

背景介紹

在我為合作企業 Mendix 擔任用戶體驗顧問的那段時間中，我經常能遇到他們團隊內部創造出的一些優秀應用，我的工作也會涉及到幫助提升那些產品的用戶體驗。

最美好的時刻是當自己突然來了靈感做出一些創造性設計時，也能清晰的看到一些很常見的交互邏輯問題。

我所給出的解決方案也并非真理，要根據實際情況來辦，不要照搬我寫的東西，只是把我寫的內容當做是靈感就好了。

問題一：所有內容全部平鋪在一個頁面上

感覺設計不舒服但又不知道原因？可能是這8個常見的交互細節問題-藝源科技

這些最常見的用戶體驗錯誤。

剛開始工作的時候，你可能會遇到做一個功能眾多的小應用，當你想再添加一些特色功能之前，會發現已經被你弄的滿屏幕都是按鈕了。

別怕，我們都是這么過來的。

爭論的點：
「更少的點擊」
「我可以在功能概覽上看到一切我想要的功能」
「用戶不喜歡滾動」

當我看到這個解決方案時，它讓我想起了瑞士軍刀的段子，所有的工具都打開了，但唯一使用的卻是開瓶器。

1. 認知負擔

讓所有選項全部展開似乎可以創建功能概覽，但問題是，人的大腦最多只能理解9個選項，而且老實說，95%的按鈕用戶并不經常使用。

2. 親近原則

另一個問題是按鈕應該與它們影響的數據放在一起，把所有按鈕都擺在一起便意味著失去了視覺上的關聯。

3. 用戶并不討厭滾動

「用戶討厭滾動」通常是在正確的時間沒有正確的上下文，然后通過在一個屏幕上使用盡可能多的信息，來幫助創建上下文來解決滾動問題的副作用。

「但是在我們的研究中，會發現只有10%的用戶會滾動到頁面底部」這似乎在說明90%的用戶不喜歡滾動。

其實問題的關鍵不在于滾動，而在于信息量。在頁面上提供更多的信息并不意味著用戶能消化，但是會更快的消耗掉用戶的精力而讓他們關掉頁面。

依據：
米勒定律（https://lawsofux.com/millers-law）
親近原則（https://lawsofux.com/law-of-proximity）

問題二：下拉菜單分類不清晰

感覺設計不舒服但又不知道原因？可能是這8個常見的交互細節問題-藝源科技

所以你已經清理了界面，并把所有的按鈕都放到了下拉菜單中。

爭論的點:
「更多的焦點」
「減少混亂，更容易找到我想要的東西」

平衡才是關鍵

把你做的界面想象成現實世界，如果你的一個頁面是藏在一堆抽屜中，則需要打開每個抽屜，直到找到所需的內容。這在數字界面中道理也一樣。

如果你的抽屜是合乎邏輯的，并且在正確的地方，這樣做就很好。在花園里放一些園藝用品聽起來是很不錯的想法，但是你的燒烤用具是否也應該放進去呢？還是放在廚房里？還是兩個都放？

好的平衡是需要反復改進的。你多久用一次燒烤用具決定它是否應該放到棚屋還是廚房。

如果只有5個按鈕，可能下拉菜單都不需要，但是如果到了6個以上，這就需要仔細去分析了。

（譯者注：這里的問題，我理解是把按鈕放在一個大分類或是放在多個小分類，并沒有絕對的對錯，關鍵在于要平衡好。如果分類足夠清晰，則分類可能會更好，但如果分類比較模糊，則全放在一個選項中，也許也不錯。）

問題三：當前位置不清晰

感覺設計不舒服但又不知道原因？可能是這8個常見的交互細節問題-藝源科技

因為一致的設計系統和品牌風格，所有的頁面看起來都類似。很快，你就會感覺自己好像正漫步在一片森林中，不知道你以前是否看過這個頁面，或者這是否是一個具有類似狀態的不同頁面。

爭論的點:
「一致的視覺風格」
「設計系統驅動的設計」
「高效的頁面使用率」

試想一下這個場景，這是一個星期五的下午，你在一些社交媒體，同事和私人信息之間來回查看，并同時在做工作。你腦子里的最后一件事是你剛才點擊的鏈接和你所在流程中的位置。

在每個頁面中考慮給用戶創建：

為頁面提供清晰的標題或頁面名稱。
如果你的頁面層級深度超過1級，則需要考慮采用漢堡導航。
如果流程有多個步驟，則需要顯示這些步驟。

問題四：太長的內容寬度和太小的文字

感覺設計不舒服但又不知道原因？可能是這8個常見的交互細節問題-藝源科技

希望充分利用頁面的另一個例子。

爭論的點：
「用戶討厭滾動」
「高效的頁面使用率」

網頁上的經驗告訴我們每行不要超過9個單詞（譯者注：我并不贊同作者這個觀點，9個單詞太短了，作者說的可能是在很老的小屏幕上才會有如此規定，現在應該不會有每行這么少的字數要求，我倒是覺得這里的重點是每行文字不要過長就行）。當你讀完一行時，你的眼睛需要找到下一行的開始，如果這行太長了，你的眼睛就很難做到這一點。

「但是看看每個頁面我們浪費了多少空間？」

比如你現在正在閱讀這篇文章，你有注意到那些沒有利用上的空間嗎？你猜怎么著，所謂的浪費實際上也是一種投資，如果有很長的一行文本對你來說也沒問題，那說明這些文本對你來說是非常重要的，（譯者注：我的理解是你會認真的去看這些文字而忽略掉文字的長短）如果不是這樣，還是盡可能的短一些。

1910的電子郵件的排版方法（http://blog.weare1910.com/post/78113100010/a-typographic-approach-to-email）（譯者注：1910不是年份，是一個網站的名字）

問題五：在彈窗上再彈窗

感覺設計不舒服但又不知道原因？可能是這8個常見的交互細節問題-藝源科技

為了節省空間，設計了一個帶有彈窗的按鈕，點擊按鈕會繼續彈出另一個窗口。

爭論的點：
「上下文更加連貫」

問題是，這樣會打破用戶在這個過程中的心理模型。如果他完成了第二個彈窗上的操作，他會回到原來的彈窗還是回到原來的界面?

解決辦法是，第一個彈窗做成一個完整的界面，或者把第二個彈窗做在第一個消息彈窗的里面。

問題六：卡片嵌套卡片

感覺設計不舒服但又不知道原因？可能是這8個常見的交互細節問題-藝源科技

卡片設計現在很流行，所以怎么樣才能比單張卡片更有效率呢？卡片嵌套卡片……頭腦風暴的時候就很容易想到。

爭論的點：
「嵌套的卡片可以創建好的視覺層級」

用戶體驗設計師經常會探討視覺層級結構。元素在界面中的組織方式，被認為是對用戶來說最重要的。

在這一過程中，我們引入了現實世界中的類似卡片一樣的模型元素。

在傳統的卡片組中，卡片的大小都是相等的?？ㄆ环胖迷谄渌ㄆ匣蚺赃?，以傳達某些狀態或關系。

當你在另一張卡片內嵌上一張卡片時，用戶的心理模型就會開始崩潰。用戶會下意識地開始疑惑這與其他對象的關系，這個時候邏輯就開始變得混亂了。

解決的辦法其實也很簡單！

不要把它們放在一起，而是把它們放在彼此附近，或者放置在一個版面區域內（好比在一張賭桌上打牌）。

問題七：一個頁面有太多的表單元素

感覺設計不舒服但又不知道原因？可能是這8個常見的交互細節問題-藝源科技

我應該有一長串表單輸入嗎？也許可以分成多個步驟？或者有3列的表單輸入，所以它們都適合放在同一個界面上？

爭論的點：
「用戶不喜歡滾動」

主要問題在于頁面數量或者表單數量，一次只能在界面中顯示多少表單。像按鈕一樣，應該盡可能減少到最小程度，這仍然需要考慮上下文和易用性。

1. 使用單列

最好的做法是把輸入表單維持在一列。這樣用戶的眼睛就能夠很自然地看下來，并且也能很方便的檢查每個輸入內容。

2. 邏輯流暢

有時，你的輸入字段是用戶即將開始的旅程，或者對他們會造成嚴重的后果（比如：稅務單）。這是將字段分割為多個頁面的最佳時機。

這給了你一些視覺空間來創造一些喘息的機會，并向用戶解釋他們在做什么，以及為什么它很重要。

3. 下拉菜單

如果真有1-5個選項，就不要將它們放在下拉菜單中。我知道那樣看起來可能會更加優雅，但是對用戶來說卻并不方便。采用單選按鈕會是一個很友好的方式。

UX Collective——設計更好的表格（https://uxdesign.cc/design-better-forms-96fadca0f49c?epik=0KSYeE_IWH4Bw）
Stackoverflow——單頁還是多頁？（https://ux.stackexchange.com/questions/36956/single-page-or-multi-page-forms）

問題八：按鈕規范不明確

感覺設計不舒服但又不知道原因？可能是這8個常見的交互細節問題-藝源科技

頁面上的某些元素可以幫助你確定正在瀏覽的頁面，其他元素應該盡可能清晰一致。

爭論的點：
「但是蘋果/谷歌是這樣做的?！?/p>

最常見的例子是，「接受」和「取消」按鈕，是放在左邊還是右邊。按經驗來說，當你在流程中前進時，繼續的那個按鈕應該是綠色的，放在右邊，并且按鈕上有一個文本，解釋它的功能，比如「同意」，「繼續」或「購買」。

（譯者注：這里關于按鈕擺放的位置，有2點需要去注意的：1、流程前進的順序與閱讀習慣有關系，文中說的是從左往右閱讀的方式。但有些地區的閱讀順序是從右往左讀，比如阿拉伯國家，那么此時前進的方向應該在左邊；2、保持每個界面中的相同含義的按鈕順序一致性）

UX Collective——為按鈕選擇合適的文案（https://uxdesign.cc/the-microcopyist-cancellation-confirmation-conflagration-8a6047a4cf9）

回顧

不要超過9個按鈕
把下拉菜單作為最后手段
給每個頁面加一個標題
當頁面層級超過1時，給它加一個面包屑導航
在多步驟操作中，顯示具體步驟
每行不超過9個文字（譯者注：這條我不是很同意，見上文解釋）
切勿在彈窗中再使用彈窗
切勿卡片嵌套卡片
盡可能使用一列表單
注意按鈕的描述文字

小程序開發

標簽： App設計彈窗設計文字排版易讀性用戶體驗經驗分享表單

*版權申明:本站部分文章由藝源科技收集整理，不代表我們的觀點。如果這篇轉載侵犯您的版權，請及時聯系我們刪除！

返回

↑ 上一篇：【網站建設】網站制作流程是什么樣的？

↓ 下一篇：網站關停后，為什么必須要注銷備案信息？

為您推薦

最新文章

免費獲取解決方案

您有需求，剛好我們很專業！為您服務是我們的榮幸！
藝源為您提供專業的網站建設，網站開發，App開發，微信開發，微信小程序開發等互聯網+解決方案

藝源為您提供專業的網站建設，網站開發，App開發，微信開發，微信小程序開發

7x24h
24h全面監控服務器

安全保障,高頻度系統安全更新-藝源科技

安全保障
高頻度系統安全更新

全面服務,域名備案、營銷指導-藝源科技

全面服務
域名備案、營銷指導

定時訪問,主動回訪了解客戶需求-藝源科技

定時訪問
主動回訪了解客戶需求

友情鏈接：合作伙伴投訴建議站內地圖我要應聘企業郵箱免責聲明

Have Requests?

您有需求，剛好我們很專業！為您服務是我們的榮幸！
優質的設計瞬間奪人眼球，而扎實的技術實力需要經年默默積累，看得到的看不到的我們都努力做到最好！

微信小程序開發-藝源聯系地址

Address

西安市高新區唐延路11號，i都會。

APP開發-藝源聯系電話

Phones

①150 9401 9029 ②133 2545 5411

網站開發-藝源電子郵件

E-mail

sales@yysweb.com

微信開發-藝源官網微信公眾號

Wechat

官方微信公眾號 & 產品經理

藝源官網微信公眾號

久久青草费线频观看地址_少妇久久久久久久久久_亚洲欧洲自拍拍偷午夜色_国产sm重味一区二区三区

<option id="uausy"></option>

<li id="uausy"></li>