淺談移動(dòng)APP交互設(shè)計(jì)及移動(dòng)APP產(chǎn)品設(shè)計(jì)特性

移動(dòng)APP的交互設(shè)計(jì)對(duì)于移動(dòng)產(chǎn)品的體驗(yàn)來(lái)說(shuō)有著決定性的作用。這句話是來(lái)自《移動(dòng)設(shè)計(jì)》這本書(shū)中,不知道大家有沒(méi)有讀過(guò)這本說(shuō)!書(shū)的作者提出了一個(gè)關(guān)于“流”的交互設(shè)計(jì)方法,豐富了移動(dòng)應(yīng)用的設(shè)計(jì)方法。 沒(méi)有讀過(guò)的這本書(shū)的朋友,可以看看下面25學(xué)堂跟 大家淺談的移動(dòng)APP交互設(shè)計(jì)六個(gè)方面。

同時(shí)25學(xué)堂也推薦幾本關(guān)于移動(dòng)APP設(shè)計(jì)的書(shū)籍

專業(yè)APP設(shè)計(jì)工具2

 

 

1、我們先來(lái)看看移動(dòng)APP的遵循哪些基本的交互設(shè)計(jì)特性。

移動(dòng)APP產(chǎn)品設(shè)計(jì)同樣遵循其他交互產(chǎn)品的基本特點(diǎn):

(1)、有用性

如果一個(gè)產(chǎn)品對(duì)用戶的價(jià)值足夠大,那么產(chǎn)品本身的體驗(yàn)和細(xì)節(jié)可以是次要的。

(2)、可用性

可以正常的,快速響應(yīng),同時(shí)可以適應(yīng)周圍環(huán)境,協(xié)調(diào)其他資源進(jìn)行工作。

(3)、良好的用戶體驗(yàn)

遵循可用性原則進(jìn)行設(shè)計(jì),產(chǎn)品形態(tài)本身容易理解,流程簡(jiǎn)單,即會(huì)有很好的用戶體驗(yàn),例如移動(dòng)設(shè)備中產(chǎn)品(應(yīng)用)的典范—SMS短消息。除了滿足有用,可用外,這種應(yīng)用的邏輯非常簡(jiǎn)單,通過(guò)文字的方式與別人保持聯(lián)系,而且價(jià)格低廉,具有私密性的同時(shí),文字表達(dá)較直接語(yǔ)言表達(dá)有更多更豐富的表現(xiàn)力。

 

2、從六個(gè)大的方面淺談移動(dòng)APP交互設(shè)計(jì)

今天我們主要從移動(dòng)設(shè)計(jì)的特征、原則、框架、細(xì)節(jié)、動(dòng)效、適配、創(chuàng)新和工具6個(gè)方面闡述了app交互的相關(guān)知識(shí)和設(shè)計(jì)原則.

移動(dòng)app產(chǎn)品設(shè)計(jì)

 

1、從特征入手

分為環(huán)境特性和手機(jī)物理特性,這兩個(gè)特性影響著人的使用習(xí)慣,也影響人對(duì)一款應(yīng)用好壞的判斷。

環(huán)境:使用因地制宜的設(shè)計(jì),在不同的環(huán)境需要使用不同的設(shè)計(jì),比如根據(jù)環(huán)境光照強(qiáng)可以要對(duì)屏幕不同的亮度進(jìn)行處理,噪音大的環(huán)境可以對(duì)聲音輸入進(jìn)行降噪處理,對(duì)用戶不同姿態(tài)的使用也可進(jìn)行一些適度迎合。

網(wǎng)絡(luò)特性:需要考慮不同的網(wǎng)絡(luò)特性2g、3g、wifi和無(wú)網(wǎng)絡(luò)環(huán)境下的展現(xiàn)。不同的網(wǎng)絡(luò)環(huán)境下,信息的加載也不同。全頁(yè)面加載適用于一屏只有一元素的載入,如圖片;分布加載適用于多元素的加載,先加載部分小的元素,再加載大元素;懶加載常用于列表中,當(dāng)用戶下拉到底時(shí),進(jìn)行向后的加載,如上拉分頁(yè);智能加載根據(jù)網(wǎng)絡(luò)來(lái)判斷加載方式,慢的時(shí)候可以進(jìn)行多次點(diǎn)擊加載,圖片用非高清的圖片,而且盡量減少圖片數(shù)量,快的時(shí)候則可一次加載;離線存儲(chǔ)適用于網(wǎng)絡(luò)斷的情況下使用,有網(wǎng)絡(luò)的時(shí)候也可以減少用戶流量,并且加載速度也能提升。

設(shè)備特性:根據(jù)屏幕的適配,各系統(tǒng)按鍵的規(guī)則,傳感器的不同,各手指的活動(dòng)熱區(qū)盲區(qū)和手勢(shì)操作特性對(duì)體驗(yàn)深入挖掘。

2、從原則入手

各個(gè)系統(tǒng)的設(shè)計(jì)原則是不同的,ios的原則是簡(jiǎn)約、統(tǒng)一,android的原則是簡(jiǎn)化生活,wp的原則是時(shí)尚、動(dòng)態(tài)、創(chuàng)新。

如:移動(dòng)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)必須遵循的15原則

移動(dòng)設(shè)計(jì)的基本原則和APP指導(dǎo)性設(shè)計(jì)規(guī)范

APP產(chǎn)品設(shè)計(jì)新手教程|APP產(chǎn)品設(shè)計(jì)幾點(diǎn)原則

3、從框架來(lái)入手

要考慮如何安排各個(gè)頁(yè)面展示,各個(gè)入口的安放和操作流程。

框架可分廣度和深度來(lái)說(shuō),廣度就是各頁(yè)面橫向擴(kuò)張,橫向布局在同一層,比如從m主頁(yè)面可以通過(guò)不同的按鈕或滑動(dòng)進(jìn)a、b、c頁(yè)面。深度是縱向擴(kuò)充,縱向擴(kuò)充是把各頁(yè)面一層層向內(nèi)布局,如從m主頁(yè)需要進(jìn)入a才能進(jìn)入b然后才能進(jìn)入c,廣度可以減少用戶的操作,但是入口會(huì)比較多,可能會(huì)占用太多屏幕空間,而深度則反之。

在設(shè)計(jì)框架時(shí),應(yīng)該盡量做到淺而窄,這就要考慮應(yīng)用的核心價(jià)值、內(nèi)容數(shù)量、用戶習(xí)慣、使用場(chǎng)景和利用率,比如精簡(jiǎn)內(nèi)容,突出有用的展現(xiàn),盡量使用路徑扁平化,根據(jù)用戶的習(xí)慣來(lái)置頂內(nèi)容,三層架構(gòu)中讓列表與詳情相融合,詳情隱藏在列表中,通過(guò)點(diǎn)擊下拉按鈕來(lái)展示,這樣就減少了頁(yè)面加載的等待時(shí)間。

比如8種移動(dòng)APP導(dǎo)航設(shè)計(jì)模式大對(duì)比

6個(gè)超實(shí)用的APP導(dǎo)航設(shè)計(jì)方案

3種常見(jiàn)的APP導(dǎo)航設(shè)計(jì)方案優(yōu)劣勢(shì)分析

App界面導(dǎo)航設(shè)計(jì)總結(jié)與經(jīng)驗(yàn)分享

4、在細(xì)節(jié)方面入手

需要設(shè)計(jì)者多去發(fā)覺(jué),觀察,比如前面介紹的利用手指的軌跡流,來(lái)安排交互按鈕,鍵盤彈出時(shí)是否會(huì)遮住重要文字,圖形化反饋信息,利用各傳感器擬物化設(shè)計(jì),利用音效來(lái)進(jìn)行交互反饋提示。

比如:什么是扁平化設(shè)計(jì)和擬物化設(shè)計(jì)?? ?和 ? ?如何打造APP的趣味性

5、充分利用動(dòng)效,可以讓用戶覺(jué)得更有趣。

比如利用的動(dòng)效的設(shè)計(jì)來(lái)告訴用戶當(dāng)前應(yīng)該如何操作,提醒用戶下一步的操作;在滾動(dòng)條上加上的動(dòng)效可以幫助用戶減少焦慮;利用動(dòng)效展現(xiàn)一些場(chǎng)景,使用戶有身臨其境的感覺(jué),引領(lǐng)用戶經(jīng)歷某個(gè)故事;利用閃爍的動(dòng)效來(lái)吸引用戶注意,是用戶去點(diǎn)擊某個(gè)區(qū)域或按鈕;也可利用動(dòng)效來(lái)設(shè)計(jì)應(yīng)用品牌獨(dú)有的風(fēng)格。

比如:移動(dòng)APP的交互動(dòng)效設(shè)計(jì)5點(diǎn)規(guī)范和交互動(dòng)效分類

 

 

6、移動(dòng)APP微創(chuàng)新

好的設(shè)計(jì)通常都給人出其不意、良好的體驗(yàn)效果,我們必須以需求為起點(diǎn),結(jié)合使用場(chǎng)景,思考模式的進(jìn)化,才能出創(chuàng)新,以下介紹幾個(gè)方法:

逆反法——打破常規(guī)思想。

離散法——打散重組。

移植法——把一個(gè)功能的概念移植到另一個(gè)功能對(duì)象中。

還原法——研究到事物的基本,原始的屬性,原始的行動(dòng)。

強(qiáng)化法——利用聚焦原理,強(qiáng)化事物的某個(gè)屬性或某幾個(gè)方面。

組合法——將幾種功能技術(shù)相結(jié)合,產(chǎn)生新的技術(shù)。

對(duì)應(yīng)法——擬態(tài)創(chuàng)新,與現(xiàn)實(shí)生活的各種狀態(tài)相對(duì)應(yīng)。

 

每天更新,
全站高品質(zhì)素材免費(fèi)下載!