web设计规范

 

web端的设计规范
 背景颜色、导航颜色 、内容颜色为主色,一般3种左右,辅色一般5种左右。
 字体颜色 主色和辅色一般3~5种,文字链接的颜色一般设置两种,深色和浅色。
 图标状态一般分为正常状态,hover 状态。哪种状态一定要保持一致性。
 下拉弹出框的设置,要标出两种状态,正常状态和点击状态,要标出它们的颜色颜色变化值。
 按钮的状态一般分为:正常状态 ,鼠标经过状态,点击过的状态,三种。
 注意整理分组,规则图标和不规则图标要分开主来放;并把他们的每种状态全部列出来,分组放在文档里。
 文章栏目标题名称或姓名内容,字体要设置不同的规格,,比如名称为14PX、雅黑,标题20PX、雅黑,内容14PX、雅黑,要标出上下左右的距离统一为多少。要标出行与行之间的距离,名称与标题,标题与段落之间的距离。
 

app 切图规范

切图的规范 

屏幕比较小的尺寸,用@1x,稍微大一点的屏幕尺寸,用@2x ,如果屏幕宽度大于768px,,用@3x,切图格式,一般用png24 . 

导航栏 Nav;bav_(功能描述).PNG nav_mune.png  nav_mune_pre.png  

常用的功能操作按钮的缩写:

login_bg登陆背景,login _btn登陆按钮,login _putin 登录框。 

btn按钮  ip输入  按钮文字btntext  复选框 chb  单选框 rb  下拉cbb  

列表页list   list_功能属性_描述 list_icon_like .png  

ta b标签栏 Tab_(功能描述).png Tab_set_pre.png Tab_set.png  

主页按钮 Home_icon_like 描述可以是英文间拼音等第一个字母组成 常用点击按钮:icon_(颜色) 

.9.png针对安卓的一种切图,图片可以愿意变换大小,注意最外层图层的背景必须是纯黑色或者纯透明。 

切图的时候可以把点击的背景一起切下来需要标注。 

Mac支持.flv格式的播放器

Mac支持.flv格式的播放器,找了多个才找到一款好用的,分享一下。

sPlayer Mac版支持视频格式: MP4,MOV,MKV,AVI,WMV,FLV,RMVB,ASF,OGV等所有常见格式,支持音频格式: MP3,WAV,WMA,FLAC,APE等,支持字幕格式: SRT,SSA,ASS等,支持图像格式: JPG,PNG,BMP,TIFF等,支持播放列表格式: m3u8,pls。

sPlayer Mac版支持支持视频旋转和硬件加速,同时播放多个媒体文件。软件内建音频增强和多音轨选择,内嵌/外,挂字幕选择,字幕同步。双击,全屏/恢复。空格,暂停/播放。

sPlayer Mac版和与iOS版本的播放器一样的简单,轻快和强大。值得拥有。

sPlayer Mac版下载:

https://pan.baidu.com/s/1NT4vDXglYapxFwZKVtxfFA 提取码: sv9i

做图标需要注意的点

做图标需要注意的点:

1、绘制图标前,要先设置好对齐像素;尽量选择几何图形而不是钢笔工具;

2、参考线和网格设置,comment+K,打开设置,把网格线间隔和次分割线的数值设置为,需要做的图标大小;比如,需要做的图标是64×64,参考线和网格设置的数字就是64,保证每一个网格都是一个像素。

3、一个图标用一个画板,这样比较有利于后期切片导出等操作。

4、做的图标尺寸,如果复制需要缩放一个,图标的尺寸是偶数,复制的图标缩放的尺寸也要是偶数。反之亦然。

5、圆角和线条相应保持同一。

6、一套图标要保持一致性,让整体保持平衡。以简洁为主,有识别性,注意强化特点。

7、做好一套图标后,要检查,打开 像素预览,看一下图标是否正常显示。

8、尝试做出不同风格。

9、包装和排版。

AI常用快捷键

1.   L–圆 

2.   M–矩形

3.   I–吸管工具

4.   A–直接选择工具(小白)

5.   V–选择工具

6.   V–选择工具

7.   P–钢笔工具 8.shirt+M–形状生成器

     形状生成器状态下,

      按shirt删掉边,按Alt删掉图形

9.comment+2–锁定图层

10. comment+3–隐藏图层

11. comment+D–重复上一步操作

12.   H–移动画板

13. shirt+W—宽度工具

14. S比例缩放工具

15. U–网格工具

16. R—旋转工具

17. Comment+K –调出首选项→设置界面,可以设置网格、参考线等

UI设计学习的路线

UI设计学习的路线 

一、设计是什么?设计是如何产生的?设计可以做什么?
      了解美术史,学会入门的美术鉴赏,目的是以正视听。学会用多个纬度去思考美学, 学会用更深入的方法来看待问题,学会从更宏观的视角审视行业……这样,你才能更客观的去理解UI的发展历程。这些知识和思想,将为你的职业生涯做出启蒙,才更容易成为一个有内涵有深度的设计师

二、手绘

以正确绘出静物为止,最重点要掌握的一个绘画技能,我觉得是结构素描。可以在纸张上对想绘制的图形做出快速、准确的打稿,效率和延展性远胜上机鼠绘。

三、掌握软件Sketch、PS、AI、DW、……可以用它临摹出任何使用这种软件设计的图形。
常自己做一些练习来测试自己对软件掌握度在哪里,就很容易发现问题,然后自己去查资料做研究。
好好去理解每个软件可以实现什么,优势是什么,极限在哪里。

四、设计理论 先是基础中的基础:三大构成:▪ 平面构成▪ 色彩构成▪ 立体构成

五、对于字体的认识 《商业字体设计》(方茜) 《好字体》(向玫玫)《文字设计的原理》([日]伊达千代,内藤孝彦)

六、逻辑取舍 文章:《太及时了!视觉设计师怎样让前端100%实现设计效果?
学会HTML5 CSS3 JQ的入门,安卓、IOS的实现规范!

七、鉴赏模仿 前面的步奏都是一个设计师基础素养的实现,而一个出色设计师还需要培养自己的套路和风格——站在巨人的肩膀上。

你要学会如何辨别优秀的作品,可以从多个渠道收集优秀作品和案例,首推使用:
Behance
花瓣网 (又到了求粉的季节,懒惰的可以只看我的花瓣 死翘翘的超人的花瓣个人主页)
www.pinterest.com
SDC设计师网址导航 (其它的可以在导航里逛)
学会看优秀的案例,用它们给你提供设计的燃料,然后你要做的就是抄!抄!抄!用你学过的设计理论在实现中对案例进行分析,只有发现了它们的优点并自己动手实践实现了,才对你的提升有实际帮助。你每天抄一个案例,BANNER、ICON、APP界面,那么不出几个月,你就能对现有的设计形式套路了如指掌,可以设计出安全不会有太大毛病的UI设计稿。

八、阅读思考扩展
不要做一个只知有设计,不知有数理化的蟾蜍,只能在你自己的井里蹦跶。

        每个方向都需要阅读相应的教材,重要性无以复加,你需要在观看的时候一边做练习。然后才是具体设计类的书籍,记得不要再买那些无用的通篇告诉你软件操作的书籍。
设计的理论书籍教会你怎么设计,你需要在不断接受知识的同时,马上对它们做实验,不停的练习,不停的产生问题并解决。在你的设计观念足够成熟前,绝对不要没事上网看设计的XX法则,如何做好网页设计你需要掌握的XX个技巧,完全就是设计界的鸡汤文,它们看着其实挺有道理,但完全没办法给新人提供实践指南

一定要持续关注这些那些最简单,但是最受欢迎的网站和应用。例如:知乎、INS、微信、淘宝等等。去不断讨论、查阅,来理解为什么是当前的呈现式样,而不如自己的预期。
你要在练习和思考中进步,不要盲目的追求视觉表现,这样的UI设计师是很难真正的成长起来。
设计的终极目的是解决问题,而不是盲目的表现自己对美的追求。所以我要新手不要去看那些只上传飞机稿的网站。
当前主流设计平台的趋势就是,少数大神驱动庞大的底端设计群体,如果你已经在前几个步骤得到提升,那么这些网站的多数设计师已经在思想上没法和你并驾齐驱,不要去这些地方混迹。这些网站不会有真正有价值对等的交流和见解
当你抄了两三个月案例,就已经有足够多的作品集了,你已经可以打包做简历去应聘了。届时你的水准将超越绝大多有数年经验的设计师了!

*成熟的设计不只是你个性技巧的表达,还有你对解决问题所展示出来的理性和洞见。很多设计师和同层次的其它专业人员比较起来显得太幼稚和粗浅,症状也在这里。不要只用设计的角度去看世界,去涉猎更多的专业,让眼界更宽广,有更多的角度去理解世界,得到的感悟将给你带来难以估量的升华和进步。

*设计是一门需要沉淀的技艺,却恰巧遇见了日新月异的互联网文化。这让大家对流行极具敏感度,而开始追赶潮流,轻视正统和法则。这整个流程需要或许需要1整年的时间,但我相信,只要有足够的耐心,是可以让一个新手成长成为一名合格的UI设计师,请放慢你的角度,不要急于求成。

*这是可以持续一生的事业和技艺,在正确的方法下,越积累越成熟,老而弥坚。

 

 

来源于网上收集,仅供学习参考,禁止其它用途!

PS快捷键

common(CTR)+S     保存图片

common(CTR)+G     合并为组

common(CTR)+J    复制图层

common(CTR)+U    调出颜色

shift+common(CTR)+u 去色

common(CTR)+T    改变大小

common(CTR)+Alt+t    改变大小并复制

common(CTR)+Alt+Shirt+t   改变大小并复制并重复操作

common(CTR)+Alt+Shirt+E   快照(盖印)

common(CTR)+i   颜色反向

common(CTR)+L  色阶

common(CTR)+M  曲线

common(CTR)+B  色彩平衡

common(CTR)+Enter 把路径转换为选区

Shift+F6  羽化

common(CTR)+R 调出标尺

12345,在移动工具模式下,改变图层的不透明度

12345,在画笔模式工具下,改变画笔的不透明度

 

水韵陆坪

○胡嫒娟

水,依着漫山的绿
悄然流过
刚烈与温柔相济
舞动的水袖
将那份深藏的心意,融入眼眸
在低吟浅唱中
便泼洒到——逶迤的峰峦

堤岸上
几枝鹅黄嫩绿,在
水波上荡漾
如同群峰 垂钓
一溪的风景

一帘飞瀑沿峭壁从天而降
只因,那纵横交错的故事里
有你
舒展与飞泻间 我知晓
你,只是想还我一个
被岁月风干了的童话

满山的绿色伴着水的妙音
静读烟霞
清雅的山水 连绵
柔波着心弦
浸湿了一段 馨香的记忆

静水微澜  一派空灵
风景和情怀
和着一曲山歌
便已飞到 
千里之外


摘自
http://blog.sina.com.cn/s/blog_5a61c5800102xq9a.html