UI设计相关知识

1、1. 什么是UI设计:User In terface （用户界面），简称UI，是指对软件的人机交互、操作逻辑、 界面美观的整体设计。2. UI设计分三个分支:1、研究界面一-图形设计师Grap hie UI desig ner ，简称GUI,国内目前大部 分UI工作者都是从事这个行业。包括（网页设计，软件界面，移动端界面设计）， 每天工作做着各种界面设计。2、交互设计师，做整个项目的交互流程。3、用户体验研究师，主要是通过各种方法去了解用户现在需要什么样的体验什么样的界面，从而对这个项目的总体性体验做决策的。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心

2、理学、设计学、语言学等在此都扮演着重要的角色。用 户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保 持界面的一致性；即要符合用户的心智模型。所以一个优秀的UI设计师，从技能上讲，不仅能画图标，还能做好界面, 会很多交互知识。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、 简单、自由、充分体现软件的定位和特点。图标，界面，交互知识都是需要长期的经验积累，所以 UI这条路很长，要学的技能很多，大家加油吧！UI设计师一定要做的事情（PS配置技巧）如果你是设计移动UI界面又是Photoshop 新手，那么今天分享的技巧教 程很适合你，虽然说是移动界面设计，但

3、同样适用于其它设计工作，比如网页设 计、平面设计等等，让我们开始吧。1.P hotosho P新建文档设置 操作：菜单T文件T新建 宽度：640像素 高度：1136像素（4英寸iPhone设备） 分辨率：72像素/英寸（ppi） 颜色模式：RGB颜色 背景内容：白色（可选） 颜色配置文件：不要色彩管理此文件（更多颜色设置后） 像素长宽比：方形像素配置如下图:A1J夷歐理）：5401偉案度但）：|n361像累分群$但）:1 ffi索革寸d趣世辕云尅）：Il贻a前色T fsi普彙内容: 1白色A鬲级ES&KS丈件（Q）： 1不要对就玄裆进行色碧昔理d稣檢S出00： 1办橡黑J荷個）：慄标蜃1迪电加

4、0石Eflfi尢卜:2如2.对齐设置这个处就是当你使用图层、形状等操作时自动对齐网格，画矢量图不怕模糊 边缘，确保每个像素保持清晰。设置: 菜单f视图f对齐 菜单f视图f对齐到f全部3. 首选项设置操作：菜单 T编辑T首选项 T常规，建议按下图设置启用轻击平移 仅仅是一个滑移效果，占内存又不能提高操作效率，建议关掉。根据HUD垂直移动来改变圆形画笔硬度 功能挺好用的，按Alt+右键左右/上下移动可以分别改变画笔的大小和硬度。将矢量工具与变换与像素网格对齐 这个强烈建议UI设计开启这个功能，这个让你来矢量力不会产生半像素虚边, 十分好用。但在需要微调整时可暂时关闭它。4. 文本设置字体我一般把字

5、体设置为犀利，如果你是PhotoshoP CC版本，它有一个Win dows LCD/Mac LCD抗锯齿功能，文字可以为网页一样效果了，所以建议 升级到Photoshop CC 吧。操作：首先选定文本 字符工具（AA）选择 Windows LCD/Mac LCD5. 全局光继苹果iOS人机界面指南，你应该把灯光设置为 90 。操作：图层-图层样式-全局光 -90 6. 网格设置现在设计iOS界面都要兼容视网膜（Retina ），所以我把每个网格设置为 2像素，这样我就不怕图像在视网膜设备下变得模糊了。操作：菜单f编辑f首选项f参考线、网格和切片，网格线间隔：4像素;子网格2。或者网格线间隔：

6、2像素；子网格1。我喜欢前者入_7. 导出设置不管我们是做网页不审设计iOS APP应用程序时，导出图像最好是使用”存储为Web所用格式”来导出。这里通过”存储为 Web格式”导出PNG-24为例，其中默认设置比较重要,如下图: 操作：菜单f文件f存储为Web格式所用格式预设：PN G-24 透明：勾选 交错：未勾选嵌入颜色配置文件：未勾选(Photoshop CC 版本才有) 转换为sRGB :未勾选 质量：两次立方8. Retina 显示器设置如果你是使用带 Retina视网膜的MacBook Pro ，你应该确保你是使用2800 X1800像素(1440 X900点)操作：Apple菜单 f 系统偏好设置 f 显示 f 最适合显示器9. 颜色配置颜色配置是极为复杂的一个操作，如果你不是这领域的大神， 那么还是老老实实的用推荐的配置吧，这里我选择了Marc EdwardsO 的颜色配置选项