超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

如何做app界面設(shè)計?

2013-6-17    藍藍設(shè)計的小編

藍藍注:此文有些圖片沒有顯示全, 下載此文及圖片請點http://m.miumiuwan.com/what%20to%20do%20APP%20ui%20design.docx

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

 

針對這三種特征的心態(tài),我們怎么樣去面對?第一,應(yīng)用最好是小而準,不要大而全。越全的功能應(yīng)用,只能代表著這個應(yīng)用在各方面的都很平庸;第二個要滿足用戶的情景需求;第三個要幫助用戶去消磨時間。

 

屏幕布局

 

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

 

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

 

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

 

說明: http://m2.img.libdd.com/farm5/2012/0827/12/BDC46994D89545DC89599C6DED970961F1E9D99BE40C_458_465.JPEG

 

一、簡單

 

用戶是要微任務(wù)的,心態(tài)是有點無聊的,我們要讓APP變得簡單。但設(shè)計更簡單的體驗,往往意味著要追求更極端的目標。因為你要充分理解用戶的需求,理解用戶現(xiàn)在想要什么,理解他現(xiàn)在的心態(tài)是什么,理解他的大情緒是什么。

 

1、隱藏或者干掉

 

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

 

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

 

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

說明: http://m1.img.libdd.com/farm4/2012/0827/12/2BB8B6AA46A484A517850F4F32C5E2231B8CA805049E_340_478.JPEG

 

2、分區(qū)

 

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

 

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

 

說明: http://m3.img.libdd.com/farm4/2012/0827/12/D4A72A83C97EB3EDC3DC66EEAD979B8D35404505049E_305_462.JPEG

 

3、幫用戶決策

 

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

 

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

 

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

 

說明: http://m3.img.libdd.com/farm5/2012/0827/12/7D4F59776529602773C553F489AAD3D786B08E05049E_311_454.JPEG

 

二、爽快感和新奇感

 

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

 

1、視覺反饋

 

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

 

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

 

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

 

說明: http://m1.img.libdd.com/farm4/2012/0827/12/89EA96457C38AFD5087CF6040F7EBA4A1FD02905049E_330_478.JPEG

 

2、隱喻

 

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

 

大家對蘋果的界面都感覺比Windows要好,就是因為蘋果做的圖標,界面都非常精美非常逼真,這也是蘋果能夠快速超越Windows的一個非常重要的地方。

 

說明: http://m3.img.libdd.com/farm5/2012/0827/12/4EB5D5E95709B19EE60BD54399ECBCDEA35DC305049E_314_461.JPEG

 

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

 

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

 

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

 

說明: http://m3.img.libdd.com/farm5/2012/0827/12/DA11F90AD33740C5C23D32E444E26D6F9CEF3E05049E_316_447.JPEG

 

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

 

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

 

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

 

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

 

說明: http://m3.img.libdd.com/farm4/2012/0827/12/2B0024C3AFBD21B54708CB25E9A80BE026D9125EF698_600_445.JPEG

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.miumiuwan.com

存檔