appui设计网页设计的命名规范和ps图层结构规范.docx
《appui设计网页设计的命名规范和ps图层结构规范.docx》由会员分享，可在线阅读，更多相关《appui设计网页设计的命名规范和ps图层结构规范.docx（12页珍藏版）》请在冰点文库上搜索。
appui设计网页设计的命名规范和ps图层结构规范
竭诚为您提供优质文档/双击可除
app,ui,设计（网页设计）的命名规范和ps图层结构规范
篇一：
web+ui+设计命名规范讲解
webui设计命名规范
这套规范并非单纯的css、html或javascript命名规范，它涉及了很多使用photoshop这类设计工具进行网页设计过程中的命名规范。
（好久没写文章了，有点罗嗦，吼吼~）。
首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因就是网上大多命名规范都是关于编码的，也就是那些css、html、js和一些服务器端语言的，至于设计方面的命名规范实在是很少。
但是毕竟设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。
这套webui设计命名规范总结自我的一些web设计经验和国外设计师的命名 繁体中文：
英语：
原始制作者信息
网站简介
搜索关键字网页的css规范
网页标题这里是你的网页标题
head区可以选择加入的标识
设定网页的到期时间。
一旦网页过期，必须到服务器上重新调阅。
禁止浏览器从本地机的缓存中调阅页面内容。
用来防止别人在框架里调用你的页面。
自动跳转。
5指时间停留5秒。
网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
content的参数有all,none,index,noindex,follow,nofollow。
默认是all。
收藏夹图标
js调用规范
所有的javascript脚本尽量采取外部调用
css书写规范
所有的css的尽量采用外部调用
书写时重定义的最先，伪类其次，自定义最后（其中a:
linka:
visiteda:
hovera:
actived要按照顺序写）便于自己和他人阅读。
为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px和14.7px这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px的字号比较合适。
css推荐模板。
p{text-indent:
2em;}
body{font-family:
"宋体";font-size:
9pt;color:
#000000;margin-top:
0px;margin-right:
0px;margin-bottom:
0px;margin-left:
0px}
table{font-family:
"宋体";font-size:
9pt;line-height:
20px;color:
#000000}
a:
link{font-size:
9pt;color:
#0000FF;text-decoration:
none}
a:
visited{font-size:
9pt;color:
#990099;text-decoration:
none}
a:
hover{font-size:
9pt;color:
#FF9900;text-decoration:
none}
a:
active{font-size:
9pt;color:
#FF9900;text-decoration:
none}
a.1:
link{font-size:
9pt;color:
#3366cc;text-decoration:
none}
a.1:
visited{font-size:
9pt;color:
#3366cc;text-decoration:
none}
a.1:
hover{font-size:
9pt;color:
#FF9900;text-decoration:
none}
a.1:
active{font-size:
9pt;color:
#FF9900;text-decoration:
none}
.blue{font-family:
"宋体";font-size:
10.5pt;line-height:
20px;color:
#0099FF;letter-spacing:
5em}
-->
body标识
为了保证浏览器的兼容性，必须设置页面背景
05形象设计规范
网站的ci整体形象包括下面几个要素
标志（logo）
网站必须有独立的标志
标志可以以网站中英文名称设计，也可以采用特别的图案。
原则是简单易记。
标志必须可以用黑白和彩色分别清晰表现
标志图片的名称为"logo_域名.gif"，例如：
logo_sina.gif
尽量提供标志的矢量图片
请尽可能在每个页面上都使用标志
标准色
网站应该有自己的标准色（主体色）
标准色原则上不超过两种，如果有两种，其中一种为标准色，另一种为标准辅助色标准色应尽量采用216种web安全色之内的色彩
必须提供标准色确切的Rgb和cymk数值
请尽可能使用标准色
标准字体
网站应该定义一种标准字体（指logo上，图片上使用的字体）
标准字体原则上定义两种，一种中文字体，一种英文字体（不包括文本内容字体）必须提供标准字体的名称和字库
请尽可能使用标准字体
篇二：
手机app图标设计ui网页设计师平面photoshop设计教程
江西省南昌市20xx-20xx学年度第一学期期末试卷
（江西师大附中使用）高三理科数学分析
试卷紧扣教材和考试说明，从考生熟悉的基础知识入手，多角度、多层次地考查了学生的数学理性思维能力及对数学本质的理解能力，立足基础，先易后难，难易适中，强调应用，不偏不怪，达到了“考基础、考能力、考素质”的目标。
试卷所涉及的知识内容都在考试大纲的范围内，几乎覆盖了高中所学知识的全部重要内容，体现了“重点知识重点考查”的原则。
1．回归教材，注重基础
试卷遵循了考查基础知识为主体的原则，尤其是考试说明中的大部分知识点均有涉及，其中应用题与抗战胜利70周年为背景，把爱国主义教育渗透到试题当中，使学生感受到了数学的育才价值，所有这些题目的设计都回归教材和中学教学实际，操作性强。
2．适当设置题目难度与区分度
选择题第12题和填空题第16题以及解答题的第21题，都是综合性问题，难度较大，学生不仅要有较强的分析问题和解决问题的能力，以及扎实深厚的数学基本功，而且还要掌握必须的数学思想与方法，否则在有限的时间内，很难完成。
3．布局合理，考查全面，着重数学方法和数学思想的考察
在选择题，填空题，解答题和三选一问题中，试卷均对高中数学中的重点内容进行了反复考查。
包括函数，三角函数，数列、立体几何、概率统计、解析几何、导数等几大版块问题。
这些问题都是以知识为载体，立意于能力，让数学思想方法和数学思维方式贯穿于整个试题的解答过程之中。
二、亮点试题分析
1．【试卷原题】11.已知a,b,c是单位圆上互不相同的三点，且满足abac，则abac的最小值为（）
1
41b．
23c．
4d．1
a．
【考查方向】本题主要考查了平面向量的线性运算及向量的数量积等知识，是向量与三角的典型综合题。
解法较多，属于较难题，得分率较低。
【易错点】1．不能正确用oa，ob，oc表示其它向量。
2．找不出ob与oa的夹角和ob与oc的夹角的倍数关系。
【解题思路】1．把向量用oa，ob，oc表示出来。
2．把求最值问题转化为三角函数的最值求解。
22
【解析】设单位圆的圆心为o，由abac得，（oboa）（ocoa），因为
，所以有，oboaocoa则oaoboc1
abac（oboa）（ocoa）
2
obocoboaoaocoa
oboc2oboa1
设ob与oa的夹角为，则ob与oc的夹角为2
11
所以，abaccos22cos12（cos）2
22
1
即，abac的最小值为，故选b。
2
【举一反三】
【相似较难试题】【20xx高考天津，理14】在等腰梯形abcd中,已知
ab//dc,ab2,bc1,abc60,动点e和F分别在线段bc和dc上,且,1bebc,dFdc,则aeaF的最小值为.
9
【试题分析】本题主要考查向量的几何运算、向量的数量积与基本不等式.运用向量的几何
运算求ae,aF，体现了数形结合的基本思想，再运用向量数量积的定义计算aeaF，体
现了数学定义的运用，再利用基本不等式求最小值，体现了数学知识的综合应用能力.是思维能力与计算能力的综合体现.【答案】
11
【解析】因为dFdc,dcab，
92
11919cFdFdcdcdcdcab，
9918
2918
aeabbeabbc，1919aFabbccFabbcababbc，
1818
19192219aeaFabbcabbcabbc1abbc
181818
2117172919199
421
cos120
921818181818
21229
当且仅当.即时aeaF的最小值为
92318
2．【试卷原题】20.（本小题满分12分）已知抛物线c的焦点F1,0，其准线与x轴的
交点为k，过点k的直线l与c交于a,b两点，点a关于x轴的对称点为d．（Ⅰ）证明：
点F在直线bd上；（Ⅱ）设FaFb
8
，求bdk内切圆m的方程.9
【考查方向】本题主要考查抛物线的标准方程和性质，直线与抛物线的位置关系，圆的标准方程，韦达定理，点到直线距离公式等知识，考查了解析几何设而不求和化归与转化的数学思想方法，是直线与圆锥曲线的综合问题，属于较难题。
【易错点】1．设直线l的方程为ym（x1），致使解法不严密。
2．不能正确运用韦达定理，设而不求，使得运算繁琐，最后得不到正确答案。
【解题思路】1．设出点的坐标，列出方程。
2．利用韦达定理，设而不求，简化运算过程。
3．根据圆的性质，巧用点到直线的距离公式求解。
【解析】（Ⅰ）由题可知k1,0，抛物线的方程为y24x
则可设直线l的方程为xmy1，ax1,y1,bx2,y2,dx1,y1，故
xmy1y1y24m2
整理得，故y4my402
y4xy1y24
2
y2y1y24
则直线bd的方程为yy2xxx2即yy2
x2x1y2y14
yy
令y0，得x121，所以F1,0在直线bd上.
4
y1y24m2
（Ⅱ）由（Ⅰ）可知，所以x1x2my11my214m2，
y1y24
x1x2my11my111又Fax11,y1，Fbx21,y2
故FaFbx11x21y1y2x1x2x1x2584m，
2
2
则84m
84
,m，故直线l的方程为3x4y30或3x4y3093
故直线
bd的方程3x
30或3x30，又kF为bkd的平分线，
3t13t1
,故可设圆心mt,01t1，mt,0到直线l及bd的距离分别为54y2y1
-------------10分由
3t15
3t143t121
得t或t9（舍去）.故圆m的半径为r
953
2
14
所以圆m的方程为xy2
99
【举一反三】
【相似较难试题】【20xx高考全国，22】已知抛物线c：
y2＝2px（p>0）的焦点为F，直线5
y＝4与y轴的交点为p，与c的交点为q，且|qF|＝4
（1）求c的方程；
（2）过F的直线l与c相交于a，b两点，若ab的垂直平分线l′与c相交于m，n两点，且a，m，b，n四点在同一圆上，求l的方程．
【试题分析】本题主要考查求抛物线的标准方程,直线和圆锥曲线的位置关系的应用,韦达定理,弦长公式的应用,解法及所涉及的知识和上题基本相同.【答案】
（1）y2＝4x.
（2）x－y－1＝0或x＋y－1＝0.【解析】
（1）设q（x0，4），代入
y2＝2px，得
x0＝，
p
8
8pp8
所以|pq|，|qF|＝x0＝＋.
p22p
p858
由题设得＋＝p＝－2（舍去）或p＝2，
2p4p所以c的方程为y2＝4x.
（2）依题意知l与坐标轴不垂直，故可设l的方程为x＝my＋1（m≠0）．代入y2＝4x，得y2－4my－4＝0.设a（x1，y1），b（x2，y2），则y1＋y2＝4m，y1y2＝－4.
故线段的ab的中点为d（2m2＋1，2m），|ab|m2＋1|y1－y2|＝4（m2＋1）．
1
又直线l′的斜率为－m，
所以l′的方程为x＋2m2＋3.
m将上式代入y2＝4x，
4
并整理得y2＋－4（2m2＋3）＝0.
m设m（x3，y3），n（x4，y4），
则y3＋y4y3y4＝－4（2m2＋3）．
m
4
22
2故线段mn的中点为e22m＋3，－，
mm
|mn|＝
4（m2＋12m2＋1
1＋2|y3－y4|＝.
mm2
1
由于线段mn垂直平分线段ab，
1
故a，m，b，n四点在同一圆上等价于|ae|＝|be|＝，
211
22从而＋|de|＝2，即444（m2＋1）2＋
2222
2m＋＋22＝
mm
4（m2＋1）2（2m2＋1）
m4
化简得m2－1＝0，解得m＝1或m＝－1，故所求直线l的方程为x－y－1＝0或x＋y－1＝0.
三、考卷比较
本试卷新课标全国卷Ⅰ相比较，基本相似，具体表现在以下方面：
1.对学生的考查要求上完全一致。
即在考查基础知识的同时，注重考查能力的原则，确立以能力立意命题的指导思想，将知识、能力和素质融为一体，全面检测考生的数学素养，既考查了考生对中学数学的基础知识、基本技能的掌握程度，又考查了对数学思想方法和数学本质的理解水平，符合考试大纲所提倡的“高考应有较高的信度、效度、必要的区分度和适当的难度”的原则．2.试题结构形式大体相同，即选择题12个，每题5分，填空题4个，每题5分，解答题8个（必做题5个），其中第22，23，24题是三选一题。
题型分值完全一样。
选择题、填空题考查了复数、三角函数、简易逻辑、概率、解析几何、向量、框图、二项式定理、线性规划等知识点，大部分属于常规题型，是学生在平时训练中常见的类型．解答题中仍涵盖了数列，三角函数，立体何，解析几何，导数等重点内容。
3.在考查范围上略有不同，如本试卷第3题，是一个积分题，尽管简单，但全国卷已经不考查了。
篇三：
优秀photoshop设计师的9个规范和技巧
photoshop这样传奇的工具我想已经无需赘言了，它诞生于1990年，前些日子刚刚过20周年庆。
从设计小广告横幅到手工制作最优秀的网页应用程序ui，photoshop在一个网页设计师心中有特别的地位。
和世界繁忙的网页设计师及photoshop使用者同在，每天我都感觉落在后面。
看着世界数百万试图超越我的人才们作品里面优秀的部分，我就能每时每刻燃起学习的动力。
因为有大量的挖掘使用photoshop技巧的在线资源、教程、博客文章，任何人有热情和乐于工作的人随着时间的推移都能成为专家。
但是如何从一个专家转变为―最好的‖呢？
为什么有些设计师总是最棒的？
当可用的资源对每个人都是平等时，究竟他们和其他人有何不同之处？
何以令他们卓尔不群？
以下略微窥视这些设计师在他们的工作流程中的一些规范，这些同样的规范令他们聚成一类。
1.2.3.4.5.6.7.8.9.
基于对象操作的photoshoping图层和组的命名惯例再利用和实践的能力路径和钢笔工具的使用有效利用调整层和样式参考线、栅格及注释工作区管理快捷键
尊重并回应对你的评论
1.基于对象操作的photoshoping
photoshoping是一个痛并快乐着的过程！
尤其是当你在处理一个复杂的图形合成和布局，有着大量的重复东西的时候。
为一个网站或者网页应用程序设计高精度图像合成，或许会成为噩梦，特别是如果你处于一个创意团队并且需要频繁会见客户的情况，这意味着太多的时候你会湮没在大量的重复以及频繁的变动之中。
解决这些麻烦的秘诀在于―组织‖，如果你想掌控你的psd，组织好你的图层和组的重要性是不言而喻的！
在我过去六年以上的网页设计生涯之中，我发现这是设计师的独特特征，喜欢有组织及富有成效。
让我们看看一个psd样本，看看这个合成是如何通过整齐的模块和基于对象操作方法绝好地组织起来。
你可以用基于对象方法创建这个简单的表单，在设计的时候将各种ui（userinterface用户图形界面）元素标记出来并进行拆分。
在这个样例中，有一组输入框和一个带超链接提交按钮，这些组成了一个完整的表单。
用基于对象方法思考，每一个输入框被当成是一个物体，所以创建一个包含文字、及底的组，命名为txtbox，如果需要更多的输入框就只是复制的问题了，图片里，是这个样例的层结构。
最终的图层合成结构如下图所示:
以后无论用photoshop做什么设计，都去贯彻实施这种意识，这会带给你令你吃惊的结果，你能够省下大量的时间，并建立起一个不错的日后可以再重复利用的元素库。
译者注：
原文作者表述起来似乎很麻烦，其实很简单，就是把物体分好组这样而已。
很多人没有规范操作的习惯，建议养成这种习惯，非常有助于大项目的维护以及团队内的协同工作，确实是很简单实用的一招。
2.图层和组的命名惯例
我有过几次艰难的时刻，当我要在其他设计师的psd文件里理解他的图层和组的结构时，几乎令我抓狂。
里面有上千的未命名的图层和组，一天就这么完了。
尤其不妙的是假如你需要快速地做修改和更新。
解决的方案是规范好图层和组的命名方式。
假如你是一个热衷于html/css的前端工程师，你会很容易理解命名惯例的重要性。
有时候我们要学会把图层面板放到顶部位置，这个实用技巧很容易被忽视，我认为这是想要高效和有组织是使用photoshop的一个核心技能。
让我们回到主题，不论你可能使用什么工具，心中清晰地知道设计所要用到的各种元素是异常重要的。
你的想法要在画布上实现要通过图层面板，你对图层命名的方式通常就是你将脑中图形在画布上展现的方式。
事实上，当我需要从一堆设计师挑选人的时候，我经常用这种方式去评估一个他的技能。
命名的时候，这里有一个关键的地方，赋予图层逻辑名字（logicalnames）而非外观名字（presentationalnames），一个图层如果命名为―快速链接‖会比命名为―黑色矩形‖更好。
（在这里，黑色矩形是快速链接的底色）。
这里解释一下逻辑名字和外观名字，外观名字就是基于元素所展现的外观来描述的，比如色彩、形状、位置以及方向等。
而逻辑名字则是基于元素在图层中的功能来描述的。
译者注：
这点在编写css的时候也一样，用它的逻辑名字，比如―外部链接‖，因为设计的时候，有可能要经常更换外观，举个例子，假如有一天客户说要把快速链接的背景颜色改成绿色，那这个图层的名字就很尴尬了。
以下是一张表格，用来驱散你对命名惯例的烦恼。
（译者注：
本人推荐用英文进行命名，翻译的中文仅供理解这两种名字的含义）
—————–英文表格原文———————
3.再利用和实践的能力
―最重要的技能是制造一个杀手级的设计师‖
必须清楚没有人是天才，至少在设计这个领域：
p（达芬奇和爱因斯坦请自觉从这个列表中删除：
d）。
实践、实践、再实践。
目前的网页设计所关心的是那种独特的鉴赏、再利用、精炼的技能，它能让你向前进。
再利用而不是复制。
这不是让你从你看过的很酷的网站上拷贝一份也不是让你在别人的才智基础上展现你的创新技能。
协作以及互联网开放文化平台应该正确地利用，去拓展你的技能而不是复制黏贴。
所以我所说的再利用是指收集一些你认为最好的参考作品，然后可以根据你见过的这些作品的设计风格、审美特点重新进行设计。
这样，你就能将自己推上一个新的高度。
升级会员 