本文目录
- UGUIDrawCall优化
- _UI设计高级感提升技巧有什么
- UI设计如何提升高级感分享12个UI设计高级感提升技巧
- UI卡顿和掉帧原因，及相关优化方案
- 用对ui设计技巧和方法能提升你的设计水平
- 一份超详细的UI设计规范全攻略
- 巧用插图做好UI界面设计
UGUIDrawCall优化
1、UI DrawCall分析工具 最近只针对项目中主界面的UI进性DrawCall的优化，主要用到的工具就是Unity自带的Frame Debugger，我们项目使用的是Sprite Packer打图集，如果是从本地加载资源，如图1-1，首先要确保Project Settings中Sprite Packer Mode为Always Enabled,保证游戏运行时所有的图标打到对应的图集中。如果使用AssetBundle方式加载，打包的时候应该已经打成图集了，该项设置不设置就无所谓了。 Frame Debugger打开方式Window-》Analysis-》Frame Debugger(我用的Unity版本是2018.4.8)，打开后界面如下： 点击后就会展示游戏中所有的DrawCall信息，如图1-3，Unity UI绘制调用的位置在CameraRender下Render的子组Canvas.RenderSubBatch下，后边的68即为UI占用的DrawCall数量。Unity UI绘制调用的位置取决于Canvas的Render Mode，我们使用的Render Mode为Screen Space-Camera。如果Render Mode设置为Screen Space - Overlay，则Ui绘制的位置在Canvas.RenderOverlay组中，如图1-4所示；如果Render Mode设置为World Space时也是在Camera.Render下Render的子组中，虽然都是子Render，但是和Screen Space-Camera模式会在不同的子组中。选中某个Draw Mesh右侧就会显示该详细信息，如图1-5，选中的是一个Image，其中1表示该Image渲染的渲染层级为203，2表示该组件使用的shader为UI/Default，3表示Image所在的图集为Common(Group 1)。 再看一个Text的详细信息，如图1-6，基本与Image相同，只是使用的纹理不同。2、影响Draw Call的因素 （1） 针对Image，需要保证使用的图片在同一图集且同一个Group中，且使用的材质相同。 a、 如下图所示，一般的Image都不会设置Material即Material为None，此时使用的就是UGUI默认的材质，如图1-4中的2标记的位置，都是默认UI/Default，所以材质的问题一般不需要考虑； b、 重点考虑的就是图集问题，这是比较麻烦的问题，需要根据图片使用的范围来规划图集。开始我们把所有主界面用到的图片都放到一个图集中，但是由于图片个数太多，而图集又有大小上限（我们项目中设置的为1024*1024），虽然会打到同一个图集中，但是会被分到不同的Group中。通过Frame Debugger查看即使在同一个图集中，不在同一个Group也不能合批。所以直接把所有图片放在一个图集中并不能解决问题，还要根据UI进行细分，同一个UI中使用的图片打到一个图集里，或几个UI中用到的图集打到一个图集中。好多个UI公用的图片单独放到一个公用的图集中。为了便于规划图集，我还写了个小工具统计每个图片在各个UI中的使用情况。统计结果如图2-2，每一行显示某个图片的引用次数，次数后紧跟引用该图片的UI。 public static void GetSpriteReferCount() { Dictionary《string, Dictionary《string, bool》》 spriteToPrefab = new Dictionary《string, Dictionary《string, bool》》(); List《string》 allFullPath = MUEditorUtility.GetAllFullPathIn(UI_ASSET_DIR, ".prefab"); for (int i = 0; i 《 allFullPath.Count; i++) { EditorUtility.DisplayProgressBar("图片检测", "正在收集UI中的图片引用情况……", i / (float)allFullPath.Count); string assetPath = MUEditorUtility.FullPathToAssetPath(allFullPath); GameObject uiGameObj = AssetDatabase.LoadAssetAtPath《GameObject》(assetPath); if (uiGameObj == null) { continue; } Component allImageComponents = uiGameObj.transform.GetComponentsInChildren(typeof(Image), true); for (int j = 0; j 《 allImageComponents.Length; j++) { Image t = allImageComponents.GetComponent《Image》(); if (t.sprite != null) { string spriteName = t.sprite.name; if (spriteToPrefab.ContainsKey(spriteName) == false) { spriteToPrefab = new Dictionary《string, bool》(); } if (spriteToPrefab.ContainsKey(uiGameObj.name) == false) { spriteToPrefab = true; } } } } Dictionary《string, Dictionary《string, bool》》 spriteToPrefab1 = spriteToPrefab.OrderBy(o =》 o.Value.Count).ToDictionary(p =》 p.Key, o =》 o.Value); DirectoryInfo dirInfo = Directory.CreateDirectory(Application.dataPath + "/Res/Gui"); FileInfo files = dirInfo.GetFiles("UI_Sprite_Refer.txt"); foreach (var file in files) { File.Delete(file.FullName); } using (FileStream fileStream = File.Create(dirInfo.FullName + "/UI_Sprite_Refer.txt")) { string txt = ""; string temp = ""; foreach (KeyValuePair《string, Dictionary《string, bool》》 kv1 in spriteToPrefab1) { temp = kv1.Key + ":"; //temp += " " + GetParentDir(kv1.Key); temp += " " + kv1.Value.Count; foreach (KeyValuePair《string, bool》 kv2 in kv1.Value) { temp += " " + kv2.Key; } txt += temp; txt += "\n"; } StreamWriter writer = new StreamWriter(fileStream); writer.Write(txt); writer.Flush(); writer.Close(); fileStream.Close(); } EditorUtility.ClearProgressBar(); } c、 在打图集的过程中还遇到一个问题，同一图集中的一个图片，在总大小没有超过图集上限的情况下，却被打到了该图集的另一个Group中。使用Frame Debugger也看不出问题。然后我就用Sprite Packer在本地打一下图集看一下，这两个Group区别在哪儿。通过对比发现两个Group中图片的格式不一样，一个为RGBA Compressed DXT5，一个为RGB Compressed DXT1，如图2-3和2-4。原来Unity打图集时只能将相同格式的图片打到同一Group中。查看被打到另一个Group中的图片，发现这张图没有Alpha通道，工程中所有平台的纹理Format都设置为Automatic，Alpha Source设置为Input Texture Alpha，即Unity会根据原图是否有Alpha通道自动设置纹理格式，如图2-5。 我们可以通过重写不同平台上的格式设置，保证该图片格式与其他图片格式一致，如图2-6。 （2） 针对Text，保证相邻的Text使用相同字体，相同材质，这个一般情况都可以做到。 （3） 保证可以合批的元素在同一个Canvas下。 为了防止某些动态元素（如倒计时、技能CD等）的改变导致整个UI的网格重建，一般采用动静分离的方式，将动态元素放在单独的Canvas下。这时可能误将一些本可以合批的静态元素放到了不同的Canvas下。我在优化时就遇到了这种情况。如图2-7所示，Image_Kuang和Image_Parent位于同一渲染层级，且他们挂的图片在同一图集里，但由于Image_Parent节点下有动态变化元素，所以单独挂了Canvas，导致这两个Image不能合批。解决方式就是将Image_Parent的Image移除挂到一个新建的与Image_Kuang位于同一Canvas的节点下，如图2-8所示，在Image_Kuang下单独建了一个Image_PosBack节点挂载Image。（4） Mask和Rect Mask 2D会将内外元素分离导致不能合批。另外能用Rect Mask 2D解决的尽量不要用Mask，Mask除了使内外元素不能合批，本身也会占用2个DrawCall。Mask和Rect Mask 2D比较如下： a、 Mask占用两个DrawCall，一个在底下设置Stencil Buffer，一个在顶上还原Stencil Buffer，Mask下的子元素夹在中间本身不占DrawCall；Rect Mask 2D本身不占DrawCall b、 如果多个Mask绑定的Image组件，属于同一个Atlas，那么Mask之间的元素可以进行合并（包括Mask自己产生的2个DrawCall）；否则不能合并如果RectMask2D上绑定了Image，那么多个RectMask2D的Image如果属于同一个Atlas可以合并 c、内外元素 无法合批无法合批 d、完全裁剪元素：Mask 依然占据DrawCall；Rect Mask 2D不占用DrawCall,也不参与Depth计算； e、Hierarchy 中被分割元素：Mask 可以正常合批；Rect Mask 2D：如果Depth、Atlas与RectMask2D下的某元素相同，则无法合批。 f、裁剪掉的部分：Mask 还会影响其他元素的Depth计算，而它自己的也会受到其他元素的影响。Rect Mask 2D 依然参与Depth计算 g、 多个Mask内的UI节点间如果符合合批条件，可以合批。RectMask2D之间无法合并DrawCall。 （5） UI元素Position或者Rotation改变 a、 Position的Z值不为0，元素会被视为3DUI，不参与合批，如果父节点Z!=0，其下的子元素都无法合批。 b、 Rotation的X或Y修改，导致元素不在UI平面，则无法合批，原因和Position的Z值改变一样。 （6） UI元素重叠和层级深度 这个最终要的结果就是使多个元素的渲染层级相同，就达到合批目的了，如图1-4中1标记的位置。当然这一项的调整也是最耗时最需要耐心的，这就需要我们去分析每个UI中各个元素在Hierarchy中的层级。 下面拿一个例子说明一下，如图2-9所示，图中左侧红框内4个元素，其中Image_Back、Drop_Image、Btn_Image所用图片在一个图集中，Drop down使用的图片在其它图集中。这时所有的元素占用3个DrawCall，查看右侧Draw Mesh发现Image_Back和Drop_Image共占一个DrawCall，而Btn_Image和Dropdown分别单占一个DrawCall。 下面我们调整一下Btn_Image的位置，如图2-10所示，整体的Draw Call变成2，Image_Back、Drop_Image、Btn_Image三个元素共占一个DrawCall。Dropdown单独占一个DrawCall。这是因为开始时Dropdown夹在Drop_Image和Btn_Image中间，由于它属于另外的图集，破坏了Drop_Image和Btn_Image的合批。 Unity自带的Profiler工具中可以查看合批中断的原因。如图2-11所示，打开Profiler，滑动到最底部可以看到两个和UI相关的选项，一个UI，一个UI Details，选中任意一个，下边有全部Canvas的一个列表，点击展开任意一个Canvas，就可以看到该Canvas下所有的批处理信息，其中有一列Batch Breaking Reason显示了该批次不能与上一个批次合批处理的原因，合批被破坏的主要原因有两个：Different Texture：即使用的纹理不同，可能是图片不在同一个图集，也可能是Image和Text相邻导致；Different Material Instance:材质不同，一般由于自己给Image使用了自定义材质或者游戏中使用了Text Mesh Pro UGUI。另外GameObject Count为该批次处理对象的个数；GameObjects列列出了所有对象，可能由于对象太多只显示有几个Objects，这是可以双击这一行，会直接选中该批次处理的所有对象，如图2-12所示。 另外看到一个Cumulative Batch Count：累计批次数量。如图2-11，我们可以看到该列的总值为82，我们再看一下Frame Debugger中 Draw Mesh的个数，如图2-13为69。这两个数不一样，Frame Debugger中显示的是当前帧Batch个数，而Cumulative Batch Count是从开始游戏运行总的批次个数，在游戏过程中有些元素的改变导致批处理的变化，所以这两个数会不一样。 （7） 对于Alpha为0的Image，需要勾选其CanvasRender组件上的Cull Transparent Mesh选项，否则依然会产生DrawCall且容易打断合批。 （8）空Image 有时会使用空的Image来接受点击事件，空Image也会产生DrawCall。我们可以使用Empty4Raycast组件替代空Image。
_UI设计高级感提升技巧有什么
UI设计与平面设计的主要区别在于，除了界面的美学之外，设计师还要负责用户与界面之间的交互。UI设计是一个高科技的设计行业。虽然IT是一个新兴的行业，但国内外很多大型IT企业都设立了相应的UI设计部门，PS、AI、Axure、C4D等软件都在这个行业大展身手。这显示了这个职业在互联网时代的重要性。关于UI设计，很多人都会基础的，但是想要设计出高级感很多时候不是那么简单！为此，下面我们就将详细的为大家分享一些UI设计高级感提升技巧，一起来看看吧！
UI设计高级感提升技巧分享：
1、视觉元素
在互联网产品日趋成熟的今天，你会发现所有的App越来越像，似乎是同一套模版设计出来的产品。而这种普适化的设计会导致同质化严重，使得设计不精致，产品没有气质和品牌感。一个App设计是否精致，是否富有设计感，在于它的细节，这就意味着我们在进行设计的时候，要从细微之处着手，从多方面去钻研如何创造出打动人心的UI设计。本节总结了12个简单直观的提升设计感的小细节，一起来学习。
1.1使用颜色深浅构建层次结构
在对UI文本进行样式控制的时候，最常见的错误莫过于过度依赖字体大小差异来营造对比。单纯使用字体大小对比，所营造的对比并不够，尝试结合色彩和字重来营造更好的对比效果。
每种颜色都有一个视觉权重，这有助于在内容中建立层次结构。通过使用颜色的深浅，为元素赋予不同的重要性。如果可以的话，你甚至可以采用两到三种颜色：
主要内容使用深灰色（诸如标题，但是不要用纯黑）
次要内容使用灰色（比如商品介绍）
辅助性内容采用浅灰色（比如发布日期）
类似的，在UI设计的时候，通常两种不同的字重足以营造出优秀的层次感：
大多数的文本采用正常的字重（400到500，具体取决于字体）
对于需要强调的文字采用较重的字重（600到700，具体取决于字体）
▲主标题字重为600，其他标绿点的文字字重都为400
应当尽量不要让正文部分字重低于400，因为这一部分字体本身尺寸已经较小，低于400会使得可读性不佳。如果你依然需要降低字重，那么不妨让字体色彩更浅一点，或者替换成其他识别度较强、字重相对较小的字体。
灰色文字在无彩/彩色背景下要分开处理
不要在有色背景上使用灰色的文本，在白色背景下，将黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不错的淡化其视觉效果的做法。
但是在彩色背景下，想要降低和背景色之间的对比，通常有两种方法：
一是降低白色文本的不透明度；二是让文本逐步接近背景色，而不是改为灰色。
▲左图设计师职位信息为白色文字降低不透明度，右图为和背景同色相高明度的颜色
其次当涉及长篇内容时，大面积的深色粗体字会给人一种沉重感，而且很跳跃。通过选择类似深灰色（#4F4F4F）这样的颜色可以很容易地解决这个问题，使文字更容易被识别。
1.2统一色调
选择一种基础色，再调整色调和颜色深浅来增加均衡。设计时避免用过多的颜色。如果项目允许，只需使用固定的色板，通过调整基础色的饱和度和明度，利用这种简单的方式为设计增加一致性。
1.3干净的阴影
阴影是UI设计中最常见的视觉表现手法，它可以增加元素的深度，使其从背景中脱颖而出，引起用户的注意力，同时也能增强画面的视觉层次感。相比于采用大范围的扩散模糊阴影，使用微妙的垂直偏移阴影效果更明显，更自然，它模拟了最常见的光源特征，光线从上往下照下来所营造的阴影效果。
这种轻柔的阴影呈现出的干净，增加了画面的精致。如果阴影的范围太小或颜色太深，位置也没有偏移，而是聚集在元素的四周，就会让画面更加扁平，让视觉变得厚重，呈现出不精致的画面感。
还有一种扩算阴影是模拟元素本身的颜色投射在背景上，由于阴影与元素的色调一致，因此呈现出十分融洽的画面感。在UI设计中，这种手法不宜过多使用，否则呈现出的各种色彩搭配会让人眼花缭乱。
1.4个性的图标设计
合格的设计师能够绘制风格统一的图标，而优秀的设计师能够创造风格独特的图标。我们能否在追求大小一致，圆角一致，线宽一致和配色一致的同时，为它的视觉表现力加入更多的创意呢？例如下面这组图标设计，无论是在图形上的创新，还是颜色搭配上都呈现出无与伦比的创意。
标签栏作为一个App的全局导航起着至关重要的作用，它的设计影响着整个产品的视觉风格。通常，大多数App都是使用iOS规范的设计样式（默认灰色，选中填充品牌色），这样的设计太普通，太常见了。要想让标签栏图标设计精致和富有个性，可以丰富每一个选中态图标的视觉表现，例如给图标加上背景和表情，即显得生动有趣，又增加了用户的好感，给人留下深刻的印象。
3D立体图标设计是近几年来的流行趋势，看上去十分精致、华丽，但是看久了会让人产生轻微的视觉疲劳，同时因其复杂的结构会增加用户的认知成本。一般在外卖美食类应用中比较常见。
1.5Tab的设计感
Tab是App设计中最常见的控件之一，它源自MaterialDesign的设计规范。现在很多iOS产品当中也开始使用这种导航栏样式来进行设计，而原本属于iOS规范当中的分段选择器变得不那么常见了。
在视觉表现形式上，Tab和标签栏同样也分为选中态和未选态，它的设计较为简单，通常是使用一组文字标签，通过颜色或在标签下加上小长条来区分两者的状态。因为它简单，却越难设计出彩，要发挥极大的设计想象力，跳脱出设计规范的限制，才能找到完美的方案。例如虾米音乐的Tab选中态是一段音频波线，再配合文字的大小对比，一个富有设计感又符合产品特征的Tabs就被创造出来了。
我们还可以从品牌基因中获取灵感，品牌作为用户熟知的形象是个绝佳的来源。从品牌形象中提取具有独特气质的视觉富豪作为Tab选中态的小长条，这样就建立起视觉上的联系，让用户产生由内而外的一致感受。例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到Tab的设计上，既让界面视觉独一无二，又进一步强化了用户对品牌形象的认知。
1.6无框设计去繁从简
在UI设计中，有许多的装饰元素，如卡片的边框、列表的分割线等，虽然边框，分割线是分隔两个元素的好办法，但是它不是唯一的方法，使用过多会让整个布局的设计感降低，或多或少都会干扰用户浏览的视线，让信息内容失去注意力，因此可以减少不必要的装饰元素。我们可以通过以下几个方法来划分元素的视觉层次，让画面变得干净，整齐：
使用阴影
阴影同样可以营造出边界感，而且相比边框分割线更加微妙，并不会显得突兀，不会分散用户的注意力。
使用不同的背景色来区分
通常，相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分。所以，你所需要做的就是在不同的区块采用不同的背景色，并且尝试删除分割线，因为你根本不需要它。
增加额外的留白
创建元素之间的分离效果，并不一定要通过线框来表现，只要增加留白，让它们分隔开就行了。通过留白和间距来实现元素分组是UI设计中的常用手法。
1.7统一设计元素
在App中的每一个界面都有许多元素，那些同类的元素应保持统一的设计样式。通常个人中心的标签栏图标是一个人形剪影，它代表着用户，因此可以在展示用户头像和用户形象的界面中延续使用。如果图形拥有独特的外观，如椭圆矩形，也可以作为视觉符号的一种，延续到其他界面中，成为图形或按钮的外观。这样，整个界面就被统一的设计元素联系起来了，给用户始终如一的一致感。
1.8符合产品气质的字体
选择符合产品气质的字体，可以与产品的定位相吻合，传递给用户正确的情感意识。虽然默认字体可以满足大多数App的设计需求。但会出现一个问题就是，系统字体的普适性并没有什么特色，在一些特定的情境下就显得收效甚微。例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉，换成系统字体后，整体感觉在气势上就变弱了很多。
1.9第三方图标风格统一
大多数App都支持三方登陆，他可以减轻用户注册的时间成本。通常是在注册登陆页的底部展示第三方图标入口，这也是设计师最常忽略的内容，往往是直接将第三方图标调整一致大小和摆放整齐位置，没有针对它们再设计。一个设计精致的App不应漏过任何的细节，我们可以以自家App的图标风格为依据，对第三方图标进行优化设计。
1.10图片中寻找色彩
App中优美的图文设计，能带给用户如沐春风的视觉享受，它非常重要。我们经常看到文字叠加在图片背景上的设计样式，为了减少复杂图片背景对文字的干扰，通常的做法是叠加半透明度的黑色蒙版，让白色文字清晰可见，但这不是最优的办法。我们可以从图片中提取主色调用于叠加背景的填充色，这样就使文字、色块和图片融入到一起了，画面变得高级和富有设计感。
1.11提高图片质量
图片的质量影响着整个App的格调和用户的情绪，高品质的图片给人愉悦的视觉享受，产生美好的联想。而低品质的图片会瞬间拉低App的质感。在App设计中，一张漂亮的图片从收集到上线，需要经过裁剪，调色等过程才能被使用。即使是普通的商品图片，我们将它抠图后调整成统一大小，再加上干净的背景，就能立刻提升商品的美感，界面视觉也会变得美观、整洁。
1.12卡片式设计
现在的UI界面设计中，卡片式设计已经是一种非常常见的设计形式，它有利于信息分层和整合，划分出更加清晰的组织结构，实现复杂内容的简化处理，提高空间利用率。同时卡片式设计通常很依赖视觉元素，很强的视觉元素正是卡片式设计的一种优势，也是提升设计品质感的良方。
2、情感化设计
心理学认为，情感是人对客观事物是否满足自己的需求而产生的态度体验。只有当产品触及到用户的内心时，使他产生情感的变化，那么产品便不再冷冰冰，他透过眼前的东西，看到的是设计师为了他的使用体验，对每一个魔鬼细节的用心琢磨，人们会产生愉快、喜爱和幸福的情感。情感化设计并不是轰轰烈烈，有时候仅仅一句文案、一幅插图、一个动画就能打动人心，使用户获得愉悦的使用体验。让设计变得高级不仅仅是视觉层面，这些简单而美好的设计细节充满了积极情绪，它是满足产品的功能性和易用性之后，追求更高层次的目标。
2.1提示性文字
语言是情感化设计最直接的利器，拟人化的对白相比冰冷的话语更能获得用户的好感，赋予产品的新的生命力。例如App那些push推送通知，因为用户每天收到的PUSH实在是太多了，早已心如止水！这个时候，你就需要一条成本低、效率高的PUSH文案，去撩动用户主子们的心。将原本对用户的打扰变成一种逗趣，让人看到会心一笑。
2.2下拉刷新
下拉刷新是用户在App使用中经常进行的操作，常见的下拉刷新设计是图标加文字的形式，这种设计简单、直观，但毫无设计感，不能引发用户任何的情绪。
下拉刷新是一种临时状态，丰富它的设计细节不会造成与产品界面的格格不入，相反，一个富有设计感的下拉刷新设计能让产品获得用户的好感。例如uc头条在下拉刷新时会蹦出一只奔跑的小鹿，暗示正在快马加鞭的加载新内容，小鹿形象延续了品牌logo。作为资讯类产品，内容更新速度至关重要，奔跑的小鹿正好隐喻了这一点。用户也在这种快乐的情绪中对产品产生好感，瞬间就让下拉刷新变得生动有趣。
2.3头像设计
个人中心页与用户信息密切相关，用户的虚拟形象在这里得以展现，常见的设计是一个用户头像加登陆文字的形式，这种默认的头像设计无法得到用户的认同感。
UI设计如何提升高级感分享12个UI设计高级感提升技巧
如今，随着互联网产品的日益成熟，你会发现所有的App都越来越像，似乎都是同一种模版设计的产品；而这种普适化的设计，会导致严重的同质化，使得设计不精致，产品没有气质和品牌。应用程序的设计是否精致，是否富有设计感，取决于它的细节，这意味着我们在进行设计时，要从多个角度去思考如何创作出动人的UI。下面为大家分享12个能够提升UI设计高级感的技巧给大家参考：
1、用颜色深浅构建层次结构
当对UI文本进行样式控制时，最常见的错误莫过于过分依赖字体大小差来建立对比；单纯地使用字体大小对比，所创造的对比还不够，试着将颜色和字重结合起来创造更好的对比效果。
每个颜色都有一个视觉权重，它可以帮助在内容中建立层次；通过使用颜色的深浅来赋予元素不同的重要性。
如有可能，您甚至可以选择两三种颜色：
主内容使用深灰色(例如，标题，但不是黑色)；次要内容用灰色(如商品简介)；辅助内容用淡灰色(如发布日期)；
同样地，在UI设计中，通常有两种不同的词汇就足以创造出出色的层次：
大部分文本都使用普通的字重(400到500，视字体而定)；对于需要强调的文字，根据字体而定(600到700)；
②主题字重600，其它绿字量均为400字
应尽量不要让正文部分字的重量在400以下，因为这部分字体本身的尺寸就已经小了，低于400会造成可读性差。
若仍需减重，则不妨把字体颜色调淡一些，或替换为其它识别度较强、字重较小的字体。
在无色/彩色背景下，将灰色文本分开处理：
对于有颜色的背景，不要使用灰色的文字，在白色背景下，把黑色的文字改为灰色(或在黑色背景下使用灰色文字)，这对于降低其视觉效果是很好的。
但对于彩色背景，想要降低背景和背景颜色的对比，通常有两种方法：
一是减少白色文字的不透明度；二是让文字逐渐接近背景颜色，而不是变成灰色。
左图设计者位置信息为白色文本降低不透明度，右图是与背景相同色相的颜色
第二，在长内容方面，大面积的深色粗体字会让人有一种沉重感，而且跳跃性强；选择一种类似深灰色(#4F4F4F)的颜色，就能很容易地解决这一问题，使文字更容易辨认。
2、一致色调
选取一种基本色，调整色调和深浅以增加平衡，避免在设计中使用过多的色彩。若专案允许，只用固定的色板，用这个简单的方法来调整底色的饱和度和明度来增加设计的一致性。
3、阴影干净
在UI设计中，阴影是最常见的视觉表现手段，它可以增加元素的深度，使其突出背景，吸引用户的注意，同时还可以增强图像的视觉层次感。
使用较宽范围的扩散模糊阴影，使垂直偏移阴影的效果更加明显和自然，它模拟了光源最常见的特性，即由上到下所创造的阴影效果。
这淡淡的阴影给人一种干净的感觉，使画面更加细腻；如果阴影的范围太小，颜色太深，位置也不会偏移，而是集中在元素的周围，会使画面更扁平，视觉变得厚重，呈现不精致的画面。
影子不一定是黑色的，还有一种扩算阴影是模拟元素本身的色彩投射在背景上，由于阴影和元素的色调一致，所以呈现出非常和谐的画面感。
设计UI时，这一手法不宜过度使用，否则所呈现的各种色彩搭配会令人眼花缭乱。
4、个性化图标设计
一个合格的设计师可以绘制出统一风格的图标，一个好的设计师可以创造出独特的风格。
在追求尺寸一致、圆角一致、线宽一致、配色一致的同时，为其视觉表现力增添更多创意？比如下面这组图标的设计，无论在图形上的创新，还是色彩搭配上都呈现出无与伦比的创意。
在应用程序的全局导航中，标签栏是应用程序的关键部分，其设计影响到整个产品的视觉风格。
一般来说，大多数应用程序都采用iOS规范的设计风格(默认灰色，选择填充颜色)，这样的设计太普通，太普遍了；要想使标签栏图标设计精美、富有个性，可以丰富每一选中状态图标的视觉表现，比如给图标加上背景和表情，就显得生动有趣，又增加了用户的好感，给人留下深刻印象。
三维立体图标设计是近几年的流行趋势，看起来很精致、华丽，但看久了就会产生轻微的视觉疲劳，同时由于其复杂的结构会增加使用者的认知成本，一般在外卖美食应用中比较常见。
5、Tab的设计
Tab是应用程序设计中最常用的控件之一，它来自于MaterialDesign的设计规范；现在很多iOS产品中也开始使用这种导航条样式，而原本属于iOS规范的选择器已经不再常见。
就视觉表现形式而言，标签条和选择条同样可以分为选择中和非选态，它的设计比较简单，一般是使用一组文字标签，通过颜色或标签下面的小长条来区分两者的状态；因为标签很简单，但越难设计出彩，要发挥很大的想象力，跳出设计规范的局限，找到一个完美的方案。
比如虾米音乐的Tab选中态是一段音频波线，再加上文字的尺寸对比，一个富有设计感和产品特色的Tabs创造出来了。
同时，品牌也可以从中获得灵感，品牌形象就是用户所熟悉的形象的最好来源。
以Tab选择态为Tab选择态的长条状，从品牌形象中提取具有独特气质的视觉连结，让使用者产生由内至外的一致感觉；例如，马蜂窝品牌形象中的微笑标志和飞猪旅游品牌形象的猪头，都延伸到Tab的设计，既使界面视觉独特性，也进一步强化了用户对品牌形象的认知。
6、无框设计
用户界面设计中，有很多装饰元素，比如卡片边框、列表分割线等等，虽然有边框，分割线是分隔两个元素的好方法，但它并非唯一的方法；过多的使用会使整个布局的设计感降低，或多或少会干扰用户浏览的视线，使信息内容失去注意力，因此可以减少不必要的装饰元素。
可通过以下几种方法来划分视觉元素的层次，让画面干净、整洁：
1)阴影的使用
暗影同样能创造出边界感，而且比起边缘分割线更为微妙，不会显得突出，不会分散用户的注意力，让内容更加集中。
2)用不同的背景色区别
一般来说，仅仅需要细微的差别就可以使相邻的元素背景区别开来；因此，你所要做的就是在不同的块设置不同的背景颜色，然后尝试删除分割线，因为根本不需要。
3)添加附加留白
在两个元素之间创建分离效果时，不必通过线框来表现，只需增加留白，让它们分开，通过留白和间隔来实现元素分组是用户界面设计的常用技巧。
7、协调设计要素
应用程序的每个界面都有大量的元素，而那些同类元素的设计风格应该保持一致。
在个人中心，标签栏图标是代表用户的一种形状剪影，因此在界面上继续显示用户头像和用户形象。
假如图形具有独特的外观，例如椭圆矩形，也可以作为一种视觉符号，延续到其他界面，成为图形或按钮的外观；这样，整个界面与统一的设计元素相结合，给予使用者一致的一致性。
8、适合产品气质的字体
选用符合产品气质的字体，能与产品定位相吻合，传递给用户正确的情感感受。
尽管缺省字体能满足大多数应用程序的设计需要，但有一个问题是——系统字体的普适性在某些特定场合不具有什么特点，而且在某些特定情况下效果不大；例如，运动App更适合粗壮的斜体以传递力量、爆发力、速度等感觉，而在系统中使用后，整体感觉变弱了。
9、统一样式的第三方图标
大部分App支持三方登录，这样可以减少用户注册的时间成本。
一般在注册登录页面底部显示第三方图标入口，这也是设计者最常忽视的内容，往往是直接将第三方图标的尺寸和排列整齐，没有针对它们再进行设计；一个设计精巧的App不应该漏掉任何细节，我们可以以自己App的图标风格为基础，对第三方图标进行优化。
10、图片寻找色彩
应用程序图形化的优美设计，可以给用户带来如沐春风的视觉享受，它非常重要。在图片背景上叠加文本的设计风格常常会出现；为了减少复杂图片背景对文本的干扰，通常的做法是将半透明的黑色蒙版叠加起来，让白色文字清晰可见，但这并非最佳方案。
从图片中提取主调，用来覆盖背景的填充颜色，使得文本、色块和图片融合在一起，使画面更加高级和富有设计感。
11、改善图像质量
图像质量影响到整个应用程序的风格和用户的心情，高质量的图片给人愉悦的视觉享受，产生美好的联想；低质量的图片会瞬间拉低应用程序的质感。
应用程序设计中，一幅美丽的图片从收集到上线，需要经过剪裁、调色等过程，才能使用；即使是普通的商品图片，我们将其抠图后调整为统一大小，加上干净的背景，就能立刻提升商品的美感，界面视觉也会变得美观、整洁。
12、卡片式设计
在当今UI界面设计中，卡牌设计已经是一种非常常见的设计形式，它有利于信息的分层与整合，划分出更清晰的组织结构，实现复杂内容的简化处理，提高空间利用率；同时，卡片式设计通常很依赖视觉元素，而视觉元素则是卡片式设计的优势之一，也是提升设计品性的良方。
其实，UI设计讲究的不单止是需求的完善，还要讲究其高级感提升！以上共计12个UI设计高级感提升的小技巧，必要掌握~如果你想要学习更多的UI设计技巧，就上，这里推荐大家学习课程：web网页UI设计从入门到实战
UI卡顿和掉帧原因，及相关优化方案
前面几篇文章都已经将一些iOS图像显示的原理梳理好了，这回正式进入到标题所讲。相关知识背景：页面滑动的流畅性是60fps，即1s有60帧的画面更新才可以让人感到画面流畅。 如上图所示，在规定的时间内，即16.7ms内（按照1s完成60帧来计算），由CPU和GPU共同协作产生一阵数据。CPU在做UI布局，文本计算，图片解码以及绘制等工作占用时间过长，导致留给GPU的时间就非常少，GPU要想把图层合成和纹理渲染准备完毕，所需的总时间就可能会超过16.7ms，这样在当下这一帧vsync信号到来之前，没有准备好当下这一帧的画面，就产生了掉帧现象，我们肉眼看到的效果就是滑动的卡顿现象。 总结一句话来说，在规定的16.7ms内，在下一个vsync信号到来之前，CPU和GPU配合下并没有完成下一帧图像的完成，就会出现滑动的卡帧记图像的掉帧。 原因知道了，就可以提出相应的优化方案了。可以从CPU和GPU做以下优化： CPU： 1）对象创建、调整、销毁。 2）预排版（布局计算、文本计算）。 3）预渲染（文本等乙部绘制、图片解码等）。 将以上3点操作放到子线程里做。 GPU：1.纹理渲染 1）避免离屏渲染。 2）依托于CPU的异步绘制机制来减轻GPU的压力。 2.视图混合 1）如果多个view层层叠加，GPU既要做每个视图的合成，合成每一个像素点的像素值，需要进行大量计算，所以尽量减轻视图的复杂性，大大减轻GPU的压力。2）也可以采用CPU的异步绘制，使得提交的位图本身就是一个层级很少的视图，也能减轻GPU的压力。
用对ui设计技巧和方法能提升你的设计水平
用对ui设计技巧和方法能提升你的设计水平，这句话是正确的。
常用的提升ui设计的技巧：
1、用留白来隔离元素。
如果你现在还是运用分割线隔开元素那你就真的out了，这时你需要的是更好、更优雅、更贴合当下的一种呈现方式，也就是使用留白，或者说负空间来间隔就可以。分割线在很大程度上是丑陋且难以驾驭的视觉噪音，相对而言留白则好了很多。
2、运用阴影替代边框。
如果你想要让一些元素更加吸引用户的眼球，并不一定需要依靠描边，使用阴影则可以起到同样的效果。单独使用则会显得更加整洁，描边+阴影则会显得过于杂乱。使用相对不那么具有侵略性的小阴影无疑让效果更加轻松，看起来也不会突兀。
3、按钮色彩凸显重要性。
色彩所传递的情绪也具有一定的特性，因此我们可以通过色彩进行设计。例如红色和绿色按钮的色彩含义，已经横跨物理世界和数字设计领域，我们每天在很多实体产品上也能看到类似的设计，包括交通上的红绿灯，实体按钮等。
4、字重和明暗区分层级。
在构建文本内容的视觉层级的时候，如果只使用大小差异来构建就显得过于单一了，我们可以借助色彩、字重、明暗来进行区分。可以让更重要的文本更大、字体更粗、色彩更加鲜明，或者使用更深的黑色来呈现，使不同层级之间的差异更明显。
UI的主要工作和工作流程：
UI设计主要是电脑初级为用户目标，通过简单的代码程序实现设计目标，创造出有价值的交互效果。首先需要确定目标用户，不同的角色会有不同的软件，在对目标用户采集交互的方式，设计出软件要响应用户的动作，用户必须能理解各个功能的使用，同时也可以控制，设计也不要过于复杂，复杂的界面可能会影响效果。
在工作中，如果去到的公司是刚开始筹备研发一个APP或者是功能模块，就有可能涉及到用户的研究，但是一般来说刚毕业的学生以及刚转行的人员是没有办法直接接手用户调研的工作的，因为刚进入这个行业的人，缺乏产品思维，也没有体验和研究过一定数量的产品，所以交互设计师也没办法胜任，最常见的就是成为视觉设计师。
一份超详细的UI设计规范全攻略
设计语言是一个很庞大的设计体系，包括字体、网格系统、颜色、图形等等，而笔者在本文中也分享了相关的设计原则与关键词，希望对你有所启发。前面两期我分享了，为什么需要设计语言，对内对外有哪些帮助，同时和大家分享了，在做设计语言之前我们先要建立设计原则，以及设计原则下面的设计关键词，通过设计关键词推导出对应的视觉表现手法，也就是通常我们所说的，形、色、字、构、质。那么今天我们就直接进入正题，在前面我们定义好了，设计原则和关键词，那么接下来应该如何去做？01如何去做？根据原子定律我们从页面中最细小的元素入手，也可以理解为页面中无法再拆分的元素开始，它是组成界面最基础的元素，从最基础的元素，开始做统一性，本次我将从颜色，字体，网格说起。02颜色从颜色开始，需要根据整个页面中场景进行颜色定义，同样色彩也需要根据我们定义的关键词去推导，在定义颜色过程中，可以参加色彩心理学原理，以及竞品分析：高品质：深色配色，黑白，中性的配色全球化：深邃紫色，科技蓝，自然绿年轻化：渐变色，马卡龙撞色在定义了上述大的色彩原理下，需要对界面中使用场景进行梳理得出下列大概色彩类型：当然也可以定义一些界面中常用渐变色板，现在很多网站也有很多很好看的渐变可以去尝试。也可以定义一些图片上放文字效果，叠加什么颜色，颜色的模式是什么样的，透明度是多大，这些都可以帮助我们定义好一套色彩体系。当然还有一些很不错的色板，如果你不知道怎么配色，也不知道当下流行色是怎么样，也可以从这些色板里面选择一个配色，挑选一些符合你们产品的配色。▲▲▲03字体字体是界面中用户看到最多的一些元素，除了定义界面中的字体，同时我们也要定义界面下的字体，包括线下物料宣传等，在字体选择上，需要注意：信息传递是否足够清晰，字体也是有情感的，字体表达的情感是否和我们界面中需求是一致的。个性上，有的字体很方正，笔直，有的字体笔划比较活泼，那么不同字体我们如何去选择，同样需要在前面大的设计关键词下面去设计。对于字体选择，一定要根据产品关键词去定义，以上是界面中常用一些英文和中文字体，每种字体虽然大体看差不多，其实每个字体，细看其实有些笔画上的差异！我个人建议苹方字体和HelveticaNeue比较通用性更强，中文字体包比较大，特殊产品如果需要有个性化中文字体，需要注意字体大小包处理！04字号字号是界面中很重要元素，字号大小决定了信息的层次和层次，在扁平化设计中，字号越来越重要，好的字号设置能让界面更加清晰一致性强！相反差的字号会让界面看起来山寨，关于字号的选择，可以遵循iOS的规范大小，也可以根据自己产品个性去定义你的字号。假如你是电商产品，那么你可能需要对价格字体单独设置字号，如果你是金融产品，那么对应的字号也需要定义好对应的大小层级！▲对于特殊字体的处理▲常用的5种字体节奏▲特殊数字或图形化字号05行高参考3C原理，不明白可以百度搜，英文的行高是字号的1.2倍，但是中英文字体原因，中文字体一般是1.5-2倍之间，我们需要充分考虑不同人群特点，老人，儿童，年轻人，以及使用环境。英文的行高一般为字体1.2倍，比如你字号是20号，那么行高24，当然也有很多国外设计师采用黄金比例的行高，比如1.414倍，1.618倍，1.717倍数等等。行高大小，正如我前面所说，需要充分考虑你整个界面的节奏，和内容以及用户人群来定义是需要紧凑还是疏密！中文常用的行高，一般为字体大小的1.5倍比较合适，当然也可以一些简单的做法，就是字号+4原则，比如你字号是20，你的行高24，字号28，行高32也是可行的，每个团队可以根据需求去定义。06字重字重，顾名思义就是字体粗细，越来越多的产品需要通过字体粗细来拉开信息层次，当下主流趋势iOS11中也是通过字重来拉开信息层级的，所以在定义字体规范时候也需要重复考虑进去什么时候用什么字体。07网格系统这块知识相对比较复杂，我这边简单分享下，我想大多数同学都经历过这个情况，拿到其他设计师源文件，间距混乱，一会边距20，一会24，一会32，特别混乱，原因在于大家间距没有去详细定义它的规则。08看看别人怎么做的？▲Airbnb的规范中，对于间距的定义，没有像其他规范那样，只定义一个最小单位数值，而是定义了5种弹性间距，8，16，24，48，64在他的全部设计里面，包括元素和元素之前，图文之间都是运用这一套间距规则，保证了整个界面的统一性。▲这是国外运用比较多的8点网格，Airbnb在这个基础上进行了进一步的简洁，只保留了8，16，24，48，64▲国外有项数据表明，设计师在运用8为最小单位做设计时候，一般常用间距有哪些，最后定义了5种常用间距规则。所以，我们在规范时候，一定不要运用太多的间距规则，否则间距，很难得到控制和统一，建议定几种间距，你可以是8，16，24，48，64，如果你觉得这些间距不够用，你也可以添加新的间距规则进行，但是建议不要太多。09网格设计策略1.定最小单位先定义最小单位，单位越小页面越紧凑，目前常用比较多的有，4，5，8，假设我们最小单位是4为倍数，那我们所有的间距都按照8的倍数递增，得到间距规则，8，16，20，40，60▲2.按增量设计▲界面中所有的间距地方，全部运用8，16，20，40，60这几个原则来做设计，保证页面统一性。▲页面中的元素高度，比如banner高度也是按照间距增量去设计高度，那么整个页面就更加有系统性和科学性。▲在做系统设计时候经常用到的，通过增量来做设计，希望大家都可以掌握这种间距原则！10图形图形是界面中的灵魂，图形也是很好传递视觉语言很重要的一部分，如何保证图形一致性，打造界面中视觉记忆点，这个点很大，展开来讲很多，包括品牌符号、icon插画元素一系列等等。11总结设计语言是一个很庞大的设计体系，字体、网格系统、颜色、图形等等，包括后面定义好原子后、怎么定义组件，再到页面。文章里借鉴了一些国外设计语言网站，大家感兴趣，也可以从这些网站里学习下，看看别人是如何做的。关联文章
巧用插图做好UI界面设计
中国互联网中的个人网站一直处于弱势，个人网站的运营优化是很多个人站长经常头疼的问题。今天伊思诺小编就为大家详细介绍下个人网站运营优化。下面我们重点聊聊栏目优化与内容建设。
(一)第一部分:个站栏目设置
网站建立初期，栏目分配很重要，是搜索引擎抓取重点。以我的博客为例，当时我开设栏目没有参考过任何数据，完全是根据自己所擅长的东西设置的。如心情感(偏生活)、网站设计(技能)、日志(日记本)等。不过在这几年的运营中，栏目平均每年改一次，如今优化已基本固定成现如今大家看到的栏目。下面分享几次重点改栏目的原因。
1.第一次改栏目——根据百度指数设定
回想在2010年年初，那时候博客运营了大半年，因为资源有限，所以以借鉴为主，参考了一些网站的栏目设置方法，也借助了百度指数。如当初“网站设计”这个栏目，当时通过百度指数对比了关键词，发现“网页设计”的搜索量大约在1000次搜索左右，比“网站设计”略高。还有个原因是当时发现在百度搜“网页设计”时，首屏、右侧全是百度推广的广告，说明这个词有商业价值，竞争激烈。而搜“网站设计”只有几个广告链接，首页只有几个以“网站设计”为关键词的站，其余全是单页或文章页。
综合以上原因，我果断更改了栏目名称。后面在发布文章时刻意地把文章的标题也带上“设计”二字，均匀分布关键词，功夫不负有心人，在栏目更改后的2个月左右，百度搜网页设计已经到第一页了。总之，网站栏目是一个随时变化的过程，不要一成不变。
2.第四次改栏目——根据用户喜好而改
即使你把栏目的关键词排到第一页，其实能带来的IP也是很少的，尤其是对个人网站，几乎可以忽略，这是我得到的观点。后来也明白，网站栏目的作用更多的是让蜘蛛顺利抓取，帮助用户更直观地了解网站。这一次修改更看重用户的需求，那段时间网站有了一定数据，我会把那些点击量最高、搜索量最高、“喜欢”次数最多的文章整理出来，看看用户更喜欢哪些文章。每个CMS系统都有热门文章点击插件，我们可以把大多数文章按月、按年、按栏目、按评论量统一列出来，然后分析每篇文章的点击数和评论量为什么会高，通过上面一些文章数据可以大致分为三类。
第一类是评论较高的，主要是针对用户谈经验、谈感受的文章。第二类是从搜索引擎来的流量，主要是SEO效果，比如:GoogleDrive、SkyDivE、Discuz联盟、卖链接，这类文章要么是实时性较强，要么是搜索量较高的，全部来自长尾关键词的搜索流量。第三类是第三方推荐、自己推荐。
知道点击率为什么高了之后，我们就可以针对这些文章开设栏目，比如第一类的统一放到“经验心得”栏目中，第二类放到“免费资源”栏目里。这样每个栏目都有不同功能，有主抓用户的，承担交流互动功能;有主抓SEO的，承担索引SEO方面的功能。
(二)第二部分:网站内容建设
对于原创较多的网站来说，不可能做到篇篇经典、篇篇有共鸣。对于个人网站来说，我觉得能做好两方面就够了，和设置栏目一样，内容分为两大类:一类是用户喜欢的，一类是承担SEO功能的。用户喜欢的内容，这类用户通常是网站固定用户或相关用户，非常重要。他们喜负好的内容重点放到网站明显位置推荐，当然这个必须要站长很熟悉网站及其用户的情况。SEO方面的内容，主要承担拉新用户、流量的作用，千万不要什么热门就发什么，不然虽然流量高，但网站内容与新用户的口味不符，跳出率会异常高。
1.获取热点话题
你所处的行业一定有不少值得你学习的站，他们所关注的点就是要学习的地方。我门可以通过各种排行榜、Alexa、搜索引擎收集你所处行业的顶尖网站，并作简单分析。专业性越强的网站越有参考价值。收集它们的点击榜、热搜词等，判断小众行业哪些比较热门。这些专业性较强的网站都会多少透露一些数据，我们可以针对这些热门词语来做内容。当然还可以定期收集，制作成自己的关键词列表，再根据自己站的内容需要设置成网站Tag。
2.获取冷门话题
冷门话题是快速获得百度收录的一种方法，因为竞争小，加上网上资源匮乏，经过加工整理的冷门内容很容易获得百度青睐。单单通过发布热门话题获取流量很难，和那些权重高的大站根本无法比。连收录都成问题，又何来的排名呢?获取冷门内容方式多样，但目的无非就两个：一是获得排名，收录。二是用户喜欢，可以通过微博内容、论坛的跟帖、闲聊来获得灵感。冷门的话题是独一无二的，独特的内容越多，在搜索引擎里的权重就越高。
个人网站无论是在资源还是在数据上都无法与公司相比，很多时候我们只能通过周围的零散数据来判断分析，个人站长必须不断积累网站优化经验才能事半功倍。
网站网站运营