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