現今,不僅傳統的手機端聊天,社交以及通訊軟體提供聊天介面(方便使用者相互交流和了解),一些新起的手機端線上購物和商務類應用,為提升使用者體驗,瞭解實時變化的使用者需求,並及時收集使用者反饋,也專門新增了聊天板塊,易於使用者瞭解和詢問產品,公司相關資訊。
然而,不管哪類軟體,聊天介面或板塊的設定,終究都是為了方便使用者資訊輸入,傳送以及閱讀。但這並不意味著,所有聊天介面都應該只包含這些枯燥或一層不變的佈局或功能,而應該結合具體的使用場景,產品公司特色,以及設計師創意,設計出體驗極佳,美觀且流暢的聊天介面/板塊。
那麼,具體怎樣才能設計出美觀,炫酷又實用的聊天介面或板塊呢?以下,小編將為大家展示並解析12款最新且極具創意的手機端聊天介面設計,希望能夠對廣大設計師朋友們有所幫助:
設計師:Dmitry Seryukov
亮點:獨特的視屏新增和展開方式以及經典時尚的黑白配色的應用
該款設計採用從手機一角逐漸擴充套件到全屏的方式來新增和展開分享視訊的方式,獨特新穎。而且,其經典的黑白配色,也使整個設計更加地優質時尚。此外,其導航欄動畫以及底部簡潔易用的文字和媒體輸入設計,也極大地簡化和提升了使用者體驗。
學習點:
*為你的聊天介面/軟體設計一種獨特新穎的視訊/音訊新增和展開方式
*為你的介面選擇最佳的配色方案
經典的黑白搭配,一般給人以大方時尚之感。藍白搭配給人以安靜祥和之感。而粉白搭配,則更適合針對女性群體的購物或聊天軟體使用。總之,根據你的聊天介面或軟體的特色或使用場景,選擇最佳的配色方案。當然,在設計某個聊天頁面時,也要注意與整個軟體主色調相協調。(點選瞭解更多UX/UI設計中常用配色)
設計師:Albert Zikmund
亮點:結合產品或軟體特點進行設計
作為一款專為星巴克咖啡而設計的手機應用聊天介面,設計師結合使用者所熟知的星巴克的綠色商標,而設計了整體以綠色為主題色的介面。同時,結合其線上服務特點,特意新增了客戶資訊收集頁面,便於收集使用者反饋的同時,也利於為使用者提供更加貼心優質的線上服務。
學習點:
*結合軟體,產品或公司特色,適當新增相關內容
所以,在你的聊天介面或軟體設計中,也可將軟體,產品或公司特色作為切入點和閃光點,拉近與使用者距離的同時,引起共鳴。
例如,設計一些遊戲的聊天介面或板塊時,可以新增一些經典遊戲人物頭像,具有遊戲特色的圖示或按鈕,增強介面趣味性和可用性。
又或者,在設計一些線上購物軟體的聊天介面時,也可新增一些動態的產品展示板塊,以增加產品曝光率,減緩偶爾因客服不及時回覆,而給使用者帶來的負面情緒等等。
3.Chatlio
設計師:Balkan Brothers
亮點:柔和的繪畫氣泡設計和舒適的色彩應用
該頁面設計採用了統一的紫色系列配色,使整個頁面美觀而舒適。其柔和的圓角會話氣泡設計,也讓整個頁面不至於因為簡潔乾淨的排版設計而顯得太過呆板枯燥。而且,其簡潔乾淨的介面,使用者體驗也是極好的。
學習點:
*為你的聊天介面設計不同的配色系列,方便使用者根據需要和喜好進行選擇
在你的聊天介面設計之中,也可採用該款介面的配色方式,為你的介面設計多種配色或皮膚,方便使用者根據不同需要,心情,性別以及喜好進行個性化的選擇,讓你的聊天介面具有更高定製化功能。
設計師:Hummingbirdsday
亮點:極具特色的塗鴉板設計
該款聊天介面設計的最大的亮點,就是其類似塗鴉板的文字輸入設計,不僅允許手機軟體使用者,簡單方便的新增文字,修改字型顏色和風格,而且還可根據需要直接繪製和新增相關塗鴉,直觀有趣,極具特色。
學習點:
*設計和新增直觀有趣的塗鴉板,點亮你的聊天介面/軟體設計
設計師:Daniel Boros
亮點:採用聲音,而非傳統文字,為主的交流方式
作為一款專為遠端團隊協作而設計的群聊軟體,該款軟體的聊天介面,有別於一般介面以文字輸入為主的交流方式,而是採用了全新以聲音交流為主的方式,從而使團隊協作更加快速高效。使用者長按錄音圖示,即可開始記錄,鬆開即可結束,操作起來簡單方便。
而且其介面導航欄新增的豐富圖示和按鈕,也極大地擴充頁面功能,易於使用者簡單快捷地實現頁面轉換。
建議:
*新增一些聲音交流按鈕或圖示,方便使用者自由的選擇文字或聲音交流方式
設計師:K.Mohit
亮點:底部功能區隱藏和展開方式
雖然這款設計並不是完整的聊天介面設計,但其極具特色的底部功能區擴充設計也是非常值得效仿的。除去一般的文字編輯和表情圖示新增按鈕,設計師採用了點選按鈕即可展開附加功能區的獨特設計,不影響介面簡單整潔的同時,也有有效的擴充了介面功能,對於提升使用者愉悅體驗也是極好的。
學習點:
*採用點選按鈕展開或隱藏功能區的設計擴充聊天介面功能
*預留多個底部功能區設計方案,根據具體的原型測試結果,選擇使用者體驗最佳的一款
當然,不是所有的使用者聊天介面都適合該款介面所使用的功能擴充方式,而且具體用於擴充的按鈕位於底部哪個位置更易於帶來愉悅的使用者體驗等等, 都是值得再深入考慮的問題。所以,在實際的設計中,最好預留多個底部功能區設計方案,在選擇好一款優秀的原型工具(例如方便快捷的原型工具Mockplus), 製作成可視原型之後,通過反覆測試和分析使用者反饋,選擇最佳的設計方案,而不是毫無基礎的主觀臆測。
設計師:irfanfaiz
亮點:極簡化設計風格
該款聊天介面採用可當下相當熱門的極簡化設計風格。雖然介面直觀可視的功能和按鍵並不多,但卻更易於使用者集中於聊天資訊的輸入,傳送以及閱讀。這類儘可能減少低頻噪音的極簡化設計,對於加速頁面載入,提升使用者體驗方面的作用也是極大的。而且,其採用漸進式設計方式新增的隱藏選單欄,對於介面本身的功能擴充也是非常有效的。
學習點:
*採用極簡化設計風格
極簡化設計風格,作為最近幾年日益流行的設計趨勢,並不是一味的減少介面功能或部件,而是使用有限的部件打造出更簡單更易用設計,以提升使用者體驗。所以,在你的聊天介面的設計中,也可使用這種設計方式,靈活的應用各種留白,線框,簡單直觀的按鈕或圖示以及趣圖,優化聊天介面設計。(點選檢視更多2018年UX設計風格和趨勢)
設計師:Cuberto
亮點:有趣的動態背景圖
該款設計最突出的特點,就是採用了動態的背景圖片,以增強聊天介面的趣味性。而且其主選單可展開的擴充功能區,優化了軟體功能的同時,也極大地提升軟體吸引力。
學習點:
*新增動態的圖片,不僅僅是背景圖片,以增強聊天介面的趣味性和獨特性
設計師: noterrain
亮點:貼心的常用句子選擇
為優化使用者體驗,該款聊天頁面設計提供了聊天中一些常用句子選擇。使用者無需一一輸入,即可根據各種情境選擇需要的相關語句進行交流。這一點上是相當貼心的。而且,其多樣的會話泡泡設計,對於使用者簡單直觀的區分和閱讀自己和他人的資訊也是非常有效的。
學習點:
*新增常用句子,表情包,圖片或圖示選擇,提升聊天頁面的使用者體驗
*設計多種形狀,顏色和字型的會話泡泡,以方便使用者區分和閱讀聊天資訊
設計師: Jakub Antalik
亮點:特色的文字流體特效
該款設計最具特色的是其如魚破水而出般的文字流體效果,讓整個介面更加的靈動有趣。
學習點:
*設計和新增特色的文字,按鈕或氣泡特效,增強頁面吸引力
設計師: Vlad Tyzum
亮點:可愛有趣的動畫表情
儘管該款設計僅僅只是聊天軟體的歡迎頁面,但其可愛有趣的動畫表情,對於獲取使用者好感,實現與使用者的情感交流,效果也是顯而易見的。
學習點:
*新增動態的表情圖示,動畫或互動,實現與使用者的情感交流
12.Chat Bot
設計師: Valentin Salmon
亮點:先進的聊天機器人設計
該款聊天軟體集中展示了其先進的聊天機器人設計,可愛調皮的小機器人外觀,有效地拉近了與使用者的距離。貼心及時的回覆,對於提升使用者體驗也是非常有效的。
學習點:
*新增聊天機器人或類似先進技術豐富你的聊天介面
這些就是小編收集的極富創意的聊天介面或板塊設計,希望能對你有所幫助。
Mockplus助你輕鬆快捷地製作,測試,演示和分享各類聊天介面/軟體設計
聽完小編對於以上12款最新創意軟體介面或軟體設計的解析,是否靈感滿滿?且急需一款滿意的原型工具,簡單快捷地製作和迭代這些聊天介面/軟體,從而更加直觀生動的展示這些設計理念,讓使用者和投資人眼前一亮?不用擔心。Mockplus無疑是你的最佳選擇。作為一款更快更簡單的原型工具,Mockplus不僅提供了豐富而強大的功能助你快速且最大化的將介面設計理念轉化成可視的優質原型,而且Mockplus在原型的測試,演示和分享,動效新增,介面轉換特效等方方方面面的功能也是極佳的:
1.Mockplus提供了強大而豐富的功能助你製作美觀優質的聊天介面/軟體原型
1). 利用多樣的氣泡和表情圖示,豐富你的聊天介面/軟體設計
會話氣泡和表情圖示,作為聊天介面/軟體設計中必不可少的兩個元素,時常被UX/UI設計師用以增強介面趣味性和獨特性。 而Mockplus封裝的強大圖示庫(包含3000多個向量圖示),提供了豐富的氣泡和表情圖示, 方便設計師根據各自需要新增並編輯,以豐富其介面設計。
2).利用GIF元件新增動態表情包,圖示或圖片,增強介面趣味性
聊天介面/軟體設計中,新增動態的表情,圖示或圖片,對於增強介面趣味性,效果也是非常明顯的。而Mockplus提供了專門的GIF元件,方便設計師根據各自需求,新增動態背景圖片,表情包或圖示,增強介面吸引力,提升使用者體驗。
3).利用“標籤”和“多行文字元件”新增各類聊天文字
聊天文字作為聊天介面中幫助使用者相互交流和了解的重要載體,是聊天介面或軟體設計中最核心的部件之一。而Mockplus提供了簡單拖拽即可新增使用的“標籤”和“多行文字元件”元件,方便設計師根據設計需要新增各種顏色,風格和特效的交流文字。
4).利用其聊天和社交軟體示例,快速製作和轉化你的介面設計理念
對於聊天介面的某一部件或模組創意滿滿,但卻不想一步一步的從頭製作整個介面或軟體,實現靈感的原型化?Mockplus提供大量常用軟體和介面示例,方便設計師簡單下載匯入,即可根據想法,修改和提升需要的部件或模組,快速製作和完成聊天介面/軟體界設計,無需從頭開始。
2.Mockplus助你更加直觀生動的測試,演示和分享各類聊天介面/軟體設計
1).簡單拖拽即可為你的聊天介面/或軟體新增豐富靈敏的互動和動畫
聊天介面文字,圖片,圖示以及按鈕的互動和動效,對於優化介面使用者體驗也是極其有效的。而Mockplus擁有多種互動命令,方便設計師簡單拖拽連結點,即可實現各類互動和動畫的新增。而且,其提供的各類頁面轉換特效,對於製作更加流暢多變的聊天軟體原型,也是非常值得嘗試的。
2).8種預覽和分享方式,方便測試,演示和分享原型,輕鬆抓住使用者和投資人的心
Mockplus提供了8鍾預覽和分享方式,方便設計師通過各種常用裝置,更加直觀和生動的測試,演示和分享其聊天介面/軟體原型。而這對於設計師及時獲取使用者反饋,獲得投資人的青睞,是非常實用的。
總之,無論你是需要原型工具簡單快捷的原型化你的聊天介面/軟體設計理念,還是希望能夠更加直觀生動的測試和展示你的聊天設計,Mockplus都能滿足你各方面的需求。
總結
聊天介面,板塊或軟體設計,對於設計師來說,不僅僅是設計和建立一個可供使用者簡單輸入文字進行交流的平臺,更應該是一個能夠讓使用者自如的表達和流露情感,展現個性,又不受介面所累的貼心載體。而軟體或介面中展示的各種元素,排版,媒體的新增,主題的選擇,互動的設計,文字風格顏色,甚至小到圖示或按鈕的選擇和排列,都將影響到軟體或介面本身的外觀,以及使用者的體驗。這也是為什設計師們需要選擇和使用一款優質的原型工具(例如以上介紹的Mockplus),最大化的現實化設計理念的同時,更加簡單快捷的測試和展示其可用性以及獨特性。
總之,希望這裡介紹的12款最新創意聊天介面設計和原型工具能對你有所幫助。