之前去面試某公司UI實習生,到了第二輪,面試官拿出一款app問做得怎么樣,當時自己的思路是比較隨意的,回來的路上心想這個實習機會怕是要和自己無緣了……為了學會怎樣來回答“這款app做得怎么樣”,自己去看了一些前輩們的文章,然后小小的總結(jié)了一下。
要分析一款手機應(yīng)用,有幾種不同的順序
> ?按app的工作順序:
> 按照整個操作過程:
下面以美團客戶端為例來分析一下視覺和交互。
首先看一下icon,簡單的白色“美團”二字下面是青色漸變圓,背景為白色。
(說到icon這張圖,為了找到分辨率高一點的,可以從apk中拿出來,具體可以點這里)
鑒于沒有引導(dǎo)頁,這一步就略過了。
然后是首頁,這里用大眾點評做一下參照(兩家競爭對手現(xiàn)在也合并了,于是糯米變成第二了么…)
第一眼看過去,除了顏色,長得挺像兄妹。頂部導(dǎo)航欄從左往右都是城市-搜索,相比后者+號的功能隱藏,美團把掃碼和消息提醒放在了外面,突出功能。點擊搜索框,都會出現(xiàn)熱門搜索,美團還有個滑動翻頁。這一部分個人覺得還是美團做的比較好。接下來是扁平化風格的各分類入口(首頁黃金位置),以不同顏色來做區(qū)分并且有加深顏色的邊框,橫向滑動切換,這里美團放了兩頁,最后一個都是“全部分類”。至于分類的排列順序,前者基本是根據(jù)使用頻率排序,前兩項都是美食、電影,實際上KTV也可以包含在休閑娛樂的分類中。接下來是限時搶購,顯示了三家店,占據(jù)正中間的位置,相比大眾點評的突出時間,這里更吸引用戶的是店鋪,畢竟這不是某寶的搶購,囤貨的可能性更大。 然后就是各種推廣和推薦了,不同顏色加粗標簽,如果標簽顏色能和相應(yīng)圖片保持統(tǒng)一就更好啦。往下滑,可以看見banner(廣告專題什么的),接下來是(應(yīng)該是最近想主推的新業(yè)務(wù)) 幾個服務(wù)入口演出賽事、汽車服務(wù)、親子游玩:都是灰色標簽 +圖片。然后是橫向的“好食惠”,點進去總有種進了大眾點評的錯覺(文字介紹+評論+店家入口),畢竟合并了也要有所體現(xiàn),哈哈哈……再繼續(xù)往下就都是“猜你喜歡”了:從左往右依次是圖+店名+團購選項+價格(這里還有個門市價,用來做對比)+距離+ 已售份數(shù)。底部的選項卡從左往右依次是:團購,上門,我的,更多(系統(tǒng)設(shè)置)。
首頁的整體感覺:下拉刷新時出現(xiàn)小人搖動的動畫,增加了萌點。美團的圖標和文字顏色都淺一點,線條也都細一點,顏色看起來更舒服。
接下來是上門頁面:
嗯,這一面的頂部導(dǎo)航欄變成了淺色(稍帶一點點灰),和首頁不一樣。一開始就是三個服務(wù)入口:舒服的顏色,扁平化風格,但總覺得看起來不怎么舒服…兩邊的間距比和icon之間的間距要窄很多。繼續(xù)向下看,分別是洗車、美容、保潔、車險,原諒我見識少,洗車的標簽為什么是紫紅色。下滑之后可以看見“全部頻道”。這四項,和本頁面之前的項目出現(xiàn)了很大程度的重疊,不明白為什么要在同一各頁面放置兩次意思差不多的入口。這里的icon采用了灰+美團主題色,比較有特點,可是不明白第四個是什么情況…點進去之后會出現(xiàn)單獨的代駕入口,和這一頁頂部的icon一模一樣,然后再點擊一次,才會在緩慢加載(因為是靜態(tài)頁面,緩慢到以為它掛掉了…)之后出現(xiàn)代駕頁面。其實不是一個,這四個都是這樣,有點醉。
這一頁應(yīng)該都是擴展的新功能,還在完善中,可能會認為用這幾項功能的用戶相對而言并不多,但是稍稍注重一下用戶體驗還是有必要的。
然后是第三個頁面:
毛玻璃狀的背景,不過向右的箭頭總覺得有些怪怪的。點擊上面的設(shè)置,進入個人設(shè)置,既然這樣就更不理解頭像旁邊的向右箭頭了…下半部分的幾項功能使用不同顏色的icon+文字,便于用戶雙重判斷,而中間“我的訂單”對應(yīng)的四個選項并沒有使用不同顏色的icon,也成功的避免了整頁看起來太花。總的來說,這一面視覺上還可以,也便于用戶來操作。
最后一個頁面是“更多”,其實也就是系統(tǒng)設(shè)置,這里就不去細看了。
從用戶習慣來看,美團首頁八個主要分類的入口是我們使用頻率最高的,很少會向右滑動翻頁;要完成一次下單,最少需要點擊三次,便可進入支付界面,暫時也沒有再簡化的必要。其實對于已上線有一段時間且有很大用戶量的產(chǎn)品,一次細小的改變也許就是很大的代價。往往需要權(quán)衡各方面的利益和損失,才能決定要不要去改。但像美團、淘寶這樣的客戶端,首頁其實是web頁面,這樣在不更新版本的情況下,方便順應(yīng)節(jié)日或重大新聞(放廣告),打開首頁就會看見icon什么的都變了,然后第二天又變回來了。
這里只是談一談個人觀點,如有雷同,純屬緣份。