之前去面試某公司UI實(shí)習(xí)生，到了第二輪拥刻，面試官拿出一款app問(wèn)做得怎么樣怜瞒，當(dāng)時(shí)自己的思路是比較隨意的，回來(lái)的路上心想這個(gè)實(shí)習(xí)機(jī)會(huì)怕是要和自己無(wú)緣了……為了學(xué)會(huì)怎樣來(lái)回答“這款app做得怎么樣”般哼，自己去看了一些前輩們的文章吴汪，然后小小的總結(jié)了一下。
要分析一款手機(jī)應(yīng)用蒸眠，有幾種不同的順序
> ?按app的工作順序：
> 按照整個(gè)操作過(guò)程：
下面以美團(tuán)客戶(hù)端為例來(lái)分析一下視覺(jué)和交互漾橙。
首先看一下icon，簡(jiǎn)單的白色“美團(tuán)”二字下面是青色漸變圓楞卡，背景為白色霜运。
（說(shuō)到icon這張圖，為了找到分辨率高一點(diǎn)的蒋腮，可以從apk中拿出來(lái)淘捡，具體可以點(diǎn)這里）
鑒于沒(méi)有引導(dǎo)頁(yè)，這一步就略過(guò)了池摧。
然后是首頁(yè)案淋，這里用大眾點(diǎn)評(píng)做一下參照（兩家競(jìng)爭(zhēng)對(duì)手現(xiàn)在也合并了，于是糯米變成第二了么…）
第一眼看過(guò)去险绘，除了顏色踢京，長(zhǎng)得挺像兄妹。頂部導(dǎo)航欄從左往右都是城市-搜索宦棺，相比后者+號(hào)的功能隱藏瓣距，美團(tuán)把掃碼和消息提醒放在了外面，突出功能代咸。點(diǎn)擊搜索框蹈丸，都會(huì)出現(xiàn)熱門(mén)搜索，美團(tuán)還有個(gè)滑動(dòng)翻頁(yè)。這一部分個(gè)人覺(jué)得還是美團(tuán)做的比較好逻杖。接下來(lái)是扁平化風(fēng)格的各分類(lèi)入口（首頁(yè)黃金位置）奋岁，以不同顏色來(lái)做區(qū)分并且有加深顏色的邊框，橫向滑動(dòng)切換荸百，這里美團(tuán)放了兩頁(yè)闻伶，最后一個(gè)都是“全部分類(lèi)”。至于分類(lèi)的排列順序够话，前者基本是根據(jù)使用頻率排序蓝翰，前兩項(xiàng)都是美食、電影女嘲，實(shí)際上KTV也可以包含在休閑娛樂(lè)的分類(lèi)中畜份。接下來(lái)是限時(shí)搶購(gòu)，顯示了三家店欣尼，占據(jù)正中間的位置爆雹，相比大眾點(diǎn)評(píng)的突出時(shí)間，這里更吸引用戶(hù)的是店鋪愕鼓，畢竟這不是某寶的搶購(gòu)顶别，囤貨的可能性更大。 然后就是各種推廣和推薦了拒啰，不同顏色加粗標(biāo)簽驯绎，如果標(biāo)簽顏色能和相應(yīng)圖片保持統(tǒng)一就更好啦。往下滑谋旦，可以看見(jiàn)banner（廣告專(zhuān)題什么的）剩失，接下來(lái)是（應(yīng)該是最近想主推的新業(yè)務(wù)） 幾個(gè)服務(wù)入口演出賽事、汽車(chē)服務(wù)册着、親子游玩：都是灰色標(biāo)簽 +圖片拴孤。然后是橫向的“好食惠”，點(diǎn)進(jìn)去總有種進(jìn)了大眾點(diǎn)評(píng)的錯(cuò)覺(jué)（文字介紹+評(píng)論+店家入口）甲捏，畢竟合并了也要有所體現(xiàn)演熟，哈哈哈……再繼續(xù)往下就都是“猜你喜歡”了：從左往右依次是圖+店名+團(tuán)購(gòu)選項(xiàng)+價(jià)格（這里還有個(gè)門(mén)市價(jià)，用來(lái)做對(duì)比）+距離+ 已售份數(shù)司顿。底部的選項(xiàng)卡從左往右依次是：團(tuán)購(gòu)芒粹，上門(mén)，我的大溜，更多（系統(tǒng)設(shè)置）化漆。
首頁(yè)的整體感覺(jué)：下拉刷新時(shí)出現(xiàn)小人搖動(dòng)的動(dòng)畫(huà)，增加了萌點(diǎn)钦奋。美團(tuán)的圖標(biāo)和文字顏色都淺一點(diǎn)座云，線(xiàn)條也都細(xì)一點(diǎn)疙赠，顏色看起來(lái)更舒服。
接下來(lái)是上門(mén)頁(yè)面：
嗯朦拖，這一面的頂部導(dǎo)航欄變成了淺色（稍帶一點(diǎn)點(diǎn)灰）圃阳，和首頁(yè)不一樣。一開(kāi)始就是三個(gè)服務(wù)入口：舒服的顏色璧帝，扁平化風(fēng)格捍岳，但總覺(jué)得看起來(lái)不怎么舒服…兩邊的間距比和icon之間的間距要窄很多。繼續(xù)向下看裸弦，分別是洗車(chē)、美容作喘、保潔理疙、車(chē)險(xiǎn)，原諒我見(jiàn)識(shí)少泞坦，洗車(chē)的標(biāo)簽為什么是紫紅色窖贤。下滑之后可以看見(jiàn)“全部頻道”。這四項(xiàng)贰锁，和本頁(yè)面之前的項(xiàng)目出現(xiàn)了很大程度的重疊赃梧，不明白為什么要在同一各頁(yè)面放置兩次意思差不多的入口。這里的icon采用了灰+美團(tuán)主題色豌熄，比較有特點(diǎn)授嘀，可是不明白第四個(gè)是什么情況…點(diǎn)進(jìn)去之后會(huì)出現(xiàn)單獨(dú)的代駕入口，和這一頁(yè)頂部的icon一模一樣锣险，然后再點(diǎn)擊一次蹄皱，才會(huì)在緩慢加載（因?yàn)槭庆o態(tài)頁(yè)面，緩慢到以為它掛掉了…）之后出現(xiàn)代駕頁(yè)面芯肤。其實(shí)不是一個(gè)巷折，這四個(gè)都是這樣，有點(diǎn)醉崖咨。
這一頁(yè)應(yīng)該都是擴(kuò)展的新功能锻拘，還在完善中，可能會(huì)認(rèn)為用這幾項(xiàng)功能的用戶(hù)相對(duì)而言并不多击蹲，但是稍稍注重一下用戶(hù)體驗(yàn)還是有必要的署拟。
然后是第三個(gè)頁(yè)面：
毛玻璃狀的背景，不過(guò)向右的箭頭總覺(jué)得有些怪怪的歌豺。點(diǎn)擊上面的設(shè)置芯丧，進(jìn)入個(gè)人設(shè)置，既然這樣就更不理解頭像旁邊的向右箭頭了…下半部分的幾項(xiàng)功能使用不同顏色的icon+文字世曾，便于用戶(hù)雙重判斷缨恒，而中間“我的訂單”對(duì)應(yīng)的四個(gè)選項(xiàng)并沒(méi)有使用不同顏色的icon谴咸，也成功的避免了整頁(yè)看起來(lái)太花∑叮總的來(lái)說(shuō)岭佳，這一面視覺(jué)上還可以，也便于用戶(hù)來(lái)操作萧锉。
最后一個(gè)頁(yè)面是“更多”珊随，其實(shí)也就是系統(tǒng)設(shè)置，這里就不去細(xì)看了柿隙。
從用戶(hù)習(xí)慣來(lái)看叶洞，美團(tuán)首頁(yè)八個(gè)主要分類(lèi)的入口是我們使用頻率最高的，很少會(huì)向右滑動(dòng)翻頁(yè)禀崖；要完成一次下單衩辟，最少需要點(diǎn)擊三次，便可進(jìn)入支付界面波附，暫時(shí)也沒(méi)有再簡(jiǎn)化的必要艺晴。其實(shí)對(duì)于已上線(xiàn)有一段時(shí)間且有很大用戶(hù)量的產(chǎn)品，一次細(xì)小的改變也許就是很大的代價(jià)掸屡。往往需要權(quán)衡各方面的利益和損失封寞，才能決定要不要去改。但像美團(tuán)仅财、淘寶這樣的客戶(hù)端狈究，首頁(yè)其實(shí)是web頁(yè)面，這樣在不更新版本的情況下盏求，方便順應(yīng)節(jié)日或重大新聞（放廣告）谦炒，打開(kāi)首頁(yè)就會(huì)看見(jiàn)icon什么的都變了，然后第二天又變回來(lái)了风喇。
這里只是談一談個(gè)人觀點(diǎn)宁改，如有雷同，純屬緣份魂莫。
