移動APP的交互設計對于移動產品的體驗來說有著決定性的作用。這句話是來自《移動設計》這本書中,不知道大家有沒有讀過這本說!書的作者提出了一個關于“流”的交互設計方法,豐富了移動應用的設計方法。 沒有讀過的這本書的朋友,可以看看下面html5模版網(m.suosuyi.cn)跟 大家淺談的移動APP交互設計六個方面。
同時html5模版網(m.suosuyi.cn)也推薦幾本關于移動APP設計的書籍。
1、我們先來看看移動APP的遵循哪些基本的交互設計特性。
移動APP產品設計同樣遵循其他交互產品的基本特點:
(1)、有用性
如果一個產品對用戶的價值足夠大,那么產品本身的體驗和細節可以是次要的。
(2)、可用性
可以正常的,快速響應,同時可以適應周圍環境,協調其他資源進行工作。
(3)、良好的用戶體驗
遵循可用性原則進行設計,產品形態本身容易理解,流程簡單,即會有很好的用戶體驗,例如移動設備中產品(應用)的典范—SMS短消息。除了滿足有用,可用外,這種應用的邏輯非常簡單,通過文字的方式與別人保持聯系,而且價格低廉,具有私密性的同時,文字表達較直接語言表達有更多更豐富的表現力。
2、從六個大的方面淺談移動APP交互設計
今天我們主要從移動設計的特征、原則、框架、細節、動效、適配、創新和工具6個方面闡述了app交互的相關知識和設計原則.
1、從特征入手
分為環境特性和手機物理特性,這兩個特性影響著人的使用習慣,也影響人對一款應用好壞的判斷。
環境:使用因地制宜的設計,在不同的環境需要使用不同的設計,比如根據環境光照強可以要對屏幕不同的亮度進行處理,噪音大的環境可以對聲音輸入進行降噪處理,對用戶不同姿態的使用也可進行一些適度迎合。
網絡特性:需要考慮不同的網絡特性2g、3g、wifi和無網絡環境下的展現。不同的網絡環境下,信息的加載也不同。全頁面加載適用于一屏只有一元素的載入,如圖片;分布加載適用于多元素的加載,先加載部分小的元素,再加載大元素;懶加載常用于列表中,當用戶下拉到底時,進行向后的加載,如上拉分頁;智能加載根據網絡來判斷加載方式,慢的時候可以進行多次點擊加載,圖片用非高清的圖片,而且盡量減少圖片數量,快的時候則可一次加載;離線存儲適用于網絡斷的情況下使用,有網絡的時候也可以減少用戶流量,并且加載速度也能提升。
設備特性:根據屏幕的適配,各系統按鍵的規則,傳感器的不同,各手指的活動熱區盲區和手勢操作特性對體驗深入挖掘。
2、從原則入手
各個系統的設計原則是不同的,ios的原則是簡約、統一,android的原則是簡化生活,wp的原則是時尚、動態、創新。
3、從框架來入手
要考慮如何安排各個頁面展示,各個入口的安放和操作流程。
框架可分廣度和深度來說,廣度就是各頁面橫向擴張,橫向布局在同一層,比如從m主頁面可以通過不同的按鈕或滑動進a、b、c頁面。深度是縱向擴充,縱向擴充是把各頁面一層層向內布局,如從m主頁需要進入a才能進入b然后才能進入c,廣度可以減少用戶的操作,但是入口會比較多,可能會占用太多屏幕空間,而深度則反之。
在設計框架時,應該盡量做到淺而窄,這就要考慮應用的核心價值、內容數量、用戶習慣、使用場景和利用率,比如精簡內容,突出有用的展現,盡量使用路徑扁平化,根據用戶的習慣來置頂內容,三層架構中讓列表與詳情相融合,詳情隱藏在列表中,通過點擊下拉按鈕來展示,這樣就減少了頁面加載的等待時間。
4、在細節方面入手
需要設計者多去發覺,觀察,比如前面介紹的利用手指的軌跡流,來安排交互按鈕,鍵盤彈出時是否會遮住重要文字,圖形化反饋信息,利用各傳感器擬物化設計,利用音效來進行交互反饋提示。
比如:什么是扁平化設計和擬物化設計?? ?和 ? ?如何打造APP的趣味性
5、充分利用動效,可以讓用戶覺得更有趣。
比如利用的動效的設計來告訴用戶當前應該如何操作,提醒用戶下一步的操作;在滾動條上加上的動效可以幫助用戶減少焦慮;利用動效展現一些場景,使用戶有身臨其境的感覺,引領用戶經歷某個故事;利用閃爍的動效來吸引用戶注意,是用戶去點擊某個區域或按鈕;也可利用動效來設計應用品牌獨有的風格。
6、移動APP微創新
好的設計通常都給人出其不意、良好的體驗效果,我們必須以需求為起點,結合使用場景,思考模式的進化,才能出創新,以下介紹幾個方法:
逆反法——打破常規思想。
離散法——打散重組。
移植法——把一個功能的概念移植到另一個功能對象中。
還原法——研究到事物的基本,原始的屬性,原始的行動。
強化法——利用聚焦原理,強化事物的某個屬性或某幾個方面。
組合法——將幾種功能技術相結合,產生新的技術。
對應法——擬態創新,與現實生活的各種狀態相對應。