互動設計經驗談:行動裝置 App互動設計原則

來源:互聯網
上載者:User

文章描述:設計在很多時候都是靠靈感的閃現,行動裝置 App的設計則更加的靈活多變,如何能更好地設計出一個應用,沒有具體的方法和成規。但是,為了能更好地避免設計師們走彎路,設計原則的學習是有必要的,它給了設計師們一定的參考和指導。

 摘要:互動設計專業也有了蓬勃發展,Ben Shneiderman 提出的互動設計”黃金八法”和Nielsen 的”啟發學習法評估10條原則”為互動設計的評估提供了標準。我們在考慮其他原則的基礎上,整理了八條行動裝置 App設計的針對性原則。

      
  本文節選自《移動設計》一書,傅小貞,胡甲超,鄭元攏著,由電子工業出版社出版。

  近幾年,互動設計專業也有了蓬勃發展,Alan Cooper、Donald Norman等人為互動設計提供了許多理論上的支援,Ben Shneiderman 提出的互動設計”黃金八法”和Nielsen 的”啟發學習法評估10條原則”為互動設計的評估提供了標準,所有這些理論和原則在行動裝置 App的設計上依然是通用的。但行動裝置 App有其特殊性,在裝置和情景上都與普通的設計不同。因此,我們在考慮其他原則的基礎上,整理了八條行動裝置 App設計的針對性原則。

內容優先:介面布局應以內容為核心,提供符合使用者期望的內容。
為觸摸而設計:介面的互動系統以自然手勢為基礎建構,符合人體工學並保持一致性。
轉換輸入方式:使用各種手機的裝置特性和設計手段,減少在應用內的文字輸入。
流暢性:保持應用互動的手指及手勢的操作流、使用者的注意流和介面反饋轉場的流暢性。
多通道設計:發揮裝置的多通道特性、協同的多通道介面和互動,讓使用者更有真實感和沉浸感
易學性:保持介面架構簡單、明了,導航設計清晰易理解,操作簡單可見,通過介面元素的表意的和介面提供的線索就能讓使用者清楚地知道其操作方式。
為中斷而設計:考慮應用的使用情境,確保在各個產出中斷的情境下,讓使用者恢複之前的操作,保持使用者的勞動付出。
智能有愛:給使用者提供讓他感到驚喜有趣的、智能高效的、貼心的設計。

一、內容優先

  對於手機而言,螢幕空間資源顯得非常珍貴。為了提升螢幕空間的利用率,介面布局應以內容為核心,而提供符合使用者期望的內容是行動裝置 App獲得成功的關鍵。如何設計和組織內容,使使用者能快速理解行動裝置 App所提供的內容,使內容真正有意義,這是非常重要的。

重組內容,使內容符合移動的特徵

  在PC上的網頁內容往往相對複雜,在進行內容移動化時,並不合適把內容直接照搬到手機端。在進行行動裝置 App設計時,應該重組內容,使其符合行動裝置 App的特徵。

  行動裝置 App的內容應使用使用者的語言,以使用者熟悉的維度來組織內容,這樣更容易尋找目標資訊,提升內容的利用率;刪除無關的多餘內容,讓內容更簡潔清晰,考慮在小螢幕空間可以合理的布局,增加螢幕的利用率;內容要是清晰和具體的,是使用者恰好需要的;內容要是有情景特徵的,可以在不同的情景下給使用者提供不同的情景下的內容。

優先突出使用者需要的資訊,而簡化介面的導航

  一個應用提供給使用者的資訊往往是太多而不是太少,設計師們的關注重點也會轉移到如何讓使用者找到內容,而忽略了能給使用者獲得價值的是內容,而不是導航。

  在行動裝置 App設計時,我們更為關注的是使用者需要的內容,其次才是導航。在內容本身複雜而多變的時候,如何讓使用者能更快速地擷取恰當的資訊,在移動情景中會顯得很重要。

適時提升螢幕空間的利用率

即使使用者的視覺注意點集中在內容上,在設計方面也要把螢幕資源更多的給內容而不是導航。只是在恰當的時候,可以讓使用者呼出導航即可。

二、為觸摸而設計

  點擊操作是PC 時代互動的基礎,在觸屏裝置上基於手指的手勢操作已經代替了滑鼠的點擊操作。手勢操作靈活多變、互動自然,但也帶來識別性差、操作精度不高等缺點,都需要一些手勢設計的基本原則來指導和完善。

以資訊架構為基礎,建立手勢互動規範

  在一個行動裝置 App中,手勢的統一性非常重要。讓使用者在應用的任何介面中都知道怎麼使用手勢,並達到預期的結果。這需要設計師提供一套基於應用資訊架構的手勢規範,它將是導航與互動的基礎。下面我們以Clear 為例來講述一下手勢的架構設計。

Clear 這個應用的三層導航架構在整個互動架構上,都是以手勢為基礎。

這裡可以對Clear 的互動設計進行分析。

  第一部分就是它的導航邏輯。它的導航邏輯以手勢架構為基礎,層級導航向下時為Tab 點擊,層級向上返回時為在List 頂部向下在拖動一定距離。整個應用的導航邏輯統一,使用者只要在一個地方學會了操作,在整個應用中都能快速上手。

  第二部分就是細節互動。它也是以手勢為基礎,新增操作就是在列表頂部向上拖動一個項目距離,刪除操作是從右向左拖動項目到一定距離,設定是從左向右拖動項目到一定距離。

  總的來說,Clear 這款應用的導航架構與手勢架構邏輯都比較清晰,操作一致性較高,易學性強。

  在應用設計時,完成資訊架構設計後,也要思考應用手勢的架構,使基於手勢的導航能與資訊架構整合一體,讓使用者方便、快捷地找到內容。

優先設計自然的手勢互動,而不只是Tap 點擊

  在行動裝置 App的設計過程中,我們可以發現大多數的應用在手勢的使用上都是非常保守的,基本上以Tap 點擊為主,類比在PC 上的操作方式。但是,作為以觸屏為基礎的設計,如果只使用Tap 點擊的形式,不能完全體現出自然的互動操作。我們建議在設計時,能更多地思考出一套適合自己應用的手勢互動形式,使使用者在操作的過程中能更自然、更高效。

引導使用者在情景中學習手勢操作

  由於手勢在介面上是相對隱藏的操作類型,需要使用者的探索和學習。因此,除了基本的使用者都熟知的手勢外,其他手勢在使用時都需要給出提示和引導。手勢操作基於程式性操作知識,最好的學習方式就是通過實際操作來理解和記憶。因此在手勢引導設計上,更多的是以指導使用者操作的方式來做,能讓使用者快速掌握。

特殊手勢不是必須的

  蘋果的Mac OS 提供了很多快捷操作方式及手勢的互動形式,這些多指的手勢能讓專家使用者的操作效率得到大幅度提升。新手卻很難記住所有的手勢,但是這並不影響他們使用Mac 系統,因為系統都提供了滿足於新手的互動解決方案。在行動裝置 App的設計上也會採用一些個人化的、不屬於各個作業系統規範裡定義的手勢,在某些情景中使用也會非常合適。但是特殊手勢應作為快捷操作的形式存在,使用者不使用它也能完成任務。特殊手勢的使用能提升產品的互動效率,或者給出有趣的體驗,但是它們不是必須的。

可觸地區必須大於7×7 mm,盡量大於 9×9mm

  在觸摸操作設計時,我們已經知道在介面中的可觸物理地區不應小於7~9mm。為了讓使用者能在各種情景下都能容易操作,我們建議可觸地區不應小於9mm。但是可觸地區不同於在螢幕中直接呈現的物理大小,為了視覺及審美的需要,有時設計師會把螢幕元素設計得較小,這也是允許的,實際的可觸地區可以大於螢幕元素呈現給我們的大小。我們需要控制可觸地區的空間,在可觸地區中都可以觸發使用者的操作。

手勢操作要提供過程反饋提示

  在觸屏介面上,由於手勢操作是隱藏在介面中的,使用者必須去嘗試才能知道真實的效果如何。因此,在使用者手勢操作過程中反饋顯得非常重要,他們需要反饋才能知道手勢是否有效,也才能知道操作後獲得的結果。

三、轉換輸入方式

  文字輸入是移動端的軟肋之一,不管是手寫輸入還是鍵盤輸入,操作效率都相對較低。在行走或者單手操作時,輸入的出錯率也比較高。如何在應用設計時避免文字輸入,或者使用一些代替方案來提升輸入效率,在行動裝置 App設計中顯得尤為重要。

減少文本輸入,轉化輸入形式

  在數字輸入過程中,常常會把文字的輸入轉化為基本的手勢輸入。手勢操作會以更快的形式進行輸入,提升了輸入的效率。如下面的兩個例子在移動輸入的改進方面提供了協助,天貓用戶端的價格輸入轉化為手勢拔動;在Black Berry 的IME中,當使用者輸入某個字母后,系統會給使用者提供該字串開始的推薦詞,使用者手指拔動就可以完成詞語輸入,省去了後面字串的點擊輸入,提升了效率。

簡化輸入選項,變填空為選擇

  在設定輸入或者對於一些已知項目的輸入中,盡量把使用者要輸入的內容變成選擇。如已有帳戶的登入過程,讓使用者選擇而不是輸入。日期、地址等本身可以轉化為選擇項的內容,盡量使用選擇輸入。盡量把使用者的常用選項篩選出來讓使用者選擇,而不是直接讓使用者輸入。

使用手機已有的感應器輸入

  使用語音、掃描識別(二維碼、條碼、文字等)、LBS 技術來減少使用者的輸入,給使用者提供便利。我們在進行輸入設計時,多轉換思維,發揮各個感應器的基本特性並靈活運用,把難以輸入轉化為簡單智能的輸入形式,使使用者能更便捷地使用。

四、流暢性

  在行動裝置 App的操作過程中會碰到多種多樣的情況——找不到目標、不知道該怎麼操作、操作後沒有及時反饋,等等,這都會對應用的流暢性造成影響。在行動裝置 App的設計中主要從三個方面來考慮應用的流暢性,即手指及手勢的操作流、使用者的注意流和介面反饋的轉場流暢性。

  當把使用者完成任務的操作觸點串連起來就能組成一個完整的操作流,我們可以通過操作路徑來判斷介面的流暢性,操作路徑短能在一定程度上被認為是操作效率更高、流暢性更好。使用者在操作介面時,注視點轉移形成的焦點流連起來後就形成了注意流,注意流是否圓滑也是判斷介面是否流暢的重要標誌。

  注意流大幅跳躍的介面一般被認為是介面元素的布局不夠合理,需要讓介面元素重新布局或者設計更好的注意引導機制,讓注意流更圓滑。在本書的番外篇”流”中我們將探討了一種行動裝置 App的流設計方法,就是在操作流和注意流的基礎上來討論更自然流暢的設計體驗。

五、多通道設計

  多通道設計是指系統的輸入和輸出都可以由視覺、聽覺、觸覺等來協作完成,協同的多通道介面和互動也會讓使用者更有真實感和沉浸感。當前各個系統平台下的基礎技術已經越來越成熟,語音輸入、手勢識別及其他由多種感應器組成的綜合識別系統也會給使用者帶來更自然的感覺。設計師們在思考時,也可以從其他通道的角度來思考設計,給使用者一個更好的互動方式。

  多通道的設計在多數情況下都需要有深厚的技術功底做支援,新創團隊也需要較多的積累才可能達到。

六、易學性

  對於行動裝置 App產品,提倡的是簡單、直接的操作,傾向於清晰地表達產品目標和價值。讓使用者快速學會使用,盡量不要讓他們查看協助文檔。保持介面架構簡單、明了,導航設計清晰易理解,操作簡單可見,通過介面元素的表意的和介面提供的線索就能讓使用者清晰地知道操作方式。只有這樣的設計,才能讓使用者的學習使用沒有負擔,而不是通過協助系統來教會使用者操作。

  現在行動裝置 App的協助頁面幾乎成了必不可少的元素,在應用中都植入了操作引導介面,其實這完全沒有必要。有些產品會出於各種原因,不得不設計協助頁面,以免使用者在開啟後不清楚應用是做什麼的、不知道是怎麼操作的而放棄使用。

  其實這些頁面在設計時就要考慮移動端的使用者行為和使用情境,因為使用者可能沒有那麼多時間仔細去看說明,而是試圖快速地瞭解應用本身。許多應用程式更新後,都會發現啟動頁後有許多協助內容,有些應用甚至提供了8、9 屏的內容或者各種操作說明,使用者既沒有耐心看,也很難記得住這些操作,我們建議最好不要超過3 屏內容,且要有快速退出的操作。

  對於功能引導設計,更好的協助設計是把新功能的提示與產品本身做更完美的結合,這樣使用者在他剛好要使用的情境下獲得提示,讓使用者感到友好並不突兀,這樣的設計更合適。

七、為中斷而設計

  在玩手機時突然沒電了、寫微博時又被老闆叫去做重要的事情、在搜尋商品時收到了一條重要的資訊……在移動情境中,被各種其他的事情打斷是很平常的。

儲存使用者的操作,減少重複勞動

  網路中斷狀態:移動網路時常不穩定,當使用者在操作過程中,突然斷網則會給使用者帶來幹擾,那是否要在設計上考慮儲存使用者之前的勞動成果呢?如果當使用者正在發送一條評論內容,突然網路中斷了,那應該如何處理呢?

  在行動裝置 App上行服務端資料時,都需要考慮網路狀態出現異常的狀況。例如新浪微部落格戶端,當博文發送不成功時會暫存到草稿箱中,使用者可以在草稿箱裡再次發送。iPhone 發送資訊不成功,也會儲存內容,標記為發送失敗,允許使用者重複發送。這都是暫存使用者輸入資訊的好案例。在網站狀態不好時,應用需要儲存使用者編輯的內容,允許使用者在網路狀態良好時繼續發送,甚至自動在後台繼續完成。

  編輯中斷狀態:當使用者在編輯內容時,由於其他的立即訊息或者事件必須中斷當前的操作,則已編輯的內容該如何處理呢?在手機文本輸入上還沒有很好的體驗,那儲存使用者已輸入成果,不丟失使用者輸入的資料就顯得尤為重要。

  在Line等即時通訊工具的對話輸入介面切換到其他介面,再返回後,資訊都一直儲存,而不丟失。在編輯內容的介面中,要考慮在各種中斷事件後,儲存已編輯的內容,減少使用者的重複操作。

銜接使用者的記憶而不是讓使用者重頭開始

  當使用者在閱讀時被打斷,該如何處理返回的狀態呢?在閱讀狀態下,基於內容可以分為不同的情況:

  書籍類的閱讀——使用者再次進入介面後,銜接上一次正在閱讀的頁面,而不是書本的首頁。

  新聞類的閱讀——需要根據間隔時間來判斷,超過一天時間沒有閱讀,再次進入後,可以讓使用者選擇是否繼續閱讀或者返回首頁最新內容。若時間間隔很短,則直接返回之前的頁面內容繼續閱讀。

  對於閱讀類的應用,要判斷使用者是否要持續閱讀,使內容能更好地銜接起來。

  無縫切換不同裝置的內容

  當使用者使用PC 瀏覽了某個產品的內容,之後開啟對應的手機應用,如何讓使用者感覺到在不同裝置中訪問同一個內容能無縫銜接?

  Chrome的手機瀏覽器可以查看PC瀏覽器中開啟的網頁,讓手機瀏覽器能快速地瀏覽PC中已看的內容。那對於同類產品來說也很有必要。很多時候使用者都是匆匆地切換裝置,但還想繼續之前的操作,如何能在多個不同裝置之間無縫切換,會對體驗的提升產生很重要的作用。使用者可以主動發起內容切換到其他的裝置上,也可以在使用者開啟應用時,又可以提示使用者”是否要繼續其他裝置上未完的操作?”未來多裝置的使用者會越來越多,如何能在這方面提升使用者的切換體驗也是值得設計師們考慮的。

八、智能有愛

  在E-mail 的設計中,郵件內容中有”附件”文字時,如果沒有貼附件,則會提醒使用者”是否忘記附件了?”這是一個被大家廣為稱讚的貼心設計。在行動裝置 App的設計中,更需要這樣的設計來提升應用的競爭力。

  評價一個行動裝置 App體驗的好壞,除了要看它是否滿足使用者需求和是否具有友好的可用性之外,能讓使用者感受到驚喜是在行動裝置 App設計中最為推崇的。這樣的設計往往是超越了使用者的期望,它的表現是功能、互動或者操作流雖不是使用者預期的,但是使用者能很好地理解,並更高效、更有趣地完成任務。

  行動裝置 App的設計應是驚喜有趣、智能高效和貼心的。讓人驚喜的有趣的設計主要是通過設計手法來實現的。設計師是一個生活的觀察家,對生活中有趣和美的事物有非常好的積累,當需要在產品設計中表現時,會時常把這類好的想法遷移過來。

  智能高效的設計主要是通過設計師們對行動裝置的特點和產品使用情境做深刻分析後才會產生的結果。

  Line 在手機與PC 切換時,設計了一個二維碼掃描登入功能。設計師們要去發現使用者的使用情境與行為表現,例如使用者在電腦邊上時,更希望能通過電腦來使用Line,以提升操作效率。

  同時設計師們也要去分析行動裝置的特點,發揮移動的特點來解決這個切換的問題。貼心的設計往往會幫使用者提前想到一些事情,並滿足使用者還未意識到的需求,在使用者在犯錯誤的時候能自動彌補、糾正使用者的操作,並給出溫馨的提醒。

  例如,Sync.ME(原名Smartsync)是一個很有趣的社交資訊同步應用。當朋友給你打電話時,該應用會將其最新的Facebook 狀態或照片顯示在手機螢幕上,讓你提前知道朋友最近的狀態。然後你如果看到朋友最新滑雪的照片,那麼你接電話就可以說:”怎麼樣,滑雪玩的爽不爽?”

  總之,設計在很多時候都是靠靈感的閃現,行動裝置 App的設計則更加的靈活多變,如何能更好地設計出一個應用,沒有具體的方法和成規。但是,為了能更好地避免設計師們走彎路,設計原則的學習是有必要的,它給了設計師們一定的參考和指導。

作者簡介

  傅小貞,浙大心理系畢業,03年起在UT斯達康,中國移動研究院,淘寶網等多家公司從事移動互動設計和使用者研究工作,曾組建過淘寶移動設計團隊,領導淘寶移動主站和主用戶端的設計;現負責斯凱UXC部門,推動冒泡系列產品設計。

  胡甲超,互動設計師,來自阿里UX團隊。06年加入阿里巴巴,從事過網站、案頭軟體、無線用戶端的互動設計,參與了阿里軟體、淘寶Android用戶端、阿里WangWang等產品的設計。在移動領域擁有多平台的設計經驗,關注跨界設計和移動體驗創新。

  鄭元攏,無線領域設計專家,一線實戰經驗豐富。目前任職於淘寶,從事無線方面的創意產品設計,負責過淘寶系列產品移動端的互動設計。
本文節選自《移動設計》 一書,傅小貞,胡甲超,鄭元攏著,由電子工業出版社出版。

  原文地址:程式員http://www.csdn.net/article/2013-08-15/2816586



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。