2013-6-17 藍(lán)藍(lán)設(shè)計(jì)的小編
藍(lán)藍(lán)注:此文有些圖片沒有顯示全, 下載此文及圖片請點(diǎn)http://www.jghy.net/what%20to%20do%20APP%20ui%20design.docx
用戶在面對移動應(yīng)用時(shí),心態(tài)有三大特征:第一是微任務(wù),我不會拿手機(jī)寫一篇論,不會從頭到尾看一部電影,使用是隨時(shí)隨地的;第二是查看周遭,也就是我所處的環(huán)境。我可能會打開手機(jī),看有什么好的館子,有什么好的電影,打折團(tuán)購等等;第三個(gè)是無聊,很多移動用戶更多情況是無聊的,打開手機(jī),從左到右的翻,翻到最后再把手機(jī)關(guān)掉。
針對這三種特征的心態(tài),我們怎么樣去面對?第一,應(yīng)用最好是小而準(zhǔn),不要大而全。越全的功能應(yīng)用,只能代表著這個(gè)應(yīng)用在各方面的都很平庸;第二個(gè)要滿足用戶的情景需求;第三個(gè)要幫助用戶去消磨時(shí)間。
屏幕布局
一般來說,手機(jī)屏幕是從上往下布局的,重要的信息會放在上方。但是在操作上,大部分人都是單手拿手機(jī),常用的操作,要放在界面的下方。
另外還有一個(gè)原則,最小的觸摸單位,一般是44個(gè)像素。如果再小,你的拇指難以觸碰,或者容易引發(fā)誤操作。同時(shí),也不要讓界面太擁擠。
大家熟悉的,比如iOS的桌面,最主要的操作是在最下面,常用的四個(gè)鈕,上面的內(nèi)容可以來回滑動去選擇。微信的操作也是在下面,重要的信息——我們的聊天內(nèi)容放在上方。
一、簡單
用戶是要微任務(wù)的,心態(tài)是有點(diǎn)無聊的,我們要讓APP變得簡單。但設(shè)計(jì)更簡單的體驗(yàn),往往意味著要追求更極端的目標(biāo)。因?yàn)槟阋浞掷斫庥脩舻男枨?,理解用戶現(xiàn)在想要什么,理解他現(xiàn)在的心態(tài)是什么,理解他的大情緒是什么。
1、隱藏或者干掉
不太重要,但是必要的東西,可以把它隱藏起來;無關(guān)緊要的東西,能干掉的就干掉,不要把什么東西都塞給用戶。
比如郵件應(yīng)用中,已發(fā)郵件、草稿、已刪除這些功能,對一般用戶來說,在最常用的場景里面,這些是不重要的,但是不可能把它去掉,就可以隱藏在下面。而簽名、外出自動回復(fù)等,這些功能是更加不太使用的,可以把它藏得更深。
再比如Path,它把五個(gè)常用的按鈕,集成到“+”里。點(diǎn)擊加號以后,有拍照,音樂等功能。而界面上,打開這個(gè)應(yīng)用,最直觀的就是最主要的信息,沒有其他的干擾。比如之前有多少人看過我的圖片,它把這個(gè)信息直接集成在圖片右上角,沒有占據(jù)太多地方,點(diǎn)擊之后,可以發(fā)表情、評論、直接刪除等,做到了隱藏,是個(gè)非常干凈、漂亮的頁面。
2、分區(qū)
以酒店管家為例,酒店圖片,酒店提供的服務(wù)設(shè)施,價(jià)格,這個(gè)是最主要的內(nèi)容,放在首要位置;點(diǎn)評放在了其次;然后是交通狀況,周邊的設(shè)施等,有一個(gè)明確的分區(qū)。
用戶一旦知道了這種分區(qū)方式,他下次再點(diǎn)開這個(gè)應(yīng)用,想看哪個(gè),他的眼睛會直接落在那兒。
3、幫用戶決策
用戶其實(shí)希望看到的是開發(fā)者直接給他們一個(gè)東西,非常簡單,不用去記,不用去選擇。那么怎樣幫用戶做決策呢?
以酒店產(chǎn)品為例,當(dāng)用戶需要訂酒店時(shí),很多應(yīng)用都是需要用戶輸入條件,比如城市、日期、價(jià)格區(qū)間、房型等,之后得到酒店列表??旖菥频旯芗抑校脩舸蜷_應(yīng)用,看到就是酒店頁面,沒有任何選擇。這并不是簡單粗暴,而是對用戶研究之后提供的功能。
快捷酒店管家的核心用戶,是本地化的,要在本地找一個(gè)快捷酒店,住一晚上。比如說我在通州住,公司在石景山,這兩個(gè)地方有60公里,晚上加班加到12點(diǎn),我是打車回通州,還是說直接就在當(dāng)?shù)卣乙粋€(gè)快捷酒店,住一晚上,第二天洗個(gè)澡再慢慢悠悠上班。我們要做的,先給用戶定位,然后提供附近的快捷酒店。
二、爽快感和新奇感
剛才提到,用戶很多時(shí)候是無聊的,我們的應(yīng)用要能夠讓他感覺操作起來很舒服,讓他經(jīng)常使用,以干掉競爭對手;另外要讓用戶對應(yīng)用產(chǎn)生好感,才有可能對應(yīng)用評分,在微博分享。
1、視覺反饋
用戶在操作應(yīng)用的時(shí)候,要給他提供時(shí)時(shí)的視覺上的反饋。
快捷酒店管家中,選擇了某個(gè)酒店某個(gè)房間后,可能會去選擇日期。如果是訂之后的日期,就有一個(gè)拖動的操作。從開始日期往后面拖,拖動的同時(shí),會出現(xiàn)一個(gè)比較大的日期顯示。為什么呢?
這并不是一個(gè)標(biāo)準(zhǔn)控件。之所以這么做,是因?yàn)檫@里的動作是拖動,不是點(diǎn),拖的時(shí)候用戶并不知道現(xiàn)在拖的是哪,所以需要一個(gè)提示。這個(gè)是視覺反饋,這種操作在一般的日歷里頭是看不到的。拖動本身是一種更好的交互方式,而明確的設(shè)置也讓用戶感到更舒服,很有意思。
2、隱喻
比如iOS6里面的Passbook,它的界面上就明顯的用了隱喻。它本身算是一張數(shù)字化的貴賓卡或者說消費(fèi)卡,界面做的也非常像一個(gè)消費(fèi)券,這個(gè)界面非常精美,光澤、整個(gè)顏色的搭配等等都非常像真實(shí)的,而且就用了條形碼。
大家對蘋果的界面都感覺比Windows要好,就是因?yàn)樘O果做的圖標(biāo),界面都非常精美非常逼真,這也是蘋果能夠快速超越Windows的一個(gè)非常重要的地方。
3、操作方式的創(chuàng)新
比方說,我現(xiàn)在在這個(gè)位置,想知道某一些位置有什么好吃的,一種方式是定位了以后,直接就把附近所有東西顯示出來。
還有一種方式,我的手在上面滑動,它會記錄下軌跡,我只滑動這么一個(gè)區(qū)域,那就只會現(xiàn)顯示這個(gè)區(qū)域內(nèi)的商戶。這種方式特別直觀,而且用戶想怎么樣就怎么樣,想畫一個(gè)五角星就畫一個(gè)五角星,想畫一條線也可以,它只給你想要的地方的那些內(nèi)容,這就是一種創(chuàng)新。
三、在設(shè)計(jì)中浸入情感
什么樣的設(shè)計(jì)師,什么樣的團(tuán)隊(duì)才算優(yōu)秀?我們要對設(shè)計(jì)對應(yīng)用浸入感情。它會給產(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í)它在干嘛呢?它是在提示用戶,新增了自己相冊功能。它雖然是給用戶介紹新功能,但是它把整個(gè)情緒融在里面。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.jghy.net