您當前位置:圖趣網(Tuquu) >> 網頁設計教程 >> 設計理論 >> 瀏覽設計教程

超周全的「交互規則說明」基礎科普


之前實習的時候,我發現我寫的交互規則說明會經??紤]不周全,導致會有返工。這幾天理了下交互輸出文檔里,交互規則的說明,以下是簡單的思維導圖,整頓了幾個可以切入的地方,會分成幾篇文章來跟大家討論。



一、關于對象

對于一個產品,它的用戶會有許多類型。

比如未登錄的游客用戶和已經登錄的通俗用戶;男性用戶與女性用戶;會員用戶和非會員用戶;認證用戶和非認證用戶;還有會員等級不一樣……

這些不僅會導致網頁表現不一樣,還會導致用戶能夠使用的功能不一樣,我們必要給一個判定的規則,以及判斷的先后順序。

比如體系先判斷用戶是否登錄,對登錄成功的用戶,體系再判斷該用戶是否認證,對于認證用戶,再判斷是否為會員用戶,再判斷會員等級等,根據判斷的效果給出不同的網頁去向以及功能使用權限。

比如知乎,在登錄和未登錄的前后兩種情況,用戶可以使用的功能是不一樣的:





比如微博的會員用戶可使用評論圖片功能;視頻類 app 會員可播放 vip 視頻;黃油相機會員可使用所有付費素材等;比如寶寶樹還有針對媽媽使用的功能以及針對爸爸使用的功能,它們在小我中間也會有會員的專屬標志。



二、關于狀況

對于一個 app 里面,所有的信息元素以及功能元素都會有多種狀況,有默認狀況,常規狀況,特別狀況等等。

1. 默認狀況

我們必要先設定一個默認狀況。

常見的要設定默認狀況的:有在進行表單里的單選框設計的時候,根據我們可以獲取的一些用戶信息,給用戶一個默認選項,當然這個選項最好是能夠吻合用戶真實情況的,如許能夠削減用戶的操作;

再比如默認文案,當用戶未輸入昵稱和個性簽名,或者未設置頭像時,我們可以給用戶一個默認的昵稱,個性簽名,頭像。



再比如默認鍵盤,當輸入一些數字信息(手機號,銀行卡號等)的時候,我們必要定義一個規則,讓體系調出數字鍵盤。



還有默認排序,比如搜索效果等列表頁,有一個默認排序,那這個默認排序是按照什么樣的規則進行排序的呢?也是我們必要定義好的。

還有默認選中,對于一些「贊成XX協議」等,我們是否必要默認幫助用戶選中呢?這也是必要按照場景來定義規則的。





假如我們沒有在原型旁邊備注這些說明,可能程序員就會開發出一些很不友愛的交互。

2. 特別狀況

我覺得可以把一些非正常狀況稱為特別狀況。比如網頁被刪除,無網絡,加載失敗,空白頁,體系錯誤,網頁刷新狀況等都稱為特別狀況。

從用戶觸發操作開始到效果頁,我們可以根據一個判斷的邏輯來確認我們還存在哪些網頁。



舉個例子,對于沒有網絡的情況,針對不同場景,有不同處理情況。

比如可以用 toast彈框提示用戶當前沒有網絡;還有效小插畫的情勢告訴用戶當前沒有網絡;另外像TIM和微信在斷網的時候通過狀況條告訴用戶沒有網絡。







簡單理了下這幾種斷網狀況的區別:



其實關于空白狀況頁還有刷新狀況頁,也有很多值得考量的地方,比如局部刷新,全局刷新,加載刷新,下拉刷新,上拉刷新等等,大家也可以本身研究研究。

3. button、鏈接等控件的多狀況

拿按鈕來舉例子,針對iOS平臺,android平臺,WEB端,按鈕類型以及按鈕能夠呈現的狀況會有許多區別。

比如 iOS平臺,按鈕有 normal,highlighted,disabled,selected狀況(不過對于設計來說,按鈕應該只有可點擊狀況和不可點擊狀況,對于開發來說,可能涉及到的狀況會比較多,關于 iOS 的按鈕設計規范可以閱讀 iOS Human Interface Guidelines)

比如 android平臺,按鈕有 normal,hover,focused,pressed,disabled狀況等等。(關于 android按鈕設計規范可以閱讀 Material Design)

對于交互來說,很緊張的是定義好按鈕是否可以點擊,在知足了什么規則后才可以點擊,為用戶提供一個可視的反饋去注解當前的狀況。

假如沒有定義好可點擊規則,那么用戶會賡續去嘗試點擊,然后會出錯,體系可能就會一向給用戶 toast 提醒,這個時候用戶體驗就會十分差。

舉個我覺得體驗不好的例子:



比如這一個 app 的登錄注冊頁,我在沒有輸入任何內容的時候,這個「繼承」button 是可以點擊的,每次點擊就會給我 toast 錯誤提醒。自己不可點擊的東西,但是看起來就是可以點擊的,點擊后還給我 toast 提醒,如許自己對用戶就很不友愛。

而它的輸入框也是很典型沒有定義規則,我可以在里面輸入超過11位的手機號,體系不會報錯,等我輸滿整個輸入框后,體系就開始反饋錯誤,然后我必要一個一個刪除,重新輸入。

雖然這種犯錯狀態少見,但是作為交互來說,我覺得應該削減用戶犯錯的幾率,所以這個網頁可以把規則定義為:只有當用戶輸入11位數字時,「繼承」button 可點擊,否則置灰,并且當用戶輸入到11位數字時,不能再繼承輸入……

總結

  • 在定義交互規則說明的時候,要細致使用對象的身份不一樣,可以使用的功能也會不一樣,網頁也會不一樣,比如登錄用戶和未登錄用戶,會員用戶和非會員用戶,男性用戶和女性用戶等等;

  • 我們要給app里面所有的信息元素和功能元素定義默認狀況,比如默認選項,默認文案,默認鍵盤,默認排序,默認選中等;

  • 我們還必要定義網頁存在的特別狀況,比如網頁被刪除,無網絡,刷新,加載,無數據等情況;

  • 關于控件的多狀況也是我們必要定義的,比如在不同平臺按鈕的多種狀況,按鈕在什么情況下可點擊等。

三、關于限定條件

關于限定條件,我覺得可以從兩方面入手——輸入限定和表現限定。

1. 輸入限定

對于輸入,有文本輸入,數字輸入,圖片輸入,語音輸入等,以文本輸入的輸入框為例,簡單列了一些輸入限定必要考慮的題目,比如:

  • 當未輸入內容時,是不可以發送的,那么該怎么告訴用戶不可發送呢?比如 button 不可點擊;

  • 還有最小限定,有些必要輸入超過10個字才能發送,那該怎么告訴用戶最小輸入內容呢?

  • 此外,輸入內容一樣平常都會有最大限定,怎么告訴用戶輸入文本的最大限定呢?

  • 當用戶輸入超過最大限定的時候,怎么告訴用戶不能繼承輸入了呢?是直接 toast 提醒,照舊限定用戶輸入,照舊在每次輸入的時候,實時反饋用戶當前字數,以及還差多少字到達最大限定呢?

  • 當輸入內容超出輸入框的時候,輸入框是不是會隨著輸入字數的增多而發生肯定的變形呢?

  • 當輸入內容過多的時候,輸入框內會存在不可見內容,那么不可見內容該怎么讓用戶知道呢?

這些題目都是定義交互設計規則時必要考慮的。

比如大眾點評:

它的輸入評論就是很典型的最小輸入限定 ,它在右下角給用戶一個即時轉變的文本提醒「加油,還差15個字」,并且當用戶未輸滿15個字,點擊「發表」后,toast 告訴用戶不能發表的緣故原由。

還有一個很故意思的是 ,輸入超過15個字后,右下角的文案提醒發生轉變,期望通過積分獎勵的體例來激勵用戶輸入細致的評論。





比如微博:

在發微博,當未輸入內容時,「發送」button 不可點擊 ;當用戶輸入內容后,發送 button 變為可點擊狀況,并且右下角出現記錄字數的提醒;但是當輸入超過140字的時候,右下角的記錄字數的提醒變為橙色,警告用戶輸入超出字數。





比如 TIM:

它的聊天對話輸入框,默認輸入框高度為第1張圖所示;

輸入內容超過一欄的時候,輸入框會隨著輸入內容的增長而變高,如圖2;

但是當高度增長到肯定的程度的時候,就不會繼承增長,而是將一些輸入內容隱蔽掉,而對于隱蔽掉的內容,會展現一半,告訴用戶可以上下滑動查看內容,如圖3。







2. 表現限定

關于表現限定,我覺得也有一些必要考慮的題目,比如:

  • 對于文本的表現,當內容較多時,是否必要悉數表現出來,對于不必要表現的內容是怎么處理呢?

  • 對于無表現內容時,該怎么表現呢?是空狀況代替呢?照舊刪減掉一些內容?

  • 對于數字的表現,當數字比較小或者較大的時候,是否可以將某一個范圍的數字用同一的文案來透露表現呢?

比如好奇心日報:

它的 news 的題目,由于題目字數的不確定性,有長文本,短文本,所以題目可能會有一行、兩行、三行,但是當題目字數過多,超過三行,該怎么處理呢?

它的處理體例是,超過三行的文本之后內容直接不表現。這個規則是交互設計必要在輸出文檔里定義好的,不然開發大哥也會沒有定義這個規則,最后運營給出的內容的題目過長時,整個網頁的布局就會顯得十分凌亂。



比如微信同伙圈:

當用戶發的同伙圈內容超過肯定字數的時候,在表現的時候,并不是悉數表現的,會將一部分內容隱蔽起來,給用戶一個類似于「查看全文」的入口。

我覺得這么做其中一個緣故原由是:由于翻同伙圈一樣平常是在碎片化時間的場景下,用戶對大段的筆墨其實是沒有閱讀的欲望的,反倒是一些小段的筆墨比較容易閱讀,假如用戶感愛好,天然會點開全文閱讀;

另外一個緣故原由也許是由于悉數表現的話,會存在刷屏情況,導致一屏只能表現1個用戶的動態,沒法激發人「刷」同伙圈的欲望。





關于數字的表現規則,比如未讀新聞數,超過肯定數量的時候,是表現新聞詳細數字呢?照舊表現「99+」,「999+」呢?或者表現「…」呢?

當超過肯定數字的時候,QQ新聞未讀數表現的是「99+」,微信新聞未讀新聞數表現的是「…」

再比如最小數字限定,網易云音樂的評論的發布時間,它的「剛剛」和「1分鐘前」是分開的,而對于微信里剛發的同伙圈,則把1分鐘內發的同伙圈統稱為「1分鐘前」。



四、關于用戶操作

關于用戶操作的交互規則,我覺得必要考慮的題目有:

  • 交互的體例,比如采取何種手勢操作?

  • 用戶進行什么操作可以獲取焦點,失去焦點?比如鍵盤的呼入與隱蔽。

  • 還有效戶可觸擊的熱區范圍是哪塊區域?

  • 以及常規的操作流程是怎么樣的?

  • 用戶精確操作有沒有即時反饋?錯誤操作有沒有即時提示?

對于手勢操作,在不憐憫景里,用戶在屏幕上同樣的動作可能會引發不同的效果,比如「雙擊」這個動作,可能產生的效果是「放大」或者是「開啟/關閉」,我們可以把「雙擊」等用戶在屏幕間進行的動作稱為「觸發動作」;

當然同樣的效果會由不同的動作觸發產生,比如「放大」這個效果,可能是由「雙擊」 產生或者「捏放」產生,也可能是「長按拖動」產生,我們可以把「放大」等用戶的操作在特定情景下引發的效果稱為「觸發舉動」;

這統統照舊視情景而定,但是在交互說明文檔里必要依據產品明確定義好。

觸屏設備中觸發的手勢操作多種多樣,但都是一些基本的手勢操作組合演變而成,常見的手勢操作有:

Tap(單擊)、Double tap(雙擊)、Drag(拖拽)、Flick(輕滑)、Pinch(捏合)、Spread(捏放)、Press(長按)、Press and tap(雙指長按)、Press and Drag(長按拖動)、Rotate(雙指旋轉)、Multi-finger tap、Multi-finger drag、Squeeze等等。



常見的觸發舉動有:Adjust(調整,這種情況在照片后期處理里面最常用),Bundle(多選),Delete(刪除),Duplicate(復制),Move(移動),Rolate(旋轉),Scale down(縮?。?,Scale up(放大)等等。

這里只是列了幾個常用的基本手勢,提示大家包括我本身在輸出交互文檔的時候,不會忘掉定義手勢操作的基本規則。

而關于手勢操作想了解更細致的話,建議看看國外許多 HCI 的文章,比如 Luck Wroblewski 的「Touch Gesture Reference Guide」。

總結

  • 在交互規則說明里,我們必要定義好限定條件,可以從輸入限定和表現限定兩個方面來考慮;

  • 對于輸入限定,我們必要定義好最小輸入限定和最大輸入限定,以及如何展示給用戶;

  • 當用戶超出這種限定條件時,我們必要如何提示用戶;

  • 輸入框也會隨著輸入內容的多少存在肯定程度的變形,但是也是有規則要遵循的;

  • 對于不可見內容,可以通過一些體例讓用戶知道它的存在;

  • 對于表現限定,當表現內容過多時,是不是必要悉數表現出來,對于不必要表現的內容用什么樣的處理體例;

  • 對于數字的表現,當數字比較小或者較大的時候,可以將某一個范圍的數字用同一的簡潔情勢來透露表現;

  • 我們還必要定義好用戶操作,包括手勢操作,獲取、失去焦點,熱區范圍,操作流程等。

關于交互規則說明里的反饋,下一篇文章再跟大家繼承分享交流。盼望以上總結不合理不周全的地方,大家可以與我討論。

迎接關注作者的微信公眾號:「UED設計筆記」


圖片素材作者:Paul Olek

[教程作者:互聯網]
免責聲明:本站文章系圖趣網整理發布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業用途!
本文地址:http://www.9254975.live/Tutorial/di4160.html
基礎小科普!淺談「列表視圖」與「網格視圖」的用法
基礎科普!重復與突變在產品設計中的應用
圖趣網微信
建議反饋
×
股票软件下载排名