于设计师来说，越是小的细节越值得注意。本文分析了在设计聊天界面时文字部分和图片部分中有哪些值得注意的细节，希望对设计师朋友们有所帮助。

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

那在和朋友聊天时，你有没有这样的疑问，为什么输入文字多少不同，气泡的展示也不同？为什么发送不同比例的图片，其缩略图的展示效果也不同？

作为设计师，搞懂界面背后的原理是很重要的。

本期我就从聊天界面中常见的文字部分、图片部分来分析，看看聊天界面在设计时需要注意哪些细节。

一、文字部分

聊天界面虽然不是每个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. 多项输入
3. 段落文本
4. 多行输入

以下分别是独立文本标签输入框中的四种形式，掌握这些可以让我们在表格列表设计中更加高效。

（配图来自微信小程序规范）

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

作为设计师，我们还需要知道它对应的一些规范，只有掌握了这些规范，我们才能够更好的落地，首先来看看有规范和没规范是怎么样的。

1. 当没有规范时：

标题长短未规定，同时输入文本未对齐，整个界面感觉混乱不堪。

2. 当有规范时：

个界面清晰明了，当你将这个规范交给技术，他就能够按照你设计的效果实现，而如果你前期设计不到位，技术就按照他自身的想法实现，自然出来的效果你总会说还原度不高，别人也说这个体验不好。有时候还原度不高，体验不好，作为设计师你是不是应该好好想想。

下图以微信小程序规范为例：

最后，掌握了规范还不够，我们还可以做得更加细化？

1. 设计错误提示：在信息输入错误后，即可看到报错提示，这样可以提醒用户让其及时修正。

市面上很多APP为了方便，直接提交整个表单后才提示错误，这样开发成本虽然降低，但是用户的操作成本增加，具体如何选择就看你产品的用户量如何，当然一个好的用户体验需要考虑这些问题。

2. 输入键盘对应输入信息：输入框往往有金额、文字、电话号码、卡号、身份证号输入等，一个好的交互体验就是当你需要输入电话号码，键盘直接帮你定位在数字键，当你输入身份证号，键盘直接是数字加X，让你输入更便捷不用切换。

上图你看到支付宝的充值和银行卡界面，这些细节的体现正是决定一个好的产品和差的产品的区别。

二、行内标签输入框

行内标签输入框是UI设计中最常见的控件，在绝大多数的场合用来给用户输入少量的文字。

比如：搜索、登陆注册等。

行内标签相对于独立文本标签样式较为流行，相对较为简洁，但是对于屏幕上显示超过2个文本框的情况，行内标签则不是独立文本标签的一个好的取代方案。

其缺点就是一旦用户点击了输入框，标签就消失了，这样用户就不能二次检查他们输入的内容是不是他们应该输入的类型。同时由于已经输入过一次，因此第二个输入框很容易被忽略。

三、对话输入框

对话输入框常见于聊天消息类界面，其特点是当你输入一行信息时，不会有什么变化，但是当你输入多行信息时，如果你不出相应规则，那么后期落地就只有根据技术喜好了。

在设计时，我们不仅要做常规样式，还需要做输入多行的效果，这样开发拿到手才不会一抹黑，也不会在心里默默骂你不专业了。

以微信对话输入框为例，当文字一行时，输入框正常显示；当文字两行时，输入框自动向上升，图标按钮位置不变；当为五行以上时，文字可上下滑动显示，同时露出一点文字，让用户清楚，上面还有字的情况。

四、段落文字

段落文字的使用场景主要分两种情况：

• 一种是常见的APP社交模块处，具有发表发布的模块；
• 一种是设置页面，需要设置一些个人资料。

1. 发表或者发布模块：

以新浪微博为例，如果你输入的文字超出140字，超过该字数则以橙色文字显示，区别的是他并没有和其他发布平台限制字数，而是当文字超出140字时展示会将文字进行折叠显示。

2. 个人设置模块：

该位置的输入框有字数限制，这时候在界面上就会显示限制文字多少，当前输入文字多少，同时超出文字范围，以提示框显示。

上面以转转为例，转转个人设置页面限制300个字，当默认状态显示0/300，同时输入时显示输入文字个数，当超出限制字数，则以气泡提示，这才是一个好的交互流程。

五、总结

1. 独立文本标签输入框：独立文本标签即在左侧以文字的形式提示输入内容，因此当输入信息后，其结构仍然清晰。多用于设置页面、资料修改页面等。主要有4中表现形式：单项输入、多项输入、段落文本、多行输入。
2. 行内标签输入框：在绝大多数的场合用来给用户输入少量的文字，不适用文字列表超过2个的情况。但是由于其样式流行，因此多用于登陆界面等。
3. 对话输入框：在设计时需要考虑不同状态的设计，不要只做个基础界面就给开发，一行文字情况、多行、超过5行的情况，分别是什么样式，需要设计并标注清楚。
4. 段落文字：多用于资料修改、文字发布等地，在设计时需要考虑未输入情况、输入文字情况、超出文字限制等情况。

参考链接

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聊天模板实例