0基础学UI设计,我们改如何开始

不知道0基础想转行UI设计师的你,在网上看了很多关于学习UI的文章或教程后,有没有感觉入行UI设计师前,需要学习的知识和技术非常多呢?

不知道0基础想转行UI设计师的你,在网上看了很多关于学习UI的文章或教程后,有没有感觉入行UI设计师前,需要学习的知识和技术非常多呢?

这个答案是肯定的,毕竟隔行如隔山,要重新学习的知识和练习很多,但也并不是全部都挤在同一个时间进行学习,学习还是有分为入门、中级、进阶等不同的阶段步骤,而好的学习步骤,可以帮助你累积事半功倍的成果,这篇就要和大家分享我统整出3个学习步骤要点。


一、前置功课

在开始讲述入门学习UI设计的要点之前,建议你先完成以下的事项


1.基础平面设计知识学习

掌握PS和AI软件,当你拥有平面设计知识后,再去学习他他类型的设计,就会发现很多设计都是由平面设计的基础作延伸。

平面设计知识包含了色彩、排版、文字、视觉等知识,其实要认真学习起来还真的很多,但这阶段只先求基础的平面知识即可。


2.学习绘图软件

实作设计毕竟还是需要使用电脑软件工具来进行,目前业界比较热门使用的工具是Adobe XD、Sketch、FIgma。

但若你已经自己会Photoshop、Illustrator也可以先继续使用没关系,毕竟设计没有限定说一定要用什么软件工具完成(但一般公司都要求要会XD)

0基础学UI设计!小哥有话说


以上3个工具功能都差不多,只要会其中一个,就基本3个都会用,设计工具都比较简单,你可以根据自己的电脑选择使用。

如果你是WIN系统电脑的就学XD或FIgma,如果你是苹果Mac系统就学下Sketch,这个软件是Mac电脑专用软件。

当然,常用软件工具使用只要2-3天就学会了,更重要的是学设计技能才是核心,很多人初学UI设计,拼命去学软件工具,每个功能都想学精通。

其实学在工作中常用的几个设计工具就那么几个,不用费太多时间去学全面工具,因为学了大多也基本用不上,所以UI小白很多都是容易走弯路。


3.了解设计规范与元件

UI设计师主要常碰到的设计大多都是网页或是APP,所以累积一些网页和APP UI的使用经验,能够帮助你去进行设计时,对于要使用哪些操作元件、排版方式等等的设计灵感来源,毕竟用过的东西还是最印象深刻。

若还可以去了解设计的规范更好,下面也推荐几个资源

网页:Bootstarp 4、Element UI

APP:IOS、Android

以上若已预备完毕,就可以开始进行下面的学习要点。


二、学习的3步骤

在平面设计理论当中有提到,一个平面的基础构成元素由‘点、线、面’这三个部分所组成,这三个元素的相依关系是从一个单点,再到点与点相连可成为线,而线与线延伸可成为面

将点、线、面的逻辑用来解析网页或APP的话,不管是网页或APP,都是由很多个页面所组成,一个一个页面我们可以称为点,页面与页面彼此间又有流程关系,这就可以称为线,而网站和APP都是由很多组流程所架构出来,我们可以将这些流程的集合体称为面,也是作为整体的意思

当我们学习分为点、线、面这三个步骤来分别进行,学习就可以更有脉络和专注性,当然不少技能,我也是报名了线上UI班学习学到的,花了4000不到学费,还是挺值得,并且学习效果也让我很满意,接下来就来说明这三个步骤的学习内容吧!


三、点的练习,单一页面设计

单一页面的设计练习,主要目的是提升视觉设计的能力

通常一开始会先临摹好的设计,从中训练观察力和实践力,完成临摹之后,再加入自己的设计灵感来进行变化,听似很容易,但这考验著你如何观察设计上的细节,下面提供几个主要练习方向:


1.元素统合

当确认好设计的主题后,总得需要了解有哪些内容吧?例如我们要设计一个登入页,就要统合登入页需要呈现哪些内容,可能有logo、标题、文字输入框、按钮…等等,这部分可以去参考实际的成品会是最快的方式


2.内容排版

排版在UI设计中是很重要的基本能力,从内容元素对齐方式、彼此间的间距、元素摆放位置、浏览的易读性、视觉的平衡性等等都可以非常讲究,排版排的好也等于成功设计的50%成分了


0基础学UI设计!小哥有话说


3.颜色配置

配色跟排版一样是视觉设计中很重要的一环,好的配色可以抓住人们的目光,不好的配色反而会让人倒退三步,并且拒绝继续浏览下去

建议先从单一色开始,之后在慢慢尝试加入一个一个颜色,颜色越少难度越低,颜色越多难度就越高


0基础学UI设计!小哥有话说


4.元件的设计

这边的元件指的是输入框、按钮这类可以被使用操作的元素,主要可以尝试用不同的形态方式来做呈现,例如用线画框、用面画出一个区块或者加入3D立体的元素、阴影的应用呈现等等,这些都可以做尝试


5.文字

文字的练习不外乎就是字体的选用、字重粗细的应用、字间距的设定等等,一个设计的好坏,往往可以从文字的使用感受出来,属于魔鬼藏在细节中的设计重点


0基础学UI设计!小哥有话说


6.尺寸

UI设计一定都会用萤幕作呈现,不论是电脑萤幕、平板、手机,用对的萤幕尺寸作设计很重要,事先了解被常用来作UI设计的萤幕尺寸就格外重要。


0基础学UI设计!小哥有话说




四、线的练习,页面流程设计

页面流程的设计练习,主要是训练如何串连页面,来达成某一情境中的目的,也可以想作是使用者要达成某一目的操作的过程。

一开始一样会找现成的流程来做分析研究,通常会有一条主要流程,但也会有很多支线流程来因应使用者的操作变化状况,可以说是听似简单,但却不容易,关系到如何找到或想到不同情境面向的状况处理,但我们还是由浅入深一步步进行吧,下面提供几个主要练习方向:


1.研究现有操作流程

找一个网站、APP或服务来研究他的操作流程,通常要达成一个操作目标会有一个主要流程,这流程是作为最理想情况使用,例如进行会员登入流程时,完全没有发生输入错误、密码遗忘、或根本没帐号等等的情况


0基础学UI设计!小哥有话说


尽可能将页面上所有功能都操作一遍,进而暸解每个过程的最后达成的目的,也设想其他不同的使用情境来操作,例如使用者忘记帐号是什么方式注册,借此了解可以用什么方式处理这些情境


2.将流程纪录下来

将流程记录下来是非常重要的事情,主要可以梳理并记录脑袋所接触到的讯息,通常我们会使用流程图绘制User flow,可以更有效纪录流程上的不同状况处理,方便之后设计页面时的流程对照


0基础学UI设计!小哥有话说


3.绘制相关的页面

有了流程后就会知道需要有哪些页面进行流程的呈现,例如成功/错误的回馈画面、不同操作方式的处理,将这些页面都绘制出来后,就可以将页面串起,并从头对照一下流程图,看看页面是否有满足流程上的需求页面

一开始就要无中生有一个服务的确蛮有难度,主要原因是没有确切的主题和需求可以进行发想,这边建议先从我们常接触的流程开始下手,例如登入注册流程、电商网站结帐流程等等,这些也是业界比较有共识的流程


五、面的练习,整体产品规划

整体产品规划的练习,主要是训练自己有能力完成一个完整的服务,各样功能流程要如何相应配合

这部分是最庞大也是最重要的练习,一开始先从常用熟悉的网站或是APP作为练习主题,可以更快了解到实际营运的网站、APP有哪些资讯、功能是大家都会设计,这样你的基本观念才够与现实接轨,下面提供几个主要练习方向:


1.列出所有的功能分类

了解网站、APP实际规划的内容功能有哪些,以购物网站为例,功能分类就有首页、商品浏览、查询订单、个人资料管理等等;以通讯软体APP为例,功能分类就有联络人列表、近期聊天纪录列表、功能设定等等

通常我们会用Sitemap列出所有的服务功能大项目,才能知道网站、APP总共有哪些功能,最好也多研究几个同性质的产品,透过此方式可以观察同一个范畴中有没有不太一样的差异


0基础学UI设计!小哥有话说


2.列出所有页面

列出大项目后,就需要暸解这些项目中的流程,也就是很多页面流程的研究分析,这样才能够知道需要哪些页面做乘载呈现

在业界设计师的设计稿最后就是这么一大包,全部的画面都要交代和绘制出来,流程也都要理顺,通常会出的文件有Sitemap,用来说明有多少的大功能、子功能要进行,再来是不同功能的user flow,用来说明操作上的逻辑和对应的页面呈现,最后是所有页面的mockup完稿图


0基础学UI设计!小哥有话说


这部分其实会花蛮多时间进行,建议先从规模较小、功能较单纯的开始,例如小型购物网站、公司形象网站、串流音乐APP、拍照APP等等,从单纯再到繁杂会是比较好的学习过程。

0+1

评论0