视觉设计是指：针对眼睛官能的主观形式的表现手段和结果。

爱美之心人皆有之”，在UI设计领域也不例外。无论APP采用什么样的设计风格，或简约、明快，或复杂、精致，大家都喜欢井然有序、外观漂亮的界面。因为漂亮的外观，首先给访问者一个不错的第一印象。然而怎么样才能做好这个给人第一印象的视觉设计呢？下面就分五点来告诉给大家如何做好UI视觉设计。

1、视觉设计—传播产品理念

只有当我们对产品抱有一个完美的理念和愿景的时候，我们才能做出优美的设计来体现理念。“QQ邮箱，常联系”是腾讯的愿景。这个愿景需要完美的产品设计，优秀的技术实现，和优质运营来达到“封面画和选词，呼应邮件含义，淡雅而不张扬”

视觉设计首先要考虑的就是整体的感觉，即视觉设计的风格。视觉设计的风格是否准确关系着设计的成败。那么一个产品的视觉设计也同样需要一个对的定位，最终以合适的视觉表现出来。我们不妨以几种聊天软件来做个的比较，从中窥视一点设计定位的视觉意味。

看下面一组图：

图一： QQ 的视觉定位是以青少年为主的，所以它的视觉设计才采用了比较明亮活泼的色彩。

图二、图三：msn 和TM 的视觉定位是以办公室工作人员为定位，所以它的视觉使用比较稳定和平静的色彩。

品牌：塑造身份

视觉设计的一个任务就是：确保手机界面像是从一个模子里刻出来的一样。它们必须有相同的logo,相同的配色方案，以及（对大部分而言）相同的布局。访问者看到一个页面，就应该可以立即识别出其他的所有页面。

什么叫品牌？

它是一个产品或整个组织给人的整体映象。

它包括logo、包装、广告、视觉呈现、当然还有APP界面本身。

令人映象深刻的品牌，具有一种身份，个性，以及自身的特色，具有能够吸引目标，与众不同的外观和感受。 更为重要的是品牌令人难以忘记。

2、视觉设计—干净，简洁，工具化

推广”很重要，“简洁”也很重要，因此舍“推广”而取“简洁”语音。邮箱放到邮箱登录后的邮箱首页右上角，但太重hardsell了，会影响一些速度和简洁性。

不多用一个图片。

在好友Qzone文章的摘要前加头像，感觉会破坏阅读感（容易吸引眼球到头像而非文章），而从关注好友的角度，头像能突出好友。但给用户2个图片，用户看哪个呢？

工具化设计意味着清晰的逻辑和操作。不是内容越多越好，是越简单越好。

视觉结构和层级关系。

页面表现的层级关系和结构是用视觉的形式表现出来的，比如包含关系及业务的先后顺序的表现。让用户通过视觉就能够直接的明白应该先看什么，后看什么，元素时间是什么关系等等。

让我们来看下面的两张图：

wordpress 博客的后台管理界面，我们可以看到清晰的从属关系：管理–>文章–>文章内的修改区域。

vista 系统的界面：三个区域的层级关系一目了然 ，“1”区要高出“2”区域，“2”区域要比“3”区域的颜色深，这样整体的从属关系就很明显。

是什么就是什么，图形达意尽量明确。

什么样子代表什么都有其特定的视觉暗示，如果不是游戏，我们应该尽量避免和用户捉迷藏。例如应该用页签来表现的从属 关系，我们不应该简单的做几个链接，这样会表达不清楚各部分关系。除此类的布局因素之外，图标的表达是视觉中的一大块，好的图形表达可以帮助用户直观 感受功能，缩短操作时间，提高效率；不过表达不好可就麻烦了，用户可能要歪着脑袋想半天！

明确你的视觉状态。

理想状态是：用户的每个操作行为都应该有相 应的视觉反馈，比如有没有选中，操作有没有成功等。仅按鼠标操作的状态分就有默认、鼠标指向、鼠标按下、鼠标点击四种状态，准确的反馈可以让用户流畅的感 觉自己的操作；关于鼠标和键盘的状态，大家在操作系统的时候注意一下，就可以看到各种操作的对应关系，而我们平时是不太注意的，因为它默默的达到了设计的 目的。站在是否可用的角度分有：可用状态、不可用状态。

请用准确的视觉来辅助信息反馈。

我们用来对应的视觉辅助图要力求表现每种情况的准确含义。当然，为了增加趣味性，我们可以允许任意表现形式或表情的存在，前提是你的表达要准确，不要有歧义，否则使用者的第一反映可能不是你要表现的，由于理解的歧义所带来的损失和挫折感会让用户感到厌恶。

下面哪一个更能体现出“对不起，出错啦！”

第二张图的淘气鬼脸图，我以为我成功了；

第三张图的表 现让我以为是在警告。

第四张图如果你犯错的时候出现了，你会想到什么？

只有第一张图让我意识到我失败了，并且有趣味性。

由此可见：

趣味性和准确性并不矛盾，我们在设计趣味性的同时，别忽略设计的准确性。

3、视觉设计—制定规范，维持统一

文字使用要规范，语法，大小，颜色，大小写都需要注意能用一个词表达的，不用一句话。能用一句话表达清楚的，不用两句话每个概念都只有唯一一种表达。如”VIP”的概念能用一种字体颜色的，不多用一种颜色能用一种字体大小的，不多用一种大小用标准组件能用标准控件的，不自己画控件能用文字的，不用图片（加图片是要申请的）保持尽可能少的格式式样维持统一，就算字体和行间距等小细节都应该关注到。

4、视觉设计—重点突出

每个页面（板块）只有一块视觉重点。并且，突出重点，不让用户去找。左边的设计排版不对，有一横条的压着的情况黄色块就不能加框，视觉会很繁杂看着不舒服，句号也是多余的。

5、视觉设计—防止不恰当的低龄化

在追求“简单”的过程中，QQMail不知不觉的变得“中性”、“成熟”化。

当我们更加理性和严谨地设计产品的时候，自然会远离“低龄”倾向。“成熟”源自合理的设计，“低龄”源自不合常理的设计。

最后来小结下：视觉设计要注意这五点。（切记）

1、传播产品理念。2、大气成熟，干净整洁，工具化。3、规范与统一。4、重点突出。5、防止不恰当的低龄化

今天的分享在这里先结束啦！想学习更多关于Ui设计的知识可以关注公众号U爱设计菇凉，有学习资料赠送哦！或者可以加QQ1289916063。资料免费送。