二、四大种类

UI设计按行业一般分为4种行业：移动端UI设计，PC端UI设计，游戏UI设计，以及其它端UI设计。

第一种：移动端UI设计

比如微信聊天界面，QQ聊天界面，手机桌面，手机上看到的所有图标界面点了后会有反应都可以理解成移动端UI设计。

（一）常见界面

1、启动界面：启动界面是用户打开app第一个出现的页面。通常都是极简风格，仅仅展现一个名字，logo或产品标语。设计师为了确保启动界面在不同设备的视觉效果，通常将设计元素放于页面中间。建议启动界面出现不超过4-8秒。

2、入门教程界面：入门教程界面是一系列展示app的页面，包括app的导航，功能和对潜在用户带来的好处。这些页面是在用户第一次启动app时出现的，可以帮助用户了解app功能特性，同时了解app是否对他们有用。现在的入门教程一般都遵循一些特定规律，首先，很多教程页面使用一些自定义的插画以一种趣味的方式来表示特定的功能或优势。而且，设计师经常用一个吉祥物，就像是与用户进行真正的交流，建立感情联系。一个强有力的标语提示对入门也很重要。提示应该简短，有用并且可读。

3、首页和菜单页：对于任何一个app而言，首页都是很重要的部分。在移动端app中，首页是用户进行最多交互选项的页面。首页的设计取虽然取决于不同的产品和产品用途，但是还是有一些重要元素是类似的。首先，首页通常应该有搜索框或按钮，以便用户查找需要的内容。而且，鉴于首页是用户使用产品的开始，所以首页应该包含导航功能，以便用户能进入不同的区域。

4、登录界面和个人资料界面：登录界面应该是极简，清晰，以便用户登录app。通常只有姓名，密码和一按钮。对于那些第一次登录app的用户来说，通常还应该有一个注册的选项。App里有了个人资料页面，会使app更加个性化，根据每个用户的特征进行有效的app内数据处理。设计师的最大职责就是通过智能的用户体验将个人资料的便易性最大化体现。

5、统计界面：各种应用程序都包含用户活动的统计信息。它提供的数据越多，创建统计界面的设计就越困难。设计人员需要确保看到的界面必须清晰并且包括所有可用的关键信息。图形曲线，比例和原始图标可以使统计界面在移动应用程序上看起来流畅和干净。此外，统计界面需要不同的排版，以便用户可以轻松读取数据。

6、日历：活动应用，待办事项列表应用以及许多其他应用都需要为用户提供日历。根据app的类型，日历可以完成某些功能，例如提醒或计划。视觉风格应该匹配移动app的主题和目的。

（二）电商界面

1、目录界面：任何电子商务项目的主要目标是销售产品。设计师的工作是设计目录，吸引用户注意并鼓励他们购买产品。产品的照片或插图质量应该很高，以便用户可以清楚地看到他们将要购买的东西。目录界面应包括一个号召性用语按钮，用户可以通过该按钮将商品添加到购物车。这样，用户就可以直接从目录屏幕上获取产品信息，而无需转到此特定位置的页面。

2、商品信息界面：商品信息界面显示有关商品的关键信息，帮助用户决定是否需要购买此产品。设计师专注于屏幕中心的照片，描述数据通常放在下面。设计人员可以将数据划分为大小，材料或其他的分类，以便用户可以轻松找到所需的信息。

3、结算界面：结帐流程是用户在购买产品之前的最后一步。设计师的任务是让人们在采取这一步骤时感到舒适。对于用户来说，让用户了解他们的个人信息安全很重要，因此设计师必须通过视觉元素向用户保证他们的信息是安全的。

（三）社交界面

1、即时资讯：人们经常使用各种社交app进行通信，并关注它们周围的新闻和更新。Feed是一个有新闻和用户关注的信息流。实践表明，移动用户更喜欢通过Feed快速扫描信息，因此他们需要一个简单明了的设计，不会因视觉上的细节而分散注意力。新闻可以通过滚动的方式逐一呈现。为了使导航更直观，应该显示下一个新闻的一部分。

2、联系人：通讯录界面向用户显示名称按字母顺序排序的联系人数据列表。每个联系人都可以点击进去，有详细的数据，其中包括电话号码，电子邮件，有时还包括Skype，Messenger等联系人。此外，联系信息有一张小照片，使搜索过程更容易。

（四）音乐界面

1、播放列表：音乐爱好者喜欢为每个场合创建自己的播放列表。每个音乐app都有义务为其用户提供此类功能。播放列表屏幕在不同的app上看起来非常类似：通常都会显示歌曲，歌手或乐队的名称，以及音轨的长度的列表。此外，设计师可以添加此曲目所属的专辑的封面。如果歌曲没有封面，那么仍然应该有一个图标，比如音符图标。

2、播放器：这个功能可以使用易于看到的按钮切换，停止和开始播放。播放器通常位于屏幕底部的中央。 屏幕的主要部分通常由图片连接。此外，有时候，许多设计师将音乐可视化应用作为屏幕的中心部分。

第二种：PC端UI设计

那么除了我们的移动端UI设计之外，还有我们的PC端UI设计，PC端UI设计就是我们电脑上的软件和网页按钮，比如电脑版的QQ，微信，电脑管家和网页的一些按钮图标等都属于PC端UI设计。

其实移动端UI设计和PC端UI设计是差不多的，只不过平台不一样。PC端的载休是电脑，移动端的载体是手机。

（一）PC端和移动端也有些区别:

1、用户也界面交互/操作方式的不同：

PC端：一般以鼠标和键盘为媒介，拥有灵活的交互形式。PC端的功能往往比较复杂，用户需要操作鼠标来完成各种操作。

移动端：直接用手指触控屏幕，除了最通用的点击操作之外，还支持滑动、捏合等各种复杂的手势。

2、设备尺寸的区别：

PC端：有较大的屏幕，不同PC的分辨率也不同，软件窗口最大化的尺寸也不同，并且窗口可自由缩放。

移动端：设备尺寸相对较小，不同设备的分辨率差异化较多，特别是安卓系统的设备；并且支持横屏、竖屏调转方向。

3、使用场景的区别：

PC端：通常坐在某个室内，使用时间相对较长，用户更为专注。

移动端：可能是长时间在室内使用、也可能是利用碎片化的时间使用，或站或坐或躺着或行走，姿势不一。用户很容易被周边环境所影响，对界面上展示的内容可能没那么容易留意到；用户在移动过程中更容易误操作，需要考虑如何防止误操作、如何从错误中恢复。

4、网络环境的区别：

PC端：网络相对稳定，基本无需担心流量问题。

移动端：因用户使用环境复杂，可能在移动过程中从通畅环境到封闭的信号较差的环境，网络可能从有到无、从快到慢；既可使用无需担心流量的WiFi，也可能使用需要控制流量的3G/4G。

5、通知方式的不同：

PC端：通过右下角弹窗方式，或通知中心以小红点加亮。

移动端：通常使用推送通知给用户的方式。

（二）设计技巧

1.网页可用性

近些年来的UI设计趋势，慢慢使我们错认为美观是凌驾于功能之上的，认知里忽略了美观之前还有可用性。其实，不止是美观，可用性还应该是排列在易用性之前的。如何在网页的设计中使得可用性变高，还需要设计师在确保基本功能后，再反复确认它们在导航、搜索框、页脚中的适用情况，提高用户对网页的信任度~

2.页面排版

目前互联网最新的排版设计分为极简主义和扁平化设计, 它们都崇尚简约风并且都侧重于呈现内容。至此，在内容的排版上，首先应该注重空间设计，这里离不开段间距和行间距。文本过大，行间距应控制在文字高度的120%到150%；另外较小的文本，则可参考移动端，以适合用户的最佳体验感为参考指标。另外，留白的运用也是UI设计的一大要素，在留白对比的映衬下，文字和按钮的存在感会提升。

3.主次搭配

当位置确定之后，一个有效的层次搭配基本上就棱角分明了，将导航栏、标题栏、按钮、文字、搜索框以及网页中所穿插的图片这些承载了明确信息的指标元素进行合理安排，确保引导用户行为，在交互的层面上，进行加工修饰，最终一款层次分明，单纯而不做作的艺术科技品将油然而生。

4.文案渲染

普通文案，便是以精悍短小而口口相传，如果将其放在网页中，那么此时的文案，更是在简练的基础上扛起了引导用户的flag，它让在用户目光所及之处便能最短时间内掌握有效信息。

5.元素尺寸

低调性冷淡风，不是苹果就千万不要轻易尝试，我们普通用户的视觉冲击里，还是低调复杂轻奢风更能吸引眼球，譬如基于用户不同的需求，当位置的按钮尺寸不一样（这还不麻烦嘛），加上设计几个相对固定的尺寸比例，可以更好的控制用户整个视觉和体验。另外，对用户的注意点也可以进行引导，还可以通过对内容进行强弱处理。比如有些网页故意把分享的按钮设计得比其他按钮大一点，放在比较醒目的位置，以便于用户主动去分享，传播那些商家想要分享的内容

6.修饰过重

一个网页的设计，如果糅杂N多修饰，插画、特效、色彩以及多种主流设计趋势，明晃晃光闪闪，势要打造一场视觉的盛宴，结果辣了用户的眼，错失真正想要传达信息的机会。所以，当你筹谋已久想要大展身手，甚至采用了当下最时髦的设计趋势，辅以special的设计元素、切记一切从简，保持主次分明。很多时候，一个设计趋势，比三个趋势叠起来更加受用。

7.体验反馈

这是一个极其常见细微但无人能保证万无一失的细节处理，不管UI设计做到如何惊天地泣鬼神的样式粗来，最终还是要落实到用户体验，这个时候，UI设计师自己应是第一批用户，甚至是最挑剔的那一批，将所有搜索方式、按钮点击、网页加载等待时长、以及个人视觉体验、寻找信息便利途径等一一进行实践，这也是最后重要的一步。

第三种游戏UI设计

比如王者荣耀，英雄联盟和一些其它游戏中的登录界面、都是属于游戏UI设计。而游戏UI设计有5个基本原则：

1、视觉流的引导视觉流，就是我们在查看单个界面时的视觉流程。一般而言，我们在设计页面的时候会尽量考虑人眼的视觉规律，比如最重要的功能不要放在视觉盲区范围内。眼睛的视觉流是可以通过对界面控件合理的层级罗列，恰当的布局来进行有效引导的。

2、相似相近原则相似相近，就是“风格统一，同类相近”。风格统一，要保证同一类图标外形上的一致，即使按钮因为字体长短而变得长短不一，但是至少从外形看起来是同一类的。主页面右侧图标群的做法，在每一个图标的文字下方增加同样的灰色渐变半透底图，这种由部分到整体的做法很好的保证了这些功能图标的一致性。

同类相近，同一类型控件的位置要离的近一些，即使没有图案的框选，也能知道它们属于同一类按钮。

3、色彩偏向和色彩层次色彩偏向，也就是主色调。在任何一个画面中，色彩都不宜过多，不同色系最好不要超过3种。在游戏界面中，可以使用黄金分割率来做出划分，主色调约占60%，辅助色占30%，突出色占10%。色彩层次，在UI制作中，因为精确度要求很高，色彩的亮度和面积有个反比应用关系，它直接决定了UI原色的主次关系问题。背景色经常表现为无彩色（黑、白、灰），或者低饱和度的色彩。面积越小的颜色要越亮越纯，面积越大颜色就要增加灰度或者降低亮度，色彩的层次出来了整个界面的信息传递就会很舒服。

4、字体节奏

好的字体设计，形状和大小都会直接影响到玩家接收信息的速度。同一个页面中，使用同一字号，同一类型的字体，会让信息的传达变得冗杂而费力。但是如果给字体在信息重要度的基础上增加点变化，马上节奏感就出来了，信息的层级也一目了然。所以根据不同的功能场景，使用不同的字体样式也是极为重要的。字体设计的技巧：比如可以都是4的倍数，你的界面里面会出现12px，16px，20px，24px几种字号的字体。

5、目标导向原则目标导向，在游戏中，每一个界面都是具有相应目标功能的，玩法也好养成也罢，界面展示的信息必须是这个功能需要让玩家获的信息。功能可视化，寸土寸金的界面里面，如果表示不同的功能，那么就应该在图标上也作出区分。最后的调优方案是：增加指向箭头，对原料进行框选，对目标物品的显示进行排版上的调整。单一页面精简功能，同一个页面上可实现的功能最好不要超过三个，功能太多，玩家到了这个页面潜意识会特别烦躁。

四种：其它端UI设计

最后一种就是其它端UI设计，像VR界面、AR界面、银行取款机界面、这些都属于其它端UI设计，其它端UI设计用户较少，但又需要，未来有可能很火，有可能保持现状。

（本文由作者整理）