<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          設計總是憑感覺?那是你不了解這些交互設計原則

          2022-6-10    博博

          設計總是憑感覺?你有這樣的困惑么


          本文主要聊一下產品中使用的幾個交互設計原則,一致性,費茨定律,容錯性,??硕伞?/strong>



          一致性


          我們在做設計時,經常會講到要保持一致。一致性的好處從外部來說,可以極大的提升產品的易用性,降低用戶的學習成本,同時也有利于品牌形象的傳達。從內部來說,將一些相同或類似的功能進行復用,提高團隊的協作效率,讓資源得到更充分的利用。


          那么設計師該如何做到一致性呢?

          一致性體現在產品中可以體現在很多方面,比如是視覺風格統一,交互操作統一。視覺上可以是配色、字體、圖標、頁面布局、插畫,以及在不同終端上的統一。交互操作可以是相同相似功能在不同頁面的呼出方式,一些地方動畫的表現形式。

          另外,產品與本身所處的行業內的競品的一致性,比如音樂播放頁面,用戶已經習慣了上面是歌曲宣傳圖,下面是播放切換的控件,各個產品的排版布局都是相似的,這樣的統一可以讓用戶沒有陌生感,在接觸一個新的音樂類產品時很快的上手。

           

          滴答清單的網頁端、桌面版、網頁插件,將頁面的主要功能信息都放在了左邊,中間部分是清單列表,最右側是清單詳情,配色都是用了灰色、白色、淺藍色,圖標風格上使用的面型風格,這三個終端的視覺風格是保持了高度的一致,傳遞給用戶的也是很強的品牌理念。

           

           

          阿里云盤,App啟動頁和網頁功能介紹,都是使用了C4D插畫,來保證兩個終端品牌風格的一致性。

           

           


          微博App的詳情頁及他人主頁,這兩個頁面的評論功能都使用了相同的底部彈出框的控件樣式,用戶可以在不用思考的情況下直接操作,這是利用了相同功能在不同頁面復用了相同的交互控件。

           

           

           

          費茨定律


          簡單點來說,有兩個關鍵因素,兩個操作目標的距離、操作目標大小。第一個因素意思就是在當前產品中兩步操作,手指移動的距離越短,操作就越容易。第二個因素是當前操作目標越大,操作越容易。

           

          石墨文檔App。在頁面右下角有一個懸浮的新建按鈕,點擊后從底部彈出活動視圖,用戶可以進行新建文檔、表格等操作。這里使用從底部彈出活動視圖,而不是在新頁面或者頁面中間,正是利用了費茨定律,縮短了兩步操作之間手指移動的距離,降低操作難度。

           

           

           

          滴滴出行、如祺出行

          滴滴出行打車頁面,App首先會自動定位你當前所在位置為出發位置,目的地一欄顯示文案「輸入目的地」。設計師將輸入框設計的很大,文案字體也很大,在當前頁面中非常醒目,極大的方便了用戶的操作。這就是應用了費茨定律的第二個因素,當前操作目標越大,操作也就越容易。

          反觀如祺出行的打車頁面,出發地一欄和目的地一欄的尺寸是一樣大的,都是使用圖標+文字樣式,出發地一欄使用深灰色的圖標、深灰色的字體,而目的地一欄圖標雖然使用了橙色主題色,但是文字的顏色是淺灰色,字號也沒有放大,非常不顯眼。要知道用戶當前的迫切需求是輸入目的地,這樣設計無疑是增加了用戶操作的難度。

           

           

           

           

          容錯性


          平時在操作產品界面時,經常會因為一些原因造成操作錯誤,而有些錯誤造成的損失是無法挽回的。那么設計師應該怎么避免用戶操作中犯錯呢?容錯性原則可以很好的解決這個問題。容錯性定義是:


          “容錯性是產品對錯誤操作的承載性能,即一個產品操作時出現錯誤的概率和錯誤出現后得到解決的概率和效率。容錯性最初應用于計算機領域,它的存在能保證系統在故障存在的情況下不失效,仍然正常工作。產品容錯性設計能使產品與人的交流或人與人借助產品的交流更加流暢?!?/span>

          拆解一下,影響「操作時出現錯誤的概率」的因素有,操作前的引導提醒以及操作時的提示。影響「錯誤出現后得到解決的概率和效率」的因素有,操作后的解決方案

           

          微信的修改微信號功能,不同于修改昵稱直接進入編輯頁面,微信在中間增加了一個頁面,頁面內容顯示當前的微信號及提示文字,目的是提醒用戶要慎重,避免有些用戶修改了微信號之后后悔。這里是用到了容錯性的操作前的引導提醒,降低了出現錯誤的概率。

           

           

          QQ注冊頁面,用戶輸入昵稱后,系統會檢測昵稱是否可用,及時給出給出提示。輸入密碼時會自動出現密碼設置的提示,及時提醒密碼都有哪些規則,避免用戶輸入不符合要求的密碼。操作中給出這些相應的提示,可以使用戶更加流暢的完成注冊流程。

           

           

           

          印象筆記網頁版。將一篇筆記刪除后,頁面頂部會出現一個提示框,文案是「已將XX文章移至廢紙簍」,提示框2、3秒之后自動消失。如果剛好這篇筆記是不小心誤刪的,這里的提示框給予了用戶反悔的機會,幫助用戶及時的找回筆記,彌補錯誤。

           

           

           

           

          ??硕?/span>


          ??硕?,又叫是希克一海曼定律(Hick Hymalrs 1aw),是一種心理物理學定律。應用在產品設計當中,就是當頁面中需要有不同選項時,要盡可能的少而簡單,降低用戶的決策成本。

           

          美團外賣頁面的金剛區,共有三行應用。核心推薦的5個應用是放在第一排,其他10個應用排成兩排,核心推薦應用與其他應用在圖標風格上使用了區別化設計,用戶在進行選擇時變成了5選1,而不是15選1。這是設計師在功能設計時針對應用做出了重要程度的區分,以幫助用戶更快做出選擇。


          作者:不吃橙子D

          轉載請注明:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合