設計師專業表達指南——細節篇

來源:中國設計在線    時間:2019-09-12    站內收藏

千里之堤毀于蟻穴,再專業的交互設計,如果在后期交付時頻繁出現細節的缺失和補充,其實還是很容易遭受研發和測試同學diss的。甚至有可能因為一個細節的疏忽,導致整體交互方案的崩盤,不得不從頭再來。

如果研發過程中發生這樣的設計事故,其實是非常影響團隊士氣和個人專業影響力的。

設計細節篇,分兩個維度來闡述,一個是文檔外,一個是文檔內。

文檔外,其實是要回歸設計的初衷,很多設計師包括我自己,設計久了,總愿意把自己當作是用戶的代言人,盡可能的為用戶體驗著想,絞盡腦汁的尋求最佳體驗的設計,并以此為傲。

這如果是在產品發展的成熟期,功能相對穩定,體驗同質化嚴重,這個時候追求極致的體驗,尋求體驗的突破是非常有意義的,可以讓產品獲得更多的口碑,從而帶來更多的用戶和收益。

但是如果是在探索期和成長期,過度的追求單一維度的體驗,可能反而會成為一種產品發展的桎梏,阻礙產品的成長,而在衰退期追求極致的體驗,則完全背離了公司作為商業組織的利益點,會顯得和整個項目組格格不入。

產品生命周期與用戶體驗要求

所以對于探索期和衰退期的產品來說,設計師要盡可能考慮商業性和技術可行性。用最小的設計代價,快速的迭代,完成產品的目標(驗證價值或解決問題)。

如果設計師在這兩個階段太揪細節,可能會因為得不到項目的支持而心灰意冷。

技術可行性和商業收益,不是我們所擅長的領域,通過前面的設計法則和用戶埋點也不能準確推算,所以還需及時向技術及商務同學確認,別人家能做的產品形態,咱們家技術框架不一定支持。別人家能做的精簡極致,可能會損害咱們家的主營業務。

涉及到這兩點,除非有自上而下的旨意,否則單憑設計之力無異于蚍蜉撼樹,很容易讓自己費力不討好。

文檔內的交互細節,主要在于文檔的完整性和閱讀體驗,既要面面俱到,又要清晰簡潔。

面面俱到是指要盡量包含所有流程、頁面及狀態,避免遺漏。它體現了一個交互設計師設計思維的嚴謹性和設計態度。

網上有很多關于交互走查表的模板,非常的全面,但就是因為太過全面,反而讓很多新人設計師望而生畏,避而遠之,這就失去了交互走查表本身的意義。

我認為,交互走查表其實就是提供給設計師的一份幫助文檔,大家都知道在設計的時候,提示要盡可能的簡短,要適時出現,要清晰簡潔,遺憾的是我看到的交互走查表往往都不滿足這一條。

冗長的交互走查表,就像是冗長的幫助文檔一樣,把責任都推給了設計師,仿佛在說:誰讓你不按照我逐條檢查呢?

如果出現細節的遺漏,就變成了設計師自己的錯。

誰都不想遺漏,但是后期設計時間往往真的就很緊迫,設計師除了細節的補充,可能還有其他很多任務需要做,大家只是想確認一下而已,哪有時間和精力去看那么冗長的“幫助文檔”。

所以發揮一下設計師的同理心,根據二八原則,80%設計師可能遺漏的問題都只是認知走查表里20%的內容,這20%的內容也真正意義上影響我們80%的用戶和體驗,是設計者最為關心的。

那么,我們是不是先把這20%的設計解決好呢?這才是真正急設計師之所急,站在設計師的角度考慮問題。

所以本文精心篩選出最容易被大家所忽略,且大多數設計又必須要考慮的異常分支,為大家整理了一份《設計細節check表》,以確保主體流程的主要設計“面面俱到”。(流程設計、布局設計,以及互動設計,如果大家在前期有遵守對應的設計原則,再加上數據的支持,應該大方向都是正確的。我也希望大家盡量通過前期的理論和數據,去保證流程和整體設計的正確性,而不是要等到最后細節確認的時候,才來審視檢驗整體,讓細節篇,真的是在完善細節。)

設計細節Check表

我把這份《設計細節check表》按照從整體到局部進行了歸類:

最大的單元是指每個任務流程的檢查,然后是頁面單元,因為頁面涉及到加載的異常分支比較多,所以單獨拆出來和頁面狀態并列分別闡述。最后是組塊單元,主要包括輸入類和非輸入類的組件操作及反饋。

下面我們逐一來看:

一、流程檢查

流程檢查主要包括三點:

1. 和其他相似流程的一致性問題

秉承一致性原則,同一個產品,能保持一致的地方,要盡可能保持一致。

在實際項目中,同一個產品,往往有多個設計師,每個設計師都負責相對獨立的一大模塊,偶爾就會涉及到相似功能的設計,因為是不同人在進行,所以設計出來的形態就可能不一致;

但對于用戶來說,使用相似功能的人,往往可能是同一撥人,設計的不一致,體驗就會有差異,不僅對于用戶來說學習成本高,而且對于項目組來說同時維系兩套不同的設計,成本也比較高。

2. 逆向流程標注

如果一個流程的正向流程和逆向流程是完全一致的,一般無需特別說明,但是如果返回時需要跳過某些頁面或者狀態快速返回,則需要進行特殊標注,否則可能會被研發同學遺漏。

3. 流程進度的保存機制

當遇到特殊情況,程序崩潰,后臺殺死,斷電等,進度是否能夠能自動保存并恢復,如果需要,就需要考慮恢復的時機和形式。

說完流程,再來說單獨的頁面。談到頁面時,首先要談的是加載狀態,畢竟頁面不是憑空就有的。

二、加載狀態

加載狀態主要要考慮以下幾點:

1. 是否預加載

預加載的時機是什么時候,預加載的內容有多少?(對于用戶會長時瀏覽的內容,一般建議預加載,預加載的內容一般會結合內容大小、瀏覽時長、甚至網絡狀態綜合決定)

2. 加載前的狀態

在信息未加載出來前,界面是顯示空白引導,還是默認占位符,還是顯示上一次的緩存內容?(一般有緩存優先顯示緩存,無緩存先顯示默認占位符,等內容加載完成后再進行替換)

3. 加載進度顯示

是否顯示加載圖標,進度條,是否可以取消加載?(一般情況下等待超過0.1s,就能夠被用戶感知到,就建議顯示加載圖標,以便用戶知道程序已經接收到并在響應用戶的操作指令。如果等待超過1秒,就建議顯示進度條,并提供取消操作,便于用戶自主控制)

4. 加載機制

是全部加載,還是分布加載顯示?(一般情況下,在2~3屏內的有限內容,或者完全非同類的內容,是可以一次性全部加載的,因為用戶可能就是沖著某一類內容進來的,很可能會快速滑動到目標內容。

而對于同類型的圖文信息,而且是內容比較多時,一般都會采取分布加載的形式,避免浪費多數用戶的流量。

視頻播放機制、廣告圖片加載等,一般還要考慮網絡情況,一般WIFI情況下,因為對流量及網速的要求低,所以采用自動播放視頻,自動顯示圖片、播放廣告等,更容易被用戶所接收)

5. 加載超時處理

是否自動重試加載,何時進行超時提示等。(很多產品在設計時,如果不是完全無網絡,僅僅是網絡信息不穩定,會嘗試自動加載,以避免用戶手動操作。如果自動加載超過上限,才會提示讓用戶稍后再試)

頁面加載出來后,就要要考頁面本身的狀態了。

三、頁面狀態

需要考慮的異常頁面狀態主要有以下幾種:

  1. 無內容,或者內容被刪除后的空狀態。(一般會有一個默認引導圖,告知結果,并附加鼓勵操作的行為引導);

  2. 有內容時,且內容比較豐富時,要考慮各種內容及條數的多種組合樣式,特別是極端組合樣式,要檢查一下看起來是否合理,是否影響整體界面樣式;

  3. 是否需要新功能引導。比如有新功能,希望用戶嘗試,或這是進行設計重構以后,功能布局發生了變化,要考慮用戶是否還能找到原來的功能;

  4. 頁面時效性。活動類有時效性的內容,還需要考慮超過有效期后是否顯示,以及如何顯示,一般剛結束,都需要有一個收尾頁面,便于用戶查看活動結果。活動下線后可能還有一個下線不可訪問頁面,引導用戶向其他活動,或者其他功能頁面進行轉移。

考慮完整體頁面后,最后再來考慮一下頁面內的組件狀態。先來看一下輸入類。

四、輸入框/文本框

輸入框/文本框要考慮的主要有三點:

  1. 默認狀態。是否有默認提示,是僅僅是填寫提示,還是可以直接提交的示范內容?(現在越來越多的產品,為了減少用戶的輸入成本,開始在默認框中填入示范文本,考慮一下你的產品是否需要);

  2. 不可用狀態,考慮是否需要;

  3. 輸入狀態及反饋。這個要考慮的會多一點,主要包括正確/錯誤的實時反饋,超過輸入上線時的處理方式(截斷or提示)、輸入非標準字段的包容性,以及輸入內容是否實時保存。

最后看一下非輸入類的操作組件。

五、文本/圖標按鈕、連接誒、可操作的卡片/列表

“文本/圖標按鈕、鏈接、可操作的卡片/列表”要考慮一下幾點:

  1. 默認狀態。沒什么好說的;

  2. 懸停狀態,是否需要有懸停tips提示,這個一般只有PC端才有;

  3. 按下狀態,也稱點擊態。(一般需要設置單獨的視覺樣式,以給用戶明確的視覺反饋,正在響應用戶的操作);

  4. 彈起狀態,也稱已點擊或者已查看的狀態(對于同類型的多條并列信息,通常建議添加已點擊/查看狀態,或者返回時,讓用戶明確點擊的的選項,確認瀏覽的進度位置);

  5. 不可點擊狀態。說明不可點擊的條件即可。

如果設計完成后,初步檢查以上五項內容,基本上可以確定主題流程的主要設計內容已經面面俱到了。


本文來源:中國設計在線

上一篇:返回列表
關鍵詞: 設計師 交互設計 
作者:cdo
相關閱讀
    正在加載...
棒球帽品牌推荐