有關聊天氣泡框，80%的人都不知道這些……

于設計師來說，越是小的細節越值得注意。本文分析了在設計聊天界面時文字部分和圖片部分中有哪些值得注意的細節，希望對設計師朋友們有所幫助。

聊天氣泡我們很熟悉，每天都要和他打交道。早上醒來第一件事你是不是打開微信看看呢？

那在和朋友聊天時，你有沒有這樣的疑問，為什么輸入文字多少不同，氣泡的展示也不同？為什么發送不同比例的圖片，其縮略圖的展示效果也不同？

作為設計師，搞懂界面背后的原理是很重要的。

本期我就從聊天界面中常見的文字部分、圖片部分來分析，看看聊天界面在設計時需要注意哪些細節。

一、文字部分

聊天界面雖然不是每個APP都需要，但是隨著APP社交化，現在APP上加入聊天界面是很常見的。

在聊天界面設計時，我發現很多人都不知道氣泡框的最大寬度是如何定義的，在標注的時候很容易把氣泡框的寬度標死。

那應該如何標注呢？其實聊天氣泡框我們很容易看出來有兩個變量即a(氣泡框)和b（空白間距），當頁面中有兩個變量時我們就不能用常規的方法進行標注，而是采用百分比的形式才較為合理。

這個比例是多少呢？

通過總結得出：a/屏幕寬度=70%最為適宜。

有小伙伴可能要問，這個70%的數值怎么得來的？

這個主要是界面的一個實際效果決定的，除了這個數值比較接近黃金比例外，它同時能夠最大化展示我們的文本信息。

下面就以微信為例：

我分別對比了750px和640px分辨率下是不是適合這樣一個規律。

由上圖可以看到：微信750和640這兩種分辨率氣泡框最大寬度都是屏幕總寬度的70%。以上數值都是自己推理而來，因此有小伙伴覺得有問題的地方，還歡迎指出。

這里我想說的是如果我們不是做專門的社交類APP，只是平時工作中使用，那么掌握這些方法后能夠讓我們的項目落地即可。

二、圖片部分

聊天界面的圖片部分相對比較復雜，有單張展示和同時多張展示，多張展示相對比較復雜。

今天主要和大家說單張展示，以便大家輕松的掌握聊天氣泡框中單張圖片展示規則。

聊天圖片我們知道往往比例是不固定的，有時候可能是方圖，有時候是橫圖，有時候是豎圖。

這么多圖片尺寸，如何設計一個合理的縮略圖展示規則使得既能夠讓界面整齊美觀，又能夠最大程度滿足展示需求？

關于這里需要引入一個概念——閾值。

閾的意思是界限，故閾值又叫臨界值，是指一個效應能夠產生的最低值或最高值。因此不管是方圖、橫圖、豎圖，只有設定了閾值，我們才能夠輕松解決圖片展示的問題。

通過研究這個閾值往往設置為圖片比例3：1，因為該比例在手機上顯示窄的一邊特別小，影響視覺，因此凡是比例大于3：1的都會被裁切，我們熟悉的微信就是采用這一閾值。

下面還是以微信為例，我們就分別從方圖、橫圖、豎圖來具體分析，看看他是怎么定義的。

1. 正方形圖

正方形圖相對比較簡單，不過不同的APP實現方式不同，當然你也可以采取微信這種，不管是大圖還是小圖上傳都采用統一的尺寸處理。

下面就來進行分析下，我分別發送了4張圖片到微信助手：600x600px；200x200px；100x100px；50x50px。

發送之后的縮略圖展示效果如下：

從上圖可以看出：750分辨率下和640分辨率圖片展示尺寸相同均為270px；同時發送的4張不同尺寸的圖片，其縮略圖展示效果一致，均等比縮放展示在270×270的方形中。

這種方式比較簡單，大家在做的時候可以借鑒。

2. 橫圖

橫圖縮略圖的展示規則相比方圖較為復雜，不過只要采用閾值進行適配，其實也是比較簡單的。

閾值具體怎么用，下面我們還是以微信為例進行解說。

首先為了測試準確性，我做了5組測試圖，分別是4:3、16:9、2:1、3:1、4:1不同圖片的比例。

如下圖用于接下來的測試：

將圖片分別發送到聊天界面，將圖片分別發送到聊天界面，得到如下效果，我分別對圖片進行1到5的排序，方便解說：

通過研究微信的閾值是3:1的圖片比例。

也就是說當圖片比例小于3:1時，寬度固定、高度等比縮放；當圖片比例大于3:1時，圖片的寬度和高度都保持一致，并都以3:1的縮略圖尺寸展示，多于部分隱藏。

從上圖可以發現我上傳的前三張圖片的寬度隨圖片比例變化始終保持一致即270px，而圖片高度隨高度進行等比縮放正好應證了這一結論。

在看第4張和第5張圖片，我分別上傳的是3:1和4:1的比例，但是其縮略圖的展示寬高一致，這就是圖片大于3:1這個閾值時，圖片的寬高以3:1的為準保持一致，圖片超出的圖片截斷不顯示。

3. 豎圖

豎圖縮略圖的展示規則和橫圖類似，其閾值也是3:1，同樣為了更好的理解，我還是以微信為例。

同樣繼續做了5組測試圖，分別是4:3、16:9、2:1、3:1、4:1不同圖片的比例。

如下圖用于接下來的測試：

將圖片分別發送到聊天界面，得到如下效果，我分別對圖片進行1到5的排序，方便解說：

同樣，圖片為豎圖時，圖片比例以3:1為閾值，圖片比例小于3:1時，高度固定、寬度等比縮放；當圖片比例大于3:1時，圖片的寬度和高度都保持一致，并都以3:1的縮略圖尺寸展示，多于部分隱藏。

從上圖可以發現1、2、3張圖片的高度隨圖片比例變化始終保持一致即270px，而圖片寬度不同（圖片寬度由圖片等比縮放而來）。

在看第4張和第5張圖片，我分別上傳的是3:1和4:1的比例，但是其縮略圖的展示寬高一致。

通過上面的解說，想必大家也了解了什么是閾值，以及在做類似社交頁面圖片適配時該如何使用。

三、總結

1. 文字部分

在聊天界面中，標注時出現了兩個變量，這時候我們可以考慮用百分比的方式進行標注。這樣可以做到多個機型進行適配，保證項目能夠順利落地。

2. 圖片部分

在做圖片部分時，需要先設定閾值，然后我們在根據閾值進行方圖、橫圖、豎圖的適配工作。

參考鏈接：http://www.mobileui.cn/story-behind-the-chat-thumbnails.html?from=singlemessage 《聊天縮略圖背后的故事：你不曾注意的那些細節》

作者：風箏KK，公眾號：海鹽社

本文由 @ 風箏KK 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協議

使用APP時，用戶獲得信息往往是通過輸入框，然而這部分卻是很多設計者容易忽略的部分。本篇文章為大家總結了常見的四大輸入框樣式，并分析了其使用場景和注意事項。

輸入框作為頁面中主要的數據錄入入口，可引導用戶錄入信息。我們從APP中獲得的所有信息來源，均是由用戶通過輸入框得來，可見他的重要性。

往往很多APP在設計時卻很容易忽視這塊，標注不清楚、字體限制未標明、文字單行和多行樣式等都不設計出來，導致技術人員在實現時要么靠過往經驗，要么找你繼續了解。

不過無論哪一種方式其實都比較浪費時間，這些如果我們平時去總結分析后，是可以避免的。

今天的文章，我們總結下APP中常見的四大輸入框樣式，即獨立文本標簽輸入框、行內標簽輸入框、對話輸入框、段落文字等，同時總結分析他們的使用場景和注意事項。

一、獨立文本標簽輸入框

獨立文本標簽即在左側以文字的形式提示輸入內容，同時在內容輸入取預設內容，當輸入信息后，由于左側清晰的文字標簽，不管內容多少我們仍然能夠很清晰的瀏覽和操作。

當然由于內容信息的組合、多少不同，我將其歸納為四種形式：

單項輸入
多項輸入
段落文本
多行輸入

以下分別是獨立文本標簽輸入框中的四種形式，掌握這些可以讓我們在表格列表設計中更加高效。

（配圖來自微信小程序規范）

當然，除了知道它有哪些形式是不夠的？

作為設計師，我們還需要知道它對應的一些規范，只有掌握了這些規范，我們才能夠更好的落地，首先來看看有規范和沒規范是怎么樣的。

1. 當沒有規范時：

標題長短未規定，同時輸入文本未對齊，整個界面感覺混亂不堪。

2. 當有規范時：

個界面清晰明了，當你將這個規范交給技術，他就能夠按照你設計的效果實現，而如果你前期設計不到位，技術就按照他自身的想法實現，自然出來的效果你總會說還原度不高，別人也說這個體驗不好。有時候還原度不高，體驗不好，作為設計師你是不是應該好好想想。

下圖以微信小程序規范為例：

最后，掌握了規范還不夠，我們還可以做得更加細化？

1. 設計錯誤提示：在信息輸入錯誤后，即可看到報錯提示，這樣可以提醒用戶讓其及時修正。

市面上很多APP為了方便，直接提交整個表單后才提示錯誤，這樣開發成本雖然降低，但是用戶的操作成本增加，具體如何選擇就看你產品的用戶量如何，當然一個好的用戶體驗需要考慮這些問題。

2. 輸入鍵盤對應輸入信息：輸入框往往有金額、文字、電話號碼、卡號、身份證號輸入等，一個好的交互體驗就是當你需要輸入電話號碼，鍵盤直接幫你定位在數字鍵，當你輸入身份證號，鍵盤直接是數字加X，讓你輸入更便捷不用切換。

上圖你看到支付寶的充值和銀行卡界面，這些細節的體現正是決定一個好的產品和差的產品的區別。

二、行內標簽輸入框

行內標簽輸入框是UI設計中最常見的控件，在絕大多數的場合用來給用戶輸入少量的文字。

比如：搜索、登陸注冊等。

行內標簽相對于獨立文本標簽樣式較為流行，相對較為簡潔，但是對于屏幕上顯示超過2個文本框的情況，行內標簽則不是獨立文本標簽的一個好的取代方案。

其缺點就是一旦用戶點擊了輸入框，標簽就消失了，這樣用戶就不能二次檢查他們輸入的內容是不是他們應該輸入的類型。同時由于已經輸入過一次，因此第二個輸入框很容易被忽略。

三、對話輸入框

對話輸入框常見于聊天消息類界面，其特點是當你輸入一行信息時，不會有什么變化，但是當你輸入多行信息時，如果你不出相應規則，那么后期落地就只有根據技術喜好了。

在設計時，我們不僅要做常規樣式，還需要做輸入多行的效果，這樣開發拿到手才不會一抹黑，也不會在心里默默罵你不專業了。

以微信對話輸入框為例，當文字一行時，輸入框正常顯示；當文字兩行時，輸入框自動向上升，圖標按鈕位置不變；當為五行以上時，文字可上下滑動顯示，同時露出一點文字，讓用戶清楚，上面還有字的情況。

四、段落文字

段落文字的使用場景主要分兩種情況：

一種是常見的APP社交模塊處，具有發表發布的模塊；
一種是設置頁面，需要設置一些個人資料。

1. 發表或者發布模塊：

以新浪微博為例，如果你輸入的文字超出140字，超過該字數則以橙色文字顯示，區別的是他并沒有和其他發布平臺限制字數，而是當文字超出140字時展示會將文字進行折疊顯示。

2. 個人設置模塊：

該位置的輸入框有字數限制，這時候在界面上就會顯示限制文字多少，當前輸入文字多少，同時超出文字范圍，以提示框顯示。

上面以轉轉為例，轉轉個人設置頁面限制300個字，當默認狀態顯示0/300，同時輸入時顯示輸入文字個數，當超出限制字數，則以氣泡提示，這才是一個好的交互流程。

五、總結

獨立文本標簽輸入框：獨立文本標簽即在左側以文字的形式提示輸入內容，因此當輸入信息后，其結構仍然清晰。多用于設置頁面、資料修改頁面等。主要有4中表現形式：單項輸入、多項輸入、段落文本、多行輸入。
行內標簽輸入框：在絕大多數的場合用來給用戶輸入少量的文字，不適用文字列表超過2個的情況。但是由于其樣式流行，因此多用于登陸界面等。
對話輸入框：在設計時需要考慮不同狀態的設計，不要只做個基礎界面就給開發，一行文字情況、多行、超過5行的情況，分別是什么樣式，需要設計并標注清楚。
段落文字：多用于資料修改、文字發布等地，在設計時需要考慮未輸入情況、輸入文字情況、超出文字限制等情況。

參考鏈接

http://www.woshipm.com/ucd/392706.html/ 文本輸入框設計的那些潛規則，你知道多少？

作者：風箏，做個正能量的小太陽，不拖延，不偷懶，勵志為孩子做個好榜樣，公眾號：海鹽社。

本文由 @ 風箏KK 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

著vue3.x越來越穩定及vite2.0的快速迭代推出，加上很多大廠相繼推出了vue3的UI組件庫，在2021年必然受到開發者的再一次熱捧。

Vue3迭代更新頻繁，目前star高達20.2K+。

// 官網地址
https://v3.vuejs.org/

Vitejs目前的star達到15.7K+。

// 官網地址
https://vitejs.dev/

項目介紹

vue3-webchat 基于vue3.x+vuex4+vue-router4+element-plus+v3layer+v3scroll等技術架構的仿微信PC端界面聊天實例。

以上是仿制微信界面聊天效果，同樣也支持QQ皮膚。

技術棧

使用技術：vue3.0+vuex4+vue-router4
UI組件庫：element-plus（餓了么Vue3 pc端組件庫）
彈窗組件：V3Layer（基于Vue3自定義桌面端彈窗）
滾動條組件：V3Scroll（基于Vue3自定義虛擬美化滾動條）
iconfont圖標：阿里字體圖標庫

Vue3.x自定義彈窗組件

大家看到的所有彈窗功能，均是自己開發的vue3.0自定義彈窗V3Layer組件。

前段時間有過一篇詳細的分享，這里就不作介紹了。感興趣的話可以去看看。

vue3.0系列：Vue3自定義PC端彈窗組件V3Layer

Vue3.x自定義美化滾動條組件

為了使得項目效果一致，所有頁面的滾動條均是采用vue3.0自定義組件實現。

v3scroll 一款輕量級的pc桌面端模擬滾動條組件。支持是否原生滾動條、自動隱藏、滾動條大小/層疊/顏色等功能。

大家感興趣的話，可以去看看這篇分享。

Vue3.0系列：vue3定制美化滾動條組件v3scroll

vue.config.js項目配置

/**
 * Vue3.0項目配置
 */

const path = require('path')

module.exports = {
    // 基本路徑
    // publicPath: '/',

    // 輸出文件目錄
    // outputDir: 'dist',

    // assetsDir: '',

    // 環境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否開啟https
        https: false,
        // 編譯完是否打開網頁
        open: false,
        
        // 代理配置
        // proxy: {
        //     '^/api': {
        //         target: '<url>',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '^/foo': {
        //         target: '<other_url>'
        //     }
        // }
    },

    // webpack配置
    chainWebpack: config => {
        // 配置路徑別名
        config.resolve.alias
            .set('@', path.join(__dirname, 'src'))
            .set('@assets', path.join(__dirname, 'src/assets'))
            .set('@components', path.join(__dirname, 'src/components'))
            .set('@layouts', path.join(__dirname, 'src/layouts'))
            .set('@views', path.join(__dirname, 'src/views'))
    }
}

Vue3引入/注冊公共組件

// 引入餓了么ElementPlus組件庫
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

// 引入vue3彈窗組件v3layer
import V3Layer from '../components/v3layer'

// 引入vue3滾動條組件v3scroll
import V3Scroll from '@components/v3scroll'

// 引入公共組件
import WinBar from '../layouts/winbar.vue'
import SideBar from '../layouts/sidebar'
import Middle from '../layouts/middle'

import Utils from './utils'

const Plugins = app => {
    app.use(ElementPlus)
    app.use(V3Layer)
    app.use(V3Scroll)

    // 注冊公共組件
    app.component('WinBar', WinBar)
    app.component('SideBar', SideBar)
    app.component('Middle', Middle)

    app.provide('utils', Utils)
}

export default Plugins

項目中主面板毛玻璃效果(虛化背景)

<!-- //虛化背景（毛玻璃） -->
<div class="vui__bgblur">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" class="blur-svg" viewBox="0 0 1920 875" preserveAspectRatio="none">
    <filter id="blur_mkvvpnf"><feGaussianBlur in="SourceGraphic" stdDeviation="50"></feGaussianBlur></filter>
    <image :xlink:href="store.state.skin" x="0" y="0" width="100%" height="100%" externalResourcesRequired="true" xmlns:xlink="http://www.w3.org/1999/xlink" style="filter:url(#blur_mkvvpnf)" preserveAspectRatio="none"></image>
    </svg>
    <div class="blur-cover"></div>
</div>

Vue3攔截登錄狀態

vue3.0中使用全局路由鉤子攔截登錄狀態。

router.beforeEach((to, from, next) => {
    const token = store.state.token

    // 判斷當前路由地址是否需要登錄權限
    if(to.meta.requireAuth) {
        if(token) {
            next()
        }else {
            // 未登錄授權
            V3Layer({
                content: '還未登錄授權！', position: 'top', layerStyle: 'background:#fa5151', time: 2,
                onEnd: () => {
                    next({ path: '/login' })
                }
            })
        }
    }else {
        next()
    }
})

Vue3.x聊天模塊

如上圖：聊天編輯框部分支持文字+emoj表情、在光標處插入表情、多行文本內容。

編輯器抽離了一個公共的Editor.vue組件。

<template>
    <div
        ref="editorRef"
        class="editor"
        contentEditable="true"
        v-html="editorText"
        @click="handleClick"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        style="user-select:text;-webkit-user-select:text;">
    </div>
</template>

另外還支持粘貼截圖發送，通過監聽paste事件，判斷是否是圖片類型，從而發送截圖。

editorRef.value.addEventListener('paste', function(e) {
    let cbd = e.clipboardData
    let ua = window.navigator.userAgent
    if(!(e.clipboardData && e.clipboardData.items)) return

    if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
        cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
        ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
        return;
    }
    for(var i = 0; i < cbd.items.length; i++) {
        var item = cbd.items[i]
        // console.log(item)
        // console.log(item.kind)
        if(item.kind == 'file') {
            var blob = item.getAsFile()
            if(blob.size === 0) return
            // 讀取圖片記錄
            var reader = new FileReader()
            reader.readAsDataURL(blob)
            reader.onload = function() {
                var _img = this.result

                // 返回圖片給父組件
                emit('pasteFn', _img)
            }
        }
    }
})

還支持拖拽圖片至聊天區域進行發送。

<div class="ntMain__cont" @dragenter="handleDragEnter" @dragover="handleDragOver" @drop="handleDrop">
    // ...
</div>

const handleDragEnter = (e) => {
    e.stopPropagation()
    e.preventDefault()
}
const handleDragOver = (e) => {
    e.stopPropagation()
    e.preventDefault()
}
const handleDrop = (e) => {
    e.stopPropagation()
    e.preventDefault()
    // console.log(e.dataTransfer)

    handleFileList(e.dataTransfer)
}
// 獲取拖拽文件列表
const handleFileList = (filelist) => {
    let files = filelist.files
    if(files.length >= 2) {
        v3layer.message({icon: 'error', content: '暫時支持拖拽一張圖片', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
        return false
    }
    for(let i = 0; i < files.length; i++) {
        if(files[i].type != '') {
            handleFileAdd(files[i])
        }else {
            v3layer.message({icon: 'error', content: '目前不支持文件夾拖拽功能', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
        }
    }
}

大家如果感興趣可以自己去試試哈。

ok，基于vue3+element-plus開發仿微信/QQ聊天實戰項目就分享到這里。

基于vue3.0+vant3移動端聊天實戰|vue3聊天模板實例

在線咨詢

上一篇：html文件刪除如何恢復？恢復誤刪html文件教程
下一篇：CSS文本陰影

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商