恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
网页后台设计(PC端)
0.0°
2017-08-12 原创文章 经验/观点 举报 19832 129 108 11

PC端的网页后台设计,有一些细节规范~

前言

一个完整的后台,基本是由:菜单、数据展示、表单、弹框及控件等部分构成,下面我将平时积累的知识给大家分享下:

这也算是2017年上半年的一小个经验总结,还需努力扩充设计水平哒~


正题

当接到一个全新的网页后台项目时,我们要去分析使用的场景,面向的用户群体,以及设计要达到的目的~下面几项前期准备工作:
1、确定主体的风格,并锁定后台尺寸,最后考虑是做居中固定式,还是全屏响应式(我基本都是按照1920*1080的尺寸来做)。全屏响应式的网页设计,可选择任意主流尺寸来设计网页。


注:整体的后台风格是经过产品经理或领导确认(当然像之前我们公司是没有PM的,很苦恼~),这时候你需要给他们说选择这种风格的原因是什么,而并不是单纯的个人喜欢因素。


       在这里我想说下,大多时候,产品已经提前定制好每个功能模块,UI上只需要对着PM做的原型加以美化,这时问题来了,你会发现这样做是有问题的但又不知问题在哪,加之产品经理总是想让你改。(此时就是我之前说的UI需要跟产品经理沟通好,PM只负责把功能模块设计出来,其他的他们是不负责的。

       此时就还需要用到交互设计师,这些就属于他们工作范畴内的事儿,毕竟,交互设计和UI还是不能相互代替的。然而在很多中小企业,产品原型或是交互直接由UI来做,甚至是没有交互之说~
       当缺少专业的交互设计时,不要让产品经理觉得我们只是按照模子做美化,应该考虑用户体验的同时加上视觉交互效果,我认为UI本来就应具备基本的交互技能


2、在开始设计之前,选定一种风格,因为后面的元件设计风格需要和主体一致。这就是我们所说的界面统一!


设计规范

1、简洁大气的导航设计

列表菜单式:如下图所示,左侧用来罗列订阅源,右侧用来展示内容列表。砍掉多余的分类和隐藏多余的操作,希望用户在使用设计导航时,能聚焦于内容,获得舒适的阅读体验。

选项卡菜单式:


2、简单灵活的表单设计

      一个典型的表格(table)包含标题(表头单元格th),内容(标准单元格td),通常都是一行行(tr)展示。设计时,标题文字加粗/颜色加深/字号加大,或标题背景加深。因选择淡灰背景风,一般用白色块区分的原则,表格设计也尽量不使用线框,然而一行行的标准单元格如果都是白色的就不便于预览,因此可以隔一行给背景设置比主背景更淡的背景。
        标题和内容一般有居中或居左对齐两种方式,整个后台界面的列表只选择一种对齐方式即可,能保证统一性。为了更简洁显示,我们还可以把每一列的间隔线去掉,但并不意味着间隔不存在。

        每一列的文字都不要贴边,给前端标记间距(内间距padding)值,告诉前端鼠标点击表头单元格的空白地方仍然可以拖动该列的宽度,拖动宽度时保持每一列的最小宽度并且标题仍然完全展示。

Image title

Image title

设计表单时我们需要注意:

1、减少不必要的文字(如将下图中的“全选”去掉);
2、缩略内容或者用…省略后面内容,鼠标经过出现更多内容(如时间可以缩略后面的时分,鼠标经过出现具体时间);
3、将不重要的列表隐藏,表头右边设计一个>>按钮,点击跳到隐藏的列表。

4、因为每个列表的宽度是可以拖动的,我们不能决定其固定的宽度,但每一行的高度可以设置一个值,建议所有元件的高度、宽度、间距的数值参数都设置为偶数

5、事实上,在设计表单之前,我们就要先对表单的标签进行优化,字段尽可能简约。标签都必须是对齐的,输入框也应对齐。

当表单标签字数较少且长短较对应时,可采用左对齐的方式;            下图1
当表单标签字数较长且长短差距大时,可采用右对齐的方式;            下图2
当表单标签太多时,可适当对其进行分类。                                         下图3

3、设计带有识别功能的输入框

      当输入有误时,尽量避免弹出框提示,可以直接对输入框设计不同的状态显示默认状态、选中状态、错误状态、成功状态。

Image title


Image title

4、设计舒适友好的弹框

弹窗不论在哪个移动平台出现频率都很高,一般分为:
1、一般鼠标经过的时候即可出现而不用点击,比如提示说明,显示更多信息,鼠标移过后立即消失,它不会影响下一个内容的视觉效果和操作,因此这个弹窗通常会设计一个浮动带有阴影效果的框;
2、另一种弹窗好比一个对话框,它暗示你必须对这个框里内容进行操作后才可离开,如确认信息、错误提示信息。这种弹窗一般会加上一定透明的黑色/白色,给下一层页面的内容做模糊等;

Image title

上图是我之前看到某位大神分享的一个腾讯企业网点的弹框设计规范,可供大家学习参考~


5、摆放合理美观的控件

下图以单选按钮为例,以用户的角度去思考,用自身的设计技巧去解决疑难问题。

Image title

希望2017年下半年自己更加努力,年末有更多的全年作品总结~   谢谢!



更新:2017-08-12

收藏

129人已收藏

Qianeyee

暴跳小龙虾

  • 40

    作品

  • 313

    粉丝

  • 19

    关注

  • 以产品经理的视角,该如何做好竞品分析
  • 想知道什么是用户体验设计吗?
  • 2021 POSTER 视觉稿
  • 工程图标集合

    猜你喜欢

      2017-08-12 原创文章 经验/观点 举报 19832 129 108 11

      网页后台设计(PC端)

      0.0°

      你确定要举报网页后台设计(PC端)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年08月12日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      108
      129
      11

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录