產品設計中常被忽略的細節11則
我們在做產品設計中,尤其是在移動端產品中(本文重點針對移動端),常常會忽略掉一些細節點,本文對細節點進行總結,適合大家自查設計缺陷。也方便大家讓自己的工作更加完善,而不是在開發過程中,或者上線后才發現這些問題。
一、閉環的考慮
大部分設計師,或者新人在設計流程時,經常會忽略掉閉環這個細節點,包括在一些知名的APP中也會發生。
1. 功能閉環
用戶往往在做錯某事,或者忘記某信息的時候,會對已產生的事情進行修改、調整、刪除等:
最常見的就是“新建/創建/”對應的就是“刪除”,一般情況下,我們不會忽略。
但是在業務復雜,或者頁面結構較多的情況下,我們常常會忽略掉這個點;類似的還包含:密碼的找回,銀行信息的修改,自定義內容要重置,圈子想刪除等。
2. 場景閉環
用戶產生行為的起點、目的,和用戶最終落實的結果、目標要一致。
下面是脈脈之前的一個活動,我們來看下他的流程:
用戶被吸引的起點,和最終用戶希望看的結果頁面不一致,一直停留在第三個步驟,盡管是比較成熟的APP也會范這種錯誤。
最常見的地方是,我們發布一條微博、一條朋友圈,可以立刻看到自己發布的內容,這才是一個完整的閉環;還有在一些流程較長的設計中也要注意這一點。
二、頁面的跳轉方式
在APP中,常常有些頁面的跳轉方式不統一,同樣的效果,出現不統一的過場方式。然而我們在交互設計中,如果項目比較大的時候,會經常忽略這個點。
常見的跳轉方式有:左右、上下、包圍、展開等,本文就不拓展講了。
三、排序規則,排序方式
凡是設計到列表的情況,就設計到排序的規則。
嚴選限時購這一欄的3個商品,這三個商品的來源及排序也是我們要考慮的。
這個場景非常的多,如果不說清楚,開發可能實現的方式與最終預期產生偏差。
四、弱網&空頁面&占位圖
圖片太大加載過慢,網絡斷開,頁面為空,這些情況大家經常遇到。
上圖1是采用占位圖的方式避免加載過慢,上圖2無網狀態給出全新的解決方式。
關于空頁面的設計請參考我的另一篇文章:http://www.aharts.cn/ucd/589959.html
五、按鈕點擊效果
在快速迭代需求過程中,點擊效果的細節一般都不會考慮,但是在一些重要按鈕,關機性操作的時候,按鈕點擊效果是非常重要的。
現在很多APP都是扁平化設計風格,在一些主要的按鈕,一些特殊的情況下,比如安卓手機經??D,點擊的時候如果沒有點擊效果,用戶就會點很多次,造成不必要的損失。
六、阻擋二次生效
當遇到一些可以重復執行且會產生一些重要結果的操作時,需要有一定時間阻擋生效。
如上是我們在提交訂單的時候,往往當我們點了“去支付”按鈕后,一般情況下會設置在1-3s再次點擊無效,阻擋用戶二次點擊出差。
在一些Android手機中,進程太多突然卡頓,會經常出現這種下單下多個,付款付多次的情況,會造成很多麻煩。阻擋二次生效可以更好的讓這種出差的情況變少。
七、頁面刷新
頁面刷新也是一個經常遺漏的點。
APP中除了常見的下拉刷新外,我們還要考慮一些特殊場景,比如實時刷新、反饋后刷新、返回后刷新等。
八、特殊跳轉的返回邏輯
大部分的返回都是返回到上一頁面。但是在一些特殊的場景下,需要考慮返回的情況。
比如我們,在執行很長的流程時,當某些步驟已經確認,返回的話,就應該返回的對應的結果頁,而不是未執行完的流程中。
九、自發類信息的保留機制
當我們去生成一些內容時,可能會輸入很多內容,但是這個過程很容易被打斷,所以我們要有一定的內容保留機制。
上圖是微信的保留,以及某APP發布商品的頁面。我們在不小心誤觸到返回,或者在這個過程中,被外界因素打斷,再次回來的時候,應該有保留的機制。(默認保留,或者讓用戶選擇保留)
當然我們還會遇到崩潰、死機的一些情況,這個時候,保留機制就更為重要了,比如axure崩潰后的還原。
十、極端情況的考慮
用戶在即將完成某項任務時,因為網絡、設置、后臺配置等情況,使用戶在完成的一瞬間無法完成,應該給出相應的提示或者解決方法。
這種情況會常常出現,比如兩個用戶同時下單只有1個庫存的商品時,我們該如何提示。
再比如我們12306訂票時間是在7:00—23:00,當我們在提交訂票的一瞬間,超出時間,無法訂票,我們應該給出怎么樣的提示來引導用戶呢。
十一、系統錯誤
常見的數據出錯,服務器出錯,我們也應該給出用戶對應的反饋,及處理方式。
結語
這些細節如果被遺忘或者忽略掉,可能上線后會造成很多不必要的麻煩:被領導批評、被用戶吐槽等;希望以上總結內容讓大家在提交方案時,檢查自己的設計稿,提高設計質量。
作者:Booze-kai(包子凱),一個來自草原的野生交互設計師,原華為CCO交互設計師,從事過吉利汽車,中廣核的相關設計工作
本文由 @Booze-kai 原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
謝謝分享,提到的一些問題就在設計的產品中就出現了。??
請問按鈕點擊那個效果怎么做出來呢?這一點非常受啟發,以前從來沒有留意過這個點。
做兩個效果圖 動態效果嚷程序控制顯示
提出的點很好,受用,但是能否把解決方法也一次說完?
贊
感謝您的寶貴意見。
有些點細致的去分解會有很多內容,不適合一次性講完。這篇文章主要目的是讓大家不要忽略掉這些點,方便在工作中自查。
后面文章會對一些內容單獨的去講解決方法。
抱著學習的態度來的,已關注您,希望能聽聽您的方法解讀
點贊大佬,希望能出一期關于圖表類設計的講解~
謝謝分享 新人很需要明白這個
學習了