看了作品才知道，原来 UI 设计师都在做这些…

导读：

看了很那么多“UI设计到底是什么？”的文章，奈何，还是一头雾水！

对于小白来说，基本概念都不清楚，实在没办法把自己代入情景，感受这是一份怎样的工作！

与其去弄懂那些生涩的专业名词，不如直接来看看传说中高大上的UI设计师，到底是怎么让设计从无到有的吧！

本文作品来源：南宁校区优秀学员龙可莉

icon | 主题设计

UI 设计中‘图标设计’占了很大一部分。

图标是一种人人都能理解的语言，不论国籍、种族、年龄。我们现在提及的图标大部分就是移动端的图标设计，如APP图标、小程序图标设计等。

图标的分类、风格很多，设计图标的时候，怎样舒服、美观，还能抓住用户的眼球，就成了重点！

IOS | APP交互设计 

案例：家装APP

到底怎样设计一个APP？怎样让头脑中的模型落实于眼前呢？

下面的案例中从 构建思路 — 信息架构 — 原型架构 — 设计规范都一一做了分析，让你真的走进设计师的思考世界！

小提示，要用心体会其中的每一步哦，每个环节对最 后的效果展现都是十分重要的！

IOS | APP交互设计

案例2（读物APP）

与上一款APP不同，这是一个读物类APP。

针对不同的软件，会有不同的构建思路，也会有不同的细节处理，如：字体的选择、颜色的更换等。

做设计之前，一定要参考竞品是怎样设计的，最 好是同行业前几名的设计，都是非常有参考价值的。

说到信息架构，就不得不提到“交互”这个概念。

1.什么是交互

交互，即交流互动，其实这个词语离我们的生活很近，例如打招呼：

－李明：吃了吗，大爷？

－王大爷：吃啦！

简单几个字的你来我往，搭配眼神和动作，传递出了礼貌、亲近、尊敬等诸多丰富含义。

人和人之间的交互很好理解，那么人和机器间的交流互动是什么呢？

举个例子，如果你想解锁一个手机，你与手机的交流可能是下面这种情景：

－按Home键（－李明：嗨，手机，好久不见！）

－屏幕亮了没解锁，弹出输入密码页面（－手机：哎？是小明来了么？）

－输入密码（－李明：是啊！）

－解锁（－手机：欢迎欢迎~）

所以简而言之，当人和一件事物（无论是人，机器，系统、环境）发生双向的信息交流和互动，就是一种交互行为。

要注意的是，这种交流和互动必须是双向的，如果只有一方的信息输出，而没有第二方的参与，那么只能是信息展示而不是交流互动。

例如，图左的包装是单方面的信息展示，只能让人从中获取信息，而不能反过来接收信息并作出反馈，所以不是交互。

图右输入框会根据输入的内容作出正确和错误的反馈，有信息的交流，所以是一种交互。

2.什么是交互设计

词条给出的解释是：“交互设计，是人工制品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。”

其实可以简单理解为，交互设计把一个或者一系列交流互动，用文字、图像或文档等方式，从交流的内容、方式、规则等维度进行统一的设计。

并且，好的UI设计不只是让软件变得有个性有品味而已，更重要的是让软件的操作变得舒适、简单、易用，并且充分体现软件的定位和特点。

WEB | 网页设计

UI 设计师的薪资之所以高，很大一部分原因也是因为他们技能多！

网页设计对于 UI 设计师来说，也是必备功课。

企业需要通过网站呈现产品、服务、理念、文化，或向大众提供功能服务。

因此，网页设计必须首先明确设计的目的和用户的需求，从而做出切实可行的设计方案。

PLANE | 电商/平面

这里我们还是要区别一下平面设计与 UI 设计

1、侧重点不同

平面设计主要侧重于纸张媒体，ui设计更注重交互。

2、 技术支持上的不同

除了熟悉产品的用户使用习惯、交互特征之外，ui设计需要更多技术支持。

不仅仅是传统的PS、AI、coreldraw等图形处理技术。

ui设计主要应用在网页、移动界面设计中，合格的 UI 设计师对于DW、CSS、FW、IOS、android等技术也要了解，才能配合开发人员做出最 好的产品，技术是平面设计师转UI设计师最 大的难点之一。

3、实现过程不同

平面设计是用印刷工艺去实现，比如一张名片，设计好了需要印刷出来才能使用。

UI设计则是运用程度代码，设计好了后通过程序代码让设计实现其功能。

4、完成设计工作的人数不同

平面设计一个人便可以完成全程的设计。提供需求后，平面设计师便可以直接完成设计。

UI设计则需要团队成员一起设计方能完成，比如设计APP，需要客户给需求，然后产品经理，视觉设计师，程序来配合起来才能完成。

UI 设计师因为技能多，经常有大量的作品想要展示进作品集。

可其实，成熟的 UI 设计师作品集应该像南宁校区优秀学员龙可莉一样，重新进行统一设计编排！

每个技能都可以展示到位，又不杂乱无章！看的人舒服、清晰，人赏心悦目，这也是好设计的真谛！

以上这样优秀的具体实例，有没有让你更加了解 UI 设计了呢？