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