移動交互設計那些值得你學習的原理
移動交互設計那些值得你學習的原理-移動閱讀二維碼

買了本《設計之下》,是搜狐UED團隊寫的書,挺好的。今天又拿來體會了下,順便摘抄點下來,算是讀書筆記,感謝搜狐新聞客戶端UED團隊。

移動交互設計那些值得你學習的原理

更多相關介紹,請看圖書推薦?:第一本講述移動APP設計全過程的書籍《設計之下》

一、解析需求

1、交互設計的五要素

人、動作(情感、典型、策略、用戶研究、流程、動機)、環境、工具、目的

創起來的流程是這樣子的,人,通過工具,完成動作,達到目的,在環境里。

2、解析需求的過程可以獲得以下兩點東西:

第一點、理清項目所設計的框架問題,以及沒一個功能之間的內在聯系,為之后的原型設計奠定堅實的基礎;

第二點、通過分析項目所服務的用戶、平臺(包括硬件特性、交互方式和競品等多方面)、使用環境和目標等,明確每一處設計的評估標準。

二、原型設計分為三階段

概念設計、低保真原型和高保真原型。概念設計用來傳達內容,是最初的解決方案;低保真原型可以具體到信息的布局和傳遞,從框架細化到內容;高保真原型則基本可以達到產品上線后的效果,此時交互設計師需要對每一個細節負責。

三、交互設計

<一>如何讓操作流程簡潔?

1、使用自然思維而不是程序思維。

做交互時應該遵循用戶的認知,并且結合生活實際情況來設計,不能用程序固話的邏輯思維來定義交互行為。

2、圍繞用戶的目的和行為來設計。

用戶看到產品的第一個想法是“我能用它來做什么?”,著手設計之前要理解用戶的目的和行為,他們想要做什么,先做什么再做什么,是否會再同一時間去做不同的事情,抱著不同的目的和心態,適合的操作流程可能會有很大的差異。

3、少點一次就更方便了嗎?

只要是有意義的點擊,都不會多于,交互設計師不能只管減少了操作步驟,應該在減少步驟的同時減低用戶的認真和使用障礙,操作步驟是根據任務來設定的,不是越少越好。

4、將常用的功能提前。

5、不妨遵循用戶已經成型的用戶習慣。

<二>反饋的形式

1、氣泡狀提示

通常出現在畫面上過一會兒后就自動消失,用于告知任務欄狀態和操作結果。由于氣泡的特性,它容易被用戶忽略,所以并不適合承載太多的文字和重要信息。

2、彈出框

一般會承載兩個操作按鈕,有時候會強迫用戶操作并屏蔽背景的所有內容,對用戶有打擾最大的一種提示效果。用戶通常會想馬上關掉,所以彈出框上的文字最好簡潔,能夠幫用戶快速做出決策。

避免濫用,如果不是太重要的反饋,就用氣泡提示用戶就行,避免嚇到用戶。

3、按鈕/圖標/鏈接的按下狀態

這類反饋是基于人在現實世界中的經驗來的,也是手機最常見的一種反饋。

4、聲音

能在一定程度上給用戶反饋,不過有時候會打擾到用戶,有時候又因為環境外因而導致聽不見,因此不能將聲音作為主要反饋,而且要你管給用戶能夠關掉提示音的權利。

5、震動

是比較強的觸覺反饋,可以用來代替或者加強聲音提示。在有些游戲中主角死亡時手機會震動,這種提示有些驚悚,所以最好不要亂用。

6、動畫

能給用戶提供有意義的反饋,幫助用戶直觀的了解到操作的結果。并且好的動畫能給用戶留下好的印象,提升愉悅感,甚至成為吸引用戶的一個因素。

在某些比較久的操作里,用戶動畫來提示操作的進度,可減少用戶的焦慮。

<三>反饋出現的位置

1、狀態欄

此位置不是很顯眼,建議顯示不重要的或者跨畫面的提示。

2、導航欄

一般是連接狀態的展示,臨時將導航欄的內容代替為連接狀態,表示當前產品正在努力連接網絡拉去數據中,這個位置適合現實臨時的較為重要的提示類信息。

3、內容區域上方

通常為下拉刷新,是加載新內容的一種快捷方式,默認的提示信息是隱藏的,向下拉才現實對應的提示信息,以引導用戶進行操作。

4、屏幕中心

反饋消息在屏幕中心,通常為整體的、比較重要的提示信息。需要引起用戶的重視的、系統的提示均可以顯示在此位置。

5、菜單欄上方

這個位置沒有限制,可根據需要靈活使用,可以是應用的整體信息的提示,也可以是與界面底部內容相關的提示。

6、底部

在次位置提示并沒有特別的好處,或許是對于新形勢的一種追求?,F在越來越多的應用將彈出框放在此位置,因為彈出框本來就會屏蔽畫面,所以覆蓋在菜單欄剛好符合彈出框的交互特性。

總結:反饋的設計原則

為用戶在各個階段提供必要的、積極的、及時的反饋;

避免過度反饋,以免給用戶帶來不必要的打擾;

能夠及時看到效果的、簡單的操作可以省略反饋提示效果;

所提供的反饋要能讓用戶最便捷的方式完成選擇;

為不同類型的反饋做差異化設計;

不要打斷用戶的意識流,避免遮擋用戶可能會去查看或者操作的對象。

<三>動畫的重要引導作用

1、引導作用和提示作用

頁面層級結構引導、手勢操作引導、狀態提示、隱藏功能提示、吸引注意力

2、反饋作用

邊界反饋、過程反饋、結果反饋

<四>考慮各種特俗的情況

無網絡、空白頁面、超量的內容顯示、失敗、加載中、重復操作、輸入錯誤、分辨率影響

(以上內容書書籍的交互設計部分,視覺部分的我沒摘抄,都是實戰型的內容,建議去買書過來具體看。)

本文鏈接:http://www.casaleticia.com/mobile-interaction-design-principles.html
本文標簽: , , ,