Web端交互设计走查表

大小熊设计师

北京/UX设计师/7年前/3260浏览

版权

Web端交互设计走查表

大小熊设计师

一篇文章了解Web端交互设计怎样做走查

直接进入正题吧

走查原则

四原则：减轻视觉负担、减轻认知负担、减轻记忆负担、减轻物理负担

说白了就是：让用户可以看的见、看的懂、记得住、够得着。

外接设备

鼠标：Hover、左键点击（按下、抬起）、左键双击、左键长按（选择状态、调节大小、拖拽）、鼠标划过瞬间、右键（右键菜单配置）、响应区域

键盘：快捷键、Tab、方向键

需要外接设备支持的产品，在做交互设计时需要注重产品与外接设备之间的互动与连接和外接设备的属性。

比如：通过键盘快捷键、Tab键实现界面上的一些功能，满足一些用户在没有鼠标操作时也能通过键盘实现操作。

软件环境

Mac：Dock栏（状态、菜单）、工具栏图标

Windows：任务栏（显示、操作、菜单）、最小化托盘（显示、操作、菜单）

其他：通知中心、widget/桌面工具、锁屏界面、桌面快捷方式等

如果你的产品需要同时支持Mac和Windows，那么就要考虑Mac特有系统控件的属性，需要在产品设计时了解Mac和Windows的不同之处。

显示

屏幕PC：调整窗口大小

屏幕移动端：横屏、竖屏

内容：常规、无限大

显示问题需要重点考虑，毕竟用户在了解产品业务之前最直观看到的是它的样子。

网络

网速：无网络、低网速、流畅网络

网络环境：移动蜂窝网、WiFi

加载：全部加载、优先加载、整页加载、自动加载、离线加载

传输：无加密、SSL、蓝牙、VPN

软件产品的用户体验在一定程度上依赖于软件使用时的网络情况，不同网络环境中的产品展示也是设计师的一份工作，当然这也需要研发工程师的配合与协助。不同加载状态下，产品的展示内容是怎样的，都需要在交互设计中有所体现。

界面布局

导航：顶导航、侧导航、底导航

面包屑：可快速定位到不同层级

标题：主标题、副标题

内容：内容区划分

分页：分页区

其他信息：版权、法律条款等

Web端界面布局一般会有以上几个模块，复杂的后台系统还会有一些自定义的模块，具体功能还要以业务需求为准。

界面框架布局

输入

格式：中文（半角、全角）、英文（大写、小写）、符号、密码、邮箱、数字、日期、时间（12小时制、24小时制）、链接

值：字符长度、最大值/最小值、默认值

方式：键盘、控件、语言、指纹、手势

状态：静止状态（提示文字）、获取焦点状态、输入中状态、输入正确状态、输入有误状态

输入框是Web端交互设计中非常常用的一个组件，根据输入内容的格式可以分为很多种，需要注意的是当内容过长时的处理方式，比如：银行卡号是19位数字，用户在输入的时候很容易输入错误或忘记输入到哪位，为了防止用户出错，我们就把19位银行卡号拆成四个字段，在用户输入卡号的时候，系统自动在每五位中间隔出一个空格，这样在视觉上就把容易混淆的数字分解成易分辨的模块了。

提示

错误提示

失败原因：断网/超时/服务器错误/网络切换/账号失效等

引导提示：是否需要引导、新版本介绍、显示/消失条件、多种提示优先级、重复提示的处理

反馈提示

样式：状态切换、文字提示、toast、弹窗

通知提示：支持的操作、点击进入的页面

状态：操作前提示、操作进行中提示、操作成功提示、操作失败提示

分级

强提示：弹框

弱提示：文字提示、toast

弹框是打断用户操作流的一种非常不友好的交互方式，但是在很多场景下我们需要及时告知用户一些错误或警示的消息，所以，我们可以根据业务内容对提示进行分级，用尽量少的提示信息、尽量弱的提示方式帮助用户完成任务。

文本

界面结构：层次分明、布局规范、留白

状态：默认态、空态、极限状态、阅读状态/编辑状态

文案：清晰准确、简短，统一、中英文翻译、是否支持操作、文案过长的情况

语言是产品与人之间进行沟通交流的一种非常重要的工具。通过对文本的分层、布局、排版可以传达给用户丰富的信息。当然，对文本状态的有效区分也可以帮助用户容易理解产品功能，减少错误操作。

表单

设计结构：固定页眉、水平滚动、可调整列的宽度、行风格（斑马条纹）行高固定调节、分页设计、表格可视化设计

交互模式：悬停操作、行内编辑、展开行、快速浏览、模态、多模态、行链接及内容展开、列的排序、列的筛选、搜索列、添加列

状态：默认态、hover状态、空态、只读状态/编辑状态

表单是Web端交互设计中不可或缺的一种设计，主要用于对数据的收纳和展示。清晰的展示和便捷的操作是在设计表单时需要注意的两点。一些微交互：可调整列的宽度、水平滚动、行内快速编辑、搜索列等等都可以帮助用户在操作表单时更加得心应手。当然，还要考虑表单的空态，默认态，hover态等不同状态。

按钮

分级：焦点按钮、普通按钮、loading按钮、危险按钮、不可点击按钮、隐藏按钮

状态：正常态、鼠标悬停时、鼠标按下时、不可点击状态

按钮是执行一个操作的入口，可以根据重要程度对按钮进行分级，不同等级的按钮通过不同的样式表现出来，用于告知用户不同按钮的作用及影响。

搜索

状态：默认态（文字指引）、获取焦点时、搜索中、搜索有结果、搜索无结果，异常状态

功能：实时搜索、非实时结果、最近搜索记录、历史搜索记录、清空搜索记录、模糊搜索、精准搜索

键盘：键盘支持搜索执行操作

搜索功能如果详细来说可以说上好久，后期会做详细介绍，这里先简单概括几点。搜索是用户用于查找想要数据的一种操作。站在用户角度，搜索的准确性、速度、便捷性及搜索结果的可读性及可操作性是用户关心的几个关键因素。所以我们在做交互设计时，需要从这几个方面认真考虑。

下拉列表

格式：文字、选项、图片、单层级、多层级（树结构）

搜索：支持搜索、不支持搜索

选择方式：单选、多选、未选择

状态：正常态、鼠标悬停时、选中态、不可选中状态

下拉列表的交互形式可以有效的减少一些不友好的弹框，让用户的操作行为流更加顺畅。下拉列表中的内容可以分为单层级、多层级、单选、多选、是否支持搜索等样式。

上传文件

格式：多媒体：文本、图片、音频、视频等

格式分类

文本格式： .txt .rtf .doc .xls .ppt .htm/html .wpd .pdf 等

图片格式：.bmp .tiff .gif .jpeg .tga .svg .png等

音频格式：.mp3 .wma .flac. .aac .mmf .amr .wav.等

视频格式：.avi .mpg .mpeg .mpe .m1v .m2v .mpv2 .mp2v .dat .ts .tp .tpr .pva .pss .mp4 .m4v .m4p .m4b .3gp .3gpp .3g2 .3gp2 .ogg .mov .qt .amr .rm .ram .rmvb .rpm等

规格：尺寸、存储大小、数量

校验：格式过滤、编码方式、内容校验、调整图片、文件损坏

转换：格式转换、多媒体压缩

状态：正常态（文字指引）、上传中状态及对应操作（进度、速度、暂停、开始、继续、删除）、上传成功、上传失败、异常状态

上传文件操作在设计时要记得和研发人员进行沟通，因为有些设计方案需要技术的大力支持，有时候在工期紧张时可以先用一些简洁的方案。