程序员快速掌握的UI设计技巧

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、概要

功能与内在很关键，UI与外表也重要。

1.1、选择主色调

1.1.1、三原色

三原色指色彩中不能再分解的三种基本颜色，我们通常说的三原色，即红、黄、蓝。三原色可以混合出所有的颜色，同时相加为黑色，黑白灰属于无色系。

1.1.2、RGB

RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

CSS中用24位表示颜色，如#ff00ff，#RRGGBB #Red Red Green Green Blue Blue #红红绿绿蓝蓝

每一位上的数字越大，则颜色越深（#ff0000 最红，#cc0000 红 #330000），比重

#ff0000 红

#ffff00 黄

#ffffff 白

#000000 黑

#cccccc 灰色 #eeeeee 浅

整体数字越大越浅，越小越深

红色：暖色系（女）

绿色：中性（小孩，老人）

蓝色：冷色（男）

红色——热烈、喜庆、激情、辟邪、危险……
橙色——温暖、事物、友好、财富、警告……
黄色——艳丽、单纯、光明、温和、活泼……
绿色——生命、安全、年轻、和平、新鲜……
青色——信任、朝气、脱俗、真诚、清丽……
蓝色——整洁、沉静、冷峻、稳定、精确……
紫色——浪漫、幽雅、神秘、高贵、妖艳……
白色——纯洁、神圣、干净、高压、单调……
灰色——平凡、随意、宽容、苍老、冷漠……
黑色——正统、严肃、死亡、沉重、恐怖……

1.1.3、安全色

不同的平台（Mac、PC等）有不同的调色板，不同的浏览器也有自己的调色板。这就意味着对于一幅图，显示在Mac上的Web浏览器中的图像，与它在PC上相同浏览器中显示的效果可能差别很大。

选择特定的颜色时，浏览器会尽量使用本身所用的调色板中最接近的颜色。如果浏览器中没有所选的颜色，就会通过抖动或者混合自身的颜色来尝试重新产生该颜色。

256色里有40种颜色在Macintosh和Windows里显示的效果不一样，所以能安全使用的只有216色。

http://www.bootcss.com/p/websafecolors/

■#000000 ■#000033 ■#000066 ■#000099 ■#0000CC ■#0000FF	■#003300 ■#003333 ■#003366 ■#003399 ■#0033CC ■#0033FF	■#006600 ■#006633 ■#006666 ■#006699 ■#0066CC ■#0066FF	■#009900 ■#009933 ■#009966 ■#009999 ■#0099CC ■#0099FF	■#00CC00 ■#00CC33 ■#00CC66 ■#00CC99 ■#00CCCC ■#00CCFF	■#00FF00 ■#00FF33 ■#00FF66 ■#00FF99 ■#00FFCC ■#00FFFF
■#330000 ■#330033 ■#330066 ■#330099 ■#3300CC ■#3300FF	■#333300 ■#333333 ■#333366 ■#333399 ■#3333CC ■#3333FF	■#336600 ■#336633 ■#336666 ■#336699 ■#3366CC ■#3366FF	■#339900 ■#339933 ■#339966 ■#339999 ■#3399CC ■#3399FF	■#33CC00 ■#33CC33 ■#33CC66 ■#33CC99 ■#33CCCC ■#33CCFF	■#33FF00 ■#33FF33 ■#33FF66 ■#33FF99 ■#33FFCC ■#33FFFF
■#660000 ■#660033 ■#660066 ■#660099 ■#6600CC ■#6600FF	■#663300 ■#663333 ■#663366 ■#663399 ■#6633CC ■#6633FF	■#666600 ■#666633 ■#666666 ■#666699 ■#6666CC ■#6666FF	■#669900 ■#669933 ■#669966 ■#669999 ■#6699CC ■#6699FF	■#66CC00 ■#66CC33 ■#66CC66 ■#66CC99 ■#66CCCC ■#66CCFF	■#66FF00 ■#66FF33 ■#66FF66 ■#66FF99 ■#66FFCC ■#66FFFF
■#990000 ■#990033 ■#990066 ■#990099 ■#9900CC ■#9900FF	■#993300 ■#993333 ■#993366 ■#993399 ■#9933CC ■#9933FF	■#996600 ■#996633 ■#996666 ■#996699 ■#9966CC ■#9966FF	■#999900 ■#999933 ■#999966 ■#999999 ■#9999CC ■#9999FF	■#99CC00 ■#99CC33 ■#99CC66 ■#99CC99 ■#99CCCC ■#99CCFF	■#99FF00 ■#99FF33 ■#99FF66 ■#99FF99 ■#99FFCC ■#99FFFF
■#CC0000 ■#CC0033 ■#CC0066 ■#CC0099 ■#CC00CC ■#CC00FF	■#CC3300 ■#CC3333 ■#CC3366 ■#CC3399 ■#CC33CC ■#CC33FF	■#CC6600 ■#CC6633 ■#CC6666 ■#CC6699 ■#CC66CC ■#CC66FF	■#CC9900 ■#CC9933 ■#CC9966 ■#CC9999 ■#CC99CC ■#CC99FF	■#CCCC00 ■#CCCC33 ■#CCCC66 ■#CCCC99 ■#CCCCCC ■#CCCCFF	■#CCFF00 ■#CCFF33 ■#CCFF66 ■#CCFF99 ■#CCFFCC ■#CCFFFF
■#FF0000 ■#FF0033 ■#FF0066 ■#FF0099 ■#FF00CC ■#FF00FF	■#FF3300 ■#FF3333 ■#FF3366 ■#FF3399 ■#FF33CC ■#FF33FF	■#FF6600 ■#FF6633 ■#FF6666 ■#FF6699 ■#FF66CC ■#FF66FF	■#FF9900 ■#FF9933 ■#FF9966 ■#FF9999 ■#FF99CC ■#FF99FF	■#FFCC00 ■#FFCC33 ■#FFCC66 ■#FFCC99 ■#FFCCCC ■#FFCCFF	■#FFFF00 ■#FFFF33 ■#FFFF66 ■#FFFF99 ■#FFFFCC ■#FFFFFF

1.1.4、同色系原则

同色系配色：即用单一的颜色。易协调,应注意色彩深浅浓淡和花材形态的变化。

简单、不花、有层次感

1.1.5、扁平化metro

Metro(美俏)是微软在Windows Phone 7中正式引入的一种界面设计语言，也是Windows 8的主要界面显示风格

1.2、选择辅助色

颜色搭配

假定已选择一种颜色来作为主色调：#ff99ff

怎样选择辅助色：

http://www.colorhexa.com/ff99ff

http://www.color-hex.com/color/ff99ff

https://www.colorcombos.com/colors/ff99ff

http://encycolorpedia.cn/ff99ff

1.3、颜色搭配

一、Photoshop

Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件，Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。

1.1、Photoshop历史与版本

1990 横空出世 Adobe Photoshop 1.0

更多：http://www.jianshu.com/p/73bcd6c2a9df

photoshop理论基础：http://www.jianshu.com/p/ed5d25cc7b9f

1.2、PhotoShop在线教程

前端工程师技能之photoshop巧用系列第一篇——准备篇

前端工程师技能之photoshop巧用系列第二篇——测量篇

前端工程师技能之photoshop巧用系列第三篇——切图篇

前端工程师技能之photoshop巧用系列第四篇——图片格式

前端工程师技能之photoshop巧用系列第五篇——雪碧图

前端工程师技能之photoshop巧用系列扩展篇——自动切图

1.3、快捷键

1.3.1、单独常用的快捷键

ESC取消操作
双击Photoshop的背景空白处打开文件
F12 恢复为初始图像
选择工具的快捷键
选框-M 移动-V 套索-L 魔棒-W 喷枪-J 画笔-B 铅笔-N 橡皮图章-S
历史记录画笔-Y 橡皮擦-E 模糊-R 减淡-O 钢笔-P 文字-T 度量-U
渐变-G 油漆桶-K 吸管-I 抓手-H 缩放-Z
默认前景和背景色-D 切换前景和背景色-X 编辑模式切换-Q 显示模式切换-F
另外，如果我们按住Alt键后再单击显示的工具图标，或者按住Shift键并重复按字母快捷键则可以循环选择隐藏的工具。
获得精确光标
按Caps Lock键可以使画笔和磁性工具的光标显示为精确十字线，再按一次可恢复原状。
按Tab键可切换显示或隐藏所有的控制板(包括工具箱)，如果按Shift+Tab则工具箱不受影响，只显示或隐藏其他的控制板。

1.3.2、与shift一起使用的快捷键。（shift多数表示处于某种状态）

按Shift时可画出正圆和方形的选区、图形、直线。
按Shift时可画出垂直、水平和45度的直线
按Shitf时可用鼠标垂直、水平和45度的移动对象
按Shift时可快速的移动对象
按Shift+“选区工具”可增加选区，Alt+“选区工具”可减少选区
按Shift+Alt时可画出以某点为中心的正圆和正方形。
Shift+“Backspace”调出填充对话框
使用绘画工具如(如画笔组，橡皮等)，按住Shift键单击鼠标，可将两次单击点以直线连接。
若要将某一图层上的图像拷贝到尺寸不同的图像窗口中央位置时，可以在拖动鼠标的同时按住Shift键，图像拖动到目的窗口后会自动居中。

1.3.3、与ctral一起使用的快捷键。（ctrl多数表示执行某个命令）

自由控制大小
Ctrl+ 0（零）满屏显示图像
Ctrl+“+”放大图像
Ctrl+“-”缩小图像
Ctrl+“N”或Ctrl+“双击”新建文件
Ctrl+“S”保存
Ctrl+ Shift+“S”另存为…
Ctrl+“O”打开文件
Ctrl+“W”关闭文件
Ctrl+“Q”退出程序
Ctrl+“C”复制
Ctrl+“X”剪切
Ctrl+“V”粘帖
Ctrl+Shift+“C”合并复制（复制多层内容）
Ctrl+Shift+“V”粘帖入选区内
Ctrl+“L”色阶设置
Ctrl+“M”色彩曲线设置
Ctrl+“B”色彩平衡设置
Ctrl+“I”色彩反相
Ctrl+“U”色相/饱和度设置
Ctrl+“J”把图层或图层中选重的部分复制一个新层
Ctrl+Shift+“N”新建图层
Ctrl+“E”向下合并图层
Ctrl+ Shift+“E”全并所有可见图层
Ctrl+“G”创建剪切蒙板层
Ctrl+“A”全选
Ctrl+“D”取消选择
Ctrl+ Shift+“I”反选
Ctrl+ Shift+“B”自动颜色
Ctrl+ Shift+“L”自动色阶
Ctrl+ Shift+Alt+“L”自动对比度
Ctrl+“Z”取消上一步的操作
Ctrl+ Alt+“Z”取消多步操作
Ctrl+ Shift+“Z”向前返回
Ctrl+Alt+“D”羽化….
Ctrl+“T”自由变换选区对象（选择菜单栏中的“变换选区”只对选区起作用，）在使用“编辑”→“自由变换”(Ctrl+T)命令时，按住Ctrl键并拖动某一控制点可以进行自由变形调整；按住Alt键并拖动某一控制点可以进行对称变形调整；按住Shift键并拖动某一控制点可以进行按比例缩放的调整；按住Shift+Ctrl键并拖动某一控制点可以进行透视效果的调整；按Alt+Ctrl键并拖动某一控制点可以进行斜切调整；按Enter键应用变换；按Esc键取消*作。
Ctrl+“P”打印
Ctrl+“[”往下移动图层
Ctrl+“]”往上移动图层
Ctrl+Shift+“[”置底层
Ctrl+Shift+“]”置顶层
Ctrl+“F”重复执行上一次滤镜操作
Ctrl+“Del” （Backspace）用背景色填充图层或选区，Alt+Del （Backspace）用前景色填充图层和选区。
Ctrl+“H”显示隐藏选区边框,辅助线、网格
Ctrl+“R”显示和隐藏标尺
Ctrl+“;”显示和隐藏参考线
Ctrl+“””显示和隐藏网格
Ctrl+“Y”校验颜色
不是在选取工具下，按Ctrl+鼠标也可自由的移动辅助线
Ctrl+ 单击（在图层、通道、路径面板中单击）可载入相应的选区。
Ctrl+ 选区或“移动工具”移动选区对象
Ctrl+Alt+选区或“Alt+移动工具”复制各选区对象
在使用“路径、选区”工具时按着Ctrl可移动对象
在执行直接选取工具或路径选取工具操作时按Ctrl可实现两者之间的切换。
在钢笔工具操作时按Ctrl，可切换到“直接选取工具”对路径中的各控制点进行调整、Alt可切换到“转换点工具”
在文字工具操作时按Ctrl, 可对文字进行缩放、旋转等调整

1.3.4、与alt一起作用的快捷键。（alt多数表示动作之间的操作切换）

Alt+橡皮工具。在图象上涂抹可以恢复擦除的部分。
Alt+“颜色选取工具”背景取色
执行钢笔工具操作时按Alt可变换成“转换点工具”，按Ctrl可变换成“直接选取工具”
Alt+菜单命令，可展开相应的菜单。
在编辑文字时，当光标在字母之间按Alt+“方向键”可调整字母之间的间距。
在执行套索工具操作时按Alt可实现“套索工具与多边形套索工具”、“磁性套索工具羽多边形套索工具”等之间的切换。
Alt+ 移动工具，可复制选区对象
Alt+ 上方向键可以复制多个对象。（形成立体效果图像）在选取工具下
Alt+ 双击Layers面板上的眼睛图标隐藏或显示除此图层外的其它图层内容。
按Alt时在两个图层中间单击可把上层做为下一层的剪切层。
将对话框内的设定恢复为默认，先按住Alt键后，Cancel键会变成Reset键，再单击Reset键即可。
在Layers、Channels、Paths调色板上，按Alt单击这些调色板底部的工具图标时，对于有对话框