2023-8-2 ui設(shè)計分享達人
前言
不知道你會不會經(jīng)常經(jīng)歷這個情況:
1.自己設(shè)計的交互稿,不知道能不能再優(yōu)化。
2.審別人稿的時候,不知道提的意見是不是全面和更有價值的。
3.看別人作品,不知道怎么分析別人的作品,挖出有價值的點。
這些情況的出現(xiàn)我想是因為我們是通過回憶以前的經(jīng)驗來記起知識,然后去設(shè)計或者審查設(shè)計稿。所以很考驗我們過去的經(jīng)驗和記憶力,一旦設(shè)計的是一個不是很熟悉的需求,我們能回憶的知識點很少,那我們會去借助大量的參考去完成交互設(shè)計。
借助參考可以打開我們的思路,但過渡依賴參考,會導致你做用戶體驗的上限就是你參考產(chǎn)品的上限。所以找到參考的時候我們不能覺得它的交互合理就照搬,還要思考它的這個方式是不是可以再更優(yōu)化。
所以我希望設(shè)計一套邏輯思維,去幫助自己知道怎么更好的分析自己的作品,達到更好的優(yōu)化效果。同時也可以去分析其他的作品,獲得更多的知識點,填補到自己的彈藥庫中。
利用這套思維邏輯,你可以做到:
1.可以全面快速的找到交互稿的優(yōu)化點
2.可以更全面的分析別人的作品,獲得有價值的知識點。
這套思維邏輯的三要素
這里說的三要素分別為 設(shè)計目的、交互規(guī)則、完成任務過程。(三要素的定義說明都以簡單化的去舉例,主要展示整體的思維方法)
設(shè)計目的
我們的設(shè)計交互是希望達到怎么樣的一個目的。比如:只針對用戶的話,簡單的來說一般分兩個大方面
1.幫助用戶完成用戶目標
2.在這過程中有良好的體驗
交互規(guī)則
針對目的,會有一系列要遵循的交互規(guī)則,而要得出這些規(guī)則首先是要做一些用戶調(diào)研的工作,調(diào)研又是一大篇幅,先不在這細講。
我們先以一些可以滿足大多數(shù)需求的通用性的交互規(guī)則來舉例,比如:
1.追求效率
2.減少失敗,盡量完成用戶的目標
3.滿足用戶情感需求
完成任務過程
得到規(guī)則后,我們再去了解用戶完成任務的一個過程,大致分為:
1.尋找信息
2.理解信息
3.進行操作
值得注意的是,這里的三個過程是不斷反復的,比如【3.做出行為】可能是個輸入行為,那輸入完了又會開始進行【1.尋找信息】,所以【3.進行操作】有兩個狀態(tài),一是過程型操作,像點擊導航欄查看信息。二是結(jié)束型操作,一般是提交、完成的結(jié)束性動作。
完成任務的過程中,用戶還會做以下工作
1.認知工作
理解產(chǎn)品的行為、文本以及組織結(jié)構(gòu)
2.記憶工作
回憶產(chǎn)品的行為、命令、密碼、名稱,控件位置,對象之間的其他關(guān)系
3.視覺分解工作
從屏幕的哪個位置開始,找到一個對象、解碼布局、區(qū)分視覺編碼的界面元素
4.肢體工作
按鍵,移動鼠標、手勢,不同模式之間的切換,導航點擊
我們也可以通過這些工作去輔助思考得出優(yōu)化點。
這套思維邏輯是如何工作的
以交互規(guī)則為出發(fā)點,從完成任務過程的三個階段里找到優(yōu)化點
完成任務過程的三個階段
1.尋找信息
2.理解信息
3.進行操作
接下來展示這套思維邏輯的具體使用方法。
規(guī)則一: 追求效率
追求效率分為兩方面,減少整體流程步驟與讓用戶用得順暢
(一)減少整體流程的步驟
從【1.尋找信息】來說:
1.信息層級多,提供搜索
2.重要信息、常用工具位置前置
3.讓系統(tǒng)來判斷用戶下一步需要什么,出現(xiàn)幫助提示
比如蘋果手機截屏后,微信發(fā)送圖片時,左下角會出現(xiàn)一個提示框,點擊可以直接調(diào)整發(fā)送
...
手機截屏后,微信發(fā)送圖片
從【3.進行操作】上來說:
1.減少操作,利用系統(tǒng)提前輸入已知信息
2.系統(tǒng)提供幫助操作
比如:展示短信驗證碼點擊后自動填入輸入框,不用自己手動填入
...
輸入驗證碼時,點擊下方提示,可以直接填入驗證碼
(二)讓用戶用得順暢
順暢一般分為三方面
1.簡單、易理解
2.迷惑時,能快速解決迷惑
3.不被打擾
從【1.尋找信息】來說:
a.讓尋找信息變簡單
1.視覺引導:重要信息、推薦操作可以通過顏色,字體放大等視覺引導讓人更容易注意到
2.符合閱讀習慣,加快瀏覽速度,比如左對齊閱讀更順暢
3.對用戶目標無關(guān)的信息可以去除,保持信息簡潔
5.對不熟悉的用戶提供向?qū)?br />
...
(百度網(wǎng)盤的上傳按鈕會比其他按鈕更突出明顯)
b.提供標識,減少迷惑,方便記憶
*用戶在進行多次尋找信息和操作后,在下一次尋找信息前,可能會產(chǎn)生疑惑,所以經(jīng)常需要確認一些東西,
比如你曬衣服,有時候你曬著曬著,你再去找衣服,會確認還有多少件衣服。
百詞斬左上角信息會展現(xiàn)背單詞的情況
從【2.理解信息】來說:
快速理解信息
文字:
1.文字信息熟悉
2.可視化設(shè)計,圖形輔助
...
從【3.進行操作】上來說:
a.操作簡單、方便、快速
1.直接控制比設(shè)置好
2.系統(tǒng)輔助輸入,比如語音輸入
3.選擇 OR 輸入
4.符合使用習慣:左上角放重要信息,右下角放重要操作
...
相冊的編輯截圖,直接上手操作,而不是說要設(shè)置左邊截圖多少px
b.操作時處于任務心流
不迷惑:
1.操作前控件外形具有提示性,比如:
輸入框長度提示一般會輸入多少個字符,
控件外形符合心智模型,比如凸起的表示可以按
2.操作時提供反饋,比如裁剪時,鼠標樣式會變化
3.操作后提供反饋,減少迷惑,比如上傳文件后的進度條
4.若是互動的話,可以展示對方信息,給接下來的操作提供指引
...
不被打擾:
1.進行操作盡量不要詢問,可以判斷用戶常用的情況,然后展現(xiàn),有問題可以讓用戶自行操作修改,或者提供撤回機制。
比如:
蘋果系統(tǒng)的刪除文件就不會詢問而是直接刪除了
sketch文件的關(guān)閉也不詢問是否要保存,當然他們會提供歷史文件記錄
語雀里新建思維導圖的時候,會直接提供模版,讓用戶自行修改
2.系統(tǒng)自己解決問題
比如:搜索時,你輸入關(guān)鍵字的拼音字母,系統(tǒng)也會幫你搜索出來
...
規(guī)則二:減少失敗,盡量完成用戶的目標
任務失敗一般是跟操作相關(guān),所以又可以分為三個階段
操作前
1.提前展示狀態(tài)
比如告訴你文本域中有多少字可以輸入
2.控件不可以使用,則展現(xiàn)置灰
3.提前展示狀態(tài)
比如:需要打電話給對方,但對方正在和其他人通話中,可以提前展示對方打電話的狀態(tài),減少你打電話失敗的幾率。
...
app更新時狀態(tài)會展示,你就不會去使用它,減少失敗的操作
操作中
1.提供反饋提示
比如:聲音的反饋,輸入錯誤會出現(xiàn)聲音
...
操作后
a.過程型
1.及時反饋錯誤
...
b.結(jié)束型
1.最后彈窗確認
2.提供撤回機制
...
規(guī)則三:滿足用戶情感需求
情感需求又可以分為和多種,比如被懂,被了解、安全感、共鳴感、新鮮感、趣味性等等。
以下拿“希望被人懂”的情感需求作為示例
用戶希望被了解,給他想要的
從【1.尋找信息】來說:
1.用戶經(jīng)常用的功能放在前面
2.提供歷史記錄
3.匯總展示(用戶希望先看到匯總的信息)
4.一些推薦信息以周的維度展現(xiàn)(用于用戶對本周信息感興趣)
從【3.進行操作】來說:
1.對用戶想去操作的地方,都可以操作
比如:
直接修改標題
保存文件時,對彈窗里的文件可以重命名
最后
以上就是這套思維邏輯方法的講解了,在平??磪⒖嫉倪^程中,也可以使用這套方法,去看參考是如何在任務完成過程中如何設(shè)計去達到那些交互規(guī)則的。
而怎么得出更多的交互規(guī)則,則需要明確設(shè)計目的,而要得出設(shè)計目的就需要去調(diào)研和了解產(chǎn)品定位、用戶目標、痛點、需求、動機、習慣、愿景、使用環(huán)境、商業(yè)等等。通作這些了解可以獲得更多知識,來放到這個邏輯思維書里,讓它不斷成長。
作者:李小凡_
鏈接:https://www.zcool.com.cn/article/ZMTU2Mjg2MA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
藍藍設(shè)計的小編 http://yvirxh.cn