@刺紳堂七 ：今天把自己最近發(fā)現(xiàn)的幾個(gè)覺(jué)得有趣的、值得學(xué)習(xí)的手機(jī)app交互方式分享給大家。

要說(shuō)明的是，這些交互方式大多數(shù)都是國(guó)外的應(yīng)用，確實(shí)，好久沒(méi)在國(guó)產(chǎn)應(yīng)用中體會(huì)到新穎的、有價(jià)值的交互設(shè)計(jì)了，現(xiàn)在，也有人開(kāi)始吐槽國(guó)內(nèi)的UI設(shè)計(jì)了，比如《中國(guó)臺(tái)灣設(shè)計(jì)師吐槽：我們的UI到底怎么了？》

功夫，一橫一豎。交互，你來(lái)我往，好文推薦：
《還等什么！是時(shí)候來(lái)了解動(dòng)態(tài)設(shè)計(jì)啦》
《經(jīng)驗(yàn)分享：如何快速保存APP動(dòng)效？》
《交互設(shè)計(jì)師修煉指南！教你從零開(kāi)始成為優(yōu)秀交互設(shè)計(jì)師》

不羅嗦了，言歸正傳：

一、下拉輸入

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

即通過(guò)下拉的動(dòng)作來(lái)呼出輸入操作，比如搜索、添加項(xiàng)目等，比如flickr、opera coast就是通過(guò)下拉呼出搜索框，另外，還有一種就是下拉添加項(xiàng)目，此類的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)單、最快的方式輸入，而不用去尋找添加按鈕。

圖1 Opera Coast的下拉搜索

圖2 Flickr的下拉搜索

二、登錄驗(yàn)證帳號(hào)

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

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

圖3 印象筆記

圖4 印象筆記的登錄流程優(yōu)化

三、未激活按鈕的設(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ì)。

圖5 snapchat的表單

四、輸入框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)到鍵盤上面，如圖8所示：

圖6 通常情況下的輸入框設(shè)計(jì)

圖7 將title移至輸入框邊框

圖8 dubble的輸入框提示文本

五、懸浮聊天窗，滑動(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ì)比較有效果。

圖9 facebook的懸浮聊天窗口

好了，這篇文章就到此為止了，找圖、截圖神馬的真心不容易啊。如果你也發(fā)現(xiàn)了其他有趣并且有價(jià)值的交互設(shè)計(jì)，我非常期盼你也與我分享。你我共同進(jìn)步，Peace and Love！

原文地址：jeffreyblog
作者：@刺紳堂七

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量69萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：