Web 后台设计易被忽视的组件技巧

问说网 · 发布于 2017-04-04 · 字数7103 · 浏览 845 · 评论 0

 

1489503473-2855-0314
  尽管现在各家都将产品设计的重头放在移动端,但对于运营后台管理系统,仍然会将 Web 端作为自己的兵家必正之地。对于有着精细化管理,最小颗粒的维护自己平台商品、服务、企业信息的互联网产品来说。Web 端的大屏、易于录入读取数据等优势仍然是移动端不可取代的。那么在 Web 端产品设计中,是不是存在一些容易被我们忽视的技巧呢?

后台系统的设计原则和前台系统的设计原则几乎一致,虽然页面的动效、配色方面可能不必像前台那般精益求精。

产品的前端由于直接展示给用户,因此往往对于图片质量、页面配色等都经过 UI 的仔细打磨,后台产品则由于图片少、文字多;内容展示少、表格多而在界面上惨不忍睹。作为后台产品经理,虽说我们不用对每一处细节的仔细雕琢,但至少要审美在线。

 

1489503474-1900-0314
  关于后台系统应该遵循的设计规范,如果各位有兴趣,我们下一篇我们再讲,本篇主要介绍在设计后台系统时诸位肯定会用到的组件及其使用技巧。

一、基础部分

基础组件包含:页面布局、颜色字体、图标按钮

布局

布局是前端工程师的分内职责,产品经理不必太多插手,但是对于布局有 2 个基本概念我觉得大家有必要了解。

栅格式布局:通俗来讲就是在一个页面上用横向(水平线)、纵线(垂直线/参考线)将整个页面划分成有规律的格子。前端工程师以这些格子或它的边线作为基准线有规律的布局。

响应式布局:就是指一个网站能够兼容多个终端。通俗来讲就是 Web 的内容根据预设响应式尺寸不同,可以在 IPad、手机等不同尺寸的设备上几乎不影响体验的看。一套优秀的响应式布局前端框架可以减少不少其他终端的代码,还可以为不同终端的用户提供更好更舒适的界面和用户体验。

 

1489503477-4048-0314
  颜色字体

为了给用户一个前后一致的产品使用体验,Web 后台的颜色字体设计和前台产品最好保持一致,也都需要 UI 确定颜色、字体相关的标准。

颜色的使用技巧 :要定确定产品的主色、辅助色、中性色。

字体的使用技巧:需要确定产品的中文字体、英文/数字字体的样式。有追求的产品经理在前端框架已定的情况下甚至还可以和 UI 一起商议字体的使用规范。主标题字体样式大小、标题字体样式大小 、正文字体样式大小等。

 

1489503475-4372-0314
  图标按钮

图标、按钮的使用技巧:和颜色字体一样,也需要事先确定好各个状态下的按钮状态、颜色、尺寸

在同个页面中,其默认按钮、主要按钮甚至包括文字按钮的不同展现方式

当一个按钮处于禁用状态以及可用状态下的样式

页面有:「发送成功」、「发送失败」等不同反馈信息时其对应按钮也需要在颜色、文案、样式、尺寸上有所不同。

 

1489503478-1926-0314
二丶表单填写部分

表单控件主要包含:单选多选、输入框、选择器、开关、日期控件、表单校验

表单填写可以算是整个后台系统重中之重,后台管理系统本来就是对前台信息的管理、展示。说白了就是四个字:增、删、改、查,如何更加优雅的录入信息,让整个表单填写过程流畅、可控的进行是一个优秀的后台产品经理必须掌握的技能。

单选多选

单选/多选按钮的使用技巧:均不宜选项过多

当一个问题的选项超过 5 个时,最好的选择是使用选择器

另外单选/复选按钮还需要考虑其禁用、可用状态下不同的按钮展现样式

 

1489503477-3634-0314
  输入框

输入框的使用技巧:当用户输入内容过多时,最好让研发使用可自适应高度的文本域,这样的使用体验简直嗖嗖嗖的提升。

 

1489503479-7369-0314
  针对一些有固定前置、后置内容的选项:可以采用复合型文本框,一方面可以减少用户输入,提升用户体验;另一方面哪些具有固定前置、后置内容的选项(比如网址)往往容易输错,可以一定程度上降低用户的误操作的概率。

选择器

选择器的使用技巧:当选项过多时,相比于复选框,选择器也是个好选择。

 

1489503480-4199-0314
  另外使用选择器的时候还有个不能忽视的好处就是级联选择。即选择第一项时级联触发第二项。让用户看到自己的选择即改变,非常的简洁容易上手操作。

 

1489503480-9158-0314
  表单校验

表单校验的技巧:对表单内核心内容进行校验是表格信息录入一个重要一环。一般用的比较多的是行内校验,即填写完一行转入下一行时即对上一行内容进行校验。

 

1489503481-5090-0314
  三、表格数据展示部分

当表格数据内容过多时,就会变得非常难看,如何让信息展示的又全又好看,可以参考以下技巧:

 

1489503482-6225-0314
  表格数据展示技巧:其实大部分的数据展示都可以像管理 Excel 表格一样管理起来,但需要一定的开发工作量,这里可能需要产品经理平衡一下。毕竟鱼与熊掌……。另外除了固定表头外,排序:利用一定的排序规律让数据变得有章可循,就不会显得非常的凌乱;隐藏:将不必要的信息收起来也是不错的选择。

四、消息提示部分

页面信息成功提交后,需要返回相关内容给用户,否则会让用户一头雾水不知道自己是否提交成功。

页面消息提示:

消息提示技巧:根据提醒类型不同,设计不同颜色的反馈提示,让用户一目了然。 另外为了减少用户操作,可以设置消息提示的反馈内容在几秒后自动消失。

 

1489503483-8015-0314
  进度条:

进度条使用技巧:进度条可以带状态,也可以带有描述性文字帮助用户理解目前自己处于完成表单的第几步。

 

1489503484-1591-0314
  Web 后台设计中常用的控件还有许多比如标签模块、各种各样的消息弹窗模块、导航栏模块等因为篇幅有限这次就不展开介绍。

一个优秀的后台产品经理虽然我们比不上前台产品经理对于每一个细节精益求精的打磨,但是还是应该在严于律己、优化每一处我们力所能及的细节上付出努力。这样在回首自己设计出的产品才会有种天生骄傲的成就感吧。

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2015-04-30一组扁平化动物logo创意设计
  • 2016-07-15Intel Tick-Tock策略简介
  • 2016-10-21多彩好看的淘宝销售标签箭头EPS素材
  • 2016-12-26恒创主机2017跨年盛典 主机/云服务器/独立服务器买就送
  • 2017-02-17问说网站长分享提升WordPress访问速度优化
  • 2017-04-01Wordpress固定链接伪静态的设置方法
  • 2017-04-04java中的Runable和Thread
  • 2017-04-05解决mysql无法远程访问的问题
  • 发布评论

    为您推荐

    Blogify简约扁平化博客主题PSD模板

    Blogify简约扁平化博客主题PSD模板,Blogify是博客风格的完美小主题。利用Blogify是干净的,审美和简单的功能,确保你的博客有别于简约精致的休息…

    • Blogify简约扁平化博客主题PSD模板
    • Blogify简约扁平化博客主题PSD模板
    • Blogify简约扁平化博客主题PSD模板
    • Blogify简约扁平化博客主题PSD模板
    问说网 · 发布于 2016-10-03 · 浏览 1135 · 评论 0
    问说网 · 发布于 2017-02-17

    问说网站长分享提升WordPress访问速度优化

    问说网创建也有5年了,最开始并不是使用的WordPress,是使用国内的DedeCMS开源程序,中间被黑客入侵了就换成了WordPress一直用到现在,随着文章…

    问说网 · 发布于 2017-04-01

    WordPress固定链接伪静态的设置方法

    今天,想着在我机器上测试一下wordpress,虽然之前也有这个开源的程序,可是一直没有安装呢,再加上最近一直忙于其他的工作,也忽略了不少,突然想建立一个属于自…

    问说网 · 发布于 2017-04-04

    java中的Runable和Thread

    在java中可有两种方式实现多线程,一种是继承Thread类,一种是实现Runnable接口;Thread类是在java.lang包中定义的。一个类只要继承了T…

    问说网 · 发布于 2017-04-05

    解决mysql无法远程访问的问题

    问题描述 1.windows 2003 server 32bit+IIS+护卫神+安全狗+navicat 2.root@%已配置 3.干掉护卫神,安全狗,防火墙…

    问说网 · 发布于 2017-04-19

    ASP.NET MVC 4 中的JSON数据交互的方法

    前台Ajax请求很多时候需要从后台获取JSON格式数据,一般有以下方式: 拼接字符串 1 return Content("{\"id\":\"1\",\"nam…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13130 文章
    495 评论
    2031 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 2561

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2416

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 2463

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1949

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2130

    更多 推荐作者

    关注 秋末残雪

    文章 106 · 评论 0

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    关注 凉城梦镜

    文章 79 · 评论 0

    关注 思念像咒语

    文章 102 · 评论 0

    关注 失戀德標簽

    文章 92 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!