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