UI设计必看：好看的公司网站排版设计怎么做

近来，存在不少怀有学习UI设计想法的同学，于后台开展咨询若干问题之举，然而，他们虽有学UI设计之心，却好似反倒不清楚UI设计究竟所指为何，对于UI其行业的认知，仅限定于部分朋友所述、互联网查询资料以及部分培训机构老师所讲的门槛低、易入门、工资高、好就业之类，可对于UI究竟怎样、从事此行业的工作内容到底是做何事，依旧格外迷茫，紧接着，我们一起来瞧瞧什么是UI设计？

一、UI设计是什么？

软件的人机交互、操作逻辑、界面美观的整体设计，被称作UI设计，亦称界面设计。UI设计划分成实体UI与虚拟UI，互联网常常使用的UI设计为虚拟UI，UI是User Interface，也就是用户界面的简称。

呈现在显示器上的界面，包含但不限于手机界面，电脑界面，智能手表界面，银行取号机界面，机场航班显示板等。只要是经显示器呈现的界面，不论有无交互，均可理解为UI界面。设计UI界面的工作称作UI设计，从事UI设计工作的岗位称为UI设计师。

二、UI的分类？

1、移动端（GUI）

移动端，多指手机端的UI设计，被称作GUI设计，它已然是当下常可见到的UI，同时，为大部分UI设计的主要所涉工作涵盖其中。

移动端的UI，大概有这三大类别，分别是手机源生UI界面，还有APP UI界面，以及小程序UI界面。

像苹果手机厂商的手机界面，华为手机厂商具有显著特色的手机界面，小米手机厂商所拥有的手机界面，这些都属于手机源生操作系统范畴。

APP的用于手机的用户界面，涵盖了诸如京东、淘宝或微信等，所有被装入我们手机里的APP，这同样是大部分进行UI设计时的关键任务所在，也。

小程序的 UI 界面，是那种内置在微信或者支付宝等第三方平台里的小程序，近些年来，由于小程序具有开发成本低、推广便捷这类优势，进而成为了大部分公司所喜爱的一种项目承载方式，所以呢，我们日常从事小程序的工作也就渐渐多了起来，其设计方式和 APP UI 的方式是相同的。

2、PC端

电脑端即我们所讲的PC端，尽管因智能手机兴起致使大家对电脑的依赖程度降低，然而大多数公司同样会存在诸多PC端UI设计的需求，当前常见的便是企业官网以及B端后台的UI设计。

PC端的UI，大概能够划分成，PC源生的UI界面，还有客户端的UI界面，以及网页端的UI界面，这三大类别。

电脑的PC源生UI界面，像苹果系统电脑的源生UI，还有windows系统电脑的源生UI。

电脑上安装的软件用户界面，像飞书、英雄联盟端游、PS、AI等操作软件，还有一些公司的后台等，通俗讲就是要安装后才可使用的软件被统称为客户端，而这些软件的界面就被统称客户端UI，此即客户端UI界面。

网页端的用户界面，是借助浏览器，经由输入网址从而打开的网页，像企业的官方网站，站酷，花瓣这类门户类型的网站等。

论及此处，移动端与PC端存在共通之处，移动端有其原生系统UI，PC端亦有自身原生系统UI，移动端的APP UI是需安装于移动端设备的软件，PC端的客户端UI同样是要安装在PC端设备上的软件，移动端的小程序是内置于微信、支付宝等第三方APP的，PC端的网页是内置到浏览器之内的，且小程序与PC端网页均内置到第三方。

3、其他UI界面

除去常见的移动端UI以及PC端UI之外，存在一些别的UI，像是穿戴设备，举例来说智能手表，还有一些硬件产品，比如银行的取号机，以及航班展示板等，这些均属于UI界面的范畴，然而就目前情况而言，移动端UI以及PC端UI算得上是主流。

三、UI界面的构成

通常来讲，一个UI界面是由三部分构成的，分别是配色，排版以及图标。当然啦，这只是我个人的理解，说不定是不正确的呢。后面的内容会以当下UI设计师经常开展的工作，也就是APP UI界面设计来进行举例。

1、配色

这个理应极易领会，任何APP或者网页之类的UI界面均会存有自身的主色，并且具备相应的颜色搭配。通常来讲，我们对于某个软件的潜意识印象便是其主色，像微信的绿色而言，京东的红色来说，淘宝的橙色等等，我们于设计UI界面之际都会率先确定好该UI界面或者该APP的主色，以及相应的辅助色、点缀色等，这便是该APP项目的整体配色。针对不同类型的项目，要去制定与之相应的主色，因主色和想表达的视觉感受，还需去搭配相应的辅助和点缀色，这是需要学习一些理论知识以及进行大量配色练习的。

2、排版

就一个UI界面而言，我认为重要的或许就是排版了，一个界面是否美观常常是由排版来决定。并且排版不仅对UI重要，对于平面设计、美工、线下印刷同样极为重要。尤其是对平面来说，像一些书籍或者企业画册，是不存在多余配色的，整本书籍或企业画册完全是通过少部分图片与大部分文字进行排版来达成，所以扎实的排版功底就显得格外重要。

在UI界面里，排版类型存在文字跟文字搭配的情况，存在文字与图标搭配的情况，存在文字和图片搭配的情况。倘若仍旧感觉不太容易理解排版究竟是什么，那么可以以简单又直接的方式理解成，文字跟文字、文字与图标、文字和图片，摆放在一块儿怎样放置会显得好看，这便称作排版了。

关于排版的四大基本原则被提及，它们分别是对齐、对比、亲密性、重复，在《写给大家看的设计书》这一本书当中，有着极为详细的讲解，基本上而言，要是大家把这四大基本原则完全吃透了，那么大家在排版方面就不会出现太大的问题了。

3、图标

在UI界面里边，图标所占比重不小，平日咱们对界面风格的呈现通常于图标风格那儿得以呈现。鉴于在实际工作期间进行设计之际，UI并不会如大家于网上所瞧见的那般炫酷，整个界面的配色排版具备强烈的视觉冲击力，反倒常常较为朴素，图标于是成了朴素UI界面里的一大亮点以及风格呈现点。

四、UI设计师的工作

1、针对竞品开展分析活动时，那UI在从产品经理那边获取原形图之后，借助各类渠道，竭尽所能先去寻觅一批同类型的产品，进而用来施行比较以及参考的行为，以此达成内心当中对于该项目存有明晰的认知以及规划的目的。

2、展开界面设计工作时，要依据项目所属类型，考量对应的用户群体状况，结合核心价值观体现等方面，经过深入分析流程，进而挑选出契合项目具体要求的设计风格以及配色方案。

3、规范执行中要做这些事，先去制定UI设计规范，接着设计出对应的UI设计稿，并且在其完成之后，跟相关的人员开展视觉稿评审工作。

4、在对接开发这一流程当中，当评审获得通过之后，会把切图以及标注这类内容交付给负责开发的工作人员，接下来整个项目的研发工作将由这些开发人员去展开进行。

5、在开发完成了项目基本层面的研发工作之后，针对开发所产生的成品开展UI走查这一工作，想尽办法确保开发相关人员做到对UI设计稿特别高程度的还原。

6、辅助上线，开发产出获通过后，辅助开展项目上线工作，此阶段或许得提供 APP 的启动 LOGO，提供启动页，提供引导页等。

五、一张UI稿经历的阶段

1、由产品经理产出的原型图（低保真图），其作用是确定界面的大致功能，以及简单的布局。

2、UI视觉稿，也就是高保真图，它是UI设计所产出的，是完整的设计稿，其中涵盖了项目的配色，有排版，有图标绘制，还有交互状态等等。

3、研发稿：开发对UI视觉稿的代码还原，可运行的完整项目

4、上线版：最后呈现给用户使用的效果

以上便是有关啥是UI设计的详尽内容，身为一名UI设计师务必要能够顺应市场需求，紧跟行业时代技术，持续地学习满足市场对UI设计师的要求，提升自我的市场竞争力。

继续浏览有关 UI设计界面设计 的文章