過(guò)去的一周，火得不能再火的APP當(dāng)屬羅永浩錘子科技開(kāi)發(fā)的子彈短信APP了，作為一個(gè)從業(yè)多年的UI設(shè)計(jì)師，暫且不去分析它是如何火起來(lái)的，是如何連續(xù)幾天霸居下載排行榜首位的，又是如何融到1.5億風(fēng)投基金的？是否真有400萬(wàn)的有效注冊(cè)用戶？?jī)H從一個(gè)用戶和設(shè)計(jì)從業(yè)者的角度來(lái)說(shuō)說(shuō)自己的使用感受及對(duì)子彈短信App界面設(shè)計(jì)的淺析。
有機(jī)會(huì)了解到這個(gè)App也是源于設(shè)計(jì)圈有朋友建了一個(gè)子彈短信的設(shè)計(jì)師交流群，目前這個(gè)群已經(jīng)達(dá)到500人上限，接下來(lái)我將以從注冊(cè)到體驗(yàn)全程的先后感受以及在整體框架下對(duì)各模塊的下的界面美觀性及設(shè)計(jì)規(guī)范做一些初淺分析（以下分析界面截圖為iphone 6s @2x下的手機(jī)截圖）。
首先給＂老羅＂上圖驗(yàn)證一下，我在蘋(píng)果AAP store 下載時(shí)確實(shí)是位居免費(fèi)類下載榜首的。
啟動(dòng)、引導(dǎo)頁(yè)
子彈短信APP在啟動(dòng)時(shí)只有啟動(dòng)頁(yè)，沒(méi)有引導(dǎo)頁(yè)，啟動(dòng)頁(yè)就是一個(gè)簡(jiǎn)單的淺色灰白漸變+啟動(dòng)圖標(biāo)組成，幾乎沒(méi)有設(shè)計(jì)成分，既沒(méi)有Slogan,也沒(méi)有版權(quán)聲明信息，從啟動(dòng)頁(yè)和引導(dǎo)頁(yè)的功能層面來(lái)說(shuō)，應(yīng)該是需要起到品牌形象強(qiáng)調(diào)和功能引導(dǎo)的作用，跟其他類型APP的啟動(dòng)頁(yè)相對(duì)，從視覺(jué)和品牌傳播的角度來(lái)看，顯示是做得不夠的。假設(shè)如果從APP主色定位出發(fā)，背景設(shè)置為深藍(lán)色，再配合“子彈短信是一種快于閃電的聊天應(yīng)用”這句Slogan進(jìn)行畫(huà)面創(chuàng)意表現(xiàn)，一顆呼嘯的子彈從背景上擦出彈痕，映入眼簾，又會(huì)是一種怎樣的畫(huà)面體驗(yàn)感呢？
登錄、注冊(cè)界面
APP啟動(dòng)頁(yè)完成之后，進(jìn)入眼界的就是登錄注冊(cè)頁(yè)面，布局以按鍵列表式點(diǎn)擊后進(jìn)行分頁(yè)面登錄注冊(cè)，從界面截圖標(biāo)注的按鍵尺寸，文字大小，標(biāo)題文字與說(shuō)明文字之間的層級(jí)關(guān)系及主次關(guān)系處理來(lái)看，還是比較常規(guī)合理的。頂部的狀態(tài)欄和標(biāo)題欄合二為一的藍(lán)色底色填充，是我在整個(gè)APP里頭最能明顯感受得出來(lái)的主調(diào)顏色，在接下來(lái)的界面中，你會(huì)發(fā)現(xiàn)并無(wú)輔色搭配的應(yīng)用。
讓我不能理解的是，背景紋理應(yīng)用的是一個(gè)布紋，也許是紙紋吧，（記得老羅是非常喜歡錘子手機(jī)主題中的木紋效果的，會(huì)不會(huì)是“老羅”干涉了設(shè)計(jì)師的思路？）如果是借鑒IOS中備忘錄的背景為何不采用一個(gè)更像紙紋紋理呢？畢竟是跟聊天和辦公有關(guān)的一款聊天應(yīng)用啊，而且B:90%布紋灰作為背景是否略顯暗了一些呢？還有一處不是特別認(rèn)可的就是：那個(gè)承載APP圖標(biāo)和Slogan的圓角矩形框是否真的有存在的必要，圖標(biāo)和標(biāo)語(yǔ)就不能直接考慮放在背景上？切102px大小的圖標(biāo)在碩大的一個(gè)框里也略顯比列失衡，顯得小氣了一些。
還是就是注冊(cè)、登錄的兩個(gè)按鈕，如果有一個(gè)輔色進(jìn)行匹配的話，就不至于另一個(gè)按鍵顯得是多么的蒼白。
主對(duì)話界面
注冊(cè)登錄完成后可直接進(jìn)入到主對(duì)話頁(yè)面，但是當(dāng)?shù)谝淮蔚卿洉r(shí)，對(duì)話頁(yè)面中空空如也，中間頁(yè)面一大片空白頁(yè)也沒(méi)有任何人性化的頁(yè)面信息提示，給用戶有一種冷清找不著邊的感覺(jué)，如果開(kāi)發(fā)團(tuán)隊(duì)能考慮到一些人性化的提示小插圖或者溫馨提示文字，那這種用戶體驗(yàn)的熱情度就會(huì)持續(xù)攀升。
當(dāng)我在添加聊天群并參與群聊和添加好友后，主對(duì)話頁(yè)面就變得豐富起來(lái)，縱觀整個(gè)頁(yè)面的布局，頂部菜單欄位置采用tab選項(xiàng)按鈕布局，由“所有消息”“稍后處理”兩個(gè)tab按鍵組成，
默認(rèn)顯示的是“所有消息”內(nèi)容列表。一個(gè)整條的全局搜索欄至于tab選項(xiàng)卡的下方，當(dāng)輸入搜索文字時(shí)會(huì)觸動(dòng)列表區(qū)域的黑色遮罩。
中間部分為全局信息綜合列表區(qū)域，列表由聊天群和好友列表組成，每組信息包含頭像、昵稱、最新消息時(shí)間、以及展示一條最新聊天消息所組成。
單從體驗(yàn)層面來(lái)講，這種直接查看信息，回復(fù)信息，備注信息的快捷處理方式還是不錯(cuò)的，而且在回復(fù)時(shí)可自由切換選擇“文本回復(fù)”還是“語(yǔ)音+即時(shí)文字翻譯”模式，可以說(shuō)是針對(duì)了微信的痛點(diǎn)精準(zhǔn)點(diǎn)對(duì)點(diǎn)的進(jìn)行了優(yōu)化創(chuàng)新。
大家可以仔細(xì)看下我截圖標(biāo)注的規(guī)范，從標(biāo)注出來(lái)的對(duì)話頁(yè)界面各元素設(shè)計(jì)規(guī)范來(lái)看，雖然各元素尺寸都遵循偶數(shù)、4px、8px的倍率進(jìn)行了尺寸規(guī)范，左右兩邊的邊距也還算是常規(guī)，但是界面中控件元素及文字的設(shè)計(jì)規(guī)范尺寸比常規(guī)的APP整體偏小了2px左右，比較明顯的有頂部的兩個(gè)tab選項(xiàng)按鍵，相比IOS原生的58px高度縮放到了55px,上面的文字也只有28px,相比一級(jí)標(biāo)題文字的34px,顯然還是偏小了不少。
控件按鈕等的尺寸也是比較捉肘，左上方的語(yǔ)音、文本回復(fù)切換按鍵真的可以說(shuō)是又小又矬，其次就是主界面右側(cè)的文本回復(fù)按鍵上的箭頭圖標(biāo)，我也是醉了，這明明是一個(gè)返回圖標(biāo)啊，竟然也可以這么用；再就是群和好友的星標(biāo)圖標(biāo)的尺寸也是小得異常（20PX），排放的位置也不是特別合理,看不出來(lái)標(biāo)與不標(biāo)有啥太大的區(qū)別。
最下方標(biāo)簽欄上的主icon圖標(biāo),整體48px的大小，4px的外框粗細(xì)，應(yīng)用在并不簡(jiǎn)潔的圖標(biāo)上，顯得就感覺(jué)有點(diǎn)臃腫粗略，圖標(biāo)顏色的灰度值也有些偏低，導(dǎo)致整體上的效果并不突顯與精致。
綜上所述，在其它頁(yè)面當(dāng)中，都存在界面元素過(guò)小的現(xiàn)象，對(duì)于看慣了大字體，用慣了大屏幕手機(jī)還是有那么一丟丟的閱讀障礙的。
通訊錄界面
通訊錄頁(yè)面默認(rèn)采用的是常規(guī)的英文字母排序列表，分別由頂部的“全部”、“星標(biāo)”“新朋友”三個(gè)tab選項(xiàng)按鍵進(jìn)行分類列表呈現(xiàn)，外加一個(gè)全局聯(lián)系人搜索框，這種通訊錄排列的方式并無(wú)異議，而且直接將APP與手機(jī)通訊錄相對(duì)接就能發(fā)信息和撥打電話也是有是蠻方便的，但是這種赤裸裸直接獲取用戶手機(jī)通訊錄的行為手段已經(jīng)涉及到了用戶的隱私，憑什么我的私人通訊錄為何一定得顯示在你的APP里頭，這樣做也難免會(huì)不會(huì)被利用衍生出一些后期短信及電話騷擾的問(wèn)題？所以這種對(duì)接手機(jī)通訊錄的功能也是有利有弊的。
從界面角度分析來(lái)看，頂部已經(jīng)安排有兩個(gè)以上的tab按鈕，但是在兩個(gè)按鍵之間并無(wú)分隔線，這對(duì)于用戶在選擇的時(shí)候會(huì)不會(huì)有那么一點(diǎn)兒的猶豫找不準(zhǔn)地呢？
在聯(lián)系人詳情頁(yè)里頭，矩陣式列表和按鈕樣式完全區(qū)分不開(kāi)來(lái)，蒼白的按鈕毫無(wú)點(diǎn)擊的欲望。
資訊流界面
資訊流采集的是“今日頭條”和“騰訊新聞”的資訊，這種完全拿來(lái)主義的新聞列表，基本沒(méi)有什么亮點(diǎn)可言，從截圖來(lái)看，竟然還能夠看到黑自家APP的新聞資訊出現(xiàn)，這是完全沒(méi)有自主把控權(quán)啊?。?/p>
從新聞列表的樣式來(lái)看，界面的排版也是欠規(guī)整美觀的，況且每條新聞細(xì)小的導(dǎo)讀文字（20px），實(shí)在讓人看得蛋痛?。?/p>
收藏頁(yè)界面
“老羅”發(fā)大力氣，獨(dú)立用一個(gè)標(biāo)簽欄來(lái)存放處理收藏的信息，可見(jiàn)這才是子彈短信APP的亮點(diǎn)啊，對(duì)信息的處理，對(duì)信息的重視，從不能及時(shí)處理和查看重要聊天信息的角度來(lái)看，對(duì)重要信息的獨(dú)立處理還是有這種需求的，這也許才是子彈短信以后的出路，不過(guò)對(duì)于小編這種不務(wù)正業(yè)，整天閑聊得人來(lái)說(shuō)，又有幾句短信是值得我去收藏呢？那老羅的這個(gè)收藏專屬標(biāo)簽欄是
不是得閑置在拿里了呢？
個(gè)人中心頁(yè)
個(gè)人中心頁(yè)面的布局倒是挺簡(jiǎn)明扼要的，塊面之間的間距也算合理，并沒(méi)有多余的無(wú)用選項(xiàng)，只是在添加好友時(shí)的驗(yàn)證信息框中的默認(rèn)昵稱文字，非得一個(gè)一個(gè)字的刪除才能填寫(xiě)新的驗(yàn)證信息，真心費(fèi)勁！其次就是那個(gè)加載的黑白漸變旋轉(zhuǎn)圖標(biāo)，真心有點(diǎn)望著著急！
其它頁(yè)
群聊體驗(yàn)群里，要想@全部好友，還真心不是件容易的事情，點(diǎn)擊頁(yè)面群名稱就可彈出@好友列表，在一種類似中性灰的底色上密密麻麻，歪歪扭扭的列表中，一個(gè)一個(gè)去點(diǎn)擊加入@行列還真有點(diǎn)措手不及的。
在類似下圖中還沒(méi)有信息流可處理的頁(yè)面當(dāng)中，初淺的頁(yè)面提示文字根本勾不起我去戳動(dòng)它的欲望。
最后上一波圖標(biāo)截圖，這個(gè)老羅還是幫大家考慮得很周到的，畢竟子彈短信還是一款聊天應(yīng)用，在這個(gè)看圖、看臉、打臉的時(shí)代，沒(méi)有各式方格的聊天圖標(biāo)怎么行呢？我膽敢說(shuō)在這淘聊天圖標(biāo)當(dāng)中，“老羅”的形象圖標(biāo)算是最最經(jīng)典的了，看那下跪的真誠(chéng)度，不來(lái)體驗(yàn)一把還真是你的錯(cuò)！
再上兩張APP功能框架及信息發(fā)送流程圖
[完]
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
