• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 平面理論教程 ] 詳解新版微博App聊天界面優化經驗總結—- 設計教程




    教學主題: 詳解新版微博App聊天界面優化經驗總結

    大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

    今天的這個教學主題是: 詳解新版微博App聊天界面優化經驗總結

    這教學的重點為這幾點 [ 優化,經驗,總結,界面,聊天,新版,詳解,氣泡,我們,問題, ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    微博是一款典型的信息流產品,早期微博IM復用了信息流的一些設計,並且已經很久沒做大的更新迭代,導致現有的設計與實際場景不符。為了讓用戶更自然的聚焦在對話體驗之中,我們對現有界面進行了重新梳理,來看看微博設計團隊對於微博IM界面的優化設計項目總結

    微博是一款典型的信息流產品,早期微博IM復用了信息流的一些設計,並且已經很久沒做大的更新迭代,導致現有的設計與實際場景不符。為了讓用戶更自然的聚焦在對話體驗之中,我們對現有界面進行了重新梳理,來看看微博設計團隊對於微博IM界面的優化設計項目總結​。

    詳解新版微博App聊天界面優化經驗總結

    △ 新舊方案對比(右圖為新方案)

    ​如上圖所示,在左側舊方案上,“海淘”“音樂” 分享鏈接卡片就是剛提到復用信息流的卡片樣式,視頻、紅包、音樂、文章…等等都分復用了這類卡片樣式,這種樣式佔用大量空間,畫面切割感強,容易打破會話,左右的從屬關係弱並且多出一些無用信息。

    在布局上,國內主流IM產品的區域劃分、從屬關係非常明顯,左側區域就是他人態內容,右側就是主人態內容,標杆產品微信和手Q都培養了大批的用戶習慣 ,那麼我們能做些什麼?視覺上是如何處理的?

    我們這次的優化工作主要是從三個維度進行的:

    詳解新版微博App聊天界面優化經驗總結

    圖形元素:由點、線、面構成的一些基本圖形的表達

    界面布局:X軸和Y軸上個體圖形和單位模塊之間的間距、尺寸關係

    單位模塊:紅包、名片、圖片、地圖、視頻、音樂….

    圖形元素

    先說下圖形元素,因為氣泡會大量的出現,所以我們着重說一下氣泡​,微博氣泡有個比較明顯的問題就是,氣泡角過於尖銳並頂着用戶頭像,吸引無效注意力並讓人產生不適感。

    詳解新版微博App聊天界面優化經驗總結

    ​​​對比微信,微博氣泡角不適感更強,主要有兩個原因:

    1. 微信黑色文字最強,綠色氣泡次之,背景最弱,它的明度是呈現逐層遞減的,突出了文字,微博氣泡藍色背景最強,文字次之,背景最弱,這時氣泡角的問題就變得特別明顯。

    2. 第二個原因微信綠色氣泡明度更高,更融背景,微博藍色氣泡的明度更低與背景反差更大。

    怎麼解決這個問題?我們做了一個簡化了的氣泡打磨過程,如下圖:

    詳解新版微博App聊天界面優化經驗總結

    從圖1-2,我們先解決氣泡角造型的不適問題,之前圓角過小且有對外指向性,顯得生硬,我們加大了圓角角度,讓整個氣泡感更強,但該方案有個明顯的問題,氣泡角並沒有指向頭像。

    從圖2-3,調整氣泡角指向問題,但該方案運用到圖片、紅包設計時我們發現,圓角不對稱性讓人覺得怪異,尤其是紅包這種具有中國傳統特色的設計時更加明顯。

    最終從圖3-4,我們調整氣泡角的位置,保護了圓角的對稱性,同時讓氣泡角下弧線更加平滑與頭像關聯,從而降低了原氣泡角過於激烈的視覺樣式。

    看看我們具體是如何調整的:

    詳解新版微博App聊天界面優化經驗總結

    實際上圖形打磨是個發現問題解決問題的過程,但它更像一個樹狀結構,每一像素變化都會帶來圖形指向、造型契合度、整體性不一樣的感受,我們需要去平衡它們的關係,並選取最優方案,看看最終方案我們是如何去平衡圓角、氣泡角、頭像之間的關係的。

    詳解新版微博App聊天界面優化經驗總結

    △ 氣泡最終方案

    ​最終方案中,圓角大小為單行氣泡四分之一高度,氣泡與頭像、氣泡角與頭像的間距都處於1個單位的間距,氣泡角與圓角轉角處,為2分之1單位剛好保護了圓角對稱感不被破壞。

    我們認為合適的圓角角度既能勾勒出曲線的柔美,又能保證形體的穩定,並且可以幫助用戶將目光引向中心,突出對話內容。

    這種經過深度打磨的圖形能讓界面顯得更穩定、可靠​。

    界面布局

    舊的界面布局有我們剛剛提到的畫面切割感強,從屬關係弱,空間利用率低等問題,從下圖可能較為直觀的對比出一些問題:

    詳解新版微博App聊天界面優化經驗總結

    △ 新舊布局對比(右圖為新布局)

    1. 橫軸布局的變化

    在保證內容顯示的基礎上,收縮了空間,調整文字內容的最大寬度,文字與氣泡的間距,而這節約出來的空間讓界面更緊湊,區域劃分更加明顯,而這些間距關係變化也充分利用了格式塔原理的相似性、接近性和對稱性,讓界面單位和個體的層級不被破壞性…

    詳解新版微博App聊天界面優化經驗總結

    △ 橫軸變化

    2. 縱軸布局的變化

    間距關係從一種新增至兩種,增強他人態與主人態之間對話內容的間距關係劃分,強化了氣泡的縱向分組,進一步強化從屬關係。

    詳解新版微博App聊天界面優化經驗總結

    △ 縱軸變化

    單位模塊

    單位模塊主要都是一些顯示效果問題,例如,圖片太小、LBS識別度低、紅包太弱等…如下圖所示:

    詳解新版微博App聊天界面優化經驗總結

    △ 舊方案

    1. 合理的圖片尺寸

    當圖片與氣泡最大寬度呈黃金分割比例之時,既不會出現加載效率和流程性問題,又能保證一定的舒適度。

    詳解新版微博App聊天界面優化經驗總結

    2. 增強LBS的可用性

    我們加強了LBS信息顯示和識別度,讓用戶在對話頁就能獲取到相關地理位置信息,讓LBS的可用性和實際場景更符合。

    詳解新版微博App聊天界面優化經驗總結
    貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
    使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
    用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

    3. 紅包體驗升級

    強化了紅包的顯示效果,並使之更具中國特色。

    詳解新版微博App聊天界面優化經驗總結
    貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
    的選區;按住Alt鍵將從起始點為中心勾劃選區。

    總結

    我們這次優化的目標是思考能為用戶解決什麼問題?核心是聚焦對話。細節的深度挖掘打磨、布局梳理、強調互動性等等…所要傳達的視覺表現都是建立在這個目標之上。

    多角度,不同因素綜合考慮,在美感與實用性中尋找平衡,合理的運用一些設計法則,與實際用戶場景結合,能讓界面變得更加舒適、可靠。

    詳解新版微博App聊天界面優化經驗總結

     

    看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

    希望我們所介紹的 詳解新版微博App聊天界面優化經驗總結 這教學會喜歡

    文章標題: 骨子愛創意- 詳解新版微博App聊天界面優化經驗總結–轉載請註明來源處

    本教學分類為平面理論教程中的 設計教程相關教學

    文章相關關鍵字為: 優化,經驗,總結,界面,聊天,新版,詳解,氣泡,我們,問題,

    本文永久連結 :詳解新版微博App聊天界面優化經驗總結

    本文轉載自 :VIA