【绘喵干货】UI设计师需要懂的17个设计技巧

　　当你使用设计界和UI组件时，你很容易被所有需要做的设计选择所淹没。有时候，UI设计不是完全有效的，除非你一次又一次地调整它，直到你觉得很好。正如一幅图画是由数以千计的简单笔触组成的，一个优秀的UI设计需要无数的小决策，才能给用户带来轻松愉悦的体验。下面17条小贴士就能提高UI设计技巧!

　　1.淡化背景。

　　如果你确实想要吸引用户注意力，那么就需要淡出背景。这样才能让你的窗口显得与众不同，促使他们集中精力进行操作。

　　看一看下例中的窗口和暗色背景;对比让我们真正认识到菜单选项的重要性。

　　2.利用视觉层次来吸引注意力。

　　尺寸，对比度和位置都是建立视觉层次需要的。下图所示邮件内容的最大特点就是自由资源按钮，它的优势意味着你会在文字内容或者“阅读更多”按钮前注意到它。

　　3.运用色彩发挥自己的长处。

　　善用色彩!有些东西对于用户来说很重要，别怕用真正引人注目的颜色。

　　试着用你设计其他部分不经常用的颜色，试着把它们弄饱。你也许还会被视觉吸引惊呆!

　　4、定制那些社交按钮!

　　在很多设计项目中，社会媒体按钮是必不可少的。尽管一开始这看起来像一个简单的任务，但是确定它们的位置和显示方式可能有些麻烦。其中一个常见的情况就是，它们破坏了UI设计的统一。他们各有不同的颜色，这将最终给人一种互相竞争的感觉，并且和你的UI竞争视觉空间。

　　在定义你自己的界面设计时，你应该多花点时间，让它与你的UI相匹配。这样你的项目就会有很多视觉上的统一!

　　5.将形状添加到边界边缘。

　　为背景边框的边缘增加一些视觉样式，有助于分割网格。栅格的存在是不错的，但是有时候你会想要去除它。在下一节中加入图片的确可以帮助你让你的网页看上去更生动。你甚至可以使用一个箭头形状来引导用户的注意力上移或下移。尝试发挥创意，利用这一概念来表达自己的想法!

　　6.定制项目符号清单。

　　一种有用的工具，可以帮助区分内容，让用户更容易地阅读关键点。有个小窍门，你可以定制一系列的项目符号来使用定制的图片。这个方法非常好地推动你的品牌，甚至可以通过图片提供一些信息。试着用独特的颜色或者图标来把信息带回家!

　　7.按类别进行分类。

　　许多情况下，项目符号列表包含了大量信息，或者您可能会担心列表的顺序会强调应该把它们看作是平等的。如果是这样，请试着把这个内容分成两个部分。

　　对块来说，所有的东西都有相同的值。这种方法的另一个好处是，你可以定制方块，并且比简单清单显示更多的视觉信息。

　　8.使用颜色与色盲相符。

　　很多患有色盲或其它类型视觉障碍的人可能很难分辨各种颜色。如果你可以通过检查来确定你的高对比度颜色，这是个不错的主意。

　　Photoshop小贴士：事实上，Photoshop可以用来检测这一点!检视>校样设置，你就可以用不同的色盲滤镜检查对比色。

　　9.把文本分开。

　　使用大块文本很容易陷入陷阱。有时候，它可以作为设计者给你提供信息。但是，除非你想让用户坐下来喝杯咖啡来阅读，否则开始分解你的信息通常是一个好主意。使用者在寻找特定的内容，所以尽量简化它们。

　　请确认标题是唯一的，并使用项目符号驱动主页关键信息。用颜色和黑体字突出重点部位。首先，你写的东西一定要吸引人并且有趣。

　　10.使用块状而非边框。

　　利用边界和线分解内容是区别不同部位的好方法。但是，它们也会给你的设计带来混乱，尽管它单独地对你的设计有消极的影响。

　　要解决这一问题，可以通过将区域分割为不同背景色来创建边界。这样就很自然地在不同的内容区域之间建立了一条直线，从而减少了设计中的幽闭恐惧。越是少杂乱，你的内容就越突出!

　　11.合理地间隔字数。

　　就像使用块来创建没有边界的网格一样，一个精心设计的间隔也能产生同样的效果。在为两个文本段落适当间隔时，一般情况下，甚至不需要单独的背景色。

　　创建大的空格，使各个内容更加接近它们的对应标题。这样，你就能用最少的设计风格把网格牢牢抓住。

　　12.按圆角排列。

　　为UI元素设计圆角变圆，使其看起来更加柔和，这是一种常见的技术。其优点在于不会破坏网格。试着确定不管你使用的是什么尺寸，你都可以在所有的设计元素上一致地使用它。

　　你甚至可以更进一步，把其它东西四舍五入，比如图片或者图标。这个统一真的能把设计融合到一起!

　　13.根据重要性改变按钮的设计。

　　有时候，这些按钮的用途不一样，这取决于你的项目和用户目标。这种情况下，你可以通过大胆地使用颜色来强调更重要的选项，而对那些不那么重要的按钮使用较少的颜色。

　　举例来说，登录屏幕需要既适应新用户又适应现有用户，但是您可以根据自己的目标强调其中一个选项。

　　试着创建两个同样大小的按钮，但是却赋予了更大的对比。本例中，“创建帐号”被阻止了，因为大部分用户都会登录，而且只需创建一次。

　　14.使用粗单边。

　　尽管在文字超链接中看到悬停效果通常用下划线，但是你也可以用在块上。试着在滚动的过程中，在整个区块中添加一个粗下划线，使按钮能够点击。你也可以添加这类线条给内容框增加一些视觉风格。

　　15.使按钮与众不同。

　　带有大量负空间的平面设计正在变得很流行。尽管保持简洁性很好，但是用户可能不能理解导航按钮不同于普通文本。使用间距和独特的设计元素使你的按钮显得与众不同。菜单可以导航用户界面套件网站AdobeXD模板。

　　16.从游戏中获得灵感。

　　“juice”这个词在游戏开发领域中被称为“juice”，它意味着使您的游戏设计有趣。一般包括一次按按钮的弹性动画。

　　试着添加一些新的CSS动画CSS动画，或者为你的按钮或载入屏幕图标创建一个独特的视觉界面。的确，网络和应用程序开发并非游戏，你不想浪费用户的时间，但通过点击率或者天赋的确能给你的项目带来一些乐趣。

　　17.为按钮添加图标。

　　尽管只是一小段文字就足够了，但是在某些情况下，这些图标确实能够把按钮的功能带回家。将图标放置在文本旁边，类似于使用项目符号点。

　　尽管我不会用到每一个按钮，但是这有助于用户更快。