今天25學(xué)堂不跟大家啰嗦了，看到j(luò)effrey寫(xiě)的這5個(gè)非常好的app交互設(shè)計(jì)體驗(yàn)文章，故此轉(zhuǎn)載過(guò)來(lái)！25學(xué)堂也感謝jeffrey的分享！

NO.1. 下拉輸入

代表應(yīng)用：Flickr、Opera Coast、any.do、Timi記賬

即通過(guò)下拉的動(dòng)作來(lái)呼出輸入操作，比如搜索、添加項(xiàng)目等，比如flickr、opera coast就是通過(guò)下拉呼出搜索框，另外，還有一種就是下拉添加項(xiàng)目，此類(lèi)的app有any.do、Timi記賬。下拉是一個(gè)很自然很便捷的動(dòng)作，很適合于“隨時(shí)、快速輸入”的情境，比如any.do作為GTD應(yīng)用，采取下拉添加的設(shè)計(jì)就非常適合，因?yàn)楹芏鄷r(shí)候，我們都會(huì)在這樣一種情境中使用這個(gè)功能：走在路上，突然有了一個(gè)靈感，于是趕緊打開(kāi)any.do，把想到的記下來(lái)。

這樣的情境要求能夠以最簡(jiǎn)單、最快的方式輸入，而不用去尋找添加按鈕。

NO.2 登錄驗(yàn)證帳號(hào)

代表應(yīng)用：印象筆記

通常的登錄和注冊(cè)是分開(kāi)設(shè)計(jì)的，而印象筆記將登錄和注冊(cè)整合，每一步驟都只有一個(gè)表單，注冊(cè)和登錄沒(méi)有任何沖突。這樣避免了“用戶已存在”然后又要重新填寫(xiě)表單的不良體驗(yàn)，在流程上有很大的優(yōu)化，如下圖4所示：

NO.3 未激活按鈕的設(shè)計(jì)

代表應(yīng)用：snapchat

交互設(shè)計(jì)中有個(gè)叫做“預(yù)設(shè)用途”的原則，大意就是一個(gè)界面或者控件，要讓用戶一看見(jiàn)它就知道如何使用。顯然，最基本的要求就是至少要能知道這個(gè)控件可否操作，而所謂“未激活的按鈕”就是含有“激活”和“未激活”兩種狀態(tài)而目前處于“未激活”狀態(tài)的按鈕，這就要求分別對(duì)兩種狀態(tài)進(jìn)行設(shè)計(jì)。通常來(lái)說(shuō)，有兩種方法，隱藏或呈不可操作的視覺(jué)效果（比如灰色），比如snapchat的表單填寫(xiě)界面，當(dāng)表單尚未填寫(xiě)完全時(shí)，CONTINUE按鈕一直處于灰色狀態(tài)，即告訴用戶該按鈕尚未激活。讀到這里你或許會(huì)覺(jué)得這其實(shí)很簡(jiǎn)單嘛，但只要你仔細(xì)觀察一下，就會(huì)發(fā)現(xiàn)有很多的應(yīng)用沒(méi)有這樣設(shè)計(jì)。

NO.4 輸入框title或提示文本的解決方案

代表應(yīng)用：dubble

通常設(shè)計(jì)輸入框時(shí)，我們會(huì)使用Lable標(biāo)簽給每個(gè)輸入框一個(gè)title，比如“用戶名”、“密碼”，另外，還會(huì)在輸入框中使用灰色的提示文本，如圖6所示。但是，在手持設(shè)備的應(yīng)用中，這樣的設(shè)計(jì)會(huì)產(chǎn)生兩個(gè)問(wèn)題，一是浪費(fèi)屏幕空間，我們知道，手持設(shè)備的屏幕空間是很寶貴的,而以Lable標(biāo)簽呈現(xiàn)的title會(huì)占去很大一塊屏幕空間；二是提示文本在用戶輸入時(shí)便消失不見(jiàn)，提示效果無(wú)法持續(xù)到任務(wù)結(jié)束。那么，如何解決這兩個(gè)問(wèn)題呢，如下圖7所示，在用戶輸入時(shí)將title移至輸入框邊框中，或者像dubble應(yīng)用的注冊(cè)界面，把輸入框的提示文本移動(dòng)到鍵盤(pán)上面，如圖8所示：

NO.5 懸浮聊天窗，滑動(dòng)關(guān)閉聊天窗口

代表應(yīng)用：Facebook

如圖9所示，F(xiàn)acebook將聊天窗口懸浮在界面邊緣上，可以任意拖動(dòng)，但會(huì)自動(dòng)貼緊屏幕邊緣，打開(kāi)聊天時(shí)其他背景半透明遮罩，層次感很強(qiáng)，按住聊天窗口任意位置向右上角滑動(dòng)即可關(guān)閉聊天窗，有一個(gè)回收的動(dòng)效。淘寶手機(jī)客戶端也借助了這個(gè)設(shè)計(jì)，這樣的設(shè)計(jì)對(duì)于以用戶動(dòng)態(tài)為主，而私信聊天為輔的應(yīng)用非常適合，比如微博、QQ空間等。稍微嘴賤一句，新浪微博之前一直想加強(qiáng)社交屬性，減弱媒體屬性的標(biāo)簽，但最終未果，我覺(jué)得新浪早點(diǎn)重視移動(dòng)客戶端并且像facebook一樣用設(shè)計(jì)來(lái)加強(qiáng)社交屬性或許會(huì)比較有效果。

原文地址：

五個(gè)值得學(xué)習(xí)的移動(dòng)應(yīng)用交互方式

http://jeffreyblog.com/archives/159