92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

位移類手勢交互解析

濤濤

一年前更新了文章《交互手勢的容錯性和邏輯性》之后,有很多讀者朋友詢問是否能夠做一個詳細的講解交互手勢的系列文章,講解每個手勢的不同之處、應用場景以及在工作中如何使用。

我非常理解這些讀者的痛點,因為我在日常的工作中,也經常遇到一些難題。比如同樣是滑動,但是些許參數的變化就會導致體驗的天差地別,應該如何進行選擇。再比如與開發同學溝通過程中如何準確描述自己想要的效果,讓最后的結果不至于與自己的預期不一致。這些難題也促使我大量思考,大量體驗各種產品的手勢操作,希望能夠從中總結出規律,讓手勢的設計與落地能夠有理有據?,F在經過一段時間的積累,我認為我在這方面可以講一些能夠幫助大家的內容了。不足之處,希望大家指正。今天給大家帶來專欄的第一篇《交互手勢全解析之位移類手勢》。

位移類手勢的描述維度

手勢作為圖形界面與用戶之間溝通的方式之一,在便攜電子設備上大量應用。與實體按鍵相比,它有著純粹的簡潔性和無盡的創造性,手指的個數變化、不同變量的組合能夠創造出無數的操控方式。

位移類手勢是指代那些通過手指接觸屏幕后的位置變化從而操控電子設備的手勢,本篇文章主要講解單指操作的位移類手勢,多指的位移類手勢(如捏合)將放到后續文章中講解。

一談到位移類手勢,大部分設計師的腦海中可能會浮現出拖拽、甩動和輕掃這三個術語。然而,當我們想仔細談論他們三者之間的區別時,大部分設計師可能無法準確地描述。為了能夠準確描述三者的區別,我們在這里引入三個維度的概念,它們分別是控制方式、穩定化效果、以及閾值類型,這三者的不同的變化組合可以創造不同的位移類手勢,拖拽、甩動和輕掃之間的區別也是這三個維度影響的。當我們在討論不同位移類手勢之間的區別時,不如說是在討論這三個維度之間的區別。比如常見的輕掃手勢,因為這三個維度的變化就會產生不同的變種,而且不同變種在體驗上也存在很大差別,若不分場景隨意使用,很容易就影響用戶體驗。那接下來我們首先了解一下這三個維度。

1. 控制方式

第一個維度是控制方式,它分為絕對控制和相對控制,也可以通俗的表達為跟手和不跟手,區別如下。

絕對控制/跟手:施加控制的一方(后文簡稱施控物)的某個屬性變化與被施加控制的一方(后文簡稱受控物)的某個屬性變化是對應的。

相對控制/不跟手:施控物的某個屬性變化與受控物的某個屬性變化不是對應的。

比如在網易云音樂的播放頁,左右滑動黑膠時,手指是施控物,黑膠是受控物,手指的橫向位置變化和黑膠的橫向位置變化是對應的,即絕對控制。上滑調出評論頁時,評論頁的位置和手指的位置沒有對應關系,手指的上滑僅僅控制評論頁是否出現,即相對控制。

萬字干貨!交互手勢全解析(一):位移類手勢

與相對控制相比,絕對控制允許用戶去操控受控物的屬性變化過程,因此給予了用戶更強的掌控感。比如在微信讀書閱讀頁邊緣右滑,手指的橫向位置與書籍封面的變化過程對應,模擬現實生活中慢慢合上書的感覺,如下圖。

萬字干貨!交互手勢全解析(一):位移類手勢

但是在有些場景,為了避免混亂,屬性變化過程是不適合被用戶絕對控制的,此時我們應采取相對控制的方案。比如 iOS 的相機中,左右滑動切換拍攝模式,由于前后不同模式之間的頁面框架變化較大,切換時會有過多元素的屬性變化,如果使用絕對控制就會導致切換拖沓且混亂,使用相對控制就能避免這個問題。

萬字干貨!交互手勢全解析(一):位移類手勢

2. 穩定化效果

定義

當我們使用手勢控制某個受控物時,由于手勢的某個屬性(如手指位移)達到閾值,進而導致受控物的某個屬性穩定在了特定狀態的效果被稱為「穩定化效果」,或者也可以稱為「吸附」。

穩定化效果能夠保持界面的視覺秩序,避免過多的中間狀態導致界面的雜亂,進而幫助用戶聚焦信息。

是否有穩定化效果是區別輕掃與另外兩個手勢即甩動和拖拽的重要維度,當某個位移類手勢有穩定化效果,我們就將其稱作輕掃。

以滑動切換抖音視頻為例,當手指上滑的位移距離和釋放速度其中的某一項屬性達到閾值后,下一條視頻會往上移動一個固定的距離然后進入穩定狀態,而不會出現停留在不完整的中間狀態,如下圖所示。

萬字干貨!交互手勢全解析(一):位移類手勢

在 iOS 端的微信消息頁左滑某條消息后會出現更多操作按鈕,按鈕會在手指滑動的距離達到閾值并松開后穩定在一個固定的大小,而不會停在類似下圖左所示的混亂的中間狀態。

萬字干貨!交互手勢全解析(一):位移類手勢

在多內容選擇的場景中,如果滑動與選中是綁定的話,一般需要使用穩定化效果。例如在 iOS 相機里選擇濾鏡時,滑動濾鏡選項不但能夠控制濾鏡選項的位置,并且會自動選中一個位于中間位置的濾鏡,位置的穩定化避免了被選中選項的不明確。

萬字干貨!交互手勢全解析(一):位移類手勢

如果滑動與選中是分開的,比如美圖秀秀的濾鏡選項需要先滑動后選中,這種情況下穩定化效果不是必要的。

萬字干貨!交互手勢全解析(一):位移類手勢

與效率的關系

不同的穩定化規則帶給用戶的體驗差異是非常大的,最明顯的差異是在效率方面。我們使用穩定化效果的強弱來理解,穩定化效果越強,單次滑動能夠切換的選項個數越少,效率越低。穩定化效果越弱,單次滑動能夠切換的選項個數越多,效率越高。

比如在比較常見的 banner 切換功能中(下圖左),無論手指位移和釋放速度的值有多高,banner 只能切換并穩定到下一個,不能夠一次切換多個 banner。而在網易云音樂的首頁排行榜中,一次滑動能夠切換多個內容卡片,我們可以說前者的穩定化效果比后者強。

萬字干貨!交互手勢全解析(一):位移類手勢

拖拽和甩動雖然沒有穩定化效果,但是也存在效率的高低。我們可以將其與輕掃放在一起做對比,如下圖所示,拖拽、穩定化效果強的輕掃、穩定化效果弱的輕掃、甩動它們切換效率依次增加。

萬字干貨!交互手勢全解析(一):位移類手勢

那么我們決定添加穩定化效果后,如何選擇強弱程度呢?選擇沒有絕對的對錯,整體來說主要考慮兩點,業務訴求和用戶訴求。例如在常見的 banner 切換中,banner 的總數量一般不會很多,業務的訴求是希望盡可能曝光每一個 banner,使感興趣的用戶進行消費,因此這里比較適合做穩定化效果強的輕掃。在云音樂的排行榜案例里,不同用戶感興趣的榜單是不同的,穩定化效果弱的輕掃可以方便用戶單次滑動切換多個,快速切換到自己感興趣的榜單的大概位置。

百度 App 的表情面板原本是左右輕掃瀏覽表情,在一次改版中改為了上下甩動瀏覽。主要目的之一就是為了提高瀏覽效率、降低非首屏表情的曝光難度。

萬字干貨!交互手勢全解析(一):位移類手勢

微信視頻號的改版是一個典型的案例,舊版的微信視頻號的視頻流并不是類似抖音那樣的全屏化形式和輕掃手勢(下圖右),而是占據屏幕尺寸三分之一到二分之一之間的卡片形式(下圖左),并且使用甩動而非輕掃。視頻號問世初期優質內容匱乏,社交推薦算法不完善,貿然模仿抖音式的全屏化形式和輕掃手勢的話,會導致用戶瀏覽到劣質視頻時負面感受被增強且切換效率變低,反之卡片形式加甩動手勢給予了用戶更自由的選擇空間,提高了用戶的切換效率,降低了負面體驗。等到如今時機成熟,再從卡片形式和甩動手勢換成全屏化形式和輕掃手勢就勢在必行了。

萬字干貨!交互手勢全解析(一):位移類手勢

在某些場景,用戶需要先通過高效的方式選擇特定區域的內容,然后進入聚焦狀態進行內容瀏覽和慢速的切換,此時我們需要設計兩種切換效率不同的手勢應對前后場景的變化。如下圖,在 iOS 的照片 App 中,先使用切換效率較高的甩動進行粗略切換找到目標圖片大概位置,點擊進入大圖模式時使用切換效率較低的輕掃進行精確切換查看。

萬字干貨!交互手勢全解析(一):位移類手勢

觸發時機

觸發穩定化的時機可以分為釋放前和釋放后,不同的時機帶給用戶的體驗也不同。釋放前穩定化指的是用戶使用手指滑動屏幕時,手指位移達到閾值后,手指無需離開屏幕,穩定化即可被觸發。如下圖左,iOS 的相機滑動切換濾鏡使用的就是釋放前穩定化。釋放后穩定化指的是用戶使用手指滑動屏幕時,手指位移或釋放速度達到閾值后,手指必須離開屏幕,穩定化才能被觸發。如下圖右,常見的 banner 切換。

萬字干貨!交互手勢全解析(一):位移類手勢

釋放前穩定化可以避免拖沓,增加切換效率,但是缺點是無法反悔回退且缺乏掌控感。反之,釋放后穩定化可以反悔回退,掌控感強,但是缺點是比釋放前穩定化拖沓了一些。

3. 閾值類型

閾值是能夠觸發變化的最小值。比如當水的溫度達到 100 度時就開始變成水蒸氣,100 度就是一個閾值,溫度是閾值類型。在手指與屏幕的交互中,手指在屏幕上的某個停留時間、位移、釋放速度、點擊次數等都可以成為一個閾值類型,達到相應閾值后就可以觸發相應的變化,常見的變化有受控物的位置、大小、不透明度等,理論上變化可以是任意的。

在位移類手勢中,通常會用到的閾值類型有手指位移和釋放速度,手指位移是用戶在手指觸摸屏幕時的位置與之后某個時間手指位于屏幕的位置之間的距離,釋放速度是用戶的手指在屏幕表面進行位移后離開屏幕那一瞬間的速度。

市面上的 App 暫時不存在僅通過釋放速度判定而與手指位移無關的閾值判定方式,因為其不太符合常識。因此我們在設計位移類手勢時,能夠選擇的閾值判定方式常見的有兩種:① 判定手指位移和釋放速度滿足任意一個即可;② 僅判定手指位移。

當我們設計手勢時,就需要考慮兩者的區別。由于 ① 比 ② 增加了釋放速度帶來的額外移動距離,因此 ① 的主要優點是高效。但是由于我們無法預判釋放速度帶給受控物的移動距離長短,所以相對應的缺點就是易誤操作和不精確。②就恰恰相反,由于不存在釋放速度造成的不確定因素,它的優點是不易誤操作和精確,缺點是低效。

甩動和拖拽之間的區別就在于閾值判定方式,甩動是 ① ,拖拽是 ② 。如下圖,當在微信消息列表找相應的消息時,用戶的訴求就是能夠快速找到特定消息的位置,對特定消息的出現在屏幕的位置也沒有特定要求,只要能夠被手指點擊到即可,因此選用甩動較為合適,但是對于調節音量、亮度這一類的操作,滑動的范圍有限,因此用戶對效率沒有特別的要求,但是對于滑塊位置的精確度有要求,因此選用拖拽是更為恰當的。

萬字干貨!交互手勢全解析(一):位移類手勢

再舉一個反例,在 Steam 移動端橫滑首頁的泳道卡片時(下圖左),使用的手勢是拖拽而不是甩動,瀏覽起來特別低效。更適合的做法應為甩動,會更符合此場景下的快速瀏覽的訴求,如下圖右的豆瓣。

萬字干貨!交互手勢全解析(一):位移類手勢

對于輕掃來說,使用哪種閾值判定方式有多種情況(如下圖所示)。在本文中,根據閾值類型、穩定化效果以及控制方式的不同我將把輕掃分為 A-E 共 5 類(A-E 的命名方式僅存在于本文章,因此在向其他人傳達時,盡量使用在后文我介紹的手勢描述而不是類別名稱,以便于對方理解。)。后續會為大家仔細舉例講解,大家現在僅了解一下即可。

萬字干貨!交互手勢全解析(一):位移類手勢

當我們在刷抖音視頻時使用的手勢就是輕掃,是否滑動到下一條視頻進行播放的判定方式是① 判定手指位移和釋放速度滿足任意一個即可,對應的手勢類別是上面表格中的輕掃A。如下圖所示,在刷抖音時,如果使用判定手指位移的方式,我們可以將手指在垂直方向位移大于半個屏幕高度的距離,從而切換到下一個視頻。如果使用判定釋放速度的方式,我們可以移動任意的垂直距離但是手指離開屏幕時保留一個速度從而切換到下一個視頻。大部分情況下用戶都會使用判定釋放速度的方式,因為既省力又便捷。

萬字干貨!交互手勢全解析(一):位移類手勢

如果將閾值判定方式改為 ②僅判定手指位移,對應的手勢類別是上面表格中的輕掃 B,并且位移的閾值設置得比較大的話,給用戶帶來的負面體驗可能將是非常大的。比如下圖中打開美圖秀秀的短視頻評論浮層后,想要下滑收起時,App 僅判定手指位移,而且這個位移閾值設置得比較大,對于希望通過快速滑動一小段距離收起浮層的用戶來說體驗很差。即使由于開發資源有限我們只能做到僅判定手指位移,我們也可以通過減少手指位移的閾值來降低負面體驗。

萬字干貨!交互手勢全解析(一):位移類手勢

但是某些場景下,②僅判定手指位移是更加合適的。比如想要在微信中下拉打開小程序選擇頁,就只能通過手指位移達到一個特定的閾值才能夠觸發,無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁。這樣處理的原因是在微信消息列表頁,上下滑動瀏覽微信消息是一個高頻操作,如果釋放速度也能作為打開小程序頁面的閾值的話,用戶可能就極易在下滑消息列表時誤操作,無意間打開小程序選擇頁。

萬字干貨!交互手勢全解析(一):位移類手勢

因此,對于位移類手勢,選用哪種閾值判斷方式要依據用戶使用場景和訴求,不能想當然地設計。

常見位移類手勢解析

了解完三個基礎維度后,我們再將其進行組合,從特定手勢的角度更全面地理解它們的差異和使用場景。三個維度的排列組合能夠生成十余種位移類手勢,我列舉出了常見的 7 類,如下圖所示,這 7 類基本涵蓋了 95% 以上的場景,我將一一舉例說明。由于施控物控制受控物改變的屬性一般都為位置,因此接下來在描述下面手勢的定義時我都以受控物的位置變化進行舉例。

萬字干貨!交互手勢全解析(一):位移類手勢

1. 拖拽

定義

使用手指在受控物位置按下后,操控受控物沿著某個方向移動,無論釋放時手指是否仍有速度,受控物都會立即停止移動。(下圖的動態演示由 Principle 制作,觀看會有些不太直觀)

萬字干貨!交互手勢全解析(一):位移類手勢

特點

精確度高但效率低。由于閾值類型僅判定手指位移且沒有穩定化效果,拖拽適用于對操作精度要求高,對效率要求低的功能。

案例

在 iOS 設置中調節亮度時,在有限范圍內,手指左右拖拽可以控制亮度變化。

萬字干貨!交互手勢全解析(一):位移類手勢

2. 甩動

定義

使用手指在受控物位置按下后,操控受控物沿著某個方向移動。若釋放時手指仍有速度,受控物將移動一段距離后才慢慢停止,移動的距離與釋放速度呈正相關。若釋放時手指速度為 0,則受控物立即停止移動。

萬字干貨!交互手勢全解析(一):位移類手勢

特點

精確度低但效率高。由于閾值類型判定釋放速度和手指位移,甩動適用于需要快速瀏覽較多內容的場景,如滾動瀏覽列表。

案例

在微信的消息列表頁,使用甩動手勢控制列表上下移動,若釋放時仍有速度,列表將仍移動一段距離后才慢慢停止。

萬字干貨!交互手勢全解析(一):位移類手勢

3. 輕掃 A

定義

使用手指在受控物位置按下后,操控受控物沿著某個方向移動。若釋放時的速度和手指位移有任意一個達到閾值,受控物將穩定在一個新位置。若釋放速度和手指位移沒有任何一個達到閾值,受控物將回到原位置。

萬字干貨!交互手勢全解析(一):位移類手勢

特點

由于輕掃擁有穩定化效果,因此它能夠保持界面的視覺秩序,避免過多的中間狀態導致界面的雜亂,進而幫助用戶聚焦信息。接下來講解的其他輕掃類型都有這一特性,就不一一贅述了。輕掃 A 與接下來要講解的輕掃 B-E 的最大不同之處在于輕掃 A 的閾值類型為「釋放速度和手指位移」,這讓輕掃 A 與輕掃 B-E 有兩點不同,一是輕掃 A 可以通過釋放速度的快慢去控制內容的切換數量的多少,更加高效,二是輕掃 A 可以通過用手指在屏幕滑動很短的距離但離開屏幕時保留一個速度來切換內容,因此更加省力。

案例

在刷抖音時,如果使用判定手指位移的方式,我們可以將手指在垂直方向移動大概半個視頻高度的距離,從而切換到下一個視頻。如果使用判定釋放速度的方式,我們可以移動任意的垂直距離并且手指離開屏幕時保留一個速度從而切換到下一個視頻。

萬字干貨!交互手勢全解析(一):位移類手勢

4. 輕掃 B

定義

使用手指在受控物位置按下后,操控受控物沿著某個方向移動。若釋放時手指位移達到閾值,受控物將穩定在一個新位置。若釋放時手指位移沒有達到閾值,受控物將回到原位置。

萬字干貨!交互手勢全解析(一):位移類手勢

特點

輕掃 B 與輕掃 A 相比唯一的區別是閾值類型減少了釋放速度的判定方式,這提高了觸發切換的難度,使操作成本變高,但是在某些場景下,這也降低了誤操作的概率。如下拉刷新等。

案例

比如想要在微信中下拉打開小程序選擇頁,就只能通過手指位移達到一個特定的閾值才能夠觸發,無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁,這樣處理的原因是在消息列表頁上下滑動瀏覽消息是一個高頻操作,如果釋放速度也能作為打開小程序頁面的閾值判定方式,用戶可能就極易在下滑消息列表時誤操作,無意間打開小程序頁面。

萬字干貨!交互手勢全解析(一):位移類手勢

因此,當頁面已存在一個滑動操作的情況下,還存在另外一個方向相同的滑動操作且僅會在邊界情況下才能觸發時,為了避免誤操作,會將后者的手勢設計為輕掃 B。

上文提到,輕掃 A 的閾值類型為判定「釋放速度和手指位移」,輕掃 B 的閾值類型為僅判定「手指位移」,由于前者的實現成本比后者高,導致本應適合做成輕掃 A 的功能有時只能妥協做成輕掃 B,比如之前提到過的美圖秀秀的短視頻評論浮層案例,但我們也可以通過減少手指位移的閾值來降低負面體驗,后文會講解如何與開發同學溝通。

5. 輕掃 C

定義

使用手指在受控物位置按下后,操控受控物沿著某個方向移動,但是受控物并不隨著手指的控制而同步移動,僅當釋放時手指位移達到閾值時,受控物才開始移動并穩定在一個新位置。若釋放時手指位移沒有達到閾值,受控物位置則一直保持不變。

萬字干貨!交互手勢全解析(一):位移類手勢

特點

上文講到過釋放后穩定化和相對控制的缺點,釋放后穩定化比較拖沓,相對控制讓用戶缺乏掌控感。兩者如果應用到了同一個手勢(即輕掃 C ),就會導致用戶在滑動屏幕時得不到任何反饋,用戶會疑惑是否因為自己操作不當或是設備出現故障。只有當用戶手指離開屏幕后才會發現觸發了操作,整體的交互流程給用戶一種滯后與延遲的感覺。

因此輕掃 C 與其他類別的輕掃相比存在劣勢,但是它也存在很多的 App 的 H5 頁面中,我的猜測是由于 H5 對于判定釋放速度和絕對控制這兩個維度與客戶端相比難度大很多,因此只能退而求其次選擇輕掃 C 這個較差的方案,實際上在同樣的應用場景中用輕掃 A 替換輕掃 C 可以帶來更好的體驗。

案例

下圖左是 QQ 的個性裝扮的 H5 頁面,卡片的切換使用的就是輕掃 C,如果能夠優化為輕掃 A 體驗會更好,比如下圖右的音街首頁卡片的設計。

萬字干貨!交互手勢全解析(一):位移類手勢

6. 輕掃 D

定義

使用手指在受控物位置按下后,操控受控物沿著某個方向移動,但是手指位移達到閾值前受控物并不隨著手指的移動而移動。若手指位移達到閾值,無需手指釋放,受控物將開始移動并穩定在一個新位置。若手指位移沒有達到閾值,無論是否釋放,受控物位置則一直保持不變。

萬字干貨!交互手勢全解析(一):位移類手勢

特點

相對控制的方式降低了用戶的掌控感,釋放前穩定化減少了操作的拖沓感。使用此手勢的場景是在多個對象之間切換時,我們不希望用戶過于自由地操控對象之間的屬性變化過程,并且犧牲掌控感從而增加單次的切換效率。

案例

比如 iOS 的相機中,左右滑動切換拍攝模式時,由于前后不同模式之間的頁面框架變化較大,切換時會有不同元素的屬性變化,如果使用絕對控制和釋放后穩定化就會導致切換混亂且拖沓,使用相對控制和釋放前穩定化就能避免這個問題。

萬字干貨!交互手勢全解析(一):位移類手勢

7. 輕掃 E

特殊說明

上文我們講到,通過輕掃手勢 A-D 對受控物的絕對/相對控制都是存在于穩定化前,受控物一旦穩定化,就脫離了手指的控制,需要手指離開屏幕后再次接觸屏幕開始下一次控制。

輕掃 E 的不同之處在于它可以在受控物穩定化后,仍然控制受控物朝著下一個節點穩定化,在每個節點之間切換時能夠明顯感覺到分段感,如下圖案例所示。

萬字干貨!交互手勢全解析(一):位移類手勢

由于輕掃 E 相對于輕掃 A-D 的特殊性,控制方式中的絕對控制和相對控制無法覆蓋這個特殊現象,因此我們使用「多段相對控制」來命名輕掃 E 的這種特殊的控制方式。

定義

使用手指在受控物位置按下后,操控受控物沿著某個方向移動,若手指位移達到閾值,無需手指釋放,受控物就穩定在了一個新位置,但是此時手指還是仍然可以操控受控物繼續移動的,并且繼續移動過程中如果手指位移達到閾值將會到達下一個穩定化狀態。

萬字干貨!交互手勢全解析(一):位移類手勢

特點

輕掃 E 適用于需要在多個對象之間快速切換和確認的場景,它的使用感覺很接近拖拽。如下圖所示,我們可以這樣理解,當被切換的對象數量接近于無窮大同時每個對象之間的距離接近無窮小時,輕掃 E 就可以視為拖拽。

萬字干貨!交互手勢全解析(一):位移類手勢

案例

iOS 相機人像模式切換打光方式、微信的通訊錄滑動字母索引導航,它們都使用輕掃 E 來滿足多個對象之間快速切換和確認的需求。

萬字干貨!交互手勢全解析(一):位移類手勢

實戰案例

了解完上述的維度和常用手勢后,我們在腦中就可以形成一個思考框架。當我們要針對一個功能設計位移類手勢時,就可以從閾值類型、穩定化效果以及控制方式這三個維度思考。接下來我用一個我參與過的實際項目作為案例給大家講解一下思考過程。

本案例是網易云音樂陌生人版一起聽中的一個功能,一起聽的雙方在聽歌過程中會收到彼此共同信息,比如聽歌口味相似度、是否同城、都喜歡哪些歌手等,目的是為了增加可玩性和互動性、降低退出率,鼓勵用戶互相了解、提高一起聽過程中的社交體驗。

為了營造儀式感和避免信息過載,共同信息的展示方式設計為了一次只能看一條,進入浮層后默認展示最新的一條,可以通過滑動查看上一條。因此為了避免出現兩條同時占據展示區域的混亂狀態(如下圖左),我們為其添加了釋放后穩定化效果(如下圖右),同時為了方便用戶可以快速瀏覽舊的共同信息,這里使用的穩定化效果是較弱的,用戶可以通過滑動一次切換多個共同信息。

萬字干貨!交互手勢全解析(一):位移類手勢

由于需要滿足用戶快速瀏覽舊的共同信息的訴求,閾值類型選用了「判定手指位移和釋放速度滿足任意一個即可」,用戶可以通過控制釋放速度進而控制信息的切換數量??刂品绞絼t選擇了掌控感強的絕對控制。最后的結果如下圖所示。綜合三個維度進行歸類,此手勢為穩定化效果較弱的輕掃 A。

萬字干貨!交互手勢全解析(一):位移類手勢

手勢角度的處理

位移類手勢的方向一般為上下或左右,但并不是一定要完全垂直或水平才能夠觸發手勢。當上下滑動和左右滑動同時存在于一個頁面時,默認會有一個容錯角度,比如上滑時手指滑動方向只要左右偏移不超過 45° 都會被判定為上滑,如下圖所示。

萬字干貨!交互手勢全解析(一):位移類手勢

但是有時開發同學出現失誤,導致容錯角度沒有均分,例如下圖中觸發上滑和下滑的角度極小,導致用戶在上下滑動時非常容易誤操作為左滑和右滑。

萬字干貨!交互手勢全解析(一):位移類手勢

云音樂也曾有過類似的遺留問題,iOS 端的播放頁上滑調出評論頁極易誤操作為左右滑動黑膠切歌(如下圖 A,現已修復),安卓端的賬號側邊欄上滑瀏覽極易誤操作為左滑收起側邊欄(如下圖 B )。

萬字干貨!交互手勢全解析(一):位移類手勢

因此,在驗收階段,除了上述的三個維度外,角度的容錯性檢查也是重要的一環。因此在驗收時間充裕的情況下,最好要切換不同的手持方式分別體驗一次,因為有些問題只有在特定的手持方式下才能夠被發現。(下圖素材來源于網絡,侵刪)

萬字干貨!交互手勢全解析(一):位移類手勢

客戶端的角度判定方式實際上是一個比較復雜的過程,上述的內容是簡化的版本。后續將延展為一篇獨立文章給大家仔細聊一聊。

客戶端的差異

上文講到,基礎的三個維度即閾值類型、穩定化效果和控制方式決定了手勢的類別,是設計階段一定要定義清楚的。但是除此之外,設計一個手勢需要定義的細節非常多。比如受控物的移動是否有速度曲線?手指位移與受控物之間的位移的比率是多少呢?這些都是開發階段不得不面對的。幸運的是,安卓和 iOS 有系統封裝好的一套系統組件可以調用,操作系統自行解決了剛才講到的細節問題,但是 H5 框架下是無法調用系統組件的,手勢的各種細節都需要前端開發人員自己編寫,難度較大,大部分情況只能實現一些比較簡陋的效果,這也是為什么在很多 H5 框架下的界面滑動的體驗比較差的原因。

高效溝通

由于信息不對稱,與開發的溝通過程中,很容易出現理解偏差。比較常見的錯誤有:將甩動誤解為輕掃 A,將輕掃 A 誤解為輕掃 B 或甩動。如果造成效果達不到預期的情況,很多設計師不知道如何讓開發同學修改,只能說“這個手勢不絲滑,優化一下”,開發同學也是一頭霧水,不知道往哪個方向優化。如果我們能夠直接說出“閾值判定方式現在只有手指的位移,需要釋放時的速度也能夠觸發跳轉;這個位移的閾值太高了,滑動時很難觸發跳轉,需要把閾值改為 16pt ”類似這樣準確的描述,就能夠大大降低溝通成本,順利驗收。為了避免溝通出現問題,下面我將日常經驗總結出現希望能夠幫助到大家。

首先,一旦涉及到位移類手勢,除了必要的文字描述外(可參考上述的手勢定義的描述),最好給開發體驗 demo 或者其他 App 上類似的效果,否則很容易產生理解偏差。各種 App 上的類似效果大家可以用本文的每個手勢的案例給開發同學展示,但是 App 可能會更新,案例可能在未來某個時間就找不到了,所以我用 Principle 做了一個簡易的基礎 demo 集合,和我上述介紹的手勢是對應的,大家可以拿著這個 demo 給開發同學演示大概的效果,也可以在這個 demo 源文件修改。

萬字干貨!交互手勢全解析(一):位移類手勢

拖拽和甩動由于需要定義的細節參數都被操作系統提前封裝好了,不需要我們給到額外的標注。但是對于輕掃,我們需要將細節定義清晰,下面將詳細講解。

1. 閾值類型

上文講到,閾值類型一般有兩種:① 判定手指位移和釋放速度滿足任意一個即可;② 僅判定手指位移。①的開發成本高于②。

如果我們選用輕掃的閾值類型是①,開發同學編寫代碼需要兩個參數的閾值,分別是手指位移和釋放速度。手指位移閾值一般默認為受控物的1/2,例如下圖的全屏短視頻和 Banner 。

萬字干貨!交互手勢全解析(一):位移類手勢

當然我們也可以自定義一個閾值,比如 100pt、受控物高度的 1/6 等,沒有特別的需要的話使用默認值即可而且也不用給開發同學特殊說明,但是如果有特殊需要想要修改默認值,就要告知開發同學你自定義的手指位移閾值。對于釋放速度閾值,通常默認就非常的小,幾乎是大于 0 即可觸發,一般情況下使用默認值即可。

在本應該選用①的場景中,如果由于技術成本原因不得不選用②,需要注意的是由于缺少了釋放速度的判定,手指位移的閾值我們需要設置得小一些方便用戶觸發,否則就會出現上文中美圖秀秀浮層的那樣的體驗問題。經過我的實驗,手指位移閾值一般定為 16pt 是比較適中的,既不會太容易誤操作也不會難以觸發。

2. 穩定化效果

輕掃是一定存在穩定化效果的,關鍵在于告知開發是釋放前穩定化還是釋放后穩定化。從開發的角度講,系統會監測用戶的行為,用戶在使用滑動時會有按下(down)、移動(move)、抬起(up)三個行為,釋放前穩定化是在移動階段判斷閾值并觸發操作、釋放后穩定化是在抬起后判斷閾值并觸發操作,開發成本幾乎沒有區別。

上文提到過穩定化效果強弱的概念。穩定化效果越強,單次滑動能夠切換的選項個數越少,效率越低。穩定化效果越弱,單次滑動能夠切換的選項個數越多,效率越高。首先,我們需要確定單次滑動允許切換多個還是只允許切換一個,如果允許切換多個,開發同學會設定一個控制切換難度的系數,而只允許切換一個的話就不存在這個系數。通常我們也不需要修改這個默認系數,但如果想讓操作更加難或容易觸發,可以告知開發同學修改這個系數。

3. 控制方式

絕對控制比相對控制的開發成本高,如果開發資源并不是很緊張,需要絕對控制的場景就不要退而求其次使用相對控制。涉及到輕掃手勢一定要告知開發同學控制方式,否則很可能被視為相對控制處理。

手勢排查

通過本文的學習,我們不但可以在開發工作進行前與開發同學高效溝通,保證開發工作的順利進行,也可以對自家移動端產品的現有手勢進行逐一排查發現問題點進行記錄,并且找到合適解決方案,然后用準確的語言描述給開發同學。下圖是我在進行手勢排查后輸出的表格,挑選出一些有代表性的案例給大家作參考,開發同學可以通過它快速明確問題,理解解決方案。

萬字干貨!交互手勢全解析(一):位移類手勢

結語

本篇文章的歸納總結是通過日常積累和思考得來,希望能夠幫助大家在設計與溝通層面解決實際問題,如果有任何疏漏和不嚴謹的地方,希望大家能夠指出,后續的更新會將專欄不斷完善,交互手勢系列暫定的后續更新計劃如下。


藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png



文章來源:優設 作者:設成于思

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


iOS14:交互上這5點變化,值得細細研究

seo達人



一直很喜歡蘋果系統的交互設計,因為絕大多數設計點都考慮得周到且成熟,體現出蘋果作為頂級大廠的范兒。研究優秀的設計,學習他們的方案,會使我們也更優秀。下面就帶大家看看,蘋果系統這次更新,在交互上值得細說的5個功能點。

 

一. 桌面小組件

這次iOS最大的更新,莫過于這個桌面小組件了。
說白了,就是把app的一個功能拿出來,直接展示在桌面上。這樣用戶不用進入應用,也能看到需要的信息。
 
其實這個小組件,在安卓和Windows Phone上已經存在許久了。
但蘋果一出手,還是能把這個老掉牙的功能做得更有精致感。
這一點不得不服。
 
沐風分析了一下,產生這種精致感,主要有兩個原因:
1. 小組件的尺寸是固定的3種:
 
并且這3種尺寸的小組件,邊緣都與系統中的app邊緣對齊。
 
這種整齊劃一比安卓的隨意放任,制造了精致感。
 
2. 小組件的動效流暢,且交互細節完整。
例如,下面是待辦應用Things的小組件。點擊其中的“讀書”事項,則小組件展開為全屏,并且“讀書”事項背景色發生變化,暗示剛剛點擊過。
從底部上劃,則頁面從全屏收起為小組件形態。
整個過程如德芙般絲滑。
 
順提一句,這個動效中,被點擊條目的背景色變化這個細節設計得十分出色:
  • 由于用戶明確點擊了“讀書”,按照該應用里的邏輯,讀書選項應該被標記為完成;
  • 但小組件本身不承載那么重的操作,所以點擊后是打開應用;
  • 此時被點擊的條目背景色變化,提示用戶該條目剛剛點擊過,是十分必要的反饋。否則點擊某個條目,卻打開的是整個應用,前后的對應關系不吻合。
從這個細節,可以看到Things應用設計師的用心。
小組件還有個交互細節:它們可以疊放。
當把一個同樣尺寸的小組件,放到另一個小組件上方,它們就疊放在一塊了。
 
完成疊放后,沐風緊接著產生了一個疑惑:疊放在一起的小組件,默認只能看到最上面的一個,而且也沒有任何“多個數量”的提示。
那我怎么知道哪個組件是疊放的,哪個是只有一個呢?
經過探索,我在這里找到了答案:

當用戶在不同頁面之間劃動時,有疊放的小組件,右邊會展示出小圓點(隨后立即消失),提示這里有多個小組件:

不得不說,這個細節反饋還是考慮很周到的。
   

二. 資源庫

剛開始看新聞時看到這個功能,覺得這個功能沒什么稀奇,體驗了之后才發現它對我使用手機的幫助還挺大。
具體來說,資源庫的邏輯是這樣神兒的:
  • iPhone 上安裝的所有應用都會被整合進 App 資源庫,系統會對這些應用進行自動分類,放在不同的文件夾當中。
  • 其中第一個和第二個,一定是建議和最近添加;后面的是各種分類,如社交,工具等等。
值得一提的是,這個資源庫頁,排在手機所有頁面的最后。也就是說,要想到達這個頁面,需要在iPhone里不斷向后劃。
這對于我這種重度app使用者,手機里有12頁應用,是有點崩潰的:
 
所以一開始,我不太理解這個功能到底解決了什么問題:
為什么要有個資源庫?我要找什么應用,直接在任意屏幕向下劃動,呼出搜索不就行了嗎?
 
后來,隨著研究的深入,這個功能真正的價值才漸漸浮出水面:
資源庫可以存放那些不常用、又舍不得刪的應用,提高iPhone屏幕的使用效率。
證據有2:
1. 在iOS14里,刪除應用時,多了一個“移至App資源庫”的選項
 
在設置-主屏幕選項中,增加了將新下載的 App 僅保存在 App 資源庫中的選項:
并且還可以設置 App 資源庫中的應用是否顯示通知角標。
這些新的設置選項,都在幫助用戶清理屏幕上不常用的應用。
 2. 如果覺得app 太多,一個個刪除太麻煩,則長按主屏幕,點擊 Dock 欄上方的一行白點,還能直接隱藏某個頁面(團滅的節奏???),同樣達到簡化主屏的目的。
經過以上的分析,現在我可以理解資源庫為什么在最后一頁了:常用的app都在前面,所有的應用都在最后的資源庫里。
原來是按照使用頻率分的。
懂了。
 

三. 權限使用提醒

iOS14對用戶的隱私進行了升級式的保護:手機里的應用在使用手機的哪些權限,現在變得更一目了然。
比如,當我在用微信語音時,發現屏幕右上角多了一個橙色的小圓點,從小圓點位置下滑,則展示了“麥克風icon + 微信”,提示微信正在使用麥克風。
小圓點占據一行,略顯孤單。
但從前后的邏輯來看:權限使用詳情(“麥克風icon+微信”)只能展示在控制中心,而控制中心又是從右上角向下劃動后出現。
所以小圓點展示在右上角,是必然的合理選擇。
同時,權限的提醒又不會做得太重,所以展現形式上就是一個小小的圓點。
 

四. 來電提醒輕量化

過去幾年,iPhone一直只有全屏來電模式。來電默認擁有系統最高優先級,但這導致大家在玩游戲時,會被來電打斷,影響了用戶體驗。
此次 iOS 14 更新,加入了來電提醒的通知欄模式。
當 iPhone 處于鎖屏狀態時,來電和之前一樣,會全屏顯示;
當手機是正在使用狀態,來電則會以頂部通知欄的方式呈現。
另外,如果不想接聽,也不想掛斷,將通知欄往上一滑即可忽略,對方還是處于撥打狀態,而你完全不受影響。

 

五. 新增的交互方式:輕點背面

此次更新,增加了“輕點背面”的操作方式。用戶可以設置輕點手機背面兩下或者三下后,自動執行一個功能操作。
這里沐風為大家推薦一個功能:屏幕朗讀。
屏幕朗讀可以把屏幕上的文章都讀出來,很適合坐車、做家務、走路這些場景。解放雙手,值得擁有。?
下面是具體的設置方法:
 
設置好了之后,連續敲兩下手機的后背,屏幕朗讀的功能就被自動激活了。
是不是很方便。
 

總結

以上為大家分析了iOS14更新中,5個交互設計點:
  1. 動效流暢、交互細節完備的桌面小組件;
  2. 幫大家清理手機屏幕的資源庫;
  3. 細致的權限提醒;
  4. 輕量化的來電提醒;
  5. 使用的輕點背面交互方式。

 

原文地址:沐風與體驗設計(公眾號)

作者:小哥哥沐風

轉載請注明:學UI網》iOS14:交互上這5點變化,值得細細研究

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png


文章來源:站酷   作者:陳皮Celia 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


UI和交互的需要注意45個微細節

鶴鶴

1.用微妙的雙重投影來讓你的卡片看起來更加清晰

在某些元素周圍使用多個放置陰影或非常精細的邊框(僅比實際陰影暗一點)可以使這些元素看起來更清晰、更清晰,并幫助你避免那些看起來渾濁的陰影。



2.減少標題上的字母間距以提供更好的光學平衡

你的標題很可能會比正文更大,也比正文更重,所以字母之間的間距有時會看起來更大,

減少一點間距,就可以使你的標題更加清晰



3.為了保持一致性,請確保圖標共享相同的視覺樣式。

在ui中實現圖標時,保持一致。

確保它們具有相同的視覺風格; 相同的重量,或者填充,或者輪廓。



4.在你的設計中只用一種字體就好了

在創建設計時只使用一種字體是比較好的,這樣做實際上可以幫助你產生統一的設計效果。

使用字重、大小和顏色的組合,你還是可以用一個單獨的字體表達清晰的文字的結構



5.留白

留白可以讓你的設計具有呼吸感,更加舒適



6.選擇底色,然后使用色調和陰影來增加一致

通過選擇一個基色,然后使用你選擇的顏色的色調和陰影,可以以最簡單的方式為你的設計增加一致性



7.提高用戶的入職體驗。 拇指法則記住。

允許用戶隨時跳過你的移動應用程序登錄序列,并將該跳過鏈接放在拇指容易觸及的位置。

只是一個簡單的調整,可以讓你的用戶有更好的體驗(我常常體驗國內一些APP,關閉按鈕特別遠,特別難按)



8.光影需要是來自同一個光源

確保你的陰影總是來自同一個光源,會素描的同學很好理解,光源關系一致表達空間統一性的基礎



9.提高文本和圖像之間的對比度

基本的處理方式是,在圖片上增加一個透明漸變蒙版來使得字體看的更加清楚



10.同一種字體時,使用多字重的字體

如果只使用一個字體,盡量選擇有多字重的字體,比如:阿里巴巴普惠體、思源、OPPO



11.在淺色背景上你的文字可見性需要注意

在淺色背景下工作時,文字顏色不要太淺,雖然看起來很舒服,但可見性不較差,不利于閱讀



12.長文本中,文字閱讀感不要太搶眼

當涉及到長格式的內容時,某些常規的粗體字體在屏幕上看起來還是有點太重,太呆板了。

建議,選擇像深灰色(即# 4f4f)來降低文本的色調,這樣閱讀起來會更加舒服



13.行動按鈕需要是最聚焦的。

通過使用顏色對比、尺寸和標簽,確保“行動按鈕”盡可能突出



14.字號越小,你的行距就越高

隨著字號的減小,增加行高可以獲得更好的易讀性。




16.突出菜單中最常用的元素


在設計應用程序內部使用的菜單時,請確保提供最常用的操作(即; 上傳圖像,添加文件等…)最突出的屏幕



17.從你的圖像中挑選顏色,讓你的產品栩栩如生。

只需從你的產品圖像中挑選顏色,然后將你選擇的顏色的各種色調和陰影應用到你的背景、文本、圖標……,就能為你的設計增添大量的視覺趣味



18.根據字體的x高度設置行高。

不同x高度的字體需要不同的行高測量來實現文本行之間的正確分隔。

即使你可能有兩種字體大小相同(即; 18px)它們的x高度可能會有很大差異,選擇正確行高是非常有必要的



19.突出最重要的元素

undefined

通過使用字體大小、權重、顏色和布局的組合,你可以輕松突出UI中最重要的元素



20.告知錯誤的原因

undefined

在用戶剛剛執行的操作附近添加一條錯誤消息,可以幫助用戶提高正確登入,也可以緩解用戶焦慮(他可以更加清晰那里出錯)



21.嘗試在手機上創建更大可點擊的區域。

undefined

當為移動設備設計時,嘗試創建足夠大的可點擊區域

對于按鈕和僅由文本組成的鏈接來說,點擊區域會很小,所以盡可能使用帶有標簽的圖標。

iOS和Android的最低建議點擊區域

iOS為44 x 44pt

安卓48 x 48dp



22.在短標題上使用大寫的字母

undefined

長標題都是大寫字母的話,閱讀轉化上比較慢(你明白他是什么意思比較慢)

短標題都是大字母的話,相對來說比較快可以和記憶中的單詞對應上



23.保持淺色文本和圖像之間的對比度

undefined

始終確保淺色文本在淺色圖像背景下清晰可見。

只需在文本后面應用一個低透明的深色背景,就能保持這些元素之間的良好對比度



24.排版的親密性,要一直記得

undefined

標題、正文、標題、正文……這樣的排列中如果是間距都是相同的,那么在閱讀上就很難區分標題是屬于上文還是下文的。

正確的做法是,標題距離上文的距離>標題距離下文的距離,這樣閱讀起來,標題會比較清晰的對應的是下文



25.在下載中盡量給進度提醒

undefined

當下載速度是一閃而過時,則無需提示

當下載等待時間>3S時,建議給進度提示



26.文字也有情緒

undefined

在項目中處理文本時,選擇正確的字體將影響文本的語音類型。 那么大聲、或者溫柔、或者正式,嚴肅,或者有趣。每種字體都有自己獨特的聲音



27.為正文選擇合適的行長,并提高可讀性。

undefined

基于人閱讀情緒,如果閱讀一行很長,一直閱讀下去,會出現你眼前閱讀的內容“不見”的情況

對于單列頁面,45到75個字符被廣泛認為是令人滿意的行長,66個字符的行(包括字母和空格)是最合適的。

當然,字體大小和行高也是決定可讀性的一個因素,但是對于行長,要保持在45到75個字符之間



28.偶爾使用純粹的裝飾性元素是可以的,但要保持可訪問性。

undefined

需要適當,如果裝飾的強了主要表達的,則不可取



29.使UI中的元素相互區分。

按鈕。 通知。 UI中兩個獨立但必不可少的元素。

一定要確保你的用戶能夠快速準確地將他們區分開來



30.陰影不要太重

undefined

舒服的投影會增加你的設計的質感,和透氣感。太重的投影會顯得你畫面比較臟



31.使用遞進分類時,需要明確當前選中的元素

undefined


32.使用高度飽和的顏色? 試著用色調或陰影把事情調小一點。

undefined

高度飽和的顏色(明亮的藍色、紅色、綠色等)在網站上看起來很不錯,但過度使用時,會讓用戶眼睛疲勞,主要是與文本內容一起使用時。



33.使用用戶熟悉認知的圖標表達

undefined

在向設計中添加圖標時,使用用戶熟悉認知的圖標。新的圖標雖有很好看,很有個性,但是會讓用戶疑惑



34.接近律

undefined

需要承上表達的元素,排版上接近對應的元素,可以讓用戶心理聯系起來是一體的



35.減少標題的行高是很好的。

undefined

與長格式正文文本(需要足夠的行高以提高可讀性)不同,標題通常要短得多,因此可以稍微縮小間距。標題的建議行高通常是文本大小的1到1.3倍



36.從色輪上挑選配色

undefined

類比色和鄰近色是最和諧的配色方案之一,也是最不會出錯的配色



37.想用更輕松的語氣, 盡量用小寫字母。

undefined

在處理特定項目時,使用類似于所有小寫字母的文本可以表達更加輕松的意思

但需要注意,在圖像和文本之間使用某種顏色疊加,以獲得更強的對比度



38.使用重量、大小和顏色來表示你的結構層次感。

undefined


39.深色背景+淺色文本, 增加字重,提升易讀性

undefined

當在淺色背景下設置深色文本時,偶爾可以選擇較輕的字體。

但是…

反之:淺色文本>深色背景。

最好是把字體的重量增加一點,尤其是長文本,原因是,讓用戶避免視覺疲勞,獲得更好的易讀性



40.使用爭取的字體類型,表達對應的情感

正確的字體選擇對于讓你的內容更快的正確傳達更重要



41.全部大寫+字母間距=更好的易讀性。

只需稍微增加字母之間的間距,就可以提高字跡的易讀性,并為大寫字母增加一些設計感



42.讓表單上的錯誤信息變得有用和容易理解。

確保錯誤提示,解釋了哪里出錯和如何解決

始終讓用戶了解最新情況,即使是普通的表單,讓這些錯誤消息變得有用,不要讓用戶懵逼



43.加載占位符

使用占位符可以更好的緩解用戶焦慮



44.通知用戶如果應用某個特定操作將會發生什么。

在應用可能產生后果的特定操作之前,請詳細地通知用戶。尤其適用于具有不可逆轉后果的行為,例如永久刪除某個內容。讓用戶知道將要發生什么,并要求他們確認



45.不要在下拉列表中隱藏重要的操作

用戶需要采取的基本操作(例如,注冊或登錄)隱藏在下拉列表中,甚至可能找到用戶想要的。

解決:將重要的功能提出來,不要隱藏


藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png


文章來源:站酷   作者:木七木七

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



交互手勢全解析之位移類手勢

濤濤


1 位移類手勢的描述維度


手勢作為圖形界面與用戶之間溝通的方式之一,在便攜電子設備上大量應用。與實體按鍵相比,它有著純粹的簡潔性和無盡的創造性,手指的個數變化、不同變量的組合能夠創造出無數的操控方式。


位移類手勢是指代那些通過手指接觸屏幕后的位置變化從而操控電子設備的手勢,本篇文章主要講解單指操作的位移類手勢,多指的位移類手勢(如捏合)將放到后續文章中講解。


一談到位移類手勢,大部分設計師的腦海中可能會浮現出拖拽、甩動和輕掃這三個術語。然而,當我們想仔細談論他們三者之間的區別時,大部分設計師可能無法準確地描述。為了能夠準確描述三者的區別,我們在這里引入三個維度的概念,它們分別是控制方式、穩定化效果、以及閾值類型,這三者的不同的變化組合可以創造不同的位移類手勢,拖拽、甩動和輕掃之間的區別也是這三個維度影響的。當我們在討論不同位移類手勢之間的區別時,不如說是在討論這三個維度之間的區別。比如常見的輕掃手勢,因為這三個維度的變化就會產生不同的變種,而且不同變種在體驗上也存在很大差別,若不分場景隨意使用,很容易就影響用戶體驗。那接下來我們首先了解一下這三個維度。


1.1 控制方式


第一個維度是控制方式,它分為絕對控制相對控制,也可以通俗的表達為跟手不跟手,區別如下。


絕對控制/跟手:施加控制的一方(后文簡稱施控物)的某個屬性變化與被施加控制的一方(后文簡稱受控物)的某個屬性變化是對應的。


相對控制/不跟手:施控物的某個屬性變化與受控物的某個屬性變化不是對應的。


比如在網易云音樂的播放頁(下圖左),左右滑動黑膠時,手指是施控物,黑膠是受控物,手指的橫向位置變化和黑膠的橫向位置變化是對應的,即絕對控制。上滑調出評論頁時(下圖右),評論頁的位置和手指的位置沒有對應關系,手指的上滑僅僅控制評論頁是否出現,即相對控制。


與相對控制相比,絕對控制允許用戶去操控受控物的屬性變化過程,因此給予了用戶更強的掌控感。比如在微信讀書閱讀頁邊緣右滑,手指的橫向位置與書籍封面的變化過程對應,模擬現實生活中慢慢合上書的感覺,如下圖。


但是在有些場景,為了避免混亂,屬性變化過程是不適合被用戶絕對控制的,此時我們應采取相對控制的方案。比如 iOS 的相機中,左右滑動切換拍攝模式,由于前后不同模式之間的頁面框架變化較大,切換時會有過多元素的屬性變化,如果使用絕對控制就會導致切換拖沓且混亂,使用相對控制就能避免這個問題。


1.2 穩定化效果


1.2.1 定義


當我們使用手勢控制某個受控物時,由于手勢的某個屬性(如手指位移)達到閾值,進而導致受控物的某個屬性穩定在了特定狀態的效果被稱為「穩定化效果」,或者也可以稱為「吸附」。


穩定化效果能夠保持界面的視覺秩序,避免過多的中間狀態導致界面的雜亂,進而幫助用戶聚焦信息。


是否有穩定化效果是區別輕掃與另外兩個手勢即甩動和拖拽的重要維度,當某個位移類手勢有穩定化效果,我們就將其稱作輕掃


以滑動切換抖音視頻為例,當手指上滑的位移距離和釋放速度其中的某一項屬性達到閾值后,下一條視頻會往上移動到一個固定的位置然后進入穩定狀態,而不會出現停留在不完整的中間狀態,如下圖所示。


在 iOS 端的微信消息頁左滑某條消息后會出現更多操作按鈕,按鈕會在手指滑動的距離達到閾值并松開后穩定在一個固定的大小,而不會停在類似下圖左所示的混亂的中間狀態。


在多內容選擇的場景中,如果滑動與選中是綁定的話,一般需要使用穩定化效果。例如在 iOS 相機里選擇濾鏡時,滑動濾鏡選項不但能夠控制濾鏡選項的位置,并且會自動選中一個位于中間位置的濾鏡,位置的穩定化避免了被選中選項的不明確。


如果滑動與選中是分開的,比如美圖秀秀的濾鏡選項需要先滑動后選中,這種情況下穩定化效果不是必要的。


1.2.2 與效率的關系


不同的穩定化規則帶給用戶的體驗差異是非常大的,最明顯的差異是在效率方面。我們使用穩定化效果的強弱來理解,穩定化效果越強,單次滑動能夠切換的選項個數越少,效率越低。穩定化效果越弱,單次滑動能夠切換的選項個數越多,效率越高。


比如在比較常見的 banner 切換功能中(下圖左),無論手指位移和釋放速度的值有多高,banner 只能切換并穩定到下一個,不能夠一次切換多個 banner。而在網易云音樂的首頁排行榜中,一次滑動能夠切換多個內容卡片。因此,我們可以說前者的穩定化效果比后者強。


拖拽和甩動雖然沒有穩定化效果,但是也存在效率的高低。我們可以將其與輕掃放在一起做對比,如下圖所示,拖拽、穩定化效果強的輕掃、穩定化效果弱的輕掃、甩動它們切換效率依次增加。


那么我們決定添加穩定化效果后,如何選擇強弱程度呢?選擇沒有絕對的對錯,整體來說主要考慮兩點,業務訴求和用戶訴求。例如在常見的 banner 切換中,banner  的總數量一般不會很多,業務的訴求是希望盡可能曝光每一個 banner ,使感興趣的用戶進行消費,因此這里比較適合做穩定化效果強的輕掃。在云音樂的排行榜案例里,不同用戶感興趣的榜單是不同的,穩定化效果弱的輕掃可以方便用戶單次滑動切換多個,快速切換到自己感興趣的榜單的大概位置。


百度 App 的表情面板原本是左右輕掃瀏覽表情,在一次改版中改為了上下甩動瀏覽。主要目的之一就是為了提高瀏覽效率、降低非首屏表情的曝光難度。


微信視頻號的改版是一個典型的案例,舊版的微信視頻號的視頻流并不是類似抖音那樣的全屏化形式和輕掃手勢(下圖右),而是占據屏幕尺寸三分之一到二分之一之間的卡片形式(下圖左),并且使用甩動而非輕掃。視頻號問世初期優質內容匱乏,社交推薦算法不完善,貿然模仿抖音式的全屏化形式和輕掃手勢的話,會導致用戶瀏覽到劣質視頻時負面感受被增強且切換效率變低,反之卡片形式加甩動手勢給予了用戶更自由的選擇空間,提高了用戶的切換效率,降低了負面體驗。等到如今時機成熟,再從卡片形式和甩動手勢換成全屏化形式和輕掃手勢就勢在必行了。


在某些場景,用戶需要先通過高效的方式選擇特定區域的內容,然后進入聚焦狀態進行內容瀏覽和慢速的切換,此時我們需要設計兩種切換效率不同的手勢應對前后場景的變化。如下圖,在 iOS 的照片 App 中,先使用切換效率較高的甩動進行粗略切換找到目標圖片大概位置,點擊進入大圖模式時使用切換效率較低的輕掃進行精確切換查看。


1.2.3 觸發時機


觸發穩定化的時機可以分為釋放前和釋放后,不同的時機帶給用戶的體驗也不同。釋放前穩定化指的是用戶使用手指滑動屏幕時,手指位移達到閾值后,手指無需離開屏幕,穩定化即可被觸發。如下圖左,iOS 的相機滑動切換濾鏡使用的就是釋放前穩定化。釋放后穩定化指的是用戶使用手指滑動屏幕時,手指位移或釋放速度達到閾值后,手指必須離開屏幕,穩定化才能被觸發。如下圖右,常見的 banner 切換。


釋放前穩定化可以避免拖沓,增加切換效率,但是缺點是無法反悔回退且缺乏掌控感。反之,釋放后穩定可以反悔回退,掌控感強,但是缺點是比釋放前穩定化拖沓了一些。


1.3 閾值類型


閾值是能夠觸發變化的最小值。比如當水的溫度達到 100 度時就開始變成水蒸氣,100 度就是一個閾值,溫度是閾值類型。在手指與屏幕的交互中,手指在屏幕上的某個停留時間、位移、釋放速度、點擊次數等都可以成為一個閾值類型,達到相應閾值后就可以觸發相應的變化,常見的變化有受控物的位置、大小、不透明度等,理論上變化可以是任意的。


在位移類手勢中,通常會用到的閾值類型有手指位移釋放速度,手指位移是用戶在手指觸摸屏幕時的位置與之后某個時間手指位于屏幕的位置之間的距離,釋放速度是用戶的手指在屏幕表面進行位移后離開屏幕那一瞬間的速度。


市面上的 App 暫時不存在僅通過釋放速度判定而與手指位移無關的閾值判定方式,因為其不太符合常識。因此我們在設計位移類手勢時,能夠選擇的閾值判定方式常見的有兩種:① 判定手指位移和釋放速度滿足任意一個即可;② 僅判定手指位移。


當我們設計手勢時,就需要考慮兩者的區別。由于 ① 比 ② 增加了釋放速度帶來的額外移動距離,因此 ① 的主要優點是高效。但是由于我們無法預判釋放速度帶給受控物的移動距離長短,所以相對應的缺點就是易誤操作和不精確。②就恰恰相反,由于不存在釋放速度造成的不確定因素,它的優點是不易誤操作和精確,缺點是低效。


甩動和拖拽之間的區別就在于閾值判定方式,甩動是 ① ,拖拽是 ② 。如下圖,當在微信消息列表找相應的消息時,用戶的訴求就是能夠快速找到特定消息的位置,對特定消息的出現在屏幕的位置也沒有特定要求,只要能夠被手指點擊到即可,因此選用甩動較為合適,但是對于調節音量、亮度這一類的操作,滑動的范圍有限,因此用戶對效率沒有太高的要求,但是對于滑塊位置的精確度有要求,因此選用拖拽是更為恰當的。


再舉一個反例,在 Steam 移動端橫滑首頁的泳道卡片時(下圖左),使用的手勢是拖拽而不是甩動,瀏覽起來特別低效。更適合的做法應為甩動,會更符合此場景下的快速瀏覽的訴求,如下圖右的豆瓣。


對于輕掃來說,使用哪種閾值判定方式有多種情況(如下圖所示)。在本文中,根據閾值類型、穩定化效果以及控制方式的不同我將把輕掃分為 A-E 共 5 類(A-E的命名方式僅存在于本文章,因此在向其他人傳達時,盡量使用在后文我介紹的手勢描述而不是類別名稱,以便于對方理解。)。后續會為大家仔細舉例講解,大家現在僅了解一下即可。


當我們在刷抖音視頻時使用的手勢就是輕掃,是否滑動到下一條視頻進行播放的判定方式是① 判定手指位移和釋放速度滿足任意一個即可,對應的手勢類別是上面表格中的輕掃A。如下圖所示,在刷抖音時,如果使用判定手指位移的方式,我們可以將手指在垂直方向位移大于半個屏幕高度的距離,從而切換到下一個視頻。如果使用判定釋放速度的方式,我們可以移動任意的垂直距離但是手指離開屏幕時保留一個速度從而切換到下一個視頻。大部分情況下用戶都會使用判定釋放速度的方式,因為既省力又便捷。


如果將閾值判定方式改為 ②僅判定手指位移,對應的手勢類別是上面表格中的輕掃 B,并且位移的閾值設置得比較大的話,給用戶帶來的負面體驗可能將是非常大的。比如下圖中打開美圖秀秀的短視頻評論浮層后,想要下滑收起時,App 僅判定手指位移,而且這個位移閾值設置得比較大,對于希望通過快速滑動一小段距離收起浮層的用戶來說體驗很差。即使由于開發資源有限我們只能做到僅判定手指位移,我們也可以通過減少手指位移的閾值來降低負面體驗。


但是某些場景下,②僅判定手指位移是更加合適的。比如想要在微信中下拉打開小程序選擇頁,就只能通過手指位移達到一個特定的閾值才能夠觸發,無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁。這樣處理的原因是在微信消息列表頁,上下滑動瀏覽微信消息是一個高頻操作,如果釋放速度也能作為打開小程序頁面的閾值的話,用戶可能就極易在下滑消息列表時誤操作,無意間打開小程序選擇頁。


因此,對于位移類手勢,選用哪種閾值判斷方式要依據用戶使用場景和訴求,不能想當然地設計。



2 常見位移類手勢解析


了解完三個基礎維度后,我們再將其進行組合,從特定手勢的角度更全面地理解它們的差異和使用場景。三個維度的排列組合能夠生成十余種位移類手勢,我列舉出了常見的 7 類,如下圖所示,這 7 類基本涵蓋了 95% 以上的場景,我將一一舉例說明。由于施控物控制受控物改變的屬性一般都為位置,因此接下來在描述下面手勢的定義時我都以受控物的位置變化進行舉例。


2.1 拖拽


2.1.1 定義


使用手指在受控物位置按下后,操控受控物沿著某個方向移動,無論釋放時手指是否仍有速度,受控物都會立即停止移動。(下圖的動態演示由 Principle 制作,觀看會有些不太直觀,大家可以在文章結尾處下載 Principle 源文件后導入到手機里體驗,源文件包含文章提到的所有位移類手勢)


2.1.2 特點


精確度高但效率低。由于閾值類型僅判定手指位移且沒有穩定化效果,拖拽適用于對操作精度要求高,對效率要求低的功能。


2.1.3 案例


在 iOS 設置中調節亮度時,在有限范圍內,手指左右拖拽可以控制亮度變化。


2.2甩動


2.2.1定義


使用手指在受控物位置按下后,操控受控物沿著某個方向移動。若釋放時手指仍有速度,受控物將移動一段距離后才慢慢停止,移動的距離與釋放速度呈正相關。若釋放時手指速度為 0 ,則受控物立即停止移動。


2.2.2 特點


精確度低但效率高。由于閾值類型判定釋放速度和手指位移,甩動適用于需要快速瀏覽較多內容的場景,如滾動瀏覽列表。


2.2.3 案例


在微信的消息列表頁,使用甩動手勢控制列表上下移動,若釋放時仍有速度,列表將仍移動一段距離后才慢慢停止。


2.3 輕掃 A


2.3.1 定義


使用手指在受控物位置按下后,操控受控物沿著某個方向移動。若釋放時的速度和手指位移有任意一個達到閾值,受控物將穩定在一個新位置。若釋放速度和手指位移沒有任何一個達到閾值,受控物將回到原位置。


2.3.2 特點


由于輕掃擁有穩定化效果,因此它能夠保持界面的視覺秩序,避免過多的中間狀態導致界面的雜亂,進而幫助用戶聚焦信息。接下來講解的其他輕掃類型都有這一特性,就不一一贅述了。輕掃 A 與接下來要講解的輕掃 B-E 的最大不同之處在于輕掃 A 的閾值類型為「釋放速度和手指位移」,這讓輕掃 A 與輕掃 B-E 有兩點不同,一是輕掃 A 可以通過釋放速度的快慢去控制內容的切換數量的多少,更加高效,二是輕掃 A 可以通過用手指在屏幕滑動很短的距離但離開屏幕時保留一個速度來切換內容,因此更加省力。


2.3.3 案例


在刷抖音時,如果使用判定手指位移的方式,我們可以將手指在垂直方向移動大概半個屏幕高度的距離,從而切換到下一個視頻。如果使用判定釋放速度的方式,我們可以移動任意的垂直距離并且手指離開屏幕時保留一個速度從而切換到下一個視頻。


2.4 輕掃 B


2.4.1 定義


使用手指在受控物位置按下后,操控受控物沿著某個方向移動。若釋放時手指位移達到閾值,受控物將穩定在一個新位置。若釋放時手指位移沒有達到閾值,受控物將回到原位置。


2.4.2 特點


輕掃 B 與輕掃 A 相比唯一的區別是閾值類型減少了釋放速度的判定方式,這提高了觸發切換的難度,使操作成本變高,但是在某些場景下,這也降低了誤操作的概率。如下拉刷新等。


2.4.3 案例


比如想要在微信中下拉打開小程序選擇頁,就只能通過手指位移達到一個特定的閾值才能夠觸發,無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁,這樣處理的原因是在消息列表頁上下滑動瀏覽消息是一個高頻操作,如果釋放速度也能作為打開小程序頁面的閾值判定方式,用戶可能就極易在下滑消息列表時誤操作,無意間打開小程序頁面。

因此,當頁面已存在一個滑動操作的情況下,還存在另外一個方向相同的滑動操作且僅會在邊界情況下才能觸發時,為了避免誤操作,會將后者的手勢設計為輕掃 B 。


上文提到,輕掃 A 的閾值類型為判定「釋放速度和手指位移」,輕掃 B 的閾值類型為僅判定「手指位移」,由于前者的實現成本比后者高,導致本應適合做成輕掃 A 的功能有時只能妥協做成輕掃 B ,比如之前提到過的美圖秀秀的短視頻評論浮層案例,但我們也可以通過減少手指位移的閾值來降低負面體驗,后文會講解如何與開發同學溝通。


2.5 輕掃 C


2.5.1 定義


使用手指在受控物位置按下后,操控受控物沿著某個方向移動,但是受控物并不隨著手指的控制而同步移動,僅當釋放時手指位移達到閾值時,受控物才開始移動并穩定在一個新位置。若釋放時手指位移沒有達到閾值,受控物位置則一直保持不變。


2.5.2 特點


上文講到過釋放后穩定化和相對控制的缺點,釋放后穩定化比較拖沓,相對控制讓用戶缺乏掌控感。兩者如果應用到了同一個手勢(即輕掃 C ),就會導致用戶在滑動屏幕時得不到任何反饋,用戶會疑惑是否因為自己操作不當或是設備出現故障。只有當用戶手指離開屏幕后才會發現觸發了操作,整體的交互流程給用戶一種滯后與延遲的感覺。


因此輕掃 C 與其他類別的輕掃相比存在劣勢,但是它也存在很多的 App 的 H5 頁面中,我的猜測是由于 H5 對于判定釋放速度和絕對控制這兩個維度與客戶端相比難度大很多,因此只能退而求其次選擇輕掃 C 這個較差的方案,實際上在同樣的應用場景中用輕掃 A 替換輕掃 C 可以帶來更好的體驗。


2.5.3 案例


下圖左是 QQ 的個性裝扮的 H5 頁面,卡片的切換使用的就是輕掃 C ,如果能夠優化為輕掃 A 體驗會更好,比如下圖右的音街首頁卡片的設計。


2.6 輕掃 D


2.6.1 定義


使用手指在受控物位置按下后,操控受控物沿著某個方向移動,但是手指位移達到閾值前受控物并不隨著手指的移動而移動。若手指位移達到閾值,無需手指釋放,受控物將開始移動并穩定在一個新位置。若手指位移沒有達到閾值,無論是否釋放,受控物位置則一直保持不變。



2.6.2 特點


相對控制的方式降低了用戶的掌控感,釋放前穩定化減少了操作的拖沓感。使用此手勢的場景是在多個對象之間切換時,我們不希望用戶過于自由地操控對象之間的屬性變化過程,并且犧牲掌控感從而增加單次的切換效率。


2.6.3 案例


比如 iOS 的相機中,左右滑動切換拍攝模式時,由于前后不同模式之間的頁面框架變化較大,切換時會有不同元素的屬性變化,如果使用絕對控制和釋放后穩定化就會導致切換混亂且拖沓,使用相對控制和釋放前穩定化就能避免這個問題。


2.7 輕掃E


2.7.1 特殊說明


上文我們講到,通過輕掃手勢 A-D 對受控物的絕對/相對控制都是存在于穩定化前,受控物一旦穩定化,就脫離了手指的控制,需要手指離開屏幕后再次接觸屏幕開始下一次控制。


輕掃E的不同之處在于它可以在受控物穩定化后,仍然控制受控物朝著下一個節點穩定化,在每個節點之間切換時能夠明顯感覺到分段感,如下圖案例所示。

由于輕掃E相對于輕掃 A-D 的特殊性,控制方式中的絕對控制和相對控制無法覆蓋這個特殊現象,因此我們使用「多段相對控制」來命名輕掃E的這種特殊的控制方式。


2.7.2 定義


使用手指在受控物位置按下后,操控受控物沿著某個方向移動,若手指位移達到閾值,無需手指釋放,受控物就穩定在了一個新位置,但是此時手指還是仍然可以操控受控物繼續移動的,并且繼續移動過程中如果手指位移達到閾值將會到達下一個穩定化狀態。


2.7.3 特點


輕掃 E 適用于需要在多個對象之間快速切換和確認的場景,它的使用感覺很接近拖拽。如下圖所示,我們可以這樣理解,當被切換的對象數量接近于無窮大同時每個對象之間的距離接近無窮小時,輕掃 E 就可以視為拖拽。


2.7.4 案例


iOS相機人像模式切換打光方式、微信的通訊錄滑動字母索引導航,它們都使用輕掃 E 來滿足多個對象之間快速切換和確認的需求。



3 實戰案例


了解完上述的維度和常用手勢后,我們在腦中就可以形成一個思考框架。當我們要針對一個功能設計位移類手勢時,就可以從閾值類型、穩定化效果以及控制方式這三個維度思考。接下來我用一個我參與過的實際項目作為案例給大家講解一下思考過程。


本案例是網易云音樂陌生人版一起聽中的一個功能,一起聽的雙方在聽歌過程中會收到彼此共同信息,比如聽歌口味相似度、是否同城、都喜歡哪些歌手等,目的是為了增加可玩性和互動性、降低退出率,鼓勵用戶互相了解、提高一起聽過程中的社交體驗。


為了營造儀式感和避免信息過載,共同信息的展示方式設計為了一次只能看一條,進入浮層后默認展示最新的一條,可以通過滑動查看上一條。因此為了避免出現兩條同時占據展示區域的混亂狀態(如下圖左),我們為其添加了釋放后穩定化效果(如下圖右),同時為了方便用戶可以快速瀏覽舊的共同信息,這里使用的穩定化效果是較弱的,用戶可以通過滑動一次切換多個共同信息。


由于需要滿足用戶快速瀏覽舊的共同信息的訴求,閾值類型選用了「判定手指位移和釋放速度滿足任意一個即可」,用戶可以通過控制釋放速度進而控制信息的切換數量??刂品绞絼t選擇了掌控感強的絕對控制。最后的結果如下圖所示。綜合三個維度進行歸類,此手勢為穩定化效果較弱的輕掃 A 。



4 手勢角度的處理


位移類手勢的方向一般為上下或左右,但并不是一定要完全垂直或水平才能夠觸發手勢。當上下滑動和左右滑動同時存在于一個頁面時,默認會有一個容錯角度,比如上滑時手指滑動方向只要左右偏移不超過 45° 都會被判定為上滑,如下圖所示。


但是有時開發同學出現失誤,導致容錯角度沒有均分,例如下圖中觸發上滑和下滑的角度極小,導致用戶在上下滑動時非常容易誤操作為左滑和右滑。


云音樂也曾有過類似的遺留問題,iOS 端的播放頁上滑調出評論頁極易誤操作為左右滑動黑膠切歌(如下圖 A ,現已修復),安卓端的賬號側邊欄上滑瀏覽極易誤操作為左滑收起側邊欄(如下圖 B )。


因此,在驗收階段,除了上述的三個維度外,角度的容錯性檢查也是重要的一環。因此在驗收時間充裕的情況下,最好要切換不同的手持方式分別體驗一次,因為有些問題只有在特定的手持方式下才能夠被發現。


客戶端的角度判定方式實際上是一個比較復雜的過程,上述的內容是簡化的版本。后續將延展為一篇獨立文章給大家仔細聊一聊。



5 客戶端的差異


上文講到,基礎的三個維度即閾值類型、穩定化效果和控制方式決定了手勢的類別,是設計階段一定要定義清楚的。但是除此之外,設計一個手勢需要定義的細節非常多。比如受控物的移動是否有速度曲線?手指位移與受控物之間的位移的比率是多少呢?這些都是開發階段不得不面對的。幸運的是,安卓和 iOS 有系統封裝好的一套系統組件可以調用,操作系統自行解決了剛才講到的細節問題,但是 H5 框架下是無法調用系統組件的,手勢的各種細節都需要前端開發人員自己編寫,難度較大,大部分情況只能實現一些比較簡陋的效果,這也是為什么在很多 H5 框架下的界面滑動的體驗比較差的原因。



6 高效溝通


由于信息不對稱,與開發的溝通過程中,很容易出現理解偏差。比較常見的錯誤有:將甩動誤解為輕掃 A ,將輕掃 A 誤解為輕掃 B 或甩動。如果造成效果達不到預期的情況,很多設計師不知道如何讓開發同學修改,只能說“這個手勢不絲滑,優化一下”,開發同學也是一頭霧水,不知道往哪個方向優化。如果我們能夠直接說出“閾值判定方式現在只有手指的位移,需要釋放時的速度也能夠觸發跳轉;這個位移的閾值太高了,滑動時很難觸發跳轉,需要把閾值改為 16pt ”類似這樣準確的描述,就能夠大大降低溝通成本,順利驗收。為了避免溝通出現問題,下面我將日常經驗總結出現希望能夠幫助到大家。


首先,一旦涉及到位移類手勢,除了必要的文字描述外(可參考上述的手勢定義的描述),最好給開發體驗 demo 或者其他 App 上類似的效果,否則很容易產生理解偏差。各種 App 上的類似效果大家可以用本文的每個手勢的案例給開發同學展示,但是 App 可能會更新,案例可能在未來某個時間就找不到了,所以我用 Principle 做了一個簡易的基礎 demo 集合(如下圖,源文件在文章末尾下載),和我上述介紹的手勢是對應的,大家可以拿著這個 demo 給開發同學演示大概的效果,也可以在這個 demo 源文件修改。

下載鏈接: https://pan.baidu.com/s/1iaFrcFwzC58TG3L17bjC_Q  密碼: asto。


拖拽和甩動由于需要定義的細節參數都被操作系統提前封裝好了,一般不需要我們給到額外的標注。但是對于輕掃,我們需要將細節定義清晰,下面將詳細講解。


6.1 閾值類型


上文講到,閾值類型一般有兩種:① 判定手指位移和釋放速度滿足任意一個即可;② 僅判定手指位移。①的開發成本高于②。


如果我們選用輕掃的閾值類型是①,開發同學編寫代碼需要兩個參數的閾值,分別是手指位移和釋放速度。手指位移閾值一般默認為受控物的1/2,例如下圖的全屏短視頻和 Banner 。

當然我們也可以自定義一個閾值,比如 100pt 、受控物高度的 1/6 等,沒有特別的需要的話使用默認值即可而且也不用給開發同學特殊說明,但是如果有特殊需要想要修改默認值,就要告知開發同學你自定義的手指位移閾值。對于釋放速度閾值,通常默認就非常的小,幾乎是大于 0 即可觸發,一般情況下使用默認值即可。


在本應該選用①的場景中,如果由于技術成本原因不得不選用②,需要注意的是由于缺少了釋放速度的判定,手指位移的閾值我們需要設置得小一些方便用戶觸發,否則就會出現上文中美圖秀秀浮層的那樣的體驗問題。經過我的實驗,手指位移閾值一般定為 16pt 是比較適中的,既不會太容易誤操作也不會難以觸發。


6.2 穩定化效果


輕掃是一定存在穩定化效果的,關鍵在于告知開發是釋放前穩定化還是釋放后穩定化。從開發的角度講,系統會監測用戶的行為,用戶在使用滑動時會有按下(down)、移動(move)、抬起(up)三個行為,釋放前穩定化是在移動階段判斷閾值并觸發操作、釋放后穩定化是在抬起后判斷閾值并觸發操作,開發成本幾乎沒有區別。


上文提到過穩定化效果強弱的概念。穩定化效果越強,單次滑動能夠切換的選項個數越少,效率越低。穩定化效果越弱,單次滑動能夠切換的選項個數越多,效率越高。首先,我們需要確定單次滑動允許切換多個還是只允許切換一個,如果允許切換多個,開發同學會設定一個控制切換難度的系數,而只允許切換一個的話就不存在這個系數。通常我們也不需要修改這個默認系數,但如果想讓操作更加難或容易觸發,可以告知開發同學修改這個系數。


6.3 控制方式


絕對控制比相對控制的開發成本高,如果開發資源并不是很緊張,需要絕對控制的場景就不要退而求其次使用相對控制。涉及到輕掃手勢一定要告知開發同學控制方式,否則很可能被視為相對控制處理。



7 手勢排查


通過本文的學習,我們不但可以在開發工作進行前與開發同學高效溝通,保證開發工作的順利進行,也可以對自家移動端產品的現有手勢進行逐一排查發現問題點進行記錄,并且找到合適解決方案,然后用準確的語言描述給開發同學。下圖是我在進行手勢排查后輸出的表格,挑選出一些有代表性的案例給大家作參考,開發同學可以通過它快速明確問題,理解解決方案。





藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png


文章來源:站酷   作者:Ballen成明

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


移動端導航設計

濤濤

合理的移動導航設計能夠盡可能地減少摩擦,引導用戶去他們要去的地方。

這篇文章匯總了移動端導航設計最常見的樣式、要注意的設計準則以及優秀的案例分析,一起來系統性地掌握這些知識~

什么是移動端導航?

簡單來說,導航是用戶從 A 點到 B 點的方式,是他們發現設計點并與產品交互的過程。

可能很多用戶認為導航的目標是“在盡可能短的時間內讓用戶從 A 到 B”,但時間短只屬于操作結果,這個結果需要依靠合理且簡單的設計才能實現。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 一個頁面中可以存在多種導航。例如在油管首頁,有頂部導航欄、篩選器導航和底部導航,這些導航相互搭配為產品助力。

移動端導航常見的設計樣式

1. 漢堡菜單

圍繞漢堡菜單有很多爭論,但存在即合理,在合適的場景下漢堡菜單也能發揮大的作用。

來看一下漢堡菜單具備的優勢:

  • 視覺空間:節省屏幕空間,包含有價值的信息;
  • 心智模型:大多數用戶熟悉這種設計樣式并知道如何操作;
  • 使用經驗:調節學習曲線,改善使用體驗。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 使用用戶熟悉的設計可以事半功倍。例如美團和餓了么兩個產品有著完全不同的主題色,但外賣點餐流程卻是一樣的,仍然是用戶熟悉的操作,并沒有因為產品的不同而改變點餐流程。

2. 底部導航

底部導航欄通常包含產品中最主要的導航鏈接,用戶只需要簡單的點擊就能直觀地在不同頁面間切換。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 幾乎每款產品都缺少不了底部導航欄,它方便用戶單手操作,不需要太費力就能快速訪問產品頁面,提高可用性。

3. 頂部導航

關于頂部導航,可以看之前分享的文章,里面詳細介紹了頂部導航的設計方法。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 頂部導航通常包含頁面中最重要的信息,與其他輔助導航結合使用。

4. 卡片式導航

卡片式是一種出色的設計樣式,支持改變各種形狀和大小,并且能展示文本、鏈接或照片等各種元素。

隨著網絡上的內容越來越碎片化和個性化,卡片是在頁面中聚合單個信息的好方式。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 為了改進體驗,卡片可以個性化顯示不同的內容。另外卡片很容易適應不同的屏幕尺寸,配合響應性設計。

5. 標簽

標簽往往是在一個大主題下同時支持多個選項,每個選項都轉到不同的界面。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 標簽通常用于在同一頁面中的幾個視圖之間切換,展示內容上的差異性。而頂部導航欄有主頁、搜索、收藏夾等多個圖標,代表不同的功能。

6. 基于手勢的導航

基于手勢的導航可以讓用戶在所需方向上快速滑動,來完成特定的操作。

這種樣式的優點在于,即使最沒有經驗的用戶也很容易掌握,因為手勢通常是直觀的。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 國外大火的約會產品Tinder以及國內的探探,都使用了基于手勢的導航樣式,為用戶帶來滑動的樂趣。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 基于手勢的導航并不是Tinder發明的,但這款產品無疑將這種流行帶給了大眾。經典的向左或向右滑動模式保持了事物的動態性、簡單性和娛樂性。

7. 全屏導航

全屏導航是指將大部分屏幕用于導航操作,能夠很好地將用戶的注意力聚焦到具體的產品細節上。這是一種以連貫的方式提供大量導航的方法,可以立即幫助用戶了解產品的功能。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 點擊圖片可以跳轉到全屏大圖導航中,能夠更清晰地查看商品的外觀狀態。

8. 3D touch

最初是由蘋果公司提供給用戶的,這是一種創建導航快捷方式的方法,可以顯示選定的 APP 的一些關鍵操作。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 蘋果為手機創造了一種全新的快捷方式,同時提供了強大的可用性。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 3D touch另一個用途是內容預覽,在處理內容選項時例如收件箱或文章列表時,這是給用戶提供預覽的好方法。

移動端導航設計準則

1. 導航需要直觀明顯

對所有類型的導航來說都是如此。在移動端中由于屏幕空間的縮小和交互成本的增加,導航體驗的好壞會對產品產生很大的影響。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 從可用性角度來看,直觀的導航對目標用戶來說至關重要。這意味著需要進行嚴格的測試和大量的研究,可以使用卡片分類或樹狀圖等方法來驗證導航的可用性。

2. 考慮手指的位置

這點對于移動應用來說至關重要,沒有用戶想反復點擊圖標卻沒有反應。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 鏈接和按鈕的尺寸需要足夠大,以便大多數用戶在第一次點擊時就能成功點擊。頁面中按鈕的尺寸最小通常保持在10mm。

3. 建立視覺層級避免混亂

小屏幕意味著更容易陷入混亂。即使頁面中有少量的元素,如果元素沒有平衡,用戶仍然會有混亂的感覺。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 極簡主義是UI設計的一種特定風格,通過必備的頂部導航欄、留白以及由大小、版式、顏色劃分的視覺層級來規劃頁面內容。

移動端導航示例分析

1. Facebook

Facebook 的導航構成比較復雜,融合了多種不同樣式的導航。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ Facebook主頁包括漢堡菜單、頂部導航欄和底部導航欄。通過這種方式,這家社交媒體巨頭明確的將主要內容與次要內容分隔開。

2. Spotify

Spotif 作為音樂流媒體業務的巨頭,即使對于新用戶來說,頁面的設計也容易理解和探索。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 以高度視覺化的形式突出每張卡片背后的關鍵內容,另外底部導航也可以完成繁重的任務指引。

3. App Store

App Store 是使用標簽進行導航的好例證,每個標簽代表了同一內容的不同方面。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 在排行榜中,用戶可以瀏覽付費、免費和熱門的標簽頁,從而快速建立一致性和對其他頁面的感知。

4. Telegram

Telegram 可以供任何人使用,漢堡菜單提供了用戶可能需要的所有關鍵導航選項。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 每個用戶都能立即找出漢堡菜單,非常容易使用和理解,而且幾乎不占用界面中的寶貴空間。

5. Yelp

yelp 在創建全屏導航體驗時采用了一種稍微不同的方法。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ Yelp將屏幕劃分為兩個不同的區域,實際上并沒有將整個屏幕專門用于導航選項,而是將頂部用于導航選項,并在底部留下更多的負空間。

6. Trello

頁面中的卡片是拉長的矩形,整齊有序地填滿屏幕空間而不會讓用戶不知所措。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ 卡片系統很好地代表了Trello簡化復雜工作流程的能力,為用戶帶來整潔和方便。

7. Twitter

同樣使用了多種導航混合的設計樣式。

你了解移動端導航設計嗎?收下這篇系統性的總結!

△ Twitter將導航重點放在底部欄上,涵蓋了整個平臺中四個主要的方面。

最后

沒有高速公路,我們很難便利地在城市間穿梭。同理,如果沒有導航,一款 APP 的使用也會遇到很多麻煩。導航就像高速,不斷在為用戶提供必要的指引!




 藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png



文章來源:站酷   作者:Clip設計夾

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



熱門的手機用戶輸入設計模式

鶴鶴

對于任何手機應用程序,如果沒有來自用戶的一些初始和正在進行的輸入,就不會發生任何事情。因此,手機產品設計師、開發人員和產品經理必須了解允許用戶這樣做的最佳方式。

雖然手機應用程序以及使用它們的用戶通常是獨一無二的,但是有許多常見的模式(新模式和舊模式)被用來解決這個特定的問題。


用戶輸入設計的6個目標


在我們深入研究模式之前,了解用戶輸入設計的六個主要目標是很重要的:

  1. 選擇合適的輸入和資料登錄方法

  2. 減少輸入量

  3. 設計有吸引力的數據輸入屏幕

  4. 使用驗證檢查來減少輸入錯誤

  5. 設計所需的輸入文檔

  6. 制定有效的輸入控制


模式的概述


在記住以上設計目標的前提下,下面是我們在將本文中詳細介紹的設計模式的概述,在我們的電子書《2014年手機用戶界面設計模式》中有更詳細的介紹:

1.智能鍵盤
2.默認值&自動完成
3.立即沉浸(或“惰性注冊”)
4.操作欄
5.社交賬號登錄
6.巨大按鈕
7.滑動操作
8.通知
9.顯性控件
10.可擴展輸入
11.撤銷


1.智能鍵盤


Facebook記事本,Android聯系人


問題
用戶希望快速輸入信息。


解決方案
當用戶點擊應用程序中允許輸入信息的部分時,給他們與輸入數據相關的鍵盤。這使他們不必在字母數字屏幕之間尋找正確的按鈕,或者多走一步來訪問鍵盤。這不僅方便了用戶,而且還指示了需要從用戶那里得到什么類型的輸入。手機平臺允許相應地標記文本字段,這允許在哪些按鈕顯示在更顯著位置方面有一定的靈活性。


例如,在地址簿或撥號器中輸入電話號碼時,用戶不需要完整的鍵盤。當他們點擊這些字段時,數字小鍵盤就會彈出,而不是整個鍵盤,這樣就減少了不必要的按鈕,簡化了操作過程。類似地,點擊瀏覽器中的URL欄會彈出一個稍微修改過的鍵盤,其中“/”和“。com”按鈕顯示在空格鍵旁邊,而不是符號鍵后面。通過連接到系統提供的這些智能鍵盤類型,你的UI可以根據用戶當前嘗試的操作進行調整。


2.默認值&自動完成

Skype, Flightboard


問題
用戶希望快速完成操作。


解決方案
通過為用戶提供預先填充的默認值或基于先前輸入的數據的提示,預測頻繁選擇的項并使用戶更容易地進行數據輸入。這可以與自動完成功能相匹配,比如在谷歌Play Store搜索中,通過加速來顯著改善用戶體驗。這種模式在標準化用戶輸入和在問題發生之前預測問題方面特別有用。例如,Skype會自動為輸入的電話號碼匹配國家代碼。從用戶的角度來看,這是有意義的,因為他們不習慣定期輸入這些信息,但在這種情況下,這種匹配很重要,因為Skype是一個國際電話應用程序。


另一種實現方法是保存用戶輸入的最后一項,并在用戶再次輸入或搜索時顯示這些最近使用過的項。例如,Flightboard在搜索框下面列出了以前使用過的位置,以避免用戶再次輸入。大多數地圖或導航應用程序也采用這種模式,在搜索方向時自動輸入用戶當前位置,為用戶節省幾次點擊,因為這是最常見的情況。


3.立即沉浸(或“惰性注冊”)

Wunderlist


問題
用戶希望在注冊之前先嘗試一下。


解決方案
越來越多的應用程序允許用戶在任何事情發生之前——甚至是注冊或登錄之前——立即沉浸在應用程序中。


記住,他們一次只能做一件事,而且測試每個新產品的時間有限。隨著應用程序的日益專業化,在扶持它們之前找到高質量的用戶或客戶越來越重要——他們可能會討厭你的產品或很快意識到它不是他們想要的。向用戶詢問注冊賬戶所需的信息可能是一件很困難的事情,而且會降低甚至是適合的訪問者的注冊率。在積極的方面,通過讓他們立即體驗你的產品,他們更有可能被吸引,因為他們能夠在第一次體驗時深入探索應用程序。這比我們接下來討論的onboarding walkthrough UI模式更好,因為它向用戶展示而非告訴他們應用程序如何工作。


對于Carousel或Duolingo等依賴用戶數據來運行的應用程序來說,允許延遲注冊是沒有意義的,但Wunderlist或Houzz等應用程序可以允許用戶在要求他們確認身份之前進入并使用該應用程序。通常情況下,注冊會帶來一些額外的好處,比如在Wunderlist中進行跨設備同步,或者在Houzz中創建一本想法書,這會讓注冊變得更有吸引力。延遲注冊并不總是一個好主意,但是選擇“注冊前試用”可以很好地提高你的應用程序的參與度。


4.操作欄

Facebook Paper, Behance


問題
用戶希望快速訪問常用的操作。


解決方案
從應用程序的操作欄(或iOS術語中的“工具欄”)提供對重要操作的快速訪問。雖然導航條主導了web和早期的手機應用程序設計, 但其他模式的使用,如折疊、滑出式工具欄和側邊欄、指向所有內容的鏈接、按鈕轉換、垂直的和基于內容的導航,產生了更簡單的應用程序視圖,用戶可以專注于一級和二級操作,而不是二級導航。常見的操作有:在應用程序中搜索、共享和創建新內容。這個存留的菜單可以幫助用戶熟悉UI,還可以通過專注于與用戶相關的重要操作清除一些混亂。


5.社交賬號登錄

undefined

Beats Music, Flipboard


問題
用戶需要一種更簡單的注冊和登錄方式。


解決方案
整合社交賬號登錄方法,允許用戶通過現有賬戶登錄。這意味著他們少了一個需要擔心的用戶名/密碼組合,同時,你也不必擔心密碼的安全性。Facebook、Twitter和谷歌是主要的OAuth登錄提供商,根據平臺和目標受眾的不同,你可以在你的應用程序中提供所有這些或其中之一,而不是讓用戶建立一個他們可能會也可能不會在未來使用的單獨的帳戶。使用這個注冊和登錄模式也可以為你提供一些基本的關于用戶的數據(當他們使用應用程序時,會自動填充數據), 同時,通過不強迫用戶在剛下載的陌生應用程序中輸入他們的詳細信息,讓他們更加舒適。這個簡單的特性可以在很大程度上改進你的UX,因此這種模式正在成為一種期望。


6.巨大按鈕

Tinder, Shazam


問題
用戶希望立即知道他們可以采取哪些操作。


解決方案
理想的觸屏點擊目標大小可能是72 px,但是一些應用程序,像Tinder,也會給你巨大的按鈕讓你確切地知道該做什么, 無論你在什么位置,無論你在做什么,你都能很快完成操作——很難錯過這些巨大的按鈕,即使你沒在仔細看。這在更簡單的應用程序中尤其有價值,因為在這些應用程序中,用戶需要執行的操作非常有限,因此更有理由讓他們在各種情境中更容易地執行這些操作。例如,Shazam是用來看電視或聽音樂的,它實際上只做一件事。對于試圖在這種分心狀態下進行多任務處理的用戶來說,巨大的按鈕是一個巨大的改進。


7.滑動操作

Carousel


問題
用戶希望關注特定的內容。


解決方案
允許內容被滑動或移動。這為用戶提供了一種非常直觀的方式來處理屏幕上的信息。例如,谷歌中的“卡片”現在可以在你不需要的時候被滑走,以清理雜物;類似地,Tinder中的配置文件可以向左或向右滑動,以表示積極或消極的響應。這個模式與我們在導航模式中討論的滑動視圖不同。在這里,滑動手勢被用于一項操作,而不僅僅是瀏覽。有些應用程序結合了兩種滑動模式,比如Carousel,它可以讓你通過將照片滑動到一邊來瀏覽多張照片,也可以通過向上或向下滑動來分享或隱藏照片。郵箱推廣了電子郵件客戶端的左右滑動操作,允許你分別通過向右或向左滑動將郵件標記為已讀或安排為待處理。Secret用讓你發現新菜單的方式來讓你發現新動作。向左滑動一個secret代表你喜歡它。


8.通知

LinkedIn, Facebook


問題
用戶希望了解他們應該瀏覽的新活動或操作。


解決方案
通過標記新內容來突出最近的活動。這個模式有幾種實現方式。例如,在標簽上放置一個計數徽章是由iOS推廣開來的,但現在這也可以在許多其他應用程序中看到,如LinkedIn、Facebook或Quora。Twitter在通知按鈕上也這樣做,但它在時間軸圖標的頂部還有一個小點,以更微妙的方式指示新的活動。另一種顯示通知的方式是在應用程序中使用一個向下拉的橫幅來顯示新活動。Facebook應用程序也能做到這一點,當新聞推送中出現新條目時,它會彈出一個小窗口。


9.顯性控件

Secret


問題
用戶希望快速訪問那些二級的或僅與應用程序中的特定部分或內容相關的控件。


解決方案
清理雜物,讓用戶只在需要時才發現特定的操作。這些看不見的控件可以通過任何手勢來訪問——滑動、輕擊、雙擊、長按等等(我們在手勢模式中討論過)。這使你能夠將這些操作保留在屏幕之外,從而節省一些寶貴的空間。例如,Secret使用手勢而不是可視控件。向右滑動,就會出現一個動作菜單,這是我們前面介紹過的折疊模式的簡化版。在創建內容時,用戶可以在背景上水平滑動或垂直滑動手指來改變背景的顏色和圖案,或者在使用圖片時,可以改變圖片的亮度、飽和度或模糊度。沒有其他控件允許你這樣做——也不應該有其他控件。這種UI設計模式非常直觀、清晰,你一定會看到更多這種類型的交互。Pinterest是另一個使用手勢隱藏動作按鈕的應用程序。長時間按下一個圖像,就會出現一個按鈕,用戶可以通過將彈出控件拖動到該按鈕上來對其進行固定或評論。


Uber是這種設計模式的另一種實現方式。Uber還可以讓你在預訂和查看車費估算之間進行切換,只要你選擇了你想要的乘車類型,就可以通過點擊滑塊按鈕來查看車費估算。這是一個簡單而又重要的UI設計模式,每當我在做五件事的同時還想搭個便車,同時還要確保Uber不會用峰時價格來騙我的時候,它都會讓我微笑。Snapchat和Facebook Messenger允許你在需要的時候通過滑走所有朋友的賬戶來訪問這些功能。


10.可擴展輸入

YouTube


問題
用戶希望關注內容,而不是犧牲屏幕空間給控件。


解決方案
設計當用戶點擊時會展開的控件。這使得大多數控件在用戶需要它們之前都不會出現。例如,YouTube和Facebook通過將搜索欄隱藏在一個圖標后面來節省屏幕空間,當用戶點擊這個圖標時,它就會展開成一個搜索欄。


11.撤銷

Gmail, Chrome


問題
用戶希望在沒有中斷(例如:確認)的情況下快速地執行操作,但是可以選擇恢復意外操作。


解決方案
為用戶提供一個簡單的方法來撤銷他們的操作,而不只是要求他們事先確認。在某些情況下,某個操作可能會導致不方便或數據丟失,例如刪除電子郵件或編輯一些文本。用戶可能因為不知道會發生什么而完成了一個動作;一個寬容的用戶界面可以讓他們體驗到更多的參與感和友好。對于高級用戶來說,撤銷功能也很強大,他們會喜歡在整個過程中不用UI反復詢問他們是否確定要繼續操作,就能更好地控制局面。在解釋將要發生的事情時,確認彈出窗口可能很有用,但是用戶可能直到看到操作的結果才會理解其含義。在這種情況下,最好是讓開,同時提供一個安全網絡,以防出現錯誤。


獲取用戶的輸入
時刻記錄你應該從用戶那里獲得輸入的位置,他們是否曾經查看過這些輸入區域,他們使用這些輸入控件的頻率,他們從哪里來,又從哪里進入應用程序(即用戶流),等等。不斷地重新安排、重新排序、調整大小和調整這些控件,直到你獲得更多所需的操作。當然,當用戶能夠提供輸入時,要深入考慮他們實際上是如何使用你的移動應用程序的——確保你在設計應用程序時沒有遺漏什么明顯的東西。

文章來源:站酷  作者:馬克筆設計留學

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

為什么交互設計能幫助產品解決問題

鶴鶴

一、為什么交互設計能幫助產品解決問題


為什么那么多人覺得應該先學UI設計再學交互設計,因為UI門檻低所以入手快。其實交互比UI更早出現,從需求理論可以看出人們在追逐主觀體驗的感受,在基礎需求未被滿足前是不會出現更高層次的需求的。所以UI設計讓更多用戶感受到了舒適和更好的體驗。殊不知,如果底層的交互和產品的可用性未被滿足,那么UI做的再好也是徒勞。




市面上大量出現同質化產品、設計,就是因為大家都在按照現有的,常用的模版在設計,現在其實比早兩年會好很多,很多設計師已經開始從美化工作逐漸深挖到區分甚至自我驅動或者價值探尋的工作。


例如下面的案例,這是一個電瓶車電池租賃的一個產品。



undefined



從美觀角度,左側的界面更加簡潔信息也有規律,有美觀的banner和看起來讓人有點擊欲望的大按鈕以及“令人覺得很熱門”的熱門租賃板塊。當我不放出右側的對比圖時,大家在第一反應中,有多少人可以重啟自己的視角,還是說已經被這個頁面所拉入到不可自拔的漩渦中去了呢?


如果讓你盯著第一個界面進行改版,我相信還是會有很多小伙伴可能只是會把底下的信息流挪上來,或者新增一些“我們覺得”有用的板塊。但其實這整個形態就是錯的,即便將錯誤路徑3改成了路徑2,你以然還是在錯誤的路徑上,本質沒變。所以為什么我們說要做正確的事而不是正確的做事。





交互不僅僅能夠讓產品好用的,也要讓產品走對方向。


另外,UI也是交互的一部分,屬于看的懂。好用可以分為看得懂,學的快,用的會,交互體現在人們日常所接觸到的大部分媒介,并且與之產生聯系。例如一把水壺,水壺的設計形式首先通過視覺讓你感知這是一個水壺,如果把水壺的外形做成一個馬桶,你覺得它還是一個水壺嗎,這叫看的懂。學的快指的是當我看懂了之后我馬上就可以對這個產品進行基礎操作,例如裝水、倒水。而用的會就是這個水壺更多的附加功能,例如燒水、定時、調溫等等。



1.交互設計中媒介與人的關系


1.1順應


交互的媒介是不可缺少的,大家是否去研究過為什么古代人們撰寫文字是從上至下,從右往左而現代人的習慣是從左右的?古代受限于工具、媒介,竹簡是主流的記錄文字信息的媒介, 有人會說竹簡可以從做往右寫不是非要從上往下啊,但是大家可以看到人們是如何打開進行閱讀的,如果是橫著閱讀但是打開是上下展開就會非常不自然了。


所以在當時人們為了適應非常有限的工具資源,改變了自然的操作方式。但現代社會如果說你的產品不為用戶的使用和場景去考慮,那基本也就涼涼了。


從2g到5g時代的發展,除了生活方式發生翻天覆地的變化外,我們所接觸到的媒介也發生了變化,從2g時代以文字為主的信息到5g時代視頻、游戲、影音等為主的信息化進步,讓人們對信息的獲取更加方便快捷。除了內容,外對于像移動手機這樣的設備用戶對其操作方式和習慣也有了更多的變化,從當初的搬磚按鍵手機到支持ar等新技術的超智能化手機,改變了我們的認知也改變了我們的生活方式。



1.2遷移


平臺遷移的交互成本,很多同學可能都玩過moba類游戲-dota,這是一款在電腦端戰術競技類游戲。在dota中我們經常使用的交互形式主要分為鍵盤和鼠標的控制,鍵盤用來控制技能的釋放和其他快捷物品的使用,都是通過按按鍵的形式進行釋放。通過鼠標右鍵來控制人物的移動和左鍵選擇技能和物品釋放的目標,這是端游中基本的交互行為與操作。





在現在非?;馃岵⑶夷J胶蚫ota相似度很高的王者榮耀手游中,我們看到了,如何從端游到手游的交互遷移。從鼠標控制移動到左手拇指來控制移動,右手拇指來控制技能的釋放,在這里大家要注意,在端游中技能的釋放是可以非常精準的,并且可以指向性釋放在某一個角色中,但手游不行。鼠標擁有移動、視角、釋放技能、使用物品多個功能,但是在手游中我們無法做到選中某一個技能再點擊到某一個角色上,所以手游中只能進行非指向性的預判技能釋放。







同樣在端游和手游的吃雞游戲中,端游鍵盤控制人物移動,鼠標控制射擊與視角,但是在手游中控制射擊與視角就需要2個手指來完成非常不方便,也很影響射擊的精度,但是如果做成吸附式準星那么也就失去了很多的樂趣。所以很多的廠商為了解決的這個用戶痛點開發出了吃雞專用的輔助設備,專門用來給多余的手指進行射擊操作。


另外,大家如果做b端的同學應該也深有感觸,平臺遷移的成本非常高。想要把集成非常復雜的業務后臺切換到移動端是一件很麻煩的事,因為在網頁端我們有大量的空間和更自由的控件形式去承載信息,比如聯動的左側標簽導航和頂部聯動的標簽導航,在增刪改查的操作中顯得清晰高效。但是到移動端上雖然可以到做聯動導航,但是頁面顯示實在有限,很多的信息完全無法在一個界面中呈現,所以要么將頁面進行左右滑動,要么拆分進行多步操作。但本身擁有復雜業務功能的后臺系統就不適宜遷移到移動端上。


web端的工具和網頁通常都會有撤銷操作,按CMD(ctrl)+Z大部分都可進行撤銷上一步操作,但是在移動端我們無法通過特定、或者統一的手勢進行撤銷,所以很多時候在表單輸入的時候會有一鍵刪除圖標,卻無法進行撤銷。所以我在想是不是可以在用戶一鍵刪除信息后,刪除按鈕變為撤銷按鈕,有待考量。



2.交互認知的盲區


到底什么是交互設計,這個問題其實是比較復雜的,也是我一直在思考的問題。所以也翻閱了很多文獻,嘗試做更多的案例來解釋。交互設計的概念真的挺多的,光網上能夠找到的定義就不下5種,這些對交互設計的定義中,比較頻繁出現的是行為、場景、用戶等詞匯,交互設計到底設計的是用戶的行為,還是設計用戶正在交互的媒介或者是用戶正在使用媒介這件事情,我覺得可能還是沒有能夠解釋清楚交互設計的本質。


中國歷史文字的演變,它并不是一個模仿的過程,而是一個從底層對文化、自由、精神、環境、人的深刻理解而發生的一種進化過程。但現在其實很多的交互形式都是來源于一些大流量產品的模仿,更多的是擔心用戶成本過高而妥協為滿足用戶預期。



2.1信息不對稱


事實上,為什么我們講不清楚什么是交互設計,其實UI設計也一樣,她絕不可能單純的指代用工具繪制出用戶界面,其實是因為信息不對成、詞不達意或者叫做你說的比人聽不懂。我可以舉例的是我們的漢語


例如“你可以意思一下”,單就這句話,我們大概知道最關鍵的是“意思”二字,包含了特別多的含義,含義需要通過語境、使用場景來區分,說者的“意思”是想告訴聽者什么呢?沒人知道,是一口氣干完一瓶酒,還是喝一口?還是送一點禮還是?應付一下?


當然這句話中的“可以”也很有講究,加上“可以”說明你也能選擇不“意思”,是不是覺得這7個字讓我們整一句話都活了起來,說者與聽者如果不在一個境中,聽著就壓根不知道說者的具體表達含義。


同樣的,在設計領域,很多設計師喜歡用大氣、高級、逼格、有呼吸感描述的自己的感受。 說出來自己都要笑出聲,還有什么五彩斑斕的黑等等。就比如呼吸感這樣的詞,這個詞聽起來比較抽象,讓聽者都有點不太好意思追問什么是呼吸感,其實你問了,說者也不知道怎么描述??赡苷f者覺得現在信息太密集讓人無法呼吸,但設計者覺得現在剛好,所以本身就沒有一個標準,更多的就是主觀的感受,讓你不得不接受這個建議的原因是因為兩者的身份。


我們用我們能夠講述的語言去描繪我們不懂的事物,再例如設計師和開發還原只會說往左移動10px,而不會說給這個view加上padding left 10px。還有你和開發為什么溝通起來那么累就是因為你倆完全無法站在對方的角度對這件事達成共識,設計師通常喜歡描述從左到右或者從上到下,但是在開發的語音認知理,他需要知道的是空間坐標,并且具體的移動單位。所以為什么我們那么鼓勵廣大設計師去學習一些開發知識,開發也盡可能的去補充設計背景。


在這里,交互設計師產出的交互說明文檔就是能夠幫助設計師與開發有一個更好的溝通,所以能力較強的交互設計或者視覺設計都能夠把自己想表達的信息表達的很清楚。


再舉個例子,不知道大家有沒有編輯過問卷或者做過用戶訪談,很多時候是不是覺得收集到的信息無效、無用,其實很多的原因是因為我們和用戶對于這些問題壓根不在一個頻道,比如:你的問卷問的是,您喝酒的頻率是多少,選項有:從不、偶爾、經常,在用戶的眼里偶爾可能是1年喝一次,而我們覺得差不多1個月喝一次算偶爾,再比如訪談的時候問用戶這個問題:您覺得您喜歡下面哪個頁面的風格?用戶:“什么是風格?”


所以交互設計師有一個能力久顯得很重要了:讓萬物都可與之對話的能力,對話需要什么,是語言。




3.交互語言的淺見


我們都知道,語言是我們溝通的根本,語言是由詞匯按照一定的語法結構在不同的語境中所組成的復雜系統。不同的種族有不同的語言,不同的專業有不同的語言例如在圍棋中有長、立、并、空、頂等等,例如在模型手辦中有分線、滲線、勾線、補土等,這也都是在特頂專業領域中的一些術語,但這些并不是語言,只是在某個領域中大家總結出來便于溝通的文字符號。


所以我們再回到上方看一下定義,首先語言是由詞匯所組成,詞匯是由符號做組成,大家可能都聽說過比如樂高啊、原子理論這樣的組件搭建方法,但這些都僅僅只是規范,而并不是語言。語言擁有更強的普適性和通用性。


那么我所認為的語言他首先包含了能夠組成詞匯的符號,這些符號大概就是指:點、線、面、體、色彩由這些點線面體可以組成的詞匯有:按鈕、文字、圖標、圖片等。但是光有詞匯不行,在漢語中有12種詞類:名詞、動詞、形容詞,在由句子組成的詞匯中包含了不同的成分:主、謂、賓、定、狀、補...這里不過多敘述。


語言很重要的一點它具有語境,語言的運用包含了看聽讀寫4個方面,看和聽指的是輸入,讀和寫指的是輸出,那么交互設計語言中,也包含輸入和輸出兩種屬性,例如輸入指的是由不同“詞匯”組成的“句子”,比如由標題、箭頭、色塊組成的一個itme,是一個可被理解、看懂的輸入屬性的控件。輸出指的是該控件可被出發并且進行狀態的變化和所進行的任務跳轉。



這里的控件雖然有兩個屬性,但是還需要語境來幫助我們理解,一個是它本身所能夠輸出的默認狀態的,比如點擊之后的跳轉頁面,另外他也可以具備產品賦予的自定義屬性,例如底部滑出picker。




還有,在漢語中“去買兩個桃子吧”,這里的“兩”肯能是虛數也可能是實數,但是在交互設計中,我們如何表示點擊1下和兩下或者是多次呢,一般單擊的屬性通??梢杂幸恍┨匦缘姆枌傩运硎境鰜?,例如加下劃線的文字、一個帶箭頭的item、一個圖標、一個帶有主色的文案等等,那么雙擊的話可以用雙箭頭來表示嗎,當然不可以,雙擊在移動端的手勢中具有放大、點贊、返回頂部、定位消息、定位光標等功能。






那我們發現如果把交互設計能夠做成類似于語言的系統是非常有意思,并且有用的。這會讓更多信息不對稱的情況消失,不僅僅是設計師,在產品團隊中大家都能夠有一套共性的交互語言系統,無疑是一件非常提高效率的事。但是目前的很多交互規范的文檔中,大多都是多種元素的拼合,給出常用的、可復用的控件、組件,但是大家依然還是無法從語言角度去創新,這就導致了很難會有新的、有用的交互形式的出現,比如很多搜索控件都是承載在頂部導航欄中,那么在做規范的時候也只能在這個組件上去微調,殊不知搜索這個控件的“語境”并不單單只能在頁面頂部,例如高德地圖做的就很好。這樣一來,這個組件的常規規范形式就能和很多產品區分開來了,當然要視產品形態不同。



4.業務背景與交互形態


4.1不同業務背景下的信息組織


市面上有許多的新零售電商產品,頁面中的信息流也是大同小異,但是無論是交互還是產品在做設計師必須要考慮的就是產品定位與當前狀態。例如目前我們看到的都是以下的信息流樣式,但是我們要知道,30000個sku和3000個sku的展示策略肯定是不同的根據算法的瀑布流在30000個sku中可以隨意展示,但是3000個就不行了,很可能在算法的過程中用戶會頻繁看到重復的商品。所以使用雙列布局的方法并不合適。





所以這樣的產品首屏策略就顯得非常關鍵。我們可以看到常規的電商產品中,首屏基本上都是呈現這樣的策略,從頂部的搜索、分類、banner、分流入口、cta、營銷瓷片區這樣的布局,從基本上能夠滿足一個大量sku電商產品的所有需求,但是如果用戶定位和產品本身的基礎無法支撐起這樣的場景又該如何去做首屏策略呢?


從交互角度入手,那么既然我們無法做到大而全,那么我們至少可以做到精準、限時,讓用戶上癮的策略,上癮模型這邊不再贅述。所以類似云集在首屏的策略可以概括為整合搜索與banner、分流入口、cta、營銷瓷片以及以時間為緯度展示的大圖信息流。重點在于可隨意控制的營銷工具,以及時間軸的商品推薦,讓有限的資源呈現更多的形式變化以及讓用戶有時間概念,每天固定時間來進行活躍。





4.2營銷工具化


通過交互手段我們也可以給運營工具更加靈活化打基礎。例如我們經常看到的營銷瓷片可以劃分為非常多樣式與可能性,并且在后臺工具中靈活控制,同時除了日常的營銷目的之外,在大促或者活動需求下更可以將整一個首屏切換為極具氛圍的信息呈現。


4.2.1更加靈活的控制方式




4.2.2多樣的營銷結構



最后總結一下,我認為交互設計也包含了視覺,所以我們在決定用什么樣的設計形式之前需要考慮更多,入業務、用戶價值等等,從而用更加有價值的交互策略提出問題、解決問題會比單純的用規范去搭建界面更加有效。






二、為什么UI配色那么難


不管是做UI設計還是畫插畫,有很多同學覺得自己是因為天賦不夠所以對色彩的敏感度不夠,其實不然。一個可能是大家總結的太少,從來都是憑感覺和運氣去配色,但其實都是有講究的。本文不會給大家重復講解什么是rgb,什么是hsb,什么是cmyk或者什么三原色,這些大家都可以從某度中直接搜到。我今天要給大家分享的是人們是如何認識色彩,并且在產品設計中使用的。



1.人類對色彩感知的原理


大家都知道,對于不同的顏色,我們對其的感知是不同的,有人覺得暖色在前,冷色在后。暖色更醒目,冷色不醒目。那這是什么原因呢?首先我們要知道我們眼睛內存在兩種感光細胞:視錐細胞和視桿細胞,視桿細胞能夠感知光線強弱但無法感知顏色,而視錐細胞卻相反,視錐細胞內還有3種對不同頻率光敏感的細胞。我們經常會用到視錐細胞,而視桿細胞卻用的少,更多的是在黑暗的環境中使用的多。


視錐細胞的三種類型分別是低頻、中頻和高頻視錐細胞,分別對紅、綠、藍三種顏色的光敏感。而且這三個視錐細胞分別也有重合的部分。低頻視錐細胞對整個可見光頻譜都敏感,它的范圍包含的比較廣,特別是對于頻譜中段的黃色到紅色部分更加敏感。但是像高頻的紫色幾乎只有藍視錐細胞可以感知。





大家在平時生活中都能看到,在馬路上、機動車道上以及一些警示牌都會采用黃色、橙色等標識,因為這些非常醒目。更容易被紅視錐細胞感知到,但如果你的標識用的是冷色調那這個交通事故可能要發生的頻繁的多。



1.1人對色彩邊緣的對比更加敏感


我們來做個實驗,如下圖,大家覺得在中間的灰色塊是純色還是漸變色,可能很多同學看上去都會覺得是個漸變色,但其實它就是一個純色,不信的同學可以自己在工具中嘗試一下。




但如果你把這個色塊拿出來后,不在這個環境中直接進行邊緣對比,那就不會出現漸變的情況了。那光說原理,我們也來看一下在產品設計中需要注意的地方,因為在UI界面設計中我們通常需要把一些圖片、卡片疊加放置,這樣就會造成邊緣視覺的對比,本來不明顯的兩個元素重疊之后變的很明顯。所以例如一些標簽的背景色和頁面整體的背景色。





如果你想要讓兩個顏色接近的元素具有識別度,那么最好將這兩個元素進行重疊擺放而不是分開擺放。另外,如果是卡片樣式的設計,背景色一定不要過于灰暗也不要過于淺白,過于深的話會讓卡片輪廓過于明顯而導致整體看上去顯臟以及很明顯的對比,顯得不自然和舒適。如果過于淺的話也會導致信息的不聚焦。





還有,為什么被框起來的文字會看上去更加有點擊的欲望其實也是這個道理,因為文字和背景疊加產生的輪廓只是文字的輪廓,在我們的第一印象中只是一種符號,當它被賦予顏色之后我們才會意識到它需要我們去注意或者可被點擊,但依然還是不夠明顯,所以為了強化可點擊這個感覺,我們才用了線框、背景色、箭頭等方式。





2.色彩在UI設計中的作用


1.加深品牌印象與品牌感


一般來說,產品都會有一個品牌的主色。而這個品牌的主色也通常會運用在外面的產品界面中,所以例如閑魚、馬蜂窩等,主色都采用了黃色,黃色具有非常活潑、有趣、好玩的特性,無論是線上還是線下都使用了這個品牌黃色,從每一個線上元素的主色,到線下包裝的印刷色。


但一定要注意的是,如果品牌的主色偏灰偏暗的話,可能不太適合線上的產品進行通用。例如之前的嚴選、云集、711便利店、宜家等產品的主色都是偏深和暗的,所以在線上的界面用起來會非常不和諧,和整體偏淺色、輕的風格對比起來太強烈,引起不適。





而且線上覺得還OK的顏色,由于印刷的原理,實物也會更加偏低飽和和偏暗。



2.引導用戶視覺凹增加易讀性


我們在上一篇十萬個為什么文章里提到了人們如何閱讀信息,提到了一個視覺凹的概念。所以在界面中,什么樣的地方使用色彩是有講究的。所以在這里通常會需要使用顏色的地方在于希望引導用戶和吸引用戶注意的地方才會使用色彩。例如下方產品,使用了高亮色來引導用戶視覺。







當然色彩的運用也會講整個頁面的層級凸顯出來,而不單純的用中性色來區分層級。


3.區分信息交互的狀態


同樣是上兩張圖,大家可以清晰的看到,美團中的附近熱賣好點、滿減標簽、價格,其實都只具備信息的呈現,但不具備交互的特征和狀態。但淘票票中的“4.7萬”和“展開”卻不一樣,“展開”使用了輔助藍色,這里的展開就具備這個文案所描述的這個控件具備的交互特性-點擊后將隱藏的文字展示出來。藍色一般我們都會使用在某個可點的鏈接上,當然也會有其他的色彩來表示可點擊。


所以不是所有的元素都要賦予顏色,這樣會使整個頁面非?;靵y





另外,UI設計中主色除了引導用戶的作用外,也可以表示當前正被激活的信息狀態。例如愛奇藝app中播放詳情頁面,當前板塊標簽和正在播放劇集的激活狀態。





4.營造氛圍傳遞熱度


色彩除了上方所述的字段中的不同使用,在圖片和整體氛圍營造中也起了很大的作用,目前很多2c的產品往往會在界面氛圍的營造中運用一些手段。例如導航欄、底部標簽欄上的圖標,或者在首頁營銷板塊的瓷片區域都會用品牌色在活動時段內進行氛圍打造





3.在UI設計中色彩運用的坑與技巧


1.色彩的正反兩面

在色彩的心理學上,大家都知道每個顏色具有一定的性格特征和表達。而且都會有正反兩面,可以看下方多種色彩的描述。





然而其實很多的產品使用的色彩和我們所認知的會有一些差別,比如咖啡品牌的主色選擇,在我們常規人之中,咖啡應該是褐色、棕色,但是大家看到星巴克、瑞幸、漫咖啡其實都用了和咖啡本質沒什么關系的顏色





在瑞幸剛出來的時候,很多人其實不太習慣把這個藍色和咖啡結合起來,但是為了塑造品牌差異化,瑞幸一直將“藍色”作為品牌的主基調,“小藍杯”這一稱呼不但讓消費者感到親切,也在眾多的咖啡中有了屬于自己的記憶點。在這支廣告片中,主基調同樣是使用藍色,不但符合了當下消費者的視覺偏好,也在為用戶留下記憶點之后,也讓用戶在看到藍色時自然而然的想到瑞幸咖啡。





2.顏色的禁忌用法

但凡各位使用了這樣的配色,保證各位過不了試用期,相信我。所以大家千萬要避開。


1.高飽和度的色彩

會讓人產生“幻覺”!讓人產生視覺疲勞,例如我將餓了么這個界面的色調調整一下大家看一下,不亮瞎算我輸。




2.灰部使用過多的配色

為什么很多時候我們總覺得界面臟兮兮的。是因為我們在界面或者配色中使用了過多的低飽和度、灰度較多的配色。所以這個也是要避免的




3.沒有規律且過多的配色

讓界面或者插畫看起來非?;靵y。一般來說顏色的使用也需要有側重點,所以我們常用的方法是6、3、1的色彩配比。





4.熒光色

熒光色絕對不可以使用在UI界面中,尤其是主色。會讓你瞬間失明!





5.太輕柔的顏色

在很多dribbble的飛機稿中,經常能看到這樣的配色和練習。無論是在練習中還是實際項目中,這樣的界面也完全無法讓用戶看到想看的信息,沒有重點且輕飄飄的感覺。





6.現在很火的新擬物化設計

說真的,這樣的風格確實耳目一新,但個人覺得可能不會成為主流。因為它就和第五種一樣:信息可識別性很差。就不說色弱的人群,就正常的用戶來說大面積的白色+飽和度低的元素結合感覺就是得了“白內障”。另外我們常說的一點就是所有元素都強調就等于什么都沒有強調,這樣的風格在每一個元素都具有陰影的情況下都在爭先恐后讓用戶感知,原則是輕量化卻又需要那么多陰影,這樣就有點自相矛盾的感覺。


為了營造這樣的“新擬物”的輕量氛圍,還不得不在整個界面中簡化大部分元素,能不加文字就不能加文字,說的好聽叫做使用了奧卡姆剃刀原則,有一句話一直非常影響我做設計:“設計是需要被簡化的,但是簡化的過程一定不簡單”。所以不是單純的簡化所有元素為了達到這個風格的目的。




7.不要將對抗色重疊

例如下方,兩種對抗色重疊后會引起視覺閃爍的感覺。是不是覺得我有點帥的晃眼





4.正確的UI配色方法


定義主色


首先我們必須要說,色彩肯定是需要結合產品和用戶的定位去指定和提煉的,所以前期會需要去做一些研究例如用戶畫像,品牌沖刺或者是情緒板等方法。得到幾類“真實的虛擬用戶”,從而確定一些主色的方案。然后我們在主色的選擇中需要避開上面體到的坑,并且對市面上的app進行總結,我們發現大部分的產品色,簡單來講在我們HSB模式中去色都在一個固定的范圍,就像這樣。

 




在上文中也說到用色比例的631法則,所以在選取輔助色的時候我們需要定義好輔助色可以用在什么地方。例如知乎,其實輔助色沒有非常明顯的1種或者兩種,都是多色的輔助色方案,都在一個配色的系統中選取顏色即可。大部分產品目前都是這樣的策略,一個主色搭配多個輔色,如果有其他獨立的板塊可能需要重新定義專屬的配色策略。






定義中性色


其次再定義中性色,比如字體和線條以及背景色。字體是為了讓信息有對比,顯示層級,那么通常給2-3種層級即可,至少2種,至多3種。在選擇3個層次的中性色文字是,給大家一個建議:標題/正文文字顏色HSB的B值不要大于20.備注和次要文字b值不要大于50,默認文字不要大于80,大家可以去嘗試一下,且中性色不得使用純黑。





文章來源:站酷  作者:應駿

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



15個著名的設計心理學原理以及在設計中的應用

鶴鶴

你是否有在聽別人說某某原理法則時一臉懵B的時候?明明知道這個原理卻說不出它的名字?不要緊,本文就來介紹與人機交互設計相關的15個常見的設計心理學原理,約13000字,幫助你了解產品的定位,需求目的和交互邏輯,洞悉用戶的各種行為,也為自己的設計予以理論支撐。


1956年美國科學家米勒對人類短時間記憶能力進行了研究,他注意到年輕人的記憶廣度為5-9個單位,就是7±2法則。與席克定律類似,神奇數字 7±2 法則也經常被應用在移動應用交互設計上。


因為人腦處理信息的能力有限,所以它通過把信息分成塊和單元來處理復雜問題。7±2法則應用很廣泛,例如iPhone通訊錄中的手機號碼被分割成”xxx-xxxx-xxxx“的形式,還有銀行卡號、身份證號,我們總是喜歡把一長串數字拆分開來讀寫,目的就是降低記憶成本,提高信息的易讀性,從而達到視覺防錯的作用。


Web導航欄選項卡數量不超過9個

在設計網頁導航時,如果希望用戶記住導航區域的內容或者一個路徑的順序,那么數量應該控制在7個左右(不超過9個),如蘋果、Dribbble、behance等網站的導航分類。


Web導航欄選項卡數量過多時

如果導航或選項卡內容很多,可以用一個樹狀層級結構來展示各級別關系,但要注意其廣度和深度的平衡。例如人人都是產品經理和Dribbble,把更多子類別收在二級目錄里。



移動端選項卡導航

在移動端應用設計中,常見的電商app例如奈雪和樂凱撒分類模塊,兩個產品的商品分類布局形式很相似,都是用了選項卡的方式來分類商品,層級明確,相應的提升了用戶找尋單品的效率。


Tabbar區標簽最多不超過5個

在移動應用設計中,底部Tabbar最少3個,最多為5個(幾乎沒幾個超過5個),這樣做除了減輕用戶記憶負擔,超過5個會降低視覺和操作上的體驗。事實上就算只有4個,我們也經常想不起微信底部的4個Tab分別是啥。



頂部導航欄頁簽

我們看到的大部分app頂部導航欄的頁簽數量都嚴格遵循了7±2法則,雖然在橫軸可無限滑動,

但在顯示區域只保持7±2法則的顯示數量,例如馬蜂窩、飛豬旅行等。


金剛區圖標不超過8個

我們常說的“八大金剛”就是一屏顯示8個圖標,超過的則放在第二屏。如果兩行10個,往往第十個是“更多”入口,總的來說也沒超過9個。


banner文案不超過9個字

產品運營banner主文案字數通??刂圃?個字以內,在設計時也通常把長標題一分為二排兩行,便于用戶快速閱讀,提升點擊率。

     


在交互設計中,7±2法則是減少用戶認知負荷,提升用戶體驗的重要環節。同時還強調了在設計過程中對產品的預見性,避免在不斷為產品添加功能時,破壞原有的視覺基礎。



0無需說明書

喬布斯曾說過:“蘋果應該創造所有人都可以使用的產品,即使沒有用戶指南”。


1 一看就會

簡單易懂,看一眼就明白你想說什么,不用教學就知道怎么用。


2秒法則

所謂“2秒法則”,是指用戶在使用某類系統時的等待時長不超過2秒。在極短的時間內展示重要信息,給用戶留下深刻的第一印象。這里的2秒只是一個象征意義上的表達,也許有一點隨意,但是這卻是一個合理的數量級。我們熟知的“F”瀏覽模式其實就是間接縮短用戶看到重要信息的時長,達到快速瀏覽的目的。


進入App的首頁加載時間如果過長就會導致用戶產生厭煩情緒,很容易退出甚至卸載App的行為。因此我們看到許多應用將首頁加載時的空白頁進行占位圖設計。


下拉刷新也是一個設計點,為避免刷新時間過長,設計師通常會在加載動畫上做文章。充滿趣味性的動效能安撫用戶焦躁不安的心情,無形中降低了用戶對等待時間的感知。


APP里面的banner設計要有視覺沖擊力,如果兩秒之內沒有抓住用戶的眼球,可能就被用戶忽略了。


因此,在設計互聯網產品的頁面時,用戶等待的時間越短,用戶體驗越佳。反之,就會讓用戶產生焦慮的情緒。


3次點擊法則

用戶在3次點擊之內如果還沒有找到他們想要的信息或了解網站特色,他們就會離開該網站。這條原則突出了清晰的導航,符合邏輯的結構和易于理解的網站層級的重要性。(來自《眾妙之門》P133) 

其實在交互體驗中,點擊的次數往往是無關緊要的。只要每次點擊都是無需思考的,毫不費力地順勢進行,那么用戶的挫敗感就會大大降低。如果你的網站能夠讓用戶知道他在哪里,從哪里來,要到哪里去,并且能夠讓用戶了解如何完成目標,這樣的點擊即使有10次也是沒有問題的。例如,在京東購買一件商品需要經過“立即購買>確定>提交訂單>選擇支付方式”4次點擊才能到訂單支付頁面完成購買,這過程中可能還穿插其他的點擊行為(比如選擇地址、優惠券),用戶并沒有感受到不方便,使用過程流暢而自然。


在可用性測試領域,“三次點擊”定律一直是一個很具爭議內容。體現在以下幾點:

·研究表明,用戶在超過3次點擊還沒到達想去的頁面時,往往并沒有退出網站,而是會繼續多點幾次;

·當把一個3次點擊就能到達的流程改為4次點擊的時候,用戶發現目標頁面的能力反而提升了600%;

·合理的導航系統比點擊次數更重要;

·比起“3次點擊”,有人提出了“1次點擊”定律,即用戶的每一次點擊都應該讓他們更接近目標,同時盡量減少能干擾實現這一目標的因素;

·用戶抱怨要花很長時間才能找到某個產品,實際上他們是在抱怨無法找到想要的東西,如果用戶找到了想要的東西,他們就不會抱怨點擊的次數了;



英國心理學家William Edmund Hick認為,在簡單的判斷場景中:一個人所面臨的選擇越多,做出決定所花的時間就越長。有時候在選擇中花費太長時間從而導致決策失敗。

生活中我們也經常會面臨選擇困難癥,比如早上起床就糾結今天穿什么?中午去食堂就會糾結吃什么?造成我們如此糾結的原因就是因為選擇太多了(遠古人就沒這些煩惱,尋找食物時逮著什么就吃什么)。


在設計中的應用

應用到界面設計中也是如此,選項越多,意味著用戶做出決策的時間越長。

例如APP Store首頁,改版前的首頁把眾多app平鋪出來,對目的不明確的用戶來說選擇有點多。改版后的首頁大幅減少了App的數量,卡片的設計方式簡潔且目標清晰。


不得不面對較多選項時, 對主要和次要的選項做視覺權重區分,做好設計上的歸類,提升用戶做決定的效率。例如美團外賣金剛區第一行5個入口的圖標在尺寸和表現手法上都比下面的入口圖標要大更醒目?!拔业摹表撁姘岩恍┑皖l率功能或不太重要的功能收納到“設置”里,此外還可以通過置灰、鎖定等方法間接減少選項,降低干擾。


對于多流程的任務進行分步操作,讓用戶專注眼前任務。 例如Clubhouse注冊時,把需要用戶選擇的選項分步引導完成,讓用戶能專注當前行為。


對于多種類別的選項應當做二次分類的區分,我們都知道電商平臺的品類繁多,僅通過單一分類是不夠的,比如數碼頻道下面還分相機、影音娛樂、數碼配件、智能設備、電子教育等大的分類。商品詳情頁的篩選功能也是貼合使用場景來設計的,所以分類不怕多,就怕混亂。


適用邊界

雖然選擇越少,用戶做決策的時間越短,但這并不是提高用戶體驗的唯一標準,過度的減少選項,可能導致負面效果。

如上圖右,如果在刪除App的彈窗中只有一個“刪除”選項,沒有明顯的取消之類的途徑,那么用戶會覺得特別難受,感覺被強迫去刪除。如果當下有急需使用手機處理一些事情,那么這樣會把這種負面情緒給無限放大,讓用戶抓狂。


??硕芍饕苡绊懹谶x項的多少,但是它不適用于需要高難度閱讀的任務。例如考試試題每道題只給你A、B兩個選項(學渣竊喜),那也太容易蒙了,這就是希克定律在答案試題中的局限性。


希克定律是一個可以適用于設計的指南,記住要盡量減少用戶在一次決策中要做的選項,因為決策效率是一個產品導致用戶流失的重要原因之一。引導用戶在明確的選項之間進行選擇,以便快速將他們送到某個地方(例如賬單支付),這將大大提升用戶體驗并達到你的目標。




費茨定律由心理學家Paul Fitts提出,用來預測從任意一點到目標中心位置所需時間與該點到目標的距離和大小有關,距離越大時間越長,目標越大時間越短。舉例來說,你伸手去拿桌子上的咖啡杯,開始你的手臂迅速地往杯子位置移動,接著你會放慢速度直至找到杯子把手,這個杯子把手的大小與你“抓住”它有著一定的關系。


如上圖所示,如果光標現在在任易地點想要去點擊目標target,最短路徑一定是D,最短路徑上容錯的最長路徑是D+W,只要水平上移動超過了D+W你就點不到了,而這個點擊動作所耗的時間是一個常數加上一個以D為正比W為反比的函數的和。 


詳細解釋如下,圖中紅色方塊代表點擊目標,虛線代表移動路徑,此時因為紅色方塊目標較大,所以用戶從任何一處點擊都很容易(可以用鼠標在屏幕任意點移至紅色方塊試試)。


相反,紅色方塊目標變小,快速點擊就會困難很多,很難一次到位。


但如果紅色方塊目標很小距離很近的話,因為移動范圍小,也能準確的點擊到。


按鈕越大越容易點擊

在頁面中,大而近的目標區域意味著用戶不需要做太精細的調整就可以輕易的觸達目標。比如頁面中的大按鈕。


將按鈕放置在離開始點較近的地方

夸克瀏覽器的搜索欄就放在離手最近的屏幕底部區域,相比常見頂部搜索欄更方便操作,效率更高。


相關按鈕之間距離近點更易于點擊

注冊登錄界面,通常將「注冊」和「登錄」放到一起,不僅可以在視覺上增強用戶對他們相關性的認知,還可以減少在他們之間的距離 。


適用邊界

費茨定律鼓勵減少距離,增加目標大小以提升用戶效率,但反過來亦適用。比如iPhone關機按鈕,沒有使用點擊關閉,而采用滑動操作,還把按鈕放在屏幕頂部,這樣明顯增加了操作難度,進而避免了用戶誤操作。


App彈窗經常把“關閉”按鈕放在卡片的右上角離手遠的地方,希望用戶先完成彈窗提示的任務。還有啟動頁廣告,喜歡把“跳過”按鈕放在難以點擊的右上角(恰飯重要),以提高用戶的誤觸機率提高轉化。


思考小結

按鈕越大越容易點擊,因此在程序開發中,會增加按鈕點擊的熱區范圍,減輕用戶精準點擊的壓力。但也不能過分的大,容易引起誤觸;

讓相關聯的內容更靠近彼此,用視覺手法增強用戶對它們相關性的認知。距離產生美,注意不要靠的太近,會出事;

將按鈕放置在離出發點較近的地方,比如頁面主按鈕一般會放在屏幕底部易操作區域;

屏幕的邊角很適合放置像菜單欄和按鈕這樣的元素,因為在屏幕邊緣和角落位置有“無限可選中”的屬性,可以大膽操作而無需“微調”,參見macOS底部dock欄;

定律的反向使用可以適用一些特殊場景,比如想達到某種目的而降低按鈕被點擊的可能;




“任何事物都具有其固有的復雜性,無法簡化”。

泰斯勒定律(Tesler’s Law)由Larry Tesler于1984年提出,也稱「復雜度守恒定律」。

該定律認為:每一個過程都有其固有的復雜性,存在一個臨界點,超過了這個點過程就不能再簡化了,你只能將固有的復雜性從一個地方移動到另外一個地方。


生活中很多我們習以為常,感覺便捷方便的生活方式,是無數卓越的數學家、工程師、設計師等無數的時間投入,才實現的某個小功能,是他們把這些復雜性轉移到自己身上替我們簡化了。


說回移動端,每個應用中都有其無法簡化的復雜度,也不能按照我們個人意愿去除這些功能。這就是為什么飛機稿都簡潔好看,而一搬到線上就面目全非。常見的復雜性轉移有:“查看更多”、“查看全部”、“查看詳情”、“展開和收起”之類的文字做轉移跳轉,比如:頂部導航欄的更多圖標,就是將常用的功能整合并隱藏在首頁設計的更多功能模塊中,把用戶的操作范圍轉移到另一個地方。


除此之外,還有一些降低操作復雜度的方法:

刪除、組織、隱藏

視覺層面的“降噪”方法,刪除會干擾用戶操作的選項;功能分類明確,圍繞用戶行為組織信息內容;隱藏那些不常用而又不能少的功能,延遲及階段性展示??偟膩碚f就是將復雜的信息收起來,展示重要且簡潔的界面。


簡化交互設計

可以用代碼節省用戶操作時間的地方,是互聯網人一致的追求。例如,B站的一鍵三連,用戶長按點贊按鈕,會同時觸發點贊、投幣和收藏,省時省力。


算法解放“生產力”

個性化算法就是通過技術手段,將用戶復雜度降低,而轉移到開發者身上。抖音為什么會讓人上癮?是算法知道了你的喜好,專推給你喜歡的內容而不用自己去找,誰都喜歡私人定制。這對用戶來說是一件好事,但就像魯迅說的:“你覺得好,一定是有人在負重前行”,這里的簡化復雜的難度就轉移到設計和開發身上了,還逼得機器去學習。例如抖音、淘寶、知乎首頁推薦的內容都是基于你的喜好定制化推薦給你的。


我們常說以用戶為中心去設計,就需要從用戶角度出發,在交互設計中盡量簡化操作的復雜度,降低學習成本。但如“復制粘貼之父” Larry Tesler (1945-2020) 所說:“任何事物都具有其固有的復雜性,無法簡化”。因此,如何取得復雜度的“平衡點”就是重要的部分,是讓工程師及設計師花費大量時間去降低產品的使用難度,還是在設計中保留一定的復雜度是我們需要思考的事。



該原理是由麥肯錫國際管理咨詢公司顧問Barbara Minto提出的理論,她強調結論先行,論點自上而下。

你是否遇到過這樣的場景,部門開會時有人口若懸河的講了半天,到最后你都不知道他想說什么。所以如果開會時你會走神,這不怪你,只怪講演者說話沒有邏輯,沒有重點。


金字塔原理指示結構化表達遵循結論先行的原則,即任何問題都能歸納出一個中心點,讓受眾能夠第一時間清楚你想談論的主題。然后由數個論據作支撐,而這些一級論據可以繼續由數個二級論據支撐,如此延伸,狀如金字塔。自上而下,上層影響下層。


應用到交互設計上,即將信息展示的重點與交互行為的主任務優先展示,再根據用戶在這個界面上所愿意停留時間逐級給予更多細節補充。以京東的商品詳情頁為例,首先金字塔的最上層是用戶目標明確直接進行“立即購買”的底部全局按鈕,其次是商品的頭圖和用戶評價這些,讓用戶了解更多信息,進一步促成購買,最后一層是提供商品相關的全部信息、參數、評分等,確保交易的最終完成。在這個過程中,用戶在每一層花的時間也在逐級增加,呈金字塔狀。


映射到設計師身上也是如此,從設計新人到設計總監,中間差的就是一個完整的設計技能金字塔。就像升級打怪,每完成一項任務獲得相應的經驗值,累積的經驗值幫助我們更快的升到下一級。當把工作中的需要攻克的難題一一解決之后,你的設計水平會在不知不覺中更加精進,形成一套自己的設計風格,成為一名優秀的設計師。


有趣的是,把金字塔模型倒過來就成了“用戶漏斗模型”。自上而下,激勵用戶成長。它告訴我們:

用戶的需求是永遠滿足不完的,所以什么值得做,什么是可分階段去實現的是決策人需要明白的。如喬布斯所說:“消費者并不知道自己需要什么,直到我們拿出自己的產品,他們就發現,這是我要的東西”;

不斷完善主要功能,以滿足金字塔頂的核心用戶群。決策者常常添加一些自己想要的而不是用戶想要的需求,比如在信息流中添加一個廣告位;

如何優化完善產品架構,檢驗產品策略的合理性和完整性;



防錯原則由世界著名的品質管理專家新鄉重夫提出,即在過程失誤發生之前加以防止,是一種在作業過程中采用自動作用、報警、標識等手段。使操作人員不用特別注意也不會失誤的方法。

防錯原則認為大部分的意外都是由于設計的疏忽,而不是人為操作失誤,可以通過優化設計把過失降到最低。該原則最初用于工業管理,后來應用于界面交互設計中,當使用條件沒有滿足時,常常通過功能失效來表示。


自動檢測提示

bilibili在登錄時輸入框沒有內容或沒有輸密碼時,登錄按鈕處于禁用的置灰狀態,只有兩者都滿足了才可以正常點擊。此外登錄功能就可能會有用戶名錯誤、密碼錯誤、網絡超時、郵箱錯誤等不同的錯誤。通常必須賬號和密碼同時滿足且匹配才能成功。


Twitter發帖時只允許用戶輸入140個字,為了提醒用戶,其解決辦法是在鍵盤上方的工具欄上顯示還能輸入幾個字符,超過會以負數警示。知乎發布文章標題過長時也會提示錯誤預警。


消除可能的失誤

防錯法則認為大部分的出錯都是產品設計的不夠優秀,而不該責怪用戶操作疏忽,通過設計手法可以把出錯率降到最低。防錯法則的核心觀點是,如何有效的在用戶出錯之前就盡量避免錯誤的發生。比如,美團外賣在接受短信驗證碼時,系統會自動提取驗證碼在鍵盤上方顯示,用戶點一下就可以自動填寫,省去了跳出應用——打開短信——記住驗證碼——再輸入的繁瑣過程,有效預防了出錯的機率。還有微信在綁定銀行卡時也是通過掃描銀行卡自動提取賬號,避免手動輸入的出錯率。


將失誤降至最低

二次確認,在一些比較重要的場景讓用戶二次確認,通常以彈窗的形式告知用戶再次讓用戶考慮自己的行為結果,進一步降低出錯率。例如,最近大家都在用的報稅App,會在提交信息前再次確認。


視覺暗示

可在視覺(置灰或隱藏)上屏蔽那些不能選的選項,避免用戶點擊后才報錯或點擊沒反應。


其次,一些不可恢復的操作,視覺上通常會給強標識。例如,刪除短信時的文字顏色“變紅”。


為用戶犯的錯買單

當用戶輸入錯誤信息時,比如打錯字,系統應該給予用戶想要的信息,而不是無動于衷,冷漠視之。


范圍限制

其實限制用戶的選擇并不是一個好主意,但是如果有明確的規則來定義可接受的選項,那么限制用戶可以輸入的類型是一個很好的策略。例如,Airbnb訂房可選日期和設置鬧鐘時的時間范圍。


研究得出,使用產品時有77.7%的錯誤都是人為的,防錯法則可以幫助設計師站在用戶體驗的角度考慮設計方案,做到操作前、中、后都有及時的反饋,預測到他們有可能發生的誤操作狀態,讓用戶更快完成目標,幫助用戶減少出錯率。



每次拿起U盤插入電腦時,我就呆住了,到底朝那個方向才是對的?

防呆(Fool-proofing)是一種預防矯正的行為約束手段,運用避免產生錯誤的限制方法,使出錯的機會降至最低,進而達到“第一次就把工作做對”之境界。


設計師應謹記:不要認為用戶是專家。比如,我們都知道“漢堡”圖標就是菜單,點擊這個按鈕就會調出某些功能。但是設計師忘記了普通用戶可能并不理解什么是漢堡包圖標、什么是面包屑、什么是抽屜式導航、什么是3Dtouch、怎樣雙指滑動。更何況普通用戶并不會研究App,在他們眼中產品只是眾多工具中的一個。因此,一定要把交互和設計做的簡單,通用的圖標、功能和交互方式最好保持用戶熟悉的樣子,減輕用戶重復學習的負擔。每個頁面應強調一個重要的功能而不應該讓用戶做選擇題,這些都是有效防呆的好方法。


△頁面的中主按鈕更突出


防呆設計是預防錯誤發生的方法,讓非專業、無經驗的用戶可以高效完成正確操作,不要讓用戶去思考,而是我們時時為用戶思考。



又被稱作“簡單有效原理”:“如無必要,勿增實體?!?

通俗點去理解“如無必要,勿增實體”可以理解為“不要浪費較多東西去做用較少的東西同樣可以做好的事情?!被蛘弑硎鰹椤霸谄渌麠l件相同的情況下,要求得越少的那個就越好,越有價值”。


應用到設計學領域,該法則認為做產品時功能上不可過于繁瑣,應該保證簡潔和工具化。例如,產品中為用戶提供了收藏功能是否就不再需要喜歡?提供了喜歡是不是不再需要收藏?一定要保證功能上的克制。不必要的設計元素會導致使用效率降低,還會增加不可預知的后果。建議在不損及功能的前提下,干掉多余的元素,當兩個設計方案都能達到設計目的時,選擇較為簡單的那一個有利于更好地傳達內容更好地用戶體驗。


總的來說,我們可以結合《簡約至上》一書中提到的刪除、組織、隱藏、轉移四個策略來將復雜的設計和體驗變得更加簡單。

刪除:關注核心,讓用戶注意力集中在自己要完成的目標上,刪除不必要的功能、流程和造成視覺混亂的元素等;

組織:繁瑣的功能通過分塊,被組織成清晰的層次結構。還記得我們前面說到的“7±2法則”嗎,把項組織到7加減2個塊中;分塊越少,選擇越少,用戶負擔約輕;

隱藏:隱藏那些主流用戶很少使用,但自身更新需要但功能。通過漸進展示和適時出現的方法減少干擾;

轉移:把合適的功能轉移到合適的設備上去。讓用戶感覺簡單的一個重要前提,就是先搞清楚把什么工作交給計算機,把什么工作留給用戶。




小測試,下列飲料中哪一種給你印象最深刻呢?文末揭曉。

可口可樂、雪碧、芬達、嶗山可樂、7喜、美年達


雷斯托夫效應又稱隔離效應(isolation effect),以及新奇效應(novelty effect),前蘇聯心理學家馮·雷斯托夫認為,某個元素越是違反常理,就越引人注意,收到更多的關注。


一樣東西與以往經歷明顯不同就產生了經歷差異。比如人生中的很多第一次,第一次高考、大學的第一天、初戀、第一份工作等等。該差異也會出現在新奇面孔、電話號碼記憶中。奇特的面孔和特殊的電話號碼更能被人記住。

該理論以多種不同的方式應用到設計中,最明顯的就是如果想要突出某個重點內容,就要使它特殊化,通過色彩、尺寸、留白、字體粗細等設計手段。利用對比來凸顯想要表達的重要信息。例如金剛區、tab欄的運營活動廣告,特殊化的設計讓它們在背景中脫穎而出。



個人中心的會員卡為了吸引用戶注意,增加開通率,都成了重點設計對象。


與以往不同的界面設計可以更加的吸引用戶,加深用戶的記憶,同時擴大了活動對用戶的影響力。例如每年淘寶的雙11首頁設計都與往常不同。


Google doodle 會在一些比較特殊的日子改變 logo 的設計,把logo設計成與這個日子相關的插畫或涂鴉,與平時的 logo 形成差異化,幫助人們更好地記住這個日子。


因此我們在界面設計中,若想讓用戶對哪個模塊或者是元素引起注意或點擊,就可以打破常規對該元素進行強調設計,使他在背景中脫穎而出。但是不要任何元素都強調,因為什么都強調就等于什么都沒強調,就沒有重點,所以要謹慎使用這個方法。


回到開篇的題目,答案是「嶗山可樂」。相比其他飲料,嶗山可樂遇到的少,反而成了最特別的一個了。你的答案是什么?歡迎在下方留言探討。




食之無味,棄之可惜

損失厭惡是指人們面對同樣數量的收益和損失時,認為損失更加令他們難以忍受。 同量的損失帶來的負效用為同量收益的正效用的2.5倍。比如,丟100塊錢的痛苦感要遠高于你撿到100塊錢帶來的幸福感,也就是說要至少撿到300塊才能平復之前的心情。


生活中類似的栗子還有很多,比如旅游時,雖然這個景點很爛,人們依然覺得來都來了,還是要看完再走才“不虧”;吃自助餐時,明明吃不下那么多,可想到花了那么多錢,就要盡可能的多吃才算“回本”,真是應了那句話:“食之無味,棄之可惜”;花了50塊買了張電影票,過了10分鐘發現是部爛片,就算在電影院睡覺也不愿提前走,覺得這50塊錢不能白花...


那么,該如何將“損失厭惡”賦能給產品設計呢?

最典型的莫過于電商App中的各類券滿天飛,比如:買二送一、3件7折、倒計時xx小時后恢復原價等等。商家就是為了營造現在不買就會錯過的套路,用戶也會覺得失之可惜。一年一度的天貓雙11,京東618,還有情人節、中秋節等各種有的沒的節日都是商家利用“損失厭惡”心理為基礎刺激消費。



我們App的用戶粘性不太理想,增加一個“簽到”功能吧,產品經理如是說。如是我們看到各種簽到得禮品,贏紅包等活動。中間還不能中斷,要連續簽到多少天才能得到獎勵,用戶也擔心中斷的損失。


某網盤下載文件時,會給你一個10秒VIP高速下載的體驗,計時過后又恢復到龜速,讓你恨的牙癢癢。雖然這招有點損,但用戶體驗到了VIP的快感,很多人還是會乖乖成為付費會員。


產品運營中會經常發一些優惠券,雖然知道自己不會用,也要先領了再說。這些券也都有時間限制,快過期的提醒也會加快用戶決策。還有0元開通會員,套路是第一個月免費,次月開始按正常價自動續費,典型的“騙”進來養肥了再“殺”。


人天生會對危險的,不好的東西避而遠之。如是我們就看到保險行業,他們會用一些負面信息(空難、車禍)刺激你,用戶就會產生焦慮,自然就想規避掉這些概率小的風險。例如購買機票時的意外險,QQ退出登錄時的提示。


還有就是有用戶自己的內容的東西,一般不會輕易舍去。拿我個人來說,飛書一直是我的寫作工具,后來看到幾個更好用的軟件,但要想到把原來的這么多東西全部轉移過去也是件很心累的事,太麻煩,還是繼續用飛書好了。QQ這個“古老”的軟件,估計很多人好久都沒打開過了吧,但是讓你刪了它,你還是不愿意的,因為那上面有很多青春的回憶。




用戶會將大部分時間花在其它網站上,因此他們會希望你的網站也能像他們已經掌握的其它網站一樣,擁有相同的使用模式和習慣。 

Jakob定律是由Jakob Nielsen提出的,他認為用戶在其他網站所積累的經驗教會了他們如何使用網站,所以他們會希望你的網站可以與那些熟悉的網站一樣,相似的使用方式,在使用你的產品、服務、內容和信息的時候,他們不會感到恐慌,而是輕車熟路。該原則鼓勵設計師遵循常見的設計模式,以避免混淆用戶或導致更高的認知成本。


例如YouTube2017年改版前后的對比,在新版中,網站框架和功能上幾乎沒動,只是在UI上做了順應新的設計準則,比如調整字體大小、顏色、欄目間距等。整體上和舊版沒太大區別,而且還給用戶提供了舊版的選擇。


在移動端App中也應如此,在具有相同功能的頁面,盡量保持一致。大到頁面底層框架(比如電商應用中的購物流程),小到UI設計中的一個按鈕,一個圖標,甚至一句微文案。


在設計產品時,要先延續大眾早已習慣的概念模型。然后再從自己的產品出發,對其進行改善。而不是從零開始制定自以為是的流程。

日常使用的各類修圖軟件,版式都高度相似,中間是圖片,各種濾鏡、貼紙、調整等功能都放在底部操作區域,很多相同功能的名稱都一樣。這是用戶最熟悉的布局,可降低用戶在同類軟件使用的學習成本提升使用效率。


也許你會質疑當所有產品都遵循相同都設計模式,會讓產品同質化嚴重,答案是必然的。此時需要深入了解用戶的目標和心智模型(用戶訪談、用戶畫像、用戶體驗地圖等),并將其應用到我們的產品設計中去,縮小我們與用戶心智模型之間的差距,從而獲得良好的用戶體驗。上文YouTube例子中,就是通過簡單的用戶授權(新舊版本選擇),避免了心智模型的不一致會帶來的問題,當用戶準備好隨時可以切換到新的版本。相反的案例Snapchat在18年設計改版時,因為新的布局未能確保改版前后用戶心智模型的一致性,導致大量用戶流向競爭對手Instagram那里了。


但是也要注意設備之間的差異,比如在移動端“漢堡包”式菜單是個不錯的方案,可是放到桌面端可能并不太友好,因為大屏幕可視范圍更大,小小的漢堡包圖標很容易被忽略,這時候平鋪出來可能會更好。


思考總結

1、用戶會把在其他產品使用中已熟悉的操作習慣轉移到另一個看起來相似的產品上;

2、利用現有的思維模型,使用戶可以專注于自己的目標上,而不是學習新的操作方式;

3、在進行必要的改版時,請給用戶過渡到新版本的機會,即可以選擇短時間內繼續使用舊版本;



看名稱挺拗口,另一種翻譯叫做“對角線平衡的和諧狀態”。它告訴我們瀏覽頁面是由左上至右下的視線流,左上角是視覺第一落點區,右下角是視覺最終落點區,因此右上角和左下角都是一個強烈的視覺盲點區,大多數時容易被忽略。


在進行信息排布時,將最重要的信息放在左上角,右上角和左下角添加輔助元素,右下角作為整個視覺落點可以展示重要操作。運用視覺元素來創建一條虛擬的“線”,讓用戶的視線跟隨左上到右下這條對角線移動,符合用戶習慣性的眼動規律。


古騰堡圖表應用最典型的例子就是商品詳情頁,在界面的頂部展示商品圖片、名稱、價格、快遞和優惠等用戶主要關心的信息;右上和左下通常是分享、客服和收藏等次要信息;右下角則放置最終促成用戶交易的購買按鈕。


我們都知道一般頁面按鈕都在界面底部是因為離手近,方便操作,但不僅僅如此。還因為瀏覽是用戶的第一行為,他們的視線會根據頁面元素進行移動,最終停留在底部結尾的地方。


看各種社交產品評論、點贊的位置,就知道產品希望用戶先干什么的想法。


彈窗的按鈕擺放一般都是左「取消」右「確認」,目的是讓用戶最快地看到主要操作內容。



















余額寶的「轉出」在左,「轉入」在右,畢竟誰也不想財往外流是吧。


既然如此,為什么“發布”頁面的按鈕都在右上角呢?因為發布頁是屬于“編輯頁面”,需要用戶謹慎操作,這里關注的核心應該是可編輯內容區域,而不是按鈕本身。


類似的例子還有很多,設計中與此視覺流與節奏規律相似的還有F型布局和Z型布局,合理運用這些節奏模式,使用者會跟隨你“設計”的視覺流和運動規律來瀏覽頁面,有效提高用戶閱讀的節奏和理解能力。




美國心理學家亞伯拉罕·馬斯洛(Maslow.A.H.)從人類動機的角度提出需求層次理論,該理論強調人的動機是由人的需求決定的。他將人類需求分成生理需求、安全需求、社交需求、尊重需求和自我實現需求,依此由低層次到高層次的過程。馬斯洛需求層次理論最大意義就在于,它告訴了我們,人在滿足了基本的需求之后,就要去實現更高的需求和目標。


馬斯洛需求層次理論有兩個基本出發點,一是人人都有需求,某層需求滿足后,另一層需求才出現;二是在上層需求未獲滿足前,首先滿足迫切需求,該需求滿足后,后面的需要才顯示出其激勵作用。例如,在能感受到愛之前,他們的生理和安全需求一定要得到滿足。


回歸到產品,一款產品,最核心的是解決用戶的需求。馬斯洛需求層次理論,為產品的需求分析指明了方向。

生理需求:滿足人的最基本需求,如衣、食、住、行、生理方面的需求。諸如美團外賣、淘寶、馬蜂窩等為日常生活提供方便的應用;

安全需求:人生安全、財產保險,也是強需求。如是各類投資理財軟件層出不窮。

社交需求:包括友情、親情、愛情多個層次,滿足人類社會關系,讓每個人不再是孤單的個體。如是微信、微博、Soul、探探、陌陌等不同類型的社交軟件多如牛毛;

尊重需求:每個人都有被尊重的需求,都希望展現自己,獲得人們認可。此需求可以深度結合在社交需求中。

自我實現:最高層級的需求,完成與自己的能力相稱的一切事情,實現自己理想的需要。結合到產品可以理解為能滿足自己外在展示(炫耀)的需求,如各類美顏軟件,美化后的照片曬到朋友圈,給人看到最好的一面。


由此規律可以看出,越靠近底層需求越是剛需,越往上,就變得越來越不必要,如自我實現,變得可有可無,不再是所有人的剛需。一個優秀的產品,深諳人性滿足用戶核心需求,才能形成持續穩定高用戶粘性的產品。




序列效應法則又叫系列位置效應,是指一種記憶現象: 在列舉項目時,排在最前面與最后面的元素,要比排在中間的更容易讓人記住。

因為人們對排在頭、尾的項目,要比排在中間的更容易記起來。比如我們都知道第一位登上月球的宇航員是阿姆斯特朗,卻很少人知道第二位奧爾德林;班級里我們一般都知道成績最好的第一名和倒數第一名,至于排在中間的很難記住。因此對排在開頭的項目產生加強的回想效果,稱為“首位效應”( primacy effect)。對排在結尾的項目產生加強的回想效果,稱為“近因效應”( recency effect )。


分類頁簽中,我們通常都會記得“精選”、“熱門”這類標簽,是希望給用戶進入App后看到的主要內容。這就是“首位效應”,把重要性高的內容放在首要位置。


我們都知道界面中“返回”按鈕放在左上角,除了操作習慣和防誤觸外,還因為它出現在頁面左上角最開始的地方,更長久地儲存在長期記憶之中,需要“返回”時能夠快速回憶出來。


tabbar數量不管是3個還是5個,用戶通常都會記得第一個“首頁”和最后一個“我的”,對排在中間的都會選擇性的忽略掉。


有時候新上一個功能,產品想提高它的位置引起用戶注意,會和“我的”互換位置。例如網易云音樂,新版本中把“我的”放在第三個tab,為了提升“云村”重要性,把它放置最后一個tab,正是利用了“近因效應”。


近因效應常用于及時進行反饋的設計界面中,比如點贊、評論、分享等功能置于底部不僅可加深印象,同時用戶在看到有趣的內容,想要評論或分享時,不用等到文章看完即可操作。從而增強內容粘性,提高互動率。


用戶的記憶具有系列位置效應,而且人的短期記憶非常有限,通過序列效應法則的應用,我們可以幫助用戶減輕記憶負擔。在排列項目時,把重要的放在首位或末尾,以達到最好的記憶效果。

文章來源:站酷  作者:Fyin印跡

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


如何撰寫高效的交互說明?

鶴鶴

定義:

交互說明是針對原型圖內容元素的補充解釋文字(包含交互邏輯描述、反饋狀態描述等) 

交互設計說明書由交互設計師完成編輯、修訂、發布的 
主要閱讀對象:產品人員、設計人員、研發人員、測試人員等,他們都是交互設計文檔的使用主角。 




不同角色的關注點:

產品經理
主要關注:交互邏輯、功能架構、交互事件、界面頁面流轉與內容布局等。這里的產品經理代表產品經理及以上管理層。 
注意要點: 為項目梳理清楚邏輯關系,文檔按照邏輯關系和功能架構分支等設置目錄講清楚項目、功能、組件、頁面流轉關系。

UI設計師
主要關注:說明文檔的具體頁面數量,因為這決定 UI 設計師出多少效果圖。另外,要看你的原型設計給 UI 設計師留了多少發揮空間,不要過于高保真。以及頁面元素是否統一規范便于提煉出典型頁面和設計規范。 
注意要點: 清晰合理的頁面功能布局,注意交互組件復用,頁面不同狀態描述清晰。

研發人員
主要關注:非常關心細節實現,關心有多 少個功能、多少個功能新特性、多少個頁面元素組件、多少個交互動效等, 但他不關心方案里一個輸入框里是用彩色還是黑白,因為他是具體功能的實現者。 
注意要點: 明確表示出關于功能設計、頁面邏輯、組件交互等信息的細節,例如:一個頁面刷新,要分為觸發刷新事件、刷新加載中、刷新成功提示、刷新失敗提示。其中失敗提示又要分多種情況:網絡不佳、程序異常等。如果你沒有提出明確需求,責任就會在需求方,而不是研發部門。

測試人員
主要關注:測試是依靠需求說明書和交互設計說明書,進行測試用例與測試腳本的編寫,在交互設計說明文檔里需要說明白每一個功能的交互動作與事件,測試是抓細節的,所以需要配一些說明性文字解釋交互設計的思路與實現路徑,這樣測試人員就可根據設計思路設計出測試用例。當然,測試用例分多種類型,這里指的是功能測試與邏輯測試,一些性能測試等需要依靠程序使用的軟件、數據庫等技術性的接口文檔來定。 
注意要點: 功能點、業務邏輯、界面元素、交互過程分解步驟。

上面解釋了各角色使用交互設計說明文檔的場景及他們期待的真實需求,我們需要清楚地了解這些內容,才能有針對性地撰寫交互設計說明。 
在交互設計過程中,上述四個角色會不斷有所交集。所以,一旦編輯文檔,就需要對這幾個角色有針對性地解釋和閱讀優化。 




清晰準確的交互說明,可以起到哪些作用:

1.減少交互設計師與產品上下游人員的溝通成本 
2.提升協作效率 
3.避免項目返工延期 




交互說明撰寫準則:

只寫最重要的: 

只針對有邏輯規則、異常狀態、特殊交互、分支流程、關鍵節點等進行說明。 
對于一些常識性、無異常點的地方不用堆積文字描述... 
交互說明畢竟是要給人看的,堆積的文字誰看得下去??只會帶來額外的閱讀壓力和極高的理解成本,交互設計師修改起來也麻煩。 


按模塊來展示說明: 

01.設計內容組件:對于重復性強、出現頻率高的內容,設置一個模板內容及說明即可。 
對于重復出現的地方,直接代替過去就行,可大幅度減少交互設計師的工作量,開發也方便理解。 

02.分頁面/位置來展示:當整體交互原型頁面較多時,不要全都鋪在同一個頁面進行展示說明,會顯得頁面臃腫、瀏覽費力??蓢L試:單獨展示某個模塊、分支流程、場景等下的交互稿。小而聚集,內容更精簡、理解更方便。 

03.若各模塊/分支流程/場景中的交互稿存在一定的關聯性,可以先做一張總體性的「概覽圖」,再去單獨展示。讓開發知道整體方案之間的關系、又能了解各個細分方案里的交互說明。 


復雜說明單獨展示: 

交互稿里總會有一些比較復雜、難以文字來說明的想法,像是一些動效、狀態等。 
對于這一些比較復雜的說明,可抽離出來進行對比、詳細描述,針對局部進行狀態效果描述,不必重復復制全量頁面。 
像一些按鈕或功能存在多種狀態時,也可用“表格/列表”的方式進行展示。 


交互說明的排版布局要有助于閱讀:

針對不同體量及復雜度的項目,交互說明一定存在多種排版布局方式。但要注意以下幾點: 
01.就近原則:交互說明盡量靠近所描述的原型圖(或具體功能點)采用數字標號對應描述。特殊情況下交互說明離頁面數字標注點較遠時,可用虛線連接引導閱讀動線。 

02.縱向展示:同頁面不同狀態/模塊及交互說明盡量縱向延伸展示,這樣更便于鼠標滾動查看。不要橫向平鋪太長。 

03.減少重復:對于相同的頁面框架/功能菜單僅部分模塊/狀態不同,可畫一張全要素主頁面示意,其余針對不同模塊/狀態拆解后,單獨對比展示,并補充交互說明。突出差異點,減少重復性元素的干擾。 

04.主次分明:交互說明樣式整體需要區別于原型圖頁面元素,可一眼區分。同時,對于交互說明也需要區分主要解釋和次要描述,讓不同查看者抓住重點。 

不同的排版布局方式各有利弊,所以具體采用哪種布局方式要根據所做項目的情況,以及開發人員的閱讀習慣而定。 


交互說明組件化: 

類似于設計的控件庫,我們在項目中寫交互說明寫多了就會發現,既然元素可以調用控件庫快捷使用,那么該元素的交互說明也可以歸類入庫,在需要的時候直接拿出來根據具體情況調整使用。這樣做的目的:使用時快捷調用,修改時快捷修改。 


有更改及時告知: 

若交互原型做了調整(包含交互說明),一定要告知團隊成員?。〔懨餍薷奈恢茫ㄔ谀膫€頁面)。 
否則產品、前端、后臺、測試等同事的相關想法、工作會停留在上個交互稿里。不要因為信息沒對齊而造成了不良影響。就算改了一處小東西,也盡量和同步一下。 




交互說明的三種樣式:

1.同一頁面內不同模塊描述

當同一頁面內存在多種狀態時,可畫一張全要素主頁面示意,其余針對不同模塊/狀態拆解后,單獨對比展示并補充交互說明 



2.頁面功能點邏輯規則描述
對于頁面中的元素和功能點描述可采用數字標號對應的形式,若面功能點較多且存在關聯時,可分組標號做統一說明 




3.頁面內細節簡短標注描述
用于描述頁面內功能點及元素的簡短說明(20個字內)大段說明文字不建議用此方式(易干擾頁面)… 

文章來源:站酷  作者:體驗為王UX

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

你要知道的交互成本

鶴鶴

交互成本是用戶在與網站交互中必須執行以達到其目標所需的精力(無論是精神上還是物理上)。

理想情況下,我們希望用戶訪問網站并在他們眼前找到他們正在尋找的答案。這將意味著零交互成本,并且是檢驗可用性的里程碑。

不幸的是,由于大多數站點和應用程序都提供了用戶可能想要做的許多事情,因此很少能達到零交互成本。大多數時候,用戶必須四處瀏覽,閱讀,可能滾動,找到有希望的鏈接,單擊它,等待頁面加載,然后重新進行整個過程。有時,一個新窗口可能會在現有窗口的頂部彈出,在這種情況下,用戶必須將注意力轉移到新窗口上,也許還需要回頭看舊窗口以將信息集成到兩個窗口中。在其他情況下,用戶可能需要記住一頁上的信息,然后將其應用于另一頁。所有這些動作都需要認知努力并彌補了交互成本。

可用站點將實現各種用戶目標所需的交互成本降至最低。也就是說,它們最小化:

  • 閱讀

  • 滾動

  • 環顧四周以查找相關信息

  • 理解提供的信息

  • 單擊或觸摸(不會出錯)

  • 打字

  • 頁面加載和等待時間

  • 注意開關

  • 內存負載-用戶必須記住的信息才能完成其任務


這些用戶動作對總交互成本的貢獻不同。它們的相對重要性可能取決于用戶-例如,閱讀障礙的用戶閱讀時間可能比點擊周圍的時間困難,而操作障礙的用戶可能會覺得點擊困難。它們還取決于設備-連接到高速網絡的臺式機上的頁面加載可能微不足道,但是如果蜂窩網絡覆蓋較慢,則移動設備上的頁面加載可能會花費很長時間。

許多可用性準則都解決了使交互成本的各個組成部分最小化的問題。例如,網絡寫作規則通過推薦要點和簡短的要點句子和段落來降低閱讀成本。

交互成本示例

讓我們舉一個簡單的例子。假設我們要查找“儀式”一詞的來源。我們將使用Dictionary iPhone應用程序執行此任務。我們將忽略在手機上查找應用程序所涉及的成本,并且在啟動Dictionary應用程序后立即開始分析。

啟動應用程序后出現的第一件事是啟動屏幕。


在這一點上,交互成本包括等待幾秒鐘,以使啟動屏幕消失并為應用程序的第一個可操作屏幕騰出空間:


在此頁面上,互動成本來自定位搜索框。幸運的是,搜索框非常顯眼地位于頁面頂部,因此我們可以放心地認為,用戶只需很少的精力就可以找到它。找到后,用戶需要觸摸搜索框以將輸入焦點移到搜索字段中。搜索框是一個相當大且易于觸摸的目標,因此交互成本也可能會降至最低。


接下來,用戶必須編輯搜索查詢。

當輸入焦點在搜索字段中移動時,自動建議的詞將自動顯示。

用戶必須查看自動建議并確定它們不相關,然后清除當前查詢。他們可以通過按右側的灰色x按鈕(如果他們熟悉iOS規則)來執行此操作,也可以通過按觸摸屏上的Delete鍵來逐個清除字符。

刪除后,用戶將開始輸入目標詞“儀式”。當他們開始輸入內容時,關聯詞會顯示在下方。用戶可以檢查關聯詞并決定是否要繼續鍵入或停止并選擇關聯詞。


選擇(或鍵入)單詞“ ceremony”后,用戶必須按Search進入結果頁面。他們需要等待片刻才能顯示新頁面:


用戶必須推斷Origin可能包含有關單詞來源的信息。(對于大多數用戶而言,這是一個簡單的推論,因此認知成本很低;但是,如果改用“詞源”一詞,則某些用戶可能會在閱讀和理解其含義時遇到更多麻煩;因此,“來源”是更好的選擇,因為它降低了交互成本。)



讓我們總結一下交互成本的各個組成部分,以找到“儀式”一詞的由來:

  1. 等待啟動頁面

  2. 搜索

    1. 輸入幾個字符

    2. 掃描自動提示列表,以查看所需單詞是否在其中

    3. 如果否,請輸入更多字符并在上一步中重復

    4. 如果是,請通過點擊選擇所需的單詞

    5. 找到搜索框,然后點擊將輸入焦點移至該搜索框

    6. 閱讀搜索框中顯示的查詢和自動建議

    7. 決定查詢不相關

    8. 刪除搜索框中顯示的查詢

    9. 鍵入或選擇自動建議

    10. 點擊搜索

  3. 等待結果頁面

  4. 在結果頁面上找到相關的詞源信息

    1. 向下滾動頁面并掃描內容以查找詞源信息

    2. 找到標簽并閱讀

    3. 請注意,右側還有更多隱藏的標簽

    4. 推斷詞源可能是隱藏的標簽之一

    5. 注意到滑動會向右暴露內容

    6. 向右滑動

    7. 閱讀Origin并將該單詞與目標聯系起來,以找到單詞的來源

    8. 點擊詞源

  5. 了解“儀式”一詞的來源

如您所見,一個相當簡單而輕松的過程需要很多步驟和子步驟;他們每個人都會產生互動費用。對于某些人而言,交互成本微不足道-例如,記住人們向右滑動即可顯示更多內容,因此交互成本非常低,因為人們在移動設備或Web上已經多次遇到水平滾動??梢詢灮渌襟E以最小化交互成本;因此,在搜索框中使用灰色的小x按鈕可以大大降低刪除顯示在搜索框中的查詢的成本。同樣,將按鈕調大可以幫助點擊目標。選項卡的位置和外觀設計會影響人們找到選項卡的速度。(當然,選項卡本身的選擇與使用其他方式來構造內容的方式也會影響用于在結果頁上查找相關信息的位置的交互成本。)


預期效用

請注意,對于前面各節中的某些步驟,用戶可以有多種選擇。例如,他們可以按灰色的x按鈕刪除當前字符串,也可以多次使用Delete鍵?;蛘?,他們可以從自動建議列表中選擇建議,也可以在最后輸入字符串。

人們如何決定采取哪種行動?答案在于預期效用的概念:

預期效用=預期收益–預期交互成本

用戶嘗試最大化一項操作的預期效用:換句話說,他們權衡了每個操作的收益和成本,然后選擇收益與成本之間最佳平衡的方案。

當有幾種方法可以實現具有相似利益的相同目標時,用戶通常傾向于選擇使估計的交互成本最小的操作。



例如,許多人可能不會在自動提示列表中向下滾動以找到“儀式”一詞,而是可能會再鍵入一個(或幾個)字符,直到可見“儀式”一詞為止,因為向下滾動小列表和掃描列表中的正確單詞比擊中一個甚至幾個字符的成本更高。


這種類型的想法也普遍適用于站點級別。如果看起來真的很難在任何給定站點上實現其目標,則除非與初始站點進行交互的收益確實很高,否則大多數用戶只會以較低的估計交互成本轉移到另一個站點。舉個例子,如果用戶真的想購買Apple電腦,他們可能會堅持使用Apple的網站,因為他們不太可能在其他地方購買。在這種情況下,用戶的動機確實很高,因此他們可能愿意忍受很高的交互成本。但是,如果用戶要購買燒烤架,則可能不在乎是否從Home Depot或Lowe's或其他站點購買,并且會離開互動成本高的站點。

營銷和品牌推廣通常會增加與特定網站或品牌互動的用戶動機和預期收益;可用性可以降低交互成本。兩種方法最終都解決了增加使用站點或軟件的預期效用的問題。

為什么您應該關心交互成本

交互成本是可用性直接度量。實際上,該概念早在人機交互時就被引入,以評估軟件系統的可用性。所有的可用性啟發將用戶的交互成本降至最低。

從長遠來看,快速評估設計的交互成本可以節省大量資金,因為它可以很好地衡量用戶界面的難易程度。它也可以用作設計備選方案之間比較工具:通常,將交互成本最小化的方案具有更大的成功機會。

文章來源:站酷 作者:ZZiUP

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


日歷

鏈接

個人資料

藍藍設計的小編 http://m.skdbbs.com

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
精灵使的剑舞无删减版在线观看| 国产激情偷乱视频一区二区三区| 精品一区二区三区在线观看视频| 日韩精品一区二区三区视频在线观看| 久久国产精品一区二区| 黄页视频在线播放| 欧美亚洲爱爱另类综合| 亚洲欧美999| 国产一区二区三区在线观看免费视频| 亚洲精品xxx| 欧美性猛交xxxx免费看漫画| 丁香花高清在线观看完整版| 欧美做受高潮1| 国产精品99久久久久久似苏梦涵| 91黄色免费网站| 黄色另类av| 亚洲综合久久久久| 国产精品久久久久国产精品日日| 777亚洲妇女| 麻豆91在线| 涩爱av色老久久精品偷偷鲁| 波波电影院一区二区三区| 日韩精品电影在线| 小处雏高清一区二区三区| 1024亚洲合集| 26uuu日韩精品一区二区| 米奇精品一区二区三区| 成人午夜激情视频| 91精品国产一区二区三区蜜臀| 丝袜美女在线观看| 亚洲免费影视| 欧美午夜影院| 国产精品乱码久久久久久| 欧美在线看片a免费观看| 成人婷婷网色偷偷亚洲男人的天堂| 在线电影欧美日韩一区二区私密| 亚洲码欧美码一区二区三区| 欧美一级淫片播放口| 欧美一区二区网站| 欧洲av一区| 免费不卡视频| 欧美一区在线视频| 91免费高清视频| 日韩中文字幕国产精品| 国产精品欧美一区喷水| 精品久久久久久久久久岛国gif| 蜜臀av一区二区在线免费观看| 国产精品久久久久久av下载红粉| 日韩欧美一区二区不卡| 久久久日本电影| 992tv在线成人免费观看| 国产成人精品一区二区三区四区| 久久99导航| 欧美oldwomenvideos| 亚洲精品久久久久久国产精华液| 国产精品96久久久久久| 性欧美视频videos6一9| 成人涩涩免费视频| 91入口在线观看| 欧美性xxxxxxxxx| 精品国精品国产| 色综合天天综合网中文字幕| 欧美精品久久| 成人美女大片| 好吊色欧美一区二区三区视频| 国产精品99免视看9| 亚洲福中文字幕伊人影院| 国产日本欧美视频| 国产精品久久久久久久7电影| 欧美一区二区三区四区夜夜大片| 亚洲激情中文字幕| 亚洲一区二区三区高清不卡| 91最新在线免费观看| 视频一区视频二区视频| 一区在线中文字幕| 国产高清在线精品| 视频一区日韩精品| 91精品国产美女浴室洗澡无遮挡| 国产精品久久久久一区二区国产| 国产一区二区三区四区五区| 日韩小视频在线观看| 国产精品扒开做爽爽爽的视频| 国产在线国偷精品免费看| 成人深夜直播免费观看| 欧美在线综合视频| 欧美日韩国产另类不卡| 亚洲在线国产日韩欧美| 国产99re66在线视频| 国产亚洲精品中文字幕| 久久人91精品久久久久久不卡| 五月婷婷视频在线观看| 成人高清免费观看| 精品三级在线观看视频| av不卡在线看| 亚洲美女免费视频| 小小影院久久| 激情久久一区二区| 国精品**一区二区三区在线蜜桃| 久久99精品国产99久久6尤物| 久久久久免费视频| 日本中文字幕在线一区| 精品久久久久久亚洲| 黄在线观看免费网站ktv| 成人在线视频www| 日韩久久久久久| 亚洲欧洲中文日韩久久av乱码| 高清视频一区二区三区| 高h视频在线观看| 国产日韩成人精品| 北条麻妃久久精品| 新呦u视频一区二区| 在线播放日韩精品| 午夜久久久久| 91视频国产资源| 亚洲精品高清视频在线观看| 欧美日本一区二区| 欧美日韩视频免费看| 91精品视频播放| 欧美日韩精品免费在线观看视频| 亚洲xxx视频| zzijzzij亚洲日本少妇熟睡| 欧美+日本+国产+在线a∨观看| jk漫画禁漫成人入口| 成人免费高清完整版在线观看| 麻豆91精品91久久久的内涵| 麻豆国产精品va在线观看不卡| 久热re这里精品视频在线6| 国产精品一区二区免费福利视频| 洋洋av久久久久久久一区| 亚洲第一黄色| 国产精品99免视看9| 少妇精品久久久| 日本大胆在线观看| 欧美大片高清| 菁菁伊人国产精品| 天堂一区二区三区| 在线播放亚洲| 国产精品对白刺激久久久| www视频在线看| 亚洲精品一区二区三区福利| 国产伦乱精品| 免费看成人午夜电影| 999成人网| 欧美日韩在线免费观看| 欧美aaaaaa| 久久―日本道色综合久久| 久久久久久久尹人综合网亚洲| 亚洲精品一区二三区不卡| 免费看黄裸体一级大秀欧美| youjizz欧美| 亚洲激精日韩激精欧美精品| 天天影视久久综合| 国产美女娇喘av呻吟久久| 欧美猛交ⅹxxx乱大交视频| 欧美电影免费观看高清完整| 国产成人一区二区三区影院| 免费萌白酱国产一区二区三区| 亚洲综合激情网| 激情国产一区二区| 国产一区二区三区精品久久久| 国产三级欧美三级| 2019中文在线观看| 国产精品对白一区二区三区| 久久夜色精品国产|