如何成为ui高级界面设计师

　　UI设计作为近年来设计行业的新贵，它的薪资之高令很多设计师羡慕不已，很多平面设计师都转行UI设计，作为时下热门高薪职业之一，UI设计的发展前景显而易见。UI设计应用领域非常广泛，近几年互联网从传统的计算机网页到最新AI领域的人机交互界面，无不体现出它的市场价值，想要成为一名UI设计高级界面设计师，需要掌握的东西还是挺多的。
 

　　日前，微信官方发布《关于规范公众号内虚拟支付行为的公告》。公告称，基于 iOS 对开发者的管理规范，微信公众号内暂不支持 iOS 端虚拟支付业务。虚拟支付业务是指购买非实物商品，比如：VIP 会员、充值、录制课程、录制音频视频等虚拟产品。
 

　　从事任何行业任何岗位，扎实的基本功都是你胜任工作的基础。对于设计师而言，熟练使用常用软件工具是必备技能，因为在界面、图标、动效、交互、切图、标注等各个环节，都会用到不同的软件。接下来推荐7款高级UI设计师必备工具：
 

　　1、Photoshop：PS是一款强大的图片处理软件，因此它不只是修修照片、你用它还能完成UI设计。另外对于图标的设计，是用矢量绘图软件制作的，这样放大才不会失真，没有虚边，所以你可能还要用到AI。但是据行业数据统计，UI设计行业中，常用的主要软件为：PS和AI。UI设计用的最多的软件就是PS的，在UI设计中主要的用途是用来绘制界面和图标。
 

　　2、Adobe illustrator：简称“AI”，是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件为一款非常好的矢量图形处理工具。AI在UI设计中主要用来绘制图标，界面等设计。与PS不同的是：AI绘制扁平化图标界面的时候要比PS快。由于绘制的图形是矢量的，所以文件会非常小，也方便管理。
 

　　3、After Effects：AE适用于从事设计和视频特技的机构，包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室。属于层类型后期软件。但是在UI行业来说就是做一些UI的交互动效。动效这块是效率最高的软件，不过不能用AE画图标做界面。
 

　　4、Cinema 4D：属于跨界三维软件，起初在工业设计行业中使用广泛，这两年开始流行用建模软件做三维电商设计海报等。这个软件也属于UI设计师的必学技能，能做很多的三维动画设计，学会这个软件，能让你的设计表现力更丰富有创意。
 

　　5、Sketch：可以算是专门为UI设计开发的软件，也是矢量软件，但是只有Mac版本，Windows系统无法安装使用，这个软件有苹果电脑的就可以学习一下，而且比较简单，没有MAC电脑的可以不用学。
 

　　6、Axure RP：Axure RP是一个专业的快速原型设计工具。让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理 。
 

　　7、InDesign：InDesign 软件是一个定位于专业排版领域的设计软件。是面向公司专业出版方案的新平台，由Adobe公司于1999年9月1日发布。它是基于一个新的开放的面向对象体系，可实现高度的扩展性。并且它还建立了一个由第三方开发者和系统集成者。可以提供自定义杂志、广告设计、目录、零售商设计工作室和报纸出版方案的核心。可支持插件功能。
 

　　作为一个合格、优秀的UI设计师，你还要具备三种能力：界面视觉设计能力、交互体验设计能力、用户需求研究能力。通常，我们看到都是界面视觉设计，比如app的界面。UI 界面中，排版设计同样重要。如何将至关重要的信息，有效地传递给用户，这是界面本身的职责，而在绝大多数时候，这通常是靠文本来完成。有效的排版对于改善 UI 整体的用户体验十分重要。而优化排版，本质上也是在优化 UI 和 UX。虽然在绝大多数时候，优化排版是在提升排版布局的可读性，提升访问性，但是它最低的标准和最核心的要素，依然是要保证排版本身的「可用性」。降低用户使用时的障碍和摩擦，减少认知负荷。出色的排版设计能够让用户注意到内容，而不是排版本身上。
 

　　实用性较强的排版优化技巧：
 

　　强化层次结构来提升UI的清晰度：将必要的文本内容集合起来，重新组织，有意识地梳理视觉层次结构，要让用户能够清晰地感知到内容。对于信息层级，通常会按照标题、副标题、正文、引用说明等常见的文本元素构成。而清晰的文本层次结构，是依托于符合文本本身所属层次的响应的样式，这样才能确保可读性。大标题应当突出，正文应当清晰明了，副标题起到的是对标题的辅助说明作用，所以应当适当缩小，这样一来，文本元素之前的大小关系，位置关系都更加清晰了。
 

　　有意识地创造具有呼吸感的排版：字间距、行高、行长是在进行排版的时候，最常调整的属性。缺少足够的间距，可能会让文本难以阅读，但是间接过多，可能会让用户在阅读的时候感到稀疏难受。
 

　　根据内容来选取字体：在选取文本字体的时候，需要考虑到潜在读者的体验。不同的字体能够给界面和体验带来截然不同的体验，字体的选择能够影响用户对于界面的第一印象。正确的字体选择，能够在信息和视觉两个层面给用户传递信息，错误的选择会导致误解和混乱的结果。
 

　　使用同一字体家族,如果你在不同字体的搭配上，并没有足够丰富的经验，那么使用同一字体族的字体来进行设计，总是最为安全的选择。通常，一个字体族是为一个明确的目标来设计的。它们有着更为统一的、富有凝聚力的外观，在设计使用过程中，会更加便捷。使用字体族的另外一个好处在于，它可以更快适配不同文本元素在排版上的需求，你可以更快地通过调整字体大小、粗细、文字大小、色彩来制造相应的对比，呈现不同的视觉效果。
 

　　尽可能使用左对齐来提高可读性，在世界上绝大多数的国家和地区，所使用的文字排版都是从左到右的，阅读顺序是自上而下的。这决定了左对齐是确保可读性的重要基准。左对齐给人的双眼提供了一个扫读时候的基准位置，在大量、长时间阅读的过程在，极大地减小了阅读压力——而居中对齐则明显做不到这一点。
 

　　排版是数字时代每个设计师都需要学习和掌握的重要技能，无论你的设计项目是什么样的，这些基本的规则总能给你的设计带来更好的效果。不过这些排版技巧都还只是非常基础的部分，在实际的设计当中，还会涉及到很多更加复杂的排版布局——但是这些基础，始终是最重要的事情。
 

　　一款 App 或 Web 产品，从用户体验的角度包含了战略层、范围层、结构层、框架层、表现层。而作为 UI 设计师，如果连「表现层」的内容都还一知半解就去盲目地学习其他领域，这是不提倡的。这里说的「表现层」是指视觉设计层面，在界面的视觉设计中同样也包含了 5 个视觉要素：色彩、文字、图标、图片、空间。一个出色的界面设计，必然是将这些要素做到了淋漓尽致。
 

　　色彩三属性：人眼看到的任一彩色光都是三个属性的综合效果。
 

　　色相(H)：即色彩的相貌、种类和名称，比如红、橙、黄、绿等颜色的种类就叫色相。
 

　　饱和度(S)：即色彩的鲜艳程度，也称纯度。
 

　　明度(B)：即色彩的明亮程度。
 

　　色彩寓意：同一色相的不同明度和不同饱和度，也会对人产生不同的心理感受。
 

　　白色(White)：纯洁、神圣、干净、高雅、冷淡
 

　　红色(Red)：热烈、喜庆、热情、浪漫、危险
 

　　黄色(Yellow)：光辉、明亮、尊贵、权力
 

　　灰色(Gray)：平凡、随意、苍老、冷漠
 

　　橙色(Orange)：温暖、食物、友好、财富、警告
 

　　蓝色(Blue)：平静、纯洁、清凉、科技、沉稳
 

　　绿色(Green)：健康、自然、清新、希望、安全
 

　　青色(Cyan)：朝气、脱俗、真诚、清丽
 

　　紫色(Purple)：神秘、高贵、优雅、浪漫、妖艳
 

　　黑色(Black)：深沉、庄重、严肃、邪恶、死亡
 

　　色彩搭配：色相对比：两种及两种以上色彩组合后，由于色相差别而形成的色彩对比效果称为色相对比。色相对比的强弱程度，取决于色相之间在色环上的距离 (角度)，距离 (角度) 越大对比越强，反之亦然。一般界面的色彩搭配主要包括三种颜色：主色调、辅助色、点缀色，搭配比例分别为 6：3：1。
 

　　同类色搭配：色环上相距 0° 的颜色为同类色，一般常用同一种色相的不同明度或不同饱和度的组合方式，例如蓝与浅蓝，红与粉红等。同类色搭配对比效果统一、清新、含蓄，但也容易产生单调、乏味的感受。
 

　　邻近色搭配：色环上相距 30° 左右的颜色为邻近色 ，例如紫与蓝紫，蓝紫与蓝等。邻近色搭配对比效果柔和、文静、和谐，但也容易感觉单调、模糊，需调节明度来加强效果。
 

　　类似色搭配：色环上相距 60° 左右的颜色为类似色，例如橙与黄，黄橙与黄绿等。类似色搭配对比效果较丰富、活泼，同时又不失统一、和谐的感觉。
 

　　中差色搭配：色环上相距 90° 左右的颜色为中差色，例如红与黄橙，蓝绿与黄等。中差色搭配对比效果明快、活泼、饱满、使人兴奋，同时不失调和之感。
 

　　对比色搭配：色环上相距 120° 左右的颜色为对比色，例如红与黄，红紫与黄橙等。对比色搭配对比效果强烈、醒目、刺激、有力，但也容易造成视觉疲劳，一般需要采用多种调和手段来改善对比效果。
 

　　互补色搭配：色环上相距 180° 左右的颜色为互补色，例如红与绿，黄与紫等。互补色搭配表现出一种力量、气势与活力，具有非常强烈的视觉冲击力。
 

　　多色搭配：是由多种色彩组合而成的一种搭配方式，一般以不超过 4 种颜色为宜，规定一种作为主导色，其余作为辅助色使用。多色搭配会让画面显得更加丰富、多彩，充满趣味性，但若控制不好，也容易让画面变花，失去平衡。搭配时须注意区分主次，按比例进行调和。
 

　　文字使用规则：不同平台的界面设计中规范的字体会有不同，像移动端界面的设计就会有固定的字体样式，网页中会有常用的几个字体。
 

　　图标功能：图标是 Web 和 App 设计中的点睛之笔，既能辅助文字信息的传达，也能作为信息载体被高效地识别，并且图标也有一定的装饰作用，可以提高界面设计的美观度。
 

　　图标类型：关于图标的类型目前并没有很权威的分类，我根据图标的用途将其分为两大类：「功能型图标」和「展示型图标」。
 

　　功能型图标：凡是 UI 界面中，用户可以点击的图标均可看成是功能型图标，该类图标往往代表某一功能或某一链接的跳转。这类图标的典型应用场景就是 iOS 系统中的底部标签栏，以及 Material Design 中侧滑菜单选项的左侧。
 

　　展示型图标：相比功能型图标，展示型图标更加具有「设计感」，是独特的、有内涵的以及具备辨识度的。展示型图标主要是应用程序的启动图标。该类图标代表了一款产品的属性、气质以及品牌形象等，也是用户首先看到的内容，设计时应尽可能让用户记住并感到愉悦。该类图标在 iOS 系统中除了出现在 App Store 里，还出现在用户下载后的桌面上，以及 Spotlight 的搜索结果和设置等地方。
 

　　图标风格：图标的设计风格有很多种，如：线性图标、面性图标、线面结合图标、扁平图标、轻拟物图标、拟物图标、手绘型图标等。
 

　　1、线性图标：是由直线、曲线、点等元素组合而成的图标样式。该类图标轻巧简练，具有一定的想象空间，且不会对界面产生太大的视觉干扰。
 

　    2、面性图标：可以简单理解为对线性图标的填充，但面性比线性更加稳重和扎实，对色彩的传达也清晰明显。
 

　    3、线面结合图标：典型代表是「MBE风格」图标，其设计特点是采用了粗描边线和偏移的填充面相结合，灵动而鲜明。粗线条起到对画面的绝对分割，突显内容、表现清晰
 

　　 4、扁平图标：去掉了透视、纹理、渐变等能做出 3D 效果的元素，让信息本身作为核心被凸显出来，并且在设计元素上强调抽象、极简、符号化。
 

　    5、轻拟物图标：没有拟物图标那么写实，也不像扁平图标那么“平”，而是利用淡淡的渐变和一些光影来达到两者之间的平衡，识别性高又不失美感。
 

　　图片在 Web 和 App 界面设计中是非常常见的，图片的质量和展现方式都会影响着用户对产品的感官体验。
 

　　图片比例：不同比例的图片所传递的主要信息各不相同，我们需要结合产品的特点，并根据不同的场景来选择合适的图片比例进行设计。16：10 的图片比例最接近黄金比，而黄金分割具有严格的比例性、艺术性、和谐性，蕴藏着丰富的美学价值，被认为是艺术设计中最理想的比例。
 

　　图片排版：排版类型有很多种，根据不同的场景和所需传递的主体信息来选择与之相符的展现方式，以下是常见的几种排版类型。
 

　　1、满版型：是以图片作为主体或背景铺满整个画面，常搭配文字信息或 icon 修饰，视觉传达直观而强烈，给人大方、舒展的感觉。
 

　　2、通栏型：是指图片与整体页面的宽度相同，而高度为其几分之一甚至更小的一种图片展现方式，最常见的就是轮播图(Banner)。通栏型图片宽阔大气，可以有效地强调和展示重要的商品、活动等运营内容。
 

　    3、并置型：将不同的图片作大小相同而位置不同的重复排列，可以是左右或上下排列，能给原本复杂喧闹的版面带来秩序、安静、调和与节奏感。
 

　    4、九宫格型：用四条线把画面上下左右分割成九个小块，可以把 1 个或者 2 个小块作为一个单位填充图像，这种构图给人严谨、规范、有序的感觉。
 

　    5、瀑布流型：图片会在页面上呈现参差不齐的多栏布局，降低了界面设计复杂度，节省了空间，使用户专注于浏览，去掉了繁琐的操作，体验更好。
 

　　空间留白：对于一些特殊的页面，例如引导页、闪屏页、促销页等，可以不用严格按照栅格系统进行设计，但需要注意空间留白的运用。
 

　　留白属性：
 

　　层次感：留白可以使页面的层次感得到极大的增强，留白越大，模块、信息间的层次感越清晰。
 

　　焦点：元素越多，人的视觉注意力越容易分散;相反元素越少(即留白越大)，注意力则会更有效地聚焦在重要的内容上。
 

　　韵味：留白具有“此时无物胜有物”的感觉，犹如中国的水墨画。留白运用于页面设计中，韵味也会出现。
 

　　呼吸：留白的呼吸属性可以想象成周围的空气，当空气中的颗粒物(元素)特别多时，人的呼吸也会觉得不通透;相反留白越多时，呼吸感越顺畅。
 

　　留白表现形式
 

　　轻度留白：轻度留白是我们常见的页面留白设计形式，在传递出雅致、高端、文艺等气质的同时，又能将信息表现得清晰直接，让页面更加简洁和实用。轻度留白融合了重度留白的优势，但不受品牌属性的影响，几乎任何产品都可以用这种表现形式。
 

　　重度留白：重度留白是把主体缩小到极致，其传递出的雅致、空灵、高端气质是最强的，但与此同时，其他的属性也近乎为零。“无印良品”品牌倡导简约、质朴的生活方式，原研哉赋予其UI设计理念就是“空”。所以，重度留白传递的不是产品，而是概念、气质和态度。
 

　　在任何领域，如果想要有所成就，都需要不断的学习，尤其是像UI设计这样技术含量比较高的一些行业，想要真正做出成绩最少是系统学习专业知识技能，这样快速高效的学习其实是在提高我们的学习效率，争取把更多时间花在实践操作和经验积累上。