search
尋找貓咪~QQ 地點 桃園市桃園區 Taoyuan , Taoyuan

[ 平面理論教程 ] 實例解析交互細節設計的四個小技巧- 設計教程 - 骨子愛創意

教學主題: 實例解析交互細節設計的四個小技巧

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 實例解析交互細節設計的四個小技巧

這教學的重點為這幾點 [ 設計,技巧,細節,交互,解析,實例,用戶,APP,錯誤,操作 ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

在移動互聯網時代發展的今天,場景思維對於用戶體驗設計的影響不言而喻。大道理在此不多說,大家都懂。在這裡,盟主和大家分享一個近期手上的設計task中總結出來的幾個交互設計的小技巧。

在移動互聯網時代發展的今天,場景思維對於用戶體驗設計的影響不言而喻。大道理在此不多說,大家都懂。在這裡,盟主和大家分享一個近期手上的設計task中總結出來的幾個交互設計的小技巧。

近期盟主做了一個叫“綁定銀行卡”的 task。此任務的主要功能是讓用戶在點融APP上添加自己的銀行卡作投資理財用(非常小的一個功能點啦~)。在分析了業務需求以及技術限制之後,盟主對比分析了微信和支付寶兩大巨頭的“綁定銀行卡”流程,在以下的文章中會作為案例分析列出來。(非軟文)

1. 在功能性 APP 的設計上,設計要儘可能的簡潔

因為功能性 APP 主要以操作為主,且用戶操作的目的性會比較強。為了方便用戶操作,APP 頁面的展示信息需要經過提煉。給用戶展示當下操作需要的信息,減少甚至刪除不必要的信息。這樣一來能降低頁面噪音,方便用戶聚焦。

舉個栗子:在點融貸款 APP 的綁卡流程中,想要綁定成功銀行卡,需要提供用戶姓名、身份證號、銀行卡號和銀行預留手機號這四項要素。因為對於後台來說,用戶的姓名和用戶身份證號是對應的。也就是說,後台運行的時候會把用戶姓名和用戶身份證號一起傳輸,而對於用戶來說,只用知道自己的姓名就好了,沒必要同時看見自己的身份證號。出於以上考慮,為了讓用戶在這個流程聚焦,我對信息展示做了選擇,省去了與持卡人姓名相對應的身份證號的信息。如下圖所示:




實例解析交互細節設計的四個小技巧

2. 在設計簡潔的基礎上,要更注意設計細節,將場景思維落實到每個細節點中

設計要注意細節,設計要注意細節,設計要注意細節。重要事情說三遍。大家可以看下圖的栗子,左圖是點融借款 APP 的界面,右邊是支付寶的頁面。點融借款頁面中“持卡人姓名”這一項是不能被用戶編輯的,所以現設計把這塊的灰掉,暗示用戶此區域不能被編輯。右圖中“支付寶智能加密,保障你的用卡安全”這行說明文字也是為了告訴用戶輸入信息安全,打消用戶綁卡時候的顧慮。

這些都是非常細節的設計小點,但是運用在用戶使用場景裡面能傳遞更加友好的信息。

實例解析交互細節設計的四個小技巧

3. 對於給用戶的錯誤提示,應該更加場景化

很多 APP 的做法是在用戶已經操作錯誤之後給用戶錯誤提示,這需要用戶返回重複操作。如果用戶在這一階段反覆幾次還未能完成操作,很容易產生不耐煩的情緒。從更好的體驗的角度來說,處理這個問題一般有兩步驟。首先,需要設計師分析清楚這個錯誤提示是否必要以這種方式出現。是否可以通過流程上的改進或是頁面細節的改進來降低甚至避免用戶出錯的概率。其次,如果用戶操作錯誤,能否儘早儘可能準確的提示用戶。

下圖所示的是微信和支付寶的“選擇卡類型”的流程對比。二者都能基於銀行卡號自動識別出對於銀行,不同之處在於,微信允許用戶自主修改卡類型,如果用戶自主選擇結果有錯誤再給用戶錯誤提示的彈框。支付寶自動識別出銀行卡類型之後不允許用戶自主修改。

實例解析交互細節設計的四個小技巧

因為不清楚兩大巨頭在這一功能點設計背後的技術限制問題,所以很難說誰好誰壞。如果在信任自動識別技術的基礎上來說,盟主個人偏向支付寶的處理辦法。支付寶不允許用戶自主選擇卡類型,可以減少用戶自主選擇錯誤的可能性。這就是盟主在上段所說的,通過改進流程來減少(或避免)錯誤。




4. 設計遵從用戶的普遍認知

對於大多功能性APP 的設計而言,遵從用戶的普遍認知能降低用戶的學習使用 APP 的成本,一定程度上提升了 APP 的用戶體驗。簡單來說,就是在為功能性 APP 做設計時,採用的設計樣式啊交互方式啊一定程度的跟隨市場上的通用做法。這樣雖然從表面上看,APP 的設計個性會減弱,卻能在易用性方面得到大幅提升。

歡迎關注點融設計中心DDC微信公眾號(微信ID:DR_DDC):

實例解析交互細節設計的四個小技巧

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 實例解析交互細節設計的四個小技巧 這教學會喜歡

文章標題: 骨子愛創意- 實例解析交互細節設計的四個小技巧–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 設計,技巧,細節,交互,解析,實例,用戶,APP,錯誤,操作

本文永久連結 :實例解析交互細節設計的四個小技巧




本文轉載自 :VIA



熱門推薦

本文由 designhtd01com_0 提供 原文連結

寵物協尋 相信 終究能找到回家的路
寫了7763篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦