[转]Web UI 设计命名规范】的更多相关文章

来源:http://blog.bingo929.com/web-ui-design-name-convention.html 一.网站设计及基本框架结构: 1.    Container “container“ 就是将页面中的所有元素包在一起的部分,这部分还可以命名为: “wrapper“, “wrap“, “page“. 2.    Header “header” 是网站页面的头部区域,一般来讲,它包含网站的logo和一些其他元素.这部分还可以命名为:“page-header” (或 page…
Web UI 网站用户界面设计命名规范 WEB UI设计命名规范,也就是网站用户界面设计(网页设计)命名规范. 这套规范并非单纯的CSS.html或JavaScript命名规范,它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范. 许多美工设计效果图源文件没有对图层命名的习惯,而网上大多命名规范都是关于css.html.js和一些服务器端语言的,设计方面的命名规范很 少.设计师也是技术团队的成员,而前端开发工程师需要使用设计师的效果图源文件的,所以统一命名规范和设计规范对…
Web UI 设计命名规范 一.网站设计及基本框架结构: 1.    Container“container“ 就是将页面中的所有元素包在一起的部分,这部分还可以命名为: “wrapper“, “wrap“, “page“.2.    Header“header” 是网站页面的头部区域,一般来讲,它包含网站的logo和一些其他元素.这部分还可以命名为:“page-header” (或 pageHeader).3.    Navbar“navbar“等同于横向的导航栏,是最典型的网页元素.这部分还…
Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. 今天这里收集的免费资源是25套免费的 Web UI 设计的 PSD 界面元素,用于 Web 和 Mobile App 设计.它包括所有的设计元素的 PSD 格式,某些元素提供矢量格式,可以缩放到任意大小. 您可能感兴趣的相关文章 32套精美的免费 PSD 网页界面设计素材 22个完美设计的 PSD…
Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. 今天这里收集的免费资源是25套免费的 Web UI 设计的 PSD 界面元素,用于 Web 和 Mobile App 设计.它包括所有的设计元素的 PSD 格式,某些元素提供矢量格式,可以缩放到任意大小. UI Kit – Free PSD Download Ui Kit [Free PSD] D…
Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. 今天这里收集的免费资源是25套免费的 Web UI 设计的界面元素,用于和Mobile App设计.它包括所有的设计元素的 PSD 格式,某些元素提供矢量格式,可以缩放到任意大小. UI Kit – Free PSD Download Ui Kit [Free PSD] Download Free…
基于 Raphael 的 UI 设计 - 初稿 还有很多地方需要完善,这次要把 Raphael 彻底用起来,^_^, 一定要150字哦,一图抵千字啊,^_^,不喜欢写字的,那么怎么凑够150字呢,说说废话好了,开始: for (let i = 0; i < 10; i++ ) { console.log('一定要150字哦,一图抵千字啊,^_^,不喜欢写字的,那么怎么凑够150字呢,说说废话好了.'); console.log('一定要150字哦,一图抵千字啊,^_^,不喜欢写字的,那么怎么凑够…
HTML编码规范 (一)命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendli…
前言 今年上半年,项目组在项目开发的过程中建立了一套风格统一,组件丰富完善,命名统一规范的PC端UI库,适用于做大型站点,该UI库也是应用到了整个平台的项目中,在各个项目组中进行推广.因为项目的保密性,这里不方便给出实际项目,当然目前这套UI库也不是开源的. 下半年开始,我们偏向做移动Web的同学也开始考虑要梳理出这样一套适用于移动端的UI库,与PC端UI库命名规范保持一致,便于项目组同学在PC项目和移动项目中随意切换,当然,移动端的组件和样式以及交互与PC端都是有很大差别的,比如PC端的下拉菜…
在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率. 本文为你带来10款非常优秀的基于JavaScript的Web UI设计资源. 1.  XUI:JavaScript微型框架 这是一个“轻量级.非常简单.微型.超级模块化”的JavaScript框架,用于创建移动Web应用.该框架如此轻量级的原因是一些与浏览器兼容相关的代码被剥离. 2.  iUI:iPhone UI 框架 该框架由JavaScript库.CSS和…
本文内容 纯文本和静态 HTML 页面 服务器端技术 插件技术--ActiveX.Applet 和 Flash Ajax 异步时代和基于 JavaScript 的 UI 技术 RIA--Adobe Flex.Microsoft Silverlight.Sun JavaFx 本文回顾一下 Web UI 的发展历程. 纯文本和静态 HTML 页面 1989 年 Tim Berners Lee 发明了万维网,可以相互访问分散在网络上各处的资源.那时的网页没有 UI 概念,只是纯文本和跳转的超链接而已.…
UI设计必备软件Sketch 61破解版下载已经全新上线啦!Sketch 61是一个创新的矢量绘图软件,拥有简约的设计,调色板,面板,菜单,窗口和控件和功能强大的矢量绘图和文字工具,包含完美的布尔运算,符号,和强大的标尺,参考线和网格:非常适合网页设计和移动设计者使用.现为Mac软件平台Macdown大家带来Sketch 61 破解版下载,身为设计师的你快来下载吧! Sketch 61软件介绍 Sketch61 Mac是一款为设计师量身定做的优美界面和强大工具兼有的专业绘图工具.能够满足网页.用…
APP UI设计及切图规范 1.概述 1.1 编写目的 该文档主要针对移动端开发的视觉设计和开发过程中的工作环节做统一的规划规范,是系统进入UI设计的前置文档.部分内容来自网络收集修编,转载请注明由 嗡嗡(iwengweng.cn) 整理. 1.2 读者对象 项目实施工作组UI/UE设计人员. 2.色值规范 系统采用统一色彩标注值,超出的需要进行登记管理. 色彩范围值:以通用字号C开头标识,在Android开发中对应相应的配置文件 参考:Android开发设计规范 2.1 屏幕适配 Androi…
从Web借鉴UI设计 用户体验已经成为衡量应用软件质量的重要标准.在过去我们可能会惊叹于某个Web应用的华丽界面,现在,随着HTML5的强势登场,各类表现层技术及开发框架的发布,Web与窗体应用的界限正在被逐渐模糊.虽然技术已经焕然一新,但很多开发人员并不是专业的信息架构师,可能还在使用传统的.平凡的UI设计风格.富应用已成定局,过去难以实现的效果在今天看来已如此简单.本文旨在通过借鉴Web界面设计经验,来探寻系统UI设计的最佳实践. 一 指导原则概述 系统是自描述的 对于好的UI设计系统应该易…
WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库. WeUI 是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog.toast.article.icon等各式元素. 使用 方法一: 使用bower进行安装 ? 1 bower install --save weui 方法二: 使用npm进行安装 ? 1 npm install --save weui 开发 ? 1 2 3 4 5 gi…
出处:https://www.jianshu.com/p/9838f217f4f6 致敬,,, -------------------------------------------------------------- 分割线 ---------------------------------------------------------- 写在开头:关于网页栅格布局的概念已经无需再进行描述,一般来说,有经验的web ui 设计师都应该听说并运用过.但网上有些关于栅格化系统的文章讲的非常理论…
在做web项目的时候,命名的规范是很重要.初学者一般急于求成对命名规范没有概念,觉得花时间这些还不如多看几遍框架.其实在我看来,一个良好的命名习惯是很重要的.下面就来介绍一下我总结的命名规范: (1) 1.全部用小写字母 2.不用拼音 (2) 页面主体:main; 整体布局:wrapper; 页面的头部:header; 标志:logo; 导航:nav; 菜单:menu; 子菜单:submenu; 标题:title; 主导航:mainnav; 子导航:subnav; 搜索:search; 内容:c…
本帖最后由 hua631150873 于 2014-9-12 18:26 编辑 Lumzy 官方地址:http://www.lumzy.com/ Lumzy是一个网站应用和原型界面制作工具.使用Lumzy,您可以轻松创建UI模型并即时发送到客户电脑中. Lumzy还具有团队协作编辑工具. Mockingbird 官方地址:https://gomockingbird.com/ Mockingbird(中文名:百舌鸟)是一个在线工具,它使您轻松地创建UI界面模型,预览UI,并可以共享你的版面编排效果…
做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规范. Div+CSS命名规范一. 窗体 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo…
Ui控件汇总 按钮 单行文本框 多行文本框 水平滑动条 垂直滑动条 水平滚动条 垂直滚动条 进度条 下拉列表框 复选框 UI命名规范 UI文字做好备份,方便后期维护修改 按钮命名规范:btn_ 第一个按钮就叫btn_01 第二个按钮就叫btn_02 ............ 菜单menu 下拉框ckb 文字txt 标题lab…
一.Web语义化 1.1 H5的语义化 对于经验资深的前端er,在给web布局时,相信都会很注重标签和命名的规范.尤其是随着html5的普及发展,更是把web前端语义化推向一个新的台阶上.比如html5给我们新增的语义标签:header.nav.main.aside.footer.section.article等等.那么对于web语义化,有什么优势呢? 1.2 语义化优势 可以让人一目了然代码结构块,对于项目的维护或者优化都是非常有意义的. 语义化能提高页面SEO.如:<header><…
一.实现目标 简洁,高效,可维护 二.键值设计规约 1 . Redis key命名风格 [推荐]Redis key命名需具有可读性以及可管理性,不该使用含义不清的key以及特别长的key名: [强制]以英文字母开头,命名中只能出现小写字母.数字.英文点号(.)和英文半角冒号(:): [强制]不要包含特殊字符,如下划线.空格.换行.单双引号以及其他转义字符: 2 .命名规范 [强制]命名规范:业务模块名:业务逻辑含义:其他:value类型 1 )业务模块名:具体的功能模块 2)逻辑含义段: [强制…
下图是微信官方的要求 按照小程序UI设计(3)-符合视觉规范-列表视觉规范同样的方式,我们可以设计一样符合规范的输入项目.规范中没有说明padding-left的大小,我们暂定是15px.这样最外层view的padding-left和padding-right都是15px.以  为例制作符合规范的布局.首先在工具的画布上拖拽WViewRow. 然后设置width=375,padding-left和padding-right为15.再鼠标拖拽过来两个wviewrow,一个宽度是85,一个宽度是37…
上一篇我们介绍了字体规范,此贴介绍一下在列表中如何组合使用.下图是微信官方的要求   在工具中通过拖拽组件可以制作出一样的效果拖拽一个WViewRow.这个组件是小程序的view,flex-direction=row.缺省的属性如下. 放在工具的画布上是这样的 下面我们以  为例实际制作一个.此单项列表中一个view包括两个view,横向排列.最外层的view有margin-top.padding-left和padding-right.我们先定义最外层view.为了看的清楚我先把画布改成蓝色(修…
页面的命名规则 统一用翻译的英文命名(推荐) 统一用拼音命名(拼音的简化也可) 如果文件名过长,企业要提前约定一份缩写的规范,如pro—product 例如: 首页—index 产品列表—prolist产品详细页面—prodetail 新闻列表—newslist新闻详细页面—newsdetail 发展历史—history 关于我们—aboutus 联系我们—linkus,contactus 信息反馈—feedback留言—leavewords 图片命名规范 图片的名称分为头尾两部分,用下划线隔开…
以下是几个精致的web UI框架 1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. gitHub地址:https://github.com/aliceui/aliceui.github.io 2.Amazeui Amaze UI 是一个轻量级. Mobile first 的前端框架, 基于开源社区流行前端框架编写的. 官网地址:http://amazeu…
(转自:http://www.jb51.net/article/38796.htm) 图片命名注意: 1,不能以下划线("_")开头: 2,以数字加下划线("[0-9]_")开头 Android资源命名规范最近几个月,大量涉及android资源的相关工作.对于复杂的应用而言,资源命名的规范很有必要.除了开发人员之外,UI设计人员(或者切图相关人员)也需要对资源使用的位置非常清楚,这样,沟通就会直接.缺点是资源名字长一些,但是从整体价值来看,值得.命名模板为:缩写_主…
创建移动设计模式是非常重要的一步,记住!这是为移动设备设计而不是web.不仅仅是移动屏幕远小于普通的电脑屏幕,关键是鼠标和键盘已经被手指替代了! 当然还有更重要的,说起来很苦逼,我们再也不能使用一种模式来通吃这些不同的移动平台了,这可比兼容IE那一家子要苦难得多,毕竟还没有很好的规范.不是 吓唬你,别以为只有那巴掌地大小,为移动端做设计并不是很容易. 值得庆幸的是,国外已经有很多优秀的移动用户界面资源是可用的,这些先驱的宝贵资源可以大大帮助你的移动设计或开发你的响应式网站.相信今天要隆重推荐的1…
一 包名的书写规范 (Package)推荐使用公司或机构的顶级域名为包名的前缀,目的是保证各公司/机构内所使用的包名的唯一性.包名全部为小写字母,且具有实际的区分意义. 1.1 一般要求1.选择有意义的名字,能快速地传达该类的用途. 2.所有包的命名必须采用小写英文字母. 1.2 实际应用应用系统中经常应用分层,Dao层(数据库访问).Service层(业务处理).Web层(页面控制action类). 1.包名的前几个为固定名称, 如果是网站的话,采用网站的域名的反写,如果域名还没有确定的话,采…
以下命名规范是在编程中,可以辅助快速编程的良好方式之一,我一点点的整理出来,以便形成自己的编程规范.还有待完善... 0.产品命名规范: 结构 层次 产品 模块 功能 命名规则 UI(界面层) Web(aspx) 补习园(BXY) 前台模块(Web) 会员模块(Member) 例如:会员列表:MemberList.aspx:会员编辑:MemberEdit.aspx:会员查看:MemberView.aspx UILogicInterface(UI应用接口) 补习园(BXY) 前台模块(Web) 会…