这五大要素告诉你，如何设计一个好用的后台

作者: 折翼骆驼 | 来源:发表于2019-04-08 16:01 被阅读0次

本文笔者将为大家分析后台设计的五个要素：辅助设计、表单设计、搜索栏设计、页面设计、导航栏设计的应用情景以及作用。

在进入正文之前，请容我多嘴一句，写这个的初衷也是为自己的以往做个总结吧！陆陆续续往里边增加和删减了不少的内容，留下相对直观的内容。

不知道你们对于一个好用的后台是什么样的概念？是高内聚、低耦合、高易用性、简洁大方的界面、良好的反馈机制、高拓展性、人性化的交互设计？这些可能都是吧！

这篇文章主要的目的是：写一些后台设计方面比较行之有效的经验之谈。当然也看了一些别人的文章，不然也没法相对规范的归纳以往的经验，然后就是对自己以往走过的坑有个总结，同时后来者有个警示，当然里边有些我说的可能不适用一些后台系统，请慢喷。

同时，对以往因为个人经验不足造成的种种事故的公司，深感抱歉，哈哈！（略略略，然而内心并无愧疚之心！这个虚伪的产品！）

一、辅助设计

1. 辅助文字

辅助文字一般都是显示于界面的外部来提示、引导用户的下一步操作，与正文相比不是很明显，存在感相对弱化，不至于过于吸引用户的注意力，但又会放在相对明显、关键的地方。

情景：在以下几个地方比较常见关键输入框旁边、标题的介绍、统计图表的属性名称等场景。

下面上效果：

作用：上面可以用到辅助文字的地方，即弱化存在感、同时也能正确的提示和引导用户。

2. 帮助文字

帮助文字相对于辅助文字的纯在感又会被再弱化一个档次，往往是因为内容过多或者用户关注频次低而被放置于相对不显眼的地方。

情景：在那些地方用到的帮助文字比较多呢？没错，就是问题文档、客服咨询的场景运用的比较多。

作用：帮助文字往往是因为包括内容过多，为了不主动分散用户的注意力，往往都是需要触发，不然会因为页面繁杂、主次不分影响用户的感知、干扰用户的判断。

3. 输入框设计

后台的输入框的设计并没有太多讲究，能正确引导用户输入正确的内容即可，主要分两步：引导到正确的输入位置、输入正确的内容。

情景：多用于登录、注册、搜索栏、用户信息输入、订单信息输入等场景，我就不一一列举了。

作用：是为了给予用户良好的反馈，减少用户输入的失误率。

4. 限制条件提示

情景：限制条件提示多数的运用于输入的场景，比如要求的输入的文字或者上传图片文件的字数、大小、格式等等。

作用：通过限制的条件提前让用户了解到输入的前置条件，降低操作的失误率和提升操作的效率。

5. 可视化反馈

可视化反馈在后台的设计中的重要性是毋庸置疑的，反馈的形式也多种多样。当然，作为产品的自己也要区分什么场景需要用到反馈，什么情况不需要用到，并不是反馈越多越好。那么，在什么情况下使用反馈比较好呢？

——关键节点和重要信息录入。

情景：

可视化反馈的运用场景我就列举几个，比如：寄快递的时候收件人的姓名、电话和的地址信息是不是很重要？那么，这一块就很有必要给到他们正确、错误的输入反馈，这就是重要信息输入的反馈机制。

还有关键节点的反馈我再举例一个，比如：你购物付款的时候，往往支付完的时候会提示你支付成功或支付失败，当关键页面、业务或者操作流程从一个进入下一个节点的时候，好的反馈机制会给予用户良好的体验。当然这个节点关键与否需要判定的条件过多，我就过多讲诉了。

下面，给大家几个比较直观的图：

二、表单设计

1. 只读模式

只读模式的表单主要是作为信息展示作用，操作的功能并不多或者没有，不会直接表单列表进行操作，比如：发票列表、操作日志等操作性较低的信息列表都会以只读模式显示。

作用：只读模式的表单最重要的就是易读性和易操作性。

2. 可用模式

可用模式的表单可操作的空间很大，根据业务、需求的区别一般在这几个区域对表单进行编辑：顶部搜索栏区域、列表顶部区域、列表内容区域、列表列的末尾。

那么，每个区域的操作放置有什么讲究呢？

也不是乱放的，顶部搜索栏区域和底部操作区域一般用于放置可以对列表内多项行进行操作的功能，如批量删除、批量审核、批量发货、批量核销等等功能；尾部操作区域只对单行信息进行操作；表内操作区域是单行内的单个信息字段进行操作，如姓名编辑、电话编辑等等；列表顶部区域只对列表的单列信息进行操作，如排序、筛选等等。

三、搜索栏设计

搜索栏需要根据搜索栏的搜索的条件的多少进行排版，一般有以下几种布局方式：显式布局、隐式布局、半隐式布局。

这里的“隐”是指需要触发才能看到搜索条件的意思。