北京企业网站推广,wordpress后台不显示,注册公司制作网站,商城网站建设运营合同目录
前言
C/S 到 B/S
ASP Builder 的诞生
关于 Craneoffice.net
开发环境配置
后台界面的 UI 区域要素
桌面系统的想法和设计
搜索引擎
导航面板
快捷访问
二级导航
小组件及其它 设置桌面壁纸
小时钟
附件小程序
计算器界面设计
日历与任务
系统设置
天气小…目录
前言
C/S 到 B/S
ASP Builder 的诞生
关于 Craneoffice.net
开发环境配置
后台界面的 UI 区域要素
桌面系统的想法和设计
搜索引擎
导航面板
快捷访问
二级导航
小组件及其它 设置桌面壁纸
小时钟
附件小程序
计算器界面设计
日历与任务
系统设置
天气小组件
任务栏
开始菜单
操作界面设计
查询界面设计
写在结尾 前言 2000年以前一直从事的是 C/S 应用程序的设计开发UI自然也是重要的组成部分曾痴迷于Mac OS 的界面也曾被微软推出 Windows XP 时风格的变化所惊艳。记得开发的一个药品管理项目因自己不满意 Windows NT 的风格擅自做主使用 Windows 底层API 修改窗口系统风格为Mac以致于后来严重影响了交付时间。现在感觉设计再优秀的界面也有审美疲劳的一天也有众口难调的一面因为时代需要进步保持新鲜感是我们不断改进的动力。
C/S 到 B/S 第一次承接 B/S 的项目很突然了解了业务需求后甲方对技术也提出了需求要求使用 ASP 技术当时没有任何的开发经验大脑一片空白于是买了一本叫《HTML 从入门到精通》的书开始学习起来。 由于受C/S开发界面的设计模式影响根深蒂固开发WEB页面的UI也走了不少弯路比如总试图使用全部的绝对定位寻找丰富的控件库、存储状态值的显示等更别提使用CSS了基本都是使用 style 属性进行赋值。
ASP Builder 的诞生 本人非常推崇与着迷 Borland Delphi 的 RAD 设计理念因此当基本了解了 ASP 工作原理的时候萌生开发第一个自己的开发工具 ASP Builder 的想法诞生了通过设计数据表快速生成目标服务器脚本、网页UI及客户端脚本。正式运行后开发效率的确取得了显著的提升但这还是没有脱离C/S的“阴影”。不过现在纵观 小程序、VUE 的一些模式仍然能够找到曾经 ASP 的身影只能说万变不离其宗吧设计模式和业务逻辑更是我们要关心的。
关于 Craneoffice.net 自从从 ASP 到 ASP.NET 那一系列的改变让我对 .net 的领域研究从此一发不可收拾。Craneoffice 最早是与合伙人创立的工作组的名称是研发新技术产品的部门后期虽经历数次公司的变迁Craneoffice一直未变如今因为业务需要最终成立了自己的软件工作室谐音“科润”也算圆了自己的梦吧。 如今 Craneoffice.net 已经成为了公司核心框架当然你也可理解为祖传代码。其中JavaScript Css 一直是做为 WEB UI 的一个基础的存在当然这里有感情的成份、需求的要求和一种开发习惯。 开发环境配置 操作系统Windows DataCenter Server 2019 数据库Microsoft SQL Server 2016 架构及其它 .net 4.7.1 / VS2019 Asp.net C# / JavaScript Jquery Css OFFICE: 2016
后台界面的 UI 区域要素 后台系统一般包括登录界面和办公界面即后台两大部分办公界面按单屏幕划分比较主流的设计包括如下几个部分 1左上角 Logo 及系统的标题 2右上角登录提示信息或常用菜单 3左侧功能菜单可能根据权限的控制进行不同的显示 4右侧业务操作区一系列的增、删、改、查、统计分析等 5底部版权信息栏 简易的布局如下图所示 桌面系统的想法和设计 我们原来设计的登录后的首页一般会显示一个简单的欢迎页面或添加一些提醒信息、任务信息等且功能、样式和背景图基本是固定模式。因此想设计一款类似操作系统桌面的具有通用性又兼具个性化设置的功能实用且不过于复杂。下面我们将讲解一下桌面系统的功能设计
搜索引擎 该设计是为了实现系统平台所提供的文档、功能、业务数据、多媒体信息等的搜索以简化操作深度比如我们有一个培训视频模块我们不但可以根据关键字按照功能菜单标题、视频内容标题、作者等进行搜索还能够按照视频中的讲解内容进行搜索并定位相关片断以供使用者参考。举例搜索如下界面 这是一个深色模式的呈现输入“杰克逊” 关键字点击搜索后结果页分三个色块区域
1、黑色标题为统计结果信息和关闭功能
2、中间为搜索内容区域内容包括图标、标题、打开功能链接和添加到我的快捷访问 2.1 图标可根据内容进行不同类型的显示这里我们看到的是一个播放器图标则代表是一 个视频结果内容 2.2 标题我们看到标题中也并不包含“杰克逊”的关键字样这证明视频内容可能包含该关键字 2.3 打开功能、文章或快照链接这里我们是将打开视频预览的链接 2.4 添加到我的快捷访问类似WINDOWS里的快捷方式再次返回桌面时会有快捷访问功 能直接进行定位。 2.5 导航条使用传统的上下翻页链接实现色块采用与主内容区渐变过渡的效果 有关渐变的关键的CSS代码如下
.q_dbgrid_nav {color: White;background: linear-gradient(rgba(50,54,61,0.7),rgba(50,54,61,0.1));text-align: center;margin-top: -20px;padding: 10px;
} 打开目标页面如下图 实现视频内容搜索界面提供关键字上下文片断的 “猜你想听” 的推荐。下方显示视频的原文地址这里我们是选择存储在腾讯云上。最下方是视频播放器这是我们改造后的腾讯超级播放器后的效果从视频中我们可以看到关键字讲解词。 导航面板
登录默认的桌面或关闭搜索引擎结果页面系统会提供一个导航面板如下图 导航面板主要包括 1、产品的版本信息。 2、已支持或购买的产品信息以图标的形式体现。 3、其它功能链接如开始菜单、快捷访问、如何使用桌面系统的功能链接还设置了一个“下次 不再显示”的个性化功能。
快捷访问
如图我们点击刚才在搜索引擎里添加的功能显示如下图 可以看到培训链接已经添加快捷访问的 DIV 容器里该容器的左上角为关闭按钮加功能标题的设计窗口内部为 flex 布局显示为图标及标题的列表。另外在弹出该容器时采用了其它背景对象虚化的滤镜技术关键 JavaScript 代码如下
function blurDesktop(v) {document.getElementById(searchbox).style.filter blur(vpx);document.getElementById(queryRsultBox).style.filter blur( v px);
}
通过blur滤镜控制模糊程度另外我们可以改进推送要模糊的元素到数组里进行遍历的方法这里的代码仅供参考。
二级导航
点击图标设计如下图 左上角显示返回链接图标复制主面板HTML片断链接显示则复制开始菜单的HTML片断进行显示。关键 JavaScript 代码如下
//遍历开始菜单里的list项目
for (var j 0; j lilist.length; j) {if (lilist[j].getElementsByTagName(a)[0] undefined) { continue; }var aobject lilist[j].getElementsByTagName(a)[0].cloneNode(true); //克隆HTML片段aobject.style.color black;//添加到二级控制面板链接列表a_list.appendChild(aobject);a_list.appendChild(document.createElement(br));a_list.appendChild(document.createElement(br));
}
小组件及其它 小组件是一组提供实用且个性化设置的功能程序如下图
分左右两部分右边部分为“步步高”式设计依次为设置桌面壁纸、显示时钟、附件小程序、系统设置下面主要讲解一下这几组功能 设置桌面壁纸 该功能可实现更换桌面背景并通过AJAX技术调用服务端静态方法保存到个人配置表中。显示如下图 如图设置容器左上解为关闭按钮及标题内部嵌入DIV 加 FLEX 布局列表显示为服务器端显示输出这些默认的图片都是本人比较偏好的所以感觉自己有点偏执与强势如图我们选择 “春枝” 主题并点设置稍候更新如下图 这是自己一段封装的调用服务器静态WEB方法的 JavaScript 方法仅供参考
//参数serviceUrl为方法所在URL为空则代表本页
//参数serverFuncName 为服务端WEB静态方法名称
//参数params 为JSON 参数列表字串形式
//参数 resultFuncName,srcobj1为调用返回时调用的客户端方法2为指定一个目标控件
//该方法用于调用服务器端方法后的客户端处理首先返回调用成功的状态参数2为服务器返回的对象数据
//参3为传递的目标控件值
function callServerFunction(serviceUrl,serverFuncName,params,resultFuncName,srcobj) {$.ajax({//要用post方式 type: Post,//方法所在页面和方法名 url: (serviceUrl ? (window.location.protocol // window.location.host window.location.pathname) : serviceUrl) / serverFuncName,contentType: application/json; charsetutf-8,data: params,dataType: json,success: function (data) {//返回的数据用data.d获取内容 if (resultFuncName ! null) {resultFuncName(success, data.d,srcobj);}},error: function (err) {if (resultFuncName ! null) {resultFuncName(error, err);}}});
}小时钟
这个功能很好理解每点击一次小时钟的图标可以进行显示和不显示的切换同样这也是通过调用服务器方法实现的。
附件小程序
这个可以后续进行插件更新目前提供了两个实用的小程序计算器、日历与任务。
点击附件小程序图标如下图 容器的设计模式具有通用性和设置壁纸、快捷访问功能类似如图的两款功能均用 JavaScript / CSS 实现。
计算器界面设计 日历与任务
日历也是我们经常用到的功能而且可以设置任务提醒功能这在系统登录或访问应用时都会在屏幕左上角区域用任务图标进行提示。该功能显示如下图 界面的左侧显示日历右侧显示任务设置面板点击日历即可赋值在开始时间再次点击将赋值到结束时间里同时我们还可以设置提前提醒的时间量最后点击保存设置即可完成任务的设置。该容器的标题部分还可以操作两个功能我创建的任务、任务提醒。
比如我创建的任务界面如下所示 系统设置
点击系统设置图标将唤起开始菜单里的系统设置功能开始菜单也是用 JavaScript 和 CSS 编写的功能类似手机的操作系统界面设计可以在PC端显示更适用于移动端。系统设置的菜单如下图所示 设计风格采用相对简洁的形式用图标分组相应的功能菜单栏以横线分隔设置或选中的项目以绿色小对勾的图标进行显示。
天气小组件 天气小组件显示了今天和明天的天气情况简单实用设计布局在左下角布局。该功能是使用 JavaScript 抓取的第三方天气信息提取的时候会有加载提示如果我们不需要显示该组件还可以通过系统设置选择关闭显示。
任务栏
任务栏沿袭了区域要素的一些设计左上角显示的是微信登录成功后的头像和相关的任务图标。右上角显示一些欢迎信息和常用功能菜单如下图所示 在图中我们用鼠标移动贴近左侧区域20像素内自动弹出显示功能菜单导航到具体的业务。
某些任务图标是动态显示的如图中红色的铃铛图标表示有任务提醒、绿色的播放器图标表示本页面有帮助视频可供学习。另外还有一些固定的任务图标比如黄色的收藏图标。
如下图这是浅色模式下的任务提醒界面点击任务栏红色铃铛图标即可显示详细任务信息。 点击绿色播放图标将显示帮助学习视频界面同时结合 Ajax技术实现点赞、评论和收藏功能如下图 将鼠标移动任务栏的右上角将自动弹出常用菜单包括我的桌面、修改个人信息、我的消息、操作指南、手机认证、实名认证、修改账户信息、联系客服等功能该菜单的弹出效果使用动态螺旋式效果视频效果如下演示 3dmenu 开始菜单
开始菜单是结合包括右上角的常用功能菜单和左侧的业务功能菜单的总集合。界面采用类似移动端APP图标的形式呈现如下图 其中业务功能菜单被集成到开始菜单里点击则进入下一级菜单风格与系统设置类似。
操作界面设计
操作平台的界面我们会在系统设置里设置几种风格比如经典、动感后续还可以继续添加“皮肤”原理就是编写不同的CSS文件和对应的深、浅色模式的附加CSS文件具体可参考我的文章 《CSS控制界面风格及深浅色模式的一些思路》 设置方式由JavaScript进行开始菜单的选择呈现如下图我们显示的是经典且深色的模式 下图是提交的时候一段警告的提示框关于提示框的设计也是基于Layer组件的纯JavaScript改造详情可参考我的文章《改造 layer 弹层移动版组件》。 查询界面设计 查询界面的设计一般包括条件输入控制面板(QueryPanel)和查询结果网格DataGrid,如下图举例 查询结果的设计风格没有采用网格线鼠标移动到某条记录会深色背景显示底部的导航条的背景色使用渐变色至完全透明。
写在结尾
这版桌面系统的设计从个人角度讲倾注了不少心血后续还想引入主题风格如下图的小清新风格使菜单变得更加透明去掉任务栏背景色等。 由于种种原因对于产品的界面改造可能告一段落颇有些心灰意冷之感也许是太疲惫了。多年来凭借自己学习过美术的一些知识一直兼顾着UI设计难免由于个人的偏执而无法听取别人的意见这也是我开博写第一篇文章的原因总之能设计出令人满意的作品、得到别人的认可是最大的安慰。
学习过不少语言有些已经淡忘不再使用但JavaScript对我来说是一门神奇又灵活的脚本语言多年来从未放弃。个人认为其写容易写好不容易很考验你的技术处理能力。
可能自己相对比较保守吧在此纪念一下自己的完结之作和对 JavaScript 的喜爱。不管有多大争议我们还要继续前行技术日新月异热爱永恒不变。
