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