网站后台设计规范:框架规范和视觉规范

文章描述:后台系统规范设计心得.

后台系统采用一整套UI,为什么会形式各异?能统一并带来更好的体验吗?基于交互设计师自己的内心疑问,我们迫切的产出一套设计规范用于统一后台操作系统,利于用户使用习惯的培养和延续,降低学习成本,提高使用效率,有效提高开发效率,方便功能的优化扩展。基于现有的系统,我们抽丝剥茧,才有了如今的阶段性成果。

用户是谁?需求是什么?交互设计师对于一个项目最基本的了解就是源于这两个问题。我们做这次规范也是如此……

你知,或者不知;规范就在那里;不悲不喜

用户是谁?我们的系统是给谁用的?

初期是给我们的小二,后期系统会开放,外部商家或是委托方也会来使用我们的系统。那么我们第一次做系统规范的由于商家或委托方的信息掌握不到,可以主要针对我们的小二。

我们的小二有什么特点呢?他们目前是什么方法在录入信息的呢?

小二这个角色在我们的部分可以细分为:认证小二,物流小二,行业运营小二(行业运营小二里面还分:买手,买手助理,店铺运营小二,网站运营小二……)每种角色来这个系统的目的都是不同的,行业运营小二,进来主要是录入信息,跟踪订单。物流小二主要是查看审核行业小二的申请,跟踪订单,查看报表。认证小二主要是审核行业小二或商家的申请,跟踪认证情况,分析数据。

需求是什么?

由于当初系统发展情况参差不齐交互资源不够,前端控件没做,导致用户极难使用。系统开放过程中,频繁的更换交互、视觉还有前端,导致现在单个系统交互方式有差异,多个系统呈现给同一个用户时,虽然基本框架没问题,但是在操作过程中效率低。

解决方案:用户急需一个好用的后台系统来提高他们的效率。

我们这次要做规范的目的是统一现有三个系统的视觉+交互规范,然后交付前段,前端来规定他们的代码规范。让我们一起走上提高我们小二的工作效率的第一步。

你念,或者不念;规范就在那里;不来不去。

从哪个纬度展开规范设计?

1. 控件

在计算机编程当中,控件(或部件,widget或control)是一种图形用户界面元素。是一种基本的可视构件块,包含在应用程序中,控制着该程序处理的所有数据以及关于这些数据的交互操作。

在PARC研究中心对施乐的Alto电脑(Xerox Alto)用户界面的研究基础上,如今已逐渐产生一组包含常规信息的可重用控件。常规控件的不同组合通常打包在部件工具箱中,程序员可以构建图形用户界面(GUIs)。 大多操作系统包括一套用于程序设计的控件,程序员只需将它们加入应用程序,指定它们的行为。

组合控件

描述:为实现产品中某一特定功能而独立出来的模块,其特点在于功能相对单一,在结构层和行为层应具备很强的可复用性,在表现层应保持一致性,方便用户识别。从单一控件可以衍生出多种组合控件以适应不同功能操作,如:上传组合控件,列表组合控件。

定义维度:控件描述、控件示意及尺寸、是否用户反馈、设计理念、控件应用。

你爱,或者不爱;规范就在那里;有增无减。

2. 框架规范

在第一步完成了控件基础后,第二步的问题就是如何运用该控件?让控件在场景中发挥作用,窜连出整个操作流程。这种目的之下,我们所要做的就是制定结构和规则,就如同用这些控件做成建筑物一般,这就是框架规范的作用。

在设定框架时,我们要考虑到以下几点问题:

2.1不同的流程与场景

由于业务场景不同,流程也不一样,那么如何定义页面,和页面基础内容块?

这里不妨假设流程中遇到的4种基本场景——》创建,查询,编辑,详情,回馈

这四类页面,运用的基础控件类型也不一样,通过这4类我们可以窜连基本的业务流程。

a. 创建编辑

创建和编辑都是对基础数据的输入和修改,这个界面用到最多的就是imput,表单,还有链接。从屏幕上划分为三列式。含有大量的操作验证和操作提示块。

b. 查询

查询页面主要使用的是条件输入操作和查看表单的功能,需要界面操作区和反馈区清晰明确,因此在框架上为两大区域,保证他稳定使用的习惯。 另外考虑各种导出和查看的链接。

c. 弹出页面

弹出页面的大小只占整个页面大小的三分之一,这样信息流不会太大,构造结构也不复杂。

d. 信息反馈

在完成一个页面操作后及时反馈操作结果,这里的元素主要是:操作结果+语气词+建议动作。以及相关链接。所以对文字架构和展示有个限定,并配合一定的信息的icon.

2.2 操作

不同于大框架,这个弹出页面所承载的作用是保持当页信息比对下进行弹出操作,因此,操作会简单直接,操作数量保持3,到4次操作内。然后在回到主页持续操作其它。

a. 详情页面

详情页面是所有操作情况的明细。是流程的结果,所以它模块分类会比较清楚,主要是文字和数字构成,信息层次基本是2-3级。分类也控制在4-5类内,信息过多,会有收起展开的功能,来控制信息量过多对传到和寻找造成的麻烦。

b. 不同的显示器分辨率

考虑最常用的1028,和最基础的1024。把最常用的量归结为一屏幕三个控件加上判断和验证和控件组合,考虑特殊运用。场景中最可能出现的数据和控件发生结果在操作页面时,用户最关心数据,所以要考虑在界面中如何理顺他们的层次。如何对当页反馈的信息占用的位置和变化进行 规范。比方说查找和携带搜索过来的数据展示,还有上传 ,在 当页显示数据的展示分类。这些排版规则,既要考虑到信息传达的清晰,也要考虑到信息量的大小。

[1] [2]  下一页

时间: 2024-08-04 08:25:37

网站后台设计规范:框架规范和视觉规范的相关文章

javascript iframe网站后台界面框架代码

提示:您可以先修改部分代码再运行 mobaihuo网站后台免费提供_www.111cn.net mobaihuo网站后台免费提供 3 屏幕切换 提示:您可以先修改部分代码再运行

JQuery实现经典网站后台框架[动易程序改版]

网站后台是每个网站必须的部分,使用一个好的框架也是给用户良好体验的一部分内容,本文将给大家介绍使用JQuery和JS实现的ASP.NET网站后台框架. 首先看看我们需要的资源: 1. FrameTab.js (文章结尾提供下载) 该文件主要功能是实现一个像IE 8中Tab页一样的功能,这个可以方便用户在一个浏览器页面里打开多个某快的后台内容,以及对其进行切换 2. jquery.pack.js (文章结尾提供下载) 这个JQuery的文件大家应该很熟悉了,不做解释了. 主要的文件都在上面了,下面

Java程序编码规范!不仅仅是规范,还有为什么这样做的理由,不错哦!

编码|程序|规范 Java程序编码规范 所有的程序开发手册都包含了各种规则.一些习惯自由程序人员可能对这些规则很不适应,但是在多个开发人员共同写作的情况下,这些规则是必需的.这不仅仅是为了开发效率来考虑,而且也是为了后期维护考虑. 命名规范定义这个规范的目的是让项目中所有的文档都看起来像一个人写的,增加可读性,减少项目组中因为换人而带来的损失.(这些规范并不是一定要绝对遵守,但是一定要让程序有良好的可读性) Package 的命名Package 的名字应该都是由一个小写单词组成. Class 的

《Web前端开发最佳实践》——2.6 前端代码基本命名规范和格式规范

2.6 前端代码基本命名规范和格式规范 命名规范和格式规范是代码规范中最基本的规范,任何代码的混乱都是从命名和格式的混乱开始的,而意义明确的命名和规整的代码格式则提高了代码的可读性与可维护性,给代码的阅读者和维护者留下了良好的第一印象.命名规范和格式规范没有一个统一的标准,不同的人可能有不同的认识,但是在同一个项目中,必须严格遵守统一的命名和格式规范.以下推荐的规范是在实际项目中认同度较高的代码规范,供读者参考.2.6.1 HTML命名规范及格式规范 HTML代码所有的标签名和属性应该都为小写,

Java Web前端到后台常用框架介绍

转自: http://blog.csdn.net/u013142781/article/details/50922010 一.SpringMVC http://blog.csdn.net/evankaka/article/details/45501811 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求驱动指的就是使用请求-响应模型,框架的目的就是帮助我们简化开发,Spri

网站建设:网站后台的流程规划设计

规划|后台|设计|网站建设 一.网站规划阶段 这个阶段主要是对网站的功能.目标受众.内容.栏目进行规划.这期间会经常性地和有关领导进行沟通.首先,自己一定要对网站的整体规划清清楚楚,然后要吸收别人的建议.吸收别人的建议的过程,可以认认真真地做,也可以走过场,但是有这个过程以后,别人才不会对你的规划说三道四. 至于领导的意愿,和你的规划靠得上边的,你一定要让领导明白,他们的设想已经在你的规划中被考虑进去了. 项目的大致进度,要在这个阶段结束的时候确定下来. 二.后台模块划分和版面设计 这个阶段,程

网页设计与开发-网站后台公共的导航栏怎么做的

问题描述 网站后台公共的导航栏怎么做的 一般在页面最左边导航栏都是公用的吧,还有头部.尾部,怎么做的,求方法 ,最好不是用js 谢谢! 解决方案 HTML的技术就能解决,动态的就用jsp php 这些了.用iframe就能搞. 解决方案二: 你可以直接用html把公共的部分写好做成个模版阿,然后其他页面都只要include下就好啦 解决方案三: 改为动态页如aspx,asp这种,include你的导航进来.静态的就只能用shtml,shtm这种后缀的了,也支持include指令 解决方案四: 上

AceAdmin后台UI框架 整合 java

问题描述 说明:JAVASpringMVC+mybatis(oracle和mysql)HTML5全新高大尚后台框架1.支持APP手机应用(android和ios)接口调用(json接口可与其它程序对接)2.全新高大尚全HTML5+css3.0开发界面,美观漂亮时尚.前沿3.有ORACLE和MYSQL版本各一个4.框架搭建完善,在此基础上做过很多项目,身经百战,支持大并发,程序运行稳定5.基础功能已经完善组织管理:类似角色管理,分角色组和成员,有组权限和成员权限.菜单权限,独立分配增删改查权限.支

浅谈Android编码规范及命名规范_Android

前言: 目前工作负责两个医疗APP项目的开发,同时使用LeanCloud进行云端配合开发,完全单挑. 现大框架已经完成,正在进行细节模块上的开发 抽空总结一下Android项目的开发规范:1.编码规范 2.命名规范 注:个人经验,经供参考 一.Android编码规范 1.学会使用string.xml文件 在我看来,当一个文本信息出现的次数大于一次的时候就必须要使用string.xml 比如一个保存按钮 , 不规范写法: <Button android:id="@+id/editinfo_b