藍(lán)藍(lán)注：此文有些圖片沒有顯示全， 下載此文及圖片請(qǐng)點(diǎn)http://363858.cn/what%20to%20do%20APP%20ui%20design.docx

用戶在面對(duì)移動(dòng)應(yīng)用時(shí)，心態(tài)有三大特征：第一是微任務(wù)，我不會(huì)拿手機(jī)寫一篇論，不會(huì)從頭到尾看一部電影，使用是隨時(shí)隨地的；第二是查看周遭，也就是我所處的環(huán)境。我可能會(huì)打開手機(jī)，看有什么好的館子，有什么好的電影，打折團(tuán)購(gòu)等等；第三個(gè)是無聊，很多移動(dòng)用戶更多情況是無聊的，打開手機(jī)，從左到右的翻，翻到最后再把手機(jī)關(guān)掉。

 

針對(duì)這三種特征的心態(tài)，我們?cè)趺礃尤ッ鎸?duì)？第一，應(yīng)用最好是小而準(zhǔn)，不要大而全。越全的功能應(yīng)用，只能代表著這個(gè)應(yīng)用在各方面的都很平庸；第二個(gè)要滿足用戶的情景需求；第三個(gè)要幫助用戶去消磨時(shí)間。

 

屏幕布局

 

一般來說，手機(jī)屏幕是從上往下布局的，重要的信息會(huì)放在上方。但是在操作上，大部分人都是單手拿手機(jī)，常用的操作，要放在界面的下方。

 

另外還有一個(gè)原則，最小的觸摸單位，一般是44個(gè)像素。如果再小，你的拇指難以觸碰，或者容易引發(fā)誤操作。同時(shí)，也不要讓界面太擁擠。

 

大家熟悉的，比如iOS的桌面，最主要的操作是在最下面，常用的四個(gè)鈕，上面的內(nèi)容可以來回滑動(dòng)去選擇。微信的操作也是在下面，重要的信息——我們的聊天內(nèi)容放在上方。

 

 

一、簡(jiǎn)單

 

用戶是要微任務(wù)的，心態(tài)是有點(diǎn)無聊的，我們要讓APP變得簡(jiǎn)單。但設(shè)計(jì)更簡(jiǎn)單的體驗(yàn)，往往意味著要追求更極端的目標(biāo)。因?yàn)槟阋浞掷斫庥脩舻男枨螅斫庥脩衄F(xiàn)在想要什么，理解他現(xiàn)在的心態(tài)是什么，理解他的大情緒是什么。

 

1、隱藏或者干掉

 

不太重要，但是必要的東西，可以把它隱藏起來；無關(guān)緊要的東西，能干掉的就干掉，不要把什么東西都塞給用戶。

 

比如郵件應(yīng)用中，已發(fā)郵件、草稿、已刪除這些功能，對(duì)一般用戶來說，在最常用的場(chǎng)景里面，這些是不重要的，但是不可能把它去掉，就可以隱藏在下面。而簽名、外出自動(dòng)回復(fù)等，這些功能是更加不太使用的，可以把它藏得更深。

 

再比如Path，它把五個(gè)常用的按鈕，集成到“+”里。點(diǎn)擊加號(hào)以后，有拍照，音樂等功能。而界面上，打開這個(gè)應(yīng)用，最直觀的就是最主要的信息，沒有其他的干擾。比如之前有多少人看過我的圖片，它把這個(gè)信息直接集成在圖片右上角，沒有占據(jù)太多地方，點(diǎn)擊之后，可以發(fā)表情、評(píng)論、直接刪除等，做到了隱藏，是個(gè)非常干凈、漂亮的頁(yè)面。

 

2、分區(qū)

 

以酒店管家為例，酒店圖片，酒店提供的服務(wù)設(shè)施，價(jià)格，這個(gè)是最主要的內(nèi)容，放在首要位置；點(diǎn)評(píng)放在了其次；然后是交通狀況，周邊的設(shè)施等，有一個(gè)明確的分區(qū)。

 

用戶一旦知道了這種分區(qū)方式，他下次再點(diǎn)開這個(gè)應(yīng)用，想看哪個(gè)，他的眼睛會(huì)直接落在那兒。

 

 

3、幫用戶決策

 

用戶其實(shí)希望看到的是開發(fā)者直接給他們一個(gè)東西，非常簡(jiǎn)單，不用去記，不用去選擇。那么怎樣幫用戶做決策呢？

 

以酒店產(chǎn)品為例，當(dāng)用戶需要訂酒店時(shí)，很多應(yīng)用都是需要用戶輸入條件，比如城市、日期、價(jià)格區(qū)間、房型等，之后得到酒店列表?？旖菥频旯芗抑?，用戶打開應(yīng)用，看到就是酒店頁(yè)面，沒有任何選擇。這并不是簡(jiǎn)單粗暴，而是對(duì)用戶研究之后提供的功能。

 

快捷酒店管家的核心用戶，是本地化的，要在本地找一個(gè)快捷酒店，住一晚上。比如說我在通州住，公司在石景山，這兩個(gè)地方有60公里，晚上加班加到12點(diǎn)，我是打車回通州，還是說直接就在當(dāng)?shù)卣乙粋€(gè)快捷酒店，住一晚上，第二天洗個(gè)澡再慢慢悠悠上班。我們要做的，先給用戶定位，然后提供附近的快捷酒店。

 

 

二、爽快感和新奇感

 

剛才提到，用戶很多時(shí)候是無聊的，我們的應(yīng)用要能夠讓他感覺操作起來很舒服，讓他經(jīng)常使用，以干掉競(jìng)爭(zhēng)對(duì)手；另外要讓用戶對(duì)應(yīng)用產(chǎn)生好感，才有可能對(duì)應(yīng)用評(píng)分，在微博分享。

 

1、視覺反饋

 

用戶在操作應(yīng)用的時(shí)候，要給他提供時(shí)時(shí)的視覺上的反饋。

 

快捷酒店管家中，選擇了某個(gè)酒店某個(gè)房間后，可能會(huì)去選擇日期。如果是訂之后的日期，就有一個(gè)拖動(dòng)的操作。從開始日期往后面拖，拖動(dòng)的同時(shí)，會(huì)出現(xiàn)一個(gè)比較大的日期顯示。為什么呢？

 

這并不是一個(gè)標(biāo)準(zhǔn)控件。之所以這么做，是因?yàn)檫@里的動(dòng)作是拖動(dòng)，不是點(diǎn)，拖的時(shí)候用戶并不知道現(xiàn)在拖的是哪，所以需要一個(gè)提示。這個(gè)是視覺反饋，這種操作在一般的日歷里頭是看不到的。拖動(dòng)本身是一種更好的交互方式，而明確的設(shè)置也讓用戶感到更舒服，很有意思。

 

 

2、隱喻

 

比如iOS6里面的Passbook，它的界面上就明顯的用了隱喻。它本身算是一張數(shù)字化的貴賓卡或者說消費(fèi)卡，界面做的也非常像一個(gè)消費(fèi)券，這個(gè)界面非常精美，光澤、整個(gè)顏色的搭配等等都非常像真實(shí)的，而且就用了條形碼。

 

大家對(duì)蘋果的界面都感覺比Windows要好，就是因?yàn)樘O果做的圖標(biāo)，界面都非常精美非常逼真，這也是蘋果能夠快速超越Windows的一個(gè)非常重要的地方。

 

 

3、操作方式的創(chuàng)新

 

比方說，我現(xiàn)在在這個(gè)位置，想知道某一些位置有什么好吃的，一種方式是定位了以后，直接就把附近所有東西顯示出來。

 

還有一種方式，我的手在上面滑動(dòng)，它會(huì)記錄下軌跡，我只滑動(dòng)這么一個(gè)區(qū)域，那就只會(huì)現(xiàn)顯示這個(gè)區(qū)域內(nèi)的商戶。這種方式特別直觀，而且用戶想怎么樣就怎么樣，想畫一個(gè)五角星就畫一個(gè)五角星，想畫一條線也可以，它只給你想要的地方的那些內(nèi)容，這就是一種創(chuàng)新。

 

 

三、在設(shè)計(jì)中浸入情感

 

什么樣的設(shè)計(jì)師，什么樣的團(tuán)隊(duì)才算優(yōu)秀？我們要對(duì)設(shè)計(jì)對(duì)應(yīng)用浸入感情。它會(huì)給產(chǎn)品帶來一些好玩、也可能讓用戶覺得有意思的地方。

 

比如定機(jī)票應(yīng)用中，有頭等艙和經(jīng)濟(jì)艙。經(jīng)濟(jì)艙是一個(gè)普通的人，而頭等艙是一個(gè)戴著帽子，系著領(lǐng)結(jié)，胸前別著手帕的這么一個(gè)人，很酷的老板角色，體現(xiàn)出了頭等艙和經(jīng)濟(jì)艙之間的區(qū)別。要做頭等艙的人，一般都愿意自己看到自己這么一個(gè)形象。

 

再比如微信4.0，剛打開的時(shí)候有一張圖片，非常文藝非常在都市的感覺的一張圖片，配文字“如你所見，微信，是一個(gè)生活方式”。其實(shí)它在干嘛呢？它是在提示用戶，新增了自己相冊(cè)功能。它雖然是給用戶介紹新功能，但是它把整個(gè)情緒融在里面。