交互設(shè)計語錄1.0

在一個設(shè)計任務(wù)完成后,用一些精簡的語句配上實際例子去記錄一些自己的心得或許是一個不錯的學(xué)習(xí)和提升的方法,希望能它的版本能夠一直迭代下去。以下是筆者在某次設(shè)計任務(wù)完成后記錄的一些心得。

Web應(yīng)用中盡量給用戶提供實時預(yù)覽的入口。實時預(yù)覽不僅可以讓用戶得到足夠的安全感,而且用戶預(yù)覽效果可以讓他得到一種成就感。

Eg:這是一個在線表單制作工具—“簡道云”,用戶在拖完控件后,點擊預(yù)覽可以預(yù)覽實時效果

在任何一項操作完成時都必須給用戶反饋,不然用戶并不知道這項操作到底成功與否。

Eg:如上圖,一個簡單的toast會許會讓用戶對你的產(chǎn)品產(chǎn)生更多的好感

Web應(yīng)用設(shè)計中盡量少出現(xiàn)模態(tài)彈窗,因為它的出現(xiàn)會影響甚至打斷用戶的行為流,增加用戶的認(rèn)知負(fù)擔(dān)。

在一個復(fù)雜的任務(wù)流程中,操作中必須要讓用戶知道他當(dāng)前處在的位置,并且能讓他返回到任意一個位置。

Eg.在web應(yīng)用或者時網(wǎng)頁設(shè)計中,面包屑菜單通常在這樣的場景中使用

在一個產(chǎn)品中如果有多處可以完成同一任務(wù),那么盡量讓各處的交互方式保持一直,這樣才能營造一致的用戶體驗,同時降低學(xué)習(xí)成本。

動效的目的是吸引用戶的視線,引導(dǎo)用戶的操作。不要特意為了動效而去做動效,它可能會影響到其他關(guān)鍵性的內(nèi)容。

Eg:取消管理旁邊的按鈕是由上一步點擊批量管理向左彈出的,彈出的動效吸引了用戶的視線影響到了條目旁邊復(fù)選框的出現(xiàn),使得用戶沒有注意到復(fù)選框的出現(xiàn)

避免鼠標(biāo)長距離跋涉。讓下一步的操作的入口盡可能出當(dāng)前用戶視覺焦點的附近,給用戶營造一個行為流。

Eg:條目上的按鈕是當(dāng)鼠標(biāo)懸浮在條目上出現(xiàn)的,在條目出現(xiàn)前用戶視覺焦點一般都在條目的名稱上,這里的三個按鈕距離用戶的視覺焦點過遠(yuǎn),很可能導(dǎo)致用戶注意不到按鈕的出現(xiàn),無法順利地轉(zhuǎn)移用戶的視覺焦點。

交互流程中,讓交互元素出現(xiàn)在該出現(xiàn)的場景和任務(wù)中,不該出現(xiàn)的時候消失,尤其是對于那些不重要的交互功能來講。


Eg:條目上的按鈕在鼠標(biāo)懸浮在條目上時才出現(xiàn),因為這個時候用戶大多情況下進(jìn)行的操作時點開條目產(chǎn)看內(nèi)容而不是對條目進(jìn)行其他的操作。

任何產(chǎn)品任何任務(wù)流程安全感是最重要的東西,在用戶進(jìn)行任何一步操作時都必須給用戶強(qiáng)烈的安全感。

Eg:如上圖,用戶在對圖表進(jìn)行修改時是實時保存的,但界面上并沒有實時保存的信息,左上角類似保存的按鈕是進(jìn)行另存為的操作,雖然你給用戶說明了時實時保存但是還是會給用戶極大的不安全感,會讓用戶不知道自己的東西到底保存成功沒有。

原文地址:www.jesondesign.com

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,781評論 25 709
  • 這周看了一本書——《移動應(yīng)用UI設(shè)計模式》,與0-1歲產(chǎn)品經(jīng)理分享: 其實全書就是把移動應(yīng)用的表皮撕碎了來講,從用...
    拾零閱讀 1,580評論 1 9
  • iOS 9設(shè)計規(guī)范 中文版 完整版譯者注:本文譯自蘋果官方人機(jī)界面指南 iOS Human Interface G...
    海寧Hennie閱讀 13,634評論 2 60
  • 構(gòu)成一個封閉圖形的條件不是簡單的線段的依次首尾相接,必須是先選中一個線段并在其末端點處鼠標(biāo)停留一會兒,出現(xiàn)“擴(kuò)展形...
    HD1992閱讀 4,305評論 0 0
  • 1、想象與實際的差別 2、以旁觀者的角度看行為 3、猶豫,做事情不確定 4、培訓(xùn)師大部分時間都花在路上 5、互動最...
    zyhzyhzyh閱讀 244評論 0 0

友情鏈接更多精彩內(nèi)容