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