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

在無線產品中,一些普適的交互設計原則及實踐

本文作者將逐條列出其總結的無線產品設計領域應當遵循的的一些基本原則,並在每條原則下輔以實例說明以便理解。

開始正文之前,再次明確一下什麼是交互設計,我認為交互設計可以狹義理解為人與設備或系統交流以便完成特定任務的過程。 可以看到這則簡單定義里交互設計至少包含兩方參與者,即人與設備(或系統),例如:人可以是男人、女人、老人、小孩、學生、白領等等……系統或設備可能是手機、電腦、手錶、電視、冰箱、門、窗等任何物品。本文中所指的交互設計的雙方參與者粗略的界定為智能手機的主流用戶(熟悉一般智能的手機的使用)和智能手機:

  • 智能手機的主流用戶:有智能手機的多年使用經驗,已使用過多部智能手機,熟悉系統的常規操作方式,對多數主流應用都有過使用經驗
  • 智能手機:擁有較為複雜的智能操作系統,相對強大但一般低於PC的運算能力,集成多種晶元或外設(如GPS、陀螺儀、揚聲器、麥克風、藍牙、閃光燈等等……)

如孫子兵法說——道為術之靈,術為道之體;以道統術,以術得道。本文將逐條列出我總結的無線產品設計領域應當遵循的的一些基本原則,並在每條原則下輔以實例說明以便理解。

原則一:盡量減少讓用戶輸入文本內容次數

現在的智能移動設備多無實體按鍵,文本鍵入效率不高,頻繁要求用戶輸入文本內容無疑將增加用戶使用成本。好的交互設計應儘可能少的要求用戶鍵入文本內容。

方式1:使用滑動或點擊代替輸入字元驗證碼:這類校驗的主要目的是確定執行登錄或註冊的是人而非破壞程序,在滿足目的的前提下以下幾種驗證方式能夠減輕用戶操作的複雜度

圖 1 鹹魚的安全校驗

圖 2 人人都是產品經理網站的註冊過程中的拼圖式驗證

圖 3 12306的點擊驗證

方式2:註冊不做密碼校驗(少一次輸入),並支持輸入密碼明文顯示。傳統的密碼校驗是為了避免用戶實際輸入的密碼與期望不一致,導致無法登陸。早期的互聯網賬號往往要求有各自的用戶名和密碼,密碼一旦忘記找回成本非常高。而近年來隨和手機和郵箱的普及,忘記密碼后的找回成本已大大降低,所以即便出現了實際輸入的密碼與期望不一致的情況也很方便的便可重設密碼。且因為手機相對於電腦,其隱私性更高,所以對於大多數用戶而言註冊僅輸入一次密碼且支持明文回顯可提高用戶註冊過程效率。

圖 4 Keep的明文密碼

方式3:自動讀取簡訊獲取簡訊驗證碼:簡訊驗證碼的目的是驗證用戶填寫了真實的手機號碼,而應用自動讀取簡訊並填寫驗證碼在不違背此目的的前提下減輕了用戶操作複雜度。這個功能曾經流行過一段時間,但現在很少能夠看到了,推測原因可能是系統升級後有所限制或出於某些安全方面的原因考慮,但如若僅從交互設計上考慮,這仍是一個有效的提高用戶效率的方法。

方式4:解鎖使用手勢、指紋而非字元密碼,對於大多數的二次身份驗證型場景——如登錄用戶解鎖屏幕來說,並不需要文本密碼那樣高級別的保密形式,而手勢密碼則可較好的在解鎖便捷性與保密上取得折中。而指紋密碼則優勢更加明顯——保密係數更高,授權操作更簡潔,只是它需要依賴更多的硬體支持,而指紋硬體現階段普及程度有限。

圖 5 支付寶的手勢解鎖

圖 6 微信的指紋支付

方式5:將大段的必須錄入的文字內容轉移到PC端,如求職產品新用戶在無線端填寫個人簡歷時,可將其引導到PC端進行操作(交互設計四策略——策略)。

原則二:多考慮手勢操作,避免功能即按鈕的設計

相較於電腦而言,手機的屏幕空間十分有限,而目前手機端產品所提供功能的全面程度卻與PC端程序相差無幾,而如若將這些功能全部顯示在手機幾寸大的小屏幕上,可能很多控制項的可操作性會變得很低,這個時候應當考慮使用一些通用的手勢代替界面上的控制項。

方式1:視頻播放工具在全屏狀態下左側區域上下滑動調節屏幕亮度,右側區域上下滑動增減音量,左右滑動快退或快進。示例:手機暴風的視頻播放界面。

方式2:點擊閱讀工具型產品文本內容顯示區域左側向前翻頁、右側向後翻頁區、中間區域顯示已隱藏的更多操作或工具欄。示例:京東閱讀的文章閱讀界面。

方式3:人人都是產品經理可在文章末尾繼續向上滑動時切換到下一篇文章。

方式4:36氪在文章末尾繼續向上滑動返回到文章列表。

方式5:鳳凰網圖片瀏覽時左右翻頁、向上滑動返迴文章列表。

原則三:盡量選擇符合系統的既有使用習慣交互形式

雖然有一些創新的交互方式確實帶來了使用效率上的提升,甚至被系統借鑒,但在在對標新立異的設計沒有足夠信心的情況下還是應該遵守系統已有的交互設計形式。因為用戶在面對新功能時往往習慣使用原有的思維模式和使用方式來嘗試使用它,如果功能能夠按照系統交互形式進行設計,將能夠大大降低用戶的學習成本,並大大提升用戶在嘗試過程中的成就感。

方式1:向左滑動列表項展示更多操作(標記、刪除等)

圖 7 IOS向左滑動顯示操作

圖 8 支付寶賬單向左滑動顯示更多操作

方式2:點擊狀態欄回頂部,IOS系統中在列表頁面點擊頂部的狀態欄(運營商-時間-電池用量)可以返回到列表開始位置。

原則四:充分考慮利用外設硬體提升體驗

方式1:閃光燈可用做照明 示例:ofo的手機端解鎖頁面提供了照明功能(此功能可進一步優化為通過感光元件獲知環境光線明暗,自動開啟照明)。

圖 9 ofo開鎖界面的照明功能

方式2:O2O產品一般非常看重其推薦體系的推薦精準性,而常見的推薦模式一般分為兩類,即按照用戶喜好接近程度進行推薦和按照用戶喜好元素與商家具備元素的匹配程度進行推薦。前者判斷用戶喜好程度的標準一般需要根據用戶行為來定義,而到店消費無疑是應該給予分數較高的一種行為,那麼怎樣識別用戶確實到店消費了呢?常規辦法可能看用戶是否有過支付記錄,然而並非所有的用戶都會在O2O平台進行支付,那麼這個時候通過判斷用戶是否接入過合作商家的WiFi作為確認其是否到店消費的補充依據,便可在一定程度上作為確認行為的補充依據。而這正是一種無須用戶感知便達到企業目的的交互方式。

方式3:陀螺儀可以識別設備翻轉方向,那麼提供橫屏界面的產品可以通過陀螺儀數據實現自動翻轉,這樣例子比較多,播放器算是其中一類。遊戲方面對陀螺儀的使用則更加深入。

對移動設備外設的使用方式還有很多,文中不再一一列舉。

原則五:考慮單手操作

手機屏幕近年來有愈發變大的趨勢,雖然手機屏幕變大意味著可視區域隨之變大,但對於習慣或者不得不單手操作手機的用戶或場景,變大意味有些應用的按鈕或空間很難實現單手操作,這就需要應用開發者在交互設計上有充分的考慮,以便用戶在單手使用手機時仍能方便的完成需要的操作。具體形式很多,需要視產品而定,這裡僅舉一例:鳳凰新聞客戶端的左下角返回按鈕。

圖 10 鳳凰新聞的返回按鈕

小結

本文是以智能手機的主流用戶(熟悉一般智能手機的基本使用)和智能手機作為交互設計的雙方為前提,在不深入考慮具體業務流程和使用場景的前提下的一些普適的通用解決方式。但需要注意這是一些一般環境下相對普適的交互設計方式,這些設計方式可能在很多場景下適用,但在你考慮引入到自己的產品設計中之前,務必確保你已明確參與交互設計的雙方是誰(Who)、以及在什麼場景(Where&When)下為達到什麼目的(Why)要完成哪些任務(What),而你的交互設計應當服務與此(How)。

篇幅有限,未完待續……

本文由 @我是開水 原創發佈於人人都是產品經理。未經許可,禁止轉載。



熱門推薦

本文由 yidianzixun 提供 原文連結

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